/* ─────────────────────────────────────────────────────────────────────────────
   Lexo — Estilo tipográfico inspirado en LaTeX
   Fuente: EB Garamond (análoga a Computer Modern Serif)
   Layout: columna de lectura + notas al margen (estilo Tufte)
───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,opsz,wght@0,12..72,400;0,12..72,500;1,12..72,400;1,12..72,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap');

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  /* Paleta papel/tinta */
  --paper: #f9f8f5;
  --ink: #18180f;
  --ink-medium: #4a4a3a;
  --ink-light: #7a7a68;
  --ink-lighter: #aeae99;
  --regla: #d6d5cc;
  --acento: #7a1c1c;
  /* borgoña académico */
  --acento-claro: #c45a5a;
  --fondo-cita: #f2f0eb;

  /* Tipografía */
  --font-serif: 'Literata', 'EB Garamond', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* Layout */
  --contenido-max: 1100px;
  --parrafo-normal: 70%;
  /* ancho de párrafo sin nota */
  --parrafo-nota: 90%;
  /* ancho total de párrafo + nota */
  --nota-col: 38%;
  /* 38% del 90% ≈ 34% del total */
  --texto-col: 58%;
  /* 58% del 90% ≈ 52% del total */
  --nota-gap: 4%;
  /* espacio entre texto y nota */
}

/* ── Reset tipográfico ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Encabezado del sitio ──────────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--regla);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header-inner {
  max-width: var(--contenido-max);
  margin: 0 auto;
  padding: 1.1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
}

.site-title {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--ink);
  text-transform: uppercase;
  font-variant-numeric: oldstyle-nums;
}

.site-header nav {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.site-header nav a {
  font-size: 0.875rem;
  color: var(--ink-light);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}

.site-header nav a:hover {
  color: var(--ink);
}

/* ── Contenedor principal ──────────────────────────────────────────────────── */
main {
  max-width: var(--contenido-max);
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}

/* ── Página de inicio (listado de posts) ───────────────────────────────────── */
.home h1.site-description {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-light);
  margin-bottom: 3rem;
  font-style: italic;
  max-width: var(--parrafo-normal);
}

.post-preview {
  border-bottom: 1px solid var(--regla);
  padding: 2rem 0;
  max-width: var(--parrafo-normal);
}

.post-preview:last-of-type {
  border-bottom: none;
}

.post-preview h2 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.post-preview h2 a {
  text-decoration: none;
  color: var(--ink);
}

.post-preview h2 a:hover {
  color: var(--acento);
}

.post-preview time {
  font-size: 0.8rem;
  color: var(--ink-lighter);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.post-preview p {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--ink-medium);
}

/* Paginación */
.paginacion {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--regla);
  max-width: var(--parrafo-normal);
  font-size: 0.875rem;
}

.paginacion a {
  color: var(--ink-medium);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.paginacion a:hover {
  color: var(--acento);
}

/* ── Artículo ──────────────────────────────────────────────────────────────── */
.post>header {
  max-width: var(--parrafo-normal);
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--regla);
}

.post>header h1 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.post-meta time {
  font-size: 0.82rem;
  color: var(--ink-lighter);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.post-meta .category {
  font-size: 0.75rem;
  color: var(--ink-lighter);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.post-meta .category::before {
  content: "§ ";
}

/* ── Cuerpo del artículo ───────────────────────────────────────────────────── */
.post-body {
  counter-reset: nota-counter;
}

/* Todos los elementos de contenido se limitan al ancho de lectura normal */
.post-body p,
.post-body h2,
.post-body h3,
.post-body ul,
.post-body ol,
.post-body>.citation,
.post-body>.ruling,
.post-body>.norma,
.post-body>.law,
.post-body>blockquote {
  max-width: var(--parrafo-normal);
  margin-bottom: 1.1rem;
}

/* También los elementos dentro de section */
.post-body section>p,
.post-body section>h2,
.post-body section>ul,
.post-body section>ol,
.post-body section>.citation,
.post-body section>.ruling,
.post-body section>.norma,
.post-body section>.law,
.post-body section>blockquote {
  max-width: var(--parrafo-normal);
  margin-bottom: 1.1rem;
}

/* ── Secciones ─────────────────────────────────────────────────────────────── */
.post-body section {
  margin-bottom: 2rem;
}

/* ── Encabezados dentro del artículo ──────────────────────────────────────── */
.post-body h2 {
  font-size: 1.15rem;
  font-weight: 500;
  margin-top: 2.8rem;
  margin-bottom: 0.9rem;
  letter-spacing: 0.01em;
  font-variant: small-caps;
  color: var(--ink);
}

.post-body h3 {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
  font-style: italic;
}

/* ── Énfasis ───────────────────────────────────────────────────────────────── */
.post-body em {
  font-style: italic;
}

.post-body strong {
  font-weight: 600;
}

/* ── Links ─────────────────────────────────────────────────────────────────── */
.post-body a {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-color: var(--acento-claro);
  text-underline-offset: 3px;
}

.post-body a:hover {
  text-decoration-color: var(--acento);
}

/* ── Citas textuales (blockquote) ──────────────────────────────────────────── */
.post-body blockquote {
  margin: 1.8rem 0 1.8rem 2.5rem;
  padding: 0;
  font-size: 0.97rem;
  color: var(--ink-medium);
  border: none;
  max-width: calc(var(--parrafo-normal) - 2.5rem);
}

.post-body blockquote p {
  max-width: none;
  margin-bottom: 0.5rem;
  font-style: italic;
}

.post-body blockquote cite {
  display: block;
  text-align: right;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--ink-lighter);
}

.post-body blockquote cite::before {
  content: "— ";
}

/* ── Cita jurisprudencial ──────────────────────────────────────────────────── */
.post-body .citation,
.post-body .ruling {
  margin: 1.5rem 0;
  padding: 0.85rem 1.1rem;
  border-left: 2px solid var(--regla);
  background: var(--fondo-cita);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-medium);
}

.citation-tribunal,
.ruling-court {
  font-variant: small-caps;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.citation-caratula,
.ruling-caption {
  font-style: italic;
}

.citation-fallos,
.ruling-date,
.ruling-number {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--ink-lighter);
}

/* ── Referencia normativa ──────────────────────────────────────────────────── */
.post-body .norma,
.post-body .law {
  margin: 1.2rem 0;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--regla);
  font-size: 0.88rem;
  color: var(--ink-medium);
}

.norma-tipo,
.law-type {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.law-name {
  font-style: italic;
}

.law-article {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--ink-lighter);
}

/* ── NOTAS AL MARGEN ───────────────────────────────────────────────────────── */
/*
   Cuando un párrafo contiene una nota al margen, el párrafo se expande al 90%
   del ancho del contenido. El texto ocupa ~58% de esos 90% y la nota ~38%.

   Layout visual:
   ┌──────────────────────────────────────────────────────────────┐
   │ [texto párrafo ≈52% del total] [gap] [nota ≈34% del total]  │ ← 90% total
   └──────────────────────────────────────────────────────────────┘
   vs. párrafo normal:
   ┌──────────────────────────────┐
   │ [texto ≈70% del total]       │
   └──────────────────────────────┘
*/

.p-con-nota {
  display: grid;
  grid-template-columns: var(--texto-col) var(--nota-gap) var(--nota-col);
  max-width: var(--parrafo-nota);
  margin-bottom: 1.1rem;
  align-items: start;
}

.p-con-nota>p {
  grid-column: 1;
  max-width: none !important;
  margin-bottom: 0;
}

.nota-margen,
.p-con-nota>aside.sidenote {
  grid-column: 3;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-light);
  padding-left: 1rem;
  border-left: 1px solid var(--regla);
  padding-top: 0.15rem;
  font-style: normal;
}

/* Superíndice de referencia dentro del párrafo */
.nota-ref {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
  color: var(--acento);
  margin-left: 1px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* Número al inicio de la nota al margen */
.nota-num {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
  color: var(--acento);
  margin-right: 2px;
}

/* ── Navegación anterior/siguiente ────────────────────────────────────────── */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--parrafo-normal);
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--regla);
  font-size: 0.875rem;
}

.post-nav--collection {
  color: var(--ink-lighter);
  font-size: 0.8rem;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.post-nav__label {
  width: 100%;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-lighter);
}

.post-nav a {
  color: var(--ink-medium);
  text-decoration: none;
  flex: 1;
}

.post-nav a:hover {
  color: var(--acento);
}

.post-nav .nav-prev {
  text-align: left;
}

.post-nav .nav-next {
  text-align: right;
}

/* ── Tags del post (footer) ────────────────────────────────────────────────── */
.post-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--regla);
  max-width: var(--parrafo-normal);
}

.tags {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tag {
  font-size: 0.75rem;
  color: var(--ink-lighter);
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--regla);
}

/* ── Listas ────────────────────────────────────────────────────────────────── */
.post-body ul,
.post-body ol,
.post-body section>ul,
.post-body section>ol {
  padding-left: 1.4rem;
}

.post-body li {
  margin-bottom: 0.35rem;
}

/* ── Pie de página del sitio ───────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--regla);
  padding: 1.5rem 2rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-lighter);
  letter-spacing: 0.04em;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html {
    font-size: 17px;
  }

  :root {
    --parrafo-normal: 85%;
    --parrafo-nota: 100%;
    --texto-col: 55%;
    --nota-col: 40%;
    --nota-gap: 5%;
  }
}

@media (max-width: 640px) {
  html {
    font-size: 16px;
  }

  main {
    padding: 2rem 1.25rem 4rem;
  }

  .site-header-inner {
    padding: 1rem 1.25rem;
  }

  :root {
    --parrafo-normal: 100%;
    --parrafo-nota: 100%;
  }

  /* En móvil las notas al margen se colapsan debajo del párrafo */
  .p-con-nota {
    display: block;
  }

  .nota-margen,
  .p-con-nota>aside.sidenote {
    margin-top: 0.75rem;
    padding: 0.6rem 0.8rem;
    background: var(--fondo-cita);
    border-left: 2px solid var(--regla);
    font-size: 0.82rem;
  }

  .post>header h1 {
    font-size: 1.6rem;
  }
}

/* ── Página (estática) ─────────────────────────────────────────────────────── */
.page h1 {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 1.8rem;
  max-width: var(--parrafo-normal);
}

/* ── Tabla historia clínica ────────────────────────────────────────────────── */
.tabla-hc {
  overflow-x: auto;
  margin: 2rem 0;
}

.tabla-hc table {
  border-collapse: collapse;
  font-size: 0.82rem;
  width: 100%;
}

.tabla-hc th,
.tabla-hc td {
  border: 1px solid var(--regla);
  padding: 0.3rem 0.5rem;
  vertical-align: top;
}

.tabla-hc th {
  background: var(--fondo-cita);
  font-weight: 500;
  white-space: nowrap;
}

.tabla-hc td.fecha {
  white-space: nowrap;
}

.tabla-hc .dia-semana {
  color: var(--ink-light);
  font-style: italic;
}

.tabla-hc .foja-item {
  display: block;
}

.tabla-hc .foja-item a {
  color: var(--acento);
}


/* Popup de notas y referencias */
.popup-btn {
  background: none;
  border: 1px solid var(--regla);
  border-radius: 3px;
  color: var(--acento);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.1rem 0.4rem;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  border: 1px solid var(--regla);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  max-width: 480px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 1.2rem 1.4rem;
  z-index: 100;
}

.popup-close {
  background: none;
  border: none;
  color: var(--ink-light);
  cursor: pointer;
  float: right;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

.popup ul {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.popup li {
  border-bottom: 1px solid var(--regla);
  padding: 0.4rem 0;
}

.popup li:last-child {
  border-bottom: none;
}

.popup li a {
  color: var(--acento);
}

figure.video iframe {
  width: 80%;
  aspect-ratio: 16 / 9;
}

figure {
  margin-bottom: 5rem;
}

figure.foja-crop img {
  max-width: 80%;
}

tr>td.no-existe,
td.unidad-1.col-indicaciones,
td.unidad-1.col-enfermeria,
td.unidad-1.col-controles {
  background-color: #EF9A9A;
}

td.unidad-4.col-indicaciones,
td.unidad-4.col-enfermeria,
td.unidad-4.col-controles {
  background-color: #DCEDC8;
}

tr.fecha-20200312>td {
  background-color: transparent !important;
}

ul>li {
  list-style-position: inside;
}