@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

/* ============================================================
   SIGIP - QUANTUN Design System (off-white calido / tinta gris /
   Inter + JetBrains Mono / radios afilados / densidad compacta).
   Acentos: LIMA #C6F24E (marca) + VERDE institucional (CTAs/estados).
   ============================================================ */

:root {
  --bg:#FAFAF7; --bg-soft:#F5F4EF; --surface:#FFFFFF; --surface-2:#FBFAF6;

  --ink:#363C44; --ink-2:#4D5560; --ink-3:#6B7480; --ink-4:#959DA6; --ink-5:#C7CCD2;

  --gris-900:#363C44; --gris-800:#4D5560; --gris-700:#6B7480; --gris-600:#7E8792;
  --gris-500:#959DA6; --gris-400:#AEB4BC; --gris-300:#CBD0D6; --gris-200:#E4E7EA;
  --gris-100:#F0F2F4; --gris-50:#F7F8F9;

  --lima:#C6F24E; --lima-soft:#E8FA9E; --lima-deep:#8FB31F;

  --verde-900:#003520; --verde-800:#004831; --verde-700:#014C2D;
  --verde-600:#015C3F; --verde-500:#007A52; --verde-400:#00AD76;
  --verde-300:#1B9103; --verde-100:#54BF02; --verde-50:#EAF5EE;

  --azul-700:#006B9A; --azul-500:#0098DA; --azul-300:#33B0E3;
  --azul-100:#CCF0FF; --azul-50:#E9F4FA;
  --ambar-700:#9A6410; --ambar-500:#FFA00A; --ambar-100:#FFE5A0; --ambar-50:#F8F0DC;
  --naranja-500:#FF600A; --naranja-300:#FF8A4C;

  --primary:var(--verde-800); --primary-hover:var(--verde-700); --primary-active:var(--verde-900);
  --primary-light:var(--verde-50);
  --secondary:var(--azul-500); --secondary-hover:var(--azul-700);
  --success:#2D8F5A; --success-bg:#E7F1EA; --success-ink:#1B5A39;
  --warning:#B47A1E; --warning-bg:#F5EBD3; --warning-ink:#6E4A12;
  --error:#B0382F; --error-bg:#F4DEDB; --error-ink:#6E211B;
  --info:#3F5E9E; --info-bg:#E6EDF6; --info-ink:#243A66;

  --font-heading:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',Consolas,monospace;
  --text-xs:.6875rem; --text-sm:.8125rem; --text-base:.875rem; --text-lg:1rem;
  --text-xl:1.125rem; --text-2xl:1.375rem; --text-3xl:1.75rem; --text-4xl:2.25rem; --text-5xl:3.25rem;

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem;

  --r-sm:3px; --r-md:4px; --r-lg:6px; --r-xl:10px; --r-full:999px;

  --sh-xs:0 1px 0 rgba(14,14,12,.04);
  --sh-sm:0 1px 2px rgba(14,14,12,.06),0 1px 0 rgba(14,14,12,.04);
  --sh-md:0 4px 12px rgba(14,14,12,.08),0 1px 0 rgba(14,14,12,.04);
  --sh-lg:0 12px 32px rgba(14,14,12,.14);
  --sh-focus:0 0 0 3px rgba(0,152,218,.30);

  --sidebar-w:248px; --sidebar-w-collapsed:72px; --topbar-h:56px;
  --ease:cubic-bezier(.2,.7,.3,1); --dur:180ms;
}

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Cualquier elemento con el atributo `hidden` debe desaparecer siempre, sin
   importar qué otra regla de `display` le pongamos (clase o estilo en línea)
   — sin esto, un `display` propio (ej. `.btn{display:inline-flex}` o un
   `style="display:flex"`) le gana al `[hidden]{display:none}` por defecto
   del navegador, porque los orígenes del cascade pesan más que la
   especificidad. Ya pasó dos veces (el modal del menú, el checkbox de
   "quitar imagen" de Popups) antes de ponerlo acá una sola vez para
   siempre. Ver CLAUDE.md §6. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.5;
  color:var(--ink-3);background:var(--bg);-webkit-font-smoothing:antialiased;
  font-feature-settings:'cv11','ss01';letter-spacing:-.005em}
img,svg{display:block;max-width:100%}
.ico{width:16px;height:16px;flex:none;display:block}
.ico-14{width:14px;height:14px} .ico-20{width:20px;height:20px}
.ico-24{width:24px;height:24px} .ico-28{width:28px;height:28px}
.ico-tile{width:46px;height:46px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none;margin-bottom:var(--s-3)}
.ico-tile .ico{width:22px;height:22px}
.ico-tile--lg{width:48px;height:48px}
a{color:var(--secondary);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--ink);line-height:1.18;font-weight:600;letter-spacing:-.012em}
:focus-visible{outline:2px solid var(--azul-500);outline-offset:2px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100%;left:var(--s-4);background:var(--ink);color:#fff;
  padding:var(--s-2) var(--s-4);border-radius:var(--r-md);font-weight:600;z-index:600}
.skip-link:focus{top:var(--s-4)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}

/* LAYOUT: SHELL */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100dvh;overflow:hidden;
  transition:grid-template-columns var(--dur) var(--ease)}
.app.no-sidebar{grid-template-columns:1fr}
.main{display:flex;flex-direction:column;height:100dvh;min-width:0;overflow:hidden}

.sidebar{background:var(--surface);color:var(--ink-3);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden;border-right:1px solid var(--gris-200)}
.sidebar__brand{display:flex;align-items:center;gap:var(--s-3);height:var(--topbar-h);padding:0 var(--s-4) 0 var(--s-5);
  box-sizing:border-box;border-bottom:1px solid var(--gris-200)}
.sidebar__brand-link{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden;gap:var(--s-3)}
.sidebar__logo{width:34px;height:34px;flex:none;display:block}
.sidebar__brand b{font-size:1.05rem;letter-spacing:-.02em;display:block;line-height:1;color:var(--ink)}
.sidebar__brand small{color:var(--ink-4);font-size:.66rem}
.sidebar__nav{flex:1;overflow-y:auto;padding:var(--s-2) var(--s-3) var(--s-4)}
.sidebar__nav::-webkit-scrollbar{width:8px}
.sidebar__nav::-webkit-scrollbar-thumb{background:var(--gris-200);border-radius:8px}
.nav-group__title{font-size:.68rem;color:var(--ink-5);
  padding:var(--s-3) var(--s-3) var(--s-1);font-weight:700;max-height:30px;opacity:1;overflow:hidden;
  transition:max-height var(--dur) var(--ease),opacity .15s var(--ease),padding var(--dur) var(--ease)}
.nav-item{display:flex;align-items:center;gap:var(--s-3);padding:6px var(--s-3);border-radius:var(--r-lg);
  color:var(--ink-3);font-size:.82rem;font-weight:500;transition:background var(--dur) var(--ease),color var(--dur)}
.nav-item:hover{background:var(--gris-100);text-decoration:none;color:var(--ink)}
.nav-item.is-active{background:var(--ink);color:#fff;font-weight:600}
.nav-item.is-active .ico{opacity:1}
.nav-item .ico{width:17px;height:17px;flex:none;opacity:.85}

/* Topbar */
.topbar{height:var(--topbar-h);background:rgba(250,250,247,.85);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--gris-200);display:flex;align-items:center;gap:var(--s-4);
  padding:0 var(--s-6);position:sticky;top:0;z-index:200}
.topbar__menu{display:none;background:none;border:none;color:var(--ink)}
.crumbs{font-size:.8rem;color:var(--ink-4);display:flex;align-items:center;gap:var(--s-2)}
.crumbs b{color:var(--ink);font-weight:600}
.crumbs span{color:var(--gris-300)}
.topbar__search{margin-left:auto;display:flex;align-items:center;gap:var(--s-2);background:var(--surface);
  border:1px solid var(--gris-200);border-radius:var(--r-md);padding:var(--s-2) var(--s-3);min-width:240px;color:var(--ink-4)}
.topbar__search:focus-within{border-color:var(--azul-500);box-shadow:var(--sh-focus)}
.topbar__search input{border:none;background:none;outline:none;font-size:.8rem;width:100%;color:var(--ink)}
.topbar__actions{display:flex;align-items:center;gap:var(--s-2)}
.icon-btn{width:34px;height:34px;border-radius:var(--r-md);border:1px solid var(--gris-200);background:var(--surface);
  display:grid;place-items:center;color:var(--ink-3);position:relative;
  transition:background var(--dur),color var(--dur),transform .1s var(--ease)}
.icon-btn:hover{background:var(--gris-100);color:var(--ink)}
.icon-btn:active{transform:scale(.92)}
.icon-btn .dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--naranja-500);border:2px solid var(--surface)}
.avatar{width:34px;height:34px;border-radius:var(--r-md);background:var(--verde-800);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:.78rem;flex:none}

/* SIDEBAR USER FOOTER */
.sidebar__user{border-top:1px solid var(--gris-200);padding:var(--s-3) var(--s-4);display:flex;
  align-items:center;gap:var(--s-3);flex:none;overflow:hidden}
.sidebar__user .avatar{width:32px;height:32px;border-radius:var(--r-full);flex:none;font-size:.75rem}
.sidebar__user-info{flex:1;min-width:0;overflow:hidden}
.sidebar__user-info b{display:block;font-size:.82rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.sidebar__user-info small{font-size:.72rem;color:var(--ink-4)}
.sidebar__logout{width:28px;height:28px;background:none;border:none;color:var(--ink-4);
  display:grid;place-items:center;border-radius:var(--r-md);flex:none;cursor:pointer;
  transition:color var(--dur),background var(--dur)}
.sidebar__logout:hover{color:var(--error-ink);background:var(--error-bg)}

/* SIDEBAR: pie con el botón colapsador (solo ícono) y la firma al lado —
   cuarta vuelta (2026-08-19): "que el colapsar solo sea ícono y al lado
   colocamos la firma". Antes eran dos filas separadas (botón de ancho
   completo con texto + firma centrada abajo); ahora comparten una sola
   fila angosta. */
.sidebar__foot{display:flex;align-items:center;gap:var(--s-2);flex:none;
  border-top:1px solid var(--gris-200);padding:var(--s-3) var(--s-4)}
.sidebar__collapse{width:26px;height:26px;border-radius:var(--r-md);border:1px solid var(--gris-200);
  background:var(--surface);display:grid;place-items:center;color:var(--ink-4);flex:none;cursor:pointer;
  transition:background var(--dur),color var(--dur)}
.sidebar__collapse:hover{background:var(--gris-100);color:var(--ink)}
.sidebar__collapse .ico{transition:transform var(--dur)}
.app.is-sidebar-collapsed .sidebar__collapse .ico{transform:rotate(180deg)}
.sidebar__firma{flex:1;font-size:.64rem;color:var(--ink-5);
  opacity:.6;overflow:hidden;white-space:nowrap;max-width:160px;
  transition:max-width var(--dur) var(--ease),opacity .15s var(--ease)}
.app.is-sidebar-collapsed .sidebar__foot{justify-content:center}
.app.is-sidebar-collapsed .sidebar__firma{max-width:0;opacity:0}

/* Las etiquetas de texto (marca, ítems del menú) se achican con una
   transición en vez de desaparecer de golpe con display:none — así el
   colapso se siente animado, sincronizado con el ancho de .app de arriba,
   y no un salto brusco ("que al colapsar se anime"). max-width con
   overflow:hidden es lo único que de verdad anima en CSS sin JS; width:auto
   no se puede transicionar. */
.sidebar__brand-link>span:not(.sidebar__logo),
.nav-item span{
  display:inline-block;max-width:180px;overflow:hidden;white-space:nowrap;opacity:1;
  transition:max-width var(--dur) var(--ease),opacity .15s var(--ease)
}
.app.is-sidebar-collapsed .sidebar__brand-link>span:not(.sidebar__logo),
.app.is-sidebar-collapsed .nav-item span{max-width:0;opacity:0}

.sidebar__user-info{transition:max-width var(--dur) var(--ease),opacity .15s var(--ease);
  overflow:hidden;white-space:nowrap}
.app.is-sidebar-collapsed .sidebar__user-info{max-width:0;opacity:0;flex:none}

/* Colapsada: solo íconos. El bloque de usuario, apilar el avatar Y el botón
   de salir uno sobre otro se leía confuso ("esto se confunde") — colapsada
   solo queda el avatar; para salir hay que expandir primero. El botón
   colapsador nunca se oculta a sí mismo (si no, no habría forma de volver
   a expandir). */
.app.is-sidebar-collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr}
.app.is-sidebar-collapsed .sidebar__brand{padding:0;justify-content:center}
.app.is-sidebar-collapsed .sidebar__brand-link{flex:none}
.app.is-sidebar-collapsed .nav-group__title{opacity:0;max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}
.app.is-sidebar-collapsed .nav-item{justify-content:center}
.app.is-sidebar-collapsed .sidebar__user{justify-content:center;padding:var(--s-3) var(--s-2)}
.app.is-sidebar-collapsed .sidebar__logout{display:none}

.content{flex:1;overflow-y:auto;padding:var(--s-5) var(--s-6) var(--s-8);min-width:0;min-height:0;
  scrollbar-gutter:stable;animation:content-in .28s var(--ease)}
@keyframes content-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-5)}
.page-head h1{font-size:var(--text-2xl)}
.page-head p{color:var(--ink-4);margin-top:var(--s-1);font-size:.875rem}
.page-actions{display:flex;gap:var(--s-2);flex-wrap:wrap}

/* BOTONES */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:34px;
  padding:var(--s-2) var(--s-4);border-radius:var(--r-md);font-size:.82rem;font-weight:600;border:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform .1s var(--ease),color var(--dur);
  white-space:nowrap;letter-spacing:-.005em}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--primary:hover{box-shadow:0 2px 8px rgba(1,76,45,.25)}
.btn--accent:hover{box-shadow:0 2px 8px rgba(0,152,218,.25)}
.btn--danger:hover{filter:brightness(1.06);box-shadow:0 2px 8px rgba(176,56,47,.25)}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn--sm{min-height:30px;padding:var(--s-1) var(--s-3);font-size:.78rem}
.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--gris-200)}
.btn--secondary:hover{border-color:var(--ink);background:var(--surface)}
.btn--ghost{background:transparent;color:var(--ink-3);border-color:transparent}
.btn--ghost:hover{background:var(--gris-100);color:var(--ink)}
.btn--accent{background:var(--azul-500);color:#fff;border-color:var(--azul-500)}
.btn--accent:hover{background:var(--azul-700)}
.btn--danger{background:var(--error);color:#fff;border-color:var(--error)}
.btn--warn{background:var(--warning-bg);color:var(--warning-ink);border-color:transparent}
.btn--warn:hover{background:var(--ambar-100)}

/* Botón "armado": primer clic de una acción con data-confirmar, esperando
   el segundo clic que confirma (ver assets/js/confirmar.js). */
.btn--block{width:100%}

/* ---- Popover de confirmación (assets/js/confirmar.js) -------------------
   Reemplaza al viejo patrón "doble clic arma el botón": ahora aparece una
   tarjeta flotante con una pregunta y dos botones explícitos. */
.confirmar-pop{position:fixed;z-index:500;background:var(--surface);border:1px solid var(--gris-200);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:var(--s-3) var(--s-4);max-width:280px;
  animation:modal-in var(--dur) var(--ease)}
@media (prefers-reduced-motion:reduce){.confirmar-pop{animation:none}}
.confirmar-pop__txt{font-size:var(--text-sm);color:var(--ink);margin-bottom:var(--s-3);line-height:1.4}
.confirmar-pop__acciones{display:flex;justify-content:flex-end;gap:var(--s-2)}

/* BADGES / CHIPS */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:600;
  padding:2px 8px;border-radius:var(--r-sm);line-height:1.5;white-space:nowrap;letter-spacing:.1px}
.badge .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--success{background:var(--success-bg);color:var(--success-ink)}
.badge--warning{background:var(--warning-bg);color:var(--warning-ink)}
.badge--error{background:var(--error-bg);color:var(--error-ink)}
.badge--info{background:var(--info-bg);color:var(--info-ink)}
.badge--neutral{background:var(--gris-100);color:var(--ink-3)}
.badge--brand{background:var(--lima-soft);color:#5C6E12}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:500;color:var(--ink-3);
  background:var(--surface);border:1px solid var(--gris-200);border-radius:var(--r-md);padding:5px 11px;
  transition:background var(--dur),border-color var(--dur),color var(--dur),transform .1s var(--ease)}
.chip:hover{border-color:var(--gris-300);color:var(--ink)}
.chip:active{transform:scale(.97)}
.chip--active{background:var(--azul-700);color:#fff;border-color:var(--azul-700)}

/* Selección masiva de filas (assets/js/seleccion-masiva.js): casilla en la
   cabecera de la tabla + una por fila (asociadas a un <form> externo por el
   atributo form="…", el mismo truco que ya usa "Quitar adjunto" para no
   anidar formularios). La barra aparece flotando arriba de la tabla en
   cuanto hay al menos una fila marcada. */
.col-check{width:36px}
.col-check input,.fila-check{width:16px;height:16px;cursor:pointer}
.barra-seleccion{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);margin-bottom:var(--s-3);
  background:var(--verde-900);color:#fff;border-radius:var(--r-lg)}
.barra-seleccion[hidden]{display:none}
.barra-seleccion__texto{font-size:var(--text-sm)}
.barra-seleccion .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.barra-seleccion .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}

/* Biblioteca de medios: grilla de tarjetas (imágenes y documentos) + la ruta
   de carpetas. Las carpetas solo ordenan el catálogo — ver modulos/medios. */
.medios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s-3)}
.medio-card{padding:0;overflow:hidden;position:relative;transition:border-color var(--dur),box-shadow var(--dur)}
.medio-card.is-marcada{border-color:var(--primary);box-shadow:0 0 0 2px var(--verde-100,rgba(1,76,45,.12))}
.medio-card__marca{position:absolute;top:6px;left:6px;z-index:1;display:grid;place-items:center;
  width:24px;height:24px;border-radius:var(--r-md);background:rgba(255,255,255,.92);
  border:1px solid var(--gris-300);cursor:pointer}
.medio-card__marca input{width:15px;height:15px;cursor:pointer}
.medio-card__vista{display:block;aspect-ratio:1;background:var(--gris-100) center/cover no-repeat}
.medio-card__vista--doc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--ink-3);background:var(--bg-soft);text-decoration:none}
.medio-card__vista--doc:hover{background:var(--gris-100);color:var(--primary)}
.medio-card__ext{font-size:var(--text-xs);font-weight:600;letter-spacing:.02em}
.medio-card__nombre{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--text-xs);color:var(--ink-2)}
.medio-card__carpeta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  aspect-ratio:1;text-decoration:none;color:var(--ink-2);background:var(--surface-2)}
.medio-card__carpeta:hover{background:var(--bg-soft);color:var(--primary)}
.medio-card__carpeta b{font-size:var(--text-sm);color:var(--ink);text-align:center;padding:0 var(--s-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.medios-ruta{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3);
  font-size:var(--text-sm)}
.medios-ruta a{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);text-decoration:none}
.medios-ruta a:hover{color:var(--primary)}
.medios-ruta__sep{color:var(--ink-4)}

/* CARDS */
.card{background:var(--surface);border:1px solid var(--gris-200);border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.card__body{padding:var(--s-5)}
.card__head{padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--gris-200);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.card__head h2,.card__head h3{font-size:.95rem}
.card__foot{padding:var(--s-4) var(--s-5);border-top:1px solid var(--gris-100);display:flex;gap:var(--s-2);flex-wrap:wrap}
.card--hover{transition:box-shadow var(--dur),border-color var(--dur),transform var(--dur)}

/* ---- Tarjeta desplegable con <details>/<summary> (ej. Ajustes del sitio,
   para no obligar a bajar por una lista larga de secciones) -------------- */
details.card > summary.card__head{cursor:pointer;list-style:none;user-select:none}
details.card > summary.card__head::-webkit-details-marker{display:none}
details.card:not([open]) > summary.card__head{border-bottom-color:transparent}
.card__head .chevron{transition:transform var(--dur);color:var(--ink-3);flex:none}
details.card[open] > summary.card__head .chevron{transform:rotate(180deg)}

/* ---- Modal (alta/edición sobre la lista, ej. Menú del sitio) ------------ */
.modal-backdrop{position:fixed;inset:0;background:rgba(14,14,12,.45);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:var(--s-5)}
.modal-backdrop[hidden]{display:none}
/* El modal en sí no hace scroll (overflow:hidden + flex column): solo
   .modal__body lo hace. Así el header y el footer (los botones Cancelar/
   Guardar) quedan siempre fijos y a la vista, sin que haya que bajar hasta
   el final del formulario para encontrarlos — importante en modales largos
   como el de editar un Popup. */
.modal{width:100%;max-width:480px;max-height:90vh;overflow:hidden;background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);animation:modal-in var(--dur) var(--ease);
  display:flex;flex-direction:column}
/* El <form> es el único hijo directo de .modal en todos los modales del
   panel (menú, popups…): tiene que ser flex column también, para que el
   header/footer de ADENTRO del form hereden el mismo comportamiento fijo. */
.modal > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}
.modal--lg{max-width:720px}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal{animation:none}}
.modal__head{padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--gris-200);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex:none}
.modal__head h3{font-size:1rem;color:var(--ink)}
.modal__close{width:32px;height:32px;border-radius:var(--r-md);display:grid;place-items:center;
  color:var(--ink-3);flex:none;background:var(--gris-100);border:1px solid var(--gris-200);
  transition:background var(--dur),color var(--dur),border-color var(--dur)}
.modal__close:hover{background:var(--gris-200);color:var(--ink);border-color:var(--gris-300)}
.modal__body{padding:var(--s-5);overflow-y:auto;flex:1 1 auto;min-height:0}
.modal__foot{padding:var(--s-4) var(--s-5);border-top:1px solid var(--gris-100);
  display:flex;justify-content:flex-end;gap:var(--s-2);flex:none}
.card--hover:hover{box-shadow:var(--sh-md);border-color:var(--gris-300);transform:translateY(-1px)}

.grid{display:grid;gap:var(--s-4)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--kpi{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:var(--s-5);align-items:start}

/* KPI */
.kpi{background:var(--surface);border:1px solid var(--gris-200);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--sh-xs);
  transition:box-shadow var(--dur),transform var(--dur) var(--ease)}
.kpi:hover{box-shadow:var(--sh-sm);transform:translateY(-2px)}
.kpi__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-3)}
.kpi__ico{width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--verde-50);color:var(--verde-700);font-size:.85rem}
.kpi__ico--azul{background:var(--azul-50);color:var(--azul-700)}
.kpi__ico--ambar{background:var(--ambar-50);color:var(--ambar-700)}
.kpi__ico--naranja{background:#FBEAE0;color:var(--naranja-500)}
.kpi__label{font-size:.78rem;color:var(--ink-4);font-weight:500}
.kpi__value{font-size:var(--text-3xl);font-weight:700;color:var(--ink);font-family:var(--font-body);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:2px;line-height:1.1}
.kpi__delta{font-size:.75rem;font-weight:600;display:inline-flex;align-items:center;gap:4px;margin-top:var(--s-2);color:var(--ink-4)}
.delta--up{color:var(--success)} .delta--down{color:var(--error)}
.kpi.is-ink{background:var(--azul-700);border-color:var(--azul-700);color:#fff;position:relative;overflow:hidden}
.kpi.is-ink .kpi__label{color:rgba(255,255,255,.6)} .kpi.is-ink .kpi__value{color:#fff}
.kpi.is-ink .kpi__delta{color:rgba(255,255,255,.92)}
.kpi.is-ink .kpi__ico{background:rgba(255,255,255,.12);color:#fff}

/* Banner de aviso/novedad (ej. anuncio de una función nueva en el panel) */
.aviso-banner{display:flex;align-items:center;gap:var(--s-4);background:var(--verde-50);
  border:1px solid rgba(0,173,118,.25);border-radius:var(--r-xl);padding:var(--s-4) var(--s-5);
  margin-bottom:var(--s-6);flex-wrap:wrap}
.aviso-banner__ico{width:44px;height:44px;border-radius:var(--r-lg);background:#fff;color:var(--verde-800);
  display:grid;place-items:center;flex:none;box-shadow:var(--sh-xs)}
.aviso-banner__body{flex:1;min-width:220px}
.aviso-banner__body h3{font-size:.92rem;display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--ink)}
.aviso-banner__body p{margin:4px 0 0;font-size:.82rem;color:var(--ink-3)}
.aviso-banner__close{background:none;border:0;cursor:pointer;color:var(--ink-4);padding:6px;
  border-radius:var(--r-md);flex:none;display:grid;place-items:center;transition:background var(--dur),color var(--dur)}
.aviso-banner__close:hover{background:rgba(0,0,0,.06);color:var(--ink)}
@media(max-width:720px){.aviso-banner{flex-direction:column;align-items:flex-start}}

/* TABLAS */
.table-wrap{overflow-x:auto;border:1px solid var(--gris-200);border-radius:var(--r-lg);background:var(--surface)}
table.data{width:100%;border-collapse:collapse;font-size:.82rem}
.data thead th{text-align:left;font-weight:700;color:var(--ink-4);font-size:.74rem;
  padding:var(--s-3) var(--s-4);background:var(--surface-2);border-bottom:1px solid var(--gris-200);white-space:nowrap}
.data tbody td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--gris-100);vertical-align:middle;color:var(--ink-2)}
.data tbody tr{transition:background var(--dur)}
.data tbody tr:last-child td{border-bottom:none}
.data tbody tr:hover{background:var(--surface-2)}
.data .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.data .muted{color:var(--ink-4)}
.cell-user{display:flex;align-items:center;gap:var(--s-3)}
.cell-user .avatar{width:30px;height:30px;font-size:.7rem}
.cell-user b{font-weight:600;font-size:.84rem;display:block;color:var(--ink)}
.cell-user small{color:var(--ink-4);font-size:.74rem}

/* FORMULARIOS */
.field{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-4)}
.field label{font-weight:600;font-size:.8rem;color:var(--ink-2)}
.field .req{color:var(--error)}
.field .help{font-size:.76rem;color:var(--ink-4)}
.input,.select,textarea.input{padding:var(--s-2) var(--s-3);border:1px solid var(--gris-200);border-radius:var(--r-md);
  font-size:.85rem;min-height:34px;font-family:inherit;background:var(--surface);color:var(--ink);
  transition:border-color var(--dur),box-shadow var(--dur);width:100%}
.input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--azul-500);box-shadow:var(--sh-focus)}
.input::placeholder,textarea.input::placeholder{color:var(--ink-5)}
textarea.input{min-height:110px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}

/* TIMELINE / STEPPER */
.stepper{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-6)}
.step{display:flex;align-items:center;gap:var(--s-2);flex:1}
.step__num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.78rem;
  background:var(--gris-100);color:var(--ink-4);flex:none}
.step.is-done .step__num{background:var(--verde-400);color:#fff}
.step.is-active .step__num{background:var(--azul-500);color:#fff;box-shadow:0 0 0 3px var(--azul-50)}
.step__label{font-size:.8rem;font-weight:600;color:var(--ink-4)}
.step.is-active .step__label,.step.is-done .step__label{color:var(--ink)}
.step__line{flex:1;height:2px;background:var(--gris-200)}
.step.is-done .step__line{background:var(--verde-400)}

.timeline{list-style:none;position:relative;padding-left:var(--s-6)}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1.5px;background:var(--gris-200)}
.timeline li{position:relative;padding-bottom:var(--s-5)}
.timeline li::before{content:"";position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2.5px solid var(--verde-400)}
.timeline li.is-current::before{background:var(--azul-500);border-color:var(--azul-700)}
.timeline b{font-size:.85rem;color:var(--ink)} .timeline time{font-size:.74rem;color:var(--ink-4);display:block;margin-top:2px}

/* MISC */
.section-title{font-size:var(--text-lg);margin:var(--s-8) 0 var(--s-4);color:var(--ink)}
.muted{color:var(--ink-4)}
.tag-status{font-size:.76rem;font-weight:600}
.divider{height:1px;background:var(--gris-200);margin:var(--s-6) 0}
.empty{text-align:center;padding:var(--s-12) var(--s-6);color:var(--ink-4)}
.empty .ico{width:48px;height:48px;margin:0 auto var(--s-4);color:var(--gris-300)}
.progress{height:7px;background:var(--gris-100);border-radius:var(--r-full);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--verde-400);border-radius:var(--r-full)}
.list-plain{list-style:none}

/* RRSS — planificador de contenido Instagram/Facebook */
.rrss-tabs{display:flex;gap:4px;background:var(--ink);padding:4px;border-radius:var(--r-lg);width:max-content;margin-bottom:var(--s-4)}
.rrss-tab{padding:8px 16px;border-radius:var(--r-md);font-size:.82rem;font-weight:600;color:var(--ink-5);text-decoration:none;display:inline-block}
.rrss-tab.is-active{background:var(--lima);color:var(--verde-900)}
.rrss-tab:hover:not(.is-active){color:#fff}
.page-head .rrss-tabs{margin-bottom:0}

.rrss-toolbar{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3);flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--gris-200);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4);box-shadow:var(--sh-sm)}
.rrss-nav{display:flex;align-items:center;gap:var(--s-2)}
.rrss-nav select{border:1px solid var(--gris-200);border-radius:var(--r-md);padding:6px 10px;font-size:.82rem;
  font-weight:600;color:var(--ink);background:var(--surface);font-family:inherit}
.rrss-nav .btn{min-height:30px;padding:0 var(--s-3)}

.rrss-c-borrador{background:var(--ink-4)}
.rrss-c-revision{background:var(--ambar-500)}
.rrss-c-correcciones{background:var(--naranja-500)}
.rrss-c-aprobado{background:var(--azul-500)}
.rrss-c-programado{background:var(--lima-deep)}
.rrss-c-publicado{background:var(--verde-800)}

.rrss-legend{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:.78rem;color:var(--ink-3);margin:0 2px var(--s-5);align-items:center;font-weight:500}
.rrss-legend .lg{display:flex;align-items:center;gap:6px}
.rrss-legend .sq{width:10px;height:10px;border-radius:2px;flex:none}

.rrss-layout{display:block}
.rrss-cal{background:var(--surface);border:1px solid var(--gris-200);border-radius:var(--r-xl);padding:var(--s-4);box-shadow:var(--sh-sm)}
.rrss-cal--full{width:100%}
body.rrss-modal-open{overflow:hidden}
.rrss-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s-2)}
.rrss-dow{font-size:.75rem;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-4);text-align:center;padding:var(--s-2) 0;font-weight:700}
.rrss-day{min-height:190px;border-radius:var(--r-md);padding:var(--s-2);background:transparent;border:1px solid transparent;
  text-decoration:none;display:block}
.rrss-day.is-selected{background:var(--verde-50)}
.rrss-day.is-fuera{background:var(--gris-50)}
.rrss-day.is-fuera .num{color:var(--ink-5)}
.rrss-day.is-hoy{background:var(--lima-soft)}
.rrss-day .num{font-size:.85rem;color:var(--ink-3);font-weight:700}
.rrss-dot{width:6px;height:6px;border-radius:50%;flex:none}
.rrss-dot--instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.rrss-dot--facebook{background:#0098DA}

/* Tarjeta "póster" con foto a todo el ancho dentro de cada día del calendario — animada, sin recuadro */
.rrss-thumb,.rrss-thumb:link,.rrss-thumb:visited,.rrss-thumb:hover,.rrss-thumb:active{
  position:relative;display:block;margin-top:6px;text-decoration:none;color:inherit;outline:none;
  aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--gris-200);
  box-shadow:var(--sh-sm);border:none;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.rrss-thumb:hover,.rrss-thumb:focus-visible{box-shadow:var(--sh-lg);transform:translateY(-3px) scale(1.015)}
.rrss-thumb.is-active{box-shadow:0 0 0 2px var(--verde-800),var(--sh-lg)}
.rrss-thumb__img{position:absolute;inset:0;background:var(--gris-200) center/cover no-repeat;
  transition:transform .35s var(--ease)}
.rrss-thumb:hover .rrss-thumb__img{transform:scale(1.08)}
.rrss-thumb__badge{position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:#fff;background:var(--surface);box-shadow:var(--sh-sm);
  transition:transform .22s var(--ease)}
.rrss-thumb:hover .rrss-thumb__badge{transform:scale(1.1)}
.rrss-dot--instagram.rrss-thumb__badge{color:#E1306C}
.rrss-dot--facebook.rrss-thumb__badge{color:#0098DA}
.rrss-thumb__estado{position:absolute;top:7px;left:7px;width:11px;height:11px;border-radius:50%;border:2px solid #fff;box-shadow:var(--sh-sm)}
.rrss-thumb__scrim{position:absolute;left:0;right:0;bottom:0;padding:20px 8px 8px;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.35) 55%, transparent)}
.rrss-thumb__label{font-size:.7rem;font-weight:700;color:#fff;line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* Contenedor AJAX: fade suave al cambiar de contenido */
#rrss-viewport{transition:opacity .15s var(--ease)}
#rrss-viewport.is-loading{opacity:.5}

/* Switch de plataforma en el panel (Instagram / Facebook) */
.rrss-switch{position:relative;display:flex;margin:var(--s-4) var(--s-4) 0;background:var(--gris-100);
  border-radius:999px;padding:3px;isolation:isolate}
.rrss-switch__opt{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:none;background:transparent;
  padding:7px 10px;border-radius:999px;font-size:.75rem;font-weight:700;color:var(--ink-3);cursor:pointer;
  position:relative;z-index:1;transition:color .25s var(--ease)}
.rrss-switch__opt.is-active{color:#fff}
.rrss-switch__thumb{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);
  background:var(--verde-800);border-radius:999px;transition:transform .25s var(--ease);z-index:0;box-shadow:var(--sh-sm)}
.rrss-switch[data-current="facebook"] .rrss-switch__thumb{transform:translateX(100%)}
.rrss-preview-slot{padding:var(--s-4);background:var(--bg-soft)}
.rrss-preview-slot .ig-card,.rrss-preview-slot .fb-card{margin:0 auto;width:100%;max-width:260px;animation:rrss-fade .25s var(--ease)}
@keyframes rrss-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Modal de detalle: fondo oscuro + panel centrado */
.rrss-modal-backdrop{position:fixed;inset:0;background:rgba(20,22,20,.55);backdrop-filter:blur(1px);
  display:flex;align-items:center;justify-content:center;padding:var(--s-6);z-index:900;
  animation:rrss-backdrop-in .2s var(--ease)}
.rrss-modal-backdrop--edit{z-index:950;background:rgba(20,22,20,.65)}
@keyframes rrss-backdrop-in{from{opacity:0}to{opacity:1}}
.rrss-panel{width:100%;max-width:560px;max-height:calc(100vh - var(--s-6) * 2);overflow-y:auto;
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  animation:rrss-modal-in .22s var(--ease)}
.rrss-panel--edit{max-width:640px}
.rrss-panel--wide{max-width:920px}
@keyframes rrss-modal-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.rrss-panel__head{padding:var(--s-3) var(--s-4);background:var(--verde-800);color:#fff;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-2);
  position:sticky;top:0;border-radius:var(--r-xl) var(--r-xl) 0 0;z-index:1}
.rrss-panel__head b{font-size:.95rem;display:block}
.rrss-panel__head small{font-size:.72rem;opacity:.8}
.rrss-panel__head a{color:#fff;opacity:.8}
.rrss-panel__head a:hover{opacity:1}
.rrss-panel--edit .page-head{padding:var(--s-4) var(--s-4) 0}
.rrss-panel--edit form.cols{padding:0 var(--s-4) var(--s-4)}

/* Cuerpo del modal horizontal: imagen a la izquierda + columna de info */
.rrss-panel__body--split{display:flex;align-items:flex-start;min-height:420px}
.rrss-panel__info{flex:1;min-width:0;display:flex;flex-direction:column;align-self:stretch}

/* Hero dividido: ancho fijo, alto derivado de la proporción real (1080x1350 o 1080x1920) */
.rrss-hero--split{position:relative;flex:0 0 320px;width:320px;aspect-ratio:1080/1350;
  overflow:hidden;background:var(--ink);transition:aspect-ratio .3s var(--ease)}
.rrss-hero--split.rrss-hero--vertical{aspect-ratio:1080/1920;flex-basis:230px;width:230px}
.rrss-preview-slot--fill{position:absolute;inset:0}
.rrss-preview-slot--fill [data-plat]{position:absolute;inset:0}
.rrss-preview-slot--fill .rrss-photo{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0;
  aspect-ratio:auto;box-shadow:none}

/* Switch sutil, solo iconos */
.rrss-switch--sutil{width:64px;padding:2px;background:var(--gris-200)}
.rrss-switch--sutil .rrss-switch__opt{padding:5px;color:var(--ink-3)}
.rrss-switch--sutil .rrss-switch__thumb{background:var(--surface);box-shadow:var(--sh-sm)}
.rrss-switch--sutil .rrss-switch__opt.is-active{color:var(--verde-800)}
.rrss-switch--float{position:absolute;top:10px;right:10px;z-index:2;box-shadow:var(--sh-md)}

/* Fila de información horizontal: chips animados */
.rrss-inforow{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-4) 0}
.rrss-inforow__items{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.rrss-pill{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:var(--ink-3);
  background:var(--gris-100);padding:5px 10px;border-radius:999px;transition:transform .18s var(--ease),background var(--dur),box-shadow var(--dur);
  animation:rrss-pill-in .3s var(--ease) backwards}
.rrss-inforow__items .rrss-pill:nth-child(1){animation-delay:.02s}
.rrss-inforow__items .rrss-pill:nth-child(2){animation-delay:.08s}
.rrss-inforow__items .rrss-pill:nth-child(3){animation-delay:.14s}
.rrss-pill:hover{transform:translateY(-1px);background:var(--gris-200);box-shadow:var(--sh-xs)}
.rrss-pill__dot{width:7px;height:7px;border-radius:50%;flex:none}
@keyframes rrss-pill-in{from{opacity:0;transform:translateY(3px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Pie de la publicación (copy real) */
.rrss-copy{padding:var(--s-3) var(--s-4)}
.rrss-copy h4{display:flex;align-items:center;gap:6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;
  color:var(--ink-4);font-weight:700;margin-bottom:6px}
.rrss-copy p{font-size:.82rem;color:var(--ink-2);line-height:1.5;white-space:pre-wrap}

/* Botones editar/eliminar, al final del modal */
.rrss-footer-actions{display:flex;gap:8px;padding:var(--s-4);border-top:1px solid var(--gris-100);justify-content:flex-end}

/* Confirmación de eliminar en línea (sin diálogo nativo del navegador) */
.rrss-confirm{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);background:var(--error-bg);
  color:var(--error-ink);font-size:.78rem;font-weight:500;animation:rrss-fade .2s var(--ease)}
.rrss-confirm span{flex:1}

/* Historial ficticio: desplegable animado (max-height), línea de tiempo compacta */
.rrss-historial{border-top:1px solid var(--gris-100)}
.rrss-historial__toggle{width:100%;display:flex;align-items:center;gap:6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;
  color:var(--ink-4);font-weight:700;padding:var(--s-3) var(--s-4);cursor:pointer;background:none;border:none;font-family:inherit;
  transition:color var(--dur)}
.rrss-historial__toggle svg:last-child{margin-left:auto;transition:transform .25s var(--ease)}
.rrss-historial.is-open .rrss-historial__toggle svg:last-child{transform:rotate(-90deg)}
.rrss-historial__toggle:hover{color:var(--ink-2)}
.rrss-historial__count{background:var(--gris-100);color:var(--ink-3);border-radius:999px;padding:1px 7px;font-size:.68rem}
.rrss-historial__panel{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.rrss-historial ul{list-style:none;display:flex;flex-direction:column;gap:7px;padding:0 var(--s-4) var(--s-3)}
.rrss-historial li{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--ink-2)}
.rrss-historial li span{flex:1}
.rrss-historial li time{font-size:.66rem;color:var(--ink-4);white-space:nowrap}
.rrss-historial__ico{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;flex:none}

/* Preview = solo la foto. Post/carrusel: 1080x1350 (4:5) en ambas plataformas. Historia/reel: 1080x1920 (9:16). */
.rrss-photo{margin:0 auto;width:220px;max-width:100%;border-radius:12px;overflow:hidden;
  background:var(--gris-100) center/cover no-repeat;box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;
  transition:aspect-ratio .3s var(--ease),width .3s var(--ease)}
.rrss-photo--ig,.rrss-photo--fb{aspect-ratio:1080/1350}
.rrss-photo.formato--historia,.rrss-photo.formato--reel{aspect-ratio:1080/1920;width:180px}
.rrss-photo__ph{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink-5);font-size:.72rem;font-weight:600}

.rrss-meta{padding:var(--s-3) var(--s-4);font-size:.78rem;color:var(--ink-3);display:grid;grid-template-columns:auto 1fr;gap:6px 12px;background:var(--bg-soft)}
.rrss-meta b{color:var(--ink);font-weight:600}
.rrss-actions{display:flex;gap:8px;padding:var(--s-3) var(--s-4);flex-wrap:wrap;border-top:1px solid var(--gris-100);border-bottom:1px solid var(--gris-100)}
.rrss-comments{padding:var(--s-3) var(--s-4);max-height:180px;overflow-y:auto;flex:1}
.rrss-comment{display:flex;gap:8px;margin-bottom:12px}
.rrss-comment__av{width:26px;height:26px;border-radius:50%;background:var(--verde-50);color:var(--verde-800);
  font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.rrss-comment b{font-size:.78rem;color:var(--ink)}
.rrss-comment span.t{font-size:.65rem;color:var(--ink-4);margin-left:6px}
.rrss-comment p{font-size:.76rem;color:var(--ink-3);margin-top:2px;white-space:pre-wrap}
.rrss-input{display:flex;gap:8px;padding:0 var(--s-4) var(--s-4)}
.rrss-input input{flex:1;padding:8px 12px;font-size:.78rem}
.rrss-empty-panel{display:flex;align-items:center;justify-content:center;min-height:260px;color:var(--ink-4);font-size:.85rem;text-align:center;padding:var(--s-6)}

/* Tablero (kanban) */
.rrss-board{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-3);align-items:start}
.rrss-board__col{background:var(--surface);border:1px solid var(--gris-200);border-radius:var(--r-lg);padding:var(--s-3);min-height:120px}
.rrss-board__col h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-3);margin-bottom:var(--s-3);display:flex;align-items:center;gap:6px}
.rrss-board__card{display:block;background:var(--bg-soft);border:1px solid var(--gris-100);border-radius:var(--r-md);padding:var(--s-2) var(--s-3);
  margin-bottom:var(--s-2);text-decoration:none;font-size:.78rem;color:var(--ink-2)}
.rrss-board__card:hover{border-color:var(--verde-800)}
.rrss-board__card b{display:block;color:var(--ink);font-size:.8rem;margin-bottom:2px}

/* Parrilla (feed) */
.rrss-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);max-width:600px}
.rrss-feed a{aspect-ratio:1/1;background:var(--gris-100);border-radius:var(--r-sm);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-decoration:none;color:var(--ink-3);font-size:.72rem;text-align:center;padding:var(--s-2);position:relative;overflow:hidden}
.rrss-feed a:hover{outline:2px solid var(--verde-800);outline-offset:-2px}

@media(max-width:1024px){
  .rrss-layout{flex-direction:column}
  .rrss-panel{min-width:0;width:100%}
  .rrss-board{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .rrss-board{grid-template-columns:repeat(2,1fr)}
  .rrss-feed{grid-template-columns:repeat(2,1fr)}
}

/* LOGIN */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:var(--s-6);background:var(--bg-soft)}
.login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--gris-200);
  border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:var(--s-8)}
.login-brand{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-6)}
.login-brand .sidebar__logo{width:40px;height:40px}
.login-brand b{font-size:1.2rem;color:var(--ink);display:block;line-height:1}
.login-brand small{color:var(--ink-4);font-size:.78rem}

/* RESPONSIVE */
@media(max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr}
}
@media(max-width:860px){
  .app,.app.is-sidebar-collapsed{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:500;width:var(--sidebar-w);transform:translateX(-100%);transition:transform var(--dur)}
  .sidebar.is-open{transform:none}
  .topbar__menu{display:grid;place-items:center;width:34px;height:34px}
  .topbar__search{display:none}
  .scrim{position:fixed;inset:0;background:rgba(14,14,12,.4);z-index:400;display:none}
  .scrim.is-open{display:block}
  /* El colapsador es una comodidad de escritorio; en el drawer móvil ya
     existe su propio show/hide por el botón hamburguesa (cuando exista —
     ver CLAUDE.md §6.2, todavía no hay botón hamburguesa armado). Se
     revierten uno por uno los efectos del colapso por si el estado quedó
     guardado en localStorage desde una sesión de escritorio. */
  .sidebar__collapse{display:none}
  .app.is-sidebar-collapsed .sidebar__brand-link>span:not(.sidebar__logo),
  .app.is-sidebar-collapsed .nav-item span{max-width:180px;opacity:1}
  .app.is-sidebar-collapsed .nav-group__title{max-height:30px;opacity:1;padding:var(--s-3) var(--s-3) var(--s-1)}
  .app.is-sidebar-collapsed .sidebar__user-info{max-width:none;opacity:1}
  .app.is-sidebar-collapsed .sidebar__firma{max-width:160px;opacity:.6}
  .app.is-sidebar-collapsed .sidebar__logout{display:revert}
  .app.is-sidebar-collapsed .sidebar__user{flex-direction:row;justify-content:flex-start}
  .app.is-sidebar-collapsed .sidebar__foot{justify-content:flex-start}
}
@media(max-width:560px){
  .grid--4,.grid--3,.grid--2,.field-row{grid-template-columns:1fr}
  .content{padding:var(--s-4) var(--s-3) var(--s-8)}
}

/* Accesibilidad: respeta la preferencia de menos movimiento */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   PAGINA WEB + PQRS — componentes propios de los dos modulos
   activos. Reutilizan los tokens de :root; sin colores sueltos.
   ============================================================ */

/* Miniatura de portada en el listado de articulos */
.web-thumb{width:44px;height:32px;border-radius:var(--r-md);background:var(--gris-100);background-size:cover;
  background-position:center;display:grid;place-items:center;color:var(--gris-400);flex:none}

/* Barra de formato del editor */
.web-toolbar{display:flex;gap:4px;flex-wrap:wrap;padding:6px;background:var(--bg-soft);
  border:1px solid var(--gris-200);border-bottom:none;border-radius:var(--r-md) var(--r-md) 0 0}
.web-toolbar+.input{border-radius:0 0 var(--r-md) var(--r-md)}

/* Editor visual del cuerpo (assets/js/editor.js). La superficie editable imita
   la tipografía del sitio público (.prose en web.css) para que lo que se ve al
   escribir se parezca a lo publicado. */
.editor-visual{border:1px solid var(--gris-200);border-radius:var(--r-md);background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden}
.editor-visual:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--verde-100,rgba(1,76,45,.09))}
.editor-visual__barra{display:flex;gap:2px;flex-wrap:wrap;align-items:center;padding:6px;
  background:var(--bg-soft);border-bottom:1px solid var(--gris-200);position:sticky;top:0;z-index:2}
.editor-visual__sep{width:1px;height:18px;background:var(--gris-300);margin:0 4px;flex:none}
.editor-visual__btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px;
  font-size:var(--text-sm);font-weight:500;color:var(--ink-2);background:transparent;
  border:1px solid transparent;border-radius:var(--r-md);cursor:pointer;transition:all var(--dur)}
.editor-visual__btn--ico{padding:0;width:28px;justify-content:center}
.editor-visual__btn:hover{background:var(--surface);border-color:var(--gris-300);color:var(--ink)}
.editor-visual__btn.is-activo{background:var(--verde-800);border-color:var(--verde-800);color:#fff}
.editor-visual__enlace{display:flex;gap:6px;align-items:center;padding:8px;
  background:var(--surface-2);border-bottom:1px solid var(--gris-200)}
.editor-visual__enlace .input{flex:1;min-width:0}
.editor-visual__enlace[hidden]{display:none}
.editor-visual__area{position:relative;padding:var(--s-4) var(--s-5);min-height:340px;overflow-y:auto;
  font-size:.9rem;line-height:1.7;color:var(--ink-2);outline:none}
.editor-visual__area.is-error{box-shadow:inset 0 0 0 2px var(--error)}
.editor-visual__area.is-vacio::before{content:attr(data-vacio);color:var(--ink-4);pointer-events:none;
  position:absolute;top:var(--s-4);left:var(--s-5)}
.editor-visual__area>*+*{margin-top:var(--s-4)}
.editor-visual__area h2{font-size:1.3rem;line-height:1.3;color:var(--ink);margin-top:var(--s-6)}
.editor-visual__area h3{font-size:1.08rem;line-height:1.35;color:var(--ink);margin-top:var(--s-5)}
.editor-visual__area h4{font-size:.95rem;color:var(--ink)}
.editor-visual__area strong,.editor-visual__area b{color:var(--ink);font-weight:700}
.editor-visual__area ul,.editor-visual__area ol{padding-left:var(--s-6)}
.editor-visual__area li+li{margin-top:4px}
.editor-visual__area a{color:var(--verde-700);font-weight:600;text-decoration:underline}
.editor-visual__area blockquote{border-left:3px solid var(--lima);background:var(--bg-soft);
  padding:var(--s-3) var(--s-4);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink-2);font-style:italic}
.editor-visual__area img{max-width:100%;height:auto;border-radius:var(--r-md)}
.editor-visual__area hr{border:none;border-top:1px solid var(--gris-200)}
.editor-visual__area table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.editor-visual__area th,.editor-visual__area td{border:1px solid var(--gris-200);padding:6px 8px;text-align:left}

/* Lista de adjuntos (PDF/enlace) del editor de Noticias, Blog y Comunicaciones:
   filas arrastrables con título editable (ver contenido_sincronizar_adjuntos() en lib/web.php). */
.adjuntos-lista{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-4)}
.adjunto-row{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2);
  border:1px solid var(--gris-100);border-radius:var(--r-md);background:#fff}
.adjunto-row.is-arrastrando{opacity:.35}
.adjunto-row__handle{flex:none;display:flex;color:var(--ink-4);cursor:grab;touch-action:none}
.adjunto-row__handle:active{cursor:grabbing}
.adjunto-row__ico{width:28px;height:28px;border-radius:var(--r-md);flex:none;display:grid;place-items:center;
  background:var(--gris-100);color:var(--ink-2)}
.adjunto-row__campos{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.adjunto-row__campos .input{font-size:var(--text-sm);padding:6px 10px}
.adjunto-row__detalle{font-size:var(--text-xs);color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Vista previa de la imagen de portada */
.web-portada{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);background:var(--gris-100);background-size:cover;
  background-position:center;display:grid;place-items:center;border:1px dashed var(--gris-300)}
.web-portada__ph{display:flex;align-items:center;gap:var(--s-2);color:var(--ink-4);font-size:var(--text-xs)}
/* Medida recomendada: caption fijo debajo del recuadro, fuera de él a
   propósito (algunos editores hacen portada.innerHTML='' al elegir imagen,
   lo que borraría cualquier cosa puesta dentro) — así queda visible siempre,
   con imagen cargada o sin ella. */
.web-portada__medida{display:block;margin-top:6px;color:var(--ink-4);font-size:var(--text-xs)}
.web-portada__quitar{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;
  transition:background .15s}
.web-portada__quitar:hover{background:rgba(0,0,0,.75)}

/* Ficha de datos del solicitante (PQRS) */
.pqrs-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s-3) var(--s-5)}
.pqrs-dato{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-bottom:1px solid var(--gris-100);
  font-size:var(--text-sm);min-width:0}
.pqrs-dato span{font-size:var(--text-xs);font-weight:600}
.pqrs-dato b{color:var(--ink);overflow-wrap:anywhere}

/* Lista de adjuntos */
.pqrs-archivo{display:flex;align-items:center;gap:var(--s-2);padding:8px 0;border-bottom:1px solid var(--gris-100);
  font-size:var(--text-sm);color:var(--ink-3)}
.pqrs-archivo:last-child{border-bottom:none}
.pqrs-archivo a{color:var(--ink);font-weight:500;overflow-wrap:anywhere}

@media (max-width:900px){
  .pqrs-datos{grid-template-columns:1fr}
}

/* ---- Campana de notificaciones (topbar) ------------------------------- */
/* Lo que llega del sitio (PQRS, contacto) aterriza aqui, no en el correo. */
.notif{position:relative}
.notif__count{position:absolute;top:2px;right:1px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-full);background:var(--naranja-500);color:#fff;border:2px solid var(--surface);
  font-size:.62rem;font-weight:800;line-height:12px;display:grid;place-items:center}

.notif__panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:calc(100vw - var(--s-8));
  background:var(--surface);border:1px solid var(--gris-200);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);z-index:60;overflow:hidden;
  transform-origin:top right;animation:notif-in var(--dur) var(--ease)}
@keyframes notif-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.notif__panel{animation:none}}

.notif__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--gris-100)}
.notif__head b{font-size:var(--text-base);color:var(--ink)}
.notif__head form{margin:0}

.notif__list{max-height:min(58vh,420px);overflow-y:auto;scrollbar-gutter:stable}

.notif__item{display:flex;gap:var(--s-3);padding:var(--s-3) var(--s-4);text-decoration:none;
  border-bottom:1px solid var(--gris-100);transition:background var(--dur)}
.notif__item:last-child{border-bottom:none}
.notif__item:hover{background:var(--bg-soft);text-decoration:none}
.notif__item.is-new{background:var(--azul-50)}
.notif__item.is-new:hover{background:var(--azul-100)}

.notif__ico{width:30px;height:30px;border-radius:var(--r-md);flex:none;display:grid;place-items:center;
  background:var(--gris-100);color:var(--ink-2)}
.notif__item.is-new .notif__ico{background:var(--azul-700);color:#fff}

.notif__texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.notif__texto b{font-size:var(--text-sm);color:var(--ink);line-height:1.3}
.notif__texto small{font-size:var(--text-xs);color:var(--ink-3);line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif__texto time{font-size:.68rem;color:var(--ink-4);margin-top:2px}

.notif__vacio{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
  padding:var(--s-10) var(--s-4);color:var(--ink-4);font-size:var(--text-sm);text-align:center}
.notif__vacio .ico{color:var(--gris-300)}

.notif__foot{padding:var(--s-3) var(--s-4);border-top:1px solid var(--gris-100);
  background:var(--surface-2);text-align:center}
.notif__foot a{font-size:var(--text-sm);font-weight:600}