/**
 * CIMA Móvil — Paletas de tema (m.appcima.com)
 * Archivo  : app/movil/palettes.css
 * Función  : Las 4 paletas de color del móvil + modo automático. SIN wallpaper, SIN glass:
 *            fondos planos por tema. Aquí es el ÚNICO sitio donde se escriben colores
 *            literales; el resto de la app consume variables (regla de oro CIMA).
 *            Expone también los nombres LEGADOS de cima (--text-main, --glass-bg, …) para
 *            que los módulos que se vayan portando hereden la paleta sin tocar su CSS.
 * Autores  : CIMA Development Group
 * Copyright: © 2024–2026 CIMA Development Group. Todos los derechos reservados.
 */

:root {
    --radius: 16px;
    --radius-sm: 12px;
    --dock-h: 64px;
    --hdr-h: 56px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --tap: 44px;

    /* Colores de HOJA IMPRESA (documento.js): la hoja de un documento/récipe es SIEMPRE papel
       blanco con tinta oscura, igual en las 4 paletas — no son colores de UI, por eso viven aquí
       fijos en :root y no dentro de un bloque html[data-paleta]. */
    --paper: #ffffff;
    --ink: #111111;
}

/* ── Grafito (oscuro neutro; también es el modo AUTO cuando el sistema está oscuro) ── */
html[data-paleta="grafito"],
html[data-paleta="auto"] {
    color-scheme: dark;
    --bg: #0e1116;  --surface: #161b22;  --surface-2: #1d2430;  --line: #273040;
    --text: #e7edf5; --muted: #8b98ab;
    --primary: #3fa9ff; --primary-ink: #04121f; --accent: #63f79a; --danger: #ff6b7a; --warn: #f7c14f;
}

/* ── Claro (también es el modo AUTO cuando el sistema está claro) ── */
/* «Claro» se retiró (redundante con Landing): quien lo tenía pasa a Landing (shell.js PALETA_MIGRA). */
@media (prefers-color-scheme: light) {
    html[data-paleta="auto"] {
        color-scheme: light;
        --bg: #eef1f6;  --surface: #ffffff;  --surface-2: #f3f6fb;  --line: #dbe2ec;
        --text: #141a22; --muted: #5c6b7e;
        --primary: #1f6feb; --primary-ink: #ffffff; --accent: #0ea371; --danger: #d83a4a; --warn: #b7791f;
    }
}

/* ── Océano ── */
html[data-paleta="oceano"] {
    color-scheme: dark;
    --bg: #0a1622;  --surface: #0f2233;  --surface-2: #143046;  --line: #1e4055;
    --text: #e4f2fb; --muted: #83a6bd;
    --primary: #22c3d6; --primary-ink: #042027; --accent: #5ad1a6; --danger: #ff7a8a; --warn: #f2c65b;
}

/* ── Violeta ── */
html[data-paleta="violeta"] {
    color-scheme: dark;
    --bg: #120e1c;  --surface: #1b1530;  --surface-2: #241a40;  --line: #332752;
    --text: #efe9fb; --muted: #a294c2;
    --primary: #a06bff; --primary-ink: #0f0820; --accent: #f7b955; --danger: #ff6b8f; --warn: #f7b955;
}

/* ── Derivados (iguales para todas las paletas; nacen de los tokens de arriba) ── */
html[data-paleta] {
    --mask: var(--bg); --mask: color-mix(in srgb, var(--bg) 62%, transparent);
    --shadow: 0 10px 28px var(--bg); --shadow: 0 10px 28px color-mix(in srgb, var(--bg) 70%, transparent);
    --shadow-fab: 0 8px 22px var(--primary); --shadow-fab: 0 8px 22px color-mix(in srgb, var(--primary) 50%, transparent);
    --tint-primary: transparent; --tint-primary: color-mix(in srgb, var(--primary) 18%, transparent);
    --tint-accent: transparent; --tint-accent: color-mix(in srgb, var(--accent) 20%, transparent);
    --tint-danger: transparent; --tint-danger: color-mix(in srgb, var(--danger) 16%, transparent);
    --focus: 0 0 0 3px transparent; --focus: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);

    /* ── Puente LEGADO cima → los módulos portados leen estas variables ── */
    --text-main: var(--text);
    --text-muted: var(--muted);
    --placeholder-color: var(--muted);
    --glass-opacity: 1;
    --glass-blur: 0px;
    --glass-bg: var(--surface);
    --surface-bg: var(--surface);
    --glass-border: var(--line);
    --input-bg: var(--surface-2);
    --input-border: var(--line);
    --btn-ghost-bg: var(--surface-2);
    --btn-ghost-hover: var(--surface-2);
    --chip-bg: var(--surface-2);
    --chip-active-bg: var(--tint-primary);
    --drawer-bg: var(--surface);
    --scrollbar-thumb: var(--line);
}

/* ══ de1112 — Esquemas de BASE móvil (mismos valores que sima/style/mobile.css), con los tokens
   de CIMA Móvil. Apariencia igual en las dos apps. ══ */
html[data-paleta="negro"] {
    color-scheme: dark;
    --bg: #000000; --surface: #111111; --surface-2: #161616; --line: #3a3a3a;
    --text: #ffffff; --muted: #c4c4c4;
    --primary: #2ee6ff; --primary-ink: #000000; --accent: #3dff8b; --danger: #ff5c5c; --warn: #ffc23d;
}
html[data-paleta="navy"] {
    color-scheme: dark;
    --bg: #061a33; --surface: #0b2647; --surface-2: #0e2d54; --line: #1c3c63;
    --text: #e8f1fb; --muted: #8ea8c4;
    --primary: #00afc2; --primary-ink: #04203f; --accent: #2fc58f; --danger: #ff6b6b; --warn: #f0a63a;
}
html[data-paleta="landing"] {
    color-scheme: light;
    --bg: #f7fafd; --surface: #ffffff; --surface-2: #edf2f8; --line: #d9e3ee;
    --text: #0a2540; --muted: #5b6b80;
    --primary: #04346c; --primary-ink: #ffffff; --accent: #0098aa; --danger: #d93a3a; --warn: #c97a0a;
}
html[data-paleta="matrix"] {
    color-scheme: dark;
    --bg: #000a02; --surface: #04140a; --surface-2: #072012; --line: #0f3a1e;
    --text: #d7ffe0; --muted: #6fbf86;
    --primary: #00ff41; --primary-ink: #001a08; --accent: #3dffb4; --danger: #ff4d4d; --warn: #e6ff3d;
}


/* Medianoche: oscuro con acentos amarillos (los del dock 4 elegido por Miguel). */
html[data-paleta="medianoche"] {
    color-scheme: dark;
    --bg: #0b0f1a; --surface: #141a28; --surface-2: #1d2333; --line: #2a3247;
    --text: #f3f5fa; --muted: #8f99ad;
    --primary: #ffc23d; --primary-ink: #1a1200; --accent: #ffb020; --danger: #ff6b6b; --warn: #ffc23d;
}
/* Franja de la barra de estado en esquemas claros (iOS deja hora y batería en blanco). */
:root { --status-strip: #04346c; }

/* ══ de1112 — Token del brillo de Guardar: MORADO por paleta; si el tema ya es morado (Violeta),
   el color del texto. shell.js comprueba además el contraste y el parecido con el principal. ══ */
html[data-paleta="grafito"], html[data-paleta="auto"], html[data-paleta="navy"] { --save-glow: #a78bfa; }
html[data-paleta="landing"] { --save-glow: #7c3aed; }
@media (prefers-color-scheme: light) { html[data-paleta="auto"] { --save-glow: #7c3aed; } }
html[data-paleta="oceano"] { --save-glow: #b794f6; }
html[data-paleta="violeta"] { --save-glow: var(--text); }
html[data-paleta="negro"] { --save-glow: #b388ff; }
html[data-paleta="matrix"] { --save-glow: #c084fc; }
html[data-paleta="medianoche"] { --save-glow: #b388ff; }

/* ══ de1112 — Candado ORIGINAL de os.appcima.com (adapter.js, valores que eligió Miguel con la
   maqueta cima-docs-candado-opacidad): vidrio oscuro sin blur, rojo/verde saturados, texto pleno.
   Transversal a propósito (igual en todos los temas, como en os). ══ */
:root {
    --lock-track-bg: rgba(20, 20, 26, .38); --lock-track-line: rgba(255, 255, 255, .14);
    --lock-knob-bg: rgba(20, 20, 26, .18); --lock-knob-line: rgba(255, 255, 255, .18);
    --lock-fg: #f1f1f4; --lock-red: #ef4444; --lock-green: #22c55e;
}