/* ══════════════════════════════════════════════════════════════════════════
   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; }

/* ══════════════════════════════════════════════════════════════════════════
   CAPA 2 · COMPONENTES ".cm-" (consolidados aquí — antes vivían dentro de cada
   página). Una sola fuente de verdad. Escala tipográfica ÚNICA:
     Título tarjeta 1.2rem > Título sección 1.05rem > Contenido 0.9rem >
     Sub-etiqueta 0.72rem. Regla: sección > contenido > sub-etiqueta.
   ========================================================================== */

/* Contenedor centrado para formularios/detalle. */
.cm-wrap{max-width:720px;margin:0 auto;padding:0 12px;}

/* Tarjeta + encabezado. */
.cm-card{background:#fff;border:1px solid var(--cm-sep);border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;margin-bottom:14px;}
.cm-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--cm-sep);flex-wrap:wrap;}
.cm-title{display:flex;align-items:center;gap:8px;font-size:1.2rem;font-weight:700;color:#0d3d78;}
.cm-title i{color:var(--cm-accent);}
.cm-acciones{display:flex;gap:8px;flex-wrap:wrap;}

/* Buscador con lupa (tablas). Requiere id="busqueda" + tbody.busquedatabla. */
.cm-buscar-fila{padding:14px 20px;border-bottom:1px solid var(--cm-sep);}
.cm-buscar{position:relative;width:100%;}
.cm-buscar i{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--cm-accent);font-size:20px;width:20px;text-align:center;pointer-events:none;}
.cm-buscar input{width:100%;box-sizing:border-box;height:40px;border:1px solid var(--cm-sep);
  border-radius:8px;background:#eef1f4;color:#25303b;margin:0;padding:0 14px 0 46px;font-size:.9rem;box-shadow:none;}

/* Tabla (escritorio). En móvil ver el motor tabla→tarjeta más abajo. */
.cm-tabla{overflow-x:auto;}
.cm-tabla table{width:100%;border-collapse:collapse;font-size:.85rem;margin:0;}
.cm-tabla thead th{background:#f5f7f9;color:#6b7a89;text-align:left;font-weight:600;
  font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;
  padding:10px 14px;border-bottom:1px solid var(--cm-sep);white-space:nowrap;}
.cm-tabla tbody td{padding:8px 12px;border-bottom:1px solid #eef1f4;vertical-align:middle;}
.cm-tabla tbody tr:hover{background:#f0f6ff;}
.cm-color{display:inline-block;width:22px;height:22px;border-radius:6px;border:1px solid #d7dce2;vertical-align:middle;}
.cm-acc{white-space:nowrap;text-align:center;}
.cm-acc a{margin:0 3px;display:inline-block;vertical-align:middle;}
.cm-acc i{font-size:20px;line-height:1;vertical-align:middle;}

/* Secciones de formulario. */
.cm-sec{padding:16px 20px;border-bottom:1px solid var(--cm-sep);}
.cm-sec:last-of-type{border-bottom:0;}
.cm-sec-tit{font-size:1.05rem;font-weight:700;color:var(--cm-accent);margin-bottom:14px;}

/* Campos. Etiqueta = sub-etiqueta (0.72 gris mayúsculas). Contenido 0.9. */
.cm-field{margin-bottom:14px;}
.cm-field:last-child{margin-bottom:0;}
.cm-field > label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:#8a94a0;margin-bottom:5px;}
.cm-input{width:100%;box-sizing:border-box;height:42px;border:1px solid var(--cm-sep);border-radius:8px;
  background:#fff;padding:0 12px;font-size:.9rem;color:#25303b;margin:0;box-shadow:none;}
.cm-input:focus{outline:none;border-color:var(--cm-accent);box-shadow:0 0 0 3px rgba(21,101,192,.12);}
select.cm-input{appearance:auto;-webkit-appearance:auto;height:42px;}
input[type=color].cm-input{width:60px;height:38px;padding:2px;cursor:pointer;}

/* Cuadrícula de datos de solo lectura (3 col escritorio, 2 móvil). */
.cm-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 18px;}
.cm-kv{margin-bottom:10px;}
.cm-kv .k{font-size:.72rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8a94a0;}
.cm-kv .v{font-size:.9rem;color:#25303b;word-break:break-word;}

/* Casillas nativas (niveles) en fila + casilla en línea. Texto = contenido. */
.cm-checks{display:flex;flex-wrap:wrap;gap:14px 22px;}
.cm-checks label{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;color:#25303b;cursor:pointer;}
.cm-checks input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--cm-accent);}
.cm-check-linea{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;color:#25303b;cursor:pointer;}
.cm-check-linea input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--cm-accent);}

/* Adjuntos: dos cajas lado a lado. */
.cm-files{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.cm-file{border:1px dashed #cbd3dc;border-radius:10px;padding:10px 12px;}
.cm-file .lbl{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--cm-accent);margin-bottom:8px;}
.cm-file input[type=file]{font-size:.82rem;width:100%;}

/* Pie de acciones. */
.cm-pie{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;background:#f7f9fc;border-top:1px solid var(--cm-sep);}

@media(max-width:600px){ .cm-grid{grid-template-columns:1fr 1fr;} .cm-files{grid-template-columns:1fr;} }

/* ══════════════════════════════════════════════════════════════════════════
   CAPA 3 · MOTOR RESPONSIVE DE TABLAS (tabla → tarjeta en móvil)
   Heredado del acierto de fv01, generalizado. Marca la tabla con
   class="table-card-mobile"; el micro-script (libs/js/tabla_responsive.js)
   pone data-label en cada <td> leyendo el <th>. Las columnas de acción se
   marcan con class="no-label". Un solo breakpoint: 992px.
   NOTA: NO poner esta clase en la tabla de fv01 (ya tiene su bloque propio).
   ========================================================================== */
@media only screen and (max-width:992px){
  table.table-card-mobile thead{display:none;}
  table.table-card-mobile,
  table.table-card-mobile tbody{display:block;width:100%;}
  table.table-card-mobile tbody tr{
    display:block;background:#fff;border:1px solid var(--cm-sep);border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:12px;overflow:hidden;}
  table.table-card-mobile tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:9px 14px;border:0;border-bottom:1px solid var(--cm-sep);
    font-size:.9rem;text-align:right;width:auto;height:auto;}
  table.table-card-mobile tbody td:last-child{border-bottom:0;}
  table.table-card-mobile tbody td::before{
    content:attr(data-label);font-size:.72rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.03em;color:#8a94a0;text-align:left;flex:0 0 auto;margin-right:10px;white-space:nowrap;}
  /* Columnas de acción / sin etiqueta: centradas, sin ::before. */
  table.table-card-mobile tbody td.no-label{justify-content:center;}
  table.table-card-mobile tbody td.no-label::before{content:"";margin:0;}
}