/* ==========================================================================
   Aldecort · Simulador de pavimentos epoxi (pantalla /simulador)
   Prefijo crm-sim-. Modo claro con los tokens de tokens.css y la marca azul de
   css/aldecort-tema.css (--crm-brand-*). Se carga detrás de css/crm.css:
   reutiliza .crm-page, .crm-barra, .crm-panel-titulo, .crm-aviso, .crm-form y
   .crm-contador, y los botones .btn de tokens.css. Nada de Tailwind ni fuentes
   nuevas.

   1. Disposición: tres columnas (≈300 px | flexible | ≈300 px) según el ancho
      de .crm-page: dos por debajo de 1200 px y una por debajo de 720 px
   2. Carta de colores (CartaColores)
   3. Visor (VisorSimulacion): herramientas de marcado, zoom, lienzo del pincel, estado
   4. Sin foto: soltar o subir
   5. Limpieza (PanelLimpieza)
   6. Diálogo «Guardar en galería»
   7. Galería: carpetas, cuadrícula de miniaturas y visor (antes y después)
   ========================================================================== */

/* ── 1. Disposición ─────────────────────────────────────────────────────── */
.crm-sim-pagina {
  /* El rojo de las marcas del pincel (COLOR_MARCA de simulador.js); la transparencia la pone .crm-sim-marcas. */
  --crm-sim-marca: #E00000;
  --crm-sim-fondo-visor: #F4F6F8;
}

.crm-sim-cabecera-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.crm-sim-pestanas { margin-bottom: 1rem; }

.crm-sim {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  gap: 1rem;
  align-items: start;
}
.crm-sim > * { min-width: 0; }

.crm-sim-columna {
  display: flex; flex-direction: column; gap: 0.75rem; min-width: 0;
  padding: 1rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.crm-sim-columna .crm-panel-titulo { margin: 0; }

.crm-sim-ayuda { margin: 0; font-size: 0.8125rem; color: var(--color-muted-foreground); }

/* Botones de solo icono (zoom, quitar zona): cuadrados, del alto de los demás. */
.crm-sim-icono { width: 2.25rem; --bs-btn-padding-x: 0; justify-content: center; }
.crm-sim-icono > i { margin: 0; }

/* Las alternancias del simulador (carta, acabado, modo) ocupan su ancho y reparten los botones. */
.crm-sim-alternancia { display: flex; }
.crm-sim-alternancia > button { flex: 1 1 0; justify-content: center; }

/* Por el ancho de .crm-page (contenedor crm-pagina, crm.css), no por el de la ventana: con el menú lateral abierto, una
   ventana de 1280 px deja ~1000 px a la página y tres columnas fijas dejarían el visor en ~345 px. Por debajo de 1200 px
   la limpieza baja bajo el visor y la carta ocupa las dos filas (su lista virtualizada mantiene su alto fijo, sección 2);
   por debajo de 720 px, todo en una columna. */
@container crm-pagina (max-width: 1199.98px) {
  .crm-sim { grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "carta centro" "carta limpieza"; }
  .crm-sim > .crm-sim-carta { grid-area: carta; }
  .crm-sim > .crm-sim-centro { grid-area: centro; }
  .crm-sim > .crm-sim-limpieza { grid-area: limpieza; }
}
@container crm-pagina (min-width: 1200px) and (max-width: 1439.98px) {
  .crm-sim { grid-template-columns: 260px minmax(0, 1fr) 280px; gap: 0.75rem; }
}
@container crm-pagina (max-width: 719.98px) {
  .crm-sim { grid-template-columns: minmax(0, 1fr); grid-template-areas: "carta" "centro" "limpieza"; }
}

/* ── 2. Carta de colores ────────────────────────────────────────────────── */
.crm-sim-columna-cabecera,
.crm-sim-columna-pie { display: flex; flex-direction: column; gap: 0.75rem; }
.crm-sim-columna-pie { padding-top: 0.75rem; border-top: 1px solid var(--color-border); }

.crm-sim-buscador { position: relative; }
.crm-sim-buscador > i {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  font-size: 0.8125rem; color: var(--color-muted-foreground); pointer-events: none;
}
.crm-sim-buscador > .form-control { padding-left: 2.125rem; }

.crm-sim-familias { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.crm-sim-familia {
  padding: 0.125rem 0.625rem; min-height: 1.75rem;
  border: 1px solid var(--color-border); border-radius: 9999px;
  background: var(--color-card); color: var(--color-foreground);
  font-size: 0.75rem; font-weight: 500; line-height: 1.4;
}
.crm-sim-familia:hover { background: var(--crm-brand-50); }
.crm-sim-familia:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.crm-sim-familia[aria-pressed="true"] {
  background: var(--crm-brand-50); border-color: var(--crm-brand-200); color: var(--crm-brand-800); font-weight: 600;
}

/* La lista virtualizada necesita un contenedor con alto fijo y su propio desplazamiento. */
.crm-sim-lista {
  height: 22rem; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.crm-sim-lista-vacia { margin: 0; padding: 1.5rem 1rem; text-align: center; font-size: 0.8125rem; color: var(--color-muted-foreground); }

/* Cada color mide exactamente 48 px (el ItemSize de Virtualize). */
.crm-sim-color {
  display: flex; align-items: center; gap: 0.625rem; width: 100%; height: 48px;
  padding: 0 0.75rem; border: 0; border-bottom: 1px solid var(--color-border);
  background: var(--color-card); color: var(--color-foreground); text-align: left;
}
.crm-sim-color:hover { background: var(--crm-brand-50); }
.crm-sim-color:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--crm-brand-500); }
.crm-sim-color[aria-pressed="true"] { background: var(--crm-brand-100); }

.crm-sim-muestra {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem;
  border: 1px solid rgb(15 23 42 / 0.15); border-radius: var(--radius-sm);
}
.crm-sim-muestra--pequena { display: inline-block; width: 0.875rem; height: 0.875rem; margin-right: 0.375rem; vertical-align: -0.125rem; }

.crm-sim-color-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.crm-sim-color-codigo { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-sim-color-nombre {
  font-size: 0.75rem; color: var(--color-muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-sim-color-marca { margin-left: auto; color: var(--crm-brand-700); }

.crm-sim-nota { margin: 0; font-size: 0.75rem; color: var(--color-muted-foreground); }

.crm-sim-activo {
  display: flex; align-items: center; gap: 0.625rem; min-height: 3rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--crm-brand-200); border-radius: var(--radius-md); background: var(--crm-brand-50);
}
.crm-sim-activo-vacio { font-size: 0.8125rem; color: var(--color-muted-foreground); }

/* ── 3. Visor ───────────────────────────────────────────────────────────── */
.crm-sim-visor-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.crm-sim-visor-barra .crm-sim-alternancia { flex: 0 1 auto; }
.crm-sim-zoom { display: inline-flex; align-items: center; gap: 0.25rem; }
.crm-sim-zoom-valor { min-width: 3.25rem; text-align: center; font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--color-muted-foreground); }
.crm-sim-mantener { margin-left: auto; touch-action: none; user-select: none; -webkit-user-select: none; }

/* Herramientas de marcado (cambio 2026-10-15 (4)): Ver · Pincel · Goma · Rectángulo, Deshacer y Limpiar marcas, el grosor. */
.crm-sim-visor-barra .crm-sim-herramientas { flex: 1 1 22rem; }
.crm-sim-marcas-acciones { display: inline-flex; align-items: center; gap: 0.25rem; }
.crm-sim-comparar-limpia { flex: 0 0 auto; }
.crm-sim-grosor {
  display: flex; align-items: center; gap: 0.625rem; margin: 0;
  font-size: 0.8125rem; color: var(--color-muted-foreground);
}
.crm-sim-grosor > .form-range { flex: 0 1 12rem; accent-color: var(--crm-brand-500); }
/* La muestra del grosor (hasta 40 px): un círculo del rojo de las marcas. */
.crm-sim-grosor-muestra { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; }
.crm-sim-grosor-muestra > span { display: block; border-radius: 9999px; background: var(--crm-sim-marca); opacity: 0.5; }

.crm-sim-visor {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 26rem; padding: 1rem; overflow: hidden;
  background: var(--crm-sim-fondo-visor);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.crm-sim-lienzo { position: relative; max-width: 100%; transform-origin: center center; will-change: transform; }
.crm-sim-imagen {
  display: block; max-width: 100%; max-height: 65vh; width: auto; height: auto;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
  user-select: none; -webkit-user-select: none; pointer-events: none;
}

/* La capa de desplazar cubre la imagen. Con zoom, arrastrar con el dedo desplaza la foto en vez de mover la página; en
   modo Ver sin zoom, el dedo desplaza la página (columnas apiladas en el móvil). Al marcar, deja pasar el puntero al
   lienzo del pincel, que está debajo. */
.crm-sim-capa { position: absolute; inset: 0; }
.crm-sim-visor--zoom .crm-sim-capa { touch-action: none; cursor: grab; }
.crm-sim-visor--zoom .crm-sim-capa:active { cursor: grabbing; }
.crm-sim-capa--paso { pointer-events: none; }

/* El lienzo del pincel: del tamaño en píxeles de la foto base (simuladorMarcas) y estirado sobre ella, en rojo
   semitransparente. Al marcar recibe el puntero (ratón, dedo y lápiz) sin que el dedo mueva la página. */
.crm-sim-marcas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.45; pointer-events: none; touch-action: none; border-radius: var(--radius-sm);
}
.crm-sim-marcas--activa { pointer-events: auto; cursor: crosshair; }
.crm-sim-marcas--oculta { visibility: hidden; }
/* El círculo del grosor que sigue al puntero (pincel y goma) y el rectángulo que se está dibujando; los mueve simulador.js. */
.crm-sim-pincel-cursor {
  position: absolute; display: none; transform: translate(-50%, -50%); pointer-events: none;
  border: 2px solid #fff; border-radius: 9999px; box-shadow: 0 0 0 1px rgb(15 23 42 / 0.6);
}
.crm-sim-rectangulo-previa {
  position: absolute; display: none; pointer-events: none;
  border: 2px dashed var(--crm-sim-marca); background: rgb(224 0 0 / 0.2);
}
/* Generando: un velo sobre el visor (el texto que leen los lectores de pantalla está en el panel de limpieza). */
.crm-sim-generando {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  background: rgb(244 246 248 / 0.82); color: var(--color-foreground); font-size: 0.875rem; text-align: center;
}
.crm-sim-generando .spinner-border { color: var(--crm-brand-500) !important; }
.crm-sim-generando-titulo { font-weight: 600; }

.crm-sim-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.crm-sim-cambios {
  display: inline-flex; align-items: center; gap: 0.375rem; margin-right: auto;
  padding: 0.25rem 0.625rem; border: 1px solid var(--warning-border); border-radius: 9999px;
  background: var(--warning-surface); color: var(--warning); font-size: 0.8125rem; font-weight: 500;
}

.crm-sim-estado {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem;
  padding-top: 0.5rem; border-top: 1px solid var(--color-border);
  font-size: 0.75rem; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums;
}
.crm-sim-estado-simulado {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0 0.5rem; border-radius: 9999px; background: var(--warning-surface); color: var(--warning); font-weight: 600;
}
.crm-sim-estado-ayuda { margin-left: auto; }

/* ── 4. Sin foto: soltar o subir ────────────────────────────────────────── */
.crm-sim-soltar {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 26rem; padding: 2rem 1rem; text-align: center;
  background: var(--crm-sim-fondo-visor);
  border: 1px dashed var(--color-input); border-radius: var(--radius-md);
}
.crm-sim-soltar--encima { border-color: var(--crm-brand-500); background: var(--crm-brand-50); }
.crm-sim-soltar:focus-within { box-shadow: var(--focus-ring); }
.crm-sim-soltar-icono { font-size: 2rem; color: var(--crm-brand-500); }
.crm-sim-soltar-texto { margin: 0; font-weight: 500; }
.crm-sim-soltar .spinner-border { color: var(--crm-brand-500) !important; }
/* El selector de archivos cubre la zona (recibe la foto soltada y el clic) sin verse. */
.crm-sim-entrada-zona { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.crm-sim-entrada-zona:disabled { cursor: progress; }

/* ── 5. Limpieza ────────────────────────────────────────────────────────── */
.crm-sim-bloque { display: flex; flex-direction: column; gap: 0.5rem; }
.crm-sim-subtitulo { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--color-foreground); }

.crm-sim-limpiar { width: 100%; justify-content: center; }
.crm-sim-limpieza-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crm-sim-limpieza-acciones > .btn { flex: 1 1 8rem; justify-content: center; }

.crm-sim-texto { resize: vertical; min-height: 5.5rem; }
.crm-sim-bloque .crm-contador { margin-top: 0; }

.crm-sim-resumen {
  display: grid; gap: 0.375rem; margin: 0; padding: 0.75rem;
  background: hsl(var(--muted)); border-radius: var(--radius-md); font-size: 0.8125rem;
}
.crm-sim-resumen > div { display: flex; justify-content: space-between; gap: 0.75rem; }
.crm-sim-resumen dt { font-weight: 500; color: var(--color-muted-foreground); }
.crm-sim-resumen dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.crm-sim-generar { width: 100%; min-height: 2.75rem; justify-content: center; font-size: 0.9375rem; }
.crm-sim-generar-ayuda { text-align: center; }

/* ── 6. Diálogo «Guardar en galería» ────────────────────────────────────── */
.crm-sim-dialogo .crm-form-aviso { margin-top: 1rem; }

/* ── 7. Galería (Galeria, VisorGaleria) ─────────────────────────────────── */
/* Dos columnas: carpetas (≈300 px) | carpeta abierta; apiladas por debajo de 992 px. */
.crm-sim-galeria {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.crm-sim-galeria > * { min-width: 0; }
@media (max-width: 991.98px) {
  .crm-sim-galeria { grid-template-columns: minmax(0, 1fr); }
}

.crm-sim-reabriendo {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;
  font-size: 0.875rem; color: var(--color-muted-foreground);
}
.crm-sim-reabriendo .spinner-border { color: var(--crm-brand-500) !important; }

.crm-sim-carpetas-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.crm-sim-filtro-url { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.crm-sim-filtro-url .crm-chip { min-width: 0; white-space: normal; }

/* La lista de carpetas se desplaza dentro de la columna. */
.crm-sim-carpetas-lista {
  display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none;
  max-height: 32rem; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.crm-sim-carpetas-lista > li + li { border-top: 1px solid var(--color-border); }

.crm-sim-carpeta {
  display: flex; align-items: flex-start; gap: 0.625rem; width: 100%;
  padding: 0.625rem 0.75rem; border: 0; background: var(--color-card); color: var(--color-foreground); text-align: left;
}
.crm-sim-carpeta:hover { background: var(--crm-brand-50); }
.crm-sim-carpeta:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--crm-brand-500); }
.crm-sim-carpeta[aria-pressed="true"] { background: var(--crm-brand-100); }
.crm-sim-carpeta-icono { margin-top: 0.125rem; color: var(--crm-brand-700); }
.crm-sim-carpeta-texto { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; line-height: 1.3; }
.crm-sim-carpeta-nombre { font-size: 0.875rem; font-weight: 600; }
.crm-sim-carpeta-meta { font-size: 0.75rem; color: var(--color-muted-foreground); }
.crm-sim-carpeta-meta > i,
.crm-sim-carpeta-meta i { margin-right: 0.25rem; }

/* Cabecera de la carpeta abierta: nombre y datos a la izquierda; las acciones de Admin a la derecha (debajo si no caben). */
.crm-sim-carpeta-cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border);
}
.crm-sim-carpeta-titulo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.crm-sim-carpeta-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Cuadrícula de tarjetas: tantas columnas de al menos 180 px como quepan. */
.crm-sim-cuadricula {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem;
  margin: 0; padding: 0; list-style: none;
}
.crm-sim-tarjeta {
  display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-card); color: var(--color-foreground); text-align: left;
}
.crm-sim-tarjeta:hover { border-color: var(--crm-brand-200); box-shadow: var(--shadow-card); }
.crm-sim-tarjeta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.crm-sim-tarjeta-texto { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem 0.625rem 0.625rem; min-width: 0; }
.crm-sim-tarjeta-titulo { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.crm-sim-tarjeta-meta { font-size: 0.75rem; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }

/* La miniatura: proporción 4:3 fija (la tarjeta no salta al llegar la imagen) y la imagen entera, sin recortar. */
.crm-sim-miniatura {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; width: 100%;
  background: var(--crm-sim-fondo-visor); color: var(--color-muted-foreground); font-size: 1.5rem;
}
.crm-sim-miniatura > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.crm-sim-miniatura--hueco { animation: crm-sim-latido 1.4s ease-in-out infinite; }
@keyframes crm-sim-latido { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .crm-sim-miniatura--hueco { animation: none; }
}

/* Visor de una simulación guardada: imagen a la izquierda y datos a la derecha; apilados en pantallas estrechas. */
.crm-sim-visor-galeria-cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; align-items: start;
}
@media (max-width: 767.98px) {
  .crm-sim-visor-galeria-cuerpo { grid-template-columns: minmax(0, 1fr); }
}
.crm-sim-comparar-zona { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.crm-sim-comparar-estado {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 18rem; background: var(--crm-sim-fondo-visor); border-radius: var(--radius-md);
  font-size: 0.875rem; color: var(--color-muted-foreground);
}
.crm-sim-comparar-estado .spinner-border { color: var(--crm-brand-500) !important; }

/* Antes y después: el original encima del resultado, recortado desde la derecha según el deslizador. */
.crm-sim-comparar {
  position: relative; display: flex; justify-content: center;
  background: var(--crm-sim-fondo-visor); border-radius: var(--radius-md); overflow: hidden;
}
.crm-sim-comparar-marco { position: relative; max-width: 100%; line-height: 0; }
.crm-sim-comparar-imagen {
  display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto;
  user-select: none; -webkit-user-select: none;
}
.crm-sim-comparar-original {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
/* La línea del corte, en el borde derecho de lo que se ve del original. */
.crm-sim-comparar-linea {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 0 1px rgb(15 23 42 / 0.35); pointer-events: none;
}
.crm-sim-comparar-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.crm-sim-comparar-controles .crm-sim-mantener { margin-left: 0; }
.crm-sim-comparar-deslizador {
  display: flex; align-items: center; gap: 0.5rem; flex: 1 1 12rem; margin: 0;
  font-size: 0.8125rem; color: var(--color-muted-foreground);
}
.crm-sim-comparar-deslizador > .form-range { flex: 1 1 auto; accent-color: var(--crm-brand-500); }

.crm-sim-ficha { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.crm-sim-ficha-notas { margin: 0; padding-left: 1.25rem; font-size: 0.8125rem; }
.crm-sim-ficha-texto { margin: 0; font-size: 0.8125rem; white-space: pre-line; }
.crm-sim-ficha-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }