/* Sprylex — estilos compartidos.
 *
 * Lo que tiene que verse IGUAL en la app (index.html), en Comunidad
 * (tablero.html) y en las paginas legales: los colores de los temas, la
 * cabecera con sus pestanas, las tarjetas de las obras y el pie.
 * Antes cada pagina tenia su copia y se fueron separando (fase 36). Lo que
 * se cambie aqui cambia en todas; lo propio de cada pagina sigue en ella.
 *
 * El tema va en <html data-theme="sprylex|dark|light">. La app lo pone al
 * arrancar; las otras paginas leen el que se eligio en la app (sprylex.look,
 * con los colores personalizados) y, si no hay, usan "sprylex".
 */

/* ------------------------------------------------------------ temas -- */
/* "dark": el oscuro neutro (tambien la base sin tema) */
:root {
  --bg: #15161c;
  --panel: #1d1f27;
  --panel-2: #262934;
  --line: #333745;
  --fg: #e8e9ef;
  --muted: #8b90a0;
  --accent: #ff5d73;
  --accent-2: #5ad1cd;
  --good: #6ee7a0;
  --warn: #ffcf5d;
  --bad: #ff7b72;
  --on-accent: #ffffff;
  --checker-a: #2a2d38;
  --checker-b: #22242e;
  color-scheme: dark;
}
/* Sprylex: tema de marca (identidad indigo/violeta/naranja), por defecto */
:root[data-theme="sprylex"] {
  --bg: #0D0F23;
  --panel: #191C37;
  --panel-2: #222647;
  --line: #2E3358;
  --fg: #F6F1E7;
  --muted: #8E93B8;
  --accent: #F26939;
  --accent-2: #30AE9A;
  --good: #30AE9A;
  --warn: #FFBE4F;
  --bad: #FF7B72;
  --on-accent: #ffffff;
  --checker-a: #1B1F3D;
  --checker-b: #15182F;
  color-scheme: dark;
}
/* dark-first: "Sistema" follows the OS; an explicit choice wins both ways */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="sprylex"]) {
    --bg: #eceef3;
    --panel: #ffffff;
    --panel-2: #f3f4f8;
    --line: #d6d9e2;
    --fg: #1c1e26;
    --muted: #6b7080;
    --accent: #e03e56;
    --accent-2: #1c9c97;
    --good: #1f9d57;
    --warn: #c98a00;
    --bad: #c62828;
    --checker-a: #d8dbe4;
    --checker-b: #e6e8ef;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #eceef3;
  --panel: #ffffff;
  --panel-2: #f3f4f8;
  --line: #d6d9e2;
  --fg: #1c1e26;
  --muted: #6b7080;
  --accent: #e03e56;
  --accent-2: #1c9c97;
  --good: #1f9d57;
  --warn: #c98a00;
  --bad: #c62828;
  --checker-a: #d8dbe4;
  --checker-b: #e6e8ef;
  color-scheme: light;
}
/* tokens que usan los componentes; los temas personalizados los reemplazan.
   --violet y --gold son de la marca (los usan Comunidad y la presentacion). */
:root { --btn: var(--panel-2); --icon: var(--fg); --sel: var(--accent); --sel-on: var(--on-accent); --violet: #8E72D8; --gold: var(--warn); }

/* -------------------------------------------- cabecera y pestanas -- */
.home-top {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--panel); border-bottom: 1px solid var(--line);
}
.home-brand { display: flex; align-items: center; gap: 9px; margin-right: 8px; color: inherit; text-decoration: none; }
.home-brand img { width: 34px; height: 34px; display: block; }
.home-brand b { font-family: "Major Mono Display", "Space Grotesk", monospace; font-weight: 400; font-size: 20px; letter-spacing: 1px; }
.home-nav { display: flex; gap: 4px; }
.home-nav a, .home-nav button {
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 10px; cursor: pointer;
}
.home-nav a:hover, .home-nav button:hover { color: var(--fg); }
.home-nav [aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.home-top .spacer { flex: 1; }
/* en el movil las pestanas van en su propia fila, debajo: con cuatro no
   caben junto a los botones */
@media (max-width: 560px) {
  .home-brand b { display: none; }
  .home-top { gap: 4px; padding-left: 10px; padding-right: 10px; flex-wrap: wrap; row-gap: 4px; }
  .home-brand { margin-right: 0; }
  .home-nav a, .home-nav button { padding: 8px 7px; font-size: 13px; white-space: nowrap; }
  .home-nav { order: 10; flex: 1 0 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; }
}
@media (max-width: 400px) { .home-top .home-nav a, .home-top .home-nav button { padding: 8px 5px; } }

/* ---------------------------------------------- tarjetas de obras -- */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gal-card { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; margin: 0; text-decoration: none; color: var(--fg); min-width: 0; }
.gal-media { position: relative; aspect-ratio: 4 / 3; background: var(--panel-2); display: grid; place-items: center; overflow: hidden; }
/* absoluta: con height:100% dentro de la rejilla la imagen tomaba su alto
   natural y se recortaba arriba y abajo (una obra cuadrada perdia la cabeza) */
.gal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
.gal-card figcaption { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gal-card figcaption b { font-size: 13.5px; }
.gal-card figcaption small { color: var(--muted); font-size: 11.5px; }
.gal-card .tags { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.gal-card .tag { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); padding: 1px 6px; }
.gal-card .tag.ex { border-color: var(--warn); color: var(--warn); }
.gal-card .ht { display: block; color: var(--accent-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-media.sens img { filter: blur(16px) saturate(.7); }
.gal-media .sens-veil { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--fg); background: rgba(13,15,35,.35); }
.gal-media .sens-veil b { display: block; color: var(--warn); }
@media (max-width: 560px) { .gal-grid { grid-template-columns: 1fr 1fr; gap: 8px; } }

/* ------------------------------------------------- mascota y vacios -- */
.mascota-vacio { width: 76px; height: auto; flex: none; }