:root {
    color-scheme: light;
    --brand: #10b981;
    --brand-dark: #059669;
    --ink: #0f172a;
    --muted: #64748b;
    --soft: #f8fafc;
    --panel: #ffffff;
    --line: #e2e8f0;
    --danger: #ef4444;
    --sidebar: #0f172a;
    --shadow: 0 20px 60px rgba(15, 23, 42, 0.10);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    min-width: 320px;
    min-height: 100%;
}

body {
    background: var(--soft);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}

.view {
    animation: rise 0.28s ease;
}

.empty-state,
.loading-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    text-align: center;
}

.loading-shell img {
    width: 220px;
    height: auto;
    margin-bottom: 12px;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Estilo base para todos tus botones de navegación */
.nav-button {
    display: block; /* Hace que ocupe el ancho disponible o actúe como bloque */
    padding: 12px 16px; /* Espaciado interno para que parezca un botón real */
    color: rgba(255, 255, 255, 0.7); /* Color de texto gris claro/semi-transparente */
    text-decoration: none; /* ¡ESTO QUITA EL SUBRAYADO FEO! */
    font-family: sans-serif; /* Una fuente limpia */
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px; /* Bordes redondeados modernos */
    transition: all 0.3s ease; /* Animación suave para los cambios de color */
    margin-bottom: 8px; /* Separación entre opciones */
}

    /* Efecto cuando pasas el mouse por encima (Hover) */
    .nav-button:hover {
        color: #ffffff; /* El texto se ilumina a blanco puro */
        background-color: rgba(255, 255, 255, 0.05); /* Un sutil fondo brillante */
        padding-left: 20px; /* Un pequeño efecto de desplazamiento hacia la derecha */
    }

    /* Estilo para la pestaña que está activa actualmente (.active) */
    .nav-button.active {
        color: #ffffff; /* Texto blanco brillante */
        font-weight: 600; /* Texto un poco más grueso */
        /* Un fondo degradado que combina con los colores azul/morado de tu logo */
        background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
        box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3); /* Sombra sutil de neón */
    }
/* Estilo limpio para el enlace de volver */
.store-link {
    display: inline-block;
    color: #4b5563; /* Un gris oscuro elegante en lugar de azul/morado */
    text-decoration: none; /* ¡ADIÓS AL SUBRAYADO FEO! */
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 12px;
    transition: all 0.2s ease-in-out; /* Animación suave */
    position: relative; /* Para el truco de la línea moderna abajo */
}

    /* Efecto cuando pasan el mouse o lo presionan */
    .store-link:hover, .store-link:focus {
        color: var(--color-marca, #10b981); /* Se ilumina con tu color de marca dinámico */
    }

    /* OPCIONAL: Si quieres un subrayado sutil, moderno y estético SOLO cuando pasas el mouse */
    .store-link::after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 4px;
        left: 0;
        background-color: var(--color-marca, #10b981);
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
    }

    .store-link:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }