/* =======================================================================
   estilos-horario.css  –  Tema “Azules Espaciales”
   (Solo estilo. No altera la lógica de gestor-horario.js)
   ======================================================================= */

/* ---------- Variables de color comunes con la portada ----------------- */
:root {
  --color-background: linear-gradient(135deg, #0084F4 100%, #004FAF 50%, #002868 0%);
  --color-surface:    linear-gradient(135deg,#002868 0%,#004FAF 50%,#0084F4 100%);
  --color-text:       #E6F8FF;
  --color-text-sec:   #A7C6E9;
  --color-primary:    #009EFF;
  --color-primary-h:  #00C8FF;
  --color-primary-a:  #00E4FF;
  --color-border:     rgba(0,132,255,0.20);
  --shadow-card:      0 10px 25px rgba(0,228,255,0.12);
  --shadow-hover:     0 20px 40px rgba(0,228,255,0.35);
  --transition:       all .3s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset mínimo ---------------------------------------------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
  font-size: 15px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; display:flex; flex-direction:column; }

/* ---------- Encabezado ------------------------------------------------- */
.encabezado-principal {
  background: linear-gradient(135deg,#002868 0%,#004FAF 50%,#0084F4 100%);
  padding: 3rem 0 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.logo-seccion { display:flex; justify-content:center; gap:1rem; align-items:center; }
.icono-libro {
  font-size: 2.8rem;
  background:#fff;
  color:#002868;
  padding:.5rem;
  border-radius:14px;
}
.titulo-principal {
  font-size: 2.8rem;
  font-weight:600;
  background: linear-gradient(135deg,var(--color-primary),var(--color-primary-h),var(--color-primary-a));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.subtitulo { font-size:1.1rem; margin-top:.5rem; opacity:.85; }

/* ---------- Layout principal ------------------------------------------ */
.contenedor-principal {
  flex:1;
  display:flex;
  gap:2rem;
  padding: 2.5rem 2rem;
  max-width: 1400px;
  margin-inline:auto;
}
.columna-izquierda   { display:flex; flex-direction:column; gap:2rem; flex:0 0 420px; }
.columna-derecha     { flex:1; min-width:0; }

/* ---------- Tarjetas comunes ------------------------------------------ */
.tarjeta-formulario,
.tarjeta-archivos,
.tarjeta-ayuda {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 2rem 2rem 2.2rem;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.tarjeta-formulario:hover,
.tarjeta-archivos:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.titulo-seccion {
  font-size:1.2rem;
  font-weight:600;
  text-align:center;
  margin-bottom:1.4rem;
  position:relative;
  color:var(--color-primary-a);
}
.titulo-seccion::after{
  content:'';
  position:absolute;
  left:50%;bottom:-0.6rem;
  width:50px;height:3px;
  background:var(--color-primary);
  transform:translateX(-50%);
  border-radius:2px;
}

/* ---------- Formulario ------------------------------------------------- */
.formulario-horario { display:flex; flex-direction:column; gap:1.5rem; }
.grupo-input { display:flex; flex-direction:column; gap:.4rem; }
.etiqueta-input { font-weight:600; font-size:.95rem; color:var(--color-primary); }
.campo-input,
select.campo-input {
  background:var(--color-primary-h);
  color:var(--color-text);
  border:1px solid var(--color-border);
  border-radius:10px;
  padding: .75rem 1rem;
  font-size:1rem;
  transition: var(--transition);
}
.campo-input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(0,132,255,.25); }

/* ---------- Botones ---------------------------------------------------- */
.boton-principal,
.boton-secundario {
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;
  border:none;
  border-radius:10px;
  cursor:pointer;
  padding: .9rem 1.6rem;
  font-size:.95rem;
  transition: var(--transition);
}
.icono-boton { font-size:1.2rem; }

.boton-principal {
  background: linear-gradient(135deg,var(--color-primary) 0%, var(--color-primary-h) 100%);
  color:#fff;
  box-shadow:var(--shadow-card);
}
.boton-principal:hover { background:var(--color-primary-h); transform:translateY(-2px); }

.boton-secundario {
  background:rgba(0,132,255,.15);
  color:var(--color-text);
}
.boton-secundario:hover { background:rgba(0,132,255,.25); transform:translateY(-2px); }

.boton-secundario:disabled,
.boton-principal:disabled {
  opacity:.45;
  pointer-events:none;
}

/* ---------- Gestor de archivos ---------------------------------------- */
.contenedor-botones-archivo { display:flex; gap:1rem; flex-wrap:wrap; }
.contenedor-importar { position:relative; flex:1; }
.input-archivo { position:absolute; inset:0; opacity:0; cursor:pointer; }

/* ---------- Ayuda ------------------------------------------------------ */
.info-ayuda {
  background: linear-gradient(135deg,#ffecd215 0%,#fcb69f15 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:1.2rem 1.5rem;
  color:#ffd2a2;
  font-size:.9rem;
  line-height:1.5;
}

/* ---------- Tabla del horario ----------------------------------------- */
.contenedor-tabla-horario { overflow-x:auto; border-radius:12px; box-shadow:var(--shadow-card); }

.tabla-horario-principal {
  width:100%; border-collapse:collapse; background:var(--color-surface); color:var(--color-text);
}
.tabla-horario-principal th {
  background:var(--color-primary);
  color:#fff;
  padding:.9rem; font-weight:600; text-align:center; border-bottom:2px solid #0078d4;
}
.tabla-horario-principal td { padding:.9rem; text-align:center; border-bottom:1px solid rgba(255,255,255,.08); }

.celda-hora {
  background:rgba(255, 255, 255, 0.05);
  font-weight:600; color:var(--color-text);
  border-right:2px solid rgba(255,255,255,.08);
  min-width:130px;
}
.celda-horario { background:rgba(255,255,255,.02); cursor:pointer; transition:var(--transition); }
.celda-horario:hover { background:rgba(0,132,255,.15); transform:scale(1.02); }

.celda-horario.clase-activa {
  background:linear-gradient(135deg,#211bd1,#00E4FF);
  font-weight:600;color:rgb(121, 248, 242);
  box-shadow:0 2px 8px rgba(0,228,255,.3);
}
.celda-horario.clase-activa:hover { transform:scale(1.02); }

.mensaje-vacio { text-align:center; padding:3rem 1rem; color:var(--color-text-sec); }
.icono-vacio { font-size:4rem; margin-bottom:1rem; }

/* ---------- Pie de página --------------------------------------------- */
.pie-pagina {
  background:#002868;
  color:#fff;
  text-align:center;
  padding:1.5rem 1rem;
  font-size:.85rem;
}

/* ---------- Responsivo ------------------------------------------------- */
@media (max-width:1024px){
  .contenedor-principal{ flex-direction:column; }
  .columna-izquierda{ flex:none; width:100%; max-width:600px; margin-inline:auto; }
}
@media (max-width:768px){
  .contenedor-principal{ padding:1.5rem 1rem; gap:1.5rem; }
  .titulo-principal{ font-size:2.2rem; }
}
@media (max-width:480px){
  .tarjeta-formulario,
  .tarjeta-archivos,
  .tarjeta-ayuda{ padding:1.2rem; }
  .titulo-principal{ font-size:1.8rem; }
}

/* ========================================
   BOTÓN VOLVER - ESTILO XADE
======================================== */
/* Botón “Volver” con fondo cian redondeado */
.boton-volver {
  position: absolute;
  top: 20px;          /* ajusta según tu diseño */
  left: 20px;
  z-index: 3;

  /* Estilo visual */
  background: cyan;     /* cian de la paleta */ /* [1] */
  color: #11b51c;                      /* buen contraste sobre cian */
  border: none;
  border-radius: 9999px;               /* forma de píldora */
  padding: 6px 18px;                   /* algo más de aire */
  font-weight: 600;
  opacity: 0.85;                       /* discreto */

  transition: opacity 0.3s var(--transition-smooth),
              transform 0.3s var(--transition-smooth);
}

.boton-volver:hover,
.boton-volver:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}