:root {
    --ink: #1f2a33;
    --muted: #667684;
    --line: #d6dee5;
    --surface: #ffffff;
    --accent: #1d5f99;
    --accent-dark: #164a78;
    --success-soft: #e8f5ed;
}

html,
body {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: #eef2f5;
}

a,
.btn-link {
    color: var(--accent);
}

.btn {
    border-radius: 4px;
    font-weight: 700;
}

.btn-primary {
    color: #fff;
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.18rem rgba(29, 95, 153, 0.18);
    border-color: var(--accent);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1:focus {
    outline: none;
}

.app-js-dialog-overlay {
    position: fixed;
    z-index: 3000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 29, 41, .55);
}

.app-js-dialog {
    width: min(520px, 100%);
    padding: 1.1rem;
    border: 1px solid #b8c8d6;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 22px 52px rgba(16, 32, 45, .32);
}

.app-js-dialog h2 {
    margin: 0 0 1rem;
    color: #001b33;
    font-size: 1.25rem;
    font-weight: 900;
}

.app-message-dialog {
    display: grid;
    gap: 0.75rem;
}

.app-message-dialog p {
    margin: 0;
    color: #17324c;
    font-size: 0.98rem;
    font-weight: 700;
}

.app-message-overlay.success .app-message-dialog {
    border-color: #8cc99b;
}

.app-message-overlay.error .app-message-dialog {
    border-color: #f1a8a8;
}

.app-js-dialog-fields {
    display: grid;
    gap: .85rem;
}

.app-js-dialog label {
    display: grid;
    gap: .35rem;
    color: #001b33;
    font-weight: 800;
}

.app-js-dialog input,
.app-js-dialog textarea {
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid #cbd8e2;
    border-radius: 4px;
    color: #001b33;
    font: inherit;
}

.app-js-dialog textarea {
    resize: vertical;
}

.app-js-dialog input:focus,
.app-js-dialog textarea:focus {
    border-color: var(--accent);
    outline: 0;
    box-shadow: 0 0 0 .18rem rgba(29, 95, 153, .18);
}

.app-js-dialog-actions {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
    background:
        linear-gradient(rgba(238, 242, 245, 0.90), rgba(238, 242, 245, 0.95)),
        url("/favicon.png") center 18% / 9rem no-repeat;
}

.login-panel {
    width: min(100%, 430px);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 18px 45px rgba(31, 42, 51, 0.16);
    padding: 1.75rem;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.brand-mark {
    width: 3.4rem;
    height: 3.4rem;
    display: grid;
    place-items: center;
    background: #24313c;
    color: #ffffff;
    border-radius: 6px;
    font-weight: 800;
}

.brand-block h1 {
    font-size: 1.75rem;
    margin-bottom: 0.15rem;
}

.brand-block p,
.login-note {
    color: var(--muted);
    margin-bottom: 0;
}

.login-panel form {
    display: grid;
    gap: 0.8rem;
}

.login-panel label,
.form-grid label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #40515f;
}

.login-button {
    margin-top: 0.35rem;
    height: 2.55rem;
}

.login-note {
    margin-top: 1rem;
    font-size: 0.82rem;
}

.login-error {
    background: #fdecec;
    border: 1px solid #f5c2c7;
    color: #8a1f2d;
    border-radius: 4px;
    padding: 0.65rem 0.75rem;
    font-size: 0.86rem;
    font-weight: 700;
}

.validation-message {
    color: #b32121;
    font-size: 0.82rem;
}

.dashboard,
.module-page {
    display: grid;
    gap: 1rem;
}

.home-background {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 5.25rem);
    margin: -1.25rem -1.5rem -2rem;
    background: transparent;
}

.dashboard-home-shell {
    height: calc(100vh - 5.25rem);
    min-height: 520px;
    margin: -1.25rem -1.5rem -2rem;
    padding: 0.85rem;
    background: #e6f0f6;
    overflow: hidden;
}

.dashboard-home-frame {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #b8cedb;
    background: #dfeef4;
}

.dashboard-home-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/fondo-multapol.png") center / cover no-repeat;
    opacity: 0.34;
    filter: grayscale(10%) saturate(58%) brightness(128%) contrast(78%);
}

.dashboard-home-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(236, 247, 251, 0.58), rgba(236, 247, 251, 0.70)),
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.26), transparent 34%);
    pointer-events: none;
}

.dashboard-home-watermark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 100%;
    opacity: 0.42;
}

.dashboard-home-watermark img {
    width: min(28vw, 320px);
    min-width: 180px;
    height: auto;
    filter: grayscale(18%) brightness(112%);
}

.dashboard-home-police-title {
    position: absolute;
    right: clamp(2rem, 6vw, 5rem);
    bottom: clamp(2rem, 5vh, 4rem);
    z-index: 1;
    display: grid;
    justify-items: end;
    color: rgba(29, 95, 153, 0.42);
    font-size: clamp(4.3rem, 9vw, 8.4rem);
    font-weight: 900;
    line-height: 0.78;
    text-align: right;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}

.dashboard-home-status {
    position: absolute;
    z-index: 1;
    left: 1.6rem;
    right: 1.6rem;
    bottom: 1.2rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.45rem 0.65rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 18px rgba(48, 74, 91, 0.12);
}

.dashboard-home-status div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid #bfd0dc;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.72);
}

.dashboard-home-status span {
    color: #536a7d;
}

.dashboard-home-status strong {
    color: #001a35;
    font-size: 1.05rem;
}

@media (max-width: 640px) {
    .dashboard-home-shell {
        height: auto;
        min-height: calc(100vh - 4rem);
        margin: -1rem -1rem -1.25rem;
        padding: 0.5rem;
        overflow: auto;
    }

    .dashboard-home-frame {
        min-height: calc(100vh - 5rem);
        display: grid;
        align-content: center;
        gap: 1rem;
        padding: 1rem;
    }

    .dashboard-home-frame::before {
        background-position: center;
        opacity: 0.22;
    }

    .dashboard-home-watermark {
        min-height: 0;
        align-self: end;
        opacity: 0.36;
    }

    .dashboard-home-watermark img {
        width: min(54vw, 190px);
        min-width: 120px;
    }

    .dashboard-home-police-title {
        position: relative;
        right: auto;
        bottom: auto;
        justify-items: center;
        align-self: center;
        color: rgba(29, 95, 153, 0.34);
        font-size: clamp(2.35rem, 15vw, 4.2rem);
        line-height: 0.86;
        text-align: center;
    }

    .dashboard-home-status {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        grid-template-columns: 1fr;
        align-self: end;
        padding: 0.45rem;
    }

    .dashboard-home-status div {
        min-height: 2.35rem;
        gap: 0.75rem;
    }
}

.multa-login-shell {
    background:
        linear-gradient(rgba(10, 24, 38, 0.74), rgba(10, 24, 38, 0.82)),
        url("/fondo-multapol.png") center / cover no-repeat;
}

.login-fixed-background {
    background:
        linear-gradient(rgba(238, 246, 252, 0.74), rgba(238, 246, 252, 0.82)),
        url("/fondo-multapol.png");
    background-size: cover;
    background-position: center;
    filter: saturate(45%) contrast(70%) brightness(118%);
}

.login-fixed-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.34);
    pointer-events: none;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.eyebrow {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.page-heading h1 {
    font-size: 1.65rem;
    line-height: 1.15;
    margin-bottom: 0;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.metric-card,
.work-surface,
.record-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(31, 42, 51, 0.06);
}

.workflow-form-surface {
    display: grid;
    gap: 1rem;
}

.workflow-form-toolbar {
    align-items: center;
    justify-content: flex-start;
    padding: 0.65rem;
    border: 1px solid #d6e1ea;
    border-radius: 4px;
    background: #eef6fb;
}

.workflow-form-toolbar .btn {
    min-height: 2.35rem;
}

.workflow-form-toolbar .btn-form-save,
.workflow-form-toolbar .btn-form-back,
.workflow-form-toolbar .btn-form-close,
.workflow-form-toolbar .btn-form-help,
.workflow-form-toolbar .btn-form-actions-list,
.workflow-form-toolbar .btn-form-execute,
.workflow-form-toolbar .btn-form-box,
.workflow-form-toolbar .btn-form-document {
    min-width: 5.4rem;
    border: 1px solid transparent;
    font-weight: 800;
    box-shadow: inset 0 1px rgba(255, 255, 255, .35);
}

.workflow-form-toolbar .btn-form-save {
    color: #fff;
    border-color: #157347;
    background: linear-gradient(#2bb86b, #1f9d55);
}

.workflow-form-toolbar .btn-form-back {
    color: #566674;
    border-color: #8aa2b6;
    background: linear-gradient(#f9fcff, #e7eef4);
}

.workflow-form-toolbar .btn-form-close {
    color: #fff;
    border-color: #a91520;
    background: linear-gradient(#f25463, #df1d2d);
}

.workflow-form-toolbar .btn-form-help {
    min-width: 2.25rem;
    width: 2.25rem;
    padding: 0;
    border-color: transparent;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 5px 12px rgba(13, 45, 73, .18);
}

.workflow-form-toolbar .btn-form-execute {
    color: #fff;
    border-color: #c76b16;
    background: linear-gradient(#ff9a36, #f47d20);
}

.workflow-form-toolbar .btn-form-actions-list {
    min-width: 10.75rem;
    color: #17324c;
    border-color: #87add1;
    background: linear-gradient(#eef7ff, #d5eaf8);
}

.workflow-form-toolbar .btn-form-box {
    color: #111;
    border-color: #d9a622;
    background: linear-gradient(#ffe58b, #f3cb55);
}

.workflow-form-toolbar .btn-form-document {
    color: #fff;
    border-color: #14558f;
    background: linear-gradient(#2c83c2, #2169a3);
}

.workflow-form-toolbar .btn-form-box,
.workflow-form-toolbar .btn-form-document {
    min-width: 2.65rem;
    width: 2.65rem;
    padding: 0;
    color: transparent;
    font-size: 0;
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2rem 2rem;
}

.workflow-form-toolbar .btn-form-box {
    background-image: url('/icons/form/cajon-documentos.png');
}

.workflow-form-toolbar .btn-form-document {
    background-image: url('/icons/form/generar-documento.png');
}

.workflow-form-toolbar .btn-form-save,
.workflow-form-toolbar .btn-form-close {
    min-width: 2.65rem;
    width: 2.65rem;
    padding: 0;
    color: transparent;
    font-size: 0;
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2rem 2rem;
}

.workflow-form-toolbar .btn-form-save {
    background-image: url('/icons/form/grabar-registro.png');
}

.workflow-form-toolbar .btn-form-close {
    background-image: url('/icons/form/cerrar-ficha.png');
}

.complaint-actions-dialog {
    width: min(1500px, 98vw);
    height: min(860px, 92vh);
    max-height: 94vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .75rem;
    padding: 1rem;
    border: 1px solid #b9cad9;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(13, 45, 73, .24);
}

.complaint-actions-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #d9e4ed;
}

.complaint-actions-dialog h2 {
    margin: 0;
    color: #0b1f33;
    font-size: 1.15rem;
    font-weight: 900;
}

.complaint-actions-dialog header span {
    color: #42627e;
    font-weight: 700;
}

.complaint-actions-table-wrap {
    min-height: 0;
    overflow: auto;
}

.complaint-actions-grid {
    min-width: 1320px;
}

.complaint-actions-grid tbody tr {
    cursor: pointer;
}

.complaint-actions-grid th,
.complaint-actions-grid td {
    white-space: nowrap;
}

.complaint-actions-grid td:nth-child(6) {
    white-space: normal;
    min-width: 260px;
}

.complaint-actions-grid .grid-edit-column,
.complaint-actions-grid .grid-delete-column {
    width: 54px;
    min-width: 54px;
    max-width: 54px;
}

.workflow-form-toolbar .btn-form-save:hover,
.workflow-form-toolbar .btn-form-close:hover,
.workflow-form-toolbar .btn-form-actions-list:hover,
.workflow-form-toolbar .btn-form-execute:hover,
.workflow-form-toolbar .btn-form-document:hover {
    color: #111;
}

.workflow-form-toolbar .btn-form-box:hover,
.workflow-form-toolbar .btn-form-save:hover,
.workflow-form-toolbar .btn-form-close:hover,
.workflow-form-toolbar .btn-form-document:hover,
.workflow-form-toolbar .btn-form-box:focus-visible,
.workflow-form-toolbar .btn-form-save:focus-visible,
.workflow-form-toolbar .btn-form-close:focus-visible,
.workflow-form-toolbar .btn-form-document:focus-visible {
    color: transparent;
}

.workflow-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.workflow-form-grid label {
    display: grid;
    gap: 0.35rem;
    color: #233848;
    font-size: 0.84rem;
    font-weight: 800;
}

.workflow-form-grid .wide {
    grid-column: span 2;
}

.workflow-form-grid .full {
    grid-column: 1 / -1;
}

.workflow-check {
    align-content: end;
}

.workflow-check input {
    width: 1.2rem;
    height: 1.2rem;
}

.workflow-notes {
    min-height: 9rem;
    resize: vertical;
}

.workflow-color-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.1rem;
    gap: 0.35rem;
}

.workflow-color-field input[type="color"] {
    width: 3.1rem;
    min-height: 2.35rem;
    padding: 0.1rem;
    border: 1px solid #cbd5dd;
    border-radius: 4px;
    background: #ffffff;
}

.workflow-audit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    color: #526678;
    font-size: 0.82rem;
}

.workflow-grid tbody tr td {
    background-color: inherit;
}

.workflow-grid tbody tr {
    border-left: 0.35rem solid var(--row-reference-color, transparent);
}

.workflow-grid tbody tr:hover td {
    background-color: color-mix(in srgb, var(--row-reference-color, #eef6fc) 34%, #ffffff);
}

.workflow-grid tbody tr.selected td {
    background-color: color-mix(in srgb, var(--row-reference-color, #dceeff) 45%, #dceeff);
}

.metric-card {
    padding: 1rem;
    display: grid;
    gap: 0.25rem;
}

.metric-card span {
    color: var(--muted);
    font-size: 0.86rem;
}

.metric-card strong {
    font-size: 1.8rem;
}

.work-surface,
.record-card {
    padding: 1rem;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.section-title h2 {
    font-size: 1.05rem;
    margin-bottom: 0;
}

.section-title span {
    color: var(--muted);
    font-size: 0.85rem;
}

.activity-list {
    display: grid;
    gap: 0.55rem;
}

.activity-list div {
    display: grid;
    grid-template-columns: 9rem 1fr 7rem;
    gap: 1rem;
    align-items: center;
    padding: 0.65rem 0;
    border-top: 1px solid #edf1f4;
}

.activity-list em {
    justify-self: end;
    color: #2f6f48;
    background: var(--success-soft);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-style: normal;
    font-size: 0.8rem;
}

.button-row,
.filter-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-row {
    margin-bottom: 0.85rem;
}

.filter-row .form-control {
    min-width: 260px;
    flex: 1;
}

.filter-row .form-select {
    width: 210px;
}

.split-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1rem;
    align-items: start;
}

.data-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-grid th {
    text-align: left;
    background: #f0f4f7;
    color: #40515f;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.data-grid th,
.data-grid td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #e6ecef;
    vertical-align: middle;
}

.data-grid tbody tr {
    cursor: pointer;
}

.data-grid tbody tr:hover,
.data-grid tbody tr.selected {
    background: #eef6fc;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    border-radius: 999px;
    background: #edf4fa;
    color: #1d5f99;
    padding: 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.record-card {
    position: sticky;
    top: 4.25rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-grid .wide,
.record-actions {
    grid-column: 1 / -1;
}

.form-grid textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.empty-state,
.placeholder-module p {
    color: var(--muted);
}

.placeholder-module {
    min-height: 14rem;
}

.grid-page {
    gap: 0.75rem;
    height: calc(100vh - 5.8rem);
    grid-template-rows: auto auto auto minmax(0, 1fr);
}

.grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.grid-tool {
    min-height: 2.25rem;
    padding: 0 0.7rem;
    border: 1px solid #aebdca;
    border-radius: 4px;
    color: #17212b;
    background: linear-gradient(#ffffff, #dfe8ef);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-size: 0.78rem;
    font-weight: 800;
}

.grid-tool:hover {
    background: linear-gradient(#ffffff, #cfe0ec);
    border-color: #7f9bae;
}

.tool-new:hover,
.tool-new:focus-visible,
.tool-filter:hover,
.tool-filter:focus-visible,
.tool-search:hover,
.tool-search:focus-visible,
.tool-clear:hover,
.tool-clear:focus-visible,
.tool-close:hover,
.tool-close:focus-visible {
    color: #111827;
}

.tool-new {
    color: #ffffff;
    background: linear-gradient(#2d8a55, #17603c);
    border-color: #17603c;
}

.tool-filter,
.tool-search {
    color: #ffffff;
    background: linear-gradient(#2d73a9, #174a7e);
    border-color: #174a7e;
}

.tool-clear,
.tool-close {
    color: #ffffff;
    background: linear-gradient(#c94f44, #8f1c13);
    border-color: #8f1c13;
}

.tool-config,
.tool-list {
    color: #20303d;
    background: linear-gradient(#fff7da, #e5c66c);
    border-color: #c7a440;
}

.tool-help {
    min-width: 2.5rem;
    width: 2.5rem;
    min-height: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-color: #cbd5df;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 3px rgba(36, 54, 68, .16);
    color: transparent;
    font-size: 0;
}

.tool-help img,
.btn-form-help img,
.action-help img {
    display: block;
    width: 26px;
    height: 26px;
    margin: auto;
    object-fit: contain;
}

.tool-help:not(:has(img)),
.btn-form-help:not(:has(img)),
.action-help:not(:has(img)) {
    background: #ffffff url('/icons/ayuda.png') center / 26px 26px no-repeat;
}

.tool-help:hover,
.tool-help:focus-visible,
.btn-form-help:hover,
.btn-form-help:focus-visible,
.action-help:hover,
.action-help:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.tool-export {
    color: #ffffff;
    background: linear-gradient(#2fa65a, #14863d);
    border-color: #0f6b30;
}

.tool-export:hover,
.tool-export:focus-visible {
    color: #111827;
    background: linear-gradient(#58c47b, #2fa65a);
    border-color: #0f6b30;
}

/* GRID TOOLBAR ICON TRIAL
   Camino de vuelta: borrar este bloque para recuperar los botones con texto. */
.grid-toolbar .grid-tool:not(.tool-help) {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.35rem;
    min-height: 2.35rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    color: inherit;
    font-size: 0;
}

.grid-toolbar .grid-tool:not(.tool-help)::before {
    content: "";
    width: 1.65rem;
    height: 1.65rem;
    display: block;
    background-image: var(--grid-tool-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.grid-toolbar .tool-excel {
    --grid-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h10l6 6v12H4V3Zm9 2v5h5l-5-5ZM7 12l2 3-2 3h2.3l1-1.7 1 1.7h2.3l-2-3 2-3h-2.3l-1 1.7-1-1.7H7Z'/%3E%3C/svg%3E");
    color: #17603c;
    border-color: #8fd3ad;
    background: linear-gradient(#e8f8ef, #c8efd8);
}

.grid-toolbar .tool-excel .excel-icon {
    display: none;
}

.grid-toolbar .tool-new {
    --grid-tool-icon: url('/icons/grid/nuevo-registro.png');
    color: #17603c;
    border-color: #8fd3ad;
    background: linear-gradient(#e8f8ef, #c8efd8);
}

.grid-toolbar .tool-filter {
    --grid-tool-icon: url('/icons/grid/filtrar.png');
    color: #174a7e;
    border-color: #9fc5e8;
    background: linear-gradient(#edf7ff, #cfe6fa);
}

.grid-toolbar .tool-clear {
    --grid-tool-icon: url('/icons/grid/destruir-filtros.png');
    color: #8f1c13;
    border-color: #efaaa4;
    background: linear-gradient(#fff1ef, #f8d2ce);
}

.grid-toolbar .tool-search {
    --grid-tool-icon: url('/icons/grid/buscar.png');
    color: #174a7e;
    border-color: #9fc5e8;
    background: linear-gradient(#edf7ff, #cfe6fa);
}

.grid-toolbar .tool-config {
    --grid-tool-icon: url('/icons/grid/configurar-rejilla.png');
    color: #6f4d00;
    border-color: #e6ca78;
    background: linear-gradient(#fff9e8, #f5e6ad);
}

.grid-toolbar .tool-list {
    --grid-tool-icon: url('/icons/grid/listar.png');
    color: #6f4d00;
    border-color: #e6ca78;
    background: linear-gradient(#fff9e8, #f5e6ad);
}

.grid-toolbar .tool-export {
    --grid-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9l3-3 1.4 1.4L12 15.8l-5.4-5.4L8 9l3 3V3ZM5 18h14v2H5v-2Z'/%3E%3C/svg%3E");
    color: #17603c;
    border-color: #8fd3ad;
    background: linear-gradient(#e8f8ef, #c8efd8);
}

.grid-toolbar .tool-save {
    --grid-tool-icon: url('/icons/form/grabar-registro.png');
    color: #17603c;
    border-color: #8fd3ad;
    background: linear-gradient(#e8f8ef, #c8efd8);
}

.grid-toolbar .tool-close {
    --grid-tool-icon: url('/icons/form/cerrar-ficha.png');
    color: #8f1c13;
    border-color: #efaaa4;
    background: linear-gradient(#fff1ef, #f8d2ce);
}

.grid-toolbar .tool-document {
    --grid-tool-icon: url('/icons/form/generar-documento.png');
    color: #174a7e;
    border-color: #cbd5df;
    background: #ffffff;
}

.grid-toolbar .tool-box {
    --grid-tool-icon: url('/icons/form/cajon-documentos.png');
    color: #8f3a25;
    border-color: #e9a08f;
    background: #ffe3dc;
}

.grid-toolbar .tool-mass {
    --grid-tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h11v4H4V5Zm0 6h16v4H4v-4Zm0 6h11v4H4v-4Zm13-12h3v4h-3V5Zm0 12h3v4h-3v-4Z'/%3E%3C/svg%3E");
    color: #5b21b6;
    border-color: #c4b5fd;
    background: linear-gradient(#f4f0ff, #ddd6fe);
}

@media (max-width: 760px) {
    .grid-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    .grid-toolbar .grid-tool:not(.tool-help) {
        width: 2.5rem !important;
        min-width: 2.5rem !important;
        flex: 0 0 2.5rem !important;
    }
}

.grid-help,
.grid-filter-panel,
.grid-config-panel {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(31, 42, 51, 0.06);
}

.grid-help {
    padding: 0.8rem 1rem;
    color: #43576a;
    font-size: 0.9rem;
}

.context-help-button {
    position: absolute;
    top: .45rem;
    right: .45rem;
    z-index: 6;
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 5px 12px rgba(13, 45, 73, .18);
}

.context-help-button img {
    display: block;
    width: 28px;
    height: 28px;
}

.context-help-button:hover,
.context-help-button:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.grid-filter-panel,
.filter-dialog,
.grid-config-dialog,
.listing-preview-dialog {
    position: relative;
}

.help-tutor-content {
    display: grid;
    gap: .75rem;
    min-width: min(1040px, calc(100vw - 4rem));
    max-width: min(1180px, calc(100vw - 4rem));
}

.help-tutor-top {
    display: flex;
    align-items: end;
    gap: .45rem;
}

.help-tutor-top label {
    display: grid;
    flex: 1 1 340px;
    gap: .25rem;
    margin: 0;
    font-weight: 800;
}

.help-tutor-top span {
    min-width: 130px;
    color: #607384;
    font-size: .86rem;
}

.help-tutor-preview {
    display: grid;
    gap: .8rem;
    min-height: 420px;
    max-height: calc(100vh - 15rem);
    overflow: auto;
    padding: 1rem;
    border: 1px solid #d4e0ea;
    border-radius: 6px;
    background: #fff;
}

.help-tutor-preview header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #dce6ee;
    padding-bottom: .6rem;
}

.help-tutor-preview h3 {
    margin: 0;
    color: #17324d;
    font-size: 1.35rem;
    font-weight: 900;
}

.help-tutor-preview header span {
    color: #697d8e;
    font-size: .84rem;
}

.help-tutor-html {
    color: #243545;
    line-height: 1.55;
}

.help-tutor-video iframe,
.help-tutor-video video {
    max-width: 100%;
}

.help-tutor-links,
.help-tutor-results {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.help-tutor-links {
    align-items: center;
    padding-top: .5rem;
    border-top: 1px solid #dce6ee;
}

.help-tutor-links button,
.help-tutor-results button {
    border: 1px solid #9fc3df;
    border-radius: 4px;
    background: #eef7fd;
    color: #174a7e;
    font-weight: 700;
}

.help-tutor-results button {
    display: grid;
    min-width: 220px;
    padding: .45rem .6rem;
    text-align: left;
}

.help-tutor-results button span {
    color: #65798b;
    font-size: .78rem;
    font-weight: 600;
}

.help-tutor-editor {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) minmax(280px, 1fr);
    gap: .75rem;
}

.help-tutor-editor label {
    display: grid;
    gap: .35rem;
    margin: 0;
    color: #17324d;
    font-weight: 800;
}

.help-tutor-wide,
.help-tutor-toolbar {
    grid-column: 1 / -1;
}

.help-tutor-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.code-textarea {
    font-family: Consolas, "Courier New", monospace;
    font-size: .9rem;
}

.grid-filter-panel {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 220px;
    gap: 0.75rem;
    padding: 0.85rem;
}

.vehicle-filter-panel {
    grid-template-columns: minmax(420px, 1fr) 190px 220px;
    align-items: end;
}

.involved-vehicles-page.is-list-open.with-page-message {
    grid-template-rows: auto auto auto minmax(0, 1fr);
}

.involved-vehicles-page.is-list-open.without-page-message {
    grid-template-rows: auto auto minmax(0, 1fr);
}

.involved-vehicles-page.is-list-open .vehicle-filter-panel {
    position: relative;
    z-index: 3;
    min-height: 4.55rem;
}

.involved-vehicles-page.is-list-open .grid-surface {
    position: relative;
    z-index: 1;
    min-height: 0;
}

.involved-vehicles-page.is-list-open .data-grid-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}

.involved-vehicles-page.is-form-open {
    height: calc(100vh - 3.25rem);
    grid-template-rows: auto minmax(0, 1fr);
    background: #ffffff;
}

.app-content-vehicle-record {
    background-color: #ffffff !important;
    background-image: none !important;
}

.involved-vehicles-page.is-form-open > .page-heading {
    min-height: 2.2rem;
    padding: 0.15rem 0 0.25rem;
}

.involved-vehicles-page.is-form-open > .page-heading .eyebrow {
    margin-bottom: 0.05rem;
    font-size: 0.7rem;
}

.involved-vehicles-page.is-form-open > .page-heading h1 {
    font-size: 1.55rem;
    line-height: 1;
}

.involved-vehicles-page .involved-form-surface {
    height: 100%;
    padding: 0.35rem 0.45rem;
    background: #ffffff;
}

.involved-vehicles-page .person-record-layout {
    min-height: 100%;
    grid-template-columns: minmax(620px, 1.92fr) minmax(420px, 1fr);
    gap: 0.35rem 0.45rem;
    align-items: start;
}

.involved-vehicles-page .person-left-pane,
.involved-vehicles-page .person-right-pane {
    display: grid;
    align-content: start;
    gap: 0.35rem;
}

.involved-vehicles-page .person-card-header {
    min-height: 2.7rem;
    padding: 0.38rem 0.55rem;
}

.involved-vehicles-page .vehicle-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding-bottom: 0.22rem;
    border-bottom: 1px solid #dce7f0;
}

.involved-vehicles-page .vehicle-section-title h3 {
    padding-bottom: 0;
    border-bottom: 0;
}

.involved-vehicles-page .vehicle-flags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.involved-vehicles-page .person-interest-inline {
    min-height: 1.4rem;
    padding: 0.12rem 0.42rem;
    font-size: 0.68rem;
}

.involved-vehicles-page .person-flat-section {
    gap: 0.32rem;
    padding: 0.38rem 0.5rem;
}

.involved-vehicles-page .person-form-grid.dense {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 0.26rem 0.45rem;
}

.involved-vehicles-page .person-form-grid label {
    font-size: 0.68rem;
}

.involved-vehicles-page .person-form-grid .form-control,
.involved-vehicles-page .person-form-grid .form-select,
.involved-vehicles-page .person-form-grid textarea.form-control {
    min-height: 1.72rem;
    padding: 0.16rem 0.42rem;
    font-size: 0.78rem;
}

.involved-vehicles-page .field-with-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem;
    align-items: stretch;
}

.involved-vehicles-page .field-with-action .field-action {
    min-height: 1.75rem;
    border-radius: 4px;
}

.involved-vehicles-page .field-with-action .field-action.doi {
    min-width: 3.1rem;
    border-color: #174a80;
    background: #174a80;
    color: #ffffff;
    font-weight: 900;
}

.involved-vehicles-page .person-document-layout {
    display: block;
}

.involved-vehicles-page .vehicle-photo-workflow {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}

.involved-vehicles-page .vehicle-main-photo {
    width: 100%;
    height: clamp(14rem, 34vh, 21rem);
    min-height: 0;
    aspect-ratio: auto;
}

.involved-vehicles-page .vehicle-main-photo span {
    color: #71869a;
    font-size: 0.95rem;
    font-weight: 900;
}

.involved-vehicles-page .vehicle-photo-workflow .person-photo-actions {
    bottom: 0.4rem;
}

.involved-vehicles-page .image-field.compact {
    min-height: 6.45rem;
    padding: 0.32rem;
    gap: 0.22rem;
}

.involved-vehicles-page .person-read-dni-button {
    min-height: 1.95rem;
    margin-top: 0;
    white-space: nowrap;
}

.vehicle-doi-panel-backdrop {
    position: fixed;
    z-index: 2400;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(14, 30, 44, .38);
}

.vehicle-doi-panel {
    width: min(1120px, 96vw);
    max-height: calc(100vh - 2rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    padding: 0.75rem;
    overflow: auto;
    border: 1px solid #b8ccdc;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 22px 52px rgba(16, 32, 45, .26);
}

.vehicle-doi-panel header,
.vehicle-doi-panel footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.vehicle-doi-panel header {
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #dce7f0;
}

.vehicle-doi-panel h3 {
    margin: 0;
    color: #0b63b6;
    font-size: 1rem;
    font-weight: 900;
}

.vehicle-doi-panel header span {
    color: #486176;
    font-size: 0.82rem;
    font-weight: 700;
}

.vehicle-doi-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    min-height: 22rem;
}

.vehicle-doi-panel-image {
    min-height: 22rem;
    padding: 0.55rem;
}

.vehicle-doi-panel-image .image-preview-box {
    min-height: 19rem;
}

.vehicle-doi-panel-image .image-preview-box span {
    color: #71869a;
    font-weight: 900;
}

.vehicle-doi-panel footer {
    justify-content: flex-end;
    padding-top: 0.2rem;
}

.involved-vehicles-page .vehicle-observations-full {
    grid-column: 1 / -1;
    min-height: 0;
}

.involved-vehicles-page .vehicle-observations-editor {
    gap: 0;
}

.involved-vehicles-page .person-observations-section textarea.form-control {
    min-height: clamp(4.9rem, 13vh, 7rem);
    resize: vertical;
}

@media (max-width: 1200px) {
    .vehicle-filter-panel,
    .involved-vehicles-page .person-record-layout {
        grid-template-columns: 1fr;
    }

    .involved-vehicles-page .vehicle-observations-full {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .vehicle-doi-panel-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .vehicle-doi-panel-image,
    .vehicle-doi-panel-image .image-preview-box {
        min-height: 14rem;
    }

    .vehicle-doi-panel header,
    .vehicle-doi-panel footer {
        align-items: stretch;
        flex-direction: column;
    }
}

.grid-filter-panel label,
.grid-config-panel label {
    display: grid;
    gap: 0.35rem;
    color: #40515f;
    font-size: 0.84rem;
    font-weight: 800;
}

.grid-config-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1rem;
    padding: 0.85rem;
}

.grid-config-panel label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.grid-page {
    height: calc(100vh - 4.25rem);
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
}

.grid-surface {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    min-height: 0;
}

.grid-status-row {
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0.75rem;
    border-bottom: 1px solid #dce5ec;
    background: #f7fafc;
    color: #5c6d7a;
    font-size: 0.82rem;
    font-weight: 700;
}

.facilges-grid {
    font-size: 0.86rem;
}

.facilges-grid th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-right: 1px solid #cfd8e1;
    background: linear-gradient(#edf4f8, #d9e6ee);
    color: #263846;
    white-space: nowrap;
}

.facilges-grid td {
    border-right: 1px solid #edf1f4;
}

.facilges-grid tbody tr:nth-child(even) {
    background: #fbfdfe;
}

.facilges-grid tbody tr:hover,
.facilges-grid tbody tr.selected {
    outline: 1px solid #6aa6d8;
    outline-offset: -1px;
    background: #dceeff;
}

.grid-table-wrap,
.config-table-wrap {
    width: 100%;
    overflow: auto;
    max-width: 100%;
}

.grid-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-x: scroll;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
}

.grid-page .grid-table-wrap {
    height: auto;
}

.traffic-grid {
    table-layout: fixed;
}

.grid-surface {
    min-width: 0;
    overflow: hidden;
}

.traffic-grid th,
.traffic-grid td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-content:has(.remittances-page) {
    padding: 0 !important;
    overflow: hidden;
}

.remittances-page {
    width: 100%;
    height: calc(100vh - 3.25rem);
    gap: 0;
    padding: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
}

.remittances-page .page-heading {
    margin-bottom: 0;
    min-height: 2.7rem;
    align-items: center;
    padding: .18rem .75rem;
}

.remittances-page .page-heading .eyebrow {
    margin-bottom: .05rem;
}

.remittances-page .page-heading h1 {
    font-size: 1.45rem;
}

.remittances-page .grid-filter-panel {
    margin: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.remittances-page .grid-surface {
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.remittances-page .grid-table-wrap {
    height: 100%;
    max-height: none;
    background: #fff;
}

.remittances-page .grid-pager {
    border-radius: 0;
}

.remittances-grid {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
}

.remittances-grid th,
.remittances-grid td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-edit-column,
.grid-delete-column,
.grid-act-column {
    width: 64px;
    min-width: 64px;
    text-align: center !important;
}

.grid-act-column {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
}

.edit-row-button,
.delete-row-button {
    width: 2rem;
    height: 1.85rem;
    overflow: hidden;
    border: 1px solid #9ab1c3;
    border-radius: 4px;
    background: #fff7da;
    color: transparent;
    position: relative;
}

.edit-row-button::before,
.delete-row-button::before {
    content: "";
    position: absolute;
    inset: 0;
}

.edit-row-button::before {
    background: #174a7e;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17.25V20h2.75L17.8 8.95l-2.75-2.75L4 17.25Zm15.9-10.4a1 1 0 0 0 0-1.42l-1.33-1.33a1 1 0 0 0-1.42 0l-1.04 1.04 2.75 2.75 1.04-1.04Z'/%3E%3C/svg%3E") center / 1.15rem 1.15rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17.25V20h2.75L17.8 8.95l-2.75-2.75L4 17.25Zm15.9-10.4a1 1 0 0 0 0-1.42l-1.33-1.33a1 1 0 0 0-1.42 0l-1.04 1.04 2.75 2.75 1.04-1.04Z'/%3E%3C/svg%3E") center / 1.15rem 1.15rem no-repeat;
}

.delete-row-button {
    border-color: #d9a8a8;
    background: #fff1f1;
}

.delete-row-button::before {
    background: #a61f1f;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 11.2A2 2 0 0 1 14.3 22H9.7a2 2 0 0 1-2-1.8L7 9Zm3 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E") center / 1.12rem 1.12rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 11.2A2 2 0 0 1 14.3 22H9.7a2 2 0 0 1-2-1.8L7 9Zm3 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E") center / 1.12rem 1.12rem no-repeat;
}

.act-row-button {
    display: inline-flex;
    width: 2.55rem;
    min-width: 2.55rem;
    height: 1.85rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #aebdca;
    border-radius: 4px;
    background: #eef2f5;
    color: #71808c;
    font-size: .68rem;
    font-weight: 900;
    line-height: 1;
}

.act-row-button.has-actions {
    border-color: #167047;
    background: linear-gradient(#30b46f, #15804b);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(21, 128, 75, .14);
}

.act-row-button.has-overdue {
    border-color: #a20f0f;
    background: linear-gradient(#e33a3a, #a20f0f);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(179, 24, 24, .20);
}

.act-row-button:disabled {
    cursor: default;
    opacity: .72;
}

.facilges-grid tbody tr.action-overdue-row,
.facilges-grid tbody tr.action-overdue-row:nth-child(even) {
    background: #ffe1e1;
}

.facilges-grid tbody tr.action-overdue-row td {
    background: #ffe1e1;
    color: #701111;
}

.facilges-grid tbody tr.action-overdue-row:hover,
.facilges-grid tbody tr.action-overdue-row.selected,
.facilges-grid tbody tr.action-overdue-row.selected-row {
    outline: 1px solid #d71920;
    outline-offset: -1px;
    background: #ffc7c7;
}

.facilges-grid tbody tr.action-overdue-row:hover td,
.facilges-grid tbody tr.action-overdue-row.selected td,
.facilges-grid tbody tr.action-overdue-row.selected-row td {
    background: #ffc7c7;
}

.grid-pager {
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border-top: 1px solid #dce5ec;
    background: #f7fafc;
}

.grid-pager button {
    min-height: 2rem;
    border: 1px solid #aebdca;
    border-radius: 4px;
    background: linear-gradient(#ffffff, #dfe8ef);
    font-size: 0.78rem;
    font-weight: 800;
}

.grid-loading {
    padding: 2rem;
}

.complaint-form-surface {
    padding: 1rem;
}

.complaint-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 0.75rem;
}

.complaint-form-grid label {
    display: grid;
    gap: 0.35rem;
    color: #40515f;
    font-size: 0.82rem;
    font-weight: 800;
}

.complaint-form-grid label.wide {
    grid-column: span 2;
}

.complaint-form-grid textarea {
    min-height: 3rem;
    resize: vertical;
}

.traffic-complaint-editor {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.45rem);
    min-height: 0;
    overflow: hidden;
    padding: 0.4rem clamp(0.45rem, 1vw, 0.9rem) 1rem;
    background: #eef3f7;
}

.traffic-denuncias-page-form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: calc(100vh - 3.45rem);
    min-height: 0;
    margin-top: -0.8rem;
    overflow: hidden;
}

.traffic-complaint-title {
    position: relative;
    flex: 0 0 auto;
    z-index: 40;
    width: min(1480px, 100%);
    min-height: 4.4rem;
    margin: 0 auto;
    padding: 0.55rem 5.6rem 0.65rem 0.85rem;
    color: #ffffff;
    border: 1px solid rgba(30, 56, 76, 0.16);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(90deg, #102334 0, #173d56 100%);
    box-shadow: 0 8px 24px rgba(29, 47, 60, 0.12);
}

.traffic-complaint-title .eyebrow {
    margin: 0 0 0.15rem;
    color: #f0c647;
    font-size: 0.78rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.traffic-complaint-title h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.1rem, 3vw, 3.35rem);
    font-weight: 900;
    line-height: 1;
}

.traffic-complaint-title img {
    position: absolute;
    right: 0.9rem;
    top: 0.55rem;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    opacity: 0.82;
}

.traffic-complaint-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: min(1480px, 100%);
    margin: 0 auto;
    padding: 0.65rem 0.75rem 1rem;
    border: 1px solid #d4dde5;
    border-radius: 0 0 7px 7px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 14px 34px rgba(28, 44, 58, 0.13);
}

.complaint-actionbar {
    position: relative;
    flex: 0 0 auto;
    z-index: 39;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.45rem;
    border: 1px solid #e0e7ee;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(40, 58, 72, 0.12);
}

.complaint-action {
    min-width: 8.6rem;
    min-height: 2.35rem;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 900;
    text-align: center;
    box-shadow: inset 0 1px rgba(255,255,255,0.35), 0 1px 2px rgba(0,0,0,0.12);
}

.complaint-action:hover {
    filter: brightness(1.05);
    color: #000000;
}

.complaint-action span,
.mini-icon-button::before {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    background: #ffffff;
}

.action-new,
.action-save {
    background: #1f7e4a;
}

.action-refresh {
    background: #83c9ea;
}

.action-document {
    background: #216da6;
}

.action-auxiliaries {
    background: #f28a24;
}

.action-box {
    background: #7844c7;
}

.action-box-has-documents {
    border-color: #b98b00;
    background: linear-gradient(#ffd95a, #f2bd24);
    color: #000000;
}

.action-box-has-documents:hover,
.action-box-has-documents:focus-visible {
    color: #000000;
}

.action-delete {
    background: #c95e57;
}

.action-close {
    background: #dc1825;
    color: #ffffff;
}

.complaint-action.action-new,
.complaint-action.action-save,
.complaint-action.action-document,
.complaint-action.action-auxiliaries,
.complaint-action.action-box,
.complaint-action.action-box-has-documents,
.complaint-action.action-delete,
.complaint-action.action-close,
.complaint-action.action-help {
    min-width: 2.65rem;
    width: 2.65rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    color: transparent;
    font-size: 0;
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2rem 2rem;
}

.complaint-action.action-new {
    background-image: url('/icons/form/nuevo-registro.png');
}

.complaint-action.action-save {
    background-image: url('/icons/form/grabar-registro.png');
}

.complaint-action.action-document {
    background-image: url('/icons/form/generar-documento.png');
}

.complaint-action.action-auxiliaries {
    background-image: url('/icons/form/tablas-auxiliares.png');
}

.complaint-action.action-box,
.complaint-action.action-box-has-documents {
    background-image: url('/icons/form/cajon-documentos.png');
}

.complaint-action.action-delete {
    background-image: url('/icons/form/borrar-registro.png');
}

.complaint-action.action-close {
    background-image: url('/icons/form/cerrar-ficha.png');
}

.complaint-action.action-help {
    background-image: none;
}

.complaint-action.action-help img {
    display: block;
    width: 26px;
    height: 26px;
    margin: auto;
    object-fit: contain;
}

.complaint-action.action-new:hover,
.complaint-action.action-save:hover,
.complaint-action.action-document:hover,
.complaint-action.action-auxiliaries:hover,
.complaint-action.action-box:hover,
.complaint-action.action-box-has-documents:hover,
.complaint-action.action-delete:hover,
.complaint-action.action-close:hover,
.complaint-action.action-help:hover,
.complaint-action.action-new:focus-visible,
.complaint-action.action-save:focus-visible,
.complaint-action.action-document:focus-visible,
.complaint-action.action-auxiliaries:focus-visible,
.complaint-action.action-box:focus-visible,
.complaint-action.action-box-has-documents:focus-visible,
.complaint-action.action-delete:focus-visible,
.complaint-action.action-close:focus-visible,
.complaint-action.action-help:focus-visible {
    color: transparent;
}

.traffic-auxiliaries-dialog {
    width: min(980px, 94vw);
    max-height: 88vh;
    overflow: auto;
    padding: 1rem;
    border: 1px solid #b9c7d3;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 22px 70px rgba(12, 37, 58, 0.28);
}

.traffic-auxiliaries-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #dce5ec;
}

.traffic-auxiliaries-header .eyebrow {
    margin: 0 0 0.2rem;
    color: #53697a;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.traffic-auxiliaries-header h2 {
    margin: 0;
    color: #0c253a;
    font-size: 1.55rem;
    font-weight: 900;
}

.traffic-auxiliaries-intro {
    margin: 0.8rem 0 1rem;
    color: #425465;
}

.traffic-auxiliaries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
}

.traffic-auxiliary-card {
    display: grid;
    gap: 0.75rem;
    align-content: space-between;
    padding: 0.85rem;
    border: 1px solid #d7e3ec;
    border-radius: 6px;
    background: #f7fbff;
}

.traffic-auxiliary-card h3 {
    margin: 0 0 0.35rem;
    color: #0c253a;
    font-size: 1rem;
    font-weight: 900;
}

.traffic-auxiliary-card p {
    margin: 0 0 0.45rem;
    color: #40515f;
}

.traffic-auxiliary-card span {
    display: block;
    color: #607182;
    font-size: 0.8rem;
    font-weight: 800;
}

.traffic-auxiliary-card .btn {
    justify-self: start;
    min-width: 7rem;
    font-weight: 900;
}

.complaint-action.action-close:hover {
    color: transparent;
}

.action-collapse span,
.action-home span,
.action-refresh span {
    background: #17212b;
}

.icon-home {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11 12 3l9 8h-3v9h-5v-6h-2v6H6v-9H3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11 12 3l9 8h-3v9h-5v-6h-2v6H6v-9H3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.icon-new {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l5 5v15H6V2Zm7 1.5V8h4.5L13 3.5ZM11 11v3H8v2h3v3h2v-3h3v-2h-3v-3h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l5 5v15H6V2Zm7 1.5V8h4.5L13 3.5ZM11 11v3H8v2h3v3h2v-3h3v-2h-3v-3h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.icon-refresh {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.7 6.3A8 8 0 0 0 4.6 9H2l4 4 4-4H7.1a5.5 5.5 0 0 1 9-1.1L17.7 6.3ZM14 15h2.9a5.5 5.5 0 0 1-9 1.1l-1.6 1.6A8 8 0 0 0 19.4 15H22l-4-4-4 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.7 6.3A8 8 0 0 0 4.6 9H2l4 4 4-4H7.1a5.5 5.5 0 0 1 9-1.1L17.7 6.3ZM14 15h2.9a5.5 5.5 0 0 1-9 1.1l-1.6 1.6A8 8 0 0 0 19.4 15H22l-4-4-4 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.icon-save {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h14l2 2v16H4V3Zm3 2v6h10V5H7Zm1 10v4h8v-4H8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h14l2 2v16H4V3Zm3 2v6h10V5H7Zm1 10v4h8v-4H8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.icon-document {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6V2Zm8 1.5V8h4.5L14 3.5ZM8 11h8v2H8v-2Zm0 4h8v2H8v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6V2Zm8 1.5V8h4.5L14 3.5ZM8 11h8v2H8v-2Zm0 4h8v2H8v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.icon-delete {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 11.2A2 2 0 0 1 14.3 22H9.7a2 2 0 0 1-2-1.8L7 9Zm3 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 11.2A2 2 0 0 1 14.3 22H9.7a2 2 0 0 1-2-1.8L7 9Zm3 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.icon-collapse {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 7 8 8-2 2-6-6-6 6-2-2 8-8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 7 8 8-2 2-6-6-6 6-2-2 8-8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.complaint-mini-list {
    display: none;
    margin: 0.55rem 0 0.7rem;
    border-bottom: 1px solid #d6dee5;
}

.complaint-mini-head {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    color: #40515f;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.complaint-mini-list p {
    margin: 0;
    padding: 0.75rem 0.65rem;
    border-top: 1px solid #e5edf4;
    color: #0d2742;
    font-size: 0.9rem;
}

.traffic-ticket {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.9rem;
    border: 1px solid #cad7e2;
    border-radius: 8px;
    background: #f7fbfd;
}

.traffic-document-overlay {
    align-items: stretch;
    padding: 1.4rem;
}

.traffic-document-dialog {
    display: flex;
    flex-direction: column;
    width: min(1440px, 96vw);
    max-height: 92vh;
    min-height: 70vh;
    margin: auto;
    overflow: hidden;
    border: 1px solid #c7d6e2;
    border-radius: 7px;
    background: #f4f8fb;
    box-shadow: 0 22px 70px rgba(17, 31, 44, 0.28);
}

.traffic-document-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #c7d6e2;
    background: #e7f0f7;
}

.traffic-document-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
}

.traffic-document-message {
    margin: 0.75rem 1rem 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid #c7d6e2;
    border-radius: 4px;
    background: #fff7d7;
    font-weight: 700;
}

.traffic-document-message.success {
    border-color: #8fd09f;
    background: #eaf7ee;
    color: #075f25;
}

.traffic-document-message.error {
    border-color: #efaaa8;
    background: #fdecec;
    color: #981a22;
}

.traffic-document-message.warning,
.traffic-document-message.working {
    border-color: #ead48b;
    background: #fff7d7;
    color: #5b4a05;
}

.traffic-document-layout {
    display: grid;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    gap: 0.85rem;
    min-height: 0;
    padding: 1rem;
}

.traffic-document-selector {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid #cddbe6;
    border-radius: 5px;
    background: #ffffff;
}

.traffic-document-selector label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 800;
}

.traffic-document-preview-shell {
    display: flex;
    position: relative;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: 0.65rem;
}

.traffic-document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.55rem;
    border: 1px solid #cddbe6;
    border-radius: 5px;
    background: #ffffff;
}

.traffic-document-actions .btn {
    min-width: 118px;
    border-width: 1px;
    font-weight: 900;
    color: #ffffff;
}

.traffic-document-actions .btn-warning,
.traffic-document-actions .btn-info {
    color: #0b1f33;
}

.traffic-document-actions .btn:disabled {
    opacity: 0.58;
}

.document-save-note-layer {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 32, 48, 0.38);
}

.document-save-note-dialog {
    display: grid;
    width: min(560px, 94vw);
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid #9fb9cf;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(14, 33, 48, 0.28);
}

.document-save-note-dialog h3 {
    margin: 0;
    color: #061d35;
    font-size: 1.2rem;
    font-weight: 900;
}

.document-save-note-dialog p {
    margin: 0;
    color: #38526a;
    font-weight: 700;
}

.document-save-note-dialog textarea {
    min-height: 145px;
    resize: vertical;
}

.document-save-note-counter {
    color: #516a80;
    font-size: 0.85rem;
    font-weight: 800;
    text-align: right;
}

.document-save-note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.traffic-email-panel {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid #9fc3df;
    border-radius: 5px;
    background: #eef7fd;
}

.traffic-email-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.traffic-email-panel-title h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 900;
}

.traffic-email-grid {
    display: grid;
    grid-template-columns: minmax(210px, 300px) minmax(280px, 1fr);
    gap: 0.65rem 0.8rem;
}

.traffic-email-grid label {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    color: #17324c;
    font-size: 0.85rem;
    font-weight: 900;
}

.traffic-email-wide {
    grid-column: 1 / -1;
}

.traffic-email-attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #c7d6e2;
    border-radius: 4px;
    background: #ffffff;
}

.traffic-email-attachments span {
    color: #31536e;
    font-weight: 700;
}

.traffic-email-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.traffic-document-preview {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    padding: 1.1rem;
    border: 1px solid #cddbe6;
    border-radius: 5px;
    background: #dce8f1;
}

.traffic-document-page {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 20mm;
    background: #ffffff;
    color: #0b1f33;
    box-shadow: 0 12px 32px rgba(18, 36, 50, 0.18);
}

.traffic-document-page header {
    min-height: var(--header-height, 24mm);
    margin-bottom: 8mm;
}

.traffic-document-page main {
    min-height: 200mm;
}

.traffic-document-page footer {
    min-height: var(--footer-height, 18mm);
    margin-top: 8mm;
}

.traffic-document-signature,
.traffic-document-digital-signature {
    display: inline-grid;
    gap: 0.25rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #b9c9d7;
    border-radius: 4px;
    color: #17324c;
}

.traffic-document-signature img {
    width: 220px;
    height: auto;
}

.traffic-signature-panel {
    display: grid;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid #7fb2dd;
    border-radius: 5px;
    background: #f5fbff;
}

.traffic-signature-panel h3 {
    margin: 0;
    font-size: 1rem;
}

.traffic-signature-panel canvas {
    width: min(520px, 100%);
    height: 150px;
    border: 1px dashed #4b92cf;
    border-radius: 4px;
    background: #ffffff;
    touch-action: none;
}

.traffic-signature-panel div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.traffic-ticket h3 {
    margin: 0.35rem 0 0.6rem;
    color: #001a35;
    font-size: 1rem;
    font-weight: 900;
}

.traffic-ticket h3:not(:first-child) {
    margin-top: 0.85rem;
    font-size: 1.65rem;
    line-height: 1.05;
}

.ticket-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem 0.75rem;
}

.ticket-grid label,
.ticket-grid .ticket-field {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    color: #001a35;
    font-size: 0.84rem;
    font-weight: 900;
}

.ticket-grid .field-label {
    display: block;
}

.ticket-grid .span-2 {
    grid-column: span 2;
}

.ticket-grid .span-3 {
    grid-column: span 3;
}

.ticket-grid .span-4 {
    grid-column: 1 / -1;
}

.ticket-grid .full {
    grid-column: 1 / -1;
}

.ticket-grid .form-control {
    min-height: 2.9rem;
    border-color: #d2dbe4;
    border-radius: 6px;
    background: #ffffff;
}

.ticket-grid textarea.form-control {
    min-height: 2.35rem;
    resize: vertical;
}

.ticket-grid textarea.autosize-textarea {
    overflow: hidden;
}

.ticket-grid .ordinance-fact-field {
    align-self: stretch;
}

.ticket-grid .ordinance-fact-field textarea.form-control {
    min-height: 5.7rem;
}

.ordinance-data-grid {
    align-items: start;
}

.ticket-grid .ordinance-wide-text textarea.form-control {
    min-height: 4.8rem;
}

.lookup-search-field {
    position: relative;
}

.lookup-search-results {
    position: absolute;
    z-index: 25;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow: auto;
    padding: 0.25rem;
    border: 1px solid #b8cede;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(0, 26, 53, 0.18);
}

.lookup-search-option {
    display: block;
    width: 100%;
    padding: 0.42rem 0.55rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #001a35;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
}

.lookup-search-option:hover,
.lookup-search-option:focus,
.lookup-search-option.active {
    background: #e8f4ff;
    outline: none;
}

.lookup-search-empty {
    position: absolute;
    z-index: 25;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid #d2dbe4;
    border-radius: 6px;
    background: #ffffff;
    color: #5d7287;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(0, 26, 53, 0.14);
}

.vehicle-capture-row {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 0.35rem;
}

.map-panel {
    margin: 0.7rem 0 0.45rem;
    border: 1px solid #9bc3df;
    border-radius: 8px;
    background: #eaf4fb;
    padding: 0.65rem;
}

.map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.map-toolbar strong {
    color: #001a35;
    font-weight: 900;
}

.map-toolbar > div {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.compact-button {
    min-height: 2rem;
    border: 1px solid #8ca9bf;
    border-radius: 5px;
    background: #f7fbff;
    color: #1f3342;
    font-weight: 900;
    padding: 0.25rem 0.65rem;
}

.intervention-map {
    width: 100%;
    height: 19rem;
    min-height: 260px;
    border: 1px solid #8ab7d7;
    border-radius: 6px;
    background: #d9e7f0;
    overflow: hidden;
}

.map-help {
    margin: 0.5rem 0 0;
    color: #41596c;
    font-size: 0.88rem;
    font-weight: 700;
}

.photo-capture-box {
    min-height: 11rem;
    display: grid;
    place-items: center;
    gap: 0.55rem;
    border: 2px dashed #6aa6d8;
    border-radius: 8px;
    background: #fbfdff;
    color: #203746;
    text-align: center;
}

.photo-capture-box strong {
    justify-self: start;
    align-self: start;
    padding: 1rem 1rem 0;
    color: #526678;
    font-size: 0.82rem;
    text-transform: uppercase;
}

.photo-capture-box span {
    font-weight: 900;
}

.photo-capture-box img {
    max-width: calc(100% - 1rem);
    max-height: 7rem;
    object-fit: contain;
}

.photo-capture-box div {
    display: flex;
    gap: 0.6rem;
}

.mini-icon-button {
    position: relative;
    width: 2.75rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: #174a80;
}

.mini-icon-button:disabled,
.mini-icon-button.disabled {
    opacity: 0.55;
    pointer-events: none;
}

label.mini-icon-button {
    cursor: pointer;
    margin: 0;
}

.mini-icon-button.folder {
    background: #dbe6ef;
}

.mini-icon-button.folder::before {
    background: #1a2d3f;
}

.mini-icon-button.delete {
    background: #ffd7d7;
}

.mini-icon-button.delete::before {
    background: #b21d2a;
}

.mini-icon-button.camera::before {
    content: "";
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5h8l1.5 2H21v13H3V7h3.5L8 5Zm4 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0-2.2a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5h8l1.5 2H21v13H3V7h3.5L8 5Zm4 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0-2.2a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mini-icon-button.folder::before {
    content: "";
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h7l2 2h9v12H3V5Zm2 4v8h14V9H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h7l2 2h9v12H3V5Zm2 4v8h14V9H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mini-icon-button.delete::before {
    content: "";
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h5v2H3V5h5l1-2Zm-3 6h12l-1 12H7L6 9Zm3 2 .5 8h1.8l-.4-8H9Zm4.1 0-.4 8h1.8l.5-8h-1.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h5v2H3V5h5l1-2Zm-3 6h12l-1 12H7L6 9Zm3 2 .5 8h1.8l-.4-8H9Zm4.1 0-.4 8h1.8l.5-8h-1.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vehicle-help {
    padding: 1rem;
    border-left: 4px solid #203746;
    background: #eef7fb;
    color: #0d2742;
    line-height: 1.5;
}

.vehicle-capture-status {
    margin-top: 0.8rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid #b8d1e7;
    border-radius: 6px;
    background: #ffffff;
    color: #17324a;
    font-weight: 800;
}

.vehicle-capture-status.working {
    border-color: #69a8dc;
    background: #e8f5ff;
    color: #0f4b7d;
}

.vehicle-capture-status.success {
    border-color: #8ec69a;
    background: #edf9ef;
    color: #165b27;
}

.vehicle-capture-status.warning {
    border-color: #e0bf62;
    background: #fff8dd;
    color: #755100;
}

.vehicle-capture-status.error {
    border-color: #e6a0a0;
    background: #fff0f0;
    color: #9b111e;
}

.inline-dni-reader {
    margin-top: 0.25rem;
}

.dni-reader {
    padding: 0.85rem 0.95rem;
    border: 1px solid #6aa6d8;
    border-radius: 8px;
    background: #f5fbff;
}

.dni-reader h3 {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    color: #0b2034;
}

.dni-capture-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.dni-capture-box {
    min-height: 11rem;
    display: grid;
    grid-template-rows: auto 1fr auto;
    place-items: center;
    gap: 0.55rem;
    border: 2px dashed #6aa6d8;
    border-radius: 8px;
    background: #fbfdff;
    color: #203746;
    text-align: center;
}

.dni-capture-box > span {
    justify-self: start;
    padding: 0.9rem 1rem 0;
    color: #526678;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.dni-capture-box strong {
    align-self: center;
    font-weight: 900;
}

.dni-capture-box img {
    max-width: calc(100% - 1rem);
    max-height: 7rem;
    object-fit: contain;
}

.dni-capture-actions {
    display: flex;
    gap: 0.6rem;
    padding-bottom: 0.75rem;
}

.dni-reader-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.field-with-buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    gap: 0.35rem;
    align-items: stretch;
}

.field-action {
    min-width: 3rem;
    padding: 0 0.65rem;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    background: #174a80;
    font-size: 0.75rem;
    font-weight: 900;
}

.field-action:hover {
    color: #000000;
    background: #d9ecfb;
}

.field-action.vip,
.field-action.pip {
    background: #8f2e20;
}

.field-action.maps {
    min-width: 6.3rem;
    background: #174a80;
}

.field-action.mic {
    align-self: end;
    min-width: 3.3rem;
    background: #182736;
    color: #f5d351;
}

.field-action.dni-search::after {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.2rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: 0.35rem 0.35rem 0 -0.18rem currentColor;
}

.vehicle-interest-inline {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.12rem 0.45rem;
    border: 1px solid #a8271a;
    border-radius: 999px;
    color: #a8271a;
    background: #fff1ef;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.mic-field .field-with-buttons {
    grid-template-columns: minmax(0, 1fr) auto;
}

.complaint-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.55rem;
}

.complaint-checks label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #17212b;
    font-weight: 500;
}

.dni-file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dni-camera-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(8, 18, 28, 0.86);
}

.dni-camera-panel {
    width: min(58rem, 100%);
    display: grid;
    gap: 0.8rem;
    padding: 0.9rem;
    border-radius: 10px;
    background: #f5f8fa;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}

.dni-camera-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dni-camera-close {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #b4c9da;
    border-radius: 8px;
    background: #ffffff;
    color: #17212b;
    font-size: 1.4rem;
    font-weight: 900;
}

.dni-camera-video {
    width: 100%;
    max-height: 68vh;
    object-fit: contain;
    border-radius: 8px;
    background: #050b12;
}

.dni-camera-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.dni-camera-actions button {
    min-height: 3.2rem;
    border: 0;
    border-radius: 8px;
    font-weight: 900;
}

.dni-camera-cancel {
    background: #dfe8ef;
    color: #17212b;
}

.dni-camera-shot {
    background: #174a7e;
    color: #ffffff;
}

.dni-crop-panel {
    width: min(72rem, 100%);
}

.dni-crop-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 24rem;
    max-height: 68vh;
    overflow: hidden;
    border-radius: 8px;
    background: #050b12;
    touch-action: none;
    user-select: none;
}

.dni-crop-image {
    width: 100%;
    height: 100%;
    max-height: 68vh;
    object-fit: contain;
    pointer-events: none;
}

.dni-crop-box {
    position: absolute;
    border: 2px solid #ffffff;
    outline: 999rem solid rgba(0, 0, 0, .42);
    box-shadow: 0 0 0 1px #0b63b6 inset;
    cursor: move;
}

.dni-crop-handle {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #0b63b6;
}

.dni-crop-handle.nw {
    left: -0.55rem;
    top: -0.55rem;
    cursor: nwse-resize;
}

.dni-crop-handle.ne {
    right: -0.55rem;
    top: -0.55rem;
    cursor: nesw-resize;
}

.dni-crop-handle.sw {
    left: -0.55rem;
    bottom: -0.55rem;
    cursor: nesw-resize;
}

.dni-crop-handle.se {
    right: -0.55rem;
    bottom: -0.55rem;
    cursor: nwse-resize;
}

.dni-crop-actions {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
}

@media (max-width: 1100px) {
    .traffic-complaint-title,
    .traffic-complaint-card {
        width: 100%;
    }

    .ticket-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ticket-grid .span-2,
    .ticket-grid .span-3 {
        grid-column: 1 / -1;
    }

    .traffic-email-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-capture-row {
        grid-template-columns: minmax(210px, 0.35fr) minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .traffic-denuncias-page-form {
        height: auto;
        min-height: calc(100vh - 5.6rem);
        margin-top: 0;
        overflow: visible;
    }

    .traffic-complaint-editor {
        display: block;
        height: auto;
        min-height: calc(100vh - 5.6rem);
        padding: 0.35rem 0.35rem 0.8rem;
        overflow: visible;
    }

    .traffic-complaint-title {
        min-height: 0;
        padding: 0.65rem 4.3rem 0.7rem 0.75rem;
    }

    .traffic-complaint-title .eyebrow {
        font-size: 0.68rem;
    }

    .traffic-complaint-title h2 {
        font-size: clamp(1.65rem, 9vw, 2.45rem);
        line-height: 0.98;
    }

    .traffic-complaint-title img {
        width: 3rem;
        height: 3rem;
        right: 0.65rem;
        top: 0.55rem;
    }

    .traffic-complaint-card {
        display: block;
        min-height: 0;
        padding: 0.45rem;
    }

    .complaint-actionbar {
        flex-wrap: wrap;
        align-items: stretch;
        overflow: visible;
        gap: 0.28rem;
        padding: 0.3rem;
    }

    .complaint-action {
        flex: 1 1 calc(50% - 0.28rem);
        min-width: 8rem;
        min-height: 2.45rem;
    }

    .complaint-mini-head {
        display: none;
    }

    .complaint-mini-list p {
        padding: 0.55rem 0.3rem;
    }

    .traffic-ticket {
        min-height: 0;
        overflow: visible;
        padding: 0.65rem;
        border-radius: 6px;
    }

    .traffic-ticket h3 {
        font-size: 0.95rem;
    }

    .traffic-ticket h3:not(:first-child) {
        font-size: 1.35rem;
    }

    .ticket-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .ticket-grid .span-2,
    .ticket-grid .span-3,
    .ticket-grid .span-4,
    .ticket-grid .full {
        grid-column: 1;
    }

    .ticket-grid .form-control {
        min-height: 2.6rem;
    }

    .vehicle-capture-row {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .map-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .map-toolbar > div {
        justify-content: stretch;
    }

    .compact-button {
        flex: 1 1 auto;
    }

    .intervention-map {
        height: 16rem;
        min-height: 220px;
    }

    .photo-capture-box {
        min-height: 8.6rem;
    }

    .dni-capture-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-help {
        border-left: 0;
        border-top: 4px solid #203746;
        padding: 0.8rem;
        font-size: 0.9rem;
    }

    .field-with-buttons {
        grid-template-columns: minmax(0, 1fr);
    }

    .field-action {
        min-height: 2.35rem;
    }

    .complaint-checks {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
}

.app-content:has(.traffic-denuncias-page-form),
.app-content:has(.ordinance-denuncias-page-form) {
    height: calc(100vh - 3.25rem);
    min-height: 0;
    overflow: hidden;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    background-color: #edf4f8 !important;
    background-image: none !important;
}

.app-content:has(.traffic-denuncias-page-form) .traffic-denuncias-page-form,
.app-content:has(.ordinance-denuncias-page-form) .ordinance-denuncias-page-form,
.app-content:has(.traffic-denuncias-page-form) .traffic-complaint-editor,
.app-content:has(.ordinance-denuncias-page-form) .traffic-complaint-editor {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.app-content:has(.traffic-denuncias-page-form) .traffic-complaint-title,
.app-content:has(.ordinance-denuncias-page-form) .traffic-complaint-title,
.app-content:has(.traffic-denuncias-page-form) .complaint-actionbar,
.app-content:has(.ordinance-denuncias-page-form) .complaint-actionbar {
    position: relative;
    flex: 0 0 auto;
}

.app-content:has(.traffic-denuncias-page-form) .traffic-complaint-card,
.app-content:has(.ordinance-denuncias-page-form) .traffic-complaint-card {
    flex: 1 1 auto;
    min-height: 0;
}

.app-content:has(.traffic-denuncias-page-form) .traffic-ticket,
.app-content:has(.ordinance-denuncias-page-form) .traffic-ticket {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.traffic-denuncias-page-form .complaint-action.action-new,
.traffic-denuncias-page-form .complaint-action.action-save,
.traffic-denuncias-page-form .complaint-action.action-document,
.traffic-denuncias-page-form .complaint-action.action-auxiliaries,
.traffic-denuncias-page-form .complaint-action.action-box,
.traffic-denuncias-page-form .complaint-action.action-box-has-documents,
.traffic-denuncias-page-form .complaint-action.action-delete,
.traffic-denuncias-page-form .complaint-action.action-close,
.ordinance-denuncias-page-form .complaint-action.action-new,
.ordinance-denuncias-page-form .complaint-action.action-save,
.ordinance-denuncias-page-form .complaint-action.action-document,
.ordinance-denuncias-page-form .complaint-action.action-box,
.ordinance-denuncias-page-form .complaint-action.action-box-has-documents,
.ordinance-denuncias-page-form .complaint-action.action-delete,
.ordinance-denuncias-page-form .complaint-action.action-close {
    flex: 0 0 2.65rem !important;
    min-width: 2.65rem !important;
    width: 2.65rem !important;
    min-height: 2.45rem !important;
    padding: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    background-color: #ffffff !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 2rem 2rem !important;
}

.traffic-denuncias-page-form .complaint-action.action-new,
.ordinance-denuncias-page-form .complaint-action.action-new {
    background-image: url('/icons/form/nuevo-registro.png') !important;
}

.traffic-denuncias-page-form .complaint-action.action-save,
.ordinance-denuncias-page-form .complaint-action.action-save {
    background-image: url('/icons/form/grabar-registro.png') !important;
}

.traffic-denuncias-page-form .complaint-action.action-document,
.ordinance-denuncias-page-form .complaint-action.action-document {
    background-image: url('/icons/form/generar-documento.png') !important;
}

.traffic-denuncias-page-form .complaint-action.action-auxiliaries {
    background-image: url('/icons/form/tablas-auxiliares.png') !important;
}

.traffic-denuncias-page-form .complaint-action.action-box,
.traffic-denuncias-page-form .complaint-action.action-box-has-documents,
.ordinance-denuncias-page-form .complaint-action.action-box,
.ordinance-denuncias-page-form .complaint-action.action-box-has-documents {
    background-image: url('/icons/form/cajon-documentos.png') !important;
}

.traffic-denuncias-page-form .complaint-action.action-delete,
.ordinance-denuncias-page-form .complaint-action.action-delete {
    background-image: url('/icons/form/borrar-registro.png') !important;
}

.traffic-denuncias-page-form .complaint-action.action-close,
.ordinance-denuncias-page-form .complaint-action.action-close {
    background-image: url('/icons/form/cerrar-ficha.png') !important;
}

.ordinance-denuncias-page {
    min-height: calc(100vh - 3.25rem);
    padding: 1rem;
    background: #edf4f8 !important;
    background-image: none !important;
}

.ordinance-denuncias-page::before,
.ordinance-denuncias-page::after,
.ordinance-denuncias-page .work-surface::before,
.ordinance-denuncias-page .work-surface::after {
    display: none !important;
    content: none !important;
}

.ordinance-denuncias-page > .page-heading,
.ordinance-denuncias-page > .grid-filter-panel,
.ordinance-denuncias-page > .grid-help,
.ordinance-denuncias-page > .grid-surface {
    position: relative;
    z-index: 1;
}

.ordinance-denuncias-page > .page-heading {
    margin-bottom: 0.8rem;
    background: transparent;
}

.ordinance-denuncias-page > .grid-filter-panel,
.ordinance-denuncias-page > .grid-help,
.ordinance-denuncias-page > .grid-surface {
    background: rgba(255, 255, 255, 0.98);
}

.ordinance-denuncias-page-form {
    height: 100%;
    min-height: 0;
    padding: 0.55rem;
    background: #edf4f8 !important;
    background-image: none !important;
}

.ordinance-denuncias-page-form .traffic-complaint-editor {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.ordinance-denuncias-page-form .traffic-complaint-title {
    width: 100%;
    min-height: 5.3rem;
    margin: 0;
    border-radius: 6px 6px 0 0;
}

.ordinance-denuncias-page-form .complaint-actionbar {
    width: 100%;
    margin: 0;
    border-radius: 0;
    background: #fff;
}

.ordinance-denuncias-page-form .traffic-complaint-card {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0 0 6px 6px;
    background: #f8fbfd;
}

.ordinance-denuncias-page-form .traffic-ticket {
    padding: 1rem;
    background: #f8fbfd;
}

.ordinance-denuncias-page-form .ticket-grid {
    align-items: end;
}

.ordinance-person-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.35rem 0 0.9rem;
}

.ordinance-person-card {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid #c6d7e6;
    border-radius: 8px;
    background: #f8fbfd;
}

.ordinance-person-card.person-interest {
    border-color: #af2a1d;
    background: #fff4f1;
}

.ordinance-person-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.05rem;
}

.ordinance-person-summary {
    min-height: 2.6rem;
    padding: 0.55rem 0.65rem;
    border-left: 4px solid #1d557c;
    background: #eaf5fb;
    color: #001a35;
    white-space: pre-wrap;
}

.ordinance-doi-field {
    grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 760px) {
    .app-content:has(.traffic-denuncias-page-form),
    .app-content:has(.ordinance-denuncias-page-form) {
        height: auto;
        min-height: calc(100vh - 5.6rem);
        overflow: visible;
        padding-top: 0.55rem;
        padding-bottom: 1rem;
    }

    .app-content:has(.traffic-denuncias-page-form) .traffic-denuncias-page-form,
    .app-content:has(.ordinance-denuncias-page-form) .ordinance-denuncias-page-form,
    .app-content:has(.traffic-denuncias-page-form) .traffic-complaint-editor,
    .app-content:has(.ordinance-denuncias-page-form) .traffic-complaint-editor,
    .app-content:has(.traffic-denuncias-page-form) .traffic-ticket,
    .app-content:has(.ordinance-denuncias-page-form) .traffic-ticket {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .app-content:has(.traffic-denuncias-page-form) .complaint-actionbar,
    .app-content:has(.ordinance-denuncias-page-form) .complaint-actionbar {
        display: flex;
        flex-wrap: wrap;
    }

    .app-content:has(.traffic-denuncias-page-form) .complaint-action,
    .app-content:has(.ordinance-denuncias-page-form) .complaint-action {
        flex: 1 1 calc(50% - 0.28rem);
        min-width: 8rem;
    }

    .ordinance-denuncias-page,
    .ordinance-denuncias-page-form {
        padding: 0.55rem;
    }

    .ordinance-denuncias-page-form .traffic-complaint-title {
        min-height: 4.6rem;
    }

    .ordinance-person-grid {
        grid-template-columns: 1fr;
    }
}

.grid-config-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(9, 22, 35, 0.5);
}

.app-message-overlay {
    z-index: 1400;
}

.grid-config-dialog {
    width: min(1420px, 96vw);
    height: min(880px, 90vh);
    max-height: 90vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    background: #ffffff;
    border: 1px solid #b9c7d3;
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    padding: 1rem;
}

.config-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.config-font-panel {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 90px minmax(180px, 1fr);
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #dce5ec;
    border-radius: 6px;
    background: #f7fafc;
}

.config-font-panel label {
    display: grid;
    gap: 0.35rem;
    color: #40515f;
    font-size: 0.84rem;
    font-weight: 800;
}

.font-preview {
    min-height: 2.4rem;
    display: grid;
    place-items: center;
    border: 1px solid #cbd7e1;
    border-radius: 4px;
    background: #ffffff;
    color: #17212b;
}

.config-table-wrap {
    border: 1px solid #dce5ec;
    min-height: 0;
}

.config-grid th,
.config-grid td {
    white-space: nowrap;
    padding: 0.4rem 0.55rem;
}

.config-grid th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.config-check-cell {
    text-align: center;
}

.config-input {
    min-width: 160px;
}

.config-number {
    width: 90px;
}

.config-toolbar-bottom {
    justify-content: flex-end;
    gap: 0.45rem;
    margin: 0.85rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid #dce5ec;
}

.grid-config-dialog .config-toolbar-bottom .btn {
    min-width: 7.2rem;
    min-height: 2.35rem;
    border-radius: 4px;
    font-weight: 400;
    box-shadow: inset 0 1px rgba(255, 255, 255, .35);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary {
    color: #20303d;
    border-color: #c7a440;
    background: linear-gradient(#fff7da, #e5c66c);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:hover,
.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:focus-visible {
    color: #111827;
    border-color: #a98524;
    background: linear-gradient(#fff2bd, #d8b54b);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(1) {
    color: #173524;
    border-color: #8fcfa5;
    background: linear-gradient(#f1fff5, #bce8c8);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(1):hover,
.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(1):focus-visible {
    border-color: #5fac77;
    background: linear-gradient(#e4ffec, #9bdcb0);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(2) {
    color: #5b1515;
    border-color: #efaaa5;
    background: linear-gradient(#fff3f1, #f4c4bf);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(2):hover,
.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(2):focus-visible {
    border-color: #d98078;
    background: linear-gradient(#ffe7e4, #eeaaa3);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(3) {
    color: #123550;
    border-color: #8bbddc;
    background: linear-gradient(#f0f9ff, #b8daf0);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(3):hover,
.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(3):focus-visible {
    border-color: #5f9ec8;
    background: linear-gradient(#e3f4ff, #9ec9e8);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(4) {
    color: #20303d;
    border-color: #c7a440;
    background: linear-gradient(#fff7da, #e5c66c);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(4):hover,
.grid-config-dialog .config-toolbar-bottom .btn-outline-secondary:nth-of-type(4):focus-visible {
    border-color: #a98524;
    background: linear-gradient(#fff2bd, #d8b54b);
}

.grid-config-dialog .config-toolbar-bottom .btn-primary {
    color: #fff;
    border-color: #174a7e;
    background: linear-gradient(#2d73a9, #174a7e);
}

.grid-config-dialog .config-toolbar-bottom .btn-primary:hover,
.grid-config-dialog .config-toolbar-bottom .btn-primary:focus-visible {
    color: #111827;
    border-color: #123b66;
    background: linear-gradient(#4b94cc, #2d73a9);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-danger {
    color: #fff;
    border-color: #8f1c13;
    background: linear-gradient(#c94f44, #8f1c13);
}

.grid-config-dialog .config-toolbar-bottom .btn-outline-danger:hover,
.grid-config-dialog .config-toolbar-bottom .btn-outline-danger:focus-visible {
    color: #111827;
    border-color: #7d160f;
    background: linear-gradient(#e36a60, #b9281d);
}

.facilges-filter-dialog {
    width: min(820px, calc(100vw - 2rem));
    max-height: 90vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #b9c7d3;
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    padding: 1rem;
}

.app-message-dialog {
    width: min(460px, calc(100vw - 2rem));
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    padding: 1.1rem;
    border: 1px solid #b9c7d3;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    color: #17212b;
}

.app-message-dialog h2 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 800;
}

.app-message-dialog p {
    margin: 0;
    color: #40515f;
    font-size: 0.92rem;
}

.app-message-icon {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 900;
}

.app-message-icon.danger {
    background: #fde7e7;
    color: #a61f1f;
    border: 1px solid #efb8b8;
}

.app-message-icon.success {
    background: #e8f5ed;
    color: #17603c;
    border: 1px solid #9bd0ad;
}

.app-message-icon.neutral {
    background: #e8f2fb;
    color: #0d3154;
    border: 1px solid #9ab1c3;
}

.app-message-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    padding-top: 0.85rem;
}

.filter-dialog-head,
.filter-dialog-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.55fr) minmax(160px, 1fr) minmax(120px, 0.8fr) minmax(110px, 0.7fr);
    gap: 0.7rem;
    align-items: center;
}

.filter-dialog-head {
    margin-top: 0.6rem;
    padding: 0 0.25rem 0.35rem;
    color: #334858;
    font-size: 0.82rem;
    font-weight: 800;
}

.filter-dialog-rows {
    display: grid;
    gap: 0.55rem;
    min-height: 0;
    overflow: auto;
}

.filter-dialog-row .form-select,
.filter-dialog-row .form-control {
    min-height: 2.2rem;
    font-size: 0.86rem;
}

.login-checks {
    display: grid;
    gap: 0.45rem;
}

.login-checks label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #263846;
    font-size: 0.84rem;
    font-weight: 700;
}

.login-checks a {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 800;
}

.print-listing {
    display: none;
}

.print-listing-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
    color: #0f172a;
    font-size: 7pt;
}

.print-listing-header strong {
    font-size: 8pt;
    font-weight: 700;
    text-align: center;
}

.print-listing-header span:last-child {
    text-align: right;
}

.print-listing-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #0f172a;
    font-size: 6.5pt;
}

.print-listing-grid th,
.print-listing-grid td {
    border: 1px solid #cbd5e1;
    padding: 0.1rem 0.16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.print-listing-grid th {
    background: #0f172a;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
}

.print-listing-grid tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.print-listing-footer {
    display: none;
}

.listing-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: grid;
    place-items: stretch;
    padding: .75rem;
    background: rgba(8, 20, 32, .58);
}

.listing-preview-dialog {
    position: relative;
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #9fb3c3;
    border-radius: 6px;
    background: #dfe9f1;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

.listing-preview-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .85rem;
    border-bottom: 1px solid #bccbd6;
    background: #fff;
}

.listing-preview-toolbar strong {
    color: #17324d;
    font-size: 1rem;
}

.listing-preview-toolbar div {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
}

.listing-preview-toolbar button {
    min-height: 2rem;
    border: 1px solid #174a7e;
    border-radius: 4px;
    background: linear-gradient(#2d73a9, #174a7e);
    color: #fff;
    font-weight: 700;
}

.listing-preview-toolbar button[data-action="manual"] {
    border-color: #c7a440;
    background: linear-gradient(#fff7da, #e5c66c);
    color: #20303d;
}

.listing-preview-toolbar button[data-action="email"] {
    border-color: #0f6b30;
    background: linear-gradient(#2fa65a, #14863d);
}

.listing-preview-toolbar button[data-action="close"] {
    border-color: #8f1c13;
    background: linear-gradient(#c94f44, #8f1c13);
}

.listing-email-panel {
    position: absolute;
    top: 3.75rem;
    right: 1rem;
    z-index: 4;
    width: min(760px, calc(100% - 2rem));
    box-shadow: 0 14px 34px rgba(18, 38, 56, .28);
}

.listing-email-panel .listing-email-status {
    margin: 0;
}

.listing-preview-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
}

.listing-preview-page {
    width: 297mm;
    min-height: 210mm;
    margin: 0 auto;
    padding: 14mm;
    background: #fff;
    box-shadow: 0 10px 28px rgba(18, 38, 56, .20);
}

.listing-preview-page .print-listing {
    display: block !important;
}

.listing-preview-page .print-listing-footer {
    display: flex;
    justify-content: space-between;
}

.listing-signature-block {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.1rem;
}

.listing-signature-stamp {
    min-width: 16rem;
    padding-top: .4rem;
    border-top: 1px solid #6d7d89;
    color: #17324d;
    text-align: center;
    font-size: .86rem;
}

.listing-signature-stamp img {
    display: block;
    max-width: 16rem;
    max-height: 5.5rem;
    margin: 0 auto .35rem;
}

.listing-signature-pad {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    width: min(560px, calc(100% - 2rem));
    padding: .8rem;
    border: 1px solid #9fb3c3;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .24);
}

.listing-signature-pad h3 {
    margin: 0 0 .5rem;
    color: #17324d;
    font-size: 1rem;
}

.listing-signature-pad canvas {
    width: 100%;
    height: 160px;
    border: 1px solid #c6d3de;
    border-radius: 4px;
    background: #fff;
    touch-action: none;
}

.listing-signature-pad div {
    display: flex;
    gap: .45rem;
    justify-content: flex-end;
    margin-top: .5rem;
}

.templates-page {
    height: calc(100vh - 3.4rem);
    margin: -1.25rem -1.5rem -2rem;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    background: #dfe9f3;
    color: #001a35;
}

.templates-titlebar {
    min-height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid #b6c7d8;
    background: #eef4fb;
}

.templates-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.templates-title h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
}

.template-title-icon {
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(#ffffff, #d8e3ec);
    border: 1px solid #9db0c0;
    position: relative;
}

.template-title-icon::before {
    content: "";
    position: absolute;
    inset: 0.35rem;
    background: #7b8792;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6V2Zm8 1.5V8h4.5L14 3.5ZM8 11h9v1.5H8V11Zm0 4h9v1.5H8V15Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6V2Zm8 1.5V8h4.5L14 3.5ZM8 11h9v1.5H8V11Zm0 4h9v1.5H8V15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.templates-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.template-action {
    min-height: 1.95rem;
    padding: 0 0.9rem;
    border: 1px solid #8aa5bc;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
}

.template-action:hover,
.template-action:focus-visible {
    color: #111827;
    background: linear-gradient(#ffffff, #d8e7f2) !important;
}

.action-new { background: #54afe3; }
.action-open { background: #f28a2e; }
.action-save { background: #1fac5a; }
.action-preview { background: #743ddd; }
.action-delete { background: #e87670; }
.action-list { background: #ee8429; }
.action-close { background: #dc1f26; }
.action-help {
    min-width: 2.25rem;
    width: 2.25rem;
    padding: 0;
    border-radius: 50%;
    background: transparent url('/icons/ayuda.png') center / 28px 28px no-repeat;
    color: transparent;
    font-size: 0;
    box-shadow: 0 5px 12px rgba(13, 45, 73, .18);
}

.template-action.action-new,
.template-action.action-open,
.template-action.action-save,
.template-action.action-preview,
.template-action.action-delete,
.template-action.action-list,
.template-action.action-close {
    min-width: 2.5rem;
    width: 2.5rem;
    height: 2.35rem;
    min-height: 2.35rem;
    padding: 0;
    color: transparent;
    font-size: 0;
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.65rem 1.65rem;
}

.template-action.action-new {
    background-image: url('/icons/form/nuevo-registro.png');
}

.template-action.action-open {
    background-image: url('/icons/form/abrir-plantilla.png');
}

.template-action.action-preview {
    background-image: url('/icons/form/vista-previa-plantilla.png');
}

.template-action.action-save {
    background-image: url('/icons/form/grabar-registro.png');
}

.template-action.action-delete {
    background-image: url('/icons/form/borrar-registro.png');
}

.template-action.action-list {
    background-image: url('/icons/grid/listar.png');
}

.template-action.action-close {
    background-image: url('/icons/form/cerrar-ficha.png');
}

.template-action.action-new:hover,
.template-action.action-open:hover,
.template-action.action-save:hover,
.template-action.action-preview:hover,
.template-action.action-delete:hover,
.template-action.action-list:hover,
.template-action.action-close:hover,
.template-action.action-new:focus-visible,
.template-action.action-open:focus-visible,
.template-action.action-save:focus-visible,
.template-action.action-preview:focus-visible,
.template-action.action-delete:focus-visible,
.template-action.action-list:focus-visible,
.template-action.action-close:focus-visible {
    color: transparent;
}

.template-message {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #c5d4e2;
    background: #fff8d7;
    color: #384b5a;
    font-weight: 700;
}

.template-editor-shell {
    min-height: 0;
    overflow: hidden;
    display: block;
}

.template-action-cell {
    width: 42px;
    min-width: 42px;
    text-align: center !important;
}

.template-workspace {
    min-width: 0;
    min-height: 0;
    display: grid;
    height: 100%;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.template-meta {
    display: grid;
    grid-template-columns: minmax(300px, 430px) minmax(420px, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 0.45rem 0.9rem;
    background: #f5f8fb;
    border-bottom: 1px solid #c4d2df;
}

.template-meta label,
.template-formatbar label {
    display: grid;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.template-meta label {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
}

.template-formatbar {
    min-height: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid #c4d2df;
    background: #eaf2fb;
}

.template-formatbar label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.compact-select {
    min-width: 7.5rem;
    min-height: 1.8rem;
    padding-block: 0.15rem;
}

.paper-size-select {
    min-width: 9rem;
}

.compact-number {
    width: 4.7rem;
    min-height: 1.8rem;
    padding-block: 0.15rem;
}

.header-footer-number {
    width: 4.6rem;
}

.format-button,
.image-input-button {
    min-height: 1.95rem;
    padding: 0 0.65rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid #9ab1c3;
    border-radius: 4px;
    background: linear-gradient(#ffffff, #dbe8f2);
    color: #0d3154;
    font-size: 0.78rem;
    font-weight: 900;
}

.format-button.strong { font-weight: 900; }
.format-button.italic { font-style: italic; }
.format-button.underline { text-decoration: underline; }

.align-button {
    width: 2.25rem;
    padding-inline: 0;
}

.align-icon {
    display: block;
    width: 1.15rem;
    height: 0.95rem;
    background:
        linear-gradient(#0d3154, #0d3154) left 0 top 0 / var(--line-1, 100%) 2px no-repeat,
        linear-gradient(#0d3154, #0d3154) left var(--line-left-2, 0) top 5px / var(--line-2, 72%) 2px no-repeat,
        linear-gradient(#0d3154, #0d3154) left 0 bottom 0 / var(--line-3, 100%) 2px no-repeat;
}

.align-left-icon {
    --line-1: 100%;
    --line-2: 68%;
    --line-3: 86%;
}

.align-center-icon {
    --line-1: 100%;
    --line-2: 68%;
    --line-3: 86%;
    --line-left-2: 16%;
}

.align-right-icon {
    --line-1: 100%;
    --line-2: 68%;
    --line-3: 86%;
    background-position:
        right 0 top 0,
        right 0 top 5px,
        right 0 bottom 0;
}

.align-justify-icon {
    --line-1: 100%;
    --line-2: 100%;
    --line-3: 100%;
}

.merge-code-button {
    width: 2.25rem;
    padding-inline: 0;
}

.barcode-icon,
.qr-icon,
.table-icon {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
}

.barcode-icon {
    background:
        linear-gradient(90deg,
            #0d3154 0 10%,
            transparent 10% 18%,
            #0d3154 18% 25%,
            transparent 25% 34%,
            #0d3154 34% 43%,
            transparent 43% 49%,
            #0d3154 49% 53%,
            transparent 53% 62%,
            #0d3154 62% 74%,
            transparent 74% 82%,
            #0d3154 82% 88%,
            transparent 88% 100%);
}

.qr-icon {
    border: 2px solid #0d3154;
    background:
        linear-gradient(#0d3154, #0d3154) 3px 3px / 4px 4px no-repeat,
        linear-gradient(#0d3154, #0d3154) calc(100% - 3px) 3px / 4px 4px no-repeat,
        linear-gradient(#0d3154, #0d3154) 3px calc(100% - 3px) / 4px 4px no-repeat,
        repeating-linear-gradient(90deg, transparent 0 3px, #0d3154 3px 5px);
}

.table-icon {
    border: 2px solid #0d3154;
    background:
        linear-gradient(#0d3154, #0d3154) 0 33% / 100% 1px no-repeat,
        linear-gradient(#0d3154, #0d3154) 0 66% / 100% 1px no-repeat,
        linear-gradient(#0d3154, #0d3154) 33% 0 / 1px 100% no-repeat,
        linear-gradient(#0d3154, #0d3154) 66% 0 / 1px 100% no-repeat;
}

.table-tool-button {
    padding-inline: 0.5rem;
}

.table-color-control {
    min-height: 1.95rem;
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #9ab1c3;
    border-radius: 4px;
    background: var(--selected-color, #fff2cc);
    color: var(--selected-color-text, #001a35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.table-color-button {
    min-height: 1.95rem;
    padding: 0 0.65rem;
    display: inline-grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 0.78rem;
    font-weight: 900;
}

.table-color-picker {
    position: relative;
    width: 1.75rem;
    min-width: 1.75rem;
    border-left: 1px solid rgba(13, 49, 84, .28);
    background:
        linear-gradient(45deg, rgba(255,255,255,.5) 25%, transparent 25% 50%, rgba(255,255,255,.5) 50% 75%, transparent 75%) 0 0 / 8px 8px,
        var(--selected-color, #fff2cc);
    cursor: pointer;
}

.table-color-picker input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.template-page-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    min-height: 1.95rem;
    padding: 0 0.35rem;
    border: 1px solid #9ab1c3;
    border-radius: 4px;
    background: #f4f8fb;
    color: #0d3154;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.template-page-nav span {
    min-width: 5.8rem;
    text-align: center;
}

.template-page-nav .page-nav-button {
    width: 1.7rem;
    min-width: 1.7rem;
    min-height: 1.55rem;
    padding: 0;
    font-size: 0.72rem;
}

.template-page-nav .page-nav-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.template-merge-code {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

.template-edit-table {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0.35rem 0;
    min-width: 120px;
}

.template-edit-table td,
.template-edit-table th {
    min-width: 44px;
    height: 1.6rem;
    padding: 0.25rem 0.35rem;
    border: 1px solid #526577;
    vertical-align: top;
}

.template-edit-table .template-table-cell-selected {
    outline: 2px solid #8f5fd7;
    outline-offset: -2px;
    background-color: rgba(205, 184, 255, 0.48) !important;
    box-shadow: inset 0 0 0 1px rgba(118, 74, 188, 0.22);
}

.image-input-button {
    position: relative;
    overflow: hidden;
    background: #5ab3e6;
    color: #001a35;
}

.image-input-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.template-body {
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
}

.template-fields {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: 0.75rem;
    border-right: 1px solid #b8c8d6;
    background: #f7fafc;
}

.template-fields h2 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 900;
}

.template-fields p {
    margin: 0 0 0.7rem;
    color: #40515f;
    font-size: 0.78rem;
}

.template-fields-list {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    align-content: start;
    gap: 0.15rem;
}

.template-fields-list button {
    min-height: 1.8rem;
    padding: 0 0.25rem;
    border: 0;
    background: transparent;
    color: #001a35;
    text-align: left;
    font-size: 0.9rem;
}

.template-fields-list button:hover {
    background: #d9ecfb;
}

.template-document-zone {
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: auto;
    padding: 1.7rem 2rem;
    background: #d1d1d1;
}

.template-page-canvas {
    --paper-width: 210mm;
    --paper-height: 297mm;
    --ruler-size: 7mm;
    width: calc(var(--paper-width) + var(--ruler-size));
    min-height: calc(var(--paper-height) + var(--ruler-size));
    display: grid;
    grid-template-columns: var(--ruler-size) var(--paper-width);
    grid-template-rows: var(--ruler-size) var(--paper-height);
    margin: 0 auto;
}

.template-page-canvas.paper-letter {
    --paper-width: 216mm;
    --paper-height: 279mm;
}

.template-ruler-corner {
    grid-column: 1;
    grid-row: 1;
    background: #ffffff;
    border-right: 1px solid #a2a2a2;
    border-bottom: 1px solid #a2a2a2;
}

.template-ruler-horizontal,
.template-ruler-vertical {
    position: relative;
    overflow: visible;
    background-color: #ffffff;
}

.template-ruler-horizontal {
    grid-column: 2;
    grid-row: 1;
    height: var(--ruler-size);
    border-bottom: 1px solid #a2a2a2;
    background-image:
        repeating-linear-gradient(to right, #d5d5d5 0 1px, transparent 1px 1mm),
        repeating-linear-gradient(to right, transparent 0 4.8mm, #9a9a9a 4.8mm 5mm),
        repeating-linear-gradient(to right, transparent 0 9.7mm, #1f2937 9.7mm 10mm);
}

.template-ruler-horizontal span {
    position: absolute;
    top: 1.4mm;
    color: #111111;
    font-size: 0.62rem;
    line-height: 1;
    transform: translateX(-1mm);
}

.template-ruler-vertical {
    grid-column: 1;
    grid-row: 2;
    width: var(--ruler-size);
    height: var(--paper-height);
    border-right: 1px solid #a2a2a2;
    background-image:
        repeating-linear-gradient(to bottom, #d5d5d5 0 1px, transparent 1px 1mm),
        repeating-linear-gradient(to bottom, transparent 0 4.8mm, #9a9a9a 4.8mm 5mm),
        repeating-linear-gradient(to bottom, transparent 0 9.7mm, #1f2937 9.7mm 10mm);
}

.template-ruler-vertical span {
    position: absolute;
    left: 1.25mm;
    color: #111111;
    font-size: 0.62rem;
    line-height: 1;
    writing-mode: vertical-rl;
    transform: translateY(-1mm);
}

.template-margin-handle {
    position: absolute;
    z-index: 4;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid #062d55;
    background: #0f4e85;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .32);
}

.template-margin-handle.horizontal {
    bottom: -1px;
    transform: translateX(-50%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    cursor: ew-resize;
}

.template-margin-handle.vertical {
    right: -1px;
    transform: translateY(-50%);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    cursor: ns-resize;
}

.template-margin-handle:hover,
.template-margin-handle:focus-visible {
    background: #0a63a9;
    border-color: #001f3d;
    outline: 2px solid rgba(15, 78, 133, .28);
    outline-offset: 2px;
}

body.template-margin-dragging {
    cursor: grabbing;
    user-select: none;
}

.involved-form-surface {
    display: grid;
    gap: 0.75rem;
}

.involved-summary,
.involved-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.involved-summary .wide,
.involved-form-grid .wide {
    grid-column: span 2;
}

.involved-form-grid .full {
    grid-column: 1 / -1;
}

.involved-summary label,
.involved-form-grid label {
    display: grid;
    gap: 0.25rem;
    font-weight: 800;
    font-size: 0.84rem;
}

.check-field {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem !important;
    min-height: 2.35rem;
}

.record-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    border-bottom: 1px solid #bfd0df;
}

.record-tabs button {
    min-height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid #9ab1c3;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: #edf4fa;
    color: #0d3154;
    font-weight: 700;
}

.record-tabs button.active {
    background: #ffffff;
    color: #001a35;
}

.image-field {
    min-height: 8.8rem;
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.35rem;
    align-content: stretch;
    padding: 0.55rem;
    border: 1px solid #c8d6e1;
    border-radius: 4px;
    background: #f7fbff;
    font-weight: 500;
    font-size: 0.84rem;
}

.image-field img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

.image-field input[type="file"] {
    display: none;
}

.audit-line {
    color: #486176;
    font-size: 0.84rem;
}

.involved-interest-row td {
    background: #fff0c2 !important;
}

.involved-people-page .page-heading {
    align-items: center;
}

.app-content:has(.involved-people-page .involved-form-surface) {
    height: calc(100vh - 3.4rem);
    overflow: hidden;
}

.involved-people-page:has(.involved-form-surface) {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.45rem;
    overflow: hidden;
}

.involved-people-page:has(.involved-form-surface) > .page-heading {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: -0.25rem 0 0;
    padding: 0.25rem 0 0.35rem;
    background: #eaf2f7;
}

.involved-form-surface {
    gap: 0.45rem;
    padding: 0.55rem;
    background: rgba(255, 255, 255, .96);
    min-height: 0;
    overflow: auto;
}

.person-record-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
}

.person-card-header {
    min-height: 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid #bfd4e6;
    border-radius: 6px;
    background: linear-gradient(135deg, #f8fbff, #edf6fc);
}

.person-identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.person-form-label {
    color: #597084;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.person-identity h2 {
    margin: 0;
    color: #001a35;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.person-doi-large {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: #dcebf6;
    color: #0d3154;
    font-size: 0.82rem;
    font-weight: 800;
}

.person-interest-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #dce7f0;
    border-radius: 4px;
    background: #ffffff;
    color: #001a35;
    font-size: 0.76rem;
    font-weight: 500;
    white-space: nowrap;
}

.person-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.person-tags span,
.person-tags strong {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: #dcebf6;
    color: #0d3154;
    font-size: 0.74rem;
}

.person-tags strong {
    background: #fff0c2;
    color: #775300;
}

.person-photo-panel {
    position: relative;
    display: block;
    align-self: stretch;
    min-width: 10.5rem;
}

.person-photo {
    position: relative;
    min-height: 13rem;
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid #b9cad8;
    border-radius: 6px;
    background: #ffffff;
    color: #7a8da0;
    font-weight: 800;
    cursor: zoom-in;
}

.person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.person-photo-actions {
    position: absolute;
    left: 50%;
    bottom: 0.55rem;
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    transform: translateX(-50%);
    z-index: 1;
}

.person-photo-actions .mini-icon-button {
    width: 2.25rem;
    height: 2rem;
    border: 1px solid #9ab1c3;
}

.person-file-button {
    min-height: 1.65rem;
    display: inline-grid;
    place-items: center;
    padding: 0 0.55rem;
    border: 1px solid #9ab1c3;
    border-radius: 4px;
    background: linear-gradient(#ffffff, #e5f0f8);
    color: #0d3154;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.person-file-button input[type="file"] {
    display: none;
}

.person-flat-section {
    display: grid;
    gap: 0.42rem;
    padding: 0.45rem 0.55rem 0.55rem;
    border: 1px solid #cbd9e4;
    border-radius: 6px;
    background: #ffffff;
}

.person-flat-section h3 {
    margin: 0;
    padding-bottom: 0.22rem;
    border-bottom: 1px solid #dce7f0;
    color: #0b63b6;
    font-size: 0.9rem;
    font-weight: 900;
}

.person-flat-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0.45rem;
    align-items: start;
}

.person-flat-column {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    align-content: start;
}

.person-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(112px, 1fr));
    gap: 0.32rem 0.45rem;
    align-items: end;
}

.person-form-grid.dense {
    grid-template-columns: repeat(4, minmax(112px, 1fr));
}

.person-form-grid.two-cols {
    grid-template-columns: repeat(2, minmax(112px, 1fr));
}

.person-form-grid label {
    display: grid;
    gap: 0.14rem;
    color: #001a35;
    font-size: 0.72rem;
    font-weight: 500;
}

.person-form-grid .form-control,
.person-form-grid .form-select,
.person-form-grid textarea.form-control {
    min-height: 1.75rem;
    padding: 0.18rem 0.45rem;
    font-size: 0.82rem;
}

.person-form-grid textarea.form-control {
    min-height: 3.7rem;
}

.person-form-grid .span-2 {
    grid-column: span 2;
}

.person-form-grid .span-3 {
    grid-column: span 3;
}

.person-form-grid .full {
    grid-column: 1 / -1;
}

.person-section-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.7rem;
}

.person-media-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 0.4rem;
    align-items: stretch;
}

.person-media-grid.document-media {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.person-media-grid.permit-media {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.image-field.compact {
    min-height: 9rem;
    padding: 0.35rem;
    gap: 0.25rem;
    font-size: 0.72rem;
}

.image-field-title {
    color: #001a35;
    font-weight: 700;
}

.image-preview-box {
    position: relative;
    min-height: 6.7rem;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d5e0ea;
    border-radius: 4px;
    background: #ffffff;
    cursor: zoom-in;
}

.image-preview-box:empty::before {
    content: "";
    width: 100%;
    height: 100%;
    background: #f2f7fb;
}

.image-field-actions {
    position: absolute;
    left: 50%;
    bottom: 0.55rem;
    display: flex;
    gap: 0.35rem;
    transform: translateX(-50%);
    z-index: 1;
}

.image-field-actions .mini-icon-button {
    width: 2.05rem;
    height: 1.8rem;
    border: 1px solid #8fb4d5;
    box-shadow: 0 1px 2px rgba(13, 49, 84, .16);
}

.person-read-dni-button {
    min-height: 1.8rem;
    width: fit-content;
    margin-top: 0.35rem;
    padding: 0 0.85rem;
    align-self: start;
    border: 1px solid #8fb4d5;
    border-radius: 4px;
    background: linear-gradient(#f4f9ff, #d7e9f8);
    color: #0d3154;
    font-weight: 900;
}

.person-document-section {
    padding-bottom: 0.35rem;
}

.person-document-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10.5rem;
    gap: 0.65rem;
    align-items: stretch;
}

.person-document-main {
    min-width: 0;
}

.person-document-main h3 {
    margin: 0 0 0.38rem;
    padding-bottom: 0.22rem;
    border-bottom: 1px solid #dce7f0;
    color: #0b63b6;
    font-size: 0.9rem;
    font-weight: 900;
}

.person-right-pane .person-flat-section {
    background: #f8fbff;
}

.person-contact-section {
    margin-top: -0.15rem;
}

.person-image-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(16, 31, 46, .62);
}

.person-image-preview-dialog {
    width: min(1100px, 96vw);
    height: min(820px, 92vh);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid #b9cad8;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

.person-image-preview-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #0b63b6;
}

.person-image-preview-dialog header button {
    min-width: 2rem;
    min-height: 2rem;
    border: 1px solid #d71920;
    border-radius: 4px;
    background: #ffffff;
    color: #d71920;
    font-size: 1.3rem;
    font-weight: 800;
}

.person-image-preview-dialog img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f7fbff;
}

.audit-line {
    font-size: 0.74rem;
}

@media (max-width: 1100px) {
    .person-record-layout,
    .person-card-header,
    .person-document-layout,
    .person-section-pair,
    .person-flat-layout {
        grid-template-columns: 1fr;
    }

    .person-photo-panel {
        max-width: 14rem;
        justify-self: start;
    }

    .person-form-grid,
    .person-form-grid.two-cols,
    .person-media-grid,
    .person-media-grid.permit-media {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 650px) {
    .person-identity {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .person-card-header {
        grid-template-columns: 1fr;
    }

    .person-form-grid,
    .person-form-grid.two-cols,
    .person-media-grid,
    .person-media-grid.permit-media {
        grid-template-columns: 1fr;
    }

    .person-form-grid .span-2 {
        grid-column: auto;
    }

    .person-form-grid .span-3 {
        grid-column: auto;
    }
}

.template-paper,
.template-preview-paper {
    background: #ffffff;
    color: #17212b;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.template-paper {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    width: var(--paper-width);
    height: var(--paper-height);
    min-height: var(--paper-height);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(var(--header-height, 24mm), auto) minmax(0, 1fr) minmax(var(--footer-height, 18mm), auto);
    gap: 4mm;
    overflow: hidden;
}

.template-paper-extra {
    grid-column: 2;
    grid-row: auto;
    position: relative;
    width: var(--paper-width);
    height: var(--paper-height);
    min-height: var(--paper-height);
    margin-top: 10mm;
}

.template-paper-extra .template-repeated-region {
    pointer-events: none;
    user-select: none;
}

.template-margin-box {
    position: absolute;
    z-index: 1;
    inset: var(--margin-top, 20mm) var(--margin-right, 20mm) var(--margin-bottom, 20mm) var(--margin-left, 20mm);
    border: 1px dashed rgba(10, 78, 139, .72);
    box-shadow: inset 0 0 0 1px rgba(10, 78, 139, .16);
    pointer-events: none;
}

.template-paper > .template-editor-region {
    position: relative;
    z-index: 2;
    min-height: 0;
}

.template-preview-paper.paper-a4,
.paper-a4:not(.template-page-canvas) {
    width: 210mm;
    min-height: 297mm;
}

.template-preview-paper.paper-letter,
.paper-letter:not(.template-page-canvas) {
    width: 216mm;
    min-height: 279mm;
}

.template-editor {
    outline: none;
    color: #17212b;
    font-size: 11pt;
}

.template-editor-region {
    outline: none;
    color: #17212b;
    font-size: 11pt;
}

.template-header-editor,
.template-footer-editor {
    border: 1px dashed #c6d2dc;
    color: #526577;
}

.template-header-editor {
    min-height: var(--header-height, 24mm);
}

.template-footer-editor {
    min-height: var(--footer-height, 18mm);
}

.template-editor {
    min-height: 0;
    overflow: hidden;
}

.template-editor-region:focus {
    outline: 2px solid rgba(29, 95, 153, 0.22);
    outline-offset: 2px;
}

.template-editor-region img.template-resizable-image {
    max-width: 100%;
    height: auto;
}

.template-editor-region img.template-image-selected {
    outline: 2px solid #1d5f99;
    outline-offset: 3px;
}

.template-editor-region img.template-image-selected::selection {
    background: transparent;
}

.template-header-editor:empty::before {
    content: "Cabecera";
    color: #8a9bb2;
}

.template-editor:empty::before {
    content: "Diseñe aquí la plantilla del documento";
    color: #8a9bb2;
}

.template-footer-editor:empty::before {
    content: "Pie";
    color: #8a9bb2;
}

.template-preview-paper {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(var(--header-height, 24mm), auto) minmax(0, 1fr) minmax(var(--footer-height, 18mm), auto);
    gap: 4mm;
}

.template-preview-header,
.template-preview-body,
.template-preview-footer {
    color: #17212b;
    font-size: 11pt;
}

.template-preview-header,
.template-preview-footer {
    color: #526577;
}

.template-preview-dialog {
    width: min(980px, 96vw);
    max-height: 92vh;
    overflow: auto;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #b9c7d3;
    border-radius: 6px;
    background: #e5eef7;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.template-preview-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.template-preview-dialog h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 900;
}

.template-open-dialog {
    width: min(760px, 94vw);
    max-height: 86vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #b9c7d3;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.template-open-dialog header,
.template-open-dialog footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

.template-open-dialog header h2 {
    margin: 0 auto 0 0;
    font-size: 1.15rem;
    font-weight: 900;
}

.template-open-grid {
    min-width: 100%;
    font-size: 0.82rem;
}

@media (max-width: 900px) {
    .complaint-form-grid {
        grid-template-columns: 1fr;
    }

    .complaint-form-grid label.wide {
        grid-column: auto;
    }
}

@media print {
    @page {
        size: A4 landscape;
        margin: 9mm;
    }

    @page template-document {
        size: auto;
        margin: 0;
    }

    body {
        background: #ffffff !important;
    }

    body * {
        visibility: hidden !important;
    }

    .no-print,
    .sidebar,
    .app-toolbar,
    .grid-config-overlay {
        display: none !important;
    }

    .print-listing,
    .print-listing * {
        visibility: visible !important;
    }

    .print-listing {
        display: block !important;
        position: absolute;
        inset: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #ffffff !important;
    }

    body.template-printing .template-paper,
    body.template-printing .template-paper * {
        visibility: visible !important;
    }

    body.template-printing .template-paper {
        page: template-document;
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        background: #ffffff !important;
    }

    body.template-printing .template-margin-box,
    body.template-printing .template-header-editor:empty::before,
    body.template-printing .template-editor:empty::before,
    body.template-printing .template-footer-editor:empty::before {
        display: none !important;
        visibility: hidden !important;
    }

    body.template-printing .template-editor-region,
    body.template-printing .template-header-editor,
    body.template-printing .template-footer-editor {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        color: #17212b !important;
    }

    .page,
    main,
    .app-content,
    .module-page,
    .work-surface {
        display: block !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .print-area {
        overflow: visible !important;
    }

    .grid-table-wrap {
        overflow: visible !important;
    }

    .data-grid {
        font-size: 8pt !important;
    }

    .print-listing-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 0.3rem;
        color: #334155;
        font-size: 6pt;
    }
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Se ha producido un error.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

@media (max-width: 900px) {
    .metric-grid,
    .split-workspace {
        grid-template-columns: 1fr;
    }

    .record-card {
        position: static;
    }

    .activity-list div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .activity-list em {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-row .form-control,
    .filter-row .form-select {
        min-width: 100%;
        width: 100%;
    }

    .data-grid {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    .grid-page {
        height: auto;
        min-height: calc(100vh - 5.6rem);
        overflow: visible;
        grid-template-rows: none;
    }

    .grid-page > .page-heading,
    .page-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 0.65rem;
    }

    .page-heading h1 {
        font-size: 1.35rem;
    }

    .grid-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 0.45rem;
        width: 100%;
    }

    .grid-tool {
        width: 100%;
        min-width: 0;
        min-height: 2.45rem;
        padding: 0 0.45rem;
        white-space: normal;
        line-height: 1.05;
    }

    .grid-tool.tool-help {
        justify-self: end;
        width: 2.45rem;
        min-width: 2.45rem;
        grid-column: auto;
    }

    .grid-filter-panel,
    .traffic-actions-filters,
    .ordinance-direct-filters {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 0.6rem;
        padding: 0.75rem;
    }

    .grid-filter-panel label,
    .traffic-actions-filters label,
    .ordinance-direct-filters label {
        width: 100%;
        min-width: 0;
    }

    .grid-filter-panel .form-control,
    .grid-filter-panel .form-select,
    .traffic-actions-filters .form-control,
    .traffic-actions-filters .form-select,
    .ordinance-direct-filters .form-control,
    .ordinance-direct-filters .form-select {
        width: 100%;
        min-width: 0;
    }

    .grid-surface {
        min-height: 55vh;
        overflow: hidden;
    }

    .grid-status-row {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.65rem 0.75rem;
        line-height: 1.25;
    }

    .grid-table-wrap {
        max-height: 58vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .facilges-grid {
        font-size: 0.8rem;
    }

    .grid-pager {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.5rem;
    }

    .grid-pager button {
        flex: 1 1 calc(50% - 0.35rem);
        min-width: 7rem;
    }

    .grid-pager span {
        flex: 1 1 100%;
        order: -1;
        text-align: center;
    }

    .filter-dialog,
    .facilges-filter-dialog {
        width: min(100%, calc(100vw - 1rem));
        max-height: calc(100vh - 1rem);
        overflow: auto;
    }

    .filter-dialog-head {
        display: none;
    }

    .filter-dialog-row {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        padding: 0.6rem 0;
    }
}

@media (max-width: 420px) {
    .grid-toolbar {
        grid-template-columns: 1fr;
    }

    .grid-tool.tool-help {
        justify-self: start;
    }
}

.multa-login-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2.5rem);
}

.multa-login-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(11, 27, 42, 0.30), rgba(11, 27, 42, 0.08) 45%, rgba(11, 27, 42, 0.24)),
        radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.05), transparent 36%);
    opacity: 1;
    pointer-events: none;
}

.multa-login-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 980px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #ffffff;
}

.multa-login-panel .login-brand {
    display: grid;
    justify-items: start;
    gap: clamp(1rem, 3vw, 1.6rem);
}

.multa-login-panel .login-logo {
    width: clamp(9rem, 22vw, 13.5rem);
    height: auto;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .34));
}

.multa-login-panel .eyebrow {
    margin: 0 0 .4rem;
    color: #d8b64c;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.multa-login-panel h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.3rem, 7vw, 5.4rem);
    font-weight: 900;
    line-height: .95;
}

.multa-login-panel .login-copy {
    max-width: 34rem;
    margin: 1rem 0 0;
    color: rgba(255,255,255,.78);
    font-size: 1.05rem;
}

.multa-login-panel .login-form {
    display: grid;
    gap: 1rem;
    padding: clamp(1.1rem, 3vw, 1.45rem);
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
    color: #17212b;
}

.field-group {
    display: grid;
    gap: .4rem;
}

.field-group label {
    font-size: .86rem;
    font-weight: 800;
}

.multa-login-panel .form-control {
    min-height: 3rem;
    border-radius: 6px;
}

.inline-button-field {
    position: relative;
}

.inline-button-field.password-field .form-control {
    padding-right: 3.7rem;
}

.inline-field-button {
    position: absolute;
    top: 50%;
    right: .35rem;
    display: inline-grid;
    place-items: center;
    min-height: 2.15rem;
    border: 0;
    border-radius: 6px;
    transform: translateY(-50%);
}

.password-toggle-button {
    width: 2.75rem;
    min-width: 2.75rem;
    background: #174a80;
}

.password-toggle-button::before {
    content: "";
    width: 1.18rem;
    height: .78rem;
    border: 2px solid #fff;
    border-radius: 999px / 760px;
}

.password-toggle-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.password-toggle-button.is-visible::after {
    width: 1.45rem;
    height: 2px;
    border-radius: 0;
    transform: translate(-50%, -50%) rotate(-35deg);
}

.primary-action {
    min-height: 3.1rem;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    background: #14532d;
    font-weight: 800;
}

.primary-action:hover {
    background: #0f3f22;
}

.primary-action:disabled {
    opacity: .72;
}

.multa-login-panel .login-error {
    background: #fdecec;
    border: 1px solid #f5c2c7;
    color: #8a1f2d;
    border-radius: 4px;
    padding: 0.65rem 0.75rem;
    font-size: 0.86rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    .multa-login-panel {
        grid-template-columns: 1fr;
        max-width: 430px;
    }

    .multa-login-panel h1 {
        font-size: 3rem;
    }

    .multa-login-shell::after {
        opacity: 1;
    }
}

.template-table-dialog {
    min-width: 420px;
}

.table-dialog-fields {
    display: flex;
    gap: 0.75rem;
    align-items: end;
}

.table-dialog-fields label {
    display: grid;
    gap: 0.25rem;
    font-weight: 800;
    color: #17324d;
}

.tool-excel {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    overflow: hidden;
    color: #0c5b27;
    background: linear-gradient(#f3fff6, #bfe9cc);
    border-color: #2d8c4b;
}

.tool-excel:hover {
    color: #000;
}

.tool-excel input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.excel-icon {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    color: #fff;
    background: #16823d;
    border: 1px solid #0f642e;
    border-radius: 2px;
    font-size: .62rem;
    font-weight: 900;
}

.excel-icon::before {
    content: "X";
}

.ordinance-direct-filters {
    grid-template-columns: minmax(260px, 2fr) repeat(6, minmax(130px, 1fr));
}

.ordinance-form-surface {
    display: grid;
    gap: 1rem;
    min-height: calc(100vh - 11rem);
    align-content: start;
    padding-bottom: 1.25rem;
}

.ordinance-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.ordinance-form-grid label {
    display: grid;
    gap: .35rem;
    margin: 0;
    color: #203746;
    font-size: .84rem;
    font-weight: 800;
}

.ordinance-form-grid .full {
    grid-column: 1 / -1;
}

.ordinance-legal-text {
    min-height: 7rem;
    resize: vertical;
    overflow-y: auto;
}

.ordinance-form-grid .workflow-notes {
    min-height: 7rem;
    resize: vertical;
    overflow-y: auto;
}

@media (min-height: 850px) {
    .ordinance-legal-text,
    .ordinance-form-grid .workflow-notes {
        min-height: 9rem;
    }
}

@media (max-width: 1100px) {
    .ordinance-direct-filters,
    .ordinance-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .ordinance-form-grid {
        grid-template-columns: 1fr;
    }
}

.document-box-overlay {
    align-items: stretch;
    padding: .7rem;
}

.document-box-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1760px, calc(100vw - 1.4rem));
    height: min(92vh, 900px);
    margin: auto;
    overflow: hidden;
    border: 1px solid #aebfcd;
    background: #e7f0f7;
    box-shadow: 0 22px 52px rgba(16, 32, 45, .32);
}

.document-box-page {
    min-height: calc(100vh - 76px);
    padding: 1rem;
    background: #edf4f8;
}

.document-box-page-dialog {
    width: 100%;
    height: calc(100vh - 108px);
    margin: 0;
    border-radius: 4px;
    box-shadow: none;
}

.document-box-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid #ccd9e4;
    background: #fff;
}

.document-box-header h2 {
    margin: 0;
    color: #001b33;
    font-size: 1.65rem;
    font-weight: 900;
}

.document-box-header p {
    margin: .2rem 0 0;
    color: #566f83;
    font-size: .95rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.document-box-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: flex-end;
}

.document-box-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
}

.document-box-actions .btn {
    min-width: 0;
    border-radius: 4px;
    font-weight: 700;
}

.document-box-toolbar .btn-help {
    min-width: 2.4rem;
    border-color: #155fa8;
    background: linear-gradient(#2f86d1, #155fa8);
    color: #fff;
    font-weight: 900;
}

.document-box-toolbar .btn-help:hover,
.document-box-toolbar .btn-help:focus-visible {
    border-color: #0f4e8c;
    background: linear-gradient(#49a0e7, #1c70bc);
    color: #fff;
}

.document-box-file-button {
    position: relative;
    overflow: hidden;
}

.document-box-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.document-box-message {
    flex: 0 0 auto;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid #eadb9a;
    background: #fff7d6;
    color: #5d4a00;
    font-weight: 800;
}

.document-box-message.success {
    border-color: #8cc99b;
    background: #e9f7ec;
    color: #08601d;
}

.document-box-message.error {
    border-color: #f1a8a8;
    background: #fff0f0;
    color: #9c1010;
}

.document-box-message.warning {
    border-color: #f0cd7b;
    background: #fff7d6;
    color: #6f4d00;
}

.document-box-layout {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(720px, 1.15fr) minmax(520px, .85fr);
    gap: .85rem;
    padding: 1rem;
}

.document-box-list,
.document-box-preview {
    display: flex;
    min-height: 0;
    flex-direction: column;
    background: #fff;
}

.document-box-list h3,
.document-box-preview h3 {
    flex: 0 0 auto;
    margin: 0;
    padding: .85rem 1rem;
    border-bottom: 1px solid #d3dee8;
    color: #001b33;
    font-size: 1rem;
    font-weight: 900;
}

.document-box-preview-title {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 1px solid #d3dee8;
    background: #fff;
}

.document-box-preview-title h3 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    border-bottom: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-box-preview-title .btn {
    flex: 0 0 auto;
    margin-right: .8rem;
}

.document-box-email-panel {
    flex: 0 0 auto;
    margin: .8rem;
}

.document-box-grid-wrap,
.document-box-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.document-box-grid,
.document-box-table {
    width: 100%;
    min-width: 620px;
    table-layout: fixed;
}

.document-box-grid th:nth-child(1),
.document-box-grid td:nth-child(1),
.document-box-table th:nth-child(1),
.document-box-table td:nth-child(1) {
    width: 3.4rem;
}

.document-box-grid th:nth-child(2),
.document-box-grid td:nth-child(2),
.document-box-table th:nth-child(2),
.document-box-table td:nth-child(2) {
    width: 5.3rem;
}

.document-box-grid th:nth-child(3),
.document-box-grid td:nth-child(3),
.document-box-table th:nth-child(3),
.document-box-table td:nth-child(3) {
    width: 8rem;
}

.document-box-grid th:nth-child(4),
.document-box-grid td:nth-child(4),
.document-box-table th:nth-child(4),
.document-box-table td:nth-child(4) {
    width: 10rem;
}

.document-box-grid th:nth-child(5),
.document-box-grid td:nth-child(5),
.document-box-table th:nth-child(5),
.document-box-table td:nth-child(5) {
    width: auto;
}

.document-box-grid th,
.document-box-table th {
    background: #dfebf4;
    color: #243a4a;
}

.document-box-grid td,
.document-box-table td {
    vertical-align: middle;
}

.document-box-file-name {
    overflow: hidden;
    color: #18364f;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: normal;
}

.document-box-grid .selected-row td {
    background: #d7ebff;
    border-top-color: #54a3f4;
    border-bottom-color: #54a3f4;
}

.document-box-number {
    width: 5rem;
}

.document-box-date {
    width: 9rem;
}

.document-box-notes {
    width: 100%;
    min-width: 13rem;
    resize: vertical;
}

.document-box-delete-button {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #e29292;
    border-radius: 4px;
    background: #fff2f2;
    color: #b20d0d;
    cursor: pointer;
}

.document-box-delete-button:hover,
.document-box-delete-button:focus-visible {
    background: #b20d0d;
    color: #fff;
}

.document-box-delete-button::before {
    width: 1rem;
    height: 1rem;
    content: "";
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.document-box-confirm-layer {
    position: absolute;
    z-index: 8;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 29, 41, .48);
}

.document-box-confirm-dialog {
    width: min(460px, 100%);
    padding: 1.1rem;
    border: 1px solid #bac8d4;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .25);
}

.document-box-confirm-dialog h3 {
    margin: 0 0 .6rem;
    color: #001b33;
    font-size: 1.25rem;
    font-weight: 900;
}

.document-box-confirm-dialog p {
    margin: 0 0 1rem;
}

.document-box-confirm-actions {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
}

.document-box-preview-surface,
.document-box-preview-frame {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    place-items: center;
    overflow: auto;
    padding: .35rem;
    background: #fff;
}

.document-box-preview-surface iframe,
.document-box-preview-surface img,
.document-box-preview-frame iframe,
.document-box-preview-frame img {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    object-fit: contain;
}

.document-box-preview-frame iframe,
.document-box-preview-surface iframe {
    display: block;
    background: #fff;
}

.document-box-html-preview {
    width: 210mm;
    min-height: 297mm;
    background: #fff;
    box-shadow: 0 8px 24px rgba(30, 48, 62, .16);
}

.document-box-html-preview > .traffic-document-page {
    width: 210mm;
    min-height: 297mm;
    margin: 0;
    box-shadow: none;
}

.ordinance-denuncias-page .grid-table-wrap {
    max-height: calc(100vh - 18rem);
    overflow: auto;
}

.ordinance-denuncias-page .ordinance-grid th,
.ordinance-denuncias-page .ordinance-grid td {
    height: 2.35rem;
    min-height: 2.35rem;
    padding: .28rem .5rem;
    line-height: 1.2;
    vertical-align: middle;
    white-space: nowrap;
}

.ordinance-denuncias-page .ordinance-grid tbody tr {
    height: 2.35rem;
}

.ordinance-denuncias-page .ordinance-grid .grid-edit-column,
.ordinance-denuncias-page .ordinance-grid .grid-delete-column,
.ordinance-denuncias-page .ordinance-grid .grid-act-column {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    text-align: center;
}

.traffic-actions-page .tool-mass {
    border-color: #5b21b6;
    background: #7c3aed;
    color: #fff;
}

.traffic-actions-page .grid-toolbar .tool-mass {
    color: #5b21b6;
    border-color: #c4b5fd;
    background: linear-gradient(#f4f0ff, #ddd6fe);
}

.traffic-actions-page .tool-export {
    border-color: #0f6b30;
    background: #14863d;
    color: #fff;
}

.traffic-actions-page .grid-toolbar .tool-export {
    color: #17603c;
    border-color: #8fd3ad;
    background: linear-gradient(#e8f8ef, #c8efd8);
}

.traffic-actions-page .tool-mass:hover,
.traffic-actions-page .tool-export:hover {
    color: #000;
}

.traffic-actions-filters {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) repeat(6, minmax(145px, 1fr));
    align-items: end;
    gap: .75rem;
}

.traffic-actions-filters label,
.traffic-action-form-grid label {
    min-width: 0;
}

.direct-filter-check {
    min-height: 2.35rem;
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
}

.traffic-action-form-surface {
    padding: .6rem .85rem;
    border: 1px solid #cedbe6;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 40, 60, .08);
    min-height: auto;
    max-height: calc(100vh - 150px);
    overflow: auto;
    margin-bottom: 0;
}

.traffic-action-detail-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .55rem;
    padding: .5rem .6rem;
}

.traffic-action-form-surface .form-card-header {
    margin-bottom: .4rem;
}

.traffic-action-form-surface .form-card-header h2 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.15;
}

.traffic-action-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem .75rem;
    align-items: end;
}

.traffic-action-form-grid label {
    color: #001b33;
    font-weight: 800;
}

.traffic-action-form-grid .wide {
    grid-column: span 2;
}

.traffic-action-form-grid .full {
    grid-column: 1 / -1;
}

.traffic-action-form-grid .form-control,
.traffic-action-form-grid .form-select {
    min-height: 2.15rem;
    padding: .35rem .65rem;
}

.traffic-action-form-grid textarea {
    min-height: 56px;
    resize: vertical;
}

.traffic-action-form-grid .checkbox-field {
    align-self: end;
    padding-bottom: .25rem;
}

.traffic-action-form-grid .checkbox-field .checkbox-line {
    min-height: 2.35rem;
    align-items: center;
}

.audit-line {
    color: #49657c;
    font-size: .85rem;
}

.native-confirm-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .75rem 0;
    padding: .8rem 1rem;
    border: 1px solid #f0c36d;
    border-radius: 4px;
    background: #fff8d8;
    color: #5a4100;
    font-weight: 800;
}

.native-confirm-bar > div {
    display: flex;
    gap: .5rem;
}

.delete-row-button {
    display: inline-flex;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border: 1px solid #e29292;
    border-radius: 4px;
    background: #fff2f2;
    color: #b20d0d;
    cursor: pointer;
    font-size: 0;
    line-height: 1;
}

.delete-row-button:hover,
.delete-row-button:focus-visible {
    background: #b20d0d;
    color: #fff;
}

.delete-row-button::before {
    position: static;
    inset: auto;
    display: block;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    content: "";
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 980px) {
    .document-box-overlay {
        padding: .5rem;
    }

    .document-box-dialog {
        height: calc(100vh - 1rem);
    }

    .document-box-header,
    .document-box-layout {
        grid-template-columns: 1fr;
    }

    .document-box-header {
        align-items: stretch;
        flex-direction: column;
    }

    .document-box-layout {
        display: flex;
        flex-direction: column;
    }

    .document-box-html-preview {
        width: 100%;
        min-height: 60vh;
    }

    .document-box-html-preview > .traffic-document-page {
        width: 100%;
    }

    .traffic-actions-filters,
    .traffic-action-form-grid {
        grid-template-columns: 1fr;
    }

    .traffic-action-form-grid .wide {
        grid-column: auto;
    }

    .native-confirm-bar {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Form action color convention: pastel backgrounds shared by every ficha toolbar. */
:root {
    --form-action-new-bg: #d9ecff;
    --form-action-new-border: #8dbfe8;
    --form-action-delete-bg: #ffdada;
    --form-action-delete-border: #ee9a9a;
    --form-action-box-bg: #ffe3dc;
    --form-action-box-border: #e9a08f;
    --form-action-save-bg: #dcf4df;
    --form-action-save-border: #8fd09a;
    --form-action-aux-bg: #fff3bf;
    --form-action-aux-border: #e5c85d;
    --form-action-template-bg: #ffffff;
    --form-action-template-border: #cbd5df;
}

.complaint-action.action-new,
.workflow-form-toolbar .btn-form-back,
.template-action.action-new,
.grid-toolbar .tool-new {
    border-color: var(--form-action-new-border) !important;
    background-color: var(--form-action-new-bg) !important;
}

.complaint-action.action-delete,
.template-action.action-delete {
    border-color: var(--form-action-delete-border) !important;
    background-color: var(--form-action-delete-bg) !important;
    background-image: url('/icons/form/borrar-registro.png') !important;
}

.complaint-action.action-box,
.complaint-action.action-box-has-documents,
.workflow-form-toolbar .btn-form-box,
.grid-toolbar .tool-box {
    border-color: var(--form-action-box-border) !important;
    background-color: var(--form-action-box-bg) !important;
}

.complaint-action.action-save,
.workflow-form-toolbar .btn-form-save,
.template-action.action-save,
.grid-toolbar .tool-save {
    border-color: var(--form-action-save-border) !important;
    background-color: var(--form-action-save-bg) !important;
}

.complaint-action.action-auxiliaries,
.workflow-form-toolbar .btn-form-actions-list,
.workflow-form-toolbar .btn-form-execute {
    border-color: var(--form-action-aux-border) !important;
    background-color: var(--form-action-aux-bg) !important;
}

.complaint-action.action-auxiliaries {
    background-image: url('/icons/form/tablas-auxiliares.png') !important;
}

.workflow-form-toolbar .btn-form-actions-list,
.workflow-form-toolbar .btn-form-execute {
    width: auto !important;
    min-width: 9.75rem !important;
    padding: 0 .9rem !important;
    color: #4f3d00 !important;
    font-size: .84rem !important;
    background-image: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.complaint-action.action-document,
.workflow-form-toolbar .btn-form-document,
.grid-toolbar .tool-document {
    border-color: var(--form-action-template-border) !important;
    background-color: var(--form-action-template-bg) !important;
}

.template-action.action-open,
.template-action.action-preview {
    border-color: var(--form-action-template-border) !important;
    background-color: var(--form-action-template-bg) !important;
}

.template-action.action-open {
    background-image: url('/icons/form/abrir-plantilla.png') !important;
}

.template-action.action-preview {
    background-image: url('/icons/form/vista-previa-plantilla.png') !important;
}

.complaint-action.action-close,
.workflow-form-toolbar .btn-form-close,
.template-action.action-close,
.grid-toolbar .tool-close {
    border-color: var(--form-action-template-border) !important;
    background-color: var(--form-action-template-bg) !important;
}

.complaint-action.action-new {
    background: var(--form-action-new-bg) url('/icons/form/nuevo-registro.png') center / 26px 26px no-repeat !important;
}

.complaint-action.action-save {
    background: var(--form-action-save-bg) url('/icons/form/grabar-registro.png') center / 26px 26px no-repeat !important;
}

.complaint-action.action-document {
    background: var(--form-action-template-bg) url('/icons/form/generar-documento.png') center / 26px 26px no-repeat !important;
}

.complaint-action.action-auxiliaries {
    background: var(--form-action-aux-bg) url('/icons/form/tablas-auxiliares.png') center / 26px 26px no-repeat !important;
}

.complaint-action.action-box,
.complaint-action.action-box-has-documents {
    background: var(--form-action-box-bg) url('/icons/form/cajon-documentos.png') center / 26px 26px no-repeat !important;
}

.complaint-action.action-delete {
    background: var(--form-action-delete-bg) url('/icons/form/borrar-registro.png') center / 26px 26px no-repeat !important;
}

.complaint-action.action-close {
    background: var(--form-action-template-bg) url('/icons/form/cerrar-ficha.png') center / 26px 26px no-repeat !important;
}

.complaint-action.action-help {
    border-color: var(--form-action-template-border) !important;
    background: var(--form-action-template-bg) !important;
}

.grid-toolbar .tool-new {
    --grid-tool-icon: url('/icons/form/nuevo-registro.png') !important;
}

.grid-toolbar .tool-save {
    --grid-tool-icon: url('/icons/form/grabar-registro.png') !important;
}

.grid-toolbar .tool-document {
    --grid-tool-icon: url('/icons/form/generar-documento.png') !important;
}

.grid-toolbar .tool-box {
    --grid-tool-icon: url('/icons/form/cajon-documentos.png') !important;
}

.grid-toolbar .tool-close {
    --grid-tool-icon: url('/icons/form/cerrar-ficha.png') !important;
}

.complaint-action.action-new,
.complaint-action.action-save,
.complaint-action.action-document,
.complaint-action.action-auxiliaries,
.complaint-action.action-box,
.complaint-action.action-box-has-documents,
.complaint-action.action-delete,
.complaint-action.action-close,
.complaint-action.action-help,
.workflow-form-toolbar .btn-form-save,
.workflow-form-toolbar .btn-form-back,
.workflow-form-toolbar .btn-form-close,
.workflow-form-toolbar .btn-form-actions-list,
.workflow-form-toolbar .btn-form-box,
.workflow-form-toolbar .btn-form-document,
.template-action.action-new,
.template-action.action-open,
.template-action.action-save,
.template-action.action-preview,
.template-action.action-delete,
.template-action.action-list,
.template-action.action-close,
.grid-toolbar .tool-new,
.grid-toolbar .tool-save,
.grid-toolbar .tool-document,
.grid-toolbar .tool-box,
.grid-toolbar .tool-close {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 3px rgba(36, 54, 68, .16) !important;
}

/* Keep icon buttons stable: no hover lift, filters, or background swaps. */
.template-message {
    display: none !important;
}

.grid-toolbar .grid-tool:hover,
.grid-toolbar .grid-tool:focus-visible,
.tool-help:hover,
.tool-help:focus-visible,
.btn-form-help:hover,
.btn-form-help:focus-visible,
.action-help:hover,
.action-help:focus-visible,
.complaint-action:hover,
.complaint-action:focus-visible,
.template-action:hover,
.template-action:focus-visible,
.context-help-button:hover,
.context-help-button:focus-visible {
    transform: none !important;
    filter: none !important;
}

.grid-toolbar .grid-tool:not(.tool-help):hover,
.grid-toolbar .grid-tool:not(.tool-help):focus-visible {
    color: transparent !important;
}

.template-action.action-new:hover,
.template-action.action-new:focus-visible {
    background: var(--form-action-new-bg) url('/icons/form/nuevo-registro.png') center / 1.65rem 1.65rem no-repeat !important;
}

.template-action.action-open:hover,
.template-action.action-open:focus-visible {
    background: var(--form-action-template-bg) url('/icons/form/abrir-plantilla.png') center / 1.65rem 1.65rem no-repeat !important;
}

.template-action.action-preview:hover,
.template-action.action-preview:focus-visible {
    background: var(--form-action-template-bg) url('/icons/form/vista-previa-plantilla.png') center / 1.65rem 1.65rem no-repeat !important;
}

.template-action.action-save:hover,
.template-action.action-save:focus-visible {
    background: var(--form-action-save-bg) url('/icons/form/grabar-registro.png') center / 1.65rem 1.65rem no-repeat !important;
}

.template-action.action-delete:hover,
.template-action.action-delete:focus-visible {
    background: var(--form-action-delete-bg) url('/icons/form/borrar-registro.png') center / 1.65rem 1.65rem no-repeat !important;
}

.template-action.action-list:hover,
.template-action.action-list:focus-visible {
    background: var(--form-action-template-bg) url('/icons/grid/listar.png') center / 1.65rem 1.65rem no-repeat !important;
}

.template-action.action-close:hover,
.template-action.action-close:focus-visible {
    background: var(--form-action-template-bg) url('/icons/form/cerrar-ficha.png') center / 1.65rem 1.65rem no-repeat !important;
}

.template-action.action-help:hover,
.template-action.action-help:focus-visible,
.complaint-action.action-help:hover,
.complaint-action.action-help:focus-visible {
    background: var(--form-action-template-bg) !important;
}

/* Compact one-line template format toolbar. */
.template-formatbar {
    min-height: 2.25rem !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .24rem .3rem !important;
    overflow: visible;
    padding: .24rem .35rem !important;
    white-space: nowrap;
}

.template-formatbar > * {
    flex: 0 0 auto !important;
    box-sizing: border-box;
}

.template-formatbar label {
    flex: 0 0 auto;
    gap: .16rem !important;
    font-size: .68rem !important;
    line-height: 1;
}

.template-formatbar .form-control,
.template-formatbar .form-select,
.template-formatbar .format-button,
.template-formatbar .image-input-button,
.template-formatbar .table-color-control,
.template-formatbar .table-color-button {
    min-height: 1.65rem !important;
    height: 1.65rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: .74rem !important;
}

.template-formatbar .compact-select {
    width: 6.95rem !important;
}

.template-formatbar .paper-size-select {
    width: 6.35rem !important;
}

.template-formatbar .compact-number {
    width: 3.8rem !important;
    padding-left: .28rem !important;
    padding-right: .18rem !important;
}

.template-formatbar .header-footer-number {
    width: 3.55rem !important;
}

.template-formatbar .format-button {
    min-width: 1.65rem !important;
    padding-left: .3rem !important;
    padding-right: .3rem !important;
}

.template-formatbar .format-button[title^="Deshacer"] {
    min-width: 4.15rem !important;
}

.template-formatbar .align-button,
.template-formatbar .merge-code-button,
.template-formatbar .copy-tool-button,
.template-formatbar .paste-tool-button {
    width: 1.65rem !important;
    min-width: 1.65rem !important;
    padding: 0 !important;
}

.template-formatbar .table-tool-button:not(.copy-tool-button):not(.paste-tool-button) {
    min-width: 2.28rem !important;
}

.template-formatbar .image-input-button {
    min-width: 3.25rem !important;
    padding-left: .38rem !important;
    padding-right: .38rem !important;
}

.template-formatbar .table-color-control {
    min-width: 4.5rem !important;
}

.template-formatbar .table-color-button {
    min-width: 3rem !important;
    padding-left: .35rem !important;
    padding-right: .35rem !important;
}

.template-formatbar .table-color-picker {
    width: 1.35rem !important;
    min-width: 1.35rem !important;
}

.template-formatbar .template-page-nav {
    flex: 0 0 auto !important;
    min-width: 11.5rem !important;
    height: 1.65rem !important;
    margin-left: .18rem;
}

.template-formatbar .template-page-nav span {
    min-width: 5.95rem !important;
}

.template-formatbar .template-page-nav .page-nav-button {
    width: 1.42rem !important;
    min-width: 1.42rem !important;
    height: 1.32rem !important;
    min-height: 1.32rem !important;
}

.copy-icon,
.paste-icon {
    display: block;
    width: 1.12rem;
    height: 1.12rem;
    margin: auto;
    background: #143a5a;
}

.copy-icon {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 7V3h13v13h-4v5H3V7h5Zm2 0h7v7h2V5h-9v2Zm-5 2v10h10V9H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 7V3h13v13h-4v5H3V7h5Zm2 0h7v7h2V5h-9v2Zm-5 2v10h10V9H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.paste-icon {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6l1 2h3v18H5V4h3l1-2Zm1.2 4-.8 1.6h5.2L13.8 6h-3.6ZM7 6v14h10V6h-1.8l1 2H7.8l1-2H7Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6l1 2h3v18H5V4h3l1-2Zm1.2 4-.8 1.6h5.2L13.8 6h-3.6ZM7 6v14h10V6h-1.8l1 2H7.8l1-2H7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.templates-page .templates-titlebar {
    padding-left: 1.55rem !important;
}

.templates-page .template-meta,
.templates-page .template-formatbar {
    padding-left: .85rem !important;
}

.templates-page .template-fields {
    padding-left: .55rem !important;
}
.workflow-template-field {
    display: grid;
    gap: 0.14rem;
    color: #001a35;
    font-size: 0.82rem;
    font-weight: 700;
}

.workflow-field-label {
    display: block;
}

.workflow-template-picker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.45rem;
    align-items: center;
}

.workflow-template-preview-button {
    border: 1px solid #9ab1c3;
    border-radius: 4px;
    background-color: #eef6ff !important;
    box-shadow: 0 2px 5px rgba(13, 45, 73, .16);
}

.workflow-template-preview-dialog {
    width: min(1120px, 96vw);
}

.workflow-template-preview-dialog .template-preview-paper {
    width: var(--paper-width, 210mm);
    min-height: var(--paper-height, 297mm);
    margin: 0 auto;
    padding: var(--paper-margin-top, 20mm) var(--paper-margin-right, 20mm) var(--paper-margin-bottom, 20mm) var(--paper-margin-left, 20mm);
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.help-tutor-editor-surface img {
    max-width: 100%;
    height: auto;
}

.help-tutor-editor-surface .help-image-resize-box {
    position: relative;
    display: inline-block;
    min-width: 80px;
    min-height: 60px;
    max-width: 100%;
    overflow: hidden;
    resize: both;
    vertical-align: middle;
    border: 1px dashed transparent;
    background: #f8fafc;
}

.help-tutor-editor-surface .help-image-resize-box:hover,
.help-tutor-editor-surface .help-image-resize-box.is-resizing {
    border-color: #2563eb;
}

.help-tutor-editor-surface .help-image-resize-box::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border-right: 3px solid #2563eb;
    border-bottom: 3px solid #2563eb;
    opacity: 0;
    pointer-events: none;
}

.help-tutor-editor-surface .help-image-resize-box:hover::after,
.help-tutor-editor-surface .help-image-resize-box.is-resizing::after {
    opacity: 1;
}

.help-tutor-editor-surface .help-image-resize-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}