/* =========================================================
   V60.8 — Auditoría visual y limpieza de interfaz post-estabilidad
   Capa final no destructiva: no cambia lógica, roles ni permisos.
   Objetivo: menos saturación visual, más jerarquía, móvil limpio y panel premium.
   ========================================================= */

:root{
  --v608-bg:#f5f7fb;
  --v608-panel:#ffffff;
  --v608-panel-soft:#f8fbff;
  --v608-text:#111827;
  --v608-muted:#64748b;
  --v608-muted-2:#8392a8;
  --v608-line:#dfe7f2;
  --v608-line-soft:#edf2f8;
  --v608-blue:#0b63ce;
  --v608-blue-2:#0759b7;
  --v608-blue-soft:#eaf3ff;
  --v608-green:#16a34a;
  --v608-red:#dc2626;
  --v608-amber:#f59e0b;
  --v608-radius:16px;
  --v608-radius-lg:22px;
  --v608-shadow:0 10px 28px rgba(15,23,42,.065);
  --v608-shadow-soft:0 4px 14px rgba(15,23,42,.045);
  --v608-focus:0 0 0 4px rgba(11,99,206,.14);
}

html{background:var(--v608-bg)!important;}
body{
  background:var(--v608-bg)!important;
  color:var(--v608-text)!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body.layout-app::before{
  background:linear-gradient(90deg,#084fa8 0%,#0b63ce 52%,#07337f 100%)!important;
  box-shadow:0 2px 14px rgba(7,51,127,.18)!important;
}
#app{background:var(--v608-bg)!important;}

/* Shell limpio */
.panel{
  background:var(--v608-bg)!important;
  padding-top:calc(var(--topbar,60px) + 22px)!important;
}
.panel > *{
  max-width:1480px;
}
.panel > .topbar,
.panel > .teacher-hero,
.panel > .student-hero,
.panel > .developer-module,
.panel > section,
.panel > article{
  margin-left:auto!important;
  margin-right:auto!important;
}
.sidebar{
  background:rgba(255,255,255,.98)!important;
  border-right:1px solid var(--v608-line)!important;
  box-shadow:3px 0 18px rgba(15,23,42,.04)!important;
}
.sidebar::before{
  font-weight:950!important;
  letter-spacing:-.045em!important;
}
.sidebar-profile{
  background:linear-gradient(180deg,#fff,#f7fbff)!important;
  border-color:var(--v608-line)!important;
  box-shadow:none!important;
}
.sidebar-profile-text strong{color:#10243f!important;font-weight:900!important;}
.sidebar-profile-text small{color:var(--v608-muted)!important;font-weight:750!important;}
.sidebar button,
.sidebar .ghost,
.student-side-btn,
.sidebar-support-link{
  border-radius:13px!important;
  box-shadow:none!important;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
.sidebar button:hover,
.student-side-btn:hover,
.sidebar-support-link:hover{
  background:#f1f7ff!important;
  color:var(--v608-blue)!important;
  transform:none!important;
}
.sidebar button.active,
.sidebar button.selected,
.student-side-btn.active,
.student-side-btn.selected{
  background:var(--v608-blue-soft)!important;
  color:#0754ae!important;
  box-shadow:inset 4px 0 0 var(--v608-blue)!important;
}
#logout,.sidebar-logout-btn{
  margin-top:12px!important;
  background:#f6f9fc!important;
  border:1px solid var(--v608-line)!important;
  color:#334155!important;
}

/* Encabezados premium sin ruido */
.topbar,
.teacher-hero,
.student-hero{
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  border:1px solid var(--v608-line)!important;
  border-radius:var(--v608-radius-lg)!important;
  box-shadow:var(--v608-shadow-soft)!important;
  padding:22px 24px!important;
  margin-bottom:18px!important;
  min-height:auto!important;
}
.topbar h1,
.teacher-hero h1,
.student-hero h1{
  color:#111827!important;
  font-size:clamp(24px,2.25vw,34px)!important;
  line-height:1.06!important;
  font-weight:920!important;
  letter-spacing:-.045em!important;
  margin:0!important;
}
.topbar p,
.teacher-hero p,
.student-hero p,
.hint{
  color:var(--v608-muted)!important;
  font-size:13.5px!important;
  line-height:1.48!important;
  font-weight:620!important;
}
.section-head,
.dev-compact-head,
.dev-flat-head,
.dev-modal-section-head,
.aulas-final-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-bottom:14px!important;
}
.section-head h2,
.dev-compact-head h2,
.dev-flat-head h2,
.card h2,
.mini-card h2{
  color:#111827!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
}
.section-head p,
.card p,
.mini-card p{
  color:var(--v608-muted)!important;
}

/* Tarjetas: limpias, compactas y consistentes */
.card,
.mini-card,
.aula-card,
.teacher-row-card,
.teacher-board-card,
.teacher-aula-tile,
.school-card,
.module-card,
.student-work-tinker-card,
.activity-tinker-card,
.lab-free-card,
.selected-activity-card,
.student-lab-launcher,
.dev-modal-section,
.dev-clean-list > article,
.list > article{
  background:var(--v608-panel)!important;
  border:1px solid var(--v608-line)!important;
  border-radius:var(--v608-radius)!important;
  box-shadow:var(--v608-shadow-soft)!important;
}
.card,
.mini-card,
.teacher-row-card,
.aula-card,
.teacher-board-card,
.teacher-aula-tile{
  padding:18px!important;
}
.card:hover,
.mini-card:hover,
.aula-card:hover,
.teacher-row-card:hover,
.school-card:hover,
.module-card:hover,
.dev-clean-list > article:hover,
.list > article:hover{
  border-color:#c9daee!important;
  box-shadow:var(--v608-shadow)!important;
  transform:none!important;
}
.module-summary-grid,
.grid{
  gap:14px!important;
}
.module-summary-grid .module-card,
.module-card{
  min-height:132px!important;
  text-align:left!important;
  align-items:flex-start!important;
  justify-content:center!important;
}
.module-card h2{font-size:19px!important;margin-bottom:6px!important;}
.module-card p{font-size:13px!important;margin:0!important;}
.list,
.dev-clean-list,
.colegio-aula-groups{
  display:grid!important;
  gap:10px!important;
}
.empty{
  background:#fbfdff!important;
  border:1px dashed #cfddec!important;
  border-radius:15px!important;
  color:var(--v608-muted)!important;
  padding:18px!important;
  font-weight:720!important;
}
.alert,
.soft-alert{
  border-radius:15px!important;
  box-shadow:none!important;
  padding:13px 15px!important;
}

/* Botones: menos ruido, más jerarquía */
button,
.button,
.primary,
.ghost,
.danger-btn,
.small-btn,
[data-close-dev-modal],
.sidebar-support-link{
  font-weight:850!important;
}
button:not(.school-card):not(.module-card):not(.student-side-btn):not(.dev-menu-btn):not(.teacher-menu-btn):not(.course-card-pro-v68):not(.course-card-pro-v66){
  border-radius:999px!important;
}
.primary,
button.primary,
button[type="submit"]:not(.ghost){
  background:linear-gradient(180deg,var(--v608-blue),var(--v608-blue-2))!important;
  color:#fff!important;
  border:1px solid rgba(7,89,183,.08)!important;
  box-shadow:0 8px 18px rgba(11,99,206,.16)!important;
}
.ghost,
button.ghost,
.small-btn.ghost{
  background:#fff!important;
  color:#0b63ce!important;
  border:1px solid #c9ddf4!important;
  box-shadow:none!important;
}
.danger-btn,
button.danger-btn{
  background:#dc2626!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(220,38,38,.12)!important;
}
button:hover:not(:disabled),
.primary:hover:not(:disabled),
.ghost:hover:not(:disabled){
  filter:none!important;
  transform:translateY(-1px)!important;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:none!important;
  box-shadow:var(--v608-focus)!important;
  border-color:#8ab8ff!important;
}
.inline-actions,
.actions,
.dev-head-actions,
.aula-actions,
.dev-modal-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.small-btn{min-height:34px!important;padding:7px 11px!important;font-size:12.5px!important;}

/* Formularios limpios */
input,
select,
textarea{
  background:#fff!important;
  border:1px solid #d9e4f0!important;
  border-radius:13px!important;
  color:#111827!important;
  box-shadow:none!important;
}
input::placeholder,
textarea::placeholder{color:#98a6b8!important;}
label,
.field-label{
  color:#334155!important;
  font-size:12.5px!important;
  font-weight:850!important;
}
.stack-form,
.row-form,
.activity-modal-form-v53727,
.classroom-activity-form{
  gap:12px!important;
}
.row-form{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
}
textarea{line-height:1.5!important;}

/* Pestañas y chips: una sola línea visual */
.tabs-lite,
.tabs-click,
.dev-modal-tabs,
.colegio-inline-tabs,
.docente-modal-tabs,
.teacher-quick-tabs,
.tinker-filter-tabs{
  gap:8px!important;
  padding:4px!important;
  border-radius:999px!important;
  background:#eef4fb!important;
  border:1px solid #dbe6f2!important;
  width:max-content!important;
  max-width:100%!important;
  overflow:auto!important;
}
.tabs-lite button,
.tabs-click button,
.dev-modal-tabs button,
.colegio-inline-tabs button,
.docente-modal-tabs button,
.teacher-quick-tabs button,
.tab-btn{
  min-height:34px!important;
  padding:7px 12px!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#405066!important;
  border:0!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.tabs-lite button.selected,
.tabs-click button.selected,
.dev-modal-tabs button.selected,
.colegio-inline-tabs button.selected,
.docente-modal-tabs button.selected,
.teacher-quick-tabs button.selected,
.tab-btn.selected,
.tab-btn.active{
  background:#fff!important;
  color:#0759b7!important;
  box-shadow:0 2px 8px rgba(15,23,42,.08)!important;
}
.badge,
.pill,
.mini-count-pill{
  border-radius:999px!important;
  min-height:25px!important;
  padding:5px 9px!important;
  font-size:11.5px!important;
  font-weight:900!important;
  border:1px solid transparent!important;
}
.pill.ok,.badge.ok{background:#e9f9ef!important;color:#15803d!important;border-color:#c9f0d7!important;}
.pill.danger,.badge.danger{background:#fff1f2!important;color:#be123c!important;border-color:#ffd5dc!important;}
.pill.warn,.badge.warn{background:#fff7e6!important;color:#a16207!important;border-color:#ffe2a8!important;}

/* Menús de tarjeta: más elegantes, menos invasivos */
details.dev-card-menu,
details.aula-more-menu{position:relative!important;}
details.dev-card-menu summary,
details.aula-more-menu summary{
  list-style:none!important;
  border-radius:999px!important;
  background:#f7faff!important;
  border:1px solid #dce7f3!important;
  color:#334155!important;
  min-height:32px!important;
  padding:6px 10px!important;
  cursor:pointer!important;
}
details.dev-card-menu summary::-webkit-details-marker,
details.aula-more-menu summary::-webkit-details-marker{display:none!important;}
.dev-card-menu-popover{
  border:1px solid var(--v608-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 18px 42px rgba(15,23,42,.16)!important;
  padding:6px!important;
  min-width:190px!important;
}
.dev-card-menu-popover button{
  width:100%!important;
  justify-content:flex-start!important;
  background:transparent!important;
  color:#334155!important;
  box-shadow:none!important;
  border-radius:10px!important;
  min-height:34px!important;
}
.dev-card-menu-popover button:hover{background:#f3f7fb!important;color:#0759b7!important;transform:none!important;}
.dev-card-menu-popover .danger-text{color:#be123c!important;}

/* Modales: margen respirable y contenido enfocado */
.dev-modal-backdrop,
.teacher-modal-backdrop,
.classroom-create-backdrop-v55,
.activity-modal-backdrop-v53727,
.course-modal-backdrop-v53726,
.period-modal-backdrop-v53734{
  background:rgba(15,23,42,.42)!important;
  backdrop-filter:blur(8px)!important;
  padding:18px!important;
}
.dev-modal,
.teacher-modal,
.classroom-create-modal-v55,
.activity-modal-v53727,
.course-modal-v53726,
.period-modal-v53734{
  border-radius:22px!important;
  border:1px solid rgba(226,232,240,.95)!important;
  box-shadow:0 24px 72px rgba(15,23,42,.22)!important;
  background:#fff!important;
}
.dev-compact-modal-head,
.activity-modal-head-v53727,
.course-modal-head-v53726,
.period-modal-head-v53734{
  border-bottom:1px solid var(--v608-line-soft)!important;
  padding-bottom:12px!important;
  margin-bottom:14px!important;
}
.dev-compact-modal-head h2,
.activity-modal-head-v53727 h2,
.course-modal-head-v53726 h2,
.period-modal-head-v53734 h2{
  font-size:22px!important;
  font-weight:920!important;
  letter-spacing:-.04em!important;
}
.activity-modal-section-v53727,
.dev-modal-section{
  background:#fbfdff!important;
  border:1px solid var(--v608-line)!important;
  border-radius:16px!important;
}

/* Panel estudiante y docente: foco en contenido */
.student-module-area,
.teacher-main-area,
.developer-module{
  animation:v608SoftIn .18s ease both;
}
.student-school-brand,
.student-school-brand.mini-brand{
  border-radius:18px!important;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
  border:1px solid var(--v608-line)!important;
  box-shadow:var(--v608-shadow-soft)!important;
}
.student-school-logo,
.school-logo,
.school-logo-mini{
  background:#fff!important;
  border-color:#dfe7f2!important;
  box-shadow:none!important;
}
.student-lab-launcher{
  background:linear-gradient(135deg,#fff 0%,#f7fbff 100%)!important;
}
.lab-launch-main{min-width:220px!important;}
.works-gallery-grid,
.lab-free-grid{
  gap:14px!important;
}
.work-thumb{
  background:#f8fafc!important;
  border-bottom:1px solid var(--v608-line-soft)!important;
}
.work-card-footer{
  border-top:1px solid var(--v608-line-soft)!important;
}

/* Tablas/listas largas: evitar desborde visual */
.table-wrap,
.table-container,
.overflow-table{
  overflow:auto!important;
  border:1px solid var(--v608-line)!important;
  border-radius:15px!important;
  background:#fff!important;
}
table{border-collapse:separate!important;border-spacing:0!important;width:100%!important;}
th{background:#f8fbff!important;color:#334155!important;font-size:12px!important;text-transform:none!important;}
td,th{border-bottom:1px solid var(--v608-line-soft)!important;padding:10px 12px!important;}

/* Toast / actualización: fino y no invasivo */
.toast,
.update-banner{
  border-radius:16px!important;
  box-shadow:0 18px 42px rgba(15,23,42,.18)!important;
  border:1px solid rgba(255,255,255,.55)!important;
}
.update-banner{
  background:#0f172a!important;
  color:#fff!important;
}
.update-banner button{
  background:#fff!important;
  color:#0b63ce!important;
  box-shadow:none!important;
}

/* Laboratorio runner: barra limpia */
.lab-studio-topbar,
.lab-run-topbar,
.lab-shell-topbar{
  background:#fff!important;
  border-bottom:1px solid var(--v608-line)!important;
  box-shadow:0 2px 12px rgba(15,23,42,.06)!important;
}
.lab-save-actions .pill{background:#eef4ff!important;color:#0759b7!important;}

@keyframes v608SoftIn{
  from{opacity:.86;transform:translateY(3px)}
  to{opacity:1;transform:translateY(0)}
}

/* Responsive PC mediano */
@media(max-width:1180px){
  .grid,.module-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .layout-2,.delivery-grid{grid-template-columns:1fr!important;}
  .panel{padding-left:20px!important;padding-right:20px!important;}
}

/* Responsive tablet/móvil: cero saturación */
@media(max-width:900px){
  body.layout-app::before{display:none!important;}
  body.layout-app #app,#app.layout-app{display:block!important;}
  .sidebar{
    position:relative!important;
    top:0!important;
    height:auto!important;
    min-height:0!important;
    border-right:0!important;
    border-bottom:1px solid var(--v608-line)!important;
    padding:14px!important;
  }
  .sidebar::before,.shell-collapse-btn{display:none!important;}
  .sidebar-profile{margin:0 0 12px!important;}
  .developer-menu,.teacher-menu,.student-side-menu{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .sidebar button,.student-side-btn,.sidebar-support-link{
    min-height:44px!important;
    justify-content:flex-start!important;
  }
  .panel{
    padding:18px!important;
    min-height:auto!important;
  }
  .topbar,.teacher-hero,.student-hero{
    padding:18px!important;
    border-radius:18px!important;
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  .section-head,.dev-compact-head,.dev-flat-head,.dev-modal-section-head,.aulas-final-head{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .actions,.inline-actions,.dev-head-actions,.aula-actions,.dev-modal-actions{
    width:100%!important;
  }
  .actions > button,.inline-actions > button,.dev-head-actions > button,.aula-actions > button,.dev-modal-actions > button{
    flex:1 1 auto!important;
  }
  .tabs-lite,.tabs-click,.dev-modal-tabs,.colegio-inline-tabs,.docente-modal-tabs,.teacher-quick-tabs{
    width:100%!important;
    border-radius:16px!important;
  }
}

@media(max-width:620px){
  body{font-size:14px!important;}
  .panel{padding:14px!important;}
  .developer-menu,.teacher-menu,.student-side-menu{grid-template-columns:1fr!important;}
  .topbar h1,.teacher-hero h1,.student-hero h1{font-size:25px!important;}
  .topbar p,.teacher-hero p,.student-hero p,.hint{font-size:13px!important;}
  .card,.mini-card,.aula-card,.teacher-row-card,.teacher-board-card,.teacher-aula-tile{padding:15px!important;border-radius:15px!important;}
  .grid,.module-summary-grid,.lab-free-grid,.works-gallery-grid{grid-template-columns:1fr!important;}
  .row-form{grid-template-columns:1fr!important;}
  .inline-actions > button,
  .actions > button,
  .dev-modal-actions > button,
  .activity-modal-actions-v53727 > button,
  .period-modal-actions-v53734 > button{
    width:100%!important;
    flex:1 1 100%!important;
  }
  .dev-modal-backdrop,
  .teacher-modal-backdrop,
  .classroom-create-backdrop-v55,
  .activity-modal-backdrop-v53727,
  .course-modal-backdrop-v53726,
  .period-modal-backdrop-v53734{
    padding:10px!important;
  }
  .dev-modal,
  .teacher-modal,
  .classroom-create-modal-v55,
  .activity-modal-v53727,
  .course-modal-v53726,
  .period-modal-v53734{
    border-radius:18px!important;
    max-height:calc(100vh - 20px)!important;
  }
  input,select,textarea{min-height:44px!important;}
}

@media(max-width:420px){
  .sidebar-profile{padding:10px!important;}
  .sidebar-avatar{width:42px!important;height:42px!important;min-width:42px!important;}
  .menu-icon{width:20px!important;min-width:20px!important;}
  .topbar,.teacher-hero,.student-hero{padding:16px!important;}
  .topbar h1,.teacher-hero h1,.student-hero h1{font-size:23px!important;}
  .badge,.pill,.mini-count-pill{font-size:11px!important;}
}