/* PHN kit-temas: contrato de tokens (--phn-*). GENERADO por herramientas/generar-tokens.mjs desde tokens.json.
   Selectores combinables: [data-tema="phn|oceano|ambar|grafito|rosa|personalizado"] y [data-modo="claro|oscuro"].
   Sin JS: tema PHN claro, y oscuro si el sistema lo pide. Con tema.js: data-tema / data-modo se ponen en <html>. */

:root {
  --phn-bg: #F5F5F7;
  --phn-surface: #FFFFFF;
  --phn-surface-2: #F5F5F7;
  --phn-surface-nav: #FBFBFD;
  --phn-border: #E8E8ED;
  --phn-border-strong: #86868B;
  --phn-text: #1D1D1F;
  --phn-text-2: #6E6E73;
  --phn-text-3: #6E6E73;
  --phn-accent: #80BA26;
  --phn-on-accent: #FFFFFF;
  --phn-accent-text: #4F7D11;
  --phn-accent-soft: #EEF5DF;
  --phn-accent-soft-text: #1F5A1C;
  --phn-chart-1: #80BA26;
  --phn-chart-2: #3E9B34;
  --phn-chart-muted: #DCEFD0;
  --phn-ok-bg: #E9F5E1;
  --phn-ok-fg: #1F5A1C;
  --phn-warn-bg: #FFF4D6;
  --phn-warn-fg: #7A5A00;
  --phn-info-bg: #E5F1FF;
  --phn-info-fg: #0060C7;
  --phn-team-bg: #E3E8FF;
  --phn-team-fg: #3A46B0;
  --phn-danger-bg: #FFE5E3;
  --phn-danger-fg: #B3261E;
  --phn-neutral-bg: #F0F0F3;
  --phn-neutral-fg: #5F5F64;
  --phn-danger-solid: #B3261E;
  --phn-on-danger: #FFFFFF;
  --phn-focus: #4F7D11;
  --phn-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  --phn-radius-card: 22px;
  --phn-radius-field: 12px;
  --phn-radius-pill: 999px;
  --phn-space: 1;
  --phn-font-scale: 1;
  --phn-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --phn-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: light;
}

/* Plataforma proher.app: sin JS queda en claro (Aron, 2026-11-04). El oscuro solo con data-modo="oscuro". */

/* PHN */
:root[data-tema="phn"], [data-tema="phn"] {
  --phn-bg: #F5F5F7;
  --phn-surface: #FFFFFF;
  --phn-surface-2: #F5F5F7;
  --phn-surface-nav: #FBFBFD;
  --phn-border: #E8E8ED;
  --phn-border-strong: #86868B;
  --phn-text: #1D1D1F;
  --phn-text-2: #6E6E73;
  --phn-text-3: #6E6E73;
  --phn-accent: #80BA26;
  --phn-on-accent: #FFFFFF;
  --phn-accent-text: #4F7D11;
  --phn-accent-soft: #EEF5DF;
  --phn-accent-soft-text: #1F5A1C;
  --phn-chart-1: #80BA26;
  --phn-chart-2: #3E9B34;
  --phn-chart-muted: #DCEFD0;
  --phn-ok-bg: #E9F5E1;
  --phn-ok-fg: #1F5A1C;
  --phn-warn-bg: #FFF4D6;
  --phn-warn-fg: #7A5A00;
  --phn-info-bg: #E5F1FF;
  --phn-info-fg: #0060C7;
  --phn-team-bg: #E3E8FF;
  --phn-team-fg: #3A46B0;
  --phn-danger-bg: #FFE5E3;
  --phn-danger-fg: #B3261E;
  --phn-neutral-bg: #F0F0F3;
  --phn-neutral-fg: #5F5F64;
  --phn-danger-solid: #B3261E;
  --phn-on-danger: #FFFFFF;
  --phn-focus: #4F7D11;
  --phn-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  color-scheme: light;
}
:root[data-tema="phn"][data-modo="oscuro"], [data-tema="phn"][data-modo="oscuro"] {
  --phn-bg: #0E1410;
  --phn-surface: #151C17;
  --phn-surface-2: #1C251F;
  --phn-surface-nav: #111713;
  --phn-border: #263029;
  --phn-border-strong: #74857A;
  --phn-text: #EBF1EC;
  --phn-text-2: #A7B3AA;
  --phn-text-3: #94A199;
  --phn-accent: #80BA26;
  --phn-on-accent: #FFFFFF;
  --phn-accent-text: #A3DB7E;
  --phn-accent-soft: #1F3320;
  --phn-accent-soft-text: #BDE9A0;
  --phn-chart-1: #80BA26;
  --phn-chart-2: #4DA23F;
  --phn-chart-muted: #2A3A2B;
  --phn-ok-bg: #1B3320;
  --phn-ok-fg: #9FDC86;
  --phn-warn-bg: #3A2F10;
  --phn-warn-fg: #F2C95E;
  --phn-info-bg: #12304F;
  --phn-info-fg: #8EC5FF;
  --phn-team-bg: #262C57;
  --phn-team-fg: #B4BEFF;
  --phn-danger-bg: #4A1E1B;
  --phn-danger-fg: #FF9D95;
  --phn-neutral-bg: #262C28;
  --phn-neutral-fg: #B9C1BB;
  --phn-danger-solid: #F2776F;
  --phn-on-danger: #2A0604;
  --phn-focus: #A3DB7E;
  --phn-shadow-card: 0 0 0 1px var(--phn-border);
  color-scheme: dark;
}

/* Océano */
:root[data-tema="oceano"], [data-tema="oceano"] {
  --phn-bg: #F1F5F9;
  --phn-surface: #FFFFFF;
  --phn-surface-2: #F1F5F9;
  --phn-surface-nav: #FAFCFE;
  --phn-border: #E2E9F0;
  --phn-border-strong: #7F8FA0;
  --phn-text: #0F1B2A;
  --phn-text-2: #5B6B7C;
  --phn-text-3: #5B6B7C;
  --phn-accent: #4DA3F5;
  --phn-on-accent: #04203F;
  --phn-accent-text: #0B5CAD;
  --phn-accent-soft: #E3F0FD;
  --phn-accent-soft-text: #0A4F96;
  --phn-chart-1: #4DA3F5;
  --phn-chart-2: #1E6FC4;
  --phn-chart-muted: #D2E5F8;
  --phn-ok-bg: #E9F5E1;
  --phn-ok-fg: #1F5A1C;
  --phn-warn-bg: #FFF4D6;
  --phn-warn-fg: #7A5A00;
  --phn-info-bg: #E5F1FF;
  --phn-info-fg: #0060C7;
  --phn-team-bg: #E3E8FF;
  --phn-team-fg: #3A46B0;
  --phn-danger-bg: #FFE5E3;
  --phn-danger-fg: #B3261E;
  --phn-neutral-bg: #F0F0F3;
  --phn-neutral-fg: #5F5F64;
  --phn-danger-solid: #B3261E;
  --phn-on-danger: #FFFFFF;
  --phn-focus: #0B5CAD;
  --phn-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  color-scheme: light;
}
:root[data-tema="oceano"][data-modo="oscuro"], [data-tema="oceano"][data-modo="oscuro"] {
  --phn-bg: #0B1219;
  --phn-surface: #121B25;
  --phn-surface-2: #19242F;
  --phn-surface-nav: #0E161E;
  --phn-border: #233140;
  --phn-border-strong: #6A8196;
  --phn-text: #E8EFF6;
  --phn-text-2: #A5B4C3;
  --phn-text-3: #90A1B2;
  --phn-accent: #5BAEF7;
  --phn-on-accent: #04203F;
  --phn-accent-text: #8CC6FA;
  --phn-accent-soft: #15304D;
  --phn-accent-soft-text: #B3D8FB;
  --phn-chart-1: #5BAEF7;
  --phn-chart-2: #2F7FD0;
  --phn-chart-muted: #26384A;
  --phn-ok-bg: #1B3320;
  --phn-ok-fg: #9FDC86;
  --phn-warn-bg: #3A2F10;
  --phn-warn-fg: #F2C95E;
  --phn-info-bg: #12304F;
  --phn-info-fg: #8EC5FF;
  --phn-team-bg: #262C57;
  --phn-team-fg: #B4BEFF;
  --phn-danger-bg: #4A1E1B;
  --phn-danger-fg: #FF9D95;
  --phn-neutral-bg: #232D38;
  --phn-neutral-fg: #B7C2CE;
  --phn-danger-solid: #F2776F;
  --phn-on-danger: #2A0604;
  --phn-focus: #8CC6FA;
  --phn-shadow-card: 0 0 0 1px var(--phn-border);
  color-scheme: dark;
}

/* Ámbar */
:root[data-tema="ambar"], [data-tema="ambar"] {
  --phn-bg: #F8F5EE;
  --phn-surface: #FFFFFF;
  --phn-surface-2: #F8F5EE;
  --phn-surface-nav: #FCFAF5;
  --phn-border: #ECE5D6;
  --phn-border-strong: #857A66;
  --phn-text: #231E12;
  --phn-text-2: #6B6354;
  --phn-text-3: #6B6354;
  --phn-accent: #E3A92B;
  --phn-on-accent: #2E1E00;
  --phn-accent-text: #7A5200;
  --phn-accent-soft: #FBEFCF;
  --phn-accent-soft-text: #6B4700;
  --phn-chart-1: #E3A92B;
  --phn-chart-2: #A8741A;
  --phn-chart-muted: #F3E4BC;
  --phn-ok-bg: #E9F5E1;
  --phn-ok-fg: #1F5A1C;
  --phn-warn-bg: #FFF4D6;
  --phn-warn-fg: #7A5A00;
  --phn-info-bg: #E5F1FF;
  --phn-info-fg: #0060C7;
  --phn-team-bg: #E3E8FF;
  --phn-team-fg: #3A46B0;
  --phn-danger-bg: #FFE5E3;
  --phn-danger-fg: #B3261E;
  --phn-neutral-bg: #F0F0F3;
  --phn-neutral-fg: #5F5F64;
  --phn-danger-solid: #B3261E;
  --phn-on-danger: #FFFFFF;
  --phn-focus: #7A5200;
  --phn-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  color-scheme: light;
}
:root[data-tema="ambar"][data-modo="oscuro"], [data-tema="ambar"][data-modo="oscuro"] {
  --phn-bg: #14110B;
  --phn-surface: #1C1812;
  --phn-surface-2: #25201A;
  --phn-surface-nav: #17140E;
  --phn-border: #342D22;
  --phn-border-strong: #82745F;
  --phn-text: #F3EDE0;
  --phn-text-2: #BDB29C;
  --phn-text-3: #A89D88;
  --phn-accent: #EDB93D;
  --phn-on-accent: #2E1E00;
  --phn-accent-text: #F2C65F;
  --phn-accent-soft: #3A2E12;
  --phn-accent-soft-text: #F5D98B;
  --phn-chart-1: #EDB93D;
  --phn-chart-2: #B9852A;
  --phn-chart-muted: #3B3220;
  --phn-ok-bg: #1B3320;
  --phn-ok-fg: #9FDC86;
  --phn-warn-bg: #3A2F10;
  --phn-warn-fg: #F2C95E;
  --phn-info-bg: #12304F;
  --phn-info-fg: #8EC5FF;
  --phn-team-bg: #262C57;
  --phn-team-fg: #B4BEFF;
  --phn-danger-bg: #4A1E1B;
  --phn-danger-fg: #FF9D95;
  --phn-neutral-bg: #2E2A22;
  --phn-neutral-fg: #C2B9A6;
  --phn-danger-solid: #F2776F;
  --phn-on-danger: #2A0604;
  --phn-focus: #F2C65F;
  --phn-shadow-card: 0 0 0 1px var(--phn-border);
  color-scheme: dark;
}

/* Grafito */
:root[data-tema="grafito"], [data-tema="grafito"] {
  --phn-bg: #F2F2F3;
  --phn-surface: #FFFFFF;
  --phn-surface-2: #F2F2F3;
  --phn-surface-nav: #FAFAFA;
  --phn-border: #D4D4D8;
  --phn-border-strong: #6B6B70;
  --phn-text: #0B0B0C;
  --phn-text-2: #4A4A4F;
  --phn-text-3: #55555A;
  --phn-accent: #1D1D1F;
  --phn-on-accent: #FFFFFF;
  --phn-accent-text: #1D1D1F;
  --phn-accent-soft: #E6E6EA;
  --phn-accent-soft-text: #1D1D1F;
  --phn-chart-1: #2B2B2E;
  --phn-chart-2: #8A8A90;
  --phn-chart-muted: #D9D9DD;
  --phn-ok-bg: #E9F5E1;
  --phn-ok-fg: #1F5A1C;
  --phn-warn-bg: #FFF4D6;
  --phn-warn-fg: #7A5A00;
  --phn-info-bg: #E5F1FF;
  --phn-info-fg: #0060C7;
  --phn-team-bg: #E3E8FF;
  --phn-team-fg: #3A46B0;
  --phn-danger-bg: #FFE5E3;
  --phn-danger-fg: #B3261E;
  --phn-neutral-bg: #F0F0F3;
  --phn-neutral-fg: #5F5F64;
  --phn-danger-solid: #B3261E;
  --phn-on-danger: #FFFFFF;
  --phn-focus: #1D1D1F;
  --phn-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  color-scheme: light;
}
:root[data-tema="grafito"][data-modo="oscuro"], [data-tema="grafito"][data-modo="oscuro"] {
  --phn-bg: #0F0F10;
  --phn-surface: #171718;
  --phn-surface-2: #1F1F21;
  --phn-surface-nav: #121213;
  --phn-border: #333336;
  --phn-border-strong: #8A8A90;
  --phn-text: #F5F5F7;
  --phn-text-2: #B4B4BA;
  --phn-text-3: #A0A0A6;
  --phn-accent: #F2F2F4;
  --phn-on-accent: #111112;
  --phn-accent-text: #F2F2F4;
  --phn-accent-soft: #2A2A2D;
  --phn-accent-soft-text: #F2F2F4;
  --phn-chart-1: #F2F2F4;
  --phn-chart-2: #8E8E94;
  --phn-chart-muted: #3A3A3E;
  --phn-ok-bg: #1B3320;
  --phn-ok-fg: #9FDC86;
  --phn-warn-bg: #3A2F10;
  --phn-warn-fg: #F2C95E;
  --phn-info-bg: #12304F;
  --phn-info-fg: #8EC5FF;
  --phn-team-bg: #262C57;
  --phn-team-fg: #B4BEFF;
  --phn-danger-bg: #4A1E1B;
  --phn-danger-fg: #FF9D95;
  --phn-neutral-bg: #2A2A2D;
  --phn-neutral-fg: #BEBEC4;
  --phn-danger-solid: #F2776F;
  --phn-on-danger: #2A0604;
  --phn-focus: #F2F2F4;
  --phn-shadow-card: 0 0 0 1px var(--phn-border);
  color-scheme: dark;
}

/* Rosa */
:root[data-tema="rosa"], [data-tema="rosa"] {
  --phn-bg: #FBF4F7;
  --phn-surface: #FFFFFF;
  --phn-surface-2: #FBF4F7;
  --phn-surface-nav: #FDF8FA;
  --phn-border: #F0DEE6;
  --phn-border-strong: #8E7580;
  --phn-text: #261319;
  --phn-text-2: #6E5A63;
  --phn-text-3: #6E5A63;
  --phn-accent: #F26BA3;
  --phn-on-accent: #4A0A24;
  --phn-accent-text: #A3124F;
  --phn-accent-soft: #FDE6EF;
  --phn-accent-soft-text: #8A0F42;
  --phn-chart-1: #F26BA3;
  --phn-chart-2: #C2185B;
  --phn-chart-muted: #F9D6E4;
  --phn-ok-bg: #E9F5E1;
  --phn-ok-fg: #1F5A1C;
  --phn-warn-bg: #FFF4D6;
  --phn-warn-fg: #7A5A00;
  --phn-info-bg: #E5F1FF;
  --phn-info-fg: #0060C7;
  --phn-team-bg: #E3E8FF;
  --phn-team-fg: #3A46B0;
  --phn-danger-bg: #FFE5E3;
  --phn-danger-fg: #B3261E;
  --phn-neutral-bg: #F0F0F3;
  --phn-neutral-fg: #5F5F64;
  --phn-danger-solid: #B3261E;
  --phn-on-danger: #FFFFFF;
  --phn-focus: #A3124F;
  --phn-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  color-scheme: light;
}
:root[data-tema="rosa"][data-modo="oscuro"], [data-tema="rosa"][data-modo="oscuro"] {
  --phn-bg: #170E12;
  --phn-surface: #1F151A;
  --phn-surface-2: #281C22;
  --phn-surface-nav: #1A1115;
  --phn-border: #3A2A32;
  --phn-border-strong: #8A6F7B;
  --phn-text: #F7EDF1;
  --phn-text-2: #C5B0B9;
  --phn-text-3: #B09CA5;
  --phn-accent: #F27AAE;
  --phn-on-accent: #3F0720;
  --phn-accent-text: #F7A0C6;
  --phn-accent-soft: #44202F;
  --phn-accent-soft-text: #FBBBD5;
  --phn-chart-1: #F27AAE;
  --phn-chart-2: #C94F85;
  --phn-chart-muted: #43303A;
  --phn-ok-bg: #1B3320;
  --phn-ok-fg: #9FDC86;
  --phn-warn-bg: #3A2F10;
  --phn-warn-fg: #F2C95E;
  --phn-info-bg: #12304F;
  --phn-info-fg: #8EC5FF;
  --phn-team-bg: #262C57;
  --phn-team-fg: #B4BEFF;
  --phn-danger-bg: #4A1E1B;
  --phn-danger-fg: #FF9D95;
  --phn-neutral-bg: #32232A;
  --phn-neutral-fg: #CDB9C2;
  --phn-danger-solid: #F2776F;
  --phn-on-danger: #2A0604;
  --phn-focus: #F7A0C6;
  --phn-shadow-card: 0 0 0 1px var(--phn-border);
  color-scheme: dark;
}

/* Solo modo (sin tema): usa la paleta PHN */
:root[data-modo="claro"] { color-scheme: light; }
:root[data-modo="oscuro"]:not([data-tema]) {
  --phn-bg: #0E1410;
  --phn-surface: #151C17;
  --phn-surface-2: #1C251F;
  --phn-surface-nav: #111713;
  --phn-border: #263029;
  --phn-border-strong: #74857A;
  --phn-text: #EBF1EC;
  --phn-text-2: #A7B3AA;
  --phn-text-3: #94A199;
  --phn-accent: #8BD060;
  --phn-on-accent: #0C2008;
  --phn-accent-text: #A3DB7E;
  --phn-accent-soft: #1F3320;
  --phn-accent-soft-text: #BDE9A0;
  --phn-chart-1: #8BD060;
  --phn-chart-2: #4DA23F;
  --phn-chart-muted: #2A3A2B;
  --phn-ok-bg: #1B3320;
  --phn-ok-fg: #9FDC86;
  --phn-warn-bg: #3A2F10;
  --phn-warn-fg: #F2C95E;
  --phn-info-bg: #12304F;
  --phn-info-fg: #8EC5FF;
  --phn-team-bg: #262C57;
  --phn-team-fg: #B4BEFF;
  --phn-danger-bg: #4A1E1B;
  --phn-danger-fg: #FF9D95;
  --phn-neutral-bg: #262C28;
  --phn-neutral-fg: #B9C1BB;
  --phn-danger-solid: #F2776F;
  --phn-on-danger: #2A0604;
  --phn-focus: #A3DB7E;
  --phn-shadow-card: 0 0 0 1px var(--phn-border);
  color-scheme: dark;
}
[data-modo="oscuro"] { color-scheme: dark; }
[data-modo="claro"] { color-scheme: light; }

/* Tema personalizado: tema.js escribe las variables en línea sobre <html> (ver derivar()). */
:root[data-tema="personalizado"][data-modo="oscuro"] { color-scheme: dark; }

/* Alto contraste (prefers-contrast: more o data-contraste="alto"): bordes y textos secundarios más fuertes */
@media (prefers-contrast: more) {
  :root:root, :root[data-tema], :root[data-tema][data-modo], :root[data-modo]:not([data-tema]) {
    --phn-border: var(--phn-border-strong);
    --phn-text-2: var(--phn-text);
    --phn-text-3: var(--phn-text);
    --phn-shadow-card: none;
  }
}
:root[data-contraste="alto"], :root[data-contraste="alto"][data-modo], :root[data-contraste="alto"][data-tema][data-modo] {
  --phn-border: var(--phn-border-strong);
  --phn-text-2: var(--phn-text);
  --phn-text-3: var(--phn-text);
  --phn-shadow-card: none;
}

/* Cambio de tema animado (tema.js agrega la clase 260 ms) */
@media (prefers-reduced-motion: no-preference) {
  .phn-tema-cambia, .phn-tema-cambia *, .phn-tema-cambia *::before, .phn-tema-cambia *::after {
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, fill .22s ease, stroke .22s ease, box-shadow .22s ease !important;
  }
}

/* Tamaño del texto elegido en Personalizar: todo lo que esté en rem crece o se achica */
html { font-size: calc(100% * var(--phn-font-scale, 1)); }