/* Panel de gestgram. Estilo «shadcn» del catálogo design-systems, con los tokens del panel de correo de ilustre.es
   (ver DESIGN.md): neutros zinc, bordes de 1 px, botones casi negros y Geist. Todo color, tamaño y espacio es un token de :root. */

@font-face {
  font-family: 'Geist';
  src: url('fuentes/geist.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Code';
  src: url('fuentes/fira-code.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --primary: #111111;
  --primary-hover: #000000;
  --on-primary: #ffffff;
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --secondary-bg: #f4f4f5;
  --secondary-hover: #e4e4e7;
  --text: #111827;
  --muted: #52525b;
  --border: #e4e4e7;
  --input-border: #71717a;
  --dots: #d4d4d8;
  --ring: #111111;
  --success: #15803d;
  --success-bg: #f0fdf4;
  --success-border: #86efac;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  --warning-border: #fcd34d;
  --danger: #dc2626;
  --danger-text: #b91c1c;
  --danger-hover: #991b1b;
  --danger-bg: #fef2f2;
  --danger-border: #fca5a5;
  --info: #1d4ed8;
  --info-bg: #eff6ff;
  --info-border: #93c5fd;

  /* Tipografía: escala 12/14/16/20/24/32 */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;

  /* Espaciado 4/8/12/16/24/32 (+48) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Forma */
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 30px rgb(0 0 0 / 0.12);
  --control-h: 40px;
  --control-h-sm: 32px;
  --ancho: 1120px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  font-feature-settings: 'ss01' on;
}

h1,
h2 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 {
  font-size: var(--fs-32);
  font-weight: 700;
}

h2 {
  font-size: var(--fs-20);
  font-weight: 600;
}

p {
  margin: 0;
}

a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--primary-hover);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1:focus,
main:focus {
  outline: none;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.pequeno {
  font-size: var(--fs-14);
}

.apagado {
  color: var(--muted);
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  z-index: 10;
  padding: var(--sp-2) var(--sp-4);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-md);
}

.saltar:focus {
  top: var(--sp-2);
}

/* ------------------------------------------------------------ acceso */

.acceso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-4);
  background-color: var(--surface-muted);
  background-image: radial-gradient(var(--dots) 1px, transparent 1px);
  background-size: 16px 16px;
}

.acceso-tarjeta {
  width: min(100%, 420px);
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

.acceso-tarjeta .boton {
  width: 100%;
}

/* ------------------------------------------------------------ cabecera */

.cabecera {
  border-bottom: 1px solid var(--border);
  background: rgb(255 255 255 / 0.95);
  position: sticky;
  top: 0;
  z-index: 5;
}

.cabecera-dentro {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  text-decoration: none;
  font-size: var(--fs-14);
}

.marca strong {
  font-size: var(--fs-16);
}

.menu {
  order: 3;
  flex-basis: 100%;
  overflow-x: auto;
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: var(--sp-1) 0;
  list-style: none;
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-14);
  font-weight: 500;
  white-space: nowrap;
}

.menu a:hover {
  color: var(--text);
  background: var(--secondary-bg);
}

.menu a[aria-current='page'] {
  color: var(--text);
  background: var(--secondary-bg);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.usuario {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-14);
}

.usuario-nombre {
  display: none;
}

@media (max-width: 480px) {
  .menu a {
    padding: 0 var(--sp-2);
  }
}

@media (min-width: 900px) {
  .menu {
    order: 0;
    flex-basis: auto;
  }

  .usuario-nombre {
    display: inline;
  }
}

/* ------------------------------------------------------------ contenido */

main#contenido:not(.acceso) {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}

.vista {
  display: grid;
  gap: var(--sp-5);
}

.vista > h2 {
  margin-top: var(--sp-3);
}

.entradilla {
  color: var(--muted);
  max-width: 70ch;
  margin-top: calc(-1 * var(--sp-3));
}

.migas {
  font-size: var(--fs-14);
}

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cifras .tarjeta {
  display: grid;
  gap: var(--sp-1);
}

.cifra {
  font-size: var(--fs-32);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.enlaces,
.notas {
  margin: 0;
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}

.notas {
  font-size: var(--fs-14);
  color: var(--muted);
}

.vacio {
  padding: var(--sp-5);
  border: 1px dashed var(--input-border);
  border-radius: var(--r-md);
  color: var(--muted);
  text-align: center;
}

/* ------------------------------------------------------------ formularios */

.formulario {
  display: grid;
  gap: var(--sp-4);
}

.fila-campos {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}

.campo {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}

.rotulo {
  font-size: var(--fs-14);
  font-weight: 500;
}

.entrada {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  font: inherit;
  font-size: var(--fs-16);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--input-border);
  border-radius: var(--r-md);
}

.entrada::placeholder {
  color: var(--muted);
}

.entrada:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

.entrada[aria-invalid='true'] {
  border-color: var(--danger-text);
  box-shadow: 0 0 0 1px var(--danger-text);
}

.ayuda {
  font-size: var(--fs-14);
  color: var(--muted);
}

.error-campo {
  font-size: var(--fs-14);
  color: var(--danger-text);
  font-weight: 500;
}

.error-campo::before {
  content: '✖ ';
}

.acciones,
.acciones-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.barra-tabla {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.filtro {
  min-width: 200px;
}

/* ------------------------------------------------------------ botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.boton-principal {
  background: var(--primary);
  color: var(--on-primary);
}

.boton-principal:hover {
  background: var(--primary-hover);
  color: var(--on-primary);
}

.boton-secundario {
  background: var(--surface);
  color: var(--text);
  border-color: var(--input-border);
}

.boton-secundario:hover {
  background: var(--secondary-bg);
  color: var(--text);
}

.boton-peligro {
  background: var(--danger-text);
  color: var(--on-primary);
}

.boton-peligro:hover {
  background: var(--danger-hover);
}

.boton-peligro-suave {
  background: var(--surface);
  color: var(--danger-text);
  border-color: var(--danger-text);
}

.boton-peligro-suave:hover {
  background: var(--danger-bg);
}

.boton-fantasma {
  background: transparent;
  color: var(--text);
}

.boton-fantasma:hover {
  background: var(--secondary-hover);
}

.boton-peque {
  min-height: var(--control-h-sm);
  padding: 0 var(--sp-3);
  font-size: var(--fs-14);
}

.boton-icono {
  min-width: var(--control-h-sm);
  min-height: var(--control-h-sm);
  padding: 0;
  font-size: var(--fs-20);
}

.boton:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* ------------------------------------------------------------ etiquetas y avisos */

.etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  white-space: nowrap;
  background: var(--secondary-bg);
  color: var(--text);
}

.etiqueta-ok {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.etiqueta-aviso {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}

.etiqueta-peligro {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.etiqueta-info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info);
}

.avisos:empty {
  display: none;
}

.avisos {
  margin-bottom: var(--sp-5);
}

.aviso {
  display: flex;
  gap: var(--sp-3);
  align-items: start;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  width: 100%;
}

.aviso-texto {
  display: grid;
  gap: var(--sp-1);
}

.aviso-ok {
  background: var(--success-bg);
  border-color: var(--success-border);
  border-left-color: var(--success);
}

.aviso-ok .aviso-texto p:first-child::before {
  content: '✓ ';
  color: var(--success);
  font-weight: 700;
}

.aviso-error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  border-left-color: var(--danger-text);
}

.aviso-error .aviso-texto p:first-child::before {
  content: '! ';
  color: var(--danger-text);
  font-weight: 700;
}

.aviso:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ secreto */

.secreto {
  display: grid;
  gap: var(--sp-3);
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.secreto:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.secreto-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.secreto-valor {
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--input-border);
  border-radius: var(--r-md);
  font-size: var(--fs-16);
  letter-spacing: 0.02em;
  user-select: all;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ tablas */

.tabla-marco {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.tabla th,
.tabla td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.tabla thead th {
  background: var(--surface-muted);
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.tabla tbody th {
  font-weight: 500;
}

.tabla tbody tr:last-child > * {
  border-bottom: 0;
}

.tabla tbody tr:hover {
  background: var(--surface-muted);
}

.valor-dns {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.celda-doble {
  display: grid;
  gap: 2px;
}

meter {
  width: 120px;
  height: 8px;
}

.desplegable summary {
  cursor: pointer;
  font-weight: 500;
  min-height: var(--control-h-sm);
  display: list-item;
}

.zona {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-4);
  overflow-x: auto;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: 1.6;
}

/* En móvil cada fila es una tarjeta: la primera celda hace de título y las demás llevan su cabecera. */
@media (max-width: 760px) {
  .tabla-marco {
    border: 0;
    overflow: visible;
  }

  .tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabla,
  .tabla tbody,
  .tabla tr,
  .tabla th,
  .tabla td {
    display: block;
  }

  .tabla tr {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) 0;
  }

  .tabla tbody tr:last-child > * {
    border-bottom: 0;
  }

  .tabla th,
  .tabla td {
    border: 0;
    padding: var(--sp-2) var(--sp-4);
  }

  .tabla tbody th {
    font-size: var(--fs-16);
  }

  .tabla td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: var(--fs-12);
    color: var(--muted);
    margin-bottom: 2px;
  }

  h1 {
    font-size: var(--fs-24);
  }
}

/* ------------------------------------------------------------ diálogo */

.dialogo {
  width: min(calc(100% - 2 * var(--sp-4)), 480px);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

.dialogo::backdrop {
  background: rgb(0 0 0 / 0.5);
}

.dialogo h2 {
  font-size: var(--fs-20);
  margin-bottom: var(--sp-3);
  overflow-wrap: anywhere;
}

.dialogo p {
  color: var(--muted);
  margin-bottom: var(--sp-3);
}

.dialogo .acciones {
  justify-content: flex-end;
  margin-top: var(--sp-4);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================ gestgram
   Componentes propios del panel de Instagram. Mismos tokens; nada de valores sueltos salvo medidas de maquetación. */

/* El menú tiene 10 secciones: siempre en su propia fila (en 1280 px cabe entera). */
@media (min-width: 900px) {
  .menu {
    order: 3;
    flex-basis: 100%;
  }
}

.contador,
.contador-suave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  margin-left: var(--sp-1);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.contador {
  background: var(--primary);
  color: var(--on-primary);
}

.contador-suave {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

h3 {
  font-size: var(--fs-16);
  font-weight: 600;
  margin: 0;
  overflow-wrap: anywhere;
}

.barra-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.en-linea {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
}

.en-linea .entrada {
  width: auto;
}

.ancho-total {
  width: 100%;
}

.area {
  min-height: calc(var(--control-h) * 2);
  padding: var(--sp-2) var(--sp-3);
  resize: vertical;
  line-height: 1.5;
}

select.entrada {
  padding-right: var(--sp-6);
}

input[type='file'].entrada {
  padding: var(--sp-2) var(--sp-3);
}

.sin-borde {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.sin-borde > legend {
  padding: 0;
  margin-bottom: var(--sp-2);
}

.casilla {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h-sm);
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
}

.casilla input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primary);
}

.lista-errores {
  margin: 0;
  padding-left: var(--sp-5);
}

.texto-largo {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-3);
}

.filtros .campo {
  flex: 1 1 180px;
  max-width: 320px;
}

/* Pestañas (enlaces con aria-current) */
.pestanas {
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.pestanas ul {
  display: flex;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pestanas a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-14);
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--r-md) var(--r-md) 0 0;
}

.pestanas a:hover {
  color: var(--text);
  background: var(--secondary-bg);
}

.pestanas a[aria-current='page'] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--primary);
}

/* Listas de filas (avisos, próximas publicaciones, respuestas guardadas) */
.lista-filas {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.fila-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.fila-lista:last-child {
  border-bottom: 0;
}

.fila-lista > .celda-doble {
  flex: 1 1 240px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fila-lista.leido {
  background: var(--surface-muted);
}

/* Miniaturas */
.miniatura {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--secondary-bg);
}

.miniatura-vacia {
  display: inline-block;
}

.con-miniatura {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Comentarios */
.lista-comentarios {
  display: grid;
  gap: var(--sp-4);
}

.comentario {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  min-width: 0;
}

.comentario-media {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  min-width: 0;
  overflow-wrap: anywhere;
}

.comentario-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.comentario-texto {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.contexto {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--border);
  background: var(--surface-muted);
  overflow-wrap: anywhere;
}

.respuestas {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0 0 0 var(--sp-4);
  list-style: none;
  border-left: 2px solid var(--border);
}

.respuesta p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.respuesta.propia {
  padding: var(--sp-2) var(--sp-3);
  background: var(--info-bg);
  border-radius: var(--r-md);
}

.responder {
  gap: var(--sp-2);
}

/* Instagram: cuadrícula y detalle */
.rejilla-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-celda {
  display: grid;
  gap: var(--sp-1);
  align-content: start;
  padding: var(--sp-2);
  min-width: 0;
}

.media-enlace {
  display: grid;
  gap: var(--sp-2);
  text-decoration: none;
}

.media-imagen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--secondary-bg);
}

.media-texto {
  font-size: var(--fs-14);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.detalle-media {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
}

@media (min-width: 900px) {
  .detalle-media {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

.media-grande,
.vista-previa {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--secondary-bg);
}

/* Ficheros de una publicación */
.rejilla-ficheros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fichero {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fichero .vista-previa {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Variables de las plantillas de hitos */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.chips-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  min-height: var(--control-h-sm);
  padding: 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--text);
  background: var(--secondary-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.chip:hover {
  background: var(--secondary-hover);
}

.grupos-chips {
  display: grid;
  gap: var(--sp-2);
}

.prueba .vista-previa {
  max-width: 360px;
}

.variables {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-1) var(--sp-3);
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-14);
}

.variables dt {
  font-family: var(--font-mono);
}

.variables dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Calendario: eventos con texto de tipo (nunca solo color) */
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.eventos {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.evento {
  display: grid;
  gap: 2px;
  padding: 2px var(--sp-2);
  font-size: var(--fs-12);
  line-height: 1.35;
  border-left: 3px solid var(--input-border);
  border-radius: var(--r-sm);
  background: var(--secondary-bg);
  overflow-wrap: anywhere;
}

.evento-tipo {
  font-weight: 600;
}

.evento-programada {
  background: var(--info-bg);
  border-left-color: var(--info);
}

.evento-programada .evento-tipo {
  color: var(--info);
}

.evento-publicada {
  background: var(--success-bg);
  border-left-color: var(--success);
}

.evento-publicada .evento-tipo {
  color: var(--success);
}

.evento-hito {
  background: var(--warning-bg);
  border-left-color: var(--warning);
}

.evento-hito .evento-tipo {
  color: var(--warning);
}

.evento-efemeride .evento-tipo {
  color: var(--text);
}

.leyenda .evento {
  font-size: var(--fs-14);
}

.mes {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.mes th {
  padding: var(--sp-2);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--muted);
  text-align: left;
}

.mes abbr {
  text-decoration: none;
}

.mes td {
  height: 112px;
  padding: var(--sp-2);
  vertical-align: top;
  border: 1px solid var(--border);
}

.mes td.fuera {
  background: var(--surface-muted);
}

.mes td.hoy {
  box-shadow: inset 0 0 0 2px var(--primary);
}

.dia-numero {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-14);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lista-agenda {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-agenda > li {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
}

.lista-agenda > li.hoy {
  border-color: var(--primary);
}

.lista-agenda .evento {
  font-size: var(--fs-14);
}

/* Móvil: agenda; escritorio: cuadrícula del mes */
.calendario-mes {
  display: none;
}

@media (min-width: 900px) {
  .calendario-mes {
    display: block;
  }

  .agenda {
    display: none;
  }
}

/* Gráfico de seguidores (SVG del servidor, todo por clases) */
.grafico {
  display: block;
  width: 100%;
  height: auto;
}

.grafico-rejilla {
  stroke: var(--border);
  stroke-width: 1;
}

.grafico-eje {
  fill: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
}

.grafico-area {
  fill: var(--secondary-bg);
}

.grafico-linea {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.grafico-punto {
  fill: var(--primary);
}

[hidden] {
  display: none !important;
}

/* En móvil el menú ocupa varias filas: la cabecera no se queda fija para no tapar media pantalla. */
@media (max-width: 899px) {
  .cabecera {
    position: static;
  }
}

/* El SVG se escala con el ancho: en móvil los rótulos del eje van en unidades mayores para seguir legibles (~11 px). */
@media (max-width: 599px) {
  .grafico-eje {
    font-size: 24px;
  }
}