/* ====================================================================
   IDENTIDAD CORPORATIVA UNIFICADA - ERP MIRLO CONSTRUCCIONES
   Estilos base que definen la identidad visual en todas las páginas
   ==================================================================== */

/* ====================================================================
   VARIABLES CORPORATIVAS
   ==================================================================== */
:root {
    /* Colores Corporativos */
    --mirlo-primary: #000000;        /* Negro principal */
    --mirlo-accent: #F39C12;        /* Naranja corporativo */
    --mirlo-gray: #6c757d;          /* Gris medio */
    --mirlo-white: #ffffff;         /* Blanco */
    --mirlo-gray-light: #f8f9fa;    /* Gris claro */
    --mirlo-gray-dark: #343a40;    /* Gris oscuro */
    
    /* Colores de Estado */
    --mirlo-success: #28a745;       /* Verde */
    --mirlo-warning: #ffc107;       /* Amarillo */
    --mirlo-danger: #dc3545;        /* Rojo */
    --mirlo-info: #17a2b8;          /* Azul */
    
    /* Tipografía - Reducida para evitar efecto zoom */
    --mirlo-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mirlo-font-size-base: 14px;
    --mirlo-font-size-sm: 12px;
    --mirlo-font-size-lg: 16px;
    
    /* Espaciado - Más espacio en blanco para diseño limpio */
    --mirlo-spacing-xs: 0.5rem;     /* 8px */
    --mirlo-spacing-sm: 0.875rem;   /* 14px */
    --mirlo-spacing-md: 1.25rem;    /* 20px */
    --mirlo-spacing-lg: 2rem;       /* 32px */
    --mirlo-spacing-xl: 3rem;       /* 48px */
    
    /* Bordes y Sombras - Más sutiles y limpios */
    --mirlo-border-radius: 6px;
    --mirlo-border-radius-lg: 8px;
    --mirlo-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --mirlo-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.1);
    --mirlo-shadow-none: none;
}

/* ====================================================================
   BODY Y CONTENEDOR PRINCIPAL - 95% ANCHO
   ==================================================================== */
.mirlo-body {
    font-family: var(--mirlo-font);
    font-size: var(--mirlo-font-size-base);
    background-color: #f5f7fa; /* Fondo más claro y limpio */
    color: #212529;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    line-height: 1.6; /* Mejor legibilidad */
}

.mirlo-container {
    width: 95vw; /* Siempre 95% del ancho de la ventana */
    max-width: none; /* Sin límite de ancho máximo */
    margin: 0 auto;
    padding: var(--mirlo-spacing-lg) var(--mirlo-spacing-md);
    padding-top: 0.5rem !important; /* Solo espaciado mínimo - el body ya tiene el padding-top para el navbar */
    box-sizing: border-box; /* Incluir padding en el ancho */
}

/* ====================================================================
   HEADER DE PÁGINA ESTÁNDAR - IGUAL A PLAN_RECAUDOS.PHP
   ==================================================================== */
.mirlo-page-header {
    background: #ffffff;
    color: #212529;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.75rem !important;
    margin-top: 0 !important;
    border-radius: var(--mirlo-border-radius-lg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.mirlo-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mirlo-spacing-md);
}

.mirlo-header-title-section {
    display: flex;
    align-items: center;
    gap: var(--mirlo-spacing-sm);
    flex: 1;
}

.mirlo-page-icon {
    font-size: 1.75rem; /* Icono más grande */
    color: #000000; /* Color primario negro */
    margin-right: 0.5rem; /* Mejor espaciado */
    display: inline-flex;
    align-items: center;
}

.mirlo-btn-back {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: #495057;
    width: 36px;
    height: 36px;
    border-radius: var(--mirlo-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mirlo-btn-back:hover {
    background: rgba(108, 117, 125, 0.3);
}

.mirlo-page-title {
    font-family: 'Poppins', sans-serif; /* Fuente gruesa y bonita como plan_recaudos.php */
    font-size: 2rem; /* Más grande */
    font-weight: 700; /* Fuente más gruesa */
    color: #000000; /* Color primario negro */
    margin: 0;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
}

.mirlo-page-description {
    font-family: 'Poppins', sans-serif; /* Misma fuente */
    font-size: 1.1rem; /* Tamaño igual a plan_recaudos.php */
    color: #6c757d; /* Color igual a plan_recaudos.php */
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

.mirlo-header-actions {
    display: flex;
    gap: var(--mirlo-spacing-sm);
    align-items: center;
}

/* ====================================================================
   CONTENIDO PRINCIPAL - Siempre ocupa 95% del ancho
   ==================================================================== */
.mirlo-main-content {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    padding: 0;
    margin-bottom: var(--mirlo-spacing-xl);
    box-sizing: border-box;
}

/* ====================================================================
   BOTONES ESTÁNDAR - PALETA FIJA, FORMA Y TAMAÑOS UNIFICADOS
   ====================================================================
   Forma: border-radius 4px (bordes rectos). Tamaños: sm / md / lg.
   Colores semánticos fijos (no parametrizables por tenant).
   HOVER (estándar global): mismo color del botón/pestaña, solo más brillante
   (filter: brightness(1.12)). No cambiar a otro color ni usar translateY.
   La app se usa mucho en touchscreen; el hover debe ser sutil y legible.
   ==================================================================== */
.mirlo-btn {
    font-family: var(--mirlo-font);
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    background-color: #6c757d;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mirlo-btn i,
.mirlo-btn span {
    color: #fff !important;
}

/* Texto e iconos blancos en botones interactivos (evita combinaciones ilegibles) */
.btn:not(.btn-light):not(.btn-link),
.btn:not(.btn-light):not(.btn-link) i,
.btn:not(.btn-light):not(.btn-link) span,
.btn:not(.btn-light):not(.btn-link) .bi,
.btn-unified,
.btn-unified i,
.btn-unified span,
.btn-unified .bi {
    color: #ffffff !important;
}

/* Hover estándar: mismo color más brillante (legible en touch y desktop). Sin cambio de color ni translate. */
.mirlo-btn:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

.mirlo-btn-md {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

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

/* Primario: acción principal de pantalla */
.mirlo-btn-primary {
    background-color: #2563eb !important;
    color: #fff;
    font-weight: 600;
    border: none;
}

.mirlo-btn-primary:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Acento: acción alternativa (exportar, ver más) */
.mirlo-btn-accent {
    background-color: #0d9488 !important;
    color: #fff;
    font-weight: 600;
    border: none;
}

.mirlo-btn-accent:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Secundario / neutro: cancelar, cerrar */
.mirlo-btn-secondary {
    background-color: #6c757d;
    color: #fff;
    font-weight: 600;
    border: none;
}

.mirlo-btn-secondary:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Confirmar / Guardar / Crear: verde */
.mirlo-btn-confirm {
    background-color: #16a34a !important;
    color: #fff;
    font-weight: 600;
    border: none;
}

.mirlo-btn-confirm:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Editar / Actualizar: azul */
.mirlo-btn-edit {
    background-color: #2563eb !important;
    color: #fff;
    font-weight: 600;
    border: none;
}

.mirlo-btn-edit:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Rechazar / Declinar: naranja */
.mirlo-btn-reject {
    background-color: #ea580c !important;
    color: #fff;
    font-weight: 600;
    border: none;
}

.mirlo-btn-reject:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Eliminar / Borrar: rojo */
.mirlo-btn-delete {
    background-color: #dc3545 !important;
    color: #fff;
    font-weight: 600;
    border: none;
}

.mirlo-btn-delete:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Success / Danger / Warning / Info / Gray: semántica fija */
.mirlo-btn-success {
    background-color: #16a34a;
    color: #fff;
    font-weight: 600;
}

.mirlo-btn-success:hover {
    filter: brightness(1.12);
}

.mirlo-btn-warning {
    background-color: #e6a800;
    color: #fff;
    font-weight: 500;
}

.mirlo-btn-warning:hover {
    filter: brightness(1.12);
}

.mirlo-btn-danger {
    background-color: #dc3545;
    color: #fff;
    font-weight: 500;
}

.mirlo-btn-danger:hover {
    filter: brightness(1.12);
}

.mirlo-btn-info {
    background-color: #0ea5e9;
    color: #fff;
    font-weight: 600;
}

.mirlo-btn-info:hover {
    filter: brightness(1.12);
}

.mirlo-btn-purple {
    background-color: #7c3aed;
    color: #fff;
    font-weight: 600;
}

.mirlo-btn-purple:hover {
    filter: brightness(1.12);
}

.mirlo-btn-gray {
    background-color: #6c757d;
    color: #fff;
    font-weight: 600;
}

.mirlo-btn-gray:hover {
    filter: brightness(1.12);
}

/* Botones "outline" estandarizados como sólidos (sin fondo blanco) */
.mirlo-btn-outline {
    background-color: #6c757d;
    border: 1px solid;
    font-weight: 600;
    color: #fff !important;
}

.mirlo-btn-outline-primary {
    border-color: #2563eb;
    background-color: #2563eb;
    color: #fff !important;
}

.mirlo-btn-outline-primary:hover {
    filter: brightness(1.12);
}

.mirlo-btn-outline-accent {
    border-color: #0d9488;
    background-color: #0d9488;
    color: #fff !important;
}

.mirlo-btn-outline-accent:hover {
    filter: brightness(1.12);
}

.mirlo-btn-outline-secondary {
    border-color: #6c757d;
    background-color: #6c757d;
    color: #fff !important;
}

.mirlo-btn-outline-secondary:hover {
    filter: brightness(1.12);
}

.mirlo-btn-outline-warning {
    border-color: #e6a800;
    background-color: #e6a800;
    color: #fff !important;
}

.mirlo-btn-outline-warning:hover {
    filter: brightness(1.12);
}

.mirlo-btn-outline-info {
    border-color: #0ea5e9;
    background-color: #0ea5e9;
    color: #fff !important;
}

/* Regla fija UI: en modales el texto de botones siempre blanco (evita "texto invisible"). */
.modal .mirlo-btn,
.modal .btn:not(.btn-close):not(.btn-link) {
    color: #fff !important;
}

.mirlo-btn-outline-info:hover {
    filter: brightness(1.12);
}

.mirlo-btn-outline-success {
    border-color: #16a34a;
    background-color: #16a34a;
    color: #fff !important;
}

.mirlo-btn-outline-success:hover {
    filter: brightness(1.12);
}

.mirlo-btn-outline-danger {
    border-color: #dc3545;
    background-color: #dc3545;
    color: #fff !important;
}

.mirlo-btn-outline-danger:hover {
    filter: brightness(1.12);
}

.mirlo-btn-outline-gray {
    border-color: #6c757d;
    background-color: #6c757d;
    color: #fff !important;
}

.mirlo-btn-outline-gray:hover {
    filter: brightness(1.12);
}

/* Filtros rápidos: violeta pastel (baja saturación) */
/* Filtros rápidos: violeta más oscuro (sin saturar) */
.mirlo-btn-outline-pastel-violet {
    border-color: #6b5b95;
    background-color: #8b7ab0;
    color: #ffffff !important;
}

.mirlo-btn-outline-pastel-violet:hover {
    filter: brightness(1.12);
}

.mirlo-btn-outline-confirm {
    border-color: #16a34a;
    background-color: #16a34a;
    color: #fff !important;
}

.mirlo-btn-outline-confirm:hover {
    filter: brightness(1.12);
}

.mirlo-btn-outline-edit {
    border-color: #2563eb;
    background-color: #2563eb;
    color: #fff !important;
}

.mirlo-btn-outline-edit:hover {
    filter: brightness(1.12);
}

.mirlo-btn-outline-reject {
    border-color: #ea580c;
    background-color: #ea580c;
    color: #fff !important;
}

.mirlo-btn-outline-reject:hover {
    filter: brightness(1.12);
}

.mirlo-btn-outline-delete {
    border-color: #dc3545;
    background-color: #dc3545;
    color: #fff !important;
}

.mirlo-btn-outline-delete:hover {
    filter: brightness(1.12);
}

/* ====================================================================
   BADGES ESTÁNDAR
   ==================================================================== */
.mirlo-badge {
    font-family: var(--mirlo-font);
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 6px; /* Más redondeado y moderno */
    display: inline-block;
    font-size: 0.75rem; /* 12px - Reducido */
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.mirlo-badge-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.6875rem; /* 11px - Más pequeño */
    font-weight: 600;
}

.mirlo-badge-md {
    padding: 0.375rem 0.75rem;
    font-size: var(--mirlo-font-size-sm);
}

.mirlo-badge-lg {
    padding: 0.5rem 1rem;
    font-size: var(--mirlo-font-size-base);
}

.mirlo-badge-primary {
    background-color: var(--mirlo-primary);
    color: var(--mirlo-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.mirlo-badge-accent {
    background-color: var(--mirlo-accent);
    color: var(--mirlo-white);
    box-shadow: 0 2px 4px rgba(243, 156, 18, 0.3);
}

.mirlo-badge-success {
    background-color: var(--mirlo-success); /* VERDE - Aprobado, confirmado, positivo */
    color: var(--mirlo-white);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.mirlo-badge-warning {
    background-color: #e6a800;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
}

.mirlo-badge-danger {
    background-color: #DC3545; /* ROJO - Vencido, cancelado, negativo, deuda */
    color: var(--mirlo-white);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.mirlo-badge-info {
    background-color: var(--mirlo-info);
    color: var(--mirlo-white);
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

.mirlo-badge-gray {
    background-color: var(--mirlo-gray);
    color: var(--mirlo-white);
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
}

/* ====================================================================
   CARDS ESTÁNDAR - Diseño limpio y minimalista
   ==================================================================== */
.mirlo-card {
    background-color: var(--mirlo-white);
    border: 1px solid #e5e7eb; /* Borde más sutil */
    border-radius: var(--mirlo-border-radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); /* Sombra más sutil */
    margin-bottom: var(--mirlo-spacing-lg);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.mirlo-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mirlo-card-header {
    padding: 0.5rem 1rem !important;
    border-bottom: 1px solid #f3f4f6; /* Borde más suave */
    background-color: #ffffff;
    min-height: auto !important;
}

.mirlo-card-header.mirlo-card-header-default {
    background: var(--card-header-bg, #000000) !important;
    color: var(--card-header-color, #ffffff) !important;
    padding: 0.5rem 1rem !important;
    min-height: auto !important;
}

.mirlo-card-header.mirlo-card-header-default h3,
.mirlo-card-header.mirlo-card-header-default .mirlo-card-title {
    color: var(--card-header-color, #ffffff) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.mirlo-card-header.mirlo-card-header-primary {
    padding: 0.4rem 1rem !important;
    min-height: auto !important;
}

.mirlo-card-header.mirlo-card-header-primary h3,
.mirlo-card-header.mirlo-card-header-primary .mirlo-card-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Card sin header para filtros - Por defecto oculto para secciones de filtros */
.mirlo-card-header-none,
.mirlo-card-filter .mirlo-card-header {
    display: none !important;
}

/* Para cards de filtros, no mostrar header automáticamente */
.mirlo-card-filter {
    border: none;
    box-shadow: none;
    margin-bottom: var(--mirlo-spacing-md);
}

.mirlo-card-header-primary {
    background: var(--card-header-bg, #000000) !important;
    color: var(--card-header-color, #ffffff) !important;
    border-bottom: none;
    padding: 0.4rem 1rem !important;
    min-height: auto !important;
}

.mirlo-card-header-primary *,
.mirlo-card-header-primary h3,
.mirlo-card-header-primary .mirlo-card-title,
.mirlo-card-header-primary .mirlo-card-title *,
.mirlo-card-header-primary button,
.mirlo-card-header-primary button *,
.mirlo-card-header-primary .mirlo-btn,
.mirlo-card-header-primary .mirlo-btn *,
.mirlo-card-header-primary .mirlo-btn i,
.mirlo-card-header-primary a,
.mirlo-card-header-primary a *,
.mirlo-card-header-primary i,
.mirlo-card-header-primary span,
.mirlo-card-header-primary div {
    color: var(--card-header-color, #ffffff) !important;
}

.mirlo-card-header-accent {
    background: #FF7700 !important; /* Naranja sólido simple */
    color: #ffffff !important;
    border-bottom: none;
    padding: 0.5rem 1rem !important;
    min-height: auto !important;
}

.mirlo-card-header-accent *,
.mirlo-card-header-accent h3,
.mirlo-card-header-accent .mirlo-card-title,
.mirlo-card-header-accent .mirlo-card-title *,
.mirlo-card-header-accent button,
.mirlo-card-header-accent button *,
.mirlo-card-header-accent .mirlo-btn,
.mirlo-card-header-accent .mirlo-btn *,
.mirlo-card-header-accent .mirlo-btn i,
.mirlo-card-header-accent a,
.mirlo-card-header-accent a *,
.mirlo-card-header-accent i,
.mirlo-card-header-accent span,
.mirlo-card-header-accent div,
.mirlo-card-header-accent small,
.mirlo-card-header-accent select,
.mirlo-card-header-accent option {
    color: #ffffff !important;
}

.mirlo-card-header-success {
    background-color: var(--mirlo-success);
    color: var(--mirlo-white);
    border-bottom: none;
}

.mirlo-card-header-warning {
    background-color: var(--mirlo-warning);
    color: #212529;
    border-bottom: none;
}

.mirlo-card-header-danger {
    background-color: var(--mirlo-danger);
    color: var(--mirlo-white);
    border-bottom: none;
}

.mirlo-card-header-info {
    background-color: var(--mirlo-info);
    color: var(--mirlo-white);
    border-bottom: none;
}

.mirlo-card-title {
    font-family: var(--mirlo-font);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: inherit;
    letter-spacing: -0.01em;
}

/* Asegurar que el título en headers con fondo negro sea blanco */
.mirlo-card-header-primary .mirlo-card-title,
.mirlo-card-header-primary .mirlo-card-title *,
.mirlo-card-header[style*="background"] .mirlo-card-title,
.mirlo-card-header[style*="#000"] .mirlo-card-title,
.mirlo-card-header[style*="black"] .mirlo-card-title {
    color: #ffffff !important;
}

.mirlo-card-body {
    padding: var(--mirlo-spacing-md);
    line-height: 1.6;
}

/* Headers de cards con colores variados - Más limpios */
.mirlo-card-header-success {
    background-color: var(--mirlo-success);
    color: var(--mirlo-white);
    border-bottom: none;
    padding: var(--mirlo-spacing-md) var(--mirlo-spacing-lg);
}

.mirlo-card-header-warning {
    background-color: var(--mirlo-warning);
    color: #212529;
    border-bottom: none;
    padding: var(--mirlo-spacing-md) var(--mirlo-spacing-lg);
}

.mirlo-card-header-danger {
    background-color: var(--mirlo-danger);
    color: var(--mirlo-white);
    border-bottom: none;
    padding: var(--mirlo-spacing-md) var(--mirlo-spacing-lg);
}

.mirlo-card-header-info {
    background-color: var(--mirlo-info);
    color: var(--mirlo-white);
    border-bottom: none;
    padding: var(--mirlo-spacing-md) var(--mirlo-spacing-lg);
}

.mirlo-card-footer {
    padding: var(--mirlo-spacing-md) var(--mirlo-spacing-lg);
    background-color: #f9fafb;
    border-top: 1px solid #f3f4f6;
}

/* ====================================================================
   TABLAS ESTÁNDAR - Diseño limpio y ordenado
   ==================================================================== */
.mirlo-table-container {
    background-color: var(--mirlo-white);
    border-radius: var(--mirlo-border-radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); /* Sombra más sutil */
    overflow-x: auto;
    margin-bottom: var(--mirlo-spacing-lg);
    border: 1px solid #e5e7eb;
}

.mirlo-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--mirlo-font);
    font-size: var(--mirlo-font-size-base);
}

/* Legacy inline-style theads: forzar al color del tenant */
table thead[style*="background"],
table thead.bg-dark,
table thead[class*="bg-dark"],
table thead[class*="dark"] {
    background: var(--table-header-bg, #000000) !important;
}

table thead[style*="background"] th,
table thead[style*="background"] td,
table thead[style*="background"] *,
table thead.bg-dark th,
table thead.bg-dark td,
table thead.bg-dark *,
table thead[class*="bg-dark"] th,
table thead[class*="bg-dark"] td,
table thead[class*="bg-dark"] *,
table thead[class*="dark"] th,
table thead[class*="dark"] td,
table thead[class*="dark"] * {
    color: var(--table-header-color, #ffffff) !important;
}

.mirlo-table-header,
thead.mirlo-table-header,
table thead.mirlo-table-header {
    background: var(--table-header-bg, #000000) !important;
    color: var(--table-header-color, #ffffff) !important;
}

.mirlo-table-header th,
.mirlo-table-header td,
.mirlo-table-header *,
thead.mirlo-table-header th,
thead.mirlo-table-header td,
thead.mirlo-table-header *,
table thead.mirlo-table-header th,
table thead.mirlo-table-header td,
table thead.mirlo-table-header * {
    color: var(--table-header-color, #ffffff) !important;
}

.mirlo-table-header th,
thead.mirlo-table-header th,
table thead.mirlo-table-header th {
    padding: var(--mirlo-spacing-sm) var(--mirlo-spacing-md);
    font-weight: 600;
    font-size: 0.8125rem;
    text-align: left;
    border-bottom: none;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff !important; /* Texto blanco para headers con fondo negro */
}

.mirlo-table-body tr {
    border-bottom: 1px solid #f3f4f6; /* Borde más suave */
    transition: background-color 0.15s ease;
}

.mirlo-table-body tr:last-child {
    border-bottom: none;
}

.mirlo-table-body tr:hover {
    background-color: #f9fafb; /* Hover más sutil */
}

.mirlo-table-body td {
    padding: var(--mirlo-spacing-sm) var(--mirlo-spacing-md);
    color: #374151;
    font-size: var(--mirlo-font-size-base);
    vertical-align: middle;
}

/* ====================================================================
   MODALES ESTÁNDAR
   ==================================================================== */
.mirlo-modal .modal-content {
    border-radius: var(--mirlo-border-radius-lg);
    border: none;
    box-shadow: var(--mirlo-shadow-lg);
}

.mirlo-modal-header {
    padding: var(--mirlo-spacing-sm) var(--mirlo-spacing-md);
    border-bottom: none;
    border-radius: var(--mirlo-border-radius-lg) var(--mirlo-border-radius-lg) 0 0;
    background-color: var(--modal-header-bg, #000000) !important;
    color: var(--modal-title-color, #ffffff) !important;
}

.mirlo-modal-header-primary {
    background-color: var(--modal-header-bg, #000000) !important;
    color: var(--modal-title-color, #ffffff) !important;
    padding: var(--mirlo-spacing-sm) var(--mirlo-spacing-md);
}

/* Botón cerrar visible y consistente en todos los modales */
.mirlo-modal .btn-close,
.mirlo-modal-header .btn-close,
.mirlo-modal-header-primary .btn-close {
    display: block !important;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.mirlo-modal-header-accent {
    background-color: var(--modal-header-bg, #000000) !important;
    color: var(--modal-title-color, #ffffff) !important;
    padding: 0.5rem 1rem !important;
    min-height: auto !important;
}

.mirlo-modal-header-accent *,
.mirlo-modal-header-accent h5,
.mirlo-modal-header-accent .modal-title,
.mirlo-modal-header-accent .modal-title *,
.mirlo-modal-header-accent i,
.mirlo-modal-header-accent span,
.mirlo-modal-header-accent div {
    color: var(--modal-title-color, #ffffff) !important;
}

.mirlo-modal-header-success {
    background-color: var(--modal-header-bg, #000000) !important;
    color: var(--modal-title-color, #ffffff) !important;
}

.mirlo-modal-header-warning {
    background-color: var(--modal-header-bg, #000000) !important;
    color: var(--modal-title-color, #ffffff) !important;
}

.mirlo-modal-header-danger {
    background-color: var(--modal-header-bg, #000000) !important;
    color: var(--modal-title-color, #ffffff) !important;
}

.mirlo-modal-header-info {
    background-color: var(--modal-header-bg, #000000) !important;
    color: var(--modal-title-color, #ffffff) !important;
}

/* Título del modal - Blanco cuando el header es primary (negro sólido) */
.mirlo-modal-header-primary .mirlo-modal-title,
.mirlo-modal-header-primary .modal-title,
.mirlo-modal-header-primary h5 {
    color: var(--mirlo-white) !important; /* Siempre blanco para headers negros */
}

.mirlo-modal-title {
    font-family: var(--mirlo-font);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--mirlo-white); /* Blanco por defecto en headers primarios */
    letter-spacing: -0.01em;
}

.mirlo-modal-body {
    padding: var(--mirlo-spacing-md);
    line-height: 1.6;
}

.mirlo-modal-footer {
    padding: var(--mirlo-spacing-md) var(--mirlo-spacing-lg);
    background-color: #f9fafb;
    border-top: 1px solid #f3f4f6;
    border-radius: 0 0 var(--mirlo-border-radius-lg) var(--mirlo-border-radius-lg);
}

/* ====================================================================
   INDICADORES KPI - Recuadros simples con color solo en el contorno (borde)
   ==================================================================== */
.mirlo-status,
.mirlo-kpi-indicator {
    display: flex;
    flex-direction: row; /* Layout horizontal */
    align-items: center;
    justify-content: space-between;
    font-family: 'Poppins', sans-serif; /* Misma fuente para todos */
    font-weight: 600;
    padding: 0.75rem 1rem; /* Más delgado verticalmente */
    border-radius: var(--mirlo-border-radius);
    background-color: #ffffff; /* Fondo blanco por defecto - Se sobrescribe en clases específicas */
    border: 3px solid #dee2e6; /* Borde por defecto - Se sobrescribe en clases específicas */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    min-width: 200px;
    width: 100%;
    gap: var(--mirlo-spacing-md); /* Espacio entre icono y contenido */
}

.mirlo-kpi-icon {
    font-size: 2rem; /* Icono más pequeño para indicadores más delgados */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* No se encoge */
}

.mirlo-kpi-icon i {
    font-size: inherit;
    line-height: 1;
}

.mirlo-kpi-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1; /* Ocupa el espacio restante */
}

.mirlo-status-value,
.mirlo-kpi-value {
    font-size: 1.35rem; /* Valor ligeramente más pequeño */
    font-weight: 700;
    color: #212529; /* Color por defecto (se sobrescribe en indicadores específicos) */
    margin-bottom: 0.15rem; /* Menos espacio entre valor y etiqueta */
    line-height: 1.2;
    order: 1; /* Valor primero (arriba) */
}

.mirlo-status-label,
.mirlo-kpi-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529; /* Color por defecto (se sobrescribe en indicadores específicos) */
    line-height: 1.4;
    order: 2; /* Etiqueta después (abajo) */
    margin-top: 0;
}

/* Colores sólidos con gradiente sutil - Usando colores corporativos estándar */
/* PRIMARY: Azul - Para información general, registros, etc. */
.mirlo-status-primary,
.mirlo-kpi-primary {
    border-color: #0d6efd !important;
    background: linear-gradient(135deg, #4dabf7, #0d6efd, #0a58ca) !important; /* Azul con gradiente sutil */
    border-width: 2px !important;
}
.mirlo-kpi-primary .mirlo-kpi-icon i,
.mirlo-kpi-primary .mirlo-kpi-icon,
.mirlo-kpi-primary .mirlo-kpi-value,
.mirlo-kpi-primary .mirlo-kpi-label {
    color: #ffffff !important; /* Texto e icono blanco sobre fondo azul */
}

.mirlo-status-accent,
.mirlo-kpi-accent {
    border-color: #F39C12 !important;
    background: linear-gradient(135deg, #F8C471, #F39C12, #E67E22) !important; /* Naranja con gradiente sutil */
    border-width: 2px !important;
}
.mirlo-kpi-accent .mirlo-kpi-icon i,
.mirlo-kpi-accent .mirlo-kpi-icon,
.mirlo-kpi-accent .mirlo-kpi-value,
.mirlo-kpi-accent .mirlo-kpi-label {
    color: #ffffff !important; /* Texto e icono blanco sobre fondo naranja */
}

/* SUCCESS: Verde - Para totales, registros completados, positivos */
.mirlo-status-success,
.mirlo-kpi-success {
    border-color: #28a745 !important;
    background: linear-gradient(135deg, #52c975, #28a745, #218838) !important; /* Verde con gradiente sutil - Para totales */
    border-width: 2px !important;
}
.mirlo-kpi-success .mirlo-kpi-icon i,
.mirlo-kpi-success .mirlo-kpi-icon,
.mirlo-kpi-success .mirlo-kpi-value,
.mirlo-kpi-success .mirlo-kpi-label {
    color: #ffffff !important; /* Texto e icono blanco sobre fondo verde */
}

/* INFO: Verde - Para totales, registros completados, positivos */
.mirlo-status-info,
.mirlo-kpi-info {
    border-color: #28a745 !important;
    background: linear-gradient(135deg, #52c975, #28a745, #218838) !important; /* Verde con gradiente sutil - Para totales */
    border-width: 2px !important;
}
.mirlo-kpi-info .mirlo-kpi-icon i,
.mirlo-kpi-info .mirlo-kpi-icon,
.mirlo-kpi-info .mirlo-kpi-value,
.mirlo-kpi-info .mirlo-kpi-label {
    color: #ffffff !important; /* Texto e icono blanco sobre fondo verde */
}

/* WARNING: Naranja - Para advertencias, pendientes, en proceso */
.mirlo-status-warning,
.mirlo-kpi-warning {
    border-color: #F39C12 !important;
    background: linear-gradient(135deg, #F8C471, #F39C12, #E67E22) !important; /* Naranja con gradiente sutil - Para pendientes */
    border-width: 2px !important;
}
.mirlo-kpi-warning .mirlo-kpi-icon i,
.mirlo-kpi-warning .mirlo-kpi-icon,
.mirlo-kpi-warning .mirlo-kpi-value,
.mirlo-kpi-warning .mirlo-kpi-label {
    color: #ffffff !important; /* Texto e icono blanco sobre fondo naranja */
}

/* DANGER: Rojo - Para cancelaciones, eliminaciones, saldos negativos, deudas, pagos pendientes */
.mirlo-status-danger,
.mirlo-kpi-danger {
    border-color: #dc3545 !important;
    background: linear-gradient(135deg, #e57373, #dc3545, #c82333) !important; /* Rojo con gradiente sutil */
    border-width: 2px !important;
}
.mirlo-kpi-danger .mirlo-kpi-icon i,
.mirlo-kpi-danger .mirlo-kpi-icon,
.mirlo-kpi-danger .mirlo-kpi-value,
.mirlo-kpi-danger .mirlo-kpi-label {
    color: #ffffff !important; /* Texto e icono blanco sobre fondo rojo */
}

.mirlo-status-gray,
.mirlo-kpi-gray {
    border-color: #6c757d !important;
    background: linear-gradient(135deg, #9ca3af, #6c757d, #495057) !important; /* Gris con gradiente sutil */
    border-width: 2px !important;
}
.mirlo-kpi-gray .mirlo-kpi-icon i,
.mirlo-kpi-gray .mirlo-kpi-icon,
.mirlo-kpi-gray .mirlo-kpi-value,
.mirlo-kpi-gray .mirlo-kpi-label {
    color: #ffffff !important; /* Texto e icono blanco sobre fondo gris */
}

.mirlo-status-purple,
.mirlo-kpi-purple {
    border-color: #6f42c1 !important;
    background: linear-gradient(135deg, #9d7ce8, #6f42c1, #5a32a3) !important; /* Morado con gradiente sutil */
    border-width: 2px !important;
}
.mirlo-kpi-purple .mirlo-kpi-icon i,
.mirlo-kpi-purple .mirlo-kpi-icon,
.mirlo-kpi-purple .mirlo-kpi-value,
.mirlo-kpi-purple .mirlo-kpi-label {
    color: #ffffff !important; /* Texto e icono blanco sobre fondo morado */
}

/* Indicadores de estado pequeños (mantener compatibilidad) */
.mirlo-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.mirlo-status-sm .mirlo-status-dot {
    width: 6px;
    height: 6px;
}

.mirlo-status-lg .mirlo-status-dot {
    width: 10px;
    height: 10px;
}

.mirlo-status-primary .mirlo-status-dot {
    background-color: var(--mirlo-primary);
}

.mirlo-status-accent .mirlo-status-dot {
    background-color: var(--mirlo-accent);
}

.mirlo-status-success .mirlo-status-dot {
    background-color: var(--mirlo-success);
}

.mirlo-status-warning .mirlo-status-dot {
    background-color: var(--mirlo-warning);
}

.mirlo-status-danger .mirlo-status-dot {
    background-color: var(--mirlo-danger);
}

.mirlo-status-info .mirlo-status-dot {
    background-color: var(--mirlo-info);
}

.mirlo-status-text {
    font-size: 0.875rem;
    color: var(--mirlo-white); /* Fuente siempre blanca para consistencia */
    font-weight: 500;
}

/* ====================================================================
   TARJETAS KPI UNIFICADAS - ÚNICA FUENTE DE DISEÑO PARA TODOS LOS INDICADORES
   Todas las tarjetas KPI del ERP se generan con mirloKpiCard() en components/ui_kit.php
   y heredan este bloque de estilos. Para cambiar forma, colores o diseño de cualquier
   KPI en toda la app, modificar solo esta sección y assets/css/ui-identity.css.
   Variantes: .kpi-primary | .kpi-success | .kpi-danger | .kpi-warning | .kpi-info | .kpi-purple
   ==================================================================== */
.mirlo-kpi-card,
.mirlo-kpi-indicator.mirlo-kpi-card {
    position: relative;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 100px;
}

.mirlo-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
}

.mirlo-kpi-card .mirlo-kpi-icon,
.mirlo-kpi-card .kpi-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #ffffff !important;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    border: none !important;
}

.mirlo-kpi-card .mirlo-kpi-content,
.mirlo-kpi-card .kpi-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

.mirlo-kpi-card .mirlo-kpi-value,
.mirlo-kpi-card .kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a !important;
    margin-bottom: 0.25rem;
    font-family: var(--mirlo-font);
}

.mirlo-kpi-card .mirlo-kpi-label,
.mirlo-kpi-card .kpi-label {
    font-size: 0.875rem;
    color: #6b7280 !important;
    font-weight: 500;
    line-height: 1.3;
}

.mirlo-kpi-card .kpi-decoration {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.1;
    z-index: 1;
}

.mirlo-kpi-card-detail {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.8125rem;
    color: #6b7280;
}

.mirlo-kpi-card-detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.mirlo-kpi-card-detail-row:last-child { margin-bottom: 0; }

/* Colores icono + círculo para .mirlo-kpi-card */
.mirlo-kpi-card.kpi-primary .mirlo-kpi-icon,
.mirlo-kpi-card.kpi-primary .kpi-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.mirlo-kpi-card.kpi-primary .kpi-decoration { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

.mirlo-kpi-card.kpi-success .mirlo-kpi-icon,
.mirlo-kpi-card.kpi-success .kpi-icon { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.mirlo-kpi-card.kpi-success .kpi-decoration { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }

.mirlo-kpi-card.kpi-danger .mirlo-kpi-icon,
.mirlo-kpi-card.kpi-danger .kpi-icon { background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%); }
.mirlo-kpi-card.kpi-danger .kpi-decoration { background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%); }

.mirlo-kpi-card.kpi-warning .mirlo-kpi-icon,
.mirlo-kpi-card.kpi-warning .kpi-icon { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.mirlo-kpi-card.kpi-warning .kpi-decoration { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }

.mirlo-kpi-card.kpi-info .mirlo-kpi-icon,
.mirlo-kpi-card.kpi-info .kpi-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.mirlo-kpi-card.kpi-info .kpi-decoration { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

.mirlo-kpi-card.kpi-purple .mirlo-kpi-icon,
.mirlo-kpi-card.kpi-purple .kpi-icon { background: linear-gradient(135deg, #9d7ce8 0%, #6f42c1 100%); }
.mirlo-kpi-card.kpi-purple .kpi-decoration { background: linear-gradient(135deg, #9d7ce8 0%, #6f42c1 100%); }

@media (max-width: 768px) {
    .mirlo-kpi-card { padding: 1.25rem; min-height: 90px; }
    .mirlo-kpi-card .mirlo-kpi-icon,
    .mirlo-kpi-card .kpi-icon { width: 50px; height: 50px; min-width: 50px; font-size: 1.5rem; }
    .mirlo-kpi-card .mirlo-kpi-value,
    .mirlo-kpi-card .kpi-value { font-size: 1.5rem; }
    .mirlo-kpi-card .mirlo-kpi-label,
    .mirlo-kpi-card .kpi-label { font-size: 0.8rem; }
}
@media (max-width: 576px) {
    .mirlo-kpi-card { padding: 1rem; min-height: 80px; gap: 0.75rem; }
    .mirlo-kpi-card .mirlo-kpi-icon,
    .mirlo-kpi-card .kpi-icon { width: 45px; height: 45px; min-width: 45px; font-size: 1.25rem; }
    .mirlo-kpi-card .mirlo-kpi-value,
    .mirlo-kpi-card .kpi-value { font-size: 1.25rem; }
    .mirlo-kpi-card .mirlo-kpi-label,
    .mirlo-kpi-card .kpi-label { font-size: 0.75rem; }
}

/* ====================================================================
   ALERTAS ESTÁNDAR - Más limpias
   ==================================================================== */
.mirlo-alert {
    padding: var(--mirlo-spacing-md) var(--mirlo-spacing-lg);
    border-radius: var(--mirlo-border-radius);
    margin-bottom: var(--mirlo-spacing-md);
    font-family: var(--mirlo-font);
    font-weight: 400;
    line-height: 1.6;
    border-left-width: 3px;
    border-left-style: solid;
}

.mirlo-alert-primary {
    background-color: rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--mirlo-primary);
    color: #212529;
}

.mirlo-alert-accent {
    background-color: rgba(243, 156, 18, 0.1);
    border-left: 4px solid var(--mirlo-accent);
    color: #212529;
}

.mirlo-alert-success {
    background-color: #d4edda;
    border-left: 4px solid var(--mirlo-success);
    color: #155724;
}

.mirlo-alert-warning {
    background-color: #fff3cd;
    border-left: 4px solid var(--mirlo-warning);
    color: #856404;
}

.mirlo-alert-danger {
    background-color: #f8d7da;
    border-left: 4px solid var(--mirlo-danger);
    color: #721c24;
}

.mirlo-alert-info {
    background-color: #d1ecf1;
    border-left: 4px solid var(--mirlo-info);
    color: #0c5460;
}

/* ====================================================================
   VISTAS MÚLTIPLES (TABLA, TARJETAS, CALENDARIO)
   ==================================================================== */
.cards-view,
.table-view,
.calendar-view {
    display: none;
}

.cards-view.active,
.table-view.active,
.calendar-view.active {
    display: block;
}

/* ====================================================================
   PESTAÑAS Y TABS - Estilo unificado (fondo sólido + texto blanco)
   ==================================================================== */
.nav-tabs {
    border-bottom: 2px solid #374151;
    margin-bottom: var(--mirlo-spacing-md);
}

.nav-tabs .nav-link {
    border: 1px solid #374151;
    border-bottom: none;
    color: #ffffff !important;
    font-weight: 500;
    padding: var(--mirlo-spacing-sm) var(--mirlo-spacing-md);
    margin-right: var(--mirlo-spacing-xs);
    transition: all 0.3s ease;
    background-color: #4b5563;
    border-radius: 8px 8px 0 0;
}

.nav-tabs .nav-link i,
.nav-tabs .nav-link .bi,
.nav-tabs .nav-link span {
    color: #ffffff !important;
}

/* Hover pestañas: sutil brillo sin cambiar color de fuente */
.nav-tabs .nav-link:hover {
    filter: brightness(1.12);
}

.nav-tabs .nav-link.active {
    border-color: #1d4ed8;
    color: #ffffff !important;
    font-weight: 600;
    background-color: #2563eb;
}

/* Pestañas con color naranja */
.nav-tabs.nav-tabs-orange .nav-link.active {
    border-color: #ea580c;
    color: #ffffff !important;
    background-color: #ea580c;
}

.nav-tabs.nav-tabs-orange .nav-link:hover {
    color: #ffffff !important;
    filter: brightness(1.12);
}

/* Pestañas con color gris */
.nav-tabs.nav-tabs-gray .nav-link.active {
    border-color: #6c757d;
    color: #ffffff !important;
    background-color: #6c757d;
}

.nav-tabs.nav-tabs-gray .nav-link:hover {
    color: #ffffff !important;
    filter: brightness(1.12);
}

/* (Reglas de thead legacy consolidadas arriba - ver sección "NORMALIZACIÓN GLOBAL: TABLAS") */

/* Pestañas con color negro */
.nav-tabs.nav-tabs-black .nav-link.active {
    border-color: #111827;
    color: #ffffff !important;
    background-color: #111827;
    font-weight: 700;
}

.nav-tabs.nav-tabs-black .nav-link:hover {
    color: #ffffff !important;
    filter: brightness(1.12);
}

/* Tab content */
.tab-content {
    padding: var(--mirlo-spacing-md) 0;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* ====================================================================
   ESPACIADO ADICIONAL PARA DISEÑO LIMPIO
   ==================================================================== */
.row.g-3 {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.row.g-3 > * {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Secciones con más espacio */
.section-spacing {
    margin-bottom: var(--mirlo-spacing-xl);
}

.section-spacing:last-child {
    margin-bottom: 0;
}

/* Iconos más visibles y consistentes */
.mirlo-card-body i,
.mirlo-table-body i {
    font-size: 1.125rem;
    vertical-align: middle;
    margin-right: 0.375rem;
}

/* Mejora de legibilidad general */
.mirlo-main-content p,
.mirlo-card-body p {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: var(--mirlo-spacing-sm);
}

.mirlo-main-content h3,
.mirlo-main-content h4 {
    color: #111827;
    font-weight: 600;
    margin-bottom: var(--mirlo-spacing-md);
    margin-top: var(--mirlo-spacing-lg);
}

/* ====================================================================
   ANIMACIONES Y TRANSICIONES MEJORADAS
   ==================================================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.mirlo-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.mirlo-slide-in {
    animation: slideIn 0.3s ease-in-out;
}

/* Mejoras en transiciones de botones */
.mirlo-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mirlo-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Mejoras en hover de cards */
.mirlo-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mirlo-card:hover {
    transform: translateY(-2px);
}

/* Mejoras en tablas */
.mirlo-table-body tr {
    transition: background-color 0.15s ease;
}

.mirlo-table-body tr:hover {
    transform: scale(1.01);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ====================================================================
   COMPONENTES ADICIONALES
   ==================================================================== */

/* Spinner/Loader */
.mirlo-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--mirlo-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.mirlo-spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.mirlo-spinner-lg {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

/* Progress Bar */
.mirlo-progress {
    height: 1.5rem;
    background-color: #e9ecef;
    border-radius: var(--mirlo-border-radius);
    overflow: hidden;
}

.mirlo-progress-bar {
    height: 100%;
    background-color: var(--mirlo-accent);
    transition: width 0.6s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Breadcrumb mejorado */
.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: var(--mirlo-spacing-md);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--mirlo-gray);
    font-weight: bold;
}

.breadcrumb-item a {
    color: var(--mirlo-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--mirlo-primary);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--mirlo-gray);
}

/* Pagination mejorada */
.pagination {
    margin-top: var(--mirlo-spacing-lg);
}

.page-link {
    color: var(--mirlo-primary);
    border-color: #dee2e6;
    transition: all 0.2s ease;
}

.page-link:hover {
    color: var(--mirlo-accent);
    background-color: rgba(243, 156, 18, 0.1);
    border-color: var(--mirlo-accent);
}

.page-item.active .page-link {
    background-color: var(--mirlo-accent);
    border-color: var(--mirlo-accent);
    color: white;
}

.page-item.disabled .page-link {
    color: #adb5bd;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

/* Empty State */
.mirlo-empty-state {
    text-align: center;
    padding: var(--mirlo-spacing-xl) var(--mirlo-spacing-md);
    color: var(--mirlo-gray);
}

.mirlo-empty-state i {
    font-size: 4rem;
    color: #adb5bd;
    margin-bottom: var(--mirlo-spacing-md);
}

.mirlo-empty-state h4 {
    color: var(--mirlo-primary);
    margin-bottom: var(--mirlo-spacing-sm);
}

/* Input Groups mejorados */
.input-group {
    position: relative;
}

.input-group-text {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: var(--mirlo-gray);
}

.input-group .form-control:focus {
    border-color: var(--mirlo-accent);
    box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.25);
}

/* Tooltip mejorado */
.tooltip {
    font-family: var(--mirlo-font);
    font-size: var(--mirlo-font-size-sm);
}

.tooltip-inner {
    background-color: var(--mirlo-primary);
    color: white;
    border-radius: var(--mirlo-border-radius);
    padding: 0.5rem 0.75rem;
}

/* Dropdown mejorado */
.dropdown-menu {
    border: 1px solid #e5e7eb;
    background-color: var(--navbar-bg-color, #ffffff);
    box-shadow: var(--mirlo-shadow-lg);
    border-radius: var(--mirlo-border-radius);
    padding: 0.5rem 0;
}

/* Prioridad alta para dropdowns globales (sin tocar navbar corporativo) */
.dropdown-menu.show {
    background-color: var(--navbar-bg-color, #ffffff) !important;
    border-color: #e5e7eb !important;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    transition: all 0.15s ease;
    color: var(--navbar-text-color, #212529) !important;
    background-color: transparent;
}

.dropdown-menu .dropdown-item,
.dropdown-menu.show .dropdown-item {
    color: var(--navbar-text-color, #212529) !important;
    background-color: transparent !important;
}

.dropdown-item:hover {
    background-color: var(--navbar-dropdown-hover-bg, #f8f9fa);
    color: var(--navbar-hover-color, #F39C12) !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu.show .dropdown-item:hover,
.dropdown-menu.show .dropdown-item:focus {
    background-color: var(--navbar-dropdown-hover-bg, #f8f9fa) !important;
    color: var(--navbar-hover-color, #F39C12) !important;
}

.dropdown-item:active {
    background-color: var(--navbar-dropdown-hover-bg, #f8f9fa);
    color: var(--navbar-hover-color, #F39C12) !important;
}

.dropdown-menu .dropdown-item:active {
    background-color: var(--navbar-dropdown-hover-bg, #f8f9fa) !important;
    color: var(--navbar-hover-color, #F39C12) !important;
}

.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item .bi {
    color: var(--navbar-icon-color, #F39C12) !important;
}

.dropdown-item.disabled {
    color: #9ca3af !important;
    cursor: not-allowed;
}

/* Selects: opciones con fondo oscuro y texto blanco para consistencia visual */
.form-select option {
    color: #ffffff;
    background-color: #111827;
}

/* ====================================================================
   ACCESIBILIDAD
   ==================================================================== */
.mirlo-btn:focus,
.mirlo-btn-outline:focus {
    outline: 2px solid var(--mirlo-accent);
    outline-offset: 2px;
}

.mirlo-card:focus-within {
    outline: 2px solid var(--mirlo-accent);
    outline-offset: 2px;
}

/* Mejoras para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 768px) {
    .mirlo-container {
        width: 95vw; /* Mantener 95% incluso en móvil */
        max-width: none;
        padding: var(--mirlo-spacing-md) var(--mirlo-spacing-sm);
    }
    
    .mirlo-header-content {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .mirlo-page-title {
        font-size: 1.5rem;
    }
    
    .mirlo-header-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: var(--mirlo-spacing-sm);
    }
    
    .mirlo-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .mirlo-card-body {
        padding: var(--mirlo-spacing-md);
    }
    
    .mirlo-table-header th,
    .mirlo-table-body td {
        padding: var(--mirlo-spacing-sm) var(--mirlo-spacing-md);
    }
    
    /* Mejoras responsive para nuevos componentes */
    .mirlo-empty-state {
        padding: var(--mirlo-spacing-lg) var(--mirlo-spacing-sm);
    }
    
    .mirlo-empty-state i {
        font-size: 3rem;
    }
    
    .pagination {
        flex-wrap: wrap;
    }
    
    .page-link {
        padding: 0.375rem 0.5rem;
        font-size: var(--mirlo-font-size-sm);
    }
}

/* ====================================================================
   NORMALIZACIÓN GLOBAL: MODALES - header configurable por tenant
   Color controlado por --modal-header-bg / --modal-title-color (layout.php)
   ==================================================================== */
.modal .modal-header,
.modal-header[style],
div.modal-header,
.modal-content > .modal-header {
    background: var(--modal-header-bg, #000000) !important;
    background-color: var(--modal-header-bg, #000000) !important;
    color: var(--modal-title-color, #ffffff) !important;
    border-bottom: none !important;
}

.modal .modal-header *,
.modal-header[style] *,
.modal-header .modal-title,
.modal-header h5,
.modal-header h4,
.modal-header span,
.modal-header i,
.modal-header .bi {
    color: var(--modal-title-color, #ffffff) !important;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
}

/* ====================================================================
   NORMALIZACIÓN GLOBAL: TABLAS - thead configurable por tenant
   REGLA: En headers con fondo oscuro el texto SIEMPRE es blanco (legibilidad).
   Color controlado por --table-header-bg / --table-header-color (layout.php)
   ==================================================================== */
table thead,
table > thead,
.table thead,
.table > thead,
thead[style],
thead.bg-dark,
thead.bg-primary,
thead.bg-secondary,
thead.bg-info,
thead.bg-success,
thead.bg-warning {
    background: var(--table-header-bg, #000000) !important;
    background-color: var(--table-header-bg, #000000) !important;
}

table thead th,
table thead td,
.table thead th,
.table thead td,
thead[style] th,
thead[style] td,
table thead th *,
table thead td * {
    color: var(--table-header-color, #ffffff) !important;
    background: transparent !important;
}

/* Bootstrap .btn-warning global: texto blanco legible */
.btn-warning {
    color: #ffffff !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    color: #ffffff !important;
}

/* ====================================================================
   NORMALIZACIÓN GLOBAL: Card headers compactos y uniformes
   REGLA: En headers/botones con fondo oscuro el texto SIEMPRE es blanco.
   Con fondo blanco/claro se usa texto oscuro. (layout.php variables)
   ==================================================================== */
.card-header,
.card > .card-header,
div.card-header {
    background-color: var(--card-header-bg, #000000) !important;
    color: var(--card-header-color, #ffffff) !important;
    padding: 0.5rem 1rem !important;
    border-bottom: none !important;
    font-weight: 600;
    font-size: 0.95rem;
}

.card-header *,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header span,
.card-header i,
.card-header .bi {
    color: var(--card-header-color, #ffffff) !important;
}

.card-header .btn-outline-light {
    border-color: rgba(255,255,255,0.5) !important;
    color: #ffffff !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.85rem !important;
}

.card-header .btn-outline-light:hover {
    background-color: rgba(255,255,255,0.15) !important;
}

/* ====================================================================
   NORMALIZACIÓN DE BOTONES LEGACY (btn btn-*)
   Cualquier botón que aún use clases Bootstrap .btn .btn-primary, etc.
   hereda el mismo borde, forma y colores que .mirlo-btn para que un solo
   cambio en el componente global actualice toda la app.
   ==================================================================== */
.btn.btn-primary,
.btn.btn-success,
.btn.btn-danger,
.btn.btn-warning,
.btn.btn-info,
.btn.btn-secondary,
.btn.btn-dark {
    border-radius: 4px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}
.btn.btn-primary { background-color: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
.btn.btn-primary:hover { filter: brightness(1.12); }
.btn.btn-success { background-color: #059669 !important; border-color: #059669 !important; color: #fff !important; }
.btn.btn-success:hover { filter: brightness(1.12); }
.btn.btn-danger { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
.btn.btn-danger:hover { filter: brightness(1.12); }
.btn.btn-warning { background-color: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }
.btn.btn-warning:hover { filter: brightness(1.12); }
.btn.btn-info { background-color: #0891b2 !important; border-color: #0891b2 !important; color: #fff !important; }
.btn.btn-info:hover { filter: brightness(1.12); }
.btn.btn-secondary,
.btn.btn-dark { background-color: #374151 !important; border-color: #374151 !important; color: #fff !important; }
.btn.btn-secondary:hover,
.btn.btn-dark:hover { filter: brightness(1.12); }
.btn.btn-outline-primary { border-radius: 4px !important; color: #2563eb !important; border-color: #2563eb !important; }
.btn.btn-outline-primary:hover { filter: brightness(1.12); }
.btn.btn-outline-success { border-radius: 4px !important; color: #059669 !important; border-color: #059669 !important; }
.btn.btn-outline-success:hover { filter: brightness(1.12); }
.btn.btn-outline-danger { border-radius: 4px !important; color: #dc2626 !important; border-color: #dc2626 !important; }
.btn.btn-outline-danger:hover { filter: brightness(1.12); }
.btn.btn-outline-warning { border-radius: 4px !important; color: #d97706 !important; border-color: #d97706 !important; }
.btn.btn-outline-warning:hover { filter: brightness(1.12); }
.btn.btn-outline-info { border-radius: 4px !important; color: #0891b2 !important; border-color: #0891b2 !important; }
.btn.btn-outline-info:hover { filter: brightness(1.12); }
.btn.btn-outline-secondary,
.btn.btn-outline-dark { border-radius: 4px !important; color: #374151 !important; border-color: #374151 !important; }
.btn.btn-outline-secondary:hover,
.btn.btn-outline-dark:hover { filter: brightness(1.12); }
.btn.btn-primary i, .btn.btn-success i, .btn.btn-danger i, .btn.btn-warning i, .btn.btn-info i, .btn.btn-secondary i, .btn.btn-dark i,
.btn.btn-outline-primary i, .btn.btn-outline-success i, .btn.btn-outline-danger i, .btn.btn-outline-warning i, .btn.btn-outline-info i, .btn.btn-outline-secondary i { color: inherit !important; }

/* ====================================================================
   REGLA ESTRICTA DE LEGIBILIDAD (GLOBAL)
   Texto SIEMPRE blanco en:
   1) Headers de tablas
   2) Headers de modales
   3) Botones
   El color de fondo sigue siendo parametrizable por tenant.
   ==================================================================== */
table thead th,
table thead td,
table thead th *,
table thead td *,
.table thead th,
.table thead td,
.table thead th *,
.table thead td *,
thead th,
thead td,
thead th *,
thead td * {
    color: #ffffff !important;
}

.modal .modal-header,
.modal .modal-header *,
.modal-header,
.modal-header *,
.mirlo-modal-header,
.mirlo-modal-header *,
.mirlo-modal-header-primary,
.mirlo-modal-header-primary *,
.mirlo-modal-header-accent,
.mirlo-modal-header-accent * {
    color: #ffffff !important;
}

.mirlo-btn,
.mirlo-btn *,
.mirlo-btn i,
.mirlo-btn span,
.mirlo-btn .bi,
.btn,
.btn *,
.btn i,
.btn span,
.btn .bi {
    color: #ffffff !important;
}