@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --azul-oscuro: #142b4d;
  --azul-medio: #e8eef7;
  --dorado: #f2b705;
  --blanco: #ffffff;
  --crema: #f5f1e8;
  --texto: #1e2430;
  --suave: #5c6678;
  --borde: #d9dfeb;
  --verde: #236b38;
  --rojo: #8f2d2d;
  --sombra: 0 10px 30px rgba(20, 43, 77, 0.05);
  --sombra-hover: 0 15px 35px rgba(20, 43, 77, 0.12);
  --transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --borde-radio: 12px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #f4f6fa;
  color: var(--texto);
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

label {
  display: grid;
  gap: 8px;
  font-weight: bold;
  color: var(--azul-oscuro);
}

.oculto {
  display: none !important;
}

/* Barra de Soporte / Contacto */
.soporte-bar {
  background-color: #0d1e36;
  color: #a3b8cc;
  font-size: 0.85rem;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.soporte-bar__contenido {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.soporte-bar__texto {
  font-weight: 500;
}

.soporte-bar__enlace {
  color: var(--blanco);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transicion);
  text-decoration: none;
}

.soporte-bar__enlace:hover {
  color: var(--dorado);
}

.soporte-bar__separador {
  color: rgba(255, 255, 255, 0.2);
}

.soporte-bar__icono {
  opacity: 0.8;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .soporte-bar {
    padding: 10px;
  }
  .soporte-bar__contenido {
    gap: 8px;
  }
  .soporte-bar__separador {
    display: none;
  }
  .soporte-bar__enlace {
    width: 100%;
    justify-content: center;
  }
  .soporte-bar__texto {
    width: 100%;
    text-align: center;
  }
}

.encabezado {
  background-color: var(--azul-oscuro);
  color: var(--blanco);
  text-align: center;
}

.portada-biblioteca {
  min-height: 330px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 52px 20px 58px;
  background:
    linear-gradient(rgba(7, 27, 54, 0.72), rgba(7, 27, 54, 0.76)),
    url("https://images.unsplash.com/photo-1521587760476-6c12a4b040da?auto=format&fit=crop&w=1600&q=80");
  background-position: center;
  background-size: cover;
}

.encabezado__etiqueta {
  margin-bottom: 10px;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.encabezado h1,
.encabezado-simple h1 {
  color: var(--dorado);
  font-size: clamp(3.2rem, 10vw, 6.4rem);
  line-height: 0.95;
}

.encabezado__subtitulo {
  max-width: 620px;
  margin: 10px auto 0;
  font-size: clamp(1.05rem, 3vw, 1.55rem);
  line-height: 1.25;
}

.encabezado-simple {
  position: relative;
  padding: 34px 20px;
  background-color: var(--azul-oscuro);
  color: var(--blanco);
  text-align: center;
}

.encabezado-simple p {
  margin-top: 8px;
}

.enlace-volver {
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 9px 12px;
  border-radius: 8px;
  background-color: var(--dorado);
  color: var(--azul-oscuro);
  font-weight: bold;
}

.menu-navegacion {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background-color: var(--blanco);
  border-bottom: 1px solid var(--borde);
  box-shadow: var(--sombra);
}

.menu-navegacion a {
  padding: 10px 16px;
  border-radius: 8px;
  background-color: var(--azul-medio);
  color: var(--azul-oscuro);
  font-weight: bold;
}

.menu-navegacion a:hover {
  background-color: var(--azul-oscuro);
  color: var(--blanco);
}

.contenedor {
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: 32px 0 48px;
}

.panel-principal,
.panel,
.tarjeta-resumen {
  background-color: var(--blanco);
  border-radius: 8px;
  box-shadow: var(--sombra);
}

.panel-principal,
.panel {
  padding: 28px;
  margin-bottom: 24px;
}

.encabezado-seccion {
  margin-bottom: 18px;
}

.encabezado-seccion h2 {
  margin-bottom: 8px;
  color: var(--azul-oscuro);
}

.encabezado-seccion p {
  line-height: 1.6;
  color: var(--suave);
}

.entrada-texto,
select,
button {
  font: inherit;
}

.entrada-texto {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--borde-radio);
  background-color: var(--blanco);
  transition: var(--transicion);
  outline: none;
}

.entrada-texto:focus {
  border-color: var(--azul-oscuro);
  box-shadow: 0 0 0 3px rgba(20, 43, 77, 0.1);
}

.boton {
  display: inline-block;
  padding: 12px 18px;
  border: none;
  border-radius: var(--borde-radio);
  background-color: var(--azul-oscuro);
  color: var(--blanco);
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transicion);
}

.boton:hover {
  background-color: #0f2039;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 43, 77, 0.15);
}

.boton:active {
  transform: translateY(0);
}

.mensaje {
  min-height: 24px;
  margin-top: 12px;
  color: var(--azul-oscuro);
  font-weight: bold;
}

.grilla-formulario {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.contenedor-tabla {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--borde);
  text-align: left;
}

th {
  background-color: var(--azul-medio);
  color: var(--azul-oscuro);
}

@media (max-width: 760px) {
  .portada-biblioteca {
    min-height: 290px;
    padding: 40px 18px;
  }

  .contenedor {
    width: min(100% - 32px, 1100px);
  }

  .enlace-volver {
    position: static;
    display: inline-block;
    margin-bottom: 16px;
  }

  .menu-navegacion {
    flex-wrap: wrap;
  }

  .menu-navegacion a {
    flex: 1 1 140px;
    text-align: center;
  }

  .grilla-formulario {
    grid-template-columns: 1fr;
  }
}