/* ==================== DESIGN TOKENS ==================== */
:root {
    --primary: #094F53;
    --primary-dark: #0B5C60;
    --primary-darker: #084849;
    --primary-light: #CFE7E5;
    --primary-50: #F2F9F8;
    --primary-100: #C3E2DF;
    --primary-200: #97CDC9;
    --primary-300: #6BB8B3;
    --primary-400: #3FA39E;
    --primary-500: #0D6B6E;
    --primary-600: #0B5C60;
    --primary-700: #094A4D;
    --secondary: #4B5563;
    --secondary-light: #F3F4F6;
    --success: #059669;
    --success-light: #D1FAE5;
    --success-50: #ECFDF5;
    --warning: #D97706;
    --warning-light: #FEF3C7;
    --warning-50: #FFFBEB;
    --danger: #DC2626;
    --danger-light: #FEE2E2;
    --danger-50: #FEF2F2;
    --info: #2563EB;
    --info-light: #DBEAFE;
    --info-50: #EFF6FF;
    --dark: #0F172A;
    --gray-25: #F8FAFC;
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;
    --white: #FFFFFF;
    --black: #000000;
    --sidebar-width: 270px;
    --header-height: 72px;
    --shadow-xs: 0 1px 1px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 30px 60px -12px rgba(0, 0, 0, 0.2);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== BASE ==================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--gray-700);
    background: var(--gray-25);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

ul {
    list-style: none;
}

img {
    max-width: 25%;
    height: auto;
    display: block;
}

/* ==================== UTILITIES ==================== */
.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

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

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

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

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================== LOGIN ==================== */
.login-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.login-panel-left {
    flex: 1;
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 40%, var(--primary-darker) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.login-panel-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(94, 234, 212, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(45, 212, 191, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.04) 0%, transparent 40%);
    pointer-events: none;
}

.login-panel-left::after {
    content: "";
    position: absolute;
    bottom: -180px;
    right: -180px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: pulse-glow 8s ease-in-out infinite;
}

.login-panel-left > * {
    position: relative;
    z-index: 1;
}

.login-panel-logo {
    width: 240px;
    max-width: 80%;
    margin-bottom: 2rem;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.25));
    animation: login-fade-up 0.9s var(--ease-out) both;
}

.login-panel-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.2);
    letter-spacing: -0.6px;
    line-height: 1.25;
    animation: login-fade-up 0.9s var(--ease-out) 0.1s both;
}

.login-panel-desc {
    font-size: 1.05rem;
    opacity: 0.92;
    max-width: 400px;
    line-height: 1.6;
    text-shadow: 0 1px 4px rgba(0,0,0,0.12);
    font-weight: 400;
    animation: login-fade-up 0.9s var(--ease-out) 0.2s both;
}

.login-help-link {
    position: absolute;
    top: 28px;
    right: 28px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 10px 20px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.18);
    transition: var(--transition);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    animation: login-fade-up 0.9s var(--ease-out) 0.3s both;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.login-help-link:hover {
    background: rgba(255,255,255,0.22);
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.login-help-link i {
    font-size: 0.9rem;
}

.login-logo-bottom {
    position: absolute;
    bottom: 28px;
    left: 28px;
    width: 60px;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
    z-index: 2;
    opacity: 0.9;
    animation: login-fade-in 1.2s var(--ease-out) 0.5s both;
}

.login-panel-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: url('../../imagenes/loginimagen.png') no-repeat center center;
    background-size: cover;
    position: relative;
    min-height: 100vh;
}

.login-panel-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    pointer-events: none;
}

.login-panel-right::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(15, 118, 110, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(45, 212, 191, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: var(--radius-2xl);
    padding: 2.75rem;
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.12),
        0 18px 36px -18px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    animation: login-card-in 0.7s var(--ease-out) both;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark), var(--primary-dark), var(--primary-dark), var(--primary));
    background-size: 300% 100%;
    animation: login-shimmer 4s linear infinite;
}

.login-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(15, 118, 110, 0.04) 0%, transparent 100%);
    pointer-events: none;
}

.login-card-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.login-card-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.login-card-subtitle {
    color: var(--gray-500);
    font-size: 0.95rem;
    font-weight: 500;
}

.login-card-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.5rem 0;
    color: var(--gray-400);
    font-size: 0.8rem;
    font-weight: 500;
}

.login-card-divider::before,
.login-card-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

.login-form-group {
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.login-form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.login-form-label i {
    font-size: 0.8rem;
    color: var(--gray-400);
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 1rem;
    transition: var(--transition);
    z-index: 2;
    pointer-events: none;
}

.login-input {
    width: 100%;
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem 0.85rem 2.75rem;
    border: 2px solid var(--gray-200);
    background: var(--gray-25);
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transition);
    color: var(--gray-800);
    font-family: inherit;
    box-shadow: var(--shadow-xs);
}

.login-input::placeholder {
    color: var(--gray-400);
    font-weight: 400;
}

.login-input:focus {
    border-color: var(--primary-400);
    box-shadow:
        0 0 0 4px rgba(20, 184, 166, 0.08),
        var(--shadow-sm);
    background: var(--white);
    outline: none;
}

.login-input:focus ~ .input-icon,
.login-input:focus + .input-icon {
    color: var(--primary);
    transform: translateY(-50%) scale(1.08);
}

.toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    cursor: pointer;
    padding: 6px;
    transition: var(--transition);
    z-index: 2;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-password:hover {
    color: var(--primary);
    background: var(--primary-50);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.form-check-input {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--gray-300);
    cursor: pointer;
    transition: var(--transition);
    accent-color: var(--primary);
    flex-shrink: 0;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
    outline: none;
}

.form-check-label {
    font-size: 0.875rem;
    color: var(--gray-600);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}

.btn-login {
    width: 100%;
    padding: 0.95rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #0F766E 0%, #074a50 100%);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 8px 20px -4px rgba(15, 118, 110, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.01em;
    z-index: 1;
}

.btn-login::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -6px rgba(15, 118, 110, 0.4);
    color: white;
}

.btn-login:hover::before {
    left: 100%;
}

.btn-login:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px -4px rgba(15, 118, 110, 0.3);
}

.btn-login:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}

.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    position: relative;
    z-index: 1;
}

.login-footer-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-500);
    font-size: 0.8rem;
    font-weight: 600;
}

.login-footer-item i {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.login-footer-note {
    text-align: center;
    margin-top: 1.25rem;
    color: var(--gray-500);
    font-size: 0.8rem;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

@keyframes login-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes login-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes login-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes login-card-in {
    from { opacity: 0; transform: translateY(32px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==================== LAYOUT ==================== */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* ==================== SIDEBAR ==================== */
.sidebar {
    width: var(--sidebar-width);
    background: var(--gray-900);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
}

.sidebar-header {
    padding: 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--header-height);
}

.sidebar-brand-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

.sidebar-brand-text {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.2px;
}

.sidebar-brand-text small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

.sidebar-nav {
    padding: 16px 12px;
    flex: 1;
}

.nav-section {
    padding: 6px 12px;
    margin-top: 4px;
}

.nav-section-title {
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
    padding: 0 12px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
    border-left: 3px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-left: 8px;
    margin-right: 8px;
    position: relative;
}

.nav-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.05), transparent);
    opacity: 0;
    transition: var(--transition);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.nav-item:hover {
    color: white;
    border-left-color: rgba(255, 255, 255, 0.25);
}

.nav-item:hover::before {
    opacity: 1;
}

.nav-item.active {
    color: white;
    background: rgba(20, 184, 166, 0.12);
    border-left-color: var(--primary-400);
    font-weight: 600;
}

.nav-item.active::before {
    opacity: 1;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.15), transparent);
}

.nav-item i {
    width: 20px;
    text-align: center;
    font-size: 15px;
    opacity: 0.8;
    flex-shrink: 0;
}

.nav-item.active i {
    opacity: 1;
    color: var(--primary-300);
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
    letter-spacing: 0.5px;
}

.user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.user-role {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.logout-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: var(--transition);
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #F87171;
    transform: scale(1.05);
}

/* ==================== MAIN CONTENT ==================== */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--gray-25);
}

.content-header {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--gray-200);
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}

.page-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.page-title i {
    color: var(--primary-500);
    font-size: 1.2rem;
}

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

.content-body {
    flex: 1;
    padding: 28px 32px;
    max-width: 1600px;
}

/* ==================== BOTONES ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.65rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%);
    color: white;
    box-shadow: 0 4px 12px -2px rgba(15, 118, 110, 0.25);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(15, 118, 110, 0.35);
    color: white;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px -2px rgba(15, 118, 110, 0.25);
}

.btn-secondary {
    background: var(--white);
    color: var(--gray-700);
    border: 1.5px solid var(--gray-200);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--gray-800);
    box-shadow: var(--shadow-sm);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, #B91C1C 100%);
    color: white;
    box-shadow: 0 4px 12px -2px rgba(220, 38, 38, 0.25);
}

.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(220, 38, 38, 0.35);
    color: white;
}

.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, #047857 100%);
    color: white;
    box-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.25);
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(5, 150, 105, 0.35);
    color: white;
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning) 0%, #B45309 100%);
    color: white;
    box-shadow: 0 4px 12px -2px rgba(217, 119, 6, 0.25);
}

.btn-warning:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(217, 119, 6, 0.35);
    color: white;
}

.btn-info {
    background: linear-gradient(135deg, var(--info) 0%, #1D4ED8 100%);
    color: white;
    box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.25);
}

.btn-info:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.35);
    color: white;
}

.btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
    border-radius: var(--radius-md);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ==================== CARDS ==================== */
.card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    transition: var(--transition);
}

.card-hover:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
    transform: translateY(-2px);
}

.form-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.form-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-100);
}

/* ==================== STATS ==================== */
.stat-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 18px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-accent, var(--primary-500));
    opacity: 0.8;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    background: var(--card-accent-bg, var(--primary-50));
    color: var(--card-accent, var(--primary-600));
    box-shadow: var(--shadow-xs);
}

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

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: 0.01em;
}

/* ==================== FORMULARIOS ==================== */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.form-control,
.form-input,
select.form-input {
    width: 100%;
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
    color: var(--gray-800);
    font-family: inherit;
    box-shadow: var(--shadow-xs);
}

.form-control:focus,
.form-input:focus,
select.form-input:focus {
    border-color: var(--primary-400);
    box-shadow:
        0 0 0 3px rgba(20, 184, 166, 0.08),
        var(--shadow-sm);
    background: var(--white);
    outline: none;
}

.form-control::placeholder,
.form-input::placeholder {
    color: var(--gray-400);
    font-weight: 400;
}

textarea.form-control,
textarea.form-input {
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
}

/* ==================== FORMULARIO DE USUARIO ==================== */
.user-form-page {
    max-width: 1200px;
    animation: fadeIn 0.4s var(--ease-out);
}

.user-form-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.user-form-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

/* ==================== UPLOAD ==================== */
.upload-area {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-xl);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    background: var(--gray-25);
    position: relative;
}

.upload-area:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.upload-area.drag-over {
    border-color: var(--primary);
    background: var(--primary-50);
    transform: scale(1.01);
}

.upload-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    box-shadow: 0 8px 24px -4px rgba(15, 118, 110, 0.3);
}

.upload-area h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}

.upload-area p {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-bottom: 4px;
}

.upload-hint {
    font-size: 0.8rem;
    color: var(--gray-400);
    font-weight: 500;
}

.upload-preview {
    margin-top: 16px;
    padding: 16px;
    background: var(--success-light);
    border: 1px solid #A7F3D0;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.preview-info i {
    font-size: 24px;
    color: var(--success);
    flex-shrink: 0;
}

.preview-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.preview-details span:first-child {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-size {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
}

.user-form-card .form-card-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-100);
}

.user-form-card .form-card-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}

.user-form-card .form-card-header h3 i {
    color: var(--primary-500);
}

.user-form-card .form-card-subtitle {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 500;
    margin: 0;
}

.form-section {
    margin-bottom: 28px;
}

.form-section:last-of-type {
    margin-bottom: 0;
}

.form-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section-title i {
    font-size: 0.8rem;
    color: var(--primary-500);
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.9rem;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 2;
    pointer-events: none;
}

.input-with-icon {
    padding-left: 2.6rem !important;
}

.input-with-icon:focus ~ .input-icon,
.input-with-icon:focus + .input-icon {
    color: var(--primary);
}

.input-locked {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.85rem;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.input-wrapper input[type="color"] {
    height: 42px;
    padding: 4px 2.6rem !important;
    cursor: pointer;
}

.input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.input-wrapper input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: var(--radius-sm);
}

.input-wrapper input[type="color"] + .input-icon,
.input-wrapper input[type="color"] ~ .input-icon {
    top: 50%;
    transform: translateY(-50%);
}

.select-wrapper {
    position: relative;
}

.select-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.9rem;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 2;
    pointer-events: none;
}

.select-with-icon {
    padding-left: 2.6rem !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
}

.select-wrapper::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 2;
}

.form-help {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-400);
    font-weight: 500;
    margin-top: 5px;
    line-height: 1.4;
}

.required {
    color: var(--danger);
    font-weight: 700;
}

/* ==================== INFO SIDEBAR ==================== */
.user-info-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 24px);
}

.info-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.info-card-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.info-card-header::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -30%;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.info-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
}

.info-user-basic {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.info-user-basic h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}

.info-username {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.info-card-body {
    padding: 20px 24px;
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
}

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

.info-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.info-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

.info-card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-25);
}

/* ==================== USUARIOS - MÓDULO ==================== */
.users-page {
    max-width: 1400px;
}

.color-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.color-option {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.color-option:hover {
    transform: scale(1.12);
    box-shadow: var(--shadow-md);
}

.color-option.selected {
    border-color: var(--gray-800);
    box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--gray-800);
}

/* ==================== ALERTAS ==================== */
.alert {
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    animation: slideDown 0.35s var(--ease-out);
    border: 1px solid transparent;
    line-height: 1.5;
}

.alert i {
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
}

.alert-content {
    flex: 1;
}

.alert-content strong {
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
}

.alert-content span {
    opacity: 0.9;
    font-weight: 400;
    font-size: 0.85rem;
}

.alert-success {
    background: var(--success-50);
    color: #065F46;
    border-color: #A7F3D0;
}

.alert-success i {
    color: var(--success);
}

.alert-danger {
    background: var(--danger-50);
    color: #991B1B;
    border-color: #FECACA;
}

.alert-danger i {
    color: var(--danger);
}

.alert-warning {
    background: var(--warning-50);
    color: #92400E;
    border-color: #FDE68A;
}

.alert-warning i {
    color: var(--warning);
}

.alert-info {
    background: var(--info-50);
    color: #1E40AF;
    border-color: #BFDBFE;
}

.alert-info i {
    color: var(--info);
}

/* ==================== BADGES ==================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.badge-secondary {
    background: var(--gray-100);
    color: var(--gray-600);
}

.badge-primary {
    background: var(--primary-100);
    color: var(--primary-dark);
}

.badge-success {
    background: var(--success-light);
    color: #065F46;
}

.badge-warning {
    background: var(--warning-light);
    color: #92400E;
}

.badge-info {
    background: #E0F2FE;
    color: #155E75;
}

.badge-danger {
    background: var(--danger-light);
    color: #991B1B;
}

/* ==================== UBICACIÓN FÍSICA ==================== */
.location-path {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.location-level {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--gray-25);
    border: 1px solid var(--gray-100);
    transition: var(--transition-fast);
}

.location-level:hover {
    background: var(--primary-50);
    border-color: var(--primary-200);
}

.location-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}

.location-type-badge.badge-archivo {
    background: #F1F5F9;
    color: #334155;
    border: 1px solid #E2E8F0;
}

.location-type-badge.badge-ambiente {
    background: #E0F2FE;
    color: #155E75;
    border: 1px solid #BAE6FD;
}

.location-type-badge.badge-estante {
    background: #EDE9FE;
    color: #5B21B6;
    border: 1px solid #DDD6FE;
}

.location-type-badge.badge-anaquel {
    background: #F3F4F6;
    color: #374151;
    border: 1px solid #E5E7EB;
}

.location-type-badge.badge-nivel {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.location-type-badge.badge-caja {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.location-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.3;
}

/* ==================== TABLAS ==================== */
.table-container {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.data-table thead th {
    padding: 14px 18px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
    font-family: inherit;
}

.data-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
    vertical-align: middle;
    color: var(--gray-700);
    transition: var(--transition-fast);
}

.data-table tbody tr {
    transition: var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--gray-50);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ==================== PAGINACIÓN ==================== */
.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-info {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 500;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.pagination a {
    background: var(--white);
    color: var(--gray-700);
    border: 1.5px solid var(--gray-200);
}

.pagination a:hover {
    background: var(--primary-50);
    color: var(--primary-dark);
    border-color: var(--primary-300);
    transform: translateY(-1px);
}

.pagination .active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}

.pagination-dots {
    color: var(--gray-400);
    font-weight: 600;
    padding: 0 4px;
}

/* ==================== FILTROS ==================== */
.filters-bar {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 24px;
}

.filters-form {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 180px;
}

.filter-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.filter-input,
.filter-select {
    padding: 0.6rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-25);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition);
    color: var(--gray-800);
    font-family: inherit;
    box-shadow: var(--shadow-xs);
}

.filter-input:focus,
.filter-select:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.08);
    background: var(--white);
    outline: none;
}

.filter-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* ==================== AUDITORIA ==================== */
.activity-log-page {
    max-width: 1400px;
}

.page-subtitle {
    color: var(--gray-500);
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: -16px;
    margin-bottom: 20px;
}

.page-subtitle {
    color: var(--gray-500);
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: -16px;
    margin-bottom: 20px;
}

.activity-badge {
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 5px 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.activity-table .user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 118, 110, 0.2);
    letter-spacing: 0.5px;
}

.user-info-sm {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-name-sm {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.user-username {
    font-size: 0.75rem;
    color: var(--gray-400);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-table .details-cell {
    max-width: 320px;
    color: var(--gray-600);
    font-size: 0.85rem;
}

.activity-table .date-cell {
    white-space: nowrap;
    color: var(--gray-500);
    font-size: 0.85rem;
    font-weight: 500;
}

.ip-code {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    background: var(--gray-100);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    color: var(--gray-600);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ==================== HEADERS ==================== */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

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

.header-left h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.3px;
}

.page-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-header-content p {
    color: var(--gray-500);
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 4px;
}

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

.section-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.2px;
}

.view-all {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-600);
    text-decoration: none;
}

.view-all:hover {
    color: var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==================== GRIDS ==================== */
.content-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    align-items: start;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.units-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--gray-400);
}

.empty-state i {
    font-size: 52px;
    margin-bottom: 16px;
    display: block;
    opacity: 0.7;
}

.empty-state p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-500);
}

.empty-state h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 8px;
}

/* ==================== BÚSQUEDA AVANZADA ==================== */
.advanced-search-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.search-form-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.search-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    height: 160px;
    background: var(--primary-50);
    border-radius: 50%;
    transform: translate(40px, -40px);
    opacity: 0.5;
    pointer-events: none;
}

.search-form-card form {
    position: relative;
    z-index: 1;
}

.search-form-card .form-section {
    margin-bottom: 24px;
}

.search-form-card .form-section:last-of-type {
    margin-bottom: 0;
}

.search-form-card .form-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-form-card .form-section-title i {
    font-size: 0.8rem;
    color: var(--primary-500);
}

.search-form-card .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
}

.search-results {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-100);
}

.results-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.results-header h3 i {
    color: var(--primary-500);
}

/* ==================== TEXT ==================== */
.text-center {
    text-align: center;
}

.text-muted {
    color: var(--gray-500) !important;
}

.text-sm {
    font-size: 0.85rem;
}

.text-xs {
    font-size: 0.75rem;
}

.font-medium {
    font-weight: 500;
}

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

.font-bold {
    font-weight: 700;
}

/* ==================== USUARIOS ==================== */
.users-page {
    max-width: 1400px;
}

.users-stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 28px;
}

.users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.user-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    transition: all var(--transition);
    border-top: 4px solid var(--card-accent, var(--primary-500));
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.user-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: var(--card-accent-bg, var(--primary-50));
    border-radius: 50%;
    transform: translate(40px, -40px);
    opacity: 0.4;
    transition: all var(--transition-slow);
    pointer-events: none;
}

.user-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
}

.user-card:hover::before {
    transform: translate(30px, -30px);
    opacity: 0.6;
}

.user-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.user-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--card-accent, var(--primary-500)) 0%, var(--primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
    letter-spacing: 0.5px;
}

.user-card-info {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.user-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.3;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card-username {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    letter-spacing: 0.01em;
}

.user-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.user-card-field {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.4;
}

.user-card-field i {
    width: 18px;
    text-align: center;
    color: var(--gray-400);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.user-card-field span {
    font-weight: 500;
    word-break: break-word;
}

.user-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
    position: relative;
    z-index: 1;
}

.user-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--gray-400);
    font-weight: 600;
}

.user-card-meta i {
    margin-right: 3px;
    font-size: 0.7rem;
}

.user-card-actions {
    display: flex;
    gap: 8px;
}

.user-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    margin-top: 2px;
}

.user-status-badge.active {
    background: var(--success-light);
    color: #065F46;
}

.user-status-badge.inactive {
    background: var(--gray-100);
    color: var(--gray-600);
}

.user-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}


/* ==================== CATEGORÍAS ==================== */
.category-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    transition: var(--transition);
    border-top: 4px solid var(--card-accent, var(--primary-500));
    position: relative;
    overflow: hidden;
}

.category-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: var(--card-accent-bg, var(--primary-50));
    border-radius: 50%;
    transform: translate(30px, -30px);
    opacity: 0.5;
    transition: var(--transition-slow);
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
}

.category-card:hover::before {
    transform: translate(20px, -20px);
    opacity: 0.7;
}

.category-color {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 1;
}

.category-info {
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.category-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}

.category-description {
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.75rem;
    color: var(--gray-400);
    font-weight: 600;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.category-meta i {
    margin-right: 4px;
}

.category-actions {
    display: flex;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.inline-form {
    display: inline;
}

/* ==================== UNIDADES ==================== */
.unit-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    transition: var(--transition);
    border-top: 4px solid var(--card-accent, var(--primary-500));
    position: relative;
    overflow: hidden;
}

.unit-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
}

/* ==================== TIPOS ==================== */
.type-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 22px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.type-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gray-300);
    transform: translateY(-3px);
}

.type-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.type-code {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-700);
    background: var(--primary-100);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.type-count-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-600);
    background: var(--gray-100);
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

.type-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.4;
}

.type-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
}

/* ==================== MODALES ==================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease-out);
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-dialog {
    background: var(--white);
    border-radius: var(--radius-2xl);
    padding: 32px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.92) translateY(20px);
    transition: all 0.35s var(--ease-out);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--gray-100);
    position: relative;
}

.modal-overlay.active .modal-dialog {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-100);
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.2px;
}

.modal-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 1rem;
}

.modal-close:hover {
    background: var(--gray-200);
    color: var(--gray-800);
    transform: rotate(90deg);
}

.modal-body {
    color: var(--gray-600);
    line-height: 1.7;
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
}

/* ==================== DASHBOARD ==================== */
.dashboard {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.dashboard-section {
    margin-bottom: 28px;
}

.dashboard-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    transition: var(--transition);
}

.dashboard-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
}

.dashboard-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--gray-25);
    border-bottom: 1px solid var(--gray-100);
}

.dashboard-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(20, 184, 166, 0.25);
}

.dashboard-card-info {
    flex: 1;
    min-width: 0;
}

.dashboard-card-info h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: -0.2px;
}

.dashboard-card-info p {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin: 2px 0 0;
    font-weight: 500;
}

.dashboard-card-body {
    padding: 24px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--gray-25);
    border: 1px solid var(--gray-100);
    transition: var(--transition);
}

.activity-item:hover {
    background: var(--white);
    border-color: var(--gray-200);
    box-shadow: var(--shadow-xs);
}

.activity-icon {
    flex-shrink: 0;
}

.activity-icon .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

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

.activity-text {
    font-size: 0.875rem;
    color: var(--gray-700);
    margin: 0 0 4px;
    line-height: 1.5;
}

.activity-text strong {
    color: var(--gray-900);
    font-weight: 600;
}

.activity-time {
    font-size: 0.75rem;
    color: var(--gray-400);
    font-weight: 500;
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--gray-25);
    border: 1px solid var(--gray-100);
    transition: var(--transition);
}

.recent-item:hover {
    background: var(--white);
    border-color: var(--gray-200);
    box-shadow: var(--shadow-xs);
}

.recent-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.recent-item-content {
    flex: 1;
    min-width: 0;
}

.recent-item-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.recent-item-meta .category-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.recent-item-date {
    font-size: 0.75rem;
    color: var(--gray-400);
    font-weight: 500;
}

.recent-item-status {
    flex-shrink: 0;
}

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

@media (max-width: 768px) {
    .dashboard-card-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .dashboard-card-body {
        padding: 20px;
    }

    .dashboard-card-info p {
        display: none;
    }
}

@media (max-width: 640px) {
    .dashboard-section {
        margin-bottom: 20px;
    }

    .dashboard-card-header {
        padding: 16px;
    }

    .dashboard-card-body {
        padding: 16px;
    }

    .activity-item {
        padding: 12px;
        gap: 10px;
    }

    .recent-item {
        padding: 12px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .recent-item-status {
        width: 100%;
        margin-top: 8px;
    }
}

/* ==================== DOCUMENTOS ==================== */
.documents-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.documents-page .table-container {
    overflow: visible;
}

.documents-page .action-buttons {
    white-space: nowrap;
}

.documents-page .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.documents-page .tag-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--gray-100);
    color: var(--gray-700);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.documents-filters {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.documents-filters::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    height: 160px;
    background: var(--primary-50);
    border-radius: 50%;
    transform: translate(40px, -40px);
    opacity: 0.5;
    pointer-events: none;
}

.documents-filters .filters-form {
    position: relative;
    z-index: 1;
}

.documents-table-container {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

/* ==================== EXPEDIENTES ==================== */
.files-page {
    max-width: 1400px;
}

.file-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 16px;
    transition: var(--transition);
    border-left: 4px solid var(--primary-400);
}

.file-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
    transform: translateX(4px);
}

.file-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.file-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.file-title i {
    color: var(--primary-500);
    font-size: 1.1rem;
}

.file-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.file-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.file-field-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    font-weight: 700;
}

.file-field-value {
    font-size: 0.9rem;
    color: var(--gray-800);
    font-weight: 600;
}

.file-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
}

.file-actions {
    display: flex;
    gap: 8px;
}

.files-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.files-filters {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 24px;
}

/* ==================== FORMULARIO EXPEDIENTE ==================== */

.file-form-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.file-form-page .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.file-form-page .page-header .page-header-content {
    flex: 1;
    min-width: 0;
}

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

.file-form-page .form-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.file-form-page .form-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-100);
}

.file-form-page .form-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.file-form-page .form-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.file-form-page .form-section-title i {
    color: var(--primary-500);
}

.file-form-page .form-card form {
    padding: 24px;
}

.file-form-page .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
}

@media (max-width: 768px) {
    .file-form-page .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .file-form-page .header-actions {
        width: 100%;
    }

    .file-form-page .header-actions .btn {
        flex: 1;
    }

    .file-form-page .form-card form {
        padding: 20px;
    }
}

@media (max-width: 640px) {
    .file-form-page .page-header {
        padding: 0;
    }
}

.file-number-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-fast);
}

.file-number-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ==================== PRÉSTAMOS ==================== */
.loans-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.loans-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.loan-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 16px;
    transition: var(--transition);
    border-left: 4px solid var(--warning);
}

.loan-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
    transform: translateX(4px);
}

.loan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.loan-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.loan-title i {
    color: var(--warning);
}

.loan-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.loan-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.loan-field-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    font-weight: 700;
}

.loan-field-value {
    font-size: 0.9rem;
    color: var(--gray-800);
    font-weight: 600;
}

.loan-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
}

.loan-actions {
    display: flex;
    gap: 8px;
}

/* ==================== VISTA DE PRÉSTAMO ==================== */
.loan-view-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.loan-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 24px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 24px;
}

.loan-view-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.loan-view-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: rgba(217, 119, 6, 0.1);
    color: var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.loan-view-title h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.loan-view-title h1 .badge {
    font-size: 0.8rem;
}

.loan-view-subtitle {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 500;
    margin: 4px 0 0;
}

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

.loan-view-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}

.loan-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 24px);
}

.loan-sidebar-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.loan-sidebar-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 8px;
}

.loan-sidebar-header i {
    color: var(--warning);
}

.loan-sidebar-body {
    padding: 16px 24px;
}

.loan-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
}

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

.loan-meta-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.loan-meta-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

.loan-main {
    min-width: 0;
}

.loan-details-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.loan-details-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 8px;
}

.loan-details-header i {
    color: var(--warning);
}

.loan-details-body {
    padding: 24px;
}

.loan-details-card .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.loan-details-card .info-item.full-width {
    grid-column: 1 / -1;
}

@media (max-width: 1024px) {
    .loan-view-layout {
        grid-template-columns: 1fr;
    }

    .loan-sidebar {
        position: static;
        top: auto;
    }
}

@media (max-width: 768px) {
    .loan-view-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .loan-view-header-left {
        flex-direction: column;
    }

    .loan-view-header-actions {
        justify-content: center;
    }

    .loan-meta-value {
        text-align: left;
    }
}

/* ==================== TRANSFERENCIAS ==================== */
.transfers-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.transfer-form-page {
    max-width: 1200px;
    animation: fadeIn 0.4s var(--ease-out);
}

.file-select-wrapper {
    position: relative;
}

.file-multiselect {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--gray-300);
    background: var(--white);
    color: var(--gray-800);
    font-size: 0.9rem;
    line-height: 1.5;
    min-height: 180px;
    transition: all var(--transition);
}

.file-multiselect:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.file-multiselect option {
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--gray-700);
    font-size: 0.85rem;
}

.file-multiselect option:checked {
    background: var(--primary-50);
    color: var(--primary-dark);
    font-weight: 600;
}

.transfer-form-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.transfer-info-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 24px);
}

.transfer-info-sidebar .info-card-header {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
}

.transfer-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 16px;
    transition: var(--transition);
    border-left: 4px solid var(--info);
}

.transfer-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
    transform: translateX(4px);
}

.transfer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.transfer-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.transfer-title i {
    color: var(--info);
}

.transfer-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.transfer-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.transfer-field-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    font-weight: 700;
}

.transfer-field-value {
    font-size: 0.9rem;
    color: var(--gray-800);
    font-weight: 600;
}

.transfer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
}

.transfer-actions {
    display: flex;
    gap: 8px;
}

/* ==================== UBICACIONES ==================== */
.locations-page {
    max-width: 1400px;
}

.locations-content {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.locations-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.locations-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.location-tree {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.location-tree h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.2px;
}

.tree-node {
    padding: 10px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 4px;
}

.tree-node:hover {
    background: var(--primary-50);
    color: var(--primary-700);
}

.tree-node.active {
    background: var(--primary-100);
    color: var(--primary-dark);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}

.tree-children {
    margin-left: 28px;
    border-left: 2px solid var(--gray-200);
    padding-left: 14px;
}

/* ==================== UBICACIONES FÍSICAS ==================== */
.locations-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.locations-layout {
    display: grid;
    grid-template-columns: 1fr 540px;
    gap: 24px;
    align-items: start;
}

.locations-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.locations-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.locations-filter-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.locations-filter-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.2px;
}

.filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--gray-700);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition);
    border: 1px solid transparent;
}

.filter-btn:hover {
    background: var(--gray-50);
    color: var(--primary-700);
    border-color: var(--gray-200);
}

.filter-btn.active {
    background: var(--primary-50);
    color: var(--primary-dark);
    border-color: var(--primary-200);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}

.filter-btn i {
    width: 20px;
    text-align: center;
    font-size: 0.85rem;
}

.locations-legend-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.locations-legend-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.2px;
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.legend-text {
    font-size: 0.85rem;
    color: var(--gray-600);
    font-weight: 500;
}

.locations-tree-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-100);
}

.tree-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
    margin: 0;
}

.tree-header h3 i {
    color: var(--primary-500);
}

.tree-count {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 600;
    background: var(--gray-100);
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--gray-500);
    transition: all var(--transition);
    border: 1px solid transparent;
}

.btn-icon:hover {
    background: var(--gray-100);
    color: var(--gray-800);
    border-color: var(--gray-200);
}

.btn-view:hover {
    background: var(--info-light);
    color: var(--info-dark, #155E75);
    border-color: var(--info-color, #CFFAFE);
}

.btn-edit:hover {
    background: var(--primary-50);
    color: var(--primary-dark);
    border-color: var(--primary-200);
}

.tree-container {
    padding: 16px;
}

.tree-root {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tree-node {
    display: flex;
    flex-direction: column;
}

.node-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.tree-node:hover > .node-content {
    background: var(--gray-50);
}

.node-indent {
    width: calc(var(--level, 0) * 24px);
    flex-shrink: 0;
}

.tree-toggle {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
    font-size: 0.7rem;
}

.tree-toggle:hover {
    background: var(--primary-50);
    border-color: var(--primary-200);
    color: var(--primary-700);
}

.tree-toggle-placeholder {
    width: 24px;
    flex-shrink: 0;
}

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

.node-info {
    flex: 1;
    min-width: 0;
}

.node-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.3;
}

.node-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.node-code {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.node-separator {
    color: var(--gray-400);
    font-size: 0.75rem;
}

.node-location {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
}

.node-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity var(--transition);
}

.tree-node:hover > .node-content .node-actions {
    opacity: 1;
}

.tree-children {
    margin-left: 24px;
    border-left: 2px solid var(--gray-200);
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.empty-state {
    padding: 60px 20px;
    text-align: center;
}

.empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px;
}

.empty-state h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 0.95rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
    .locations-layout {
        grid-template-columns: 1fr;
    }

    .locations-sidebar {
        order: -1;
    }

    .filter-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .filter-btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }
}

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

    .tree-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .node-actions {
        opacity: 1;
    }
}
.conservation-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

/* ==================== UBICACIÓN DETALLE ==================== */
.location-view-page {
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeIn 0.4s var(--ease-out);
}

.location-view-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.location-view-page .header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.location-view-page .header-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.location-view-page .location-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.location-view-page .location-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.location-view-page .location-subheader {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.location-view-page .location-code {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 600;
}

.location-view-page .info-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    margin-bottom: 20px;
}

.location-view-page .info-card-header {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.location-view-page .info-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--primary-100);
    color: var(--primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.location-view-page .info-card-title h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 2px;
}

.location-view-page .info-card-title p {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.location-view-page .info-card-body {
    padding: 24px;
}

.location-view-page .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.location-view-page .info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.location-view-page .info-item.full-width {
    grid-column: 1 / -1;
}

.location-view-page .info-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.location-view-page .info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-800);
    word-break: break-word;
}

.location-view-page .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
}

.location-view-page .status-active {
    background: var(--success-50);
    color: #065f46;
}

.location-view-page .status-inactive {
    background: var(--gray-100);
    color: var(--gray-600);
}

.location-view-page .table-container {
    overflow: visible;
}

.conservation-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.conservation-filters-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.conservation-filters-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    height: 160px;
    background: var(--primary-50);
    border-radius: 50%;
    transform: translate(40px, -40px);
    opacity: 0.5;
    pointer-events: none;
}

.conservation-filters-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
    position: relative;
    z-index: 1;
}

.conservation-filters-card h3 i {
    color: var(--primary-500);
}

.conservation-filters-card .form-row {
    position: relative;
    z-index: 1;
}

.conservation-filters-card .filter-actions {
    position: relative;
    z-index: 1;
}

.conservation-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.conservation-content .empty-state {
    padding: 40px 20px;
    text-align: center;
}

.conservation-content .record-id {
    font-weight: 700;
    color: var(--primary-dark);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    background: var(--primary-50);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.conservation-content .text-muted {
    color: var(--gray-400);
    font-weight: 500;
}

/* ==================== DIGITALIZACIÓN ==================== */
.digitization-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.digitization-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.digitization-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 16px;
    transition: var(--transition);
}

.digitization-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
}

.digitization-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.digitization-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.digitization-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.digitization-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.digitization-field-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    font-weight: 700;
}

.digitization-field-value {
    font-size: 0.9rem;
    color: var(--gray-800);
    font-weight: 600;
}

.digitization-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
}

.digitization-actions {
    display: flex;
    gap: 8px;
}

/* ==================== REPORTES ==================== */
.reports-page {
    max-width: 1400px;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.report-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--primary-500);
}

.report-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: var(--primary-50);
    border-radius: 50%;
    transform: translate(20px, -20px);
    opacity: 0.5;
    transition: all var(--transition-slow);
    pointer-events: none;
}

.report-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
    color: inherit;
}

.report-card:hover::before {
    transform: translate(10px, -10px);
    opacity: 0.7;
}

.report-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
    position: relative;
    z-index: 1;
}

.report-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: -0.2px;
    position: relative;
    z-index: 1;
}

.report-card p {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

.report-result {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.report-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.report-result h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.report-result h3 i {
    color: var(--primary-500);
}

/* ==================== AUDITORÍA ==================== */
.activity-page {
    max-width: 1400px;
}

.activity-filters {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 24px;
}

.activity-table-container {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

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

.activity-table thead th {
    padding: 14px 18px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.activity-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
    vertical-align: middle;
}

.activity-table tbody tr:hover {
    background: var(--gray-50);
}

/* ==================== ROLES ==================== */
.roles-page {
    max-width: 1400px;
}

.role-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 16px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.role-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
    transform: translateX(4px);
}

.role-info h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}

.role-info p {
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.5;
}

.role-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ==================== CONFIGURACIÓN ==================== */
.settings-page {
    max-width: 860px;
}

.settings-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 24px;
}

.settings-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

/* ==================== LICENCIA ==================== */
.licencia-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.licencia-page .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

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

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

.licencia-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.licencia-stats .stat-card {
    border-radius: var(--radius-xl);
    padding: 22px 26px;
}

.licencia-stats .stat-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 22px 26px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 18px;
    transition: var(--transition);
}

.licencia-stats .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--gray-200);
}

.licencia-stats .stat-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    font-size: 24px;
    background: var(--card-accent-bg, var(--primary-50));
    color: var(--card-accent, var(--primary-600));
    box-shadow: var(--shadow-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.licencia-stats .stat-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.licencia-stats .stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.2;
    color: var(--gray-900);
}

.licencia-stats .stat-label {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
     letter-spacing: 0.02em;
 }

.licencia-filters {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.licencia-filters::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-400), var(--primary-500), var(--primary-400));
    opacity: 0.7;
}

.licencia-filters .filters-form {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.licencia-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-width: 220px;
}

.licencia-filters .filter-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.licencia-filters .filter-group label i {
    font-size: 0.75rem;
    color: var(--primary-500);
}

.licencia-filters .input-wrapper {
    position: relative;
}

.licencia-filters .input-wrapper .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.9rem;
    pointer-events: none;
    transition: var(--transition);
    z-index: 2;
}

.licencia-filters .select-wrapper {
    position: relative;
}

.licencia-filters .select-wrapper .select-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.9rem;
    pointer-events: none;
    transition: var(--transition);
    z-index: 2;
}

.licencia-filters .select-wrapper::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 2;
}

.licencia-filters .input-with-icon {
    padding-left: 2.6rem !important;
}

.licencia-filters .select-with-icon {
    padding-left: 2.6rem !important;
    appearance: none;
    -webkit-appearance: none;
}

.licencia-filters .input-with-icon:focus ~ .input-icon,
.licencia-filters .input-with-icon:focus + .input-icon {
    color: var(--primary-500);
}

.licencia-filters .select-with-icon:focus ~ .select-icon,
.licencia-filters .select-with-icon:focus + .select-icon {
    color: var(--primary-500);
}

.licencia-filters .form-input,
.licencia-filters select.form-input {
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-25);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition);
    color: var(--gray-800);
    font-family: inherit;
    box-shadow: var(--shadow-xs);
    width: 100%;
}

.licencia-filters .form-input:focus,
.licencia-filters select.form-input:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.08);
    background: var(--white);
    outline: none;
}

.licencia-filters .filter-actions {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.licencia-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.licencia-content .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.licencia-content .data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
}

.licencia-content .data-table thead th {
    padding: 15px 18px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
    font-family: inherit;
    position: sticky;
    top: 0;
    z-index: 10;
}

.licencia-content .data-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
    vertical-align: middle;
    color: var(--gray-700);
    transition: var(--transition-fast);
}

.licencia-content .data-table tbody tr {
    transition: var(--transition-fast);
    position: relative;
}

.licencia-content .data-table tbody tr:hover {
    background: var(--primary-50);
}

.licencia-content .data-table tbody tr:last-child td {
    border-bottom: none;
}

.licencia-content .actions-col {
    text-align: right;
    white-space: nowrap;
}

.licencia-content .action-buttons {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.licencia-content .empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--gray-400);
}

.licencia-content .empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--gray-400);
}

.licencia-content .empty-state h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.licencia-content .empty-state p {
    font-size: 0.9rem;
    color: var(--gray-500);
    margin-bottom: 20px;
}

/* ==================== LICENCIA VIEW ==================== */
.licencia-view-page .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.licencia-view-page .page-header .page-header-content {
    flex: 1;
    min-width: 0;
}

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

.licencia-view-page .section-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    margin-bottom: 24px;
}

.licencia-view-page .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 18px 24px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.licencia-view-page .section-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
    margin: 0;
}

.licencia-view-page .section-header h3 i {
    color: var(--primary-500);
}

.licencia-view-page .section-body {
    padding: 20px 24px;
}

.licencia-view-page .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.licencia-view-page .info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.licencia-view-page .info-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.licencia-view-page .info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
    word-break: break-word;
}

/* ==================== TRÁMITES ==================== */
.tramite-row {
    transition: var(--transition);
}

.tramite-row:hover {
    background: var(--gray-50);
}

.tramite-row--highlight {
    background: linear-gradient(90deg, var(--primary-50) 0%, var(--white) 100%);
}

.tramite-row--highlight:hover {
    background: linear-gradient(90deg, var(--primary-100) 0%, var(--gray-50) 100%);
}

.tramite-id-cell {
    width: 70px;
    text-align: center !important;
}

.tramite-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 42px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%);
    color: white;
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--primary-100);
    letter-spacing: 0.5px;
}

.tramite-category-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--info-light);
    color: var(--info);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.tramite-obs-cell {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tramite-documents-row {
    background: var(--gray-25);
}

.tramite-documents-cell {
    padding: 0 !important;
    border-bottom: 1px solid var(--gray-200) !important;
    border-left: 4px solid var(--primary-500) !important;
}

.tramite-documents-header {
    padding: 14px 18px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tramite-documents-header i {
    color: var(--primary-500);
}

.data-table--inner {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 100% !important;
}

.tramite-documents-wrapper {
    background: var(--white);
    margin: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.tramite-documents-inner-header {
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-50) 100%);
    border-bottom: 1px solid var(--primary-100);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tramite-documents-inner-header i {
    color: var(--primary-500);
    font-size: 0.85rem;
}

.tramite-documents-inner-table {
    width: 100%;
    border-collapse: collapse;
}

.tramite-documents-inner-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.tramite-documents-inner-table td {
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    background: var(--white);
}

.tramite-documents-inner-table tr:last-child td {
    border-bottom: none;
}

.tramite-documents-inner-table .no-records {
    text-align: center;
    color: var(--gray-400);
    padding: 20px !important;
    font-size: 0.85rem;
    font-style: italic;
}

.tramite-documents-inner-table .no-records i {
    margin-right: 6px;
    color: var(--gray-300);
}

.tramite-separator {
    height: 2px;
    background: linear-gradient(90deg, var(--gray-200) 0%, var(--gray-100) 50%, var(--gray-200) 100%);
    margin: 0;
}

.licencia-view-page .data-table thead th {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 14px;
    border-bottom: 2px solid var(--gray-200);
}

.licencia-view-page .data-table tbody td {
    padding: 12px 14px;
    font-size: 0.85rem;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

/* ==================== PAGINATION ==================== */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid var(--gray-100);
    gap: 16px;
    flex-wrap: wrap;
}

.pagination-info {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 500;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination-dots {
    color: var(--gray-400);
    font-weight: 700;
    padding: 0 2px;
}

/* ==================== RESPONSIVE: LICENCIA ==================== */
@media (max-width: 1024px) {
    .licencia-page .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .licencia-page .header-actions {
        justify-content: flex-start;
    }

    .licencia-content .data-table {
        min-width: 1100px;
    }
}

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

    .licencia-filters .filters-form {
        flex-direction: column;
        align-items: stretch;
    }

    .licencia-filters .filter-group {
        min-width: 100%;
    }

    .licencia-filters .filter-actions {
        width: 100%;
    }

    .licencia-filters .filter-actions .btn {
        flex: 1;
    }

    .licencia-page .page-header {
        padding: 0;
    }

    .pagination-container {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .pagination {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .licencia-stats .stat-card {
        padding: 18px;
    }

    .licencia-stats .stat-icon-wrap {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .licencia-stats .stat-value {
        font-size: 1.5rem;
    }

    .licencia-filters {
        padding: 20px;
    }

    .licencia-content .data-table thead th,
    .licencia-content .data-table tbody td {
        padding: 12px 14px;
    }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1280px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .locations-content {
        grid-template-columns: 1fr;
    }

    .locations-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 1024px) {
    .locations-sidebar {
        grid-template-columns: 1fr;
    }

    .content-body {
        padding: 24px;
    }

    .content-header {
        padding: 0 24px;
    }
}

@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }

    .login-panel-left {
        min-height: 35vh;
    }

    .login-panel-right {
        min-height: auto;
        padding: 1.5rem;
    }

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

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

    .form-row {
        grid-template-columns: 1fr;
    }

    .content-body {
        padding: 20px;
    }

    .content-header {
        padding: 0 20px;
    }

    .page-title {
        font-size: 1.2rem;
    }

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

    .file-body,
    .loan-body,
    .transfer-body,
    .digitization-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .content-header {
        padding: 0 16px;
    }

    .content-body {
        padding: 16px;
    }

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

    .categories-grid,
    .units-grid,
    .types-grid {
        grid-template-columns: 1fr;
    }

    .login-container {
        flex-direction: column;
    }

    .login-panel-left {
        min-height: 40vh;
        padding: 2rem;
    }

    .login-panel-left::after {
        display: none;
    }

    .login-panel-title {
        font-size: 1.5rem;
    }

    .login-panel-logo {
        width: 160px;
    }

    .login-help-link {
        top: 16px;
        right: 16px;
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .login-logo-bottom {
        width: 48px;
        bottom: 16px;
        left: 16px;
    }

    .login-card {
        padding: 2rem;
        border-radius: var(--radius-xl);
    }

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

    .filter-group {
        min-width: 100%;
    }

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

    .header-actions {
        width: 100%;
    }

    .header-actions .btn {
        flex: 1;
    }

    .modal-dialog {
        padding: 24px;
        margin: 16px;
        border-radius: var(--radius-xl);
    }

    .pagination-wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .login-panel-left {
        min-height: auto;
        padding: 5rem 1.5rem 2rem;
    }

    .login-panel-title {
        font-size: 1.35rem;
    }

    .login-panel-logo {
        width: 140px;
    }

    .login-card {
        padding: 1.75rem;
    }

    .login-card-title {
        font-size: 1.4rem;
    }

    .login-form input {
        padding: 0.8rem 1rem 0.8rem 2.5rem;
        font-size: 0.95rem;
    }

    .btn-login {
        padding: 0.9rem 1.25rem;
        font-size: 0.95rem;
    }

    .login-help-link {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100% - 2rem);
        justify-content: center;
        text-align: center;
    }

    .login-help-link:hover {
        transform: translateX(-50%);
    }

    .login-logo-bottom {
        width: 44px;
    }

    .login-panel-right {
        padding: 1rem;
    }

    .login-footer {
        flex-direction: column;
        gap: 12px;
    }

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

    .file-actions,
    .loan-actions,
    .transfer-actions,
    .digitization-actions {
        flex-wrap: wrap;
    }

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

    .user-card-actions {
        width: 100%;
    }

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

    .role-actions {
        width: 100%;
    }
}

/* ==================== IMPRESIÓN ==================== */
@media print {
    .sidebar,
    .content-header,
    .btn,
    .filters-bar,
    .pagination-wrap {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
    }

    .content-body {
        padding: 0;
    }

    .card,
    .form-card,
    .table-container {
        box-shadow: none;
        border: 1px solid var(--gray-200);
    }
}

/* ==================== LICENCIA - MÓDULO ==================== */
.licencia-page,
.licencia-view-page,
.licencia-search-page,
.licencia-reports-page,
.form-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.licencia-form-page .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.licencia-form-page .page-header .page-header-content {
    flex: 1;
    min-width: 0;
}

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

.licencia-form-page .form-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.licencia-form-page .form-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}

.licencia-form-page .form-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--primary-50);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
}

.licencia-form-page .form-card-title-area h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.licencia-form-page .form-card-title-area h3 i {
    color: var(--primary-500);
}

.licencia-form-page .form-card-title-area p {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
    margin: 2px 0 0;
}

.licencia-form-page .form-card form {
    padding: 24px;
}

.licencia-form-page .form-section {
    margin-bottom: 24px;
}

.licencia-form-page .form-section:last-of-type {
    margin-bottom: 0;
}

.licencia-form-page .form-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

.licencia-form-page .form-section-title i {
    font-size: 0.8rem;
    color: var(--primary-500);
}

.licencia-form-page .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
}

.licencia-tramite-form-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.licencia-tramite-form-page .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.licencia-tramite-form-page .page-header .page-header-content {
    flex: 1;
    min-width: 0;
}

.licencia-tramite-form-page .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.licencia-tramite-form-page .form-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.licencia-tramite-form-page .form-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}

.licencia-tramite-form-page .form-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--primary-50);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
}

.licencia-tramite-form-page .form-card-title-area h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.licencia-tramite-form-page .form-card-title-area h3 i {
    color: var(--primary-500);
}

.licencia-tramite-form-page .form-card-title-area p {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
    margin: 2px 0 0;
}

.licencia-tramite-form-page .form-card form {
    padding: 24px;
}

.licencia-tramite-form-page .form-section {
    margin-bottom: 24px;
}

.licencia-tramite-form-page .form-section:last-of-type {
    margin-bottom: 0;
}

.licencia-tramite-form-page .form-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

.licencia-tramite-form-page .form-section-title i {
    font-size: 0.8rem;
    color: var(--primary-500);
}

.licencia-tramite-form-page .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
}

.licencia-tramite-form-page .cabecera-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

@media (max-width: 768px) {
    .licencia-tramite-form-page .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .licencia-tramite-form-page .header-actions {
        width: 100%;
    }

    .licencia-tramite-form-page .header-actions .btn {
        flex: 1;
    }

    .licencia-tramite-form-page .form-card-header {
        padding: 16px 20px;
    }

    .licencia-tramite-form-page .form-card form {
        padding: 20px;
    }
}

/* ==================== BOTÓN OUTLINE ==================== */
.btn-outline {
    background: var(--white);
    color: var(--gray-700);
    border: 1.5px solid var(--gray-200);
    box-shadow: var(--shadow-xs);
}

.btn-outline:hover {
    background: var(--gray-50);
    border-color: var(--primary-300);
    color: var(--primary-dark);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* ==================== LICENCIA STATS ==================== */
.licencia-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.licencia-stats .stat-card {
    border-radius: var(--radius-xl);
    padding: 22px 26px;
}

.licencia-stats .stat-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-lg);
    font-size: 24px;
    background: var(--card-accent-bg, var(--primary-50));
    color: var(--card-accent, var(--primary-600));
    box-shadow: var(--shadow-xs);
    display: flex;
    align-items: center;
    justify-content: center;
}

.licencia-stats .stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.2;
    color: var(--gray-900);
}

.licencia-stats .stat-label {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-top: 3px;
    letter-spacing: 0.02em;
}

/* ==================== LICENCIA FILTROS ==================== */
.licencia-filters {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.licencia-filters::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-400), var(--primary-500), var(--primary-400));
    opacity: 0.7;
}

.licencia-filters .filters-form {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.licencia-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-width: 220px;
}

.licencia-filters .filter-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.licencia-filters .filter-group label i {
    font-size: 0.75rem;
    color: var(--primary-500);
}

.licencia-filters .input-wrapper {
    position: relative;
}

.licencia-filters .input-wrapper .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.9rem;
    pointer-events: none;
    transition: var(--transition);
    z-index: 2;
}

.licencia-filters .select-wrapper {
    position: relative;
}

.licencia-filters .select-wrapper .select-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.9rem;
    pointer-events: none;
    transition: var(--transition);
    z-index: 2;
}

.licencia-filters .select-wrapper::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 2;
}

.licencia-filters .input-with-icon {
    padding-left: 2.6rem !important;
}

.licencia-filters .select-with-icon {
    padding-left: 2.6rem !important;
    appearance: none;
    -webkit-appearance: none;
}

.licencia-filters .input-with-icon:focus ~ .input-icon,
.licencia-filters .input-with-icon:focus + .input-icon {
    color: var(--primary-500);
}

.licencia-filters .select-with-icon:focus ~ .select-icon,
.licencia-filters .select-with-icon:focus + .select-icon {
    color: var(--primary-500);
}

.licencia-filters .form-input,
.licencia-filters select.form-input {
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-25);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition);
    color: var(--gray-800);
    font-family: inherit;
    box-shadow: var(--shadow-xs);
    width: 100%;
}

.licencia-filters .form-input:focus,
.licencia-filters select.form-input:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.08);
    background: var(--white);
    outline: none;
}

.licencia-filters .filter-actions {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

/* ==================== LICENCIA TABLA ==================== */
.licencia-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.licencia-content .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.licencia-content .data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
}

.licencia-content .data-table thead th {
    padding: 15px 18px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
    font-family: inherit;
    position: sticky;
    top: 0;
    z-index: 10;
}

.licencia-content .data-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
    vertical-align: middle;
    color: var(--gray-700);
    transition: var(--transition-fast);
}

.licencia-content .data-table tbody tr {
    transition: var(--transition-fast);
    position: relative;
}

.licencia-content .data-table tbody tr:hover {
    background: var(--primary-50);
}

.licencia-content .data-table tbody tr:last-child td {
    border-bottom: none;
}

.actions-col {
    text-align: right;
    white-space: nowrap;
}

.action-buttons {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ==================== LICENCIA BADGES ==================== */
.record-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 32px;
    border-radius: var(--radius);
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.record-name {
    font-weight: 600;
    color: var(--gray-900);
    letter-spacing: -0.2px;
}

.dni-value {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-800);
    letter-spacing: 0.02em;
    background: var(--gray-50);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
}

.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.unit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    white-space: nowrap;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unit-badge i {
    color: var(--gray-500);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ==================== LICENCIA EMPTY STATE ==================== */
.licencia-content .empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--gray-400);
}

.licencia-content .empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--gray-400);
}

.licencia-content .empty-state h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.licencia-content .empty-state p {
    font-size: 0.9rem;
    color: var(--gray-500);
    margin-bottom: 20px;
}

/* ==================== LICENCIA DETALLE ==================== */
.licencia-view-page .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-100);
}

.licencia-view-page .section-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.licencia-view-page .table-container {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    margin-bottom: 24px;
}

/* ==================== TRÁMITES ==================== */
.tramite-row {
    transition: var(--transition);
}

.tramite-row:hover {
    background: var(--gray-50);
}

.tramite-documents-row {
    background: var(--gray-25);
}

.tramite-documents-cell {
    padding: 0 !important;
    border-bottom: 1px solid var(--gray-200) !important;
}

.tramite-documents-header {
    padding: 14px 18px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tramite-documents-header i {
    color: var(--primary-500);
}

.data-table--inner {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 100% !important;
}

.data-table--inner thead th {
    background: var(--gray-100);
    font-size: 0.65rem;
    padding: 10px 14px;
}

.data-table--inner tbody td {
    padding: 10px 14px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--gray-100);
}

.data-table--inner tbody tr:hover {
    background: var(--white);
}

.no-records {
    text-align: center;
    color: var(--gray-400);
    padding: 24px !important;
    font-size: 0.85rem;
}

.no-records i {
    margin-right: 6px;
}

/* ==================== MODAL UPLOAD ==================== */
.licencia-view-page .modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease-out);
    padding: 20px;
}

.licencia-view-page .modal.active {
    opacity: 1;
    visibility: visible;
}

.licencia-view-page .modal-content {
    background: var(--white);
    border-radius: var(--radius-2xl);
    padding: 32px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.92) translateY(20px);
    transition: all 0.35s var(--ease-out);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--gray-100);
    position: relative;
}

.licencia-view-page .modal.active .modal-content {
    transform: scale(1) translateY(0);
}

.licencia-view-page .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-100);
}

.licencia-view-page .modal-header h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.licencia-view-page .close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 1.25rem;
    line-height: 1;
}

.licencia-view-page .close:hover {
    background: var(--gray-200);
    color: var(--gray-800);
    transform: rotate(90deg);
}

.licencia-view-page .modal-body {
    padding: 4px 0;
}

.licencia-view-page .modal-body .form-group {
    margin-bottom: 1.25rem;
}

.licencia-view-page .modal-body .form-group:last-of-type {
    margin-bottom: 0;
}

.licencia-view-page .modal-body label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.licencia-view-page .modal-body label i {
    font-size: 0.8rem;
    color: var(--primary-500);
    width: 16px;
    text-align: center;
}

.licencia-view-page .modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
}

.file-upload-wrapper {
    position: relative;
}

.file-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 20px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-xl);
    background: var(--gray-25);
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}

.file-upload-label:hover {
    border-color: var(--primary-400);
    background: var(--primary-50);
}

.file-upload-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 24px -4px rgba(15, 118, 110, 0.3);
    transition: var(--transition);
}

.file-upload-label:hover .file-upload-icon {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -4px rgba(15, 118, 110, 0.4);
}

.file-upload-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-800);
    letter-spacing: -0.1px;
}

.file-upload-hint {
    font-size: 0.8rem;
    color: var(--gray-400);
    font-weight: 500;
}

/* ==================== LICENCIA BÚSQUEDA ==================== */
.licencia-search-page {
    max-width: 1400px;
    animation: fadeIn 0.4s var(--ease-out);
}

.licencia-search-page .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.licencia-search-page .page-header .page-header-content {
    flex: 1;
    min-width: 0;
}

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

.licencia-search-page .search-form-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.licencia-search-page .search-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--info), var(--primary-400), var(--info));
    opacity: 0.7;
}

.licencia-search-page .search-form-card .form-section {
    margin-bottom: 24px;
}

.licencia-search-page .search-form-card .form-section:last-of-type {
    margin-bottom: 0;
}

.licencia-search-page .search-form-card .form-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

.licencia-search-page .search-form-card .form-section-title i {
    font-size: 0.8rem;
    color: var(--primary-500);
}

.licencia-search-page .search-form-card .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
}

.search-results {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.search-results .results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-100);
}

.search-results .results-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.search-results .results-header h3 i {
    color: var(--primary-500);
}

.search-results .empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--gray-400);
}

.search-results .empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--gray-400);
}

.search-results .empty-state h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.search-results .empty-state p {
    font-size: 0.9rem;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.search-results h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

/* ==================== LICENCIA REPORTES ==================== */
.licencia-reports-page .report-filters-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.licencia-reports-page .report-filters-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--warning), var(--danger), var(--warning));
    opacity: 0.7;
}

.licencia-reports-page .report-filters-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.licencia-reports-page .report-actions {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.report-preview h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.licencia-reports-page .table-container {
    overflow: visible;
}

.compact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.compact-list li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    background: var(--primary-50);
}

.compact-list li a:hover {
    background: var(--primary-100);
    color: var(--primary-dark);
    transform: translateX(2px);
}

/* ==================== LICENCIA FORMULARIOS ==================== */
.form-page .form-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    max-width: 900px;
    margin: 0 auto;
}

.form-page .form-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gray-100);
}

.doc-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--info-700, #1D4ED8);
    background: var(--info-light);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.dni-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
}

/* ==================== LICENCIA RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .licencia-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .licencia-filters .filters-form {
        flex-direction: column;
    }

    .licencia-filters .filter-group {
        min-width: 100%;
    }

    .licencia-content .data-table {
        min-width: 900px;
    }
}

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

    .licencia-stats .stat-card {
        padding: 18px 20px;
    }

    .licencia-stats .stat-icon-wrap {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }

    .licencia-stats .stat-value {
        font-size: 1.5rem;
    }

    .licencia-filters {
        padding: 20px;
    }

    .licencia-filters .filter-actions {
        width: 100%;
        flex-direction: column;
    }

    .licencia-filters .filter-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .licencia-content .data-table {
        min-width: 800px;
    }

    .action-buttons {
        flex-direction: column;
        align-items: flex-end;
    }

    .action-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .licencia-view-page .table-container {
        overflow-x: auto;
    }

    .search-form-card,
    .report-filters-card {
        padding: 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .licencia-form-page .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .licencia-form-page .header-actions {
        width: 100%;
    }

    .licencia-form-page .header-actions .btn {
        flex: 1;
    }

    .licencia-form-page .form-card-header {
        padding: 16px 20px;
    }

    .licencia-form-page .form-card form {
        padding: 20px;
    }
}

@media (max-width: 640px) {
    .licencia-page .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .licencia-page .header-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .licencia-page .header-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .licencia-content .data-table {
        min-width: 700px;
    }

    .licencia-content .data-table thead th,
    .licencia-content .data-table tbody td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .record-id {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .dni-value {
        font-size: 0.8rem;
        padding: 1px 6px;
    }

    .category-badge,
    .unit-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .tramite-documents-header {
        padding: 10px 12px;
        font-size: 0.7rem;
    }

    .tramite-documents-wrapper {
        margin: 0;
    }

    .tramite-documents-inner-header {
        padding: 8px 12px;
        font-size: 0.7rem;
    }

    .tramite-documents-inner-table th,
    .tramite-documents-inner-table td {
        padding: 8px 10px;
        font-size: 0.78rem;
    }

    .tramite-separator {
        height: 1px;
    }

    .tramite-id-badge {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }

    .tramite-obs-cell {
        max-width: 150px;
    }

    .licencia-search-page .search-form-card h3,
    .licencia-reports-page .report-filters-card h3 {
        font-size: 0.95rem;
    }

    .licencia-view-page .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .licencia-view-page .section-header .btn {
        width: 100%;
        justify-content: center;
    }

    .modal-dialog {
        padding: 24px;
        margin: 16px;
        border-radius: var(--radius-xl);
    }

    .pagination-wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .licencia-stats {
        gap: 12px;
    }

    .licencia-stats .stat-card {
        padding: 16px;
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .licencia-content .data-table {
        min-width: 600px;
    }

    .licencia-content .data-table thead th,
    .licencia-content .data-table tbody td {
        padding: 8px 10px;
        font-size: 0.75rem;
    }

    .action-buttons {
        gap: 4px;
    }

    .action-buttons .btn-sm {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
}

.login-page-footer {
    text-align: center;
    padding: 16px 20px;
    color: #64748B;
    font-size: 0.8125rem;
}

.login-page-footer p {
    margin: 0;
}

/* ==================== ROLE PERMISSIONS ==================== */
.role-permissions-page {
    max-width: 1200px;
    animation: fadeIn 0.4s var(--ease-out);
}

.role-permissions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.role-permissions-header-content {
    flex: 1;
    min-width: 0;
}

.role-permissions-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.3px;
}

.role-permissions-header h2 i {
    color: var(--primary-500);
}

.role-permissions-header p {
    color: var(--gray-500);
    font-size: 0.9rem;
    margin: 4px 0 0;
}

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

.role-permissions-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.role-permissions-card-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    background: var(--gray-25);
    border-bottom: 1px solid var(--gray-100);
}

.role-permissions-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px -2px rgba(20, 184, 166, 0.25);
    flex-shrink: 0;
}

.role-permissions-info h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: -0.2px;
}

.role-permissions-info p {
    color: var(--gray-500);
    font-size: 0.875rem;
    margin: 4px 0 0;
}

.role-permissions-section {
    padding: 24px 28px;
}

.role-permissions-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-permissions-section-title i {
    font-size: 0.8rem;
    color: var(--primary-500);
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px 24px;
}

.permission-item {
    display: flex;
    align-items: center;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-700);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius);
    transition: var(--transition);
    width: 100%;
    position: relative;
}

.checkbox-label:hover {
    background: var(--gray-25);
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    height: 20px;
    width: 20px;
    background-color: var(--white);
    border: 2px solid var(--gray-300);
    border-radius: 6px;
    position: relative;
    transition: var(--transition);
    flex-shrink: 0;
}

.checkbox-label:hover input ~ .checkmark {
    border-color: var(--primary-400);
}

.checkbox-label input:checked ~ .checkmark {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-500) 100%);
    border-color: var(--primary-500);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label input:checked ~ .checkmark:after {
    display: block;
}

.permission-label {
    flex: 1;
    min-width: 0;
}

.role-permissions-card .form-actions {
    display: flex;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-25);
    flex-wrap: wrap;
}

/* ==================== FILE VIEW ==================== */
.file-view-page {
    max-width: 1400px;
}

.file-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.file-view-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.file-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.file-view-title h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.2px;
    margin-bottom: 2px;
}

.file-view-subtitle {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 500;
    margin: 0;
}

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

.file-view-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}

.file-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 24px);
}

.file-sidebar-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.file-sidebar-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-sidebar-header i {
    color: var(--primary-500);
}

.file-sidebar-body {
    padding: 16px 24px;
}

.file-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
    gap: 12px;
}

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

.file-meta-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding-top: 2px;
}

.file-meta-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
    text-align: right;
    word-break: break-word;
    max-width: 60%;
}

.file-main {
    min-width: 0;
}

.file-documents-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.file-documents-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-documents-header i {
    color: var(--primary-500);
}

.file-documents-count {
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
}

.file-documents-body {
    padding: 8px 0;
}

.file-empty-state {
    text-align: center;
    padding: 48px 24px;
}

.file-empty-state i {
    font-size: 44px;
    color: var(--gray-300);
    margin-bottom: 12px;
    display: block;
}

.file-empty-state h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.file-empty-state p {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin: 0;
}

.file-doc-title {
    font-weight: 600;
    color: var(--gray-800);
}

.doc-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius);
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid rgba(15, 118, 110, 0.15);
}

@media (max-width: 1024px) {
    .file-view-layout {
        grid-template-columns: 1fr;
    }

    .file-sidebar {
        position: static;
        top: auto;
    }
}

@media (max-width: 768px) {
    .file-view-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .file-view-header-left {
        flex-direction: column;
    }

    .file-view-header-actions {
        justify-content: center;
    }

    .file-meta-value {
        text-align: left;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .role-permissions-header {
        flex-direction: column;
        align-items: stretch;
    }

    .role-permissions-header h2 {
        font-size: 1.25rem;
    }

    .role-permissions-card-header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .role-permissions-section {
        padding: 20px;
    }

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

    .role-permissions-card .form-actions {
        padding: 16px 20px;
    }
}

/* ==================== DOCUMENT VIEW ==================== */
.document-view-page {
    max-width: 1400px;
}

.document-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.document-view-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    flex: 1;
}

.document-view-header .document-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.document-view-title h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.2px;
    margin-bottom: 4px;
}

.document-view-subtitle {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.document-view-meta-sep {
    color: var(--gray-300);
}

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

.document-view-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}

.document-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 24px);
}

.document-sidebar-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.document-sidebar-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.document-sidebar-header i {
    color: var(--primary-500);
}

.document-sidebar-body {
    padding: 16px 24px;
}

.document-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
    gap: 12px;
}

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

.document-meta-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding-top: 2px;
}

.document-meta-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
    text-align: right;
    word-break: break-word;
    max-width: 60%;
}

.document-mime-code {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.75rem;
    background: var(--gray-100);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    color: var(--gray-600);
}

.document-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.document-main {
    min-width: 0;
}

.document-main-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    margin-bottom: 24px;
}

.document-main-card:last-child {
    margin-bottom: 0;
}

.document-main-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
}

.document-main-card-header i {
    color: var(--primary-500);
}

.document-main-card-body {
    padding: 24px;
}

.document-description {
    line-height: 1.7;
    color: var(--gray-700);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.document-preview-image-wrapper {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-100);
}

.document-preview-image {
    max-width: 100%;
    height: auto;
    display: block;
}

.document-preview-pdf,
.document-preview-generic {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius);
    border: 1px dashed var(--gray-200);
    background: var(--gray-25);
    flex-wrap: wrap;
}

.pdf-preview-icon,
.generic-preview-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--gray-500);
    flex-shrink: 0;
}

.pdf-preview-info,
.generic-preview-info {
    flex: 1;
    min-width: 0;
}

.pdf-preview-info h4,
.generic-preview-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.pdf-preview-info p,
.generic-preview-info p {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin: 0;
}

@media (max-width: 1024px) {
    .document-view-layout {
        grid-template-columns: 1fr;
    }

    .document-sidebar {
        position: static;
        top: auto;
    }
}

@media (max-width: 768px) {
    .document-view-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .document-view-header-left {
        flex-direction: column;
    }

    .document-view-header-actions {
        justify-content: center;
    }

    .document-meta-value {
        text-align: left;
        max-width: none;
    }

    .document-preview-pdf,
    .document-preview-generic {
        flex-direction: column;
        text-align: center;
    }
}

/* ==================== DOCUMENT EDIT ==================== */
.document-edit-page {
    max-width: 1200px;
}

.document-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.document-edit-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    flex: 1;
}

.document-edit-header .document-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.document-edit-title h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.2px;
    margin-bottom: 4px;
}

.document-edit-subtitle {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 500;
    margin: 0;
}

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

.document-edit-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.document-edit-main {
    min-width: 0;
}

.document-edit-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    margin-bottom: 24px;
}

.document-edit-card:last-child {
    margin-bottom: 0;
}

.document-edit-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
}

.document-edit-card-header i {
    color: var(--primary-500);
}

.document-edit-card-body {
    padding: 24px;
}

.document-edit-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 24px);
}

.document-edit-sidebar-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.document-edit-sidebar-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.document-edit-sidebar-header i {
    color: var(--primary-500);
}

.document-edit-sidebar-body {
    padding: 16px 24px;
}

.current-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--gray-25);
    border: 1px solid var(--gray-100);
}

.current-file-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.current-file-details {
    flex: 1;
    min-width: 0;
}

.current-file-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-file-size {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 2px;
}

.document-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-top: 24px;
}

.file-input {
    display: none;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius);
    background: var(--gray-25);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.file-upload-label:hover {
    border-color: var(--primary-400);
    background: var(--primary-light);
}

.file-upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.file-upload-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
}

.file-upload-hint {
    font-size: 0.75rem;
    color: var(--gray-500);
}

@media (max-width: 1024px) {
    .document-edit-layout {
        grid-template-columns: 1fr;
    }

    .document-edit-sidebar {
        position: static;
        top: auto;
    }
}

@media (max-width: 768px) {
    .document-edit-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .document-edit-header-left {
        flex-direction: column;
    }

    .document-edit-header-actions {
        justify-content: center;
    }

    .document-edit-actions {
        flex-direction: column;
    }

    .document-edit-actions .btn {
        width: 100%;
    }
}

/* =========================================================
   REDISEÑO PROFESIONAL — DRTC ÁNCASH / DIGITALIZACIÓN
   Capa visual: no modifica lógica ni estructura funcional.
   ========================================================= */

:root{
    --brand-blue:#075985;
    --brand-blue-2:#0f766e;
    --brand-gold:#eab308;
    --surface:#ffffff;
    --surface-soft:#f7fafc;
    --border-soft:#e5e7eb;
}

/* ---------- LOGIN ---------- */
.login-container{
    min-height:100vh;
    background:#f5f7fa;
    position:relative;
}
.login-panel-left{
    flex:1.12;
    min-width:48%;
    justify-content:flex-start;
    align-items:stretch;
    padding:0;
    text-align:left;
    isolation:isolate;
    background:#0b3440;
}
.login-image-layer{
    position:absolute;
    inset:0;
    background-image:url("../imagenes/loginimagen.png");
    background-size:cover;
    background-position:center;
    transform:scale(1.015);
    z-index:-3;
}
.login-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(3,34,42,.94) 0%,rgba(4,57,69,.78) 48%,rgba(4,57,69,.34) 100%),
        linear-gradient(180deg,rgba(2,29,36,.72) 0%,rgba(2,29,36,.12) 42%,rgba(2,29,36,.86) 100%);
    z-index:-2;
}
.login-panel-left::before,
.login-panel-left::after{display:none}
.login-brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:42px 52px 0;
    animation:login-fade-up .7s var(--ease-out) both;
}
.login-panel-logo{
    width:330px;
    max-width:100%;
    height:auto;
    object-fit:contain;
    object-position:left center;
    margin:0 0 13px;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.3));
}
.login-brand-line{
    width:68px;
    height:3px;
    border-radius:99px;
    background:linear-gradient(90deg,var(--brand-gold),#fff);
    margin-bottom:8px;
}
.login-brand-caption{
    font-size:.73rem;
    color:rgba(255,255,255,.72);
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:700;
}
.login-hero-copy{
    max-width:650px;
    margin:auto 52px;
    padding:40px 0 70px;
    animation:login-fade-up .8s var(--ease-out) .08s both;
}
.login-kicker,.login-card-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.72rem;
    font-weight:800;
}
.login-kicker{
    color:#d7f9f5;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.08);
    border-radius:99px;
    backdrop-filter:blur(8px);
    margin-bottom:20px;
}
.login-kicker i{color:#8be3d8}
.login-panel-title{
    font-size:clamp(2.25rem,4vw,4.15rem);
    line-height:1.04;
    letter-spacing:-.055em;
    max-width:650px;
    margin-bottom:20px;
    text-shadow:0 4px 22px rgba(0,0,0,.28);
}
.login-panel-desc{
    max-width:590px;
    font-size:1.05rem;
    line-height:1.75;
    color:rgba(255,255,255,.84);
}
.login-panel-meta{
    position:absolute;
    left:52px;
    bottom:28px;
    display:flex;
    gap:24px;
    color:rgba(255,255,255,.66);
    font-size:.78rem;
    font-weight:600;
}
.login-panel-meta span{display:flex;align-items:center;gap:7px}
.login-panel-meta i{color:#9de5dc}
.login-panel-right{
    flex:.88;
    min-width:420px;
    padding:50px clamp(28px,5vw,78px);
    background:
        radial-gradient(circle at 85% 10%,rgba(15,118,110,.07),transparent 27%),
        linear-gradient(180deg,#fbfcfd 0%,#f5f8fa 100%);
}
.login-card{
    width:min(455px,100%);
    max-width:none;
    padding:42px 40px 30px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:22px;
    background:rgba(255,255,255,.96);
    box-shadow:0 28px 70px rgba(15,23,42,.12),0 4px 18px rgba(15,23,42,.05);
}
.login-card::before{
    height:4px;
    background:linear-gradient(90deg,#075985,#0f766e,#eab308);
    animation:none;
}
.login-card::after{
    height:150px;
    background:radial-gradient(circle at 50% 0%,rgba(15,118,110,.08),transparent 65%);
}
.login-card-header{margin-bottom:28px}
.login-mobile-logo{display:none}
.login-card-kicker{
    color:#0f766e;
    margin-bottom:8px;
    font-size:.68rem;
}
.login-card-title{
    font-size:2rem;
    letter-spacing:-.045em;
    margin-bottom:7px;
}
.login-card-subtitle{font-size:.9rem;color:#64748b}
.login-form-group{margin-bottom:18px}
.login-form-label{
    font-size:.78rem;
    color:#334155;
    margin-bottom:7px;
}
.login-form-label i{display:none}
.input-wrapper{height:52px}
.login-input{
    height:52px;
    padding:.85rem 3rem .85rem 2.9rem;
    border:1px solid #dbe2e8;
    border-radius:12px;
    background:#f8fafc;
    font-size:.92rem;
    box-shadow:none;
}
.login-input:hover{border-color:#cbd5e1;background:#fff}
.login-input:focus{
    border-color:#0f766e;
    box-shadow:0 0 0 4px rgba(15,118,110,.09);
}
.input-icon{left:17px;color:#94a3b8}
.login-input:focus ~ .input-icon,
.login-input:focus + .input-icon{color:#0f766e}
.toggle-password{right:10px}
.form-check{margin:2px 0 22px}
.btn-login{
    height:53px;
    padding:.9rem 1.4rem;
    border-radius:12px;
    background:linear-gradient(135deg,#075985 0%,#0f766e 100%);
    box-shadow:0 10px 22px rgba(7,89,133,.2);
}
.btn-login:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 28px rgba(7,89,133,.24);
}
.login-footer{
    margin-top:26px;
    padding-top:20px;
    border-top:1px solid #edf0f2;
}
.login-footer-item{
    font-size:.72rem;
    color:#64748b;
}
.login-footer-item i{color:#0f766e}
.login-page-footer{
    position:fixed;
    right:0;
    bottom:0;
    width:43.8%;
    padding:10px 20px;
    background:rgba(255,255,255,.76);
    backdrop-filter:blur(10px);
    color:#64748b;
    font-size:.68rem;
    z-index:10;
    border-top:1px solid rgba(226,232,240,.7);
}

/* ---------- APP SHELL ---------- */
.sidebar{
    width:260px;
    background:
        radial-gradient(circle at 20% 0%,rgba(15,118,110,.18),transparent 28%),
        linear-gradient(180deg,#102d35 0%,#092127 100%);
    border-right:1px solid rgba(255,255,255,.08);
}
.sidebar-header{
    padding:20px 18px;
    min-height:82px;
    background:rgba(255,255,255,.025);
}
.sidebar-brand{
    display:flex;
    align-items:center;
    gap:11px;
    width:100%;
}
.sidebar-brand-mark{
    width:43px;
    height:43px;
    border-radius:12px;
    background:rgba(255,255,255,.96);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex-shrink:0;
    box-shadow:0 7px 18px rgba(0,0,0,.18);
}
.sidebar-brand-mark img{
    width:100%;
    max-width:none;
    height:100%;
    object-fit:cover;
    object-position:left center;
    transform:scale(1.9);
    transform-origin:27% 50%;
}
.sidebar-brand-copy{min-width:0}
.sidebar-brand-copy strong{
    display:block;
    color:#fff;
    font-size:.79rem;
    letter-spacing:.06em;
}
.sidebar-brand-copy span{
    display:block;
    color:rgba(255,255,255,.5);
    font-size:.65rem;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.sidebar-nav{padding:14px 10px}
.nav-section-title{margin-top:18px;color:rgba(255,255,255,.34)}
.nav-item{
    margin:3px 5px;
    padding:10px 12px;
    border-left:3px solid transparent;
    border-radius:10px;
    gap:11px;
}
.nav-item:hover{
    background:rgba(255,255,255,.055);
    border-left-color:rgba(255,255,255,.35);
}
.nav-item.active{
    background:linear-gradient(90deg,rgba(20,184,166,.19),rgba(20,184,166,.05));
    border-left-color:#5eead4;
    box-shadow:inset 0 0 0 1px rgba(94,234,212,.06);
}
.nav-item.active i{color:#7dd3fc}
.sidebar-footer{
    padding:13px 16px;
    background:rgba(0,0,0,.2);
}
.user-avatar{
    background:linear-gradient(135deg,#0f766e,#075985);
    box-shadow:0 5px 15px rgba(0,0,0,.2);
}

/* ---------- HEADER / CONTENT ---------- */
.main-content{margin-left:260px;background:#f6f8fa}
.content-header{
    height:76px;
    padding:0 30px;
    background:rgba(255,255,255,.9);
    border-bottom:1px solid #e7ecef;
}
.page-title{font-size:1.25rem;letter-spacing:-.025em}
.content-body{padding:26px 30px}
.card,.form-card,.role-permissions-card,.file-view-header{
    border-color:#e8edf1;
    box-shadow:0 5px 20px rgba(15,23,42,.045);
}
.card:hover,.card-hover:hover{
    box-shadow:0 12px 30px rgba(15,23,42,.075);
}
.stat-card{
    border-radius:15px;
    box-shadow:0 4px 15px rgba(15,23,42,.045);
}
.stat-card:hover{transform:translateY(-3px)}
.btn{border-radius:10px}
.btn-primary{background:linear-gradient(135deg,#075985,#0f766e)}
.table-container,.data-table-container{border-radius:14px;overflow:hidden}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1050px){
    .login-panel-left{min-width:46%}
    .login-panel-right{min-width:380px;padding:35px}
    .login-brand,.login-hero-copy{margin-left:34px;margin-right:34px}
    .login-brand{padding-left:0;padding-right:0}
    .login-panel-meta{left:34px}
}
@media (max-width: 820px){
    .login-container{display:block;min-height:100vh}
    .login-panel-left{min-height:245px;height:245px}
    .login-image-layer{background-position:center 55%}
    .login-brand{padding:22px 24px 0}
    .login-panel-logo{width:245px}
    .login-brand-caption{font-size:.58rem}
    .login-hero-copy{display:none}
    .login-panel-meta{left:24px;bottom:20px;font-size:.68rem;gap:15px}
    .login-panel-right{min-width:0;padding:34px 18px 60px;min-height:calc(100vh - 245px)}
    .login-card{padding:34px 25px 26px;border-radius:18px}
    .login-page-footer{position:relative;width:100%;padding:10px 14px}
    .login-mobile-logo{display:block;margin-bottom:12px}
    .login-mobile-logo img{width:210px;max-width:100%;height:auto}
    .login-card-title{font-size:1.7rem}
    .sidebar{transform:translateX(-100%)}
    .main-content{margin-left:0}
}
@media (max-width: 480px){
    .login-panel-left{min-height:210px;height:210px}
    .login-panel-logo{width:210px}
    .login-panel-meta{bottom:16px}
    .login-panel-meta span:first-child{display:none}
    .login-panel-right{padding:22px 12px 45px}
    .login-card{padding:29px 20px 22px}
}


/* ================================================================
   PREMIUM INSTITUTIONAL UI — DRTC ÁNCASH / GESTIÓN DOCUMENTAL
   Capa visual final. No altera la lógica PHP ni la base de datos.
   ================================================================ */
:root{
    --brand-navy:#082f3b;
    --brand-blue:#075985;
    --brand-teal:#0f766e;
    --brand-teal-2:#149b91;
    --brand-gold:#d6a62c;
    --surface:#ffffff;
    --surface-soft:#f7fafb;
    --line:#e5eaee;
    --text:#12212b;
    --muted:#687985;
}

body{background:#f3f6f8;color:var(--text)}
::selection{background:rgba(15,118,110,.18);color:var(--brand-navy)}

/* ---------- APP SHELL ---------- */
.sidebar{
    width:274px;
    background:
      radial-gradient(900px 420px at -10% -8%,rgba(20,155,145,.20),transparent 48%),
      radial-gradient(520px 300px at 100% 20%,rgba(7,89,133,.18),transparent 55%),
      linear-gradient(180deg,#092e39 0%,#061f28 58%,#051a22 100%);
    border-right:1px solid rgba(255,255,255,.08);
    box-shadow:12px 0 38px rgba(5,27,35,.08);
}
.sidebar-header{
    min-height:94px;
    padding:19px 18px;
    border-bottom:1px solid rgba(255,255,255,.075);
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
}
.sidebar-brand-mark{
    width:48px;height:48px;border-radius:14px;
    box-shadow:0 10px 28px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.55);
}
.sidebar-brand-copy strong{font-size:.82rem;letter-spacing:.075em}
.sidebar-brand-copy span{font-size:.67rem;color:rgba(255,255,255,.56)}
.sidebar-nav{padding:17px 11px 20px}
.nav-section-title{
    margin:22px 9px 8px;
    padding:0 10px;
    font-size:.62rem;
    letter-spacing:.15em;
    color:rgba(255,255,255,.36);
}
.nav-item{
    min-height:43px;
    margin:3px 2px;
    padding:10px 13px;
    border:1px solid transparent;
    border-left:3px solid transparent;
    border-radius:11px;
    gap:12px;
    color:rgba(255,255,255,.67);
}
.nav-item::before{border-radius:9px}
.nav-item:hover{
    color:#fff;
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.045);
    border-left-color:rgba(255,255,255,.38);
    transform:translateX(2px);
}
.nav-item.active{
    color:#fff;
    background:linear-gradient(90deg,rgba(20,184,166,.22),rgba(20,184,166,.065));
    border-color:rgba(94,234,212,.08);
    border-left-color:#5eead4;
    box-shadow:inset 0 0 18px rgba(94,234,212,.035),0 5px 15px rgba(0,0,0,.10);
}
.nav-item i{font-size:14px;width:21px}
.nav-item.active i{color:#79e3d7}
.sidebar-footer{
    padding:15px 16px;
    border-top:1px solid rgba(255,255,255,.075);
    background:rgba(2,15,20,.38);
}
.user-avatar{width:40px;height:40px}
.logout-btn{border-radius:10px!important;color:rgba(255,255,255,.58)!important}
.logout-btn:hover{background:rgba(239,68,68,.13)!important;color:#fca5a5!important}

/* ---------- HEADER ---------- */
.main-content{margin-left:274px;background:#f3f6f8}
.content-header{
    height:82px;
    padding:0 32px;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid #e7ecef;
    box-shadow:0 4px 20px rgba(15,23,42,.035);
}
.header-left-group{display:flex;align-items:center;gap:16px;min-width:0}
.page-heading-wrap{min-width:0}
.page-heading-eyebrow{
    display:flex;align-items:center;gap:6px;
    margin-bottom:1px;
    color:#83919a;
    font-size:.61rem;font-weight:800;
    letter-spacing:.13em;text-transform:uppercase;
}
.page-heading-eyebrow i{color:var(--brand-teal);font-size:.62rem}
.page-title{font-size:1.27rem;font-weight:750;color:#10242e;letter-spacing:-.035em}
.header-actions{gap:14px}
.header-user-chip{
    display:flex;align-items:center;gap:9px;
    padding:5px 10px 5px 6px;
    background:#f7f9fa;
    border:1px solid #e7ecef;
    border-radius:13px;
}
.header-user-avatar{
    width:34px;height:34px;border-radius:10px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,#0f766e,#075985);
    color:#fff;font-size:.78rem;font-weight:800;
    box-shadow:0 5px 13px rgba(7,89,133,.16);
}
.header-user-copy{display:flex;flex-direction:column;min-width:0;max-width:175px;line-height:1.2}
.header-user-copy strong{font-size:.73rem;color:#263842;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-user-copy span{font-size:.61rem;color:#7b8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.mobile-menu-toggle{display:none}
.mobile-sidebar-overlay{display:none}

/* ---------- CONTENT SURFACES ---------- */
.content-body{padding:30px 34px 42px;max-width:1700px}
.card,.form-card,.role-permissions-card,.file-view-header,.dashboard-card,.table-container,.data-table-container{
    border:1px solid #e5eaee;
    box-shadow:0 7px 26px rgba(15,23,42,.045);
}
.card,.form-card,.dashboard-card{border-radius:16px}
.card:hover,.card-hover:hover,.dashboard-card:hover{box-shadow:0 15px 38px rgba(15,23,42,.075);border-color:#dfe7eb}
.page-header{margin-bottom:26px}
.page-header h2,.header-left h2{font-weight:760;color:#10242e;letter-spacing:-.035em}

/* ---------- STAT CARDS ---------- */
.stats-grid{gap:17px;margin-bottom:27px}
.stat-card{
    position:relative;
    overflow:hidden;
    border:1px solid #e4eaee;
    border-radius:16px;
    background:linear-gradient(145deg,#fff 0%,#fbfcfd 100%);
    box-shadow:0 5px 18px rgba(15,23,42,.045);
}
.stat-card::after{
    content:"";position:absolute;right:-35px;top:-35px;width:115px;height:115px;border-radius:50%;
    background:radial-gradient(circle,rgba(15,118,110,.08),transparent 68%);pointer-events:none;
}
.stat-card:hover{transform:translateY(-3px);border-color:#d9e4e8;box-shadow:0 15px 30px rgba(15,23,42,.075)}

/* ---------- TABLES ---------- */
.table-container,.data-table-container{border-radius:15px;background:#fff}
.data-table thead th,.table thead th{
    background:#f6f8f9!important;
    color:#657680!important;
    font-size:.68rem!important;
    font-weight:800!important;
    letter-spacing:.055em;
    text-transform:uppercase;
    border-bottom:1px solid #e4eaee!important;
}
.data-table tbody tr,.table tbody tr{transition:background .18s ease,box-shadow .18s ease}
.data-table tbody tr:hover,.table tbody tr:hover{background:#f8fbfb!important;box-shadow:inset 3px 0 0 rgba(15,118,110,.45)}
.data-table td,.table td{border-bottom-color:#edf1f3!important}

/* ---------- FORMS / INPUTS ---------- */
.form-control,.form-select,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="datetime-local"],select,textarea{
    border-color:#dce4e8!important;
    border-radius:10px!important;
    background:#fbfcfd!important;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.form-control:hover,.form-select:hover,input:hover,select:hover,textarea:hover{background:#fff!important;border-color:#cbd7dd!important}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{
    background:#fff!important;
    border-color:#0f766e!important;
    box-shadow:0 0 0 4px rgba(15,118,110,.09)!important;
    outline:none!important;
}
.form-label,label{font-weight:650;color:#40515b}

/* ---------- BUTTONS ---------- */
.btn{border-radius:10px;font-weight:700;min-height:39px}
.btn-primary{
    background:linear-gradient(135deg,#075985 0%,#0f766e 100%);
    box-shadow:0 7px 18px rgba(7,89,133,.16);
}
.btn-primary:hover{box-shadow:0 11px 24px rgba(7,89,133,.22);transform:translateY(-2px)}
.btn-secondary{background:#fff;border-color:#dce4e8}

/* ---------- DASHBOARD ---------- */
.dashboard{max-width:1500px}
.dashboard-card-header{padding:19px 22px;background:linear-gradient(180deg,#fbfcfd,#f7f9fa)}
.dashboard-card-body{padding:22px}
.dashboard-card-icon{border-radius:12px;background:linear-gradient(135deg,#075985,#0f766e);box-shadow:0 7px 16px rgba(7,89,133,.17)}
.activity-item,.recent-item{border-color:#e8edf0;background:#fafcfc}
.activity-item:hover,.recent-item:hover{border-color:#dbe5e8;box-shadow:0 8px 20px rgba(15,23,42,.055)}

/* ---------- ALERTS / BADGES ---------- */
.alert{border-radius:12px!important;border-width:1px!important;box-shadow:0 5px 18px rgba(15,23,42,.035)}
.badge{font-weight:700;letter-spacing:.01em}

/* ---------- LOGIN: EXECUTIVE / INSTITUTIONAL ---------- */
.login-container{background:#f3f6f8}
.login-panel-left{flex:1.16;background:#082f3b}
.login-image-layer{background-position:center center;transform:scale(1.025)}
.login-overlay{
    background:
      linear-gradient(92deg,rgba(3,31,39,.94) 0%,rgba(4,57,69,.76) 46%,rgba(4,57,69,.25) 100%),
      linear-gradient(180deg,rgba(2,29,36,.76) 0%,rgba(2,29,36,.08) 42%,rgba(2,29,36,.88) 100%);
}
.login-brand{padding:38px 54px 0}
.login-panel-logo{width:350px;filter:drop-shadow(0 12px 25px rgba(0,0,0,.28))}
.login-brand-line{width:78px;height:3px;background:linear-gradient(90deg,#d6a62c,#fff)}
.login-hero-copy{max-width:680px;margin:auto 54px;padding:40px 0 78px}
.login-kicker{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);box-shadow:inset 0 0 18px rgba(255,255,255,.025)}
.login-panel-title{font-size:clamp(2.4rem,4.2vw,4.4rem);max-width:670px}
.login-panel-desc{max-width:600px;color:rgba(255,255,255,.82)}
.login-panel-meta{left:54px;bottom:30px}
.login-panel-right{flex:.84;min-width:455px;padding:42px clamp(30px,5vw,84px);background:radial-gradient(circle at 80% 0%,rgba(15,118,110,.075),transparent 30%),linear-gradient(180deg,#fbfcfd 0%,#f1f5f7 100%)}
.login-card{
    width:min(470px,100%);padding:44px 42px 30px;border-radius:22px;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(8,47,59,.09);
    box-shadow:0 30px 80px rgba(8,47,59,.14),0 8px 24px rgba(15,23,42,.055);
}
.login-card::before{background:linear-gradient(90deg,#075985 0%,#0f766e 62%,#d6a62c 100%)}
.login-card-kicker{color:#0f766e;font-size:.66rem}
.login-card-title{font-size:2.1rem;color:#10242e}
.login-card-subtitle{color:#71808a}
.login-form-group{margin-bottom:20px}
.login-form-label{color:#3d505a;font-size:.77rem;font-weight:750}
.input-wrapper{height:54px}
.login-input{height:54px;border-radius:12px;background:#f8fafb;border-color:#dce4e8;padding-left:2.95rem}
.login-input:focus{box-shadow:0 0 0 4px rgba(15,118,110,.09)}
.btn-login{height:54px;border-radius:12px;background:linear-gradient(135deg,#075985 0%,#0f766e 100%);box-shadow:0 12px 26px rgba(7,89,133,.20);font-weight:800}
.login-footer-item{color:#71808a}
.login-footer-item i{color:#0f766e}
.login-page-footer{width:42.1%;background:rgba(255,255,255,.72);color:#71808a}

/* ---------- MOBILE ---------- */
@media (max-width: 1100px){
    .sidebar{width:250px}
    .main-content{margin-left:250px}
    .header-user-chip{display:none}
    .content-header{padding:0 24px}
    .content-body{padding:24px}
}
@media (max-width: 820px){
    .sidebar{width:280px;transform:translateX(-105%);box-shadow:18px 0 45px rgba(0,0,0,.22);transition:transform .28s ease}
    .sidebar.mobile-open{transform:translateX(0)}
    .main-content{margin-left:0}
    .mobile-sidebar-overlay{position:fixed;inset:0;background:rgba(2,18,24,.46);backdrop-filter:blur(2px);z-index:90;display:none}
    .mobile-sidebar-overlay.active{display:block}
    .content-header{height:72px;padding:0 16px;z-index:80}
    .mobile-menu-toggle{display:grid;place-items:center;width:40px;height:40px;border:1px solid #e0e7ea;border-radius:11px;background:#fff;color:#0f766e;cursor:pointer;box-shadow:0 4px 12px rgba(15,23,42,.05)}
    .mobile-menu-toggle:active{transform:scale(.96)}
    .page-heading-eyebrow{display:none}
    .page-title{font-size:1.05rem}
    .content-body{padding:20px 15px 32px}
    .login-panel-left{min-height:245px;height:245px}
    .login-brand{padding:22px 24px 0}
    .login-panel-logo{width:250px}
    .login-hero-copy{display:none}
    .login-panel-meta{left:24px;bottom:19px}
    .login-panel-right{min-width:0;padding:32px 18px 56px;min-height:calc(100vh - 245px)}
    .login-card{padding:35px 25px 27px;border-radius:19px}
    .login-page-footer{position:relative;width:100%;padding:10px 14px}
}
@media (max-width:480px){
    .sidebar{width:calc(100vw - 38px);max-width:310px}
    .login-panel-left{min-height:205px;height:205px}
    .login-panel-logo{width:215px}
    .login-panel-meta{bottom:15px}
    .login-panel-meta span:first-child{display:none}
    .login-panel-right{padding:20px 11px 42px}
    .login-card{padding:29px 19px 22px}
    .login-card-title{font-size:1.75rem}
}

/* ================================================================
   EXECUTIVE UI v4 — DRTC ÁNCASH
   Rediseño visual de alto nivel: limpio, institucional y moderno.
   Solo presentación; no modifica lógica, consultas ni permisos.
   ================================================================ */
:root{
  --ex-navy:#0b2430;
  --ex-navy-2:#123d4b;
  --ex-teal:#0d7377;
  --ex-teal-2:#159a96;
  --ex-gold:#c9a227;
  --ex-ink:#17232d;
  --ex-muted:#6b7b87;
  --ex-bg:#f3f6f8;
  --ex-surface:#ffffff;
  --ex-line:#e3e9ed;
  --ex-radius:16px;
  --ex-shadow:0 10px 35px rgba(12,35,48,.07);
  --ex-shadow-hover:0 18px 45px rgba(12,35,48,.11);
}

html{background:var(--ex-bg)}
body{background:
  radial-gradient(circle at 85% 0%,rgba(13,115,119,.055),transparent 28%),
  linear-gradient(180deg,#f7f9fa 0%,#f1f5f7 100%);color:var(--ex-ink)}
button,input,select,textarea{font-family:inherit}
::selection{background:rgba(13,115,119,.18);color:var(--ex-navy)}

/* ---------- LOGIN EXECUTIVE ---------- */
.login-container{
  background:#edf2f4;
  isolation:isolate;
}
.login-panel-left{
  position:relative;
  flex:1.16;
  min-width:52%;
  overflow:hidden;
}
.login-image-layer{transition:transform 1.2s ease}
.login-container:hover .login-image-layer{transform:scale(1.035)}
.login-overlay{
  background:
    linear-gradient(110deg,rgba(5,28,37,.96) 0%,rgba(7,51,62,.82) 44%,rgba(6,57,65,.35) 100%),
    linear-gradient(180deg,rgba(2,20,27,.30) 0%,rgba(2,20,27,.08) 42%,rgba(2,20,27,.92) 100%);
}
.login-brand{padding:48px 58px 0}
.login-panel-logo{width:360px;filter:drop-shadow(0 12px 25px rgba(0,0,0,.32))}
.login-brand-line{height:2px;width:76px;background:linear-gradient(90deg,var(--ex-gold),rgba(255,255,255,.8));box-shadow:0 0 16px rgba(201,162,39,.25)}
.login-brand-caption{letter-spacing:.19em;color:rgba(255,255,255,.68)}
.login-hero-copy{margin:auto 58px;padding:50px 0 88px;max-width:690px}
.login-kicker{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 30px rgba(0,0,0,.08);padding:9px 13px}
.login-panel-title{font-size:clamp(2.5rem,4.6vw,4.65rem);font-weight:800;letter-spacing:-.065em;text-wrap:balance}
.login-panel-desc{font-size:1.08rem;max-width:600px;color:rgba(255,255,255,.80)}
.login-panel-meta{left:58px;bottom:34px}
.login-panel-meta span{padding:8px 11px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(255,255,255,.045);backdrop-filter:blur(8px)}

.login-panel-right{
  flex:.84;
  min-width:445px;
  padding:46px clamp(28px,5vw,86px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 100% 0%,rgba(13,115,119,.10),transparent 30%),
    radial-gradient(circle at 0% 100%,rgba(201,162,39,.07),transparent 24%),
    #f7f9fa;
}
.login-card{
  width:min(470px,100%);
  padding:45px 44px 32px;
  border:1px solid rgba(18,61,75,.10);
  border-radius:24px;
  background:rgba(255,255,255,.94);
  box-shadow:0 35px 85px rgba(12,35,48,.13),0 5px 20px rgba(12,35,48,.04);
  backdrop-filter:blur(16px);
}
.login-card::before{height:3px;background:linear-gradient(90deg,var(--ex-navy),var(--ex-teal),var(--ex-gold))}
.login-card-header{margin-bottom:30px}
.login-card-kicker{font-size:.66rem;color:var(--ex-teal);letter-spacing:.16em}
.login-card-title{font-size:2.15rem;color:var(--ex-navy);letter-spacing:-.055em}
.login-card-subtitle{font-size:.9rem;color:var(--ex-muted)}
.login-form-label{font-size:.76rem;font-weight:700;color:#334954;letter-spacing:.01em}
.input-wrapper{height:54px}
.login-input{height:54px;border-radius:13px;border:1px solid #d6e0e5;background:#f7fafb;padding-left:3rem;color:var(--ex-ink);transition:all .2s ease}
.login-input::placeholder{color:#9aa9b2}
.login-input:hover{border-color:#b8c9d1;background:#fff}
.login-input:focus{background:#fff;border-color:var(--ex-teal);box-shadow:0 0 0 4px rgba(13,115,119,.09)}
.input-icon{left:16px;color:#8da0aa}
.login-input:focus ~ .input-icon,.login-input:focus + .input-icon{color:var(--ex-teal)}
.btn-login{height:54px;border-radius:13px;background:linear-gradient(135deg,#0a5364 0%,#0d7377 62%,#159a96 100%);box-shadow:0 12px 25px rgba(13,115,119,.20);font-weight:800;letter-spacing:.01em}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 17px 32px rgba(13,115,119,.25)}
.login-footer{border-top:1px solid #edf1f3;margin-top:27px;padding-top:19px}
.login-page-footer{background:rgba(255,255,255,.82);border-top:1px solid rgba(218,226,230,.8)}

/* ---------- APP SHELL ---------- */
.app-container{background:var(--ex-bg)}
.sidebar{
  width:286px;
  background:
    radial-gradient(circle at 100% 0%,rgba(21,154,150,.16),transparent 26%),
    linear-gradient(180deg,#0b2934 0%,#081e27 100%);
  border-right:1px solid rgba(255,255,255,.075);
  box-shadow:10px 0 35px rgba(7,30,39,.08);
}
.sidebar-header{min-height:92px;padding:22px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.018)}
.sidebar-brand{gap:13px}
.sidebar-brand-mark{width:47px;height:47px;border-radius:13px;box-shadow:0 9px 22px rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.15)}
.sidebar-brand-copy strong{font-size:.81rem;letter-spacing:.075em}
.sidebar-brand-copy span{font-size:.66rem;color:rgba(255,255,255,.52)}
.sidebar-nav{padding:16px 11px 100px}
.nav-section-title{margin:21px 8px 8px;padding:0 3px;color:rgba(255,255,255,.34);font-size:.61rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.nav-item{position:relative;margin:3px 4px;padding:10px 12px;border:1px solid transparent;border-left:3px solid transparent;border-radius:11px;gap:12px;color:rgba(255,255,255,.69);font-size:.81rem;transition:all .18s ease}
.nav-item i{width:19px;text-align:center;color:rgba(255,255,255,.46);transition:all .18s ease}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.055);transform:translateX(2px)}
.nav-item:hover i{color:#8be3d8}
.nav-item.active{color:#fff;background:linear-gradient(90deg,rgba(21,154,150,.24),rgba(21,154,150,.07));border-color:rgba(126,240,226,.09);border-left-color:#65d8cf;box-shadow:inset 0 0 25px rgba(21,154,150,.05),0 6px 18px rgba(0,0,0,.07)}
.nav-item.active::after{content:"";position:absolute;right:10px;top:50%;width:4px;height:4px;border-radius:50%;background:#91eee5;box-shadow:0 0 10px rgba(145,238,229,.8);transform:translateY(-50%)}
.nav-item.active i{color:#86e4db}
.sidebar-footer{padding:15px 16px;background:rgba(0,0,0,.20);border-top:1px solid rgba(255,255,255,.06)}
.user-info{gap:10px}
.user-avatar{width:39px;height:39px;background:linear-gradient(135deg,#0d7377,#0a5364);border:1px solid rgba(255,255,255,.14);box-shadow:0 7px 18px rgba(0,0,0,.20)}
.user-name{font-size:.73rem;color:#fff}
.user-role{font-size:.61rem;color:rgba(255,255,255,.48)}
.logout-btn{width:35px;height:35px;border-radius:9px;color:rgba(255,255,255,.52);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06)}
.logout-btn:hover{background:rgba(220,38,38,.13);color:#fca5a5}

/* ---------- HEADER ---------- */
.main-content{margin-left:286px;background:transparent;min-height:100vh}
.content-header{height:82px;padding:0 34px;background:rgba(255,255,255,.88);border-bottom:1px solid var(--ex-line);box-shadow:0 4px 20px rgba(12,35,48,.035);backdrop-filter:blur(16px)}
.page-heading-wrap{gap:3px}
.page-heading-eyebrow{font-size:.63rem;color:#84939d;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.page-heading-eyebrow i{color:var(--ex-teal)}
.page-title{font-size:1.34rem;color:var(--ex-navy);font-weight:800;letter-spacing:-.035em}
.header-user-chip{padding:6px 10px 6px 7px;border:1px solid #e3eaed;border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(12,35,48,.035)}
.header-user-avatar{width:34px;height:34px;background:linear-gradient(135deg,#0d7377,#0a5364);box-shadow:none}
.header-user-copy strong{font-size:.72rem;color:#263d48}
.header-user-copy span{font-size:.59rem;color:#81919a}
.content-header .btn-primary{height:40px;border-radius:10px;background:linear-gradient(135deg,#0a5364,#0d7377);box-shadow:0 7px 16px rgba(13,115,119,.15)}
.content-body{padding:30px 34px 44px;max-width:1800px}

/* ---------- CARDS / TABLES ---------- */
.card,.form-card,.role-permissions-card,.file-view-header,.dashboard-card{
  border:1px solid var(--ex-line)!important;
  border-radius:var(--ex-radius)!important;
  box-shadow:var(--ex-shadow)!important;
  background:rgba(255,255,255,.96)!important;
}
.card:hover,.card-hover:hover,.dashboard-card:hover{box-shadow:var(--ex-shadow-hover)!important}
.card-header,.dashboard-card-header{border-bottom:1px solid #edf1f3!important;background:linear-gradient(180deg,#fff,#fbfcfc)!important}
.dashboard-card-header{padding:19px 22px!important}
.dashboard-card-info h3{font-size:.92rem!important;color:var(--ex-navy)!important;letter-spacing:-.015em}
.dashboard-card-info p{font-size:.72rem!important;color:#82919a!important}
.dashboard-card-icon{width:38px!important;height:38px!important;border-radius:11px!important;background:rgba(13,115,119,.09)!important;color:var(--ex-teal)!important}
.dashboard-card-body{padding:20px 22px!important}
.stat-card{position:relative;overflow:hidden;border:1px solid #e8eef1!important;border-radius:14px!important;background:#fff!important;box-shadow:0 4px 15px rgba(12,35,48,.045)!important;min-height:88px}
.stat-card::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--card-accent,#0d7377);opacity:.72}
.stat-card:hover{transform:translateY(-3px);border-color:#d7e2e6!important;box-shadow:0 13px 28px rgba(12,35,48,.09)!important}
.stat-icon-wrap{width:40px!important;height:40px!important;border-radius:11px!important}
.stat-value{font-size:1.28rem!important;color:var(--ex-navy)!important;font-weight:800!important;letter-spacing:-.035em}
.stat-label{font-size:.65rem!important;color:#7a8b95!important;font-weight:700!important}
.table-container,.data-table-container{border:1px solid #e4eaed!important;border-radius:13px!important;background:#fff;box-shadow:0 5px 18px rgba(12,35,48,.045)}
.data-table,.table{border-collapse:separate;border-spacing:0}
.data-table thead th,.table thead th{background:#f5f8f9!important;color:#526771!important;font-size:.68rem!important;font-weight:800!important;letter-spacing:.055em;text-transform:uppercase;border-bottom:1px solid #e0e7ea!important;padding:12px 14px!important}
.data-table tbody td,.table tbody td{border-bottom:1px solid #edf1f3!important;padding:12px 14px!important;font-size:.78rem;color:#405560}
.data-table tbody tr:last-child td,.table tbody tr:last-child td{border-bottom:0!important}
.data-table tbody tr:hover,.table tbody tr:hover{background:#f8fbfb!important}

/* ---------- FORMS ---------- */
.form-group label,.form-label{font-size:.73rem!important;font-weight:800!important;color:#405560!important}
.form-control,.form-select,input[type="text"],input[type="number"],input[type="email"],input[type="date"],input[type="password"],select,textarea{
  border:1px solid #d9e2e6!important;border-radius:10px!important;background:#fbfcfd!important;color:#243b46!important;min-height:42px;transition:border-color .18s,box-shadow .18s,background .18s!important
}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{background:#fff!important;border-color:#0d7377!important;box-shadow:0 0 0 3px rgba(13,115,119,.08)!important;outline:0!important}
.btn{border-radius:10px!important;font-weight:700!important;letter-spacing:.005em;transition:transform .18s,box-shadow .18s,background .18s!important}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,#0a5364,#0d7377)!important;border-color:transparent!important;box-shadow:0 7px 16px rgba(13,115,119,.13)!important}
.btn-primary:hover{box-shadow:0 11px 23px rgba(13,115,119,.19)!important}

/* ---------- ALERTS / BADGES ---------- */
.alert{border-radius:11px!important;border:1px solid transparent!important;box-shadow:0 6px 18px rgba(12,35,48,.04)}
.badge,.status-badge{border-radius:999px!important;font-weight:800!important;letter-spacing:.01em}

/* ---------- DASHBOARD ---------- */
.dashboard-welcome,.dashboard-hero{border-radius:18px!important;box-shadow:0 15px 38px rgba(12,35,48,.09)!important;overflow:hidden}
.dashboard-grid{gap:20px!important}
.dashboard-section{margin-bottom:20px!important}
.stats-grid{gap:13px!important}
.view-all{font-size:.68rem!important;font-weight:800!important;color:var(--ex-teal)!important}
.activity-item{border-bottom:1px solid #edf1f3!important;padding:12px 0!important}
.activity-item:last-child{border-bottom:0!important}
.empty-state{padding:34px 15px!important;color:#81919a}

/* ---------- MOBILE ---------- */
.mobile-sidebar-overlay{background:rgba(3,20,27,.52)!important;backdrop-filter:blur(2px)}
.mobile-menu-toggle{border:1px solid #dce5e9!important;background:#fff!important;color:#31515d!important;border-radius:10px!important;box-shadow:0 4px 12px rgba(12,35,48,.05)}
@media(max-width:1100px){
  .sidebar{width:270px}.main-content{margin-left:270px}
  .content-body{padding:25px}
  .login-brand{padding-left:40px}.login-hero-copy{margin-left:40px;margin-right:40px}.login-panel-meta{left:40px}
}
@media(max-width:820px){
  .sidebar{width:286px;transform:translateX(-105%);z-index:1000}.sidebar.mobile-open{transform:translateX(0);box-shadow:20px 0 55px rgba(0,0,0,.24)}
  .main-content{margin-left:0}.content-header{height:72px;padding:0 16px}.content-body{padding:20px 16px 32px}
  .header-user-copy,.content-header .header-user-chip{display:none}
  .content-header .btn-primary{display:none}
  .page-title{font-size:1.05rem}.page-heading-eyebrow{display:none}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .login-panel-right{min-width:0}
}
@media(max-width:560px){
  .stats-grid{grid-template-columns:1fr!important}
  .dashboard-card-header,.dashboard-card-body{padding-left:15px!important;padding-right:15px!important}
  .login-card{padding:32px 22px 25px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* ================================================================
   EXECUTIVE POLISH v5 — Acabado institucional
   ================================================================ */
:root{
  --exec-line:rgba(20,53,65,.09);
  --exec-glass:rgba(255,255,255,.78);
}

/* scrollbar institucional */
*{scrollbar-width:thin;scrollbar-color:#9db2ba transparent}
*::-webkit-scrollbar{width:7px;height:7px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#9db2ba;border-radius:20px;border:2px solid transparent;background-clip:padding-box}

/* Login: más editorial y menos "plantilla" */
.login-panel-left{box-shadow:inset -1px 0 rgba(255,255,255,.08)}
.login-panel-left::before{content:"";display:block;position:absolute;inset:auto -10% -16% auto;width:620px;height:620px;border:1px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 0 70px rgba(255,255,255,.018),0 0 0 140px rgba(255,255,255,.012);z-index:-1}
.login-hero-copy::after{content:"";display:block;width:118px;height:1px;margin-top:31px;background:linear-gradient(90deg,rgba(201,162,39,.95),rgba(255,255,255,.05));}
.login-card{position:relative}
.login-card-header:after{content:"";display:block;width:42px;height:3px;border-radius:4px;margin-top:19px;background:var(--ex-gold)}
.login-form-group{position:relative}
.login-form-group:focus-within .login-form-label{color:var(--ex-teal)}
.login-form-label{transition:color .18s ease}
.login-footer-item{display:inline-flex;align-items:center;gap:7px}

/* Shell: sensación de aplicación empresarial */
.main-content{position:relative}
.main-content::before{content:"";position:fixed;left:286px;right:0;top:82px;height:1px;background:linear-gradient(90deg,rgba(13,115,119,.10),transparent 55%);pointer-events:none;z-index:2}
.content-body > *{animation:exec-enter .35s ease both}
.content-body > *:nth-child(2){animation-delay:.035s}
.content-body > *:nth-child(3){animation-delay:.07s}
.content-body > *:nth-child(4){animation-delay:.105s}
@keyframes exec-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Cabeceras internas */
.page-title{position:relative}
.header-left-group{min-width:0}
.header-actions{gap:10px}

/* Sidebar: detalle de navegación */
.sidebar-nav{overflow-y:auto;overflow-x:hidden}
.sidebar-nav::-webkit-scrollbar{width:5px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}
.sidebar-footer{backdrop-filter:blur(10px)}

/* Cards con un lenguaje visual común */
.card-header,.form-card-header,.section-header{min-height:58px}
.card-title,.section-title{font-weight:800;color:var(--ex-navy);letter-spacing:-.025em}
.card-subtitle,.section-subtitle{color:#82929b;font-size:.72rem}
.card-body{background:transparent}

/* Toolbars / filtros */
.filters,.filters-card,.search-card,.filter-card{border:1px solid var(--ex-line)!important;border-radius:14px!important;background:rgba(255,255,255,.92)!important;box-shadow:0 5px 18px rgba(12,35,48,.045)!important}
.filters-form{gap:12px!important}
.filters-form label{font-size:.67rem!important;font-weight:800!important;color:#62757f!important;text-transform:uppercase;letter-spacing:.05em}

/* Botones secundarios más finos */
.btn-secondary{background:#f4f7f8!important;border-color:#dfe7ea!important;color:#3e5661!important}
.btn-secondary:hover{background:#eaf1f3!important;border-color:#d1dce1!important}
.btn-outline-primary{color:var(--ex-teal)!important;border-color:#9bc8c6!important;background:#fff!important}
.btn-outline-primary:hover{color:#fff!important;background:var(--ex-teal)!important;border-color:var(--ex-teal)!important}

/* Paginación */
.pagination a,.pagination button,.pagination span{border-radius:8px!important;border:1px solid #e0e8eb!important;background:#fff!important;color:#60747e!important}
.pagination .active,.pagination a:hover,.pagination button:hover{background:var(--ex-teal)!important;border-color:var(--ex-teal)!important;color:#fff!important}

/* Estado vacío más elegante */
.empty-state i{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:15px;background:#eef6f6;color:var(--ex-teal);margin-bottom:12px}
.empty-state h3{font-size:.9rem;color:#4c626d}
.empty-state p{font-size:.74rem;color:#8b9aa2}

/* Inputs de archivos / drag-drop */
.drop-zone{border:1.5px dashed #b9ced2!important;border-radius:15px!important;background:linear-gradient(180deg,#fbfdfd,#f6fafa)!important;transition:.2s ease!important}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--ex-teal)!important;background:#f0f9f8!important;box-shadow:inset 0 0 0 1px rgba(13,115,119,.06),0 8px 22px rgba(13,115,119,.07)!important}

/* Data cards */
.info-card,.summary-card,.detail-card{border:1px solid var(--ex-line)!important;border-radius:14px!important;box-shadow:0 5px 18px rgba(12,35,48,.045)!important;background:#fff!important}

@media(max-width:820px){
  .main-content::before{left:0;top:72px}
  .content-body > *{animation:none}
}

/* ==================== EXECUTIVE CONTROL CENTER ==================== */
.executive-dashboard{max-width:1500px;margin:0 auto;padding-bottom:10px;animation:fadeIn .45s ease-out}.dashboard-hero{position:relative;display:flex;align-items:stretch;justify-content:space-between;gap:28px;min-height:210px;margin-bottom:20px;padding:30px 34px;border:1px solid #dce8e8;border-radius:22px;overflow:hidden;background:linear-gradient(120deg,#073b4c 0%,#075985 54%,#0f766e 100%);box-shadow:0 18px 45px rgba(7,59,76,.14);color:#fff}.dashboard-hero:before{content:"";position:absolute;width:430px;height:430px;right:-150px;top:-190px;border-radius:50%;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.018)}.dashboard-hero:after{content:"";position:absolute;left:42%;bottom:-170px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.04)}.dashboard-hero-copy,.dashboard-hero-kpi{position:relative;z-index:1}.dashboard-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.69rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:13px}.status-dot{width:7px;height:7px;border-radius:50%;background:#5eead4;box-shadow:0 0 0 5px rgba(94,234,212,.12)}.dashboard-hero h1{margin:0 0 8px;font-size:2rem;letter-spacing:-.04em;line-height:1.12;font-weight:800}.dashboard-hero p{max-width:700px;margin:0;color:rgba(255,255,255,.78);font-size:.88rem;line-height:1.65}.dashboard-hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:.69rem;color:rgba(255,255,255,.68)}.dashboard-hero-meta i{margin-right:6px;color:#99f6e4}.dashboard-hero-kpi{align-self:center;min-width:245px;padding:20px 22px;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}.hero-kpi-label{font-size:.67rem;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.62);font-weight:800}.dashboard-hero-kpi strong{display:block;margin:3px 0;font-size:2.15rem;letter-spacing:-.05em}.dashboard-hero-kpi span{font-size:.68rem;color:#ccfbf1}.dashboard-hero-kpi span i{margin-right:5px}.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.executive-kpi{display:flex;align-items:center;gap:13px;min-width:0;padding:17px 18px;background:#fff;border:1px solid #e5ecee;border-radius:16px;text-decoration:none;color:inherit;box-shadow:0 6px 22px rgba(12,35,48,.045);transition:.22s ease}.executive-kpi:hover{transform:translateY(-2px);border-color:#cddbdd;box-shadow:0 12px 30px rgba(12,35,48,.09)}.kpi-icon{display:flex;align-items:center;justify-content:center;width:43px;height:43px;border-radius:13px;flex:0 0 auto;font-size:16px}.kpi-copy{min-width:0;flex:1}.kpi-copy small,.kpi-copy em{display:block;font-style:normal}.kpi-copy small{font-size:.67rem;text-transform:uppercase;letter-spacing:.06em;color:#7b8b92;font-weight:800}.kpi-copy strong{display:block;font-size:1.35rem;line-height:1.15;color:#123040;letter-spacing:-.035em;margin:2px 0}.kpi-copy em{font-size:.64rem;color:#82919a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpi-arrow{font-size:.68rem;color:#a1afb5}.kpi-primary .kpi-icon{background:#e8f1ff;color:#175cd3}.kpi-teal .kpi-icon{background:#e5f7f4;color:#0f766e}.kpi-indigo .kpi-icon{background:#eeeaff;color:#6045c6}.kpi-amber .kpi-icon{background:#fff4dd;color:#b7791f}.dashboard-panel-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,.9fr);gap:20px;margin-bottom:20px}.dashboard-panel-grid-3{grid-template-columns:1.1fr .9fr .9fr}.executive-panel{background:#fff;border:1px solid #e3eaec;border-radius:18px;box-shadow:0 7px 25px rgba(12,35,48,.045);overflow:hidden}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px 13px}.panel-heading.compact{padding-bottom:16px}.panel-kicker{display:block;margin-bottom:4px;font-size:.61rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#0f766e}.panel-heading h2{margin:0;color:#173443;font-size:.98rem;letter-spacing:-.02em}.panel-heading p{margin:4px 0 0;color:#8a989e;font-size:.7rem}.panel-badge,.panel-total,.live-counter{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 10px;border-radius:9px;background:#f2f7f7;color:#4c6870;font-size:.63rem;font-weight:800}.panel-total{font-size:.72rem}.panel-link{font-size:.65rem;color:#0f766e;text-decoration:none;font-weight:800}.panel-link i{margin-left:4px}.line-chart-wrap{position:relative;padding:8px 18px 0 45px}.executive-line-chart{width:100%;height:245px;display:block;overflow:visible}.chart-grid-line{stroke:#edf2f3;stroke-width:1}.chart-line{fill:none;stroke:#0f766e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-area{fill:url(#dashboardArea);stroke:none}.chart-point{fill:#fff;stroke:#0f766e;stroke-width:2.5;transition:.2s}.chart-point:hover{r:6}.chart-y-labels{position:absolute;left:19px;top:14px;bottom:24px;display:flex;flex-direction:column;justify-content:space-between;font-size:.57rem;color:#9aa7ad;font-weight:700}.chart-x-labels{display:grid;grid-template-columns:repeat(12,1fr);padding:0 20px 18px 48px;color:#9aa7ad;font-size:.55rem;font-weight:800;text-align:center}.completion-content{display:flex;align-items:center;gap:24px;padding:15px 22px 19px}.donut{width:154px;height:154px;border-radius:50%;flex:0 0 auto;background:conic-gradient(#0f766e 0 var(--progress),#e8eff0 var(--progress) 100%);display:flex;align-items:center;justify-content:center;position:relative}.donut:after{content:"";position:absolute;inset:13px;border-radius:50%;background:#fff}.donut>div{position:relative;z-index:1;text-align:center}.donut strong{display:block;font-size:1.65rem;line-height:1;color:#173443;letter-spacing:-.05em}.donut span{font-size:.59rem;color:#8b999f;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.legend-list{flex:1}.legend-list>div{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #f0f3f4}.legend-list>div:last-child{border-bottom:0}.legend-list b{font-size:.67rem;color:#63757d;font-weight:700}.legend-list strong{font-size:.73rem;color:#183644}.legend-dot{width:8px;height:8px;border-radius:50%}.legend-dot.completed{background:#0f766e}.legend-dot.pending{background:#e0a11b}.legend-dot.failed{background:#d9534f}.quality-meter{margin:0 22px 20px;padding:13px 14px;background:#f7faf9;border:1px solid #e9efee;border-radius:11px}.quality-meter>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:.62rem;color:#687a81;font-weight:700;margin-bottom:8px}.quality-meter strong{color:#173443}.meter{height:6px;background:#e4eceb;border-radius:10px;overflow:hidden}.meter span{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#0f766e,#14b8a6)}.category-bars{padding:0 22px 20px}.category-row{margin-bottom:14px}.category-row:last-child{margin-bottom:0}.category-row-head{display:flex;justify-content:space-between;gap:12px;font-size:.65rem;margin-bottom:5px}.category-row-head span{color:#5e727a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-row-head strong{color:#173443}.category-row small{display:block;margin-top:3px;font-size:.55rem;color:#a0adb2}.category-bar{height:6px;background:#eef3f3;border-radius:20px;overflow:hidden}.category-bar span{display:block;height:100%;min-width:2px;border-radius:20px;background:linear-gradient(90deg,#0b6070,#14a594)}.status-list{padding:0 22px 18px}.status-row{display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #f0f3f4}.status-row:last-child{border-bottom:0}.status-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#f0f6f6;color:#0f766e;font-size:.66rem}.status-icon.status-closed{color:#64748b;background:#f1f5f9}.status-icon.status-transferred{color:#6045c6;background:#f0ecff}.status-icon.status-draft{color:#b7791f;background:#fff5df}.status-name{font-size:.66rem;color:#65777f;font-weight:700}.status-row strong{font-size:.72rem;color:#173443}.empty-mini{padding:22px;color:#9aa7ad;font-size:.68rem;text-align:center}.ops-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 22px 14px}.ops-box{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #e9efef;border-radius:11px;text-decoration:none;background:#fbfcfc}.ops-icon{width:31px;height:31px;border-radius:9px;background:#eaf5f3;color:#0f766e;display:flex;align-items:center;justify-content:center;font-size:.66rem}.ops-box small,.ops-box strong{display:block}.ops-box small{font-size:.55rem;color:#87969c}.ops-box strong{font-size:.95rem;color:#173443}.alert-stack{padding:0 22px 20px}.alert-row{display:flex;align-items:center;gap:9px;padding:10px 11px;margin-top:7px;border-radius:9px;font-size:.61rem;font-weight:700}.alert-row.alert-warning{background:#fff8e8;color:#9a6812}.alert-row.alert-info{background:#eef7fb;color:#17627a}.alert-row.alert-ok{background:#edf8f4;color:#17664f}.alert-row i{font-size:.7rem}.quick-actions-panel{margin-bottom:20px}.quick-actions-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:0 22px 22px}.quick-action{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #e8eeee;border-radius:12px;text-decoration:none;background:#fbfcfc;transition:.2s}.quick-action:hover{background:#fff;border-color:#cfe0df;box-shadow:0 6px 18px rgba(12,35,48,.06);transform:translateY(-1px)}.quick-action>span{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#eaf5f3;color:#0f766e;font-size:.7rem;flex:0 0 auto}.quick-action div{min-width:0;flex:1}.quick-action strong,.quick-action small{display:block}.quick-action strong{font-size:.62rem;color:#24434f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-action small{font-size:.52rem;color:#8a999f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.quick-action>i{font-size:.58rem;color:#a1afb5}.executive-activity-list,.executive-doc-list{padding:0 22px 18px}.executive-activity{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eff3f3}.executive-activity:last-child{border-bottom:0}.activity-avatar{width:31px;height:31px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e9f3f2;color:#0f766e;font-size:.63rem;font-weight:900;flex:0 0 auto}.activity-main{min-width:0;flex:1}.activity-main strong{display:block;font-size:.64rem;color:#27434e}.activity-main span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8b989d;font-size:.58rem;margin-top:2px}.activity-main .badge{font-size:.52rem!important;padding:2px 5px!important}.executive-activity time{font-size:.54rem;color:#9aa6ab;white-space:nowrap}.executive-doc{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #eff3f3;text-decoration:none}.executive-doc:last-child{border-bottom:0}.doc-type-icon{width:31px;height:31px;border-radius:9px;background:#f5f7f7;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex:0 0 auto}.doc-main{min-width:0;flex:1}.doc-main strong,.doc-main small{display:block}.doc-main strong{font-size:.64rem;color:#27434e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-main small{font-size:.54rem;color:#8d9aa0;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-status{flex:0 0 auto}.doc-status .badge{font-size:.52rem!important;padding:3px 6px!important}.dashboard-footer{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:4px 4px 14px;color:#8b999f;font-size:.58rem}.dashboard-footer i{margin-right:5px;color:#0f766e}.dashboard-footer strong{color:#536971}@media(max-width:1200px){.dashboard-kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard-panel-grid-3{grid-template-columns:1fr 1fr}.quick-actions-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.dashboard-hero{flex-direction:column}.dashboard-hero-kpi{align-self:stretch}.dashboard-panel-grid,.dashboard-panel-grid-3{grid-template-columns:1fr}.completion-content{justify-content:center}.quick-actions-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.executive-dashboard{padding:0}.dashboard-hero{padding:23px 20px;border-radius:16px}.dashboard-hero h1{font-size:1.55rem}.dashboard-hero p{font-size:.78rem}.dashboard-hero-meta{gap:9px;flex-direction:column}.dashboard-kpi-grid{grid-template-columns:1fr}.executive-kpi{padding:14px}.dashboard-panel-grid{gap:14px;margin-bottom:14px}.panel-heading{padding:17px 16px 11px}.line-chart-wrap{padding-left:35px;padding-right:10px}.chart-x-labels{padding-left:35px;padding-right:10px}.completion-content{flex-direction:column;padding:12px 16px 18px}.quality-meter{margin-left:16px;margin-right:16px}.category-bars,.status-list,.ops-summary,.alert-stack,.quick-actions-grid,.executive-activity-list,.executive-doc-list{padding-left:16px;padding-right:16px}.quick-actions-grid{grid-template-columns:1fr}.executive-activity time{display:none}.dashboard-footer{padding:0 4px 12px;flex-direction:column}}

/* ==========================================================
   CENTRO DE CONTROL · ARCHIVO DE LICENCIAS
   ========================================================== */
.license-control-panel{margin-bottom:20px}.license-heading{padding-bottom:15px}.license-heading h2{font-size:1.08rem}.license-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 22px 18px}.license-kpi{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid #e6eded;border-radius:13px;background:linear-gradient(135deg,#fbfdfd,#f7faf9)}.license-kpi-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#e8f2f2;color:#0b6070;font-size:.82rem;flex:0 0 auto}.license-kpi-icon.teal{background:#e7f7f3;color:#0f766e}.license-kpi-icon.amber{background:#fff5df;color:#b7791f}.license-kpi small,.license-kpi strong{display:block}.license-kpi small{font-size:.59rem;color:#819096;font-weight:700}.license-kpi strong{font-size:1.2rem;color:#173443;letter-spacing:-.03em;margin-top:3px}.license-chart-grid{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:12px;padding:0 22px 22px}.license-chart-box{border:1px solid #e8eeee;border-radius:13px;background:#fff;min-width:0}.license-chart-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px 10px;border-bottom:1px solid #f0f3f3}.license-chart-title strong,.license-chart-title small{display:block}.license-chart-title strong{font-size:.68rem;color:#27434e}.license-chart-title small{font-size:.55rem;color:#94a0a5;margin-top:3px}.license-chart-title>span{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#eef6f5;color:#0f766e;font-size:.63rem}.license-bars{padding:12px 15px 14px}.license-bar-row{margin-bottom:12px}.license-bar-row:last-child{margin-bottom:0}.license-bar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px;font-size:.59rem}.license-bar-head span{color:#64777e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.license-bar-head strong{color:#183644}.license-bar{height:7px;background:#edf2f2;border-radius:20px;overflow:hidden}.license-bar span{display:block;height:100%;min-width:2px;border-radius:20px;background:linear-gradient(90deg,#075985,#0f766e)}.license-bar-secondary span{background:linear-gradient(90deg,#0f766e,#14b8a6)}.license-year-box{overflow:hidden}.license-year-chart{height:196px;display:flex;align-items:flex-end;gap:9px;padding:18px 15px 12px;overflow-x:auto}.license-year-col{height:100%;min-width:42px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.license-year-value{font-size:.52rem;font-weight:800;color:#4e6871;height:18px;white-space:nowrap}.license-year-bar{width:25px;height:125px;display:flex;align-items:flex-end;background:#f0f4f4;border-radius:7px 7px 3px 3px;overflow:hidden}.license-year-bar span{display:block;width:100%;min-height:6px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#14a594,#075985)}.license-year-col small{font-size:.51rem;font-weight:800;color:#8c999e;margin-top:7px}@media(max-width:1100px){.license-chart-grid{grid-template-columns:1fr 1fr}.license-year-box{grid-column:1/-1}.license-kpi-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.license-kpi-grid{grid-template-columns:1fr;padding-left:16px;padding-right:16px}.license-chart-grid{grid-template-columns:1fr;padding-left:16px;padding-right:16px}.license-year-box{grid-column:auto}.license-heading{padding-left:16px;padding-right:16px}.license-year-chart{gap:8px}}