/* ============================================================= Grupo Landivar — sistema de Control de Personal y Vacaciones Paleta tomada del logo. Tipografía Inter (cargada en el ). Motivo: barras de acento + microetiquetas en mayúsculas, en el espíritu de una etiqueta/ficha técnica de planta. ============================================================= */ :root { --blue: #0A6098; --blue-dark: #063E60; --blue-light: #EAF3FA; --red: #C31A1C; --red-light: #FBEAEA; --ink: #1E2A32; --steel: #64748B; --steel-light: #94A3B3; --bg: #F1F4F7; --surface: #FFFFFF; --border: #E1E7EC; /* alias retro-compatibles con nombres usados en vistas anteriores */ --brand-blue: var(--blue); --brand-blue-dark: var(--blue-dark); --brand-red: var(--red); --brand-gray: var(--steel); } * { box-sizing: border-box; } body { background-color: var(--bg); color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14.5px; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; } /* ------------------------------------------------------------- Navbar ------------------------------------------------------------- */ .navbar { border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04); } .navbar-brand-landivar { height: 40px; } .navbar-nav .nav-link { color: var(--steel); font-weight: 600; font-size: 13.5px; padding: 6px 10px; border-radius: 6px; transition: background-color .15s ease, color .15s ease; } .navbar-nav .nav-link:hover { color: var(--blue); background-color: var(--blue-light); } .navbar-nav .nav-link.active-module { color: var(--blue); background-color: var(--blue-light); } /* ------------------------------------------------------------- Título de sección — barra de acento a la izquierda, como una etiqueta de ficha técnica. ------------------------------------------------------------- */ .page-title { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 4px solid var(--blue); margin-bottom: 0; } .page-title h4 { margin: 0; font-size: 18px; } .page-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-light); margin-bottom: 2px; } /* ------------------------------------------------------------- Tarjetas ------------------------------------------------------------- */ .card { border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04); } .card .card-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } /* ------------------------------------------------------------- Botones ------------------------------------------------------------- */ .btn { font-weight: 600; font-size: 13.5px; border-radius: 7px; padding: 7px 14px; letter-spacing: 0.01em; } .btn-sm { border-radius: 6px; } .btn-primary { background-color: var(--blue) !important; border-color: var(--blue) !important; box-shadow: 0 1px 2px rgba(10, 96, 152, 0.25); } .btn-primary:hover, .btn-primary:focus { background-color: var(--blue-dark) !important; border-color: var(--blue-dark) !important; } .btn-outline-primary { color: var(--blue) !important; border-color: var(--border) !important; background-color: var(--surface) !important; } .btn-outline-primary:hover { background-color: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; } .btn-outline-secondary { color: var(--steel) !important; border-color: var(--border) !important; } .btn-outline-secondary:hover { background-color: var(--steel) !important; border-color: var(--steel) !important; color: #fff !important; } .btn-outline-danger { color: var(--red) !important; border-color: var(--border) !important; background-color: var(--surface) !important; } .btn-outline-danger:hover { background-color: var(--red) !important; border-color: var(--red) !important; color: #fff !important; } .btn-danger { background-color: var(--red) !important; border-color: var(--red) !important; } /* ------------------------------------------------------------- Formularios ------------------------------------------------------------- */ .form-label { font-size: 12.5px; font-weight: 600; color: var(--steel); margin-bottom: 4px; } .form-control, .form-select { border: 1px solid var(--border); border-radius: 7px; font-size: 13.5px; padding: 7px 10px; } .form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); } .form-control-sm, .form-select-sm { border-radius: 6px; } /* Pestañas del formulario (Bootstrap nav-tabs) */ .nav-tabs { border-bottom: 1px solid var(--border); gap: 4px; } .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--steel); font-weight: 600; font-size: 13px; padding: 8px 4px; margin-right: 18px; border-radius: 0; } .nav-tabs .nav-link:hover { color: var(--blue); border-color: transparent; } .nav-tabs .nav-link.active { color: var(--blue); background: none; border-bottom: 2px solid var(--blue); } /* ------------------------------------------------------------- Tablas / DataTables ------------------------------------------------------------- */ table.dataTable { font-size: 13.5px; } table.dataTable thead th { background-color: var(--blue-light); color: var(--blue-dark); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: none !important; padding-top: 10px; padding-bottom: 10px; } table.dataTable tbody tr:hover { background-color: var(--blue-light); } table.dataTable.table-striped tbody tr:nth-of-type(odd) { background-color: #FAFBFC; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 13px; } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 6px !important; font-size: 13px; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; } /* ------------------------------------------------------------- Badges de estado — cápsulas suaves en vez de sólidas ------------------------------------------------------------- */ .badge.bg-success { background-color: #E3F5E9 !important; color: #1E7B45 !important; font-weight: 600; padding: 5px 10px; border-radius: 999px; } .badge.bg-secondary { background-color: #EEF1F4 !important; color: var(--steel) !important; font-weight: 600; padding: 5px 10px; border-radius: 999px; } /* ------------------------------------------------------------- Modales ------------------------------------------------------------- */ .modal-content { border: none; border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 32, 0.18); } .modal-header { border-bottom: 1px solid var(--border); padding: 16px 20px; } .modal-footer { border-top: 1px solid var(--border); padding: 14px 20px; } .modal-title { font-size: 16px; } /* ------------------------------------------------------------- Filas dinámicas (experiencia / dependientes / capacitaciones) ------------------------------------------------------------- */ .dyn-row { background-color: #FAFBFC; border-color: var(--border) !important; } /* ------------------------------------------------------------- Enlaces ------------------------------------------------------------- */ a { color: var(--blue); } a:hover { color: var(--blue-dark); }