/* AvilesIA · tarjetas desplegables (cuadro de mando). v1 · 20-10-2026
   Sin dependencias. Funciona sin JS con <details>/<summary>. Marcado y reglas: README.md.
   Todas las reglas usan :where() (especificidad 0): la web que lo usa puede cambiar cualquier variable --tj-* con un selector normal. */

/* 1. Tema. Por defecto, el del sistema (prefers-color-scheme). Se fuerza con data-theme="claro" | "oscuro" en <html> o en cualquier contenedor. */
:where(:root),:where([data-theme="claro"]){
 --tj-fondo:#fff;--tj-fondo-cab:#fff;--tj-tinta:#10233a;--tj-suave:#4a5d73;--tj-borde:#d8e1ec;--tj-acento:#0a66c2;--tj-foco:#0a66c2;
 --tj-bien:#1f8a4c;--tj-bien-texto:#14653a;--tj-bien-fondo:#e3f4ea;
 --tj-medio:#c79100;--tj-medio-texto:#6b4f00;--tj-medio-fondo:#fdf2cf;
 --tj-mal:#c0392b;--tj-mal-texto:#a3271b;--tj-mal-fondo:#fbe4e1;
 --tj-sin-texto:#4a5d73;--tj-sin-fondo:#eef2f7;
 --tj-sombra:0 1px 2px #0001;--tj-radio:14px;--tj-hueco:8px;--tj-relleno:10px;
 --tj-icono:1.25rem;--tj-valor:1.6rem;--tj-cols:2;--tj-margen-ancla:72px;--tj-duracion:.22s;
}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme="claro"])){
 --tj-fondo:#13202f;--tj-fondo-cab:#13202f;--tj-tinta:#e8eef6;--tj-suave:#a9b8c9;--tj-borde:#2c405a;--tj-acento:#5aa9ff;--tj-foco:#8cc4ff;
 --tj-bien:#3fbf75;--tj-bien-texto:#7fe0a6;--tj-bien-fondo:#123322;
 --tj-medio:#f0c040;--tj-medio-texto:#f5d27a;--tj-medio-fondo:#3a2f0b;
 --tj-mal:#ff7a6a;--tj-mal-texto:#ffa59a;--tj-mal-fondo:#3d1714;
 --tj-sin-texto:#c3cfdc;--tj-sin-fondo:#1d2c3e;--tj-sombra:none}}
:where([data-theme="oscuro"]){
 --tj-fondo:#13202f;--tj-fondo-cab:#13202f;--tj-tinta:#e8eef6;--tj-suave:#a9b8c9;--tj-borde:#2c405a;--tj-acento:#5aa9ff;--tj-foco:#8cc4ff;
 --tj-bien:#3fbf75;--tj-bien-texto:#7fe0a6;--tj-bien-fondo:#123322;
 --tj-medio:#f0c040;--tj-medio-texto:#f5d27a;--tj-medio-fondo:#3a2f0b;
 --tj-mal:#ff7a6a;--tj-mal-texto:#ffa59a;--tj-mal-fondo:#3d1714;
 --tj-sin-texto:#c3cfdc;--tj-sin-fondo:#1d2c3e;--tj-sombra:none}
:where([data-theme="claro"]){color-scheme:light}:where([data-theme="oscuro"]){color-scheme:dark}

/* 2. Rejilla: 2 columnas en móvil y 3 desde 640 px (o --tj-cols). .tj-rejilla--3: 3 columnas ya desde 360 px. La abierta ocupa toda la fila. */
:where(.tj-rejilla){display:grid;grid-template-columns:repeat(var(--tj-cols),minmax(0,1fr));gap:var(--tj-hueco);margin:0 0 var(--tj-hueco);padding:0;list-style:none;align-items:start}
@media (min-width:640px){:where(.tj-rejilla){--tj-cols:3}}
@media (min-width:360px){:where(.tj-rejilla--3){--tj-cols:3}}
:where(.tj-rejilla--1){--tj-cols:1}
:where(.tj-rejilla) > :where(.tj[open]){grid-column:1/-1}
/* Grupos por categoría: un título y su rejilla */
:where(.tj-grupo){margin:0 0 calc(var(--tj-hueco)*2)}
:where(.tj-grupo-titulo){font-size:1rem;margin:0 0 6px;color:var(--tj-tinta)}

/* 3. Tarjeta */
:where(.tj){container-type:inline-size;background:var(--tj-fondo);color:var(--tj-tinta);border:1px solid var(--tj-borde);border-left:5px solid var(--tj-borde);border-radius:var(--tj-radio);box-shadow:var(--tj-sombra);min-width:0;scroll-margin-top:var(--tj-margen-ancla)}
:where(.tj[data-tono="bien"]){border-left-color:var(--tj-bien)}:where(.tj[data-tono="medio"]){border-left-color:var(--tj-medio)}:where(.tj[data-tono="mal"]){border-left-color:var(--tj-mal)}

/* Cabecera = <summary>: toda la tarjeta cerrada es el botón (mínimo 44 px de alto) */
:where(.tj-cab){display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icono etiqueta flecha" "pista pista pista" "valor valor valor" "contexto contexto contexto" "hora hora hora";column-gap:6px;align-items:center;
 min-height:44px;padding:var(--tj-relleno);cursor:pointer;list-style:none;border-radius:calc(var(--tj-radio) - 1px);background:var(--tj-fondo-cab);-webkit-tap-highlight-color:transparent}
:where(.tj-cab)::-webkit-details-marker{display:none}
:where(.tj-cab):focus-visible{outline:3px solid var(--tj-foco);outline-offset:2px}
/* Chevron ▾ dibujado con CSS (no lo lee el lector de pantalla); al abrir gira 180° */
:where(.tj-cab)::after{content:"";grid-area:flecha;width:.55em;height:.55em;margin:0 .2em;border-right:2px solid var(--tj-suave);border-bottom:2px solid var(--tj-suave);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--tj-duracion) ease}
:where(.tj[open]) > :where(.tj-cab)::after{transform:rotate(225deg) translate(-2px,-2px)}
:where(.tj-icono){grid-area:icono;font-size:var(--tj-icono);line-height:1;width:1.3em;height:1.3em;display:inline-grid;place-items:center}
:where(.tj-icono) svg{width:1em;height:1em;fill:currentColor}
:where(.tj-etiqueta){grid-area:etiqueta;font-size:.85rem;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Alturas fijas: el texto puede cambiar (JS, datos nuevos) sin mover nada (CLS 0) */
:where(.tj-valor){grid-area:valor;display:block;font-size:var(--tj-valor);font-weight:800;line-height:1.15;height:1.15em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
:where(.tj-valor) small{font-size:.5em;font-weight:600;color:var(--tj-suave)}
:where(.tj-contexto){grid-area:contexto;font-size:.8rem;line-height:1.3;min-height:2.6em;max-height:2.6em;overflow:hidden;color:var(--tj-tinta);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
:where(.tj-hora){grid-area:hora;font-size:.72rem;line-height:1.3;height:1.3em;color:var(--tj-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Etiqueta de estado (nunca solo color: siempre lleva texto) */
:where(.tj-chip){display:inline-block;font-size:.72rem;font-weight:700;line-height:1.35;padding:0 .45em;border-radius:99px;background:var(--tj-sin-fondo);color:var(--tj-sin-texto);vertical-align:middle}
:where(.tj[data-tono="bien"]) :where(.tj-chip){background:var(--tj-bien-fondo);color:var(--tj-bien-texto)}
:where(.tj[data-tono="medio"]) :where(.tj-chip){background:var(--tj-medio-fondo);color:var(--tj-medio-texto)}
:where(.tj[data-tono="mal"]) :where(.tj-chip){background:var(--tj-mal-fondo);color:var(--tj-mal-texto)}
/* Sin dato: misma caja, texto «Sin dato ahora» */
:where(.tj[data-sin-dato]) :where(.tj-valor){font-size:.82rem;font-weight:700;white-space:normal;line-height:calc(var(--tj-valor)*1.15/2);height:calc(var(--tj-valor)*1.15);color:var(--tj-sin-texto)}

/* Pista de que se toca: texto real (se traduce como cualquier texto), una versión para cerrada y otra para abierta. Sin JS. */
:where(.tj-pista){grid-area:pista;font-size:.72rem;line-height:1.3;height:1.3em;color:var(--tj-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.tj-pista-abierta){display:none}
:where(.tj[open]) > :where(.tj-cab) :where(.tj-pista-cerrada){display:none}
:where(.tj[open]) > :where(.tj-cab) :where(.tj-pista-abierta){display:inline}
:where(.tj[open]) > :where(.tj-cab) :where(.tj-pista:not(:has(.tj-pista-abierta))){visibility:hidden}

/* 4. Cuerpo (lo que se ve al abrir) */
:where(.tj-cuerpo){padding:0 var(--tj-relleno) var(--tj-relleno);font-size:.95rem;border-top:1px solid var(--tj-borde)}
:where(.tj-cuerpo) > :first-child{margin-top:.6em}
:where(.tj-cuerpo) a{color:var(--tj-acento)}
:where(.tj-enlace){display:inline-flex;align-items:center;min-height:44px;font-weight:700}
:where(.tj-lista){list-style:none;padding:0;margin:.4em 0}
:where(.tj-lista) > li{border-top:1px solid var(--tj-borde);padding:6px 0}:where(.tj-lista) > li:first-child{border-top:0}
:where(.tj-lista) a{display:inline-flex;align-items:center;min-height:44px}

/* 5. Animación suave al abrir (navegadores con ::details-content; el resto abre al momento). Sin animación con prefers-reduced-motion. */
:where(.tj){interpolate-size:allow-keywords}
:where(.tj)::details-content{block-size:0;overflow:clip;transition:block-size var(--tj-duracion) ease,content-visibility var(--tj-duracion) allow-discrete}
:where(.tj[open])::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){:where(.tj)::details-content{transition:none}:where(.tj-cab)::after{transition:none}}

/* 6. Impresión: todo abierto */
@media print{:where(.tj)::details-content{block-size:auto;content-visibility:visible}:where(.tj-cab)::after{display:none}}

/* 8. Tarjeta estrecha (menos de 170 px, p. ej. 3 columnas en un móvil): icono y flecha arriba, la etiqueta en su propia línea, sin cortar */
@container (max-width:170px){
 :where(.tj-cab){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"icono flecha" "etiqueta etiqueta" "pista pista" "valor valor" "contexto contexto" "hora hora";padding:8px}
 :where(.tj-icono){justify-self:start}
 :where(.tj-etiqueta){font-size:.8rem;margin-top:2px}
 :where(.tj-pista){white-space:normal;height:2.6em}
}

/* 7. Variante compacta (.tj-rejilla--compacta): solo icono, etiqueta y valor pequeño; unos 66 px de alto. Para portadas con mucha cabecera (avilesia.es). */
:where(.tj-rejilla--compacta) :where(.tj-cab){grid-template-areas:"icono etiqueta flecha" "pista pista pista" "valor valor valor"}
:where(.tj-rejilla--compacta) :where(.tj-etiqueta){font-size:.95rem}
:where(.tj-rejilla--compacta) :where(.tj-valor){font-size:.85rem;font-weight:600;color:var(--tj-suave);margin-top:2px}
:where(.tj-rejilla--compacta) :where(.tj-contexto,.tj-hora){display:none}