/* =========================================================
   AI2GO QR STUDIO — SISTEMA DE TEMAS
   Paleta:
   Rojo:       #ED1C24
   Azul:       #2B8DFF
   Azul claro: #7FD0FF
   Oscuro:     #101318
   ========================================================= */

:root {
    color-scheme: light;

    --primary: #2B8DFF;
    --primary-dark: #1672D8;
    --primary-soft: rgba(43, 141, 255, 0.12);

    --secondary: #7FD0FF;
    --secondary-soft: rgba(127, 208, 255, 0.18);

    --accent: #ED1C24;
    --accent-dark: #C9151C;
    --accent-soft: rgba(237, 28, 36, 0.10);

    --background: #F3F7FB;
    --surface: #FFFFFF;
    --surface-2: #EEF5FB;
    --surface-3: #E3EDF6;

    --text: #101318;
    --text-strong: #080B0F;
    --muted: #637487;

    --border: #D5E2ED;
    --border-strong: #BCD0E0;

    --input-background: #FFFFFF;
    --header-background: rgba(255, 255, 255, 0.94);

    --success: #087A57;
    --success-bg: #E7F8F1;

    --warning: #9A6700;
    --warning-bg: #FFF7DB;

    --danger: #D51D26;
    --danger-bg: #FFF0F1;

    --focus-ring: rgba(43, 141, 255, 0.18);

    --shadow:
        0 18px 45px rgba(16, 19, 24, 0.08);

    --shadow-small:
        0 8px 22px rgba(16, 19, 24, 0.07);

    --brand-gradient:
        linear-gradient(
            135deg,
            #2B8DFF 0%,
            #1672D8 72%,
            #ED1C24 145%
        );
}

html[data-theme="dark"] {
    color-scheme: dark;

    --primary: #4A9DFF;
    --primary-dark: #2B8DFF;
    --primary-soft: rgba(74, 157, 255, 0.16);

    --secondary: #7FD0FF;
    --secondary-soft: rgba(127, 208, 255, 0.13);

    --accent: #FF3C44;
    --accent-dark: #ED1C24;
    --accent-soft: rgba(255, 60, 68, 0.14);

    --background: #090D12;
    --surface: #101318;
    --surface-2: #151B23;
    --surface-3: #1B2530;

    --text: #EDF7FF;
    --text-strong: #FFFFFF;
    --muted: #9CB0C2;

    --border: #293644;
    --border-strong: #3B4C5D;

    --input-background: #0D1218;
    --header-background: rgba(16, 19, 24, 0.94);

    --success: #52D6A3;
    --success-bg: rgba(29, 150, 105, 0.15);

    --warning: #F7C75A;
    --warning-bg: rgba(247, 199, 90, 0.13);

    --danger: #FF6970;
    --danger-bg: rgba(237, 28, 36, 0.14);

    --focus-ring: rgba(74, 157, 255, 0.24);

    --shadow:
        0 22px 55px rgba(0, 0, 0, 0.34);

    --shadow-small:
        0 10px 26px rgba(0, 0, 0, 0.28);

    --brand-gradient:
        linear-gradient(
            135deg,
            #2B8DFF 0%,
            #4A9DFF 66%,
            #ED1C24 150%
        );
}


/* =========================================================
   BASE
   ========================================================= */

html {
    background: var(--background);
}

body {
    background:
        radial-gradient(
            circle at 8% 0%,
            var(--primary-soft),
            transparent 430px
        ),
        radial-gradient(
            circle at 96% 14%,
            var(--accent-soft),
            transparent 390px
        ),
        var(--background);

    color: var(--text);

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

body,
.header,
.panel,
.qr-type-button,
input,
select,
textarea,
button,
.logo-preview-container,
.checkbox-control,
.design-checkbox,
.style-option > span,
.selected-type-summary,
.preview-area,
.privacy-note {
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.header {
    background: var(--header-background);
    border-bottom-color: var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.header-content {
    gap: 24px;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.system-status {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
}

.system-status span {
    background: var(--success);
    box-shadow: 0 0 0 4px var(--success-bg);
}

.brand-product {
    border-left-color: var(--border);
}

.brand-product strong {
    color: var(--text-strong);
}

.brand-product span {
    color: var(--muted);
}


/* =========================================================
   BOTÓN DE TEMA
   ========================================================= */

.theme-toggle {
    min-height: 42px;
    padding: 0 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface);
    color: var(--text);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: var(--shadow-small);
}

.theme-toggle:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.theme-toggle-symbol {
    width: 21px;
    height: 21px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--primary-soft);
    color: var(--primary);

    font-size: 15px;
    line-height: 1;
}

.theme-toggle-symbol::before {
    content: "☾";
}

html[data-theme="dark"] .theme-toggle-symbol {
    background: var(--accent-soft);
    color: var(--accent);
}

html[data-theme="dark"] .theme-toggle-symbol::before {
    content: "☀";
}


/* =========================================================
   TEXTOS Y PRESENTACIÓN
   ========================================================= */

.presentation h1,
.section-title h2,
.preview-title h2,
.style-section h3 {
    color: var(--text-strong);
}

.presentation p,
.section-title p,
.preview-title span,
.field-helper,
.empty-preview p,
.privacy-note p {
    color: var(--muted);
}

.tag {
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid rgba(43, 141, 255, 0.24);
}


/* =========================================================
   PANELES
   ========================================================= */

.panel {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.section-title > span {
    background: var(--brand-gradient);
    color: #FFFFFF;
}

.selected-type-summary,
.privacy-note {
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.selected-type-summary span {
    color: var(--muted);
}

.selected-type-summary strong {
    color: var(--primary);
}


/* =========================================================
   TIPOS DE QR
   ========================================================= */

.qr-type-button {
    border-color: var(--border);
    background: var(--surface);
    color: var(--muted);
}

.qr-type-button:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

.qr-type-button.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

.field label {
    color: var(--text);
}

.field input,
.field textarea,
.field select,
.dynamic-fields input,
.dynamic-fields textarea,
.dynamic-fields select,
.color-field input[type="text"] {
    border-color: var(--border);
    background: var(--input-background);
    color: var(--text);
}

.field input::placeholder,
.field textarea::placeholder,
.dynamic-fields input::placeholder,
.dynamic-fields textarea::placeholder {
    color: var(--muted);
    opacity: 0.75;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.dynamic-fields input:focus,
.dynamic-fields textarea:focus,
.dynamic-fields select:focus,
.color-field input[type="text"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus-ring);
    outline: none;
}

select option {
    background: var(--surface);
    color: var(--text);
}

input[type="range"] {
    accent-color: var(--primary);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
}

.color-field {
    border-color: var(--border);
}


/* =========================================================
   LOGOTIPO
   ========================================================= */

.logo-preview-container {
    border-color: var(--border-strong);
    background:
        linear-gradient(
            45deg,
            var(--surface-2) 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            var(--surface-2) 25%,
            transparent 25%
        ),
        linear-gradient(
            45deg,
            transparent 75%,
            var(--surface-2) 75%
        ),
        linear-gradient(
            -45deg,
            transparent 75%,
            var(--surface-2) 75%
        ),
        var(--surface);

    background-size: 18px 18px;
    background-position:
        0 0,
        0 9px,
        9px -9px,
        -9px 0;
}

.logo-upload-button {
    background: var(--brand-gradient);
    color: #FFFFFF;
}

.logo-upload-button:hover {
    filter: brightness(1.06);
}

.secondary-small-button {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.secondary-small-button:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.checkbox-control,
.design-checkbox {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--muted);
}


/* =========================================================
   PERSONALIZACIÓN DE FORMAS
   ========================================================= */

.style-option > span {
    border-color: var(--border);
    background: var(--surface);
    color: var(--muted);
}

.style-option > span:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

.style-option input:checked + span {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.style-option b {
    background: var(--text-strong);
}

.shape-dots {
    box-shadow:
        19px 0 0 -7px var(--text-strong),
        0 19px 0 -7px var(--text-strong),
        19px 19px 0 -7px var(--text-strong);
}

.eye-frame-square,
.eye-frame-rounded {
    border-color: var(--text-strong);
    background: transparent !important;
}


/* =========================================================
   VISTA PREVIA
   ========================================================= */

.preview-area {
    border-color: var(--border);
    background: var(--surface-2);
}

.empty-preview {
    color: var(--muted);
}

.empty-preview strong {
    color: var(--text);
}

.qr-placeholder {
    border-color: var(--border-strong);
    background: var(--surface);
}

.qr-placeholder span {
    border-color: var(--primary);
}

#qr-preview {
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: var(--shadow-small);
}


/* =========================================================
   BOTONES PRINCIPALES
   ========================================================= */

.primary-button,
.download-button:not(.disabled) {
    border-color: transparent;
    background: var(--brand-gradient);
    color: #FFFFFF;
    box-shadow:
        0 10px 24px rgba(43, 141, 255, 0.24);
}

.primary-button:hover:not(:disabled),
.download-button:not(.disabled):hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.primary-button:focus-visible,
.download-button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.download-button.disabled {
    border-color: var(--border);
    background: var(--surface-3);
    color: var(--muted);
}


/* =========================================================
   MENSAJES
   ========================================================= */

.message.success {
    border: 1px solid rgba(8, 122, 87, 0.22);
    background: var(--success-bg);
    color: var(--success);
}

.message.error {
    border: 1px solid rgba(237, 28, 36, 0.25);
    background: var(--danger-bg);
    color: var(--danger);
}


/* =========================================================
   PIE DE PÁGINA
   ========================================================= */

footer,
.brand-footer {
    border-top-color: var(--border);
    background: transparent;
    color: var(--muted);
}


/* =========================================================
   SELECCIÓN Y BARRA DE DESPLAZAMIENTO
   ========================================================= */

::selection {
    background: var(--primary);
    color: #FFFFFF;
}

* {
    scrollbar-color:
        var(--border-strong)
        var(--surface-2);
}

*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

*::-webkit-scrollbar-track {
    background: var(--surface-2);
}

*::-webkit-scrollbar-thumb {
    border: 3px solid var(--surface-2);
    border-radius: 999px;
    background: var(--border-strong);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {
    .header-actions {
        gap: 8px;
    }

    .theme-toggle {
        width: 42px;
        padding: 0;
    }

    .theme-toggle-label {
        display: none;
    }
}

@media (max-width: 520px) {
    .system-status {
        display: none;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}