/* ================================================================ MAIN LAYOUT STYLES File : CssStyles/CssMain.css Covers : CSS variables, reset, topbar, sidebar, content area, utilities, responsive. Used on ALL pages. ================================================================ */ /* ---------------------------------------------------------------- SECTION 1: CSS VARIABLES Theme colors are overridden dynamically by FreHeader.php ---------------------------------------------------------------- */ :root { --color-primary: #1565C0; --color-secondary: #1976D2; --color-accent: #42A5F5; --color-sidebar: #0D47A1; --color-topbar: #1565C0; --color-text-nav: #FFFFFF; --color-btn-primary: #1565C0; --font-base-size: 13.0px; /* Default — overridden by font class on body */ --color-text: #111111; --color-bg: #F5F6FA; --color-white: #FFFFFF; --color-border: #D8DCE6; --color-success: #1B5E20; --color-success-bg: #E8F5E9; --color-error: #B71C1C; --color-error-bg: #FFEBEE; --color-warning: #E65100; --color-warning-bg: #FFF3E0; --color-info: #01579B; --color-info-bg: #E1F5FE; --sidebar-width: 235px; --topbar-height: 72px; --radius: 6px; --radius-sm: 4px; --shadow-sm: 0 1px 3px rgba(0,0,0,.10); --shadow-md: 0 2px 8px rgba(0,0,0,.13); --shadow-lg: 0 4px 16px rgba(0,0,0,.16); --transition: all 0.2s ease; } /* ---------------------------------------------------------------- SECTION 2: RESET AND BASE ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--font-base-size); scroll-behavior: smooth; } body { font-family: Calibri, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: var(--font-base-size); color: var(--color-text); background-color: var(--color-bg); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------------------------------------------------------------- SECTION 3: FONT SIZE CLASSES Applied to by FreHeader.php based on user preference. Each class overrides --font-base-size AND font-size on body. All elements using em or var(--font-base-size) scale automatically. ---------------------------------------------------------------- */ .font-small { --font-base-size: 12.0px; font-size: 12.0px; } /* Small — 12px */ .font-standard { --font-base-size: 13.0px; font-size: 13.0px; } /* Standard — 13px */ .font-large { --font-base-size: 14.5px; font-size: 14.5px; } /* Large — 14.5px */ .font-xlarge { --font-base-size: 16.0px; font-size: 16.0px; } /* X-Large — 16px */ /* ---------------------------------------------------------------- SECTION 4: TOPBAR ---------------------------------------------------------------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-height); background-color: var(--color-topbar); color: var(--color-text-nav); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; z-index: 1000; box-shadow: var(--shadow-md); } .topbar-left { display: flex; align-items: center; gap: 12px; } .topbar-right { display: flex; align-items: center; gap: 10px; } .topbar-brand { display: flex; flex-direction: row; align-items: center; gap: 10px; line-height: 1.2; } .topbar-logo { height: 54px; width: auto; max-width: 160px; object-fit: contain; border-radius: 4px; flex-shrink: 0; } /* Topbar text uses em so they scale with body font size */ .brand-title { font-size: 1em; font-weight: 550; opacity: .90; color: var(--color-text-nav); } .brand-company { font-size: 1.3em; font-weight: 530; color: var(--color-text-nav); } .sidebar-toggle { background: transparent; border: none; cursor: pointer; padding: 6px; display: flex; flex-direction: column; gap: 4px; } .hamburger-line { width: 22px; height: 2px; background-color: var(--color-text-nav); border-radius: 2px; display: block; transition: var(--transition); } .user-menu { position: relative; } .user-btn { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(255,255,255,.30); border-radius: var(--radius); color: var(--color-text-nav); cursor: pointer; padding: 5px 12px; font-size: 1em; transition: var(--transition); } .user-btn:hover { background: rgba(255,255,255,.12); } .user-avatar { width: 28px; height: 28px; background: rgba(255,255,255,.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1em; } .user-dropdown { position: fixed; top: var(--topbar-height); right: 18px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 190px; z-index: 9000; display: none; overflow: hidden; } .user-dropdown.open { display: block; } .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: var(--color-text); font-size: 1em; transition: background .15s; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; } .dropdown-item:hover { background-color: var(--color-bg); text-decoration: none; } .dropdown-item.danger { color: var(--color-error); font-weight: 700; } .dropdown-divider { border-top: 1px solid var(--color-border); margin: 4px 0; } /* ---------------------------------------------------------------- SECTION 5: SIDEBAR All font-size values use em — scale with body font size ---------------------------------------------------------------- */ .main-wrapper { display: flex; min-height: calc(100vh - var(--topbar-height)); margin-top: var(--topbar-height); } .sidebar { width: var(--sidebar-width); background-color: var(--color-sidebar); color: var(--color-text-nav); flex-shrink: 0; overflow-y: auto; height: calc(100vh - var(--topbar-height)); position: sticky; top: var(--topbar-height); display: flex; flex-direction: column; padding: 10px 0; transition: transform .25s ease; } .nav-section { margin-bottom: 2px; } .nav-section-title { font-size: 0.75em; font-weight: 700; letter-spacing: .09em; opacity: .90; padding: 14px 16px 3px; text-transform: uppercase; color: var(--color-text-nav); } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: var(--color-text-nav); text-decoration: none; font-size: 1em; font-weight: 500; transition: background .15s, opacity .15s; border-radius: 0 var(--radius) var(--radius) 0; margin-right: 8px; opacity: 1; } .nav-item:hover { background: #031257; opacity: 1; text-decoration: none; } /*Color de fondo para seleccion en el SideBar */ .nav-item.active { background: #031257; opacity: 1; font-weight: 700; } /* Le deja el color azul fuerte a la seleccion del SideBar */ .nav-icon { font-size: 1.1em; flex-shrink: 0; width: 20px; text-align: center; } .sidebar-footer { margin-top: auto; padding: 2px 16px; font-size: 0.8em; color: var(--color-text-nav); } /* ---------------------------------------------------------------- SECTION 6: CONTENT AREA ---------------------------------------------------------------- */ .content-area { flex: 1; padding: 24px; min-width: 0; overflow-x: auto; } .page-header { margin-bottom: 20px; border-bottom: 2px solid var(--color-border); padding-bottom: 12px; } .page-title { font-size: 1.4em; font-weight: 700; color: var(--color-text); } /* ---------------------------------------------------------------- SECTION 7: MOBILE OVERLAY ---------------------------------------------------------------- */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; } .sidebar-overlay.visible { display: block; } /* ---------------------------------------------------------------- SECTION 8: UTILITIES ---------------------------------------------------------------- */ .d-flex { display: flex; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-sm { gap: 8px; } .gap-md { gap: 14px; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .w-100 { width: 100%; } .fw-bold { font-weight: 700; } .text-right { text-align: right; } .text-center { text-align: center; } .text-nowrap { white-space: nowrap; } .text-danger { color: var(--color-error); } .text-success { color: var(--color-success); } .divider { border: none; border-top: 1px solid var(--color-border); margin: 16px 0; } .empty-state { text-align: center; padding: 40px 20px; font-size: 1em; } /* ---------------------------------------------------------------- SECTION 9: RESPONSIVE ---------------------------------------------------------------- */ @media (max-width: 768px) { .sidebar { position: fixed; top: var(--topbar-height); left: 0; height: calc(100vh - var(--topbar-height)); z-index: 1000; transform: translateX(-100%); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; } .sidebar.open { transform: translateX(0); } .content-area { padding: 16px 12px; } .brand-company { display: none; } .form-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .topbar { padding: 0 10px; } .user-name { display: none; } .card-body { padding: 12px; } } /* ---------------------------------------------------------------- SECTION 10: ADDITIONAL RESPONSIVE — TABLET & SMALL SCREENS ---------------------------------------------------------------- */ @media (max-width: 768px) { .main-wrapper { display: block; } .brand-title { font-size: 0.85em; } .topbar-brand { gap: 6px; } .topbar-logo { height: 34px; max-width: 100px; } .page-title { font-size: 1.2em; } .d-flex.justify-between { flex-wrap: wrap; gap: 8px; } .card { overflow: visible; } .card-body { overflow-x: auto; } } @media (max-width: 480px) { .brand-title { display: none; } .page-title { font-size: 1.1em; } .btn { padding: 6px 12px; font-size: 0.9em; } .btn-sm { padding: 4px 8px; font-size: 0.85em; } .status-active, .status-inactive { padding: 2px 7px; font-size: 0.85em; } .msg-container { min-width: calc(100vw - 32px); max-width: calc(100vw - 32px); } }