/* ==========================================================================
   Casa Mella-Russo
   --------------------------------------------------------------------------
   Dos familias y tres colores. Lucette (serif) titula y pone la voz de la
   casa; Vela Sans (palo seco) hace todo lo demás, con espaciado de letra
   generoso en mayúsculas. El verde es el color de la institución, el crema el
   papel, y el naranja aparece una sola vez, en noticias, para que signifique
   algo cuando aparece.
   ========================================================================== */

@font-face { font-family: "Lucette";        src: url("/assets/fonts/Lucette-Regular-c4258c43.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lucette";        src: url("/assets/fonts/Lucette-Regularitalic-a90f9797.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-Light-a6ed7a69.ttf") format("truetype");     font-weight: 300; font-display: swap; }
@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-Regular-dfcc7bb1.ttf") format("truetype");   font-weight: 400; font-display: swap; }
@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-Medium-cbb3c63d.ttf") format("truetype");    font-weight: 500; font-display: swap; }
@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-SemiBold-96a2cc94.ttf") format("truetype");  font-weight: 600; font-display: swap; }
@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-Bold-64429428.ttf") format("truetype");      font-weight: 700; font-display: swap; }
@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-ExtraBold-0977cd73.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --verde:       #084438;
  --verde-claro: #0d5c4a;
  --crema:       #ddc9a2;
  --papel:       #fff7eb;
  --blanco:      #ffffff;
  --tinta:       #213547;
  --gris:        #666666;
  --naranja:     #ffa500;

  --serif: "Lucette", Georgia, "Times New Roman", serif;
  --sans:  "Vela Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --ancho: 1180px;
  --radio: 2px;
  --nav-alto: 6.5rem;

  --sombra: 0 10px 30px rgba(8, 68, 56, .12);
  --transicion: 220ms cubic-bezier(.2, .6, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--tinta);
  background: var(--blanco);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

/* El foco tiene que verse: media página es navegable con teclado. */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
}

.cmr-ico { width: 1.15em; height: 1.15em; flex: none; }
.cmr-muted { color: var(--gris); }
.cmr-error { color: #a3312a; font-weight: 500; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.cmr-seccion {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 5rem 1.5rem;
}

.cmr-titulo-seccion {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  letter-spacing: .1em;
  color: var(--verde);
  text-align: center;
  margin-bottom: 3rem;
}

/* Entrada suave al cambiar de vista. Quien pide menos movimiento, no lo ve. */
.cmr-vista { animation: cmr-entra 420ms var(--transicion) both; }
@keyframes cmr-entra { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cmr-vista { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.cmr-topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  min-height: var(--nav-alto);
}

/* Sin nada oscuro detrás, la barra pone su propio fondo: si no, los enlaces
   blancos desaparecen sobre el papel. */
.cmr-topbar.es-solida { background: var(--verde); padding-bottom: .8rem; }
.cmr-topbar.es-solida .cmr-boton-icono { background: rgba(255, 247, 235, .14); }
.cmr-topbar.es-solida .cmr-boton-icono:hover { background: rgba(255, 247, 235, .26); }

.cmr-topbar-utilidad {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  display: flex;
  gap: .5rem;
}

.cmr-boton-icono {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  color: var(--papel);
  background: rgba(8, 68, 56, .82);
  transition: background var(--transicion), transform var(--transicion);
}
.cmr-boton-icono:hover { background: var(--verde); transform: translateY(-1px); }

.cmr-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 2rem;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 1.5rem;
}

.cmr-nav-lado {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-top: 1.6rem;
}
/* El primer enlace tiene que despejar los botones de utilidad, que van
   posicionados sobre la esquina. */
/* El hueco que se le deja a la barra de utilidad, que va posicionada en
   absoluto sobre la cabecera. Con sesión son tres botones —menú, buscar y la
   sesión— y no dos, así que ocupan hasta 163 px y el enlace de «Historia» se
   metía debajo. */
.cmr-nav-lado:first-of-type { padding-left: 6.5rem; }

/* El corte sale de la cuenta, no de tanteo: la barra mide 1180 px como mucho y
   sus enlaces empiezan a 128 px de su borde (24 de la propia barra + 104 de
   hueco). Para que no toquen los 163 px que ocupa la utilidad, la barra tiene
   que estar centrada con al menos 47 px a cada lado — es decir, a partir de
   1180 + 94 = 1274 px de ventana. Por debajo, hueco completo. */
@media (max-width: 1300px) {
  .cmr-nav-lado:first-of-type { padding-left: 10.5rem; }
}
.cmr-nav-lado:last-of-type { justify-content: flex-end; }

.cmr-nav-enlace {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--papel);
  padding-bottom: .2rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}
.cmr-nav-enlace:hover,
.cmr-nav-enlace.es-actual { border-bottom-color: var(--crema); }

/* El logo cuelga de la barra en su propia caja verde, como un sello. */
/* La placa ya trae su propio fondo verde y sus esquinas, así que la caja no
   añade ninguno: solo la cuelga de la barra. */
.cmr-logo { display: grid; place-items: start center; }
.cmr-logo img { width: 7.5rem; height: auto; }

/* Cajón lateral --------------------------------------------------------- */

.cmr-cajon {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: min(22rem, 84vw);
  padding: 5rem 2.5rem;
  background: var(--verde);
  color: var(--papel);
  transform: translateX(-100%);
  transition: transform var(--transicion);
  overflow-y: auto;
}
.cmr-cajon.es-abierto { transform: none; }

.cmr-cajon-cerrar { position: absolute; top: 1.4rem; right: 1.4rem; color: var(--crema); }

.cmr-cajon-lista { list-style: none; display: grid; gap: 1.6rem; }
.cmr-cajon-lista a {
  font-family: var(--serif);
  font-size: 1.5rem;
  transition: color var(--transicion);
}
.cmr-cajon-lista a:hover { color: var(--crema); }

.cmr-velo {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 68, 56, .45);
}

/* --------------------------------------------------------------------------
   Portada — hero
   -------------------------------------------------------------------------- */

.cmr-hero {
  position: relative;
  min-height: min(100svh, 46rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--verde);
}

.cmr-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El texto va sobre imagen, así que el degradado no es decoración: es lo que
   sostiene el contraste. */
.cmr-hero-sombra {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.55) 100%);
}

.cmr-hero-texto {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 2rem;
  max-width: 46rem;
  padding: 0 1.5rem;
  text-align: center;
}

.cmr-hero-texto h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.15;
  color: var(--blanco);
  text-wrap: balance;
}

.cmr-boton-linea {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--blanco);
  padding: .85rem 1.9rem;
  border: 1px solid var(--blanco);
  border-radius: var(--radio);
  transition: background var(--transicion), color var(--transicion);
}
.cmr-boton-linea:hover { background: var(--blanco); color: var(--verde); }

/* --------------------------------------------------------------------------
   Cita
   -------------------------------------------------------------------------- */

.cmr-cita {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  padding: 6rem 1.5rem;
  text-align: center;
  background-color: var(--papel);
  position: relative;
  overflow: hidden;
}

/* La filigrana va en su propia capa para poder bajarle la opacidad sin tocar
   el texto: puesta como background del bloque, teñiría también la cita. */
.cmr-cita::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/Casa-Mella-Russo-logo5.png");
  background-size: 7rem;
  background-repeat: repeat;
  opacity: .13;
  pointer-events: none;
}
.cmr-cita.es-plana::before { content: none; }
.cmr-cita > * { position: relative; }

.cmr-cita h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.25;
  color: var(--verde);
  max-width: 22ch;
}

.cmr-cita h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   Exposiciones
   -------------------------------------------------------------------------- */

.cmr-carrusel { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; }

.cmr-carrusel-flecha {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--verde);
  font-size: 1.2rem;
  transition: transform var(--transicion), opacity var(--transicion);
}
.cmr-carrusel-flecha:hover { transform: scale(1.15); }

/* El carril es scroll nativo con snap: el arrastre táctil y la inercia ya
   vienen dados, y las flechas solo empujan. */
.cmr-carrusel-carril {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(17rem, 78vw), 1fr);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.cmr-carrusel-carril::-webkit-scrollbar { display: none; }
.cmr-carrusel-carril > * { scroll-snap-align: start; }

.cmr-rejilla-expos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 2.5rem 1.5rem;
}

.cmr-expo-lienzo {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--papel);
}

.cmr-expo-lienzo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--transicion);
}
.cmr-expo-lienzo:hover img { transform: scale(1.04); }

/* La descripción vive bajo el velo y sube al pasar el cursor — o al enfocar
   con teclado, que es lo que arregla el `focus-within`. */
.cmr-expo-velo {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.2rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--blanco);
  background: rgba(8, 68, 56, .88);
  opacity: 0;
  transition: opacity var(--transicion);
}
.cmr-expo-lienzo:hover .cmr-expo-velo,
.cmr-expo-lienzo:focus-visible .cmr-expo-velo,
.cmr-expo:focus-within .cmr-expo-velo { opacity: 1; }

.cmr-expo-velo p { font-size: .88rem; line-height: 1.55; }

.cmr-expo-cta {
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  padding: .55rem 1.2rem;
  border: 1px solid var(--crema);
}

.cmr-expo-pie { display: grid; gap: .45rem; padding-top: 1.1rem; text-align: center; }
.cmr-expo-pie h4 { font-weight: 800; font-size: .7rem; letter-spacing: .12em; color: var(--gris); }
.cmr-expo-pie h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--verde); }
.cmr-expo-pie h5 { font-weight: 800; font-size: .72rem; letter-spacing: .12em; color: var(--verde); }

/* Banda a sangre ------------------------------------------------------- */

.cmr-banda img { width: 100%; height: clamp(16rem, 34vw, 26rem); object-fit: cover; }

/* --------------------------------------------------------------------------
   Noticias
   -------------------------------------------------------------------------- */

.cmr-noticias {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 3rem;
}

.cmr-noticias-titulo {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--verde);
  padding-left: 1.5rem;
  border-left: 2px solid var(--verde);
}

.cmr-noticias-lista { display: grid; gap: 2rem; }

/* La imagen se monta sobre la banda naranja y sobresale por la izquierda: el
   solape es el gesto. El padding-left de la banda deja el sitio, y el margen
   negativo saca la foto fuera de ella. */
.cmr-noticia {
  position: relative;
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: center;
  gap: 2rem;
  padding: 2rem 2rem 2rem 3rem;
  background: var(--naranja);
}

.cmr-noticia-img {
  position: relative;
  z-index: 1;
  width: 11rem;
  height: 11rem;
  object-fit: cover;
  margin-left: -5rem;
  box-shadow: var(--sombra);
}

.cmr-noticia-cuerpo { display: grid; gap: .4rem; color: var(--blanco); }
.cmr-noticia-cuerpo h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.cmr-noticia-cuerpo p { font-weight: 600; font-size: .92rem; }
.cmr-noticia-mas h3 { font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Encabezado de página interior
   -------------------------------------------------------------------------- */

.cmr-encabezado {
  display: grid;
  place-items: center;
  min-height: 22rem;
  padding: calc(var(--nav-alto) + 2rem) 1.5rem 3rem;
  /* Sin fondo, el título y los enlaces de la barra —que son color papel, para
     ir sobre el video de la portada— quedaban crema sobre blanco. */
  background: var(--verde) url("/assets/img/banner-fondo.jpg") center / cover;
  background-blend-mode: multiply;
}

/* En visitas la banda es un rótulo, no una portada: lo importante empieza
   justo debajo, así que no se lleva media pantalla. */
.cmr-encabezado.es-compacto {
  min-height: 0;
  padding: calc(var(--nav-alto) + .5rem) 1.5rem 1.4rem;
  background: var(--verde) url("/assets/img/banner-fondo.jpg") center / cover;
  background-blend-mode: multiply;
}

.cmr-encabezado h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: .18em;
  color: var(--papel);
  text-align: center;
}

.cmr-pendiente {
  padding: 2.5rem;
  border: 1px dashed var(--crema);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--gris);
  text-align: center;
}
.cmr-pendiente code { font-family: ui-monospace, monospace; color: var(--verde); }

/* Ficha de exposición --------------------------------------------------- */

.cmr-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.cmr-ficha-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.cmr-ficha-texto { display: grid; gap: 1rem; align-content: start; }

.cmr-ficha-entrada { margin-top: .8rem; font-size: 1.02rem; line-height: 1.75; text-wrap: pretty; }
.cmr-ficha-texto h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; color: var(--verde); }
.cmr-ficha-texto h5 { font-weight: 800; font-size: .75rem; letter-spacing: .12em; color: var(--gris); }

/* --------------------------------------------------------------------------
   Visitas — agenda
   -------------------------------------------------------------------------- */

.cmr-agenda { padding-block: 2rem 2.5rem; }

.cmr-agenda-intro {
  font-family: var(--serif);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.3;
  color: var(--verde);
  max-width: 60ch;
  margin-bottom: 1.1rem;
}

/* La reserva es una sola tarjeta: los tres pasos comparten borde para que se
   lean como un trámite y no como tres secciones sueltas. */
.cmr-reserva {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--crema);
  border-radius: var(--radio);
  overflow: hidden;
}

.cmr-reserva-col { display: grid; gap: .8rem; align-content: start; padding: 1.1rem 1.2rem; }
.cmr-reserva-col:first-child { background: var(--papel); border-right: 1px solid var(--crema); }

.cmr-paso {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--verde);
  text-transform: uppercase;
}

.cmr-paso-n {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  font-size: .7rem;
  color: var(--papel);
  background: var(--verde);
  border-radius: 50%;
}

.cmr-agenda-horario { font-weight: 700; font-size: .75rem; letter-spacing: .04em; color: var(--gris); }
.cmr-espera { padding: 2rem 0; font-size: .9rem; }

/* Los datos cierran la tarjeta, a lo ancho de las dos columnas. */
/* Los datos van dentro de la columna del horario, no debajo de la tarjeta:
   comparten columna con los turnos y rellenan el hueco que dejaba el
   calendario, que es bastante más alto. */
.cmr-datos {
  display: grid;
  gap: .8rem;
  padding-top: 1rem;
  margin-top: .3rem;
  border-top: 1px solid var(--crema);
}

/* Cuatro campos en dos filas de dos. El motivo era el que se llevaba una fila
   entera para él solo; puesto al lado de la institución, el formulario mide
   la mitad y sigue habiendo sitio de sobra para escribir. */
.cmr-datos-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.25rem; }

.cmr-envio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }

/* Calendario ------------------------------------------------------------ */

.cmr-calendario { border: 1px solid var(--crema); border-radius: var(--radio); padding: .8rem; background: var(--papel); }

.cmr-cal-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cmr-cal-mes { font-family: var(--serif); font-size: 1.1rem; color: var(--verde); }
.cmr-cal-flecha { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--verde); border-radius: 50%; transition: background var(--transicion); }
.cmr-cal-flecha:hover { background: rgba(8, 68, 56, .1); }

.cmr-cal-semana, .cmr-cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; }
.cmr-cal-semana p { text-align: center; font-weight: 800; font-size: .65rem; letter-spacing: .06em; color: var(--gris); padding-bottom: .2rem; }

.cmr-cal-dia {
  /* Un poco más ancho que alto: los días se leen igual y el calendario deja
     de ser el bloque más alto de la página. */
  aspect-ratio: 7 / 6;
  display: grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 500;
  border-radius: var(--radio);
  border: 1px solid transparent;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}

/* El estado del día se lee por color Y por peso/opacidad, para que no dependa
   solo del tono. */
.cmr-cal-dia.es-libre    { color: var(--verde); background: rgba(8, 68, 56, .09); border-color: rgba(8, 68, 56, .25); }
.cmr-cal-dia.es-libre:hover { background: var(--verde); color: var(--papel); }
.cmr-cal-dia.es-ajustado { color: var(--gris); background: rgba(255, 165, 0, .18); border-color: rgba(255, 165, 0, .5); }
.cmr-cal-dia.es-lleno    { color: #a3312a; background: rgba(163, 49, 42, .1); text-decoration: line-through; }
.cmr-cal-dia.es-cerrado,
.cmr-cal-dia.es-pasado   { color: var(--gris); opacity: .38; }
.cmr-cal-dia:disabled    { cursor: not-allowed; }
.cmr-cal-dia.es-elegido  { background: var(--verde); color: var(--papel); border-color: var(--verde); font-weight: 700; }

.cmr-cal-hueco { aspect-ratio: 7 / 6; }

.cmr-cal-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .6rem; font-size: .68rem; color: var(--gris); }
.cmr-cal-leyenda li { display: flex; align-items: center; gap: .4rem; }
.cmr-punto { width: .7rem; height: .7rem; border-radius: 50%; }
.cmr-punto.es-libre { background: rgba(8, 68, 56, .35); }
.cmr-punto.es-lleno { background: rgba(163, 49, 42, .45); }
.cmr-punto.es-cerrado { background: rgba(102, 102, 102, .3); }

/* Calendario cultural --------------------------------------------------- */

/* Colores por tipo de actividad. Un solo sitio: los usan el punto de la
   rejilla, el filtro y el borde de la tarjeta. */
:root {
  --ev-exposicion: #084438;
  --ev-taller:     #c98a1f;
  --ev-concierto:  #7b2c5e;
  --ev-charla:     #2c5f7b;
  --ev-visita:     #6b7b2c;
}

.es-exposicion { --ev: var(--ev-exposicion); }
.es-taller     { --ev: var(--ev-taller); }
.es-concierto  { --ev: var(--ev-concierto); }
.es-charla     { --ev: var(--ev-charla); }
.es-visita     { --ev: var(--ev-visita); }

.cmr-cal-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.cmr-cal-filtros .cmr-filtro { display: inline-flex; align-items: center; gap: .45rem; }
.cmr-cal-filtros .cmr-filtro .cmr-punto { background: var(--ev, var(--verde)); }
.cmr-cal-filtros .cmr-filtro.es-activo { background: var(--ev, var(--verde)); color: var(--papel); border-color: var(--ev, var(--verde)); }
.cmr-cal-filtros .cmr-filtro.es-activo .cmr-punto { background: var(--papel); }

.cmr-cal-cultural { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: 2rem; align-items: start; }

/* Los días del calendario cultural llevan número y puntos, así que la celda
   deja de ser un cuadrado con un dígito centrado. */
.cmr-cal-cultural .cmr-cal-dia { align-content: center; gap: .15rem; padding-block: .25rem; }
.cmr-cal-num { line-height: 1; }

.cmr-cal-puntos { display: flex; justify-content: center; gap: 2px; height: 4px; }
.cmr-cal-puntos i { width: 4px; height: 4px; border-radius: 50%; background: var(--ev, var(--verde)); }

.cmr-cal-dia.es-con-eventos { background: rgba(8, 68, 56, .07); border-color: rgba(8, 68, 56, .2); color: var(--verde); font-weight: 700; }
.cmr-cal-dia.es-con-eventos:hover { background: var(--verde); color: var(--papel); }
.cmr-cal-dia.es-con-eventos:hover .cmr-cal-puntos i { background: var(--crema); }
.cmr-cal-dia.es-hoy { outline: 1px solid var(--verde); outline-offset: -1px; }
.cmr-cal-dia.es-pasado { opacity: .45; }
.cmr-cal-dia.es-elegido .cmr-cal-puntos i { background: var(--crema); }
.cmr-punto.es-con-eventos { background: rgba(8, 68, 56, .35); }

.cmr-cal-listado { display: grid; gap: 1rem; align-content: start; }
.cmr-cal-listado-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .8rem; }
.cmr-cal-listado-cabecera h3 { font-family: var(--serif); font-size: 1.3rem; color: var(--verde); }

.cmr-cal-eventos { display: grid; gap: .7rem; }

.cmr-evento {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1rem;
  padding: .9rem 1rem;
  background: var(--papel);
  border-left: 3px solid var(--ev, var(--verde));
  border-radius: var(--radio);
}

.cmr-evento-cuando { display: grid; justify-items: center; align-content: start; }
.cmr-evento-dia { font-family: var(--serif); font-size: 1.6rem; line-height: 1; color: var(--ev, var(--verde)); }
.cmr-evento-mes { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }

.cmr-evento-cuerpo { display: grid; gap: .25rem; }
.cmr-evento-tipo { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ev, var(--verde)); }
.cmr-evento-cuerpo h3 { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--verde); }
.cmr-evento-meta { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .78rem; color: var(--gris); }
.cmr-evento-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.cmr-evento-meta .cmr-ico { width: .9rem; height: .9rem; }
.cmr-evento-detalle { font-size: .85rem; color: var(--gris); }

.cmr-cal-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--crema);
}
.cmr-cal-cta p { font-family: var(--serif); font-size: 1.05rem; color: var(--verde); }

/* Turnos ---------------------------------------------------------------- */

.cmr-turnos { display: grid; gap: .6rem; }
.cmr-turnos-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .75rem; letter-spacing: .1em; color: var(--verde); }

.cmr-turnos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }

.cmr-turno {
  display: grid;
  gap: .1rem;
  padding: .55rem .75rem;
  text-align: left;
  border: 1px solid var(--crema);
  border-radius: var(--radio);
  background: var(--blanco);
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
}
.cmr-turno.es-libre:hover { border-color: var(--verde); transform: translateY(-2px); }
.cmr-turno.es-elegido { background: var(--verde); border-color: var(--verde); color: var(--papel); }
.cmr-turno.es-lleno, .cmr-turno.es-ajustado { opacity: .5; cursor: not-allowed; }

.cmr-turno-hora { font-weight: 700; font-size: .95rem; }
.cmr-turno-cupo { font-size: .72rem; color: var(--gris); }
.cmr-turno.es-elegido .cmr-turno-cupo { color: var(--crema); }

.cmr-aviso { padding: 1rem 1.2rem; border-left: 3px solid var(--naranja); background: rgba(255, 165, 0, .1); display: grid; gap: .5rem; }

/* Sugerencias ----------------------------------------------------------- */

.cmr-sugerencias { display: grid; gap: .8rem; padding: 1.2rem; border: 1px solid var(--crema); border-radius: var(--radio); background: var(--papel); }
.cmr-sugerencias h4 { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .78rem; letter-spacing: .1em; color: var(--verde); }
.cmr-sugerencias ul { list-style: none; display: grid; gap: .5rem; }

.cmr-sugerencia {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: var(--blanco);
  transition: border-color var(--transicion);
}
.cmr-sugerencia:hover { border-color: var(--verde); }
.cmr-sugerencia strong { font-weight: 700; color: var(--verde); }
.cmr-sugerencia em { margin-left: auto; font-style: normal; font-size: .75rem; color: var(--gris); }

/* Formulario ------------------------------------------------------------ */

.cmr-campo { gap: .35rem; }
.cmr-campo input, .cmr-campo textarea { padding: .55rem .8rem; }
/* Alto de dos líneas: el motivo suele ser una frase, no un párrafo. Quien
   escriba más, lo estira. */
.cmr-campo textarea { min-height: 2.9rem; height: 2.9rem; }
.cmr-campo { display: grid; gap: .5rem; }
.cmr-campo-etiqueta { display: flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .72rem; letter-spacing: .12em; color: var(--verde); }

.cmr-campo input, .cmr-campo textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--crema);
  border-radius: var(--radio);
  background: var(--blanco);
  transition: border-color var(--transicion);
}
.cmr-campo input:focus, .cmr-campo textarea:focus { border-color: var(--verde); outline: none; }
.cmr-campo textarea { resize: vertical; }

.cmr-campo-personas { max-width: 16rem; }

.cmr-resumen-reserva p { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--verde); }

.cmr-boton-solido {
  display: inline-block;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--papel);
  background: var(--verde);
  padding: .95rem 2rem;
  border-radius: var(--radio);
  text-align: center;
  transition: background var(--transicion), transform var(--transicion);
}
.cmr-boton-solido:hover:not(:disabled) { background: var(--verde-claro); transform: translateY(-1px); }
.cmr-boton-solido:disabled { opacity: .45; cursor: not-allowed; }
/* El botón es la excepción a la regla de ancho del formulario: se ajusta a
   su texto en vez de estirarse con los campos. */
.cmr-enviar { justify-self: start; width: auto; }

.cmr-boton-texto { font-weight: 600; font-size: .8rem; letter-spacing: .06em; color: var(--verde); text-decoration: underline; }

.cmr-resultado { padding: 1rem 1.2rem; border-radius: var(--radio); display: grid; gap: .4rem; }
.cmr-resultado.es-ok { background: rgba(8, 68, 56, .1); color: var(--verde); }
.cmr-resultado.es-ok p { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.cmr-resultado.es-error { background: rgba(163, 49, 42, .1); color: #a3312a; }
.cmr-resultado ul { margin-left: 1.2rem; }

/* Centro de atención ---------------------------------------------------- */

.cmr-atencion {
  display: grid;
  justify-items: center;
  gap: .6rem;
  padding: 2.75rem 1.5rem;
  text-align: center;
  background: var(--papel);
}
.cmr-atencion h2 { font-weight: 800; font-size: clamp(1rem, 2.2vw, 1.25rem); letter-spacing: .12em; color: var(--verde); }
.cmr-atencion h4 { font-weight: 400; font-size: .9rem; color: var(--gris); max-width: 52ch; }
.cmr-atencion-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .5rem; }

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */

.cmr-login { max-width: 22rem; display: grid; gap: .9rem; padding-top: calc(var(--nav-alto) + 3rem); }
.cmr-login h2 { font-family: var(--serif); font-size: 1.8rem; color: var(--verde); margin-bottom: .3rem; }

/* Google pide su botón en blanco con su G a color; no se tiñe de verde. */
.cmr-boton-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .8rem 1.2rem;
  font-weight: 600;
  font-size: .9rem;
  color: #3c4043;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: var(--radio);
  transition: background var(--transicion), box-shadow var(--transicion);
}
.cmr-boton-google:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(60,64,67,.2); }
.cmr-boton-google .cmr-ico { width: 1.15rem; height: 1.15rem; }

.cmr-separador {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .75rem;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.cmr-separador::before, .cmr-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--crema);
}

/* Menú de usuario ------------------------------------------------------- */

.cmr-usuario { position: relative; }

.cmr-usuario-boton {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  overflow: hidden;
  transition: transform var(--transicion);
}
.cmr-usuario-boton:hover { transform: translateY(-1px); }

.cmr-avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--crema);
}
.cmr-avatar.es-iniciales {
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--papel);
  background: var(--verde);
}

.cmr-velo.es-tenue { background: transparent; }

.cmr-usuario-menu {
  position: absolute;
  top: calc(100% + .6rem);
  left: 0;
  z-index: 61;
  display: grid;
  min-width: 15rem;
  padding: .5rem;
  background: var(--papel);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.cmr-usuario-cabecera {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--crema);
}
.cmr-usuario-cabecera > div { display: grid; min-width: 0; }
.cmr-usuario-cabecera strong { font-size: .85rem; color: var(--verde); }
.cmr-usuario-cabecera span {
  font-size: .72rem;
  color: var(--gris);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmr-usuario-rol {
  justify-self: start;
  margin-top: .2rem;
  padding: .1rem .45rem;
  font-size: .6rem !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde) !important;
  background: rgba(8, 68, 56, .1);
  border-radius: 999px;
}

.cmr-usuario-menu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .6rem;
  font-size: .85rem;
  color: var(--verde);
  border-radius: var(--radio);
  transition: background var(--transicion);
}
.cmr-usuario-menu a:hover { background: rgba(8, 68, 56, .08); }

.cmr-panel { padding-top: calc(var(--nav-alto) + 2rem); display: grid; gap: 2rem; }

/* Los hijos de un grid arrancan con `min-width: auto`, así que no se encogen
   por debajo del mínimo intrínseco de su contenido. Basta un `input[type=date]`
   —que trae un ancho mínimo propio para «dd/mm/aaaa» y su icono— para estirar
   a TODOS sus hermanos y sacar la columna entera de la pantalla en móvil.
   Este `min-width: 0` es el que deja que el grid mande sobre el contenido. */
.cmr-panel > *, .cmr-panel-dia > *, .cmr-panel-bandeja > * { min-width: 0; }
.cmr-panel-dia input[type="date"] { max-width: 100%; }
.cmr-panel-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cmr-panel-cabecera h2 { font-family: var(--serif); font-size: 1.9rem; color: var(--verde); }

.cmr-panel-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
.cmr-metrica { display: grid; gap: .2rem; padding: 1.1rem 1.3rem; background: var(--papel); border-radius: var(--radio); }
.cmr-metrica-valor { font-family: var(--serif); font-size: 2rem; color: var(--verde); line-height: 1; }
.cmr-metrica-label { font-size: .72rem; letter-spacing: .08em; color: var(--gris); }

/* Próximas / Historial. Son dos modos del panel, no dos filtros, así que van
   como pestañas y no como los chips redondeados de estado. */
.cmr-pestanas { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--crema); }
.cmr-pestana {
  padding: .7rem 0;
  font-weight: 700;
  font-size: .85rem;
  color: var(--gris);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transicion), border-color var(--transicion);
}
.cmr-pestana:hover { color: var(--verde); }
.cmr-pestana.es-activa { color: var(--verde); border-bottom-color: var(--verde); }

.cmr-panel-historial { display: grid; gap: 1.5rem; }
.cmr-buscador { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.cmr-buscador input {
  flex: 1 1 20rem;
  padding: .6rem .9rem;
  border: 1px solid var(--crema);
  border-radius: var(--radio);
}
.cmr-buscador input:focus { border-color: var(--verde); outline: none; }

.cmr-panel-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.cmr-filtro { padding: .5rem 1rem; font-size: .78rem; font-weight: 600; border: 1px solid var(--crema); border-radius: 999px; transition: background var(--transicion), color var(--transicion); }
.cmr-filtro.es-activo { background: var(--verde); color: var(--papel); border-color: var(--verde); }

.cmr-tabla-scroll { overflow-x: auto; }
.cmr-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cmr-tabla th { text-align: left; font-weight: 800; font-size: .7rem; letter-spacing: .1em; color: var(--gris); padding: .7rem .8rem; border-bottom: 1px solid var(--crema); white-space: nowrap; }
.cmr-tabla td { padding: .9rem .8rem; border-bottom: 1px solid rgba(221, 201, 162, .5); vertical-align: top; }
.cmr-tabla tr.es-cancelada { opacity: .5; }
.cmr-tabla td span { display: block; }
.cmr-col-cuando strong { color: var(--verde); }
.cmr-col-personas { text-align: center; font-weight: 700; }
.cmr-col-motivo { max-width: 18rem; color: var(--gris); }
.cmr-col-acciones { display: grid; gap: .4rem; min-width: 11rem; }

.cmr-chip { display: inline-block; padding: .2rem .6rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; border-radius: 999px; text-transform: uppercase; }
.cmr-chip.es-solicitada { background: rgba(255, 165, 0, .2); color: #8a5a00; }
.cmr-chip.es-confirmada { background: rgba(8, 68, 56, .12); color: var(--verde); }
.cmr-chip.es-cancelada { background: rgba(163, 49, 42, .12); color: #a3312a; }

.cmr-boton-mini { padding: .35rem .8rem; font-size: .72rem; font-weight: 700; border: 1px solid var(--crema); border-radius: var(--radio); transition: background var(--transicion); }
.cmr-boton-mini.es-ok:hover { background: var(--verde); color: var(--papel); border-color: var(--verde); }
.cmr-boton-mini.es-no:hover { background: #a3312a; color: var(--blanco); border-color: #a3312a; }
.cmr-nota { padding: .35rem .6rem; font-size: .75rem; border: 1px solid var(--crema); border-radius: var(--radio); }

/* Bitácora ------------------------------------------------------------- */

.cmr-bitacora { margin-top: .6rem; }

.cmr-bitacora-abrir {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--verde);
  padding: .25rem .6rem;
  border: 1px dashed var(--crema);
  border-radius: var(--radio);
  transition: border-color var(--transicion), background var(--transicion);
}
.cmr-bitacora-abrir:hover { border-color: var(--verde); background: var(--papel); }

.cmr-bitacora-cuerpo {
  display: grid;
  gap: .8rem;
  margin-top: .7rem;
  padding: .9rem;
  background: var(--papel);
  border-radius: var(--radio);
}

.cmr-bitacora-fotos { display: flex; flex-wrap: wrap; gap: .5rem; }

.cmr-foto { position: relative; width: 5.5rem; }
.cmr-foto img { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: var(--radio); }

.cmr-foto-quitar {
  position: absolute;
  top: -.4rem;
  right: -.4rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--papel);
  background: var(--verde);
  border-radius: 50%;
}
.cmr-foto-quitar .cmr-ico { width: .8rem; height: .8rem; }

.cmr-bitacora-notas { list-style: none; display: grid; gap: .4rem; }
.cmr-bitacora-notas li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .82rem;
  padding: .45rem .6rem;
  background: var(--blanco);
  border-radius: var(--radio);
}
.cmr-bitacora-notas p { flex: 1; }

.cmr-bitacora-nueva { display: grid; gap: .5rem; }
.cmr-bitacora-nueva textarea {
  width: 100%;
  padding: .5rem .7rem;
  font-size: .82rem;
  border: 1px solid var(--crema);
  border-radius: var(--radio);
  resize: vertical;
}
.cmr-bitacora-nueva textarea:focus { border-color: var(--verde); outline: none; }
.cmr-bitacora-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cmr-boton-mini:disabled { opacity: .45; cursor: not-allowed; }

.cmr-boton-mini.es-camara {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--papel);
  background: var(--verde);
  border-color: var(--verde);
}
.cmr-boton-mini.es-camara .cmr-ico { width: 1rem; height: 1rem; }

.cmr-subiendo { font-size: .74rem; font-weight: 600; color: var(--verde); }

.cmr-panel-dia { display: grid; gap: 1.2rem; padding-top: 1.5rem; border-top: 1px solid var(--crema); }
.cmr-dia-turnos { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; }
.cmr-dia-turno { display: grid; gap: .15rem; padding: .7rem .9rem; border-radius: var(--radio); background: var(--papel); font-size: .8rem; }
.cmr-dia-turno.es-lleno { opacity: .55; }
.cmr-dia-turno strong { color: var(--verde); }
.cmr-dia-turno em { font-style: normal; font-size: .72rem; color: var(--gris); }

.cmr-dia-lista { list-style: none; display: grid; gap: .5rem; }
.cmr-dia-lista li { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; background: var(--papel); border-radius: var(--radio); font-size: .88rem; }
.cmr-dia-lista li.es-cancelada { opacity: .5; }
.cmr-dia-lista em { font-style: normal; color: var(--gris); margin-left: auto; }

.cmr-cierres { display: grid; gap: .7rem; }
.cmr-cierres h4 { font-weight: 800; font-size: .75rem; letter-spacing: .1em; color: var(--verde); }
.cmr-cierres ul { list-style: none; display: grid; gap: .4rem; }
.cmr-cierres li { display: flex; align-items: center; gap: .8rem; font-size: .85rem; }
.cmr-cierres em { font-style: normal; color: var(--gris); }
.cmr-cierre-nuevo { display: flex; flex-wrap: wrap; gap: .5rem; }
.cmr-cierre-nuevo input { flex: 1 1 14rem; padding: .5rem .8rem; border: 1px solid var(--crema); border-radius: var(--radio); }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.cmr-pie { background: var(--verde); color: var(--crema); padding: 4rem 1.5rem 2rem; }

.cmr-pie-cuerpo {
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4rem;
  padding-bottom: 2.5rem;
}

.cmr-pie-sello img { width: 11rem; height: auto; }

.cmr-pie-datos { list-style: none; display: grid; gap: 1rem; padding-left: 3rem; border-left: 1px solid rgba(221, 201, 162, .35); }
.cmr-pie-dato a, .cmr-pie-dato { display: flex; align-items: center; gap: .9rem; }
.cmr-pie-dato p { font-size: .92rem; transition: color var(--transicion); }
.cmr-pie-dato a:hover p { color: var(--blanco); }
.cmr-pie-ico { display: grid; place-items: center; color: var(--crema); }

.cmr-pie-base {
  max-width: var(--ancho);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(221, 201, 162, .25);
  font-size: .8rem;
}

.cmr-pie-redes { display: flex; gap: 1rem; }
.cmr-pie-redes a { transition: color var(--transicion), transform var(--transicion); }
.cmr-pie-redes a:hover { color: var(--blanco); transform: translateY(-2px); }
.cmr-pie-redes .cmr-ico { width: 1.4rem; height: 1.4rem; }

/* --------------------------------------------------------------------------
   Adaptación
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Páginas de texto (historia, programas, fichas)
   -------------------------------------------------------------------------- */

/* Estas páginas son para leer, no para ojear. El ancho de la sección sirve
   para rejillas, pero para prosa da renglones larguísimos, así que la medida
   se recorta aquí y no en cada vista. */
.cmr-seccion.es-lectura { max-width: 46rem; }

.cmr-prosa { display: grid; gap: 1.15rem; }

.cmr-prosa p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--tinta);
  text-wrap: pretty;
}

/* Imagen a sangre entre bloques de texto: corta la lectura y da respiro. */
.cmr-banda-img {
  width: 100%;
  height: clamp(14rem, 30vw, 24rem);
  object-fit: cover;
}

/* Un collage no se recorta: si se le come las filas de los extremos, deja de
   ser la imagen que es. */
.cmr-banda-img.es-completa { height: auto; object-fit: contain; }

/* El contenedor venía de una sección donde solo había botones sólidos; al
   mezclar un botón y un enlace de texto, sin esto el enlace se estira. */
.cmr-atencion-botones { align-items: center; }

.cmr-cta-visita {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  text-align: center;
}

/* Retrato de la fundadora --------------------------------------------- */

.cmr-retrato {
  display: grid;
  grid-template-columns: minmax(0, 18rem) 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* El retrato original es cuadrado y ya viene con su marco: recortarlo a 4/5
   le comía los lados y dejaba franjas negras. */
.cmr-retrato-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: var(--sombra); }

.cmr-retrato-texto { display: grid; gap: .6rem; }

.cmr-retrato-texto h4 {
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}

.cmr-retrato-texto h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--verde);
}

.cmr-retrato-texto p { line-height: 1.7; }

/* Alianzas académicas -------------------------------------------------- */

.cmr-alianzas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
}

.cmr-alianza {
  display: grid;
  gap: .7rem;
  align-content: start;
  padding: 1.8rem;
  background: var(--papel);
  border-top: 2px solid var(--verde);
}

.cmr-alianza h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde);
}

.cmr-alianza p { font-size: .94rem; line-height: 1.65; }

/* Lista de artistas de la colección ------------------------------------ */

.cmr-artistas-lista {
  list-style: none;
  columns: 3;
  column-gap: 2.5rem;
  margin-top: 1.5rem;
}

.cmr-artistas-lista li {
  break-inside: avoid;
  padding: .42rem 0;
  font-size: .95rem;
  border-bottom: 1px solid var(--crema);
}

/* Autoría en tarjetas y fichas ----------------------------------------- */

.cmr-expo-autor {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}

.cmr-ficha-autor {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde);
}

/* La tarjeta de noticia es un enlace entero: el texto secundario y el reclamo
   necesitan sitio propio dentro de la banda naranja. */
.cmr-noticia { transition: transform var(--transicion); }
a.cmr-noticia:hover { transform: translateY(-2px); }

.cmr-noticia-cuerpo h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.25;
}

.cmr-noticia-cuerpo .cmr-expo-cta {
  justify-self: start;
  margin-top: .3rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Edición de la programación cultural
   -------------------------------------------------------------------------- */
/* Solo se ve con sesión de la casa. Va dentro del listado del calendario, para
   que agregar y ver queden en la misma pantalla. */

.cmr-evento-acciones {
  display: flex;
  gap: .5rem;
  margin-top: .7rem;
}

.cmr-evento-form {
  display: grid;
  gap: 1rem;
  margin: 1.2rem 0;
  padding: 1.4rem;
  background: var(--papel);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
}

.cmr-evento-form h3 {
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde);
}

.cmr-evento-form-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .9rem;
}

.cmr-evento-form input,
.cmr-evento-form select,
.cmr-evento-form textarea {
  width: 100%;
  padding: .6rem .7rem;
  background: var(--blanco);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
}

.cmr-evento-form textarea { resize: vertical; }

.cmr-evento-form-acciones {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cmr-editar-barra { padding-bottom: 0; }

.cmr-ficha-form {
  display: grid;
  gap: 1rem;
  padding: 1.6rem;
  background: var(--papel);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
}

.cmr-ficha-form h3 {
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde);
}

.cmr-ficha-form-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .9rem;
}

.cmr-ficha-form input,
.cmr-ficha-form select,
.cmr-ficha-form textarea {
  width: 100%;
  padding: .6rem .7rem;
  background: var(--blanco);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
}

.cmr-ficha-form textarea {
  resize: vertical;
  font-family: var(--sans);
  line-height: 1.6;
}

/* El botón de agregar va sobre fondo claro, así que necesita el relleno verde:
   `cmr-boton-linea` es blanco sobre blanco fuera del video de portada. */
.cmr-boton-linea.es-solida {
  justify-self: start;
  color: var(--papel);
  background: var(--verde);
  border-color: var(--verde);
}

.cmr-boton-linea.es-solida:hover { background: var(--verde-claro); color: var(--papel); }


/* --------------------------------------------------------------------------
   Escritorio
   -------------------------------------------------------------------------- */
/* Lo primero que ve la casa al entrar. La rejilla es de tarjetas-enlace: cada
   una lleva a un sitio que ya existe, y el color del icono agrupa por familia
   sin necesidad de leer. */

.cmr-escritorio { padding-top: calc(var(--nav-alto) + 2.5rem); }

.cmr-esc-saludo {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.cmr-esc-avatar {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.cmr-esc-avatar.es-iniciales {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .06em;
  color: var(--papel);
  background: var(--verde);
}

.cmr-esc-saludo h1 {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--verde);
}

.cmr-esc-rol {
  padding: .18rem .5rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--papel);
  background: #a3312a;
  border-radius: var(--radio);
}

.cmr-esc-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;
  gap: 2.5rem;
  align-items: start;
}

.cmr-esc-columna { display: grid; gap: 1.2rem; }

.cmr-esc-metrica {
  display: grid;
  gap: .25rem;
  padding: 1.1rem 1.2rem;
  background: var(--papel);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
}

.cmr-esc-metrica-label {
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}

.cmr-esc-metrica-valor {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--verde);
}

.cmr-esc-metrica .cmr-muted { font-size: .8rem; }

.cmr-esc-lateral { display: grid; gap: .15rem; }

.cmr-esc-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .9rem;
  font-size: .92rem;
  text-align: left;
  border-radius: var(--radio);
  transition: background var(--transicion), color var(--transicion);
}

.cmr-esc-cat:hover { background: var(--papel); }

.cmr-esc-cat.es-activa { color: var(--papel); background: var(--verde); }

.cmr-esc-cuenta { font-size: .8rem; opacity: .7; }

.cmr-esc-grupos { display: grid; gap: 2.5rem; }

.cmr-esc-grupo-titulo {
  margin-bottom: 1rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}

.cmr-esc-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.1rem;
}

.cmr-esc-tarjeta {
  display: grid;
  gap: .55rem;
  align-content: start;
  padding: 1.3rem;
  background: var(--papel);
  border-radius: calc(var(--radio) * 4);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.cmr-esc-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra); }

.cmr-esc-tarjeta h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--verde);
}

.cmr-esc-tarjeta p { font-size: .86rem; line-height: 1.5; color: var(--gris); }

.cmr-esc-icono {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: .3rem;
  color: var(--papel);
  border-radius: calc(var(--radio) * 4);
}

.cmr-esc-icono .cmr-ico { width: 1.3rem; height: 1.3rem; }

.cmr-esc-icono.es-verde   { background: var(--verde); }
.cmr-esc-icono.es-naranja { background: var(--naranja); }
.cmr-esc-icono.es-tinta   { background: var(--tinta); }
.cmr-esc-icono.es-azul    { background: #2c6e9b; }
.cmr-esc-icono.es-morado  { background: #6b4c9a; }
.cmr-esc-icono.es-rojo    { background: #a3312a; }
.cmr-esc-icono.es-crema   { background: #b08d4f; }


/* --------------------------------------------------------------------------
   Pantalla táctil grande (iPad)
   -------------------------------------------------------------------------- */
/* `pointer: coarse` es la pregunta correcta: no «¿es pequeña la pantalla?»
   —un iPad tiene más ancho que muchos portátiles— sino «¿se pulsa con el
   dedo?». Cubre iPad y móvil, y no toca el escritorio con ratón. */

/* El resumen de la tarjeta vive bajo un velo que sube con el cursor. Sin
   cursor no sube nunca, así que en táctil se lee bajo el título. */
.cmr-expo-resumen { display: none; }

@media (pointer: coarse) {
  .cmr-expo-resumen {
    display: block;
    margin-top: .5rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--gris);
    text-wrap: pretty;
  }

  /* El velo deja de taparlo todo: en su lugar, el reclamo sobre un degradado
     al pie, para que se vea que la tarjeta lleva a algún sitio sin esconder
     la obra —que es lo que la gente vino a mirar—. */
  .cmr-expo-velo {
    opacity: 1;
    align-content: end;
    gap: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(8, 68, 56, .82) 0%, rgba(8, 68, 56, 0) 55%);
  }

  .cmr-expo-velo p { display: none; }

  /* 44 px es el mínimo que pide Apple para algo que se pulsa con el dedo.
     Casi todo lo interactivo del sitio estaba por debajo: los enlaces del
     menú a 29, las flechas del calendario a 32, los botones pequeños a 30. */
  .cmr-nav-enlace,
  .cmr-cajon-lista a,
  .cmr-pie-datos a,
  .cmr-boton-texto,
  .cmr-usuario-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .cmr-boton-icono,
  .cmr-cajon-cerrar,
  .cmr-carrusel-flecha,
  .cmr-cal-flecha,
  .cmr-usuario-boton {
    min-width: 44px;
    min-height: 44px;
  }

  .cmr-boton-mini,
  .cmr-filtro,
  .cmr-pestana {
    min-height: 44px;
    padding-inline: 1rem;
  }

  /* El «VER MÁS» de la portada y los iconos de redes del pie eran los dos
     últimos por debajo del mínimo: 20 y 28 px. */
  .cmr-noticia-mas { display: inline-flex; align-items: center; min-height: 44px; }

  /* En horizontal el calendario comparte fila con el listado y sus celdas se
     estrechan: en vertical dan de sobra, pero ahí bajaban a 29 px. */
  .cmr-cal-dia { min-height: 44px; }

  .cmr-pie-redes a {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Los campos por debajo de 16px hacen que Safari haga zoom al enfocarlos, y
     al salir el zoom se queda: la página entera acaba descolocada. */
  input, select, textarea { font-size: 16px; }

  .cmr-evento-form input,
  .cmr-evento-form select,
  .cmr-evento-form textarea,
  .cmr-ficha-form input,
  .cmr-ficha-form select,
  .cmr-ficha-form textarea { min-height: 44px; }

  /* El gris de pulsación de Safari sobre las tarjetas-enlace ensucia más de lo
     que informa: ya tienen su propio estado. */
  .cmr-esc-tarjeta,
  .cmr-noticia,
  .cmr-expo-lienzo { -webkit-tap-highlight-color: transparent; }

  /* Sin cursor, los efectos de aumento al pasar por encima se quedan pegados
     tras el toque. */
  .cmr-expo-lienzo:hover img,
  .cmr-carrusel-flecha:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   Publicaciones, editor y redes
   -------------------------------------------------------------------------- */

.cmr-pub-barra { margin-bottom: 2rem; }

.cmr-pub-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.6rem;
}

.cmr-pub-tarjeta {
  display: grid;
  align-content: start;
  background: var(--papel);
  border-radius: calc(var(--radio) * 4);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.cmr-pub-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.cmr-pub-img { width: 100%; height: 11rem; object-fit: cover; }
.cmr-pub-cuerpo { display: grid; gap: .5rem; padding: 1.2rem; }
.cmr-pub-cuerpo h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--verde); }
.cmr-pub-cuerpo p { font-size: .9rem; line-height: 1.55; color: var(--gris); }

.cmr-pub-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.cmr-chip.es-borrador { background: var(--naranja); color: var(--blanco); }

/* Editor ---------------------------------------------------------------- */

.cmr-editor-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.cmr-editor-ficha input,
.cmr-editor-ficha select {
  width: 100%;
  padding: .6rem .7rem;
  background: var(--blanco);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
}

.cmr-editor-portada { width: 100%; max-height: 18rem; object-fit: cover; margin-bottom: 1rem; }

.cmr-editor-barra {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .6rem;
  background: var(--papel);
  border: 1px solid var(--crema);
  border-bottom: none;
  border-radius: var(--radio) var(--radio) 0 0;
}

.cmr-editor-barra label { cursor: pointer; }

/* Los botones de la barra son icono y nada más: cuadrados, con el rótulo en
   `title` para quien pase el cursor y en `aria-label` para quien no lo tenga. */
.cmr-boton-icono.es-editor {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  color: var(--verde);
  border-radius: var(--radio);
  transition: background var(--transicion);
}

.cmr-boton-icono.es-editor:hover { background: var(--crema); }
.cmr-boton-icono.es-editor .cmr-ico { width: 1.15rem; height: 1.15rem; }

.cmr-editor-cuerpo {
  min-height: 22rem;
  padding: 1.5rem;
  background: var(--blanco);
  border: 1px solid var(--crema);
  border-radius: 0 0 var(--radio) var(--radio);
  line-height: 1.75;
}

.cmr-editor-cuerpo:focus { outline: none; border-color: var(--verde); }
.cmr-editor-cuerpo h2 { font-family: var(--serif); font-weight: 400; color: var(--verde); margin: 1rem 0 .5rem; }
.cmr-editor-cuerpo blockquote { padding-left: 1rem; border-left: 3px solid var(--crema); color: var(--gris); }
.cmr-editor-cuerpo img { max-width: 100%; height: auto; margin: 1rem 0; }
.cmr-editor-cuerpo p { margin-bottom: .8rem; }

/* Panel de Instagram ---------------------------------------------------- */

.cmr-ig-panel {
  display: grid;
  gap: 1.2rem;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--papel);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
}

.cmr-ig-laminas { display: flex; flex-wrap: wrap; gap: 1rem; }
.cmr-ig-lamina-caja { display: grid; gap: .4rem; justify-items: center; }

/* El canvas es de 1080×1350 de verdad — lo que se publica —, así que aquí solo
   se le baja el tamaño de pintado. */
.cmr-ig-lamina { width: 9rem; height: auto; box-shadow: var(--sombra); }

.cmr-ig-panel textarea {
  width: 100%;
  padding: .7rem;
  font-family: var(--sans);
  line-height: 1.6;
  background: var(--blanco);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
  resize: vertical;
}

/* Redes ----------------------------------------------------------------- */

.cmr-redes-franja {
  display: grid;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: var(--papel);
  border-radius: calc(var(--radio) * 4);
}

.cmr-redes-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cmr-redes-acciones { display: flex; align-items: center; gap: 1rem; }
.cmr-redes-cabecera h2 {
  font-family: var(--sans); font-weight: 700; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
}

.cmr-redes-cuenta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cmr-redes-foto { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; }
.cmr-redes-foto.es-iniciales { display: grid; place-items: center; color: var(--papel); background: var(--verde); }
.cmr-redes-cuenta > div:nth-child(2) { display: grid; }
.cmr-redes-cifras { display: flex; gap: 1.5rem; margin-left: auto; }
.cmr-redes-cifras div { display: grid; text-align: right; }
.cmr-redes-cifras strong { font-family: var(--serif); font-size: 1.4rem; color: var(--verde); }
.cmr-redes-cifras span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }

.cmr-redes-metricas { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.cmr-redes-metrica { display: grid; }
.cmr-redes-metrica strong { font-family: var(--serif); font-size: 1.5rem; color: var(--verde); }
.cmr-redes-metrica span { font-size: .74rem; color: var(--gris); }

.cmr-redes-vacio { display: grid; gap: .7rem; }
.cmr-redes-vacio h3 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--verde); }
.cmr-redes-vacio code { padding: .1rem .35rem; font-family: ui-monospace, monospace; font-size: .85em; background: var(--blanco); border-radius: var(--radio); }
.cmr-redes-lista { display: grid; gap: .4rem; padding-left: 1.1rem; font-size: .92rem; }

.cmr-medios-tira { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.cmr-medios { display: grid; gap: 1.5rem; }

.cmr-medio { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: start; }
.cmr-medio-foto img { width: 7rem; height: 7rem; object-fit: cover; border-radius: var(--radio); }
.cmr-medio-cuerpo { display: grid; gap: .4rem; min-width: 0; }
.cmr-medio-pie { font-size: .88rem; line-height: 1.5; }
.cmr-medio-cifras { display: flex; gap: 1rem; font-size: .76rem; color: var(--gris); }
.cmr-medio-comentarios { display: grid; gap: .5rem; margin-top: .4rem; }

.cmr-comentario { display: grid; gap: .3rem; padding: .6rem; background: var(--blanco); border-radius: var(--radio); }
.cmr-comentario-cuerpo strong { font-size: .8rem; color: var(--verde); }
.cmr-comentario-cuerpo p { font-size: .86rem; line-height: 1.5; }
.cmr-comentario-responder { display: flex; flex-wrap: wrap; gap: .4rem; }
.cmr-comentario-responder input {
  flex: 1 1 12rem; padding: .45rem .6rem;
  border: 1px solid var(--crema); border-radius: var(--radio);
}

.cmr-pagina-seccion {
  display: grid;
  gap: .8rem;
  padding: 1rem;
  background: var(--blanco);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
}

.cmr-usuario-celda { display: flex; align-items: center; gap: .7rem; }
.cmr-usuario-celda > div { display: grid; }
.cmr-usuario-celda span { font-size: .8rem; }
.cmr-usuario-alias { font-weight: 600; font-size: .82rem; color: var(--verde); }


/* --------------------------------------------------------------------------
   Tablero de tareas
   -------------------------------------------------------------------------- */

.cmr-tablero-pagina { max-width: none; }

.cmr-tablero-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.cmr-tablero-acciones { display: flex; align-items: center; gap: 1rem; }

.cmr-tablero {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 1fr);
  gap: 1rem;
  align-items: start;
  /* Un tablero con muchas columnas se desplaza en su propia caja, no empujando
     la página entera hacia los lados. */
  overflow-x: auto;
  padding-bottom: .5rem;
}

.cmr-columna {
  display: grid;
  gap: .5rem;
  align-content: start;
  padding: .8rem;
  background: var(--papel);
  border-radius: calc(var(--radio) * 4);
  min-height: 8rem;
}

.cmr-columna.es-cierra { background: #eef3ef; }

.cmr-columna-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.cmr-columna-cabecera h3 {
  font-family: var(--sans); font-weight: 800; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--verde);
}

.cmr-columna-cuenta {
  padding: .1rem .45rem; font-size: .7rem; color: var(--gris);
  background: var(--blanco); border-radius: 1rem;
}

.cmr-columna-pila { display: grid; gap: .1rem; }

.cmr-columna-mas {
  padding: .5rem; font-size: .8rem; color: var(--gris); text-align: left;
  border-radius: var(--radio);
}
.cmr-columna-mas:hover { background: var(--blanco); color: var(--verde); }

/* La tarjeta ------------------------------------------------------------ */

.cmr-tarea {
  display: grid;
  gap: .4rem;
  padding: .75rem;
  background: var(--blanco);
  border-left: 3px solid var(--crema);
  border-radius: var(--radio);
  cursor: grab;
  box-shadow: 0 1px 2px rgba(8, 68, 56, .08);
  transition: box-shadow var(--transicion), opacity var(--transicion);
}

.cmr-tarea:hover { box-shadow: var(--sombra); }
.cmr-tarea:active { cursor: grabbing; }
.cmr-tarea.es-arrastrando { opacity: .4; }
.cmr-tarea.es-alta { border-left-color: #a3312a; }
.cmr-tarea.es-baja { border-left-color: #cfd8d4; }

.cmr-tarea h4 { font-family: var(--sans); font-weight: 600; font-size: .92rem; line-height: 1.35; }
.cmr-tarea-detalle { font-size: .78rem; line-height: 1.45; color: var(--gris); }

.cmr-tarea-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.cmr-tarea-fecha { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--gris); }
.cmr-tarea-fecha .cmr-ico { width: .9em; height: .9em; }
.cmr-tarea-fecha.es-vencida { color: #a3312a; font-weight: 600; }

.cmr-tarea-quien {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  margin-left: auto;
  font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  color: var(--papel); background: var(--verde);
  border-radius: 50%;
}

.cmr-tarea-quien.es-libre { color: var(--gris); background: var(--crema); }

/* El hueco donde se suelta. Invisible hasta que hay algo encima, para que el
   tablero no parezca una rejilla de cajas vacías. */
.cmr-tarea-hueco { height: .35rem; border-radius: 2px; transition: all var(--transicion); }
.cmr-tarea-hueco.es-activo { height: 2.2rem; background: var(--crema); }

.cmr-tarea-nueva { display: grid; gap: .4rem; padding: .5rem; background: var(--blanco); border-radius: var(--radio); }
.cmr-tarea-nueva input {
  width: 100%; padding: .5rem; font-size: .9rem;
  border: 1px solid var(--crema); border-radius: var(--radio);
}
.cmr-tarea-nueva-acciones { display: flex; gap: .4rem; }

/* Panel lateral de la tarjeta ------------------------------------------- */

.cmr-tarea-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 60;
  width: min(26rem, 92vw);
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.5rem;
  overflow-y: auto;
  background: var(--blanco);
  box-shadow: -10px 0 30px rgba(8, 68, 56, .18);
}

.cmr-tarea-panel textarea,
.cmr-tarea-panel input,
.cmr-tarea-panel select {
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid var(--crema);
  border-radius: var(--radio);
}


/* --------------------------------------------------------------------------
   Panel de Instagram
   -------------------------------------------------------------------------- */
/* Portado de El Impreso Digital junto con el compositor: sus medidas y su
   disposición. Solo cambian los nombres de sus variables por los de esta hoja
   —su rojo de acento pasa a ser el verde de la casa—, para que el panel no
   traiga una segunda paleta al sitio.

   Las reglas que allí viven dentro de un @media se conservan dentro del suyo:
   sacarlas al primer nivel hacía que la versión estrecha del panel pisara
   siempre a la ancha, y se veía a una sola columna en el escritorio. */



.cmr-btn-primary,
.cmr-btn-ghost {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.85em 1.5em;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: 1.5px solid var(--tinta);
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.cmr-btn-primary {
  background: var(--tinta);
  color: var(--blanco);
  box-shadow: 4px 4px 0 var(--verde);
}

.cmr-btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--verde); }

.cmr-btn-ghost { background: transparent; color: var(--tinta); }

.cmr-btn-ghost:hover { background: var(--tinta); color: var(--blanco); }

.cmr-field { display: flex; flex-direction: column; gap: 0.4rem; }

.cmr-field-label { font-family: var(--sans); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(26,26,26,0.7); }

.cmr-btn-primary[disabled] { opacity: 0.55; cursor: progress; }

.cmr-muted { font-family: var(--sans); color: rgba(26,26,26,0.55); font-size: 0.95rem; }

.cmr-muted code { background: rgba(26,26,26,0.08); padding: 0.1em 0.4em; border-radius: 3px; }

.cmr-link-btn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-weight: 600; color: var(--verde); font-size: 0.9rem;
}

.cmr-link-btn:hover { text-decoration: underline; }

.cmr-btn-ghost-sm {
  font-family: var(--sans); font-weight: 600; font-size: 0.8rem; cursor: pointer;
  padding: 0.4em 0.8em; margin-right: 0.5rem; border: 1.5px solid var(--crema);
  border-radius: 3px; background: transparent; color: var(--tinta);
}

.cmr-btn-ghost-sm:hover { border-color: var(--tinta); background: rgba(26,26,26,0.05); }

.cmr-field-hint { font-family: var(--sans); font-size: 0.8rem; color: rgba(26,26,26,0.55); }

.cmr-field-hint code {
  background: rgba(26,26,26,0.07); padding: 0.1em 0.4em; border-radius: 3px;
  font-size: 0.9em; color: var(--tinta);
}

.cmr-historial .cmr-link-btn { margin-left: 0; }

.cmr-rev-item .cmr-btn-ghost-sm { flex: 0 0 auto; }

.cmr-articulo-bar .cmr-link-btn { margin-left: 0; }

.cmr-btn-ghost-sm, .cmr-btn-edit {
  margin: 0; border-radius: 100px; font-weight: 700; letter-spacing: 0.01em;
  font-size: 0.78rem; padding: 0.4em 0.85em; white-space: nowrap;
  transition: transform .1s, background .12s, color .12s, border-color .12s, box-shadow .12s;
}

.cmr-btn-ghost-sm:active, .cmr-btn-edit:active { transform: translateY(1px); }

a.cmr-btn-ghost-sm {
  border: 1.5px solid #2c6e9b; color: #2c6e9b; background: rgba(47,111,237,0.07);
  text-decoration: none;
}

a.cmr-btn-ghost-sm:hover { background: #2c6e9b; color: #fff; border-color: #2c6e9b;
  box-shadow: 0 3px 10px rgba(47,111,237,0.30); }

button.cmr-btn-ghost-sm {
  border: 1.5px solid #2c6e9b; color: #2c6e9b; background: rgba(12,166,166,0.08);
}

button.cmr-btn-ghost-sm:hover { background: #2c6e9b; color: #fff; border-color: #2c6e9b;
  box-shadow: 0 3px 10px rgba(12,166,166,0.30); }

.cmr-articulo-bar .cmr-link-btn { color: #2c6e9b; }

.cmr-articulo-bar .cmr-link-btn:hover { color: #2c6e9b; }

.cmr-ed-bar .cmr-link-btn { margin-left: 0; }

.cmr-ed-bar .cmr-link-btn + .cmr-link-btn { margin-left: auto; }

.cmr-ed-builder .cmr-field, .cmr-ed-builder .cmr-form-row { margin-bottom: 1rem; }

.cmr-pf .cmr-btn-primary { margin-top: 0.6rem; }

.cmr-modal-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: 1.5rem; background: rgba(12,10,8,0.55);
  backdrop-filter: blur(2px);
}

.cmr-modal {
  background: var(--blanco); border: 1px solid var(--crema); border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.32); max-width: 760px; width: 100%;
  max-height: 86vh; overflow: auto; padding: 1.4rem;
}

.cmr-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

.cmr-modal-head h3 { font-family: var(--serif); font-weight: 800; font-size: 1.35rem; margin: 0; }

.cmr-field-ayuda {
  font-family: var(--sans); font-size: 0.78rem; line-height: 1.45;
  color: rgba(26, 26, 26, 0.55); margin: 0.2rem 0 0;
}

.cmr-muted-inline { font-family: var(--sans); font-size: 0.78rem; color: rgba(26, 26, 26, 0.45); }

.cmr-enc {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 1rem;
  margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--crema);
}

.cmr-enc-lienzo {
  position: relative; border-radius: 8px; overflow: hidden;
  border: 2px solid var(--crema); background: #f3efe6;
  cursor: crosshair; touch-action: none; user-select: none;
}

.cmr-enc-full { display: block; width: 100%; max-height: 260px; object-fit: contain; }

.cmr-enc-diana {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; border: 2px solid #fff; background: rgba(190, 30, 30, 0.55);
  box-shadow: 0 0 0 1.5px var(--verde), 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.cmr-enc-diana::after {
  content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff;
}

.cmr-enc-lado { display: flex; flex-direction: column; gap: 0.5rem; }

.cmr-enc-ayuda {
  font-family: var(--sans); font-size: 0.74rem; line-height: 1.35;
  color: var(--gris); margin: 0;
}

.cmr-enc-muestra { display: flex; flex-direction: column; gap: 0.2rem; }

.cmr-enc-crop {
  border-radius: 6px; overflow: hidden; border: 1px solid var(--crema);
  background: #f3efe6;
}

.cmr-enc-crop img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cmr-enc-crop-32 { aspect-ratio: 3 / 2; }

.cmr-enc-crop-169 { aspect-ratio: 16 / 9; }

.cmr-enc-muestra-txt {
  font-family: var(--sans); font-size: 0.68rem; color: var(--gris);
}

.cmr-enc-reset {
  margin-top: auto; font-family: var(--sans); font-size: 0.75rem; cursor: pointer;
  padding: 0.35rem 0.6rem; border-radius: 6px;
  border: 1px solid var(--crema); background: #fffdf8; color: var(--tinta);
}

.cmr-enc-reset:disabled { opacity: 0.45; cursor: default; }

.cmr-field-label { display: inline-flex; align-items: center; gap: 0.35rem; }

.cmr-field-label .cmr-icon { color: rgba(26, 26, 26, 0.4); flex: none; }

.cmr-btn-ghost-sm, .cmr-btn-danger {
  display: inline-flex; align-items: center; gap: 0.32rem;
}

.cmr-btn-ghost-sm .cmr-icon, .cmr-btn-danger .cmr-icon { flex: none; }

.cmr-greb-modal .cmr-modal-head h3 { display: flex; align-items: center; gap: 0.5rem; }

.cmr-video-marca .cmr-btn-ghost {
  display: inline-flex; align-items: center; gap: 0.35rem; min-width: 10.5rem;
}

.cmr-redes { display: grid; gap: 0.5rem; }

.cmr-red {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  padding: 0.55rem 0.7rem; border: 1px solid var(--crema); border-radius: 9px;
  font-family: var(--sans); font-size: 0.88rem; cursor: pointer;
}

.cmr-red.is-on { border-color: var(--verde); background: rgba(160,32,25,0.05); }

.cmr-red.is-off { opacity: 0.75; cursor: not-allowed; border-style: dashed; }

.cmr-red input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--verde); }

.cmr-red-nombre { font-weight: 700; }

.cmr-red-falta {
  flex-basis: 100%; font-size: 0.78rem; line-height: 1.4; color: var(--naranja);
  padding-left: 1.9rem;
}

.cmr-field-check {
  display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer;
}

.cmr-field-check input[type="checkbox"] {
  margin-top: 0.15rem; width: 17px; height: 17px; accent-color: var(--verde); flex: none;
}

.cmr-field-check > span { display: grid; gap: 0.15rem; }

.cmr-guardar-flotante .cmr-btn-primary {
  display: inline-flex; align-items: center; gap: 0.45rem;
  box-shadow: 0 10px 26px rgba(13,13,13,0.28);
  border-radius: 999px; padding: 0.6rem 1.15rem;
}

.cmr-taller-acciones .cmr-btn-primary {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.7rem; font-size: 0.8rem;
}

.cmr-greb-acciones .cmr-btn-primary,
.cmr-greb-acciones .cmr-btn-ghost { display: inline-flex; align-items: center; gap: 0.45rem; }

.cmr-btn-ghost-sm, .cmr-btn-danger, .cmr-btn-edit, .cmr-btn-ig {
  display: inline-flex; align-items: center; gap: 0.35rem;
}

.cmr-ig-modal { max-width: 1060px; }

.cmr-ig-grid { display: grid; grid-template-columns: 460px 1fr; gap: 1.4rem; align-items: start; }

.cmr-ig-preview { position: sticky; top: 0; }

.cmr-ig-canvas {
  display: block; width: 100%; height: auto; border: 1px solid var(--crema);
  border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); background: var(--papel);
}

.cmr-ig-pie-nota {
  margin: 0.5rem 0 0; font-family: var(--sans); font-size: 0.74rem;
  color: rgba(26,26,26,0.55); text-align: center;
}

.cmr-ig-lado { display: flex; flex-direction: column; gap: 0.9rem; }

.cmr-ig-textarea {
  width: 100%; font-family: var(--sans); font-size: 0.9rem; line-height: 1.55;
  padding: 0.7rem 0.8rem; border: 1px solid var(--crema); border-radius: 8px;
  background: var(--blanco); color: var(--tinta); resize: vertical;
}

.cmr-ig-textarea:focus { outline: 2px solid var(--crema); outline-offset: 1px; }

.cmr-ig-aviso {
  margin: 0; font-family: var(--sans); font-size: 0.82rem; line-height: 1.5;
  padding: 0.7rem 0.85rem; border-left: 3px solid var(--naranja);
  background: rgba(224,138,0,0.08); border-radius: 0 8px 8px 0; color: var(--tinta);
}

.cmr-ig-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.92em; }

.cmr-ig-previo {
  margin: 0; font-family: var(--sans); font-size: 0.82rem; color: rgba(26,26,26,0.62);
}

.cmr-ig-previo a { color: #6b4c9a; }

.cmr-ig-ok {
  margin: 0; font-family: var(--sans); font-weight: 600; font-size: 0.9rem; color: #0d5c4a;
}

.cmr-ig-ok a { color: #6b4c9a; margin-left: 0.3rem; }

.cmr-ig-msg { margin: 0; font-family: var(--sans); font-size: 0.85rem; color: rgba(26,26,26,0.7); }

.cmr-ig-msg.is-error { color: var(--verde); font-weight: 600; }

.cmr-ig-acciones { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

.cmr-ig-acciones .cmr-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.cmr-ig-nota { font-size: 0.78rem; margin: 0; }

.cmr-ig-tira {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.7rem; max-height: 62vh; overflow-y: auto; padding: 0.2rem;
}

.cmr-ig-mini {
  position: relative; cursor: pointer; border-radius: 8px; padding: 0.3rem;
  border: 2px solid transparent; background: rgba(26,26,26,0.03);
  transition: border-color .12s, background .12s;
}

.cmr-ig-mini:hover { background: rgba(26,26,26,0.07); }

.cmr-ig-mini.is-on { border-color: var(--crema); background: rgba(201,168,106,0.14); }

.cmr-ig-mini-lienzo { line-height: 0; }

.cmr-ig-mini .cmr-ig-canvas { border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.14); }

.cmr-ig-mini-n {
  position: absolute; top: 0.55rem; left: 0.55rem; z-index: 2;
  min-width: 1.5em; height: 1.5em; padding: 0 0.35em; border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  background: rgba(12,10,8,0.72); color: #fff;
}

.cmr-ig-mini-tipo {
  display: block; margin-top: 0.3rem; text-align: center;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(26,26,26,0.55);
}

.cmr-ig-mini.is-on .cmr-ig-mini-tipo { color: var(--tinta); }

.cmr-ig-mini-acc {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
  display: flex; gap: 0.2rem; opacity: 0; transition: opacity .12s;
}

.cmr-ig-mini:hover .cmr-ig-mini-acc, .cmr-ig-mini.is-on .cmr-ig-mini-acc { opacity: 1; }

.cmr-ig-mini-acc button {
  width: 22px; height: 22px; border-radius: 100px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; line-height: 1; font-family: var(--sans); font-weight: 700;
  border: none; background: rgba(12,10,8,0.72); color: #fff;
}

.cmr-ig-mini-acc button:hover { background: rgba(12,10,8,0.92); }

.cmr-ig-mini-acc button.is-quitar:hover { background: var(--verde); }

.cmr-ig-mini-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem; cursor: pointer; min-height: 120px; border-radius: 8px;
  border: 2px dashed var(--crema); background: transparent; color: rgba(26,26,26,0.5);
  font-size: 1.5rem; font-family: var(--sans);
}

.cmr-ig-mini-add:hover { border-color: var(--crema); color: var(--tinta); }

.cmr-field input[type="text"], .cmr-field input[type="search"],
.cmr-field input[type="datetime-local"], .cmr-pl-buscar {
  width: 100%; font-family: var(--sans); font-size: 0.95rem;
  padding: 0.62em 0.8em; color: var(--tinta); background: var(--blanco);
  border: 1px solid var(--crema); border-radius: 8px;
  transition: border-color .12s, box-shadow .12s, background .12s;
}

.cmr-field input:hover, .cmr-pl-buscar:hover { border-color: rgba(26,26,26,0.55); }

.cmr-field input:focus, .cmr-pl-buscar:focus {
  outline: none; border-color: var(--tinta); background: #fff;
  box-shadow: 0 0 0 3px rgba(201,168,106,0.35);
}

.cmr-field input::placeholder, .cmr-pl-buscar::placeholder {
  color: rgba(26,26,26,0.38); font-style: italic;
}

.cmr-ig-fotos {
  margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--crema);
}

.cmr-ig-fotos-lbl {
  margin: 0 0 0.5rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(26,26,26,0.55);
}

.cmr-ig-fotos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 0.5rem;
}

.cmr-ig-foto-op {
  padding: 0; cursor: pointer; line-height: 0; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; background: rgba(26,26,26,0.05);
  transition: border-color .12s, transform .1s;
}

.cmr-ig-foto-op img { width: 100%; height: 62px; object-fit: cover; }

.cmr-ig-foto-op:hover { border-color: var(--crema); transform: translateY(-2px); }

.cmr-ig-encuadre { margin: 0.35rem 0 0.2rem; }

.cmr-ig-enc-marco {
  position: relative; line-height: 0; border-radius: 8px; overflow: hidden;
  background: rgba(26,26,26,0.06); touch-action: none; user-select: none;
}

.cmr-ig-enc-img { width: 100%; display: block; -webkit-user-drag: none; }

.cmr-ig-enc-rec {
  position: absolute; cursor: grab; box-sizing: border-box;
  border: 2px solid var(--crema); box-shadow: 0 0 0 9999px rgba(12,10,8,0.55);
}

.cmr-ig-enc-rec:active { cursor: grabbing; }

.cmr-ig-enc-asa {
  position: absolute; right: -8px; bottom: -8px; width: 18px; height: 18px;
  border-radius: 100px; background: var(--crema); border: 2px solid var(--blanco);
  cursor: nwse-resize;
}

.cmr-ig-enc-barra {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin-top: 0.5rem; font-family: var(--sans);
}

.cmr-ig-enc-zoom { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 160px; }

.cmr-ig-enc-zoom span {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(26,26,26,0.55);
}

.cmr-ig-enc-zoom input { flex: 1; min-width: 90px; accent-color: var(--crema); }

.cmr-ig-enc-btns { display: flex; gap: 0.35rem; }

.cmr-ig-enc-btns button {
  padding: 0.3rem 0.7rem; cursor: pointer; font-family: var(--sans);
  font-size: 0.72rem; font-weight: 600; border-radius: 100px;
  border: 1px solid rgba(26,26,26,0.18); background: transparent; color: var(--tinta);
}

.cmr-ig-enc-btns button:hover { background: rgba(26,26,26,0.06); }

.cmr-ig-enc-btns button.is-on { background: var(--crema); border-color: var(--crema); }

.cmr-ig-dividir {
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
  margin-top: 0.6rem;
}

.cmr-ig-dividir-lbl {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(26,26,26,0.55);
  margin-right: 0.2rem;
}

.cmr-ig-dividir button:disabled { opacity: 0.4; cursor: not-allowed; }

.cmr-ig-acciones .is-peligro,
.cmr-ig-acciones .is-peligro:hover {
  background: var(--verde); border-color: var(--verde);
  color: #fff; font-weight: 700;
}

.cmr-agente-propuesta-head .cmr-muted { font-size: 0.76rem; }

.cmr-ig-mini { cursor: grab; }

.cmr-ig-mini.is-arrastrando { opacity: 0.4; cursor: grabbing; }

.cmr-ig-mini.is-destino {
  outline: 2px dashed var(--verde); outline-offset: 3px;
}

.cmr-link-btn.es-entradas {
  border-color: var(--verde); color: var(--verde); font-weight: 600;
}

.cmr-field-titulo input {
  font-family: var(--serif) !important; font-size: 1.5rem !important;
  padding: 0.5rem 0.7rem !important;
}

.cmr-revision-acc .cmr-btn-primary {
  padding: 0.35em 0.85em; font-size: 0.8rem; border-radius: 6px; box-shadow: none;
}

.cmr-revision-acc .cmr-btn-primary:hover { transform: none; }

.cmr-field-cuerpo.es-revisando-cuerpo .cmr-editor-area { display: none; }


@media (max-width: 720px) {
  .cmr-enc { grid-template-columns: 1fr; }
  .cmr-ig-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cmr-ig-grid > * { min-width: 0; }
  .cmr-ig-preview { position: static; max-width: none; margin: 0; }
  .cmr-ig-tira {
    display: flex; flex-wrap: nowrap; gap: 0.5rem;
    max-height: none; overflow-x: auto; overflow-y: visible;
    padding: 0.2rem 0.2rem 0.5rem; -webkit-overflow-scrolling: touch;
  }
  .cmr-ig-mini { flex: 0 0 auto; width: 88px; padding: 0.25rem; }
  .cmr-ig-mini-add { flex: 0 0 auto; width: 88px; min-height: 0; }
  .cmr-ig-mini.is-on .cmr-ig-mini-acc { opacity: 1; }
  .cmr-ig-modal .cmr-modal-head {
    position: sticky; top: -1.4rem; z-index: 4;
    margin: -1.4rem -1.4rem 1rem; padding: 1.4rem 1.4rem 0.7rem;
    background: var(--blanco); border-bottom: 1px solid var(--crema);
    border-radius: 12px 12px 0 0;
  }
}


@media (max-width: 860px) {
  .cmr-ig-grid { grid-template-columns: 1fr; }
  .cmr-ig-tira { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); max-height: 40vh; }
}
/* --------------------------------------------------------------------------
   Editor de redacción
   -------------------------------------------------------------------------- */
/* Portado de El Impreso Digital con el editor: su barra, su ficha plegable y
   la tipografía del cuerpo. Solo cambian los nombres de sus variables por los
   de esta hoja. Las reglas de sus @media se conservan dentro del suyo. */


.cmr-user-menu-backdrop { position: fixed; inset: 0; z-index: 60; }

.cmr-user-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 61; width: 260px;
  background: var(--blanco); border: 1.5px solid var(--tinta); border-radius: 6px;
  box-shadow: -4px 8px 0 rgba(26,26,26,0.2); padding: 1rem; font-family: var(--sans);
}

.cmr-user-menu-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }

.cmr-user-menu-head .cmr-avatar, .cmr-user-menu-head .cmr-avatar-ph { width: 40px; height: 40px; }

.cmr-user-menu-head strong { display: block; font-family: var(--serif); font-size: 1.05rem; }

.cmr-user-menu-email { font-size: 0.8rem; color: rgba(26,26,26,0.6); word-break: break-all; }

.cmr-user-menu-rol { font-size: 0.85rem; color: rgba(26,26,26,0.7); padding: 0.5rem 0; border-top: 1px solid var(--crema); }

.cmr-user-menu-item, .cmr-user-menu-logout {
  display: block; padding: 0.5rem 0; font-weight: 600; text-decoration: none; color: var(--tinta);
  border-top: 1px solid var(--crema);
}

.cmr-user-menu-item:hover { color: var(--verde); }

.cmr-user-menu-logout { color: var(--verde); }

.cmr-user-menu-logout:hover { text-decoration: underline; }

.cmr-editores-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

.cmr-editor {
  display: flex; gap: 1.3rem; padding: 1.8rem;
  background: rgba(255,250,240,0.04); border: 1px solid rgba(244,237,224,0.14);
  border-radius: 4px; transition: transform .2s ease, border-color .2s;
}

.cmr-editor:hover { transform: translateY(-3px); border-color: var(--crema); }

.cmr-editor-portrait {
  flex: 0 0 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 800; font-size: 1.7rem;
  color: var(--gris); background: var(--crema);
}

.cmr-editor-body h3 { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 0.2rem; }

.cmr-editor-rol {
  font-family: var(--sans); font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--crema); margin: 0 0 0.7rem; font-weight: 600;
}

.cmr-editor-bio { font-size: 0.98rem; line-height: 1.5; color: rgba(244,237,224,0.82); margin: 0; }

.cmr-publicar { max-width: var(--ancho); margin: 0 auto; padding: 3rem 1.5rem 5rem; }

.cmr-publicar-head { border-bottom: 1px solid var(--crema); padding-bottom: 1.8rem; margin-bottom: 2.4rem; }

.cmr-publicar-head h1 { font-family: var(--serif); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.02; margin: 0.4rem 0 0.8rem; letter-spacing: -0.02em; }

.cmr-publicar-sub { font-family: var(--sans); font-size: 1.05rem; color: rgba(26,26,26,0.7); max-width: 60ch; margin: 0; }

.cmr-publicar-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }

.cmr-publicar-grid.is-solo { grid-template-columns: 1fr; }

.cmr-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
  padding: 0.5rem; border: 1.5px solid var(--crema); border-bottom: none;
  border-radius: 3px 3px 0 0; background: rgba(26,26,26,0.03);
}

.cmr-tb-btn {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  min-width: 2rem; padding: 0.35em 0.6em; cursor: pointer;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--crema); border-radius: 3px;
  display: inline-flex; align-items: center; gap: 0.3rem;
}

.cmr-tb-btn:hover { background: var(--tinta); color: var(--blanco); }

.cmr-tb-btn b, .cmr-tb-btn i { font-size: 0.95rem; line-height: 1; }

.cmr-tb-img { cursor: pointer; }

.cmr-tb-sep { width: 1px; align-self: stretch; background: var(--crema); margin: 0 0.2rem; }

.cmr-editor-area img.cmr-img-sel { outline: 3px solid var(--crema); outline-offset: 2px; }

.cmr-editor-area figure.cmr-video-clip,
.cmr-editor-area figure.cmr-video-propio { cursor: pointer; }

.cmr-editor-area figure.cmr-video-clip:hover,
.cmr-editor-area figure.cmr-video-propio:hover { outline: 2px dashed var(--crema); outline-offset: 4px; }

.cmr-editor-area figure.cmr-video-clip.cmr-media-sel,
.cmr-editor-area figure.cmr-video-propio.cmr-media-sel { outline: 3px solid var(--crema); outline-offset: 4px; }

.cmr-editor-area figure.cmr-video-propio video { cursor: default; }

.cmr-bubble {
  position: fixed; z-index: 1000; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.15rem; padding: 0.25rem;
  background: var(--tinta); border-radius: 5px; box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}

.cmr-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--tinta);
}

.cmr-bubble-btn {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 700; line-height: 1;
  min-width: 1.9rem; padding: 0.35em 0.5em; cursor: pointer;
  background: transparent; color: var(--blanco); border: none; border-radius: 3px;
}

.cmr-bubble-btn:hover { background: rgba(255,255,255,0.18); }

.cmr-bubble-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.25); margin: 0 0.15rem; }

.cmr-login-card {
  border: 1.5px solid var(--crema); border-radius: 6px; padding: 2.2rem;
  background: rgba(26,26,26,0.02); align-self: start;
}

.cmr-login-card h2 { font-family: var(--serif); font-weight: 800; font-size: 1.8rem; margin: 0.3rem 0 0.8rem; }

.cmr-login-note { margin-top: 1.2rem; font-size: 0.85rem; }

.cmr-userbar {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--crema);
  font-family: var(--sans); font-size: 0.92rem;
}

.cmr-pill {
  display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.2em 0.7em; border: 1px solid var(--crema); border-radius: 100px;
}

.cmr-live-paper .cmr-preview-title { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }

.cmr-live-paper .cmr-preview-body { font-size: 1.02rem; }

.cmr-preview-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(13,13,13,0.55);
  backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 1rem; overflow-y: auto;
}

.cmr-preview-page { position: relative; width: 100%; max-width: 720px; }

.cmr-preview-close {
  position: absolute; top: -2.6rem; right: 0; background: none; border: none;
  color: var(--papel); font-size: 1.5rem; cursor: pointer; line-height: 1;
}

.cmr-preview-paper {
  background: var(--blanco); border: 1px solid var(--crema);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4); padding: 3.2rem clamp(1.4rem, 5vw, 3.5rem);
}

.cmr-preview-kicker {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.72rem; font-weight: 700; color: var(--verde); margin: 0 0 0.8rem;
}

.cmr-preview-title {
  font-family: var(--serif); font-weight: 900; font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 0.8rem;
}

.cmr-preview-byline { font-family: var(--sans); font-size: 0.95rem; color: rgba(26,26,26,0.6); margin: 0 0 1.4rem; }

.cmr-preview-rule { height: 3px; background: var(--tinta); margin: 0 0 1.8rem; }

.cmr-preview-body { font-family: var(--sans); font-size: 1.12rem; line-height: 1.65; color: var(--tinta); }

.cmr-preview-body p { margin: 0 0 1.1rem; }

.cmr-preview-body > p:first-of-type::first-letter {
  font-family: var(--serif); font-weight: 800; float: left; font-size: 3.6rem;
  line-height: 0.78; padding: 0.1em 0.12em 0 0; color: var(--verde);
}

.cmr-preview-body h1 { font-family: var(--serif); font-weight: 900; font-size: 2rem; line-height: 1.08; letter-spacing: -0.01em; margin: 1.6rem 0 0.7rem; color: var(--tinta); }

.cmr-preview-body h2 { font-family: var(--serif); font-weight: 800; font-size: 1.6rem; line-height: 1.12; margin: 1.5rem 0 0.6rem; color: var(--tinta); }

.cmr-preview-body h3 { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; line-height: 1.15; margin: 1.2rem 0 0.5rem; color: var(--tinta); }

.cmr-preview-body > h1:first-child + p::first-letter,
.cmr-preview-body > h2:first-child + p::first-letter { all: unset; }

.cmr-preview-body blockquote {
  margin: 1.2rem 0; padding: 0.4rem 0 0.4rem 1.2rem; border-left: 4px solid var(--crema);
  font-family: var(--serif); font-style: italic; font-size: 1.3rem;
}

.cmr-preview-body img { max-width: 100%; height: auto; border: 1px solid var(--crema); margin: 1rem 0; border-radius: 10px; }

.cmr-preview-body img { transition: filter 0.4s ease; }

.cmr-preview-body img.cmr-img-lq { filter: blur(12px); clip-path: inset(0 round 10px); }

.cmr-model3d-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(0.8rem, 2.4vw, 1.5rem);
  margin: 1.8rem 0 2.2rem;
}

.cmr-preview-body figure.cmr-flip { margin: 0; perspective: 1400px; }

.cmr-preview-body figure.cmr-flip figcaption {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  color: rgba(26,26,26,0.72); margin: 0.55rem 0 0;
}

.cmr-preview-body figure.cmr-art-fig { margin: 1.6rem 0; }

.cmr-preview-body figure.cmr-art-fig img {
  width: 100%; display: block; margin: 0;
  border: 1px solid var(--crema); border-radius: 10px;
}

.cmr-preview-body figure.cmr-art-fig figcaption {
  font-family: var(--sans); font-size: 0.8rem; line-height: 1.45;
  color: rgba(26,26,26,0.6); margin-top: 0.5rem;
}

.cmr-preview-body figure.cmr-art-wide { margin: 2rem 0; }

.cmr-preview-body .cmr-model3d-galeria { clear: both; }

.cmr-preview-body figure.cmr-video { margin: 1.8rem 0; clear: both; }

.cmr-preview-body figure.cmr-video .cmr-video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--crema); border-radius: 10px; overflow: hidden; background: #000;
}

.cmr-preview-body figure.cmr-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.cmr-preview-body figure.cmr-video figcaption {
  font-family: var(--sans); font-size: 0.8rem; line-height: 1.45;
  color: rgba(26,26,26,0.6); margin-top: 0.5rem;
}

.cmr-preview-actions {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.2rem; padding: 1rem clamp(1.4rem, 5vw, 3.5rem); background: var(--gris);
}

.cmr-user-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }

.cmr-user-detail {
  position: sticky; top: 90px; border: 1.5px solid var(--crema); border-radius: 6px;
  padding: 1.4rem; background: rgba(26,26,26,0.02);
}

.cmr-user-detail-top { display: flex; gap: 1rem; align-items: center; margin: 0.6rem 0 1.2rem; }

.cmr-user-detail-top h3 { font-family: var(--serif); font-weight: 800; font-size: 1.3rem; margin: 0; }

.cmr-user-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0 0 1.2rem; font-family: var(--sans); font-size: 0.9rem; }

.cmr-user-dl dt { color: rgba(26,26,26,0.5); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; align-self: center; }

.cmr-user-dl dd { margin: 0; }

.cmr-slug-row {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--crema); border-radius: 3px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s; background: var(--blanco);
}

.cmr-slug-row:focus-within { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(160,32,25,0.12); }

.cmr-slug-prefix {
  display: flex; align-items: center; padding: 0 0.7em; white-space: nowrap;
  background: rgba(26,26,26,0.05); color: rgba(26,26,26,0.55);
  font-family: var(--sans); font-size: 0.92rem; border-right: 1.5px solid var(--crema);
}

.cmr-form .cmr-slug-input { border: none; border-radius: 0; box-shadow: none; }

.cmr-form .cmr-slug-input:focus { box-shadow: none; }

.cmr-publicar-head .cmr-kicker,
.cmr-gestion-head .cmr-kicker { color: var(--verde); }

.cmr-publicar-head h1 { position: relative; }

.cmr-toolbar { position: sticky; top: 72px; z-index: 5; backdrop-filter: blur(4px); }

.cmr-tb-btn:active { transform: translateY(1px); }

.cmr-historial-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }

.cmr-historial-title {
  font-family: var(--sans); font-weight: 800; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: #2c6e9b;
}

.cmr-pill {
  background: rgba(124,77,255,0.10); border-color: rgba(124,77,255,0.45); color: #6b4c9a;
  font-weight: 700;
}

.cmr-estado {
  display: inline-block; font-family: var(--sans); font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2em 0.7em; border-radius: 100px;
  border: 1.5px solid transparent;
}

.cmr-estado-publicado { background: rgba(31,157,87,0.12); color: #0d5c4a; border-color: rgba(31,157,87,0.4); }

.cmr-estado-borrador { background: rgba(224,138,0,0.14); color: var(--naranja); border-color: rgba(224,138,0,0.45); }

.cmr-estado-programado { background: rgba(47,111,237,0.12); color: #2c6e9b; border-color: rgba(47,111,237,0.4); }

.cmr-estado-archivado { background: rgba(26,26,26,0.08); color: rgba(26,26,26,0.55); border-color: var(--crema); }

.cmr-form select,
.cmr-filtro select,
.cmr-select select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: var(--blanco);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a02019' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7em center; background-size: 16px;
  padding-right: 2.3em !important; cursor: pointer;
  border: 1.5px solid var(--crema); border-radius: 8px;
  font-family: var(--sans); font-weight: 600; color: var(--tinta);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.cmr-form select:hover, .cmr-filtro select:hover, .cmr-select select:hover { border-color: var(--tinta); }

.cmr-form select:focus, .cmr-filtro select:focus, .cmr-select select:focus {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(160,32,25,0.14);
}

.cmr-select { display: block; }

.cmr-tb-btn { gap: 0.4rem; }

.cmr-tb-btn .cmr-icon { color: var(--verde); }

.cmr-tb-btn:hover .cmr-icon { color: var(--blanco); }

.cmr-bubble-btn { display: inline-flex; align-items: center; }

.cmr-bubble-btn .cmr-icon { color: var(--blanco); }

.cmr-bubble-danger:hover { background: var(--verde); }

.cmr-bubble-danger:hover .cmr-icon { color: #fff; }

.cmr-preview-body figure { margin: 1.6rem 0; }

.cmr-preview-body figure.cmr-fig img { width: 100%; border: 1px solid var(--crema); }

.cmr-preview-body figure figcaption { font-family: var(--sans); font-size: 0.8rem; color: rgba(26,26,26,0.55); margin-top: 0.5rem; text-align: center; }

.cmr-preview-body figure.cmr-fig-hero { margin-top: 0.4rem; }

.cmr-preview-body .cmr-2col { display: grid; grid-template-columns: 0.9fr 1fr; gap: 1.8rem; align-items: center; margin: 2.2rem 0; }

.cmr-preview-body .cmr-2col-rev { grid-template-columns: 1fr 0.9fr; }

.cmr-preview-body .cmr-2col-rev .cmr-2col-media { order: 2; }

.cmr-preview-body .cmr-2col-media img { width: 100%; border: 1px solid var(--crema); box-shadow: 6px 8px 0 rgba(26,26,26,0.06); }

.cmr-preview-body .cmr-2col-text h2 { margin-top: 0; }

.cmr-preview-body .cmr-2col-text p { margin-bottom: 0; }

.cmr-preview-body blockquote.cmr-pull {
  border: none; border-left: 4px solid var(--verde); background: rgba(201,168,106,0.09);
  margin: 2rem 0; padding: 1rem 1.5rem; font-family: var(--serif); font-style: italic;
  font-size: 1.4rem; line-height: 1.35; color: var(--tinta);
}

.cmr-preview-body ol.cmr-qgrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  list-style: none; counter-reset: q; padding: 0; margin: 1.2rem 0;
}

.cmr-preview-body ol.cmr-qgrid li {
  counter-increment: q; position: relative; break-inside: avoid;
  border: 1px solid var(--crema); background: var(--blanco); border-radius: 8px;
  box-shadow: 4px 6px 0 rgba(26,26,26,0.05);
  padding: 0.95rem 1rem 0.95rem 2.9rem;
  font-family: var(--sans); font-size: 0.92rem; line-height: 1.5;
}

.cmr-preview-body ol.cmr-qgrid li::before {
  content: counter(q); position: absolute; left: 0.7rem; top: 0.9rem;
  width: 1.55rem; height: 1.55rem; background: var(--verde); color: #fff;
  border-radius: 50%; display: grid; place-items: center;
  font-family: var(--sans); font-weight: 700; font-size: 0.8rem;
}

.cmr-preview-body figure.cmr-embed iframe {
  width: 100%; height: 540px; border: 1px solid var(--tinta); border-radius: 6px;
  box-shadow: 6px 8px 0 rgba(26,26,26,0.08); background: var(--blanco); display: block;
}

.cmr-preview-body figure.cmr-embed figcaption { text-align: left; font-size: 0.82rem; color: rgba(26,26,26,0.6); }

.cmr-preview-body figure.cmr-embed a { color: var(--verde); font-weight: 600; }

.cmr-byline-row .cmr-preview-byline { margin: 0; }

.cmr-preview-body p.cmr-doclink { margin: 0.7rem 0 0; }

.cmr-preview-body p.cmr-doclink a {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 700; color: var(--verde);
  text-decoration: none; border-bottom: 1px dashed rgba(160,32,25,0.45);
}

.cmr-preview-body p.cmr-doclink a:hover { border-bottom-style: solid; }

.cmr-articulo-acciones + .cmr-preview-rule { margin-top: 1.15rem; }

.cmr-preview-body .cmr-audio-leyendo {
  background: rgba(199,158,74,0.16);
  box-shadow: -0.7rem 0 0 rgba(199,158,74,0.16), 0.7rem 0 0 rgba(199,158,74,0.16);
  border-radius: 2px;
}

.cmr-model3d {
  margin: 1.6rem 0; text-align: center;
}

.cmr-model3d model-viewer {
  --poster-color: transparent;
  width: 100%; height: min(72vh, 560px);
  background: radial-gradient(120% 100% at 50% 0%, #fbf7ef 0%, #efe7d7 70%, #e6dcc7 100%);
  border: 1px solid var(--crema); border-radius: 12px;
  --interaction-prompt-color: var(--tinta);
}

.cmr-model3d figcaption {
  margin-top: 0.55rem; font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.02em; color: rgba(26,26,26,0.62);
}

.cmr-model3d model-viewer[ar-status="session-started"] .cmr-mv-hint { display: none; }

.cmr-model3d-galeria {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin: 1.6rem 0;
}

.cmr-model3d-galeria .cmr-model3d { margin: 0; }

.cmr-model3d-galeria model-viewer { height: min(56vh, 440px); }

.cmr-model-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.9rem;
}

.cmr-model-card {
  display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
  padding: 0.7rem; background: rgba(26,26,26,0.02); border: 1px solid var(--crema);
  border-radius: 10px; cursor: pointer; font-family: var(--sans); font-size: 0.82rem;
  font-weight: 600; color: var(--tinta); transition: border-color 0.15s, transform 0.1s;
}

.cmr-model-card:hover { border-color: var(--crema); transform: translateY(-2px); }

.cmr-model-card img { width: 100%; height: 130px; object-fit: contain; }

.cmr-preview-body .cmr-cols-2 {
  column-count: 2; column-gap: 2rem; margin: 1.4rem 0;
}

.cmr-preview-body .cmr-cols-2 p { margin-top: 0; }

.cmr-preview-body .cmr-pull {
  margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 4px solid var(--verde);
  font-family: var(--serif); font-size: 1.45rem; line-height: 1.35; font-style: italic;
  color: var(--tinta);
}

.cmr-preview-body .cmr-pull cite {
  display: block; margin-top: 0.5rem; font-family: var(--sans); font-size: 0.8rem;
  font-style: normal; font-weight: 600; letter-spacing: 0.04em; color: rgba(26,26,26,0.55);
}

.cmr-preview-body .cmr-objecion { margin: 1.4rem 0; }

.cmr-preview-body .cmr-objecion > p:first-child {
  font-family: var(--sans); font-weight: 700; font-size: 1rem; margin: 0 0 0.4rem;
  color: var(--verde);
}

.cmr-preview-body .cmr-bas-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem; margin: 1.6rem 0; padding: 0; list-style: none;
}

.cmr-preview-body .cmr-bas-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.8rem; margin: 1.6rem 0; padding: 0; list-style: none;
}

.cmr-preview-body .cmr-bas-evidencia { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: 0.7rem; }

.cmr-preview-body .cmr-bas-check, .cmr-preview-body .cmr-bas-ficha {
  list-style: none; padding: 1.1rem 1.2rem; margin: 1.5rem 0; display: grid; gap: 0.5rem;
  border: 1px dashed var(--rule-strong, var(--crema)); border-radius: 12px;
  font-family: var(--sans); font-size: 0.92rem;
}

.cmr-preview-body .cmr-bas-titulin {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(26,26,26,0.55); margin: 1.6rem 0 0.2rem;
}

.cmr-bloque-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.7rem; margin-top: 1rem;
}

.cmr-bloque-card {
  display: grid; gap: 0.25rem; text-align: left; cursor: pointer;
  padding: 0.8rem; border: 1px solid var(--crema); border-radius: 10px;
  background: #fffdf8; font-family: var(--sans); transition: border-color 0.15s ease, transform 0.15s ease;
}

.cmr-bloque-card:hover { border-color: var(--verde); transform: translateY(-1px); }

.cmr-bloque-icono { font-size: 1.2rem; color: var(--verde); }

.cmr-bloque-nombre { font-weight: 700; font-size: 0.92rem; }

.cmr-bloque-desc { font-size: 0.78rem; color: rgba(26,26,26,0.6); line-height: 1.35; }

#cmr-editor-area [data-cmr-bloque] {
  position: relative; outline: 1px dashed rgba(160,32,25,0.35); outline-offset: 4px;
  border-radius: 6px;
}

#cmr-editor-area [data-cmr-bloque]:hover { outline-color: var(--verde); }

#cmr-editor-area [data-cmr-widget="zafacon"] {
  min-height: 64px; display: grid; place-items: center;
  background: rgba(201,168,106,0.12); border-radius: 10px;
}

#cmr-editor-area [data-cmr-widget="zafacon"]::before {
  content: "♻ Bloque «Donar un zafacón» — se activa en el artículo publicado";
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: rgba(26,26,26,0.6);
}

.cmr-preview-body h4 {
  font-family: var(--sans); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.01em; line-height: 1.3;
  margin: 1.9rem 0 0.5rem; padding-bottom: 0.35rem;
  color: var(--tinta); border-bottom: 1px solid var(--crema);
}

.cmr-preview-body h4 + p { margin-top: 0.6rem; }

.cmr-preview-body .cmr-tri-instrumental, .cmr-tri-instrumental {
  font-family: var(--sans); font-size: 0.8rem; font-style: italic;
  color: rgba(26, 26, 26, 0.5); margin: 0.5rem 0 0;
}

#cmr-editor-area [data-greb-radio] {
  min-height: 64px; display: grid; place-items: center;
  background: rgba(23, 21, 26, 0.9); border-radius: 10px;
}

#cmr-editor-area [data-greb-radio]::before {
  content: "♪ Lista de Radio Greb — se activa en el artículo publicado";
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--crema);
}

.cmr-preview-body .cmr-articulo-ad-medio {
  max-width: none; margin: 2.4rem 0; padding: 1.4rem 0;
  border-top: 1px solid var(--crema); border-bottom: 1px solid var(--crema);
  clear: both;
}

.cmr-greb-icono { display: inline-block; border-radius: 3px; vertical-align: -0.15em; }

.cmr-tb-greb .cmr-greb-icono { margin-right: 0.1rem; }

.cmr-bubble-greb .cmr-greb-icono { border-radius: 2px; }

.cmr-bubble-btn.is-on { background: rgba(255,255,255,0.28); }

.cmr-greb-campo { display: grid; gap: 0.35rem; margin-bottom: 1rem; }

.cmr-greb-campo > span {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(26,26,26,0.55);
}

.cmr-greb-campo textarea, .cmr-greb-campo input[type="text"] {
  font-family: var(--sans); font-size: 0.92rem; padding: 0.55rem 0.7rem; width: 100%;
  border: 1px solid var(--crema); border-radius: 8px; background: #fffdf8; color: var(--tinta);
}

.cmr-greb-campo textarea { min-height: 76px; resize: vertical; line-height: 1.45; }

.cmr-greb-campo textarea:focus, .cmr-greb-campo input:focus {
  outline: 2px solid var(--crema); border-color: transparent;
}

.cmr-greb-estilos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 0.6rem;
}

.cmr-greb-estilo {
  display: grid; gap: 0.2rem; text-align: left; cursor: pointer; padding: 0.7rem;
  border: 1px solid var(--crema); border-radius: 10px; background: #fffdf8;
  font-family: var(--sans); color: var(--tinta);
  transition: border-color .15s ease, transform .15s ease;
}

.cmr-greb-estilo:hover { border-color: var(--verde); transform: translateY(-1px); }

.cmr-greb-estilo.is-on { border-color: var(--verde); background: rgba(160,32,25,0.06); box-shadow: inset 0 0 0 1px var(--verde); }

.cmr-greb-estilo-icono { display: flex; color: var(--verde); opacity: 0.85; }

.cmr-greb-estilo.is-on .cmr-greb-estilo-icono { opacity: 1; }

.cmr-greb-estilo-nombre { font-weight: 700; font-size: 0.9rem; }

.cmr-greb-estilo-desc { font-size: 0.76rem; color: rgba(26,26,26,0.6); line-height: 1.35; }

.cmr-greb-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.cmr-greb-chip {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; cursor: pointer;
  padding: 0.35rem 0.85rem; border-radius: 100px; border: 1px solid var(--crema);
  background: transparent; color: var(--tinta);
}

.cmr-greb-chip.is-on { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }

.cmr-greb-origen { display: grid; gap: 0.6rem; margin-bottom: 1rem; }

.cmr-greb-origen img {
  width: 100%; max-height: 220px; object-fit: contain; border: 1px solid var(--crema);
  border-radius: 10px; background: rgba(26,26,26,0.04);
}

.cmr-greb-prompt { font-family: var(--sans); font-size: 0.8rem; color: rgba(26,26,26,0.6); margin: 0.2rem 0 0; }

.cmr-greb-prompt summary { cursor: pointer; font-weight: 600; }

.cmr-greb-prompt p { margin: 0.5rem 0 0; line-height: 1.5; }

.cmr-greb-error { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--verde); }

.cmr-greb-lienzo {
  margin-top: 1.1rem; border: 1px solid var(--crema); border-radius: 10px; overflow: hidden;
  background: rgba(26,26,26,0.04); min-height: 160px; display: grid; place-items: center;
}

.cmr-greb-lienzo img { width: 100%; }

.cmr-greb-esperando {
  font-family: var(--sans); font-size: 0.85rem; line-height: 1.5;
  color: rgba(26,26,26,0.6); margin: 1rem 0 0; padding-top: 0.9rem;
  border-top: 1px solid var(--crema);
}

.cmr-agenda-bloque {
  margin: 0 0 1.8rem; padding: 1rem 1.2rem; border-radius: 10px;
  border: 1px solid var(--crema); background: rgba(26,26,26,0.03);
  font-family: var(--sans);
}

.cmr-agenda-tit {
  margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--verde);
}

.cmr-agenda-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

.cmr-agenda-lista li {
  display: flex; gap: 0.9rem; align-items: baseline; flex-wrap: wrap;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--crema);
}

.cmr-agenda-lista li:last-child { border-bottom: 0; padding-bottom: 0; }

.cmr-agenda-cuando { min-width: 12rem; font-size: 0.85rem; }

.cmr-agenda-hora { margin-left: 0.4rem; color: rgba(26,26,26,0.6); }

.cmr-agenda-que { flex: 1; min-width: 12rem; font-size: 0.92rem; }

.cmr-agenda-lugar { display: block; font-size: 0.8rem; color: rgba(26,26,26,0.6); }

.cmr-agenda-pie { margin: 0.8rem 0 0; font-size: 0.82rem; }

.cmr-agenda-cargando { margin: 0; font-family: var(--sans); font-size: 0.85rem; }

.cmr-greb-error.is-ok { color: #0d5c4a; }

.cmr-buscar-flotante {
  position: fixed; right: 1rem; top: 5.5rem; z-index: 1140;
  width: min(360px, calc(100vw - 2rem)); max-height: calc(100vh - 8rem);
  display: flex; flex-direction: column;
  background: var(--blanco); border: 1px solid var(--crema); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(13,13,13,0.22); font-family: var(--sans);
}

.cmr-buscar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--crema);
}

.cmr-buscar-head h3 {
  display: flex; align-items: center; gap: 0.45rem; margin: 0;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 700;
}

.cmr-buscar-flotante .cmr-wm-buscador { display: flex; gap: 0.4rem; padding: 0.7rem 0.75rem 0.4rem; }

.cmr-buscar-flotante .cmr-wm-buscador input { flex: 1; min-width: 0; }

.cmr-buscar-nota {
  margin: 0 0.75rem 0.5rem; font-size: 0.78rem; line-height: 1.45;
  color: rgba(26,26,26,0.6);
}

.cmr-buscar-cuerpo { overflow-y: auto; padding: 0 0.75rem 0.75rem; }

.cmr-buscar-flotante .cmr-wm-lista { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }

.cmr-video-clip { margin: 1.8rem 0; }

.cmr-video-clip .cmr-video-frame {
  position: relative; padding-top: 56.25%; background: #000;
  border-radius: 8px; overflow: hidden;
}

.cmr-video-clip .cmr-video-frame > iframe,
.cmr-video-clip .cmr-video-frame > div {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.cmr-video-clip .cmr-video-frame > a {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--papel); font-family: var(--sans); font-size: 0.9rem; text-decoration: underline;
}

.cmr-video-clip figcaption {
  font-family: var(--sans); font-size: 0.85rem; line-height: 1.5;
  color: rgba(26,26,26,0.65); margin-top: 0.6rem; text-align: center;
}

.cmr-video-clip .cmr-video-frame > a.cmr-video-poster {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; background-size: cover; background-position: center; text-decoration: none;
}

.cmr-video-poster::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.35); }

.cmr-video-play-badge {
  position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem; color: #fff; padding-left: 4px;
  background: rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.9);
}

.cmr-video-poster-txt {
  position: relative; z-index: 1; color: #fff; font-family: var(--sans);
  font-size: 0.85rem; text-decoration: underline;
}

.cmr-video-custom { position: absolute; inset: 0; z-index: 2; }

.cmr-video-big {
  position: absolute; inset: 0; width: 100%; height: 100%; background: transparent;
  border: 0; cursor: pointer;
}

.cmr-video-bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center;
  gap: 0.5rem; padding: 0.45rem 0.6rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
}

.cmr-video-btn { background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0.1rem 0.2rem; }

.cmr-video-time { color: #fff; font-family: var(--sans); font-size: 0.75rem; white-space: nowrap; }

.cmr-video-scrub { flex: 1; accent-color: var(--verde); cursor: pointer; height: 4px; }

.cmr-video-preview-hint { margin: 0 0 0.5rem; }

.cmr-video-propio { margin: 1.8rem 0; }

.cmr-video-propio .cmr-video-frame {
  position: relative; background: #000; border-radius: 8px; overflow: hidden;
  line-height: 0;
}

.cmr-video-nuestro {
  display: block; width: 100%; max-height: 78vh; background: #000;
}

.cmr-video-propio figcaption {
  font-family: var(--sans); font-size: 0.85rem; line-height: 1.5;
  color: rgba(26,26,26,0.65); margin-top: 0.6rem; text-align: center;
}

.cmr-video-bajar {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem;
  font-family: var(--sans); font-size: 0.8rem; color: var(--verde);
  text-decoration: none; border-bottom: 1px solid currentColor;
}

.cmr-video-bajar::before { content: "⬇"; font-size: 0.9em; }

.cmr-video-bajar:hover { opacity: 0.75; }

.cmr-video-drop {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 1.6rem 1rem; margin: 0.4rem 0 1rem; cursor: pointer;
  border: 2px dashed var(--crema); border-radius: 10px; text-align: center;
}

.cmr-video-drop:hover { border-color: var(--crema); }

.cmr-video-drop-txt { font-family: var(--sans); font-size: 0.95rem; }

.cmr-video-subiendo { padding: 1.2rem 0; }

.cmr-video-barra {
  height: 6px; border-radius: 3px; background: var(--crema); overflow: hidden;
  margin: 0.5rem 0;
}

.cmr-video-barra-llena {
  height: 100%; background: var(--verde); transition: width 0.2s linear;
}

.cmr-videoteca {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.6rem; margin-top: 0.4rem;
}

.cmr-videoteca-item {
  display: flex; flex-direction: column; gap: 0.25rem; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--crema); border-radius: 8px;
  overflow: hidden; text-align: left; font-family: var(--sans);
}

.cmr-videoteca-item:hover { border-color: var(--crema); }

.cmr-videoteca-tira {
  display: block; aspect-ratio: 16/9; background: #000; overflow: hidden;
  display: grid; place-items: center; color: rgba(255,255,255,0.6);
}

.cmr-videoteca-tira img { width: 100%; height: 100%; object-fit: cover; }

.cmr-videoteca-nombre {
  font-size: 0.75rem; padding: 0 0.4rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.cmr-videoteca-dato {
  font-size: 0.7rem; padding: 0 0.4rem 0.4rem; color: rgba(26,26,26,0.55);
}

.cmr-autosave {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.5rem 0.8rem; margin: 0 0 0.9rem; border: 1px solid var(--crema);
  border-radius: 8px; background: rgba(201,168,106,0.14);
  font-family: var(--sans); font-size: 0.9rem;
}

.cmr-autosave-txt { color: var(--tinta); margin-right: auto; }

.cmr-video-modal { max-width: 680px; }

.cmr-video-preview {
  position: relative; padding-top: 56.25%; background: rgba(26,26,26,0.06);
  border-radius: 8px; overflow: hidden; margin-bottom: 1rem;
}

.cmr-video-preview > iframe, .cmr-video-preview > div {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.cmr-video-preview > p { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }

.cmr-conflicto {
  margin: 1.2rem 0; padding: 1rem 1.1rem; border-radius: 10px;
  border: 1px solid var(--naranja); background: rgba(224,138,0,0.07);
  font-family: var(--sans);
}

.cmr-conflicto-que {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem;
  font-weight: 700; font-size: 0.95rem; color: var(--tinta);
}

.cmr-conflicto-nota {
  margin: 0.3rem 0 0; font-size: 0.85rem; line-height: 1.5;
  color: rgba(26,26,26,0.7);
}

.cmr-conflicto-acciones {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.9rem;
}

.cmr-crea-greb .cmr-greb-icono { width: 34px; height: 34px; object-fit: contain; }

.cmr-galeria {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem; margin: 1.6rem 0; clear: both;
}

.cmr-galeria img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; margin: 0; }

.cmr-galeria img:only-child { height: auto; object-fit: contain; }

.cmr-preview-body img.cmr-img-izq, #cmr-editor-area img.cmr-img-izq,
.cmr-preview-body img.cmr-img-der, #cmr-editor-area img.cmr-img-der { width: 45%; }

.cmr-preview-body h2, .cmr-preview-body h3 { clear: both; }

.cmr-pl-filtros .cmr-select { flex: 1 1 150px; }

.cmr-greb-campo > span { display: flex; align-items: center; gap: 0.35rem; }

.cmr-preview-body .cmr-transcripcion-nota {
  font-family: var(--sans); font-size: 0.85rem; line-height: 1.55;
  color: rgba(26,26,26,0.62); border-left: 3px solid var(--crema);
  padding: 0.2rem 0 0.2rem 0.9rem; margin: 1.2rem 0 1.6rem;
}

.cmr-preview-body .cmr-transcripcion { clear: both; }

.cmr-preview-body .cmr-transcripcion p {
  font-size: 0.97rem; line-height: 1.62; margin: 0 0 0.85rem;
  padding-left: 3.4rem; text-indent: -3.4rem;
}

.cmr-preview-body .cmr-transcripcion p strong {
  font-family: var(--sans); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--verde);
}

.cmr-preview-body .cmr-tr-marca {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26,26,26,0.5);
  border-top: 1px solid var(--crema); padding: 1.4rem 0 0; margin: 2rem 0 1.2rem;
  text-indent: 0;
}

.cmr-preview-body .cmr-radio-intro { font-style: italic; color: rgba(26,26,26,0.7); }

.cmr-preview-body .cmr-articulo-ad-medio .cmr-ad-band-full img {
  max-height: clamp(200px, 34vh, 320px); }

.cmr-preview-body img { cursor: zoom-in; }

.cmr-preview-body a img,
.cmr-preview-body [data-cmr-bloque] img { cursor: default; }

.cmr-galeria.is-laminas img { height: auto; object-fit: contain; align-self: start; }

.cmr-diff {
  flex-basis: 100%; margin: 0.7rem 0 0.2rem; padding: 0.9rem 1rem;
  border: 1px solid var(--crema); border-radius: 10px;
  background: rgba(26,26,26,0.025);
}

.cmr-diff-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--crema);
}

.cmr-diff-resumen {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(26,26,26,0.6);
}

.cmr-diff-titulo { margin-bottom: 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--crema); }

.cmr-diff-titulo-lbl {
  display: block; margin-bottom: 0.3rem; font-family: var(--sans); font-size: 0.7rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde);
}

.cmr-diff-cuerpo { max-height: 46vh; overflow-y: auto; }

.cmr-diff-linea {
  display: flex; gap: 0.55rem; align-items: baseline;
  padding: 0.28rem 0.45rem; border-radius: 4px;
  font-family: var(--sans); font-size: 0.92rem; line-height: 1.55;
}

.cmr-diff-linea.igual { color: rgba(26,26,26,0.45); }

.cmr-diff-linea.puesto { background: rgba(31,157,87,0.10); }

.cmr-diff-linea.quitado { background: rgba(160,32,25,0.09); }

.cmr-diff-signo {
  flex: none; width: 1ch; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700; opacity: 0.75;
}

.cmr-diff-linea.puesto  .cmr-diff-signo { color: #0d5c4a; }

.cmr-diff-linea.quitado .cmr-diff-signo { color: var(--verde); }

.cmr-diff-linea.quitado .cmr-diff-txt { text-decoration: line-through; text-decoration-thickness: 1px;
  text-decoration-color: rgba(160,32,25,0.4); }

.cmr-diff-w { border-radius: 3px; padding: 0 0.12em; font-weight: 600; }

.cmr-diff-w.puesto { background: rgba(31,157,87,0.30); }

.cmr-diff-w.quitado { background: rgba(160,32,25,0.26); }

.cmr-preview-body .cmr-serie-kicker {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde);
  margin: 0 0 1.4rem; padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--crema);
  display: inline-block;
}

.cmr-preview-body .cmr-serie-nota {
  margin: 2.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--crema);
  font-family: var(--sans); font-size: 0.85rem; line-height: 1.6;
  color: rgba(26,26,26,0.6);
}

.cmr-preview-body .cmr-pie-foto {
  margin: -0.6rem 0 1.8rem; font-family: var(--sans); font-size: 0.78rem;
  line-height: 1.5; color: rgba(26,26,26,0.55); clear: both;
}

.cmr-bubble-enlace { display: flex; align-items: center; gap: 0.3rem; padding: 0 0.15rem; }

.cmr-bubble-enlace input {
  width: 260px; max-width: 42vw; font-family: var(--sans); font-size: 0.8rem;
  padding: 0.3rem 0.5rem; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1); color: #fff; outline: none;
}

.cmr-bubble-enlace input::placeholder { color: rgba(255,255,255,0.5); }

.cmr-bubble-enlace input:focus { border-color: rgba(255,255,255,0.6); }

.cmr-meta { border: 1px solid var(--crema); border-radius: 10px; margin: 0.6rem 0 1rem; }

.cmr-meta-cab {
  display: flex; align-items: center; gap: 0.45rem; width: 100%;
  background: none; border: 0; cursor: pointer; padding: 0.5rem 0.8rem;
  font-family: var(--sans); font-size: 0.85rem; color: var(--tinta); text-align: left;
}

.cmr-meta-cab:hover { background: rgba(26,26,26,0.03); }

.cmr-meta-cab-lbl { font-weight: 600; }

.cmr-meta-resumen { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-left: 0.3rem; }

.cmr-meta-dato { font-size: 0.78rem; color: var(--gris); }

.cmr-meta-dato.es-destacado { color: var(--verde); font-weight: 600; }

.cmr-meta-slug { font-size: 0.74rem; color: var(--gris); background: rgba(26,26,26,0.06); padding: 0.1em 0.4em; border-radius: 4px; }

.cmr-meta-campos {
  display: grid; gap: 0.9rem; padding: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--crema);
}

.cmr-publicar-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.8rem; }

.cmr-publicar-head h1 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2rem); }

.cmr-publicar-volver {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto;
  font-family: var(--sans); font-size: 0.82rem; text-decoration: none; color: var(--gris);
}

.cmr-publicar-volver:hover { color: var(--tinta); }

.cmr-publicar-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 2rem; }

.cmr-publicar-grid.is-solo { grid-template-columns: minmax(0, 1fr); }

.cmr-publicar-doc { min-width: 0; }

.cmr-publicar-lateral {
  position: sticky; top: 88px; align-self: start;
  max-height: calc(100vh - 108px); display: flex; min-width: 0;
}

.cmr-publicar-lateral .cmr-rd {
  margin: 0; display: flex; flex-direction: column; width: 100%; min-height: 0;
}

.cmr-publicar-lateral .cmr-rd-borrador { margin-top: 0; }

.cmr-publicar-lateral .cmr-rd-img { flex-wrap: wrap; }

.cmr-publicar-lateral .cmr-rd-img-acc { margin-left: 2rem; }

.cmr-publicar-lateral .cmr-rd-chips { flex-direction: column; align-items: flex-start; }

.cmr-publicar-lateral {
  
  height: auto; max-height: calc(100dvh - 110px);
}

.cmr-publicar-lateral .cmr-rd { height: auto; max-height: 100%; }

.cmr-publicar, .cmr-panel, .cmr-est { position: relative; z-index: 0; }

.cmr-publicar::before, .cmr-panel::before, .cmr-est::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--serif);
  background-image:
    linear-gradient(rgba(26,26,26,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

.cmr-publicar .cmr-form, .cmr-publicar .cmr-toolbar, .cmr-publicar .cmr-editor-area,
.cmr-panel .cmr-pt, .cmr-panel .cmr-baldosa, .cmr-est .cmr-est-cifra {
  background-color: var(--blanco);
}

.cmr-publicar .cmr-form { padding: 1rem 1.2rem 1.4rem; border-radius: 12px; border: 1px solid var(--crema); }


@media (prefers-reduced-motion: reduce) {
  .cmr-preview-body img { transition: none; }
}


@media (min-width: 720px) {
  .cmr-preview-body figure.cmr-art-right {
    float: right; width: 42%; margin: 0.4rem 0 1rem 1.6rem;
  }
  .cmr-preview-body figure.cmr-art-left {
    float: left; width: 42%; margin: 0.4rem 1.6rem 1rem 0;
  }
  .cmr-preview-body img.cmr-img-izq, #cmr-editor-area img.cmr-img-izq {
    float: left; margin: 0.3rem 1.5rem 0.9rem 0;
  }
  .cmr-preview-body img.cmr-img-der, #cmr-editor-area img.cmr-img-der {
    float: right; margin: 0.3rem 0 0.9rem 1.5rem;
  }
}


@media (max-width: 800px) {
  .cmr-user-layout { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Panel de Greb (redactar y generar imágenes)
   -------------------------------------------------------------------------- */
/* La columna derecha del taller y sus modales, portados con el editor. Solo se
   traen las reglas de las clases que los módulos portados usan de verdad:
   traerse la hoja entera metía estilos ajenos al editor. */

:root {
  --greb-amarillo: #F5DF4D;
  --greb-tinta:    #2E2710;
  --greb-muted:    #8A7320;
  --greb-acento:   #B11A5E;
  --greb-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}


.cmr-form-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.4rem; }

.cmr-form-msg { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; }

.cmr-form-msg.is-ok { color: #2e6b3e; }

.cmr-form-msg.is-error { color: var(--verde); }

.cmr-btn-google {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1rem;
  font-family: var(--sans); font-weight: 600; font-size: 1rem; text-decoration: none;
  padding: 0.8em 1.4em; border: 1.5px solid var(--tinta); border-radius: 3px;
  background: var(--blanco); color: var(--tinta); box-shadow: 4px 4px 0 var(--crema);
  transition: transform .15s, box-shadow .15s;
}

.cmr-btn-google:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--crema); }

.cmr-btn-google .cmr-g {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--verde); color: #fff; font-family: var(--serif); font-weight: 900; font-size: 1rem;
}

.cmr-logout { margin-left: auto; font-weight: 600; color: var(--verde); text-decoration: none; }

.cmr-logout:hover { text-decoration: underline; }

.cmr-editing-banner {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem;
  padding: 0.7rem 1rem; border-left: 4px solid var(--crema); background: rgba(201,168,106,0.12);
  font-family: var(--sans); font-size: 0.92rem; font-weight: 600;
}

.cmr-live { align-self: start; }

.cmr-live-label {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.7rem; font-weight: 700; color: rgba(26,26,26,0.5); margin: 0 0 0.7rem;
}

.cmr-flip-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

.cmr-flip-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 8;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
  border-radius: 12px;
  
}

.cmr-flip-toggle:checked ~ .cmr-flip-inner { transform: rotateY(180deg); }

.cmr-flip-face {
  position: absolute; inset: 0; margin: 0;
  border: 1px solid var(--crema); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #faf7f1 0%, #ece3d3 100%);
  box-shadow: 0 1px 2px rgba(26,26,26,0.06), 0 8px 22px rgba(26,26,26,0.07);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.cmr-flip:hover .cmr-flip-face { box-shadow: 0 2px 4px rgba(26,26,26,0.08), 0 14px 34px rgba(26,26,26,0.13); }

.cmr-flip-front { cursor: pointer; }

.cmr-flip-front img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; border: 0; margin: 0; border-radius: 0; }

.cmr-flip-badge {
  position: absolute; right: 0.55rem; bottom: 0.55rem;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  background: rgba(26,26,26,0.78); color: #fff;
  padding: 0.32em 0.7em; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(26,26,26,0.25);
}

.cmr-flip-front:hover .cmr-flip-badge { background: var(--verde); }

.cmr-flip-back { transform: rotateY(180deg); background: linear-gradient(180deg, #f6f1e8 0%, #e6dccb 100%); }

.cmr-flip-back model-viewer {
  width: 100%; height: 100%;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--crema);
  cursor: grab;
}

.cmr-flip-back model-viewer:active { cursor: grabbing; }

.cmr-flip-flipback {
  position: absolute; right: 0.55rem; bottom: 0.55rem; cursor: pointer;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  background: rgba(255,255,255,0.85); color: var(--tinta);
  padding: 0.32em 0.7em; border-radius: 100px; border: 1px solid var(--crema);
}

.cmr-flip-flipback:hover { background: #fff; }

.cmr-flip-ar {
  display: flex; align-items: center; gap: 0.7rem; margin: 0.55rem 0 0;
  font-family: var(--sans); font-size: 0.74rem; line-height: 1.35;
  color: rgba(26,26,26,0.66);
}

.cmr-flip-ar img {
  width: 78px; height: 78px; flex: 0 0 auto; margin: 0;
  border: 1px solid var(--crema); border-radius: 6px; background: #fff;
}

.cmr-flip-ar a { color: var(--verde); font-weight: 700; text-decoration: none; white-space: nowrap; }

.cmr-flip-ar a:hover { text-decoration: underline; }

.cmr-rev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; max-height: 320px; overflow-y: auto; }

.cmr-rev-meta { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; flex: 1; }

.cmr-rev-who { font-family: var(--sans); font-weight: 700; font-size: 0.88rem; color: var(--tinta); }

.cmr-rev-when { font-family: var(--sans); font-size: 0.74rem; color: rgba(26,26,26,0.55); }

.cmr-rev-tit { font-family: var(--sans); font-size: 0.82rem; color: rgba(26,26,26,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cmr-descargas {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  margin: 1.6rem 0; padding: 1rem; border: 1px dashed var(--rule-strong, var(--crema));
  border-radius: 12px; background: rgba(201,168,106,0.08);
}

.cmr-descargas img { width: 120px; border-radius: 6px; border: 1px solid var(--crema); margin: 0; }

.cmr-descargas-txt { flex: 1; min-width: 220px; font-family: var(--sans); font-size: 0.9rem; }

.cmr-descargas-txt a {
  display: inline-block; margin-top: 0.5rem; margin-right: 0.6rem; padding: 0.45rem 0.9rem;
  border-radius: 100px; background: var(--verde); color: #fff; font-weight: 700;
  font-size: 0.82rem; text-decoration: none;
}

.cmr-bas-rating {
  flex: none; font-weight: 700; font-size: 0.78rem; padding: 0.25rem 0.55rem; border-radius: 100px;
  background: var(--tinta); color: var(--blanco); letter-spacing: 0.02em;
}

.cmr-portada-grid {
  display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.5rem;
}

.cmr-portada-op {
  position: relative; padding: 0; cursor: pointer; overflow: hidden;
  width: 120px; height: 78px; border-radius: 8px;
  border: 2px solid var(--crema); background: #fffdf8;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.cmr-portada-op:hover { border-color: var(--tinta); transform: translateY(-1px); }

.cmr-portada-op img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cmr-portada-op.is-on { border-color: var(--verde); }

.cmr-portada-op.is-on::after {
  content: "✓"; position: absolute; top: 4px; right: 5px;
  width: 19px; height: 19px; border-radius: 50%; background: var(--verde); color: #fff;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  display: grid; place-items: center;
}

.cmr-portada-auto {
  display: grid; place-content: center; gap: 0.15rem; text-align: center;
  font-family: var(--sans); padding: 0.4rem;
}

.cmr-portada-auto-txt { font-size: 0.82rem; font-weight: 700; }

.cmr-portada-auto-sub { font-size: 0.68rem; color: rgba(26, 26, 26, 0.5); line-height: 1.25; }

.cmr-portada-vacio { font-size: 0.85rem; margin-top: 0.4rem; }

.cmr-cal-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.75rem; border: 1px solid var(--crema); border-radius: 999px;
  background: none; cursor: pointer; font-family: var(--sans); font-size: 0.85rem;
  color: var(--tinta);
}

.cmr-cal-chip:hover { border-color: var(--crema); }

.cmr-cal-chip.is-on { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }

.cmr-cal-n { font-size: 0.75rem; opacity: 0.6; }

.cmr-cal-cat {
  display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.5rem;
  padding: 0.1rem 0.45rem; border-radius: 999px; vertical-align: 0.08em;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}

.cmr-cal-cat.es-cine { background: rgba(160,32,25,0.12);  color: var(--verde); }

.cmr-cal-cat.es-teatro { background: rgba(124,77,255,0.12); color: #6b4c9a; }

.cmr-cal-cat.es-musica { background: rgba(12,166,166,0.14); color: #2c6e9b; }

.cmr-cal-cat.es-exposicion { background: rgba(224,138,0,0.14);  color: var(--naranja); }

.cmr-cal-cat.es-literatura { background: rgba(47,111,237,0.12); color: #2c6e9b; }

.cmr-cal-cat.es-charla { background: rgba(31,157,87,0.12);  color: #0d5c4a; }

.cmr-cal-cat.es-evento { background: rgba(26,26,26,0.08);   color: rgba(26,26,26,0.7); }

.cmr-cal-proponer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--crema); }

.cmr-cal-form h2 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 0.3rem; }

.cmr-cal-campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.8rem; margin: 1rem 0;
}

.cmr-cal-gracias {
  display: flex; align-items: center; gap: 0.5rem; font-family: var(--sans);
  color: #0d5c4a; font-weight: 600; margin: 1rem 0 0;
}

.cmr-cal-moderar {
  margin-top: 2.5rem; padding: 1.1rem 1.2rem; border-radius: 10px;
  border: 1px solid var(--naranja); background: rgba(224,138,0,0.06);
  font-family: var(--sans);
}

.cmr-cal-moderar h2 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 0.2rem; }

.cmr-cal-moderar ul { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.7rem; }

.cmr-cal-moderar li {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  flex-wrap: wrap; padding-bottom: 0.7rem; border-bottom: 1px solid var(--crema);
}

.cmr-cal-moderar li:last-child { border-bottom: 0; padding-bottom: 0; }

.cmr-cal-quien { margin: 0.15rem 0 0; font-size: 0.78rem; color: rgba(26,26,26,0.55); }

.cmr-cal-acc { display: flex; gap: 0.5rem; }

.cmr-ev-modal { max-width: 760px; }

.cmr-ev-lista { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }

.cmr-ev-fila {
  display: flex; gap: 0.6rem; padding: 0.7rem; border: 1px solid var(--crema);
  border-radius: 9px; background: rgba(26,26,26,0.02);
}

.cmr-ev-fila.is-on { border-color: var(--verde); background: rgba(160,32,25,0.04); }

.cmr-ev-check input { width: 17px; height: 17px; accent-color: var(--verde); margin-top: 0.35rem; }

.cmr-ev-datos { flex: 1; min-width: 0; display: grid; gap: 0.4rem; }

.cmr-ev-tit { font-family: var(--sans); font-weight: 700; font-size: 0.95rem; }

.cmr-ev-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.cmr-ev-row input { flex: 1; min-width: 11rem; }

.cmr-ev-datos input {
  font-family: var(--sans); padding: 0.4rem 0.55rem;
  border: 1px solid var(--crema); border-radius: 6px;
}

.cmr-ev-frase {
  margin: 0; font-size: 0.78rem; line-height: 1.4; color: rgba(26,26,26,0.55);
  font-style: italic;
}

.cmr-ev-ya { margin: 0.8rem 0; font-family: var(--sans); font-size: 0.85rem; }

.cmr-ev-ya ul { margin: 0.3rem 0 0; padding-left: 1.1rem; color: rgba(26,26,26,0.7); }

.cmr-cal-lugar { margin: 0.1rem 0 0; font-family: var(--sans); font-size: 0.83rem; color: rgba(26,26,26,0.6); }

.cmr-taller-historial { border-top: 1px solid var(--crema); padding: 0.6rem 0.7rem 0.7rem; }

.cmr-taller-historial .cmr-taller-head { padding: 0 0 0.5rem; border: 0; font-size: 0.85rem; }

.cmr-taller-rejilla {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem;
  margin: 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto;
}

.cmr-taller-rejilla button {
  display: block; width: 100%; padding: 0; border: 1px solid var(--crema);
  border-radius: 6px; overflow: hidden; background: none; cursor: pointer;
}

.cmr-taller-rejilla button:hover { border-color: var(--verde); }

.cmr-taller-rejilla img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

.cmr-cuadro {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: #fffdd0; border: 2px solid #000; border-radius: 16px;
  padding: 1.2rem 1.4rem; margin: 1.6rem 0;
  filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.2));
}

.cmr-cuadro > :first-child { margin-top: 0; }

.cmr-cuadro > :last-child { margin-bottom: 0; }

.cmr-cuadro h2, .cmr-cuadro h3 { font-family: inherit; margin: 0.9rem 0 0.4rem; }

.cmr-cuadro ul { margin: 0.4rem 0 0.4rem 1rem; }

.cmr-cuadro-crema { background: #fffdd0; }

.cmr-cuadro-azul { background: #d6eaff; }

.cmr-html-modal { max-width: 760px; width: 92vw; }

.cmr-html-codigo {
  width: 100%; box-sizing: border-box; min-height: 46vh; resize: vertical;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.82rem;
  line-height: 1.5; padding: 0.7rem 0.8rem; border: 1px solid var(--crema);
  border-radius: 8px; background: var(--blanco); color: var(--tinta); white-space: pre;
}

.cmr-guardar-eco {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--tinta);
  background: var(--blanco); border: 1px solid var(--crema); border-radius: 999px;
  padding: 0.35rem 0.7rem; box-shadow: 0 6px 18px rgba(13,13,13,0.12);
}

.cmr-guardar-flotante.is-ok .cmr-guardar-eco { border-color: #0d5c4a; color: #0d5c4a; }

.cmr-taller-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--crema);
}

.cmr-taller.is-min .cmr-taller-head { border-bottom: 0; }

.cmr-taller-tirador {
  display: inline-flex; align-items: center; gap: 0.45rem; background: none; border: 0;
  padding: 0; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 700;
  color: var(--tinta);
}

.cmr-taller-n {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem;
  padding: 0 0.35rem; border-radius: 999px; background: var(--verde); color: #fff;
  font-size: 0.72rem; font-weight: 700;
}

.cmr-taller-lista { overflow-y: auto; padding: 0.7rem; display: grid; gap: 0.7rem; }

.cmr-taller-item {
  border: 1px solid var(--crema); border-radius: 9px; padding: 0.55rem;
  background: rgba(26,26,26,0.02);
}

.cmr-taller-item.is-error { border-color: var(--verde); }

.cmr-taller-item > header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
}

.cmr-taller-estilo {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: rgba(26,26,26,0.55);
}

.cmr-taller-x {
  background: none; border: 0; cursor: pointer; font-size: 1.1rem; line-height: 1;
  color: rgba(26,26,26,0.45); padding: 0 0.15rem;
}

.cmr-taller-x:hover { color: var(--verde); }

.cmr-taller-que {
  margin: 0.25rem 0 0.5rem; font-size: 0.8rem; line-height: 1.4;
  color: rgba(26,26,26,0.75);
}

.cmr-taller-pintando {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 0.45rem; min-height: 74px; border-radius: 7px; overflow: hidden;
  background: rgba(26,26,26,0.05); font-size: 0.8rem; color: rgba(26,26,26,0.7);
}

.cmr-taller-fantasma {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.22;
}

.cmr-taller-pintando > span { position: relative; }

.cmr-taller-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(26,26,26,0.2); border-top-color: var(--verde);
  animation: cmr-taller-giro 0.8s linear infinite;
}

.cmr-taller-lienzo {
  width: 100%; border-radius: 7px; display: block; border: 1px solid var(--crema);
}

.cmr-taller-fallo { display: grid; gap: 0.35rem; }

.cmr-taller-fallo p { margin: 0; }

.cmr-rev-acc { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

.cmr-wm-vacio { padding: 2rem 0; text-align: center; }

.cmr-wm-item {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem;
  border-bottom: 1px solid var(--crema);
}

.cmr-wm-item:hover { background: rgba(26,26,26,0.03); }

.cmr-wm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.cmr-wm-tit {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cmr-wm-meta {
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
  font-family: var(--sans); font-size: 0.74rem; color: rgba(26,26,26,0.6);
}

.cmr-wm-autor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }

.cmr-wm-lic {
  padding: 0.1em 0.5em; border-radius: 100px; font-weight: 700;
  background: rgba(31,157,87,0.12); color: #0d5c4a; white-space: nowrap;
}

.cmr-wm-dim { color: rgba(26,26,26,0.45); }

.cmr-wm-acc { flex: none; display: flex; align-items: center; gap: 0.4rem; }

.cmr-wm-ver {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 100px; color: rgba(26,26,26,0.5);
  border: 1px solid var(--crema);
}

.cmr-wm-ver:hover { color: var(--tinta); border-color: var(--tinta); }

.cmr-agente-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--crema);
}

.cmr-agente-title { display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.9rem; font-weight: 700; color: var(--tinta); }

.cmr-agente-x { background: none; border: 0; cursor: pointer; font-size: 1.2rem;
  line-height: 1; color: var(--tinta); opacity: 0.7; }

.cmr-agente-x:hover { opacity: 1; color: var(--verde); }

.cmr-agente-tabs { display: flex; border-bottom: 1px solid var(--crema); }

.cmr-agente-tabs button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.5rem 0.4rem;
  color: rgba(26,26,26,0.55);
}

.cmr-agente-tabs button.is-on { color: var(--tinta); border-bottom-color: var(--verde); }

.cmr-agente-cuerpo { flex: 1; overflow-y: auto; padding-bottom: 0.4rem; }

.cmr-agente-sel { padding: 0.6rem 0.7rem 0; }

.cmr-agente-sel-lbl { display: block; font-size: 0.74rem; color: rgba(26,26,26,0.6);
  margin-bottom: 0.25rem; }

.cmr-agente-sel-txt {
  margin: 0; padding: 0.4rem 0.6rem; border-left: 3px solid var(--crema);
  background: rgba(26,26,26,0.03); font-size: 0.82rem; color: var(--tinta);
}

.cmr-agente-campo { display: block; padding: 0.6rem 0.7rem 0; }

.cmr-agente-campo > span { display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 600; color: var(--tinta); margin-bottom: 0.3rem; }

.cmr-agente-campo textarea {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit;
  font-size: 0.88rem; padding: 0.5rem 0.6rem; border: 1px solid var(--crema);
  border-radius: 8px; background: var(--blanco); color: var(--tinta);
}

.cmr-agente-acciones { display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap; padding: 0.6rem 0.7rem; }

.cmr-agente-pensando { display: flex; align-items: center; gap: 0.5rem;
  padding: 0 0.7rem 0.7rem; font-size: 0.85rem; color: rgba(26,26,26,0.65); }

.cmr-agente-propuesta { border-top: 1px solid var(--crema); padding: 0.6rem 0.7rem; }

.cmr-agente-diff {
  border: 1px solid var(--crema); border-radius: 8px; padding: 0.35rem 0.5rem;
  background: rgba(26,26,26,0.02); font-size: 0.85rem; line-height: 1.45;
}

.cmr-agente-propuesta-acc { display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap; margin-top: 0.5rem; }

.cmr-agente-fallo { padding: 0 0.7rem 0.7rem; }

.cmr-cal-acc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

.cmr-cal-cartel-puesto { display: flex; align-items: flex-start; gap: 0.6rem; }

.cmr-cal-cartel-puesto img {
  width: 96px; border-radius: 6px; border: 1px solid var(--crema); display: block;
}

.cmr-rd-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }

.cmr-rd-title {
  display: flex; align-items: center; gap: 0.4rem;
  font-weight: 600; font-size: 0.92rem;
}

.cmr-rd-plegar {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--greb-muted); display: grid; place-items: center;
  padding: 0.2rem; border-radius: 6px;
}

.cmr-rd-plegar:hover { color: var(--greb-tinta); background: rgba(46,39,16,0.12); }

.cmr-rd-box {
  background: rgba(255,255,255,0.55); border: 1.5px solid rgba(46,39,16,0.28);
  border-radius: 10px; padding: 0.55rem 0.7rem 0.5rem;
  transition: border-color .15s ease;
}

.cmr-rd-box:focus-within { border-color: var(--greb-acento); }

.cmr-rd-box.es-ocupado { opacity: 0.65; }

.cmr-rd-box textarea {
  width: 100%; background: transparent; border: 0; outline: none; resize: none;
  color: inherit; font-family: inherit; font-size: 0.95rem; line-height: 1.5;
  
  min-height: 3.4em; max-height: 9em;
}

.cmr-rd-box textarea::placeholder { color: rgba(46,39,16,0.45); }

.cmr-rd-barra { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.cmr-rd-barra button {
  font-family: inherit; font-size: 0.78rem; cursor: pointer;
  background: rgba(255,255,255,0.5); color: var(--greb-tinta);
  border: 1px solid rgba(46,39,16,0.25); border-radius: 999px;
  padding: 0.3rem 0.7rem; display: inline-flex; align-items: center; gap: 0.35rem;
}

.cmr-rd-barra button:hover { background: #fff; }

.cmr-rd-largos { display: inline-flex; gap: 0.25rem; }

.cmr-rd-largos button.es-on { background: var(--gris); color: var(--greb-amarillo); border-color: var(--gris); }

.cmr-rd-mic.es-grabando { background: var(--verde); border-color: var(--verde); animation: cmr-rd-latido 1.4s infinite; }

.cmr-rd-barra .cmr-rd-ir {
  background: var(--greb-acento); border-color: var(--greb-acento); color: #fff;
  font-size: 0.82rem; font-weight: 600; padding: 0.42rem 0.9rem;
  border-radius: 8px; box-shadow: none;
}

.cmr-rd-barra .cmr-rd-ir:hover { background: #8f1349; transform: none; }

.cmr-rd-barra .cmr-rd-ir:disabled { opacity: 0.6; cursor: default; }

.cmr-rd-pensando {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  margin-top: 0.8rem; font-size: 0.86rem; color: var(--greb-tinta);
}

.cmr-rd-pensando em { font-style: normal; color: var(--greb-acento); font-weight: 700; }

.cmr-rd-nota { font-size: 0.76rem; color: var(--greb-muted); }

.cmr-rd-checks { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.5rem; }

.cmr-rd-checks > span {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #0d5c4a;
}

.cmr-rd-titular {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; margin: 0 0 0.3rem;
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}

.cmr-rd-entradilla { margin: 0 0 0.5rem; font-size: 0.95rem; color: rgba(26,26,26,0.75); }

.cmr-rd-cuerpo {
  font-family: var(--sans); font-size: 0.92rem; line-height: 1.5;
  max-height: 11rem; overflow: hidden; position: relative;
  border-left: 2px solid var(--crema); padding-left: 0.8rem;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
          mask-image: linear-gradient(180deg, #000 70%, transparent);
}

.cmr-rd-cuerpo.es-corto { max-height: 4.5rem; }

.cmr-rd-cuerpo p { margin: 0 0 0.5rem; }

.cmr-rd-imgs { margin-top: 0.9rem; border-top: 1px solid var(--crema); padding-top: 0.7rem; }

.cmr-rd-imgs-tit {
  display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.5rem;
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gris);
}

.cmr-rd-img-n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tinta); color: var(--blanco); display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700;
}

.cmr-rd-img-txt { display: grid; gap: 0.1rem; font-size: 0.87rem; }

.cmr-rd-img-donde { font-size: 0.76rem; color: var(--gris); }

.cmr-rd-acc { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; }

.cmr-rd-puesto {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--sans); font-size: 0.82rem; color: #0d5c4a; font-weight: 600;
}

.cmr-rd-tira {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  background: none; border: 0; cursor: pointer; color: var(--greb-tinta);
  font-family: inherit; font-size: 0.85rem; text-align: left; padding: 0.1rem;
}

.cmr-rd-tira svg:last-child { margin-left: auto; }

.cmr-rd-cuerpo h2, .cmr-rd-cuerpo h3 {
  font-family: var(--serif); font-size: 1rem; margin: 0.7rem 0 0.3rem;
}

.cmr-rd-cuerpo blockquote {
  margin: 0.5rem 0; padding-left: 0.7rem; border-left: 2px solid var(--crema);
  font-style: italic; color: rgba(26,26,26,0.72);
}

.cmr-rd-cuerpo ul { margin: 0.4rem 0; padding-left: 1.1rem; }

.cmr-rd-cuerpo li { margin: 0.15rem 0; }

.cmr-rd-vacio { color: rgba(46,39,16,0.7); font-size: 0.84rem; line-height: 1.5; }

.cmr-rd-vacio p { margin: 0 0 0.6rem; }

.cmr-rd-title { white-space: nowrap; }

.cmr-rd-head { flex: none; }

.cmr-rd-box { flex: none; }

.cmr-rd-tabs { display: inline-flex; gap: 0.25rem; margin-left: auto; }

.cmr-rd-tabs button {
  font-family: inherit; font-size: 0.72rem; cursor: pointer;
  background: rgba(255,255,255,0.45); color: var(--greb-tinta);
  border: 1px solid rgba(46,39,16,0.25); border-radius: 999px; padding: 0.18rem 0.6rem;
}

.cmr-rd-tabs button.es-on { background: var(--gris); color: var(--greb-amarillo); border-color: var(--gris); }

.cmr-rd-modo {
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--gris); color: var(--greb-amarillo);
  padding: 0.14rem 0.5rem; border-radius: 999px; white-space: nowrap;
}

.cmr-rd-revision {
  display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.82rem;
  background: rgba(255,255,255,0.5); border: 1px solid rgba(46,39,16,0.3);
  border-radius: 8px; padding: 0.55rem 0.65rem; line-height: 1.45;
}

.cmr-rd-imagen { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.cmr-revision {
  border: 2px solid var(--gris); border-radius: 10px;
  background: #fffdf5; margin-bottom: 0.6rem; overflow: hidden;
}

.cmr-revision-cab {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.5rem 0.7rem; background: var(--greb-amarillo);
  border-bottom: 2px solid var(--gris);
  font-family: var(--greb-mono); font-size: 0.8rem; color: var(--greb-tinta);
}

.cmr-revision-tit { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; }

.cmr-revision-res { color: var(--greb-muted); }

.cmr-revision-diff { max-height: 60vh; overflow-y: auto; padding: 0.6rem 0.7rem; }

.cmr-rd-clip { cursor: pointer; }

.cmr-rd-adjunto {
  display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0.1rem;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(46,39,16,0.3);
  border-radius: 8px; padding: 0.4rem 0.55rem;
}

.cmr-rd-adjunto-txt { display: grid; min-width: 0; line-height: 1.3; }

.cmr-rd-adjunto-txt strong {
  font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cmr-rd-adjunto-txt span { font-size: 0.72rem; color: var(--greb-muted); }

.cmr-rd-adjunto > button {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--greb-muted); display: grid; place-items: center; padding: 0.2rem;
}

.cmr-rd-adjunto > button:hover { color: var(--greb-acento); }


@media (prefers-reduced-motion: reduce) {
  .cmr-taller-spinner { animation-duration: 3s; }
}

/* Carteles de la casa (plantillas del panel) ---------------------------- */

.cmr-ig-plantillas { display: grid; gap: .6rem; margin-top: .8rem; }

.cmr-ig-plantillas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .6rem;
}

.cmr-ig-plantilla-op {
  display: grid;
  gap: .25rem;
  padding: .8rem;
  text-align: left;
  background: var(--papel);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
  transition: border-color var(--transicion), transform var(--transicion);
}

.cmr-ig-plantilla-op:hover { border-color: var(--verde); transform: translateY(-1px); }

.cmr-ig-plantilla-nombre {
  font-weight: 700; font-size: .86rem; color: var(--verde);
}

.cmr-ig-plantilla-desc { font-size: .74rem; line-height: 1.35; color: var(--gris); }

/* Los campos del cartel van apilados y algo más juntos que los del panel:
   son muchos y cada uno es corto. */
.cmr-ig-campo { margin-top: .5rem; }
.cmr-ig-campo input[type="file"] { font-size: .8rem; }


/* La lámina en grande. La tira de arriba dice el orden; esto dice qué pone. */
.cmr-ig-grande {
  margin-top: .9rem;
  border-radius: calc(var(--radio) * 3);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--papel);
}

.cmr-ig-grande-canvas {
  display: block;
  width: 100%;
  height: auto;   /* el canvas es 1080×1350 de verdad; aquí solo se escala */
}


/* La tarjeta del panel de Greb. Se quedó fuera del port anterior: el filtro
   pedía las clases que el marcado usa y `.cmr-rd` —el contenedor— aparecía
   siempre con un sufijo detrás, así que su regla base no entró. Sin ella el
   panel salía sobre blanco, sin borde y sin la sombra dura. */

.cmr-greb-modal { max-width: 760px; }

.cmr-greb-acciones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; }

.cmr-agente-propuesta-head { display: flex; align-items: baseline; gap: 0.5rem;
  margin-bottom: 0.4rem; }

.cmr-agente-propuesta-txt {
  border: 1px solid var(--crema); border-radius: 8px; padding: 0.55rem 0.65rem;
  background: rgba(26,26,26,0.02); font-size: 0.9rem; line-height: 1.5; color: var(--tinta);
}

.cmr-rd {
  background: var(--greb-amarillo); color: var(--greb-tinta);
  border: 2px solid #1a1a1a;
  border-radius: 14px; padding: 0.85rem 1rem 1rem;
  margin: 0 0 1.2rem; font-family: var(--greb-mono);
  box-shadow: 0 6px 0 rgba(26,26,26,0.88), 0 14px 34px rgba(26,26,26,0.2);
  overflow: hidden;
}

.cmr-rd-sub { font-size: 0.78rem; color: var(--greb-muted); }

.cmr-rd-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }

.cmr-rd-chips button {
  font-family: inherit; font-size: 0.76rem; cursor: pointer; text-align: left;
  background: none; color: rgba(46,39,16,0.72);
  border: 1px dashed rgba(46,39,16,0.35); border-radius: 999px;
  padding: 0.28rem 0.7rem;
}

.cmr-rd-chips button:hover { color: var(--greb-acento); border-color: var(--greb-acento); }

.cmr-rd-encargos { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }

.cmr-rd-encargos button {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer;
  background: rgba(46,39,16,0.05); color: rgba(46,39,16,0.82);
  border: 1px solid rgba(46,39,16,0.28); border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.cmr-rd-encargos button:hover {
  color: var(--greb-acento); border-color: var(--greb-acento);
  background: rgba(46,39,16,0.02);
}

.cmr-rd-borrador {
  margin-top: 0.8rem; background: var(--blanco); color: var(--tinta);
  border: 1.5px solid rgba(46,39,16,0.35);
  border-radius: 10px; padding: 0.9rem 1rem 1rem; font-family: var(--sans);
}

.cmr-rd-mas { color: var(--gris); }

.cmr-rd-img {
  display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.45rem 0;
  border-bottom: 1px dotted var(--crema); font-family: var(--sans);
}

.cmr-rd-img:last-child { border-bottom: 0; }

.cmr-rd-img-acc { margin-left: auto; display: flex; gap: 0.35rem; flex: none; }

@media (max-width: 900px) {
  .cmr-hero-cover { max-width: 360px; margin: 0 auto; }
  .cmr-columns { columns: 1; }
  .cmr-articulos { border-left: none; padding-left: 0; border-top: 1px solid var(--crema); padding-top: 2rem; }
  .cmr-topbar-nav { gap: 0.9rem; font-size: 0.82rem; }
  .cmr-topbar-nav a:not(.cmr-topbar-cta) { display: none; }
  .cmr-blog-ediciones-grid { grid-template-columns: 1fr; }
  .cmr-ad-cards { grid-template-columns: repeat(3, 1fr); }
}


@media (max-width: 560px) {
  .cmr-issue-card { grid-template-columns: 120px 1fr; gap: 1rem; }
  .cmr-topbar-brand { font-size: 1rem; }
  .cmr-blog-ed { grid-template-columns: 110px 1fr; gap: 1rem; }
  .cmr-blog-ed img, .cmr-blog-ed-soon { width: 110px; height: 150px; }
  .cmr-ad { max-width: 100%; }
  .cmr-zf-form { grid-template-columns: 1fr; }
  .cmr-zf-campo:nth-child(n) { grid-column: 1 / -1; }
  .cmr-wm-thumb { width: 64px; height: 48px; }
}


@media (max-width: 620px) {
  .cmr-blog-grid { grid-template-columns: 1fr; }
  .cmr-ad-band { grid-template-columns: 1fr; }
  .cmr-ad-band-media { min-height: 200px; }
  .cmr-blog-side { flex-direction: column; }
  .cmr-articulo-acciones .cmr-audio { margin-left: 0; }
  .cmr-ad-band-full-img, .cmr-ad-band-full picture, .cmr-ad-band-full img {
    max-height: 68vh; }
  .cmr-pl-filtro { gap: 0.7rem; }
  .cmr-pl-filtro-lbl { width: 100%; }
  .cmr-pl-franja-desc { display: none; }
}


@media (max-width: 480px) {
  .cmr-ad-cards { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 820px) {
  .cmr-mapa-layout { grid-template-columns: 1fr; }
  .cmr-mapa-lbl, .cmr-mapa-dot-n { font-size: 24px; }
  .cmr-panel-cols { grid-template-columns: 1fr; gap: 1.4rem; }
  .cmr-panel-side { position: static; }
  .cmr-panel-nav { display: flex; overflow-x: auto; gap: 0.4rem; padding-bottom: 0.2rem; }
  .cmr-panel-navi { width: auto; white-space: nowrap; border: 1px solid var(--crema); }
  .cmr-panel-navi em { display: none; }
  .cmr-est-dos { grid-template-columns: 1fr; }
  .cmr-est-barra em { display: none; }
}


@media (max-width: 760px) {
  .cmr-topbar-nav { display: none !important; }
  .cmr-nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 40px; background: none; border: 1px solid var(--crema); border-radius: 8px;
    cursor: pointer; padding: 0 10px; }
  .cmr-nav-burger span { display: block; height: 2px; background: var(--tinta); border-radius: 2px; }
  .cmr-pl-cols { grid-template-columns: 1fr; }
}


@media (max-width: 720px) {
  .cmr-trilingue:not(.solo-en):not(.solo-es):not(.solo-la) [data-l]:not([data-l="en"]) { display: none; }
  .cmr-trilingue td, .cmr-trilingue th { padding: 0.55rem 0.65rem; }
  .cmr-agente { right: 0.5rem; left: 0.5rem; top: auto; bottom: 0.5rem;
    width: auto; max-height: 72vh; }
  .cmr-mapa-lbl { font-size: 20px; stroke-width: 4px; }
  .cmr-mapa-dot-n { font-size: 17px; }
  .cmr-mapa-credito { font-size: 14px; }
}


@media (max-width: 860px) {
  .cmr-an-form-grid { grid-template-columns: 1fr; }
  .cmr-an-form-preview { position: static; }
}


@media (max-width: 700px) {
  .cmr-taller { bottom: 4rem; }
  .cmr-taller { right: 0.5rem; left: 0.5rem; bottom: 0.5rem; width: auto; max-height: 60vh; }
}


@media (max-width: 1500px) {
  .cmr-topbar-nav:has(a:nth-child(7)) { gap: 0.8rem; font-size: 0.86rem; }
  .cmr-topbar-nav:has(a:nth-child(7)) a:nth-child(n+7):not(.cmr-topbar-cta) span { display: none; }
  .cmr-topbar-nav:has(a:nth-child(7)) a:nth-child(n+7):not(.cmr-topbar-cta) {
    padding: 0.2rem; }
  .cmr-topbar-nav:has(a:nth-child(7)) a:nth-child(n+7) .cmr-icon { width: 18px; height: 18px; }
}


@media (max-width: 1180px) {
  .cmr-topbar-nav a:not(.cmr-topbar-cta):not(:first-child) span { display: none; }
  .cmr-topbar-nav a .cmr-icon { width: 18px; height: 18px; }
  .cmr-topbar-nav { gap: 0.9rem; }
}


@media (max-width: 460px) {
  .cmr-venta-acc { flex-direction: column; align-items: stretch; }
  .cmr-venta-btn { justify-content: center; }
}


@media (max-width: 640px) {
  .cmr-cal-cartel { width: 78px; }
  .cmr-rd-atajo { display: none; }
}


@media (max-width: 1080px) {
  .cmr-rd-hilo { max-height: 46vh; }
}

@media (max-width: 900px) {
  .cmr-editores-grid, .cmr-biblioteca-grid, .cmr-publicar-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cmr-buscar-flotante { left: 0.5rem; right: 0.5rem; width: auto; top: auto; bottom: 0.5rem; max-height: 60vh; }
}


@media (max-width: 640px) {
  .cmr-preview-body .cmr-2col, .cmr-preview-body .cmr-2col-rev { grid-template-columns: 1fr; }
  .cmr-preview-body .cmr-2col-rev .cmr-2col-media { order: 0; }
  .cmr-preview-body ol.cmr-qgrid { grid-template-columns: 1fr; }
  .cmr-preview-body figure.cmr-embed iframe { height: 400px; }
}


@media (max-width: 700px) {
  .cmr-preview-body .cmr-cols-2 { column-count: 1; }
}


@media (max-width: 719px) {
  .cmr-preview-body img[data-ancho="25"] { width: 60% !important; }
  .cmr-preview-body img[data-ancho="50"] { width: 85% !important; }
  .cmr-preview-body img[data-ancho="75"] { width: 100% !important; }
  .cmr-preview-body img.cmr-img-izq,
  .cmr-preview-body img.cmr-img-der { width: 100%; }
  .cmr-preview-body img[data-ancho],
  .cmr-preview-body img.cmr-img-izq,
  .cmr-preview-body img.cmr-img-der { margin-left: auto; margin-right: auto; }
}


@media (max-width: 560px) {
  .cmr-preview-body .cmr-transcripcion p { padding-left: 0; text-indent: 0; }
  .cmr-preview-body .cmr-transcripcion p strong { display: block; margin-bottom: 0.15rem; }
  .cmr-diff { padding: 0.7rem; }
  .cmr-diff-cuerpo { max-height: 40vh; }
}


@media (max-width: 1080px) {
  .cmr-publicar-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .cmr-publicar-lateral { position: static; max-height: none; order: -1; }
  .cmr-publicar-lateral .cmr-rd-chips { flex-direction: row; }
  .cmr-publicar-lateral { height: auto; }
  .cmr-publicar-lateral .cmr-rd { height: auto; }
}

@media (max-width: 900px) {
  /* Debajo de esto el menú partido no cabe: se va al cajón y queda el logo. */
  .cmr-nav-lado { display: none; }
  .cmr-nav { grid-template-columns: 1fr; justify-items: center; }

  .cmr-cal-cultural { grid-template-columns: 1fr; }
  .cmr-reserva { grid-template-columns: 1fr; }
  .cmr-reserva-col:first-child { border-right: none; border-bottom: 1px solid var(--crema); }
  .cmr-datos-rejilla { grid-template-columns: 1fr; }
  .cmr-noticias { grid-template-columns: 1fr; }
  .cmr-ficha { grid-template-columns: 1fr; }
  .cmr-pie-cuerpo { grid-template-columns: 1fr; justify-items: center; gap: 2.5rem; text-align: center; }
  .cmr-pie-datos { padding-left: 0; border-left: none; }
  .cmr-pie-dato a, .cmr-pie-dato { justify-content: center; }
}

/* En móvil una tabla de seis columnas no cabe de ninguna manera, y el scroll
   horizontal esconde justo lo que hace falta: los botones de confirmar. Cada
   fila pasa a ser una ficha, y cada celda lleva su etiqueta delante. */
@media (max-width: 760px) {
  .cmr-tabla, .cmr-tabla thead, .cmr-tabla tbody,
  .cmr-tabla tr, .cmr-tabla th, .cmr-tabla td { display: block; }

  .cmr-tabla thead { display: none; }

  .cmr-tabla tr {
    margin-bottom: 1rem;
    padding: .9rem;
    border: 1px solid var(--crema);
    border-radius: var(--radio);
  }

  /* La etiqueta va posicionada, no como columna de un grid: si la celda fuera
     grid, cada hijo del td ocuparía su propia casilla y el correo acabaría al
     lado de la institución en vez de debajo. Así los hijos siguen siendo
     bloques normales y solo se les deja hueco a la izquierda. */
  .cmr-tabla td {
    position: relative;
    padding: .4rem 0 .4rem 7.5rem;
    min-height: 1.6rem;
    border: none;
  }
  .cmr-tabla td::before {
    content: attr(data-col);
    position: absolute;
    left: 0;
    top: .45rem;
    width: 7rem;
    font-weight: 800;
    font-size: .62rem;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gris);
  }
  .cmr-tabla td:empty { display: none; }

  .cmr-col-personas { text-align: left; }
  .cmr-col-motivo { max-width: none; }
  .cmr-col-acciones { min-width: 0; }

  /* Los botones de acción se ponen a lo ancho: en un móvil se pulsan con el
     pulgar, no con un cursor. */
  .cmr-col-acciones .cmr-boton-mini,
  .cmr-col-acciones .cmr-nota { width: 100%; padding-block: .6rem; }

  .cmr-bitacora-acciones .cmr-boton-mini { flex: 1 1 100%; padding-block: .6rem; }
  .cmr-foto, .cmr-foto img { width: 4.5rem; }
  .cmr-foto img { height: 4.5rem; }
}

@media (max-width: 560px) {
  .cmr-seccion { padding: 3.5rem 1.2rem; }
  .cmr-noticia { grid-template-columns: 1fr; padding: 1.2rem; }
  .cmr-noticia-img { width: 100%; height: 12rem; margin-left: 0; }
  .cmr-pie-base { flex-direction: column; text-align: center; }
}

@media (max-width: 760px) {
  .cmr-retrato { grid-template-columns: 1fr; gap: 1.5rem; }
  .cmr-artistas-lista { columns: 2; }
}

@media (max-width: 560px) {
  .cmr-artistas-lista { columns: 1; }
}

@media (max-width: 900px) {
  .cmr-esc-cuerpo { grid-template-columns: 1fr; gap: 1.6rem; }
  /* En móvil la barra de categorías se lee mejor en fila que en columna. */
  .cmr-esc-lateral { grid-auto-flow: column; overflow-x: auto; gap: .4rem; }
  .cmr-esc-cat { white-space: nowrap; }
}

@media (max-width: 560px) {
  .cmr-medio { grid-template-columns: 1fr; }
  .cmr-medio-foto img { width: 100%; height: 12rem; }
  .cmr-redes-cifras { margin-left: 0; }
}

@media (max-width: 760px) {
  /* En móvil el tablero se lee en vertical: una columna debajo de otra, que es
     como se recorre con el pulgar. */
  .cmr-tablero { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
}

/* ---------------------------------------------------------------------------
   Claves personales
   ---------------------------------------------------------------------------
   La clave recién generada se enseña una sola vez, así que se pinta como un
   aviso y no como un dato más de la tabla: si pasa desapercibida, hay que
   generar otra. */

.cmr-clave-aviso {
  border: 2px solid var(--verde);
  background: var(--papel);
  border-radius: var(--radio);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.6rem;
}

.cmr-clave-aviso h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--verde);
  margin-bottom: .6rem;
}

/* Monoespaciada y grande: esta clave se dicta por teléfono y se copia a mano
   desde una tableta. */
.cmr-clave-valor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.9rem;
  letter-spacing: .06em;
  color: var(--verde);
  background: var(--blanco);
  border: 1px dashed var(--crema);
  border-radius: var(--radio);
  padding: .7rem 1rem;
  margin: .4rem 0 .8rem;
  cursor: pointer;
  user-select: all;
  overflow-wrap: anywhere;
}

.cmr-clave-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

/* ---------------------------------------------------------------------------
   Barra del editor, por grupos
   ---------------------------------------------------------------------------
   Trece botones iguales repartidos en tres filas obligan a leerlos todos para
   encontrar uno. Agrupados por lo que hacen —formato, insertar, Greb— la vista
   va al grupo antes que al botón, y la barra cabe en una fila.

   Cada grupo es una pastilla con un solo borde exterior y filetes finos por
   dentro: menos líneas en pantalla, y la pertenencia se ve sin leer. */

.cmr-toolbar {
  gap: .5rem;
  padding: .45rem .5rem;
}

.cmr-tb-grupo {
  display: inline-flex;
  align-items: stretch;
  background: var(--blanco);
  border: 1px solid var(--crema);
  border-radius: 4px;
  overflow: hidden;
}

/* Los botones de dentro pierden su borde y su radio: el grupo ya los tiene. */
.cmr-tb-grupo .cmr-tb-btn {
  border: 0;
  border-radius: 0;
  border-left: 1px solid var(--crema);
  min-width: auto;
}

.cmr-tb-grupo .cmr-tb-btn:first-child { border-left: 0; }

/* El formato va sin texto: cuadrado y del ancho del icono. */
.cmr-tb-btn.es-icono {
  padding: .4em .55em;
  gap: 0;
}

.cmr-tb-btn.es-html span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  letter-spacing: .02em;
}

/* Greb aparte: lo que propone una máquina conviene que no se confunda con lo
   que hace el botón que se pulsa. */
.cmr-tb-grupo.es-greb { border-color: var(--naranja); }
.cmr-tb-grupo.es-greb .cmr-tb-btn { border-left-color: var(--naranja); }
.cmr-tb-grupo.es-greb .cmr-tb-btn:hover { background: var(--naranja); color: var(--tinta); }
.cmr-tb-grupo.es-greb .cmr-tb-btn:hover .cmr-icon { color: var(--tinta); }

/* En táctil los blancos crecen y los grupos se reparten en las filas que
   hagan falta, pero cada grupo sigue entero. */
@media (pointer: coarse) {
  .cmr-tb-btn { padding: .55em .75em; }
  .cmr-tb-btn.es-icono { padding: .55em .7em; }
}

/* ---------------------------------------------------------------------------
   Plantillas de lámina
   ---------------------------------------------------------------------------
   Las tres se enseñan siempre y la que toca viene ya elegida por el tipo de
   actividad. Esconderlas detrás de un desplegable ahorraría sitio y costaría
   que nadie supiera que se pueden cambiar. */

.cmr-plantillas { margin-bottom: 1.2rem; }

.cmr-plantillas-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-top: .4rem;
}

.cmr-plantilla {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  text-align: left;
  padding: .7rem .8rem;
  background: var(--blanco);
  border: 1.5px solid var(--crema);
  border-radius: 4px;
  transition: border-color var(--transicion), background var(--transicion);
}

.cmr-plantilla strong { font-size: .95rem; color: var(--verde); }
.cmr-plantilla span   { font-size: .8rem; line-height: 1.35; color: var(--gris); }

.cmr-plantilla:hover { border-color: var(--verde); }

.cmr-plantilla.es-activa {
  border-color: var(--verde);
  background: var(--papel);
  box-shadow: inset 0 0 0 1px var(--verde);
}

/* Formulario y lámina, lado a lado: la previsualización tiene que verse
   mientras se escribe, no después de pulsar algo. */
.cmr-evento-doble {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2rem;
  align-items: start;
}

.cmr-evento-lamina canvas {
  width: 100%;
  height: auto;
  border: 1px solid var(--crema);
  border-radius: 3px;
  margin-top: .4rem;
}

@media (max-width: 900px) {
  .cmr-evento-doble { grid-template-columns: 1fr; }
  .cmr-plantillas-fila { grid-template-columns: 1fr; }
}

/* Una fila por conferencista: nombre, profesión, foto y quitar. En rejilla y
   no en columna porque son tres datos cortos y apilarlos alarga el formulario
   sin ganar nada. */
.cmr-conferencista {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto auto;
  gap: .5rem;
  align-items: center;
  margin-bottom: .5rem;
}

.cmr-foto-btn { cursor: pointer; white-space: nowrap; }

@media (max-width: 700px) {
  .cmr-conferencista { grid-template-columns: 1fr 1fr; }
}

/* El campo de la URL dentro de la burbuja. Sobre el fondo tinta de la burbuja
   el input tiene que ser claro y ancho: una dirección no cabe en un campo de
   botón, y verla entera es lo que evita pegar la equivocada. */
.cmr-bubble-url {
  width: 22rem;
  max-width: 46vw;
  padding: .35rem .6rem;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--crema);
  border-radius: 3px;
  outline: none;
}

.cmr-bubble-url::placeholder { color: var(--gris); }
.cmr-bubble-url:focus { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(8,68,56,.25); }

/* ---------------------------------------------------------------------------
   Bandeja de la agenda — repaso visual
   ---------------------------------------------------------------------------
   Lo que fallaba no era el color: era el peso. Tres cajas crema enormes con el
   número perdido arriba a la izquierda, y cada solicitud midiendo lo que tres
   por llevar sus botones apilados. Se corrige la proporción, no la paleta. */

/* Las cifras: cajas contenidas y con el número junto a su etiqueta. Antes se
   estiraban a todo el ancho y quedaban tres campos crema medio vacíos. */
.cmr-panel-resumen {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 14rem));
  gap: .8rem;
  margin-bottom: 1.6rem;
}

.cmr-metrica {
  gap: .15rem;
  padding: .9rem 1.1rem;
  background: transparent;
  border: 1px solid var(--crema);
  border-left: 3px solid var(--crema);
}

.cmr-metrica-valor { font-size: 2.4rem; font-weight: 400; }

.cmr-metrica-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* La primera cifra es la única que pide algo: se marca en verde cuando hay
   trabajo por hacer, y se apaga cuando la bandeja está limpia. */
.cmr-panel-resumen .cmr-metrica:first-child { border-left-color: var(--verde); }

/* La tabla: filas más juntas y con una franja al pasar por encima, que es lo
   que ayuda a seguir una fila larga hasta su botón. */
.cmr-tabla td { padding: .75rem .8rem; }
.cmr-tabla tbody tr { transition: background var(--transicion); }
.cmr-tabla tbody tr:hover { background: rgba(255, 247, 235, .7); }

.cmr-col-cuando strong { font-weight: 600; white-space: nowrap; }
.cmr-col-cuando span { font-size: .8rem; color: var(--gris); }

/* Confirmar y Cancelar, en línea. Apilados, cada solicitud ocupaba tres
   alturas de botón y la bandeja no cabía en pantalla. */
.cmr-col-acciones { gap: .35rem; min-width: 13rem; }

.cmr-acciones-par { display: flex; gap: .35rem; }
.cmr-acciones-par .cmr-boton-mini { flex: 1; white-space: nowrap; }

/* Confirmar es la acción normal y se ve; cancelar existe y no grita. */
.cmr-boton-mini.es-ok {
  background: var(--verde);
  color: var(--papel);
  border-color: var(--verde);
}
.cmr-boton-mini.es-ok:hover { background: var(--verde-claro); border-color: var(--verde-claro); }

/* La nota interna, en sordina hasta que se escribe en ella: se usa en una de
   cada diez respuestas y con el mismo peso que los botones parecía un campo
   obligatorio. */
.cmr-nota {
  width: 100%;
  border-color: transparent;
  border-bottom-color: var(--crema);
  border-radius: 0;
  background: transparent;
  padding: .3rem .1rem;
  transition: border-color var(--transicion);
}
.cmr-nota::placeholder { color: var(--gris); opacity: .7; }
.cmr-nota:focus {
  outline: none;
  border-bottom-color: var(--verde);
  background: var(--papel);
}

/* La bitácora deja de ser un botón con recuadro dentro de cada fila y pasa a
   ser lo que es: un enlace para abrir lo que hay debajo. */
.cmr-bitacora-abrir {
  padding: .2rem 0;
  border: 0;
  color: var(--gris);
  font-weight: 600;
}
.cmr-bitacora-abrir:hover { background: transparent; color: var(--verde); }
.cmr-bitacora-abrir:hover .cmr-ico { color: var(--verde); }

.cmr-col-motivo { color: var(--tinta); }

/* ---------------------------------------------------------------------------
   Escritorio — repaso del layout
   ---------------------------------------------------------------------------
   Tres cosas cambian de sitio, y las tres por el mismo motivo: el escritorio
   es un mapa, y un mapa se mira entero de una vez.

   · Las cifras suben a la cabecera. Estaban en la columna izquierda, por
     debajo del pliegue, y el dato más accionable de la pantalla había que ir
     a buscarlo.
   · Los grupos pasan de barra lateral a fila de pastillas. La barra se comía
     quince rem para repetir los títulos que ya están sobre cada rejilla.
   · El icono de la tarjeta se pone al lado del texto y no encima. Apilado,
     cada tarjeta medía tres alturas y solo cabían seis en pantalla. */

.cmr-esc-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.cmr-esc-saludo { margin-bottom: 0; }

/* Las cifras, en tira y con filete entre ellas. */
.cmr-esc-cifras {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--crema);
  border-radius: var(--radio);
  overflow: hidden;
}

.cmr-esc-cifra {
  display: grid;
  gap: .1rem;
  align-content: center;
  padding: .7rem 1.2rem;
  border-left: 1px solid var(--crema);
  text-align: center;
}
.cmr-esc-cifra:first-child { border-left: 0; }

.cmr-esc-cifra strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--verde);
}

.cmr-esc-cifra span {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}

/* La primera es la única que pide algo, y además lleva a la bandeja. */
.cmr-esc-cifra.es-principal {
  background: var(--papel);
  transition: background var(--transicion);
}
.cmr-esc-cifra.es-principal:hover { background: var(--crema); }

.cmr-esc-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 2rem;
}

.cmr-esc-filtros .cmr-esc-cuenta {
  margin-left: .45rem;
  font-size: .72rem;
  opacity: .65;
}

/* Sin barra lateral, el cuerpo es una sola columna. */
.cmr-esc-cuerpo { display: block; }
.cmr-esc-grupos { gap: 2.2rem; }

/* Tarjetas en fila: icono, y al lado título y descripción. Caben más por fila
   y la rejilla deja de ser una lista para bajar. */
.cmr-esc-rejilla { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .8rem; }

.cmr-esc-tarjeta {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .9rem;
  padding: 1rem 1.1rem;
  border: 1px solid transparent;
}

.cmr-esc-tarjeta:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--verde);
  background: var(--blanco);
}

.cmr-esc-texto { display: grid; gap: .2rem; }

.cmr-esc-icono {
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 0;
  border-radius: var(--radio);
}
.cmr-esc-icono .cmr-ico { width: 1.1rem; height: 1.1rem; }

.cmr-esc-tarjeta h3 { font-size: .95rem; }
.cmr-esc-tarjeta p { font-size: .8rem; line-height: 1.45; }

@media (max-width: 700px) {
  .cmr-esc-cabecera { align-items: flex-start; }
  .cmr-esc-cifras { width: 100%; }
  .cmr-esc-cifra { flex: 1; padding: .7rem .6rem; }
}