:root {
    --navy: #0b3558;
    --navy2: #102d46;
    --blue: #176ba0;
    --bg: #f3f6f8;
    --surface: #fff;
    --surface2: #f8fafb;
    --text: #172b3a;
    --muted: #687b89;
    --line: #dce4e9;
    --green: #25835e;
    --green-bg: #e7f4ed;
    --yellow: #9a6a13;
    --yellow-bg: #fbf2dc;
    --red: #b84949;
    --red-bg: #f9e9e8;
    --gray: #66747d;
    --gray-bg: #edf0f2;
    --shadow: 0 4px 18px rgba(23, 48, 66, .07)
}

[data-theme="dark"] {
    --navy: #071c2c;
    --navy2: #0b2235;
    --blue: #58a9d5;
    --bg: #0c1821;
    --surface: #13242f;
    --surface2: #172b37;
    --text: #edf4f7;
    --muted: #9cafba;
    --line: #29404e;
    --green: #65c69a;
    --green-bg: #173d31;
    --yellow: #e8bd65;
    --yellow-bg: #41371e;
    --red: #ed8986;
    --red-bg: #422626;
    --gray: #a9b3ba;
    --gray-bg: #2c3b44;
    --shadow: 0 5px 20px rgba(0, 0, 0, .18)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px
}

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

button {
    cursor: pointer
}

svg {
    flex: none
}

.topbar {
    min-height: 82px;
    background: linear-gradient(110deg, var(--navy), var(--navy2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px max(24px, calc((100vw - 1540px)/2));
    gap: 24px;
    box-shadow: 0 3px 14px #071b2930;
    position: sticky;
    top: 0;
    z-index: 20
}

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

.brand-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    background: #ffffff16;
    border: 1px solid #ffffff22;
    border-radius: 12px
}

.brand h1 {
    font-size: 17px;
    letter-spacing: .06em;
    margin: 0 0 5px;
    font-weight: 800
}

.brand p {
    margin: 0;
    color: #c5d3dd;
    font-size: 12px
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.clock {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #d8e3ea;
    font-size: 12px;
    margin-right: 4px
}

.icon-btn {
    border: 1px solid #ffffff25;
    background: #ffffff0d;
    color: inherit;
    width: 39px;
    height: 39px;
    border-radius: 9px;
    display: grid;
    place-items: center
}

.icon-btn:hover {
    background: #ffffff18
}

.btn {
    border: 1px solid transparent;
    padding: 10px 14px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 600;
    white-space: nowrap
}

.btn.primary {
    background: #fff;
    color: #123c5b
}

.btn.primary:hover {
    background: #eaf2f7
}

.btn.ghost {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text)
}

.topbar .btn.ghost {
    background: #ffffff0d;
    border-color: #ffffff25;
    color: #fff
}

.btn.danger-outline {
    background: transparent;
    border-color: #d98a88;
    color: var(--red)
}

.btn.small {
    padding: 8px 10px;
    font-size: 12px
}

.equipment-card .btn.primary,
.modal .btn.primary {
    background: var(--navy);
    color: #fff
}

.admin-active {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #2a7652;
    border: 1px solid #ffffff20;
    border-radius: 20px;
    padding: 8px 11px;
    font-size: 11px;
    font-weight: 700
}

.admin-active i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ce9c3;
    box-shadow: 0 0 0 4px #9ce9c31c
}

main {
    max-width: 1588px;
    margin: auto;
    padding: 24px
}

.metrics {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px
}

.metrics article {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    border-radius: 12px;
    padding: 15px 17px;
    box-shadow: var(--shadow);
    min-width: 0
}

.metrics article.green {
    border-top-color: var(--green)
}

.metrics article.yellow {
    border-top-color: var(--yellow)
}

.metrics article.red {
    border-top-color: var(--red)
}

.metrics article.gray {
    border-top-color: var(--gray)
}

.metrics span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.metrics strong {
    display: block;
    font-size: 29px;
    line-height: 1.2;
    margin: 7px 0 1px
}

.metrics small {
    color: var(--muted);
    font-size: 11px
}

.metrics .availability {
    background: linear-gradient(135deg, var(--navy), #17618b);
    color: #fff;
    border: 0
}

.metrics .availability span,
.metrics .availability small {
    color: #d8e6ee
}

.progress {
    height: 5px;
    background: #ffffff28;
    border-radius: 4px;
    margin-top: 8px;
    overflow: hidden
}

.progress i {
    height: 100%;
    background: #7ed5a7;
    display: block;
    border-radius: 4px
}

.attention {
    background: var(--surface);
    border: 1px solid #e3d2a7;
    border-left: 4px solid var(--yellow);
    border-radius: 11px;
    margin: 18px 0;
    box-shadow: var(--shadow);
    overflow: hidden
}

.attention-head {
    width: 100%;
    background: var(--yellow-bg);
    border: 0;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px
}

.attention-head>span {
    display: flex;
    align-items: center;
    gap: 9px
}

.attention-head svg {
    color: var(--yellow)
}

.attention-head b {
    font-size: 12px;
    letter-spacing: .08em
}

.attention-head em {
    font-style: normal;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500
}

.attention-head>svg {
    transition: .2s
}

.attention.collapsed .attention-head>svg {
    transform: rotate(-90deg)
}

.attention.collapsed .attention-list {
    display: none
}

.attention-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-top: 1px solid var(--line)
}

.attention-list button {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 5px 7px;
    text-align: left;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line);
    padding: 11px 14px;
    color: var(--text)
}

.attention-list button:hover {
    background: var(--surface2)
}

.attention-list button p {
    grid-column: 2/4;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.attention-list button span {
    font-size: 11px;
    color: var(--muted)
}

.dot,
.status-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: var(--gray)
}

.dot.indisponivel,
.status-badge.indisponivel i {
    background: var(--red)
}

.dot.parcial,
.status-badge.parcial i {
    background: var(--yellow)
}

.dot.disponivel,
.status-badge.disponivel i {
    background: var(--green)
}

.controls {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.category-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    padding: 0 14px
}

.category-tabs button {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 14px 13px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    font-weight: 600
}

.category-tabs button.active {
    border-bottom-color: var(--blue);
    color: var(--blue)
}

.filter-row {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 220px 220px;
    gap: 10px;
    padding: 13px
}

.search {
    position: relative
}

.search svg {
    position: absolute;
    left: 13px;
    top: 11px;
    color: var(--muted)
}

input,
select,
textarea {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    outline: none
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px #1682bd1b
}

.search input {
    padding-left: 40px
}

.content-heading,
.section-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 25px 2px 13px
}

.content-heading span,
.section-title>div>span {
    font-size: 10px;
    color: var(--blue);
    letter-spacing: .1em;
    font-weight: 800
}

.content-heading h2,
.section-title h2 {
    font-size: 21px;
    margin: 3px 0
}

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

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px
}

.equipment-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gray);
    border-radius: 12px;
    padding: 15px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 275px;
    transition: .18s
}

.equipment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(21, 47, 65, .11)
}

.equipment-card.status-disponivel {
    border-top-color: var(--green)
}

.equipment-card.status-parcial {
    border-top-color: var(--yellow)
}

.equipment-card.status-indisponivel {
    border-top-color: var(--red)
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px
}

.code {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .02em
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 16px;
    padding: 5px 8px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    white-space: nowrap;
    background: var(--gray-bg);
    color: var(--gray)
}

.status-badge.disponivel {
    background: var(--green-bg);
    color: var(--green)
}

.status-badge.parcial {
    background: var(--yellow-bg);
    color: var(--yellow)
}

.status-badge.indisponivel {
    background: var(--red-bg);
    color: var(--red)
}

.equipment-card h3 {
    font-size: 15px;
    line-height: 1.35;
    margin: 14px 0 4px
}

.category {
    font-size: 11px;
    color: var(--muted);
    margin: 0 0 10px
}

.equipment-card dl {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0 0 10px
}

.equipment-card dl div {
    display: flex;
    flex-direction: column
}

.equipment-card dt {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 700
}

.equipment-card dd {
    margin: 2px 0;
    font-size: 11px;
    font-weight: 600
}

.pending {
    background: var(--surface2);
    border-left: 3px solid var(--yellow);
    padding: 9px 10px;
    border-radius: 5px;
    margin-bottom: 10px
}

.status-indisponivel .pending {
    border-left-color: var(--red)
}

.pending>span {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 800
}

.pending p {
    font-size: 11px;
    line-height: 1.4;
    margin: 3px 0 7px
}

.pending>div {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    color: var(--muted)
}

.pending .days {
    color: var(--red);
    font-weight: 700
}

.updated {
    display: flex;
    gap: 6px;
    color: var(--muted);
    font-size: 10px;
    align-items: center;
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 10px
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 10px;
    min-width: 0
}

.card-actions .btn {
    flex: 1 1 120px;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
    justify-content: center
}

.card-actions .action-status {
    flex-basis: 100%
}

.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 60px;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 12px
}

.no-results p {
    color: var(--muted)
}

.admin-panel {
    margin-top: 34px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 18px;
    box-shadow: var(--shadow)
}

.section-title {
    margin: 0 0 16px;
    align-items: center
}

.section-title p {
    color: var(--muted);
    margin: 0;
    font-size: 12px
}

.admin-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px
}

.file-btn input {
    display: none
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 9px;
    max-height: 600px
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px
}

th {
    text-align: left;
    background: var(--surface2);
    color: var(--muted);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: .06em;
    padding: 11px 12px;
    position: sticky;
    top: 0
}

td {
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    font-size: 11px
}

td:first-child strong,
td:first-child small {
    display: block
}

td:first-child small {
    color: var(--muted);
    margin-top: 3px
}

.table-edit {
    border: 0;
    background: transparent;
    color: var(--blue);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px
}

.modal-toolbar { display:flex; justify-content:flex-end; padding:14px 20px; border-bottom:1px solid var(--line) }
.row-actions { display:flex; flex-wrap:wrap; gap:5px 10px; min-width:220px }

.page-footer {
    max-width: 1540px;
    margin: 20px auto;
    padding: 18px 24px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 10px
}

.modal-open {
    overflow: hidden
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: #06131dcc;
    backdrop-filter: blur(3px);
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 18px
}

.modal {
    width: min(550px, 100%);
    max-height: 94vh;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: 0 24px 70px #0006
}

.modal.wide {
    width: min(920px, 100%)
}

.modal>header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface2)
}

.modal>header span {
    color: var(--blue);
    font-size: 9px;
    letter-spacing: .1em;
    font-weight: 800
}

.modal>header h2 {
    margin: 3px 0 0;
    font-size: 19px
}

.modal>header .icon-btn {
    color: var(--muted);
    border-color: var(--line);
    background: var(--surface)
}

.modal form {
    padding: 20px
}

.modal-intro {
    color: var(--muted);
    margin: 0 0 18px
}

.modal label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 14px
}

.modal label input,
.modal label textarea {
    margin-top: 6px
}

.modal label>span {
    font-weight: 400;
    color: var(--muted)
}

.modal footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px
}

.form-error {
    color: var(--red);
    min-height: 16px;
    font-size: 11px
}

.equipment-summary {
    display: grid;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 11px 13px;
    margin-bottom: 16px
}

.equipment-summary span {
    color: var(--blue);
    font-weight: 800
}

.equipment-summary strong {
    margin: 3px 0
}

.equipment-summary small {
    color: var(--muted)
}

fieldset {
    border: 0;
    margin: 0 0 15px;
    padding: 0
}

legend {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px
}

.status-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.status-option {
    margin: 0 !important
}

.status-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.status-option span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface2);
    font-weight: 600 !important;
    color: var(--text) !important
}

.status-option input:checked+span {
    border-color: currentColor;
    box-shadow: 0 0 0 2px currentColor
}

.status-option.disponivel {
    color: var(--green)
}

.status-option.parcial {
    color: var(--yellow)
}

.status-option.indisponivel {
    color: var(--red)
}

.status-option.fora {
    color: var(--gray)
}

.status-option i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.history-heading {
    display: flex;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line)
}

.history-heading span {
    font-size: 11px;
    color: var(--muted)
}

.history-list {
    padding: 20px 25px;
    max-height: 65vh;
    overflow: auto
}

.history-item {
    border-left: 2px solid var(--line);
    padding: 0 0 21px 20px;
    position: relative
}

.history-item:last-child {
    padding-bottom: 0
}

.timeline-dot {
    width: 10px;
    height: 10px;
    background: var(--blue);
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--blue);
    border-radius: 50%;
    position: absolute;
    left: -6px;
    top: 3px
}

.history-item time {
    font-size: 10px;
    color: var(--muted)
}

.history-item p {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 7px 0
}

.history-item>small {
    display: block;
    line-height: 1.6;
    color: var(--muted)
}

.history-item h3 {
    font-size: 13px;
    margin: 4px 0
}

.history-item h3 small {
    font-weight: 400;
    color: var(--muted);
    margin-left: 5px
}

.status-text {
    font-size: 11px;
    font-weight: 700
}

.status-text.disponivel {
    color: var(--green)
}

.status-text.parcial {
    color: var(--yellow)
}

.status-text.indisponivel {
    color: var(--red)
}

.status-text.fora {
    color: var(--gray)
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--muted);
    display: grid;
    place-items: center;
    gap: 8px
}

.empty-state strong {
    color: var(--text)
}

.empty-state p {
    margin: 0
}

.toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    background: #205f46;
    color: #fff;
    padding: 12px 17px;
    border-radius: 9px;
    box-shadow: 0 10px 35px #0004;
    z-index: 80;
    font-weight: 600;
    animation: toast .25s
}

.toast.error {
    background: #9a3d3d
}

@keyframes toast {
    from {
        transform: translateY(15px);
        opacity: 0
    }
}

.empty-small {
    padding: 12px;
    margin: 0;
    color: var(--muted)
}

@media(max-width:1250px) {
    .metrics {
        grid-template-columns: repeat(3, 1fr)
    }

    .equipment-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .attention-list {
        grid-template-columns: repeat(3, 1fr)
    }

    .clock {
        display: none
    }

    .topbar {
        padding-inline: 24px
    }
}

@media(max-width:900px) {
    .topbar {
        position: relative;
        align-items: flex-start
    }

    .header-actions {
        flex-wrap: wrap;
        justify-content: flex-end
    }

    .admin-active {
        order: 3
    }

    .equipment-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .filter-row {
        grid-template-columns: 1fr 1fr
    }

    .search {
        grid-column: 1/-1
    }

    .attention-list {
        grid-template-columns: repeat(2, 1fr)
    }

    .section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px
    }

    .admin-tools {
        justify-content: flex-start
    }
}

.metric-button { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px; text-align:left; color:var(--text); box-shadow:var(--shadow) }
.metrics:not(.executive-metrics)>.availability { display:none }
.official-availability { display:grid; grid-template-columns:minmax(200px,1fr) minmax(280px,2fr); gap:12px; margin:14px 0 18px }
.official-availability article,.official-availability button { background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:left; box-shadow:var(--shadow) }
.official-availability button { background:linear-gradient(135deg,var(--navy),#17618b); color:white; cursor:pointer }
.official-availability span,.official-availability small { display:block; font-size:10px; letter-spacing:.04em; opacity:.8 }
.official-availability strong { display:block; font-size:28px; margin:6px 0 }
.metric-button span,.metric-button small { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; font-weight:700 }
.metric-button strong { display:block; font-size:29px; margin:7px 0 1px }
.pending-fault-badge { align-self:flex-start; margin-top:9px; padding:5px 8px; border-radius:12px; background:var(--yellow-bg); color:#745500; font-size:9px; font-weight:800 }
.dashboard-filters { display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)) auto; align-items:end; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:18px }
.dashboard-filters label { font-size:11px; font-weight:700 }
.dashboard-filters input,.dashboard-filters select { margin-top:5px }
.dashboard-actions { display:flex; gap:8px; flex-wrap:wrap }
.dashboard-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.ranking { list-style:none; padding:0; margin:0 }
.ranking li { display:grid; grid-template-columns:1fr auto; gap:3px 12px; padding:10px 0; border-bottom:1px solid var(--line) }
.ranking small { grid-column:1/-1; color:var(--muted) }
.bar-chart .bar-item { height:100%; flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; min-width:32px }
.bar-chart .bar-item i { width:70%; height:calc(var(--value)*1%); min-height:2px; background:linear-gradient(var(--blue),#43a5d8); border-radius:6px 6px 0 0 }
.bar-chart .bar-item strong { font-size:10px }
.modal-padding { padding:15px 20px 0 }
.history-warning { background:var(--yellow-bg); border-left:3px solid var(--yellow); padding:9px; font-size:11px }
.temporary-filter { grid-column:1/-1; border:1px solid var(--line); border-radius:8px; padding:9px; background:var(--surface2) }
.temporary-filter summary { cursor:pointer; font-weight:700 }
.temporary-filter>div { display:flex; flex-wrap:wrap; gap:7px 14px; margin:10px 0 }
.temporary-filter .equipment-check { display:flex; gap:5px; align-items:center; margin:0; font-weight:600 }
.temporary-filter input { width:auto; margin:0 }
.comparison-card { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:10px; padding:14px 18px; margin-top:18px }
.comparison-card span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.06em }
.comparison-card strong { font-size:24px }.comparison-card b { color:var(--blue) }.comparison-card small { color:var(--muted) }
.checkbox-row { display:flex!important; align-items:center; gap:8px }.checkbox-row input { width:auto; margin:0!important }
.analysis-filter-bar { grid-column:1/-1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:9px; padding:10px }
.analysis-filter-bar>div { flex:1; min-width:220px }.analysis-filter-bar strong,.analysis-filter-bar small { display:block }.analysis-filter-bar small { color:var(--muted); margin-top:3px }
.analysis-report-warning,.analysis-notice,.composition-intro { background:var(--yellow-bg); border-left:4px solid var(--yellow); padding:12px 16px; margin:12px 20px; border-radius:8px }
.analysis-report-warning { font-weight:800; text-align:center }
.analysis-notice p,.composition-intro p { margin:4px 0 0;color:var(--muted) }
.composition-filters { display:grid; grid-template-columns:2fr 1fr 1fr; gap:8px; padding:12px 20px }
.composition-counters { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:4px 20px 10px }.composition-counters>div { border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface2) }.composition-counters span,.composition-counters strong { display:block }.composition-counters span { color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:700 }.composition-counters strong { font-size:24px;margin-top:4px }
.composition-list { max-height:62vh; overflow-y:auto; padding:0 20px 18px }
.composition-row { display:grid; grid-template-columns:minmax(170px,1.2fr) minmax(150px,.8fr) minmax(220px,1.5fr) auto; gap:14px; align-items:center; border:1px solid var(--line);border-radius:11px;margin-bottom:10px;padding:14px;background:var(--surface) }
.composition-equipment strong,.composition-equipment small,.composition-equipment span { display:block }.composition-equipment strong{font-size:17px}.composition-equipment small,.composition-equipment span,.composition-row time { color:var(--muted);font-size:10px;margin-top:3px }.composition-row dl{margin:0;display:grid;gap:7px}.composition-row dl div{display:grid;grid-template-columns:75px 1fr;gap:6px}.composition-row dt{font-size:9px;text-transform:uppercase;color:var(--muted);font-weight:800}.composition-row dd{margin:0;font-size:11px}.kpi-toggle{border:1px solid;border-radius:9px;padding:10px 13px;background:transparent;text-align:left;cursor:pointer}.kpi-toggle b,.kpi-toggle small{display:block}.kpi-toggle small{margin-top:3px}.kpi-toggle.enabled{border-color:var(--green);color:var(--green)}.kpi-toggle.disabled{border-color:var(--red);color:var(--red)}.composition-history{white-space:nowrap}
.select-all-row { display:flex!important; gap:8px; align-items:center; padding:0 20px }.select-all-row input { width:auto;margin:0!important }
.analysis-equipment-list { max-height:52vh; overflow:auto; margin:10px 20px; border:1px solid var(--line); border-radius:9px }
.analysis-equipment-list>label { display:flex; gap:10px; align-items:center; padding:9px 12px; margin:0; border-bottom:1px solid var(--line) }.analysis-equipment-list input { width:auto;margin:0!important }.analysis-equipment-list span strong,.analysis-equipment-list span small{display:block}.analysis-equipment-list small{color:var(--muted)}
.login-page { min-height:calc(100vh - 90px); display:grid; place-items:center }
.login-card { width:min(430px,100%); background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:28px; box-shadow:var(--shadow) }
.login-card>span { color:var(--blue) }.login-card h2 { margin:12px 0 5px }.login-card>p { color:var(--muted) }.login-card label { display:block; font-size:11px; font-weight:700; margin:14px 0 }.login-card input { margin-top:6px }.login-card>.btn { width:100%; justify-content:center }
.breakdown-tools { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:8px; align-items:end; margin-bottom:12px }.breakdown-tools label { font-size:10px;font-weight:700 }.breakdown-tools label select{margin-top:5px}
.equipment-detail-link { border:0;background:transparent;color:var(--blue);text-align:left;padding:0 }.equipment-detail-link strong,.equipment-detail-link small { display:block }.equipment-detail-link small{color:var(--muted);margin-top:3px}
.detail-summary { display:grid;gap:6px;padding:18px 20px;background:var(--surface2);border-bottom:1px solid var(--line) }.detail-summary strong{font-size:30px;color:var(--blue)}.detail-summary small{color:var(--muted)}
.executive-mode { max-width:1800px }
@media(max-width:900px){.dashboard-filters{grid-template-columns:1fr 1fr}.dashboard-columns{grid-template-columns:1fr}}
@media(max-width:620px){.dashboard-filters,.official-availability{grid-template-columns:1fr}.dashboard-actions{width:100%}.dashboard-actions .btn{flex:1}.bar-chart{overflow-x:auto}.bar-chart .bar-item{min-width:55px}}
@media(max-width:760px){.composition-counters{grid-template-columns:1fr}.composition-filters{grid-template-columns:1fr}.composition-row{grid-template-columns:1fr;padding:12px}.composition-list{padding-inline:10px}.kpi-toggle,.composition-history{width:100%;text-align:center}.analysis-filter-bar{align-items:stretch}.analysis-filter-bar .btn{width:100%}}
@media(max-width:900px){.breakdown-tools{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.breakdown-tools{grid-template-columns:1fr}}
@media print {.topbar,.app-nav,.dashboard-actions,.dashboard-filters,.page-footer{display:none!important}.availability-dashboard{padding:0!important}.chart-panel,.metrics article,.metric-button{box-shadow:none;break-inside:avoid}.executive-mode{display:block}}
.official-print-report{display:none}
.dashboard-section-error{margin:0 0 12px;padding:10px 12px;border-left:4px solid var(--red);background:var(--red-bg);color:var(--text);border-radius:7px;font-size:11px}
.whatsapp-page{padding:24px}.whatsapp-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.whatsapp-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}.whatsapp-card h3{margin-top:0}.whatsapp-card label{display:block;font-size:11px;font-weight:700;margin:10px 0}.whatsapp-card input,.whatsapp-card select{margin-top:5px}.whatsapp-selection-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.whatsapp-generate{width:100%;justify-content:center;margin-top:12px}.whatsapp-preview{grid-column:1/-1}.whatsapp-preview pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:16px;line-height:1.55;max-height:55vh;overflow:auto}.recipient-list{display:grid;gap:7px;max-height:320px;overflow:auto}.recipient-list article{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:9px}.recipient-list article>div{flex:1}.recipient-list strong,.recipient-list small{display:block}.recipient-list small{color:var(--muted);margin-top:3px}.inline-form{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;margin-bottom:10px}.inline-form input{margin:0}.group-member-options{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}.group-member-options label{display:flex;align-items:center;gap:5px;margin:0}.group-member-options input{width:auto;margin:0}.group-card{flex-wrap:wrap}.whatsapp-reminder{margin:0 24px 14px;padding:13px;border:1px solid var(--yellow);background:var(--yellow-bg);border-radius:10px;display:flex;align-items:center;gap:9px}.whatsapp-reminder strong{flex:1}.modal-toolbar{display:flex;gap:8px;padding:0 20px 8px}
@media(max-width:800px){.whatsapp-layout{grid-template-columns:1fr}.whatsapp-preview{grid-column:auto}.inline-form{grid-template-columns:1fr}.whatsapp-page{padding:14px}.whatsapp-reminder{margin:0 14px 10px;align-items:stretch;flex-direction:column}.whatsapp-selection-summary{align-items:stretch;flex-direction:column}}
.email-page{padding:24px}.email-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.email-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}.email-card h3{margin-top:0}.email-card label{display:block;font-size:11px;font-weight:700;margin:10px 0}.email-card input,.email-card select{margin-top:5px}.email-counts{display:flex;gap:12px;margin:14px 0}.email-counts span{flex:1;background:var(--surface2);border-radius:8px;padding:10px}.email-counts strong{font-size:21px}.email-send{width:100%;justify-content:center;margin-top:10px}.email-recipient-form{display:grid;grid-template-columns:1fr 1.5fr .6fr auto;gap:7px;margin-bottom:10px}.email-recipient-form input,.email-recipient-form select{margin:0}.email-preview,.email-history{grid-column:1/-1}.email-report{max-width:680px;margin:auto;border:1px solid #ccd6df;background:#fff;color:#17324d}.email-report>header{background:#103b60;color:#fff;padding:18px}.email-report>header strong,.email-report>header span{display:block}.email-report>h3,.email-report>time{display:block;margin:16px}.email-status{margin:8px 16px;padding:12px;background:#f2f5f8;border-left:5px solid #777}.email-status.disponivel{border-color:#18794e}.email-status.parcial{border-color:#d4a000}.email-status.indisponivel{border-color:#c73535}.email-status p{margin:6px 0 0}.email-report>footer{padding:16px;color:#617284;font-size:11px}.email-modal-preview{padding:18px;max-height:60vh;overflow:auto}.modal>footer{padding:15px 20px;display:flex;justify-content:flex-end;gap:8px}
@media(max-width:800px){.email-layout{grid-template-columns:1fr}.email-preview,.email-history{grid-column:auto}.email-page{padding:14px}.email-recipient-form{grid-template-columns:1fr}.email-counts{flex-direction:column}}
@media print {
  @page{size:A4 landscape;margin:10mm}
  body>*{display:none!important}
  body>.official-print-report{display:block!important;color:#111;background:#fff;font:9pt Arial,sans-serif}
  .official-print-report header{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #163a63;padding-bottom:8px}.official-print-report h1{font-size:17pt;margin:0}.official-print-report header p{margin:3px 0 0}.official-print-report header>strong{font-size:12pt}
  .print-meta{display:flex;justify-content:space-between;margin:8px 0}.print-meta p{margin:0}.print-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:8px 0 12px}.print-summary article{border:1px solid #bbb;padding:7px;break-inside:avoid}.print-summary span,.print-summary strong{display:block}.print-summary span{font-size:7pt;text-transform:uppercase}.print-summary strong{font-size:14pt;margin-top:3px}
  .official-print-report h2{font-size:11pt;color:#163a63;margin:12px 0 5px}.official-print-report table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:7.5pt}.official-print-report th,.official-print-report td{border:1px solid #bbb;padding:4px;overflow-wrap:anywhere}.official-print-report th{background:#e9eef5;text-align:left}.official-print-report tr{break-inside:avoid}
  .print-months{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}.print-months div{border:1px solid #bbb;text-align:center;padding:5px}.print-months span,.print-months strong{display:block}.official-print-report footer{margin-top:12px;border-top:1px solid #aaa;padding-top:5px;font-size:7pt}
}

@media(max-width:620px) {
    main {
        padding: 14px
    }

    .topbar {
        padding: 13px 14px;
        flex-direction: column
    }

    .brand h1 {
        font-size: 13px
    }

    .brand p {
        font-size: 10px
    }

    .header-actions {
        width: 100%;
        justify-content: flex-start
    }

    .header-actions .btn {
        flex: 1
    }

    .admin-active {
        order: 0
    }

    .metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px
    }

    .metrics article {
        padding: 12px
    }

    .metrics strong {
        font-size: 23px
    }

    .metrics span {
        font-size: 9px
    }

    .attention-list {
        grid-template-columns: 1fr
    }

    .attention-head em {
        display: none
    }

    .filter-row {
        grid-template-columns: 1fr
    }

    .search {
        grid-column: auto
    }

    .equipment-grid {
        grid-template-columns: 1fr
    }

    .content-heading {
        margin-top: 20px
    }

    .content-heading h2 {
        font-size: 19px
    }

    .equipment-card {
        min-height: 250px
    }

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

    .admin-panel {
        padding: 12px
    }

    .admin-tools {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%
    }

    .admin-tools .btn {
        font-size: 10px;
        padding: 9px 5px
    }

    .form-grid,
    .status-options {
        grid-template-columns: 1fr
    }

    .modal-backdrop {
        padding: 8px
    }

    .modal {
        max-height: 98vh
    }

    .modal>header,
    .modal form {
        padding: 15px
    }

    .page-footer {
        margin: 10px 14px;
        padding: 15px 0;
        flex-direction: column;
        gap: 6px
    }

    .toast {
        left: 14px;
        right: 14px;
        bottom: 14px;
        text-align: center
    }
}
.session-warning {
    background: #8a5a13;
    border: 1px solid #ffffff30;
    border-radius: 20px;
    padding: 8px 11px;
    font-size: 11px;
    font-weight: 700
}
.app-nav{max-width:1540px;margin:14px auto 0;padding:0 24px;display:flex;gap:7px;flex-wrap:wrap}.app-nav button{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:9px 13px;border-radius:8px;font-weight:700}.app-nav button.active{background:var(--blue);color:white}.app-nav b{background:var(--red);color:white;border-radius:12px;padding:2px 6px;margin-left:4px}.chart-panel{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:18px;margin-top:20px}.bar-chart{height:300px;display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid var(--line);padding-top:25px}.bar-chart button{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border:0;background:transparent;color:var(--text);gap:5px}.bar-chart button i{width:70%;height:calc(var(--value)*1%);min-height:2px;background:linear-gradient(var(--blue),#43a5d8);border-radius:6px 6px 0 0}.bar-chart strong{font-size:10px}.fault-badge{padding:4px 8px;border-radius:12px;background:var(--surface2);font-weight:700}.fault-badge.pendente{background:#fff1c2;color:#745500}.fault-badge.aprovada{background:#d9f4e5;color:#18603c}.fault-badge.rejeitada{background:#f9dada;color:#7d2525}

.config-warning {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--yellow);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 24px;
    max-width: 860px;
    margin: 40px auto
}

.config-warning code {
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 6px
}

.dot.fora_operacao,
.status-badge.fora_operacao i {
    background: var(--gray)
}

.equipment-card.status-fora_operacao {
    border-top-color: var(--gray)
}

.status-option.fora_operacao {
    color: var(--gray)
}

.status-text.fora_operacao {
    color: var(--gray)
}

.form-help {
    color: var(--muted);
    font-size: 11px;
    margin: 8px 0 0
}

.modal-action-footer {
    padding: 0 20px 20px;
    display: flex;
    justify-content: flex-end
}

.modal-table {
    border: 0;
    border-radius: 0;
    max-height: 70vh
}

.modal-table pre {
    max-width: 420px;
    white-space: pre-wrap;
    font-size: 10px;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px
}

.modal-table details summary {
    color: var(--blue);
    cursor: pointer;
    font-weight: 700
}

@media(max-width:900px) {
    .modal-table table {
        min-width: 760px
    }
}