/* Tema visual de HAVIT para /tienda, alineado con havitspain.com:
   solo colores, tipografia y formas por encima de xdashboard.css /
   xgest10.css (que se cargan antes) - nunca toca contenido, productos
   ni fotos de articulos. Cargar siempre el ultimo en <head>. */

:root {
  --havit-ink: #0c0c0e;
  --havit-text: #14141a;
  --havit-muted: #6b6b74;
  --havit-border: #e8e6e1;
  --havit-accent: #6b6b74;
  --havit-accent-hover: #55555c;
}

body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--havit-text);
}
body.NObg-gray-200 {
  background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.navbar-brand {
  font-family: "Sora", "Segoe UI", Arial, sans-serif;
}

/* Titulos y textos destacados que salen en negro por defecto -> acento
   de marca. Sin !important a proposito: donde ya hacen falta blancos
   sobre fondo oscuro (.text-white, casi siempre con !important) siguen
   ganando, esto solo sustituye el negro por defecto. */
h1, h2, h3, h4, h5, h6,
.card-title {
  color: var(--havit-accent);
}

/* Gradientes de la plantilla (rosa/azul) -> marca HAVIT (negro/gris de acento) */
.bg-gradient-primary {
  background-image: none;
  background-color: var(--havit-accent);
}
.bg-gradient-info {
  background-image: none;
  background-color: var(--havit-ink);
}
.bg-gradient-dark {
  background-image: none;
  background-color: var(--havit-ink);
}
.bg-gradient-secondary {
  background-image: none;
  background-color: var(--havit-muted);
}

/* Botones primarios: color de acento y forma en pildora, como en havitspain.com */
.btn-primary,
.btn.bg-gradient-primary {
  background-color: var(--havit-accent);
  border-color: var(--havit-accent);
  box-shadow: 0 10px 24px -10px rgba(107, 107, 116, 0.55);
}
.btn-primary:hover,
.btn.bg-gradient-primary:hover {
  background-color: var(--havit-accent-hover) !important;
  border-color: var(--havit-accent-hover) !important;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.btn.bg-gradient-primary:not(:disabled):not(.disabled).active,
.btn.bg-gradient-primary:not(:disabled):not(.disabled):active,
.show > .btn.bg-gradient-primary.dropdown-toggle {
  background-color: var(--havit-accent-hover) !important;
}
.btn {
  border-radius: 999px;
}

/* Enlaces y texto de acento (Registrarse, Recuperar contraseña...) */
.text-primary {
  color: var(--havit-accent) !important;
}
.text-gradient.text-primary {
  background-image: none;
  -webkit-text-fill-color: var(--havit-accent);
  color: var(--havit-accent);
}

/* Campos de formulario (login, registro...): la etiqueta ("Usuario/Mail",
   "Clave"...) va superpuesta sobre el borde de la caja por diseño de la
   plantilla (el "notch" tipo Material) y en produccion se ve mal (una
   linea cruza el texto, como tachado) pase lo que pase con esa linea
   decorativa propia - ni quitandola se arregla, asi que el problema no
   es esa linea sino la propia superposicion. En vez de seguir
   ajustando ese mecanismo, se saca la etiqueta de encima del borde por
   completo: pasa a ser una etiqueta normal, en flujo, colocada encima
   de la caja (no fija/superpuesta), sin depender de ningun estado. */
.input-group.input-group-outline .form-label {
  position: static !important;
  top: auto !important;
  display: block !important;
  width: 100% !important;
  margin: 0 0 0.35rem 0.15rem !important;
  line-height: 1.2 !important;
}
.input-group.input-group-outline .form-label:before,
.input-group.input-group-outline .form-label:after {
  content: none !important;
}

/* Campos de formulario: foco en color de acento en vez de rosa */
.input-group.input-group-outline.is-focused .form-label + .form-control,
.input-group.input-group-outline.is-filled .form-label + .form-control {
  border-color: var(--havit-accent) !important;
  box-shadow: inset 1px 0 var(--havit-accent), inset -1px 0 var(--havit-accent), inset 0 -1px var(--havit-accent) !important;
}
.input-group.input-group-outline.is-focused .form-label,
.input-group.input-group-outline.is-filled .form-label {
  color: var(--havit-accent);
}
.input-group.input-group-outline.is-focused .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-filled .form-label:after {
  border-top-color: var(--havit-accent);
  box-shadow: inset 0 1px var(--havit-accent);
}

/* Tarjetas: esquinas mas redondeadas, como en havitspain.com */
.card {
  border-radius: 16px;
  border-color: var(--havit-border);
}

/* Sidebar: item activo con el acento de marca en vez del gris translucido por defecto */
.navbar-vertical .navbar-nav > .nav-item .nav-link.active {
  background-color: rgba(107, 107, 116, 0.28);
}

/* El sitio tiene configurado un "skin" (session('config')['x_skin'],
   clase en <body>) que en xgest10.css trae sus PROPIOS azules con mas
   especificidad que las reglas de arriba (".skin-blue .bg-gradient-dark"
   gana a ".bg-gradient-dark" a secas) - de ahi que la barra lateral y la
   de arriba siguieran en azul pese al resto del tema. Se sobreescribe
   aqui con la misma especificidad, con el gris neutro real de la
   cabecera de havitspain.com (var(--muted) en css/styles.css, #6b6b74),
   no el rojo/naranja del boton "Ver tienda" que se probo antes. */
.skin-blue .sidenav .navbar-brand,
.skin-blue .navbar-main,
.skin-blue .navbar-collapse,
.skin-blue .sidenav-header,
.skin-blue .bg-gradient-dark {
  background-color: var(--havit-accent);
  background-image: none;
}
.skin-blue hr.horizontal.light {
  background-color: var(--havit-accent-hover);
}
.skin-blue .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapse .nav-item .nav-link.active+.collapse .nav-item .nav-link.active,
.skin-blue .navbar-vertical .navbar-nav>.nav-item .nav-link.active+.collapsing .nav-item .nav-link.active+.collapse .nav-item .nav-link.active {
  background-image: linear-gradient(195deg, var(--havit-accent-hover) 0%, var(--havit-accent-hover) 100%);
}
.skin-blue .articuloMouseOver {
  border-color: var(--havit-accent);
}
.skin-blue .articuloMouseOver:hover {
  border-color: var(--havit-accent-hover);
}

/* Nombre del articulo en las tarjetas del listado: mismo cuerpo de
   texto que havitspain.com (Inter) en vez de heredar el azul/subrayado
   por defecto del enlace sin estilo. No toca el contenido, solo el
   tipo de letra y el color del texto. */
.boxTitulo a,
.boxTitulo_lista a,
.boxTitulo_lista2 a {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--havit-text);
  text-decoration: none;
}
.boxTitulo a:hover,
.boxTitulo_lista a:hover,
.boxTitulo_lista2 a:hover {
  color: var(--havit-accent);
}

/* Separacion entre articulos del listado: el borde por defecto
   (#f0f0f0) es casi invisible sobre fondo blanco - un tono mas oscuro
   para que cada tarjeta se distinga con claridad. */
.boxGlobal {
  border-color: #d9d7d1;
}

/* Miniaturas de "También le puede interesar" / relacionados (ficha de
   producto): el borde por defecto es de 5px, mucho mas grueso que el
   de las tarjetas del listado principal (1px) - se iguala el grosor. */
.articuloMouseOver {
  border-width: 1px;
}

/* Recuadros de aviso ("Inicie sesion...", "No hay productos..."), en el
   mismo acento que la barra lateral y la de arriba en vez del
   azul claro por defecto de Bootstrap. */
.alert-info {
  background-color: var(--havit-accent);
  border-color: var(--havit-accent);
  color: #ffffff;
}
.alert-info .alert-link {
  color: #ffffff;
}

/* Carrusel de videos de producto en la cabecera del home, en vez del
   banner generico de la plantilla (ver livewire/listados.blade.php). */
.video-carousel {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--havit-ink);
}
.video-carousel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.video-carousel video.is-active {
  opacity: 1;
}
@media (max-width: 600px) {
  .video-carousel {
    height: 280px;
  }
}

/* Paginacion de listados: el azul de Bootstrap por defecto -> rojo
   corporativo del logo (mismo #e6392c del boton de busqueda de la cabecera). */
.pagination .page-link {
  color: var(--havit-text);
}
.pagination .page-link:hover {
  color: #e6392c;
}
.pagination .page-item.active .page-link {
  background-color: #e6392c;
  border-color: #e6392c;
  color: #fff;
}