:root{
  --bg:#f5f5f5;
  --fg:#333;
  --brand:#3b82f6;
  --brand-dark:#2563eb;
  --muted:#6b7280;
  --card:#ffffff;
  --line:#e5e7eb;
  --ok:#16a34a;
  --ghost:#eef2ff;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}


.topbar{
  background: var(--brand); color:#fff; padding: 1rem;
  text-align:center;
}
.topbar h1{ margin:0; font-size:1.4rem }


.container{ max-width: 760px; margin: 1.5rem auto 3rem; padding: 0 1rem }
.intro{ margin: 0 0 1rem; color: var(--muted) }


.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1rem 1.2rem;
  margin-top: 1rem;
}

.hint{ color: var(--muted); font-size: .95rem }


.lbl{ display:block; font-weight:600; margin-bottom:.25rem }
.grid-2{ display:grid; gap: 1rem }
@media (min-width: 640px){ .grid-2{ grid-template-columns: 1fr 1fr } }

input[type="text"], input[type="time"], input[type="number"]{
  width:100%; padding:.55rem .6rem; border-radius:8px;
  border:1px solid var(--line); background:#fff; color:var(--fg);
  outline:none;
}
input:focus{ border-color:var(--brand); box-shadow: 0 0 0 3px rgba(59,130,246,.2) }
input:hover{ border-color:#cbd5e1 }


.materias{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.5rem }
.materia{ display:flex; gap:.5rem; align-items:center }
.materia input{ flex:1 }
.materia .quitar{ min-width:2.25rem }


.btn{
  appearance:none; border:none; cursor:pointer;
  border-radius:8px; padding:.55rem .8rem; font-weight:600;
  background: var(--brand); color:#fff; transition: filter .15s ease, transform .02s ease;
}
.btn:hover{ filter: brightness(1.05) }
.btn:active{ transform: translateY(1px) }

.btn-primary{ background: var(--brand) }
.btn-primary:hover{ background: var(--brand-dark) }

.btn-ghost{
  background:#fff; color: var(--fg); border:1px solid var(--line);
}
.btn-ghost:hover{ background:#f8fafc }

/* Acciones del formulario */
.acciones{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem }

/* Estado */
.estado{ margin:.5rem 0 0; color: var(--muted) }

/* Resultado */
.lista{ line-height: 1.7; padding-left: 1.1rem }
.materia-titulo{
  list-style: none; margin-top:.6rem; padding:.35rem .5rem;
  background: #f8fafc; border:1px solid var(--line); border-radius:6px;
  font-weight:600;
}
.pausa{ color:#1f2937 }
.cambio{ color:#0f766e }

/* Footer */
.footer{
  text-align:center; color: var(--muted);
  padding: 2rem 1rem 3rem;
}


button:focus{ outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35) }

.volver-inicio {
  display: block;
  text-align: center;
  margin-top: 30px;
  font-size: 0.9rem;
  color: #3498db;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  cursor: pointer;
}

.volver-inicio:hover {
  color: #1d6fa5;
  text-decoration: underline;