/* Callsy X — hoja de cuentas, paneles y páginas públicas (lo que no está en base.css ni en sitio.css).
   La cargan: entrar, registro, recuperar, restablecer, verificar, app/, admin/, precios, nosotros, privacidad y contacto.
   Secciones: 1) utilidades y formularios, 2) cuentas, 3) paneles, 4) páginas públicas (sobre sitio.css).
   Las cuatro páginas públicas cargan además css/publico.css, después de esta. */

:root{color-scheme:dark}
[hidden]{display:none!important}

/* ==================================================================== 1) Utilidades y formularios */
.salto{position:absolute;left:16px;top:-60px;z-index:200;padding:10px 16px;border-radius:var(--r-pill);background:var(--brand);color:#06201C;font-weight:600;text-decoration:none;transition:top .2s}
.salto:focus{top:12px}

.oculto{display:none!important}
.texto-centro{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.suave{color:var(--muted)}
.chico{font-size:.84rem}
.marcador{background:var(--warn);color:#1A1400;padding:2px 8px;border-radius:6px;font-weight:600;font-size:.9em}
.enlace{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.enlace:hover{color:var(--mint)}
.pre{white-space:pre-wrap;word-break:break-word;margin:0;font:inherit}

.btn--chico{--pad:10px 16px;min-height:44px;font-size:.92rem}
.btn--peligro{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.5);color:#FCA5A5}
.btn--peligro:hover{background:rgba(248,113,113,.16);border-color:var(--error);transform:translateY(-2px)}
.btn--bloque{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none}
.btn--icono{--pad:0;width:44px;min-width:44px;min-height:44px}
.btn--icono svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Formularios: etiquetas visibles encima, controles de 48 px, ayuda debajo */
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.form > *{min-width:0}
.form__fila{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.form__fila{grid-template-columns:repeat(2,minmax(0,1fr))}.form__fila--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.campo{display:grid;gap:6px}
.campo > label,.campo__label{font-size:.9rem;font-weight:500;color:var(--ink)}
.campo__opc{color:var(--muted);font-weight:400}
.ayuda{margin:0;font-size:.82rem;color:var(--muted)}
.entrada{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.04);border:1px solid var(--line-strong);color:var(--ink);
  font:inherit;font-size:1rem;line-height:1.4;transition:border-color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.entrada::placeholder{color:rgba(147,163,160,.7)}
.entrada:hover{border-color:rgba(255,255,255,.25)}
.entrada:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-color:rgba(94,227,207,.5);background:rgba(94,227,207,.04)}
.entrada[readonly]{color:var(--muted);background:rgba(255,255,255,.02)}
.entrada[aria-invalid="true"]{border-color:var(--error)}
textarea.entrada{min-height:120px;resize:vertical}
textarea.entrada--grande{min-height:320px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92rem;line-height:1.5}
select.entrada{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393A3A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
select.entrada option{background:var(--surface-2);color:var(--ink)}
.casilla{display:flex;gap:12px;align-items:flex-start;cursor:pointer;color:var(--ink);font-size:.95rem;line-height:1.45;padding:6px 0;min-height:44px}
.casilla input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--brand);cursor:pointer}
.casilla small{display:block;color:var(--muted);font-size:.84rem}
.form__acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.con-boton{display:flex;gap:8px;align-items:stretch}
.con-boton .entrada{flex:1;min-width:0}
.entrada-dinero{position:relative}
.entrada-dinero .entrada{padding-left:34px}
.entrada-dinero::before{content:"$";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}

/* Medidor de contraseña (orientación, no garantía) */
.medidor{display:grid;gap:6px}
.medidor__pista{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;height:6px}
.medidor__pista i{display:block;border-radius:3px;background:rgba(255,255,255,.08);transition:background-color .3s}
.medidor[data-nivel="1"] i:nth-child(-n+1){background:var(--error)}
.medidor[data-nivel="2"] i:nth-child(-n+2){background:var(--warn)}
.medidor[data-nivel="3"] i:nth-child(-n+3){background:var(--brand-deep)}
.medidor[data-nivel="4"] i:nth-child(-n+4){background:var(--brand)}
.medidor__texto{font-size:.82rem;color:var(--muted);margin:0}

/* Avisos (role=alert / status) */
.avisos:empty{display:none}
.alerta{display:grid;gap:6px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:.94rem;line-height:1.45}
.alerta--error{border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.08);color:#FECACA}
.alerta--ok{border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.08);color:#BBF7D0}
.alerta--info{border-color:rgba(94,227,207,.35);background:rgba(94,227,207,.07);color:var(--ink)}
.alerta--aviso{border-color:rgba(245,196,81,.4);background:rgba(245,196,81,.08);color:#FDE68A}
.alerta ul{margin:0;padding-left:18px}
.alerta .btn{justify-self:start}

/* Toasts (abajo, no tapan el contenido) */
.toasts{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:1200;display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{pointer-events:auto;max-width:520px;padding:10px 16px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line-strong);color:var(--ink);font-size:.92rem;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);animation:toastIn .35s var(--ease)}
.toast--ok{border-color:rgba(94,227,207,.5)}
.toast--error{border-color:rgba(248,113,113,.6)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Diálogo propio (nada de alert/confirm) */
.dialogo{border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:0;max-width:min(92vw,440px);width:100%;color:var(--ink);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 55%),var(--surface);box-shadow:0 40px 90px -30px rgba(0,0,0,.95)}
.dialogo::backdrop{background:rgba(3,6,6,.7);backdrop-filter:blur(4px)}
.dialogo__form{display:grid;gap:14px;padding:22px}
.dialogo__t{font:500 1.2rem/1.25 var(--font-display);letter-spacing:-.015em;margin:0}
.dialogo__acciones{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}

/* Estado de carga / vacío */
.estado{display:grid;gap:10px;justify-items:start;padding:22px;border-radius:var(--r-lg);border:1px dashed var(--line-strong);color:var(--muted);font-size:.94rem}
.estado--centro{justify-items:center;text-align:center;padding:40px 22px}
.cargando{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.92rem}
.cargando::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(94,227,207,.25);border-top-color:var(--brand);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* Listas y tablas */
.lista{display:grid;gap:10px}
.item{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;overflow-wrap:anywhere;gap:8px;padding:14px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.item--clic{cursor:pointer;transition:border-color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.item--clic:hover{border-color:rgba(94,227,207,.4);background:rgba(94,227,207,.04)}
.item__cab{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.item__t{font-weight:600;margin:0;font-size:.98rem}
.item__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--muted)}
.item__acciones{display:flex;flex-wrap:wrap;gap:8px}
.item__txt{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.item__txt--corto{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.item--seleccionado{border-color:rgba(94,227,207,.5)}

.tabla{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.02);-webkit-overflow-scrolling:touch}
.tabla table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.tabla td:first-child{min-width:170px}
.tabla th,.tabla td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tabla th{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap;background:rgba(255,255,255,.03)}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla td.num,.tabla th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla tr.fila--clic{cursor:pointer}
.tabla tr.fila--clic:hover td{background:rgba(94,227,207,.05)}
.tabla .btn{white-space:nowrap}
/* En celular, la tabla marcada se vuelve tarjetas (cada celda lleva su etiqueta) */
@media (max-width:699px){
  .tabla--tarjetas{border:0;background:transparent;overflow:visible}
  .tabla--tarjetas table{min-width:0;display:block}
  .tabla--tarjetas thead{display:none}
  .tabla--tarjetas tbody,.tabla--tarjetas tr{display:block}
  .tabla--tarjetas tr{margin-bottom:10px;padding:8px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.03)}
  .tabla--tarjetas td{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);text-align:right}
  .tabla--tarjetas td::before{content:attr(data-label);color:var(--muted);font-size:.8rem;text-align:left;flex:none;max-width:45%}
  .tabla--tarjetas td:last-child{border-bottom:0}
  .tabla--tarjetas td.num{text-align:right}
  .tabla--tarjetas td.celda-acciones{justify-content:flex-start}
  .tabla--tarjetas td.celda-acciones::before{display:none}
}

/* Chips de estado (sobre los de base.css) */
.chip--rojo{color:#FCA5A5;border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.08)}
.chip--verde{color:#86EFAC;border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.08)}
.chip--gris{color:var(--muted)}

/* Burbujas de conversación (paneles) */
.charla{display:grid;gap:8px;padding:14px;border-radius:var(--r-md);background:rgba(0,0,0,.25);border:1px solid var(--line);max-height:60vh;overflow-y:auto}
.msj{max-width:88%;padding:10px 13px;border-radius:16px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.msj--in{justify-self:start;background:rgba(255,255,255,.06);border:1px solid var(--line);border-bottom-left-radius:6px}
.msj--out{justify-self:end;background:rgba(94,227,207,.12);border:1px solid rgba(94,227,207,.3);color:var(--ink);border-bottom-right-radius:6px}
.msj--humano{background:rgba(245,196,81,.1);border-color:rgba(245,196,81,.35)}
.msj--sistema{justify-self:center;background:transparent;border:1px dashed var(--line-strong);color:var(--muted);font-size:.82rem;text-align:center}
.msj__meta{display:block;margin-top:4px;font-size:.7rem;color:var(--muted)}
.msj--out .msj__meta{text-align:right}
.charla__vacia{color:var(--muted);font-size:.9rem;text-align:center;padding:20px}

/* Código para copiar (llave, enlace) */
.codigo{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:var(--r-md);background:rgba(0,0,0,.3);border:1px solid var(--line-strong)}
.codigo code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;word-break:break-all;color:var(--ink)}

/* Detalles plegables (bitácora, contenido largo) */
.plegable summary{cursor:pointer;color:var(--brand);font-size:.88rem;list-style:none;min-height:44px;display:inline-flex;align-items:center}
.plegable summary::-webkit-details-marker{display:none}
.plegable summary::before{content:"+";margin-right:6px;font-weight:600}
.plegable[open] summary::before{content:"–"}

/* ==================================================================== 2) Cuentas (entrar, registro, recuperar, restablecer, verificar) */
.auth{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;gap:24px;padding:20px var(--gutter) 28px}
.auth__cab{display:flex;justify-content:center;padding-top:8px}
.auth__cab .logo__texto{height:24px}
.auth__main{display:grid;place-items:center}
.auth__card{width:100%;max-width:440px;padding:28px 24px;display:grid;gap:18px}
@media (min-width:700px){.auth__card{padding:36px 36px}}
.auth__t{font:500 1.6rem/1.15 var(--font-display);letter-spacing:-.02em;margin:0}
.auth__p{margin:0;color:var(--muted);font-size:.96rem;overflow-wrap:anywhere}
.auth__links{display:grid;gap:6px;font-size:.9rem;color:var(--muted);text-align:center}
.auth__links a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.auth__links > a{justify-self:center}
.auth__links a:hover{color:var(--brand)}
.auth__pie{text-align:center;font-size:.8rem;color:var(--muted)}
/* Login más seguro (docs/CONTRATO-LOGIN.md): botón para ver la contraseña dentro del campo y el recuadro del captcha
   (Cloudflare Turnstile). El recuadro normal mide 300 px; en 360 px se usa el compacto (web/js/captcha.js). */
.clave{position:relative}
.clave .entrada{padding-right:96px}
.clave__ver{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:40px;min-width:76px;padding:0 12px;
  border:0;border-radius:calc(var(--r-md) - 4px);background:transparent;color:var(--muted);font-size:.88rem;font-weight:500;cursor:pointer}
.clave__ver:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.clave__ver:focus-visible{outline:2px solid var(--brand);outline-offset:0}
.captcha{display:grid;gap:6px;justify-items:center;min-width:0;border-radius:var(--r-md)}
.captcha:focus{outline:none}.captcha:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.captcha__widget{width:100%;max-width:100%;min-height:65px;display:flex;justify-content:center}
/* En un celular la tarjeta deja ~280-295 px por dentro: el recuadro se mete un poco en el relleno de la tarjeta para que
   quepa el de 300 px (el compacto, de 150 × 140, se ve torpe y empuja el botón hacia abajo). */
@media (max-width:420px){.auth__card .captcha,.bloque .captcha{margin-inline:-12px}}
/* Llaves en un campo: letra de ancho fijo y sin ligaduras (Inter convierte «1x0» en «1×0»). */
.entrada.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92rem;font-variant-ligatures:none;font-feature-settings:normal}
.captcha__widget:empty{min-height:0}
.captcha__estado{margin:0;font-size:.84rem;color:var(--muted);text-align:center}
.captcha__estado:empty{display:none}
.captcha__estado[data-tipo="error"]{color:#FECACA}
.captcha__estado[data-tipo="aviso"]{color:#FDE68A}
/* Panel: bloque de la sesión (Cuenta del cliente y Seguridad del admin) */
.sesion-info{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:.9rem;color:var(--muted)}
.sesion-info b{color:var(--ink);font-weight:500}
.sesion-acciones{display:flex;flex-wrap:wrap;gap:8px}
.auth__pie a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.auth__pie a:hover{color:var(--brand)}
.auth__exito{display:grid;gap:14px;justify-items:start}
.auth__icono{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(94,227,207,.12);border:1px solid rgba(94,227,207,.45);color:var(--brand)}
.auth__icono svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.auth__icono--error{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.45);color:var(--error)}
/* /unirse: quién invita y cuál negocio es (AISL-CUE-4). El identificador y el correo pueden ser largos: se parten. */
.auth__quien{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:rgba(255,255,255,.03)}
.auth__datos{display:grid;gap:8px;margin:0}
.auth__datos > div{display:grid;gap:2px;min-width:0}
.auth__datos dt{font-size:.78rem;color:var(--muted)}
.auth__datos dd{margin:0;color:var(--ink);font-size:.95rem;overflow-wrap:anywhere;min-width:0}
.auth__p--aviso{color:var(--warn)}
/* Después de aceptar: «Abrir el panel de <negocio> (<identificador>)» puede ser largo; ocupa el ancho y parte en líneas. */
.auth__exito .form__acciones{justify-self:stretch}
.auth__exito .btn--bloque{white-space:normal;text-align:center;overflow-wrap:anywhere;line-height:1.3}
/* Cabecera del panel: el identificador del negocio cuando la persona tiene otro con el mismo nombre (AISL-CUE-4). Va en
   su propia línea, debajo del nombre, y se parte en vez de cortarse: lo que distingue a los dos suele ser el final
   («ferreteria-0fsa»), y con puntos suspensivos no se vería en un celular. */
.pbar__negocio:has(.pbar__slug:not(.oculto)){flex-wrap:wrap;row-gap:0;column-gap:8px}
.pbar__slug{order:3;flex:1 0 100%;min-width:0;font-size:.74rem;line-height:1.25;color:var(--muted);white-space:normal;overflow-wrap:anywhere}

/* ==================================================================== 3) Paneles (app/ y admin/) */
.panel-body{min-height:100svh;display:flex;flex-direction:column}
.pbar{position:sticky;top:0;z-index:60;background:rgba(6,10,10,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pbar__inner{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 var(--gutter)}
.pbar .logo__texto{height:20px}
.pbar__negocio{display:flex;align-items:center;gap:8px;min-width:0;flex:1;font-size:.9rem;color:var(--muted)}
.pbar__negocio b{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar__acciones{display:flex;gap:8px;align-items:center}
.pbar__usuario{font-size:.84rem;color:var(--muted);max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:699px){.pbar__usuario{display:none}.pbar__negocio{font-size:.84rem}}

.player{flex:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;width:100%;min-width:0}
@media (min-width:900px){.player{grid-template-columns:230px minmax(0,1fr);grid-template-rows:1fr;max-width:1400px;margin-inline:auto}}
@media (max-width:699px){.solo-escritorio{display:none!important}}

/* Pestañas: tira horizontal con scroll en celular; barra lateral en escritorio */
.pside{min-width:0;position:sticky;top:58px;z-index:55;background:rgba(6,10,10,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pside__lista{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:6px var(--gutter);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.pside__lista::-webkit-scrollbar{display:none}
.pside__link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);white-space:nowrap;text-decoration:none;color:var(--muted);font-size:.9rem;font-weight:500;scroll-snap-align:start;
  border:1px solid transparent;transition:color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.pside__link:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.pside__link[aria-current="page"]{color:var(--brand);background:rgba(94,227,207,.1);border-color:rgba(94,227,207,.35)}
.pside__link svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pside__cuenta{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--brand);color:#06201C;font-size:.74rem;font-weight:600}
.pside__cuenta:empty{display:none}
@media (min-width:900px){
  .pside{position:sticky;top:58px;align-self:start;height:calc(100vh - 58px);border-bottom:0;border-right:1px solid var(--line);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;overflow-y:auto}
  .pside__lista{flex-direction:column;overflow:visible;padding:18px 14px;gap:4px}
  .pside__link{border-radius:var(--r-md);padding:0 12px;white-space:normal}
}

.pmain{padding:18px var(--gutter) 60px;min-width:0}
@media (min-width:900px){.pmain{padding:28px 36px 80px}}
.pseccion{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;animation:seccionIn .4s var(--ease)}
.pseccion > *{min-width:0}
.pseccion[hidden]{display:none}
@keyframes seccionIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ptitulo{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;justify-content:space-between}
.ptitulo .h2{margin:0;font-size:clamp(1.4rem,3vw,1.9rem)}
.ptitulo .p{font-size:.94rem;max-width:62ch}
.ptitulo__acciones{display:flex;gap:8px;flex-wrap:wrap}
.subtitulo{font:500 1.05rem/1.3 var(--font-display);letter-spacing:-.01em;margin:0}
.bloque{padding:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;min-width:0}
.bloque > *{min-width:0}
@media (min-width:700px){.bloque{padding:22px}}
.bloque__cab{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.dos-col{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.dos-col > *{min-width:0}
@media (min-width:900px){.dos-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.dos-col--ancha{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}

/* Cifras: una figura héroe por vista (el saldo) y fichas con etiqueta + valor */
.hero-num{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:22px;align-content:start;min-width:0}
.hero-num__label{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin:0}
.hero-num__valor{font:500 clamp(2.2rem,6vw,3.2rem)/1.05 var(--font-display);letter-spacing:-.03em;margin:0;color:var(--ink);word-break:break-word}
.hero-num__nota{margin:0;font-size:.86rem;color:var(--muted)}
.fichas{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.fichas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.fichas--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fichas--lado{grid-template-columns:repeat(2,minmax(0,1fr))}
.ficha{display:grid;gap:4px;padding:14px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.03);border:1px solid var(--line);min-width:0}
.ficha__label{margin:0;font-size:.8rem;color:var(--muted)}
.ficha__valor{margin:0;font:500 1.25rem/1.15 var(--font-display);letter-spacing:-.02em;color:var(--ink);word-break:break-word}
.ficha__valor--chico{font-size:1.05rem}
.ficha__nota{margin:0;font-size:.78rem;color:var(--muted)}
.ficha--ok .ficha__valor{color:var(--brand)}
.ficha--rojo .ficha__valor{color:#FCA5A5}

/* Fichas que son enlaces, fieldset sin borde, lista de pasos */
.ficha-enlace{display:block;text-decoration:none;color:inherit;border-radius:var(--r-md);transition:transform var(--t-hover) var(--ease)}
.ficha-enlace:hover{transform:translateY(-2px)}
.ficha-enlace:hover .ficha{border-color:rgba(94,227,207,.4)}
.fieldset-limpio{border:0;padding:0;margin:0;min-width:0}
.fieldset-limpio legend{padding:0;margin-bottom:4px}
.lista-pasos{margin:0;padding-left:20px;display:grid;gap:4px;overflow-wrap:anywhere}

/* Pestañas internas del detalle de un negocio (admin) */
.subtabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);padding-bottom:6px}
.subtabs::-webkit-scrollbar{display:none}
.subtab{min-height:44px;padding:0 14px;border-radius:var(--r-pill);background:transparent;border:1px solid transparent;color:var(--muted);font-weight:500;font-size:.9rem;white-space:nowrap;cursor:pointer}
.subtab:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.subtab[aria-selected="true"]{color:var(--brand);background:rgba(94,227,207,.1);border-color:rgba(94,227,207,.35)}

/* Chat de prueba */
.probar{display:grid;gap:12px}
.probar .charla{min-height:280px;max-height:55vh}
.probar__form{display:flex;gap:8px;align-items:flex-end}
.probar__form .entrada{flex:1;min-height:48px;max-height:140px}

/* Ficha de contraseña nueva en cuenta / cuadro de llaves */
.llaves{display:grid;gap:10px}
.llave{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:8px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.llave__cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center}

/* ==================================================================== 4) Páginas públicas (precios, nosotros, privacidad, contacto) sobre sitio.css */
.pagina .nav__links a[aria-current="page"]{color:var(--ink);background:rgba(255,255,255,.06)}
.pagina .nav__entrar{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-pill);color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500}
.pagina .nav__entrar:hover{background:rgba(255,255,255,.06)}
.pagina .nav__derecha{display:flex;gap:4px;align-items:center}
@media (min-width:900px){.pagina .nav__entrar{display:none}}
@media (max-width:599px){.pagina .btn--nav{display:inline-flex;--pad:10px 14px;font-size:.86rem}}
@media (max-width:379px){.pagina .btn--nav{display:none}}
@media (max-width:899px){.pagina .pie{padding-bottom:40px}}
.pagina main{display:block}
.cabecera{padding:clamp(40px,7vw,80px) 0 clamp(20px,4vw,36px)}
.cabecera .h1{font-size:clamp(2rem,5.5vw,3.4rem)}
.cabecera .lead{max-width:58ch}
.seccion--corta{padding-block:clamp(28px,5vw,56px)}
.prosa{max-width:72ch;display:grid;gap:14px;color:var(--muted);font-size:1rem;line-height:1.65}
.prosa h2{font:500 1.35rem/1.25 var(--font-display);letter-spacing:-.015em;color:var(--ink);margin:18px 0 0}
.prosa h3{font:500 1.08rem/1.3 var(--font-display);color:var(--ink);margin:10px 0 0}
.prosa p,.prosa ul,.prosa ol{margin:0}
.prosa ul,.prosa ol{padding-left:22px;display:grid;gap:6px}
.prosa b,.prosa strong{color:var(--ink);font-weight:600}
.prosa a{color:var(--brand)}
.prosa .tabla{margin-top:4px}
.prosa .tabla table{min-width:0}
.indice{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;list-style:none}
.indice a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:.86rem}
.indice a:hover{color:var(--ink);border-color:var(--line-strong)}
.acciones-pagina{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.precios-explica{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.precios-explica{grid-template-columns:repeat(3,minmax(0,1fr))}}
.precios-paso{padding:18px;display:grid;gap:6px;align-content:start}
.precios-paso .h3{margin:0}
.precios-paso .p{font-size:.92rem}
.precios-num{font:500 .78rem/1 var(--font-body);letter-spacing:.1em;color:var(--brand)}
.precios-ejemplo{padding:22px;display:grid;gap:10px}
.precios-ejemplo__cifra{font:500 1.8rem/1.1 var(--font-display);letter-spacing:-.02em;margin:0}
.precios-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.84rem;color:var(--muted)}
.contacto-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.contacto-grid > *{min-width:0}
@media (min-width:900px){.contacto-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start}}
.contacto-otros{display:grid;gap:14px}
.contacto-otros .item{gap:4px}
.nosotros-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.nosotros-grid > *{min-width:0}
@media (min-width:900px){.nosotros-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start}}
.hechos{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hechos li{display:grid;gap:2px;padding:12px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.hechos b{color:var(--ink);font-weight:600}
.hechos span{color:var(--muted);font-size:.92rem}

/* ==================================================================== 5) Admin: testimonios en video, precios automáticos y negocios internos */
/* Interruptor: área táctil de 44 px y foco visible (el input real está oculto) */
.panel-body .switch{min-height:44px}
.switch input:focus-visible + .switch__pista{outline:2px solid var(--brand);outline-offset:3px}
.switch input:disabled + .switch__pista{opacity:.5}
.switch input:disabled ~ span{opacity:.7}

/* Selector de archivo con el botón del sistema al estilo del panel */
.entrada[type="file"]{padding:6px 8px;cursor:pointer;font-size:.92rem;color:var(--muted)}
.entrada[type="file"]::file-selector-button{margin-right:12px;min-height:36px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:rgba(255,255,255,.06);color:var(--ink);font:inherit;font-weight:500;cursor:pointer}
.entrada[type="file"]:hover::file-selector-button{border-color:var(--brand)}
textarea.entrada--corta{min-height:88px}
.ayuda--error{color:#FCA5A5}

/* Chip chico (etiqueta "interno") */
.chip--mini{padding:2px 8px;font-size:.72rem;gap:4px}

/* Resumen: negocios internos (la demo de la portada) salen en la lista pero no suman */
.interno{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.interno__nota{font-size:.76rem;color:var(--warn)}
.tabla tr.fila--interno td{background:rgba(245,196,81,.035)}
.nota-internos{margin:10px 0 0;font-size:.84rem;color:var(--muted);line-height:1.5}
.celda-negocio{display:grid;gap:2px;justify-items:start;min-width:0}
.tabla .chip{white-space:nowrap}
@media (max-width:699px){
  .tabla--tarjetas td .celda-negocio{justify-items:end;text-align:right}
  .tabla--tarjetas td .interno{justify-content:flex-end}
  .tabla--tarjetas tr.fila--interno{border-color:rgba(245,196,81,.3);background:rgba(245,196,81,.04)}
  .tabla--tarjetas tr.fila--interno td{background:transparent}
}

/* Testimonios: guía, tarjetas con vista previa, subida con barra de progreso */
.guia__lista{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--muted);font-size:.92rem;line-height:1.55}
.guia__lista b{color:var(--ink);font-weight:600}
.testimonios{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.testimonios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.testimonios{grid-template-columns:repeat(3,minmax(0,1fr))}}
.testimonios > .estado,.testimonios > .cargando{grid-column:1/-1}
.tcard{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px;align-content:start;min-width:0}
.tcard > *{min-width:0}
.tcard--publicado{border-color:rgba(74,222,128,.35)}
.tcard__media{display:grid;place-items:center;height:clamp(320px,88vw,420px);border-radius:var(--r-md);overflow:hidden;background:#000;border:1px solid var(--line)}
.tcard__video{width:100%;height:100%;object-fit:contain;background:#000}
.tcard__vacio{display:grid;gap:6px;justify-items:center;text-align:center;padding:20px;color:var(--muted);max-width:30ch}
.tcard__vacio p{margin:0}
.tcard__vacio-t{color:var(--ink);font-weight:600}
.tcard__cab{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-start;justify-content:space-between}
.tcard__t{font-size:1.05rem}
.tcard__t:focus-visible{outline-offset:4px}
.tcard__lugar{margin:2px 0 0;font-size:.86rem;color:var(--muted)}
.tcard__chips{display:flex;flex-wrap:wrap;gap:6px}
.tcard__frase{margin:0;padding:2px 0 2px 12px;border-left:2px solid rgba(94,227,207,.45);font-size:.95rem;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.tcard__fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tcard__falta{margin:0;font-size:.84rem;color:var(--warn)}
.tcard__borrar{margin-left:auto}
.tcard .plegable summary{min-height:44px}
.tcard__editar{padding-top:6px}
.tcard .alerta{margin:0}

.subidas{display:grid;gap:10px}
.subidas:empty{display:none}
.subida{display:grid;gap:8px;padding:10px 12px;border-radius:var(--r-md);border:1px solid rgba(94,227,207,.3);background:rgba(94,227,207,.05)}
.subida__cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:.9rem}
.subida__pct{font-variant-numeric:tabular-nums;color:var(--brand)}
.subida__barra{height:10px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);overflow:hidden}
.subida__relleno{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad);transition:width .25s linear}
.subida--guardando .subida__relleno{animation:subidaPulso 1.1s ease-in-out infinite alternate}
@keyframes subidaPulso{from{opacity:.45}to{opacity:1}}
.subida__txt{margin:0;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* Precios automáticos */
.auto-trm{display:grid;gap:4px}
.sync-resultado:empty{display:none}
.sync__t{margin:0}
.sync__sub{margin:6px 0 0;font-weight:600;font-size:.88rem}
.sync__lista{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.88rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tabla td.celda-bloque{min-width:220px}
.tabla td .plegable summary{min-height:44px;white-space:nowrap}
@media (max-width:699px){
  .tabla--tarjetas td.celda-bloque{display:grid;gap:4px;text-align:left}
  .tabla--tarjetas td.celda-bloque::before{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .pseccion,.toast{animation:none}
  .cargando::before{animation:none;border-top-color:var(--brand)}
  .subida__relleno{transition:none}
  .subida--guardando .subida__relleno{animation:none}
}

/* ==================================================================== «Ver como cliente» (ronda 2, R1)
   Franja fija arriba del panel del cliente cuando un admin de Callsy X lo está viendo en solo lectura (la pone
   web/js/app.js; reglas en src/auth/ver-como.ts). Ámbar lleno a propósito: no se puede confundir con el panel propio.
   Mide --vercomo-alto y, mientras está (body.con-vercomo), la barra, las pestañas y el chat abierto en el celular se
   corren esa misma altura para que nada quede tapado. En Admin, el mismo color avisa que el modo sigue abierto. */
:root{--vercomo-alto:48px}
.vercomo{position:sticky;top:0;z-index:62;display:flex;align-items:center;gap:10px;height:var(--vercomo-alto);padding:0 var(--gutter);
  background:var(--warn);color:#1A1400;font-size:.88rem;line-height:1.25;box-shadow:0 1px 0 rgba(0,0,0,.4)}
.vercomo__texto{flex:1;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vercomo__negocio{font-weight:700}
.vercomo__chip{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:var(--r-pill);background:#1A1400;color:var(--warn);font-size:.74rem;font-weight:600;line-height:1.35;vertical-align:1px}
.vercomo__salir{position:relative;flex:none;display:inline-block;height:38px;line-height:36px;padding:0 16px;white-space:nowrap;border-radius:var(--r-pill);
  border:1px solid rgba(26,20,0,.6);background:rgba(26,20,0,.06);color:#1A1400;font:inherit;font-weight:600;cursor:pointer;transition:background-color var(--t-hover) var(--ease)}
.vercomo__salir::after{content:"";position:absolute;inset:-5px -4px} /* el área que se toca llega a 48 px de alto */
.vercomo__salir:hover{background:rgba(26,20,0,.14)}
.vercomo__salir:focus-visible{outline:2px solid #1A1400;outline-offset:2px}
.vercomo__salir[disabled]{opacity:.6;cursor:progress}
.vercomo__corto{display:none}
@media (max-width:699px){
  .vercomo{gap:8px;font-size:.84rem}
  .vercomo__largo{display:none}
  .vercomo__corto{display:inline}
  .vercomo__chip{margin-left:6px;padding:2px 7px}
  .vercomo__salir{padding:0 12px}
  /* «de este modo» se esconde a la vista pero no al lector de pantalla (no es el «Salir» que cierra la sesión). */
  .vercomo__salir-mas{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Admin en el celular: «Mi panel» y «Salir» caben siempre; el nombre del negocio ya está en el título de la página. */
@media (max-width:479px){[data-panel="admin"] #pbar-contexto{display:none}}
.con-vercomo .pbar{top:var(--vercomo-alto)}
.con-vercomo .pside{top:calc(58px + var(--vercomo-alto))}
@media (min-width:900px){.con-vercomo .pside{height:calc(100vh - 58px - var(--vercomo-alto))}}
@media (max-width:899px){.con-vercomo .bj--abierta .bj-conv{inset:calc(58px + var(--vercomo-alto)) 0 0 0}}
@media (min-width:1000px){.con-vercomo .cx-preview{top:calc(78px + var(--vercomo-alto))}}

/* En Admin: el modo sigue abierto en esta sesión (Mi panel mostraría ese negocio en solo lectura). */
.vercomo-admin{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px;padding:10px 14px;border-radius:var(--r-md);
  border:1px solid rgba(245,196,81,.45);background:rgba(245,196,81,.08);color:#FDE68A;font-size:.92rem;line-height:1.4}
.vercomo-admin__texto{flex:1 1 240px;min-width:0;margin:0;overflow-wrap:anywhere}
.vercomo-admin__acciones{display:flex;flex-wrap:wrap;gap:8px}

/* «Conexión con tu sistema» (Inventario): las partes en una lista simple que se lee bien a 360 px. */
.inv-partes{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.4rem}
.inv-partes li{overflow-wrap:anywhere;line-height:1.4}
.inv-partes__error{margin:.15rem 0 0;color:var(--warn)}