/*
 * Viviaza © 2026 — Todos los derechos reservados.
 *
 * Tipo de archivo: CSS
 * Nombre y ruta del archivo: public/css/registro.css
 * Versión nueva: 2.1.0
 * Tipo de cambio: (sin especificar)
 * Fecha de creación: 01/12/2026
 * Fecha de modificación: 26/05/2026
 * Descripción: Tipo cambio:    minor (inyección de color vivo)
 *
 * Descripción:    Estilos del formulario de registro. Pareja con
 *                 /registro/index.php v3.0+.
 *
 * Cambios v2.0:   - Paleta migrada a tokens oficiales (var(--c-*))
 *                 - Nuevas clases: .tipo-cards (cards Comprador/Vendedor),
 *                   .subtipo-cards (sub-tipos vendedor), .tel-input-group
 *                   y .tel-prefijo (prefijo internacional), .auth-alert,
 *                   .brand-flag, .card-block-hint, .tipo-aviso
 *                 - .tipo-usuario-toggle se mantiene por compatibilidad pero
 *                   ya no se usa en la vista nueva
 * Estado: listo para producción
 */

/* --- Paleta: mapeo a tokens oficiales ---
   No usamos hex literal. Las variables locales son ALIAS de los tokens
   globales (definidos en _tokens.css) para no perder semántica del archivo. */
:root {
  --azul-principal:     var(--c-primary);
  --dorado-acento:      var(--c-secondary);
  --gris-fondo-pagina:  var(--c-bg);
  --gris-fondo-seccion: var(--c-bg-soft);
  --gris-borde:         var(--c-border);
  --texto-principal:    var(--c-text);
  --texto-secundario:   var(--c-text-soft);
  --verde-exito:        var(--c-success);
  --rojo-error:         var(--c-danger);
  --c-action-local:     var(--c-action);
}

/* --- Estructura Principal --- */
body {
  background-color: var(--gris-fondo-pagina);
}

.auth-shell {
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  gap: 2.5rem;
  max-width: 1300px;
  margin: 2.5rem auto;
  padding: 1rem;
}

/* --- Tarjeta del Formulario --- */
.auth-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 26, 87, 0.07);
  overflow: hidden;
  border: 1px solid var(--gris-borde);
}

.auth-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--gris-borde);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* --- Marca y Títulos --- */
.brand-block .brand-topline {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto-secundario);
}
.brand-title .main { color: var(--azul-principal); }
.brand-title .sub  { color: var(--dorado-acento); }

.auth-steps {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto-secundario);
  background: var(--gris-fondo-pagina);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
}

/* --- Secciones del Formulario --- */
.card-block,
.card-block-soft {
  padding: 2rem 2.25rem;
  border-bottom: 1px solid var(--gris-borde);
}
.card-block-soft {
  background: var(--gris-fondo-seccion);
}
.auth-card section:last-of-type {
  border-bottom: none;
}

.card-block-header {
  margin-bottom: 1.5rem;
}
.card-block-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--azul-principal);
}

/* --- Grupos de Formulario y Campos --- */
.form-grupo {
  margin-bottom: 1.25rem;
}
.form-grupo:last-child {
  margin-bottom: 0;
}

.field-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--texto-principal);
}
.req-dot {
  color: var(--dorado-acento);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--texto-principal);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--azul-principal);
  box-shadow: 0 0 0 3px rgba(0, 26, 87, 0.1);
  outline: none;
}

.row-inline {
  display: flex;
  gap: 1.5rem;
}
.row-inline .form-grupo {
  flex: 1;
}

/* --- Toggle de Tipo de Usuario --- */
.tipo-usuario-toggle {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gris-borde);
}
.tipo-usuario-toggle input[type="radio"] {
  display: none;
}
.tipo-usuario-toggle .toggle-option {
  flex: 1;
  padding: 0.85rem 1rem;
  text-align: center;
  cursor: pointer;
  background: #fff;
  color: var(--texto-secundario);
  transition: all 0.2s ease;
  font-weight: 500;
}
.tipo-usuario-toggle .toggle-option:not(:last-child) {
  border-right: 1px solid var(--gris-borde);
}
.tipo-usuario-toggle .toggle-option:hover {
  background: var(--gris-fondo-seccion);
}
.tipo-usuario-toggle input[type="radio"]:checked + .toggle-option {
  background: var(--azul-principal);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tipo-usuario-toggle .toggle-option i {
  margin-right: 0.5rem;
}

/* --- Foto de Perfil --- */
.foto-preview-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

#foto-preview {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gris-borde);
  background-color: var(--gris-fondo-seccion);
}

.file-input-wrapper {
  position: relative;
}
.file-input-wrapper .small-hint {
  font-size: 0.85rem;
  color: var(--texto-secundario);
}
#file-name-display {
  display: block;
  margin-top: 0.5rem;
  font-style: italic;
}

input#foto_perfil[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
  font-size: 0;
}

label.file-input-label {
  display: inline-block;
  position: relative;
  z-index: 1;
  background-color: var(--dorado-acento);
  color: var(--azul-principal);
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 50px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
label.file-input-label:hover {
  background-color: #a99464;
}
label.file-input-label i {
  margin-right: 0.5rem;
}

/* --- Checklist de Contraseña --- */
.password-checklist {
  font-size: 0.9rem;
}
.password-checklist-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--texto-principal);
}
.check-item {
  color: var(--texto-secundario);
  transition: all 0.3s ease;
}

/* FIX: Corregido "Font Awesome 5 Free" → "Font Awesome 6 Free"
   para coincidir con la versión 6.5.2 que se carga en el header. */
.check-bullet {
  display: inline-block;
  width: 20px;
  text-align: center;
  margin-right: 4px;
  font-weight: 900;
  font-family: "Font Awesome 6 Free";
}

/* Estado Neutral */
.check-item .check-bullet::before {
  content: "\f111"; /* fa-circle */
  font-weight: 400;
  font-size: 0.7em;
  color: var(--gris-borde);
}

/* Estado Válido (Verde) */
.check-item.ok {
  color: var(--verde-exito);
  font-weight: 500;
}
.check-item.ok .check-bullet::before {
  content: "\f058"; /* fa-circle-check */
  font-weight: 900;
  font-size: 0.9em;
  color: var(--verde-exito);
}

/* Estado Inválido (Rojo) */
.check-item.invalid {
  color: var(--rojo-error);
  font-weight: 500;
}
.check-item.invalid .check-bullet::before {
  content: "\f057"; /* fa-circle-xmark */
  font-weight: 900;
  font-size: 0.9em;
  color: var(--rojo-error);
}

/* --- Validación AJAX --- */
.validation-hint {
  font-size: 0.85rem;
  margin-top: 0.25rem;
  height: 1em;
}
.validation-hint.ok {
  color: var(--verde-exito);
  font-weight: 500;
}
.validation-hint.error {
  color: var(--rojo-error);
  font-weight: 500;
}

/* --- Lugares de Atención --- */
#lista-lugares-atencion {
  margin-bottom: 1rem;
}

.lugar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  padding: 1rem;
  background: var(--gris-fondo-seccion);
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
}
.lugar-item:last-child {
  margin-bottom: 0;
}

.lugar-item .select-estado,
.lugar-item .select-ciudad {
  flex: 1;
}

.btn-remove-lugar {
  background: none;
  border: none;
  color: var(--rojo-error);
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.5rem;
}
.btn-remove-lugar:hover {
  background-color: rgba(220, 53, 69, 0.1);
}

.lugares-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* --- Botones Pill --- */
.btn-pill-primary-outline {
  background-color: transparent;
  color: var(--azul-principal);
  border: 1px solid var(--azul-principal);
  font-weight: 600;
  padding: 0.7rem 1.5rem;
  border-radius: 50px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.btn-pill-primary-outline:hover {
  background-color: var(--azul-principal);
  color: #fff;
}

/* MEJORA: focus-visible para navegación con teclado (accesibilidad) */
.btn-pill-primary-outline:focus-visible {
  outline: 3px solid var(--azul-principal);
  outline-offset: 3px;
}

/* --- Horarios de Atención --- */
.horario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.horario-col {
  background: var(--gris-fondo-seccion);
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

.horario-title {
  font-weight: 600;
  color: var(--azul-principal);
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.horario-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Primera declaración: layout del input de tiempo */
.horario-row input[type="time"] {
  flex: 1;
  padding-right: 2.5rem;
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23555555' d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 236V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
}

/* FIX: Selector duplicado `input[type="time"][type="time"]` era CSS inválido.
   El estilo de Firefox (-moz-appearance) ya está en el bloque anterior.
   Este selector corregido aplica solo al spinner en webkit. */
.horario-row input[type="time"]::-webkit-outer-spin-button,
.horario-row input[type="time"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Checkboxes de horario */
.horario-flags {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
}
.check-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--texto-principal);
}
.check-label input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
}

.horario-grid + .small-hint {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--texto-secundario);
  display: block;
}

/* --- Botones Principales de CTA --- */
.btn-pill-primary {
  background-color: var(--dorado-acento);
  color: var(--azul-principal);
  font-weight: 700;
  padding: 0.9rem 2rem;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.btn-pill-primary:hover {
  background-color: #a99464;
  box-shadow: 0 4px 15px rgba(191, 169, 117, 0.4);
}
.btn-pill-primary:disabled {
  background-color: var(--gris-borde);
  color: var(--texto-secundario);
  cursor: not-allowed;
  box-shadow: none;
}

/* MEJORA: focus-visible para navegación con teclado (accesibilidad) */
.btn-pill-primary:focus-visible {
  outline: 3px solid var(--azul-principal);
  outline-offset: 3px;
}

.cta-row {
  text-align: center;
  margin: 1rem 0;
}
.login-hint-row {
  text-align: center;
  font-size: 0.95rem;
}
.login-hint-row a {
  color: var(--azul-principal);
  font-weight: 600;
  text-decoration: none;
}
.login-hint-row a:hover {
  text-decoration: underline;
}

/* --- Contador de Caracteres --- */
.char-counter {
  font-size: 0.85rem;
  color: var(--texto-secundario);
  text-align: right;
  margin-top: 0.5rem;
  height: 1em;
}
.char-counter.error {
  color: var(--rojo-error);
  font-weight: 500;
}

/* --- Barra Lateral de Beneficios --- */
.side-card {
  background: #fdfcf9;
  border: 1px solid var(--dorado-acento);
  border-radius: 12px;
  padding: 2rem 2.25rem;
  height: fit-content;
  position: sticky;
  top: 2.5rem;
}

.side-headline {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--azul-principal);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.side-headline .dot {
  color: var(--dorado-acento);
}

.side-sub {
  font-size: 1.05rem;
  color: var(--texto-secundario);
  margin-bottom: 2.5rem;
}

.side-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}
.side-box i.fa-check {
  font-size: 1.25rem;
  color: var(--dorado-acento);
  margin-top: 0.25rem;
  background: rgba(191, 169, 117, 0.1);
  padding: 0.5rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  text-align: center;
}
.side-box strong {
  color: var(--azul-principal);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.25rem;
}
.side-box .side-box-desc {
  color: var(--texto-secundario);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* FIX: Estilo de .side-footer ahora aplica correctamente porque el
   typo `classs` en index.php fue corregido a `class`. */
.side-footer {
  font-size: 0.85rem;
  color: var(--texto-secundario);
  border-top: 1px solid var(--gris-borde);
  padding-top: 1.5rem;
  margin-top: 1rem;
}
.side-footer a {
  color: var(--azul-principal);
  font-weight: 500;
}

/* --- Responsividad (Móvil) --- */
@media (max-width: 1024px) {
  .auth-shell {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
  }
  .side-card {
    order: -1;
    position: static;
    text-align: center;
  }
  .side-box {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .auth-shell {
    margin-top: 0;
    padding: 0;
  }
  .auth-card {
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .auth-header,
  .card-block,
  .card-block-soft {
    padding: 1.5rem 1.25rem;
  }
  .row-inline {
    flex-direction: column;
    gap: 0;
  }
  .tipo-usuario-toggle {
    flex-direction: column;
    border: none;
  }
  .tipo-usuario-toggle .toggle-option {
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    margin-bottom: 0.5rem;
  }
  .tipo-usuario-toggle .toggle-option:not(:last-child) {
    border-right: 1px solid var(--gris-borde);
  }
  .foto-preview-container {
    flex-direction: column;
    text-align: center;
  }
  .lugar-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .lugar-item .select-estado,
  .lugar-item .select-ciudad {
    width: 100%;
  }
  .btn-remove-lugar {
    align-self: flex-end;
    margin-right: 0;
  }
  .horario-grid {
    grid-template-columns: 1fr;
  }
  .horario-row {
    flex-direction: row;
  }
}

/* ============================================================================
 * v2.0 — NUEVAS CLASES (multi-país)
 * ============================================================================ */

/* --- Bandera del país en el header --- */
.brand-flag {
  font-size: 1.1rem;
  margin: 0 0.25rem;
  line-height: 1;
}

/* --- Hint debajo del título de sección --- */
.card-block-hint {
  font-size: 0.9rem;
  color: var(--texto-secundario);
  margin-top: 0.35rem;
}

/* --- Banner de aviso/error sobre el formulario --- */
.auth-alert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--gris-fondo-seccion);
  border-left: 4px solid var(--azul-principal);
  padding: 0.85rem 1rem;
  border-radius: 8px;
  margin: 1rem 1.2rem;
  color: var(--texto-principal);
  font-size: 0.95rem;
}
.auth-alert i {
  color: var(--azul-principal);
  font-size: 1.05rem;
}
.auth-alert-error {
  background: rgba(220, 53, 69, 0.08);
  border-left-color: var(--rojo-error);
}
.auth-alert-error i {
  color: var(--rojo-error);
}

/* --- Cards grandes: Comprador / Vendedor --- */
.tipo-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.tipo-cards input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tipo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
  background: #fff;
  border: 2px solid var(--gris-borde);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.tipo-card:hover {
  border-color: var(--azul-principal);
  background: var(--gris-fondo-seccion);
}
.tipo-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gris-fondo-seccion);
  color: var(--azul-principal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  transition: all 0.2s ease;
}
.tipo-card-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--azul-principal);
}
.tipo-card-desc {
  font-size: 0.9rem;
  color: var(--texto-secundario);
  line-height: 1.4;
}
.tipo-cards input[type="radio"]:checked + .tipo-card {
  border-color: var(--azul-principal);
  background: var(--gris-fondo-seccion);
  box-shadow: 0 4px 14px rgba(0, 26, 87, 0.10);
}
.tipo-cards input[type="radio"]:checked + .tipo-card .tipo-card-icon {
  background: var(--azul-principal);
  color: #fff;
}
.tipo-cards input[type="radio"]:focus-visible + .tipo-card {
  outline: 3px solid var(--azul-principal);
  outline-offset: 2px;
}

.tipo-aviso {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--texto-secundario);
}

/* --- Sub-cards del Vendedor (Asesor / Inmobiliaria / Desarrollador / Propietario) --- */
.subtipo-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.subtipo-cards input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.subtipo-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.2rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1.5px solid var(--gris-borde);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.subtipo-card i {
  grid-row: 1 / span 2;
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gris-fondo-seccion);
  color: var(--azul-principal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all 0.2s ease;
}
.subtipo-card-title {
  font-weight: 600;
  color: var(--azul-principal);
  font-size: 0.98rem;
}
.subtipo-card-desc {
  font-size: 0.85rem;
  color: var(--texto-secundario);
  line-height: 1.35;
}
.subtipo-card:hover {
  border-color: var(--azul-principal);
}
.subtipo-cards input[type="radio"]:checked + .subtipo-card {
  border-color: var(--azul-principal);
  background: var(--gris-fondo-seccion);
}
.subtipo-cards input[type="radio"]:checked + .subtipo-card i {
  background: var(--azul-principal);
  color: #fff;
}
.subtipo-cards input[type="radio"]:focus-visible + .subtipo-card {
  outline: 3px solid var(--azul-principal);
  outline-offset: 2px;
}

/* --- Input de teléfono con prefijo internacional --- */
.tel-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tel-input-group:focus-within {
  border-color: var(--azul-principal);
  box-shadow: 0 0 0 3px rgba(0, 26, 87, 0.10);
}
.tel-prefijo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem;
  background: var(--gris-fondo-seccion);
  border-right: 1px solid var(--gris-borde);
  color: var(--azul-principal);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  user-select: none;
}
.tel-input-group .tel-input {
  flex: 1 1 auto;
  border: none;
  border-radius: 0;
  background: #fff;
  padding: 0.8rem 1rem;
}
.tel-input-group .tel-input:focus {
  outline: none;
  box-shadow: none;
}

/* --- Responsive: cards en una sola columna en móvil --- */
@media (max-width: 600px) {
  .tipo-cards,
  .subtipo-cards {
    grid-template-columns: 1fr;
  }
  .auth-alert {
    margin: 1rem 0;
  }
}

/* ============================================================================
 * v2.1 — INYECCIÓN DE COLOR VIVO
 * Acentos en teal (var(--c-action)) para CTAs y estados activos.
 * Sin tocar paleta tokens — solo usar más var(--c-action) donde el form
 * se ve sobrio.
 * ============================================================================ */

/* Fondo de la página con gradiente sutil para no verse plano */
body {
  background: linear-gradient(
    180deg,
    var(--gris-fondo-pagina) 0%,
    color-mix(in srgb, var(--c-action) 6%, var(--gris-fondo-pagina)) 100%
  );
  min-height: 100vh;
}

/* Header del form: banda superior con gradiente y bandera más visible */
.auth-card {
  border-top: 4px solid var(--c-action);
}
.auth-header {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c-primary) 4%, #ffffff) 0%,
    color-mix(in srgb, var(--c-action) 4%, #ffffff) 100%
  );
}
.brand-flag {
  font-size: 1.5rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.brand-topline {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  background: color-mix(in srgb, var(--c-action) 12%, transparent);
  border-radius: 999px;
  color: var(--c-action);
  font-weight: 600;
}
.brand-topline .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-action);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-action) 25%, transparent);
}
.brand-title {
  margin-top: 0.5rem;
}
.brand-title .main {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand-title .sub {
  font-size: 1rem;
  font-weight: 600;
  margin-left: 0.4rem;
  color: var(--c-secondary);
}
.auth-steps {
  background: color-mix(in srgb, var(--c-action) 10%, #ffffff);
  color: var(--c-action);
  border: 1px solid color-mix(in srgb, var(--c-action) 25%, transparent);
  font-weight: 600;
}

/* Títulos de sección con barra lateral de acento */
.card-block-title {
  position: relative;
  padding-left: 0.9rem;
  font-weight: 700;
}
.card-block-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 1.1em;
  background: linear-gradient(180deg, var(--c-action), var(--c-secondary));
  border-radius: 4px;
}

/* Cards de tipo: hover más vivo y seleccionado con gradiente */
.tipo-card {
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tipo-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-action);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c-action) 15%, transparent);
}
.tipo-cards input[type="radio"]:checked + .tipo-card {
  border-color: var(--c-action);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c-action) 8%, #ffffff) 0%,
    color-mix(in srgb, var(--c-primary) 5%, #ffffff) 100%
  );
  box-shadow: 0 6px 22px color-mix(in srgb, var(--c-action) 20%, transparent);
}
.tipo-cards input[type="radio"]:checked + .tipo-card .tipo-card-icon {
  background: linear-gradient(135deg, var(--c-action), var(--c-primary));
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-action) 35%, transparent);
}
.tipo-card-title {
  font-size: 1.15rem;
}

/* Sub-cards del vendedor: acento teal en activo */
.subtipo-card {
  transition: all 0.2s ease;
}
.subtipo-card:hover {
  border-color: var(--c-action);
  background: color-mix(in srgb, var(--c-action) 4%, #ffffff);
}
.subtipo-cards input[type="radio"]:checked + .subtipo-card {
  border-color: var(--c-action);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c-action) 8%, #ffffff),
    #ffffff
  );
}
.subtipo-cards input[type="radio"]:checked + .subtipo-card i {
  background: linear-gradient(135deg, var(--c-action), var(--c-primary));
  color: #fff;
}

/* Input teléfono: prefijo con fondo teal sutil */
.tel-prefijo {
  background: color-mix(in srgb, var(--c-action) 10%, var(--gris-fondo-seccion));
  color: var(--c-action);
  border-right-color: color-mix(in srgb, var(--c-action) 25%, var(--gris-borde));
}
.tel-input-group:focus-within {
  border-color: var(--c-action);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-action) 18%, transparent);
}
.tel-input-group:focus-within .tel-prefijo {
  background: color-mix(in srgb, var(--c-action) 18%, var(--gris-fondo-seccion));
}

/* Inputs en foco: halo teal en lugar de azul */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--c-action);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-action) 15%, transparent);
}

/* Botón CTA principal: teal (color de acción), no dorado */
.btn-pill-primary {
  background: linear-gradient(135deg, var(--c-action) 0%, color-mix(in srgb, var(--c-action) 80%, var(--c-primary)) 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c-action) 30%, transparent);
}
.btn-pill-primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-action) 92%, #000) 0%, var(--c-primary) 100%);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--c-action) 40%, transparent);
  transform: translateY(-1px);
}
.btn-pill-primary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-action) 60%, transparent);
  outline-offset: 3px;
}

/* Label de subir imagen: mantener dorado como secundario */
label.file-input-label {
  background: var(--c-secondary);
  color: var(--c-primary);
  font-weight: 600;
}

/* Banner de aviso (top): bordes y fondo más vivos */
.auth-alert {
  background: color-mix(in srgb, var(--c-action) 8%, #ffffff);
  border-left-color: var(--c-action);
}
.auth-alert i {
  color: var(--c-action);
}
.auth-alert-error {
  background: color-mix(in srgb, var(--c-danger) 8%, #ffffff);
  border-left-color: var(--c-danger);
}
.auth-alert-error i {
  color: var(--c-danger);
}

/* CTA secundario "Agregar otro lugar" */
.btn-pill-primary-outline {
  border-color: var(--c-action);
  color: var(--c-action);
}
.btn-pill-primary-outline:hover {
  background: var(--c-action);
  color: #ffffff;
}

/* Link "Inicia sesión" */
.login-hint-row a {
  color: var(--c-action);
}

/* Sidebar: borde superior con gradiente */
.side-card {
  border: 1px solid var(--gris-borde);
  border-top: 4px solid var(--c-secondary);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    color-mix(in srgb, var(--c-secondary) 4%, #ffffff) 100%
  );
}
.side-headline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.side-headline .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-secondary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-secondary) 25%, transparent);
}
.side-box i {
  background: color-mix(in srgb, var(--c-action) 12%, transparent) !important;
  color: var(--c-action) !important;
}

/* Validation hint: éxito y error con badge fondo */
.validation-hint {
  font-weight: 500;
}
.validation-hint.ok {
  color: var(--c-success);
}
.validation-hint.ok::before {
  content: '✓ ';
  font-weight: 700;
}
.validation-hint.error {
  color: var(--c-danger);
}
.validation-hint.error::before {
  content: '⚠ ';
  font-weight: 700;
}

/* Password checklist: items ok con check vivido */
.check-item.ok {
  color: var(--c-success);
}
.check-item.invalid {
  color: var(--c-danger);
}

/* Punto rojo de campo requerido más visible */
.req-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-action);
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* Toggle "ojo" para ver/ocultar contraseña */
.password-wrapper {
  position: relative;
}
.password-wrapper .form-input {
  padding-right: 2.75rem;
}
.toggle-pass {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-secundario);
  transition: all 0.2s ease;
}
.toggle-pass:hover {
  background: color-mix(in srgb, var(--c-action) 10%, transparent);
  color: var(--c-action);
}
.toggle-pass:focus-visible {
  outline: 2px solid var(--c-action);
  outline-offset: 1px;
}
.toggle-pass.active {
  color: var(--c-action);
}

/* Checkbox WhatsApp debajo del input de teléfono */
.tel-whatsapp {
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--c-success) 8%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--c-success) 25%, var(--gris-borde));
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--texto-principal);
  cursor: pointer;
}
.tel-whatsapp:hover {
  background: color-mix(in srgb, var(--c-success) 12%, #ffffff);
}
.tel-whatsapp .fa-whatsapp {
  color: #25D366;
  margin-right: 0.25rem;
}