/* El relieve (Gus, 15/10: el video "why your buttons look cheap"). Lo que se aprieta tiene luz: la luz viene de arriba,
   pega en el borde de arriba, deja sombra en el de abajo, el botón se apoya en la página y brilla en su propio color; al
   apretarlo se hunde. Lo que se escribe o se elige va hundido (al revés: sombra arriba, luz abajo) y lo que flota
   (paneles, ventanas, avisos) lleva solo el hilo de luz arriba. docs/diseno.md → El relieve.
   Va en su propio archivo, cargado justo después de style.css (index.html): le gana a style.css con el mismo peso y los
   módulos (pages.css, table.css…), que cargan después, siguen ajustando lo suyo. Todo con los tokens de acá abajo. */
:root {
  /* el botón con color (dorado, verde, naranja): las cuatro sombras del video */
  --rl-luz: rgb(255 255 255 / .35);          /* 1. la luz en el borde de arriba (#ffffff59) */
  --rl-sombra: rgb(0 0 0 / .2);              /* 2. la sombra en el borde de abajo (#0003) */
  --rl-contacto: rgb(0 0 0 / .4);            /* 3. donde toca la página (#0006) */
  --rl-brillo: 60%;                          /* 4. el brillo de su color (#…99) */
  /*    y su forma: debajo del botón, casi nada a los costados (en el fondo oscuro, dos botones de color juntos se unían
        con una neblina). La del video era 0 8px 24px -6px; a escala del botón: */
  --rl-brillo-geo-lg: 0 8px 24px -8px;       /*    el grande (.btn-lg, 44 px) */
  --rl-brillo-geo: 0 7px 18px -7px;          /*    el de siempre (36 px): el de 24 manchaba el texto de abajo */
  --rl-brillo-geo-sm: 0 4px 12px -5px;       /*    el chico (.btn-sm, .btn-icon-sm, 28 px) */
  --rl-brillo-geo-xs: 0 3px 8px -4px;        /*    con texto pegado abajo (el encabezado de Ayuda, a 9 px) */
  --rl-aclara: rgb(255 255 255 / .12);       /* el degradé suave: arriba, un poco más claro */
  /* el botón oscuro (el de siempre, sin color): la misma luz, más baja, y la sombra de la página en vez del brillo */
  --rl-luz-osc: rgb(255 255 255 / .1);
  --rl-aclara-osc: rgb(255 255 255 / .05);
  --rl-brillo-osc: rgb(0 0 0 / .55);
  /* apretado: la luz se va y la sombra entra por arriba (#0004). Cuatro capas en el mismo orden que el relieve, para
     que el paso de uno a otro se anime */
  --rl-hundido: inset 0 2px 4px rgb(0 0 0 / .35), inset 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
  /* lo hundido (campos, segmentados, interruptores): sombra adentro arriba y un hilo de luz abajo */
  --rl-pozo: inset 0 1px 3px rgb(0 0 0 / .6), inset 0 -1px 0 rgb(255 255 255 / .08);
  /* lo que flota: el hilo de luz arriba */
  --rl-hilo: inset 0 1px 0 rgb(255 255 255 / .06);
}

/* ---------- los botones con caja ----------
   :is() pesa una clase y :where() no suma: el botón sigue pesando lo mismo que .btn y los módulos lo pisan como siempre.
   Quedan afuera los que no tienen caja (.btn-ghost, .icon-btn, .btn-danger, que es solo el borde) y los de vidrio
   (.glass), que flotan sobre la mesa o el arte y llevan el hilo de luz de lo que flota. */
:is(.btn, .btn-icon, .btn-icon-sm, .btn-icon-xs):where(:not(.btn-ghost, .icon-btn, .btn-danger, .glass)) {
  --rl-c: var(--panel-2);
  --rl-l: var(--rl-luz-osc);
  --rl-a: var(--rl-aclara-osc);
  --rl-g: var(--rl-brillo-osc);
  --rl-geo: var(--rl-brillo-geo);
  --rl-abajo: -2px;
  --rl-relieve: inset 0 1px 0 var(--rl-l), inset 0 var(--rl-abajo) 0 var(--rl-sombra), 0 1px 2px var(--rl-contacto), var(--rl-geo) var(--rl-g);
  background-color: var(--rl-c);
  background-image: linear-gradient(180deg, var(--rl-a), transparent);
  background-origin: border-box;
  box-shadow: var(--rl-relieve);
  -webkit-tap-highlight-color: transparent;   /* en el iPhone, el gris del toque tapaba el hundido */
}
.btn-primary, .btn-green, .btn-orange { --rl-l: var(--rl-luz); --rl-a: var(--rl-aclara); --rl-g: color-mix(in srgb, var(--rl-c) var(--rl-brillo), transparent); }
.btn-primary { --rl-c: var(--gold); } .btn-green { --rl-c: var(--forest); } .btn-orange { --rl-c: var(--ember); }
/* con color no hay borde: lo dibujan la luz y la sombra, como en el video. El borde de 1px queda (no cambia el tamaño) y
   lleva la luz arriba y la sombra abajo hasta el canto mismo: transparente, se veía una línea de su color en el canto, y
   las sombras de adentro, que van por dentro del borde, no la tapaban */
.btn-primary, .btn-green, .btn-orange { --rl-relieve: inset 0 1px 0 transparent, inset 0 -1px 0 var(--rl-sombra), 0 1px 2px var(--rl-contacto), var(--rl-geo) var(--rl-g); }
.btn-primary, .btn-green, .btn-orange, .btn-primary:hover, .btn-green:hover, .btn-orange:hover { border-color: transparent; border-top-color: var(--rl-l); border-bottom-color: var(--rl-sombra); }
.btn-primary:is(:active, [aria-disabled="true"]), .btn-green:is(:active, [aria-disabled="true"]), .btn-orange:is(:active, [aria-disabled="true"]) { border-top-color: transparent; border-bottom-color: transparent; }
/* lo chico brilla menos: en 28 px el brillo de 24 manchaba lo de abajo, y en 20 (la vida) tapaba el número */
.btn-lg { --rl-geo: var(--rl-brillo-geo-lg); }
.btn-sm, .btn-icon-sm, .btn-icon.btn-sm { --rl-geo: var(--rl-brillo-geo-sm); }
.btn-icon-xs { --rl-geo: 0 0 0 0; --rl-abajo: -1px; }

/* style.css pinta el hover con `background`, que borra el degradé: acá vuelve, un tono más claro */
:is(.btn, .btn-icon, .btn-icon-sm, .btn-icon-xs):where(:not(.btn-ghost, .icon-btn, .btn-danger, .glass)):hover {
  --rl-c: var(--panel-3);
  background-color: var(--rl-c);
  background-image: linear-gradient(180deg, var(--rl-a), transparent);
}
.btn-primary:hover { --rl-c: var(--gold-2); } .btn-green:hover { --rl-c: var(--forest-2); } .btn-orange:hover { --rl-c: var(--ember-2); }

/* apretado: baja 1px (lo hace style.css), la luz se va y la sombra entra por arriba */
:is(.btn, .btn-icon, .btn-icon-sm, .btn-icon-xs):where(:not(.btn-ghost, .icon-btn, .btn-danger, .glass)):active {
  background-image: none; box-shadow: var(--rl-hundido);
}
/* el foco va adelante de las sombras (si no, lo tapan) */
:is(.btn, .btn-icon, .btn-icon-sm, .btn-icon-xs):where(:not(.btn-ghost, .icon-btn, .btn-danger, .glass)):focus-visible { box-shadow: var(--ring), var(--rl-relieve); }
:is(.btn, .btn-icon, .btn-icon-sm, .btn-icon-xs):where(:not(.btn-ghost, .icon-btn, .btn-danger, .glass)):focus-visible:active { box-shadow: var(--ring), var(--rl-hundido); }
/* apagado: sin degradé ni brillo, pero con su luz y su apoyo. Plano del todo parpadeaba: el botón principal del modo
   reglas se apaga un momento en cada jugada, mientras espera al servidor */
:is(.btn, .btn-icon, .btn-icon-sm, .btn-icon-xs):where(:not(.btn-ghost, .icon-btn, .btn-danger, .glass)):disabled {
  background-image: none; box-shadow: inset 0 1px 0 var(--rl-l), 0 1px 2px var(--rl-contacto);
}
/* un cartel con forma de botón (aria-disabled: el gris del modo reglas que dice a quién se espera, el "Listo" sin mazo
   del lobby) no tiene luz; si se puede enfocar, el foco se ve igual */
:is(.btn, .btn-icon, .btn-icon-sm, .btn-icon-xs):where(:not(.btn-ghost, .icon-btn, .btn-danger, .glass))[aria-disabled="true"] { background-image: none; box-shadow: none; }
:is(.btn, .btn-icon, .btn-icon-sm, .btn-icon-xs):where(:not(.btn-ghost, .icon-btn, .btn-danger, .glass))[aria-disabled="true"]:focus-visible { box-shadow: var(--ring); }

/* ---------- lo hundido: campos, segmentados, interruptores ----------
   El segmentado de vidrio (la barra de fases de la mesa) flota y no se toca: su fase encendida y la luz que corre son de la
   mesa (table.css, table-reglas-fx.css) */
.input, .select, .textarea, .seg:not(.glass), .switch { box-shadow: var(--rl-pozo); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible, .switch:focus-visible { box-shadow: var(--ring), var(--rl-pozo); }
/* la perilla del interruptor y lo elegido del segmentado: un botón chico, con su luz y su apoyo.
   (--border-control, si existe, es el filete que le da contraste a lo elegido: se respeta) */
.switch::after { box-shadow: inset 0 -1px 0 var(--rl-sombra), 0 1px 2px var(--rl-contacto); }
.seg:not(.glass) button.on { background-image: linear-gradient(180deg, var(--rl-aclara), transparent); box-shadow: inset 0 0 0 1px var(--border-control, transparent), inset 0 1px 0 var(--rl-luz), inset 0 -1px 0 var(--rl-sombra), 0 1px 2px var(--rl-contacto); }
.seg:not(.glass) button.on:focus-visible { box-shadow: var(--ring), inset 0 0 0 1px var(--border-control, transparent), inset 0 1px 0 var(--rl-luz), inset 0 -1px 0 var(--rl-sombra); }

/* la tecla de los atajos (Ayuda): ya tiene su canto de abajo; le falta la luz de arriba */
kbd, .kbd { box-shadow: inset 0 1px 0 var(--rl-luz-osc); }

/* ---------- lo que flota: paneles, ventanas, avisos ---------- */
.glass, .toast, .tip, .pill { box-shadow: var(--rl-hilo), var(--sh-2); }
/* el turno propio (la caja del turno en la mesa) conserva su anillo verde (style.css) */
.pill-active { box-shadow: var(--rl-hilo), var(--sh-2), 0 0 0 1px color-mix(in srgb, var(--forest-2) 45%, transparent), 0 0 12px color-mix(in srgb, var(--forest-2) 30%, transparent); }
.modal { box-shadow: var(--rl-hilo), var(--sh-3); }
.panel, .card-tile { box-shadow: var(--rl-hilo); }
/* el vacío adentro de un panel, un pozo. Suelto en la página es más claro que lo de alrededor y se veía hundido y
   levantado a la vez: ahí queda plano (y el de adentro de una lista, sin fondo, también) */
:is(.panel, .glass, .modal) .empty-state:not(.is-inline) { box-shadow: var(--rl-pozo); }

/* ---------- los botones chicos sobre una carta o una miniatura ----------
   El hilo de luz y el brillo se ven pegados encima del arte: llevan solo su sombra corta, como .pg-ct-btn (pages.css).
   Son de los módulos (el mazo, el reporte, el draft): acá para no tocar sus hojas mientras se rehacen (15/10). */
.pg-deck-card .pg-star, .pg-rep-quitar, .df-card-i, .df-crown { box-shadow: var(--sh-1); }
/* el "Entra" prendido de la app de cartas es dorado (cartas.css): que brille como el dorado */
.ca-act-entra.on { --rl-c: var(--gold); --rl-l: var(--rl-luz); --rl-g: color-mix(in srgb, var(--rl-c) var(--rl-brillo), transparent); }
.ca-act-entra.on:hover { --rl-c: var(--gold-2); }
/* el botón del encabezado de una página tiene la raya o el texto a 8 px: brillo chico */
:is(.pg-sec-head, .pg-help-head, .rk-sechead) .btn { --rl-geo: var(--rl-brillo-geo-sm); }
.pg-help-head .btn { --rl-geo: var(--rl-brillo-geo-xs); }
/* la carpeta elegida de "Mis mazos" es lo elegido de un segmentado: la misma tecla levantada */
.pg-chip.on { box-shadow: inset 0 0 0 1px var(--border-control, transparent), inset 0 1px 0 var(--rl-luz), inset 0 -1px 0 var(--rl-sombra), 0 1px 2px var(--rl-contacto); }