/* ══════════════════════════════════════════════════════════════════════════
   CERO MERMA · TEMA GLOBAL  (Apple sobre Materialize v1.0.0)
   ---------------------------------------------------------------------------
   Filosofía: NO se inventan clases nuevas por pantalla. Este archivo redefine
   las PROPIAS clases de Materialize (.btn, .card, .input-field, .collection,
   checkbox/radio/switch, tabs) para darles una estética tipo Apple: tipografía
   del sistema, una sola tinta de acento, esquinas suaves, sombras discretas y
   más aire. Se enlaza UNA sola vez en diseño/cabecera.php, DESPUÉS de
   materialize.css y estilos.css, para que gane por orden de carga.

   Cambiar el look de todo el sistema = cambiar aquí. Cero remiendos por página.
   Las pantallas solo usan marcado Materialize estándar (card, input-field,
   collection, btn) y heredan este tema.
   ========================================================================== */

:root{
  --cm-accent:#1565c0;        /* tinta de acento única (azul) */
  --cm-accent-dark:#0d47a1;   /* hover/activo */
  --cm-accent-soft:rgba(21,101,192,.10);
  --cm-ink:#1c1e21;           /* texto principal */
  --cm-ink2:#6b7280;          /* texto secundario */
  --cm-bg:#f2f3f5;            /* fondo agrupado */
  --cm-card:#ffffff;
  --cm-sep:#e6e8ec;           /* separador fino */
  --cm-radius:14px;           /* radio de tarjetas/listas */
  --cm-radius-sm:10px;        /* radio de controles */
}

/* ── Tipografía del sistema (SF en Apple, Segoe en Windows, Roboto Android) ── */
body,
button, input, optgroup, select, textarea{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
body{ color:var(--cm-ink); }

/* ── Utilidades de página (parte del tema, no de cada pantalla) ─────────────
   .cm-page  = contenedor centrado con aire (para formularios/detalle).
   .cm-cap   = título de sección tenue en mayúsculas (estilo Ajustes iOS).
   .cm-h1    = título grande de pantalla. */
.cm-page{ max-width:680px; margin:0 auto; padding:8px 16px 40px; }
.cm-h1{ font-size:1.6rem; font-weight:700; letter-spacing:-.02em; margin:16px 4px 4px;
        display:flex; align-items:center; gap:10px; }
.cm-h1 i{ color:var(--cm-accent); }
.cm-sub{ font-size:.9rem; color:var(--cm-ink2); margin:0 4px 16px; }
.cm-cap{ font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
         color:var(--cm-ink2); margin:24px 12px 8px; }
.cm-hint{ font-size:.8rem; color:var(--cm-ink2); margin:8px 12px 0; }

/* ── Botones: planos, sin MAYÚSCULAS forzadas, redondeados, sombra sutil ───── */
.btn, .btn-small, .btn-large{
  text-transform:none; letter-spacing:0; font-weight:600;
  border-radius:var(--cm-radius-sm); box-shadow:none;
  background-color:var(--cm-accent);
}
.btn:hover, .btn-small:hover, .btn-large:hover{ background-color:var(--cm-accent-dark); box-shadow:none; }
.btn:focus, .btn-small:focus, .btn-large:focus{ background-color:var(--cm-accent-dark); }
/* Botón secundario / plano (equivale a "tinted"/"plain" de iOS) */
.btn-flat{ text-transform:none; letter-spacing:0; font-weight:600; border-radius:var(--cm-radius-sm); color:var(--cm-accent); }
.btn-flat:hover{ background-color:var(--cm-accent-soft); }

/* ── Tarjetas: esquinas suaves + sombra discreta ───────────────────────────── */
.card{ border-radius:var(--cm-radius); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.card .card-content{ padding:20px; }

/* ── Inputs de Materialize (.input-field): acento en foco y etiqueta ────────── */
.input-field input:not([type]):focus,
.input-field input[type=text]:focus,
.input-field input[type=password]:focus,
.input-field input[type=email]:focus,
.input-field input[type=number]:focus,
.input-field input[type=date]:focus,
.input-field textarea.materialize-textarea:focus{
  border-bottom:1px solid var(--cm-accent);
  box-shadow:0 1px 0 0 var(--cm-accent);
}
/* En foco, la etiqueta pasa al acento (el color en reposo lo define estilos.css). */
.input-field input:focus + label,
.input-field textarea:focus + label{ color:var(--cm-accent); }
.input-field .prefix.active{ color:var(--cm-accent); }
/* Select nativo de Materialize: color de foco coherente */
.select-wrapper input.select-dropdown:focus{ border-bottom:1px solid var(--cm-accent); }
.dropdown-content li > a, .dropdown-content li > span{ color:var(--cm-accent); }

/* ── Checkbox / radio / switch en la tinta de acento (usa el componente
     NATIVO de Materialize: <label><input type=checkbox><span>texto</span>) ──── */
[type="checkbox"]:checked + span:not(.lever):before{
  border-right:2px solid var(--cm-accent);
  border-bottom:2px solid var(--cm-accent);
}
[type="checkbox"].filled-in:checked + span:not(.lever):after{
  border-color:var(--cm-accent); background-color:var(--cm-accent);
}
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after{ border-color:var(--cm-accent); }
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after{ background-color:var(--cm-accent); }
.switch label input[type=checkbox]:checked + .lever{ background-color:rgba(21,101,192,.5); }
.switch label input[type=checkbox]:checked + .lever:after{ background-color:var(--cm-accent); }

/* ── Colecciones = listas agrupadas estilo iOS ─────────────────────────────── */
.collection{ border-radius:var(--cm-radius); border-color:var(--cm-sep); overflow:hidden; margin:.4rem 0; }
.collection .collection-item{ border-bottom-color:var(--cm-sep); padding:14px 16px; }
.collection a.collection-item{ color:var(--cm-accent); }
.collection .collection-item.active{ background-color:var(--cm-accent); }

/* ── Tabs / chips con la tinta de acento ───────────────────────────────────── */
.tabs .indicator{ background-color:var(--cm-accent); }
.tabs .tab a{ color:var(--cm-ink2); }
.tabs .tab a:hover, .tabs .tab a.active{ color:var(--cm-accent); }
.chip{ border-radius:100px; }

/* ── Input de color (Materialize no lo estiliza): compacto y coherente ─────── */
input[type=color]{ width:56px; height:36px; padding:2px; border:1px solid var(--cm-sep);
  border-radius:8px; background:#fff; cursor:pointer; }

/* ── Vista previa de PDF: componente del sistema (overlay propio, sin depender
     de la versión del JS de Materialize). Se abre/cierra con la clase .abierto.
     Reutilizable en cualquier pantalla. ────────────────────────────────────── */
.cm-prev{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px; }
.cm-prev.abierto{ display:flex; }
.cm-prev-caja{ background:#fff; border-radius:16px; width:min(920px,100%); height:min(86vh,100%);
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.cm-prev-top{ display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-bottom:1px solid var(--cm-sep); }
.cm-prev-top span{ font-weight:600; display:flex; align-items:center; gap:8px; }
.cm-prev-cerrar{ cursor:pointer; color:var(--cm-ink2); background:none; border:0; font-size:26px; line-height:1; }
.cm-prev iframe{ flex:1; width:100%; border:0; }

/* ── Badges de estado (para tablas/listados): usar <span class="cm-badge ..."> */
.cm-badge{ display:inline-block; padding:2px 10px; border-radius:100px; color:#fff; font-size:.72rem; font-weight:600; }
.cm-badge.cm-activo{ background:#2e9e4f; }
.cm-badge.cm-inactivo{ background:#e05353; }