/* --------------------------------------------------------------------------
   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; }