/**
 * ARK-IA · Acabado metalizado del contenido
 *
 * Tipografía Sora en negro grafito para todo el cuerpo de los módulos y
 * colores con degradado metálico (brillo, base y sombra) en botones,
 * etiquetas, barras y pestañas. El sidebar y la barra superior no cambian.
 * Se carga al final de head.php para ganar sobre ark-global.css.
 */
:root {
    --ark-texto: #0f172a;
    --ark-texto-suave: #475569;
    /* Vertical: el brillo va de arriba abajo y la frase se ve pareja */
    --ark-grafito: linear-gradient(180deg, #475569 0%, #0f172a 48%, #1e293b 62%, #020617 100%);

    /* [brillo, base, sombra] de cada tono, los mismos de las donas */
    --metal-verde: linear-gradient(135deg, #99f6e4 0%, #0d9488 45%, #5eead4 55%, #0d9488 65%, #134e4a 100%);
    --metal-marca: linear-gradient(135deg, #6ee7b7 0%, #059669 45%, #34d399 55%, #047857 65%, #064e3b 100%);
    --metal-azul: linear-gradient(135deg, #bae6fd 0%, #0284c7 45%, #7dd3fc 55%, #0284c7 65%, #0c4a6e 100%);
    --metal-oro: linear-gradient(135deg, #fde68a 0%, #d97706 45%, #fcd34d 55%, #d97706 65%, #78350f 100%);
    --metal-rubi: linear-gradient(135deg, #fecdd3 0%, #e11d48 45%, #fda4af 55%, #e11d48 65%, #4c0519 100%);
    --metal-violeta: linear-gradient(135deg, #ddd6fe 0%, #7c3aed 45%, #c4b5fd 55%, #7c3aed 65%, #3b0764 100%);
    --metal-plata: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 45%, #e2e8f0 55%, #64748b 65%, #334155 100%);
    --metal-negro: linear-gradient(135deg, #64748b 0%, #1e293b 45%, #475569 55%, #0f172a 65%, #020617 100%);

    /* Versiones claras para fondos de etiquetas */
    --metal-verde-claro: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 50%, #f0fdfa 60%, #99f6e4 100%);
    --metal-azul-claro: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 60%, #bae6fd 100%);
    --metal-oro-claro: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fffbeb 60%, #fde68a 100%);
    --metal-rubi-claro: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 50%, #fff1f2 60%, #fecdd3 100%);
    --metal-plata-claro: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #ffffff 60%, #e2e8f0 100%);

    --metal-luz: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12);
}

/* ---------- Tipografía del cuerpo ----------
 * Zonas excluidas: el lienzo del editor de plantillas (create.php guarda en el
 * correo la fuente que lee de cada bloque), Summernote y los editores de
 * código. Ahí todo sigue como antes para no alterar los correos.
 */
html body .main-content :is(p, span, div, td, th, li, label, small, a, strong, b, em, h1, h2, h3, h4, h5, h6,
    .form-control, .form-select, .btn, input, textarea, select, button, .dropdown-item, .nav-link, .page-link):not(#templatePreview, #templatePreview *, .template-preview, .template-preview *, .note-editor, .note-editor *,
         #codeEditor, #codeEditor *, .CodeMirror, .CodeMirror *, pre, pre *, code),
html body .modal :is(p, span, div, td, th, li, label, small, a, .form-control, .form-select, .btn, input, textarea, select, button):not(.note-editor, .note-editor *, pre, pre *, code) {
    font-family: 'Sora', 'Inter', -apple-system, 'Segoe UI', sans-serif;
}
/* Las zonas excluidas no heredan Sora de su contenedor */
html body .main-content :is(#templatePreview, .template-preview, .note-editable) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Fuera de los encabezados de color (hero), fondos de color y textos marcados en blanco */
html body .main-content :is(td, li, label, p, .form-control, .form-select):not(#templatePreview *, .template-preview *, .note-editor *, [class*="hero"] *, [class*="bg-"] *, .text-white, .text-white *),
html body .modal .modal-body :is(td, li, label, p) {
    color: var(--ark-texto);
}
html body .main-content .text-muted:not([class*="hero"] *), html body .modal .text-muted { color: var(--ark-texto-suave) !important; }

/* Íconos de Font Awesome conservan su propia fuente */
html body .main-content .fa, html body .main-content .fas, html body .main-content .far, html body .main-content .fab,
html body .main-content [class^="fa-"], html body .main-content [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}
html body .main-content .fab { font-family: "Font Awesome 6 Brands" !important; }

/* ---------- Títulos y cifras en negro metalizado ---------- */
html body .main-content :is(.card-header h5, .card-header h6, .card-title, .stat-value, .rk-v, .rk-link-name, .rk-nombre, h4, h5, h6):not(.text-white):not(.ark-hero *):not([class*="bg-"] *):not([class*="hero"] *):not(.modal-header *):not(#templatePreview *, .template-preview *, .note-editor *) {
    background: var(--ark-grafito);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ark-texto) !important;
}
/* Los íconos dentro de títulos siguen siendo visibles */
html body .main-content .card-header h5 i, html body .main-content .card-header h6 i,
html body .main-content .card-title i, html body .main-content h4 i, html body .main-content h5 i, html body .main-content h6 i {
    -webkit-text-fill-color: #047857;
}

/* ---------- Botones ---------- */
html body .main-content .btn-primary, html body .main-content .btn-success,
html body .modal .btn-primary, html body .modal .btn-success {
    background: var(--metal-marca) !important;
    background-size: 200% 200% !important;
    border-color: #047857 !important;
    color: #fff !important;
    box-shadow: var(--metal-luz), 0 2px 6px rgba(4,120,87,.25);
    text-shadow: 0 1px 0 rgba(0,0,0,.18);
    transition: background-position .4s ease, box-shadow .2s ease;
}
html body .main-content .btn-primary:hover, html body .main-content .btn-success:hover,
html body .modal .btn-primary:hover, html body .modal .btn-success:hover {
    background-position: 100% 100% !important;
    box-shadow: var(--metal-luz), 0 4px 12px rgba(4,120,87,.35);
}
html body .main-content .btn-danger, html body .modal .btn-danger {
    background: var(--metal-rubi) !important; border-color: #be123c !important; color: #fff !important;
    box-shadow: var(--metal-luz); text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
html body .main-content .btn-warning, html body .modal .btn-warning {
    background: var(--metal-oro) !important; border-color: #b45309 !important; color: #fff !important;
    box-shadow: var(--metal-luz); text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
html body .main-content .btn-info, html body .modal .btn-info {
    background: var(--metal-azul) !important; border-color: #0369a1 !important; color: #fff !important;
    box-shadow: var(--metal-luz); text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
html body .main-content .btn-secondary, html body .modal .btn-secondary,
html body .main-content .btn-dark, html body .modal .btn-dark {
    background: var(--metal-negro) !important; border-color: #0f172a !important; color: #fff !important;
    box-shadow: var(--metal-luz);
}
html body .main-content .btn-light:not(.ark-hero *), html body .main-content .btn-outline-secondary,
html body .main-content .btn-outline-primary, html body .modal .btn-light, html body .modal .btn-outline-secondary {
    background: var(--metal-plata-claro) !important;
    box-shadow: var(--metal-luz), 0 1px 2px rgba(15,23,42,.08);
}
html body .main-content .btn-outline-primary { color: #047857 !important; border-color: #6ee7b7 !important; }

/* ---------- Etiquetas de estado ---------- */
html body .main-content .badge, html body .modal .badge { box-shadow: var(--metal-luz); }
html body .main-content .badge.bg-primary, html body .modal .badge.bg-primary,
html body .main-content .badge.bg-success, html body .modal .badge.bg-success { background: var(--metal-verde-claro) !important; color: #0f766e !important; }
html body .main-content .badge.bg-info, html body .modal .badge.bg-info { background: var(--metal-azul-claro) !important; color: #0369a1 !important; }
html body .main-content .badge.bg-warning, html body .modal .badge.bg-warning { background: var(--metal-oro-claro) !important; color: #92400e !important; }
html body .main-content .badge.bg-danger, html body .modal .badge.bg-danger { background: var(--metal-rubi-claro) !important; color: #be123c !important; }
html body .main-content .badge.bg-secondary, html body .modal .badge.bg-secondary,
html body .main-content .badge.bg-light, html body .modal .badge.bg-light { background: var(--metal-plata-claro) !important; color: #334155 !important; }
html body .main-content .badge.bg-dark, html body .modal .badge.bg-dark { background: var(--metal-negro) !important; color: #fff !important; }

/* ---------- Barras de progreso ---------- */
html body .main-content .progress { background: #eef2f7; box-shadow: inset 0 1px 2px rgba(15,23,42,.08); }
html body .main-content .progress-bar { box-shadow: var(--metal-luz); }
html body .main-content .progress-bar.bg-primary, html body .main-content .progress-bar.bg-success,
html body .main-content .progress-bar:not([class*="bg-"]):not([style*="background"]) { background: var(--metal-verde) !important; }
html body .main-content .progress-bar.bg-info { background: var(--metal-azul) !important; }
html body .main-content .progress-bar.bg-warning { background: var(--metal-oro) !important; }
html body .main-content .progress-bar.bg-danger { background: var(--metal-rubi) !important; }
html body .main-content .progress-bar.bg-secondary { background: var(--metal-plata) !important; }

/* ---------- Pestañas y paginación ---------- */
html body .main-content .nav-pills .nav-link.active,
html body .main-content .page-item.active .page-link {
    background: var(--metal-marca) !important;
    border-color: #047857 !important;
    color: #fff !important;
    box-shadow: var(--metal-luz);
}
html body .main-content .nav-tabs .nav-link.active {
    background: var(--metal-plata-claro) !important;
    border-bottom: 2px solid #059669 !important;
    color: var(--ark-texto) !important;
}

/* ---------- Tablas ---------- */
html body .main-content .table thead th {
    /* Degradado vertical: se ve continuo de una columna a otra */
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 55%, #e9eef4 100%) !important;
    box-shadow: inset 0 1px 0 #ffffff;
    color: #334155 !important;
    font-weight: 700;
    border-bottom: 1px solid #cbd5e1 !important;
}

/* ---------- Íconos de tarjetas de estadísticas ---------- */
html body .main-content .stat-icon.bg-primary, html body .main-content .stat-icon.bg-success { background: var(--metal-marca) !important; box-shadow: var(--metal-luz); }
html body .main-content .stat-icon.bg-info { background: var(--metal-azul) !important; box-shadow: var(--metal-luz); }
html body .main-content .stat-icon.bg-warning { background: var(--metal-oro) !important; box-shadow: var(--metal-luz); }
html body .main-content .stat-icon.bg-danger { background: var(--metal-rubi) !important; box-shadow: var(--metal-luz); }
html body .main-content .stat-icon.bg-secondary { background: var(--metal-plata) !important; box-shadow: var(--metal-luz); }

/* La impresión no necesita degradados en el texto */
@media print {
    html body .main-content h4, html body .main-content h5, html body .main-content h6,
    html body .main-content .card-title, html body .main-content .rk-v {
        -webkit-text-fill-color: currentColor;
        background: none;
    }
}