/* Licha Contenido · app.css · generado a partir de la maqueta validada (13/09/2026) + complementos */
:root{
  /* Paleta tomada del material de marca de Licha */
  --tinta:#231F20;
  --tinta-suave:#4A4344;
  --gris:#8B8183;
  --gris-tenue:#C9C0C2;
  --marca:#C050BE;          /* principal de Licha, uso moderado */
  --marca-texto:#B842B6;    /* para texto pequeño: 4,7:1 sobre blanco */
  --marca-fondo:#A03C9E;    /* para fondos con texto claro */
  --amarillo:#FCC602;
  --amarillo-claro:#FEF0BF;
  --amarillo-papel:#FFF9E6;
  --rosa:#FEE4FD;
  --rosa-claro:#FFF1FE;
  --rosa-fuerte:#F7C6F4;

  --fondo:#FFFFFF;
  --superficie:#FFFFFF;
  --superficie-2:#FFF1FE;
  --superficie-3:#FFF9E6;
  --borde:#EDE6E7;
  --borde-marca:#FCC602;
  --texto:#231F20;
  --texto-2:#6E6466;
  --texto-3:#9A9092;

  /* Colores auxiliares de Licha: el pastel es el fondo, el tono oscuro el texto */
  --past-coral:#F88799; --past-menta:#A9EAD2; --past-naranja:#FFC07B;
  --past-azul:#A4C0FF;  --past-amarillo:#ECE684; --past-lila:#DFCCF9;

  --ok:#2E8061;       --ok-fondo:#EBF9F4;       --ok-pastel:#A9EAD2;
  --aviso:#A86215;    --aviso-fondo:#FDE7CF;    --aviso-pastel:#FFC07B;
  --alerta:#DA304B;   --alerta-fondo:#FBD6DC;   --alerta-pastel:#F88799;
  --info:#376DE6;     --info-fondo:#E7EEFE;     --info-pastel:#A4C0FF;
  --idea:#7C7722;     --idea-fondo:#F5F3CC;     --idea-pastel:#ECE684;
  --serie:#8C56D7;    --serie-fondo:#F1E9FC;    --serie-pastel:#DFCCF9;

  /* Degradado de marca: los dos colores de Licha en uno */
  --degradado:linear-gradient(150deg, var(--rosa) 0%, var(--amarillo-claro) 100%);
  --degradado-ancho:linear-gradient(100deg, var(--rosa) 0%, var(--amarillo-claro) 130%);
  --degradado-invertido:linear-gradient(100deg, var(--amarillo-claro) 0%, var(--rosa) 130%);

  --r-s:8px; --r-m:14px; --r-l:18px; --r-xl:24px;
  /* Tipografías: una para leer y otra para titular */
  --f-texto:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-titulo:'Oswald', 'Arial Narrow', sans-serif;
  --sombra:0 1px 2px rgba(35,31,32,.05), 0 8px 24px -16px rgba(35,31,32,.22);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --marca:#D699D5; --marca-texto:#D699D5; --marca-fondo:#7C2A7E;
    --fondo:#151213;
    --superficie:#1E1A1B;
    --superficie-2:#271F27;
    --superficie-3:#262009;
    --borde:#332C2E;
    --borde-marca:#FCC602;
    --texto:#F4EFEF;
    --texto-2:#B5AAAC;
    --texto-3:#8B8183;
    --rosa:#3A2C39;
    --rosa-claro:#271F27;
    --rosa-fuerte:#5B4359;
    --amarillo-claro:#4A3A05;
    --amarillo-papel:#262009;
    --ok:#98E1C6;     --ok-fondo:#1E392F;
    --aviso:#F8BF81;  --aviso-fondo:#412C16;
    --alerta:#F28899; --alerta-fondo:#3F181E;
    --info:#81A6F8;   --info-fondo:#162341;
    --idea:#E8E391;   --idea-fondo:#3B391B;
    --serie:#B58EEC;  --serie-fondo:#291A3C;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --marca:#D699D5; --marca-texto:#D699D5; --marca-fondo:#7C2A7E;
  --fondo:#151213;
  --superficie:#1E1A1B;
  --superficie-2:#271F27;
  --superficie-3:#262009;
  --borde:#332C2E;
  --texto:#F4EFEF;
  --texto-2:#B5AAAC;
  --texto-3:#8B8183;
  --rosa:#3A2C39;
  --rosa-claro:#271F27;
  --rosa-fuerte:#5B4359;
  --amarillo-claro:#4A3A05;
  --amarillo-papel:#262009;
  --ok:#98E1C6;     --ok-fondo:#1E392F;
  --aviso:#F8BF81;  --aviso-fondo:#412C16;
  --alerta:#F28899; --alerta-fondo:#3F181E;
  --info:#81A6F8;   --info-fondo:#162341;
  --idea:#E8E391;   --idea-fondo:#3B391B;
  --serie:#B58EEC;  --serie-fondo:#291A3C;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--f-texto);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:700}
.display{font-family:var(--f-titulo); font-weight:600; letter-spacing:.01em; text-transform:uppercase; line-height:1.05}
img{max-width:100%}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--marca); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}


/* ---------- Armazón ---------- */
.armazon{display:flex; gap:16px; padding:16px; padding-block:16px 28px; max-width:1440px; margin:0 auto}

/* ---------- Barra lateral ---------- */
.lateral{
  flex:0 0 236px; align-self:flex-start; position:sticky; top:16px;
  border:3px solid var(--borde-marca); border-radius:var(--r-l);
  background:var(--superficie);
  padding:18px 14px 22px;
  display:flex; flex-direction:column; gap:18px;
  min-height:calc(100vh - 56px); max-height:calc(100vh - 44px); overflow:auto;
}
.marca{display:flex; flex-direction:column; padding:2px 4px 0}
.marca img{width:100%; height:auto; display:block}
:root[data-theme="dark"] .marca img{filter:invert(1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .marca img{filter:invert(1)}}

.menu{display:flex; flex-direction:column; gap:7px; list-style:none; margin:0; padding:0}
.menu button{
  width:100%; display:flex; align-items:center; gap:10px;
  border:2px solid transparent; background:transparent;
  padding:7px 14px; border-radius:999px;
  font-weight:800; font-size:14px; letter-spacing:.01em;
  color:var(--texto); text-align:left; transition:transform .12s ease, background .12s ease;
}
.menu button .ico{flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center; font-size:16px; line-height:1; color:var(--tinta)}
.menu button .pildora{margin-left:auto}
.menu .grupo{font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--texto-3); font-weight:800; padding:8px 14px 0}
.menu .grupo:first-child{padding-top:0}
:root[data-theme="dark"] .menu button .ico{color:var(--texto)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .menu button .ico{color:var(--texto)}}
.menu button:hover{transform:translateX(2px)}
.menu button[aria-current="true"]{border-color:var(--tinta)}
.menu .t-rosa[aria-current="true"]{border-color:var(--marca)}
:root[data-theme="dark"] .menu button[aria-current="true"]{border-color:var(--tinta)}
.menu .t-rosa[aria-current="true"]{border-color:var(--marca)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .menu button[aria-current="true"]{border-color:var(--tinta)}
.menu .t-rosa[aria-current="true"]{border-color:var(--marca)}}
.menu .t-amarillo{background:var(--amarillo-claro)}
.menu .t-rosa{background:var(--rosa)}
.menu .t-papel{background:var(--amarillo-papel)}
.menu .t-blanco{background:transparent; border-color:var(--borde)}

.lateral-pie{margin-top:auto; display:flex; flex-direction:column; gap:10px; padding:0 6px; font-size:12px; color:var(--texto-3)}
.usuario{display:flex; align-items:center; gap:9px}
.usuario img{width:34px; height:34px; border-radius:9px; display:block}
.usuario b{display:block; font-size:13px; color:var(--texto)}

/* ---------- Zona principal ---------- */
.principal{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:18px}
.trazo{display:block; width:100%; height:3px; background:var(--amarillo); border-radius:999px}
.cabecera{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.cabecera h1{font-size:clamp(28px,4vw,40px)}
.cabecera p{margin:2px 0 0; color:var(--texto-2); font-size:14px; max-width:62ch}
/* Ficha de publicación: título más ligero y pastillas en una fila a todo el ancho (qué es a la izquierda, cuándo y dónde a la derecha) */
.cabecera-ficha{align-items:center}
.cabecera-ficha h1{font-size:clamp(22px,2.6vw,28px); font-weight:500; letter-spacing:.02em}
.cabecera-ficha .cab-pildoras{flex:1 1 100%; max-width:none; margin:4px 0 0; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.cab-pildoras .grupo{display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap}
.cab-pildoras .grupo.derecha{margin-left:auto; padding-left:14px; border-left:2px solid var(--borde)}
.cab-pildoras .grupo:empty{display:none}
/* El desplegable de etiquetas cuelga de body para que la tarjeta (overflow:hidden) no lo recorte */
body > .selectize-dropdown{z-index:1060}
.resumen-dia{font-size:15.5px; font-weight:700; color:var(--texto) !important; max-width:none !important; padding:6px 0 2px}
.acciones{display:flex; gap:8px; flex-wrap:wrap}
.btn{
  border:2px solid var(--tinta); background:var(--tinta); color:#FFF9E6;
  padding:8px 16px; border-radius:999px; font-weight:800; font-size:13.5px;
  letter-spacing:.01em; transition:transform .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.claro{background:var(--amarillo); border-color:var(--amarillo); color:#231F20}
.btn.fantasma{background:transparent; color:var(--texto); border-color:var(--borde)}
:root[data-theme="dark"] .btn{border-color:var(--amarillo); background:var(--amarillo); color:#231F20}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn{border-color:var(--amarillo); background:var(--amarillo); color:#231F20}}
:root[data-theme="dark"] .btn.fantasma, :root:not([data-theme="light"]) .btn.fantasma{background:transparent; color:var(--texto); border-color:var(--borde)}

.panel{display:none; flex-direction:column; gap:18px}
.panel.activo{display:flex}

/* ---------- Tarjetas ---------- */
.tarjeta{background:var(--superficie-2); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sombra)}
.tarjeta > header{background:var(--degradado-ancho); padding:13px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.tarjeta > header h2{font-size:14.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:900; display:flex; align-items:center; gap:8px}
.tarjeta > header h2 .bi{font-size:1.1em; color:var(--tinta)}
:root[data-theme="dark"] .tarjeta > header h2 .bi{color:var(--texto)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tarjeta > header h2 .bi{color:var(--texto)}}
.tarjeta > header .meta{font-size:12.5px; color:var(--texto-2); font-weight:700}
.tarjeta > .cuerpo{padding:18px 20px 22px}
.tarjeta.papel{background:var(--amarillo-papel)}
.tarjeta.papel > header{background:transparent; border-bottom:1.5px solid color-mix(in srgb, var(--amarillo) 35%, transparent)}
.tarjeta.lisa{background:var(--superficie); border:1.5px solid var(--borde)}
.tarjeta.lisa > header{background:transparent; border-bottom:1.5px solid var(--borde)}

.rejilla{display:grid; gap:16px}
.r-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.r-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ---------- Cifras del panel ---------- */
.cifras{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.cifra{padding:14px 16px; border-radius:var(--r-m); background:var(--superficie); border:1.5px solid var(--borde)}
.cifra .n{font-family:var(--f-titulo); font-size:30px; line-height:1; font-variant-numeric:tabular-nums}
.cifra .e{font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--texto-3); font-weight:800; margin-top:6px}
.cifra .d{font-size:12.5px; font-weight:700; margin-top:5px}
.sube{color:var(--ok)} .baja{color:var(--alerta)}

/* ---------- Listas de tareas / hoy ---------- */
.lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.lista li{display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1.5px dashed var(--borde)}
.lista li:last-child{border-bottom:0; padding-bottom:0}
.lista li:first-child{padding-top:0}
.lista .txt{flex:1 1 auto; min-width:0}
.lista .txt b{display:block; font-size:14.5px}
.lista .txt small{color:var(--texto-2); font-size:12.5px}

/* ---------- Etiquetas y estados ---------- */
.pildora{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap}
.p-amarillo{background:var(--amarillo-claro); color:var(--texto)}
.p-rosa{background:var(--rosa); color:var(--texto)}
.p-tinta{background:var(--tinta); color:#FFF9E6}
.p-marca{background:var(--marca-fondo); color:#FFF9E6}
:root[data-theme="dark"] .p-tinta{background:var(--amarillo); color:#231F20}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .p-tinta{background:var(--amarillo); color:#231F20}}
.p-ok{background:var(--ok-fondo); color:var(--ok)}
.p-aviso{background:var(--aviso-fondo); color:var(--aviso)}
.p-alerta{background:var(--alerta-fondo); color:var(--alerta)}
.p-info{background:var(--info-fondo); color:var(--info)}
.p-idea{background:var(--idea-fondo); color:var(--idea)}
.p-serie{background:var(--serie-fondo); color:var(--serie)}
.p-linea{background:transparent; border:1.5px solid var(--borde); color:var(--texto-2)}
/* variante maciza: pastel de fondo con el texto en tinta, para las marcas de estado */
.p-solido{color:#231F20}
.p-solido.p-ok{background:var(--ok-pastel)}
.p-solido.p-aviso{background:var(--aviso-pastel)}
.p-solido.p-alerta{background:var(--alerta-pastel)}
.p-solido.p-info{background:var(--info-pastel)}
.p-solido.p-idea{background:var(--idea-pastel)}
.p-solido.p-serie{background:var(--serie-pastel)}

.prioridad{display:inline-flex; gap:2px}
.prioridad i{width:7px; height:7px; border-radius:50%; background:var(--gris-tenue); display:block}
.prioridad i.on{background:var(--amarillo)}

/* ---------- Ideas ---------- */
.muro{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; align-items:start}
.idea{background:var(--superficie); border:1.5px solid var(--borde); border-radius:var(--r-l); padding:15px 16px; display:flex; flex-direction:column; gap:9px}
.idea.destacada{background:var(--amarillo-papel); border-color:var(--amarillo)}
.idea h3{font-size:16px; line-height:1.25}
.idea p{margin:0; font-size:13.5px; color:var(--texto-2)}
.idea .pie{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:2px}
.etiquetas{display:flex; gap:5px; flex-wrap:wrap}

.captura{display:flex; gap:10px; align-items:center; background:var(--tinta); color:#FFF9E6; border-radius:var(--r-l); padding:14px 18px; flex-wrap:wrap}
:root[data-theme="dark"] .captura{background:var(--superficie); border:2px solid var(--amarillo)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .captura{background:var(--superficie); border:2px solid var(--amarillo); color:var(--texto)}}
.captura input{
  flex:1 1 240px; min-width:0; border:0; border-radius:999px; padding:10px 16px;
  font:inherit; font-size:14px; background:#FFF9E6; color:#231F20;
}

/* ---------- Tablero ---------- */
.tablero{display:flex; gap:13px; overflow-x:auto; padding-bottom:8px}
.columna{flex:0 0 236px; background:var(--superficie-2); border-radius:var(--r-l); padding:12px; display:flex; flex-direction:column; gap:10px}
.columna > h3{font-size:12px; text-transform:uppercase; letter-spacing:.09em; display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--texto-2)}
.columna > h3 span{background:var(--superficie); border-radius:999px; padding:1px 8px; font-size:11px; font-variant-numeric:tabular-nums}
.ficha{background:var(--superficie); border-radius:var(--r-m); padding:11px 13px; display:flex; flex-direction:column; gap:7px; border:1.5px solid var(--borde); cursor:grab}
.ficha b{font-size:13.5px; line-height:1.3}
.ficha .datos{display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:11.5px; color:var(--texto-3); font-weight:700}
.franja{height:4px; border-radius:999px; background:var(--amarillo)}
.franja.rosa{background:var(--rosa-fuerte)}
.franja.tinta{background:var(--tinta)}
.franja.guion{background:var(--past-lila)}
.franja.grabar{background:var(--past-azul)}
.franja.grabado{background:var(--past-menta)}
.franja.edicion{background:var(--past-naranja)}
.franja.listo{background:var(--past-amarillo)}
:root[data-theme="dark"] .franja.tinta{background:var(--gris)}

/* ---------- Guion por escenas ---------- */
.escenas{display:flex; flex-direction:column; gap:0}
.escena{display:grid; grid-template-columns:58px 1fr 1fr; gap:14px; padding:14px 0; border-bottom:1.5px dashed var(--borde); align-items:start}
.escena:last-child{border-bottom:0}
.escena .tiempo{font-family:var(--f-titulo); font-size:17px; color:var(--texto-2); font-variant-numeric:tabular-nums; display:flex; flex-direction:column; gap:5px; align-items:flex-start}
.escena .rot{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-3); font-weight:800; display:block; margin-bottom:3px; font-family:var(--f-texto)}
.escena p{margin:0; font-size:13.5px}
.escena .dicho{font-style:italic; color:var(--texto-2)}
@media (max-width:640px){.escena{grid-template-columns:52px 1fr; } .escena .locucion{grid-column:2}}

/* ---------- Medios ---------- */
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:11px}
.medio{border-radius:var(--r-m); overflow:hidden; background:var(--superficie); border:1.5px solid var(--borde)}
.medio .lienzo{aspect-ratio:9/16; max-width:100%; display:grid; place-items:center; position:relative; background:linear-gradient(150deg, var(--rosa) 0%, var(--amarillo-claro) 100%)}
.medio .lienzo .dur{position:absolute; right:6px; bottom:6px; background:rgba(35,31,32,.82); color:#FFF9E6; font-size:10.5px; font-weight:800; padding:1px 6px; border-radius:999px; font-variant-numeric:tabular-nums}
.medio .lienzo .glifo{font-family:var(--f-titulo); font-size:26px; color:rgba(35,31,32,.35)}
.medio .pie{padding:7px 9px; font-size:11px; color:var(--texto-2); font-weight:700; word-break:break-all; line-height:1.35}

/* ---------- Bandeja ---------- */
.fila-inbox{display:flex; gap:13px; align-items:center; padding:12px 0; border-bottom:1.5px dashed var(--borde); flex-wrap:wrap}
.fila-inbox:last-child{border-bottom:0}
.fila-inbox .mini{flex:0 0 auto; width:46px; height:62px; border-radius:9px; background:linear-gradient(150deg,var(--rosa),var(--amarillo-claro)); display:grid; place-items:center; font-family:var(--f-titulo); font-size:12px; color:rgba(35,31,32,.5)}
.fila-inbox .info{flex:1 1 200px; min-width:0}
.fila-inbox .info b{font-size:13.5px; word-break:break-all}
.fila-inbox .info small{display:block; color:var(--texto-3); font-size:12px; font-variant-numeric:tabular-nums}

/* ---------- Métricas ---------- */
.grafica{width:100%; height:auto; display:block}
.tabla-envoltorio{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:360px; font-size:13.5px}
th,td{text-align:left; padding:9px 10px; border-bottom:1.5px dashed var(--borde)}
th:first-child,td:first-child{padding-left:0}
th:last-child,td:last-child{padding-right:0}
th{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--texto-3); font-weight:800}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}

/* ---------- Calendario ---------- */
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; min-width:640px}
.cal .dia-nombre{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--texto-3); font-weight:800; text-align:center; padding-bottom:3px}
.cal .celda.hoy{background:var(--degradado); border-color:var(--amarillo)}
.cal .celda{min-height:78px; background:var(--superficie); border:1.5px solid var(--borde); border-radius:12px; padding:6px; display:flex; flex-direction:column; gap:4px}
.cal .celda.fuera{opacity:.38}
.cal .celda .n{font-size:11px; font-weight:800; color:var(--texto-3); font-variant-numeric:tabular-nums}
.cal .evt{font-size:10.5px; font-weight:800; padding:3px 6px; border-radius:7px; line-height:1.25; background:var(--amarillo-claro)}
.cal .evt.rosa{background:var(--rosa)}
.cal .evt.tinta{background:var(--tinta); color:#FFF9E6}
:root[data-theme="dark"] .cal .evt.tinta{background:var(--gris); color:#231F20}
.cal-envoltorio{overflow-x:auto}

/* ---------- Series ---------- */
.barra-progreso{height:9px; border-radius:999px; background:var(--borde); overflow:hidden}
.barra-progreso i{display:block; height:100%; background:var(--degradado); border-radius:999px}

/* ---------- Móvil ---------- */
.barra-movil{display:none; position:sticky; top:0; z-index:20; background:var(--fondo); border-bottom:3px solid var(--amarillo); padding:10px 16px; align-items:center; gap:12px}
.barra-movil img{height:26px; width:auto}
:root[data-theme="dark"] .barra-movil img{filter:invert(1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .barra-movil img{filter:invert(1)}}
.barra-movil button{margin-left:auto; border:2px solid var(--tinta); background:transparent; border-radius:999px; padding:5px 13px; font-weight:800; font-size:13px; letter-spacing:.01em}
:root[data-theme="dark"] .barra-movil button{border-color:var(--amarillo)}

@media (max-width:860px){
  .armazon{flex-direction:column; padding:12px; gap:14px}
  .barra-movil{display:flex}
  .lateral{position:static; flex:1 1 auto; max-height:none; width:100%}
  .lateral[hidden]{display:none}
  .lateral .menu{flex-direction:row; flex-wrap:wrap}
  .lateral .menu li{flex:1 1 130px}
  .lateral .menu li.grupo{flex:1 1 100%; padding:6px 8px 0}
  .marca{display:none}
  .lateral-pie{margin-top:6px}
}

/* =====================================================================
   Licha Contenido · complementos a la maqueta
   Todo lo anterior es el CSS de la maqueta validada, sin cambios.
   Aquí van las piezas que la maqueta no necesitaba (formularios,
   pestañas, modales, avisos, tablas de datos) usando los mismos tokens.
   ===================================================================== */

/* ---------- Bootstrap: que no pise a la maqueta ---------- */
body{--bs-body-font-family:var(--f-texto); --bs-body-font-size:15px; --bs-body-color:var(--texto); --bs-body-bg:var(--fondo); --bs-border-color:var(--borde); --bs-link-color:var(--marca-texto); --bs-link-hover-color:var(--marca-fondo)}
a{color:var(--marca-texto); text-decoration:none; font-weight:700}
a:hover{color:var(--marca-fondo); text-decoration:underline}
.btn, .btn:hover, .btn:focus, .btn:active{--bs-btn-padding-x:16px; --bs-btn-padding-y:8px; --bs-btn-font-size:13px; --bs-btn-line-height:1.4; --bs-btn-border-radius:999px; --bs-btn-border-width:2px; box-shadow:none}
.btn:hover, .btn:focus-visible{background:var(--tinta); border-color:var(--tinta); color:#FFF9E6}
.btn.claro:hover, .btn.claro:focus-visible{background:var(--amarillo); border-color:var(--amarillo); color:#231F20; filter:brightness(.96)}
.btn.fantasma:hover, .btn.fantasma:focus-visible{background:var(--superficie-2); color:var(--texto); border-color:var(--gris-tenue)}
.btn.peligro{background:transparent; color:var(--alerta); border-color:var(--alerta-pastel)}
.btn.peligro:hover, .btn.peligro:focus-visible{background:var(--alerta-fondo); color:var(--alerta); border-color:var(--alerta)}
.btn.pequeno{padding:4px 11px; font-size:12px}
.btn:disabled, .btn.disabled{opacity:.55; transform:none}
:root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .btn:focus-visible{background:var(--amarillo); border-color:var(--amarillo); color:#231F20; filter:brightness(1.05)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn:hover, :root:not([data-theme="light"]) .btn:focus-visible{background:var(--amarillo); border-color:var(--amarillo); color:#231F20; filter:brightness(1.05)}}
.btn .bi{font-size:1.05em; vertical-align:-.1em}

/* ---------- Formularios ---------- */
.campo{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.campo > label, .rotulo{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--texto-3); font-weight:800}
.campo .ayuda{font-size:12.5px; color:var(--texto-3); margin:0}
.campo .error-campo{font-size:12.5px; color:var(--alerta); font-weight:700}
.form-control, .form-select, .form-control:focus, .form-select:focus, .selectize-input{
  background:var(--superficie); color:var(--texto); border:1.5px solid var(--borde); border-radius:14px;
  padding:9px 14px; font:inherit; font-size:14.5px; box-shadow:none; min-height:42px;
}
.form-control:focus, .form-select:focus, .selectize-input.focus{border-color:var(--amarillo); outline:0; box-shadow:0 0 0 3px var(--amarillo-claro)}
.form-control::placeholder{color:var(--texto-3); opacity:1}
.form-control:disabled, .form-select:disabled{background:var(--superficie-2); opacity:.7}
textarea.form-control{min-height:96px; resize:vertical}
.form-select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238B8183' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
/* La flecha del select: un solo icono, pequeño y a la derecha (el shorthand background: de arriba borraba estos valores) */
.form-select, .form-select:focus, .form-select:disabled{background-repeat:no-repeat; background-position:right 12px center; background-size:14px 10px; padding-right:36px}
input[type="color"].form-control{padding:4px 6px; width:56px; height:42px; border-radius:12px}
.form-check-input{width:20px; height:20px; margin-top:2px; border:1.5px solid var(--gris-tenue); background-color:var(--superficie)}
.form-check-input:checked{background-color:var(--tinta); border-color:var(--tinta)}
.form-check-input:focus{box-shadow:0 0 0 3px var(--amarillo-claro); border-color:var(--amarillo)}
.form-switch .form-check-input{width:38px; border-radius:999px}
.form-check-label{font-weight:600; font-size:14px}
:root[data-theme="dark"] .form-check-input:checked{background-color:var(--amarillo); border-color:var(--amarillo)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .form-check-input:checked{background-color:var(--amarillo); border-color:var(--amarillo)}}
.fila-campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 14px}
.entrada-color{display:flex; gap:8px; align-items:center}
.entrada-color .form-control[type="text"]{flex:1 1 auto; font-variant-numeric:tabular-nums}

/* Contador de caracteres frente al límite de la red */
.contador{font-size:12px; color:var(--texto-3); font-weight:800; font-variant-numeric:tabular-nums; text-align:right}
.contador.aviso{color:var(--aviso)} .contador.pasado{color:var(--alerta)}

/* ---------- Pestañas (misma píldora que el menú) ---------- */
.pestanas{display:flex; gap:7px; flex-wrap:wrap; list-style:none; margin:0 0 18px; padding:0}
.pestanas button, .pestanas a{
  border:2px solid transparent; background:var(--amarillo-papel); color:var(--texto);
  padding:7px 15px; border-radius:999px; font-weight:800; font-size:13px; letter-spacing:.01em; text-decoration:none;
}
.pestanas button:hover, .pestanas a:hover{transform:translateY(-1px); color:var(--texto); text-decoration:none}
.pestanas .activa, .pestanas [aria-selected="true"]{border-color:var(--tinta); background:var(--amarillo-claro)}
.pestanas .pildora{margin-left:6px}
.pestana-cuerpo{display:none} .pestana-cuerpo.activa{display:block}

/* ---------- Tablas de datos ---------- */
.tabla-envoltorio table{min-width:0}
table.datos th{white-space:nowrap}
table.datos td{vertical-align:middle}
table.datos tr.inactivo td{opacity:.5}
table.datos .acciones-fila{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.muestra-color{display:inline-block; width:16px; height:16px; border-radius:5px; vertical-align:-3px; margin-right:6px; border:1px solid rgba(35,31,32,.12)}
.avatar{width:34px; height:34px; border-radius:9px; display:inline-grid; place-items:center; font-family:var(--f-titulo); font-size:14px; color:#231F20; background:var(--amarillo-claro); flex:0 0 auto}
.avatar.grande{width:56px; height:56px; font-size:22px; border-radius:14px}

/* DataTables: ajustes al estilo de la casa */
div.dt-container .dt-search input, div.dt-container .dt-length select{border:1.5px solid var(--borde); border-radius:999px; padding:6px 12px; background:var(--superficie); color:var(--texto); font:inherit; font-size:13.5px}
div.dt-container .dt-info, div.dt-container .dt-search label, div.dt-container .dt-length label{font-size:12.5px; color:var(--texto-3); font-weight:700}
div.dt-container .dt-paging .dt-paging-button{border-radius:999px !important; font-weight:800; font-size:12.5px; color:var(--texto) !important; border:0 !important; background:transparent !important}
div.dt-container .dt-paging .dt-paging-button.current{background:var(--amarillo-claro) !important; border:2px solid var(--tinta) !important}
div.dt-container .dt-paging .dt-paging-button:hover{background:var(--rosa) !important}
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover{outline:0}
table.dataTable > tbody > tr > td, table.dataTable > thead > tr > th{border-bottom:1.5px dashed var(--borde)}
table.dataTable.no-footer{border-bottom:0}

/* ---------- Modales ---------- */
.modal-content{background:var(--superficie); color:var(--texto); border:3px solid var(--amarillo); border-radius:var(--r-xl); box-shadow:var(--sombra)}
.modal-header{background:var(--degradado-ancho); border-bottom:0; padding:14px 22px; border-radius:calc(var(--r-xl) - 3px) calc(var(--r-xl) - 3px) 0 0}
.modal-header .modal-title{font-size:15px; letter-spacing:.08em; text-transform:uppercase; font-weight:900; color:#231F20}
.modal-body{padding:20px 22px 6px}
.modal-footer{border-top:0; padding:8px 22px 20px; gap:8px}
.btn-close{background-color:transparent; opacity:.7}
:root[data-theme="dark"] .modal-header .modal-title, :root[data-theme="dark"] .btn-close{color:var(--texto); filter:invert(1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .modal-header .modal-title{color:var(--texto)} :root:not([data-theme="light"]) .btn-close{filter:invert(1)}}
.modal-backdrop{background:rgba(35,31,32,.55)}

/* ---------- Avisos (toasts) y mensajes en línea ---------- */
.avisos{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:1080; display:flex; flex-direction:column; gap:8px; width:min(92vw,420px)}
.aviso{display:flex; gap:10px; align-items:flex-start; padding:12px 16px; border-radius:var(--r-m); background:var(--tinta); color:#FFF9E6; font-weight:700; font-size:13.5px; box-shadow:var(--sombra); animation:aviso-entra .18s ease}
.aviso.ok{background:var(--ok-pastel); color:#231F20}
.aviso.error{background:var(--alerta-pastel); color:#231F20}
.aviso.aviso-tipo{background:var(--aviso-pastel); color:#231F20}
.aviso button{margin-left:auto; border:0; background:transparent; color:inherit; font-weight:900; padding:0 2px}
@keyframes aviso-entra{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.mensaje{padding:12px 16px; border-radius:var(--r-m); font-size:13.5px; font-weight:700; margin:0 0 14px}
.mensaje.ok{background:var(--ok-fondo); color:var(--ok)}
.mensaje.error, .mensaje.alerta{background:var(--alerta-fondo); color:var(--alerta)}
.mensaje.aviso{background:var(--aviso-fondo); color:var(--aviso)}
.mensaje.info{background:var(--info-fondo); color:var(--info)}
.vacio{padding:18px 4px; color:var(--texto-3); font-size:13.5px; font-weight:600; text-align:center}
.vacio b{display:block; color:var(--texto-2); font-size:14.5px; margin-bottom:3px}

/* ---------- Acceso (login) ---------- */
.acceso{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--fondo)}
.acceso-caja{width:min(100%,400px); border:3px solid var(--amarillo); border-radius:var(--r-l); background:var(--superficie); padding:28px 26px 26px; box-shadow:var(--sombra)}
.acceso-caja .marca{padding:0 6px 6px}
.acceso-caja .trazo{margin:6px 0 20px}
.acceso-caja h1{font-size:22px; margin-bottom:4px}
.acceso-caja p.sub{margin:0 0 18px; color:var(--texto-2); font-size:13.5px}
.acceso-caja .btn{width:100%; padding:11px 16px; font-size:14px}
.acceso-pie{margin-top:16px; font-size:12px; color:var(--texto-3); text-align:center}
.acceso-pie a{color:var(--texto-2); font-weight:700}
/* «¿Quién eres?»: una tarjeta por persona, grande para el dedo */
.quien{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:6px 0 4px}
.quien button{display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 10px 14px; border:2px solid var(--borde); border-radius:var(--r-l); background:var(--superficie-2); font-weight:800; font-size:14px; color:var(--texto); text-align:center; line-height:1.2}
.quien button:hover, .quien button:focus-visible{border-color:var(--amarillo); background:var(--amarillo-papel); outline:0}
.quien .avatar{width:48px; height:48px; border-radius:12px; font-size:19px}
.hola{display:flex; gap:12px; align-items:center; margin-bottom:16px}
.hola h1{font-size:24px; margin:0}
.hola .enlace{border:0; background:transparent; padding:0; font-size:12.5px; font-weight:700; color:var(--texto-3); text-decoration:underline; cursor:pointer}
.hola .enlace:hover{color:var(--marca-texto)}
/* PIN: cifras grandes y separadas, y teclado en pantalla */
.form-control.pin{font-size:26px; letter-spacing:.35em; text-align:center; font-variant-numeric:tabular-nums; padding-left:calc(.5em + .35em); font-family:var(--f-titulo); font-weight:500}
.teclado{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px}
.teclado button{height:54px; border:2px solid var(--borde); border-radius:16px; background:var(--superficie-2); font-family:var(--f-titulo); font-size:24px; font-weight:500; color:var(--texto); user-select:none; -webkit-user-select:none; touch-action:manipulation}
.teclado button:hover, .teclado button:focus-visible{border-color:var(--amarillo); background:var(--amarillo-papel); outline:0}
.teclado button:active{transform:scale(.96); background:var(--amarillo-claro)}
.teclado button.entrar{background:var(--amarillo); border-color:var(--amarillo); color:#231F20}
.teclado button[data-tecla="borrar"], .teclado button[data-tecla="siguiente"]{font-size:20px; color:var(--texto-2)}

/* ---------- Lateral: tema, admin y usuario ---------- */
.menu .separador{height:1.5px; background:var(--borde); margin:6px 8px}
.menu button.t-admin{background:transparent; border-color:transparent; font-size:12px; color:var(--texto-2); padding-block:6px}
.menu button.t-admin[aria-current="true"]{border-color:var(--tinta); color:var(--texto)}
.menu button.pronto{opacity:.55}
.menu button.pronto .pildora{margin-left:auto; font-size:9.5px; padding:1px 7px}
.lateral-pie .tema{display:flex; gap:4px}
.lateral-pie .tema button{flex:1 1 0; border:1.5px solid var(--borde); background:transparent; border-radius:999px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:4px 0; color:var(--texto-3)}
.lateral-pie .tema button[aria-pressed="true"]{border-color:var(--tinta); color:var(--texto); background:var(--amarillo-claro)}
.lateral-pie a.salir{color:var(--texto-3); font-weight:700; font-size:12px}
.usuario a{color:inherit; text-decoration:none}
.usuario .avatar{width:34px; height:34px; border-radius:9px}

/* ---------- Detalles ---------- */
.cabecera .sub{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.lista .txt small .pildora{vertical-align:middle}
.lista li .acciones-fila{display:flex; gap:6px; flex-wrap:wrap}
.chip-permiso{display:inline-flex; gap:0; border:1.5px solid var(--borde); border-radius:999px; overflow:hidden}
.chip-permiso label{padding:4px 10px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; color:var(--texto-3); border-right:1.5px solid var(--borde)}
.chip-permiso label:last-child{border-right:0}
.chip-permiso input{position:absolute; opacity:0; pointer-events:none}
.chip-permiso input:checked + label{background:var(--amarillo-claro); color:var(--texto)}
.chip-permiso input:focus-visible + label{outline:2px solid var(--marca)}
.chip-permiso.heredado label{font-style:italic}
.fila-permiso{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-bottom:1.5px dashed var(--borde); flex-wrap:wrap}
.fila-permiso:last-child{border-bottom:0}
.fila-permiso b{font-size:13.5px}
.fila-permiso small{display:block; color:var(--texto-3); font-size:11.5px}
.limites-tabla td{padding:5px 6px}
.limites-tabla .form-control{padding:5px 9px; min-height:34px; font-size:13px; border-radius:10px; max-width:96px}
.limites-tabla .form-control.ancho{max-width:180px}
.limites-tabla th.red{font-family:var(--f-titulo); font-size:14px; letter-spacing:.02em; text-transform:none; color:var(--texto)}
.arrastrable{cursor:grab}
.asa{color:var(--gris-tenue); cursor:grab; padding:0 6px; user-select:none}
code{background:var(--superficie-3); color:var(--texto); padding:1px 6px; border-radius:6px; font-size:12.5px}

/* ---------- Fase 2: filtros, píldoras de color, tablero, calendario ---------- */
.migas{margin:0 0 4px; font-size:12.5px; color:var(--texto-3); font-weight:700}
.migas a{color:var(--texto-2)}
.filtros{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.filtros .form-select, .filtros .form-control{width:auto; flex:0 1 auto; min-height:38px; padding:6px 32px 6px 12px; font-size:13px; border-radius:12px; max-width:100%}
.filtros .form-control{padding-right:12px; flex:1 1 180px}
.filtros .form-check{display:flex; align-items:center; gap:6px}
@media (max-width:640px){.filtros .form-select, .filtros .form-control{flex:1 1 45%}}
/* Píldora con color de la base (estado, serie, categoría): fondo suave y texto del color */
.pildora.p-color{--c:#888888; background:color-mix(in srgb, var(--c) 16%, var(--superficie)); color:color-mix(in srgb, var(--c) 78%, var(--tinta)); border:1.5px solid color-mix(in srgb, var(--c) 45%, transparent)}
:root[data-theme="dark"] .pildora.p-color{color:color-mix(in srgb, var(--c) 70%, white)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pildora.p-color{color:color-mix(in srgb, var(--c) 70%, white)}}
a .pildora{cursor:pointer}
.acciones-fila{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.idea .acciones-fila{margin-top:6px}
.idea h3 a{color:inherit; text-decoration:none}
.lista .txt b a{color:inherit; text-decoration:none}
.lista .txt b a:hover{text-decoration:underline}
.lista .avatar{width:30px; height:30px; font-size:12px}
.orden-serie{font-family:var(--f-titulo); font-size:18px; color:var(--texto-3); width:26px; text-align:center; flex:0 0 auto}
.escena .asa{font-size:14px; padding:0; margin-right:2px}
.escena .tiempo{position:relative}
/* Tablero: columnas con su color y arrastre */
.columna{--c:#888888}
.columna > h3 .nombre{display:flex; align-items:center; gap:7px}
.columna > h3 .nombre::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--c); flex:0 0 auto}
.columna .fichas{display:flex; flex-direction:column; gap:10px; min-height:60px; flex:1 1 auto}
.ficha{text-decoration:none; color:inherit}
.ficha:hover{border-color:var(--amarillo); color:inherit}
.ficha .datos .atrasado{color:var(--alerta)}
.ficha-fantasma{opacity:.35; border-style:dashed}
.ficha-elegida{box-shadow:0 8px 22px rgba(35,31,32,.18); border-color:var(--amarillo)}
@media (max-width:640px){.columna{flex:0 0 78vw}}
/* Calendario (FullCalendar con los tokens de la app) */
#calendario{--fc-border-color:var(--borde); --fc-page-bg-color:transparent; --fc-neutral-bg-color:var(--superficie-2); --fc-today-bg-color:var(--amarillo-papel);
  --fc-button-bg-color:var(--superficie-2); --fc-button-border-color:var(--borde); --fc-button-text-color:var(--texto); --fc-button-hover-bg-color:var(--amarillo-claro); --fc-button-hover-border-color:var(--amarillo);
  --fc-button-active-bg-color:var(--amarillo); --fc-button-active-border-color:var(--amarillo); --fc-list-event-hover-bg-color:var(--amarillo-papel); --fc-event-text-color:#231F20; --fc-now-indicator-color:var(--marca); font-size:13px}
#calendario .fc-toolbar-title{font-family:var(--f-titulo); font-weight:600; text-transform:uppercase; font-size:20px; letter-spacing:.01em}
#calendario .fc .fc-button{border-radius:999px; font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; padding:5px 12px; box-shadow:none}
#calendario .fc .fc-button-primary:not(:disabled).fc-button-active, #calendario .fc .fc-button-primary:not(:disabled):active{color:#231F20}
#calendario .fc .fc-button:focus{box-shadow:0 0 0 3px var(--amarillo-claro)}
#calendario .fc-toolbar.fc-header-toolbar{margin-bottom:12px; gap:8px; flex-wrap:wrap}
#calendario .fc-col-header-cell-cushion{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--texto-3); font-weight:800; text-decoration:none}
#calendario .fc-daygrid-day-number{font-size:11.5px; font-weight:800; color:var(--texto-3); text-decoration:none}
#calendario .fc-daygrid-day.fc-day-today{background:var(--degradado)}
#calendario .fc-daygrid-day.fc-day-today .fc-daygrid-day-number{color:var(--tinta)}
#calendario .fc-event{border-radius:7px; font-size:10.5px; font-weight:800; padding:2px 5px; border-width:0 0 0 3px; line-height:1.25; cursor:pointer}
#calendario .fc-daygrid-event{white-space:normal}
#calendario .fc-event.cal-atrasada{outline:2px dashed var(--alerta); outline-offset:-1px}
#calendario .fc-event.cal-publicada{opacity:.85}
#calendario .fc-event .cal-extra{font-weight:600; opacity:.7}
#calendario .fc-list-event-title a{color:var(--texto); text-decoration:none}
#calendario .fc-list-day-cushion{background:var(--superficie-2)}
#calendario .fc-list-day-text, #calendario .fc-list-day-side-text{font-family:var(--f-titulo); font-weight:600; text-transform:uppercase; color:var(--texto); text-decoration:none}
#calendario .fc-timegrid-slot-label-cushion, #calendario .fc-timegrid-axis-cushion{font-size:11px; color:var(--texto-3)}
#calendario .fc-popover{background:var(--superficie); border:2px solid var(--amarillo); border-radius:14px; box-shadow:var(--sombra)}
#calendario .fc-popover-header{background:var(--degradado-ancho); color:var(--tinta)}
#calendario .fc-more-link{color:var(--marca-texto); font-weight:800}
#calendario .fc-daygrid-day-frame{min-height:72px}
@media (max-width:640px){#calendario .fc-toolbar-title{font-size:16px} #calendario .fc-daygrid-day-frame{min-height:52px}}

/* ---------- Tareas de la ficha (por hacer, con casilla) ---------- */
.tareas{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column}
.tareas li{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1.5px dashed var(--borde)}
.tareas li:last-child{border-bottom:0}
.tareas li .form-check-input{margin:0; flex:0 0 auto}
.tareas li label{flex:1 1 auto; min-width:0; font-size:14px; font-weight:600; cursor:pointer; text-transform:none; letter-spacing:0; color:var(--texto)}
.tareas li.hecha label{text-decoration:line-through; color:var(--texto-3)}
.tareas li .quitar{border:0; background:transparent; color:var(--texto-3); font-size:18px; line-height:1; padding:0 6px; border-radius:999px}
.tareas li .quitar:hover{color:var(--alerta); background:var(--alerta-fondo)}
.tarea-nueva{display:flex; gap:8px; align-items:center}
.tarea-nueva .form-control{flex:1 1 auto; min-height:38px; padding:6px 12px; font-size:13.5px}

/* ---------- Medios: dos cajas (imágenes y vídeos / recursos) ---------- */
.medio .pie .suave{color:var(--texto-3); font-weight:600}
.medio .lienzo .glifo .bi{font-size:34px}
.rotulo.separado{margin-top:22px; padding-top:16px; border-top:1.5px dashed var(--borde)}
h3.rotulo{margin-bottom:6px}
.lista .ico-lista{flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:var(--superficie-2); display:grid; place-items:center; font-size:16px; color:var(--tinta)}
:root[data-theme="dark"] .lista .ico-lista{color:var(--texto)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lista .ico-lista{color:var(--texto)}}

/* ---------- Fase 3: galería, bandeja, visor, Uppy ---------- */
.galeria .medio{position:relative; display:flex; flex-direction:column}
.galeria .medio .lienzo{display:block; text-decoration:none; overflow:hidden; cursor:zoom-in}
.galeria .medio .lienzo.horizontal{aspect-ratio:16/9} .galeria .medio .lienzo.cuadrado{aspect-ratio:1}
.galeria .medio .lienzo img{width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0}
.galeria .medio .lienzo .estrella{position:absolute; left:6px; top:6px; background:var(--amarillo); color:#231F20; font-size:12px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; box-shadow:0 1px 4px rgba(35,31,32,.25)}
.galeria .medio .lienzo .version{position:absolute; right:6px; top:6px; background:rgba(35,31,32,.82); color:#FFF9E6; font-size:10px; font-weight:800; padding:1px 6px; border-radius:999px}
.galeria .medio.principal{border-color:var(--amarillo); box-shadow:0 0 0 2px var(--amarillo-claro)}
.galeria .medio .pie a{color:inherit; text-decoration:none} .galeria .medio .pie a:hover{text-decoration:underline}
.galeria .medio .acciones-fila .btn{padding:3px 8px; font-size:11px}
.galeria .medio.sortable-ghost{opacity:.35}
.fila-inbox .mini{overflow:hidden; text-decoration:none; position:relative}
.fila-inbox .mini img{width:100%; height:100%; object-fit:cover; display:block}
.fila-inbox .marcar{flex:0 0 auto; margin:0}
.visor .modal-content{background:#231F20; border-color:var(--amarillo)}
.visor .modal-header{background:#231F20; border-radius:0}
.visor .modal-header .modal-title{color:#FFF9E6; font-size:12.5px; letter-spacing:.04em; word-break:break-all}
.visor .btn-close{filter:invert(1); opacity:.8}
.visor .modal-body{padding:0; display:grid; place-items:center; background:#000; min-height:200px; max-height:85vh}
.visor video, .visor img{max-width:100%; max-height:85vh; display:block}
.visor audio{width:min(90%,480px); margin:40px 0}
.uppy-Dashboard-inner, .uppy-DashboardContent-bar, .uppy-Dashboard-AddFiles{font-family:var(--f-texto)}
.uppy-Dashboard-inner{border-radius:var(--r-l) !important}
.uppy-DashboardContent-addMore, .uppy-StatusBar-actionBtn--upload{background-color:var(--marca-fondo) !important; border-radius:999px !important}

/* ---------- Panel de publicaciones: chips por estado, filtros plegados y tarjetas con portada (15/09/2026) ---------- */
.barra-pubs{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.chips-estado{display:flex; gap:6px; overflow-x:auto; flex:1 1 320px; min-width:0; padding:2px 0; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.chips-estado::-webkit-scrollbar{display:none}
.chip{--c:var(--gris); display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1.5px solid var(--borde); background:var(--superficie); color:var(--texto-2); font-size:12.5px; font-weight:800; text-decoration:none; white-space:nowrap; flex:0 0 auto; transition:border-color .15s, background .15s}
.chip .punto{width:8px; height:8px; border-radius:50%; background:var(--c); flex:0 0 auto}
.chip .n{font-size:11px; font-variant-numeric:tabular-nums; color:var(--texto-3); background:var(--superficie-3); padding:0 6px; border-radius:999px}
.chip:hover{border-color:var(--amarillo); color:var(--texto)}
.chip.activo{background:var(--tinta); border-color:var(--tinta); color:#FFF9E6}
.chip.activo .n{background:rgba(255,249,230,.18); color:#FFF9E6}
:root[data-theme="dark"] .chip.activo{background:var(--amarillo); border-color:var(--amarillo); color:#231F20}
:root[data-theme="dark"] .chip.activo .n{background:rgba(35,31,32,.18); color:#231F20}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip.activo{background:var(--amarillo); border-color:var(--amarillo); color:#231F20} :root:not([data-theme="light"]) .chip.activo .n{background:rgba(35,31,32,.18); color:#231F20}}
.herramientas{display:flex; align-items:center; gap:8px; flex:0 1 auto}
.herramientas .buscar{position:relative; display:flex; align-items:center}
.herramientas .buscar .bi{position:absolute; left:11px; color:var(--texto-3); font-size:13px; pointer-events:none}
.herramientas .buscar .form-control{min-height:36px; padding:5px 12px 5px 31px; border-radius:999px; font-size:13px; width:170px}
.herramientas .buscar .form-control:focus{width:230px}
.herramientas #btn-filtros .n{background:var(--amarillo); color:#231F20; border-radius:999px; padding:0 6px; font-size:11px; margin-left:2px}
.conmutador-vista{display:inline-flex; border:1.5px solid var(--borde); border-radius:999px; overflow:hidden; background:var(--superficie)}
.conmutador-vista a{display:grid; place-items:center; width:34px; height:34px; color:var(--texto-3); text-decoration:none; font-size:15px}
.conmutador-vista a.activo{background:var(--amarillo); color:#231F20}
.panel-filtros{margin-top:-6px; padding:12px 14px; background:var(--superficie-2); border-radius:var(--r-l)}
.resumen-pubs{margin:-8px 0 0; font-size:12.5px; font-weight:700; color:var(--texto-3)}

.rejilla-pubs{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px}
.pub{--c:var(--gris); display:flex; flex-direction:column; background:var(--superficie); border:1.5px solid var(--borde); border-radius:var(--r-l); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--sombra); transition:transform .15s, border-color .15s, box-shadow .15s}
.pub:hover{transform:translateY(-2px); border-color:var(--amarillo); color:inherit; box-shadow:0 10px 26px -14px rgba(35,31,32,.35)}
.pub .portada{position:relative; aspect-ratio:4/5; background:var(--degradado); overflow:hidden}
.pub .portada img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.pub .portada.sin-imagen{display:grid; place-items:center}
.pub .portada.sin-imagen > .bi{font-size:44px; color:rgba(35,31,32,.28)}
.pub .portada::after{content:""; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(to top, rgba(35,31,32,.55), transparent); pointer-events:none}
.pub .portada.sin-imagen::after{display:none}
.pub .portada .estado{position:absolute; left:9px; top:9px; z-index:1; background:color-mix(in srgb, var(--c) 22%, #FFF9E6); box-shadow:0 1px 4px rgba(35,31,32,.2)}
.pub .portada .dur{position:absolute; right:9px; bottom:9px; z-index:1; background:rgba(35,31,32,.82); color:#FFF9E6; font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:999px; font-variant-numeric:tabular-nums}
.pub .portada .redes{position:absolute; left:9px; bottom:9px; z-index:1; display:flex; gap:4px}
.pub .portada .redes .bi{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; background:#FFF9E6; color:var(--c, #231F20); box-shadow:0 1px 4px rgba(35,31,32,.25)}
.pub .cuerpo{padding:11px 13px 12px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto}
.pub .titulo{font-size:14.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pub .detalle{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11.5px; font-weight:700; color:var(--texto-3)}
.pub .detalle .bi{font-size:12px; margin-right:1px}
.pub .avance{height:5px; border-radius:999px; background:var(--borde); overflow:hidden; margin-top:2px}
.pub .avance i{display:block; height:100%; background:var(--amarillo); border-radius:999px}
.pub .pie{margin-top:auto; padding-top:6px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.pub .pie .pildora{font-size:10.5px; padding:2px 8px}
.pub .pie .extra{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; color:var(--texto-3)}
@media (max-width:640px){
  .rejilla-pubs{grid-template-columns:repeat(2, 1fr); gap:10px}
  .pub .cuerpo{padding:9px 10px 10px}
  .pub .titulo{font-size:13px}
  .pub .detalle span:nth-child(n+2){display:none}
  .herramientas{flex:1 1 100%}
  .herramientas .buscar{flex:1 1 auto}
  .herramientas .buscar .form-control, .herramientas .buscar .form-control:focus{width:100%}
}

/* ---------- Calendario: bandeja «Sin fecha» arrastrable (15/09/2026) ---------- */
.cal-disposicion{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:16px; align-items:start}
.bandeja-sin-fecha{position:sticky; top:12px; transition:box-shadow .15s, outline-color .15s; outline:2px dashed transparent; outline-offset:-2px}
.bandeja-sin-fecha.destino{outline-color:var(--marca); box-shadow:0 0 0 4px var(--rosa)}
.bandeja-sin-fecha > header h2 .bi{font-size:1em}
.bandeja-sin-fecha .sueltas{display:flex; flex-direction:column; gap:8px}
.pub-suelta{--c:var(--gris); display:flex; align-items:center; gap:8px; padding:8px 8px 8px 6px; background:var(--superficie); border:1.5px solid var(--borde); border-left:4px solid var(--c); border-radius:var(--r-m); cursor:grab; user-select:none; -webkit-user-select:none; touch-action:pan-y}
.pub-suelta:active{cursor:grabbing}
.pub-suelta:hover{border-color:var(--amarillo); border-left-color:var(--c)}
.pub-suelta .asa{color:var(--gris-tenue); font-size:14px; flex:0 0 auto}
.pub-suelta .txt{display:flex; flex-direction:column; min-width:0; flex:1 1 auto}
.pub-suelta .txt b{font-size:12.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pub-suelta .txt small{font-size:10.5px; font-weight:700; color:var(--texto-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pub-suelta .ir{color:var(--texto-3); font-size:13px; padding:4px; border-radius:8px; flex:0 0 auto; text-decoration:none}
.pub-suelta .ir:hover{background:var(--amarillo-claro); color:var(--tinta)}
.pub-suelta.fc-event-dragging{opacity:.6}
.bandeja-sin-fecha .bandeja-vacia{padding:10px 4px}
@media (max-width:900px){
  .cal-disposicion{grid-template-columns:1fr}
  .bandeja-sin-fecha{position:static}
  .bandeja-sin-fecha .sueltas{flex-direction:row; flex-wrap:wrap}
  .pub-suelta{flex:1 1 220px; max-width:100%}
}
.chip.archivadas{margin-left:auto; border-style:dashed}
.chip.archivadas .bi{font-size:12px}

/* ---------- Métricas: ranking en tarjetas (15/09/2026) ---------- */
.rejilla-rank{grid-template-columns:repeat(auto-fill, minmax(165px, 1fr)); gap:11px}
.pub.rank .titulo{font-size:12.5px}
.pub.rank .cuerpo{padding:9px 10px 10px; gap:5px}
.pub.rank .detalle{font-size:10.5px}
.pub.rank .portada .puesto{position:absolute; left:9px; top:9px; z-index:1; background:var(--tinta); color:#FFF9E6; font-family:var(--f-titulo); font-weight:600; font-size:13px; padding:2px 9px; border-radius:999px; letter-spacing:.03em}
.pub.rank .portada .fmt{position:absolute; right:9px; top:9px; z-index:1; width:26px; height:26px; border-radius:50%; background:#FFF9E6; color:#231F20; display:grid; place-items:center; font-size:13px; box-shadow:0 1px 4px rgba(35,31,32,.25)}
.pub.rank .cifras{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px 8px; margin:4px 0 0}
.pub.rank .cifras div{min-width:0}
.pub.rank .cifras dt{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pub.rank .cifras dd{margin:0; font-family:var(--f-titulo); font-size:15px; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums; color:var(--texto)}
.pub.rank .cifras div:first-child dd{color:var(--marca-texto)}
.conmutador-vista button{border:0; background:transparent; display:grid; place-items:center; width:34px; height:34px; color:var(--texto-3); font-size:15px; cursor:pointer}
.conmutador-vista button.activo{background:var(--amarillo); color:#231F20}
.tarjeta > header .herramientas{flex-wrap:wrap}
@media (max-width:640px){ .rejilla-rank{grid-template-columns:repeat(2, 1fr)} .pub.rank .cifras dd{font-size:15px} }

/* ---------- Panel: tarjeta «Por hacer» (15/09/2026) ---------- */
.por-hacer{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px 22px}
.por-hacer .grupo .cab{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:4px; border-bottom:2px solid var(--amarillo)}
.por-hacer .grupo .cab a{color:inherit; text-decoration:none; font-size:13.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.por-hacer .grupo .cab a:hover{text-decoration:underline}
.por-hacer .grupo .cab .pildora{flex:0 0 auto; font-size:10px; padding:2px 8px}
.por-hacer .tareas{margin:0}
.por-hacer .tareas li.hecha label{text-decoration:line-through; color:var(--texto-3)}
.cabecera-ficha .volver{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:800; color:var(--texto-3); text-decoration:none; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px}
.cabecera-ficha .volver:hover{color:var(--tinta)}