/* =====================================================================
 * app.css — CeibeFACTU
 * Capa de marca: reutiliza el sistema de ceiberrhh (custom.css,
 * datatables-material.css) pero unifica TODO al verde y define los
 * componentes propios (header de sección, modales minimalistas).
 * Se carga DESPUÉS de custom.css y datatables-material.css.
 * ===================================================================== */

:root {
    --ceibe-primary: #059669;   /* emerald-600 */
    --cf-grad-from: #10b981;    /* emerald-500 */
    --cf-grad-to:   #16a34a;    /* green-600 */
}

/* ── Navegación (pasar los azules de custom.css a verde) ─────────────
   Mismo realce que CeibeRRHH: un degradado que sube desde el borde
   inferior del ítem + anillo fino y halo corto. Allí va en índigo sobre
   una barra indigo-50; aquí, en esmeralda sobre la barra emerald-50.
   Las transiciones se declaran en custom.css (explícitas y cortas, nunca
   `all`: con `all` el navegador vigila también el box-shadow del hover y
   el realce parece llegar tarde). */
.nav-link.active { color: var(--ceibe-primary) !important; }
.nav-link.active::after { background-color: var(--ceibe-primary); }
@media (min-width: 768px) {
    .nav-link-vertical::before,
    .nav-button-vertical::before {
        background: linear-gradient(to top, rgba(52, 211, 153, 0.62) 0%, rgba(167, 243, 208, 0.40) 100%);
    }
    .nav-link-vertical:hover,
    .nav-button-vertical:hover {
        border-color: #34d399;                                  /* emerald-400 */
        box-shadow: 0 2px 10px -3px rgba(5, 150, 105, 0.45);    /* emerald-600 */
    }
}
.dropdown-link:hover {
    background-color: #d1fae5;            /* emerald-100 */
    border-left-color: #10b981;           /* emerald-500 */
}

/* ── DataTables: cabecera verde (override del morado) ──────────────── */
.material-thead {
    background: linear-gradient(to right, var(--cf-grad-from), var(--cf-grad-to)) !important;
    border-bottom: 1px solid var(--cf-grad-to) !important;
}

/* Botones material a verde */
.material-btn-primary {
    background: linear-gradient(135deg, var(--cf-grad-from), #059669) !important;
    color: #fff !important;
}
.material-btn-primary:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
}
.material-btn-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
}
.material-btn-secondary:hover { background: #e2e8f0 !important; }

/* ── DataTables en verde (override centralizado de los azules ceiberrhh) ─
   Los estilos base viven en custom.css y datatables-material.css (azul,
   muchos con !important). app.css carga la última: a igual selector e
   !important, gana esta capa. Aquí se re-tiñe TODO el chrome de DataTables.
   (.material-thead, morado, ya se sobreescribe más abajo). */

/* Botones de exportar (Copiar / Excel / PDF / Imprimir) */
.dt-button,
.dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons .dt-button {
    background: #ecfdf5 !important;            /* emerald-50 */
    border: 1.5px solid #10b981 !important;    /* emerald-500 */
    color: #047857 !important;                 /* emerald-700 */
}
.dt-button:hover,
.dt-buttons .dt-button:hover,
.dataTables_wrapper .dt-buttons .dt-button:hover {
    background: #d1fae5 !important;            /* emerald-100 */
    border-color: #059669 !important;          /* emerald-600 */
    color: #065f46 !important;                 /* emerald-800 */
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25) !important;
}

/* Campo de búsqueda (selectores legacy y de DataTables 2) */
div.dt-container .dt-search input,
div.dt-container .dt-input,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input[type="search"],
div.dataTables_wrapper div.dataTables_filter input {
    border-color: #10b981 !important;          /* emerald-500 */
}
div.dt-container .dt-search input:focus,
div.dt-container .dt-input:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_filter input[type="search"]:focus,
div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: #059669 !important;          /* emerald-600 */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
}

/* Select de «Mostrar N» (focus) */
.dataTables_wrapper .dataTables_length select:focus,
div.dt-container .dt-length select:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* Página actual de la paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: linear-gradient(135deg, var(--cf-grad-from), #059669) !important;
    border-color: #10b981 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

/* Botones de acción de fila: editar en verde (eliminar sigue en rojo) */
.btn-edit {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}
.btn-edit:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
}

/* Duplicar: mismo botón circular que editar/eliminar (definidos en
   datatables-material.css), en teal para distinguirse de ambos. */
.btn-dup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.3);
    margin: 0 3px;
    font-size: 11px;
}
.btn-dup:hover {
    transform: translateY(-2px) scale(1.05);
    background: linear-gradient(135deg, #0d9488, #0f766e);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}

/* ── Header de sección unificado (todas las páginas igual, en verde) ─ */
.cf-section-header {
    background: linear-gradient(to right, var(--cf-grad-from), var(--cf-grad-to));
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Header de página "velo glass" (nuevo estilo, piloto en Locales) ──
   Mismo lenguaje que .cf-modal-glass-head: degradado de marca que se
   desvanece hacia el blanco del card, sin franja a todo color. Título
   teal-950 con chip de icono, acción primaria sólida y "Volver" ghost.
   Irá sustituyendo a .cf-section-header página a página. */
.cf-page-head {
    background: linear-gradient(to bottom, rgba(16, 185, 129, 0.20), rgba(16, 185, 129, 0));
    border-bottom: 1px solid rgba(17, 94, 89, 0.10);
}
/* Barra de acciones bajo .cf-page-head: el header queda solo con la identidad
   de la página y aquí van el cambio de vista (izquierda) y los botones
   (derecha). Fondo neutro muy tenue para separarla del contenido. */
.cf-page-toolbar {
    background: rgba(248, 250, 252, 0.9);
    border-bottom: 1px solid #eef2f7;
}
.cf-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: var(--ceibe-shadow);
    overflow: hidden;
}

/* ── Modales minimalistas (cabecera sobria, sin franja a todo color) ─ */
.cf-modal-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
/* Mayor especificidad que la utilidad .hidden de Tailwind para que el
   toggle de visibilidad funcione (si no, display:flex ganaría). */
.cf-modal-overlay.hidden { display: none !important; }
.cf-modal {
    background: #fff;
    border-radius: 0.9rem;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.35);
}
.cf-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #eef2f7;
    position: sticky; top: 0; background: #fff; z-index: 1;
}
.cf-modal-title {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 1rem; font-weight: 600; color: #1f2937;
}
.cf-modal-title i { color: var(--ceibe-primary); font-size: 0.95rem; }
.cf-modal-close {
    color: #9ca3af; width: 30px; height: 30px; border-radius: 0.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.cf-modal-close:hover { color: #374151; background: #f3f4f6; }
.cf-modal-body { padding: 1.25rem; }
.cf-modal-foot {
    display: flex; justify-content: flex-end; gap: 0.6rem;
    padding-top: 0.25rem;
}

/* ── Modal glass (variante moderna reutilizable) ─────────────────────
   Uso: <div class="cf-modal-overlay"><div class="cf-modal-glass max-w-*">
   Panel translúcido con blur (glassmorphism), borde fino y cabecera
   sobria sin franja de color. Sustituye a .cf-modal donde se quiera. */
.cf-modal-glass {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.65);
    outline: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 1.1rem;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px -22px rgba(15, 23, 42, 0.45);
}
/* Cabecera fina y pegajosa (título centrado + pestañas). Degradado de
   marca verde→transparente que se funde con el panel (sin hairline:
   rompería el desvanecido). El velo blanco inferior mantiene legible
   la cabecera cuando el contenido pasa por debajo al hacer scroll. */
.cf-modal-glass-head {
    position: sticky; top: 0; z-index: 2;
    padding: 0.85rem 1.25rem 0.75rem;
    background:
        linear-gradient(to bottom, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0)),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
/* Chrome teñido menta/teal (nada de gris ceniza sobre el glass):
   labels, hints, bordes de input y botón de cierre. El verde emerald
   queda reservado para acentos (botones, estados activos). */
.cf-modal-glass .material-input {
    background: rgba(255, 255, 255, 0.6);
    border-width: 1.5px;
    border-color: rgba(17, 94, 89, 0.16);          /* teal-800 */
}
.cf-modal-glass .material-input::placeholder { color: rgba(19, 78, 74, 0.35); }
.cf-modal-glass label { color: rgba(4, 47, 46, 0.78); }   /* teal-950 */
.cf-modal-glass .cf-modal-close { color: rgba(19, 78, 74, 0.45); }
.cf-modal-glass .cf-modal-close:hover { color: #0d9488; background: rgba(20, 184, 166, 0.12); }

/* ── Botón "liquid glass" (chrome de cabeceras glass: cerrar, descargar,
      zoom del previsualizador…) ─────────────────────────────────────── */
.cf-glass-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #0f766e;                                   /* teal-700 */
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background .15s, color .15s, box-shadow .15s;
}
.cf-glass-btn:hover {
    background: rgba(255, 255, 255, 0.72);
    color: #0d9488;                                   /* teal-600 */
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
}

/* Inputs coherentes (foco verde) */
.material-input:focus, .cf-input:focus {
    border-color: var(--ceibe-primary) !important;
    box-shadow: none !important;
}

/* Badge de actualización del SW (icono en el header) */
.sw-update-btn.show { display: inline-flex !important; }

/* ── Header glass (port de CeibeRRHH, reteñido a verde) ──────────────
   Paneles desplegables del nav y menú de usuario en cristal (blur +
   saturación) para que se funda con la página de detrás. Mismas
   propiedades que en ceiberrhh, con las sombras tintadas de emerald en
   lugar de azul. */
.user-menu-glass,
.header-glass-panel {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 14px 36px -10px rgba(6, 95, 70, 0.30),   /* emerald-800 */
        0 6px 16px -6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
/* Los mega-menús del nav son paneles grandes sobre contenido denso: con
   blur(18px)+saturate(180%) el navegador tiene que muestrear todo ese fondo
   antes del primer frame y el panel «tarda en dibujarse». Menos desenfoque +
   más opacidad = mismo aire de cristal, pintado al vuelo. El menú de usuario
   es pequeño y conserva el cristal fuerte. */
.header-glass-panel {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
}

/* Puente invisible sobre el panel: cubre la franja entre el botón y el menú
   para que bajar el ratón despacio no lo cierre a medio camino. Es hijo del
   mismo contenedor, así que el @mouseleave del dropdown no llega a dispararse. */
.header-glass-panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

/* ── Items de los mega-menús del header ──
   Antes: hover verde plano con DOS bordes laterales de 2.5 px (border-x), que
   encajonaban el enlace por ambos lados. Ahora solo el fondo: entra en
   degradado desde la izquierda y se desvanece hacia la derecha, sin ningún
   elemento animado. */
.hm-item {
    position: relative;
    border-radius: 8px;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.hm-item:hover {
    background-image: linear-gradient(90deg, rgba(167, 243, 208, 0.85) 0%, rgba(209, 250, 229, 0.28) 100%);
    color: #064e3b;                                /* emerald-900 */
}

/* Accesos destacados en rejilla. El borde inferior de antes se cambia por un
   anillo completo + un halo corto y uniforme por los cuatro lados: realza la
   tarjeta sin desplazarla ni proyectar sombra hacia un lado. */
.hm-tile {
    border-radius: 12px;
    transition: background-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

.hm-tile:hover {
    background-color: rgba(236, 253, 245, 0.95);   /* emerald-50 */
    box-shadow:
        0 0 8px rgba(5, 150, 105, 0.22),
        inset 0 0 0 1px rgba(52, 211, 153, 0.60);
}

/* Variante para la acción destructiva (Borrado masivo) */
.hm-tile--danger:hover,
.hm-item--danger:hover {
    background-color: rgba(254, 242, 242, 0.95);
    background-image: none;
    color: #b91c1c;                                /* red-700 */
    box-shadow:
        0 0 8px rgba(220, 38, 38, 0.20),
        inset 0 0 0 1px rgba(248, 113, 113, 0.60);
}

/* Deshabilitado («pronto»): sin realce ni cursor de enlace */
.hm-tile.is-disabled:hover,
.hm-item.is-disabled:hover {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    color: inherit;
}

/* Hover translúcido de los enlaces para conservar la sensación de cristal */
.user-menu-glass .dropdown-link:hover,
.header-glass-panel .dropdown-link:hover {
    background-color: rgba(167, 243, 208, 0.55);   /* emerald-200 translúcido */
}
/* Botón disparador del menú de usuario en cristal */
.user-menu-trigger {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.60);
    box-shadow: 0 1px 3px rgba(6, 95, 70, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.60);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.user-menu-trigger:hover {
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 2px 8px rgba(6, 95, 70, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
/* Fallback: navegadores sin backdrop-filter → algo más opaco para legibilidad */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .user-menu-glass,
    .header-glass-panel { background: rgba(255, 255, 255, 0.94); }
    .user-menu-trigger { background: rgba(236, 253, 245, 0.95); }   /* emerald-50 */
}

/* ── Aside de navegación por estados (firmas.php, port de CeibeRRHH) ──
   Lista vertical de estados con icono + etiqueta + contador; el activo se
   resalta. Reteñido a verde (en ceiberrhh era violeta). */
.firma-estado-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .7rem; border-radius: 10px;
    border: 1px solid transparent; background: transparent;
    cursor: pointer; text-align: left; white-space: nowrap;
    flex: 0 0 auto; transition: background .15s, border-color .15s;
}
@media (min-width: 1024px) { .firma-estado-item { width: 100%; } }
.firma-estado-item:hover { background: #ecfdf5; }                       /* emerald-50 */
.firma-estado-item.active { background: #d1fae5; border-color: #6ee7b7; } /* emerald-100 / 300 */
.firma-estado-ico { width: 18px; text-align: center; font-size: 13px; flex-shrink: 0; }
.firma-estado-label { font-size: 13px; font-weight: 500; color: #374151; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.firma-estado-item.active .firma-estado-label { color: #047857; font-weight: 600; } /* emerald-700 */
.firma-estado-count { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700; flex-shrink: 0; }

/* ── Día seleccionado en el calendario de Registro de ventas ──
   Borde verde oscuro con pulso intenso; el fondo lo deja la clase de estado
   de arqueo (rojo/azul/verde pálido). Ver assets/js/ventas.js. */
@keyframes cfPulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(6, 95, 70, 0.85); }   /* emerald-800 */
    70%  { box-shadow: 0 0 0 6px rgba(6, 95, 70, 0); }
    100% { box-shadow: 0 0 0 0 rgba(6, 95, 70, 0); }
}
.cf-dia-sel {
    border-color: #065f46 !important;                     /* emerald-800, verde oscuro */
    animation: cfPulseRing 1.1s ease-out infinite;
}

/* ── Aparición zoom-in de las statcards del cuadre (Ventas) ──────────
   ventas.js añade .cf-zoom-in a #cuadreDia SOLO la primera vez que se
   muestra (al elegir local+fecha). Cascada rápida y fluida con un leve
   rebote; cada tarjeta entra escalonada. */
@keyframes cfZoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
.cf-zoom-in > * {
    animation: cfZoomIn 0.26s cubic-bezier(0.34, 1.45, 0.5, 1) both;
}
.cf-zoom-in > *:nth-child(2) { animation-delay: 0.03s; }
.cf-zoom-in > *:nth-child(3) { animation-delay: 0.06s; }
.cf-zoom-in > *:nth-child(4) { animation-delay: 0.09s; }
.cf-zoom-in > *:nth-child(5) { animation-delay: 0.12s; }
.cf-zoom-in > *:nth-child(6) { animation-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
    .cf-zoom-in > * { animation: none; }
}

/* ── Zoom-in de entrada del grid de locales (Ventas) ────────────────
   ventas.js añade .cf-zoom-grid al CONTENEDOR del grid (no a cada
   tarjeta) la primera vez que se muestra (Registro al cargar, Consulta al
   abrir su pestaña). Easing ease-out SIN rebote (a diferencia del cuadre):
   entra creciendo suavemente hasta su tamaño y se detiene, sin pasarse. */
@keyframes cfZoomGridIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
.cf-zoom-grid { animation: cfZoomGridIn 0.3s ease-out both; transform-origin: center top; }
@media (prefers-reduced-motion: reduce) {
    .cf-zoom-grid { animation: none; }
}

/* ── Cifras monoespaciadas (Victor Mono, con dígitos tabulares) ──────
   Todas las cantidades/números van en mono para que las columnas de
   dígitos queden alineadas. Utilidad .cf-num + selectores ámbito Ventas
   para no tener que anotar cada celda generada por JS. */
.cf-num,
#cuadreDia [data-cuadre],
#rv_cuadreVivo [data-vivo],
#rv_lblTotalLineas, #rv_lblTotalDatafonos, #rv_lblIngresoTotal, #rv_adjCount,
#rv_modal input[inputmode="decimal"], #rv_ingresoDetalle, #rv_numTickets,
#resultadoConsulta td.text-right {
    font-family: 'Victor Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Cuadre de Ventas: pulsos del badge y borde de descuadre ─────────
   La cantidad del badge pulsa: rojo marcado si "a deber" (faltan ventas
   por justificar) y verde suave si "sobra" (medios > ventas). El recuadro
   de efectivo (lo que hay / debería haber) pulsa en naranja si descuadra. */
@keyframes cfAmountDebe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.09); }
}
@keyframes cfAmountSobra {
    0%, 100% { opacity: 1; }
    50%      { opacity: .68; }
}
.cf-amount-debe  { display: inline-block; color: #dc2626; font-weight: 800; animation: cfAmountDebe .7s ease-in-out infinite; }
.cf-amount-sobra { display: inline-block; color: #16a34a; font-weight: 800; animation: cfAmountSobra 1.7s ease-in-out infinite; }

@keyframes cfPulseOrange {
    0%, 100% { border-color: #fb923c; box-shadow: 0 0 0 0 rgba(249, 115, 22, .45); }
    50%      { border-color: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0); }
}
.cf-pulse-orange { animation: cfPulseOrange 1.1s ease-out infinite; }
.cf-pulse-orange > div + div { border-color: #fdba74 !important; }   /* divisor interno acorde */

@media (prefers-reduced-motion: reduce) {
    .cf-amount-debe, .cf-amount-sobra, .cf-pulse-orange { animation: none; }
}

/* Sombra simétrica suave (sin desplazamiento: se reparte por igual en
   todos los bordes) para los cards del modal de Ventas. */
.cf-card-shadow { box-shadow: 0 0 10px rgba(15, 23, 42, 0.08); }

/* ── Mini-header de tarjeta (cabecera centrada que se pega a los bordes,
   anulando el padding p-4 de la card). Usado en los cards de Consulta. ── */
.cf-card-head {
    margin: -1rem -1rem 0.75rem;                          /* anula p-4 arriba/laterales */
    padding: 0.5rem 1rem;
    background: #ecfdf5;                                  /* emerald-50 */
    color: #047857;                                       /* emerald-700 */
    border-bottom: 1px solid #d1fae5;                     /* emerald-100 */
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}