/* =========================================================================
   Panel de Snoozim (admin.snoozim.com).

   Hoja propia y no dentro de style.css: la tienda no tiene por qué cargar
   el panel. Reutiliza los tokens de style.css (--ink, --mute, --hair,
   --card, --brand, --s-*, --t-*), que se carga antes.

   Todo lo que antes iba en <style> dentro de cada página está aquí: la
   política de seguridad (style-src 'self') descarta en silencio los estilos
   en línea, también los atributos style="", y por eso Vouchers y SIMs
   llevaban tiempo sin estilos.

   Tarjetas blancas planas sobre gris, sin sombras ni degradados: el relieve
   lo da el contraste y el aire, no un efecto.
   ========================================================================= */

.p {
  --p-fondo: #f2f2f0;
  --p-radio: 26px;
  --p-radio-s: 16px;
  background: var(--p-fondo);
  color: var(--ink);
  min-height: 100vh;
  margin: 0;
}

/* ---- Cabecera -------------------------------------------------------- */
.p-top {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--hair);
  background: var(--p-fondo);
  position: sticky; top: 0; z-index: 20;
}
.p-logo { display: flex; align-items: center; flex: 0 0 auto; padding-right: var(--s-3); }
.p-logo img { display: block; }

.p-tabs { display: flex; gap: var(--s-2); flex: 1 1 auto; min-width: 0; }
.p-tab {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 18px; border-radius: 999px;
  color: var(--mute); text-decoration: none; font-weight: 700; font-size: var(--t--1);
  white-space: nowrap;
}
.p-tab:hover { color: var(--ink); background: var(--card); }
.p-tab.is-on { background: var(--ink); color: #fff; }
.p-tab--movil { display: none; }

.p-acciones { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.p-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 18px; border-radius: 999px;
  background: var(--card); color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: var(--t--1); border: 1px solid var(--hair);
}
.p-pill:hover { border-color: var(--ink); }
.p-salir { margin: 0; }
.p-circ {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--card); color: var(--ink); border: 1px solid var(--hair); cursor: pointer;
}
.p-circ:hover { border-color: var(--ink); }

/* ---- Cuerpo: raíl + contenido ---------------------------------------- */
.p-cuerpo { display: flex; align-items: flex-start; }
.p-rail {
  position: sticky; top: 74px;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  border-right: 1px solid var(--hair);
  min-height: calc(100vh - 74px);
}
.p-rail-i {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--mute);
}
.p-rail-i:hover { background: var(--card); color: var(--ink); }
.p-rail-i.is-on { background: var(--ink); color: #fff; }

.p-main { flex: 1 1 auto; min-width: 0; padding: var(--s-6) var(--s-8) var(--s-10); max-width: 1320px; }

.p-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6); }
.p-migas { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s-2); font-size: var(--t--1); color: var(--mute); }
.p-h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.05; letter-spacing: -.035em; }
.p-cab-extra { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

/* ---- Periodo: 7 / 30 / 90 días / 12 meses o dos fechas --------------- */
.p-periodo { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--hair); }
.p-periodo-i { padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: var(--t--1); color: var(--ink); text-decoration: none; white-space: nowrap; }
.p-periodo-i:hover { background: var(--ground); }
.p-periodo-i.is-on { background: var(--ink); color: #fff; }
.p-periodo-rango { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--hair); }
.p-periodo-rango.is-on { border-color: var(--ink); }
.p-periodo-rango input { font: inherit; font-size: var(--t--1); padding: 4px 0; border: 0; background: transparent; color: var(--ink); }
.p-periodo-rango .p-boton { padding: 8px 16px; }
@media (max-width: 640px) {
  .p-cab-extra { width: 100%; }
  .p-periodo { width: 100%; justify-content: space-between; }
  .p-periodo-rango { width: 100%; justify-content: space-between; }
}
.p-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 16px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--hair); font-weight: 700; font-size: var(--t--1);
}

/* ---- Rejilla de tarjetas --------------------------------------------- */
.p-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }
.p-c4 { grid-column: span 4; } .p-c5 { grid-column: span 5; } .p-c3 { grid-column: span 3; }
.p-c7 { grid-column: span 7; } .p-c8 { grid-column: span 8; } .p-c12 { grid-column: 1 / -1; }

.p-card {
  background: var(--card); border-radius: var(--p-radio);
  padding: var(--s-6); min-width: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.p-card--amarilla { background: var(--brand); }
.p-card--negra { background: var(--ink); color: #fff; }
.p-card--negra .p-sub, .p-card--negra .p-nota { color: rgba(255,255,255,.62); }

.p-card-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.p-card-t { margin: 0; font-size: var(--t-1); letter-spacing: -.01em; }
.p-card-ir {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hair); color: var(--ink);
}
.p-card--negra .p-card-ir { border-color: rgba(255,255,255,.25); color: #fff; }
.p-card--amarilla .p-card-ir { border-color: rgba(0,0,0,.18); }
.p-card-ir:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.p-sub { margin: 0; color: var(--mute); font-size: var(--t--1); }
.p-cifra { margin: 0; font-size: clamp(34px, 4.2vw, 48px); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.p-cifra small { font-size: .5em; color: var(--mute); letter-spacing: -.01em; }
.p-card--negra .p-cifra small { color: rgba(255,255,255,.55); }
.p-card--amarilla .p-cifra small { color: rgba(0,0,0,.55); }
.p-nota { margin: 0; font-size: var(--t--2); color: var(--mute); line-height: 1.5; }

.p-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--t--1); }
.p-delta--sube::before { content: "▲"; font-size: .75em; }
.p-delta--baja::before { content: "▼"; font-size: .75em; }

/* Píldoras pequeñas de dato, como "10 Wallets / 26 Assets". */
.p-mini { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: auto; }
.p-mini > div { background: var(--p-fondo); border-radius: var(--p-radio-s); padding: 12px 16px; min-width: 84px; }
.p-card--negra .p-mini > div { background: rgba(255,255,255,.08); }
.p-card--amarilla .p-mini > div { background: rgba(255,255,255,.45); }
.p-mini b { display: block; font-size: var(--t-1); line-height: 1.1; }
.p-mini span { font-size: var(--t--2); color: var(--mute); }
.p-card--negra .p-mini span { color: rgba(255,255,255,.6); }

/* ---- Gráficos (SVG con atributos: la política no deja style="") -------- */
.p-barras { width: 100%; height: auto; display: block; margin-top: auto; }
.p-barras .b { fill: var(--p-fondo); }
.p-barras .b.is-hoy { fill: var(--ink); }
.p-barras .v { font: 700 11px Poppins, sans-serif; fill: var(--ink); text-anchor: middle; }
.p-barras .d { font: 400 11px Poppins, sans-serif; fill: var(--mute); text-anchor: middle; }
.p-barras .etq { fill: var(--brand); }

.p-embudo { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); }
.p-paso { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s-3); align-items: baseline; }
.p-paso-n { font-weight: 700; font-size: var(--t-0); }
.p-paso-l { font-size: var(--t--1); color: var(--mute); }
.p-paso svg { grid-column: 1 / -1; width: 100%; height: 10px; display: block; }
.p-paso .fondo { fill: var(--p-fondo); }
.p-paso .lleno { fill: var(--ink); }
.p-paso.is-final .lleno { fill: var(--brand); }
.p-paso-pct { font-size: var(--t--2); color: var(--mute); }

/* ---- Listas y tablas dentro de tarjetas ------------------------------- */
.p-lista { list-style: none; margin: 0; padding: 0; }
.p-lista li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--hair); font-size: var(--t--1); }
.p-lista li:first-child { border-top: 0; }
.p-lista b { font-weight: 700; }

.p-tabla-w { overflow-x: auto; margin: 0 calc(-1 * var(--s-2)); }
.p-tabla { width: 100%; border-collapse: collapse; font-size: var(--t--1); }
.p-tabla th { text-align: left; font-size: var(--t--2); color: var(--mute); font-weight: 700; padding: var(--s-2); text-transform: uppercase; letter-spacing: .04em; }
.p-tabla td { padding: var(--s-3) var(--s-2); border-top: 1px solid var(--hair); white-space: nowrap; }
.p-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

.p-estado { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--t--2); font-weight: 700; background: var(--p-fondo); }
.p-estado--ok { background: var(--brand); }
.p-estado--mal { background: var(--ink); color: #fff; }

.p-cita { margin: 0; font-size: var(--t--1); line-height: 1.55; color: var(--ink); }
.p-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 12px 20px; border-radius: 999px; border: 0;
  background: var(--ink); color: #fff; font-weight: 700; font-size: var(--t--1); text-decoration: none; cursor: pointer;
}
.p-boton--claro { background: var(--card); color: var(--ink); border: 1px solid var(--hair); }
.p-boton--peligro { background: #9b1c1c; }

/* ---- Las páginas de siempre, dentro del armazón ----------------------- */
/* Su contenido usa .fnl-*: se le da forma de tarjeta en vez de reescribirlo. */
.p .fnl { max-width: none; margin: 0; padding: 0; }
.p .fnl-top { display: none; }
.p .fnl > section, .p .fnl-real { background: var(--card); border-radius: var(--p-radio); padding: var(--s-6); margin: 0 0 var(--s-5); }
.p .fnl > h2 { margin: var(--s-8) 0 var(--s-4); font-size: var(--t-1); }
.p .fnl-table { background: var(--card); border-radius: var(--p-radio); overflow: hidden; }
.p .fnl-form { margin-top: var(--s-4); }

/* ---- Móvil ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .p-c4, .p-c5, .p-c3, .p-c7, .p-c8 { grid-column: span 6; }
  .p-main { padding: var(--s-5) var(--s-5) var(--s-10); }
}
@media (max-width: 760px) {
  .p-top { flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
  .p-logo { order: 1; }
  .p-acciones { order: 2; margin-left: auto; }
  .p-pill span { display: none; }
  .p-pill { padding: 10px; }
  /* Una sola tira deslizable con todas las secciones: sin raíl en el móvil. */
  .p-tabs { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4) 2px; }
  .p-tabs::-webkit-scrollbar { display: none; }
  .p-tab--movil { display: inline-flex; }
  .p-tab { padding: 9px 14px; }
  .p-rail { display: none; }
  .p-main { padding: var(--s-5) var(--s-4) var(--s-10); }
  .p-grid { gap: var(--s-4); }
  .p-c4, .p-c5, .p-c3, .p-c7, .p-c8 { grid-column: 1 / -1; }
  .p-card { padding: var(--s-5); }
}

/* Agentes: el interruptor y los formularios de cada pieza. */
.p-interruptor { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); }
.p-en-linea { display: inline; margin: 0 0 0 var(--s-2); }
.p-en-linea .p-boton { padding: 8px 14px; }

/* =========================================================================
   Vouchers y SIMs: lo que antes iba en un <style> dentro de cada página y
   la política de seguridad descartaba en silencio. Va acotado a .p-legado
   para que sus reglas genéricas (table, th, td) no pisen el resto.
   ========================================================================= */
.p-legado .adm-wrap { max-width: var(--w); margin: 0 auto; }
.p-legado .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-6); }
.p-legado .stat { background: var(--card); border-radius: var(--r-card); padding: var(--s-6) var(--s-6); }
.p-legado .stat-n { font-size: 36px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: var(--s-1); }
.p-legado .stat-n.green { color: #1a7a1a; }
.p-legado .stat-n.amber { color: #8a6000; }
.p-legado .stat-label { font-size: var(--t--2); font-weight: 700; letter-spacing: .04em; color: var(--mute); text-transform: uppercase; }
.p-legado .toolbar { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-4); }
.p-legado .toolbar select, .p-legado .toolbar input[type=text] { padding: var(--s-2) var(--s-3); border: var(--line) solid var(--hair);
  border-radius: var(--r-field); font: inherit; font-size: var(--t--1);
  background: var(--card); color: var(--ink); height: 38px; }
.p-legado .toolbar select:focus, .p-legado .toolbar input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.p-legado .spacer { flex: 1; }
.p-legado .btn-adm { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-5); height: 38px; background: var(--ink); color: var(--card); border: none; border-radius: var(--r-pill); font: 700 var(--t--1)/1 var(--font); cursor: pointer; text-decoration: none; }
.p-legado .btn-adm:hover { opacity: .85; }
.p-legado .btn-adm--ghost { background: var(--card); color: var(--ink); border: var(--line) solid var(--hair); }
.p-legado .btn-adm--ghost:hover { background: var(--hair); opacity: 1; }
.p-legado .btn-adm--sm { height: 30px; padding: 0 var(--s-3); font-size: var(--t--2); }
.p-legado .table-wrap { background: var(--card); border-radius: var(--r-card); overflow-x: auto; }
.p-legado table { width: 100%; border-collapse: collapse; }
.p-legado th { text-align: left; padding: var(--s-3) var(--s-5); font-size: var(--t--2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); border-bottom: var(--line) solid var(--hair); white-space: nowrap; }
.p-legado td { padding: var(--s-3) var(--s-5); border-bottom: var(--line) solid var(--hair); font-size: var(--t--1); white-space: nowrap; }
.p-legado tr:last-child td { border-bottom: none; }
.p-legado tr:hover td { background: var(--ground); }
.p-legado .badge { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--t--2); font-weight: 700; letter-spacing: .03em; }
.p-legado .badge.ok { background: #e6f4e6; color: #1a7a1a; }
.p-legado .badge.used { background: var(--ground); color: var(--mute); }
.p-legado .badge.exp { background: #fdecea; color: #b00; }
.p-legado .code-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--t--2); letter-spacing: .04em; }
.p-legado .empty-row td { text-align: center; color: var(--mute); padding: var(--s-14); font-size: var(--t--1); }
.p-legado .pager { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5); border-top: var(--line) solid var(--hair); font-size: var(--t--1); color: var(--mute); }
.p-legado .pager-btns { display: flex; gap: var(--s-2); }
.p-legado .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 100; }
.p-legado .modal-bg[hidden] { display: none; }
.p-legado .modal { background: var(--card); border-radius: var(--r-block); width: 420px; max-width: calc(100vw - 32px); padding: var(--s-10) var(--s-8); }
.p-legado .modal h2 { font-size: var(--t-1); margin-bottom: var(--s-6); }
.p-legado .field { margin-bottom: var(--s-5); }
.p-legado .field label { display: block; font-size: var(--t--2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin-bottom: var(--s-2); }
.p-legado .field input, .p-legado .field select { width: 100%; padding: var(--s-3) var(--s-4); border: var(--line) solid var(--hair); border-radius: var(--r-field); font: inherit; font-size: var(--t-0); background: var(--ground); }
.p-legado .field input:focus, .p-legado .field select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.p-legado .modal-actions { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
.p-legado .form-msg { font-size: var(--t--1); margin-top: var(--s-4); color: #b00; }
.p-legado .form-msg.ok { color: #1a7a1a; }
.p-legado .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--hair); border-top-color: var(--ink); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .p-legado .stats { grid-template-columns: 1fr 1fr; }
  .p-legado table { font-size: 12px; }
  .p-legado th, .p-legado td { padding: var(--s-2) var(--s-3); }
}
.p-legado .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); margin-bottom: var(--s-6); }
.p-legado .stat { background: var(--card); border-radius: var(--r-card); padding: var(--s-5) var(--s-6); }
.p-legado .stat-n { font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: var(--s-1); }
.p-legado .stat-n.red { color: #b00; }
.p-legado .toolbar select, .p-legado .toolbar input[type=text] { padding: var(--s-2) var(--s-3); border: var(--line) solid var(--hair); border-radius: var(--r-field); font: inherit; font-size: var(--t--1); background: var(--card); color: var(--ink); height: 38px; }
.p-legado .badge { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--t--2); font-weight: 700; }
.p-legado .badge.active { background: #e6f4e6; color: #1a7a1a; }
.p-legado .badge.expired { background: #fdecea; color: #b00; }
.p-legado .badge.full { background: #eee; color: var(--mute); }
.p-legado .badge.pend { background: #fff8e1; color: #8a6000; }
.p-legado .usage-bar-wrap { display: flex; align-items: center; gap: var(--s-3); min-width: 140px; }
.p-legado .usage-bar { flex: 1; height: 5px; background: var(--hair); border-radius: 99px; overflow: hidden; }
.p-legado .usage-bar-fill { height: 100%; border-radius: 99px; background: var(--ink); transition: width .4s; }
.p-legado .usage-bar-fill.hi { background: #b00; }
.p-legado .usage-label { font-size: var(--t--2); color: var(--mute); white-space: nowrap; }
@media (max-width: 700px) {
  .p-legado .stats { grid-template-columns: repeat(3, 1fr); }
  .p-legado th, .p-legado td { padding: var(--s-2) var(--s-3); font-size: 12px; }
}
.p-legado tr.is-usado td { opacity: .55; }
.p-legado .celda-lote { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.p-legado .celda-cap { text-transform: capitalize; }
.p-legado .celda-fuerte { font-weight: 700; }
.p-legado .celda-iccid { font-family: ui-monospace, monospace; font-size: 11px; color: var(--mute); }
.p-legado .badge.parcial { background: #fff8e1; color: #8a6000; }

/* Vouchers y SIMs: lo que antes eran atributos style="" (bloqueados). */
.p-vivo { color: #1a7a1a; }
.p-vivo-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1a7a1a; transition: transform .3s, background .3s; }
.p-legado .is-oculto { display: none; }
.p-legado .campo-busca { width: 240px; max-width: 100%; }
.p-legado .txt-suave { color: var(--mute); }
.p-legado .txt-pista { font-size: var(--t--2); color: var(--mute); }
.p-legado .col-chk { width: 36px; }
.p-legado .sel-bar { align-items: center; gap: var(--s-4); margin-bottom: var(--s-3); padding: var(--s-3) var(--s-5); background: var(--card); border-radius: var(--p-radio-s); font-size: var(--t--1); }
.p .peligro, .p .peligro:hover { background: #9b1c1c; border-color: #9b1c1c; color: #fff; }
.p .modal-txt { margin: 0 0 var(--s-6); font-size: var(--t--1); color: var(--mute); }
.p .modal-txt--peq { font-size: var(--t--2); }
.p .txt-opcional { font-weight: 400; color: var(--mute); }
.p .fila-chk { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.p .chk-negro { width: auto; accent-color: #111; }
.p .lbl-chk { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.p .txt-pista { font-size: var(--t--2); color: var(--mute); }
/* Dentro del armazón, la tabla de Vouchers/SIMs va en tarjeta blanca. */
.p-legado .table-wrap { background: var(--card); border-radius: var(--p-radio); overflow-x: auto; }
@media (max-width: 760px) { .p-legado .campo-busca { width: 100%; } }

/* ---- Login ------------------------------------------------------------ */
.login { margin: 0; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: #f2f2f0; }
.login-izq { background: var(--brand); display: flex; flex-direction: column; justify-content: space-between; padding: 48px; }
.login-izq img { display: block; width: 180px; height: auto; }
.login-lema { margin: 0; font-weight: 700; font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -.04em; }
.login-der { display: flex; align-items: center; justify-content: center; padding: 48px; }
.login-caja { width: 100%; max-width: 360px; background: var(--card); border-radius: 26px; padding: 36px; }
.login-caja h1 { font-size: 28px; letter-spacing: -.03em; margin: 0 0 6px; }
.login-caja > p { font-size: var(--t--1); color: var(--mute); margin: 0 0 28px; }
.login-campo { margin-bottom: 18px; }
.login-campo label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.login-campo input { width: 100%; padding: 14px 18px; border: 1.5px solid var(--hair); border-radius: 999px; font: inherit; font-size: 15px; background: #fff; box-sizing: border-box; }
.login-campo input:focus { outline: none; border-color: var(--ink); }
.login-entrar { width: 100%; padding: 15px; margin-top: 6px; font-size: 15px; }
.login-error { font-size: 13px; color: #9b1c1c; margin: 16px 0 0; text-align: center; font-weight: 700; }
@media (max-width: 760px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-izq { padding: 24px; flex-direction: row; align-items: center; }
  .login-izq img { width: 130px; }
  .login-lema { display: none; }
  .login-der { padding: 24px 16px; align-items: flex-start; }
}

/* Galería interna de imágenes generadas. */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.gal-item { margin: 0; background: #fff; border: 1px solid #e6e6e6; border-radius: 16px; overflow: hidden; }
.gal-item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gal-item figcaption { padding: 12px 16px 16px; display: grid; gap: 8px; font-size: 13px; line-height: 1.45; }
.gal-item code { font-size: 12px; }
.gal-meta { color: #777; }
.gal-files { display: flex; flex-wrap: wrap; gap: 8px; }
.gal-files a { color: #111; }
.gal-estilo { margin: 0 0 24px; padding: 16px; background: #fff; border: 1px solid #e6e6e6; border-radius: 16px; font-size: 13px; line-height: 1.5; }