/*
 * Chrome legacy mínimo: lo que el rediseño Tailwind sigue necesitando
 * (header RGB, dropdowns, mobile nav, autocomplete, slick del producto).
 * NO incluye tipografía/links/colores viejos de styles.css.
 */

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

@keyframes rgbBox {
  0% {
    background-position: 400% 0%;
  }
  100% {
    background-position: 0% 400%;
  }
}

/* Bootstrap pinta los <a> de azul y los subraya al hover. */
a,
a:hover,
a:focus,
a:active {
  color: inherit;
  text-decoration: none;
}

/* Preflight está desactivado: sin esto los <li> muestran bullets de user-agent. */
ul,
ol {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.hd-prose ul,
.hd-prose ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.hd-prose ul {
  list-style: disc;
}

.hd-prose ol {
  list-style: decimal;
}

/*
 * Bootstrap reboot pone -webkit-appearance: button en <button>.
 * Los botones "texto" del rediseño (bg-transparent) necesitan reset.
 */
button.bg-transparent {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
}

header {
  color: #fff;
  background: #000;
  z-index: 11 !important;
  position: relative;
  width: 100%;
  top: 0;
}

header:after {
  content: '';
  background: linear-gradient(
    45deg,
    #ff7800 0%,
    red 16%,
    #ff7800 32%,
    #ff0 50%,
    #fff 66%,
    #ff0 82%,
    #ff7800 100%
  );
  background-size: 400% 400%;
  animation: rgbBox 20s linear infinite;
  display: block;
  height: 3px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

header a:hover,
header a:focus {
  text-decoration: none;
}

.hd-mega-surface {
  box-shadow: 0 0 0 100vmax #0a0a0a;
  clip-path: inset(0 -100vmax);
}

/* Dropdowns del menú (hover) — lo abre styles.css históricamente */
header .navbar-nav .nav-item {
  position: relative;
}

header .navbar-nav li a:hover + .dropdown-menu,
header .navbar-nav .dropdown-menu:hover,
header .navbar-nav .dropdown-menu.collapse.show {
  z-index: 20;
  top: 100%;
  position: absolute;
  margin-left: 0;
  opacity: 1;
  visibility: visible;
  display: block;
}

header .dropdown-menu-two {
  left: 100% !important;
  top: 0 !important;
}

header #navigation_mobile {
  display: none;
  visibility: hidden;
  position: absolute;
  left: -100%;
  padding: 0;
}

/* Autocomplete del buscador */
#desktopResults {
  display: block;
  height: 250px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  visibility: hidden;
  z-index: 30;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 0 0 12px 12px;
}

.searchText:focus + #desktopResults,
#desktopResults:focus,
#desktopResults:hover {
  visibility: visible !important;
}

#desktopResults .dropdown-item:focus,
#desktopResults .dropdown-item:hover {
  background: #f5f5f4;
  color: #0c0a09 !important;
}

/* Alturas del zoom/slick en ficha de producto */
:root {
  --slick-slider-nav-height: 420px;
  --slick-slider-for-height: 380px;
  --slick-count: 3;
}

#product-details .slick-initialized .slick-slide,
#product-details .slick-initialized .slick-slide div {
  height: var(--slick-slider-nav-height);
  text-align: center;
}

#product-details .slider-nav .slick-slide,
#product-details .slider-nav .slick-slide div {
  height: calc(var(--slick-slider-for-height) / var(--slick-count));
}

#product-details .slick-slide img {
  display: inline-block !important;
  height: 100%;
}

#product-details .slick-slider {
  margin-bottom: 20px;
}

/* Mobile: hamburguesa + drawer */
@media only screen and (max-width: 1023px) {
  header #navigation {
    display: none !important;
  }

  header .navbar-toggler {
    display: flex !important;
  }

  header .navbar-collapse {
    position: fixed !important;
    top: 0;
    z-index: 40;
    bottom: 0;
    left: 100% !important;
    width: min(320px, 85%);
    overflow-y: auto;
    visibility: hidden;
    background-color: #000;
    transition:
      visibility 0.2s ease-in-out,
      transform 0.2s ease-in-out;
  }

  header .navbar-collapse.show {
    visibility: visible !important;
    display: block !important;
    transform: translateX(-100%);
  }
}

@media (max-width: 992px) {
  :root {
    --slick-slider-nav-height: 460px;
    --slick-slider-for-height: 460px;
  }
}

@media only screen and (max-width: 991px) {
  :root {
    --slick-slider-nav-height: 280px;
    --slick-slider-for-height: 300px;
  }
}

#reparaciones label,
#reparaciones .col-form-label {
  display: block;
  margin-bottom: 6px;
  color: #57534e;
  font-size: 13px;
  font-weight: 600;
}

#reparaciones .form-control,
#reparaciones select.form-control,
#reparaciones textarea.form-control {
  height: auto;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  color: #0c0a09;
  font-size: 14px;
  padding: 10px 12px;
}

#reparaciones .form-control:focus {
  border-color: #0c0a09;
  box-shadow: none;
}

#reparaciones .btn-primary {
  border: 0 !important;
  border-radius: 10px;
  background: #ff7800 !important;
  color: #000 !important;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 18px;
}

#reparaciones .input-group-text {
  border: 1px solid #e7e5e4;
  background: #fafaf9;
  color: #57534e;
  font-size: 13px;
}

#reparaciones #progress-bar {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin: 0 0 28px;
  overflow: visible;
  color: #a8a29e;
  counter-reset: hd-step;
}

#reparaciones #progress-bar li {
  position: relative;
  flex: 1;
  min-width: 0;
  list-style: none;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  counter-increment: hd-step;
}

#reparaciones #progress-bar li:before {
  content: counter(hd-step);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: #e7e5e4;
  color: #57534e;
  font-size: 13px;
  font-weight: 700;
}

#reparaciones #progress-bar li:after {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(-50% + 20px);
  right: calc(50% + 20px);
  height: 2px;
  background: #e7e5e4;
  z-index: 0;
}

#reparaciones #progress-bar li:first-child:after {
  display: none;
}

#reparaciones #progress-bar li.active,
#reparaciones #progress-bar li.active a {
  color: #0c0a09;
}

#reparaciones #progress-bar li.active:before,
#reparaciones #progress-bar li.active:after {
  background: #ff7800;
  color: #000;
}

#reparaciones #progress-bar li a {
  color: inherit;
  text-decoration: none;
}

#reparaciones .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

#reparaciones .form-check input[type='checkbox'] {
  position: static;
  margin: 0;
}

#reparaciones .help-block,
#reparaciones .form-control + ul,
#reparaciones .form-check + ul {
  margin-top: 6px;
  color: #b91c1c;
  font-size: 12px;
}

#reparaciones .hd-gen-serial {
  display: inline;
  margin-left: 8px;
  border: 0;
  background: none;
  color: #ff7800;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
}

#reparaciones .hd-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

#reparaciones .hd-table th,
#reparaciones .hd-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f5f5f4;
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
}

#reparaciones .hd-table th {
  border-bottom-color: #e7e5e4;
  color: #78716c;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#reparaciones .hd-table tr:last-child td {
  border-bottom: 0;
}

#reparaciones .btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}

#reparaciones .btn-danger {
  border: 0;
  border-radius: 10px;
  background: #b91c1c;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 18px;
}

.hd-prose > :first-child {
  margin-top: 0;
}

.hd-prose p,
.hd-prose ul,
.hd-prose ol {
  margin: 0 0 1rem;
  color: #44403c;
  font-size: 14px;
  line-height: 1.65;
}

.hd-prose h1,
.hd-prose h2,
.hd-prose h3,
.hd-prose h4 {
  margin: 1.25rem 0 0.5rem;
  color: #0c0a09;
  font-weight: 700;
  line-height: 1.25;
}

.hd-prose h1 {
  font-size: 22px;
}

.hd-prose h2 {
  font-size: 18px;
}

.hd-prose h3,
.hd-prose h4 {
  font-size: 15px;
}

.hd-prose table {
  width: 100%;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
}

.hd-prose th,
.hd-prose td {
  padding: 10px 12px;
  border-bottom: 1px solid #e7e5e4;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

.hd-prose th {
  color: #78716c;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.red {
  color: #d10024;
}