/* Custom overrides for Renta Techno */
/* .has-img-bg will try lolo@2x first, then fall back to lolo.jpeg */
.has-img-bg {
  background-image: url('../imgs/cpu@2x.jpeg'), url('../imgs/cpu.jpeg');
  background-size: cover; /* fill the column while preserving aspect ratio */
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;
  background-color: #111; /* fallback if image doesn't load */
}

/* If you prefer the image to cover the area on large screens, uncomment below and adjust */
/* @media (min-width: 1200px) {
  .has-img-bg { background-size: cover; }
} */

/* Global color palette - según tabla proporcionada por el usuario */
:root {
  /* Core palette */
  --color-azul-grisaceo: #2F4858; /* Azul grisáceo - encabezados o acentos */
  --color-gris-claro:    #E5E5E5; /* Gris claro - fondo */
  --color-blanco:        #FFFFFF; /* Blanco - fondo principal */
  --color-verde-azulado: #00BFA6; /* Verde azulado - botones o enlaces */
  --color-negro:         #000000; /* Negro - texto principal */

  /* Legacy aliases (mantener nombres previos para compatibilidad con reglas existentes) */
  --rtk-dark:   var(--color-azul-grisaceo);
  --rtk-light:  var(--color-gris-claro);
  --rtk-muted:  var(--color-blanco);
  --rtk-white:  var(--color-blanco);
  --rtk-accent: var(--color-verde-azulado);
}

/* Base page background and default text color */
body {
  background-color: var(--rtk-dark) !important;
  color: var(--rtk-white) !important;
}

/* Navbar and header */
.custom-navbar,
.navbar.custom-navbar,
.header {
  background-color: var(--rtk-dark) !important;
}

/* Navbar brand - make "Renta Techno" green-teal */
.navbar-brand,
.navbar-brand .brand-txt {
  color: var(--rtk-accent) !important;
}
.navbar-brand:hover,
.navbar-brand:focus {
  color: #009b8f !important;
}

/* Dark section / utility classes */
.bg-dark {
  background-color: var(--rtk-dark) !important;
  color: var(--rtk-white) !important;
}
.text-light { color: var(--rtk-white) !important; }

/* Primary text color - use green-teal accent */
.text-primary {
  color: var(--rtk-accent) !important;
}
a.text-primary:hover,
a.text-primary:focus {
  color: #009b8f !important;
}

/* Tab pills - make active/inactive nav-links green-teal */
.nav-pills .nav-link {
  color: var(--rtk-accent) !important;
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
  background-color: var(--rtk-accent) !important;
  color: #fff !important;
}

/* Light backgrounds */
.bg-light {
  background-color: var(--rtk-muted) !important;
  color: var(--rtk-dark) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--rtk-accent) !important;
  border-color: var(--rtk-accent) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus { background-color: #009b8f !important; border-color: #009b8f !important; }

/* Secondary buttons or accents (blue light) */
.btn-secondary,
.btn-outline-primary {
  background-color: var(--rtk-light) !important;
  border-color: var(--rtk-light) !important;
  color: #fff !important;
}

/* Override danger buttons and text to match primary accent (green-teal) */
.btn-danger {
  background-color: var(--rtk-accent) !important;
  border-color: var(--rtk-accent) !important;
  color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: #009b8f !important;
  border-color: #009b8f !important;
}
.text-danger {
  color: var(--rtk-accent) !important;
}
a.text-danger:hover,
a.text-danger:focus {
  color: #009b8f !important;
}

/* Badges - use green-teal accent color */
.badge-primary {
  background-color: var(--rtk-accent) !important;
  color: #fff !important;
}

/* Links: default use light-blue on light backgrounds, white on dark sections */
a { color: var(--rtk-light); }
.bg-dark a, .text-light a { color: var(--rtk-white) !important; }

/* Cards: ensure contrast when used over light/dark backgrounds */
.card { background-color: transparent; }
.card.bg-light, .card.bg-white { background-color: var(--rtk-muted) !important; color: var(--rtk-dark) !important; }
.card.bg-dark, .card.text-light { background-color: var(--rtk-dark) !important; color: var(--rtk-white) !important; }

/* Footer tweaks */
.container-fluid.has-height-md { background-color: var(--rtk-dark) !important; }

/* Map site list-group styling */
.list-group .list-group-item { background: transparent; color: var(--rtk-white); border: 0; }
.bg-light .list-group .list-group-item { color: var(--rtk-dark); }

/* Ensure form inputs and text-muted are readable on light backgrounds */
.text-muted { color: rgba(255,255,255,0.7) !important; }
.bg-light .text-muted { color: rgba(0,0,0,0.6) !important; }

/* Restore has-img-bg cover behavior (already present) */
.has-img-bg { background-size: cover; }

html{
  scroll-behavior: smooth;
}

/* Compact navbar tweaks: reduce overall height, link padding and brand size */
.custom-navbar {
  padding-top: 0.35rem; /* smaller vertical padding */
  padding-bottom: 0.35rem;
  width: 100%;
}
.custom-navbar .navbar-brand {
  font-size: 1.25rem; /* slightly smaller brand text */
  line-height: 1;
  margin: 0 auto;
}
.custom-navbar .nav-link {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.95rem; /* a bit smaller links */
}
.custom-navbar .btn {
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
}

/* Navbar toggler (hamburger menu) - make it visible */
.navbar-toggler {
  border-color: var(--rtk-accent) !important;
  padding: 0.25rem 0.5rem;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2300BFA6' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Navbar collapse/expand animation */
.collapse.show {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive: tablet (768px - 991px) */
@media (max-width: 991px) {
  /* On tablet and smaller, keep it compact but readable */
  .custom-navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .custom-navbar .navbar-brand { 
    font-size: 1.1rem;
    margin-right: auto;
  }
  .custom-navbar .nav-link { 
    font-size: 0.95rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Stack nav items vertically on mobile/tablet */
  .collapse.navbar-collapse {
    margin-top: 10px;
    background-color: rgba(47, 72, 88, 0.95);
    padding: 10px 0;
    border-radius: 4px;
  }
  
  .navbar-nav {
    flex-direction: column;
  }
  
  .navbar-nav .nav-item {
    padding: 5px 0;
  }
  
  .navbar-nav .nav-link {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  .navbar-nav .btn {
    margin-left: 1.5rem !important;
    margin-top: 10px;
  }
  
  .ml-auto {
    margin-left: 0 !important;
  }
}

/* Mobile (< 576px) */
@media (max-width: 576px) {
  .custom-navbar {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }
  .custom-navbar .navbar-brand {
    font-size: 1rem;
  }
  .custom-navbar .nav-link {
    font-size: 0.9rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .custom-navbar .btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
  }
  
  .collapse.navbar-collapse {
    margin-top: 8px;
  }
  
  .navbar-nav .nav-link {
    padding-left: 1rem !important;
  }
  
  .navbar-nav .btn {
    margin-left: 1rem !important;
  }
}

/* Compact page footer tweaks: make the footer block a bit smaller */
.container-fluid.has-height-md {
  /* More compact: reduce vertical spacing */
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.container-fluid.has-height-md .row > div {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.container-fluid.has-height-md h3 {
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}
.container-fluid.has-height-md p,
.container-fluid.has-height-md P {
  margin-bottom: 0.15rem;
  font-size: 0.85rem;
}

/* Reduce height of the small copyright bar under the footer */
/* .bg-dark.text-light.text-center.border-top.wow.fadeIn {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;

} */
.bg-dark.text-light.text-center.border-top.wow.fadeIn p { margin-bottom: 0; font-size: 0.8rem; }

/* Extra compacting for the small contact-info box so text sits closer to the box edges */
.container-fluid.has-height-md.text-center .row { margin: 0; }
.container-fluid.has-height-md.text-center .row > div {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}
.container-fluid.has-height-md.text-center h3 {
  margin: 0.15rem 0 0.08rem;
  font-size: 0.9rem;
  line-height: 1.1;
}
.container-fluid.has-height-md.text-center p,
.container-fluid.has-height-md.text-center P {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.2;
}

@media (max-width: 576px) {
  /* make sure tiny screens remain readable */
  .container-fluid.has-height-md { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
  .container-fluid.has-height-md h3 { font-size: 1rem; }
  .container-fluid.has-height-md p { font-size: 0.9rem; }
}

/* Carousel Controls - Make arrows visible and functional */
.carousel {
  position: relative;
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 2rem;
  height: 2rem;
  background-color: rgba(0, 191, 166, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(0, 191, 166, 1);
  transform: scale(1.15);
}

.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
}

.carousel-control-prev-icon::before {
  border-width: 8px 12px 8px 0;
  border-color: transparent #fff transparent transparent;
}

.carousel-control-next-icon::before {
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #fff;
}

/* Carousel indicators */
.carousel-indicators {
  bottom: 20px;
}

.carousel-indicators li {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-indicators li.active {
  background-color: var(--rtk-accent);
  width: 12px;
  height: 12px;
}

.carousel-indicators li:hover {
  background-color: rgba(255, 255, 255, 0.8);
}