/* ================================================================
   SIJM — Sistema de Inscripción Juegos Magisteriales
   CSS Global MINEDUC — v2.0
   ================================================================ */

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

/* ── Variables ────────────────────────────────────────────────── */
:root {
    --azul-oscuro:   #012E60;
    --azul-medio:    #0055A4;
    --azul-claro:    #007ACC;
    --azul-suave:    #E8F1FB;
    --amarillo:      #FDB913;
    --verde:         #00A651;
    --rojo:          #E53935;
    --gris-fondo:    #F4F6FA;
    --gris-borde:    #DDE3ED;
    --blanco:        #FFFFFF;
    --texto-oscuro:  #1A2B42;
    --texto-medio:   #4A5568;
    --texto-claro:   #8896A8;
    --sombra-sm:     0 2px 8px rgba(1,46,96,0.08);
    --sombra-md:     0 8px 24px rgba(1,46,96,0.10);
    --sombra-lg:     0 20px 50px rgba(1,46,96,0.14);
    --radio-sm:      8px;
    --radio-md:      14px;
    --radio-lg:      20px;
    --trans:         all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset / Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--gris-fondo);
    color: var(--texto-oscuro);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── Tipografía y colores Bulma override ────────────────────── */
.title, .subtitle { font-family: 'Inter', sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: 'Inter', sans-serif; }

/* ================================================================
   OVERRIDE BULMA — TEXTOS LEGIBLES (sin gris pálido)
   ================================================================ */

/* Bulma 1.x usa variables CSS que dan gris pálido — sobreescribir */
:root {
    --bulma-text:               #1A2B42;
    --bulma-text-strong:        #1A2B42;
    --bulma-text-weak:          #4A5568;
    --bulma-title-color:        #1A2B42;
    --bulma-subtitle-color:     #4A5568;
    --bulma-card-header-color:  #1A2B42;
    --bulma-card-color:         #1A2B42;
}

/* .title — titulos H1-H6 con clase Bulma */
.title {
    color: var(--texto-oscuro) !important;
}

/* .title sin color inline explícito en vistas como resultados/index */
.title:not([style*="color"]):not(.has-text-white):not(.has-text-light) {
    color: var(--texto-oscuro) !important;
}

/* .subtitle */
.subtitle:not([style*="color"]):not(.has-text-white):not(.has-text-light) {
    color: var(--texto-medio) !important;
}

/* Permitir que clases helper de color de Bulma anulen el color del titulo/subtitulo/tarjetas */
.title.has-text-white, .subtitle.has-text-white,
.card-header-title.has-text-white, .card-content.has-text-white,
.has-text-white, .has-text-white * {
    color: #ffffff !important;
}
.title.has-text-light, .subtitle.has-text-light,
.card-header-title.has-text-light, .card-content.has-text-light,
.has-text-light, .has-text-light * {
    color: #f5f5f5 !important;
}
.title.has-text-link, .subtitle.has-text-link {
    color: var(--azul-medio) !important;
}

/* Card headers */
.card-header-title:not([style*="color"]):not(.has-text-white):not(.has-text-light) {
    color: var(--texto-oscuro) !important;
    font-weight: 600 !important;
}

/* Texto dentro de card-content */
.card-content:not([style*="color"]):not(.has-text-white):not(.has-text-light) {
    color: var(--texto-oscuro) !important;
}

/* Bulma "has-text-grey" — usar gris oscuro legible */
.has-text-grey {
    color: var(--texto-medio) !important;
}

/* Bulma "has-text-grey-light" — en el footer está bien en blanco */
.footer-modern .has-text-grey-light {
    color: rgba(255,255,255,0.70) !important;
}

/* Texto de tablas */
td, th { color: var(--texto-oscuro) !important; }

/* Texto en tags de Bulma en tablas y resultados */
.table td, .table th {
    color: var(--texto-oscuro) !important;
}

/* Texto en formularios */
.label { color: var(--texto-oscuro) !important; }
.input, .select select, .textarea {
    color: var(--texto-oscuro) !important;
}

/* Bulma .level y .level-item textos */
.level .title, .level .subtitle {
    color: var(--texto-oscuro) !important;
}

/* Subtítulo en dashboard "Bienvenido de nuevo" */
.subtitle.is-5.has-text-grey,
.subtitle.has-text-grey {
    color: var(--texto-medio) !important; /* gris visible, no pálido */
}

/* Fecha en dashboard */
.is-size-6.has-text-grey {
    color: var(--texto-medio) !important;
}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar-modern {
    background: var(--azul-oscuro) !important;
    box-shadow: 0 2px 16px rgba(1,46,96,0.25);
    backdrop-filter: blur(10px);
    min-height: 64px;
}

.navbar-modern .navbar-brand .navbar-item,
.navbar-modern .navbar-item,
.navbar-modern .navbar-link {
    color: #FFFFFF !important;
    font-weight: 500;
    transition: var(--trans);
    border-radius: var(--radio-sm);
}

.navbar-modern .navbar-item:hover,
.navbar-modern .navbar-link:hover {
    color: var(--amarillo) !important;
    background: rgba(255,255,255,0.10) !important;
}

.navbar-modern .navbar-dropdown {
    background: var(--blanco);
    border-top: 3px solid var(--amarillo);
    border-radius: 0 0 var(--radio-md) var(--radio-md);
    box-shadow: var(--sombra-md);
}

.navbar-modern .navbar-dropdown .navbar-item {
    color: var(--texto-oscuro) !important;
    background-color: transparent !important;
    background: transparent !important;
}

.navbar-modern .navbar-dropdown .navbar-item:hover {
    color: var(--azul-oscuro) !important;
    background: var(--azul-suave) !important;
    background-color: var(--azul-suave) !important;
}

/* ================================================================
   HERO / BANNER
   ================================================================ */
.hero-primary {
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 60%, var(--azul-claro) 100%);
    position: relative;
    overflow: hidden;
}

.hero-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(253,185,19,0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 40%);
    pointer-events: none;
}

.hero-primary::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: var(--gris-fondo);
    clip-path: ellipse(55% 100% at 50% 100%);
}

/* ================================================================
   CARDS
   ================================================================ */
.card,
.card-modern {
    background: var(--blanco);
    color: var(--texto-oscuro);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-lg) !important;
    box-shadow: var(--sombra-sm);
    transition: var(--trans);
    overflow: hidden;
    text-decoration: none !important;
}

.card:hover,
.card-modern:hover {
    box-shadow: var(--sombra-md);
    transform: translateY(-3px);
    text-decoration: none !important;
}

.card-content {
    background: var(--blanco);
    color: var(--texto-oscuro);
}

.card-header {
    border-bottom: none;
    border-radius: var(--radio-lg) var(--radio-lg) 0 0 !important;
}

.card-header-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

/* Tarjetas de estadísticas (con gradiente propio) */
.card.card-stat,
.card-stat {
    border: none !important;
    border-radius: var(--radio-lg) !important;
    transition: var(--trans);
}

.card.card-stat:hover,
.card-stat:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--sombra-lg) !important;
}

.card.card-stat .card-content {
    background: transparent !important;
    color: inherit !important;
}

/* ================================================================
   TABLAS — sin fondo negro en ninguna circunstancia
   ================================================================ */
.table,
.table-container {
    background: var(--blanco) !important;
    color: var(--texto-oscuro) !important;
}

.table {
    border-radius: var(--radio-md);
    overflow: hidden;
    border: 1px solid var(--gris-borde);
}

.table thead {
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 100%);
}

.table thead th {
    color: var(--blanco) !important;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none !important;
    background: transparent !important;
    padding: 14px 16px;
}

.table tbody tr {
    background: var(--blanco) !important;
    color: var(--texto-oscuro) !important;
    transition: background 0.15s ease;
}

.table tbody tr:nth-child(even) {
    background: var(--gris-fondo) !important;
}

.table tbody tr:hover,
.table.is-hoverable tbody tr:hover {
    background: var(--azul-suave) !important;
}

.table tbody td {
    color: var(--texto-oscuro) !important;
    border-color: var(--gris-borde) !important;
    background: transparent !important;
    vertical-align: middle;
    padding: 12px 16px;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background: var(--gris-fondo) !important;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(odd) {
    background: var(--blanco) !important;
}

/* ================================================================
   DATATABLES — sin fondo negro
   ================================================================ */
.dataTables_wrapper,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    background: transparent !important;
    color: var(--texto-medio) !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
}

table.dataTable {
    background: var(--blanco) !important;
}

table.dataTable tbody tr {
    background: var(--blanco) !important;
    color: var(--texto-oscuro) !important;
}

table.dataTable tbody tr:nth-child(even) {
    background: var(--gris-fondo) !important;
}

table.dataTable tbody tr:hover {
    background: var(--azul-suave) !important;
}

table.dataTable tbody td {
    color: var(--texto-oscuro) !important;
    border-color: var(--gris-borde) !important;
    background: transparent !important;
}

table.dataTable thead th,
table.dataTable thead td {
    color: var(--blanco) !important;
    background: transparent !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* Paginación DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--blanco) !important;
    color: var(--azul-oscuro) !important;
    border: 1px solid var(--gris-borde) !important;
    border-radius: var(--radio-sm) !important;
    font-weight: 500;
    margin: 0 2px;
    transition: var(--trans);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 100%) !important;
    color: var(--blanco) !important;
    border-color: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: var(--gris-fondo) !important;
    color: var(--texto-claro) !important;
}

/* ================================================================
   FORMULARIOS
   ================================================================ */
.input, .select select, .textarea {
    border: 1.5px solid var(--gris-borde);
    border-radius: var(--radio-md) !important;
    font-family: 'Inter', sans-serif;
    color: var(--texto-oscuro);
    background: var(--blanco);
    box-shadow: none;
    transition: var(--trans);
    padding: 10px 14px;
    height: auto;
}

.input:focus, .select select:focus, .textarea:focus {
    border-color: var(--azul-claro) !important;
    box-shadow: 0 0 0 3px rgba(0,122,204,0.15) !important;
    outline: none;
}

.input::placeholder { color: var(--texto-claro); }

.label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--texto-oscuro);
    margin-bottom: 6px;
}

.field { margin-bottom: 1.25rem; }

/* ================================================================
   BOTONES
   ================================================================ */
.button {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: var(--radio-md) !important;
    transition: var(--trans);
    letter-spacing: 0.02em;
}

.btn-gradient,
.button.btn-gradient {
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 100%);
    border: none;
    color: var(--blanco) !important;
    box-shadow: 0 4px 15px rgba(0,85,164,0.35);
}

.btn-gradient:hover,
.button.btn-gradient:hover {
    background: linear-gradient(135deg, var(--azul-medio) 0%, var(--azul-claro) 100%);
    box-shadow: 0 8px 25px rgba(0,85,164,0.45);
    transform: translateY(-2px);
    color: var(--blanco) !important;
}

.button.is-primary {
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 100%);
    border: none;
    box-shadow: 0 4px 14px rgba(0,85,164,0.3);
}

.button.is-primary:hover {
    background: linear-gradient(135deg, var(--azul-medio) 0%, var(--azul-claro) 100%);
    transform: translateY(-1px);
}

/* ================================================================
   TAGS / BADGES
   ================================================================ */
.tag {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: 999px !important;
    font-size: 0.75rem;
    padding: 4px 12px;
    letter-spacing: 0.03em;
}

.tag-modern { border-radius: 999px !important; padding: 8px 16px; }

/* ================================================================
   NOTIFICACIONES / ALERTAS
   ================================================================ */
.notification {
    border-radius: var(--radio-md) !important;
    font-family: 'Inter', sans-serif;
    border-left: 4px solid transparent;
}

.notification.is-success { border-left-color: var(--verde); }
.notification.is-danger  { border-left-color: var(--rojo);  }
.notification.is-info    { border-left-color: var(--azul-claro); }
.notification.is-warning { border-left-color: var(--amarillo); }

/* Flash message */
.flash-message {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 9999;
    animation: slideInRight 0.35s cubic-bezier(0.4,0,0.2,1);
    min-width: 320px;
}

/* ================================================================
   CHART.JS — canvas fondo blanco
   ================================================================ */
.card-content canvas {
    background: var(--blanco) !important;
    border-radius: var(--radio-sm);
}

/* ================================================================
   FOOTER
   ================================================================ */
.footer-modern {
    background: var(--azul-oscuro);
    color: rgba(255,255,255,0.8);
    padding: 2rem 1.5rem;
}

.footer-modern strong,
.footer-modern .has-text-weight-bold {
    color: var(--blanco);
}

/* ================================================================
   SECCIÓN / LAYOUT
   ================================================================ */
.section {
    padding: 2.5rem 1.5rem;
}

/* ================================================================
   ANIMACIONES
   ================================================================ */
.fade-in {
    animation: fadeInUp 0.45s cubic-bezier(0.4,0,0.2,1) both;
}

.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100px); }
    to   { opacity: 1; transform: translateX(0);     }
}

@keyframes pulse-ring {
    0%   { transform: scale(0.9); opacity: 0.8; }
    70%  { transform: scale(1.2); opacity: 0;   }
    100% { transform: scale(1.2); opacity: 0;   }
}

/* ================================================================
   PÁGINA CONSULTA — estilos específicos
   ================================================================ */
.consulta-hero {
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 60%, var(--azul-claro) 100%);
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.consulta-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 60%, rgba(253,185,19,0.15) 0%, transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(255,255,255,0.07) 0%, transparent 40%);
}

.consulta-card {
    background: var(--blanco) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(1,46,96,0.14) !important;
    border: 1px solid var(--gris-borde);
    overflow: hidden;
}

.consulta-input-wrapper {
    position: relative;
}

.consulta-input {
    width: 100%;
    padding: 16px 20px 16px 52px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    border: 2px solid var(--gris-borde);
    border-radius: var(--radio-lg) !important;
    background: var(--gris-fondo);
    color: var(--texto-oscuro);
    transition: var(--trans);
    outline: none;
}

.consulta-input:focus {
    border-color: var(--azul-claro);
    background: var(--blanco);
    box-shadow: 0 0 0 4px rgba(0,122,204,0.12);
}

.consulta-input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--azul-claro);
    font-size: 1rem;
    pointer-events: none;
}

.consulta-btn {
    width: 100%;
    padding: 15px 24px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: none;
    border-radius: var(--radio-lg) !important;
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 100%);
    color: var(--blanco);
    cursor: pointer;
    transition: var(--trans);
    box-shadow: 0 6px 20px rgba(0,85,164,0.35);
}

.consulta-btn:hover {
    background: linear-gradient(135deg, var(--azul-medio) 0%, var(--azul-claro) 100%);
    box-shadow: 0 10px 28px rgba(0,85,164,0.45);
    transform: translateY(-2px);
}

.consulta-btn:active { transform: translateY(0); }

/* Resultado: acreditado */
.resultado-acreditado {
    background: linear-gradient(135deg, #e8f8f0 0%, #d4f0e3 100%);
    border: 2px solid var(--verde);
    border-radius: 20px;
    padding: 2rem;
}

.resultado-acreditado .status-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--verde);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 24px rgba(0,166,81,0.3);
    font-size: 2rem; color: white;
    position: relative;
}

.resultado-acreditado .status-icon::before {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(0,166,81,0.35);
    animation: pulse-ring 1.8s ease-out infinite;
}

/* Resultado: no encontrado */
.resultado-negativo {
    background: linear-gradient(135deg, #fdf0f0 0%, #fce4e4 100%);
    border: 2px solid #E53935;
    border-radius: 20px;
    padding: 2rem;
}

.resultado-negativo .status-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: #E53935;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 24px rgba(229,57,53,0.3);
    font-size: 2rem; color: white;
}

.dato-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    gap: 12px;
}

.dato-row:last-child { border-bottom: none; }

.dato-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-claro);
    min-width: 110px;
}

.dato-valor {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--texto-oscuro);
}

/* ================================================================
   UTILIDADES
   ================================================================ */
.text-azul    { color: var(--azul-oscuro) !important; }
.text-amarillo { color: var(--amarillo) !important; }
.text-verde   { color: var(--verde) !important; }
.text-medio   { color: var(--texto-medio) !important; }
.text-claro   { color: var(--texto-claro) !important; }

.bg-azul      { background: var(--azul-oscuro) !important; }
.bg-suave     { background: var(--azul-suave) !important; }
.bg-fondo     { background: var(--gris-fondo) !important; }

.radius-lg    { border-radius: var(--radio-lg) !important; }
.radius-md    { border-radius: var(--radio-md) !important; }
.sombra-md    { box-shadow: var(--sombra-md) !important; }

.divider {
    height: 1px;
    background: var(--gris-borde);
    margin: 1.25rem 0;
}