/*
 * Tokens de color de WorshipPlan (tema claro / oscuro).
 *
 * Claro: la paleta que la app ya usaba (sin cambios visuales).
 * Oscuro: tabla de la sección 4 del SPEC (bg, card, ink, muted, line, ac,
 *         on-ac, like) más derivados con los mismos criterios para los
 *         tokens que la app tiene y el SPEC no (dorado, rojo, azul, grises…).
 *         Todos cumplen WCAG 2.2 AA (tests/tema-contraste.test.js).
 *
 * Precedencia:
 *   1. [data-theme="light"] o [data-theme="dark"] en <html> gana siempre
 *      (elección manual, ver theme.js).
 *   2. Sin atributo, sigue prefers-color-scheme del sistema.
 *
 * Los bloques oscuros aparecen dos veces a propósito: una para el modo
 * sistema y otra para la elección manual. Si cambias un valor, cámbialo en
 * ambos (tests/tema-contraste.test.js falla si difieren).
 *
 * Ningún estilo de la app usa hex/rgb directos: todo sale de estos tokens.
 * Los valores translúcidos se derivan con color-mix() de --shade (negro en
 * claro, blanco en oscuro), --shadow y --scrim.
 */

:root {
  color-scheme: light;

  /* Superficies */
  --bg:        #efeeeb;   /* fondo de página */
  --card:      #ffffff;   /* tarjetas, menús, modales, campos */
  --sf:        #e2e0db;   /* pista del control segmentado */
  --soft:      #f2f1ee;
  --tint:      #f4f3ef;   /* hover / celda activa */
  --chip:      #ecebe8;   /* insignias grises, hover de botones */
  --sel:       #eef6f1;   /* fila seleccionada / canción sonando */

  /* Texto */
  --ink:       #1d1b19;   /* texto principal */
  --ink2:      #4a463f;
  --muted:     #5d5a55;   /* texto secundario */
  --gray:      #6b6866;
  --gray2:     #7d7979;
  --muted2:    #8a867f;
  --faint:     #9a9694;
  --muted3:    #a09c95;
  --dis:       #cfccc6;   /* deshabilitado / días pasados */
  --ink-hover: #000000;

  /* Líneas */
  --line:      rgba(0, 0, 0, .1);
  --edge:      #e4e1db;
  --edge2:     #d4d1cb;
  --edge3:     #b9b6b0;

  /* Acción principal */
  --ac:        #0e7a3c;   /* acción principal, opción activa */
  --on-ac:     #ffffff;   /* texto sobre --ac, --ink, --red, --gray… */
  --ac-dk:     #095a2c;
  --ac-lt:     #e2f0e7;
  --ac-lt2:    #d3e8da;
  --focus:     #0e7a3c;   /* anillo de foco */
  --wa:        #1f9d55;   /* botón WhatsApp */

  /* Me gusta (corazón: solo íconos y trazos) */
  --like:      #e0245e;

  /* Dorado / aviso */
  --gold:      #c99a1e;
  --gold-dk:   #7a5a00;
  --gold-lt:   #f7efd6;
  --warn:      #8a5a00;
  --warn-bg:   #fff6e0;
  --warn-bg2:  #fdf1c4;

  /* Error / peligro */
  --red:       #b00020;
  --red2:      #b3261e;
  --red-dk:    #8a0019;
  --red-lt:    #fbe4e7;
  --red-bg:    #fdecee;

  /* Azul, pizarra y lima */
  --blue:      #2c5fa6;
  --blue-lt:   #e4ecf7;
  --slate:     #3a3f47;
  --slate-bg:  #c7cad0;
  --slate-lt:  #e4e6ea;
  --lime:      #4d6b08;
  --lime-bg:   #f5fadd;
  --lime-bd:   #a8d92f;

  /* Colores de identidad de personas / servicios (avatares con --on-ac) */
  --pal-1:     #0e7a3c;
  --pal-2:     #2c5fa6;
  --pal-3:     #b3542b;
  --pal-4:     #7a5a9e;
  --pal-5:     #8a6d1e;
  --pal-6:     #3d7f86;
  --pal-7:     #b0356a;
  --pal-8:     #4f6b2a;
  --pal-9:     #6b6866;
  --pal-10:    #5a4fb0;
  --pal-11:    #a33b2e;

  /* Base de translúcidos: color-mix(in srgb, var(--shade) 10%, transparent) */
  --shade:     #000000;
  --shadow:    #000000;
  --scrim:     #141211;

  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235d5a55' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");  /* flecha de <select> (la imagen no admite var()) */
  --logo-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:        #121212;
    --card:      #1e1e1e;
    --sf:        #2a2a2a;
    --soft:      #262626;
    --tint:      #262626;
    --chip:      #2c2c2c;
    --sel:       #1d3328;

    --ink:       #f2f2f2;
    --ink2:      #cccccc;
    --muted:     #b3b3b3;
    --gray:      #a6a6a6;
    --gray2:     #a0a0a0;
    --muted2:    #9b9b9b;
    --faint:     #939393;
    --muted3:    #8a8a8a;
    --dis:       #6b6b6b;
    --ink-hover: #ffffff;

    --line:      #3a3a3a;
    --edge:      #333333;
    --edge2:     #444444;
    --edge3:     #5a5a5a;

    --ac:        #5cb784;
    --on-ac:     #121212;
    --ac-dk:     #8fd4ae;
    --ac-lt:     #1f3d2e;
    --ac-lt2:    #2a5039;
    --focus:     #5cb784;
    --wa:        #3fbf78;

    --like:      #ff7a96;

    --gold:      #e3b341;
    --gold-dk:   #f0cd78;
    --gold-lt:   #3a3114;
    --warn:      #f0cd78;
    --warn-bg:   #3a3114;
    --warn-bg2:  #453913;

    --red:       #ff6b81;
    --red2:      #ff8a9a;
    --red-dk:    #ff94a5;
    --red-lt:    #3d1a21;
    --red-bg:    #3d1a21;

    --blue:      #7aa7ec;
    --blue-lt:   #1c2a44;
    --slate:     #c7cad0;
    --slate-bg:  #343a44;
    --slate-lt:  #2a2f37;
    --lime:      #b8d86a;
    --lime-bg:   #262f17;
    --lime-bd:   #a8d92f;

    --pal-1:     #5cb784;
    --pal-2:     #7aa7ec;
    --pal-3:     #e08a62;
    --pal-4:     #b494d8;
    --pal-5:     #d1ac45;
    --pal-6:     #62b3bb;
    --pal-7:     #ee7aab;
    --pal-8:     #9cbf62;
    --pal-9:     #a6a6a6;
    --pal-10:    #9d93e6;
    --pal-11:    #ef8576;

    --shade:     #ffffff;
    --shadow:    #000000;
    --scrim:     #000000;

    --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b3b3b3' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
    --logo-filter: brightness(0) invert(1);
  }
}

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

  --bg:        #121212;
  --card:      #1e1e1e;
  --sf:        #2a2a2a;
  --soft:      #262626;
  --tint:      #262626;
  --chip:      #2c2c2c;
  --sel:       #1d3328;

  --ink:       #f2f2f2;
  --ink2:      #cccccc;
  --muted:     #b3b3b3;
  --gray:      #a6a6a6;
  --gray2:     #a0a0a0;
  --muted2:    #9b9b9b;
  --faint:     #939393;
  --muted3:    #8a8a8a;
  --dis:       #6b6b6b;
  --ink-hover: #ffffff;

  --line:      #3a3a3a;
  --edge:      #333333;
  --edge2:     #444444;
  --edge3:     #5a5a5a;

  --ac:        #5cb784;
  --on-ac:     #121212;
  --ac-dk:     #8fd4ae;
  --ac-lt:     #1f3d2e;
  --ac-lt2:    #2a5039;
  --focus:     #5cb784;
  --wa:        #3fbf78;

  --like:      #ff7a96;

  --gold:      #e3b341;
  --gold-dk:   #f0cd78;
  --gold-lt:   #3a3114;
  --warn:      #f0cd78;
  --warn-bg:   #3a3114;
  --warn-bg2:  #453913;

  --red:       #ff6b81;
  --red2:      #ff8a9a;
  --red-dk:    #ff94a5;
  --red-lt:    #3d1a21;
  --red-bg:    #3d1a21;

  --blue:      #7aa7ec;
  --blue-lt:   #1c2a44;
  --slate:     #c7cad0;
  --slate-bg:  #343a44;
  --slate-lt:  #2a2f37;
  --lime:      #b8d86a;
  --lime-bg:   #262f17;
  --lime-bd:   #a8d92f;

  --pal-1:     #5cb784;
  --pal-2:     #7aa7ec;
  --pal-3:     #e08a62;
  --pal-4:     #b494d8;
  --pal-5:     #d1ac45;
  --pal-6:     #62b3bb;
  --pal-7:     #ee7aab;
  --pal-8:     #9cbf62;
  --pal-9:     #a6a6a6;
  --pal-10:    #9d93e6;
  --pal-11:    #ef8576;

  --shade:     #ffffff;
  --shadow:    #000000;
  --scrim:     #000000;

  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b3b3b3' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  --logo-filter: brightness(0) invert(1);
}

/* Antes de que la página pinte sus estilos, el lienzo ya sigue el tema. */
html { background: var(--bg); color: var(--ink); }

/* Control de tema (theme.js): círculo + mini menú */
theme-control { position: relative; display: inline-flex; flex: none; }
.tema-trigger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; }
.tema-trigger:hover { border-color: var(--ink); }
.tema-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 300; display: flex; flex-direction: column; gap: 2px; min-width: 168px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow) 25%, transparent); }
.tema-menu[hidden] { display: none; }
.tema-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.tema-btn:hover { background: var(--soft); }
.tema-btn[aria-pressed="true"] { background: var(--ac); color: var(--on-ac); }
.tema-trigger:focus-visible, .tema-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tema-trigger svg, .tema-btn svg { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema-estado { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sin transiciones de color si el usuario pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}