/* =========================================
   CIEL - Conocimiento Inclusivo en Línea
   Archivo de Estilos Globales (Accesible)
   ========================================= */

:root {
    /* Paleta de Colores Institucional */
    --ciel-verde: #198754;        /* Verde Success de Bootstrap */
    --ciel-verde-oscuro: #0a3622; /* Para mejor contraste en textos */
    --ciel-fondo: #f8f9fa;        /* Gris muy claro para evitar fatiga visual */
    --ciel-texto: #212529;        /* Gris oscuro (evita el negro puro) */
    --ciel-enlace: #0d6efd;       /* Azul estándar de enlaces */
    --ciel-blanco: #ffffff;

    /* Tipografía */
    --fuente-principal: Arial;
    --tamano-base: 14px;          /* Tamaño mayor al estándar para legibilidad */
}

/* Configuración General */
body {
    background-color: var(--ciel-fondo);
    color: var(--ciel-texto);
    font-family: var(--fuente-principal);
    font-size: var(--tamano-base);
    line-height: 1.6;             /* Espaciado que facilita el seguimiento de lectura */
    margin: 0;
    padding: 0;
}

/* Jerarquía de Títulos */
h1, h2, h3, h4, h5, h6 {
    color: var(--ciel-verde-oscuro);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Accesibilidad en Enlaces */
a {
    color: var(--ciel-enlace);
    text-decoration: underline;   /* Siempre subrayados para identificar links fácilmente */
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--ciel-verde-oscuro);
    text-decoration: none;
}

/* Componentes de Tarjetas (Cards) */
.card {
    border: none;
    border-radius: 8px;
    margin-bottom: 20px;
}

.card-header {
    border-bottom: 2px solid var(--ciel-verde);
}

/* Botones con Contraste Reforzado */
.btn {
    font-weight: 600;
    padding: 10px 20px;
}

.btn-success {
    background-color: var(--ciel-verde);
    border-color: var(--ciel-verde-oscuro);
}

.btn-success:hover {
    background-color: var(--ciel-verde-oscuro);
}

/* Migas de Pan (Breadcrumbs) */
.breadcrumb {
    background: transparent;
    padding: 0;
}

.breadcrumb-item a {
    text-decoration: none;
    color: var(--ciel-verde);
}

/* FOCO PARA NAVEGACIÓN POR TECLADO (CRÍTICO PARA NVDA) */
/* Resalta con un borde amarillo brillante cualquier elemento seleccionado con TAB */
:focus {
    outline: 3px solid #ffc107 !important;
    outline-offset: 2px;
}

/* Ajustes para Imágenes */
img {
    max-width: 100%;
    height: auto;
}

/* Estilo para el pie de página */
footer {
    border-top: 4px solid var(--ciel-verde);
}