:root{--bg:#f4f7f7;--card:#fff;--ink:#0f1f1f;--mut:#5d7070;--line:#e2eaea;--pri:#0d9488;--pri2:#0f766e;--soft:#e6f6f4;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--side:#0b1f1f;--sideink:#c7dcdc;--sh:0 1px 2px rgba(15,31,31,.06),0 6px 24px rgba(15,31,31,.05)}
:root[data-t=dark]{--bg:#081414;--card:#0f1f1f;--ink:#e8f3f2;--mut:#8fa9a8;--line:#1b3030;--pri:#2dd4bf;--pri2:#5eead4;--soft:#0f2d2b;--side:#050d0d;--sideink:#9fbcbb;--sh:0 1px 2px rgba(0,0,0,.4)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
body.panel{display:flex;min-height:100vh}
a{color:var(--pri2)}
.side{width:236px;background:var(--side);color:var(--sideink);display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh;flex:none}
.logo{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none;font-size:13px;line-height:1.1;padding:6px 8px 18px}
.logo b{font-size:17px}.logo-i{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#14b8a6,#0d9488);display:grid;place-items:center;color:#fff}
.side nav{display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1}
.side nav a{display:flex;gap:11px;align-items:center;padding:9px 11px;border-radius:10px;color:var(--sideink);text-decoration:none;font-size:14px}
.side nav a:hover{background:rgba(255,255,255,.06);color:#fff}.side nav a.on{background:rgba(45,212,191,.14);color:#5eead4}
.side-f{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 2px;border-top:1px solid rgba(255,255,255,.08);margin-top:8px}
.yo small{display:block;opacity:.6;font-size:11px;text-transform:capitalize}.side-f a{color:var(--sideink)}
.main{flex:1;min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:16px 26px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:5}
.top h1{font-size:19px;margin:0;flex:1;font-weight:650}.top-r{display:flex;gap:8px;align-items:center}
.camp{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);color:var(--ink)}
.camp i{position:absolute;top:-5px;right:-5px;background:var(--bad);color:#fff;font:700 10px/1 system-ui;border-radius:9px;padding:3px 5px;font-style:normal}
.tema,.burger{border:1px solid var(--line);background:var(--card);color:var(--ink);width:38px;height:38px;border-radius:10px;font-size:16px;cursor:pointer}
.burger{display:none}
.cont{padding:22px 26px 60px;max-width:1280px}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.g21{grid-template-columns:2fr 1fr}.g12{grid-template-columns:1fr 2fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--sh)}
.card h2{font-size:15px;margin:0 0 12px;font-weight:650}.card h3{font-size:14px;margin:14px 0 6px}
.card .sub{color:var(--mut);font-size:13px;margin:-8px 0 12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:2px}
.kpi small{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.05em}.kpi b{font-size:26px;font-weight:700;letter-spacing:-.02em}.kpi em{font-style:normal;color:var(--mut);font-size:12.5px}
.kpi.ok b{color:var(--ok)}.kpi.warn b{color:var(--warn)}.kpi.bad b{color:var(--bad)}.kpi.pri{background:linear-gradient(135deg,#0f766e,#0d9488);color:#fff;border:0}.kpi.pri small,.kpi.pri em{color:#d1fae5}
.bar{height:9px;background:var(--line);border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#14b8a6,#0d9488);border-radius:6px}.bar.warn i{background:var(--warn)}.bar.bad i{background:var(--bad)}
table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;color:var(--mut);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}tr:last-child td{border-bottom:0}tr:hover td{background:var(--soft)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;background:var(--soft);color:var(--pri2)}.tag.ok{background:#dcfce7;color:#166534}.tag.warn{background:#fef3c7;color:#92400e}.tag.bad{background:#fee2e2;color:#991b1b}.tag.gris{background:var(--line);color:var(--mut)}
:root[data-t=dark] .tag.ok{background:#052e1a;color:#86efac}:root[data-t=dark] .tag.warn{background:#3b2a05;color:#fcd34d}:root[data-t=dark] .tag.bad{background:#3b0d0d;color:#fca5a5}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri);outline-offset:-1px}
label{display:block;font-size:12.5px;color:var(--mut);margin:10px 0 4px;font-weight:600}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.row>*{flex:1;min-width:130px}
.btn{display:inline-block;background:var(--pri);color:#fff;border:0;border-radius:10px;padding:9px 16px;font:600 14px/1.2 inherit;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--pri2)}.btn.sec{background:var(--soft);color:var(--pri2)}.btn.bad{background:var(--bad)}.btn.sm{padding:5px 11px;font-size:13px}
:root[data-t=dark] .btn{color:#042f2c}
.flash{background:var(--soft);border:1px solid var(--pri);color:var(--pri2);padding:10px 14px;border-radius:12px;margin-bottom:14px}
.kan{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px}
.kcol{background:var(--soft);border-radius:14px;padding:10px;min-height:120px}.kcol h3{margin:2px 4px 8px;font-size:13px;display:flex;justify-content:space-between}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;font-size:13.5px;display:block;color:inherit;text-decoration:none}.kcard:hover{border-color:var(--pri)}
.kcard small{color:var(--mut);display:block}
.chat{display:flex;flex-direction:column;gap:8px;max-height:56vh;overflow:auto;padding:4px}
.msg{max-width:78%;padding:8px 12px;border-radius:14px;font-size:14px;white-space:pre-wrap;word-break:break-word}.msg.in{background:var(--soft);align-self:flex-start}.msg.out{background:var(--pri);color:#fff;align-self:flex-end}
:root[data-t=dark] .msg.out{color:#042f2c}.msg small{display:block;opacity:.7;font-size:11px;margin-top:3px}
.inbox{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:start}
.lista a.it{display:block;padding:11px 12px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}.lista a.it.on,.lista a.it:hover{background:var(--soft)}.lista .nl{float:right;background:var(--pri);color:#fff;border-radius:10px;padding:0 7px;font-size:12px}
.vacio{color:var(--mut);padding:20px;text-align:center}
.mini{font-size:12.5px;color:var(--mut)}
.slots{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.slot{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}.slot b{display:block;font-size:17px}
@media(max-width:1000px){.g4,.g5{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.g21,.g12{grid-template-columns:1fr}.slots{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.side{position:fixed;left:-250px;z-index:20;transition:left .2s;height:100vh}body.nav .side{left:0}.burger{display:block}.cont{padding:14px 14px 60px}.top{padding:12px 14px}
.g2,.g3,.g4,.g5{grid-template-columns:1fr 1fr}.inbox{grid-template-columns:1fr}.slots{grid-template-columns:repeat(2,1fr)}.msg{max-width:92%}.kpi b{font-size:22px}}
@media(max-width:480px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}
/* login */
.entrar{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 20% 0,#0d9488 0,transparent 60%),radial-gradient(900px 500px at 100% 100%,#0369a1 0,transparent 55%),#061515;padding:20px}
.entrar form{width:100%;max-width:380px;background:rgba(255,255,255,.09);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.22);border-radius:22px;padding:30px;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.entrar h1{margin:0 0 4px;font-size:24px}.entrar p{margin:0 0 14px;opacity:.75}.entrar label{color:#c7dcdc}
.entrar input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}.entrar .btn{width:100%;margin-top:16px;padding:12px;background:#14b8a6;color:#042f2c}
.entrar .err{background:rgba(220,38,38,.25);border:1px solid rgba(248,113,113,.6);padding:8px 12px;border-radius:10px;margin-bottom:6px}

/* bandeja dividida: lista de chats a la izquierda, chat a la derecha */
.inbox{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:start}
.inbox .col-lista{position:sticky;top:78px}
.inbox .col-lista .lista{max-height:calc(100vh - 290px);overflow:auto}
.inbox .lista a.it{padding:9px 12px}.inbox .lista a.it b{font-size:14px}.inbox .tags{margin:3px 0 2px;line-height:1.9}.inbox .tag{font-size:11px;padding:1px 7px}
.inbox .ult{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox .chat{max-height:46vh}
.volver{display:none;margin-bottom:10px}
.contacto.caliente{border-color:var(--bad);box-shadow:0 0 0 2px rgba(220,38,38,.25)}
.aviso-caliente{background:#fee2e2;color:#991b1b;border-radius:10px;padding:8px 12px;font-weight:650;margin-bottom:12px}
:root[data-t=dark] .aviso-caliente{background:#3b0d0d;color:#fca5a5}
@media(max-width:1000px){.inbox{grid-template-columns:280px 1fr}}
@media(max-width:760px){.inbox{grid-template-columns:1fr}.inbox .col-lista{position:static}.inbox.abierto .col-lista{display:none}.inbox.abierto .volver{display:block}.inbox .col-lista .lista{max-height:none}}
.inbox>*{min-width:0}
.col-chat img,.col-chat audio,.col-chat video{max-width:100%}
.msg audio{min-width:0 !important;width:100%}
.col-chat .contacto .btn{white-space:nowrap}
@media(max-width:1200px){.col-chat .grid.g2{grid-template-columns:1fr}}
@media(max-width:1200px){.inbox{grid-template-columns:270px 1fr}}

/* ===================== iPhone / celular (v6) ===================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
a,button,.btn,select,input,label{touch-action:manipulation}
.top{padding-top:max(16px,env(safe-area-inset-top))}
.side-f{padding-bottom:max(2px,env(safe-area-inset-bottom))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:9px 18px}.btn.sm{min-height:36px;padding:6px 13px}
@media(max-width:760px){
  /* menú lateral tipo cajón, con fondo oscuro y cierre al tocar fuera */
  .side{width:min(84vw,310px);left:-110%;box-shadow:none;padding-top:max(16px,env(safe-area-inset-top));overscroll-behavior:contain}
  body.nav .side{left:0;box-shadow:8px 0 40px rgba(0,0,0,.45)}
  body.nav::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:19}
  body.nav{overflow:hidden}
  .side nav a{padding:13px 12px;font-size:15.5px}
  .top{padding:max(10px,env(safe-area-inset-top)) 14px 10px;gap:10px}
  .top h1{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .burger,.tema,.camp{width:44px;height:44px;border-radius:12px;font-size:18px}
  .cont{padding:14px 14px calc(78px + env(safe-area-inset-bottom));max-width:100%}
  /* textos de 16 px: iOS no hace zoom al tocar un campo */
  input,select,textarea{font-size:16px;min-height:46px;border-radius:12px;padding:10px 12px}
  textarea{min-height:92px}
  input[type=checkbox],input[type=radio]{min-height:0;width:auto}
  input[type=file]{padding:9px 10px;min-height:46px}
  .btn{min-height:46px;font-size:15.5px;padding:10px 18px;border-radius:12px}.btn.sm{min-height:42px;font-size:14.5px;padding:8px 14px}
  .row>*{min-width:0;flex:1 1 100%}
  /* tarjetas y tablas: la tabla se desplaza dentro de su tarjeta, no la página */
  .card{padding:14px;border-radius:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px}
  table{font-size:13.5px}th,td{padding:9px 7px}
  .scroll table{min-width:520px}
  .grid:has(>.kpi){grid-template-columns:1fr 1fr!important;gap:10px}
  .kpi{padding:12px 13px;border-radius:14px}.kpi b{font-size:20px}.kpi small{font-size:11px}
  .grid.g2,.grid.g3,.grid.g21,.grid.g12{grid-template-columns:1fr!important}
  .msg{max-width:90%}
  .tag{font-size:12px}
  .flash{font-size:14.5px}
  /* bandeja: lista o chat, una a la vez */
  .inbox{grid-template-columns:1fr!important}
  .inbox .col-lista{position:static}
  .inbox.abierto .col-lista{display:none}
  .inbox.abierto .volver{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
  .inbox .col-lista .lista{max-height:none}
  .inbox .lista a.it{padding:13px 14px}
  .inbox .chat{max-height:none;overflow:visible}
  .col-chat .contacto .btn{flex:1}
  .slots{grid-template-columns:repeat(2,1fr)}
  .kan{grid-template-columns:repeat(5,82vw);scroll-snap-type:x mandatory}.kcol{scroll-snap-align:start}
}
@media(max-width:340px){.grid:has(>.kpi){grid-template-columns:1fr!important}}
/* login */
@media(max-width:760px){.entrar{padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom))}.entrar form{padding:24px;border-radius:20px}.entrar input{font-size:16px}}
@media(max-width:760px){td a:not(.btn){display:inline-block;padding:5px 0}.inbox>*{min-width:0}}

/* ===== Decoración v9 del panel: transform/opacity solamente; .lite (celular modesto) apaga lo continuo ===== */
@keyframes subeP{from{opacity:0;transform:translate3d(0,14px,0)}}
@keyframes brilloP{0%,70%{transform:translate3d(-150%,0,0) skewX(-20deg)}100%{transform:translate3d(420%,0,0) skewX(-20deg)}}
.cont>*{animation:subeP .5s cubic-bezier(.2,.7,.3,1) backwards}
.cont>*:nth-child(2){animation-delay:.05s}.cont>*:nth-child(3){animation-delay:.1s}.cont>*:nth-child(4){animation-delay:.15s}.cont>*:nth-child(n+5){animation-delay:.2s}
.grid>.kpi{animation:subeP .55s cubic-bezier(.2,.7,.3,1) backwards}
.grid>.kpi:nth-child(1){animation-delay:.08s}.grid>.kpi:nth-child(2){animation-delay:.14s}.grid>.kpi:nth-child(3){animation-delay:.2s}.grid>.kpi:nth-child(4){animation-delay:.26s}.grid>.kpi:nth-child(5){animation-delay:.32s}.grid>.kpi:nth-child(n+6){animation-delay:.38s}
.kpi{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.kpi::after{content:"";position:absolute;right:-26px;bottom:-34px;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,var(--pri) 0%,transparent 70%);opacity:.09;pointer-events:none}
.kpi.pri{background:linear-gradient(135deg,#0f766e,#0d9488 60%,#14b8a6)}.kpi.pri::after{background:radial-gradient(circle,#fff 0%,transparent 70%);opacity:.14}
.kpi.pri::before{content:"";position:absolute;top:0;left:0;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translate3d(-150%,0,0) skewX(-20deg);animation:brilloP 6s ease-in-out infinite;pointer-events:none}
.side nav a{transition:background .15s ease,color .15s ease,transform .15s ease}.side nav a.on{box-shadow:inset 3px 0 0 #2dd4bf}
.btn{transition:transform .12s ease,filter .12s ease,background .15s ease}.btn:active{transform:scale(.97)}
tbody tr{transition:background .12s ease}
@media(hover:hover){.kpi:hover{transform:translate3d(0,-3px,0);box-shadow:0 14px 30px -16px rgba(0,0,0,.35)}.side nav a:hover{transform:translate3d(3px,0,0)}.btn:hover{filter:brightness(1.07);transform:translate3d(0,-1px,0)}tbody tr:hover{background:color-mix(in srgb,var(--pri) 6%,transparent)}}
.cont:has(.inbox) *,.cont:has(.inbox) *::before,.cont:has(.inbox) *::after{animation:none!important}
.lite .cont>*,.lite .grid>.kpi{animation-duration:.25s;animation-delay:0s!important}.lite .kpi.pri::before,.lite .kpi::after{display:none}.lite .side nav a:hover,.lite .kpi:hover{transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* v10: secciones del menú */
.nav-sec{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.5;padding:16px 14px 5px}.nav-sec:first-child{padding-top:4px}