/* Garden Shop: superficies y estados compartidos por tienda, cuenta y administración. */
html {
    --garden-accent: color-mix(in srgb, var(--primario, #0e8f51) 86%, #000);
    --garden-selected: color-mix(in srgb, var(--primario, #0e8f51) 12%, transparent);
    --garden-focus: color-mix(in srgb, var(--primario, #0e8f51) 24%, transparent);
    --garden-success: #176b40;
    --garden-error: #ad253c;
    --garden-warning: #815707;
}
html[data-tema="oscuro"] {
    --garden-accent: color-mix(in srgb, var(--primario, #0e8f51) 52%, white);
    --garden-selected: color-mix(in srgb, var(--primario, #0e8f51) 23%, transparent);
    --garden-success: #8cdeb1;
    --garden-error: #ffafbb;
    --garden-warning: #f4d48e;
}
body {
    --enlace-acento: var(--garden-accent);
    --violeta: var(--primario);
    --acento: var(--garden-accent);
}
html[data-tema] :is(input, select, textarea, button, a):focus-visible {
    outline: 2px solid var(--garden-accent);
    outline-offset: 3px;
}
html[data-tema] :is(.campo input, .campo select, .campo textarea, .formulario input, .formulario select, .formulario textarea):focus {
    border-color: var(--primario);
    box-shadow: 0 0 0 3px var(--garden-focus);
}
html[data-tema] .auth-wrap {
    background: radial-gradient(circle at 30% 30%, var(--garden-selected), transparent 55%), var(--fondo);
}
html[data-tema] :is(.auth-card, .panel, .perfil-menu, .perfil-desplegable, dialog) {
    background: var(--panel);
    color: var(--texto);
    border-color: var(--borde);
}
html[data-tema] :is(.campo input, .campo select, .campo textarea, .telefono-compuesto, .selector-pais, .pago-opcion, .pago-metodo, .selector-cantidad) {
    background: var(--panel);
    color: var(--texto);
    border-color: var(--borde);
}
html[data-tema] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
html[data-tema] :is(.creditos, .historial-cabecera > strong, .precio.oferta, .campo-documento button, .perfil-panel .etiqueta) { color: var(--garden-accent); }
html[data-tema] .ganar-creditos {
    background: linear-gradient(125deg, var(--primario), color-mix(in srgb, var(--primario) 70%, #123c20));
    color: var(--texto-sobre-primario, #fff);
    box-shadow: 0 10px 28px var(--garden-focus);
}
html[data-tema] :is(.perfil-nav a, .cliente-nav a, .perfil-pestanas button, .perfil-pestanas a, .pestanas button, .pestanas a) {
    color: var(--texto);
    background: var(--panel);
    border-color: var(--borde);
}
html[data-tema] :is(.perfil-nav a.activo, .cliente-nav a.activo, .perfil-pestanas .activa, .pestanas .activa, .pestanas .activo) {
    color: var(--garden-accent);
    background: var(--garden-selected);
    border-color: var(--primario);
}
html[data-tema] :is(.estado, .estado-cuenta) {
    color: var(--garden-accent);
    background: var(--garden-selected);
    border-color: var(--garden-focus);
}
html[data-tema] :is(.credito-positivo, .texto-exito, [data-documento-estado][data-estado="correcto"]) { color: var(--garden-success); }
html[data-tema] :is(.credito-negativo, .error-resumen, .aviso-checkout, [data-documento-estado][data-estado="error"]) { color: var(--garden-error); }
html[data-tema] :is(.tabla th, .tabla td) { color: var(--texto); border-color: var(--borde); }
html[data-tema] :is(.tabla th, .ayuda, .pago-opcion small, .pago-metodo small, .tabla td small) { color: var(--muted); }
html[data-tema] :is(.boton.secundario, .boton.fantasma, .selector-cantidad button, .selector-cantidad input) { color: var(--texto); }
html[data-tema] .perfil-desplegable :is(a, button):hover { background: var(--garden-selected); color: var(--garden-accent); }
html ::selection { background: var(--garden-focus); color: var(--texto); }