:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033; background: #f4f7fb; --primary:#2349a3; --primary-dark:#18377f;
  --border:#dbe3ef; --muted:#66728a; --surface:#fff; --success:#12663b; --danger:#a32626;
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:#f4f7fb; }
a { color:inherit; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 2rem; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:.9rem; text-decoration:none; }
.brand strong { font-size:1.05rem; }
.muted { color:var(--muted); }
.topnav { display:flex; align-items:center; gap:.55rem; }
.topnav a { text-decoration:none; padding:.5rem .7rem; border-radius:8px; color:#4f5d75; }
.topnav a.active, .topnav a:hover { background:#edf2ff; color:var(--primary-dark); }
.badge { padding:.35rem .7rem; border-radius:999px; background:#e8eefc; font-size:.85rem; white-space:nowrap; }
.container { max-width:1440px; margin:0 auto; padding:2.2rem 1.25rem 4rem; }
.hero { max-width:850px; margin-bottom:2rem; }
.hero h1, .page-header h1 { line-height:1.06; margin:.35rem 0 .75rem; }
.hero h1 { font-size:clamp(2rem,5vw,3.5rem); }
.page-header h1 { font-size:clamp(1.8rem,4vw,2.7rem); }
.hero p, .page-header p { color:#566176; font-size:1.04rem; margin:.35rem 0; }
.eyebrow { letter-spacing:.16em; font-size:.78rem !important; font-weight:800; color:#50617f !important; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.card, .form-card, .table-card, .teacher-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 6px 20px rgba(26,39,66,.05); }
.card { padding:1.4rem; }
.card h2 { margin-top:0; }
dl { display:grid; grid-template-columns:110px 1fr; gap:.65rem 1rem; margin-bottom:0; }
dt { color:var(--muted); } dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.status { display:inline-block; padding:.25rem .55rem; border-radius:999px; font-size:.86rem; font-weight:700; }
.status.ok { background:#e8f7ef; color:var(--success); }
.status.error { background:#fdecec; color:var(--danger); }
.status.neutral { background:#eef1f5; color:#586374; }
.error-detail { color:#7a3540; }
.next { margin-top:1rem; }
code { background:#eef2f7; padding:.1rem .3rem; border-radius:4px; }
.page-header { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin:1.2rem 0 1.5rem; }
.page-header.compact { align-items:center; }
.subnav { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.2rem; }
.subnav a { text-decoration:none; background:#fff; border:1px solid var(--border); border-radius:999px; padding:.5rem .8rem; color:#536077; font-size:.92rem; }
.subnav a:hover { border-color:#9fb2df; color:var(--primary-dark); }
.button { display:inline-flex; align-items:center; justify-content:center; border-radius:9px; padding:.65rem 1rem; border:1px solid transparent; text-decoration:none; cursor:pointer; font:inherit; font-weight:700; }
.button.primary { color:#fff; background:var(--primary); }
.button.primary:hover { background:var(--primary-dark); }
.button.secondary { color:#263958; background:#fff; border-color:#cbd6e5; }
.button.small { padding:.42rem .65rem; font-size:.86rem; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:1rem 0; }
.segmented { display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; }
.segmented a { padding:.55rem .85rem; text-decoration:none; color:#536077; border-right:1px solid var(--border); }
.segmented a:last-child { border-right:0; }
.segmented a.active { background:var(--primary); color:#fff; }
.record-count { color:var(--muted); font-weight:600; }
.table-card { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th, td { padding:.8rem .9rem; border-bottom:1px solid #e8edf5; text-align:left; vertical-align:top; }
th { background:#f8faff; color:#4d5b72; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
tbody tr:hover { background:#fbfcff; }
.actions-cell { text-align:right; white-space:nowrap; }
.empty-row { text-align:center; padding:2rem; color:var(--muted); }
.teacher-list { display:grid; gap:1rem; }
.teacher-card { padding:1.15rem; }
.teacher-card-header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; border-bottom:1px solid #edf1f6; padding-bottom:.85rem; }
.teacher-card-header h2 { margin:0 0 .45rem; font-size:1.25rem; }
.teacher-report-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; padding-top:1rem; }
.report-block h3 { margin:.1rem 0 .65rem; font-size:.9rem; color:#364762; text-transform:uppercase; letter-spacing:.04em; }
.report-block p { display:grid; grid-template-columns:85px 1fr; gap:.5rem; margin:.42rem 0; font-size:.9rem; overflow-wrap:anywhere; }
.report-block p span { color:var(--muted); }
.district-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.6rem; }
.district-tags span { background:#eef3ff; color:#334f8c; border-radius:999px; padding:.25rem .5rem; font-size:.8rem; }
.form-card { padding:1.4rem; }
fieldset { border:0; margin:0 0 1.35rem; padding:0; }
legend { font-size:1.05rem; font-weight:800; margin-bottom:.9rem; color:#25344d; }
.form-grid { display:grid; gap:1rem; }
.form-grid.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid.three-columns { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-grid label { display:flex; flex-direction:column; gap:.38rem; min-width:0; }
.form-grid label > span { font-size:.87rem; color:#4f5e75; font-weight:700; }
.span-2 { grid-column:span 2; }
input, select, textarea { width:100%; border:1px solid #cbd6e5; border-radius:8px; padding:.68rem .75rem; background:#fff; color:#172033; font:inherit; }
input:focus, select:focus, textarea:focus { outline:3px solid rgba(35,73,163,.13); border-color:#7791ca; }
input[readonly] { background:#f1f4f8; color:#536077; }
.form-actions { display:flex; justify-content:flex-end; gap:.7rem; padding-top:.3rem; }
.alert { border-radius:10px; padding:.85rem 1rem; margin:1rem 0; }
.alert.success { background:#e8f7ef; color:#12663b; border:1px solid #bfe6d0; }
.alert.error { background:#fff0f0; color:#8d2222; border:1px solid #f0c4c4; }
.alert ul { margin:.45rem 0 0 1.2rem; }
.empty-state { text-align:center; padding:2.5rem; }
.empty-state.narrow { max-width:620px; margin:3rem auto; }
@media (max-width:1050px) { .teacher-report-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
  .topbar { padding:.8rem 1rem; align-items:flex-start; }
  /* El menú móvil nuevo controla la visibilidad del nav completo.
     No ocultar sus enlaces internos: hacerlo dejaba los desplegables vacíos. */
  .muted { display:none; }
  .container { padding-top:1.3rem; }
  .page-header, .toolbar { align-items:stretch; flex-direction:column; }
  .page-header .button { width:100%; }
  .form-grid.two-columns, .form-grid.three-columns, .teacher-report-grid { grid-template-columns:1fr; }
  .span-2 { grid-column:auto; }
  .teacher-card-header { flex-direction:column; }
  .form-actions { flex-direction:column-reverse; }
  .form-actions .button { width:100%; }
}
.status.pending { background:#fff4d8; color:#7a5700; }
.workflow-note { margin:0 0 1.35rem; padding:.85rem 1rem; border:1px solid #cbd8f1; border-radius:10px; background:#f2f6ff; color:#354b78; }
.field-help { color:var(--muted); font-size:.78rem; line-height:1.35; }
.wide-table { min-width:1500px; }
.narrow-form { max-width:760px; margin:0 auto; }
.classes-toolbar { flex-wrap:wrap; }
.inline-filters { display:flex; align-items:flex-end; gap:.55rem; flex-wrap:wrap; }
.inline-filters label { display:flex; flex-direction:column; gap:.25rem; color:var(--muted); font-size:.78rem; font-weight:700; }
.inline-filters select { min-width:105px; padding:.48rem .6rem; }
.inline-filters select.person-filter { min-width:220px; max-width:280px; }
.scheduled-table { min-width:1680px; }
.class-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.35rem; padding:1rem; border-radius:10px; background:#f6f8fc; border:1px solid #e2e8f2; }
.class-summary div { display:flex; flex-direction:column; gap:.25rem; }
.class-summary span { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:900px) { .class-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .inline-filters { align-items:stretch; flex-direction:column; } .inline-filters label, .inline-filters .button { width:100%; } .class-summary { grid-template-columns:1fr; } }
.button.danger { color:#fff; background:var(--danger); }
.button.danger:hover { background:#7f1d1d; }
.execution-grid { margin-bottom:1rem; }
.accounting-card { margin-top:1rem; }

.header-actions { display:flex; gap:.65rem; flex-wrap:wrap; justify-content:flex-end; }
.payment-summary { grid-template-columns:repeat(4,minmax(0,1fr)); }
.payment-table { min-width:1380px; }
.payment-balance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1rem 0 1.35rem; padding:1rem; border:1px solid var(--border); border-radius:10px; background:#f7f9fd; }
.payment-balance-grid div { display:flex; flex-direction:column; gap:.25rem; }
.payment-balance-grid span { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.payment-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:760px) { .header-actions, .payment-balance-grid, .payment-detail-grid { grid-template-columns:1fr; flex-direction:column; } .header-actions .button { width:100%; } }

/* Etapa 9: ERP y reportes */
.report-filter-card { margin-bottom:1.25rem; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:1rem; margin:1.25rem 0; }
.kpi-card { display:flex; flex-direction:column; gap:.35rem; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:0 5px 18px rgba(26,39,66,.04); }
.kpi-card span { color:var(--muted); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.kpi-card strong { font-size:1.45rem; color:#1d2d4d; }
.kpi-card small { color:#7a8497; line-height:1.35; }
.cash-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1rem 0 1.35rem; }
.cash-summary article { display:flex; flex-direction:column; gap:.3rem; padding:1rem 1.15rem; background:#f7f9fd; border:1px solid var(--border); border-radius:10px; }
.cash-summary span { color:var(--muted); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.cash-summary strong { font-size:1.25rem; }
.balance-summary { grid-template-columns:repeat(4,minmax(0,1fr)); }
.report-two-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.report-section-header { padding:1rem 1rem .25rem; }
.report-section-header h2 { margin:0 0 .25rem; font-size:1.05rem; }
.report-section-header p { margin:0; color:var(--muted); font-size:.86rem; }
.report-total-line { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85rem 1rem; margin:1rem 0; border:1px solid var(--border); background:#f7f9fd; border-radius:10px; color:#58667d; }
.report-total-line strong { color:#1d2d4d; }
.accounting-table { min-width:1450px; }
.amount-warning { color:var(--danger); }
@media (max-width:900px) { .report-two-columns { grid-template-columns:1fr; } .balance-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .cash-summary, .balance-summary { grid-template-columns:1fr; } .report-total-line { align-items:flex-start; flex-direction:column; } }


/* Etapa 9.1: mejora visual del Dashboard ERP */
.dashboard-filter-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}
.dashboard-filter-header {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.dashboard-filter-header h2 {
  margin:.15rem 0 .35rem;
  font-size:1.35rem;
  color:#1b2d4f;
}
.dashboard-filter-header p { margin:0; color:var(--muted); max-width:820px; }
.dashboard-filter-summary {
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1rem;
}
.filter-chip {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid #d9e3f4;
  background:#edf3ff;
  color:#24407f;
  font-size:.86rem;
  font-weight:700;
}
.filter-chip.muted-chip {
  background:#f6f8fc;
  color:#647189;
}
.dashboard-hero {
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:1rem;
  margin:1.25rem 0;
}
.hero-balance-card,
.hero-insights-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 8px 26px rgba(26,39,66,.06);
  padding:1.2rem 1.25rem;
}
.hero-balance-card {
  background: linear-gradient(135deg, #1f3f93 0%, #2953bc 100%);
  color:#fff;
  border-color:transparent;
}
.hero-balance-top {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
}
.hero-balance-card .eyebrow,
.hero-balance-card h2,
.hero-balance-card p,
.hero-balance-card span,
.hero-balance-card strong { color:#fff !important; }
.hero-balance-card h2 { margin:.15rem 0 .35rem; font-size:1.5rem; }
.hero-badge {
  display:inline-flex;
  align-items:center;
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
  white-space:nowrap;
}
.hero-badge.positive { background:rgba(255,255,255,.18); }
.hero-badge.negative { background:rgba(255,208,208,.18); }
.hero-amount {
  display:block;
  margin:.8rem 0 .25rem;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1;
}
.hero-caption {
  margin:0 0 1rem;
  opacity:.9;
}
.hero-balance-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem;
  margin-top:1rem;
}
.hero-balance-grid div {
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:.85rem .9rem;
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.hero-balance-grid span {
  font-size:.8rem;
  letter-spacing:.03em;
  opacity:.9;
}
.hero-balance-grid strong {
  font-size:1.15rem;
}
.hero-insights-card {
  display:grid;
  gap:1rem;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}
.hero-insight-block {
  padding: .2rem 0;
}
.hero-insight-block + .hero-insight-block {
  border-top:1px solid #edf1f6;
  padding-top:1rem;
}
.hero-insight-head {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
}
.hero-insight-head h3 {
  margin:0;
  font-size:1rem;
  color:#24334f;
}
.hero-insight-head strong {
  color:#21428c;
  font-size:1.05rem;
}
.hero-insight-block p {
  margin:.35rem 0 .55rem;
  color:#556178;
}
.meter {
  width:100%;
  height:10px;
  border-radius:999px;
  background:#e9eef8;
  overflow:hidden;
  position:relative;
}
.meter > span {
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #375bc1 0%, #6f8ff2 100%);
}
.meter.dual { display:flex; }
.meter.dual span { border-radius:0; }
.meter.dual span.ok { background:linear-gradient(90deg, #1f8b56 0%, #38b878 100%); }
.meter.dual span.warn { background:linear-gradient(90deg, #f1b940 0%, #e58b1d 100%); }
.meter.violet > span { background:linear-gradient(90deg, #6b4fe2 0%, #9279f1 100%); }
.hero-insight-block small { color:#6a778f; }
.kpi-section { margin:1.25rem 0; }
.section-title { margin-bottom:.75rem; }
.section-title h2 { margin:.15rem 0 0; font-size:1.3rem; }
.enhanced-kpis .kpi-card {
  position:relative;
  overflow:hidden;
  padding:1.05rem 1.1rem 1rem;
}
.enhanced-kpis .kpi-card::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:#d7e1f3;
}
.kpi-card.tone-success::before { background:#1f8b56; }
.kpi-card.tone-warning::before { background:#d6961f; }
.kpi-card.tone-info::before { background:#1a8ca3; }
.kpi-card.tone-primary::before { background:#2953bc; }
.kpi-card.tone-danger::before { background:#b14444; }
.kpi-card.tone-danger-soft::before { background:#c55d2a; }
.compact-kpis .kpi-card strong { font-size:1.35rem; }
.dashboard-links-card { margin-top:1.25rem; }
.quick-links-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.85rem;
  padding:0 1rem 1rem;
}
.quick-links-grid a {
  text-decoration:none;
  border:1px solid #dde5f3;
  background:#f8faff;
  color:#2a406d;
  border-radius:12px;
  padding:.9rem 1rem;
  font-weight:700;
  transition:all .18s ease;
}
.quick-links-grid a:hover {
  transform:translateY(-1px);
  border-color:#9eb3e0;
  background:#edf3ff;
  color:#16336f;
}
.dashboard-tables { margin-top:1.25rem; }
.report-two-columns.dashboard-tables .table-card { overflow:hidden; }
.report-two-columns.dashboard-tables table thead th { position:sticky; top:0; z-index:1; }
@media (max-width:1100px) {
  .dashboard-hero { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .dashboard-filter-summary { gap:.45rem; }
  .filter-chip { width:100%; justify-content:flex-start; }
  .hero-balance-grid { grid-template-columns:1fr; }
  .hero-balance-top,
  .hero-insight-head { flex-direction:column; align-items:flex-start; }
  .quick-links-grid { grid-template-columns:1fr; }
}

/* Etapa 10.8: reportes con formato inspirado en el sistema original */
.original-report-card { overflow:auto; }
.original-report-table { width:100%; border-collapse:collapse; min-width:900px; }
.original-report-table th { padding:.55rem .7rem; text-align:left; white-space:nowrap; }
.original-report-table td { padding:.5rem .7rem; vertical-align:top; }
.original-report-table .amount-col { text-align:right !important; white-space:nowrap; }
.original-report-table tbody tr.group-end > td { border-bottom:2px solid #737b86 !important; padding-bottom:.7rem; }
.original-report-table tbody tr.group-end + tr > td { padding-top:.7rem; }
.original-report-table .account-nature { display:inline-block; margin-top:.2rem; color:var(--muted); font-size:.86rem; white-space:nowrap; }
.original-report-table tfoot .report-grand-total td { border-top:3px solid #5f6875; font-weight:800; padding-top:.7rem; }
.original-report-title { text-align:center; font-size:1.15rem; font-weight:800; padding:.6rem .8rem; border-bottom:2px solid var(--border); }
.income-original-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; }
.compact-original-card { max-width:780px; }
.compact-original-card .original-report-table { min-width:0; }
.balance-original-card { max-width:1150px; }
.balance-original-table { min-width:760px; }
.pending-table, .advance-table { min-width:0; }
@media (max-width:1000px) { .income-original-grid { grid-template-columns:1fr; } }

/* Dashboard ERP — gráficos ejecutivos */
.dashboard-chart-section {
  margin-top: 1.35rem;
}
.dashboard-chart-title {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
}
.dashboard-chart-title p:not(.eyebrow) {
  margin:.35rem 0 0;
  color:var(--muted);
}
.dashboard-chart-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.15rem;
}
.dashboard-chart-card {
  min-width:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 7px 22px rgba(26,39,66,.05);
  overflow:hidden;
}
.dashboard-chart-header {
  padding:1rem 1.1rem .4rem;
}
.dashboard-chart-header h3 {
  margin:0 0 .25rem;
  color:#1d2d4d;
  font-size:1.08rem;
}
.dashboard-chart-header p {
  margin:0;
  color:var(--muted);
  font-size:.86rem;
}
.chart-canvas-wrap {
  position:relative;
  width:100%;
  height:350px;
  padding:.2rem .6rem .8rem;
}
.debt-chart-wrap {
  height:390px;
}
.chart-canvas-wrap canvas {
  display:block;
  width:100%;
  height:100%;
}
.chart-empty {
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  color:var(--muted);
  text-align:center;
}
@media (max-width:1100px) {
  .dashboard-chart-grid {
    grid-template-columns:1fr;
  }
}
@media (max-width:760px) {
  .chart-canvas-wrap {
    height:320px;
    padding:.15rem .25rem .65rem;
  }
  .debt-chart-wrap {
    height:430px;
  }
}

/* =========================================================
   PARCHE ETAPA 10.6 — BARRA SUPERIOR + PANTALLA PRINCIPAL
   Añadir AL FINAL del app.css actual.
   No elimina ni reemplaza estilos existentes.
   ========================================================= */

/* ---------- Barra superior compacta ---------- */
.compact-topbar {
  min-height: 74px;
  padding: .75rem 1.35rem;
  gap: 1rem;
  align-items: center;
}

.brand-company {
  min-width: 260px;
  max-width: 360px;
  gap: .8rem;
}

.brand-logo {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 52px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
}

.brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  line-height: 1.15;
}

.brand-copy strong {
  font-size: .98rem;
  color: #172033;
}

.brand-copy small {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.25;
}

.nav-toggle {
  display: none;
  border: 1px solid #cbd6e5;
  border-radius: 9px;
  background: #fff;
  color: #24344f;
  padding: .55rem .75rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.grouped-topnav {
  flex: 1;
  justify-content: center;
  gap: .35rem;
  min-width: 0;
}

.grouped-topnav .nav-home,
.nav-dropdown > summary {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: 40px;
  padding: .55rem .7rem;
  border-radius: 9px;
  color: #46556d;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.grouped-topnav .nav-home:hover,
.nav-dropdown > summary:hover,
.grouped-topnav .nav-home.active,
.nav-dropdown > summary.active {
  background: #edf2ff;
  color: var(--primary-dark);
}

.nav-dropdown {
  position: relative;
}

.nav-chevron {
  font-size: .9rem;
  line-height: 1;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  z-index: 60;
  width: 290px;
  padding: .45rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(26,39,66,.14);
}

.nav-dropdown-right .nav-dropdown-menu {
  left: auto;
  right: 0;
}

.nav-dropdown-menu a {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem .75rem;
  border-radius: 9px;
  text-decoration: none;
  color: #2a3850;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  background: #f1f5ff;
  color: var(--primary-dark);
}

.nav-dropdown-menu a strong {
  font-size: .9rem;
}

.nav-dropdown-menu a small {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.3;
}

.stage-badge {
  flex: 0 0 auto;
}

.compact-user-menu {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 165px;
  justify-content: flex-end;
}

.compact-user-menu > a:first-child {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  max-width: 170px;
  text-decoration: none;
}

.compact-user-menu strong {
  font-size: .84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-user-menu small {
  color: var(--muted);
  font-size: .72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-link {
  text-decoration: none;
  font-size: .84rem;
  font-weight: 700;
  color: #6b4150;
}

/* ---------- Hero / identidad de empresa ---------- */
.company-home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: .5rem 0 1.4rem;
  padding: 1.35rem 1.45rem;
  background: linear-gradient(135deg, #ffffff 0%, #f3f7ff 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 7px 22px rgba(26,39,66,.05);
}

.company-home-identity {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  min-width: 0;
}

.company-home-logo-wrap {
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  flex: 0 0 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e4eaf3;
}

.company-home-logo {
  width: 150px !important;
  height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  object-fit: contain !important;
  display: block !important;
}

.company-home-mark {
  width: 100px;
  height: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: var(--primary);
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
}

.company-home-identity h1 {
  margin: .2rem 0 .45rem;
  color: #172033;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.05;
}

.company-commercial-name {
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-weight: 800;
  color: #294a91;
}

.company-home-identity > div:last-child > p:not(.eyebrow):not(.company-commercial-name) {
  margin: .2rem 0;
  color: #5a667b;
}

.company-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}

.company-meta-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: #eef3ff;
  color: #3f5277;
  font-size: .8rem;
  font-weight: 700;
}

/* ---------- Secciones del inicio ---------- */
.home-dashboard-section,
.home-module-section {
  margin: 1.35rem 0;
}

.home-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}

.home-section-heading h2 {
  margin: .15rem 0 0;
  color: #1d2d4d;
  font-size: 1.35rem;
}

.academic-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .8rem;
}

.academic-kpi-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-height: 128px;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 5px 18px rgba(26,39,66,.04);
}

.academic-kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #d7e1f3;
}

.academic-kpi-card.tone-primary::before { background: #2953bc; }
.academic-kpi-card.tone-info::before { background: #1a8ca3; }
.academic-kpi-card.tone-success::before { background: #1f8b56; }
.academic-kpi-card.tone-warning::before { background: #d6961f; }
.academic-kpi-card.tone-danger-soft::before { background: #c55d2a; }

.academic-kpi-card span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.academic-kpi-card strong {
  margin-top: auto;
  color: #1d2d4d;
  font-size: 1.65rem;
}

.academic-kpi-card small {
  color: #7b8699;
  line-height: 1.3;
}

.finance-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}

.finance-overview-card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-height: 112px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 5px 18px rgba(26,39,66,.04);
  transition: transform .16s ease, border-color .16s ease;
}

.finance-overview-card:hover {
  transform: translateY(-1px);
  border-color: #9fb2df;
}

.finance-overview-card span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.finance-overview-card strong {
  color: #1d2d4d;
  font-size: 1.45rem;
}

.finance-overview-card small {
  color: #778398;
}

.home-dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
  gap: 1rem;
  align-items: start;
  margin: 1.35rem 0;
}

.home-agenda-card,
.home-actions-card {
  overflow: hidden;
}

.home-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.home-table-scroll {
  overflow-x: auto;
}

.home-agenda-table {
  min-width: 880px;
}

.schedule-time {
  white-space: nowrap;
  font-weight: 700;
  color: #263958;
}

.home-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: #eef1f5;
  color: #586374;
  font-size: .78rem;
  font-weight: 800;
}

.home-status.dada {
  background: #e8f7ef;
  color: #12663b;
}

.home-status.cancelada {
  background: #fdecec;
  color: #a32626;
}

.home-status.pendiente,
.home-status.programada {
  background: #fff4d8;
  color: #7a5700;
}

.home-quick-actions {
  display: grid;
  gap: .65rem;
  padding: .4rem 1rem 1rem;
}

.home-quick-actions a {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .72rem .8rem;
  text-decoration: none;
  border: 1px solid #dde5f3;
  background: #f8faff;
  border-radius: 10px;
  color: #2a406d;
}

.home-quick-actions a:hover {
  background: #edf3ff;
  border-color: #9eb3e0;
}

.home-quick-actions strong {
  font-size: .9rem;
}

.home-quick-actions small {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.3;
}

/* ---------- Módulos ---------- */
.home-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

.home-module-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(26,39,66,.04);
}

.module-number {
  color: #5c6c88;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.home-module-card h3 {
  margin: 0 0 .4rem;
  color: #1d2d4d;
  font-size: 1.08rem;
}

.home-module-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: .9rem;
}

.home-module-card a {
  margin-top: auto;
  align-self: flex-start;
  padding: .45rem .75rem;
  border-radius: 8px;
  background: #edf2ff;
  color: var(--primary-dark);
  font-weight: 800;
  text-decoration: none;
}

.system-health-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .65rem 1rem;
  margin-top: 1.35rem;
  padding: .8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  color: #68758a;
  font-size: .8rem;
}

.health-ok { color: var(--success); }
.health-error { color: var(--danger); }

/* ---------- Responsive ---------- */
@media (max-width: 1250px) {
  .academic-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-user-menu {
    min-width: auto;
  }

  .brand-company {
    min-width: 220px;
  }
}

@media (max-width: 1020px) {
  .compact-topbar {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
  }

  .grouped-topnav {
    order: 10;
    width: 100%;
    display: none;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: .35rem;
  }

  .grouped-topnav.open,
  .grouped-topnav.is-open {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: .65rem 0 .2rem;
  }

  .grouped-topnav .nav-home,
  .grouped-topnav .nav-dropdown,
  .grouped-topnav .nav-dropdown > summary {
    width: 100%;
  }

  .grouped-topnav .nav-home,
  .grouped-topnav .nav-dropdown > summary {
    justify-content: space-between;
    min-height: 46px;
    padding: .7rem .8rem;
    border: 1px solid #e1e7f0;
    border-radius: 10px;
    background: #fff;
  }

  .grouped-topnav .nav-dropdown-menu {
    position: static;
    width: 100%;
    margin-top: .35rem;
    box-shadow: none;
    border-radius: 10px;
  }

  .grouped-topnav .nav-dropdown-menu a {
    min-height: 48px;
    justify-content: center;
  }

  .home-dashboard-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .company-home-hero,
  .company-home-identity,
  .home-section-heading,
  .home-card-header {
    align-items: stretch;
    flex-direction: column;
  }

  .company-home-logo-wrap,
  .company-home-logo {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
  }

  .company-home-logo-wrap {
    flex-basis: 120px;
  }

  .academic-kpi-grid,
  .finance-overview-grid,
  .home-module-grid {
    grid-template-columns: 1fr;
  }

  .brand-company {
    min-width: 0;
    flex: 1;
  }

  .brand-copy small {
    display: block;
  }

  .compact-user-menu {
    width: 100%;
    justify-content: flex-start;
  }

  .system-health-strip {
    flex-direction: column;
  }
}

/* =========================================================
   CONFIGURACIÓN GENERAL + SERVIDOR Y RED
   Corrección visual compatible con Etapa 10.6
   ========================================================= */

/* Detecta las pantallas del módulo Configuración por su submenú. */
main.container:has(a[href="/configuracion/servidor"]) {
  --config-card-border: #dbe3ef;
  --config-soft-bg: #f7f9fd;
}

/* Evita que cualquier logo/preview de Configuración vuelva a ocupar la pantalla. */
main.container:has(a[href="/configuracion/servidor"]) img {
  width: auto !important;
  height: auto !important;
  max-width: 180px !important;
  max-height: 180px !important;
  object-fit: contain !important;
  display: block;
}

/* Variantes habituales de preview/logo utilizadas por Configuración. */
main.container:has(a[href="/configuracion/servidor"]) [class*="logo"] img,
main.container:has(a[href="/configuracion/servidor"]) img[class*="logo"],
main.container:has(a[href="/configuracion/servidor"]) [class*="branding"] img,
main.container:has(a[href="/configuracion/servidor"]) [class*="preview"] img {
  max-width: 180px !important;
  max-height: 180px !important;
  border-radius: 14px;
}

/* Contenedores de logos institucionales. */
main.container:has(a[href="/configuracion/servidor"]) [class*="logo-wrap"],
main.container:has(a[href="/configuracion/servidor"]) [class*="logo-preview"],
main.container:has(a[href="/configuracion/servidor"]) [class*="branding-preview"],
main.container:has(a[href="/configuracion/servidor"]) [class*="brand-preview"] {
  width: 200px !important;
  min-height: 160px;
  max-height: 210px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: .75rem;
  background: #fff;
  border: 1px solid var(--config-card-border);
  border-radius: 14px;
}

/* Configuración: tarjetas y bloques de formulario. */
main.container:has(a[href="/configuracion/servidor"]) .form-card,
main.container:has(a[href="/configuracion/servidor"]) [class*="config-card"],
main.container:has(a[href="/configuracion/servidor"]) [class*="configuration-card"],
main.container:has(a[href="/configuracion/servidor"]) [class*="settings-card"] {
  background: #fff;
  border: 1px solid var(--config-card-border);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(26,39,66,.05);
}

/* Si la configuración muestra dos previews/logos, mantenerlos proporcionados. */
main.container:has(a[href="/configuracion/servidor"]) [class*="logo-grid"],
main.container:has(a[href="/configuracion/servidor"]) [class*="branding-grid"],
main.container:has(a[href="/configuracion/servidor"]) [class*="identity-grid"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 220px)) !important;
  gap: 1rem;
  align-items: start;
}

/* =========================================================
   SERVIDOR Y RED
   ========================================================= */

/* Resúmenes superiores del servidor. */
main.container:has(a[href="/configuracion/servidor"]) [class*="server-summary"],
main.container:has(a[href="/configuracion/servidor"]) [class*="server-status"],
main.container:has(a[href="/configuracion/servidor"]) [class*="network-summary"],
main.container:has(a[href="/configuracion/servidor"]) [class*="runtime-summary"],
main.container:has(a[href="/configuracion/servidor"]) [class*="status-grid"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .85rem;
  margin: 1rem 0 1.25rem;
}

/* Tarjetas individuales de servidor/red. */
main.container:has(a[href="/configuracion/servidor"]) [class*="server-card"],
main.container:has(a[href="/configuracion/servidor"]) [class*="network-card"],
main.container:has(a[href="/configuracion/servidor"]) [class*="runtime-card"],
main.container:has(a[href="/configuracion/servidor"]) [class*="status-card"],
main.container:has(a[href="/configuracion/servidor"]) [class*="server-item"] {
  min-width: 0;
  padding: 1rem 1.05rem;
  background: #fff;
  border: 1px solid var(--config-card-border);
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(26,39,66,.04);
}

/* Etiquetas y valores del estado del servidor. */
main.container:has(a[href="/configuracion/servidor"]) [class*="server-card"] span,
main.container:has(a[href="/configuracion/servidor"]) [class*="status-card"] span,
main.container:has(a[href="/configuracion/servidor"]) [class*="server-item"] span {
  color: var(--muted);
  font-size: .78rem;
}

main.container:has(a[href="/configuracion/servidor"]) [class*="server-card"] strong,
main.container:has(a[href="/configuracion/servidor"]) [class*="status-card"] strong,
main.container:has(a[href="/configuracion/servidor"]) [class*="server-item"] strong {
  color: #1d2d4d;
  font-size: 1.05rem;
}

/* Bloques principales como Direcciones, Configuración de ejecución y Checklist. */
main.container:has(a[href="/configuracion/servidor"]) [class*="server-section"],
main.container:has(a[href="/configuracion/servidor"]) [class*="network-section"],
main.container:has(a[href="/configuracion/servidor"]) [class*="production-section"],
main.container:has(a[href="/configuracion/servidor"]) [class*="runtime-section"],
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist"] {
  margin: 1rem 0;
  padding: 1.35rem 1.5rem;
  background: #fff;
  border: 1px solid var(--config-card-border);
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(26,39,66,.04);
}

main.container:has(a[href="/configuracion/servidor"]) [class*="server-section"] h2,
main.container:has(a[href="/configuracion/servidor"]) [class*="network-section"] h2,
main.container:has(a[href="/configuracion/servidor"]) [class*="production-section"] h2,
main.container:has(a[href="/configuracion/servidor"]) [class*="runtime-section"] h2,
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist"] h2,
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist"] h3 {
  margin: 0 0 .35rem;
  color: #1d2d4d;
}

/* Direcciones LAN. */
main.container:has(a[href="/configuracion/servidor"]) [class*="address"],
main.container:has(a[href="/configuracion/servidor"]) [class*="network-url"],
main.container:has(a[href="/configuracion/servidor"]) [class*="access-url"] {
  overflow-wrap: anywhere;
}

main.container:has(a[href="/configuracion/servidor"]) code {
  display: inline-block;
  max-width: 100%;
  padding: .18rem .4rem;
  border-radius: 5px;
  background: #eef2f7;
  color: #15315f;
  overflow-wrap: anywhere;
  font-size: .9em;
}

/* Tablas/grillas de parámetros de ejecución. */
main.container:has(a[href="/configuracion/servidor"]) [class*="runtime-grid"],
main.container:has(a[href="/configuracion/servidor"]) [class*="server-grid"],
main.container:has(a[href="/configuracion/servidor"]) [class*="configuration-grid"] {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .75rem 1rem;
}

main.container:has(a[href="/configuracion/servidor"]) [class*="runtime-grid"] > div,
main.container:has(a[href="/configuracion/servidor"]) [class*="server-grid"] > div,
main.container:has(a[href="/configuracion/servidor"]) [class*="configuration-grid"] > div {
  padding: .75rem .85rem;
  background: var(--config-soft-bg);
  border: 1px solid #e4eaf3;
  border-radius: 9px;
}

/* Checklist: si el HTML utiliza una lista ordenada, mostrar pasos como tarjetas. */
main.container:has(a[href="/configuracion/servidor"]) ol {
  counter-reset: systiny-step;
  display: grid;
  gap: .75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

main.container:has(a[href="/configuracion/servidor"]) ol > li {
  counter-increment: systiny-step;
  position: relative;
  min-height: 58px;
  padding: .9rem 1rem .9rem 3.3rem;
  background: #f8faff;
  border: 1px solid #dfe6f1;
  border-radius: 10px;
  line-height: 1.45;
}

main.container:has(a[href="/configuracion/servidor"]) ol > li::before {
  content: counter(systiny-step);
  position: absolute;
  left: .85rem;
  top: .72rem;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8eefc;
  color: var(--primary-dark);
  font-weight: 800;
}

/* En algunos templates el checklist puede estar construido con divs. */
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist-item"],
main.container:has(a[href="/configuracion/servidor"]) [class*="production-step"] {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: .75rem;
  align-items: start;
  margin: .65rem 0;
  padding: .9rem 1rem;
  background: #f8faff;
  border: 1px solid #dfe6f1;
  border-radius: 10px;
}

/* Nota informativa azul y advertencia final roja. */
main.container:has(a[href="/configuracion/servidor"]) [class*="network-note"],
main.container:has(a[href="/configuracion/servidor"]) [class*="info-note"],
main.container:has(a[href="/configuracion/servidor"]) [class*="server-note"] {
  padding: .9rem 1rem;
  border: 1px solid #cbd8f1;
  border-radius: 10px;
  background: #f2f6ff;
  color: #354b78;
}

main.container:has(a[href="/configuracion/servidor"]) [class*="warning"],
main.container:has(a[href="/configuracion/servidor"]) [class*="danger-note"],
main.container:has(a[href="/configuracion/servidor"]) [class*="important-note"] {
  padding: .9rem 1rem;
  border: 1px solid #f0c4c4;
  border-radius: 10px;
  background: #fff0f0;
  color: #8d2222;
}

/* Fallback visual para bloques directos de servidor que no tengan una clase específica. */
main.container:has(a[href="/configuracion/servidor"]) > section {
  max-width: 100%;
}

main.container:has(a[href="/configuracion/servidor"]) p {
  line-height: 1.45;
}

/* =========================================================
   RESPONSIVE DE CONFIGURACIÓN
   ========================================================= */
@media (max-width: 1050px) {
  main.container:has(a[href="/configuracion/servidor"]) [class*="server-summary"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="server-status"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="network-summary"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="runtime-summary"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="status-grid"] {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  main.container:has(a[href="/configuracion/servidor"]) img {
    max-width: 140px !important;
    max-height: 140px !important;
  }

  main.container:has(a[href="/configuracion/servidor"]) [class*="logo-grid"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="branding-grid"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="identity-grid"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="server-summary"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="server-status"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="network-summary"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="runtime-summary"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="status-grid"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="runtime-grid"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="server-grid"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="configuration-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   SERVIDOR Y RED — CORRECCIÓN DEFINITIVA DEL CHECKLIST
   ========================================================= */

/* El checklist debe ser una sola columna, nunca dos. */
main.container:has(a[href="/configuracion/servidor"]) ol,
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist-grid"],
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist-list"],
main.container:has(a[href="/configuracion/servidor"]) [class*="production-checklist"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  gap: .8rem !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 1rem 0 0 !important;
  padding: 0 !important;
}

/* Cada paso ocupa todo el ancho disponible. */
main.container:has(a[href="/configuracion/servidor"]) ol > li,
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist-item"],
main.container:has(a[href="/configuracion/servidor"]) [class*="production-step"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: .95rem 1rem .95rem 3.7rem !important;
  position: relative !important;
  display: block !important;
  background: #f8faff !important;
  border: 1px solid #dfe6f1 !important;
  border-radius: 10px !important;
  line-height: 1.5 !important;
  overflow: visible !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Número del paso claramente separado a la izquierda. */
main.container:has(a[href="/configuracion/servidor"]) ol {
  counter-reset: systiny-step;
  list-style: none !important;
}

main.container:has(a[href="/configuracion/servidor"]) ol > li {
  counter-increment: systiny-step;
}

main.container:has(a[href="/configuracion/servidor"]) ol > li::before {
  content: counter(systiny-step) !important;
  position: absolute !important;
  left: 1rem !important;
  top: .85rem !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #e8eefc !important;
  color: var(--primary-dark) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* El contenido interno de cada paso no debe crear columnas estrechas. */
main.container:has(a[href="/configuracion/servidor"]) ol > li > *,
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist-item"] > *,
main.container:has(a[href="/configuracion/servidor"]) [class*="production-step"] > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Los nombres de scripts BAT se mantienen en una sola línea. */
main.container:has(a[href="/configuracion/servidor"]) ol code,
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist"] code,
main.container:has(a[href="/configuracion/servidor"]) [class*="production-step"] code {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  vertical-align: baseline !important;
}

/* Si el template usa una cuadrícula interna para el texto del paso, anularla. */
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist-item"],
main.container:has(a[href="/configuracion/servidor"]) [class*="production-step"] {
  grid-template-columns: 1fr !important;
}

/* Evita que cualquier regla global reduzca el ancho del contenido del checklist. */
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist"] p,
main.container:has(a[href="/configuracion/servidor"]) [class*="checklist"] div,
main.container:has(a[href="/configuracion/servidor"]) [class*="production-step"] p,
main.container:has(a[href="/configuracion/servidor"]) [class*="production-step"] div {
  width: auto !important;
  max-width: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* En pantallas pequeñas se permite scroll horizontal solo si un nombre técnico es largo. */
@media (max-width: 760px) {
  main.container:has(a[href="/configuracion/servidor"]) ol > li,
  main.container:has(a[href="/configuracion/servidor"]) [class*="checklist-item"],
  main.container:has(a[href="/configuracion/servidor"]) [class*="production-step"] {
    padding-left: 3.4rem !important;
  }

  main.container:has(a[href="/configuracion/servidor"]) ol code,
  main.container:has(a[href="/configuracion/servidor"]) [class*="checklist"] code {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}


/* =========================================================
   SEGURIDAD — ROLES, PERMISOS Y USUARIOS
   Restaura la distribución por módulos y alinea checkboxes.
   ========================================================= */

.security-form {
  max-width: 100%;
}

.security-form fieldset {
  margin-bottom: 1.6rem;
}

.security-form fieldset > legend {
  margin-bottom: 1rem;
}

/* Permisos separados visualmente por módulo. */
.permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.permission-module {
  min-width: 0;
  padding: 1rem 1.05rem;
  background: #f8faff;
  border: 1px solid #dfe6f1;
  border-radius: 12px;
}

.permission-module h3 {
  margin: 0 0 .8rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid #e1e7f0;
  color: #1d2d4d;
  font-size: 1rem;
}

/* Cada permiso queda como una fila compacta dentro de su módulo. */
.permission-choice {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  width: 100%;
  padding: .6rem 0;
  cursor: pointer;
}

.permission-choice + .permission-choice {
  border-top: 1px solid #e8edf5;
}

/* Anula el width:100% global de los inputs para checkboxes. */
.permission-choice input[type="checkbox"],
.toggle-row input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin: .15rem 0 0;
  padding: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.permission-choice > span {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  min-width: 0;
}

.permission-choice strong {
  color: #24344f;
  font-size: .9rem;
  line-height: 1.25;
}

.permission-choice small {
  display: block;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
}

/* Selector de roles en edición de usuarios. */
.role-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1rem;
}

.role-selector .permission-choice {
  padding: .8rem .85rem;
  border: 1px solid #dfe6f1;
  border-radius: 10px;
  background: #f8faff;
}

.role-selector .permission-choice + .permission-choice {
  border-top: 1px solid #dfe6f1;
}

/* Estado activo/inactivo. */
.toggle-row {
  display: inline-flex !important;
  align-items: center;
  gap: .65rem;
  width: auto;
  color: #34445f;
  font-weight: 700;
}

/* Pantallas grandes: 3 módulos por fila cuando haya espacio. */
@media (min-width: 1280px) {
  .permissions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet. */
@media (max-width: 900px) {
  .permissions-grid,
  .role-selector {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Etapa 10.6 — mejora visual de la pantalla Respaldos
   ========================================================= */
.backup-page {
  display: grid;
  gap: 1.2rem;
}

.backup-page-header {
  align-items: stretch;
  margin-bottom: 0;
}

.backup-header-copy {
  min-width: 0;
}

.backup-header-copy h1 {
  margin-bottom: .55rem;
}

.backup-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}

.backup-pill {
  display: inline-flex;
  align-items: center;
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid #d9e3f4;
  background: #edf3ff;
  color: #26427d;
  font-size: .84rem;
  font-weight: 700;
}

.backup-header-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  min-width: 280px;
  max-width: 320px;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 26px rgba(26,39,66,.05);
}

.backup-header-actions small {
  color: var(--muted);
  line-height: 1.35;
}

.backup-primary-button {
  width: 100%;
  min-height: 52px;
  font-size: 1rem;
}

.backup-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.backup-metric-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(26,39,66,.05);
  min-width: 0;
}

.backup-metric-highlight {
  background: linear-gradient(135deg, #1f3f93 0%, #2953bc 100%);
  color: #fff;
  border-color: transparent;
}

.backup-metric-highlight .backup-metric-label,
.backup-metric-highlight .backup-metric-value,
.backup-metric-highlight small {
  color: #fff;
}

.backup-metric-label {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.backup-metric-value {
  color: #1d2d4d;
  font-size: 1.2rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.backup-metric-card small {
  color: #66728a;
  line-height: 1.4;
}

.backup-path {
  font-size: 1.08rem;
}

.backup-guides-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.backup-guide-card {
  overflow: hidden;
}

.backup-guide-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: .7rem;
}

.backup-guide-body {
  padding: 0 1rem 1rem;
}

.backup-steps {
  margin: 0;
  padding-left: 1.2rem;
  color: #24334f;
}

.backup-steps li + li {
  margin-top: .7rem;
}

.backup-list-card {
  overflow: hidden;
}

.backup-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.backup-list-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.backup-list-counter {
  display: inline-flex;
  align-items: center;
  padding: .5rem .8rem;
  border-radius: 999px;
  background: #eef3ff;
  color: #26427d;
  font-size: .86rem;
  font-weight: 800;
  white-space: nowrap;
}

.backup-table {
  min-width: 980px;
}

.backup-table th {
  white-space: nowrap;
}

.backup-date-cell {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.backup-date-cell strong {
  color: #213252;
}

.backup-date-cell small {
  color: var(--muted);
}

.backup-kind {
  display: inline-flex;
  align-items: center;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: #f1f5fb;
  color: #31445f;
  font-size: .82rem;
  font-weight: 700;
}

.backup-hash {
  display: inline-block;
  font-size: .86rem;
}

.backup-security-note {
  margin-top: 0;
}

@media (max-width: 1200px) {
  .backup-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .backup-guides-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .backup-page-header {
    flex-direction: column;
  }

  .backup-header-actions {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .backup-overview-grid {
    grid-template-columns: 1fr;
  }

  .backup-guide-header,
  .backup-list-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .backup-list-summary {
    justify-content: flex-start;
  }
}

/* Portal docente: acceso a clase virtual y resultado operativo fijo */
.virtual-access-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.25rem;padding:1rem 1.15rem;border:1px solid #c7d8f2;border-radius:14px;background:#f7faff}.virtual-access-card>div{min-width:0;display:grid;gap:.25rem}.virtual-access-card small{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:#526b95}.virtual-access-card strong{color:#153667}.virtual-link-text{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2857b7;font-weight:700}.virtual-open-button{flex:0 0 auto}.result-choice.operational-fixed{background:#f0f7ff;border-color:#9ebeea}.result-choice input:disabled+span{opacity:.58}
@media(max-width:760px){.virtual-access-card{align-items:stretch;flex-direction:column}.virtual-link-text{white-space:normal;overflow-wrap:anywhere}.virtual-open-button{width:100%;text-align:center;justify-content:center}}


/* Fix menú móvil V5: mostrar siempre las opciones de los desplegables cuando el menú está abierto. */
@media (max-width: 1020px) {
  .grouped-topnav.open .nav-dropdown-menu a,
  .grouped-topnav.is-open .nav-dropdown-menu a {
    display: flex;
  }

  .grouped-topnav .nav-dropdown[open] > .nav-dropdown-menu {
    display: block;
  }
}

/* Fix menú móvil V6: permitir desplazamiento vertical del menú completo en celular/tablet. */
@media (max-width: 1020px) {
  .grouped-topnav.open,
  .grouped-topnav.is-open {
    /* El encabezado permanece visible, pero el menú tiene su propio scroll. */
    max-height: calc(100dvh - 250px);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: .15rem;
    scrollbar-gutter: stable;
  }

  .grouped-topnav .nav-dropdown[open] > .nav-dropdown-menu {
    max-height: none;
    overflow: visible;
  }

  /* Evita que un contenedor de dropdown corte las últimas opciones. */
  .grouped-topnav .nav-dropdown,
  .grouped-topnav .nav-dropdown-menu {
    overflow: visible;
  }

  /* Un pequeño espacio final permite alcanzar cómodamente la última opción. */
  .grouped-topnav.open::after,
  .grouped-topnav.is-open::after {
    content: "";
    display: block;
    height: .75rem;
  }
}

@media (max-width: 600px) {
  .grouped-topnav.open,
  .grouped-topnav.is-open {
    max-height: calc(100dvh - 275px);
  }
}