/* Superficies y controles del estudio, independientes del tema público. */
.admin-portal {
  --white: #18304c;
  --gray-text: #52657c;
  --yellow: #214fa0;
  --studio-border: #dce4ef;
  background: #eef3f9;
  color-scheme: light;
}
.admin-panel { background: #f5f7fb; color: #18304c; }
.admin-header, .admin-tabs, .admin-stage-toolbar, .admin-footer,
.admin-sidebar-controls { background: #ffffff; border-color: var(--studio-border); }
.admin-preview-stage, .admin-stage-canvas { background: radial-gradient(ellipse at top, #e1ecfa, #f3f6fa 70%); }
.admin-card-group, .admin-list-item, .template-card {
  background: #ffffff; border-color: var(--studio-border);
  box-shadow: 0 3px 14px #203c6410;
}
.admin-card-title, .setting-desc, .template-sub { color: #52657c; }
.setting-title, .template-title, .page-admin-card strong { color: #18304c !important; }
.admin-tab.is-active, .admin-tab:hover, .admin-device-btn.is-active,
.stage-mode-btn.is-active, .template-card.is-active {
  background: #eaf1ff; color: #214fa0; border-color: #a9c3ed;
  box-shadow: inset 0 0 0 1px #c6d8f2;
}
.admin-input, .admin-textarea, .admin-select {
  background: #f8fafd; color: #18304c; border-color: #cbd7e7;
}
.admin-input:focus, .admin-textarea:focus { background: white; border-color: #214fa0; }
.admin-btn-pill, .admin-quick-btn, .icon-btn, .stage-tool-btn {
  background: #f1f5fb; color: #214fa0; border-color: #cedced; min-height: 36px;
}
.admin-btn-pill:hover, .admin-quick-btn:hover, .icon-btn:hover { background: #e1ecfb; color: #18304c; }
.admin-btn-pill:disabled { opacity: .45; cursor: default; }
.admin-btn-apply, .template-card-badge { background: #214fa0; color: white; }
.admin-btn-apply.has-changes { background: #214fa0; color: white; box-shadow: 0 3px 12px #214fa030; }
.admin-slider::-webkit-slider-thumb { background: #214fa0; }
.admin-slider::-moz-range-thumb { background: #214fa0; }
.admin-badge { background: #eaf1ff; color: #214fa0; }
.badge-value, .toggle-status-text { color: #214fa0; background: #eaf1ff; }
.toggle-switch { background: #c6d0df; }
.admin-toggle.is-on .toggle-switch { background: #247957; }
.admin-preview-pill, .stage-mode-selector, .metric-badge { background: #f1f5fb; border-color: var(--studio-border); }
.live-status-label { color: #213c80; }
.admin-tool-row { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-tabs { flex-wrap: wrap; }
.admin-tab { flex: 1 0 58px; min-height: 44px; }
.admin-studio-grid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) 290px; }
.studio-inspector { background: #fff; border-left: 1px solid #dce4ef; padding: 18px; overflow-y: auto; min-height: 0; color: #18304c; }
.studio-inspector h3 { font-size: 1rem; margin-bottom: 12px; }
.studio-inspector .admin-tool-row { margin: 12px 0; }
.studio-inspector .admin-control-group { margin: 14px 0; }
.studio-inspector [hidden] { display: none !important; }
.studio-page-blocks { max-width: 1200px; margin: 0 auto; padding: 2rem 0; }
.studio-block { margin-bottom: 2rem; min-width: 0; }
.studio-block img { max-width: 100%; }
.studio-academic-layout { padding-top: 4rem; }
.studio-academic-layout .studio-block { margin-bottom: 0; }
.studio-academic-layout .studio-block > .badass-card { height: 100%; }
.academic-offer-grid { gap: var(--content-gap, 32px); }
.badass-card { border-radius: var(--content-radius, 12px) !important; }
@media (max-width:768px) { .studio-academic-layout .studio-block > .badass-card { padding: 1.5rem !important; min-width: 0; } }
.studio-edit-mode .studio-block { outline: 1px dashed #9ab7df; outline-offset: 3px; cursor: grab; }
.studio-edit-mode .studio-block:hover { outline: 2px solid #3876ce; }
.studio-selected { outline: 3px solid #3876ce !important; outline-offset: 4px; }
.studio-media-list { display: grid; gap: 12px; }
.studio-media-list img { width: 100%; max-height: 180px; object-fit: contain; border-radius: 8px; background: #edf2f8; }
.studio-inspector textarea { min-height: 100px; }
.inspector-heading {display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:14px;}
.inspector-heading h3 {margin:0;font-size:.9rem;line-height:1.4;}
.inspector-heading button {font-size:.7rem;padding:8px;white-space:nowrap;}
.inspector-guide {font-size:.8rem;line-height:1.75;color:#52657c;}
.inspector-guide ol {padding-left:20px;margin:12px 0;}
.studio-inspector .admin-tool-row button[aria-pressed="true"] {background:#213c80;color:#fff;}
.admin-studio-grid.inspector-collapsed {--inspector-width:56px;}
.inspector-collapsed .studio-inspector {padding:8px;overflow:hidden;}
.inspector-collapsed .studio-inspector>:not(.inspector-heading),.inspector-collapsed .inspector-heading h3 {display:none;}
.inspector-collapsed .inspector-heading {margin:0;justify-content:center;}
.inspector-collapsed #btnToggleInspector {writing-mode:vertical-rl;min-height:150px;}
@media(min-width:1201px) {
  .admin-studio-grid {grid-template-columns:minmax(300px,380px) minmax(0,1fr) var(--inspector-width,290px);}
  .admin-studio-grid.controls-expanded {grid-template-columns:50% minmax(0,1fr) var(--inspector-width,290px);}
}
@media(min-width:993px) and (max-width:1200px) {
  .admin-studio-grid.controls-expanded {grid-template-columns:50% minmax(0,1fr);}
}
@media (max-width: 1200px) {
  .admin-studio-grid { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .studio-inspector { position: fixed; right: 12px; bottom: 12px; width: 280px; max-height: 45vh; border: 1px solid #cbd7e7; border-radius: 12px; z-index: 60; box-shadow: 0 8px 35px #18304c25; }
  .inspector-collapsed .studio-inspector {width:56px;}
}
@media (max-width: 992px) {
  .admin-studio-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-inspector { position: static; width: auto; max-height: 40vh; border-radius: 0; box-shadow: none; }
  .admin-studio-grid { overflow-y: auto; }
  .admin-sidebar-controls { min-height: 55vh; }
  #btnExpandControls {display:none;}
  .inspector-collapsed .studio-inspector {width:auto;}
  .inspector-collapsed #btnToggleInspector {writing-mode:horizontal-tb;min-height:36px;}
}
.admin-list-item-header { cursor: grab; }
.admin-list-item-actions { flex-wrap: wrap; }
.admin-portal :is(button, input, select, textarea):focus-visible,
.mobile-nav-overlay a:focus-visible, .mobile-nav-overlay button:focus-visible {
  outline: 3px solid #3876ce; outline-offset: 3px;
}
#showMoodle { width: 22px; height: 22px; accent-color: #214fa0; flex-shrink: 0; }
[data-service="moodle"][hidden], body.moodle-hidden [data-service="moodle"] { display: none !important; }
.mobile-nav-overlay[inert] { pointer-events: none !important; }

@media (max-width: 768px) {
  .badass-footer {
    width: calc(100% - 24px) !important; height: auto !important;
    min-height: 48px !important; padding: 8px 12px !important;
    white-space: normal !important; flex-wrap: wrap !important; gap: 4px 12px !important;
    background: var(--bg-color) !important; color: var(--text-color) !important;
    border-color: var(--nav-border) !important; box-shadow: 0 4px 18px #18304c18 !important;
  }
  .badass-footer .footer-right { flex-wrap: wrap; justify-content: center; min-width: 0; }
  .badass-footer a { color: var(--text-color) !important; overflow-wrap: anywhere; }
  .badass-footer .footer-left { text-align: center; }
  .badass-page-content { padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }
  .creator-card { bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important; }

  .mobile-nav-overlay {
    --menu-ink: #18304c; --menu-muted: #52657c; --menu-card: #ffffffd9;
    --menu-border: #d6e1ee; --menu-accent: #214fa0;
  }
  .overlay-backdrop {
    background: radial-gradient(ellipse at 0% 0%, #d9e9fc, transparent 65%),
      radial-gradient(ellipse at 100% 100%, #fff0ce, transparent 60%), #f5f8fc !important;
  }
  .overlay-container { max-width: 620px; margin-inline: auto; gap: 16px; }
  .overlay-header, .overlay-footer { border-color: var(--menu-border) !important; }
  .overlay-logo-img { filter: none !important; height: 40px !important; }
  .overlay-subtitle, .overlay-nav-num { color: var(--menu-accent) !important; }
  .overlay-close-btn {
    background: var(--menu-card) !important; color: var(--menu-ink) !important;
    border-color: var(--menu-border) !important; width: 44px !important; height: 44px !important;
  }
  .overlay-nav-list { gap: 12px !important; justify-content: center; margin: 0 !important; }
  .overlay-nav-item {
    background: var(--menu-card); border: 1px solid var(--menu-border) !important;
    border-radius: 18px; padding: 10px 16px !important;
    box-shadow: 0 5px 16px #203c6408;
    transition: box-shadow .25s, border-color .25s;
  }
  .overlay-nav-item:hover { border-color: #a9c3ed !important; box-shadow: 0 8px 24px #203c6416; }
  .overlay-nav-link {
    color: var(--menu-ink) !important; font-size: clamp(1.2rem, 5.6vw, 1.75rem) !important;
    text-transform: none !important; letter-spacing: -.02em !important;
    align-items: center !important; min-height: 44px; overflow-wrap: anywhere;
  }
  .overlay-nav-link > span:nth-child(2) { flex: 1; min-width: 0; }
  .overlay-nav-link::after { content: '↗'; font-size: 1.1rem; color: var(--menu-accent); }
  .overlay-nav-num { font-size: .65rem !important; }
  .overlay-nav-link:is(:active, .is-active) { color: var(--menu-accent) !important; }
  .overlay-sub-link { color: var(--menu-muted) !important; min-height: 44px; display: flex; align-items: center; }
  .quick-contact-pill {
    background: var(--menu-card) !important; color: var(--menu-ink) !important;
    border-color: var(--menu-border) !important; min-height: 44px; border-radius: 12px !important;
  }
  .overlay-legal { color: var(--menu-muted) !important; }
  .mobile-menu-trigger { background: #eaf1ff !important; border-color: #c6d8f2 !important; }
  .trigger-label { color: #214fa0 !important; }
  .trigger-icon .bar { background: #214fa0 !important; }
  body.theme-light .badass-nav { background: #fffffff0 !important; border-color: #d6e1ee !important; box-shadow: 0 4px 20px #18304c14 !important; }
}
@media (max-width: 992px) {
  .admin-header { height: auto; min-height: 60px; padding: 12px; flex-wrap: wrap; gap: 10px; }
  .admin-header-actions { flex-wrap: wrap; gap: 8px; }
  .admin-preview-pill { flex-wrap: wrap; }
  .admin-header-title, .admin-header-actions, .admin-sidebar-controls { min-width: 0; }
  .admin-studio-grid { min-height: 0; }
  .admin-tabs { overflow-x: auto; }
  .admin-tab { min-width: 52px; min-height: 44px; }
  .admin-panel { height: 100dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-overlay, .mobile-nav-overlay *, .admin-portal * {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}