/* ── Variables (misma paleta que style.css) ── */
:root {
  --bg:        #1e1e1e;
  --bg-alt:    #252526;
  --bg-hover:  #2a2d2e;
  --border:    #3c3c3c;
  --text:      #d4d4d4;
  --text-muted:#858585;
  --accent:    #007acc;
  --accent-2:  #4ec9b0;
  --warning:   #d7ba7d;
  --error:     #f44747;
  --topbar-h:  52px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 11pt;
  color: var(--text);
  background: var(--bg);
  padding: calc(var(--topbar-h) + 1.5rem) 1.5rem 2rem;
}
h1 { font-size: 18pt; text-align: center; margin-bottom: 0.2em; color: var(--accent-2); }
.subtitle { text-align: center; font-size: 10pt; color: var(--text-muted); margin-bottom: 1.5em; }

.semana { margin-bottom: 1.5em; }
.cabecera-dias { display: flex; gap: 4px; margin-bottom: 4px; }
.cabecera-dias span {
  flex: 1; text-align: center; font-size: 9pt; font-weight: bold;
  color: var(--text); background: var(--bg-alt);
  padding: 4px 2px; border-radius: 3px;
  border: 1px solid var(--border);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dias { display: flex; gap: 4px; }
.dia {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-alt);
  padding: 6px 7px;
  min-height: 160px;
  page-break-inside: avoid; break-inside: avoid;
}
.dia .num {
  font-size: 15pt; font-weight: bold;
  color: var(--text-muted);
  display: block; margin-bottom: 5px; line-height: 1;
}
.dia .contenido { font-size: 8pt; color: var(--text); line-height: 1.45; }

.tema-btn {
  display: block; width: 100%; text-align: left;
  padding: 2px 0; font-size: 7.5pt;
  color: var(--accent);
  line-height: 1.35; font-family: inherit;
  text-decoration: none;
  border-radius: 2px;
}
.tema-btn:hover { color: var(--accent-2); background: var(--bg-hover); }

.vacio      { background: var(--bg) !important; border-color: var(--border); opacity: .5; }
.fin-semana { background: #1a2a35 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.fin-semana .num { color: var(--accent); }

.simulacro  { background: #2a2510 !important; border-color: var(--warning) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.simulacro .num { color: var(--warning); }

.examen     { background: #2a1010 !important; border-color: var(--error) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.examen .num     { font-size: 20pt; color: var(--error); }
.examen .contenido { font-weight: bold; color: var(--error); font-size: 11pt; }

.leyenda { margin-top: 1.5em; font-size: 9pt; display: flex; gap: 1.2em; flex-wrap: wrap; color: var(--text-muted); }
.leyenda-item { display: flex; align-items: center; gap: 5px; }
.leyenda-color { width: 14px; height: 14px; border: 1px solid var(--border); flex-shrink: 0; }

/* ── Hoy ────────────────────────────────────────────────── */
.dia.hoy {
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 0 2px rgba(78,201,176,.25);
}
.dia.hoy > .num { color: var(--accent-2) !important; }
.hoy-label {
  display: inline-block;
  font-size: 7pt; font-weight: bold; letter-spacing: .06em;
  color: var(--accent-2);
  background: rgba(78,201,176,.12);
  border: 1px solid var(--accent-2);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px; margin-bottom: 4px;
  vertical-align: middle;
}

/* ── Filas de tema ──────────────────────────────────────── */
.tema-row {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 2px;
}
.tema-row .tema-btn { flex: 1; margin-bottom: 0; }

/* ── Botón check ────────────────────────────────────────── */
.check-btn {
  flex-shrink: 0;
  width: 15px; height: 15px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 8pt; line-height: 1;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin-top: 1px;
  transition: background .1s, color .1s, border-color .1s;
}
.check-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }
.check-btn.checked { background: var(--accent-2); color: #111; border-color: var(--accent-2); }

/* ── Botón mover ────────────────────────────────────────── */
.move-btn {
  flex-shrink: 0;
  width: 14px; height: 14px;
  border: none; background: transparent;
  color: var(--text-muted); cursor: pointer;
  font-size: 9pt; line-height: 1;
  padding: 0; margin-top: 1px;
  opacity: 0; transition: opacity .15s;
}
.tema-row:hover .move-btn { opacity: 1; }
.move-btn:hover { color: var(--warning); }

/* ── Completado ─────────────────────────────────────────── */
.tema-btn.completado {
  text-decoration: line-through;
  color: var(--text-muted) !important;
  opacity: .45;
}

/* ── Atrasado ───────────────────────────────────────────── */
.tema-row.atrasado .tema-btn { color: var(--error) !important; }
.tema-row.atrasado .tema-btn::before { content: '⚠ '; }
.overdue-badge {
  display: inline-block;
  font-size: 7pt; font-weight: bold;
  background: var(--error); color: #fff;
  padding: 1px 6px; border-radius: 8px;
  margin-bottom: 4px; margin-top: 1px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ── Picker de día ──────────────────────────────────────── */
.move-picker {
  position: absolute; right: 0; top: 100%;
  z-index: 200;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 130px;
  box-shadow: 0 4px 14px rgba(0,0,0,.55);
}
.mp-label {
  font-size: 8pt; color: var(--text-muted);
  padding: 0 3px 3px; border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.move-picker button {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: 8pt; padding: 3px 8px;
  text-align: left; cursor: pointer; border-radius: 3px;
  font-family: inherit;
}
.move-picker button:hover { background: var(--bg-hover); color: var(--accent-2); }
.move-picker .mp-today { border-color: var(--accent-2); color: var(--accent-2); }
.move-picker .mp-reset { color: var(--text-muted); font-size: 7.5pt; margin-top: 2px; }
.move-picker .mp-reset:hover { color: var(--error); }

/* ── Botón reset planning ───────────────────────────────── */
.btn-reset-planning {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 10pt;
  padding: 0 4px; vertical-align: middle; line-height: 1;
  margin-left: 6px; transition: color .15s;
}
.btn-reset-planning:hover { color: var(--warning); }

@media print {
  body { background: #fff; color: #111; padding: 0.8cm 1cm; }
  .dia { background: #fff !important; border-color: #ccc !important; }
  .fin-semana { background: #f5f5f5 !important; }
  .simulacro  { background: #fff8e1 !important; }
  .examen     { background: #fde8e8 !important; }
  .tema-btn { color: #111; }
  .semana { page-break-after: always; break-after: page; }
  .semana:last-of-type { page-break-after: auto; }
  .check-btn, .move-btn, .move-picker, .overdue-badge,
  .hoy-label, .btn-reset-planning { display: none !important; }
  .tema-btn.completado { text-decoration: none; opacity: 1; color: inherit !important; }
}
