/* ============================================================
   Canal de Denuncias - Dimol
   Se carga DESPUÉS de bootstrap.min.css y de styles-etica.css
   ============================================================ */
:root {
    --dn-azul: #003E77;
    --dn-azul-oscuro: #002B54;
    --dn-ambar: #FFB401;
    --dn-texto: #1B2A3A;
    --dn-gris: #5B6B7F;
    --dn-linea: #D8E1EB;
    --dn-fondo: #F4F7FB;
    --dn-error: #B42318;
}

/* ---------- Bloque bajo el visor PDF ---------- */
.canal-denuncias {
    max-width: 880px;
    margin: 70px auto 0;
    padding: 0 20px;
}
.canal-denuncias__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    background: var(--dn-fondo);
    border-left: 6px solid var(--dn-ambar);
    border-radius: 8px;
}
.canal-denuncias__icon { font-size: 2.6rem; color: var(--dn-azul); line-height: 1; }
.canal-denuncias h2 { font-size: 1.6rem; font-weight: bold; color: var(--dn-azul); margin: 0 0 6px; }
.canal-denuncias p { margin: 0; color: var(--dn-gris); font-size: .98rem; line-height: 1.55; max-width: 60ch; }
.canal-denuncias .btn-canal {
    background: var(--dn-azul);
    color: #fff;
    border: 2px solid var(--dn-azul);
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
    margin: 0;
}
.canal-denuncias .btn-canal:hover,
.canal-denuncias .btn-canal:focus-visible {
    background: var(--dn-ambar);
    border-color: var(--dn-ambar);
    color: var(--dn-azul);
}
@media (max-width: 767px) {
    .canal-denuncias { margin-top: 50px; }
    .canal-denuncias__inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 24px 20px;
        gap: 14px;
        border-left: 0;
        border-top: 6px solid var(--dn-ambar);
    }
    .canal-denuncias p { margin: 0 auto; }
    .canal-denuncias .btn-canal { width: 100%; white-space: normal; }
}

/* ---------- Modal ---------- */
#denunciaModal { background: transparent; }
#denunciaModal .modal-content {
    height: auto; /* anula el 85vh de styles-etica.css */
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
}
#denunciaModal .modal-header {
    display: block;
    background: var(--dn-azul);
    color: #fff;
    padding: 20px 24px 16px;
    border-bottom: 4px solid var(--dn-ambar);
}
#denunciaModal .dn-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#denunciaModal .modal-title { font-size: 1.35rem; font-weight: bold; margin: 0; color: #fff; }
#denunciaModal .dn-sub { font-size: .85rem; color: #C9D6E5; margin: 2px 0 0; }
#denunciaModal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    background-color: transparent;
    padding: 8px;
    margin: 0;
    opacity: .85;
}

/* Barra de progreso */
#denunciaModal .dn-progress { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; }
#denunciaModal .dn-progress span { height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); transition: background-color .25s ease; }
#denunciaModal .dn-progress span.is-done { background: var(--dn-ambar); }
#denunciaModal .dn-progress span.is-current { background: #fff; }
#denunciaModal .dn-counter { font-size: .8rem; color: #C9D6E5; margin-top: 8px; }

/* Formulario: body con scroll y footer fijo */
#denunciaForm { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
#denunciaModal .modal-body { padding: 24px; color: var(--dn-texto); overflow-y: auto; }

/* Pasos */
#denunciaModal .dn-step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
#denunciaModal .dn-step.is-active { display: block; animation: dnEntrada .25s ease; }
@keyframes dnEntrada { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #denunciaModal .dn-step.is-active { animation: none; } }

#denunciaModal .dn-question { font-size: 1.15rem; font-weight: bold; color: var(--dn-azul); margin: 0 0 6px; float: none; width: 100%; }
#denunciaModal .dn-help { font-size: .88rem; color: var(--dn-gris); margin: 0 0 18px; line-height: 1.5; }
#denunciaModal .dn-legal {
    display: flex;
    gap: 10px;
    background: var(--dn-fondo);
    border-left: 4px solid var(--dn-azul);
    padding: 12px 14px;
    border-radius: 4px;
    font-size: .88rem;
    margin: 0 0 18px;
}
#denunciaModal .dn-legal i { color: var(--dn-azul); font-size: 1.1rem; }

/* Opciones tipo tarjeta (radio) */
#denunciaModal .dn-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#denunciaModal .dn-option { position: relative; margin: 0; }
#denunciaModal .dn-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
#denunciaModal .dn-option span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border: 1.5px solid var(--dn-linea);
    border-radius: 8px;
    background: #fff;
    font-size: .98rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
#denunciaModal .dn-option span::before {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    border: 2px solid var(--dn-linea);
    border-radius: 50%;
    background: #fff;
}
#denunciaModal .dn-option:hover span { border-color: var(--dn-azul); }
#denunciaModal .dn-option input:checked + span { border-color: var(--dn-azul); background: var(--dn-fondo); font-weight: bold; color: var(--dn-azul); }
#denunciaModal .dn-option input:checked + span::before { border-color: var(--dn-azul); box-shadow: inset 0 0 0 4px #fff; background: var(--dn-azul); }
#denunciaModal .dn-option input:focus-visible + span { outline: 3px solid var(--dn-ambar); outline-offset: 2px; }
#denunciaModal .dn-otro { margin-top: 12px; }
#denunciaModal .dn-otro[hidden] { display: none; }

/* Checkboxes */
#denunciaModal .dn-checks { display: grid; gap: 8px; }
#denunciaModal .dn-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--dn-linea);
    border-radius: 8px;
    cursor: pointer;
    font-size: .93rem;
    line-height: 1.4;
    margin: 0;
}
#denunciaModal .dn-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--dn-azul); }
#denunciaModal .dn-check:has(input:checked) { border-color: var(--dn-azul); background: var(--dn-fondo); }
#denunciaModal .dn-declaracion { border-style: dashed; margin-top: 16px; font-size: .88rem; color: var(--dn-gris); }

/* Campos */
#denunciaModal .form-label { font-weight: bold; font-size: .9rem; color: var(--dn-texto); margin-bottom: 4px; }
#denunciaModal .form-label .req { color: var(--dn-error); }
#denunciaModal .form-control { border-radius: 8px; border: 1.5px solid var(--dn-linea); padding: 10px 12px; font-size: .98rem; }
#denunciaModal .form-control:focus { border-color: var(--dn-azul); box-shadow: 0 0 0 3px rgba(0,62,119,.15); }
#denunciaModal textarea.form-control { min-height: 200px; resize: vertical; }
#denunciaModal .dn-count { display: flex; justify-content: space-between; font-size: .8rem; color: var(--dn-gris); margin-top: 6px; }
#denunciaModal .dn-count.is-limit { color: var(--dn-error); }
#denunciaModal .dn-files { display: grid; gap: 10px; }
#denunciaModal .dn-file { display: flex; align-items: center; gap: 10px; }
#denunciaModal .dn-file label { flex: 0 0 82px; margin: 0; font-size: .85rem; color: var(--dn-gris); }
#denunciaModal .dn-file input { flex: 1; min-width: 0; font-size: .88rem; }
#denunciaModal .dn-error { display: none; color: var(--dn-error); font-size: .86rem; margin-top: 12px; }
#denunciaModal .dn-error.is-visible { display: block; }

/* Footer y botones */
#denunciaModal .modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--dn-linea);
    background: #fff;
}
#denunciaModal .dn-btn {
    border-radius: 8px;
    padding: 11px 22px;
    font-size: .98rem;
    font-weight: bold;
    margin: 0;
    border: 2px solid var(--dn-azul);
    transition: background-color .2s, color .2s, border-color .2s;
}
#denunciaModal .dn-btn--primary { background: var(--dn-azul); color: #fff; margin-left: auto; }
#denunciaModal .dn-btn--primary:hover { background: var(--dn-azul-oscuro); border-color: var(--dn-azul-oscuro); color: #fff; }
#denunciaModal .dn-btn--final { background: var(--dn-ambar); border-color: var(--dn-ambar); color: var(--dn-azul); margin-left: auto; }
#denunciaModal .dn-btn--final:hover { background: var(--dn-azul); border-color: var(--dn-azul); color: #fff; }
#denunciaModal .dn-btn--ghost { background: #fff; color: var(--dn-azul); }
#denunciaModal .dn-btn--ghost:hover { background: var(--dn-fondo); color: var(--dn-azul); }
#denunciaModal .dn-btn[hidden] { display: none; }
#denunciaModal .dn-btn:disabled { opacity: .6; cursor: wait; }
#denunciaModal .dn-btn:focus-visible { outline: 3px solid var(--dn-ambar); outline-offset: 2px; }

/* Móvil: modal a pantalla completa */
@media (max-width: 575.98px) {
    #denunciaModal .modal-content { border-radius: 0; height: 100%; }
    #denunciaModal .modal-body { padding: 20px 16px; }
    #denunciaModal .modal-header { padding: 16px; }
    #denunciaModal .modal-footer { padding: 12px 16px; }
    #denunciaModal .dn-options { grid-template-columns: 1fr; }
    #denunciaModal .dn-btn { flex: 1; }
    #denunciaModal .dn-file { flex-direction: column; align-items: stretch; gap: 4px; }
    #denunciaModal .dn-file label { flex: none; }
}