/* ════════════════════════════════════════════════════════════
   CRM ZYGNALS · creadoras
   Pantallas calcadas del CRM de Micro Hair Clinic (barra lateral oscura de
   224 px, barra superior blanca de 64 px, tarjetas de radio 8, chips píldora,
   botón primario negro de 44 px). Colores y tipografías de zygnals.co:
   azul #38B6FF, tinta #181818, Poppins · Space Grotesk · JetBrains Mono.
   ════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --acento:#38b6ff; --acento-2:#0ea5e9; --acento-suave:#e0f4ff; --acento-txt:#0b6e9e; --acento-ink:#04212f;
  --fondo:#f5f7f9; --lienzo:#ffffff; --suave:#f9fafb; --tenue:#eef1f4; --linea:#e3e7ec; --linea-2:#cfd6de; --linea-btn:#d9dfe6;
  --rail:#0a0a0a; --rail-2:#181818; --rail-3:#232323; --rail-linea:#2a2a2a; --rail-txt:#d6d6d6; --rail-txt-2:#8a8a8a;
  --tinta:#181818; --tinta-2:#2b2b2b; --tinta-3:#5a5a5a; --tinta-4:#6f6f6f; --tinta-5:#8b8b8b;
  --entra:#0f7a52; --entra-fondo:#e2f3ec; --entra-linea:#a8d8c4;
  --apremia:#b23324; --apremia-fondo:#fbe6e3; --apremia-linea:#eeb4ab;
  --pendiente:#8a6209; --pend-fondo:#fff6e0; --pend-linea:#f0d9a0;
  --neutro:#5a6472; --neutro-fondo:#eef0f3;
  --wa:#25d366; --wa-ink:#0b3d20; --ig:#e1306c; --ig-fondo:#fde7ef;
  --e-sin:#8896a8; --e-con:#5b7fc4; --e-enc:#3d8fa8; --e-cont:#2e9e7e; --e-int:#b08415; --e-conv:#c4692a; --e-acu:#0f7a52; --e-desc:#b23324;
  --f-titulo:"Poppins",system-ui,sans-serif; --f-texto:"Space Grotesk",system-ui,sans-serif; --f-cifra:"JetBrains Mono",ui-monospace,monospace;
  --r:8px; --r-2:10px; --r-pill:999px;
  --lateral:224px; --barra:64px; --toque:44px;
  --sombra-1:0 1px 2px rgba(24,24,24,.04); --sombra-2:0 8px 30px rgba(24,24,24,.07); --sombra-3:0 30px 80px rgba(24,24,24,.28);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--f-texto);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-titulo);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.15}
a{color:var(--acento-txt);text-decoration:underline;text-underline-offset:3px}
a.btn,a.nav-item,a.chip,a.naipe,a.handle,a.pill,.inferior a,.migas a,.tarjeta a.sinsub,a.ficha-filtro{text-decoration:none}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}
code{font-family:var(--f-cifra);font-size:.92em;background:var(--tenue);padding:1px 5px;border-radius:4px}
.cifra,.n,.mono{font-family:var(--f-cifra);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--acento-2);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.sr,.saltar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.saltar:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;z-index:99;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:var(--r)}
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:0 0 auto}

/* ── barra lateral ──────────────────────────────────────── */
.lateral{position:fixed;inset:0 auto 0 0;width:var(--lateral);z-index:40;background:var(--rail);color:var(--rail-txt);display:flex;flex-direction:column;padding:18px 14px}
.lateral__marca{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 6px 18px}
.marca{display:flex;align-items:center;gap:8px;color:#fff}
.marca img{height:24px;width:auto}
.marca span{font-family:var(--f-cifra);font-size:10px;letter-spacing:.16em;color:var(--acento);text-transform:uppercase}
.lateral__plegar{width:36px;height:36px;border:0;border-radius:var(--r);background:none;color:var(--rail-txt);display:grid;place-items:center}
.lateral__plegar:hover{background:var(--rail-2)}
.lateral nav{flex:1;overflow:auto}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;height:46px;padding:0 12px;margin-bottom:4px;border-radius:var(--r);color:var(--rail-txt);font-size:15px;font-weight:500;text-decoration:none}
.nav-item:hover{background:var(--rail-2);color:#fff}
.nav-item[aria-current="page"]{background:var(--rail-2);color:var(--acento)}
.nav-item .ico{width:19px;height:19px}
.nav-label{flex:1}
.nav-ct{font-family:var(--f-cifra);font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:2px 7px;background:var(--rail-3);color:var(--rail-txt)}
.nav-ct--apremia{background:var(--apremia);color:#fff}
.nav-ct--entra{background:var(--acento);color:var(--acento-ink)}
.lateral__pie{border-top:1px solid rgba(255,255,255,.1);margin-top:12px;padding:12px 8px 0;font-size:12px;color:var(--rail-txt-2);display:flex;align-items:center;gap:8px}
.punto{width:8px;height:8px;border-radius:50%;background:var(--apremia);flex:none}
.punto--ok{background:var(--wa)}
html.nav-mini .lateral{width:72px;padding-left:10px;padding-right:10px;transition:width .18s ease}
html.nav-mini .lateral .nav-label,html.nav-mini .lateral .nav-ct,html.nav-mini .lateral .lateral__pie,html.nav-mini .lateral .marca{display:none}
html.nav-mini .lateral .nav-item{justify-content:center;padding:0}
html.nav-mini .lateral__marca{justify-content:center}
html.nav-mini .lateral:hover,html.nav-mini .lateral:focus-within{width:var(--lateral);padding-left:14px;padding-right:14px;box-shadow:10px 0 28px rgba(0,0,0,.28)}
html.nav-mini .lateral:hover .nav-label,html.nav-mini .lateral:hover .nav-ct,html.nav-mini .lateral:hover .lateral__pie,html.nav-mini .lateral:hover .marca,
html.nav-mini .lateral:focus-within .nav-label,html.nav-mini .lateral:focus-within .nav-ct,html.nav-mini .lateral:focus-within .marca{display:flex}
html.nav-mini .lateral:hover .nav-item,html.nav-mini .lateral:focus-within .nav-item{justify-content:flex-start;padding:0 12px}
html.nav-mini .lateral:hover .lateral__marca{justify-content:space-between}
html.nav-mini .principal{margin-left:72px}
html.nav-mini .barra{left:72px}

/* ── barra superior ─────────────────────────────────────── */
.barra{position:fixed;top:0;right:0;left:var(--lateral);height:var(--barra);z-index:30;display:flex;align-items:center;gap:14px;padding:0 20px;background:var(--lienzo);border-bottom:1px solid var(--linea)}
.barra__menu{display:none;width:40px;height:40px;border:1px solid var(--linea-btn);border-radius:var(--r);background:var(--lienzo);color:var(--tinta);place-items:center}
.barra__buscar{position:relative;width:100%;max-width:420px}
.barra__lupa{position:absolute;left:12px;top:12px;width:17px;height:17px;color:var(--tinta-5);pointer-events:none}
.barra__buscar input{width:100%;height:40px;border:1px solid var(--linea-btn);border-radius:var(--r);background:var(--fondo);padding:0 12px 0 36px;font-size:14px}
.barra__hueco{flex:1}
.barra__boton{position:relative;width:40px;height:40px;border:1px solid var(--linea-btn);border-radius:var(--r);background:var(--lienzo);color:var(--tinta);display:grid;place-items:center;text-decoration:none}
.barra__boton .ico{width:19px;height:19px}
.barra__ct{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--r-pill);background:var(--apremia);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;font-family:var(--f-cifra)}
.barra__usuario{position:relative}
.barra__usuario summary{list-style:none;cursor:pointer;height:40px;padding:0 8px 0 4px;display:flex;align-items:center;gap:8px;border:1px solid var(--linea-btn);border-radius:var(--r-pill);background:var(--lienzo)}
.barra__usuario summary::-webkit-details-marker{display:none}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--acento);color:var(--acento-ink);font-family:var(--f-titulo);font-weight:700;font-size:13px;display:inline-grid;place-items:center}
.menu-usuario{position:absolute;right:0;top:calc(100% + 8px);width:240px;background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r-2);padding:8px;box-shadow:var(--sombra-2);z-index:50}
.menu-usuario p{margin:0;padding:8px 12px 10px;font-size:13px;color:var(--tinta-4);overflow-wrap:anywhere}
.menu-usuario p b{color:var(--tinta)}
.menu-usuario__rol{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.menu-usuario .nav-item{color:var(--tinta);height:40px;margin:0}
.menu-usuario .nav-item:hover{background:var(--tenue);color:var(--tinta)}

/* ── cuerpo ─────────────────────────────────────────────── */
.principal{margin-left:var(--lateral);padding-top:var(--barra);min-height:100vh;padding-bottom:40px}
.migas-linea{display:flex;align-items:center;gap:12px;padding:14px 24px 0}
.volver{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--linea-btn);border-radius:var(--r);background:var(--lienzo);font-size:13px;font-weight:600;color:var(--tinta)}
.migas{font-size:12.5px;color:var(--tinta-4);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.migas a{color:var(--acento-txt)}
.migas b{color:var(--tinta)}
.acciones-pagina{display:flex;gap:8px;justify-content:flex-end;padding:14px 24px 0}
.lienzo{padding:22px 24px 60px;max-width:1440px}
.titulo{font-size:32px;letter-spacing:-.025em;margin:0 0 4px}
.bajada{color:var(--tinta-4);font-size:14px;margin:0 0 18px;max-width:78ch}
.pestanas{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--linea);margin:0 24px}
.pestanas a,.pestanas button{height:44px;padding:0 14px;display:inline-flex;align-items:center;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--tinta-4);font-size:14px;font-weight:500;text-decoration:none}
.pestanas a:hover,.pestanas button:hover{color:var(--tinta)}
.pestanas a[aria-current="page"],.pestanas button[aria-selected="true"]{border-bottom-color:var(--tinta);color:var(--tinta);font-weight:600}

/* ── tarjetas y rejillas ────────────────────────────────── */
.tarjeta,.card{background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r);padding:18px;box-shadow:var(--sombra-1)}
.tarjeta--sinrelleno{padding:0;overflow:hidden}
.tarjeta__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--tenue)}
.tarjeta__titulo{font-family:var(--f-titulo);font-size:20px;font-weight:600}
.tarjeta__sub{font-size:13px;color:var(--tinta-5);margin:3px 0 0}
.fila{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 18px;border-bottom:1px solid var(--tenue)}
.fila:last-child{border-bottom:0}
.rejilla{display:grid;gap:14px}
.r2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cejilla{font-family:var(--f-cifra);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-5);margin:0 0 10px;display:flex;align-items:center;gap:9px;font-weight:600}
.cejilla::after{content:"";flex:1;height:1px;background:var(--linea)}
.dato,.kpi-valor{font-family:var(--f-titulo);font-size:44px;font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.dato--chico{font-size:29px}
.dato__pie,.kpi-rotulo{font-size:13.5px;color:var(--tinta-4);display:block;margin-top:8px}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi__rotulo{font-size:14px;color:var(--tinta-4)}
.kpi__linea{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.kpi__delta{font-size:13px;font-weight:600;color:var(--tinta-4)}
.kpi__sub{font-size:13.5px;color:var(--tinta-4);margin-top:6px}
a.kpi{text-decoration:none;color:inherit}
a.kpi:hover{border-color:var(--acento)}
.anillo{--p:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--acento) calc(var(--p)*1%),var(--tenue) 0);display:grid;place-items:center;flex:none}
.anillo>span{width:48px;height:48px;border-radius:50%;background:var(--lienzo);display:grid;place-items:center;font-family:var(--f-cifra);font-size:12px;font-weight:700}

/* ── etiquetas y chips ──────────────────────────────────── */
.eti,.chip-estado{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-texto);font-size:12px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap;line-height:1.5}
.eti .ico{width:12px;height:12px}
.eti--mapas{background:var(--acento-suave);color:var(--acento-txt)}
.eti--cielo{background:#efe7ff;color:#5b3fa6}
.eti--alta{background:var(--entra-fondo);color:var(--entra)}
.eti--media{background:var(--neutro-fondo);color:var(--neutro)}
.eti--baja{background:var(--pend-fondo);color:var(--pendiente)}
.eti--nula{background:var(--apremia-fondo);color:var(--apremia)}
.eti--neutra{background:var(--neutro-fondo);color:var(--neutro)}
.eti--ig{background:var(--ig-fondo);color:var(--ig)}
.eti--wa{background:#e6f9ee;color:var(--wa-ink)}
.eti--correo{background:var(--acento-suave);color:var(--acento-txt)}
.eti--tinta{background:var(--tinta);color:#fff}
.chip,.pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--lienzo);border:1px solid var(--linea-2);font-size:13px;font-weight:600;color:var(--tinta-3);cursor:pointer}
.chip[aria-pressed="true"],.chip.on,.pill[aria-current="page"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.ficha-filtro{display:inline-flex;align-items:center;gap:6px;height:36px;background:var(--acento-suave);border:1px solid var(--acento);color:var(--acento-txt);border-radius:var(--r-pill);padding:0 6px 0 12px;font-size:13px;font-weight:600}
.ficha-filtro a{color:inherit;text-decoration:none;padding:0 4px;font-size:16px}
.filtro{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filtro form{display:flex;gap:6px;align-items:center}
.filtro input{height:36px}

/* ── botones ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--toque);padding:0 16px;border-radius:var(--r);border:1px solid transparent;background:var(--acento);color:var(--acento-ink);font-family:var(--f-titulo);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background .12s}
.btn:hover{background:var(--acento-2);color:#fff;text-decoration:none}
.btn--negro{background:var(--tinta);color:#fff}
.btn--negro:hover{background:var(--rail-3)}
.btn--fantasma{background:var(--lienzo);color:var(--tinta);border-color:var(--linea-2)}
.btn--fantasma:hover{background:var(--fondo);color:var(--tinta)}
.btn--peligro{background:var(--apremia-fondo);color:var(--apremia);border-color:#e0b6b2}
.btn--peligro:hover{background:#f5dcd9;color:var(--apremia)}
.btn--wa{background:var(--wa);color:var(--wa-ink)}
.btn--wa:hover{background:#1fc05a;color:var(--wa-ink)}
.btn--ig{background:var(--ig);color:#fff}
.btn--ig:hover{background:#c2275c;color:#fff}
.btn--ok{background:var(--entra)!important;color:#fff!important}
.btn--sm{height:36px;padding:0 13px;font-size:13px}
.btn--xs{height:32px;padding:0 10px;font-size:12.5px}
.btn--ancho{width:100%}
.btn .ico{width:17px;height:17px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── tablas ─────────────────────────────────────────────── */
.tabla-caja{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r);background:var(--lienzo);box-shadow:var(--sombra-1)}
table{border-collapse:collapse;width:100%;min-width:820px;font-size:14px}
th{font-family:var(--f-texto);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-5);text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea);background:var(--lienzo);white-space:nowrap;font-weight:600}
td{padding:11px 12px;border-bottom:1px solid var(--tenue);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.pulsable:hover{background:var(--suave);cursor:pointer}
td.n,th.n{text-align:right;white-space:nowrap;font-family:var(--f-cifra);font-variant-numeric:tabular-nums}
.handle{font-family:var(--f-cifra);font-size:13px;font-weight:500;color:var(--acento-txt)}

/* ── ficha ──────────────────────────────────────────────── */
.ficha{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,9fr);gap:16px;align-items:start}
@media (max-width:1080px){.ficha{grid-template-columns:1fr}}
.seccion{border:1px solid var(--linea);border-radius:var(--r);background:var(--lienzo);margin-bottom:14px;box-shadow:var(--sombra-1);overflow:hidden}
.seccion>summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;gap:9px;font-family:var(--f-titulo);font-size:15px;font-weight:600;color:var(--tinta);background:var(--lienzo);border-bottom:1px solid transparent}
.seccion>summary::-webkit-details-marker{display:none}
.seccion[open]>summary{border-bottom-color:var(--tenue)}
.seccion>summary::before{content:"▸";color:var(--tinta-5);font-size:12px;transition:transform .15s}
.seccion[open]>summary::before{transform:rotate(90deg)}
.seccion__cuerpo{padding:14px 16px}
.campos{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px;align-items:baseline;margin:0}
.campos dt{color:var(--tinta-4);font-size:13px}
.campos dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.campos dd.vacio{color:var(--tinta-5);font-weight:400;font-style:italic}

.etapas{display:flex;gap:2px;margin-bottom:16px;flex-wrap:wrap}
.etapas button{flex:1;min-width:84px;border:0;padding:9px 6px 8px;background:var(--tenue);color:var(--tinta-4);font-family:var(--f-texto);font-size:12px;font-weight:600;position:relative;border-top:3px solid var(--linea-2)}
.etapas button:first-child{border-radius:var(--r) 0 0 var(--r)}
.etapas button:last-child{border-radius:0 var(--r) var(--r) 0}
.etapas button:hover{background:var(--suave);color:var(--tinta)}
.etapas button.pasada{color:var(--tinta-3)}
.etapas button.aqui{background:var(--lienzo);color:var(--tinta);box-shadow:var(--sombra-1)}

.pordoing{background:var(--pend-fondo);border:1px solid var(--pend-linea);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.pordoing .cejilla{color:var(--pendiente)}
.pordoing .cejilla::after{background:var(--pend-linea)}
.pend{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--pend-linea)}
.pend:last-child{border-bottom:0;padding-bottom:0}
.pend b{display:block;font-size:14px;font-weight:600}
.pend small{color:var(--tinta-4);font-size:12px}
.pend .vence{margin-left:auto;font-family:var(--f-cifra);font-size:12px;white-space:nowrap}
.pend .vence--apremia{color:var(--apremia);font-weight:600}
.pend .vence--hoy{color:var(--pendiente);font-weight:600}
.vence--apremia{color:var(--apremia);font-weight:600}.vence--hoy{color:var(--pendiente);font-weight:600}

.hilo{position:relative;padding-left:22px}
.hilo::before{content:"";position:absolute;left:6px;top:5px;bottom:5px;width:2px;background:var(--linea)}
.evento{position:relative;padding:0 0 16px}
.evento::before{content:"";position:absolute;left:-21px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--lienzo);border:2px solid var(--linea-2)}
.evento--correo::before{border-color:var(--acento)}
.evento--respuesta::before{background:var(--entra);border-color:var(--entra)}
.evento--clic::before{background:var(--acento);border-color:var(--acento)}
.evento--dm::before{border-color:var(--ig)}
.evento--nota::before{border-color:var(--pendiente)}
.evento__cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.evento__cab b{font-size:14px;font-weight:600}
.evento__cab time{font-family:var(--f-cifra);font-size:11.5px;color:var(--tinta-5);margin-left:auto}
.evento__cuerpo{font-size:13.5px;color:var(--tinta-2);margin-top:4px;background:var(--suave);border-radius:var(--r);padding:9px 12px;white-space:pre-wrap}
.fijado{border-left:3px solid var(--acento);padding-left:10px;background:var(--acento-suave);border-radius:0 var(--r) var(--r) 0}

/* ── kanban ─────────────────────────────────────────────── */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:250px;gap:12px;overflow-x:auto;padding-bottom:10px}
.col{background:var(--tenue);border:1px solid var(--linea);border-radius:var(--r);padding:10px;border-top:3px solid var(--e-sin)}
.col--exito{border-top-color:var(--e-acu);background:var(--entra-fondo)}
.col--fuga{border-top-color:var(--e-desc);background:var(--apremia-fondo)}
.col__cab{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.col__cab b{font-family:var(--f-titulo);font-size:14px;font-weight:600}
.col__cab .ct{margin-left:auto;font-family:var(--f-cifra);font-size:12px;color:var(--tinta-4)}
.col__suma{font-family:var(--f-cifra);font-size:11px;color:var(--tinta-5);margin:-4px 0 8px}
.naipe{background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;width:100%;text-align:left;display:block;color:var(--tinta)}
.naipe:hover{border-color:var(--acento)}
.naipe b{display:block;font-family:var(--f-cifra);font-size:13px;font-weight:600;color:var(--tinta)}
.naipe small{color:var(--tinta-4);font-size:12px;display:block;margin-top:2px}
.naipe__ct{float:right;font-family:var(--f-cifra);font-size:11px;border-radius:var(--r-pill);padding:0 6px}
.mas{text-align:center;font-size:12px;color:var(--tinta-5);padding:6px}

/* ── formulario ─────────────────────────────────────────── */
label.campo{display:block;margin-bottom:12px}
label.campo>span,.rotulo{display:block;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-5);margin-bottom:6px;font-weight:600}
input,select,textarea{width:100%;height:var(--toque);background:var(--lienzo);border:1px solid var(--linea-btn);border-radius:var(--r);padding:0 12px;font:inherit;font-size:14px;color:var(--tinta)}
textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical;line-height:1.55}
input[type=checkbox],input[type=radio]{width:auto;height:auto}
input:focus,select:focus,textarea:focus{border-color:var(--acento-2)}
.segmentado{display:inline-flex;background:var(--tenue);border-radius:var(--r);padding:3px}
.segmentado a,.segmentado button{height:36px;padding:0 16px;border-radius:6px;font-size:14px;font-weight:600;color:var(--tinta-3);display:inline-flex;align-items:center;border:0;background:none;text-decoration:none}
.segmentado [aria-current="page"],.segmentado .on{background:var(--tinta);color:#fff}

/* ── avisos ─────────────────────────────────────────────── */
.aviso{border-radius:var(--r);padding:12px 14px;font-size:14px;margin-bottom:14px;display:flex;gap:10px;align-items:flex-start;border:1px solid}
.aviso--apremia{background:var(--apremia-fondo);border-color:var(--apremia-linea);color:var(--apremia)}
.aviso--pend{background:var(--pend-fondo);border-color:var(--pend-linea);color:var(--pendiente)}
.aviso--entra{background:var(--entra-fondo);border-color:var(--entra-linea);color:var(--entra)}
.aviso b{font-weight:700}
.aviso a{color:inherit}

/* ── ayuda emergente ────────────────────────────────────── */
.ayuda{position:relative;display:inline-flex;align-items:center;gap:4px}
.ayuda>button{background:none;border:1px solid var(--linea-2);color:var(--tinta-4);width:16px;height:16px;border-radius:50%;font-size:10px;line-height:1;display:grid;place-items:center;font-family:var(--f-titulo);font-weight:700;padding:0}
.ayuda>button:hover{border-color:var(--acento);color:var(--acento-txt)}
.ayuda__cuerpo{position:absolute;top:calc(100% + 6px);left:0;z-index:70;width:290px;background:var(--lienzo);border:1px solid var(--linea-2);border-radius:var(--r);padding:10px 12px;font-family:var(--f-texto);font-size:13px;font-weight:400;line-height:1.5;color:var(--tinta-2);text-transform:none;letter-spacing:0;box-shadow:var(--sombra-2);display:none}
.ayuda.abierta .ayuda__cuerpo{display:block}

/* ── embudo ─────────────────────────────────────────────── */
.embudo{display:flex;flex-direction:column;gap:7px}
.fila-embudo{display:grid;grid-template-columns:180px 1fr 62px 62px;gap:11px;align-items:center}
.fe__nombre{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.fe__nombre i{width:10px;height:10px;border-radius:3px;flex:none}
.fe__pista{display:block;background:var(--tenue);border-radius:5px;height:28px;overflow:hidden}
.fe__pista span{display:block;height:100%;border-radius:5px;min-width:4px}
.fe__n{font-family:var(--f-cifra);font-size:14px;font-weight:600;text-align:right}
.fe__conv{font-family:var(--f-cifra);font-size:12px;color:var(--tinta-4);text-align:right}
.fuga{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 12px;background:var(--apremia-fondo);border-radius:var(--r);font-size:13px;color:var(--apremia);font-weight:600}
.pila{display:flex;height:24px;border-radius:6px;overflow:hidden;margin:6px 0}
.pila i{display:block;height:100%}
.leyenda{display:flex;flex-wrap:wrap;gap:11px;font-size:12.5px;color:var(--tinta-4)}
.leyenda i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.barra-prog{height:10px;border-radius:var(--r-pill);background:var(--tenue);overflow:hidden}
.barra-prog>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--acento)}

/* ── Hoy: tres columnas, contacto asistido ──────────────── */
.hoy-cols{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px;align-items:start}
@media (max-width:1180px){.hoy-cols{grid-template-columns:1fr}}
.contacto{border-bottom:1px solid var(--tenue);padding:12px 18px}
.contacto:last-child{border-bottom:0}
.contacto__cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.contacto__cab .handle{font-size:14px}
.contacto__meta{font-size:12.5px;color:var(--tinta-4);margin-top:2px}
.contacto__desc{font-size:13px;color:var(--tinta-2);margin:6px 0 8px;line-height:1.5}
.contacto__acciones{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.contacto__texto{width:100%;min-height:118px;font-size:13.5px;margin-top:8px;background:var(--suave)}
.contacto details>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--acento-txt);list-style:none;display:inline-flex;align-items:center;gap:6px}
.contacto details>summary::-webkit-details-marker{display:none}
.falta{font-size:12.5px;color:var(--apremia);font-weight:600}

/* ── bandeja: lista · hilo · ficha ──────────────────────── */
.bandeja{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;gap:0;border:1px solid var(--linea);border-radius:var(--r);background:var(--lienzo);min-height:calc(100vh - 200px);overflow:hidden}
@media (max-width:1180px){.bandeja{grid-template-columns:300px minmax(0,1fr)}.bandeja__ficha{display:none}}
@media (max-width:860px){.bandeja{grid-template-columns:1fr}.bandeja__lista{display:none}.bandeja--lista .bandeja__lista{display:block}.bandeja--lista .bandeja__hilo{display:none}}
.bandeja__lista{border-right:1px solid var(--linea);overflow:auto}
.conv{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--tenue);color:var(--tinta);text-decoration:none}
.conv:hover{background:var(--suave)}
.conv[aria-current="page"]{background:var(--acento-suave)}
.conv__cuerpo{min-width:0;flex:1}
.conv__nombre{font-weight:600;font-size:14px;display:flex;gap:6px;align-items:center}
.conv__ultimo{font-size:13px;color:var(--tinta-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.conv__hora{font-family:var(--f-cifra);font-size:11px;color:var(--tinta-5);white-space:nowrap}
.conv--esperan .conv__nombre::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--acento);margin-left:auto}
.bandeja__hilo{display:flex;flex-direction:column;min-height:0}
.hilo-cab{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.burbujas{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--fondo)}
.burbuja{max-width:72%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.burbuja--in{align-self:flex-start;background:var(--lienzo);border:1px solid var(--linea);border-bottom-left-radius:4px}
.burbuja--out{align-self:flex-end;background:var(--tinta);color:#fff;border-bottom-right-radius:4px}
.burbuja time{display:block;font-family:var(--f-cifra);font-size:10.5px;opacity:.65;margin-top:4px}
.burbuja--out time{text-align:right}
.redactar{border-top:1px solid var(--linea);padding:12px 16px;display:grid;gap:8px}
.redactar textarea{min-height:84px}
.redactar__pie{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bandeja__ficha{border-left:1px solid var(--linea);padding:16px;overflow:auto;font-size:13.5px}
.bandeja__ficha dl{margin:0}

/* ── cajón lateral (ficha rápida) ───────────────────────── */
.cajon{position:fixed;inset:0;z-index:60}
.cajon__fondo{position:absolute;inset:0;background:rgba(24,24,24,.4)}
.cajon__panel{position:absolute;right:0;top:0;height:100%;width:100%;max-width:460px;background:var(--lienzo);box-shadow:var(--sombra-3);overflow-y:auto}
.cajon__cargando{padding:24px;color:var(--tinta-4)}
.cajon__cab{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--linea)}
.cajon__cuerpo{padding:16px 18px}

/* ── puerta ─────────────────────────────────────────────── */
body.puerta{background:#0a0a0a;min-height:100vh;display:grid;place-items:center;padding:20px}
.puerta__panel{width:min(400px,100%);background:#fff;border-radius:12px;padding:30px 28px;box-shadow:var(--sombra-3)}
.puerta__logo{height:32px;width:auto;margin-bottom:18px}
.puerta__panel h1{font-size:24px;margin-bottom:4px}
.puerta__sub{color:var(--tinta-4);font-size:14px;margin:0 0 18px}
.puerta__pie{font-size:12.5px;color:var(--tinta-5);margin:14px 0 0;line-height:1.5}

/* ── navegación inferior y menú móvil ───────────────────── */
.inferior{display:none}
.menu-movil{border:0;margin:0;padding:0;width:min(300px,100%);height:100%;background:var(--rail);color:var(--rail-txt)}
.menu-movil__cab{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.menu-movil__cab img{height:24px;width:auto}
.menu-movil__cab button{width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r);background:none;color:var(--rail-txt);display:grid;place-items:center}
.menu-movil__cuerpo{padding:12px}
@media (max-width:860px){
  .lateral{display:none}
  .barra{left:0;padding:0 14px}
  .barra__menu{display:grid}
  .barra__buscar{max-width:none}
  .principal{margin-left:0;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .lienzo,.migas-linea,.acciones-pagina{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
  .lienzo{padding-top:16px}
  .titulo{font-size:26px}
  .pestanas{margin:0 14px}
  .inferior{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:40;background:var(--rail);justify-content:space-around;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
  .inferior a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;color:var(--rail-txt);font-size:11px;font-weight:500}
  .inferior a .ico{width:20px;height:20px}
  .inferior a[aria-current="page"]{color:var(--acento)}
  .fila-embudo{grid-template-columns:1fr 48px 52px;grid-template-areas:"n n n" "p c v";gap:3px 9px;margin-bottom:9px}
  .fe__nombre{grid-area:n}.fe__pista{grid-area:p}.fe__n{grid-area:c}.fe__conv{grid-area:v}
  .cajon__panel{max-width:100%}
  .burbuja{max-width:90%}
}