/* ==========================================================
   HORARIO ESCOLAR v2.0 — COLEGIOS DEL PERU
   ========================================================== */

/* ─── VARIABLES ─────────────────────────────────────────── */
:root {
  --hs-primary:   #f59e0b;
  --hs-primary-d: #d97706;
  --hs-amber-lt:  #fef3c7;
  --hs-amber-bg:  #fffbf0;
  --hs-green:     #10b981;
  --hs-purple:    #8b5cf6;
  --hs-blue:      #3b82f6;
  --hs-card:      #ffffff;
  --hs-border:    #fde68a;
  --hs-text:      #1c1917;
  --hs-muted:     #78716c;
  --hs-shadow:    0 4px 24px rgba(245,158,11,.10);
  --hs-radius:    18px;
  --hs-radius-sm: 10px;
}

body.page-horario { background: var(--hs-amber-bg); font-family: 'Inter', sans-serif; }

/* ─── HERO ──────────────────────────────────────────────── */
.hs-hero {
  background: linear-gradient(135deg, #78350f 0%, #92400e 40%, #b45309 80%, #d97706 100%);
  padding: 100px 1rem 80px; text-align: center;
  position: relative; overflow: hidden;
}
.hs-hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(253,230,138,.2), transparent);
  pointer-events:none;
}
.hs-hero::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0; height:50px;
  background: var(--hs-amber-bg); clip-path: ellipse(55% 100% at 50% 100%);
}
.hs-hero-badge {
  display: inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.13); color: #fde68a;
  border: 1px solid rgba(253,230,138,.3);
  padding: 6px 18px; border-radius: 99px;
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  margin-bottom: 20px;
}
.hs-hero h1 {
  font-size: clamp(1.9rem, 5vw, 3.3rem); font-weight:900; color:#fff;
  line-height:1.15; margin:0 0 14px;
}
.hs-hero h1 span {
  background: linear-gradient(90deg, #fde68a, #fbbf24);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hs-hero p { color:rgba(255,255,255,.78); font-size:1rem; max-width:520px; margin:0 auto 26px; }
.hs-hero-stats { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.hs-hero-stat {
  background:rgba(255,255,255,.12); border:1px solid rgba(253,230,138,.25);
  padding:9px 16px; border-radius:11px;
  font-size:.8rem; color:rgba(255,255,255,.9); font-weight:600;
}
.hs-hero-stat i { color:#fbbf24; margin-right:6px; }

/* ─── MAIN LAYOUT ───────────────────────────────────────── */
.hs-main {
  max-width: 1300px; margin:0 auto;
  padding: 40px 16px 80px;
  display: grid; grid-template-columns: 1fr 320px; gap:28px; align-items:start;
}
@media (max-width:1024px) {
  .hs-main { display: block; }
  .hs-main > * + * { margin-top: 28px; }
}

/* ─── CARDS ─────────────────────────────────────────────── */
.hs-card {
  background:#fff; border-radius:var(--hs-radius);
  box-shadow:var(--hs-shadow); border:1px solid #fef3c7;
  margin-bottom:24px; overflow:hidden;
}
.hs-card-header {
  display:flex; align-items:center; gap:14px;
  padding:20px 24px 16px;
  border-bottom:1px solid #fef3c7;
  background:linear-gradient(to right,#fffbeb,#fff);
}
.hs-card-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:#fff; flex-shrink:0;
}
.hs-card-header h2 { font-size:1rem; font-weight:800; color:var(--hs-text); margin:0 0 2px; }
.hs-card-header p  { font-size:.77rem; color:var(--hs-muted); margin:0; }
.hs-card-body { padding:20px 24px 24px; }

.hs-section-label {
  font-size:.69rem; font-weight:800; text-transform:uppercase; letter-spacing:1px;
  color:var(--hs-muted); display:flex; align-items:center; gap:6px;
  margin-bottom:10px; margin-top:18px;
}
.hs-section-label:first-child { margin-top:0; }
.hs-section-label i { color:var(--hs-primary); }

/* ─── DAYS TOGGLE ───────────────────────────────────────── */
.hs-days-grid { display:flex; gap:8px; flex-wrap:wrap; }
.hs-day-toggle {
  padding:8px 14px; border-radius:99px; font-size:.82rem; font-weight:700;
  border:2px solid #e5e7eb; background:#f9fafb; color:var(--hs-muted);
  cursor:pointer; transition:all .2s; user-select:none;
}
.hs-day-toggle.active { border-color:var(--hs-primary); background:var(--hs-primary); color:#fff; box-shadow:0 4px 12px rgba(245,158,11,.28); }
.hs-day-toggle:hover:not(.active) { border-color:var(--hs-primary); color:var(--hs-primary); }

/* ─── SLIDERS / INPUTS ──────────────────────────────────── */
.hs-hours-row, .hs-start-row, .hs-duration-row { display:flex; align-items:center; gap:12px; margin-top:10px; }
.hs-hours-row label, .hs-start-row label, .hs-duration-row label { font-size:.82rem; font-weight:600; color:var(--hs-text); white-space:nowrap; }
.hs-hours-slider { flex:1; accent-color:var(--hs-primary); height:6px; cursor:pointer; }
.hs-hours-val { background:var(--hs-primary); color:#fff; font-size:.9rem; font-weight:900; border-radius:8px; padding:4px 12px; min-width:40px; text-align:center; }
.hs-start-row input[type=time], .hs-duration-row select {
  border:2px solid var(--hs-border); border-radius:8px;
  padding:8px 12px; font-size:.9rem; font-weight:700; color:var(--hs-text);
  background:#fff; outline:none; cursor:pointer;
}
.hs-start-row input[type=time]:focus, .hs-duration-row select:focus { border-color:var(--hs-primary); }

/* ─── RECREOS ───────────────────────────────────────────── */
.hs-recreos-list { margin-bottom:10px; }
.hs-recreo-empty { 
  font-size:.78rem; color:var(--hs-muted); 
  background:#f9fafb; border:1px dashed #e5e7eb;
  border-radius:10px; padding:12px 16px; margin:0; line-height:1.5;
}
.hs-recreo-empty small { font-size:.72rem; opacity:.75; }
.hs-recreo-row {
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(to right, #ecfdf5, #f0fdf4);
  border:1px solid #bbf7d0; border-radius:10px;
  padding:8px 12px; margin-bottom:8px;
}
.hs-recreo-name {
  flex:1; min-width:0; border:1px solid #86efac; border-radius:7px;
  padding:6px 10px; font-size:.8rem; font-weight:700; color:#065f46;
  background:#fff; outline:none;
}
.hs-recreo-name:focus { border-color:var(--hs-green); }
.hs-recreo-dur {
  border:1px solid #86efac; border-radius:7px;
  padding:6px 8px; font-size:.78rem; font-weight:700; color:#065f46;
  background:#fff; outline:none; cursor:pointer; flex-shrink:0;
}
.hs-recreo-del {
  width:26px; height:26px; border-radius:50%; border:none;
  background:#fee2e2; color:#ef4444; font-size:.7rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s; flex-shrink:0;
}
.hs-recreo-del:hover { background:#fca5a5; }
.hs-btn-add-recreo {
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#d1fae5,#a7f3d0);
  border:1.5px solid #6ee7b7; color:#065f46;
  border-radius:10px; padding:9px 16px; font-size:.8rem; font-weight:800;
  cursor:pointer; transition:all .2s; width:100%; justify-content:center;
  margin-bottom:4px;
}
.hs-btn-add-recreo:hover { background:linear-gradient(135deg,#a7f3d0,#6ee7b7); transform:translateY(-1px); }

/* ─── TITLE INPUT ───────────────────────────────────────── */
.hs-title-input {
  width:100%; border:2px dashed #fde68a; border-radius:10px;
  padding:10px 14px; font-size:.95rem; font-weight:800; color:var(--hs-text);
  background:#fffbeb; outline:none; text-align:center; transition:border-color .2s;
  margin-bottom:16px; font-family:'Inter',sans-serif;
}
.hs-title-input:focus { border-color:var(--hs-primary); background:#fff; }

/* ─── GENERATE BTN ──────────────────────────────────────── */
.hs-btn-generate {
  width:100%; padding:15px; border-radius:12px; border:none;
  background:linear-gradient(135deg,var(--hs-primary),var(--hs-primary-d));
  color:#fff; font-size:1rem; font-weight:800;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 6px 20px rgba(245,158,11,.35);
}
.hs-btn-generate:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(245,158,11,.4); }

/* ─── TABLE ─────────────────────────────────────────────── */
#hs-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.hs-table { border-collapse:collapse; width:100%; min-width:520px; table-layout:fixed; }

.hs-table th {
  background:linear-gradient(135deg,#78350f,#b45309);
  color:#fde68a; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; padding:11px 8px; text-align:center;
  border:1px solid rgba(253,230,138,.15);
}
.hs-th-drag { width:34px; background:#1c1917 !important; }
.hs-th-time { width:72px; background:#1c1917 !important; color:#fde68a !important; }

.hs-table td { border:1px solid #fef3c7; padding:0; vertical-align:middle; height:64px; }
.hs-td-drag {
  width:34px; background:#fffbeb; cursor:grab; text-align:center;
  vertical-align:middle; border-right:1px solid #fde68a;
}
.hs-drag-handle { color:#d6d3d1; font-size:.85rem; line-height:1; cursor:grab; padding:4px; }
.hs-drag-handle:active { cursor:grabbing; }
.hs-table tr:hover .hs-drag-handle { color:var(--hs-primary); }
.hs-td-time {
  background:linear-gradient(135deg,#fef3c7,#fffbeb);
  font-size:.72rem; font-weight:700; color:#92400e;
  text-align:center; padding:6px 4px; white-space:nowrap; min-width:68px;
}

/* ─── CLASS CELL ────────────────────────────────────────── */
.hs-cell {
  position:relative; width:100%; height:64px;
  display:flex; flex-direction:column; align-items:stretch;
  transition:box-shadow .2s; cursor:text;
}
.hs-cell:hover { box-shadow:0 0 0 2px var(--hs-primary) inset; }
.hs-cell-input {
  flex:1; width:100%; height:100%;
  border:none; outline:none; background:transparent;
  font-size:.8rem; font-weight:700; color:var(--hs-text);
  text-align:center; resize:none; cursor:text;
  font-family:'Inter',sans-serif; caret-color:var(--hs-primary-d);
  line-height:1.4; overflow:hidden;
  padding:10px 18px 10px 6px; /* top/bottom center the text */
}
.hs-cell-input::placeholder { color:#d1d5db; font-weight:500; font-size:.72rem; line-height:2.8; }
.hs-cell-input:focus { background:rgba(253,230,138,.1); }
.hs-cell-color-dot {
  position:absolute; bottom:4px; right:4px;
  width:10px; height:10px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);
  cursor:pointer; transition:transform .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.hs-cell-color-dot:hover { transform:scale(1.45); }

/* ─── RECREO ROW ────────────────────────────────────────── */
.hs-row-recreo td { height:48px; background:linear-gradient(to right,#d1fae5,#ecfdf5) !important; }
.hs-td-recreo {
  text-align:center; color:#065f46; font-weight:800; font-size:.85rem;
  letter-spacing:.3px; padding:10px;
}
.hs-td-recreo i { margin-right:8px; color:#10b981; }
.hs-recreo-dur-badge {
  background:#10b981; color:#fff; font-size:.65rem; font-weight:800;
  padding:2px 8px; border-radius:99px; margin-left:8px; vertical-align:middle;
}

/* ─── DRAG STATE ────────────────────────────────────────── */
.hs-row-dragging { opacity:.45; background:#fffbeb !important; }
.hs-row-drag-over td { border-top:3px solid var(--hs-primary) !important; }

/* ─── TABLE HINT ────────────────────────────────────────── */
.hs-table-hint {
  padding:10px 20px 12px; font-size:.68rem; color:#9ca3af;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}

/* ─── LEGEND ────────────────────────────────────────────── */
.hs-legend { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 4px; }
.hs-legend-item {
  display:flex; align-items:center; gap:6px;
  background:#f9fafb; border:1px solid #e5e7eb;
  padding:5px 10px; border-radius:99px; font-size:.74rem; font-weight:700; color:var(--hs-text);
}
.hs-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ─── SIDEBAR / PROGRESS ────────────────────────────────── */
.hs-sidebar { position:sticky; top:100px; }
.hs-progress-wrap { display:flex; flex-direction:column; align-items:center; padding:20px 12px 10px; }
.hs-progress-ring { position:relative; width:120px; height:120px; margin-bottom:12px; }
.hs-progress-ring svg { transform:rotate(-90deg); }
.hs-ring-bg  { fill:none; stroke:#fef3c7; stroke-width:10; }
.hs-ring-val { fill:none; stroke:var(--hs-primary); stroke-width:10; stroke-linecap:round;
  stroke-dasharray:339; stroke-dashoffset:339; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.hs-ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hs-ring-pct { font-size:1.5rem; font-weight:900; color:var(--hs-primary); line-height:1; }
.hs-ring-lbl { font-size:.6rem; font-weight:700; text-transform:uppercase; color:var(--hs-muted); letter-spacing:.4px; }
.hs-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.hs-stat-box { background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:10px; text-align:center; }
.hs-stat-box .val { font-size:1.3rem; font-weight:900; color:var(--hs-primary); }
.hs-stat-box .lbl { font-size:.63rem; font-weight:600; text-transform:uppercase; color:var(--hs-muted); margin-top:1px; }

/* ─── MENTOR ────────────────────────────────────────────── */
.hs-mentor-section { display:flex; align-items:flex-end; gap:14px; padding:16px 20px; border-top:1px solid #fef3c7; }
.hs-mentor-img-wrap {
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  overflow:hidden; border:3px solid var(--hs-primary);
  box-shadow:0 0 0 4px rgba(245,158,11,.18);
  animation:hs-mentor-glow 3s ease-in-out infinite;
}
@keyframes hs-mentor-glow {
  0%,100%{ box-shadow:0 0 0 4px rgba(245,158,11,.15); }
  50%    { box-shadow:0 0 0 8px rgba(245,158,11,.28); }
}
.hs-mentor-img { width:100%; height:100%; object-fit:cover; transition:opacity .4s; }
.hs-mentor-bubble {
  flex:1; background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border:1px solid #fde68a; border-radius:14px 14px 14px 4px;
  padding:10px 14px; font-size:.82rem; color:#78350f; font-weight:600; line-height:1.4;
  position:relative; transition:opacity .3s;
}
.hs-mentor-bubble::before {
  content:''; position:absolute; bottom:8px; left:-8px;
  border:5px solid transparent; border-right-color:#fde68a;
}

/* ─── EXPORT BTNS ───────────────────────────────────────── */
.hs-export-btns { display:flex; gap:10px; padding:16px 20px; border-top:1px solid #fef3c7; }
.hs-btn-export, .hs-btn-print {
  flex:1; padding:12px; border:none; border-radius:10px;
  font-size:.88rem; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .2s, box-shadow .2s;
}
.hs-btn-export { background:linear-gradient(135deg,#1e293b,#0f172a); color:#fff; box-shadow:0 4px 14px rgba(15,23,42,.25); }
.hs-btn-print  { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; box-shadow:0 4px 14px rgba(245,158,11,.28); }
.hs-btn-export:hover, .hs-btn-print:hover { transform:translateY(-2px); }

/* ─── COLOR POPUP ───────────────────────────────────────── */
.hs-color-picker-popup {
  position:absolute; z-index:1000; background:#fff;
  border:1px solid #fef3c7; border-radius:14px; padding:10px;
  box-shadow:0 10px 40px rgba(0,0,0,.14);
  display:flex; flex-direction:column; gap:8px; width:205px;
}
.hs-color-picker-popup.hidden { display:none; }
.hs-color-popup-title { font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--hs-muted); }
.hs-color-swatches { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
.hs-swatch { width:26px; height:26px; border-radius:6px; cursor:pointer; border:2px solid transparent; transition:transform .15s, border-color .15s; }
.hs-swatch:hover  { transform:scale(1.2); }
.hs-swatch.active { border-color:#1c1917; }
.hs-color-popup-btn {
  font-size:.72rem; font-weight:700; padding:6px 10px; border-radius:7px;
  border:none; cursor:pointer; transition:background .15s;
}
.hs-color-popup-btn.apply-all { background:linear-gradient(135deg,var(--hs-purple),#7c3aed); color:#fff; }
.hs-color-popup-btn.clear     { background:#f3f4f6; color:#6b7280; }

/* ─── EXPLORE CTA ───────────────────────────────────────── */
.hs-explore { margin-top:40px; }
.hs-explore h3 { font-size:1.1rem; font-weight:800; color:var(--hs-text); margin:0 0 6px; display:flex; align-items:center; gap:8px; }
.hs-explore p { font-size:.83rem; color:var(--hs-muted); margin:0 0 16px; }
.hs-explore-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hs-explore-btn {
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-radius:12px; font-size:.82rem; font-weight:700; text-decoration:none;
  transition:transform .2s, box-shadow .2s; color:#fff;
}
.hs-explore-btn:hover { transform:translateY(-3px); }
.btn-buscar  { background:linear-gradient(135deg,#f59e0b,#ef4444); box-shadow:0 4px 14px rgba(245,158,11,.28); }
.btn-cerca   { background:linear-gradient(135deg,#10b981,#06b6d4); box-shadow:0 4px 14px rgba(16,185,129,.28); }
.btn-comp    { background:linear-gradient(135deg,#8b5cf6,#6366f1); box-shadow:0 4px 14px rgba(139,92,246,.28); }
.btn-rank    { background:linear-gradient(135deg,#f59e0b,#d97706); box-shadow:0 4px 14px rgba(245,158,11,.28); }
/* New student tool buttons */
.btn-calc    { background:linear-gradient(135deg,#6366f1,#8b5cf6); box-shadow:0 4px 14px rgba(99,102,241,.28); }
.btn-tipo-est{ background:linear-gradient(135deg,#7c3aed,#ec4899); box-shadow:0 4px 14px rgba(124,58,237,.28); }
.hs-explore-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: #9ca3af; margin: 6px 0;
}
.hs-explore-divider::before, .hs-explore-divider::after {
  content:''; flex:1; height:1px; background:#e2e8f0;
}

/* ─── TABLE MOBILE SCROLL ────────────────────────────────── */
#hs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.hs-table { min-width: 480px; }

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width:768px) {
  #hs-table-wrap::before {
    content: '\21E2  Desliza para ver el horario completo';
    display: block;
    font-size: .7rem; color: #9ca3af; font-weight: 600;
    padding: 6px 12px 2px; text-align: right;
  }
}
@media (max-width:640px) {
  .hs-hero { padding:90px .75rem 70px; }
  .hs-hero h1 { font-size:1.75rem; }
  .hs-main { padding:24px 12px 60px; }
  .hs-explore-grid { grid-template-columns:1fr 1fr; }
  .hs-card-body { padding:16px; }
}

/* ─── PRINT ─────────────────────────────────────────────── */
@media print {
  header, footer, nav, .hs-hero, #hs-config-card,
  .hs-sidebar, .hs-explore, .hs-export-btns,
  .hs-table-hint { display:none !important; }
  body { background:#fff !important; }
  .hs-main { display:block !important; padding:0 !important; }
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}