/* =====================================================================
   NUMX — hoja única. Móvil primero.

   Dirección: fondo blanco, tipo negro y un acento vivo solo en la
   marca y en la acción. Los huecos sin foto son gris claro, no un
   disco negro.
   ===================================================================== */
/* Las fuentes ya NO se piden desde aqui. Un @import obliga al navegador a
   descargar esta hoja, leerla, descubrir el import y solo entonces pedir las
   fuentes: tres viajes en cadena antes de pintar una letra. Ahora van en un
   <link> de base.html, que se descarga a la vez que esta hoja. */

:root{
  /* superficies — papel, no gris de aplicación */
  --fondo:#FFFFFF;
  --superficie:#FFFFFF;
  --hueco:#F3F3F3;

  /* texto */
  --tinta:#121212;
  --tinta-media:#3A3A3A;
  --gris:#8A8A8A;
  --linea:#ECECEC;

  /* Un rojo vivo, no el azul de siempre ni el bronce de catálogo viejo. */
  --acento:#FF3B1F;
  --acento-fuerte:#E02A12;
  --acento-tenue:#FFF1EE;
  --bronce:#FF3B1F;
  --alerta:#C62828;
  --alerta-tenue:#FDECEC;

  /* forma y ritmo */
  --mm:3.7795px;              /* 1 mm a 96 ppp. El visitante lo calibra. */
  --lupa:1;                   /* Ampliacion sobre el tamano real. */
  --r:8px;
  --r-chico:4px;
  --paso:clamp(.85rem,2.2vw,1.2rem);
  --aire:clamp(1.15rem,3vw,1.8rem);
  --ancho:1160px;
  --sombra:0 1px 2px rgba(15,17,21,.04), 0 4px 16px -6px rgba(15,17,21,.09);
  --sombra-alta:0 2px 6px rgba(15,17,21,.05), 0 18px 40px -14px rgba(15,17,21,.18);
  --display:"Outfit","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font:400 16px/1.65 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:-.006em;
}
img{max-width:100%;display:block}
a{color:var(--acento);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--acento-fuerte)}
.prosa a,footer a,dd a{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(255,59,31,.35)}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:8px}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--paso)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
hr{border:0;border-top:1px solid var(--linea)}
main.contenedor>section{margin-bottom:var(--aire)}

/* ---------------------------------------------------------- tipografía */
/* 1.15 y no 1.08: por debajo de eso la tilde de las mayusculas acentuadas
   (N con tilde, A con tilde) queda fuera de la caja y el navegador la corta. */
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0;letter-spacing:-.03em}
h1{font-size:clamp(1.85rem,4.2vw,2.55rem);font-weight:700}
h2{font-size:clamp(1.35rem,4vw,1.75rem);font-weight:600;letter-spacing:-.025em}
h3{font-size:1.15rem;font-weight:600}
.id{font-family:var(--mono);font-size:.75rem;color:var(--gris)}
.rotulo{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;
  color:var(--acento);font-weight:600}
.apunte{color:var(--gris);font-size:.94rem;line-height:1.6}

/* ------------------------------------------------------------- iconos */
.ico{width:1.05em;height:1.05em;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* iconos puestos desde CSS en sitios donde la plantilla no los lleva */
.buscador .boton::before,
.filtros>summary::before,
.boton.riesgo::before,
.si::before{
  content:"";width:1.05em;height:1.05em;display:inline-block;flex:0 0 auto;
  background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.buscador .boton::before{-webkit-mask-image:var(--i-lupa);mask-image:var(--i-lupa)}
.filtros>summary::before{-webkit-mask-image:var(--i-filtro);mask-image:var(--i-filtro);
  margin-right:.5rem;vertical-align:-.15em}
.boton.riesgo::before{-webkit-mask-image:var(--i-papelera);mask-image:var(--i-papelera)}
.si::before{-webkit-mask-image:var(--i-check);mask-image:var(--i-check);
  vertical-align:-.15em;margin-right:.15rem}
:root{
  --i-lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  --i-filtro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M7 12h10M10 17h4'/%3E%3C/svg%3E");
  --i-papelera:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9.5 7V4.5h5V7M6.5 7l.9 12.5h9.2L17.5 7'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ cabecera */
.barra{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--linea)}
/* En movil la barra se apila: marca arriba y navegacion en una tira que se
   desliza. Antes iba en una sola fila con flex-wrap y los enlaces caian a
   renglones sueltos, que es lo que se veia apelotonado. */
.barra-int{display:flex;align-items:center;gap:.4rem;min-height:66px}
@media (max-width:719px){
  .barra-int{flex-direction:column;align-items:stretch;gap:0;
    min-height:0;padding-top:.5rem;padding-bottom:.35rem}
  .barra-int .marca{align-self:flex-start;font-size:1.3rem;padding:.15rem 0}
  .barra nav{margin-left:0;flex-wrap:nowrap;overflow-x:auto;gap:.15rem;
    padding-bottom:.15rem;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch}
  .barra nav::-webkit-scrollbar{display:none}
  .barra nav a,.barra nav button{flex:0 0 auto;white-space:nowrap;
    padding:.45rem .6rem;font-size:.85rem}
  .barra nav .avatar{width:28px;height:28px}
}
.marca{font-family:var(--display);font-size:1.45rem;font-weight:700;
  letter-spacing:-.05em;color:var(--tinta);display:inline-flex;align-items:center;
  gap:.45rem}
.marca:hover{color:var(--tinta)}
.marca img{width:28px;height:28px;display:block}
.marca span{color:var(--bronce)}
.barra nav{margin-left:auto;display:flex;align-items:center;gap:.1rem;flex-wrap:wrap}
.barra nav a{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;
  font-weight:500;color:var(--tinta-media);padding:.5rem .75rem;border-radius:10px;
  transition:background .15s ease,color .15s ease}
.barra nav a:hover{background:var(--hueco);color:var(--tinta)}
.barra nav a.boton{color:#fff}
.barra nav .ico{color:var(--gris)}
.barra nav a:hover .ico{color:var(--acento)}
.avatar{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px var(--linea)}

/* -------------------------------------------------- campos y botones */
input,select,textarea{
  font:inherit;font-size:.95rem;padding:.75rem .9rem;width:100%;color:var(--tinta);
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--r-chico);
  transition:border-color .15s ease,box-shadow .15s ease}
input:hover,select:hover,textarea:hover{border-color:#D6DBE4}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px rgba(255,59,31,.14)}
textarea{min-height:140px;resize:vertical;line-height:1.6}
input[type=file]{padding:.6rem;font-size:.85rem;background:var(--hueco);
  border-style:dashed}
input[type=range]{padding:0;background:transparent;border:0;accent-color:var(--acento)}
input[type=checkbox]{width:auto;accent-color:var(--acento)}
label{display:block;font-size:.82rem;color:var(--tinta-media);font-weight:600;
  margin:1.1rem 0 .35rem}

.buscador{display:flex;gap:.6rem;margin:calc(var(--paso)*1.3) 0}
.buscador input{flex:1;min-width:0;padding:1.05rem 1.1rem;border-radius:var(--r);
  font-size:1rem;background:var(--superficie);border-color:var(--linea)}
.buscador .boton{padding-left:1.4rem;padding-right:1.4rem}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font:600 .92rem/1 "Inter",sans-serif;letter-spacing:-.01em;
  padding:.85rem 1.4rem;border-radius:var(--r);cursor:pointer;white-space:nowrap;
  border:1px solid transparent;background:var(--acento);color:#fff;
  transition:background .15s ease}
.boton:hover{background:var(--acento-fuerte);color:#fff}
.boton:active{transform:translateY(0)}
.boton.plano{background:var(--superficie);color:var(--tinta);border-color:var(--linea)}
.boton.plano:hover{background:var(--acento-tenue);color:var(--acento-fuerte);
  border-color:transparent;box-shadow:none}
.boton.riesgo{background:transparent;color:var(--alerta);border-color:#F6D3D8}
.boton.riesgo:hover{background:var(--alerta);color:#fff;border-color:transparent;
  box-shadow:none}
.boton.chico{padding:.5rem .9rem;font-size:.82rem}

/* --------------------------------------------------------------- avisos */
.avisos{margin:var(--paso) 0 0}
.aviso{padding:.95rem 1.2rem;border-radius:var(--r-chico);font-size:.93rem;
  margin-bottom:.5rem;background:var(--acento-tenue);color:var(--acento-fuerte)}
.aviso.error{background:var(--alerta-tenue);color:#A81E33}

/* ---------------------------------------- tarjetas con la foto grande */
.rejilla{display:grid;gap:1.15rem;margin:var(--paso) 0;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.ficha{background:transparent;border-radius:0;padding:0 0 .2rem;
  color:inherit;display:flex;flex-direction:column;gap:.3rem}
.ficha:hover{color:inherit}
.ficha .miniatura{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  border-radius:50%;background:#F2F2F2;margin-bottom:.55rem}
.ficha .miniatura img{width:100%;height:100%;object-fit:cover;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.ficha:hover .miniatura img{transform:scale(1.05)}
.ficha .miniatura.vacia{color:#A3A3A3;font-size:.7rem}
.ficha .id,.ficha strong,.ficha .apunte,.ficha .rotulo,.ficha .marca-chip{
  margin-left:.35rem;margin-right:.35rem}
.ficha strong{font-family:var(--display);font-size:1.02rem;line-height:1.25;
  font-weight:600;letter-spacing:-.02em}
.ficha .rotulo{color:var(--gris)}
.ficha .marca-chip{align-self:flex-start;margin-top:.35rem}

/* ------------------------------ VISOR A TAMAÑO REAL (el elemento fuerte) */
.visor{background:var(--superficie);border-radius:calc(var(--r) + 6px);
  padding:calc(var(--paso)*1.6) var(--paso);margin:var(--paso) 0 var(--aire);
  box-shadow:var(--sombra)}
.caras{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,6vw,3.5rem);
  justify-content:center;align-items:flex-start}
.cara{text-align:center}
/* el tamaño lo pone la plantilla en línea, a partir del diámetro real */
.moneda-real{border-radius:50%;overflow:hidden;margin:0 auto;background:var(--hueco);
  box-shadow:0 1px 3px rgba(15,17,21,.10), 0 22px 44px -22px rgba(15,17,21,.45)}
.moneda-real img{width:100%;height:100%;object-fit:cover}
.moneda-real.vacia{display:grid;place-items:center;color:var(--gris);font-size:.72rem;
  padding:.6rem;text-align:center;box-shadow:inset 0 0 0 2px var(--linea)}
.cara figcaption{margin-top:.9rem;font-size:.72rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.regla{height:12px;margin:1.8rem auto 0;max-width:100%;opacity:.5;
  background:repeating-linear-gradient(90deg,
    var(--gris) 0 1px, transparent 1px calc(var(--mm) * 1));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.calibrar{margin-top:1.6rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  font-size:.83rem;color:var(--gris);background:var(--hueco);
  padding:.9rem 1.1rem;border-radius:var(--r-chico)}
.calibrar label{margin:0;color:var(--gris);font-weight:500}
.calibrar input[type=range]{flex:1;min-width:150px}

/* ----------------------------------------------------------- bloques */
.datos{background:var(--superficie);border-radius:var(--r);margin:0 0 1.25rem;
  overflow:hidden;box-shadow:var(--sombra)}
.datos h2{padding:calc(var(--paso)*.9) var(--paso) .2rem}
.datos .cuerpo{padding:1rem var(--paso) calc(var(--paso)*1.1)}
.datos>.tabla-envoltura{margin-top:.9rem}
aside .datos:last-child{margin-bottom:0}

dl.pares{display:grid;grid-template-columns:1fr;gap:0;margin:0}
dl.pares>div{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;
  border-bottom:1px solid var(--linea)}
dl.pares>div:last-child{border-bottom:0}
dl.pares dt{color:var(--gris);font-size:.87rem;flex:0 0 auto}
dl.pares dd{margin:0;text-align:right;font-size:.94rem;font-weight:500}
.prosa{font-size:1.05rem;line-height:1.75;color:var(--tinta-media)}
.prosa p{margin:0 0 1.15rem;max-width:70ch}
.prosa p:last-child{margin-bottom:0}

details>summary{cursor:pointer;font-weight:600;font-size:.92rem;list-style:none;
  padding:.6rem 1rem;border-radius:999px;background:var(--hueco);color:var(--tinta);
  display:inline-block;transition:background .15s ease,color .15s ease}
details>summary:hover{background:var(--acento-tenue);color:var(--acento-fuerte)}
details>summary::-webkit-details-marker{display:none}
details[open]>summary{margin-bottom:.6rem}

/* ------------------------------------------------------------- tablas */
.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:420px}
th,td{text-align:left;padding:.8rem .9rem;white-space:nowrap;vertical-align:top;
  border-bottom:1px solid var(--linea)}
th{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;color:var(--gris);
  font-weight:600;background:var(--superficie);position:sticky;top:0}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--acento-tenue)}
tbody tr:last-child td{border-bottom:0}
td.envuelve{white-space:normal;min-width:220px;line-height:1.55}
td.num{text-align:right;font-family:var(--mono);font-size:.84rem;
  font-variant-numeric:tabular-nums}

/* Años en filas, denominaciones en columnas. El ancho lo marca el texto,
   no el hueco de la página: si no, las celdas vacías se estiran. */
.tabla-periodo{width:max-content;min-width:0;font-size:.78rem}
.tabla-periodo th,.tabla-periodo td{padding:.28rem .5rem;vertical-align:middle;
  text-transform:none;letter-spacing:0;font-size:.72rem}
.tabla-periodo .eje{position:sticky;left:0;z-index:1;background:#fff;text-align:right;
  font-variant-numeric:tabular-nums;box-shadow:1px 0 0 var(--linea)}
.tabla-periodo thead .eje{z-index:3;background:var(--superficie)}
.tabla-periodo td a{display:block;font-family:var(--mono);font-size:.68rem;
  line-height:1.35;white-space:nowrap}
ul.periodos{list-style:none;padding:0;margin:var(--paso) 0;display:grid;gap:.35rem}
ul.periodos li{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:baseline}
.si{color:var(--acento);font-weight:600;display:inline-flex;align-items:center}
.no{color:#CDD3DD}
.vacio-dato{color:#A3AAB6}

/* ------------------------------------------------------------ etiquetas */
.marca-chip{display:inline-block;font-size:.72rem;font-weight:500;
  padding:.25rem .7rem;border-radius:999px;color:var(--tinta-media);
  background:var(--hueco)}
.marca-chip.oro{color:var(--acento-fuerte);background:var(--acento-tenue)}
.marca-chip.pendiente{color:var(--alerta);background:var(--alerta-tenue)}

/* -------------------------------------------------------------- filtros */
.filtros{background:var(--superficie);border-radius:var(--r);
  padding:1rem var(--paso);margin:var(--paso) 0;box-shadow:var(--sombra)}
.filtros>summary{background:transparent;padding:.4rem 0;font-size:.98rem;
  font-family:var(--display);letter-spacing:-.02em}
.filtros>summary:hover{background:transparent;color:var(--acento)}
.campos{display:grid;gap:.4rem 1.25rem;grid-template-columns:1fr;margin-top:.4rem}
.acciones{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.35rem}

/* ------------------------------------------------------ recorte asistido */
.recorte{margin-top:.9rem}
.recorte canvas{width:100%;max-width:340px;aspect-ratio:1;border-radius:var(--r);
  background:var(--hueco);box-shadow:var(--sombra);touch-action:none;cursor:grab;
  display:block}
.recorte canvas:active{cursor:grabbing}
.recorte .mandos{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  margin-top:.8rem;max-width:340px}
.recorte .mandos input[type=range]{flex:1;min-width:110px}

/* ------------------------------------------------------------------ pie */
footer{margin-top:var(--aire);padding:calc(var(--paso)*1.2) 0 calc(var(--paso)*1.6);
  font-size:.85rem;color:var(--gris);border-top:1px solid var(--linea);
  background:var(--superficie)}
footer .contenedor{display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between}

/* Cifra grande del total en «Mi colección»: la plantilla trae la fuente en
   línea, así que hay que ganarle con !important. */


/* ------------------------------------------------------------ escritorio */
@media (min-width:720px){
  dl.pares{grid-template-columns:1fr 1fr;column-gap:3rem}
  .campos{grid-template-columns:repeat(3,1fr)}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1.5rem}
}
@media (min-width:960px){
  .doble{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--paso);
    align-items:start}
}

/* ------------------------------------------------------------- detalles */
::selection{background:var(--acento-tenue);color:var(--acento-fuerte)}
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-thumb{background:#D8DDE6;border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#C3CAD6;background-clip:content-box}

@media (prefers-reduced-motion:no-preference){
  .visor .moneda-real{animation:aparece .55s cubic-bezier(.2,.7,.3,1) both}
  .visor .cara:nth-child(2) .moneda-real{animation-delay:.08s}
}
@keyframes aparece{from{opacity:0;transform:scale(.94) translateY(8px)}
  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
@media print{.barra,footer,.calibrar,.boton,.filtros{display:none}
  body{background:#fff}.datos,.visor,.ficha{box-shadow:none}}

/* ---- Edicion en su sitio -------------------------------------------------
   Los campos se ven como texto corrido y solo se muestran como campo al
   tocarlos. Es la misma etiqueta <input> de siempre: sin JavaScript por medio,
   asi que no hay nada que se pueda romper y dejar la ficha sin editar. */
.bloque-edicion{margin-top:calc(var(--paso)*1.5)}
.bloque-edicion h2{font-size:1.05rem;margin-bottom:.5rem;
  padding-bottom:.3rem;border-bottom:1px solid var(--linea)}
.campos-edicion{display:grid;gap:.1rem 1.2rem;grid-template-columns:1fr}
@media (min-width:720px){.campos-edicion{grid-template-columns:1fr 1fr}}
.campos-edicion .campo.ancho{grid-column:1/-1}
.campos-edicion .campo{display:grid;grid-template-columns:11rem 1fr;
  align-items:baseline;gap:.6rem;padding:.35rem 0;border-bottom:1px dotted var(--linea)}
@media (max-width:719px){
  .campos-edicion .campo{grid-template-columns:1fr;gap:.1rem}
}
.campos-edicion label{font-size:.8rem;color:var(--gris);font-weight:500}

/* Historia: el cuadro de texto se cambia por un editor chico. Sin negritas
   sueltas por la página: solo lo que cabe en un relato. */
.editor-html{border:1px solid var(--linea);border-radius:14px;background:#fff;overflow:hidden}
.editor-barra{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;padding:.4rem;
  background:var(--hueco);border-bottom:1px solid var(--linea)}
.editor-sep{width:1px;align-self:stretch;background:var(--linea);margin:.15rem .1rem}
.editor-barra button{min-height:2rem;padding:.2rem .55rem;border:1px solid transparent;
  border-radius:8px;background:#fff;color:var(--tinta);font:inherit;font-size:.78rem;
  font-weight:600;cursor:pointer;line-height:1.2}
.editor-barra button:hover{border-color:var(--acento);color:var(--acento);
  background:var(--acento-tenue)}
.editor-barra button:disabled{opacity:.45;cursor:progress}
.editor-barra button.activo{background:var(--acento);color:#fff;border-color:var(--acento)}
.editor-html.viendo-codigo .editor-barra button:not([data-cmd="codigo"]):not(.activo){
  opacity:.38;pointer-events:none}
.editor-estado{margin:0;padding:.35rem .75rem;font-size:.78rem;color:var(--gris);
  background:#fff;border-bottom:1px solid var(--linea)}
.editor-estado.error{color:var(--alerta)}
.editor-hoja{min-height:9rem;padding:.75rem .9rem;outline:none}
.editor-codigo{display:none;width:100%;min-height:12rem;margin:0;padding:.75rem .9rem;
  border:0;resize:vertical;background:#0f1115;color:#e8eaef;
  font:13px/1.55 var(--mono);tab-size:2;border-radius:0}
.editor-codigo:focus{outline:none;box-shadow:inset 0 0 0 2px var(--acento)}
.editor-html.viendo-codigo .editor-hoja{display:none}
.editor-html.viendo-codigo .editor-codigo{display:block}
.editor-hoja:focus{box-shadow:inset 0 0 0 2px var(--acento-tenue)}
.editor-hoja p,.prosa.historia p{margin:0 0 .7rem}
.editor-hoja p:last-child,.prosa.historia p:last-child{margin-bottom:0}
.prosa.historia ul,.prosa.historia ol,.editor-hoja ul,.editor-hoja ol{
  margin:.35rem 0 .7rem 1.15rem;padding:0}
.prosa.historia h3,.editor-hoja h3{font-size:1.02rem;margin:.2rem 0 .4rem}
.prosa.historia blockquote,.editor-hoja blockquote{
  margin:.4rem 0 .7rem;padding-left:.8rem;border-left:2px solid var(--linea);color:var(--tinta-media)}
.prosa.historia hr,.editor-hoja hr{border:0;border-top:1px solid var(--linea);margin:1rem 0}
.prosa.historia img,.editor-hoja img{display:block;max-width:100%;height:auto;
  margin:.45rem auto;border-radius:12px}
.prosa.historia figure,.editor-hoja figure{margin:.7rem 0}
.prosa.historia figcaption,.editor-hoja figcaption{
  margin-top:.3rem;font-size:.8rem;line-height:1.4;color:var(--gris);text-align:center}

input.plano,textarea.plano{width:100%;border:1px solid transparent;background:transparent;
  border-radius:8px;padding:.3rem .45rem;font:inherit;color:var(--tinta);
  transition:border-color .12s,background .12s}
input.plano:hover,textarea.plano:hover{background:var(--hueco)}
input.plano:focus,textarea.plano:focus{background:#fff;border-color:var(--acento);
  outline:none;box-shadow:0 0 0 3px rgba(255,59,31,.14)}
input.plano::placeholder,textarea.plano::placeholder{color:var(--gris);font-style:italic}
textarea.plano{resize:vertical}
/* Un campo tocado se marca, para saber que se va a guardar. */
input.plano.tocado,textarea.plano.tocado{background:#fffbe6;border-color:#e8c96a}

.fila-edicion{display:grid;gap:.35rem .8rem;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));
  align-items:end;padding:.7rem 0;border-bottom:1px solid var(--linea)}
.fila-edicion .ancho{grid-column:1/-1}
.fila-edicion label{display:flex;flex-direction:column;font-size:.75rem;
  color:var(--gris);gap:.15rem}
.fila-edicion .acciones{grid-column:1/-1;display:flex;gap:.4rem;flex-wrap:wrap}

.barra-guardar{position:sticky;bottom:0;z-index:20;display:flex;
  align-items:center;justify-content:flex-end;gap:.8rem;
  padding:.7rem var(--paso);margin-top:var(--paso);
  background:rgba(255,255,255,.92);border-top:1px solid var(--linea);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* ---- Ajuste de escala, plegado ------------------------------------------
   Se usa una vez por dispositivo. Cerrado ocupa una linea; abierto, lo que
   necesite. Antes los dos bloques estaban siempre desplegados y le quitaban
   sitio a las fotos, que es a lo que se viene. */
.ajuste-escala{margin-top:1rem}
.ajuste-escala > summary{cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;gap:.4rem;font-size:.82rem;color:var(--gris);
  padding:.35rem .7rem;border:1px solid var(--linea);border-radius:999px;
  background:#fff;transition:border-color .12s,color .12s}
.ajuste-escala > summary::-webkit-details-marker{display:none}
.ajuste-escala > summary::before{content:"⇔";font-size:.95rem;line-height:1}
.ajuste-escala > summary:hover{border-color:var(--acento);color:var(--acento)}
.ajuste-escala[open] > summary{margin-bottom:.8rem;border-color:var(--acento);
  color:var(--acento)}
.ajuste-escala .calibrar{margin-top:0}
@media print{.ajuste-escala{display:none}}


/* ---- Controles de escala, compactos --------------------------------------
   Dos filas de una linea. Antes cada control era una caja con su propio fondo
   y su boton de texto largo; ocupaban mas que las fotos. */
.controles-escala{display:grid;gap:.3rem}
.controles-escala .control{display:flex;align-items:center;gap:.5rem;
  font-size:.78rem;color:var(--gris);background:var(--hueco);
  border-radius:10px;padding:.3rem .6rem}
.controles-escala .control label{margin:0;font-weight:500;white-space:nowrap;
  min-width:7.5rem}
.controles-escala .control input[type=range]{flex:1;min-width:90px;margin:0}
.controles-escala .control .id{font-size:.72rem;min-width:3.2rem;text-align:right}
.controles-escala .control .boton{padding:.15rem .45rem;font-size:.85rem;
  line-height:1;border-radius:8px}
@media (max-width:520px){
  .controles-escala .control label{min-width:0;font-size:.72rem}
}

.patron-tarjeta{margin-top:.6rem}
.patron-tarjeta > summary{cursor:pointer;font-size:.78rem;color:var(--gris)}
/* La tarjeta patron NO lleva max-width: si se encoge para caber, deja de medir
   lo que dice y no sirve para calibrar, que es justo lo que pasaba en el movil.
   En pantalla estrecha se pone en vertical, que si cabe: el lado corto son
   53,98 mm, unos 204 px, y entra en cualquier telefono. */
.tarjeta-patron{border:2px dashed var(--acento);
  border-radius:calc(var(--mm) * 3);display:flex;align-items:center;
  justify-content:center;color:var(--gris);font-size:.75rem;text-align:center;
  width:calc(var(--mm) * 85.6);height:calc(var(--mm) * 53.98)}
/* Si no cabe a lo ancho, se desliza en vez de encogerse: encogerlo lo dejaria
   midiendo menos de lo que dice, que es justo lo que no puede pasar. */
.patron-tarjeta{overflow-x:auto}


/* ---- Edicion de una foto, plegada ---------------------------------------
   El formulario iba dentro de la columna de la foto y la estiraba a 150 px de
   ancho, dejando los campos en una tira ilegible. Al abrirse se despega y ocupa
   el ancho que necesita. */
figure > details > summary{list-style:none}
figure > details > summary::-webkit-details-marker{display:none}
figure > details[open]{position:relative}
figure > details[open] > form{position:absolute;z-index:30;left:0;top:.3rem;
  width:min(22rem,calc(100vw - 2rem));background:#fff;
  border:1px solid var(--linea);border-radius:12px;padding:.8rem;
  box-shadow:0 12px 32px rgba(16,24,40,.14)}

/* ---- Aviso de calibración pendiente --------------------------------------
   Solo se ve en la primera visita de cada dispositivo. Importa sobre todo
   cuando se llega escaneando el rótulo de una moneda: la persona la tiene en
   la mano y está viendo una versión más pequeña sin saber por qué. */
.aviso-calibrar{margin:1rem auto 0;max-width:44ch;font-size:.82rem;
  line-height:1.45;color:var(--tinta);background:#fff8e6;
  border:1px solid #e8c96a;border-radius:12px;padding:.7rem .9rem;
  text-align:left}
.aviso-calibrar[hidden]{display:none}
@media print{.aviso-calibrar{display:none}}

/* ---- Aviso compacto y desplegables discretos -----------------------------
   El aviso vive encima de la moneda: un parrafo ahi estorba mas de lo que
   explica. Y los `summary` de los bloques plegados salian como botones enormes
   que empujaban el contenido hacia abajo. */
.aviso-calibrar{display:flex;align-items:center;justify-content:center;
  gap:.5rem;flex-wrap:wrap;max-width:none;margin:.8rem auto 0;padding:.45rem .7rem;
  font-size:.76rem;width:fit-content}
.aviso-calibrar .boton{padding:.2rem .6rem;font-size:.72rem}

summary.plegable{cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;gap:.35rem;font-size:.8rem;font-weight:500;
  color:var(--gris);padding:.35rem .75rem;margin:.5rem;border-radius:999px;
  border:1px solid var(--linea);background:#fff}
summary.plegable::-webkit-details-marker{display:none}
summary.plegable::before{content:"+";font-size:.9rem;line-height:1}
summary.plegable:hover{border-color:var(--acento);color:var(--acento)}
details[open] > summary.plegable{color:var(--acento);border-color:var(--acento)}
details[open] > summary.plegable::before{content:"−"}

.credito-corto{display:inline-block;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

/* En movil cada control ocupa dos lineas: la etiqueta arriba y la barra a todo
   lo ancho. Antes la etiqueta se llevaba el espacio y la barra quedaba en unos
   pocos pixeles, imposible de mover con el dedo. */
@media (max-width:640px){
  .controles-escala .control{flex-wrap:wrap;gap:.35rem .5rem;padding:.5rem .6rem}
  .controles-escala .control label{flex-basis:100%;min-width:0}
  .controles-escala .control input[type=range]{flex:1 1 60%;min-width:0;height:1.6rem}
  .controles-escala .control .boton{padding:.25rem .55rem}
}

/* ---- Aviso de trabajo pendiente en la barra ------------------------------
   Un numero junto a «Panel». Sirve para enterarse al entrar de que hay algo
   esperando, sin abrir el panel a comprobarlo. Solo lo ven editores y
   administradores. */
.aviso-pendientes{display:inline-flex;align-items:center;justify-content:center;
  min-width:1.15rem;height:1.15rem;padding:0 .3rem;margin-left:.3rem;
  border-radius:999px;background:#e5484d;color:#fff;font-size:.66rem;
  font-weight:600;line-height:1;vertical-align:middle}

/* ---- La marca de revisión, desplegable -----------------------------------
   El motivo esta en la ficha; obligaba a ir al panel a leer algo que ya se
   tiene delante. */
.chip-revision{display:inline-block}
.chip-revision > summary{list-style:none;cursor:pointer}
.chip-revision > summary::-webkit-details-marker{display:none}
.chip-revision > summary::after{content:" ⌄";font-size:.8em}
.chip-revision[open] > summary::after{content:" ⌃"}
.detalle-revision{margin-top:.5rem;padding:.7rem .9rem;max-width:44ch;
  background:#fff;border:1px solid var(--linea);border-radius:12px;
  font-size:.82rem;line-height:1.45;text-align:left}
.detalle-revision p{margin:0 0 .6rem}
.detalle-revision .acciones{display:flex;gap:.4rem;flex-wrap:wrap}


/* ---- Recortador: el gesto es de la página, no del navegador --------------
   Sin `touch-action:none` el navegador se queda con el pellizco y amplía la
   página entera en vez del recorte. Va en el CSS y no por JavaScript porque
   algunos navegadores solo lo atienden al analizar la página. */
[data-recorte-lienzo]{touch-action:none;-ms-touch-action:none;
  -webkit-user-select:none;user-select:none}

/* ---- Menos aire vacío en la ficha ----------------------------------------
   El visor reservaba el alto de una moneda grande aunque la de la ficha fuera
   pequeña, y en pantalla ancha quedaba medio metro de blanco a los lados de dos
   discos de tres centímetros. Se ajusta al contenido y aprovecha el ancho. */
.visor{padding:var(--paso);margin:calc(var(--paso)*.7) 0 var(--paso)}
.caras{gap:clamp(1rem,4vw,2.5rem)}
.cara figcaption{margin-top:.55rem}
.regla{margin:1rem auto 0}

/* En pantalla ancha, el visor y el texto comparten fila en vez de apilarse:
   la moneda no necesita mil pixeles de ancho para verse a tamaño real. */
@media (min-width:1040px){
  .visor.con-datos{display:grid;grid-template-columns:minmax(320px,.9fr) 1.1fr;
    gap:calc(var(--paso)*1.5);align-items:center;text-align:left}
  .visor.con-datos > .caras{justify-content:flex-start}
}

/* Las tarjetas de datos aprovechan el ancho en vez de dejar media pantalla
   libre: dos columnas cuando hay sitio. */
@media (min-width:960px){
  .doble{grid-template-columns:1.45fr 1fr}
}
.datos .cuerpo{padding-top:.6rem}
.datos h2{margin-bottom:.2rem}
dl.fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:.15rem 1.2rem}

/* ---- Pares dato/valor: el valor junto a su etiqueta ----------------------
   Iban con `justify-content:space-between` y el valor alineado a la derecha, de
   modo que «Anverso» quedaba a un lado y su texto al otro extremo de la
   tarjeta, con un palmo de blanco en medio. Cuesta leer y desperdicia el sitio
   justo donde hace falta. Ahora la etiqueta ocupa un ancho fijo y el valor
   arranca a continuación. */
dl.pares > div{display:grid;grid-template-columns:minmax(6.5rem,auto) 1fr;
  justify-content:start;align-items:baseline;gap:.2rem 1rem}
dl.pares dd{text-align:left}
@media (max-width:600px){
  dl.pares > div{grid-template-columns:1fr;gap:.1rem}
  dl.pares dt{font-size:.78rem}
}

/* ---- Resumen de la colección, en una línea -------------------------------
   Sustituye al cuadro de «Invertido», que ocupaba la primera pantalla entera.
   Lo que un coleccionista quiere ver al entrar son sus monedas. */
.resumen-coleccion{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
  margin:.3rem 0 var(--paso);font-size:.88rem;color:var(--gris)}
.resumen-coleccion strong{color:var(--tinta);font-weight:600}

/* Filtros de la colección: caben en una fila en pantalla ancha y se apilan en
   el móvil sin que ninguno quede en cuatro píxeles. */
.filtros-coleccion{gap:.4rem;align-items:center;margin-bottom:.4rem}
.filtros-coleccion input[type=search]{flex:1 1 16rem;min-width:10rem}
.filtros-coleccion select{flex:0 1 auto;min-width:9rem}
@media (max-width:600px){
  .filtros-coleccion select,.filtros-coleccion input[type=search]{flex:1 1 100%}
}


/* La columna UNC concentra casi todas las cifras; las demas suelen ir vacías.
   Se le da aire y a las otras lo justo, para que la tabla no se estire sin
   necesidad en pantallas estrechas. */
table th.num:first-of-type{min-width:6.5rem}

/* ---- La lupa, pegada a la moneda -----------------------------------------
   Menos y más van en un solo mando. Un toque da un paso; si se mantiene
   pulsado, el tamaño sigue cambiando hasta soltar. */
.linea-escala{display:flex;align-items:center;justify-content:center;
  gap:.55rem;margin:.55rem 0 0;flex-wrap:wrap}
.mando-lupa{display:inline-flex;align-items:stretch;max-width:100%;
  border:1px solid var(--linea);border-radius:999px;background:#fff;
  box-shadow:var(--sombra);overflow:hidden}
.leyenda-lupa{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:.15rem .8rem;min-width:9.2rem;border-left:1px solid var(--linea);
  border-right:1px solid var(--linea);font-size:.78rem;line-height:1.25;color:var(--gris)}
.paso-lupa{width:2.75rem;min-height:2.75rem;padding:0;border:0;border-radius:0;
  background:transparent;color:var(--tinta);font:inherit;font-size:1.45rem;font-weight:600;
  line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none}
.paso-lupa:hover{background:var(--acento-tenue);color:var(--acento)}
.paso-lupa:active,.paso-lupa.pulsado{background:var(--acento);color:#fff}
.paso-lupa.reiniciar{width:2.35rem;min-height:2.35rem;border-radius:50%;
  border:1px solid var(--linea);background:#fff;color:var(--gris);font-size:.95rem;
  box-shadow:var(--sombra)}
.paso-lupa.reiniciar:hover{border-color:var(--acento);color:var(--acento);background:#fff}
.paso-lupa.reiniciar:active{background:var(--acento-tenue);color:var(--acento)}
.paso-lupa[hidden]{display:none}
html.lupa-viva .moneda-real{transition:none}
@media (max-width:380px){
  .leyenda-lupa{min-width:0;padding:.15rem .4rem;font-size:.72rem}
  .mando-lupa .paso-lupa{width:2.45rem}
}

/* El area de las monedas invita a arrastrar, y el tamaño acompaña el gesto. */
.caras.con-lupa{cursor:ew-resize;user-select:none;-webkit-user-select:none}
.caras.con-lupa.arrastrando{cursor:grabbing}
.moneda-real{transition:width .12s ease-out,height .12s ease-out}
/* Durante el arrastre no hay transicion: la animacion iria por detras del dedo
   y el gesto se sentiria pastoso. */
.caras.con-lupa.arrastrando .moneda-real{transition:none}
@media (prefers-reduced-motion:reduce){.moneda-real{transition:none}}

/* ---- Galería de imágenes que no son anverso ni reverso -------------------
   Se subían y no se veían en ninguna parte: la ficha solo pinta los dos discos
   a escala. Aquí van los cantos, los detalles y los conjuntos, con su
   descripción, que es lo que les da sentido. */
.galeria{display:grid;gap:var(--paso);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.galeria figure{margin:0}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;
  border:1px solid var(--linea);background:#fff;transition:transform .15s}
.galeria a:hover img{transform:scale(1.02)}
.galeria figcaption{margin-top:.45rem;font-size:.78rem;line-height:1.4}

/* La descripción es lo que dice qué mirar en la foto: va primero y se lee. La
   cara y el crédito son datos de apoyo. */
.pie-detalle{display:block;font-size:.84rem;font-weight:600;color:var(--tinta);
  line-height:1.35;margin-bottom:.25rem}
/* Marcar las que no la tienen: es lo que hay que ir completando. */
.falta-detalle{font-style:italic;opacity:.7}

/* ---- Tablas en pantalla estrecha -----------------------------------------
   La de acuñaciones tiene nueve columnas y en un teléfono la cifra —que es a lo
   que se viene— quedaba fuera de la pantalla. Se aprieta el texto y se retira
   la ceca, que de todas formas está en el desplegable de cada fila. */
@media (max-width:719px){
  table{font-size:.78rem;min-width:0}
  th,td{padding:.5rem .45rem}
  th{font-size:.6rem;letter-spacing:.05em}
  .solo-ancha{display:none}
  td.num{font-size:.78rem}
  table th.num:first-of-type{min-width:0}
}

/* ---- Pestañas de clase ---------------------------------------------------
   Circulación, conmemorativas, pruebas y macuquinas son cosas que un
   numismático no mezcla: es la primera división del catálogo, no un filtro más.
   Por eso van en pestañas y arriba, no escondidas en el desplegable. */
.pestanas-clase{display:flex;gap:.2rem;flex-wrap:wrap;margin:.6rem 0 .2rem;
  border-bottom:1px solid var(--linea);padding-bottom:0}
.pestanas-clase a{display:inline-flex;align-items:baseline;gap:.35rem;
  padding:.5rem .8rem;font-size:.86rem;color:var(--gris);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.pestanas-clase a span{font-size:.7rem;color:var(--gris);
  background:var(--hueco);border-radius:999px;padding:.05rem .4rem}
.pestanas-clase a:hover{color:var(--tinta)}
.pestanas-clase a.activa{color:var(--acento);border-bottom-color:var(--acento);
  font-weight:600}
.pestanas-clase a.activa span{background:var(--acento);color:#fff}
@media (max-width:719px){
  .pestanas-clase{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .pestanas-clase::-webkit-scrollbar{display:none}
  .pestanas-clase a{font-size:.78rem;padding:.45rem .6rem}
}

/* ---- Catálogo con lateral de épocas --------------------------------------
   Un catálogo numismático se navega por periodo, no por texto libre. El árbol
   de épocas estaba dentro del desplegable de filtros, donde nadie lo ve. */
.con-lateral{display:block}
.lateral h2{font-size:.9rem;margin:0 0 .5rem}
.lateral ul{list-style:none;margin:0;padding:0}
.lateral li a{display:flex;justify-content:space-between;gap:.6rem;
  padding:.4rem .6rem;border-radius:8px;font-size:.84rem;color:var(--tinta);
  text-decoration:none;line-height:1.3}
.lateral li a span{color:var(--gris);font-size:.74rem;flex:0 0 auto}
.lateral li a:hover{background:var(--hueco)}
.lateral li a.activa{background:var(--acento);color:#fff;font-weight:600}
.lateral li a.activa span{color:#fff;opacity:.85}
@media (min-width:960px){
  .con-lateral{display:grid;grid-template-columns:minmax(200px,15rem) 1fr;
    gap:calc(var(--paso)*1.5);align-items:start}
  .lateral{position:sticky;top:var(--paso)}
}
@media (max-width:959px){
  /* En móvil el lateral se pliega: ocuparía la primera pantalla entera. */
  .lateral{margin-bottom:var(--paso);max-height:11rem;overflow-y:auto;
    border:1px solid var(--linea);border-radius:12px;padding:.7rem}
}

.bandera{font-size:1.05em;line-height:1;vertical-align:-.08em}

/* ---- Banderas que se ven también en Windows ------------------------------
   Windows no dibuja las banderas de emoji: enseña las dos letras del código
   («CO»), por decisión de Microsoft. En Android y Mac salen solas. Esta fuente
   contiene únicamente los símbolos de bandera y se aplica solo a ese rango de
   Unicode, así que no toca el resto del texto ni se descarga si no hace falta.
   Dibujo: Twemoji, CC BY 4.0 (atribución en el pie). Código: MIT. */
@font-face{
  font-family:"Banderas";
  src:url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range:U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
                U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display:swap;
}
.bandera{font-family:"Banderas", "Apple Color Emoji", "Segoe UI Emoji",
  "Noto Color Emoji", sans-serif}

/* ---- Texto largo, justificado ------------------------------------------------
   Justificar sin partir palabras obliga al navegador a estirar los espacios
   para cuadrar cada línea, y salen huecos que se ven peor que el borde
   irregular — más en español, con palabras largas como «devaluatoria» o
   «interoceánico». Por eso va con división silábica, que usa las reglas del
   idioma de la página (`lang="es"`).

   `hyphenate-limit-chars` evita partir palabras cortas: solo se dividen las de
   seis letras o más, dejando al menos tres a cada lado. `text-wrap:pretty`
   impide que la última línea de un párrafo quede con una sola palabra. */
.prosa p{
  text-align:justify;
  -webkit-hyphens:auto;hyphens:auto;
  hyphenate-limit-chars:6 3 3;
  -webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;
  text-wrap:pretty;
  max-width:72ch;
  line-height:1.8;
}
/* En pantalla estrecha caben pocas palabras por línea y justificar abre huecos
   aunque se partan sílabas: ahí se lee mejor alineado a la izquierda. */
@media (max-width:480px){
  .prosa p{text-align:left;hyphens:manual;-webkit-hyphens:manual}
}

/* ---- Tabla de tirada, compacta -------------------------------------------
   Tres problemas que la hacian ilegible: se estiraba a todo el ancho y
   repartia siete columnas en mil pixeles; las cabeceras iban a la izquierda y
   las cifras a la derecha, asi que «UNC» quedaba lejos de su numero; y el
   boton de detalle era una pildora que ocupaba mas que el dato. */
.tabla-tirada{width:auto;min-width:0;font-size:.88rem}
.tabla-tirada th,.tabla-tirada td{padding:.45rem .9rem}
/* Cabecera y cifra con la misma alineacion: si no, no se sabe cual es de cual. */
.tabla-tirada th.num,.tabla-tirada td.num{text-align:right}
.tabla-tirada td.num{font-family:var(--mono);font-size:.84rem;
  font-variant-numeric:tabular-nums}
.tabla-tirada td:first-child{font-weight:600}
.tabla-tirada tbody tr:hover{background:var(--hueco)}

.detalle-tirada > summary{list-style:none;cursor:pointer;color:var(--gris);
  font-size:1rem;line-height:1;padding:.1rem .4rem;border-radius:6px;
  display:inline-block}
.detalle-tirada > summary::-webkit-details-marker{display:none}
.detalle-tirada > summary:hover{background:var(--hueco);color:var(--acento)}
.detalle-tirada[open] > summary{color:var(--acento)}
/* El detalle se abre debajo de la fila y no la ensancha. */
.detalle-tirada[open]{position:relative}
.detalle-tirada[open] > div{position:absolute;right:0;z-index:25;
  background:#fff;border:1px solid var(--linea);border-radius:12px;
  padding:.6rem .8rem;box-shadow:0 12px 32px rgba(16,24,40,.14);
  width:min(24rem,85vw);white-space:normal}

@media (max-width:719px){
  .tabla-tirada{font-size:.8rem}
  .tabla-tirada th,.tabla-tirada td{padding:.4rem .55rem}
}

/* ---- Fotos de la variedad, centradas -------------------------------------
   Los círculos iban pegados a la izquierda y la regla y la lupa, centradas
   debajo, así que el control de ampliar quedaba lejos de lo que amplía. Todo
   el bloque se centra, como en la ficha de la moneda. */
.visor-variedad{text-align:center}
.visor-variedad h2,.visor-variedad > .apunte:first-of-type{text-align:left}
.fila-caras{display:flex;gap:var(--paso);flex-wrap:wrap;align-items:flex-start;
  justify-content:center}
.visor-variedad .ajuste-escala{text-align:left;margin-left:auto;margin-right:auto;
  max-width:44rem}

/* ---- Vista pública -------------------------------------------------------
   Barra fija mientras un editor mira la página como el público. Tiene que
   verse siempre: en esta vista la navegación no ofrece nada de editor, así que
   sin ella no habría forma de volver. */
.aviso-vista-publica{position:sticky;top:0;z-index:40;display:flex;
  align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap;
  padding:.5rem var(--paso);background:#1c2541;color:#fff;font-size:.84rem}
.aviso-vista-publica form{margin:0}
.aviso-vista-publica .boton{background:#fff;color:#1c2541;border-color:#fff}


/* La tabla de tirada va directa en la tarjeta, sin el contenedor `.cuerpo` que
   da el margen al resto del contenido, así que «Año» quedaba pegado al borde.
   Se le da el mismo margen que al título, para que la columna arranque alineada
   con él. */
.envoltura-tirada{padding:0 var(--paso) .6rem}
.tabla-tirada th:first-child,.tabla-tirada td:first-child{padding-left:0}

/* ---- Ficha más cerrada, sin recortes ------------------------------------
   El visor a todo el ancho dejaba dos discos pequeños en un escenario vacío.
   La identificación sube a su lado. La tirada ya no es un cuadro flotante:
   ese cuadro se cortaba contra overflow:hidden de la tarjeta. */

.banda-ficha{display:grid;gap:.75rem;align-items:start;margin:.2rem 0 .85rem}
@media (min-width:860px){
  .banda-ficha{grid-template-columns:minmax(15.5rem,max-content) minmax(0,1fr);
    align-items:start}
}
.banda-ficha .visor{margin:0;width:100%;padding:.85rem 1rem .7rem;
  display:flex;flex-direction:column;justify-content:center}
.banda-ficha .caras{gap:1.1rem}
.banda-ficha .cara figcaption{margin-top:.35rem}
.banda-ficha .linea-escala{margin:.25rem 0 0}
.banda-ficha .ajuste-escala{margin-top:.45rem}
.ficha-specs{margin:0}
.ficha-specs h2{padding:.8rem 1rem .1rem}
.ficha-specs .cuerpo{padding:.35rem 1rem .85rem}
.pie-specs{margin:.65rem 0 0}
.pie-specs + .id{margin:.35rem 0 0}

/* El hueco vacío no es una moneda: un círculo de 18 mm no cabe el rótulo
   «subir» y parece un error de maqueta. La foto, cuando existe, sigue a escala. */
.moneda-real.vacia{min-width:7.25rem;min-height:7.25rem;font-size:.78rem;line-height:1.25}

.datos{margin-bottom:.75rem}
.datos h2{padding:.8rem 1.05rem .05rem}
.datos .cuerpo{padding:.4rem 1.05rem .85rem}
dl.pares>div{padding:.55rem 0}

/* Libro de tirada: parece una tabla de catálogo y se abre hacia abajo. */
.envoltura-tirada{padding:.15rem 1.05rem .35rem;overflow-x:auto;
  container-type:inline-size}
.libro-tirada{width:100%}
.libro-tirada .linea-tirada{display:grid;grid-template-columns:var(--plantilla);
  justify-content:start;column-gap:.85rem;align-items:center;padding:.42rem .15rem}
.cabecera-tirada{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);font-weight:600;border-bottom:1px solid var(--linea)}
.cabecera-tirada .num,.libro-tirada .num{text-align:right;
  font-variant-numeric:tabular-nums}
.libro-tirada .anio{font-weight:600}
.libro-tirada .num{font-family:var(--mono);font-size:.84rem}
.ceca-corta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gris);
  font-size:.84rem}

.tirada-fila{border-bottom:1px solid var(--linea)}
.tirada-fila > summary.linea-tirada{list-style:none;cursor:pointer;width:100%;
  margin:0;border-radius:8px;background:transparent;color:inherit;font-weight:500;
  font-size:.9rem;display:grid}
.tirada-fila > summary::-webkit-details-marker{display:none}
.tirada-fila > summary:hover{background:var(--acento-tenue)}
.tirada-fila[open]{background:var(--hueco);border-radius:12px;border-bottom-color:transparent;
  margin:.15rem 0}
.tirada-fila[open] > summary{margin:0;background:transparent}
.marca-mas{justify-self:end;width:1.65rem;height:1.65rem;display:grid;place-items:center;
  border-radius:8px;color:var(--gris);font-size:1.05rem;line-height:1}
.tirada-fila[open] .marca-mas{background:var(--acento);color:#fff}

.panel-tirada{position:sticky;left:0;width:100cqi;max-width:100%;
  box-sizing:border-box;padding:.1rem .15rem .65rem;display:grid;gap:.55rem}
.nota-tirada + .nota-tirada{border-top:1px solid var(--linea);padding-top:.55rem}
.resumen-nota{margin:0 0 .45rem;font-size:.86rem;line-height:1.45;color:var(--tinta-media)}
.resumen-nota strong{color:var(--tinta)}
.resumen-nota .num{font-weight:600;color:var(--tinta)}
.fuente-nota{display:block;color:var(--gris);font-size:.8rem;margin-top:.12rem}

.form-tirada label{display:flex;flex-direction:column;gap:.2rem;margin:0;
  font-size:.72rem;font-weight:600;color:var(--gris);letter-spacing:.01em}
.form-tirada input{width:100%;padding:.42rem .55rem;font-size:.88rem;
  border-radius:8px;background:#fff}
.rejilla-tirada{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.4rem .55rem;margin:0 0 .5rem}
.rejilla-tirada .ancho{grid-column:1 / -1}
.rejilla-tirada .medio{grid-column:span 2}
@media (max-width:640px){
  .rejilla-tirada{grid-template-columns:1fr 1fr}
  .rejilla-tirada .medio,.rejilla-tirada .ancho{grid-column:1 / -1}
}

.anadir-tirada{padding:.35rem 1.05rem .8rem}
.anadir-tirada > summary{background:transparent;padding:.15rem 0;border-radius:0;
  color:var(--acento);font-size:.84rem;font-weight:600}
.anadir-tirada > summary:hover{background:transparent;color:var(--acento-fuerte)}
.anadir-tirada[open] > summary{margin-bottom:.45rem}

@media (max-width:719px){
  /* La regla general de la barra va después del primer media query y la pisa.
     Aquí se vuelve a imponer: una sola tira que se desliza, no tres renglones. */
  .barra nav{flex-wrap:nowrap;overflow-x:auto}
}

@media (max-width:719px){
  .barra-int,.barra nav{min-width:0;max-width:100%}
  .doble > *,.banda-ficha > *,.datos,.envoltura-tirada{min-width:0;max-width:100%}
}

/* --------------------------------------------------------- portada */
.portada{display:grid;grid-template-columns:auto 1fr;gap:1.6rem 2rem;
  align-items:end;padding:1.6rem 0 1.2rem;border-bottom:1px solid var(--linea);
  margin-bottom:1.4rem}
.portada .sello{width:92px;height:92px}
.portada h1{margin-top:.15rem}
.lista-catalogos{list-style:none;margin:.6rem 0 0;padding:0}
.lista-catalogos a{display:grid;grid-template-columns:4.5rem 1fr auto;
  gap:.8rem;align-items:baseline;padding:.85rem 0;color:inherit;
  border-bottom:1px solid var(--linea)}
.lista-catalogos a:hover{color:inherit;background:transparent}
.lista-catalogos a:hover strong{color:var(--acento)}
.lista-catalogos .cuenta{font-family:var(--mono);font-size:.8rem;color:var(--bronce)}
.lista-catalogos strong{font-family:var(--display);font-size:1.2rem;font-weight:600;
  letter-spacing:-.02em}
.lista-catalogos .apunte{display:block}
.bandeja{display:flex;gap:1.1rem;overflow-x:auto;padding:.4rem 0 1rem;
  margin:.4rem 0 1rem;background:transparent}
.pieza{flex:0 0 132px;color:var(--tinta);display:flex;flex-direction:column;gap:.35rem;
  align-items:center;text-align:center}
.pieza:hover{color:var(--tinta)}
.pieza .disco{width:112px;height:112px;border-radius:50%;overflow:hidden;
  background:#F2F2F2;display:grid;place-items:center;color:#A3A3A3;font-size:.7rem}
.pieza .disco img{width:100%;height:100%;object-fit:cover}
.pieza .id{color:var(--gris)}
.pieza .nombre{font-family:var(--display);font-size:.92rem;line-height:1.25;
  letter-spacing:-.02em}
@media (max-width:640px){
  .portada{grid-template-columns:1fr;justify-items:start}
  .portada .sello{width:64px;height:64px}
}