:root { --bg: #f4f5f7; --surface: #ffffff; --border: #e5e7eb; --text: #1f2430; --text-muted: #6b7280; --primary: #4f46e5; --primary-hover: #4338ca; --primary-soft: #eef2ff; --radius-lg: 1rem; --radius-md: 0.6rem; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 8px 20px rgba(16, 24, 40, 0.08); } /* Modo oscuro: reutiliza el atributo data-bs-theme de Bootstrap 5.3, así sus propios componentes (tablas, badges, alerts, forms) cambian solos. */ [data-bs-theme="dark"] { --bg: #0f1115; --surface: #171a21; --border: #2a2f3a; --text: #e7e9ee; --text-muted: #9aa1ae; --primary: #818cf8; --primary-hover: #a5b4fc; --primary-soft: rgba(129, 140, 248, 0.16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); } /* Densidad de layout ("Refinado" vs "Denso"): independiente del claro/ oscuro, mismo mecanismo (atributo en + localStorage). Solo controla espaciados/tamaños, nunca la paleta de color. */ :root, [data-density="refinado"] { --d-card-pad: 1.1rem 1.25rem; --d-row-pad: 0.75rem 1rem; --d-font: 0.9rem; --d-title: 1.05rem; --d-gap: 0.9rem; --d-radius: var(--radius-lg); } [data-density="denso"] { --d-card-pad: 0.55rem 0.85rem; --d-row-pad: 0.4rem 0.7rem; --d-font: 0.82rem; --d-title: 0.9rem; --d-gap: 0.4rem; --d-radius: 0.4rem; } body { background: var(--bg); color: var(--text); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; transition: background 0.15s ease, color 0.15s ease; } a { color: var(--primary); } /* Topbar */ .navbar-app { background: var(--surface) !important; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .navbar-app .navbar-brand { color: var(--text) !important; font-weight: 700; letter-spacing: -0.01em; } .navbar-app .navbar-brand i { color: var(--primary); } .text-user { color: var(--text-muted) !important; font-size: 0.875rem; } .navbar-escudo { background: #fff; border-radius: 6px; padding: 2px; } /* Buttons */ .btn { border-radius: var(--radius-md); font-weight: 500; } .btn-primary { background: var(--primary); border-color: var(--primary); } .btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); } .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-ghost:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } /* Botón "Iniciar sesión con Google" (guías de marca oficiales de Google) */ .btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; background: #fff; border: 1px solid #747775; border-radius: 4px; color: #1f1f1f; font-family: "Roboto", "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; transition: background 0.15s ease, box-shadow 0.15s ease; } .btn-google:hover, .btn-google:focus { background: #f8f9fa; color: #1f1f1f; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); } .btn-google:active { background: #f1f3f4; } .btn-google-icon { display: flex; flex-shrink: 0; } [data-bs-theme="dark"] .btn-google { background: #131314; border-color: #8e918f; color: #e3e3e3; } [data-bs-theme="dark"] .btn-google:hover, [data-bs-theme="dark"] .btn-google:focus { background: #1b1b1b; color: #e3e3e3; } [data-bs-theme="dark"] .btn-google:active { background: #202124; } /* Sidebar */ .panel-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-sm); position: sticky; top: 5.5rem; } .panel-sidebar .nav-link { display: flex; align-items: center; gap: 0.6rem; color: var(--text-muted); border-radius: var(--radius-md); padding: 0.55rem 0.75rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .panel-sidebar .nav-link:hover { background: var(--primary-soft); color: var(--primary); } .panel-sidebar .nav-link.active { background: var(--primary); color: #fff; } .panel-sidebar hr { border-color: var(--border); margin: 0.75rem 0; } .aviso-pin { --cat: var(--primary); } .aviso-pin-stripe { border-radius: 2px; } .aviso-pin-title { color: var(--text); font-weight: 600; text-decoration: none; } .aviso-pin-cat { color: var(--text-muted); } [data-density="refinado"] .aviso-pin { display: block; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cat); border-radius: var(--d-radius); padding: 0.7rem 0.85rem; margin-bottom: 0.6rem; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease; } [data-density="refinado"] .aviso-pin:last-child { margin-bottom: 0; } [data-density="refinado"] .aviso-pin:hover { box-shadow: var(--shadow-md); } [data-density="refinado"] .aviso-pin.border-bottom { border-bottom: 1px solid var(--border) !important; } [data-density="refinado"] .aviso-pin-stripe { display: none; } [data-density="refinado"] .aviso-pin-title { display: block; font-size: 0.9rem; } [data-density="refinado"] .aviso-pin-cat { display: block; font-size: 0.8rem; margin-top: 0.15rem; } [data-density="denso"] .aviso-pin { display: grid; grid-template-columns: 3px 1fr auto; align-items: center; gap: 0.5rem; padding: 0.35rem 0; } [data-density="denso"] .aviso-pin-stripe { background: var(--cat); align-self: stretch; } [data-density="denso"] .aviso-pin-title { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-density="denso"] .aviso-pin-cat { font-size: 0.72rem; text-align: right; white-space: nowrap; } /* Accesos directos (sidebar izquierdo del muro) */ .accesos-title { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.7rem; } .accesos-col { display: grid; grid-template-columns: 1fr; gap: var(--d-gap); } .acceso-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--d-radius); box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; padding: var(--d-row-pad); } .acceso-btn:hover { box-shadow: var(--shadow-md); border-color: var(--primary); transform: translateY(-1px); } .acceso-btn i { font-size: 1.3rem; color: var(--primary); } .acceso-btn img { width: 22px; height: 22px; object-fit: contain; } .acceso-btn span { font-size: var(--d-font); font-weight: 600; text-align: center; line-height: 1.2; } @media (max-width: 991.98px) { .accesos-col { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } } /* Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease; } .card:hover { box-shadow: var(--shadow-md); } .badge-featured { background: var(--primary-soft); color: var(--primary); font-weight: 600; border-radius: 999px; padding: 0.35rem 0.75rem; } /* Tarjeta de aviso (muro): misma estructura HTML en los dos temas de densidad, el CSS la reacomoda por completo — de tarjeta (Refinado) a fila compacta tipo intranet (Denso). --cat lo fija cada aviso inline con el color de su categoría (o el primary si no tiene). */ .aviso-card { --cat: var(--primary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--d-radius); transition: box-shadow 0.15s ease; } .aviso-eyebrow { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #d97706; margin-bottom: 0.4rem; } .aviso-title { font-size: var(--d-title); font-weight: 700; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 0.4rem; } .aviso-title a { color: var(--text); text-decoration: none; } .aviso-unread { width: 8px; height: 8px; border-radius: 50%; background: #dc3545; display: inline-block; flex-shrink: 0; } [data-density="refinado"] .aviso-card { display: block; border-left: 3px solid var(--cat); padding: var(--d-card-pad); box-shadow: var(--shadow-sm); } [data-density="refinado"] .aviso-card:hover { box-shadow: var(--shadow-md); } [data-density="refinado"] .aviso-stripe { display: none; } [data-density="refinado"] .aviso-body { display: block; opacity: 0.85; font-size: var(--d-font); line-height: 1.55; margin: 0; } [data-density="refinado"] .aviso-meta { font-size: 0.8rem; color: var(--text-muted); margin: 0.3rem 0 0.5rem; } [data-density="denso"] .aviso-card { display: grid; grid-template-columns: 4px 1fr auto; align-items: center; gap: var(--d-gap); padding: var(--d-row-pad); } [data-density="denso"] .aviso-stripe { background: var(--cat); align-self: stretch; border-radius: 2px; } [data-density="denso"] .aviso-eyebrow { display: none; } [data-density="denso"] .aviso-body { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.78rem; color: var(--text-muted); margin: 0; } [data-density="denso"] .aviso-meta { font-size: 0.78rem; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Category chips (muro público) */ .category-chip { display: inline-block; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); padding: 0.4rem 1rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.15s ease; } .category-chip:hover { border-color: var(--primary); color: var(--primary); } .category-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* Tables (panel admin) */ .table-modern { margin-bottom: 0; } .table-modern thead th { border-bottom: 2px solid var(--border); color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } .table-modern td, .table-modern th { vertical-align: middle; border-color: var(--border); padding: var(--d-row-pad); font-size: var(--d-font); } /* Forms */ .form-control, .form-select { border-radius: var(--radius-md); border-color: var(--border); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .alert { border-radius: var(--radius-md); } /* Pantalla de login: split con panel de bienvenida */ .auth-split { min-height: calc(100vh - 4.5rem); display: flex; } .auth-split .auth-hero { flex: 1 1 50%; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 3rem; color: #fff; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); } .auth-split .auth-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.16) 0, transparent 45%), radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.12) 0, transparent 42%), radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.10) 0, transparent 30%); } .auth-split .auth-hero-content { position: relative; z-index: 1; max-width: 420px; } .auth-split .auth-hero-content p { opacity: 0.85; } .auth-hero-badge { display: inline-flex; } .auth-hero-badge img { display: block; height: 96px; width: auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25)); } .auth-split .auth-form { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--bg); } @media (max-width: 767.98px) { .auth-split { flex-direction: column; min-height: auto; } .auth-split .auth-hero { padding: 2.5rem 1.5rem; text-align: center; align-items: center; } .auth-split .auth-hero-content { max-width: none; } }