/* ============================================================
   components.css
   Sistema de Gestión de Refugios
   Design system institucional — tokens, botones, badges,
   cards, formularios, tablas, alertas.
   ============================================================ */

/* ──────────────────────────────────────────────────────
   VARIABLES (tokens del design system institucional)
   ────────────────────────────────────────────────────── */
:root {
    --primary:       #1a3a5c;
    --primary-light: #2c5282;
    --primary-dark:  #0f2440;

    --success:       #16a34a;
    --success-bg:    #f0fdf4;
    --success-border:#bbf7d0;

    --warning:       #d97706;
    --warning-bg:    #fffbeb;
    --warning-border:#fde68a;

    --danger:        #dc2626;
    --danger-bg:     #fef2f2;
    --danger-border: #fecaca;

    --info:          #2563eb;
    --info-bg:       #eff6ff;
    --info-border:   #bfdbfe;

    --accent:        #f2c300;

    --neutral:       #6b7280;
    --neutral-bg:    #f3f4f6;
    --neutral-border:#d1d5db;

    --muted:         #9ca3af;

    --text:          #1f2937;
    --text-secondary:#6b7280;
    --text-light:    #9ca3af;

    --bg:            #f0f2f5;
    --bg-white:      #ffffff;

    --border:        #e5e7eb;
    --border-light:  #f3f4f6;

    --font-family:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

    --radius-sm:     4px;
    --radius-md:     8px;
    --radius-lg:     12px;

    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:     0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg:     0 10px 15px rgba(0, 0, 0, 0.1);

    --transition:    0.2s ease;
}

/* ──────────────────────────────────────────────────────
   BASE
   ────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    color: var(--text);
    background: var(--bg);
    margin: 0;
    line-height: 1.5;
}

/* ──────────────────────────────────────────────────────
   TIPOGRAFÍA
   ────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.5em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--primary-dark);
}

p {
    margin: 0 0 1em;
}

/* ──────────────────────────────────────────────────────
   BOTONES
   ────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.btn-primary:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
}

.btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn-success:hover {
    background: #15803d;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn-danger:hover {
    background: #b91c1c;
}

.btn-warning {
    background: var(--warning);
    color: #fff;
    border-color: var(--warning);
}
.btn-warning:hover {
    background: #b45309;
}

.btn-info {
    background: var(--info);
    color: #fff;
    border-color: var(--info);
}
.btn-info:hover {
    background: #1d4ed8;
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn-outline:hover {
    background: var(--bg);
    border-color: var(--neutral);
}

.btn:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────
   BADGES
   ────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 9999px;
    white-space: nowrap;
}

.badge svg {
    flex-shrink: 0;
    display: inline-flex;
}

.badge > span {
    vertical-align: middle;
}

.badge-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.badge-info {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-border);
}

.badge-neutral {
    background: var(--neutral-bg);
    color: var(--neutral);
    border: 1px solid var(--neutral-border);
}

/* ──────────────────────────────────────────────────────
   CARDS
   ────────────────────────────────────────────────────── */
.card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
}

/* ──────────────────────────────────────────────────────
   FORMULARIOS
   ────────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.375rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-family);
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.cedula-field-group {
    display: grid;
    grid-template-columns: minmax(9rem, 0.45fr) minmax(0, 1fr);
    gap: 0.5rem;
}

.cedula-nationality-select {
    min-width: 0;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: var(--danger);
}

.form-error {
    font-size: 0.8125rem;
    color: var(--danger);
    margin-top: 0.25rem;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 1rem;
    height: 1rem;
}

.form-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

/* ──────────────────────────────────────────────────────
   TABLAS
   ────────────────────────────────────────────────────── */
.table-container {
    overflow-x: auto;
    max-width: 100%;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.75rem 0.75rem;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: #fafafa;
}

.table-actions {
    display: flex;
    gap: 0.375rem;
    flex-wrap: nowrap;
}

.table-action-menu {
    position: relative;
    display: inline-block;
}

.table-action-menu summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.table-action-menu summary::-webkit-details-marker {
    display: none;
}

.table-action-menu-panel {
    position: fixed;
    z-index: 40;
    min-width: 190px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-white);
    box-shadow: var(--shadow-lg);
}

.table-action-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--border-light);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.table-action-menu-item:hover {
    background: #f8fafc;
}

.table-action-menu-panel > :last-child .table-action-menu-item,
.table-action-menu-panel > .table-action-menu-item:last-child {
    border-bottom: 0;
}

.table-action-menu-panel form {
    margin: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

@media (max-width: 640px) {
    .table-container {
        overflow-x: visible;
    }

    .table {
        border-collapse: separate;
        border-spacing: 0 0.75rem;
    }

    .table thead {
        display: none;
    }

    .table tbody tr {
        display: block;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-white);
        box-shadow: var(--shadow-sm);
    }

    .table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.45rem 0;
        border-bottom: 1px solid var(--border-light);
        text-align: right;
        word-break: break-word;
    }

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

    .table tbody td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        max-width: 42%;
        text-align: left;
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .table-actions,
    .refugios-actions,
    .residentes-actions,
    .novedades-actions,
    .inventory-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .table-actions .btn,
    .refugios-actions .btn,
    .residentes-actions .btn,
    .novedades-actions .btn,
    .inventory-actions .btn {
        min-height: 44px;
        justify-content: center;
    }

    .page-header-right,
    .form-actions,
    .modal-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .page-header-right .btn,
    .form-actions .btn,
    .modal-actions .btn {
        min-height: 44px;
    }

    .form-input,
    .form-select,
    .form-textarea,
    .btn {
        max-width: 100%;
    }
}

@media (max-width: 375px) {
    .table tbody td {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        text-align: left;
    }

    .table tbody td::before {
        flex-basis: auto;
        max-width: 100%;
    }
}

/* ──────────────────────────────────────────────────────
   ALERTAS
   ────────────────────────────────────────────────────── */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.alert-success {
    background: var(--success-bg);
    color: #166534;
    border-color: var(--success-border);
}

.alert-danger {
    background: var(--danger-bg);
    color: #991b1b;
    border-color: var(--danger-border);
}

.alert-warning {
    background: var(--warning-bg);
    color: #92400e;
    border-color: var(--warning-border);
}

.alert-info {
    background: var(--info-bg);
    color: #1e40af;
    border-color: var(--info-border);
}

.alert-dismissible {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alert-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    line-height: 1;
    padding: 0 0.25rem;
}

.alert-close:hover {
    opacity: 0.7;
}

/* ──────────────────────────────────────────────────────
   PAGE HEADER
   ────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header-left {
    flex: 1;
    min-width: 0;
}

.page-header-right {
    flex-shrink: 0;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.page-subtitle {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ──────────────────────────────────────────────────────
   EMPTY STATE
   ────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state-icon {
    margin-bottom: 1rem;
    opacity: 0.4;
}

.empty-state-icon svg {
    width: 64px;
    height: 64px;
}

.empty-state-title {
    font-size: 1.125rem;
    color: var(--text);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.empty-state-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    max-width: 400px;
    margin: 0 auto 1.5rem;
}

/* ──────────────────────────────────────────────────────
   KPI GRID
   ────────────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
}

.kpi-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--info-bg);
    color: var(--info);
}

.kpi-card-warning .kpi-card-icon {
    background: var(--warning-bg);
    color: var(--warning);
}

.kpi-card-success .kpi-card-icon {
    background: var(--success-bg);
    color: var(--success);
}

.kpi-card-danger .kpi-card-icon {
    background: var(--danger-bg);
    color: var(--danger);
}

.kpi-card-neutral .kpi-card-icon {
    background: var(--neutral-bg);
    color: var(--neutral);
}

.kpi-card-icon svg {
    width: 24px;
    height: 24px;
}

.kpi-card-body {
    min-width: 0;
}

.kpi-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

.kpi-card-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

.kpi-card-desc {
    display: none;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.125rem;
}

@media (min-width: 769px) {
    .kpi-card-desc {
        display: block;
    }
}

/* ──────────────────────────────────────────────────────
   SOS — EMERGENCY BUTTONS
   ────────────────────────────────────────────────────── */
.sos-info-message {
    margin-bottom: 1.5rem;
}

.alert-content {
    flex: 1;
}

.sos-botones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn-sos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 140px;
    padding: 1.25rem 0.75rem;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    transition: all var(--transition);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.btn-sos:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-sos:active {
    transform: translateY(0);
}

.btn-sos-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.btn-sos-label {
    font-size: 0.9375rem;
    line-height: 1.3;
}

.btn-sos-ambulancia {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: #dc2626;
}
.btn-sos-ambulancia:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.btn-sos-bomberos {
    background: linear-gradient(135deg, #d97706, #b45309);
    border-color: #d97706;
}
.btn-sos-bomberos:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.btn-sos-policia {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #2563eb;
}
.btn-sos-policia:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.btn-sos-proteccion-civil {
    background: linear-gradient(135deg, #059669, #047857);
    border-color: #059669;
}
.btn-sos-proteccion-civil:hover {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* ──────────────────────────────────────────────────────
   SOS — MODAL
   ────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-light);
    padding: 0.25rem;
    line-height: 1;
    border-radius: var(--radius-sm);
}

.modal-close:hover {
    color: var(--text);
    background: var(--bg);
}

.modal-body {
    padding: 1.5rem;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* ──────────────────────────────────────────────────────
   Modal contenedor (usado en inventario)
   ────────────────────────────────────────────────────── */

.modal-container {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
}

body.modal-open {
    overflow: hidden;
}

/* ──────────────────────────────────────────────────────
   Historial de movimientos
   ────────────────────────────────────────────────────── */

.inventory-historial-container {
    margin-top: 1.5rem;
}

.inventory-historial-table th {
    white-space: nowrap;
}

.inventory-historial-cantidad {
    font-weight: 600;
    text-align: center;
}

.inventory-historial-entrada {
    color: var(--success);
}

.inventory-historial-salida {
    color: var(--warning);
}

.inventory-historial-observacion {
    max-width: 250px;
    white-space: normal;
    word-break: break-word;
}

.inventory-historial-resumen {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.inventory-historial-resumen-item {
    flex: 1;
    min-width: 180px;
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inventory-historial-resumen-label {
    font-size: 0.8125rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inventory-historial-resumen-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.inventory-historial-resumen-total {
    font-size: 1.25rem;
    font-weight: 700;
}

.inventory-historial-resumen-entradas .inventory-historial-resumen-total {
    color: var(--success);
}

.inventory-historial-resumen-salidas .inventory-historial-resumen-total {
    color: var(--warning);
}

.inventory-detalle-fecha {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Responsive: tabla como cards en mobile */
@media (max-width: 768px) {
    .inventory-historial-table thead {
        display: none;
    }
    .inventory-historial-table tbody tr {
        display: block;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 0.75rem;
    }
    .inventory-historial-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0;
        border: none;
        text-align: right;
    }
    .inventory-historial-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.8125rem;
        color: var(--text-secondary);
        text-align: left;
    }
    .inventory-historial-table td.inventory-historial-cantidad {
        justify-content: flex-end;
    }
    .inventory-historial-resumen {
        flex-direction: column;
    }
    .inventory-historial-resumen-item {
        min-width: unset;
    }
}

.sos-modal-header.sos-modal-header {
    border-bottom-color: var(--danger);
}

.sos-modal-icon {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;
}

.sos-modal-tipo {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--danger);
    margin-bottom: 0.5rem;
}

.sos-modal-descripcion {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

.sos-confirm-btn {
    min-width: 180px;
}

.sos-modal-actions {
    justify-content: center;
}

/* ──────────────────────────────────────────────────────
   SOS — TABLA DE ALERTAS ACTIVAS
   ────────────────────────────────────────────────────── */
.sos-alertas-section {
    margin-top: 1.5rem;
}

.sos-alertas-section .page-header {
    margin-bottom: 1rem;
}

.sos-alertas-count {
    font-size: 0.875rem;
}

.sos-table td {
    vertical-align: middle;
}

.sos-alerta-row td:first-child {
    border-left: 3px solid transparent;
}
.sos-alerta-ambulancia td:first-child {
    border-left-color: var(--danger);
}
.sos-alerta-bomberos td:first-child {
    border-left-color: var(--warning);
}
.sos-alerta-policia td:first-child {
    border-left-color: var(--info);
}
.sos-alerta-proteccion_civil td:first-child {
    border-left-color: var(--success);
}

.sos-tipo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.sos-tipo-badge-lg {
    font-size: 1rem;
    padding: 0.375rem 1rem;
}

.sos-tipo-ambulancia {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.sos-tipo-bomberos {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.sos-tipo-policia {
    background: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info-border);
}

.sos-tipo-proteccion_civil {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.sos-refugio-nombre {
    font-weight: 500;
}

.sos-obs-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* ──────────────────────────────────────────────────────
   SOS — DETALLE
   ────────────────────────────────────────────────────── */
.sos-detalle-card .card-body {
    padding: 1.5rem;
}

.sos-detalle-estado {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.sos-detalle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.sos-detalle-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sos-detalle-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.sos-detalle-value {
    font-size: 0.9375rem;
    color: var(--text);
}

.sos-detalle-observacion {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.sos-detalle-observacion-texto {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.sos-detalle-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
}

/* ──────────────────────────────────────────────────────
   SOS — KPI
   ────────────────────────────────────────────────────── */
.sos-kpi-grid {
    margin-bottom: 1rem;
}

/* ──────────────────────────────────────────────────────
   NOTIFICACIONES — BADGE EN NAVBAR
   ────────────────────────────────────────────────────── */
.notif-badge-wrapper {
    position: relative;
    margin-right: 0.5rem;
}

.notif-badge-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: background var(--transition);
    text-decoration: none;
}

.notif-badge-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.notif-badge-link svg {
    width: 20px;
    height: 20px;
}

.notif-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--primary);
}

.notif-badge-count.zero {
    display: none;
}

.notif-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--text);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    min-width: 220px;
    font-size: 0.8125rem;
    box-shadow: var(--shadow-lg);
    z-index: 200;
}

.notif-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: var(--text);
    transform: rotate(45deg);
}

.notif-tooltip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.notif-tooltip-item:last-child {
    border-bottom: none;
}

.notif-tooltip-label {
    color: rgba(255, 255, 255, 0.8);
}

.notif-tooltip-value {
    font-weight: 600;
    color: #fff;
}

.notif-badge-wrapper:hover .notif-tooltip {
    display: block;
}

/* ──────────────────────────────────────────────────────
   SMTP — CONFIGURATION FORM
   ────────────────────────────────────────────────────── */
.form-help-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.25rem;
    line-height: 1.4;
}

.form-group-half {
    min-width: 0;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

/* ──────────────────────────────────────────────────────
   FOCUS VISIBLE (accesibilidad)
   ────────────────────────────────────────────────────── */
.btn:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────
   RESPONSIVE — SOS MODULE
   ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sos-botones-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .btn-sos {
        min-height: 120px;
        padding: 1rem 0.5rem;
    }

    .btn-sos-icon {
        font-size: 2rem;
    }

    .sos-detalle-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .sos-botones-grid {
        grid-template-columns: 1fr;
    }

    .btn-sos {
        min-height: 100px;
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .btn-sos-icon {
        font-size: 1.75rem;
    }

    .btn-sos-label {
        font-size: 0.875rem;
    }

    .sos-detalle-grid {
        grid-template-columns: 1fr;
    }
}

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

    .page-header {
        flex-direction: column;
    }

    .page-header-right {
        width: 100%;
    }
}

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

    .modal {
        max-width: 100%;
        border-radius: var(--radius-md);
    }

    .modal-body {
        padding: 1rem;
    }
}

/* ──────────────────────────────────────────────────────
   PAGE HEADER (título + acciones)
   ────────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.page-header-left {
    flex: 1;
    min-width: 0;
}

.page-header-right {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.page-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.page-subtitle strong {
    color: var(--text);
    font-weight: 600;
}

.page-subtitle .badge {
    vertical-align: middle;
}

/* ──────────────────────────────────────────────────────
   ESTADO VACÍO (empty state)
   ────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 4rem 1.5rem;
}

.empty-state-icon {
    margin-bottom: 1.5rem;
    color: var(--text-light);
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-state-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    max-width: 400px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

/* ──────────────────────────────────────────────────────
   TABLA DE REFUGIOS
   ────────────────────────────────────────────────────── */
.refugios-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.refugios-table td {
    vertical-align: middle;
}

.refugio-codigo {
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--neutral-bg);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.refugio-nombre-link {
    font-weight: 500;
}

.refugio-status-badge {
    display: inline-block;
}

.refugio-status-badge .badge {
    min-width: 60px;
    text-align: center;
}

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

.refugios-table-container {
    overflow: visible;
}

.refugios-count {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    text-align: right;
}

/* ──────────────────────────────────────────────────────
   FORMULARIO DE REFUGIOS
   ────────────────────────────────────────────────────── */
.refugios-form {
    max-width: 960px;
}

.refugios-form .form-row {
    margin-bottom: 0;
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    user-select: none;
}

.form-check-inline:hover {
    border-color: var(--primary-light);
    background: #f8faff;
}

.form-check-inline:has(input:checked) {
    border-color: var(--success);
    background: var(--success-bg);
    color: #166534;
}

.form-check-inline input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}

.form-check-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.form-photo-placeholder {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--neutral-bg);
}

.form-photo-placeholder svg {
    flex-shrink: 0;
    color: var(--text-light);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    margin-top: 1rem;
}

/* ──────────────────────────────────────────────────────
   FICHA DEL REFUGIO (show)
   ────────────────────────────────────────────────────── */
.refugio-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
}

.refugio-detail-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.refugio-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.refugio-card .card-header {
    padding: 0.875rem 1.25rem;
}

.refugio-card .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.refugio-card .card-title svg {
    color: var(--primary-light);
    flex-shrink: 0;
}

/* Detalle en lista (definition list) */
.detail-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.75rem;
    align-items: baseline;
}

.detail-row dt {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.detail-row dd {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text);
}

/* Grid de servicios */
.servicios-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.servicio-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
}

.servicio-item.is-disponible {
    background: var(--success-bg);
    color: #166534;
}

.servicio-item.is-no-disponible {
    background: var(--neutral-bg);
    color: var(--text-light);
}

.servicio-icon {
    display: flex;
}

/* Foto placeholder */
.refugio-photo-placeholder {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-light);
}

.refugio-photo-placeholder svg {
    display: block;
    margin: 0 auto;
}

/* Estado en la sidebar */
.refugio-status-card {
    text-align: center;
    padding: 0.5rem 0;
}

.refugio-status-badge-large .badge {
    font-size: 0.875rem;
    padding: 0.25rem 1rem;
}

/* ──────────────────────────────────────────────────────
   REFUGIOS — RESPONSIVE
   ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .refugio-detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .detail-row dt {
        font-size: 0.75rem;
    }

    .page-header {
        flex-direction: column;
    }

    .page-header-right {
        width: 100%;
    }

    .page-header-right .btn {
        flex: 1;
        justify-content: center;
    }

    .refugios-actions {
        flex-direction: column;
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .empty-state {
        padding: 3rem 1rem;
    }

    .form-check-group {
        flex-direction: column;
    }

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

    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ──────────────────────────────────────────────────────
   FOTO — formulario y ficha
   ────────────────────────────────────────────────────── */
.form-input-file {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

.form-help {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.form-help-inline {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
}

.form-photo-current {
    margin-bottom: 0.75rem;
}

.form-photo-preview-area {
    margin-top: 0.5rem;
}

.form-photo-preview {
    max-width: 200px;
    max-height: 150px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    display: block;
    margin-bottom: 0.375rem;
}

.form-photo-current-label {
    font-size: 0.8125rem;
    margin: 0;
}

.form-photo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.form-photo-actions .form-input-file {
    flex: 1 1 260px;
    max-width: 420px;
}

.form-photo-camera-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.form-photo-status {
    margin: 0.5rem 0 0;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--neutral-bg);
    color: var(--text-secondary);
    border: 1px solid var(--neutral-border);
    font-size: 0.8125rem;
}

.form-photo-status[data-type="success"] {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
}

.form-photo-status[data-type="warning"] {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning-border);
}

@media (max-width: 480px) {
    .form-photo-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .form-photo-actions .form-input-file {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
    }

    .form-photo-actions .btn {
        justify-content: center;
        width: 100%;
    }
}

/* ──────────────────────────────────────────────────────
   RESIDENTES — FORMULARIO GUIADO
   ────────────────────────────────────────────────────── */
.residentes-wizard {
    --wizard-accent: var(--info);
}

.residentes-wizard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.02));
}

.residentes-wizard-kicker {
    margin: 0 0 0.25rem;
    color: var(--wizard-accent);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.residentes-wizard-title {
    margin: 0;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
}

.residentes-wizard-help {
    margin: 0.35rem 0 0;
    color: var(--text-light);
    font-size: 0.9375rem;
}

.residentes-wizard-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 64px;
    border-radius: 999px;
    background: var(--bg-white);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: var(--wizard-accent);
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.residentes-wizard-steps {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.residentes-wizard-step-pill {
    min-width: 120px;
    min-height: 58px;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-white);
    color: var(--text-light);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), color var(--transition), background var(--transition);
}

.residentes-wizard-step-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.35rem;
    border-radius: 999px;
    background: var(--bg-muted);
    color: inherit;
    font-size: 0.8rem;
    font-weight: 700;
}

.residentes-wizard-step-pill strong {
    display: block;
    margin-top: 0.25rem;
    color: inherit;
    font-size: 0.8rem;
    line-height: 1.2;
}

.residentes-wizard-step-pill.active {
    border-color: var(--wizard-accent);
    background: rgba(37, 99, 235, 0.08);
    color: var(--wizard-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.residentes-wizard-step-pill.done {
    border-color: rgba(22, 163, 74, 0.35);
    color: var(--success);
}

.residentes-wizard-message {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-muted);
    color: var(--text);
    font-size: 0.9rem;
}

.residentes-wizard-message[data-type="error"] {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.08);
    color: var(--danger);
}

.residentes-wizard-message[data-type="warning"] {
    border-color: rgba(217, 119, 6, 0.35);
    background: rgba(217, 119, 6, 0.08);
    color: var(--warning);
}

.residentes-wizard-ready .residentes-wizard-source {
    display: none;
}

.residentes-step-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-white);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.residentes-step-card-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-muted);
}

.residentes-step-card-header h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 700;
}

.residentes-step-card-header p {
    margin: 0.35rem 0 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

.residentes-step-badge {
    display: inline-flex;
    margin-bottom: 0.45rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--wizard-accent);
    font-size: 0.75rem;
    font-weight: 700;
}

.residentes-step-card-body {
    padding: 1rem;
}

.residentes-wizard-section + .residentes-wizard-section {
    margin-top: 1rem;
}

.residentes-subsection-title {
    margin: 0 0 0.35rem;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
}

.residentes-wizard-field-error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.residentes-wizard-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    justify-content: flex-end;
    background: var(--bg-white);
}

.residentes-wizard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.residentes-summary-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-white);
    padding: 1rem;
}

.residentes-summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.residentes-summary-card h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.residentes-summary-card dl {
    display: grid;
    gap: 0.6rem;
    margin: 0;
}

.residentes-summary-card dl div {
    display: grid;
    gap: 0.15rem;
}

.residentes-summary-card dt {
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.residentes-summary-card dd {
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

.residentes-internal-details {
    margin-top: 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
}

.residentes-internal-details summary {
    padding: 0.85rem 1rem;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}

.residentes-internal-body {
    padding: 0 1rem 1rem;
}

.residentes-empty-step {
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--text-light);
}

.familiar-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-muted);
}

.familiar-card-toggle {
    flex: 1;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.familiar-card-title {
    display: block;
    font-weight: 700;
}

.familiar-card-subtitle {
    display: block;
    margin-top: 0.15rem;
    color: var(--text-light);
    font-size: 0.8rem;
}

.familiar-card-collapsed .familiar-card-header {
    border-bottom: 0;
}

.residentes-family-list {
    display: grid;
    gap: 0.75rem;
}

.residentes-family-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-white);
}

.residentes-family-card.current {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.05);
}

.residentes-family-card-main {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.residentes-family-card-main strong,
.residentes-family-card-main span {
    overflow-wrap: anywhere;
}

.residentes-family-card-main span {
    color: var(--text-light);
    font-size: 0.85rem;
}

.residentes-family-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.residentes-family-meta div {
    display: grid;
    gap: 0.1rem;
}

.residentes-family-meta dt {
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.residentes-family-meta dd {
    margin: 0;
    color: var(--text);
    font-size: 0.9rem;
}

.residentes-family-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .residentes-wizard-header {
        flex-direction: column;
    }

    .residentes-wizard-count {
        min-width: 52px;
        min-height: 52px;
    }

    .residentes-wizard-steps {
        display: flex;
        scroll-snap-type: x proximity;
    }

    .residentes-wizard-step-pill {
        flex: 0 0 44%;
        scroll-snap-align: start;
    }

    .residentes-step-card-body,
    .residentes-step-card-header {
        padding: 0.9rem;
    }

    .residentes-step-card-body .form-row,
    .residentes-step-card-body .cedula-field-group {
        grid-template-columns: 1fr;
    }

    .residentes-wizard-actions {
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 1rem;
        box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.08);
    }

    .residentes-wizard-actions .btn {
        min-height: 44px;
    }

    .residentes-family-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .residentes-family-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .residentes-wizard-step-pill {
        flex-basis: 72%;
    }

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

    .residentes-wizard-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .familiar-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .residentes-family-meta {
        grid-template-columns: 1fr;
    }
}

.refugio-photo-wrapper {
    text-align: center;
}

.refugio-photo {
    max-width: 100%;
    max-height: 240px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    object-fit: cover;
}

/* ──────────────────────────────────────────────────────
   OCUPACIÓN — tarjeta en ficha
   ────────────────────────────────────────────────────── */
.ocupacion-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ocupacion-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ocupacion-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.ocupacion-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.ocupacion-bar {
    height: 8px;
    background: var(--neutral-bg);
    border-radius: 9999px;
    overflow: hidden;
}

.ocupacion-bar-fill {
    height: 100%;
    background: var(--success);
    border-radius: 9999px;
    transition: width 0.3s ease;
    min-width: 0;
}

.ocupacion-bar-fill[style*="width: 100%"],
.ocupacion-bar-fill[style*="width:100%"] {
    background: var(--danger);
}

.ocupacion-placeholder {
    text-align: center;
    padding: 1rem 0;
}

.ocupacion-placeholder p {
    margin: 0;
}

.text-success {
    color: var(--success) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.fw-semibold {
    font-weight: 600;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

/* ──────────────────────────────────────────────────────
   RESIDENTES — TABLA DE LISTADO
   ────────────────────────────────────────────────────── */
.residentes-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.residentes-table td {
    vertical-align: middle;
}

.residentes-table .residente-row-egresado td {
    opacity: 0.7;
}

.residentes-table .residente-row-egresado:hover td {
    opacity: 1;
}

/* Avatar / foto placeholder en tabla */
.residente-foto-cell {
    width: 40px;
    padding-right: 0 !important;
}

.residente-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--neutral-bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    flex-shrink: 0;
}

/* Cédula en tabla */
.residente-cedula {
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--neutral-bg);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* Nombre */
.residente-nombre-link {
    font-weight: 500;
}

/* Tag de refugio en tabla */
.residente-refugio-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.8125rem;
    background: var(--info-bg);
    color: var(--info);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.residente-refugio-cell {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fecha en tabla */
.residente-fecha-cell {
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Acciones */
.residentes-actions {
    justify-content: flex-end;
}

.residentes-count {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    text-align: right;
}

/* Botón danger outline */
.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger-border);
}
.btn-outline-danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}

/* Badges específicos de residentes */
.badge-residente-estado {
    min-width: 60px;
    text-align: center;
}

.badge-residente-verificacion {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 80px;
    text-align: center;
}

/* ──────────────────────────────────────────────────────
   RESIDENTES — FICHA (SHOW)
   ────────────────────────────────────────────────────── */
.residente-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
}

.residente-detail-grid-egresado {
    opacity: 0.85;
}

.residente-detail-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.residente-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Tarjetas de residente */
.residente-card .card-header {
    padding: 0.875rem 1.25rem;
}

.residente-card .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.residente-card .card-title svg {
    color: var(--primary-light);
    flex-shrink: 0;
}

/* Alertas de verificación y egreso */
.verification-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    color: #92400e;
}

.verification-alert svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--warning);
}

.verification-alert-content {
    flex: 1;
}

.verification-alert-content strong {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.verification-alert-content p {
    margin: 0;
    font-size: 0.8125rem;
}

.egresado-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--neutral-bg);
    border: 1px solid var(--neutral-border);
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    color: var(--text-secondary);
}

.egresado-alert svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--neutral);
}

/* Grid de condiciones especiales */
.residente-condiciones-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.residente-condicion-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--success-bg);
    color: #166534;
}

/* Placeholder en ficha */
.residente-placeholder {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-light);
}

.residente-placeholder svg {
    display: block;
    margin: 0 auto;
}

/* Foto placeholder */
.residente-photo-placeholder {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-light);
}

.residente-photo-placeholder svg {
    display: block;
    margin: 0 auto;
}

/* Badge grande en sidebar */
.residente-status-badge-large .badge {
    font-size: 0.875rem;
    padding: 0.25rem 1rem;
}

.residente-status-sidebar {
    text-align: center;
    padding: 0.5rem 0;
}

/* Fecha de ingreso en sidebar */
.residente-fechaIngreso {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.residente-fechaIngreso-date {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

/* Acciones en sidebar */
.residente-actions-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ──────────────────────────────────────────────────────
   RESIDENTES — RESPONSIVE
   ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .residente-detail-grid {
        grid-template-columns: 1fr;
    }

    .residentes-actions {
        flex-direction: column;
        gap: 0.25rem;
    }

    .residentes-table .residente-foto-cell,
    .residentes-table .residente-fecha-cell {
        display: none;
    }

    .page-header {
        flex-direction: column;
    }

    .page-header-right {
        width: 100%;
    }

    .page-header-right .btn {
        flex: 1;
        justify-content: center;
    }

    .residente-refugio-cell {
        max-width: 100px;
    }

    .verification-alert {
        flex-direction: column;
    }

    .verification-alert .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .empty-state {
        padding: 3rem 1rem;
    }

    .form-check-group {
        flex-direction: column;
    }

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

    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .residentes-table th:nth-child(6),
    .residentes-table td:nth-child(6),
    .residentes-table th:nth-child(7),
    .residentes-table td:nth-child(7) {
        display: none;
    }
}
/* ──────────────────────────────────────────────────────
   Ficha operativa del residente
   ────────────────────────────────────────────────────── */
.acceso-ficha {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.acceso-ficha-grid {
    display: grid;
    grid-template-columns: 120px 1fr 180px;
    gap: 1.25rem;
    align-items: start;
}

/* Foto */
.acceso-ficha-foto {
    display: flex;
    justify-content: center;
}

.acceso-ficha-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: opacity var(--transition);
}

.acceso-ficha-img:hover {
    opacity: 0.85;
}

.acceso-ficha-img-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--neutral-bg);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

/* Info del residente */
.acceso-ficha-info {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.acceso-ficha-nombre {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}

/* Estado actual como badge destacado en línea con el nombre */
.acceso-ficha-estado-row {
    display: flex;
    align-items: center;
}

.acceso-ficha-estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
}

.acceso-estado-dentro {
    background: var(--success-bg);
    color: #166534;
    border: 1px solid var(--success-border);
}

.acceso-estado-fuera {
    background: var(--warning-bg);
    color: #92400e;
    border: 1px solid var(--warning-border);
}

.acceso-estado-sin {
    background: var(--neutral-bg);
    color: var(--neutral);
    border: 1px solid var(--neutral-border);
}

.acceso-estado-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.acceso-estado-dot-dentro {
    background: var(--success);
}

.acceso-estado-dot-fuera {
    background: var(--warning);
}

.acceso-estado-dot-sin {
    background: var(--neutral);
}

/* Datos secundarios (cedula, edad, etc.) — menos prominentes */
.acceso-ficha-detalles {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.acceso-ficha-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.acceso-ficha-label {
    font-weight: 600;
    color: var(--text-light);
    min-width: 60px;
    flex-shrink: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.acceso-ficha-value {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Último movimiento — columna destacada */
.acceso-ficha-ultimo {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: center;
    text-align: center;
    padding: 1rem 0.75rem;
    background: var(--bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.acceso-ficha-ultimo-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.acceso-ficha-ultimo-tipo {
    margin-bottom: 0.125rem;
}

.acceso-ficha-ultimo-fecha {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
}

.acceso-ficha-ultimo-hora {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

.acceso-ficha-ultimo-responsable {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

.acceso-ficha-ultimo-vacio {
    font-size: 0.8125rem;
    color: var(--text-light);
    font-style: italic;
}
.timeline-empty p {
    margin: 0;
}

/* Timeline separador visual entre items */
.timeline-separator {
    height: 1px;
    background: var(--border-light);
    margin: 0.125rem 0 0.125rem 2.375rem;
}

/* Timeline observaciones */
.timeline-observaciones {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--neutral-bg);
    border-radius: var(--radius-sm);
    font-style: italic;
}
.kpi-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.kpi-card-desc {
    font-size: 0.6875rem;
    color: var(--text-light);
    margin-top: 0.125rem;
    display: none;
}

@media (min-width: 768px) {
    .kpi-card-desc {
        display: block;
    }
}
.historial-count {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    text-align: right;
    color: var(--text-secondary);
}

/* Color sutil en fila según tipo */
.historial-row-entrada td:first-child {
    border-left: 3px solid var(--success);
}

.historial-row-salida td:first-child {
    border-left: 3px solid var(--warning);
}

/* Badge con icono en historial */
.historial-table .badge svg {
    vertical-align: middle;
    margin-right: 2px;
}
.acceso-show-sidebar-info p {
    margin: 0 0 0.25rem;
}

.acceso-show-sidebar-nombre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.acceso-show-sidebar-cedula {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

.acceso-show-sidebar-estado {
    text-align: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.acceso-show-fechahora {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.acceso-show-fecha {
    font-weight: 600;
    color: var(--text);
}

.acceso-show-hora {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--primary);
}
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Focus-visible accesibilidad */
.btn:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
}
/* Tablet: 2 columnas */
@media (max-width: 1024px) {
    .acceso-layout {
        grid-template-columns: 1fr 240px;
    }

    .acceso-ficha-grid {
        grid-template-columns: 100px 1fr 160px;
        gap: 1rem;
    }

    .acceso-show-grid {
        grid-template-columns: 1fr 240px;
    }
}

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

    .acceso-sidebar {
        order: -1;
    }

    .acceso-ficha-grid {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }

    .acceso-ficha-foto {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
        margin-bottom: 0.25rem;
    }

    .acceso-ficha-info {
        align-items: flex-start;
    }

    .acceso-ficha-row {
        justify-content: flex-start;
    }

    .acceso-ficha-ultimo {
        align-self: stretch;
    }

    .acceso-header {
        flex-direction: column;
    }

    .acceso-header-right {
        width: 100%;
    }

    .acceso-header-right .btn {
        flex: 1;
        justify-content: center;
    }

    .acceso-show-grid {
        grid-template-columns: 1fr;
    }

    .acceso-show-sidebar {
        order: -1;
    }
}

/* Móvil: 1 columna, botones full width */
@media (max-width: 480px) {
    .acceso-ficha-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .acceso-ficha-ultimo {
        grid-column: 1 / -1;
    }

    .acceso-acciones {
        grid-template-columns: 1fr;
    }

    .acceso-btn-accion {
        width: 100%;
        min-height: 48px;
        font-size: 0.9375rem;
    }

    .acceso-buscador-input-group {
        flex-direction: column;
    }

    .acceso-buscador-btn {
        width: 100%;
    }

    .acceso-ficha-nombre {
        font-size: 1.125rem;
    }

    .acceso-empty-state {
        padding: 2rem 1rem;
    }

    .acceso-ficha-ultimo-hora {
        font-size: 1.125rem;
    }
}

/* Móvil pequeño 320-375px */
@media (max-width: 375px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .kpi-card {
        padding: 0.75rem;
    }

    .kpi-card-icon {
        width: 36px;
        height: 36px;
    }

    .kpi-card-value {
        font-size: 1.125rem;
    }

    .acceso-ficha-nombre {
        font-size: 1rem;
    }

    .acceso-ficha-img {
        width: 80px;
        height: 80px;
    }

    .acceso-ficha-img-placeholder {
        width: 80px;
        height: 80px;
    }

    .acceso-empty-icon svg {
        width: 48px;
        height: 48px;
    }
}
    .acceso-empty-icon svg {
        width: 48px;
        height: 48px;
    }
}

/* ════════════════════════════════════════════════════════════
   NOVEDADES — F4-03 INTERFAZ COMPLETA
   ════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   Tabla de novedades
   ────────────────────────────────────────────────────── */
.novedades-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.novedades-table td {
    vertical-align: middle;
}

.novedades-table .novedad-row-cerrada td {
    opacity: 0.7;
}

.novedades-table .novedad-row-cerrada:hover td {
    opacity: 1;
}

.novedades-table .novedad-row-critica td {
    background: var(--danger-bg);
}

.novedades-table .novedad-row-critica:hover td {
    background: #fee2e2;
}

/* Grupos visuales en la tabla */
.novedades-group-row td {
    padding: 0 !important;
    border-bottom: none;
}

.novedades-group-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
}

.novedades-group-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.novedades-group-badge {
    font-size: 0.6875rem;
    min-width: 20px;
    text-align: center;
}

/* Tipo tag */
.novedad-tipo-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    background: var(--neutral-bg);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-weight: 500;
    white-space: nowrap;
}

/* Refugio tag */
.novedad-refugio-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.8125rem;
    background: var(--info-bg);
    color: var(--info);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* Título link */
.novedad-titulo-link {
    font-weight: 500;
    display: inline-block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.novedad-titulo-link:hover {
    color: var(--primary);
}

/* Reportado por */
.novedad-reportado {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Fecha */
.novedad-fecha-cell {
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Acciones */
.novedades-actions {
    justify-content: flex-end;
}

.novedades-count {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    text-align: right;
}

/* ──────────────────────────────────────────────────────
   Formulario de novedades
   ────────────────────────────────────────────────────── */
.novedades-form {
    max-width: 960px;
}

.novedades-form .form-row {
    margin-bottom: 0;
}

/* ──────────────────────────────────────────────────────
   Ficha (show) — detail grid
   ────────────────────────────────────────────────────── */
.novedad-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
}

.novedad-detail-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.novedad-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Card de novedad */
.novedad-card .card-header {
    padding: 0.875rem 1.25rem;
}

.novedad-card .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.novedad-card .card-title svg {
    color: var(--primary-light);
    flex-shrink: 0;
}

/* Descripción */
.novedad-descripcion-texto {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
    white-space: pre-wrap;
}

/* ──────────────────────────────────────────────────────
   Timeline de historial (novedades)
   ────────────────────────────────────────────────────── */
.novedad-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.novedad-timeline-item {
    display: flex;
    gap: 0.875rem;
    position: relative;
    padding-bottom: 0;
}

.novedad-timeline-item:last-child .novedad-timeline-line {
    display: none;
}

.novedad-timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    z-index: 1;
}

.novedad-timeline-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.novedad-timeline-dot-success {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--success);
}

.novedad-timeline-dot-warning {
    border-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}

.novedad-timeline-dot-neutral {
    border-color: var(--neutral-border);
    background: var(--neutral-bg);
    color: var(--neutral);
}

.novedad-timeline-line {
    width: 2px;
    flex: 1;
    min-height: 24px;
    background: var(--border);
}

.novedad-timeline-done .novedad-timeline-line {
    background: var(--success);
}

.novedad-timeline-content {
    flex: 1;
    min-width: 0;
    padding-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.novedad-timeline-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.novedad-timeline-date {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.novedad-timeline-user {
    font-size: 0.75rem;
    color: var(--text-light);
}

.novedad-timeline-pending-text {
    font-size: 0.75rem;
    color: var(--text-light);
    font-style: italic;
}

.novedad-timeline-pending .novedad-timeline-title {
    color: var(--text-light);
}

/* ──────────────────────────────────────────────────────
   Sidebar de novedad
   ────────────────────────────────────────────────────── */
.novedad-status-sidebar {
    text-align: center;
    padding: 0.5rem 0;
}

.novedad-status-badge-large .badge {
    font-size: 0.875rem;
    padding: 0.25rem 1rem;
}

.novedad-fecha-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.novedad-fecha-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.novedad-photo-placeholder {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-light);
}

.novedad-photo-placeholder svg {
    display: block;
    margin: 0 auto;
}

.novedad-actions-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ──────────────────────────────────────────────────────
   NOVEDADES — RESPONSIVE
   ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .novedad-detail-grid {
        grid-template-columns: 1fr 260px;
    }
}

@media (max-width: 768px) {
    .novedad-detail-grid {
        grid-template-columns: 1fr;
    }

    .novedad-detail-sidebar {
        order: -1;
    }

    .novedades-actions {
        flex-direction: column;
        gap: 0.25rem;
    }

    .novedades-table .novedad-fecha-cell {
        display: none;
    }

    .novedad-titulo-link {
        max-width: 160px;
    }

    .page-header {
        flex-direction: column;
    }

    .page-header-right {
        width: 100%;
    }

    .page-header-right .btn {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .empty-state {
        padding: 3rem 1rem;
    }

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

    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .novedades-table th:nth-child(3),
    .novedades-table td:nth-child(3),
    .novedades-table th:nth-child(5),
    .novedades-table td:nth-child(5),
    .novedades-table th:nth-child(6),
    .novedades-table td:nth-child(6) {
        display: none;
    }
}
    .novedades-table th:nth-child(3),
    .novedades-table td:nth-child(3),
    .novedades-table th:nth-child(5),
    .novedades-table td:nth-child(5),
    .novedades-table th:nth-child(6),
    .novedades-table td:nth-child(6) {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════
   NOVEDADES — F4-04 BÚSQUEDA, FILTROS Y PRODUCTIVIDAD
   ════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   Barra de filtros (formulario horizontal)
   ────────────────────────────────────────────────────── */
.novedades-filtros-form {
    margin-bottom: 1rem;
}

.novedades-filtros-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.novedades-filtro-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.novedades-filtro-busqueda {
    flex: 1;
    min-width: 180px;
}

.novedades-filtro-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-family);
    font-size: 0.875rem;
    color: var(--text);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.novedades-filtro-input:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.novedades-filtro-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-family: var(--font-family);
    font-size: 0.875rem;
    color: var(--text);
    background: var(--bg-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236b7280' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") no-repeat right 0.5rem center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    min-width: 140px;
}

.novedades-filtro-select:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.novedades-filtro-accion {
    display: flex;
    align-items: flex-end;
}

.novedades-filtro-btn {
    white-space: nowrap;
    height: 100%;
    min-height: 38px;
}

/* ──────────────────────────────────────────────────────
   Resumen de filtros activos
   ────────────────────────────────────────────────────── */
.novedades-filtros-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.novedades-filtros-resumen-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.novedades-filtro-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--info);
    background: var(--bg-white);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.novedades-filtro-tag strong {
    color: var(--text);
}

.novedades-filtros-resultados {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 0.25rem 0.5rem;
}

.novedades-filtros-resultados strong {
    color: var(--text);
    font-weight: 700;
}

.novedades-filtros-limpiar {
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────
   NOVEDADES FILTROS — RESPONSIVE
   ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .novedades-filtros-bar {
        gap: 0.625rem;
        padding: 0.875rem;
    }

    .novedades-filtro-select {
        min-width: 120px;
    }

    .novedades-filtro-busqueda {
        min-width: 140px;
    }
}

@media (max-width: 768px) {
    .novedades-filtros-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .novedades-filtro-group {
        width: 100%;
    }

    .novedades-filtro-select {
        width: 100%;
        min-width: 0;
    }

    .novedades-filtro-btn {
        width: 100%;
        justify-content: center;
    }

    .novedades-filtros-resumen {
        flex-direction: column;
        align-items: flex-start;
    }

    .novedades-filtros-limpiar {
        width: 100%;
        justify-content: center;
    }

    .novedades-filtros-resumen-tags {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .novedades-filtros-bar {
        padding: 0.75rem;
    }

    .novedades-filtro-tag {
        font-size: 0.75rem;
        padding: 0.1875rem 0.5rem;
    }
}
/* ════════════════════════════════════════════════════════════
   NOVEDADES — INTERFAZ COMPLETA (F4-05)
   ════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   Tabla de novedades
   ────────────────────────────────────────────────────── */
.novedades-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.novedades-table td {
    vertical-align: middle;
}

/* Fila cerrada — sutilmente atenuada */
.novedades-table .novedad-row-cerrada td {
    opacity: 0.65;
    transition: opacity var(--transition);
}

.novedades-table .novedad-row-cerrada:hover td {
    opacity: 1;
}

/* Fila crítica — fondo suave, sin exceso de color */
.novedades-table .novedad-row-critica td {
    background: var(--danger-bg);
    border-left: 3px solid var(--danger);
}

.novedades-table .novedad-row-critica:hover td {
    background: #fee2e2;
}

/* Grupos visuales en la tabla */
.novedades-group-row td {
    padding: 0 !important;
    border-bottom: none;
}

.novedades-group-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
}

.novedades-group-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.novedades-group-badge {
    font-size: 0.6875rem;
    min-width: 20px;
    text-align: center;
}

/* Tags */
.novedad-tipo-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    background: var(--neutral-bg);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-weight: 500;
    white-space: nowrap;
}

.novedad-refugio-tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.8125rem;
    background: var(--info-bg);
    color: var(--info);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* Título link */
.novedad-titulo-link {
    font-weight: 500;
    display: inline-block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.novedad-titulo-link:hover {
    color: var(--primary);
}

/* Reportado por */
.novedad-reportado {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Fecha en tabla */
.novedad-fecha-cell {
    font-size: 0.8125rem;
    white-space: nowrap;
    color: var(--text-secondary);
}

/* Refugio cell */
.novedad-refugio-cell {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Acciones */
.novedades-actions {
    justify-content: flex-end;
}

.novedades-actions-cell {
    width: 1%;
    white-space: nowrap;
}

.novedades-count {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    text-align: right;
}

/* ──────────────────────────────────────────────────────
   Formulario de novedades
   ────────────────────────────────────────────────────── */
.novedades-form {
    max-width: 960px;
}

/* Secciones del formulario */
.nov-form-section {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.nov-form-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.nov-form-section-header svg {
    color: var(--primary-light);
    flex-shrink: 0;
}

.nov-form-section-body {
    padding: 1.25rem;
}

/* Photo placeholder en formulario */
.nov-form-photo-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nov-form-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--neutral-bg);
    text-align: center;
    transition: border-color var(--transition), background var(--transition);
}

.nov-form-photo-placeholder:hover {
    border-color: var(--primary-light);
    background: #f8faff;
}

.nov-form-photo-placeholder svg {
    color: var(--text-light);
}

.nov-form-photo-placeholder-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.nov-form-photo-placeholder-hint {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Readonly field en formulario */
.nov-form-readonly {
    padding: 0.5rem 0.75rem;
    background: var(--neutral-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: not-allowed;
    opacity: 0.7;
    min-height: 38px;
    display: flex;
    align-items: center;
}

/* Acciones del formulario */
.nov-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
}

/* ──────────────────────────────────────────────────────
   Ficha (show) — detail grid
   ────────────────────────────────────────────────────── */
.novedad-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
}

.novedad-detail-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.novedad-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Card de novedad */
.novedad-card .card-header {
    padding: 0.875rem 1.25rem;
}

.novedad-card .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.novedad-card .card-title svg {
    color: var(--primary-light);
    flex-shrink: 0;
}

/* Descripción */
.novedad-descripcion-texto {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
    white-space: pre-wrap;
}

/* Fechas destacadas en detail-list */
.novedad-fecha-destacada {
    font-weight: 600;
    color: var(--text);
}

/* ──────────────────────────────────────────────────────
   Timeline de historial (novedades)
   ────────────────────────────────────────────────────── */
.novedad-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.novedad-timeline-item {
    display: flex;
    gap: 0.875rem;
    position: relative;
    padding-bottom: 0;
}

.novedad-timeline-item:last-child .novedad-timeline-line {
    display: none;
}

.novedad-timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    z-index: 1;
}

.novedad-timeline-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.novedad-timeline-dot-success {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--success);
}

.novedad-timeline-dot-warning {
    border-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}

.novedad-timeline-dot-neutral {
    border-color: var(--neutral-border);
    background: var(--neutral-bg);
    color: var(--neutral);
}

.novedad-timeline-line {
    width: 2px;
    flex: 1;
    min-height: 24px;
    background: var(--border);
}

.novedad-timeline-done .novedad-timeline-line {
    background: var(--success);
}

.novedad-timeline-content {
    flex: 1;
    min-width: 0;
    padding-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.novedad-timeline-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.novedad-timeline-date {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.novedad-timeline-user {
    font-size: 0.75rem;
    color: var(--text-light);
}

.novedad-timeline-pending-text {
    font-size: 0.75rem;
    color: var(--text-light);
    font-style: italic;
}

.novedad-timeline-pending .novedad-timeline-title {
    color: var(--text-light);
}

/* ──────────────────────────────────────────────────────
   Sidebar de novedad
   ────────────────────────────────────────────────────── */

/* Estado en sidebar */
.nov-status-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    padding: 0.25rem 0;
}

.nov-status-badge-large .badge {
    font-size: 0.875rem;
    padding: 0.25rem 1rem;
}

.nov-status-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Prioridad en sidebar */
.nov-prioridad-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    padding: 0.25rem 0;
}

.nov-prioridad-badge-large .badge {
    font-size: 0.875rem;
    padding: 0.25rem 1rem;
}

.nov-prioridad-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Fechas en sidebar */
.nov-fechas-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nov-fecha-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.nov-fecha-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.nov-fecha-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.nov-fecha-user {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Fotografía en sidebar */
.nov-photo-wrapper {
    text-align: center;
}

.nov-photo-link {
    display: inline-block;
    text-decoration: none;
}

.nov-photo-img {
    max-width: 100%;
    max-height: 240px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    object-fit: cover;
    cursor: pointer;
    transition: opacity var(--transition);
}

.nov-photo-img:hover {
    opacity: 0.85;
}

.nov-photo-placeholder {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-light);
}

.nov-photo-placeholder svg {
    display: block;
    margin: 0 auto 0.5rem;
}

.nov-photo-placeholder-text {
    font-size: 0.875rem;
    color: var(--text-light);
    margin: 0;
}

/* Acciones en sidebar */
.nov-actions-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ──────────────────────────────────────────────────────
   Lightbox
   ────────────────────────────────────────────────────── */
.nov-lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.nov-lightbox-overlay:target {
    display: flex;
}

.nov-lightbox-img {
    max-width: 90%;
    max-height: 90%;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.nov-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 300;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    z-index: 10000;
}

.nov-lightbox-close:hover {
    color: #ccc;
}

/* ──────────────────────────────────────────────────────
   NOVEDADES — RESPONSIVE
   ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .novedad-detail-grid {
        grid-template-columns: 1fr 260px;
    }
}

@media (max-width: 768px) {
    .novedad-detail-grid {
        grid-template-columns: 1fr;
    }

    .novedad-detail-sidebar {
        order: -1;
    }

    .novedades-actions {
        flex-direction: column;
        gap: 0.25rem;
    }

    .novedades-table .novedad-fecha-cell {
        display: none;
    }

    .novedad-titulo-link {
        max-width: 160px;
    }

    .page-header {
        flex-direction: column;
    }

    .page-header-right {
        width: 100%;
    }

    .page-header-right .btn {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .empty-state {
        padding: 3rem 1rem;
    }

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

    .nov-form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .novedades-table th:nth-child(3),
    .novedades-table td:nth-child(3),
    .novedades-table th:nth-child(6),
    .novedades-table td:nth-child(6) {
        display: none;
    }
}

/* Móvil pequeño 320-375px */
@media (max-width: 375px) {
    .novedades-table th:nth-child(5),
    .novedades-table td:nth-child(5),
    .novedades-table th:nth-child(7),
    .novedades-table td:nth-child(7) {
        display: none;
    }

    .novedad-titulo-link {
        max-width: 120px;
    }
}
@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ──────────────────────────────────────────────────────
   CONTROL DE ACCESO — CONSOLA OPERATIVA (F3-03)
   ────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────
   Cabecera con KPIs
   ────────────────────────────────────────────────────── */
.acceso-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.acceso-header-left {
    flex: 1;
    min-width: 0;
}

.acceso-header-right {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: center;
}

.acceso-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.acceso-kpi-grid {
    margin-bottom: 1.5rem;
}

/* ──────────────────────────────────────────────────────
   Layout principal: 3 columnas (main + sidebar)
   ────────────────────────────────────────────────────── */
.acceso-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.25rem;
    align-items: start;
}

.acceso-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.acceso-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ──────────────────────────────────────────────────────
   Buscador
   ────────────────────────────────────────────────────── */
.acceso-buscador-card {
    margin-bottom: 0;
}

.acceso-buscador-form {
    width: 100%;
}

.acceso-buscador-input-group {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.acceso-buscador-input {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.acceso-buscador-input:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.acceso-buscador-btn {
    flex-shrink: 0;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

.acceso-buscador-help {
    margin-top: 0.375rem;
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: var(--text-light);
}

/* ──────────────────────────────────────────────────────
   Ficha operativa del residente
   ────────────────────────────────────────────────────── */
.acceso-ficha {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.acceso-ficha-grid {
    display: grid;
    grid-template-columns: 120px 1fr 200px;
    gap: 1.25rem;
    align-items: start;
}

/* Foto */
.acceso-ficha-foto {
    display: flex;
    justify-content: center;
}

.acceso-ficha-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: opacity var(--transition);
}

.acceso-ficha-img:hover {
    opacity: 0.85;
}

.acceso-ficha-img-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--neutral-bg);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

/* Info del residente */
.acceso-ficha-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.acceso-ficha-nombre {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}

.acceso-ficha-detalles {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.acceso-ficha-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.acceso-ficha-label {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 70px;
    flex-shrink: 0;
}

.acceso-ficha-value {
    color: var(--text);
    font-weight: 500;
}

/* Estado actual */
.acceso-ficha-estado {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
    padding: 1rem;
    background: var(--bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.acceso-ficha-estado-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.acceso-ficha-estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
}

.acceso-estado-dentro {
    background: var(--success-bg);
    color: #166534;
    border: 1px solid var(--success-border);
}

.acceso-estado-fuera {
    background: var(--warning-bg);
    color: #92400e;
    border: 1px solid var(--warning-border);
}

.acceso-estado-sin {
    background: var(--neutral-bg);
    color: var(--neutral);
    border: 1px solid var(--neutral-border);
}

.acceso-estado-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.acceso-estado-dot-dentro {
    background: var(--success);
}

.acceso-estado-dot-fuera {
    background: var(--warning);
}

.acceso-estado-dot-sin {
    background: var(--neutral);
}

/* Último movimiento en ficha */
.acceso-ficha-ultimo-mov {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    width: 100%;
}

.acceso-ficha-ultimo-label {
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.acceso-ficha-ultimo-fecha,
.acceso-ficha-ultimo-hora {
    font-weight: 600;
    color: var(--text);
}

.acceso-ficha-ultimo-responsable {
    color: var(--text-secondary);
    font-style: italic;
}

/* ──────────────────────────────────────────────────────
   Botones de acción principales
   ────────────────────────────────────────────────────── */
.acceso-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.acceso-accion-form {
    display: flex;
}

.acceso-btn-accion {
    flex: 1;
    justify-content: center;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    gap: 0.625rem;
    min-height: 56px;
}

.acceso-btn-accion svg {
    width: 22px;
    height: 22px;
}

.acceso-btn-accion:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────
   Timeline card
   ────────────────────────────────────────────────────── */
.acceso-timeline-card {
    margin-bottom: 0;
}

.acceso-timeline-card .card-header .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.acceso-timeline-card .card-header .card-title svg {
    color: var(--primary-light);
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────
   Timeline vertical (reutilizable)
   ────────────────────────────────────────────────────── */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
}

.timeline-item {
    display: flex;
    gap: 0.875rem;
    position: relative;
    padding-bottom: 1rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid var(--border);
    background: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-dot-success {
    border-color: var(--success);
    background: var(--success-bg);
}

.timeline-dot-warning {
    border-color: var(--warning);
    background: var(--warning-bg);
}

.timeline-dot-neutral {
    border-color: var(--neutral-border);
    background: var(--neutral-bg);
}

.timeline-content {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.timeline-badge {
    flex-shrink: 0;
}

.timeline-badge-in .badge,
.timeline-badge-out .badge {
    font-size: 0.6875rem;
    padding: 0.0625rem 0.5rem;
}

.timeline-datetime {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.timeline-date {
    font-weight: 600;
    color: var(--text);
}

.timeline-time {
    color: var(--text-secondary);
}

.timeline-usuario {
    font-size: 0.75rem;
    color: var(--text-light);
    display: flex;
    gap: 0.25rem;
}

.timeline-usuario-label {
    color: var(--text-light);
}

.timeline-usuario-name {
    color: var(--text-secondary);
}

.timeline-empty {
    text-align: center;
    padding: 1.5rem 0;
}

.timeline-empty p {
    margin: 0;
}

/* ──────────────────────────────────────────────────────
   Status Card (sidebar operativo)
   ────────────────────────────────────────────────────── */
.status-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.status-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.status-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

.status-card-title svg {
    color: var(--primary-light);
    flex-shrink: 0;
}

.status-card-body {
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.status-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.status-card-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.status-card-value {
    color: var(--text);
    font-weight: 600;
}

.status-card-porcentaje {
    font-size: 0.9375rem;
}

.status-card-bar {
    margin-top: 0.25rem;
}

.status-card-bar-track {
    height: 8px;
    background: var(--neutral-bg);
    border-radius: 9999px;
    overflow: hidden;
}

.status-card-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
    min-width: 0;
}

.status-card-mensaje {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
    line-height: 1.4;
}

/* ──────────────────────────────────────────────────────
   Empty state personalizado
   ────────────────────────────────────────────────────── */
.acceso-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.acceso-empty-icon {
    margin-bottom: 1.25rem;
    color: var(--text-light);
}

.acceso-empty-icon svg {
    width: 64px;
    height: 64px;
}

.acceso-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.5rem;
}

.acceso-empty-desc {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ──────────────────────────────────────────────────────
   Show - Detail grid
   ────────────────────────────────────────────────────── */
.acceso-show-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.25rem;
    align-items: start;
}

.acceso-show-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.acceso-show-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.acceso-show-card .card-header .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.acceso-show-card .card-header .card-title svg {
    color: var(--primary-light);
    flex-shrink: 0;
}

.acceso-show-foto {
    text-align: center;
    margin-bottom: 1rem;
}

.acceso-show-foto img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.acceso-show-sidebar-info {
    text-align: center;
}

.acceso-show-sidebar-info p {
    margin: 0 0 0.25rem;
}

/* ──────────────────────────────────────────────────────
   Historial - Table adjustments
   ────────────────────────────────────────────────────── */
.historial-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.historial-table td {
    vertical-align: middle;
}

.historial-id {
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.historial-residente-link {
    font-weight: 500;
}

.historial-fecha,
.historial-hora {
    white-space: nowrap;
    font-size: 0.8125rem;
}

.historial-count {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    text-align: right;
    color: var(--text-secondary);
}

/* ──────────────────────────────────────────────────────
   Screen reader only
   ────────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ──────────────────────────────────────────────────────
   RESPONSIVE — Control de Acceso
   ────────────────────────────────────────────────────── */

/* Tablet: 2 columnas */
@media (max-width: 1024px) {
    .acceso-layout {
        grid-template-columns: 1fr 240px;
    }

    .acceso-ficha-grid {
        grid-template-columns: 100px 1fr;
        gap: 1rem;
    }

    .acceso-ficha-estado {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    .acceso-show-grid {
        grid-template-columns: 1fr 240px;
    }
}

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

    .acceso-sidebar {
        order: -1;
    }

    .acceso-ficha-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .acceso-ficha-foto {
        margin-bottom: 0.5rem;
    }

    .acceso-ficha-info {
        align-items: center;
    }

    .acceso-ficha-row {
        justify-content: center;
    }

    .acceso-ficha-estado {
        grid-column: 1 / -1;
    }

    .acceso-header {
        flex-direction: column;
    }

    .acceso-header-right {
        width: 100%;
    }

    .acceso-header-right .btn {
        flex: 1;
        justify-content: center;
    }

    .acceso-show-grid {
        grid-template-columns: 1fr;
    }

    .acceso-show-sidebar {
        order: -1;
    }
}

/* Móvil: 1 columna, botones full width */
@media (max-width: 480px) {
    .acceso-acciones {
        grid-template-columns: 1fr;
    }

    .acceso-btn-accion {
        width: 100%;
        min-height: 48px;
        font-size: 0.9375rem;
    }

    .acceso-buscador-input-group {
        flex-direction: column;
    }

    .acceso-buscador-btn {
        width: 100%;
    }

    .acceso-ficha-nombre {
        font-size: 1.125rem;
    }

    .acceso-ficha-grid {
        gap: 0.75rem;
    }

    .acceso-empty-state {
        padding: 2rem 1rem;
    }
}
|/* ──────────────────────────────────────────────────────
   CONTROL DE ACCESO — RESULTADOS DE BÚSQUEDA (F3-04)
   ────────────────────────────────────────────────────── */

/* Grid de resultados: 2 columnas desktop/tablet, 1 columna mobile */
.acceso-resultados-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Tarjeta compacta de resultado */
.acceso-resultado-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.acceso-resultado-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

/* Fotografía circular */
.acceso-resultado-foto {
    display: flex;
    justify-content: center;
}

.acceso-resultado-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    background: var(--bg-white);
}

.acceso-resultado-img-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--neutral-bg);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

/* Información compacta */
.acceso-resultado-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.acceso-resultado-nombre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.acceso-resultado-detalle {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    align-items: center;
}

.acceso-resultado-label {
    font-weight: 600;
    color: var(--text-light);
}

.acceso-resultado-cedula {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--text);
}

/* Botón seleccionar */
.acceso-resultado-accion {
    width: 100%;
    margin-top: 0.25rem;
}

.acceso-resultado-accion .btn {
    justify-content: center;
}

/* Responsive: mobile 1 columna */
@media (max-width: 640px) {
    .acceso-resultados-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .acceso-resultados-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Móvil pequeño: 1 columna */
@media (max-width: 480px) {
    .acceso-resultados-grid {
        grid-template-columns: 1fr;
    }
}

/* ──────────────────────────────────────────────────────
   Empty state personalizado
/* ──────────────────────────────────────────────────────
   CONTROL DE ACCESO — RESULTADOS DE BÚSQUEDA (F3-04)
   ────────────────────────────────────────────────────── */

/* Grid de resultados: 2 columnas desktop/tablet, 1 columna mobile */
.acceso-resultados-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Tarjeta compacta de resultado */
.acceso-resultado-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.acceso-resultado-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

/* Fotografía circular */
.acceso-resultado-foto {
    display: flex;
    justify-content: center;
}

.acceso-resultado-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    background: var(--bg-white);
}

.acceso-resultado-img-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--neutral-bg);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

/* Información compacta */
.acceso-resultado-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.acceso-resultado-nombre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.acceso-resultado-detalle {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    align-items: center;
}

.acceso-resultado-label {
    font-weight: 600;
    color: var(--text-light);
}

.acceso-resultado-cedula {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--text);
}

/* Botón seleccionar */
.acceso-resultado-accion {
    width: 100%;
    margin-top: 0.25rem;
}

.acceso-resultado-accion .btn {
    justify-content: center;
}

/* Responsive: mobile 1 columna */
@media (max-width: 640px) {
    .acceso-resultados-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .acceso-resultados-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Móvil pequeño: 1 columna */
@media (max-width: 480px) {
    .acceso-resultados-grid {
        grid-template-columns: 1fr;
    }
}

/* ──────────────────────────────────────────────────────
   Empty state personalizado
.w-100 {
    width: 100%;
}

/* ──────────────────────────────────────────────────────
   KPI CARDS (tarjetas de indicadores superiores)
   ────────────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
}

.kpi-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.kpi-card-warning .kpi-card-icon {
    background: var(--warning-bg);
    color: var(--warning);
}

.kpi-card-success .kpi-card-icon {
    background: var(--success-bg);
    color: var(--success);
}

.kpi-card-info .kpi-card-icon {
    background: var(--info-bg);
    color: var(--info);
}

.kpi-card-neutral .kpi-card-icon {
    background: var(--neutral-bg);
    color: var(--neutral);
}

.kpi-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.kpi-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}

.kpi-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

/* Highlight pendientes card cuando hay solicitudes */
.kpi-card-warning {
    border-color: var(--warning-border);
    background: var(--warning-bg);
}

/* ──────────────────────────────────────────────────────
   PENDIENTES SECTION (sección de autoregistros)
   ────────────────────────────────────────────────────── */
.pendientes-section {
    margin-bottom: 2rem;
}

.pendientes-header {
    margin-bottom: 1rem;
}

.pendientes-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.25rem;
}

.pendientes-title svg {
    color: var(--warning);
}

.pendientes-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 9999px;
    background: var(--warning);
    color: #fff;
}

.pendientes-subtitle {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

.pendientes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.pendiente-card {
    background: var(--bg-white);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition);
}

.pendiente-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--warning);
}

.pendiente-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.pendiente-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.pendiente-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-bg);
    color: var(--text-light);
}

.pendiente-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.pendiente-card-nombre {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pendiente-card-nombre:hover {
    color: var(--primary-light);
}

.pendiente-card-cedula {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.pendiente-card-body {
    padding: 0.875rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pendiente-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pendiente-card-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pendiente-card-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    text-align: right;
}

.pendiente-foto-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.pendiente-foto-ok {
    color: var(--success);
}

.pendiente-foto-sin {
    color: var(--text-light);
}

.pendiente-card-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg);
}

.pendiente-card-footer .btn {
    flex: 1;
    justify-content: center;
}

/* ──────────────────────────────────────────────────────
   RESIDENTES — FILA PENDIENTE EN TABLA
   ────────────────────────────────────────────────────── */
.residentes-table .residente-row-pendiente td {
    background: var(--warning-bg);
}

.residentes-table .residente-row-pendiente:hover td {
    background: #fff5d6;
}

/* ──────────────────────────────────────────────────────
   AUTOREGISTRO ALERT (alerta institucional en ficha)
   ────────────────────────────────────────────────────── */
.autoregistro-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    color: #92400e;
}

.autoregistro-alert svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--warning);
}

.autoregistro-alert-content {
    flex: 1;
}

.autoregistro-alert-content strong {
    display: block;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
    color: #78350f;
}

.autoregistro-alert-content p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.autoregistro-alert-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: center;
}

/* ──────────────────────────────────────────────────────
   RESPONSIVE — KPI y Pendientes
   ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .autoregistro-alert {
        flex-direction: column;
    }

    .autoregistro-alert-actions {
        width: 100%;
    }

    .autoregistro-alert-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

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

/* ============================================================
   DASHBOARD EJECUTIVO — Fase 6
   Refinamiento UX/UI, responsive y accesibilidad
   ============================================================ */

.dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ────────────────────────────────────────────
   Dashboard header
   ──────────────────────────────────────────── */
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.dashboard-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}

.dashboard-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0;
    line-height: 1.5;
}

/* ────────────────────────────────────────────
   KPI grid — 4 columnas desktop
   ──────────────────────────────────────────── */
.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* ────────────────────────────────────────────
   KPI card (partial)
   ──────────────────────────────────────────── */
.dashboard-kpi {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
    cursor: default;
    outline: none;
}

.dashboard-kpi:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.dashboard-kpi:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

.dashboard-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.dashboard-kpi-icon svg {
    width: 24px;
    height: 24px;
}

.dashboard-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.dashboard-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}

.dashboard-kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.dashboard-kpi-desc {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0.0625rem;
}

/* Colores de KPI */
.dashboard-kpi-primary .dashboard-kpi-icon {
    background: #eef2f6;
    color: var(--primary);
}
.dashboard-kpi-primary {
    border-left: 3px solid var(--primary);
}

.dashboard-kpi-success .dashboard-kpi-icon {
    background: var(--success-bg);
    color: var(--success);
}
.dashboard-kpi-success {
    border-left: 3px solid var(--success);
}

.dashboard-kpi-warning .dashboard-kpi-icon {
    background: var(--warning-bg);
    color: var(--warning);
}
.dashboard-kpi-warning {
    border-left: 3px solid var(--warning);
}

.dashboard-kpi-danger .dashboard-kpi-icon {
    background: var(--danger-bg);
    color: var(--danger);
}
.dashboard-kpi-danger {
    border-left: 3px solid var(--danger);
}

.dashboard-kpi-info .dashboard-kpi-icon {
    background: var(--info-bg);
    color: var(--info);
}
.dashboard-kpi-info {
    border-left: 3px solid var(--info);
}

.dashboard-kpi-neutral .dashboard-kpi-icon {
    background: var(--neutral-bg);
    color: var(--neutral);
}
.dashboard-kpi-neutral {
    border-left: 3px solid var(--neutral);
}

/* ────────────────────────────────────────────
   Dashboard grid — paneles operativos balanceados
   ──────────────────────────────────────────── */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.dashboard-grid-main {
    display: contents;
}

.dashboard-grid-sidebar {
    display: contents;
}

.dashboard-panel-wide {
    grid-column: 1 / -1;
}

/* ────────────────────────────────────────────
   Dashboard panel (card genérica)
   ──────────────────────────────────────────── */
.dashboard-panel {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition);
}

.dashboard-panel:focus-within {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}

.dashboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.dashboard-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.dashboard-panel-title svg {
    color: var(--primary-light);
    flex-shrink: 0;
}

.dashboard-panel-body {
    padding: 1rem 1.25rem;
}

.dashboard-panel-body-nopad {
    padding: 0;
}

.dashboard-panel-scrollable {
    display: flex;
    flex-direction: column;
    max-height: min(430px, 68vh);
}

.dashboard-panel-scrollable .dashboard-panel-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2;
}

.dashboard-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.dashboard-panel-scroll.dashboard-panel-body-nopad {
    padding: 0;
}

.dashboard-panel-scroll::-webkit-scrollbar {
    width: 8px;
}

.dashboard-panel-scroll::-webkit-scrollbar-track {
    background: var(--bg);
}

.dashboard-panel-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 9999px;
}

.dashboard-panel-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* ────────────────────────────────────────────
   Dashboard progress bars (ocupación)
   ──────────────────────────────────────────── */
.dashboard-progress {
    margin-bottom: 0.875rem;
}

.dashboard-progress:last-child {
    margin-bottom: 0;
}

.dashboard-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.dashboard-progress-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-progress-stats {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.dashboard-progress-stats strong {
    color: var(--text);
}

.dashboard-progress-track {
    height: 8px;
    background: var(--neutral-bg);
    border-radius: 9999px;
    overflow: hidden;
}

.dashboard-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width 0.5s ease;
    min-width: 0;
}

/* ────────────────────────────────────────────
   Dashboard timeline (actividad reciente)
   ──────────────────────────────────────────── */
.dashboard-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding: 0.5rem 0;
}

.dashboard-timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: var(--border);
}

.dashboard-timeline-item {
    display: flex;
    gap: 0.875rem;
    position: relative;
    padding: 0.5rem 1.25rem;
    transition: background var(--transition);
}

.dashboard-timeline-item:hover {
    background: #fafafa;
}

.dashboard-timeline-item:last-child {
    padding-bottom: 0.75rem;
}

.dashboard-timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    z-index: 1;
    padding-top: 2px;
}

.dashboard-timeline-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-timeline-dot svg {
    width: 13px;
    height: 13px;
}

.dashboard-dot-success {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--success);
}

.dashboard-dot-warning {
    border-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}

.dashboard-dot-danger {
    border-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
}

.dashboard-dot-info {
    border-color: var(--info);
    background: var(--info-bg);
    color: var(--info);
}

.dashboard-dot-neutral {
    border-color: var(--neutral-border);
    background: var(--neutral-bg);
    color: var(--neutral);
}

.dashboard-timeline-content {
    flex: 1;
    min-width: 0;
}

.dashboard-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.125rem;
}

.dashboard-timeline-module {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
}

.dashboard-timeline-time {
    font-size: 0.6875rem;
    color: var(--text-light);
    white-space: nowrap;
    flex-shrink: 0;
}

.dashboard-timeline-desc {
    font-size: 0.8125rem;
    color: var(--text);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ────────────────────────────────────────────
   Dashboard list (novedades, movimientos, SOS)
   ──────────────────────────────────────────── */
.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dashboard-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--transition);
}

.dashboard-list-item:hover {
    background: #fafafa;
    border-radius: var(--radius-sm);
}

.dashboard-list-item:last-child {
    border-bottom: none;
}

.dashboard-list-item-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.dashboard-list-item-left .badge {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
}

.dashboard-list-item-left .badge svg {
    width: 11px;
    height: 11px;
    margin-right: 2px;
}

.dashboard-list-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.dashboard-list-item-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-item-meta {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-item-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.dashboard-list-item-right .badge {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
}

.dashboard-list-item-user {
    font-size: 0.6875rem;
    color: var(--text-light);
    white-space: nowrap;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ────────────────────────────────────────────
   Dashboard summary (resumen ejecutivo)
   ──────────────────────────────────────────── */
.dashboard-summary {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.dashboard-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--border-light);
}

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

.dashboard-summary-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.dashboard-summary-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    text-align: right;
}

.dashboard-summary-danger {
    color: var(--danger);
}

/* ────────────────────────────────────────────
   Dashboard empty state
   ──────────────────────────────────────────── */
.dashboard-empty {
    text-align: center;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-empty p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-light);
    font-style: italic;
}

.dashboard-empty::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--neutral-bg);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/16px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/16px no-repeat;
    background-color: var(--text-light);
}

/* ────────────────────────────────────────────
   Dashboard charts (Chart.js)
   ──────────────────────────────────────────── */
.dashboard-charts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.dashboard-chart {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.dashboard-chart-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.dashboard-chart-body {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.dashboard-chart-body canvas {
    max-height: 240px;
    width: 100% !important;
}

.dashboard-chart-empty {
    text-align: center;
    padding: 2rem 1rem;
}

.dashboard-chart-empty p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-light);
    font-style: italic;
}

/* ────────────────────────────────────────────
   DASHBOARD — Alertas institucionales
   ──────────────────────────────────────────── */
.dashboard-alert {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-white);
    margin-bottom: 0.625rem;
    transition: box-shadow var(--transition), transform var(--transition);
}

.dashboard-alert:hover {
    box-shadow: var(--shadow-sm);
}

.dashboard-alert:focus-within {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

.dashboard-alert:last-child {
    margin-bottom: 0;
}

.dashboard-alert-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.dashboard-alert-icon svg {
    width: 16px;
    height: 16px;
}

.dashboard-alert-content {
    flex: 1;
    min-width: 0;
}

.dashboard-alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.125rem;
}

.dashboard-alert-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-alert-header .badge {
    font-size: 0.625rem;
    padding: 0.0625rem 0.4375rem;
    flex-shrink: 0;
}

.dashboard-alert-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0 0 0.25rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-alert-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-light);
}

.dashboard-alert-meta svg {
    flex-shrink: 0;
}

/* Variantes de severidad */
.dashboard-alert-critical .dashboard-alert-icon {
    background: var(--danger-bg);
    color: var(--danger);
}
.dashboard-alert-critical {
    border-left: 3px solid var(--danger);
    background: #fef2f2;
}

.dashboard-alert-warning .dashboard-alert-icon {
    background: var(--warning-bg);
    color: var(--warning);
}
.dashboard-alert-warning {
    border-left: 3px solid var(--warning);
}

.dashboard-alert-info .dashboard-alert-icon {
    background: var(--info-bg);
    color: var(--info);
}
.dashboard-alert-info {
    border-left: 3px solid var(--info);
}

.dashboard-alert-success .dashboard-alert-icon {
    background: var(--success-bg);
    color: var(--success);
}
.dashboard-alert-success {
    border-left: 3px solid var(--success);
}

/* ────────────────────────────────────────────
   DASHBOARD — Activity meta (usuario, refugio)
   ──────────────────────────────────────────── */
.dashboard-activity-user {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.dashboard-activity-user svg {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    color: var(--text-light);
}

.dashboard-activity-refugio {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.dashboard-activity-refugio svg {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    color: var(--text-light);
}

/* ────────────────────────────────────────────
   DASHBOARD — Inline badge (movimientos, GPS)
   ──────────────────────────────────────────── */
.dashboard-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9999px;
    white-space: nowrap;
    background: var(--neutral-bg);
    color: var(--neutral);
    border: 1px solid var(--neutral-border);
}

.dashboard-badge-inline svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.dashboard-gps-badge {
    background: var(--info-bg);
    color: var(--info);
    border-color: var(--info-border);
}

/* ────────────────────────────────────────────
   DASHBOARD — Timeline lateral color
   ──────────────────────────────────────────── */
.dashboard-timeline-lateral-success {
    border-left: 2px solid var(--success);
    margin-left: -1px;
}
.dashboard-timeline-lateral-warning {
    border-left: 2px solid var(--warning);
    margin-left: -1px;
}
.dashboard-timeline-lateral-danger {
    border-left: 2px solid var(--danger);
    margin-left: -1px;
}
.dashboard-timeline-lateral-info {
    border-left: 2px solid var(--info);
    margin-left: -1px;
}
.dashboard-timeline-lateral-neutral {
    border-left: 2px solid var(--neutral-border);
    margin-left: -1px;
}

/* ────────────────────────────────────────────
   DASHBOARD — Timeline secondary description
   ──────────────────────────────────────────── */
.dashboard-timeline-desc-secondary {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-light);
    margin-top: 0.0625rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-timeline-meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* ────────────────────────────────────────────
   DASHBOARD — Summary texto ejecutivo
   ──────────────────────────────────────────── */
.dashboard-summary-texto-body {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.dashboard-summary-texto-body p {
    margin: 0 0 0.625rem;
}

.dashboard-summary-texto-body p:last-child {
    margin-bottom: 0;
}

.dashboard-summary-texto-body strong {
    color: var(--text);
}

.dashboard-summary-ok {
    color: var(--success);
    font-weight: 600;
}

.dashboard-summary-alerta {
    color: var(--danger);
    font-weight: 600;
}

/* ────────────────────────────────────────────
   DASHBOARD — Alert list container
   ──────────────────────────────────────────── */
.dashboard-alert-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dashboard-panel-scroll .dashboard-empty {
    min-height: 180px;
    justify-content: center;
}

/* ────────────────────────────────────────────
   Dashboard encargado — refugio header & card
   ──────────────────────────────────────────── */

/* Refugio info bar below title */
.dashboard-refugio-header {
    margin: 0.5rem 0 0.25rem;
}

.dashboard-refugio-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-refugio-card.dashboard-refugio-ocupacion {
    padding: 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.dashboard-refugio-nombre {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
}

.dashboard-refugio-detalles {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.dashboard-refugio-info {
    white-space: nowrap;
}

.dashboard-refugio-info strong {
    color: var(--text);
}

.dashboard-refugio-info-sep {
    color: var(--border);
}

.dashboard-refugio-porcentaje {
    color: var(--text-light);
    font-size: 0.75rem;
}

/* Ocupación card grande (encargado) */
.dashboard-refugio-ocupacion-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    text-align: center;
    margin-bottom: 0.25rem;
}

.dashboard-refugio-ocupacion-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
}

.dashboard-refugio-ocupacion-valores {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    text-align: center;
    margin-bottom: 0.75rem;
}

.dashboard-refugio-ocupacion-valor {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text);
}

.dashboard-refugio-ocupacion-valor strong {
    color: var(--primary);
}

.dashboard-refugio-ocupacion-barra {
    margin-bottom: 0.75rem;
}

/* Status badge for ocupación card */
.dashboard-refugio-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    width: fit-content;
}

.dashboard-refugio-status svg {
    flex-shrink: 0;
}

.dashboard-refugio-status-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.dashboard-refugio-status-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.dashboard-refugio-status-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

/* ── New utility classes ──────────────────── */
.dashboard-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.75rem;
}

.dashboard-card-hover {
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.dashboard-card-hover:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border);
    transform: translateY(-1px);
}

.dashboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.dashboard-panel-body {
    padding: 1rem 1.25rem;
}

.dashboard-panel-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-white);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.dashboard-summary-highlight {
    font-weight: 700;
    color: var(--text);
}

.dashboard-progress-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
    margin-bottom: 0.125rem;
}

.dashboard-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--neutral-bg);
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.dashboard-empty-text {
    font-size: 0.8125rem;
    color: var(--text-light);
    font-style: italic;
    margin: 0;
}

/* ── Responsive Dashboard ──────────────────── */

/* 1024px — Tablet horizontal */
@media (max-width: 1024px) {
    .dashboard-kpis {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1rem;
    }
    .dashboard-charts {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 768px — Tablet vertical */
@media (max-width: 768px) {
    .dashboard-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .dashboard-charts {
        grid-template-columns: 1fr;
    }
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .dashboard-kpi {
        padding: 1rem;
    }
    .dashboard-kpi-value {
        font-size: 1.25rem;
    }
    .dashboard-panel-body {
        padding: 0.75rem 1rem;
    }
    .dashboard-panel-scrollable {
        max-height: min(360px, 62vh);
    }
    .dashboard-list-item {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    .dashboard-list-item-right {
        width: 100%;
        justify-content: flex-end;
    }
    .dashboard-timeline-item {
        padding: 0.5rem 1rem;
    }
    .dashboard-alert {
        padding: 0.625rem 0.875rem;
    }
}

/* 480px — Mobile grande */
@media (max-width: 480px) {
    .dashboard-kpis {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .dashboard-kpi {
        padding: 0.875rem;
    }
    .dashboard-kpi-value {
        font-size: 1.125rem;
    }
    .dashboard-kpi-icon {
        width: 40px;
        height: 40px;
    }
    .dashboard-kpi-icon svg {
        width: 20px;
        height: 20px;
    }
    .dashboard-panel-body {
        padding: 0.625rem 0.875rem;
    }
    .dashboard-panel-scrollable {
        max-height: min(320px, 58vh);
    }
    .dashboard-panel-header {
        padding: 0.625rem 0.875rem;
    }
    .dashboard-charts {
        grid-template-columns: 1fr;
    }
    .dashboard-chart-body {
        min-height: 160px;
        padding: 0.75rem;
    }
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-list-item {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .dashboard-list-item-right {
        width: 100%;
        justify-content: flex-end;
    }
    .dashboard-timeline-item {
        padding: 0.375rem 0.875rem;
    }
    .dashboard-alert {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
    }
}

/* 375px — Mobile mediano */
@media (max-width: 375px) {
    .dashboard-kpis {
        gap: 0.5rem;
    }
    .dashboard-kpi {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    .dashboard-kpi-body {
        gap: 0;
    }
    .dashboard-kpi-value {
        font-size: 1rem;
    }
    .dashboard-kpi-icon {
        width: 36px;
        height: 36px;
    }
    .dashboard-kpi-icon svg {
        width: 18px;
        height: 18px;
    }
    .dashboard-panel-header {
        padding: 0.5rem 0.75rem;
    }
    .dashboard-panel-body {
        padding: 0.5rem 0.75rem;
    }
    .dashboard-panel-title {
        font-size: 0.8125rem;
    }
    .dashboard-title {
        font-size: 1.25rem;
    }
    .dashboard-subtitle {
        font-size: 0.8125rem;
    }
}

/* 320px — Mobile pequeño */
@media (max-width: 320px) {
    .dashboard-kpis {
        gap: 0.375rem;
    }
    .dashboard-kpi {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    .dashboard-kpi-value {
        font-size: 0.9375rem;
    }
    .dashboard-kpi-label {
        font-size: 0.625rem;
    }
    .dashboard-kpi-icon {
        width: 32px;
        height: 32px;
    }
    .dashboard-kpi-icon svg {
        width: 16px;
        height: 16px;
    }
    .dashboard-panel-header {
        padding: 0.375rem 0.625rem;
    }
    .dashboard-panel-body {
        padding: 0.375rem 0.625rem;
    }
    .dashboard-list-item {
        padding: 0.5rem 0;
    }
    .dashboard-list-item-title {
        font-size: 0.75rem;
    }
    .dashboard-timeline-item {
        padding: 0.25rem 0.625rem;
    }
    .dashboard-timeline-dot {
        width: 22px;
        height: 22px;
    }
    .dashboard-timeline-dot svg {
        width: 11px;
        height: 11px;
    }
    .dashboard-timeline::before {
        left: 16px;
    }
    .dashboard-alert {
        padding: 0.5rem 0.625rem;
    }
    .dashboard-alert-title {
        font-size: 0.75rem;
    }
    .dashboard-chart-body {
        min-height: 140px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════════
   INVENTARIO — F7-03 INTERFAZ COMPLETA DEL INVENTARIO
   ════════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   Filtros (misma estructura que novedades)
   ────────────────────────────────────────────── */
.inventory-filtros-form {
    margin-bottom: 1rem;
}

.inventory-filtros-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.inventory-filtro-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.inventory-filtro-busqueda {
    flex: 1;
    min-width: 180px;
}

.inventory-filtro-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-family);
    font-size: 0.875rem;
    color: var(--text);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.inventory-filtro-input:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.inventory-filtro-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-family: var(--font-family);
    font-size: 0.875rem;
    color: var(--text);
    background: var(--bg-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236b7280' width='16' height='16'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") no-repeat right 0.5rem center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    min-width: 140px;
}

.inventory-filtro-select:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.inventory-filtro-accion {
    display: flex;
    align-items: flex-end;
}

.inventory-filtro-btn {
    white-space: nowrap;
    height: 100%;
    min-height: 38px;
}

/* ──────────────────────────────────────────────
   Resumen de filtros activos
   ────────────────────────────────────────────── */
.inventory-filtros-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.inventory-filtros-resumen-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.inventory-filtro-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
}

.inventory-filtros-resultados {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.inventory-filtros-limpiar {
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────
   KPIs
   ────────────────────────────────────────────── */
.inventory-kpi-grid {
    margin-bottom: 1.25rem;
}

/* ──────────────────────────────────────────────
   Tabla de inventario
   ────────────────────────────────────────────── */
.inventory-table-container {
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

.inventory-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inventory-table td {
    vertical-align: middle;
}

.inventory-row-stock-bajo td {
    background: var(--danger-bg);
}

.inventory-row-stock-bajo:hover td {
    background: #fee2e2;
}

.inventory-codigo {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.inventory-nombre-link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition);
}

.inventory-nombre-link:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.inventory-unidad {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.inventory-stock {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.inventory-stock-bajo {
    color: var(--danger);
}

.inventory-stock-minimo {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.inventory-refugio-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.5rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.inventory-actions {
    display: flex;
    gap: 0.375rem;
    flex-wrap: nowrap;
}

.inventory-count {
    text-align: right;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
}

/* ──────────────────────────────────────────────
   Detail grid (show page)
   ────────────────────────────────────────────── */
.inventory-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
}

.inventory-detail-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.inventory-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ──────────────────────────────────────────────
   Sidebar cards específicas
   ────────────────────────────────────────────── */
.inventory-status-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.inventory-status-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.inventory-refugio-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inventory-refugio-nombre {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.inventory-refugio-codigo {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.inventory-actions-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.inventory-registro-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.inventory-registro-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.inventory-registro-label {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inventory-registro-value {
    font-size: 0.875rem;
    color: var(--text);
}

/* ──────────────────────────────────────────────
   Stock en show page
   ────────────────────────────────────────────── */
.inventory-stock-value {
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.inventory-stock-value-bajo {
    color: var(--danger);
}

.inventory-stock-unit {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

.inventory-stock-alerta {
    display: inline-flex;
    margin-left: 0.5rem;
    font-size: 1rem;
    cursor: help;
}

.inventory-stock-minimo-valor {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────
   Formulario checkbox personalizado
   ────────────────────────────────────────────── */
.inventory-form-checkbox {
    padding-top: 0.25rem;
}

.inventory-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
}

.inventory-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.inventory-checkbox-text {
    color: var(--text);
}

/* ──────────────────────────────────────────────
   Responsive — Inventario
   ────────────────────────────────────────────── */

/* Tablet: hasta 1024px */
@media (max-width: 1024px) {
    .inventory-detail-grid {
        grid-template-columns: 1fr;
    }

    .inventory-table .inventory-col-refugio {
        display: none;
    }
}

/* Mobile: hasta 768px */
@media (max-width: 768px) {
    .inventory-filtros-bar {
        flex-direction: column;
    }

    .inventory-filtro-busqueda {
        min-width: 0;
        width: 100%;
    }

    .inventory-filtro-select {
        min-width: 0;
        width: 100%;
    }

    .inventory-filtro-accion {
        width: 100%;
    }

    .inventory-filtro-btn {
        width: 100%;
        justify-content: center;
    }

    .inventory-table th:nth-child(4),
    .inventory-table td:nth-child(4),
    .inventory-table th:nth-child(6),
    .inventory-table td:nth-child(6) {
        display: none;
    }
}

/* Mobile pequeño: hasta 480px */
@media (max-width: 480px) {
    .inventory-table th:nth-child(8),
    .inventory-table td:nth-child(8) {
        display: none;
    }
}

/* ──────────────────────────────────────────────────────
   INVENTARIO — Dashboard operativo (F7-05)
   ────────────────────────────────────────────────────── */

/* Descripción institucional debajo de KPIs */
.inventory-dashboard-desc {
    margin: 1rem 0 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.inventory-dashboard-desc-text {
    margin: 0;
}

.inventory-dashboard-desc-text strong {
    color: var(--text);
    font-weight: 700;
}

.inventory-dashboard-desc-alerta {
    color: var(--danger);
    font-weight: 600;
}

/* Contenedor de paneles — grid responsive */
.inventory-dashboard-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

/* Panel card genérico */
.inventory-dashboard-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Panel de alertas ocupa ancho completo */
.inventory-dashboard-alertas {
    grid-column: 1 / -1;
}

/* Header de panel */
.inventory-dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.inventory-dashboard-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
}

/* Badge contador en título (ej: alertas) */
.inventory-dashboard-badge-alertas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    background: var(--danger);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    line-height: 1;
}

/* Body del panel */
.inventory-dashboard-card-body {
    padding: 0;
}

/* Tabla dentro de paneles */
.inventory-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.inventory-dashboard-table th {
    text-align: left;
    padding: 0.625rem 1rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.inventory-dashboard-table td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.inventory-dashboard-table tbody tr:last-child td {
    border-bottom: none;
}

.inventory-dashboard-table tbody tr:hover {
    background: var(--bg);
}

/* Enlace dentro de paneles */
.inventory-dashboard-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.inventory-dashboard-link:hover {
    text-decoration: underline;
}

/* Filas de alerta */
.inventory-dashboard-alerta-fila {
    transition: background 0.15s ease;
}

.inventory-dashboard-alerta-bajo td:first-child {
    border-left: 3px solid var(--warning);
}

.inventory-dashboard-alerta-critico td:first-child {
    border-left: 3px solid var(--danger);
}

.inventory-dashboard-stock-bajo {
    color: var(--danger);
    font-weight: 700;
}

/* Columna cantidad en movimientos */
.inventory-dashboard-mov-cantidad {
    font-weight: 600;
    white-space: nowrap;
}

.inventory-dashboard-mov-entrada {
    color: var(--success);
}

.inventory-dashboard-mov-salida {
    color: var(--warning);
}

.inventory-dashboard-mov-unidad {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-left: 0.25rem;
}

.inventory-dashboard-mov-fecha {
    white-space: nowrap;
    font-size: 0.78125rem;
    color: var(--text-secondary);
}

/* Columnas de categorías */
.inventory-dashboard-cat-count {
    text-align: center;
    font-weight: 600;
}

.inventory-dashboard-cat-stock {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Empty states dentro de paneles */
.inventory-dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
    gap: 0.5rem;
}

.inventory-dashboard-empty-icon {
    color: var(--text-light);
    opacity: 0.5;
}

.inventory-dashboard-empty-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ──────────────────────────────────────────────
   Responsive — Dashboard Inventario
   ────────────────────────────────────────────── */

/* Tablet: hasta 1024px */
@media (max-width: 1024px) {
    .inventory-dashboard-panels {
        grid-template-columns: 1fr;
    }

    .inventory-dashboard-alertas {
        grid-column: 1;
    }
}

/* Mobile: hasta 768px */
@media (max-width: 768px) {
    .inventory-dashboard-table thead {
        display: none;
    }

    .inventory-dashboard-table tbody tr {
        display: block;
        padding: 0.625rem;
        border-bottom: 1px solid var(--border);
    }

    .inventory-dashboard-table tbody tr:last-child {
        border-bottom: none;
    }

    .inventory-dashboard-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3125rem 0;
        border: none;
        text-align: right;
    }

    .inventory-dashboard-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--text-secondary);
        text-align: left;
    }

    .inventory-dashboard-alerta-fila td:first-child {
        border-left: none;
    }
}

/* ──────────────────────────────────────────────────────
   INVENTARIO — Refinamientos UX/UI (F7-06)
   ────────────────────────────────────────────────────── */

/* Tooltips con hover visible */
.inventory-tooltip {
    position: relative;
    cursor: help;
}

.inventory-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.375rem 0.625rem;
    background: var(--text);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 20;
}

.inventory-tooltip:hover::after {
    opacity: 1;
}

/* Transiciones hover en filas de tabla principal */
.inventory-table tbody tr {
    transition: background 0.15s ease;
}

.inventory-table tbody tr:hover {
    background: var(--bg);
}

/* Transiciones en botones de acciones */
.inventory-actions .btn {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.inventory-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.inventory-actions .btn:active {
    transform: translateY(0);
}

/* Contador de tabla con badge */
.inventory-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--info);
}

/* Descripción institucional con icono */
.inventory-desc-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.375rem;
    color: var(--primary-light);
    flex-shrink: 0;
}

/* Estados en tabla con transición */
.inventory-table .badge {
    transition: opacity 0.12s ease;
}

.inventory-table .badge:hover {
    opacity: 0.85;
}

/* Empty state mejorado con animación suave */
.inventory-empty-state-enter {
    animation: inventoryFadeIn 0.25s ease-out;
}

@keyframes inventoryFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tooltip en sidebar para acciones */
.inventory-action-tooltip {
    position: relative;
}

.inventory-action-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    background: var(--text);
    color: #fff;
    font-size: 0.6875rem;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 20;
}

.inventory-action-tooltip:hover::after {
    opacity: 1;
}

/* Resumen en historial con animación */
.inventory-historial-resumen {
    animation: inventoryFadeIn 0.25s ease-out;
}

/* Sidebar - alerta de stock */
.inventory-stock-alerta-sidebar {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);
    color: var(--danger);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Último movimiento destacado */
.inventory-ultimo-mov-destacado {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
}

/* Resumen final en historial con mejor jerarquía */
.inventory-historial-resumen-item {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.inventory-historial-resumen-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Historial - último movimiento resaltado */
.inventory-historial-ultimo {
    background: var(--info-bg) !important;
    border-left: 3px solid var(--info);
}

/* Tooltips en badges de categoría */
.inventory-cat-badge {
    cursor: help;
}

/* Observaciones en historial truncadas con tooltip */
.inventory-historial-observacion {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

/* Mejora visual para placeholder inputs */
.inventory-form-input::placeholder {
    color: var(--text-light);
    opacity: 0.7;
    font-style: italic;
}

/* Transición suave para el checkbox del formulario */
.inventory-checkbox-label {
    transition: opacity 0.12s ease;
}

.inventory-checkbox-label:hover {
    opacity: 0.85;
}

/* ──────────────────────────────────────────────
   Responsive — Refinamientos (F7-06)
   ────────────────────────────────────────────── */

/* Hasta 1024px — tablet */
@media (max-width: 1024px) {
    .inventory-historial-observacion {
        max-width: 120px;
    }
}

/* Hasta 768px — mobile */
@media (max-width: 768px) {
    .inventory-historial-observacion {
        max-width: none;
    }
}

/* Hasta 480px — mobile pequeño */
@media (max-width: 480px) {
    .inventory-table thead {
        display: none;
    }

    .inventory-table tbody tr {
        display: block;
        padding: 0.625rem;
        border-bottom: 1px solid var(--border);
    }

    .inventory-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3125rem 0;
        border: none;
        text-align: right;
    }

    .inventory-table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--text-secondary);
        text-align: left;
    }

    .inventory-table .inventory-actions-cell {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .inventory-table .inventory-actions-cell:before {
        width: 100%;
    }

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

/* Hasta 375px — mobile muy pequeño */
@media (max-width: 375px) {
    .inventory-table tbody td {
        font-size: 0.8125rem;
    }

    .inventory-table .badge span {
        display: none;
    }

    .inventory-table .badge svg {
        margin: 0;
    }

    .inventory-filtros-bar {
        padding: 0.75rem;
    }

    .inventory-dashboard-desc {
        font-size: 0.8125rem;
    }
}

/* Hasta 320px — pantallas ultra pequeñas */
@media (max-width: 320px) {
    .inventory-table tbody td {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        padding: 0.25rem 0;
    }

    .inventory-table tbody td:before {
        font-size: 0.6875rem;
    }

    .inventory-filtros-form {
        margin-bottom: 0.75rem;
    }

    .inventory-count {
        text-align: center;
    }

    .inventory-dashboard-card-header {
        padding: 0.625rem 0.75rem;
    }

    .inventory-dashboard-card-body {
        padding: 0;
    }
}

/* Mejoras de accesibilidad focus-visible generales */
.inventory-table a:focus-visible,
.inventory-filtro-input:focus-visible,
.inventory-filtro-select:focus-visible,
.inventory-dashboard-link:focus-visible,
.inventory-nombre-link:focus-visible,
.inventory-actions .btn:focus-visible,
.inventory-historial-table a:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/*
 * ──────────────────────────────────────────────────────────
 * Centro de Reportes Institucionales (Fase 8 — F8-02)
 * Prefijo: report- / reportes- / report-card- / report-sidebar- / report-status- / report-export-
 * ──────────────────────────────────────────────────────────
 */

/* ── Header ──────────────────────────────────────────── */
.reportes-header-user {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #718096);
    margin: var(--spacing-xs, 0.375rem) 0 0;
}

.reportes-header-desc {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #718096);
    line-height: 1.6;
    margin: var(--spacing-md, 1rem) 0 0;
    max-width: 48rem;
}

/* ── Layout: grid + sidebar ──────────────────────────── */
.reportes-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--spacing-lg, 1.5rem);
    margin-top: var(--spacing-lg, 1.5rem);
    align-items: start;
}

.reportes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg, 1.5rem);
    min-width: 0;
}

/* ── Tarjeta de reporte ──────────────────────────────── */
.report-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--spacing-lg, 1.5rem);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    cursor: default;
    outline: none;
    position: relative;
}

.report-card:hover {
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0 0 0 / 0.1));
    transform: translateY(-2px);
}

.report-card:focus-visible {
    outline: 2px solid var(--primary, #1a3a5c);
    outline-offset: 2px;
}

/* Icono */
.report-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--primary-bg, #ebf4ff);
    color: var(--primary, #1a3a5c);
    margin-bottom: var(--spacing-md, 1rem);
    flex-shrink: 0;
}

.report-card-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* Cuerpo */
.report-card-body {
    flex: 1;
}

.report-card-title {
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    margin: 0 0 var(--spacing-xs, 0.375rem);
    line-height: 1.4;
}

.report-card-description {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #718096);
    line-height: 1.5;
    margin: 0;
}

/* Información incluida */
.report-card-incluye {
    margin-top: var(--spacing-md, 1rem);
}

.report-card-incluye-label {
    display: block;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--spacing-xs, 0.375rem);
}

.report-card-incluye-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
}

.report-card-incluye-item {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #718096);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.report-card-incluye-item svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--success, #16a34a);
    flex-shrink: 0;
}

/* Exportaciones */
.report-card-exports {
    margin-top: var(--spacing-md, 1rem);
}

.report-card-exports-label {
    display: block;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--spacing-xs, 0.375rem);
}

.report-card-exports-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 0.375rem);
}

.report-export-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 500;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    gap: 0.25rem;
}

.report-export-badge--preview {
    background: var(--info-bg, #eff6ff);
    color: var(--info, #2563eb);
}

.report-export-badge--pdf {
    background: var(--danger-bg, #fef2f2);
    color: var(--danger, #dc2626);
}

.report-export-badge--excel {
    background: var(--success-bg, #f0fdf4);
    color: var(--success, #16a34a);
}

.report-export-badge--print {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
}

/* Footer */
.report-card-footer {
    margin-top: var(--spacing-md, 1rem);
    padding-top: var(--spacing-sm, 0.75rem);
    border-top: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm, 0.75rem);
}

.report-card-footer .btn {
    flex-shrink: 0;
}

.report-card-footer .btn:disabled,
.report-card-footer .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Badge de estado */
.report-card-badge {
    display: inline-block;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.report-card-badge--infra {
    background: var(--neutral-bg, #f3f4f6);
    color: var(--neutral, #6b7280);
}

.report-card-badge--dev {
    background: var(--warning-bg, #fffbeb);
    color: var(--warning, #d97706);
}

.report-card-badge--available {
    background: var(--success-bg, #f0fdf4);
    color: var(--success, #16a34a);
}

/* ── Sidebar ─────────────────────────────────────────── */
.report-sidebar {
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--spacing-lg, 1.5rem);
    position: sticky;
    top: calc(var(--navbar-height, 4rem) + var(--spacing-lg, 1.5rem));
}

.report-sidebar-section {
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.report-sidebar-section:last-child {
    margin-bottom: 0;
}

.report-sidebar-title {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    margin: 0 0 var(--spacing-sm, 0.75rem);
    padding-bottom: var(--spacing-xs, 0.375rem);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

/* Lista de estado */
.report-sidebar-status-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.report-sidebar-status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs, 0.375rem) 0;
    font-size: var(--font-size-sm, 0.875rem);
}

.report-sidebar-status-label {
    color: var(--text-secondary, #718096);
}

.report-sidebar-status-value {
    font-weight: 600;
    color: var(--text-primary, #1a202c);
}

.report-sidebar-status-value--ready {
    color: var(--info, #2563eb);
}

.report-sidebar-status-value--complete {
    color: var(--success, #16a34a);
}

/* Lista de próximas implementaciones */
.report-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.report-sidebar-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    padding: var(--spacing-xs, 0.375rem) 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #718096);
}

.report-sidebar-list-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.report-sidebar-list-item--pending {
    opacity: 0.6;
}

.report-sidebar-list-item--pending svg {
    color: var(--neutral, #6b7280);
}

/* Caja informativa */
.report-sidebar-info {
    padding: var(--spacing-md, 1rem);
    background: var(--info-bg, #eff6ff);
    border: 1px solid var(--info-border, #bfdbfe);
    border-radius: var(--radius-md, 0.5rem);
}

.report-sidebar-info-text {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--info, #2563eb);
    line-height: 1.6;
    margin: 0;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1200px) {
    .reportes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .reportes-layout {
        grid-template-columns: 1fr 240px;
    }
}

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

    .report-sidebar {
        position: static;
        order: 1;
    }
}

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

    .report-card {
        padding: var(--spacing-md, 1rem);
    }

    .report-card-icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .report-card-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .report-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .report-card-footer .btn {
        width: 100%;
        text-align: center;
    }
}

/*
 * ──────────────────────────────────────────────────────────
 * Reporte General de Refugios (Fase 8 — F8-03)
 * Prefijo: reporte- / report-table- / report-filter- / report-sidebar- / report-summary-
 * ──────────────────────────────────────────────────────────
 */

/* ── Layout principal del reporte ─────────────────────── */
.reporte-main {
    min-width: 0;
}

/* ── KPIs ─────────────────────────────────────────────── */
.reporte-kpis {
    margin-bottom: 1.25rem;
}

/* ── Barra de filtros ─────────────────────────────────── */
.reporte-filtros {
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--spacing-lg, 1.5rem);
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.report-filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
    gap: var(--spacing-md, 1rem);
    align-items: end;
}

.report-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.report-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #718096);
    margin-bottom: 0;
}

.report-filter-input,
.report-filter-select {
    font-size: 0.875rem;
}

.report-filter-orden-row {
    display: flex;
    gap: 0.5rem;
}

.report-filter-orden-select {
    flex: 1;
}

.report-filter-orden-dir {
    width: 8rem;
    flex-shrink: 0;
}

.report-filter-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: var(--spacing-md, 1rem);
    padding-top: var(--spacing-md, 1rem);
    border-top: 1px solid var(--border-color, #e2e8f0);
}

/* ── Resumen ──────────────────────────────────────────── */
.reporte-summary {
    margin-bottom: var(--spacing-md, 1rem);
}

.reporte-summary-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #718096);
    margin: 0;
}

.reporte-summary-text strong {
    color: var(--text-primary, #1a202c);
}

/* ── Contenedor de tabla ──────────────────────────────── */
.report-table-container {
    margin-top: 0;
}

/* ── Tabla ────────────────────────────────────────────── */
.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.report-table th,
.report-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.report-table thead th {
    background: var(--bg-muted, #f8fafc);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #718096);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.report-table-th--sortable {
    padding: 0 !important;
}

.report-table-th-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    text-decoration: none;
    color: var(--text-secondary, #718096);
    transition: color var(--transition, 0.2s ease);
}

.report-table-th-link:hover {
    color: var(--primary, #1a3a5c);
}

.report-table-th-link:focus-visible {
    outline: 2px solid var(--info, #2563eb);
    outline-offset: -2px;
    border-radius: 2px;
}

.report-table-sort-icon {
    font-size: 0.75rem;
    opacity: 0.4;
}

.report-table-sort-icon--active {
    opacity: 1;
    color: var(--primary, #1a3a5c);
}

.report-table-th--num,
.report-table-td--num {
    text-align: right !important;
}

.report-table-td--code {
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary, #1a202c);
}

.report-table-td--name {
    font-weight: 500;
}

.report-table-row:hover {
    background: var(--bg-muted, #f8fafc);
}

.report-table-row:focus-within {
    outline: 2px solid var(--info, #2563eb);
    outline-offset: -2px;
}

/* ── Ocupación (barra de progreso) ────────────────────── */
.report-table-ocupacion {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 7rem;
}

.report-table-ocupacion-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary, #1a202c);
}

.report-table-ocupacion-pct {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #718096);
}

.report-table-bar {
    width: 100%;
    height: 0.5rem;
    background: var(--border-color, #e2e8f0);
    border-radius: 9999px;
    overflow: hidden;
}

.report-table-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.report-table-bar--success {
    background: var(--success, #16a34a);
}

.report-table-bar--warning {
    background: var(--warning, #d97706);
}

.report-table-bar--danger {
    background: var(--danger, #dc2626);
}

/* ── Cards (mobile) ───────────────────────────────────── */
.report-table-card {
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-sm, 0.75rem);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0 0 0 / 0.05));
    transition: box-shadow var(--transition, 0.2s ease);
    outline: none;
}

.report-table-card:hover {
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0 0 0 / 0.1));
}

.report-table-card:focus-visible {
    outline: 2px solid var(--info, #2563eb);
    outline-offset: 2px;
}

.report-table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs, 0.375rem);
}

.report-table-card-code {
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #718096);
    text-transform: uppercase;
}

.report-table-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    margin-bottom: var(--spacing-xs, 0.5rem);
}

.report-table-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs, 0.375rem);
    margin-bottom: var(--spacing-sm, 0.75rem);
}

.report-table-card-detail {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.report-table-card-detail-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light, #a0aec0);
}

.report-table-card-detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1a202c);
}

.report-table-card-ocupacion {
    padding-top: var(--spacing-xs, 0.5rem);
    border-top: 1px solid var(--border-color, #e2e8f0);
}

/* ── Empty states ─────────────────────────────────────── */
.report-table-empty {
    text-align: center;
    padding: 3rem 1.5rem;
}

.report-table-empty-icon {
    color: var(--text-light, #a0aec0);
    margin-bottom: var(--spacing-md, 1rem);
}

.report-table-empty-icon svg {
    width: 48px;
    height: 48px;
}

.report-table-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    margin: 0 0 var(--spacing-xs, 0.375rem);
}

.report-table-empty-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #718096);
    margin: 0;
}

/* ── Export actions sidebar ────────────────────────────── */
.reporte-export-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reporte-export-actions .btn {
    justify-content: center;
    width: 100%;
}

.reporte-export-actions .btn svg {
    width: 1rem;
    height: 1rem;
}

/* ── Responsive ────────────────────────────────────────── */

/* Desktop (default) — show desktop table, hide tablet/mobile */
.report-table-tablet,
.report-table-mobile {
    display: none;
}

/* Tablet: hide parroquia column, show tablet table */
@media (max-width: 1024px) {
    .report-table-desktop {
        display: none;
    }
    .report-table-mobile {
        display: none;
    }
    .report-table-tablet {
        display: block;
    }

    .report-table-th--parroquia,
    .report-table-td--parroquia {
        display: none;
    }

    .report-filter-bar {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile: show cards */
@media (max-width: 640px) {
    .report-table-desktop,
    .report-table-tablet {
        display: none;
    }
    .report-table-mobile {
        display: block;
    }

    .report-filter-bar {
        grid-template-columns: 1fr;
    }

    .report-filter-orden-row {
        flex-direction: column;
    }

    .report-filter-orden-dir {
        width: 100%;
    }

    .reporte-filtros {
        padding: var(--spacing-md, 1rem);
    }

    .reporte-summary-text {
        font-size: 0.8125rem;
    }
}

/*
 * ──────────────────────────────────────────────────────────
 * Reporte General de Residentes (Fase 8 — F8-04)
 * Prefijo: residente-report- / residente-table- / residente-filter- / residente-sidebar- / residente-summary-
 * ──────────────────────────────────────────────────────────
 */

/* ── Layout principal ─────────────────────────────────── */
.residente-report-main {
    min-width: 0;
}

/* ── KPIs ─────────────────────────────────────────────── */
.residente-report-kpis {
    margin-bottom: 1.25rem;
}

/* ── Barra de filtros ─────────────────────────────────── */
.residente-report-filtros {
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--spacing-lg, 1.5rem);
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.residente-filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: var(--spacing-md, 1rem);
    align-items: end;
}

.residente-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.residente-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #718096);
    margin-bottom: 0;
}

.residente-filter-input,
.residente-filter-select {
    font-size: 0.875rem;
}

.residente-filter-orden-row {
    display: flex;
    gap: 0.5rem;
}

.residente-filter-orden-select {
    flex: 1;
}

.residente-filter-orden-dir {
    width: 8rem;
    flex-shrink: 0;
}

.residente-filter-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: var(--spacing-md, 1rem);
    padding-top: var(--spacing-md, 1rem);
    border-top: 1px solid var(--border-color, #e2e8f0);
}

/* ── Resumen ──────────────────────────────────────────── */
.residente-report-summary {
    margin-bottom: var(--spacing-md, 1rem);
}

.residente-report-summary-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #718096);
    margin: 0;
}

.residente-report-summary-text strong {
    color: var(--text-primary, #1a202c);
}

/* ── Contenedor de tabla ──────────────────────────────── */
.residente-table-container {
    margin-top: 0;
}

/* ── Tabla ────────────────────────────────────────────── */
.residente-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.residente-table th,
.residente-table td {
    padding: 0.5rem 0.625rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    vertical-align: middle;
}

.residente-table thead th {
    background: var(--bg-muted, #f8fafc);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #718096);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.residente-table-th--sortable {
    padding: 0 !important;
}

.residente-table-th-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.625rem;
    text-decoration: none;
    color: var(--text-secondary, #718096);
    transition: color var(--transition, 0.2s ease);
}

.residente-table-th-link:hover {
    color: var(--primary, #1a3a5c);
}

.residente-table-th-link:focus-visible {
    outline: 2px solid var(--info, #2563eb);
    outline-offset: -2px;
    border-radius: 2px;
}

.residente-table-sort-icon {
    font-size: 0.75rem;
    opacity: 0.4;
}

.residente-table-sort-icon--active {
    opacity: 1;
    color: var(--primary, #1a3a5c);
}

.residente-table-th--num,
.residente-table-td--num {
    text-align: right !important;
    white-space: nowrap;
}

.residente-table-th--foto,
.residente-table-td--foto {
    width: 40px;
    text-align: center !important;
}

/* Avatar / foto */
.residente-table-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-muted, #f8fafc);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light, #a0aec0);
    flex-shrink: 0;
}

.residente-table-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.residente-table-td--cedula {
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary, #1a202c);
    white-space: nowrap;
}

.residente-table-td--name {
    font-weight: 500;
}

.residente-table-name {
    color: var(--text-primary, #1a202c);
}

.residente-table-td--refugio {
    font-size: 0.8125rem;
}

.residente-table-td--fecha {
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--text-secondary, #718096);
}

.residente-table-row:hover {
    background: var(--bg-muted, #f8fafc);
}

.residente-table-row:focus-within {
    outline: 2px solid var(--info, #2563eb);
    outline-offset: -2px;
}

/* ── Cards (mobile) ───────────────────────────────────── */
.residente-table-card {
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-sm, 0.75rem);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0 0 0 / 0.05));
    transition: box-shadow var(--transition, 0.2s ease);
    outline: none;
}

.residente-table-card:hover {
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0 0 0 / 0.1));
}

.residente-table-card:focus-visible {
    outline: 2px solid var(--info, #2563eb);
    outline-offset: 2px;
}

.residente-table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm, 0.75rem);
}

.residente-table-card-user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.residente-table-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.residente-table-card-avatar--placeholder {
    background: var(--bg-muted, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light, #a0aec0);
}

.residente-table-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.residente-table-card-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.residente-table-card-cedula {
    font-size: 0.75rem;
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
    color: var(--text-secondary, #718096);
}

.residente-table-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs, 0.5rem);
}

.residente-table-card-detail {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.residente-table-card-detail-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light, #a0aec0);
}

.residente-table-card-detail-value {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary, #1a202c);
}

/* ── Empty states ─────────────────────────────────────── */
.residente-table-empty {
    text-align: center;
    padding: 3rem 1.5rem;
}

.residente-table-empty-icon {
    color: var(--text-light, #a0aec0);
    margin-bottom: var(--spacing-md, 1rem);
}

.residente-table-empty-icon svg {
    width: 48px;
    height: 48px;
}

.residente-table-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    margin: 0 0 var(--spacing-xs, 0.375rem);
}

.residente-table-empty-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #718096);
    margin: 0;
}

/* ── Export actions sidebar ────────────────────────────── */
.residente-report-export-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.residente-report-export-actions .btn {
    justify-content: center;
    width: 100%;
}

.residente-report-export-actions .btn svg {
    width: 1rem;
    height: 1rem;
}

/* ── Responsive ────────────────────────────────────────── */

/* Desktop (default) — show desktop table, hide tablet/mobile */
.residente-table-tablet,
.residente-table-mobile {
    display: none;
}

/* Tablet: hide municipio column, show tablet table */
@media (max-width: 1024px) {
    .residente-table-desktop {
        display: none;
    }
    .residente-table-mobile {
        display: none;
    }
    .residente-table-tablet {
        display: block;
    }

    .residente-table-th--municipio,
    .residente-table-td--municipio {
        display: none;
    }

    .residente-filter-bar {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Mobile: show cards */
@media (max-width: 640px) {
    .residente-table-desktop,
    .residente-table-tablet {
        display: none;
    }
    .residente-table-mobile {
        display: block;
    }

    .residente-filter-bar {
        grid-template-columns: 1fr;
    }

    .residente-filter-orden-row {
        flex-direction: column;
    }

    .residente-filter-orden-dir {
        width: 100%;
    }

    .residente-report-filtros {
        padding: var(--spacing-md, 1rem);
    }

    .residente-report-summary-text {
        font-size: 0.8125rem;
    }
}

/* ── ACCESO REPORT — F8-05 ─────────────────────────────── */
.acceso-report-main {
    min-width: 0;
}

.acceso-report-kpis {
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.acceso-report-filtros {
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.acceso-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-md, 1rem);
}

.acceso-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.acceso-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.acceso-filter-input,
.acceso-filter-select {
    font-size: 0.875rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-white, #ffffff);
    transition: border-color var(--transition, 0.2s ease);
}

.acceso-filter-input:focus,
.acceso-filter-select:focus {
    outline: none;
    border-color: var(--primary-light, #2c5282);
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.15);
}

.acceso-filter-orden-row {
    display: flex;
    gap: 0.5rem;
}

.acceso-filter-orden-select {
    flex: 1;
}

.acceso-filter-orden-dir {
    width: 130px;
    flex-shrink: 0;
}

.acceso-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: var(--spacing-sm, 0.5rem);
}

/* Summary */
.acceso-report-summary {
    margin-bottom: var(--spacing-md, 1rem);
}

.acceso-report-summary-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.acceso-report-summary-text strong {
    color: var(--text, #1f2937);
}

/* Table container */
.acceso-table-container {
    overflow-x: auto;
}

/* Desktop table */
.acceso-table-desktop {
    display: block;
}

.acceso-table-tablet {
    display: none;
}

.acceso-table-mobile {
    display: none;
}

.acceso-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.acceso-table thead {
    background: var(--bg, #f0f2f5);
}

.acceso-table-th {
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
    border-bottom: 2px solid var(--border, #e5e7eb);
}

.acceso-table-th--sortable {
    padding: 0;
}

.acceso-table-th-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    color: var(--text-secondary, #6b7280);
    text-decoration: none;
    transition: color var(--transition, 0.2s ease);
}

.acceso-table-th-link:hover,
.acceso-table-th-link:focus-visible {
    color: var(--primary, #1a3a5c);
    outline: none;
}

.acceso-table-th--num {
    text-align: right;
}

.acceso-table-th--usuario {
    white-space: nowrap;
}

.acceso-table-sort-icon {
    font-size: 0.75rem;
    color: var(--text-light, #9ca3af);
    transition: color var(--transition, 0.2s ease);
}

.acceso-table-sort-icon--active {
    color: var(--primary, #1a3a5c);
    font-weight: 700;
}

.acceso-table-row {
    transition: background var(--transition, 0.2s ease);
}

.acceso-table-row:hover {
    background: var(--neutral-bg, #f3f4f6);
}

.acceso-table-row:focus-within {
    outline: 2px solid var(--primary-light, #2c5282);
    outline-offset: -2px;
}

.acceso-table-td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-light, #f3f4f6);
    vertical-align: middle;
    color: var(--text, #1f2937);
}

.acceso-table-td--fecha,
.acceso-table-td--hora {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.acceso-table-td--name {
    min-width: 140px;
}

.acceso-table-name {
    font-weight: 500;
}

.acceso-table-td--cedula {
    font-family: 'Inter', monospace;
    font-variant-numeric: tabular-nums;
}

.acceso-table-td--usuario {
    white-space: nowrap;
}

.acceso-table-td--obs {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}

/* Card (mobile) */
.acceso-table-card {
    background: var(--bg-white, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-sm, 0.5rem);
    transition: box-shadow var(--transition, 0.2s ease);
}

.acceso-table-card:hover {
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.acceso-table-card:focus-visible {
    outline: 2px solid var(--primary-light, #2c5282);
    outline-offset: 2px;
}

.acceso-table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.acceso-table-card-residente {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text, #1f2937);
}

.acceso-table-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs, 0.375rem);
}

.acceso-table-card-detail {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.acceso-table-card-detail-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-light, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.acceso-table-card-detail-value {
    font-size: 0.8125rem;
    color: var(--text, #1f2937);
}

/* Empty states */
.acceso-table-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.acceso-table-empty-icon {
    color: var(--text-light, #9ca3af);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.acceso-table-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text, #1f2937);
    margin-bottom: 0.5rem;
}

.acceso-table-empty-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    max-width: 400px;
    margin: 0 auto;
}

/* Sidebar */
.acceso-sidebar-section .report-sidebar-status-value {
    font-size: 0.8125rem;
}

/* Export actions */
.acceso-report-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.acceso-report-export-actions .btn {
    flex: 1;
    min-width: 90px;
    justify-content: center;
}

.acceso-report-export-actions .btn svg {
    width: 16px;
    height: 16px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 1024px) {
    .acceso-table-desktop {
        display: none;
    }
    .acceso-table-mobile {
        display: none;
    }
    .acceso-table-tablet {
        display: block;
    }

    .acceso-table-th--usuario,
    .acceso-table-td--usuario {
        display: none;
    }

    .acceso-filter-bar {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .acceso-table-desktop,
    .acceso-table-tablet {
        display: none;
    }
    .acceso-table-mobile {
        display: block;
    }

    .acceso-filter-bar {
        grid-template-columns: 1fr;
    }

    .acceso-filter-orden-row {
        flex-direction: column;
    }

    .acceso-filter-orden-dir {
        width: 100%;
    }

    .acceso-report-filtros {
        padding: var(--spacing-md, 1rem);
    }

    .acceso-report-summary-text {
        font-size: 0.8125rem;
    }
}

/* ── NOVEDAD REPORT — F8-06 ─────────────────────────────── */
.novedad-report-main {
    min-width: 0;
}

.novedad-report-kpis {
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.novedad-report-filtros {
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.novedad-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-md, 1rem);
}

.novedad-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.novedad-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.novedad-filter-input,
.novedad-filter-select {
    font-size: 0.875rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-white, #ffffff);
    transition: border-color var(--transition, 0.2s ease);
}

.novedad-filter-input:focus,
.novedad-filter-select:focus {
    outline: none;
    border-color: var(--primary-light, #2c5282);
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.15);
}

.novedad-filter-orden-row {
    display: flex;
    gap: 0.5rem;
}

.novedad-filter-orden-select {
    flex: 1;
}

.novedad-filter-orden-dir {
    width: 130px;
    flex-shrink: 0;
}

.novedad-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: var(--spacing-sm, 0.5rem);
}

.novedad-report-summary {
    margin-bottom: var(--spacing-md, 1rem);
}

.novedad-report-summary-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.novedad-report-summary-text strong {
    color: var(--text, #1f2937);
}

.novedad-table-container {
    overflow-x: auto;
}

.novedad-table-desktop {
    display: block;
}

.novedad-table-tablet {
    display: none;
}

.novedad-table-mobile {
    display: none;
}

.novedad-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.novedad-table thead {
    background: var(--bg, #f0f2f5);
}

.novedad-table-th {
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
    border-bottom: 2px solid var(--border, #e5e7eb);
}

.novedad-table-th--sortable {
    padding: 0;
}

.novedad-table-th-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    color: var(--text-secondary, #6b7280);
    text-decoration: none;
    transition: color var(--transition, 0.2s ease);
}

.novedad-table-th-link:hover,
.novedad-table-th-link:focus-visible {
    color: var(--primary, #1a3a5c);
    outline: none;
}

.novedad-table-sort-icon {
    font-size: 0.75rem;
    color: var(--text-light, #9ca3af);
    transition: color var(--transition, 0.2s ease);
}

.novedad-table-sort-icon--active {
    color: var(--primary, #1a3a5c);
    font-weight: 700;
}

.novedad-table-row {
    transition: background var(--transition, 0.2s ease);
}

.novedad-table-row:hover {
    background: var(--neutral-bg, #f3f4f6);
}

.novedad-table-row:focus-within {
    outline: 2px solid var(--primary-light, #2c5282);
    outline-offset: -2px;
}

.novedad-table-td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-light, #f3f4f6);
    vertical-align: middle;
    color: var(--text, #1f2937);
}

.novedad-table-td--fecha {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.novedad-table-td--titulo {
    min-width: 160px;
}

.novedad-table-titulo {
    font-weight: 500;
}

.novedad-table-td--refugio {
    white-space: nowrap;
}

.novedad-table-td--usuario {
    white-space: nowrap;
}

.novedad-table-td--tiempo {
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.novedad-table-card {
    background: var(--bg-white, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-sm, 0.5rem);
    transition: box-shadow var(--transition, 0.2s ease);
}

.novedad-table-card:hover {
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.novedad-table-card:focus-visible {
    outline: 2px solid var(--primary-light, #2c5282);
    outline-offset: 2px;
}

.novedad-table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.novedad-table-card-titulo {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text, #1f2937);
    flex: 1;
}

.novedad-table-card-badges {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.novedad-table-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs, 0.375rem);
}

.novedad-table-card-detail {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.novedad-table-card-detail-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-light, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.novedad-table-card-detail-value {
    font-size: 0.8125rem;
    color: var(--text, #1f2937);
}

.novedad-table-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.novedad-table-empty-icon {
    color: var(--text-light, #9ca3af);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.novedad-table-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text, #1f2937);
    margin-bottom: 0.5rem;
}

.novedad-table-empty-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    max-width: 400px;
    margin: 0 auto;
}

.novedad-sidebar-section .report-sidebar-status-value {
    font-size: 0.8125rem;
}

.novedad-report-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.novedad-report-export-actions .btn {
    flex: 1;
    min-width: 90px;
    justify-content: center;
}

.novedad-report-export-actions .btn svg {
    width: 16px;
    height: 16px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

@media (max-width: 1024px) {
    .novedad-table-desktop {
        display: none;
    }
    .novedad-table-mobile {
        display: none;
    }
    .novedad-table-tablet {
        display: block;
    }

    .novedad-table-th--usuario,
    .novedad-table-td--usuario {
        display: none;
    }

    .novedad-filter-bar {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .novedad-table-desktop,
    .novedad-table-tablet {
        display: none;
    }
    .novedad-table-mobile {
        display: block;
    }

    .novedad-filter-bar {
        grid-template-columns: 1fr;
    }

    .novedad-filter-orden-row {
        flex-direction: column;
    }

    .novedad-filter-orden-dir {
        width: 100%;
    }

    .novedad-report-filtros {
        padding: var(--spacing-md, 1rem);
    }

    .novedad-report-summary-text {
        font-size: 0.8125rem;
    }
}

/* ── INVENTORY REPORT — F8-07 ─────────────────────────── */
.inventory-report-main {
    min-width: 0;
}

.inventory-report-kpis {
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.inventory-report-filtros {
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.inventory-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-md, 1rem);
}

.inventory-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inventory-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inventory-filter-input,
.inventory-filter-select {
    font-size: 0.875rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-white, #ffffff);
    transition: border-color var(--transition, 0.2s ease);
}

.inventory-filter-input:focus,
.inventory-filter-select:focus {
    outline: none;
    border-color: var(--primary-light, #2c5282);
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.15);
}

.inventory-filter-orden-row {
    display: flex;
    gap: 0.5rem;
}

.inventory-filter-orden-select {
    flex: 1;
}

.inventory-filter-orden-dir {
    width: 130px;
    flex-shrink: 0;
}

.inventory-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: var(--spacing-sm, 0.5rem);
}

.inventory-report-summary {
    margin-bottom: var(--spacing-md, 1rem);
}

.inventory-report-summary-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.inventory-report-summary-text strong {
    color: var(--text, #1f2937);
}

.inventory-table-container {
    overflow-x: auto;
}

.inventory-table-desktop {
    display: block;
}

.inventory-table-tablet {
    display: none;
}

.inventory-table-mobile {
    display: none;
}

.inventory-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.inventory-table thead {
    background: var(--bg, #f0f2f5);
}

.inventory-table-th {
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
    border-bottom: 2px solid var(--border, #e5e7eb);
}

.inventory-table-th--sortable {
    padding: 0;
}

.inventory-table-th-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    color: var(--text-secondary, #6b7280);
    text-decoration: none;
    transition: color var(--transition, 0.2s ease);
}

.inventory-table-th-link:hover,
.inventory-table-th-link:focus-visible {
    color: var(--primary, #1a3a5c);
    outline: none;
}

.inventory-table-th--num {
    text-align: right;
}

.inventory-table-sort-icon {
    font-size: 0.75rem;
    color: var(--text-light, #9ca3af);
    transition: color var(--transition, 0.2s ease);
}

.inventory-table-sort-icon--active {
    color: var(--primary, #1a3a5c);
    font-weight: 700;
}

.inventory-table-row {
    transition: background var(--transition, 0.2s ease);
}

.inventory-table-row:hover {
    background: var(--neutral-bg, #f3f4f6);
}

.inventory-table-row:focus-within {
    outline: 2px solid var(--primary-light, #2c5282);
    outline-offset: -2px;
}

.inventory-table-td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-light, #f3f4f6);
    vertical-align: middle;
    color: var(--text, #1f2937);
}

.inventory-table-td--code {
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.8125rem;
}

.inventory-table-td--name {
    min-width: 160px;
}

.inventory-table-code {
    font-family: monospace;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.inventory-table-name {
    font-weight: 500;
}

.inventory-table-td--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.inventory-table-td--refugio {
    white-space: nowrap;
}

.inventory-table-td--mov {
    white-space: nowrap;
    font-size: 0.8125rem;
}

.inventory-table-stock {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.inventory-table-stock--ok {
    color: var(--success, #16a34a);
}

.inventory-table-stock--low {
    color: var(--warning, #d97706);
}

.inventory-table-stock--empty {
    color: var(--danger, #dc2626);
}

.inventory-table-card {
    background: var(--bg-white, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-sm, 0.5rem);
    transition: box-shadow var(--transition, 0.2s ease);
}

.inventory-table-card:hover {
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.inventory-table-card:focus-visible {
    outline: 2px solid var(--primary-light, #2c5282);
    outline-offset: 2px;
}

.inventory-table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.inventory-table-card-code {
    font-family: monospace;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.inventory-table-card-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text, #1f2937);
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.inventory-table-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs, 0.375rem);
}

.inventory-table-card-detail {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.inventory-table-card-detail-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-light, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inventory-table-card-detail-value {
    font-size: 0.8125rem;
    color: var(--text, #1f2937);
}

.inventory-table-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.inventory-table-empty-icon {
    color: var(--text-light, #9ca3af);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.inventory-table-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text, #1f2937);
    margin-bottom: 0.5rem;
}

.inventory-table-empty-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    max-width: 400px;
    margin: 0 auto;
}

.inventory-sidebar-section .report-sidebar-status-value {
    font-size: 0.8125rem;
}

.inventory-report-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.inventory-report-export-actions .btn {
    flex: 1;
    min-width: 90px;
    justify-content: center;
}

.inventory-report-export-actions .btn svg {
    width: 16px;
    height: 16px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

@media (max-width: 1024px) {
    .inventory-table-desktop {
        display: none;
    }
    .inventory-table-mobile {
        display: none;
    }
    .inventory-table-tablet {
        display: block;
    }

    .inventory-filter-bar {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .inventory-table-desktop,
    .inventory-table-tablet {
        display: none;
    }
    .inventory-table-mobile {
        display: block;
    }

    .inventory-filter-bar {
        grid-template-columns: 1fr;
    }

    .inventory-filter-orden-row {
        flex-direction: column;
    }

    .inventory-filter-orden-dir {
        width: 100%;
    }

    .inventory-report-filtros {
        padding: var(--spacing-md, 1rem);
    }

    .inventory-report-summary-text {
        font-size: 0.8125rem;
    }
}

/* ── SOS REPORT — F8-08 ───────────────────────────────── */
.sos-report-main {
    min-width: 0;
}

.sos-report-kpis {
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.sos-report-filtros {
    margin-bottom: var(--spacing-lg, 1.5rem);
}

.sos-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-md, 1rem);
}

.sos-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sos-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sos-filter-input,
.sos-filter-select {
    font-size: 0.875rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-white, #ffffff);
    transition: border-color var(--transition, 0.2s ease);
}

.sos-filter-input:focus,
.sos-filter-select:focus {
    outline: none;
    border-color: var(--primary-light, #2c5282);
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.15);
}

.sos-filter-orden-row {
    display: flex;
    gap: 0.5rem;
}

.sos-filter-orden-select {
    flex: 1;
}

.sos-filter-orden-dir {
    width: 130px;
    flex-shrink: 0;
}

.sos-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: var(--spacing-sm, 0.5rem);
}

.sos-report-summary {
    margin-bottom: var(--spacing-md, 1rem);
}

.sos-report-summary-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.sos-report-summary-text strong {
    color: var(--text, #1f2937);
}

.sos-table-container {
    overflow-x: auto;
}

.sos-table-desktop {
    display: block;
}

.sos-table-tablet {
    display: none;
}

.sos-table-mobile {
    display: none;
}

.sos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.sos-table thead {
    background: var(--bg, #f0f2f5);
}

.sos-table-th {
    padding: 0.625rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
    border-bottom: 2px solid var(--border, #e5e7eb);
}

.sos-table-th--sortable {
    padding: 0;
}

.sos-table-th-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    color: var(--text-secondary, #6b7280);
    text-decoration: none;
    transition: color var(--transition, 0.2s ease);
}

.sos-table-th-link:hover,
.sos-table-th-link:focus-visible {
    color: var(--primary, #1a3a5c);
    outline: none;
}

.sos-table-sort-icon {
    font-size: 0.75rem;
    color: var(--text-light, #9ca3af);
    transition: color var(--transition, 0.2s ease);
}

.sos-table-sort-icon--active {
    color: var(--primary, #1a3a5c);
    font-weight: 700;
}

.sos-table-row {
    transition: background var(--transition, 0.2s ease);
}

.sos-table-row:hover {
    background: var(--neutral-bg, #f3f4f6);
}

.sos-table-row:focus-within {
    outline: 2px solid var(--primary-light, #2c5282);
    outline-offset: -2px;
}

.sos-table-td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-light, #f3f4f6);
    vertical-align: middle;
    color: var(--text, #1f2937);
}

.sos-table-td--fecha {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sos-table-td--hora {
    white-space: nowrap;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8125rem;
}

.sos-table-td--refugio {
    white-space: nowrap;
}

.sos-table-td--usuario {
    white-space: nowrap;
}

.sos-table-td--ubicacion {
    white-space: nowrap;
    font-size: 0.8125rem;
}

.sos-table-ubicacion-link {
    color: var(--primary, #1a3a5c);
    text-decoration: none;
    font-weight: 500;
}

.sos-table-ubicacion-link:hover {
    text-decoration: underline;
}

.sos-table-td--obs {
    max-width: 200px;
}

.sos-table-obs-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.sos-table-card {
    background: var(--bg-white, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    padding: var(--spacing-md, 1rem);
    margin-bottom: var(--spacing-sm, 0.5rem);
    transition: box-shadow var(--transition, 0.2s ease);
}

.sos-table-card:hover {
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.sos-table-card:focus-visible {
    outline: 2px solid var(--primary-light, #2c5282);
    outline-offset: 2px;
}

.sos-table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.sos-table-card-tipo {
    font-weight: 600;
}

.sos-table-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs, 0.375rem);
}

.sos-table-card-detail {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sos-table-card-detail--full {
    grid-column: 1 / -1;
}

.sos-table-card-detail-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-light, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sos-table-card-detail-value {
    font-size: 0.8125rem;
    color: var(--text, #1f2937);
}

.sos-table-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.sos-table-empty-icon {
    color: var(--text-light, #9ca3af);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.sos-table-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text, #1f2937);
    margin-bottom: 0.5rem;
}

.sos-table-empty-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    max-width: 400px;
    margin: 0 auto;
}

.sos-sidebar-section .report-sidebar-status-value {
    font-size: 0.8125rem;
}

.sos-report-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sos-report-export-actions .btn {
    flex: 1;
    min-width: 90px;
    justify-content: center;
}

.sos-report-export-actions .btn svg {
    width: 16px;
    height: 16px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

@media (max-width: 1024px) {
    .sos-table-desktop {
        display: none;
    }
    .sos-table-mobile {
        display: none;
    }
    .sos-table-tablet {
        display: block;
    }

    .sos-table-th--ubicacion,
    .sos-table-td--ubicacion {
        display: none;
    }

    .sos-filter-bar {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .sos-table-desktop,
    .sos-table-tablet {
        display: none;
    }
    .sos-table-mobile {
        display: block;
    }

    .sos-filter-bar {
        grid-template-columns: 1fr;
    }

    .sos-filter-orden-row {
        flex-direction: column;
    }

    .sos-filter-orden-dir {
        width: 100%;
    }

    .sos-report-filtros {
        padding: var(--spacing-md, 1rem);
    }

    .sos-report-summary-text {
        font-size: 0.8125rem;
    }
}

/*
 * ──────────────────────────────────────────────────────────
 * Reporte Ejecutivo Institucional (F8-09)
 * Prefijo: ejecutivo-
 * ──────────────────────────────────────────────────────────
 */

/* ── Layout ──────────────────────────────────────────── */
.ejecutivo-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

.ejecutivo-main {
    min-width: 0;
}

/* ── Section ─────────────────────────────────────────── */
.ejecutivo-section {
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 0.75rem);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.ejecutivo-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.ejecutivo-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    flex: 1;
}

.ejecutivo-section-title svg {
    color: var(--primary, #2563eb);
    flex-shrink: 0;
}

.ejecutivo-section-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary, #94a3b8);
    background: var(--bg-secondary, #f1f5f9);
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* ── Resumen Grid ────────────────────────────────────── */
.ejecutivo-resumen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.ejecutivo-resumen-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    transition: box-shadow 0.15s ease;
}

.ejecutivo-resumen-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ejecutivo-resumen-card-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 0.5rem);
}

.ejecutivo-resumen-card-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.ejecutivo-resumen-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ejecutivo-resumen-card-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    line-height: 1.2;
}

.ejecutivo-resumen-card-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.3;
}

/* Variantes de color */
.ejecutivo-resumen-card-primary .ejecutivo-resumen-card-icon { background: var(--primary-bg, #eff6ff); color: var(--primary, #2563eb); }
.ejecutivo-resumen-card-info .ejecutivo-resumen-card-icon { background: var(--info-bg, #eff6ff); color: var(--info, #0891b2); }
.ejecutivo-resumen-card-success .ejecutivo-resumen-card-icon { background: var(--success-bg, #f0fdf4); color: var(--success, #16a34a); }
.ejecutivo-resumen-card-warning .ejecutivo-resumen-card-icon { background: var(--warning-bg, #fffbeb); color: var(--warning, #d97706); }
.ejecutivo-resumen-card-danger .ejecutivo-resumen-card-icon { background: var(--danger-bg, #fef2f2); color: var(--danger, #dc2626); }
.ejecutivo-resumen-card-neutral .ejecutivo-resumen-card-icon { background: var(--bg-tertiary, #f1f5f9); color: var(--text-secondary, #64748b); }
.ejecutivo-resumen-card-secondary .ejecutivo-resumen-card-icon { background: #f3e8ff; color: #7c3aed; }

/* ── KPIs Grid ───────────────────────────────────────── */
.ejecutivo-kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.875rem;
}

.ejecutivo-kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    transition: box-shadow 0.15s ease;
}

.ejecutivo-kpi-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ejecutivo-kpi-card-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 0.375rem);
}

.ejecutivo-kpi-card-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.ejecutivo-kpi-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ejecutivo-kpi-card-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    line-height: 1.2;
}

.ejecutivo-kpi-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    line-height: 1.3;
}

.ejecutivo-kpi-card-desc {
    font-size: 0.6875rem;
    color: var(--text-tertiary, #94a3b8);
    line-height: 1.2;
}

/* Variantes KPI */
.ejecutivo-kpi-card-primary .ejecutivo-kpi-card-icon { background: var(--primary-bg, #eff6ff); color: var(--primary, #2563eb); }
.ejecutivo-kpi-card-info .ejecutivo-kpi-card-icon { background: var(--info-bg, #eff6ff); color: var(--info, #0891b2); }
.ejecutivo-kpi-card-success .ejecutivo-kpi-card-icon { background: var(--success-bg, #f0fdf4); color: var(--success, #16a34a); }
.ejecutivo-kpi-card-warning .ejecutivo-kpi-card-icon { background: var(--warning-bg, #fffbeb); color: var(--warning, #d97706); }
.ejecutivo-kpi-card-danger .ejecutivo-kpi-card-icon { background: var(--danger-bg, #fef2f2); color: var(--danger, #dc2626); }
.ejecutivo-kpi-card-neutral .ejecutivo-kpi-card-icon { background: var(--bg-tertiary, #f1f5f9); color: var(--text-secondary, #64748b); }

/* ── Semáforo ────────────────────────────────────────── */
.ejecutivo-semaforo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: var(--radius-lg, 0.75rem);
    border: 1px solid var(--border-color, #e2e8f0);
}

.ejecutivo-semaforo-normal {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-color: #bbf7d0;
}

.ejecutivo-semaforo-atencion {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}

.ejecutivo-semaforo-critico {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
}

.ejecutivo-semaforo-icono {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ejecutivo-semaforo-normal .ejecutivo-semaforo-icono svg { color: var(--success, #16a34a); }
.ejecutivo-semaforo-atencion .ejecutivo-semaforo-icono svg { color: var(--warning, #d97706); }
.ejecutivo-semaforo-critico .ejecutivo-semaforo-icono svg { color: var(--danger, #dc2626); }

.ejecutivo-semaforo-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ejecutivo-semaforo-estado {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.ejecutivo-semaforo-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.5;
}

/* ── Riesgos ──────────────────────────────────────────── */
.ejecutivo-riesgos-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ejecutivo-riesgo-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md, 0.5rem);
    border: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
    transition: background 0.15s ease;
}

.ejecutivo-riesgo-item:hover {
    background: var(--bg-secondary, #f8fafc);
}

.ejecutivo-riesgo-icono {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.ejecutivo-riesgo-critica .ejecutivo-riesgo-icono { background: var(--danger-bg, #fef2f2); color: var(--danger, #dc2626); }
.ejecutivo-riesgo-alta .ejecutivo-riesgo-icono { background: var(--warning-bg, #fffbeb); color: var(--warning, #d97706); }
.ejecutivo-riesgo-media .ejecutivo-riesgo-icono { background: var(--info-bg, #eff6ff); color: var(--info, #0891b2); }
.ejecutivo-riesgo-baja .ejecutivo-riesgo-icono { background: var(--bg-tertiary, #f1f5f9); color: var(--text-secondary, #64748b); }

.ejecutivo-riesgo-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ejecutivo-riesgo-mensaje {
    font-size: 0.8125rem;
    color: var(--text-primary, #1e293b);
    margin: 0;
    line-height: 1.4;
}

.ejecutivo-riesgo-refugio {
    font-size: 0.6875rem;
    color: var(--text-tertiary, #94a3b8);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ── Ranking ──────────────────────────────────────────── */
.ejecutivo-ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.ejecutivo-ranking-card {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 0.5rem);
    overflow: hidden;
    background: #fff;
}

.ejecutivo-ranking-card-header {
    padding: 0.625rem 1rem;
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.ejecutivo-ranking-card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0;
}

.ejecutivo-ranking-card-body {
    padding: 0.5rem;
}

.ejecutivo-ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ejecutivo-ranking-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.5rem;
    border-radius: var(--radius-sm, 0.375rem);
    transition: background 0.12s ease;
}

.ejecutivo-ranking-item:hover {
    background: var(--bg-secondary, #f8fafc);
}

.ejecutivo-ranking-pos {
    width: 1.375rem;
    height: 1.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    flex-shrink: 0;
}

.ejecutivo-ranking-item:first-child .ejecutivo-ranking-pos {
    background: #fef3c7;
    color: #92400e;
}

.ejecutivo-ranking-item:nth-child(2) .ejecutivo-ranking-pos {
    background: #f1f5f9;
    color: #475569;
}

.ejecutivo-ranking-item:nth-child(3) .ejecutivo-ranking-pos {
    background: #fef2f2;
    color: #991b1b;
}

.ejecutivo-ranking-nombre {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ejecutivo-ranking-valor {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Actividad Reciente ──────────────────────────────── */
.ejecutivo-activity {
    margin: 0;
}

/* ── Módulos Grid ─────────────────────────────────────── */
.ejecutivo-modulos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.ejecutivo-modulo-card {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 0.5rem);
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.15s ease;
}

.ejecutivo-modulo-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ejecutivo-modulo-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.ejecutivo-modulo-card-header svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--primary, #2563eb);
    flex-shrink: 0;
}

.ejecutivo-modulo-card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0;
}

.ejecutivo-modulo-card-body {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ejecutivo-modulo-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ejecutivo-modulo-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
}

.ejecutivo-modulo-stat-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
}

/* ── Observaciones ────────────────────────────────────── */
.ejecutivo-observaciones-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ejecutivo-observacion-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md, 0.5rem);
    border: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
    transition: background 0.15s ease;
}

.ejecutivo-observacion-icono {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-top: 0.125rem;
}

.ejecutivo-observacion-critica .ejecutivo-observacion-icono { background: var(--danger-bg, #fef2f2); color: var(--danger, #dc2626); }
.ejecutivo-observacion-alta .ejecutivo-observacion-icono { background: var(--warning-bg, #fffbeb); color: var(--warning, #d97706); }
.ejecutivo-observacion-media .ejecutivo-observacion-icono { background: var(--info-bg, #eff6ff); color: var(--info, #0891b2); }
.ejecutivo-observacion-normal .ejecutivo-observacion-icono { background: var(--success-bg, #f0fdf4); color: var(--success, #16a34a); }

.ejecutivo-observacion-body {
    flex: 1;
    min-width: 0;
}

.ejecutivo-observacion-mensaje {
    font-size: 0.8125rem;
    color: var(--text-primary, #1e293b);
    margin: 0;
    line-height: 1.5;
}

/* ── Sidebar actions ──────────────────────────────────── */
.report-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-sidebar-actions .btn {
    width: 100%;
    justify-content: center;
}

/* ── Empty state ──────────────────────────────────────── */
.ejecutivo-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-tertiary, #94a3b8);
    font-size: 0.875rem;
}

.ejecutivo-empty p {
    margin: 0;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1200px) {
    .ejecutivo-resumen-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .ejecutivo-kpis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ejecutivo-ranking-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .ejecutivo-modulos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .ejecutivo-layout {
        grid-template-columns: 1fr 240px;
    }
}

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

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

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

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

    .ejecutivo-modulos-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ejecutivo-section {
        padding: 1rem;
    }

    .ejecutivo-resumen-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
    }

    .ejecutivo-resumen-card {
        padding: 0.75rem;
        flex-direction: column;
        text-align: center;
    }

    .ejecutivo-kpis-grid {
        grid-template-columns: 1fr;
    }

    .ejecutivo-ranking-grid {
        grid-template-columns: 1fr;
    }

    .ejecutivo-semaforo {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }

    .ejecutivo-riesgo-item {
        flex-wrap: wrap;
    }
}

/* ──────────────────────────────────────────────────────
   Noticias / Avisos — Portal del Refugiado
   ────────────────────────────────────────────────────── */
.noticias-portal-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.noticia-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.noticia-card-titulo {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.noticia-card-resumen {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.noticia-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.noticia-autor {
    font-size: 0.8rem;
}

.noticia-fecha {
    font-size: 0.8rem;
}

.noticia-detalle-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.noticia-detalle-contenido {
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    white-space: pre-wrap;
}

.noticia-detalle-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.noticia-contenido {
    line-height: 1.7;
    font-size: 0.95rem;
    white-space: pre-wrap;
}

.noticia-portal-mini:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ──────────────────────────────────────────────────────
   Control de Acceso — Scanner QR de Carnets
   ────────────────────────────────────────────────────── */
.acceso-qr-card {
    margin-bottom: 1rem;
}

.acceso-qr-layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 1rem;
    align-items: stretch;
}

.acceso-qr-camera {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #0f172a;
}

.acceso-qr-video {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: block;
    object-fit: cover;
}

.acceso-qr-overlay {
    position: absolute;
    inset: 18%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.35);
    pointer-events: none;
}

.acceso-qr-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.875rem;
}

.acceso-qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.acceso-qr-status {
    margin: 0;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--neutral-bg);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.acceso-qr-status[data-type="success"] {
    background: #dcfce7;
    color: #166534;
}

.acceso-qr-status[data-type="warning"] {
    background: #fef3c7;
    color: #92400e;
}

.acceso-qr-status[data-type="error"] {
    background: #fee2e2;
    color: #991b1b;
}

.acceso-qr-manual-form {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.acceso-qr-manual-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 768px) {
    .acceso-qr-layout {
        grid-template-columns: 1fr;
    }

    .acceso-qr-manual-row {
        grid-template-columns: 1fr;
    }
}

/* Layout stabilization: dashboard responsive overrides */
.dashboard,
.dashboard-grid,
.dashboard-grid-main,
.dashboard-grid-sidebar,
.dashboard-kpis,
.dashboard-charts,
.dashboard-panel,
.dashboard-chart,
.dashboard-kpi {
    min-width: 0;
}

.dashboard {
    width: 100%;
    max-width: 100%;
}

.dashboard-panel,
.dashboard-chart,
.dashboard-kpi {
    overflow-wrap: anywhere;
}

.dashboard-kpi-label,
.dashboard-kpi-desc,
.dashboard-list-item-title,
.dashboard-list-item-meta,
.dashboard-progress-name,
.dashboard-progress-stats,
.dashboard-timeline-desc {
    min-width: 0;
}

.dashboard-chart-body canvas {
    display: block;
    max-width: 100%;
}

@media (max-width: 1200px) {
    .dashboard-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

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

    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .dashboard-charts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard {
        gap: 1rem;
    }

    .dashboard-header {
        align-items: flex-start;
    }

    .dashboard-title {
        font-size: clamp(1.45rem, 7vw, 1.875rem);
        letter-spacing: -0.03em;
    }

    .dashboard-subtitle {
        font-size: 0.875rem;
    }

    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.875rem;
    }

    .dashboard-kpi {
        padding: 1rem;
        gap: 0.875rem;
    }

    .dashboard-kpi-icon {
        width: 42px;
        height: 42px;
    }

    .dashboard-grid,
    .dashboard-charts {
        gap: 1rem;
    }

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

    .dashboard-panel-header,
    .dashboard-chart-header {
        padding: 0.75rem 1rem;
    }

    .dashboard-panel-body,
    .dashboard-chart-body {
        padding: 0.875rem 1rem;
    }

    .dashboard-progress-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .dashboard-progress-stats {
        white-space: normal;
    }
}

@media (max-width: 560px) {
    .dashboard-kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-kpi {
        align-items: flex-start;
    }

    .dashboard-kpi-value {
        font-size: 1.25rem;
    }

    .dashboard-list-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dashboard-list-item-left,
    .dashboard-list-item-right {
        max-width: 100%;
    }

    .dashboard-list-item-right {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard-chart-body {
        min-height: 180px;
    }
}

@media (max-width: 375px) {
    .dashboard-panel-header,
    .dashboard-chart-header {
        padding: 0.625rem 0.75rem;
    }

    .dashboard-panel-body,
    .dashboard-chart-body {
        padding: 0.75rem;
    }

    .dashboard-kpi {
        padding: 0.875rem;
    }

    .dashboard-kpi-icon {
        width: 38px;
        height: 38px;
    }
}

/* ------------------------------------------------------------
   Panel de indicadores de refugios
   ------------------------------------------------------------ */
.indicadores-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.indicadores-panel .page-header {
    margin-bottom: 0;
}

.indicadores-section {
    overflow: hidden;
}

.indicadores-section + .indicadores-section {
    margin-top: 1.5rem;
}

.indicadores-panel .card-body {
    min-width: 0;
}

.indicadores-filter-bar {
    grid-template-columns:
        minmax(220px, 1.4fr)
        minmax(160px, 0.8fr)
        minmax(150px, 0.8fr)
        minmax(150px, 0.8fr)
        auto;
    align-items: end;
}

.indicadores-filter-bar .form-input,
.indicadores-filter-bar .form-select {
    min-height: 2.5rem;
}

.indicadores-filter-bar .report-filter-actions {
    align-items: center;
    border-top: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 0;
    padding-top: 0;
}

.indicadores-panel .dashboard-kpis + .dashboard-charts,
.indicadores-panel .dashboard-kpis + .indicadores-inner-card,
.indicadores-panel .dashboard-charts + .indicadores-inner-card {
    margin-top: 1.25rem;
}

.indicadores-panel .dashboard-charts {
    margin-bottom: 1.25rem;
}

.indicadores-inner-card {
    margin-top: 1.25rem;
}

.indicadores-inner-card:first-child {
    margin-top: 0;
}

.indicadores-panel .card-body > .indicadores-inner-card:first-child {
    margin-top: 0;
}

.indicadores-inner-card .card-body {
    padding: 1rem;
}

@media (max-width: 1024px) {
    .indicadores-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .indicadores-filter-bar .report-filter-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .indicadores-panel {
        gap: 1rem;
    }

    .indicadores-section + .indicadores-section {
        margin-top: 1rem;
    }

    .indicadores-filter-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .indicadores-filter-bar .report-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .indicadores-filter-bar .report-filter-actions .btn {
        width: 100%;
    }
}