:root {
    /* Paleta extraída del logo de Al Doscientos: círculo naranja/mostaza,
       aro y huellas en negro, rótulo rojo con borde blanco. */
    --brand-orange: #c97a22;
    --brand-orange-dark: #a66019;
    --brand-orange-light: #e6a355;
    --brand-red: #d62d20;
    --brand-black: #1a1a1a;

    --bg-color: #f7f4f0;
    --text-color: #2b2620;
    --card-bg: #ffffff;
    --border-color: #ece4d8;
    --navbar-bg: var(--brand-black);
    --navbar-text: #ffffff;

    /* Campos de formulario: fondo oscuro con letra clara a propósito
       (contraste consistente sobre cajas claras u oscuras), en vez de
       depender del blanco por defecto de Bootstrap. */
    --input-bg: #241d15;
    --input-bg-focus: #2c2318;
    --input-text: #f5efe4;
    --input-placeholder: rgba(245, 239, 228, 0.5);
    --input-border: #4a3d2a;

    /* Le decimos al navegador que esta página gestiona su propio esquema de
       color: sin esto, algunos navegadores (sobre todo móviles, con el modo
       oscuro del sistema activado) "adivinan" un repintado oscuro de los
       inputs y dejan el fondo oscurecido con el texto oscuro de Bootstrap
       encima, haciéndolos ilegibles. */
    color-scheme: light;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    padding-bottom: 40px;
}

/* Cajas de contenido: siempre fondo claro y letra oscura, de forma fija
   (no cambia con el tema del sistema). */
.card {
    color: var(--text-color);
}

.form-control,
.form-select,
textarea.form-control {
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
}

.form-control::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg-focus);
    color: var(--input-text);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #3a3022;
    color: rgba(245, 239, 228, 0.75);
}

.form-select {
    /* Flecha del <select> en color claro para que se vea sobre el fondo oscuro. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f5efe4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-label {
    color: var(--text-color);
    font-weight: 600;
}

/* Los iconos nativos del navegador dentro de <input type="date/time/...">
   (el calendario, el reloj) se dibujan en gris oscuro por defecto y quedan
   invisibles sobre el fondo oscuro de los inputs. invert(1) los pasa a
   claro; funciona en Chrome/Edge (basados en Chromium), que es donde este
   icono nativo se ve. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.85;
    cursor: pointer;
}

/* Menú de sugerencias del selector "escribe y elige" opositor
   (iniciarSelectorOpositor en app.js). */
.selector-opositor-wrap {
    position: relative;
}

.selector-opositor-resultados {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    margin-top: 4px;
}

.selector-opositor-resultados .list-group-item {
    color: var(--text-color);
    border: none;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.selector-opositor-resultados .list-group-item:last-child {
    border-bottom: none;
}

.selector-opositor-resultados .list-group-item:hover {
    background-color: var(--bg-color);
}

.form-check-label {
    color: var(--text-color);
}

a {
    color: var(--brand-orange-dark);
}

a:hover {
    color: var(--brand-orange);
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* Cuadro de consejos de IA en la página del opositor: un tono neutro
   cálido (no un color de alerta/aviso) con un borde de acento en el
   naranja de marca, para que resalte del resto de tarjetas blancas sin
   parecer una advertencia. */
.aviso-ia {
    background-color: #fdf6ec;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--brand-orange);
}

.navbar.app-navbar {
    background-color: var(--navbar-bg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    border-bottom: 3px solid var(--brand-orange);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .navbar-text {
    color: var(--navbar-text) !important;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link.active {
    color: var(--brand-orange-light) !important;
}

/* El icono de hamburguesa de Bootstrap es oscuro por defecto (pensado para
   navbars claros): sobre el fondo oscuro de este navbar quedaba invisible
   en móvil. Se fuerza el SVG a trazo claro y se aclara el borde del botón,
   en vez de depender de la clase navbar-dark de Bootstrap (que traería
   otros valores por defecto que ya sobreescribimos a mano arriba). */
.app-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}

.app-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.app-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.app-brand-logo {
    height: 34px;
    width: auto;
    margin-right: 8px;
    border-radius: 50%;
}

/* Botones y controles: recolorear el "primary" de Bootstrap (azul por
   defecto en el build de CDN) al naranja de marca. */
.btn-primary {
    --bs-btn-bg: var(--brand-orange);
    --bs-btn-border-color: var(--brand-orange);
    --bs-btn-hover-bg: var(--brand-orange-dark);
    --bs-btn-hover-border-color: var(--brand-orange-dark);
    --bs-btn-active-bg: var(--brand-orange-dark);
    --bs-btn-active-border-color: var(--brand-orange-dark);
    --bs-btn-disabled-bg: var(--brand-orange);
    --bs-btn-disabled-border-color: var(--brand-orange);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-orange-dark);
    --bs-btn-border-color: var(--brand-orange);
    --bs-btn-hover-bg: var(--brand-orange);
    --bs-btn-hover-border-color: var(--brand-orange);
    --bs-btn-active-bg: var(--brand-orange-dark);
    --bs-btn-active-border-color: var(--brand-orange-dark);
}

.btn-danger {
    --bs-btn-bg: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: #b3241a;
    --bs-btn-hover-border-color: #b3241a;
    --bs-btn-active-bg: #b3241a;
    --bs-btn-active-border-color: #b3241a;
}

.text-primary {
    color: var(--brand-orange-dark) !important;
}

.bg-primary {
    background-color: var(--brand-orange) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 0.2rem rgba(201, 122, 34, 0.35);
}

.form-check-input:checked {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.nav-tabs .nav-link.active {
    color: var(--brand-orange-dark);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
}

.btn, .form-control, .form-select {
    min-height: 46px;
}

.btn-sm {
    min-height: 34px;
}

table.table td, table.table th {
    vertical-align: middle;
}

table.table thead th {
    border-bottom: 2px solid var(--brand-orange);
}

/* Miniatura de opositor en tablas. El zoom NO se hace con transform:scale
   sobre la propia miniatura: dentro de .table-responsive (que tiene
   overflow-x:auto) eso recorta la imagen agrandada contra el borde de la
   tabla. En su lugar, al pasar el ratón se muestra una vista previa flotante
   (position: fixed, ver #avatarPreviewFlotante en includes/footer.php y la
   lógica en assets/js/app.js) que no pertenece a ningún contenedor con
   overflow, así que nunca se corta. */
.avatar-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    cursor: zoom-in;
}

.avatar-thumb-placeholder {
    background-color: var(--bg-color);
    color: var(--border-color);
    font-size: 1.1rem;
    cursor: default;
}

.avatar-preview-flotante {
    display: none;
    position: fixed;
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid var(--brand-orange);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5);
    z-index: 3000;
    pointer-events: none;
}

@media (max-width: 1199.98px) {
    .app-navbar .navbar-nav {
        gap: 0.2rem;
    }
}

/* Impresión (botón "Imprimir / PDF"): se oculta todo lo que no es la propia
   tabla/contenido (menú, buscador, botones de acción de cada fila) y se usa
   el diálogo de impresión del navegador — desde ahí, "Guardar como PDF" cubre
   el caso de exportar a PDF sin añadir una librería solo para generarlo. */
@media print {
    .no-imprimir,
    .avatar-preview-flotante {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .card {
        border: none;
        box-shadow: none;
    }

    .table-responsive {
        overflow: visible;
    }
}