/* ===================================================================
   componentes.css — componentes transversales (Fase 1)
   -------------------------------------------------------------------
   Extraido de zafirplan.css al cerrar la Fase 1 del plan de mejora:
   ese archivo supero su limite de tamano y `zp check` pedia trocearlo.
   Todo lo de aqui vivia incrustado en las plantillas (style=, <style>
   y cadenas dentro de .js).

   IMPORTANTE: se carga DESPUES de zafirplan.css y eso no es casual.
   Muchas reglas son variantes que deben pisar a su clase base
   (.zp-panel--pad20 sobre .zp-panel, .ctrl-stat-num--rojo sobre
   .ctrl-stat-num). Con la misma especificidad gana la ultima: si se
   carga antes, varias pantallas cambian de aspecto.
   =================================================================== */
/* ==========================================================================
   Importación de datos (configuracion/importar.html)
   --------------------------------------------------------------------------
   Fase 1 del plan de mejora: estas reglas son la extracción LITERAL de los 72
   atributos style= que tenía la plantilla. Valores idénticos a los que había
   inline; ningún cambio visual.

   Prefijo zp-imp-* a propósito: esta pantalla no usa los componentes del
   sistema (.zp-table, banners) sino una tabla y unos avisos propios con otros
   valores. Unificarla con el catálogo general SÍ cambiaría su aspecto, así que
   queda anotado en docs/_mejora/decisiones_pendientes.md para decidirlo aparte.
   ========================================================================== */

/* Textos */
.zp-imp-texto-ayuda { font-size: var(--zp-fs-base); color: var(--zp-grey-dark); }
.zp-imp-seccion { font-size: var(--zp-fs-md); margin-top: 22px; }
.zp-imp-seccion-error { font-size: var(--zp-fs-md); margin-top: 22px; color: var(--zp-red); }
.zp-imp-lote { font-size: var(--zp-fs-xs); margin-top: 4px; }

/* Banners de resultado */
.zp-imp-banner-error { margin-top: 14px; padding: 12px 14px; background: var(--zp-red-soft); border-left: 4px solid var(--zp-red); color: var(--zp-red); }
/* Bandera verde: aviso incrustado y no interactivo (§4-bis de las normas).
   Antes eran .zp-imp-banner-ok y -ok-final, dos reglas casi idénticas con
   nombre de dominio ("imp" de importar) que nadie más podía reutilizar.
   Ahora el nombre dice el formato, no la pantalla. */
.zp-bandera-verde {
    margin: 14px 0;
    padding: 12px 14px;
    background: var(--zp-green-soft);
    border-left: 4px solid var(--zp-green);
    color: var(--zp-green);
}
.zp-imp-banner-aviso { margin-top: 14px; padding: 12px 14px; background: var(--zp-ambar-soft); border-left: 4px solid var(--zp-ambar); color: var(--zp-ambar); }
.zp-imp-banner-ajustes { margin-top: 12px; padding: 10px 14px; background: var(--zp-ambar-soft); border-left: 4px solid var(--zp-ambar); color: var(--zp-ambar-dark); }

/* Tarjetas del paso inicial */
.zp-imp-cards { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.zp-imp-card { flex: 1 1 320px; background: var(--zp-white); border: 1px solid var(--zp-blue); padding: 18px; }
.zp-imp-card-titulo { font-size: var(--zp-fs-md); margin-top: 0; }
.zp-imp-campo-archivo { margin-bottom: 12px; }
.zp-imp-input-file { width: 100%; padding: 7px 10px; border: 1px solid var(--zp-grey-medium); font-size: var(--zp-fs-base); box-sizing: border-box; cursor: pointer; }

/* Tablas de resumen / errores / mapeo */
.zp-imp-tabla { border-collapse: collapse; margin: 8px 0; font-size: var(--zp-fs-base); }
.zp-imp-tabla-sm { border-collapse: collapse; margin: 8px 0; font-size: var(--zp-fs-xs); }
.zp-imp-th { border: 1px solid var(--zp-grey-medium); padding: 5px 10px; background: var(--zp-blue); color: var(--zp-white); }
.zp-imp-th--izq { text-align: left; }
.zp-imp-th-err { border: 1px solid var(--zp-grey-medium); padding: 5px 8px; background: var(--zp-red); color: var(--zp-white); text-align: left; }
.zp-imp-td { border: 1px solid var(--zp-grey-medium); padding: 4px 10px; }
.zp-imp-td--c { text-align: center; }
.zp-imp-td-sm { border: 1px solid var(--zp-grey-medium); padding: 4px 8px; }
.zp-imp-conflicto { color: var(--zp-red); font-weight: bold; }
.zp-imp-alerta { color: var(--zp-ambar); font-weight: bold; }

/* Listas de avisos */
.zp-imp-lista-ajustes { margin: 6px 0 0 0; font-size: var(--zp-fs-xs); }
/* Detalle largo de un fallo de importación (lista de filas rechazadas). */
.zp-imp-detalle { margin: 12px 0 0 0; font-size: var(--zp-fs-xs); color: var(--zp-grey-dark);
                  white-space: pre-wrap; overflow-x: auto; }

/* Mapeo y barra de acciones */
.zp-imp-select { padding: 5px 8px; }
.zp-imp-acciones { margin-top: 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.zp-imp-acciones-final { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.zp-imp-form-inline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.zp-imp-form-inline-sm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
/* .zp-imp-check-label: la declaracion vive en zafirplan.css junto a
   .zp-check-label — es el mismo componente (etiqueta con casilla delante). */
.zp-imp-file-sm { font-size: var(--zp-fs-xs); max-width: 220px; }

/* ==========================================================================
   Subforms — piezas que estaban inline en cada plantilla
   --------------------------------------------------------------------------
   Fase 1 del plan de mejora. Son componentes COMPARTIDOS por varios subforms
   (mano de obra, materiales, detalles de compra, asignaciones...), no de una
   pantalla: por eso el nombre es del componente y no del subform concreto.
   Los siguientes lotes deben reutilizar estas clases, no crear equivalentes.
   ========================================================================== */

/* Modal de subform (familia .zp-dc-*) */
.zp-dc-fila { display: flex; gap: 8px; }          /* fecha + hora en una linea */
.zp-dc-campo { flex: 1; }                          /* cada campo de esa linea */
.zp-dc-error { color: var(--zp-red); font-size: var(--zp-fs-xs); margin-top: 6px; }
.zp-dc-btn-full { width: 100%; }                   /* boton a lo ancho del grupo */
.zp-dc-mensaje { text-align: center; padding: 20px; color: var(--zp-grey-dark); }

/* Filas de la tabla de un subform */   /* observaciones bajo el dato */
.zp-subform-rango { font-size: var(--zp-fs-xs); white-space: nowrap; }
.zp-subform-imputado { color: var(--zp-green); font-size: var(--zp-fs-xs); white-space: nowrap; }
.zp-subform-acciones-celda { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }                 /* "no hay lineas registradas" */

/* ==========================================================================
   Componentes transversales rescatados de estilos inline (Fase 1)
   --------------------------------------------------------------------------
   Estos NO son de una pantalla: son patrones que se repiten por todo el
   sistema y que hasta ahora se escribian a mano en cada plantilla. Reutilizar
   siempre que aparezca el mismo componente, no crear equivalentes.
   Van al final del archivo a proposito: al tener la misma especificidad que
   las reglas base (una clase) y estar despues, reproducen exactamente lo que
   hacia el inline sin necesidad de selectores acoplados.
   ========================================================================== */

/* Subtitulo gris bajo el <h1> de .zp-page-header.
   Aparece inline en 8 plantillas: bandeja_decisiones, mi_bandeja,
   auditoria_permisos, perfiles_editar, perfiles_lista, cuadro_mando,
   layouts/vista e importar. Que todas usen esta clase es justamente el
   objetivo: mismo componente, misma estetica. */
.zp-page-subtitulo { font-size: var(--zp-fs-base); color: var(--zp-grey-dark); }

.zp-code-sm { font-size: var(--zp-fs-xs); }
.zp-form-inline { display: inline; }

/* Boton pequeno de accion secundaria (sobre .zp-btn-primary/.zp-btn-secondary) */
.zp-btn-mini { padding: var(--zp-pad-boton-sm); font-size: var(--zp-fs-xs); }

/* Panel blanco con borde azul: bloque de contenido de una pantalla */
.zp-panel {
    background: var(--zp-white);
    border: 1px solid var(--zp-blue);
    padding: 16px;
    margin-top: 14px;
}
.zp-panel-titulo { margin-top: 0; color: var(--zp-blue); font-size: var(--zp-fs-base); }
.zp-panel-titulo--sin-margen { margin: 0; }
.zp-panel-cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.zp-panel-contador { color: var(--zp-grey-dark); font-weight: 400; font-size: var(--zp-fs-xs); margin-left: 6px; }

/* Campo de formulario suelto (fuera del sistema de layouts) */
.zp-campo-bloque { margin-bottom: 10px; }
.zp-campo-label {
    display: block;
    font-weight: 600;
    color: var(--zp-blue);
    margin-bottom: 4px;
    font-size: var(--zp-fs-xs);
}
.zp-input-ancho-medio { width: 100%; max-width: 400px; }
.zp-input-ancho-total { width: 100%; }
.zp-acciones-form { margin-top: 14px; display: flex; gap: 10px; }

/* Aviso destacado a ancho de pagina */
.zp-aviso-pagina {
    background: var(--zp-ambar-soft);
    border: 1px solid var(--zp-orange);
    padding: 12px 16px;
    margin: 14px 0;
}

/* ==========================================================================
   CHIPS DE ESTADO — familia generica (venia de zafirplan.css)
   ========================================================================== */

/* Chip SUAVE (sistema_diseno.md §3-bis.2): informa del estado de un registro
   dentro de un listado o ficha; aparecen repetidos, uno por fila. Formato:
   fondo -soft, texto y BORDE del color. El borde es lo que evita que un chip
   claro se pierda sobre el blanco de la tabla. */
.zp-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: var(--zp-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.zp-chip-grey   { background: var(--zp-grey-light); border-color: var(--zp-grey-dark); color: var(--zp-grey-dark); }
/* Texto en ambar-dark, no ambar: --zp-ambar solo llega a 3.38 de contraste y
   no vale para texto (sistema_diseno.md §2). */
.zp-chip-orange { background: var(--zp-ambar-soft); border-color: var(--zp-ambar);     color: var(--zp-ambar-dark); }
.zp-chip-green  { background: var(--zp-green-soft); border-color: var(--zp-green);     color: var(--zp-green); }
.zp-chip-red    { background: var(--zp-red-soft);   border-color: var(--zp-red);       color: var(--zp-red); }
.zp-chip-blue   { background: var(--zp-blue-soft);  border-color: var(--zp-blue);      color: var(--zp-blue); }

.zp-chip-hidden { display: none; height: 0; }

/* Chips SOLIDOS (sistema_diseno.md §3-bis.2): marcan una condicion que debe
   destacar y aparecen de uno en uno, no una por fila. Formato: fondo del
   color, texto blanco, y el borde del mismo color que el fondo para que midan
   igual que un chip suave y no bailen al ponerlos en la misma linea.

   Dos excepciones de contraste, deliberadas:
   - solid-orange lleva texto AZUL: blanco sobre #ff8800 se queda en 2.2 y no
     se lee. Es la misma solucion que ya usan .sidebar-badge y .zp-kan-hoy-badge.
   - solid-ambar usa --zp-ambar-dark de fondo: blanco sobre --zp-ambar se queda
     en 3.9, por debajo del minimo de 4.5. */
.zp-chip-solid-blue   { background: var(--zp-blue);       border-color: var(--zp-blue);       color: var(--zp-white); padding: 2px 6px; margin-left: 6px; }
.zp-chip-solid-orange { background: var(--zp-orange);     border-color: var(--zp-orange);     color: var(--zp-blue);  padding: 2px 6px; margin-left: 6px; }
.zp-chip-solid-ambar  { background: var(--zp-ambar-dark); border-color: var(--zp-ambar-dark); color: var(--zp-white); padding: 1px 5px; margin-left: 4px; }

/* ==========================================================================
   Rejilla de permisos (configuracion/perfiles_editar.html)
   Las cuatro primeras reglas venian de un bloque <style> inline en la
   plantilla; el resto, de atributos style=.
   ========================================================================== */
.zp-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px;
}
.zp-perm-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: var(--zp-fs-xs);
    cursor: pointer;
    border-radius: var(--zp-radius-lg);
}
.zp-perm-item:hover {
    background: var(--zp-blue-soft);
}
.zp-perm-item input[type="checkbox"] {
    cursor: pointer;
}
.zp-perm-modulo { margin-bottom: 14px; border: 1px solid var(--zp-blue-soft); padding: 12px; }
.zp-perm-modulo-cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--zp-blue-soft);
}
.zp-perm-modulo-nombre { color: var(--zp-blue); font-size: var(--zp-fs-base); }
.zp-perm-modulo-toggle { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); cursor: pointer; }

/* ==========================================================================
   Barra de filtros, tabla de listado y paginacion (Fase 1)
   Rescatado de los style= de configuracion/auditoria_permisos.html. Son
   componentes, no de esa pantalla: perfiles_lista y cuadro_mando usan las
   mismas piezas y deberian migrar a estas clases en sus lotes.
   ========================================================================== */

/* Barra de filtros en bloque (variante de .zp-dash-filtros, que es inline-flex).
   Va despues que aquella para reproducir lo que hacia el style= inline. */
.zp-filtros-barra {
    margin-top: 14px;
    padding: 12px;
    background: var(--zp-white);
    border: 1px solid var(--zp-blue);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.zp-filtro-label {
    display: block;
    font-size: var(--zp-fs-xs);
    color: var(--zp-grey-dark);
    margin-bottom: 2px;
}
.zp-filtro-select { padding: 6px 10px; }
.zp-filtro-select--ancho { min-width: 160px; }

/* Tabla de listado enmarcada */
.zp-tabla-enmarcada {
    background: var(--zp-white);
    border: 1px solid var(--zp-blue);
    margin-top: 14px;
}
.zp-tabla-vacia { padding: 20px; text-align: center; color: var(--zp-grey-dark); font-style: italic; }
.zp-celda-fecha { color: var(--zp-grey-dark); font-size: var(--zp-fs-xs); font-variant-numeric: tabular-nums; }
.zp-code-datos { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); white-space: pre-wrap; }
.zp-motivo { font-size: var(--zp-fs-xs); }

.zp-paginacion {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
    font-size: var(--zp-fs-xs);
}
.zp-filtro-select--240 { min-width: 240px; }

/* ==========================================================================
   Subform de alcances (subforms/alcances.html)
   --------------------------------------------------------------------------
   Su tabla llevaba class="zp-table" pero traia inline casi todo el formato,
   tapando al del sistema, y se veia distinta al resto de subforms. Se retiro
   ese formato: ahora usa .zp-table tal cual, como mano de obra o materiales.
   ========================================================================== */
.zp-alcance-codigo { font-size: var(--zp-fs-xs); color: var(--zp-grey); margin-left: 6px; }
.zp-alcance-footer {
    padding: 10px;
    border-top: 1px solid var(--zp-blue-soft);
    background: var(--zp-grey-light);
}
.zp-nota-ayuda { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); margin: 8px 0 0; font-style: italic; }

/* Transversales que salen aqui */
.zp-btn-borrar-icono { background: none; border: none; color: var(--zp-red); cursor: pointer; font-size: var(--zp-fs-base); }
.zp-btn-compacto { padding: 7px 14px; }
.zp-dc-fila--bottom { align-items: flex-end; }
.zp-nowrap { white-space: nowrap; }

/* ==========================================================================
   Checklist de primeros pasos (onboarding/_checklist.html)
   .zp-onboarding se usaba en el HTML sin estar definida en ningun sitio: todo
   su formato venia inline. Ahora vive aqui.
   ========================================================================== */
.zp-onboarding {
    background: white;
    border: 1px solid var(--zp-blue);
    padding: 20px 24px;
    margin-bottom: 24px;
    position: relative;
}
.zp-onb-cerrar-form { position: absolute; top: 14px; right: 14px; }
.zp-onb-cerrar-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--zp-grey-dark);
    font-size: var(--zp-fs-lg);
    line-height: 1;
    padding: 2px 6px;
}
.zp-onb-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.zp-onb-titulo { font-size: var(--zp-fs-md); font-weight: 700; color: var(--zp-blue); }
.zp-onb-subtitulo { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); margin-top: 2px; }/* Barra de progreso. El ancho es un dato ({{ onboarding.porcentaje }}%) y se
   queda como style= inline: no es formato, es el valor a representar. */
.zp-onb-progreso-wrap { flex: 1; max-width: 200px; }
.zp-onb-progreso { height: 6px; background: var(--zp-grey-finde); overflow: hidden; }
.zp-onb-progreso-barra {
    height: 100%;
    background: var(--zp-green);
    transition: width .3s;
}

.zp-onb-pasos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.zp-onb-paso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--zp-radius-lg);
    text-decoration: none;
    background: var(--zp-grey-finde);
    border: 1px solid var(--zp-grey-soft);
    opacity: 1;
}
.zp-onb-paso--hecho { background: var(--zp-green-soft); border-color: var(--zp-green); opacity: 0.75; }
.zp-onb-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--zp-fs-xs);
    font-weight: 700;
    margin-top: 1px;
    background: var(--zp-grey-soft);
    color: var(--zp-grey-dark);
}
.zp-onb-num--hecho { background: var(--zp-green); color: white; }
.zp-onb-paso-titulo { font-size: var(--zp-fs-base); font-weight: 600; color: var(--zp-blue); }
.zp-onb-paso-titulo--hecho { text-decoration: line-through; color: var(--zp-grey-dark); }
.zp-onb-opcional { font-size: var(--zp-fs-xs); font-weight: 400; opacity: .7; }
.zp-onb-paso-desc { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); margin-top: 2px; }

.zp-onb-seccion { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--zp-grey-finde); }
.zp-onb-seccion--flex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zp-onb-seccion--texto { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); }
.zp-onb-texto { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); flex: 1; min-width: 200px; }
.zp-onb-nota { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); opacity: .8; white-space: nowrap; }
.zp-onb-link { color: var(--zp-orange); font-weight: 600; text-decoration: none; margin-left: 4px; }

/* ==========================================================================
   Layout de planta (layouts/vista.html) y su modal de reemplazo de SVG
   ========================================================================== */

/* Transversales que salen de esta pantalla */
.zp-visualmente-oculto { position: absolute; left: -9999px; }  /* input file accesible */
.zp-texto-ayuda { font-size: var(--zp-fs-base); color: var(--zp-grey-dark); }
.zp-icono-vacio { font-size: 3rem; color: var(--zp-grey); }

/* Espaciados sueltos rescatados de los subforms. Conviven con margenes en px
   de otras pantallas: unificar en una escala unica esta anotado para la Fase 4. */
.zp-mt-04 { margin-top: 0.4rem; }
.zp-mt-05 { margin-top: 0.5rem; }
.zp-mt-1  { margin-top: 1rem; }
.zp-textarea-vertical { resize: vertical; }
.zp-fila-05 { display: flex; gap: 0.5rem; }
.zp-col-05 { display: flex; flex-direction: column; gap: 0.5rem; }
.zp-fila-check { display: flex; align-items: center; gap: 0.4rem; font-size: var(--zp-fs-base); }
.zp-aviso-suave { padding: 0.75rem 1rem; background: var(--zp-ambar-soft); }
.zp-mb-14 { margin-bottom: 14px; }

/* Dos redacciones del mismo texto, según el ancho: la larga en pantalla
   grande, la corta cuando no cabe. Se ponen las dos en el HTML y el CSS
   enseña una; así el texto corto se escribe a mano, que es lo único que
   sale bien (recortar por JS parte las palabras donde no toca).
   El corte es el mismo 767.98px que usa el resto del sistema. */
.zp-texto-estrecho { display: none; }
@media (max-width: 767.98px) {
    .zp-texto-ancho { display: none; }
    .zp-texto-estrecho { display: inline; }
}
.zp-fila-10 { display: flex; gap: 10px; }
.zp-nota-mini { font-size: var(--zp-fs-xs); color: var(--zp-grey); }
.zp-caja-simple { background: var(--zp-white); border: 1px solid var(--zp-blue); }
.zp-col-600 { max-width: 600px; }
.zp-panel--pad20 { padding: 20px; }
/* Igual que .zp-campo-label pero sin font-size (unificacion anotada) */
.zp-campo-label-plano { display: block; font-weight: 600; color: var(--zp-blue); margin-bottom: 4px; }
.zp-btn-peligro { color: var(--zp-red); border-color: var(--zp-red); }

/* Pantallas de "operacion completada" (suscripcion_exito, servicios_exito) */
.zp-panel-centrado { max-width: 520px; margin-top: 32px; }
.zp-panel-exito {
    background: var(--zp-white);
    border: 1px solid var(--zp-blue);
    padding: 28px;
    text-align: center;
}
.zp-icono-exito { font-size: 48px; color: var(--zp-green); margin-bottom: 12px; }
.zp-titulo-exito { color: var(--zp-blue); margin-bottom: 8px; }
.zp-texto-exito { color: var(--zp-grey-dark); font-size: var(--zp-fs-base); margin-bottom: 20px; }

/* ==========================================================================
   Cola larga de la Fase 1: portal, invitaciones, avisos, cuentas y sueltos.
   Un bloque por concepto; los espaciados sueltos conviven con los de otras
   pantallas (unificar en una escala unica esta anotado para la Fase 4).
   ========================================================================== */
.zp-nota-12 { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); }
.zp-texto-ayuda-mb { font-size: var(--zp-fs-base); color: var(--zp-grey-dark); margin: 0 0 14px; }
.zp-texto-ayuda-mt { font-size: var(--zp-fs-base); color: var(--zp-grey-dark); margin: 14px 0 0; }
.zp-nota-12-mt { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); margin: 10px 0 0; }
.zp-nota-12-mt6 { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); margin-top: 6px; }
.zp-subnota { display: block; font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); margin-top: 2px; }
.zp-nota-break { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); margin-top: 8px; word-break: break-all; }
.zp-nota-break-sm { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); word-break: break-all; margin-top: 2px; }
.zp-vacio-centro { color: var(--zp-grey-dark); text-align: center; padding: 24px 0; }
.zp-txt-naranja-bold { color: var(--zp-orange); font-weight: 600; }
.zp-txt-blanco-ml { color: var(--zp-white); margin-left: 8px; }
.zp-mt-0 { margin-top: 0; }
.zp-m-0 { margin: 0; }
.zp-mt-8 { margin-top: 8px; }
.zp-mt-14 { margin-top: 14px; }
.zp-mt-16 { margin-top: 16px; }
.zp-mt-20 { margin-top: 20px; }
.zp-mt-32 { margin-top: 32px; }
.zp-mb-12 { margin-bottom: 12px; }
.zp-mb-16 { margin-bottom: 16px; }
.zp-ml-8 { margin-left: 8px; }
.zp-m-top4 { margin: 4px 0 0; }
.zp-col-420 { max-width: 420px; }
.zp-col-480 { max-width: 480px; }
.zp-w-220 { width: 220px; }
.zp-flex1-min0 { flex: 1; min-width: 0; }
.zp-input-bloque { width: 100%; box-sizing: border-box; margin-bottom: .75rem; }
.zp-input-bloque-lg { width: 100%; box-sizing: border-box; margin-bottom: 1rem; }
.zp-input-caja { width: 100%; padding: 7px 10px; border: 1px solid var(--zp-grey-medium); font-size: var(--zp-fs-base); }
.zp-input-simple { padding: 6px; border: 1px solid var(--zp-grey); font-size: var(--zp-fs-base); }
.zp-centro { text-align: center; }
.zp-centro-gris { text-align: center; color: var(--zp-blue); margin-bottom: 1.5rem; }
.zp-texto-gris-mb { color: var(--zp-blue); margin-bottom: 1.5rem; }
.zp-centro-gris-sm { text-align: center; color: var(--zp-blue); font-size: var(--zp-fs-base); }
.zp-centro-mt { text-align: center; margin-top: 1rem; font-size: var(--zp-fs-base); }
.zp-centro-pad { text-align: center; padding: 24px; }
.zp-centro-mt20 { text-align: center; margin-top: 20px; }
.zp-centro-my { text-align: center; margin: 24px 0 18px; }
.zp-pie-centro { text-align: center; margin-top: 18px; font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); }
.zp-acciones-der-pad { text-align: right; padding: 16px 0; }
.zp-acciones-der-flex { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }
.zp-celda-135 { margin-top: 3px; font-size: var(--zp-fs-base); }
.zp-titulo-15 { font-size: var(--zp-fs-md); font-weight: 700; color: var(--zp-blue); margin-bottom: 12px; }
.zp-titulo-16 { font-weight: 600; color: var(--zp-blue); margin-top: 12px; font-size: var(--zp-fs-md); }
.zp-titulo-18 { color: var(--zp-blue); margin: 0 0 14px; font-size: var(--zp-fs-lg); }
.zp-titulo-22 { color: var(--zp-blue); margin: 12px 0 2px; font-size: var(--zp-fs-lg); }
.zp-dato-destacado { font-weight: 600; color: var(--zp-blue); margin-top: 6px; }
.zp-mono-13 { font-family: 'SF Mono', Consolas, monospace; font-size: var(--zp-fs-base); color: var(--zp-grey-dark); }
.zp-inline-mr { display: inline-block; margin-right: 8px; }
.zp-inline-ml { display: inline-block; margin-left: 4px; }
.zp-relative { position: relative; }
.zp-btn-cta { display: inline-block; padding: 10px 24px; background: var(--zp-orange, var(--zp-ambar-dark)); color: white; border-radius: var(--zp-radius-sm); text-decoration: none; font-weight: 600; }
.zp-link-volver { color: var(--zp-blue); text-decoration: none; font-size: var(--zp-fs-base); display: inline-block; margin-bottom: 10px; }
.zp-pad-4-8 { padding: 4px 8px; }
.zp-txt-13 { font-size: var(--zp-fs-base); }
.zp-txt-18 { font-size: var(--zp-fs-lg); }
.zp-icono-grande { font-size: 56px; color: var(--zp-blue); }
.zp-lista-pasos { font-size: var(--zp-fs-base); line-height: 1.6; padding-left: 20px; margin: 0; }
.zp-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.zp-caja-qr { text-align: center; border: 2px dashed var(--zp-blue); padding: 14px; }

.zp-form-group--espaciado { padding: 20px 0 30px 0; }
.zp-form-group--flex { display: flex; }

/* Modal "Reemplazar SVG" */
.zp-replace-nombre-archivo { margin-left: 10px; color: var(--zp-grey-dark); font-size: var(--zp-fs-xs); }
.zp-replace-textarea { font-family: monospace; font-size: var(--zp-fs-xs); width: 100%; }
.zp-replace-h3 { margin-top: 18px; color: var(--zp-blue); font-size: var(--zp-fs-md); }
.zp-replace-bloque { margin-top: 14px; }
.zp-replace-nota { font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); margin: 4px 0; }
.zp-replace-lista { margin: 6px 0 0; font-size: var(--zp-fs-xs); padding-left: 18px; }
.zp-replace-btn { margin-top: 10px; }

/* Bloque de diagnostico del parser de SVG. Lo genera layout_planta.js, que
   antes escribia estos estilos incrustados en el HTML que construye. */
.zp-diag { margin-top: 14px; font-size: var(--zp-fs-xs); color: var(--zp-grey-dark); }
.zp-diag-sum { cursor: pointer; }
.zp-diag-p { margin: 6px 0; }
.zp-diag-p--italic { font-style: italic; }
/* El original declaraba padding-left:18px y despues padding:8px 18px, que lo
   anulaba: el valor efectivo era y sigue siendo 8px 18px. */
.zp-diag-lista {
    max-height: 200px;
    overflow: auto;
    background: var(--zp-white);
    padding: 8px 18px;
    border: 1px solid var(--zp-blue-soft);
}
.zp-diag-id--zp { color: var(--zp-blue); font-weight: 600; }/* ==========================================================================
   Impresion del QR de avisos (activos/qr_aviso.html)
   Venia de un <style> inline. Va acotado por la clase del <body>: sin ese
   acotado ocultaria la barra lateral al imprimir CUALQUIER pantalla.
   ========================================================================== */@media print {
    .zp-print-qr .zp-page-header .zp-form-header-actions { display: none; }
    .zp-print-qr .sidebar { display: none; }
    .zp-print-qr .main { margin-left: 0; }
}