/* =====================================================================
   SKY.CSS -- variables de color y overrides propios del skin Sky
   (paleta moderna: piedra azulada / grafito / azul cielo, con acento coral), para sus dos modos (claro/oscuro). Misma estructura que Choco
   (escala de tonos --tone-50..900 y --brand-100..800, degradados finos,
   superficies escalonadas), cambiando solo el matiz: los colores se han
   derivado conservando la LUMINANCIA de Choco, así que los contrastes
   (texto/superficie, tinta de botón, estados) son los mismos.
   Se carga antes que timeclock.css/labor.css/etc. de esta misma carpeta.
   ===================================================================== */

/* Giro de matiz y color de los fondos oscuros para los diseños 2 y 3 de
   Fichajes (subskins/2-*.css, 3-*.css): sus beiges/dorados se desplazan
   hacia el matiz del skin. Choco y Green lo definen en su bloque --tc-*. */
[data-skin='sky'] {
    --tc-dh: 149;
    --tc-wc: 1;
}

:root,
[data-skin='sky'][data-mode='light'] {
    color-scheme: light;

    /* Escala base de neutros muy desaturados con el matiz del skin. 50 = más claro. */
    --tone-50: #fbfaf8;
    --tone-100: #f1eeea;
    --tone-150: #e8e4de;
    --tone-200: #dad5cc;
    --tone-300: #c5beb2;
    --tone-400: #a39a8b;
    --tone-500: #7f7769;
    --tone-600: #5f5951;
    --tone-700: #46423c;
    --tone-800: #2f2c28;
    --tone-900: #1d1b19;
    /* Escala de marca del skin (viva en el centro, apagada en los extremos). */
    --brand-100: #e1eaf4;
    --brand-200: #bad2ed;
    --brand-300: #84b2e8;
    --brand-400: #4d95e7;
    --brand-500: #1e62af;
    --brand-600: #185192;
    --brand-700: #134277;
    --brand-800: #0d2d51;
    /* Acento secundario para detalles y estados informativos (contrasta con la marca). */
    --accent: #c2410c;
    --accent-soft: #fbe3d6;

    --bg: var(--tone-100);
    --surface: var(--tone-50);
    --surface-soft: var(--tone-150);
    --surface-elevated: #ffffff;
    --border: var(--tone-200);
    --border-strong: var(--tone-400);
    --text: var(--tone-900);
    --text-soft: var(--tone-600);
    --primary: var(--brand-500);
    --primary-dark: var(--brand-700);
    --danger: #b4163f;
    --danger-dark: #920f31;
    --success: #1d7a45;
    --success-dark: #155d34;
    --success-soft: #e3f3e8;
    --success-soft-strong: #c9e8d4;
    --danger-soft: #d92550;
    --warning: #9a5a00;
    --warning-soft: rgba(201, 124, 10, 0.16);
    --warning-border: rgba(160, 90, 0, 0.32);
    --schedule-request: #0f766e;
    --schedule-request-dark: #115e56;
    --fichaje-request: #7c3aed;
    --fichaje-request-dark: #6524c9;
    --surface-hover: var(--tone-150);
    --shadow: 0 22px 48px rgba(40, 28, 20, 0.18);
    --shadow-soft: 0 10px 26px rgba(40, 28, 20, 0.10), 0 1px 2px rgba(40, 28, 20, 0.07);
    --radius: 4px;
    --radius-lg: 4px;
    /* Fondo de página: velo de marca arriba + degradado de 4 paradas muy
       cercanas entre sí para que no se noten bandas. */
    --body-bg-gradient: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(30, 98, 175, 0.07) 0%, rgba(30, 98, 175, 0) 70%),
        linear-gradient(180deg, #f8f6f3 0%, #f1eeea 40%, #e9e5df 75%, #e0dbd3 100%);
    --topbar-gradient: linear-gradient(100deg, #191c21 0%, #162d47 34%, #1b4e87 68%, #1e62af 100%);
    /* Degradados finos para superficies (arriba un punto más claro que
       abajo, como luz cenital). Misma gama que --surface/--surface-soft. */
    --surface-gradient: linear-gradient(180deg, #ffffff 0%, var(--tone-50) 50%, #f6f3ef 100%);
    --surface-soft-gradient: linear-gradient(180deg, var(--tone-100) 0%, var(--tone-150) 100%);
    --edge-highlight: rgba(255, 255, 255, 0.9);
    --hero-gradient: linear-gradient(125deg, #1e62af 0%, #1b5698 28%, #173e6a 55%, #13253a 80%, #15181d 100%);
    --brand-fill-gradient: linear-gradient(135deg, #134277 0%, #1e62af 100%);
    --input-bg: #fdfcfa;
    --input-bg-disabled: var(--tone-150);
    --input-bg-focus: #ffffff;
    --sidebar-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(241, 238, 234, 0.97) 100%);
    --sidebar-link-bg: linear-gradient(180deg, #fdfcfa 0%, #f1eeea 100%);
    --sidebar-link-hover-bg: linear-gradient(180deg, #f8f2ec 0%, #e8e1d8 100%);
    --sidebar-link-border: var(--tone-200);
    --modal-header-bg: linear-gradient(180deg, #fdfcfa 0%, #efebe5 100%);
    --modal-footer-bg: linear-gradient(180deg, #f4f1ed 0%, #ebe7e1 100%);
    --modal-border: var(--tone-200);
    --modal-backdrop: rgba(29, 27, 25, 0.55);
    /* Sky = skin "compacto nivel extremo" a petición explícita: escala de
       espaciado por debajo incluso de la base (12/16/24), no por encima como
       tenía antes (14/20/28). */
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 16px;
    /* Aquí primary/success/danger son suficientemente oscuros: blanco encima da >=5:1, bien. */
    --button-primary-ink: #ffffff;
    --button-success-ink: #fff;
    --button-danger-ink: #fff;
    /* Pares tinte+ink (texto sobre fondo teñido) con contraste >= 7:1. */
    --success-soft-ink: #14602f;
    --warning-soft-ink: #704200;
    --danger-soft-tint: #fbe3ea;
    --danger-soft-ink: #920f31;
    --info-soft-tint: var(--brand-100);
    --info-soft-ink: var(--brand-700);
    --info-border: rgba(19, 66, 119, 0.28);
    --hold-fill-color: var(--text);
    /* Botones tipo pestaña (Personal/Laboral/Config/Turnos/Fichajes/
       Ausencias/Firma y otros en el resto de la app) usan
       var(--text-muted, #5f758e) -- sin esta variable definida, siempre
       caían en ese gris fijo igual en claro y oscuro, con mal contraste en
       ambos (bug real reportado). Se ata a --text-soft, que sí varía por
       modo/skin con contraste correcto. */
    --text-muted: var(--text-soft);
}

/* ---- Sky oscuro: grafito con capas escalonadas. ----
   4 niveles de elevación distinguibles (bg < surface < soft < elevated,
   ~+3% de luminosidad cada uno), bordes que se ven sin gritar, texto
   principal casi blanco (>=12:1), secundario >=7:1 y coral que da >=5,3:1
   sobre cualquier superficie. Los colores de estado comparten luminosidad
   entre sí para que ninguno "chille" más que otro. */
[data-skin='sky'][data-mode='dark'] {
    color-scheme: dark;

    --tone-50: #f1efec;
    --tone-100: #dcd9d3;
    --tone-150: #bdb9b2;
    --tone-200: #9a968f;
    --tone-300: #77746f;
    --tone-400: #575a61;
    --tone-500: #3f4249;
    --tone-600: #2e3036;
    --tone-700: #24262b;
    --tone-800: #1b1c20;
    --tone-900: #121316;
    --brand-100: #d4e2f1;
    --brand-200: #acc9eb;
    --brand-300: #88b5e8;
    --brand-400: #609fe7;
    --brand-500: #3a84d8;
    --brand-600: #2f67a6;
    --brand-700: #234b7a;
    --brand-800: #152d49;
    --accent: #f0795c;
    --accent-soft: rgba(240, 121, 92, 0.16);

    --bg: #0f1012;
    --surface: #17181b;
    --surface-soft: #1e2024;
    --surface-elevated: #26282d;
    --border: #32353b;
    --border-strong: #50545c;
    --text: var(--tone-50);
    --text-soft: #bdb9b2;
    --primary: var(--brand-400);
    --primary-dark: var(--brand-300);
    --danger: #ef8a96;
    --danger-dark: #f5aab3;
    --success: #7fcf9f;
    --success-dark: #a0e0b9;
    --success-soft: rgba(127, 207, 159, 0.14);
    --success-soft-strong: rgba(127, 207, 159, 0.24);
    --danger-soft: #f0a0a9;
    --warning: #e3b45f;
    --warning-soft: rgba(227, 180, 95, 0.18);
    --warning-border: rgba(227, 180, 95, 0.36);
    --schedule-request: #58bdb6;
    --schedule-request-dark: #85d3ce;
    --fichaje-request: #b3a6df;
    --fichaje-request-dark: #cbc1ea;
    --surface-hover: #2c2e34;
    --shadow: 0 24px 52px rgba(0, 0, 0, 0.6);
    --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.45);
    --radius: 4px;
    --radius-lg: 4px;
    --body-bg-gradient: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(96, 159, 231, 0.08) 0%, rgba(96, 159, 231, 0) 70%),
        linear-gradient(180deg, #16171a 0%, #111214 40%, #0e0f11 75%, #0a0b0c 100%);
    --topbar-gradient: linear-gradient(100deg, #0e1115 0%, #111b27 34%, #193351 70%, #224b7a 100%);
    --surface-gradient: linear-gradient(180deg, #1d1f23 0%, #17181b 55%, #131417 100%);
    --surface-soft-gradient: linear-gradient(180deg, #24262b 0%, #1e2024 100%);
    --edge-highlight: rgba(255, 255, 255, 0.06);
    --hero-gradient: linear-gradient(125deg, #1f3f64 0%, #173352 28%, #102135 58%, #0b131b 82%, #0a0a0b 100%);
    --brand-fill-gradient: linear-gradient(135deg, #183658 0%, #265385 100%);
    --input-bg: #1e2024;
    --input-bg-disabled: #131417;
    --input-bg-focus: #26282d;
    --sidebar-surface: linear-gradient(180deg, rgba(27, 28, 32, 0.97) 0%, rgba(18, 19, 22, 0.97) 100%);
    --sidebar-link-bg: linear-gradient(180deg, #25272c 0%, #1e2024 100%);
    --sidebar-link-hover-bg: linear-gradient(180deg, #2f3238 0%, #26282d 100%);
    --sidebar-link-border: #32353b;
    --modal-header-bg: linear-gradient(180deg, #2d2f35 0%, #222428 100%);
    --modal-footer-bg: linear-gradient(180deg, #222428 0%, #1b1c20 100%);
    --modal-border: #32353b;
    --modal-backdrop: rgba(0, 0, 0, 0.72);
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 16px;
    /* primary/success/danger son claros (para leerse como TEXTO sobre fondo
       oscuro): como fondo de botón necesitan tinta oscura (contraste 6-9:1). */
    --button-primary-ink: #09111a;
    --button-success-ink: #0d2214;
    --button-danger-ink: #2a0c12;
    --success-soft-ink: #a0e0b9;
    --warning-soft-ink: #ecc77f;
    --danger-soft-tint: #3b2127;
    --danger-soft-ink: #f5aab3;
    --info-soft-tint: #17222d;
    --info-soft-ink: var(--brand-300);
    --info-border: rgba(136, 181, 232, 0.32);
    --hold-fill-color: var(--text);
    --text-muted: var(--text-soft);
}

/* ============================================================
 * Superficies con degradado fino (solo Sky). base.css pinta paneles,
 * botones secundarios y enlaces de menú con color plano; aquí se les pone
 * el degradado + un filo de luz de 1px arriba (--edge-highlight) que da
 * sensación de volumen sin añadir sombras duras. Usan :where() para tener
 * la MISMA especificidad que base.css y que los CSS de módulo (que se cargan
 * después y ganan): si no, tapaban fondos propios como el de .welcome-hero. Los degradados salen de
 * variables, así que cambian solos con el modo.
 * ============================================================ */
:where([data-skin='sky']) .panel {
    background: var(--surface-gradient);
    box-shadow: var(--shadow-soft), inset 0 1px 0 var(--edge-highlight);
}

:where([data-skin='sky']) .button--secondary {
    background: var(--surface-soft-gradient);
    box-shadow: var(--shadow-soft), inset 0 1px 0 var(--edge-highlight);
}

:where([data-skin='sky']) .button--secondary:hover {
    background: var(--surface-hover);
}

:where([data-skin='sky']) .app-sidebar__panel {
    box-shadow: var(--shadow-soft), inset 0 1px 0 var(--edge-highlight);
}

:where([data-skin='sky']) .input:focus,
:where([data-skin='sky']) .input:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* En modo oscuro, cualquier .app-icon suelto (fuera de un botón de color ya
   invertido por sus propias clases) vive casi siempre sobre un fondo oscuro
   y se veía invisible hasta refrescar la página -- bug real reportado ("al
   pasar de claro a oscuro los iconos no contrastan"). Se invierte por
   defecto en dark; los casos que necesiten quedarse en negro pueden seguir
   usando filter:none explícito como hace .button--secondary. */
[data-mode='dark'] .app-icon:not(.button--primary .app-icon):not(.button--success .app-icon):not(.button--danger .app-icon):not(.button--icon-dark .app-icon):not(.button--secondary .app-icon) {
    filter: brightness(0) invert(1);
}

/* Sky (sky) se basa en Choco y Green, y comparte la densidad "compacto
   nivel extremo" de Choco: mismos overrides de tamaño de controles. */
[data-skin='sky'] .button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.8rem;
}

[data-skin='sky'] .button--small {
    min-height: 26px;
    padding: 0 8px;
}

[data-skin='sky'] .input {
    min-height: 34px;
    padding: 7px 10px;
}

[data-skin='sky'] .history-filter .input {
    min-height: 30px;
}