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

/* Mismos keyframes que css/styles.css (Portada > Imagen lateral > Efecto) —
   duplicados acá para poder previsualizar el efecto en la miniatura de este
   panel, que no carga los estilos del sitio público. */
.hero-upload-preview img { perspective: 800px; }
@keyframes heroSideFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroSideSlideIn { from { opacity: 0; transform: translateX(var(--hero-slide-x, 40px)); } to { opacity: 1; transform: translateX(0); } }
@keyframes heroSideZoomIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes heroSideBounceIn {
  0% { opacity: 0; transform: scale(.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(.95); }
  100% { transform: scale(1); }
}
@keyframes heroSidePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes heroSideSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes heroSideWobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes heroSideBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes heroSideFlip { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } }

/* ---- Selector de color personalizado ---- */
.color-swatch-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.color-swatch-btn:hover { border-color: var(--green); }

/* Marca un swatch cuyo color actual no es ninguno de los registrados en
   Colores (fijos + personalizados) — ver updateUnknownColorBadge en
   color-picker.js. Mismo ícono que "color creado a mano" (custom-color-
   badge), a propósito: el usuario lo prefirió así aunque sea un caso
   distinto. Oculto por defecto; solo se muestra con .has-unknown-color. */
.color-swatch-unknown-badge {
  display: none;
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 13px;
  height: 13px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #fff;
  color: var(--black);
  box-shadow: 0 1px 3px rgba(11, 15, 13, .3);
}
.color-swatch-btn.has-unknown-color .color-swatch-unknown-badge { display: flex; }
.color-swatch-unknown-badge svg { width: 10px; height: 10px; }
.admin-field-inline .color-swatch-btn { width: 32px; height: 32px; }

/* Selector avanzado montado dentro de la microtarjeta "botoncolor" (memoria
   Leo7): ocupa el mismo hueco de swatch (48px x alto completo), sin borde ni
   radio propios, para que no se vea como un botón aparte "movido". */
.color-field-row .color-swatch-btn--inline {
  width: 43px;
  height: 100%;
  border-radius: 0;
  border: none;
  flex-shrink: 0;
}
.color-field-row .color-swatch-btn--inline:hover { border-color: transparent; }

/* "Sin color (transparente)": patrón a cuadros tipo Figma/Photoshop, para
   distinguir "sin color" de un blanco sólido real. */
.color-swatch-btn.is-transparent,
.color-palette-swatch--transparent,
.cp-swatch.is-transparent,
.cp-stop span.is-transparent {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

.cp-popover {
  display: none;
  position: absolute;
  /* Por encima de CUALQUIER modal del admin (Configuración de página/Blog,
     selector de ícono, etc. — el más alto hoy es 2000, ver .help-modal-
     overlay/.icon-picker-overlay): el selector de color se abre clickeando
     un swatch que puede estar DENTRO de esos modales, así que si su z-index
     queda por debajo, el modal lo tapa apenas se abre. */
  z-index: 2100;
  width: auto;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.cp-popover.is-open { display: block; }

/* Columna de "colores guardados" a la izquierda + HSV a la derecha, todo en
   un solo popover (antes era un popover aparte, abierto con su propio botón
   — ver openColorPalette, eliminado de admin.js). */
.cp-body { display: flex; gap: 16px; align-items: stretch; }
.cp-main { width: 260px; flex-shrink: 0; position: relative; }
.cp-palette-column {
  width: 170px;
  flex-shrink: 0;
  border-right: 1px solid var(--gray-200);
  padding-right: 16px;
  display: flex;
  flex-direction: column;
}
/* flex:1 (en vez de max-height fijo) + min-height:0 (truco de flexbox para
   que el scroll interno funcione dentro de un flex column) — así la lista
   estira hasta ocupar todo el alto disponible y empuja "Ir a colores" al
   fondo, a la altura de la fila K del lado derecho, en vez de quedar corta
   con un hueco vacío debajo del botón. */
.cp-palette-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-bottom: 8px; scrollbar-width: thin; }
.cp-palette-list::-webkit-scrollbar { width: 8px; }
.cp-palette-list::-webkit-scrollbar-track { background: transparent; }
.cp-palette-list::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }
.cp-palette-list::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }
.cp-palette-goto {
  border: none;
  background: #fff;
  border-radius: 6px;
  padding: 6px 8px;
  font-weight: 500;
  font-size: .78rem;
  color: var(--gray-700);
  cursor: pointer;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.cp-palette-goto:hover { background: var(--gray-100); color: var(--black); box-shadow: 0 1px 6px rgba(0,0,0,.2); }

.cp-tabs {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--gray-300);
}
.cp-tab {
  padding: 0 0 10px;
  font-size: .88rem;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.cp-tab.is-active { color: var(--black); font-weight: 700; border-bottom-color: var(--green); }

.cp-gradient-stops { display: none; gap: 8px; margin-bottom: 12px; }
.cp-stop {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--gray-300);
  font-size: .78rem;
  color: var(--gray-700);
}
.cp-stop span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  display: inline-block;
}
.cp-stop.is-active { border-color: var(--green); background: #f0fbf4; color: var(--green-dark); font-weight: 600; }

.cp-sv {
  display: block;
  width: 100%;
  height: 150px;
  border-radius: 8px;
  cursor: crosshair;
}
.cp-sv-thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  pointer-events: none;
}

.cp-hue-bar {
  position: relative;
  height: 14px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
}
.cp-hue-thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  pointer-events: none;
}

/* 4 barras C/M/Y/K para graduar el tono a mano, debajo de la barra de tono
   — ver rgbToCmyk/cmykToRgb en color-picker.js. */
.cp-cmyk { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
/* Confirma el color dentro del popover — cerrarlo sin tocar esto descarta lo
   hecho y vuelve al valor con el que se abrió (ver closePopover/
   revertToOriginal en color-picker.js). Arranca deshabilitado y solo se
   activa cuando el color en curso difiere del que tenía el campo al abrir
   (ver openOriginalValue/refreshSaveBtnState en color-picker.js). */
.cp-quickrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cp-save-btn {
  display: block;
  border: none;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
}
.cp-save-btn:hover { background: var(--green-dark); }
.cp-save-btn:disabled {
  background: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
}
/* 6 grises fijos (negro a distintas opacidades sobre blanco) para elegir
   directo sin tener que armarlos a mano en el cuadro/CMYK — ver setFromHex
   en color-picker.js, mismo mecanismo que un swatch de la paleta. */
.cp-quick-blacks { display: flex; gap: 4px; flex-shrink: 0; }
.cp-quick-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease;
}
.cp-quick-swatch:hover { transform: scale(1.15); }
.cp-save-btn:disabled:hover { background: var(--gray-300); }
.cp-cmyk-row { display: flex; align-items: center; gap: 8px; }
.cp-cmyk-label {
  width: 14px;
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 700;
  color: var(--gray-500);
  text-align: center;
}
/* Cada canal tiene su propio color de tinta — se usa tanto para el tramo
   "ya recorrido" de la barra como para el triángulo que marca el valor. */
.cp-cmyk-slider[data-channel="c"] { --cmyk-color: #00b7d6; }
.cp-cmyk-slider[data-channel="m"] { --cmyk-color: #e6299b; }
.cp-cmyk-slider[data-channel="y"] { --cmyk-color: #e0c400; }
.cp-cmyk-slider[data-channel="k"] { --cmyk-color: #1a1a1a; }

.cp-cmyk-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--cmyk-color) 0, var(--cmyk-color) var(--cmyk-fill, 0%), var(--gray-300) var(--cmyk-fill, 0%), var(--gray-300) 100%);
  outline: none;
  cursor: pointer;
}
.cp-cmyk-row input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--gray-300); }
.cp-cmyk-row input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--cmyk-color); }

/* Triángulo apuntando hacia abajo, sobre la barra, en vez del círculo nativo. */
.cp-cmyk-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 12px;
  margin-top: -6px;
  background: var(--cmyk-color);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border: none;
  cursor: pointer;
}
.cp-cmyk-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 12px;
  transform: translateY(-6px);
  background: var(--cmyk-color);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.cp-cmyk-value {
  width: 40px;
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--gray-700);
  text-align: right;
  border: 1px solid var(--gray-300);
  border-radius: 5px;
  padding: 2px 4px;
  -moz-appearance: textfield;
}
.cp-cmyk-value:focus { outline: 2px solid var(--green); border-color: transparent; }
.cp-cmyk-value::-webkit-inner-spin-button, .cp-cmyk-value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.cp-bottom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.cp-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  flex-shrink: 0;
  cursor: pointer;
}

/* Modal chico que agranda el swatch redondo (clic ahí) para ver mejor el
   color actual — sincronizado en vivo con el selector mientras está abierto. */
/* Ventanita flotante (no modal, sin fondo que bloquee) — se puede arrastrar
   agarrando de cualquier parte del panel y queda donde el usuario la suelte
   mientras sigue trabajando en el resto del selector. */
.cp-preview-panel {
  display: none;
  position: fixed;
  z-index: 1100;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  cursor: move;
}
.cp-preview-panel.is-open { display: block; }
.cp-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
  border-radius: 6px;
  cursor: pointer;
}
.cp-preview-close:hover { background: var(--gray-100); }
.cp-preview-swatch {
  width: 220px;
  height: 220px;
  border-radius: 12px;
  border: 1px solid var(--gray-300);
}
.cp-preview-swatch.is-transparent {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}
.cp-preview-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  cursor: default;
}
.cp-preview-hex {
  width: 82px;
  flex: none;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  font-family: "Consolas", "Courier New", monospace;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.cp-preview-hex:focus { outline: 2px solid var(--green); border-color: transparent; }
.cp-preview-copy, .cp-preview-paste {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
  flex-shrink: 0;
  cursor: pointer;
}
.cp-preview-copy:hover, .cp-preview-paste:hover { border-color: var(--green); color: var(--green-dark); }
.cp-hex-input {
  width: 82px;
  flex: none;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  font-family: "Consolas", "Courier New", monospace;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.cp-hex-input:focus { outline: 2px solid var(--green); border-color: transparent; }
.cp-eyedropper, .cp-copy, .cp-paste {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
  flex-shrink: 0;
}
.cp-eyedropper:hover, .cp-copy:hover, .cp-paste:hover { border-color: var(--green); color: var(--green-dark); }

.size-item-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.size-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-300);
}
.size-item:last-child { border-bottom: none; }
.size-item-info { flex-shrink: 0; }
.size-item-label { font-weight: 600; font-size: .9rem; color: var(--black); }
.size-item-code { color: #2563eb; font-weight: 500; font-size: .82em; white-space: nowrap; }
.size-item-code[data-code-clickable], .size-item-code[data-tp-target] { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.size-item-code[data-code-clickable]:hover, .size-item-code[data-tp-target]:hover { color: #1d4ed8; }
@keyframes sizeItemFlash {
  0%, 100% { background: transparent; }
  30% { background: rgba(37, 99, 235, .12); }
}
.size-item-flash { animation: sizeItemFlash 1.2s ease; border-radius: 8px; }
.size-item-code-p { color: #9a3412; }
.heading-tag-badge { color: #000; font-weight: 700; font-size: .95em; }
.size-item-desc { margin-top: 4px; font-size: .78rem; color: var(--gray-500); }
.size-item-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.size-item-select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  font-size: .85rem;
  font-family: inherit;
  color: var(--black);
  background: #fff;
  min-width: 130px;
}
.size-item-select:focus { outline: 2px solid var(--green); border-color: transparent; }
.btn-size-palette {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-size-palette:hover { border-color: var(--green); background: var(--gray-100); }
.custom-size-item .size-item-label { display: flex; align-items: center; gap: 6px; }

.hero-list-header { display: flex; justify-content: flex-end; margin-bottom: 16px; }
/* Variante con título (ej. "Modal"): título a la izquierda, botón de acción
   a la derecha — la base de arriba (sin título, ej. Footer "+ Agregar
   columna") sigue toda a la derecha, no se toca. */
.hero-list-header--with-title { justify-content: space-between; align-items: center; }
.btn-add-hero {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
}
.btn-add-hero:hover { background: var(--green-dark); }

/* ---- Bloques de una Página (Hero/Cuadros/Carrusel simple/Insights/Texto libre,
   cantidad libre y en el orden que se quiera) ---- */
.page-block {
  display: none;
  margin-bottom: 18px;
}
.page-block.is-expanded { display: block; }
.page-architecture-block[data-page-block-id],
.page-architecture-block--clave { cursor: pointer; }
.page-block-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.page-block-type-label {
  flex: 1;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.btn-add-page-block {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px dashed var(--gray-300);
  color: var(--green-dark);
  font-weight: 600;
  font-size: .85rem;
}
.btn-add-page-block:hover { border-color: var(--green); background: var(--gray-100); }

.page-architecture-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.page-architecture-diagram-wrap {
  position: relative;
  flex-shrink: 0;
}
.page-architecture-diagram {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 245px;
  flex-shrink: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow: visible;
  transition: width .22s ease;
}
.page-architecture-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 26px;
  right: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  z-index: 2;
}
.page-architecture-collapse-toggle:hover { color: var(--green-dark); border-color: var(--green); }
.page-architecture-collapse-toggle svg { transition: transform .22s ease; }
.page-architecture-diagram-wrap.is-collapsed .page-architecture-collapse-toggle svg { transform: rotate(180deg); }
.page-architecture-diagram-wrap.is-collapsed .page-architecture-diagram { width: 64px; }
.page-architecture-diagram-wrap.is-collapsed .page-block-type-label,
.page-architecture-diagram-wrap.is-collapsed .page-architecture-header-footer-label,
.page-architecture-diagram-wrap.is-collapsed .page-architecture-empty-label,
.page-architecture-diagram-wrap.is-collapsed .page-architecture-block-position,
.page-architecture-diagram-wrap.is-collapsed .page-architecture-block-move,
.page-architecture-diagram-wrap.is-collapsed .btn-delete-architecture-block,
.page-architecture-diagram-wrap.is-collapsed .drag-handle,
.page-architecture-diagram-wrap.is-collapsed .page-architecture-block--header img,
.page-architecture-diagram-wrap.is-collapsed .page-architecture-block--footer img {
  display: none;
}
.page-architecture-block-collapsed-icon { display: none; }
.page-architecture-diagram-wrap.is-collapsed .page-architecture-block-collapsed-icon {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  stroke-width: 1.3;
}
/* Riel colapsado: mismo recuadro que la lista expandida, pero un poco más
   chico y con líneas más finas — el borde de 1px/3px de la lista completa
   se siente pesado cuando el recuadro mide 64px de ancho. */
.page-architecture-diagram-wrap.is-collapsed .page-architecture-block {
  padding: 10px 6px;
  border-width: .5px;
  border-left-width: 2px;
}
.page-architecture-tools {
  flex: 1;
  align-self: stretch;
  margin-top: 34px;
  background: #ffffff;
  border: 1px dashed var(--gray-300);
  border-radius: 10px;
  padding: 18px;
}
.workspace-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--gray-300);
  margin: -18px -18px 18px;
  padding: 0 12px;
}
.workspace-tab-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-500);
  font-size: .92rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.workspace-tab-btn-icon { display: flex; flex-shrink: 0; opacity: .8; transition: opacity .15s ease; }
.workspace-tab-btn:hover { color: var(--gray-700); background: var(--gray-100); }
.workspace-tab-btn:hover .workspace-tab-btn-icon { opacity: 1; }
/* Pestaña activa (solo texto — .workspace-tab-btn--icon, ej. el engranaje de
   Configuraciones, queda afuera a propósito y sigue con su propio estilo):
   texto negro + raya azul oscuro debajo, sin fondo. */
.workspace-tab-btn.is-active:not(.workspace-tab-btn--icon) {
  color: var(--black);
  background: transparent;
  border-bottom-color: #142255;
  box-shadow: none;
  transform: none;
}
.workspace-tab-btn.is-active .workspace-tab-btn-icon { opacity: 1; }
.workspace-tab-btn--icon {
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.workspace-tab-btn--icon.is-active {
  transform: scale(1.15);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.workspace-tab-divider {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0 4px;
  color: var(--gray-300);
}
.page-architecture-tools-placeholder {
  font-size: .85rem;
  color: var(--gray-500);
}
/* Un módulo movido acá adentro (ver showEditCardInTools en admin.js) pierde
   toda la envoltura que tenía sentido en la lista de abajo (arrastre, label,
   basurero propio, título/Activo/colapsar de la tarjeta real) — esas
   funciones ya están cubiertas por los íconos del propio bloque en el
   diagrama. Acá solo interesan las subtarjetas de trabajo (Contenido,
   Botones, Fondo, etc.). */
.page-architecture-tools .page-block {
  border: none;
  padding: 0;
  margin: 0;
}
.page-architecture-tools .page-block-header,
.page-architecture-tools .admin-bigcard-header,
.predeterminado-detail .admin-bigcard-header {
  display: none;
}
.page-architecture-tools .admin-bigcard,
.predeterminado-detail .admin-bigcard {
  border: none;
  padding: 0;
  background: none;
  box-shadow: none;
  margin-bottom: 0;
  overflow: visible;
}
/* La subtarjeta de primer nivel (la que buildWorkspaceTabs convierte en
   pestaña) pierde su propia caja gris acá — el contenido queda directo
   sobre el fondo del espacio de trabajo. Las subtarjetas anidadas más
   adentro (ej. "Estructura de botón" dentro de Botones) no se tocan.
   "Predeterminados" reusa el mismo tratamiento (ver feedback guardado:
   toda función/diseño nuevo de un módulo en Páginas debe reflejarse acá). */
.page-architecture-tools .admin-bigcard-body > .admin-subsection,
.predeterminado-detail .admin-bigcard-body > .admin-subsection {
  background: none;
  border: none;
  padding: 0;
}
.page-architecture-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.page-architecture-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 10px;
  border: 1px solid var(--gray-300);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
}
.page-architecture-tool-btn:hover { border-color: var(--green); background: #ffffff; }
.page-architecture-tool-btn:disabled { opacity: .5; pointer-events: none; }
.page-architecture-tool-btn--hero { color: var(--green-dark); }
.page-architecture-tool-btn--cuadros { color: #1d4ed8; }
.page-architecture-tool-btn--carrusel_simple { color: #b45309; }
.page-architecture-tool-btn--insights { color: #7e22ce; }
.page-architecture-tool-btn--estadisticas { color: #92720a; }
.page-architecture-tool-btn--cta { color: #be185d; }
.page-architecture-tool-btn--separador { color: #0e7490; }

/* ---- Diagrama "Módulos de Home" dentro de una Plantilla: mismas piezas
   visuales que Arquitectura (.page-architecture-block y sus variantes por
   tipo, .page-architecture-tool-btn) pero contenedores propios, en fila
   horizontal (no hay Header/Footer fijos que empujen todo a columna). ---- */
.plantilla-architecture-section { margin-bottom: 18px; }
.plantilla-architecture-diagram {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--gray-300);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 24px rgba(0, 0, 0, .05);
}
.plantilla-architecture-diagram .page-architecture-block {
  width: 200px;
  flex-shrink: 0;
  border-radius: 10px;
  border-bottom: none;
  cursor: pointer;
}
.plantilla-block-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.plantilla-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

/* ---- Predeterminados: mismo estilo de tarjeta-ícono que "Nuevo módulo" en
   Arquitectura, pero más grande y centrado — esta pantalla es su propio
   selector de tipo de módulo, no una lista con el resto de las herramientas. ---- */
.predeterminado-picker {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.predeterminado-picker-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 160px;
  padding: 22px 12px;
  border-radius: 12px;
  border: 1px solid var(--gray-300);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}
.predeterminado-picker-btn:hover { border-color: var(--green); background: #ffffff; }
.predeterminado-picker-btn--home_blocks { color: var(--green-dark); }
.predeterminado-picker-btn--colores { color: #1d4ed8; }
.predeterminado-picker-btn--tipografia { color: #b45309; }
.predeterminado-picker-btn--header { color: #7c3aed; }
.predeterminado-picker-btn--footer { color: #0e7a37; }
.predeterminado-picker-btn--soon {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}
.predeterminado-picker-btn--soon small {
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--gray-500);
}
.predeterminado-back {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  border: none;
  background: transparent;
  color: var(--gray-700);
  font-weight: 600;
  font-size: .9rem;
}
.predeterminado-back:hover { color: var(--green-dark); }
.plantilla-list-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 18px;
}
.plantilla-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plantilla-row-name {
  flex: 0 1 auto;
  font-weight: 700;
  color: var(--gray-700);
}
.plantilla-badge {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--green);
  background: #ffffff;
  color: var(--green-dark);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.plantilla-badge:hover { background: var(--green); color: #fff; }
.plantilla-activate-btn,
.plantilla-export-btn,
.plantilla-delete-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  background: #ffffff;
  color: var(--gray-700);
  font-size: .82rem;
  font-weight: 600;
}
.plantilla-export-btn:hover { border-color: var(--green); color: var(--green-dark); }
.plantilla-delete-btn { color: #dc2626; }
.plantilla-delete-btn:hover { border-color: #dc2626; background: #fef2f2; }
/* Activar ahora borra y reconstruye TODO el sitio (regla pedida por el
   usuario) — mismo tratamiento visual de peligro que Eliminar/Resetear. */
.plantilla-activate-btn { color: #dc2626; border-color: #dc2626; font-weight: 700; }
.plantilla-activate-btn:hover { background: #dc2626; color: #fff; }
.btn-reset-site {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid #dc2626;
  background: #ffffff;
  color: #dc2626;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-reset-site:hover { background: #dc2626; color: #fff; }
.btn-help-icon.btn-tutorial-plantillas {
  width: auto;
  height: auto;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  font-size: .85rem;
  font-weight: 600;
}
.btn-help-icon.btn-tutorial-plantillas:hover { border-color: var(--green); color: var(--green-dark); background: var(--gray-100); }
.page-architecture-block {
  position: relative;
  padding: 15px 14px;
  border-radius: 10px;
  border: 1px solid var(--gray-300);
  border-left: 3px solid var(--arch-accent, var(--gray-300));
  background: #fff;
  text-align: center;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gray-700);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.btn-delete-architecture-block {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  color: #dc2626;
  opacity: 0;
  transition: opacity .15s ease;
}
.page-architecture-block.is-selected .btn-delete-architecture-block,
.btn-delete-architecture-block:focus-visible { opacity: 1; }
.btn-delete-architecture-block:hover { color: #b91c1c; }
.btn-delete-architecture-block svg { width: 19px; height: 19px; }
.page-architecture-block-move {
  position: absolute;
  top: 50%;
  left: 46px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.btn-move-architecture-block {
  width: 22px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--gray-500);
  opacity: 0;
  transition: opacity .15s ease;
}
.btn-move-architecture-block:hover { color: var(--gray-700); }
.page-architecture-block.is-selected .btn-move-architecture-block { opacity: 1; }
.page-architecture-block-position {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: normal;
  line-height: 1;
}
.page-architecture-block.is-selected .page-architecture-block-position { color: #000; }
.page-architecture-block .drag-handle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
/* Antes cada tipo pintaba TODA la fila con un pastel fuerte — ahora el color
   queda solo como acento en el borde izquierdo (--arch-accent, ver
   .page-architecture-block de arriba), texto siempre en gris neutro. */
.page-architecture-block--hero { --arch-accent: #2f9e5c; }
.page-architecture-block--cuadros { --arch-accent: #3b7ddb; }
.page-architecture-block--carrusel_simple { --arch-accent: #e0954a; }
.page-architecture-block--insights { --arch-accent: #8b6fd8; }
.page-architecture-block--accordion { --arch-accent: #3aa0a0; }
.page-architecture-block--texto_libre { --arch-accent: var(--gray-500); }
.page-architecture-block--estadisticas { --arch-accent: #d4b13a; }
.page-architecture-block--cta { --arch-accent: #d8608a; }
.page-architecture-block--separador { --arch-accent: #16a4b0; }
.page-architecture-block--empty {
  background: transparent;
  color: var(--gray-500);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
/* Seleccionado: borde negro fino (el mismo para cualquier tipo), y la
   tarjeta se "ilumina" con un tinte suave de SU propio color de acento
   (--arch-accent) en vez de un solo verde genérico para todas. */
.page-architecture-block.is-selected {
  color: #000;
  border-color: #000;
  box-shadow: none;
  background: color-mix(in srgb, var(--arch-accent, var(--gray-300)) 14%, white);
}
.page-architecture-block--empty.is-selected {
  background: #e9f7ee;
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green);
  color: var(--green-dark);
}
/* Mismo tipo/peso/color que las etiquetas del menú lateral (.sidebar-item) —
   sin mayúsculas fijas, se ve tal cual sale el nombre del módulo. Acotado a
   este contexto (no .page-block-type-label en general, que también se
   usa como badge chico en otro lado). */
.page-architecture-block .page-block-type-label {
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gray-700);
}
.page-architecture-block.is-selected .page-block-type-label { color: #000; }
.page-architecture-block--header,
.page-architecture-block--footer,
.page-architecture-block--clave {
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  padding: 10px 12px;
}
.page-architecture-block--clave {
  background: var(--black);
  border-color: var(--black);
}
.page-codes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-code-row input[name="code"] {
  flex: 1;
  max-width: 220px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  font-family: 'Courier New', monospace;
  font-size: 1rem;
  letter-spacing: .12em;
  color: var(--black);
}
.page-code-row input[name="code"]:focus { outline: 2px solid var(--green); border-color: transparent; }
.page-code-row .btn-delete-page-code {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  color: var(--gray-500);
  flex-shrink: 0;
}
.page-code-row .btn-delete-page-code:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; }
.page-architecture-header-footer-label {
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .03em;
}
.page-architecture-block--header img,
.page-architecture-block--footer img {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  max-width: 100px;
}
.page-architecture-block--add-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  color: var(--green-dark);
}
.page-architecture-block--add-slot:hover { background: var(--gray-100); }
.page-architecture-diagram-wrap.is-collapsed .page-architecture-add-slot-label { display: none; }

.font-option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.font-option-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 14px 44px 14px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.font-option-card:hover { border-color: var(--green); }
.font-option-card.is-active {
  border-color: var(--green);
  background: #f0fbf4;
}
.font-option-name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--black);
}
.font-option-sample {
  display: block;
  font-size: .95rem;
  color: var(--gray-700);
  margin-top: 2px;
}
.font-option-desc {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: .78rem;
  color: var(--gray-500);
  margin-top: 6px;
}
.font-option-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.font-option-card.is-active .font-option-check {
  background: var(--green);
  opacity: 1;
  transform: scale(1);
}

.hero-new-form {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
}
.hero-new-form select {
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  font-size: .92rem;
  font-family: inherit;
}
.hero-new-form-actions { display: flex; gap: 10px; margin-top: 16px; }

.btn-delete-hero,
.btn-delete-service-group,
.btn-delete-page {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--gray-500);
  flex-shrink: 0;
}
.btn-delete-hero:hover,
.btn-delete-service-group:hover,
.btn-delete-page:hover { background: #fcebeb; color: #a32d2d; }

.btn-delete-page--full {
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 8px 18px;
  gap: 8px;
  font-size: .85rem;
  font-weight: 700;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}
.btn-delete-page--full:hover { background: #fcebeb; border-color: #dc2626; color: #a32d2d; }

.cuadro-list { display: flex; flex-direction: column; gap: 14px; }
.cuadro-item.admin-subsection { background: #fff; margin-bottom: 0; }
.cuadro-item-title-preview {
  font-size: .92rem;
  font-weight: 700;
  color: var(--green-dark);
  text-transform: none;
  letter-spacing: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuadro-item-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cuadro-item-group-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 10px;
}
.btn-delete-cuadro {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--gray-500);
  flex-shrink: 0;
}
.btn-delete-cuadro:hover { color: #dc2626; background: #fef2f2; }
.btn-add-cuadro, .btn-add-hero-button, .btn-add-custom-color, .btn-add-custom-size, .btn-add-plantilla-color, .btn-add-plantilla-footer-column, .btn-add-carrusel-simple-item, .btn-add-insight, .btn-add-accordion-item, .btn-add-contact-field, .btn-add-modal, .btn-add-page-code {
  margin-top: 14px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px dashed var(--gray-300);
  background: transparent;
  color: var(--gray-500);
  font-weight: 500;
  font-size: .88rem;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.btn-add-cuadro:hover, .btn-add-hero-button:hover, .btn-add-custom-color:hover, .btn-add-custom-size:hover, .btn-add-plantilla-color:hover, .btn-add-plantilla-footer-column:hover, .btn-add-carrusel-simple-item:hover, .btn-add-insight:hover, .btn-add-accordion-item:hover, .btn-add-contact-field:hover, .btn-add-modal:hover, .btn-add-page-code:hover { border-color: var(--green); color: var(--green-dark); background: transparent; }

/* ---- Menú "Modal": lista de modales reutilizables, cada uno con bloques
   libres (mismo criterio que Páginas) pero sin diagrama de Arquitectura. ---- */
/* Tarjeta desplegada: misma raya azul oscuro que ya usamos en Contacto y en
   las subtarjetas (.admin-subsection) para separar encabezado de contenido. */
.admin-panel[data-panel-content="modal"] .admin-bigcard:not(.is-collapsed) > .admin-bigcard-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #142255;
}
.modal-name-input {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--green);
  min-width: 200px;
}
.btn-delete-modal, .btn-preview-modal {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
}
.btn-preview-modal { background: #eafaf0; color: var(--green-dark); }
.btn-preview-modal:hover { background: #d6f5e3; }
.btn-delete-modal { background: #fef2f2; color: #dc2626; }
.btn-delete-modal:hover { background: #fde2e2; }
.modal-blocks-list { margin-top: 14px; }

/* ---- "Configuración del modal" (gear entre el ojo y el tacho) ---- */
.help-modal.modal-config-dialog {
  max-width: 440px;
  padding: 24px;
}
.modal-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.modal-config-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.modal-config-header-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eafaf0;
  color: var(--green-dark);
}
.modal-config-header-title h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: .01em;
}
.modal-config-group + .modal-config-group { margin-top: 0; }
.modal-config-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.modal-config-label b {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--green-dark);
  background: #eafaf0;
  padding: 2px 8px;
  border-radius: 999px;
}
.modal-config-open-style-group { gap: 8px; }
.modal-config-open-style-group .toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
}
.modal-config-hint {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--gray-500);
  margin-top: 10px;
}
.modal-config-divider {
  height: 1px;
  background: var(--gray-200, var(--gray-300));
  margin: 20px 0;
}
.modal-config-header-icon--auto { background: #f2ecfc; color: #7c3aed; }
.btn-modal-auto-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  color: var(--gray-500);
  flex-shrink: 0;
}
.btn-modal-auto-toggle:hover { background: var(--gray-200); }
.btn-modal-auto-toggle.is-active { background: #f2ecfc; color: #7c3aed; }
.btn-modal-auto-toggle.is-active:hover { background: #e6d9fa; }
.modal-auto-conditional.is-disabled { opacity: .45; pointer-events: none; }
.modal-auto-pages-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 4px;
}
.modal-auto-page-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  font-size: .88rem;
  color: var(--gray-700);
  cursor: pointer;
}
.modal-auto-page-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); flex-shrink: 0; }
.modal-preview-frame-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 88vh;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.modal-preview-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.modal-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.modal-block {
  margin-bottom: 18px;
}
/* Editor único para un módulo (Hero/Cuadros/Carrusel simple/etc.), sea donde
   sea que se edite — Páginas, Modal o Plantillas: el título/Activo/colapsar/
   🗑 propios de cada bloque ya son redundantes con lo que arma cada contexto
   (el diagrama de Arquitectura en Páginas y Plantillas, el Activo/🗑 del
   propio Modal) y quedan ocultos en los tres. Solo queda el editor real
   (engranaje + pestañas + campos), sin ninguna caja propia del bloque. */
.page-block > .page-block-header,
.modal-block > .page-block-header {
  display: none;
}
.page-block > .admin-bigcard,
.modal-block > .admin-bigcard,
.plantilla-block-editor > .admin-bigcard {
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}
.page-block > .admin-bigcard > .admin-bigcard-header,
.modal-block > .admin-bigcard > .admin-bigcard-header,
.plantilla-block-editor > .admin-bigcard > .admin-bigcard-header {
  display: none;
}
/* Con el header interno oculto y el padding en 0 (arriba), el truco de
   margen negativo de ".workspace-tabs" (pensado para "comerse" el padding
   de 18-20px de una tarjeta normal) tira la barra de pestañas 18px hacia
   arriba de más acá — tapando la raya divisoria de la tarjeta contenedora
   (ej. "marca" en Modal). Se anula solo en este caso. */
.modal-block > .admin-bigcard > .admin-bigcard-body > .workspace-tabs {
  margin-top: 0;
}

/* "+ Agregar cuadro" vive en la barra de pestañas (ver data-workspace-tab-action
   en buildWorkspaceTabs, admin.js), pegado a la izquierda de su pestaña
   "Cuadros", visible solo mientras esa pestaña está activa — no dentro del
   contenido de la subtarjeta. Fuera del espacio de trabajo (acordeón normal,
   sin pestañas) sigue el flujo de siempre, debajo del título de la sección. */
.workspace-tabs .btn-add-cuadro {
  margin: 6px 4px 6px 0;
  align-self: center;
}

/* "+ Agregar contenido" vive en la barra de pestañas (mismo patrón que
   "+ Agregar cuadro"): pegado a la derecha de su pestaña "Contenido",
   visible solo mientras esa pestaña está activa. */
.workspace-tabs .btn-add-carrusel-simple-item,
.workspace-tabs .btn-add-accordion-item,
.workspace-tabs .btn-add-page-code {
  margin: 6px 4px 6px 0;
  align-self: center;
}

.contact-submission-unread .admin-subsection-header h3 { font-weight: 700; }

/* Dashboard: previsualización navegable del sitio real, con un marco simple
   tipo celular/tablet alrededor de un iframe al tamaño exacto elegido.
   Padding/margen reducidos SOLO acá (no en .admin-bigcard global) para que
   el celular quede pegado arriba, sin espacio en blanco desperdiciado. */
.admin-panel[data-panel-content="dashboard"] .admin-bigcard { padding-top: 2px; }
.admin-panel[data-panel-content="dashboard"] .admin-bigcard-header { margin-bottom: 0; }
.admin-panel[data-panel-content="dashboard"] .admin-bigcard-header h2 { font-size: .95rem; }

/* "Contacto": estilo Apple para sus 6 tarjetas — título neutro (no verde),
   más chicas y agrupadas (gap chico entre ellas en vez de las separaciones
   grandes de siempre). Scoped acá, no en .admin-bigcard general, mismo
   criterio que el bloque de Dashboard de arriba — no toca el resto del admin. */
.admin-panel[data-panel-content="contacto"] .admin-bigcard {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.admin-panel[data-panel-content="contacto"] .admin-bigcard-header { margin-bottom: 4px; }
.admin-panel[data-panel-content="contacto"] .admin-bigcard-header h2 {
  font-size: .92rem;
  font-weight: 600;
  color: var(--black);
}
/* Tarjeta desplegada: misma raya azul oscuro que ya usamos para separar
   encabezado de contenido en las subtarjetas (.admin-subsection). */
.admin-panel[data-panel-content="contacto"] .admin-bigcard:not(.is-collapsed) > .admin-bigcard-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #142255;
}
.admin-panel[data-panel-content="contacto"] .btn-collapse-all { width: 28px; height: 28px; }
.admin-panel[data-panel-content="contacto"] .btn-collapse-all svg { width: 15px; height: 15px; }
.admin-panel[data-panel-content="contacto"] .btn-visibility-toggle {
  padding: 5px 12px 5px 10px;
  font-size: .74rem;
}
.device-preview { display: flex; align-items: flex-start; gap: 24px; }
.device-preview-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  flex-shrink: 0;
  width: 220px;
  padding-right: 20px;
  border-right: 1px solid var(--gray-200, #e5e7eb);
}
.device-preview-controls .admin-field { width: 100%; }
.device-preview-controls #devicePreviewReload { align-self: flex-start; }
.device-frame-wrap {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: auto;
  padding: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.device-frame-wrap::-webkit-scrollbar { display: none; width: 0; height: 0; }
.device-frame {
  position: relative;
  background: #111;
  border-radius: 34px;
  padding: 14px 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  flex-shrink: 0;
}
.device-frame-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 18px;
  background: #111;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 1;
}
.device-frame iframe {
  display: block;
  background: #fff;
  border: none;
  border-radius: 20px;
}

:root {
  --black: #0b0f0d;
  --green: #16a34a;
  --green-dark: #0e7a37;
  --green-bright: #22c55e;
  --gray-100: #f4f6f5;
  --gray-300: #d1d7d4;
  --gray-500: #8a938e;
  --gray-700: #4b544f;
}

body {
  font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  background: var(--gray-100);
  color: var(--black);
}

.logo-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--green-bright), var(--green-dark));
  display: inline-block;
}

/* ---- Login ---- */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: #121714;
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--gray-300);
  font-size: .85rem;
}
.login-card input {
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: #0b0f0d;
  color: #fff;
  font-size: .95rem;
}
.login-card input:focus { outline: 2px solid var(--green); }
.btn-login {
  margin-top: 6px;
  padding: 12px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.btn-login:hover { background: var(--green-dark); }
.login-error {
  background: rgba(220, 38, 38, .15);
  color: #fca5a5;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .85rem;
}
.back-link {
  text-align: center;
  color: var(--gray-500);
  font-size: .85rem;
  margin-top: 4px;
}
.back-link:hover { color: var(--green-bright); }

/* ---- Admin dashboard ---- */
.admin-header {
  background: var(--black);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.admin-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.admin-header-shortcuts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-header-shortcut {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.btn-header-shortcut svg { flex-shrink: 0; }
.btn-header-shortcut:hover {
  background: #fff;
  color: var(--black);
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(0,0,0,.4);
}
.btn-header-shortcut:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.btn-header-shortcut.is-active { background: #fff; color: var(--black); }
.admin-user { display: flex; align-items: center; gap: 14px; font-size: .88rem; color: var(--gray-300); }
.btn-logout {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: .82rem;
}
.btn-logout:hover { background: #fff; color: var(--black); }
.btn-account-logout {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  font-size: .82rem;
  font-weight: 600;
}
.btn-account-logout:hover { background: #fcebeb; border-color: #dc2626; color: #a32d2d; }

.admin-account-menu { position: relative; }
.admin-account-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--gray-300);
  font-size: .88rem;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.admin-account-trigger:hover { color: #fff; background: rgba(255,255,255,.08); }
.admin-account-trigger svg { transition: transform .15s ease; }
.admin-account-menu.is-open .admin-account-trigger svg { transform: rotate(180deg); }
.admin-account-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  z-index: 1000;
  color: var(--black);
  text-align: left;
}
.admin-account-menu.is-open .admin-account-dropdown { display: block; }
.admin-account-dropdown-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

.admin-body {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  /* 10px + el padding lateral de 14px del sidebar (desktop) = 24px, igual
     al padding-left de .admin-header — así el texto/ítems del sidebar
     quedan alineados con el logo "Starttec Admin". */
  margin: 0 auto 0 10px;
}

.admin-sidebar {
  display: flex;
  overflow-x: auto;
  gap: 6px;
  padding: 14px 20px 0;
  border-bottom: 1px solid var(--gray-300);
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 10px 10px 0 0;
  border: 1px solid var(--gray-700);
  font-weight: 600;
  font-size: .92rem;
  color: var(--gray-700);
  white-space: nowrap;
}
.sidebar-item-icon { flex-shrink: 0; }
.sidebar-item-label { transition: opacity .15s ease; }
.sidebar-item:hover { color: var(--green-dark); }
.sidebar-item.is-active {
  background: #fff;
  color: var(--green-dark);
  border: 1px solid var(--gray-300);
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

/* Botón de colapsar: solo tiene sentido en el sidebar vertical (desktop). */
.sidebar-collapse-toggle { display: none; }

.admin-main { width: 100%; padding: 0 20px 100px; }

@media (min-width: 820px) {
  .admin-body { flex-direction: row; align-items: flex-start; }

  /* ---- Estilo "Apple" (macOS Preferencias del Sistema): lista compacta
     sobre un fondo gris suave, sin borde por ítem — el activo es el único
     que se marca, con un bloque plano de color (sin sombra dramática). ---- */
  .admin-sidebar {
    position: sticky;
    top: 61px;
    align-self: flex-start;
    flex-direction: column;
    flex-shrink: 0;
    width: 190px;
    gap: 5px;
    padding: 10px;
    overflow: visible;
    border-bottom: none;
    border-right: none;
    background: var(--gray-100);
    border-radius: 14px;
    transition: width .22s ease;
  }
  .sidebar-item {
    border: none;
    border-radius: 7px;
    text-align: left;
    padding: 8px 10px;
    font-size: .92rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: background .1s ease, color .1s ease, justify-content .15s ease;
  }
  .sidebar-item-icon { width: 17px; height: 17px; color: var(--gray-500); transition: color .1s ease; }
  .sidebar-item:hover { background: rgba(11, 15, 13, .05); color: var(--black); }
  .sidebar-item.is-active {
    background: var(--green);
    color: #fff;
    border: none;
    margin-bottom: 0;
  }
  .sidebar-item.is-active .sidebar-item-icon { color: #fff; }
  .sidebar-item.is-active:hover { color: #fff; background: var(--green); }

  .sidebar-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 26px;
    right: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    z-index: 2;
  }
  .sidebar-collapse-toggle:hover { color: var(--green-dark); border-color: var(--green); }
  .sidebar-collapse-toggle svg { transition: transform .22s ease; }

  .admin-sidebar.is-collapsed { width: 72px; }
  .admin-sidebar.is-collapsed .sidebar-item { justify-content: center; padding: 12px 0; border-radius: 4px; }
  .admin-sidebar.is-collapsed .sidebar-item-label { display: none; }
  .admin-sidebar.is-collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); }

  .admin-main { padding: 0 32px 100px; }
}

.admin-bigcard {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
}
.admin-panel[data-panel-content="paginas"] .admin-bigcard { margin-bottom: 8px; }
.admin-bigcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  cursor: pointer;
}
.admin-bigcard-header h2 {
  font-size: 1.2rem;
  color: var(--green-dark);
}
.bigcard-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.btn-edit-title {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  border: none;
  background: transparent;
  border-radius: 6px;
  flex-shrink: 0;
}
.btn-edit-title:hover { color: var(--green-dark); background: var(--gray-100); }
.btn-edit-title.is-saved { color: var(--green); background: #eafaf0; transition: none; }
.admin-bigcard-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.admin-bigcard-header-actions .admin-field-inline {
  font-size: .8rem;
  color: var(--gray-700);
  flex-shrink: 0;
}
.header-select {
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  font-size: .85rem;
  font-family: inherit;
  color: var(--black);
  background: #fff;
}

.header-divider { width: 1px; height: 26px; background: var(--gray-300); flex-shrink: 0; }

.header-meta-cluster {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--gray-100);
  border-radius: 12px;
  padding: 4px 6px;
  flex-shrink: 0;
}
.header-meta-item { display: flex; flex-direction: column; padding: 2px 10px; min-width: 0; }
.header-meta-label {
  font-size: .64rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 1px;
}
.header-meta-cluster .header-select { height: auto; padding: 0; border: none; background: none; font-size: .82rem; font-weight: 700; }
.header-meta-cluster .order-field { height: auto; padding: 0; border: none; background: none; border-radius: 0; }
.header-meta-cluster .btn-help-icon { border: none; background: none; margin-left: 2px; }

.admin-bigcard-header .btn-visibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 12px;
  letter-spacing: .2px;
}
.admin-bigcard-header .btn-visibility-toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  flex-shrink: 0;
}

.hero-btn-config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.hero-btn-config.admin-subsection { background: #fff; margin-bottom: 0; }

.admin-divider {
  border: none;
  border-top: 1px solid var(--gray-300);
  margin: 22px 0;
}

.admin-subsection, .footer-link-row {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.admin-subsection:last-child, .footer-link-row:last-child { margin-bottom: 0; }
/* Una subtarjeta que pasó a ser pestaña (buildWorkspaceTabs, admin.js) ya
   queda enmarcada por la tarjeta blanca + la barra de pestañas — la caja
   gris propia de .admin-subsection ahí queda doblemente encajada, así que
   se aplana (sin fondo/borde/padding lateral, solo el espaciado vertical). */
.admin-bigcard-body > .workspace-tabs ~ .admin-subsection {
  background: none;
  border: none;
  border-radius: 0;
  padding: 18px 0 0;
}

.page-architecture-section {
  background: none;
  border: none;
  padding: 0;
  margin: 0 -20px 0;
}

.admin-bigcard--featured {
  padding-top: 0;
  overflow: hidden;
}
.admin-bigcard--featured .admin-bigcard-header {
  background: linear-gradient(135deg, #0b1d3a, #17325c);
  margin: 0 -20px 18px;
  padding: 18px 20px;
}
.admin-bigcard--featured .admin-bigcard-header h2 {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
}

.admin-subsection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
/* Tarjeta desplegada: raya azul oscuro separando el encabezado del
   contenido — mismo acento que ya usamos en las pestañas activas del
   workspace. Colapsada, no hay contenido debajo que separar. */
.admin-subsection:not(.is-collapsed) > .admin-subsection-header {
  padding-bottom: 12px;
  border-bottom: 1px solid #142255;
}
/* La subtarjeta de nivel superior que se aplana en pestaña (buildWorkspaceTabs)
   oculta su propio <h3> — no le corresponde raya, ya la separa la barra de
   pestañas. */
.admin-bigcard-body > .workspace-tabs ~ .admin-subsection > .admin-subsection-header {
  padding-bottom: 0;
  border-bottom: none;
}
.admin-subsection-header h3 {
  font-size: .92rem;
  font-weight: 500;
  color: var(--gray-700);
  text-transform: none;
  letter-spacing: normal;
}
.page-architecture-header-links {
  position: absolute;
  top: 2px;
  height: 24px;
  left: 296px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
/* Con el diagrama colapsado (64px en vez de 302px) el panel de herramientas
   se corre a la izquierda para ocupar el espacio libre — esta fila, de
   posición absoluta, tiene que seguirlo para no quedar desalineada. */
.page-architecture-section:has(.page-architecture-diagram-wrap.is-collapsed) .page-architecture-header-links {
  left: 88px;
}
.page-architecture-selected-label {
  margin-right: auto;
  padding-left: 23px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--gray-700);
}
.page-architecture-selected-label:empty { display: none; }
.btn-view-page-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: underline;
  color: var(--green-dark);
  border: none;
  background: transparent;
}
.btn-view-page-link:hover { color: var(--green); }
.admin-subsection-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.admin-subsection-header-actions .save-status { font-size: .78rem; color: var(--gray-500); white-space: nowrap; }
.field-switch-row-inline-label { font-size: .78rem; font-weight: 600; color: var(--gray-700); white-space: nowrap; }
.icon-select-group .field-switch-row-inline-label { display: flex; align-items: center; gap: 4px; }
.icon-select-code {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.icon-select-code:empty { display: none; }
.icon-select-group .btn-icon-select-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: #dc2626;
  cursor: pointer;
}
.icon-select-group .btn-icon-select-clear:hover { color: #a32d2d; }

.btn-collapse-sub {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  flex-shrink: 0;
  background: #fff;
}
.btn-collapse-sub:hover { border-color: var(--green); color: var(--green-dark); }
.btn-collapse-sub svg { transition: transform .2s ease; }

.admin-subsection.is-collapsed > *:not(.admin-subsection-header) { display: none; }
.admin-subsection.is-collapsed .btn-collapse-sub svg { transform: rotate(-90deg); }
.admin-subsection.page-config-section { padding: 12px 18px; }
.page-config-section .admin-subsection-header h3 {
  font-size: .92rem;
  font-weight: 500;
  color: rgba(0, 0, 0, .9);
  text-transform: none;
  letter-spacing: normal;
}
.admin-bigcard-header h2.page-name-display { color: rgba(0, 0, 0, .9); }
.admin-bigcard:has(.page-name-display) .admin-bigcard-header {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--gray-300);
}
.admin-bigcard.is-collapsed:has(.page-name-display) .admin-bigcard-header {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.admin-subsection.page-config-section.is-collapsed .admin-subsection-header { margin-bottom: 0; }

.order-arrows { display: flex; gap: 4px; flex-shrink: 0; }
.btn-order-move {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  background: #fff;
}
.btn-order-move:hover { border-color: var(--green); color: var(--green-dark); }
.btn-order-move:disabled { opacity: .35; pointer-events: none; }
.url-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--gray-100);
}
.url-field-text {
  flex: 1;
  min-width: 160px;
  word-break: break-all;
  font-size: .85rem;
  color: var(--gray-700);
}
.btn-url-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--gray-700);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-url-copy:hover { border-color: var(--green); color: var(--green-dark); }
.btn-url-copy.is-copied { border-color: var(--green); color: var(--green-dark); }
.btn-url-open {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--gray-700);
  flex-shrink: 0;
}
.btn-url-open:hover { border-color: var(--green); color: var(--green-dark); }

/* ---- Footer: tarjeta chica por columna, cada link es una subtarjeta
   colapsable con el patrón completo "Botón de enlace" (ícono + color +
   Destino de 6 opciones) — mismo patrón visual que un ítem de Carrusel
   simple, pero SIN classList .admin-subsection a propósito: todo se guarda
   junto con el resto de la columna en un solo POST (footer-column-save.php,
   ver saveFooterColumn en admin.js), y .admin-subsection anidado haría que
   el detector de campos "sucios" de esa tarjeta grande ignore estos campos
   (ver getFields() en wireCardSaveBar) — por eso .footer-link-row reusa la
   MISMA caja gris que .admin-subsection por selector combinado, no por
   herencia de clase, y el colapsar/expandir de cada fila lo cablea
   wireFooterLinkRowFull (no el wireCollapseSub genérico). ---- */
.footer-column-card {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.footer-column-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.footer-column-title-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  padding: 4px 0;
}
.footer-column-title-input:focus { outline: none; border-bottom: 1px solid var(--green); }
.btn-delete-footer-column {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  flex-shrink: 0;
  background: #fff;
}
.btn-delete-footer-column:hover { border-color: #dc2626; color: #dc2626; }

.footer-links-hint { margin: 2px 0 8px; }
.footer-links-list { display: flex; flex-direction: column; }
.footer-link-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
.footer-link-row.is-collapsed > *:not(.footer-link-row-header) { display: none; }
.footer-link-row:not(.is-collapsed) .footer-link-row-header { margin-bottom: 14px; }
.footer-link-row-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn-collapse-footer-link svg { transition: transform .2s ease; }
.footer-link-row.is-collapsed .btn-collapse-footer-link svg { transform: rotate(-90deg); }
.btn-remove-footer-link {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  flex-shrink: 0;
  background: #fff;
}
.btn-remove-footer-link:hover { border-color: #dc2626; color: #dc2626; }

.btn-add-footer-link {
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--gray-700);
  font-size: .82rem;
  font-weight: 600;
}
.btn-add-footer-link:hover { border-color: var(--green); color: var(--green-dark); }

/* ---- Blog: categorías, listado de entradas ---- */
/* Título visible de la pestaña "Configuración del blog" — a diferencia del
   resto de tabs de solo-ícono (Cuadros/Carrusel), acá SÍ hace falta un
   título dentro del contenido porque no hay otro texto que identifique la
   pestaña (el <h3> real del subsection-header queda oculto por
   buildWorkspaceTabs). Mismo estilo que un h3 de subsection normal. */
.blog-visibility-group-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--gray-500);
  border-top: 1px solid var(--gray-300);
  padding-top: 14px;
}
.blog-visibility-group-title:first-of-type { border-top: none; padding-top: 0; }
.blog-config-tab-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 14px;
}
/* A diferencia del resto de las tarjetas con pestañas de trabajo (donde el
   título real queda oculto — ver ".page-architecture-tools .admin-bigcard-
   header"), acá el título "Blog" se ve siempre arriba de las pestañas, así
   que el truco de margen negativo de ".workspace-tabs" (pensado para pegar
   las pestañas al borde SIN título visible) queda mal acá — se separa un
   poco de "Blog" en vez de quedar pegado, y se recalcula el margen lateral
   con el padding real de la tarjeta (20px, no 18px). */
.admin-bigcard[data-blog-page-id] > .admin-bigcard-body > .workspace-tabs {
  margin: 16px -20px 0;
}
/* La regla genérica ".workspace-tabs ~ .admin-subsection" (arriba) deja
   18px de padding-top pensados para las demás pestañas de solo-ícono
   (Cuadros/Carrusel, sin título visible debajo) — acá sí hay un título
   visible pegado (.blog-config-tab-title), así que se achica SOLO en esa
   pestaña puntual (:has el título) — Categorías/Comentarios/Entradas
   conservan el padding normal, si no el "+ Agregar categoría" queda pegado
   contra la barra. */
.admin-bigcard[data-blog-page-id] > .admin-bigcard-body > .workspace-tabs ~ .admin-subsection:has(.blog-config-tab-title) {
  padding-top: 0;
}
/* Subtarjeta "Página" (todavía sin campos propios más que Nombre/Entradas
   por página): colapsada, los 18px de padding arriba/abajo + el margen del
   header quedaban en pura altura vacía sin contenido visible. */
.blog-page-display-subsection.is-collapsed {
  padding-top: 10px;
  padding-bottom: 10px;
}
.blog-page-display-subsection.is-collapsed .admin-subsection-header {
  margin-bottom: 0;
}
.blog-categories-list { display: flex; flex-direction: column; }
.blog-category-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  border-bottom: 1px solid var(--gray-300);
}
.blog-category-list-row:last-child { border-bottom: none; }
.blog-category-name-display { font-size: .92rem; font-weight: 600; color: var(--gray-700); }
.blog-category-list-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-edit-blog-category,
.btn-delete-blog-category {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--gray-500);
  flex-shrink: 0;
}
.btn-edit-blog-category:hover { background: var(--gray-100); color: var(--green-dark); }
.btn-delete-blog-category:hover { background: #fcebeb; color: #a32d2d; }
.btn-add-blog-category {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--gray-700);
  font-size: .82rem;
  font-weight: 600;
}
.btn-add-blog-category:hover { border-color: var(--green); color: var(--green-dark); }

.blog-posts-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 12px;
}
.blog-posts-list-header h2 { font-size: 1.05rem; }
.blog-panel-top-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  margin-bottom: 12px;
}
.btn-add-blog-post,
.btn-add-blog-page {
  padding: 9px 16px;
  border-radius: 999px;
  border: none;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
}
.btn-add-blog-post:hover,
.btn-add-blog-page:hover { background: var(--green-dark); }

.blog-post-status-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  vertical-align: middle;
}
.blog-post-status-badge--draft { background: var(--gray-100); color: var(--gray-700); }
.blog-post-status-badge--scheduled { background: #fef3c7; color: #92400e; }
.blog-post-status-badge--published { background: #dcfce7; color: #166534; }

.drag-handle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--gray-500);
  flex-shrink: 0;
  cursor: grab;
}
.drag-handle:hover { color: var(--gray-700); background: var(--gray-100); }
.is-dragging { opacity: .4; }

.btn-visibility-toggle {
  border: none;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.btn-visibility-toggle.is-visible { background: var(--green); }
.btn-visibility-toggle.is-visible:hover { background: var(--green-dark); }
.btn-visibility-toggle.is-hidden { background: var(--gray-300); color: var(--gray-700); }
.btn-visibility-toggle.is-hidden:hover { background: var(--gray-500); color: #fff; }
.btn-visibility-toggle.is-hidden:hover { background: #ea580c; }

.admin-field-hint { font-size: .8rem; color: var(--gray-500); margin-top: 2px; }

.btn-help-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  color: var(--gray-500);
  font-size: .74rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-help-icon:hover { border-color: var(--green); color: var(--green-dark); background: var(--gray-100); }

.help-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11,15,13,.55);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.help-modal-overlay.is-open { display: flex; }
.page-config-modal-overlay .help-modal { max-width: 468px; }
.page-config-modal-overlay .page-config-section { border: none; background: none; padding: 0; margin-bottom: 0; }
.btn-page-config-gear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--gray-500);
}
.btn-page-config-gear:hover { color: var(--gray-700); background: var(--gray-100); }
.btn-modal-config-gear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #eaf1fb;
  color: #2563eb;
  flex-shrink: 0;
}
.btn-modal-config-gear:hover { background: #dbe7f9; }
.page-visibility-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.page-visibility-dot::before {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--gray-300);
}
.page-visibility-dot.is-visible::before { background: var(--green); }
.page-visibility-dot.is-hidden::before { background: var(--gray-300); }
.help-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 380px;
  width: 100%;
  padding: 20px;
}
.help-modal-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.help-modal-header h3 { font-size: 1.05rem; color: var(--green-dark); }
.icon-library-switch {
  display: flex;
  gap: 2px;
  background: var(--gray-100);
  border-radius: 8px;
  padding: 2px;
}
.icon-library-switch-btn {
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--gray-500);
  font-size: .76rem;
  font-weight: 600;
}
.icon-library-switch-btn:hover { color: var(--gray-700); }
.icon-library-switch-btn.is-active { background: #fff; color: var(--green-dark); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.help-modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700);
  font-size: 1.3rem;
  margin-left: auto;
  line-height: 1;
  border-radius: 6px;
  flex-shrink: 0;
}
.help-modal-close:hover { background: var(--gray-100); }
.help-modal p { font-size: .88rem; line-height: 1.55; color: var(--gray-700); }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.icon-picker-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11,15,13,.55);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.icon-picker-overlay.is-open { display: flex; }
.icon-picker-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.icon-picker-source-select {
  display: none;
  width: 100%;
  margin-bottom: 14px;
}
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
  overflow-y: auto;
}
.icon-picker-upload-slot:empty { display: none; }
.icon-picker-option {
  width: 56px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  color: var(--gray-700);
}
.icon-picker-option:hover { border-color: var(--green); color: var(--green-dark); background: var(--gray-100); }
.icon-picker-option-icon { display: flex; align-items: center; justify-content: center; }
.icon-picker-option-code {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}
.icon-picker-option:hover .icon-picker-option-code { color: var(--green-dark); }

.icon-picker-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  font-size: .88rem;
  color: var(--gray-700);
}
.icon-picker-trigger:hover { border-color: var(--green); color: var(--green-dark); }
.icon-picker-trigger--compact {
  padding: 0;
  width: 40px;
  height: 40px;
  justify-content: center;
  flex-shrink: 0;
}
.icon-picker-preview {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-dark);
  flex-shrink: 0;
}
.icon-picker-preview svg { width: 100%; height: 100%; }

/* ---- Ventana "Ajustar imagen" (recorte/zoom/rotar/filtro) — mismo overlay
   que .icon-picker-overlay (ver admin/index.php#cropperOverlay), este bloque
   es solo el contenido propio del modal. ---- */
.cropper-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.cropper-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.cropper-subtitle { font-size: .82rem; color: var(--gray-500); }
.cropper-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cropper-filters-label { font-size: .82rem; color: var(--gray-600); flex-shrink: 0; }
.cropper-filter-swatches { display: flex; align-items: center; gap: 6px; }
.cropper-filter-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  flex-shrink: 0;
  background-size: 6px 6px;
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}
.cropper-filter-swatch:hover { border-color: var(--gray-300); }
.cropper-filter-swatch.is-active { border-color: #1a73e8; }
.cropper-filter-name { font-size: .8rem; color: var(--gray-500); }
.cropper-aspects { display: flex; flex-wrap: wrap; gap: 8px 8px; row-gap: 6px; }
.cropper-aspects .toggle-btn { padding: 6px 12px; font-size: .8rem; }
.cropper-canvas-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #111;
  background-image:
    linear-gradient(45deg, #666 25%, transparent 25%), linear-gradient(-45deg, #666 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #666 75%), linear-gradient(-45deg, transparent 75%, #666 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cropper-canvas-wrap canvas { cursor: grab; touch-action: none; }
.cropper-canvas-wrap canvas.is-dragging { cursor: grabbing; }
.cropper-controls { display: flex; align-items: center; gap: 10px; }
.cropper-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--gray-500);
  flex-shrink: 0;
}
.cropper-icon-btn:hover { color: var(--gray-800); background: var(--gray-100); }
.cropper-zoom-icon { color: var(--gray-400); flex-shrink: 0; }
#cropperZoomSlider { flex: 1; accent-color: var(--green); }
.cropper-footer { display: flex; gap: 10px; }
.cropper-footer .btn-cancel, .cropper-footer .btn-save { flex: 1; }

/* ---- Fila "Filtro" reutilizable de una tarjeta "Formato de imagen (y
   video)" — ver render_media_filter_config() en admin-render.php y
   wireMediaFilterConfig() en admin.js. ---- */
.media-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.media-filter-label { font-size: .82rem; color: var(--gray-600); flex-shrink: 0; }
.media-filter-swatches { display: flex; align-items: center; gap: 6px; }
.media-filter-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  flex-shrink: 0;
}
.media-filter-swatch--original {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 6px 6px;
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}
.media-filter-swatch--grayscale { background-color: #9CA3AF; filter: grayscale(100%); }
.media-filter-swatch:hover { border-color: var(--gray-300); }
.media-filter-swatch.is-active { border-color: #1a73e8; }
.media-filter-swatches[data-custom-active="true"] .color-swatch-btn { box-shadow: 0 0 0 2px #1a73e8; }
.media-filter-name { font-size: .8rem; color: var(--gray-500); }
.media-filter-intensity-field { display: none; }
.media-filter-config.has-filter .media-filter-intensity-field { display: block; }

.order-field {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  background: #fff;
  color: var(--gray-500);
  flex-shrink: 0;
}
.order-field:focus-within { border-color: var(--green); }
.order-field-steppers { display: flex; flex-direction: column; gap: 1px; }
.order-step {
  width: 16px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  border-radius: 3px;
}
.order-step:hover { color: var(--green-dark); background: var(--gray-100); }
.order-field input[type="number"] {
  width: 20px;
  border: none;
  outline: none;
  padding: 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--black);
  text-align: center;
  -moz-appearance: textfield;
}
.order-field input[type="number"]::-webkit-outer-spin-button,
.order-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-collapse-all {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  color: var(--gray-700);
  flex-shrink: 0;
}
.btn-collapse-all:hover { background: var(--gray-200); color: var(--green-dark); }
.btn-collapse-all svg { transition: transform .2s ease; }

.admin-bigcard.is-collapsed .admin-bigcard-body { display: none; }
.admin-bigcard.is-collapsed .btn-collapse-all svg { transform: rotate(-90deg); }

.admin-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.admin-field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--gray-700); }
/* Nombre editable de un color (fijo del sitio o creado a mano) — se ve como
   el texto plano de siempre, con un borde punteado sutil solo al pasar el
   mouse/enfocar, para no parecer un campo de formulario suelto. */
input.admin-field-label-input {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 1px 0 !important;
  font-size: .85rem !important;
  color: inherit !important;
  width: 100%;
  border-bottom: 1px solid transparent !important;
}
input.admin-field-label-input:hover, input.admin-field-label-input:focus { outline: none; border-bottom-color: var(--gray-400) !important; }
.admin-field-label-row { display: flex; align-items: center; gap: 4px; }
.admin-field-label-row .admin-field-label-input { width: auto; flex: 1; min-width: 0; }
.admin-field-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-field-inline:has(textarea) { align-items: flex-start; }
.admin-field-inline input[type="text"] { flex: 1; }
.admin-field-inline input[type="color"] { width: 42px; height: 32px; padding: 3px; flex-shrink: 0; }
.admin-field-inline .btn-visibility-toggle { flex-shrink: 0; }
.admin-field input[type="text"],
.admin-field input[type="color"],
.admin-field textarea {
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  font-size: .92rem;
  font-family: inherit;
  color: var(--black);
}
.admin-field input[type="color"] { height: 42px; padding: 4px; cursor: pointer; }

/* ---- Campo de teléfono con código país separado (WhatsApp de Contacto) —
   "+" fijo, solo el código y el número son inputs de verdad. Mismas clases
   se reutilizan en el formulario público (ver css/styles.css) para el tipo
   de campo "Teléfono". ---- */
.phone-field-split {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.phone-field-code {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  background: var(--gray-100);
}
.phone-field-plus { color: var(--gray-500); }
/* Selector reforzado a propósito: .admin-field input[type="text"] (más
   específico que una sola clase) pisa el width acá si no. */
.phone-field-code input.phone-field-code-input {
  width: 2.4em;
  border: none;
  background: transparent;
  font: inherit;
  font-size: .92rem;
  color: var(--black);
  padding: 0;
}
.phone-field-code-input:focus { outline: none; }
.phone-field-split input.phone-field-number-input {
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  font-size: .92rem;
  font-family: inherit;
  color: var(--black);
}
.admin-field textarea { resize: vertical; }
.admin-field input:focus, .admin-field textarea:focus { outline: 2px solid var(--green); border-color: transparent; }

/* ---- Contador de caracteres (ver render_char_counter en admin-render.php):
   badge chico pegado abajo a la derecha del campo. Un clic abre el popover
   de configuración de límite (reusa .color-palette-popover, ver admin.js). ---- */
.char-counter-field-wrap { position: relative; }
.char-counter-field-wrap textarea,
.char-counter-field-wrap input[type="text"] { width: 100%; padding-right: 46px; }
.char-counter {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border: none;
  border-radius: 20px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.6;
}
.char-counter:hover { background: var(--gray-200, #e5e7eb); }
.char-counter.is-over { background: #fee2e2; color: #dc2626; }

/* ---- Popover de configuración del contador — minimalista, estilo Apple:
   sin labels de texto (el placeholder y los dos botones ya se explican
   solos), input tipo "underline", modo aviso/bloqueo como segmented
   control, un solo botón de acción a todo el ancho. ---- */
.char-limit-popover {
  width: 200px;
  padding: 16px;
  border-radius: 16px;
}
.char-limit-popover .color-palette-header { margin-bottom: 14px; }
.char-limit-popover .color-palette-header span {
  font-size: .92rem;
  font-weight: 600;
  color: var(--black);
}
.char-limit-max-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1.5px solid var(--gray-300);
  transition: border-color .15s ease;
}
.char-limit-max-row:focus-within { border-bottom-color: var(--green); }
.char-limit-max-input {
  display: block;
  width: 100%;
  flex: 1;
  border: none;
  border-radius: 0;
  padding: 4px 2px 8px;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  color: var(--black);
  background: transparent;
}
.char-limit-max-input::placeholder { color: var(--gray-400, #9ca3af); font-weight: 500; }
.char-limit-max-input:focus { outline: none; }
.char-limit-max-input::-webkit-outer-spin-button,
.char-limit-max-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.char-limit-max-input { -moz-appearance: textfield; }
.char-limit-max-clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-bottom: 6px;
  border: none;
  border-radius: 50%;
  background: var(--gray-200, #e5e7eb);
  color: var(--gray-500);
  cursor: pointer;
}
.char-limit-max-clear:hover { background: var(--gray-300); color: var(--black); }
.char-limit-mode-group {
  margin: 16px 0 0;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--gray-100);
  border-radius: 10px;
}
.char-limit-mode-group .toggle-btn {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 7px 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-500);
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.char-limit-mode-group .toggle-btn:hover { border-color: transparent; }
.char-limit-mode-group .toggle-btn.is-active {
  background: #ffffff;
  color: var(--black);
  box-shadow: 0 1px 4px rgba(11, 15, 13, .16);
}
.char-limit-popover .btn-char-limit-save {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 10px 0;
  font-size: .85rem;
}

/* ---- Editor enriquecido de "Texto libre" (ver [data-rte-editor] en admin.js) ---- */
.rte-size-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 4px 0 2px;
  font-size: .82rem;
  color: var(--gray-500);
}
.rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 6px;
  border: 1px solid var(--gray-300);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--gray-100);
}
.rte-btn {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: #fff;
  font-size: .82rem;
  color: var(--gray-700);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.rte-btn:hover { border-color: var(--green); color: var(--black); }
.rte-sep { width: 1px; align-self: stretch; background: var(--gray-300); margin: 0 2px; }
.rte-color-swatch {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  cursor: pointer;
}
.rte-color-swatch input[type="color"] { width: 26px; height: 26px; border: none; padding: 0; cursor: pointer; }
.rich-text-editor {
  min-height: 160px;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 0 0 8px 8px;
  font-size: .92rem;
  color: var(--black);
  line-height: 1.5;
}
.rich-text-editor:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.rich-text-editor h3, .rich-text-editor h4 { margin: .4em 0; }
.rich-text-editor ul, .rich-text-editor ol { padding-left: 1.4em; }
.rich-text-editor a { color: var(--green-dark); text-decoration: underline; }
.rich-text-editor p { margin: 0 0 .6em; }
.rich-text-editor p:last-child { margin-bottom: 0; }

.custom-color-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-500);
  margin-left: 4px;
  vertical-align: -3px;
}
.btn-delete-custom-color-inline, .btn-delete-plantilla-color-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border: none;
  background: none;
  border-radius: 4px;
  color: var(--gray-500);
  vertical-align: -3px;
  flex-shrink: 0;
}
.btn-delete-custom-color-inline:hover, .btn-delete-plantilla-color-inline:hover { color: #a32d2d; }

.admin-fields.color-fields-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .admin-fields.color-fields-grid { grid-template-columns: repeat(4, 1fr); }
}
.admin-card-savebar .btn-add-custom-color, .admin-card-savebar .btn-add-custom-size, .admin-card-savebar .btn-add-plantilla-color { margin-top: 0; }

/* ---- "botoncolor" (memoria Leo7): microtarjeta unificada de color — un
   solo borde exterior, 3 zonas (swatch | código | paleta) separadas por
   líneas finas adentro. Medidas fijas: 40px alto x 165px ancho total. ---- */
.color-field-row {
  display: flex;
  align-items: stretch;
  height: 40px;
  width: 125px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  overflow: hidden;
}
.color-field-row input[type="color"] {
  width: 43px;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
}
.color-field-code-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--gray-300);
  position: relative;
  min-width: 0;
}
.color-hex-input {
  border: none !important;
  background: transparent !important;
  padding: 0;
  font-size: .85rem !important;
  font-weight: 400;
  font-family: "Consolas", "Courier New", monospace;
  color: var(--gray-700) !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  width: 100%;
  min-width: 0;
  text-align: center;
}
.color-hex-input:focus { outline: none; }

/* ---- Variante "circle" de la microtarjeta de color (ver data-color-style
   en el <input>, PHP): solo el swatch, en círculo, sin código hex — para
   cuando el color va pegado a un campo de texto (Texto superior, Título,
   Subtítulo) y el hex sería ruido de más ahí. El resto de los selectores de
   color del admin no se toca (memoria Leo7 "botoncolor"). ---- */
.color-field-row--circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* El swatch ya se clipea solo a un círculo con su propio border-radius —
     no hace falta que la fila TAMBIÉN recorte, y el overflow:hidden
     heredado de .color-field-row le cortaba la mitad al badge de "color no
     predeterminado" (se sale un poco de la esquina a propósito). */
  overflow: visible;
}
.color-field-row--circle .color-field-code-wrap { display: none; }
.color-field-row--circle .color-swatch-btn--inline {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.btn-color-palette {
  width: 48px;
  height: 100%;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, .15);
  background: transparent;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.color-palette-popover {
  position: absolute;
  z-index: 60;
  display: none;
  min-width: 190px;
  background: #ffffff;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(11, 15, 13, .14);
}
.color-palette-popover.is-open { display: block; }
.color-palette-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.btn-color-palette-goto-top {
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--green-dark);
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-color-palette-goto-top:hover { background: var(--gray-200, #e5e7eb); }
.btn-color-palette-close {
  display: flex;
  margin-left: auto;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--gray-500);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-color-palette-close:hover { background: var(--gray-100); color: var(--gray-700); }
.color-palette-list { max-height: 220px; overflow-y: auto; }
.btn-color-palette-goto {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 8px;
  border: none;
  border-top: 1px solid var(--gray-300);
  background: transparent;
  color: var(--green-dark);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  text-align: center;
}
.btn-color-palette-goto:hover { background: var(--gray-100); }
.color-palette-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
  color: var(--gray-700);
}
.color-palette-option:hover { background: var(--gray-100); }
/* Check + resaltado del color activo — ver updatePaletteActiveState en
   color-picker.js. El ícono siempre ocupa su lugar (solo se le cambia la
   visibilidad) para que ninguna fila se corra al marcarse/desmarcarse. */
.color-palette-check {
  flex-shrink: 0;
  color: var(--green-dark);
  visibility: hidden;
}
.color-palette-option.is-active {
  background: #eafaf0;
  color: var(--green-dark);
  font-weight: 600;
}
.color-palette-option.is-active .color-palette-check { visibility: visible; }
.color-palette-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--gray-300);
  flex-shrink: 0;
}
.color-palette-empty { font-size: .8rem; color: var(--gray-500); padding: 7px 8px; }
.color-palette-divider { height: 1px; background: var(--gray-300); margin: 6px 4px; }

.save-status { font-size: .85rem; color: #dc2626; }
.btn-save {
  border: none;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.btn-save:hover { background: var(--green-dark); }
.btn-save:disabled { opacity: .45; cursor: default; }

.btn-cancel {
  border: 1px solid var(--gray-300);
  padding: 12px 26px;
  border-radius: 999px;
  background: none;
  color: var(--gray-700);
  font-weight: 700;
  cursor: pointer;
}
.btn-cancel:hover { border-color: #dc2626; color: #dc2626; }
.btn-cancel--sm { padding: 8px 18px; font-size: .85rem; }

.admin-card-savebar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-300);
}
.btn-save--sm { padding: 8px 18px; font-size: .85rem; }

.save-progress-bar {
  width: 60px;
  height: 4px;
  border-radius: 999px;
  background: var(--gray-300);
  overflow: hidden;
  display: none;
}
.save-progress-bar.is-active { display: block; }
.save-progress-fill {
  height: 100%;
  width: 30%;
  border-radius: 999px;
  background: var(--green);
  animation: save-progress-slide 1s ease-in-out infinite;
}
.save-progress-bar.is-done .save-progress-fill {
  width: 100%;
  animation: none;
  transition: width .2s ease;
}
@keyframes save-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

@media (min-width: 640px) {
  .admin-fields { grid-template-columns: 1fr 1fr; }
  .page-config-section .admin-fields { grid-template-columns: 1fr; }
}

/* Lista de subtarjetas (Configuración general de Cuadros): una sola columna,
   cada una con su propia caja (sin marco exterior que las envuelva todas) y
   poco espacio entre una y otra. */
.cuadro-subcards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
/* Estas subtarjetas también son .admin-subsection (por el colapsar), y esa
   clase trae su propio margin-bottom:20px — sin anularlo acá, domina sobre
   el gap de la grilla y el espaciado no se nota por más que se achique. */
.cuadro-subcards-grid .cuadro-subcard { margin-bottom: 0; }
.cuadro-subcard {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 14px;
}

.field-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.switch-toggle { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.switch-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--gray-300);
  border-radius: 999px;
  transition: background .2s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.switch-toggle-slider::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}
.switch-toggle input:checked + .switch-toggle-slider { background: var(--green); }
.switch-toggle input:checked + .switch-toggle-slider::before { transform: translateX(18px); }

/* ---- "Más información" del cuadro: look tipo Apple (selects/inputs
   redondeados, labels chicas en mayúscula, foco suave en verde) ---- */
.cuadro-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-300);
}
.cuadro-detail-panel .admin-field > span {
  display: block;
  margin-bottom: 7px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray-500);
}
.cuadro-detail-panel .admin-field > span .size-item-code {
  font-size: .82rem;
  text-transform: none;
  letter-spacing: normal;
}
.cuadro-detail-panel select,
.cuadro-detail-panel input[type="text"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 11px 14px;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  background: #fff;
  font-size: .88rem;
  font-family: inherit;
  color: var(--black);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cuadro-detail-panel select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a938e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  padding-right: 36px;
  cursor: pointer;
}
.cuadro-detail-panel select:hover,
.cuadro-detail-panel input[type="text"]:hover { border-color: var(--gray-500); }
.cuadro-detail-panel select:focus,
.cuadro-detail-panel input[type="text"]:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}
.cuadro-detail-panel .admin-field-hint { font-size: .78rem; margin-top: 6px; }

/* ---- Hero: selector de fondo, paneles y subida de archivos ---- */
.toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.toggle-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--gray-300);
  background: #fff;
  font-size: .85rem;
  color: var(--gray-700);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.toggle-btn:hover { border-color: var(--green); }
.toggle-btn.is-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 600;
}

/* "Solo texto": mismo look que las pastillas Automático/Relleno/Solo borde,
   pero es un checkbox de verdad (no participa del radio exclusivo del
   grupo — ver [data-toggle-boolean] en wireToggleGroups, admin.js). El
   estado activo se refleja solo, vía :has(), sin JS propio. */
.toggle-btn-checkbox {
  display: inline-flex;
  align-items: center;
}
.toggle-btn-checkbox input[type="checkbox"] { display: none; }
.toggle-btn-checkbox:has(input:checked) {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 600;
}

/* ---- Pantalla "Archivos": menú superior (⚙ Configuraciones / Imágenes /
   Videos) — mismo look que .workspace-tabs pero panel de nivel superior, no
   una subtarjeta movida al espacio de trabajo, así que no hereda esos
   márgenes negativos específicos. ---- */
.files-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--gray-300);
  margin-bottom: 18px;
}
.files-tab-btn {
  padding: 12px 10px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--gray-500);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
}
.files-tab-btn:hover { color: var(--gray-700); }
.files-tab-btn.is-active { color: var(--green-dark); border-bottom-color: var(--green); }
.files-tab-btn--icon { display: flex; align-items: center; }

.upload-format-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.btn-bold-toggle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  background: #fff;
  font-weight: 700;
  color: var(--gray-700);
  cursor: pointer;
}
.btn-bold-toggle:hover { border-color: var(--green); }
.btn-bold-toggle.is-active { background: var(--green); border-color: var(--green); color: #fff; }

.hero-bg-panel, .hero-video-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--gray-300);
  border-radius: 10px;
}

.hero-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-upload-preview {
  width: 110px;
  height: 70px;
  border-radius: 8px;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  overflow: hidden;
  flex-shrink: 0;
}
.hero-upload-preview img, .hero-upload-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-upload-preview.shape-square {
  width: 70px;
  height: 70px;
  border-radius: 8px;
}
.hero-upload-preview.shape-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.hero-upload-preview.shape-triangle-up,
.hero-upload-preview.shape-triangle-down {
  /* Equilátero: alto = ancho × √3/2, mismo criterio que .cta-media-shape en
     css/styles.css. */
  width: 70px;
  height: 61px;
  border-radius: 0;
}
.hero-upload-preview.shape-triangle-up { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.hero-upload-preview.shape-triangle-down { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }
.hero-upload-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-upload {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--green);
  color: var(--green-dark);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-upload:hover { background: var(--green); color: #fff; }
.btn-upload.is-loading { opacity: .6; pointer-events: none; }
.admin-subsection-conditional.is-disabled { opacity: .45; pointer-events: none; }
.btn-upload-remove {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  font-size: .85rem;
  cursor: pointer;
}
.btn-upload-remove:hover { border-color: #dc2626; color: #dc2626; }
.btn-choose-file {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  font-size: .85rem;
  cursor: pointer;
  background: transparent;
}
.btn-choose-file:hover { border-color: var(--green); color: var(--green-dark); }

.file-picker-grid { overflow-y: auto; }
.file-picker-group + .file-picker-group { margin-top: 18px; }
.file-picker-group-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 8px;
}
.file-picker-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
}
.file-picker-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: var(--gray-100);
}
.file-picker-item:hover { border-color: var(--green); }
.file-picker-item img, .file-picker-item video { width: 100%; height: 100%; object-fit: cover; }
.file-picker-empty { color: var(--gray-700); font-size: .85rem; padding: 12px 0; }

.files-library-group + .files-library-group { margin-top: 24px; }
.files-library-group-title { font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
.files-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.files-library-card {
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.files-library-thumb { width: 100%; aspect-ratio: 4/3; background: var(--gray-100); }
.files-library-thumb img, .files-library-thumb video { width: 100%; height: 100%; object-fit: cover; }
.files-library-info { padding: 8px 10px; }
.files-library-usage { font-size: .75rem; color: var(--gray-700); margin: 4px 0 8px; }
.files-library-usage.is-unused { color: var(--gray-400, #9aa39c); }
.btn-delete-file {
  width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  font-size: .78rem;
  cursor: pointer;
  background: transparent;
}
.btn-delete-file:hover { border-color: #dc2626; color: #dc2626; }

.admin-field input[type="range"] {
  width: 100%;
  margin-top: 8px;
  accent-color: var(--green);
}

/* ---- "Configuración general" de Botones (Hero): look tipo Apple —
   filas separadas por líneas finas, labels chicas, sliders con thumb
   circular en vez del estilo por defecto del navegador. ---- */
.hero-btn-general-config .admin-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}
/* Las 4 tarjetas de color, una sola fila. */
.hero-btn-general-config .color-override-panel {
  grid-template-columns: repeat(4, 1fr);
}
/* Estructura de botón + Posición del botón + Posición del ícono, una sola fila. */
.hero-btn-general-config .btn-structure-position-row {
  grid-template-columns: repeat(3, 1fr);
}
.hero-btn-general-config .admin-field > span:first-child {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-700);
}
.hero-btn-general-config .admin-field > span b { color: var(--green-dark); font-weight: 700; }

.hero-btn-general-config .settings-row {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-300);
}
.hero-btn-general-config .settings-row--first {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Una sola columna: Estilo, color, posición de botón/ícono, y debajo los
   sliders (ancho/alto/redondez/borde/transparencia/ícono), todo apilado en
   el mismo orden en cualquier tamaño de pantalla. */
.hero-btn-config-columns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* "Solo texto" apaga fondo/borde: mientras está activo, todo lo que
   controla la CAJA del botón (estructura, ancho, alto, redondez) no tiene
   efecto — queda en gris para que se note que no aplica. La fila de
   Estructura de botón es la excepción: ahí mismo vive el checkbox "Solo
   texto" que prendió este estado, así que solo se apagan Relleno/Solo
   borde — el checkbox tiene que seguir clickeable para poder desactivarlo. */
.btn-shape-field.slider-field.is-inert {
  opacity: .4;
  pointer-events: none;
  transition: opacity .15s ease;
}
.btn-shape-field.is-inert:not(.slider-field) .toggle-group > .toggle-btn:not(.toggle-btn-checkbox) {
  opacity: .4;
  pointer-events: none;
  transition: opacity .15s ease;
}
.hero-btn-general-config .settings-row-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-700);
}
.hero-btn-general-config .settings-row-label small { font-weight: 400; color: var(--gray-500); }
.hero-btn-general-config .admin-field-hint { margin-top: 6px; }

.hero-btn-general-config input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin-top: 12px;
  background: var(--gray-300);
  border-radius: 999px;
  outline: none;
}
.hero-btn-general-config input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--gray-300);
}
.hero-btn-general-config input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  cursor: pointer;
}
.hero-btn-general-config input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--gray-300);
}
.hero-btn-general-config input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  cursor: pointer;
}

/* Marcas al 25/50/75% del recorrido de cada slider. La pista gris de fondo
   la pinta este bloque (no el input, que queda transparente para no
   duplicarla) — así las marcas quedan siempre visibles encima. */
.hero-btn-general-config .slider-track-wrap { position: relative; padding: 8px 0; }
.hero-btn-general-config .slider-field input[type="range"] { display: block; margin-top: 0; background: transparent; }
.hero-btn-general-config .slider-field input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.hero-btn-general-config .slider-field input[type="range"]::-moz-range-track { background: transparent; }
.hero-btn-general-config .slider-ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: var(--gray-300);
  pointer-events: none;
}
.hero-btn-general-config .slider-ticks span {
  position: absolute;
  top: 0;
  width: 2px;
  height: 4px;
  background: rgba(11, 15, 13, .3);
  transform: translateX(-50%);
}