/* ===================================================================== Inventario de Personal Identidad "Legajo": tinta azul-noche + acento latón, sobre papel frío. Pensada para un sistema de RRHH real (no para el proyecto de tractores): evoca el carné/legajo de personal en vez de maquinaria agrícola. Nota de rendimiento: las fuentes (Fraunces/Inter/IBM Plex Mono) se cargan con en el de index.php y login.php en vez de @import aquí, para que el navegador las pida en paralelo con este CSS y no en cadena. ===================================================================== */ :root { --verde-950: #161c2b; --verde-800: #232c42; --verde-600: #8a6423; --verde-500: #d9a94b; --verde-100: #f7ecd3; --acero-600: #3d6690; --acero-100: #e6edf4; --oxido-600: #b23b3b; --oxido-100: #f8e3e0; --gris-950: #1a2029; --gris-700: #4c5566; --gris-400: #8791a3; --gris-200: #dde2ea; --gris-100: #eef1f5; --blanco: #ffffff; --fuente-display: 'Fraunces', serif; --fuente-cuerpo: 'Inter', sans-serif; --fuente-dato: 'IBM Plex Mono', monospace; --radio: 12px; --sombra: 0 1px 3px rgba(22, 28, 43, 0.09), 0 1px 2px rgba(22, 28, 43, 0.07); --sombra-md: 0 10px 26px rgba(22, 28, 43, 0.14); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--fuente-cuerpo); background: var(--gris-100); color: var(--gris-950); -webkit-font-smoothing: antialiased; } /* ---------- Barra superior ---------- */ .topbar { background: linear-gradient(135deg, var(--verde-950) 0%, var(--verde-800) 100%); color: var(--blanco); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--verde-500); } .topbar .marca { display: flex; align-items: center; gap: 10px; font-family: var(--fuente-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; } .topbar .marca .icono-marca { width: 34px; height: 34px; background: var(--verde-500); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .topbar .marca small { display: block; font-family: var(--fuente-cuerpo); font-weight: 400; font-size: 0.72rem; color: var(--verde-100); letter-spacing: 0.02em; } .topbar .acciones-top { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ---------- Botón hamburguesa + menú lateral ---------- */ .btn-menu-lateral { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: var(--blanco); border-radius: 8px; width: 36px; height: 36px; font-size: 1.05rem; cursor: pointer; } .btn-menu-lateral:hover { background: rgba(255,255,255,0.12); } .menu-lateral-fondo { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10, 20, 15, 0.45); z-index: 60; } .menu-lateral-fondo.visible { display: block; } .menu-lateral { position: absolute; top: 0; left: 0; height: 100%; width: 280px; max-width: 85vw; background: var(--blanco); box-shadow: 4px 0 24px rgba(0,0,0,0.18); display: flex; flex-direction: column; padding: 10px; overflow-y: auto; } .menu-lateral-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 14px; border-bottom: 1px solid var(--gris-200); margin-bottom: 8px; } .menu-lateral-header button { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--gris-700); } .item-menu-lateral { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 11px 12px; font-family: var(--fuente-cuerpo); font-weight: 600; font-size: 0.9rem; color: var(--gris-950); text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 8px; } .item-menu-lateral:hover { background: var(--gris-100); } .item-menu-lateral-destacado { background: var(--verde-500); color: var(--verde-950); margin-bottom: 6px; } .item-menu-lateral-destacado:hover { background: #c2913c; } .menu-lateral-separador { height: 1px; background: var(--gris-200); margin: 8px 4px; } .item-menu-lateral-salir { color: var(--oxido-600); } /* ---------- Panel general (dashboard) ---------- */ .panel-dashboard { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 18px; } .panel-dashboard-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .panel-dashboard-header h2 { font-family: var(--fuente-display); font-size: 1.05rem; margin: 0; color: var(--verde-950); } .select-panel { font-family: var(--fuente-cuerpo); border: 1px solid var(--gris-200); border-radius: 7px; padding: 7px 10px; font-size: 0.82rem; background: var(--gris-100); color: var(--gris-950); } .panel-dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .panel-dashboard-card { border: 1px solid var(--gris-200); border-radius: 10px; padding: 14px 16px; } .panel-dashboard-card h3 { font-family: var(--fuente-display); font-size: 0.88rem; margin: 0 0 10px; color: var(--verde-800); } .panel-dashboard-alertas { display: flex; flex-direction: column; } .mini-alerta { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--gris-100); border: none; border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; font-family: var(--fuente-cuerpo); font-size: 0.82rem; color: var(--gris-950); cursor: pointer; text-align: left; } .mini-alerta:hover { background: var(--gris-200); } .mini-alerta strong { font-family: var(--fuente-dato); color: var(--oxido-600); } @media (max-width: 900px) { .panel-dashboard-grid { grid-template-columns: 1fr; } } @media (min-width: 901px) and (max-width: 1180px) { .panel-dashboard-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .grafica-barra-label { width: 84px; font-size: 0.72rem; } .grafica-barra-fila { gap: 6px; } .grafica-barra-valor { font-size: 0.64rem; } .panel-dashboard { padding: 14px; } .panel-dashboard-card { padding: 12px; } } /* ---------- Botones ---------- */ .btn { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: 0.88rem; border: none; border-radius: 8px; padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform 0.05s ease, opacity 0.15s ease; } .btn:active { transform: scale(0.97); } .btn-primario { background: var(--verde-500); color: var(--verde-950); } .btn-primario:hover { background: #c2913c; } .btn-secundario { background: rgba(255,255,255,0.12); color: var(--blanco); } .btn-secundario:hover { background: rgba(255,255,255,0.2); } .btn-claro { background: var(--blanco); color: var(--verde-800); border: 1px solid var(--gris-200); } .btn-claro:hover { background: var(--gris-100); } .btn-peligro { background: var(--oxido-100); color: var(--oxido-600); } .btn-peligro:hover { background: #f3c9c2; } .btn-sm { padding: 6px 11px; font-size: 0.78rem; border-radius: 6px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- Layout general ---------- */ .contenedor { max-width: 1400px; margin: 0 auto; padding: 24px 28px 60px; } /* ---------- Tarjetas de resumen ---------- */ .tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; } .tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra); border: 1px solid var(--gris-200); cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease; position: relative; overflow: hidden; } .tarjeta:hover { transform: translateY(-1px); border-color: var(--verde-500); } .tarjeta.activa { border-color: var(--verde-600); box-shadow: var(--sombra-md); } .tarjeta::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--barra-color, var(--verde-500)); } .tarjeta[data-color="verde"] { --barra-color: var(--verde-500); } .tarjeta[data-color="acero"] { --barra-color: var(--acero-600); } .tarjeta[data-color="oxido"] { --barra-color: var(--oxido-600); } .tarjeta[data-color="gris"] { --barra-color: var(--gris-400); } .tarjeta .etiqueta { font-size: 0.78rem; font-weight: 600; color: var(--gris-700); text-transform: uppercase; letter-spacing: 0.04em; } .tarjeta .valor { font-family: var(--fuente-display); font-size: 2rem; font-weight: 700; color: var(--verde-950); margin-top: 4px; } /* ---------- Barra de filtros ---------- */ .barra-filtros { background: var(--blanco); border: 1px solid var(--gris-200); border-radius: var(--radio); padding: 14px 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .barra-filtros input[type="text"], .barra-filtros select { font-family: var(--fuente-cuerpo); border: 1px solid var(--gris-200); border-radius: 7px; padding: 8px 12px; font-size: 0.88rem; background: var(--gris-100); color: var(--gris-950); } .barra-filtros input[type="text"] { flex: 1; min-width: 200px; } .barra-filtros .spacer { flex: 1; } /* ---------- Tabla ---------- */ .tabla-wrap { background: var(--blanco); border: 1px solid var(--gris-200); border-radius: var(--radio); overflow: auto; box-shadow: var(--sombra); } table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 900px; } thead th { text-align: left; background: var(--verde-100); color: var(--verde-800); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 11px 14px; position: sticky; top: 0; white-space: nowrap; } tbody td { padding: 11px 14px; border-top: 1px solid var(--gris-100); white-space: nowrap; color: var(--gris-950); } tbody tr:hover { background: var(--gris-100); } td.numero-doc { font-family: var(--fuente-dato); font-size: 0.82rem; color: var(--gris-700); } td.nombre-celda { font-weight: 600; white-space: normal; min-width: 200px; } .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; } .pill-activo { background: var(--verde-100); color: var(--verde-600); } .pill-retirado { background: var(--oxido-100); color: var(--oxido-600); } .acciones-fila { display: flex; gap: 6px; } .vacio { text-align: center; padding: 60px 20px; color: var(--gris-400); } .vacio strong { display: block; color: var(--gris-700); margin-bottom: 4px; font-size: 1rem; } /* ---------- Paginación ---------- */ .paginacion { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 0 4px; font-size: 0.85rem; color: var(--gris-700); } /* ---------- Modal ---------- */ .modal-fondo { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15, 35, 27, 0.55); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 100; } .modal-fondo.visible { display: flex; } .modal { background: var(--blanco); border-radius: 14px; width: 100%; max-width: 780px; box-shadow: var(--sombra-md); overflow: hidden; } .modal-header { padding: 18px 24px; background: var(--verde-950); color: var(--blanco); display: flex; align-items: center; justify-content: space-between; } .modal-header h2 { font-family: var(--fuente-display); font-size: 1.1rem; margin: 0; } .modal-header button { background: none; border: none; color: var(--verde-100); font-size: 1.3rem; cursor: pointer; line-height: 1; } .modal-body { padding: 22px 24px; max-height: 70vh; overflow-y: auto; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--gris-200); display: flex; justify-content: flex-end; gap: 10px; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; } .fila-certificado { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--gris-200); border-radius: 8px; margin-bottom: 8px; flex-wrap: wrap; } .campo { display: flex; flex-direction: column; gap: 5px; } .campo.full { grid-column: 1 / -1; } .campo label { font-size: 0.78rem; font-weight: 600; color: var(--gris-700); } .campo label .req { color: var(--oxido-600); } .campo input, .campo select { font-family: var(--fuente-cuerpo); border: 1px solid var(--gris-200); border-radius: 7px; padding: 9px 11px; font-size: 0.88rem; background: var(--gris-100); } .campo input:focus, .campo select:focus { outline: 2px solid var(--verde-500); outline-offset: 1px; background: var(--blanco); } .aviso { padding: 11px 14px; border-radius: 8px; font-size: 0.86rem; margin-bottom: 14px; display: none; } .aviso.visible { display: block; } .aviso-error { background: var(--oxido-100); color: var(--oxido-600); } .aviso-exito { background: var(--verde-100); color: var(--verde-600); } /* ---------- Panel de importación ---------- */ .zona-carga { border: 2px dashed var(--gris-200); border-radius: var(--radio); padding: 30px; text-align: center; color: var(--gris-700); background: var(--blanco); } .zona-carga.arrastrando { border-color: var(--verde-500); background: var(--verde-100); } /* ---------- Toast ---------- */ #toast { position: fixed; bottom: 24px; right: 24px; background: var(--verde-950); color: var(--blanco); padding: 13px 20px; border-radius: 9px; font-size: 0.88rem; font-weight: 500; box-shadow: var(--sombra-md); z-index: 200; opacity: 0; transform: translateY(10px); transition: all 0.25s ease; pointer-events: none; max-width: 360px; } #toast.visible { opacity: 1; transform: translateY(0); } #toast.error { background: var(--oxido-600); } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .contenedor { padding: 16px; } .form-grid { grid-template-columns: 1fr; } .topbar { padding: 12px 16px; } /* !important es necesario aquí: varios modales traen su ancho fijo escrito en línea (style="max-width:960px" etc.), y un estilo en línea le gana a una regla de hoja de estilos normal — sin el !important esos modales seguían saliendo anchos y rotos en celulares. */ .modal { max-width: 100% !important; } .barra-filtros { flex-direction: column; align-items: stretch; } .barra-filtros input[type="text"] { min-width: 0; } .barra-filtros select { width: 100%; } } /* ---------- Tabla completa (todas las columnas) ---------- Se limita solo a la tabla principal del listado (#tabla-wrap). Antes esta regla afectaba TODAS las tablas del sitio (con !important), lo que dejaba la tabla pequeña de "Resumen mensual" y otras dentro de los modales cortadas/desbordadas en varios dispositivos. */ #tabla-wrap table { min-width: 2600px; } td.nombre-celda { position: sticky; left: 0; background: var(--blanco); z-index: 1; box-shadow: 2px 0 4px rgba(15,35,27,0.06); } tbody tr:hover td.nombre-celda { background: var(--gris-100); } thead th:first-child { position: sticky; left: 0; z-index: 2; box-shadow: 2px 0 4px rgba(15,35,27,0.06); } /* ---------- Resumen mensual ---------- */ .resumen-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .resumen-col h3 { font-family: var(--fuente-display); font-size: 0.95rem; margin: 0 0 10px; color: var(--verde-800); } details.mes-detalle { border: 1px solid var(--gris-200); border-radius: 8px; margin-bottom: 8px; overflow: hidden; } details.mes-detalle summary { cursor: pointer; padding: 10px 12px; background: var(--gris-100); font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; justify-content: space-between; list-style: none; } details.mes-detalle summary::-webkit-details-marker { display: none; } details.mes-detalle[open] summary { background: var(--verde-100); color: var(--verde-800); } .mes-cantidad { background: var(--verde-500); color: var(--verde-950); font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; } table.tabla-mini { width: 100%; border-collapse: collapse; font-size: 0.78rem; } table.tabla-mini th { text-align: left; padding: 7px 10px; background: var(--blanco); color: var(--gris-700); border-bottom: 1px solid var(--gris-200); font-weight: 600; } table.tabla-mini td { padding: 7px 10px; border-bottom: 1px solid var(--gris-100); } @media (max-width: 720px) { .resumen-columnas { grid-template-columns: 1fr; } } /* ---------- Pantalla de login ---------- */ #pantalla-login { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--verde-950); display: flex; align-items: center; justify-content: center; z-index: 500; background-image: radial-gradient(circle at 20% 20%, rgba(60,155,113,0.15), transparent 40%), radial-gradient(circle at 80% 80%, rgba(59,110,143,0.15), transparent 40%); } .login-card { background: var(--blanco); border-radius: 14px; padding: 32px 30px; width: 100%; max-width: 360px; box-shadow: var(--sombra-md); } .login-marca { font-family: var(--fuente-display); font-weight: 700; font-size: 1.3rem; color: var(--verde-950); text-align: center; } .login-sub { text-align: center; color: var(--gris-700); font-size: 0.85rem; margin: 4px 0 18px; } .login-nota { margin-top: 18px; font-size: 0.76rem; color: var(--gris-700); background: var(--gris-100); border-radius: 8px; padding: 10px 12px; line-height: 1.6; } .login-nota code { background: var(--verde-100); color: var(--verde-800); padding: 1px 5px; border-radius: 4px; } /* ---------- Usuario activo / roles ---------- */ .usuario-activo-pill { background: rgba(255,255,255,0.12); color: var(--verde-100); padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; } body.rol-lectura [data-requiere-admin] { display: none !important; } /* ---------- Badge de alertas ---------- */ .badge-alertas { background: var(--oxido-600); color: var(--blanco); font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 4px; } /* ---------- Secciones dentro de modales grandes ---------- */ .seccion-modal { margin-bottom: 22px; } .seccion-modal h3 { font-family: var(--fuente-display); font-size: 0.95rem; margin: 0 0 10px; color: var(--verde-800); display: flex; align-items: center; gap: 8px; } .seccion-modal h3 .conteo { background: var(--verde-500); color: var(--verde-950); font-size: 0.7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; } .lista-alerta { list-style: none; margin: 0; padding: 0; } .lista-alerta li { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--gris-100); font-size: 0.86rem; } .lista-alerta li:last-child { border-bottom: none; } .lista-alerta .etq { color: var(--gris-700); font-size: 0.78rem; } .sin-alertas { color: var(--gris-400); font-size: 0.88rem; padding: 10px 0; } /* ---------- Gráficas (barras simples) ---------- */ .grafica-wrap { background: var(--blanco); border: 1px solid var(--gris-200); border-radius: 10px; padding: 14px; } .grafica-barra-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 0.8rem; } .grafica-barra-label { width: 140px; flex-shrink: 0; color: var(--gris-700); text-align: right; } .grafica-barra-track { flex: 1; background: var(--gris-100); border-radius: 5px; height: 18px; overflow: hidden; } .grafica-barra-fill { height: 100%; background: var(--verde-500); border-radius: 5px; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; } .grafica-barra-fill.oxido { background: var(--oxido-600); } .grafica-barra-fill.acero { background: var(--acero-600); } .grafica-barra-valor { font-size: 0.7rem; font-weight: 700; color: var(--verde-950); } .grafica-barra-fill.oxido .grafica-barra-valor, .grafica-barra-fill.acero .grafica-barra-valor { color: #fff; } /* Cuando la barra es muy angosta, el valor sale afuera para que no se corte */ .grafica-barra-valor-afuera { font-size: 0.7rem; font-weight: 700; flex-shrink: 0; white-space: nowrap; color: var(--verde-950); } .grafica-barra-valor-afuera.oxido { color: var(--oxido-600); } .grafica-barra-valor-afuera.acero { color: var(--acero-600); } /* ---------- Calidad de datos ---------- */ .fila-calidad { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--gris-100); font-size: 0.85rem; cursor: pointer; } .fila-calidad:hover { background: var(--gris-100); } .fila-calidad .campos-faltantes { color: var(--oxido-600); font-size: 0.76rem; font-weight: 600; } /* ---------- Historial ---------- */ .fila-historial { padding: 9px 12px; border-bottom: 1px solid var(--gris-100); font-size: 0.83rem; display: flex; justify-content: space-between; gap: 10px;} .fila-historial .hist-fecha { color: var(--gris-400); font-size: 0.74rem; white-space: nowrap; } /* ---------- Vista de impresión ---------- */ @media print { .topbar, .tarjetas, .barra-filtros, .paginacion, .acciones-fila, .panel-dashboard, .menu-lateral-fondo, thead th:last-child, tbody td:last-child, #toast, .modal-fondo { display: none !important; } .contenedor { padding: 0; max-width: 100%; } .tabla-wrap { border: none; box-shadow: none; overflow: visible; } table { min-width: 0 !important; font-size: 0.72rem; } td.nombre-celda { position: static; box-shadow: none; } } /* ---------- Usuarios y ausencias ---------- */ .fila-usuario { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--gris-100); font-size: 0.85rem; gap: 10px; } .fila-usuario .pill-rol { background: var(--acero-100); color: var(--acero-600); font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .fila-usuario .pill-rol.admin { background: var(--verde-100); color: var(--verde-600); } .fila-usuario .pill-inactivo { background: var(--oxido-100); color: var(--oxido-600); font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .fila-usuario .acciones-usuario { display: flex; gap: 6px; flex-shrink: 0; } .resultado-busqueda-persona { padding: 8px 10px; font-size: 0.83rem; cursor: pointer; border-bottom: 1px solid var(--gris-100); } .resultado-busqueda-persona:hover { background: var(--gris-100); } .resultado-busqueda-persona:last-child { border-bottom: none; }