/* ============================================================
   PANEL COMERCIO — Compras Tres Cantos
   Fase 4 · Versión 3.0 · Mayo 2026
   Solo estilos especificos del panel comercio.

   CAMBIOS v3.0 (refactor pre-produccion):
   - Eliminado bloque "Ocultar Astra/WP" (movido a base.css)
   - Eliminado .comercio-wrap .header-sistema y overrides (en base.css)
   - Eliminado .btn-pwa y todos sus modificadores (en base.css)
   - Eliminado .btn-volver (en base.css)
   - Aplicadas variables --texto-panel-* para subir tamaño de fuente
   - Nueva clase .importe-grande para el input de importe en
     "Sumar puntos" (28px en negrita, mucho mas legible)
   ============================================================ */

/* ── Layout general ── */
.comercio-wrap {
    max-width: var(--ancho-formulario);
    margin: 0 auto;
    padding: var(--espacio-md);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.comercio-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: var(--espacio-lg) 0;
}

/* ── Contenido del panel ── */
.comercio-contenido {
    flex: 1;
    width: 100%;
}

/* Saludo principal del comercio. Mantiene 28px (variable de panel). */
.comercio-saludo {
    font-size: var(--texto-panel-xl);
    color: var(--texto-principal);
    text-align: center;
    margin-bottom: var(--espacio-xs);
}

.comercio-categoria {
    text-align: center;
    margin-bottom: var(--espacio-lg);
    font-size: var(--texto-panel-sm);
}

/* ── Botones principales del panel comercio ──
   El estilo base (.btn-pwa) vive en base.css. Aqui solo definimos
   el contenedor que los agrupa. */
.comercio-botones {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-md);
}

/* ── Pantallas secundarias ── */
.comercio-pantalla {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.comercio-pantalla-header {
    display: flex;
    align-items: center;
    gap: var(--espacio-md);
    padding: var(--espacio-md) 0;
    border-bottom: 1px solid var(--borde-color);
    margin-bottom: var(--espacio-lg);
}

/* Titulo de pantalla secundaria. Sube a 24px (variable panel). */
.comercio-pantalla-header h2 {
    font-size: var(--texto-panel-lg);
    margin: 0;
}

.comercio-pantalla-contenido {
    flex: 1;
}

/* Botones dentro de pantallas secundarias: permitir texto en 2 lineas */
.comercio-pantalla .btn {
    white-space: normal;
    line-height: 1.3;
}

/* Texto general dentro de pantallas secundarias del comercio.
   Sube a 18px para mejor lectura en mostrador. */
.comercio-pantalla-contenido p {
    font-size: var(--texto-panel-base);
}

/* ============================================================
   INPUT DE IMPORTE (pantalla "Sumar puntos")
   ----------------------------------------------------------------
   El input para el importe de la compra es el campo critico del
   flujo en mostrador. Antes se veia con 16px y peso normal:
   ilegible a la velocidad de uso real.

   Con la clase .importe-grande aplicada al input del importe, se
   muestra a 28px en negrita y centrado. La altura aumenta para
   que no parezca apretado.

   Selector permisivo (sin [type="number"]) porque el input real
   en comercio.php es type="text" con inputmode="decimal". Asi
   funciona con cualquier tipo de input que lleve la clase.
   ============================================================ */
.campo-grupo input.importe-grande {
    height: 64px;
    font-size: var(--texto-panel-importe);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
}

/* Texto que muestra los puntos calculados en tiempo real debajo
   del importe. Sube a 18px para ser bien legible. */
.importe-puntos-preview {
    font-size: var(--texto-panel-base);
    text-align: center;
    margin-top: var(--espacio-sm);
    color: var(--texto-secundario);
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .comercio-wrap {
        padding: var(--espacio-sm);
    }

    .btn-pwa {
        padding: var(--espacio-md) var(--espacio-sm);
    }
}

/* ============================================================
   ESTADISTICAS — Subtarea 4.5
   ============================================================ */

/* ── Selector de periodo ──────────────────────────────────────
   Tres botones en fila. El activo usa el color de acento.
   El hover sigue el mismo patron que el resto del panel:
   fondo gris claro, texto principal. Sin azules ni verdes. ── */
.stats-periodos {
    display: flex;
    gap: var(--espacio-sm);
    margin-bottom: var(--espacio-lg);
}

/* Boton de periodo. Sube de 12px a 14px (variable panel). */
.btn-periodo {
    flex: 1;
    padding: var(--espacio-sm) var(--espacio-xs);
    border: 1.5px solid var(--borde-color);
    border-radius: var(--borde-radio);
    background-color: var(--fondo-blanco);
    color: var(--texto-secundario);
    font-family: var(--fuente);
    font-size: var(--texto-panel-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    text-align: center;
    line-height: 1.3;
}

/* Hover: fondo gris claro + texto principal. Sin colores de acento. */
.btn-periodo:hover {
    background-color: var(--fondo-gris-claro);
    color: var(--texto-principal);
}

/* Estado activo: fondo acento suave + borde y texto acento */
.btn-periodo.activo {
    background-color: var(--color-acento-suave);
    border-color: var(--color-acento);
    color: var(--color-acento);
}

/* El activo no cambia en hover para no confundir al usuario */
.btn-periodo.activo:hover {
    background-color: var(--color-acento-suave);
    color: var(--color-acento);
}

/* ── Rejilla de cifras resumen ────────────────────────────────
   2 columnas en movil. Cada celda es una card compacta con
   etiqueta pequena encima y cifra grande debajo. ── */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-sm);
    margin-bottom: var(--espacio-lg);
}

.stats-card {
    background-color: var(--fondo-gris-claro);
    border: 1px solid var(--borde-color);
    border-radius: var(--borde-radio);
    padding: var(--espacio-md) var(--espacio-sm);
    text-align: center;
}

/* Etiqueta de la card (sube a 14px - variable panel xs). */
.stats-card-label {
    font-size: var(--texto-panel-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--espacio-xs);
    color: var(--texto-suave) !important;
}

/* Valor de la card (sube a 24px - variable panel lg). */
.stats-card-valor {
    font-size: var(--texto-panel-lg);
    font-weight: 700;
    color: var(--texto-principal) !important;
    line-height: 1.1;
}

/* ── Tabla de ultimas transacciones ──────────────────────────
   Tabla compacta para movil. Sube de 12px a 14px para mejor
   legibilidad sin romper el layout en pantallas estrechas. ── */
.stats-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-panel-xs);
}

.stats-tabla thead th {
    text-align: left;
    padding: var(--espacio-xs) var(--espacio-sm);
    border-bottom: 2px solid var(--borde-color);
    font-size: var(--texto-panel-xs);
    font-weight: 700;
    color: var(--texto-secundario);
    white-space: nowrap;
}

.stats-tabla tbody td {
    padding: var(--espacio-sm) var(--espacio-sm);
    border-bottom: 1px solid var(--fondo-gris-medio);
    vertical-align: middle;
    color: var(--texto-principal);
}

/* Ultima fila sin borde inferior */
.stats-tabla tbody tr:last-child td {
    border-bottom: none;
}

/* Fila con hover sutil para facilitar la lectura */
.stats-tabla tbody tr:hover td {
    background-color: var(--fondo-gris-claro);
}

/* Badge warning para los canjes (complementa badge-acento de base.css) */
.badge-warning {
    background-color: var(--fondo-warning);
    color: var(--color-warning);
}

/* ── Responsive estadisticas ─────────────────────────────────
   En pantallas muy pequenas la tabla puede desbordar.
   Envolvemos en scroll horizontal para que no rompa el layout. ── */
#stats-tabla-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 380px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--espacio-xs);
    }

    .stats-card-valor {
        font-size: var(--texto-panel-md);
    }

    .btn-periodo {
        font-size: 12px;
        padding: var(--espacio-xs) 4px;
    }
}