/* =========================================================
   Ticket Stats - estilos compartidos
   Paleta tomada de las capturas de referencia:
     fondo casi negro, acento verde menta, botones pill blancos
   ========================================================= */

:root,
[data-tema="oscuro"] {
    --bg:            #0D0D0D;
    --surface:       #1C1C1E;
    --surface-alt:   #2A2A2C;
    --accent:        #5BE584;   /* verde menta */
    --accent-dark:   #17361F;
    --text:          #FFFFFF;
    --text-muted:    #8E8E93;
    --text-dim:      #636366;
    --danger:        #FF8A80;
    --radius-card:   20px;
    --radius-field:  16px;
}

/* Tema claro — mismas variables, mismo acento de marca, invertido en luminosidad */
[data-tema="claro"] {
    --bg:            #F4F4F6;
    --surface:       #FFFFFF;
    --surface-alt:   #ECECEF;
    --accent:        #1FAE55;   /* verde de marca, oscurecido para contraste sobre blanco */
    --accent-dark:   #DEF6E6;
    --text:          #0D0D0D;
    --text-muted:    #6E6E73;
    --text-dim:      #A2A2A7;
    --danger:        #D93025;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* red de seguridad: ningún contenido debe poder
                            desbordar la página entera hacia los lados */
}

body {
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
}

a { color: inherit; }

/* ---------- Contenedor de pantalla ---------- */
.screen {
    max-width: 480px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 24px 24px 32px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ---------- Tipografía ---------- */
h1 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.subtitle {
    font-size: 17px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0 0 32px;
}
.label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ---------- Barra de progreso del onboarding ---------- */
.progress {
    height: 6px;
    background: var(--surface-alt);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 32px;
}
.progress span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 99px;
    transition: width .35s ease;
}

/* ---------- Campos ---------- */
.field { margin-bottom: 20px; }

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], select {
    width: 100%;
    background: var(--surface);
    border: 1.5px solid transparent;
    border-radius: var(--radius-field);
    color: var(--text);
    font-family: inherit;
    font-size: 17px;
    padding: 18px 20px;
    outline: none;
    transition: border-color .15s ease;
}
input::placeholder { color: var(--text-dim); }
input:focus, select:focus { border-color: var(--accent); }

/* ---------- Validación en línea por campo ---------- */
.label .obligatorio { color: #FF6B6B; margin-left: 2px; }
.field.campo-invalido input {
    border-color: #E5484D;
    background: rgba(229, 72, 77, 0.08);
}
.field-error {
    display: none;
    align-items: flex-start;
    gap: 6px;
    color: #FF6B6B;
    font-size: 12.5px;
    line-height: 1.4;
    margin-top: 7px;
}
.field.campo-invalido .field-error { display: flex; }
.field-error svg { flex: 0 0 auto; margin-top: 1px; width: 14px; height: 14px; }

/* ---------- Contraseña con icono de mostrar/ocultar ---------- */
.campo-password { position: relative; }
.campo-password input { padding-right: 52px; }
.btn-ver-password {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 10px; background: transparent; border: none;
    color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-ver-password svg { width: 20px; height: 20px; }

/* ---------- Botones ---------- */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border: none;
    border-radius: 99px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    padding: 18px 24px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s ease, transform .08s ease;
}
.btn:active { transform: scale(.985); }
.btn:disabled, .btn[aria-disabled=true] {
    background: #9A9A9E;
    color: #4A4A4E;
    cursor: not-allowed;
}

.btn-primary { background: #FFFFFF; color: #0D0D0D; }
.btn-ghost    { background: transparent; color: var(--text); font-weight: 500; }
.btn-surface  { background: var(--surface); color: var(--text); }

/* Botón "Continuar" del onboarding: ancho de contenido, abajo a la derecha */
.btn-next {
    width: auto;
    min-width: 160px;
    padding: 18px 32px;
}

/* ---------- Enlaces de pie ---------- */
.link {
    display: block;
    text-align: center;
    color: var(--text);
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: 14px 0;
}
.link-muted { color: var(--text-muted); text-decoration: none; }

/* ---------- Mensajes ---------- */
.error {
    color: var(--danger);
    font-size: 15px;
    text-align: center;
    margin: 4px 0 20px;
}
.notice {
    background: var(--accent-dark);
    color: var(--accent);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 20px;
}

/* ---------- Opciones seleccionables (radio cards) ---------- */
.option {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border: 1.5px solid transparent;
    border-radius: var(--radius-card);
    padding: 18px 20px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.option:has(input:checked) {
    border-color: var(--accent);
    background: #1F2A22;
}
.option input { position: absolute; opacity: 0; pointer-events: none; }

.option-icon {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--surface-alt);
    display: grid;
    place-items: center;
    font-size: 22px;
}
.option-body { flex: 1; min-width: 0; }
.option-title { font-size: 18px; font-weight: 600; }
.option-desc  { font-size: 14px; color: var(--text-muted); line-height: 1.35; margin-top: 2px; }

.option-check {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid var(--text-dim);
    position: relative;
}
.option:has(input:checked) .option-check {
    border-color: var(--accent);
    background: var(--accent);
}
.option:has(input:checked) .option-check::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #0D0D0D;
}

/* ---------- Contador +/- ---------- */
.counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    margin: 48px 0 16px;
}
.counter button {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: none;
    background: var(--surface);
    color: var(--text);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.counter button:active { background: var(--surface-alt); }
.counter .valor { font-size: 44px; font-weight: 700; min-width: 60px; text-align: center; }

/* ---------- Navegación inferior del onboarding ---------- */
.nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 32px;
}
.btn-back {
    background: none;
    border: none;
    color: var(--text);
    font-size: 28px;
    line-height: 1;
    padding: 12px 16px;
    cursor: pointer;
}

/* ---------- Utilidades ---------- */
.spacer   { flex: 1 1 auto; }
.center   { text-align: center; }
.mt-auto  { margin-top: auto; }
.hidden   { display: none !important; }
.legal {
    font-size: 13px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.5;
    margin-top: 20px;
}
.legal a { color: var(--text-muted); }

/* ---------- Selector de tienda (bottom sheet) ---------- */
.selector-tienda {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: none;
    border-radius: var(--radius-field);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 17px;
    padding: 18px 20px;
    cursor: pointer;
    text-align: left;
}
.selector-tienda.elegido { color: var(--text); }
.selector-tienda-icono { font-size: 18px; }
.selector-tienda::after {
    content: '›';
    margin-left: auto;
    color: var(--text-dim);
    font-size: 20px;
}

.store-picker-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 200;
    display: none;
    align-items: flex-end;
}
.store-picker-overlay.open { display: flex; }

.store-picker-sheet {
    background: var(--bg);
    width: 100%;
    max-height: 80vh;
    border-radius: 24px 24px 0 0;
    padding: 12px 20px 24px;
    display: flex;
    flex-direction: column;
}
.store-picker-handle {
    width: 40px; height: 4px;
    background: var(--surface-alt);
    border-radius: 99px;
    margin: 4px auto 16px;
}
.store-picker-sheet h2 {
    font-size: 20px;
    text-align: center;
    margin: 0 0 16px;
}
.store-picker-search {
    width: 100%;
    background: var(--surface);
    border: none;
    border-radius: 14px;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    padding: 14px 16px;
    margin-bottom: 14px;
    outline: none;
}
.store-picker-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.store-picker-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: none;
    border-radius: 16px;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    padding: 16px;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: left;
}
.store-picker-badge {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}
.store-picker-otra {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    background: none;
    border: 1.5px dashed var(--surface-alt);
    border-radius: 16px;
    color: var(--accent);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 16px;
    margin-top: 4px;
    cursor: pointer;
}
.store-picker-vacio {
    color: var(--text-dim);
    font-size: 14px;
    text-align: center;
    padding: 24px 0;
}

/* ---------- Hoja de invitación al grupo ---------- */
.invite-sheet { text-align: center; }
.invite-sheet-desc {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.4;
    margin: 0 0 28px;
}
.invite-sheet-codigo {
    border: 2px dashed var(--accent);
    border-radius: 16px;
    padding: 18px;
    font-family: monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--text);
    margin: 0 0 24px;
}
.invite-sheet-botones {
    display: flex;
    gap: 10px;
}
.invite-sheet-botones .btn { width: auto; flex: 1; padding: 16px; font-size: 15px; }
.invite-sheet-aviso {
    font-size: 13px;
    color: var(--accent);
    margin: 14px 0 0;
    min-height: 16px;
}

/* ---------- Hojas de confirmación / texto (sustituyen a confirm/prompt) ---------- */
.confirm-sheet-mensaje {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.45;
    margin: 4px 0 22px;
}
.prompt-sheet-input {
    width: 100%;
    background: var(--surface-alt);
    border: none;
    border-radius: 14px;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    padding: 14px 16px;
    outline: none;
}
.btn-peligro {
    background: var(--danger);
    color: #2A0A0A;
}
.fila-doble { display: flex; gap: 10px; }
.fila-doble > input, .fila-doble > select, .fila-doble > .btn, .fila-doble > a.btn {
    flex: 1 1 0; width: auto; min-width: 0;
}

/* ---------- Opción de hoja deslizante (filtros, ordenar por...) ---------- */
.filtro-opcion {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: var(--surface); color: var(--text); border: none;
    border-radius: 16px; padding: 18px; margin-bottom: 12px; font-size: 16px; font-weight: 500;
    text-decoration: none; cursor: pointer; font-family: inherit;
}
.filtro-opcion.seleccionada { background: var(--accent-dark); color: var(--accent); }
.filtro-opcion .check {
    margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
    color: #0D0D0D; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: 0 0 auto;
}
.filtro-opcion-icono {
    width: 34px; height: 34px; border-radius: 50%; background: var(--surface-alt);
    display: grid; place-items: center; font-size: 15px; flex: 0 0 auto;
}
.filtro-opcion-desplegable { padding: 0; }
.filtro-opcion-desplegable > summary {
    list-style: none; display: flex; align-items: center; padding: 18px; cursor: pointer;
}
.filtro-opcion-desplegable > summary::-webkit-details-marker { display: none; }
.filtro-opcion-desplegable form { padding: 0 18px 18px; }

/* ---------- Cabecera de pestaña con flecha de volver al resumen ---------- */
.tab-cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tab-volver { color: var(--text); font-size: 22px; text-decoration: none; line-height: 1; }
.tab-cabecera h1 { font-size: 28px; margin: 0; }

/* ---------- Tarjeta "Invita a tu grupo" (sin código visible) ---------- */
.invitar-card { text-align: left; }
.invitar-card-icono {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--accent-dark);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 22px;
    margin-bottom: 14px;
}
.invitar-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.invitar-card h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 0;
}
.invitar-card-link {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-dark);
    color: var(--accent);
    display: grid;
    place-items: center;
    text-decoration: none;
}
.invitar-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 6px 0 18px;
}
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Barra de navegación inferior (base, común a toda la app) ---------- */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #161618; border-top: 1px solid #232326;
    display: flex; justify-content: space-around;
    padding: 10px 4px calc(10px + env(safe-area-inset-bottom));
    z-index: 50;
}
.tab {
    flex: 1; text-align: center; text-decoration: none;
    color: var(--text-dim); font-size: 11px; font-weight: 500;
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0;
}
.tab svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ---------- Aviso de periodo de prueba ----------
   El ancho útil coincide exactamente con el área de contenido de
   .screen en cada tamaño (su max-width menos su padding lateral),
   para que quede perfectamente alineado con la cabecera de debajo. */
.aviso-prueba {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(120deg, var(--accent-dark) 0%, var(--surface) 100%);
    border: 1px solid rgba(91,229,132,.35);
    color: var(--text);
    border-radius: 16px; padding: 14px 16px; margin: 12px auto 0;
    max-width: 432px; /* 480 - 24*2, igual que el área de .screen en móvil */
    width: calc(100% - 48px);
    font-size: 13.5px; text-decoration: none; line-height: 1.35;
    box-shadow: 0 4px 18px rgba(91,229,132,.12);
}
.aviso-prueba-icono {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent); color: #0D0D0D; display: grid; place-items: center;
    font-size: 18px;
}
.aviso-prueba-txt { flex: 1; min-width: 0; font-weight: 600; }
.aviso-prueba-cta {
    flex: 0 0 auto; background: var(--accent); color: #0D0D0D; font-weight: 700;
    font-size: 12.5px; padding: 9px 14px; border-radius: 99px; white-space: nowrap;
}
@media (min-width: 640px) { .aviso-prueba { max-width: 556px; width: calc(100% - 64px); } }
@media (min-width: 1024px) { .aviso-prueba { max-width: 700px; width: calc(100% - 80px); } }
@media (min-width: 1440px) { .aviso-prueba { max-width: 800px; } }
.tab.activo { color: var(--accent); }

/* ---------- Botones flotantes de acción (+) ---------- */
.fab {
    position: fixed; right: 20px; bottom: 96px; width: 56px; height: 56px; border-radius: 50%;
    background: #FFFFFF; color: #0D0D0D; display: grid; place-items: center; font-size: 24px;
    text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.4); z-index: 60;
}
.fab-redondo {
    position: fixed; right: 20px; bottom: 96px;
    width: 56px; height: 56px; border-radius: 50%; aspect-ratio: 1 / 1;
    background: #FFFFFF; color: #0D0D0D; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; line-height: 1; padding: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.4); cursor: pointer; z-index: 60;
}

/* ---------- Tarjeta genérica (usada en casi todas las pantallas internas) ---------- */
.card {
    background: var(--surface); border-radius: var(--radius-card);
    padding: 18px 20px; margin-bottom: 14px;
}

/* =========================================================
   VERSIÓN NAVEGADOR / ESCRITORIO
   El diseño base está pensado para móvil (columna centrada de
   480px). En pantallas más anchas, en vez de dejar esa columna
   flotando en un mar de fondo negro, la ampliamos por etapas y
   agrandamos un poco tipografía/espaciados para que no se vea
   todo apretado. La barra inferior y los botones flotantes se
   recentran para quedar bajo esa misma columna, no pegados al
   borde de la ventana del navegador.
   ========================================================= */

/* Tablet / portátil pequeño */
@media (min-width: 640px) {
    .screen { max-width: 620px; padding-left: 32px; padding-right: 32px; }
    .tabbar { width: 620px; max-width: calc(100vw - 24px); left: 50%; right: auto; transform: translateX(-50%);
              border-radius: 22px 22px 0 0; }
    .fab, .fab-redondo { right: max(20px, calc(50vw - 310px + 24px)); }
}

/* Portátil / escritorio */
@media (min-width: 1024px) {
    body { font-size: 16.5px; }
    .screen { max-width: 780px; padding-left: 40px; padding-right: 40px; }
    .tabbar { width: 780px; max-width: calc(100vw - 24px); }
    .fab, .fab-redondo { right: max(20px, calc(50vw - 390px + 32px)); }

    h1 { font-size: calc(1em + 4px); }
    .card, .g-card { padding-left: 26px; padding-right: 26px; }
}

/* Pantallas grandes de escritorio: un poco más de aire, sin
   estirar el contenido más allá de un ancho legible */
@media (min-width: 1440px) {
    .screen { max-width: 880px; }
    .tabbar { width: 880px; max-width: calc(100vw - 24px); }
    .fab, .fab-redondo { right: max(20px, calc(50vw - 440px + 32px)); }
}

/* La app está pensada para uso táctil vertical; en pantallas muy
   anchas y bajas (portátil típico) evita que la columna central
   quede descentrada verticalmente por el min-height:100dvh */
@media (min-width: 640px) and (min-height: 700px) {
    html, body { min-height: 100vh; }
}