/* ═══════════════════════════════════════════════════════════════
   PLATAFORMA-2026.CSS — Consola admin/ y empleados/ con el rediseño
   2026 de la web del negocio (tema-2026.css): blanco + índigo,
   Bricolage Grotesque en títulos, Atkinson Hyperlegible en el texto.
   Se carga DESPUÉS de app.css y plataforma.css: solo cambia tokens y
   apariencia, no toca estructura, IDs ni ganchos de JS.
   Para volver al diseño anterior basta con quitar este <link>.
   ═══════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&display=swap");

:root{
  --brand:#4F46E5;
  --brand-soft:#EEF0FF;
  --brand-700:#3730A3;
  --ink:#1E1B4B;
  --ink-2:#575B84;
  --ink-3:#8A8DAE;
  --line:#E4E7F2;
  --bg:#F6F7FC;
  --card:#FFFFFF;
  --ok:#17845A; --ok-soft:#DDF3E8;
  --bad:#C2283A; --bad-soft:#FDE7E9;
  --amber:#B45309; --amber-soft:#FFF1D6;
  --sun:#FFD84D;
  --font:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;

  /* Tokens de app.css que usan las páginas y los scripts de plataforma */
  --primary:var(--brand);
  --primary-soft:var(--brand-soft);
  --primary-glow:#C7CBF5;
  --primary-dark:var(--brand-700);
  --primary-gradient:var(--brand);
  --white:#fff;
  --surface:var(--bg);
  --border:var(--line);
  --border-focus:#C7CBF5;
  --text-main:var(--ink);
  --text-muted:var(--ink-2);
  --text-hint:var(--ink-3);
  --text-2:var(--ink-2);
  --success:var(--ok); --success-soft:var(--ok-soft);
  --danger:var(--bad); --danger-soft:var(--bad-soft);
  --warning:var(--amber); --warning-soft:var(--amber-soft);
  --radius-sm:14px; --radius-md:18px; --radius-lg:22px;
  --shadow-sm:none; --shadow-md:none;
}

body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:8px}
.plat-shell{background:var(--bg)}

/* ── Sidebar ── */
.plat-sidebar{width:272px;border-right:1px solid var(--line);padding:22px 16px 18px}
.plat-brand{border-bottom:none;padding:2px 8px 22px;gap:10px;align-items:center}
.plat-brand img{height:32px;width:auto;display:block}
.plat-brand-tag{font-family:var(--font);font-size:12px;font-weight:700;color:var(--brand-700);background:var(--brand-soft);border-radius:999px;padding:4px 10px;line-height:1.2}
.plat-nav{padding:0;gap:2px}
.plat-nav-item{padding:11px 14px;border-radius:12px;font-size:14.5px;font-weight:700;color:var(--ink-2);gap:12px}
.plat-nav-item:hover{background:var(--bg);color:var(--ink)}
.plat-nav-item.active{background:var(--brand-soft);color:var(--brand)}
.plat-nav-sep{margin:18px 14px 6px;font-size:13px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink-3)}

/* ── Barra superior ── */
.plat-topbar{min-height:72px;padding:14px 32px;border-bottom:1px solid var(--line)}
.plat-topbar-title{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.plat-user b{font-size:14px;color:var(--ink)}
.plat-user span{font-size:12.5px;color:var(--ink-2)}
.plat-menu-btn{border-radius:12px;border:1px solid var(--line);width:42px;height:42px}
.plat-content{padding:28px 32px 44px}

/* ── Encabezado de página (antes: banda oscura) ── */
.plat-hero{background:none;color:var(--ink);padding:0;border-radius:0;margin:0 0 22px;overflow:visible}
.plat-hero::after{display:none}
.plat-hero-t{font-family:var(--font-display);font-size:32px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.plat-hero-s{font-size:15px;color:var(--ink-2);opacity:1;margin-top:4px}
.plat-hero-s b{color:var(--ink)}

/* ── KPIs: la primera va llena de índigo, como en el panel del negocio ── */
.kpi-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.kpi-card{border:1px solid var(--line);border-radius:22px;padding:20px 22px;box-shadow:none}
.kpi-card:hover{transform:none;box-shadow:none;border-color:#C9CDE3}
.kpi-icon-wrap{border:none;border-radius:12px;width:40px;height:40px}
.kpi-card:hover .kpi-icon-wrap{transform:none}
.kpi-icon-wrap.indigo,.kpi-card:hover .kpi-icon-wrap.indigo{background:var(--brand-soft);color:var(--brand)}
.kpi-icon-wrap.green,.kpi-card:hover .kpi-icon-wrap.green{background:var(--ok-soft);color:var(--ok)}
.kpi-icon-wrap.amber,.kpi-card:hover .kpi-icon-wrap.amber{background:var(--amber-soft);color:var(--amber)}
.kpi-icon-wrap.red,.kpi-card:hover .kpi-icon-wrap.red{background:var(--bad-soft);color:var(--bad)}
.kpi-value{font-family:var(--font-display);font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.kpi-label{font-size:14px;font-weight:400;color:var(--ink-2);margin-top:2px}
.kpi-grid > .kpi-card:first-child{background:var(--brand);border-color:var(--brand)}
.kpi-grid > .kpi-card:first-child .kpi-value,.kpi-grid > .kpi-card:first-child .kpi-label{color:#fff}
.kpi-grid > .kpi-card:first-child .kpi-icon-wrap{background:rgba(255,255,255,.16);color:#fff}

/* ── Tarjetas ── */
.card{border:1px solid var(--line);border-radius:22px;box-shadow:none}
.card:hover{transform:none;box-shadow:none;border-color:var(--line)}
.card-header{padding:20px 22px 14px;border-bottom:none}
.card-title{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.card-body{padding:16px 22px 22px}

/* ── Botones tipo píldora ── */
.btn{border-radius:999px;font-weight:700;font-family:var(--font)}
.btn-primary{background:var(--brand);box-shadow:0 12px 24px -12px rgba(79,70,229,.6)}
.btn-primary:hover{background:#4338CA;filter:none}
.btn-secondary,.btn-outline{background:#fff;border:2px solid var(--line);color:var(--ink);box-shadow:none}
.btn-secondary:hover,.btn-outline:hover{border-color:var(--brand);color:var(--ink)}
.btn-ghost{background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:#ECEEF8}
.btn-danger{background:var(--bad);border-color:var(--bad)}
.btn-sm,.btn-xs{border-radius:999px}
.btn-xs{min-height:32px;padding:0 14px;font-size:13px}

/* ── Formularios ── */
.input-label{font-size:13.5px;font-weight:700;color:var(--ink)}
.input{height:46px;border:2px solid var(--line);border-radius:14px;background:var(--bg);font-size:15px;color:var(--ink);font-family:var(--font)}
.input:hover{border-color:#D3D6E8}
.input:focus{background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,70,229,.12);outline:none}
textarea.input{height:auto}
select.input{padding-right:36px}
.plat-perm-item{font-size:14px}

/* ── Búsqueda y filtros ── */
.plat-search{height:46px;border:1px solid var(--line);background:#fff;padding:0 16px;min-width:340px}
.plat-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.plat-search input{font-size:15px;font-family:var(--font)}
.plat-chip{font-size:14px;font-weight:700;padding:8px 14px;border:1px solid var(--line);color:var(--ink)}
.plat-chip:hover{border-color:#C9CDE3;color:var(--ink)}
.plat-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── Pills de estado ── */
.pill{font-size:12.5px;font-weight:700;border:none;padding:5px 11px}
.pill-vencido{background:var(--bad-soft);color:#8E1F2E}
.pill-pendiente,.pill-saldo{background:var(--amber-soft);color:#7A4A00}
.pill-pagado,.pill-al-dia{background:var(--ok-soft);color:#11643F}
.pill-activo{background:var(--brand-soft);color:var(--brand-700)}
.pill-anulado{background:var(--bg);color:var(--ink-2)}

/* ── Tablas ── */
.table{font-size:14.5px}
.plat-content .table thead th{text-transform:none;letter-spacing:0;font-size:13px;font-weight:700;color:var(--ink-2);padding:14px 12px;background:none;border-bottom:1px solid var(--line)}
.plat-content .table td{padding:12px;border-bottom:1px solid var(--line);color:var(--ink)}
.plat-content .table tbody tr:last-child td{border-bottom:none}
.plat-content .table tbody tr:hover{background:#F8F8FF}
.plat-content .card > .table-wrap .table th:first-child,
.plat-content .card > .table-wrap .table td:first-child{padding-left:22px}
.plat-content .card > .table-wrap .table th:last-child,
.plat-content .card > .table-wrap .table td:last-child{padding-right:22px}

/* ── Detalle de negocio / tiles ── */
.plat-avatar{border-radius:50%;background:#FFF4CC;color:var(--ink);box-shadow:none;font-family:var(--font-display)}
.plat-stat{background:var(--bg);border:1px solid var(--line);border-radius:14px}
.plat-stat-k{font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink-2)}
.plat-stat-v{font-family:var(--font-display);font-size:20px;color:var(--ink)}

/* ── Accesos rápidos ── */
.plat-launch{border:1px solid var(--line);border-radius:22px;padding:20px}
.plat-launch:hover{transform:none;box-shadow:0 12px 24px -20px rgba(30,27,75,.45);border-color:#C9CDE3}
.plat-launch-ico{border-radius:12px}
.plat-launch-ico.green{color:var(--ok)}
.plat-launch-ico.amber{color:var(--amber)}
.plat-launch-t{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--ink)}
.plat-launch-s{font-size:13.5px;color:var(--ink-2)}

/* ── Estados ── */
.plat-vacio-t{font-family:var(--font-display);font-size:17px;color:var(--ink)}
.plat-vacio-s{font-size:14px}
.plat-estado{font-size:15px}
/* Contenedores con clase plat-estado que ya cargaron su contenido (tabla, lista): sin el aire del "Cargando…" */
.plat-estado:has(> :not(.plat-spinner):not(br)){padding:0;text-align:left}
.plat-sk{background:linear-gradient(90deg,var(--line) 25%,var(--bg) 50%,var(--line) 75%);background-size:200% 100%}

/* ── Modales ── */
.modal-overlay{background:rgba(30,27,75,.45)}
.modal{border-radius:24px;box-shadow:0 40px 80px -30px rgba(30,27,75,.5);border:none}
.modal-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.modal-footer{background:var(--bg)}
.modal-close{background:var(--bg);border-radius:50%}
.plat-confirm-icono{background:var(--bad-soft);color:var(--bad)}
.plat-confirm-icono.warn{background:var(--amber-soft);color:var(--amber)}

/* ── Avisos: píldora oscura abajo al centro, como en el panel del negocio ── */
.plat-toasts{top:auto;right:auto;bottom:20px;left:50%;transform:translateX(-50%);align-items:center;max-width:min(460px,calc(100vw - 32px))}
.plat-toast{background:var(--ink);color:#fff;border:none;border-radius:999px;padding:12px 20px;font-size:14px;font-weight:700;align-items:center;box-shadow:0 12px 30px rgba(30,27,75,.3);animation:platToastUp .22s ease}
.plat-toast svg,.plat-toast.ok svg,.plat-toast.error svg,.plat-toast.info svg{color:#fff;margin-top:0}
.plat-toast.ok{background:var(--ok)}
.plat-toast.error{background:var(--bad)}
.plat-toast.saliendo{transform:translateY(12px)}
@keyframes platToastUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── Login de la consola ── */
.auth-brand{background:var(--brand)}
.auth-brand h1,.auth-card h2{font-family:var(--font-display);letter-spacing:-.025em}
.auth-brand h1{font-size:36px;line-height:1.15}
.auth-brand p{color:rgba(255,255,255,.88);font-size:16px}
.auth-card h2{font-size:28px;color:var(--ink)}
.auth-card .sub{font-size:15px;color:var(--ink-2)}
.modo-switch{border:1px solid var(--line);padding:4px}
.modo-switch button{font-family:var(--font);font-size:14.5px;color:var(--ink-2)}
.modo-switch button.active{background:var(--ink);color:#fff}
.msg{font-size:14px;border-radius:14px}
.msg.error{background:var(--bad-soft);color:#8E1F2E}
.msg.info{background:var(--brand-soft);color:var(--brand-700)}
.stepbar span.on{background:var(--brand)}

@media (max-width:860px){
  .plat-sidebar{width:280px}
  .plat-content{padding:20px 16px 32px}
  .plat-topbar{padding:12px 16px;min-height:64px}
  .plat-topbar-title{font-size:19px}
  .plat-hero-t{font-size:26px}
  .kpi-value{font-size:28px}
}
@media (max-width:720px){
  .plat-content .card > .table-wrap .table td:first-child{padding-left:14px}
  .plat-content .card > .table-wrap .table td:last-child{padding-right:14px}
  .plat-tabla-stack tr{border-radius:18px;border-color:var(--line)}
  .plat-tabla-stack td::before{text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink-2)}
  .plat-search{min-width:0;flex:1 1 100%}
  /* Tarjetas apiladas: la tabla deja de medirse por su contenido (un correo
     largo la empujaba más ancha que la pantalla) */
  .plat-tabla-stack,.plat-tabla-stack tbody{display:block;width:100%}
  .plat-tabla-stack td{min-width:0;white-space:normal;overflow-wrap:anywhere}
  /* Etiqueta a la izquierda y el contenido de la celda fluyendo a la derecha
     (como bloque: si no, nombre y rubro quedaban lado a lado partidos) */
  .plat-tabla-stack td:not([colspan]){display:block;position:relative;padding:12px 14px 12px 112px;min-height:44px}
  .plat-tabla-stack td:not([colspan])::before{position:absolute;left:14px;top:13px;max-width:90px}
  .plat-tabla-stack .plat-acciones{justify-content:flex-end}
}
@media (max-width:600px){
  /* El correo de la sesión no cabe junto al título: en móvil queda solo "Salir" */
  .plat-user{display:none}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kpi-card{padding:16px}
  .kpi-value{font-size:26px}
  .plat-topbar-title{font-size:18px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .plat-toast,.plat-sidebar{animation:none;transition:none}
}
/* data-plat-requiere oculta con [hidden]; .plat-nav-item fija display:flex y lo pisaba. */
[data-plat-requiere][hidden]{display:none!important}