/* Interfaz exclusiva del editor y cuadrícula de previsualización. */
.visual-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 10px;background:#fff;color:#18304c;border-bottom:1px solid #d6e0ed;flex-shrink:0;}
.visual-toolbar[hidden]{display:none!important;}.visual-toolbar label{display:flex;align-items:center;gap:5px;font:12px 'Inter',sans-serif;cursor:pointer;}
.visual-toolbar select,.visual-position select,.visual-position input,.visual-layer-panel>select{font:12px 'Inter',sans-serif;border:1px solid #c8dbf2;border-radius:7px;padding:4px 7px;min-height:30px;max-width:100%;color:#18304c;background:#f8fafd;}
.visual-toolbar>.admin-btn-pill{min-height:30px;padding:5px 9px;font-size:12px;line-height:1.2;}
.visual-status{order:10;width:100%;font:11px/1.35 'Inter',sans-serif;margin:0;color:#52657c;}
.visual-more-tools{display:none;}
.visual-toolbar-secondary-tools{display:flex;align-items:center;gap:6px;}
/* Modal de Animación del Editor Visual */
#adminPortal .visual-context.is-anim-modal {
  width: min(480px, calc(100vw - 32px)) !important;
  max-height: min(700px, calc(100vh - 36px)) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
  gap: 10px !important;
  box-shadow: 0 20px 50px rgba(18, 38, 70, 0.32) !important;
  border: 1px solid #9dbce4 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
}
.visual-anim-modal-title {
  font: 700 15px Inter, sans-serif !important;
  color: #172d50 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.visual-anim-modal-desc {
  font: 12px/1.35 Inter, sans-serif;
  color: #64748b;
  margin: -4px 0 2px;
}
.visual-anim-controls-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: #f1f6fd;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #d4e2f5;
  flex-shrink: 0;
}
.visual-anim-control-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 600 11px Inter, sans-serif;
  color: #213c80;
}
.visual-anim-control-field select {
  font: 12px Inter, sans-serif !important;
  padding: 6px 8px !important;
  border: 1px solid #c2d6f0 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #172d50 !important;
  min-height: 32px !important;
}
.visual-anim-modal-note {
  font: 11px/1.3 Inter, sans-serif;
  color: #64748b;
  margin: 0;
  flex-shrink: 0;
}
.visual-effect-cards-container {
  flex: 1 1 auto;
  max-height: 48vh;
  overflow-y: auto;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-right: 6px;
  margin: 2px 0;
}
.visual-effect-card {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  min-height: 110px !important;
  box-sizing: border-box !important;
  border: 1px solid #d0dff2 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 10px 12px !important;
  gap: 8px !important;
  overflow: visible !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.visual-effect-card:hover {
  border-color: #213c80 !important;
  box-shadow: 0 4px 14px rgba(33, 60, 128, 0.12) !important;
}
.visual-effect-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.visual-effect-card-title {
  font: 700 13px Inter, sans-serif;
  color: #172d50;
}
.visual-effect-badge {
  font: 700 10px Inter, sans-serif;
  padding: 2px 7px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-anime {
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
.badge-kute {
  background: #fce7f3;
  color: #9d174d;
  border: 1px solid #fbcfe8;
}
.badge-gsap {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.badge-waapi {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.visual-effect-preview-stage {
  background: #f8fafd;
  border: 1px dashed #cadcf2;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  overflow: hidden;
  position: relative;
}
.visual-effect-sample {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #213c80 !important;
  color: #ffffff !important;
  font: 600 12.5px Inter, sans-serif !important;
  padding: 6px 16px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(33, 60, 128, 0.25) !important;
  text-align: center !important;
  will-change: transform, opacity;
  transform-origin: center center;
}
.visual-effect-sample .preview-dot {
  color: #facc15;
}
.visual-effect-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.visual-effect-test-btn {
  flex: 1;
  background: #f0f4fa !important;
  color: #213c80 !important;
  border: 1px solid #cbdbee !important;
  font-weight: 600 !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  text-align: center !important;
  cursor: pointer;
  border-radius: 8px !important;
}
.visual-effect-test-btn:hover {
  background: #e2ecf9 !important;
  color: #172d50 !important;
}
.visual-effect-apply-btn {
  flex: 1;
  background: #213c80 !important;
  color: #ffffff !important;
  border: 1px solid #1a3068 !important;
  font-weight: 600 !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  text-align: center !important;
  cursor: pointer;
  border-radius: 8px !important;
}
.visual-effect-apply-btn:hover {
  background: #172d50 !important;
}
.visual-anim-modal-footer {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
  margin-top: 2px;
  flex-shrink: 0;
}
.visual-anim-modal-footer button {
  flex: 1;
  font-size: 12px !important;
  padding: 7px 10px !important;
}
.visual-context select{font:13px Inter,sans-serif;padding:10px;border:1px solid #d6e0ed;border-radius:8px;background:#f8fafd;color:#18304c;max-width:100%;}
.studio-edit-mode .studio-block{touch-action:none;}.studio-edit-mode .studio-block :is(h1,h2,h3,h4,p,li,img,a,span,hr){cursor:move;user-select:none;}
.visual-max-shortcut{display:none;}
.visual-layer{display:flex;gap:6px;}.visual-layer>button:first-child{flex:1;text-align:left;overflow-wrap:anywhere;}.visual-layers{display:grid;gap:6px;max-height:320px;overflow:auto;}
.visual-position{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}.visual-position>strong,.visual-position>p{grid-column:1/-1;}.visual-position label{display:grid;gap:3px;font-size:11px;}.visual-position input{width:100%;box-sizing:border-box;}
#adminPortal .visual-context{position:fixed;z-index:10020;width:min(440px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;box-sizing:border-box;padding:12px;border:1px solid #b4c7e2;border-radius:12px;background:#fff;color:#18304c;box-shadow:0 12px 36px #182f4e30;display:grid;gap:6px;}
#adminPortal .visual-context>strong{font:700 14px Inter,sans-serif;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;margin-bottom:2px;}
.visual-context>button{text-align:left;font-size:12px;padding:7px 10px;}
.visual-context-section{border-top:1px solid #edf2f7;padding-top:6px;margin-top:4px;display:grid;gap:4px;}
.visual-context-section-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:#64748b;padding:2px 4px;display:flex;align-items:center;gap:6px;}
.visual-context-btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.visual-context-btn-chip{text-align:left;font-size:11.5px;padding:6px 8px;border-radius:6px;border:1px solid #e2e8f0;background:#f8fafc;color:#1e293b;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all 0.15s ease;}
.visual-context-btn-chip:hover{background:#edf2f7;border-color:#cbd5e1;transform:translateY(-1px);}
.visual-catalog{display:grid;grid-template-columns:1fr 1fr;gap:5px;border-top:1px solid #d6e0ed;padding-top:10px;margin-top:8px;}
.workspace-v6.visual-maximized .admin-studio-grid{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;overflow:hidden;display:grid;}
.workspace-v6:not(.visual-maximized).visual-panels-hidden .admin-sidebar-controls,.workspace-v6:not(.visual-maximized).visual-panels-hidden .studio-inspector{display:none!important;}
.workspace-v6:not(.visual-maximized).visual-panels-hidden .admin-studio-grid.workspace-preview{grid-template-columns:200px minmax(0,1fr)!important;}
.workspace-v6:not(.visual-maximized).visual-panels-hidden .admin-preview-stage{grid-column:2;}
.workspace-v6.visual-maximized .admin-tabs,.workspace-v6.visual-maximized .admin-sidebar-controls,.workspace-v6.visual-maximized .studio-inspector{display:none!important;}
.workspace-v6.visual-maximized .admin-preview-stage{display:flex!important;grid-column:1!important;grid-row:1!important;min-height:0!important;overflow:hidden;}
.visual-maximized .admin-nav-shortcuts,.visual-maximized .admin-account,.visual-maximized .workspace-savebar>span{display:none!important;}
.workspace-v6.visual-maximized .admin-header{min-height:60px;padding:8px 16px;}.workspace-v6.visual-maximized .admin-footer{padding:8px;gap:8px;}
.visual-maximized .studio-action-status{font:12px/1.4 Inter,sans-serif;max-width:170px;}
.workspace-v6.visual-maximized.visual-panels .admin-studio-grid{grid-template-columns:340px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto!important;}
.workspace-v6.visual-maximized.visual-panels .admin-sidebar-controls{display:flex!important;grid-column:1;grid-row:1;}.workspace-v6.visual-maximized.visual-panels .admin-preview-stage{grid-column:2!important;}
.workspace-v6.visual-maximized.visual-panels .studio-inspector{display:block!important;grid-column:1/-1!important;grid-row:2;max-height:240px;}
.visual-grid{background-image:linear-gradient(#3574bf22 1px,transparent 1px),linear-gradient(90deg,#3574bf22 1px,transparent 1px);background-size:var(--visual-step,16px) var(--visual-step,16px);min-height:400px!important;outline:1px dashed #3574bf55;}
.visual-grid::before{content:'';position:absolute;inset:0;z-index:101;pointer-events:none;background-image:linear-gradient(#3574bf15 1px,transparent 1px),linear-gradient(90deg,#3574bf15 1px,transparent 1px);background-size:var(--visual-step,16px) var(--visual-step,16px);}
.visual-guides::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:102;background:linear-gradient(90deg,transparent calc(var(--visual-guide-x) - 1px),#3771c8 var(--visual-guide-x),transparent calc(var(--visual-guide-x) + 1px)),linear-gradient(transparent calc(var(--visual-guide-y) - 1px),#3771c8 var(--visual-guide-y),transparent calc(var(--visual-guide-y) + 1px));}
.studio-edit-mode .visual-picked{outline:2px solid #3574bf!important;outline-offset:3px;}.studio-edit-mode .studio-block[draggable=false]{touch-action:none;}
[data-editor-kind=shape]>div{min-height:inherit!important;}[data-editor-kind=image]>figure{margin:0;}[data-editor-kind=image]>figure>img{width:100%;object-fit:contain;}
.studio-ribbon{position:relative;isolation:isolate;display:inline-flex;align-items:center;box-sizing:border-box;width:fit-content;min-height:44px;max-width:100%;padding:12px 38px;color:#26344c;font-size:16px;line-height:20px;}
.studio-ribbon::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(222,235,243,0) 0%,rgba(222,235,243,.65) 30%,rgba(202,184,231,.9) 100%);background-size:200% 100%;background-position:0% 50%;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);animation:studio-ribbon-gradient 8s ease-in-out infinite alternate;}
.studio-ribbon::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.12) 48%,transparent 60%);clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);transform:translateX(-130%);animation:studio-ribbon-shine 10s ease-in-out infinite;}
.studio-ribbon.is-ribbon-pending{opacity:0;transform:translateX(-18px);}
.studio-ribbon.is-ribbon-visible{animation:studio-ribbon-enter 800ms cubic-bezier(.22,1,.36,1) both;}
.studio-ribbon>p{position:relative;z-index:0;margin:0;}
.studio-ribbon.is-ribbon-visible>p{animation:studio-ribbon-text-enter 600ms cubic-bezier(.22,1,.36,1) 120ms both;}
@keyframes studio-ribbon-gradient{from{background-position:0% 50%;}to{background-position:100% 50%;}}
@keyframes studio-ribbon-shine{0%,15%{transform:translateX(-130%);}65%,100%{transform:translateX(130%);}}
@keyframes studio-ribbon-enter{from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:translateX(0);}}
@keyframes studio-ribbon-text-enter{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.studio-ribbon::before,.studio-ribbon::after,.studio-ribbon.is-ribbon-visible,.studio-ribbon.is-ribbon-visible>p{animation:none!important;}.studio-ribbon.is-ribbon-pending,.studio-ribbon.is-ribbon-visible{opacity:1;transform:none;}.studio-ribbon>p{opacity:1;transform:none;}}

/* =========================================================
   SPOTLIGHT VISIBLE Y LLAMATIVO EN LA VISTA PREVIA
   ========================================================= */
.studio-edit-mode .visual-spotlight-active {
  outline: 3px solid #ff6b00 !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 5px rgba(255, 107, 0, 0.4), 0 0 26px 9px rgba(255, 107, 0, 0.65), inset 0 0 16px rgba(255, 107, 0, 0.2) !important;
  animation: visual-spotlight-pulse 1.3s ease-in-out infinite alternate !important;
  position: relative !important;
  z-index: 9999 !important;
  transition: outline 0.2s ease, box-shadow 0.2s ease !important;
}

@keyframes visual-spotlight-pulse {
  0% {
    outline-color: #ff6b00;
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.4), 0 0 18px 6px rgba(255, 107, 0, 0.55);
  }
  100% {
    outline-color: #ff9d00;
    box-shadow: 0 0 0 8px rgba(255, 157, 0, 0.55), 0 0 36px 14px rgba(255, 107, 0, 0.8);
  }
}

/* Insignia / Pin flotante ultra-llamativo sobre el elemento seleccionado */
.visual-spotlight-beacon {
  position: absolute !important;
  top: -44px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 13px !important;
  background: #0d1e38 !important;
  color: #ffffff !important;
  border: 2px solid #ff9d00 !important;
  border-radius: 999px !important;
  font: 700 12px/1 'Inter', -apple-system, sans-serif !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 157, 0, 0.7) !important;
  pointer-events: none !important;
  z-index: 10001 !important;
  white-space: nowrap !important;
  animation: visual-beacon-bounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

.visual-spotlight-beacon.is-bottom {
  top: calc(100% + 12px) !important;
}

.visual-spotlight-beacon::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
  border-top: 8px solid #ff9d00 !important;
}

.visual-spotlight-beacon.is-bottom::after {
  bottom: auto !important;
  top: -8px !important;
  border-top: none !important;
  border-bottom: 8px solid #ff9d00 !important;
}

.visual-spotlight-beacon .beacon-tag {
  background: #ff6b00 !important;
  color: #ffffff !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.visual-spotlight-beacon .beacon-label {
  color: #f0f6ff !important;
  font-weight: 600 !important;
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@keyframes visual-beacon-bounce {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* =========================================================
   APARTADO DE OBJETOS Y ELEMENTOS DE LA PÁGINA (DISEÑO)
   ========================================================= */
.visual-elements-card {
  margin-top: 10px !important;
  margin-bottom: 12px !important;
  border: 1px solid #b8cde8 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 13px !important;
  box-shadow: 0 4px 16px rgba(24, 48, 76, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.visual-elements-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.visual-elements-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.visual-elements-icon {
  font-size: 18px !important;
}

.visual-elements-title {
  font: 700 14px/1.3 'Inter', sans-serif !important;
  color: #18304c !important;
  margin: 0 !important;
}

.visual-elements-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  background: #eaf2fc !important;
  color: #213c80 !important;
  font: 600 11px 'Inter', sans-serif !important;
  border-radius: 999px !important;
  border: 1px solid #c8dbf2 !important;
}

.visual-elements-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.visual-elements-header-actions .admin-btn-pill {
  padding: 4px 8px !important;
  font-size: 11px !important;
  min-height: 28px !important;
}

.visual-elements-toolbar {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.visual-elements-search-input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 7px 11px !important;
  font: 13px 'Inter', sans-serif !important;
  border: 1px solid #c8dbf2 !important;
  border-radius: 8px !important;
  background: #f8fafd !important;
  color: #18304c !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.visual-elements-search-input:focus {
  border-color: #213c80 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(33, 60, 128, 0.15) !important;
}

.visual-elements-filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.visual-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 9px !important;
  font: 500 11px/1.2 'Inter', sans-serif !important;
  color: #4b6382 !important;
  background: #f0f4f9 !important;
  border: 1px solid #d4e0ee !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.visual-chip:hover {
  background: #e3ecf7 !important;
  color: #18304c !important;
}

.visual-chip.is-active {
  background: #213c80 !important;
  color: #ffffff !important;
  border-color: #213c80 !important;
  font-weight: 600 !important;
}

.visual-chip .chip-count {
  font-size: 10px !important;
  opacity: 0.85 !important;
}

.visual-elements-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

.visual-element-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 8px 10px !important;
  background: #fbfdff !important;
  border: 1px solid #d8e4f2 !important;
  border-left: 3px solid #8ba9d2 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  text-align: left !important;
}

.visual-element-item:hover {
  background: #f0f6ff !important;
  border-color: #3574bf !important;
  border-left-color: #213c80 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(33, 60, 128, 0.08) !important;
}

.visual-element-item.is-selected {
  background: #eaf2fc !important;
  border-color: #ff7b00 !important;
  border-left: 4px solid #ff7b00 !important;
  box-shadow: 0 0 0 2px rgba(255, 123, 0, 0.25) !important;
}

.visual-element-item-main {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.element-tag-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  font: 700 10px 'Inter', monospace !important;
  letter-spacing: 0.4px !important;
  flex-shrink: 0 !important;
}

.element-tag-pill.tag-heading { background: #e0ecfb; color: #15457a; }
.element-tag-pill.tag-text { background: #edf2f7; color: #3b4d61; }
.element-tag-pill.tag-image { background: #fef3c7; color: #92400e; }
.element-tag-pill.tag-button { background: #d1fae5; color: #065f46; }
.element-tag-pill.tag-form { background: #ede9fe; color: #5b21b6; }
.element-tag-pill.tag-ribbon { background: #fee2e2; color: #991b1b; }
.element-tag-pill.tag-block { background: #e2e8f0; color: #1e293b; }

.element-text-snippet {
  font: 500 12px/1.3 'Inter', sans-serif !important;
  color: #18304c !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
}

.visual-element-item-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  font: 11px 'Inter', sans-serif !important;
  color: #64748b !important;
}

.element-block-info {
  font-size: 10px !important;
  color: #627b9b !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 65% !important;
}

.element-click-hint {
  font-size: 10px !important;
  color: #ff6b00 !important;
  font-weight: 600 !important;
}

.visual-elements-empty {
  padding: 20px 10px !important;
  text-align: center !important;
  color: #64748b !important;
  font: 12px 'Inter', sans-serif !important;
  background: #f8fafd !important;
  border: 1px dashed #c8dbf2 !important;
  border-radius: 8px !important;
}

/* Botón en barra de herramientas del canvas */
.visual-elements-toggle-btn {
  background: #213c80 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: 1px solid #152755 !important;
}
.visual-elements-toggle-btn:hover {
  background: #18304c !important;
  color: #ffffff !important;
}
.visual-elements-toggle-btn[aria-expanded="true"] {
  background: #ff7b00 !important;
  border-color: #d96800 !important;
  color: #ffffff !important;
}

@media(max-width:700px){.workspace-v6.visual-maximized.visual-panels .admin-studio-grid{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr) auto!important;}.workspace-v6.visual-maximized.visual-panels .admin-sidebar-controls{max-height:220px;grid-column:1;grid-row:1;overflow:auto;}.workspace-v6.visual-maximized.visual-panels .admin-preview-stage{grid-column:1!important;grid-row:2!important;}.workspace-v6.visual-maximized.visual-panels .studio-inspector{grid-row:3;}.visual-toolbar{padding:6px;gap:5px;}.visual-maximized .admin-header{min-height:48px;padding:8px;}.visual-maximized .admin-footer{position:relative;}.visual-maximized .workspace-savebar>span{display:none;}}
@media(max-width:700px){
  .visual-max-shortcut{display:inline-flex;}.visual-maximized .visual-max-shortcut{display:none;}
  .visual-more-tools{display:inline-flex;}
  .workspace-v6 .visual-toolbar{max-height:200px;overflow:auto;}.workspace-v6 .visual-toolbar button{font-size:12px;padding:8px;}
  .workspace-v6 .visual-actions-button,.workspace-v6 .visual-panels-button{font-size:0!important;}.visual-actions-button::after{content:'Acciones';font-size:12px;}.visual-panels-button::after{content:'Capas';font-size:12px;}
  .workspace-v6.visual-maximized #visualMaximize{font-size:0;}.visual-maximized #visualMaximize::after{content:'Restaurar';font-size:12px;}
  .visual-maximized .admin-header-title,.visual-maximized .admin-account,.visual-maximized .admin-nav-shortcuts,.visual-maximized .live-status-dot,.visual-maximized .live-status-label{display:none!important;}
  .visual-maximized .admin-header-actions{flex-wrap:nowrap;justify-content:space-between;}.visual-maximized .admin-preview-pill{padding:0;}
  .workspace-v6.visual-maximized .admin-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:6px;}
  .visual-maximized .workspace-savebar{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .workspace-v6.visual-maximized .workspace-savebar>button{font-size:11px;padding:6px;min-width:0;}
  .visual-maximized .workspace-savebar>button:nth-of-type(n+3){display:none;}
  .visual-maximized .studio-action-status{font-size:11px;line-height:1.3;overflow-wrap:anywhere;}.workspace-v6.visual-maximized #btnApplyChanges{max-width:100%;height:auto;font-size:11px;padding:6px;}
  .workspace-v6.visual-maximized.visual-panels .admin-studio-grid{position:relative;grid-template-rows:minmax(0,1fr)!important;}
  .workspace-v6.visual-maximized.visual-panels .admin-preview-stage{grid-row:1!important;}
  .workspace-v6.visual-maximized.visual-panels .admin-sidebar-controls,.workspace-v6.visual-maximized.visual-panels .studio-inspector{position:absolute;left:8px;right:8px;z-index:50;max-height:44%;box-sizing:border-box;border:1px solid #b4c7e2;border-radius:10px;box-shadow:0 8px 20px #18304c22;}
  .workspace-v6.visual-maximized.visual-panels .admin-sidebar-controls{top:8px;height:auto;}.workspace-v6.visual-maximized.visual-panels .studio-inspector{bottom:8px;}
}

/* =========================================================
   TARJETA 1: PÁGINA EN EDICIÓN (ARRIBA DEL TODO)
   ========================================================= */
.visual-page-card {
  margin-top: 6px !important;
  margin-bottom: 12px !important;
  border: 1px solid #b8cde8 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 13px !important;
  box-shadow: 0 4px 16px rgba(24, 48, 76, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.visual-page-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.visual-card-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.visual-card-icon {
  font-size: 18px !important;
}

.visual-card-title {
  font: 700 14px/1.3 'Inter', sans-serif !important;
  color: #18304c !important;
}

.visual-page-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  background: #eaf2fc !important;
  color: #1e3a8a !important;
  font: 600 11px/1.2 'Inter', sans-serif !important;
  border-radius: 999px !important;
  border: 1px solid #bfd5f2 !important;
}

.visual-page-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.visual-page-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 9px !important;
  font: 600 12px/1.2 'Inter', sans-serif !important;
  color: #334155 !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.visual-page-pill:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px) !important;
}

.visual-page-pill.is-active {
  background: #213c80 !important;
  color: #ffffff !important;
  border-color: #1b2f66 !important;
  box-shadow: 0 2px 6px rgba(33, 60, 128, 0.25) !important;
}

/* =========================================================
   TARJETA 3: PROPIEDADES Y ACCIONES DEL SELECCIONADO
   ========================================================= */
.visual-properties-card {
  margin-bottom: 12px !important;
  border: 1px solid #b8cde8 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 13px !important;
  box-shadow: 0 4px 16px rgba(24, 48, 76, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.visual-properties-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.visual-prop-tag-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  background: #ff6b00 !important;
  color: #ffffff !important;
  font: 700 10px 'Inter', monospace !important;
  letter-spacing: 0.5px !important;
  border-radius: 6px !important;
}

.visual-properties-empty {
  padding: 18px 12px !important;
  text-align: center !important;
  color: #64748b !important;
  background: #f8fafd !important;
  border: 1px dashed #c8dbf2 !important;
  border-radius: 8px !important;
  font: 12px/1.4 'Inter', sans-serif !important;
}

.visual-ribbon-card {
  background: #f0f7ff !important;
  border: 1px solid #b9d5f7 !important;
  border-radius: 10px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}

.visual-ribbon-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.visual-ribbon-toggle {
  width: 100% !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.visual-ribbon-toggle.is-hide {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #f87171 !important;
}

.visual-ribbon-toggle.is-hide:hover {
  background: #fecaca !important;
  color: #7f1d1d !important;
}

.visual-ribbon-toggle.is-show {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}

.visual-ribbon-toggle.is-show:hover {
  background: #bbf7d0 !important;
  color: #14532d !important;
}

.visual-prop-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.visual-prop-colors {
  display: flex !important;
  gap: 10px !important;
}

.visual-color-field {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

.visual-color-field input[type="color"] {
  width: 32px !important;
  height: 28px !important;
  padding: 1px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

.visual-tool-link {
  background: #eef4ff !important;
  color: #1e3a8a !important;
  border: 1px solid #bfdbfe !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  width: 100% !important;
  text-align: center !important;
}

.visual-prop-actions-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.visual-nudge-box {
  background: #f8fafd !important;
  border: 1px solid #dbe6f5 !important;
  border-radius: 8px !important;
  padding: 10px !important;
}

.visual-arrows-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
}

.arrow-middle-row {
  display: flex !important;
  gap: 4px !important;
}

.arrow-btn {
  min-width: 32px !important;
  height: 28px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: bold !important;
}

.visual-nudge-inputs {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  font-size: 11px !important;
  color: #334155 !important;
}

.visual-nudge-inputs input {
  width: 55px !important;
  padding: 3px 6px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

/* =========================================================
   TARJETA 4: ESTRUCTURA DE BLOQUES (AVANZADO)
   ========================================================= */
.visual-blocks-card {
  margin-bottom: 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 12px !important;
}

.visual-blocks-card summary {
  cursor: pointer !important;
  font: 700 13px/1.3 'Inter', sans-serif !important;
  color: #334155 !important;
  user-select: none !important;
}

/* Ocultar botones repetitivos y dispersos en tab-builder */
.builder-actions-strip,
#tab-builder > button.admin-btn-pill {
  display: none !important;
}

/* =========================================================
   CATÁLOGO UNIFICADO DE OBJETOS
   ========================================================= */
.visual-catalog-dialog {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px !important;
  max-width: 440px !important;
}

.visual-catalog-section-title {
  font: 700 11px/1.2 'Inter', sans-serif !important;
  color: #213c80 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 4px 0 2px 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 3px !important;
}

.visual-catalog-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 5px !important;
}

.visual-catalog-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 9px !important;
  font: 500 12px/1.2 'Inter', sans-serif !important;
  background: #f8fafd !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
}

.visual-catalog-btn:hover {
  background: #e0ecfb !important;
  color: #1e3a8a !important;
  border-color: #93c5fd !important;
  transform: translateY(-1px) !important;
}

.visual-btn-add-object {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #047857 !important;
  font-weight: 700 !important;
}

.visual-btn-add-object:hover {
  background: #047857 !important;
}

/* =========================================================
   MODO MAXIMIZADO ENRIQUECIDO & TOOLBAR
   ========================================================= */
.visual-toolbar-page-select {
  font: 600 12px 'Inter', sans-serif !important;
  background: #eef4ff !important;
  color: #1e3a8a !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 7px !important;
  padding: 4px 8px !important;
  min-height: 30px !important;
  cursor: pointer !important;
}

.visual-device-toggle-group {
  display: inline-flex !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
}

.visual-dev-btn {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  min-height: 28px !important;
  cursor: pointer !important;
}

.visual-dev-btn.is-active {
  background: #213c80 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.visual-save-draft-btn {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #047857 !important;
  font-weight: 600 !important;
}

.visual-save-draft-btn:hover {
  background: #047857 !important;
}

.visual-toolbar-objects-btn {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  font-weight: 600 !important;
}

.visual-toolbar-objects-btn:hover {
  background: #2563eb !important;
}

/* Floating Drawer in Maximized Mode */
.visual-maximized-drawer {
  position: fixed !important;
  top: 60px !important;
  right: 0 !important;
  bottom: 40px !important;
  width: min(390px, calc(100vw - 20px)) !important;
  background: #ffffff !important;
  border-left: 2px solid #b8cde8 !important;
  box-shadow: -8px 0 28px rgba(15, 23, 42, 0.22) !important;
  z-index: 10010 !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.visual-maximized-drawer[hidden] {
  transform: translateX(105%) !important;
  display: none !important;
}

.visual-maximized-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.visual-maximized-drawer-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* =========================================================
   PANEL DE CONFIGURACIÓN DE FORMULARIO INTERACTIVO
   ========================================================= */
.visual-form-card {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08) !important;
}

.visual-form-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid #dcfce7 !important;
}

.visual-form-cols-toggle {
  display: flex !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 3px !important;
}

.visual-form-col-btn {
  flex: 1 !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.visual-form-col-btn.is-active {
  background: #15803d !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.visual-form-presets {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

.visual-form-preset-btn {
  padding: 4px 8px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
}

.visual-form-preset-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}