:root {
    --bg: #05080d;
    --panel: #ffffff;
    --panel-soft: #f8fafc;

    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;

    --cyan: #00d2ff;
    --cyan-dark: #0891b2;

    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    --road: #1e293b;
    --road-line: #475569;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    overflow: hidden;
    background: var(--bg);
}

.hidden {
    display: none !important;
}


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

.login-overlay {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 35%,
            #10202d,
            #030507 60%
        );

    z-index: 10000;
}

.login-card {
    width: min(390px, calc(100vw - 32px));

    padding: 34px;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.98);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55);
}

.brand-mark {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #001018;
    background: var(--cyan);

    font-weight: 900;
    font-size: 25px;

    margin-bottom: 18px;
}

.login-card h1 {
    margin: 0;
    color: var(--text);
}

.login-subtitle {
    margin: 6px 0 26px;
    color: var(--muted);
}

.login-card label {
    display: block;

    margin-bottom: 16px;

    color: var(--text);
    font-size: 13px;
    font-weight: 650;
}

.login-card input {
    display: block;

    width: 100%;

    margin-top: 7px;
    padding: 12px 13px;

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

    font: inherit;
}

.login-card input:focus {
    outline: 2px solid rgba(0, 210, 255, 0.25);
    border-color: var(--cyan-dark);
}

.login-card button {
    width: 100%;

    border: 0;
    border-radius: 9px;

    padding: 13px;

    cursor: pointer;

    color: #001018;
    background: var(--cyan);

    font-weight: 800;
    font-size: 14px;
}

.login-card button:disabled {
    opacity: 0.5;
    cursor: wait;
}

.login-error {
    min-height: 20px;
    margin-top: 14px;

    color: var(--danger);
    font-size: 13px;
}


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

.app {
    width: 100vw;
    height: 100vh;

    display: flex;
}

.sidebar {
    width: 330px;
    min-width: 330px;

    display: flex;
    flex-direction: column;

    padding: 22px;

    background: var(--panel);

    border-right: 1px solid var(--border);

    box-shadow:
        5px 0 24px rgba(0, 0, 0, 0.34);

    z-index: 20;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;

    padding-bottom: 17px;

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

.sidebar-header h2 {
    margin: 0;
    color: var(--text);
}

.sidebar-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.logout-button {
    height: 34px;

    padding: 0 12px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: white;
    color: var(--muted);

    cursor: pointer;
}

.status-panel {
    margin: 16px 0;

    padding: 11px 13px;

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

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

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 4px 0;

    color: var(--muted);
    font-size: 12px;
}

.pill {
    padding: 3px 7px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
}

.pill.ok {
    color: #047857;
    background: #d1fae5;
}

.pill.bad {
    color: #b91c1c;
    background: #fee2e2;
}

.pill.neutral {
    color: #475569;
    background: #e2e8f0;
}

.fleet-title h3 {
    margin: 0;
    color: var(--text);
}

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

.vehicle-list {
    flex: 1;
    overflow-y: auto;
}

.vehicle-card {
    width: 100%;

    margin-bottom: 10px;
    padding: 13px;

    text-align: left;

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

    background: white;

    cursor: pointer;
}

.vehicle-card:hover {
    border-color: #94a3b8;
}

.vehicle-card.active {
    border-color: var(--cyan);
    box-shadow:
        0 0 0 2px rgba(0, 210, 255, 0.12);
}

.vehicle-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    color: var(--text);
    font-weight: 750;
    font-size: 13px;
}

.vehicle-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: var(--success);

    box-shadow:
        0 0 8px rgba(16, 185, 129, 0.8);
}

.vehicle-info {
    margin-top: 6px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.5;
}


/* ==========================================================
   CANVAS
========================================================== */

.map-area {
    position: relative;

    flex: 1;

    min-width: 0;
    height: 100vh;

    overflow: hidden;

    background: var(--bg);
}

#position-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.topbar {
    position: absolute;

    top: 20px;
    left: 20px;
    right: 20px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    pointer-events: none;
}

.selected-name {
    color: white;

    font-size: 20px;
    font-weight: 800;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.8);
}

.selected-meta {
    margin-top: 4px;

    color: #94a3b8;

    font-size: 12px;
}

.source-badge {
    padding: 7px 10px;

    border: 1px solid #334155;
    border-radius: 8px;

    background: rgba(3, 7, 18, 0.88);

    color: #94a3b8;

    font-size: 10px;
    font-weight: 800;
}

.telemetry-card {
    position: absolute;

    right: 22px;
    bottom: 22px;

    width: 310px;

    padding: 16px;

    border: 1px solid #1e293b;
    border-radius: 12px;

    background: rgba(2, 6, 12, 0.94);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.45);

    color: var(--cyan);
}

.telemetry-title {
    margin-bottom: 10px;

    color: white;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
}

.telemetry-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    padding: 4px 0;

    font-family: ui-monospace, monospace;
    font-size: 12px;
}

.telemetry-row span:first-child {
    color: #94a3b8;
}

.map-message {
    position: absolute;

    left: 50%;
    bottom: 28px;

    transform: translateX(-50%);

    padding: 8px 12px;

    border: 1px solid #334155;
    border-radius: 8px;

    background: rgba(2, 6, 12, 0.8);
    color: #94a3b8;

    font-size: 11px;

    pointer-events: none;
}


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

@media (max-width: 760px) {

    .sidebar {
        width: 260px;
        min-width: 260px;

        padding: 14px;
    }

    .telemetry-card {
        width: 260px;
    }
}


/* ==========================================================
   MAPA LEAFLET REAL
========================================================== */

#position-map {
    width: 100%;
    height: 100%;
    background: #0b1118;
}

.leaflet-container {
    width: 100%;
    height: 100%;

    background: #0b1118;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.leaflet-control-attribution {
    font-size: 10px;
}

.leaflet-control-attribution a {
    color: #0369a1;
}

.vehicle-map-marker {
    position: relative;

    width: 22px;
    height: 22px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #00d2ff;

    box-shadow:
        0 0 0 3px rgba(0, 210, 255, 0.20),
        0 4px 15px rgba(0, 0, 0, 0.55);
}

.vehicle-map-marker::after {

    content: "";

    position: absolute;
    inset: -11px;

    border:
        2px solid rgba(0, 210, 255, 0.5);

    border-radius: 50%;

    animation:
        lokalizate-map-pulse
        1.7s
        infinite;
}

@keyframes lokalizate-map-pulse {

    0% {
        transform: scale(0.45);
        opacity: 1;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

.map-area .leaflet-top {
    top: 76px;
}


/* ==========================================================
   ADMINISTRACIÓN P1
========================================================== */

.admin-panel {
    position: fixed;
    inset: 0;
    z-index: 5000;

    overflow: auto;

    background: rgba(7, 12, 20, 0.98);
    color: #eef5fb;
}

.admin-shell {
    width: min(1500px, 96vw);
    margin: 0 auto;
    padding: 28px 0 48px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    margin-bottom: 22px;
}

.admin-header h2 {
    margin: 3px 0 6px;
}

.admin-eyebrow {
    margin: 0 0 5px;

    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;

    opacity: 0.65;
}

.admin-muted {
    margin: 0;
    opacity: 0.68;
    font-size: 13px;
}

.admin-close-button {
    padding: 10px 14px;

    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 9px;

    background: rgba(255,255,255,0.05);
    color: inherit;

    cursor: pointer;
}

.admin-layout {
    display: grid;

    grid-template-columns:
        minmax(220px, 270px)
        minmax(0, 1fr);

    gap: 20px;
}

.admin-sidebar,
.admin-card {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;

    background: rgba(18, 28, 41, 0.95);
}

.admin-sidebar {
    align-self: start;
    position: sticky;
    top: 20px;

    padding: 16px;
}

.admin-section-title {
    margin-bottom: 12px;
    font-weight: 600;
}

.admin-org-list {
    display: grid;
    gap: 8px;
}

.admin-org-button {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9px;

    background: rgba(255,255,255,0.035);
    color: inherit;

    text-align: left;
    cursor: pointer;
}

.admin-org-button:hover,
.admin-org-button.active {
    background: rgba(70, 180, 230, 0.12);
    border-color: rgba(70, 180, 230, 0.45);
}

.admin-org-button strong,
.admin-org-button span {
    display: block;
}

.admin-org-button span {
    margin-top: 3px;

    font-size: 11px;
    opacity: 0.65;
}

.admin-content {
    display: grid;
    gap: 20px;
}

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

    gap: 20px;
}

.admin-card {
    padding: 18px;
}

.admin-card h3 {
    margin: 0 0 12px;
}

.admin-card-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;
}

.admin-summary {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.admin-summary-item {
    padding: 6px 9px;

    border-radius: 999px;

    background: rgba(255,255,255,0.055);

    font-size: 12px;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 13px;
}

.admin-table th,
.admin-table td {
    padding: 9px 8px;

    border-bottom: 1px solid rgba(255,255,255,0.07);

    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    font-size: 11px;

    text-transform: uppercase;
    letter-spacing: 0.04em;

    opacity: 0.58;
}

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

.admin-table tr[data-admin-fleet-id] {
    cursor: pointer;
}

.admin-table tr[data-admin-fleet-id]:hover {
    background: rgba(70, 180, 230, 0.08);
}

.admin-role {
    display: inline-block;

    padding: 4px 7px;

    border-radius: 999px;

    background: rgba(70, 180, 230, 0.12);

    font-size: 11px;
}

.admin-empty {
    padding: 18px 2px;

    opacity: 0.58;
}

.admin-error {
    padding: 11px;

    border-radius: 9px;

    background: rgba(190, 65, 65, 0.13);

    font-size: 13px;
}

body.admin-open {
    overflow: hidden;
}

@media (max-width: 980px) {

    .admin-layout,
    .admin-columns {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
    }
}


/* ==========================================================
   P1-A5B - ADMIN WRITE
========================================================== */

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 14px;
}

.admin-action-button {
    padding: 8px 11px;

    border:
        1px solid
        rgba(70, 180, 230, 0.35);

    border-radius: 8px;

    background:
        rgba(70, 180, 230, 0.10);

    color: #dff4ff;

    font-size: 12px;

    cursor: pointer;
}

.admin-action-button:hover {
    background:
        rgba(70, 180, 230, 0.18);
}

.admin-action-button:disabled {
    opacity: 0.45;
    cursor: default;
}


.admin-modal[hidden] {
    display: none !important;
}

.admin-modal {
    position: fixed;
    inset: 0;

    z-index: 6000;

    display: grid;
    place-items: center;

    padding: 20px;
}

.admin-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(0, 0, 0, 0.72);

    backdrop-filter:
        blur(3px);
}

.admin-modal-dialog {
    position: relative;
    z-index: 1;

    width:
        min(
            560px,
            calc(100vw - 32px)
        );

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;

    border:
        1px solid
        rgba(255,255,255,0.11);

    border-radius: 16px;

    background:
        #111c29;

    box-shadow:
        0 24px 80px
        rgba(0,0,0,0.50);

    color: #edf5fb;
}

.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding:
        20px
        20px
        14px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);
}

.admin-modal-header h3 {
    margin: 0;
}

.admin-modal-x {
    width: 34px;
    height: 34px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius: 8px;

    background:
        rgba(255,255,255,0.04);

    color: inherit;

    font-size: 21px;
    line-height: 1;

    cursor: pointer;
}

.admin-write-form {
    padding: 18px 20px 20px;
}

.admin-form-fields {
    display: grid;
    gap: 15px;
}

.admin-field {
    display: grid;
    gap: 6px;
}

.admin-field label {
    font-size: 12px;
    font-weight: 600;

    color: #bac9d7;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 10px 11px;

    border:
        1px solid
        rgba(255,255,255,0.11);

    border-radius: 8px;

    outline: none;

    background:
        rgba(255,255,255,0.045);

    color: #edf5fb;

    font: inherit;
}

.admin-field textarea {
    min-height: 88px;
    resize: vertical;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
    border-color:
        rgba(70,180,230,0.62);
}

.admin-field small {
    color: #8498aa;
    font-size: 11px;
}

.admin-form-message {
    min-height: 20px;

    margin-top: 14px;

    font-size: 12px;
}

.admin-form-message.error {
    color: #ffaaaa;
}

.admin-form-message.success {
    color: #8ee8ae;
}

.admin-modal-footer {
    display: flex;
    justify-content: flex-end;

    gap: 9px;

    margin-top: 18px;
}

.admin-cancel-button,
.admin-submit-button {
    padding: 9px 14px;

    border-radius: 8px;

    cursor: pointer;
}

.admin-cancel-button {
    border:
        1px solid
        rgba(255,255,255,0.10);

    background:
        rgba(255,255,255,0.04);

    color: inherit;
}

.admin-submit-button {
    border:
        1px solid
        rgba(70,180,230,0.45);

    background:
        rgba(70,180,230,0.18);

    color: #e4f7ff;
}

.admin-submit-button:disabled {
    opacity: 0.5;
    cursor: wait;
}

.admin-selected-context {
    padding: 9px 10px;

    border-radius: 8px;

    background:
        rgba(70,180,230,0.07);

    font-size: 12px;

    color: #a9c9d9;
}

@media (max-width: 700px) {

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

    .admin-action-button {
        width: 100%;
    }
}


/* ==========================================================
   P1-A6D1 LIFECYCLE
========================================================== */

.admin-row-action {
    padding: 5px 8px;

    border:
        1px solid
        rgba(70,180,230,0.28);

    border-radius: 7px;

    background:
        rgba(70,180,230,0.08);

    color: inherit;

    font-size: 11px;

    cursor: pointer;
}

.admin-row-action:hover {
    background:
        rgba(70,180,230,0.16);
}

.admin-row-action.danger {
    border-color:
        rgba(235,110,110,0.28);

    background:
        rgba(235,110,110,0.08);
}

.admin-status-active {
    color: #87e8a7;
}

.admin-status-inactive {
    color: #ffb1b1;
}

.admin-status-archived {
    color: #c5a9ff;
}

.admin-lifecycle-note {
    padding: 9px 10px;

    border-radius: 8px;

    background:
        rgba(255,255,255,0.04);

    color: #9fb1c1;

    font-size: 11px;
}


/* ==========================================================
   P1-A6D2 MEMBERSHIPS
========================================================== */

.admin-membership-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.admin-row-action.remove {
    border-color:
        rgba(230,100,100,0.32);

    background:
        rgba(230,100,100,0.08);

    color:
        #ffc0c0;
}

.admin-row-action.remove:hover {
    background:
        rgba(230,100,100,0.16);
}

.admin-membership-org-role {
    font-size: 11px;

    opacity: 0.68;
}


/* ==========================================================
   P1-A7C2 PANEL PROVISIONING GPS
========================================================== */

.admin-row-action.mqtt {
    margin-left: 6px;
}

.admin-provision-dialog {
    max-width: 760px;
}

.admin-provision-body {
    padding: 22px;
}

.admin-provision-loading {
    padding: 26px 8px;
    text-align: center;
    opacity: .75;
}

.admin-provision-summary {
    display: grid;
    gap: 14px;
}

.admin-provision-context {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 12px;
}

.admin-provision-context strong {
    font-size: 1rem;
}

.admin-provision-context span {
    opacity: .72;
    font-size: .88rem;
}

.admin-provision-status-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-provision-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: .78rem;
    font-weight: 700;
}

.admin-provision-badge.not-provisioned {
    background: rgba(148, 163, 184, .18);
}

.admin-provision-badge.provisioned {
    background: rgba(34, 197, 94, .16);
}

.admin-provision-badge.revoked {
    background: rgba(239, 68, 68, .16);
}

.admin-provision-details {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 12px;
}

.admin-provision-detail {
    display: grid;
    grid-template-columns: minmax(120px, .45fr) 1fr;
    gap: 14px;
    align-items: start;
}

.admin-provision-detail span:first-child {
    opacity: .68;
}

.admin-provision-detail code {
    overflow-wrap: anywhere;
}

.admin-provision-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.admin-provision-action {
    border: 0;
    border-radius: 9px;
    padding: 10px 14px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.admin-provision-action:disabled {
    opacity: .55;
    cursor: wait;
}

.admin-provision-action.danger {
    background: rgba(239, 68, 68, .14);
}

.admin-provision-credential {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid rgba(245, 158, 11, .45);
    border-radius: 14px;
}

.admin-provision-credential-warning {
    margin: 0 0 16px;
    font-weight: 700;
}

.admin-provision-credential-note {
    margin: -8px 0 16px;
    opacity: .75;
    font-size: .88rem;
}

.admin-provision-credential-grid {
    display: grid;
    gap: 10px;
}

.admin-provision-credential-row {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.admin-provision-credential-row span {
    opacity: .72;
}

.admin-provision-credential-row code {
    padding: 8px 10px;
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.admin-provision-copy {
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    background: transparent;
}

@media (max-width: 700px) {

    .admin-provision-detail {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .admin-provision-credential-row {
        grid-template-columns: 1fr;
    }

    .admin-provision-copy {
        justify-self: start;
    }
}



/* ==========================================================
   LOKALIZATE DASHBOARD KPI V1
========================================================== */


.dashboard-kpis {

    position:absolute;

    top:20px;

    left:20px;

    right:20px;


    display:grid;

    grid-template-columns:
        repeat(4, minmax(120px, 1fr));


    gap:12px;


    z-index:1000;

}


.kpi-card {


    padding:14px 16px;


    border:

        1px solid rgba(226,232,240,.95);


    border-radius:14px;


    background:

        rgba(255,255,255,.96);


    box-shadow:

        0 12px 30px rgba(15,23,42,.12);


    backdrop-filter:blur(8px);


}


.kpi-card span {


    display:block;


    color:#64748b;


    font-size:11px;


    font-weight:700;


    text-transform:uppercase;


    letter-spacing:.05em;

}



.kpi-card strong {


    display:block;


    margin-top:5px;


    color:#0b74d1;


    font-size:28px;


    line-height:1;


    font-weight:900;

}



@media(max-width:900px){


    .dashboard-kpis {


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

    }

}


@media(max-width:600px){


    .dashboard-kpis {


        grid-template-columns:
            1fr;

    }


}



/* ==========================================================
   LOKALIZATE DASHBOARD KPI V1
========================================================== */


.dashboard-kpis {

    position:absolute;

    top:20px;

    left:20px;

    right:20px;


    display:grid;

    grid-template-columns:
        repeat(4, minmax(120px, 1fr));


    gap:12px;


    z-index:1000;

}


.kpi-card {


    padding:14px 16px;


    border:

        1px solid rgba(226,232,240,.95);


    border-radius:14px;


    background:

        rgba(255,255,255,.96);


    box-shadow:

        0 12px 30px rgba(15,23,42,.12);


    backdrop-filter:blur(8px);


}


.kpi-card span {


    display:block;


    color:#64748b;


    font-size:11px;


    font-weight:700;


    text-transform:uppercase;


    letter-spacing:.05em;

}



.kpi-card strong {


    display:block;


    margin-top:5px;


    color:#0b74d1;


    font-size:28px;


    line-height:1;


    font-weight:900;

}



@media(max-width:900px){


    .dashboard-kpis {


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

    }

}


@media(max-width:600px){


    .dashboard-kpis {


        grid-template-columns:
            1fr;

    }


}



/* ==========================================================
   ÚLTIMAS ALERTAS DASHBOARD V1
========================================================== */

.alerts-dashboard-card {

    position:absolute;

    left:22px;
    bottom:22px;

    width:360px;

    padding:16px;

    border-radius:14px;

    background:white;

    border:1px solid #e2e8f0;

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);

    z-index:30;

}


.alerts-dashboard-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}


.alerts-dashboard-header h3 {

    margin:0;

    font-size:14px;

    color:#0f172a;

}


.alerts-dashboard-header span {

    font-size:11px;

    color:#64748b;

}


.alerts-list {

    display:grid;

    gap:8px;

    max-height:260px;

    overflow:auto;

}


.alert-item {

    padding:10px;

    border-radius:10px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

}


.alert-item-title {

    font-size:13px;

    font-weight:800;

    color:#0f172a;

}


.alert-item-text {

    margin-top:4px;

    font-size:12px;

    color:#475569;

}


.alert-item-time {

    margin-top:5px;

    font-size:11px;

    color:#64748b;

}




/* ==========================================================
   AJUSTE CAPA ALERTAS DASHBOARD
========================================================== */


.map-area {
    position: relative;
}


#position-map {
    position:absolute;
    inset:0;
    z-index:1;
}


.topbar {
    z-index:20;
}


.telemetry-card {
    z-index:20;
}


.alerts-dashboard-card {

    z-index:40;

    pointer-events:auto;

}




/* ==========================================================
   LOKALIZATE DASHBOARD V2
   TEMA CORPORATIVO
========================================================== */


/* ----------------------------------------------------------
   VARIABLES V2
---------------------------------------------------------- */

:root {

    --lok-blue:
        #0b74d1;

    --lok-blue-dark:
        #06284d;

    --lok-blue-soft:
        #eaf4ff;

    --lok-bg:
        #f8fafc;

    --lok-card:
        rgba(255,255,255,.96);

}



/* ----------------------------------------------------------
   FONDO GENERAL
---------------------------------------------------------- */

body {

    background:
        var(--lok-bg);

}



/* ----------------------------------------------------------
   SIDEBAR V2
---------------------------------------------------------- */

.sidebar {

    width:
        310px;

    min-width:
        310px;

    padding:
        18px;

    background:
        linear-gradient(
            180deg,
            #06284d,
            #041b35
        );

    border-right:
        0;

    box-shadow:
        8px 0 35px rgba(0,0,0,.22);

}



/* cabecera */

.sidebar-header h2 {

    color:
        white;

    font-size:
        24px;

    letter-spacing:
        .04em;

}


.sidebar-header p {

    color:
        rgba(255,255,255,.65);

}



.logout-button {

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.18);

    color:
        white;

}



/* panel estado */

.status-panel {

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.15);

}


.status-row {

    color:
        rgba(255,255,255,.75);

}



/* titulo flota */

.fleet-title h3 {

    color:
        white;

}


.fleet-title p {

    color:
        rgba(255,255,255,.6);

}



/* vehículos */

.vehicle-card {

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.12);

    color:
        white;

}



.vehicle-card:hover {

    background:
        rgba(255,255,255,.15);

}



.vehicle-card.active {

    border-color:
        #00d2ff;

    box-shadow:
        0 0 0 2px rgba(0,210,255,.25);

}



.vehicle-name {

    color:
        white;

}



.vehicle-info {

    color:
        rgba(255,255,255,.65);

}



/* ----------------------------------------------------------
   KPI DASHBOARD
---------------------------------------------------------- */

.dashboard-kpis {

    position:
        absolute;

    top:
        22px;

    left:
        22px;

    right:
        22px;

    z-index:
        50;


    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(140px,1fr));

    gap:
        14px;


    pointer-events:
        none;

}



.kpi-card {

    pointer-events:
        auto;


    padding:
        16px;


    border-radius:
        16px;


    background:
        var(--lok-card);


    border:
        1px solid #e2e8f0;


    box-shadow:
        0 12px 35px rgba(15,23,42,.16);

}



.kpi-card span {

    color:
        #64748b;

}



.kpi-card strong {

    color:
        var(--lok-blue);

    font-size:
        32px;

}



/* ----------------------------------------------------------
   TELEMETRIA V2
---------------------------------------------------------- */

.telemetry-card {

    width:
        330px;

    border-radius:
        16px;


    background:
        rgba(6,40,77,.96);


    border:
        1px solid rgba(255,255,255,.12);


    box-shadow:
        0 20px 55px rgba(0,0,0,.35);

}



.telemetry-title {

    color:
        white;

}


.telemetry-row {

    padding:
        7px 0;

}


.telemetry-row span:first-child {

    color:
        rgba(255,255,255,.65);

}


.telemetry-row strong {

    color:
        #00d2ff;

}



/* ----------------------------------------------------------
   ALERTAS V2
---------------------------------------------------------- */

.alerts-dashboard-card {

    border-radius:
        16px;


    box-shadow:
        0 18px 45px rgba(15,23,42,.18);


}



.alert-item {

    padding:
        10px;


    margin-bottom:
        8px;


    border-left:
        4px solid var(--lok-blue);


    background:
        #f8fafc;


    border-radius:
        8px;

}



.alert-item-title {

    font-weight:
        800;

    color:
        #0f172a;

}



.alert-item-text {

    color:
        #475569;

}



.alert-item-time {

    color:
        #94a3b8;

    font-size:
        11px;

}



/* ----------------------------------------------------------
   MAPA
---------------------------------------------------------- */

.map-area {

    background:
        #e2e8f0;

}



.topbar {

    z-index:
        45;

}


.source-badge {

    background:
        rgba(6,40,77,.9);

    border:
        0;

    color:
        white;

}




/* ==========================================================
   VEHICULO MAPA V2
========================================================== */


.vehicle-map-marker {

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;


    background:white;

    border-radius:50%;


    border:
        3px solid #00d2ff;


    box-shadow:
        0 8px 25px rgba(0,0,0,.35);


    font-size:22px;


}


.vehicle-map-marker span {

    line-height:1;

}




/* ==========================================================
   HEADER CONTEXTO FLOTA V2
========================================================== */


.fleet-context-bar {

    position:absolute;

    top:22px;

    left:22px;

    right:22px;


    z-index:60;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:14px 18px;


    border-radius:16px;


    background:
        rgba(255,255,255,.96);


    border:
        1px solid #e2e8f0;


    box-shadow:
        0 12px 35px rgba(15,23,42,.16);

}



.fleet-brand {

    display:flex;

    flex-direction:column;

}



.fleet-brand strong {

    color:
        #06284d;

    font-size:18px;

    letter-spacing:.04em;

}



.fleet-brand span {

    font-size:11px;

    color:#64748b;

}



.fleet-selector {

    display:flex;

    flex-direction:column;

    text-align:center;

}



.fleet-selector span {

    font-size:11px;

    color:#64748b;

}



.fleet-selector strong {

    color:#0b74d1;

}



.fleet-summary {

    display:flex;

    gap:18px;

}



.fleet-summary div {

    min-width:70px;

    text-align:center;

}



.fleet-summary span {

    display:block;

    color:#64748b;

    font-size:10px;

    text-transform:uppercase;

}



.fleet-summary strong {

    display:block;

    margin-top:3px;

    color:#06284d;

    font-size:22px;

}



@media(max-width:900px){

    .fleet-context-bar {

        flex-direction:column;

        gap:12px;

    }

}




/* ==========================================================
   AJUSTE POSICIONAMIENTO HEADER + KPI V2
========================================================== */


/* Barra principal */

.fleet-context-bar {

    top:22px;

}


/* KPI debajo de la barra */

.dashboard-kpis {

    top:105px;

}


/* Evitar que el mapa tape los elementos */

.fleet-context-bar,
.dashboard-kpis {

    z-index:60;

}




/* ==========================================================
   ESTADOS VEHICULOS V2
========================================================== */


.vehicle-state {

    margin-top:6px;

    font-size:11px;

    font-weight:800;

}


.vehicle-state.moving {

    color:#10b981;

}


.vehicle-state.idle {

    color:#f59e0b;

}


.vehicle-state.stopped {

    color:#94a3b8;

}


.vehicle-state.offline {

    color:#64748b;

}





/* ==========================================================
   VEHICLE DETAIL PANEL V1
========================================================== */


#vehicle-detail-panel {

    position: fixed;

    right: 22px;
    top: 160px;

    width: 340px;

    background: white;

    border-radius: 16px;

    padding: 18px;

    box-shadow:
        0 20px 45px rgba(15,23,42,.18);

    border:
        1px solid #e2e8f0;

    z-index:80;

    font-size:14px;

}



.vehicle-panel-header {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:18px;

}



.vehicle-panel-header strong {

    display:block;

    font-size:20px;

    color:#0f172a;

}



.vehicle-panel-header span {

    display:block;

    margin-top:4px;

    color:#64748b;

    font-size:13px;

}



.vehicle-panel-state {

    font-size:12px;

    font-weight:800;

}



.vehicle-panel-state.moving {

    color:#10b981;

}


.vehicle-panel-state.idle {

    color:#f59e0b;

}


.vehicle-panel-state.offline {

    color:#64748b;

}



.vehicle-panel-section {

    border-top:
        1px solid #e2e8f0;

    padding-top:12px;

    margin-top:12px;

}



.vehicle-panel-section h4 {

    margin:0 0 10px 0;

    font-size:12px;

    color:#2563eb;

    text-transform:uppercase;

}



.vehicle-panel-section p {

    margin:6px 0;

    color:#334155;

}





/* ==========================================================
   HISTORIAL DE RUTAS PANEL V1
========================================================== */


#history-panel {

    position:fixed;

    right:24px;

    top:120px;

    width:340px;

    background:#ffffff;

    border-radius:16px;

    padding:20px;

    box-shadow:
        0 20px 50px rgba(15,23,42,.18);

    border:
        1px solid #e2e8f0;

    z-index:120;

}


#history-panel select {

    width:100%;

    padding:10px;

    border-radius:8px;

    border:
        1px solid #cbd5e1;

    margin-top:8px;

}


#history-panel .vehicle-action-button {

    width:100%;

    margin-top:8px;

    padding:10px;

    border-radius:8px;

    border:none;

    background:#2563eb;

    color:white;

    font-weight:700;

    cursor:pointer;

}





/* ==========================================================
   HISTORIAL DE RUTAS - RESUMEN V1
========================================================== */


.history-summary {

    margin-top:16px;

    padding:14px;

    border:
        1px solid #e2e8f0;

    border-radius:12px;

    background:#f8fafc;

}


.history-summary[hidden] {

    display:none;

}


.history-summary-title {

    margin-bottom:12px;

    font-size:12px;

    font-weight:800;

    color:#2563eb;

    text-transform:uppercase;

}


.history-summary-grid {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;

}


.history-summary-grid div {

    min-width:0;

}


.history-summary-grid span {

    display:block;

    margin-bottom:4px;

    font-size:11px;

    color:#64748b;

}


.history-summary-grid strong {

    display:block;

    font-size:13px;

    line-height:1.35;

    color:#0f172a;

    overflow-wrap:anywhere;

}





/* ==========================================================
   HISTORIAL DE RUTAS - PERIODO PERSONALIZADO V2.1
========================================================== */


.history-custom-period {

    margin-top:14px;

    display:grid;

    grid-template-columns:
        1fr;

    gap:12px;

}


.history-custom-period[hidden] {

    display:none;

}


.history-custom-period label {

    display:block;

    font-size:11px;

    font-weight:700;

    color:#64748b;

}


.history-custom-period input {

    display:block;

    width:100%;

    box-sizing:border-box;

    margin-top:6px;

    padding:10px;

    border:
        1px solid #cbd5e1;

    border-radius:8px;

    background:#ffffff;

    color:#0f172a;

    font-size:12px;

}


.history-custom-period input:focus {

    outline:none;

    border-color:#2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.10);

}



/* ==========================================================
   ==========================================================
   LOKALIZATE.COM
   P4-C1 - THEME VISUAL PRODUCCION V1
   ==========================================================
   ========================================================== */

:root {
    --lok-blue: #169fe6;
    --lok-blue-dark: #087fc1;
    --lok-blue-soft: #eaf7ff;

    --lok-bg: #f5f8fb;
    --lok-surface: #ffffff;
    --lok-surface-soft: #f8fafc;

    --lok-text: #172033;
    --lok-muted: #7b8798;

    --lok-border: #e6ebf1;

    --lok-success: #19b56b;
    --lok-warning: #f4a62a;
    --lok-danger: #e65454;

    --lok-shadow:
        0 10px 30px rgba(22, 45, 80, 0.08);
}


/* ----------------------------------------------------------
   BASE
   ---------------------------------------------------------- */

html,
body {
    background:
        var(--lok-bg);
}

body {
    color:
        var(--lok-text);
}


/* ----------------------------------------------------------
   LOGIN
   ---------------------------------------------------------- */

.login-overlay {

    background:
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #eef7fc 45%,
            #e5f3fb 100%
        );

}


.login-card {

    width:
        min(
            430px,
            calc(100vw - 40px)
        );

    padding:
        42px 42px 36px;

    border:
        1px solid
        rgba(
            22,
            159,
            230,
            0.12
        );

    border-radius:
        24px;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    box-shadow:
        0 30px 80px
        rgba(
            36,
            72,
            110,
            0.16
        );

}


.brand-mark {

    width:
        58px;

    height:
        58px;

    border-radius:
        16px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            var(--lok-blue),
            #58c5ef
        );

    box-shadow:
        0 12px 24px
        rgba(
            22,
            159,
            230,
            0.25
        );

    font-size:
        28px;

}


.login-card h1 {

    color:
        var(--lok-text);

    font-size:
        30px;

    letter-spacing:
        -0.8px;

}


.login-subtitle {

    color:
        var(--lok-muted);

    font-size:
        14px;

}


.login-card label {

    color:
        #45546a;

}


.login-card input {

    padding:
        14px 15px;

    border:
        1px solid
        var(--lok-border);

    border-radius:
        12px;

    background:
        #fbfdff;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;

}


.login-card input:focus {

    outline:
        none;

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

    box-shadow:
        0 0 0 4px
        rgba(
            22,
            159,
            230,
            0.12
        );

}


.login-card button {

    margin-top:
        6px;

    padding:
        14px;

    border-radius:
        12px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            var(--lok-blue),
            var(--lok-blue-dark)
        );

    box-shadow:
        0 10px 22px
        rgba(
            22,
            159,
            230,
            0.25
        );

}


/* ----------------------------------------------------------
   APLICACION
   ---------------------------------------------------------- */

.app {

    background:
        var(--lok-bg);

}


/* ----------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------- */

.sidebar {

    width:
        300px;

    min-width:
        300px;

    padding:
        20px 18px;

    background:
        #ffffff;

    border-right:
        1px solid
        var(--lok-border);

    box-shadow:
        6px 0 24px
        rgba(
            42,
            67,
            100,
            0.06
        );

}


.sidebar-header {

    align-items:
        center;

    padding-bottom:
        18px;

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

}


.sidebar-header h2 {

    color:
        var(--lok-blue-dark);

    font-size:
        21px;

    font-weight:
        850;

    letter-spacing:
        -0.5px;

}


.sidebar-header p {

    color:
        var(--lok-muted);

}


.logout-button {

    border:
        1px solid
        var(--lok-border);

    border-radius:
        10px;

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

    color:
        #536176;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;

}


.logout-button:hover {

    background:
        var(--lok-blue-soft);

    border-color:
        rgba(
            22,
            159,
            230,
            0.35
        );

}


/* ----------------------------------------------------------
   ESTADO API / WS
   ---------------------------------------------------------- */

.status-panel {

    margin:
        15px 0;

    padding:
        11px 13px;

    border:
        1px solid
        var(--lok-border);

    border-radius:
        12px;

    background:
        #f8fbfd;

}


.pill {

    border-radius:
        999px;

}


/* ----------------------------------------------------------
   LISTADO VEHICULOS
   ---------------------------------------------------------- */

.vehicle-list {

    padding-right:
        2px;

}


.vehicle-item,
.vehicle-card {

    border:
        1px solid
        var(--lok-border);

    border-radius:
        13px;

    background:
        white;

    box-shadow:
        0 5px 14px
        rgba(
            36,
            65,
            98,
            0.04
        );

}


.vehicle-item:hover,
.vehicle-card:hover {

    border-color:
        rgba(
            22,
            159,
            230,
            0.38
        );

    box-shadow:
        0 8px 18px
        rgba(
            36,
            65,
            98,
            0.08
        );

}


/* ----------------------------------------------------------
   AREA PRINCIPAL
   ---------------------------------------------------------- */

.map-area {

    background:
        var(--lok-bg);

}


/* ----------------------------------------------------------
   HEADER FLOTA
   ---------------------------------------------------------- */

.fleet-context-bar {

    border:
        1px solid
        var(--lok-border);

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    box-shadow:
        var(--lok-shadow);

}


.fleet-brand strong {

    color:
        var(--lok-blue-dark);

}


.fleet-brand span,
.fleet-selector span,
.fleet-summary span {

    color:
        var(--lok-muted);

}


/* ----------------------------------------------------------
   KPI
   ---------------------------------------------------------- */

.dashboard-kpis {

    gap:
        12px;

}


.kpi-card {

    border:
        1px solid
        var(--lok-border);

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    box-shadow:
        0 8px 24px
        rgba(
            40,
            66,
            100,
            0.06
        );

}


.kpi-card span {

    color:
        var(--lok-muted);

}


.kpi-card strong {

    color:
        var(--lok-text);

}


/* ----------------------------------------------------------
   ALERTAS
   ---------------------------------------------------------- */

.alerts-dashboard-card {

    border:
        1px solid
        var(--lok-border);

    border-radius:
        16px;

    background:
        white;

    box-shadow:
        var(--lok-shadow);

}


.alerts-dashboard-header h3 {

    color:
        var(--lok-text);

}


.alerts-dashboard-header span {

    color:
        var(--lok-muted);

}


.alert-item {

    border-bottom:
        1px solid
        #edf1f5;

}


/* ----------------------------------------------------------
   MAPA
   ---------------------------------------------------------- */

#position-map {

    border:
        1px solid
        var(--lok-border);

    border-radius:
        18px;

    overflow:
        hidden;

    background:
        #dde6ec;

    box-shadow:
        var(--lok-shadow);

}


/* ----------------------------------------------------------
   TELEMETRIA
   ---------------------------------------------------------- */

.telemetry-card {

    border:
        1px solid
        var(--lok-border);

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    box-shadow:
        0 10px 32px
        rgba(
            25,
            55,
            90,
            0.12
        );

}


.telemetry-title {

    color:
        var(--lok-blue-dark);

}


.telemetry-row {

    border-bottom:
        1px solid
        #eef2f5;

}


.telemetry-row span {

    color:
        var(--lok-muted);

}


/* ----------------------------------------------------------
   TOPBAR VEHICULO
   ---------------------------------------------------------- */

.topbar {

    border:
        1px solid
        var(--lok-border);

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    box-shadow:
        0 8px 24px
        rgba(
            25,
            55,
            90,
            0.10
        );

}


.selected-name {

    color:
        var(--lok-text);

}


.selected-meta {

    color:
        var(--lok-muted);

}


/* ----------------------------------------------------------
   ADMIN
   ---------------------------------------------------------- */

.admin-panel {

    background:
        var(--lok-bg);

}


.admin-shell {

    background:
        var(--lok-bg);

}


.admin-header,
.admin-sidebar,
.admin-card {

    border:
        1px solid
        var(--lok-border);

    background:
        white;

    box-shadow:
        0 8px 24px
        rgba(
            30,
            60,
            95,
            0.05
        );

}


.admin-header {

    border-radius:
        16px;

}


.admin-sidebar,
.admin-card {

    border-radius:
        14px;

}


.admin-eyebrow {

    color:
        var(--lok-blue-dark);

}


.admin-action-button,
.admin-submit-button {

    border:
        none;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            var(--lok-blue),
            var(--lok-blue-dark)
        );

}


.admin-close-button {

    border:
        1px solid
        var(--lok-border);

    color:
        #526176;

    background:
        white;

}


/* ----------------------------------------------------------
   SCROLLBAR
   ---------------------------------------------------------- */

.sidebar,
.vehicle-list,
.admin-sidebar,
.admin-content {

    scrollbar-width:
        thin;

    scrollbar-color:
        #c8d5df
        transparent;

}


/* ----------------------------------------------------------
   TRANSICIONES
   ---------------------------------------------------------- */

.kpi-card,
.alerts-dashboard-card,
.telemetry-card,
.fleet-context-bar,
#position-map {

    transition:
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;

}


/* ----------------------------------------------------------
   RESPONSIVE BASICO
   ---------------------------------------------------------- */

@media (
    max-width: 1100px
) {

    .sidebar {

        width:
            270px;

        min-width:
            270px;

    }

}


@media (
    max-width: 820px
) {

    .app {

        display:
            block;

        overflow:
            auto;

    }


    .sidebar {

        width:
            100%;

        min-width:
            0;

        height:
            auto;

        max-height:
            42vh;

        border-right:
            0;

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

    }


    .map-area {

        min-height:
            58vh;

    }

}


/* ==========================================================
   FIN P4-C1
   ========================================================== */



/* ==========================================================
   LOKALIZATE.COM
   P4-C1.1 - CORPORATE DESIGN SYSTEM V2
   ----------------------------------------------------------
   Capa corporativa centralizada.
   Los valores definitivos podrán ajustarse cuando estén
   disponibles los originales de identidad corporativa.
   ========================================================== */

:root {

    /* BRAND */
    --lok-brand-primary: #169fe6;
    --lok-brand-primary-dark: #087fc1;
    --lok-brand-primary-soft: #eaf7ff;

    --lok-brand-navy: #172033;
    --lok-brand-white: #ffffff;

    /* BACKGROUNDS */
    --lok-app-bg: #f5f8fb;
    --lok-sidebar-bg: #ffffff;

    /* SURFACES */
    --lok-card-bg: #ffffff;
    --lok-card-soft: #f8fafc;

    /* TEXT */
    --lok-heading: #172033;
    --lok-body: #526176;
    --lok-secondary: #7b8798;

    /* UI */
    --lok-ui-border: #e6ebf1;

    --lok-ui-shadow:
        0 8px 28px
        rgba(31, 61, 94, 0.08);

    --lok-ui-shadow-hover:
        0 12px 34px
        rgba(31, 61, 94, 0.12);

    /* STATUS */
    --lok-status-success: #19b56b;
    --lok-status-warning: #f4a62a;
    --lok-status-danger: #e65454;

    /* RADII */
    --lok-radius-sm: 10px;
    --lok-radius-md: 14px;
    --lok-radius-lg: 18px;
    --lok-radius-xl: 24px;

    /* COMPATIBILIDAD THEME V1 */
    --lok-blue:
        var(--lok-brand-primary);

    --lok-blue-dark:
        var(--lok-brand-primary-dark);

    --lok-blue-soft:
        var(--lok-brand-primary-soft);

    --lok-bg:
        var(--lok-app-bg);

    --lok-surface:
        var(--lok-card-bg);

    --lok-surface-soft:
        var(--lok-card-soft);

    --lok-text:
        var(--lok-heading);

    --lok-muted:
        var(--lok-secondary);

    --lok-border:
        var(--lok-ui-border);

    --lok-success:
        var(--lok-status-success);

    --lok-warning:
        var(--lok-status-warning);

    --lok-danger:
        var(--lok-status-danger);

    --lok-shadow:
        var(--lok-ui-shadow);
}


/* ----------------------------------------------------------
   APP FOUNDATION
   ---------------------------------------------------------- */

html,
body {
    background:
        var(--lok-app-bg);
}

body {
    color:
        var(--lok-body);
}


/* ----------------------------------------------------------
   CARDS
   ---------------------------------------------------------- */

.kpi-card,
.telemetry-card,
.alerts-dashboard-card,
.fleet-context-bar {

    border-color:
        var(--lok-ui-border);

    background:
        var(--lok-card-bg);

    box-shadow:
        var(--lok-ui-shadow);
}


/* ----------------------------------------------------------
   INTERACTION
   ---------------------------------------------------------- */

.kpi-card:hover {

    border-color:
        rgba(22, 159, 230, 0.22);

    box-shadow:
        var(--lok-ui-shadow-hover);
}


/* ----------------------------------------------------------
   MAP
   ---------------------------------------------------------- */

#position-map {

    border-color:
        var(--lok-ui-border);

    box-shadow:
        var(--lok-ui-shadow);
}


/* ----------------------------------------------------------
   ADMIN
   ---------------------------------------------------------- */

.admin-card {

    border-color:
        var(--lok-ui-border);

    background:
        var(--lok-card-bg);
}


/* ==========================================================
   FIN P4-C1.1
   ========================================================== */

/* ==========================================================
   LOKALIZATE.COM
   P4-C1.2B - CORPORATE UI SHELL V1

   Primera aplicación visual corporativa.
   SOLO PRESENTACION.
   No modifica lógica ni estructura funcional.
   ========================================================== */


/* ----------------------------------------------------------
   APP / FONDO GENERAL
   ---------------------------------------------------------- */

.app {
    background:
        var(--lok-app-bg);
}


/* ----------------------------------------------------------
   SIDEBAR CORPORATIVA
   ---------------------------------------------------------- */

.sidebar {
    background:
        var(--lok-sidebar-bg);

    border-right:
        1px solid
        var(--lok-ui-border);

    box-shadow:
        8px 0 30px
        rgba(31, 61, 94, 0.045);
}


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

.sidebar-header {
    background:
        var(--lok-sidebar-bg);

    border-bottom:
        1px solid
        var(--lok-ui-border);
}


.sidebar-header h2 {
    margin:
        0;

    color:
        var(--lok-brand-primary);

    font-weight:
        800;

    letter-spacing:
        -0.035em;
}


.sidebar-header p {
    color:
        var(--lok-secondary);
}


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

.logout-button {
    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        var(--lok-radius-sm);

    background:
        var(--lok-card-bg);

    color:
        var(--lok-body);

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}


.logout-button:hover {
    border-color:
        rgba(22, 159, 230, 0.32);

    background:
        var(--lok-brand-primary-soft);

    color:
        var(--lok-brand-primary-dark);
}


/* ----------------------------------------------------------
   STATUS PANEL
   ---------------------------------------------------------- */

.status-panel {
    background:
        var(--lok-card-soft);

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        var(--lok-radius-md);
}


.status-row {
    color:
        var(--lok-body);
}


/* ----------------------------------------------------------
   LISTADO DE VEHICULOS
   ---------------------------------------------------------- */

.vehicle-list {
    background:
        transparent;
}


/* ----------------------------------------------------------
   AREA PRINCIPAL
   ---------------------------------------------------------- */

.map-area {
    background:
        var(--lok-app-bg);
}


/* ----------------------------------------------------------
   CONTEXTO FLOTA
   ---------------------------------------------------------- */

.fleet-context-bar {
    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        var(--lok-radius-lg);

    background:
        var(--lok-card-bg);

    box-shadow:
        var(--lok-ui-shadow);
}


/* ----------------------------------------------------------
   KPI
   ---------------------------------------------------------- */

.dashboard-kpis {
    gap:
        14px;
}


.kpi-card {
    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        var(--lok-radius-lg);

    background:
        var(--lok-card-bg);

    box-shadow:
        var(--lok-ui-shadow);
}


.kpi-card span {
    color:
        var(--lok-secondary);

    font-weight:
        600;
}


.kpi-card strong {
    color:
        var(--lok-heading);

    font-weight:
        800;

    letter-spacing:
        -0.035em;
}


/* detalle corporativo KPI */

.kpi-card::before {
    content:
        "";

    display:
        block;

    width:
        34px;

    height:
        3px;

    margin-bottom:
        12px;

    border-radius:
        999px;

    background:
        var(--lok-brand-primary);
}


/* ----------------------------------------------------------
   MAPA
   ---------------------------------------------------------- */

#position-map {
    overflow:
        hidden;

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        var(--lok-radius-lg);

    background:
        #eaf1f6;

    box-shadow:
        var(--lok-ui-shadow);
}


/* ----------------------------------------------------------
   TELEMETRIA
   ---------------------------------------------------------- */

.telemetry-card {
    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        var(--lok-radius-lg);

    background:
        var(--lok-card-bg);

    box-shadow:
        var(--lok-ui-shadow);
}


/* ----------------------------------------------------------
   ALERTAS
   ---------------------------------------------------------- */

.alerts-dashboard-card {
    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        var(--lok-radius-lg);

    background:
        var(--lok-card-bg);

    box-shadow:
        var(--lok-ui-shadow);
}


.alerts-dashboard-header h3 {
    color:
        var(--lok-heading);
}


/* ----------------------------------------------------------
   LEAFLET - INTEGRACION VISUAL
   ---------------------------------------------------------- */

.leaflet-control-zoom {
    overflow:
        hidden;

    border:
        1px solid
        var(--lok-ui-border) !important;

    border-radius:
        var(--lok-radius-sm) !important;

    box-shadow:
        0 6px 20px
        rgba(31, 61, 94, 0.12) !important;
}


.leaflet-control-zoom a {
    color:
        var(--lok-heading) !important;
}


.leaflet-control-zoom a:hover {
    color:
        var(--lok-brand-primary-dark) !important;

    background:
        var(--lok-brand-primary-soft) !important;
}


/* ----------------------------------------------------------
   SELECCION / ACCENT
   ---------------------------------------------------------- */

::selection {
    background:
        rgba(22, 159, 230, 0.22);

    color:
        var(--lok-heading);
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 820px) {

    .sidebar {
        box-shadow:
            0 8px 24px
            rgba(31, 61, 94, 0.06);
    }

}


/* ==========================================================
   FIN P4-C1.2B
   ========================================================== */


/* ==========================================================
   LOKALIZATE.COM
   P4-C1.3A - BRAND STRUCTURE
   ========================================================== */


/* ----------------------------------------------------------
   LOGIN BRAND
   ---------------------------------------------------------- */

.brand-login {
    display:
        flex;

    justify-content:
        center;

    margin-bottom:
        30px;
}


.brand-logo-placeholder {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.brand-symbol-placeholder {
    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--lok-brand-primary);

    color:
        white;

    font-size:
        26px;

    font-weight:
        900;

    letter-spacing:
        -0.04em;

    box-shadow:
        0 8px 24px
        rgba(22, 159, 230, 0.22);
}


.brand-wordmark-placeholder {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.brand-wordmark-placeholder strong {
    color:
        var(--lok-heading);

    font-size:
        20px;

    line-height:
        1;

    font-weight:
        850;

    letter-spacing:
        -0.04em;
}


.brand-wordmark-placeholder span {
    margin-top:
        6px;

    color:
        var(--lok-secondary);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        0.015em;
}


/* anulamos icono legacy */

.brand-mark {
    display:
        none !important;
}


/* ----------------------------------------------------------
   LOGIN CONTENT
   ---------------------------------------------------------- */

.login-card h1 {
    margin:
        0;

    text-align:
        center;

    color:
        var(--lok-heading);

    font-size:
        25px;

    font-weight:
        800;

    letter-spacing:
        -0.035em;
}


.login-subtitle {
    margin:
        8px 0 28px;

    text-align:
        center;

    color:
        var(--lok-secondary);

    font-size:
        13px;
}


/* ----------------------------------------------------------
   SIDEBAR BRAND
   ---------------------------------------------------------- */

.sidebar-brand {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.sidebar-brand-symbol {
    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--lok-brand-primary);

    color:
        white;

    font-weight:
        900;

    font-size:
        18px;

    box-shadow:
        0 5px 16px
        rgba(22, 159, 230, 0.18);
}


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


.sidebar-brand-copy h2 {
    overflow:
        hidden;

    margin:
        0;

    color:
        var(--lok-heading);

    font-size:
        16px;

    font-weight:
        850;

    letter-spacing:
        -0.035em;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.sidebar-brand-copy p {
    overflow:
        hidden;

    margin:
        4px 0 0;

    color:
        var(--lok-secondary);

    font-size:
        11px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* ----------------------------------------------------------
   FUTURO LOGO OFICIAL

   Cuando estén disponibles los assets oficiales, podremos
   sustituir estos placeholders por:

   /assets/brand/lokalizate-logo.svg
   /assets/brand/lokalizate-symbol.svg

   sin modificar la arquitectura de pantalla.
   ---------------------------------------------------------- */


/* ==========================================================
   FIN P4-C1.3A
   ========================================================== */


/* ==========================================================
   LOKALIZATE.COM
   P4-C1.3B - DASHBOARD CORPORATE SHELL V1
   ========================================================== */


/* ----------------------------------------------------------
   APP GLOBAL
   ---------------------------------------------------------- */

.app {
    background:
        var(--lok-app-bg);
}


/* ----------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------- */

.sidebar {
    width:
        286px;

    min-width:
        286px;

    padding:
        18px 16px;

    background:
        var(--lok-sidebar-bg);

    border-right:
        1px solid
        var(--lok-ui-border);

    box-shadow:
        8px 0 30px
        rgba(31, 61, 94, 0.045);
}


.sidebar-header {
    min-height:
        62px;

    align-items:
        center;

    padding:
        0 0 16px;

    gap:
        10px;

    border-bottom:
        1px solid
        var(--lok-ui-border);
}


.sidebar-header > div:first-child {
    min-width:
        0;
}


/* ----------------------------------------------------------
   SIDEBAR ACTIONS
   ---------------------------------------------------------- */

.sidebar-header .logout-button {
    height:
        32px;

    padding:
        0 10px;

    flex:
        0 0 auto;

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        9px;

    background:
        var(--lok-card-bg);

    color:
        var(--lok-secondary);

    font-size:
        11px;

    font-weight:
        650;

    transition:
        border-color .16s ease,
        background .16s ease,
        color .16s ease;
}


.sidebar-header .logout-button:hover {
    border-color:
        rgba(22, 159, 230, 0.34);

    background:
        var(--lok-brand-primary-soft);

    color:
        var(--lok-brand-primary-dark);
}


/* ----------------------------------------------------------
   STATUS
   ---------------------------------------------------------- */

.status-panel {
    margin:
        14px 0 16px;

    padding:
        9px 11px;

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        var(--lok-radius-sm);

    background:
        var(--lok-card-soft);

    box-shadow:
        none;
}


.status-row {
    min-height:
        26px;

    color:
        var(--lok-secondary);

    font-size:
        11px;
}


.pill {
    padding:
        3px 7px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        750;
}


/* ----------------------------------------------------------
   FLEET TITLE
   ---------------------------------------------------------- */

.fleet-title {
    margin:
        0 0 10px;

    padding:
        0 3px;
}


.fleet-title h3 {
    margin:
        0;

    color:
        var(--lok-heading);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        -0.01em;
}


.fleet-title p,
#fleet-count {
    margin-top:
        3px;

    color:
        var(--lok-secondary);

    font-size:
        10px;
}


/* ----------------------------------------------------------
   VEHICLE LIST
   ---------------------------------------------------------- */

.vehicle-list {
    gap:
        7px;

    padding-right:
        3px;
}


/* compatibilidad con distintas versiones de las tarjetas */

.vehicle-button,
.vehicle-item,
.vehicle-card {
    border-radius:
        11px !important;

    border-color:
        var(--lok-ui-border) !important;

    box-shadow:
        none !important;
}


.vehicle-button:hover,
.vehicle-item:hover,
.vehicle-card:hover {
    border-color:
        rgba(22, 159, 230, .30) !important;

    background:
        var(--lok-brand-primary-soft) !important;
}


/* ----------------------------------------------------------
   MAP AREA
   ---------------------------------------------------------- */

.map-area {
    position:
        relative;

    flex:
        1;

    min-width:
        0;

    padding:
        18px;

    overflow:
        hidden;

    background:
        var(--lok-app-bg);
}


/* ----------------------------------------------------------
   FLEET CONTEXT BAR
   ---------------------------------------------------------- */

.fleet-context-bar {
    position:
        relative;

    z-index:
        20;

    min-height:
        66px;

    margin:
        0 0 12px;

    padding:
        12px 16px;

    display:
        flex;

    align-items:
        center;

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        var(--lok-radius-md);

    background:
        rgba(255, 255, 255, .97);

    box-shadow:
        0 4px 18px
        rgba(31, 61, 94, .055);
}


.fleet-brand strong {
    color:
        var(--lok-heading);

    font-size:
        13px;

    font-weight:
        850;

    letter-spacing:
        -.02em;
}


.fleet-brand span {
    color:
        var(--lok-secondary);

    font-size:
        10px;
}


.fleet-selector {
    border-left:
        1px solid
        var(--lok-ui-border);

    padding-left:
        18px;
}


.fleet-selector span {
    color:
        var(--lok-secondary);

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .07em;
}


.fleet-selector strong {
    color:
        var(--lok-heading);

    font-size:
        13px;
}


/* ----------------------------------------------------------
   FLEET SUMMARY
   ---------------------------------------------------------- */

.fleet-summary {
    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.fleet-summary > div {
    min-width:
        62px;

    padding:
        7px 10px;

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        9px;

    background:
        var(--lok-card-soft);

    text-align:
        center;
}


.fleet-summary span {
    display:
        block;

    color:
        var(--lok-secondary);

    font-size:
        9px;
}


.fleet-summary strong {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--lok-heading);

    font-size:
        14px;

    font-weight:
        800;
}


/* ----------------------------------------------------------
   KPI ROW
   ---------------------------------------------------------- */

.dashboard-kpis {
    position:
        relative;

    z-index:
        19;

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(110px, 1fr));

    gap:
        10px;

    margin:
        0 0 12px;
}


.kpi-card {
    min-height:
        70px;

    padding:
        11px 13px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        var(--lok-radius-md);

    background:
        var(--lok-card-bg);

    box-shadow:
        0 4px 16px
        rgba(31, 61, 94, .045);

    transform:
        none;
}


.kpi-card:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 8px 22px
        rgba(31, 61, 94, .08);
}


.kpi-card span {
    color:
        var(--lok-secondary);

    font-size:
        10px;

    font-weight:
        650;
}


.kpi-card strong {
    margin-top:
        3px;

    color:
        var(--lok-heading);

    font-size:
        22px;

    font-weight:
        850;

    line-height:
        1;
}


/* ----------------------------------------------------------
   MAP
   ---------------------------------------------------------- */

#position-map {
    position:
        absolute;

    left:
        18px;

    right:
        18px;

    top:
        180px;

    bottom:
        18px;

    z-index:
        1;

    overflow:
        hidden;

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        var(--lok-radius-lg);

    background:
        #eaf0f4;

    box-shadow:
        var(--lok-ui-shadow);
}


/* ----------------------------------------------------------
   TOPBAR SOBRE MAPA
   ---------------------------------------------------------- */

.topbar {
    position:
        absolute;

    top:
        196px;

    left:
        34px;

    right:
        34px;

    z-index:
        15;

    pointer-events:
        none;
}


.topbar > * {
    pointer-events:
        auto;
}


.selected-name {
    color:
        var(--lok-heading);

    font-weight:
        850;

    font-size:
        15px;
}


.selected-meta {
    margin-top:
        2px;

    color:
        var(--lok-secondary);

    font-size:
        10px;
}


.source-badge {
    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        999px;

    padding:
        5px 9px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 4px 14px
        rgba(31,61,94,.08);

    color:
        var(--lok-secondary);

    font-size:
        9px;

    font-weight:
        750;
}


/* ----------------------------------------------------------
   TELEMETRY FLOATING CARD
   ---------------------------------------------------------- */

.telemetry-card {
    position:
        absolute;

    z-index:
        12;

    right:
        34px;

    top:
        244px;

    width:
        228px;

    padding:
        14px;

    border:
        1px solid
        rgba(230, 235, 241, .95);

    border-radius:
        var(--lok-radius-md);

    background:
        rgba(255, 255, 255, .94);

    box-shadow:
        0 10px 30px
        rgba(31, 61, 94, .11);

    backdrop-filter:
        blur(10px);
}


.telemetry-title {
    margin-bottom:
        8px;

    color:
        var(--lok-heading);

    font-size:
        11px;

    font-weight:
        800;
}


.telemetry-row {
    min-height:
        25px;

    padding:
        4px 0;

    border-bottom:
        1px solid
        rgba(230, 235, 241, .75);

    font-size:
        10px;
}


.telemetry-row:last-child {
    border-bottom:
        0;
}


.telemetry-row span {
    color:
        var(--lok-secondary);
}


.telemetry-row strong {
    color:
        var(--lok-heading);

    font-weight:
        750;
}


/* ----------------------------------------------------------
   ALERTS
   ---------------------------------------------------------- */

.alerts-dashboard-card {
    position:
        absolute;

    z-index:
        12;

    left:
        34px;

    bottom:
        34px;

    width:
        min(350px, calc(100% - 320px));

    max-height:
        170px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(230, 235, 241, .95);

    border-radius:
        var(--lok-radius-md);

    background:
        rgba(255, 255, 255, .94);

    box-shadow:
        0 10px 30px
        rgba(31, 61, 94, .10);

    backdrop-filter:
        blur(10px);
}


.alerts-dashboard-header {
    padding:
        11px 13px 8px;
}


.alerts-dashboard-header h3 {
    color:
        var(--lok-heading);

    font-size:
        11px;

    font-weight:
        800;
}


.alerts-dashboard-header span {
    color:
        var(--lok-secondary);

    font-size:
        9px;
}


.alerts-list {
    max-height:
        112px;

    overflow:
        auto;
}


/* ----------------------------------------------------------
   MAP MESSAGE
   ---------------------------------------------------------- */

.map-message {
    position:
        absolute;

    z-index:
        10;

    left:
        50%;

    bottom:
        34px;

    transform:
        translateX(-50%);

    padding:
        7px 11px;

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .92);

    box-shadow:
        0 5px 18px
        rgba(31, 61, 94, .08);

    color:
        var(--lok-secondary);

    font-size:
        10px;
}


/* ----------------------------------------------------------
   LEAFLET
   ---------------------------------------------------------- */

.leaflet-control-zoom {
    border:
        0 !important;

    box-shadow:
        0 6px 20px
        rgba(31, 61, 94, .12) !important;
}


.leaflet-control-zoom a {
    color:
        var(--lok-heading) !important;

    background:
        rgba(255,255,255,.96) !important;
}


.leaflet-control-attribution {
    font-size:
        9px !important;

    background:
        rgba(255,255,255,.78) !important;
}


/* ----------------------------------------------------------
   LARGE SCREEN
   ---------------------------------------------------------- */

@media (min-width: 1500px) {

    .sidebar {
        width:
            300px;

        min-width:
            300px;
    }


    .map-area {
        padding:
            20px;
    }


    #position-map {
        left:
            20px;

        right:
            20px;

        bottom:
            20px;
    }

}


/* ----------------------------------------------------------
   MEDIUM SCREEN
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

    .sidebar {
        width:
            250px;

        min-width:
            250px;
    }


    .dashboard-kpis {
        grid-template-columns:
            repeat(2, minmax(100px, 1fr));
    }


    #position-map {
        top:
            250px;
    }


    .topbar {
        top:
            266px;
    }


    .telemetry-card {
        top:
            314px;
    }

}


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

@media (max-width: 820px) {

    body {
        overflow:
            auto;
    }


    .app {
        min-height:
            100vh;

        height:
            auto;

        display:
            block;
    }


    .sidebar {
        width:
            100%;

        min-width:
            0;

        max-height:
            none;

        border-right:
            0;
    }


    .map-area {
        min-height:
            760px;

        padding:
            12px;
    }


    .fleet-context-bar {
        display:
            grid;

        gap:
            10px;
    }


    .fleet-selector {
        border-left:
            0;

        padding-left:
            0;
    }


    .fleet-summary {
        margin-left:
            0;
    }


    .dashboard-kpis {
        grid-template-columns:
            repeat(2, 1fr);
    }


    #position-map {
        top:
            330px;

        left:
            12px;

        right:
            12px;

        bottom:
            12px;
    }


    .topbar {
        top:
            346px;

        left:
            26px;

        right:
            26px;
    }


    .telemetry-card {
        top:
            auto;

        right:
            26px;

        bottom:
            26px;

        width:
            210px;
    }


    .alerts-dashboard-card {
        display:
            none;
    }

}


/* ==========================================================
   FIN P4-C1.3B
   ========================================================== */



/* ==========================================================
   LOKALIZATE.COM
   P4-C1.3C - DASHBOARD LAYOUT REFINEMENT V1
   ----------------------------------------------------------
   Refinamiento visual del dashboard de producción.

   OBJETIVOS:
   - mayor protagonismo del mapa
   - eliminar solapes estructurales
   - reducir ruido visual
   - compactar sidebar
   - mejorar jerarquía KPI
   - preparar interfaz para identidad definitiva
   ========================================================== */


/* ----------------------------------------------------------
   VARIABLES DE LAYOUT
   ---------------------------------------------------------- */

:root {

    --lok-shell-gap:
        12px;

    --lok-shell-padding:
        16px;

    --lok-header-height:
        64px;

    --lok-kpi-height:
        66px;

}


/* ----------------------------------------------------------
   APP
   ---------------------------------------------------------- */

.app {

    background:
        var(--lok-app-bg);

}


/* ----------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------- */

.sidebar {

    width:
        278px;

    min-width:
        278px;

    padding:
        16px 14px;

    gap:
        0;

    background:
        var(--lok-sidebar-bg);

}


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

.sidebar-header {

    min-height:
        58px;

    padding-bottom:
        13px;

    gap:
        8px;

}


.sidebar-brand {

    min-width:
        0;

    flex:
        1;

}


.sidebar-brand-symbol {

    width:
        38px;

    height:
        38px;

    min-width:
        38px;

    border-radius:
        50%;

    font-size:
        16px;

    box-shadow:
        0 5px 14px
        rgba(22,159,230,.18);

}


.sidebar-brand-copy {

    min-width:
        0;

}


.sidebar-brand-copy h2 {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        12px;

    letter-spacing:
        -.025em;

}


.sidebar-brand-copy p {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


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

.sidebar-header .logout-button {

    height:
        30px;

    padding:
        0 8px;

    border-radius:
        8px;

    font-size:
        10px;

}


/* ----------------------------------------------------------
   ESTADO SISTEMA
   ---------------------------------------------------------- */

.status-panel {

    margin:
        12px 0 14px;

    padding:
        8px 10px;

    border-radius:
        11px;

    background:
        #f8fafc;

}


.status-row {

    min-height:
        24px;

}


/* ----------------------------------------------------------
   TITULO FLOTA
   ---------------------------------------------------------- */

.fleet-title {

    margin-bottom:
        8px;

}


.fleet-title h3 {

    font-size:
        12px;

}


#fleet-count {

    margin-bottom:
        0;

}


/* ----------------------------------------------------------
   LISTADO VEHICULOS
   ---------------------------------------------------------- */

.vehicle-list {

    gap:
        8px;

    padding:
        2px 2px 12px 1px;

    overflow-y:
        auto;

    overflow-x:
        hidden;

}


.vehicle-card,
.vehicle-item,
.vehicle-button {

    min-height:
        88px;

    padding:
        12px !important;

    border:
        1px solid
        var(--lok-ui-border) !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 2px 8px
        rgba(31,61,94,.025) !important;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        transform .16s ease;

}


.vehicle-card:hover,
.vehicle-item:hover,
.vehicle-button:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(22,159,230,.28) !important;

    background:
        #f8fcff !important;

    box-shadow:
        0 6px 18px
        rgba(31,61,94,.065) !important;

}


.vehicle-card.active,
.vehicle-item.active,
.vehicle-button.active {

    border-color:
        rgba(22,159,230,.42) !important;

    background:
        var(--lok-brand-primary-soft) !important;

    box-shadow:
        inset 3px 0 0
        var(--lok-brand-primary) !important;

}


/* ----------------------------------------------------------
   ZONA PRINCIPAL

   Usamos GRID para dejar de calcular el mapa mediante
   top:180px como estructura principal.
   ---------------------------------------------------------- */

.map-area {

    position:
        relative;

    display:
        grid;

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

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

    gap:
        var(--lok-shell-gap);

    padding:
        var(--lok-shell-padding);

    overflow:
        hidden;

}


/* ----------------------------------------------------------
   HEADER FLOTA
   ---------------------------------------------------------- */

.fleet-context-bar {

    position:
        relative;

    top:
        auto;

    left:
        auto;

    right:
        auto;

    z-index:
        20;

    grid-row:
        1;

    min-height:
        var(--lok-header-height);

    margin:
        0;

    padding:
        10px 14px;

    border-radius:
        13px;

    box-shadow:
        0 3px 14px
        rgba(31,61,94,.045);

}


.fleet-brand {

    min-width:
        128px;

}


.fleet-brand strong {

    font-size:
        12px;

}


.fleet-brand span {

    margin-top:
        1px;

    font-size:
        9px;

}


.fleet-selector {

    margin-left:
        15px;

    padding-left:
        15px;

}


.fleet-selector strong {

    font-size:
        12px;

}


/* ----------------------------------------------------------
   RESUMEN HEADER
   ---------------------------------------------------------- */

.fleet-summary {

    gap:
        7px;

}


.fleet-summary > div {

    min-width:
        60px;

    padding:
        6px 9px;

    border-radius:
        9px;

    background:
        #f8fafc;

}


.fleet-summary span {

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;

}


.fleet-summary strong {

    font-size:
        13px;

}


/* ----------------------------------------------------------
   KPI
   ---------------------------------------------------------- */

.dashboard-kpis {

    position:
        relative;

    top:
        auto;

    left:
        auto;

    right:
        auto;

    z-index:
        19;

    grid-row:
        2;

    grid-template-columns:
        repeat(
            4,
            minmax(100px,1fr)
        );

    gap:
        9px;

    margin:
        0;

}


.kpi-card {

    min-height:
        var(--lok-kpi-height);

    padding:
        10px 13px;

    border-radius:
        12px;

    box-shadow:
        0 3px 12px
        rgba(31,61,94,.04);

}


.kpi-card::before {

    width:
        30px;

    height:
        3px;

    border-radius:
        999px;

}


.kpi-card span {

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .045em;

}


.kpi-card strong {

    margin-top:
        5px;

    font-size:
        21px;

}


/* ----------------------------------------------------------
   MAPA

   Ya forma parte real del GRID.
   No depende de top:180px.
   ---------------------------------------------------------- */

#position-map {

    position:
        relative;

    top:
        auto;

    bottom:
        auto;

    left:
        auto;

    right:
        auto;

    grid-row:
        3;

    width:
        100%;

    height:
        100%;

    min-height:
        320px;

    overflow:
        hidden;

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        16px;

    background:
        #eaf0f4;

    box-shadow:
        0 6px 22px
        rgba(31,61,94,.07);

}


/* ----------------------------------------------------------
   CABECERA VEHICULO SOBRE MAPA
   ---------------------------------------------------------- */

.topbar {

    position:
        absolute;

    top:
        178px;

    left:
        32px;

    right:
        32px;

    z-index:
        15;

    min-height:
        auto;

}


.selected-name {

    font-size:
        14px;

    text-shadow:
        0 1px 0
        rgba(255,255,255,.8);

}


.selected-meta {

    font-size:
        9px;

}


/* ----------------------------------------------------------
   TELEMETRIA

   Se hace más discreta porque el panel lateral de vehículo
   ya ofrece información ampliada.
   ---------------------------------------------------------- */

.telemetry-card {

    top:
        218px;

    right:
        30px;

    width:
        208px;

    padding:
        12px;

    border-radius:
        12px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 8px 24px
        rgba(31,61,94,.09);

}


.telemetry-title {

    margin-bottom:
        6px;

    font-size:
        10px;

}


.telemetry-row {

    min-height:
        22px;

    padding:
        3px 0;

    font-size:
        9px;

}


/* ----------------------------------------------------------
   ALERTAS FLOTANTES
   ---------------------------------------------------------- */

.alerts-dashboard-card {

    left:
        30px;

    bottom:
        30px;

    width:
        310px;

    max-height:
        152px;

    border-radius:
        12px;

    background:
        rgba(255,255,255,.93);

    box-shadow:
        0 8px 24px
        rgba(31,61,94,.085);

}


.alerts-dashboard-header {

    padding:
        10px 12px 7px;

}


.alerts-dashboard-header h3 {

    margin:
        0;

    font-size:
        10px;

}


.alerts-list {

    max-height:
        100px;

}


/* ----------------------------------------------------------
   MENSAJE MAPA
   ---------------------------------------------------------- */

.map-message {

    bottom:
        28px;

    padding:
        6px 10px;

    font-size:
        9px;

    box-shadow:
        0 4px 14px
        rgba(31,61,94,.065);

}


/* ----------------------------------------------------------
   PANEL DETALLE VEHICULO
   ---------------------------------------------------------- */

#vehicle-detail-panel {

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 18px 48px
        rgba(31,61,94,.15);

}


.vehicle-panel-header {

    padding-bottom:
        12px;

    border-bottom:
        1px solid
        var(--lok-ui-border);

}


.vehicle-panel-header strong {

    color:
        var(--lok-heading);

    font-size:
        18px;

    letter-spacing:
        -.025em;

}


.vehicle-panel-header span {

    color:
        var(--lok-secondary);

}


.vehicle-panel-section {

    padding:
        12px 0;

    border-bottom:
        1px solid
        var(--lok-ui-border);

}


.vehicle-panel-section:last-child {

    border-bottom:
        0;

}


.vehicle-panel-section h4 {

    color:
        var(--lok-brand-primary-dark);

    font-size:
        10px;

    letter-spacing:
        .035em;

    text-transform:
        uppercase;

}


.vehicle-action-button {

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        var(--lok-body);

    font-family:
        inherit;

    font-size:
        11px;

    cursor:
        pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;

}


.vehicle-action-button:hover {

    border-color:
        rgba(22,159,230,.35);

    background:
        var(--lok-brand-primary-soft);

    color:
        var(--lok-brand-primary-dark);

}


/* ----------------------------------------------------------
   LEAFLET
   ---------------------------------------------------------- */

.map-area .leaflet-top {

    margin-top:
        4px;

}


.leaflet-control-zoom {

    border-radius:
        10px !important;

    overflow:
        hidden;

}


/* ----------------------------------------------------------
   GRANDES PANTALLAS
   ---------------------------------------------------------- */

@media (min-width: 1500px) {

    .sidebar {

        width:
            292px;

        min-width:
            292px;

    }


    .map-area {

        --lok-shell-padding:
            18px;

        --lok-shell-gap:
            12px;

    }


    .telemetry-card {

        right:
            32px;

        width:
            218px;

    }


    .alerts-dashboard-card {

        left:
            32px;

        width:
            330px;

    }

}


/* ----------------------------------------------------------
   PORTATIL / DESKTOP MEDIO
   ---------------------------------------------------------- */

@media (max-width: 1200px) {

    .sidebar {

        width:
            252px;

        min-width:
            252px;

    }


    .fleet-brand span {

        display:
            none;

    }


    .fleet-summary > div {

        min-width:
            54px;

        padding:
            6px;

    }


    .telemetry-card {

        width:
            190px;

    }

}


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

@media (max-width: 1000px) {

    .dashboard-kpis {

        grid-template-columns:
            repeat(4,minmax(80px,1fr));

    }


    .kpi-card {

        padding:
            9px;

    }


    .kpi-card strong {

        font-size:
            18px;

    }


    .fleet-summary {

        display:
            none;

    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 820px) {

    .app {

        display:
            block;

        height:
            auto;

    }


    .sidebar {

        width:
            100%;

        min-width:
            0;

        max-height:
            none;

    }


    .map-area {

        display:
            grid;

        min-height:
            760px;

        padding:
            12px;

        grid-template-rows:
            auto
            auto
            minmax(420px,1fr);

    }


    .fleet-context-bar {

        display:
            flex;

        min-height:
            58px;

    }


    .dashboard-kpis {

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

    }


    #position-map {

        position:
            relative;

        top:
            auto;

        left:
            auto;

        right:
            auto;

        bottom:
            auto;

        min-height:
            420px;

    }


    .topbar {

        top:
            262px;

        left:
            26px;

        right:
            26px;

    }


    .telemetry-card {

        top:
            auto;

        right:
            24px;

        bottom:
            24px;

        width:
            190px;

    }


    .alerts-dashboard-card {

        display:
            none;

    }

}


/* ==========================================================
   FIN P4-C1.3C
   ========================================================== */



/* ==========================================================
   LOKALIZATE.COM
   P4-C1.3D - DASHBOARD VISUAL POLISH V1

   Ajuste visual de producción:
   - Sidebar
   - Tarjetas vehículos
   - KPI
   - Mapa
   - Panel detalle vehículo
   - Acciones
   - Telemetría
   - Alertas

   NO modifica funcionalidad.
   ========================================================== */


/* ----------------------------------------------------------
   SIDEBAR - REFINAMIENTO
   ---------------------------------------------------------- */

.sidebar {
    padding:
        16px 14px 14px;

    background:
        #ffffff;
}


.sidebar-header {
    min-height:
        58px;

    padding-bottom:
        14px;
}


.sidebar-brand {
    flex:
        1 1 auto;

    min-width:
        0;
}


.sidebar-brand-symbol {
    width:
        38px;

    height:
        38px;

    min-width:
        38px;

    border-radius:
        50%;

    font-size:
        16px;

    box-shadow:
        0 5px 14px
        rgba(22, 159, 230, .18);
}


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


.sidebar-brand-copy h2 {
    max-width:
        118px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        12px;

    letter-spacing:
        -.025em;
}


.sidebar-brand-copy p {
    max-width:
        118px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* ----------------------------------------------------------
   SIDEBAR ACTIONS
   ---------------------------------------------------------- */

.sidebar-header .logout-button {
    min-width:
        auto;

    height:
        30px;

    padding:
        0 9px;

    border-radius:
        8px;

    font-size:
        10px;

    box-shadow:
        none;
}


/* ----------------------------------------------------------
   STATUS PANEL
   ---------------------------------------------------------- */

.status-panel {
    margin:
        12px 0 14px;

    padding:
        8px 10px;

    border-radius:
        11px;

    background:
        #f8fafc;
}


.status-row {
    min-height:
        25px;
}


.pill {
    font-size:
        9px;

    letter-spacing:
        .015em;
}


/* ----------------------------------------------------------
   FLEET TITLE
   ---------------------------------------------------------- */

.fleet-title {
    margin-bottom:
        8px;
}


.fleet-title h3 {
    font-size:
        13px;
}


#fleet-count {
    font-size:
        10px;
}


/* ----------------------------------------------------------
   VEHICLE LIST
   ---------------------------------------------------------- */

.vehicle-list {
    gap:
        8px;

    padding-right:
        2px;
}


/*
   Soporte para las diferentes clases que han existido
   durante el desarrollo.
*/

.vehicle-card,
.vehicle-item,
.vehicle-button {
    position:
        relative;

    min-height:
        92px;

    padding:
        13px 12px !important;

    border:
        1px solid
        var(--lok-ui-border) !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    box-shadow:
        none !important;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}


.vehicle-card:hover,
.vehicle-item:hover,
.vehicle-button:hover {
    border-color:
        rgba(22,159,230,.32) !important;

    background:
        #f7fcff !important;

    box-shadow:
        0 6px 18px
        rgba(31,61,94,.055) !important;

    transform:
        translateY(-1px);
}


.vehicle-card.active,
.vehicle-item.active,
.vehicle-button.active {
    border-color:
        rgba(22,159,230,.55) !important;

    background:
        var(--lok-brand-primary-soft) !important;

    box-shadow:
        inset 3px 0 0
        var(--lok-brand-primary) !important;
}


/* ----------------------------------------------------------
   MAP AREA
   ---------------------------------------------------------- */

.map-area {
    padding:
        16px;

    background:
        #f5f8fb;
}


/* ----------------------------------------------------------
   HEADER FLOTA
   ---------------------------------------------------------- */

.fleet-context-bar {
    min-height:
        62px;

    margin-bottom:
        10px;

    padding:
        10px 14px;

    border-radius:
        13px;

    box-shadow:
        0 4px 16px
        rgba(31,61,94,.045);
}


.fleet-brand {
    min-width:
        130px;
}


.fleet-brand strong {
    font-size:
        12px;
}


.fleet-brand span {
    margin-top:
        1px;

    font-size:
        9px;
}


.fleet-selector {
    padding-left:
        16px;
}


.fleet-selector strong {
    font-size:
        12px;
}


.fleet-summary {
    gap:
        7px;
}


.fleet-summary > div {
    min-width:
        60px;

    padding:
        6px 9px;

    border-radius:
        9px;
}


.fleet-summary span {
    font-size:
        8px;
}


.fleet-summary strong {
    font-size:
        13px;
}


/* ----------------------------------------------------------
   KPI
   ---------------------------------------------------------- */

.dashboard-kpis {
    gap:
        9px;

    margin-bottom:
        10px;
}


.kpi-card {
    position:
        relative;

    min-height:
        66px;

    padding:
        10px 13px;

    overflow:
        hidden;

    border-radius:
        12px;

    box-shadow:
        0 3px 13px
        rgba(31,61,94,.04);
}


.kpi-card::before {
    content:
        "";

    position:
        absolute;

    top:
        10px;

    left:
        13px;

    width:
        28px;

    height:
        3px;

    border-radius:
        999px;

    background:
        var(--lok-brand-primary);
}


.kpi-card span {
    margin-top:
        10px;

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .045em;
}


.kpi-card strong {
    margin-top:
        3px;

    font-size:
        21px;
}


/* ----------------------------------------------------------
   MAP - MAYOR PROTAGONISMO
   ---------------------------------------------------------- */

#position-map {
    left:
        16px;

    right:
        16px;

    top:
        174px;

    bottom:
        16px;

    border-radius:
        16px;

    box-shadow:
        0 8px 26px
        rgba(31,61,94,.08);
}


/* ----------------------------------------------------------
   TOPBAR MAPA
   ---------------------------------------------------------- */

.topbar {
    top:
        188px;

    left:
        30px;

    right:
        30px;
}


.selected-name {
    font-size:
        14px;

    text-shadow:
        0 1px 0
        rgba(255,255,255,.85);
}


.selected-meta {
    font-size:
        9px;
}


.source-badge {
    padding:
        4px 8px;

    font-size:
        8px;

    box-shadow:
        0 3px 12px
        rgba(31,61,94,.07);
}


/* ----------------------------------------------------------
   TELEMETRY
   ---------------------------------------------------------- */

.telemetry-card {
    top:
        232px;

    right:
        30px;

    width:
        218px;

    padding:
        13px;

    border-radius:
        13px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 9px 26px
        rgba(31,61,94,.10);
}


.telemetry-title {
    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .045em;
}


.telemetry-row {
    min-height:
        23px;

    font-size:
        9px;
}


/* ----------------------------------------------------------
   VEHICLE DETAIL PANEL
   ---------------------------------------------------------- */

#vehicle-detail-panel {
    border:
        1px solid
        rgba(230,235,241,.98);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 18px 48px
        rgba(31,61,94,.14);

    backdrop-filter:
        blur(12px);
}


.vehicle-panel-header {
    padding-bottom:
        12px;

    border-bottom:
        1px solid
        var(--lok-ui-border);
}


.vehicle-panel-header strong {
    color:
        var(--lok-heading);

    font-size:
        18px;

    font-weight:
        850;

    letter-spacing:
        -.025em;
}


.vehicle-panel-header span {
    margin-top:
        3px;

    color:
        var(--lok-secondary);

    font-size:
        12px;
}


.vehicle-panel-close {
    width:
        28px;

    height:
        28px;

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        var(--lok-secondary);

    cursor:
        pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.vehicle-panel-close:hover {
    border-color:
        rgba(22,159,230,.28);

    background:
        var(--lok-brand-primary-soft);

    color:
        var(--lok-brand-primary-dark);
}


/* ----------------------------------------------------------
   VEHICLE STATE
   ---------------------------------------------------------- */

.vehicle-panel-state {
    margin:
        10px 0;

    padding:
        6px 9px;

    border-radius:
        8px;

    font-size:
        10px;

    font-weight:
        750;
}


.vehicle-panel-state.moving {
    color:
        #087f52;

    background:
        rgba(25,181,107,.10);
}


.vehicle-panel-state.idle {
    color:
        #9a6810;

    background:
        rgba(244,166,42,.12);
}


.vehicle-panel-state.offline {
    color:
        #657184;

    background:
        #f4f6f8;
}


/* ----------------------------------------------------------
   VEHICLE PANEL SECTIONS
   ---------------------------------------------------------- */

.vehicle-panel-section {
    padding:
        11px 0;

    border-bottom:
        1px solid
        var(--lok-ui-border);
}


.vehicle-panel-section:last-child {
    border-bottom:
        0;
}


.vehicle-panel-section h4 {
    margin:
        0 0 8px;

    color:
        var(--lok-brand-primary-dark);

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .035em;
}


.vehicle-panel-section p {
    margin:
        4px 0;

    color:
        var(--lok-body);

    font-size:
        12px;

    line-height:
        1.35;
}


/* ----------------------------------------------------------
   ACTION BUTTONS
   ---------------------------------------------------------- */

.vehicle-action-button {
    min-height:
        28px;

    padding:
        5px 8px;

    border:
        1px solid
        var(--lok-ui-border);

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        var(--lok-body);

    font-size:
        10px;

    font-weight:
        650;

    cursor:
        pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}


.vehicle-action-button:hover {
    border-color:
        rgba(22,159,230,.35);

    background:
        var(--lok-brand-primary-soft);

    color:
        var(--lok-brand-primary-dark);

    box-shadow:
        0 3px 10px
        rgba(22,159,230,.08);
}


/* ----------------------------------------------------------
   ALERTS
   ---------------------------------------------------------- */

.alerts-dashboard-card {
    left:
        30px;

    bottom:
        30px;

    width:
        min(330px, calc(100% - 310px));

    max-height:
        160px;

    border-radius:
        13px;

    box-shadow:
        0 9px 26px
        rgba(31,61,94,.09);
}


.alerts-dashboard-header {
    padding:
        10px 12px 7px;
}


.alerts-dashboard-header h3 {
    font-size:
        10px;
}


.alerts-dashboard-header span {
    font-size:
        8px;
}


.alerts-list {
    max-height:
        104px;
}


/* ----------------------------------------------------------
   MAP MESSAGE
   ---------------------------------------------------------- */

.map-message {
    bottom:
        28px;

    padding:
        6px 10px;

    font-size:
        9px;
}


/* ----------------------------------------------------------
   LEAFLET
   ---------------------------------------------------------- */

.leaflet-control-zoom {
    margin-top:
        74px !important;

    margin-left:
        10px !important;
}


.leaflet-control-zoom a {
    width:
        30px !important;

    height:
        30px !important;

    line-height:
        30px !important;
}


/* ----------------------------------------------------------
   LARGE DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1500px) {

    .sidebar {
        width:
            292px;

        min-width:
            292px;
    }


    .map-area {
        padding:
            18px;
    }


    #position-map {
        left:
            18px;

        right:
            18px;

        bottom:
            18px;
    }


    .telemetry-card {
        right:
            32px;
    }


    .alerts-dashboard-card {
        left:
            32px;

        bottom:
            32px;
    }

}


/* ----------------------------------------------------------
   MEDIUM
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

    #position-map {
        top:
            242px;
    }


    .topbar {
        top:
            256px;
    }


    .telemetry-card {
        top:
            300px;
    }

}


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

@media (max-width: 820px) {

    .map-area {
        padding:
            12px;
    }


    #position-map {
        top:
            322px;

        left:
            12px;

        right:
            12px;

        bottom:
            12px;
    }


    .topbar {
        top:
            336px;

        left:
            24px;

        right:
            24px;
    }


    .telemetry-card {
        top:
            auto;

        right:
            24px;

        bottom:
            24px;

        width:
            205px;
    }


    .alerts-dashboard-card {
        display:
            none;
    }

}


/* ==========================================================
   FIN P4-C1.3D
   ========================================================== */


/* ==========================================================
   P4-C1.3F - MAP GRID RESTORE V1

   Objetivo:
   - Header + KPI permanecen en flujo GRID.
   - El mapa ocupa exclusivamente la tercera fila.
   - Eliminamos el top absoluto heredado de P4-C1.3D.
   - Topbar y overlays se posicionan respecto al mapa visual.
   ========================================================== */


/* ----------------------------------------------------------
   MAP AREA
   ---------------------------------------------------------- */

.map-area {
    position: relative;

    display: grid;

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

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

    gap:
        10px;

    padding:
        16px;

    min-width:
        0;

    min-height:
        0;

    height:
        100vh;

    overflow:
        hidden;

    background:
        #f5f8fb;
}


/* ----------------------------------------------------------
   HEADER FLOTA - FILA 1
   ---------------------------------------------------------- */

.fleet-context-bar {
    position:
        relative;

    top:
        auto;

    left:
        auto;

    right:
        auto;

    grid-row:
        1;

    margin:
        0;

    z-index:
        20;
}


/* ----------------------------------------------------------
   KPI - FILA 2
   ---------------------------------------------------------- */

.dashboard-kpis {
    position:
        relative;

    top:
        auto;

    left:
        auto;

    right:
        auto;

    grid-row:
        2;

    margin:
        0;

    z-index:
        19;
}


/* ----------------------------------------------------------
   MAPA - FILA 3
   ---------------------------------------------------------- */

#position-map {
    position:
        relative;

    top:
        auto;

    right:
        auto;

    bottom:
        auto;

    left:
        auto;

    grid-row:
        3;

    width:
        100%;

    height:
        100%;

    min-height:
        0;

    overflow:
        hidden;

    border-radius:
        16px;

    z-index:
        1;
}


/* ----------------------------------------------------------
   TOPBAR VEHICULO

   Header + KPI:
   62 + 10 + 66 + 10 + padding superior 16
   = inicio aproximado mapa 164 px.

   Topbar queda superpuesta dentro del mapa.
   ---------------------------------------------------------- */

.topbar {
    position:
        absolute;

    top:
        174px;

    left:
        30px;

    right:
        30px;

    z-index:
        15;

    pointer-events:
        none;
}

.topbar > * {
    pointer-events:
        auto;
}


/* ----------------------------------------------------------
   TELEMETRIA
   ---------------------------------------------------------- */

.telemetry-card {
    position:
        absolute;

    top:
        218px;

    right:
        30px;

    z-index:
        20;
}


/* ----------------------------------------------------------
   ALERTAS
   ---------------------------------------------------------- */

.alerts-dashboard-card {
    position:
        absolute;

    left:
        30px;

    bottom:
        30px;

    z-index:
        40;
}


/* ----------------------------------------------------------
   LEAFLET
   ---------------------------------------------------------- */

.leaflet-control-zoom {
    margin-top:
        58px !important;
}


/* ----------------------------------------------------------
   LARGE DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1500px) {

    .map-area {
        padding:
            18px;
    }

    .topbar {
        top:
            178px;

        left:
            32px;

        right:
            32px;
    }

    .telemetry-card {
        top:
            222px;

        right:
            32px;
    }

    .alerts-dashboard-card {
        left:
            32px;

        bottom:
            32px;
    }
}


/* ----------------------------------------------------------
   MEDIUM
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

    .map-area {
        grid-template-rows:
            auto
            auto
            minmax(0, 1fr);
    }

    #position-map {
        position:
            relative;

        top:
            auto;

        left:
            auto;

        right:
            auto;

        bottom:
            auto;
    }

    .topbar {
        top:
            238px;
    }

    .telemetry-card {
        top:
            282px;
    }
}


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

@media (max-width: 820px) {

    .map-area {
        padding:
            12px;

        gap:
            8px;
    }

    #position-map {
        position:
            relative;

        top:
            auto;

        left:
            auto;

        right:
            auto;

        bottom:
            auto;

        min-height:
            0;
    }

    .topbar {
        top:
            318px;

        left:
            24px;

        right:
            24px;
    }

    .telemetry-card {
        top:
            auto;

        right:
            24px;

        bottom:
            24px;
    }

}


/* ==========================================================
   FIN P4-C1.3F
   ========================================================== */


/* ==========================================================
   P4-C1.3G - CORPORATE VISUAL INTEGRATION V1
   SOLO CAPA VISUAL
   NO ALTERA GEOMETRIA DEL MAPA
========================================================== */


.app {
    background:
        #f4f7fb;
}


.sidebar {

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fafc 100%
        );

    border-right:
        1px solid
        rgba(31,61,94,.08);
}


.sidebar-brand-copy h2 {

    letter-spacing:
        -.025em;

}


.status-panel {

    background:
        rgba(255,255,255,.88);

    border-color:
        rgba(31,61,94,.08);

}


.vehicle-card,
.vehicle-button,
.vehicle-item {

    background:
        rgba(255,255,255,.92);

    transition:
        .18s ease;

}


.vehicle-card.active,
.vehicle-button.active,
.vehicle-item.active {

    border-color:
        rgba(22,159,230,.45) !important;

    background:
        rgba(22,159,230,.08) !important;

}


.fleet-context-bar {

    background:
        rgba(255,255,255,.96);

    border-color:
        rgba(31,61,94,.10);

    box-shadow:
        0 8px 24px
        rgba(31,61,94,.06);

}


.kpi-card {

    background:
        rgba(255,255,255,.98);

    border-color:
        rgba(31,61,94,.08);

}


.kpi-card:hover {

    box-shadow:
        0 10px 28px
        rgba(31,61,94,.10);

}


.telemetry-card,
.alerts-dashboard-card {

    border-color:
        rgba(31,61,94,.10);

    background:
        rgba(255,255,255,.96);

}


#position-map {

    border-color:
        rgba(31,61,94,.10);

}


.leaflet-control-zoom a {

    border-color:
        rgba(31,61,94,.10) !important;

}


/* ==========================================================
   FIN P4-C1.3G
========================================================== */



/* ==========================================================
   P4-C1.4A.1 - VEHICLE MARKERS VISUAL LAYER V1

   SOLO PRESENTACION
   NO ALTERA MAPA NI LOGICA
========================================================== */


/* ----------------------------------------------------------
   VEHICLE MARKER BASE
---------------------------------------------------------- */


.vehicle-marker {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    border-radius:
        50%;

    background:
        #ffffff;

    border:
        3px solid
        #159fe6;

    box-shadow:

        0 8px 22px
        rgba(31,61,94,.18);

}


/* ----------------------------------------------------------
   ICON VEHICLE
---------------------------------------------------------- */


.vehicle-marker-icon {

    font-size:
        22px;

    line-height:
        1;

}


/* ----------------------------------------------------------
   STATUS RINGS
---------------------------------------------------------- */


.vehicle-marker.moving {

    border-color:
        #19b56b;

}


.vehicle-marker.idle {

    border-color:
        #f4a62a;

}


.vehicle-marker.offline {

    border-color:
        #8a96a8;

}


/* ----------------------------------------------------------
   MOVING ANIMATION
---------------------------------------------------------- */


.vehicle-marker.moving::after {

    content:
        "";

    position:
        absolute;

    inset:
        -7px;

    border-radius:
        50%;

    border:
        2px solid
        rgba(25,181,107,.35);

    animation:
        lokPulse 2s infinite;

}


@keyframes lokPulse {


    0% {

        transform:
            scale(.85);

        opacity:
            .8;

    }


    100% {

        transform:
            scale(1.25);

        opacity:
            0;

    }

}



/* ----------------------------------------------------------
   VEHICLE LABEL
---------------------------------------------------------- */


.vehicle-label {

    position:
        absolute;

    top:
        48px;

    left:
        50%;

    transform:
        translateX(-50%);


    padding:

        4px 8px;


    border-radius:

        8px;


    background:

        rgba(255,255,255,.96);


    border:

        1px solid

        rgba(31,61,94,.10);


    box-shadow:

        0 5px 16px

        rgba(31,61,94,.10);


    white-space:

        nowrap;


    font-size:

        10px;


    font-weight:

        750;


    color:

        #17324d;

}



/* ----------------------------------------------------------
   SPEED BADGE
---------------------------------------------------------- */


.vehicle-speed {

    margin-top:

        2px;


    font-size:

        9px;


    color:

        #657184;

}


/* ----------------------------------------------------------
   FIN P4-C1.4A.1
========================================================== */



/* ==========================================================
   P4-C1.4A.3 - VEHICLE MARKER CSS SKIN V1
   ========================================================== */


.vehicle-marker-modern {

    position:
        relative;

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.vehicle-marker-ring {

    position:
        absolute;

    inset:
        3px;

    border-radius:
        50%;

    background:
        color-mix(
            in srgb,
            var(--marker-color) 18%,
            white
        );

    border:
        2px solid
        var(--marker-color);

    box-shadow:

        0 6px 18px
        rgba(31,61,94,.18);

    animation:
        vehiclePulse 2.2s infinite;

}


.vehicle-marker-icon {

    position:
        relative;

    z-index:
        2;

    width:
        34px;

    height:
        34px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    border-radius:
        50%;


    background:
        white;


    font-size:
        20px;


    box-shadow:

        0 4px 12px
        rgba(31,61,94,.22);

}


@keyframes vehiclePulse {


    0% {

        transform:
            scale(1);

        opacity:
            .95;

    }


    50% {

        transform:
            scale(1.12);

        opacity:
            .55;

    }


    100% {

        transform:
            scale(1);

        opacity:
            .95;

    }

}


/* ==========================================================
   FIN P4-C1.4A.3
   ========================================================== */



/* ==========================================================
   P4-C1.4A.4 - VEHICLE MARKER PREMIUM V2
   ========================================================== */


/* ----------------------------------------------------------
   CONTENEDOR
   ---------------------------------------------------------- */

.vehicle-marker-modern {
    position: relative;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    filter:
        drop-shadow(
            0 7px 10px
            rgba(31, 61, 94, .20)
        );
}


/* ----------------------------------------------------------
   HALO EXTERIOR
   ---------------------------------------------------------- */

.vehicle-marker-modern::before {
    content: "";

    position: absolute;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--marker-color) 13%,
            transparent
        );

    opacity: .95;
}


/* ----------------------------------------------------------
   ARO OPERATIVO
   ---------------------------------------------------------- */

.vehicle-marker-ring {
    position: absolute;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    border:
        2px solid
        var(--marker-color);

    background:
        rgba(255, 255, 255, .38);

    box-shadow:
        inset 0 0 0 3px
        rgba(255, 255, 255, .55);

    animation:
        lokalizateMarkerPulse
        2.6s
        ease-out
        infinite;
}


/* ----------------------------------------------------------
   NUCLEO
   ---------------------------------------------------------- */

.vehicle-marker-icon {
    position: relative;

    z-index: 3;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        2px solid
        #ffffff;

    border-radius:
        50%;

    background:
        #ffffff;

    font-size:
        20px;

    line-height:
        1;

    box-shadow:
        0 4px 13px
        rgba(31, 61, 94, .24);
}


/* ----------------------------------------------------------
   DETALLE CENTRAL
   ---------------------------------------------------------- */

.vehicle-marker-icon::after {
    content: "";

    position: absolute;

    right: -1px;
    bottom: -1px;

    width: 9px;
    height: 9px;

    border:
        2px solid
        #ffffff;

    border-radius:
        50%;

    background:
        var(--marker-color);

    box-shadow:
        0 2px 5px
        rgba(31, 61, 94, .20);
}


/* ----------------------------------------------------------
   ANIMACION
   ---------------------------------------------------------- */

@keyframes lokalizateMarkerPulse {

    0% {
        transform:
            scale(.92);

        opacity:
            .88;
    }

    65% {
        transform:
            scale(1.16);

        opacity:
            .20;
    }

    100% {
        transform:
            scale(1.18);

        opacity:
            0;
    }
}


/* ----------------------------------------------------------
   LEAFLET
   ---------------------------------------------------------- */

.leaflet-marker-icon .vehicle-marker-modern {
    transform:
        translateZ(0);
}


/* ==========================================================
   FIN P4-C1.4A.4
   ========================================================== */


/* ==========================================================
   P4-C1.5A.2 - DASHBOARD MASTER LAYOUT V1
   ======================================================= */
:root { --p4-navy:#10233f; --p4-navy-2:#183556; --p4-bg:#f3f6fa; --p4-line:#dfe7f0; --p4-text:#18324b; --p4-muted:#718096; --p4-accent:#2878ff; }
#app.app { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); background:var(--p4-bg); color:var(--p4-text); overflow:auto; }
#app.app.hidden { display:none; }
.sidebar { grid-column:1; grid-row:1; min-height:100vh; background:linear-gradient(180deg,var(--p4-navy),#0a192d); color:#fff; padding:22px 18px; position:sticky; top:0; z-index:30; overflow:auto; }
.sidebar-header { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sidebar-brand { width:100%; }
.status-panel { margin-top:24px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px; }
.fleet-title, .sidebar > #vehicle-list { display:none !important; }
.p4-nav { display:grid; gap:7px; margin-top:24px; }
.p4-nav a { color:#cbd8e8; text-decoration:none; padding:11px 12px; border-radius:9px; font-weight:700; }
.p4-nav a:hover,.p4-nav a:first-child { color:#fff; background:rgba(255,255,255,.11); }
.map-area { grid-column:2; grid-row:1; min-width:0; min-height:100vh; padding:20px; display:grid; grid-template-columns:minmax(0,1fr) 310px; grid-template-rows:auto auto minmax(430px,58vh) auto; grid-template-areas:"head head" "kpis kpis" "map activity" "fleet fleet"; gap:16px; position:relative; }
.fleet-context-bar { grid-area:head; position:static !important; display:flex; align-items:center; gap:24px; padding:14px 18px; background:#fff; border:1px solid var(--p4-line); border-radius:14px; box-shadow:0 5px 18px rgba(32,56,85,.06); }
.dashboard-kpis { grid-area:kpis; position:static !important; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.kpi-card { background:#fff; border:1px solid var(--p4-line); border-radius:14px; padding:16px 18px; box-shadow:0 5px 18px rgba(32,56,85,.05); }
.kpi-card span { color:var(--p4-muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.kpi-card strong { display:block; margin-top:6px; font-size:28px; }
#position-map { grid-area:map; position:relative !important; inset:auto !important; width:100%; height:100%; min-height:430px; border:1px solid var(--p4-line); border-radius:16px; overflow:hidden; box-shadow:0 7px 24px rgba(32,56,85,.08); }
.alerts-dashboard-card { grid-area:activity; position:static !important; width:auto !important; max-height:none !important; overflow:auto; background:#fff; border:1px solid var(--p4-line); border-radius:16px; padding:16px; }
.alerts-dashboard-header h3::before { content:"Actividad y "; }
.topbar { grid-area:map; align-self:start; justify-self:stretch; position:relative !important; z-index:500; margin:12px; pointer-events:none; }
.topbar > * { pointer-events:auto; }
.map-message { grid-area:map; align-self:end; justify-self:center; z-index:500; margin:18px; }
.p4-fleet { grid-area:fleet; background:#fff; border:1px solid var(--p4-line); border-radius:16px; padding:16px; box-shadow:0 7px 24px rgba(32,56,85,.06); min-width:0; }
.p4-fleet-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:12px; }
.p4-fleet-head h3 { margin:0; }
.p4-filters { display:flex; gap:8px; flex-wrap:wrap; }
.p4-filters input,.p4-filters select { border:1px solid var(--p4-line); border-radius:9px; padding:9px 11px; background:#fff; color:var(--p4-text); }
.p4-table-head { display:grid; grid-template-columns:minmax(180px,2fr) 1fr 1fr 1fr 90px; gap:12px; padding:9px 14px; color:var(--p4-muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.p4-fleet #vehicle-list { display:grid !important; gap:7px; }
.p4-fleet .vehicle-card { width:100%; display:grid !important; grid-template-columns:minmax(180px,2fr) 1fr 1fr 1fr 90px; gap:12px; align-items:center; text-align:left; padding:12px 14px; border:1px solid var(--p4-line); border-radius:10px; background:#fff; }
.p4-fleet .vehicle-card:hover,.p4-fleet .vehicle-card.active { border-color:#90b7ff; background:#f7faff; }
.p4-cell { min-width:0; color:var(--p4-muted); }
.p4-speed { font-weight:800; color:var(--p4-text); }
.p4-detail-button { border:0; border-radius:8px; padding:8px; background:#eaf2ff; color:#185fc8; font-weight:800; cursor:pointer; }
.telemetry-card { display:none !important; }
.telemetry-card.p4-open { display:block !important; position:fixed !important; z-index:2000; right:24px; bottom:24px; width:min(360px,calc(100vw - 48px)); max-height:70vh; overflow:auto; background:#fff; border:1px solid var(--p4-line); border-radius:16px; padding:18px; box-shadow:0 24px 70px rgba(5,20,40,.28); }
.p4-close { float:right; border:0; background:#edf2f7; border-radius:50%; width:30px; height:30px; cursor:pointer; }
@media (max-width:1050px) { #app.app { grid-template-columns:210px minmax(0,1fr); } .map-area { grid-template-columns:1fr; grid-template-rows:auto auto 480px auto auto; grid-template-areas:"head" "kpis" "map" "activity" "fleet"; } }
@media (max-width:760px) { #app.app { display:block; } .sidebar { min-height:auto; position:relative; } .map-area { padding:12px; } .dashboard-kpis { grid-template-columns:repeat(2,1fr); } .fleet-context-bar { flex-wrap:wrap; } .p4-table-head { display:none; } .p4-fleet .vehicle-card { grid-template-columns:1fr 1fr; } }


/* ==========================================================
   P4-C1.5A.2.1 - MASTER LAYOUT ALIGNMENT FIX
   ========================================================== */


/* Contención general */

#app.app,
#app.app *,
#app.app *::before,
#app.app *::after {
    box-sizing: border-box;
}


/* Sidebar dentro de su columna */

#app.app > .sidebar {
    width: 248px !important;
    min-width: 248px !important;
    max-width: 248px !important;

    left: auto !important;
    right: auto !important;

    margin: 0 !important;

    transform: none !important;
}


/* Área principal sin invasión lateral */

#app.app > .map-area {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;

    overflow: visible !important;
}


/* Reset de desplazamientos heredados */

.map-area > .fleet-context-bar,
.map-area > .dashboard-kpis,
.map-area > .alerts-dashboard-card,
.map-area > #position-map,
.map-area > .topbar,
.map-area > .map-message,
.map-area > .p4-fleet {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    max-width: none !important;
}


/* Cabecera */

.map-area > .fleet-context-bar {
    position: static !important;

    width: 100% !important;

    margin: 0 !important;
}

.fleet-context-bar > .fleet-brand,
.fleet-context-bar > .fleet-selector,
.fleet-context-bar > .fleet-summary {
    position: static !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;
}


/* KPI */

.map-area > .dashboard-kpis {
    position: static !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.dashboard-kpis > .kpi-card {
    position: relative !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    left: auto !important;
    right: auto !important;

    margin: 0 !important;

    transform: none !important;
}


/* Mapa */

.map-area > #position-map {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    transform: none !important;
}


/* Actividad */

.map-area > .alerts-dashboard-card {
    position: static !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    transform: none !important;
}


/* Cabecera flotante del vehículo, arriba del mapa */

.map-area > .topbar {
    position: relative !important;

    align-self: start !important;
    justify-self: stretch !important;

    width: auto !important;

    margin: 12px !important;

    transform: none !important;
}


/* Tabla inferior */

.map-area > .p4-fleet {
    position: static !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    transform: none !important;
}


/* Adaptación de la barra lateral */

@media (max-width: 1050px) {

    #app.app > .sidebar {
        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;
    }
}


@media (max-width: 760px) {

    #app.app > .sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* ==========================================================
   FIN P4-C1.5A.2.1
   ========================================================== */



/* ==========================================================
   P4-C1.5A.2.2 - VEHICLE TABLE ROW FIX
   ========================================================== */

.p4-fleet .vehicle-card {
    grid-template-columns:
        minmax(220px, 2fr)
        minmax(120px, 1fr)
        minmax(100px, .8fr)
        minmax(170px, 1.2fr)
        90px !important;

    min-height: 74px !important;
    padding: 13px 16px !important;

    color: var(--p4-text) !important;
}

.p4-vehicle-main {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.p4-vehicle-code {
    overflow: hidden;

    color: var(--p4-text) !important;

    font-size: 14px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.p4-vehicle-description {
    overflow: hidden;

    color: var(--p4-muted) !important;

    font-size: 12px;
    font-weight: 500;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.p4-table-status {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--p4-text) !important;

    font-weight: 700;
}

.p4-table-status::before {
    content: "";

    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #94a3b8;

    box-shadow: 0 0 0 4px rgba(148, 163, 184, .12);
}

.p4-table-status[data-status="moving"]::before {
    background: #10b981;

    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}

.p4-table-status[data-status="online"]::before {
    background: #f59e0b;

    box-shadow: 0 0 0 4px rgba(245, 158, 11, .12);
}

.p4-table-status[data-status="offline"]::before {
    background: #94a3b8;
}

.p4-fleet .p4-speed,
.p4-table-time {
    color: var(--p4-text) !important;

    font-weight: 700;
}

.p4-fleet .p4-detail-button {
    width: 100%;

    color: #185fc8 !important;
}

.p4-fleet .vehicle-card.active {
    color: var(--p4-text) !important;
}

@media (max-width: 760px) {

    .p4-fleet .vehicle-card {
        grid-template-columns: 1fr 1fr !important;
    }

    .p4-vehicle-main {
        grid-column: 1 / -1;
    }
}

/* ==========================================================
   FIN P4-C1.5A.2.2
   ========================================================== */



/* ==========================================================
   P4-C1.5A.3 - COMPACT DENSITY
   ========================================================== */


/* ----------------------------------------------------------
   ESCALA GENERAL
   ---------------------------------------------------------- */

#app.app {
    grid-template-columns:
        200px minmax(0, 1fr) !important;

    font-size:
        13px;
}


/* ----------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------- */

#app.app > .sidebar {
    width:
        200px !important;

    min-width:
        200px !important;

    max-width:
        200px !important;

    padding:
        14px 12px !important;
}

.sidebar-header {
    gap:
        6px !important;
}

.sidebar-brand {
    min-height:
        0 !important;
}

.sidebar-brand-symbol {
    width:
        36px !important;

    height:
        36px !important;

    min-width:
        36px !important;

    font-size:
        17px !important;
}

.sidebar-brand-copy h2 {
    font-size:
        13px !important;
}

.sidebar-brand-copy p {
    margin-top:
        2px !important;

    font-size:
        10px !important;
}

.sidebar .logout-button {
    min-height:
        30px !important;

    padding:
        6px 8px !important;

    font-size:
        10px !important;
}

.status-panel {
    margin-top:
        16px !important;

    padding:
        9px 10px !important;

    border-radius:
        10px !important;
}

.status-row {
    min-height:
        25px !important;

    font-size:
        11px !important;
}

.status-row .pill {
    padding:
        3px 7px !important;

    font-size:
        9px !important;
}

.p4-nav {
    gap:
        4px !important;

    margin-top:
        16px !important;
}

.p4-nav a {
    padding:
        9px 10px !important;

    border-radius:
        7px !important;

    font-size:
        13px !important;
}


/* ----------------------------------------------------------
   ÁREA PRINCIPAL
   ---------------------------------------------------------- */

.map-area {
    padding:
        12px !important;

    gap:
        10px !important;

    grid-template-columns:
        minmax(0, 1fr) 260px !important;

    grid-template-rows:
        auto
        auto
        minmax(340px, 46vh)
        auto !important;
}


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

.fleet-context-bar {
    min-height:
        54px !important;

    gap:
        18px !important;

    padding:
        9px 13px !important;

    border-radius:
        11px !important;
}

.fleet-brand strong {
    font-size:
        12px !important;
}

.fleet-brand span,
.fleet-selector span,
.fleet-summary span {
    font-size:
        9px !important;
}

.fleet-selector strong {
    font-size:
        13px !important;
}

.fleet-summary {
    gap:
        8px !important;
}

.fleet-summary > div {
    min-width:
        58px !important;

    padding:
        6px 8px !important;

    border-radius:
        8px !important;
}

.fleet-summary strong {
    font-size:
        14px !important;
}


/* ----------------------------------------------------------
   KPI
   ---------------------------------------------------------- */

.dashboard-kpis {
    gap:
        10px !important;
}

.dashboard-kpis > .kpi-card {
    min-height:
        76px !important;

    height:
        auto !important;

    padding:
        11px 14px !important;

    border-radius:
        11px !important;
}

.kpi-card span {
    font-size:
        10px !important;
}

.kpi-card strong {
    margin-top:
        3px !important;

    font-size:
        24px !important;

    line-height:
        1 !important;
}


/* ----------------------------------------------------------
   MAPA Y ACTIVIDAD
   ---------------------------------------------------------- */

#position-map {
    min-height:
        340px !important;

    border-radius:
        12px !important;
}

.alerts-dashboard-card {
    padding:
        12px !important;

    border-radius:
        12px !important;
}

.alerts-dashboard-header {
    margin-bottom:
        10px !important;
}

.alerts-dashboard-header h3 {
    font-size:
        12px !important;
}

.alerts-dashboard-header span {
    font-size:
        9px !important;
}

.alert-item {
    padding:
        10px !important;

    border-radius:
        8px !important;
}

.alert-item-title {
    font-size:
        12px !important;
}

.alert-item-text,
.alert-item-time {
    font-size:
        10px !important;
}

.map-area > .topbar {
    margin:
        8px !important;

    padding:
        7px 9px !important;
}

.selected-name {
    font-size:
        13px !important;
}

.selected-meta,
.source-badge {
    font-size:
        9px !important;
}


/* ----------------------------------------------------------
   TABLA DE VEHÍCULOS
   ---------------------------------------------------------- */

.p4-fleet {
    padding:
        12px !important;

    border-radius:
        12px !important;
}

.p4-fleet-head {
    margin-bottom:
        8px !important;
}

.p4-fleet-head h3 {
    font-size:
        18px !important;
}

.p4-fleet-head small {
    font-size:
        11px !important;
}

.p4-filters input,
.p4-filters select {
    min-height:
        34px !important;

    padding:
        7px 9px !important;

    font-size:
        12px !important;
}

.p4-table-head {
    padding:
        7px 12px !important;

    font-size:
        9px !important;
}

.p4-fleet .vehicle-card {
    min-height:
        58px !important;

    padding:
        9px 12px !important;

    border-radius:
        8px !important;
}

.p4-vehicle-code {
    font-size:
        12px !important;
}

.p4-vehicle-description {
    font-size:
        10px !important;
}

.p4-table-status,
.p4-speed,
.p4-table-time {
    font-size:
        11px !important;
}

.p4-detail-button {
    padding:
        6px 8px !important;

    font-size:
        11px !important;
}


/* ----------------------------------------------------------
   PANEL DE DETALLE
   ---------------------------------------------------------- */

.telemetry-card.p4-open {
    right:
        16px !important;

    bottom:
        16px !important;

    width:
        min(320px, calc(100vw - 32px)) !important;

    padding:
        14px !important;

    border-radius:
        12px !important;
}

.telemetry-title {
    font-size:
        14px !important;
}

.telemetry-row {
    min-height:
        30px !important;

    padding:
        6px 0 !important;

    font-size:
        11px !important;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

    #app.app {
        grid-template-columns:
            180px minmax(0, 1fr) !important;
    }

    #app.app > .sidebar {
        width:
            180px !important;

        min-width:
            180px !important;

        max-width:
            180px !important;
    }

    .map-area {
        grid-template-columns:
            1fr !important;

        grid-template-rows:
            auto auto 360px auto auto !important;
    }
}


@media (max-width: 760px) {

    #app.app {
        display:
            block !important;
    }

    #app.app > .sidebar {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            none !important;
    }

    .map-area {
        padding:
            8px !important;

        gap:
            8px !important;
    }

    .dashboard-kpis {
        grid-template-columns:
            repeat(2, 1fr) !important;
    }
}


/* ==========================================================
   FIN P4-C1.5A.3
   ========================================================== */



/* ==========================================================
   P4-C1.5A.3.1 - SIDEBAR AND ROWS COMPACT
   ========================================================== */


/* Sidebar: 200px -> 180px */

#app.app {
    grid-template-columns:
        180px minmax(0, 1fr) !important;
}

#app.app > .sidebar {
    width:
        180px !important;

    min-width:
        180px !important;

    max-width:
        180px !important;

    padding:
        12px 10px !important;
}

.sidebar-brand-symbol {
    width:
        32px !important;

    height:
        32px !important;

    min-width:
        32px !important;

    font-size:
        15px !important;
}

.sidebar-brand-copy h2 {
    font-size:
        11px !important;
}

.sidebar-brand-copy p {
    font-size:
        9px !important;
}

.sidebar .logout-button {
    padding:
        5px 6px !important;

    font-size:
        9px !important;
}

.status-panel {
    padding:
        8px !important;
}

.status-row {
    font-size:
        10px !important;
}

.status-row .pill {
    padding:
        2px 5px !important;

    font-size:
        8px !important;
}

.p4-nav a {
    padding:
        8px 9px !important;

    font-size:
        12px !important;
}


/* Tabla: filas más bajas */

.p4-fleet {
    padding:
        10px !important;
}

.p4-fleet-head {
    margin-bottom:
        5px !important;
}

.p4-fleet-head h3 {
    font-size:
        16px !important;
}

.p4-fleet-head small {
    font-size:
        10px !important;
}

.p4-table-head {
    padding:
        5px 10px !important;
}

.p4-fleet #vehicle-list {
    gap:
        5px !important;
}

.p4-fleet .vehicle-card {
    min-height:
        48px !important;

    padding:
        6px 10px !important;

    border-radius:
        7px !important;
}

.p4-vehicle-main {
    gap:
        1px !important;
}

.p4-vehicle-code {
    font-size:
        11px !important;

    line-height:
        1.15 !important;
}

.p4-vehicle-description {
    font-size:
        9px !important;

    line-height:
        1.15 !important;
}

.p4-table-status,
.p4-speed,
.p4-table-time {
    font-size:
        10px !important;
}

.p4-table-status::before {
    width:
        7px !important;

    height:
        7px !important;
}

.p4-detail-button {
    padding:
        5px 7px !important;

    font-size:
        10px !important;
}


/* Mantener el responsive móvil */

@media (max-width: 760px) {

    #app.app > .sidebar {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            none !important;
    }
}


/* ==========================================================
   FIN P4-C1.5A.3.1
   ========================================================== */



/* ==========================================================
   P4-C1.5A.3.2 - COMPACT FLAT VEHICLE ROWS
   ========================================================== */


/* Menos espacio entre filas */

.p4-fleet #vehicle-list {
    gap:
        0 !important;

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


/* Filas de tabla, no tarjetas */

.p4-fleet .vehicle-card {
    min-height:
        43px !important;

    padding:
        5px 10px !important;

    border:
        0 !important;

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

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* Hover discreto */

.p4-fleet .vehicle-card:hover {
    background:
        #f7faff !important;
}


/* Vehículo seleccionado */

.p4-fleet .vehicle-card.active {
    border-left:
        3px solid var(--p4-accent) !important;

    background:
        #eef6ff !important;

    padding-left:
        7px !important;
}


/* Texto un poco más legible */

.p4-vehicle-code {
    font-size:
        12px !important;

    line-height:
        1.2 !important;
}

.p4-vehicle-description {
    margin-top:
        1px !important;

    font-size:
        10px !important;

    line-height:
        1.15 !important;
}

.p4-table-status,
.p4-speed,
.p4-table-time {
    font-size:
        11px !important;

    line-height:
        1.2 !important;
}


/* Botón más integrado */

.p4-detail-button {
    min-height:
        26px !important;

    padding:
        4px 8px !important;

    border:
        1px solid #d9e7fb !important;

    border-radius:
        6px !important;

    font-size:
        10px !important;

    background:
        #f3f7fd !important;
}

.p4-detail-button:hover {
    background:
        #e5effd !important;
}


/* Cabecera más próxima a las filas */

.p4-table-head {
    padding-top:
        4px !important;

    padding-bottom:
        4px !important;
}


/* ==========================================================
   FIN P4-C1.5A.3.2
   ========================================================== */



/* ==========================================================
   P4-C1.5A.4 - TELEMETRY ON DEMAND
   ========================================================== */


/* La franja repetida del vehículo desaparece del mapa */

.map-area > .topbar,
.map-area .topbar {
    display:
        none !important;
}


/* La telemetría permanece oculta hasta una acción explícita */

.map-area > .telemetry-card,
.map-area .telemetry-card {
    display:
        none !important;
}


/* Modal de telemetría bajo demanda */

.map-area > .telemetry-card.p4-open,
.map-area .telemetry-card.p4-open {
    display:
        block !important;

    position:
        fixed !important;

    z-index:
        3000 !important;

    right:
        18px !important;

    bottom:
        18px !important;

    width:
        min(320px, calc(100vw - 36px)) !important;

    max-height:
        calc(100vh - 36px) !important;

    overflow:
        auto !important;

    padding:
        15px !important;

    border:
        1px solid var(--p4-line) !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 24px 70px
        rgba(5, 20, 40, .28) !important;
}


/* Botón nuevo en la ficha derecha */

.vehicle-action-button.p4-telemetry-action {
    border-color:
        #bcd6fb !important;

    background:
        #eef6ff !important;

    color:
        #185fc8 !important;
}

.vehicle-action-button.p4-telemetry-action:hover {
    background:
        #dfeeff !important;
}


/* ==========================================================
   FIN P4-C1.5A.4
   ========================================================== */



/* ==========================================================
   P4-C1.5A.4.1 - ALERTS PANEL HEIGHT FIX
   ========================================================== */


/* El panel usa toda la altura de su celda */

.map-area > .alerts-dashboard-card {
    display:
        flex !important;

    flex-direction:
        column !important;

    min-height:
        0 !important;

    height:
        100% !important;

    max-height:
        none !important;

    overflow:
        hidden !important;
}


/* La cabecera no se comprime */

.alerts-dashboard-card .alerts-dashboard-header {
    flex:
        0 0 auto !important;
}


/* La lista ocupa todo el espacio restante */

.alerts-dashboard-card .alerts-list {
    flex:
        1 1 auto !important;

    min-height:
        0 !important;

    height:
        auto !important;

    max-height:
        none !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    padding-right:
        3px !important;

    scrollbar-width:
        thin;
}


/* Cada alerta mantiene su altura completa */

.alerts-dashboard-card .alert-item {
    display:
        block !important;

    flex:
        0 0 auto !important;

    min-height:
        0 !important;

    height:
        auto !important;

    max-height:
        none !important;

    overflow:
        visible !important;

    margin-bottom:
        8px !important;
}


/* La última alerta no deja espacio adicional */

.alerts-dashboard-card .alert-item:last-child {
    margin-bottom:
        0 !important;
}


/* Scroll discreto en navegadores WebKit */

.alerts-dashboard-card .alerts-list::-webkit-scrollbar {
    width:
        6px;
}

.alerts-dashboard-card .alerts-list::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        #cbd5e1;
}

.alerts-dashboard-card .alerts-list::-webkit-scrollbar-track {
    background:
        transparent;
}


/* ==========================================================
   FIN P4-C1.5A.4.1
   ========================================================== */



/* ==========================================================
   P4-C1.5A.4.2 - ALERT ITEM CONTENT FIX
   ========================================================== */


/* Separación uniforme de la lista */

.alerts-dashboard-card .alerts-list {
    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        6px !important;
}


/* Cada alerta contiene completamente sus tres líneas */

.alerts-dashboard-card .alert-item {
    position:
        relative !important;

    display:
        grid !important;

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

    grid-auto-rows:
        auto !important;

    align-content:
        start !important;

    gap:
        2px !important;

    flex:
        0 0 auto !important;

    min-height:
        66px !important;

    height:
        auto !important;

    padding:
        8px 10px !important;

    margin:
        0 !important;

    overflow:
        hidden !important;

    border-radius:
        8px !important;
}


/* Anular posiciones heredadas */

.alerts-dashboard-card .alert-item-title,
.alerts-dashboard-card .alert-item-text,
.alerts-dashboard-card .alert-item-time {
    position:
        static !important;

    inset:
        auto !important;

    width:
        auto !important;

    min-width:
        0 !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        none !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}


/* Jerarquía tipográfica compacta */

.alerts-dashboard-card .alert-item-title {
    font-size:
        11px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;
}

.alerts-dashboard-card .alert-item-text {
    font-size:
        10px !important;

    line-height:
        1.2 !important;
}

.alerts-dashboard-card .alert-item-time {
    font-size:
        9px !important;

    line-height:
        1.2 !important;

    color:
        var(--p4-muted) !important;
}


/* El espaciado se controla mediante gap */

.alerts-dashboard-card .alert-item:last-child {
    margin:
        0 !important;
}


/* ==========================================================
   FIN P4-C1.5A.4.2
   ========================================================== */



/* ==========================================================
   P4-C1.5B - OPERATIONAL STATES AND FILTERS
   ========================================================== */


/* En movimiento */

.p4-table-status[data-status="moving"] {
    color:
        #07875f !important;
}

.p4-table-status[data-status="moving"]::before {
    background:
        #10b981 !important;

    box-shadow:
        0 0 0 4px
        rgba(16, 185, 129, .12) !important;
}


/* Parado con motor */

.p4-table-status[data-status="idle"] {
    color:
        #a16207 !important;
}

.p4-table-status[data-status="idle"]::before {
    background:
        #f59e0b !important;

    box-shadow:
        0 0 0 4px
        rgba(245, 158, 11, .12) !important;
}


/* Parado */

.p4-table-status[data-status="stopped"] {
    color:
        #2563a8 !important;
}

.p4-table-status[data-status="stopped"]::before {
    background:
        #60a5fa !important;

    box-shadow:
        0 0 0 4px
        rgba(96, 165, 250, .12) !important;
}


/* Sin señal */

.p4-table-status[data-status="offline"] {
    color:
        #64748b !important;
}

.p4-table-status[data-status="offline"]::before {
    background:
        #94a3b8 !important;

    box-shadow:
        0 0 0 4px
        rgba(148, 163, 184, .12) !important;
}


/* Velocidad no disponible por falta de señal */

.p4-speed.p4-speed-stale {
    color:
        #94a3b8 !important;
}


/* ==========================================================
   FIN P4-C1.5B
   ========================================================== */



/* ==========================================================
   P4-C1.5B.1 - FILTERED ROW VISIBILITY FIX
   ========================================================== */

/*
 * Las filas usan display:grid !important.
 * Esta regla permite que el atributo hidden aplicado
 * por los filtros tenga prioridad visual.
 */

.p4-fleet .vehicle-card[hidden] {
    display:
        none !important;
}


/* ==========================================================
   FIN P4-C1.5B.1
   ========================================================== */



/* ==========================================================
   P4-C1.5C - SELECTED VEHICLE MAP STATE
   ========================================================== */


/* Movimiento */

.vehicle-marker-modern.p4-map-moving {
    --marker-color:
        #10b981 !important;
}


/* Parado con motor */

.vehicle-marker-modern.p4-map-idle {
    --marker-color:
        #f59e0b !important;
}


/* Parado */

.vehicle-marker-modern.p4-map-stopped {
    --marker-color:
        #3b82f6 !important;
}


/* Sin señal */

.vehicle-marker-modern.p4-map-offline {
    --marker-color:
        #94a3b8 !important;

    opacity:
        .82;
}

.vehicle-marker-modern.p4-map-offline
.vehicle-marker-ring {
    animation:
        none !important;

    opacity:
        .45 !important;
}

.vehicle-marker-modern.p4-map-offline
.vehicle-marker-icon {
    filter:
        grayscale(.45);
}


/* Etiqueta de última posición histórica */

.map-message.p4-historical-position {
    border:
        1px solid #d6dee8 !important;

    background:
        rgba(248, 250, 252, .96) !important;

    color:
        #64748b !important;
}


/* ==========================================================
   FIN P4-C1.5C
   ========================================================== */



/* ==========================================================
   P4-C1.5C.1 - MARKER RING CENTERING FIX
   ========================================================== */


/* Centro geométrico común */

.vehicle-marker-modern {
    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}


/* Halo exterior: 50 × 50 */

.vehicle-marker-modern::before {
    top:
        50% !important;

    left:
        50% !important;

    right:
        auto !important;

    bottom:
        auto !important;

    margin-top:
        -25px !important;

    margin-left:
        -25px !important;

    transform-origin:
        center center !important;
}


/*
 * Aro: 46 × 46.
 * Se centra mediante márgenes para que la animación
 * pueda seguir usando transform:scale() sin desplazarlo.
 */

.vehicle-marker-modern .vehicle-marker-ring {
    top:
        50% !important;

    left:
        50% !important;

    right:
        auto !important;

    bottom:
        auto !important;

    margin-top:
        -23px !important;

    margin-left:
        -23px !important;

    transform-origin:
        center center !important;
}


/* Icono central */

.vehicle-marker-modern .vehicle-marker-icon {
    top:
        auto !important;

    left:
        auto !important;

    right:
        auto !important;

    bottom:
        auto !important;

    margin:
        0 !important;

    flex:
        0 0 auto !important;

    transform:
        none !important;
}


/* ==========================================================
   FIN P4-C1.5C.1
   ========================================================== */



/* ==========================================================
   P4-C1.5D - MULTI VEHICLE FLEET MAP V1
   ========================================================== */


/* Marcadores secundarios de la flota */

.p4-fleet-map-marker {
    transition:
        opacity .18s ease,
        filter .18s ease;
}

.p4-fleet-map-marker
.vehicle-marker-modern {
    transform:
        scale(.82);
}


/* El vehículo seleccionado conserva mayor presencia */

.p4-fleet-map-marker.p4-selected
.vehicle-marker-modern {
    transform:
        scale(1);
}


/* Botón encuadrar flota */

.p4-fit-fleet-control {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border:
        0;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #18324b;

    font-size:
        16px;

    cursor:
        pointer;

    box-shadow:
        0 2px 8px
        rgba(15, 35, 60, .18);
}

.p4-fit-fleet-control:hover {
    background:
        #eef6ff;
}


/* Indicador del número de marcadores visibles */

.p4-map-vehicle-count {
    padding:
        5px 8px;

    border:
        1px solid #dfe7f0;

    border-radius:
        7px;

    background:
        rgba(255, 255, 255, .94);

    color:
        #52657a;

    font-size:
        10px;

    font-weight:
        700;

    box-shadow:
        0 2px 8px
        rgba(15, 35, 60, .12);
}


/* ==========================================================
   FIN P4-C1.5D
   ========================================================== */


/* ==========================================================
   P4-C1.5E - VEHICLE ALERTS
   ========================================================== */

.p4-alert-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding: 7px 8px;
    border: 1px solid #d9e4f0;
    border-radius: 8px;
    background: #eef7ff;
}

.p4-alert-filter-copy {
    min-width: 0;
    color: #18324d;
    font-size: 11px;
    line-height: 1.3;
}

.p4-alert-filter-copy strong {
    display: block;
    overflow: hidden;
    color: #10253d;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p4-alert-filter-clear {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid #cbdced;
    border-radius: 7px;
    background: #ffffff;
    color: #1668c7;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.p4-alert-filter-clear:hover {
    background: #e7f2ff;
}

.alert-item.p4-alert-clickable {
    width: 100%;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.alert-item.p4-alert-clickable:hover {
    border-color: #75bceb;
    background: #f3f9ff;
}

.alert-item.p4-alert-clickable:focus-visible {
    outline: 2px solid #159edf;
    outline-offset: 2px;
}

.p4-alert-empty {
    padding: 18px 10px;
    color: #73849a;
    font-size: 12px;
    text-align: center;
}

/* ==========================================================
   P4-C1.5F - ALERT DETAIL AND CLASSIFICATION
   ========================================================== */

.p4-alert-card {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    width: 100%;
    min-height: 70px;
    padding: 9px;
    border: 1px solid #dce5ef;
    border-left: 4px solid #20a4df;
    border-radius: 9px;
    background: #f8fafc;
    color: #14263d;
    font: inherit;
    text-align: left;
}

button.p4-alert-card {
    appearance: none;
    cursor: pointer;
}

button.p4-alert-card:hover {
    border-color: #8ec8ed;
    background: #f0f8ff;
}

button.p4-alert-card:focus-visible {
    outline: 2px solid #168fd0;
    outline-offset: 2px;
}

.p4-alert-card + .p4-alert-card {
    margin-top: 7px;
}

.p4-alert-card.p4-severity-critical,
.p4-alert-card.p4-severity-high {
    border-left-color: #dc3545;
    background: #fff7f7;
}

.p4-alert-card.p4-severity-warning,
.p4-alert-card.p4-severity-medium {
    border-left-color: #f0a202;
    background: #fffbf1;
}

.p4-alert-card.p4-severity-info,
.p4-alert-card.p4-severity-low {
    border-left-color: #20a4df;
}

.p4-alert-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e6f4fc;
    font-size: 14px;
}

.p4-severity-critical .p4-alert-icon,
.p4-severity-high .p4-alert-icon {
    background: #ffe3e6;
}

.p4-severity-warning .p4-alert-icon,
.p4-severity-medium .p4-alert-icon {
    background: #fff0cc;
}

.p4-alert-content {
    min-width: 0;
}

.p4-alert-vehicle {
    overflow: hidden;
    color: #122238;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p4-alert-plate {
    margin-top: 1px;
    color: #74859a;
    font-size: 10px;
    line-height: 1.2;
}

.p4-alert-description {
    margin-top: 4px;
    color: #40536a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
}

.p4-alert-date {
    margin-top: 3px;
    color: #8291a5;
    font-size: 10px;
    line-height: 1.2;
}

.p4-alert-severity {
    align-self: start;
    padding: 3px 5px;
    border-radius: 999px;
    background: #e7f4fb;
    color: #1978a8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
}

.p4-severity-critical .p4-alert-severity,
.p4-severity-high .p4-alert-severity {
    background: #ffe0e3;
    color: #b42333;
}

.p4-severity-warning .p4-alert-severity,
.p4-severity-medium .p4-alert-severity {
    background: #ffedbf;
    color: #9a6200;
}

/* ==========================================================
   P4-C1.5F.1 - COMPACT ALERT CARDS
   ========================================================== */

.p4-alert-card {
    grid-template-columns:
        26px minmax(0, 1fr) !important;

    gap:
        7px !important;

    min-height:
        66px !important;

    padding:
        8px !important;
}

.p4-alert-icon {
    width:
        26px !important;

    height:
        26px !important;

    font-size:
        13px !important;
}

.p4-alert-content {
    min-width:
        0 !important;

    padding-right:
        40px !important;
}

.p4-alert-vehicle {
    font-size:
        12px !important;
}

.p4-alert-plate {
    font-size:
        9px !important;
}

.p4-alert-description {
    margin-top:
        3px !important;

    font-size:
        10px !important;
}

.p4-alert-date {
    margin-top:
        2px !important;

    overflow:
        hidden !important;

    font-size:
        9px !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}

.p4-alert-severity {
    position:
        absolute !important;

    top:
        8px !important;

    right:
        7px !important;

    min-width:
        30px !important;

    padding:
        3px 4px !important;

    font-size:
        0 !important;

    text-align:
        center !important;
}

.p4-alert-severity::after {
    font-size:
        7px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .04em !important;

    content:
        "INFO";
}

.p4-severity-critical .p4-alert-severity::after {
    content:
        "CRÍTICA";
}

.p4-severity-high .p4-alert-severity::after {
    content:
        "ALTA";
}

.p4-severity-warning .p4-alert-severity::after,
.p4-severity-medium .p4-alert-severity::after {
    content:
        "AVISO";
}

.p4-severity-low .p4-alert-severity::after {
    content:
        "BAJA";
}

/* ==========================================================
   P4-C1.5G - SIDEBAR NAVIGATION
   ========================================================== */

.sidebar a[data-p4-nav] {
    position: relative;
    cursor: pointer;
    transition:
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.sidebar a[data-p4-nav]:hover {
    transform: translateX(2px);
}

.sidebar a[data-p4-nav].p4-nav-active {
    background: #2b405b !important;
    color: #ffffff !important;
}

.sidebar a[data-p4-nav].p4-nav-active::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #20a4df;
    content: "";
}

#position-map,
#p4-fleet,
#vehicle-list,
#alerts-list {
    scroll-margin-top: 14px;
}

.p4-navigation-focus {
    animation:
        p4-navigation-highlight 1.1s ease;
}

@keyframes p4-navigation-highlight {
    0% {
        box-shadow:
            0 0 0 0 rgba(32, 164, 223, .42);
    }

    45% {
        box-shadow:
            0 0 0 4px rgba(32, 164, 223, .18);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(32, 164, 223, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar a[data-p4-nav],
    .p4-navigation-focus {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================
   P4-C1.5H - RESPONSIVE LAYOUT V1
   Solo afecta a tablet vertical y móvil.
   ========================================================== */

@media (max-width: 760px) {

    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    #app.app {
        display: block !important;
        width: 100% !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    #app.app > .sidebar {
        position: relative !important;
        top: auto !important;
        z-index: 100 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 8px !important;
        overflow: visible !important;
    }

    .sidebar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 58px !important;
        padding: 8px !important;
    }

    .sidebar-brand {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .sidebar-brand-symbol {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 17px !important;
    }

    .sidebar-brand-copy h2 {
        overflow: hidden !important;
        font-size: 13px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .sidebar-brand-copy p {
        font-size: 10px !important;
    }

    .sidebar-header .logout-button {
        min-height: 32px !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
    }

    .sidebar .status-panel {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 7px 8px !important;
    }

    .sidebar .status-row {
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 10px !important;
    }

    .sidebar a[data-p4-nav] {
        display: inline-flex !important;
        flex: 1 1 0 !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 7px 5px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        text-align: center !important;
        transform: none !important;
    }

    .sidebar a[data-p4-nav].p4-nav-active::before {
        top: auto !important;
        right: 10px !important;
        bottom: 0 !important;
        left: 10px !important;
        width: auto !important;
        height: 3px !important;
        border-radius: 3px 3px 0 0 !important;
    }

    .sidebar:has(a[data-p4-nav]) {
        padding-bottom: 8px !important;
    }

    .sidebar a[data-p4-nav]:first-of-type {
        margin-left: 0 !important;
    }

    .map-area {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto 340px auto auto !important;
        grid-template-areas:
            "head"
            "kpis"
            "map"
            "activity"
            "fleet" !important;
        gap: 9px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 9px !important;
    }

    .fleet-context-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        min-height: 0 !important;
        padding: 10px !important;
    }

    .fleet-brand {
        min-width: 0 !important;
    }

    .fleet-brand h1,
    .fleet-brand h2 {
        overflow: hidden !important;
        font-size: 13px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .fleet-brand p {
        font-size: 9px !important;
    }

    .fleet-selector {
        min-width: 0 !important;
    }

    .fleet-summary {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
    }

    .fleet-summary > * {
        min-width: 0 !important;
        padding: 5px !important;
    }

    .dashboard-kpis {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .dashboard-kpis > * {
        min-width: 0 !important;
        min-height: 72px !important;
        padding: 10px !important;
        border-radius: 11px !important;
    }

    .dashboard-kpis strong {
        font-size: 25px !important;
    }

    #position-map {
        width: 100% !important;
        height: 340px !important;
        min-height: 340px !important;
        border-radius: 12px !important;
    }

    .alerts-dashboard-card {
        width: 100% !important;
        min-width: 0 !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        padding: 11px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    #alerts-list {
        height: calc(100% - 42px) !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .p4-fleet {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .p4-fleet-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .p4-fleet-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 120px !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .p4-fleet-controls input,
    .p4-fleet-controls select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        font-size: 12px !important;
    }

    .p4-table-head {
        display: none !important;
    }

    .p4-fleet #vehicle-list {
        width: 100% !important;
        min-width: 0 !important;
    }

    .p4-fleet .vehicle-card {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(90px, .8fr) !important;
        gap: 5px 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 9px 10px !important;
        border-radius: 8px !important;
    }

    .p4-fleet .vehicle-card > * {
        min-width: 0 !important;
    }

    .p4-fleet .vehicle-name,
    .p4-fleet .p4-cell-primary {
        font-size: 12px !important;
    }

    .p4-fleet .vehicle-info,
    .p4-fleet .p4-cell {
        font-size: 10px !important;
    }

    #vehicle-detail-panel,
    #history-panel {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
        z-index: 3000 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        padding: 14px !important;
        border-radius: 14px !important;
        overflow-y: auto !important;
    }

    .telemetry-card.p4-open {
        top: auto !important;
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 70vh !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 480px) {

    .map-area {
        grid-template-rows:
            auto auto 300px auto auto !important;
        padding: 7px !important;
    }

    .dashboard-kpis {
        gap: 6px !important;
    }

    .dashboard-kpis > * {
        min-height: 65px !important;
        padding: 8px !important;
    }

    .dashboard-kpis strong {
        font-size: 22px !important;
    }

    #position-map {
        height: 300px !important;
        min-height: 300px !important;
    }

    .alerts-dashboard-card {
        height: 280px !important;
        min-height: 280px !important;
        max-height: 280px !important;
    }

    .p4-fleet-controls {
        grid-template-columns:
            minmax(0, 1fr) 105px !important;
    }

    .p4-fleet .vehicle-card {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(80px, .7fr) !important;
    }

    .p4-alert-card {
        min-height: 62px !important;
    }
}

/* ==========================================================
   P4-C1.5H.1 - RESPONSIVE VEHICLE PANEL FIX
   ========================================================== */

/*
 * Tablet y ventanas estrechas:
 * recuperamos el comportamiento de panel lateral.
 */
@media (min-width: 481px) and (max-width: 760px) {

    #vehicle-detail-panel {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        left: auto !important;

        width:
            min(390px, calc(100vw - 90px)) !important;

        min-width:
            320px !important;

        max-width:
            390px !important;

        height:
            auto !important;

        max-height:
            calc(100dvh - 16px) !important;

        padding:
            14px !important;

        border-radius:
            14px !important;

        overflow-y:
            auto !important;

        overscroll-behavior:
            contain !important;
    }
}

/*
 * Móvil real:
 * la ficha funciona como panel inferior y deja visible
 * una parte del dashboard para mantener el contexto.
 */
@media (max-width: 480px) {

    #vehicle-detail-panel {
        position: fixed !important;
        top: auto !important;
        right: 7px !important;
        bottom: 7px !important;
        left: 7px !important;

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        height:
            auto !important;

        max-height:
            76dvh !important;

        padding:
            13px !important;

        border-radius:
            15px !important;

        overflow-y:
            auto !important;

        overscroll-behavior:
            contain !important;
    }

    #vehicle-detail-panel > :first-child {
        position:
            sticky !important;

        top:
            0 !important;

        z-index:
            2 !important;
    }

    #vehicle-detail-panel .vehicle-action-button {
        min-height:
            36px !important;

        margin:
            2px !important;

        padding:
            6px 8px !important;

        font-size:
            10px !important;
    }
}

/* ==========================================================
   P4-C1.5H.2 - MOBILE VEHICLE BOTTOM SHEET
   ========================================================== */

@media (max-width: 760px) {

    #vehicle-detail-panel {
        position: fixed !important;
        top: auto !important;
        right: 7px !important;
        bottom: 7px !important;
        left: 7px !important;

        z-index:
            3000 !important;

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            62dvh !important;

        padding:
            13px !important;

        border:
            1px solid #d7e2ed !important;

        border-radius:
            16px !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        overscroll-behavior:
            contain !important;

        box-shadow:
            0 -14px 45px rgba(5, 20, 40, .24) !important;
    }

    #vehicle-detail-panel::before {
        display:
            block;

        width:
            38px;

        height:
            4px;

        margin:
            0 auto 8px;

        border-radius:
            999px;

        background:
            #cbd7e4;

        content:
            "";
    }

    #vehicle-detail-panel .vehicle-panel-header {
        position:
            sticky !important;

        top:
            -13px !important;

        z-index:
            5 !important;

        margin:
            -5px -2px 5px !important;

        padding:
            5px 2px 9px !important;

        background:
            #ffffff !important;
    }

    #vehicle-detail-panel .vehicle-panel-section {
        padding-top:
            10px !important;

        padding-bottom:
            10px !important;
    }

    #vehicle-detail-panel .vehicle-action-button {
        min-height:
            34px !important;

        margin:
            2px !important;

        padding:
            6px 8px !important;

        font-size:
            10px !important;
    }
}

@media (max-width: 480px) {

    #vehicle-detail-panel {
        max-height:
            68dvh !important;
    }
}

/* ==========================================================
   P4-C1.5H.3 - COMPACT MOBILE HEADER
   ========================================================== */

@media (max-width: 760px) {

    #app.app > .sidebar {
        display:
            flex !important;

        flex-direction:
            column !important;

        gap:
            6px !important;

        padding:
            7px !important;
    }

    .sidebar-header {
        display:
            flex !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        gap:
            6px !important;

        width:
            100% !important;

        min-height:
            54px !important;

        margin:
            0 !important;

        padding:
            7px !important;
    }

    .sidebar-header .sidebar-brand {
        display:
            flex !important;

        flex:
            1 1 auto !important;

        align-items:
            center !important;

        min-width:
            0 !important;

        width:
            auto !important;

        margin:
            0 !important;
    }

    .sidebar-header .sidebar-brand-copy {
        min-width:
            0 !important;
    }

    .sidebar-header .sidebar-brand-copy h2 {
        overflow:
            hidden !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        font-size:
            12px !important;

        text-overflow:
            ellipsis !important;

        white-space:
            nowrap !important;
    }

    .sidebar-header .sidebar-brand-copy p {
        overflow:
            hidden !important;

        margin:
            2px 0 0 !important;

        font-size:
            9px !important;

        text-overflow:
            ellipsis !important;

        white-space:
            nowrap !important;
    }

    .sidebar-header #admin-button,
    .sidebar-header #logout-button,
    .sidebar-header .logout-button {
        flex:
            0 0 auto !important;

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        min-height:
            32px !important;

        margin:
            0 !important;

        padding:
            5px 7px !important;

        font-size:
            9px !important;

        white-space:
            nowrap !important;
    }

    .sidebar .status-panel {
        width:
            100% !important;

        min-height:
            38px !important;

        margin:
            0 !important;

        padding:
            6px 8px !important;
    }

    /*
     * El menú se crea dinámicamente. Seleccionamos el
     * contenedor que posee directamente los tres enlaces.
     */
    .sidebar > *:has(> a[data-p4-nav]) {
        display:
            flex !important;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        align-items:
            stretch !important;

        gap:
            5px !important;

        width:
            100% !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }

    .sidebar > *:has(> a[data-p4-nav]) > a[data-p4-nav] {
        display:
            inline-flex !important;

        flex:
            1 1 0 !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            auto !important;

        min-width:
            0 !important;

        min-height:
            38px !important;

        margin:
            0 !important;

        padding:
            6px 4px !important;

        border-radius:
            8px !important;

        font-size:
            10px !important;

        line-height:
            1.1 !important;

        text-align:
            center !important;

        white-space:
            nowrap !important;
    }
}

@media (max-width: 430px) {

    .sidebar-header .sidebar-brand-symbol {
        width:
            34px !important;

        height:
            34px !important;

        min-width:
            34px !important;
    }

    .sidebar-header #admin-button {
        display:
            none !important;
    }

    .sidebar > *:has(> a[data-p4-nav]) > a[data-p4-nav] {
        font-size:
            9px !important;
    }
}

/* ==========================================================
   P4-C1.5H.5 - MOBILE SECTIONS SCROLL FIX
   ========================================================== */

@media (max-width: 760px) {

    html,
    body,
    #app.app,
    .map-area {
        touch-action:
            pan-y !important;
    }

    html,
    body {
        overflow-y:
            auto !important;

        overscroll-behavior-y:
            auto !important;

        -webkit-overflow-scrolling:
            touch;
    }

    #app.app {
        height:
            auto !important;

        max-height:
            none !important;

        overflow-x:
            hidden !important;

        overflow-y:
            visible !important;
    }

    .map-area {
        height:
            auto !important;

        max-height:
            none !important;

        overflow:
            visible !important;
    }

    .alerts-dashboard-card {
        overflow:
            hidden !important;
    }

    #alerts-list {
        height:
            calc(100% - 42px) !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        touch-action:
            pan-y !important;

        overscroll-behavior:
            contain !important;

        -webkit-overflow-scrolling:
            touch;
    }

    .p4-fleet,
    .p4-fleet #vehicle-list {
        height:
            auto !important;

        max-height:
            none !important;

        overflow-x:
            hidden !important;

        overflow-y:
            visible !important;

        touch-action:
            pan-y !important;
    }

    #alerts-list,
    #p4-fleet,
    #vehicle-list {
        scroll-margin-top:
            8px !important;
    }
}

/* ==========================================================
   P4-C2.1 - LOGIN VISUAL V2
   ========================================================== */

.login-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: grid !important;
    grid-template-columns:
        minmax(420px, 1.08fr)
        minmax(420px, .92fr) !important;
    width: 100% !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    background: #f4f8fc !important;
    overflow: auto !important;
}

.login-overlay.hidden {
    display: none !important;
}

.p4-login-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    min-height: 100dvh;
    padding: clamp(34px, 5vw, 72px);
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(37, 174, 232, .24),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(37, 174, 232, .15),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #071a31 0%,
            #0b2747 55%,
            #0c345d 100%
        );
    color: #ffffff;
    overflow: hidden;
}

.p4-login-visual::before,
.p4-login-visual::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.p4-login-visual::before {
    right: -170px;
    bottom: -210px;
    width: 520px;
    height: 520px;
}

.p4-login-visual::after {
    right: -75px;
    bottom: -110px;
    width: 320px;
    height: 320px;
}

.p4-login-brand,
.p4-login-copy,
.p4-login-foot {
    position: relative;
    z-index: 1;
}

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

.p4-login-brand-symbol {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #20a4df;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    box-shadow:
        0 10px 30px rgba(32, 164, 223, .3);
}

.p4-login-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.p4-login-brand-copy strong {
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.03em;
}

.p4-login-brand-copy span {
    color: #9db4ca;
    font-size: 11px;
}

.p4-login-copy {
    width: min(540px, 100%);
    margin: auto 0;
    padding: 55px 0;
}

.p4-login-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: #6bd2ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.p4-login-kicker::before {
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: #20a4df;
    content: "";
}

.p4-login-copy h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.04;
}

.p4-login-copy > p {
    width: min(460px, 100%);
    margin: 20px 0 0;
    color: #b8cada;
    font-size: 15px;
    line-height: 1.6;
}

.p4-login-features {
    display: grid;
    gap: 12px;
    margin-top: 30px;
}

.p4-login-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d9e6f0;
    font-size: 13px;
}

.p4-login-feature-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(107, 210, 255, .24);
    border-radius: 8px;
    background: rgba(32, 164, 223, .1);
    font-size: 12px;
}

.p4-login-foot {
    color: #819bb2;
    font-size: 10px;
}

.login-card {
    align-self: center !important;
    justify-self: center !important;
    display: block !important;
    width: min(410px, calc(100% - 48px)) !important;
    max-width: 410px !important;
    margin: 36px auto !important;
    padding: 34px !important;
    border: 1px solid #dce6f0 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow:
        0 22px 65px rgba(28, 58, 90, .13) !important;
}

.login-card .brand-login {
    margin: 0 0 28px !important;
}

.login-card .brand-logo-placeholder {
    justify-content: center !important;
}

.login-card .brand-symbol-placeholder {
    width: 46px !important;
    height: 46px !important;
    font-size: 21px !important;
}

.login-card .brand-wordmark-placeholder strong {
    font-size: 17px !important;
}

.login-card .brand-wordmark-placeholder span {
    margin-top: 4px !important;
    font-size: 10px !important;
}

.login-card h1 {
    margin: 0 !important;
    color: #10233b !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
    text-align: left !important;
}

.login-card .login-subtitle {
    margin: 7px 0 27px !important;
    color: #718299 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.login-card label {
    display: block !important;
    margin: 0 0 17px !important;
    color: #30445c !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

.login-card input {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    margin: 7px 0 0 !important;
    padding: 0 13px !important;
    border: 1px solid #cfdae6 !important;
    border-radius: 10px !important;
    outline: none !important;
    background: #f9fbfd !important;
    color: #13283f !important;
    font-size: 13px !important;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease !important;
}

.login-card input:hover {
    border-color: #aec3d7 !important;
}

.login-card input:focus {
    border-color: #20a4df !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 3px rgba(32, 164, 223, .13) !important;
}

.p4-password-wrapper {
    position: relative;
    display: block;
    margin-top: 7px;
}

.p4-password-wrapper input {
    margin-top: 0 !important;
    padding-right: 48px !important;
}

.p4-password-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    display: grid;
    place-items: center;
    width: 34px !important;
    height: 32px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #657b92 !important;
    font-size: 15px !important;
    box-shadow: none !important;
    transform: translateY(-50%);
    cursor: pointer;
}

.p4-password-toggle:hover {
    background: #edf4fa !important;
}

#login-submit {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    min-height: 46px !important;
    margin: 7px 0 0 !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            135deg,
            #159edf,
            #087cc5
        ) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow:
        0 10px 24px rgba(21, 158, 223, .2) !important;
    cursor: pointer;
}

#login-submit:hover:not(:disabled) {
    background:
        linear-gradient(
            135deg,
            #0d91d2,
            #066eb2
        ) !important;
    transform: translateY(-1px);
}

#login-submit:disabled {
    opacity: .72 !important;
    cursor: wait !important;
}

.login-form-loading #login-submit::before {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: p4-login-spin .7s linear infinite;
    content: "";
}

@keyframes p4-login-spin {
    to {
        transform: rotate(360deg);
    }
}

.login-error {
    min-height: 17px !important;
    margin: 13px 0 0 !important;
    padding: 0 !important;
    color: #c43d4d !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

.login-error:not(:empty) {
    padding: 9px 10px !important;
    border: 1px solid #f1c7cd !important;
    border-radius: 8px !important;
    background: #fff4f5 !important;
}

.p4-login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 18px;
    color: #8796a8;
    font-size: 9px;
    text-align: center;
}

@media (max-width: 900px) {

    .login-overlay {
        grid-template-columns:
            minmax(0, 1fr) !important;
        place-items: center !important;
        padding: 22px !important;
        background:
            radial-gradient(
                circle at top left,
                rgba(32, 164, 223, .13),
                transparent 35%
            ),
            #f3f7fb !important;
    }

    .p4-login-visual {
        display: none !important;
    }

    .login-card {
        width: min(410px, 100%) !important;
        margin: auto !important;
    }
}

@media (max-width: 480px) {

    .login-overlay {
        align-items: center !important;
        padding: 12px !important;
    }

    .login-card {
        width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 15px !important;
    }

    .login-card .brand-login {
        margin-bottom: 22px !important;
    }

    .login-card h1 {
        font-size: 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    #login-submit,
    .login-card input {
        transition: none !important;
    }

    .login-form-loading #login-submit::before {
        animation-duration: 1.4s;
    }
}


/* ==========================================================
   P4-C2.1.1 - LOGIN REFERENCE ALIGNMENT
   ========================================================== */

#login-overlay {
    min-height: 100dvh;
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(430px, .88fr);
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef6ff 55%,
            #f9fcff 100%
        );
}

#login-overlay > *:not(#login-form):not(.p4-login-reference) {
    display: none !important;
}

.p4-login-reference {
    position: relative;
    min-width: 0;
    min-height: 100dvh;
    padding: clamp(34px, 4vw, 76px);
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            rgba(250,253,255,.97) 0%,
            rgba(241,248,255,.92) 44%,
            rgba(239,247,255,.88) 100%
        );
}

.p4-login-reference::before {
    content: "";
    position: absolute;
    inset:
        clamp(260px, 30vh, 370px)
        -8%
        120px
        -5%;
    background:
        url("/assets/login-fleet-hero-v1.png")
        center center / contain
        no-repeat;
    pointer-events: none;
}

.p4-login-reference::after {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -230px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(23,119,205,.10);
    border-radius: 50%;
    pointer-events: none;
}

.p4-login-brand,
.p4-login-copy,
.p4-login-benefits,
.p4-login-legal {
    position: relative;
    z-index: 2;
}

.p4-login-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.p4-login-pin {
    position: relative;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 34px;
    font-weight: 900;
    border-radius: 50% 50% 50% 12px;
    transform: rotate(-45deg);
    background:
        linear-gradient(
            145deg,
            #0c74d5,
            #0757b5
        );
    box-shadow:
        0 14px 34px
        rgba(8,96,190,.22);
}

.p4-login-pin span {
    transform: rotate(45deg);
}

.p4-login-wordmark strong {
    display: block;
    color: #082a60;
    font-size: clamp(34px, 3.4vw, 58px);
    line-height: .95;
    letter-spacing: -.045em;
}

.p4-login-wordmark strong em {
    color: #0877d6;
    font-size: .62em;
    font-style: normal;
    letter-spacing: -.03em;
}

.p4-login-wordmark small {
    display: block;
    margin-top: 11px;
    color: #0871c8;
    font-size: clamp(18px, 1.8vw, 29px);
    letter-spacing: .01em;
}

.p4-login-copy {
    margin:
        clamp(42px, 6vh, 74px)
        0
        0
        94px;
    max-width: 590px;
}

.p4-login-copy::before {
    content: "";
    display: block;
    width: 90px;
    height: 3px;
    margin-bottom: 34px;
    border-radius: 10px;
    background: #159ddd;
}

.p4-login-copy h2 {
    margin: 0;
    color: #092d5e;
    font-size: clamp(25px, 2.2vw, 37px);
    line-height: 1.15;
    letter-spacing: -.025em;
}

.p4-login-copy p {
    margin: 14px 0 0;
    color: #4e627c;
    font-size: clamp(15px, 1.25vw, 20px);
    line-height: 1.55;
}

.p4-login-benefits {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.p4-login-benefit {
    min-width: 0;
    text-align: center;
    color: #50627a;
    font-size: 13px;
    line-height: 1.35;
}

.p4-login-benefit span {
    width: 44px;
    height: 44px;
    margin: 0 auto 9px;
    display: grid;
    place-items: center;
    color: #0874cf;
    font-size: 23px;
    border-radius: 14px;
    background: rgba(255,255,255,.82);
    box-shadow:
        0 8px 22px
        rgba(34,91,145,.10);
}

.p4-login-benefit strong {
    display: block;
    margin-bottom: 3px;
    color: #17375f;
    font-size: 13px;
}

.p4-login-legal {
    margin-top: 25px;
    color: #75879d;
    font-size: 11px;
    text-align: center;
}

#login-form {
    position: relative;
    align-self: center;
    justify-self: center;
    z-index: 3;
    width: min(500px, calc(100% - 60px));
    margin: 30px;
    padding: clamp(38px, 4vw, 62px);
    border: 1px solid rgba(136,169,201,.24);
    border-radius: 26px;
    background: rgba(255,255,255,.97);
    box-shadow:
        0 26px 70px
        rgba(21,66,108,.15);
}

#login-form::before {
    content: "🔐";
    width: 76px;
    height: 76px;
    margin: 0 auto 26px;
    display: grid;
    place-items: center;
    color: #0875cf;
    font-size: 30px;
    border-radius: 50%;
    background: #f0f7ff;
}

#login-form .brand-login {
    display: none;
}

#login-form h1 {
    margin: 0;
    color: #092c5d;
    text-align: center;
    font-size: clamp(27px, 2.4vw, 37px);
    letter-spacing: -.035em;
}

#login-form .login-subtitle {
    margin: 11px 0 34px;
    color: #718299;
    text-align: center;
    font-size: 15px;
}

#login-form label {
    color: #15375f;
    font-weight: 750;
}

#login-email,
#login-password {
    height: 58px;
    margin-top: 9px;
    border: 1px solid #cbd8e5;
    border-radius: 10px;
    background: #fff;
    color: #102d52;
    font-size: 16px;
}

#login-email:focus,
#login-password:focus {
    border-color: #168ad8;
    box-shadow:
        0 0 0 4px
        rgba(22,138,216,.12);
}

#login-submit {
    min-height: 58px;
    margin-top: 25px;
    border-radius: 10px;
    background:
        linear-gradient(
            100deg,
            #078edc,
            #0866ce
        );
    box-shadow:
        0 12px 25px
        rgba(8,109,207,.20);
    text-transform: uppercase;
    letter-spacing: .035em;
}

.p4-login-extra {
    margin-top: 18px;
}

.p4-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #587089;
    font-size: 13px;
}

.p4-login-options label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: #587089 !important;
    font-weight: 500 !important;
}

.p4-login-options input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #0875d1;
}

.p4-login-link {
    color: #0872cd;
    text-decoration: none;
}

.p4-login-request {
    width: 100%;
    min-height: 50px;
    margin-top: 17px;
    border: 1px solid #0b79d0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #0870c7;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.p4-login-security {
    margin-top: 20px;
    color: #71849a;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 1100px) {

    #login-overlay {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(390px, .9fr);
    }

    .p4-login-reference {
        padding: 34px;
    }

    .p4-login-copy {
        margin-left: 0;
    }

    .p4-login-wordmark strong {
        font-size: 38px;
    }

    .p4-login-benefits {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {

    #login-overlay {
        display: block;
        min-height: 100dvh;
        padding: 18px;
        overflow-y: auto;
    }

    .p4-login-reference {
        min-height: auto;
        margin-bottom: 14px;
        padding: 22px;
        border-radius: 20px;
    }

    .p4-login-reference::before,
    .p4-login-reference::after,
    .p4-login-copy,
    .p4-login-benefits,
    .p4-login-legal {
        display: none;
    }

    .p4-login-pin {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 22px;
    }

    .p4-login-wordmark strong {
        font-size: 25px;
    }

    .p4-login-wordmark small {
        margin-top: 5px;
        font-size: 14px;
    }

    #login-form {
        width: 100%;
        margin: 0;
        padding: 30px 22px;
        border-radius: 20px;
    }

    #login-form::before {
        width: 58px;
        height: 58px;
        margin-bottom: 18px;
        font-size: 24px;
    }

    #login-form h1 {
        font-size: 27px;
    }

    .p4-login-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================
   FIN P4-C2.1.1
   ========================================================== */



/* ==========================================================
   P4-C2.1.2 - LOGIN HIDDEN STATE CONTRACT FIX
   ========================================================== */

/*
   El login debe desaparecer completamente cuando la sesión
   está autenticada. Esta regla restaura el contrato HTML
   del atributo hidden frente a las capas visuales P4-C2.1.
*/

#login-overlay[hidden],
#login-overlay.hidden,
#login-overlay.is-hidden,
body.admin-open #login-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Protección general para elementos HTML ocultos. */

[hidden] {
    display: none !important;
}

/* El panel administrativo debe quedar completamente opaco. */

#admin-panel:not([hidden]) {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================
   FIN P4-C2.1.2
   ========================================================== */



/* ==========================================================
   P4-C2.2B - ADMIN MASTER LAYOUT V1
   ========================================================== */

:root {
    --p4-admin-navy: #0b2747;
    --p4-admin-navy-soft: #12375f;
    --p4-admin-blue: #0799df;
    --p4-admin-blue-dark: #0875ca;
    --p4-admin-bg: #eef4f9;
    --p4-admin-surface: #ffffff;
    --p4-admin-text: #102843;
    --p4-admin-muted: #667b92;
    --p4-admin-border: #d8e3ed;
    --p4-admin-success: #12a875;
    --p4-admin-warning: #dc941e;
    --p4-admin-danger: #d95656;
}

/* Lienzo principal */

#admin-panel.admin-panel {
    position: fixed;
    inset: 0;
    z-index: 5000;
    overflow: auto;
    color: var(--p4-admin-text);
    background:
        linear-gradient(
            145deg,
            #f5f8fb 0%,
            var(--p4-admin-bg) 100%
        );
}

#admin-panel .admin-shell {
    width: min(1680px, calc(100% - 40px));
    margin: 0 auto;
    padding: 20px 0 46px;
    color: var(--p4-admin-text);
    background: transparent;
}

/* Cabecera */

#admin-panel .admin-header {
    position: relative;
    margin: 0 0 18px;
    padding: 22px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 17px;
    background:
        linear-gradient(
            120deg,
            var(--p4-admin-navy) 0%,
            var(--p4-admin-navy-soft) 100%
        );
    box-shadow:
        0 16px 38px
        rgba(15,45,76,.16);
}

#admin-panel .admin-header::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -145px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(45,177,232,.15);
    border-radius: 50%;
    pointer-events: none;
}

#admin-panel .admin-header > * {
    position: relative;
    z-index: 1;
}

#admin-panel .admin-header h2 {
    margin: 2px 0 4px;
    color: #ffffff;
    font-size: 25px;
    letter-spacing: -.025em;
}

#admin-panel .admin-header .admin-eyebrow {
    margin: 0 0 4px;
    color: #55c7f1;
    opacity: 1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

#admin-panel #admin-scope {
    color: #b9cadd;
    opacity: 1;
    font-size: 13px;
}

/* Acciones */

#admin-panel .admin-actions {
    margin-top: 17px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#admin-panel .admin-action-button {
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid rgba(73,197,241,.32);
    border-radius: 9px;
    color: #ffffff;
    background:
        linear-gradient(
            105deg,
            var(--p4-admin-blue),
            var(--p4-admin-blue-dark)
        );
    box-shadow:
        0 7px 18px
        rgba(0,103,180,.18);
    font-size: 13px;
    font-weight: 750;
}

#admin-panel .admin-action-button:hover {
    border-color: rgba(255,255,255,.45);
    filter: brightness(1.06);
    transform: translateY(-1px);
}

#admin-panel .admin-action-button:disabled {
    opacity: .48;
    transform: none;
}

#admin-panel .admin-close-button {
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 9px;
    color: #ffffff;
    background: rgba(255,255,255,.08);
    font-size: 13px;
    font-weight: 700;
}

#admin-panel .admin-close-button:hover {
    background: rgba(255,255,255,.15);
}

/* Estructura */

#admin-panel .admin-layout {
    display: grid;
    grid-template-columns:
        minmax(210px, 250px)
        minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

#admin-panel .admin-sidebar {
    position: sticky;
    top: 18px;
    align-self: start;
    padding: 16px;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;
    background:
        linear-gradient(
            180deg,
            var(--p4-admin-navy) 0%,
            #0a203a 100%
        );
    box-shadow:
        0 13px 30px
        rgba(15,45,76,.14);
}

#admin-panel .admin-section-title {
    margin: 0 0 13px;
    color: #9cb5ce;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

#admin-panel .admin-org-list {
    display: grid;
    gap: 7px;
}

#admin-panel .admin-org-button {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    color: #dce9f5;
    background: rgba(255,255,255,.035);
    text-align: left;
}

#admin-panel .admin-org-button:hover {
    color: #ffffff;
    border-color: rgba(62,192,239,.32);
    background: rgba(45,169,221,.10);
}

#admin-panel .admin-org-button.active {
    color: #ffffff;
    border-color: rgba(70,200,245,.45);
    background:
        linear-gradient(
            100deg,
            rgba(10,151,218,.30),
            rgba(10,119,194,.18)
        );
    box-shadow:
        inset 3px 0 0
        #23b6eb;
}

#admin-panel .admin-org-button strong {
    color: inherit;
    font-size: 13px;
}

#admin-panel .admin-org-button span {
    margin-top: 3px;
    color: #91a9c0;
    opacity: 1;
    font-size: 11px;
}

/* Contenido y tarjetas */

#admin-panel .admin-content {
    min-width: 0;
    display: grid;
    gap: 16px;
}

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

#admin-panel .admin-card {
    min-width: 0;
    padding: 18px 20px;
    color: var(--p4-admin-text);
    border: 1px solid var(--p4-admin-border);
    border-radius: 15px;
    background: var(--p4-admin-surface);
    box-shadow:
        0 10px 25px
        rgba(30,68,104,.07);
}

#admin-panel .admin-card h3 {
    margin: 0 0 11px;
    color: var(--p4-admin-text);
    font-size: 17px;
    letter-spacing: -.015em;
}

#admin-panel .admin-card-heading {
    min-height: 32px;
    margin-bottom: 7px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#admin-panel .admin-card .admin-eyebrow {
    margin: 0 0 5px;
    color: var(--p4-admin-blue-dark);
    opacity: 1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
}

#admin-panel .admin-muted {
    color: var(--p4-admin-muted);
    opacity: 1;
    font-size: 12px;
}

/* Resumen */

#admin-panel .admin-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

#admin-panel .admin-summary-item {
    padding: 6px 10px;
    color: #49647e;
    border: 1px solid #dce7f0;
    border-radius: 999px;
    background: #f5f9fc;
    font-size: 11px;
    font-weight: 650;
}

/* Tablas */

#admin-panel .admin-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    color: var(--p4-admin-text);
    scrollbar-width: thin;
}

#admin-panel .admin-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    color: var(--p4-admin-text);
    font-size: 12px;
}

#admin-panel .admin-table th,
#admin-panel .admin-table td {
    padding: 10px 9px;
    color: var(--p4-admin-text);
    border-bottom: 1px solid #e3ebf2;
    text-align: left;
    vertical-align: middle;
}

#admin-panel .admin-table th {
    color: #71849a;
    background: #f8fafc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#admin-panel .admin-table tbody tr {
    transition:
        background .16s ease;
}

#admin-panel .admin-table tbody tr:hover {
    background: #f5f9fc;
}

#admin-panel .admin-table tbody tr:last-child td {
    border-bottom: 0;
}

#admin-panel .admin-role {
    display: inline-flex;
    padding: 4px 8px;
    color: #23739e;
    border-radius: 999px;
    background: #eaf6fc;
    font-size: 10px;
    font-weight: 750;
}

/* Estados */

#admin-panel .admin-status-active {
    color: var(--p4-admin-success);
    font-weight: 750;
}

#admin-panel .admin-status-inactive {
    color: var(--p4-admin-warning);
    font-weight: 750;
}

#admin-panel .admin-status-archived {
    color: #8494a5;
    font-weight: 750;
}

#admin-panel .admin-empty {
    padding: 16px 3px;
    color: var(--p4-admin-muted);
    opacity: 1;
    font-size: 12px;
}

#admin-panel .admin-error {
    color: #b43c3c;
    border: 1px solid #f1cccc;
    background: #fff3f3;
}

/* Botones de fila */

#admin-panel .admin-row-action {
    min-height: 30px;
    padding: 6px 10px;
    color: #176da9;
    border: 1px solid #bee0f3;
    border-radius: 8px;
    background: #f2f9fd;
    font-size: 11px;
    font-weight: 750;
}

#admin-panel .admin-row-action:hover {
    color: #ffffff;
    border-color: #128bd0;
    background: #128bd0;
}

#admin-panel .admin-row-action.danger,
#admin-panel .admin-row-action.remove {
    color: #bc4848;
    border-color: #efcccc;
    background: #fff5f5;
}

#admin-panel .admin-row-action.danger:hover,
#admin-panel .admin-row-action.remove:hover {
    color: #ffffff;
    border-color: var(--p4-admin-danger);
    background: var(--p4-admin-danger);
}

#admin-panel .admin-row-action.mqtt {
    color: #5069a4;
    border-color: #d2d9ee;
    background: #f5f7fd;
}

/* Modales administrativos */

.admin-modal {
    color: var(--p4-admin-text);
}

.admin-modal .admin-modal-backdrop {
    background: rgba(5,20,37,.62);
    backdrop-filter: blur(5px);
}

.admin-modal .admin-modal-dialog {
    color: var(--p4-admin-text);
    border: 1px solid var(--p4-admin-border);
    border-radius: 17px;
    background: #ffffff;
    box-shadow:
        0 28px 85px
        rgba(5,25,47,.28);
}

.admin-modal .admin-modal-header {
    color: var(--p4-admin-text);
    border-bottom: 1px solid var(--p4-admin-border);
    background: #f8fbfd;
}

.admin-modal .admin-modal-header h3 {
    color: var(--p4-admin-text);
}

.admin-modal .admin-modal-x {
    color: #65798f;
    border-color: #d5e0e9;
    background: #ffffff;
}

.admin-modal .admin-field label {
    color: #294661;
}

.admin-modal .admin-field input,
.admin-modal .admin-field select,
.admin-modal .admin-field textarea {
    color: var(--p4-admin-text);
    border: 1px solid #cbd8e4;
    background: #ffffff;
}

.admin-modal .admin-field input:focus,
.admin-modal .admin-field select:focus,
.admin-modal .admin-field textarea:focus {
    border-color: var(--p4-admin-blue);
    box-shadow:
        0 0 0 4px
        rgba(7,153,223,.11);
}

.admin-modal .admin-selected-context,
.admin-modal .admin-lifecycle-note {
    color: #526c84;
    border-color: #dce6ee;
    background: #f5f9fc;
}

.admin-modal .admin-cancel-button {
    color: #526a80;
    border-color: #ccd9e4;
    background: #ffffff;
}

.admin-modal .admin-submit-button {
    color: #ffffff;
    border-color: var(--p4-admin-blue-dark);
    background:
        linear-gradient(
            100deg,
            var(--p4-admin-blue),
            var(--p4-admin-blue-dark)
        );
}

/* Responsive */

@media (max-width: 1050px) {

    #admin-panel .admin-shell {
        width: min(100% - 24px, 1680px);
        padding-top: 12px;
    }

    #admin-panel .admin-layout {
        grid-template-columns: 1fr;
    }

    #admin-panel .admin-sidebar {
        position: static;
    }

    #admin-panel .admin-org-list {
        display: flex;
        overflow-x: auto;
    }

    #admin-panel .admin-org-button {
        min-width: 190px;
    }
}

@media (max-width: 760px) {

    #admin-panel .admin-shell {
        width: min(100% - 16px, 1680px);
        padding: 8px 0 28px;
    }

    #admin-panel .admin-header {
        padding: 18px;
        flex-direction: column;
    }

    #admin-panel .admin-close-button {
        width: 100%;
    }

    #admin-panel .admin-columns {
        grid-template-columns: 1fr;
    }

    #admin-panel .admin-card {
        padding: 15px;
    }

    #admin-panel .admin-table {
        min-width: 620px;
    }

    #admin-panel .admin-actions {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #admin-panel .admin-action-button {
        width: 100%;
    }
}

/* ==========================================================
   FIN P4-C2.2B
   ========================================================== */


/* ==========================================================
   P4-C2.2D.1 - FLEET AND VEHICLE ADMIN UI
========================================================== */

#admin-vehicles .admin-row-action {
    width: auto;
    min-width: 72px;
    padding-inline: 12px;
    white-space: nowrap;
}

#admin-vehicles [data-provision-admin-vehicle] {
    min-width: 148px;
}

#admin-provision-modal .admin-provision-action {
    width: auto;
    min-width: 132px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    #admin-vehicles [data-provision-admin-vehicle] {
        min-width: 0;
        white-space: normal;
    }

    #admin-provision-modal .admin-provision-action {
        width: 100%;
        white-space: normal;
    }
}


/* ==========================================================
   P4-C2.2E.1 - SAFE CLIENT EDIT STYLES
========================================================== */

#admin-org-summary .admin-client-edit-button {
    width: auto;
    min-height: 34px;
    margin-left: auto;
    padding: 7px 14px;
    border: 1px solid #99d5f3;
    border-radius: 10px;
    background: #eff9ff;
    color: #0877b8;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#admin-org-summary .admin-client-edit-button:hover {
    border-color: #18a6e8;
    background: #e2f5ff;
}

#admin-org-summary .admin-client-edit-button:focus-visible {
    outline: 3px solid rgba(24, 166, 232, 0.24);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    #admin-org-summary .admin-client-edit-button {
        width: 100%;
        margin-left: 0;
    }
}

/* ==========================================================
   FIN P4-C2.2E.1
========================================================== */