/* ==========================================================================
   TESSERACORE: capa de diseno de la marca, tema CLARO (05-oct-2026)
   Aplica el manual (E6) sobre la plantilla comun, que es oscura: fondo hueso, texto tinta,
   simbolo en tierra y pasto. Va despues de marca.css y fuera de las capas de Tailwind, asi que manda sobre ambos.
   Tipografia oficial: Space Grotesk (titulos y texto) y Space Mono (datos); ver kits/tesseracore.ai.
   Contrastes sobre hueso: tinta 13,8 · texto 10,7 · suave 6,0 · tenue 4,7 · tierra 6,9 · pasto oscuro 5,4.
   ========================================================================== */

:root {
  color-scheme: light;
  --tc-hueso:   #F4EFE6;   /* fondo */
  --tc-papel:   #FBF8F2;   /* tarjetas */
  --tc-borde:   #E3D9C9;
  --tc-borde-f: #CDBFA9;   /* borde fuerte, barras vacias */
  --tc-tinta:   #26221C;
  --tc-texto:   #3B342B;
  --tc-suave:   #665847;
  --tc-tenue:   #76685A;
  --tc-tierra:  #6B4A2F;
  --tc-pasto:   #4C7A3F;
  --tc-pasto-o: #426B37;   /* pasto oscuro: texto pequeno y botones (hueso sobre el: 5,4:1) */
  --tc-pasto-h: #3E6533;   /* hover */

  /* Los grises de Stellar se invierten: el 900 (fondo) pasa a hueso y los claros (texto) a tinta */
  --color-slate-50:  var(--tc-tinta);
  --color-slate-100: var(--tc-tinta);
  --color-slate-200: var(--tc-tinta);
  --color-slate-300: var(--tc-texto);
  --color-slate-400: var(--tc-suave);
  --color-slate-500: var(--tc-tenue);
  --color-slate-600: #A89A86;
  --color-slate-700: var(--tc-borde-f);
  --color-slate-800: var(--tc-borde);
  --color-slate-900: var(--tc-hueso);
  --color-white:     var(--tc-tinta);   /* hover:text-white y botones blancos de Stellar pasan a tinta */

  /* El acento (morado de Stellar) pasa a la escala del pasto, oscura para leerse sobre hueso */
  --color-purple-200: #A9C49B;
  --color-purple-300: #7FA56F;
  --color-purple-400: var(--tc-pasto);
  --color-purple-500: var(--tc-pasto-o);
  --color-purple-600: var(--tc-pasto-h);
  --color-purple-700: #34552B;
}

body { letter-spacing: 0; }              /* Space Grotesk a tracking 0 en texto (manual) */
::selection { background: #D5E3CC; color: var(--tc-tinta); }

/* ---------- Titulares: Space Grotesk, tinta liso (sin el degradado de Stellar) ---------- */
h1, h2, h3, .h1, .h2, .h3, [data-marca-nombre] {
  background: none;
  color: var(--tc-tinta);
  -webkit-text-fill-color: currentColor;
}
.h1, h1, .h2, h2 { font-weight: 500; letter-spacing: -0.01em; }
.h3, h3 { font-weight: 500; }

/* ---------- Etiquetas y datos: Space Mono ---------- */
[data-antetitulo] {
  background: none;
  color: var(--tc-tierra);
  -webkit-text-fill-color: currentColor;
  font-family: var(--fuente-datos);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-dato] { color: var(--tc-pasto-o); font-variant-numeric: tabular-nums; }

/* ---------- Brillos de Stellar: fuera. Sobre hueso parecen manchas; el manual es sobrio ---------- */
[class*="blur-[120px]"], [class*="blur-[80px]"], [class*="blur-[40px]"],
[aria-hidden="true"].blur-2xl { display: none; }

/* ---------- Tarjetas: papel con borde fino ---------- */
[data-highlighter] .bg-slate-900 { background: var(--tc-papel); }

/* ---------- Botones: accion en pasto oscuro, secundario con borde tierra ---------- */
[data-boton="principal"] {
  background: var(--tc-pasto-o);
  color: var(--tc-hueso);
  font-weight: 500;
}
[data-boton="principal"]:hover { background: var(--tc-pasto-h); }
[data-boton="principal"] span { color: inherit; }
[data-boton="secundario"] {
  background: transparent;
  color: var(--tc-tinta);
  border: 1px solid var(--tc-borde-f);
}
[data-boton="secundario"]:hover { border-color: var(--tc-tierra); }
[data-boton="cabecera"] span span { color: var(--tc-pasto-o); }
[data-boton]:focus-visible, .tc-insignia:focus-visible, a:focus-visible {
  outline: 2px solid var(--tc-pasto-o);
  outline-offset: 3px;
}

/* ---------- Insignia: pildora con el punto pasto del nucleo ---------- */
.tc-insignia {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .875rem;
  border: 1px solid var(--tc-borde-f);
  border-radius: 9999px;
  color: var(--tc-texto);
  font-family: var(--fuente-datos);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.tc-insignia::before {
  content: "";
  width: .5rem;
  height: .5rem;
  background: var(--tc-pasto);   /* cuadrado, como el nucleo del simbolo */
}
.tc-insignia:hover { border-color: var(--tc-tierra); color: var(--tc-tinta); }

/* ---------- Motivo: teselado en perspectiva del simbolo, desvanecido hacia el texto ---------- */
.tc-motivo {
  background: url("../capa/motivo.svg") center / cover no-repeat;
  opacity: .16;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, transparent 22%, #000 75%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, transparent 22%, #000 75%);
}
.tc-simbolo img { display: block; width: 6rem; height: 6rem; margin-inline: auto; }
@media (min-width: 768px) {
  .tc-simbolo img { width: 7rem; height: 7rem; }
}