/* ============================================================
   PANEL CLIENTE — Compras Tres Cantos
   Versión 2.0 · Mayo 2026
   Solo estilos específicos del panel cliente PWA.

   CAMBIOS v2.0 (refactor pre-produccion):
   - Eliminado bloque "Ocultar Astra/WP" (movido a base.css)
   - Eliminado .pwa-wrap .header-sistema y overrides (en base.css)
   - Eliminado .btn-pwa, .btn-pwa-icono, .btn-pwa-texto, .btn-pwa-sub,
     .btn-pwa:hover, .btn-pwa-inactivo (movidos a base.css)
   - Eliminado .btn-volver (movido a base.css)
   - Aplicadas variables --texto-panel-* para subir tamaño de fuente
   ============================================================ */

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

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

.pwa-logo {
    margin-bottom: var(--espacio-lg);
}

.pwa-logo img {
    border-radius: var(--borde-radio);
}

/* ── Contenido del panel ── */
.pwa-contenido {
    flex: 1;
}

/* Saludo principal del panel cliente. Usa variable de panel para
   ser legible en movil. */
.pwa-saludo {
    font-size: var(--texto-panel-base);
    color: var(--texto-principal);
    margin-bottom: var(--espacio-lg);
    text-align: center;
}

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

/* ── Pantallas secundarias (Identificarme, Ver puntos, Canjear) ── */
.pwa-pantalla {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pwa-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. Usa variable de panel (24px). */
.pwa-pantalla-header h2 {
    font-size: var(--texto-panel-lg);
    margin: 0;
}

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

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

/* ── Categorías ──
   Cada fila representa una categoria del cliente con su saldo y
   barra de progreso. */
.categoria-fila {
    padding: var(--espacio-md) 0;
    border-bottom: 1px solid var(--fondo-gris-medio);
}

.categoria-fila:last-child {
    border-bottom: none;
}

/* Nombre de la categoria. Sube a 18px para mejor lectura. */
.categoria-nombre {
    font-weight: 600;
    font-size: var(--texto-panel-base);
    color: var(--texto-principal);
    margin-bottom: var(--espacio-xs);
}

.categoria-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--espacio-xs);
    font-size: var(--texto-panel-sm);
}

/* ── Banner de transacciones nuevas (Mejora M1) ──
   Aparece bajo el saludo cuando el cliente tiene compras realizadas
   desde su ultima visita a la PWA. Fondo blanco con borde sutil para
   despegarlo del fondo, sin destacar como alerta. */
.banner-trans {
    position: relative;
    background-color: var(--fondo-blanco);
    border: 1px solid var(--borde-color);
    border-radius: var(--borde-radio-grande);
    box-shadow: var(--sombra-suave);
    padding: var(--espacio-md) var(--espacio-md) var(--espacio-md) var(--espacio-md);
    margin-bottom: var(--espacio-lg);
}

/* Texto principal del banner: las compras detectadas.
   Sube a 18px para mejor lectura. */
.banner-trans-texto {
    font-size: var(--texto-panel-base);
    color: var(--texto-principal);
    line-height: 1.4;
    margin-right: var(--espacio-lg); /* Hueco para la X de cerrar */
}

/* Boton X para cerrar el banner. Posicion absoluta arriba-derecha. */
.banner-trans-cerrar {
    position: absolute;
    top: var(--espacio-xs);
    right: var(--espacio-sm);
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--texto-suave);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--borde-radio);
}

.banner-trans-cerrar:hover {
    color: var(--texto-secundario);
    background-color: var(--fondo-gris-claro);
}

/* Botón de reseña Google del banner.
   El wrapper <a> usa la clase .btn-pwa-enlace de base.css (Mejora M6).
   Aqui solo definimos los estilos especificos de los dos spans
   internos (estrellas + texto) y un margin-top para separar el
   botón del texto del banner. */
.banner-trans .btn-pwa-enlace {
    margin-top: var(--espacio-md);
}

/* Estrellas en línea aparte sobre el texto del botón de reseña. */
.banner-trans-boton-estrellas {
    display: block;
    font-size: var(--texto-panel-md);
    letter-spacing: 2px;
    margin-bottom: 4px;
    color: var(--color-acento);
}

.banner-trans-boton-texto {
    display: block;
}

/* ── QR (personal y de canje) ──
   Override del .qr-container img de base.css: en el panel cliente
   queremos que el QR llene el ancho del contenedor (hasta 260px). */
.qr-container img {
    width: 100%;
    max-width: 260px;
    height: auto;
    aspect-ratio: 1 / 1;
}

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

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