/* ============================================================
   Qullqi Wasi — Paleta Tawantinsuyo + UX Mobile v2.1
   ─────────────────────────────────────────────────────────────
   Paleta inspirada en los colores del Imperio Inca:
     Oro inca     #D4A017  — metal sagrado del Inti (sol)
     Sangre inca  #8B1A1A  — rojo profundo de la realeza
     Terracota    #C4622D  — cerámica andina
     Tierra andina #2C1810  — fondo oscuro cálido
     Piedra       #1E1208  — fondo más oscuro
     Verde koka   #3D7A3A  — hoja de coca sagrada
     Turquesa     #2E6B7A  — turquesa andina
     Crema hueso  #F0E6C8  — textil natural
     Texto suave  #B8A88A  — arena del altiplano
   ============================================================ */

:root {
    /* ── Paleta Tawantinsuyo ── */
    --tw-tierra:      #1E1208;   /* fondo base — tierra oscura     */
    --tw-barro:       #2C1810;   /* fondo secundario — barro inca   */
    --tw-terracota:   #C4622D;   /* acento principal — cerámica     */
    --tw-terracota-c: #E07A45;   /* acento claro                    */
    --tw-oro:         #D4A017;   /* dorado inca — Inti              */
    --tw-oro-claro:   #F0C040;   /* dorado brillante                */
    --tw-sangre:      #8B1A1A;   /* rojo profundo — wiphala rojo    */
    --tw-verde:       #3D7A3A;   /* verde koka                      */
    --tw-turquesa:    #2E6B7A;   /* turquesa andina                 */
    --tw-piedra:      #3A2518;   /* bordes — piedra tallada         */
    --tw-crema:       #F0E6C8;   /* texto principal — textil natural*/
    --tw-arena:       #B8A88A;   /* texto suave — arena             */
    --tw-sombra:      0 4px 20px rgba(0,0,0,0.55);

    /* ── Aliases para compatibilidad con código existente ── */
    --sgce-primario:     var(--tw-tierra);
    --sgce-secundario:   var(--tw-barro);
    --sgce-acento:       var(--tw-terracota);
    --sgce-acento-claro: var(--tw-terracota-c);
    --sgce-dorado:       var(--tw-oro);
    --sgce-verde:        var(--tw-verde);
    --sgce-texto:        var(--tw-crema);
    --sgce-texto-suave:  var(--tw-arena);
    --sgce-borde:        var(--tw-piedra);
    --sgce-tarjeta:      var(--tw-turquesa);
    --sgce-sombra:       var(--tw-sombra);

    --radio:          10px;
    --transicion:     all 0.22s ease;
    --touch-target:   48px;
    --navbar-h:       56px;
    --bottombar-h:    62px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    background-color: var(--tw-tierra);
    color: var(--tw-crema);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

a { color: var(--tw-terracota-c); text-decoration: none; }
a:hover { color: var(--tw-oro); }

/* ── Navbar ────────────────────────────────────────────────── */
.sgce-navbar {
    background-color: var(--tw-barro) !important;
    border-bottom: 3px solid var(--tw-oro);
    box-shadow: var(--tw-sombra);
    height: var(--navbar-h);
}

.navbar-brand {
    color: var(--tw-crema) !important;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ── Sidebar (solo desktop ≥ 768px) ───────────────────────── */
.sgce-sidebar {
    width: 215px;
    min-width: 215px;
    background-color: var(--tw-barro);
    border-right: 1px solid var(--tw-piedra);
    height: calc(100vh - var(--navbar-h));
    position: sticky;
    top: var(--navbar-h);
    overflow-y: auto;
    flex-shrink: 0;
}

.sgce-sidebar .nav-link {
    color: var(--tw-arena);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
    transition: var(--transicion);
    min-height: 40px;
    display: flex;
    align-items: center;
}

.sgce-sidebar .nav-link:hover,
.sgce-sidebar .nav-link.activo {
    color: var(--tw-crema);
    background: linear-gradient(90deg, rgba(196,98,45,0.25), rgba(196,98,45,0.05));
    border-left: 3px solid var(--tw-terracota);
    padding-left: calc(0.85rem - 3px);
}

/* ══════════════════════════════════════════════════════════════
   BARRA INFERIOR MÓVIL
   Se muestra SOLO en pantallas < 768px mediante media query.
   Posición fixed bottom-0, z-index alto.
   NO aparece en desktop.
   ══════════════════════════════════════════════════════════════ */
.barra-inferior {
    display: none;            /* oculta por defecto (desktop) */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottombar-h);
    background: var(--tw-barro);
    border-top: 2px solid var(--tw-oro);
    z-index: 1040;
    box-shadow: 0 -3px 16px rgba(0,0,0,0.5);
}

.barra-inferior-nav {
    display: flex;
    height: 100%;
    align-items: stretch;
}

.barra-inferior-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--tw-arena);
    text-decoration: none;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    gap: 2px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}

.barra-inferior-item i { font-size: 1.3rem; line-height: 1; }

.barra-inferior-item.activo { color: var(--tw-oro); }

.barra-inferior-item.activo::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 2px;
    background: var(--tw-oro);
    border-radius: 0 0 3px 3px;
}

.barra-inferior-item:active {
    color: var(--tw-terracota);
    background: rgba(196,98,45,0.1);
}

/* ── Área de contenido principal ───────────────────────────── */
.contenido-principal {
    flex-grow: 1;
    overflow-x: hidden;
    padding: 1rem;
}

/* ── KPI Cards ─────────────────────────────────────────────── */
.kpi-tarjeta {
    background: linear-gradient(135deg, var(--tw-barro), #3A1F10);
    border: 1px solid var(--tw-piedra);
    border-left: 4px solid var(--tw-terracota);
    border-radius: var(--radio);
    padding: 0.85rem 1rem;
    transition: var(--transicion);
    box-shadow: var(--tw-sombra);
    height: 100%;
}

.kpi-tarjeta:hover {
    transform: translateY(-2px);
    border-left-color: var(--tw-oro);
}

.kpi-valor {
    font-size: 2rem;
    font-weight: 700;
    color: var(--tw-oro);
    line-height: 1.1;
}

.kpi-etiqueta {
    font-size: 0.67rem;
    color: var(--tw-arena);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
}

/* ── Botón principal ───────────────────────────────────────── */
.btn-sgce {
    background: linear-gradient(135deg, var(--tw-terracota), var(--tw-sangre));
    color: var(--tw-crema) !important;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transicion);
    box-shadow: 0 2px 8px rgba(139,26,26,0.4);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-sgce:hover {
    background: linear-gradient(135deg, var(--tw-terracota-c), var(--tw-terracota));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(196,98,45,0.5);
    color: #fff !important;
}

.btn-sgce:active { transform: scale(0.97); }

/* Touch targets */
.btn { min-height: 40px; }
.btn-sm { min-height: 36px; }

/* ── Tablas ─────────────────────────────────────────────────── */
.tabla-sgce {
    color: var(--tw-crema);
    border-color: var(--tw-piedra);
}

.tabla-sgce thead tr {
    background: linear-gradient(90deg, var(--tw-turquesa), #1E4A55);
    color: var(--tw-crema);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tabla-sgce thead th {
    border-color: var(--tw-piedra);
    padding: 0.7rem 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.tabla-sgce tbody tr { border-color: var(--tw-piedra); transition: background 0.12s; }
.tabla-sgce tbody tr:hover { background: rgba(196,98,45,0.08); }

.tabla-sgce td {
    border-color: var(--tw-piedra);
    vertical-align: middle;
    padding: 0.6rem 0.8rem;
}

/* ── Barra de progreso ─────────────────────────────────────── */
.barra-progreso-sgce {
    background: var(--tw-piedra);
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
}

.barra-progreso-sgce .relleno {
    height: 100%;
    background: linear-gradient(90deg, var(--tw-terracota), var(--tw-oro));
    border-radius: 99px;
    transition: width 0.4s ease;
    min-width: 2px;
}

/* ── Gráfico de actividad ─────────────────────────────────── */
.grafico-actividad {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-height: 104px;
    flex-direction: column;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.celda-actividad { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }

.nivel-0 { background: #2C1810; border: 1px solid var(--tw-piedra); }
.nivel-1 { background: #5C2E10; }
.nivel-2 { background: #8B4A20; }
.nivel-3 { background: #B06530; }
.nivel-4 { background: var(--tw-terracota); }

/* ══════════════════════════════════════════════════════════════
   TARJETAS DE ESTAMPAS — compactas para máxima densidad
   Mostrar más estampas por pantalla:
   - Sin imagen (solo texto + número + rareza + contador)
   - Contador táctil con botones grandes
   ══════════════════════════════════════════════════════════════ */
.tarjeta-estampa {
    background: var(--tw-barro);
    border: 1.5px solid var(--tw-piedra);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.tarjeta-estampa:active { transform: scale(0.95); }

.tarjeta-estampa.obtenida {
    border-color: var(--tw-verde);
    background: linear-gradient(135deg, var(--tw-barro), #1A3018);
}

/* Checkmark más visible */
.tarjeta-estampa.obtenida::after {
    content: '✓';
    position: absolute;
    top: 3px; right: 5px;
    color: var(--tw-verde);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
}

/* Imagen de estampa — compacta */
.tarjeta-estampa img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    display: block;
}

.sin-imagen {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--tw-turquesa), #1A3A44);
    font-size: 1.6rem;
}

/* Contenido de la tarjeta — ultra compacto */
.estampa-body {
    padding: 0.25rem 0.3rem;
}

.estampa-numero {
    font-size: 0.55rem;
    color: var(--tw-arena);
    line-height: 1;
}

.estampa-nombre {
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tw-crema);
    word-break: break-word;
    margin: 0.1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Contador táctil ─────────────────────────────────────── */
.contador-estampa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.1rem 0.25rem;
    gap: 0;
}

.btn-incrementar,
.btn-decrementar {
    /* 44×44px touch target */
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1.5px solid var(--tw-piedra);
    background: rgba(255,255,255,0.04);
    color: var(--tw-crema);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}

.btn-incrementar {
    background: rgba(61,122,58,0.2);
    border-color: var(--tw-verde);
    color: var(--tw-verde);
}

.btn-decrementar {
    background: rgba(139,26,26,0.2);
    border-color: var(--tw-sangre);
    color: #ff6b6b;
}

.btn-incrementar:active { background: rgba(61,122,58,0.45); transform: scale(0.88); }
.btn-decrementar:active { background: rgba(139,26,26,0.45); transform: scale(0.88); }

.cantidad {
    min-width: 26px;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--tw-crema);
}

/* ── Sección título sticky ─────────────────────────────────── */
.seccion-titulo {
    border-bottom: 2px solid var(--tw-oro);
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
    position: sticky;
    top: var(--navbar-h);
    background: var(--tw-tierra);
    z-index: 10;
}

.seccion-titulo h5 {
    color: var(--tw-crema);
    margin: 0;
    font-size: 0.9rem;
}

/* ── Chips de sección ──────────────────────────────────────── */
.chips-secciones {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 0.75rem;
}
.chips-secciones::-webkit-scrollbar { display: none; }

.chip-seccion {
    flex-shrink: 0;
    padding: 0.3rem 0.8rem;
    border-radius: 16px;
    border: 1.5px solid var(--tw-piedra);
    background: transparent;
    color: var(--tw-arena);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transicion);
    min-height: 34px;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

.chip-seccion.activo {
    background: var(--tw-terracota);
    border-color: var(--tw-terracota);
    color: #fff;
}

/* ── Login ─────────────────────────────────────────────────── */
.login-container {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--tw-tierra) 0%, #3A1205 50%, var(--tw-tierra) 100%);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: var(--tw-barro);
    border: 1px solid var(--tw-piedra);
    border-top: 3px solid var(--tw-oro);
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

/* ── Racha badge ──────────────────────────────────────────── */
.racha-badge {
    background: linear-gradient(135deg, var(--tw-terracota), var(--tw-oro));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Flash alerts ─────────────────────────────────────────── */
.alerta-flash {
    border-radius: var(--radio);
    border-left-width: 4px;
    background: var(--tw-barro);
}

/* ── Badges de rareza — paleta andina ─────────────────────── */
.badge-comun      { background: #5A4030 !important; color: var(--tw-crema) !important; }
.badge-poco_comun { background: var(--tw-turquesa) !important; color: #fff !important; }
.badge-rara       { background: #1A4A6A !important; color: #a8d4f0 !important; }
.badge-epica      { background: linear-gradient(90deg, #7A4A00, var(--tw-oro)) !important; color: #1E1208 !important; }
.badge-legendaria { background: linear-gradient(90deg, var(--tw-sangre), var(--tw-terracota), var(--tw-oro)) !important; color: #fff !important; font-weight: 700 !important; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--tw-tierra);
    border-color: var(--tw-piedra);
    color: var(--tw-crema);
    min-height: 44px;
    font-size: 1rem;
}

.form-control:focus, .form-select:focus {
    background: var(--tw-tierra);
    border-color: var(--tw-oro);
    color: var(--tw-crema);
    box-shadow: 0 0 0 0.2rem rgba(212,160,23,0.25);
}

.form-control::placeholder { color: var(--tw-arena); }

/* Evitar zoom automático en iOS (inputs < 16px lo disparan) */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="date"], input[type="number"],
select, textarea { font-size: max(16px, 1rem) !important; }

/* ── Nav tabs ─────────────────────────────────────────────── */
.nav-tabs {
    border-color: var(--tw-piedra);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tabs .nav-link {
    color: var(--tw-arena);
    border-color: transparent;
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.nav-tabs .nav-link:hover { color: var(--tw-crema); border-color: var(--tw-piedra); }
.nav-tabs .nav-link.active {
    background: var(--tw-barro);
    border-color: var(--tw-piedra) var(--tw-piedra) transparent;
    color: var(--tw-oro);
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--tw-barro);
    border-color: var(--tw-piedra);
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--tw-tierra); }
::-webkit-scrollbar-thumb { background: var(--tw-piedra); border-radius: 3px; }

/* ── Toast de confirmación ────────────────────────────────── */
.toast-qw {
    position: fixed;
    bottom: calc(var(--bottombar-h) + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--tw-barro);
    border: 1px solid var(--tw-oro);
    border-radius: var(--radio);
    padding: 1rem 1.25rem;
    min-width: min(300px, 88vw);
    z-index: 1060;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    pointer-events: none;
}

.toast-qw.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.toast-qw-acciones {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

/* ── Overlay ──────────────────────────────────────────────── */
.overlay-sgce {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1035;
}
.overlay-sgce.activo { display: block; }

/* ── Panel "Yo" en móvil ─────────────────────────────────── */
#panel-yo {
    border-top: 2px solid var(--tw-oro) !important;
}

/* ── FAB búsqueda ─────────────────────────────────────────── */
.fab-buscar {
    display: none;
    position: fixed;
    bottom: calc(var(--bottombar-h) + 14px);
    right: 14px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tw-terracota), var(--tw-sangre));
    color: #fff;
    border: none;
    font-size: 1.25rem;
    box-shadow: 0 4px 16px rgba(196,98,45,0.55);
    z-index: 200;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.fab-buscar:active { transform: scale(0.9); }

/* ── Panel búsqueda móvil ─────────────────────────────────── */
.panel-busqueda-movil {
    display: none;
    position: fixed;
    bottom: var(--bottombar-h);
    left: 0; right: 0;
    background: var(--tw-barro);
    border-top: 1px solid var(--tw-piedra);
    padding: 0.65rem 0.85rem;
    z-index: 1041;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
    transform: translateY(100%);
    transition: transform 0.25s ease;
}
.panel-busqueda-movil.abierto { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── MÓVIL (< 768px) ─────────────────────────────────────────
   Aquí se activa la barra inferior y el modo app.
   La barra inferior tiene display:none por defecto (arriba)
   y SOLO aquí se cambia a display:flex.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* ✅ ACTIVAR barra inferior */
    .barra-inferior { display: flex; }

    /* ✅ OCULTAR sidebar (no se necesita con barra inferior) */
    .sgce-sidebar { display: none !important; }

    /* ✅ Padding inferior para no quedar tapado por la barra */
    .contenido-principal {
        padding: 0.65rem 0.65rem calc(var(--bottombar-h) + 0.65rem);
    }

    /* ✅ FAB y panel de búsqueda */
    .fab-buscar { display: flex; }
    .panel-busqueda-movil { display: block; }

    /* KPI compactos */
    .kpi-valor { font-size: 1.45rem; }
    .kpi-tarjeta { padding: 0.65rem 0.75rem; }
    .kpi-etiqueta { font-size: 0.62rem; }

    /* Estampas aún más compactas en móvil */
    .tarjeta-estampa img { height: 55px; }
    .sin-imagen { height: 50px; font-size: 1.3rem; }
    .btn-incrementar, .btn-decrementar { width: 32px; height: 32px; font-size: 1rem; }
    .cantidad { font-size: 0.85rem; }
    .estampa-nombre { font-size: 0.58rem; }
    .estampa-numero { font-size: 0.5rem; }

    /* Scroll horizontal en tablas */
    .table-responsive { -webkit-overflow-scrolling: touch; border-radius: var(--radio); }

    /* Sección título con offset correcto */
    .seccion-titulo { font-size: 0.85rem; }

    /* Gráfico de actividad reducido */
    .celda-actividad { width: 10px; height: 10px; }
    .grafico-actividad { max-height: 80px; }
}

/* ── Pantallas muy pequeñas (< 380px) ──────────────────────── */
@media (max-width: 379.98px) {
    .kpi-valor { font-size: 1.2rem; }
    .barra-inferior-item { font-size: 0.52rem; }
    .barra-inferior-item i { font-size: 1.15rem; }
    .btn-incrementar, .btn-decrementar { width: 28px; height: 28px; }
}

/* ── Tablet (768px – 991px) ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .contenido-principal { padding: 1rem 1.25rem; }
    .kpi-valor { font-size: 1.8rem; }
    .tarjeta-estampa img, .sin-imagen { height: 80px; }
}

/* ── Desktop (≥ 992px) ──────────────────────────────────────── */
@media (min-width: 992px) {
    .contenido-principal { padding: 1.5rem 2rem; }
}

/* ── Reducir movimiento ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}