/*
 * Tema doclaurasalazar — manual de marca "Dra. Laura Salazar"
 * (moodboard oficial: paleta, tipografías y marca definitivas).
 *
 * Sage, hueso y corteza como base; ámbar, terracota y borgoña como acentos.
 * Los ocho colores de la paleta se declaran tal cual vienen del manual y las
 * variantes derivadas (—deep, —soft) existen sólo para cubrir estados de
 * interacción y contraste AA, que la paleta pura no siempre alcanza.
 */
:root {
  /* ── Paleta de marca (valores exactos del manual) ─────────────────── */
  --brand-bone: #eae6e3;       /* hueso — superficies suaves */
  --brand-mist: #c7cbc8;       /* gris salvia — divisores */
  --brand-stone: #989187;      /* piedra cálida — texto secundario */
  --brand-sage: #738063;       /* salvia — color insignia */
  --brand-bark: #5f5143;       /* corteza — color del logotipo */
  --brand-amber: #e09f3e;      /* ámbar */
  --brand-terracotta: #a9553d; /* terracota */
  --brand-burgundy: #721321;   /* borgoña — el destello del isotipo */

  /* ── Tonos derivados ──────────────────────────────────────────────── */
  --brand-paper: #f6f4f2;      /* hueso aclarado, fondo de página */
  --brand-sage-deep: #687359;  /* salvia AA sobre blanco (5.0:1) */
  --brand-sage-dark: #5c664f;  /* salvia para hover */
  --brand-bark-deep: #413830;  /* corteza profunda, pie de página */

  /* ── Colores semánticos — modo claro ──────────────────────────────── */
  --color-primary: var(--brand-sage-deep);
  --color-primary-foreground: #ffffff;
  --color-primary-hover: var(--brand-sage-dark);
  --color-secondary: var(--brand-bone);
  --color-secondary-foreground: var(--brand-bark);
  --color-accent: var(--brand-terracotta);
  --color-accent-foreground: #ffffff;
  --color-background: var(--brand-paper);
  --color-foreground: var(--brand-bark);
  --color-muted: var(--brand-bone);
  --color-muted-foreground: #746e67;
  --color-border: #dcd7d1;
  --color-destructive: var(--brand-burgundy);
  --color-destructive-foreground: #ffffff;
  --color-success: #4c6b50;
  --color-success-foreground: #ffffff;
  --color-warning: var(--brand-amber);
  --color-warning-foreground: #3a2f26;
  --color-card: #ffffff;
  --color-card-foreground: var(--brand-bark);
  --color-sidebar: #ffffff;
  --color-sidebar-foreground: var(--brand-bark);
  --color-footer: var(--brand-bark);          /* nota de la clienta: #5f5143 */
  --color-footer-foreground: var(--brand-bone);
  --color-footer-muted: #d3cbc1;              /* AA sobre corteza (4.8:1) */
  --color-mark-accent: var(--brand-burgundy); /* el destello del logotipo */

  /* ── Tipografía ───────────────────────────────────────────────────── */
  --font-sans: "Mulish", "Muli", system-ui, -apple-system, sans-serif;
  --font-heading: "Didact Gothic", "Mulish", system-ui, sans-serif;
  --editorial-measure: 38rem; /* ~65 caracteres en Mulish a 1.125rem */

  /* ── Espaciado y radios ───────────────────────────────────────────── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ── Sombras (tintadas con corteza, no con negro puro) ────────────── */
  --shadow-sm: 0 1px 2px rgba(65, 56, 48, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(65, 56, 48, 0.07), 0 2px 4px -2px rgba(65, 56, 48, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(65, 56, 48, 0.08), 0 4px 6px -4px rgba(65, 56, 48, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(65, 56, 48, 0.1), 0 8px 10px -6px rgba(65, 56, 48, 0.1);
}

/*
 * Encabezados en Didact Gothic. La fuente sólo tiene un peso (400), así que
 * desactivamos la síntesis para que las utilidades `font-bold`/`font-semibold`
 * que ya existen en las vistas no generen una negrita falsa y deformada: la
 * jerarquía la da el tamaño y el interletraje, como en el manual.
 */
h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading);
  font-synthesis: none;
  font-synthesis-weight: none;
  letter-spacing: -0.01em;
}

/*
 * Microetiqueta versalita — el recurso tipográfico distintivo de la marca
 * ("M É D I C A  Y  S E X Ó L O G A  E D U C A T I V A"). Sin `font-size`
 * para no pelear con las utilidades `text-xs`/`text-sm` de Tailwind.
 */
.eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 400;
}

/* El logotipo se fija en corteza y sólo se aclara sobre fondos oscuros. */
.wordmark {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Modo editorial ──────────────────────────────────────────────────
 * Tratamiento tipográfico para las páginas con mucho texto (Nosotras,
 * comunidad, preguntas frecuentes, términos y el club de escritura).
 *
 * La intención es que se lean como una revista y no como una interfaz:
 * medida corta (~65 caracteres), interlínea amplia, jerarquía por tamaño
 * —Didact Gothic sólo tiene un peso— y dos remates de marca: la capitular
 * en terracota y el ornamento ✶ del isotipo para separar bloques.
 *
 * Se aplica al contenedor del texto; los bloques de dentro no llevan
 * márgenes propios (`space-y-*` de Tailwind sobra aquí), el ritmo vertical
 * lo pone la regla `> * + *`.
 */
.editorial {
  max-width: var(--editorial-measure);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--color-muted-foreground);
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .editorial {
    font-size: 1.125rem;
  }
}

.editorial > * + * {
  margin-top: 1.4em;
}

.editorial-measure {
  max-width: var(--editorial-measure);
  margin-inline: auto;
}

/* Dentro de tarjetas o columnas estrechas: mismo tono, escala de interfaz. */
.editorial--compact {
  max-width: none;
  font-size: 1rem;
  line-height: 1.75;
}

@media (min-width: 640px) {
  .editorial--compact {
    font-size: 1rem;
  }
}

.editorial h2,
.editorial h3 {
  color: var(--color-foreground);
  line-height: 1.3;
}

.editorial h2 {
  font-size: 1.5rem;
  margin-top: 2.2em;
}

.editorial h3 {
  font-size: 1.1875rem;
  margin-top: 1.8em;
}

/* El párrafo que sigue a un título se queda pegado a él, no flota. */
.editorial h2 + p,
.editorial h3 + p {
  margin-top: 0.7em;
}

.editorial strong {
  color: var(--color-foreground);
  font-weight: 600;
}

.editorial a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.editorial a:hover {
  text-decoration-color: currentColor;
}

/* Preflight de Tailwind deja las listas sin viñeta; aquí sí las queremos. */
.editorial ul,
.editorial ol {
  padding-left: 1.35rem;
}

.editorial ul {
  list-style: disc;
}

.editorial ol {
  list-style: decimal;
}

.editorial li::marker {
  color: var(--color-primary);
}

.editorial li + li {
  margin-top: 0.5em;
}

/*
 * Entradilla: el párrafo de arranque que resume la pieza. Va en corteza
 * (no en gris) para que sostenga el peso visual del titular.
 */
.editorial-lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--color-foreground);
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .editorial-lead {
    font-size: 1.375rem;
  }
}

/*
 * Sobre una banda de color la entradilla no puede usar el token de texto:
 * hereda el color de su contenedor. Va aquí y no como utilidad de Tailwind
 * porque theme.css carga después y le ganaría a cualquier `text-*`.
 */
.editorial-lead--hereda {
  color: inherit;
}

/* Frase que respira dentro del flujo: las que la clienta remarca en su texto. */
.editorial-emphasis {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-foreground);
}

/* Cita destacada, con la salvia como filete. */
.editorial-quote {
  border-left: 2px solid var(--color-primary);
  padding-left: 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--color-foreground);
  font-style: normal;
}

/*
 * Capitular. Sólo en el primer párrafo y sólo donde el texto arranca de
 * verdad (de ahí el modificador): en Didact Gothic y terracota, el acento
 * cálido de la paleta.
 */
.editorial--drop-cap > p:first-of-type::first-letter {
  float: left;
  margin: 0.06em 0.09em 0 0;
  font-family: var(--font-heading);
  font-size: 3.2em;
  line-height: 0.82;
  color: var(--color-accent);
}

/*
 * Ornamento de separación — el ✶ del isotipo. El `text-indent` compensa el
 * interletraje que el último glifo deja colgando a la derecha.
 */
.editorial-ornament {
  margin: 2.75em 0;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.7em;
  text-indent: 0.7em;
  color: color-mix(in srgb, var(--color-primary) 80%, transparent);
}

/* Letra pequeña: fechas de actualización, avisos legales, créditos. */
.editorial-note {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted-foreground);
}

/* ── Modo oscuro — se aplica cuando <html> lleva la clase `dark` ─────── */
.dark {
  --color-primary: #96a08a;
  --color-primary-foreground: #1e1a16;
  --color-primary-hover: #a8b19c;
  --color-secondary: #332c25;
  --color-secondary-foreground: var(--brand-bone);
  --color-accent: #c87a5f;
  --color-accent-foreground: #1e1a16;
  --color-background: #221d18;
  --color-foreground: #ede8e2;
  --color-muted: #2e2820;
  --color-muted-foreground: #ada69b;
  --color-border: #3d352c;
  --color-destructive: #d9737f;
  --color-destructive-foreground: #1e1a16;
  --color-success: #82a588;
  --color-success-foreground: #1e1a16;
  --color-warning: #e5ae5c;
  --color-warning-foreground: #1e1a16;
  --color-card: #2b251f;
  --color-card-foreground: #ede8e2;
  --color-sidebar: #1c1813;
  --color-sidebar-foreground: #ede8e2;
  --color-mark-accent: #d9737f;
  --color-footer: var(--brand-bark-deep);     /* el pie baja un tono en oscuro */
  --color-footer-muted: #b5aea5;              /* AA sobre corteza profunda (5.2:1) */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

/* ── Cursor de marca ─────────────────────────────────────────────────
 * Nota de la clienta: el cursor del sitio es la estrella ⭐️ y, mientras
 * se mantiene pulsado el botón, la estrella brillante 🌟. Los dos SVG
 * pintan el emoji con la fuente de emojis del sistema de quien visita
 * (Apple, Segoe, Noto…) y le ponen un triángulo pequeño arriba a la
 * izquierda, donde está el punto activo (2,2), para que se lea como
 * puntero. El lienzo es de 40px, con aire a la derecha, porque el emoji
 * de Apple es más ancho que el de Google y se cortaba en 32px. Sólo en el
 * sitio público (`data-cursor` en el layout); el
 * panel conserva el cursor normal. `data-pressed` lo pone y quita el
 * script de application.js. Los campos de texto conservan el cursor de
 * texto para que se vea dónde se escribe.
 */
html[data-cursor="estrella"],
html[data-cursor="estrella"] * {
  cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ctext x='10' y='32' font-size='22' font-family='Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif'%3E%E2%AD%90%EF%B8%8F%3C/text%3E%3Cpath d='M2 2 L2 12.5 L5.4 9.4 L11 6 Z' fill='%235f5143' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto;
}

html[data-cursor="estrella"][data-pressed],
html[data-cursor="estrella"][data-pressed] * {
  cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ctext x='10' y='32' font-size='22' font-family='Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif'%3E%F0%9F%8C%9F%3C/text%3E%3Cpath d='M2 2 L2 12.5 L5.4 9.4 L11 6 Z' fill='%235f5143' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto;
}

html[data-cursor="estrella"] :is(textarea, [contenteditable="true"],
  input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"],
            [type="radio"], [type="file"], [type="range"], [type="color"])) {
  cursor: text;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Smooth color transitions when toggling dark mode */
html {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

/*
 * Mobile: never let the page pan sideways. `clip` (unlike `hidden`) does not
 * turn <body> into a scroll container, so `position: sticky` in the navbar
 * keeps working and fixed elements (toasts, admin sidebar) are unaffected.
 */
html,
body {
  overflow-x: clip;
}

/*
 * Dark-mode compatibility layer for Tailwind utility classes that don't yet
 * use theme variables. Always-dark surfaces (e.g. the site footer) are scoped
 * out via :not([data-theme-static]).
 */
.dark .bg-white:not([data-theme-static]) { background-color: var(--color-card); }
.dark .bg-white\/80:not([data-theme-static]) { background-color: color-mix(in srgb, var(--color-card) 80%, transparent); }
.dark .bg-gray-50:not([data-theme-static]),
.dark .bg-slate-50:not([data-theme-static]) { background-color: var(--color-muted); }
.dark .bg-gray-100:not([data-theme-static]),
.dark .bg-slate-100:not([data-theme-static]) { background-color: var(--color-muted); }

.dark .text-gray-900:not([data-theme-static]),
.dark .text-slate-900:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-800:not([data-theme-static]),
.dark .text-slate-800:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-700:not([data-theme-static]),
.dark .text-slate-700:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-600:not([data-theme-static]),
.dark .text-slate-600:not([data-theme-static]) { color: var(--color-muted-foreground); }
.dark .text-gray-500:not([data-theme-static]),
.dark .text-slate-500:not([data-theme-static]) { color: var(--color-muted-foreground); }
.dark .text-gray-400:not([data-theme-static]),
.dark .text-slate-400:not([data-theme-static]) { color: var(--color-muted-foreground); }

.dark .border-gray-200:not([data-theme-static]),
.dark .border-slate-200:not([data-theme-static]) { border-color: var(--color-border); }
.dark .border-gray-300:not([data-theme-static]),
.dark .border-slate-300:not([data-theme-static]) { border-color: var(--color-border); }

/*
 * Admin sidebar — fixed full-viewport column.
 * Off-canvas on mobile, permanently visible on desktop (≥1024px).
 * Toggled on mobile via the `open` state class from the mobile-menu controller.
 * On desktop we force `display: flex` so the controller's `hidden` toggling
 * (used for the public navbar mobile menu) can't take the sidebar down.
 */
.admin-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform 200ms ease-out;
}

.admin-sidebar.open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .admin-sidebar {
    display: flex !important;
    width: 16rem;
    max-width: none;
    transform: translateX(0);
    transition: none;
  }
}

/* Admin sidebar — stays white in light mode, uses themed surface in dark mode. */
.dark aside[data-mobile-menu-target="menu"][data-theme-static] {
  background-color: var(--color-sidebar);
  color: var(--color-sidebar-foreground);
}

/* Calendar view toggle buttons */
.active-view {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.active-view:hover {
  opacity: 0.9;
}

.inactive-view {
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-foreground);
}

.inactive-view:hover {
  background-color: var(--color-secondary);
}

/* Pagy pagination */
.pagy.series-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagy.series-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--color-foreground);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.pagy.series-nav > a:hover:not([aria-disabled="true"]) {
  background-color: var(--color-muted);
}

.pagy.series-nav > a[aria-current="page"] {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.pagy.series-nav > a[aria-disabled="true"]:not([aria-current="page"]) {
  color: var(--color-muted-foreground);
  cursor: default;
  opacity: 0.5;
}

.pagy.series-nav > a[role="separator"] {
  opacity: 1;
  letter-spacing: 0.1em;
}

.pagy.series-nav > a[aria-label="Previous"],
.pagy.series-nav > a[aria-label="Next"] {
  font-size: 0;
  overflow: hidden;
}

.pagy.series-nav > a[aria-label="Previous"]::before,
.pagy.series-nav > a[aria-label="Next"]::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.pagy.series-nav > a[aria-label="Previous"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
}

.pagy.series-nav > a[aria-label="Next"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}