/*
  ==========================================================================
  UKRAS — BASE
  ==========================================================================
  Tokens de marca, mapeo a Bootstrap 5.3, botones, formularios, componentes
  compartidos, modal propio, toasts y utilidades. Lo cargan TODAS las páginas,
  siempre antes que el archivo de su área.

  Dónde va una regla nueva: si la clase se usa en más de un área, en ukras-base.css;
  si solo en una, en el archivo de esa área. Los colores salen SIEMPRE de los tokens.

  Índice:
    1. TOKENS
    2. MAPEO A BOOTSTRAP 5.3
    3. BASE
    4. BOTONES
    5. FORMULARIOS
    6. COMPONENTES BOOTSTRAP RE-TEMATIZADOS
    7. AVATAR (dashboard, perfil y micrositio)
    8. COMPONENTES UKRAS
    9. MODAL PROPIO
   10. TOASTS (feedback global de acciones)
   11. PIEZAS COMPARTIDAS CON EL MICROSITIO (montos, avisos, "Te atiende", contacto)
   12. UTILIDADES SEMÁNTICAS
   13. CONTRASEÑA CON MOSTRAR/OCULTAR, REQUISITOS Y OPCIONES EN TARJETA
   14. LOGO DE UKRAS EN IMAGEN (sidebar y acceso)
   15. RED DE DISTRIBUCIÓN Y MI EQUIPO
  ==========================================================================
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- Marca --- */
  --ukras-primario: #0F153D;
  --ukras-primario-hover: #171E50;
  --ukras-primario-active: #080D2D;
  --ukras-primario-disabled: #A4A8BB;

  --ukras-secundario: #363E6D;
  --ukras-secundario-hover: #2D345D;
  --ukras-secundario-active: #252B4D;

  --ukras-acento: #F2B84B;
  --ukras-acento-hover: #D99E32;
  --ukras-acento-active: #BE8626;
  --ukras-acento-focus: #FDF1D6;
  /* Texto sobre el acento. En el micrositio se recalcula según el color del tenant. */
  --ukras-acento-texto: #202332;

  /* --- Semánticos (de estado, no de branding) --- */
  --ukras-exito: #5C8D82;
  --ukras-exito-fuerte: #3F6B61;   /* Para texto y botones: #5C8D82 sobre blanco da 3.8:1 (no pasa AA); este da 6:1 */
  --ukras-advertencia: #D99E32;
  --ukras-error: #D93838;
  --ukras-error-hover: #BF2F2F;
  --ukras-error-active: #A62828;
  --ukras-info: #363E6D;

  /* Fondos suaves + texto enfatizado por estado (alerts, badges, toasts) */
  --ukras-neutro-suave: #EEF0F5;
  --ukras-info-suave: #EBECF3;
  --ukras-info-borde: #C6C9DB;
  --ukras-info-texto: #252B4D;
  --ukras-exito-suave: #E8F1EF;
  --ukras-exito-borde: #BDD5CF;
  --ukras-exito-texto: #2F544B;
  --ukras-advertencia-suave: #FDF4E2;
  --ukras-advertencia-borde: #F2D49B;
  --ukras-advertencia-texto: #7A5410;
  --ukras-error-suave: #FBEAEA;
  --ukras-error-borde: #F2BDBD;
  --ukras-error-texto: #9B1F1F;

  /* --- Neutros --- */
  --ukras-fondo: #F7F8FC;
  --ukras-superficie: #FFFFFF;
  --ukras-borde: #D9DCE7;
  --ukras-borde-fuerte: #C3C7D6;

  /* --- Texto --- */
  --ukras-texto: #202332;
  --ukras-texto-secundario: #5F6475;
  --ukras-texto-muted: #6B7083;    /* Antes #858A9B (3.4:1, no pasaba AA). Ahora 4.9:1 sobre blanco */
  --ukras-texto-inverso: #FFFFFF;

  /* --- Radios --- */
  --ukras-radius-sm: 0.375rem;     /* botones, inputs */
  --ukras-radius-md: 0.5rem;       /* cards, modales, toasts */
  --ukras-radius-lg: 0.75rem;      /* bottom sheet, contenedores grandes */
  --ukras-radius-pill: 999px;

  /* --- Sombras (tinte del azul de marca, no negras genéricas) --- */
  --ukras-shadow-sm: 0 1px 3px rgba(15, 21, 61, 0.06);
  --ukras-shadow-md: 0 4px 12px rgba(15, 21, 61, 0.08);
  --ukras-shadow-lg: 0 10px 30px rgba(15, 21, 61, 0.10);
  --ukras-shadow-xl: 0 20px 50px rgba(15, 21, 61, 0.14);

  /* --- Foco accesible (un solo estilo en toda la app) --- */
  --ukras-focus-color: var(--ukras-primario);
  --ukras-focus-ring: 0 0 0 0.2rem rgba(54, 62, 109, 0.18);

  /* --- Layout --- */
  --ukras-sidebar-ancho: 240px;
  --ukras-topbar-alto: 56px;
  --ukras-contenido-max: 1440px;
  --ukras-micrositio-max: 720px;
}

/* ==========================================================================
   2. MAPEO A BOOTSTRAP 5.3
   Bootstrap 5.3 NO usa --bs-primary en botones ni en utilidades: los botones
   usan variables por componente (--bs-btn-*) y las utilidades (.bg-primary,
   .text-primary, .badge, .alert) usan --bs-*-rgb y --bs-*-subtle/emphasis.
   Por eso antes los botones .btn-primary seguían saliendo azul Bootstrap.
   ========================================================================== */
:root {
  --bs-primary: var(--ukras-primario);
  --bs-primary-rgb: 15, 21, 61;
  --bs-secondary: var(--ukras-secundario);
  --bs-secondary-rgb: 54, 62, 109;
  --bs-success: var(--ukras-exito);
  --bs-success-rgb: 92, 141, 130;
  --bs-danger: var(--ukras-error);
  --bs-danger-rgb: 217, 56, 56;
  --bs-warning: var(--ukras-advertencia);
  --bs-warning-rgb: 217, 158, 50;
  --bs-info: var(--ukras-info);
  --bs-info-rgb: 54, 62, 109;

  /* Alerts, badges subtle, list-group, etc. */
  --bs-primary-text-emphasis: var(--ukras-primario);
  --bs-primary-bg-subtle: #E7E8EF;
  --bs-primary-border-subtle: #C3C5D3;
  --bs-secondary-text-emphasis: var(--ukras-info-texto);
  --bs-secondary-bg-subtle: var(--ukras-info-suave);
  --bs-secondary-border-subtle: var(--ukras-info-borde);
  --bs-info-text-emphasis: var(--ukras-info-texto);
  --bs-info-bg-subtle: var(--ukras-info-suave);
  --bs-info-border-subtle: var(--ukras-info-borde);
  --bs-success-text-emphasis: var(--ukras-exito-texto);
  --bs-success-bg-subtle: var(--ukras-exito-suave);
  --bs-success-border-subtle: var(--ukras-exito-borde);
  --bs-warning-text-emphasis: var(--ukras-advertencia-texto);
  --bs-warning-bg-subtle: var(--ukras-advertencia-suave);
  --bs-warning-border-subtle: var(--ukras-advertencia-borde);
  --bs-danger-text-emphasis: var(--ukras-error-texto);
  --bs-danger-bg-subtle: var(--ukras-error-suave);
  --bs-danger-border-subtle: var(--ukras-error-borde);

  /* Cuerpo, texto y bordes */
  --bs-body-bg: var(--ukras-fondo);
  --bs-body-color: var(--ukras-texto);
  --bs-heading-color: var(--ukras-primario);
  --bs-secondary-color: var(--ukras-texto-secundario);   /* .text-muted / .text-body-secondary */
  --bs-tertiary-color: var(--ukras-texto-muted);
  --bs-secondary-bg: var(--ukras-neutro-suave);
  --bs-tertiary-bg: var(--ukras-fondo);
  --bs-border-color: var(--ukras-borde);
  --bs-border-radius: var(--ukras-radius-sm);
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: var(--ukras-radius-md);

  /* Links */
  --bs-link-color: var(--ukras-secundario);
  --bs-link-color-rgb: 54, 62, 109;
  --bs-link-hover-color: var(--ukras-primario);
  --bs-link-hover-color-rgb: 15, 21, 61;

  /* Validación de formularios */
  --bs-form-valid-color: var(--ukras-exito-fuerte);
  --bs-form-valid-border-color: var(--ukras-exito);
  --bs-form-invalid-color: var(--ukras-error);
  --bs-form-invalid-border-color: var(--ukras-error);

  /* Utilidad .focus-ring de Bootstrap */
  --bs-focus-ring-color: rgba(54, 62, 109, 0.25);
}

/* ==========================================================================
   3. BASE
   ========================================================================== */
body {
  background-color: var(--ukras-fondo);
  color: var(--ukras-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Alpine: oculta elementos con x-show hasta que Alpine inicializa (evita el "flash" de modales y estados) */
[x-cloak] {
  display: none !important;
}

/* Foco visible solo con teclado, igual en toda la app */
:focus-visible {
  outline: 2px solid var(--ukras-focus-color);
  outline-offset: 2px;
}

/* Cifras alineadas en tablas, totales y KPIs */
.ukras-num {
  font-variant-numeric: tabular-nums;
}

/* Skip link (a11y): visible solo al recibir foco con Tab */
.ukras-skip-link:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: var(--ukras-superficie);
  color: var(--ukras-primario);
  border-radius: var(--ukras-radius-sm);
  box-shadow: var(--ukras-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   4. BOTONES
   Todo vía variables de componente de Bootstrap: cubre hover, active,
   disabled y foco sin !important.
   ========================================================================== */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.btn:focus-visible {
  outline: 2px solid var(--ukras-focus-color);
  outline-offset: 2px;
  box-shadow: none;
}

/* Estado "procesando": úsalo con :disabled="guardando" + spinner */
.btn[aria-busy="true"] {
  pointer-events: none;
  cursor: progress;
}

.btn-primary {
  --bs-btn-color: var(--ukras-texto-inverso);
  --bs-btn-bg: var(--ukras-primario);
  --bs-btn-border-color: var(--ukras-primario);
  --bs-btn-hover-color: var(--ukras-texto-inverso);
  --bs-btn-hover-bg: var(--ukras-primario-hover);
  --bs-btn-hover-border-color: var(--ukras-primario-hover);
  --bs-btn-active-color: var(--ukras-texto-inverso);
  --bs-btn-active-bg: var(--ukras-primario-active);
  --bs-btn-active-border-color: var(--ukras-primario-active);
  --bs-btn-disabled-color: var(--ukras-texto-inverso);
  --bs-btn-disabled-bg: var(--ukras-primario-disabled);
  --bs-btn-disabled-border-color: var(--ukras-primario-disabled);
  --bs-btn-disabled-opacity: 1;
}

.btn-outline-primary {
  --bs-btn-color: var(--ukras-primario);
  --bs-btn-border-color: var(--ukras-primario);
  --bs-btn-hover-color: var(--ukras-texto-inverso);
  --bs-btn-hover-bg: var(--ukras-primario);
  --bs-btn-hover-border-color: var(--ukras-primario);
  --bs-btn-active-color: var(--ukras-texto-inverso);
  --bs-btn-active-bg: var(--ukras-primario-active);
  --bs-btn-active-border-color: var(--ukras-primario-active);
  --bs-btn-disabled-color: var(--ukras-primario-disabled);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--ukras-primario-disabled);
}

.btn-secondary {
  --bs-btn-color: var(--ukras-texto-inverso);
  --bs-btn-bg: var(--ukras-secundario);
  --bs-btn-border-color: var(--ukras-secundario);
  --bs-btn-hover-color: var(--ukras-texto-inverso);
  --bs-btn-hover-bg: var(--ukras-secundario-hover);
  --bs-btn-hover-border-color: var(--ukras-secundario-hover);
  --bs-btn-active-color: var(--ukras-texto-inverso);
  --bs-btn-active-bg: var(--ukras-secundario-active);
  --bs-btn-active-border-color: var(--ukras-secundario-active);
  --bs-btn-disabled-color: var(--ukras-texto-inverso);
  --bs-btn-disabled-bg: var(--ukras-primario-disabled);
  --bs-btn-disabled-border-color: var(--ukras-primario-disabled);
}

/* Botón neutro (Cancelar, Salir, acciones terciarias): gris de marca, no azul */
.btn-outline-secondary {
  --bs-btn-color: var(--ukras-texto-secundario);
  --bs-btn-bg: var(--ukras-superficie);
  --bs-btn-border-color: var(--ukras-borde-fuerte);
  --bs-btn-hover-color: var(--ukras-texto);
  --bs-btn-hover-bg: var(--ukras-fondo);
  --bs-btn-hover-border-color: var(--ukras-borde-fuerte);
  --bs-btn-active-color: var(--ukras-texto);
  --bs-btn-active-bg: var(--ukras-neutro-suave);
  --bs-btn-active-border-color: var(--ukras-borde-fuerte);
  --bs-btn-disabled-color: var(--ukras-texto-muted);
  --bs-btn-disabled-bg: var(--ukras-superficie);
  --bs-btn-disabled-border-color: var(--ukras-borde);
}

.btn-success {
  --bs-btn-color: var(--ukras-texto-inverso);
  --bs-btn-bg: var(--ukras-exito-fuerte);
  --bs-btn-border-color: var(--ukras-exito-fuerte);
  --bs-btn-hover-color: var(--ukras-texto-inverso);
  --bs-btn-hover-bg: var(--ukras-exito-texto);
  --bs-btn-hover-border-color: var(--ukras-exito-texto);
  --bs-btn-active-color: var(--ukras-texto-inverso);
  --bs-btn-active-bg: #264540;
  --bs-btn-active-border-color: #264540;
  --bs-btn-disabled-color: var(--ukras-texto-inverso);
  --bs-btn-disabled-bg: var(--ukras-exito);
  --bs-btn-disabled-border-color: var(--ukras-exito);
}

.btn-danger {
  --bs-btn-color: var(--ukras-texto-inverso);
  --bs-btn-bg: var(--ukras-error);
  --bs-btn-border-color: var(--ukras-error);
  --bs-btn-hover-color: var(--ukras-texto-inverso);
  --bs-btn-hover-bg: var(--ukras-error-hover);
  --bs-btn-hover-border-color: var(--ukras-error-hover);
  --bs-btn-active-color: var(--ukras-texto-inverso);
  --bs-btn-active-bg: var(--ukras-error-active);
  --bs-btn-active-border-color: var(--ukras-error-active);
}

.btn-outline-danger {
  --bs-btn-color: var(--ukras-error);
  --bs-btn-border-color: var(--ukras-error);
  --bs-btn-hover-color: var(--ukras-texto-inverso);
  --bs-btn-hover-bg: var(--ukras-error);
  --bs-btn-hover-border-color: var(--ukras-error);
  --bs-btn-active-color: var(--ukras-texto-inverso);
  --bs-btn-active-bg: var(--ukras-error-active);
  --bs-btn-active-border-color: var(--ukras-error-active);
}

.btn-link {
  --bs-btn-color: var(--ukras-secundario);
  --bs-btn-hover-color: var(--ukras-primario);
  --bs-btn-active-color: var(--ukras-primario);
}

/* Acción principal de negocio (Cotizar, Aceptar, Guardar destacado) */
.btn-acento {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--ukras-acento-texto);   /* Grafito sobre ámbar: 8.7:1 */
  --bs-btn-bg: var(--ukras-acento);
  --bs-btn-border-color: var(--ukras-acento);
  --bs-btn-hover-color: var(--ukras-acento-texto);
  --bs-btn-hover-bg: var(--ukras-acento-hover);
  --bs-btn-hover-border-color: var(--ukras-acento-hover);
  --bs-btn-active-color: var(--ukras-acento-texto);
  --bs-btn-active-bg: var(--ukras-acento-active);
  --bs-btn-active-border-color: var(--ukras-acento-active);
  --bs-btn-disabled-color: var(--ukras-acento-texto);
  --bs-btn-disabled-bg: var(--ukras-acento);
  --bs-btn-disabled-border-color: var(--ukras-acento);
  --bs-btn-disabled-opacity: 0.55;
}

/* ==========================================================================
   5. FORMULARIOS
   ========================================================================== */
.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ukras-texto);
  margin-bottom: 0.375rem;
}

.form-text {
  color: var(--ukras-texto-muted);
}

.form-control,
.form-select {
  border-color: var(--ukras-borde-fuerte);
  /* Bootstrap usa --bs-body-bg como fondo de los campos; lo mapeamos al gris de la
     página, así que aquí forzamos blanco para que el campo no se confunda con el fondo */
  background-color: var(--ukras-superficie);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--ukras-neutro-suave);
}

.form-check-input:not(:checked) {
  background-color: var(--ukras-superficie);
}

.form-control::placeholder {
  color: var(--ukras-texto-muted);
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ukras-secundario);
  box-shadow: var(--ukras-focus-ring);
}

.form-check-input:focus {
  border-color: var(--ukras-secundario);
  box-shadow: var(--ukras-focus-ring);
}

.form-check-input:checked {
  background-color: var(--ukras-primario);
  border-color: var(--ukras-primario);
}

.form-switch .form-check-input:focus:not(:checked) {
  /* Bootstrap pinta la perilla en azul claro (#86b7fe) al enfocar */
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239EA3BF'/%3e%3c/svg%3e");
}

.input-group-text {
  background-color: var(--ukras-fondo);
  border-color: var(--ukras-borde-fuerte);
  color: var(--ukras-texto-secundario);
}

/* ==========================================================================
   6. COMPONENTES BOOTSTRAP RE-TEMATIZADOS
   ========================================================================== */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ukras-primario);
}

.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--ukras-primario);
  --bs-nav-tabs-border-color: var(--ukras-borde);
  --bs-nav-tabs-link-active-border-color: var(--ukras-borde) var(--ukras-borde) var(--ukras-superficie);
}

.nav {
  --bs-nav-link-color: var(--ukras-texto-secundario);
  --bs-nav-link-hover-color: var(--ukras-primario);
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--ukras-borde);
  --bs-dropdown-box-shadow: var(--ukras-shadow-md);
  --bs-dropdown-link-active-bg: var(--ukras-primario);
  --bs-dropdown-link-hover-bg: var(--ukras-fondo);
  box-shadow: var(--bs-dropdown-box-shadow);
}

.pagination {
  --bs-pagination-color: var(--ukras-secundario);
  --bs-pagination-hover-color: var(--ukras-primario);
  --bs-pagination-focus-color: var(--ukras-primario);
  --bs-pagination-focus-box-shadow: var(--ukras-focus-ring);
  --bs-pagination-active-bg: var(--ukras-primario);
  --bs-pagination-active-border-color: var(--ukras-primario);
}

.list-group {
  --bs-list-group-active-bg: var(--ukras-primario);
  --bs-list-group-active-border-color: var(--ukras-primario);
}

/* Barras de progreso (ej. cupos del plan en Mi equipo) */
.progress {
  --bs-progress-bg: var(--ukras-neutro-suave);
  --bs-progress-bar-bg: var(--ukras-secundario);
  --bs-progress-border-radius: var(--ukras-radius-pill);
}

/* Tablas */
.table {
  /* Bootstrap usa --bs-body-bg (gris de la página) como fondo de celdas: forzamos blanco */
  --bs-table-bg: var(--ukras-superficie);
  --bs-table-color: var(--ukras-texto);
  --bs-table-border-color: var(--ukras-borde);
  --bs-table-hover-bg: rgba(15, 21, 61, 0.03);
  --bs-table-striped-bg: rgba(15, 21, 61, 0.02);
}

/* Variante Ukras: encabezados discretos, filas respirables */
.ukras-table {
  margin-bottom: 0;
}

.ukras-table > thead > tr > th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ukras-texto-secundario);
  background-color: var(--ukras-fondo);
  border-bottom-width: 1px;
  white-space: nowrap;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.ukras-table > tbody > tr > td {
  vertical-align: middle;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.ukras-table > tbody > tr:last-child > td {
  border-bottom: 0;
}

/* Fila completa clicable: el enlace del nombre se estira sobre toda la fila */
.ukras-fila-link {
  position: relative;
  cursor: pointer;
}

.ukras-fila-link__a {
  color: var(--ukras-primario);
  text-decoration: none;
}

.ukras-fila-link__a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ukras-fila-link:hover .ukras-fila-link__a {
  text-decoration: underline;
}

.ukras-fila-link:hover .bi-chevron-right {
  color: var(--ukras-primario);
}

/* Utilidad que Bootstrap no trae: permite truncar texto dentro de flex */
.min-w-0 {
  min-width: 0;
}

/* ==========================================================================
   7. AVATAR (dashboard, perfil y micrositio)
   ========================================================================== */
.ukras-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--ukras-secundario);
  color: var(--ukras-texto-inverso);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ==========================================================================
   8. COMPONENTES UKRAS
   ========================================================================== */
/* --- Card --- */
.ukras-card {
  background-color: var(--ukras-superficie);
  border: 1px solid var(--ukras-borde);
  border-radius: var(--ukras-radius-md);
  box-shadow: var(--ukras-shadow-sm);
}

.ukras-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ukras-borde);
}

.ukras-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ukras-primario);
}

.ukras-card__body {
  padding: 1.25rem;
}

.ukras-card__footer {
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--ukras-borde);
  background-color: var(--ukras-fondo);
  border-radius: 0 0 var(--ukras-radius-md) var(--ukras-radius-md);
}

/* --- Encabezado de página (título + subtítulo + acciones) --- */
.ukras-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ukras-page-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ukras-primario);
}

.ukras-page-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--ukras-texto-secundario);
}

.ukras-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- Badges de estado ---
   Semánticos: --neutro, --info, --exito, --advertencia, --error
   Alias de estatus de cotización (usar con {{ estatus|lower }}):
   --borrador, --enviada, --aceptada, --cancelada */
.ukras-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--ukras-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  background-color: var(--ukras-neutro-suave);
  color: var(--ukras-texto-secundario);
}

.ukras-badge::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
}

.ukras-badge--sin-punto::before {
  display: none;
}

.ukras-badge--neutro,
.ukras-badge--borrador {
  background-color: var(--ukras-neutro-suave);
  color: var(--ukras-texto-secundario);
}

.ukras-badge--info,
.ukras-badge--enviada {
  background-color: var(--ukras-info-suave);
  color: var(--ukras-info-texto);
}

.ukras-badge--exito,
.ukras-badge--aceptada {
  background-color: var(--ukras-exito-suave);
  color: var(--ukras-exito-texto);
}

.ukras-badge--advertencia {
  background-color: var(--ukras-advertencia-suave);
  color: var(--ukras-advertencia-texto);
}

.ukras-badge--error,
.ukras-badge--cancelada {
  background-color: var(--ukras-error-suave);
  color: var(--ukras-error-texto);
}

/* Vencida (pasó su vigencia, se puede renovar): ámbar, nunca el rojo de "Cancelada" */
.ukras-badge--vencida {
  background-color: var(--ukras-advertencia-suave);
  color: var(--ukras-advertencia-texto);
  box-shadow: inset 0 0 0 1px var(--ukras-advertencia-borde);
}

/* --- Estado vacío --- */
.ukras-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}

.ukras-empty-state__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background-color: var(--ukras-info-suave);
  color: var(--ukras-secundario);
  font-size: 1.5rem;
}

.ukras-empty-state__titulo {
  margin: 0 0 0.375rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ukras-primario);
}

.ukras-empty-state__texto {
  max-width: 420px;
  margin: 0 auto 1.25rem;
  color: var(--ukras-texto-secundario);
  font-size: 0.9375rem;
}

/* --- Imagen de producto + placeholder ---
   Uso: <div class="ukras-producto-img">
          <span class="ukras-producto-img__vacia"><i class="bi bi-window-split"></i></span>
          <img src="..." alt="..." onerror="this.parentElement.classList.add('ukras-producto-img--rota'); this.remove();">
        </div>
   El placeholder siempre está debajo: si no hay foto o la URL falla, es lo que se ve.
   El tamaño lo define el contenedor (aspect-ratio o width/height). */
.ukras-producto-img {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--ukras-radius-md);
  background-color: #EEF0F6;
}

.ukras-producto-img > img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder: lamas de persiana discretas + ícono, se lee como "producto sin foto", no como error */
.ukras-producto-img__vacia {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background:
    repeating-linear-gradient(180deg, rgba(15, 21, 61, 0.045) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, #F1F3F8 0%, #E6E9F1 100%);
  color: #9EA3BF;
  font-size: 1.5rem;
}

.ukras-producto-img__vacia small {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ukras-texto-muted);
}

/* Variante botón (abre la foto ampliada) */
.ukras-producto-img--boton {
  padding: 0;
  border: 0;
  cursor: zoom-in;
}

.ukras-producto-img--boton > img {
  transition: transform 0.3s ease;
}

.ukras-producto-img--boton:hover > img {
  transform: scale(1.04);
}

.ukras-producto-img__zoom {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: rgba(15, 21, 61, 0.6);
  color: #FFFFFF;
  font-size: 0.75rem;
}

@media (max-width: 767.98px) {
  .ukras-cot-item__media .ukras-producto-img__zoom {
      right: 0.25rem;
      bottom: 0.25rem;
      width: 1.375rem;
      height: 1.375rem;
      font-size: 0.625rem;
    }
}

/* Si la URL de la foto falla: sin zoom ni ícono de ampliar */
.ukras-producto-img--rota {
  cursor: default;
}

.ukras-producto-img--rota .ukras-producto-img__zoom {
  display: none;
}

/* Miniaturas para listados (catálogo del fabricante) */
.ukras-producto-img--sm {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border-radius: var(--ukras-radius-sm);
}

.ukras-producto-img--sm .ukras-producto-img__vacia {
  font-size: 1.125rem;
}

.ukras-producto-img--md {
  width: 4.5rem;
  height: 4.5rem;
  flex: 0 0 auto;
}

/* --- Campo de foto de producto (dashboard/_campo_imagen.html) --- */
.ukras-imagen {
  position: relative;
  /* El componente se adapta a SU ancho (no al de la pantalla): en columnas angostas se apila */
  container-type: inline-size;
}

.ukras-imagen__input {
  /* Oculto visualmente pero accesible con teclado (Tab + Enter abre el selector) */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ukras-imagen__zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 160px;
  margin: 0;
  padding: 1.5rem 1rem;
  border: 1.5px dashed var(--ukras-borde-fuerte);
  border-radius: var(--ukras-radius-md);
  background-color: var(--ukras-fondo);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ukras-imagen__zona:hover,
.ukras-imagen__zona--activa {
  border-color: var(--ukras-secundario);
  background-color: var(--ukras-info-suave);
}

.ukras-imagen__input:focus-visible ~ .ukras-imagen__zona {
  outline: 2px solid var(--ukras-focus-color);
  outline-offset: 2px;
}

.ukras-imagen__zona-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  background-color: var(--ukras-superficie);
  color: var(--ukras-secundario);
  font-size: 1.25rem;
  box-shadow: var(--ukras-shadow-sm);
}

.ukras-imagen__zona-titulo {
  font-weight: 500;
  color: var(--ukras-texto);
}

.ukras-imagen__zona-link {
  color: var(--ukras-secundario);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ukras-imagen__zona-ayuda {
  font-size: 0.8125rem;
  color: var(--ukras-texto-muted);
}

.ukras-imagen__preview {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem;
  border: 1px solid var(--ukras-borde);
  border-radius: var(--ukras-radius-md);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ukras-imagen__preview--activa {
  border-color: var(--ukras-secundario);
  border-style: dashed;
  background-color: var(--ukras-info-suave);
}

@media (max-width: 420px) {
  .ukras-imagen__preview {
      grid-template-columns: 1fr;
    }
  .ukras-imagen__marco {
      max-width: 12rem;
    }
}

.ukras-imagen__marco {
  aspect-ratio: 1 / 1;
}

@container (max-width: 380px) {
  .ukras-imagen__preview {
      grid-template-columns: 1fr;
      gap: 0.875rem;
    }
  .ukras-imagen__marco {
      max-width: none;
      aspect-ratio: 4 / 3;
    }
}

.ukras-imagen__progreso {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: rgba(15, 21, 61, 0.55);
  color: #FFFFFF;
}

.ukras-imagen__progreso-num {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ukras-imagen__progreso-barra {
  width: 70%;
  height: 4px;
  border-radius: var(--ukras-radius-pill);
  background-color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.ukras-imagen__progreso-barra > span {
  display: block;
  height: 100%;
  background-color: #FFFFFF;
  transition: width 0.2s ease;
}

.ukras-imagen__acciones {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.ukras-imagen__estado {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ukras-texto-secundario);
}

.ukras-imagen__estado .spinner-border {
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: -0.125em;
}

.ukras-imagen__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ukras-imagen__confirmar {
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ukras-error-texto);
}

.ukras-imagen__error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--ukras-error);
}

/* --- Skeleton (estado de carga) --- */
.ukras-skeleton {
  display: block;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #EEF0F5 25%, #F7F8FC 37%, #EEF0F5 63%);
  background-size: 400% 100%;
  animation: ukras-shimmer 1.4s ease infinite;
}

.ukras-skeleton--texto {
  height: 0.875rem;
  margin-bottom: 0.5rem;
}

.ukras-skeleton--titulo {
  height: 1.25rem;
  width: 40%;
  margin-bottom: 0.75rem;
}

.ukras-skeleton--bloque {
  height: 6rem;
}

@keyframes ukras-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ==========================================================================
   9. MODAL PROPIO
   100% independiente de .modal/.modal-dialog/.modal-content de Bootstrap
   (ya hubo dos rondas de bugs por depender de su cascada interna).
   .modal-header/-body/-footer se reutilizan solo como nombres de clase
   semánticos; aquí controlamos cada propiedad visual.

   Desktop: centrado. Móvil (<576px): bottom sheet, más alcanzable con el pulgar.
   ========================================================================== */
.ukras-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 21, 61, 0.55); /* tinte de marca en vez de negro genérico */
  overscroll-behavior: contain;
}

.ukras-modal-box {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--ukras-superficie);
  border-radius: var(--ukras-radius-md);
  box-shadow: var(--ukras-shadow-xl);
}

.ukras-modal-box--sm { max-width: 400px; }

.ukras-modal-box--lg { max-width: 720px; }

.ukras-modal-box .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ukras-borde);
}

.ukras-modal-box .modal-header .modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ukras-primario);
}

.ukras-modal-box .modal-body {
  padding: 1.5rem;
}

.ukras-modal-box .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--ukras-borde);
}

@media (max-width: 575.98px) {
  .ukras-modal-backdrop {
      align-items: flex-end;
      padding: 0;
    }
  .ukras-modal-box,
    .ukras-modal-box--sm,
    .ukras-modal-box--lg {
      max-width: none;
      max-height: 92vh;
      border-radius: var(--ukras-radius-lg) var(--ukras-radius-lg) 0 0;
      padding-bottom: env(safe-area-inset-bottom);
    }
  .ukras-modal-box .modal-header,
    .ukras-modal-box .modal-body,
    .ukras-modal-box .modal-footer {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
  /* Botones a todo lo ancho, apilados: la acción principal queda arriba y "Cancelar" debajo */
  .ukras-modal-box .modal-footer {
      flex-direction: column-reverse;
    }
  .ukras-modal-box .modal-footer .btn {
      width: 100%;
      min-height: 44px;
    }
}

/* ==========================================================================
   10. TOASTS (feedback global de acciones)
   Disparar desde Alpine:  $dispatch('ukras-toast', { mensaje: 'Guardado', tipo: 'exito' })
   Desde JS plano:         ukrasToast('Guardado', 'exito')
   Tipos: exito | error | advertencia | info
   ========================================================================== */
.ukras-toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1090; /* por encima del modal (1055) */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .ukras-toast-region {
      left: 1rem;
      right: 1rem;
      bottom: calc(1rem + env(safe-area-inset-bottom));
      width: auto;
    }
}

.ukras-toast {
  --ukras-toast-color: var(--ukras-secundario);
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background-color: var(--ukras-superficie);
  border: 1px solid var(--ukras-borde);
  border-left: 4px solid var(--ukras-toast-color);
  border-radius: var(--ukras-radius-md);
  box-shadow: var(--ukras-shadow-lg);
  font-size: 0.9375rem;
}

.ukras-toast__icono {
  color: var(--ukras-toast-color);
  font-size: 1.125rem;
  line-height: 1.3;
}

.ukras-toast__mensaje {
  flex: 1 1 auto;
  color: var(--ukras-texto);
  line-height: 1.4;
}

.ukras-toast .btn-close {
  font-size: 0.625rem;
  margin-top: 0.3rem;
}

.ukras-toast--exito       { --ukras-toast-color: var(--ukras-exito-fuerte); }

.ukras-toast--error       { --ukras-toast-color: var(--ukras-error); }

.ukras-toast--advertencia { --ukras-toast-color: var(--ukras-acento-active); }

.ukras-toast--info        { --ukras-toast-color: var(--ukras-secundario); }

/* ==========================================================================
   11. PIEZAS COMPARTIDAS CON EL MICROSITIO (montos, avisos, "Te atiende", contacto)
   ========================================================================== */
/* --- Montos destacados: "$14,384.00 MXN" con centavos y moneda en menor tamaño --- */
.ukras-cot-monto {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ukras-primario);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ukras-cot-monto--md {
  font-size: 1.375rem;
}

.ukras-cot-centavos {
  font-size: 0.6em;
  font-weight: 600;
}

.ukras-cot-moneda {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ukras-texto-secundario);
}

/* --- Avisos de estado (aceptada, no vigente, error) --- */
.ukras-cot-aviso {
  display: flex;
  gap: 0.875rem;
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--ukras-info-borde);
  border-radius: var(--ukras-radius-md);
  background-color: var(--ukras-info-suave);
  color: var(--ukras-info-texto);
}

.ukras-cot-aviso__icono {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1.3;
}

.ukras-cot-aviso__titulo {
  margin: 0 0 0.125rem;
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
}

.ukras-cot-aviso__texto {
  margin: 0;
  font-size: 0.9375rem;
}

.ukras-cot-aviso--exito {
  border-color: var(--ukras-exito-borde);
  background-color: var(--ukras-exito-suave);
  color: var(--ukras-exito-texto);
}

.ukras-cot-aviso--neutro {
  border-color: var(--ukras-borde);
  background-color: var(--ukras-neutro-suave);
  color: var(--ukras-texto-secundario);
}

.ukras-cot-seccion-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.875rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ukras-primario);
}

.ukras-cot-contador {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ukras-texto-secundario);
}

.ukras-cot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.ukras-cot-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--ukras-radius-pill);
  background-color: var(--ukras-neutro-suave);
  color: var(--ukras-texto-secundario);
  font-size: 0.75rem;
  font-weight: 500;
}

/* --- Resumen de inversión --- */
.ukras-cot-desglose {
  display: grid;
  gap: 0.625rem;
  margin: 0;
}

.ukras-cot-desglose__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9375rem;
}

.ukras-cot-desglose__fila dt {
  font-weight: 400;
  color: var(--ukras-texto-secundario);
}

.ukras-cot-desglose__fila dd {
  margin: 0;
  color: var(--ukras-texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ukras-cot-desglose__nota {
  display: block;
  font-size: 0.8125rem;
  color: var(--ukras-texto-muted);
}

.ukras-cot-desglose__fila--ahorro dt,
.ukras-cot-desglose__fila--ahorro dd {
  color: var(--ukras-exito-fuerte);
  font-weight: 500;
}

.ukras-cot-desglose__fila--total {
  margin-top: 0.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--ukras-borde);
}

.ukras-cot-desglose__fila--total dt {
  font-weight: 600;
  color: var(--ukras-texto);
}

/* --- Forma de pago / datos de depósito --- */
.ukras-cot-pago {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.ukras-cot-pago__bloque {
  padding: 0.875rem 1rem;
  border-radius: var(--ukras-radius-md);
  background-color: var(--ukras-fondo);
}

.ukras-cot-pago__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ukras-texto-secundario);
}

.ukras-cot-pago__valor {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ukras-primario);
  font-variant-numeric: tabular-nums;
}

/* --- Contacto --- */
.ukras-cot-contacto {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 576px) {
  .ukras-cot-contacto {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

/* --- Atendido por (tarjeta de contacto del usuario que cotizó) --- */
.ukras-atendido {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1rem;
}

/* Usa el color del tenant (marca blanca), no el azul de Ukras */
.ukras-atendido .ukras-avatar {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.25rem;
  background-color: var(--ukras-acento);
  color: var(--ukras-acento-texto);
  overflow: hidden;
}

.ukras-atendido__etq {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ukras-texto-muted);
}

.ukras-atendido__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ukras-atendido__nombre {
  font-weight: 600;
  color: var(--ukras-texto);
  line-height: 1.25;
}

.ukras-atendido__puesto {
  font-size: 0.8125rem;
  color: var(--ukras-texto-muted);
}

/* ==========================================================================
   12. UTILIDADES SEMÁNTICAS
   ========================================================================== */
/* Texto de éxito usa la variante fuerte: #5C8D82 sobre blanco no pasa AA */
.text-ukras-exito { color: var(--ukras-exito-fuerte) !important; }

.text-ukras-error { color: var(--ukras-error) !important; }

.bg-ukras-exito { background-color: var(--ukras-exito) !important; }

/* Advertencia: usar SIEMPRE con texto oscuro (blanco sobre #D99E32 = 2.4:1) */
.bg-ukras-advertencia { background-color: var(--ukras-advertencia) !important; color: var(--ukras-texto); }

.bg-ukras-error { background-color: var(--ukras-error) !important; }

.bg-ukras-info { background-color: var(--ukras-info) !important; }

/* ==========================================================================
   13. CONTRASEÑA CON MOSTRAR/OCULTAR, REQUISITOS Y OPCIONES EN TARJETA
   ========================================================================== */
fieldset legend.form-label {
  float: none;
  width: auto;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
}

/* --- Contraseña con botón mostrar/ocultar --- */
.ukras-password {
  position: relative;
}

.ukras-password .form-control {
  padding-right: 3rem;
}

.ukras-password__toggle {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--ukras-radius-sm);
  background: transparent;
  color: var(--ukras-texto-muted);
  font-size: 1.125rem;
}

.ukras-password__toggle:hover {
  color: var(--ukras-primario);
  background-color: var(--ukras-fondo);
}

/* Requisito de contraseña que se marca al cumplirse */
.ukras-requisito {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: color 0.15s ease;
}

.ukras-requisito--ok {
  color: var(--ukras-exito-fuerte);
}

/* --- Opciones seleccionables como tarjetas (tipo de cuenta, plan) --- */
.ukras-opciones {
  display: grid;
  gap: 0.625rem;
}

.ukras-opcion {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.ukras-opcion__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ukras-opcion__card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--ukras-borde-fuerte);
  border-radius: var(--ukras-radius-md);
  background-color: var(--ukras-superficie);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ukras-opcion:hover .ukras-opcion__card {
  border-color: var(--ukras-secundario);
}

.ukras-opcion__input:checked + .ukras-opcion__card {
  border-color: var(--ukras-primario);
  background-color: #F3F4F9;
  box-shadow: 0 0 0 1px var(--ukras-primario);
}

.ukras-opcion__input:focus-visible + .ukras-opcion__card {
  outline: 2px solid var(--ukras-focus-color);
  outline-offset: 2px;
}

.ukras-opcion__icono {
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--ukras-secundario);
}

.ukras-opcion__input:checked + .ukras-opcion__card .ukras-opcion__icono {
  color: var(--ukras-primario);
}

.ukras-opcion__titulo {
  display: block;
  font-weight: 600;
  color: var(--ukras-primario);
}

.ukras-opcion__detalle {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ukras-texto-secundario);
}

.ukras-requisito--error {
  color: var(--ukras-error-texto);
}

/* ==========================================================================
   14. LOGO DE UKRAS EN IMAGEN (sidebar y acceso)
   ========================================================================== */
/* --- Logo de la plataforma: misma imagen en fondos claros y oscuros ---
   Sobre azul marino (sidebar, panel de login) el logo se pinta en blanco con un
   filtro, para que un logo oscuro no desaparezca. Funciona con logos de una sola
   tinta; si el logo es multicolor, conviene una versión clara aparte. */
.ukras-sidebar__brand--img::before,
.ukras-auth__panel-marca--img::before,
.ukras-auth__marca-movil--img::before {
  display: none; /* el punto ámbar solo acompaña al texto "UKRAS" */
}

/* ==========================================================================
   15. RED DE DISTRIBUCIÓN Y MI EQUIPO
   ========================================================================== */
/* Los textos .visually-hidden van en position:absolute; sin esto se escapan del
   contenedor con scroll de la tabla y ensanchan toda la página en móvil. */
.table-responsive {
  position: relative;
}

/* Buscador de listas largas (static/js/ukras-buscador.js) */
.ukras-combo {
  position: relative;
}
.ukras-combo__lista {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1055;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(15, 21, 61, 0.14);
}
.ukras-combo__op {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ukras-combo__op:hover,
.ukras-combo__op[aria-selected="true"] {
  background: var(--ukras-acento-focus, #fdf1d6);
  color: var(--ukras-primario, #0f153d);
}
.ukras-combo__nota {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #6c757d);
}