/* =========================================================
   Nota (detalle) — estilos SCOPED a .wrapper-nota
   CSP-friendly (sin inline ni @import)
   ========================================================= */

/* -----------------------
   Tokens del scope
   ----------------------- */
.wrapper-nota{
  /* Tipografía y escala */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --fs-300: 0.98rem;  /* cuerpo */
  --fs-400: 1.06rem;  /* cuerpo + */
  --fs-500: 1.2rem;   /* subtítulo / resumen */
  --fs-600: clamp(1.35rem, 2.5vw, 1.65rem); /* h2 */
  --fs-700: clamp(1.75rem, 3.2vw, 2.2rem);  /* h1 */
  --lh: 1.65;

  /* Colores (claro) */
  --bg: transparent;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #616774;
  --border: #e7e7ea;
  --border-weak: color-mix(in oklab, var(--border), transparent 35%);
  --primary: #0b5fff;
  --primary-ink: #0a3bb3;
  --focus: #0b5fff33;

  /* Botón outline */
  --btn-bg: transparent;
  --btn-ink: var(--primary);
  --btn-border: var(--primary);

  /* Caja y sombras */
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);

  /* Medidas */
  --max-w: 860px;
  --pad-x: clamp(14px, 3.5vw, 28px);

  margin-inline: auto;
  max-width: var(--max-w);
  padding: 18px var(--pad-x) 40px var(--pad-x);
  color: var(--text);
  font: 400 var(--fs-400)/var(--lh) var(--font-sans);
}

@media (prefers-color-scheme: dark){
  .wrapper-nota{
    --surface: #111319;
    --text: #e9e9ee;
    --muted: #a7adbb;
    --border: #262a33;
    --border-weak: color-mix(in oklab, var(--border), transparent 35%);
    --primary: #7aa2ff;
    --primary-ink: #c8d6ff;
    --focus: #7aa2ff33;
    --btn-ink: var(--primary);
    --btn-border: var(--primary);
  }
}

/* Reset local y neutralización de enlaces globales */
.wrapper-nota *{ box-sizing: border-box; }
.wrapper-nota :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,figure){ margin: 0; }
.wrapper-nota img{ max-width: 100%; display: block; }
.wrapper-nota :where(a, a:link, a:visited, a:hover, a:active){
  color: inherit;
  text-decoration: none;
  background-image: none;
  box-shadow: none;
  border: 0;
}
.wrapper-nota :where(a::before, a::after){ content: none !important; }

/* -----------------------
   Breadcrumb
   ----------------------- */
.wrapper-nota .breadcrumb{
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.wrapper-nota .breadcrumb a{
  color: var(--primary);
}
.wrapper-nota .breadcrumb a:hover{ text-decoration: underline; }
.wrapper-nota .breadcrumb [aria-current="page"]{
  color: var(--muted);
}

/* ===== Encabezado de la nota: card apilado y blindaje contra estilos globales ===== */

/* 1) Anular estilos globales aplicados a cualquier <header> */
.wrapper-nota header.nota-encabezado{
  all: unset;                  /* resetea propiedades heredadas del header global */
  display: block;              /* reestablece flujo de bloque */
  box-sizing: border-box;      /* porque all:unset borra el box-sizing */
}

/* 2) Estilo del “hero” apilado (título → meta → resumen → cover) */
.wrapper-nota .nota-encabezado{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 2.8vw, 28px);
  margin-bottom: 20px;
}

.wrapper-nota .nota-titulo{
  font-size: var(--fs-700);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 10px 0;
}

.wrapper-nota .nota-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0 0 10px 0;
}

/* Punto separador entre autor y fecha */
.wrapper-nota .nota-meta .nota-fecha::before{
  content: "•";
  margin: 0 .6ch;
  opacity: .55;
}

/* Resumen como “lead” de lectura */
.wrapper-nota .nota-resumen{
  margin-top: 6px;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
}

/* Imagen de portada, full width bajo el resumen */
.wrapper-nota .nota-cover{
  margin: 14px 0 0 0;
  border-radius: 12px;
  overflow: clip;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.wrapper-nota .nota-cover img{
  display: block;
  width: 100%;
  height: auto;
}

/* Modo oscuro: sutil ajuste de fondo del encabezado */
@media (prefers-color-scheme: dark){
  .wrapper-nota .nota-encabezado{
    background: color-mix(in oklab, var(--surface), white 1%);
  }
}

/* -----------------------
   Cuerpo (prosa Markdown)
   ----------------------- */
.wrapper-nota .nota-contenido{
  margin-top: 22px;
  font-size: var(--fs-400);
}

/* Espaciado vertical cómodo entre elementos */
.wrapper-nota .nota-contenido > * + *{ margin-top: 1em; }
.wrapper-nota .nota-contenido :where(h2){ font-size: var(--fs-600); margin-top: 1.6em; margin-bottom: .4em; }
.wrapper-nota .nota-contenido :where(h3){ font-size: 1.15rem; margin-top: 1.4em; margin-bottom: .35em; }
.wrapper-nota .nota-contenido :where(h4){ font-size: 1.05rem; margin-top: 1.2em; margin-bottom: .3em; }

.wrapper-nota .nota-contenido :where(p, li){ line-height: var(--lh); }
.wrapper-nota .nota-contenido :where(ul, ol){ padding-left: 1.3em; }
.wrapper-nota .nota-contenido li + li{ margin-top: .35em; }

/* Enlaces dentro del artículo */
.wrapper-nota .nota-contenido a{
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.wrapper-nota .nota-contenido a:hover{
  color: var(--primary-ink);
}

/* Citas */
.wrapper-nota blockquote{
  margin: 1.2em 0;
  padding: .8em 1em;
  border-left: 4px solid var(--border);
  background: color-mix(in oklab, var(--surface), transparent 10%);
  color: var(--text);
}

/* Código inline y bloques */
.wrapper-nota code{
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: color-mix(in oklab, var(--surface), black 6%);
  padding: .1em .35em;
  border-radius: 6px;
  border: 1px solid var(--border-weak);
}
@media (prefers-color-scheme: dark){
  .wrapper-nota code{
    background: color-mix(in oklab, var(--surface), white 6%);
  }
}
.wrapper-nota pre{
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.5;
  background: color-mix(in oklab, var(--surface), black 6%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  overflow: auto;
}
@media (prefers-color-scheme: dark){
  .wrapper-nota pre{
    background: color-mix(in oklab, var(--surface), white 6%);
  }
}
.wrapper-nota pre code{
  background: transparent;
  padding: 0;
  border: 0;
}

/* Tablas */
.wrapper-nota .nota-contenido table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
  margin: 1em 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.wrapper-nota .nota-contenido thead th{
  text-align: left;
  background: color-mix(in oklab, var(--surface), black 4%);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}
.wrapper-nota .nota-contenido td{
  padding: 10px 12px;
  border-top: 1px solid var(--border-weak);
}
.wrapper-nota .nota-contenido table:where(.is-scroll){
  display: block;
  overflow-x: auto;
}

/* Figuras y captions */
.wrapper-nota figure{ margin: 1.2em 0; }
.wrapper-nota figcaption{
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: .5em;
  text-align: center;
}

/* Notas al pie / hr */
.wrapper-nota hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0 1.2rem 0;
  height: 0;
}

/* -----------------------
   Enlace externo y volver
   ----------------------- */
.wrapper-nota .nota-link-externo{
  margin-top: 18px;
  font-size: 1rem;
}
.wrapper-nota .nota-link-externo a{
  color: var(--primary);
  text-decoration: underline;
}
.wrapper-nota .nota-link-externo a:hover{ color: var(--primary-ink); }

.wrapper-nota .nota-volver{
  margin-top: 24px;
}

/* Botón outline reutilizado (blindado contra estilos globales) */
.wrapper-nota .btn-outline{
  --_ink: var(--btn-ink);
  --_bd: var(--btn-border);

  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;

  padding: 9px 14px;
  font: 600 var(--fs-300)/1.25 var(--font-sans);
  color: var(--_ink);
  background-color: var(--btn-bg);

  border: 1.5px solid var(--_bd);
  border-radius: calc(var(--radius) - 6px);

  /* Blindaje anti-subrayados / pseudos globales */
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.wrapper-nota .btn-outline:hover{
  transform: translateY(-1px);
  background-color: color-mix(in oklab, var(--_ink), transparent 92%);
  border-color: var(--_ink);
}
.wrapper-nota .btn-outline:active{ transform: translateY(0); }
.wrapper-nota .btn-outline:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.wrapper-nota .btn-outline::before,
.wrapper-nota .btn-outline::after{ content: none !important; }

/* -----------------------
   Accesibilidad / motion
   ----------------------- */
@media (prefers-reduced-motion: reduce){
  .wrapper-nota *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------
   Micro-responsivo
   ----------------------- */
@media (max-width: 420px){
  .wrapper-nota{ --fs-400: 1.02rem; }
  .wrapper-nota .nota-meta{ font-size: .98rem; }
}

/* -----------------------
   Impresión
   ----------------------- */
@media print{
  .wrapper-nota{
    color: #000;
    padding: 0 0 12px 0;
    max-width: 100%;
  }
  .wrapper-nota .breadcrumb,
  .wrapper-nota .nota-link-externo,
  .wrapper-nota .nota-volver{ display: none; }
  .wrapper-nota .nota-cover{
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .wrapper-nota .nota-contenido pre{
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}
.nota-compartir { margin: 1.5rem 0 1rem; }
.share-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.share-btn {
  display: inline-block; padding: .5rem .75rem; border: 1px solid var(--borde, #ddd);
  border-radius: .5rem; text-decoration: none; font-weight: 600; line-height: 1;
}
.share-btn:hover { text-decoration: underline; }

/* =========================================================
   OVERRIDES MÓVILES – COMPARTIR EN REDES (añadir al final)
   Objetivo: mejor tactilidad, layout y legibilidad en <= 640px
   ========================================================= */

/* Base mobile-first (no rompe escritorio) */
.nota-compartir {
  margin: 1.25rem 0 1rem;
  padding-top: .5rem;
}

/* 1) Layout: de fila a "grid fluido" en móviles
      - Botones del mismo ancho visual, 2–3 por fila según ancho
      - Evita que los textos salten y mantiene tap targets >44px
*/
@supports (grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))) {
  .share-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .55rem .6rem;
    padding-top: .75rem;
  }
}

/* Fallback si el navegador no soporta grid (mantiene flex + wrap) */
@supports not (grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))) {
  .share-list {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .6rem;
  }
  .share-list > li {
    flex: 1 1 calc(50% - .6rem); /* ~2 por fila en móviles */
    min-width: 9.5rem;
  }
}

/* 2) Botón: mayor área táctil, tipografía leíble y contenido centrado */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .7rem .9rem;
  min-height: 2.75rem;   /* >= 44px recomendados */
  border-radius: .65rem;
  font-size: .98rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;    /* evita cortes incómodos en marcas cortas */
}

/* Si un botón requiere dos líneas (por traducciones/idiomas), permitilo */
@media (max-width: 380px) {
  .share-btn {
    white-space: normal;
    line-height: 1.15;
    padding: .65rem .8rem;
  }
}

/* 3) Iconografía SVG (si los usás): tamaño y separación adecuados */
.share-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}

/* 4) Estados de interacción pensados para pantalla táctil */
.share-btn:hover {
  /* En móvil casi no hay :hover; mantenemos cambios sutiles */
  transform: translateY(0);
}
.share-btn:active {
  transform: translateY(1px);
}
.share-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring, #2563eb) 35%, transparent);
}

/* 5) Variante “compacta con icono” automática en teléfonos muy angostos
      - Muestra solo el icono y oculta el label visual, manteniendo accesibilidad
      - Activala solo si usás <svg> + <span class="sr-only">Texto</span>
*/
@media (max-width: 340px) {
  .share-btn span:not(.sr-only) { display: none; }  /* si ponés el label en un <span> */
  .share-btn { min-width: 2.75rem; padding: .65rem; }
}

/* 6) Modo dark: usa las variables si ya existen; agrega fallbacks */
@media (prefers-color-scheme: dark) {
  .share-btn {
    background: var(--share-bg, #151515);
    color: var(--share-text, #f2f2f2);
    border-color: var(--share-border, #2b2b2b);
  }
  .share-btn:hover {
    background: var(--share-bg-hover, #1e1e1e);
    border-color: var(--share-border-hover, #343434);
  }
}

/* 7) Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  .share-btn { transition: none; }
}

/* 8) Opción alternativa (válida si preferís ‘chips’ con scroll horizontal):
   - Descomentar este bloque y comentar el grid para usar carrusel táctil.
*/
/*
@media (max-width: 640px) {
  .share-list {
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: .75rem .25rem 0;
    margin: 0 -.25rem;             // sangría suave a los bordes
    scrollbar-width: thin;
  }
  .share-list > li { flex: 0 0 auto; }
  .share-btn { white-space: nowrap; }
}
*/