/* 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}

    /* El borde del nombre editable al enfocarlo. Antes lo pintaban onfocus/onblur en linea, que la CSP
       (6-oct-2026, sin 'unsafe-inline' en script-src) bloquea; !important porque el input lleva style= en linea. */
    .biz-name-input:focus{border-color:var(--brand)!important}

/* PANEL V2 */
/* ============================================================
   PANEL DE PLATAFORMA v2, variante A "Por dueno" (admin-console/panel.html).
   Plan: docs/planes/en-curso/PANEL-PLATAFORMA-V2-POR-DUENO-2026-10-05.md, tarea T2.
   La especificacion visual son las 31 maquetas de la variante A; la tabla 5.4 del plan
   dice que clase usa cada pantalla y tests/panelV2CimientosYMovil.test.ts exige una regla
   aqui para cada una.

   REGLAS DE ESTA SECCION (las vigila esa prueba):
   - TODO selector empieza por .p2 (el body de panel.html). Asi el panel viejo
     (index.html, body sin clase) no recibe ni una regla de aqui, y esta seccion no
     cambia nada de lo que mide tests/frente1CimientosYMovil.test.ts.
   - Fichas propias --p2-*: no se redefine ningun token del panel viejo.
   - min-height y font-size en PIXELES LITERALES (jsdom no resuelve var()): toques de
     44 px o mas, texto de 12 px o mas. La maqueta usa 40 px en pastillas y 11 px en
     "PROD" y en la insignia: aqui suben a 44 y 12 (reglas de la casa).
   - El texto terciario es #6E675D y no el #8A847A de la maqueta: este ultimo da 3,6:1
     sobre blanco y no llega a 4,5:1 (la misma decision que --ink3 del panel viejo,
     26-ago-2026).
   - Escritorio y movil son DOS maquetaciones que pinta el JS (ctx.esMovil()). La
     @media (max-width: 820px) del final solo cambia lo que la maqueta Movil* cambia en
     la MISMA pieza: rejillas que bajan de columnas, la capa que pasa de dialogo a hoja,
     toques de 48 px.
   - Nada de style= en panel*.js: si falta una clase, se anota y la anade T13.
   ============================================================ */

.p2{
  --p2-fondo:#F4F2EE;
  --p2-tinta:#1C1A17;
  --p2-acento:#E25822;
  --p2-acento-texto:#C2410C;
  --p2-borde:#E7E2D9;
  --p2-borde-suave:#EFEAE2;
  --p2-linea:#F4F2EE;
  --p2-texto2:#4A4640;
  --p2-texto3:#6E675D;
  --p2-suave:#F8F6F2;
  --p2-barra-activa:#2E2A25;
  --p2-barra-texto:#CFC8BC;
  --p2-unida-fondo:#FFF7F2;
  --p2-unida-borde:#F6D3C2;
  --p2-naranja-suave:#FCE9E1;
  --p2-naranja-texto:#9A3412;
  --p2-rojo:#B91C1C;
  --p2-rojo-borde:#F3C4C4;
  margin:0;
  background:var(--p2-fondo);
  color:var(--p2-tinta);
  font-family:Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
.p2 *{ box-sizing:border-box; }
.p2 [hidden]{ display:none !important; }
.p2 a{ color:var(--p2-acento-texto); }
.p2 a:hover{ color:var(--p2-naranja-texto); }
.p2 button{ font-family:inherit; color:inherit; }
.p2 h1,
.p2 h2,
.p2 h3{ margin:0; letter-spacing:0; line-height:1.2; }
.p2 :focus-visible{ outline:3px solid #E25822; outline-offset:2px; }

/* ---- Pagina: arranque, entrada, contenedores fijos, avisos ---- */
.p2 .p2-arranque{
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; background:var(--p2-fondo);
}
.p2 .p2-login{
  position:fixed; inset:0; overflow-y:auto; display:flex; align-items:center;
  justify-content:center; padding:24px 16px; background:var(--p2-fondo);
}
.p2 .p2-login-caja{
  width:100%; max-width:420px; display:flex; flex-direction:column; gap:16px;
  background:#fff; border:1px solid var(--p2-borde); border-radius:20px; padding:24px;
}
.p2 .p2-login-caja form{ display:flex; flex-direction:column; gap:14px; }
.p2 .p2-error{
  margin:0; padding:12px 14px; border-radius:12px; background:#FEF2F2; color:#991B1B;
  font-size:14px; font-weight:600;
}
.p2 .p2-app{ display:flex; flex-direction:column; }
.p2 .p2-vista{ display:block; outline:none; }
.p2 .p2-capa{ position:relative; z-index:1200; }
.p2 .p2-avisos{
  position:fixed; z-index:1500; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;
  width:max-content; max-width:calc(100vw - 32px);
}
.p2 .p2-toast{
  pointer-events:auto; padding:12px 16px; border-radius:12px; background:var(--p2-tinta);
  color:#fff; font-size:14px; font-weight:700; box-shadow:0 10px 30px rgba(28,26,23,.25);
}
.p2 .p2-toast.ok{ background:#166534; }
.p2 .p2-toast.err{ background:var(--p2-rojo); }

/* ---- Barra oscura de escritorio (Main y todas las de escritorio) ---- */
.p2 .p2-barra{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:14px 28px;
  background:var(--p2-tinta); color:var(--p2-fondo);
}
.p2 .p2-marca{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; }
.p2 .p2-marca-logo{
  width:28px; height:28px; flex:none; border-radius:8px; background:var(--p2-acento);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  font-size:14px; font-weight:800;
}
.p2 .p2-nav{ display:flex; flex-wrap:wrap; gap:4px; margin-left:12px; }
.p2 .p2-nav-enlace{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px;
  border-radius:9px; color:var(--p2-barra-texto); text-decoration:none; font-weight:600;
  font-size:14px; white-space:nowrap;
}
.p2 .p2-nav-enlace:hover{ color:#fff; background:var(--p2-barra-activa); }
.p2 .p2-nav-enlace.activa{ background:var(--p2-barra-activa); color:#fff; font-weight:700; }
.p2 .p2-insignia{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px;
  padding:1px 7px; border-radius:99px; background:var(--p2-acento); color:#fff;
  font-size:12px; font-weight:800; line-height:1.3;
}
.p2 .p2-barra-acciones{
  margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:13px; color:var(--p2-barra-texto);
}
.p2 .p2-entorno{
  display:inline-block; padding:4px 10px; border:1px solid #3F3A33; border-radius:99px;
  color:var(--p2-barra-texto); font-size:12px; font-weight:800; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.p2 .p2-entorno.prod{ border-color:#5B3A2A; color:#FDBA8C; }
.p2 .p2-tasa-hoy{ font-size:13px; color:var(--p2-barra-texto); white-space:nowrap; }
.p2 .p2-tasa-hoy b{ color:#fff; font-family:"IBM Plex Mono", ui-monospace, monospace; }
/* El mismo cartel vive en la entrada, sobre blanco: alli los colores de la barra oscura dan 1,67:1.
   Colores literales (los mide la prueba en jsdom): 8,8:1 en STAGING y 6,2:1 en PROD. Van DESPUES de
   .p2-entorno.prod para ganarle tambien por orden. */
.p2 .p2-login-caja .p2-entorno{
  align-self:flex-start; background-color:#F8F6F2; border-color:#E7E2D9; color:#4A4640;
}
.p2 .p2-login-caja .p2-entorno.prod{ background-color:#FCE9E1; border-color:#F6D3C2; color:#9A3412; }

/* ---- Cabecera y pestanas de movil (MovilInicio y todas las Movil*) ---- */
.p2 .p2-cabecera-movil{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:10px;
  padding:12px 16px; background:var(--p2-tinta); color:#fff;
}
.p2 .p2-volver{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; min-height:44px; border:0; border-radius:12px; background:transparent;
  color:#fff; font-size:22px; font-weight:800; text-decoration:none; cursor:pointer;
}
.p2 .p2-titulo-movil{
  flex:1; min-width:0; font-size:17px; font-weight:800; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.p2 .p2-pestanas{
  position:fixed; left:0; right:0; bottom:0; z-index:100; display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr)); background:#fff;
  border-top:1px solid var(--p2-borde); padding-bottom:env(safe-area-inset-bottom);
}
.p2 .p2-pestana{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-height:60px; font-size:12px; font-weight:800; color:var(--p2-texto2);
  text-decoration:none; border-top:3px solid transparent;
}
.p2 .p2-pestana.activa{ color:var(--p2-acento-texto); border-top-color:var(--p2-acento); }

/* ---- Pagina de una vista ---- */
.p2 .p2-pagina{
  display:flex; flex-direction:column; gap:18px; padding:24px 28px; max-width:1440px;
}
.p2 .p2-cabeza-pagina{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.p2 .p2-cabeza-pagina .p2-filtros{ margin-left:auto; }
.p2 .p2-titulo-pagina{ margin:0; font-size:26px; font-weight:800; }
.p2 .p2-sub{ font-size:14px; color:var(--p2-texto2); }
.p2 .p2-nota{ font-size:13px; color:var(--p2-texto2); }
.p2 .p2-etiqueta{ font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--p2-texto3); }
.p2 .p2-migas{
  display:inline-flex; align-items:center; min-height:44px; font-size:13px; font-weight:700;
  color:var(--p2-acento-texto);
}

/* ---- Botones ---- */
.p2 .p2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 14px; border-radius:10px; border:1px solid var(--p2-borde);
  background:#fff; color:var(--p2-tinta); font-family:inherit; font-size:14px;
  font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap;
}
.p2 .p2-btn:hover{ border-color:#CFC8BC; }
.p2 .p2-btn:disabled{ opacity:.45; cursor:not-allowed; }
.p2 .p2-btn-primario{ border-color:var(--p2-tinta); background:var(--p2-tinta); color:#fff; font-weight:800; }
.p2 .p2-btn-acento{ border-color:var(--p2-acento); background:var(--p2-acento); color:#fff; font-weight:800; }
.p2 .p2-btn-peligro{ border-color:var(--p2-rojo-borde); background:#fff; color:var(--p2-rojo); font-weight:800; }
.p2 .p2-btn-peligro.lleno{ border-color:var(--p2-rojo); background:var(--p2-rojo); color:#fff; }
.p2 .p2-btn-ancho{ width:100%; }

/* ---- Pastillas (filtros, pestanas de vista, dias, motivos) ---- */
.p2 .p2-filtros{ display:flex; flex-wrap:wrap; gap:6px; }
.p2 .p2-pastilla{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  min-height:44px; padding:0 14px; border-radius:99px; border:1px solid var(--p2-borde);
  background:#fff; color:var(--p2-tinta); font-family:inherit; font-size:13px;
  font-weight:700; cursor:pointer; white-space:nowrap; text-decoration:none;
}
.p2 .p2-pastilla.activa{ border-color:var(--p2-tinta); background:var(--p2-tinta); color:#fff; }
.p2 .p2-pastilla.roja{ border-color:var(--p2-rojo); background:var(--p2-rojo); color:#fff; }

/* ---- Chips de salud y etiquetas ---- */
.p2 .p2-chip{
  display:inline-flex; align-items:center; padding:3px 9px; border-radius:99px;
  font-size:12px; font-weight:800; white-space:nowrap; background:var(--p2-fondo);
  color:var(--p2-texto2);
}
.p2 .p2-chip.ok{ color:#15803D; background:#DCFCE7; }
.p2 .p2-chip.atencion{ color:#9A3412; background:#FCE9E1; }
.p2 .p2-chip.parado{ color:#854D0E; background:#FEF3C7; }
.p2 .p2-chip.suspendido{ color:#B91C1C; background:#FEE2E2; }
.p2 .p2-etiquetas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.p2 .p2-etiqueta-suave{
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px;
  background:var(--p2-fondo); font-size:12px; font-weight:700; color:var(--p2-tinta);
}
.p2 .p2-etiqueta-unida{
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px;
  background:var(--p2-naranja-suave); color:var(--p2-naranja-texto); font-size:12px; font-weight:700;
}
.p2 .p2-punto{ display:inline-block; flex:none; width:12px; height:12px; border-radius:50%; background:#15803D; }
.p2 .p2-punto.ok{ background:#15803D; }
.p2 .p2-punto.atencion{ background:#9A3412; }
.p2 .p2-punto.parado{ background:#854D0E; }
.p2 .p2-punto.suspendido{ background:#B91C1C; }
.p2 .p2-mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; }
.p2 .p2-partir{ overflow-wrap:anywhere; }

/* ---- Tarjetas, cifras, avisos, alertas ---- */
.p2 .p2-tarjeta{
  background:#fff; border:1px solid var(--p2-borde); border-radius:16px; padding:18px;
  display:flex; flex-direction:column; gap:12px; min-width:0;
}
.p2 .p2-cifras{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.p2 .p2-cifra{ background:var(--p2-suave); border-radius:12px; padding:12px 14px; min-width:0; }
.p2 .p2-cifra-etiqueta{ font-size:12px; font-weight:700; color:var(--p2-texto3); }
.p2 .p2-cifra-valor{
  margin-top:4px; font-size:22px; font-weight:800;
  font-family:"IBM Plex Mono", ui-monospace, monospace; overflow-wrap:anywhere;
}
.p2 .p2-cifra-nota{ margin-top:2px; font-size:12px; color:var(--p2-texto2); }
.p2 .p2-cifra-grande{
  margin-top:4px; font-size:34px; font-weight:800; line-height:1.1;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
}
.p2 .p2-aviso{
  padding:12px 14px; border-radius:12px; font-size:13px; background:var(--p2-suave);
  color:var(--p2-texto2);
}
.p2 .p2-aviso.info{ background:var(--p2-suave); color:var(--p2-texto2); }
.p2 .p2-aviso.ambar{ background:#FFF7ED; color:#9A3412; }
.p2 .p2-aviso.rojo{ background:#FEF2F2; color:#991B1B; }
.p2 .p2-aviso.verde{ background:#F0FDF4; color:#166534; }
.p2 .p2-aviso-union{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 14px;
  border-radius:12px; background:var(--p2-unida-fondo); border:1px solid var(--p2-unida-borde);
  font-size:13px;
}
.p2 .p2-aviso-union b{ color:var(--p2-naranja-texto); }
.p2 .p2-aviso-union .p2-mono{ overflow-wrap:anywhere; }
.p2 .p2-alerta{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px 12px;
  border-radius:10px; font-size:13px; text-decoration:none;
}
.p2 .p2-alerta.alta{ background:#FEF2F2; color:#991B1B; border:1px solid #FBCACA; }
.p2 .p2-alerta.media{ background:#FFF7ED; color:#9A3412; border:1px solid #FED7AA; }
.p2 .p2-alerta-texto{ flex:1 1 260px; min-width:0; }
.p2 .p2-alerta-accion{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:0 12px; border-radius:9px; border:1px solid currentColor; background:transparent;
  color:inherit; font-family:inherit; font-size:13px; font-weight:700; text-decoration:none;
  cursor:pointer;
}

/* ---- Tablas (escritorio) y su ficha en movil ---- */
.p2 .p2-tabla-marco{ background:#fff; border:1px solid var(--p2-borde); border-radius:16px; overflow-x:auto; }
.p2 .p2-tabla{ width:100%; border-collapse:collapse; font-size:14px; }
.p2 .p2-tabla th{
  padding:12px 14px; font-size:12px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--p2-texto3); text-align:left; border-bottom:0;
  white-space:nowrap;
}
.p2 .p2-tabla td{ padding:12px 14px; border-top:1px solid var(--p2-linea); border-bottom:0; vertical-align:middle; }
.p2 .p2-celda-boton{
  display:inline-flex; align-items:center; min-height:44px; padding:0; border:0;
  background:transparent; font-family:inherit; font-size:14px; font-weight:800;
  color:var(--p2-tinta); text-align:left; cursor:pointer;
}
.p2 .p2-fila-elegida td{ background:var(--p2-unida-fondo); }
.p2 .p2-ficha-movil{
  background:#fff; border:1px solid var(--p2-borde); border-radius:16px; padding:14px;
  display:flex; flex-direction:column; gap:8px; min-width:0;
}

/* ---- Rejillas comunes ---- */
.p2 .p2-rejilla-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.p2 .p2-rejilla-3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.p2 .p2-rejilla-5{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; }
.p2 .p2-opciones-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.p2 .p2-opciones-3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }

/* ---- Campos ---- */
.p2 .p2-campo-grupo{ display:flex; flex-direction:column; gap:6px; }
.p2 .p2-campo-etiqueta{ font-size:13px; font-weight:800; color:var(--p2-tinta); }
.p2 .p2-campo{
  width:100%; min-height:48px; padding:0 14px; border:1px solid var(--p2-borde);
  border-radius:12px; background:#fff; color:var(--p2-tinta); font-family:inherit;
  font-size:15px;
}
.p2 textarea.p2-campo{ min-height:96px; padding:12px 14px; resize:vertical; line-height:1.45; }
.p2 .p2-campo-fijo{
  display:flex; align-items:center; min-height:48px; padding:0 14px;
  border:1px solid var(--p2-borde); border-radius:12px; background:var(--p2-suave);
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:15px; overflow-wrap:anywhere;
}

/* ---- Vacio y cargando ---- */
.p2 .p2-vacio{
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:32px 16px;
  border:1px dashed #D6CFC3; border-radius:16px; text-align:center; font-size:14px;
  color:var(--p2-texto2);
}
.p2 .p2-cargando{ display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--p2-texto2); }
.p2 .p2-cargando::before{
  content:""; width:16px; height:16px; flex:none; border-radius:50%;
  border:2px solid var(--p2-borde); border-top-color:var(--p2-acento);
  animation:p2-giro .8s linear infinite;
}

/* ============ Main / MovilInicio: duenos y negocios ============ */
.p2 .p2-duenos{ display:flex; flex-wrap:wrap; gap:24px; padding:24px 28px; max-width:1440px; }
.p2 .p2-columna-lista{
  flex:1 1 320px; max-width:380px; min-width:0; display:flex; flex-direction:column; gap:12px;
}
.p2 .p2-columna-ficha{ flex:999 1 640px; min-width:0; display:flex; flex-direction:column; gap:18px; }
.p2 .p2-lista-duenos{ display:flex; flex-direction:column; gap:8px; }
.p2 .p2-tarjeta-dueno{
  display:block; width:100%; min-height:44px; padding:14px; border-radius:14px;
  border:2px solid var(--p2-borde); background:#fff; color:var(--p2-tinta);
  font-family:inherit; font-size:15px; text-align:left; cursor:pointer; text-decoration:none;
}
.p2 .p2-tarjeta-dueno.elegido{ border-color:var(--p2-acento); }
.p2 .p2-dueno-cabeza{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.p2 .p2-dueno-nombre{ font-size:15px; font-weight:800; min-width:0; overflow-wrap:anywhere; }
.p2 .p2-dueno-correo{ display:block; margin-top:3px; font-size:13px; color:var(--p2-texto2); overflow-wrap:anywhere; }
.p2 .p2-aviso-cuentas{
  display:block; min-height:44px; padding:14px; border:1px dashed #D6CFC3;
  border-radius:12px; font-size:13px; color:var(--p2-texto2); text-decoration:none;
}
.p2 .p2-aviso-cuentas b{ color:var(--p2-tinta); }
.p2 .p2-aviso-migracion{
  padding:12px 14px; border-radius:12px; background:#FFF7ED; color:#9A3412;
  border:1px solid #FED7AA; font-size:13px; font-weight:600;
}
.p2 .p2-ficha{
  background:#fff; border:1px solid var(--p2-borde); border-radius:16px; padding:20px 22px;
  display:flex; flex-direction:column; gap:16px;
}
.p2 .p2-ficha-cabeza{
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; justify-content:space-between;
}
.p2 .p2-ficha-nombre{ margin:2px 0 0; font-size:26px; font-weight:800; overflow-wrap:anywhere; }
.p2 .p2-ficha-acciones{ display:flex; flex-wrap:wrap; gap:8px; }
.p2 .p2-tarjeta-negocio{
  background:#fff; border:1px solid var(--p2-borde); border-radius:16px; padding:18px 22px;
  display:flex; flex-direction:column; gap:12px; min-width:0;
}
.p2 .p2-negocio-cabeza{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.p2 .p2-negocio-nombre{ margin:0; font-size:18px; font-weight:800; min-width:0; overflow-wrap:anywhere; }
.p2 .p2-negocio-acciones{ margin-left:auto; display:flex; flex-wrap:wrap; gap:8px; }
.p2 .p2-negocio-datos{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; font-size:13px; }
.p2 .p2-dato{ min-width:0; }
.p2 .p2-dato-etiqueta{ font-size:12px; font-weight:700; color:var(--p2-texto3); }
.p2 .p2-dato-valor{ font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.p2 .p2-detalle{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; padding-top:12px;
  border-top:1px solid var(--p2-borde-suave); font-size:13px;
}
.p2 .p2-detalle-bloque{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.p2 .p2-detalle-titulo{ font-size:13px; font-weight:800; }
.p2 .p2-persona-fila{
  display:flex; justify-content:space-between; gap:8px; padding:6px 0;
  border-bottom:1px solid var(--p2-linea);
}
.p2 .p2-persona-fila > span + span{ font-weight:700; color:var(--p2-texto2); text-align:right; }
/* Un nombre sin espacios (un correo como display_name) empujaba la pagina movil a 614 px de ancho (medido a 390,
   5-oct-2026): el nombre encoge y parte la palabra; el rol, corto, no se aplasta. */
.p2 .p2-persona-fila > :first-child{ min-width:0; overflow-wrap:anywhere; }
.p2 .p2-persona-fila > :last-child:not(:first-child){ flex:none; }
.p2 .p2-rol-riesgo,
.p2 .p2-persona-fila > .p2-rol-riesgo{ font-weight:800; color:var(--p2-rojo); }
.p2 .p2-acciones-columna{ display:flex; flex-direction:column; gap:6px; }
.p2 .p2-acciones-columna .p2-btn{ justify-content:flex-start; }
.p2 .p2-acciones-rejilla{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.p2 .p2-acciones-rejilla .p2-btn{ white-space:normal; text-align:center; min-width:0; }
.p2 .p2-crear-movil{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  border-radius:14px; border:0; background:var(--p2-acento); color:#fff; font-family:inherit;
  font-size:16px; font-weight:800; text-decoration:none; cursor:pointer;
}

/* ============ Equipos / MovilEquipos ============ */
.p2 .p2-resumen{ font-size:14px; color:var(--p2-texto2); }
.p2 .p2-equipos{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.p2 .p2-equipos > .p2-tabla-marco{ flex:999 1 640px; min-width:0; }
.p2 .p2-cola{ color:var(--p2-texto2); }
.p2 .p2-cola.pendiente{ font-weight:800; color:#9A3412; }
.p2 .p2-version-vieja{ font-weight:700; color:#854D0E; }
.p2 .p2-lateral{
  flex:1 1 340px; max-width:420px; min-width:0; background:#fff; border:1px solid var(--p2-borde);
  border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px;
  position:sticky; top:16px;
}
.p2 .p2-lateral-titulo{ margin:0; font-size:20px; font-weight:800; overflow-wrap:anywhere; }
.p2 .p2-op{ padding:10px 12px; border-radius:10px; background:#FFF7ED; color:#9A3412; font-size:13px; }
/* Sin uso en la vista desde el rediseno (la movil pinta .p2-equipo-fila); se queda porque
   tests/panelV2CimientosYMovil.test.ts la monta en su prueba de toques de 44 px. */
.p2 .p2-tarjeta-equipo-cabeza{
  display:block; width:100%; min-height:44px; padding:0; border:0; background:transparent;
  font-family:inherit; font-size:15px; text-align:left; color:var(--p2-tinta); cursor:pointer;
}
/* Rediseno de Equipos (5-oct-2026, variante A: maquetas Main.dc.html y MovilA.dc.html de la sesion 987bc491).
   La cabecera en vivo, los chips de filtro con su cuenta, la tabla de 7 columnas, la ficha por secciones y las
   acciones en una rejilla que NO se pisa: en la captura del dueno "Cerrar su sesion" y "Ver su negocio como
   soporte" se montaban porque .p2-btn es white-space:nowrap dentro de .p2-rejilla-2; aqui van en
   .p2-acciones-rejilla (texto que envuelve, min-width 0) y las dos largas a todo el ancho. */
.p2 .p2-equipos-cabeza{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.p2 .p2-equipos-cabeza > div:first-child{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.p2 .p2-equipos-acciones{ display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; min-width:0; }
.p2 .p2-equipos-acciones .p2-btn{ white-space:normal; text-align:center; min-width:0; }
.p2 .p2-selector-negocio{ justify-content:space-between; min-width:220px; }
.p2 .p2-selector-negocio > span{ overflow-wrap:anywhere; text-align:left; }
.p2 .p2-en-vivo{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:13px; color:var(--p2-texto2); }
.p2 .p2-en-vivo > b{ display:inline-flex; align-items:center; gap:6px; color:#166534; }
.p2 .p2-en-vivo-texto{ color:var(--p2-texto2); }
.p2 .p2-en-vivo-texto.atrasado{ font-weight:700; color:#9A3412; }
.p2 .p2-en-vivo-punto{
  width:9px; height:9px; flex:none; border-radius:99px; background:#15803D; box-shadow:0 0 0 4px rgba(21, 128, 61, .15);
}
.p2 .p2-pastilla-cuenta{ margin-left:6px; font-weight:800; opacity:.75; }
.p2 .p2-equipos .p2-tabla td{ vertical-align:top; }
.p2 .p2-equipos .p2-tabla td:last-child{ min-width:190px; }
.p2 .p2-equipos > .p2-lateral{ max-height:calc(100vh - 32px); overflow-y:auto; overscroll-behavior:contain; }
.p2 .p2-equipo-celda{ display:flex; gap:10px; align-items:flex-start; min-width:220px; }
.p2 .p2-equipo-celda > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.p2 .p2-equipo-icono{ position:relative; flex:none; display:inline-flex; margin-top:10px; color:var(--p2-texto2); }
.p2 .p2-senal{
  position:absolute; right:-3px; bottom:-1px; width:10px; height:10px; border-radius:99px;
  border:2px solid #fff; background:#A8A29E;
}
.p2 .p2-senal.linea{ background:#15803D; }
.p2 .p2-senal.reciente{ background:#D97706; }
.p2 .p2-senal.sin{ background:#A8A29E; }
.p2 .p2-identidad{ font-size:12px; color:var(--p2-texto2); overflow-wrap:anywhere; }
.p2 .p2-fila-apagada td{ opacity:.6; }
.p2 .p2-fila-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; }
.p2 .p2-fila-chips > b{ overflow-wrap:anywhere; }
.p2 .p2-chip-largo{ white-space:normal; }
.p2 .p2-cola-suave{ font-size:12px; color:var(--p2-texto2); }
.p2 .p2-rol{
  display:inline-flex; align-items:center; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:700;
  white-space:nowrap; color:#57534E; background:#F5F5F4; border:1px solid #D6D3D1;
}
.p2 .p2-rol.dueno{ color:#6D28D9; background:#F5F3FF; border-color:#DDD6FE; }
.p2 .p2-rol.cajero{ color:#0E7490; background:#ECFEFF; border-color:#A5F3FC; }
.p2 .p2-rol.mesero{ color:#B45309; background:#FFFBEB; border-color:#FDE68A; }
.p2 .p2-rol.cocina{ color:#57534E; background:#F5F5F4; border-color:#D6D3D1; }
.p2 .p2-lateral-cabeza{ display:flex; gap:12px; align-items:flex-start; }
.p2 .p2-lateral-cabeza > div{ min-width:0; }
.p2 .p2-lateral-icono{
  width:44px; height:44px; flex:none; border-radius:12px; background:var(--p2-fondo);
  display:inline-flex; align-items:center; justify-content:center;
}
.p2 .p2-ficha-seccion{
  display:flex; flex-direction:column; gap:10px; padding-top:14px; min-width:0;
  border-top:1px solid var(--p2-borde-suave);
}
.p2 .p2-ficha-seccion-titulo{
  margin:0; font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--p2-texto3);
}
.p2 .p2-ficha-seccion .p2-rejilla-2{ gap:12px 16px; }
.p2 .p2-accion-ancha{ grid-column:1 / -1; }
.p2 .p2-icono{ flex:none; }
.p2 .p2-lista-equipos{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--p2-borde); border-radius:16px; overflow:hidden;
}
.p2 .p2-equipo-fila{
  display:flex; gap:12px; align-items:center; width:100%; min-height:64px; padding:10px 14px; border:0;
  border-top:1px solid var(--p2-linea); background:#fff; color:var(--p2-tinta); font-family:inherit;
  font-size:15px; text-align:left; cursor:pointer;
}
.p2 .p2-equipo-fila:first-child{ border-top:0; }
.p2 .p2-equipo-fila.elegida{ background:var(--p2-unida-fondo); }
.p2 .p2-equipo-fila .p2-equipo-icono{ margin-top:0; }
.p2 .p2-equipo-fila-texto{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.p2 .p2-equipo-fila-texto > b{ overflow-wrap:anywhere; }
.p2 .p2-hoja-equipo{
  position:fixed; left:0; right:0; bottom:0; z-index:1100; max-height:85vh; overflow-y:auto;
  overscroll-behavior:contain; display:flex; flex-direction:column; gap:14px;
  padding:8px 16px calc(24px + env(safe-area-inset-bottom)); background:#fff; border-radius:22px 22px 0 0;
  box-shadow:0 -12px 40px rgba(28, 26, 23, .25);
}
.p2 .p2-hoja-equipo-cabeza{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.p2 .p2-hoja-equipo-cabeza > div{ min-width:0; }

/* ============ Soporte / MovilSoporte ============ */
.p2 .p2-soporte{ display:flex; flex-wrap:wrap; gap:18px; align-items:stretch; }
.p2 .p2-conversaciones{
  flex:1 1 320px; max-width:380px; min-width:0; display:flex; flex-direction:column; gap:8px;
}
.p2 .p2-conversacion{
  display:block; width:100%; min-height:44px; padding:14px; border-radius:14px;
  border:2px solid var(--p2-borde); background:#fff; color:var(--p2-tinta);
  font-family:inherit; font-size:15px; text-align:left; cursor:pointer;
}
.p2 .p2-conversacion.elegida{ border-color:var(--p2-acento); }
.p2 .p2-conversacion-ultimo{
  display:block; margin-top:4px; font-size:13px; color:var(--p2-texto2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.p2 .p2-estado-conv{
  display:inline-block; margin-top:8px; padding:2px 8px; border-radius:99px; font-size:12px;
  font-weight:800; background:var(--p2-fondo); color:var(--p2-texto2);
}
.p2 .p2-estado-conv.abierta{ color:#9A3412; background:#FCE9E1; }
.p2 .p2-estado-conv.espera{ color:#854D0E; background:#FEF3C7; }
.p2 .p2-estado-conv.resuelta{ color:#166534; background:#DCFCE7; }
.p2 .p2-hilo{
  flex:999 1 600px; min-width:0; background:#fff; border:1px solid var(--p2-borde);
  border-radius:16px; display:flex; flex-direction:column; height:calc(100vh - 140px);
}
.p2 .p2-hilo-cabeza{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:16px 18px;
  border-bottom:1px solid var(--p2-borde-suave);
}
.p2 .p2-hilo-cabeza > b{ font-size:17px; }
.p2 .p2-mensajes{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.p2 .p2-burbuja{
  align-self:flex-start; max-width:70%; padding:10px 14px; border-radius:14px;
  background:var(--p2-fondo); font-size:14px; overflow-wrap:anywhere;
}
.p2 .p2-burbuja.propia{ align-self:flex-end; background:var(--p2-tinta); color:#fff; }
.p2 .p2-burbuja-meta{ font-size:12px; font-weight:800; opacity:.8; }
.p2 .p2-adjunto{ display:block; margin-top:6px; max-width:100%; max-height:280px; border-radius:10px; }
.p2 .p2-respuesta{
  position:sticky; bottom:0; display:flex; gap:10px; align-items:center; padding:14px 18px;
  border-top:1px solid var(--p2-borde-suave); background:#fff; border-radius:0 0 16px 16px;
}
.p2 .p2-respuesta .p2-campo{ flex:1; min-width:0; }

/* ============ Tasa BCV / MovilTasaBcv ============ */
.p2 .p2-lectura{ margin-top:4px; font-size:20px; font-weight:800; }
.p2 .p2-lectura.ok{ color:#166534; }
.p2 .p2-lectura.fallo{ color:var(--p2-rojo); }
.p2 .p2-lista-filas{ display:flex; flex-direction:column; gap:8px; }
.p2 .p2-fila-lista{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px;
  border-radius:12px; background:#fff; border:1px solid var(--p2-borde); font-size:14px;
}

/* ============ Rastro / MovilRastro ============ */
.p2 .p2-tarjeta-rastro{ padding:12px 14px; border-radius:14px; background:#fff; border:1px solid var(--p2-borde); }
.p2 .p2-rastro-meta{
  font-size:12px; color:var(--p2-texto3); font-family:"IBM Plex Mono", ui-monospace, monospace;
  overflow-wrap:anywhere;
}
.p2 .p2-rastro-que{ margin-top:2px; font-size:14px; font-weight:700; }

/* ============ Cuentas sin negocio / MovilCuentasSinNegocio ============ */
.p2 .p2-tarjeta-cuenta{
  background:#fff; border:1px solid var(--p2-borde); border-radius:16px; padding:14px;
  display:flex; flex-direction:column; gap:8px;
}

/* ============ MovilMas ============ */
.p2 .p2-accesos{ display:flex; flex-direction:column; gap:12px; }
.p2 .p2-acceso{
  display:flex; align-items:center; gap:12px; min-height:64px; padding:16px;
  background:#fff; border:1px solid var(--p2-borde); border-radius:16px;
  color:var(--p2-tinta); text-decoration:none; font-family:inherit; text-align:left;
}
.p2 .p2-acceso-icono{
  width:36px; height:36px; flex:none; border-radius:10px; background:var(--p2-naranja-suave);
  color:var(--p2-naranja-texto); display:inline-flex; align-items:center; justify-content:center;
}
.p2 .p2-acceso-texto{ display:flex; flex-direction:column; min-width:0; font-size:16px; font-weight:800; }
.p2 .p2-acceso-texto > span{ font-size:13px; font-weight:500; color:var(--p2-texto2); }

/* ============ Ver como soporte / MovilVerComoSoporte ============ */
.p2 .p2-franja-soporte{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:14px 18px;
  border-radius:14px; background:#1E3A8A; color:#fff; font-size:14px;
}
.p2 .p2-franja-soporte .p2-btn{ margin-left:auto; border-color:#fff; background:#fff; color:#1E3A8A; font-weight:800; }
.p2 .p2-pestanas-vista{ display:flex; flex-wrap:wrap; gap:6px; }
.p2 .p2-tarjeta-tabla{
  background:#fff; border:1px solid var(--p2-borde); border-radius:14px; padding:12px 14px;
  display:flex; flex-direction:column; gap:4px; font-size:14px;
}
.p2 .p2-tarjeta-tabla-fila{ display:flex; justify-content:space-between; gap:10px; }
.p2 .p2-tarjeta-tabla-fila > span:first-child{ color:var(--p2-texto3); font-size:12px; font-weight:700; }

/* ============ Revisar permisos / MovilRevisarPermisos ============ */
.p2 .p2-fila-riesgo td{ background:#FEF2F2; }
.p2 .p2-origen{
  display:inline-flex; padding:2px 8px; border-radius:99px; background:var(--p2-fondo);
  font-size:12px; font-weight:700; color:var(--p2-texto2);
}
.p2 .p2-texto-riesgo{ font-weight:800; color:var(--p2-rojo); }
.p2 .p2-tarjeta-permiso{ padding:12px 14px; border-radius:14px; border:1px solid var(--p2-borde); background:#fff; }
.p2 .p2-tarjeta-permiso.riesgo{ border-color:#FBCACA; background:#FEF2F2; }

/* ============ Capa: dialogo (escritorio) y hoja (movil) ============ */
.p2 .p2-fondo-capa{
  position:fixed; inset:0; z-index:1200; display:flex; align-items:center;
  justify-content:center; padding:24px; background:rgba(28, 26, 23, .62);
}
.p2 .p2-dialogo{
  width:100%; max-width:680px; max-height:94vh; background:#fff; border-radius:20px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(28, 26, 23, .3);
}
.p2 .p2-dialogo.ancho{ max-width:820px; }
.p2 .p2-tirador{ display:none; justify-content:center; padding-top:8px; }
.p2 .p2-tirador::before{ content:""; width:44px; height:5px; border-radius:99px; background:#D6CFC3; }
.p2 .p2-dialogo-cabeza{
  display:flex; align-items:flex-start; gap:12px; padding:20px 24px;
  border-bottom:1px solid var(--p2-borde-suave);
}
.p2 .p2-dialogo-titulo{ margin:0; font-size:22px; font-weight:800; }
.p2 .p2-dialogo-sub{ margin-top:4px; font-size:14px; color:var(--p2-texto2); }
.p2 .p2-dialogo-cuerpo{
  flex:1; overflow:auto; padding:20px 24px; display:flex; flex-direction:column; gap:16px;
}
.p2 .p2-dialogo-pie{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:16px 24px;
  border-top:1px solid var(--p2-borde-suave); background:#fff;
}
.p2 .p2-dialogo-pie > :last-child{ margin-left:auto; }
.p2 .p2-dialogo-pie .p2-btn{ min-height:48px; padding:0 18px; border-radius:12px; font-weight:800; }
.p2 .p2-cerrar{
  margin-left:auto; flex:none; width:44px; height:44px; min-height:44px; border-radius:12px;
  border:1px solid var(--p2-borde); background:#fff; color:var(--p2-tinta);
  display:inline-flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer;
}
.p2 .p2-opcion{
  display:block; width:100%; min-height:44px; padding:16px; border-radius:14px;
  border:2px solid var(--p2-borde); background:#fff; color:var(--p2-tinta);
  font-family:inherit; font-size:15px; text-align:left; cursor:pointer;
}
.p2 .p2-opcion.elegida{ border-color:var(--p2-acento); background:var(--p2-unida-fondo); }
.p2 .p2-opcion-titulo{ display:block; font-size:16px; font-weight:800; }
.p2 .p2-opcion-texto{ display:block; margin-top:4px; font-size:13px; color:var(--p2-texto2); }
.p2 .p2-clave-fila{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.p2 .p2-clave-fila .p2-btn{ min-height:56px; padding:0 18px; border-radius:12px; font-weight:800; }
.p2 .p2-clave{
  flex:1 1 260px; display:flex; align-items:center; min-height:56px; padding:0 16px;
  border-radius:12px; background:var(--p2-tinta); color:#fff; font-size:22px;
  letter-spacing:.06em; font-family:"IBM Plex Mono", ui-monospace, monospace; overflow-wrap:anywhere;
  user-select:all;
}
.p2 .p2-casilla{
  display:flex; align-items:center; gap:10px; min-height:44px; font-size:14px; cursor:pointer;
}
.p2 .p2-casilla input{ width:22px; height:22px; margin:0; flex:none; }
.p2 .p2-contacto{
  display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--p2-borde);
  border-radius:14px; min-width:0;
}
.p2 .p2-avatar{
  width:48px; height:48px; flex:none; border-radius:50%; background:var(--p2-naranja-suave);
  color:var(--p2-naranja-texto); display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px;
}
.p2 .p2-canales{ display:flex; flex-wrap:wrap; gap:8px; }
.p2 .p2-canal{
  display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center;
  min-height:44px; padding:0 14px; border-radius:99px; border:1px solid var(--p2-borde);
  background:#fff; color:var(--p2-tinta); font-family:inherit; font-size:14px; font-weight:800;
  cursor:pointer; text-decoration:none;
}
.p2 .p2-canal.elegido{ border-color:var(--p2-tinta); background:var(--p2-tinta); color:#fff; }
.p2 .p2-canal.apagado{
  border-style:dashed; border-radius:14px; padding:6px 14px; background:var(--p2-suave);
  color:var(--p2-texto2); cursor:not-allowed;
}
.p2 .p2-canal-motivo{ font-size:12px; font-weight:600; color:var(--p2-texto2); }
.p2 .p2-zona-roja{
  display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:14px;
  border:1px solid var(--p2-rojo-borde); background:#FEF2F2; color:#991B1B; font-size:13px;
}
.p2 .p2-pie-ayuda{ font-size:13px; color:var(--p2-texto3); }

/* ============ Crear negocio / MovilCrearNegocio ============ */
.p2 .p2-pasos{ display:flex; flex-wrap:wrap; gap:6px; padding:14px 24px 0; }
.p2 .p2-paso{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:0 12px; border-radius:99px; border:1px solid var(--p2-borde); background:#fff;
  color:var(--p2-tinta); font-family:inherit; font-size:13px; font-weight:800; cursor:pointer;
}
.p2 .p2-paso.hecho{ background:var(--p2-fondo); }
.p2 .p2-paso.actual{ border-color:var(--p2-tinta); background:var(--p2-tinta); color:#fff; }
.p2 .p2-progreso{ display:flex; gap:4px; }
.p2 .p2-progreso-tramo{ flex:1; height:6px; border-radius:99px; background:var(--p2-borde); }
.p2 .p2-progreso-tramo.hecho{ background:var(--p2-acento); }
.p2 .p2-paso-contador{ font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--p2-texto3); }
.p2 .p2-opcion-nota{ display:block; margin-top:10px; font-size:12px; color:var(--p2-texto3); }
.p2 .p2-insignia-recomendado{
  margin-left:auto; padding:3px 9px; border-radius:99px; background:var(--p2-naranja-suave);
  color:var(--p2-naranja-texto); font-size:12px; font-weight:800; white-space:nowrap;
}
.p2 .p2-resumen-filas{ display:flex; flex-direction:column; border:1px solid var(--p2-borde); border-radius:14px; overflow:hidden; }
.p2 .p2-resumen-fila{
  display:flex; justify-content:space-between; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--p2-linea); font-size:14px;
}
.p2 .p2-resumen-fila:last-child{ border-bottom:0; }
.p2 .p2-resumen-fila > span{ color:var(--p2-texto2); }
.p2 .p2-resumen-fila > b{ text-align:right; overflow-wrap:anywhere; }
.p2 .p2-pie-fijo{
  position:sticky; bottom:0; z-index:2; display:flex; gap:10px; align-items:center;
  padding:12px 0 8px; background:inherit;
}

/* ============ MOVIL: lo que la maqueta Movil* cambia en la MISMA pieza ============ */
@media (max-width: 820px) {
  .p2 .p2-vista{ padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  .p2 .p2-pagina{ padding:16px; gap:12px; max-width:none; }
  .p2 .p2-duenos{ display:flex; flex-direction:column; padding:16px; gap:12px; max-width:none; }
  .p2 .p2-columna-lista{ max-width:none; }
  .p2 .p2-titulo-pagina{ font-size:22px; }
  .p2 .p2-btn{ min-height:48px; padding:0 16px; border-radius:12px; font-weight:800; }
  .p2 .p2-filtros{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; touch-action:pan-x; }
  .p2 .p2-cabeza-pagina .p2-filtros{ margin-left:0; width:100%; }
  .p2 .p2-equipos-acciones{ margin-left:0; width:100%; }
  .p2 .p2-equipos-acciones .p2-btn{ flex:1 1 100%; }
  .p2 .p2-selector-negocio{ min-width:0; }
  .p2 .p2-tarjeta-dueno{ border-width:1px; border-radius:16px; }
  .p2 .p2-dueno-nombre{ font-size:16px; }
  .p2 .p2-ficha{ padding:16px; gap:10px; }
  .p2 .p2-ficha-nombre{ font-size:22px; }
  .p2 .p2-cifras{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .p2 .p2-cifra{ padding:10px 12px; }
  .p2 .p2-cifra-valor{ font-size:19px; }
  .p2 .p2-tarjeta-negocio{ padding:14px; gap:10px; }
  .p2 .p2-negocio-nombre{ font-size:16px; flex:1; }
  .p2 .p2-negocio-datos{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .p2 .p2-detalle{ grid-template-columns:minmax(0, 1fr); }
  .p2 .p2-alerta{ display:block; }
  .p2 .p2-rejilla-3{ grid-template-columns:minmax(0, 1fr); }
  .p2 .p2-rejilla-5{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .p2 .p2-opciones-2{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .p2 .p2-opciones-3{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .p2 .p2-opcion{ padding:14px; }
  .p2 .p2-campo{ font-size:16px; }
  .p2 .p2-soporte{ display:flex; flex-direction:column; }
  .p2 .p2-conversaciones{ max-width:none; gap:10px; }
  .p2 .p2-conversacion{ border-width:1px; border-radius:16px; }
  .p2 .p2-hilo{ height:auto; border:0; background:transparent; }
  .p2 .p2-mensajes{ padding:0; }
  .p2 .p2-burbuja{ max-width:85%; padding:10px 12px; }
  .p2 .p2-burbuja:not(.propia){ background:#fff; border:1px solid var(--p2-borde); }
  .p2 .p2-respuesta{
    bottom:calc(60px + env(safe-area-inset-bottom)); padding:8px 0; gap:8px;
    background:var(--p2-fondo); border-top:0; border-radius:0;
  }
  .p2 .p2-cifra-grande{ font-size:32px; }
  .p2 .p2-franja-soporte{ padding:12px 14px; font-size:13px; }
  .p2 .p2-fondo-capa{ align-items:flex-end; padding:0; }
  .p2 .p2-dialogo,
  .p2 .p2-hoja{
    position:fixed; left:0; right:0; bottom:0; width:auto; max-width:none; max-height:92vh;
    border-radius:22px 22px 0 0; background:#fff; display:flex; flex-direction:column;
    overflow:hidden; box-shadow:0 -12px 40px rgba(28, 26, 23, .25);
  }
  .p2 .p2-tirador{ display:flex; }
  .p2 .p2-dialogo-cabeza{ gap:10px; padding:10px 16px 12px; }
  .p2 .p2-dialogo-titulo{ font-size:19px; }
  .p2 .p2-dialogo-sub{ font-size:13px; margin-top:2px; }
  .p2 .p2-dialogo-cuerpo{ padding:16px; }
  .p2 .p2-dialogo-pie{ padding:12px 16px calc(20px + env(safe-area-inset-bottom)); }
  .p2 .p2-clave{ flex-basis:100%; font-size:18px; }
  .p2 .p2-pie-fijo{ padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  .p2 .p2-pie-fijo .p2-btn{ flex:1; }
  .p2 .p2-pie-fijo .p2-btn-primario,
  .p2 .p2-pie-fijo .p2-btn-acento{ flex:2; }
}

@media (prefers-reduced-motion: reduce) {
  .p2 *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

@keyframes p2-giro {
  to{ transform:rotate(360deg); }
}
/* FIN PANEL V2 */