/* OWL. Tokens y piezas copiados del diseño eagle-editoras-diseno-completo.html,
   que a su vez los copió de web/static/css/eagle.css (v1). Fuentes Plex servidas desde aquí. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Tokens copiados de web/static/css/eagle.css (EAGLE v1).
   «Apariencia» per account (owner, 2026-11-13): the accent's own colours are the --marca-* and
   --claro-* (the bar, the top bar, the selected pieces); each accent below redefines them. Each
   theme maps the semantic ones (--enlace, --primario, --invertido) onto them. Defaults: Claro +
   Marino, the look OWL had. Every pair is checked for contrast (tests/test_apariencia.py). */
:root{
  --marca-900:#0e1732;--marca-700:#1a2456;--marca-600:#242f5e;--marca-500:#252f5e;
  --marca-linea:#1b2650;--marca-sub:#2a3563;--marca-foco:#16204a;--marca-medio:#34458a;--marca-claro:#9db1e8;
  --claro-2:#93a0c4;--claro-3:#7b88b0;--claro-4:#a9b4d4;--claro-5:#c9d3ee;
  --red:#cf2440;--rojo-fondo:#cf2440;--rojo-fuerte:#a01c33;--rojo-texto:#5a1622;
  --dato:#3b5bc0;--dato-f:#2b4ba8;
  --ok:#0f7a5a;--ok-bg:#e6f4ef;--caution:#d98324;--caution-bg:#fdf3e0;--aviso:#9a5d09;
  --danger-bg:#fdeaed;--info-bg:#eef1f9;
  --ink:#0e1732;--ink-2:#3a4460;--muted:#5a6480;--ink-4:#646e89;
  --paper:#f6f7fa;--surface:#fff;--relleno:#eef0f5;--relleno-2:#f1f3f9;--cab-tabla:#f8f9fc;
  --line:#e4e7ef;--borde-btn:#cfd6e4;--borde-fila:#f4f5f9;--borde-peligro:#f2c3cc;
  --campo:#fbfbfd;--fila-mia:#f6f8fd;--barra-gris:#c9d0e6;--borde-subir:#b8c0d0;--sombra:rgba(14,23,50,.12);
  --mapa-sin:#dfe4ee;--mapa-borde:#fff;--mapa-0:#c9d3f0;--mapa-1:#9babdf;--mapa-2:#4257a8;--mapa-3:#0e1732;
  --enlace:var(--marca-700);--primario:var(--marca-700);--primario-hover:var(--marca-900);
  --invertido:var(--marca-900);--invertido-hover:var(--marca-600);--invertido-txt:var(--claro-4);--invertido-ambar:#f0c99a;
  --interruptor-off:#7d87a3;--interruptor-on:var(--primario);--interruptor-boton-on:#fff;
  --ui:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono','Cascadia Mono',Consolas,'Courier New',monospace;
}
/* The five accents. Not only on <html>: a swatch on «Apariencia» carries its own data-acento
   and shows that accent whatever the page's. Marino repeats :root so a swatch can show it too. */
[data-acento="marino"]{--marca-900:#0e1732;--marca-700:#1a2456;--marca-600:#242f5e;--marca-500:#252f5e;--marca-linea:#1b2650;--marca-sub:#2a3563;--marca-foco:#16204a;--marca-medio:#34458a;--marca-claro:#9db1e8;--claro-2:#93a0c4;--claro-3:#7b88b0;--claro-4:#a9b4d4;--claro-5:#c9d3ee}
[data-acento="petroleo"]{--marca-900:#0b2e33;--marca-700:#0f4c55;--marca-600:#16434a;--marca-500:#1a4a52;--marca-linea:#123a40;--marca-sub:#1f5058;--marca-foco:#0f3a40;--marca-medio:#1f6670;--marca-claro:#86cbd2;--claro-2:#8fc1c6;--claro-3:#75a9af;--claro-4:#a7d0d4;--claro-5:#c8e4e6}
[data-acento="bosque"]{--marca-900:#10301f;--marca-700:#17533a;--marca-600:#1c4630;--marca-500:#1f4c35;--marca-linea:#163d29;--marca-sub:#24573c;--marca-foco:#143826;--marca-medio:#23704b;--marca-claro:#8fd1a8;--claro-2:#95c4a8;--claro-3:#7aad8f;--claro-4:#aed3bc;--claro-5:#cbe5d5}
[data-acento="ciruela"]{--marca-900:#24143a;--marca-700:#4a2a73;--marca-600:#3a2459;--marca-500:#3f2760;--marca-linea:#2f1b49;--marca-sub:#4a3268;--marca-foco:#2b1844;--marca-medio:#5b3a8c;--marca-claro:#c3a8ec;--claro-2:#b9a6d6;--claro-3:#a18cc2;--claro-4:#cbbde2;--claro-5:#e0d6f0}
[data-acento="grafito"]{--marca-900:#1c1f26;--marca-700:#353b48;--marca-600:#2f343e;--marca-500:#333944;--marca-linea:#262a32;--marca-sub:#3c424e;--marca-foco:#23272e;--marca-medio:#4a5262;--marca-claro:#c0c6d2;--claro-2:#a9b0bd;--claro-3:#8f97a6;--claro-4:#bcc2cc;--claro-5:#d6dae1}
/* Oscuro: EAGLE's dark palette. «Como el sistema» repeats it inside the media query (a media
   query cannot share a block with a selector; a test keeps both copies equal). */
html[data-tema="oscuro"]{color-scheme:dark;
  --paper:#0c111f;--surface:#141b2d;--ink:#e7eaf2;--ink-2:#c3cbe0;--muted:#9aa6c4;--ink-4:#8592b4;
  --line:#232c45;--borde-btn:#38446a;--borde-fila:#1c2440;--borde-peligro:#5e2836;
  --relleno:#1a2238;--relleno-2:#19203a;--cab-tabla:#19213a;--campo:#121a2c;--fila-mia:#1a2442;
  --dato:#7f96d4;--dato-f:#9db1e8;--ok:#4cc38a;--ok-bg:#17291f;--caution:#e2a54e;--caution-bg:#3a2a16;--aviso:#f0c99a;
  --danger-bg:#3a1620;--info-bg:#1c2647;--red:#ff7a8c;--rojo-fuerte:#ff9aa8;--rojo-texto:#f3c4cc;
  --barra-gris:#38446a;--borde-subir:#38446a;--sombra:rgba(0,0,0,.45);
  --mapa-sin:#232c45;--mapa-borde:#0c111f;--mapa-0:#2b3a6e;--mapa-1:#4a63b0;--mapa-2:#7f96d4;--mapa-3:#c9d3f0;
  --enlace:var(--marca-claro);--primario:var(--marca-medio);--primario-hover:var(--marca-600);
  --invertido:var(--marca-medio);--invertido-hover:var(--marca-600);--invertido-txt:#e2e7f5;--invertido-ambar:#ffe2bf;
  --interruptor-off:#475275;--interruptor-on:var(--enlace);--interruptor-boton-on:var(--surface)}
@media (prefers-color-scheme:dark){
  html[data-tema="sistema"]{color-scheme:dark;
  --paper:#0c111f;--surface:#141b2d;--ink:#e7eaf2;--ink-2:#c3cbe0;--muted:#9aa6c4;--ink-4:#8592b4;
  --line:#232c45;--borde-btn:#38446a;--borde-fila:#1c2440;--borde-peligro:#5e2836;
  --relleno:#1a2238;--relleno-2:#19203a;--cab-tabla:#19213a;--campo:#121a2c;--fila-mia:#1a2442;
  --dato:#7f96d4;--dato-f:#9db1e8;--ok:#4cc38a;--ok-bg:#17291f;--caution:#e2a54e;--caution-bg:#3a2a16;--aviso:#f0c99a;
  --danger-bg:#3a1620;--info-bg:#1c2647;--red:#ff7a8c;--rojo-fuerte:#ff9aa8;--rojo-texto:#f3c4cc;
  --barra-gris:#38446a;--borde-subir:#38446a;--sombra:rgba(0,0,0,.45);
  --mapa-sin:#232c45;--mapa-borde:#0c111f;--mapa-0:#2b3a6e;--mapa-1:#4a63b0;--mapa-2:#7f96d4;--mapa-3:#c9d3f0;
  --enlace:var(--marca-claro);--primario:var(--marca-medio);--primario-hover:var(--marca-600);
  --invertido:var(--marca-medio);--invertido-hover:var(--marca-600);--invertido-txt:#e2e7f5;--invertido-ambar:#ffe2bf;
  --interruptor-off:#475275;--interruptor-on:var(--enlace);--interruptor-boton-on:var(--surface)}
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:var(--ui);font-size:16px;line-height:1.5;color:var(--ink);background:var(--paper)}
a{color:var(--enlace)}a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--dato);outline-offset:2px}
.side :focus-visible,.top :focus-visible{outline-color:var(--claro-5)}
.mono{font-family:var(--mono)}.muted{color:var(--muted)}.small{font-size:13.5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1{margin:0;font-size:27px;font-weight:700;line-height:1.2}
svg.ic{width:1.15em;height:1.15em;flex:none}

/* ---------- Armazón ---------- */
.app{display:grid;grid-template-columns:var(--ancho-menu,252px) minmax(0,1fr);min-height:100vh}
.app[hidden],.login[hidden]{display:none}
.side{min-width:0;background:var(--marca-900);color:var(--claro-2);padding:14px 10px 12px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px 5px;text-decoration:none}
/* the owl for dark backgrounds (owner, 2026-11-13): the favicon's lines, drawn in white; the
   favicon keeps its black-on-white owl for the browser's tab */
.brand>svg{color:#fff}
.brand .w{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-size:18px;color:#fff;letter-spacing:.03em}
.brand small{font-size:11.5px;letter-spacing:.1em;color:var(--claro-3);font-weight:500;text-transform:uppercase}
.editora{display:flex;flex-direction:column;gap:1px;margin:0 4px 14px;padding:9px 11px;border:1px solid var(--marca-sub);border-radius:7px}
.editora b{color:#fff;font-size:15px}
.editora span{font-family:var(--mono);font-size:12.5px}
/* the editora's logo (owner, 2026-11-13) in a fixed 36 px slot: a slow image never moves the bar.
   It keeps its proportions, on a white plate (most logos are drawn for white paper) or, «Sin fondo»,
   straight on the bar. Without a logo there is no slot; the administradora gets a «+ Logo» on the
   count's line, no taller than it. «Marca» on «Equipo y plan» shows the slot at the bar's width
   (224 px box, 200 px inside). */
.editora-logo{display:flex;align-items:center;height:36px;margin-bottom:6px}
.editora-logo img{display:block;box-sizing:border-box;width:auto;height:auto;max-width:100%;max-height:36px;padding:3px 6px;border-radius:5px;background:#fff}
.editora-logo[data-fondo="ninguno"] img{padding:0;border-radius:0;background:none}
.editora-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 8px}
.editora-mas{display:inline-flex;align-items:center;gap:3px;height:17px;padding:0 6px;border:1px dashed var(--claro-3);border-radius:4px;font-size:11.5px;line-height:1;color:var(--claro-2);text-decoration:none}
.editora-mas:hover{border-style:solid;color:#fff}
.editora-mas svg{width:11px;height:11px}
.logo-muestra{width:224px;max-width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--marca-sub);border-radius:7px;background:var(--marca-900)}
.logo-muestra .editora-logo{margin:0}
.logo-vacio{display:inline-flex;align-items:center;height:30px;padding:0 10px;border:1px dashed var(--claro-3);border-radius:5px;font-size:13px;color:var(--claro-2)}
.logo-quien{display:flex;align-items:center;gap:6px}
.logo-form{display:flex;flex-direction:column;gap:12px}
.logo-fondo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0;padding:0;border:0}
.logo-fondo legend{float:left;margin-right:4px;padding:0;font-size:14px;font-weight:600}
.logo-fondo label{display:inline-flex;align-items:center;gap:6px;font-size:14px;cursor:pointer}
.fondo-muestra{width:16px;height:16px;border-radius:3px;border:1px solid var(--borde-btn);background:#fff}
.fondo-muestra[data-fondo="ninguno"]{background:var(--marca-900)}
.logo-elegir{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
/* the file input itself is hidden behind «Elegir imagen» but still takes the focus and is checked */
.logo-archivo{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.logo-archivo:focus-visible+label{outline:2px solid var(--dato);outline-offset:2px}
.logo-elegir label.btn{cursor:pointer}
.logo-nombre{flex:1 1 160px;min-width:0;font-size:14px;overflow-wrap:break-word}
.logo-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.logo-form>.flash{margin:0}
@media (max-width:760px){.logo-form .btn{height:44px}}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:7px;font-size:16px;font-weight:500;color:var(--claro-2);text-decoration:none}
.nav a:hover{background:var(--marca-linea);color:#fff}
.nav a.on{background:var(--marca-600);color:#fff;font-weight:600}
.nav svg{width:19px;height:19px;flex:none}
.nav .cuenta .n-corto{display:none}
.nav .cuenta{margin-left:auto;padding:1px 7px;border-radius:10px;background:var(--rojo-fondo);color:#fff;font-family:var(--mono);font-size:12.5px;font-weight:600}
.sep{height:1px;background:var(--marca-linea);margin:12px 8px}
.seccion{font-size:11.5px;letter-spacing:.12em;color:var(--claro-3);font-weight:600;padding:0 12px 6px;text-transform:uppercase}
.pie{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:12px 8px 0;border-top:1px solid var(--marca-linea)}
.vivo{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;color:#7de0b4}
.vivo i{width:6px;height:6px;border-radius:50%;background:#2fd39a}
.sesion{display:flex;align-items:center;gap:9px}
.avatar{width:34px;height:34px;flex:none;border-radius:7px;background:var(--marca-500);color:#fff;display:grid;place-items:center;font-size:14.5px;font-weight:600}
.quien{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.quien b{color:#fff;font-size:15px}.quien span{font-size:12.5px;color:var(--claro-3)}
.salir{color:var(--claro-2);display:grid;place-items:center;width:44px;height:44px}
.salir:hover{color:#fff}
.main{min-width:0;display:flex;flex-direction:column}
.top{min-height:58px;padding:8px 20px;background:var(--marca-900);display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.top .titulo{font-size:17.5px;font-weight:600;color:#fff}
.buscar{flex:1 1 280px;max-width:520px;margin:0 auto 0 12px;display:flex;align-items:center;gap:8px;height:42px;padding:0 13px;border:1px solid var(--marca-sub);border-radius:7px;color:var(--claro-2)}
.buscar:focus-within{border-color:var(--claro-2);background:var(--marca-foco)}
.buscar label{display:grid;place-items:center}
.buscar input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:inherit;font-size:15px;outline:0}
.buscar input::placeholder{color:var(--claro-2)}
.prox{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:7px;background:var(--marca-500);color:var(--claro-5);font-size:13.5px}
.content{padding:18px 22px 28px}
.screen{display:none;flex-direction:column;gap:16px}
.screen.on{display:flex}

/* ---------- Piezas de v1 ---------- */
.cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.cab .der{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-self:center}
.cap{font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:15px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card.sin-pad{padding:0;gap:0}
.rotulo{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:14.5px;font-weight:600;letter-spacing:.07em;color:var(--ink-2);text-transform:uppercase}
.rotulo>svg{width:18px;height:18px;color:var(--muted)}
.rotulo .n{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:0;text-transform:none;font-weight:500}
.rotulo .der{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px;letter-spacing:0;text-transform:none}
.rotulo.rojo,.rotulo.rojo>svg{color:var(--red)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{display:block;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:12px 15px;text-decoration:none;color:inherit}
a.kpi:hover{border-color:var(--borde-btn);color:inherit}
.kpi .l{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.kpi .v{font-family:var(--mono);font-size:24px;font-weight:600;line-height:1.15}
.kpi .v small{font-size:15px;color:var(--ink-4);font-weight:500}
.kpi .s{font-family:var(--mono);font-size:12px;color:var(--ink-4);margin-top:2px}
.kpi .s.sube{color:var(--ok)}
.kpi.inv{background:var(--invertido);border-color:var(--invertido)}
.kpi.inv .l,.kpi.inv .s{color:var(--invertido-txt)}
.kpi.inv .v{color:#fff}
.kpi.inv .s.ambar{color:var(--invertido-ambar)}
.conm{display:inline-flex;gap:2px;padding:2px;background:var(--relleno-2);border-radius:7px;max-width:100%;overflow-x:auto;align-self:flex-start}
.conm a,.conm button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0;border-radius:5px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none}
.conm a:hover,.conm button:hover{color:var(--ink)}
.conm .activa{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px var(--sombra)}
.conm .n{font-family:var(--mono);font-size:13px}
.btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:6px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;border:1px solid var(--borde-btn);background:var(--surface);color:var(--enlace)}
.btn:hover{border-color:var(--enlace);color:var(--enlace)}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--primario);border-color:var(--primario);color:#fff}
.btn-primary:hover{background:var(--primario-hover);border-color:var(--primario-hover);color:#fff}
.btn-real{background:var(--rojo-fondo);border-color:var(--rojo-fondo);color:#fff}
.btn-real:hover{background:#b81f38;border-color:#b81f38;color:#fff}
.btn-peligro{border-color:var(--borde-peligro);color:var(--red)}
.btn-peligro:hover{background:var(--danger-bg);border-color:var(--red);color:var(--red)}
.btn-texto{border:0;background:none;padding:0 6px;height:36px}
.btn-icono{width:40px;padding:0;justify-content:center}
.btn-cab{background:var(--marca-500);border-color:var(--marca-500);color:#fff}
.btn-cab:hover{background:var(--marca-600);border-color:var(--marca-600);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.fila{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.fila.estira{align-items:stretch}
.fila>.ancha{flex:2 1 560px}
.fila>.estrecha{flex:1 1 300px}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.tabla{overflow-x:auto;position:relative}
table{border-collapse:collapse;width:100%}
th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:9px 12px;background:var(--cab-tabla);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--borde-fila);font-size:15px;vertical-align:middle}
th.num,td.num{text-align:right}
td.num{font-family:var(--mono)}
td .sub{display:block;font-size:13px;color:var(--muted)}
td a.t{font-weight:600}
tr.mia td{background:var(--fila-mia)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--primario)}
.estado{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;white-space:nowrap}
.estado::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ok{color:var(--ok)}.error{color:var(--red)}.aviso{color:var(--aviso)}.dato{color:var(--dato-f)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:14px;font-weight:600;white-space:nowrap}
.pill.ok{background:var(--ok-bg)}.pill.error{background:var(--danger-bg)}.pill.aviso{background:var(--caution-bg)}.pill.dato{background:var(--info-bg)}
.etiq{font-size:11px;letter-spacing:.08em;font-weight:700;color:var(--aviso);background:var(--caution-bg);padding:1px 7px;border-radius:999px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.chip:hover{border-color:var(--borde-btn);color:var(--ink)}
.chip.rojo{border-color:var(--borde-peligro);color:var(--red)}
.chip.activo{background:var(--invertido);border-color:var(--invertido);color:#fff}
.chip .n{font-family:var(--mono);font-size:12.5px}
.tab{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:46px;padding:4px 14px;border:1px solid var(--borde-btn);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;line-height:1.25}
.tab small{font-size:12.5px;font-weight:500;color:var(--muted);font-family:var(--mono)}
.tab.activo{background:var(--invertido);border-color:var(--invertido);color:#fff}
.tab.activo small{color:var(--invertido-txt)}
.minichip{display:inline-flex;gap:5px;align-items:center;height:26px;padding:0 9px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.minichip span{font-family:var(--mono);font-size:12.5px}
.minichip.rojo{border-color:var(--borde-peligro);background:var(--danger-bg);color:var(--red)}
.interv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:12px}
.interv-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.interv-card>svg{width:29px;height:29px;flex:none}
.interv-n{font-family:var(--mono);font-size:26px;font-weight:700;line-height:1}
.interv-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.interv-txt span{font-size:13.5px;color:var(--muted)}
.mapa{min-height:330px;border-radius:6px;background:var(--info-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;text-align:center}
.mapa span{font-size:14px;color:var(--muted);max-width:440px}
.leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--muted)}
.leyenda .escala{display:inline-flex;align-items:center;gap:4px}
.leyenda i{display:inline-block;width:16px;height:10px}
.barra{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--relleno)}
.leg div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--borde-fila)}
.leg div:last-child{border-bottom:0}
.leg .p{display:inline-flex;align-items:center;gap:8px}
.leg .p i{width:8px;height:8px;border-radius:50%}
.banda{background:var(--invertido);border-radius:8px;padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;color:#fff}
.aviso-rojo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;border-radius:8px;background:var(--danger-bg);border:1px solid var(--borde-peligro)}
.aviso-rojo .t{flex:1 1 240px;display:flex;flex-direction:column;gap:2px}
.aviso-rojo b{color:var(--rojo-fuerte)}
.aviso-rojo span{font-size:14px;color:var(--rojo-texto)}
.aviso-verde{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:8px;background:var(--ok-bg);color:var(--ok);font-weight:600}
.aviso-info{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:8px;background:var(--info-bg);color:var(--ink-2);font-size:14.5px;line-height:1.5}
.lista-pais{margin:0;padding:0;list-style:none}
.lista-pais li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--borde-fila)}
.lista-pais .i{width:20px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.lista-pais a{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-pais .e{width:112px;text-align:right}
.cifras{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px;color:var(--ink-2)}
.cifras b{font-family:var(--mono);font-weight:600;color:var(--ink)}
.barras{display:flex;align-items:flex-end;gap:12px;height:170px;border-bottom:1px solid var(--line)}
.barras div{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.barras span{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.barras i{display:block;width:100%;max-width:44px;border-radius:4px 4px 0 0;background:var(--barra-gris)}
.barras i.per{background:var(--dato)}
.meses{display:flex;gap:12px}
.meses span{flex:1 1 0;min-width:0;text-align:center;font-size:12.5px;color:var(--muted)}
.cand{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;padding:14px 18px;border-top:1px solid var(--borde-fila)}
.cand .t{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:3px}
.cand .t span{font-size:13.5px;color:var(--muted)}
.cand .t em{font-style:normal;font-size:13.5px;color:var(--ink-2)}
.cand .m{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:120px}
.cand .acc{display:flex;gap:8px;align-items:center;min-width:210px;justify-content:flex-end}
.obra-cab{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between;padding:16px 18px}
.subir{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:210px;border:2px dashed var(--borde-subir);border-radius:8px;background:var(--info-bg);padding:24px;text-align:center;cursor:pointer}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:14px;font-weight:600}
.campo input,.campo select{height:44px;padding:0 13px;border:1px solid var(--borde-btn);border-radius:7px;font:inherit;font-size:15px;background:var(--campo);color:var(--ink)}
.filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filtros .campo{min-width:200px}
.prog{height:8px;background:var(--relleno);border-radius:4px}
.prog span{display:block;height:100%;background:var(--dato);border-radius:4px}
.datos{display:flex;flex-direction:column}
.datos div{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid var(--borde-fila);font-size:15px}
.datos div:last-child{border-bottom:0}
.pie-nota{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.pag{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.barra-acc{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--relleno-2);border-top:1px solid var(--line);border-radius:0 0 8px 8px}

/* ---------- Entrar ---------- */
.login{min-height:100vh;display:flex;flex-wrap:wrap;background:var(--paper)}
.login .izq{flex:1 1 420px;background:var(--marca-900);color:#fff;padding:clamp(32px,6vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.login .der{flex:1 1 420px;padding:clamp(32px,6vw,72px) clamp(16px,6vw,72px);display:flex;align-items:center;justify-content:center}
.login form{width:100%;max-width:400px;display:flex;flex-direction:column;gap:18px}
.login h2{margin:0;font-size:26px}
.login .lema{margin:0;font-size:clamp(28px,3.2vw,40px);line-height:1.15;font-weight:700;max-width:520px}
.login ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;color:var(--claro-5)}
.login li{display:flex;gap:10px}
.login li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;background:#2fd39a}
@media (max-width:700px){.top .prox{display:none}.content{padding:14px}}

/* ---------- Añadidos de la app (no están en el diseño) ---------- */
.content{max-width:1440px;width:100%}
.flash{display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:8px;font-weight:600;font-size:15px}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.error{background:var(--danger-bg);color:var(--rojo-fuerte);border:1px solid var(--borde-peligro)}
.demo-pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--caution-bg);color:var(--aviso);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.btn-icono svg{width:18px;height:18px}
form.inline{display:inline}
.sin-borde{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
a.t,a.fila-enlace{text-decoration:none}a.t:hover{text-decoration:underline}
tr[data-href]{cursor:pointer}tr[data-href]:hover td{background:var(--relleno-2)}
.pag .num-pag{font-family:var(--mono);font-size:13px;color:var(--muted)}
.campo textarea{padding:10px 13px;border:1px solid var(--borde-btn);border-radius:7px;font:inherit;font-size:15px;background:var(--campo);color:var(--ink)}
.qr{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.qr img{width:184px;height:184px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px}
.secreto{font-family:var(--mono);font-size:14px;letter-spacing:.06em;word-break:break-all}
.enlace-copia{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.enlace-copia input{flex:1 1 320px;height:40px;padding:0 12px;border:1px solid var(--borde-btn);border-radius:7px;font-family:var(--mono);font-size:13px;background:var(--campo);color:var(--ink)}
.select-mini{height:36px;padding:0 8px;border:1px solid var(--borde-btn);border-radius:6px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink)}
.mapa-wrap{border-radius:6px;background:var(--info-bg);padding:10px}
.leyenda i.cob-0{background:var(--mapa-0)}.leyenda i.cob-1{background:var(--mapa-1)}.leyenda i.cob-2{background:var(--mapa-2)}.leyenda i.cob-3{background:var(--mapa-3)}
.leyenda i.presencia{background:transparent;border:2px solid var(--red)}
details.mas>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--enlace)}
details.mas>summary::-webkit-details-marker{display:none}
.acciones-fila{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.vacio{padding:28px;text-align:center;color:var(--muted)}

/* ---------- Claves de reparto ---------- */
.claves{display:flex;flex-direction:column;gap:12px}
.clave{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.clave-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
summary.clave-cab{cursor:pointer}
.num-clave{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.04em}
tr.total td{border-top:2px solid var(--line);border-bottom:0}
.acciones-reparto{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.form-clave{display:flex;flex-direction:column;gap:10px;margin-top:10px}
table.lineas td{padding:6px 8px}
table.lineas input[name=nombre]{width:100%;min-width:160px}
table.lineas input.pct{width:64px;font-family:var(--mono);text-align:right}
td.roles{min-width:230px;font-size:13px}
.campo select[multiple]{height:auto;min-width:260px;padding:6px}
.lineas-caja{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lineas-caja .tabla{align-self:stretch}
/* roles: four toggle chips with full words */
label.rol{display:inline-flex;margin:2px 4px 2px 0;cursor:pointer;position:relative}
label.rol input{position:absolute;opacity:0;width:1px;height:1px}
.rol>span,span.rol{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid var(--borde-btn);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:600;white-space:nowrap}
label.rol input:checked+span,span.rol.fijo{background:var(--primario);border-color:var(--primario);color:#fff}
label.rol input:focus-visible+span{outline:2px solid var(--dato);outline-offset:2px}
.pct-caja{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.pct-caja>span{font-size:13px;color:var(--muted)}
.btn-quitar{color:var(--muted);height:32px}.btn-quitar:hover{color:var(--red)}
.totales{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;font-family:var(--mono);font-size:13.5px;font-weight:600}
/* the territory picker (owl.js): chips + a search box over the hidden select */
.campo-territorios{flex:1 1 100%}
.terr-chips{gap:6px}
.chip-terr{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 2px 0 12px;border-radius:999px;background:var(--invertido);color:#fff;font-size:14px;font-weight:600}
.chip-terr small,.terr-opcion small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.chip-quitar{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;font-size:17px;cursor:pointer}
.chip-quitar:hover{background:var(--invertido-hover)}
.campo input.terr-buscar{max-width:380px;width:100%}
.terr-resultados{display:flex;flex-wrap:wrap;gap:6px}
.terr-opcion{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--borde-btn);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.terr-opcion:hover{border-color:var(--enlace)}
.interruptor{display:inline-flex;align-items:center;gap:8px;height:44px;font-size:14px;font-weight:600;cursor:pointer}
.interruptor input{appearance:none;-webkit-appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:999px;background:var(--interruptor-off);cursor:pointer;transition:background .15s}
.interruptor input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.interruptor input:checked{background:var(--interruptor-on)}
.interruptor input:checked::after{background:var(--interruptor-boton-on)}
.interruptor input:checked::after{left:19px}
/* «Anular» and annulled claves */
.ultimo-cambio{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px}
.confirmar-caja{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.clave.anulada{opacity:.7}
.clave.anulada .num-clave,.clave.anulada b{text-decoration:line-through}

/* ---------- Visor de documentos (diálogo; como el visor de NoDuck) ---------- */
dialog.visor{width:min(1200px,calc(100vw - 16px));height:calc(100vh - 32px);max-width:none;max-height:none;padding:0;border:0;border-radius:10px;background:var(--surface);color:var(--ink);overflow:hidden}
dialog.visor::backdrop{background:rgba(14,23,50,.6)}
.visor-caja{display:grid;grid-template-columns:240px minmax(0,1fr);height:100%}
.visor-lista{border-right:1px solid var(--line);overflow-y:auto;padding:10px 8px;background:var(--paper)}
.visor-lista ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.visor-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:8px 9px;border:0;border-radius:7px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.visor-item:hover{background:var(--relleno-2)}
.visor-item[aria-current]{background:var(--surface);box-shadow:inset 3px 0 0 var(--enlace)}
.visor-item-nombre{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.visor-centro{display:flex;flex-direction:column;min-width:0;min-height:0}
.visor-barra{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.visor-titulo{min-width:0}
.visor-titulo h2{margin:0;font-size:17px;overflow-wrap:anywhere}
.visor-titulo p{margin:2px 0 0}
.visor-botones{display:flex;flex-wrap:wrap;gap:6px}
.visor-marco{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:auto;background:var(--relleno)}
.visor-marco iframe{flex:1;align-self:stretch;width:100%;min-height:0;border:0;background:#fff}
.visor-marco img{max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.visor-marco p{margin:0;color:var(--muted)}
@media (max-width:760px){.visor-caja{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.visor-lista{max-height:110px;border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- Mapa (de v1: ark.css y eagle.css, sin tocar la geometría) ---------- */
.mapa-svg{width:100%;height:auto;display:block}
.mapa-svg path{fill:var(--mapa-sin);stroke:var(--mapa-borde);stroke-width:.5}
.mapa-svg .sin-dato,.mapa-svg .sin-dato path{fill:var(--mapa-sin)}
.mapa-svg .cob-0,.mapa-svg .cob-0 path{fill:var(--mapa-0)}
.mapa-svg .cob-1,.mapa-svg .cob-1 path{fill:var(--mapa-1)}
.mapa-svg .cob-2,.mapa-svg .cob-2 path{fill:var(--mapa-2)}
.mapa-svg .cob-3,.mapa-svg .cob-3 path{fill:var(--mapa-3)}
.mapa-svg .presencia,.mapa-svg .presencia path{stroke:var(--red);stroke-width:1.6}
.mapa-clic .mapa-svg [data-pais]{cursor:pointer}
.mapa-clic .mapa-svg [data-pais]:hover,.mapa-clic .mapa-svg [data-pais]:hover path{stroke:var(--red);stroke-width:1.4}
.mapa-clic .mapa-svg [data-pais].pais-activo,.mapa-clic .mapa-svg [data-pais].pais-activo path{stroke:#f7941e;stroke-width:2.2}
td.num{white-space:nowrap}
a.tab{text-decoration:none}
.datos .sub{display:block}
.login .caja{width:100%;max-width:400px;display:flex;flex-direction:column;gap:18px}
.login form.caja{max-width:none}

/* ---------- Platforms (Spotify, YouTube) and the song's data ---------- */
.plat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px 22px}
.plat{display:flex;flex-direction:column;gap:6px;min-width:0}
.plat-cab{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.plat-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.plat-lista li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:6px 0;border-bottom:1px solid var(--borde-fila)}
.plat-lista.sugeridas li{border:1px dashed var(--borde-btn);border-radius:7px;padding:6px 8px}  /* 6 + 5 = the icon's 11 px */
.plat-item{display:inline-flex;align-items:baseline;gap:8px;flex:1 1 220px;min-width:0;color:var(--ink);text-decoration:none}
.plat-item:hover b{text-decoration:underline}
.plat-t{min-width:0;font-size:14.5px;overflow-wrap:anywhere}
/* Spotify's guidelines: the icon at least 21 px with clear space of half its height around it;
   the full logo at least 70 px wide */
.marca-img{flex:none;width:21px;height:21px;align-self:center;margin:5px 11px}  /* + the row's 6 px padding */
.marca-logo{display:block;width:88px;height:auto;margin:4px 0}
/* YouTube's official files (brand kit) carry their own clear space: the red mark is 53.9 % of
   the icon's height (38 px -> 20.5 px) and 50.1 % of the logo's (40 px -> 20 px) */
.marca-yt{flex:none;height:38px;width:auto;align-self:center}
.marca-logo-yt{display:block;height:40px;width:auto}
.plat-dato{color:var(--muted)}
.plat-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.fila-pegar,.fila-isrc{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fila-pegar input{flex:1 1 300px;min-width:0}
.fila-isrc input{flex:1;min-width:0}
.lista-isrc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.lista-isrc li{display:flex;align-items:center;gap:2px}
.form-datos{display:flex;flex-direction:column;gap:10px}
.form-datos .campo input{height:40px}
.autores-linea{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.autores-caja{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:6px 0 0;padding:0;border:0;min-width:0}
.autores-caja legend{padding:0;margin-bottom:6px;font-size:14px;font-weight:600}
.form-cancion{max-width:960px}
/* An author's catalogue: job B's platform rows with a box; the whole row ticks it (owl.js) */
.cat-lista li[data-marcar]{cursor:pointer}
.cat-lista input[type=checkbox]{flex:none;width:20px;height:20px;margin:0;cursor:pointer}
.cat-lista .plat-t{flex:1 1 200px}
.cat-lista label.plat-t{cursor:pointer}
.cat-marca{flex:none;display:inline-flex;align-items:center}
.marca-texto{font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--ink)}
.minichip.ambar{background:var(--caution-bg);color:var(--aviso)}
.reproducir{color:var(--red);font-size:16px}
dialog.reproductor{width:min(960px,calc(100vw - 16px));max-width:none;padding:0;border:0;border-radius:10px;background:var(--marca-900);color:#fff;overflow:hidden}
dialog.reproductor::backdrop{background:rgba(14,23,50,.7)}
.reproductor-barra{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 8px 16px}
.reproductor-barra h2{margin:0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.reproductor-marco iframe{display:block;width:100%;aspect-ratio:16/9;min-height:200px;border:0;background:#000}
.nav.nav-pie{margin:0}
.pie .legal{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12px}
.pie .legal a{color:var(--claro-3)}.pie .legal a:hover{color:#fff}
/* Autores y editores: stages, the step flow of «Agregar autor» / «Agregar editor» and its checks. */
.pill.etapa-prospecto{background:var(--surface);border:1px solid var(--borde-btn);color:var(--ink-2);padding:2px 9px}
.pill.etapa-en_contacto{background:var(--info-bg);color:var(--dato-f)}
.pill.etapa-contrato_enviado{background:var(--caution-bg);color:var(--aviso)}
.pill.etapa-firmado{background:var(--ok-bg);color:var(--ok)}
.pill.etapa-inactivo{background:var(--relleno);color:var(--muted)}
.chips .sep-chips{width:1px;height:24px;background:var(--line);margin:0 2px}
.conm.etapas{flex-wrap:wrap;margin-top:8px}
.conm.etapas button[disabled]{cursor:default;opacity:1}
.etapa-cambio{margin:0}
.lista-etapas{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.paso a,.paso>span{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);text-decoration:none;min-height:44px}
.paso a:hover{border-color:var(--borde-btn);color:var(--ink)}
.paso.actual a,.paso.actual>span{border-color:var(--enlace);box-shadow:inset 0 0 0 1px var(--enlace)}
.paso>span:not([aria-current]){color:var(--ink-4);background:var(--relleno-2)}
.paso-num{width:26px;height:26px;flex:none;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;background:var(--relleno);color:var(--ink-2)}
.paso-num svg.ic{width:15px;height:15px}
.paso-ok .paso-num{background:var(--ok-bg);color:var(--ok)}
.paso-aviso .paso-num{background:var(--caution-bg);color:var(--aviso)}
.paso-bloqueo .paso-num{background:var(--danger-bg);color:var(--red)}
.paso.actual .paso-num{background:var(--primario);color:#fff}
.paso-texto{display:flex;flex-direction:column;gap:1px;min-width:0}
.paso-nombre{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.paso-sub{font-size:12.5px;color:var(--muted);font-family:var(--mono);overflow-wrap:anywhere}
.rejilla{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.rejilla-principal,.rejilla-lateral{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:900px){.rejilla{grid-template-columns:1fr}}
.comp-totales{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.comp-n{font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:999px}
.comp-n.comp-ok{background:var(--ok-bg);color:var(--ok)}
.comp-n.comp-aviso{background:var(--caution-bg);color:var(--aviso)}
.comp-n.comp-bloqueo{background:var(--danger-bg);color:var(--red)}
.comp-grupo{margin:6px 0 0;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.comp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.comp-lista li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px}
.comp-icono{flex:none;display:inline-flex;width:18px;height:18px;margin-top:1px;align-items:center;justify-content:center;border-radius:50%}
.comp-icono svg.ic{width:12px;height:12px}
li.comp-ok .comp-icono{background:var(--ok-bg);color:var(--ok)}
li.comp-aviso .comp-icono{background:var(--caution-bg);color:var(--aviso)}
li.comp-bloqueo .comp-icono{background:var(--danger-bg);color:var(--red)}
.comp-texto{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.comp-detalle{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
li.comp-bloqueo .comp-detalle{color:var(--red)}
.comp-ir{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:var(--enlace)}
.comp-ir:hover{background:var(--relleno)}
.comp-ir svg.ic{width:16px;height:16px}
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 18px;margin:0}
.ficha div{display:flex;flex-direction:column;gap:1px;min-width:0}
.ficha dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ficha dd{margin:0;font-size:15px;overflow-wrap:anywhere}
.form-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.form-ficha .ancho{grid-column:1/-1}
.form-ficha .campo input,.form-ficha .campo select{width:100%;min-width:0}
.barra-pasos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.duplicado{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- The «←» of a page that is not in the menu (owner, 2026-11-12, every program, like CAT) ---------- */
/* CAT's ghost button (no fill, a thin border) right before the title and centred on it: 40 px like
   OWL's other icon buttons, 44 on a phone. A long title wraps beside it, never under it. */
.btn-ghost{background:transparent;border-color:var(--line)}
.cab-volver{display:flex;align-items:center;gap:10px;min-width:0}
.cab-volver>.btn-volver{flex:none}
.cab-volver>h1{min-width:0;overflow-wrap:anywhere}
.cab:has(>.cab-volver){align-items:center}
@media (max-width:760px){.btn-volver{width:44px;height:44px}}

/* ---------- ☰: EAGLE's menu (owner, 2026-11-13, every program with a menu) ---------- */
/* Wider than 900 px the bar has its own column and ☰ folds it to its icons (62 px); the account
   remembers it (the server puts .menu-plegado on <html>, so a page never flashes the other state).
   The ☰ never moves: open it sits 17 px from the bar's edge (10 of padding + 7), folded it is
   centred in the 62 px bar, 17 px again ((46 - 28) / 2 + 8), at the same height. The owl keeps its
   15 px and the menu icons their 22, so nothing under it jumps either. */
.menu-plegar-f,.menu-abrir,.menu-velo,.legal-pie,.menu-cerrar-sinjs{display:none}
/* without the script the drawer opens with #menu: its ✕ goes to an anchor that isn't there */
.menu-cerrar-sinjs{position:absolute;top:10px;right:10px;width:44px;height:44px;place-items:center;border-radius:7px;color:var(--claro-2)}
.menu-cerrar-sinjs svg{width:20px;height:20px}
.legal-pie{flex-wrap:wrap;gap:2px 12px;padding:0 22px 18px;font-size:12px}
.legal-pie a{color:var(--muted)}
@media (min-width:901px){
  .side{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;overflow-x:hidden}
  .menu-plegar-f{display:block;align-self:flex-start}
  .menu-plegar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px 0 10px 7px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--claro-2);cursor:pointer}
  .menu-plegar:hover{background:var(--marca-linea);color:#fff}
  .menu-plegar:focus-visible{outline:2px solid var(--claro-5);outline-offset:1px}
  .menu-plegar svg{width:16px;height:16px}
  html.menu-plegado{--ancho-menu:62px}
  html.menu-plegado .side{padding:14px 8px 12px}
  html.menu-plegado .menu-plegar-f{align-self:center}
  html.menu-plegado .menu-plegar{margin:-4px 0 10px}
  html.menu-plegado .brand{justify-content:center;padding:2px 0 16px}
  html.menu-plegado .brand .w,html.menu-plegado .editora,html.menu-plegado .seccion,
  html.menu-plegado .vivo-txt,html.menu-plegado .quien,html.menu-plegado .pie .legal{display:none}
  html.menu-plegado .nav-txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  html.menu-plegado .nav a{position:relative;justify-content:center;padding:0;gap:0}
  html.menu-plegado .nav .cuenta{position:absolute;top:2px;left:calc(50% + 2px);right:auto;margin:0;padding:0 4px;font-size:11px;line-height:16px}
  html.menu-plegado .nav .cuenta .n-largo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  html.menu-plegado .nav .cuenta .n-corto{display:inline}
  html.menu-plegado .sep{margin:12px 4px}
  html.menu-plegado .pie{align-items:center;padding:12px 0 0}
  html.menu-plegado .sesion{flex-direction:column}
  html.menu-plegado .yo{flex:none;margin:0;padding:0}
  html.menu-plegado .legal-pie{display:flex}
}
/* 900 px or narrower: the bar is a drawer over the page, closed on every load and never saved.
   The top bar's ☰ stays above the drawer at its own spot and closes it too; the backdrop, Escape
   or a link close it as well (owl.js). Without the script, «#menu» opens it (:target). */
@media (max-width:900px){
  .app{display:block}
  /* visible at once when it opens (so its first link can take the focus), hidden only once it
     has slid out when it closes (so its links leave the tab order) */
  .side{position:fixed;top:0;bottom:0;left:0;z-index:200;width:min(300px,86vw);padding-top:64px;overflow-y:auto;transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
  .side:target,html.menu-abierto .side{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s}
  .top{padding-left:62px}
  .menu-abrir{display:inline-grid;place-items:center;position:fixed;top:8px;left:8px;z-index:210;width:44px;height:44px;border-radius:7px;background:var(--marca-900);color:var(--claro-2)}
  .top .menu-abrir:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px var(--claro-5),0 0 0 4px var(--marca-900)}
  .side:target .menu-cerrar-sinjs{display:grid}
  .menu-abrir:hover{background:var(--marca-linea);color:#fff}
  .menu-abrir svg{width:20px;height:20px}
  html.menu-abierto .menu-velo{display:block;position:fixed;inset:0;z-index:190;background:rgba(14,23,50,.6)}
  html.menu-abierto body{overflow:hidden}
  .legal-pie{display:flex}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.side{transition:none}}

/* ---------- «Apariencia» (owner, 2026-11-13: per account) ---------- */
/* The avatar and the name open it: the whole block, like every person block in OWL. */
.yo{flex:1;min-width:0;display:flex;align-items:center;gap:9px;margin:-4px;padding:4px;border-radius:7px;color:inherit;text-decoration:none}
.yo:hover{background:var(--marca-linea)}
.yo:hover .quien span{color:var(--claro-5)}
.yo:focus-visible{outline:2px solid var(--claro-5);outline-offset:1px}
.apariencia{gap:18px}
.ap-grupo{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0;min-width:0}
.ap-opciones{display:flex;flex-wrap:wrap;gap:8px}
.ap-opcion{position:relative;display:inline-flex}
.ap-opcion input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ap-opcion>span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--borde-btn);border-radius:8px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:600;cursor:pointer}
.ap-opcion>span svg{width:18px;height:18px}
.ap-opcion>span:hover{border-color:var(--enlace)}
.ap-opcion input:checked+span{border-color:var(--enlace);box-shadow:inset 0 0 0 1px var(--enlace);background:var(--relleno-2)}
@media (forced-colors:active){.ap-opcion input:checked+span{outline:3px solid Highlight;outline-offset:2px}.ap-muestra{forced-color-adjust:none}}
.ap-opcion input:focus-visible+span{outline:2px solid var(--dato);outline-offset:2px}
/* the accent's darkest and its middle: on a dark page the darkest alone is a black dot */
.ap-muestra{width:20px;height:20px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--marca-900) 50%,var(--marca-medio) 50%);box-shadow:0 0 0 1px var(--borde-btn)}
/* Dark: the bars need a line to stand off a page that is nearly as dark, and YouTube's official
   logo (almost-black letters; OWL has no light version) sits on a white plate. */
html[data-tema="oscuro"] .side{box-shadow:inset -1px 0 0 var(--line)}
html[data-tema="oscuro"] .top{box-shadow:inset 0 -1px 0 var(--line)}
html[data-tema="oscuro"] .marca-logo-yt{background:#fff;border-radius:6px}
@media (prefers-color-scheme:dark){
  html[data-tema="sistema"] .side{box-shadow:inset -1px 0 0 var(--line)}
  html[data-tema="sistema"] .top{box-shadow:inset 0 -1px 0 var(--line)}
  html[data-tema="sistema"] .marca-logo-yt{background:#fff;border-radius:6px}
}