/* ========================= THEME VARIABLES ========================= */
:root{
  --bg-900:#030417;
  --bg-800:#071026;
  --panel:#0e1a2a;
  --glass: rgba(255,255,255,0.03);
  --accent:#4db6ff;
  --accent-2:#7cf0c9;
  --muted:#98b0c8;
  --text:#eaf6ff;
  --danger:#ff6b6b;
  --radius:16px;
  --shadow-s: 0 10px 30px rgba(0,0,0,0.6);
  --transition: 220ms cubic-bezier(.2,.9,.3,1);
}

/* ========================= RESET ========================= */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg,var(--bg-900),var(--bg-800)); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{ color:var(--accent); text-decoration:none; }
button{ cursor:pointer; font:inherit; }

/* ========================= BACKGROUND ORNAMENTS ========================= */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(800px 400px at 5% 10%, rgba(77,182,255,0.05), transparent 35%),
    radial-gradient(700px 350px at 95% 90%, rgba(124,240,201,0.03), transparent 30%),
    linear-gradient(180deg,var(--bg-900),var(--bg-800));
  opacity:1;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.01) 1px, transparent 1px);
  background-size: 4px 4px, 18px 18px;
  mix-blend-mode: soft-light; opacity:0.28;
}

/* ========================= LOADER (CON BARRA) ========================= */
#introLoader{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:99999;
  background: linear-gradient(180deg, rgba(3,4,7,0.98), rgba(7,16,34,0.98));
  transition: opacity 420ms ease, visibility 420ms ease; gap:18px; flex-direction:column;
}
#introLoader.hidden{ visibility:hidden; opacity:0; pointer-events:none; }
.loader-card{
  width:420px; max-width:92%; padding:20px 22px; border-radius:18px; background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.03); box-shadow: 0 20px 60px rgba(0,0,0,0.7); display:flex; flex-direction:column; gap:14px; align-items:center;
}
.loader-top{ display:flex; gap:12px; align-items:center; }
.loader-logo{ width:84px; height:84px; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg,#061022,#0b1628); border:1px solid rgba(255,255,255,0.04); }
.loader-logo img{ width:74px; height:74px; object-fit:cover; }
.loader-title{ font-weight:800; font-size:1.05rem; letter-spacing:0.4px; color:var(--text); }
.loader-sub{ font-size:0.92rem; color:var(--muted); }

/* progress bar */
.progress-wrap{ width:100%; display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.progress-bar{
  width:100%; height:12px; border-radius:999px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.02); overflow:hidden;
}
.progress-bar .bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition: width 800ms cubic-bezier(.2,.9,.3,1); box-shadow: 0 6px 18px rgba(77,182,255,0.08); }
.loader-eta{ font-size:0.82rem; color:var(--muted); text-align:center; }

/* animated dots after */
.dots{ display:inline-block; margin-left:6px; }
.dots::after{ content:"..."; animation: dotPulse 1000ms steps(3, end) infinite; }
@keyframes dotPulse{ 0%{ color: rgba(255,255,255,0);} 50%{ color: rgba(255,255,255,0.6);} 100%{ color: rgba(255,255,255,0);} }

/* ========================= APP SHELL & NAV ========================= */
.app{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:18px; gap:18px; }
.topbar{
  width:100%; max-width:1200px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 30px rgba(0,0,0,0.55);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ width:64px; height:64px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.04); background:#081023; box-shadow: 0 8px 28px rgba(77,182,255,0.04); display:flex; align-items:center; justify-content:center; }
.brand-logo img{ width:56px; height:56px; object-fit:cover; }
.brand-text .title{ font-weight:800; font-size:1.05rem; }
.brand-text .subtitle{ color:var(--muted); font-size:0.85rem; }

/* NAV MENU */
.nav{ display:flex; align-items:center; gap:8px; padding:6px 8px; }
.nav button{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02); color:var(--text); font-weight:700; transition: transform var(--transition); }
.nav button:hover{ transform: translateY(-3px); }

/* UTILITY GROUP */
.top-actions{ display:flex; gap:8px; align-items:center; }

/* CARD LAYOUT */
.card{ width:100%; max-width:1200px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:18px; border:1px solid rgba(255,255,255,0.04); box-shadow: 0 18px 64px rgba(0,0,0,0.6); overflow:hidden; }
.card-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid rgba(255,255,255,0.03); }
.card-body{ display:grid; grid-template-columns: 1fr 1fr; min-height:540px; }
@media (max-width:980px){
  .card-body{
    grid-template-columns: 1fr;
    min-height:auto; /* ← necesario */
  }
}

/* PANES */
.pane{ position:relative; padding:16px; min-height:520px; display:flex; flex-direction:column; gap:12px; }
.pane + .pane{ border-left:1px solid rgba(255,255,255,0.03); }
@media (max-width:980px){ .pane + .pane{ border-left:none; border-top:1px solid rgba(255,255,255,0.03);} }
.pane-header{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.02); background: rgba(255,255,255,0.01); border-radius:12px; }
.pane-title{ font-weight:800; font-size:1rem; }

/* IMAGE FRAME & CONTROLS */
.image-wrap{ position:relative; padding:14px; display:flex; align-items:center; justify-content:center; height:calc(100% - 60px); overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,0.008), transparent); border-radius:12px; }
.image-frame{ position:relative; max-width:100%; max-height:100%; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.03); background:#030617; display:flex; align-items:center; justify-content:center; }
.image-frame img{ width:100%; height:100%; object-fit:contain; transition: transform 160ms ease, filter 160ms ease; transform-origin:center; }

/* overlay info */
.overlay-info{ position:absolute; right:12px; bottom:12px; padding:6px 10px; border-radius:10px; background:rgba(0,0,0,0.45); color:#cfe8ff; font-size:0.84rem; border:1px solid rgba(255,255,255,0.04); backdrop-filter: blur(6px); }

/* zoom controls */
.zoom-controls{ position:absolute; top:12px; right:12px; display:flex; gap:8px; z-index:5; }
.zoom-btn{ padding:8px; border-radius:10px; background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.04); color:#d8f5ff; cursor:pointer; transition: transform var(--transition); }
.zoom-btn:hover{ transform: translateY(-2px); }

/* controls */
.controls{ display:flex; align-items:center; gap:10px; padding:10px; border-top:1px solid rgba(255,255,255,0.02); background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }
.file-input{ position:relative; display:inline-flex; align-items:center; gap:10px; }
.file-input input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-label{ padding:10px 14px; border-radius:12px; border:1px dashed rgba(124,240,201,0.12); background:rgba(124,240,201,0.03); color:var(--accent-2); cursor:pointer; transition: transform var(--transition); }
.file-label:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(77,182,255,0.06); }

/* buttons */
.btn{ padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.04); background:linear-gradient(180deg, rgba(77,182,255,0.06), rgba(124,240,201,0.03)); color:var(--text); font-weight:700; cursor:pointer; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }
.btn-primary{ background: linear-gradient(180deg, rgba(124,240,201,0.2), rgba(77,182,255,0.16)); border:1px solid rgba(124,240,201,0.45); color:#eafff7; }
.btn-danger{ background: linear-gradient(180deg, rgba(255,107,107,0.12), rgba(255,107,107,0.08)); border:1px solid rgba(255,107,107,0.38); color:#ffecec; }

/* progress */
.progress{ width:180px; height:8px; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.02); overflow:hidden; }
.progress .bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition: width 160ms linear; }

/* toast */
.toast{ position:fixed; bottom:22px; right:22px; padding:12px 14px; border-radius:12px; background:rgba(0,0,0,0.75); color:#e6eef8; font-size:0.9rem; border:1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(0,0,0,0.6); display:none; z-index:999; }

/* settings */
.settings{ padding:12px 16px; border-top:1px solid rgba(255,255,255,0.02); background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:980px){ .settings{ grid-template-columns:1fr; } }
.setting-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,0.02); background:rgba(255,255,255,0.02); }
.setting-label strong{ font-weight:800; font-size:0.92rem; }
.setting-control input[type="range"]{ width:160px; }

/* footer */
.footer{ width:100%; max-width:1200px; color:var(--muted); font-size:0.85rem; padding:8px 4px; display:flex; justify-content:space-between; align-items:center; }

/* accessibility focus */
button:focus, input:focus{ outline: 3px solid rgba(77,182,255,0.10); outline-offset:2px; }

/* small util */
.hint{ color:var(--muted); font-size:0.9rem; }

@media (max-width:600px){
  .topbar{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .nav{
    flex-wrap: wrap;
    width: 100%;
  }

  .nav button{
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }
}