/* ==========================================================================
   custom-modern.css — Overrides modernos para el Sistema Médico Ocupacional
   Cargado DESPUÉS de Bootstrap/AdminLTE para mayor especificidad.
   NO modificar archivos de Bootstrap ni AdminLTE directamente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Google Fonts — Inter
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   2. Variables CSS — Paleta para sistema médico/salud ocupacional
      Azul confiable como primario, verdes sutiles para éxito,
      neutros limpios para fondos.
   -------------------------------------------------------------------------- */
:root {
    /* Marca principal — Azul médico confiable */
    --brand-primary:        #1a6ea8;   /* Azul corporativo profundo */
    --brand-primary-hover:  #155a8a;   /* Hover más oscuro */
    --brand-primary-light:  #e8f3fb;   /* Fondo suave de acento primario */

    /* Secundario — Verde salud */
    --brand-secondary:      #27a069;   /* Verde médico equilibrado */
    --brand-secondary-hover:#1f8256;
    --brand-secondary-light:#e9f7f2;

    /* Estados semánticos */
    --color-success:        #28a745;
    --color-warning:        #f59e0b;
    --color-danger:         #dc3545;
    --color-info:           #17a2b8;

    /* Tipografía */
    --text-primary:         #1e293b;   /* Casi negro, alta legibilidad */
    --text-secondary:       #475569;   /* Gris medio para contenido secundario */
    --text-muted:           #94a3b8;   /* Gris claro para hints y placeholders */
    --text-on-brand:        #ffffff;   /* Texto sobre fondo de marca */

    /* Fondos */
    --bg-body:              #f1f5f9;   /* Fondo general del sistema */
    --bg-soft:              #f8fafc;   /* Tarjetas, paneles secundarios */
    --bg-white:             #ffffff;

    /* Bordes */
    --border-soft:          #e2e8f0;   /* Bordes sutiles */
    --border-medium:        #cbd5e1;   /* Bordes con más presencia */

    /* Sombras */
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-md:            0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .05);
    --shadow-lg:            0 10px 15px rgba(0, 0, 0, .07), 0 4px 6px rgba(0, 0, 0, .05);

    /* Radios */
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            12px;

    /* Transiciones */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
}

/* --------------------------------------------------------------------------
   3. Tipografía base — Inter sobre todo el sistema
   -------------------------------------------------------------------------- */
body,
.skin-blue-light body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Oxygen, Ubuntu, sans-serif !important;
    font-size: 13px;
    color: var(--text-primary);
    background-color: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
    color: var(--text-primary);
}

/* Pesos semánticos */
.font-medium  { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold    { font-weight: 700 !important; }