/* Atena · Diagramación — hoja de estilos única, sin dependencias externas
   ---------------------------------------------------------------------
   Temas: el modo claro se define en :root.  El oscuro se redefine dos veces —
   bajo prefers-color-scheme (para quien no ha elegido) y bajo [data-theme=dark]
   (para quien sí).  La media query se excluye cuando hay una elección explícita
   de modo claro, de forma que el botón gane en ambas direcciones.            */

:root{
  --brand:#072D41;            /* color principal */
  --brand-hover:#0A415E;
  --brand-soft:#E8EFF3;
  --brand-ink:#072D41;
  --on-brand:#ffffff;

  --bg:#f4f6f8; --surface:#ffffff; --surface-2:#eef1f4;
  --border:#e0e5ea; --border-strong:#c8d1d9;
  --text:#101820; --muted:#5c6873; --faint:#8593a0;

  --ok:#0f7b4f; --ok-soft:#e4f4ec;
  --warn:#8a5a00; --warn-soft:#fdf1dc;
  --err:#a8271f; --err-soft:#fbe9e7;

  --logo-mark:#072D41; --logo-word:#3D4549;

  --radius:10px;
  --shadow:0 1px 2px rgba(7,45,65,.06), 0 4px 16px rgba(7,45,65,.06);
}

/* Oscuro por preferencia del sistema — salvo elección explícita de claro */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#6FB3D6;
    --brand-hover:#8AC4E1;
    --brand-soft:#0E2A3A;
    --brand-ink:#9CCDE6;
    --on-brand:#062231;

    --bg:#0B1419; --surface:#111D25; --surface-2:#182731;
    --border:#22343F; --border-strong:#334A58;
    --text:#E6EDF2; --muted:#98A9B5; --faint:#6C808E;

    --ok:#4ec08a; --ok-soft:#12281f;
    --warn:#e0aa53; --warn-soft:#2b2114;
    --err:#f08078; --err-soft:#2d1817;

    /* El logo original es #143C51: invisible sobre fondo oscuro. */
    --logo-mark:#ffffff; --logo-word:#D3DDE4;

    --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 18px rgba(0,0,0,.28);
  }
}

/* Oscuro por elección explícita */
:root[data-theme="dark"]{
  --brand:#6FB3D6;
  --brand-hover:#8AC4E1;
  --brand-soft:#0E2A3A;
  --brand-ink:#9CCDE6;
  --on-brand:#062231;

  --bg:#0B1419; --surface:#111D25; --surface-2:#182731;
  --border:#22343F; --border-strong:#334A58;
  --text:#E6EDF2; --muted:#98A9B5; --faint:#6C808E;

  --ok:#4ec08a; --ok-soft:#12281f;
  --warn:#e0aa53; --warn-soft:#2b2114;
  --err:#f08078; --err-soft:#2d1817;

  --logo-mark:#ffffff; --logo-word:#D3DDE4;

  --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 18px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* ── logo ───────────────────────────────────────────────────────── */
.logo{display:block; height:36px; width:auto}      /* barra: 30px + 20% */
.logo .lg-mark{fill:var(--logo-mark); transition:fill .18s ease}
.logo .lg-word{fill:var(--logo-word); transition:fill .18s ease}
.logo-lg{height:62px; margin:0 auto}              /* login: 52px + 20% */

/* ── estructura ─────────────────────────────────────────────────── */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 24px; height:64px; background:var(--surface);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand .sep{width:1px; height:20px; background:var(--border-strong); flex:none}
.brand .app{font-size:14px; font-weight:600; color:var(--muted); white-space:nowrap}
.tools{display:flex; align-items:center; gap:9px; flex:none}

.wrap{max-width:1000px; margin:0 auto; padding:32px 24px 72px}
.wrap.narrow{max-width:420px; padding-top:11vh}

h1{font-size:23px; letter-spacing:-.02em; margin:0 0 6px}
.sub{color:var(--muted); margin:0 0 26px}

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;
}

/* ── botón de tema ──────────────────────────────────────────────── */
.theme{
  display:inline-grid; place-items:center; width:34px; height:34px; flex:none;
  border:1px solid var(--border-strong); border-radius:8px;
  background:var(--surface); color:var(--muted); cursor:pointer; padding:0;
}
.theme:hover{color:var(--text); border-color:var(--brand)}
.theme svg{width:17px; height:17px; fill:none; stroke:currentColor;
           stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.theme .i-sun{display:none}
:root[data-theme="dark"] .theme .i-sun{display:block}
:root[data-theme="dark"] .theme .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme .i-sun{display:block}
  :root:not([data-theme="light"]) .theme .i-moon{display:none}
}

/* ── pasos ──────────────────────────────────────────────────────── */
.steps{display:flex; gap:8px; align-items:center; margin:0 0 24px; font-size:13px; color:var(--faint); flex-wrap:wrap}
.steps .on{color:var(--brand-ink); font-weight:600}

/* ── formularios ────────────────────────────────────────────────── */
label{display:block; font-size:13px; font-weight:600; margin-bottom:7px}
input[type=password], input[type=text], input[type=number]{
  width:100%; padding:11px 13px; border:1px solid var(--border-strong);
  border-radius:8px; background:var(--surface); color:var(--text); font-size:15px;
}
input[type=number]{font-variant-numeric:tabular-nums}
input:focus{outline:2px solid var(--brand); outline-offset:-1px; border-color:transparent}
.help{display:block; margin-top:7px; font-size:12.5px; color:var(--faint); line-height:1.45}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:var(--surface-2); padding:1px 5px; border-radius:4px;
}

.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:11px 20px; border-radius:8px; border:1px solid transparent;
  background:var(--brand); color:var(--on-brand); font-size:14.5px; font-weight:600;
  cursor:pointer; font-family:inherit;
}
.btn:hover{background:var(--brand-hover); text-decoration:none}
.btn:disabled{opacity:.45; cursor:not-allowed; background:var(--brand)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn.ghost:hover{background:var(--surface-2); border-color:var(--brand)}
.btn.sm{padding:7px 13px; font-size:13px}
.btn.wide{width:100%}

/* ── zona de arrastre ───────────────────────────────────────────── */
.drop{
  border:2px dashed var(--border-strong); border-radius:var(--radius);
  padding:44px 24px; text-align:center; cursor:pointer;
  background:var(--surface-2); transition:border-color .15s, background .15s;
}
.drop:hover, .drop.over{border-color:var(--brand); background:var(--brand-soft)}
.drop .big{font-weight:600; margin-bottom:4px}
.drop .hint{color:var(--muted); font-size:13.5px}

.filelist{list-style:none; padding:0; margin:18px 0 0}
.filelist li{
  display:flex; align-items:center; gap:12px; padding:10px 13px;
  border:1px solid var(--border); border-radius:8px; margin-bottom:7px;
  background:var(--surface-2); font-size:14px;
}
.filelist .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filelist .sz{color:var(--faint); font-size:12.5px; font-variant-numeric:tabular-nums}
.x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:17px;line-height:1;padding:2px 5px}
.x:hover{color:var(--err)}

/* ── tabla de revisión ──────────────────────────────────────────── */
.tablewrap{overflow-x:auto; margin:0 -4px}
table{width:100%; border-collapse:collapse; font-size:14px}
th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--faint); font-weight:650; padding:0 12px 9px; white-space:nowrap;
}
td{padding:13px 12px; border-top:1px solid var(--border); vertical-align:top}
td.num{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap}
.doc{font-weight:600}
.doc .file{display:block; color:var(--faint); font-weight:450; font-size:12.5px; margin-top:3px}
.titulo{color:var(--muted); max-width:330px}
.titulo .file{display:block; color:var(--faint); font-size:12.5px; margin-top:3px}

.tag{display:inline-block; padding:3px 9px; border-radius:999px;
     font-size:11.5px; font-weight:650; white-space:nowrap}
.tag.art{background:var(--brand-soft); color:var(--brand-ink)}
.tag.lib{background:var(--warn-soft); color:var(--warn)}
.tag.no{background:var(--err-soft); color:var(--err)}

.note{
  margin:9px 0 0; padding:9px 12px; border-radius:7px; font-size:13px; line-height:1.45;
  background:var(--warn-soft); color:var(--warn); border-left:3px solid currentColor;
}
.note.bad{background:var(--err-soft); color:var(--err)}
tr.off td{opacity:.45}
tr.off td:first-child{opacity:1}
input[type=checkbox]{accent-color:var(--brand)}

/* ── formatos ───────────────────────────────────────────────────── */
.fmts{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:11px; margin-top:14px}
.fmt{
  display:flex; align-items:center; gap:11px; padding:14px;
  border:1px solid var(--border-strong); border-radius:9px;
  background:var(--surface); cursor:pointer; user-select:none;
}
.fmt:hover{border-color:var(--brand)}
.fmt input{width:17px;height:17px;cursor:pointer;flex:none}
.fmt .fl{font-weight:600}
.fmt .fd{display:block; font-size:12px; color:var(--faint); font-weight:450; margin-top:2px}
.fmt.sel{border-color:var(--brand); background:var(--brand-soft)}

.bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--border); flex-wrap:wrap;
}
.calc{color:var(--muted); font-size:13.5px}
.calc b{color:var(--text)}

/* ── progreso ───────────────────────────────────────────────────── */
.pbar{height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin:16px 0 6px}
.pbar > i{display:block; height:100%; background:var(--brand); width:0; transition:width .35s ease}
.pmeta{display:flex; justify-content:space-between; font-size:13px; color:var(--muted)}

.grid{display:grid; gap:8px; margin-top:20px}
.row{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border:1px solid var(--border); border-radius:8px; background:var(--surface-2); font-size:14px;
}
.row .st{width:19px; text-align:center; flex:none}
.row .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .fm{color:var(--muted); font-size:12.5px; white-space:nowrap}
.row.err{background:var(--err-soft); border-color:var(--err)}
.row .msg{color:var(--err); font-size:12.5px}

.spin{
  display:inline-block; width:13px; height:13px; border:2px solid var(--border-strong);
  border-top-color:var(--brand); border-radius:50%; animation:sp .7s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}
.actions{display:flex; gap:11px; justify-content:center; margin-top:20px; flex-wrap:wrap}

/* ── alertas ────────────────────────────────────────────────────── */
.alert{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 15px; border-radius:9px; margin-bottom:18px; font-size:14px;
  line-height:1.5; background:var(--err-soft); color:var(--err);
  border:1px solid currentColor; animation:alert-in .22s ease-out;
}
.alert .ico{flex:none; width:19px; height:19px; margin-top:1px;
            fill:none; stroke:currentColor; stroke-width:2;
            stroke-linecap:round; stroke-linejoin:round}
.alert .txt{min-width:0}
.alert b{display:block; margin-bottom:2px; font-weight:650}
.alert .det{color:inherit; opacity:.85}
.alert.warn{background:var(--warn-soft); color:var(--warn)}
.alert.ok{background:var(--ok-soft); color:var(--ok)}
.alert .cerrar{
  margin-left:auto; flex:none; border:0; background:none; color:inherit;
  opacity:.6; cursor:pointer; font-size:18px; line-height:1; padding:0 2px;
}
.alert .cerrar:hover{opacity:1}
@keyframes alert-in{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ── ajustes ────────────────────────────────────────────────────── */
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px}
.fields > div{min-width:0}
.ro{margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:8px; overflow:hidden}
.ro > div{background:var(--surface-2); padding:12px 14px}
.ro dt{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
       color:var(--faint); font-weight:650; margin-bottom:4px}
.ro dd{margin:0; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums}

/* ── seletor de idioma ──────────────────────────────────────────── */
.lang{position:relative; display:inline-flex; align-items:center; flex:none}
.lang select{
  appearance:none; -webkit-appearance:none;
  padding:7px 26px 7px 11px; border:1px solid var(--border-strong); border-radius:8px;
  background:var(--surface); color:var(--text); font:600 13px/1 inherit;
  font-family:inherit; cursor:pointer;
}
.lang select:hover{border-color:var(--brand)}
.lang select:focus{outline:2px solid var(--brand); outline-offset:-1px}
.lang svg{
  position:absolute; right:9px; width:13px; height:13px; pointer-events:none;
  fill:none; stroke:var(--faint); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* barra de herramientas del login (sin cabecera) */
.login-tools{position:fixed; top:18px; right:18px; display:flex; gap:9px; align-items:center}