/* =======================================================================
   estilos-unidades.css – Tema “Azules Espaciales”
   ======================================================================= */

/* ---------- Paleta compartida ---------------------------------------- */
:root {
  --color-background: #0A0F1C;
  --color-surface:    #121E33;
  --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 ---------------------------------------------------- */
.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 base -------------------------------------------- */
.tarjeta-formulario,
.tarjeta-archivos,
.tarjeta-lista {
  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-unidades { 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-text-sec); }
.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-principal:disabled,
.boton-secundario:disabled { opacity:.45; pointer-events:none; }

/* ---------- Gestión 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;
  margin-bottom:1.5rem;
}

/* ---------- Lista de unidades ---------------------------------------- */
.lista-unidades {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-height:200px;
}
.item-unidad {
  background: linear-gradient(135deg,var(--color-primary) 0%, var(--color-primary-h) 100%);
  color:#fff;
  padding:1.4rem;
  border-radius:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:grab;
  transition: var(--transition);
  box-shadow:0 4px 15px rgba(0,228,255,.15);
}
.item-unidad:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.item-unidad.dragging { opacity:.5; transform:rotate(3deg); cursor:grabbing; }

.info-unidad { display:flex; flex-direction:column; gap:.3rem; }
.nombre-unidad { font-size:1.1rem; font-weight:600; }
.duracion-unidad {
  background:rgba(255,255,255,.25);
  padding:.25rem .7rem;
  border-radius:20px;
  font-size:.85rem;
}

/* Botón eliminar dentro de item */
.boton-eliminar {
  background:rgba(0,0,0,.15);
  color:#fff;
  border:none;
  border-radius:50%;
  width:38px; height:38px;
  cursor:pointer;
  font-size:1.1rem;
  transition: var(--transition);
  display:flex;align-items:center;justify-content:center;
}
.boton-eliminar:hover { background:#dab729; transform:scale(1.1); }

/* ---------- Mensaje vacío -------------------------------------------- */
.mensaje-vacio { text-align:center; padding:2.5rem 1rem; color:var(--color-text-sec); }
.icono-vacio { font-size:4rem; margin-bottom:1rem; }
.mensaje-vacio.oculto { display:none; }

/* ---------- 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.4rem; }
}
@media (max-width:480px){
  .tarjeta-formulario,
  .tarjeta-archivos,
  .tarjeta-lista { padding:1.2rem; }
  .titulo-principal{ font-size:1.9rem; }
  .icono-libro { font-size:2.2rem; }
}
/* ========================================
   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);
}