/* Frontend base (Fase 2) */

.ozc-hide-desktop {
  display: none !important;
}

@media (max-width: 782px) {
  .ozc-hide-mobile {
    display: none !important;
  }
  .ozc-hide-desktop {
    display: initial !important;
  }
}

/* Quote form (Fase 4) */
.ozc-quote-form {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}

.ozc-quote-form__title {
  margin: 0 0 12px;
}

.ozc-quote-form__notice {
  padding: 10px 12px;
  border-radius: 8px;
  margin: 0 0 12px;
  background: #f6f6f6;
}

.ozc-quote-form__notice--success {
  background: #e9f8ef;
}

.ozc-quote-form__notice--error {
  background: #fdecec;
}

.ozc-quote-form__summary {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
}

.ozc-quote-form__items {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ozc-quote-form__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
}

.ozc-quote-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ozc-quote-form__grid p {
  margin: 0;
  display: grid;
  gap: 6px;
}

.ozc-quote-form__notes {
  grid-column: 1 / -1;
}

.ozc-quote-form input,
.ozc-quote-form textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 100%;
}

.ozc-quote-form__submit {
  border: 1px solid #111;
  background: #111;
  color: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 782px) {
  .ozc-quote-form__grid {
    grid-template-columns: 1fr;
  }
  .ozc-quote-form__item {
    grid-template-columns: 1fr auto;
  }
  .ozc-quote-form__item-price {
    grid-column: 1 / -1;
    color: #444;
  }
}

/* Texto solo para lectores de pantalla (front) */
.screen-reader-text,
.ozc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Modal asesores WhatsApp */
:root.ozc-advisor-modal-open {
  overflow: hidden;
}

.ozc-advisor-float-wrap {
  position: fixed;
  bottom: 24px;
  z-index: 9997;
}

.ozc-advisor-float-wrap--left {
  left: 24px;
}

.ozc-advisor-float-wrap--right {
  right: 24px;
}

.ozc-advisor-float-btn {
  border: 0;
  cursor: pointer;
  color: #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(37, 211, 102, 0.38);
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.ozc-advisor-float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 32px rgba(37, 211, 102, 0.48);
}

.ozc-advisor-float-btn:active {
  transform: scale(0.95);
}

.ozc-advisor-float-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  z-index: -1;
  animation: ozcFloatPulse 2s ease-out infinite;
}

.ozc-advisor-float-wrap--size-sm .ozc-advisor-float-btn {
  width: 60px;
  height: 60px;
}

.ozc-advisor-float-wrap--size-md .ozc-advisor-float-btn {
  width: 60px;
  height: 60px;
}

.ozc-advisor-float-wrap--size-lg .ozc-advisor-float-btn {
  width: 60px;
  height: 60px;
}

.ozc-advisor-float-btn__icon {
  display: block;
  width: 28px;
  height: 28px;
}

@keyframes ozcFloatPulse {
  0% {
    transform: scale(1);
    opacity: 0.32;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.ozc-advisor-modal {
  /* Paleta: hereda del design pack del sitio; si no lo declara, gris neutro.
     Para cambiar un sitio, redefinir estas variables en
     uploads/oz-cotizador/css/frontend.css (esa hoja se encola DETRAS). */
  --ozc-advisor-accent: var(--ozc-pack-accent, #1f2937);
  --ozc-advisor-dark: var(--ozc-pack-dark, #11161c);
  --ozc-advisor-dark-text: #ffffff;
  /* Color de lo que va ENCIMA del acento. Con una marca clara (el amarillo de
     Malviseg) el blanco no se lee, así que el plugin publica aquí el tono que
     toca según la luminancia del color de marca. */
  --ozc-advisor-on-accent: var(--ozc-pack-on-accent, #ffffff);
  --ozc-advisor-surface: var(--ozc-pack-surface, #ffffff);
  --ozc-advisor-text: var(--ozc-pack-text, #1a1a1a);
  --ozc-advisor-muted: var(--ozc-pack-muted, #6b7280);
  --ozc-advisor-border: var(--ozc-pack-border, #e6e6e6);
  --ozc-advisor-radius: 20px;
  --ozc-advisor-pad: 24px;
  --ozc-advisor-wa: #1faa55;
  --ozc-advisor-wa-hover: #17893f;

  position: fixed;
  inset: 0;
  /* Debe quedar por encima del Sidecart (z-index: 1000000). */
  z-index: 1000002;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .ozc-advisor-modal {
    align-items: center;
  }
}

.ozc-advisor-modal[hidden] {
  display: none;
}

.ozc-advisor-modal *,
.ozc-advisor-modal *::before,
.ozc-advisor-modal *::after {
  box-sizing: border-box;
}

.ozc-advisor-modal__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ozc-advisor-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.ozc-advisor-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: min(88vh, 660px);
  background: var(--ozc-advisor-surface);
  color: var(--ozc-advisor-text);
  border-radius: var(--ozc-advisor-radius) var(--ozc-advisor-radius) 0 0;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* El detalle de color de la marca, arriba del todo */
  border-top: 4px solid var(--ozc-advisor-accent);
}

@media (min-width: 600px) {
  .ozc-advisor-modal__panel {
    border-radius: var(--ozc-advisor-radius);
  }
}

/* ---- Cabecera oscura ---- */

.ozc-advisor-modal__header {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: var(--ozc-advisor-pad);
  background: var(--ozc-advisor-dark);
  color: var(--ozc-advisor-dark-text);
}

.ozc-advisor-modal__badge {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--ozc-advisor-accent);
  color: var(--ozc-advisor-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ozc-advisor-modal__badge-icon {
  width: 30px;
  height: 30px;
}

.ozc-advisor-modal__heading {
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 32px;
}

.ozc-advisor-modal__title {
  margin: 0;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

.ozc-advisor-modal__subtitle {
  margin: 4px 0 0;
  font-size: clamp(0.9rem, 2.6vw, 1rem);
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}

.ozc-advisor-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 0;
  background: transparent;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ozc-advisor-dark-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ozc-advisor-modal__close:hover,
.ozc-advisor-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.ozc-advisor-modal__close-icon {
  width: 20px;
  height: 20px;
}

/* ---- Tarjetas de asesor ---- */

.ozc-advisor-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--ozc-advisor-pad);
  -webkit-overflow-scrolling: touch;
}

.ozc-advisor-modal__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.ozc-advisor-modal__item {
  border: 1px solid var(--ozc-advisor-border);
  border-radius: 14px;
  padding: 16px;
  background: var(--ozc-advisor-surface);
}

.ozc-advisor-modal__item--empty {
  color: var(--ozc-advisor-muted);
  text-align: center;
}

.ozc-advisor-modal__persona {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.ozc-advisor-modal__avatar {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Fondo: el tono de marca muy rebajado. Icono: el mismo tono oscurecido, que
     sobre ese fondo pálido se lee tanto si la marca es roja como amarilla. */
  background: color-mix(in srgb, var(--ozc-advisor-accent) 14%, #ffffff);
  color: color-mix(in srgb, var(--ozc-advisor-accent) 72%, #000000);
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
  .ozc-advisor-modal__avatar {
    background: #f1f3f5;
    color: var(--ozc-advisor-text);
  }
}

.ozc-advisor-modal__avatar-icon {
  width: 30px;
  height: 30px;
}

.ozc-advisor-modal__datos {
  min-width: 0;
}

.ozc-advisor-modal__nombre {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ozc-advisor-text);
  overflow-wrap: anywhere;
}

.ozc-advisor-modal__cargo {
  margin: 2px 0 0;
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ozc-advisor-muted);
}

/* ---- Botón de WhatsApp ---- */

.ozc-advisor-modal__wa {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--ozc-advisor-wa);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}

.ozc-advisor-modal__wa:hover,
.ozc-advisor-modal__wa:focus-visible {
  background: var(--ozc-advisor-wa-hover);
  color: #ffffff;
  text-decoration: none;
}

.ozc-advisor-modal__wa-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}

.ozc-advisor-modal__wa-texto {
  flex: 1 1 auto;
  text-align: center;
}

.ozc-advisor-modal__wa-flecha {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

/* ---- Pie ---- */

.ozc-advisor-modal__footer {
  flex: 0 0 auto;
  padding: 0 var(--ozc-advisor-pad) var(--ozc-advisor-pad);
  text-align: center;
  font-size: 0.92rem;
  color: var(--ozc-advisor-muted);
}

@media (max-width: 420px) {
  .ozc-advisor-modal {
    padding: 16px;
  }

  .ozc-advisor-modal__header,
  .ozc-advisor-modal__body {
    padding: 18px;
  }

  .ozc-advisor-modal__footer {
    padding: 0 18px 18px;
  }

  .ozc-advisor-modal__badge {
    width: 46px;
    height: 46px;
  }

  .ozc-advisor-modal__badge-icon {
    width: 24px;
    height: 24px;
  }

  .ozc-advisor-modal__item {
    padding: 14px;
  }

  /* Que «Cotizar por WhatsApp» quepa en una línea a 375 px */
  .ozc-advisor-modal__wa {
    gap: 8px;
    padding: 12px 12px;
  }

  .ozc-advisor-modal__wa-icon {
    width: 22px;
    height: 22px;
  }

  .ozc-advisor-modal__wa-flecha {
    width: 18px;
    height: 18px;
  }

  .ozc-advisor-modal__wa-texto {
    font-size: 0.92rem;
  }
}

/* =========================================================
   Estilo 2: logo del sitio en la cabecera y el botón de
   WhatsApp a la derecha del nombre, no debajo.
   ========================================================= */

.ozc-advisor-modal--estilo-2 .ozc-advisor-modal__header {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.ozc-advisor-modal__logo {
  max-height: 42px;
  max-width: 190px;
  width: auto;
  height: auto;
}

.ozc-advisor-modal--estilo-2 .ozc-advisor-modal__heading {
  padding-right: 0;
}

.ozc-advisor-modal--estilo-2 .ozc-advisor-modal__item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ozc-advisor-modal--estilo-2 .ozc-advisor-modal__persona {
  flex: 1 1 auto;
  min-width: 140px;
  margin-bottom: 0;
}

.ozc-advisor-modal--estilo-2 .ozc-advisor-modal__wa {
  /* No crece ni encoge: manda el ancho de su contenido. Si la persona no cabe
     al lado, la fila hace wrap y el botón pasa abajo a todo el ancho. */
  flex: 0 0 auto;
  width: auto;
  justify-content: center;
}

/* El botón inline no necesita la flecha: no hay nada debajo a lo que apuntar */
.ozc-advisor-modal--estilo-2 .ozc-advisor-modal__wa-flecha {
  display: none;
}

.ozc-advisor-modal--estilo-2 .ozc-advisor-modal__wa-texto {
  flex: 0 1 auto;
}

/* En móvil vuelve a apilarse: a 375 px no caben nombre y botón en una fila */
@media (max-width: 520px) {
  .ozc-advisor-modal--estilo-2 .ozc-advisor-modal__persona {
    flex: 1 1 100%;
    margin-bottom: 12px;
  }

  .ozc-advisor-modal--estilo-2 .ozc-advisor-modal__wa {
    flex: 1 1 100%;
    width: 100%;
  }

  .ozc-advisor-modal--estilo-2 .ozc-advisor-modal__wa-flecha {
    display: block;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ozc-advisor-modal__panel {
    animation: ozc-advisor-entra 0.18s ease-out;
  }
}

@keyframes ozc-advisor-entra {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Apilado FAB: WhatsApp arriba, carrito abajo (mismo lado) */
.ozc-fab-stack {
  position: fixed;
  bottom: 24px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  pointer-events: none;
}

.ozc-fab-stack > * {
  pointer-events: auto;
}

.ozc-fab-stack--left {
  left: 24px;
  align-items: flex-start;
}

.ozc-fab-stack--right {
  right: 24px;
  align-items: flex-end;
}

.ozc-advisor-float-wrap--in-stack {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
}

.ozc-sidecart-fab--in-stack {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
}