/* ═══════════════════════════════════════════════════════════════════════════
   JugadaFácil — estilos propios

   Reemplaza al site.css anterior, que eran 428 líneas de correcciones a fuerza
   de !important peleando contra MudBlazor, con dos bloques seguidos arreglando
   el mismo padding.

   Acá el criterio es otro: los colores y tamaños viven en el tema
   (JugadaFacilTheme.cs) y este archivo sólo consume las variables que MudBlazor
   publica a partir de él. Cuando el CSS deja de contradecir al tema, los
   !important dejan de hacer falta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografía ──────────────────────────────────────────────────────────── */

/* Se usa la tipografía del sistema, a propósito.

   Antes el CSS declaraba Roboto y nunca la cargaba, así que cada dispositivo
   mostraba la suya sin que nadie lo hubiera decidido. Se podría traer una fuente
   propia, pero para esta aplicación no conviene: son 100 KB más en cada visita,
   una PWA tiene que abrir sin conexión, y la fuente del sistema es la que el
   fabricante ya afinó para leerse bien en esa pantalla. En una aplicación que
   usan personas mayores, eso pesa más que tener una tipografía distintiva.

   system-ui resuelve a Segoe UI en Windows, Roboto en Android y SF Pro en iOS. */

html {
    /* Respeta el tamaño de letra que la persona configuró en su teléfono. */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
}

/* ── Estructura ──────────────────────────────────────────────────────────── */

.page-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 48px;
}

/* ── Accesibilidad ───────────────────────────────────────────────────────── */

/* Objetivo táctil mínimo de 44px. Antes sólo dos controles de toda la
   aplicación llegaban a ese tamaño, con 77 botones en tamaño "Small". */
.mud-button-root,
.mud-icon-button {
    min-height: 44px;
    min-width: 44px;
}

.mud-nav-link {
    min-height: 48px;
    padding: 12px 16px;
}

/* Foco siempre visible: hay gente que navega con teclado, y el indicador por
   defecto se pierde sobre fondo claro. */
:focus-visible {
    outline: 3px solid var(--mud-palette-secondary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Quien pidió menos movimiento en su sistema, no lo recibe. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Texto sólo para lectores de pantalla. */
.jf-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Tarjetas ────────────────────────────────────────────────────────────── */

.mud-card {
    border: 1px solid var(--mud-palette-lines-default);
}

/* El realce al pasar el mouse queda sólo para lo que de verdad se puede tocar.
   Antes se aplicaba a todas las tarjetas, incluidas las que no llevan a ningún
   lado: prometía una interacción que no existía. */
.jf-clickable {
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

.jf-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 42, 74, .12);
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */

.jf-table thead th {
    background-color: var(--mud-palette-background-gray);
    font-weight: 600;
}

/* Las tablas anchas se desplazan dentro de su caja; la página nunca se
   desplaza en horizontal. */
.jf-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Estados de una solicitud ────────────────────────────────────────────── */

/* Cada estado lleva color Y texto. Distinguir sólo por color deja afuera a
   quien no diferencia rojo de verde, que es cerca del 8% de los varones. */
.jf-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    border: 1px solid currentColor;
}

.jf-estado--enviada    { color: #7A5B12; background: #FDF4DE; }
.jf-estado--confirmada { color: #1D5E3F; background: #E4F2EA; }
.jf-estado--proceso    { color: #1B2A4A; background: #E8ECF5; }
.jf-estado--finalizada { color: #1D5E3F; background: #E4F2EA; }
.jf-estado--cancelada  { color: #8E1F18; background: #FBE9E7; }
.jf-estado--rechazada  { color: #8E1F18; background: #FBE9E7; }

/* ── Bolillas de Quini 6 ─────────────────────────────────────────────────── */

.jf-bolilla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(145deg, var(--mud-palette-secondary), #A94728);
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .15);
}

/* ── Pie legal ───────────────────────────────────────────────────────────── */

.jf-pie {
    margin-top: 56px;
    padding: 32px 16px 40px;
    background: var(--mud-palette-background-gray);
    border-top: 2px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
    line-height: 1.6;
}

.jf-pie__contenido {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: 28px;
}

@media (min-width: 900px) {
    .jf-pie__contenido {
        grid-template-columns: 1fr 1fr;
    }

    .jf-pie__cierre {
        grid-column: 1 / -1;
    }
}

.jf-pie__edad {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
}

.jf-pie__edad-sello {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--mud-palette-error);
    color: #fff;
    font-weight: 800;
    letter-spacing: .5px;
}

.jf-pie__salud {
    margin: 10px 0 0;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.jf-pie__ayuda {
    margin: 10px 0 0;
}

.jf-pie__ayuda a,
.jf-pie__enlaces a {
    color: var(--mud-palette-secondary);
    font-weight: 600;
}

.jf-pie__canales-titulo {
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .04em;
}

.jf-pie__canales-lista {
    margin: 0;
    padding-left: 18px;
}

.jf-pie__cierre {
    padding-top: 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.jf-pie__aclaracion {
    margin: 0 0 12px;
    max-width: 70ch;
}

.jf-pie__agencia {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.jf-pie__enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* ── Aviso de reconexión ─────────────────────────────────────────────────── */

.jf-reconnect-banner {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 3000;
    padding: 12px 16px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    background: var(--mud-palette-warning);
}

.jf-reconnect-banner--error {
    background: var(--mud-palette-error);
}

/* ── Pantallas de acceso ─────────────────────────────────────────────────── */

/* El panel de ingreso era un degradado verde a pantalla completa con los campos
   forzados a blanco por encima, más un selector morado. Se veía a intentos
   superpuestos. Acá el panel es una tarjeta sobre el fondo de papel: los campos
   se comportan como en el resto de la aplicación y no hay que pelearlos. */

.jf-acceso {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    padding: 24px 16px;
    background:
        radial-gradient(circle at 50% 0%, rgba(27, 42, 74, .06), transparent 60%),
        var(--mud-palette-background);
}

/* El centrado vertical se hace con margin:auto y no con align-items:center.
   Con align-items, un formulario más alto que la pantalla —el de registro, que
   tiene once campos— queda cortado por arriba y no hay forma de subir hasta el
   primer campo. Con margin:auto se centra si entra y se apoya arriba si no. */
.jf-acceso__panel {
    width: 100%;
    max-width: 460px;
    margin: auto;
}

.login-paper {
    padding: 28px 24px 32px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

.jf-acceso__marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.jf-acceso__logo {
    width: 72px;
    height: 72px;
}

.jf-acceso__nombre {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    letter-spacing: -.01em;
}

.jf-acceso__bajada {
    font-size: .9rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* Aviso de edad en las pantallas de acceso: es lo primero que tiene que ver
   alguien que llega por primera vez. */
.jf-acceso__edad {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
}

.jf-acceso__edad strong {
    color: var(--mud-palette-text-primary);
}

/* El selector Usuario / SubAgente: los dos botones reparten el ancho por igual.
   Antes llevaba d-flex sobre el grupo y quedaba un hueco vacío a la izquierda. */
.jf-selector-rol {
    width: 100%;
}

.jf-selector-rol .mud-toggle-item {
    flex: 1 1 0;
    justify-content: center;
}