/* Dominican Mobility Manager - Mantenimiento */
.maintenance-page .simple-maintenance-content,
.maintenance-page .simple-detail-content {
    display: grid;
    gap: 22px;
    max-width: 1320px;
    margin: 0 auto;
}

.maintenance-page .simple-page-heading,
.maintenance-page .simple-detail-heading {
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
    border: 1px solid #e1e9f2;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(25, 54, 89, .06);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px;
}

.maintenance-page .simple-page-heading h1,
.maintenance-page .simple-detail-heading h1 {
    color: #1d2d46;
    font-size: clamp(27px, 3vw, 36px);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 6px 0 8px;
}

.maintenance-page .simple-page-heading p,
.maintenance-page .simple-detail-heading p {
    color: #6c7a8d;
    font-size: 14px;
    margin: 0;
}

.maintenance-page .simple-eyebrow {
    color: #1767aa;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.maintenance-page .simple-stats {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.maintenance-page .simple-stats article {
    background: #fff;
    border: 1px solid #e2e9f1;
    border-radius: 15px;
    box-shadow: 0 7px 20px rgba(26, 50, 82, .055);
    min-height: 105px;
    overflow: hidden;
    padding: 18px 19px 16px;
    position: relative;
}

.maintenance-page .simple-stats article::before {
    background: #7b8a9d;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.maintenance-page .simple-stats article.orange::before { background: #e29a2e; }
.maintenance-page .simple-stats article.blue::before { background: #2d7dbc; }
.maintenance-page .simple-stats article.green::before { background: #2e9d69; }
.maintenance-page .simple-stats article.violet::before { background: #7659bd; }
.maintenance-page .simple-stats article.yellow::before { background: #c99622; }

.maintenance-page .simple-stats span,
.maintenance-page .simple-stats strong,
.maintenance-page .simple-stats small {
    display: block;
}

.maintenance-page .simple-stats span {
    color: #69778b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.maintenance-page .simple-stats strong {
    color: #1e304b;
    font-size: 29px;
    line-height: 1;
    margin-top: 11px;
}

.maintenance-page .simple-stats small {
    color: #8a96a7;
    font-size: 11px;
    margin-top: 7px;
}

.maintenance-page .simple-panel {
    background: #fff;
    border: 1px solid #e0e7ef;
    border-radius: 17px;
    box-shadow: 0 9px 26px rgba(25, 52, 86, .055);
    overflow: hidden;
}

.maintenance-page .simple-panel-heading {
    align-items: center;
    border-bottom: 1px solid #edf1f5;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 23px;
}

.maintenance-page .simple-panel-heading h2 {
    color: #21324d;
    font-size: 20px;
    margin: 5px 0 0;
}

.maintenance-page .simple-panel-heading p {
    color: #7b8798;
    font-size: 13px;
    margin: 6px 0 0;
}

.maintenance-page .simple-filters {
    align-items: center;
    background: #f9fbfd;
    border-bottom: 1px solid #edf1f5;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) auto auto;
    padding: 16px 22px;
}

.maintenance-page .simple-filters input,
.maintenance-page .simple-filters select {
    background: #fff;
    border: 1px solid #d4dde8;
    border-radius: 10px;
    box-sizing: border-box;
    color: #263650;
    font: inherit;
    min-height: 42px;
    outline: none;
    padding: 10px 12px;
    width: 100%;
}

.maintenance-page .simple-filters input:focus,
.maintenance-page .simple-filters select:focus {
    border-color: #5d9bc5;
    box-shadow: 0 0 0 3px rgba(45, 125, 188, .12);
}

.maintenance-page .simple-filters button,
.maintenance-page .simple-primary-button,
.maintenance-page .button.primary {
    align-items: center;
    background: #1767aa;
    border: 0;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    text-decoration: none;
    white-space: nowrap;
}

.maintenance-page .simple-filters button:hover,
.maintenance-page .simple-primary-button:hover,
.maintenance-page .button.primary:hover {
    background: #0f568f;
}

.maintenance-page .simple-filters a,
.maintenance-page .detail-back a {
    color: #65748a;
    font-size: 12px;
    font-weight: 800;
    padding: 10px 4px;
    text-decoration: none;
    white-space: nowrap;
}

.maintenance-page .simple-filters a:hover,
.maintenance-page .detail-back a:hover {
    color: #1767aa;
}

.maintenance-page .maintenance-list {
    background: #f8fafc;
    display: grid;
    gap: 15px;
    padding: 20px 22px 22px;
}

.maintenance-page .maintenance-card {
    background: #fff;
    border: 1px solid #dfe7ef;
    border-left: 5px solid #e29a2e;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(26, 50, 82, .045);
    padding: 19px 20px;
}

.maintenance-page .maintenance-card:has(.simple-in_progress) { border-left-color: #2d7dbc; }
.maintenance-page .maintenance-card:has(.simple-completed) { border-left-color: #2e9d69; }

.maintenance-page .maintenance-card-head {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.maintenance-page .reference-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.maintenance-page .reference-line > strong {
    color: #1767aa;
    font-size: 12px;
    letter-spacing: .03em;
}

.maintenance-page .maintenance-card h3 {
    color: #21324d;
    font-size: 18px;
    line-height: 1.35;
    margin: 8px 0 0;
}

.maintenance-page .maintenance-card-head time {
    color: #8793a3;
    font-size: 11px;
    white-space: nowrap;
}

.maintenance-page .badge {
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    padding: 7px 9px;
    white-space: nowrap;
}

.maintenance-page .badge.simple-pending {
    background: #fff1e3;
    color: #a85c11;
}

.maintenance-page .badge.simple-in_progress {
    background: #eaf3ff;
    color: #2c68a7;
}

.maintenance-page .badge.simple-completed {
    background: #eaf8f0;
    color: #187044;
}

.maintenance-page .maintenance-card-info {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.35fr) minmax(110px, .65fr);
    margin-top: 18px;
}

.maintenance-page .maintenance-card-info > div {
    border-top: 1px solid #edf1f5;
    min-width: 0;
    padding-top: 11px;
}

.maintenance-page .maintenance-card-info small,
.maintenance-page .detail-copy small {
    color: #7d899a;
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.maintenance-page .maintenance-card-info p {
    color: #536177;
    font-size: 13px;
    line-height: 1.55;
    margin: 6px 0 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.maintenance-page .maintenance-card-info strong {
    color: #1767aa;
    display: block;
    font-size: 15px;
    margin-top: 7px;
}

.maintenance-page .card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 17px;
}

.maintenance-page .simple-empty {
    align-items: center;
    color: #7b8798;
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 42px 20px;
    text-align: center;
}

.maintenance-page .simple-empty strong { color: #35445d; }

.maintenance-page .simple-alert {
    align-items: flex-start;
    border: 1px solid;
    border-radius: 11px;
    display: flex;
    gap: 10px;
    padding: 13px 16px;
}

.maintenance-page .simple-alert.success {
    background: #eefaf3;
    border-color: #bce5ca;
    color: #187044;
}

.maintenance-page .simple-alert.error {
    background: #fff1f1;
    border-color: #efc0c0;
    color: #a42828;
}

.maintenance-page .simple-alert ul { margin: 6px 0 0; padding-left: 18px; }

.maintenance-page .simple-pagination { padding: 0 22px 20px; }
.maintenance-page .simple-pagination nav { align-items: center; display: flex; justify-content: center; }
.maintenance-page .simple-pagination svg { height: 16px; width: 16px; }

.maintenance-page .detail-back { display: flex; flex-wrap: wrap; gap: 16px; }

.maintenance-page .detail-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, .8fr);
}

.maintenance-page .detail-copy { padding: 21px 23px; }
.maintenance-page .detail-copy p { color: #536177; line-height: 1.65; margin: 7px 0 0; white-space: pre-line; }
.maintenance-page .detail-copy.highlighted { background: #fff9eb; border-top: 1px solid #f5e0ae; }
.maintenance-page .detail-copy.completed-copy { background: #effaf3; border-top: 1px solid #c5e8d2; }

.maintenance-page .simple-form.compact { display: grid; gap: 16px; padding: 20px 22px; }
.maintenance-page .field { display: grid; gap: 7px; }
.maintenance-page .field > span { color: #526078; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.maintenance-page .field input,
.maintenance-page .field select,
.maintenance-page .field textarea {
    background: #fff;
    border: 1px solid #d4dde8;
    border-radius: 10px;
    box-sizing: border-box;
    color: #263650;
    font: inherit;
    min-height: 42px;
    padding: 10px 11px;
    width: 100%;
}
.maintenance-page .field textarea { line-height: 1.5; resize: vertical; }
.maintenance-page .simple-primary-button.full { width: 100%; }
.maintenance-page .closed-message { color: #748196; display: grid; gap: 5px; padding: 22px; }
.maintenance-page .closed-message strong { color: #2e3d56; }
.maintenance-page .cost-total { align-items: center; border-top: 1px solid #edf1f5; display: flex; justify-content: space-between; padding: 16px 23px; }
.maintenance-page .cost-total span { color: #6c7a8d; font-size: 12px; font-weight: 800; }
.maintenance-page .cost-total strong { color: #1767aa; font-size: 18px; }
.maintenance-page .history-panel { margin-top: 0; }
.maintenance-page .history-list { display: grid; padding: 20px 23px; }
.maintenance-page .history-list > div { display: grid; gap: 12px; grid-template-columns: 16px 1fr; position: relative; }
.maintenance-page .history-list > div:not(:last-child)::before { background: #dce4ec; bottom: -4px; content: ''; left: 7px; position: absolute; top: 15px; width: 2px; }
.maintenance-page .history-list i { background: #1767aa; border: 3px solid #e6f1f9; border-radius: 50%; height: 10px; position: relative; width: 10px; z-index: 1; }
.maintenance-page .history-list section { padding-bottom: 16px; }
.maintenance-page .history-list strong,
.maintenance-page .history-list span { display: block; }
.maintenance-page .history-list strong { color: #2e3d56; font-size: 13px; }
.maintenance-page .history-list span { color: #8692a2; font-size: 11px; margin-top: 3px; }
.maintenance-page .history-list p { background: #f7f9fb; border-radius: 8px; color: #536177; font-size: 12px; line-height: 1.5; margin: 7px 0 0; padding: 9px; white-space: pre-line; }

@media (max-width: 1000px) {
    .maintenance-page .simple-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .maintenance-page .simple-filters { grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr) auto auto; }
    .maintenance-page .maintenance-card-info { grid-template-columns: 1fr 1fr; }
    .maintenance-page .detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .maintenance-page .simple-page-heading,
    .maintenance-page .simple-detail-heading { align-items: stretch; flex-direction: column; padding: 20px; }
    .maintenance-page .simple-primary-button { width: 100%; }
    .maintenance-page .simple-filters { grid-template-columns: 1fr; padding: 13px 15px; }
    .maintenance-page .maintenance-list { padding: 14px 12px 18px; }
    .maintenance-page .maintenance-card { padding: 16px; }
    .maintenance-page .maintenance-card-head { flex-direction: column; }
    .maintenance-page .maintenance-card-head time { white-space: normal; }
    .maintenance-page .maintenance-card-info { grid-template-columns: 1fr; }
    .maintenance-page .card-actions { justify-content: stretch; }
    .maintenance-page .card-actions .button { width: 100%; }
}

@media (max-width: 430px) {
    .maintenance-page .simple-stats { grid-template-columns: 1fr; }
    .maintenance-page .simple-page-heading h1,
    .maintenance-page .simple-detail-heading h1 { font-size: 27px; }
}