/* ==========================================================================
   LOS CIMIENTOS DE LA MARCA, SOLO LOS TOKENS

   Copiado de `.claude/skills/survivo-design/cimientos.css`, PERO SOLO LOS TRES
   BLOQUES DE `:root`. No se edita aca: si algo tiene que cambiar, cambia en la
   skill y baja a todo lo que la copia.

   ==========================================================================
   POR QUE SOLO LOS TOKENS, Y NO EL ARCHIVO ENTERO

   `cimientos.css` ademas de los tokens trae reglas generales —`body{background;
   color; font-family; font-size:14px}`, `*{box-sizing}`, `button{font:inherit}`,
   `:focus-visible`, `.mono`, `.degrade`—. En una maqueta eso esta bien: la
   maqueta ES toda la pagina y no hay nada mas que proteger.

   Esta hoja, en cambio, es la PRIMERA que carga en TODAS las paginas del
   sitio. Si trajera el `body{...}` de los cimientos le cambiaria el fondo, la
   tinta, la tipografia y el tamaño de letra base a la ficha de evento, al
   carrito, al checkout, a mi cuenta y a cada pagina de contenido — ninguna de
   las cuales fue diseñada ni revisada con estos tokens todavia. Eso es un
   rediseño del sitio entero disfrazado de "cabecera y pie".

   Un bloque de `:root` con variables, en cambio, **no pinta nada por si
   mismo**: declara `--ink`, `--acento`, `--lima`... y hasta que algo las
   referencie, no hay un solo pixel distinto. Por eso es seguro sitewide, y por
   eso las reglas que SI pintan viven en `svo-banda.css`, colgadas de
   `.svo-cabecera` y `.svo-pie`.

   El dia que el resto del sitio siga los tokens, lo que falta de
   `cimientos.css` se agrega aca y se enciende el tema oscuro. Ver PENDIENTES.
   ========================================================================== */

:root{
  --lima:#ceff58; --violeta:#5b00ea; --violeta-hondo:#29006a;
  --ground:#f4f4f1; --surface:#fff; --surface-2:#ececea; --surface-3:#e3e3df;
  --line:#e0e0db; --line-fuerte:#c9c9c3;
  --ink:#0a0a0a; --ink-2:#57574f; --ink-3:#8b8b82;
  --acento:#5b00ea; --acento-txt:#fff; --acento-soft:#f0e8ff; --acento-borde:#d5bfff;
  --plata:#3d0099;
  --ok:#1d6b3f; --ok-soft:#e4f4e9; --ok-borde:#a9dcbc;
  --espera:#7a5300; --espera-soft:#fdf1d6; --espera-borde:#e8cf8f;
  --baja:#8a2f2f; --baja-soft:#fbe9e9; --baja-borde:#e8b7b7;
  --sombra:0 1px 2px rgba(10,10,10,.04), 0 12px 30px -20px rgba(10,10,10,.4);
  --velo:rgba(10,10,10,.45);
  --r:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0a0a0a; --surface:#151514; --surface-2:#1d1d1b; --surface-3:#262624;
    --line:#2a2a27; --line-fuerte:#3a3a36;
    --ink:#f7f7f3; --ink-2:#a3a39a; --ink-3:#76766d;
    --acento:#8b5cff; --acento-txt:#0a0a0a; --acento-soft:#20143c; --acento-borde:#3d2a70;
    --plata:#ceff58;
    --ok:#7ddba0; --ok-soft:#13291c; --ok-borde:#255c39;
    --espera:#e8c26a; --espera-soft:#2b2312; --espera-borde:#5c4a1f;
    --baja:#f0a0a0; --baja-soft:#2c1414; --baja-borde:#5c2a2a;
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -22px rgba(0,0,0,1);
    --velo:rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0a0a0a; --surface:#151514; --surface-2:#1d1d1b; --surface-3:#262624;
  --line:#2a2a27; --line-fuerte:#3a3a36;
  --ink:#f7f7f3; --ink-2:#a3a39a; --ink-3:#76766d;
  --acento:#8b5cff; --acento-txt:#0a0a0a; --acento-soft:#20143c; --acento-borde:#3d2a70;
  --plata:#ceff58;
  --ok:#7ddba0; --ok-soft:#13291c; --ok-borde:#255c39;
  --espera:#e8c26a; --espera-soft:#2b2312; --espera-borde:#5c4a1f;
  --baja:#f0a0a0; --baja-soft:#2c1414; --baja-borde:#5c2a2a;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -22px rgba(0,0,0,1);
  --velo:rgba(0,0,0,.7);
}

/* La tinta sobre la banda. La cabecera es un degradado de lima a violeta y no
   cambia con el tema: es la superficie de marca. Sobre el extremo lima la
   tinta es negra y sobre el violeta es blanca, y son dos constantes y no
   tokens porque no dependen del tema sino de la banda. */
:root{ --tinta-lima:#0a0a0a; --tinta-violeta:#fff }


/* ==========================================================================
   EL PUENTE A ASTRA, QUE ES LO QUE ENCIENDE EL TEMA OSCURO EN TODO EL SITIO

   Astra no pinta con colores sueltos: pinta con NUEVE variables propias,
   `--ast-global-color-0` a `--ast-global-color-8`, declaradas en un `:root`
   que emite en cada pagina. Medido el 12/09/2026 en la portada: 238 usos de
   esas nueve variables, y entre ellos el fondo del sitio —

       body,.ast-separate-container{background-color:var(--ast-global-color-1)}

   Eso cambia por completo lo que hacia falta para encender el oscuro. NO hay
   que escribir una hoja que le pelee clase por clase al tema ni a los bloques
   de WooCommerce: alcanza con darle otros valores a esas nueve variables.
   Astra, WooCommerce, el carrito y el checkout de bloques y las paginas de
   contenido pintan todos a traves de ellas.

   Y ya venian con la marca puesta: `color-2` es exactamente `--lima` y
   `color-3` exactamente `--violeta`.

   ==========================================================================
   SOLO SE REDEFINEN EN OSCURO, Y ESO ES LO QUE HACE SEGURO EL CAMBIO

   Abajo no hay ningun bloque para el tema claro. Es a proposito: en claro
   Astra sigue usando sus propios valores y el sitio queda BIT A BIT como
   estaba. Todo lo que sigue vive dentro de los dos bloques de oscuro.

   La consecuencia practica es la red de seguridad: si algo del oscuro quedara
   mal, se apaga y no queda nada que revertir del tema claro.

   ==========================================================================
   LOS COLORES DE MARCA NO SE DAN VUELTA

   `color-2` (lima) y `color-5` (blanco sobre violeta) NO se redefinen. La lima
   es lima en los dos temas: es la marca, no una superficie. Lo mismo que la
   banda de la cabecera, que tampoco cambia con el tema.

   `color-3` SI se mueve, al `--acento` oscuro: el violeta #5b00ea sobre un
   fondo negro pierde legibilidad, y `--acento` existe justamente para eso.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LA DECIMA VARIABLE, QUE ES LA QUE PINTA DE VERDAD LOS CAMPOS DE WOOCOMMERCE

   Las nueve de arriba no alcanzan, y averiguar por que costo tres intentos y
   una hoja con `!important`. Astra viste los campos DOS veces, y la segunda le
   gana a la primera:

       input[type=number]{background:var(--ast-comment-inputs-background)}
         -> main.min.css, especificidad (0,1,1)

       .woocommerce-page input[type=number]{
         background-color:var(--ast-global-dark-bg-style)}
         -> compatibility/woocommerce/woocommerce-grid.min.css, (0,2,1)

   En cualquier pagina de WooCommerce —la ficha de evento, el carrito, el
   checkout, mi cuenta— el `body` lleva `woocommerce-page`, asi que gana la
   segunda y la primera no pinta nada. Remapear solo
   `--ast-comment-inputs-background` era arreglar la regla que pierde, y por eso
   los intentos elegantes no se veian.

   El nombre de la que gana es la trampa: `--ast-global-dark-bg-style` no tiene
   nada de oscuro. Astra la emite en el CSS del Personalizador valiendo `#fff`.
   Eso era la caja blanca —fondo blanco de esta regla, tinta clara de la de mas
   abajo— en el contador de la ficha y en el del carrito.

   Se remapea aca, con las otras, y con eso caen las dos de una sola vez. En
   Astra solo la usan las hojas de WooCommerce, LearnDash y LifterLMS, asi que
   el alcance del remapeo son los campos de la tienda y nada mas.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   `color-scheme`, QUE ES LO QUE PINTA LOS CONTROLES NATIVOS

   Los campos de texto, los `select`, las barras de scroll y los calendarios no
   los dibuja el CSS: los dibuja el navegador. `color-scheme` es lo unico que le
   dice con que paleta hacerlo.

   VA ACA Y NO EN EL `<html>`, y costo un intento averiguarlo. Puesto como
   atributo valia `light dark`, que significa "esta pagina sabe hacer las dos" —
   y entonces el navegador elige **segun el sistema operativo**. Quien tuviera
   Windows en claro y apretara el boton para ver el sitio oscuro seguia
   recibiendo los campos con fondo blanco. Encima, al ser un `style` inline le
   ganaba a cualquier hoja, asi que no se podia corregir desde el CSS.

   Declarado aca, en los mismos tres bloques que todo lo demas, sigue al
   `data-theme` que estampa el boton. Ese era el sintoma del campo de cantidad
   del carrito viendose blanco en pleno tema oscuro. ------------------------- */
:root{ color-scheme:light }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ast-global-color-0:var(--surface);
    --ast-global-color-1:var(--ground);
    --ast-global-color-3:var(--acento);
    --ast-global-color-4:var(--violeta-hondo);
    --ast-global-color-6:var(--ink);
    --ast-global-color-7:var(--ink);
    --ast-global-color-8:var(--ink-2);
    --ast-comment-inputs-background:var(--surface-2);
    --ast-global-dark-bg-style:var(--surface-2);
    --ast-border-color:var(--line);
    --ast-code-block-background:var(--surface-2);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ast-global-color-0:var(--surface);
  --ast-global-color-1:var(--ground);
  --ast-global-color-3:var(--acento);
  --ast-global-color-4:var(--violeta-hondo);
  --ast-global-color-6:var(--ink);
  --ast-global-color-7:var(--ink);
  --ast-global-color-8:var(--ink-2);
  --ast-comment-inputs-background:var(--surface-2);
  --ast-global-dark-bg-style:var(--surface-2);
  --ast-border-color:var(--line);
  --ast-code-block-background:var(--surface-2);
}

/* --------------------------------------------------------------------------
   LA TINTA SOBRE LOS BOTONES DE MARCA, QUE ES LA UNICA TRAMPA DE TODO ESTO

   `--ast-global-color-6` hace DOS trabajos con un solo valor: es la tinta del
   texto del sitio Y la tinta de los botones, que van sobre lima. En claro las
   dos funcionan porque negro se lee sobre blanco y sobre lima.

   Dado vuelta en oscuro deja de funcionar la segunda: el texto pasa a ser casi
   blanco —que es lo que se quiere sobre el fondo negro— y con el mismo valor
   los botones quedan BLANCO SOBRE LIMA, que no se lee. Es el defecto que la
   web ya arrastra en su propio logo y que `panel.css` documenta.

   Se arregla volviendo a declarar la variable DENTRO del boton. Como las
   variables CSS cascadean, el boton recibe la tinta correcta y el resto de la
   pagina conserva la suya; no hace falta repetir la lista de selectores de
   Astra ni pelear con `!important`.

   Va fuera de los bloques de tema a proposito: en claro `--tinta-lima` es el
   mismo negro que Astra ya usaba, asi que no cambia nada. -------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link,
[class*="wc-block"] button,
[class*="wc-block"] .wc-block-components-button{
  --ast-global-color-6:var(--tinta-lima);
}

/* --------------------------------------------------------------------------
   LA TINTA DE LOS CAMPOS, QUE NO PASA POR NINGUNA VARIABLE

   Astra viste todos los campos del sitio con una sola regla, y ahi mezcla las
   dos cosas:

       input[type=email],input[type=number],...,select,textarea{
         color:#666;                                    <- clavado
         background:var(--ast-comment-inputs-background) <- variable
       }

   El fondo se arregla solo al redefinir la variable, arriba. La tinta no: ese
   `#666` es un literal, asi que en oscuro quedaba gris oscuro sobre gris
   oscuro. Es lo que se veia en el campo de cantidad del carrito.

   Se repiten los mismos selectores que usa Astra —no se inventan— y se le
   agrega el guardian del tema, que ademas de acotar el cambio al oscuro sube
   la especificidad lo suficiente para ganarle sin un `!important`.

   `-webkit-text-fill-color` va porque Safari ignora `color` en un campo
   deshabilitado y lo pinta con el suyo. Sin esta linea, un campo deshabilitado
   queda ilegible solo en Safari, que es la clase de defecto que no se
   encuentra hasta que alguien lo reporta desde un iPhone. ------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) input[type="email"],
  :root:not([data-theme="light"]) input[type="number"],
  :root:not([data-theme="light"]) input[type="password"],
  :root:not([data-theme="light"]) input[type="search"],
  :root:not([data-theme="light"]) input[type="tel"],
  :root:not([data-theme="light"]) input[type="text"],
  :root:not([data-theme="light"]) input[type="url"],
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea{
    color:var(--ink);
    -webkit-text-fill-color:var(--ink);
  }
}
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}

/* --------------------------------------------------------------------------
   EL CONTADOR DE BUTACAS DEL CARRITO, QUE YA NO NECESITA `!important`

   Se veia como una caja blanca en tema oscuro y estuvo un tiempo resuelto a
   quemarropa —`background:var(--surface-2) !important`— porque no se sabia
   quien pintaba ese fondo. Ya se sabe, y esta escrito arriba: la regla de
   `.woocommerce-page input[type=number]` de la hoja de compatibilidad de Astra,
   tirando de `--ast-global-dark-bg-style`. Con la variable remapeada el fondo
   deja de ser blanco solo.

   Lo que queda aca es distinto y mas chico: DEVOLVERLE al campo el
   `background:transparent` que WooCommerce le habia puesto y que la regla de
   Astra le pisa. El selector del carrito es un marco con borde y dos botones,
   y el numero va adentro del marco: si el campo trae fondo propio se ve un
   recuadro de otro tono en el medio, aunque ahora sea oscuro.

   Gana sin `!important` y sin inventar selectores: son los mismos que usa
   WooCommerce —empatan en especificidad con los de Astra— mas el guardian del
   tema, que desempata por especificidad ademas de acotar el cambio al oscuro.

   Cubre el contenedor y el campo: el numero se muestra dentro del mismo marco
   sea editable o no. Con butaca asignada NO es editable
   —`SVO_Mapa_Compra::sin_editar()` ya lo resuelve— pero el marco esta igual. -- */
:root[data-theme="dark"] .wc-block-components-quantity-selector,
:root[data-theme="dark"] .wc-block-components-quantity-selector__input,
:root[data-theme="dark"] .wc-block-cart-item__quantity input{
  background:transparent;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wc-block-components-quantity-selector,
  :root:not([data-theme="light"]) .wc-block-components-quantity-selector__input,
  :root:not([data-theme="light"]) .wc-block-cart-item__quantity input{
    background:transparent;
    color:var(--ink);
    -webkit-text-fill-color:var(--ink);
  }
}

/* --------------------------------------------------------------------------
   LOS TITULOS DE "PEDIDO RECIBIDO", QUE NO TIENEN NINGUNA VARIABLE ADENTRO

   `woocommerce-grid.min.css` de Astra le clava un fondo a los DOS h2 de esta
   pantalla —"Detalles del pedido" y "Direccion de facturacion"—:

       .woocommerce-page.woocommerce-checkout .woocommerce-order
         h2.woocommerce-order-details__title,
       .woocommerce-page.woocommerce-checkout .woocommerce-order
         h2.woocommerce-column__title{
         background:#fbfbfb; ...}

   Especificidad (0,4,1) y NINGUNA de sus propiedades pasa por una variable:
   es un literal, a diferencia del caso del contador de butacas. Por eso no
   alcanza con remapear nada arriba y hay que pisar la regla misma.

   La tinta del titulo no se toca: sale de `h1,h2,h3,h4,h5,h6{color:
   var(--ast-global-color-6)}`, que ya viaja oscura por el puente de mas
   arriba. Por eso se veia texto claro sobre fondo claro: la tinta estaba bien
   y el fondo era el literal de Astra.

   Se repiten los mismos selectores —no se inventan— y se les agrega el
   guardian del tema, que suma dos clases de especificidad y alcanza para
   ganarle a Astra sin `!important`. El cuerpo de la tabla no se toca: nunca
   tuvo fondo propio, por eso ya se veia oscuro. -------------------------- */
:root[data-theme="dark"] .woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title,
:root[data-theme="dark"] .woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title{
  background:var(--surface-2);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title,
  :root:not([data-theme="light"]) .woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title{
    background:var(--surface-2);
  }
}