/**
 * ====================================================================
 * ESTILOS CORPORATIVOS COMPAÑÍA MINERA SANTANDER (santanderpm.com)
 * ====================================================================
 * Manual de Marca Oficial:
 * - Deep Navy:      #112437 (Cabecera corporativa y encabezado de tabla)
 * - Azul Petróleo:  #1F3F60 (Botones principales y acciones)
 * - Dorado / Cobre: #B87332 (Línea divisoria de cabecera y enlaces activos)
 * - Dorado Claro:   #E2C378 (Detalles visuales e iconos destacados)
 * - Soft Gold:      #F3E1CE / #7A4B20 (Badge de alta visibilidad para Anexos)
 * - Hielo:          #D7E3EE (Fondo de círculos de avatar para iniciales)
 * - Tipografía:     Poppins
 */

:root {
    color-scheme: dark;

    /* ============================================================== */
    /* APPLE DESIGN SYSTEM (HUMAN INTERFACE GUIDELINES - MACOS & IOS) */
    /* ============================================================== */
    
    /* Apple Vibrant System Colors */
    --apple-blue: #0a84ff;
    --apple-blue-hover: #0077ed;
    --apple-blue-tint: rgba(10, 132, 255, 0.14);
    --apple-indigo: #5e5ce6;
    --apple-purple: #bf5af2;
    --apple-pink: #ff375f;
    --apple-teal: #64d2ff;
    --apple-green: #30d158;
    --apple-yellow: #ffd60a;
    --apple-orange: #ff9f0a;
    --apple-red: #ff453a;
    --apple-gray: #8e8e93;

    /* Identidad Minera Santander integrada en armonía Apple */
    --brand-deep-navy: #0e1e2f;
    --brand-azul-petroleo: #0a84ff;
    --brand-azul-petroleo-hover: #0077ed;
    --brand-cobre: #ff9f0a;
    --brand-dorado-claro: #ffd60a;
    --brand-soft-gold-bg: rgba(255, 159, 10, 0.15);
    --brand-soft-gold-text: #ffb340;
    --brand-hielo: rgba(10, 132, 255, 0.15);

    /* Apple macOS Sonoma / Sequoia Dark Canvas (Obsidian Acrylic) */
    --bg-primary: #000000;
    --bg-secondary: rgba(22, 22, 26, 0.75);
    --bg-card: rgba(28, 28, 32, 0.72);
    --bg-card-hover: rgba(44, 44, 48, 0.85);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-focus: rgba(10, 132, 255, 0.55);
    --text-primary: #f5f5f7;
    --text-secondary: rgba(235, 235, 245, 0.65);
    --text-muted: rgba(235, 235, 245, 0.38);

    --accent-blue: #0a84ff;
    --accent-blue-hover: #0077ed;
    --accent-teal: #30d158;
    --accent-cobre: #ff9f0a;
    --accent-gold: #ffd60a;
    --success: #30d158;
    --warning: #ff9f0a;
    --danger: #ff453a;

    /* Apple Squircle Radius */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-pill: 9999px;

    /* Apple Shadows & Specular Highlighting */
    --card-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --card-shadow-hover: 0 16px 36px -6px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --gold-glow: 0 0 20px rgba(255, 159, 10, 0.3);
    --blue-glow: 0 0 20px rgba(10, 132, 255, 0.35);
    --ai-gradient: linear-gradient(135deg, #0a84ff 0%, #bf5af2 50%, #ff375f 100%);
}

[data-theme="light"] {
    color-scheme: light;

    --apple-blue: #0071e3;
    --apple-blue-hover: #0077ed;
    --apple-blue-tint: rgba(0, 113, 227, 0.08);
    --apple-green: #34c759;
    --apple-orange: #ff9500;
    --apple-red: #ff3b30;

    /* Apple Cupertino Signature Light Canvas */
    --bg-primary: #f5f5f7;
    --bg-secondary: rgba(255, 255, 255, 0.85);
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-card-hover: #ffffff;
    --border-color: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.04);
    --border-focus: rgba(0, 113, 227, 0.45);
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --text-muted: #a1a1a6;
    --brand-deep-navy: #ffffff;
    --brand-dorado-claro: #b45309;

    --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);
    --card-shadow-hover: 0 12px 30px -4px rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
    letter-spacing: -0.011em;
}

/* Scrollbar personalizado estilo macOS */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 128, 0.28);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 128, 0.45);
}

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

/* Sidebar estilo macOS Window Sidebar */
.sidebar {
    width: 260px;
    background-color: var(--bg-secondary);
    backdrop-filter: blur(35px) saturate(190%);
    -webkit-backdrop-filter: blur(35px) saturate(190%);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-header {
    height: 64px;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 14px 18px 8px 18px;
    border-bottom: 1px solid var(--border-color);
    gap: 6px;
}

/* Botones Semáforo de Ventana macOS (Traffic Lights: 🔴 🟡 🟢) */
.mac-traffic-lights {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.mac-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    cursor: default;
}
.mac-dot.red { background: #ff5f56; border: 1px solid #e0443e; }
.mac-dot.yellow { background: #ffbd2e; border: 1px solid #dea123; }
.mac-dot.green { background: #27c93f; border: 1px solid #1aab29; }
.mac-traffic-lights:hover .mac-dot {
    filter: brightness(1.12);
    transform: scale(1.08);
}

.brand-icon {
    width: 32px;
    height: 32px;
    background: var(--ai-gradient);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.35);
}

.brand-text h1 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.025em;
    background: linear-gradient(90deg, #60a5fa, #bf5af2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-text p {
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nav-menu {
    list-style: none;
    padding: 14px 10px;
    flex: 1;
    overflow-y: auto;
}

.nav-item {
    margin-bottom: 3px;
}

/* Ítems de navegación tipo macOS Sidebar Selection */
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    transform: translateX(2px);
}

[data-theme="light"] .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.nav-link.active {
    background: var(--apple-blue) !important;
    color: #ffffff !important;
    border-left: none !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.38);
}

.nav-link.active .icon {
    transform: scale(1.1);
}

.nav-link .icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
    transition: transform 0.2s ease;
}

.sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.12);
}

.system-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--apple-green);
    box-shadow: 0 0 10px var(--apple-green);
}

/* Contenido Principal */
.main-wrapper {
    margin-left: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Header Superior estilo macOS Titlebar / Toolbar */
.top-header {
    height: 58px;
    background-color: var(--bg-secondary);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 30;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

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

.page-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

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

/* Barra de Filtros Globales (macOS Floating Segmented Bar) */
.filter-bar {
    background-color: var(--bg-secondary);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ============================================================== */
/* ESTILOS UNIVERSALES Y ACCESIBILIDAD PARA SELECTORES / DROPDOWNS */
/* ============================================================== */

/* Color-scheme forzado para popups nativos del navegador */
select,
.filter-select,
.form-input {
    color-scheme: dark;
}

.filter-select {
    background-color: #161c28 !important; /* Fondo oscuro sólido Slate Navy para evitar popup blanco */
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #f8fafc !important;             /* Texto blanco brillante visible */
    padding: 6px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    min-width: 140px;
    transition: all 0.18s ease;
}

.filter-select:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background-color: #1e2638 !important;
}

.filter-select:focus {
    border-color: var(--apple-blue) !important;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.28) !important;
    background-color: #222c40 !important;
}

/* Opciones desplegables dentro de TODOS los selects en Modo Oscuro */
select option,
.filter-select option,
.form-input option {
    background-color: #161c28 !important; /* Fondo oscuro sólido */
    color: #f8fafc !important;             /* Texto blanco visible y nítido */
    padding: 8px 12px;
    font-size: 13px;
}

select option:checked,
.filter-select option:checked,
.form-input option:checked {
    background-color: #1f3f60 !important; /* Azul petróleo institucional Santander */
    color: #ffffff !important;
    font-weight: 600;
}

select optgroup,
.filter-select optgroup,
.form-input optgroup {
    background-color: #0d121c !important;
    color: #94a3b8 !important;
    font-weight: 700;
}

/* En Modo Claro (Light Theme) */
[data-theme="light"] select,
[data-theme="light"] .filter-select,
[data-theme="light"] .form-input {
    color-scheme: light !important;
}

[data-theme="light"] .filter-select {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    color: #1e293b !important;
}

[data-theme="light"] .filter-select:hover {
    border-color: rgba(0, 0, 0, 0.35) !important;
    background-color: #f8fafc !important;
}

[data-theme="light"] .filter-select:focus {
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;
    background-color: #ffffff !important;
}

[data-theme="light"] select option,
[data-theme="light"] .filter-select option,
[data-theme="light"] .form-input option {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

[data-theme="light"] select option:checked,
[data-theme="light"] .filter-select option:checked,
[data-theme="light"] .form-input option:checked {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Tarjetas KPI y Grids (Estilo Widgets iOS 18 / macOS Sonoma) */
.content-body {
    padding: 24px;
    flex: 1;
}

.kpi-grid,
.kpi-grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background-color: var(--bg-card);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: var(--card-shadow);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card:hover {
    transform: translateY(-2px) scale(1.008);
    box-shadow: var(--card-shadow-hover);
    border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="light"] .kpi-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: var(--apple-blue);
    opacity: 0.85;
}

.kpi-card.kpi-success::before { background: var(--apple-green); }
.kpi-card.kpi-warning::before { background: var(--apple-orange); }
.kpi-card.kpi-danger::before { background: var(--apple-red); }
.kpi-card.kpi-purple::before { background: var(--apple-purple); }

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

.kpi-title {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

.kpi-icon {
    font-size: 18px;
    opacity: 0.8;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 6px;
}

/* Resumen ejecutivo: número primero, descripción debajo, peso medio */
.kpi-grid-summary .kpi-value {
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}
.kpi-grid-summary .kpi-title {
    text-transform: none;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.kpi-grid-summary .kpi-subtitle {
    font-weight: 400;
}

.kpi-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Tarjeta Destacada de Inteligencia Artificial (Estilo Apple Intelligence) */
.ai-insights-container {
    background: linear-gradient(135deg, rgba(20, 20, 26, 0.85) 0%, rgba(35, 20, 45, 0.85) 50%, rgba(20, 25, 45, 0.85) 100%);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(191, 90, 242, 0.35);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 12px 36px rgba(191, 90, 242, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .ai-insights-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 235, 255, 0.95) 50%, rgba(235, 245, 255, 0.95) 100%);
    border: 1px solid rgba(191, 90, 242, 0.3);
    box-shadow: 0 8px 30px rgba(191, 90, 242, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.ai-insights-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0a84ff 0%, #bf5af2 50%, #ff375f 100%);
    box-shadow: 0 0 14px rgba(191, 90, 242, 0.8);
}

.ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.ai-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(191, 90, 242, 0.16);
    border: 1px solid rgba(191, 90, 242, 0.4);
    color: #e879f9;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

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

.ai-content {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.65;
}

.ai-content h3 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 16px 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.015em;
}

.ai-content h4 {
    color: var(--apple-blue);
    font-size: 14px;
    font-weight: 600;
    margin: 14px 0 6px 0;
}

.ai-content ul, .ai-content ol {
    margin-left: 20px;
    margin-bottom: 12px;
}

.ai-content li {
    margin-bottom: 4px;
}

.ai-content p {
    margin-bottom: 10px;
}

.ai-content hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 16px 0;
}

/* Botones estilo Apple HIG (Pills & Squircles) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background-color: var(--apple-blue);
    color: white;
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.35);
}
.btn-primary:hover {
    background-color: var(--apple-blue-hover);
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.45);
    transform: translateY(-1px);
}

.btn-ai {
    background: linear-gradient(135deg, #0a84ff 0%, #bf5af2 100%);
    border: none;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(191, 90, 242, 0.35);
}
.btn-ai:hover {
    box-shadow: 0 6px 22px rgba(191, 90, 242, 0.5);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: rgba(120, 120, 128, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.btn-secondary:hover {
    background-color: rgba(120, 120, 128, 0.28);
    border-color: rgba(255, 255, 255, 0.16);
}
[data-theme="light"] .btn-secondary {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .btn-secondary:hover {
    background-color: rgba(0, 0, 0, 0.09);
}

.btn-danger {
    background-color: var(--apple-red);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 69, 58, 0.35);
}
.btn-danger:hover {
    background-color: #e03830;
    box-shadow: 0 4px 14px rgba(255, 69, 58, 0.45);
}

/* Grillas de Gráficos */
.chart-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.chart-card {
    background-color: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.chart-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.chart-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

.chart-container {
    position: relative;
    height: 280px;
    width: 100%;
}

/* Tablas Corporativas estilo Apple / macOS Settings */
.table-card {
    background-color: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
    overflow-x: auto;
}

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

.corporate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.corporate-table th {
    background-color: rgba(255, 255, 255, 0.035);
    padding: 12px 14px;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
}

[data-theme="light"] .corporate-table th {
    background-color: rgba(0, 0, 0, 0.03);
    color: #86868b;
}

.corporate-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: background-color 0.15s ease;
}

.corporate-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.035);
}

[data-theme="light"] .corporate-table tr:hover td {
    background-color: rgba(0, 113, 227, 0.035);
}

/* Badges de Estado estilo Apple Pill */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge-anexo, .badge-soft-gold {
    background-color: rgba(255, 159, 10, 0.15) !important;
    color: #ffb340 !important;
    border: 1px solid rgba(255, 159, 10, 0.35) !important;
    font-weight: 600 !important;
}

/* Avatar circular de usuario */
.user-avatar-circle, #header-user-avatar {
    background: rgba(10, 132, 255, 0.15) !important;
    color: var(--apple-blue) !important;
    font-weight: 700 !important;
    border: 1.5px solid var(--apple-blue) !important;
}

.badge-success { background: rgba(48, 209, 88, 0.14); color: #30d158; border: 1px solid rgba(48, 209, 88, 0.28); }
.badge-warning { background: rgba(255, 159, 10, 0.14); color: #ff9f0a; border: 1px solid rgba(255, 159, 10, 0.28); }
.badge-danger { background: rgba(255, 69, 58, 0.14); color: #ff453a; border: 1px solid rgba(255, 69, 58, 0.28); }
.badge-info { background: rgba(10, 132, 255, 0.14); color: #0a84ff; border: 1px solid rgba(10, 132, 255, 0.28); }
.badge-purple { background: rgba(191, 90, 242, 0.14); color: #bf5af2; border: 1px solid rgba(191, 90, 242, 0.28); }

/* Modales estilo macOS Floating Sheet */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal-card {
    background: rgba(30, 30, 34, 0.9);
    backdrop-filter: blur(35px) saturate(190%);
    -webkit-backdrop-filter: blur(35px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    padding: 24px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .modal-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.close-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(120, 120, 128, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.close-btn:hover {
    background: rgba(120, 120, 128, 0.35);
    color: var(--text-primary);
    transform: scale(1.05);
}

/* Estilos modernos y compactos para formularios en ventanas modales */
.modal-section-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
[data-theme="light"] .modal-section-card {
    background: rgba(0, 0, 0, 0.02);
}
.modal-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--apple-blue);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.modal-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.modal-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.modal-grid-2:last-child,
.modal-grid-3:last-child {
    margin-bottom: 0;
}
.modal-grid-2 > .form-group,
.modal-grid-3 > .form-group {
    margin-bottom: 0;
    min-width: 0;
}
.modal-grid-2 > .form-group .form-label,
.modal-grid-3 > .form-group .form-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Formularios estilo Apple Settings */
.form-group {
    margin-bottom: 16px;
}
.form-label {
    display: block;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}
.form-input, .form-textarea {
    width: 100%;
    background: rgba(120, 120, 128, 0.12);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 9px 13px;
    color: var(--text-primary);
    font-size: 13.5px;
    outline: none;
    transition: all 0.18s ease;
}
.form-input:focus, .form-textarea:focus {
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25);
    background: rgba(120, 120, 128, 0.16);
}

/* Animaciones */
.spinner {
    animation: spin 1s linear infinite;
    display: inline-block;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================================== */
/* SISTEMA RESPONSIVE MULTI-DISPOSITIVO (MÓVIL, TABLET Y ESCRITORIO) */
/* ============================================================== */

/* Botón Hamburguesa y Componentes de Drawer Móvil */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(31, 63, 96, 0.4);
    border: 1.5px solid var(--brand-cobre);
    color: var(--brand-dorado-claro);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.mobile-menu-toggle:hover {
    background: rgba(184, 115, 50, 0.25);
    border-color: var(--brand-dorado-claro);
}

.sidebar-close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
}
.sidebar-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #f87171;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 23, 38, 0.8);
    backdrop-filter: blur(4px);
    z-index: 99;
}

/* 1. TABLETS Y PANTALLAS MEDIANAS (<= 1024px) */
@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex !important;
    }
    .sidebar-close-btn {
        display: flex !important;
    }

    /* Sidebar como cajón Off-Canvas deslizante */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 280px !important;
        z-index: 100 !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
    }
    .sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.9) !important;
    }

    .sidebar-backdrop.active {
        display: block !important;
    }

    .main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Header simplificado */
    .top-header {
        padding: 0 16px !important;
    }
    #header-user-name, #header-user-role {
        display: none !important;
    }
    #btn-header-sync {
        display: none !important;
    }

    .charts-grid, .chart-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* 2. SMARTPHONES Y PANTALLAS PEQUEÑAS (<= 768px) */
@media (max-width: 768px) {
    /* Tipografía y Espaciado */
    body {
        font-size: 13px;
    }
    .content-body {
        padding: 14px 10px !important;
    }
    .page-title {
        font-size: 15px !important;
    }
    .top-header {
        height: 58px !important;
        padding: 0 12px !important;
    }

    /* Barra de Filtros en Columna */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px 10px !important;
    }
    .filter-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .filter-item {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .filter-select {
        width: 100% !important;
        height: 42px !important;
        font-size: 13px !important;
    }
    .filter-bar button {
        width: 100% !important;
        height: 40px !important;
        justify-content: center;
    }

    /* KPI Cards (2 Columnas en celular) */
    .kpi-grid, .kpi-grid-4, .a1-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .kpi-card {
        padding: 12px 10px !important;
    }
    .kpi-title {
        font-size: 11px !important;
    }
    .kpi-value {
        font-size: 20px !important;
    }
    .kpi-grid-summary .kpi-value {
        font-size: 26px !important;
        font-weight: 500 !important;
    }
    .kpi-trend {
        font-size: 10px !important;
    }

    /* Píldoras de Filtro SEDE-ÁREA con Scroll Horizontal Táctil */
    .sede-pills-row, .area-pills-row, .group-pills-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
        gap: 6px !important;
    }
    .sede-pill, .area-pill, .group-pill {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Conmutador de Vistas */
    .view-switcher {
        width: 100% !important;
        display: flex !important;
    }
    .view-switcher-btn {
        flex: 1 !important;
        text-align: center !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* Contenedores de Gráficos */
    .chart-card {
        padding: 14px 10px !important;
    }
    .chart-container {
        height: 250px !important;
    }

    /* Tablas Corporativas con Scroll Táctil */
    .table-card {
        padding: 12px 8px !important;
        overflow: hidden !important;
    }
    .table-card > table, 
    .corporate-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }
    .corporate-table th, .corporate-table td {
        padding: 8px 6px !important;
        font-size: 11px !important;
    }

    /* Tarjeta Destacada de Impresora PoC */
    .printer-card-featured {
        padding: 16px 12px !important;
    }
    .printer-featured-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .printer-featured-header > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .printer-featured-header > div:last-child button {
        width: 100% !important;
        height: 40px !important;
        justify-content: center;
        font-size: 13px !important;
    }
    .printer-kpi-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .cmyk-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Contenedor de Insights IA */
    .ai-insights-container {
        padding: 16px 12px !important;
    }
    .ai-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .ai-controls {
        width: 100% !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .ai-controls button {
        width: 100% !important;
        height: 40px !important;
        justify-content: center;
    }

    /* Ventanas Modales */
    .modal-card {
        width: 95% !important;
        max-width: 95% !important;
        padding: 18px 12px !important;
        margin: 10px auto !important;
        max-height: 90vh !important;
    }
    .modal-card form > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* 3. PANTALLAS ULTRAPEQEÑAS (<= 480px - iPhone SE, etc.) */
@media (max-width: 480px) {
    .kpi-grid, .kpi-grid-4, .a1-kpi-grid, .printer-kpi-strip {
        grid-template-columns: 1fr !important;
    }
    .cmyk-grid {
        grid-template-columns: 1fr !important;
    }
    .page-title {
        font-size: 13px !important;
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #theme-toggle-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    .login-card {
        padding: 24px 16px !important;
    }
    .demo-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================== */
/* ESTILOS ESPECÍFICOS ACTION1 DASHBOARD & DOSSIER                */
/* ============================================================== */

/* Status Pills */
.a1-status-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    transition: transform 0.15s ease;
}
.a1-status-pill:hover {
    transform: translateY(-2px);
}
.pill-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pill-dot.green { background: var(--success); box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
.pill-dot.yellow { background: var(--warning); box-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }
.pill-dot.gray { background: #64748b; }
.pill-dot.red { background: var(--danger); box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
.pill-dot.pulse {
    animation: pulseGlow 1.5s infinite;
}
@keyframes pulseGlow {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}
.pill-info {
    display: flex;
    flex-direction: column;
}
.pill-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}
.pill-lbl {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Compliance Gauge */
.gauge-center-box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.gauge-circle-outer {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: conic-gradient(#ef4444 0% 70%, #f59e0b 70% 90%, #3b82f6 90% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.25);
}
.gauge-circle-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.gauge-big-num {
    font-size: 34px;
    font-weight: 800;
    color: #f87171;
    line-height: 1;
}
.gauge-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.compliance-stats-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.compliance-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.stat-badge-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.stat-badge-dot.red { background: #ef4444; }
.stat-badge-dot.yellow { background: #f59e0b; }
.stat-num {
    font-size: 22px;
    font-weight: 700;
    display: block;
    line-height: 1.1;
}
.text-danger { color: #f87171 !important; }
.text-warning { color: #fbbf24 !important; }
.stat-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.sla-targets-box {
    margin-top: 16px;
    padding: 12px 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.sla-target-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.sla-target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.sla-target-pill {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.badge-dot.red { background: #ef4444; }
.badge-dot.orange { background: #f97316; }
.badge-dot.yellow { background: #eab308; }
.badge-dot.blue { background: #3b82f6; }

/* Matrix Heatmap Table */
.matrix-table th, .matrix-table td {
    text-align: center;
    padding: 12px 14px;
}
.matrix-badge {
    display: inline-block;
    min-width: 50px;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.matrix-badge-critical {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}
.matrix-badge-high {
    background: rgba(249, 115, 22, 0.2);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.4);
}
.matrix-badge-medium {
    background: rgba(234, 179, 8, 0.2);
    color: #facc15;
    border: 1px solid rgba(234, 179, 8, 0.4);
}
.matrix-badge-low {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
}
.matrix-badge-zero {
    background: transparent;
    color: var(--text-muted);
    font-weight: 500;
}
.matrix-total-cell {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
}

/* Dossier Modal */
.dossier-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.dossier-spec-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
}
.dossier-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.dossier-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}
.dossier-raw-box {
    background: #090d16;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    font-family: Consolas, monospace;
    font-size: 12px;
    color: #94a3b8;
    max-height: 250px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* ============================================================== */
/* IDENTIDAD CORPORATIVA COMPAÑÍA MINERA SANTANDER (santanderpm)   */
/* ============================================================== */

.santander-logo-crest {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
}

.santander-badge {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.santander-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
}

/* Selector y Filtros de Grupos de Configuración Action1 (Estilo Apple Segmented Pills) */
.group-filter-container {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: var(--card-shadow);
}

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

.group-filter-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-pills-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.group-pills-scroll::-webkit-scrollbar {
    height: 5px;
}

.group-pill-btn {
    background: rgba(120, 120, 128, 0.12);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.group-pill-btn:hover {
    background: rgba(120, 120, 128, 0.22);
    color: var(--text-primary);
}

.group-pill-btn.active {
    background: var(--apple-blue) !important;
    border-color: var(--apple-blue) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.35);
}

.group-pill-count {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 9999px;
}
.group-pill-btn.active .group-pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-weight: bold;
}

/* Conmutador de Vistas (Estilo Apple Segmented Control) */
.view-mode-toggle {
    display: inline-flex;
    background: rgba(120, 120, 128, 0.16);
    border: 1px solid var(--border-color);
    border-radius: 11px;
    padding: 3px;
    gap: 2px;
}

.view-mode-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.view-mode-btn.active {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .view-mode-btn.active {
    background: #ffffff;
    color: #1d1d1f;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Acordeón de Grupos Action1 (Vista Agrupada) */
.group-card-accordion {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.group-card-accordion:hover {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: var(--card-shadow);
}

.group-card-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    user-select: none;
    transition: background 0.15s ease;
}

.group-card-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

.group-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.group-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(31, 63, 96, 0.4);
    border: 1px solid var(--brand-azul-petroleo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.group-icon-circle.mina {
    background: rgba(184, 115, 50, 0.2);
    border-color: var(--brand-cobre);
    color: var(--brand-dorado-claro);
}
.group-icon-circle.lima {
    background: rgba(31, 63, 96, 0.35);
    border-color: var(--brand-azul-petroleo);
    color: var(--brand-dorado-claro);
}

.group-name-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.group-location-badge {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

.group-meta-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.group-card-body {
    border-top: 1px solid var(--border-color);
    padding: 0;
    display: block;
}

.group-card-accordion.collapsed .group-card-body {
    display: none;
}

.group-chevron {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.group-card-accordion.collapsed .group-chevron {
    transform: rotate(-90deg);
}

/* ============================================================== */
/* ESTILOS DEL MÓDULO DE IMPRESORAS Y CONSUMIBLES (SNMP)          */
/* ============================================================== */

.printer-card-featured {
    background: var(--bg-card);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.printer-card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--apple-blue) 40%, var(--brand-dorado-claro) 70%, transparent);
}

.printer-featured-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.printer-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.printer-icon-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(10, 132, 255, 0.12);
    border: 1px solid rgba(10, 132, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--apple-blue);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.15);
}

.printer-name-heading {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.printer-sub-details {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.badge-ip {
    background: rgba(120, 120, 128, 0.16);
    color: var(--apple-blue);
    border: 1px solid rgba(10, 132, 255, 0.25);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 9999px;
    font-weight: 600;
}

.printer-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.printer-kpi-box {
    background: rgba(120, 120, 128, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 18px;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.printer-kpi-box:hover {
    border-color: var(--apple-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.printer-kpi-box .kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.printer-kpi-box .kpi-num {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.1;
}

.printer-kpi-box .kpi-subtext {
    font-size: 11px;
    color: var(--brand-dorado-claro);
    margin-top: 4px;
    font-weight: 500;
}

/* GAUGE DE TÓNER CMYK (Apple Continuous Capsule Style) */
.cmyk-toner-container {
    background: rgba(120, 120, 128, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px;
}

.cmyk-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cmyk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.toner-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 16px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.toner-card:hover {
    transform: translateY(-1px);
}

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

.toner-name {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.toner-dot.black { background-color: #3a3a3c; border: 1px solid rgba(255, 255, 255, 0.2); }
.toner-dot.cyan { background-color: #00A3E0; box-shadow: 0 0 6px rgba(0, 163, 224, 0.6); }
.toner-dot.magenta { background-color: #E4007C; box-shadow: 0 0 6px rgba(228, 0, 124, 0.6); }
.toner-dot.yellow { background-color: #FFD700; box-shadow: 0 0 6px rgba(255, 215, 0, 0.6); }

.toner-percentage {
    font-size: 13px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.toner-track {
    height: 8px;
    background: rgba(120, 120, 128, 0.16);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.toner-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.toner-fill.black { background: linear-gradient(90deg, #636366, #2c2c2e); }
.toner-fill.cyan { background: linear-gradient(90deg, #0a84ff, #00A3E0); }
.toner-fill.magenta { background: linear-gradient(90deg, #ff375f, #E4007C); }
.toner-fill.yellow { background: linear-gradient(90deg, #ffd60a, #FF9F0A); }

.toner-fill.warning {
    background: #ff453a !important;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

.snmp-test-box {
    margin-top: 14px;
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
    font-family: monospace;
    display: none;
}
.snmp-test-box.success {
    display: block;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}
.snmp-test-box.error {
    display: block;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}