/* ============================================================ Mesa de Soporte — El Zarzal styles.css ============================================================ */ /* ===== FUENTE Y BASE ===== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); :root { --primary: #0066b3; --primary-dark: #004d86; --primary-light: #3399cc; --secondary: #00a651; --warning: #f7941d; --danger: #ed1c24; --grad-primary: linear-gradient(135deg, #0066b3 0%, #004d86 100%); --grad-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); --shadow-sm: 0 1px 4px rgba(0,0,0,.08); --shadow-md: 0 4px 16px rgba(0,0,0,.10); --shadow-lg: 0 10px 30px rgba(0,0,0,.15); --radius: 10px; --radius-sm: 6px; --transition: 0.2s ease; } * { box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 0.9rem; color: #212529; background-color: #f4f6f9; } /* ============================================================ BOTÓN DE TEMA (navbar) — visible en claro y oscuro ============================================================ */ .nav-theme-toggle { color: rgba(255, 255, 255, .85); background: transparent; border: none; font-size: 1.1rem; line-height: 1; padding: .35rem .6rem; border-radius: 8px; transition: background var(--transition), color var(--transition); } .nav-theme-toggle:hover { background: rgba(255, 255, 255, .15); color: #fff; } /* ============================================================ MODO OSCURO · data-bs-theme="dark" en Solo aplica a páginas internas (las que cargan header/footer); el login es una página aparte y no se ve afectado. Bootstrap 5.3 reestiliza sus propios componentes; aquí se ajustan las superficies que el CSS propio fija en blanco/gris claro. ============================================================ */ [data-bs-theme="dark"] { --surface: #1e2530; --surface-2: #262e3b; --surface-hover: #2b3444; --txt: #e6e9ef; --bd: rgba(255, 255, 255, .10); } [data-bs-theme="dark"] body { background-color: #12161c; color: var(--txt); } /* Superficies con fondo blanco fijo → superficie oscura */ [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .user-info-panel, [data-bs-theme="dark"] .user-summary-card, [data-bs-theme="dark"] .dash-greeting, [data-bs-theme="dark"] .filter-bar, [data-bs-theme="dark"] .stat-mini, [data-bs-theme="dark"] .pro-table-card, [data-bs-theme="dark"] .filter-empty, [data-bs-theme="dark"] .kanban-col-header, [data-bs-theme="dark"] .kanban-card { background: var(--surface); border-color: var(--bd); } [data-bs-theme="dark"] .card-header { border-bottom-color: var(--bd); } /* Rellenos gris claro (inputs de filtro, encabezados de tabla, columnas kanban…) */ [data-bs-theme="dark"] .filter-bar .filter-search input, [data-bs-theme="dark"] .filter-bar .filter-select, [data-bs-theme="dark"] .filter-bar .view-toggle, [data-bs-theme="dark"] .mis-tickets-table thead th, [data-bs-theme="dark"] .pro-table thead th, [data-bs-theme="dark"] .table-light th, [data-bs-theme="dark"] .kanban-col { background: var(--surface-2); color: var(--txt); border-color: var(--bd); } /* Texto oscuro fijo → claro */ [data-bs-theme="dark"] .ticket-info-row dd, [data-bs-theme="dark"] .stat-mini-value, [data-bs-theme="dark"] .kanban-card-title, [data-bs-theme="dark"] .dash-action-btn, [data-bs-theme="dark"] .dash-stat-number { color: var(--txt); } /* Bordes/divisores claros → tenues */ [data-bs-theme="dark"] .table tbody td, [data-bs-theme="dark"] .mis-tickets-table tbody td, [data-bs-theme="dark"] .pro-table tbody td, [data-bs-theme="dark"] .kanban-card-meta, [data-bs-theme="dark"] .filter-bar .filter-divider, [data-bs-theme="dark"] .role-info-item { border-color: var(--bd) !important; } /* Mini-barras de progreso */ [data-bs-theme="dark"] .dash-stat-bar, [data-bs-theme="dark"] .kanban-card-progress, [data-bs-theme="dark"] .password-strength { background: var(--surface-2); } /* Hovers de filas claros → oscuros */ [data-bs-theme="dark"] .table-hover tbody tr:hover, [data-bs-theme="dark"] .mis-tickets-row:hover, [data-bs-theme="dark"] .pro-table tbody tr:hover, [data-bs-theme="dark"] .dash-ticket-item:hover { background: var(--surface-hover); color: var(--txt); } [data-bs-theme="dark"] .filter-bar .view-toggle button.active { background: var(--surface); box-shadow: none; } /* Chips de número de ticket (fondo claro tintado → tinte oscuro legible) */ [data-bs-theme="dark"] .ticket-num-chip, [data-bs-theme="dark"] .dash-ticket-num { background: rgba(0, 102, 179, .22); color: #cfe8ff; } /* Scrollbar horizontal de tablas en modo oscuro */ [data-bs-theme="dark"] .table-responsive, [data-bs-theme="dark"] .table-scroll-top { scrollbar-color: var(--primary-light) rgba(255, 255, 255, .10); } [data-bs-theme="dark"] .table-responsive::-webkit-scrollbar-track, [data-bs-theme="dark"] .table-scroll-top::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); } [data-bs-theme="dark"] .table-responsive::-webkit-scrollbar-thumb, [data-bs-theme="dark"] .table-scroll-top::-webkit-scrollbar-thumb { background: var(--primary-light); } /* ============================================================ LOGIN — LAYOUT SPLIT (rediseño premium) ============================================================ */ .login-body { min-height: 100vh; display: flex; align-items: stretch; padding: 0; margin: 0; background: #0a1628; } .login-split { display: flex; width: 100%; min-height: 100vh; } /* ── PANEL IZQUIERDO ─────────────────────────────────────── */ .login-panel-left { flex: 0 0 52%; background: linear-gradient(150deg, #071020 0%, #0d2550 45%, #0e3a7a 100%); display: flex; align-items: center; justify-content: center; padding: 60px 50px; position: relative; overflow: hidden; } /* Círculos decorativos individuales */ .login-deco-circle { position: absolute; border-radius: 50%; pointer-events: none; } .login-deco-circle--1 { width: 520px; height: 520px; top: -180px; right: -160px; background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%); border: 1px solid rgba(255,255,255,.04); } .login-deco-circle--2 { width: 320px; height: 320px; bottom: -100px; left: -80px; background: radial-gradient(circle, rgba(0,166,81,.08) 0%, transparent 70%); border: 1px solid rgba(0,166,81,.06); } .login-deco-circle--3 { width: 180px; height: 180px; top: 40%; left: 10%; background: radial-gradient(circle, rgba(255,255,255,.03) 0%, transparent 70%); } /* Barra verde fija en el borde inferior (escritorio y móvil) */ .login-green-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #00a651 0%, #20c997 50%, #0066b3 100%); z-index: 9999; } .login-brand-content { position: relative; z-index: 1; color: #fff; max-width: 400px; width: 100%; } /* Logo del panel izquierdo */ .login-logo-wrap { display: inline-block; } .login-logo-img { width: 140px; height: 140px; object-fit: contain; border-radius: 50%; background: #fff; padding: 10px; box-shadow: 0 0 0 6px rgba(255,255,255,.1), 0 0 0 12px rgba(255,255,255,.05), 0 20px 60px rgba(0,0,0,.4); transition: transform .3s ease, box-shadow .3s ease; display: block; } .login-logo-img:hover { transform: scale(1.05) rotate(-1deg); box-shadow: 0 0 0 6px rgba(255,255,255,.15), 0 0 0 14px rgba(255,255,255,.07), 0 24px 70px rgba(0,0,0,.5); } /* Logo panel derecho — mini */ .login-logo-img-mobile { width: 88px; height: 88px; object-fit: contain; border-radius: 50%; background: #fff; padding: 6px; box-shadow: 0 6px 24px rgba(0,102,179,.25); border: 3px solid rgba(0,102,179,.12); display: block; margin: 0 auto; } /* Mini logo dentro de la card */ .login-card-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.15); border: 2px solid #e8ecf4; flex-shrink: 0; } /* Título y subtítulo del panel izquierdo */ .login-brand-title { font-size: 1.85rem; font-weight: 700; margin: 0 0 6px; line-height: 1.2; letter-spacing: -.3px; } .login-brand-sub { opacity: 0.65; font-size: 0.88rem; font-weight: 400; margin: 0; line-height: 1.5; } /* Separador verde */ .login-divider { height: 3px; width: 48px; background: linear-gradient(90deg, #00a651, #20c997); border-radius: 99px; } /* Features */ .login-features { list-style: none; padding: 0; margin: 0; } .login-features li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .login-features li:last-child { border-bottom: none; } .login-features li strong { display: block; font-size: .88rem; font-weight: 600; color: #fff; margin-bottom: 1px; } .login-features li small { font-size: .78rem; color: rgba(255,255,255,.5); } .feature-icon { width: 38px; height: 38px; min-width: 38px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: rgba(255,255,255,.9); backdrop-filter: blur(4px); margin-top: 1px; } /* Footer del panel */ .login-brand-footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .login-since { font-size: .78rem; color: rgba(255,255,255,.4); letter-spacing: .3px; } /* Badge "en línea" */ .badge-online { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,166,81,.15); border: 1px solid rgba(0,166,81,.35); color: #6effc0; padding: 5px 12px; border-radius: 50px; font-size: 0.78rem; font-weight: 500; } .badge-online i { font-size: .42rem; color: #00d084; } /* ── PANEL DERECHO ───────────────────────────────────────── */ .login-panel-right { flex: 1; background: #f0f4fb; display: flex; align-items: center; justify-content: center; padding: 48px 32px; } .login-form-outer { width: 100%; max-width: 420px; } /* Card del formulario */ .login-card { background: #fff; border-radius: 20px; box-shadow: 0 4px 6px rgba(0,0,0,.04), 0 20px 60px rgba(0,30,80,.10); overflow: hidden; } /* Barra de color en el top de la card */ .login-card-accent { height: 5px; background: linear-gradient(90deg, #0066b3 0%, #20c997 100%); } .login-card-body { padding: 36px 36px 28px; } /* Título y subtítulo del form */ .login-form-title { font-size: 1.55rem; font-weight: 700; color: #0d1b3e; margin-bottom: 4px; letter-spacing: -.3px; } .login-form-sub { color: #7b8ea8; font-size: .85rem; margin-bottom: 0; line-height: 1.5; } /* Labels */ .login-label { display: block; font-weight: 600; font-size: .82rem; color: #3d4f6a; margin-bottom: 6px; letter-spacing: .1px; } /* Inputs */ .login-input { border-radius: 10px !important; border: 1.5px solid #dde3ee !important; background: #f7f9fc !important; padding: .65rem 1rem !important; font-size: .9rem !important; color: #1a1a2e !important; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition) !important; } .login-input:focus { border-color: var(--primary) !important; background: #fff !important; box-shadow: 0 0 0 3.5px rgba(0,102,179,.12) !important; outline: none !important; } .login-input::placeholder { color: #b0bdd0 !important; } /* Enlace "¿olvidaste?" */ .login-forgot { font-size: .8rem; color: var(--primary); text-decoration: none; font-weight: 500; transition: opacity var(--transition); } .login-forgot:hover { opacity: .75; } /* Botón de login */ .btn-login { background: linear-gradient(135deg, #0066b3 0%, #0080d8 100%); border: none; padding: 13px; font-weight: 600; font-size: .92rem; letter-spacing: .3px; border-radius: 10px; color: #fff; transition: transform var(--transition), box-shadow var(--transition); box-shadow: 0 4px 16px rgba(0,102,179,.35); } .btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,102,179,.45); color: #fff; } .btn-login:active { transform: translateY(0); } /* Versión */ .login-version { text-align: center; color: #b0bdd0; font-size: .75rem; margin-top: 24px; margin-bottom: 0; display: flex; align-items: center; justify-content: center; gap: 6px; } .login-version-dot { display: inline-block; width: 6px; height: 6px; background: #00d084; border-radius: 50%; flex-shrink: 0; } /* ── PÁGINAS AUXILIARES (recuperar / restablecer contraseña) ── */ .login-auth-body { background: linear-gradient(150deg, #071020 0%, #0d2550 50%, #0e3a7a 100%); min-height: 100vh; margin: 0; padding: 0; } .login-auth-page { min-height: 100vh; min-height: 100dvh; /* Dynamic viewport height: respeta el teclado en mobile */ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; box-sizing: border-box; width: 100%; } .login-auth-page .login-card { max-width: 420px; width: 100%; margin-left: auto !important; margin-right: auto !important; } /* Responsive auth pages */ @media (max-width: 576px) { .login-auth-page { padding: 24px 12px; justify-content: flex-start; } .login-auth-page .login-card-body { padding: 24px 20px 20px; } .login-auth-page .login-logo-img-mobile { width: 70px !important; height: 70px !important; } .login-auth-page h4 { font-size: 1.1rem !important; } .login-auth-page h5 { font-size: 1rem !important; } } /* Ícono grande centrado de estado */ .login-auth-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,102,179,.1); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; } .login-auth-icon--success { background: rgba(0,166,81,.1); color: #00a651; } .login-auth-icon--danger { background: rgba(237,28,36,.1); color: #ed1c24; } .login-auth-icon--warning { background: rgba(247,148,29,.1); color: #f7941d; } /* Avatar del usuario en restablecer */ .login-auth-user-avatar { width: 40px; height: 40px; background: var(--grad-primary); border-radius: 50%; color: #fff; font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ============================================================ NAVBAR ============================================================ */ .bg-primary-gradient { background: var(--grad-dark) !important; box-shadow: 0 2px 12px rgba(0,0,0,.25); } .navbar-brand { font-weight: 700; font-size: 1rem; letter-spacing: 0.2px; } /* Nav link */ .navbar-dark .navbar-nav .nav-link { font-size: 0.875rem; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition); color: rgba(255,255,255,.75); } .navbar-dark .navbar-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; } .navbar-dark .navbar-nav .nav-link.active { background: rgba(255,255,255,.12); color: #fff; } /* Avatar inicial del usuario */ .nav-avatar { width: 30px; height: 30px; background: var(--primary); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; color: #fff; flex-shrink: 0; } /* Dropdown oscuro */ .dropdown-menu-dark { background: #1e2332; border: 1px solid rgba(255,255,255,.08) !important; } .dropdown-menu-dark .dropdown-item { color: rgba(255,255,255,.8); font-size: 0.875rem; border-radius: var(--radius-sm); transition: background var(--transition); } .dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus { background: rgba(255,255,255,.08); color: #fff; } .dropdown-menu-dark .dropdown-item.active { background: var(--primary); color: #fff; } .dropdown-menu-dark .dropdown-divider { border-color: rgba(255,255,255,.1); } .dropdown-menu-dark .dropdown-item-text { padding: 8px 16px; } .dropdown-menu-dark .dropdown-item-text small, .dropdown-menu-dark .dropdown-item-text .text-muted { color: #8fa5bb !important; } .dropdown-menu-dark .text-danger { color: #ff6b6b !important; } .dropdown-menu-dark .text-danger:hover { background: rgba(237,28,36,.15) !important; } /* ============================================================ BOTONES ============================================================ */ .btn { font-weight: 500; font-size: 0.875rem; border-radius: var(--radius-sm); transition: all var(--transition); } .btn-primary { background: var(--primary); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); } .btn-success { background: var(--secondary); border-color: var(--secondary); } .btn-warning { background: var(--warning); border-color: var(--warning); } .btn-danger { background: var(--danger); border-color: var(--danger); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); } /* ============================================================ CARDS ============================================================ */ .card { border: none; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); } .card:hover { box-shadow: var(--shadow-md); } .card-header { background: #fff; border-bottom: 1px solid #f0f0f0; font-weight: 600; padding: 14px 20px; border-radius: var(--radius) var(--radius) 0 0 !important; } .card-header h5, .card-header h6 { margin-bottom: 0; font-weight: 600; } /* Stats cards */ .card-stats { border-radius: var(--radius); transition: transform var(--transition), box-shadow var(--transition); } .card-stats:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* ============================================================ BADGES ============================================================ */ .badge { font-weight: 500; letter-spacing: 0.2px; padding: 4px 8px; border-radius: 4px; } .badge.bg-primary { background: var(--primary) !important; } .badge.bg-success { background: var(--secondary) !important; } .badge.bg-warning { background: var(--warning) !important; color: #fff !important; } .badge.bg-danger { background: var(--danger) !important; } /* ============================================================ TABLAS ============================================================ */ .table { font-size: 0.875rem; } .table thead th { font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; border-bottom: 1px solid #e9ecef; padding: 10px 12px; } .table tbody td { padding: 10px 12px; vertical-align: middle; border-color: #f0f0f0; } .table-hover tbody tr:hover { background-color: #f8f9ff; } .table-light th { background-color: #f8f9fa; } /* Barra de desplazamiento horizontal visible en tablas anchas (para ver todo el contenido en pantallas pequeñas). .table-scroll-top es una barra gemela que se inyecta por JS arriba de la tabla, sincronizada con la de abajo. */ .table-responsive, .table-scroll-top { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--primary) rgba(0, 0, 0, .08); } .table-responsive { padding-bottom: 2px; } /* Barra superior gemela */ .table-scroll-top { overflow-y: hidden; margin-bottom: 4px; } .table-scroll-top-inner { height: 1px; } .table-responsive::-webkit-scrollbar, .table-scroll-top::-webkit-scrollbar { height: 12px; } .table-responsive::-webkit-scrollbar-track, .table-scroll-top::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); border-radius: 10px; } .table-responsive::-webkit-scrollbar-thumb, .table-scroll-top::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } .table-responsive::-webkit-scrollbar-thumb:hover, .table-scroll-top::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); } /* ============================================================ FORMULARIOS ============================================================ */ .form-control, .form-select { border-radius: var(--radius-sm); border-color: #dee2e6; font-size: 0.875rem; transition: border-color var(--transition), box-shadow var(--transition); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,102,179,.10); } .form-label { font-weight: 500; font-size: 0.875rem; margin-bottom: 4px; } /* ============================================================ INPUT PASSWORD CON OJITO ============================================================ */ .input-password-wrapper { position: relative; } .input-password-wrapper input { padding-right: 45px; } .toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #6c757d; background: none; border: none; padding: 4px; line-height: 1; } .toggle-password:hover { color: var(--primary); } /* ============================================================ TIMELINE COMENTARIOS ============================================================ */ .timeline-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; } .timeline-item:last-child hr { display: none; } /* ============================================================ FOOTER ============================================================ */ .footer-professional { background: var(--grad-dark); box-shadow: 0 -4px 20px rgba(0,0,0,.2); } .footer-professional h5 { font-weight: 700; letter-spacing: 0.3px; color: #fff !important; } .footer-professional h6 { font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid var(--primary); padding-bottom: 6px; display: inline-block; color: #fff !important; } .footer-professional p, .footer-professional small, .footer-professional span { color: #b8c5d6 !important; } .footer-links li a, .footer-contact li a { color: #b8c5d6 !important; text-decoration: none; transition: all var(--transition); font-size: 0.875rem; } .footer-links li a:hover, .footer-contact li a:hover { color: #64ffda !important; padding-left: 4px; } .footer-contact .text-white, .footer-schedule .text-white { color: #fff !important; } .footer-social .btn:hover { background-color: var(--primary); border-color: var(--primary); transform: translateY(-2px); } .footer-bottom { background: rgba(0,0,0,.2); } .footer-bottom a { color: #9ca3af !important; text-decoration: none; font-size: 0.8rem; transition: color var(--transition); } .footer-bottom a:hover { color: #64ffda !important; } .footer-bottom .text-muted { color: #9ca3af !important; font-size: 0.8rem; } .support-24 { background: rgba(25,135,84,.15); border: 1px solid rgba(25,135,84,.35); border-radius: var(--radius-sm); } .support-24 small, .support-24 strong { color: #fff !important; } .bg-dark-subtle { background: rgba(255,255,255,.05); } /* ============================================================ UTILIDADES ============================================================ */ .button { color: #fff; } /* ============================================================ RESPONSIVE — BREAKPOINT LG (< 992px) Login: fondo oscuro completo, card centrada ============================================================ */ @media (max-width: 991px) { /* El body mantiene el fondo oscuro igual que el panel izquierdo */ .login-body { background: linear-gradient(150deg, #071020 0%, #0d2550 50%, #0e3a7a 100%); } /* El split apila en columna */ .login-split { flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; position: relative; } /* Círculos decorativos en móvil usando pseudo-elementos del split */ .login-split::before, .login-split::after { content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; } .login-split::before { width: 400px; height: 400px; top: -120px; right: -120px; background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%); } .login-split::after { width: 260px; height: 260px; bottom: -80px; left: -60px; background: radial-gradient(circle, rgba(0,166,81,.07) 0%, transparent 70%); } /* Panel derecho: transparente, ocupa toda la pantalla */ .login-panel-right { flex: 1; width: 100%; background: transparent; display: flex; align-items: center; justify-content: center; padding: 40px 20px; position: relative; z-index: 1; } .login-form-outer { width: 100%; max-width: 460px; } /* Texto del header móvil sobre fondo oscuro */ .d-lg-none.text-center h4 { color: #fff !important; } .d-lg-none.text-center p { color: rgba(255,255,255,.55) !important; } /* Card ligeramente más compacta */ .login-card-body { padding: 28px 28px 22px; } } /* ============================================================ RESPONSIVE — BREAKPOINT MD (< 768px) ============================================================ */ @media (max-width: 768px) { /* Navbar */ .navbar-brand { font-size: 0.875rem; } .container-fluid { padding-left: 12px; padding-right: 12px; } /* Tipografía general */ h2 { font-size: 1.35rem !important; } h4 { font-size: 1.1rem; } h6 { font-size: .875rem; } /* Cards */ .card { box-shadow: var(--shadow-sm); } .card-body { padding: 1rem; } .card-header { padding: .75rem 1rem; } /* Tablas */ .table-responsive { font-size: .8rem; } .table th, .table td { padding: 6px 8px; } .hide-mobile { display: none !important; } /* Botones */ .btn-sm { padding: 4px 8px; font-size: .75rem; } /* Dashboard — stat cards */ .dash-stat-card .card-body { padding: 1rem !important; } .dash-stat-number { font-size: 1.8rem !important; } .dash-stat-icon { width: 44px !important; height: 44px !important; font-size: 1.2rem !important; } /* Dashboard greeting */ .dash-greeting { padding: 1rem !important; } .dash-greeting-avatar { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; } /* Acciones rápidas */ .dash-action-btn { padding: .6rem .8rem; gap: .5rem; } .dash-action-icon { width: 36px !important; height: 36px !important; font-size: .95rem !important; } /* Categorías — forzar 1 columna en pantallas pequeñas */ .cat-card .card-body { padding: 1rem !important; } /* Ticket chip */ .ticket-num-chip { font-size: .7rem; padding: .2rem .45rem; } /* Profile card */ .profile-avatar { width: 64px !important; height: 64px !important; font-size: 1.6rem !important; } /* User avatar */ .user-avatar { width: 44px !important; height: 44px !important; font-size: 1rem !important; } /* Footer */ .footer-professional { font-size: .8rem; } .footer-bottom .row > div { text-align: center !important; } } /* ============================================================ RESPONSIVE — BREAKPOINT SM (< 576px) ============================================================ */ @media (max-width: 576px) { /* Login card sin bordes redondeados laterales */ .login-card { border-radius: 16px; } .login-card-body { padding: 22px 18px 18px; } .login-logo-img-mobile { width: 76px; height: 76px; } .login-form-title { font-size: 1.3rem; } /* General */ .container-fluid { padding-left: 10px; padding-right: 10px; } main.container-fluid { padding-top: 1rem !important; padding-bottom: 1rem !important; } /* Botones full-width en móvil pequeño */ .btn-mobile-full { width: 100%; margin-bottom: 8px; } /* Navbar */ .nav-avatar { width: 28px; height: 28px; font-size: .75rem; } .navbar-brand { font-size: .82rem; } /* Tablas: fuente más pequeña */ .table th, .table td { font-size: .75rem; padding: 5px 6px; } /* Cards */ .card { border-radius: var(--radius-sm) !important; } /* Footer multi-col → 1 col */ .footer-professional .col-lg-4, .footer-professional .col-lg-2, .footer-professional .col-lg-3 { text-align: center; } .footer-contact li, .footer-schedule li { justify-content: center !important; } /* Mini stat cards en el dashboard/mis-tickets */ .row.g-3 > .col-6 { padding: 0 6px; } /* Modales: full width en móvil */ .modal-dialog { margin: 8px; } } /* ============================================================ BADGES DE PRIORIDAD ============================================================ */ .badge.priority-baja { background-color: #6c757d; color: #fff; } .badge.priority-media { background-color: #0d6efd; color: #fff; } .badge.priority-alta { background-color: #fd7e14; color: #fff; } .badge.priority-critica { background-color: #dc3545; color: #fff; /* Pulso sutil para llamar la atención */ animation: pulse-critica 2s ease-in-out infinite; } @keyframes pulse-critica { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,.5); } 50% { box-shadow: 0 0 0 4px rgba(220,53,69,0); } } /* ============================================================ FOOTER — COMPONENTES NUEVOS ============================================================ */ /* Logo del footer */ .footer-logo { width: 44px; height: 44px; background: rgba(255,255,255,.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; flex-shrink: 0; } /* Título de sección */ .footer-section-title { font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: #fff !important; border-bottom: 2px solid var(--primary); padding-bottom: 6px; margin-bottom: 14px; display: inline-block; } /* Links del footer */ .footer-links li, .footer-contact li, .footer-schedule li { margin-bottom: 8px; } .footer-links a { color: #8fa5bb !important; text-decoration: none; font-size: 0.875rem; transition: color var(--transition), padding-left var(--transition); display: block; } .footer-links a:hover { color: #64ffda !important; padding-left: 4px; } /* Pills de servicio */ .footer-service-pills { display: flex; flex-wrap: wrap; gap: 8px; } .footer-pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); border-radius: 50px; padding: 4px 12px; font-size: 0.78rem; color: #8fa5bb; } /* Punto pulsante pequeño (para pills) */ .dot-pulse-sm { width: 6px; height: 6px; background: #00d084; border-radius: 50%; flex-shrink: 0; animation: dot-pulse-anim 1.5s ease-in-out infinite; } /* Badge 24/7 */ .footer-badge-24 { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,166,81,.12); border: 1px solid rgba(0,166,81,.3); border-radius: 6px; padding: 6px 12px; } /* Punto pulsante */ .dot-pulse { width: 8px; height: 8px; background: #00d084; border-radius: 50%; flex-shrink: 0; animation: dot-pulse-anim 1.5s ease-in-out infinite; } @keyframes dot-pulse-anim { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,208,132,.5); } 50% { box-shadow: 0 0 0 5px rgba(0,208,132,0); } } /* Footer contact list items */ .footer-contact li { margin-bottom: 14px; } .footer-schedule li { margin-bottom: 10px; } /* ============================================================ USUARIOS — CARDS / AVATARES / ROLES ============================================================ */ /* Tarjeta de usuario */ .user-card { border: none; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); overflow: hidden; } .user-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .user-card--inactive { opacity: 0.70; } /* Banda superior de color por rol */ .user-card-band { height: 4px; width: 100%; } .user-card-band--admin { background: linear-gradient(90deg, #0066b3, #3399cc); } .user-card-band--tecnico { background: linear-gradient(90deg, #00a651, #20c997); } .user-card-band--usuario { background: linear-gradient(90deg, #6c757d, #adb5bd); } /* Avatar circular con inicial */ .user-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: #fff; flex-shrink: 0; position: relative; } .user-avatar--lg { width: 72px; height: 72px; font-size: 1.8rem; } .user-avatar-inactive { position: absolute; bottom: -2px; right: -2px; background: #fff; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #dc3545; box-shadow: 0 0 0 1px #fff; } /* Badges de rol */ .badge.rol-admin { background-color: #0066b3; color: #fff; } .badge.rol-tecnico { background-color: #00a651; color: #fff; } .badge.rol-usuario { background-color: #6c757d; color: #fff; } /* Badges de estado y especiales */ .badge.user-badge-you { background-color: rgba(0,102,179,.12); color: var(--primary); border: 1px solid rgba(0,102,179,.25); font-size: 0.72rem; } .badge.user-badge-activo { background-color: rgba(0,166,81,.12); color: #00a651; border: 1px solid rgba(0,166,81,.25); } .badge.user-badge-inactivo { background-color: rgba(108,117,125,.1); color: #6c757d; border: 1px solid rgba(108,117,125,.25); } /* Tamaño de badge dentro de cabeceras */ .fs-badge { font-size: 0.82rem; } /* ============================================================ PERFIL — TARJETA DE IDENTIDAD ============================================================ */ .profile-id-card { border: none; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } /* Cabecera con degradado */ .profile-card-header { background: var(--grad-primary); height: 100px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0; position: relative; } /* Avatar grande centrado sobre la cabecera */ .profile-avatar { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 2.4rem; color: #fff; border: 4px solid #fff; box-shadow: var(--shadow-md); margin-bottom: -44px; position: relative; z-index: 1; } /* ============================================================ BARRA DE FORTALEZA DE CONTRASEÑA ============================================================ */ .password-strength { height: 4px; background: #e9ecef; border-radius: 99px; overflow: hidden; } .strength-fill { height: 100%; width: 0; border-radius: 99px; transition: width 0.3s ease, background 0.3s ease; } /* ============================================================ PANELES INFORMATIVOS — CREAR / EDITAR USUARIO ============================================================ */ .user-info-panel { border: none; border-radius: var(--radius); box-shadow: var(--shadow-sm); background: #fff; } .role-info-item { border-left: 3px solid #e9ecef; padding-left: 10px; } /* Tarjeta resumen de usuario (en editar) */ .user-summary-card { border: none; border-radius: var(--radius); box-shadow: var(--shadow-sm); background: #fff; } /* ============================================================ DASHBOARD ============================================================ */ /* Saludo */ .dash-greeting { background: #fff; border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-sm); } .dash-greeting-avatar { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; color: #fff; flex-shrink: 0; } /* Frase del día (Gemini) en la cabecera del dashboard */ .dash-frase { min-width: 240px; max-width: 640px; } .dash-frase-card { display: flex; align-items: flex-start; gap: 14px; background: linear-gradient(120deg, #fff4ec 0%, #fdeef6 55%, #eef1ff 100%); border: 1px solid rgba(247, 148, 29, .18); border-radius: 14px; padding: 12px 16px; } .dash-frase-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f7941d, #ff7e5f); color: #fff; font-size: 1.15rem; box-shadow: 0 4px 12px rgba(247, 148, 29, .35); } .dash-frase-label { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #f7941d; margin-bottom: 2px; } .dash-frase-text { font-size: .88rem; color: #344054; line-height: 1.45; font-style: italic; } .dash-frase-accion { font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none; } .dash-frase-accion:hover { text-decoration: underline; } [data-bs-theme="dark"] .dash-frase-card { background: linear-gradient(120deg, rgba(247,148,29,.12), rgba(111,66,193,.12) 60%, rgba(0,102,179,.12)); border-color: rgba(247, 148, 29, .25); } [data-bs-theme="dark"] .dash-frase-text { color: #d8dee9; } [data-bs-theme="dark"] .dash-frase-label { color: #ffb454; } /* Tarjetas de estadísticas */ .dash-stat-card { border: none; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); position: relative; overflow: hidden; } .dash-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .dash-stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* Variantes de color */ .dash-stat-danger::before { background: var(--danger); } .dash-stat-warning::before { background: var(--warning); } .dash-stat-success::before { background: var(--secondary); } .dash-stat-primary::before { background: var(--primary); } .dash-stat-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: #6c757d; margin-bottom: 4px; } .dash-stat-number { font-size: 2.2rem; font-weight: 700; margin-bottom: 4px; line-height: 1; } .dash-stat-sub { font-size: 0.78rem; color: #9ca3af; } .dash-stat-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .dash-stat-danger .dash-stat-icon { background: rgba(237,28,36,.1); color: var(--danger); } .dash-stat-warning .dash-stat-icon { background: rgba(247,148,29,.1); color: var(--warning); } .dash-stat-success .dash-stat-icon { background: rgba(0,166,81,.1); color: var(--secondary); } .dash-stat-primary .dash-stat-icon { background: rgba(0,102,179,.1); color: var(--primary); } /* Mini barra de progreso en cada stat card */ .dash-stat-bar { height: 4px; background: #f0f0f0; border-radius: 99px; overflow: hidden; } .dash-stat-bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s ease; } .dash-stat-danger .dash-stat-bar-fill { background: var(--danger); } .dash-stat-warning .dash-stat-bar-fill { background: var(--warning); } .dash-stat-success .dash-stat-bar-fill { background: var(--secondary); } .dash-stat-primary .dash-stat-bar-fill { background: var(--primary); } .dash-stat-pct { font-size: 0.75rem; color: #9ca3af; display: block; margin-top: 4px; } /* === Card de Acciones Rápidas === */ .dash-quick-card { border-top: 3px solid var(--primary); } .dash-quick-header { background: linear-gradient(135deg, rgba(0,102,179,.04) 0%, rgba(0,102,179,.01) 100%); border-bottom: 1px solid rgba(0,102,179,.08); padding: 14px 16px; } .dash-quick-header-icon { width: 28px; height: 28px; border-radius: 7px; background: rgba(247,148,29,.12); color: var(--warning); display: flex; align-items: center; justify-content: center; font-size: .85rem; } /* Botones de acción rápida */ .dash-action-btn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); text-decoration: none; font-size: 0.875rem; transition: all 0.2s ease; color: #212529; border: 1px solid transparent; position: relative; overflow: hidden; } .dash-action-btn::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0 2px 2px 0; opacity: 0; transition: opacity 0.2s ease; } .dash-action-btn:hover { transform: translateY(-1px); color: #212529; } .dash-action-btn:hover::before { opacity: 1; } .dash-action-btn small { color: #9ca3af; font-size: 0.78rem; display: block; } .dash-action-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; background: rgba(0,102,179,.1); color: var(--primary); transition: transform 0.2s ease; } .dash-action-btn:hover .dash-action-icon { transform: scale(1.08); } .dash-action-arrow { color: #ced4da; font-size: 0.75rem; transition: transform 0.2s ease, color 0.2s ease; } .dash-action-btn:hover .dash-action-arrow { transform: translateX(3px); color: #6c757d; } /* Variantes de acción */ .dash-action-primary { background: rgba(0,102,179,.04); border-color: rgba(0,102,179,.10); } .dash-action-primary:hover { background: rgba(0,102,179,.08); border-color: rgba(0,102,179,.2); box-shadow: 0 4px 12px rgba(0,102,179,.10); } .dash-action-primary::before { background: var(--primary); } .dash-action-secondary { background: rgba(108,117,125,.04); border-color: rgba(108,117,125,.10); } .dash-action-secondary:hover { background: rgba(108,117,125,.08); border-color: rgba(108,117,125,.2); } .dash-action-icon--secondary { background: rgba(108,117,125,.1); color: #6c757d; } .dash-action-secondary::before { background: #6c757d; } .dash-action-danger { background: rgba(237,28,36,.04); border-color: rgba(237,28,36,.10); } .dash-action-danger:hover { background: rgba(237,28,36,.08); border-color: rgba(237,28,36,.2); box-shadow: 0 4px 12px rgba(237,28,36,.10); } .dash-action-icon--danger { background: rgba(237,28,36,.1); color: var(--danger); } .dash-action-danger::before { background: var(--danger); } .dash-action-purple { background: rgba(111,66,193,.04); border-color: rgba(111,66,193,.10); } .dash-action-purple:hover { background: rgba(111,66,193,.08); border-color: rgba(111,66,193,.2); box-shadow: 0 4px 12px rgba(111,66,193,.10); } .dash-action-icon--purple { background: rgba(111,66,193,.1); color: #6f42c1; } .dash-action-purple::before { background: #6f42c1; } /* Tickets recientes — filas */ .dash-ticket-item { padding: 14px 20px; border-left: none; border-right: none; border-color: #f0f0f0 !important; transition: background var(--transition); } .dash-ticket-item:hover { background: #f8f9ff; } .dash-ticket-item:first-child { border-top: none; } .dash-ticket-num { background: #f4f6f9; border-radius: var(--radius-sm); padding: 4px 8px; font-size: 0.75rem; font-weight: 600; color: var(--primary); white-space: nowrap; flex-shrink: 0; } /* Estado badges del dashboard */ .badge.dash-estado-pendiente { background-color: rgba(237,28,36,.12); color: #c82333; border: 1px solid rgba(237,28,36,.2); } .badge.dash-estado-enproceso { background-color: rgba(247,148,29,.12); color: #d67e00; border: 1px solid rgba(247,148,29,.2); } .badge.dash-estado-completado { background-color: rgba(0,166,81,.12); color: #007a3d; border: 1px solid rgba(0,166,81,.2); } /* Estado vacío */ .dash-empty-state { text-align: center; padding: 48px 20px; color: #6c757d; } .dash-empty-icon { font-size: 3rem; color: #dee2e6; display: block; margin-bottom: 12px; } /* ============================================================ MIS TICKETS — TABLA MEJORADA ============================================================ */ .mis-tickets-table thead th { background: #f8f9fa; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; border-bottom: 1px solid #e9ecef; padding: 10px 14px; } .mis-tickets-table tbody td { padding: 12px 14px; vertical-align: middle; border-color: #f0f0f0; } .mis-tickets-row:hover { background: #f8f9ff; } .ticket-num-chip { display: inline-block; background: #eef2ff; color: var(--primary); font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; border: 1px solid rgba(0,102,179,.15); white-space: nowrap; } /* Truncar 2 líneas */ .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ CATEGORÍAS — CARDS ============================================================ */ .cat-card { border: none; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .cat-card--inactive { opacity: 0.65; } .cat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } /* ============================================================ TICKET DETAIL — INFO PANEL ============================================================ */ .ticket-info-dl { margin: 0; } .ticket-info-row { display: flex; justify-content: space-between; align-items: center; padding: .65rem 1.25rem; border-bottom: 1px solid rgba(0,0,0,.06); gap: .5rem; flex-wrap: wrap; } .ticket-info-row:last-child { border-bottom: none; } .ticket-info-row dt { font-weight: 500; color: #6c757d; font-size: .82rem; white-space: nowrap; display: flex; align-items: center; } .ticket-info-row dd { font-size: .85rem; margin: 0; text-align: right; color: #212529; } /* ============================================================ BARRA DE FILTROS PROFESIONAL (reutilizable) ============================================================ */ .filter-bar { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .filter-bar .filter-search { flex: 1; min-width: 240px; position: relative; } .filter-bar .filter-search input { padding-left: 40px; border-radius: 8px; border: 1.5px solid #e5e9f0; background: #f7f9fc; font-size: 0.875rem; height: 40px; transition: all var(--transition); } .filter-bar .filter-search input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(0,102,179,.1); outline: none; } .filter-bar .filter-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.95rem; pointer-events: none; } .filter-bar .filter-search .btn-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #9ca3af; padding: 4px 8px; cursor: pointer; display: none; } .filter-bar .filter-search.has-value .btn-clear { display: block; } .filter-bar .filter-search .btn-clear:hover { color: var(--danger); } .filter-bar .filter-select { border-radius: 8px; border: 1.5px solid #e5e9f0; background: #f7f9fc; font-size: 0.875rem; height: 40px; min-width: 140px; padding: 0 32px 0 14px; color: #212529; cursor: pointer; transition: all var(--transition); } .filter-bar .filter-select:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(0,102,179,.1); outline: none; } .filter-bar .filter-divider { width: 1px; height: 28px; background: #e5e9f0; } /* Botones de vista grid/tabla */ .filter-bar .view-toggle { display: inline-flex; background: #f7f9fc; border: 1.5px solid #e5e9f0; border-radius: 8px; padding: 3px; gap: 2px; } .filter-bar .view-toggle button { background: transparent; border: none; padding: 5px 10px; border-radius: 6px; font-size: 0.85rem; color: #6c757d; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; gap: 4px; } .filter-bar .view-toggle button:hover { color: var(--primary); } .filter-bar .view-toggle button.active { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600; } /* Botón limpiar filtros */ .filter-bar .btn-reset { background: transparent; border: 1.5px solid #e5e9f0; border-radius: 8px; padding: 0 14px; height: 40px; color: #6c757d; font-size: 0.85rem; cursor: pointer; transition: all var(--transition); display: inline-flex; align-items: center; gap: 6px; } .filter-bar .btn-reset:hover { border-color: var(--danger); color: var(--danger); background: rgba(237,28,36,.04); } /* Info: contador de resultados */ .filter-results-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 0 4px; flex-wrap: wrap; gap: 8px; } .filter-results-info .count-info { font-size: 0.85rem; color: #6c757d; } .filter-results-info .count-info strong { color: var(--primary); font-weight: 700; } .filter-results-info .active-filters { display: flex; gap: 6px; flex-wrap: wrap; } .filter-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,102,179,.08); color: var(--primary); border: 1px solid rgba(0,102,179,.18); border-radius: 50px; padding: 3px 10px 3px 12px; font-size: 0.75rem; font-weight: 500; } .filter-chip button { background: transparent; border: none; color: var(--primary); cursor: pointer; padding: 0; display: flex; align-items: center; font-size: 0.85rem; opacity: 0.65; } .filter-chip button:hover { opacity: 1; } /* ============================================================ STATS CARDS COMPACTAS (para listas) ============================================================ */ .stat-mini { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px; display: flex; align-items: center; gap: 12px; transition: all var(--transition); border-left: 3px solid transparent; height: 100%; } .stat-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-mini-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .stat-mini-body { flex: 1; min-width: 0; } .stat-mini-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: #6c757d; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-mini-value { font-size: 1.5rem; font-weight: 700; line-height: 1; color: #212529; } /* Variantes de color */ .stat-mini--primary { border-left-color: var(--primary); } .stat-mini--primary .stat-mini-icon { background: rgba(0,102,179,.1); color: var(--primary); } .stat-mini--success { border-left-color: var(--secondary); } .stat-mini--success .stat-mini-icon { background: rgba(0,166,81,.1); color: var(--secondary); } .stat-mini--warning { border-left-color: var(--warning); } .stat-mini--warning .stat-mini-icon { background: rgba(247,148,29,.1); color: var(--warning); } .stat-mini--danger { border-left-color: var(--danger); } .stat-mini--danger .stat-mini-icon { background: rgba(237,28,36,.1); color: var(--danger); } .stat-mini--purple { border-left-color: #6f42c1; } .stat-mini--purple .stat-mini-icon { background: rgba(111,66,193,.1); color: #6f42c1; } .stat-mini--secondary { border-left-color: #6c757d; } .stat-mini--secondary .stat-mini-icon { background: rgba(108,117,125,.1); color: #6c757d; } /* ============================================================ TABLA PROFESIONAL (lista compacta) ============================================================ */ .pro-table-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .pro-table { margin: 0; font-size: 0.875rem; } .pro-table thead th { background: #f8fafc; font-weight: 600; font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.6px; color: #6c757d; border-bottom: 1px solid #e9ecef; padding: 12px 16px; white-space: nowrap; } .pro-table tbody td { padding: 12px 16px; vertical-align: middle; border-color: #f0f2f5; } .pro-table tbody tr { transition: background var(--transition); } .pro-table tbody tr:hover { background: #f8faff; } /* Empty state dentro del grid/tabla */ .filter-empty { text-align: center; padding: 60px 20px; color: #9ca3af; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); } .filter-empty i { font-size: 3rem; color: #dee2e6; display: block; margin-bottom: 10px; } .filter-empty h6 { color: #6c757d; font-weight: 600; margin-bottom: 4px; } /* Responsive: filter bar se acomoda */ @media (max-width: 768px) { .filter-bar { padding: 12px; gap: 8px; } .filter-bar .filter-search { min-width: 100%; order: -1; } .filter-bar .filter-select { flex: 1; min-width: 130px; } .filter-bar .filter-divider { display: none; } .stat-mini-value { font-size: 1.25rem; } } /* ============================================================ KANBAN — TABLERO DE PROYECTOS ============================================================ */ .kanban-board { display: grid; grid-template-columns: repeat(5, minmax(260px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; } .kanban-col { background: #f4f6f9; border-radius: var(--radius); min-height: 500px; display: flex; flex-direction: column; } .kanban-col-header { padding: 12px 14px; border-bottom: 2px solid transparent; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border-radius: var(--radius) var(--radius) 0 0; } .kanban-col-header .count-badge { background: rgba(0,0,0,.06); color: #6c757d; border-radius: 999px; padding: 2px 8px; font-size: 0.72rem; font-weight: 700; } /* Colores por columna */ .kanban-col--pendiente .kanban-col-header { color: #6c757d; border-bottom-color: #6c757d; } .kanban-col--desarrollo .kanban-col-header { color: var(--primary); border-bottom-color: var(--primary); } .kanban-col--pruebas .kanban-col-header { color: var(--warning); border-bottom-color: var(--warning); } .kanban-col--entregado .kanban-col-header { color: var(--secondary); border-bottom-color: var(--secondary); } .kanban-col--pausado .kanban-col-header { color: #6f42c1; border-bottom-color: #6f42c1; } .kanban-col-body { padding: 10px; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 100px; overflow-y: auto; max-height: calc(100vh - 300px); } .kanban-col-body.dragover { background: rgba(0,102,179,.05); border-radius: 6px; } /* Tarjeta del proyecto */ .kanban-card { background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 12px; cursor: grab; transition: box-shadow var(--transition), transform var(--transition); border-left: 3px solid transparent; user-select: none; } .kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .kanban-card.dragging { opacity: 0.5; cursor: grabbing; } /* Color de borde por prioridad */ .kanban-card--baja { border-left-color: #6c757d; } .kanban-card--media { border-left-color: var(--primary); } .kanban-card--alta { border-left-color: var(--warning); } .kanban-card--critica { border-left-color: var(--danger); } .kanban-card-title { font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; color: #212529; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kanban-card-desc { font-size: 0.78rem; color: #6c757d; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kanban-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f2f5; font-size: 0.72rem; color: #6c757d; } .kanban-card-progress { height: 4px; background: #f0f2f5; border-radius: 99px; overflow: hidden; margin-top: 6px; } .kanban-card-progress-bar { height: 100%; background: var(--primary); transition: width 0.3s; } .priority-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .priority-pill--baja { background: rgba(108,117,125,.12); color: #6c757d; } .priority-pill--media { background: rgba(0,102,179,.12); color: var(--primary); } .priority-pill--alta { background: rgba(247,148,29,.15); color: #c77300; } .priority-pill--critica { background: rgba(237,28,36,.15); color: var(--danger); } .kanban-card-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .kanban-due { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; color: #6c757d; } .kanban-due--soon { color: var(--warning); font-weight: 600; } .kanban-due--overdue { color: var(--danger); font-weight: 700; } /* Responsive Kanban: en móvil se vuelve scroll horizontal fluido */ @media (max-width: 1200px) { .kanban-board { grid-template-columns: repeat(5, minmax(240px, 280px)); } } @media (max-width: 768px) { .kanban-board { grid-template-columns: repeat(5, 85vw); gap: 10px; } .kanban-col-body { max-height: 65vh; } }