:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-soft: #f8fafb;
    --text: #17212b;
    --muted: #687684;
    --line: #dfe5ea;
    --line-strong: #cfd7de;
    --accent: #176b51;
    --accent-hover: #125942;
    --accent-soft: #e8f3ef;
    --danger: #a53b3b;
    --danger-soft: #fff0f0;
    --shadow: 0 12px 35px rgba(25, 42, 55, 0.08);
    --radius: 14px;
    --radius-small: 9px;
    --sidebar: 244px;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background: var(--bg);
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}


/* =========================================================================
   BRAND
   ========================================================================= */

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.brand strong,
.brand h1 {
    margin: 0;
    font-size: 1.05rem;
}

.brand small,
.brand p {
    display: block;
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.brand-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: var(--accent);
    color: white;
    font-weight: 800;
    letter-spacing: -0.03em;
}


/* =========================================================================
   LOGIN
   ========================================================================= */

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(
            circle at top right,
            #e0eee8 0,
            transparent 34%
        ),
        var(--bg);
}

.login-card {
    width: min(100%, 420px);
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.brand-login {
    margin-bottom: 34px;
}

.login-copy {
    margin-bottom: 24px;
}

.login-copy h2 {
    margin: 0 0 7px;
    font-size: 1.55rem;
}

.login-copy p {
    margin: 0;
    color: var(--muted);
}

.field {
    display: grid;
    gap: 7px;
    margin-bottom: 17px;
}

.field span {
    font-size: 0.85rem;
    font-weight: 650;
}

.field input,
.search-bar input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-small);
    outline: none;
    background: white;
    color: var(--text);
    transition:
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.field input:focus,
.search-bar input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-foot {
    margin: 22px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.78rem;
}

.form-error {
    margin: 4px 0 15px;
    padding: 10px 12px;
    border-radius: var(--radius-small);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 0.86rem;
}


/* =========================================================================
   BUTTONS
   ========================================================================= */

.button {
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    font-weight: 650;
    transition:
        background 120ms ease,
        border-color 120ms ease,
        opacity 120ms ease;
}

.button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.button-primary {
    background: var(--accent);
    color: white;
}

.button-primary:hover:not(:disabled) {
    background: var(--accent-hover);
}

.button-secondary {
    border-color: var(--line);
    background: white;
    color: var(--text);
}

.button-secondary:hover {
    background: var(--surface-soft);
}

.button-quiet {
    border-color: var(--line);
    background: transparent;
    color: var(--text);
}

.button-quiet:hover {
    background: var(--surface-soft);
}

.button-wide {
    width: 100%;
}


/* =========================================================================
   APP LAYOUT
   ========================================================================= */

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 10;
    width: var(--sidebar);
    display: flex;
    flex-direction: column;
    padding: 22px 17px;
    border-right: 1px solid var(--line);
    background: var(--surface);
}

.main-nav {
    display: grid;
    gap: 5px;
    margin-top: 32px;
}

.nav-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #43515e;
    text-align: left;
    font-weight: 600;
}

.nav-button:hover {
    background: var(--surface-soft);
}

.nav-button.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.nav-icon {
    width: 22px;
    text-align: center;
    font-size: 1.1rem;
}

.sidebar-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 8px 0;
    border-top: 1px solid var(--line);
}

.avatar {
    flex: 0 0 auto;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 750;
}

.sidebar-user-copy {
    min-width: 0;
}

.sidebar-user-copy strong,
.sidebar-user-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-copy strong {
    font-size: 0.82rem;
}

.sidebar-user-copy small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.73rem;
}

.workspace {
    grid-column: 2;
    min-width: 0;
}

.topbar {
    min-height: 77px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.93);
}

.topbar h1 {
    margin: 2px 0 0;
    font-size: 1.25rem;
}

.eyebrow {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-pill-name {
    font-size: 0.83rem;
    font-weight: 650;
}

.role-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
}

.content {
    width: min(100%, 1450px);
    margin: 0 auto;
    padding: 27px 28px 45px;
}

.page-section {
    display: none;
}

.page-section.active {
    display: block;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.section-heading h2 {
    margin: 0 0 5px;
    font-size: 1.35rem;
}

.section-heading p {
    margin: 0;
    color: var(--muted);
}


/* =========================================================================
   DASHBOARD
   ========================================================================= */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat-card,
.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 3px 14px rgba(30, 45, 55, 0.035);
}

.stat-card {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.stat-label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.stat-value {
    margin: auto 0 2px;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.035em;
}

.stat-card small {
    color: var(--muted);
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.panel {
    padding: 20px;
}

.panel-heading {
    margin-bottom: 16px;
}

.panel-heading h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.panel-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 0.83rem;
}

.compact-list {
    display: grid;
    gap: 2px;
}

.compact-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}

.compact-item:last-child {
    border-bottom: 0;
}

.compact-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
}

.compact-item small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
}

.compact-value {
    font-weight: 750;
}

.text-button {
    margin-top: 14px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-weight: 700;
}


/* =========================================================================
   SEARCH
   ========================================================================= */

.search-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 9px;
    margin-bottom: 15px;
}


/* =========================================================================
   TABLES
   ========================================================================= */

.table-panel {
    padding: 0;
    overflow: hidden;
}

.table-header {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.81rem;
    font-weight: 650;
}

.table-scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

th,
td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

th {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.73rem;
    font-weight: 750;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

td {
    font-size: 0.84rem;
}

tbody tr:hover {
    background: #fbfcfd;
}

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

.cell-primary {
    font-weight: 650;
}

.cell-muted {
    color: var(--muted);
}

.row-action {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
}

.row-action:hover {
    background: var(--accent-soft);
}

.empty-state {
    padding: 46px 20px;
    text-align: center;
    color: var(--muted);
}


/* =========================================================================
   DIALOG
   ========================================================================= */

.material-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: min(82vh, 800px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 28px 90px rgba(20, 30, 40, 0.25);
}

.material-dialog::backdrop {
    background: rgba(20, 27, 33, 0.52);
}

.dialog-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 23px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.dialog-heading h2 {
    margin: 4px 0 4px;
    font-size: 1.24rem;
}

.dialog-heading > div > p:last-child {
    margin: 0;
    color: var(--muted);
}

.icon-button {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: white;
    color: var(--text);
    font-size: 1.45rem;
}

.detail-content {
    padding: 23px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.detail-field {
    min-width: 0;
    padding: 12px 13px;
    border-radius: 10px;
    background: var(--surface-soft);
}

.detail-field.wide {
    grid-column: 1 / -1;
}

.detail-field span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.detail-field strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    font-weight: 600;
}

.detail-section-title {
    margin: 23px 0 9px;
    font-size: 0.91rem;
}

.detail-record {
    margin-bottom: 9px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.82rem;
}

.detail-record:last-child {
    margin-bottom: 0;
}


/* =========================================================================
   TOAST
   ========================================================================= */

.toast {
    position: fixed;
    z-index: 999;
    right: 18px;
    bottom: 18px;
    max-width: min(390px, calc(100vw - 36px));
    padding: 11px 14px;
    border-radius: 10px;
    background: #26323b;
    color: white;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.toast.visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1050px) {

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

    .info-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 760px) {

    :root {
        --sidebar: 100%;
    }

    .app-shell {
        display: block;
        padding-bottom: 67px;
    }

    .sidebar {
        inset: auto 0 0;
        width: 100%;
        height: 67px;
        display: block;
        padding: 7px 10px;
        border-top: 1px solid var(--line);
        border-right: 0;
    }

    .sidebar > .brand,
    .sidebar-user {
        display: none;
    }

    .main-nav {
        height: 100%;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        margin: 0;
    }

    .nav-button {
        justify-content: center;
        flex-direction: column;
        gap: 1px;
        padding: 5px 6px;
        font-size: 0.69rem;
    }

    .nav-icon {
        font-size: 1rem;
    }

    .workspace {
        width: 100%;
    }

    .topbar {
        min-height: 68px;
        padding: 10px 15px;
    }

    .topbar-actions {
        gap: 7px;
    }

    .user-pill-name {
        display: none;
    }

    .button-quiet {
        padding-inline: 10px;
        font-size: 0.78rem;
    }

    .content {
        padding: 20px 14px 32px;
    }

    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stat-card {
        min-height: 124px;
        padding: 15px;
    }

    .stat-value {
        font-size: 1.65rem;
    }

    .search-bar {
        grid-template-columns: 1fr auto;
    }

    .search-bar input {
        grid-column: 1 / -1;
    }

    .section-heading {
        align-items: flex-start;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-field.wide {
        grid-column: auto;
    }
}


@media (max-width: 430px) {

    .login-shell {
        padding: 14px;
    }

    .login-card {
        padding: 26px 21px;
    }

    .stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    .stat-card small {
        font-size: 0.72rem;
    }

    .topbar h1 {
        font-size: 1.08rem;
    }

    .role-badge {
        display: none;
    }
}


/* =======================================================================
   WEB-4D3-R4 | NAVEGACION MOVIL DINAMICA

   Administrador / Supervisor:
       Inicio | Inventario | Catalogo | Clientes y Obras

   Operador:
       Inicio | Inventario | Catalogo

   Solo afecta pantallas moviles.
   ======================================================================= */

@media (max-width: 760px) {

    .main-nav {
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: stretch;
    }

    .main-nav .nav-button:not(.hidden) {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding-left: 4px;
        padding-right: 4px;
    }

    .main-nav .nav-button:not(.hidden) > span:last-child {
        min-width: 0;
        font-size: 0.72rem;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }

}


/* =========================================================================
   WEB-4D5-FRONTEND-R1 | FORMULARIOS CLIENTES / OBRAS
   ========================================================================= */

button,
input,
select,
textarea {
    font: inherit;
}


.section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}


.form-dialog {
    width: min(680px, calc(100vw - 32px));
}


.entity-form {
    margin: 0;
}


.form-dialog-body {
    padding: 20px;
}


/* WEB-PEDIDOS | Dialogo de solicitud con medidas consistentes */
.pedido-dialog {
    width: min(680px, calc(100vw - 32px));
    max-height: min(82vh, 760px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 28px 90px rgba(20, 30, 40, 0.25);
    overflow: hidden;
}

.pedido-dialog::backdrop {
    background: rgba(20, 27, 33, 0.52);
}

.pedido-dialog form {
    display: flex;
    max-height: min(82vh, 760px);
    flex-direction: column;
    margin: 0;
}

.pedido-dialog-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 23px 17px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.pedido-dialog-heading h3 {
    margin: 2px 0 6px;
    font-size: 1.24rem;
}

.pedido-dialog-heading p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.pedido-dialog-content {
    padding: 20px 23px;
    overflow: auto;
}

.pedido-dialog-table-wrap {
    overflow-x: auto;
}

.pedido-dialog-table {
    min-width: 440px;
    table-layout: fixed;
    white-space: normal;
}

.pedido-dialog-table th,
.pedido-dialog-table td {
    padding: 12px 15px;
}

.pedido-dialog-table th:last-child,
.pedido-dialog-table td:last-child {
    width: 190px;
}

.pedido-dialog-table input {
    width: 130px;
    min-height: 40px;
    margin: 0;
}

.pedido-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 15px 23px 21px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

@media (max-width: 620px) {
    .pedido-dialog {
        width: calc(100vw - 20px);
    }

    .pedido-dialog-heading,
    .pedido-dialog-content {
        padding-right: 16px;
        padding-left: 16px;
    }

    .pedido-dialog-actions {
        padding-right: 16px;
        padding-left: 16px;
    }

    .pedido-dialog-actions .button {
        flex: 1 1 0;
        min-width: 0;
    }
}


.entity-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


.entity-form-wide {
    grid-column: 1 / -1;
}


.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: white;
    color: var(--text);
    outline: none;
    transition:
        border-color 120ms ease,
        box-shadow 120ms ease;
}


.field select {
    min-height: 44px;
    padding: 10px 36px 10px 12px;
}


.field textarea {
    min-height: 82px;
    padding: 10px 12px;
    resize: vertical;
}


.field select:focus,
.field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}


.field select:disabled {
    background: var(--surface-soft);
    color: var(--muted);
    cursor: not-allowed;
}


.field small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.4;
}


.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 22px;
}


.location-choice {
    display: grid;
    gap: 9px;
    margin: 20px 0 14px;
    padding: 0;
    border: 0;
}


.location-choice legend {
    margin-bottom: 8px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 750;
}


.choice-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--surface);
    cursor: pointer;
}


.choice-option:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}


.choice-option input {
    margin-top: 3px;
}


.choice-option span {
    display: grid;
    gap: 3px;
}


.choice-option strong {
    font-size: 0.9rem;
}


.choice-option small {
    color: var(--muted);
    line-height: 1.35;
}


.location-selection {
    margin-top: 12px;
}


.form-note {
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}


.form-note-warning {
    color: var(--text);
}


@media (max-width: 760px) {

    .section-heading {
        align-items: flex-start;
    }

    .section-actions {
        width: 100%;
        justify-content: stretch;
    }

    .section-actions .button {
        flex: 1 1 180px;
    }

    .entity-form-grid {
        grid-template-columns: 1fr;
    }

    .entity-form-wide {
        grid-column: auto;
    }

    .form-dialog-body {
        padding: 16px;
    }
}


@media (max-width: 430px) {

    .section-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .section-actions .button,
    .form-actions .button {
        width: 100%;
    }

    .form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* =========================================================================
   WEB-5D-R2A | RENTAS
   ========================================================================= */

.rental-step {
    margin-top: 18px;
}


.rental-stats {
    margin-bottom: 4px;
}


.rental-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


.rental-form-wide {
    grid-column: 1 / -1;
}


.rental-qty-input {
    width: 86px;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: white;
    color: var(--text);
    font: inherit;
}


.rental-qty-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}


.rental-material-copy {
    display: grid;
    gap: 3px;
    min-width: 160px;
}


.rental-material-copy strong {
    color: var(--text);
    font-size: 0.9rem;
}


.rental-material-copy small {
    color: var(--muted);
    font-size: 0.78rem;
}


.rental-requested-quantity {
    display: block;
    margin-top: 9px;
    line-height: 1.35;
}


.rental-requested-quantity input {
    display: block;
    width: min(150px, 100%);
    margin-top: 6px;
}


.rental-review-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}


.rental-review-summary > div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--surface-soft);
}


.rental-review-summary span {
    color: var(--muted);
    font-size: 0.78rem;
}


.rental-review-summary strong {
    color: var(--text);
    line-height: 1.35;
}


.rental-safety-note {
    margin-top: 18px;
}


@media (max-width: 760px) {

    .main-nav {
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }


    .main-nav .nav-button:not(.hidden) {
        flex: 0 0 96px;
        width: 96px;
    }


    .rental-form-grid,
    .rental-review-summary {
        grid-template-columns: 1fr;
    }


    .rental-form-wide {
        grid-column: auto;
    }

}


@media (max-width: 430px) {

    .main-nav .nav-button:not(.hidden) {
        flex-basis: 92px;
        width: 92px;
    }


    .rental-qty-input {
        width: 76px;
    }

}


/* =========================================================================
   WEB-5D-R2D | MENU MOVIL PEQUENO
   Las cinco opciones caben sin desplazamiento horizontal.
   ========================================================================= */

@media (max-width: 430px) {

    .main-nav {
        overflow-x: hidden;
    }


    .main-nav .nav-button:not(.hidden) {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        padding-left: 2px;
        padding-right: 2px;
    }


    .main-nav .nav-button:not(.hidden) > span:last-child {
        font-size: 0.64rem;
        line-height: 1.05;
        white-space: normal;
        overflow-wrap: normal;
    }

}


/* =========================================================================
   WEB-5D-R2E | MENU RESPONSIVE 760
   Desde tablet pequena hasta telefono:
   las opciones se reparten todo el ancho sin scroll horizontal.
   ========================================================================= */

@media (max-width: 760px) {

    .main-nav {
        overflow-x: hidden;
        gap: 2px;
    }


    .main-nav .nav-button:not(.hidden) {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        padding-left: 2px;
        padding-right: 2px;
    }


    .main-nav .nav-button:not(.hidden) > span:last-child {
        min-width: 0;
        font-size: 0.68rem;
        line-height: 1.05;
        text-align: center;
        white-space: normal;
    }

}



/* WEB-6H3-EDITOR-REMISION-R2 */

.remission-edit-dialog-web6h3 {
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
}

.remission-edit-dialog-web6h3::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.remission-edit-card-web6h3 {
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 24px;
    background: var(--surface, #ffffff);
    color: inherit;
}

.remission-edit-header-web6h3 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.remission-edit-warning-web6h3 {
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: rgba(255, 193, 7, 0.12);
    line-height: 1.45;
}

.remission-edit-grid-web6h3 {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 14px;
}

.remission-edit-grid-web6h3 label {
    display: grid;
    gap: 6px;
}

.remission-edit-grid-web6h3 input,
.remission-edit-grid-web6h3 textarea {
    width: 100%;
    box-sizing: border-box;
}

.remission-edit-wide-web6h3 {
    grid-column: 1 / -1;
}

.remission-edit-actions-web6h3 {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.remission-audit-web6h3 {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(127, 127, 127, 0.25);
}

.remission-audit-list-web6h3 {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.remission-audit-item-web6h3 {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 10px;
}

#rental-remissions-body td:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 720px) {

    .remission-edit-grid-web6h3 {
        grid-template-columns: 1fr;
    }

    .remission-edit-wide-web6h3 {
        grid-column: auto;
    }

    .remission-edit-header-web6h3 {
        flex-direction: column;
    }

    .remission-edit-actions-web6h3 {
        flex-direction: column-reverse;
    }

    .remission-edit-actions-web6h3 .button {
        width: 100%;
    }
}

/* WEB-7E-R3-CIERRE-OBRAS */

.work-close-action {
    white-space: nowrap;
}

.work-close-dialog textarea {
    width: 100%;
    min-height: 7rem;
    resize: vertical;
}

.work-close-summary {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.work-close-summary span,
.work-history-label {
    opacity: 0.72;
}

.work-close-checks {
    margin-bottom: 1rem;
    font-weight: 600;
}

.work-close-warning {
    margin-bottom: 1rem;
    padding: 0.85rem;
    border: 1px solid currentColor;
    border-radius: 0.7rem;
    opacity: 0.85;
}


/* WEB-7H-R2-UI-CIERRE-OBRAS */

/*
 * Cierre de obra / fase:
 * espaciado, jerarquia visual y comportamiento responsive.
 */

.work-close-dialog {
    width: min(620px, calc(100vw - 32px));
    max-height: min(88vh, 760px);
    overflow: hidden;
}


.work-close-dialog #work-close-form {
    max-height: min(88vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
}


.work-close-dialog .dialog-heading {
    padding: 24px 26px 19px;
}


.work-close-dialog .dialog-heading h2 {
    margin-top: 5px;
    margin-bottom: 6px;
}


.work-close-dialog .dialog-heading > div > p:last-child {
    max-width: 520px;
    line-height: 1.45;
}


.work-close-dialog .work-close-summary {
    gap: 5px;
    margin: 20px 26px 0;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 12px;
}


.work-close-dialog .work-close-summary strong {
    font-size: 1.04rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}


.work-close-dialog .work-close-summary span {
    line-height: 1.4;
    opacity: 0.78;
    overflow-wrap: anywhere;
}


.work-close-dialog .work-close-checks {
    margin: 12px 26px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--accent-soft);
    font-weight: 650;
    line-height: 1.4;
}


.work-close-dialog .work-close-warning {
    margin: 12px 26px 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    opacity: 1;
    line-height: 1.5;
}


.work-close-dialog #work-close-form > label {
    display: grid;
    gap: 8px;
    margin: 18px 26px 0;
    font-weight: 650;
}


.work-close-dialog textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 112px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    line-height: 1.45;
    resize: vertical;
}


.work-close-dialog textarea:focus {
    outline: 2px solid var(--accent-soft);
    outline-offset: 1px;
}


.work-close-dialog .form-error {
    margin: 8px 26px 0;
}


.work-close-dialog .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding: 16px 26px 22px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}


.work-close-dialog .dialog-actions .button {
    min-width: 118px;
}


.work-history-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    opacity: 1;
}


/*
 * En vista movil existe navegacion inferior.
 * El toast debe aparecer POR ENCIMA de ella.
 */

@media (max-width: 760px) {

    .work-close-dialog {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        border-radius: 16px;
    }


    .work-close-dialog #work-close-form {
        max-height: calc(100vh - 24px);
    }


    .work-close-dialog .dialog-heading {
        padding: 19px 18px 16px;
    }


    .work-close-dialog .work-close-summary {
        margin:
            16px
            18px
            0;
    }


    .work-close-dialog .work-close-checks,
    .work-close-dialog .work-close-warning {
        margin:
            10px
            18px
            0;
    }


    .work-close-dialog #work-close-form > label {
        margin:
            16px
            18px
            0;
    }


    .work-close-dialog .form-error {
        margin:
            8px
            18px
            0;
    }


    .work-close-dialog .dialog-actions {
        gap: 8px;
        margin-top: 16px;
        padding:
            14px
            18px
            18px;
    }


    .work-close-dialog .dialog-actions .button {
        flex: 1 1 0;
        min-width: 0;
    }


    .toast {
        right: 14px;
        bottom:
            calc(
                82px
                + env(safe-area-inset-bottom)
            );
        left: 14px;
        max-width: none;
    }
}


@media (max-width: 430px) {

    .work-close-dialog .dialog-heading {
        padding:
            17px
            16px
            14px;
    }


    .work-close-dialog .work-close-summary {
        margin:
            14px
            16px
            0;
        padding:
            13px
            14px;
    }


    .work-close-dialog .work-close-checks,
    .work-close-dialog .work-close-warning {
        margin-right: 16px;
        margin-left: 16px;
    }


    .work-close-dialog #work-close-form > label {
        margin-right: 16px;
        margin-left: 16px;
    }


    .work-close-dialog .form-error {
        margin-right: 16px;
        margin-left: 16px;
    }


    .work-close-dialog .dialog-actions {
        padding:
            13px
            16px
            16px;
    }
}


/* WEB-7H-R4-TABLA-OBRAS-SCROLL */

/*
 * Solo la tabla "Obras del cliente".
 * No modifica Inventario, Catalogo, Rentas ni otras tablas.
 */

.client-works-scroll-web7hr4 {
    scroll-behavior: auto;
    overscroll-behavior-x: contain;
}


.client-works-table-web7hr4 {
    min-width: 960px;
}


/*
 * Al desplazarse horizontalmente, el nombre de la obra
 * permanece como referencia visual.
 */

.client-works-table-web7hr4 th:first-child,
.client-works-table-web7hr4 td:first-child {
    position: sticky;
    left: 0;
}


.client-works-table-web7hr4 th:first-child {
    z-index: 3;
    min-width: 180px;
    background: var(--surface-soft);
}


.client-works-table-web7hr4 td:first-child {
    z-index: 2;
    min-width: 180px;
    max-width: 240px;
    background: var(--surface);
    font-weight: 650;
    white-space: normal;
    overflow-wrap: anywhere;
}


.client-works-table-web7hr4 tbody tr:hover td:first-child {
    background: #fbfcfd;
}


/*
 * Dirección y ubicación pueden envolver texto.
 * Esto evita ensanchar la tabla innecesariamente.
 */

.client-works-table-web7hr4 th:nth-child(2),
.client-works-table-web7hr4 td:nth-child(2),
.client-works-table-web7hr4 th:nth-child(6),
.client-works-table-web7hr4 td:nth-child(6) {
    white-space: normal;
}


.client-works-table-web7hr4 td:nth-child(2) {
    min-width: 180px;
    max-width: 260px;
}


.client-works-table-web7hr4 td:nth-child(6) {
    min-width: 160px;
    max-width: 230px;
}


@media (max-width: 760px) {

    .client-works-table-web7hr4 {
        min-width: 900px;
    }


    .client-works-table-web7hr4 th,
    .client-works-table-web7hr4 td {
        padding-right: 12px;
        padding-left: 12px;
    }
}


/* =========================================================================================
   WEB-7K-R3D
   VECTOR: IDENTIDAD CROMATICA SIN ALTERAR LA GEOMETRIA DE LA INTERFAZ
   ========================================================================================= */

:root {
    --vector-blue: #312783;
    --vector-red: #E30613;

    --accent: #312783;
    --accent-hover: #261f68;
    --accent-soft: #efedf9;

    --danger: #E30613;
    --danger-soft: #fff0f1;
}


/*
 * Marca provisional.
 * El imagotipo oficial se integrara por separado.
 */

.brand-mark {
    background: var(--vector-blue);
}


.eyebrow {
    color: var(--vector-blue);
}


/* =========================================================================================
   HISTORIAL DE OBRA
   Todo este bloque esta aislado al nuevo modal.
   ========================================================================================= */

.work-history-action {
    white-space: nowrap;
}


.work-history-dialog-web7k {
    width: min(720px, calc(100vw - 32px));
    max-height: min(88vh, 820px);
    padding: 0;
    overflow-y: auto;
}


.work-history-content-web7k {
    display: grid;
    gap: 18px;
    padding: 22px 24px;
}


.work-history-hero-web7k {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 16px 18px;

    border: 1px solid var(--line);
    border-left: 4px solid var(--vector-blue);
    border-radius: 12px;

    background: var(--surface-soft);
}


.work-history-hero-web7k > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}


.work-history-hero-web7k strong {
    font-size: 1.08rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}


.work-history-kicker-web7k {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}


.work-history-status-web7k {
    flex: 0 0 auto;

    padding: 6px 10px;

    border-radius: 999px;

    background: var(--accent-soft);
    color: var(--accent);

    font-size: 0.76rem;
    font-weight: 700;
}


.work-history-grid-web7k {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}


.work-history-grid-web7k .detail-field span {
    display: block;
    margin-bottom: 5px;

    color: var(--muted);

    font-size: 0.76rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.025em;
}


.work-history-grid-web7k .detail-field strong {
    display: block;
    line-height: 1.4;
    overflow-wrap: anywhere;
}


.work-history-activity-web7k {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}


.work-history-activity-web7k > div {
    display: grid;
    gap: 4px;

    padding: 14px 16px;

    border: 1px solid var(--line);
    border-radius: 11px;

    background: var(--surface);
}


.work-history-activity-web7k span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
}


.work-history-activity-web7k strong {
    color: var(--vector-blue);
    font-size: 1.45rem;
}


.work-history-note-web7k {
    margin: 0;

    padding: 13px 15px;

    border-radius: 10px;

    background: var(--accent-soft);
    color: #403a63;

    font-size: 0.84rem;
    line-height: 1.5;
}


.work-history-actions-web7k {
    position: sticky;
    bottom: 0;

    margin: 0;

    padding: 15px 24px 20px;

    border-top: 1px solid var(--line);

    background: var(--surface);
}


@media (max-width: 760px) {

    .work-history-dialog-web7k {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }


    .work-history-content-web7k {
        padding: 18px;
    }


    .work-history-hero-web7k {
        align-items: flex-start;
        flex-direction: column;
    }


    .work-history-grid-web7k,
    .work-history-activity-web7k {
        grid-template-columns: 1fr;
    }


    .work-history-actions-web7k {
        padding:
            14px
            18px
            calc(
                18px
                + env(safe-area-inset-bottom)
            );
    }
}


/* =========================================================================================
   WEB-7L-R2-DOCUMENTOS-REMISIONES
   Ajuste aislado al historial documental de Rentas.
   No modifica tablas de materiales, devoluciones ni inspecciones.
   ========================================================================================= */

#rental-remissions {
    min-width: 0;
}


#rental-remissions .panel-heading {
    align-items: flex-start;
}


#rental-remissions .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}


#rental-remissions table {
    width: 100%;
    min-width: 820px;
    table-layout: fixed;
    white-space: normal;
}


#rental-remissions th,
#rental-remissions td {
    padding: 11px 10px;
    vertical-align: top;
    line-height: 1.35;
}


#rental-remissions th:nth-child(1),
#rental-remissions td:nth-child(1) {
    width: 15%;
}


#rental-remissions th:nth-child(2),
#rental-remissions td:nth-child(2) {
    width: 10%;
}


#rental-remissions th:nth-child(3),
#rental-remissions td:nth-child(3) {
    width: 11%;
}


#rental-remissions th:nth-child(4),
#rental-remissions td:nth-child(4) {
    width: 19%;
}


#rental-remissions th:nth-child(5),
#rental-remissions td:nth-child(5) {
    width: 18%;
}


#rental-remissions th:nth-child(6),
#rental-remissions td:nth-child(6) {
    width: 8%;
    text-align: right;
}


#rental-remissions th:nth-child(7),
#rental-remissions td:nth-child(7) {
    width: 19%;
}


#rental-remissions-body td:nth-child(1) {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


#rental-remissions-body td:nth-child(2),
#rental-remissions-body td:nth-child(4),
#rental-remissions-body td:nth-child(5) {
    white-space: normal;
    overflow-wrap: anywhere;
}


#rental-remissions-body td:last-child {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 6px;
}


#rental-remissions-body td:last-child .button {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
}


@media (max-width: 900px) {

    #rental-remissions table {
        min-width: 760px;
    }
}


/* =========================================================================================
   WEB-7L-R3-TABLA-Y-MODALES-CONSISTENTES
   ========================================================================================= */


/* =========================================================================================
   1. HISTORIAL DE REMISIONES
   ========================================================================================= */

#rental-remissions {
    min-width: 0;
}


#rental-remissions .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}


#rental-remissions table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
    white-space: normal;
    font-size: 0.82rem;
}


#rental-remissions th,
#rental-remissions td {
    padding: 10px 8px;
    vertical-align: top;
    line-height: 1.35;
}


/*
 * Folio
 */
#rental-remissions th:nth-child(1),
#rental-remissions td:nth-child(1) {
    width: 145px;
    min-width: 145px;
}


/*
 * Tipo
 */
#rental-remissions th:nth-child(2),
#rental-remissions td:nth-child(2) {
    width: 84px;
}


/*
 * Fecha
 */
#rental-remissions th:nth-child(3),
#rental-remissions td:nth-child(3) {
    width: 92px;
    white-space: nowrap;
}


/*
 * Cliente / Obra
 */
#rental-remissions th:nth-child(4),
#rental-remissions td:nth-child(4) {
    min-width: 150px;
}


/*
 * Ruta
 */
#rental-remissions th:nth-child(5),
#rental-remissions td:nth-child(5) {
    min-width: 145px;
}


/*
 * Cantidad
 */
#rental-remissions th:nth-child(6),
#rental-remissions td:nth-child(6) {
    width: 74px;
    text-align: right;
    white-space: nowrap;
}


/*
 * Documento / acciones
 *
 * IMPORTANTE:
 * vuelve a comportarse como celda real.
 * WEB-7L-R2 la convirtio en grid y eso deformaba
 * el calculo de columnas.
 */
#rental-remissions-body td:last-child {
    display: table-cell;
    width: 132px;
    min-width: 132px;
    vertical-align: top;
}


#rental-remissions-body td:nth-child(4),
#rental-remissions-body td:nth-child(5) {
    white-space: normal;
    overflow-wrap: break-word;
}


#rental-remissions-body td:last-child .button {
    display: block;
    box-sizing: border-box;

    width: 100%;
    min-width: 116px;

    margin: 0 0 7px 0;

    padding: 8px 9px;

    white-space: nowrap;

    font-size: 0.78rem;
    line-height: 1.2;

    text-align: center;
}


#rental-remissions-body td:last-child .button:last-child {
    margin-bottom: 0;
}


/*
 * En ventanas angostas permitimos scroll SOLO dentro
 * del historial documental.
 */
@media (max-width: 1050px) {

    #rental-remissions table {
        min-width: 810px;
    }
}


/* =========================================================================================
   2. CORRECCION DOCUMENTAL
   Mismo lenguaje visual que Historial de obra.
   ========================================================================================= */

.remission-edit-dialog-web6h3 {
    width: min(
        720px,
        calc(100vw - 32px)
    );

    max-height: min(
        88vh,
        820px
    );

    padding: 0;

    border: 0;
    border-radius: 16px;

    overflow: hidden;

    background: var(--surface);
}


.remission-edit-dialog-web6h3::backdrop {
    background: rgba(
        16,
        24,
        40,
        0.48
    );
}


.remission-edit-card-web6h3 {
    max-height: min(
        88vh,
        820px
    );

    padding: 0;

    overflow-y: auto;
    overflow-x: hidden;

    background: var(--surface);
}


/*
 * Encabezado equivalente al de Historial de obra.
 */
.remission-edit-header-web6h3 {
    position: sticky;
    top: 0;
    z-index: 5;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    margin: 0;

    padding: 20px 24px 18px;

    border-bottom: 1px solid var(--line);

    background: var(--surface);
}


.remission-edit-header-web6h3 > div {
    min-width: 0;
}


.remission-edit-header-web6h3 .eyebrow {
    margin: 0 0 5px 0;
}


.remission-edit-header-web6h3 h2 {
    margin: 0 0 5px 0;
    line-height: 1.25;
}


.remission-edit-header-web6h3 p:not(.eyebrow) {
    margin: 0;
    line-height: 1.4;
}


/*
 * Boton X de cierre.
 */
#rental-remission-edit-close {
    flex: 0 0 auto;
}


/*
 * Aviso documental.
 */
.remission-edit-warning-web6h3 {
    margin: 18px 24px 0;

    padding: 13px 15px;

    border: 1px solid rgba(
        194,
        135,
        0,
        0.22
    );

    border-left: 4px solid #c48700;
    border-radius: 10px;

    background: #fff8e6;

    line-height: 1.45;
}


/*
 * Formulario.
 */
#rental-remission-edit-form {
    padding: 18px 24px 24px;
}


.remission-edit-grid-web6h3 {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;
}


.remission-edit-grid-web6h3 label {
    display: grid;
    gap: 6px;

    min-width: 0;

    color: var(--text);

    font-size: 0.88rem;
    font-weight: 650;
}


.remission-edit-grid-web6h3 input,
.remission-edit-grid-web6h3 textarea {
    width: 100%;
    box-sizing: border-box;

    min-height: 42px;

    padding: 9px 11px;

    border: 1px solid var(--line);
    border-radius: 9px;

    background: var(--surface);
    color: var(--text);

    font: inherit;
    font-weight: 400;
}


.remission-edit-grid-web6h3 textarea {
    min-height: 88px;
    resize: vertical;
}


.remission-edit-grid-web6h3 input:focus,
.remission-edit-grid-web6h3 textarea:focus {
    border-color: var(--accent);

    outline: none;

    box-shadow:
        0 0 0 3px
        var(--accent-soft);
}


.remission-edit-wide-web6h3 {
    grid-column: 1 / -1;
}


/*
 * Acciones inferiores.
 */
.remission-edit-actions-web6h3 {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    margin: 22px -24px -24px;

    padding: 15px 24px 20px;

    border-top: 1px solid var(--line);

    background: var(--surface);
}


/*
 * Historial de correcciones dentro del editor.
 */
.remission-audit-web6h3 {
    margin-top: 24px;
    padding-top: 18px;

    border-top: 1px solid var(--line);
}


.remission-audit-list-web6h3 {
    display: grid;
    gap: 10px;

    margin-top: 12px;
}


.remission-audit-item-web6h3 {
    display: grid;
    gap: 5px;

    padding: 12px 14px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: var(--surface-soft);
}


/* =========================================================================================
   3. RESPUESTA EN VENTANAS ANGOSTAS
   ========================================================================================= */

@media (max-width: 760px) {

    .remission-edit-dialog-web6h3 {
        width: calc(
            100vw - 24px
        );

        max-height: calc(
            100vh - 24px
        );
    }


    .remission-edit-card-web6h3 {
        max-height: calc(
            100vh - 24px
        );
    }


    /*
     * Se mantiene X a la derecha.
     * No vuelve a caer debajo del titulo.
     */
    .remission-edit-header-web6h3 {
        flex-direction: row;

        padding:
            18px
            18px
            16px;
    }


    .remission-edit-warning-web6h3 {
        margin:
            16px
            18px
            0;
    }


    #rental-remission-edit-form {
        padding:
            16px
            18px
            22px;
    }


    .remission-edit-grid-web6h3 {
        grid-template-columns: 1fr;
    }


    .remission-edit-wide-web6h3 {
        grid-column: auto;
    }


    .remission-edit-actions-web6h3 {
        margin:
            20px
            -18px
            -22px;

        padding:
            14px
            18px
            calc(
                18px
                + env(safe-area-inset-bottom)
            );

        flex-direction: column-reverse;
    }


    .remission-edit-actions-web6h3 .button {
        width: 100%;
    }
}


/* =========================================================================================
   WEB-7L-R4-CONTENCION-RENTAS
   Correccion aislada para Devoluciones / Inspecciones
   y padding del Historial de correcciones.
   ========================================================================================= */


/* -----------------------------------------------------------------------------------------
   A. DEVOLUCIONES E INSPECCIONES
   Evitar que sus tablas ensanchen toda la pagina.
   ----------------------------------------------------------------------------------------- */

#rental-returns,
#rental-inspections {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;

    overflow: hidden;
}


#rental-returns .panel-heading,
#rental-inspections .panel-heading {
    min-width: 0;

    flex-wrap: wrap;
}


#rental-returns .panel-heading > div:first-child,
#rental-inspections .panel-heading > div:first-child {
    flex: 1 1 360px;
    min-width: 0;
}


#rental-returns .section-actions,
#rental-inspections .section-actions {
    flex: 0 0 auto;
}


#rental-returns .table-scroll,
#rental-inspections .table-scroll {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-x: contain;
}


/*
 * La tabla puede ser ancha, pero su ancho queda contenido
 * por .table-scroll y ya no empuja la pagina completa.
 */
#rental-returns .table-scroll > table,
#rental-inspections .table-scroll > table {
    width: max-content;
    min-width: 100%;
    max-width: none;

    table-layout: auto;
}


/*
 * Permitir que las columnas descriptivas envuelvan texto.
 * Los datos cortos siguen en una sola linea.
 */
#rental-returns th,
#rental-returns td,
#rental-inspections th,
#rental-inspections td {
    vertical-align: middle;
}


#rental-returns th:nth-child(2),
#rental-returns td:nth-child(2),
#rental-returns th:nth-child(3),
#rental-returns td:nth-child(3),
#rental-inspections th:nth-child(1),
#rental-inspections td:nth-child(1),
#rental-inspections th:nth-child(2),
#rental-inspections td:nth-child(2) {
    white-space: normal;
    overflow-wrap: break-word;
}


#rental-returns .empty-cell,
#rental-inspections .empty-cell {
    width: auto;
    min-width: 0;
}


/* -----------------------------------------------------------------------------------------
   B. HISTORIAL DE CORRECCIONES
   El bloque estaba fuera del padding visual del formulario.
   ----------------------------------------------------------------------------------------- */

.remission-audit-web6h3 {
    box-sizing: border-box;

    margin: 0;

    padding:
        20px
        24px
        24px;

    border-top: 1px solid var(--line);
}


.remission-audit-web6h3 > h3 {
    margin:
        0
        0
        8px;
}


.remission-audit-web6h3 > p {
    margin:
        0
        0
        14px;

    line-height: 1.45;
}


.remission-audit-list-web6h3 {
    margin-top: 0;
}


/* -----------------------------------------------------------------------------------------
   C. VENTANAS ANGOSTAS
   ----------------------------------------------------------------------------------------- */

@media (max-width: 760px) {

    #rental-returns .panel-heading,
    #rental-inspections .panel-heading {
        align-items: stretch;
    }


    #rental-returns .section-actions,
    #rental-inspections .section-actions {
        width: 100%;
    }


    #rental-returns .section-actions .button,
    #rental-inspections .section-actions .button {
        width: 100%;
    }


    .remission-audit-web6h3 {
        padding:
            18px
            18px
            calc(
                20px
                + env(safe-area-inset-bottom)
            );
    }
}


/* =========================================================================================
   WEB-7L-R5B-UNIFICAR-PANELES-RENTAS

   Paso 1 es la referencia visual.
   Paso 2, Paso 3, Devoluciones e Inspecciones son table-panel y por eso
   heredaban padding: 0.

   Esta capa solo modifica table-panel cuando tambien es rental-step.
   ========================================================================================= */


/* -----------------------------------------------------------------------------------------
   TARJETA
   ----------------------------------------------------------------------------------------- */

.rental-step.table-panel {
    box-sizing: border-box;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding: 20px;

    overflow: hidden;
}


/* -----------------------------------------------------------------------------------------
   CABECERA
   ----------------------------------------------------------------------------------------- */

.rental-step.table-panel > .panel-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    width: 100%;
    min-width: 0;

    margin: 0 0 18px;
    padding: 0;
}


.rental-step.table-panel > .panel-heading > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}


.rental-step.table-panel > .panel-heading .eyebrow {
    margin-top: 0;
}


.rental-step.table-panel > .panel-heading h3 {
    margin-top: 2px;
}


.rental-step.table-panel > .panel-heading p:last-child {
    margin-bottom: 0;
}


/* -----------------------------------------------------------------------------------------
   PASO 2 | BUSCADOR
   ----------------------------------------------------------------------------------------- */

#rental-material-search-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;

    gap: 10px;

    box-sizing: border-box;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0 0 18px;
}


#rental-material-search-form input {
    box-sizing: border-box;

    width: 100%;
    min-width: 0;
}


#rental-material-search-form .button {
    box-sizing: border-box;

    width: auto;
    min-width: 88px;

    padding-left: 16px;
    padding-right: 16px;
}


/* -----------------------------------------------------------------------------------------
   ENCABEZADO INTERNO DE TABLA
   ----------------------------------------------------------------------------------------- */

.rental-step.table-panel > .table-header {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 0;

    margin: 0;
    padding: 0 0 10px;

    border: 0;
}


/* -----------------------------------------------------------------------------------------
   TABLA INTERNA
   ----------------------------------------------------------------------------------------- */

.rental-step.table-panel > .table-scroll {
    display: block;

    box-sizing: border-box;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;

    overflow-x: auto;
    overflow-y: hidden;

    border: 1px solid var(--line);
    border-radius: var(--radius-small);

    overscroll-behavior-x: contain;
}


.rental-step.table-panel > .table-scroll > table {
    width: 100%;
    max-width: none;

    border-collapse: collapse;

    table-layout: auto;
}


/*
 * PASO 2
 */
.rental-step.table-panel
#rental-materials-body
td {
    vertical-align: middle;
}


.rental-step.table-panel
#rental-materials-body
td:first-child {
    white-space: normal;
}


/*
 * PASO 3
 */
.rental-step.table-panel
#rental-cart-body
td {
    vertical-align: middle;
}


.rental-step.table-panel
#rental-cart-body
td:first-child {
    white-space: normal;
}


/*
 * Materiales y carrito:
 * suficiente espacio para las cinco columnas,
 * pero el exceso queda dentro del panel.
 */
#rental-materials-body {
    min-width: 0;
}


#rental-cart-body {
    min-width: 0;
}


#rental-materials-body
.rental-qty-input,
#rental-cart-body
.rental-qty-input {
    max-width: 100%;
}


#rental-materials-body
.row-action,
#rental-cart-body
.row-action {
    white-space: nowrap;
}


/* -----------------------------------------------------------------------------------------
   ESTADOS VACIOS
   ----------------------------------------------------------------------------------------- */

.rental-step.table-panel > .empty-state {
    box-sizing: border-box;

    width: 100%;

    margin: 12px 0 0;

    padding: 28px 16px;

    border: 1px dashed var(--line);
    border-radius: var(--radius-small);

    background: var(--surface-soft);

    text-align: center;
}


/* -----------------------------------------------------------------------------------------
   DEVOLUCIONES
   ----------------------------------------------------------------------------------------- */

#rental-returns {
    padding: 20px;
}


#rental-returns .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


#rental-returns .table-scroll > table {
    width: 100%;
    min-width: 700px;

    max-width: none;
}


/* -----------------------------------------------------------------------------------------
   INSPECCIONES
   ----------------------------------------------------------------------------------------- */

#rental-inspections {
    padding: 20px;
}


#rental-inspections .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


#rental-inspections .table-scroll > table {
    width: 100%;
    min-width: 790px;

    max-width: none;
}


/* -----------------------------------------------------------------------------------------
   BOTONES ACTUALIZAR
   ----------------------------------------------------------------------------------------- */

#rental-returns .section-actions,
#rental-inspections .section-actions {
    flex: 0 0 auto;

    width: auto;
}


#rental-returns .section-actions .button,
#rental-inspections .section-actions .button {
    flex: 0 0 auto;

    width: auto;
    min-width: 108px;
}


/* -----------------------------------------------------------------------------------------
   TABLET
   ----------------------------------------------------------------------------------------- */

@media (max-width: 760px) {

    .rental-step.table-panel,
    #rental-returns,
    #rental-inspections {
        padding: 18px;
    }


    .rental-step.table-panel > .panel-heading {
        gap: 12px;
    }


    /*
     * Evita que la regla responsive generica haga
     * gigantes los botones Actualizar.
     */
    #rental-returns .section-actions,
    #rental-inspections .section-actions {
        flex: 0 0 auto;

        width: auto;
    }


    #rental-returns .section-actions .button,
    #rental-inspections .section-actions .button {
        flex: 0 0 auto;

        width: auto;
        min-width: 104px;
    }
}


/* -----------------------------------------------------------------------------------------
   TELEFONO
   ----------------------------------------------------------------------------------------- */

@media (max-width: 560px) {

    .rental-step.table-panel,
    #rental-returns,
    #rental-inspections {
        padding: 16px;
    }


    /*
     * Input completo arriba.
     * Buscar / Limpiar en dos columnas equilibradas.
     */
    #rental-material-search-form {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }


    #rental-material-search-form input {
        grid-column: 1 / -1;
    }


    #rental-material-search-form .button {
        width: 100%;
        min-width: 0;
    }


    .rental-step.table-panel > .panel-heading {
        flex-direction: column;
        align-items: stretch;
    }


    #rental-returns .section-actions,
    #rental-inspections .section-actions {
        width: 100%;
    }


    #rental-returns .section-actions .button,
    #rental-inspections .section-actions .button {
        width: 100%;
    }
}


/* VECTOR-SIC-UI-SYSTEM-V1 */
/* =========================================================================================
   VECTOR-SIC | SISTEMA VISUAL MAESTRO V1

   Esta capa centraliza identidad y componentes compartidos.

   NO modifica:
   - estructura HTML;
   - anchos particulares de tablas;
   - columnas;
   - flujos;
   - visibilidad;
   - logica de modulos.
   ========================================================================================= */


/* -----------------------------------------------------------------------------------------
   1. TOKENS DE IDENTIDAD
   ----------------------------------------------------------------------------------------- */

:root {

    /* Corporativos */

    --vs-blue: #312783;
    --vs-blue-hover: #261f68;
    --vs-blue-soft: #efedf9;

    --vs-red: #E30613;
    --vs-red-soft: #fff0f1;


    /* Estados */

    --vs-warning: #c48700;
    --vs-warning-soft: #fff8e6;


    /* Superficies */

    --vs-bg: #f4f6f8;

    --vs-surface: #ffffff;
    --vs-surface-soft: #f8fafb;

    --vs-text: #17212b;
    --vs-muted: #687684;

    --vs-line: #dfe5ea;
    --vs-line-strong: #cfd7de;


    /* Tipografia */

    --vs-font-body:
        Helvetica,
        Arial,
        sans-serif;

    --vs-font-title:
        Helvetica,
        Arial,
        sans-serif;

    /*
     * Ebrima se reserva para el imagotipo oficial.
     * NO es la tipografia general de la aplicacion.
     */
    --vs-font-logo:
        Ebrima,
        Helvetica,
        Arial,
        sans-serif;


    /* Espaciado */

    --vs-space-1: 4px;
    --vs-space-2: 8px;
    --vs-space-3: 12px;
    --vs-space-4: 16px;
    --vs-space-5: 20px;
    --vs-space-6: 24px;


    /* Radios */

    --vs-radius-control: 9px;
    --vs-radius-card: 14px;
    --vs-radius-dialog: 18px;


    /* Controles */

    --vs-control-height: 44px;
    --vs-button-height: 40px;


    /* Sombras */

    --vs-shadow-card:
        0 3px 14px
        rgba(30, 45, 55, 0.035);

    --vs-shadow-dialog:
        0 28px 90px
        rgba(20, 30, 40, 0.25);


    /* ---------------------------------------------------------------------
       ALIASES DE COMPATIBILIDAD

       El CSS anterior puede seguir usando los nombres viejos.
       Todos apuntan ahora al sistema Vector-SIC.
       --------------------------------------------------------------------- */

    --bg: var(--vs-bg);

    --surface: var(--vs-surface);
    --surface-soft: var(--vs-surface-soft);

    --text: var(--vs-text);
    --muted: var(--vs-muted);

    --line: var(--vs-line);
    --line-strong: var(--vs-line-strong);

    --vector-blue: var(--vs-blue);
    --vector-red: var(--vs-red);

    --accent: var(--vs-blue);
    --accent-hover: var(--vs-blue-hover);
    --accent-soft: var(--vs-blue-soft);

    --danger: var(--vs-red);
    --danger-soft: var(--vs-red-soft);

    --radius: var(--vs-radius-card);
    --radius-small: var(--vs-radius-control);
}


/* -----------------------------------------------------------------------------------------
   2. TIPOGRAFIA
   ----------------------------------------------------------------------------------------- */

html,
body,
button,
input,
select,
textarea {
    font-family: var(--vs-font-body);
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--vs-font-title);
    font-weight: 700;
}


/* -----------------------------------------------------------------------------------------
   3. BOTONES
   ----------------------------------------------------------------------------------------- */

.button {
    min-height: var(--vs-button-height);
    border-radius: var(--vs-radius-control);
}


/* -----------------------------------------------------------------------------------------
   4. FORMULARIOS
   ----------------------------------------------------------------------------------------- */

.field input,
.field select,
.field textarea,
.search-bar input {
    border-radius: var(--vs-radius-control);
}


/* -----------------------------------------------------------------------------------------
   5. TARJETAS Y PANELES
   ----------------------------------------------------------------------------------------- */

.panel,
.stat-card {
    border-color: var(--vs-line);
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
}


/* -----------------------------------------------------------------------------------------
   6. TABLAS
   -----------------------------------------------------------------------------------------

   Apariencia compartida:
   - tipografia;
   - bordes;
   - cabecera;
   - colores.

   Cada modulo puede decidir:
   - ancho minimo;
   - ancho de columnas;
   - wrapping;
   - alineacion numerica;
   - overflow horizontal.

   ----------------------------------------------------------------------------------------- */

table {
    font-family: var(--vs-font-body);
}


th {
    background: var(--vs-surface-soft);
    color: var(--vs-muted);
}


th,
td {
    border-bottom-color: var(--vs-line);
}


/* -----------------------------------------------------------------------------------------
   7. DIALOGOS
   ----------------------------------------------------------------------------------------- */

.material-dialog {
    border-radius: var(--vs-radius-dialog);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-dialog);
}


.material-dialog::backdrop {
    background:
        rgba(
            20,
            27,
            33,
            0.52
        );
}


/* -----------------------------------------------------------------------------------------
   8. SEMANTICA DE COLOR
   -----------------------------------------------------------------------------------------

   AZUL VECTOR
   - accion primaria;
   - seleccion;
   - foco;
   - navegacion activa;
   - identificacion institucional.

   ROJO VECTOR
   - error;
   - peligro;
   - accion destructiva.

   El rojo no debe utilizarse como decoracion ordinaria de controles.

   ----------------------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------------------
   9. BREAKPOINTS OFICIALES DE LA INTERFAZ

   1050 px -> escritorio reducido
    760 px -> tablet / navegacion inferior
    560 px -> formularios angostos
    430 px -> telefono pequeno

   Antes de introducir otro breakpoint se debe comprobar que estos
   no pueden resolver el caso.
   ----------------------------------------------------------------------------------------- */


/* VECTOR-SIC-UI-TABLES-V1 */
/* =========================================================================================
   VECTOR-SIC | TABLAS V1

   Esta capa controla solamente APARIENCIA.

   NO redefine:
   - table-layout;
   - min-width;
   - width de columnas;
   - sticky;
   - wrapping;
   - overflow;
   - display de celdas;
   - logica responsive particular.

   Esos aspectos permanecen bajo control de cada modulo.
   ========================================================================================= */


:root {

    --vs-table-head-bg:
        #f7f8fa;

    --vs-table-head-text:
        #65727f;

    --vs-table-body-text:
        #17212b;

    --vs-table-row-hover:
        #fafbfc;

    --vs-table-cell-x:
        16px;

    --vs-table-cell-y:
        12px;

    --vs-table-head-size:
        0.75rem;

    --vs-table-body-size:
        0.875rem;

    --vs-table-action-height:
        34px;
}


/* -----------------------------------------------------------------------------------------
   1. CONTENEDORES
   ----------------------------------------------------------------------------------------- */

.table-scroll,
.table-wrap {

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--vs-line-strong)
        transparent;
}


.table-scroll::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {

    height:
        8px;

    width:
        8px;
}


.table-scroll::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {

    border-radius:
        999px;

    background:
        var(--vs-line-strong);
}


.table-scroll::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {

    background:
        transparent;
}


/* -----------------------------------------------------------------------------------------
   2. TABLA
   ----------------------------------------------------------------------------------------- */

table {

    color:
        var(--vs-table-body-text);

    font-family:
        var(--vs-font-body);
}


/* -----------------------------------------------------------------------------------------
   3. ENCABEZADOS
   ----------------------------------------------------------------------------------------- */

table thead th {

    padding:
        11px
        var(--vs-table-cell-x);

    border-bottom:
        1px
        solid
        var(--vs-line-strong);

    background:
        var(--vs-table-head-bg);

    color:
        var(--vs-table-head-text);

    font-size:
        var(--vs-table-head-size);

    font-weight:
        700;

    line-height:
        1.25;

    letter-spacing:
        0.025em;

    text-transform:
        uppercase;

    vertical-align:
        middle;
}


/* -----------------------------------------------------------------------------------------
   4. CELDAS
   ----------------------------------------------------------------------------------------- */

table tbody td {

    padding:
        var(--vs-table-cell-y)
        var(--vs-table-cell-x);

    border-bottom:
        1px
        solid
        var(--vs-line);

    color:
        var(--vs-table-body-text);

    font-size:
        var(--vs-table-body-size);

    line-height:
        1.35;

    vertical-align:
        middle;
}


/* -----------------------------------------------------------------------------------------
   5. HOVER

   Se aplica a celdas y no al <tr> para convivir con columnas sticky.
   ----------------------------------------------------------------------------------------- */

table tbody tr:hover > td {

    background:
        var(--vs-table-row-hover);
}


/* -----------------------------------------------------------------------------------------
   6. FILAS VACIAS / MENSAJES
   ----------------------------------------------------------------------------------------- */

table tbody td.empty-cell {

    padding-top:
        28px;

    padding-bottom:
        28px;

    color:
        var(--vs-muted);

    text-align:
        center;
}


/* -----------------------------------------------------------------------------------------
   7. ACCIONES DENTRO DE TABLAS
   ----------------------------------------------------------------------------------------- */

.table-scroll .button,
.table-wrap .button {

    min-height:
        var(--vs-table-action-height);

    padding:
        6px
        10px;

    border-radius:
        8px;

    font-size:
        0.78rem;

    line-height:
        1.15;
}


.table-scroll .text-button,
.table-wrap .text-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    padding:
        5px
        8px;

    border-radius:
        8px;

    color:
        var(--vs-blue);

    font-size:
        0.78rem;

    font-weight:
        700;

    line-height:
        1.15;
}


/* -----------------------------------------------------------------------------------------
   8. NUMEROS

   Esta clase queda disponible para tablas nuevas.
   No altera automaticamente columnas existentes.
   ----------------------------------------------------------------------------------------- */

.table-number {

    font-variant-numeric:
        tabular-nums;

    text-align:
        right;
}


/* -----------------------------------------------------------------------------------------
   9. REGLA PARA MODULOS

   Un selector especifico de modulo puede controlar:
       min-width
       max-width
       width
       table-layout
       white-space
       overflow-wrap
       position / sticky
       text-align

   No debe volver a definir:
       color de cabecera
       tipografia general
       borde base
       hover general
       radio de botones de accion

   salvo una necesidad funcional documentada.
   ----------------------------------------------------------------------------------------- */


/* VECTOR-SIC-UI-FORMS-BUTTONS-V1 */
/* =========================================================================================
   VECTOR-SIC | FORMULARIOS + BOTONES V1

   Esta capa controla APARIENCIA compartida.

   NO redefine:
   - grids;
   - width de formularios;
   - orden de acciones;
   - columnas;
   - responsive de cada modulo;
   - altura especial de textareas;
   - anchura especial de inputs numericos.
   ========================================================================================= */


:root {

    /* Controles */

    --vs-control-bg:
        #ffffff;

    --vs-control-border:
        var(--vs-line-strong);

    --vs-control-border-hover:
        #b7c0c8;

    --vs-control-focus:
        var(--vs-blue);

    --vs-control-focus-ring:
        rgba(49, 39, 131, 0.13);

    --vs-control-placeholder:
        #8b97a3;

    --vs-control-disabled-bg:
        #f3f5f7;

    --vs-control-disabled-text:
        #8a949d;


    /* Botones */

    --vs-button-primary-bg:
        var(--vs-blue);

    --vs-button-primary-hover:
        var(--vs-blue-hover);

    --vs-button-primary-text:
        #ffffff;

    --vs-button-secondary-bg:
        #ffffff;

    --vs-button-secondary-hover:
        #f7f8fa;

    --vs-button-secondary-border:
        var(--vs-line-strong);

    --vs-button-secondary-text:
        var(--vs-text);


    /* Movimiento */

    --vs-transition-fast:
        120ms ease;
}


/* -----------------------------------------------------------------------------------------
   1. BOTON BASE
   ----------------------------------------------------------------------------------------- */

.button {

    min-height:
        var(--vs-button-height);

    padding:
        9px
        15px;

    border-radius:
        var(--vs-radius-control);

    font-family:
        var(--vs-font-body);

    font-size:
        0.875rem;

    font-weight:
        700;

    line-height:
        1.15;

    cursor:
        pointer;

    transition:
        background-color
        var(--vs-transition-fast),
        border-color
        var(--vs-transition-fast),
        color
        var(--vs-transition-fast),
        box-shadow
        var(--vs-transition-fast),
        opacity
        var(--vs-transition-fast);
}


/* -----------------------------------------------------------------------------------------
   2. PRIMARY
   ----------------------------------------------------------------------------------------- */

.button-primary {

    border-color:
        var(--vs-button-primary-bg);

    background:
        var(--vs-button-primary-bg);

    color:
        var(--vs-button-primary-text);
}


.button-primary:hover:not(:disabled) {

    border-color:
        var(--vs-button-primary-hover);

    background:
        var(--vs-button-primary-hover);
}


/* -----------------------------------------------------------------------------------------
   3. SECONDARY
   ----------------------------------------------------------------------------------------- */

.button-secondary {

    border-color:
        var(--vs-button-secondary-border);

    background:
        var(--vs-button-secondary-bg);

    color:
        var(--vs-button-secondary-text);
}


.button-secondary:hover:not(:disabled) {

    border-color:
        var(--vs-control-border-hover);

    background:
        var(--vs-button-secondary-hover);
}


/* -----------------------------------------------------------------------------------------
   4. QUIET
   ----------------------------------------------------------------------------------------- */

.button-quiet {

    border-color:
        var(--vs-line);

    background:
        transparent;

    color:
        var(--vs-text);
}


.button-quiet:hover:not(:disabled) {

    background:
        var(--vs-surface-soft);
}


/* -----------------------------------------------------------------------------------------
   5. DISABLED
   ----------------------------------------------------------------------------------------- */

.button:disabled {

    opacity:
        0.52;

    cursor:
        not-allowed;
}


/* -----------------------------------------------------------------------------------------
   6. FOCO DE BOTONES
   ----------------------------------------------------------------------------------------- */

.button:focus-visible,
.icon-button:focus-visible,
.text-button:focus-visible,
.row-action:focus-visible {

    outline:
        3px
        solid
        var(--vs-control-focus-ring);

    outline-offset:
        2px;
}


/* -----------------------------------------------------------------------------------------
   7. ICON BUTTON
   ----------------------------------------------------------------------------------------- */

.icon-button {

    border-color:
        var(--vs-line-strong);

    border-radius:
        var(--vs-radius-control);

    background:
        var(--vs-surface);

    color:
        var(--vs-text);

    transition:
        background-color
        var(--vs-transition-fast),
        border-color
        var(--vs-transition-fast);
}


.icon-button:hover {

    border-color:
        var(--vs-control-border-hover);

    background:
        var(--vs-surface-soft);
}


/* -----------------------------------------------------------------------------------------
   8. TEXT BUTTON / ROW ACTION
   ----------------------------------------------------------------------------------------- */

.text-button,
.row-action {

    color:
        var(--vs-blue);

    font-family:
        var(--vs-font-body);

    font-weight:
        700;
}


.row-action {

    border-color:
        var(--vs-line-strong);

    border-radius:
        8px;

    background:
        var(--vs-surface);
}


.row-action:hover {

    border-color:
        #c5c0df;

    background:
        var(--vs-blue-soft);
}


/* -----------------------------------------------------------------------------------------
   9. ETIQUETAS DE FORMULARIO
   ----------------------------------------------------------------------------------------- */

.field > span,
.entity-form-grid label,
.remission-edit-grid-web6h3 label {

    color:
        var(--vs-text);

    font-family:
        var(--vs-font-body);

    font-size:
        0.84rem;

    font-weight:
        700;

    line-height:
        1.3;
}


/* -----------------------------------------------------------------------------------------
   10. INPUTS / SELECTS / TEXTAREAS

   Importante:
   no se asignan width ni grid.
   ----------------------------------------------------------------------------------------- */

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
.search-bar input,
#rental-material-search-form input,
.remission-edit-grid-web6h3 input,
.remission-edit-grid-web6h3 textarea,
.work-close-dialog textarea {

    box-sizing:
        border-box;

    border:
        1px
        solid
        var(--vs-control-border);

    border-radius:
        var(--vs-radius-control);

    background:
        var(--vs-control-bg);

    color:
        var(--vs-text);

    font-family:
        var(--vs-font-body);

    transition:
        border-color
        var(--vs-transition-fast),
        box-shadow
        var(--vs-transition-fast),
        background-color
        var(--vs-transition-fast);
}


/* Inputs / selects estándar */

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.search-bar input,
#rental-material-search-form input,
.remission-edit-grid-web6h3 input {

    min-height:
        var(--vs-control-height);
}


/* Padding estándar de input */

.field input:not([type="checkbox"]):not([type="radio"]),
.search-bar input,
#rental-material-search-form input,
.remission-edit-grid-web6h3 input {

    padding:
        10px
        12px;
}


/* Select mantiene espacio de flecha */

.field select {

    padding:
        10px
        36px
        10px
        12px;
}


/* Textarea conserva su altura especifica */

.field textarea,
.remission-edit-grid-web6h3 textarea,
.work-close-dialog textarea {

    padding:
        10px
        12px;

    line-height:
        1.4;

    resize:
        vertical;
}


/* -----------------------------------------------------------------------------------------
   11. PLACEHOLDER
   ----------------------------------------------------------------------------------------- */

.field input::placeholder,
.field textarea::placeholder,
.search-bar input::placeholder,
#rental-material-search-form input::placeholder,
.remission-edit-grid-web6h3 input::placeholder,
.remission-edit-grid-web6h3 textarea::placeholder,
.work-close-dialog textarea::placeholder {

    color:
        var(--vs-control-placeholder);

    opacity:
        1;
}


/* -----------------------------------------------------------------------------------------
   12. HOVER
   ----------------------------------------------------------------------------------------- */

.field input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled),
.field select:hover:not(:disabled),
.field textarea:hover:not(:disabled),
.search-bar input:hover:not(:disabled),
#rental-material-search-form input:hover:not(:disabled),
.remission-edit-grid-web6h3 input:hover:not(:disabled),
.remission-edit-grid-web6h3 textarea:hover:not(:disabled),
.work-close-dialog textarea:hover:not(:disabled) {

    border-color:
        var(--vs-control-border-hover);
}


/* -----------------------------------------------------------------------------------------
   13. FOCO
   ----------------------------------------------------------------------------------------- */

.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus,
.search-bar input:focus,
#rental-material-search-form input:focus,
.remission-edit-grid-web6h3 input:focus,
.remission-edit-grid-web6h3 textarea:focus,
.work-close-dialog textarea:focus {

    outline:
        none;

    border-color:
        var(--vs-control-focus);

    box-shadow:
        0
        0
        0
        3px
        var(--vs-control-focus-ring);
}


/* -----------------------------------------------------------------------------------------
   14. DISABLED / READONLY
   ----------------------------------------------------------------------------------------- */

.field input:disabled,
.field select:disabled,
.field textarea:disabled,
.search-bar input:disabled,
#rental-material-search-form input:disabled,
.remission-edit-grid-web6h3 input:disabled,
.remission-edit-grid-web6h3 textarea:disabled {

    border-color:
        var(--vs-line);

    background:
        var(--vs-control-disabled-bg);

    color:
        var(--vs-control-disabled-text);

    cursor:
        not-allowed;
}


.field input[readonly],
.field textarea[readonly],
.remission-edit-grid-web6h3 input[readonly],
.remission-edit-grid-web6h3 textarea[readonly] {

    background:
        var(--vs-surface-soft);
}


/* -----------------------------------------------------------------------------------------
   15. TEXTO AUXILIAR
   ----------------------------------------------------------------------------------------- */

.field small {

    color:
        var(--vs-muted);

    font-size:
        0.78rem;

    line-height:
        1.4;
}


/* -----------------------------------------------------------------------------------------
   16. ERROR
   ----------------------------------------------------------------------------------------- */

.form-error {

    border:
        1px
        solid
        rgba(
            227,
            6,
            19,
            0.18
        );

    border-radius:
        var(--vs-radius-control);

    background:
        var(--vs-red-soft);

    color:
        #a2050e;

    font-size:
        0.84rem;

    line-height:
        1.4;
}


/* -----------------------------------------------------------------------------------------
   17. NOTAS
   ----------------------------------------------------------------------------------------- */

.form-note {

    border-color:
        var(--vs-line);

    border-radius:
        var(--vs-radius-control);

    background:
        var(--vs-surface-soft);

    color:
        var(--vs-muted);
}


.form-note-warning {

    border-color:
        #ead49a;

    background:
        var(--vs-warning-soft);

    color:
        var(--vs-text);
}


/* -----------------------------------------------------------------------------------------
   18. OPCIONES / RADIO
   ----------------------------------------------------------------------------------------- */

.choice-option {

    border-color:
        var(--vs-line-strong);

    border-radius:
        var(--vs-radius-control);

    background:
        var(--vs-surface);
}


.choice-option:hover {

    border-color:
        var(--vs-control-border-hover);

    background:
        var(--vs-surface-soft);
}


.choice-option:has(input:checked) {

    border-color:
        var(--vs-blue);

    background:
        var(--vs-blue-soft);
}


/* -----------------------------------------------------------------------------------------
   19. REGLA PARA FUTUROS FORMULARIOS

   Un modulo puede controlar:
       width
       min-width
       max-width
       grid-column
       grid-template-columns
       textarea min-height si el contenido lo exige
       orden responsive

   No debe reinventar:
       border
       focus
       radius
       color base
       placeholder
       estado disabled
       tipografia

   ----------------------------------------------------------------------------------------- */


/* VECTOR-SIC-UI-DIALOGS-V1 */
/* =========================================================================================
   VECTOR-SIC | MODALES V1

   PRINCIPIO
   -----------------------------------------------------------------------------------------
   Todos los dialogos comparten la misma carcasa visual.

   Pueden variar:
   - ancho;
   - altura maxima;
   - grid del contenido;
   - formularios internos;
   - cantidad de acciones.

   No deben variar sin motivo:
   - radio;
   - backdrop;
   - sombra;
   - jerarquia de encabezado;
   - divisor;
   - boton de cierre;
   - apariencia del pie de acciones.
   ========================================================================================= */


:root {

    --vs-dialog-bg:
        var(--vs-surface);

    --vs-dialog-divider:
        var(--vs-line);

    --vs-dialog-backdrop:
        rgba(
            20,
            27,
            33,
            0.52
        );

    --vs-dialog-header-x:
        22px;

    --vs-dialog-header-y:
        20px;

    --vs-dialog-body:
        20px;

    --vs-dialog-actions-x:
        20px;

    --vs-dialog-actions-y:
        14px;

    --vs-dialog-title-size:
        1.2rem;

    --vs-dialog-copy-size:
        0.84rem;
}


/* -----------------------------------------------------------------------------------------
   1. CARCASA

   No se define width/max-width:
   cada dialogo conserva su geometria funcional.
   ----------------------------------------------------------------------------------------- */

.material-dialog,
.remission-edit-dialog-web6h3 {

    border:
        0;

    border-radius:
        var(--vs-radius-dialog);

    background:
        var(--vs-dialog-bg);

    color:
        var(--vs-text);

    box-shadow:
        var(--vs-shadow-dialog);

    overflow:
        hidden;
}


.material-dialog::backdrop,
.remission-edit-dialog-web6h3::backdrop {

    background:
        var(--vs-dialog-backdrop);
}


/* -----------------------------------------------------------------------------------------
   2. ENCABEZADO DE DIALOGOS ESTANDAR
   ----------------------------------------------------------------------------------------- */

.dialog-heading {

    gap:
        16px;

    padding:
        var(--vs-dialog-header-y)
        var(--vs-dialog-header-x);

    border-bottom:
        1px
        solid
        var(--vs-dialog-divider);

    background:
        var(--vs-dialog-bg);
}


.dialog-heading > div:first-child {

    min-width:
        0;
}


.dialog-heading .eyebrow {

    margin:
        0
        0
        4px;

    color:
        var(--vs-blue);

    font-size:
        0.72rem;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.045em;

    text-transform:
        uppercase;
}


.dialog-heading h2 {

    margin:
        0
        0
        4px;

    color:
        var(--vs-text);

    font-size:
        var(--vs-dialog-title-size);

    font-weight:
        700;

    line-height:
        1.2;
}


.dialog-heading > div > p:last-child {

    margin:
        0;

    color:
        var(--vs-muted);

    font-size:
        var(--vs-dialog-copy-size);

    line-height:
        1.45;
}


/* -----------------------------------------------------------------------------------------
   3. BOTON X
   ----------------------------------------------------------------------------------------- */

.dialog-heading .icon-button {

    flex:
        0
        0
        auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

    min-height:
        36px;

    padding:
        0;

    border-radius:
        50%;

    font-size:
        1.15rem;

    line-height:
        1;
}


/* -----------------------------------------------------------------------------------------
   4. CUERPO DE FORMULARIO
   ----------------------------------------------------------------------------------------- */

.form-dialog-body {

    padding:
        var(--vs-dialog-body);
}


/* -----------------------------------------------------------------------------------------
   5. PIE DE ACCIONES ESTANDAR
   ----------------------------------------------------------------------------------------- */

.material-dialog .dialog-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    padding:
        var(--vs-dialog-actions-y)
        var(--vs-dialog-actions-x);

    border-top:
        1px
        solid
        var(--vs-dialog-divider);

    background:
        var(--vs-dialog-bg);
}


.material-dialog .dialog-actions .button {

    flex:
        0
        0
        auto;
}


/* -----------------------------------------------------------------------------------------
   6. CORRECCION DOCUMENTAL DE REMISION

   Este editor nacio antes que la carcasa .material-dialog.
   Conservamos su ancho/layout, pero le damos el mismo lenguaje visual.
   ----------------------------------------------------------------------------------------- */

.remission-edit-card-web6h3 {

    background:
        var(--vs-dialog-bg);

    color:
        var(--vs-text);
}


.remission-edit-header-web6h3 {

    gap:
        16px;

    margin-bottom:
        18px;

    padding-bottom:
        16px;

    border-bottom:
        1px
        solid
        var(--vs-dialog-divider);

    background:
        var(--vs-dialog-bg);
}


.remission-edit-header-web6h3 .eyebrow {

    margin:
        0
        0
        4px;

    color:
        var(--vs-blue);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.045em;

    text-transform:
        uppercase;
}


.remission-edit-header-web6h3 h2 {

    margin:
        0
        0
        4px;

    color:
        var(--vs-text);

    font-size:
        var(--vs-dialog-title-size);

    font-weight:
        700;

    line-height:
        1.2;
}


.remission-edit-header-web6h3 p:last-child {

    margin-bottom:
        0;

    color:
        var(--vs-muted);

    font-size:
        var(--vs-dialog-copy-size);

    line-height:
        1.45;
}


.remission-edit-warning-web6h3 {

    border:
        1px
        solid
        #ead49a;

    border-radius:
        var(--vs-radius-control);

    background:
        var(--vs-warning-soft);

    color:
        var(--vs-text);
}


.remission-edit-actions-web6h3 {

    padding-top:
        16px;

    border-top:
        1px
        solid
        var(--vs-dialog-divider);
}


/* -----------------------------------------------------------------------------------------
   7. HISTORIAL / CIERRE DE OBRA

   Conservan sus componentes internos y anchos.
   Solo se refuerza la misma carcasa.
   ----------------------------------------------------------------------------------------- */

.work-close-dialog,
.work-history-dialog-web7k {

    background:
        var(--vs-dialog-bg);

    color:
        var(--vs-text);
}


/* -----------------------------------------------------------------------------------------
   8. DETALLES DENTRO DE MODALES
   ----------------------------------------------------------------------------------------- */

.material-dialog .detail-field {

    border:
        1px
        solid
        var(--vs-line);

    border-radius:
        var(--vs-radius-control);

    background:
        var(--vs-surface-soft);
}


/* -----------------------------------------------------------------------------------------
   9. SCROLL

   El scrollbar de cuerpos largos conserva el mismo lenguaje
   que las tablas V1.
   ----------------------------------------------------------------------------------------- */

.material-dialog,
.remission-edit-card-web6h3 {

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--vs-line-strong)
        transparent;
}


.material-dialog::-webkit-scrollbar,
.remission-edit-card-web6h3::-webkit-scrollbar {

    width:
        8px;
}


.material-dialog::-webkit-scrollbar-thumb,
.remission-edit-card-web6h3::-webkit-scrollbar-thumb {

    border-radius:
        999px;

    background:
        var(--vs-line-strong);
}


/* -----------------------------------------------------------------------------------------
   10. REGLA DE IMPLEMENTACION

   Un dialogo nuevo puede definir:
       width
       max-width
       max-height
       grids internos
       contenido
       scroll interno

   No debe reinventar:
       backdrop
       border-radius
       shadow
       heading
       close button
       divider
       footer de acciones

   ----------------------------------------------------------------------------------------- */


/* VECTOR-SIC-UI-PANELS-HIERARCHY-V1 */
/* =========================================================================================
   VECTOR-SIC | PANELES + JERARQUIA V1

   Esta capa unifica lenguaje visual.

   NO redefine:
   - width;
   - min-width;
   - max-width;
   - grids;
   - columnas;
   - flex funcional;
   - overflow;
   - padding funcional de paneles especiales;
   - responsive de cada modulo.
   ========================================================================================= */


:root {

    --vs-eyebrow-size:
        0.72rem;

    --vs-panel-title-size:
        1rem;

    --vs-panel-copy-size:
        0.83rem;

    --vs-section-title-size:
        1.35rem;

    --vs-detail-label-size:
        0.72rem;

    --vs-detail-value-size:
        0.86rem;

    --vs-stat-label-size:
        0.82rem;

    --vs-stat-value-size:
        2rem;

    --vs-internal-header-size:
        0.81rem;
}


/* -----------------------------------------------------------------------------------------
   1. EYEBROW

   Paso 1, Paso 2, Clientes y Obras, etc.
   ----------------------------------------------------------------------------------------- */

.eyebrow {

    margin-top:
        0;

    color:
        var(--vs-blue);

    font-family:
        var(--vs-font-body);

    font-size:
        var(--vs-eyebrow-size);

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;
}


/* -----------------------------------------------------------------------------------------
   2. TITULO PRINCIPAL DE SECCION
   ----------------------------------------------------------------------------------------- */

.section-heading h2 {

    color:
        var(--vs-text);

    font-family:
        var(--vs-font-title);

    font-size:
        var(--vs-section-title-size);

    font-weight:
        700;

    line-height:
        1.2;
}


.section-heading p {

    color:
        var(--vs-muted);

    font-family:
        var(--vs-font-body);

    line-height:
        1.45;
}


/* -----------------------------------------------------------------------------------------
   3. CABECERA DE PANEL
   ----------------------------------------------------------------------------------------- */

.panel-heading h3 {

    color:
        var(--vs-text);

    font-family:
        var(--vs-font-title);

    font-size:
        var(--vs-panel-title-size);

    font-weight:
        700;

    line-height:
        1.25;
}


.panel-heading p {

    color:
        var(--vs-muted);

    font-family:
        var(--vs-font-body);

    font-size:
        var(--vs-panel-copy-size);

    line-height:
        1.45;
}


/* -----------------------------------------------------------------------------------------
   4. CABECERA INTERNA DE TABLA

   Ejemplo:
   "Material disponible"
   "Sin materiales seleccionados"
   ----------------------------------------------------------------------------------------- */

.table-header {

    border-bottom-color:
        var(--vs-line);

    background:
        var(--vs-surface);

    color:
        var(--vs-muted);

    font-family:
        var(--vs-font-body);

    font-size:
        var(--vs-internal-header-size);

    font-weight:
        700;

    line-height:
        1.3;
}


/* -----------------------------------------------------------------------------------------
   5. TARJETAS ESTADISTICAS
   ----------------------------------------------------------------------------------------- */

.stat-card {

    border-color:
        var(--vs-line);

    background:
        var(--vs-surface);

    color:
        var(--vs-text);
}


.stat-label {

    color:
        var(--vs-muted);

    font-family:
        var(--vs-font-body);

    font-size:
        var(--vs-stat-label-size);

    font-weight:
        700;

    line-height:
        1.3;
}


.stat-value {

    color:
        var(--vs-text);

    font-family:
        var(--vs-font-title);

    font-size:
        var(--vs-stat-value-size);

    font-weight:
        700;

    font-variant-numeric:
        tabular-nums;
}


.stat-card small {

    color:
        var(--vs-muted);

    font-family:
        var(--vs-font-body);

    line-height:
        1.35;
}


/* -----------------------------------------------------------------------------------------
   6. CAMPOS DE DETALLE

   Usados en material, historial de obra y otros resúmenes.
   ----------------------------------------------------------------------------------------- */

.detail-field {

    border:
        1px
        solid
        var(--vs-line);

    border-radius:
        var(--vs-radius-control);

    background:
        var(--vs-surface-soft);

    color:
        var(--vs-text);
}


.detail-field span {

    color:
        var(--vs-muted);

    font-family:
        var(--vs-font-body);

    font-size:
        var(--vs-detail-label-size);

    font-weight:
        700;

    line-height:
        1.25;

    letter-spacing:
        0.035em;

    text-transform:
        uppercase;
}


.detail-field strong {

    color:
        var(--vs-text);

    font-family:
        var(--vs-font-body);

    font-size:
        var(--vs-detail-value-size);

    font-weight:
        600;

    line-height:
        1.4;
}


/* -----------------------------------------------------------------------------------------
   7. EMPTY STATE

   No altera dimensiones ni layout.
   ----------------------------------------------------------------------------------------- */

.empty-state {

    color:
        var(--vs-muted);

    font-family:
        var(--vs-font-body);

    line-height:
        1.45;
}


/* -----------------------------------------------------------------------------------------
   8. REGLA PARA MODULOS

   Un modulo puede controlar:
       margin
       padding cuando su contenido lo requiera
       width
       min/max width
       grid
       flex
       columnas
       overflow
       responsive

   No debe reinventar sin razon:
       color de eyebrow
       jerarquia de titulo
       tipografia de panel
       estilo de detail-field
       estilo de stat-card
       estilo de table-header

   ----------------------------------------------------------------------------------------- */


/* VECTOR-SIC-UI-DIALOGS-R6B-SCROLL-FIX */
/* =========================================================================================
   VECTOR-SIC | MODALES | CORRECCION DE SCROLL

   Arquitectura definitiva:

   1. Material dialog normal:
      scroll en la propia carcasa.

   2. Historial de obra:
      scroll en la propia carcasa y pie sticky.

   3. Cerrar obra:
      carcasa fija;
      scroll interno en #work-close-form.

   4. Correccion documental:
      carcasa fija;
      scroll interno en .remission-edit-card-web6h3.

   ========================================================================================= */


/* -----------------------------------------------------------------------------------------
   A. DIALOGOS NORMALES

   Crear cliente, Crear/vincular obra y Detalle de material.
   ----------------------------------------------------------------------------------------- */

.material-dialog:not(.work-close-dialog) {

    overflow-x:
        hidden;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;
}


/* -----------------------------------------------------------------------------------------
   B. HISTORIAL DE OBRA
   ----------------------------------------------------------------------------------------- */

.work-history-dialog-web7k {

    overflow-x:
        hidden;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;
}


/* -----------------------------------------------------------------------------------------
   C. CIERRE DE OBRA

   No debe heredar el scroll exterior.
   Su formulario interno ya es el contenedor desplazable.
   ----------------------------------------------------------------------------------------- */

.work-close-dialog {

    overflow:
        hidden;
}


.work-close-dialog #work-close-form {

    overflow-y:
        auto;

    overscroll-behavior:
        contain;
}


/* -----------------------------------------------------------------------------------------
   D. CORRECCION DOCUMENTAL

   Conserva su scroll interno existente.
   ----------------------------------------------------------------------------------------- */

.remission-edit-dialog-web6h3 {

    overflow:
        hidden;
}


.remission-edit-card-web6h3 {

    overflow-y:
        auto;

    overscroll-behavior:
        contain;
}


/* VECTOR-SIC-UI-NAVIGATION-STATES-V1 */
/* =========================================================================================
   VECTOR-SIC | NAVEGACION + ENCABEZADO + ESTADOS V1

   Esta capa unifica lenguaje visual.

   NO modifica:
   - ancho del sidebar;
   - altura de navegacion movil;
   - distribucion de botones;
   - breakpoints;
   - flex-basis;
   - grids;
   - posicion fixed/sticky;
   - logica de navegacion.
   ========================================================================================= */


:root {

    /* Navegacion */

    --vs-nav-text:
        #43515e;

    --vs-nav-hover-bg:
        var(--vs-surface-soft);

    --vs-nav-active-bg:
        var(--vs-blue-soft);

    --vs-nav-active-text:
        var(--vs-blue);


    /* Estados */

    --vs-state-info-bg:
        var(--vs-blue-soft);

    --vs-state-info-text:
        var(--vs-blue);

    --vs-state-neutral-bg:
        #f1f3f5;

    --vs-state-neutral-text:
        #5f6b76;

    --vs-state-warning-bg:
        var(--vs-warning-soft);

    --vs-state-warning-text:
        #8a6500;

    --vs-state-danger-bg:
        var(--vs-red-soft);

    --vs-state-danger-text:
        #a2050e;

    --vs-state-success-bg:
        #edf7f1;

    --vs-state-success-text:
        #287048;


    /* Pildoras */

    --vs-badge-radius:
        999px;

    --vs-badge-font-size:
        0.72rem;
}


/* -----------------------------------------------------------------------------------------
   1. SIDEBAR
   ----------------------------------------------------------------------------------------- */

.sidebar {

    border-color:
        var(--vs-line);

    background:
        var(--vs-surface);

    color:
        var(--vs-text);
}


/* -----------------------------------------------------------------------------------------
   2. MARCA PROVISIONAL

   Sigue siendo una marca temporal.
   NO sustituye al imagotipo oficial.
   ----------------------------------------------------------------------------------------- */

.brand-mark {

    background:
        var(--vs-blue);

    color:
        #ffffff;

    font-family:
        var(--vs-font-body);

    font-weight:
        700;
}


.brand h1,
.brand strong {

    color:
        var(--vs-text);

    font-family:
        var(--vs-font-title);

    font-weight:
        700;
}


.brand p,
.brand small {

    color:
        var(--vs-muted);

    font-family:
        var(--vs-font-body);
}


/* -----------------------------------------------------------------------------------------
   3. NAVEGACION
   ----------------------------------------------------------------------------------------- */

.nav-button {

    color:
        var(--vs-nav-text);

    font-family:
        var(--vs-font-body);

    font-weight:
        600;

    transition:
        background-color
        var(--vs-transition-fast),
        color
        var(--vs-transition-fast),
        box-shadow
        var(--vs-transition-fast);
}


.nav-button:hover {

    background:
        var(--vs-nav-hover-bg);

    color:
        var(--vs-text);
}


.nav-button.active {

    background:
        var(--vs-nav-active-bg);

    color:
        var(--vs-nav-active-text);

    font-weight:
        700;
}


.nav-button:focus-visible {

    outline:
        3px
        solid
        var(--vs-control-focus-ring);

    outline-offset:
        2px;
}


.nav-icon {

    color:
        currentColor;
}


/* -----------------------------------------------------------------------------------------
   4. USUARIO EN SIDEBAR
   ----------------------------------------------------------------------------------------- */

.sidebar-user {

    border-color:
        var(--vs-line);
}


.avatar {

    background:
        var(--vs-blue-soft);

    color:
        var(--vs-blue);

    font-family:
        var(--vs-font-body);

    font-weight:
        700;
}


.sidebar-user-copy strong {

    color:
        var(--vs-text);

    font-family:
        var(--vs-font-body);

    font-weight:
        700;
}


.sidebar-user-copy small {

    color:
        var(--vs-muted);

    font-family:
        var(--vs-font-body);
}


/* -----------------------------------------------------------------------------------------
   5. TOPBAR
   ----------------------------------------------------------------------------------------- */

.topbar {

    border-color:
        var(--vs-line);

    background:
        var(--vs-surface);
}


.topbar h1 {

    color:
        var(--vs-text);

    font-family:
        var(--vs-font-title);

    font-weight:
        700;
}


.topbar .eyebrow {

    color:
        var(--vs-blue);
}


/* -----------------------------------------------------------------------------------------
   6. USUARIO EN TOPBAR
   ----------------------------------------------------------------------------------------- */

.user-pill-name {

    color:
        var(--vs-text);

    font-family:
        var(--vs-font-body);

    font-weight:
        600;
}


.role-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        5px
        9px;

    border:
        1px
        solid
        #d9d5ed;

    border-radius:
        var(--vs-badge-radius);

    background:
        var(--vs-state-info-bg);

    color:
        var(--vs-state-info-text);

    font-family:
        var(--vs-font-body);

    font-size:
        var(--vs-badge-font-size);

    font-weight:
        700;

    line-height:
        1.1;
}


/* -----------------------------------------------------------------------------------------
   7. BADGE BASE

   Disponible para componentes nuevos.
   ----------------------------------------------------------------------------------------- */

.status-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    padding:
        5px
        9px;

    border-radius:
        var(--vs-badge-radius);

    font-family:
        var(--vs-font-body);

    font-size:
        var(--vs-badge-font-size);

    font-weight:
        700;

    line-height:
        1.1;

    white-space:
        nowrap;
}


.status-badge--info {

    background:
        var(--vs-state-info-bg);

    color:
        var(--vs-state-info-text);
}


.status-badge--neutral {

    background:
        var(--vs-state-neutral-bg);

    color:
        var(--vs-state-neutral-text);
}


.status-badge--success {

    background:
        var(--vs-state-success-bg);

    color:
        var(--vs-state-success-text);
}


.status-badge--warning {

    background:
        var(--vs-state-warning-bg);

    color:
        var(--vs-state-warning-text);
}


.status-badge--danger {

    background:
        var(--vs-state-danger-bg);

    color:
        var(--vs-state-danger-text);
}


/* -----------------------------------------------------------------------------------------
   8. ESTADO HISTORICO DE OBRA

   Actualmente es la píldora de estado visible dentro del historial.
   ----------------------------------------------------------------------------------------- */

.work-history-status-web7k {

    border:
        1px
        solid
        #d9d5ed;

    border-radius:
        var(--vs-badge-radius);

    background:
        var(--vs-state-info-bg);

    color:
        var(--vs-state-info-text);

    font-family:
        var(--vs-font-body);

    font-size:
        var(--vs-badge-font-size);

    font-weight:
        700;

    line-height:
        1.1;
}


/* -----------------------------------------------------------------------------------------
   9. REGLA SEMANTICA

   Azul:
       seleccion, informacion, contexto institucional.

   Gris:
       neutral / inactivo sin peligro.

   Verde:
       operacion correcta o estado positivo.

   Amarillo:
       pendiente o requiere atencion.

   Rojo:
       error, peligro, destruccion o bloqueo.

   El color nunca debe ser la unica señal de significado:
   siempre debe existir una etiqueta textual.
   ----------------------------------------------------------------------------------------- */


/* VECTOR-SIC-UI-OFFICIAL-BRAND-V1 */
/* =========================================================================================
   VECTOR-SIC | IMAGOTIPO OFICIAL V1

   El recurso grafico se mantiene intacto.
   Esta capa solo controla su presentacion dentro de la interfaz.
   ========================================================================================= */


/* -----------------------------------------------------------------------------------------
   1. LOGO BASE
   ----------------------------------------------------------------------------------------- */

.vector-logo {

    display:
        block;

    flex:
        0 0
        auto;

    height:
        auto;

    max-width:
        100%;
}


/* -----------------------------------------------------------------------------------------
   2. LOGIN
   ----------------------------------------------------------------------------------------- */

.brand-official-login {

    display:
        grid;

    align-items:
        start;

    gap:
        7px;
}


.vector-logo-login {

    width:
        240px;
}


.brand-product-label {

    margin:
        0;

    color:
        var(--vs-muted);

    font-family:
        var(--vs-font-body);

    font-size:
        0.78rem;

    font-weight:
        600;

    line-height:
        1.3;
}


/* -----------------------------------------------------------------------------------------
   3. SIDEBAR
   ----------------------------------------------------------------------------------------- */

.brand-official-sidebar {

    display:
        grid;

    align-items:
        start;

    gap:
        6px;
}


.vector-logo-sidebar {

    width:
        190px;
}


/* -----------------------------------------------------------------------------------------
   4. TOPBAR

   Logo oficial + nombre de la seccion.
   ----------------------------------------------------------------------------------------- */

.topbar-brand-page {

    display:
        flex;

    min-width:
        0;

    align-items:
        center;

    gap:
        15px;
}


.vector-logo-topbar {

    width:
        175px;
}


.topbar-brand-page #page-title {

    margin:
        0;

    padding-left:
        15px;

    border-left:
        1px
        solid
        var(--vs-line-strong);

    color:
        var(--vs-text);

    font-family:
        var(--vs-font-title);

    font-size:
        1.2rem;

    font-weight:
        700;

    line-height:
        1.15;

    white-space:
        nowrap;
}


/* -----------------------------------------------------------------------------------------
   5. TABLET / NAVEGACION INFERIOR
   ----------------------------------------------------------------------------------------- */

@media (max-width: 760px) {

    .vector-logo-topbar {

        width:
            156px;
    }


    .topbar-brand-page {

        gap:
            11px;
    }


    .topbar-brand-page #page-title {

        padding-left:
            11px;

        font-size:
            1.08rem;
    }

}


/* -----------------------------------------------------------------------------------------
   6. TELEFONO PEQUENO
   ----------------------------------------------------------------------------------------- */

@media (max-width: 430px) {

    .vector-logo-topbar {

        width:
            126px;
    }


    .topbar-brand-page {

        gap:
            8px;
    }


    .topbar-brand-page #page-title {

        padding-left:
            8px;

        font-size:
            0.98rem;
    }


    .vector-logo-login {

        width:
            min(
                220px,
                100%
            );
    }

}


/* VECTOR-SIC-UI-OFFICIAL-BRAND-R8C */
/* =========================================================================================
   VECTOR-SIC | MARCA RESPONSIVE

   DESKTOP
   -------
   El imagotipo principal vive en el sidebar.
   El topbar muestra solamente la seccion actual.

   TABLET / MOVIL
   --------------
   Al desaparecer el sidebar, el imagotipo vuelve al topbar.

   ========================================================================================= */


/* -----------------------------------------------------------------------------------------
   DESKTOP
   ----------------------------------------------------------------------------------------- */

.vector-logo-topbar {

    display:
        none;
}


.topbar-brand-page #page-title {

    padding-left:
        0;

    border-left:
        0;
}


/* -----------------------------------------------------------------------------------------
   TABLET / MOVIL
   ----------------------------------------------------------------------------------------- */

@media (max-width: 760px) {

    .vector-logo-topbar {

        display:
            block;
    }


    .topbar-brand-page #page-title {

        padding-left:
            11px;

        border-left:
            1px
            solid
            var(--vs-line-strong);
    }

}


/* -----------------------------------------------------------------------------------------
   TELEFONO PEQUENO
   ----------------------------------------------------------------------------------------- */

@media (max-width: 430px) {

    .topbar-brand-page #page-title {

        padding-left:
            8px;
    }

}


/* VECTOR-SIC-WEB7P-R2D-UI */
/* =========================================================================================
   LOGIN / TOPBAR / CATALOGO
   ========================================================================================= */


/* El imagotipo oficial identifica por si solo el login. */

.brand-official-login .brand-product-label {

    display:
        none;
}


/* El nombre completo permanece disponible en el sidebar. */

.topbar .user-pill-name {

    display:
        none;
}


/* Medida tecnica secundaria en la celda Producto. */

.catalog-product-cell .catalog-product-measure {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--vs-muted);

    font-family:
        var(--vs-font-body);

    font-size:
        0.78rem;

    font-weight:
        500;

    line-height:
        1.25;
}


/* VECTOR-SIC-WEB7P-R2E-IDENTIDAD-RESPONSIVE */
/* =========================================================================================
   VECTOR-SIC | IDENTIDAD FUNCIONAL + TOPBAR RESPONSIVE

   Escritorio:
   - Conserva el imagotipo Vector.
   - Conserva la estructura actual de navegaci?n.
   - El nombre completo contin?a disponible en el bloque de usuario lateral.

   M?vil / pantalla reducida:
   - El imagotipo desaparece ?nicamente del topbar.
   - El nombre de la secci?n aprovecha ese espacio.
   - El rol aparece arriba.
   - El nombre completo del operador aparece debajo.
   ========================================================================================= */


.brand-official-login .brand-product-label {

    display:
        block;

    margin:
        10px
        0
        0;

    line-height:
        1.35;
}


.brand-official-sidebar .brand-product-label {

    display:
        block;

    max-width:
        190px;

    line-height:
        1.3;

    white-space:
        normal;
}


@media (max-width: 760px) {

    .topbar-brand-page {

        min-width:
            0;

        gap:
            0;
    }


    .topbar-brand-page .vector-logo-topbar {

        display:
            none;
    }


    .topbar-brand-page #page-title {

        margin-left:
            0;

        padding-left:
            0;

        border-left:
            0;
    }


    .user-pill {

        display:
            flex;

        flex-direction:
            column-reverse;

        align-items:
            flex-end;

        justify-content:
            center;

        gap:
            2px;

        min-width:
            0;
    }


    .user-pill-name {

        display:
            block;

        max-width:
            220px;

        overflow:
            visible;

        color:
            var(--vs-text);

        font-size:
            0.72rem;

        font-weight:
            600;

        line-height:
            1.15;

        text-align:
            right;

        text-overflow:
            clip;

        white-space:
            normal;
    }


    .user-pill .role-badge {

        align-self:
            flex-end;

        margin:
            0;
    }


    .topbar-actions {

        gap:
            8px;
    }
}


@media (max-width: 430px) {

    .topbar {

        gap:
            8px;

        padding-right:
            12px;

        padding-left:
            12px;
    }


    .topbar-actions {

        gap:
            6px;
    }


    .user-pill-name {

        max-width:
            142px;

        font-size:
            0.68rem;

        line-height:
            1.12;
    }


    #logout-button {

        padding-right:
            10px;

        padding-left:
            10px;
    }
}


/* VECTOR-SIC-WEB7P-R2F-TOPBAR-GLASS */
/* =========================================================================================
   VECTOR-SIC | ENCABEZADO RESPONSIVE

   ESCRITORIO
   - Logo Vector visible en topbar.
   - Titulo de seccion despues del logo.
   - Nombre + rol + cierre de sesion visibles.
   - Encabezado fijo con presencia institucional sutil.

   MOVIL
   - Logo oculto para liberar espacio.
   - Titulo de seccion se desplaza a la izquierda.
   - Rol arriba y nombre del operador debajo.
   ========================================================================================= */


/* -----------------------------------------------------------------------------------------
   IDENTIDAD SECUNDARIA
   ----------------------------------------------------------------------------------------- */

.brand-official-login .brand-product-label,
.brand-official-sidebar .brand-product-label {

    color:
        var(--vs-muted);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.055em;

    line-height:
        1.35;

    text-transform:
        uppercase;
}


.brand-official-sidebar .brand-product-label {

    max-width:
        190px;
}


/* -----------------------------------------------------------------------------------------
   TOPBAR | BASE
   ----------------------------------------------------------------------------------------- */

.topbar {

    position:
        sticky;

    top:
        0;

    z-index:
        60;

    border-bottom:
        1px solid rgba(
            49,
            39,
            131,
            0.14
        );

    background:
        linear-gradient(
            90deg,
            rgba(
                49,
                39,
                131,
                0.055
            )
            0%,
            rgba(
                255,
                255,
                255,
                0.96
            )
            25%,
            rgba(
                255,
                255,
                255,
                0.96
            )
            82%,
            rgba(
                227,
                6,
                19,
                0.025
            )
            100%
        );

    -webkit-backdrop-filter:
        blur(10px)
        saturate(125%);

    backdrop-filter:
        blur(10px)
        saturate(125%);

    box-shadow:
        0
        1px
        0
        rgba(
            49,
            39,
            131,
            0.04
        );

    transition:
        background-color 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        backdrop-filter 180ms ease;
}


.topbar.topbar-scrolled {

    border-bottom-color:
        rgba(
            49,
            39,
            131,
            0.22
        );

    background:
        rgba(
            255,
            255,
            255,
            0.80
        );

    -webkit-backdrop-filter:
        blur(16px)
        saturate(145%);

    backdrop-filter:
        blur(16px)
        saturate(145%);

    box-shadow:
        0
        8px
        26px
        rgba(
            49,
            39,
            131,
            0.10
        );
}


/* -----------------------------------------------------------------------------------------
   ESCRITORIO | LOGO + TITULO
   ----------------------------------------------------------------------------------------- */

.topbar-brand-page {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;
}


.topbar-brand-page .vector-logo-topbar {

    display:
        block;

    width:
        150px;

    max-width:
        18vw;

    height:
        auto;

    flex:
        0 0 auto;
}


.topbar-brand-page #page-title {

    margin:
        0;

    padding-left:
        16px;

    border-left:
        1px solid
        var(--vs-line-strong);

    white-space:
        nowrap;
}


/* -----------------------------------------------------------------------------------------
   USUARIO | ESCRITORIO
   ----------------------------------------------------------------------------------------- */

.topbar .user-pill-name {

    display:
        block;

    max-width:
        310px;

    overflow:
        hidden;

    color:
        var(--vs-text);

    font-size:
        0.82rem;

    font-weight:
        600;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.user-pill {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;
}


/* -----------------------------------------------------------------------------------------
   MOVIL / TABLET
   ----------------------------------------------------------------------------------------- */

@media (max-width: 760px) {

    .topbar {

        min-height:
            68px;

        gap:
            10px;

        background:
            rgba(
                255,
                255,
                255,
                0.92
            );
    }


    .topbar.topbar-scrolled {

        background:
            rgba(
                255,
                255,
                255,
                0.80
            );
    }


    .topbar-brand-page {

        flex:
            1 1 auto;

        min-width:
            70px;

        gap:
            0;
    }


    .topbar-brand-page .vector-logo-topbar {

        display:
            none;
    }


    .topbar-brand-page #page-title {

        margin:
            0;

        padding-left:
            0;

        border-left:
            0;

        text-align:
            left;
    }


    .topbar-actions {

        flex:
            0 1 auto;

        gap:
            8px;
    }


    .user-pill {

        display:
            flex;

        flex-direction:
            column-reverse;

        align-items:
            flex-end;

        justify-content:
            center;

        gap:
            2px;

        min-width:
            0;
    }


    /*
     * Esta regla usa la misma especificidad que la capa R2D
     * que ocultaba el nombre. Al estar despues, la corrige.
     */

    .topbar .user-pill-name {

        display:
            block;

        max-width:
            220px;

        overflow:
            visible;

        font-size:
            0.70rem;

        font-weight:
            600;

        line-height:
            1.15;

        text-align:
            right;

        text-overflow:
            clip;

        white-space:
            normal;
    }


    .user-pill .role-badge {

        align-self:
            flex-end;

        margin:
            0;
    }
}


/* -----------------------------------------------------------------------------------------
   TELEFONO ESTRECHO
   ----------------------------------------------------------------------------------------- */

@media (max-width: 430px) {

    .topbar {

        min-height:
            72px;

        padding-right:
            10px;

        padding-left:
            10px;
    }


    .topbar-brand-page #page-title {

        font-size:
            1rem;
    }


    .topbar-actions {

        gap:
            6px;
    }


    .topbar .user-pill-name {

        max-width:
            145px;

        font-size:
            0.66rem;

        line-height:
            1.12;
    }


    .user-pill .role-badge {

        padding:
            4px
            7px;

        font-size:
            0.68rem;
    }


    #logout-button {

        min-height:
            38px;

        padding-right:
            10px;

        padding-left:
            10px;
    }
}


/* VECTOR-SIC-WEB7P-R2G-CORRECCION-RESPONSIVE */
/* =========================================================================================
   VECTOR-SIC | REGLA RESPONSIVE DEFINITIVA

   ESCRITORIO
   - El logo grande vive en el sidebar.
   - El topbar NO repite el logo.
   - Solo muestra la seccion actual.
   - Usuario: nombre arriba, rol abajo.

   MOVIL
   - No existe sidebar.
   - El topbar SI muestra el logo.
   - Logo + seccion actual.
   - Usuario: nombre arriba, rol abajo.
   ========================================================================================= */


/* -----------------------------------------------------------------------------------------
   IDENTIDAD | LOGIN
   El descriptor debe quedar casi inmediatamente debajo del imagotipo.
   ----------------------------------------------------------------------------------------- */

.brand-official-login {

    gap:
        0;
}


.brand-official-login .brand-product-label {

    display:
        block;

    margin:
        2px
        0
        0;

    padding:
        0;

    color:
        var(--vs-muted);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.045em;

    line-height:
        1.25;

    text-transform:
        uppercase;
}


/* -----------------------------------------------------------------------------------------
   IDENTIDAD | SIDEBAR
   ----------------------------------------------------------------------------------------- */

.brand-official-sidebar .brand-product-label {

    display:
        block;

    margin-top:
        4px;

    max-width:
        190px;

    padding:
        0;

    color:
        var(--vs-muted);

    font-size:
        0.70rem;

    font-weight:
        700;

    letter-spacing:
        0.045em;

    line-height:
        1.28;

    text-transform:
        uppercase;

    white-space:
        normal;
}


/* =========================================================================================
   ESCRITORIO
   ========================================================================================= */


/*
 * En escritorio NO duplicamos el logo.
 * Ya existe el imagotipo grande en el sidebar.
 */

.topbar-brand-page .vector-logo-topbar {

    display:
        none;
}


/*
 * Al desaparecer el logo, Inicio / Catalogo / Rentas...
 * comienza directamente desde el margen del topbar.
 */

.topbar-brand-page {

    gap:
        0;
}


.topbar-brand-page #page-title {

    margin:
        0;

    padding-left:
        0;

    border-left:
        0;
}


/* -----------------------------------------------------------------------------------------
   USUARIO | NOMBRE ARRIBA / ROL ABAJO
   ----------------------------------------------------------------------------------------- */

.user-pill {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    justify-content:
        center;

    gap:
        3px;

    min-width:
        0;
}


.topbar .user-pill-name {

    display:
        block;

    max-width:
        320px;

    overflow:
        hidden;

    color:
        var(--vs-text);

    font-size:
        0.80rem;

    font-weight:
        600;

    line-height:
        1.15;

    text-align:
        right;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.user-pill .role-badge {

    align-self:
        flex-end;

    margin:
        0;
}


/* =========================================================================================
   MOVIL / TABLET
   Aqui se INVIERTE la regla:
   el logo SI aparece porque el sidebar ya no esta visible.
   ========================================================================================= */

@media (max-width: 760px) {

    .topbar {

        min-height:
            72px;

        gap:
            10px;

        padding-left:
            14px;

        padding-right:
            14px;
    }


    .topbar-brand-page {

        display:
            flex;

        flex:
            1 1 auto;

        align-items:
            center;

        gap:
            10px;

        min-width:
            0;
    }


    /*
     * En movil SI mostramos Vector.
     */

    .topbar-brand-page .vector-logo-topbar {

        display:
            block;

        width:
            98px;

        max-width:
            24vw;

        height:
            auto;

        flex:
            0 0 auto;
    }


    /*
     * Logo | divisor | seccion actual
     */

    .topbar-brand-page #page-title {

        min-width:
            0;

        margin:
            0;

        padding-left:
            10px;

        border-left:
            1px solid
            var(--vs-line-strong);

        font-size:
            1rem;

        line-height:
            1.15;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    .topbar-actions {

        flex:
            0 1 auto;

        gap:
            8px;

        min-width:
            0;
    }


    /*
     * Nombre ARRIBA.
     * Rol ABAJO.
     */

    .user-pill {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-end;

        justify-content:
            center;

        gap:
            2px;

        min-width:
            0;
    }


    .topbar .user-pill-name {

        display:
            block;

        max-width:
            185px;

        overflow:
            hidden;

        font-size:
            0.69rem;

        font-weight:
            600;

        line-height:
            1.14;

        text-align:
            right;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    .user-pill .role-badge {

        align-self:
            flex-end;

        margin:
            0;

        padding:
            4px
            8px;

        font-size:
            0.68rem;
    }
}


/* =========================================================================================
   TELEFONO ESTRECHO
   ========================================================================================= */

@media (max-width: 560px) {

    .topbar {

        gap:
            7px;

        padding-left:
            10px;

        padding-right:
            10px;
    }


    .topbar-brand-page {

        gap:
            7px;
    }


    .topbar-brand-page .vector-logo-topbar {

        width:
            84px;

        max-width:
            22vw;
    }


    .topbar-brand-page #page-title {

        padding-left:
            7px;

        font-size:
            0.92rem;
    }


    .topbar-actions {

        gap:
            6px;
    }


    .topbar .user-pill-name {

        max-width:
            135px;

        font-size:
            0.64rem;
    }


    .user-pill .role-badge {

        padding:
            3px
            7px;

        font-size:
            0.64rem;
    }


    #logout-button {

        min-height:
            38px;

        padding-left:
            9px;

        padding-right:
            9px;

        font-size:
            0.76rem;
    }
}


/* =========================================================================================
   TELEFONO MUY ESTRECHO
   Conservamos logo, seccion, usuario y salida sin romper el topbar.
   ========================================================================================= */

@media (max-width: 430px) {

    .topbar {

        min-height:
            76px;

        gap:
            5px;

        padding-left:
            8px;

        padding-right:
            8px;
    }


    .topbar-brand-page {

        gap:
            5px;
    }


    .topbar-brand-page .vector-logo-topbar {

        width:
            72px;

        max-width:
            20vw;
    }


    .topbar-brand-page #page-title {

        padding-left:
            5px;

        font-size:
            0.84rem;
    }


    .topbar-actions {

        gap:
            4px;
    }


    .topbar .user-pill-name {

        max-width:
            105px;

        font-size:
            0.60rem;
    }


    .user-pill .role-badge {

        padding:
            3px
            6px;

        font-size:
            0.60rem;
    }


    #logout-button {

        min-height:
            36px;

        padding-left:
            7px;

        padding-right:
            7px;

        font-size:
            0.70rem;
    }
}



/* Desktop navigation can fold; mobile retains its existing navigation. */
.sidebar-toggle {display:none;}
@media(min-width:761px){
 .sidebar-toggle {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:inherit;cursor:pointer;}
 .sidebar-toggle:focus-visible {outline:3px solid #7754d8;outline-offset:2px;}
 #app-view.sidebar-collapsed {--sidebar:76px;}
 #app-view.sidebar-collapsed .sidebar {width:76px;padding:22px 10px;}
 #app-view.sidebar-collapsed .sidebar .brand {padding:0;min-width:0;}
 #app-view.sidebar-collapsed .vector-logo-sidebar {width:54px;max-width:54px;}
 #app-view.sidebar-collapsed .brand-product-label,#app-view.sidebar-collapsed .sidebar-user-copy {display:none;}
 #app-view.sidebar-collapsed .nav-button {justify-content:center;padding:12px 6px;gap:0;}
 #app-view.sidebar-collapsed .nav-button span:not(.nav-icon) {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
 #app-view.sidebar-collapsed .sidebar-user {justify-content:center;padding-left:0;padding-right:0;}
}

.sidebar-user {background:transparent;color:inherit;text-align:left;cursor:pointer;}
.avatar {overflow:hidden;position:relative;flex-shrink:0;}
.account-photo {width:100%;height:100%;object-fit:cover;display:block;}
.top-avatar {position:absolute;left:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#eeebfa;color:#352780;font-weight:700;}
button.user-pill {position:relative;padding-left:36px;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit;}
.account-menu {position:fixed;z-index:1000;width:240px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px #0002;}
.account-menu button {display:block;width:100%;padding:12px;border:0;border-radius:8px;background:transparent;color:var(--text);text-align:left;font:inherit;cursor:pointer;}
.account-menu button:hover,.account-menu button:focus-visible {background:var(--surface-soft);}
.profile-heading {display:flex;align-items:center;gap:20px;margin-bottom:20px;}
.profile-avatar {width:96px;height:96px;border-radius:50%;overflow:hidden;background:#eeebfa;color:#352780;display:flex;align-items:center;justify-content:center;font-size:36px;flex-shrink:0;}
.profile-avatar img {width:100%;height:100%;object-fit:cover;}
.sidebar-user:focus-visible,button.user-pill:focus-visible {outline:3px solid #7754d8;outline-offset:2px;}

/* Account placement and avatar alignment. */
button.sidebar-user {width:100%;min-width:0;box-sizing:border-box;border:0;border-top:1px solid var(--line);border-radius:0;font:inherit;}
.sidebar-user .avatar {display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;overflow:hidden;}
.sidebar-user .avatar .account-photo {flex:0 0 100%;width:34px;height:34px;border-radius:50%;}
@media(min-width:761px){#top-account-button {display:none;}#app-view.sidebar-collapsed .sidebar-user {gap:0;justify-content:center;padding:13px 0 0;}}

.account-menu-identity {padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.account-menu-identity strong,.account-menu-identity small {display:block;overflow-wrap:anywhere;}
.account-menu-identity small {margin-top:4px;color:var(--muted);}
@media(max-width:760px){
 .topbar {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;min-height:64px;}
 .topbar .topbar-brand-page {display:flex;align-items:center;gap:12px;min-width:0;flex:1;}
 .topbar .topbar-brand-page .vector-logo-topbar {width:80px;max-width:80px;height:auto;flex:0 0 80px;margin:0;padding:0;}
 .topbar .topbar-brand-page #page-title {font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:0;}
 .topbar .topbar-actions {display:flex;flex:0 0 40px;width:40px;min-width:40px;gap:0;}
 .topbar #logout-button,.topbar #top-user-name,.topbar #top-user-role {display:none;}
 .topbar #top-account-button {display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0;margin:0;border-radius:50%;}
 .topbar #top-account-button .top-avatar {position:static;transform:none;width:34px;height:34px;flex:0 0 34px;}
}

.nav-icon {display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;}
.nav-icon svg {display:block;width:26px;height:26px;flex-shrink:0;}
@media(min-width:761px){
 #app-view.sidebar-collapsed {--sidebar:96px;}
 #app-view.sidebar-collapsed .sidebar {width:96px;padding:20px 10px;}
 #app-view.sidebar-collapsed .vector-logo-sidebar {width:76px;max-width:76px;}
 #app-view.sidebar-collapsed .nav-button {flex-direction:column;justify-content:center;align-items:center;min-height:68px;gap:6px;padding:10px 4px;}
 #app-view.sidebar-collapsed .nav-button span:not(.nav-icon) {position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;font-size:10.5px;line-height:1.2;text-align:center;}
}

#sidebar-account-button,#top-account-button {position:relative;}
.notification-avatar-count {position:absolute;z-index:1;right:0;top:0;min-width:20px;height:20px;box-sizing:border-box;padding:2px 5px;border-radius:12px;background:var(--accent);color:var(--surface);font-size:11px;line-height:16px;text-align:center;font-weight:700;}
#sidebar-account-button .notification-avatar-count {right:3px;top:4px;}
#app-view.sidebar-collapsed #sidebar-account-button .notification-avatar-count {right:14px;top:7px;}
.notification-menu-count {float:right;min-width:22px;padding:1px 6px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-size:12px;text-align:center;}

/* Desktop labels remain legible with the navigation collapsed. */
@media(min-width:761px){
 .main-nav .nav-button {font-size:15px;line-height:1.35;}
 #app-view.sidebar-collapsed {--sidebar:116px;}
 #app-view.sidebar-collapsed .sidebar {width:116px;}
 #app-view.sidebar-collapsed .nav-button span:not(.nav-icon) {font-size:12.5px;line-height:1.3;}
}

/* Visibilidad de contraseña: separación respecto al botón Entrar. */
#login-toggle-password { display: block; min-height: 44px; margin: 0 0 14px; }

/* Historial de obra: espacio para leer el material y todos sus saldos. */
#work-history-dialog {
    width: min(1120px, calc(100vw - 32px));
}
@media (min-width: 900px) {
    #work-materials-table table { table-layout: fixed; }
    #work-materials-table th,
    #work-materials-table td {
        padding: 13px 10px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    #work-materials-table th:nth-child(1) { width: 16%; }
    #work-materials-table th:nth-child(2) { width: 32%; }
    #work-materials-table th:nth-child(3),
    #work-materials-table th:nth-child(4) { width: 12%; }
    #work-materials-table th:nth-child(5),
    #work-materials-table th:nth-child(6) { width: 14%; }
}