/*****************************
 Distriópticas - estilos de tienda
 Complementa main.css (tema Furtrate) sin modificarlo.
*****************************/

/* ---------- Barra de distribuidor activo ---------- */
.dist-barra {
  background: #1e9bd7;
  color: #fff;
  text-align: center;
  font-size: 13px;
  padding: 6px 15px;
  line-height: 1.5; }
  .dist-barra a {
    color: #fff;
    text-decoration: underline;
    margin-left: 8px; }
  .dist-barra i {
    font-size: 15px;
    vertical-align: middle; }

/* ---------- Botón del header ---------- */
.dist-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #292323;
  border-radius: 30px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #292323;
  white-space: nowrap;
  line-height: 1.4;
  transition: all .2s ease; }
  .dist-chip i {
    font-size: 18px; }
  .dist-chip:hover {
    background: #292323;
    color: #fff; }
  .dist-chip--activo {
    background: #1e9bd7;
    border-color: #1e9bd7;
    color: #fff;
    cursor: default; }
    .dist-chip--activo:hover {
      background: #1e9bd7; }
  @media (max-width: 47.94em) {
    .dist-chip {
      padding: 5px 9px; }
    .dist-chip:not(.dist-chip--activo) .dist-chip__texto {
      display: none; } }

.header-toolbar .header-toolbar__item + .header-toolbar__item {
  margin-left: 18px; }

.dist-enlace {
  color: #292323;
  font-weight: 500;
  text-decoration: underline; }
  .dist-enlace:hover {
    color: #ff5151; }

/* ---------- Avisos de distribuidor (carrito / producto) ---------- */
.dist-carrito {
  background: #f4f8fa;
  border-left: 3px solid #292323;
  padding: 10px 14px;
  font-size: 14px; }
  .dist-carrito a {
    font-weight: 500;
    text-decoration: underline; }
  .dist-carrito--activo {
    border-left-color: #1e9bd7;
    color: #0f5f86; }

.dist-caja {
  background: #f6f6f6;
  padding: 25px; }
  .dist-caja h5 i {
    font-size: 20px;
    vertical-align: middle; }
  .dist-caja__form {
    display: flex;
    gap: 10px; }
    .dist-caja__form .form__input {
      flex: 1;
      min-width: 0;
      text-transform: uppercase;
      border: 1px solid #e5e5e5; }

/* ---------- Modal código de distribuidor ---------- */
.modal-distribuidor .modal-dialog {
  max-width: 480px; }
.modal-distribuidor .modal-content {
  border: 0;
  border-radius: 0; }
.modal-distribuidor .modal-body {
  position: relative;
  padding: 45px 40px 35px;
  text-align: center; }
.modal-distribuidor .close {
  position: absolute;
  top: 12px;
  right: 15px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #292323; }
.modal-distribuidor__icono {
  width: 70px;
  height: 70px;
  line-height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #f4f8fa;
  color: #1e9bd7;
  font-size: 34px; }
.modal-distribuidor__titulo {
  font-size: 22px;
  margin-bottom: 10px; }
.modal-distribuidor__texto {
  font-size: 14px;
  margin-bottom: 25px; }
.modal-distribuidor__form {
  display: flex;
  gap: 10px; }
  .modal-distribuidor__form .form__input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 1px solid #e5e5e5;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500; }
  .modal-distribuidor__form .btn {
    height: 46px;
    padding: 0 25px; }
.modal-distribuidor__error {
  color: #d9534f;
  font-size: 13px;
  min-height: 20px;
  margin: 8px 0 0; }
.modal-distribuidor__omitir {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: #999;
  text-decoration: underline; }
@media (max-width: 35.94em) {
  .modal-distribuidor .modal-body {
    padding: 40px 20px 25px; } }

/* ---------- Etiquetas en tarjetas de producto ---------- */
.ft-product .product-image {
  position: relative; }
.producto-etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: #292323;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  text-transform: uppercase; }
  .producto-etiqueta--dist {
    background: #1e9bd7; }

.producto-foto img {
  aspect-ratio: 1 / 1;
  object-fit: cover; }

/* ---------- Variantes seleccionadas ---------- */
.variation-form .product-size-variations .product-size-variation-btn.selected {
  border-color: #292323;
  background: #292323;
  color: #fff; }

/* ---------- Totales (mini carrito, carrito, checkout) ---------- */
.totales-fila {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 0;
  font-size: 15px; }
  .totales-fila--descuento {
    color: #1e9bd7; }
  .totales-fila--total {
    border-top: 1px solid #e5e5e5;
    margin-top: 5px;
    padding-top: 12px;
    font-size: 20px;
    font-weight: 700;
    color: #292323; }

.mini-cart__total {
  margin-bottom: 20px; }
  .mini-cart__total span {
    font-size: inherit; }
.mini-cart__vacio {
  padding: 20px 0;
  color: #999; }
.mini-cart__product-quantity s {
  font-size: 12px; }

.carrito-acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px; }

.carrito-vacio-icono {
  font-size: 70px;
  color: #ccc;
  display: block;
  margin-bottom: 15px; }

#carritoPagina .product-thumbnail img {
  width: 80px;
  height: 80px;
  object-fit: cover; }
#carritoPagina .product-name h3 {
  font-size: 15px;
  margin: 0; }
#carritoPagina .quantity {
  margin: 0 auto; }

.cart-totals .cart-calculator {
  padding-bottom: 20px; }

/* ---------- Checkout ---------- */
.checkout-form .form__input {
  border: 1px solid #e5e5e5; }
.order-details {
  background: #f6f6f6;
  padding: 30px; }
  .order-details .order-table th,
  .order-details .order-table td {
    font-size: 14px;
    padding: 10px 0;
    background: transparent; }

.pedido-confirmado i {
  font-size: 80px;
  color: #4cbb6c; }

/* ---------- Aviso flotante ---------- */
.tienda-aviso {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 100000;
  background: #292323;
  color: #fff;
  padding: 12px 24px;
  font-size: 14px;
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: all .3s ease;
  pointer-events: none; }
  .tienda-aviso.visible {
    opacity: 1;
    transform: translate(-50%, 0); }
  .tienda-aviso--error {
    background: #d9534f; }

/* ---------- Tarjetas de producto de igual tamaño ----------
 * Las fotos vienen con proporciones distintas: se encajan en un
 * recuadro cuadrado sin recortar el producto (contain), y el título
 * ocupa siempre 2 líneas para que la info quede alineada. */
.ft-product .product-image--holder {
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  margin: 0; }
  .ft-product .product-image--holder img {
    width: 100%;
    height: 100%;
    object-fit: contain; }
.ft-product .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  line-height: 1.4; }
.shop-products .ft-product,
.shop-products .ft-product .product-inner {
  height: 100%; }

.producto-foto {
  aspect-ratio: 1 / 1;
  background: #fff;
  margin: 0; }
  .producto-foto img {
    height: 100%;
    object-fit: contain; }

/* ---------- Fórmula médica ---------- */
.aviso-formula {
  background: #fff8e6;
  border-left: 3px solid #f0ad4e;
  padding: 10px 14px;
  font-size: 14px; }
  .aviso-formula i {
    font-size: 18px;
    vertical-align: middle; }

.formula-bloque {
  border: 1px solid #e5e5e5;
  padding: 25px;
  margin-bottom: 25px;
  background: #fff; }
  .formula-bloque__titulo {
    font-size: 15px;
    margin-bottom: 8px; }
    .formula-bloque__titulo i {
      font-size: 20px;
      vertical-align: middle;
      color: #1e9bd7; }
  .formula-bloque__tipo {
    float: right;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    background: #e5e5e5;
    padding: 3px 8px; }
    .formula-bloque__tipo--req {
      background: #f0ad4e;
      color: #fff; }
  .formula-bloque__ayuda {
    font-size: 13px;
    color: #8a8a8a;
    margin-bottom: 20px; }
  .formula-bloque .form__input,
  .formula-bloque .form-control {
    border: 1px solid #e5e5e5;
    font-size: 14px; }

.formula-tabla th,
.formula-tabla td {
  padding: 6px 4px;
  vertical-align: middle;
  font-size: 13px;
  border: 0; }
.formula-tabla thead th {
  text-align: center; }
.formula-tabla tbody th {
  white-space: nowrap;
  padding-right: 10px; }
  .formula-tabla tbody th small {
    display: block;
    font-weight: 400;
    color: #8a8a8a; }
.formula-tabla select {
  min-width: 90px;
  padding-left: 6px; }

.formula-resumen {
  font-size: 13px;
  color: #0f5f86; }

/* ---------- Paginador ----------
 * El tema pinta de rojo las páginas NO seleccionadas y deja la actual
 * transparente, lo que confunde. Se invierte: la página actual queda
 * resaltada en rojo y las demás en contorno gris. */
.pagination li .page-number {
  background-color: transparent;
  border-color: #e5e5e5;
  color: #292323; }
.pagination li .page-number:hover {
  background-color: #f6f6f6;
  border-color: #292323;
  color: #292323; }
.pagination li .page-number.current,
.pagination li .page-number.current:hover {
  background-color: #ff5151;
  border-color: #ff5151;
  color: #ffffff;
  font-weight: 700;
  cursor: default; }

/* ---------- Logo configurable ----------
 * Limita el alto para que un logo subido desde el panel no
 * deforme el header ni el footer, sin importar su tamaño. */
.header .logo img {
  max-height: 50px;
  max-width: 220px;
  width: auto;
  height: auto; }
  @media (max-width: 35.94em) {
    .header .logo img {
      max-height: 38px;
      max-width: 160px; } }
.footer-logo img {
  max-height: 60px;
  max-width: 240px;
  width: auto; }

/* ---------- Cuenta del cliente ---------- */
.login-box,
.register-box {
  background: #f6f6f6;
  padding: 35px; }
  .login-box .form__input,
  .register-box .form__input {
    border: 1px solid #e5e5e5;
    background: #fff; }
.cuenta-input {
  border: 1px solid #e5e5e5; }
.user-dashboard-tab .cuenta-contenido {
  flex: 1;
  min-width: 0; }

.footer-enlaces a {
  display: inline-block;
  margin: 0 10px;
  font-size: 14px;
  color: #292323; }
  .footer-enlaces a:hover {
    color: #ff5151; }

.checkout-cuenta {
  background: #f6f6f6;
  padding: 18px 20px; }
  .checkout-cuenta__check {
    font-weight: 500;
    cursor: pointer; }
    .checkout-cuenta__check input {
      margin-right: 6px; }
  .checkout-cuenta .form__input {
    border: 1px solid #e5e5e5;
    background: #fff; }

/* Tarjeta de pedido en "Mis pedidos" */
.cuenta-pedido {
  display: block;
  border: 1px solid #e5e5e5;
  padding: 20px 22px;
  margin-bottom: 20px;
  color: #292323;
  transition: border-color .2s ease, box-shadow .2s ease; }
  .cuenta-pedido:hover {
    border-color: #292323;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    color: #292323; }
  .cuenta-pedido__cabecera {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px; }
    .cuenta-pedido__cabecera small {
      display: block;
      color: #8a8a8a;
      font-size: 13px; }

/* Progreso resumido */
.seguimiento-mini {
  display: flex;
  gap: 4px; }
  .seguimiento-mini__paso {
    flex: 1;
    font-size: 12px;
    text-align: center;
    color: #999;
    padding-top: 10px;
    border-top: 4px solid #e5e5e5; }
    .seguimiento-mini__paso.hecho {
      border-top-color: #1e9bd7;
      color: #292323; }
    .seguimiento-mini__paso.actual {
      font-weight: 700;
      color: #0f5f86; }
  .seguimiento-mini--cancelado {
    color: #d9534f;
    font-weight: 500; }
  @media (max-width: 35.94em) {
    .seguimiento-mini__paso {
      font-size: 10px; } }

/* Línea de tiempo del detalle */
.seguimiento {
  border: 1px solid #e5e5e5;
  padding: 30px; }
  @media (max-width: 35.94em) {
    .seguimiento {
      padding: 20px 15px; } }
.seguimiento-pasos {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 25px; }
.seguimiento-paso {
  flex: 1;
  position: relative;
  text-align: center;
  color: #999; }
  .seguimiento-paso:not(:first-child):before {
    content: "";
    position: absolute;
    top: 22px;
    right: 50%;
    width: 100%;
    height: 4px;
    background: #e5e5e5;
    z-index: 0; }
  .seguimiento-paso.hecho:before,
  .seguimiento-paso.actual:before {
    background: #1e9bd7; }
  .seguimiento-paso__icono {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 44px;
    border-radius: 50%;
    border: 2px solid #e5e5e5;
    background: #fff;
    font-size: 22px;
    margin-bottom: 8px; }
  .seguimiento-paso.hecho .seguimiento-paso__icono {
    background: #1e9bd7;
    border-color: #1e9bd7;
    color: #fff; }
  .seguimiento-paso.actual .seguimiento-paso__icono {
    border-color: #1e9bd7;
    color: #1e9bd7;
    box-shadow: 0 0 0 5px rgba(30, 155, 215, 0.15); }
  .seguimiento-paso__titulo {
    display: block;
    font-size: 14px;
    font-weight: 500; }
  .seguimiento-paso.hecho .seguimiento-paso__titulo,
  .seguimiento-paso.actual .seguimiento-paso__titulo {
    color: #292323; }
  .seguimiento-paso__fecha {
    display: block;
    font-size: 12px; }
  @media (max-width: 35.94em) {
    .seguimiento-paso__icono {
      width: 38px;
      height: 38px;
      line-height: 34px;
      font-size: 17px; }
    .seguimiento-paso:not(:first-child):before {
      top: 17px; }
    .seguimiento-paso__titulo {
      font-size: 11px; } }

.seguimiento-descripcion {
  background: #f4f8fa;
  border-left: 3px solid #1e9bd7;
  padding: 12px 16px;
  margin: 0;
  font-size: 14px; }

.seguimiento-cancelado {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d9534f; }
  .seguimiento-cancelado i {
    font-size: 40px; }

.seguimiento-guia {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 14px 18px;
  background: #f6f6f6; }
  .seguimiento-guia i {
    font-size: 32px;
    color: #1e9bd7; }
  .seguimiento-guia small {
    display: block;
    color: #8a8a8a; }
  .seguimiento-guia strong {
    font-size: 18px;
    letter-spacing: 1px; }

/* Historial de estados */
.seguimiento-historial {
  list-style: none;
  padding: 0 0 0 20px;
  border-left: 2px solid #e5e5e5; }
  .seguimiento-historial li {
    position: relative;
    padding-bottom: 18px; }
    .seguimiento-historial li:before {
      content: "";
      position: absolute;
      left: -27px;
      top: 4px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #1e9bd7;
      border: 2px solid #fff; }
    .seguimiento-historial li:last-child {
      padding-bottom: 0; }
  .seguimiento-historial__fecha {
    display: block;
    font-size: 12px;
    color: #8a8a8a; }
  .seguimiento-historial p {
    font-size: 14px; }

/* ---------- Nombre del cliente junto al ícono ---------- */
.header-cliente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #292323; }
  .header-cliente:hover {
    color: #ff5151; }
  .header-cliente__nombre {
    font-size: 14px;
    font-weight: 500;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  @media (max-width: 35.94em) {
    .header-cliente__nombre {
      max-width: 70px;
      font-size: 12px; } }

/* =========================================================
   v2: precios público / distribuidor, asistente y lentes
   ========================================================= */

/* Barra que invita a poner el código (visible en todo el sitio sin código) */
.dist-barra--invitacion {
  display: block;
  background: #292323;
  color: #fff; }
  .dist-barra--invitacion:hover {
    color: #fff;
    background: #1e9bd7; }
  .dist-barra__boton {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    background: #ff5151;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase; }
  @media (max-width: 47.94em) {
    .dist-barra__boton {
      display: block;
      width: max-content;
      margin: 5px auto 0; } }

/* Precios en tarjetas */
.precio-publico-tachado {
  display: block;
  font-size: 13px;
  color: #8a8a8a; }
.precio-distribuidor {
  color: #1e9bd7 !important; }
.precio-bloqueado {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #1e9bd7;
  margin-top: 3px; }
  .precio-bloqueado:hover {
    color: #ff5151; }

/* Precios en la ficha */
.ficha-precio__publico {
  color: #8a8a8a;
  font-size: 15px;
  margin-bottom: 5px; }
.ficha-precio__final {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px; }
  .ficha-precio__final span {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #1e9bd7;
    font-weight: 700; }
  .ficha-precio__final strong {
    font-size: 34px;
    line-height: 1.1;
    color: #292323; }
  .ficha-precio__final em {
    font-style: normal;
    background: #1e9bd7;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 9px; }
  .ficha-precio__final--publico span {
    color: #8a8a8a; }
.ficha-precio__candado {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  padding: 14px 16px;
  border: 2px dashed #1e9bd7;
  background: #f4f8fa;
  color: #292323;
  font-size: 14px; }
  .ficha-precio__candado i {
    font-size: 30px;
    color: #1e9bd7; }
  .ficha-precio__candado:hover {
    background: #1e9bd7;
    color: #fff; }
    .ficha-precio__candado:hover i {
      color: #fff; }
.ficha-unica {
  font-size: 13px;
  color: #8a8a8a;
  margin-top: 10px; }

/* Asistente Montura -> Fórmula -> Lentes */
.asistente {
  border: 1px solid #e5e5e5;
  padding: 25px;
  margin-bottom: 25px; }
  @media (max-width: 35.94em) {
    .asistente {
      padding: 18px 14px; } }
.asistente-pasos {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  gap: 6px; }
  .asistente-pasos li {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #999;
    padding-bottom: 10px;
    border-bottom: 3px solid #e5e5e5; }
    .asistente-pasos li span {
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 22px;
      border-radius: 50%;
      border: 1px solid currentColor;
      margin-right: 4px;
      font-size: 12px; }
    .asistente-pasos li.hecho {
      color: #1e9bd7;
      border-bottom-color: #1e9bd7; }
    .asistente-pasos li.actual {
      color: #292323;
      border-bottom-color: #ff5151; }
.asistente-solo-montura {
  display: block;
  margin-top: 15px;
  font-size: 13px;
  color: #8a8a8a;
  text-decoration: underline; }
.asistente-acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px; }
.asistente-error {
  color: #d9534f;
  font-size: 14px;
  min-height: 20px;
  margin: 10px 0 0; }

.formula-botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px; }
  @media (max-width: 35.94em) {
    .formula-botones {
      grid-template-columns: 1fr; } }
.formula-boton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 10px;
  border: 2px dashed #ccc;
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  transition: all .2s ease; }
  .formula-boton i {
    font-size: 34px;
    color: #1e9bd7; }
  .formula-boton:hover {
    border-color: #1e9bd7;
    background: #f4f8fa; }
.formula-archivo-elegido {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #f4f8fa;
  border-left: 3px solid #4cbb6c;
  font-size: 14px;
  word-break: break-all; }
  .formula-archivo-elegido img {
    width: 56px;
    height: 56px;
    object-fit: cover; }
  .formula-archivo-elegido a {
    margin-left: auto;
    white-space: nowrap;
    text-decoration: underline; }
.formula-valores summary {
  cursor: pointer;
  font-size: 13px;
  color: #1e9bd7;
  font-weight: 500; }

/* Opciones de lente */
.lentes-lista {
  display: flex;
  flex-direction: column;
  gap: 10px; }
.lente-opcion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 2px solid #e5e5e5;
  cursor: pointer;
  transition: border-color .2s ease; }
  .lente-opcion input {
    flex: 0 0 auto;
    accent-color: #ff5151; }
  .lente-opcion:has(input:checked) {
    border-color: #ff5151;
    background: #fff8f8; }
  .lente-opcion__foto {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f8fa;
    font-size: 24px;
    color: #1e9bd7;
    overflow: hidden; }
    .lente-opcion__foto img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .lente-opcion__info {
    flex: 1;
    min-width: 0; }
    .lente-opcion__info strong {
      display: block;
      font-size: 15px; }
    .lente-opcion__info small {
      display: block;
      color: #8a8a8a;
      line-height: 1.4; }
  .lente-opcion__precio {
    text-align: right;
    white-space: nowrap; }
    .lente-opcion__precio s {
      display: block;
      font-size: 12px;
      color: #999; }
    .lente-opcion__precio strong {
      display: block;
      font-size: 16px; }
    .lente-opcion__precio small {
      font-size: 11px;
      color: #1e9bd7;
      text-transform: uppercase; }
.asistente-resumen {
  margin-top: 18px;
  padding: 14px 16px;
  background: #f6f6f6; }
  .asistente-resumen div {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 14px; }
  .asistente-resumen__total {
    border-top: 1px solid #e5e5e5;
    margin-top: 6px;
    padding-top: 8px !important;
    font-size: 18px !important;
    font-weight: 700; }

/* Líneas del carrito */
.linea-lente {
  color: #0f5f86; }
.linea-alerta {
  color: #d9534f; }
  .linea-alerta a {
    text-decoration: underline;
    color: inherit; }