/*
    ══════════════════════════════════════════════════════════════════════════
    USO — registrar uso de vehículos y equipos (.uso-)
    ══════════════════════════════════════════════════════════════════════════

    Las tres pantallas del piloto: la lista de vehículos (/consumo), el inicio
    de un viaje (/consumo/inicio/{código}) y su cierre (/consumo/fin/{id}).

    ── Para quién es ─────────────────────────────────────────────────────────
    Se abre en el teléfono, al pie del carro, muchas veces a pleno sol y por
    alguien que no maneja el teléfono con soltura. De ahí las cuatro reglas que
    gobiernan todo lo de abajo:

      1. Una pregunta por pantalla y un solo botón grande que la contesta.
      2. Nada más pequeño que un dedo: los botones miden 56 px de alto, las
         fichas 46, y ninguna letra baja de 13 px.
      3. El estado se lee sin leer: verde es libre, rojo es ocupado, azul es
         mío. El texto lo confirma, no lo sustituye.
      4. Lo que sale mal se dice en español y en la pantalla, nunca en la consola.

    ── Por qué no es una pantalla de listado ─────────────────────────────────
    El formato de pantalla.css —cabecera institucional, filtros, tabla de alto
    de ventana— está hecho para el escritorio de administración. Aquí la
    unidad es la tarjeta, se desplaza la página entera y no hay tabla. Se
    reutilizan sus variables (paleta, tipografía, radios, sombras) para que se
    lea como la misma plataforma, y nada más.
*/

/* ═══════════════════ La pantalla ═══════════════════ */

/*
    Los márgenes negativos cancelan el relleno lateral de 1.5rem que el
    «article» del MainLayout impone (px-4 lleva !important) y el relleno propio
    devuelve 14 px: en un teléfono de 360 px, esos 20 px por lado son la
    diferencia entre una cifra de seis dígitos que cabe y una que se parte.
*/
.uso-pantalla {
    font-family: var(--pan-sans);
    color: var(--pan-tinta);
    margin: -2px -1.5rem 0;
    padding: 12px 14px calc(36px + env(safe-area-inset-bottom, 0px));
    min-height: calc(100vh - 62px);
    -webkit-tap-highlight-color: transparent;
}

.uso-contenido {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* En escritorio hay sitio para respirar. */
@media (min-width: 1024px) {
    .uso-pantalla { padding: 18px 24px 48px; }
    .uso-contenido { gap: 18px; }
}

/* ═══════════════════ Cabecera ═══════════════════ */

.uso-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.uso-sobre {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

.uso-titulo {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.uso-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--pan-apagado);
}

/* Botón de icono redondo: volver, actualizar. */
.uso-icono-boton {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--pan-linea);
    background: var(--pan-papel);
    color: var(--pan-tinta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--pan-sombra-tarjeta);
    transition: background .15s, transform .1s;
}

.uso-icono-boton:hover { background: #f1f5f9; }
.uso-icono-boton:active { transform: scale(.94); }
.uso-icono-boton:disabled { opacity: .55; cursor: default; }
.uso-icono-boton .material-symbols-outlined { font-size: 24px; }

@keyframes uso-gira { to { transform: rotate(360deg); } }
.uso-gira { animation: uso-gira 1s linear infinite; }

/* ═══════════════════ Avisos ═══════════════════ */

/*
    Un aviso es una franja con borde izquierdo de color. Los cuatro tonos
    significan lo de siempre: rojo, algo impide seguir; ámbar, se puede seguir
    pero conviene mirar; verde, salió bien; neutro, una ayuda.
*/
.uso-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--pan-linea);
    border-left: 5px solid var(--pan-tenue);
    background: var(--pan-papel);
    font-size: 15px;
    line-height: 1.4;
}

.uso-aviso .material-symbols-outlined { font-size: 22px; flex: none; margin-top: 1px; }
.uso-aviso p { margin: 0; }
.uso-aviso-error { border-left-color: var(--pan-rojo); background: #fff6f4; color: #8a1f0d; }
.uso-aviso-alerta { border-left-color: var(--pan-ambar); background: #fff9f2; color: #7a3a0f; }
.uso-aviso-ok { border-left-color: var(--pan-verde); background: #f2fbf6; color: #135c3c; }
.uso-aviso-neutro { border-left-color: var(--pan-azul); background: #f3f8fd; color: var(--pan-tinta); }

/* El aviso de carga fallida lleva su botón debajo del texto en el teléfono. */
.uso-error {
    flex-wrap: wrap;
}

.uso-error > div { flex: 1 1 200px; }
.uso-error .uso-boton { flex: 1 1 100%; }

@media (min-width: 640px) {
    .uso-error .uso-boton { flex: 0 0 auto; min-width: 160px; }
}

/* Pastilla discreta cuando el sondeo falla pero la lista de antes sigue ahí. */
.uso-sin-red {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff3e6;
    color: #7a3a0f;
    font-size: 12.5px;
    font-weight: 600;
}

.uso-sin-red .material-symbols-outlined { font-size: 16px; }

/* ═══════════════════ Botones ═══════════════════ */

/*
    56 px de alto y letra de 16 px en negrita: es lo que se acierta con el
    pulgar sin mirar dos veces. El icono va delante para que el botón se
    reconozca antes de leerlo.
*/
.uso-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    font-family: var(--pan-sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 2px 0 rgba(12, 39, 64, .06), 0 10px 22px -14px rgba(12, 39, 64, .45);
}

.uso-boton .material-symbols-outlined { font-size: 24px; }
.uso-boton:hover { filter: brightness(1.06); }
.uso-boton:active { transform: scale(.985); }
.uso-boton:focus-visible { outline: 3px solid rgba(24, 95, 165, .45); outline-offset: 2px; }
.uso-boton:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

.uso-boton-primario { background: var(--pan-tinta); color: #fff; }
.uso-boton-verde { background: var(--pan-verde); color: #fff; }
.uso-boton-rojo { background: var(--pan-rojo); color: #fff; }
.uso-boton-ambar { background: var(--pan-ambar); color: #fff; }

.uso-boton-secundario {
    background: var(--pan-papel);
    color: var(--pan-tinta);
    border: 1.5px solid #c9d4df;
    box-shadow: none;
}

.uso-boton-secundario:hover { background: #f1f5f9; filter: none; }

/* Un botón más bajo, para acciones de segundo orden dentro de una tarjeta. */
.uso-boton-chico {
    min-height: 44px;
    font-size: 13.5px;
    border-radius: 11px;
}

.uso-boton-corto { width: auto; }

/* Enlace con aspecto de texto: para lo que casi nunca hace falta. */
.uso-enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--pan-azul);
    font-family: var(--pan-sans);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.uso-enlace:hover { text-decoration: underline; }
.uso-enlace .material-symbols-outlined { font-size: 20px; }
.uso-enlace-rojo { color: var(--pan-rojo); }
.uso-enlace-tenue { color: var(--pan-apagado); }

/* Botones en fila: se reparten el ancho y, si no caben, se apilan. */
.uso-botonera {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.uso-botonera > .uso-boton { flex: 1 1 180px; }

/*
    La acción principal de un formulario se queda pegada al pie de la pantalla
    en el teléfono: mientras el piloto escribe la lectura, el botón no se va.
    El degradado tapa lo que pasa por debajo sin poner una línea dura.
*/
.uso-accion-fija {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 4px -14px 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--pan-fondo) 72%, rgba(246, 248, 251, 0));
}

@media (min-width: 1024px) {
    .uso-accion-fija { position: static; margin: 0; padding: 0; background: none; }
}

/* ═══════════════════ Pestañas de tipo ═══════════════════ */

/*
    Van en una fila que se desplaza de lado si no cabe, en vez de partirse en
    dos líneas: tres pestañas de dos palabras en un teléfono estrecho se
    convertían en un bloque de cinco líneas del que no se sabía qué estaba
    elegido.
*/
.uso-tipos {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    margin: 0 -2px;
    scrollbar-width: none;
}

.uso-tipos::-webkit-scrollbar { display: none; }

.uso-tipo {
    flex: none;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1.5px solid #c9d4df;
    background: var(--pan-papel);
    color: var(--pan-apagado);
    font-family: var(--pan-sans);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.uso-tipo:hover { border-color: var(--pan-tinta); color: var(--pan-tinta); }
.uso-tipo.activo { background: var(--pan-tinta); border-color: var(--pan-tinta); color: #fff; }

/* ═══════════════════ Tarjetas ═══════════════════ */

.uso-tarjetas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .uso-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1100px) {
    .uso-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

.uso-tarjeta {
    display: flex;
    flex-direction: column;
    background: var(--pan-papel);
    border: 1px solid var(--pan-linea);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--pan-sombra-tarjeta);
    transition: box-shadow .2s, transform .2s;
}

@media (hover: hover) {
    .uso-tarjeta:hover { box-shadow: var(--pan-sombra); transform: translateY(-2px); }
}

/*
    La foto ocupa un rectángulo fijo de 16:10 y se recorta: sin el aspecto
    fijo, cada tarjeta medía lo que midiera su foto y la lista bailaba mientras
    cargaban. Un color de fondo debajo para que, mientras llega, no sea un
    hueco blanco.
*/
.uso-foto {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #e9eef3;
    overflow: hidden;
}

.uso-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uso-sin-foto {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8c5d1;
}

.uso-sin-foto .material-symbols-outlined { font-size: 64px; }

/* Una banda de color en el canto superior con el color del tipo de equipo. */
.uso-tarjeta::before {
    content: "";
    display: block;
    height: 4px;
    background: var(--uso-acento, var(--pan-azul));
}

.uso-tarjeta-cuerpo {
    padding: 12px 16px 10px;
}

.uso-tipo-rotulo {
    margin: 0 0 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

.uso-nombre {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.uso-placa {
    margin: 3px 0 0;
    font-family: var(--pan-mono);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--pan-apagado);
}

.uso-placa small {
    font-family: var(--pan-sans);
    font-weight: 400;
    letter-spacing: 0;
    font-size: 12.5px;
    color: var(--pan-tenue);
}

/* ── El estado ── */

/*
    La banda de estado es lo que se ve desde lejos. Fondo tintado de borde a
    borde, rótulo grande, y debajo lo único que hace falta saber: la lectura si
    está libre, quién lo tiene si está ocupado.
*/
.uso-estado {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(12, 39, 64, .05);
}

.uso-estado-libre { background: #edf8f2; }
.uso-estado-ocupado { background: #fdf0ed; }
.uso-estado-mio { background: #ecf3fb; }

.uso-estado-rotulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.1;
}

.uso-estado-rotulo .material-symbols-outlined { font-size: 26px; font-variation-settings: 'FILL' 1; }
.uso-estado-libre .uso-estado-rotulo { color: var(--pan-verde); }
.uso-estado-ocupado .uso-estado-rotulo { color: var(--pan-rojo); }
.uso-estado-mio .uso-estado-rotulo { color: var(--pan-azul); }

.uso-lectura-rotulo {
    margin: 4px 0 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pan-apagado);
}

/*
    La cifra del odómetro en la fuente mono: seis dígitos alineados leen como
    un tablero, y dos tarjetas juntas se comparan de un vistazo.
*/
.uso-lectura {
    margin: 0 0 6px;
    font-family: var(--pan-mono);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--pan-tinta);
}

.uso-lectura span {
    font-family: var(--pan-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--pan-apagado);
    margin-left: 4px;
}

.uso-quien {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.4;
}

.uso-quien b { font-weight: 700; }
.uso-tenue { color: var(--pan-apagado); }

.uso-ruta-chica {
    margin: 0;
    font-size: 13.5px;
    color: var(--pan-apagado);
    line-height: 1.4;
}

.uso-nota {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--pan-apagado);
    line-height: 1.4;
}

/* Lo que va al pie de la tarjeta: el vale. Sólo aparece cuando hay algo. */
.uso-pie {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--pan-linea);
}

.uso-pie:empty { display: none; }

/* ═══════════════════ El viaje en curso ═══════════════════ */

/*
    Cuando el piloto tiene un viaje abierto, ESTO es la pantalla. Todo lo demás
    se esconde detrás de un enlace, porque no puede sacar otro vehículo hasta
    cerrar éste, y lo único que tiene que encontrar es el botón de finalizar.
*/
.uso-viaje {
    display: flex;
    flex-direction: column;
    background: var(--pan-papel);
    border: 1px solid var(--pan-linea);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--pan-sombra);
}

.uso-viaje .uso-foto { aspect-ratio: 16 / 9; }

.uso-viaje-cuerpo {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 900px) {
    .uso-viaje { flex-direction: row; }
    .uso-viaje .uso-foto { flex: 0 0 42%; aspect-ratio: auto; min-height: 320px; }
    .uso-viaje-cuerpo { flex: 1 1 auto; padding: 22px 26px 24px; }
}

.uso-verde { color: var(--pan-verde); }

/* El punto que late: dice «esto está corriendo» sin un reloj de segundos. */
.uso-punto {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pan-verde);
    margin-right: 6px;
    vertical-align: 1px;
    animation: uso-late 1.6s ease-in-out infinite;
}

@keyframes uso-late {
    0%, 100% { box-shadow: 0 0 0 0 rgba(28, 138, 90, .45); }
    60% { box-shadow: 0 0 0 7px rgba(28, 138, 90, 0); }
}

.uso-nombre-grande {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
}

/* Tres datos en fila: salida, tiempo, lectura. */
.uso-datos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.uso-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--pan-fondo);
    border: 1px solid var(--pan-linea);
    min-width: 0;
}

.uso-dato-rotulo {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pan-tenue);
}

.uso-dato-valor {
    font-family: var(--pan-mono);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uso-dato-valor small {
    font-family: var(--pan-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--pan-apagado);
}

.uso-dato-pie {
    font-size: 12px;
    color: var(--pan-apagado);
}

@media (max-width: 380px) {
    .uso-datos { grid-template-columns: 1fr 1fr; }
    .uso-datos .uso-dato:last-child { grid-column: 1 / -1; }
}

.uso-ruta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 600;
}

.uso-ruta .material-symbols-outlined { font-size: 20px; color: var(--pan-tenue); }

.uso-detalle {
    margin: 0;
    font-size: 15px;
    color: var(--pan-apagado);
    line-height: 1.45;
}

.uso-viaje .uso-boton-primario { margin-top: 6px; }

/* Panel de confirmación en el sitio: sustituye al botón que lo abrió. */
.uso-confirmar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: #fff9f2;
    border: 1px solid #f1d9bd;
}

.uso-confirmar p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.45;
}

.uso-confirmar b { font-weight: 700; }

/* ═══════════════════ Formularios: inicio y cierre ═══════════════════ */

/*
    Un formulario es una columna de pasos. Cada paso lleva su número en un
    círculo y la pregunta en grande; lo que hay que tocar va debajo, y lo que
    hay que leer, a un lado. Nunca más de tres pasos.
*/
.uso-ficha {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--pan-papel);
    border: 1px solid var(--pan-linea);
    border-radius: 16px;
    box-shadow: var(--pan-sombra-tarjeta);
}

.uso-ficha .uso-foto {
    flex: none;
    width: 96px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

.uso-ficha-texto { min-width: 0; flex: 1 1 auto; }
.uso-ficha-texto .uso-nombre { font-size: 17px; }

.uso-paso {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--pan-papel);
    border: 1px solid var(--pan-linea);
    border-radius: 16px;
    box-shadow: var(--pan-sombra-tarjeta);
}

@media (min-width: 1024px) {
    .uso-paso { padding: 20px 22px; }
}

.uso-paso-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
}

.uso-paso-numero {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pan-tinta);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
}

.uso-paso-hecho .uso-paso-numero { background: var(--pan-verde); }
.uso-paso-numero .material-symbols-outlined { font-size: 20px; }

.uso-pregunta {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}

.uso-ayuda {
    margin: 0;
    font-size: 14px;
    color: var(--pan-apagado);
    line-height: 1.45;
}

/* ── Fichas (chips) ── */

/*
    Las opciones frecuentes son botones redondos grandes: un toque y listo. La
    elegida se pinta en navy; las demás, blancas con borde. Se envuelven en
    varias líneas porque el nombre de un destino puede ser largo, y truncarlo
    dejaría dos «Subestación…» indistinguibles.
*/
.uso-fichas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.uso-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid #c9d4df;
    background: var(--pan-papel);
    color: var(--pan-tinta);
    font-family: var(--pan-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    max-width: 100%;
}

.uso-chip:hover { border-color: var(--pan-tinta); }
.uso-chip:active { transform: scale(.97); }
.uso-chip.activo { background: var(--pan-tinta); border-color: var(--pan-tinta); color: #fff; }
.uso-chip .material-symbols-outlined { font-size: 20px; }
.uso-chip-veces {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pan-tenue);
    margin-left: 2px;
}
.uso-chip.activo .uso-chip-veces { color: rgba(255, 255, 255, .7); }

/* La ficha «otro» se distingue con línea discontinua: abre algo, no elige. */
.uso-chip-otro { border-style: dashed; color: var(--pan-azul); }

/* ── Campos ── */

.uso-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.uso-campo label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pan-apagado);
}

.uso-input {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1.5px solid #c9d4df;
    background: var(--pan-papel);
    color: var(--pan-tinta);
    font-family: var(--pan-sans);
    font-size: 17px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.uso-input::placeholder { color: #a5b3c0; }
.uso-input:focus { border-color: var(--pan-azul); box-shadow: 0 0 0 4px rgba(24, 95, 165, .14); }

textarea.uso-input {
    min-height: 88px;
    padding: 12px 16px;
    resize: vertical;
    line-height: 1.4;
}

/* Un campo con botón al lado: buscar, agregar. */
.uso-campo-fila {
    display: flex;
    gap: 8px;
}

.uso-campo-fila .uso-input { flex: 1 1 auto; min-width: 0; }
.uso-campo-fila .uso-boton { width: auto; flex: none; min-height: 52px; padding: 0 16px; }

/* Resultados de la búsqueda de lugares: una lista de botones anchos. */
.uso-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.uso-lista-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1.5px solid var(--pan-linea);
    background: var(--pan-papel);
    color: var(--pan-tinta);
    font-family: var(--pan-sans);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.uso-lista-item:hover { border-color: var(--pan-tinta); background: #f7fafc; }
.uso-lista-item.activo { border-color: var(--pan-tinta); background: var(--pan-tinta); color: #fff; }

/* ── El número grande ── */

/*
    La lectura del tablero se escribe en un campo del tamaño del tablero: 34
    px en mono, centrado, con la unidad a un lado. inputmode=numeric abre el
    teclado de números en el teléfono, que es la mitad del trabajo.
*/
.uso-numero-caja {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    min-height: 76px;
    border-radius: 16px;
    border: 2px solid #c9d4df;
    background: var(--pan-papel);
    transition: border-color .15s, box-shadow .15s;
}

.uso-numero-caja:focus-within { border-color: var(--pan-azul); box-shadow: 0 0 0 4px rgba(24, 95, 165, .14); }
.uso-numero-caja.uso-numero-mal { border-color: var(--pan-rojo); }
.uso-numero-caja.uso-numero-bien { border-color: var(--pan-verde); }

.uso-numero {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0;
    outline: none;
    background: none;
    font-family: var(--pan-mono);
    font-size: 34px;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    color: var(--pan-tinta);
    font-variant-numeric: tabular-nums;
}

.uso-numero::placeholder { color: #c3cdd6; }

/* Sin las flechitas del navegador: en el teléfono no sirven y en escritorio estorban. */
.uso-numero::-webkit-outer-spin-button,
.uso-numero::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.uso-numero[type=number] { -moz-appearance: textfield; }

.uso-numero-unidad {
    flex: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--pan-apagado);
}

/* La lectura de referencia (la de salida, o la última conocida). */
.uso-referencia {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--pan-fondo);
    border: 1px solid var(--pan-linea);
}

.uso-referencia-rotulo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pan-apagado);
}

.uso-referencia-valor {
    font-family: var(--pan-mono);
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.uso-referencia-valor small {
    font-family: var(--pan-sans);
    font-size: 13px;
    color: var(--pan-apagado);
}

/* La cifra grande de la lectura conocida en la pantalla de inicio. */
.uso-lectura-grande {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-family: var(--pan-mono);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.uso-lectura-grande small {
    font-family: var(--pan-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--pan-apagado);
}

/* Resumen antes de confirmar: dos columnas rótulo/valor. */
.uso-resumen {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 15px;
}

.uso-resumen dt { color: var(--pan-apagado); font-weight: 600; }
.uso-resumen dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* ═══════════════════ Esqueleto y entrada ═══════════════════ */

.uso-esqueleto {
    height: 380px;
    border-radius: 18px;
    background: linear-gradient(90deg, #e9eef3 25%, #f3f6f9 37%, #e9eef3 63%);
    background-size: 400% 100%;
    animation: uso-brilla 1.4s ease infinite;
}

@keyframes uso-brilla {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@keyframes uso-aparece {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.uso-aparece { animation: uso-aparece .35s ease backwards; }

@media (prefers-reduced-motion: reduce) {
    .uso-aparece, .uso-esqueleto, .uso-punto, .uso-gira { animation: none; }
    .uso-tarjeta, .uso-boton, .uso-chip { transition: none; }
}

/* Al imprimir, nada de esto tiene sentido. */
@media print {
    .uso-pantalla { display: none; }
}