/* Simulador Kiloverde (A3). Usa los tokens y componentes de base.css; aquí solo lo propio del asistente y los mapas. */

.sim { padding-block: var(--kv-e-5) var(--kv-e-8); }
.sim-cabecera { margin-bottom: var(--kv-e-5); }
.sim-titulo { font-family: var(--kv-fuente-titulos); color: var(--kv-bosque); font-size: var(--kv-t-3xl); line-height: 1.15; margin: var(--kv-e-4) 0 var(--kv-e-2); }
.sim-bajada { color: var(--kv-pizarra); font-size: var(--kv-t-l); max-width: 62ch; margin: 0 0 var(--kv-e-4); }

/* Progreso */
.sim-progreso-texto { margin: 0 0 var(--kv-e-2); font-size: var(--kv-t-s); color: var(--kv-pizarra-suave); }
.sim-progreso-texto strong { color: var(--kv-bosque); }
.sim-barra { height: 8px; border-radius: var(--kv-radio-pill); background: var(--kv-hoja-100); overflow: hidden; }
.sim-barra span { display: block; height: 100%; background: var(--kv-hoja); border-radius: inherit; transition: width var(--kv-transicion); }
.sim-pasos { display: none; list-style: none; padding: 0; margin: var(--kv-e-3) 0 0; gap: var(--kv-e-2); }
.sim-pasos li { display: flex; align-items: center; gap: .4rem; font-size: var(--kv-t-xs); color: var(--kv-pizarra-suave); flex: 1; min-width: 0; }
.sim-paso-num { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--kv-borde-fuerte); font-weight: 600; font-size: 11px; background: var(--kv-blanco); }
.sim-pasos li.hecho .sim-paso-num { background: var(--kv-hoja); border-color: var(--kv-hoja); color: var(--kv-bosque); }
.sim-pasos li.actual { color: var(--kv-bosque); font-weight: 600; }
.sim-pasos li.actual .sim-paso-num { border-color: var(--kv-bosque); background: var(--kv-bosque); color: var(--kv-blanco); }
.sim-paso-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .sim-pasos { display: flex; } }

/* Rejilla y formularios */
.sim-rejilla { display: grid; gap: var(--kv-e-5); align-items: start; }
@media (min-width: 900px) { .sim-rejilla { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.sim-estrecho { max-width: 720px; }
.sim-form .campo { margin-bottom: var(--kv-e-4); }
.sim-dos { display: grid; gap: 0 var(--kv-e-4); }
@media (min-width: 640px) { .sim-dos { grid-template-columns: 1fr 1fr; } }
.sim-acciones { display: flex; flex-wrap: wrap; gap: var(--kv-e-3); justify-content: flex-end; align-items: center; margin-top: var(--kv-e-5); }
.sim-acciones-izq { justify-content: flex-start; margin-top: var(--kv-e-3); }
.sim-acciones .btn-texto:first-child { margin-right: auto; }
.sim-en-linea { display: inline; margin: 0; }
.sim-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sim fieldset { border: 0; padding: 0; margin: 0 0 var(--kv-e-4); min-width: 0; }
.sim legend { font-weight: 600; color: var(--kv-bosque); margin-bottom: var(--kv-e-2); padding: 0; }
.sim-advertencia { color: var(--kv-alerta); margin: 0 0 var(--kv-e-2); display: flex; gap: .4rem; align-items: flex-start; }

/* Opciones en tarjeta (tipo de predio) */
.sim-tarjetas-opcion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kv-e-3); }
@media (min-width: 720px) { .sim-tarjetas-opcion { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sim-opcion { position: relative; cursor: pointer; }
.sim-opcion input { position: absolute; opacity: 0; inset: 0; }
.sim-opcion span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kv-e-2); text-align: center; min-height: 92px; padding: var(--kv-e-3);
  border: 1.5px solid var(--kv-borde-fuerte); border-radius: var(--kv-radio); background: var(--kv-blanco); color: var(--kv-bosque); font-weight: 600; font-size: var(--kv-t-s); transition: border-color var(--kv-transicion), background var(--kv-transicion); }
.sim-opcion span svg { color: var(--kv-hoja-texto); }
.sim-opcion input:checked + span { border-color: var(--kv-hoja); background: var(--kv-hoja-50); box-shadow: inset 0 0 0 1px var(--kv-hoja); }
.sim-opcion input:focus-visible + span { box-shadow: var(--kv-foco); }

.sim-lista-check { list-style: none; padding: 0; margin: 0 0 var(--kv-e-4); display: grid; gap: var(--kv-e-2); }
.sim-lista-check li { display: flex; gap: .5rem; align-items: flex-start; }
.sim-lista-check svg { flex: none; margin-top: .25rem; color: var(--kv-hoja-claro); }
.sim-siguientes { padding-left: 1.2rem; margin: 0; display: grid; gap: var(--kv-e-2); }

/* Autocompletado */
.sim-autocompletar { position: relative; }
.sim-sugerencias { position: absolute; z-index: 1000; left: 0; right: 0; top: calc(100% - 1.4rem); list-style: none; margin: 0; padding: .25rem 0; background: var(--kv-blanco);
  border: 1px solid var(--kv-borde-fuerte); border-radius: var(--kv-radio-s); box-shadow: var(--kv-sombra-3); max-height: 280px; overflow: auto; }
.sim-sugerencias li { padding: .65rem .9rem; cursor: pointer; font-size: var(--kv-t-s); line-height: 1.35; }
.sim-sugerencias li:hover, .sim-sugerencias li.activa { background: var(--kv-hoja-50); color: var(--kv-bosque); }

/* Mapas */
.sim-mapa-envoltura { position: relative; }
.sim-mapa { height: min(62vh, 520px); min-height: 320px; width: 100%; border-radius: var(--kv-radio); overflow: hidden; border: 1px solid var(--kv-borde); background: #EEF2EC; z-index: 0; }
.sim-mapa.sim-dibujando { cursor: crosshair; outline: 3px solid var(--kv-sol); outline-offset: -3px; }
.sim-mapa.sim-dibujando .leaflet-container, .sim-mapa.sim-dibujando.leaflet-container { cursor: crosshair; }
.sim-mapa-error { display: grid; place-items: center; padding: var(--kv-e-5); text-align: center; color: var(--kv-pizarra); }
.sim-mapa-direccion { position: absolute; left: 12px; top: 12px; right: 60px; z-index: 500; margin: 0; padding: .45rem .75rem; background: rgba(253, 253, 251, .95); border-radius: var(--kv-radio-s);
  box-shadow: var(--kv-sombra-2); font-size: var(--kv-t-s); color: var(--kv-bosque); display: flex; gap: .4rem; align-items: center; max-width: max-content; }
.sim-mapa-aviso { margin: var(--kv-e-2) 0 0; font-size: var(--kv-t-xs); color: var(--kv-alerta); background: var(--kv-alerta-fondo); padding: .4rem .7rem; border-radius: var(--kv-radio-s); }
.sim-mapa-form .sim-acciones { margin-top: var(--kv-e-4); }
.sim-herramientas { display: flex; flex-wrap: wrap; gap: var(--kv-e-2); margin-top: var(--kv-e-3); }
.sim-cubierta { display: grid; gap: var(--kv-e-4); }
@media (min-width: 900px) { .sim-cubierta { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; } }
.sim-areas .lista-definicion dd strong { font-size: var(--kv-t-l); color: var(--kv-bosque); }
.sim-manual { margin-top: var(--kv-e-3); }
.sim-manual summary { cursor: pointer; color: var(--kv-hoja-texto); font-weight: 600; font-size: var(--kv-t-s); }
.sim-vertice { background: var(--kv-sol); border: 2px solid var(--kv-bosque); border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.sim-medio { background: rgba(253, 253, 251, .95); border: 2px solid var(--kv-bosque); border-radius: 50%; }
.leaflet-container { font-family: var(--kv-fuente-texto); }
.leaflet-control-attribution { font-size: 11px; }

/* Factura */
.sim-consumos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kv-e-2); }
@media (min-width: 640px) { .sim-consumos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sim-consumo { display: grid; gap: .2rem; font-size: var(--kv-t-xs); color: var(--kv-pizarra-suave); text-transform: capitalize; }
.sim-consumo input { width: 100%; min-width: 0; }

/* Resultado */
.sim-kpis { margin-bottom: var(--kv-e-5); }
.sim-supuestos ul { padding-left: 1.2rem; display: grid; gap: var(--kv-e-2); margin: 0 0 var(--kv-e-4); }
.sim-tabla-anual summary { cursor: pointer; font-weight: 600; color: var(--kv-hoja-texto); }
.sim-aviso { margin-top: var(--kv-e-4); }
.sim .tarjeta + .tarjeta, .sim .tarjeta + .alerta, .sim .alerta + .kpis { margin-top: var(--kv-e-4); }
.sim .pila > * + * { margin-top: var(--kv-e-4); }

/* Panel y portal */
.sim-mapa-lectura { height: 320px; border-radius: var(--kv-radio); overflow: hidden; border: 1px solid var(--kv-borde); background: #EEF2EC; }
.sim-semaforo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.sim-semaforo::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.sim-semaforo-verde { color: var(--kv-exito); }
.sim-semaforo-amarillo { color: var(--kv-alerta); }
.sim-semaforo-rojo { color: var(--kv-peligro); }
.sim-parametros { display: grid; gap: var(--kv-e-4); }
@media (min-width: 900px) { .sim-parametros { grid-template-columns: 1fr 1fr; } }
.sim-parametros fieldset { border: 1px solid var(--kv-borde); border-radius: var(--kv-radio); padding: var(--kv-e-4); margin: 0; }
.sim-parametros legend { font-weight: 600; color: var(--kv-bosque); padding: 0 .4rem; }
.sim-num { text-align: right; font-variant-numeric: tabular-nums; }
.sim-flujo { font-size: var(--kv-t-xs); }
.sim-kpis { display: grid; grid-template-columns: 1fr; gap: var(--kv-e-3); }
@media (min-width: 640px) { .sim-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sim-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sim-kpis .kpi-valor { font-size: var(--kv-t-2xl); white-space: nowrap; }

/* ---------- F6-B · correcciones de marca y UX ---------- */
/* A3 · zona de carga de la factura */
.sim-carga { display: grid; place-items: center; gap: 6px; padding: 28px 20px; border: 2px dashed var(--kv-borde-fuerte); border-radius: var(--kv-radio); background: var(--kv-fondo-suave); cursor: pointer; text-align: center; color: var(--kv-bosque); font-weight: 400; transition: border-color var(--kv-transicion), background var(--kv-transicion); }
.sim-carga strong { font: 600 var(--kv-t-m)/1.4 var(--kv-fuente-texto); }
.sim-carga u { color: var(--kv-hoja-texto); text-underline-offset: 3px; }
.sim-carga-icono { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--kv-hoja-50); color: var(--kv-hoja-texto); }
.sim-carga-formatos { font-size: var(--kv-t-s); color: var(--kv-pizarra-suave); }
.sim-carga:hover, .sim-carga.arrastrando { border-color: var(--kv-hoja); background: var(--kv-hoja-50); }
.sim-carga.con-archivo { border-style: solid; border-color: var(--kv-hoja); background: var(--kv-hoja-50); }
.sim-carga:focus-within { box-shadow: var(--kv-foco); }
.sim-carga-nombre { margin: 0; font-size: var(--kv-t-s); font-weight: 600; color: var(--kv-exito); min-height: 0; }
.sim-carga-nombre:empty { display: none; }
/* A2 · pin de marca y atribución en la paleta */
.sim-pin { background: none; border: 0; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.leaflet-control-attribution a { color: var(--kv-hoja-texto); }
.leaflet-bar a { width: 36px !important; height: 36px !important; line-height: 36px !important; color: var(--kv-bosque) !important; }
/* M7 · panel de áreas: etiqueta arriba y valor grande (mini KPI 2×2) */
.sim-areas .lista-definicion { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--kv-e-4); }
.sim-areas .lista-definicion dt { font-size: var(--kv-t-xs); font-weight: 500; color: var(--kv-pizarra-suave); line-height: 1.3; align-self: end; }
.sim-areas .lista-definicion dd { font: 600 1.375rem/1.2 var(--kv-fuente-titulos); color: var(--kv-bosque); margin: 0 0 var(--kv-e-3); }
.sim-areas .lista-definicion dd strong { font-size: inherit; }
.sim-areas .lista-definicion dt:nth-of-type(odd), .sim-areas .lista-definicion dd:nth-of-type(odd) { grid-column: 1; }
.sim-areas .lista-definicion dt:nth-of-type(even), .sim-areas .lista-definicion dd:nth-of-type(even) { grid-column: 2; }
.sim-areas .lista-definicion dt:nth-of-type(1), .sim-areas .lista-definicion dt:nth-of-type(2) { grid-row: 1; }
.sim-areas .lista-definicion dd:nth-of-type(1), .sim-areas .lista-definicion dd:nth-of-type(2) { grid-row: 2; }
.sim-areas .lista-definicion dt:nth-of-type(3), .sim-areas .lista-definicion dt:nth-of-type(4) { grid-row: 3; }
.sim-areas .lista-definicion dd:nth-of-type(3), .sim-areas .lista-definicion dd:nth-of-type(4) { grid-row: 4; }
/* M5 · nota «Importante» dentro de la paleta de marca (sin azul informativo) */
.sim-aviso.alerta-info { background: var(--kv-fondo-suave); border-color: var(--kv-borde); border-left: 4px solid var(--kv-bosque); color: var(--kv-pizarra); }
.sim-aviso.alerta-info .ico { color: var(--kv-bosque); }
/* A4 · separación del indicador de progreso y el título del paso */
.sim-cabecera { margin-top: var(--kv-e-3); }
.sim-titulo { margin-top: var(--kv-e-6); }
/* B5 · en móvil la acción principal va primero y a todo el ancho */
@media (max-width: 600px) { .sim-acciones { flex-direction: column-reverse; align-items: stretch; } .sim-acciones .btn { width: 100%; } .sim-acciones .btn-texto:first-child { margin-right: 0; } .sim-acciones-izq { flex-direction: column; } }