/*
 * ============================================================
 *  SURIA TYPOGRAPHY — Sistema de tipografía unificado
 *  Compatible con VOLT Theme (Bootstrap 5 + Nunito)
 *  Modo claro y oscuro automático via body.dark
 * ============================================================
 *
 *  REGLA DE ORO:
 *  Nunca uses style="font-size:..." ni style="color:#..."
 *  en los templates. Usa estas clases en su lugar.
 * ============================================================
 */


/* ============================================================
   1. ESCALA DE TAMAÑOS DE TEXTO
   Úsalas donde antes tenías style="font-size:Xpx"
   ============================================================

   Clase            Tamaño    Equivale a
   ──────────────────────────────────────
   .suria-xs        10px      texto muy pequeño (badges, anotaciones)
   .suria-sm        11px      labels compactos, pie de tabla
   .suria-base      12px      texto de tabla, labels normales
   .suria-md        13px      texto de párrafo secundario
   .suria-lg        14px      texto de formulario, selects
   .suria-xl        16px      subtítulos destacados
*/

.suria-xs   { font-size: 10px !important; }
.suria-sm   { font-size: 11px !important; }
.suria-base { font-size: 12px !important; }
.suria-md   { font-size: 13px !important; }
.suria-lg   { font-size: 14px !important; }
.suria-xl   { font-size: 16px !important; }


/* ============================================================
   2. TABLAS COMPACTAS
   Úsala donde antes tenías style="font-size:0.70rem" en <table>
   ============================================================ */

.suria-table {
    font-size: 0.70rem !important;
    table-layout: fixed;
    width: 100%;
}


/* ============================================================
   3. LABELS DE SECCIÓN (cabeceras de campo en formularios)
   Úsala donde antes tenías:
   style="font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.04em;"
   ============================================================ */

.suria-label-section {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    /* El color lo hereda del tema: oscuro en light, claro en dark */
    color: #515365;
}

body.dark .suria-label-section {
    color: #888ea8;
}


/* ============================================================
   4. VALOR DE CAMPO DESTACADO
   Úsala donde antes tenías:
   style="font-size:14px; font-weight:500; letter-spacing:0.04em;"
   ============================================================ */

.suria-field-value {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    color: #3b3f5c;
}

body.dark .suria-field-value {
    color: #e0e6ed;
}


/* ============================================================
   5. TEXTO SECUNDARIO / METADATOS
   Reemplaza style="color:#6b7280" o style="color:#9ca3af"
   que son los grises que se rompen en modo oscuro
   ============================================================ */

.suria-meta {
    font-size: 12px !important;
    color: #888ea8;
}

body.dark .suria-meta {
    color: #888ea8; /* el tema ya lo maneja bien en este tono */
}


/* ============================================================
   6. TEXTO DE ENLACE / USUARIO DESTACADO
   Reemplaza style="color:#185FA5" o style="color:#1d4ed8"
   ============================================================ */

.suria-link-text {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #185FA5;
}

body.dark .suria-link-text {
    color: #75D2FF; /* versión clara para fondo oscuro */
}


/* ============================================================
   7. TIMELINE / HISTORIA DE TICKETS
   Clases para el componente de bitácora/historial
   ============================================================ */

/* Texto principal de observación */
.tl-obs {
    font-size: 13px;
    color: #515365;
    margin: 0;
}

body.dark .tl-obs {
    color: #e0e6ed;
}

/* Metadato pequeño (fecha, hora) */
.tl-meta {
    font-size: 11px;
    color: #888ea8;
}

body.dark .tl-meta {
    color: #888ea8;
}

/* Título de usuario en timeline */
.tl-meta-user {
    font-size: 12px;
    font-weight: 600;
    color: #185FA5;
}

body.dark .tl-meta-user {
    color: #75D2FF;
}

/* Avatar circular en timeline */
.tl-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1.5px #cbd5e1;
}

body.dark .tl-avatar {
    background: #1b2e4b;
    color: #75D2FF;
    border-color: #191e3a;
    box-shadow: 0 0 0 1.5px #3b3f5c;
}

/* Título de sección grande en historial */
.tl-titulo {
    font-size: 22px;
    font-weight: 700;
    color: #185FA5;
}

body.dark .tl-titulo {
    color: #75D2FF;
}


/* ============================================================
   8. TEXTAREA Y SELECTS ESTANDARIZADOS
   Reemplaza style="font-size:14px" en form-control y form-select
   ============================================================ */

.suria-input {
    font-size: 14px !important;
    text-transform: uppercase;
}

.suria-select {
    font-size: 14px !important;
}


/* ============================================================
   9. CABECERA DE CARD / SECCIÓN
   Reemplaza el patrón card-header con texto en mayúsculas
   ============================================================ */

.card-header-custom {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3b3f5c;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e6ed;
}

body.dark .card-header-custom {
    color: #e0e6ed;
    border-bottom-color: #1b2e4b;
}


/* ============================================================
   10. COLOR DE ALERTA / ERROR INLINE
   Reemplaza style="color:red" o style="color:#E24B4A"
   Usa directamente la clase Bootstrap: text-danger
   (esta sección es solo documentación, no agrega CSS nuevo)

   USA:  <span class="text-danger">Error</span>
   NO:   <span style="color:red">Error</span>
   ============================================================ */


/* ============================================================
   DARK MODE — Valores de campo visibles en blanco
   Aplica a todos los templates que usan text-muted como valor
   ============================================================ */

body.dark .text-muted {
    color: #e0e6ed !important;
}

body.dark .fw-medium {
    color: #e0e6ed !important;
}

body.dark .fw-semibold {
    color: #d3d3d3 !important;
}

body.dark .fs-6 {
    color: #ffffff !important;
}