/* ============================================================================
   Campos de formulario del portal
   ----------------------------------------------------------------------------
   EL INTERIOR DE UN CAMPO VA BLANCO, NO DEL GRIS DE LA SUPERFICIE (decisión de
   Randolf, 2026-07-27: "esos campos deben ser blancos, por dentro, porque si no
   todo queda monocromático").

   El tema compila Bootstrap con `.form-control { background: var(--bs-tertiary-bg) }`
   —un gris—, así que sobre una tarjeta clara el campo y su fondo se funden y el
   formulario se lee como un solo bloque plano: no se ve DÓNDE se escribe.

   Gemelo del bloque 14 de `controls.css` del WebApp. El portal no tiene esa hoja
   (no comparte los controles del módulo de trabajo), así que la regla vive aquí
   sola. Al tocar una, tocar la otra.

   En OSCURO se conserva el tono del tema: allí el cuerpo ya es oscuro y un campo
   del mismo color perdería la separación que en claro gana.
   ==========================================================================*/

.form-control,
.form-select {
    background-color: var(--bs-body-bg);
    /* El borde sube con el interior: con el campo blanco sobre tarjeta blanca es
       lo único que lo dibuja, y el del tema (1.21:1) desaparece. 20 % → 1.44:1. */
    border-color: color-mix(in srgb, var(--bs-body-color) 20%, transparent);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--bs-secondary-bg);
}

/* Un mensaje de validación es ROJO SIEMPRE, sin depender de que quien escriba el
   campo se acuerde de ponerle `text-danger`: `app.css` lo declaraba pero esa hoja
   está comentada en `App.razor` desde la plantilla. Tono `*-text-emphasis` porque
   el rojo puro da 2.9:1 sobre blanco y esto es texto pequeño (exige 4.5:1).
   Gemelo del bloque de `controls.css` del WebApp. */
.validation-message,
.field-validation-error {
    color: color-mix(in srgb, var(--bs-danger) 75%, #000);
    font-size: 0.8125rem;
}

[data-bs-theme="dark"] .validation-message,
[data-bs-theme="dark"] .field-validation-error {
    color: color-mix(in srgb, var(--bs-danger) 85%, #fff);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--bs-tertiary-bg);
}

/* ============================================================================
   18. PÁGINAS DE ESTADO — `status-page`
   ----------------------------------------------------------------------------
   Lo que se muestra cuando algo ya salió mal: un 500 (/Error) o un 404
   (/not-found). Las dos aparecen en el peor momento del usuario, así que se
   leen de un vistazo y SIEMPRE ofrecen una salida — las de la plantilla eran
   texto suelto en inglés y sin ningún enlace de vuelta.
   ==========================================================================*/

.status-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Centrado en el alto disponible sin llegar a ser una pantalla completa:
       el shell (topbar y menú) sigue visible y navegable, que es parte de la
       salida. */
    justify-content: center;
    min-block-size: 55vh;
    padding: 2rem 1.5rem;
    gap: .35rem;
}

.status-page__icon {
    font-size: 2.5rem;
    margin-bottom: .5rem;
    color: color-mix(in srgb, var(--bs-body-color) 45%, transparent);
}

.status-page__icon--danger { color: var(--bs-danger); }

.status-page__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.status-page__body {
    margin: 0 0 1.25rem;
    max-inline-size: 32rem;
    /* 85 % del color del cuerpo: el token secundario del tema cae por debajo de
       4.5:1 en oscuro. */
    color: color-mix(in srgb, var(--bs-body-color) 85%, transparent);
}

/* El identificador de la petición: útil para soporte, secundario para el ojo. */
.status-page__reference {
    margin: 0 0 1.25rem;
    font-size: .82rem;
    color: color-mix(in srgb, var(--bs-body-color) 85%, transparent);
}

    .status-page__reference code {
        display: inline-block;
        margin-inline-start: .35rem;
        padding: .15rem .45rem;
        border-radius: 6px;
        background: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
        /* Un identificador se copia a mano o se lee por teléfono: que no baile. */
        font-variant-numeric: tabular-nums;
        word-break: break-all;
    }