:root{
    --ink:#12161D;
    --panel:#1B2029;
    --panel-alt:#212734;
    --line:#2C3342;
    --text:#EDEAE1;
    --text-dim:#93A0AE;
    --text-faint:#5C6472;
    --brass:#C9A24E;
    --brass-bright:#E3C979;
    --teal:#4C8C93;
    --teal-bright:#6BAAB1;
    --coral:#BD5B45;
    --coral-bright:#D67A63;
    --sage:#6E9C7D;
    --sage-bright:#8FBE9E;
    --rosa:#C9688E;
    --rosa-bright:#E0A0BC;
    --radius:10px;
    --shadow: 0 8px 24px rgba(0,0,0,0.35);
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--ink);
    color:var(--text);
    font-family:'IBM Plex Sans', sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; margin:0; letter-spacing:0.2px; }
  .mono{ font-family:'IBM Plex Mono', monospace; }
  a{ color:inherit; }
  button{ font-family:inherit; cursor:pointer; }
  ::selection{ background:var(--brass); color:#1B1B1B; }
  :focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px; }

  /* ---------- Staff-line signature motif ---------- */
  .staff{
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 7px,
      rgba(201,162,78,0.22) 7px, rgba(201,162,78,0.22) 8px,
      transparent 8px, transparent 15px
    );
    background-repeat:no-repeat;
    background-position: 0 22px;
    background-size: 100% 40px;
  }

  /* ---------- Topbar ---------- */
  .topbar{
    position:sticky; top:0; z-index:20;
    background:linear-gradient(180deg, #171B23 0%, #12161D 100%);
    border-bottom:1px solid var(--line);
    padding:18px 28px 0 28px;
  }
  .topbar-inner{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding-bottom:16px; flex-wrap:wrap;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{ height:56px; width:auto; flex-shrink:0; display:block; }
  .brand-text .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--brass); margin-bottom:2px; }
  .brand-text h1{ font-size:22px; color:var(--text); }
  .btn-primary{
    background:var(--brass); color:#20180A; border:none; border-radius:8px;
    padding:10px 18px; font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:8px;
    transition:background .15s ease, transform .15s ease;
  }
  .btn-primary:hover{ background:var(--brass-bright); }
  .btn-primary:active{ transform:scale(0.98); }
  .tabs{ display:flex; gap:4px; }
  .tab-btn{
    background:none; border:none; color:var(--text-dim); font-size:14px; font-weight:500;
    padding:10px 4px; margin-right:22px; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;
  }
  .tab-btn:hover{ color:var(--text); }
  .tab-btn.active{ color:var(--brass-bright); border-bottom-color:var(--brass); }

  main{ max-width:1180px; margin:0 auto; padding:32px 28px 80px 28px; }
  main.view-ancho-completo{ max-width:none; padding-left:16px; padding-right:16px; }
  .section-head{ margin-bottom:20px; }
  .section-head .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
  .section-head h2{ font-size:26px; }
  .section-head p{ color:var(--text-dim); margin-top:6px; font-size:14px; max-width:560px; }

  /* ---------- Dashboard ---------- */
  .hero-row{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:14px; margin-bottom:28px; }
  .stat-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px; position:relative; overflow:hidden; container-type:inline-size;
  }
  .stat-card.hero{ background:linear-gradient(135deg, #232A38 0%, #1B2029 100%); }
  .stat-card .label{ font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:8px; }
  .maestro-mes-card{
    display:flex; align-items:center; gap:16px; padding:18px 20px; margin-bottom:20px;
    background:linear-gradient(135deg, rgba(201,162,78,0.16), rgba(201,162,78,0.03));
    border:1px solid var(--brass); border-radius:var(--radius);
  }
  .maestro-mes-card .trofeo{ font-size:32px; flex-shrink:0; }
  .maestro-mes-card .eyebrow-mini{ font-size:11px; text-transform:uppercase; letter-spacing:0.8px; color:var(--brass-bright); font-weight:600; margin-bottom:2px; }
  .maestro-mes-card .nombre{ font-family:'Fraunces',serif; font-size:20px; font-weight:600; color:var(--text); }
  .maestro-mes-card .detalle{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
  .cumple-semana-card{
    display:flex; align-items:flex-start; gap:16px; padding:18px 20px; margin-bottom:20px;
    background:linear-gradient(135deg, rgba(201,104,142,0.16), rgba(201,104,142,0.03));
    border:1px solid var(--rosa); border-radius:var(--radius);
  }
  .cumple-semana-card .pastel{ font-size:32px; flex-shrink:0; }
  .cumple-semana-card .eyebrow-mini{ font-size:11px; text-transform:uppercase; letter-spacing:0.8px; color:var(--rosa-bright); font-weight:600; margin-bottom:8px; }
  .cumple-semana-card .cumple-fila{ border-bottom-color:rgba(201,104,142,0.2); }
  .cumple-semana-card .cumple-dia-nombre{ font-family:'IBM Plex Mono',monospace; color:var(--rosa-bright); flex-shrink:0; font-size:12px; width:78px; }
  .cumple-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
  .cumple-mes-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
  .cumple-mes-card.mes-actual{ border-color:var(--brass); background:linear-gradient(135deg, rgba(201,162,78,0.08), transparent); }
  .cumple-mes-card h3{ margin:0 0 12px; font-family:'Fraunces',serif; font-size:16px; display:flex; align-items:center; gap:6px; }
  .cumple-mes-card .badge-mes-actual{ font-size:10px; text-transform:uppercase; letter-spacing:0.5px; background:var(--brass); color:#1a1712; padding:2px 7px; border-radius:20px; font-weight:700; }
  .cumple-fila{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .cumple-fila:last-child{ border-bottom:none; }
  .cumple-dia{ font-family:'IBM Plex Mono',monospace; color:var(--text-dim); flex-shrink:0; width:28px; }
  .cumple-nombre{ flex:1; }
  .cumple-tag{ font-size:10px; text-transform:uppercase; letter-spacing:0.4px; padding:2px 7px; border-radius:20px; flex-shrink:0; }
  .cumple-tag-alumno{ background:rgba(0,186,205,0.15); color:var(--teal-bright); }
  .cumple-tag-maestro{ background:rgba(110,156,125,0.18); color:var(--sage-bright); }
  .cumple-tag-personal{ background:rgba(201,162,78,0.18); color:var(--brass-bright); }
  .rol-switcher{ display:flex; align-items:center; gap:6px; position:relative; }
  .rol-switcher select{
    background:var(--panel-alt); border:1px solid var(--line); color:var(--text); border-radius:8px;
    padding:6px 10px; font-size:12px; font-family:inherit;
  }
  .user-menu-trigger{
    display:flex; align-items:center; gap:5px; background:none; border:1px solid transparent; border-radius:8px;
    padding:5px 9px; font-size:12.5px; color:var(--text); cursor:pointer; font-family:inherit;
  }
  .user-menu-trigger:hover{ border-color:var(--line); background:var(--panel-alt); }
  .user-menu-trigger .caret{ font-size:9px; color:var(--text-faint); }
  .user-menu-dropdown{
    position:absolute; top:calc(100% + 6px); right:0; min-width:150px; z-index:50;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:6px; display:none;
  }
  .user-menu-dropdown.abierto{ display:block; }
  .user-menu-dropdown button{
    display:block; width:100%; text-align:left; background:none; border:none; color:var(--text);
    font-size:12.5px; padding:8px 10px; border-radius:6px; cursor:pointer; font-family:inherit;
  }
  .user-menu-dropdown button:hover{ background:var(--panel-alt); }
  .bienvenida-overlay{
    position:fixed; inset:0; background:var(--ink); z-index:9999;
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  .bienvenida-caja{ max-width:520px; width:100%; text-align:center; }
  .bienvenida-caja img{ width:112px; height:112px; border-radius:20px; margin-bottom:20px; }
  .bienvenida-caja h2{ font-family:'Fraunces',serif; font-size:24px; margin:0 0 6px; }
  .bienvenida-caja p{ color:var(--text-dim); font-size:13.5px; margin:0 0 24px; }
  .bienvenida-lista{ display:flex; flex-direction:column; gap:10px; text-align:left; }
  .bienvenida-item{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 18px; cursor:pointer; transition:border-color 0.12s, background 0.12s;
  }
  .bienvenida-item:hover{ border-color:var(--brass); background:var(--panel-alt); }
  .bienvenida-item .nombre{ font-weight:600; font-size:14.5px; }
  .bienvenida-item .rol{ font-size:11px; color:var(--text-dim); margin-top:2px; }
  .bienvenida-item .flecha{ color:var(--text-faint); font-size:18px; }
  .bienvenida-nota{ margin-top:20px; font-size:11px; color:var(--text-faint); }
  .password-wrap{ position:relative; display:flex; align-items:center; }
  .password-wrap input{ width:100%; padding-right:40px; }
  .password-toggle{
    position:absolute; right:6px; background:none; border:none; color:var(--text-faint);
    cursor:pointer; font-size:16px; padding:4px 6px; line-height:1;
  }
  .password-toggle:hover{ color:var(--text); }
  .info-tip{
    display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%;
    background:var(--panel-alt); border:1px solid var(--line); color:var(--text-faint); font-size:10px; font-weight:700;
    font-family:'Work Sans', sans-serif; text-transform:none; letter-spacing:0; cursor:help; margin-left:5px; vertical-align:middle;
  }
  .info-tip:hover{ background:var(--brass); color:#1a1712; border-color:var(--brass); }
  .chart-card h3 .info-tip{ margin-left:6px; }
  .stat-card .value{ font-family:'IBM Plex Mono', monospace; font-size:clamp(18px, 11cqw, 34px); font-weight:600; color:var(--text); line-height:1.15; word-break:break-word; }
  .stat-card.hero .value{ color:var(--brass-bright); font-size:clamp(20px, 13cqw, 44px); }
  .stat-card .sub{ font-size:12.5px; color:var(--text-faint); margin-top:8px; }
  .stat-card .sub strong{ color:var(--sage-bright); }

  .charts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .chart-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px;
  }
  .chart-card h3{ font-size:15px; color:var(--text); margin-bottom:2px; }
  .chart-card .chart-note{ font-size:12px; color:var(--text-faint); margin-bottom:14px; }
  .bar-row{ display:grid; grid-template-columns: 128px 1fr 34px; align-items:center; gap:10px; margin-bottom:9px; }
  .bar-row-dinero{ grid-template-columns: 128px 1fr 92px; }
  .bar-row-dinero .bar-count{ text-align:right; font-variant-numeric:tabular-nums; }
  .bar-row .bar-label{ font-size:12.5px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bar-track{ background:var(--panel-alt); border-radius:5px; height:9px; overflow:hidden; }
  .bar-fill{ height:100%; border-radius:5px; transition:width .4s ease; }
  .bar-row .bar-count{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--text-dim); text-align:right; }
  .empty-note{ font-size:13px; color:var(--text-faint); font-style:italic; padding:8px 0; }
  .oculto{ display:none !important; }
  .error-banner{ background:rgba(189,91,69,0.16); border:1px solid var(--coral); color:var(--coral-bright); padding:12px 20px; font-size:13.5px; line-height:1.5; }
  .color-picker-grid{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; }
  .color-picker-item{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); cursor:pointer; }
  .color-picker-item input[type="color"]{ width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:6px; cursor:pointer; background:none; }
  .nomina-grupo{ margin-bottom:18px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .nomina-grupo-head{ display:flex; justify-content:space-between; align-items:center; background:var(--panel-alt); padding:10px 14px; font-weight:600; font-size:13.5px; border-bottom:1px solid var(--line); }

  /* ---------- Alumnos tab ---------- */
  .filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
  .filters input, .filters select{
    background:var(--panel); border:1px solid var(--line); color:var(--text);
    padding:9px 12px; border-radius:7px; font-size:13.5px; font-family:inherit;
  }
  .filters input::placeholder{ color:var(--text-faint); }
  .filters input[type="text"]{ min-width:220px; flex:1; }
  .table-wrap{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto;
  }
  table{ width:100%; border-collapse:collapse; }
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-faint);
    padding:12px 14px; border-bottom:1px solid var(--line); background:var(--panel-alt); font-weight:500;
  }
  tbody td{ padding:12px 14px; font-size:13.5px; border-bottom:1px solid var(--line); color:var(--text); vertical-align:middle; }
  .celda-con-boton{ display:flex; align-items:center; gap:4px; }
  .celda-con-boton input{ flex:1; min-width:0; }
  .btn-ampliar-texto{
    flex-shrink:0; background:none; border:none; color:var(--text-faint); cursor:pointer;
    font-size:14px; padding:2px 4px; border-radius:5px; line-height:1;
  }
  .btn-ampliar-texto:hover{ color:var(--brass-bright); background:var(--panel-alt); }
  .desglose-wrap{
    background:var(--panel-alt); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px; margin-bottom:10px;
  }
  .desglose-encabezados{
    display:grid; grid-template-columns:1.5fr 1fr 0.8fr 28px; gap:8px;
    font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.4px;
    padding:0 2px 8px; border-bottom:1px solid var(--line); margin-bottom:10px;
  }
  .desglose-fila{
    display:grid; grid-template-columns:1.5fr 1fr 0.8fr 28px; gap:8px; align-items:center;
    margin-bottom:8px;
  }
  .desglose-fila:last-child{ margin-bottom:0; }
  .desglose-fila .icon-btn{ justify-self:center; }
  .desglose-total{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);
    font-size:13px;
  }
  .desglose-total .monto{ font-size:19px; font-weight:600; color:var(--brass-bright); font-family:'IBM Plex Mono', monospace; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:rgba(255,255,255,0.02); }
  .tabla-compacta thead th{ padding:8px 7px; font-size:10px; }
  .tabla-compacta tbody td{ padding:5px 7px; font-size:12.5px; }
  .tabla-compacta input[type="date"]{ width:118px; padding:5px 4px; font-size:11.5px; }
  .name-cell strong{ display:block; font-size:14px; }
  .name-cell span{ display:block; font-size:11.5px; color:var(--text-faint); margin-top:2px; }
  .badge{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:0.3px; }
  .badge-activo{ background:rgba(110,156,125,0.18); color:var(--sage-bright); }
  .badge-pausado{ background:rgba(201,162,78,0.18); color:var(--brass-bright); }
  .badge-baja{ background:rgba(189,91,69,0.18); color:var(--coral-bright); }
  .dim{ color:var(--text-faint); }
  .row-actions{ display:flex; gap:6px; }
  .icon-btn{
    background:var(--panel-alt); border:1px solid var(--line); color:var(--text-dim);
    width:30px; height:30px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
    transition:border-color .15s ease, color .15s ease;
  }
  .icon-btn:hover{ color:var(--text); border-color:var(--brass); }
  .icon-btn.danger:hover{ color:var(--coral-bright); border-color:var(--coral); }
  .table-empty{ padding:40px 20px; text-align:center; color:var(--text-faint); font-size:14px; }

  /* ---------- Modal ---------- */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(10,12,16,0.72); display:flex; align-items:flex-start; justify-content:center;
    padding:40px 16px; overflow-y:auto; z-index:50;
  }
  .modal{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; width:100%; max-width:560px;
    box-shadow:var(--shadow); animation:pop .15s ease;
  }
  @keyframes pop{ from{ opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line); }
  .modal-head h3{ font-size:18px; }
  .modal-close{ background:none; border:none; color:var(--text-dim); font-size:20px; line-height:1; padding:4px; }
  .modal-close:hover{ color:var(--text); }
  .modal-body{ padding:22px 24px; max-height:70vh; overflow-y:auto; }
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .form-field{ display:flex; flex-direction:column; gap:5px; }
  .form-field.full{ grid-column:1 / -1; }
  .form-field label{ font-size:12px; color:var(--text-dim); font-weight:500; }
  .form-field input, .form-field select, .form-field textarea{
    background:var(--panel-alt); border:1px solid var(--line); color:var(--text); border-radius:7px;
    padding:9px 11px; font-size:13.5px; font-family:inherit;
  }
  .form-field textarea{ resize:vertical; min-height:60px; }
  .modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:18px 24px; border-top:1px solid var(--line); }
  .btn-secondary{
    background:none; border:1px solid var(--line); color:var(--text-dim); border-radius:8px; padding:10px 16px; font-size:13.5px;
  }
  .btn-secondary:hover{ color:var(--text); border-color:var(--text-faint); }
  .btn-secondary:disabled{ opacity:0.35; cursor:not-allowed; }
  .btn-secondary:disabled:hover{ color:var(--text-dim); border-color:var(--line); }
  .btn-danger{ background:var(--coral); color:#2A130D; border:none; border-radius:8px; padding:10px 16px; font-size:13.5px; font-weight:600; }
  .btn-danger:hover{ background:var(--coral-bright); }

  /* ---------- Tendencia mensual ---------- */
  .trend-legend{ display:flex; gap:18px; margin-bottom:16px; }
  .trend-legend-item{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dim); }
  .trend-legend-dot{ width:9px; height:9px; border-radius:2px; display:inline-block; }
  .trend-chart-wrap{ overflow-x:auto; padding-bottom:6px; }
  .trend-chart{ display:flex; align-items:flex-end; gap:16px; height:190px; min-width:min-content; padding:0 4px; }
  .trend-month{ display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:46px; }
  .trend-bars{ display:flex; align-items:flex-end; gap:4px; height:150px; }
  .trend-bar-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
  .trend-value{ font-size:10px; color:var(--text-faint); margin-bottom:4px; font-family:'IBM Plex Mono', monospace; }
  .trend-bar{ width:15px; border-radius:3px 3px 0 0; min-height:2px; transition:height .3s ease; }
  .trend-bar.altas{ background:var(--sage-bright); }
  .trend-bar.bajas{ background:var(--coral-bright); }
  .trend-label{ font-size:10.5px; color:var(--text-faint); margin-top:8px; white-space:nowrap; }
  .trend-summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }

  /* ---------- Clases (multi-instrumento por alumno) ---------- */
  .clase-row{ background:var(--panel-alt); border:1px solid var(--line); border-radius:8px; padding:14px; margin-bottom:12px; }
  .clase-row-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .clase-row-title{ font-size:12px; font-weight:600; color:var(--brass-bright); text-transform:uppercase; letter-spacing:0.6px; }
  .clases-section-label{ font-size:12px; color:var(--text-dim); font-weight:500; margin:4px 0 10px 0; }
  .chip-list{ display:flex; flex-wrap:wrap; gap:5px; }
  .chip{ display:inline-block; background:var(--panel-alt); border:1px solid var(--line); border-radius:14px; padding:2px 10px; font-size:11.5px; color:var(--text-dim); margin:0 4px 4px 0; }

  /* ---------- Maestros tab ---------- */
  .leaderboard-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
  .leaderboard-card .maestro-name{ font-family:'Fraunces', serif; font-size:19px; color:var(--text); margin-top:6px; }
  .leaderboard-card .maestro-sub{ font-size:12px; color:var(--text-faint); margin-top:4px; }
  .checkbox-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; background:var(--panel-alt); border:1px solid var(--line); border-radius:8px; padding:12px; max-height:180px; overflow-y:auto; }
  .checkbox-item{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-dim); }
  .checkbox-item input{ width:auto; }
  .disp-table td{ padding:8px 10px; }
  .disp-table select, .disp-table input[type="time"]{
    background:var(--panel-alt); border:1px solid var(--line); color:var(--text); border-radius:6px;
    padding:7px 8px; font-size:13px; font-family:inherit; width:100%; min-width:100px;
  }
  .disp-grid-wrap{ border:1px solid var(--line); border-radius:8px; }
  .disp-grid-table{ width:100%; border-collapse:collapse; }
  .disp-grid-table thead th{ position:sticky; top:0; background:var(--panel-alt); z-index:1; font-size:11.5px; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-faint); font-weight:500; padding:8px 6px; text-align:center; border-bottom:1px solid var(--line); }
  .disp-grid-table thead th:first-child{ text-align:left; padding-left:10px; }
  .disp-grid-table td{ padding:5px 6px; border-bottom:1px solid var(--line); }
  .disp-grid-table tr:last-child td{ border-bottom:none; }
  .disp-grid-hora{ font-size:12px; color:var(--text-dim); white-space:nowrap; padding-left:10px !important; }
  .disp-grid-table tr:hover td{ background:var(--panel-alt); }
  .disp-check{ width:16px; height:16px; accent-color:var(--sage-bright); cursor:pointer; }
  .disp-grid-cerrado{ color:var(--text-faint); opacity:0.4; user-select:none; }

  .semana-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; font-size:12px; color:var(--text-dim); }
  .semana-legend-item{ display:flex; align-items:center; gap:6px; }
  .semana-legend-dot{ width:11px; height:11px; border-radius:3px; display:inline-block; }

  /* Estructura: el eje de horas queda FIJO a la izquierda, y el encabezado de días FIJO arriba
     (position:sticky). El calendario mantiene un tamaño de letra/bloque cómodo y legible (fijo, no se
     comprime) — en vez de eso, el CONTENEDOR (.semana-viewport) se hace casi del alto completo de la
     pantalla (calculado por JS), y solo si el horario del día es tan largo que ni así cabe, aparece scroll
     vertical DENTRO del propio calendario (nunca alarga la página completa) — igual que en TutorBird,
     que también tiene su propia barra de scroll interna cuando hace falta. El ancho de los 7 días sí se
     reparte por proporción para que siempre quepan los 7 sin necesitar scroll horizontal. */
  .semana-viewport{ overflow-y:auto; overflow-x:hidden; border:1px solid var(--line); border-radius:8px; margin-top:4px; }
  .semana-shell{ display:flex; }
  .semana-eje-fijo{ flex-shrink:0; width:44px; border-right:1px solid var(--line); position:sticky; left:0; z-index:3; background:var(--panel); }
  .semana-eje-corner{ height:29px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:4; background:var(--panel); }
  .semana-eje{ position:relative; }
  .semana-hora-mark{ position:absolute; left:0; right:4px; text-align:right; transform:translateY(-6px); font-size:9.5px; color:var(--text-faint); font-family:'IBM Plex Mono', monospace; }
  .semana-hora-mark-menor{ font-size:8px; opacity:0.5; }
  .semana-scroll-x{ flex:1; overflow:hidden; min-width:0; }
  .semana-dias-header{ display:flex; border-bottom:1px solid var(--line); width:100%; position:sticky; top:0; z-index:2; background:var(--panel); }
  .semana-dia-titulo{ flex:1; min-width:0; text-align:center; font-size:10.5px; text-transform:uppercase; letter-spacing:0.3px; color:var(--text-faint); font-weight:600; padding:5px 2px; border-radius:6px 6px 0 0; box-sizing:border-box; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .semana-dia-titulo-cerrado{ color:var(--text-faint); opacity:0.6; writing-mode:vertical-rl; }
  .semana-dia-titulo-hoy{ color:var(--brass-bright); background:rgba(201,162,78,0.10); }
  .semana-dia-numero{ display:inline-block; }
  .semana-dia-numero-hoy{
    display:inline-flex; align-items:center; justify-content:center;
    width:17px; height:17px; border-radius:50%; background:var(--brass-bright);
    color:var(--ink); font-weight:700; margin-left:2px;
  }
  .semana-cols{ display:flex; position:relative; width:100%; }
  .semana-col{ flex:1; min-width:0; position:relative; border-right:1px solid var(--line); box-sizing:border-box; }
  .semana-col:last-child{ border-right:none; }
  .semana-col-hoy{ background:rgba(201,162,78,0.045); }
  .semana-col-cerrada{
    display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl;
    color:var(--text-faint); font-size:9.5px; letter-spacing:0.5px;
    background:repeating-linear-gradient(135deg, var(--panel-alt), var(--panel-alt) 8px, transparent 8px, transparent 16px);
  }
  .semana-linea-guia{ position:absolute; left:0; right:0; border-top:1px dashed var(--line); pointer-events:none; }
  .semana-linea-guia-menor{ border-top-color:rgba(255,255,255,0.03); }
  .semana-bloque{ position:absolute; border-radius:5px; padding:2px 5px; overflow:hidden; box-sizing:border-box; font-size:10.5px; line-height:1.15; color:var(--text); transition:filter 0.1s, box-shadow 0.1s; }
  .semana-bloque:hover{ filter:brightness(1.08); box-shadow:0 0 0 2px var(--brass) inset; }
  .semana-bloque-cancelada{ text-decoration:line-through; opacity:0.45; }
  .semana-resize-handle{ position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize; }
  .semana-resize-handle:hover{ background:rgba(255,255,255,0.25); }
  .semana-bloque-arrastrando{ opacity:0.75; box-shadow:0 4px 14px rgba(0,0,0,0.35); z-index:5; cursor:grabbing !important; }
  .semana-col-destino{ background:rgba(201,162,78,0.10); }
  .semana-bloque-hora{ font-family:'IBM Plex Mono', monospace; font-size:9.5px; color:var(--text-faint); margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .semana-bloque-alumno{ font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .semana-bloque-maestro{ color:var(--text-dim); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
  .semana-bloque-cubre{ color:var(--sage-bright); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .mes-nav{ display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
  .mes-nav-titulo{ font-size:17px; font-weight:600; flex:1; text-align:center; min-width:140px; }
  .mes-dias-header{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; margin-bottom:6px; }
  .mes-dias-header div{ text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-faint); font-weight:600; }
  .mes-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
  .mes-celda{ min-height:96px; border:1px solid var(--line); border-radius:7px; padding:6px; display:flex; flex-direction:column; gap:4px; background:var(--panel-alt); }
  .mes-celda-vacia{ background:transparent; border:none; }
  .mes-celda-hoy{ border-color:var(--brass); box-shadow:0 0 0 1px var(--brass) inset; }
  .mes-celda-num{ font-size:11.5px; color:var(--text-dim); font-weight:600; cursor:pointer; align-self:flex-start; padding:1px 5px; border-radius:4px; }
  .mes-celda-num:hover{ background:var(--brass); color:#1a1712; }
  .mes-celda-chips{ display:flex; flex-direction:column; gap:3px; overflow-y:auto; max-height:120px; }
  .mes-chip{ font-size:9.5px; line-height:1.3; padding:2px 5px; border-radius:4px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:filter 0.1s; }
  .mes-chip:hover{ filter:brightness(1.1); }
  .mes-chip-cancelada{ text-decoration:line-through; opacity:0.5; }
  .calendario-toggle{ display:flex; gap:6px; flex-shrink:0; }
  .btn-toggle-activo{ background:var(--brass); color:#1a1712; border-color:var(--brass); }
  .detalle-acciones-fila{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:2px; }
  .detalle-chip{ background:var(--panel-alt); border:1px solid var(--line); color:var(--text-dim); border-radius:20px; padding:6px 13px; font-size:12.5px; cursor:pointer; transition:background 0.12s, color 0.12s; }
  .detalle-chip:hover{ background:var(--panel); color:var(--text); }
  .detalle-chip-activo{ background:var(--brass); color:#1a1712; border-color:var(--brass); }
  .detalle-panel{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; animation:detalle-panel-in 0.15s ease-out; }
  .detalle-info-card{ background:var(--panel-alt); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
  .detalle-info-fecha{ font-size:11.5px; text-transform:capitalize; color:var(--text-faint); margin-bottom:4px; }
  .detalle-info-alumno{ font-size:17px; font-weight:700; color:var(--text); margin-bottom:10px; }
  .detalle-info-filas{ display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--text-dim); }
  .detalle-info-label{ display:inline-block; min-width:78px; color:var(--text-faint); font-size:11px; text-transform:uppercase; letter-spacing:0.4px; }
  .detalle-info-aviso{ font-size:12.5px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
  .detalle-chip-asistencia{ width:100%; margin-top:14px; background:rgba(110,156,125,0.16); border:1px solid var(--sage-bright); color:var(--sage-bright); border-radius:9px; padding:10px 14px; font-size:13.5px; font-weight:600; cursor:pointer; text-align:center; transition:background 0.12s; }
  .detalle-chip-asistencia:hover{ background:rgba(110,156,125,0.28); }
  .detalle-chip-asistencia-activo{ background:var(--sage-bright); color:#12241a; }

  /* ---------- Pagos ---------- */
  .pago-row-pagado td{ background:rgba(110,156,125,0.07); }
  .pago-row-pendiente td{ background:rgba(201,162,78,0.08); }
  .pago-row-pausado td{ background:rgba(147,160,174,0.05); }
  .pago-row-baja td{ background:rgba(147,160,174,0.06); opacity:0.7; }
  .pago-input-inline{
    width:100%; background:transparent; border:1px solid transparent; border-radius:6px;
    color:var(--text); font-family:inherit; font-size:12.5px; padding:5px 6px; transition:border-color 0.12s, background 0.12s;
  }
  .pago-input-inline:hover{ border-color:var(--line); }
  .pago-input-inline:focus{ outline:none; border-color:var(--brass); background:var(--panel-alt); }
  .pago-input-inline[type="number"]{ text-align:right; }
  .gasto-input-inline{
    width:100%; background:transparent; border:1px solid transparent; border-radius:6px;
    color:var(--text); font-family:inherit; font-size:12.5px; padding:5px 6px; transition:border-color 0.12s, background 0.12s;
  }
  .gasto-input-inline:hover{ border-color:var(--line); }
  .gasto-input-inline:focus{ outline:none; border-color:var(--brass); background:var(--panel-alt); }
  .gasto-input-inline[type="number"]{ text-align:right; }
  .input-money-wrap{
    display:flex; align-items:center; border:1px solid transparent; border-radius:6px;
    padding:0 5px; min-width:82px; transition:border-color 0.12s, background 0.12s;
  }
  .input-money-wrap:hover{ border-color:var(--line); }
  .input-money-wrap:focus-within{ border-color:var(--brass); background:var(--panel-alt); }
  .input-money-wrap .simbolo-dinero{ color:var(--text-faint); font-size:12px; flex-shrink:0; margin-right:2px; }
  .input-money-wrap input{ border:none !important; background:transparent !important; flex:1; min-width:52px; text-align:right !important; padding-left:2px !important; }
  .input-money-wrap input:hover, .input-money-wrap input:focus{ border:none !important; background:transparent !important; outline:none !important; }
  /* Quita las flechitas nativas de subir/bajar de los campos numéricos: en fondo oscuro se veían como
     una cajita extra encimada dentro del campo (efecto de "doble recuadro"). */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"]{ -moz-appearance: textfield; }
  .pagos-vacio-card{
    text-align:center; padding:48px 24px; border:1px dashed var(--line); border-radius:12px; margin-bottom:20px;
  }
  .pagos-vacio-card .icono{ font-size:34px; margin-bottom:10px; }
  .pagos-vacio-card h3{ margin:0 0 6px; font-size:16px; }
  .pagos-vacio-card p{ margin:0 0 18px; color:var(--text-dim); font-size:13.5px; max-width:420px; margin-left:auto; margin-right:auto; }
  .stat-card.stat-warn .value{ color:var(--coral-bright); }
  .stat-card.stat-ok .value{ color:var(--sage-bright); }
  .asis-badge{
    position:absolute; top:2px; right:2px; z-index:3;
    width:19px; height:19px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:800; line-height:1; color:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,0.4);
  }
  .asis-badge-impartida{ background:#3E9C6B; }
  .asis-badge-alumno-no-aviso{ background:var(--brass-bright); color:#2a1f08; }
  .asis-badge-alumno-aviso{ background:#7C8AA0; }
  .asis-badge-cancelada-maestro{ background:var(--coral-bright); }
  .asis-badge-otro{ background:#7C8AA0; }
  .asis-badge-cobertura{ top:auto; bottom:2px; right:2px; width:16px; height:16px; font-size:10px; background:#1a1712; box-shadow:0 1px 3px rgba(0,0,0,0.4); }
  .mes-chip-asis-icono{ font-weight:800; font-size:11px; }
  @keyframes detalle-panel-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
  .semana-cols-dias{ display:grid; grid-template-columns:repeat(7, 1fr); gap:10px; }
  .semana-col-dia{ border:1px solid var(--line); border-radius:8px; padding:10px; min-height:320px; background:var(--panel-alt); }
  .semana-col-dia-header{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-faint); font-weight:600; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--line); }
  .semana-col-dia-chips{ display:flex; flex-direction:column; gap:6px; }
  .semana-chip-grande{ padding:6px 8px; font-size:11.5px; line-height:1.5; white-space:normal; }

  /* ---------- Calendario de espacios ---------- */
  .calendar-wrap{ overflow-x:auto; margin-bottom:10px; }
  .calendar-table{ width:100%; border-collapse:separate; border-spacing:4px; }
  .calendar-table th{ font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-faint); font-weight:500; padding:6px 8px; text-align:center; }
  .calendar-table th:first-child{ text-align:left; }
  .calendar-table td.hora-label{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--text-dim); white-space:nowrap; padding:0 10px 0 2px; }
  .calendar-cell{ text-align:center; border-radius:7px; padding:8px 4px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; min-width:56px; }
  .calendar-cell .cell-sub{ display:block; font-size:9.5px; font-family:'IBM Plex Sans', sans-serif; margin-top:1px; opacity:0.8; }
  .calendar-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
  .calendar-legend-item{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim); }
  .calendar-legend-dot{ width:12px; height:12px; border-radius:3px; display:inline-block; }
  .badge-sinmaestro{ background:rgba(147,160,174,0.14); color:var(--text-faint); }

  @media (max-width: 860px){
    .leaderboard-grid{ grid-template-columns:1fr; }
    .checkbox-grid{ grid-template-columns:1fr; }
    .hero-row{ grid-template-columns:1fr 1fr; }
    .charts-grid{ grid-template-columns:1fr; }
    .form-grid{ grid-template-columns:1fr; }
    main{ padding:24px 16px 60px 16px; }
    .topbar{ padding:16px 16px 0 16px; }
    thead{ display:none; }
    table, tbody, tr, td{ display:block; width:100%; }
    tbody tr{ padding:12px 14px; border-bottom:1px solid var(--line); }
    tbody td{ border-bottom:none; padding:4px 0; }
    .row-actions{ margin-top:8px; }
    .desglose-encabezados{ display:none; }
    .desglose-fila{ grid-template-columns:1fr 1fr; grid-template-areas:"metodo metodo" "monto comision" "quitar quitar"; row-gap:6px; padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:10px; }
    .desglose-fila:last-child{ border-bottom:none; }
    .desglose-fila .d-metodo{ grid-area:metodo; }
    .desglose-fila .input-money-wrap:nth-of-type(1){ grid-area:monto; }
    .desglose-fila .input-money-wrap:nth-of-type(2){ grid-area:comision; }
    .desglose-fila .icon-btn{ grid-area:quitar; justify-self:end; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }