/* ================================
   Paleta Fundación Refugio Seguro
   (Logo: naranja + azul)
   Edita aquí los HEX si hace falta
=================================*/
:root {
  /* Marca (usa el naranja del logo) */
  --rs-primary: #F58220;
  /* Naranja principal */
  --rs-primary-600: #D96915;
  /* Naranja hover/focus */
  --rs-primary-contrast: #ffffff;

  /* Acento (usa el azul del logo) */
  --rs-accent: #1787C7;
  /* Azul principal */
  --rs-accent-600: #0F6EA4;
  /* Azul hover/focus */
  --rs-accent-contrast: #ffffff;

  /* Neutros */
  --rs-dark: #212529;
  /* Topbar/footer */
  --rs-dark-ink: #e9ecef;
  /* Texto sobre oscuro */
  --rs-light: #f8f9fa;
  /* Secciones claras */
  --rs-body: #343a40;
  /* Texto general */
}

/* Mapeo a Bootstrap (seguimos usando "success" para color de marca) */
:root {
  --bs-primary: var(--rs-accent);
  /* Si algún comp. usa primary → azul */
  --bs-success: var(--rs-primary);
  /* Todo lo "success" → naranja (marca) */
  --bs-success-rgb: 245, 130, 32;
  /*  F58220 en RGB  */
  --bs-body-color: var(--rs-body);
  --bs-dark: var(--rs-dark);
  --bs-light: var(--rs-light);
}

/* Botones marca (success → naranja) */
.btn-success {
  background-color: var(--rs-primary) !important;
  border-color: var(--rs-primary) !important;
  color: var(--rs-primary-contrast) !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--rs-primary-600) !important;
  border-color: var(--rs-primary-600) !important;
}

.btn-outline-success {
  color: var(--rs-primary) !important;
  border-color: var(--rs-primary) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--rs-primary) !important;
  color: var(--rs-primary-contrast) !important;
}

/* Nuevo botón acento (azul del logo) para usar cuando quieras */
.btn-accent {
  background: var(--rs-accent) !important;
  border-color: var(--rs-accent) !important;
  color: var(--rs-accent-contrast) !important;
}

.btn-accent:hover,
.btn-accent:focus {
  background: var(--rs-accent-600) !important;
  border-color: var(--rs-accent-600) !important;
}

.btn-outline-accent {
  color: var(--rs-accent) !important;
  border-color: var(--rs-accent) !important;
}

.btn-outline-accent:hover,
.btn-outline-accent:focus {
  background: var(--rs-accent) !important;
  color: var(--rs-accent-contrast) !important;
}

/* Textos, fondos y badges que usaban "success" ahora son naranja */
.text-success {
  color: #ffffff !important
}

.bg-success {
  background-color: var(--rs-primary) !important;
}

.badge.bg-success {
  background-color: var(--rs-primary) !important;
}

/* Fondos */
.bg-dark {
  background-color: var(--rs-dark) !important;
  color: var(--rs-dark-ink);
}

.bg-light {
  background-color: var(--rs-light) !important;
}

/* Links */
a {
  color: var(--rs-accent);
}

a:hover {
  color: var(--rs-accent-600);
}

/* Navbar marca (título en naranja) */
.navbar .navbar-brand.logo {
  color: var(--rs-primary) !important;
}

/* Indicadores del carrusel al color de marca (naranja) */
.carousel-indicators [data-bs-target] {
  background-color: var(--rs-primary);
}

/* Focus bonito en formularios con el naranja */
.form-control:focus {
  border-color: var(--rs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-success-rgb), .25);
}




/* ======= HERO con video de fondo ======= */
.hero-wrap {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  /* alto mínimo del hero */
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(1.05);
  pointer-events: none;
  /* asegura que no intercepte clicks */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(224, 224, 224, .85) 0%, rgba(224, 224, 224, .85) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-content .h1,
.hero-content .h2,
.hero-content p {
  text-shadow: 0 12px 12px rgba(0, 0, 0, .35);
}

/* Asegura altura de cada slide para que el contenedor “exista” y el video se vea detrás */
.hero-content .carousel,
.hero-content .carousel-item {
  min-height: 520px;
}

/* Indicadores visibles */
.carousel-indicators [data-bs-target] {
  background-color: var(--rs-primary);
  opacity: .9;
}

/* ============ Sidebar base (de tu versión actual) ============ */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 220px;
  background-color: var(--rs-dark, #ebb99c);
  color: var(--rs-dark-ink, #e9ecef);
  z-index: 1030;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform .3s ease;
}

#sidebar .nav-link {
  color: var(--rs-dark-ink, #e9ecef);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  transition: background .2s ease;
}

#sidebar .nav-link:hover,
#sidebar .nav-link.active {
  background-color: var(--rs-primary, #F58220);
  color: var(--rs-primary-contrast, #fff);
}

/* Contenido corrido a la derecha cuando sidebar está visible */
#main-content {
  margin-left: 220px;
  transition: margin-left .3s ease;
}

/* ============ Botón hamburguesa flotante ============ */
.sidebar-toggle {
  position: fixed;
  top: 74px;
  /* debajo del topbar oscuro que ya tienes */
  left: 16px;
  z-index: 1040;
  /* por encima del sidebar */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}

/* ============ Overlay (para móvil) ============ */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(170, 150, 130, 0.35);
  z-index: 1025;
  /* debajo del botón, encima del contenido */
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.sidebar-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============ Estado COLAPSADO ============ */
/* Usamos una clase en <body> para controlar el estado */
body.sidebar-collapsed #sidebar {
  transform: translateX(-100%);
}

body.sidebar-collapsed #main-content {
  margin-left: 0;
}

/* ============ Responsive ============ */
/* En pantallas < 992px colapsamos por defecto */
@media (max-width: 991.98px) {
  body:not(.sidebar-open) #sidebar {
    transform: translateX(-100%);
  }

  body:not(.sidebar-open) #main-content {
    margin-left: 0;
  }

  /* Ajuste del botón para que siempre sea accesible */
  .sidebar-toggle {
    top: 66px;
    left: 12px;
  }
}

/* Cuando el sidebar esté abierto en móvil, agregamos una clase a body */
body.sidebar-open #sidebar {
  transform: translateX(0);
}

body.sidebar-open #main-content {
  margin-left: 220px;
}

/*BOTON MENU OCULTAR*/

/* Oculta el botón flotante cuando el menú está abierto */
.sidebar-toggle.is-hidden {
  display: none !important;
}


/* ======= Tema de color para el HERO (slider) ======= */
/* Paleta del hero (puedes ajustar tonos si lo deseas) */
:root {
  --hero-start: #F58220;
  /* Naranja marca */
  --hero-end: #c0c0c0;
  /* Azul marca */
  --hero-overlay-alpha: .60;
  /* intensidad del velo encima del video */
}

/* Hero con branding (aplícalo con .hero--brand en el section) */
.hero--brand .hero-video {
  filter: saturate(1.05) contrast(1.05) brightness(0.98);
}

/* Capa de color más atractiva (degradado diagonal + patrón sutil) */
.hero--brand .hero-overlay {
  background:
    /* Patrón sutil de puntitos (muy leve) */
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .12) 0 2px, transparent 3px) 0 0/26px 26px,
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .08) 0 2px, transparent 3px) 0 0/32px 32px,
    linear-gradient(120deg, color-mix(in srgb, var(--hero-start) 80%, #000 0%), color-mix(in srgb, var(--hero-end) 80%, #000 0%));
  opacity: var(--hero-overlay-alpha);
  /* Un toque de blur para el “vidrio” del texto */
  backdrop-filter: saturate(1.1) blur(1.5px);
}

/* Fondo por si no carga el video o en transición del carrusel */
.hero--brand .carousel-item {
  background: linear-gradient(120deg, var(--hero-start), var(--hero-end));
}

/* Cartas de texto tipo “glass” sobre el hero */
.glass {
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

/* Títulos y párrafos encima del glass: mejora contraste */
.hero--brand .glass .h1,
.hero--brand .glass .h2,
.hero--brand .glass p {
  text-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}

/* Indicadores del carrusel (píldoras) */
.hero--brand .carousel-indicators [data-bs-target] {
  width: 28px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  opacity: .85;
  transition: transform .2s ease, opacity .2s ease;
}

.hero--brand .carousel-indicators .active {
  background: #fff;
  transform: scale(1.12);
  opacity: 1;
}

/* Flechas del carrusel: botones circulares con halo */
.hero--brand .carousel-control-prev i,
.hero--brand .carousel-control-next i {
  background: rgba(0, 0, 0, .35);
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}

.hero--brand .carousel-control-prev:hover i,
.hero--brand .carousel-control-next:hover i {
  background: rgba(0, 0, 0, .5);
}

/* Altura mínima algo mayor en desktop para lucir el degradado */
@media (min-width: 992px) {

  .hero-wrap,
  .hero-content .carousel,
  .hero-content .carousel-item {
    min-height: 600px;
  }
}

/* Remate decorativo inferior del hero (onda) */
.hero--brand {
  position: relative;
}

.hero--brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 60px;
  background:
    radial-gradient(120px 14px at 10% 0, rgba(0, 0, 0, .12), transparent 70%),
    radial-gradient(120px 14px at 30% 0, rgba(0, 0, 0, .09), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, 1) 45%);
  /* se funde con la sección siguiente */
  pointer-events: none;
}

/* Un poco más de aire en el hero para que el sidebar no lo tape en desktop */
@media (min-width: 992px) {
  .hero--brand .container .row.p-5 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}




/*FLECHAS*/


/* === Flechas del carrusel: más pequeñas y SIN verde === */
.hero--brand .carousel-control-prev,
.hero--brand .carousel-control-next {
  width: auto;
}

.hero--brand .carousel-control-prev {
  left: 12px;
}

.hero--brand .carousel-control-next {
  right: 12px;
}

.hero--brand .carousel-control-prev i,
.hero--brand .carousel-control-next i {
  /* tamaño reducido */
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
  line-height: 1;

  /* estilo neutral (sin verde) */
  color: #fff !important;
  background: rgba(0, 0, 0, .35) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25) !important;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}

.hero--brand .carousel-control-prev:hover i,
.hero--brand .carousel-control-next:hover i {
  background: rgba(0, 0, 0, .55) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  transform: translateY(-1px);
}

/* mobile un pelín más chicas */
@media (max-width: 991.98px) {

  .hero--brand .carousel-control-prev i,
  .hero--brand .carousel-control-next i {
    width: 34px;
    height: 34px;
    font-size: 16px !important;
  }
}

/* === Indicadores del carrusel (píldoras) sin verde === */
.hero--brand .carousel-indicators [data-bs-target] {
  background: rgba(255, 255, 255, .85) !important;
  opacity: .85 !important;
  width: 26px;
  height: 6px;
  border-radius: 999px;
}

.hero--brand .carousel-indicators .active {
  background: #fff !important;
  opacity: 1 !important;
}

/* Por si el css del tema fuerza "success" (verde), neutralizamos ahí también */
.hero--brand .carousel-control-prev i.text-success,
.hero--brand .carousel-control-next i.text-success {
  color: #fff !important;
}