/* dato_mal.css — «¿Este dato está mal?» (P10a): la marca «Avisado por usuarios» de la ficha del contrato, el diálogo y
 * la página del formulario. Solo se carga en la ficha (con el almacén de avisos) y en /avisos/nuevo. */

/* ── La marca: ocre de aviso, no el rojo de un importe excluido (el dato no se toca) ── */
.datomal-marcas {
    margin: var(--sp-3) 0 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-aviso-borde);
    border-left-width: 3px;
    border-radius: var(--radio-m);
    background: var(--color-aviso-fondo);
    max-width: 760px;
}
.datomal-marcas-lista { list-style: none; margin: 0; padding: 0; }
.datomal-marca { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--color-texto); font-size: var(--fs-14); line-height: var(--lh-ajustada); }
.datomal-marca + .datomal-marca { margin-top: var(--sp-1); }
.datomal-marca .icono { flex: none; color: var(--color-aviso); margin-top: 0.1em; }
.datomal-marca strong { color: var(--color-aviso); font-weight: var(--peso-fuerte); }
.datomal-marcas-nota { margin: var(--sp-2) 0 0; font-size: var(--fs-13); color: var(--color-texto-2); line-height: var(--lh-ajustada); }

/* ── El diálogo (modal nativo: el resto de la página queda inerte) ── */
.datomal-dialogo {
    width: min(560px, calc(100vw - 2 * var(--sp-4)));
    max-height: calc(100vh - 2 * var(--sp-4));
    max-height: calc(100dvh - 2 * var(--sp-4));
    margin: auto;
    padding: var(--sp-6);
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio-l);
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: var(--sombra-3);
    overflow: auto;
    overscroll-behavior: contain;
}
.datomal-dialogo::backdrop { background: var(--color-velo); }
.datomal-dialogo .datomal-cerrar { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.datomal-dialogo .datomal-titulo { padding-right: var(--sp-10); }
.datomal-dialogo[aria-busy="true"] { cursor: progress; }

/* ── El cuerpo (diálogo y página) ── */
.datomal-titulo { font-size: var(--fs-22); line-height: var(--lh-titulo); margin: 0 0 var(--sp-3); }
.datomal-titulo:focus { outline: none; }
.datomal-titulo:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.datomal-contrato { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; margin: 0 0 var(--sp-3); font-size: var(--fs-14); color: var(--color-texto-2); overflow-wrap: anywhere; }
.datomal-texto { margin: 0 0 var(--sp-3); font-size: var(--fs-14); line-height: var(--lh-texto); }
.datomal-motivos { margin: var(--sp-4) 0 0; padding: 0; border: 0; min-width: 0; }
.datomal-leyenda { padding: 0; margin: 0 0 var(--sp-2); font-weight: var(--peso-fuerte); font-size: var(--fs-14); color: var(--color-texto-fuerte); }
.datomal-motivo {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    min-height: var(--tactil);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
    font-size: var(--fs-14);
    cursor: pointer;
}
.datomal-motivo + .datomal-motivo { margin-top: var(--sp-2); }
.datomal-motivo:hover { border-color: var(--color-borde-control); background: var(--color-fondo-hundido); }
.datomal-motivo:has(input:checked) { border-color: var(--color-acento); background: var(--color-acento-suave); }
.datomal-motivo input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--color-acento); }
.datomal-motivo input:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.datomal-error { display: flex; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-2); color: var(--color-peligro); font-size: var(--fs-14); font-weight: var(--peso-medio); }
.datomal-privacidad { margin: var(--sp-4) 0 0; font-size: var(--fs-13); color: var(--color-texto-2); line-height: var(--lh-ajustada); }
.datomal-acciones { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* El campo trampa: fuera de la pantalla (no display:none, que algunos programas saltan) */
.datomal-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── La página sin JavaScript ── */
.datomal-pagina { max-width: var(--ancho-lectura); padding-top: var(--sp-6); padding-bottom: var(--sp-10); }
.datomal-pagina .migas { margin-bottom: var(--sp-5); }
.datomal-pagina .datomal-titulo { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); }

@media (max-width: 640px) {
    .datomal-dialogo { padding: var(--sp-5) var(--sp-4); }
    .datomal-acciones .boton { flex: 1 1 auto; }
}