/* site-13-light-pages.css: Light pages: forms, cards, lists, judicial book, priority flag, step form (41-49).
   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). */

/* =====================================================================
   41. LIGHT PAGES (body.page-photo) — the app moves to the light style screen by screen
   ---------------------------------------------------------------------
   A page joins with ViewData["BodyClass"] = "page-photo": photo background (--app-bg-image),
   solid top bar, and here its forms: plain header, white card, grey labels without icons,
   white fields, flat buttons. Sober on purpose: no gradients, no glows, small radius.
   ===================================================================== */
body.page-photo {
    --light-ink: #1e293b;            /* dark slate, not pure black */
    --light-ink-soft: #334155;
    --light-muted: #64748b;
    --light-line: #e2e8f0;
    --light-field-border: #d3dbe6;
    --light-field-bg: #ffffff;       /* white fields: they stand out on the tinted form */
    /* The form is the tinted block on a (nearly) white page. Change these two to try another color */
    --light-form-bg: #eef2f8;        /* body of the form */
    --light-form-head: #e3eaf4;      /* band of the title */
    --light-form-border: #dbe3ee;
    --light-accent: #1d4ed8;
    --light-accent-hover: #1e40af;
    color-scheme: light;            /* date pickers and scrollbars in light mode */
}

/* The browser draws the suggestion lists (datalist) and pickers with the colors of the WHOLE page:
   the html element must be light too, otherwise the suggestions come out white on white */
html:has(body.page-photo) {
    color-scheme: light;
}

/* --- Page header: no decoration --- */

    body.page-photo .page-header-modern::after,
    body.page-photo .page-header-modern::before {
        display: none;
    }

body.page-photo .page-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border: 1px solid var(--light-line);
    border-radius: 8px;
    background: #fff;
    color: var(--light-accent);
    font-size: 1.3rem;
    box-shadow: none;
}

body.page-photo .page-header-modern:hover .page-icon {
    transform: none;
}

body.page-photo .page-title-container h2 {
    color: var(--light-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

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

/* --- Page header of the light pages: a band card (title in navy, subtitle grey) ---
   When it is right above a form it becomes the top of that same block (no gap, square bottom). */
body.page-photo .page-header-modern {
    margin-bottom: 16px;
    padding: 20px 32px;
    border: 1px solid var(--light-form-border);
    border-radius: 8px;
    background: var(--light-form-head);
}

body.page-photo .page-header-modern {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transform: none;
}

/* Joined to the form below: directly (CreatePerson) or to the first block inside a <form> (complaints) */
body.page-photo .page-header-modern:has(+ .form-container),
body.page-photo .page-header-modern:has(+ form > .form-container) {
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}

    body.page-photo .page-header-modern .page-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border: 1px solid #d3def0;
        background: #fff;
        color: var(--light-accent);
        font-size: 1.2rem;
    }

    /* Title in navy blue and a lighter weight: present, but not a black block */
    body.page-photo .page-header-modern .page-title-container h2 {
        color: #1e3a66;
        font-size: 1.3rem;
        font-weight: 600;
        letter-spacing: 0;
    }

    body.page-photo .page-header-modern .page-title-container p {
        margin-top: 2px;
        color: #5b6b82;
        font-size: 0.88rem;
    }

body.page-photo .page-header-modern + .form-container {
    border-top: 0;
    border-radius: 0 0 8px 8px;
}

/* The first block of a form right under the header (the next blocks keep their gap) */
body.page-photo .page-header-modern + form > .form-container:not(.form-container ~ .form-container) {
    border-top: 0;
    border-radius: 0 0 8px 8px;
}

/* The empty error box at the top of the form takes space for nothing */
body.page-photo .validation-summary-valid {
    display: none;
}

/* --- The form: a white sheet --- */
body.page-photo .form-container {
    padding: 28px 32px;
    border: 1px solid var(--light-form-border);
    border-radius: 8px;
    background: var(--light-form-bg);
    color: var(--light-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

    body.page-photo .form-container:hover {
        transform: none;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    }

body.page-photo .form-section-title {
    min-height: 0;
    margin: 8px 0 18px;
    padding: 0 0 10px;
    position: relative;
    border-bottom: 1px solid var(--light-form-border);
    color: var(--light-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}



    /* The first section starts right at the top (hidden fields and the error box come before it) */
    body.page-photo .form-container .form-section-title:first-of-type {
        margin-top: 0 !important;
    }

    body.page-photo .form-section-title:not(:first-child) {
        margin-top: 32px;
    }

body.page-photo .form-container label {
    color: var(--light-ink-soft);
    font-size: 0.85rem;
    font-weight: 600;
}

    /* An icon next to every label is noise: only the text stays */
    body.page-photo .form-container label > i {
        display: none;
    }

body.page-photo .field-hint,
body.page-photo .form-container .text-muted,
body.page-photo .form-container small {
    color: var(--light-muted) !important;
}

/* --- Fields --- */
body.page-photo .cool-input,
body.page-photo .form-control,
body.page-photo .form-select {
    background-color: var(--light-field-bg);
    color: var(--light-ink);
    border: 1px solid var(--light-field-border);
    border-radius: 6px;
    box-shadow: none;
}

    body.page-photo .cool-input:hover,
    body.page-photo .form-control:hover,
    body.page-photo .form-select:hover {
        background-color: var(--light-field-bg);
        border-color: #94a3b8;
    }

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

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

    body.page-photo .cool-input:disabled,
    body.page-photo .cool-input[readonly] {
        background-color: #eef1f5;
        color: var(--light-muted);
    }

body.page-photo select.cool-input {
    background-color: var(--light-field-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 15px;
}

body.page-photo .cool-input option {
    background-color: #fff;
    color: var(--light-ink);
}

/* Search button next to DNI / name: grey, flat, blue icon (the base rule uses ids and !important) */
body.page-photo .input-group > .btn,
body.page-photo #btnSearchDni,
body.page-photo #btnSearchName {
    width: 44px !important;
    height: auto;
    border: 1px solid var(--light-field-border) !important;
    border-left: 0 !important;
    border-radius: 0 6px 6px 0 !important;
    background: #f8fafc !important;
    color: var(--light-accent) !important;
    box-shadow: none;
}

    body.page-photo .input-group > .btn:hover,
    body.page-photo #btnSearchDni:hover,
    body.page-photo #btnSearchName:hover {
        background: #eef2f7 !important;
        color: var(--light-accent-hover) !important;
    }

body.page-photo .input-group > .cool-input {
    border-radius: 6px 0 0 6px;
}

    /* Search boxes without the dark error look */
    body.page-photo .input-group .cool-input.input-validation-error,
    body.page-photo .input-group .cool-input.input-validation-error:hover {
        background: var(--light-field-bg) !important;
        border-color: var(--light-field-border) !important;
        box-shadow: none !important;
    }

    body.page-photo .input-group .cool-input.input-validation-error:focus {
        background: #fff !important;
        border-color: var(--light-accent) !important;
        box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12) !important;
    }

/* --- Buttons: flat --- */
body.page-photo .btn-primary-modern {
    border: 1px solid var(--light-accent);
    border-radius: 6px;
    background: var(--light-accent);
    color: #fff;
    box-shadow: none;
}

    body.page-photo .btn-primary-modern:hover {
        border-color: var(--light-accent-hover);
        background: var(--light-accent-hover);
        color: #fff;
        transform: none;
        box-shadow: none;
    }

body.page-photo .btn-secondary-modern {
    border: 1px solid var(--light-field-border);
    border-radius: 6px;
    background: #fff;
    color: var(--light-ink-soft);
    box-shadow: none;
}

    body.page-photo .btn-secondary-modern:hover {
        border-color: #94a3b8;
        background: #f8fafc;
        color: var(--light-ink);
        transform: none;
    }

/* The section titles already have their line: the separators between sections would double it */
body.page-photo .form-container hr {
    display: none;
}


/* =====================================================================
   42. LIGHT PAGES — pieces of the complaint forms (participants, checks, questionnaire, dates)
   ---------------------------------------------------------------------
   Inside the content of a light page the dark theme variables become light ones, so every
   component that uses var(--text), var(--border)... turns light by itself. The top bar and the
   side menu are outside .app-main-content and keep their colors.
   ===================================================================== */
body.page-photo .app-main-content {
    --text: #1e293b;
    --text-soft: #475569;
    --muted: #64748b;
    --border: #dbe3ee;
    --border-light: #d3dbe6;
    --panel: var(--light-form-bg);
    --panel-2: #ffffff;
    --panel-3: #e3eaf4;
    --input-bg: #ffffff;
    --input-bg-focus: #ffffff;
    --input-border: #d3dbe6;
    --input-text: #1e293b;
    --input-placeholder: #94a3b8;
    --row-1: #ffffff;
    --row-2: #f6f8fb;
    --row-hover: rgba(29, 78, 216, 0.06);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --form-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Several sections in a row (complaints): the same block color, a little air between them */
body.page-photo form > .form-container + .form-container {
    margin-top: 16px;
}

/* --- Victims / accused: white cards inside the tinted form --- */
body.page-photo .victim-card,
body.page-photo .accused-card {
    border: 1px solid var(--light-form-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
}

body.page-photo .victim-title,
body.page-photo .accused-title {
    color: #1e3a66 !important;
}

    body.page-photo .victim-title i,
    body.page-photo .accused-title i {
        color: var(--light-accent);
    }

/* --- Check boxes with explanation (acción penal, con preso, mismo domicilio...) --- */
body.page-photo .same-address-box {
    border: 1px solid var(--light-form-border);
    border-left: 3px solid var(--light-accent);
    border-radius: 6px;
    background: #fff;
}

    body.page-photo .same-address-box .form-check-label,
    body.page-photo .same-address-box .fw-semibold {
        color: var(--light-ink);
    }

body.page-photo .form-check-input {
    border: 1.5px solid #94a3b8;
    background-color: #fff;
}

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

/* --- Violence questionnaire --- */
body.page-photo .q-list .q-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.6);
}

body.page-photo .q-children {
    border-left-color: rgba(29, 78, 216, 0.3);
}

body.page-photo .q-check:has(input:checked) {
    border-color: var(--light-accent);
    background: rgba(29, 78, 216, 0.06);
}

/* --- Date / time picker (flatpickr): light calendar --- */
html:has(body.page-photo) .flatpickr-calendar {
    border: 1px solid var(--light-form-border, #dbe3ee);
    background: #fff;
    color: #1e293b;
    box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.35);
}

html:has(body.page-photo) .flatpickr-months .flatpickr-month,
html:has(body.page-photo) .flatpickr-current-month .flatpickr-monthDropdown-months,
html:has(body.page-photo) .flatpickr-current-month input.cur-year,
html:has(body.page-photo) .flatpickr-weekdays,
html:has(body.page-photo) span.flatpickr-weekday {
    background: #fff;
    color: #1e293b;
    fill: #1e293b;
}

html:has(body.page-photo) .flatpickr-prev-month svg,
html:has(body.page-photo) .flatpickr-next-month svg {
    fill: #475569;
}

html:has(body.page-photo) .flatpickr-day {
    color: #1e293b;
}

    html:has(body.page-photo) .flatpickr-day:hover {
        border-color: #eef2f8;
        background: #eef2f8;
    }

    html:has(body.page-photo) .flatpickr-day.prevMonthDay,
    html:has(body.page-photo) .flatpickr-day.nextMonthDay,
    html:has(body.page-photo) .flatpickr-day.flatpickr-disabled {
        color: #b6c0cd;
    }

    html:has(body.page-photo) .flatpickr-day.today {
        border-color: var(--light-accent, #1d4ed8);
    }

    html:has(body.page-photo) .flatpickr-day.selected {
        border-color: #1d4ed8;
        background: #1d4ed8;
        color: #fff;
    }

html:has(body.page-photo) .flatpickr-time input,
html:has(body.page-photo) .flatpickr-time .flatpickr-am-pm,
html:has(body.page-photo) .flatpickr-time .flatpickr-time-separator {
    background: #fff;
    color: #1e293b;
}


/* =====================================================================
   43. LIGHT PAGES — time picker and participant blocks
   ===================================================================== */

/* The time field (flatpickr) had its own dark !important rules */
body.page-photo input.time-picker.form-control.cool-input,
body.page-photo input.time-picker.form-control.cool-input.flatpickr-input,
body.page-photo .flatpickr-alt-input.cool-input {
    border-color: var(--light-field-border) !important;
    background-color: #fff !important;
    color: var(--light-ink) !important;
}

    body.page-photo input.time-picker.form-control.cool-input:hover,
    body.page-photo .flatpickr-alt-input.cool-input:hover {
        border-color: #94a3b8 !important;
        background-color: #fff !important;
        color: var(--light-ink) !important;
    }

    body.page-photo input.time-picker.form-control.cool-input:focus,
    body.page-photo .flatpickr-alt-input.cool-input:focus,
    body.page-photo .flatpickr-input.active:focus {
        border-color: var(--light-accent) !important;
        background-color: #fff !important;
        color: var(--light-ink) !important;
        box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12) !important;
    }

/* The time dropdown (hour : minutes with arrows) */
html:has(body.page-photo) .flatpickr-calendar.noCalendar,
html:has(body.page-photo) .flatpickr-calendar .flatpickr-time {
    border-color: #dbe3ee !important;
    background: #fff !important;
}

html:has(body.page-photo) .flatpickr-calendar.noCalendar::before,
html:has(body.page-photo) .flatpickr-calendar.noCalendar::after {
    border-bottom-color: #fff !important;
}

html:has(body.page-photo) .flatpickr-time input,
html:has(body.page-photo) .flatpickr-time .flatpickr-time-separator,
html:has(body.page-photo) .flatpickr-time .flatpickr-am-pm {
    background: #fff !important;
    color: #1e293b !important;
}

    html:has(body.page-photo) .flatpickr-time input:hover,
    html:has(body.page-photo) .flatpickr-time input:focus,
    html:has(body.page-photo) .flatpickr-time .flatpickr-am-pm:hover {
        background: #eef2f8 !important;
    }

html:has(body.page-photo) .numInputWrapper span {
    border-color: #dbe3ee;
}

    html:has(body.page-photo) .numInputWrapper span.arrowUp::after {
        border-bottom-color: #64748b;
    }

    html:has(body.page-photo) .numInputWrapper span.arrowDown::after {
        border-top-color: #64748b;
    }

    html:has(body.page-photo) .numInputWrapper span:hover {
        background: #eef2f8;
    }

/* Sub-blocks of a victim / accused card (Datos personales, Domicilio, Nacimiento, Familia) */
.participant-subtitle {
    margin: 22px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

    .participant-subtitle:first-child {
        margin-top: 0;
    }

body.page-photo .participant-subtitle {
    border-bottom-color: var(--light-form-border);
    color: var(--light-muted);
}

/* =====================================================================
   44. Victim / accused card title = the same section title as every form
   ===================================================================== */
.participant-card-title {
    margin-top: 0 !important;
}

    .participant-card-title .victim-title,
    .participant-card-title .accused-title {
        color: inherit !important;
        font-size: inherit;
    }

    /* The icon goes plain (the blue mark of the section title is enough) */
    body.page-photo .participant-card-title > span > i {
        width: auto;
        height: auto;
        background: none;
        color: var(--light-accent);
    }

    .participant-card-title + .victim-fields .participant-subtitle:first-child,
    .participant-card-title + .accused-fields .participant-subtitle:first-child {
        margin-top: 0;
    }

/* Section titles of the light pages: plain blue icon, not the dark square of the dark theme */
body.page-photo .form-section-title > span > i {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: var(--light-accent);
}

/* =====================================================================
   45. Victim / accused: NO box inside the form (it looked like a form in
       a form). Each person is just a heading: "Damnificado #1" in navy,
       normal case and bigger, so it does not mix with the sub-blocks
       (DATOS PERSONALES, DIRECCIÓN, FAMILIA: small grey capitals).
       Between two people, a dividing line.
   ===================================================================== */
body.page-photo .victim-card,
body.page-photo .accused-card {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

    body.page-photo .victim-card + .victim-card,
    body.page-photo .accused-card + .accused-card,
    body.page-photo .victim-card + .accused-card {
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px dashed var(--light-form-border);
    }

body.page-photo .participant-card-title {
    min-height: 0;
    margin: 0 0 14px !important;
    padding: 0;
    border: 0;
    background: none;
    color: #1e3a66;
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

    body.page-photo .participant-card-title .victim-title,
    body.page-photo .participant-card-title .accused-title {
        color: #1e3a66 !important;
        font-size: 1.02rem;
    }


/* =====================================================================
   46. Hierarchy inside Damnificados / Acusados (smallest to biggest is wrong
       if a subtitle beats the section): 
       SECTION  (DAMNIFICADOS: small capitals with icon, line)       ← biggest weight
       Person   (Damnificado #1: navy, normal case, semibold)
       Sub-block(Datos personales: tiny grey text, no line)          ← lightest
   ===================================================================== */
body.page-photo .participant-card-title,
body.page-photo .participant-card-title .victim-title,
body.page-photo .participant-card-title .accused-title {
    font-size: 0.9rem !important;
    font-weight: 600;
}

/* Sub-blocks: same size, colour and line as the section titles, but in normal case */
body.page-photo .participant-subtitle {
    margin: 22px 0 14px !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--light-form-border) !important;
    color: #4a6fa5 !important;   /* soft blue: lighter than the navy of "Damnificado #1" */
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

    body.page-photo .participant-subtitle:first-child {
        margin-top: 0 !important;
    }


/* =====================================================================
   LIBRO JUDICIAL: una fila por sumario
   ---------------------------------------------------------------------
   Misma tabla que el resto del sistema. Cada celda puede llevar un
   renglón chico abajo (formato, ubicación, hora) para no sumar columnas.
   ===================================================================== */

.summary-table.all-tables--scroll table {
    min-width: 980px;
}

/* El número de sumario se lee como un número, no como texto */
.summary-table .summary-cell-code {
    color: #7ccfae;
    font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.summary-table .summary-cell-cover {
    min-width: 200px;
}

.summary-table .summary-cover-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    font-weight: 600;
}

/* El dato secundario de la celda: formato, ubicación, hora, pendientes */
.summary-table .summary-cell-sub {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.73rem;
    line-height: 1.3;
}

.summary-table .summary-cell-date {
    white-space: nowrap;
}

/* --- Estados: el ámbar queda para las directivas --- */
.summary-table .status-badge {
    white-space: nowrap;
}

    .summary-table .status-badge.is-directives {
        background: rgba(223, 168, 99, 0.12);
        border-color: rgba(223, 168, 99, 0.35);
        color: #dfa863;
    }

    .summary-table .status-badge.is-consultation {
        background: rgba(127, 195, 232, 0.12);
        border-color: rgba(127, 195, 232, 0.32);
        color: #8fc9ec;
    }

    .summary-table .status-badge.is-definitive {
        background: rgba(124, 207, 174, 0.12);
        border-color: rgba(124, 207, 174, 0.32);
        color: #85d3b4;
    }

    .summary-table .status-badge.is-archived {
        background: rgba(255, 255, 255, 0.04);
        border-color: var(--border);
        color: var(--muted);
    }

/* Emitir directivas desde el libro */
.btn-success-action {
    background: rgba(22, 201, 141, 0.1);
    color: var(--success);
    border-color: rgba(22, 201, 141, 0.22);
}

    .btn-success-action:hover {
        background: var(--success);
        color: #030712;
        border-color: var(--success);
    }

/* La fila entera abre el expediente */
.all-tables tbody tr[data-url] {
    cursor: pointer;
}

    .all-tables tbody tr[data-url]:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }


/* =====================================================================
   47. PÁGINAS CLARAS — el resto del sistema (listados, tarjetas, paneles)
   ---------------------------------------------------------------------
   La sección 41 pasó los formularios al estilo claro. Acá se dan vuelta
   las variables del tema: todo lo que usa --panel, --text, --border y
   compañía queda claro solo. Abajo, los pocos lugares que tenían el
   color escrito a mano y no podían seguir a las variables.
   ===================================================================== */
body.page-photo {
    /* Fondos y paneles */
    --bg: #f1f5f9;
    --bg-soft: #e8eef7;
    --panel: #ffffff;
    --panel-2: #f6f9fc;
    --panel-3: #eaf0f8;
    /* Texto */
    --text: #1e293b;
    --text-soft: #475569;
    --muted: #64748b;
    /* Bordes */
    --border: #dbe3ee;
    --border-light: #c3cfe0;
    /* Campos */
    --input-bg: #ffffff;
    --input-bg-focus: #ffffff;
    --input-border: #d3dbe6;
    --input-text: #1e293b;
    --input-placeholder: #94a3b8;
    /* Tablas */
    --row-1: #ffffff;
    --row-2: #f8fafc;
    --row-hover: #eaf1ff;
    /* Acentos: los mismos colores, en la versión que se lee sobre blanco */
    --primary-soft: #1d4ed8;
    --primary-glow: rgba(29, 78, 216, 0.08);
    --accent: #1d4ed8;
    --success: #15803d;
    --warning: #b45309;
    --danger: #b91c1c;
    --danger-glow: rgba(185, 28, 28, 0.1);
    --info: #0369a1;
    /* Sombras: apenas un apoyo, no un hueco negro */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.14);
    --shadow-lg: 0 18px 40px -18px rgba(15, 23, 42, 0.25);
    --shadow-glow: 0 0 0 1px rgba(29, 78, 216, 0.18);
    --form-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* --- Barra de herramientas y solapas --- */
body.page-photo .page-badge {
    background: #fff;
    border-color: #c7d7f5;
    color: var(--light-accent);
}

body.page-photo .tab-count {
    background: rgba(15, 23, 42, 0.07);
}

body.page-photo .tab-link.is-active .tab-count {
    background: rgba(255, 255, 255, 0.25);
}

/* --- Paginación: el "text-light" de Bootstrap desaparecía sobre el blanco --- */
body.page-photo .pagination-custom .page-indicator,
body.page-photo .pagination-custom .page-indicator.text-light {
    color: var(--light-ink-soft) !important;
}

/* --- Tablas --- */
body.page-photo .all-tables {
    border-color: var(--light-form-border);
}

    body.page-photo .all-tables thead {
        background: var(--light-form-head);
        border-bottom-color: var(--light-form-border);
    }

    body.page-photo .all-tables tbody tr:hover {
        box-shadow: inset 3px 0 0 var(--light-accent);
    }

body.page-photo .btn-action {
    background: #fff;
    border-color: var(--light-field-border);
    color: var(--light-ink-soft);
}

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

body.page-photo .btn-view-blue {
    background: rgba(29, 78, 216, 0.08);
    border-color: rgba(29, 78, 216, 0.22);
    color: var(--light-accent);
}

body.page-photo .btn-warning-action,
body.page-photo .btn-view {
    background: rgba(180, 83, 9, 0.08);
    border-color: rgba(180, 83, 9, 0.22);
    color: #b45309;
}

body.page-photo .btn-success-action {
    background: rgba(21, 128, 61, 0.08);
    border-color: rgba(21, 128, 61, 0.22);
    color: #15803d;
}

body.page-photo .btn-delete {
    background: rgba(185, 28, 28, 0.08);
    border-color: rgba(185, 28, 28, 0.22);
    color: #b91c1c;
}

/* --- Estados: los mismos tonos, en su versión legible sobre blanco --- */
body.page-photo .status-badge {
    background: #f1f5f9;
    border-color: var(--light-form-border);
    color: var(--light-ink-soft);
}

body.page-photo .summary-table .status-badge.is-directives {
    background: rgba(180, 83, 9, 0.09);
    border-color: rgba(180, 83, 9, 0.25);
    color: #b45309;
}

body.page-photo .summary-table .status-badge.is-consultation {
    background: rgba(29, 78, 216, 0.08);
    border-color: rgba(29, 78, 216, 0.22);
    color: #1d4ed8;
}

body.page-photo .summary-table .status-badge.is-definitive {
    background: rgba(21, 128, 61, 0.09);
    border-color: rgba(21, 128, 61, 0.24);
    color: #15803d;
}

body.page-photo .summary-table .status-badge.is-archived {
    background: #f1f5f9;
    border-color: var(--light-form-border);
    color: var(--light-muted);
}

body.page-photo .badge-prisoner {
    background: rgba(185, 28, 28, 0.08);
    border-color: rgba(185, 28, 28, 0.25);
    color: #b91c1c;
    box-shadow: none;
}

body.page-photo .summary-table .summary-cell-code {
    color: #0f766e;
}

/* --- Tarjetas de sumario (los tres paneles) --- */
body.page-photo .complaint-card {
    background: #fff;
    border-color: var(--light-form-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

    body.page-photo .complaint-card:hover {
        border-color: #c3cfe0;
    }

body.page-photo .sum-code {
    color: #0f766e;
}

body.page-photo .sum-flag {
    background: rgba(185, 28, 28, 0.08);
    border-color: rgba(185, 28, 28, 0.25);
    color: #b91c1c;
}

body.page-photo .sum-state {
    background: #f6f9fc;
    border-color: var(--light-form-border);
    color: var(--light-ink-soft);
}

    body.page-photo .sum-state i {
        color: var(--light-muted);
    }

body.page-photo .sum-state--alert {
    background: rgba(180, 83, 9, 0.07);
    border-color: rgba(180, 83, 9, 0.24);
    color: #b45309;
}

    body.page-photo .sum-state--alert i {
        color: #b45309;
    }

body.page-photo .sum-state-badge {
    background: rgba(15, 23, 42, 0.07);
}

body.page-photo .sum-state--alert .sum-state-badge {
    background: rgba(180, 83, 9, 0.14);
}

body.page-photo .sum-state-badge.is-done {
    background: rgba(21, 128, 61, 0.12);
    color: #15803d;
}

body.page-photo .sum-label,
body.page-photo .sum-value {
    border-bottom-color: rgba(15, 23, 42, 0.07);
}

body.page-photo .dropdown-menu.sum-menu {
    background: #fff;
    border-color: var(--light-form-border);
    box-shadow: 0 18px 38px -18px rgba(15, 23, 42, 0.35);
}

body.page-photo .sum-menu-item:hover {
    background: rgba(15, 23, 42, 0.05);
}

body.page-photo .sum-menu-item.is-final {
    color: #15803d;
}

body.page-photo .sum-menu-item.is-query {
    color: #b45309;
}

body.page-photo .sum-menu-item.is-archive {
    color: #c2410c;
}

/* Botones del pie de la tarjeta: cada acción con su tono, apagado sobre blanco */
body.page-photo .sum-foot .btn:is(.btn-primary-modern, .btn-success-modern, .btn-danger-modern, .btn-warning, .btn-secondary-modern) {
    --tone: 71, 85, 105;
    --tone-text: #475569;
}

body.page-photo .sum-foot .btn.btn-primary-modern {
    --tone: 37, 99, 235;
    --tone-text: #1d4ed8;
}

body.page-photo .sum-foot .btn.btn-success-modern {
    --tone: 21, 128, 61;
    --tone-text: #15803d;
}

body.page-photo .sum-foot .btn.btn-secondary-modern {
    --tone: 194, 65, 12;
    --tone-text: #c2410c;
}

body.page-photo .sum-foot .btn.btn-warning {
    --tone: 180, 83, 9;
    --tone-text: #b45309;
}

body.page-photo .sum-foot .btn.btn-danger-modern {
    --tone: 185, 28, 28;
    --tone-text: #b91c1c;
}

/* --- Ventanas (directivas, confirmaciones) --- */
body.page-photo .modal-content {
    background: #fff;
    border-color: var(--light-form-border);
}

body.page-photo .modal-header,
body.page-photo .modal-footer {
    border-color: var(--light-form-border);
}

body.page-photo .modal-header .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(0.4);
}

/* --- Expediente: avisos, directivas y visor --- */
body.page-photo .record-sealed-note {
    background: #f6f9fc;
    border-color: var(--light-form-border);
}

body.page-photo tr[data-file].is-clickable:hover td {
    background: var(--row-hover);
}

body.page-photo .file-viewer {
    background: #fff;
    border-color: var(--light-form-border);
}

body.page-photo .file-viewer-header {
    border-bottom-color: var(--light-form-border);
}

body.page-photo .image-card {
    background: #fff;
    border-color: var(--light-form-border);
}

body.page-photo .drop-zone:hover,
body.page-photo .drop-zone.is-over {
    background: rgba(29, 78, 216, 0.05);
}

/* La directiva: el mismo papel apenas tostado, con su filo ámbar */
body.page-photo .directive-card,
body.page-photo .note-directive.directive-panel {
    background-color: #fffdf6;
    border-color: var(--light-form-border);
    border-left-color: rgba(180, 83, 9, 0.6);
}

body.page-photo .directive-card > summary:hover {
    background: rgba(15, 23, 42, 0.03);
}

body.page-photo .directive-card-count {
    background: rgba(15, 23, 42, 0.07);
}

body.page-photo .directive-title {
    color: var(--light-ink);
}

body.page-photo .note-body {
    background: #f8fafc;
    border-color: var(--light-form-border);
}

/* Aviso de estado de las pantallas viejas (reasignar, listados) */
body.page-photo .state-note {
    background: #f6f9fc;
    border-color: var(--light-form-border);
    color: var(--light-ink-soft);
}


/* =====================================================================
   48. MARCA "CON PRIORIDAD"
   ---------------------------------------------------------------------
   Va al lado de "Con preso" y se lee igual, pero en ámbar: el rojo queda
   para el preso, que es el dato más grave de la carátula.
   ===================================================================== */

/* En el libro judicial, al lado de CON PRESO */
.badge-priority {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 0.2rem 0.6rem;
    background: rgba(223, 168, 99, 0.12);
    border: 1px solid rgba(223, 168, 99, 0.35);
    border-radius: 999px;
    color: #dfa863;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* En las tarjetas de los tres paneles */
.sum-flag--priority {
    background: rgba(223, 168, 99, 0.12);
    border-color: rgba(223, 168, 99, 0.38);
    color: #dfa863;
}

/* --- Sobre el fondo claro --- */
body.page-photo .badge-priority,
body.page-photo .sum-flag--priority {
    background: rgba(180, 83, 9, 0.09);
    border-color: rgba(180, 83, 9, 0.28);
    color: #b45309;
}


/* =====================================================================
   49. FORMULARIO POR PASOS (denuncia, violencia familiar, acta)
   ---------------------------------------------------------------------
   Sigue siendo un solo formulario con un solo envío: los pasos se ocultan,
   no se sacan del DOM. La barra de arriba es navegación, no una fila
   obligada: el operador salta al paso que necesita.
   ===================================================================== */

.wizard-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 16px;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.wizard-steps {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
}

    .wizard-steps li {
        flex: 0 0 auto;
    }

.wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .wizard-step:hover {
        background: var(--panel-2);
        color: var(--text);
    }

.wizard-step-number {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-3);
    border-radius: 50%;
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

/* El paso en el que está parado */
.wizard-step.is-current {
    background: rgba(29, 78, 216, 0.08);
    border-color: rgba(29, 78, 216, 0.28);
    color: #1d4ed8;
    font-weight: 650;
}

    .wizard-step.is-current .wizard-step-number {
        background: #1d4ed8;
        color: #fff;
    }

/* Los que ya pasó */
.wizard-step.is-done .wizard-step-number {
    background: rgba(21, 128, 61, 0.14);
    color: #15803d;
}

/* Los que quedaron con algo mal: se ven desde cualquier paso */
.wizard-step.has-error .wizard-step-number {
    background: rgba(185, 28, 28, 0.12);
    color: #b91c1c;
}

.wizard-step.has-error .wizard-step-name {
    color: #b91c1c;
}

.wizard-progress {
    flex: 0 0 auto;
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Recorrido --- */
.wizard-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 1400px;
    margin: 18px auto 0;
}

    .wizard-nav .btn {
        min-width: 130px;
    }

    .wizard-nav .wizard-next {
        margin-left: auto;
    }

/* "Atrás" en el primer paso: se ve que no se puede */
.wizard-nav .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Lo que no es el paso actual no se dibuja, pero sigue en el formulario */
.is-hidden {
    display: none !important;
}

/* --- Paso de revisión --- */
.wizard-review-help {
    margin: -4px 0 18px;
    color: var(--muted);
    font-size: 0.84rem;
}

.wizard-review-step + .wizard-review-step {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.wizard-review .wizard-review-title {
    margin: 0 0 10px;
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.wizard-review-group {
    margin: 14px 0 6px;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 650;
}

.wizard-review-list {
    display: grid;
    grid-template-columns: minmax(120px, 210px) minmax(0, 1fr);
    column-gap: 16px;
    align-items: baseline;
    margin: 0;
}

    .wizard-review-list dt {
        padding: 6px 0;
        border-bottom: 1px solid var(--border);
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 500;
    }

    .wizard-review-list dd {
        margin: 0;
        padding: 6px 0;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        font-size: 0.85rem;
        overflow-wrap: anywhere;
    }

.wizard-review-empty {
    margin: 0;
    color: var(--muted);
}

/* --- Aviso de borrador --- */
.draft-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 14px;
    padding: 12px 16px;
    background: rgba(180, 83, 9, 0.07);
    border: 1px solid rgba(180, 83, 9, 0.25);
    border-radius: 10px;
    color: #b45309;
    font-size: 0.86rem;
}

    .draft-banner span {
        flex: 1 1 240px;
    }

    .draft-banner .btn {
        min-width: 112px;
    }

@media (max-width: 767.98px) {
    /* En pantalla chica la barra guarda los nombres: quedan los números */
    .wizard-step-name {
        display: none;
    }

    .wizard-step {
        padding: 7px 9px;
    }

    .wizard-nav .btn {
        min-width: 0;
        flex: 1 1 0;
    }

}