/*
  Portería: una PC en una garita, operada de parado y con apuro. Todo grande, alto contraste y
  el resultado inequívoco desde lejos. No se usa MudBlazor como en la Web y la app móvil: esta
  pantalla tiene un solo layout y no justifica sumarle el peso de la librería a la descarga
  inicial de WebAssembly, que en la garita se hace una vez y tiene que andar.
*/

:root {
    --fondo: #0f172a;
    --superficie: #1e293b;
    --superficie-alta: #334155;
    --borde: #475569;
    --texto: #f1f5f9;
    --texto-tenue: #94a3b8;
    --primario: #0d9488;
    --primario-vivo: #14b8a6;
    --valido: #16a34a;
    --rechazado: #dc2626;
    --aviso: #d97706;
    --egreso: #3b82f6;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 16px;
}

.puesto {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.25rem 3rem;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 .25rem;
}

.bajada {
    color: var(--texto-tenue);
    margin: 0 0 1.5rem;
}

/* Barra de estado: el guardia tiene que saber siempre en qué modo trabaja. */
.barra-estado {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .6rem 1.25rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    font-size: .95rem;
}

.punto {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    flex: none;
}

.punto--linea { background: var(--valido); }
.punto--sin { background: var(--aviso); }
.punto--vencida { background: var(--rechazado); }

.barra-estado .pendientes {
    margin-left: auto;
    color: var(--texto-tenue);
}

.barra-estado .pendientes strong { color: var(--texto); }

.panel {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: .75rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

label {
    display: block;
    margin-bottom: .35rem;
    color: var(--texto-tenue);
    font-size: .9rem;
}

input, select {
    width: 100%;
    padding: .7rem .8rem;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: .5rem;
    color: var(--texto);
    font-size: 1rem;
}

input:focus, select:focus {
    outline: 2px solid var(--primario-vivo);
    outline-offset: 1px;
}

/* Panel plegable: el título hace de tapa y muestra lo esencial con el resto guardado. */
summary.panel-titulo {
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 700;
}

/* Etiqueta con checkbox adentro: casilla y texto en la misma línea. */
label.opcion {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 0;
}

label.opcion input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex: none;
}

/* El campo del lector: enorme, porque es donde vive la operación. */
.campo-entrada input {
    font-size: 1.6rem;
    padding: 1rem;
    letter-spacing: .02em;
}

.fila {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.fila > * { flex: 1 1 12rem; }
.fila > .angosto { flex: 0 0 auto; }

button {
    padding: .8rem 1.4rem;
    background: var(--primario);
    color: white;
    border: none;
    border-radius: .5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

button:hover:not(:disabled) { background: var(--primario-vivo); }
button:disabled { opacity: .5; cursor: not-allowed; }

button.secundario {
    background: transparent;
    border: 1px solid var(--borde);
    color: var(--texto);
}

button.peligro { background: var(--rechazado); }

/* Cartel de resultado: se lee de lejos y el color dice todo. */
.resultado {
    border-radius: .75rem;
    padding: 1.5rem;
    margin: 1.25rem 0;
    border-left: .6rem solid;
}

.resultado h2 {
    margin: 0 0 .5rem;
    font-size: 2rem;
    letter-spacing: .03em;
}

.resultado p { margin: 0; font-size: 1.1rem; }

.resultado--valido { background: rgba(22, 163, 74, .15); border-color: var(--valido); }
.resultado--rechazado { background: rgba(220, 38, 38, .15); border-color: var(--rechazado); }
.resultado--aviso { background: rgba(217, 119, 6, .15); border-color: var(--aviso); }
.resultado--egreso { background: rgba(59, 130, 246, .15); border-color: var(--egreso); }

.datos {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.datos div { min-width: 8rem; }
.datos dt { color: var(--texto-tenue); font-size: .85rem; }
.datos dd { margin: .2rem 0 0; font-size: 1.05rem; font-weight: 600; }

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

th, td {
    text-align: left;
    padding: .7rem .6rem;
    border-bottom: 1px solid var(--borde);
}

th { color: var(--texto-tenue); font-size: .85rem; font-weight: 600; }
tbody tr:hover { background: var(--superficie-alta); }

.vacio {
    color: var(--texto-tenue);
    text-align: center;
    padding: 2rem 1rem;
}

.avisos {
    background: rgba(217, 119, 6, .15);
    border: 1px solid var(--aviso);
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.avisos ul { margin: .5rem 0 0; padding-left: 1.2rem; }

.error {
    color: #fca5a5;
    margin-top: .75rem;
}

.tenue { color: var(--texto-tenue); font-size: .9rem; }

.camara { margin-top: 1rem; }

/* El elemento de video se queda montado para que el módulo tenga dónde enganchar el flujo, así
   que apagado se esconde con display:none y no ocupa lugar en la pantalla de operación. */
.camara--apagada { display: none; }

.camara-video {
    width: 100%;
    max-width: 28rem;
    border: 1px solid var(--borde);
    border-radius: .5rem;
    background: #000;
    /* La cámara frontal de una notebook se ve en espejo: invertirla es lo que hace que el guardia
       pueda apuntar el QR mirando la pantalla sin que el movimiento salga al revés. */
    transform: scaleX(-1);
}

#blazor-error-ui {
    background: var(--aviso);
    color: #111;
    bottom: 0;
    display: none;
    left: 0;
    padding: .8rem 1.2rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: .8rem;
}

/* Franja de versión nueva: fija abajo, no tapa la barra de estado ni la operación. */
#actualizacion {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .8rem 1.2rem;
    background: var(--primario);
    color: white;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

#actualizacion[hidden] { display: none; }

#actualizacion button {
    padding: .5rem 1.1rem;
    background: white;
    color: var(--primario);
    font-weight: 700;
}

#actualizacion button:hover:not(:disabled) { background: var(--texto); }