/* static/style.css
   Personalización tipográfica, colores institucionales y acentos modernos.
   Se reutilizan al máximo las clases de Bootstrap; solo se añaden estilos cuando es necesario.
*/

/* ---------- Fuentes personalizadas ---------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f9f9fa;  /* fondo muy claro, casi blanco */
  color: #232220;
}

.playfair-heading {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.inter-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.7;
}

/* ---------- Colores semánticos ---------- */
:root {
  --tt-dark: #232220;
  --tt-accent-rose: #dbb2b8;
  --tt-accent-dark: #a8666a;
  --tt-accent-beige: #dac0b1;
  --tt-light-bg: #fcfcfc;
}

/* Acentos para botones y enlaces activos */
.sidebar-nav .nav-link.active {
  background-color: #232220 !important;
  color: white !important;
  border-radius: 0.5rem;
}

a {
  color: #232220;
  text-decoration: underline;
  text-decoration-color: #dbb2b8;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

a:hover {
  color: #a8666a;
  text-decoration-color: #a8666a;
}

.btn-dark, .btn-outline-dark:hover {
  background-color: #232220;
  border-color: #232220;
}

.btn-outline-dark {
  border-color: #232220;
  color: #232220;
}

.btn-outline-dark:hover {
  background-color: #232220;
  color: white;
}

/* ---------- Navegación lateral fija ---------- */
.sidebar-nav {
  width: 260px;
  min-height: 100vh;
  background-color: #f4f2f0;   /* ligeramente distinto al fondo principal */
  border-right: 1px solid rgba(0,0,0,0.06);
  box-shadow: 2px 0 8px rgba(0,0,0,0.02);
  position: sticky;
  top: 0;
  z-index: 1020;
}

.sidebar-logo {
  border-radius: 8px;
  background-color: white;
  padding: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.sidebar-nav .nav-link {
  font-weight: 500;
  display: flex;
  align-items: center;
  padding: 0.6rem 0.75rem;
  color: #2c2c2c;
  border-radius: 0.5rem;
  margin-bottom: 0.15rem;
  transition: background 0.15s;
}

.sidebar-nav .nav-link:hover {
  background-color: rgba(35,34,32,0.06);
  color: #000;
}

.sidebar-footer .btn {
  font-weight: 500;
  border-radius: 0.4rem;
}

/* ---------- Sección Hero ---------- */
.hero-section {
  height: 88vh;
  min-height: 550px;
  overflow: hidden;
}

.hero-image {
  filter: brightness(0.7);
  transform: scale(1.02);
}

.hero-logo-img {
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  background-color: rgba(255, 255, 255, 0.5);
  padding: 8px;
  border-radius: 24px;
  backdrop-filter: blur(4px);
}

/* ---------- Imágenes modernas ---------- */
.modern-img {
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.3s ease;
  background-color: #fff;
}

.modern-img:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 30px -15px rgba(0,0,0,0.12);
}

/* ---------- Cards con borde definido ---------- */
.border-card {
  border: 1.5px solid #dbb2b8 !important;
  border-radius: 0.8rem !important;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
  transition: box-shadow 0.2s;
}

.border-card:hover {
  box-shadow: 0 12px 22px -12px rgba(166,102,106,0.15);
  border-color: #a8666a !important;
}

/* ---------- Títulos de sección ---------- */
.section-title {
  font-size: 2.2rem;
  position: relative;
  display: inline-block;
  color: #232220;
  letter-spacing: -0.5px;
}

.section-title::after {
  content: '';
  display: block;
  width: 65px;
  height: 3px;
  background: #dbb2b8;
  margin-top: 8px;
  border-radius: 4px;
}

/* ---------- Espaciados adicionales ---------- */
@media (max-width: 991.98px) {
  .sidebar-nav {
    width: 85px;
  }
  .sidebar-nav .nav-link span,
  .sidebar-nav .sidebar-footer .btn span,
  .sidebar-nav .fw-bold.text-dark {
    display: none !important;
  }
  .sidebar-nav .nav-link {
    justify-content: center;
  }
  .sidebar-logo {
    width: 42px;
    height: 42px;
  }
}

/* asegurar que el contenido principal no quede oculto detrás del sidebar */
.main-content {
  margin-left: 0;
  max-width: 100%;
}

body.d-flex {
  flex-wrap: nowrap;
}

footer a {
  color: #dac0b1;
  text-decoration-color: #dbb2b8;
}
footer a:hover {
  color: #ffffff;
}