/* =============================================================================
   componentes/zona-cliente.css — Piezas comunes del área de cliente y del proceso de compra
   -----------------------------------------------------------------------------
   Fondo gris claro con tarjetas blancas (lo "mío": la cuenta y el pedido en curso, frente al
   escaparate blanco del catálogo), cabecera de bloque, chips de estado, opciones en tarjeta,
   segmentado, avisos suaves y campos de formulario un poco más altos.

   La usan cuenta/_marco.php (todas las pantallas de la cuenta) y el embudo de la compra
   (datos, envío, pago). Va como componente, en todas las páginas, porque son piezas que se
   repiten en muchas vistas; lo de una sola vista sigue yendo en vistas/.
   ============================================================================= */

:root {
    --ss-zona-bg: #f4f4f6;              /* el gris de .bg-body-tertiary de custom-25.css */
    --ss-zona-borde: #e9ecef;
    --ss-zona-radio: 16px;
    --ss-zona-radio-sm: 12px;
    --ss-zona-tinte: rgba(193, 0, 73, .07);
    --ss-zona-tinte-fuerte: rgba(193, 0, 73, .12);
    /* Gris de texto secundario con contraste AA sobre blanco y sobre --ss-zona-bg
       (el #6c757d de .text-muted se queda justo en el gris). */
    --ss-zona-texto-2: #5c636a;
    --ss-zona-sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .05);
    --ss-degradado: linear-gradient(90deg, #e20049, #1a2b6d);
}

/* ---------- FONDO ----------
   layout.php la pone en el <main> con $zona = true, y entonces la cabecera va sin margen
   inferior para que el gris empiece pegado a ella. */
.ss-zona { background: var(--ss-zona-bg); padding: 1.5rem 0 3rem; }

/* ---------- TARJETA ---------- */
.ss-tarjeta {
    background: #fff;
    border: 1px solid var(--ss-zona-borde);
    border-radius: var(--ss-zona-radio);
    box-shadow: var(--ss-zona-sombra);
}
.ss-tarjeta__cab {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--ss-zona-borde);
}
.ss-tarjeta__cuerpo { padding: 1.25rem; }
@media (min-width: 768px) {
    .ss-tarjeta__cab { padding: 1.1rem 1.5rem; }
    .ss-tarjeta__cuerpo { padding: 1.5rem; }
}
.ss-titulo-bloque { font-size: 1.05rem; font-weight: 700; margin: 0; }
.ss-texto-2 { color: var(--ss-zona-texto-2); }
.ss-min-w-0 { min-width: 0; }

/* Las tarjetas de Bootstrap que siguen dentro de la zona (envío, pago, detalle de pedido,
   valorar…) toman el mismo radio y borde, para que no convivan dos estilos de caja. */
.ss-zona .card { border-color: var(--ss-zona-borde); border-radius: var(--ss-zona-radio); }
.ss-zona .card.shadow-sm { box-shadow: var(--ss-zona-sombra) !important; }
.ss-zona .card-footer { border-bottom-left-radius: var(--ss-zona-radio); border-bottom-right-radius: var(--ss-zona-radio); }

/* Icono dentro de un círculo con el tinte corporativo. */
.ss-icono {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--ss-zona-tinte); color: var(--ss-first-color); font-size: 1rem;
}

/* Enlace de texto en corporativo ("Ver todos", "Editar"…). */
.ss-enlace-marca { color: var(--ss-first-color) !important; font-weight: 600; text-decoration: none; }
.ss-enlace-marca:hover { text-decoration: underline; }

/* ---------- CHIP DE ESTADO ----------
   Punto de color + texto: el estado nunca se cuenta solo con el color. */
.ss-estado {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .65rem; border-radius: 50rem;
    font-size: .78rem; font-weight: 600; white-space: nowrap;
    background: #f1f3f5; color: #343a40;
}
.ss-estado::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.ss-estado--proceso   { background: #fff4e0; color: #8a5300; }
.ss-estado--tramitado { background: #e7ecfb; color: #1a2b6d; }
.ss-estado--entregado { background: #e6f4ea; color: #146c2e; }
.ss-estado--incidencia{ background: #fdecec; color: #a4161a; }

/* ---------- MINIATURAS APILADAS ----------
   Las fotos de un pedido, solapadas. La foto en sí, como .prod-thumb (base.css). */
.ss-thumbs { display: flex; flex: 0 0 auto; }
.ss-thumbs .prod-thumb { border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ss-zona-borde); }
.ss-thumbs .prod-thumb + .prod-thumb { margin-left: -12px; }
.ss-thumbs__mas {
    display: inline-flex; align-items: center; justify-content: center; margin-left: -12px;
    width: 40px; height: 40px; border-radius: 8px; border: 2px solid #fff;
    background: #e9ecef; color: #495057; font-size: .75rem; font-weight: 700;
}

/* ---------- BOTÓN REDONDO SOLO ICONO ----------
   Factura, valorar… El nombre va en aria-label y en title. */
main .btn.ss-btn-ico {
    --bs-btn-padding-x: 0; width: 2.25rem; height: 2.25rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- FORMULARIOS ----------
   Campos algo más altos (para el dedo) y redondeados, como el resto del rediseño. */
.ss-form .form-control, .ss-form .form-select { min-height: 3rem; border-radius: 10px; border-color: #d5d9de; }
.ss-form textarea.form-control { min-height: 0; }
.ss-form .form-label { font-size: .875rem; font-weight: 600; margin-bottom: .35rem; }
.ss-form .form-text { color: var(--ss-zona-texto-2); }
.ss-opc { font-weight: 400; color: var(--ss-zona-texto-2); }

/* Contraseña con el ojo para verla (componentes/_campo_clave.php + ui.js). El botón va dentro
   del campo, a la derecha; el padding deja sitio para que el texto no se meta debajo. El icono
   de "inválido" de Bootstrap también iría ahí, así que se quita: el borde rojo sigue. */
.ss-clave { position: relative; }
.ss-clave > .form-control { padding-right: 3rem; }
.ss-clave > .form-control.is-invalid, .ss-clave > .form-control.is-valid { padding-right: 3rem; background-image: none; }
/* Edge pinta su propio ojo en los campos de contraseña: con el nuestro serían dos. */
.ss-clave > input::-ms-reveal, .ss-clave > input::-ms-clear { display: none; }
.ss-clave__ver {
    position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--ss-zona-texto-2); cursor: pointer;
}
.ss-clave__ver:hover { background: var(--ss-zona-bg); color: #212529; }
.ss-clave__ver:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(193, 0, 73, .25); }
.ss-clave__ver[aria-pressed="true"] { color: var(--ss-first-color); }

/* Campo al que se acaba de llevar al cliente desde un aviso (el país de envío desde el de la
   exención de IVA): un par de latidos en corporativo para que se vea cuál hay que cambiar. */
.ss-form .ss-resaltado { animation: ss-resaltado 1.6s ease-out 2; border-color: var(--ss-first-color); }
@keyframes ss-resaltado {
    0%   { box-shadow: 0 0 0 0 rgba(193, 0, 73, .45); }
    70%  { box-shadow: 0 0 0 .6rem rgba(193, 0, 73, 0); }
    100% { box-shadow: 0 0 0 0 rgba(193, 0, 73, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .ss-form .ss-resaltado { animation: none; box-shadow: 0 0 0 .25rem var(--ss-zona-tinte-fuerte); }
}

/* Dato fijo enseñado como texto, no como campo desactivado (el email con sesión iniciada). */
.ss-fijo {
    display: flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .5rem .85rem;
    border-radius: 10px; background: var(--ss-zona-bg); font-weight: 500;
}

/* Número de cada bloque de un formulario por pasos. */
.ss-bloque-num {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 1.85rem; height: 1.85rem; border-radius: 50%;
    background: #212529; color: #fff; font-size: .85rem; font-weight: 700;
}

/* ---------- OPCIONES EN TARJETA ----------
   Un radio de verdad (oculto, pero accesible y con su foco) y la tarjeta como su etiqueta.
   Para decisiones de dos o tres caminos: domicilio o tienda, factura igual o distinta. */
.ss-opcion { position: relative; display: block; height: 100%; margin: 0; }
.ss-opcion > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ss-opcion__caja {
    display: flex; align-items: flex-start; gap: .75rem; height: 100%;
    padding: .9rem 1rem; border: 1.5px solid #d5d9de; border-radius: var(--ss-zona-radio-sm);
    background: #fff; cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.ss-opcion__caja:hover { border-color: #adb5bd; }
.ss-opcion__radio {
    flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .15rem; border-radius: 50%;
    border: 2px solid #adb5bd; background: #fff; transition: border-width .12s ease;
}
.ss-opcion__titulo { display: block; font-weight: 600; }
.ss-opcion__desc { display: block; font-size: .875rem; color: var(--ss-zona-texto-2); }
.ss-opcion > input:checked + .ss-opcion__caja { border-color: var(--ss-first-color); background: rgba(193, 0, 73, .035); }
.ss-opcion > input:checked + .ss-opcion__caja .ss-opcion__radio { border: 5px solid var(--ss-first-color); }
.ss-opcion > input:focus-visible + .ss-opcion__caja { box-shadow: 0 0 0 .2rem rgba(193, 0, 73, .18); }
/* Opción que no se puede elegir ahora (p. ej. "Envío a domicilio" con Tax Free marcado). */
.ss-opcion > input:disabled + .ss-opcion__caja { opacity: .5; cursor: not-allowed; background: var(--ss-zona-bg); }
.ss-opcion > input:disabled + .ss-opcion__caja:hover { border-color: #d5d9de; }

/* ---------- SEGMENTADO ----------
   Dos opciones excluyentes y cortas (Particular | Empresa). Sobre .btn-check de Bootstrap. */
.ss-segmento { display: inline-flex; padding: 4px; border-radius: 50rem; background: var(--ss-zona-bg); }
main .ss-segmento .btn { --bs-btn-padding-y: .4rem; border: 0; color: #495057; font-weight: 600; }
main .ss-segmento .btn-check:checked + .btn { background: #fff; color: var(--ss-first-color); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
main .ss-segmento .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .2rem rgba(193, 0, 73, .18); }
/* Como PESTAÑAS (role="tab"): la marcada es la de aria-selected, no un radio. */
main .ss-segmento .btn[aria-selected="true"] { background: #fff; color: var(--ss-first-color); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
main .ss-segmento .btn[role="tab"]:focus-visible { box-shadow: 0 0 0 .2rem rgba(193, 0, 73, .18); }
/* A todo el ancho, cada opción a partes iguales (pestañas de acceso). */
.ss-segmento--ancho { display: flex; }
.ss-segmento--ancho > .btn { flex: 1 1 0; }

/* ---------- ACCESO (iniciar sesión | crear cuenta) ---------- cuenta/acceso.php */
.ss-acceso__titulo { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: .35rem; }
@media (min-width: 768px) {
    .ss-acceso > .ss-tarjeta__cuerpo { padding: 2rem 2.5rem; }
}
/* Login y recuperar son cortos: más estrechos que el alta para no estirarse a lo ancho. */
.ss-acceso__panel--estrecho { max-width: 26rem; margin-inline: auto; }
/* Icono de cabecera (recuperar, revisa tu correo, contraseña cambiada, enlace caducado). */
.ss-acceso__icono { display: flex; width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; font-size: 1.3rem; }
.ss-acceso__icono--ok    { background: #e6f4ea; color: #146c2e; }
.ss-acceso__icono--error { background: #fdecec; color: #a4161a; }
/* Subtítulo de cada bloque del alta (acceso, tus datos, dirección). */
.ss-acceso__bloque {
    font-size: 1rem; font-weight: 700; margin: 1.75rem 0 .85rem; padding-top: 1.25rem;
    border-top: 1px solid var(--ss-zona-borde);
}
.ss-acceso__bloque:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- AVISO SUAVE ----------
   Información que hay que leer pero que no es un error (territorio, cambios que van a la
   factura…). Sin el azul chillón de .alert-info. */
.ss-aviso {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .85rem 1rem; border-radius: var(--ss-zona-radio-sm);
    background: #f0f3fb; color: #1a2b6d; font-size: .9rem;
}
.ss-aviso > i { margin-top: .2rem; }

/* Enlace que despliega un campo opcional ("+ Añadir otro teléfono"). */
.ss-desplegar { color: var(--ss-first-color) !important; font-weight: 600; text-decoration: none; font-size: .9rem; }
.ss-desplegar:hover { text-decoration: underline; }

/* Botón principal grande del embudo. */
main .btn.ss-cta { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.75rem; font-weight: 700; font-size: 1.02rem; }

/* ---------- EMBUDO DE COMPRA (CompraController::htmlEmbudo) ---------- */
.ss-embudo-titulo { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .35rem; }
@media (max-width: 575.98px) { .ss-embudo-titulo { font-size: 1.35rem; } }
/* Envío y pago: a ancho de lectura, centrados bajo el stepper. */
.ss-embudo-estrecho { max-width: 960px; margin: 0 auto; }

/* ---------- FAVORITOS DENTRO DE LA CUENTA (favoritos/listas.php y lista.php) ----------
   Cabecera con el título y su acción (nueva lista, compartir) en la misma línea, y el aviso
   de "no hay nada" con el mismo aspecto que la banda de ayuda del resumen. */
.ss-fav__cab { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.ss-fav__vacio { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.25rem; }