/* =========================================================
   EL LABORATORIO — publish.css para Obsidian Publish
   Paleta: hueso / tinta / óxido. Serif en títulos, sans en cuerpo.
   Pega este archivo como  publish.css  en la raíz de tu vault.
   ========================================================= */

/* ---- Fuentes (Google Fonts, carga remota permitida) ---- */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* =========================================================
   1. Variables de tipografía y layout (compartidas)
   ========================================================= */
body {
  --font-text-theme: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-interface-theme: 'Inter', -apple-system, sans-serif;
  --font-monospace-theme: 'IBM Plex Mono', ui-monospace, monospace;
}

.published-container {
  --page-width: 720px;
  --page-side-padding: 40px;
  --font-text-size: 18px;
  --line-height: 1.75;
}

/* =========================================================
   2. Colores — MODO CLARO (hueso + tinta + óxido)
   ========================================================= */
.theme-light {
  --background-primary:       #F4F0E6;  /* hueso / pergamino */
  --background-primary-alt:   #ECE7D9;
  --background-secondary:     #EAE4D4;
  --background-secondary-alt: #E2DBC8;

  --text-normal:    #23211C;  /* tinta */
  --text-muted:     #5E594E;
  --text-faint:     #908A7B;

  --text-accent:       #B0431C;  /* óxido / coral quemado */
  --text-accent-hover: #8F340F;
  --interactive-accent:#B0431C;

  --h1-color: #23211C;
  --h2-color: #23211C;
  --h3-color: #3A3730;

  --background-modifier-border: #D8D1BE;
  --hr-color: #D8D1BE;

  --text-selection: rgba(176, 67, 28, 0.16);
  --text-highlight-bg: rgba(176, 67, 28, 0.18);
}

/* =========================================================
   3. Colores — MODO OSCURO (pizarra + óxido encendido)
   ========================================================= */
.theme-dark {
  --background-primary:       #1A1D23;  /* pizarra azul-negro */
  --background-primary-alt:   #20242B;
  --background-secondary:     #21252C;
  --background-secondary-alt: #262B33;

  --text-normal:    #E7E3D8;
  --text-muted:     #A8A294;
  --text-faint:     #6F6B61;

  --text-accent:       #E07A4D;  /* óxido encendido */
  --text-accent-hover: #F0916A;
  --interactive-accent:#E07A4D;

  --h1-color: #F1ECE0;
  --h2-color: #F1ECE0;
  --h3-color: #D8D2C4;

  --background-modifier-border: #313641;
  --hr-color: #313641;

  --text-selection: rgba(224, 122, 77, 0.20);
  --text-highlight-bg: rgba(224, 122, 77, 0.22);
}

/* =========================================================
   4. Tipografía editorial — títulos serif, cuerpo sans
   ========================================================= */
.published-container .markdown-preview-view h1,
.published-container .markdown-preview-view h2,
.published-container .markdown-preview-view h3,
.published-container .markdown-preview-view h4 {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.published-container .markdown-preview-view h1 {
  font-size: 2.4em;
  margin-bottom: 0.5em;
}

.published-container .markdown-preview-view h2 {
  font-size: 1.7em;
  margin-top: 1.8em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid var(--hr-color);
}

.published-container .markdown-preview-view p,
.published-container .markdown-preview-view li {
  font-family: 'Inter', sans-serif;
}

/* Citas en cursiva serif, con barra óxido */
.published-container blockquote {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 1.08em;
  border-left: 3px solid var(--text-accent);
  background: var(--background-secondary);
  padding: 0.6em 1.2em;
  color: var(--text-muted);
}

/* =========================================================
   5. Nombre del sitio (barra lateral) en mono
   ========================================================= */
.site-body-left-column-site-name {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 1.05em;
}

/* =========================================================
   6. HERO — usa un callout [!hero] al inicio del home
   En la nota escribe:
     > [!hero] El laboratorio
     > Esto no es un portafolio, es un laboratorio...
   ========================================================= */
.published-container .callout[data-callout="hero"] {
  background: var(--background-secondary);
  border: none;
  border-radius: 14px;
  padding: 2.2em 2em;
  margin: 1.5em 0 2.5em;
}
.published-container .callout[data-callout="hero"] .callout-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.8em;
}
.published-container .callout[data-callout="hero"] .callout-icon { display: none; }
.published-container .callout[data-callout="hero"] .callout-content p {
  font-family: 'Spectral', Georgia, serif;
  font-size: 1.5em;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-normal);
  margin: 0 0 0.6em;
}
.published-container .callout[data-callout="hero"] .callout-content p:last-child {
  font-size: 1.05em;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* =========================================================
   7. SALAS — tarjetas tipo grid con cssclasses: list-cards
   En la nota agrega en el frontmatter:  cssclasses: list-cards
   y haz una lista de enlaces; se vuelven tarjetas.
   ========================================================= */
.published-container .list-cards li {
  background: var(--background-primary-alt);
  border: 1px solid var(--background-modifier-border);
  border-radius: 12px;
  padding: 1.1em 1.3em;
  list-style: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.published-container .list-cards li:hover {
  border-color: var(--text-accent);
  transform: translateY(-2px);
}

/* =========================================================
   8. Etiquetas del glosario (acuñada / reinterpretada)
   En la nota usa:  `acuñada`  o  `reinterpretada`  inline code
   ========================================================= */
.published-container code:not([class*="language-"]) {
  background: var(--background-secondary-alt);
  color: var(--text-accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85em;
  padding: 0.15em 0.5em;
  border-radius: 5px;
}

/* =========================================================
   9. Enlaces — subrayado óxido sutil
   ========================================================= */
.published-container a.internal-link,
.published-container a.external-link {
  color: var(--text-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 67, 28, 0.3);
  transition: border-color 0.15s ease;
}
.published-container a.internal-link:hover,
.published-container a.external-link:hover {
  border-bottom-color: var(--text-accent);
}

/* =========================================================
   10. Respiración general
   ========================================================= */
.published-container .markdown-preview-view {
  padding-top: 1.5em;
}
.published-container hr {
  border: none;
  border-top: 1px solid var(--hr-color);
  margin: 2.5em 0;
}