/* Skin del panel UniversoISP, modo claro.
   Colores: bloque [data-panel-theme="light"] de frontend/src/index.css.
   Geometría de tablas: medida sobre las capturas de la auditoría (26/07).
   Ver portal/README.md — hay una discrepancia conocida entre fuente y prod. */

:root{
  --bg:#ffffff; --bg2:#f4f5f8; --sidebar:#ffffff;
  --glass:#ffffff; --card:#ffffff;
  --border:rgba(30,41,76,0.12); --border-str:rgba(30,41,76,0.22);
  --txt:#161d33; --txt2:#4a5470; --txt3:#7a839c;
  --accent:#00858c; --accent-ink:#ffffff; --accent-rgb:0 133 140;
  --accent-soft:rgba(0,133,140,0.10); --accent-glow:rgba(0,133,140,0.22);
  --ok:#12a05f; --warn:#b9781a; --bad:#c0392b; --info:#3f6fd6;
  --ok-soft:rgba(18,160,95,0.10); --warn-soft:rgba(185,120,26,0.12);
  --bad-soft:rgba(192,57,43,0.10); --info-soft:rgba(63,111,214,0.10);
  --wordmark:#1e294c; --menu-hover:rgba(30,41,76,0.05);
  --row-border:rgba(0,133,140,0.42);
  --brand-teal:#00aeb5; --brand-green:#37aa9c;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--font); font-size:14px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em}
p{margin:0}
button{font-family:inherit; color:inherit; cursor:pointer; border:0; background:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
::-webkit-scrollbar{width:4px; height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgb(var(--accent-rgb)/.22); border-radius:10px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeInRow{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .btn:hover{transform:none !important}
}

/* filo teal superior */
body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:linear-gradient(90deg,transparent,rgba(0,174,181,.55) 22%,rgba(55,170,156,.75) 50%,rgba(0,174,181,.55) 78%,transparent);
}

/* ── botones ─────────────────────────────────────────────────────────────── */
.btn{
  --c:var(--accent-rgb); --ct:#006b71;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 16px; border-radius:9px; font-size:13px; font-weight:600; line-height:1;
  white-space:nowrap; transition:transform .14s, filter .14s;
  color:#fff; background:linear-gradient(180deg,#00969d,#007d84);
  border:1px solid #006e74;
  box-shadow:0 2px 7px rgba(0,133,140,.30), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn{text-decoration:none}
.btn:hover:not(:disabled){transform:translateY(-1px); filter:brightness(1.06)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn--neutral{
  --c:20 20 35; color:#1a1a26; background:#fff;
  border:1px solid rgba(30,41,76,.16); box-shadow:0 1px 2px rgba(30,41,76,.08);
}
/* WhatsApp con su verde: es un botón que la gente reconoce por el color. */
.btn--wa{background:linear-gradient(180deg,#28b34a,#1da33e); border-color:#178a34;
  box-shadow:0 2px 7px rgba(29,163,62,.30), inset 0 1px 0 rgba(255,255,255,.22)}

.btn--sm{padding:5px 11px; font-size:12px; border-radius:7px}
.btn--block{width:100%; padding:14px 20px; font-size:15px}

/* ── tarjetas ────────────────────────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; box-shadow:0 1px 3px rgba(30,41,76,.06);
  display:flex; flex-direction:column;
}
.card-hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 22px; border-bottom:1px solid var(--border);
}
.card-hd h2{font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--txt2)}
.card-hd .lnk{font-size:12.5px; font-weight:500; color:var(--accent); cursor:pointer}
.card-hd .lnk:hover{text-decoration:underline}
.card-bd{padding:14px 22px 18px; display:flex; flex-direction:column; gap:14px}
.card-bd.flush{padding:6px 22px 12px}

.dl{display:flex; flex-direction:column}
.dl > div{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid rgba(30,41,76,.06)}
.dl > div:last-child{border-bottom:0}
.dl dt{font-size:13.5px; color:var(--txt2)}
.dl dd{margin:0; font-size:13.5px; text-align:right; font-weight:500}

/* ── inputs ──────────────────────────────────────────────────────────────── */
input:not([type=checkbox]),select,textarea{
  font-family:var(--font); font-size:14px; background:#fff; color:var(--txt);
  border:1px solid var(--border); border-radius:10px; padding:11px 13px; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:var(--txt3)}
input:focus,select:focus,textarea:focus{
  border-color:rgb(var(--accent-rgb)/.6); box-shadow:0 0 0 3px var(--accent-glow); outline:none;
}
textarea{resize:vertical; min-height:88px; line-height:1.5}

/* ── badges de estado ────────────────────────────────────────────────────── */
.st{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:500; white-space:nowrap}
.st::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto}
.st.nodot::before{display:none}
.st.ok{background:var(--ok-soft); color:var(--ok)}
.st.warn{background:var(--warn-soft); color:var(--warn)}
.st.bad{background:var(--bad-soft); color:var(--bad)}
.st.info{background:var(--info-soft); color:var(--info)}
.st.none{background:rgba(30,41,76,.06); color:var(--txt3)}

/* ── listas ──────────────────────────────────────────────────────────────
   Antes esto eran tablas con min-width, y en pantalla angosta obligaban a
   deslizar para el costado — inaceptable en un celular. Ahora cada fila es
   una caja flexible que se reacomoda sola: en ancho entra todo en una línea,
   en angosto se apila. Se conserva el aspecto de la fila del panel: fondo
   blanco, contorno teal de 1,5px y radio 10.                              */
.lista{display:flex; flex-direction:column; gap:6px}
.item{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  width:100%; text-align:left;
  background:#fff; border:1.5px solid var(--row-border); border-radius:10px;
  padding:11px 15px; min-height:45px;
  transition:background .15s, transform .18s;
}
.item--click{cursor:pointer}
.item--click:hover{background:var(--accent-soft); transform:translateY(-1px)}
.item-a{flex:1 1 190px; min-width:0; display:flex; flex-direction:column; gap:3px}
.item-t{font-size:14.5px; font-weight:700; color:var(--txt)}
.item-s{font-size:12px; color:var(--txt3); overflow-wrap:anywhere}
.item-b{display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex-shrink:0}
.item-monto{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums}
.item-c{flex-shrink:0; display:flex; gap:8px; flex-wrap:wrap}
.item--sel{border-color:rgb(var(--accent-rgb)/.5)}
/* La casilla, grande: en un celular una de 13px no se acierta. */
.tilde{display:flex; align-items:center; flex-shrink:0; cursor:pointer}
.tilde input{width:20px; height:20px; accent-color:var(--accent); cursor:pointer}
.item-chev{color:var(--txt3); flex-shrink:0; display:flex}
.tfoot{text-align:center; font-size:12px; color:var(--txt3); padding:2px 0}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}

/* ── estructura ──────────────────────────────────────────────────────────
   Una sola columna: barra arriba, contenido abajo. La misma en celular y en
   escritorio — no hay barra lateral ni pestañas al pie. */
.app{display:flex; flex-direction:column; height:100vh; overflow:hidden; background:var(--bg)}

/* Fila de marca: fina, solo logo y salir. No compite con el selector. */
.marca{
  display:flex; align-items:center; gap:12px; flex-shrink:0;
  width:100%; max-width:860px; margin:0 auto; padding:9px 20px; background:#fff;
}
.logo{width:36px; height:auto; object-fit:contain; display:block; flex-shrink:0}
/* La marca escrita al lado del isotipo: solo con la imagen no se lee de quién
   es el portal, sobre todo en un celular donde entra chica. */
.marca-link{display:flex; align-items:center; gap:11px; text-decoration:none}
.wordmark{font-size:18px; font-weight:700; letter-spacing:.01em; color:var(--wordmark); line-height:1}
.wordmark i{font-style:normal; color:var(--accent)}
.logo-lg{width:104px; height:auto; object-fit:contain; display:block}   /* login */
.salir{
  margin-left:auto; flex-shrink:0; font-size:13px; font-weight:500; color:var(--txt2);
  padding:7px 12px; border-radius:8px;
}
.salir:hover{background:var(--menu-hover); color:var(--txt)}

/* El selector: tres tercios iguales, a todo el ancho, con cuerpo.
   Idéntico en celular y en escritorio. */
/* El selector comparte ancho y eje con el contenido: si va a sangre mientras
   las tarjetas están centradas, el subrayado de la pestaña activa no se apoya
   en nada. */
.selectorbar{border-bottom:1px solid var(--border); background:#fff; flex-shrink:0}
.selector{
  display:flex; width:100%; max-width:860px; margin:0 auto; background:#fff;
}
.selector button{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 8px; font-size:15px; font-weight:600; color:var(--txt3);
  border-bottom:3px solid transparent; margin-bottom:-1px;
  transition:color .14s, background .14s;
}
.selector button svg{flex-shrink:0}
.selector button:hover[aria-selected="false"]{color:var(--txt2); background:var(--menu-hover)}
.selector button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent)}
.nowrap{white-space:nowrap}

.main{flex:1; display:flex; flex-direction:column; min-width:0; overflow-y:auto}

/* Todo el contenido vive en una misma columna centrada: encabezado, filtros y
   tarjetas comparten ancho y eje, así no queda nada colgado de un costado. */
.dhead,.phead,.ptools,.content{width:100%; max-width:860px; margin-left:auto; margin-right:auto}

.phead{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:20px 20px 0}
.phead h1{font-size:24px}
.phead .right{margin-left:auto; display:flex; align-items:center; gap:10px}
.ptools{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px 14px}
.content{padding:6px 20px 28px; display:flex; flex-direction:column; gap:18px}
/* Inicio en vertical: una tarjeta debajo de la otra, ancho acotado para que
   la línea no se estire de punta a punta en escritorio. */
.stack{display:flex; flex-direction:column; gap:16px; width:100%}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; align-items:start}

/* Lo que el cliente puede pedir que le cambien. */
.cambios{display:flex; flex-direction:column; gap:10px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--border)}
.cambio{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cambio-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.cambio-t .k{font-size:12px; color:var(--txt3); font-weight:600}
.cambio-t .v{font-size:13.5px; color:var(--txt); overflow-wrap:anywhere}

/* Elección de velocidad. */
.opciones{display:flex; flex-direction:column; gap:8px}
.opcion{display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer;
  border:1px solid var(--border); border-radius:12px; transition:border-color .14s, background .14s}
.opcion:hover{border-color:rgb(var(--accent-rgb)/.45); background:var(--accent-soft)}
.opcion:has(input:checked){border-color:var(--accent); background:var(--accent-soft); border-width:1.5px}
.opcion input{width:auto; flex:0 0 auto; accent-color:var(--accent)}
.opcion .vel{font-size:17px; font-weight:700; min-width:64px}
.opcion .tec{font-size:12.5px; color:var(--txt2); flex:1}

.dhead{padding:20px 20px 18px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:10px}
.dhead .l1{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.dhead .l1 .btn{margin-right:4px}
.dhead h1{font-size:23px}
.dhead .l2{display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--txt2)}
/* El aviso de corte: es lo único que tiene que saltar del encabezado. */
.cortado{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:#fff; background:var(--bad); border-radius:8px; padding:5px 13px;
}
.cortado::before{content:""; width:8px; height:8px; border-radius:50%; background:#fff;
  animation:pulse 2.2s ease-in-out infinite}

.livedot{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600}
.livedot::before{content:""; width:9px; height:9px; border-radius:50%; background:currentColor}
.livedot.ok{color:var(--ok)}
.livedot.bad{color:var(--bad)}
.livedot.bad::before{animation:pulse 2.2s ease-in-out infinite}

/* ── pill tabs ───────────────────────────────────────────────────────────── */
.pills{display:inline-flex; align-items:center; gap:4px; padding:4px;
  border-radius:11px; border:1px solid var(--border); background:#fff}
.pills button{display:inline-flex; align-items:center; gap:7px; padding:7px 15px;
  font-size:13px; font-weight:500; border-radius:8px; color:var(--txt2)}
.pills button:hover[aria-selected="false"]{background:var(--menu-hover); color:var(--txt)}
.pills button[aria-selected="true"]{background:var(--accent); color:#fff; font-weight:600}
.pills--sm button{padding:5px 11px; font-size:12px}

/* Leyenda del gráfico de consumo. */
/* La tarjeta de pago es la principal: importe y acción en la misma línea, con
   un borde más marcado para que no pese igual que el resto. */
.card.hero{border-color:rgb(var(--accent-rgb)/.35); box-shadow:0 2px 10px rgba(0,133,140,.09)}
.card.hero--alerta{border-color:rgba(192,57,43,.35); box-shadow:0 2px 10px rgba(192,57,43,.09)}
/* Al día: sin importe ni chapita con punto, solo la frase. */
.card.hero--ok{border-color:rgba(18,160,95,.32); box-shadow:0 2px 10px rgba(18,160,95,.08)}
.hero-ok-txt{font-size:20px; font-weight:700; color:var(--ok); letter-spacing:-.01em}
.hero-cuerpo{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:20px 22px 14px}
.hero-txt{flex:1; min-width:200px; display:flex; flex-direction:column; gap:5px}
.hero-rot{font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--txt2)}
.hero-pie{font-size:12.5px; color:var(--txt3); line-height:1.45; max-width:44ch}
/* Un solo tamaño de botón en todo el portal: sin atajos chicos que se lean
   como enlaces de segunda. */
/* Los botones del pago van debajo del importe y ocupan todo el ancho de la
   tarjeta. Se reparten el espacio en vez de quedar apretados a un costado:
   pagar es la única acción que el cliente vino a hacer. */
.hero-acc{display:flex; gap:10px; flex-wrap:wrap; padding:0 22px 20px}
.btn--ancho{flex:1 1 200px; min-width:170px; padding:14px 20px; font-size:15px}
.hero-pie--warn{color:var(--warn); font-weight:600}
.hero-pie--bad{color:var(--bad); font-weight:600}
.hero-pie--ok{color:var(--txt3)}
.hero-nota{padding:11px 22px; border-top:1px solid var(--border); background:var(--warn-soft);
  font-size:12.5px; color:var(--txt2); line-height:1.5}
.hero-nota b{color:var(--txt)}
.btn--grande{padding:12px 22px; font-size:15px; border-radius:10px}

/* Enlace de texto, para acciones secundarias que no deben competir con el botón. */
.lnk{font-size:12.5px; font-weight:500; color:var(--accent); cursor:pointer; background:none; border:0; padding:0}
.lnk:hover{text-decoration:underline}

/* Fila de lista con acción a la derecha. */
.dl-acc{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid rgba(30,41,76,.06); flex-wrap:wrap}
.dl-acc:last-child{border-bottom:0}
.dl-acc dt{font-size:13.5px; color:var(--txt2); flex:0 0 auto}
.dl-acc dd{margin:0; display:flex; align-items:center; justify-content:flex-end; gap:12px;
  flex:1; min-width:0; text-align:right; flex-wrap:wrap}
.dl-acc dd .v{font-size:13.5px; font-weight:500; overflow-wrap:anywhere}

/* Adjuntar archivos. El <input type=file> nativo es feo e inconsistente entre
   navegadores, así que se esconde y el label hace de botón. */
.adj-zona{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.adj-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; border-radius:9px; font-size:13px; font-weight:600; line-height:1;
  cursor:pointer; color:#1a1a26; background:#fff;
  border:1px solid rgba(30,41,76,.16); box-shadow:0 1px 2px rgba(30,41,76,.08);
  transition:transform .14s, border-color .14s;
}
.adj-btn:hover{transform:translateY(-1px); border-color:rgb(var(--accent-rgb)/.5)}

/* Motivos del reclamo: opciones grandes en vez de un select que en el celular
   esconde de qué se puede reclamar. */
.opcion--motivo{padding:12px 15px}

.acciones{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
/* Los dos botones de contacto, iguales y repartidos: con anchos distintos uno
   parecía la acción principal y el otro un agregado. */
.acciones--par{gap:10px}
.acciones--par > .btn{flex:1 1 190px; min-width:170px}
/* El gráfico ocupa todo el ancho de la tarjeta y crece en alto: antes quedaba
   como una estampilla y los números no se leían. */
.graf{width:100%; margin:2px 0 4px}
.graf svg{width:100%; height:auto; display:block; min-height:210px}

.leyenda{display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--txt2)}
.leyenda span{display:inline-flex; align-items:center; gap:7px}
.leyenda .ln{width:16px; height:0; border-top:2px solid var(--accent); display:inline-block}
.leyenda .ln.sub{border-top:2px dashed var(--info)}

.pills .cnt{font-size:11.5px; font-weight:700; padding:1px 7px; border-radius:99px;
  background:rgba(30,41,76,.08); color:var(--txt2)}
.pills button[aria-selected="true"] .cnt{background:rgba(255,255,255,.24); color:#fff}

/* ── varios ──────────────────────────────────────────────────────────────── */
.tiny{font-size:12.5px; line-height:1.55}
.dim{color:var(--txt2)} .dim3{color:var(--txt3)}
.lbl{font-size:12.5px; font-weight:600; color:var(--txt2)}
.field{display:flex; flex-direction:column; gap:7px}
.rowf{display:flex; gap:14px; flex-wrap:wrap}
.grow{flex:1; min-width:220px}
.amount{font-size:34px; font-weight:700; letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1.05}
.amount .cur{font-size:19px; font-weight:600; color:var(--txt2); margin-right:2px}
.amount.bad{color:var(--bad)}
.callout{border:1px solid var(--border); border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:0 10px 10px 0; padding:12px 14px;
  font-size:12.5px; color:var(--txt2); line-height:1.55}
.callout.warn{border-left-color:var(--warn); background:var(--warn-soft)}
.callout.bad{border-left-color:var(--bad); background:var(--bad-soft)}
.callout b{color:var(--txt)}
.payopt{display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:13px 15px; border-radius:12px; border:1px solid var(--border); background:#fff;
  transition:border-color .15s, background .15s, transform .15s}
.payopt:hover{border-color:rgb(var(--accent-rgb)/.5); background:var(--accent-soft); transform:translateY(-1px)}
.payopt .pi{width:38px; height:38px; border-radius:10px; background:rgba(30,41,76,.05);
  display:grid; place-items:center; color:var(--txt2); flex:0 0 auto}
.payopt .pt{font-size:13.5px; font-weight:600}
.payopt .ps{font-size:11.5px; color:var(--txt3)}
.linkbox{display:flex; align-items:center; gap:10px; border:1px solid var(--border);
  background:var(--bg2); border-radius:10px; padding:10px 12px}
.linkbox code{flex:1; min-width:0; font-family:var(--mono); font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.thread{display:flex; flex-direction:column; gap:14px}
.msg{max-width:82%; display:flex; flex-direction:column; gap:5px}
.msg .who{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--txt3)}
.msg .bub{padding:11px 14px; border-radius:12px; font-size:13.5px; line-height:1.55;
  border:1px solid var(--border); background:#fff; white-space:pre-wrap}
.msg time{font-size:11px; color:var(--txt3)}
.msg.me{align-self:flex-end}
.msg.me .who,.msg.me time{text-align:right}
.msg.me .bub{background:var(--accent-soft); border-color:rgb(var(--accent-rgb)/.28)}
.center{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:36px 10px}
.tick{width:56px; height:56px; border-radius:50%; background:var(--ok-soft); color:var(--ok); display:grid; place-items:center}
.skel{height:45px; border-radius:10px; background:linear-gradient(90deg,#f0f2f6,#e6eaf1,#f0f2f6);
  background-size:200% 100%; animation:sk 1.2s linear infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── login ───────────────────────────────────────────────────────────────── */
.loginwrap{min-height:100vh; display:grid; place-items:center; padding:26px; background:var(--bg2)}
.logincard{width:100%; max-width:400px; background:#fff; border-radius:18px; padding:34px 32px 32px;
  box-shadow:0 10px 44px rgba(30,41,76,.10), 0 2px 8px rgba(30,41,76,.05);
  display:flex; flex-direction:column; gap:18px}
.login-brand{display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:4px}
.login-brand .wm{display:flex; align-items:center; gap:9px; font-size:30px; font-weight:700;
  color:var(--wordmark); letter-spacing:-.02em}
.login-brand .wm i{font-style:normal; color:var(--accent)}
.vchip{font-size:11.5px; font-weight:700; color:var(--accent); background:var(--accent-soft);
  border:1px solid rgb(var(--accent-rgb)/.28); border-radius:99px; padding:2px 9px}
.btn-login{width:100%; padding:14px; border-radius:10px; font-size:15px; font-weight:700; color:#fff;
  background:linear-gradient(90deg,#0d7f80,#2ba98d); box-shadow:0 6px 20px rgba(43,169,141,.30);
  transition:filter .14s, transform .14s}
.btn-login:hover:not(:disabled){filter:brightness(1.05); transform:translateY(-1px)}
.btn-login:disabled{opacity:.6; cursor:not-allowed}
.err{font-size:12.5px; color:var(--bad); background:var(--bad-soft);
  border:1px solid rgba(192,57,43,.25); border-radius:8px; padding:9px 12px; line-height:1.45}

.demobadge{position:fixed; right:12px; bottom:12px; z-index:70; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--warn); background:var(--warn-soft);
  border:1px solid rgba(185,120,26,.35); border-radius:99px; padding:5px 12px}

#flash{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:#fff;
  color:var(--txt); border:1px solid var(--border); box-shadow:0 12px 32px rgba(30,41,76,.20);
  font-size:13px; padding:10px 16px; border-radius:10px; z-index:80;
  max-width:min(92vw,430px); text-align:center; line-height:1.45}

/* ── pantallas chicas ────────────────────────────────────────────────────
   El layout no cambia, pero la TIPOGRAFÍA SUBE. Antes acá se achicaba todo,
   que es al revés de lo que hace falta: en un teléfono, sostenido con la mano
   y a más distancia relativa que un monitor, 13 px se leen como una hormiga.
   Se toca solo el aire de los costados.                                      */
@media (max-width:640px){
  body{font-size:16px}

  .marca{padding:10px 14px}
  .logo{width:34px}
  .wordmark{font-size:18px}
  .salir{font-size:15px; padding:8px 12px}

  /* Con cuatro solapas hay que ceder ancho: menos aire y menos cuerpo. */
  .selector button{padding:14px 4px; font-size:14px; gap:6px}

  .phead{padding:18px 14px 0}
  .phead h1{font-size:24px}
  .ptools{padding:12px 14px}
  .content{padding:8px 14px 24px}
  .dhead{padding:18px 14px 14px}
  .dhead h1{font-size:23px}
  .dhead .l2{font-size:14px; gap:12px}
  .grid2{grid-template-columns:1fr}
  .logincard{padding:28px 22px}

  /* Tarjetas y listas */
  .card-hd h2{font-size:12.5px}
  .card-bd{padding:16px 18px 20px}
  .card-bd.flush{padding:8px 18px 14px}
  .dl dt,.dl dd,.dl-acc dt,.dl-acc dd .v{font-size:15px}
  .item{padding:13px 15px}
  .item-t{font-size:16px}
  .item-s{font-size:13.5px}
  .item-monto{font-size:17px}
  .st{font-size:13.5px; padding:4px 11px}
  .tiny{font-size:14px}
  .lbl{font-size:14px}
  .hero-rot{font-size:12.5px}
  .hero-pie{font-size:14px}
  .amount{font-size:38px}
  .hero-ok-txt{font-size:21px}
  .cortado{font-size:15px}

  /* Botones y campos: en el celular se tocan con el dedo, no con el mouse. */
  .btn,.adj-btn{padding:12px 18px; font-size:15px}
  .acciones .btn{flex:1 1 100%}
  .hero-acc{padding:0 18px 18px}
  .btn--ancho{flex:1 1 100%; padding:16px 20px; font-size:16px}
  input:not([type=checkbox]),select,textarea{font-size:16px; padding:13px 14px}
  .opcion{padding:14px 16px}
  .opcion .vel{font-size:19px}
  .opcion .tec{font-size:14px}
  .tfoot{font-size:13.5px}
  .msg .bub{font-size:15px}
  .leyenda{font-size:14px}
}

/* Un dato aparte: en iOS, un campo con letra menor a 16 px hace que Safari
   haga zoom solo al enfocarlo y después la página queda corrida. Por eso los
   inputs de arriba van en 16. */
}
@media (max-width:430px){
  /* Antes de recortar una palabra, se va el ícono: el texto es lo que se lee. */
  .selector button svg{display:none}
  .selector button{font-size:14.5px; padding:14px 3px}
}
@media (max-width:340px){
  .selector button{font-size:13px}
}