/* admin-console/estilos.css
 *
 * TODO EL CSS DE LA CONSOLA, SACADO DE index.html EL 26-ago-2026 (FRENTE 1, rediseno).
 *
 * POR QUE VIVE AQUI Y NO EN EL <style> DEL HTML. admin-console/index.html tiene su propio
 * trinquete de tamano (tests/adminConsolaGuardian.test.ts, bloque d): un tope de lineas que
 * solo baja sacando codigo, nunca subiendo el techo. El fichero estaba a 1 linea de su tope
 * de 1.600 y la Fase 1 del plan (docs/planes/REDISENO-PANEL-ADMIN-2026-08-26.md) necesitaba
 * anadir reglas para el suelo tactil de 44px y el suelo tipografico de 12px en las CUATRO
 * vistas. Sacar el CSS entero -verbatim, sin reescribirlo- es la misma jugada que ya se hizo
 * con altaNegocio.js/flota.js/soporte.js/visor.js para el JavaScript.
 *
 * LOS TRES BLOQUES QUE SIGUEN SON HISTORIA, MOVIDOS TAL CUAL (ni una regla reescrita):
 *   1. El CSS original del panel (selects, tabla, tarjetas de metricas, visor de soporte).
 *   2. Una primera pasada de rediseno (REDISENO UX): escala de espaciado, tabla mas legible,
 *      acordeon de Crear en movil. Gana por orden de cascada sobre el bloque 1.
 *   3. SISTEMA VISUAL v2: una paleta de neutros mas fria, la que esta ACTIVA hoy en casi todo
 *      (gana por orden de cascada sobre 1 y 2). Incluye los estilos de Soporte/Flota/Rastro.
 *
 * Y AL FINAL, la capa de la Fase 1 y la Fase 5 (ver mas abajo): la unica que este frente
 * escribio de cero. Gana por orden de cascada sobre las tres anteriores, selector por
 * selector, sin tocar ni una linea de los tres bloques de arriba.
 */

    :root{
      --brand:#E25822; --brand-deep:#C2410C; --brand-soft:#FCE9E1;
      --ink:#1C1A17; --ink2:#4A4640; --ink3:#8A847A;
      --bg:#F4F2EE; --card:#FFFFFF; --line:#E7E2D9;
      --green:#15803d; --green-soft:#dcfce7; --red:#dc2626; --red-soft:#fee2e2;
      --r:14px; --r-sm:9px; --sh:0 10px 30px rgba(28,22,14,.08);
      --brand-rgb:226,88,34; --blue:#3B82F6; --blue-soft:#dbeafe;
    }
    *{box-sizing:border-box} html,body{margin:0}
    body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
    a{color:var(--brand-deep)}
    .hidden{display:none!important}
    /* Boot splash: visible mientras se resuelve sesión + permiso. Evita el flash de login. */
    .boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px}
    .boot .logo{width:44px;height:44px;border-radius:12px;font-size:22px}
    .boot .spin{width:22px;height:22px;border-width:3px}
    /* Header */
    .top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;background:var(--card);border-bottom:1px solid var(--line)}
    .brand{display:flex;align-items:center;gap:10px}
    .logo{width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px}
    .brand b{font-size:16px;letter-spacing:-.3px}
    .brand small{display:block;font-size:11px;color:var(--ink3);font-weight:600}
    .entorno{display:inline-block;margin-top:3px;padding:2px 8px;border-radius:999px;
      font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
    .entorno-prod{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}
    .entorno-dev{background:var(--blue-soft);color:#1E40AF;border:1px solid #93C5FD}
    .who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}
    .btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-sm);padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;transition:.12s}
    .btn:hover{border-color:var(--brand)}
    .btn[disabled]{opacity:.55;cursor:not-allowed}
    .btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
    .btn-primary:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
    .btn-sm{padding:6px 10px;font-size:12px}
    .btn-ghost{background:transparent}
    /* Layout */
    .wrap{max-width:1080px;margin:0 auto;padding:24px 22px 60px}
    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
    .pad{padding:22px}
    h1{font-size:22px;margin:0 0 4px} h2{font-size:16px;margin:0 0 14px}
    .muted{color:var(--ink3)} .sub{color:var(--ink3);font-size:13px;margin:0 0 18px}
    /* Login */
    .login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
    .login .card{width:100%;max-width:380px}
    .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
    label{font-size:12.5px;font-weight:700;color:var(--ink2)}
    input,select{font:inherit;font-size:14px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);width:100%}
    input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
    .err{background:var(--red-soft);color:var(--red);border-radius:var(--r-sm);padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:14px}
    .ok{background:var(--green-soft);color:var(--green);border-radius:var(--r-sm);padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:14px}
    /* Grid create + list */
    .cols{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
    @media (max-width:820px){.cols{grid-template-columns:1fr}}
    /* Table */
    table{width:100%;border-collapse:collapse;font-size:13px}
    th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
    th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);font-weight:800}
    tr:last-child td{border-bottom:none}
    .biz-name{font-weight:700} .biz-slug{color:var(--ink3);font-size:12px}
    .chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800}
    .chip.on{background:var(--green-soft);color:var(--green)} .chip.off{background:var(--red-soft);color:var(--red)}
    .row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
    .row-actions select{width:auto;padding:6px 8px;font-size:12px}
    .empty{padding:32px;text-align:center;color:var(--ink3)}
    .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:s .7s linear infinite;vertical-align:-2px}
    @keyframes s{to{transform:rotate(360deg)}}
    .toast{position:fixed;right:18px;bottom:18px;max-width:360px;padding:12px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;box-shadow:var(--sh);z-index:50}
    .toast.ok{background:#0f5132;color:#d1e7dd} .toast.err{background:#842029;color:#f8d7da}
    /* ── Dashboard: KPI cards + animaciones ── */
    .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:0 0 22px}
    .metric-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh);opacity:0;animation:fadeInUp .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i,0)*70ms)}
    .metric-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);font-weight:800}
    .metric-value{font-size:28px;font-weight:800;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
    .metric-sub{font-size:12px;color:var(--ink3)}
    .metric-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:6px;display:flex}
    .metric-bar > i{display:block;height:100%;background:var(--brand);transition:width .7s cubic-bezier(.22,1,.36,1)}
    .metric-bar > i.eco{background:var(--blue)}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    @keyframes slideInRight{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
    @keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
    .toast{animation:slideInRight .28s ease-out}
    .filters{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px 0}
    .fchip{border:1px solid var(--line);background:var(--card);color:var(--ink2);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;transition:.12s}
    .fchip:hover{border-color:var(--brand)}
    .fchip.active{background:var(--brand);border-color:var(--brand);color:#fff}
    tbody tr[data-id]{animation:fadeInUp .35s ease both;transition:background .12s,box-shadow .12s}
    tbody tr[data-id]:hover{background:rgba(var(--brand-rgb),.04);box-shadow:inset 3px 0 0 var(--brand)}
    tr.updating{opacity:.5;pointer-events:none}
    .chip.bill{background:var(--line);color:var(--ink2);font-weight:700}
    .chip.bill.trial{background:var(--blue-soft);color:var(--blue)}
    .sk{height:14px;border-radius:5px;background:linear-gradient(90deg,var(--line) 25%,#f0ece4 37%,var(--line) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}
    .risk-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
    .risk-badge.green{background:var(--green-soft);color:var(--green)}
    .risk-badge.yellow{background:#fef3c7;color:#d97706}
    .risk-badge.red{background:var(--red-soft);color:var(--red)}
    .risk-badge[title]{cursor:help}
    .billing-control{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:5px}
    .billing-control select,.billing-control input[type="date"]{width:auto;padding:4px 8px;font-size:11.5px}
    .resetBtn{white-space:nowrap}
    .viewBtn{border-color:var(--brand);color:var(--brand-deep);font-weight:800}
    /* ── Visor de soporte (read-only) ── */
    .viewer-overlay{position:fixed;inset:0;background:rgba(28,22,14,.55);z-index:60;display:flex;align-items:stretch;justify-content:center;padding:24px;animation:fadeInUp .2s ease}
    .viewer{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);width:100%;max-width:1000px;display:flex;flex-direction:column;overflow:hidden;max-height:100%}
    .viewer-banner{background:var(--brand);color:#fff;padding:9px 16px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .viewer-banner .lock{font-size:14px}
    .viewer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
    .viewer-head h3{margin:0;font-size:17px}
    .viewer-head .meta{font-size:11.5px;color:var(--ink3);margin-top:2px}
    .viewer-tabs{display:flex;gap:2px;padding:8px 14px 0;border-bottom:1px solid var(--line);overflow-x:auto}
    .vtab{border:none;background:transparent;color:var(--ink2);padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
    .vtab:hover{color:var(--brand)}
    .vtab.active{color:var(--brand);border-bottom-color:var(--brand)}
    .viewer-body{padding:16px 18px;overflow:auto}
    .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
    .stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px}
    .stat .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);font-weight:800}
    .stat .v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:3px}
    .vtable{width:100%;border-collapse:collapse;font-size:12.5px}
    .vtable th,.vtable td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line)}
    .vtable th{font-size:10.5px;text-transform:uppercase;color:var(--ink3);font-weight:800;position:sticky;top:0;background:var(--card)}
    .vtable tr:hover td{background:rgba(var(--brand-rgb),.03)}
    .tag{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700;background:var(--line);color:var(--ink2)}
    .tag.warn{background:#fef3c7;color:#d97706}.tag.bad{background:var(--red-soft);color:var(--red)}.tag.good{background:var(--green-soft);color:var(--green)}
    #search{padding-left:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%238A847A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='6.5' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}
    *:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
    /* ============================================================
       REDISEÑO UX (Nielsen + Vercel guidelines): descomprimir,
       jerarquía y responsive mobile. Brand-preserving (solo variables
       de marca ya definidas). Reglas DESPUÉS de las actuales → ganan por orden.
       ============================================================ */
    :root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px}
    .wrap{max-width:1280px;padding-bottom:max(60px,env(safe-area-inset-bottom))}
    .cols{grid-template-columns:300px minmax(0,1fr);gap:var(--sp-5)}
    /* Ritmo vertical de la tabla: celdas CENTRADAS (no top) → sin vacío blanco
       cuando una columna es más alta que las demás. */
    th,td{padding:13px 14px;vertical-align:middle}
    thead th{padding-top:11px;padding-bottom:11px;vertical-align:bottom;background:var(--bg)}
    td{font-variant-numeric:tabular-nums}
    /* Menos blanco: header tibio + zebra cálida + separador suave entre filas */
    tbody tr[data-id]:nth-child(even) td{background:rgba(var(--brand-rgb),.03)}
    tbody tr[data-id] td{border-bottom:1px solid var(--line)}
    .biz-name{font-weight:700;font-size:15px;line-height:1.25}
    .biz-slug{display:inline-block;margin-top:3px}
    td[data-col="Dueño"]{max-width:230px}
    td[data-col="Dueño"] .biz-name,td[data-col="Dueño"] .biz-slug{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
    /* PLAN: select legible con caret de marca */
    .planSel{-webkit-appearance:none;appearance:none;width:auto;min-width:124px;max-width:160px;padding:9px 30px 9px 11px;font-size:12.5px;font-weight:700;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238A847A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:border-color .12s,box-shadow .12s}
    .planSel:hover{border-color:var(--brand)}
    /* ESTADO: chip de salud arriba + bloque Cobro etiquetado */
    td[data-col="Estado"] .state-stack{display:flex;flex-direction:column;gap:8px;min-width:240px}
    .state-stack>.chip{align-self:flex-start}
    /* Bloque "Cobro" como mini-panel crema (no blanco), 2 columnas compactas. */
    .billing-control{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end;margin-top:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px}
    .bc-field{display:flex;flex-direction:column;gap:4px;min-width:0}
    .bc-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);font-weight:800}
    .billingSel{-webkit-appearance:none;appearance:none;width:100%;min-width:0;padding:7px 24px 7px 9px;font-size:12px;font-weight:700;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238A847A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
    .billing-control input[type="date"]{width:100%;min-width:0;padding:7px 9px;font-size:12px;font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
    .planSel:focus-visible,.billingSel:focus-visible,.billing-control input:focus-visible,.row-actions .btn:focus-visible,.act-more>summary:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
    /* Miembros · Riesgo */
    td[data-col="Miembros"]{text-align:center;white-space:nowrap}
    td[data-col="Miembros"] .mc-num{font-size:16px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
    td[data-col="Miembros"] .mc-num small{display:block;margin-top:2px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3)}
    .risk-badge{white-space:nowrap}
    td[data-col="Alta"]{white-space:nowrap;color:var(--ink3)}
    /* ACCIONES: 2 primarias + menú ⋯ */
    .row-actions{display:flex;gap:var(--sp-2);align-items:center;justify-content:flex-end;flex-wrap:nowrap}
    .row-actions .btn-sm{padding:8px 12px;min-height:36px;white-space:nowrap}
    .toggleBtn[data-suspend="1"]{border-color:var(--red);color:var(--red)}
    .toggleBtn[data-suspend="1"]:hover{background:var(--red-soft)}
    .act-more{position:relative}
    .act-more>summary{list-style:none;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:18px;line-height:1;color:var(--ink2);user-select:none;transition:border-color .12s,background .12s}
    .act-more>summary::-webkit-details-marker{display:none}
    .act-more>summary:hover{border-color:var(--brand);color:var(--brand-deep)}
    .act-more[open]>summary{border-color:var(--brand);background:var(--brand-soft)}
    .act-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:212px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh);padding:6px;display:flex;flex-direction:column;gap:2px}
    .act-menu .btn{width:100%;justify-content:flex-start;text-align:left;border:none;background:transparent;padding:10px 12px;font-weight:600;border-radius:7px}
    .act-menu .btn:hover:not([disabled]){background:var(--bg)}
    .act-menu .resetBtn{color:var(--brand-deep)}
    .act-menu .btn[disabled]{opacity:.45;cursor:not-allowed}
    @media (prefers-reduced-motion:no-preference){.act-more[open] .act-menu{animation:fadeInUp .14s ease both}}
    /* Feedback de guardado de fila (conecta tr.updating) */
    tr.updating{opacity:.5;pointer-events:none;transition:opacity .12s}
    @keyframes okFlash{0%{background:var(--green-soft)}100%{background:transparent}}
    td.saved{animation:okFlash 1s ease}
    .secret-link{word-break:break-all;font-family:ui-monospace,monospace;font-size:11px;padding:var(--sp-2);background:var(--bg);border-radius:var(--r-sm)}
    .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    #toastRegion{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:70}
    #toastRegion .toast{position:static}
    /* Transiciones acotadas + touch */
    .btn{transition:border-color .12s,background .12s,color .12s,transform .08s}
    .fchip{transition:border-color .12s,background .12s,color .12s}
    .btn:active{transform:translateY(1px)}
    .btn,.fchip,.planSel,.billingSel,.billDateInput,select,input,.vtab,.act-more>summary{touch-action:manipulation}
    /* Form Crear: acordeón en mobile, card normal en desktop */
    @media (max-width:820px){
      .cols{display:flex;flex-direction:column;gap:var(--sp-4);align-items:stretch}
      .cols>#createPanel{order:2}
      .cols>section.card:last-child{order:1}
      #createPanel{padding:0}
      #createPanel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);padding:16px 18px;min-height:52px;font-size:15px;font-weight:800;color:#fff;background:var(--brand);border-radius:var(--r)}
      #createPanel[open]>summary{border-radius:var(--r) var(--r) 0 0}
      #createPanel>summary::-webkit-details-marker{display:none}
      #createPanel>summary::after{content:'+';margin-left:auto;font-size:22px;line-height:1}
      #createPanel .create-inner{padding:18px}
    }
    @media (min-width:821px){
      #createPanel>summary{display:none}
      #createPanel .create-inner{padding:22px}
    }
    /* KPIs + toolbar responsive */
    @media (max-width:640px){
      .metrics{grid-template-columns:1fr 1fr;gap:10px}
      .metric-card{padding:13px}
      .metric-value{font-size:24px}
      .metrics .metric-card:nth-child(5){grid-column:1 / -1}
      .filters{padding:12px 16px;gap:var(--sp-2);flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
      .fchip{scroll-snap-align:start;flex:0 0 auto}
      #list{padding:0 12px 12px}
      #toastRegion{left:12px;right:12px;bottom:12px}
    }
    @media (max-width:420px){.metrics{grid-template-columns:1fr}}
    /* TABLA -> TARJETAS. EL CORTE SUBE DE 640 A 820 PX, Y ES UNA MEDICION, NO UN GUSTO.

       Entre 641 y 820 px la tabla NI ENTRABA NI SE APILABA: se quedaba de tabla dentro de un
       contenedor mas estrecho que ella y habia que ARRASTRARLA de lado. Medido el 26-ago-2026 a
       768 px: tabla de 720 px dentro de un contenedor de 703, o sea 17 px de arrastre. Y cae
       justo en tamanos de tablet, que es el equipo de esta casa.

       EL CORTE ESTA EN 940 Y ES UNA MEDICION. Con el formulario de alta fuera de la columna (esta
       en su propia vista desde el 26-ago), la lista se queda con el ancho entero: 1.230 px a 1280 en
       vez de 959. Con las filas REALES la tabla pide unos 882 px, asi que por encima de 900 entra
       con holgura y por debajo pasa a tarjetas. Medido a catorce anchos con Chromium: a 920 todavia
       quedaban 12 px, asi que el corte subio de 900 a 940. Cero arrastre en
       todos. Antes de sacar el alta, este mismo corte en 820 dejaba 32 px de arrastre a 900 y 72 a
       860, porque la tabla competia por el ancho con 18 campos de formulario. */
    @media (max-width:940px){
      #list table,#list thead,#list tbody,#list tr,#list td{display:block;width:100%}
      #list thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
      #list tr[data-id]{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;margin:0 0 14px;display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:start}
      #list tr[data-id]:hover{box-shadow:var(--sh);background:var(--card)}
      #list td{border:none !important;padding:0}
      #list td[data-col="Negocio"]{grid-column:1 / -1;border-bottom:1px solid var(--line) !important;padding-bottom:12px}
      #list td[data-col="Negocio"] .biz-name{font-size:16px}
      #list td[data-col="Dueño"]{grid-column:1 / -1;max-width:none}
      #list td[data-col="Dueño"] .biz-name,#list td[data-col="Dueño"] .biz-slug{white-space:normal;word-break:break-word}
      #list td[data-col="Plan"],#list td[data-col="Estado"],#list td[data-col="Cobro"],#list td[data-col="Miembros"],#list td[data-col="Alta"]{grid-column:1 / -1;display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line) !important}
      #list td[data-col]::before{content:attr(data-col);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3)}
      #list td[data-col="Negocio"]::before,#list td[data-col="Dueño"]::before,#list td[data-col="Acciones"]::before{display:none}
      #list td[data-col="Miembros"]{text-align:left !important}
      #list td[data-col="Miembros"] .mc-num{font-size:14px}
      #list td[data-col="Estado"] .state-stack{min-width:0}
      #list .planSel,#list .billingSel,#list .billDateInput{max-width:none;width:100%;min-height:44px}
      #list td[data-col="Acciones"]{grid-column:1 / -1;border-top:1px solid var(--line) !important;padding-top:12px}
      #list .row-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--sp-2);justify-content:stretch}
      #list .row-actions .btn-sm{min-height:44px;justify-content:center}
      #list .act-more>summary{width:44px;height:44px}
      #list .act-menu{right:0;min-width:220px}
      .btn-sm{padding:11px 14px;min-height:44px}
      .fchip{padding:10px 14px;min-height:40px}
    }
    /* reduce-motion: cubrir lo nuevo */
    @media (prefers-reduced-motion:reduce){
      .metric-card,tbody tr[data-id],.toast,.act-menu,td.saved{animation:none !important;opacity:1 !important}
      .metric-bar>i{transition:none}
      .btn:active{transform:none}
      .btn,.fchip{transition:none}
      #createPanel>summary::after{transition:none}
      .sk{animation:none}
    }

/* ============================================================
       SISTEMA VISUAL v2 — claro minimalista (registro: product).
       Superficies blancas, neutros fríos, hairlines 1px, naranja
       Omnipos como acento mínimo (acción primaria · selección · foco).
       Capa final: redefine tokens y reestructura la tabla. Gana por
       orden de cascada sobre las reglas anteriores.
   ============================================================ */
    :root{
      /* Marca — acento de uso mínimo */
      --brand:#E0582D; --brand-deep:#C2410C; --brand-ink:#C2410C; --brand-soft:#FDF1EB;
      --brand-rgb:224,88,45; --blue:#175CD3; --blue-soft:#EFF8FF;
      /* Neutros fríos */
      --bg:#F6F7F9; --card:#FFFFFF; --surface-2:#FBFCFD;
      --line:#E7E9EE; --line-2:#D9DDE3;
      --ink:#15171C; --ink2:#474D57; --ink3:#5E6573; --ink4:#9298A3;
      /* Semánticos suaves (con borde) */
      --green:#067647; --green-soft:#ECFDF3; --green-line:#A9EFC5;
      --red:#B42318; --red-soft:#FEF3F2; --red-line:#FECDCA;
      --amber:#B54708; --amber-soft:#FFFAEB; --amber-line:#FEDF89;
      /* Radios · sombras · foco · motion */
      --r:12px; --r-md:10px; --r-sm:8px; --r-xs:6px;
      --sh:0 1px 2px rgba(16,24,40,.05);
      --sh-pop:0 12px 32px -8px rgba(16,24,40,.16),0 4px 10px -4px rgba(16,24,40,.07);
      --ring:0 0 0 3px rgba(var(--brand-rgb),.20);
      --ease:cubic-bezier(.22,1,.36,1);
      /* z-index semántico */
      --z-dropdown:100; --z-sticky:200; --z-modal:400; --z-toast:500;
    }
    body{
      font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      font-size:14px; line-height:1.5; background:var(--bg); color:var(--ink);
      font-feature-settings:"cv11"; text-rendering:optimizeLegibility;
    }
    a{color:var(--brand-deep)} a:hover{text-decoration:underline}
    ::placeholder{color:var(--ink3); opacity:1}
    *:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

    /* Tipografía */
    h1{font-size:24px; line-height:1.2; font-weight:700; letter-spacing:-.02em; margin:0 0 4px}
    h2{font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0 0 14px}
    .muted{color:var(--ink3)}
    .sub{color:var(--ink3); font-size:14px; margin:0 0 24px; max-width:70ch}

    /* Header */
    .top{padding:13px 24px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:var(--z-sticky)}
    .logo{width:32px; height:32px; border-radius:8px; font-size:17px; box-shadow:var(--sh)}
    .brand b{font-size:15px; letter-spacing:-.02em} .brand small{font-weight:500; color:var(--ink3)}
    .who{gap:12px; color:var(--ink2)}

    /* Botones */
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); border-radius:var(--r-sm); padding:9px 14px; font-size:13px; font-weight:600; transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease); white-space:nowrap}
    .btn:hover{background:var(--surface-2); border-color:var(--ink4)}
    .btn-primary{background:var(--brand-deep); border-color:var(--brand-deep); color:#fff}
    .btn-primary:hover{background:#9A3412; border-color:#9A3412}
    .btn-sm{padding:7px 11px; font-size:12.5px}
    .btn-ghost{background:transparent; border-color:transparent; color:var(--ink2)}
    .btn-ghost:hover{background:var(--surface-2); border-color:var(--line)}

    /* Layout · cards · inputs */
    .wrap{max-width:1280px; padding:28px 24px max(64px,env(safe-area-inset-bottom))}
    .card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh)}
    .pad{padding:20px}
    .cols{grid-template-columns:240px minmax(0,1fr); gap:16px}
    label{font-size:13px; font-weight:600; color:var(--ink2)}
    input,select{font-size:14px; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--card); color:var(--ink); transition:border-color .15s,box-shadow .15s}
    input:hover,select:hover{border-color:var(--ink4)}
    input:focus,select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.32)}
    .err{background:var(--red-soft); color:var(--red); border:1px solid var(--red-line); font-weight:500}
    .ok{background:var(--green-soft); color:var(--green); border:1px solid var(--green-line); font-weight:500}
    .login,.boot{background:var(--bg)}

    /* KPIs — sin entrada escalonada (product: no orchestrated load) */
    .metrics{grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:0 0 24px}
    .metric-card{opacity:1; animation:none; padding:16px 18px; gap:7px; border:1px solid var(--line); box-shadow:var(--sh); border-radius:var(--r)}
    .metric-card:hover{border-color:var(--line-2)}
    .metric-label{font-size:11px; letter-spacing:.04em; color:var(--ink3); font-weight:600}
    .metric-value{font-size:28px; font-weight:700; letter-spacing:-.02em; color:var(--ink)}
    .metric-sub{font-size:12.5px; color:var(--ink3)} .metric-sub b{color:var(--ink2); font-weight:600}
    .metric-bar{height:6px; background:var(--line); margin-top:8px}
    .metric-bar>i{background:var(--brand)} .metric-bar>i.eco{background:var(--blue)}

    /* Toolbar · búsqueda · filtros */
    #search{padding-left:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%235E6573' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='6.5' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E"); background-position:13px center}
    .filters{padding:14px 20px 4px; gap:8px}
    .fchip{border:1px solid var(--line-2); background:var(--card); color:var(--ink2); padding:6px 13px; font-size:12.5px; font-weight:600; transition:.15s var(--ease)}
    .fchip:hover{border-color:var(--ink4); background:var(--surface-2)}
    .fchip.active{background:var(--brand-deep); border-color:var(--brand-deep); color:#fff}

    /* Tabla */
    #list{padding:4px 8px 8px; overflow-x:auto; -webkit-overflow-scrolling:touch}
    /* EL ANCHO MINIMO SOLO APLICA CUANDO DE VERDAD ES UNA TABLA. Sin el media, este min-width
       sobrevivia al modo tarjeta -las celdas ya eran bloques pero la tabla seguia midiendo 720- y
       la lista arrastraba 17 px de lado a 768 px. Es el mismo rojo que el corte de 820 viene a
       matar, colandose por la cascada: la regla de aqui va DESPUES en el fichero, asi que le ganaba
       a cualquier min-width:0 escrito dentro del bloque de tarjetas. Medido el 26-ago-2026. */
    @media (min-width:941px){ #list>table{min-width:720px} }
    thead th{padding:10px 10px; font-size:11px; letter-spacing:.04em; color:var(--ink3); font-weight:600; border-bottom:1px solid var(--line); vertical-align:bottom; white-space:nowrap}
    tbody td{padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
    tbody tr:last-child td{border-bottom:none}
    tbody tr[data-id]{animation:none}
    /* Menos blanco: zebra cálida + hover de marca (rompe la plancha blanca). */
    tbody tr[data-id]:nth-child(even) td{background:var(--surface-2)}
    tbody tr[data-id]:hover td{background:rgba(var(--brand-rgb),.06)}
    th.col-num,td.col-num{text-align:center; white-space:nowrap}
    th.col-act,td.col-act{text-align:right}
    .biz-name{font-weight:600; font-size:14.5px; line-height:1.3; color:var(--ink)}
    .biz-slug{display:inline-block; margin-top:4px; color:var(--ink3); font-size:12px}
    .owner{margin-top:9px; font-size:12.5px; color:var(--ink2); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px}
    .owner-sub{font-size:11.5px; color:var(--ink3); margin-top:1px}
    /* CUENTA UNIDA (multinegocio): los negocios del mismo dueno van juntos, con franja y pastilla,
       para que se vea que resetear una clave o cambiar un correo los toca a TODOS. */
    .linked-chip{display:inline-block; margin-top:7px; font-size:11px; font-weight:800; letter-spacing:.01em;
      padding:2px 9px; border-radius:999px; background:var(--brand-soft); color:var(--brand-deep); border:1px solid var(--brand)}
    #list tr.linked td[data-col="Negocio"]{border-left:3px solid var(--brand)}
    td[data-col="Negocio"]{min-width:160px; max-width:228px}

    /* Chips estado + riesgo */
    .chip{padding:3px 9px; font-size:11.5px; font-weight:600; border:1px solid transparent}
    .chip.on{background:var(--green-soft); color:var(--green); border-color:var(--green-line)}
    .chip.off{background:var(--red-soft); color:var(--red); border-color:var(--red-line)}
    td[data-col="Estado"] .state-stack{display:flex; flex-direction:column; gap:10px; min-width:172px; align-items:flex-start}
    td[data-col="Estado"] .state-stack .billing-control{width:100%}
    .risk-badge{padding:2px 8px; font-size:10.5px; font-weight:700; letter-spacing:.03em; border:1px solid transparent; white-space:nowrap}
    .risk-badge.green{background:var(--green-soft); color:var(--green); border-color:var(--green-line)}
    .risk-badge.yellow{background:var(--amber-soft); color:var(--amber); border-color:var(--amber-line)}
    .risk-badge.red{background:var(--red-soft); color:var(--red); border-color:var(--red-line)}

    /* Plan select */
    .planSel{appearance:none; -webkit-appearance:none; min-width:108px; max-width:148px; padding:8px 30px 8px 11px; font-size:12.5px; font-weight:600; color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-sm); background-color:var(--card); cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235E6573' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; transition:border-color .15s,box-shadow .15s}
    .planSel:hover{border-color:var(--ink4)}

    /* Cobro — columna propia */
    td[data-col="Cobro"]{min-width:138px}
    .billing-control{display:flex; flex-direction:column; gap:8px; min-width:128px; max-width:162px; margin-top:0; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 9px}
    .bc-field{display:flex; flex-direction:column; gap:4px}
    .bc-lbl{font-size:10.5px; letter-spacing:0; text-transform:none; color:var(--ink3); font-weight:600}
    .billingSel{appearance:none; -webkit-appearance:none; width:100%; padding:7px 28px 7px 10px; font-size:12px; font-weight:600; color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-sm); background-color:var(--card); cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235E6573' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center}
    .billingSel:hover{border-color:var(--ink4)}
    .billing-control input[type="date"],.billDateInput{width:100%; padding:7px 10px; font-size:12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--card); color:var(--ink)}
    .billDateInput:hover{border-color:var(--ink4)}

    /* Miembros · Alta */
    td[data-col="Miembros"]{text-align:center}
    td[data-col="Miembros"] .mc-num{font-size:16px; font-weight:700; color:var(--ink)}
    td[data-col="Miembros"] .mc-num small{display:block; margin-top:3px; font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink3)}
    td[data-col="Alta"]{white-space:nowrap; color:var(--ink3); font-size:12.5px}

    /* Acciones */
    .row-actions{gap:8px; justify-content:flex-end; flex-wrap:nowrap}
    .row-actions .btn-sm{min-height:34px}
    .viewBtn{border-color:var(--line-2); color:var(--ink); font-weight:600}
    .viewBtn:hover{border-color:var(--ink4); background:var(--surface-2)}
    .toggleBtn[data-suspend="1"]{color:var(--red); border-color:var(--red-line)}
    .toggleBtn[data-suspend="1"]:hover{background:var(--red-soft); border-color:var(--red)}
    .act-more>summary{width:34px; height:34px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--card); color:var(--ink2)}
    .act-more>summary:hover{border-color:var(--ink4); color:var(--ink); background:var(--surface-2)}
    .act-more[open]>summary{border-color:var(--brand); background:var(--brand-soft); color:var(--brand-deep)}
    .act-menu{min-width:212px; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-pop); padding:6px}
    .act-menu .btn{border:none; background:transparent; padding:9px 11px; font-weight:500; border-radius:var(--r-xs)}
    .act-menu .btn:hover:not([disabled]){background:var(--surface-2)}

    /* Empty · spinner · skeleton */
    .empty{padding:40px 24px; color:var(--ink3)}
    .spin{border:2px solid var(--line-2); border-top-color:var(--brand)}
    .sk{background:linear-gradient(90deg,var(--line) 25%,#eef0f3 37%,var(--line) 63%); background-size:400% 100%; border-radius:6px}

    /* Toasts */
    #toastRegion{right:18px; bottom:18px; gap:8px; z-index:var(--z-toast)}
    .toast{min-width:240px; max-width:360px; padding:11px 14px; border-radius:var(--r-sm); font-size:13px; font-weight:500; box-shadow:var(--sh-pop); background:var(--ink); color:#fff; border:1px solid rgba(255,255,255,.08)}
    .toast.ok{background:#0B3B2E; color:#D1FADF} .toast.err{background:#511414; color:#FECDCA}

    /* Visor de soporte (modal) */
    .viewer-overlay{background:rgba(16,18,22,.5); backdrop-filter:blur(2px); z-index:var(--z-modal)}
    .viewer{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-pop)}
    .viewer-banner{background:var(--amber-soft); color:var(--amber); border-bottom:1px solid var(--amber-line); font-weight:500}
    .viewer-head h3{font-size:16px; font-weight:600; letter-spacing:-.01em}
    .vtab{font-weight:500; color:var(--ink2)} .vtab:hover{color:var(--ink)}
    .vtab.active{color:var(--brand-deep); border-bottom-color:var(--brand); font-weight:600}
    .stat{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm)}
    .stat .l{color:var(--ink3); font-weight:600; letter-spacing:.03em}
    .stat .v{font-weight:700; letter-spacing:-.02em}
    .vtable th{color:var(--ink3); font-weight:600; background:var(--card)}
    .vtable tr:hover td{background:var(--surface-2)}
    .tag{font-weight:600; border:1px solid transparent}
    .tag.warn{background:var(--amber-soft); color:var(--amber); border-color:var(--amber-line)}
    .tag.bad{background:var(--red-soft); color:var(--red); border-color:var(--red-line)}
    .tag.good{background:var(--green-soft); color:var(--green); border-color:var(--green-line)}
    .secret-link{font-size:11.5px; border:1px solid var(--line); background:var(--surface-2)}
    /* Formulario de alta: grupos, opciones en tarjeta y la casilla de confirmacion de moneda. */
    .alta-grupo{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;margin:0 0 14px}
    .alta-grupo legend{font-size:12.5px;font-weight:800;color:var(--ink2);padding:0 6px}
    .alta-nota{margin:0 0 8px;font-size:12px;color:var(--ink3);line-height:1.4}
    .alta-ops{display:flex;flex-direction:column;gap:8px}
    .alta-op{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 10px;cursor:pointer}
    .alta-op:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
    .alta-op input,.alta-check input{width:auto;flex:none;margin-top:3px;accent-color:var(--brand)}
    .alta-op b{display:block;font-size:13px;color:var(--ink)}
    .alta-op small{display:block;font-size:11.5px;color:var(--ink3);margin-top:1px}
    .alta-resumen{margin:12px 0 10px;font-size:12.5px;line-height:1.5;color:var(--ink2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px}
    .alta-check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer}
    .alta-check.falta{color:var(--red)}
    .clave-provisional{word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;font-weight:700;letter-spacing:.08em;text-align:center;padding:14px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm)}

    /* Create panel — acordeón mobile */
    @media (max-width:820px){
      #createPanel>summary{font-weight:600; background:var(--brand)}
      #createPanel[open]>summary::after{content:'\2212'}
    }

    /* Mobile: tarjetas (columnas v2) */
    @media (max-width:640px){
      .wrap{padding:20px 14px 48px}
      .metrics{grid-template-columns:1fr 1fr; gap:10px}
      #list{overflow-x:visible}
      #list>table{min-width:0}
      .fchip{min-height:44px}
      .btn-primary{min-height:44px}
      #list tr[data-id]{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh)}
      #list tr[data-id]:hover{background:var(--card)}
      #list td[data-col="Negocio"]{border-bottom:1px solid var(--line) !important}
      #list td[data-col="Negocio"] .owner{max-width:none; white-space:normal; word-break:break-word}
      #list td[data-col="Plan"],#list td[data-col="Estado"],#list td[data-col="Cobro"],#list td[data-col="Miembros"],#list td[data-col="Alta"]{grid-column:1 / -1; display:grid; grid-template-columns:96px 1fr; align-items:start; gap:10px; padding:10px 0; border-top:1px solid var(--line) !important}
      #list td[data-col]::before{content:attr(data-col); font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink3); padding-top:6px}
      #list td[data-col="Negocio"]::before,#list td[data-col="Acciones"]::before{display:none}
      #list td.col-num{text-align:left !important}
      #list .billing-control{max-width:none}
      #list .planSel,#list .billingSel,#list .billDateInput{max-width:none; width:100%; min-height:44px}
    }

    /* Respeto a reduce-motion */
    @media (prefers-reduced-motion:reduce){
      .metric-bar>i{transition:none}
    }

    /* ── Tabs Negocios / Soporte ── */
    .adm-tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--line)}
    .adm-tab{border:none;background:none;padding:10px 4px;margin-right:18px;font-size:15px;font-weight:700;color:var(--ink3);cursor:pointer;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:8px}
    .adm-tab:hover{color:var(--ink)}
    .adm-tab.active{color:var(--brand);border-bottom-color:var(--brand)}
    .adm-tab-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center}

    /* ── Bandeja de soporte ── */
    .sup-layout{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:16px;align-items:start}
    .sup-list{max-height:70vh;overflow-y:auto;display:flex;flex-direction:column}
    .sup-conv{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:12px 14px;border:none;border-bottom:1px solid var(--line);background:var(--card);cursor:pointer;transition:.12s}
    .sup-conv:hover{background:var(--bg)}
    .sup-conv.active{background:var(--brand-soft)}
    .sup-conv-top{display:flex;align-items:center;gap:8px}
    .sup-conv-subject{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .sup-conv-org{font-size:12px;color:var(--ink2)}
    .sup-conv-prev{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .sup-conv-foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
    .sup-conv-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
    .sup-thread-card{display:flex;flex-direction:column;min-height:420px;max-height:70vh}
    .sup-thread-empty{padding:48px 24px;text-align:center;color:var(--ink3)}
    .sup-thread-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
    .sup-thread-head h3{margin:0;font-size:15px}
    .sup-thread-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
    .sup-row{display:flex}
    .sup-row.agent{justify-content:flex-end}
    .sup-row.customer{justify-content:flex-start}
    .sup-row.system{justify-content:center}
    .sup-bubble{max-width:78%;padding:8px 12px;border-radius:13px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
    .sup-row.customer .sup-bubble{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
    .sup-row.agent .sup-bubble{background:var(--brand);color:#fff;border-bottom-right-radius:4px}
    .sup-row.system .sup-bubble{background:transparent;color:var(--ink3);font-size:12px;text-align:center}
    .sup-bubble-name{font-size:10.5px;font-weight:800;color:var(--ink3);margin-bottom:2px}
    .sup-bubble-time{font-size:10px;opacity:.7;margin-top:3px;text-align:right}
    .sup-composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);align-items:flex-end}
    .sup-composer textarea{flex:1;resize:vertical;min-height:42px;max-height:140px;font-family:inherit}
    .sup-att-chip{display:flex;align-items:center;gap:8px;margin:0 12px;padding:6px 10px;background:var(--bg2,#f1f5f9);border:1px solid var(--line);border-radius:8px;font-size:12px}
    .sup-att-img{display:block;margin-bottom:6px;cursor:zoom-in}
    .sup-lightbox{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;padding:24px}
    .sup-lb-img{max-width:92vw;max-height:86vh;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
    .sup-lb-close{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;border:0;cursor:pointer;font-size:18px}
    .sup-lb-close:hover{background:rgba(255,255,255,.28)}
    .sup-lb-dl{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:var(--brand,#E0582D);color:#fff;text-decoration:none;font-weight:600;font-size:14px}
    .sup-att-doc{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;padding:7px 11px;background:rgba(255,255,255,.15);border:1px solid var(--line);border-radius:8px;text-decoration:none;color:inherit;font-size:13px;font-weight:600}
    .sup-row.agent .sup-att-doc{border-color:rgba(255,255,255,.4)}
    .sup-att-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;flex:none}
    .sup-att-fn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    /* Aparición suave solo de mensajes nuevos (sin parpadeo global) */
    .sup-row{animation:supIn .18s ease}
    @keyframes supIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
    @media (prefers-reduced-motion:reduce){ .sup-row{animation:none} }
    /* Zona de soltar imágenes con feedback visual */
    .sup-composer{position:relative}
    .sup-composer.dragover{outline:2px dashed var(--brand,#E0582D);outline-offset:-4px;background:rgba(224,88,45,.06);border-radius:8px}
    .sup-drop-hint{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--brand,#E0582D);pointer-events:none}
    .sup-composer.dragover .sup-drop-hint{display:flex}
    .sup-composer.dragover textarea,.sup-composer.dragover .btn{opacity:.25}
    @media (max-width:860px){ .sup-layout{grid-template-columns:1fr} .sup-list{max-height:none} }

/* ============================================================
   FASE 1 + FASE 5 (26-ago-2026) — FRENTE 1, docs/planes/REDISENO-PANEL-ADMIN-2026-08-26.md
   Cimientos tactiles/tipograficos y movil de primera clase, en las CUATRO vistas
   (Negocios, Soporte, Flota, Rastro). Capa final: gana por orden de cascada sobre
   las tres de arriba, selector por selector. No cambia ninguna funcion: mismos
   ids, mismos manejadores, mismas llamadas al servidor.

   VALORES LITERALES A PROPOSITO (no var()): jsdom (el entorno de estas pruebas,
   ver vite.config.ts) resuelve un valor literal como "44px" pero NO resuelve
   custom properties dentro de getComputedStyle (var(--algo) llega sin evaluar).
   Medido con un experimento antes de escribir esta capa. Para que
   tests/frente1CimientosYMovil.test.ts pueda MEDIR de verdad -no leer texto-
   estas reglas usan px directos en las propiedades que la prueba comprueba.
   ============================================================ */

/* --ink3 sube de #8A847A (bloque 1) / #5E6573 (bloque 2, el que gana hoy) a
   #6E675D: es el UNICO color que cambia respecto a hoy (dueño, 26-ago-2026).
   Contraste sobre --card/--bg/--surface-2 (todos blancos o casi): 5,5:1+. */
:root{ --ink3:#6E675D; }

/* ---- Suelo tactil de 44 px, en TODO control de las cuatro vistas ----
   El objetivo tactil puede ser la ETIQUETA entera (checkbox/radio siguen
   siendo pequeños visualmente: min-height va en el envoltorio, no en el
   input). Selectores existentes, sin crear ninguno nuevo: mismas clases que
   ya emite renderList/montarFlota/montarSoporte/montarVisor/altaNegocio. */
.btn,
.fchip,
.adm-tab,
.planSel,
.billingSel,
.billing-control input[type="date"],
.billDateInput,
.alta-op,
.alta-check,
.vtab,
.sup-conv,
input:not([type="checkbox"]):not([type="radio"]),
select{
  min-height:44px;
}
.act-more>summary{ width:44px; height:44px; }
/* .row-actions .btn-sm (dos clases) tenía min-height:34px sin media query (bloque "SISTEMA VISUAL
   v2", línea ~425): esa regla es MÁS ESPECÍFICA que el ".btn" de arriba (dos clases contra una),
   así que gana por especificidad sin importar el orden de cascada. Solo se anulaba en móvil
   (#list .row-actions .btn-sm, dentro de @media max-width:640px). A 1280/820/768 -las tres celdas
   de acción de la tabla de Negocios- se quedaba en 34px. Misma especificidad aquí, y esta gana por
   ser la última declarada. */
.row-actions .btn-sm{ min-height:44px; }
/* Los radios/casillas de tipo de negocio y moneda medían 13x13: el peor caso
   del ROJO 1. Sigue siendo un control pequeño DENTRO de una etiqueta de 44px,
   pero deja de ser un objetivo minusculo por si solo. */
.alta-op input,
.alta-check input,
input[type="checkbox"],
input[type="radio"]{
  width:18px;
  height:18px;
}

/* ---- Suelo tipografico de 12 px ----
   Barrido completo de toda declaracion font-size por debajo de 12px en los
   tres bloques de arriba (grep de "font-size *: *[0-9.]+px" con valor <12,
   pegado en el informe de la tanda). El aviso de entorno pasa de 10 a 12 px
   Y gana peso: es lo que impide confundir staging con produccion. */
.brand small,
.entorno,
th,
thead th,
.chip,
.metric-label,
.risk-badge,
.billing-control select,
.viewer-head .meta,
.stat .l,
.vtable th,
.tag,
.bc-lbl,
td[data-col="Miembros"] .mc-num small,
.secret-link,
.owner-sub,
.linked-chip,
.alta-op small,
.adm-tab-badge,
.sup-bubble-name,
.sup-bubble-time{
  font-size:12px;
}
/* Aparte y NO en la lista de arriba: un selector con ::before mezclado en una
   lista con coma deja SIN APLICAR la regla entera en el motor de estilos de
   jsdom (medido con un experimento antes de escribir esto: hasta el ".entorno"
   de la misma lista se quedaba en su valor viejo). En un navegador de verdad
   esto no pasa, pero separarlo no cuesta nada y deja de depender de ese
   comportamiento para que el resto de esta capa se pueda medir. */
#list td[data-col]::before{
  font-size:12px;
}
.entorno{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  display:inline-block;
}

/* ---- Fase 5: la cabecera deja de apretarse en movil ----
   Hoy .top no declara flex-wrap (el valor por omision es nowrap): a 390px
   el conjunto marca+entorno+Salir se comprime a 105px de alto en vez de
   partirse en dos filas naturales. Con wrap, si no cabe en una fila, el
   bloque de "quien" (correo + Salir) baja a la siguiente en vez de apretar
   el de la marca. La marca necesita min-width:0 para que el "..." del
   entorno funcione dentro de un hijo flex. */
.top{ flex-wrap:wrap; row-gap:8px; }
.brand{ min-width:0; }
.brand > div{ min-width:0; }
.who{ flex-wrap:wrap; row-gap:6px; }

/* ---- Fase 5: navegacion entre las cuatro vistas, utilizable con el pulgar ----
   .adm-tabs no declaraba overflow: con "Rastro de soporte" (la pestaña mas
   larga) mas las otras tres, a 390px el texto se apretaba/partia dentro de
   cada boton en vez de quedar en una franja deslizable de una sola linea,
   que es el patron tactil estandar (mismo patron que .filters/.sup-list). */
.adm-tabs{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  flex-wrap:nowrap;
  touch-action:pan-x;
}
.adm-tab{
  white-space:nowrap;
  flex:0 0 auto;
  touch-action:manipulation;
}

/* ---- Fase 5: el formulario largo de alta, con su accion donde se llega ----
   18 campos entre nombre, tipo de negocio, dueño y moneda: en movil, crear
   el negocio queda siempre a mano sin tener que volver a subir a buscarlo. */
@media (max-width:820px){
  #createBtn{
    position:sticky;
    bottom:12px;
    z-index:5;
    box-shadow:0 6px 18px rgba(28,22,14,.18);
  }
}

@media (prefers-reduced-motion:reduce){
  .adm-tabs{ scroll-behavior:auto; }
}

    /* LA CABECERA DE LA LISTA. "Crear negocio" es la accion primaria de esta pantalla desde que el
       formulario se fue a su propia vista, asi que vive aqui y no en una columna que le robaba la
       mitad del ancho a la tabla. */
    .lista-acciones{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
    .lista-acciones .btn{min-height:44px}

    /* Las migas del alta: el camino de vuelta, siempre visible y tactil. */
    #altaView .migas{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
    #altaView .migas .btn{min-height:44px}
    #altaView #createPanel{max-width:680px}
    #altaView .create-inner{padding:22px}