/* =====================================================
   SYSTEM GUARDS - ESTILOS GENERALES
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --navy: #0c2340;
    --navy-light: #143d70;
    --blue: #1d67d8;
    --blue-dark: #1554b0;
    --green: #22c55e;
    --yellow-bg: #fef3c7;
    --yellow-text: #92400e;
    --red-bg: #fee2e2;
    --red-text: #991b1b;
    --orange-bg: #fff7ed;
    --orange-text: #9a3412;
    --bg: #eef3f9;
    --bg-soft: #f4f7fb;
    --white: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #dbe4ef;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
    --shadow-strong: 0 14px 35px rgba(12, 35, 64, 0.25);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg-soft);
    color: var(--text);
}

a {
    text-decoration: none;
}

button,
input {
    font-family: inherit;
}

/* =====================================================
   BOTONES, BADGES Y ALERTAS GENERALES
===================================================== */

.btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--blue);
    color: var(--white);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn:hover {
    background: var(--blue-dark);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary {
    background: #eef2f7;
    color: var(--navy);
}

.btn-secondary:hover {
    background: #dbe4ef;
}

.badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
}

.badge-green {
    background: #dcfce7;
    color: #166534;
}

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

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

.badge-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.alert {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 14px;
}

.alert-error {
    background: var(--red-bg);
    color: var(--red-text);
    border: 1px solid #fecaca;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.logout-link {
    color: #ef4444 !important;
}

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

.login-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #071b35, #123c73);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: var(--white);
    border-radius: 22px;
    padding: 34px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.login-logo {
    text-align: center;
    margin-bottom: 25px;
}

.logo-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--blue), #0d2b52);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.logo-icon i {
    font-size: 32px;
}

.login-logo h1 {
    color: var(--navy);
    font-size: 26px;
    margin-bottom: 6px;
}

.login-logo p {
    color: var(--muted);
    font-size: 14px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #374151;
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font-size: 15px;
    outline: none;
    transition: 0.2s ease;
}

.form-control:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(29, 103, 216, 0.15);
}

.password-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.toggle-password:hover {
    background: #eef2f7;
    color: var(--blue);
}

.toggle-password i {
    font-size: 15px;
}

.password-wrapper .form-control {
    padding-right: 52px;
}

.login-help {
    margin-top: 18px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

.login-demo {
    margin-top: 20px;
    padding: 14px;
    background: #f3f6fb;
    border-radius: 14px;
    font-size: 13px;
    color: #4b5563;
}

.login-demo strong {
    color: var(--navy);
}

/* =====================================================
   PANEL ADMINISTRADOR
===================================================== */

.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--navy);
    color: var(--white);
    padding: 22px;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 30px;
}

.sidebar-logo-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo-icon i {
    font-size: 17px;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    color: #dbeafe;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    transition: 0.2s ease;
}

.sidebar-menu a i {
    width: 22px;
    min-width: 22px;
    text-align: center;
    font-size: 15px;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
    background: var(--blue);
    color: var(--white);
}

.sidebar-menu a.logout-link {
    color: #fca5a5 !important;
    margin-top: 14px;
}

.sidebar-menu a.logout-link:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ffffff !important;
}

.main-content {
    flex: 1;
    padding: 28px;
    min-width: 0;
}

.topbar {
    background: var(--white);
    padding: 18px 22px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06);
}

.topbar h2 {
    color: var(--navy);
    font-size: 24px;
}

.user-info {
    font-size: 14px;
    color: #4b5563;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.card {
    background: var(--white);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06);
}

.card-title {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 8px;
}

.card-value {
    font-size: 30px;
    font-weight: bold;
    color: var(--navy);
}

.panel-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 22px;
}

/* Mapa temporal del dashboard administrador */
.map-placeholder {
    height: 360px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(29,103,216,0.08), rgba(12,35,64,0.12)),
        repeating-linear-gradient(
            45deg,
            #e5edf7,
            #e5edf7 10px,
            #f8fafc 10px,
            #f8fafc 20px
        );
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.map-route {
    position: absolute;
    width: 70%;
    height: 55%;
    left: 12%;
    top: 23%;
    border: 5px solid var(--blue);
    border-left-color: transparent;
    border-bottom-color: var(--green);
    border-radius: 45%;
    transform: rotate(-10deg);
}

.pin {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--blue);
    border: 3px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.pin.one {
    left: 25%;
    top: 30%;
}

.pin.two {
    left: 48%;
    top: 20%;
}

.pin.three {
    left: 70%;
    top: 38%;
}

.pin.four {
    left: 58%;
    top: 66%;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
}

.table th,
.table td {
    padding: 13px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
}

.table th {
    color: #374151;
    background: #f9fafb;
}

/* =====================================================
   PANEL GUARDIA - INICIO
===================================================== */

.guard-page {
    background: var(--bg);
}

.guard-app {
    width: 100%;
    max-width: 1180px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 24px;
}

.guard-top {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--white);
    border-radius: 28px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: var(--shadow-strong);
    margin-bottom: 24px;
}

.guard-label,
.small-label {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: bold;
    color: var(--blue);
    margin-bottom: 6px;
}

.guard-top .guard-label {
    color: #bfdbfe;
}

.guard-top h1 {
    font-size: 30px;
    margin-bottom: 6px;
}

.guard-top p {
    color: #dbeafe;
    font-size: 15px;
}

.guard-status,
.route-live-status {
    background: rgba(255, 255, 255, 0.12);
    padding: 12px 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    white-space: nowrap;
    font-weight: 600;
}

.status-dot {
    width: 10px;
    height: 10px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

.status-dot.warning {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}

.guard-main {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 22px;
    align-items: start;
}

.guard-left,
.guard-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.guard-card {
    background: var(--white);
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(220, 228, 238, 0.85);
}

.route-main-card {
    min-height: 270px;
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.card-header-row h2,
.card-header-row h3 {
    color: var(--navy);
    margin: 0;
}

.card-header-row h2 {
    font-size: 26px;
}

.card-header-row h3 {
    font-size: 20px;
}

.route-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 22px 0;
}

.route-stats div {
    background: var(--bg-soft);
    border-radius: 18px;
    padding: 16px 12px;
    text-align: center;
}

.route-stats strong {
    display: block;
    color: var(--navy);
    font-size: 22px;
    margin-bottom: 4px;
}

.route-stats span {
    font-size: 12px;
    color: var(--muted);
}

.card-description {
    color: #4b5563;
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.btn-link {
    display: block;
    text-align: center;
    background: var(--blue);
    color: var(--white);
    padding: 15px 18px;
    border-radius: 16px;
    font-weight: bold;
    transition: 0.2s ease;
}

.btn-link:hover {
    background: var(--blue-dark);
}

.info-list {
    display: grid;
    gap: 12px;
}

.info-list div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f7;
}

.info-list div:last-child {
    border-bottom: none;
}

.info-list span {
    color: var(--muted);
    font-size: 14px;
}

.info-list strong {
    color: var(--navy);
    font-size: 14px;
}

.map-card {
    min-height: 430px;
}

.guard-map-preview {
    position: relative;
    height: 330px;
    border-radius: 22px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(12,35,64,0.05), rgba(29,103,216,0.08)),
        repeating-linear-gradient(
            90deg,
            #e6edf6,
            #e6edf6 16px,
            #f8fafc 16px,
            #f8fafc 32px
        );
    border: 1px solid var(--border);
}

.guard-map-preview::before {
    content: "";
    position: absolute;
    inset: 35px 45px;
    border: 22px solid rgba(12, 35, 64, 0.18);
    border-radius: 45px;
    transform: rotate(-8deg);
}

.guard-map-preview::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 80px;
    right: 32px;
    top: 42px;
    background: rgba(12, 35, 64, 0.08);
    border-radius: 20px;
    transform: rotate(8deg);
}

.map-line {
    position: absolute;
    width: 62%;
    height: 54%;
    left: 17%;
    top: 24%;
    border: 5px solid var(--green);
    border-left-color: transparent;
    border-bottom-color: var(--blue);
    border-radius: 45%;
    transform: rotate(-13deg);
    z-index: 2;
}

.map-pin {
    position: absolute;
    width: 34px;
    height: 34px;
    background: var(--blue);
    color: var(--white);
    border: 3px solid var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 8px 18px rgba(12, 35, 64, 0.25);
    z-index: 3;
}

.pin-a {
    left: 20%;
    top: 26%;
}

.pin-b {
    left: 48%;
    top: 19%;
}

.pin-c {
    left: 72%;
    top: 38%;
}

.pin-d {
    left: 60%;
    top: 68%;
}

.pin-e {
    left: 28%;
    top: 70%;
}

.guard-location {
    position: absolute;
    width: 22px;
    height: 22px;
    left: 38%;
    top: 53%;
    background: var(--green);
    border: 4px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.18);
    z-index: 4;
}

.map-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
    color: #4b5563;
    font-size: 13px;
}

.map-legend span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.map-legend i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.legend-blue {
    background: var(--blue);
}

.legend-green {
    background: var(--green);
}

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

.quick-actions a {
    background: var(--bg-soft);
    color: var(--navy);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #e5eaf2;
}

.quick-actions a:hover {
    background: #e8f0fb;
}

.quick-actions .danger-action {
    background: var(--red-bg);
    color: var(--red-text);
}

/* =====================================================
   PANEL GUARDIA - RECORRIDO
===================================================== */

.recorrido-app {
    max-width: 1400px;
}

.recorrido-header {
    margin-bottom: 20px;
}

.recorrido-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(320px, 0.8fr);
    gap: 22px;
    align-items: start;
}

.recorrido-map-card {
    padding: 22px;
}

.recorrido-map-card h2 {
    color: var(--navy);
    font-size: 23px;
}

.recorrido-map {
    position: relative;
    width: 100%;
    min-height: 620px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #d9e2ee;
    background:
        linear-gradient(
            rgba(255,255,255,.25),
            rgba(255,255,255,.25)
        ),
        repeating-linear-gradient(
            45deg,
            #e3ebf5,
            #e3ebf5 16px,
            #f6f8fb 16px,
            #f6f8fb 32px
        );
}

.recorrido-route-line {
    position: absolute;
    width: 58%;
    height: 54%;
    top: 23%;
    left: 19%;
    border: 6px solid var(--blue);
    border-left-color: transparent;
    border-bottom-color: var(--green);
    border-radius: 48%;
    transform: rotate(-12deg);
}

.control-point {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--blue);
    border: 4px solid var(--white);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(0,0,0,.22);
    z-index: 4;
}

.point-1 {
    left: 21%;
    top: 29%;
}

.point-2 {
    left: 45%;
    top: 17%;
}

.point-3 {
    right: 20%;
    top: 34%;
}

.point-4 {
    right: 29%;
    bottom: 22%;
}

.point-5 {
    left: 29%;
    bottom: 19%;
}

.current-guard-location {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 39%;
    top: 51%;
    border: 4px solid var(--white);
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(34,197,94,.16);
    z-index: 5;
}

.location-pulse {
    position: absolute;
    inset: -10px;
    border: 2px solid rgba(34,197,94,.5);
    border-radius: 50%;
}

.recorrido-map-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 15px;
    font-size: 13px;
    color: #4b5563;
}

.recorrido-map-footer div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.map-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.map-dot.blue {
    background: var(--blue);
}

.map-dot.green {
    background: var(--green);
}

.map-dot.completed {
    background: #94a3b8;
}

.recorrido-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 12px;
}

.progress-header strong {
    font-size: 28px;
    color: var(--navy);
}

.progress-header span {
    color: var(--blue);
    font-weight: 700;
}

.progress-track {
    width: 100%;
    height: 10px;
    background: #e5eaf1;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 20px;
}

.progress-value {
    height: 100%;
    background: var(--blue);
    border-radius: inherit;
}

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

.route-data-grid div {
    background: #f5f7fb;
    padding: 14px;
    border-radius: 15px;
}

.route-data-grid span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.route-data-grid strong {
    color: var(--navy);
    font-size: 16px;
}

.current-point-card {
    position: relative;
}

.point-number {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    border-radius: 14px;
    color: var(--white);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px;
}

.current-point-card h2 {
    color: var(--navy);
    font-size: 22px;
    margin-bottom: 12px;
}

.point-status {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    background: var(--orange-bg);
    color: var(--orange-text);
    border-radius: 13px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.evidence-button:disabled {
    background: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
}

.action-help {
    color: var(--muted);
    text-align: center;
    font-size: 12px;
    margin-top: 9px;
    line-height: 1.4;
}

.recorrido-actions {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.route-action {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.incident-action {
    background: var(--orange-bg);
    color: var(--orange-text);
}

.incident-action:hover {
    background: #ffedd5;
}

.sync-action {
    background: #eff6ff;
    color: #1d4ed8;
}

.sync-action:hover {
    background: #dbeafe;
}

.finish-action {
    background: var(--red-bg);
    color: var(--red-text);
}

.finish-action:hover {
    background: #fecaca;
}

/* =====================================================
   NAVEGACIÓN INFERIOR GUARDIA
===================================================== */

.guard-bottom-nav {
    display: none;
}

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

@media (max-width: 1050px) {
    .recorrido-layout {
        grid-template-columns: 1fr;
    }

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

    .recorrido-sidebar .guard-card:last-child {
        grid-column: 1 / -1;
    }

    .recorrido-map {
        min-height: 520px;
    }
}

@media (max-width: 980px) {
    .guard-app {
        padding: 18px;
    }

    .guard-main {
        grid-template-columns: 1fr;
    }

    .guard-top h1 {
        font-size: 26px;
    }

    .map-card {
        min-height: auto;
    }
}

@media (max-width: 900px) {
    .app-layout {
        flex-direction: column;
    }

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

    .panel-grid {
        grid-template-columns: 1fr;
    }
    
     .sidebar {
        width: 100%;
        min-width: 100%;
    }

    .sidebar-menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .sidebar-menu a.logout-link {
        margin-top: 0;
    }
}

@media (max-width: 700px) {
    .recorrido-sidebar {
        display: flex;
    }

    .recorrido-map {
        min-height: 410px;
    }

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

@media (max-width: 620px) {
    .guard-app {
        padding: 0;
        padding-bottom: 82px;
    }

    .guard-top {
        border-radius: 0 0 28px 28px;
        padding: 24px 22px;
        flex-direction: column;
        align-items: flex-start;
    }

    .guard-main {
        padding: 20px;
        gap: 18px;
    }

    .guard-card {
        padding: 22px;
        border-radius: 22px;
    }

    .card-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .route-stats {
        grid-template-columns: 1fr;
    }

    .guard-map-preview {
        height: 260px;
    }

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

    .guard-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: var(--white);
        padding: 10px 12px;
        box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.12);
        z-index: 20;
    }

    .guard-bottom-nav a {
        color: var(--muted);
        text-align: center;
        font-size: 12px;
        padding: 10px 4px;
        border-radius: 12px;
    }

    .guard-bottom-nav a.active {
        background: #eff6ff;
        color: var(--blue);
        font-weight: bold;
    }
}

@media (max-width: 520px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }

    .login-card {
        padding: 24px;
    }
    
    .sidebar {
        padding: 18px;
    }

    .sidebar-logo {
        font-size: 16px;
    }

    .sidebar-menu {
        grid-template-columns: 1fr;
    }
    
}

@media (max-width: 480px) {
    .recorrido-map {
        min-height: 330px;
    }

    .route-data-grid {
        grid-template-columns: 1fr;
    }

    .recorrido-map-footer {
        flex-direction: column;
        gap: 8px;
    }
}

/* =====================================================
   ADMINISTRADOR - GUARDIAS
===================================================== */

.admin-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: none;
    border-radius: 14px;
    background: var(--blue);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
    white-space: nowrap;
}

.admin-primary-btn:hover {
    background: var(--blue-dark);
}

.admin-section {
    background: var(--white);
    border-radius: 22px;
    padding: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
    border: 1px solid rgba(220, 228, 238, 0.85);
}

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

.section-header h3 {
    color: var(--navy);
    font-size: 22px;
}

.admin-filters {
    display: flex;
    gap: 12px;
    align-items: center;
}

.admin-search,
.admin-select {
    min-height: 42px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 0 13px;
    font-size: 14px;
    outline: none;
    background: var(--white);
    color: var(--text);
}

.admin-search:focus,
.admin-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(29, 103, 216, 0.12);
}

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

.guard-admin-card {
    display: flex;
    gap: 16px;
    background: #f8fafc;
    border: 1px solid #e5eaf2;
    border-radius: 20px;
    padding: 18px;
    transition: 0.2s ease;
}

.guard-admin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    background: var(--white);
}

.guard-avatar {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--blue), var(--navy));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.guard-card-content {
    flex: 1;
    min-width: 0;
}

.guard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.guard-card-header h4 {
    color: var(--navy);
    font-size: 18px;
    margin-bottom: 4px;
}

.guard-card-header p {
    color: var(--muted);
    font-size: 13px;
}

.guard-details {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.guard-details div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e9eef5;
    padding-bottom: 8px;
}

.guard-details div:last-child {
    border-bottom: none;
}

.guard-details span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
}

.guard-details strong {
    color: var(--navy);
    font-size: 13px;
    text-align: right;
}

.guard-card-actions {
    display: flex;
    gap: 10px;
}

.guard-card-actions button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 700;
    color: var(--navy);
    background: #eef2f7;
    transition: 0.2s ease;
}

.guard-card-actions button:hover {
    background: #dbe4ef;
}

.guard-card-actions button:last-child {
    background: #eff6ff;
    color: #1d4ed8;
}

.guard-card-actions button:last-child:hover {
    background: #dbeafe;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* Responsive guardias admin */

@media (max-width: 1100px) {
    .guards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-primary-btn {
        width: 100%;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-filters {
        width: 100%;
        flex-direction: column;
    }

    .admin-search,
    .admin-select {
        width: 100%;
    }

    .guard-admin-card {
        flex-direction: column;
    }

    .guard-card-header {
        flex-direction: column;
    }

    .guard-details div {
        flex-direction: column;
        gap: 4px;
    }

    .guard-details strong {
        text-align: left;
    }

    .guard-card-actions {
        flex-direction: column;
    }
}

/* =====================================================
   ADMINISTRADOR - RUTAS
===================================================== */

.routes-admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.8fr);
    gap: 22px;
    align-items: start;
}

.routes-list {
    display: grid;
    gap: 16px;
}

.route-admin-card {
    background: #f8fafc;
    border: 1px solid #e5eaf2;
    border-radius: 20px;
    padding: 18px;
    transition: 0.2s ease;
}

.route-admin-card:hover,
.route-admin-card.active-route {
    background: var(--white);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.route-admin-card.active-route {
    border-color: rgba(29, 103, 216, 0.45);
}

.route-admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.route-admin-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-size: 18px;
    margin-bottom: 5px;
}

.route-admin-header p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.route-admin-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.route-admin-stats div {
    background: var(--bg-soft);
    border-radius: 14px;
    padding: 12px;
}

.route-admin-stats span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.route-admin-stats strong {
    color: var(--navy);
    font-size: 15px;
}

.route-progress-mini {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e5eaf1;
    overflow: hidden;
    margin-bottom: 15px;
}

.route-progress-mini span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--blue);
}

.route-admin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.route-admin-footer small {
    color: var(--muted);
    font-size: 12px;
}

.route-admin-footer div {
    display: flex;
    gap: 8px;
}

.route-admin-footer button,
.admin-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 700;
    color: var(--navy);
    background: #eef2f7;
    transition: 0.2s ease;
}

.route-admin-footer button:hover,
.admin-secondary-btn:hover {
    background: #dbe4ef;
}

.route-admin-footer button:last-child {
    background: #eff6ff;
    color: #1d4ed8;
}

.route-admin-footer button:last-child:hover {
    background: #dbeafe;
}

.route-map-panel {
    position: sticky;
    top: 24px;
}

.compact-header {
    margin-bottom: 16px;
}

.admin-route-map {
    position: relative;
    height: 380px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    background:
        linear-gradient(135deg, rgba(12,35,64,0.05), rgba(29,103,216,0.08)),
        repeating-linear-gradient(
            45deg,
            #e3ebf5,
            #e3ebf5 16px,
            #f8fafc 16px,
            #f8fafc 32px
        );
}

.admin-route-map::before {
    content: "";
    position: absolute;
    inset: 42px;
    border: 18px solid rgba(12, 35, 64, 0.14);
    border-radius: 40px;
    transform: rotate(-8deg);
}

.admin-map-route-line {
    position: absolute;
    width: 58%;
    height: 54%;
    left: 19%;
    top: 24%;
    border: 5px solid var(--green);
    border-left-color: transparent;
    border-bottom-color: var(--blue);
    border-radius: 46%;
    transform: rotate(-13deg);
    z-index: 2;
}

.admin-map-point {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    border: 3px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(12, 35, 64, 0.25);
    z-index: 3;
}

.admin-point-1 {
    left: 22%;
    top: 28%;
}

.admin-point-2 {
    left: 47%;
    top: 18%;
}

.admin-point-3 {
    right: 22%;
    top: 37%;
}

.admin-point-4 {
    right: 30%;
    bottom: 22%;
}

.admin-point-5 {
    left: 29%;
    bottom: 20%;
}

.admin-map-legend {
    margin-bottom: 18px;
}

.route-map-info {
    background: var(--bg-soft);
    border-radius: 18px;
    padding: 18px;
}

.route-map-info h4 {
    color: var(--navy);
    font-size: 18px;
    margin-bottom: 8px;
}

.route-map-info p {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.admin-secondary-btn {
    width: 100%;
    min-height: 44px;
}

/* Responsive rutas admin */

@media (max-width: 1150px) {
    .routes-admin-layout {
        grid-template-columns: 1fr;
    }

    .route-map-panel {
        position: static;
    }
}

@media (max-width: 700px) {
    .route-admin-header,
    .route-admin-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .route-admin-stats {
        grid-template-columns: 1fr;
    }

    .route-admin-footer div {
        width: 100%;
        flex-direction: column;
    }

    .route-admin-footer button {
        width: 100%;
    }

    .admin-route-map {
        height: 300px;
    }
}




/* =====================================================
   ADMINISTRADOR - RECORRIDOS
===================================================== */

.recorridos-admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.85fr);
    gap: 22px;
    align-items: start;
}

.recorridos-list {
    display: grid;
    gap: 16px;
}

.recorrido-admin-card {
    background: #f8fafc;
    border: 1px solid #e5eaf2;
    border-radius: 20px;
    padding: 18px;
    transition: 0.2s ease;
}

.recorrido-admin-card:hover,
.recorrido-admin-card.active-recorrido {
    background: var(--white);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.recorrido-admin-card.active-recorrido {
    border-color: rgba(34, 197, 94, 0.55);
}

.recorrido-admin-card.warning-recorrido {
    border-color: rgba(239, 68, 68, 0.35);
}

.recorrido-card-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.recorrido-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    font-size: 18px;
}

.recorrido-title h4 {
    color: var(--navy);
    font-size: 18px;
    margin-bottom: 4px;
}

.recorrido-title p {
    color: var(--muted);
    font-size: 13px;
}

.recorrido-progress-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.recorrido-progress-row div {
    background: var(--bg-soft);
    border-radius: 14px;
    padding: 12px;
}

.recorrido-progress-row span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.recorrido-progress-row strong {
    color: var(--navy);
    font-size: 14px;
}

.danger-progress span {
    background: #ef4444;
}

.recorrido-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.recorrido-card-footer small {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
}

.recorrido-card-footer div {
    display: flex;
    gap: 8px;
}

.recorrido-card-footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 700;
    color: var(--navy);
    background: #eef2f7;
    transition: 0.2s ease;
}

.recorrido-card-footer button:hover {
    background: #dbe4ef;
}

.recorrido-card-footer button:last-child {
    background: #eff6ff;
    color: #1d4ed8;
}

.recorrido-card-footer button:last-child:hover {
    background: #dbeafe;
}

.recorrido-detail-panel {
    position: sticky;
    top: 24px;
}

.admin-recorrido-map {
    position: relative;
    height: 340px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    background:
        linear-gradient(135deg, rgba(12,35,64,0.05), rgba(29,103,216,0.08)),
        repeating-linear-gradient(
            45deg,
            #e3ebf5,
            #e3ebf5 16px,
            #f8fafc 16px,
            #f8fafc 32px
        );
}

.admin-recorrido-map::before {
    content: "";
    position: absolute;
    inset: 38px;
    border: 17px solid rgba(12, 35, 64, 0.14);
    border-radius: 38px;
    transform: rotate(-8deg);
}

.completed-point {
    background: #94a3b8;
}

.admin-live-guard {
    position: absolute;
    width: 22px;
    height: 22px;
    left: 53%;
    top: 46%;
    border: 4px solid var(--white);
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(34,197,94,.16);
    z-index: 5;
}

.legend-gray {
    background: #94a3b8;
}

.detail-info-box,
.evidence-preview-box {
    background: var(--bg-soft);
    border-radius: 18px;
    padding: 18px;
    margin-top: 18px;
}

.detail-info-box h4,
.evidence-preview-box h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-size: 17px;
    margin-bottom: 14px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid #e5eaf2;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
}

.detail-row strong {
    color: var(--navy);
    font-size: 13px;
    text-align: right;
}

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.evidence-thumb {
    height: 76px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(29,103,216,0.18), rgba(12,35,64,0.2)),
        #dbeafe;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* Responsive recorridos admin */

@media (max-width: 1150px) {
    .recorridos-admin-layout {
        grid-template-columns: 1fr;
    }

    .recorrido-detail-panel {
        position: static;
    }
}

@media (max-width: 800px) {
    .recorrido-progress-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .recorrido-card-top {
        grid-template-columns: auto 1fr;
    }

    .recorrido-card-top .badge {
        grid-column: 1 / -1;
        width: fit-content;
    }

    .recorrido-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .recorrido-card-footer div {
        width: 100%;
        flex-direction: column;
    }

    .recorrido-card-footer button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .recorrido-progress-row {
        grid-template-columns: 1fr;
    }

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

    .admin-recorrido-map {
        height: 300px;
    }
}

/* =====================================================
   DASHBOARD ADMINISTRADOR MEJORADO
===================================================== */

.dashboard-main {
    background: #eef3f9;
}

.dashboard-hero {
    background: var(--white);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    border: 1px solid rgba(220, 228, 238, 0.85);
}

.dashboard-hero h2 {
    color: var(--navy);
    font-size: 28px;
    margin-bottom: 6px;
}

.dashboard-hero p {
    color: #4b5563;
    font-size: 15px;
    line-height: 1.5;
}

.dashboard-date-box {
    background: var(--bg-soft);
    border-radius: 18px;
    padding: 16px 18px;
    min-width: 210px;
}

.dashboard-date-box span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 5px;
}

.dashboard-date-box strong {
    color: var(--navy);
    font-size: 16px;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.dashboard-stat-card {
    background: var(--white);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(220, 228, 238, 0.85);
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.stat-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.stat-icon i {
    font-size: 21px;
}

.blue-stat {
    background: #dbeafe;
    color: #1d4ed8;
}

.green-stat {
    background: #dcfce7;
    color: #166534;
}

.orange-stat {
    background: #ffedd5;
    color: #9a3412;
}

.red-stat {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-stat-card span {
    color: var(--muted);
    font-size: 13px;
}

.dashboard-stat-card strong {
    display: block;
    color: var(--navy);
    font-size: 30px;
    margin: 5px 0;
}

.dashboard-stat-card p {
    color: #4b5563;
    font-size: 13px;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(350px, 0.8fr);
    gap: 22px;
    align-items: start;
}

.dashboard-map-section {
    min-height: 520px;
}

.dashboard-map {
    position: relative;
    height: 420px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    background:
        linear-gradient(135deg, rgba(12,35,64,0.05), rgba(29,103,216,0.08)),
        repeating-linear-gradient(
            45deg,
            #e3ebf5,
            #e3ebf5 16px,
            #f8fafc 16px,
            #f8fafc 32px
        );
}

.dashboard-map::before {
    content: "";
    position: absolute;
    inset: 45px 70px;
    border: 22px solid rgba(12, 35, 64, 0.14);
    border-radius: 48px;
    transform: rotate(-8deg);
}

.dashboard-route-line {
    position: absolute;
    width: 62%;
    height: 54%;
    left: 18%;
    top: 24%;
    border: 6px solid var(--blue);
    border-left-color: transparent;
    border-bottom-color: var(--green);
    border-radius: 46%;
    transform: rotate(-12deg);
    z-index: 2;
}

.dashboard-point {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    border: 4px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(12, 35, 64, 0.25);
    z-index: 4;
}

.dash-point-1 {
    left: 22%;
    top: 31%;
}

.dash-point-2 {
    left: 45%;
    top: 20%;
}

.dash-point-3 {
    right: 22%;
    top: 36%;
}

.dash-point-4 {
    right: 30%;
    bottom: 23%;
}

.dash-point-5 {
    left: 30%;
    bottom: 20%;
}

.dashboard-guard-position {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 53%;
    top: 50%;
    border: 4px solid var(--white);
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(34,197,94,.16);
    z-index: 5;
}

.dashboard-map-legend {
    margin-top: 15px;
}

.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 22px;
    margin-top: 24px;
}

.compliance-list {
    display: grid;
    gap: 18px;
}

.compliance-list div span {
    color: var(--muted);
    font-size: 13px;
}

.compliance-list div strong {
    float: right;
    color: var(--navy);
    font-size: 14px;
}

/* Responsive Dashboard */

@media (max-width: 1200px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 700px) {
    .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-date-box {
        width: 100%;
    }

    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-map {
        height: 320px;
    }
}

/* =====================================================
   DASHBOARD SIN PANEL LATERAL
===================================================== */

.dashboard-layout-full {
    grid-template-columns: 1fr;
}

.dashboard-layout-full .dashboard-map-section {
    width: 100%;
}

.dashboard-layout-full .dashboard-map {
    height: 480px;
}

/* =====================================================
   ICONOS INTERNOS - GUARDIAS ADMIN
===================================================== */

.guard-details span i {
    width: 15px;
    min-width: 15px;
    color: var(--blue);
    font-size: 13px;
}

/* =====================================================
   ICONOS INTERNOS - RUTAS ADMIN
===================================================== */

.route-admin-header h4 i {
    color: var(--blue);
    font-size: 15px;
}

.route-admin-stats span i {
    width: 15px;
    min-width: 15px;
    color: var(--blue);
    font-size: 13px;
}

.route-last-info small {
    display: flex;
    align-items: center;
    gap: 7px;
}

.route-last-info small i {
    width: 15px;
    min-width: 15px;
    color: var(--blue);
    font-size: 12px;
}

/* =====================================================
   ICONOS INTERNOS - RECORRIDOS ADMIN
===================================================== */

.recorrido-icon.success-icon {
    background: #dcfce7;
    color: #166534;
}

.recorrido-icon.danger-icon {
    background: #fee2e2;
    color: #991b1b;
}

.recorrido-icon.pending-icon {
    background: #fef3c7;
    color: #92400e;
}

.recorrido-progress-row span i {
    width: 15px;
    min-width: 15px;
    color: var(--blue);
    font-size: 13px;
}

.recorrido-card-footer small i {
    width: 15px;
    min-width: 15px;
    color: var(--blue);
    font-size: 12px;
}

.detail-info-box h4 i,
.evidence-preview-box h4 i {
    color: var(--blue);
    font-size: 15px;
}

.detail-row span i {
    width: 15px;
    min-width: 15px;
    color: var(--blue);
    font-size: 13px;
}

.evidence-thumb i {
    font-size: 17px;
    color: var(--blue);
}
/* =====================================================
   AJUSTES GUARDIA - RECORRIDO
===================================================== */

.evidence-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.route-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.route-action i {
    font-size: 15px;
}

.guard-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.guard-bottom-nav a i {
    font-size: 16px;
}

/* =====================================================
   FORMULARIO ADMIN - GUARDIAS
===================================================== */

.guard-form {
    width: 100%;
}

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

.form-grid .form-group {
    margin-bottom: 0;
}

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

.form-actions .admin-secondary-btn {
    width: auto;
    min-width: 150px;
}

.form-actions .admin-primary-btn {
    min-width: 170px;
}

.form-note {
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.form-note i {
    margin-top: 2px;
}

.admin-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.guard-card-actions {
    flex-wrap: wrap;
}

.guard-card-actions button {
    min-width: 110px;
}

@media (max-width: 1050px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .admin-secondary-btn,
    .form-actions .admin-primary-btn {
        width: 100%;
    }
}

/* =====================================================
   HISTORIAL GUARDIA - AJUSTE VISUAL
===================================================== */
.history-page-section {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}


.history-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.history-stat-card {
    background: var(--white);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 96px;
}

.history-stat-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.history-stat-card span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.25;
    margin-bottom: 4px;
}

.history-stat-card strong {
    color: var(--navy);
    font-size: 24px;
    line-height: 1;
}

.history-layout {
    display: grid;
    grid-template-columns: minmax(560px, 1fr) 360px;
    gap: 24px;
    align-items: flex-start;
}

.history-layout > .guard-card {
    padding: 26px;
}

.history-list {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.history-card {
    background: var(--white);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s ease;
}

.history-card:hover,
.history-card.active-history {
    border-color: rgba(37, 99, 235, 0.28);
    transform: translateY(-2px);
}

.history-card-top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.history-title {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
}

.history-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-title h3 {
    color: var(--navy);
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 6px;
}

.history-title p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.3;
}

.history-data-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 12px;
}

.history-data-grid div {
    background: #f8fafc;
    border-radius: 16px;
    padding: 14px;
    min-height: 74px;
}

.history-data-grid span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
    margin-bottom: 8px;
}

.history-data-grid span i {
    color: var(--blue);
    width: 14px;
    min-width: 14px;
}

.history-data-grid strong {
    display: block;
    color: var(--navy);
    font-size: 14px;
    line-height: 1.25;
}

.history-detail-box {
    background: var(--white);
    border-radius: 22px;
    padding: 24px 22px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 24px;
    min-width: 0;
}

.history-detail-box h3 {
    color: var(--navy);
    font-size: 21px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.history-detail-box > p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.detail-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(100px, auto);
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #eef2f7;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.25;
}

.detail-row span i {
    width: 16px;
    min-width: 16px;
    color: var(--blue);
}

.detail-row strong {
    color: var(--navy);
    font-size: 14px;
    line-height: 1.25;
    text-align: right;
    word-break: normal;
}

.incident-box {
    margin-top: 20px;
    padding: 16px;
    border-radius: 18px;
    background: #fef2f2;
    color: #991b1b;
    display: none;
}

.incident-box.active {
    display: block;
}

.incident-box h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 8px;
}

.incident-box p {
    font-size: 13px;
    line-height: 1.45;
}

.empty-history-message {
    display: none;
    padding: 18px;
    border-radius: 16px;
    background: #f8fafc;
    color: var(--muted);
    text-align: center;
    border: 1px dashed #cbd5e1;
    font-size: 14px;
}

.empty-history-message.active {
    display: block;
}

/* =====================================================
   AJUSTE PARA TABLET / IPAD
===================================================== */

@media (max-width: 1100px) {
    .history-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .history-detail-box {
        position: static;
    }
}

/* =====================================================
   AJUSTE PARA CELULAR
===================================================== */

@media (max-width: 640px) {
    .history-summary-grid {
        grid-template-columns: 1fr;
    }

    .history-layout > .guard-card,
    .history-detail-box {
        padding: 20px;
    }

    .history-card {
        padding: 18px;
    }

    .history-card-top {
        grid-template-columns: 1fr;
    }

    .history-card-top .badge {
        width: fit-content;
    }

    .history-data-grid {
        grid-template-columns: 1fr;
    }

    .detail-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .detail-row strong {
        text-align: left;
    }
}