/* =========================================================
   CONTROL DE ENTRADAS
   Hoja de estilos principal
   Diseño MOBILE-FIRST
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --color-fondo: #f4f6f8;
    --color-superficie: #ffffff;
    --color-texto: #1f2937;
    --color-texto-secundario: #6b7280;
    --color-borde: #e5e7eb;

    --color-principal: #2563eb;
    --color-principal-hover: #1d4ed8;

    --color-verde: #16a34a;
    --color-verde-fondo: #dcfce7;

    --color-rojo: #dc2626;
    --color-rojo-fondo: #fee2e2;

    --color-amarillo: #d97706;
    --color-amarillo-fondo: #fef3c7;

    --radio: 16px;

    --sombra:
        0 4px 14px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}


body {
    min-height: 100vh;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--color-fondo);
    color: var(--color-texto);

    line-height: 1.5;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.encabezado {
    position: sticky;
    top: 0;
    z-index: 100;

    height: 64px;

    display: flex;
    align-items: center;

    padding: 0 16px;

    background: var(--color-superficie);

    border-bottom: 1px solid var(--color-borde);

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04);
}


.titulo-app {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}


.titulo-app h1 {
    font-size: 1.05rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.2px;
}


.icono-entrada {
    font-size: 1.25rem;
}


/* =========================================================
   BOTÓN USUARIO
   ========================================================= */

.btn-usuario {
    position: absolute;
    left: 12px;

    width: 44px;
    height: 44px;

    border: none;
    border-radius: 50%;

    background: #f1f5f9;

    font-size: 1.25rem;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        background 0.2s ease,
        transform 0.1s ease;
}


.btn-usuario:hover {
    background: #e2e8f0;
}


.btn-usuario:active {
    transform: scale(0.94);
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.contenido {
    width: 100%;
    max-width: 600px;

    margin: 0 auto;

    padding: 20px 16px 40px;
}


/* =========================================================
   FECHA
   ========================================================= */

.seccion-fecha {
    text-align: center;

    margin-bottom: 20px;
}


.etiqueta {
    font-size: 0.72rem;
    font-weight: 700;

    color: var(--color-texto-secundario);

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


.seccion-fecha h2 {
    margin-top: 3px;

    font-size: 1.35rem;
    font-weight: 700;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.tarjeta {
    background: var(--color-superficie);

    border: 1px solid var(--color-borde);

    border-radius: var(--radio);

    padding: 20px;

    margin-bottom: 18px;

    box-shadow: var(--sombra);
}


/* =========================================================
   ESTADO DEL DÍA
   ========================================================= */

.estado-encabezado {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}


.indicador {
    width: 12px;
    height: 12px;

    border-radius: 50%;

    flex-shrink: 0;
}


.indicador.verde {
    background: var(--color-verde);

    box-shadow:
        0 0 0 5px var(--color-verde-fondo);
}


.indicador.rojo {
    background: var(--color-rojo);

    box-shadow:
        0 0 0 5px var(--color-rojo-fondo);
}


.estado-encabezado h3 {
    font-size: 1.05rem;
    font-weight: 700;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

.seccion-formulario {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.seccion-formulario label,
.campo-precio label {
    font-size: 0.88rem;
    font-weight: 600;

    color: var(--color-texto-secundario);
}


input {
    width: 100%;

    height: 52px;

    padding: 0 14px;

    border: 1px solid #d1d5db;
    border-radius: 12px;

    background: #ffffff;

    color: var(--color-texto);

    font-size: 1.1rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


input:focus {
    border-color: var(--color-principal);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* Quitar flechas de inputs numéricos */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
}


/* =========================================================
   BOTONES
   ========================================================= */

button {
    font-family: inherit;
}


.btn-principal,
.btn-cerrar,
.btn-secundario {
    min-height: 50px;

    border: none;

    border-radius: 12px;

    font-size: 0.92rem;
    font-weight: 700;

    letter-spacing: 0.2px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.1s ease;
}


.btn-principal {
    width: 100%;

    margin-top: 6px;

    background: var(--color-principal);

    color: white;
}


.btn-principal:hover {
    background: var(--color-principal-hover);
}


.btn-principal:active,
.btn-cerrar:active,
.btn-secundario:active {
    transform: scale(0.98);
}


/* =========================================================
   BOTÓN CERRAR DÍA
   ========================================================= */

.btn-cerrar {
    width: 100%;

    margin-top: 12px;

    background: var(--color-rojo);

    color: white;
}


.btn-cerrar:hover {
    background: #b91c1c;
}


/* =========================================================
   DATOS
   ========================================================= */

.dato {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}


.dato span,
.dato label {
    font-size: 0.88rem;

    color: var(--color-texto-secundario);
}


.dato strong {
    font-size: 1.15rem;

    font-weight: 700;
}


/* =========================================================
   CIERRE
   ========================================================= */

.tarjeta-titulo {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 20px;
}


.tarjeta-titulo h3 {
    font-size: 1.05rem;
}


.resumen-numeracion {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;
}


.resumen-numeracion .dato {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 5px;
}


.resumen-numeracion input {
    height: 48px;

    font-size: 1.15rem;

    font-weight: 600;
}


.flecha {
    font-size: 1.4rem;

    color: var(--color-texto-secundario);

    padding-top: 20px;
}


/* =========================================================
   RESULTADOS
   ========================================================= */

.resultado {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px;

    margin-bottom: 12px;

    border-radius: 12px;

    background: #f8fafc;
}


.resultado span {
    font-size: 0.9rem;

    color: var(--color-texto-secundario);
}


.resultado strong {
    font-size: 1.35rem;

    font-weight: 800;
}


.resultado.total {
    background: var(--color-verde-fondo);
}


.resultado.total strong {
    color: var(--color-verde);
}


/* =========================================================
   PRECIO
   ========================================================= */

.campo-precio {
    margin-bottom: 12px;
}


.campo-precio label {
    display: block;

    margin-bottom: 7px;
}


.precio-input {
    display: flex;
    align-items: center;

    height: 52px;

    border: 1px solid #d1d5db;

    border-radius: 12px;

    background: white;

    overflow: hidden;
}


.precio-input span {
    padding-left: 14px;

    font-weight: 700;

    color: var(--color-texto-secundario);
}


.precio-input input {
    height: 50px;

    border: none;

    box-shadow: none;

    padding-left: 8px;
}


.precio-input input:focus {
    box-shadow: none;
}


/* =========================================================
   HISTORIAL
   ========================================================= */

.historial {
    margin-top: 24px;
}


.historial-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}


.historial-titulo h3 {
    font-size: 1.05rem;
}


.btn-secundario {
    min-height: 38px;

    padding: 0 14px;

    background: #e2e8f0;

    color: var(--color-texto);

    font-size: 0.78rem;
}


.btn-secundario:hover {
    background: #cbd5e1;
}


/* =========================================================
   LISTA HISTORIAL
   ========================================================= */

.lista-historial {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.sin-registros {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 120px;

    padding: 20px;

    border: 1px dashed #cbd5e1;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.6);

    text-align: center;
}


.sin-registros span {
    font-size: 1.8rem;

    margin-bottom: 6px;
}


.sin-registros p {
    font-size: 0.85rem;

    color: var(--color-texto-secundario);
}


/* =========================================================
   PANEL DE USUARIO
   ========================================================= */

.panel-usuario {
    position: fixed;

    inset: 0;

    z-index: 200;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding: 74px 16px 20px;

    background: rgba(15, 23, 42, 0.45);
}


.panel-contenido {
    width: 100%;
    max-width: 420px;

    background: white;

    border-radius: 18px;

    padding: 20px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.2);
}


.panel-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}


.panel-encabezado h3 {
    font-size: 1.05rem;
}


.panel-encabezado button {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #f1f5f9;

    font-size: 1rem;

    cursor: pointer;
}


.usuario-info {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px;

    margin-bottom: 16px;

    border-radius: 12px;

    background: #f8fafc;
}


.avatar {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e2e8f0;

    font-size: 1.2rem;
}


.usuario-info strong {
    display: block;

    font-size: 0.95rem;
}


.usuario-info span {
    display: block;

    margin-top: 2px;

    font-size: 0.78rem;

    color: var(--color-texto-secundario);
}


/* =========================================================
   OCULTAR ELEMENTOS
   ========================================================= */

.oculto {
    display: none !important;
}


/* =========================================================
   TABLET / PC
   ========================================================= */

@media (min-width: 600px) {

    .encabezado {
        height: 70px;

        padding: 0 24px;
    }


    .titulo-app h1 {
        font-size: 1.15rem;
    }


    .contenido {
        padding-top: 28px;
    }


    .seccion-fecha h2 {
        font-size: 1.5rem;
    }


    .tarjeta {
        padding: 24px;
    }

}




/* =========================================================
   REGISTROS DEL HISTORIAL
   ========================================================= */

.registro {
    background: var(--color-superficie);

    border: 1px solid var(--color-borde);

    border-radius: 14px;

    padding: 16px;

    box-shadow: var(--sombra);
}


/* ---------------------------------------------------------
   Encabezado del registro
   --------------------------------------------------------- */

.registro-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;
}


.registro-superior strong {
    font-size: 0.95rem;

    text-transform: capitalize;
}


.estado-cerrado {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding: 0 9px;

    border-radius: 20px;

    background: var(--color-verde-fondo);

    color: var(--color-verde);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.4px;
}


/* ---------------------------------------------------------
   Numeración
   --------------------------------------------------------- */

.registro-numeracion {
    padding: 12px;

    margin-bottom: 12px;

    border-radius: 10px;

    background: #f8fafc;

    text-align: center;
}


.registro-numeracion span {
    font-size: 1rem;

    font-weight: 700;

    letter-spacing: 0.3px;
}


/* ---------------------------------------------------------
   Datos
   --------------------------------------------------------- */

.registro-datos {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;
}


.registro-datos div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.registro-datos small {
    font-size: 0.68rem;

    color: var(--color-texto-secundario);

    text-transform: uppercase;

    letter-spacing: 0.4px;
}


.registro-datos strong {
    font-size: 0.9rem;

    font-weight: 700;
}


/* ---------------------------------------------------------
   Usuario que realizó el cierre
   --------------------------------------------------------- */

.registro-usuario {
    margin-top: 14px;

    padding-top: 10px;

    border-top: 1px solid var(--color-borde);

    font-size: 0.74rem;

    color: var(--color-texto-secundario);
}


/* =========================================================
   ESTADO DE ERROR
   ========================================================= */

.mensaje-error {
    padding: 12px 14px;

    margin-top: 10px;

    border-radius: 10px;

    background: var(--color-rojo-fondo);

    color: var(--color-rojo);

    font-size: 0.82rem;

    font-weight: 600;
}


/* =========================================================
   ADAPTACIÓN PARA PANTALLAS MUY PEQUEÑAS
   ========================================================= */

@media (max-width: 360px) {

    .contenido {
        padding-left: 12px;
        padding-right: 12px;
    }


    .tarjeta {
        padding: 16px;
    }


    .registro {
        padding: 14px;
    }


    .registro-datos {
        gap: 5px;
    }


    .registro-datos strong {
        font-size: 0.82rem;
    }


    .registro-numeracion span {
        font-size: 0.9rem;
    }

}

/* Ocultar correctamente las secciones controladas por JavaScript */
[hidden] {
    display: none !important;
}

/* ================================
   SELECTOR DE CAMPEONATO
================================ */

.selector-campeonato {
    margin-bottom: 20px;
}

.selector-campeonato label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
}

.select-contenedor {
    position: relative;
    width: 100%;
}

.select-contenedor select {
    width: 100%;
    min-height: 52px;
    padding: 0 45px 0 16px;

    border: 1px solid #d8d8d8;
    border-radius: 12px;

    background: #ffffff;

    font-size: 16px;
    font-weight: 600;
    color: #222;

    appearance: none;
    -webkit-appearance: none;

    box-sizing: border-box;
}

.select-contenedor select:focus {
    outline: none;
    border-color: #555;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.select-flecha {
    position: absolute;
    right: 16px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 22px;
    color: #555;

    pointer-events: none;
}

.btn-finalizar {
    width: 100%;
    margin-top: 16px;
    padding: 12px 18px;

    border: 1px solid #dc2626;
    border-radius: 10px;

    background: #fff;
    color: #dc2626;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;

    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-finalizar:hover {
    background: #dc2626;
    color: #fff;
}

.btn-finalizar:active {
    transform: scale(0.98);
}

.btn-finalizar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}