/* site-14-data-tables.css: Data tables, check lists, narrow forms, acting officer (42-45 of the new UI).
   Part of the old site.css, split by sections (same order: _Styles.cshtml links them one after the other,
   so the cascade is exactly the same). */

/* =====================================================================
   42. DATA TABLES (list pages: Testimonios, Ciudadanos, Dependencias, Fiscalías, Usuarios)
   ---------------------------------------------------------------------
   One look for every list: navy header with "Volver", a white toolbar card (search, total,
   page size, "Nuevo") and a white table card with sortable headers, row menu (⋮) and a footer
   "Mostrando X a Y de Z" with numbered pages. Markup: Models/Common/DataTable.cs,
   TagHelpers/SortHeaderTagHelper.cs, Pages/Shared/_DataTable*.cshtml, js/dataTable.js.
   ===================================================================== */
body.page-photo {
    --dt-navy: #1b3570;
    --dt-navy-2: #21427f;
    --dt-blue: #1d5cf5;
    --dt-blue-hover: #1649cf;
    --dt-blue-soft: #e8effd;
    --dt-blue-line: #cddbf6;
    --dt-ink: #1e2f4f;
    --dt-text: #2b3a55;
    --dt-muted: #66758c;
    --dt-line: #e3e9f2;
    --dt-row-line: #edf1f6;
    --dt-head: #eef3fa;
    --dt-hover: #f6f9fe;
}

/* --- Header: navy card, white title, "Volver" on the right --- */
body.page-photo .page-header-modern.dt-header {
    margin-bottom: 24px;
    padding: 26px 32px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(120deg, var(--dt-navy) 0%, var(--dt-navy-2) 100%);
    box-shadow: 0 12px 28px -18px rgba(15, 35, 80, 0.7);
}

    body.page-photo .page-header-modern.dt-header .page-icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border: 0;
        border-radius: 12px;
        background: #fff;
        color: var(--dt-blue);
        font-size: 1.45rem;
    }

    body.page-photo .page-header-modern.dt-header .page-title-container h2 {
        color: #fff;
        font-size: 1.55rem;
        font-weight: 700;
    }

    body.page-photo .page-header-modern.dt-header .page-title-container p {
        margin-top: 4px;
        color: #c8d5ee;
        font-size: 0.92rem;
    }

.dt-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 14px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

    .dt-back:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: #fff;
        color: #fff;
    }

/* --- White cards of the page --- */
.dt-panel {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 20px;
    padding: 24px;
    border: 1px solid var(--dt-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -22px rgba(15, 35, 80, 0.35);
}

/* --- Toolbar --- */
.dt-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 28px;
}

.dt-toolbar > form {
    width: auto;
    max-width: none;
    margin: 0;
}

.dt-toolbar > .dt-search {
    max-width: 720px;
}

.dt-search {
    position: relative;
    flex: 1 1 320px;
    max-width: 720px;
}

    .dt-search > .bi-search {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
        color: var(--dt-blue);
        font-size: 1.15rem;
        pointer-events: none;
    }

    body.page-photo .dt-search input.cool-input {
        width: 100%;
        height: 50px;
        padding: 0 46px 0 54px;
        border: 1px solid var(--dt-line);
        border-radius: 12px;
        background: #fff;
        color: var(--dt-ink);
        font-size: 0.98rem;
    }

        body.page-photo .dt-search input.cool-input::placeholder {
            color: #7d8ba1;
        }

        /* The native "x" of type=search: ours is drawn instead */
        .dt-search input::-webkit-search-cancel-button {
            display: none;
        }

.dt-search-clear {
    position: absolute;
    top: 50%;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7a90;
    font-size: 1.05rem;
    transform: translateY(-50%);
    cursor: pointer;
}

    .dt-search-clear:hover {
        background: #f1f5fb;
        color: var(--dt-ink);
    }

    .dt-search-clear[hidden] {
        display: none;
    }

/* "Total de registros  4" */
.dt-total {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 12px;
    background: #f3f6fb;
    color: var(--dt-muted);
    font-size: 0.88rem;
    white-space: nowrap;
}

.dt-total-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #dde7fa;
    color: var(--dt-navy);
    font-size: 0.9rem;
    font-weight: 700;
}

.dt-divider {
    align-self: stretch;
    width: 1px;
    min-height: 44px;
    background: var(--dt-line);
}

/* "Mostrar por página" */
.dt-size {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    body.page-photo .dt-size label {
        margin: 0;
        color: var(--dt-muted);
        font-size: 0.8rem;
        font-weight: 500;
    }

    body.page-photo .dt-size select.cool-input {
        width: 112px;
        height: 42px;
        padding: 0 36px 0 14px;
        border: 1px solid var(--dt-line);
        border-radius: 10px;
        color: var(--dt-ink);
        font-size: 0.95rem;
    }

/* Extra filters of a list (Usuarios: rol y estado) sit in the toolbar too */
.dt-toolbar .filter-drop {
    flex: 0 0 auto;
}

.dt-new {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    margin-left: auto;
    padding: 0 26px;
    border: 0;
    border-radius: 12px;
    background: var(--dt-blue);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 20px -12px rgba(29, 92, 245, 0.9);
    transition: var(--transition);
}

    .dt-new i {
        font-size: 1.25rem;
    }

    .dt-new:hover {
        background: var(--dt-blue-hover);
        color: #fff;
        transform: translateY(-1px);
    }

/* --- Table card --- */
.dt-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--dt-line);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

.dt-table {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border-collapse: collapse;
    color: var(--dt-text);
}

    .dt-table thead th {
        padding: 18px 24px;
        border-bottom: 1px solid var(--dt-line);
        background: var(--dt-head);
        color: var(--dt-ink);
        font-size: 0.95rem;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
    }

    .dt-table th.dt-center,
    .dt-table td.dt-center {
        text-align: center;
    }

    .dt-table tbody td {
        padding: 14px 24px;
        border-bottom: 1px solid var(--dt-row-line);
        background: #fff;
        font-size: 0.95rem;
        vertical-align: middle;
    }

    .dt-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .dt-table tbody tr:hover td {
        background: var(--dt-hover);
    }

/* Sortable header: the whole label is the link; the icon shows the state */
.dt-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

    .dt-sort i {
        color: #7b8aa3;
        font-size: 0.85rem;
    }

    .dt-sort:hover,
    .dt-sort.is-active {
        color: var(--dt-blue);
    }

        .dt-sort:hover i,
        .dt-sort.is-active i {
            color: var(--dt-blue);
        }

/* First cell: round icon / initials + name (and a second line) */
.dt-person {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.dt-avatar {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dt-blue-soft);
    color: var(--dt-blue);
    font-size: 1.05rem;
    font-weight: 700;
}

.dt-avatar--text {
    font-size: 0.8rem;
}

.dt-name {
    color: var(--dt-ink);
    font-weight: 500;
}

.dt-sub {
    display: block;
    color: var(--dt-muted);
    font-size: 0.82rem;
}

.dt-muted {
    color: #94a3b8;
}

/* Small states inside a cell */
.dt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #f1f5fb;
    color: var(--dt-text);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.dt-chip--on {
    background: #e3f6ec;
    color: #15803d;
}

.dt-chip--off {
    background: #fdeaea;
    color: #b91c1c;
}

/* Square icon button (PDF, ver) */
.dt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--dt-blue-line);
    border-radius: 10px;
    background: var(--dt-blue-soft);
    color: var(--dt-blue);
    font-size: 1.15rem;
    text-decoration: none;
    transition: var(--transition);
}

    .dt-icon-btn:hover {
        border-color: var(--dt-blue);
        background: var(--dt-blue);
        color: #fff;
    }

/* --- Row menu (⋮) --- */
.dt-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--dt-line);
    border-radius: 10px;
    background: #f7f9fc;
    color: var(--dt-ink);
    font-size: 1.1rem;
    transition: var(--transition);
}

    .dt-menu-btn:hover,
    .dt-menu-btn[aria-expanded="true"] {
        border-color: var(--dt-blue-line);
        background: var(--dt-blue-soft);
        color: var(--dt-blue);
    }

.dt-menu.dropdown-menu {
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--dt-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 40px -16px rgba(15, 35, 80, 0.35);
}

    .dt-menu form {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .dt-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 9px 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--dt-text);
        font-size: 0.9rem;
        text-align: left;
    }

        .dt-menu .dropdown-item i {
            width: 18px;
            color: var(--dt-muted);
            font-size: 1rem;
        }

        .dt-menu .dropdown-item:hover,
        .dt-menu .dropdown-item:focus {
            background: var(--dt-blue-soft);
            color: var(--dt-blue);
        }

            .dt-menu .dropdown-item:hover i,
            .dt-menu .dropdown-item:focus i {
                color: var(--dt-blue);
            }

    .dt-menu .dropdown-item.is-danger,
    .dt-menu .dropdown-item.is-danger i {
        color: #c2410c;
    }

        .dt-menu .dropdown-item.is-danger:hover {
            background: #fdeee6;
            color: #b42318;
        }

    .dt-menu .dropdown-divider {
        margin: 6px 4px;
        border-color: var(--dt-row-line);
    }

    .dt-menu .dropdown-header {
        padding: 6px 12px 4px;
        color: var(--dt-muted);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

/* --- Expandable row (Fiscalías: the units of a court) --- */
.dt-expand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--dt-line);
    border-radius: 999px;
    background: #f7f9fc;
    color: var(--dt-ink);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

    .dt-expand i {
        transition: transform 0.2s ease;
    }

    .dt-expand[aria-expanded="true"] {
        border-color: var(--dt-blue-line);
        background: var(--dt-blue-soft);
        color: var(--dt-blue);
    }

        .dt-expand[aria-expanded="true"] i {
            transform: rotate(90deg);
        }

.dt-table tbody tr.dt-detail > td {
    padding: 0 24px 18px 78px;
    background: var(--dt-hover);
}

.dt-subtable {
    width: 100%;
    border: 1px solid var(--dt-line);
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #fff;
}

    .dt-subtable th,
    .dt-subtable td {
        padding: 10px 16px !important;
        border-bottom: 1px solid var(--dt-row-line);
        font-size: 0.88rem !important;
        text-align: left;
    }

    .dt-subtable th {
        background: #f7f9fc !important;
        color: var(--dt-muted) !important;
        font-weight: 600 !important;
    }

    .dt-subtable tr:last-child td {
        border-bottom: 0;
    }

/* --- Footer: "Mostrando 1 a 4 de 4 registros" + pages --- */
.dt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--dt-line);
    color: var(--dt-muted);
    font-size: 0.92rem;
}

.dt-table-wrap + .dt-footer {
    margin-top: -1px;
    border: 1px solid var(--dt-line);
    border-top: 0;
    border-radius: 0 0 12px 12px;
}

.dt-table-wrap:has(+ .dt-footer) {
    border-radius: 12px 12px 0 0;
}

.dt-pager {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dt-pager a,
    .dt-pager span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        height: 38px;
        padding: 0 8px;
        border-radius: 9px;
        background: #f1f5fb;
        color: var(--dt-ink);
        font-size: 0.92rem;
        font-weight: 600;
        text-decoration: none;
        transition: var(--transition);
    }

        .dt-pager a:hover {
            background: var(--dt-blue-soft);
            color: var(--dt-blue);
        }

        .dt-pager .is-current {
            background: var(--dt-blue);
            color: #fff;
        }

        .dt-pager .is-disabled {
            color: #b4bfcf;
            pointer-events: none;
        }

        .dt-pager .is-gap {
            min-width: 20px;
            padding: 0;
            background: transparent;
            color: var(--dt-muted);
        }

/* --- Empty list --- */
.dt-empty {
    padding: 48px 24px;
    color: var(--dt-muted);
    text-align: center;
}

    .dt-empty i {
        display: block;
        margin-bottom: 10px;
        color: #a8b6cc;
        font-size: 2.2rem;
    }

    .dt-empty h3 {
        margin: 0 0 6px;
        color: var(--dt-ink);
        font-size: 1.05rem;
        font-weight: 700;
    }

    .dt-empty p {
        margin: 0;
    }

/* --- Summaries in the tables (Libro Judicial, Mis Sumarios) --- */
.dt-code {
    color: #0f766e;
    font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
    font-weight: 700;
    white-space: nowrap;
}

.dt-cover {
    min-width: 220px;
}

.dt-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.dt-flag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #fdeaea;
    color: #b91c1c;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dt-flag--priority {
    background: #fff4e5;
    color: #b45309;
}

.dt-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.dt-status--draft { background: #eef2f8; color: #334155; }
.dt-status--supervisor { background: #ede9fe; color: #6d28d9; }
.dt-status--consultation { background: #e8effd; color: #1d4ed8; }
.dt-status--directives { background: #fff4e5; color: #b45309; }
.dt-status--definitive { background: #e3f6ec; color: #15803d; }
.dt-status--archived { background: #f1f5f9; color: #64748b; }

/* Directive items still to do, next to the status */
.dt-status-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #b45309;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

/* The whole row opens the summary (complaintCard.js) */
.dt-table tbody tr[data-url] {
    cursor: pointer;
}

    .dt-table tbody tr[data-url]:focus-visible td {
        background: var(--dt-hover);
        outline: none;
        box-shadow: inset 3px 0 0 var(--dt-blue);
    }


/* --- One card, not two: the table fills its panel ---
   The panel that holds a table loses its padding and the table its own border and corners;
   the panel clips the corners (the ⋮ menus are position: fixed, so they are not cut).
   A panel with the empty message (no table) keeps its padding. */
.dt-panel:has(.dt-table-wrap) {
    padding: 0;
    overflow: hidden;
}

    .dt-panel .dt-table-wrap,
    .dt-panel .dt-table-wrap:has(+ .dt-footer) {
        border: 0;
        border-radius: 0;
    }

    .dt-panel .dt-table-wrap + .dt-footer {
        margin-top: 0;
        border: 0;
        border-top: 1px solid var(--dt-line);
        border-radius: 0;
    }

/* --- Wide tables (Libro Judicial: 9 columns): tighter cells so they fit without scrolling --- */
.dt-table--wide {
    min-width: 880px;
}

    /* Long titles ("Fecha y hora", "Comisionado") may take two lines instead of pushing the table out */
    .dt-table--wide thead th {
        padding: 14px 12px;
        font-size: 0.86rem;
        white-space: normal;
        line-height: 1.25;
    }

        .dt-table--wide thead th .dt-sort i {
            flex: 0 0 auto;
        }

    .dt-table--wide tbody td {
        padding: 12px 12px;
        font-size: 0.88rem;
    }

        .dt-table--wide thead th:first-child,
        .dt-table--wide tbody td:first-child {
            padding-left: 24px;
        }

    .dt-table--wide .dt-cover {
        min-width: 160px;
    }

/* --- "Agregar fiscalía" inside the opened row of a court (Tribunales y Fiscalías) --- */
.dt-detail-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 14px;
    border: 1px dashed var(--dt-blue-line);
    border-radius: 10px;
    background: #fff;
    color: var(--dt-blue);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

    .dt-detail-add:hover {
        border-style: solid;
        border-color: var(--dt-blue);
        background: var(--dt-blue-soft);
        color: var(--dt-blue);
    }

/* --- Small screens --- */
@media (max-width: 991.98px) {
    .dt-new {
        margin-left: 0;
    }

    .dt-divider {
        display: none;
    }
}

@media (max-width: 575.98px) {
    body.page-photo .page-header-modern.dt-header {
        padding: 20px;
    }

    .dt-panel {
        padding: 16px;
    }

    .dt-search,
    .dt-new {
        flex: 1 1 100%;
        justify-content: center;
    }

    .dt-footer {
        justify-content: center;
    }
}


/* =====================================================================
   43. CHECKBOX LISTS ON THE LIGHT PAGES (Nuevo / Editar usuario: dependencias que supervisa)
   ===================================================================== */
body.page-photo .check-groups,
body.page-photo .check-grid {
    border-color: var(--light-field-border);
    background: #fff;
}

body.page-photo .check-groups .check-grid {
    background: transparent;
}

body.page-photo .check-group-title {
    color: var(--light-muted);
}

body.page-photo .check-item {
    border-color: var(--light-field-border);
    background: #f8fafc;
    color: var(--light-ink-soft);
}

    body.page-photo .check-item:hover {
        border-color: #b9c6da;
        background: #eef2f8;
        color: var(--light-ink);
    }

    body.page-photo .check-item input {
        background-color: #fff;
        border-color: #94a3b8;
    }

        body.page-photo .check-item input:checked {
            background-color: var(--light-accent);
            border-color: var(--light-accent);
        }

    body.page-photo .check-item:has(input:checked) {
        border-color: rgba(29, 78, 216, 0.35);
        background: rgba(29, 78, 216, 0.07);
        color: var(--light-ink);
        font-weight: 600;
    }


/* =====================================================================
   44. NARROW FORMS (Cambiar contraseña) AND FORM NOTICES
   ===================================================================== */
/* A short form does not need the whole width: header and form centered together */
.narrow-page {
    width: 100%;
    max-width: 580px;
    margin: 24px auto 0;
}

/* A notice at the top of a form (e.g. temporary password) */
.form-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.45;
}

    .form-alert i {
        margin-top: 2px;
        font-size: 1rem;
    }

.form-alert--warning {
    border-color: rgba(180, 83, 9, 0.28);
    background: #fff8eb;
    color: #92400e;
}


/* =====================================================================
   45. ACTING OFFICER OF A POLICE ACT (summary on top of the act form)
   ===================================================================== */
.officer-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--light-field-border, #d3dbe6);
    border-radius: 10px;
    background: #fff;
}

.officer-avatar {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e8effd;
    color: #1d4ed8;
    font-size: 1.15rem;
}

.officer-text {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.officer-name {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
}

.officer-sub {
    color: #64748b;
    font-size: 0.85rem;
}

@media (max-width: 575.98px) {
    .officer-summary {
        flex-wrap: wrap;
    }
}

/* =====================================================================
    46. AUTHENTICATOR SET UP (Pages/Account/SetupAuthenticator)
   ===================================================================== */
.authenticator-steps {
    padding-left: 1.25rem;
    display: grid;
    gap: 1.25rem;
}

.authenticator-qr {
    display: flex;
    justify-content: center;
    margin: 1rem 0 0.75rem;
}

.authenticator-qr img {
    background: #fff;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.authenticator-manual summary {
    cursor: pointer;
    font-size: 0.9rem;
}

.authenticator-key {
    font-size: 1rem;
    letter-spacing: 0.08em;
    word-break: break-all;
}

.authenticator-confirm {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    max-width: 360px;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 2rem;
    padding-left: 1.5rem;
    font-size: 1.1rem;
}

.recovery-codes code {
    letter-spacing: 0.1em;
    color: inherit;
}

.form-alert--success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

@media print {
    .sidebar, .app-navbar, .page-header-modern, .btn { display: none !important; }
}

/* =====================================================================
    47. LOGIN WITH THE LOOK OF THE APP (Login and VerifyCode, body.page-photo)
   ---------------------------------------------------------------------
   The same photo of every page (--app-bg-image, section 37) and the same light form of the
   rest of the app (section 41): navy title band with the shield, tinted body, white fields,
   flat blue button. It overrides the old dark glass card of section 20.
   ===================================================================== */
body.page-photo .auth-page {
    background: none;              /* the body already has the app photo */
}

body.page-photo .auth-card {
    max-width: 440px;
    background: var(--light-form-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--light-form-border);
    border-radius: 10px;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.45);
    color: var(--light-ink);
}

    body.page-photo .auth-card::before {
        display: none;
    }

/* --- Brand band: shield + name, like the top bar of the app --- */
.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 28px;
    background: var(--light-form-head, #e3eaf4);
    border-bottom: 1px solid var(--light-form-border, #dbe3ee);
}

.auth-brand-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
}

.auth-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.auth-brand-title {
    color: var(--light-ink, #1e293b);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.auth-brand-subtitle {
    color: var(--light-muted, #64748b);
    font-size: 0.8rem;
}

/* --- Panel --- */
body.page-photo .auth-panel {
    padding: 24px 28px 26px;
}

body.page-photo .auth-panel-head {
    align-items: flex-start;
    text-align: left;
}

    body.page-photo .auth-panel-head h1 {
        color: var(--light-ink);
        font-size: 1.35rem;
    }

    body.page-photo .auth-panel-head p {
        color: var(--light-muted);
    }

body.page-photo .auth-field label {
    color: var(--light-ink-soft);
    letter-spacing: 0.04em;
}

/* --- Fields: white, like every form of the app --- */
body.page-photo .auth-form .auth-input .cool-input {
    background: var(--light-field-bg);
    border: 1px solid var(--light-field-border);
    color: var(--light-ink);
}

    body.page-photo .auth-form .auth-input .cool-input::placeholder {
        color: #94a3b8;
    }

    body.page-photo .auth-form .auth-input .cool-input:hover {
        border-color: #b8c4d4;
    }

    body.page-photo .auth-form .auth-input .cool-input:focus {
        background: #fff;
        border-color: var(--light-accent);
        box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
    }

body.page-photo .auth-input-icon {
    color: var(--light-muted);
}

body.page-photo .auth-input:focus-within .auth-input-icon {
    color: var(--light-accent);
}

body.page-photo .auth-input-toggle {
    color: var(--light-muted);
}

    body.page-photo .auth-input-toggle:hover {
        background: #e2e8f0;
        color: var(--light-accent);
    }

body.page-photo .auth-capslock {
    color: #b45309;
}

/* --- Errors: the light red notice of the forms --- */
body.page-photo .auth-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
}

    body.page-photo .auth-alert > i {
        color: #dc2626;
    }

body.page-photo .auth-field-error {
    color: #b91c1c;
}

/* --- Button: flat blue, like "Guardar" --- */
body.page-photo .btn-auth-submit {
    background: var(--light-accent);
    border: 1px solid var(--light-accent);
    border-radius: 8px;
    box-shadow: none;
}

    body.page-photo .btn-auth-submit:hover {
        background: var(--light-accent-hover);
        border-color: var(--light-accent-hover);
        box-shadow: 0 6px 16px -8px rgba(29, 78, 216, 0.7);
    }

/* --- Footer and the options of the code page --- */
body.page-photo .auth-panel-foot {
    align-items: flex-start;
    text-align: left;
    border-top: 1px solid var(--light-line);
    color: var(--light-muted);
}

    body.page-photo .auth-panel-foot i {
        color: #15803d;
    }

body.page-photo .auth-help {
    color: var(--light-accent);
}

body.page-photo .auth-alternatives {
    text-align: left;
}

    body.page-photo .auth-alternatives .btn-link,
    body.page-photo .auth-recovery summary {
        color: var(--light-accent);
        opacity: 1;
        text-decoration: none;
    }

    body.page-photo .auth-alternatives .btn-link:hover,
    body.page-photo .auth-recovery summary:hover {
        text-decoration: underline;
    }

body.page-photo .auth-recovery small {
    color: var(--light-muted);
}

body.page-photo .auth-recovery-form .cool-input {
    background: #fff;
    border: 1px solid var(--light-field-border);
    color: var(--light-ink);
}

@media (max-width: 480px) {
    .auth-brand {
        padding: 14px 18px;
    }

    body.page-photo .auth-panel {
        padding: 18px 18px 22px;
    }
}

body.page-photo .auth-recovery-form .btn {
    white-space: nowrap;
}

/* =====================================================================
    48. SUMARIO CON PRIORIDAD — fila resaltada en rojo muy suave
   ---------------------------------------------------------------------
   El fondo va en las celdas (td) porque el hover de la tabla también lo hace ahí.
   Amarillo muy suave a propósito: se nota la prioridad sin necesidad de texto.
   Un filete ámbar a la izquierda ayuda. (Un sumario con preso es siempre prioritario.)
   ===================================================================== */
.dt-table tbody tr.dt-row--priority td {
    background: #fffdf7;
}

    .dt-table tbody tr.dt-row--priority:hover td {
        background: #fdf6e0;
    }

    .dt-table tbody tr.dt-row--priority td:first-child {
        box-shadow: inset 3px 0 0 #f59e0b;
    }

/* Misma marca de prioridad en la tarjeta del fiscal (ProsecutorReview, que no es tabla) */
body.page-photo .complaint-card.complaint-card--priority {
    background: #fffdf7;
    border-left: 3px solid #f59e0b;
}

/* =====================================================================
    49. VISTA PREVIA DE LA DENUNCIA (dentro del paso "Revisar y guardar")
   ===================================================================== */
.wizard-preview {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--light-line, #e2e8f0);
}

.wizard-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wizard-preview-title {
    font-weight: 700;
    color: var(--light-ink, #1e293b);
}

.wizard-preview-status {
    font-size: 0.82rem;
    color: var(--light-muted, #64748b);
}

    .wizard-preview-status.is-loading { color: var(--light-accent, #1d4ed8); }
    .wizard-preview-status.is-ok { color: #15803d; }
    .wizard-preview-status.is-error { color: #b91c1c; }

.wizard-preview-hint {
    color: var(--light-muted, #64748b);
    font-size: 0.85rem;
    margin: 2px 0 10px;
}

.preview-shell {
    position: relative;
    min-height: 120px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--light-form-border, #dbe3ee);
    background: #525659;
}

    /* Hasta que carga el primer PDF, el iframe no ocupa lugar */
    .preview-shell:not(.is-ready) .preview-frame { display: none; }

    .preview-shell.is-loading::after {
        content: "Generando la vista previa…";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.9rem;
        background: #525659;
    }

.preview-frame {
    width: 100%;
    height: 72vh;
    border: 0;
    background: #525659;
}

/* Filas clickeables (tr con data-url, ej. lista de ciudadanos) */
.dt-table tbody tr.is-clickable { cursor: pointer; }