/* --- Bloques de horario (formulario "Nueva materia") --- */

.bloque-horario-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.bloque-horario-row select { width: auto; flex: 1; margin-bottom: 0; }
.bloque-horario-row input[type="time"] { width: auto; flex: 1; margin-bottom: 0; }

.bloque-horario-hint {
  font-size: 12px;
  color: var(--color-warning);
  margin: -2px 0 10px 2px;
}

/* --- Selector de color --- */

.color-swatches {
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: 8px;
  margin-bottom: 8px;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.color-swatch.selected {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-bg-elevated);
}

.color-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-custom-row input[type="color"] {
  width: 40px;
  height: 28px;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
}

/* ================= Header de la página Materias ================= */

.pagina-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.pagina-header-info { flex: 1; min-width: 240px; }
.pagina-header-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px;
}
.pagina-header h1 { font-size: 28px; }
.pagina-header p { max-width: 60ch; }

.pagina-header-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.pagina-header-stat {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 16px;
}
.pagina-header-stat .icono { font-size: 18px; }
.pagina-header-stat .valor { font-weight: 700; font-size: 16px; }
.pagina-header-stat .etiqueta { font-size: 11px; color: var(--color-text-muted); }

/* ================= Control segmentado (Todas / Activas / Archivadas) ================= */

.segmented {
  display: inline-flex;
  gap: 2px;
  background: var(--color-bg-elevated-2);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.segmented-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.segmented-btn.active { background: var(--color-primary); color: white; }

/* ================= Buscador ================= */

.buscador-wrap { position: relative; flex: 1; min-width: 160px; }
.buscador-wrap input {
  padding-left: 32px;
  margin-bottom: 0;
}
.buscador-wrap .icono-buscar {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); font-size: 13px; pointer-events: none;
}

.materias-lista-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.materias-filtros-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex: 1; }

/* ================= Tarjeta de materia (con barra de color propia) ================= */

.materia-card {
  display: flex;
  gap: 14px;
  padding: 16px 16px 16px 14px;
  border-radius: var(--radius);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary); /* color real de la materia via inline style */
  margin-bottom: 10px;
}

.materia-card-cuerpo { flex: 1; min-width: 0; }

.materia-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.materia-card-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.materia-card-badges .badge-chip {
  font-size: 11px; color: var(--color-text-muted);
  background: var(--color-bg-elevated-2);
  padding: 2px 8px; border-radius: 999px;
}

.materia-card-nombre { font-size: 17px; font-weight: 700; }
.materia-card-meta { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; }

.materia-card-horarios { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.materia-card-horario-chip {
  font-size: 12px;
  background: var(--color-bg-elevated-2);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}

.materia-card-proxima {
  margin-top: 10px;
  font-size: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 6px;
}
.materia-card-proxima.atrasada { color: var(--color-danger); }
.materia-card-proxima.al-dia { color: var(--color-text-muted); }

.materia-card-acciones { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

/* ================= Formulario en modo edición ================= */

.form-materia-titulo-row { display: flex; justify-content: space-between; align-items: center; }
.badge-editando {
  font-size: 11px; background: rgba(99,102,241,0.15); color: var(--color-primary);
  padding: 3px 10px; border-radius: 999px; font-weight: 600;
}

/* ================= Toggle del formulario (solo mobile) ================= */

.btn-solo-mobile { display: none; }

/* ================= Íconos SVG genéricos ================= */

.icono-svg { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.icono-svg svg { width: 100%; height: 100%; }

/* Íconos dentro de los stat-pills del header de página */
.pagina-header-stat .icono-svg { width: 20px; height: 20px; color: var(--color-text-muted); }

/* ================= Inputs con ícono a la izquierda ================= */

.input-icon-wrap { position: relative; }
.input-icon-wrap input, .input-icon-wrap select { padding-left: 34px; }
.input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.input-icon svg { width: 100%; height: 100%; }

/* Buscador: usa el mismo patrón */
.buscador-wrap .icono-buscar {
  width: 16px; height: 16px;
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); pointer-events: none;
}
.buscador-wrap .icono-buscar svg { width: 100%; height: 100%; }

/* ================= Horario semanal: pestañas de día + chips ================= */

.horario-semanal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.dia-tabs { display: flex; gap: 6px; margin-bottom: 10px; }

.dia-tab-btn {
  flex: 1;
  text-align: center;
  padding: 8px 2px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated-2);
  border: none;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.dia-tab-btn.active { background: var(--color-primary); color: white; }

.bloque-nuevo-tiempos {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.bloque-nuevo-tiempos input[type="time"] { width: auto; flex: 1; margin-bottom: 0; }

.bloques-agregados-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.bloque-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-elevated-2);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.bloque-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.bloque-chip-texto { flex: 1; font-size: 13px; font-weight: 500; }
.bloque-chip-quitar {
  background: none; border: none; color: var(--color-text-muted);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px;
}
.bloque-chip-quitar:hover { color: var(--color-danger); }

.color-nombre-label { font-size: 12px; font-weight: 600; color: var(--color-primary); }