/* ═══════════════════════════════════════════════════════════════════════════
   El monitor de operación y territorio en el teléfono (/monitor) · octubre de 2026
   Sobre el formato homologado (pantalla.css): cabecera, sello, barra de
   documento, pan-estado, pan-borrador, pan-filtros. Lo propio lleva el prefijo
   mon-. Pensado para el teléfono (320 a 430 px) con el dedo: todo control mide
   40 px o más; en escritorio se ensancha sin cambiar de forma. Los estados se
   distinguen con icono y texto (y en el mapa con un signo), nunca sólo con color.
   ═══════════════════════════════════════════════════════════════════════════ */

.mon-pantalla {
    display: flex; flex-direction: column; gap: 14px;
    --mon-verde: #1c7a52; --mon-verde-fondo: #eff7f2;
    --mon-ambar: #96440f; --mon-ambar-fondo: #fff7ef;
    --mon-gris: #46586a; --mon-gris-fondo: #f1f4f7;
    --mon-rojo: #b3261e; --mon-rojo-fondo: #fff3f1;
    --mon-agua: #3f8fc7;
}
@media (max-width: 1100px) {
    .mon-pantalla .pan-cabecera-titulo { white-space: normal; overflow-wrap: anywhere; }
}
/* El sello lleva cifras con unidad («25.0 °C · 70 % · 600 W/m²», «hasta el 05/10 a las 23:00»):
   no se sale de la cabecera; las largas van un punto más chicas y bajan de renglón. */
.mon-pantalla .pan-cabecera-sello { max-width: 100%; min-width: 0; }
.mon-pantalla .pan-sello-monto { max-width: 100%; text-align: right; overflow-wrap: anywhere; }
.mon-pantalla .pan-sello-monto.mon-sello-largo { font-size: 18px; line-height: 1.15; }
.mon-nota { margin: 0; font-size: 11.5px; color: var(--pan-apagado); line-height: 1.45; overflow-wrap: anywhere; }
.mon-nota-fuerte { color: var(--pan-tinta); font-size: 12.5px; font-weight: 600; }
.mon-error { margin: 0; font-size: 12.5px; color: var(--mon-rojo, #b3261e); font-weight: 600; overflow-wrap: anywhere; }
.mon-apagado { color: var(--pan-apagado); }
.mon-rotulo { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-apagado); }
.mon-req::after { content: " *"; color: #b3261e; }
.mon-correlativo { font-family: var(--pan-mono); font-size: 12px; font-weight: 700; color: var(--pan-apagado); }
.mon-cuenta {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--pan-fondo); border: 1px solid var(--pan-linea); font-family: var(--pan-mono); font-size: 11px; letter-spacing: 0; color: var(--pan-apagado);
}
.mon-vacio {
    margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px;
    border: 1px dashed var(--pan-linea); color: var(--pan-apagado); font-size: 12.5px; line-height: 1.4;
}
.mon-vacio .material-symbols-outlined { font-size: 22px; }
.mon-sin-acceso { display: flex; align-items: flex-start; gap: 6px; }
.mon-sin-acceso .material-symbols-outlined { font-size: 16px; }
.mon-cita { font-style: italic; overflow-wrap: anywhere; }

/* ── Los estados ── */
.mon-estado {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 999px; white-space: nowrap;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; border: 1px solid transparent;
}
.mon-estado .material-symbols-outlined { font-size: 16px; }
.mon-estado-al-dia { color: var(--mon-verde); background: var(--mon-verde-fondo); border-color: rgba(28, 122, 82, .35); }
.mon-estado-antiguo { color: var(--mon-ambar); background: var(--mon-ambar-fondo); border-color: rgba(150, 68, 15, .32); }
.mon-estado-ausente { color: var(--mon-gris); background: var(--mon-gris-fondo); border-color: rgba(70, 88, 106, .45); border-style: dashed; }
.mon-estado-revisar { color: var(--mon-rojo); background: var(--mon-rojo-fondo); border-color: rgba(179, 38, 30, .40); }
.mon-estado-extra { margin-left: 4px; }
.mon-motivo { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--mon-rojo); overflow-wrap: anywhere; }

.mon-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    font-size: 11px; font-weight: 600; border: 1px solid var(--pan-linea); background: var(--pan-fondo); color: var(--pan-apagado);
}
.mon-chip .material-symbols-outlined { font-size: 15px; }
.mon-chip-hallazgo { color: #6a3fa0; border-color: rgba(106, 63, 160, .35); background: #f7f3fc; }
.mon-chip-por-revisar { color: var(--mon-ambar); border-color: rgba(150, 68, 15, .32); background: var(--mon-ambar-fondo); }
.mon-chip-programado { color: var(--mon-verde); border-color: rgba(28, 122, 82, .35); background: var(--mon-verde-fondo); }
.mon-chip-descartado { color: var(--mon-gris); }
.mon-chip-toca { color: #fff; border-color: var(--pan-azul); background: var(--pan-azul); font-weight: 700; letter-spacing: .06em; }
.mon-chip-falta { color: var(--mon-ambar); border-color: rgba(150, 68, 15, .32); background: var(--mon-ambar-fondo); }

/* ── Franjas ── */
.mon-franja {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: 12px;
    border: 1px solid rgba(24, 95, 165, .22); background: #f1f6fb; color: var(--pan-tinta);
}
.mon-franja > .material-symbols-outlined { flex: none; font-size: 22px; color: var(--pan-azul); }
.mon-franja-aviso { border-color: rgba(150, 68, 15, .30); background: var(--mon-ambar-fondo, #fff7ef); }
.mon-franja-aviso > .material-symbols-outlined { color: var(--mon-ambar, #96440f); }
.mon-franja-sinred { border-color: rgba(74, 106, 138, .3); background: #f3f5f8; }
.mon-franja-sinred > .material-symbols-outlined { color: #4a6a8a; }
.mon-franja-lectura { border-color: var(--pan-linea); background: var(--pan-fondo); }
.mon-franja-lectura > .material-symbols-outlined { color: var(--pan-apagado); }
.mon-franja-texto { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.35; }
.mon-franja-texto b { font-size: 13px; }
.mon-franja-texto span { color: var(--pan-apagado); font-size: 11.5px; overflow-wrap: anywhere; }
.mon-franja-acciones { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Botones ── */
.mon-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; min-width: 40px; padding: 6px 12px; border-radius: 10px;
    border: 1px solid rgba(24, 95, 165, .45); background: var(--pan-papel); color: var(--pan-azul);
    font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.mon-boton:hover { background: #eef5fb; text-decoration: none; }
.mon-boton:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.mon-boton:disabled { opacity: .55; cursor: default; }
.mon-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mon-accion {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 12px;
    border: 1px solid var(--pan-linea); background: var(--pan-papel); color: var(--pan-tinta); text-decoration: none;
    font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; cursor: pointer; flex: 1 1 160px; text-align: center;
}
.mon-accion:hover { border-color: rgba(24, 95, 165, .45); text-decoration: none; color: var(--pan-tinta); }
.mon-accion:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.mon-accion:disabled { opacity: .55; cursor: default; }
.mon-accion .material-symbols-outlined { font-size: 20px; }
.mon-accion-principal, .mon-accion-principal:hover { background: var(--pan-azul); border-color: var(--pan-azul); color: #fff; }
.mon-accion-principal:hover { background: #164f8c; }
.mon-accion-peligro, .mon-accion-peligro:hover { background: #b3261e; border-color: #b3261e; color: #fff; }
.mon-accion-peligro:hover { background: #8f1e18; }
.mon-accion-sola { flex: 0 0 auto; align-self: flex-start; }

/* ── Filtros: la vista, la instalación y el estado ── */
.pan-filtros.mon-filtros { grid-template-columns: max-content minmax(200px, 320px) minmax(180px, 260px); align-items: end; }
@media (max-width: 900px) {
    .pan-filtros.mon-filtros { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
    .pan-filtros.mon-filtros .mon-filtro:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .pan-filtros.mon-filtros { grid-template-columns: minmax(0, 1fr); }
}
.mon-filtro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mon-select {
    min-height: 40px; width: 100%; min-width: 0; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--pan-linea);
    background: var(--pan-papel); color: var(--pan-tinta); font: inherit; font-size: 13px;
}
.mon-select:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 1px; }
.mon-conmutador { display: inline-flex; border: 1px solid var(--pan-linea); border-radius: 12px; padding: 2px; background: var(--pan-fondo); gap: 2px; }
.mon-opcion {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; min-width: 92px; padding: 6px 12px; border-radius: 10px;
    border: 0; background: transparent; color: var(--pan-apagado); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .05em; cursor: pointer;
}
.mon-opcion .material-symbols-outlined { font-size: 19px; }
.mon-opcion.activa { background: var(--pan-papel); color: var(--pan-azul); box-shadow: 0 1px 2px rgba(12, 39, 64, .12); }
.mon-opcion:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 1px; }

/* ── El resumen: un botón por estado (filtra) ── */
.mon-resumen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .mon-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mon-resumen-boton {
    width: 100%; min-height: 56px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
    padding: 8px 10px; border-radius: 12px; border: 1px solid var(--pan-linea); background: var(--pan-papel); cursor: pointer; font: inherit; text-align: left;
}
.mon-resumen-boton:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.mon-resumen-boton.activo { box-shadow: inset 0 0 0 2px currentColor; }
.mon-resumen-cifra { font-family: var(--pan-mono); font-size: 20px; font-weight: 700; line-height: 1; }
.mon-resumen-texto { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .03em; overflow-wrap: anywhere; }
.mon-resumen-texto .material-symbols-outlined { font-size: 16px; }
.mon-resumen-boton.mon-estado-al-dia { color: var(--mon-verde); }
.mon-resumen-boton.mon-estado-antiguo { color: var(--mon-ambar); }
.mon-resumen-boton.mon-estado-ausente { color: var(--mon-gris); border-style: dashed; }
.mon-resumen-boton.mon-estado-revisar { color: var(--mon-rojo); }

/* ── Las partes y sus tarjetas ── */
.mon-seccion { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mon-seccion-titulo {
    display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap;
    font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-tinta);
}
.mon-seccion-titulo .material-symbols-outlined { font-size: 20px; color: var(--pan-apagado); }
.mon-seccion-de { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--pan-apagado); }
.mon-subtitulo { margin: 4px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-apagado); }
.mon-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.mon-lista-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mon-tarjeta, .mon-fila-hallazgo {
    display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 14px; height: 100%; min-width: 0;
    background: var(--pan-papel); border: 1px solid var(--pan-linea); box-shadow: var(--pan-sombra-tarjeta);
    color: var(--pan-tinta); text-decoration: none; transition: border-color .15s, transform .1s;
}
.mon-tarjeta:hover, .mon-fila-hallazgo:hover { border-color: rgba(24, 95, 165, .45); text-decoration: none; color: var(--pan-tinta); }
.mon-tarjeta:active, .mon-fila-hallazgo:active { transform: scale(.995); }
.mon-tarjeta:focus-visible, .mon-fila-hallazgo:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }
.mon-tarjeta-revisar { border-left: 4px solid var(--mon-rojo); }
.mon-tarjeta-ausente { border-left: 4px dashed var(--mon-gris); }
.mon-tarjeta-antiguo { border-left: 4px solid #d58a4c; }
.mon-le-toca { border-left: 4px solid var(--pan-azul); }
.mon-tarjeta-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mon-tarjeta-titulo { font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mon-tarjeta-valor { font-family: var(--pan-mono); font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.mon-tarjeta-resumen { font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.mon-tarjeta-meta { display: flex; align-items: flex-start; gap: 4px; font-size: 11.5px; color: var(--pan-apagado); line-height: 1.35; overflow-wrap: anywhere; }
.mon-tarjeta-meta .material-symbols-outlined { font-size: 15px; flex: none; margin-top: 1px; }
.mon-tarjeta-copia { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #4a6a8a; }
.mon-tarjeta-copia .material-symbols-outlined { font-size: 15px; }

/* ── El detalle de un indicador ── */
.mon-detalle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1100px) {
    .mon-detalle { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
    .mon-detalle > .mon-acciones, .mon-detalle > .mon-seccion { grid-column: 1 / -1; }
}
.mon-ficha {
    display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; min-width: 0;
    background: var(--pan-papel); border: 1px solid var(--pan-linea); box-shadow: var(--pan-sombra-tarjeta);
}
.mon-ficha-revisar { border-top: 4px solid var(--mon-rojo); }
.mon-ficha-ausente { border-top: 4px dashed var(--mon-gris); }
.mon-ficha-antiguo { border-top: 4px solid #d58a4c; }
.mon-ficha-al-dia { border-top: 4px solid var(--mon-verde); }
.mon-ficha-titulo { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-apagado); }
.mon-ficha-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.mon-ficha-valor { font-family: var(--pan-mono); font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.mon-ficha-resumen { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.mon-datos { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mon-datos > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: baseline; }
@media (max-width: 380px) { .mon-datos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.mon-datos dt { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pan-apagado); }
.mon-datos dd { margin: 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.mon-barra { display: block; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--pan-linea); overflow: hidden; }
.mon-barra > span { display: block; height: 100%; background: var(--pan-azul); border-radius: 999px; }
.mon-calculo { border-top: 1px solid var(--pan-linea); padding-top: 6px; }
.mon-calculo summary {
    min-height: 40px; display: flex; align-items: center; cursor: pointer; list-style-position: inside;
    font-size: 12.5px; font-weight: 700; color: var(--pan-azul);
}
.mon-calculo summary:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; border-radius: 6px; }
.mon-calculo p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.mon-notas { border-radius: 10px; background: var(--pan-fondo); padding: 8px 12px; }
.mon-notas ul, .mon-notas-lista { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }

/* ── Gráfica o valores ── */
.mon-serie {
    display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; min-width: 0;
    background: var(--pan-papel); border: 1px solid var(--pan-linea); box-shadow: var(--pan-sombra-tarjeta);
}
.mon-serie-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mon-grafica { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mon-grafica-svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.mon-rejilla { stroke: var(--pan-linea); stroke-width: 1; }
.mon-eje { stroke: #b9c6d2; stroke-width: 1.2; }
.mon-marca { font-family: var(--pan-mono); font-size: 11px; fill: var(--pan-apagado); }
.mon-categoria { font-family: var(--pan-mono); font-size: 11px; fill: var(--pan-apagado); }
.mon-barra-serie.mon-serie-0 { fill: #5f93c4; }
.mon-barra-serie.mon-serie-1 { fill: #a7c3df; }
.mon-barra-serie.mon-serie-2 { fill: #c9b18a; }
.mon-barra-serie.mon-fuera { fill: #d0584e; }
.mon-linea { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.mon-linea.mon-serie-0, .mon-punto.mon-serie-0 { stroke: #1f6fb2; }
.mon-linea.mon-serie-1, .mon-punto.mon-serie-1 { stroke: #c8742b; }
.mon-linea.mon-serie-2, .mon-punto.mon-serie-2 { stroke: #6a3fa0; }
.mon-linea.mon-serie-3, .mon-punto.mon-serie-3 { stroke: #2e8b6e; }
.mon-punto { fill: #fff; stroke-width: 2; }
.mon-punto.mon-fuera { fill: #d0584e; stroke: #b3261e; }
.mon-marca-fuera { fill: #b3261e; }
.mon-hueco { font-size: 14px; font-weight: 700; fill: #8a99a8; }
.mon-referencia { stroke: #b3261e; stroke-width: 1.4; stroke-dasharray: 5 4; }
.mon-referencia-texto { font-size: 11px; font-weight: 600; fill: #8f1e18; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.mon-leyenda { display: flex; flex-direction: column; gap: 6px; }
.mon-leyenda ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--pan-tinta); }
.mon-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.mon-muestra { display: inline-block; width: 16px; height: 10px; border-radius: 3px; }
.mon-muestra-barra.mon-serie-0 { background: #5f93c4; }
.mon-muestra-barra.mon-serie-1 { background: #a7c3df; }
.mon-muestra-barra.mon-serie-2 { background: #c9b18a; }
.mon-muestra-linea { height: 3px; border-radius: 2px; }
.mon-muestra-linea.mon-serie-0 { background: #1f6fb2; }
.mon-muestra-linea.mon-serie-1 { background: #c8742b; }
.mon-muestra-linea.mon-serie-2 { background: #6a3fa0; }
.mon-muestra-linea.mon-serie-3 { background: #2e8b6e; }
.mon-muestra-referencia { height: 0; border-top: 2px dashed #b3261e; border-radius: 0; }
.mon-muestra-cauce { height: 4px; background: var(--mon-agua); border-radius: 2px; }
.mon-muestra-fuera { color: #b3261e; font-size: 12px; }
.mon-muestra-hueco { color: #8a99a8; font-weight: 700; }

.mon-tabla-marco { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.mon-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.mon-tabla caption { text-align: left; font-size: 11.5px; color: var(--pan-apagado); padding-bottom: 6px; caption-side: top; overflow-wrap: anywhere; }
.mon-tabla th, .mon-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--pan-linea); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.mon-tabla thead th { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pan-apagado); white-space: normal; }
.mon-tabla tbody th { font-family: var(--pan-mono); font-weight: 600; white-space: nowrap; }
.mon-num { text-align: right !important; font-family: var(--pan-mono); white-space: nowrap; }
.mon-fila-fuera { background: var(--mon-rojo-fondo, #fff3f1); }
.mon-sin-dato { color: #6b7b8b; font-style: italic; font-family: var(--pan-sans); }
.mon-aparta { color: var(--mon-rojo, #b3261e); font-weight: 700; }

/* ── El mapa ── */
.mon-mapa { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: var(--pan-papel); border: 1px solid var(--pan-linea); box-shadow: var(--pan-sombra-tarjeta); }
.mon-mapa-svg { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; }
.mon-mapa-fondo { fill: #f4f7f2; }
.mon-mapa-cauce { fill: none; stroke: var(--mon-agua); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.mon-mapa-recorrido { fill: none; stroke: #8b98a6; stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.mon-mapa-punto { fill: #9aa7b3; }
.mon-mapa-guia { stroke: #6b7b8b; stroke-width: 1; stroke-dasharray: 2 2; }
.mon-mapa-punto-real { fill: #6b7b8b; }
.mon-mapa-marca { cursor: pointer; outline: none; }
.mon-mapa-toque { fill: transparent; }
.mon-mapa-circulo { stroke: #fff; stroke-width: 2.5; }
.mon-mapa-marca.mon-estado-al-dia .mon-mapa-circulo { fill: var(--mon-verde); }
.mon-mapa-marca.mon-estado-antiguo .mon-mapa-circulo { fill: #c26a2a; }
.mon-mapa-marca.mon-estado-ausente .mon-mapa-circulo { fill: #7d8b98; stroke-dasharray: 3 2; }
.mon-mapa-marca.mon-estado-revisar .mon-mapa-circulo { fill: var(--mon-rojo); }
.mon-mapa-marca.seleccionada .mon-mapa-circulo { stroke: var(--pan-tinta); stroke-width: 3.5; }
.mon-mapa-marca:focus-visible .mon-mapa-toque { stroke: var(--pan-azul); stroke-width: 2.5; fill: rgba(24, 95, 165, .08); }
.mon-mapa-signo { font-size: 13px; font-weight: 700; fill: #fff; pointer-events: none; }
.mon-mapa-etiqueta { font-family: var(--pan-mono); font-size: 11px; font-weight: 700; fill: var(--pan-tinta); paint-order: stroke; stroke: #f4f7f2; stroke-width: 3px; pointer-events: none; }
.mon-mapa-muestra {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
    color: #fff; font-size: 11px; font-weight: 700;
}
.mon-mapa-muestra.mon-estado-al-dia { background: var(--mon-verde); }
.mon-mapa-muestra.mon-estado-antiguo { background: #c26a2a; }
.mon-mapa-muestra.mon-estado-ausente { background: #7d8b98; }
.mon-mapa-muestra.mon-estado-revisar { background: var(--mon-rojo); }

/* ── Preparar, la ficha y la bandeja de hallazgos ── */
.mon-pasos { display: flex; flex-direction: column; gap: 14px; }
.mon-paso { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mon-paso-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; color: var(--pan-tinta); }
.mon-paso-numero {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--pan-azul); color: #fff; font-family: var(--pan-mono); font-size: 13px;
}
.mon-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mon-texto {
    width: 100%; min-height: 96px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--pan-linea);
    font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--pan-tinta); background: var(--pan-papel); resize: vertical;
}
.mon-texto:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 1px; }
.mon-confirmacion { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 10px; background: var(--pan-fondo); font-size: 13px; line-height: 1.4; cursor: pointer; }
.mon-confirmacion input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--pan-azul); }
.mon-envio { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--pan-linea); background: var(--pan-fondo); }
.mon-hecho { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(28, 122, 82, .35); background: var(--mon-verde-fondo); }
.mon-hecho > .material-symbols-outlined { font-size: 28px; color: var(--mon-verde); }
.mon-hecho > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.mon-descarte { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--pan-linea); }

/* ── Las instalaciones ── */
.mon-ubicacion {
    display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; min-width: 0;
    background: var(--pan-papel); border: 1px solid var(--pan-linea); box-shadow: var(--pan-sombra-tarjeta);
}
.mon-ubicacion-falta { border-left: 4px solid #d58a4c; }

/* ── Mientras carga ── */
.mon-esqueleto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.mon-esqueleto-tarjeta { height: 132px; border-radius: 14px; background: linear-gradient(90deg, #eef2f6 25%, #f6f8fb 50%, #eef2f6 75%); background-size: 200% 100%; animation: mon-brillo 1.4s infinite; }
.mon-esqueleto-alta { height: 260px; }
@keyframes mon-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mon-esqueleto-tarjeta { animation: none; } }

/* ── La franja del hallazgo en el formulario de programar ── */
.fac-hallazgo { border-color: rgba(106, 63, 160, .35) !important; background: #f9f6fd !important; }
.fac-hallazgo .fac-predefinida-icono { color: #6a3fa0; }
.fac-hallazgo.error { border-color: rgba(179, 38, 30, .35) !important; background: #fff3f1 !important; }
.fac-hallazgo.error .fac-predefinida-icono { color: #b3261e; }
.fac-hallazgo a.rz-button { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; white-space: nowrap; }

@media print {
    .mon-mapa, .mon-filtros, .mon-resumen { break-inside: avoid; }
}