/* 
 * MISO - Sistema de Gestión de Seguridad de la Información
 * Tema de Colores Pasteles y Tipografía Unificada
 * Color Principal: #072042
 */

:root {
    /* Colores principales */
    --miso-primary: #072042;
    --miso-primary-light: #0d3a6e;
    --miso-primary-lighter: #1565c0;
    --miso-secondary: #0a3058;
    --miso-accent: #2581c4;
    --miso-accent-light: #42a5f5;
    
    /* Tipografía */
    --miso-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --miso-font-size-xs: 0.75rem;
    --miso-font-size-sm: 0.8125rem;
    --miso-font-size-base: 0.875rem;
    --miso-font-size-md: 0.9375rem;
    --miso-font-size-lg: 1rem;
    --miso-font-size-xl: 1.125rem;
    --miso-font-size-2xl: 1.25rem;
    --miso-font-size-3xl: 1.5rem;
    --miso-font-size-4xl: 1.875rem;
    
    /* Pasteles */
    --pastel-green: #d4edda;
    --pastel-green-text: #155724;
    --pastel-green-border: #c3e6cb;
    
    --pastel-yellow: #fff3cd;
    --pastel-yellow-text: #856404;
    --pastel-yellow-border: #ffeeba;
    
    --pastel-red: #f8d7da;
    --pastel-red-text: #721c24;
    --pastel-red-border: #f5c6cb;
    
    --pastel-blue: #d1ecf1;
    --pastel-blue-text: #0c5460;
    --pastel-blue-border: #bee5eb;
    
    --pastel-indigo: #cce5ff;
    --pastel-indigo-text: #004085;
    --pastel-indigo-border: #b8daff;
    
    --pastel-gray: #e9ecef;
    --pastel-gray-text: #383d41;
    --pastel-gray-border: #d6d8db;
    
    --pastel-purple: #e2d9f3;
    --pastel-purple-text: #4a235a;
    --pastel-purple-border: #d4c4e8;
    
    --pastel-orange: #ffe5d0;
    --pastel-orange-text: #8b4513;
    --pastel-orange-border: #ffd4b8;
    
    --pastel-teal: #d1f2eb;
    --pastel-teal-text: #0e6251;
    --pastel-teal-border: #a9dfbf;
    
    --pastel-pink: #fce4ec;
    --pastel-pink-text: #880e4f;
    --pastel-pink-border: #f8bbd9;
}

/* ===== BADGES PASTEL ===== */
.badge-pastel-success {
    background: var(--pastel-green) !important;
    color: var(--pastel-green-text) !important;
    border: 1px solid var(--pastel-green-border);
}

.badge-pastel-warning {
    background: var(--pastel-yellow) !important;
    color: var(--pastel-yellow-text) !important;
    border: 1px solid var(--pastel-yellow-border);
}

.badge-pastel-danger {
    background: var(--pastel-red) !important;
    color: var(--pastel-red-text) !important;
    border: 1px solid var(--pastel-red-border);
}

.badge-pastel-info {
    background: var(--pastel-blue) !important;
    color: var(--pastel-blue-text) !important;
    border: 1px solid var(--pastel-blue-border);
}

.badge-pastel-primary {
    background: var(--pastel-indigo) !important;
    color: var(--pastel-indigo-text) !important;
    border: 1px solid var(--pastel-indigo-border);
}

.badge-pastel-secondary {
    background: var(--pastel-gray) !important;
    color: var(--pastel-gray-text) !important;
    border: 1px solid var(--pastel-gray-border);
}

.badge-pastel-purple {
    background: var(--pastel-purple) !important;
    color: var(--pastel-purple-text) !important;
    border: 1px solid var(--pastel-purple-border);
}

.badge-pastel-orange {
    background: var(--pastel-orange) !important;
    color: var(--pastel-orange-text) !important;
    border: 1px solid var(--pastel-orange-border);
}

.badge-pastel-teal {
    background: var(--pastel-teal) !important;
    color: var(--pastel-teal-text) !important;
    border: 1px solid var(--pastel-teal-border);
}

.badge-pastel-pink {
    background: var(--pastel-pink) !important;
    color: var(--pastel-pink-text) !important;
    border: 1px solid var(--pastel-pink-border);
}

/* ===== CARDS PASTEL ===== */
.card-pastel-success {
    background: var(--pastel-green) !important;
    border-color: var(--pastel-green-border) !important;
}

.card-pastel-warning {
    background: var(--pastel-yellow) !important;
    border-color: var(--pastel-yellow-border) !important;
}

.card-pastel-danger {
    background: var(--pastel-red) !important;
    border-color: var(--pastel-red-border) !important;
}

.card-pastel-info {
    background: var(--pastel-blue) !important;
    border-color: var(--pastel-blue-border) !important;
}

.card-pastel-primary {
    background: var(--pastel-indigo) !important;
    border-color: var(--pastel-indigo-border) !important;
}

/* ===== HEADER CARDS PASTEL ===== */
.card-header-pastel-success {
    background: var(--pastel-green) !important;
    color: var(--pastel-green-text) !important;
    border-bottom-color: var(--pastel-green-border) !important;
}

.card-header-pastel-warning {
    background: var(--pastel-yellow) !important;
    color: var(--pastel-yellow-text) !important;
    border-bottom-color: var(--pastel-yellow-border) !important;
}

.card-header-pastel-danger {
    background: var(--pastel-red) !important;
    color: var(--pastel-red-text) !important;
    border-bottom-color: var(--pastel-red-border) !important;
}

.card-header-pastel-info {
    background: var(--pastel-blue) !important;
    color: var(--pastel-blue-text) !important;
    border-bottom-color: var(--pastel-blue-border) !important;
}

.card-header-pastel-primary {
    background: var(--pastel-indigo) !important;
    color: var(--pastel-indigo-text) !important;
    border-bottom-color: var(--pastel-indigo-border) !important;
}

/* ===== BACKGROUNDS PASTEL ===== */
.bg-pastel-success { background: var(--pastel-green) !important; }
.bg-pastel-warning { background: var(--pastel-yellow) !important; }
.bg-pastel-danger { background: var(--pastel-red) !important; }
.bg-pastel-info { background: var(--pastel-blue) !important; }
.bg-pastel-primary { background: var(--pastel-indigo) !important; }
.bg-pastel-secondary { background: var(--pastel-gray) !important; }
.bg-pastel-purple { background: var(--pastel-purple) !important; }
.bg-pastel-orange { background: var(--pastel-orange) !important; }
.bg-pastel-teal { background: var(--pastel-teal) !important; }
.bg-pastel-pink { background: var(--pastel-pink) !important; }

/* ===== TEXTOS PASTEL ===== */
.text-pastel-success { color: var(--pastel-green-text) !important; }
.text-pastel-warning { color: var(--pastel-yellow-text) !important; }
.text-pastel-danger { color: var(--pastel-red-text) !important; }
.text-pastel-info { color: var(--pastel-blue-text) !important; }
.text-pastel-primary { color: var(--pastel-indigo-text) !important; }
.text-pastel-secondary { color: var(--pastel-gray-text) !important; }
.text-pastel-purple { color: var(--pastel-purple-text) !important; }
.text-pastel-orange { color: var(--pastel-orange-text) !important; }
.text-pastel-teal { color: var(--pastel-teal-text) !important; }
.text-pastel-pink { color: var(--pastel-pink-text) !important; }

/* ===== BORDES PASTEL ===== */
.border-pastel-success { border-color: var(--pastel-green-border) !important; }
.border-pastel-warning { border-color: var(--pastel-yellow-border) !important; }
.border-pastel-danger { border-color: var(--pastel-red-border) !important; }
.border-pastel-info { border-color: var(--pastel-blue-border) !important; }
.border-pastel-primary { border-color: var(--pastel-indigo-border) !important; }
.border-pastel-secondary { border-color: var(--pastel-gray-border) !important; }
.border-pastel-purple { border-color: var(--pastel-purple-border) !important; }
.border-pastel-orange { border-color: var(--pastel-orange-border) !important; }
.border-pastel-teal { border-color: var(--pastel-teal-border) !important; }
.border-pastel-pink { border-color: var(--pastel-pink-border) !important; }

/* ===== STAT CARDS MEJORADAS ===== */
.stat-card-pastel {
    border-radius: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-pastel:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-card-pastel.success {
    background: linear-gradient(135deg, #ffffff 0%, var(--pastel-green) 100%);
    border-left: 4px solid var(--pastel-green-border);
}

.stat-card-pastel.warning {
    background: linear-gradient(135deg, #ffffff 0%, var(--pastel-yellow) 100%);
    border-left: 4px solid var(--pastel-yellow-border);
}

.stat-card-pastel.danger {
    background: linear-gradient(135deg, #ffffff 0%, var(--pastel-red) 100%);
    border-left: 4px solid var(--pastel-red-border);
}

.stat-card-pastel.info {
    background: linear-gradient(135deg, #ffffff 0%, var(--pastel-blue) 100%);
    border-left: 4px solid var(--pastel-blue-border);
}

.stat-card-pastel.primary {
    background: linear-gradient(135deg, #ffffff 0%, var(--pastel-indigo) 100%);
    border-left: 4px solid var(--pastel-indigo-border);
}

/* ===== NIVELES DE RIESGO ===== */
.risk-level-low {
    background: var(--pastel-green);
    color: var(--pastel-green-text);
    border: 1px solid var(--pastel-green-border);
}

.risk-level-medium {
    background: var(--pastel-yellow);
    color: var(--pastel-yellow-text);
    border: 1px solid var(--pastel-yellow-border);
}

.risk-level-high {
    background: var(--pastel-orange);
    color: var(--pastel-orange-text);
    border: 1px solid var(--pastel-orange-border);
}

.risk-level-critical {
    background: var(--pastel-red);
    color: var(--pastel-red-text);
    border: 1px solid var(--pastel-red-border);
}

.risk-level-extreme {
    background: var(--pastel-pink);
    color: var(--pastel-pink-text);
    border: 1px solid var(--pastel-pink-border);
}

/* ===== ESTADOS DE DOCUMENTOS ===== */
.doc-status-draft {
    background: var(--pastel-gray);
    color: var(--pastel-gray-text);
    border: 1px solid var(--pastel-gray-border);
}

.doc-status-pending {
    background: var(--pastel-yellow);
    color: var(--pastel-yellow-text);
    border: 1px solid var(--pastel-yellow-border);
}

.doc-status-approved {
    background: var(--pastel-green);
    color: var(--pastel-green-text);
    border: 1px solid var(--pastel-green-border);
}

.doc-status-obsolete {
    background: var(--pastel-red);
    color: var(--pastel-red-text);
    border: 1px solid var(--pastel-red-border);
}

/* ===== ESTADOS DE CONTROLES ===== */
.control-implemented {
    background: var(--pastel-green);
    color: var(--pastel-green-text);
}

.control-partial {
    background: var(--pastel-yellow);
    color: var(--pastel-yellow-text);
}

.control-not-implemented {
    background: var(--pastel-red);
    color: var(--pastel-red-text);
}

.control-not-applicable {
    background: var(--pastel-gray);
    color: var(--pastel-gray-text);
}

/* ===== ESTADOS DE INCIDENTES ===== */
.incident-reported {
    background: var(--pastel-blue);
    color: var(--pastel-blue-text);
}

.incident-investigating {
    background: var(--pastel-yellow);
    color: var(--pastel-yellow-text);
}

.incident-resolved {
    background: var(--pastel-green);
    color: var(--pastel-green-text);
}

.incident-closed {
    background: var(--pastel-gray);
    color: var(--pastel-gray-text);
}

/* ===== PRIORIDADES ===== */
.priority-low {
    background: var(--pastel-teal);
    color: var(--pastel-teal-text);
    border: 1px solid var(--pastel-teal-border);
}

.priority-medium {
    background: var(--pastel-yellow);
    color: var(--pastel-yellow-text);
    border: 1px solid var(--pastel-yellow-border);
}

.priority-high {
    background: var(--pastel-orange);
    color: var(--pastel-orange-text);
    border: 1px solid var(--pastel-orange-border);
}

.priority-critical {
    background: var(--pastel-red);
    color: var(--pastel-red-text);
    border: 1px solid var(--pastel-red-border);
}

/* ===== BOTONES CON ESTILO MISO ===== */
.btn-miso {
    background-color: var(--miso-primary);
    border-color: var(--miso-primary);
    color: #fff;
}

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

.btn-outline-miso {
    border-color: var(--miso-primary);
    color: var(--miso-primary);
}

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

/* ===== TABLA HOVER SUTIL ===== */
.table-hover-pastel tbody tr:hover {
    background-color: var(--pastel-indigo);
}

/* ===== INDICADORES DE PROGRESO ===== */
.progress-pastel {
    background: var(--pastel-gray);
    border-radius: 0.5rem;
}

.progress-pastel .progress-bar-success {
    background: var(--pastel-green-border);
}

.progress-pastel .progress-bar-warning {
    background: var(--pastel-yellow-border);
}

.progress-pastel .progress-bar-danger {
    background: var(--pastel-red-border);
}

.progress-pastel .progress-bar-info {
    background: var(--pastel-blue-border);
}

/* ===== TIPOGRAFÍA UNIFICADA MISO ===== */

/* Font weights */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

/* Font sizes uniformes */
.fs-xs { font-size: var(--miso-font-size-xs) !important; }
.fs-sm { font-size: var(--miso-font-size-sm) !important; }
.fs-base { font-size: var(--miso-font-size-base) !important; }
.fs-md { font-size: var(--miso-font-size-md) !important; }
.fs-lg { font-size: var(--miso-font-size-lg) !important; }
.fs-xl { font-size: var(--miso-font-size-xl) !important; }
.fs-2xl { font-size: var(--miso-font-size-2xl) !important; }
.fs-3xl { font-size: var(--miso-font-size-3xl) !important; }
.fs-4xl { font-size: var(--miso-font-size-4xl) !important; }

/* Page titles */
.page-title {
    font-size: var(--miso-font-size-2xl);
    font-weight: 600;
    color: var(--miso-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle {
    font-size: var(--miso-font-size-base);
    color: #6b7280;
    font-weight: 400;
}

/* Section titles */
.section-title {
    font-size: var(--miso-font-size-lg);
    font-weight: 600;
    color: var(--miso-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--pastel-indigo-border);
}

/* Card specific typography */
.card .stat-value {
    font-size: var(--miso-font-size-3xl);
    font-weight: 700;
    line-height: 1.1;
}

.card .stat-label {
    font-size: var(--miso-font-size-sm);
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Table typography improvements */
.table-miso {
    font-size: var(--miso-font-size-base);
}

.table-miso thead th {
    font-size: var(--miso-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4b5563;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    padding: 0.875rem 1rem;
}

.table-miso tbody td {
    font-size: var(--miso-font-size-base);
    color: #374151;
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.table-miso tbody tr:hover {
    background: var(--pastel-indigo);
}

/* Form typography */
.form-miso .form-label {
    font-size: var(--miso-font-size-sm);
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.375rem;
}

.form-miso .form-control,
.form-miso .form-select {
    font-size: var(--miso-font-size-base);
    padding: 0.625rem 0.875rem;
}

.form-miso .form-text {
    font-size: var(--miso-font-size-xs);
    color: #6b7280;
}

/* Badge typography */
.badge-miso {
    font-size: var(--miso-font-size-xs);
    font-weight: 500;
    padding: 0.375em 0.75em;
    border-radius: 0.375rem;
    letter-spacing: 0.01em;
}

/* Alert typography */
.alert-miso {
    font-size: var(--miso-font-size-base);
}

.alert-miso .alert-heading {
    font-size: var(--miso-font-size-lg);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* List items typography */
.list-miso .list-group-item {
    font-size: var(--miso-font-size-base);
    padding: 0.875rem 1rem;
}

.list-miso .list-group-item .item-title {
    font-size: var(--miso-font-size-base);
    font-weight: 500;
    color: var(--miso-primary);
}

.list-miso .list-group-item .item-subtitle {
    font-size: var(--miso-font-size-sm);
    color: #6b7280;
}

/* Breadcrumb typography */
.breadcrumb-miso {
    font-size: var(--miso-font-size-sm);
}

.breadcrumb-miso .breadcrumb-item {
    color: #6b7280;
}

.breadcrumb-miso .breadcrumb-item.active {
    color: var(--miso-primary);
    font-weight: 500;
}

/* Navigation typography */
.nav-miso .nav-link {
    font-size: var(--miso-font-size-base);
    font-weight: 500;
    color: #4b5563;
}

.nav-miso .nav-link.active {
    color: var(--miso-primary);
    font-weight: 600;
}

/* Code and preformatted text */
code {
    font-size: var(--miso-font-size-sm);
    padding: 0.2em 0.4em;
    background: #f3f4f6;
    border-radius: 0.25rem;
    color: #dc2626;
}

pre {
    font-size: var(--miso-font-size-sm);
    background: #1f2937;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
}

/* Tooltips and popovers */
.tooltip {
    font-size: var(--miso-font-size-sm);
}

.popover {
    font-size: var(--miso-font-size-base);
}

.popover-header {
    font-size: var(--miso-font-size-base);
    font-weight: 600;
}

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

.empty-state .empty-icon {
    font-size: 3rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

.empty-state .empty-title {
    font-size: var(--miso-font-size-lg);
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.empty-state .empty-description {
    font-size: var(--miso-font-size-base);
    color: #6b7280;
    max-width: 24rem;
    margin: 0 auto;
}

/* Data display typography */
.data-label {
    font-size: var(--miso-font-size-xs);
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.data-value {
    font-size: var(--miso-font-size-base);
    font-weight: 500;
    color: #111827;
}

.data-value-lg {
    font-size: var(--miso-font-size-2xl);
    font-weight: 700;
    color: var(--miso-primary);
}

/* Timestamp/date typography */
.timestamp {
    font-size: var(--miso-font-size-xs);
    color: #9ca3af;
}

/* Status text */
.status-text {
    font-size: var(--miso-font-size-sm);
    font-weight: 500;
}

/* User info display */
.user-name {
    font-size: var(--miso-font-size-base);
    font-weight: 500;
    color: #111827;
}

.user-role {
    font-size: var(--miso-font-size-xs);
    color: #6b7280;
}

/* Responsive typography adjustments */
@media (max-width: 768px) {
    :root {
        --miso-font-size-4xl: 1.5rem;
        --miso-font-size-3xl: 1.25rem;
        --miso-font-size-2xl: 1.125rem;
        --miso-font-size-xl: 1rem;
    }
    
    .stat-number {
        font-size: 1.5rem !important;
    }
    
    .card .stat-value {
        font-size: 1.25rem;
    }
}