/* CONSERVE · tema oscuro.
   El guion (js/tema.js) resuelve la preferencia y escribe data-tema="oscuro" en el
   documento; aquí solo se cambian los colores. Los comprobantes y los recibos se quedan
   en blanco a propósito: son documentos que se imprimen. */

:root[data-tema="oscuro"] {
  color-scheme: dark;

  --fondo: #0e1613;
  --tarjeta: #16211d;
  --superficie: #1b2823;      /* ventanas, menús y cosas que flotan */
  --superficie-2: #1a2621;    /* encabezados de tabla, pies, franjas */
  --campo: #101a16;           /* fondo de lo que se escribe */
  --linea: #27342e;
  --tinta: #e7f0ec;
  --tinta-suave: #9db0a9;

  --marca-700: #86d9b3;       /* textos y acentos verdes */
  --marca-600: #3ec98a;       /* enlaces */
  --marca-500: #00c165;
  --marca-300: #74c9a2;
  --marca-100: #1d4433;
  --marca-50: #16261f;        /* fondos suaves y resaltados de fila */
  --marca-azul-500: #35c4f5;

  --peligro: #ff7a7a;
  --peligro-50: #2f1a1a;
  --exito: #5bd396;
  --exito-50: #142c20;
  --aviso: #e3ab5c;
  --aviso-50: #2e2413;
  --info: #7cb8f0;
  --info-50: #16273a;

  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px -14px rgba(0, 0, 0, .8);
  --sombra-elevada: 0 2px 8px rgba(0, 0, 0, .45), 0 20px 44px -22px rgba(0, 0, 0, .9);
  --sombra-flotante: 0 12px 24px -14px rgba(0, 0, 0, .7), 0 34px 70px -30px rgba(0, 0, 0, .95);
}

/* Antes de que corra el guion: si el sistema está oscuro, el fondo ya lo está y no hay
   destello blanco. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) { background: #0e1613; }
  :root:not([data-tema]) body { background: #0e1613; color: #e7f0ec; }
}

/* ---------- Superficies y bordes ---------- */
:root[data-tema="oscuro"] .modal,
:root[data-tema="oscuro"] .resultados,
:root[data-tema="oscuro"] .menu-acciones-lista,
:root[data-tema="oscuro"] .pr-menu-lista,
:root[data-tema="oscuro"] .menu-asociado-lista { background: var(--superficie); border-color: var(--linea); }
:root[data-tema="oscuro"] .modal > footer { background: var(--superficie-2); }
:root[data-tema="oscuro"] .modal::before { background: #3a4a44; }
:root[data-tema="oscuro"] .fondo-modal,
:root[data-tema="oscuro"] .modal-saliente { background: rgba(0, 0, 0, .55); }
:root[data-tema="oscuro"] .encabezado { background: rgba(14, 22, 19, .72); }
:root[data-tema="oscuro"] .barra-inferior { background: rgba(14, 22, 19, .85); border-top-color: var(--linea); }
:root[data-tema="oscuro"] .barra-ficha { background: rgba(14, 22, 19, .92); }
:root[data-tema="oscuro"] .adjuntos li { background: var(--superficie-2); }
:root[data-tema="oscuro"] .fila-agregar { background: var(--superficie-2); border-color: #2f3f38; }
:root[data-tema="oscuro"] .lista-variables li,
:root[data-tema="oscuro"] .resultados button { border-bottom-color: var(--linea); }

/* ---------- Tablas ---------- */
:root[data-tema="oscuro"] table.tabla th,
:root[data-tema="oscuro"] table.tabla tfoot td,
:root[data-tema="oscuro"] .pr-datos.compacto,
:root[data-tema="oscuro"] .matriz-permisos tr.grupo td,
:root[data-tema="oscuro"] .pr-fila-a td { background: var(--superficie-2); }
:root[data-tema="oscuro"] table.tabla td { border-bottom-color: var(--linea); }
:root[data-tema="oscuro"] table.tabla tbody tr:hover,
:root[data-tema="oscuro"] table.tabla tr.seleccionada { background: var(--marca-50); }
@media (max-width: 860px) {
  :root[data-tema="oscuro"] .tabla-envoltura {
    background:
      linear-gradient(to right, var(--tarjeta) 30%, rgba(22, 33, 29, 0)) left center / 32px 100% no-repeat local,
      linear-gradient(to left, var(--tarjeta) 30%, rgba(22, 33, 29, 0)) right center / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .5), transparent) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .5), transparent) right center / 12px 100% no-repeat scroll;
  }
}

/* ---------- Formularios ---------- */
:root[data-tema="oscuro"] input[type=text], :root[data-tema="oscuro"] input[type=password],
:root[data-tema="oscuro"] input[type=email], :root[data-tema="oscuro"] input[type=number],
:root[data-tema="oscuro"] input[type=date], :root[data-tema="oscuro"] input[type=month],
:root[data-tema="oscuro"] input[type=search], :root[data-tema="oscuro"] input[type=color],
:root[data-tema="oscuro"] select, :root[data-tema="oscuro"] textarea {
  background: var(--campo);
  border-color: #2c3a34;
  color: var(--tinta);
}
:root[data-tema="oscuro"] input[readonly], :root[data-tema="oscuro"] input:disabled,
:root[data-tema="oscuro"] select:disabled, :root[data-tema="oscuro"] .bloqueado input,
:root[data-tema="oscuro"] .bloqueado select, :root[data-tema="oscuro"] .bloqueado textarea {
  background: #131d19;
  color: var(--tinta-suave);
}
:root[data-tema="oscuro"] ::placeholder { color: #6f817b; }
:root[data-tema="oscuro"] .casilla-novedad { background: var(--superficie-2); border-color: #2c3a34; }
:root[data-tema="oscuro"] .casilla-novedad.activa { background: var(--marca-100); border-color: var(--marca-500); color: var(--marca-700); }
:root[data-tema="oscuro"] select option:disabled { color: #6f817b; }

/* ---------- Botones ---------- */
:root[data-tema="oscuro"] .btn { background: #0e8a50; color: #fff; }
:root[data-tema="oscuro"] .btn:hover { background: #0b7544; }
:root[data-tema="oscuro"] .btn.sec { background: var(--superficie-2); color: var(--tinta); border-color: #2f3f38; }
:root[data-tema="oscuro"] .btn.sec:hover { background: #22302a; border-color: var(--marca-300); }
:root[data-tema="oscuro"] .btn.fantasma { background: transparent; color: var(--tinta-suave); }
:root[data-tema="oscuro"] .btn.fantasma:hover { background: #22302a; color: var(--tinta); }
:root[data-tema="oscuro"] .btn.peligro { background: #a33232; color: #fff; }
:root[data-tema="oscuro"] .btn.peligro:hover { background: #8c2929; }
:root[data-tema="oscuro"] .btn.estado-activo { background: #17693f; border-color: #17693f; color: #fff; }
:root[data-tema="oscuro"] .btn.estado-inactivo { background: transparent; color: var(--peligro); border-color: var(--peligro); }
:root[data-tema="oscuro"] .btn:active:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 0 4px rgba(0, 193, 101, .18); }

/* ---------- Avisos, distintivos y mensajes ---------- */
:root[data-tema="oscuro"] .distintivo { background: #22302a; color: var(--tinta-suave); }
:root[data-tema="oscuro"] .pr-estado.suave { background: #22302a; color: var(--tinta-suave); }
:root[data-tema="oscuro"] .aviso.info { border-color: #24466a; }
:root[data-tema="oscuro"] .aviso.exito { border-color: #1f5c3c; }
:root[data-tema="oscuro"] .aviso.alerta { border-color: #5c4522; }
:root[data-tema="oscuro"] .aviso.error { border-color: #6a2c2c; }
:root[data-tema="oscuro"] .aviso-prueba { border-bottom-color: #5c4522; }
:root[data-tema="oscuro"] .mensaje { background: #22302a; color: var(--tinta); }
:root[data-tema="oscuro"] .mensaje.exito { background: #14512f; }
:root[data-tema="oscuro"] .mensaje.error { background: #6d2323; }
:root[data-tema="oscuro"] .convenio-dato { background: #3b3117; color: #f0dfb4; }
:root[data-tema="oscuro"] .girador { border-color: #24332c; border-top-color: var(--marca-500); }

/* ---------- Portal del asociado ---------- */
:root[data-tema="oscuro"] .portal-beneficios li { background: var(--tarjeta); }
:root[data-tema="oscuro"] .portal-opcion.inactiva { background: var(--superficie-2); }
:root[data-tema="oscuro"] .portal-item,
:root[data-tema="oscuro"] .portal-actividad li { border-bottom-color: var(--linea); }

/* ---------- Documentos: siempre en blanco, como el papel ---------- */
:root[data-tema="oscuro"] .comprobante,
:root[data-tema="oscuro"] .recibo { background: #fff; color: #10201d; border-color: #d9e3e0; }
:root[data-tema="oscuro"] .comprobante th,
:root[data-tema="oscuro"] .comprobante .datos div span,
:root[data-tema="oscuro"] .comprobante .nota { color: #4a5f5b; }
:root[data-tema="oscuro"] .comprobante th,
:root[data-tema="oscuro"] .comprobante td { border-bottom-color: #e2eae8; }
:root[data-tema="oscuro"] .comprobante .cabecera .doc b { color: #0e5a36; }

/* ---------- Impresión ---------- */
/* En papel manda el tema claro, aunque la pantalla esté en oscuro. */
@media print {
  :root[data-tema="oscuro"] {
    --fondo: #fff;
    --tarjeta: #fff;
    --superficie: #fff;
    --superficie-2: #f8fbfa;
    --campo: #fff;
    --linea: #e2eae8;
    --tinta: #10201d;
    --tinta-suave: #4a5f5b;
    --marca-700: #0e5a36;
    --marca-600: #0f7645;
  }
}