/* ============================================================
   Lunafy · panel del cliente (/gestion/)
   Diseño responsive: mobile 360/390 → tablet → desktop
   ============================================================ */

/* -- 1. Tokens -------------------------------------------------- */
:root {
  color-scheme: dark;

  --color-bg:          #0A0E1A;
  --color-bg-2:        #111827;
  --color-bg-3:        #1C2333;
  --color-border:      #2C3E5B;   /* separadores y bordes de card (decorativo) */
  --color-border-strong:#4C6896;  /* bordes de controles: inputs, selects, botones ghost */
  --color-accent-cyan: #67E8F9;
  --color-accent-fire: #F5A25D;
  --color-text-primary:#F1F5F9;
  --color-text-muted:  #A3B4CC;   /* secundario: labels, fechas, hints */
  --color-text-dim:    #8FA1B9;   /* terciario: placeholders, timestamps de card */
  --color-gray-soft:   #98A2B3;   /* 'cerrado' y prioridad baja */

  --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* colores de estado — mismos valores que los pills para poder reutilizar en bordes de card */
  --st-analisis:     #7CB9E8;
  --st-proceso:      #4ADE80;
  --st-resp-agente:  #F5A25D;
  --st-resp-cliente: #C084FC;
  --st-espera:       #FACC15;
  --st-cerrado:      #98A2B3;

  --red:  #EF4444;
  --focus: 0 0 0 2px rgba(103,232,249,.35);
}

/* -- 2. Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.font-mono { font-family: var(--font-mono); }
::placeholder { color: var(--color-text-dim); opacity: 1; }
a { color: var(--color-accent-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* -- 3. Layout contenedor ------------------------------------- */
main {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  /* flex-start, no stretch: si no, la card de login se estira a todo el alto
     de la pantalla y en escritorio queda una caja vacía larguísima. */
  align-items: flex-start;
  padding: 40px 16px;
}
.card {
  width: 100%;
  max-width: 520px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 24px;
}
.card.wide { max-width: 820px; }
@media (max-width: 768px) {
  main { padding: 24px 14px; }
}
@media (max-width: 480px) {
  main { padding: 12px; }
  .card { padding: 16px; border-radius: 12px; }
}

/* -- 4. Brand / headings -------------------------------------- */
.brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-fire); }
.brand .name { font-weight: 600; letter-spacing: .5px; }
.brand .sub { color: var(--color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; }

h1 {
  margin: 0 0 6px;
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 700;
  letter-spacing: .3px;
}
h2.section {
  margin: 24px 0 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 500;
}
.lead { margin: 0 0 16px; color: var(--color-text-muted); font-size: 14px; }

/* -- 5. Form controls ----------------------------------------- */
label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 14px 0 6px;
}
input[type="text"], input[type="tel"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"],
input[type="search"], textarea, select {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  min-height: 44px;      /* touch target */
}
textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent-cyan);
  box-shadow: var(--focus);
}
input.has-error, textarea.has-error {
  border-color: var(--color-accent-fire);
}
.field-error {
  display: block;
  margin-top: 6px;
  color: var(--color-accent-fire);
  font-size: 13px;
}
.hint { color: var(--color-text-muted); font-size: 13px; margin-top: 4px; }

/* -- 6. Botones ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  min-height: 44px;
  background: var(--color-accent-fire);
  color: #0A0E1A;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn.sm { padding: 8px 14px; min-height: 36px; font-size: 14px; }
.btn.block { display: flex; width: 100%; margin-top: 14px; }
.btn.inline { display: inline-flex; width: auto; margin: 0; }
.btn.ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border-strong);
}
.btn.ghost:hover { color: var(--color-accent-fire); border-color: var(--color-accent-fire); }
.btn.cyan {
  background: #0E3A3A;
  color: var(--color-accent-cyan);
  border-color: rgba(103,232,249,.35);
}
.btn.cyan:hover { background: #124949; }
.btn.fire-soft {
  background: #3A1E0E;
  color: var(--color-accent-fire);
  border-color: rgba(245,162,93,.35);
}
.btn.fire-soft:hover { background: #4a2512; }
.btn.danger {
  background: transparent;
  color: #FCA5A5;
  border-color: rgba(239,68,68,.45);
}
.btn.danger:hover { background: rgba(239,68,68,.1); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* -- 7. Flashes y errores ------------------------------------- */
.flash-ok, .ok-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(103,232,249,.3);
  background: rgba(103,232,249,.08);
  color: #a5f3fc;
  border-radius: 8px;
  font-size: 14px;
}
.err {
  margin: 8px 0;
  padding: 10px 14px;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.4);
  color: #FCA5A5;
  border-radius: 8px;
  font-size: 14px;
}
.err ul { margin: 0; padding-left: 18px; }
.err li { margin: 2px 0; }

/* -- 8. Pills de estado (compartidos con panel.css) ----------- */
.pill-estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pill-en_analisis         { background: #1E3A5F; color: #9CCBF0; }
.pill-en_proceso          { background: #1A3A2E; color: #4ADE80; }
.pill-respondido_agente   { background: #3D2B1A; color: #F5A25D; }
.pill-respondido_cliente  { background: #2A1A3D; color: #C084FC; }
.pill-en_espera_confirmacion { background: #3D3A1A; color: #FACC15; }
.pill-cerrado             { background: #262B36; color: #B6BEC9; }

/* legacy aliases por si algún template aún usa .pill s-* */
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-family: var(--font-mono); letter-spacing: .04em; white-space: nowrap; }
.pill.s-en_analisis         { background: #1E3A5F; color: #9CCBF0; }
.pill.s-en_proceso          { background: #1A3A2E; color: #4ADE80; }
.pill.s-respondido_agente   { background: #3D2B1A; color: #F5A25D; }
.pill.s-respondido_cliente  { background: #2A1A3D; color: #C084FC; }
.pill.s-en_espera_confirmacion { background: #3D3A1A; color: #FACC15; }
.pill.s-cerrado             { background: #262B36; color: #B6BEC9; }

/* -- 9. Prioridades ------------------------------------------- */
.prio-baja    { color: var(--color-gray-soft); }
.prio-normal  { color: var(--color-text-muted); }
.prio-alta    { color: var(--color-accent-fire); }
.prio-urgente { color: #EF4444; font-weight: 700; }

/* -- 10. Topline dashboard ------------------------------------ */
.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.topline h1 { margin: 0; }

/* -- 11. Lista de tickets: tabla (desktop) y cards (mobile) --- */
.tlist {
  width: 100%;
  border-collapse: collapse;
  /* Misma superficie que table.data del panel interno: la lista es una card. */
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.tlist th {
  text-align: left;
  background: var(--color-bg-2);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-strong);
}
.tlist tr:hover td { background: #131b29; }
.tlist td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  vertical-align: top;
}
.tlist tr:last-child td { border-bottom: none; }
.tlist .code { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-muted); white-space: nowrap; }
.tlist .when { color: var(--color-text-muted); font-size: 12.5px; white-space: nowrap; }
.tlist a { color: var(--color-accent-cyan); }

/* Cards mobile */
.tcards { display: none; flex-direction: column; gap: 10px; }
.tcard {
  display: block;
  padding: 12px 14px;
  background: var(--color-bg-3);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text-primary);
  text-decoration: none;
}
.tcard:hover { text-decoration: none; filter: brightness(1.06); }
.tcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.tcard-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
}
.tcard-title {
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text-primary);
}
.tcard-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.tcard-when { color: var(--color-text-muted); }
/* bordes izq por estado */
.tcard.st-en_analisis         { border-left-color: #7CB9E8; }
.tcard.st-en_proceso          { border-left-color: #4ADE80; }
.tcard.st-respondido_agente   { border-left-color: #F5A25D; }
.tcard.st-respondido_cliente  { border-left-color: #C084FC; }
.tcard.st-en_espera_confirmacion { border-left-color: #FACC15; }
.tcard.st-cerrado             { border-left-color: var(--color-gray-soft); }

/* breakpoint: swap tabla por cards — 768px, el mismo que usa el panel interno */
@media (max-width: 768px) {
  .tlist { display: none; }
  .tcards { display: flex; }
}

.placeholder {
  padding: 20px;
  margin-bottom: 14px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  color: var(--color-text-muted);
  font-size: 14px;
  text-align: center;
}

/* -- 12. Banner "esperando confirmación" ---------------------- */
.banner-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid rgba(250,204,21,.4);
  background: rgba(250,204,21,.07);
  color: #fde047;
  border-radius: 10px;
  font-size: 14px;
  flex-wrap: wrap;
}
.banner-ask b { color: #fde047; }
.banner-ask .ic { font-size: 18px; }
.banner-ask .btn { margin-left: auto; }

/* -- 13. Ticket detail --------------------------------------- */
.ticket-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 14px;
}
.ticket-header .th-info { flex: 1 1 240px; min-width: 0; }
.ticket-header .th-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 4px;
}
.ticket-header h1 { margin: 0 0 8px; }
.ticket-header .th-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.ticket-header .th-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ticket-header .th-actions form { display: inline; margin: 0; }

.meta-line {
  color: var(--color-text-muted);
  font-size: 13px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.tdesc {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  font-size: 14px;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin: 10px 0;
}

/* ventana cerrada / notice */
.notice {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: 10px;
  font-size: 14px;
}

/* -- 14. Timeline de comentarios estilo chat ------------------ */
.chat { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 16px; }
.cmt {
  position: relative;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-bg-3);
  max-width: 85%;
  word-break: break-word;
  line-height: 1.5;
  font-size: 14px;
}
.cmt-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
}
.cmt-head b { color: var(--color-text-primary); font-weight: 600; }
.cmt-head .who-team { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 11px; margin-right: auto; }
.cmt-body { white-space: pre-wrap; }

/* staff → izquierda, borde cian */
.cmt.staff {
  align-self: flex-start;
  background: var(--color-bg-3);
  border-left: 3px solid var(--color-accent-cyan);
}
/* cliente → derecha, borde naranja */
.cmt.mine {
  align-self: flex-end;
  background: #131C2E;
  border-right: 3px solid var(--color-accent-fire);
  text-align: left;
}
/* system → centrado */
.cmt.system {
  align-self: center;
  background: transparent;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 13px;
  max-width: 95%;
  text-align: center;
  padding: 4px 10px;
}

@media (max-width: 480px) {
  .cmt { max-width: 100%; }
  .cmt.staff, .cmt.mine { align-self: stretch; }
  .cmt.mine { border-right: none; border-left: 3px solid var(--color-accent-fire); }
}

/* -- 15. Form respuesta -------------------------------------- */
form.reply { margin-top: 12px; }
form.reply textarea { min-height: 100px; }
form.reply .btn { margin-top: 10px; }

/* -- 16. Sticky bottom bar (mobile) -------------------------- */
.sticky-actions {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10,14,26,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
  z-index: 50;
  gap: 10px;
  flex-direction: column;
}
.sticky-actions .btn { width: 100%; }
.sticky-actions form { margin: 0; display: block; }
.sticky-actions form .btn { width: 100%; }

@media (max-width: 480px) {
  .sticky-actions.active { display: flex; }
  body.has-sticky-actions { padding-bottom: 120px; }
}

/* -- 17. Timeline de historial (puntitos) --------------------- */
ol.tline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  border-left: 2px solid var(--color-border);
}
ol.tline li {
  padding: 0 0 14px 14px;
  position: relative;
  font-size: 13px;
}
ol.tline li::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent-fire);
}
ol.tline .when { color: var(--color-text-muted); font-size: 12px; }

/* -- 18. Login / verificación código -------------------------- */
.code-input {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 8px;
  padding: 14px;
}
.dev-code {
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px dashed var(--color-accent-fire);
  background: rgba(245,162,93,.08);
  color: #fcd34d;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}
.dev-code strong { font-family: var(--font-mono); letter-spacing: 2px; color: var(--color-accent-fire); }

/* -- 19. Honeypot --------------------------------------------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -- 20. Footer login ----------------------------------------- */
footer.foot { margin-top: 18px; text-align: center; color: var(--color-text-dim); font-size: 13px; }
footer.foot a { color: var(--color-text-muted); text-decoration: none; }
footer.foot a:hover { color: var(--color-accent-cyan); }

/* -- 21. Radio group del registro ----------------------------- */
.radio-row { display: flex; flex-direction: column; gap: 8px; }
.radio-row label.opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  text-transform: none;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--color-text-primary);
  cursor: pointer;
  margin: 0;
  min-height: 48px;
}
.radio-row label.opt:has(input:checked) { border-color: var(--color-accent-fire); background: rgba(245,162,93,.06); }
.radio-row input[type="radio"] { width: auto; min-height: 0; margin-top: 2px; accent-color: var(--color-accent-fire); }
.radio-row .opt .ttl { font-weight: 600; display: block; }
.radio-row .opt .desc { color: var(--color-text-muted); font-size: 13px; margin-top: 2px; }

/* -- 22. Modal confirm (JS) ---------------------------------- */
.lun-modal {
  position: fixed; inset: 0;
  background: rgba(5,8,13,.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.lun-modal.open { display: flex; }
.lun-modal .lun-modal-box {
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  max-width: 420px;
  width: 100%;
  padding: 20px;
}
.lun-modal h3 { margin: 0 0 8px; font-size: 17px; }
.lun-modal p { margin: 0 0 16px; color: var(--color-text-muted); font-size: 14px; }
.lun-modal .lun-modal-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.lun-modal .lun-modal-row .btn { flex: 1 1 auto; }
@media (max-width: 480px) {
  .lun-modal .lun-modal-row { flex-direction: column-reverse; }
  .lun-modal .lun-modal-row .btn { width: 100%; }
}

/* -- 23. Utilidades ------------------------------------------- */
.hide-sm { }
@media (max-width: 480px) { .hide-sm { display: none !important; } }
.only-sm { display: none; }
@media (max-width: 480px) { .only-sm { display: initial; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* === PARCHES RESPONSIVE (oct-2026) ============================== */

/* P1: padding-bottom ya aplicado in situ en la sección 16 (160px→120px). */

/* P2: th-actions — botones full-width en mobile */
@media (max-width: 480px) {
  .ticket-header .th-actions {
    width: 100%;
    flex-direction: column;
  }
  .ticket-header .th-actions .btn,
  .ticket-header .th-actions form,
  .ticket-header .th-actions form .btn {
    width: 100%;
  }
  /* ocultar th-actions en header cuando sticky-actions está activa */
  body.has-sticky-actions .ticket-header .th-actions { display: none; }
}

/* P3: banner-ask — botón no se agranda descontrolado en mobile */
@media (max-width: 480px) {
  .banner-ask {
    flex-direction: column;
    align-items: stretch;
  }
  .banner-ask .btn {
    margin-left: 0;
    width: 100%;
  }
}

/* P4: code-input — letter-spacing más chico en pantallas chicas */
@media (max-width: 400px) {
  .code-input {
    letter-spacing: 6px;
    font-size: 20px;
  }
}

/* === SECCIÓN 24: shell de página del cliente (lote V3) =====================
   Las pantallas de sesión iniciada (dashboard, ticket, nuevo ticket) dejan de
   ser una card flotando en el medio: topbar sticky con la marca, el nombre y
   Salir, y abajo el contenido con un ancho máximo. El login, el registro y la
   verificación siguen usando `main` + `.card`, que es lo correcto para ellas. */

.cli-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 20px;
  background: rgba(10,14,26,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.cli-top .brand { margin-bottom: 0; }
.cli-top .spacer { flex: 1; }
.cli-top .who {
  color: var(--color-text-muted);
  font-size: 13.5px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cli-top form { margin: 0; }
.cli-top .btn { margin-top: 0; }

/* Gana sobre la regla `main` de la sección 3 por especificidad (main.page). */
main.page {
  display: block;
  min-height: 0;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 40px;
}
main.page > .card { max-width: none; }
.page-back { margin-bottom: 14px; }

@media (max-width: 768px) {
  .cli-top { padding: 10px 14px; }
  main.page { padding: 16px 14px 40px; }
}
@media (max-width: 480px) {
  .cli-top .who { display: none; }
  main.page { padding: 14px 12px 40px; }
}

/* La barra fija de acciones del ticket es de mobile; con el shell, el espacio
   extra abajo solo hace falta cuando esa barra está visible (≤480px, sección 16). */

/* Fila de botones de formulario (mismo comportamiento que en el panel interno). */
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btnrow .btn { margin-top: 0; }
@media (max-width: 480px) {
  .btnrow { flex-direction: column-reverse; }
  .btnrow .btn { width: 100%; }
}

/* -- Novedades (puntito rojo, aviso, sesión vencida) ----------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* El borde del color del fondo "recorta" el punto de la superficie donde está. */
.nv-dot {
  --nv-cut: var(--color-bg-2);
  display: inline-block; flex: none;
  width: 10px; height: 10px; box-sizing: content-box;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--nv-cut);
}
.nv-dot[hidden] { display: none; }
.nv-dot.nv-inline { margin-right: 8px; vertical-align: middle; }
.tlist tr:hover .nv-dot { --nv-cut: #131b29; }
.tcard .nv-dot { --nv-cut: var(--color-bg-3); }
.cli-top .nv-dot { --nv-cut: var(--color-bg); margin-left: 8px; vertical-align: middle; }
.nv-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid rgba(103,232,249,.3);
  background: rgba(103,232,249,.08);
  color: #a5f3fc;
  border-radius: 8px; font-size: 14px;
}
.nv-banner .nv-btn {
  font: inherit; background: none; border: 0; padding: 2px 4px; border-radius: 4px;
  color: var(--color-accent-cyan); text-decoration: underline; cursor: pointer;
}
.nv-banner .nv-btn[hidden] { display: none; }
.nv-banner .nv-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.nv-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 14px;
  background: var(--color-bg-3); color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong); border-radius: 10px;
  font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.nv-toast a { color: var(--color-accent-cyan); margin-left: 6px; }