/* ===== EL ARMAZON DEL SITIO, puesto por armar_sitio.py (22 ago 2026) =====
   Los tokens de la carta y el carril de la izquierda, iguales en todas las paginas.
   No se edita en la pagina: se edita trabajo/sitio/plantilla/base.html y se corre
   python3 armar_sitio.py. */
:root{
  --cream:#F5F3F0; --espresso:#021212; --dark-bg:#021212; --cobre:#3B161F; --cobre-suave:#D6CEC4;
  --line:rgba(2,18,18,0.14); --line-fuerte:rgba(2,18,18,0.34); --line-dark:rgba(214,206,196,0.22);
  --text:#021212; --muted:#70706a;
  --f-title:'Manrope',Arial,Helvetica,sans-serif; --f-head:'Arimo',Arial,Helvetica,sans-serif; --f-body:'Arimo',Arial,Helvetica,sans-serif;
  color-scheme:only light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--dark-bg)}
/* El body va SIEMPRE en tinta, aunque la página traiga su propio body{background}.
   Todo el contenido vive dentro de la hoja marfil, así que el fondo del body solo
   asoma en la franja de 44 px que el pie deja por encima (margin-top en pie.css) y
   en el aire del lienzo. Si una página lo pintaba de blanco o marfil salía una
   franja clara entre la hoja y el pie: Mafe la cazó en cursos el 22 ago 2026, y la
   tenían también contacto, revolución solar, 404, gracias y mi espacio. */
html body{background:var(--dark-bg)!important}
body{color:var(--text);font-family:var(--f-body);font-size:16px;letter-spacing:-.5px;line-height:1.55}
  /* ===== EL CARRIL DE LA CARTA, el mismo que lleva /consultas (Mafe, 21 ago 2026:
     «el menú de dashboard se desaparece en tienda»). Copiado de consultas.html,
     líneas .cb-lienzo a .cb-enl-actual, sin cambiar un valor. Si el carril de la
     carta o el de consultas cambia, este se vuelve a calcar. ===== */
.cb-lienzo {
  background: var(--dark-bg);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 26px 26px;
}
/* El carril baja con la página, igual que en la carta (Mafe, 22 ago 2026: «esa
   barra de desplazamiento no me gusta, continúa el menú hasta el fondo como en
   la carta»). En index.html #hero va position:static, sin max-height ni
   overflow, así que aquí tampoco: nada de sticky ni de scroll propio, que eso
   es lo que pintaba la barra gris dentro del carril. */
.cb-carril {
  position: static;
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 2px;
}
/* La hoja donde va toda la página. El recorte redondeado es lo que hace que
   las secciones de dentro, que van a sangre, no se salgan de la tarjeta. */
.cb-hoja {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--cream);
  border-radius: 5px;
  overflow: hidden;
}
/* Los rótulos que agrupan el carril */
.cb-rot {
  font-family: var(--f-title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  /* El mismo gris que la carta, #a6a6a6, para que sea la misma pieza y no una
     parecida (18 ago 2026; antes iba en Dust Grey translúcido) */
  color: #a6a6a6;
  margin: 16px 0 9px 6px;
  padding: 0;
}
/* Las pestañas de las vistas de la carta: recuadro blanco, como en la carta */
.cb-tab, .cb-enl {
  display: flex;
  align-items: center;
  gap: 11px;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.4px;
  text-align: left;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 5px;
  transition: background 0.15s, border-color 0.15s;
}
/* CALCADO DE .tabs.chartfan DE LA CARTA (18 ago 2026), valores leídos en el
   navegador en producción. Pestañas y enlaces son la MISMA pieza: contorno fino
   sobre la tinta, letra blanca, icono dorado #cdbb8b con el punto de acento en
   vino. Antes las ocho pestañas de aquí iban en blanco lleno y por eso el carril
   no se leía como el mismo sitio. */
.cb-tab, .cb-enl {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: #ffffff;
}
.cb-tab:hover, .cb-enl:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.3); }
/* El icono, con la caja y el trazo de la carta */
.cb-tab .cf-emb, .cb-enl .cf-emb {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cdbb8b;
}
.cb-tab .cf-emb svg, .cb-enl .cf-emb svg { width: 100%; height: 100%; }
.cb-tab .cf-ac, .cb-enl .cf-ac { fill: var(--cobre); }
/* El apretado de la letra copiado de la carta (-.01em), que es la fuente de verdad.
   Antes iba a -0.8px y esa diferencia hacía que «Buscador de aspectos» cupiera en
   una línea aquí y en dos en la carta: la fila medía 51px en el sitio y 58 en la
   carta, y el carril entero brincaba al navegar entre las dos casas (Mafe lo cazó
   el 24 ago 2026, «empieza a temblar la página»). */
.cb-tab .cf-nm, .cb-enl .cf-nm { letter-spacing: -0.14px; }
/* Carta compuesta, que la carta enseña apagada al 50 % porque todavía no existe */
.cb-tab-pronto { opacity: .5; cursor: default; }
/* La página donde estás, blanca llena, como la pestaña activa de la carta */
.cb-enl.cb-enl-actual {
  position: relative;
  background: #ffffff;
  border-color: #ffffff;
  color: var(--espresso);
}
.cb-enl.cb-enl-actual .cf-emb, .cb-enl.cb-enl-actual .cf-ac { color: #5c5c56; fill: #5c5c56; }
/* El rombo de "estás aquí" (24 ago 2026, elegido por Mafe): asomado en el filo
   derecho de la pastilla blanca, mitad dentro y mitad fuera. El filo marfil es lo
   que lo hace legible sobre la tinta del carril. Es la MISMA marca que lleva la
   pestaña activa de la carta (index.html, style dash-natal); si se cambia aquí,
   se cambia allá. El radio 0 es para que el giro de 45 grados dibuje puntas
   vivas, no una moneda. */
.cb-enl.cb-enl-actual::before {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #3B161F;
  border: 2px solid #f5f3f0;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 0;
  z-index: 2;
}
/* «Reservar consulta» NO va en este carril (Mafe, 18 ago 2026): quien está en
  /* En pantalla angosta el carril no cabe: la navegación queda en la hamburguesa
     de la cabecera, que lleva las mismas entradas, y la hoja ocupa todo el ancho. */
  @media (max-width: 1000px) {
    .cb-carril { display: none; }
    .cb-lienzo { padding: 0; gap: 0; }
    .cb-hoja { border-radius: 0; }
  }