/* ===================================================================== * * UNIVERSA · Gestión de Prácticas — Hoja de estilos corporativa * * Color institucional UNIZAR (#223d71) + tipografía Myriad Pro. * * ===================================================================== */ :root { --primary-color: #223d71; --primary-dark: #1a2f57; --primary-light: #e9eef7; --accent: #c8102e; /* rojo institucional para acentos */ --bg: #f5f6f9; --surface: #ffffff; --border: #e2e6ee; --text: #1f2733; --text-muted: #6b7280; --ok: #1e7e34; --ok-bg: #e4f3e8; --no-bg: #f1f1f4; --radius: 10px; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --sidebar-w: 250px; --header-h: 84px; --footer-h: 64px; /* hueco que reserva el pie fijo (dos líneas), como en Ágora */ } /* ---- Fuentes ---- */ @font-face { font-family:'Myriad Pro'; src:url("/static/fonts/MyriadPro-Regular.d75d7f70aa16.otf") format('opentype'); font-weight:normal; } @font-face { font-family:'Myriad Pro'; src:url("/static/fonts/MyriadPro-Semibold.86bb1295004f.otf") format('opentype'); font-weight:600; } @font-face { font-family:'Myriad Pro'; src:url("/static/fonts/MyriadPro-Bold.bfc84fcb6a1c.otf") format('opentype'); font-weight:bold; } * { box-sizing: border-box; } html, body { margin:0; padding:0; } /* El color de fondo va en para que la marca de agua (#unizar-logo, z-index:-1) sea visible por detrás del contenido. */ html { background: var(--bg); } body { font-family:'Myriad Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: transparent; color: var(--text); display: flex; flex-direction: column; min-height: 100vh; /* Reserva espacio para el pie fijo (2 líneas) para que no tape el contenido. */ padding-bottom: var(--footer-h); } /* Ilustración corporativa de fondo (sello UNIZAR), fija en la esquina inferior derecha y presente en todas las páginas. */ #unizar-logo { position: fixed; bottom: 8px; /* pegada al pie, sin hueco (el footer la solapa por z-index) */ right: 0; width: 600px; height: auto; z-index: -1; opacity: 0.30; pointer-events: none; user-select: none; } a { color: var(--primary-color); text-decoration: none; } a:hover { text-decoration: underline; } /* ===================== Cabecera ===================== */ /* La cabecera es estática: hace scroll con la página (no se queda fija). */ .cabecera { height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 18px; position: relative; z-index: 30; } .logo-container img { max-height: 64px; width: auto; display: block; } .title-container h1 { margin: 0; color: var(--primary-color); font-size: 1.9rem; font-weight: bold; letter-spacing: .5px; } .title-container .subtitulo { margin: 0; color: var(--text-muted); font-size: .85rem; } .header-actions { margin-left: auto; } .user-box { display: flex; align-items: center; gap: 14px; } .user-name { display: flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--text); font-weight: 600; } .user-name svg { color: var(--primary-color); } .logout-btn { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; color: var(--primary-color); font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s ease; } .logout-btn:hover { background: var(--primary-light); } /* botón hamburguesa (móvil) */ .menu-toggle { display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px; } .menu-toggle span { width:22px; height:2px; background:var(--primary-color); border-radius:2px; } /* ===================== Layout ===================== */ .layout { flex: 1 0 auto; display: flex; align-items: stretch; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); } /* El contenido del menú se mantiene pegado arriba (sticky) sin forzar la altura del layout: así no aparece scroll vertical innecesario en páginas cortas. */ .sidebar-inner { position: sticky; top: 0; padding: 18px 12px; max-height: 100vh; overflow-y: auto; } .nav-grupo { font-size: .72rem; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin: 16px 12px 6px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--text); font-size: .92rem; transition: background .15s ease, color .15s ease; } .nav-item:hover { background: var(--primary-light); text-decoration: none; } .nav-item.activo { background: var(--primary-color); color: #fff; } .nav-item.activo .icono { color: #fff; } .nav-item .icono { color: var(--primary-color); flex-shrink: 0; } .nav-item.activo .icono { color: #fff; } .contenido { flex: 1 1 auto; padding: 28px 32px; min-width: 0; } /* --- Colapsar / expandir la barra lateral --- */ .sidebar { transition: width .2s ease; } .sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 0 10px auto; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; color: var(--primary-color); cursor: pointer; transition: background .15s ease; } .sidebar-toggle:hover { background: var(--primary-light); } .sidebar-toggle .icono { transition: transform .2s ease; } html.sidebar-colapsada .sidebar { width: 68px; } html.sidebar-colapsada .sidebar-inner { padding-left: 10px; padding-right: 10px; } html.sidebar-colapsada .nav-grupo { display: none; } html.sidebar-colapsada .nav-item { justify-content: center; padding-left: 0; padding-right: 0; } html.sidebar-colapsada .nav-item span { display: none; } html.sidebar-colapsada .sidebar-toggle { margin: 0 auto 10px; } html.sidebar-colapsada .sidebar-toggle .icono { transform: rotate(180deg); } /* ===================== Pie ===================== */ /* El pie es fijo: siempre visible en la parte inferior de la ventana. */ /* Mismas medidas que el pie de Ágora, para que las dos aplicaciones del vicerrectorado se sirvan igual. */ .pie { background: var(--primary-color); color: #fff; text-align: center; padding: 12px 0; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1000; /* Texto claro sobre fondo oscuro: sin esto macOS lo engorda y el pie se ve más pesado que el de Ágora, que lleva el suavizado en el . */ -webkit-font-smoothing: antialiased; } .pie-contenido { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .pie p { margin: 0 0 3px; } .pie p:last-child { margin-bottom: 0; } .pie-principal { font-size: 0.8em; } .pie-linea { font-size: 0.7em; } /* La universidad y el contacto van en la misma línea; el guion es adorno, así que se dibuja aquí y no en el texto, con su aire a los dos lados. */ .pie-separador { padding: 0 0.5em; } .pie a { color: #fff; text-decoration: underline; } .pie a:hover { text-decoration: none; } /* ===================== Tipografía de página ===================== */ .page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; } .page-head h2 { margin:0; color:var(--primary-color); font-size:1.6rem; display:flex; align-items:center; gap:10px; } .breadcrumb { font-size:.85rem; color:var(--text-muted); margin-bottom:6px; } .breadcrumb a { color:var(--text-muted); } /* ===================== Botones ===================== */ .btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:8px; border:1px solid transparent; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .18s ease; font-family:inherit; } .btn:hover { text-decoration:none; transform: translateY(-1px); } .btn-primary { background:var(--primary-color); color:#fff; } .btn-primary:hover { background:var(--primary-dark); color:#fff; } .btn-secondary { background:var(--surface); color:var(--primary-color); border-color:var(--border); } .btn-secondary:hover { background:var(--primary-light); } .btn-danger { background:var(--accent); color:#fff; } .btn-danger:hover { background:#a50d26; color:#fff; } .btn-sm { padding:5px 10px; font-size:.82rem; } /* ===================== Tarjetas / KPIs ===================== */ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .card-pad { padding:22px; } .kpi-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:16px; margin-bottom:28px; } .kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); display:flex; align-items:flex-start; gap:14px; transition:box-shadow .18s ease, transform .18s ease; } .kpi:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); text-decoration:none; } .kpi-icono { width:46px; height:46px; flex-shrink:0; border-radius:10px; background:var(--primary-light); color:var(--primary-color); display:flex; align-items:center; justify-content:center; } .kpi-valor { font-size:1.7rem; font-weight:bold; color:var(--primary-color); line-height:1; } /* El icono (46px) mide justo lo mismo que el valor + una línea de etiqueta, así queda centrado con el texto; si la etiqueta necesita más líneas crecen hacia abajo y el número se mantiene a la misma altura en todas las tarjetas. */ .kpi-label { font-size:.82rem; color:var(--text-muted); margin-top:3px; line-height:1.25; } .grid-2 { display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start; } /* Paneles del dashboard (cabecera + cuerpo, marco homogéneo y top alineado) */ .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; } .panel-head { padding:12px 18px; font-size:1rem; font-weight:bold; color:var(--primary-color); background:var(--primary-light); border-bottom:1px solid var(--border); } .panel-body { padding:8px 18px 14px; } .panel .dataTables_wrapper { padding:14px 16px 6px; } /* --- Vista a pantalla completa (panel de control) --- La página no hace scroll: el contenido se reparte en el alto disponible y, si algún bloque no cabe, el scroll queda dentro de su propio panel. */ body.pagina-sin-scroll { height:100vh; overflow:hidden; } body.pagina-sin-scroll .layout { flex:1 1 auto; min-height:0; } body.pagina-sin-scroll .contenido { display:flex; flex-direction:column; min-height:0; overflow:hidden; } .dashboard { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:18px; } .dashboard .page-head { margin-bottom:0; } /* KPIs más estrechos para que quepan en una sola fila (auto-fit: sin fijar cuántos son, las columnas sobrantes se colapsan). */ .dashboard .kpi-grid { flex:0 0 auto; margin-bottom:0; gap:14px; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); } .dashboard .kpi { padding:14px 16px; gap:12px; } .dashboard .grid-2 { flex:1 1 auto; min-height:0; align-items:stretch; } .dashboard .panel { display:flex; flex-direction:column; min-height:0; } .dashboard .panel-body, .dashboard .panel .dataTables_wrapper { flex:1 1 auto; min-height:0; overflow:auto; } /* En pantallas pequeñas o muy bajas se recupera el scroll normal de página. */ @media (max-width:900px), (max-height:620px) { body.pagina-sin-scroll { height:auto; overflow:visible; } body.pagina-sin-scroll .contenido { display:block; overflow:visible; } .dashboard .panel-body, .dashboard .panel .dataTables_wrapper { overflow:visible; } } /* ===================== Tablas ===================== */ .tabla-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); } table.tabla { width:100%; border-collapse:collapse; font-size:.9rem; } table.tabla thead th { background:var(--primary-light); color:var(--primary-color); text-align:left; padding:11px 14px; font-weight:600; white-space:nowrap; border-bottom:1px solid var(--border); } table.tabla tbody td { padding:10px 14px; border-bottom:1px solid var(--border); } table.tabla tbody tr { transition:background .12s ease; } table.tabla tbody tr:hover { background:#fafbfd; } table.tabla tbody tr:last-child td { border-bottom:none; } .tabla-acciones { display:flex; gap:6px; justify-content:flex-end; } .icon-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:7px; color:var(--primary-color); border:1px solid var(--border); background:var(--surface); cursor:pointer; transition:all .15s ease; } .icon-btn:hover { background:var(--primary-light); text-decoration:none; } .icon-btn.danger { color:var(--accent); } .icon-btn.danger:hover { background:#fdecef; } .vacio { text-align:center; padding:48px 20px; color:var(--text-muted); } /* ===================== Empty states (placeholders sin datos) ============== */ td.dataTables_empty { padding:0 !important; } .empty-state { display:flex; flex-direction:column; align-items:center; gap:10px; padding:48px 20px; text-align:center; color:var(--text-muted); } .empty-icono { width:72px; height:72px; border-radius:50%; flex-shrink:0; background:var(--primary-light); color:var(--primary-color); display:flex; align-items:center; justify-content:center; } .empty-state h3 { margin:6px 0 0; color:var(--text); font-size:1.05rem; } .empty-state p { margin:0; font-size:.9rem; } .empty-state .btn { margin-top:6px; } .empty-state.empty-sm { padding:30px 16px; } .empty-state.empty-sm .empty-icono { width:54px; height:54px; } .dt-sinresultados { padding:38px 20px; text-align:center; color:var(--text-muted); font-size:.92rem; } /* ===================== DataTables (estética corporativa, estilo UEZ) ===== */ /* La tabla DataTables se envuelve en .tabla-wrap para mantener el marco. */ .tabla-wrap .dataTables_wrapper { padding:14px 16px 6px; font-family:inherit; } /* Controles superiores: "Mostrar N registros" y "Buscar" */ .dataTables_length, .dataTables_filter { margin-bottom:12px; } .dataTables_length label, .dataTables_filter label { font-size:.86rem; color:var(--text-muted); display:flex; align-items:center; gap:8px; } /* El