/* ========================================================= layout-fixes.css (SCOPED / Metronic-safe) Objetivo: - Mantener fixes responsive y de aside SOLO para el layout general - NO afectar Home ni otros módulos Requisito: - En rutas "normales" (dashboard/layout): - En Home: (y NO layout-default) ========================================================= */ /* --------- Global mínimo (seguro) --------- Evita scroll horizontal sin tocar widths globales */ html { overflow-x: hidden; } body { overflow-x: hidden; } /* ========================================================= RESPONSIVE (solo dentro de layout-default) ========================================================= */ body.layout-default #kt_wrapper, body.layout-default #kt_content, body.layout-default #kt_header, body.layout-default #kt_subheader, body.layout-default #kt_footer, body.layout-default .wrapper, body.layout-default .content, body.layout-default .container, body.layout-default .container-fluid, body.layout-default .d-flex.flex-column.flex-root, body.layout-default .d-flex.flex-row.flex-column-fluid { min-width: 0; max-width: 100%; } /* Metronic suele aplicar width/min-width en móvil */ @media (max-width: 991.98px) { body.layout-default #kt_wrapper, body.layout-default #kt_content, body.layout-default #kt_header, body.layout-default #kt_subheader, body.layout-default #kt_footer, body.layout-default #kt_content_container, body.layout-default .kt-wrapper, body.layout-default .wrapper, body.layout-default .content, body.layout-default .container, body.layout-default .container-fluid, body.layout-default .d-flex.flex-column.flex-root, body.layout-default .d-flex.flex-row.flex-column-fluid { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* padding amigable en móvil */ body.layout-default .content, body.layout-default #kt_content { padding-left: 10px !important; padding-right: 10px !important; } /* grids: permitir que bajen a 1 columna (solo en layout-default) */ body.layout-default .grid2, body.layout-default .grid3, body.layout-default .form-grid { display: grid !important; grid-template-columns: 1fr !important; } /* tablas/bloques grandes: scroll horizontal controlado */ body.layout-default .table-responsive, body.layout-default .dataTables_wrapper, body.layout-default .datatable, body.layout-default table, body.layout-default .table, body.layout-default .card, body.layout-default .card-body { max-width: 100% !important; overflow-x: auto; } /* imágenes y charts */ body.layout-default img, body.layout-default canvas, body.layout-default svg { max-width: 100% !important; height: auto !important; } } /* ========================================================= ASIDE MOBILE (solo dentro de layout-default) - Evita que el aside empuje el contenido y arregla overlay/taps ========================================================= */ @media (max-width: 991.98px) { /* Aside como panel deslizable */ body.layout-default #kt_aside { position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; z-index: 2002 !important; /* arriba del overlay */ transform: translateX(-110%) !important; /* oculto */ transition: transform .25s ease !important; pointer-events: auto !important; } /* Abierto (clases de Metronic en body) */ body.layout-default.aside-mobile-on #kt_aside, body.layout-default.aside-mobile-enabled #kt_aside { transform: translateX(0) !important; } /* El contenido NO debe quedar empujado por el aside */ body.layout-default.aside-fixed #kt_wrapper, body.layout-default.aside-fixed #kt_content, body.layout-default.aside-fixed .wrapper, body.layout-default.aside-fixed .content { margin-left: 0 !important; padding-left: 0 !important; } /* Overlay debajo del aside (cuando está abierto) */ body.layout-default.aside-mobile-on .aside-overlay, body.layout-default.aside-mobile-on .offcanvas-overlay, body.layout-default.aside-mobile-on .drawer-overlay, body.layout-default.aside-mobile-on .header-menu-wrapper-overlay { z-index: 2001 !important; } /* Cuando NO está abierto, el overlay no debe bloquear clicks */ body.layout-default:not(.aside-mobile-on) .aside-overlay, body.layout-default:not(.aside-mobile-on) .offcanvas-overlay, body.layout-default:not(.aside-mobile-on) .drawer-overlay, body.layout-default:not(.aside-mobile-on) .header-menu-wrapper-overlay { display: none !important; pointer-events: none !important; } /* Asegura que el menú reciba taps */ body.layout-default.aside-mobile-on .aside-menu-wrapper, body.layout-default.aside-mobile-on .aside-menu, body.layout-default.aside-mobile-on .menu-nav, body.layout-default.aside-mobile-on .menu-item, body.layout-default.aside-mobile-on .menu-link { pointer-events: auto !important; touch-action: manipulation; } } /* ========================================================= THEME LIGHT + VIVID (SCOPED) IMPORTANTE: esto ANTES era global y podía romper Home. Ahora solo aplica en body.layout-default. ========================================================= */ :root{ --app-bg: #f3f6ff; --app-panel: rgba(255,255,255,.92); --app-card: #ffffff; --app-text: #0f172a; --app-muted: #6b7280; --app-border: rgba(15,23,42,.10); --app-primary: #2563eb; --app-primary2: #06b6d4; --app-accent: #7c3aed; --app-shadow: 0 12px 30px rgba(15,23,42,.10); --app-shadow-soft: 0 10px 24px rgba(15,23,42,.08); --app-radius: 16px; } /* Fondo general SOLO en layout-default (Home queda intacto) */ body.layout-default{ background: radial-gradient(1200px 600px at 20% 0%, rgba(137, 99, 255, .12), transparent 60%), radial-gradient(900px 500px at 80% 20%, rgba(65, 182, 212, .10), transparent 55%), var(--app-bg) !important; color: var(--app-text); } /* Contenido principal */ body.layout-default .content, body.layout-default .wrapper, body.layout-default .d-flex.flex-column.flex-row-fluid, body.layout-default #kt_content, body.layout-default #kt_content_container{ background: transparent !important; } /* Paneles / cajas típicas Metronic */ body.layout-default .card, body.layout-default .card-header, body.layout-default .card-body, body.layout-default .portlet, body.layout-default .panel, body.layout-default .accordion, body.layout-default .modal-content{ border-radius: var(--app-radius) !important; } body.layout-default .card, body.layout-default .portlet, body.layout-default .panel, body.layout-default .modal-content{ background: var(--app-card) !important; border: 1px solid var(--app-border) !important; box-shadow: var(--app-shadow-soft) !important; } /* Cabeceras dentro de cards */ body.layout-default .card-header{ background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(6,182,212,.08)) !important; border-bottom: 1px solid var(--app-border) !important; } /* Inputs */ body.layout-default .form-control, body.layout-default input, body.layout-default select, body.layout-default textarea{ background: #fff !important; color: var(--app-text) !important; border: 1px solid rgba(15,23,42,.14) !important; border-radius: 12px !important; } body.layout-default .form-control:focus, body.layout-default input:focus, body.layout-default select:focus, body.layout-default textarea:focus{ outline: none !important; border-color: rgba(37,99,235,.55) !important; box-shadow: 0 0 0 4px rgba(37,99,235,.14) !important; } /* Botones */ body.layout-default .btn.btn-primary, body.layout-default .btn-primary{ background: linear-gradient(135deg, var(--app-primary), var(--app-primary2)) !important; border: 0 !important; box-shadow: 0 14px 30px rgba(37,99,235,.22) !important; } body.layout-default .btn.btn-primary:hover, body.layout-default .btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 18px 36px rgba(37,99,235,.28) !important; } /* Botón secundario / ghost */ body.layout-default .btn.btn-light, body.layout-default .btn-light, body.layout-default .btn-secondary, body.layout-default .btn.btn-secondary{ background: #fff !important; color: var(--app-primary) !important; border: 1px solid rgba(37,99,235,.25) !important; } body.layout-default .btn.btn-light:hover, body.layout-default .btn-light:hover, body.layout-default .btn-secondary:hover{ background: rgba(37,99,235,.08) !important; } /* Tabs / nav pills */ body.layout-default .nav-tabs .nav-link, body.layout-default .nav-pills .nav-link{ border-radius: 999px !important; border: 1px solid rgba(15,23,42,.08) !important; background: rgba(15,23,42,.04) !important; color: var(--app-text) !important; margin-right: 8px; } body.layout-default .nav-tabs .nav-link:hover, body.layout-default .nav-pills .nav-link:hover{ background: rgba(37,99,235,.10) !important; border-color: rgba(37,99,235,.20) !important; } body.layout-default .nav-tabs .nav-link.active, body.layout-default .nav-pills .nav-link.active{ background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(6,182,212,.18)) !important; border-color: rgba(37,99,235,.28) !important; box-shadow: 0 10px 20px rgba(37,99,235,.12) !important; } /* Tipografía / jerarquía */ body.layout-default h1, body.layout-default h2, body.layout-default h3, body.layout-default h4{ color: var(--app-text) !important; } body.layout-default .text-muted, body.layout-default .muted{ color: var(--app-muted) !important; } /* Tu dashboard */ body.layout-default .kpiCard, body.layout-default .metricCard, body.layout-default .dashCard{ background: var(--app-card) !important; border: 1px solid var(--app-border) !important; box-shadow: var(--app-shadow-soft) !important; } /* Mantener el ASIDE oscuro (solo layout-default) */ body.layout-default .aside, body.layout-default #kt_aside, body.layout-default .aside-menu{ background: linear-gradient(180deg, #111827, #0b1220) !important; } body.layout-default .aside .menu-link, body.layout-default .aside .menu-title{ color: rgba(255,255,255,.80) !important; } body.layout-default .aside .menu-link:hover{ background: rgba(37,99,235,.18) !important; }