/* /Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
π’ MAIN LAYOUT - CHROME STYLE (2 ROWS)
π VULCAN 9.0 - CORREGIDO
============================================================ */
/* ============================================================
π LAYOUT PRINCIPAL
============================================================ */
.chrome-layout[b-ezazw5tqpv] {
display: flex;
flex-direction: column;
min-height: 100vh;
background: #f1f5f9;
overflow: visible;
}
/* ============================================================
π ROW 1: TOPBAR (LOGO + MΓDULOS CENTRADOS + USUARIO)
============================================================ */
.chrome-topbar[b-ezazw5tqpv] {
display: flex;
align-items: center;
justify-content: space-between;
background: #0f1829;
color: white;
padding: 0 1.2rem;
height: 60px;
min-height: 60px;
flex-shrink: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
position: relative;
}
/* LOGO - Fijo a la izquierda */
.chrome-logo[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 600;
font-size: 1rem;
color: #e2e8f0;
flex-shrink: 0;
min-width: 200px;
}
.chrome-logo i[b-ezazw5tqpv] {
font-size: 1.2rem;
color: #2563eb;
}
.chrome-logo span[b-ezazw5tqpv] {
letter-spacing: 0.02em;
}
/* MΓDULOS - Centrados */
.chrome-modules[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.2rem;
justify-content: center;
flex: 1;
overflow-x: auto;
padding: 0 0.5rem;
scrollbar-width: none;
}
.chrome-modules[b-ezazw5tqpv]::-webkit-scrollbar {
display: none;
}
.chrome-module[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
color: #94a3b8;
white-space: nowrap;
position: relative;
}
.chrome-module:hover[b-ezazw5tqpv] {
background: rgba(255, 255, 255, 0.08);
color: #f1f5f9;
}
.chrome-module.active[b-ezazw5tqpv] {
background: rgba(37, 99, 235, 0.2);
color: #60a5fa;
}
.chrome-module.sin-permiso[b-ezazw5tqpv] {
opacity: 0.5;
cursor: not-allowed;
}
.chrome-module .module-arrow[b-ezazw5tqpv] {
font-size: 0.55rem;
margin-left: 0.1rem;
opacity: 0.6;
}
/* USUARIO - Fijo a la derecha */
.chrome-user[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.3rem 0.8rem 0.3rem 0.6rem;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease;
flex-shrink: 0;
position: relative;
min-width: auto;
justify-content: flex-end;
}
.chrome-user:hover[b-ezazw5tqpv] {
background: rgba(255, 255, 255, 0.08);
}
.user-avatar-wrapper[b-ezazw5tqpv] {
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
}
.user-avatar[b-ezazw5tqpv] {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.2);
background: #1e293b;
display: flex;
align-items: center;
justify-content: center;
}
.user-avatar img[b-ezazw5tqpv] {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar .avatar-initial[b-ezazw5tqpv] {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
color: white;
text-transform: uppercase;
}
.user-status[b-ezazw5tqpv] {
position: absolute;
bottom: -2px;
right: -2px;
width: 14px;
height: 14px;
background: #22c55e;
border-radius: 50%;
border: 2.5px solid #0f1829;
z-index: 5;
}
.user-info[b-ezazw5tqpv] {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.user-name[b-ezazw5tqpv] {
font-size: 0.85rem;
font-weight: 500;
color: #f1f5f9;
}
.user-role[b-ezazw5tqpv] {
font-size: 0.65rem;
color: #94a3b8;
}
.user-arrow[b-ezazw5tqpv] {
font-size: 0.65rem;
color: #64748b;
transition: transform 0.2s ease;
margin-left: 0.2rem;
}
/* DROPDOWN USUARIO */
.user-dropdown[b-ezazw5tqpv] {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: white;
border-radius: 10px;
min-width: 220px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
border: 1px solid #e2e8f0;
z-index: 200;
overflow: hidden;
animation: slideDown-b-ezazw5tqpv 0.2s ease;
}
@keyframes slideDown-b-ezazw5tqpv {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.user-dropdown-header[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 1rem;
background: #f8fafc;
border-bottom: 1px solid #f1f5f9;
}
.user-dropdown-avatar[b-ezazw5tqpv] {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 2px solid #e2e8f0;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
}
.user-dropdown-avatar img[b-ezazw5tqpv] {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-dropdown-avatar .avatar-initial[b-ezazw5tqpv] {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
color: white;
text-transform: uppercase;
}
.user-dropdown-info[b-ezazw5tqpv] {
display: flex;
flex-direction: column;
}
.user-dropdown-name[b-ezazw5tqpv] {
font-weight: 600;
font-size: 0.9rem;
color: #0f1829;
}
.user-dropdown-role[b-ezazw5tqpv] {
font-size: 0.75rem;
color: #6b7280;
}
.user-dropdown-items[b-ezazw5tqpv] {
padding: 0.3rem 0;
}
.user-dropdown-items .dropdown-item[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 1rem;
background: none;
border: none;
width: 100%;
text-align: left;
font-size: 0.85rem;
color: #1f2937;
cursor: pointer;
transition: background 0.1s ease;
}
.user-dropdown-items .dropdown-item:hover[b-ezazw5tqpv] {
background: #f1f5f9;
}
.user-dropdown-items .dropdown-item i[b-ezazw5tqpv] {
color: #6b7280;
width: 18px;
text-align: center;
}
/* ============================================================
π ROW 2: TABS BAR
============================================================ */
.chrome-tabs-bar[b-ezazw5tqpv] {
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
padding: 0 0.8rem;
height: 38px;
min-height: 38px;
flex-shrink: 0;
display: flex;
align-items: center;
overflow-x: auto;
scrollbar-width: none;
}
.chrome-tabs-bar[b-ezazw5tqpv]::-webkit-scrollbar {
display: none;
}
.chrome-tabs-container[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.1rem;
height: 100%;
}
.chrome-tab[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.7rem;
background: transparent;
border-radius: 6px 6px 0 0;
font-size: 0.75rem;
color: #6b7280;
cursor: pointer;
transition: all 0.15s ease;
height: 100%;
border-bottom: 2px solid transparent;
white-space: nowrap;
position: relative;
}
.chrome-tab:hover[b-ezazw5tqpv] {
background: rgba(0, 0, 0, 0.04);
color: #1f2937;
}
.chrome-tab.active[b-ezazw5tqpv] {
background: white;
color: #0f1829;
border-bottom-color: #2563eb;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
.chrome-tab i[b-ezazw5tqpv] {
font-size: 0.7rem;
color: inherit;
}
.chrome-tab .tab-title[b-ezazw5tqpv] {
font-weight: 500;
}
.chrome-tab .tab-close[b-ezazw5tqpv] {
background: none;
border: none;
color: #9ca3af;
font-size: 0.6rem;
cursor: pointer;
padding: 0.1rem 0.2rem;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.chrome-tab .tab-close:hover[b-ezazw5tqpv] {
background: rgba(0, 0, 0, 0.08);
color: #1f2937;
}
.chrome-tab.duplicada[b-ezazw5tqpv] {
border-left: 3px solid #f59e0b;
}
.chrome-tab .tab-badge-duplicada[b-ezazw5tqpv] {
font-size: 0.55rem;
margin-left: -0.1rem;
}
.chrome-tab-new[b-ezazw5tqpv] {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
border: 1px dashed #d1d5db;
background: transparent;
color: #9ca3af;
cursor: pointer;
transition: all 0.15s ease;
font-size: 0.7rem;
margin-left: 0.2rem;
flex-shrink: 0;
}
.chrome-tab-new:hover[b-ezazw5tqpv] {
background: #e2e8f0;
color: #1f2937;
border-color: #94a3b8;
}
/* ============================================================
π CONTENIDO
============================================================ */
.chrome-content[b-ezazw5tqpv] {
flex: 1;
overflow: visible;
overflow-x: hidden;
background: #f1f5f9;
padding: 0.5rem;
min-height: 0;
}
/* ============================================================
π POPUP SUBMΓDULOS - COLORIMETRΓA CLARA
============================================================ */
.chrome-popup-overlay[b-ezazw5tqpv] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn-b-ezazw5tqpv 0.2s ease;
}
.chrome-popup[b-ezazw5tqpv] {
background: linear-gradient(145deg, #ffffff, #f0f4ff);
border-radius: 12px;
max-width: 420px;
width: 100%;
max-height: 80vh;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
animation: slideUp-b-ezazw5tqpv 0.25s ease;
border: 2px solid rgba(59, 130, 246, 0.15);
}
.popup-header[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 1.2rem;
color: #1e293b;
font-weight: 600;
font-size: 0.95rem;
background: linear-gradient(145deg, #eff6ff, #dbeafe);
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}
.popup-item[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.5rem 0.7rem;
border-radius: 8px;
cursor: pointer;
transition: background 0.1s ease;
}
.popup-item:hover:not(.sin-permiso)[b-ezazw5tqpv] {
background: rgba(59, 130, 246, 0.06);
}
.popup-item.sin-permiso[b-ezazw5tqpv] {
opacity: 0.5;
cursor: not-allowed;
}
.popup-item-icon[b-ezazw5tqpv] {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.75rem;
flex-shrink: 0;
}
.popup-item-info[b-ezazw5tqpv] {
flex: 1;
display: flex;
flex-direction: column;
}
.popup-item-nombre[b-ezazw5tqpv] {
font-size: 0.85rem;
font-weight: 500;
color: #1e293b;
}
.popup-item-ruta[b-ezazw5tqpv] {
font-size: 0.65rem;
color: #94a3b8;
}
.popup-item-arrow[b-ezazw5tqpv] {
color: #94a3b8;
font-size: 0.7rem;
}
.popup-item-lock[b-ezazw5tqpv] {
color: #94a3b8;
font-size: 0.8rem;
}
.popup-empty[b-ezazw5tqpv] {
padding: 1.5rem;
text-align: center;
color: #94a3b8;
}
.popup-footer[b-ezazw5tqpv] {
padding: 0.5rem 1.2rem;
border-top: 1px solid rgba(59, 130, 246, 0.08);
font-size: 0.7rem;
color: #94a3b8;
}
/* ============================================================
π PERMISSION POPUP
============================================================ */
.permission-popup[b-ezazw5tqpv] {
position: fixed;
bottom: 30px;
right: 30px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
max-width: 400px;
width: 100%;
z-index: 9999;
overflow: hidden;
animation: slideInRight-b-ezazw5tqpv 0.3s ease;
border-left: 4px solid #2563eb;
}
.permission-popup.exito[b-ezazw5tqpv] {
border-left-color: #22c55e;
}
.permission-popup.error[b-ezazw5tqpv] {
border-left-color: #ef4444;
}
.permission-popup-content[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 1rem;
}
.permission-popup-icon[b-ezazw5tqpv] {
font-size: 1.5rem;
flex-shrink: 0;
}
.permission-popup-body h4[b-ezazw5tqpv] {
margin: 0;
font-size: 0.9rem;
color: #0f1829;
}
.permission-popup-body p[b-ezazw5tqpv] {
margin: 0;
font-size: 0.8rem;
color: #6b7280;
}
.permission-popup-close[b-ezazw5tqpv] {
background: none;
border: none;
color: #9ca3af;
font-size: 0.9rem;
cursor: pointer;
padding: 0.2rem;
margin-left: auto;
flex-shrink: 0;
}
.permission-popup-close:hover[b-ezazw5tqpv] {
color: #1f2937;
}
.permission-popup-progressbar[b-ezazw5tqpv] {
height: 3px;
background: #2563eb;
width: 100%;
animation: progressBar-b-ezazw5tqpv 4s linear forwards;
}
.permission-popup.exito .permission-popup-progressbar[b-ezazw5tqpv] {
background: #22c55e;
}
.permission-popup.error .permission-popup-progressbar[b-ezazw5tqpv] {
background: #ef4444;
}
@keyframes progressBar-b-ezazw5tqpv {
from {
width: 100%;
}
to {
width: 0%;
}
}
@keyframes slideInRight-b-ezazw5tqpv {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* ============================================================
π PLACEHOLDER
============================================================ */
.placeholder-container[b-ezazw5tqpv] {
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh;
padding: 1.5rem;
}
.placeholder-card[b-ezazw5tqpv] {
background: white;
border-radius: 16px;
padding: 2.5rem 3rem;
max-width: 500px;
width: 100%;
text-align: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #e9edf4;
}
.placeholder-icon-wrapper[b-ezazw5tqpv] {
margin-bottom: 1rem;
}
.placeholder-icon[b-ezazw5tqpv] {
font-size: 3.5rem;
color: #94a3b8;
}
.placeholder-icon.no-access[b-ezazw5tqpv] {
color: #ef4444;
}
.placeholder-card h2[b-ezazw5tqpv] {
font-size: 1.1rem;
color: #0f1829;
margin: 0 0 0.5rem 0;
}
.placeholder-description[b-ezazw5tqpv] {
color: #6b7280;
font-size: 0.9rem;
margin: 0 0 0.5rem 0;
}
.placeholder-route[b-ezazw5tqpv] {
background: #f1f5f9;
padding: 0.3rem 0.8rem;
border-radius: 6px;
display: inline-block;
margin: 0.5rem 0;
font-size: 0.8rem;
color: #4b5563;
}
.placeholder-info[b-ezazw5tqpv] {
font-size: 0.85rem;
color: #6b7280;
margin: 0.5rem 0 1rem 0;
}
.permission-alert[b-ezazw5tqpv] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #fef2f2;
color: #dc2626;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
margin: 0.5rem 0;
}
.placeholder-suggestion[b-ezazw5tqpv] {
font-size: 0.8rem;
color: #6b7280;
margin: 0.5rem 0 1rem 0;
}
.btn-back[b-ezazw5tqpv] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #2563eb;
color: white;
border: none;
padding: 0.4rem 1.2rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-back:hover[b-ezazw5tqpv] {
background: #1d4ed8;
transform: translateY(-1px);
}
/* ============================================================
π RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.chrome-logo span[b-ezazw5tqpv] {
display: none;
}
.chrome-logo[b-ezazw5tqpv] {
min-width: 40px;
}
.chrome-modules[b-ezazw5tqpv] {
gap: 0.1rem;
}
.chrome-module[b-ezazw5tqpv] {
padding: 0.3rem 0.6rem;
font-size: 0.7rem;
}
.chrome-module span[b-ezazw5tqpv] {
display: none;
}
.chrome-module i[b-ezazw5tqpv] {
font-size: 0.9rem;
}
.chrome-module .module-arrow[b-ezazw5tqpv] {
display: none;
}
.user-info[b-ezazw5tqpv] {
display: none;
}
.chrome-user[b-ezazw5tqpv] {
min-width: auto;
padding: 0.3rem;
}
.user-avatar-wrapper[b-ezazw5tqpv] {
width: 36px;
height: 36px;
}
.user-avatar[b-ezazw5tqpv] {
width: 36px;
height: 36px;
}
.user-status[b-ezazw5tqpv] {
width: 12px;
height: 12px;
bottom: -1px;
right: -1px;
}
}
@media (max-width: 768px) {
.chrome-topbar[b-ezazw5tqpv] {
padding: 0 0.6rem;
height: 50px;
min-height: 50px;
}
.chrome-logo i[b-ezazw5tqpv] {
font-size: 1rem;
}
.user-avatar-wrapper[b-ezazw5tqpv] {
width: 32px;
height: 32px;
}
.user-avatar[b-ezazw5tqpv] {
width: 32px;
height: 32px;
}
.user-status[b-ezazw5tqpv] {
width: 10px;
height: 10px;
bottom: -1px;
right: -1px;
}
.chrome-tabs-bar[b-ezazw5tqpv] {
height: 32px;
min-height: 32px;
padding: 0 0.4rem;
}
.chrome-tab[b-ezazw5tqpv] {
font-size: 0.65rem;
padding: 0.15rem 0.4rem;
}
.chrome-tab .tab-title[b-ezazw5tqpv] {
max-width: 60px;
overflow: hidden;
text-overflow: ellipsis;
}
.chrome-tab-new[b-ezazw5tqpv] {
width: 24px;
height: 24px;
font-size: 0.6rem;
}
.chrome-content[b-ezazw5tqpv] {
padding: 0.3rem;
}
.placeholder-card[b-ezazw5tqpv] {
padding: 1.5rem;
}
}
/* β
AGREGAR ESTO AL FINAL DEL CSS */
@media (max-width: 480px) {
.chrome-user[b-ezazw5tqpv] {
min-width: auto;
padding: 0.2rem 0.4rem;
gap: 0.3rem;
}
.user-avatar-wrapper[b-ezazw5tqpv] {
width: 30px;
height: 30px;
}
.user-avatar[b-ezazw5tqpv] {
width: 30px;
height: 30px;
}
.user-status[b-ezazw5tqpv] {
width: 10px;
height: 10px;
bottom: -1px;
right: -1px;
border-width: 2px;
}
}
/* ============================================================
π MODAL CAMBIAR CONTRASEΓA - PROFESIONAL
============================================================ */
/* β OVERLAY - FLOTA SOBRE TODO */
.modal-change-password-overlay[b-ezazw5tqpv] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(6px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
animation: fadeIn-b-ezazw5tqpv 0.25s ease;
}
.modal-container.modal-change-password[b-ezazw5tqpv] {
max-width: 500px;
width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
background: white;
animation: slideUp-b-ezazw5tqpv 0.3s ease;
}
/* HEADER */
.modal-container.modal-change-password .modal-header[b-ezazw5tqpv] {
padding: 1.2rem 1.8rem;
background: linear-gradient(135deg, #0f1829, #1a2a4a);
border-bottom: none;
border-radius: 16px 16px 0 0;
position: relative;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-container.modal-change-password .modal-header[b-ezazw5tqpv]::before {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(37, 99, 235, 0.15), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.modal-container.modal-change-password .modal-header[b-ezazw5tqpv]::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #2563eb, #7c3aed, #2563eb);
background-size: 200% 100%;
animation: shimmer-b-ezazw5tqpv 3s ease-in-out infinite;
}
@keyframes shimmer-b-ezazw5tqpv {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.modal-container.modal-change-password .modal-header-content[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 1rem;
position: relative;
z-index: 1;
}
.modal-container.modal-change-password .modal-header-icon[b-ezazw5tqpv] {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: rgba(37, 99, 235, 0.2);
border-radius: 12px;
border: 1px solid rgba(37, 99, 235, 0.3);
flex-shrink: 0;
}
.modal-container.modal-change-password .modal-header-icon i[b-ezazw5tqpv] {
font-size: 1.4rem;
color: #60a5fa;
}
.modal-container.modal-change-password .modal-header h2[b-ezazw5tqpv] {
font-size: 1.15rem;
color: white;
margin: 0;
font-weight: 700;
letter-spacing: -0.3px;
}
.modal-container.modal-change-password .modal-subtitle[b-ezazw5tqpv] {
font-size: 0.8rem;
color: #94a3b8;
margin: 0.1rem 0 0 0;
font-weight: 400;
}
.modal-container.modal-change-password .modal-close[b-ezazw5tqpv] {
position: relative;
z-index: 1;
color: rgba(255, 255, 255, 0.5);
font-size: 1.1rem;
padding: 0.3rem 0.6rem;
border-radius: 8px;
transition: all 0.2s ease;
background: none;
border: none;
cursor: pointer;
}
.modal-container.modal-change-password .modal-close:hover[b-ezazw5tqpv] {
background: rgba(255, 255, 255, 0.1);
color: white;
}
/* BODY */
.modal-container.modal-change-password .modal-body[b-ezazw5tqpv] {
padding: 1.8rem 1.8rem 1rem 1.8rem;
background: #f8fafc;
}
/* Password Strength Bar */
.password-strength-container[b-ezazw5tqpv] {
background: white;
border-radius: 10px;
padding: 0.8rem 1rem;
margin-bottom: 1.2rem;
border: 1px solid #e9edf4;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.password-strength-bar[b-ezazw5tqpv] {
width: 100%;
height: 6px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
}
.password-strength-fill[b-ezazw5tqpv] {
height: 100%;
border-radius: 4px;
transition: width 0.4s ease, background 0.4s ease;
background: #e2e8f0;
}
.password-strength-label[b-ezazw5tqpv] {
display: flex;
justify-content: flex-end;
margin-top: 0.3rem;
font-size: 0.7rem;
font-weight: 600;
color: #6b7280;
}
/* Form Grid */
.password-form-grid[b-ezazw5tqpv] {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.form-group-icon label[b-ezazw5tqpv] {
font-size: 0.8rem;
font-weight: 600;
color: #1f2937;
display: flex;
align-items: center;
gap: 0.4rem;
}
.form-group-icon label i[b-ezazw5tqpv] {
color: #2563eb;
font-size: 0.75rem;
}
.form-group-icon label .requerido[b-ezazw5tqpv] {
color: #dc2626;
font-weight: 700;
}
.input-password-wrapper[b-ezazw5tqpv] {
position: relative;
}
.input-password-wrapper .form-control[b-ezazw5tqpv] {
width: 100%;
padding: 0.65rem 1rem 0.65rem 2.8rem;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.9rem;
transition: all 0.3s ease;
background: white;
}
.input-password-wrapper .form-control:focus[b-ezazw5tqpv] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}
.input-password-wrapper .form-control.input-error[b-ezazw5tqpv] {
border-color: #dc2626;
box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
}
.input-password-wrapper .input-icon[b-ezazw5tqpv] {
position: absolute;
left: 0.8rem;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 0.9rem;
transition: color 0.3s ease;
pointer-events: none;
}
.input-password-wrapper .form-control:focus + .input-icon[b-ezazw5tqpv] {
color: #2563eb;
}
/* Password hints */
.password-hint[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.7rem;
color: #6b7280;
margin-top: 0.25rem;
padding-left: 0.2rem;
}
.password-error-hint[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 500;
margin-top: 0.25rem;
padding-left: 0.2rem;
animation: shake-b-ezazw5tqpv 0.3s ease;
}
.password-success-hint[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 500;
margin-top: 0.25rem;
padding-left: 0.2rem;
animation: fadeIn-b-ezazw5tqpv 0.3s ease;
}
@keyframes shake-b-ezazw5tqpv {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
75% {
transform: translateX(5px);
}
}
@keyframes fadeIn-b-ezazw5tqpv {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mensaje toast */
.password-message[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 1rem;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 500;
margin-top: 0.8rem;
}
.password-message.success[b-ezazw5tqpv] {
background: #f0fdf4;
color: #16a34a;
border: 1px solid #bbf7d0;
}
.password-message.error[b-ezazw5tqpv] {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
}
.password-message i[b-ezazw5tqpv] {
font-size: 1.1rem;
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* π― FOOTER - BOTONES PROFESIONALES */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.modal-container.modal-change-password .modal-footer[b-ezazw5tqpv] {
padding: 1rem 1.8rem 1.5rem 1.8rem;
background: white;
border-top: 1px solid #e9edf4;
border-radius: 0 0 16px 16px;
display: flex;
justify-content: flex-end;
gap: 0.8rem;
}
/* BotΓ³n Cancelar */
.btn-change-password-cancel[b-ezazw5tqpv] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.55rem 1.5rem;
background: #f1f5f9;
color: #4b5563;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
min-width: 120px;
}
.btn-change-password-cancel:hover[b-ezazw5tqpv] {
background: #e2e8f0;
border-color: #cbd5e1;
transform: translateY(-1px);
}
.btn-change-password-cancel:active[b-ezazw5tqpv] {
transform: translateY(0) scale(0.97);
}
.btn-change-password-cancel i[b-ezazw5tqpv] {
font-size: 0.9rem;
}
/* BotΓ³n Guardar */
.btn-change-password-save[b-ezazw5tqpv] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.55rem 1.8rem;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: white;
border: none;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
min-width: 180px;
box-shadow: 0 4px 15px -3px rgba(37, 99, 235, 0.3);
}
.btn-change-password-save:hover:not(:disabled)[b-ezazw5tqpv] {
transform: translateY(-2px);
box-shadow: 0 8px 25px -5px rgba(37, 99, 235, 0.4);
}
.btn-change-password-save:active:not(:disabled)[b-ezazw5tqpv] {
transform: translateY(0) scale(0.97);
}
.btn-change-password-save:disabled[b-ezazw5tqpv] {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.btn-change-password-save i[b-ezazw5tqpv] {
font-size: 0.9rem;
}
.btn-change-password-save .fa-spinner[b-ezazw5tqpv] {
animation: spin-b-ezazw5tqpv 1s linear infinite;
}
@keyframes spin-b-ezazw5tqpv {
to {
transform: rotate(360deg);
}
}
/* ============================================================
π ANIMACIONES GLOBALES
============================================================ */
@keyframes slideUp-b-ezazw5tqpv {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeIn-b-ezazw5tqpv {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ============================================================
π RESPONSIVE
============================================================ */
@media (max-width: 768px) {
.modal-container.modal-change-password[b-ezazw5tqpv] {
max-width: 95%;
margin: 0 0.5rem;
border-radius: 12px;
}
.modal-container.modal-change-password .modal-header[b-ezazw5tqpv] {
padding: 1rem 1.2rem;
}
.modal-container.modal-change-password .modal-body[b-ezazw5tqpv] {
padding: 1.2rem 1.2rem 0.8rem 1.2rem;
}
.modal-container.modal-change-password .modal-footer[b-ezazw5tqpv] {
padding: 0.8rem 1.2rem 1.2rem 1.2rem;
flex-wrap: wrap;
}
.btn-change-password-cancel[b-ezazw5tqpv] {
min-width: 100%;
justify-content: center;
}
.btn-change-password-save[b-ezazw5tqpv] {
min-width: 100%;
justify-content: center;
}
.modal-container.modal-change-password .modal-header-icon[b-ezazw5tqpv] {
width: 38px;
height: 38px;
}
.modal-container.modal-change-password .modal-header-icon i[b-ezazw5tqpv] {
font-size: 1rem;
}
.modal-container.modal-change-password .modal-header h2[b-ezazw5tqpv] {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.modal-container.modal-change-password .modal-header-content[b-ezazw5tqpv] {
flex-wrap: wrap;
gap: 0.5rem;
}
.password-strength-container[b-ezazw5tqpv] {
padding: 0.6rem 0.8rem;
}
.input-password-wrapper .form-control[b-ezazw5tqpv] {
font-size: 0.85rem;
padding: 0.55rem 0.8rem 0.55rem 2.4rem;
}
.input-password-wrapper .input-icon[b-ezazw5tqpv] {
left: 0.6rem;
font-size: 0.8rem;
}
.modal-change-password-overlay[b-ezazw5tqpv] {
padding: 0.5rem;
}
}
/* ============================================================
π CELEBRACIΓN - CONFETTI (FLOTA SOBRE TODO)
============================================================ */
.celebration-overlay[b-ezazw5tqpv] {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
animation: celebrationFadeIn-b-ezazw5tqpv 0.4s ease;
}
@keyframes celebrationFadeIn-b-ezazw5tqpv {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.celebration-container[b-ezazw5tqpv] {
background: linear-gradient(145deg, #ffffff, #f8fafc);
border-radius: 24px;
padding: 2.5rem 3rem;
max-width: 420px;
width: 100%;
text-align: center;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
animation: celebrationBounce-b-ezazw5tqpv 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes celebrationBounce-b-ezazw5tqpv {
0% {
transform: scale(0.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.celebration-container[b-ezazw5tqpv]::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.06), transparent 60%);
pointer-events: none;
}
.celebration-icon[b-ezazw5tqpv] {
font-size: 4rem;
margin-bottom: 0.5rem;
animation: celebrationPulse-b-ezazw5tqpv 1.5s ease-in-out infinite;
}
@keyframes celebrationPulse-b-ezazw5tqpv {
0%, 100% {
transform: scale(1) rotate(0deg);
}
25% {
transform: scale(1.15) rotate(-6deg);
}
75% {
transform: scale(1.15) rotate(6deg);
}
}
.celebration-title[b-ezazw5tqpv] {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.3rem 0;
background: linear-gradient(135deg, #2563eb, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.celebration-subtitle[b-ezazw5tqpv] {
font-size: 0.9rem;
color: #6b7280;
margin: 0 0 1.5rem 0;
}
.celebration-confetti[b-ezazw5tqpv] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.8rem;
font-size: 2rem;
margin-bottom: 1.5rem;
animation: celebrationConfettiFloat-b-ezazw5tqpv 2s ease-in-out infinite;
}
@keyframes celebrationConfettiFloat-b-ezazw5tqpv {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(10deg);
}
}
.celebration-confetti span[b-ezazw5tqpv] {
display: inline-block;
animation: confettiSpin-b-ezazw5tqpv 3s linear infinite;
}
.celebration-confetti span:nth-child(odd)[b-ezazw5tqpv] {
animation-duration: 2.5s;
}
.celebration-confetti span:nth-child(3n)[b-ezazw5tqpv] {
animation-duration: 3.5s;
}
.celebration-confetti span:nth-child(5n+2)[b-ezazw5tqpv] {
animation-delay: 0.5s;
}
@keyframes confettiSpin-b-ezazw5tqpv {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
.celebration-btn[b-ezazw5tqpv] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.6rem 2rem;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: white;
border: none;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
min-width: 140px;
}
.celebration-btn:hover[b-ezazw5tqpv] {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(37, 99, 235, 0.4);
}
.celebration-btn:active[b-ezazw5tqpv] {
transform: translateY(0) scale(0.96);
}
/* ============================================================
π RESPONSIVE - CELEBRACIΓN
============================================================ */
@media (max-width: 480px) {
.celebration-container[b-ezazw5tqpv] {
padding: 1.8rem 1.5rem;
margin: 0 1rem;
border-radius: 16px;
}
.celebration-icon[b-ezazw5tqpv] {
font-size: 3rem;
}
.celebration-title[b-ezazw5tqpv] {
font-size: 1.2rem;
}
.celebration-confetti[b-ezazw5tqpv] {
font-size: 1.5rem;
gap: 0.5rem;
}
.celebration-btn[b-ezazw5tqpv] {
min-width: 100%;
padding: 0.7rem;
}
}
/* ============================================================
50.
============================================================ */
/* ============================================================
π DOS SECCIONES DE TOASTS (ESTADΓSTICAS + CADETES)
============================================================ */
.chrome-toasts-section[b-ezazw5tqpv] {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
overflow: hidden;
padding: 0 12px;
position: relative;
z-index: 10;
pointer-events: none;
min-height: 40px;
max-height: 48px;
border-radius: 50px;
background: rgba(30, 58, 95, 0.15);
border: 1px solid rgba(59, 130, 246, 0.15);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4px);
margin: 0 6px;
}
.chrome-toasts-section:first-child[b-ezazw5tqpv] {
flex: 1.2; /* MΓ‘s espacio para estadΓsticas */
}
.chrome-toasts-section:last-child[b-ezazw5tqpv] {
flex: 0.8; /* Menos espacio para cadetes */
}
.chrome-toasts-section .toast-placeholder[b-ezazw5tqpv] {
color: rgba(148, 163, 184, 0.7);
font-size: 0.75rem;
font-weight: 500;
text-align: center;
padding: 4px 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chrome-toasts-section .toast-placeholder i[b-ezazw5tqpv] {
margin-right: 6px;
font-size: 0.8rem;
}
/* Notificaciones dentro de cada secciΓ³n */
.chrome-toasts-section .notif-cadete-toast[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 10px;
border-radius: 50px;
padding: 4px 14px 4px 10px;
animation: notifToastSlideIn-b-ezazw5tqpv 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
max-width: 100%;
width: auto;
color: white;
font-family: 'Segoe UI', system-ui, sans-serif;
pointer-events: auto;
cursor: default;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.1);
background: linear-gradient(145deg, #1e3a5f, #0f2744);
}
.chrome-toasts-section .notif-cadete-toast.ocultando[b-ezazw5tqpv] {
animation: notifToastSlideOut-b-ezazw5tqpv 0.4s ease forwards;
}
.chrome-toasts-section .notif-cadete-toast .toast-icono[b-ezazw5tqpv] {
font-size: 1.4rem;
flex-shrink: 0;
line-height: 1;
}
.chrome-toasts-section .notif-cadete-toast .toast-contenido[b-ezazw5tqpv] {
flex: 1;
min-width: 0;
}
.chrome-toasts-section .notif-cadete-toast .toast-titulo[b-ezazw5tqpv] {
font-weight: 700;
font-size: 0.75rem;
margin-bottom: 0;
color: #f1f5f9;
}
.chrome-toasts-section .notif-cadete-toast .toast-mensaje[b-ezazw5tqpv] {
font-size: 0.65rem;
opacity: 0.85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #cbd5e1;
}
.chrome-toasts-section .notif-cadete-toast .toast-badge[b-ezazw5tqpv] {
display: inline-block;
padding: 1px 8px;
border-radius: 12px;
font-size: 0.55rem;
font-weight: 700;
background: rgba(59,130,246,0.3);
color: #93c5fd;
margin-left: 4px;
}
.chrome-toasts-section .notif-cadete-toast .toast-badge.estadisticas[b-ezazw5tqpv] {
background: rgba(245,158,11,0.3);
color: #fcd34d;
}
.chrome-toasts-section .notif-cadete-toast .toast-badge.cadetes[b-ezazw5tqpv] {
background: rgba(16,185,129,0.3);
color: #6ee7b7;
}
@keyframes notifToastSlideIn-b-ezazw5tqpv {
0% {
opacity: 0;
transform: translateY(-10px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes notifToastSlideOut-b-ezazw5tqpv {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-10px) scale(0.9);
}
}
@media (max-width: 768px) {
.chrome-toasts-section[b-ezazw5tqpv] {
padding: 0 6px;
min-height: 32px;
font-size: 0.7rem;
margin: 0 4px;
}
.chrome-toasts-section .notif-cadete-toast[b-ezazw5tqpv] {
padding: 2px 8px;
border-radius: 30px;
}
.chrome-toasts-section .notif-cadete-toast .toast-icono[b-ezazw5tqpv] {
font-size: 1rem;
}
.chrome-toasts-section .notif-cadete-toast .toast-titulo[b-ezazw5tqpv] {
font-size: 0.65rem;
}
.chrome-toasts-section .notif-cadete-toast .toast-mensaje[b-ezazw5tqpv] {
font-size: 0.55rem;
}
}
/* ============================================================
51.
============================================================ */
/* ============================================================
52. MODAL NUEVA PESTAΓA - COLORIMETRΓA CLARA
============================================================ */
.modal-nueva-pestana-overlay[b-ezazw5tqpv] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
animation: modalFadeIn-b-ezazw5tqpv 0.3s ease forwards;
}
@keyframes modalFadeIn-b-ezazw5tqpv {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.modal-nueva-pestana[b-ezazw5tqpv] {
background: linear-gradient(145deg, #ffffff, #f0f4ff);
border-radius: 24px;
max-width: 600px;
width: 100%;
max-height: 80vh;
margin: 20px;
border: 2px solid rgba(59, 130, 246, 0.15);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
animation: modalCardIn-b-ezazw5tqpv 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes modalCardIn-b-ezazw5tqpv {
0% {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* HEADER */
.modal-nueva-pestana-header[b-ezazw5tqpv] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}
.modal-header-left[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 12px;
}
.modal-header-left h3[b-ezazw5tqpv] {
color: #1e293b;
font-size: 1.1rem;
font-weight: 700;
margin: 0;
}
.modal-header-left i[b-ezazw5tqpv] {
font-size: 1.2rem;
color: #3b82f6;
}
.modal-close-btn[b-ezazw5tqpv] {
background: none;
border: none;
color: #94a3b8;
font-size: 1.2rem;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.2s;
}
.modal-close-btn:hover[b-ezazw5tqpv] {
color: #1e293b;
background: rgba(59, 130, 246, 0.08);
}
/* BODY */
.modal-nueva-pestana-body[b-ezazw5tqpv] {
padding: 20px 24px 24px;
overflow-y: auto;
flex: 1;
}
/* MΓ³dulos Grid */
.modulos-grid[b-ezazw5tqpv] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.modulo-card[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: rgba(59, 130, 246, 0.04);
border-radius: 14px;
cursor: pointer;
transition: all 0.3s;
border-left: 4px solid transparent;
border: 1px solid rgba(59, 130, 246, 0.08);
}
.modulo-card:hover[b-ezazw5tqpv] {
background: rgba(59, 130, 246, 0.08);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border-color: rgba(59, 130, 246, 0.2);
}
.modulo-card.active[b-ezazw5tqpv] {
background: rgba(59, 130, 246, 0.1);
border-color: #3b82f6;
}
.modulo-card-icon[b-ezazw5tqpv] {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.modulo-card-info[b-ezazw5tqpv] {
flex: 1;
min-width: 0;
}
.modulo-card-nombre[b-ezazw5tqpv] {
display: block;
color: #1e293b;
font-weight: 600;
font-size: 0.9rem;
}
.modulo-card-count[b-ezazw5tqpv] {
display: block;
color: #94a3b8;
font-size: 0.7rem;
}
.modulo-card-arrow[b-ezazw5tqpv] {
color: #94a3b8;
font-size: 0.8rem;
transition: all 0.2s;
}
.modulo-card:hover .modulo-card-arrow[b-ezazw5tqpv] {
color: #3b82f6;
transform: translateX(4px);
}
/* SubmΓ³dulos */
.submodulos-container[b-ezazw5tqpv] {
display: flex;
flex-direction: column;
gap: 16px;
}
.submodulos-header[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(59, 130, 246, 0.08);
}
.btn-back-modulos[b-ezazw5tqpv] {
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.15);
color: #3b82f6;
font-size: 1rem;
cursor: pointer;
padding: 6px 10px;
border-radius: 8px;
transition: all 0.2s;
}
.btn-back-modulos:hover[b-ezazw5tqpv] {
background: rgba(59, 130, 246, 0.15);
color: #2563eb;
border-color: rgba(59, 130, 246, 0.3);
}
.submodulos-titulo[b-ezazw5tqpv] {
flex: 1;
color: #1e293b;
font-weight: 700;
font-size: 1rem;
}
.submodulos-titulo i[b-ezazw5tqpv] {
margin-right: 8px;
color: #3b82f6;
}
.submodulos-badge[b-ezazw5tqpv] {
font-size: 0.7rem;
color: #3b82f6;
background: rgba(59, 130, 246, 0.08);
padding: 2px 12px;
border-radius: 20px;
border: 1px solid rgba(59, 130, 246, 0.15);
}
.submodulos-grid[b-ezazw5tqpv] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.submodulo-card[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: rgba(59, 130, 246, 0.03);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
border: 1px solid rgba(59, 130, 246, 0.06);
}
.submodulo-card:hover[b-ezazw5tqpv] {
background: rgba(59, 130, 246, 0.06);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border-color: rgba(59, 130, 246, 0.2);
}
.submodulo-card-icon[b-ezazw5tqpv] {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 0.9rem;
flex-shrink: 0;
}
.submodulo-card-info[b-ezazw5tqpv] {
flex: 1;
min-width: 0;
}
.submodulo-card-nombre[b-ezazw5tqpv] {
display: block;
color: #1e293b;
font-weight: 500;
font-size: 0.85rem;
}
.submodulo-card-ruta[b-ezazw5tqpv] {
display: block;
color: #94a3b8;
font-size: 0.65rem;
}
.submodulo-card-arrow[b-ezazw5tqpv] {
color: #94a3b8;
font-size: 0.7rem;
}
.submodulo-card:hover .submodulo-card-arrow[b-ezazw5tqpv] {
color: #3b82f6;
}
/* FOOTER */
.modal-nueva-pestana-footer[b-ezazw5tqpv] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px 20px;
border-top: 1px solid rgba(59, 130, 246, 0.08);
}
.modal-footer-info[b-ezazw5tqpv] {
color: #94a3b8;
font-size: 0.75rem;
display: flex;
align-items: center;
gap: 6px;
}
.modal-footer-info i[b-ezazw5tqpv] {
color: #3b82f6;
}
.btn-cancelar-modal[b-ezazw5tqpv] {
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.15);
color: #3b82f6;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
padding: 10px 24px;
border-radius: 10px;
transition: all 0.2s;
}
.btn-cancelar-modal:hover[b-ezazw5tqpv] {
background: rgba(59, 130, 246, 0.15);
color: #2563eb;
border-color: rgba(59, 130, 246, 0.3);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
/* RESPONSIVE */
@media (max-width: 640px) {
.modulos-grid[b-ezazw5tqpv] {
grid-template-columns: 1fr;
}
.submodulos-grid[b-ezazw5tqpv] {
grid-template-columns: 1fr;
}
.modal-nueva-pestana[b-ezazw5tqpv] {
max-height: 90vh;
margin: 12px;
border-radius: 18px;
}
.modal-nueva-pestana-header[b-ezazw5tqpv] {
padding: 16px 18px;
}
.modal-nueva-pestana-body[b-ezazw5tqpv] {
padding: 16px 18px 20px;
}
.modal-nueva-pestana-footer[b-ezazw5tqpv] {
flex-direction: column;
gap: 10px;
padding: 12px 18px 16px;
}
.btn-cancelar-modal[b-ezazw5tqpv] {
width: 100%;
text-align: center;
}
}
/* ============================================================
π¬ NOTIFICACIONES DE CADETES - HEFESTO 13.0
============================================================ */
#notificaciones-cadetes-container[b-ezazw5tqpv] {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999998;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 420px;
width: 100%;
pointer-events: none;
}
.notificacion-cadete-item[b-ezazw5tqpv] {
pointer-events: auto;
background: linear-gradient(145deg, #1e293b, #0f172a);
border-radius: 14px;
padding: 14px 18px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
border-left: 5px solid #3b82f6;
animation: notifSlideIn-b-ezazw5tqpv 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
display: flex;
align-items: flex-start;
gap: 12px;
transition: all 0.3s ease;
}
.notificacion-cadete-item:hover[b-ezazw5tqpv] {
transform: scale(1.02);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.notificacion-cadete-item.ocultando[b-ezazw5tqpv] {
animation: notifSlideOut-b-ezazw5tqpv 0.4s ease forwards;
}
.notificacion-cadete-item .notif-icono[b-ezazw5tqpv] {
font-size: 1.8rem;
flex-shrink: 0;
line-height: 1;
margin-top: 2px;
}
.notificacion-cadete-item .notif-contenido[b-ezazw5tqpv] {
flex: 1;
min-width: 0;
}
.notificacion-cadete-item .notif-titulo[b-ezazw5tqpv] {
color: #ffffff;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 2px;
}
.notificacion-cadete-item .notif-mensaje[b-ezazw5tqpv] {
color: #cbd5e1;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 0.8rem;
font-weight: 400;
line-height: 1.5;
}
.notificacion-cadete-item .notif-hora[b-ezazw5tqpv] {
color: #64748b;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 0.65rem;
margin-top: 4px;
display: block;
}
.notificacion-cadete-item .notif-close[b-ezazw5tqpv] {
background: none;
border: none;
color: #64748b;
font-size: 0.8rem;
cursor: pointer;
padding: 4px;
flex-shrink: 0;
transition: all 0.2s;
}
.notificacion-cadete-item .notif-close:hover[b-ezazw5tqpv] {
color: #ffffff;
transform: scale(1.2);
}
.notificacion-cadete-item .notif-badge[b-ezazw5tqpv] {
display: inline-block;
font-size: 0.6rem;
font-weight: 700;
padding: 2px 10px;
border-radius: 20px;
margin-top: 3px;
}
/* βββ COLORES POR TIPO βββ */
.notificacion-cadete-item.tipo-lo-tengo[b-ezazw5tqpv] {
border-left-color: #6A1B9A;
}
.notificacion-cadete-item.tipo-en-camino[b-ezazw5tqpv] {
border-left-color: #2196F3;
}
.notificacion-cadete-item.tipo-entregado[b-ezazw5tqpv] {
border-left-color: #2E7D32;
}
.notificacion-cadete-item.tipo-anulado[b-ezazw5tqpv] {
border-left-color: #D32F2F;
}
.notificacion-cadete-item.tipo-reasignado[b-ezazw5tqpv] {
border-left-color: #9C27B0;
}
.notificacion-cadete-item.tipo-direccion[b-ezazw5tqpv] {
border-left-color: #FF9800;
}
.notificacion-cadete-item.tipo-no-voy[b-ezazw5tqpv] {
border-left-color: #757575;
}
.notificacion-cadete-item.tipo-precio[b-ezazw5tqpv] {
border-left-color: #00897B;
}
.notificacion-cadete-item.tipo-inicio[b-ezazw5tqpv] {
border-left-color: #1565C0;
}
.notificacion-cadete-item.tipo-info[b-ezazw5tqpv] {
border-left-color: #3b82f6;
}
/* βββ ANIMACIONES βββ */
@keyframes notifSlideIn-b-ezazw5tqpv {
0% {
opacity: 0;
transform: translateX(80px) scale(0.9);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes notifSlideOut-b-ezazw5tqpv {
0% {
opacity: 1;
transform: translateX(0) scale(1);
}
100% {
opacity: 0;
transform: translateX(80px) scale(0.9);
}
}
/* βββ RESPONSIVE βββ */
@media (max-width: 480px) {
#notificaciones-cadetes-container[b-ezazw5tqpv] {
bottom: 10px;
right: 10px;
left: 10px;
max-width: 100%;
}
.notificacion-cadete-item[b-ezazw5tqpv] {
padding: 12px 14px;
border-radius: 12px;
}
.notificacion-cadete-item .notif-icono[b-ezazw5tqpv] {
font-size: 1.4rem;
}
.notificacion-cadete-item .notif-titulo[b-ezazw5tqpv] {
font-size: 0.8rem;
}
.notificacion-cadete-item .notif-mensaje[b-ezazw5tqpv] {
font-size: 0.75rem;
}
}
/* ============================================================
π CAMPANA DE NOTIFICACIONES
============================================================ */
.notif-bell-wrapper[b-ezazw5tqpv] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
margin-right: 12px;
background: transparent;
border: none;
}
.notif-bell-wrapper:hover[b-ezazw5tqpv] {
background: rgba(255, 255, 255, 0.1);
}
.notif-bell-wrapper i[b-ezazw5tqpv] {
font-size: 1.3rem;
color: #94a3b8;
transition: all 0.2s ease;
}
.notif-bell-wrapper:hover i[b-ezazw5tqpv] {
color: #f1f5f9;
}
.notif-bell-wrapper.tiene-notificaciones i[b-ezazw5tqpv] {
color: #60a5fa;
animation: notifBellVibrate-b-ezazw5tqpv 2s ease infinite;
}
@keyframes notifBellVibrate-b-ezazw5tqpv {
0%, 100% {
transform: rotate(0deg);
}
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-15deg);
}
30% {
transform: rotate(10deg);
}
40% {
transform: rotate(-10deg);
}
50% {
transform: rotate(0deg);
}
}
.notif-bell-badge[b-ezazw5tqpv] {
position: absolute;
top: -2px;
right: -2px;
background: #ef4444;
color: white;
font-size: 0.65rem;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 2px solid #0f1829;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
animation: notifBadgePulse-b-ezazw5tqpv 1.5s ease infinite;
}
.notif-bell-badge.oculto[b-ezazw5tqpv] {
display: none;
}
@keyframes notifBadgePulse-b-ezazw5tqpv {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
/* ============================================================
π’ TOASTS EN EL CENTRO DE LA BARRA SUPERIOR
============================================================ */
.chrome-toasts-center[b-ezazw5tqpv] {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
overflow: hidden;
padding: 0 20px;
position: relative;
z-index: 10;
pointer-events: none;
/* β
FONDO CON BORDE Y TEXTURA */
background: linear-gradient(145deg, rgba(30, 58, 95, 0.3), rgba(15, 39, 68, 0.2));
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 50px;
margin: 0 20px;
min-height: 40px;
max-height: 48px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* β
TEXTURA CON PATRΓN DE PUNTOS */
.chrome-toasts-center[b-ezazw5tqpv]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 8px 8px;
border-radius: 50px;
pointer-events: none;
}
/* β
MENSAJE CUANDO NO HAY NOTIFICACIONES NI NOTICIAS */
.chrome-toasts-center .toast-placeholder[b-ezazw5tqpv] {
color: rgba(148, 163, 184, 0.7);
font-size: 0.75rem;
font-weight: 500;
text-align: center;
padding: 8px 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chrome-toasts-center .toast-placeholder i[b-ezazw5tqpv] {
margin-right: 6px;
font-size: 0.8rem;
}
/* βββ TOASTS βββ */
.chrome-toasts-center .notif-toast-item[b-ezazw5tqpv] {
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
border-radius: 50px;
padding: 6px 16px;
animation: notifToastSlideIn-b-ezazw5tqpv 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
width: auto;
max-width: 500px;
transition: all 0.3s ease;
cursor: pointer;
border: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 2;
}
.chrome-toasts-center .notif-toast-item.ocultando[b-ezazw5tqpv] {
animation: notifToastSlideOut-b-ezazw5tqpv 0.3s ease forwards;
}
.chrome-toasts-center .notif-toast-item:hover[b-ezazw5tqpv] {
transform: scale(1.02);
}
.chrome-toasts-center .notif-toast-icon[b-ezazw5tqpv] {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.chrome-toasts-center .notif-toast-content[b-ezazw5tqpv] {
flex: 1;
min-width: 0;
}
.chrome-toasts-center .notif-toast-nombre[b-ezazw5tqpv] {
font-size: 0.75rem;
font-weight: 800;
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #ffffff;
}
.chrome-toasts-center .notif-toast-accion[b-ezazw5tqpv] {
font-size: 0.7rem;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgba(255, 255, 255, 0.9);
}
/* βββ COLORIMETRΓA UNIFORME PARA CADETES βββ */
.chrome-toasts-center .notif-toast-item.tipo-cadete[b-ezazw5tqpv] {
background: linear-gradient(145deg, #1e3a5f, #0f2744);
box-shadow: 0 4px 20px rgba(30, 58, 95, 0.5), 0 0 0 2px rgba(59, 130, 246, 0.4);
}
.chrome-toasts-center .notif-toast-item.tipo-cadete .notif-toast-icon[b-ezazw5tqpv] {
color: #60a5fa;
}
/* βββ COLORIMETRΓA PARA NOTICIAS βββ */
.chrome-toasts-center .notif-toast-item.tipo-noticia[b-ezazw5tqpv] {
background: linear-gradient(145deg, #1f2937, #111827);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(107, 114, 128, 0.3);
max-width: 500px;
border-radius: 16px;
}
.chrome-toasts-center .notif-toast-item.tipo-noticia .notif-toast-icon[b-ezazw5tqpv] {
color: #94a3b8;
}
.chrome-toasts-center .notif-toast-item.tipo-noticia .notif-toast-nombre[b-ezazw5tqpv] {
color: #94a3b8;
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chrome-toasts-center .notif-toast-item.tipo-noticia .notif-toast-accion[b-ezazw5tqpv] {
color: #e2e8f0;
font-size: 0.75rem;
line-height: 1.4;
white-space: normal;
}
@keyframes notifToastSlideIn-b-ezazw5tqpv {
0% {
opacity: 0;
transform: translateY(-15px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes notifToastSlideOut-b-ezazw5tqpv {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-15px) scale(0.9);
}
}
/* βββ RESPONSIVE βββ */
@media (max-width: 768px) {
.chrome-toasts-center[b-ezazw5tqpv] {
padding: 0 10px;
margin: 0 10px;
min-height: 36px;
}
.chrome-toasts-center .notif-toast-item[b-ezazw5tqpv] {
max-width: 100%;
border-radius: 12px;
padding: 4px 10px;
}
}
/* ============================================================
π¦Ύ SCROLL GLOBAL REFORZADO β HEFESTO 13.1 PRO MAX
(Blindaje final: garantiza scroll raΓz SIEMPRE disponible)
============================================================ */
html[b-ezazw5tqpv],
body[b-ezazw5tqpv] {
min-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
}
@media (max-width: 768px) {
html[b-ezazw5tqpv],
body[b-ezazw5tqpv],
#app[b-ezazw5tqpv],
.chrome-layout[b-ezazw5tqpv] {
min-height: 100dvh;
}
}
/* Codeado por π¦Ύ Hefesto 13.1 Pro Max | Sr. Ignacio */
/* ============================================================
π¦Ύ TABS v15 β ESTILOS SCOPED (MAIN LAYOUT)
Garantizan que los botones y badges se vean correctamente
============================================================ */
/* π FIX CONTENEDOR β asegura que el scroll horizontal funcione
y las tabs NO se superpongan */
.chrome-tabs-container[b-ezazw5tqpv] {
display: flex;
align-items: center;
gap: 0.1rem;
height: 100%;
min-width: min-content; /* β clave: el contenedor abarca todo su contenido */
flex-shrink: 0; /* β clave: no se comprime */
}
/* TAB BASE (pisa el estilo viejo para agregar min-width y cursor) */
.chrome-tab[b-ezazw5tqpv] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 8px 6px 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px 10px 0 0;
color: #cbd5e1;
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
transition: all 0.2s ease;
position: relative;
flex-shrink: 0;
max-width: 240px;
min-width: 100px;
cursor: default; /* el cursor pointer va en .tab-click-area */
height: auto; /* override del 100% del estilo viejo */
border-bottom: none;
}
.chrome-tab:hover[b-ezazw5tqpv] {
background: rgba(255, 255, 255, 0.15);
color: #f1f5f9;
transform: translateY(-1px);
}
.chrome-tab.active[b-ezazw5tqpv] {
background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 -4px 16px rgba(139, 92, 246, 0.5);
transform: translateY(-2px);
z-index: 2;
}
.chrome-tab.active[b-ezazw5tqpv]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #ec4899, #f97316, #fbbf24);
background-size: 300% 100%;
border-radius: 3px 3px 0 0;
animation: tabRainbow-b-ezazw5tqpv 3s linear infinite;
}
@keyframes tabRainbow-b-ezazw5tqpv {
0% {
background-position: 0% 50%;
}
100% {
background-position: 300% 50%;
}
}
/* TAB INICIO (dorada) */
.chrome-tab.tab-inicio[b-ezazw5tqpv] {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.08));
border-color: rgba(251, 191, 36, 0.35);
}
.chrome-tab.tab-inicio.active[b-ezazw5tqpv] {
background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%);
color: #1e293b;
border-color: #fcd34d;
box-shadow: 0 -4px 16px rgba(251, 191, 36, 0.55);
}
.chrome-tab.tab-inicio .tab-click-area i[b-ezazw5tqpv] {
color: #fbbf24;
}
.chrome-tab.tab-inicio.active .tab-click-area i[b-ezazw5tqpv] {
color: #78350f;
}
/* ΓREA CLICKEABLE (icono + tΓtulo) */
.chrome-tab .tab-click-area[b-ezazw5tqpv] {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 2px 4px;
border-radius: 6px;
min-width: 0;
flex: 1;
transition: background 0.15s ease;
}
.chrome-tab .tab-click-area:hover[b-ezazw5tqpv] {
background: rgba(255, 255, 255, 0.08);
}
.chrome-tab .tab-click-area i[b-ezazw5tqpv] {
font-size: 13px;
flex-shrink: 0;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.chrome-tab .tab-click-area .tab-title[b-ezazw5tqpv] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* CANDADO DE INICIO */
.chrome-tab .tab-lock[b-ezazw5tqpv] {
margin-left: 4px;
font-size: 11px;
opacity: 0.75;
pointer-events: none;
flex-shrink: 0;
}
/* BOTΓN DUPLICAR */
.chrome-tab .tab-duplicate[b-ezazw5tqpv] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: none;
background: rgba(139, 92, 246, 0.25);
color: #c4b5fd;
border-radius: 50%;
font-size: 10px;
line-height: 1;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
padding: 0;
margin: 0 1px;
}
.chrome-tab .tab-duplicate:hover[b-ezazw5tqpv] {
background: #8b5cf6;
color: #ffffff;
transform: scale(1.2) rotate(-8deg);
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.7);
}
/* BOTΓN CERRAR */
.chrome-tab .tab-close[b-ezazw5tqpv] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: none;
background: rgba(255, 255, 255, 0.12);
color: #cbd5e1;
border-radius: 50%;
font-size: 11px;
line-height: 1;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
padding: 0;
}
.chrome-tab .tab-close:hover[b-ezazw5tqpv] {
background: #ef4444;
color: #ffffff;
transform: scale(1.2) rotate(90deg);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.6);
}
/* BADGE DUPLICADA */
.chrome-tab .tab-badge-duplicada[b-ezazw5tqpv] {
font-size: 10px;
opacity: 0.9;
flex-shrink: 0;
pointer-events: none;
margin-left: 2px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.chrome-tab[b-ezazw5tqpv] {
max-width: 160px;
padding: 5px 6px 5px 10px;
font-size: 11.5px;
min-width: 80px;
}
.chrome-tab .tab-click-area .tab-title[b-ezazw5tqpv] {
max-width: 70px;
}
.chrome-tab .tab-duplicate[b-ezazw5tqpv],
.chrome-tab .tab-close[b-ezazw5tqpv] {
width: 18px;
height: 18px;
font-size: 9px;
}
}
/* Codeado por π¦Ύ Hefesto 15.0 Pro Max | Sr. Ignacio */
/* /Pages/Comunicaciones/Comunicaciones_Telegram.razor.rz.scp.css */
/* ============================================================
MΓDULO TELEGRAM - UI PROFESIONAL v2
Azul corporativo + Degradados + Hovers premium
Codeado por π¦Ύ Hefesto 13.1 Pro Max | Sr. Ignacio
============================================================ */
/* ===== 01. VARIABLES Y BASE ===== */
.tg-page[b-oiznzg643k] {
--tg-primary: #1565C0;
--tg-primary-dark: #0D47A1;
--tg-primary-darker: #0A3880;
--tg-primary-light: #42A5F5;
--tg-primary-lighter: #90CAF9;
--tg-primary-soft: rgba(21, 101, 192, 0.08);
--tg-primary-soft-2: rgba(21, 101, 192, 0.15);
--tg-success: #10B981;
--tg-success-dark: #047857;
--tg-success-soft: rgba(16, 185, 129, 0.12);
--tg-warning: #F59E0B;
--tg-warning-dark: #B45309;
--tg-warning-soft: rgba(245, 158, 11, 0.12);
--tg-danger: #EF4444;
--tg-danger-dark: #B91C1C;
--tg-danger-soft: rgba(239, 68, 68, 0.12);
--tg-purple: #8B5CF6;
--tg-purple-soft: rgba(139, 92, 246, 0.12);
--tg-bg: #F5F7FA;
--tg-bg-alt: #EEF2F7;
--tg-card: #FFFFFF;
--tg-border: #E5E9F0;
--tg-border-soft: #EEF2F7;
--tg-text: #1A2236;
--tg-text-soft: #64748B;
--tg-text-muted: #94A3B8;
--tg-shadow-xs: 0 1px 2px rgba(15, 23, 41, 0.04);
--tg-shadow-sm: 0 2px 6px rgba(15, 23, 41, 0.06);
--tg-shadow: 0 6px 18px rgba(15, 23, 41, 0.08);
--tg-shadow-md: 0 10px 26px rgba(15, 23, 41, 0.10);
--tg-shadow-lg: 0 18px 44px rgba(15, 23, 41, 0.14);
--tg-shadow-blue: 0 10px 30px rgba(21, 101, 192, 0.28);
--tg-shadow-blue-strong: 0 14px 38px rgba(21, 101, 192, 0.4);
--tg-radius-sm: 8px;
--tg-radius: 14px;
--tg-radius-lg: 20px;
--tg-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
--tg-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--tg-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
font-family: var(--tg-font);
color: var(--tg-text);
padding: 24px;
background: radial-gradient(circle at 0% 0%, rgba(21, 101, 192, 0.06) 0%, transparent 40%), radial-gradient(circle at 100% 100%, rgba(66, 165, 245, 0.05) 0%, transparent 40%), var(--tg-bg);
min-height: 100vh;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
/* ===== 02. HEADER (con glassmorphism) ===== */
.tg-header[b-oiznzg643k] {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, var(--tg-primary-darker) 0%, var(--tg-primary) 50%, var(--tg-primary-light) 100%);
padding: 26px 32px;
border-radius: var(--tg-radius-lg);
margin-bottom: 24px;
box-shadow: var(--tg-shadow-blue-strong);
position: relative;
overflow: hidden;
isolation: isolate;
}
.tg-header[b-oiznzg643k]::before {
content: '';
position: absolute;
top: -60%;
right: -5%;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.tg-header[b-oiznzg643k]::after {
content: '';
position: absolute;
bottom: -40%;
left: 15%;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(144, 202, 249, 0.18) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.tg-header-left[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 18px;
z-index: 1;
}
.tg-header-icon[b-oiznzg643k] {
width: 60px;
height: 60px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.12) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #FFFFFF;
border: 1.5px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.tg-header-title[b-oiznzg643k] {
display: flex;
flex-direction: column;
gap: 3px;
}
.tg-title[b-oiznzg643k] {
font-size: 23px;
font-weight: 800;
color: #FFFFFF;
margin: 0;
letter-spacing: -0.4px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.tg-subtitle[b-oiznzg643k] {
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
margin: 0;
font-weight: 500;
letter-spacing: 0.2px;
}
.tg-header-right[b-oiznzg643k] {
display: flex;
gap: 10px;
align-items: center;
z-index: 1;
flex-wrap: wrap;
}
/* Pills del header */
.tg-stat-pill[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: 30px;
font-size: 13px;
font-weight: 600;
color: #FFFFFF;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1.5px solid rgba(255, 255, 255, 0.22);
transition: var(--tg-transition);
cursor: default;
}
.tg-stat-pill:hover[b-oiznzg643k] {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-1px);
}
.tg-stat-pill-blue[b-oiznzg643k] {
background: rgba(255, 255, 255, 0.15);
}
.tg-stat-pill-warning[b-oiznzg643k] {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.45), rgba(245, 158, 11, 0.25));
border-color: rgba(255, 210, 100, 0.4);
}
.tg-stat-icon[b-oiznzg643k] {
font-size: 14px;
opacity: 0.95;
}
.tg-stat-value[b-oiznzg643k] {
font-size: 16px;
font-weight: 800;
letter-spacing: -0.2px;
}
.tg-stat-label[b-oiznzg643k] {
font-weight: 500;
opacity: 0.9;
font-size: 12px;
}
/* BotΓ³n refresh */
.tg-btn-icon[b-oiznzg643k] {
width: 46px;
height: 46px;
border-radius: 13px;
border: 1.5px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #FFFFFF;
cursor: pointer;
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--tg-transition);
}
.tg-btn-icon:hover[b-oiznzg643k] {
background: rgba(255, 255, 255, 0.28);
border-color: rgba(255, 255, 255, 0.5);
transform: rotate(180deg) scale(1.05);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.tg-btn-icon:active[b-oiznzg643k] {
transform: rotate(180deg) scale(0.95);
}
/* ===== 03. TABS ===== */
.tg-tabs[b-oiznzg643k] {
display: flex;
gap: 6px;
padding: 6px;
background: var(--tg-card);
border-radius: var(--tg-radius);
margin-bottom: 22px;
box-shadow: var(--tg-shadow);
border: 1px solid var(--tg-border-soft);
overflow-x: auto;
scrollbar-width: none;
}
.tg-tabs[b-oiznzg643k]::-webkit-scrollbar {
display: none;
}
.tg-tab[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 9px;
padding: 12px 22px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--tg-text-soft);
font-size: 14px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: var(--tg-transition);
font-family: inherit;
position: relative;
overflow: hidden;
}
.tg-tab[b-oiznzg643k]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--tg-primary-soft), transparent);
opacity: 0;
transition: opacity 0.25s;
border-radius: 10px;
}
.tg-tab:hover[b-oiznzg643k]::before {
opacity: 1;
}
.tg-tab:hover[b-oiznzg643k] {
color: var(--tg-primary);
transform: translateY(-1px);
}
.tg-tab-active[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-primary) 0%, var(--tg-primary-light) 100%);
color: #FFFFFF !important;
box-shadow: var(--tg-shadow-blue);
transform: translateY(-1px);
}
.tg-tab-active[b-oiznzg643k]::before {
display: none;
}
.tg-tab-active:hover[b-oiznzg643k] {
color: #FFFFFF;
box-shadow: var(--tg-shadow-blue-strong);
transform: translateY(-2px);
}
.tg-tab-icon[b-oiznzg643k] {
font-size: 15px;
position: relative;
z-index: 1;
}
.tg-tab-text[b-oiznzg643k] {
font-size: 14px;
position: relative;
z-index: 1;
}
.tg-tab-badge[b-oiznzg643k] {
background: var(--tg-danger);
color: #FFFFFF;
padding: 2px 9px;
border-radius: 20px;
font-size: 11px;
font-weight: 800;
min-width: 22px;
text-align: center;
position: relative;
z-index: 1;
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
animation: tg-pulse-b-oiznzg643k 2s ease-in-out infinite;
}
@keyframes tg-pulse-b-oiznzg643k {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
.tg-tab-active .tg-tab-badge[b-oiznzg643k] {
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* ===== 04. PANEL ===== */
.tg-panel[b-oiznzg643k] {
display: flex;
flex-direction: column;
gap: 18px;
animation: tg-fade-in-b-oiznzg643k 0.35s ease;
}
@keyframes tg-fade-in-b-oiznzg643k {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== 05. STATS GRID ===== */
.tg-stats-grid[b-oiznzg643k] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
}
.tg-stat-card[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 18px;
padding: 22px;
background: var(--tg-card);
border-radius: var(--tg-radius);
box-shadow: var(--tg-shadow-sm);
border: 1px solid var(--tg-border-soft);
transition: var(--tg-transition);
position: relative;
overflow: hidden;
cursor: default;
}
.tg-stat-card[b-oiznzg643k]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--tg-primary), var(--tg-primary-light));
opacity: 0;
transition: opacity 0.3s;
}
.tg-stat-card:hover[b-oiznzg643k] {
transform: translateY(-4px);
box-shadow: var(--tg-shadow-md);
border-color: var(--tg-primary-soft-2);
}
.tg-stat-card:hover[b-oiznzg643k]::before {
opacity: 1;
}
.tg-stat-card-icon[b-oiznzg643k] {
width: 56px;
height: 56px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
transition: var(--tg-transition);
}
.tg-stat-card:hover .tg-stat-card-icon[b-oiznzg643k] {
transform: scale(1.08) rotate(-3deg);
}
.tg-stat-card-blue[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-card) 0%, rgba(66, 165, 245, 0.04) 100%);
}
.tg-stat-card-blue .tg-stat-card-icon[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-primary-soft-2), var(--tg-primary-soft));
color: var(--tg-primary);
box-shadow: 0 6px 16px rgba(21, 101, 192, 0.15);
}
.tg-stat-card-warning[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-card) 0%, rgba(245, 158, 11, 0.04) 100%);
}
.tg-stat-card-warning .tg-stat-card-icon[b-oiznzg643k] {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), var(--tg-warning-soft));
color: var(--tg-warning);
box-shadow: 0 6px 16px rgba(245, 158, 11, 0.15);
}
.tg-stat-card-success[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-card) 0%, rgba(16, 185, 129, 0.04) 100%);
}
.tg-stat-card-success .tg-stat-card-icon[b-oiznzg643k] {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), var(--tg-success-soft));
color: var(--tg-success);
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.15);
}
.tg-stat-card-danger[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-card) 0%, rgba(239, 68, 68, 0.04) 100%);
}
.tg-stat-card-danger .tg-stat-card-icon[b-oiznzg643k] {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), var(--tg-danger-soft));
color: var(--tg-danger);
box-shadow: 0 6px 16px rgba(239, 68, 68, 0.15);
}
.tg-stat-card-body[b-oiznzg643k] {
display: flex;
flex-direction: column;
gap: 3px;
}
.tg-stat-card-value[b-oiznzg643k] {
font-size: 28px;
font-weight: 800;
color: var(--tg-text);
letter-spacing: -0.8px;
line-height: 1;
}
.tg-stat-card-label[b-oiznzg643k] {
font-size: 13px;
color: var(--tg-text-soft);
font-weight: 500;
}
/* ===== 06. SECTION ===== */
.tg-section[b-oiznzg643k] {
background: var(--tg-card);
border-radius: var(--tg-radius);
border: 1px solid var(--tg-border-soft);
box-shadow: var(--tg-shadow-sm);
padding: 24px;
transition: var(--tg-transition);
}
.tg-section:hover[b-oiznzg643k] {
box-shadow: var(--tg-shadow);
}
.tg-section-header[b-oiznzg643k] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
gap: 12px;
flex-wrap: wrap;
}
.tg-section-title[b-oiznzg643k] {
font-size: 16px;
font-weight: 700;
color: var(--tg-text);
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.tg-section-title i[b-oiznzg643k] {
color: var(--tg-primary);
font-size: 17px;
}
/* ===== 07. QUICK ACTIONS ===== */
.tg-quick-actions[b-oiznzg643k] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 14px;
}
.tg-action-card[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 16px;
padding: 18px;
background: linear-gradient(135deg, #FAFBFD 0%, #F5F8FC 100%);
border: 1.5px solid var(--tg-border);
border-radius: 14px;
cursor: pointer;
transition: var(--tg-transition);
text-align: left;
font-family: inherit;
position: relative;
overflow: hidden;
}
.tg-action-card[b-oiznzg643k]::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, var(--tg-primary-soft) 0%, transparent 70%);
transition: all 0.5s;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.tg-action-card:hover[b-oiznzg643k]::before {
width: 350px;
height: 350px;
}
.tg-action-card:hover[b-oiznzg643k] {
border-color: var(--tg-primary);
background: linear-gradient(135deg, var(--tg-primary-soft) 0%, rgba(66, 165, 245, 0.04) 100%);
transform: translateY(-3px);
box-shadow: var(--tg-shadow-blue);
}
.tg-action-card:active[b-oiznzg643k] {
transform: translateY(-1px) scale(0.99);
}
.tg-action-icon[b-oiznzg643k] {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, var(--tg-primary) 0%, var(--tg-primary-light) 100%);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(21, 101, 192, 0.3);
transition: var(--tg-transition);
position: relative;
z-index: 1;
}
.tg-action-card:hover .tg-action-icon[b-oiznzg643k] {
transform: scale(1.08) rotate(-5deg);
box-shadow: 0 10px 24px rgba(21, 101, 192, 0.45);
}
.tg-action-body[b-oiznzg643k] {
display: flex;
flex-direction: column;
gap: 3px;
position: relative;
z-index: 1;
}
.tg-action-title[b-oiznzg643k] {
font-size: 14px;
font-weight: 700;
color: var(--tg-text);
}
.tg-action-desc[b-oiznzg643k] {
font-size: 12px;
color: var(--tg-text-soft);
font-weight: 500;
}
/* ===== 08. MINI LIST ===== */
.tg-mini-list[b-oiznzg643k] {
display: flex;
flex-direction: column;
gap: 10px;
}
.tg-mini-item[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 12px;
background: #FAFBFD;
border: 1px solid var(--tg-border-soft);
transition: var(--tg-transition);
cursor: default;
}
.tg-mini-item:hover[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-primary-soft) 0%, transparent 100%);
border-color: var(--tg-primary-soft-2);
transform: translateX(4px);
}
.tg-mini-icon[b-oiznzg643k] {
font-size: 22px;
flex-shrink: 0;
transition: var(--tg-transition);
}
.tg-mini-item:hover .tg-mini-icon[b-oiznzg643k] {
transform: scale(1.15);
}
.tg-mini-body[b-oiznzg643k] {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.tg-mini-title[b-oiznzg643k] {
font-size: 13px;
font-weight: 700;
color: var(--tg-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tg-mini-desc[b-oiznzg643k] {
font-size: 12px;
color: var(--tg-text-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ===== 09. FILTERS ===== */
.tg-filters-card[b-oiznzg643k] {
background: var(--tg-card);
border-radius: var(--tg-radius);
padding: 24px;
box-shadow: var(--tg-shadow);
border: 1px solid var(--tg-border-soft);
position: relative;
overflow: hidden;
}
.tg-filters-card[b-oiznzg643k]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--tg-primary) 0%, var(--tg-primary-light) 50%, var(--tg-primary) 100%);
}
.tg-filters-header[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 700;
color: var(--tg-text);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--tg-border-soft);
}
.tg-filters-icon[b-oiznzg643k] {
color: var(--tg-primary);
font-size: 16px;
}
.tg-filters-title[b-oiznzg643k] {
font-size: 15px;
font-weight: 700;
}
.tg-filters-grid[b-oiznzg643k] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
align-items: end;
}
.tg-field[b-oiznzg643k] {
display: flex;
flex-direction: column;
gap: 7px;
}
.tg-field-action[b-oiznzg643k] {
justify-content: flex-end;
}
.tg-field-row[b-oiznzg643k] {
display: flex;
gap: 12px;
}
.tg-field-row .tg-field[b-oiznzg643k] {
flex: 1;
}
.tg-label[b-oiznzg643k] {
font-size: 12px;
font-weight: 700;
color: var(--tg-text-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tg-label-inline[b-oiznzg643k] {
font-size: 13px;
font-weight: 600;
color: var(--tg-text-soft);
margin-right: 8px;
}
.tg-input[b-oiznzg643k],
.tg-select[b-oiznzg643k],
.tg-textarea[b-oiznzg643k] {
width: 100%;
padding: 11px 15px;
border-radius: var(--tg-radius-sm);
border: 1.5px solid var(--tg-border);
font-size: 14px;
font-family: inherit;
color: var(--tg-text);
background: #FFFFFF;
transition: var(--tg-transition);
outline: none;
box-sizing: border-box;
}
.tg-input:hover[b-oiznzg643k],
.tg-select:hover[b-oiznzg643k],
.tg-textarea:hover[b-oiznzg643k] {
border-color: var(--tg-primary-lighter);
}
.tg-input:focus[b-oiznzg643k],
.tg-select:focus[b-oiznzg643k],
.tg-textarea:focus[b-oiznzg643k] {
border-color: var(--tg-primary);
box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.12);
background: #FFFFFF;
}
.tg-textarea[b-oiznzg643k] {
resize: vertical;
min-height: 88px;
font-family: inherit;
line-height: 1.5;
}
.tg-select[b-oiznzg643k] {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
padding-right: 40px;
}
.tg-select-sm[b-oiznzg643k] {
padding: 7px 32px 7px 12px;
font-size: 13px;
width: auto;
min-width: 150px;
background-size: 16px;
}
.tg-field-hint[b-oiznzg643k] {
font-size: 11px;
color: var(--tg-text-muted);
margin-top: 3px;
font-weight: 500;
}
/* ===== 10. BUTTONS ===== */
.tg-btn[b-oiznzg643k] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 11px 22px;
border-radius: 10px;
border: none;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: var(--tg-transition);
font-family: inherit;
white-space: nowrap;
position: relative;
overflow: hidden;
letter-spacing: 0.2px;
}
.tg-btn:disabled[b-oiznzg643k] {
opacity: 0.55;
cursor: not-allowed;
transform: none !important;
}
.tg-btn-lg[b-oiznzg643k] {
padding: 14px 32px;
font-size: 15px;
border-radius: 12px;
}
/* Primary (azul) */
.tg-btn-primary[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-primary) 0%, var(--tg-primary-light) 100%);
color: #FFFFFF;
box-shadow: var(--tg-shadow-blue);
}
.tg-btn-primary:hover:not(:disabled)[b-oiznzg643k] {
transform: translateY(-2px);
box-shadow: var(--tg-shadow-blue-strong);
background: linear-gradient(135deg, var(--tg-primary-dark) 0%, var(--tg-primary) 100%);
}
.tg-btn-primary:active:not(:disabled)[b-oiznzg643k] {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}
/* Secondary (gris) */
.tg-btn-secondary[b-oiznzg643k] {
background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
color: var(--tg-text);
border: 1px solid var(--tg-border);
}
.tg-btn-secondary:hover:not(:disabled)[b-oiznzg643k] {
background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%);
transform: translateY(-2px);
box-shadow: var(--tg-shadow-sm);
}
.tg-btn-secondary:active:not(:disabled)[b-oiznzg643k] {
transform: translateY(0);
}
/* Success (verde) */
.tg-btn-success[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-success) 0%, #34D399 100%);
color: #FFFFFF;
box-shadow: 0 8px 22px rgba(16, 185, 129, 0.32);
}
.tg-btn-success:hover:not(:disabled)[b-oiznzg643k] {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(16, 185, 129, 0.45);
background: linear-gradient(135deg, var(--tg-success-dark) 0%, var(--tg-success) 100%);
}
.tg-btn-success:active:not(:disabled)[b-oiznzg643k] {
transform: translateY(0);
}
/* Danger (rojo) */
.tg-btn-danger[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-danger) 0%, #F87171 100%);
color: #FFFFFF;
box-shadow: 0 8px 22px rgba(239, 68, 68, 0.32);
}
.tg-btn-danger:hover:not(:disabled)[b-oiznzg643k] {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(239, 68, 68, 0.45);
background: linear-gradient(135deg, var(--tg-danger-dark) 0%, var(--tg-danger) 100%);
}
.tg-btn-danger:active:not(:disabled)[b-oiznzg643k] {
transform: translateY(0);
}
/* Light (blanco) */
.tg-btn-light[b-oiznzg643k] {
background: #FFFFFF;
color: var(--tg-primary-dark);
border: 1.5px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.tg-btn-light:hover:not(:disabled)[b-oiznzg643k] {
background: #F8FAFC;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}
.tg-btn-light:active:not(:disabled)[b-oiznzg643k] {
transform: translateY(0);
}
/* Outline light */
.tg-btn-outline-light[b-oiznzg643k] {
background: transparent;
color: #FFFFFF;
border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.tg-btn-outline-light:hover:not(:disabled)[b-oiznzg643k] {
background: rgba(255, 255, 255, 0.18);
border-color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.tg-btn-outline-light:active:not(:disabled)[b-oiznzg643k] {
transform: translateY(0);
}
/* Ghost */
.tg-btn-ghost[b-oiznzg643k] {
background: transparent;
color: var(--tg-primary);
border: 1.5px dashed var(--tg-border);
padding: 8px 16px;
font-size: 13px;
}
.tg-btn-ghost:hover:not(:disabled)[b-oiznzg643k] {
border-color: var(--tg-primary);
border-style: solid;
background: var(--tg-primary-soft);
transform: translateY(-1px);
}
/* Icon small */
.tg-btn-icon-sm[b-oiznzg643k] {
width: 36px;
height: 36px;
border-radius: 9px;
border: 1.5px solid var(--tg-border);
background: #FFFFFF;
color: var(--tg-text-soft);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: var(--tg-transition);
flex-shrink: 0;
}
.tg-btn-icon-sm:hover[b-oiznzg643k] {
color: var(--tg-primary);
border-color: var(--tg-primary);
background: var(--tg-primary-soft);
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(21, 101, 192, 0.2);
}
.tg-btn-icon-sm:active[b-oiznzg643k] {
transform: translateY(0) scale(0.95);
}
/* ===== 11. LIST CARD ===== */
.tg-list-card[b-oiznzg643k] {
background: var(--tg-card);
border-radius: var(--tg-radius);
box-shadow: var(--tg-shadow);
border: 1px solid var(--tg-border-soft);
overflow: hidden;
}
.tg-list-header[b-oiznzg643k] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid var(--tg-border-soft);
background: linear-gradient(135deg, #FAFBFD 0%, #F5F8FC 100%);
gap: 12px;
flex-wrap: wrap;
}
.tg-list-header-left[b-oiznzg643k] {
display: flex;
flex-direction: column;
gap: 3px;
}
.tg-list-title[b-oiznzg643k] {
font-size: 15px;
font-weight: 700;
color: var(--tg-text);
}
.tg-list-subtitle[b-oiznzg643k] {
font-size: 12px;
color: var(--tg-text-soft);
font-weight: 500;
}
.tg-list-actions[b-oiznzg643k] {
display: flex;
gap: 8px;
}
.tg-list-body[b-oiznzg643k] {
max-height: 560px;
overflow-y: auto;
padding: 10px;
}
/* ===== 12. ITEMS LISTA ===== */
.tg-item[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 12px;
cursor: pointer;
transition: var(--tg-transition);
border: 1.5px solid transparent;
margin-bottom: 6px;
position: relative;
}
.tg-item:hover[b-oiznzg643k] {
background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
transform: translateX(4px);
border-color: var(--tg-border);
}
.tg-item-selected[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-primary-soft) 0%, rgba(66, 165, 245, 0.05) 100%);
border-color: var(--tg-primary);
box-shadow: 0 4px 14px rgba(21, 101, 192, 0.12);
}
.tg-item-selected:hover[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-primary-soft-2) 0%, rgba(66, 165, 245, 0.08) 100%);
border-color: var(--tg-primary-dark);
}
.tg-item-check[b-oiznzg643k] {
font-size: 22px;
min-width: 26px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--tg-transition);
}
.tg-item:hover .tg-item-check[b-oiznzg643k] {
transform: scale(1.1);
}
.tg-check-on[b-oiznzg643k] {
color: var(--tg-primary);
filter: drop-shadow(0 2px 4px rgba(21, 101, 192, 0.4));
}
.tg-check-off[b-oiznzg643k] {
color: var(--tg-text-muted);
}
.tg-item-body[b-oiznzg643k] {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.tg-item-row[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.tg-item-name[b-oiznzg643k] {
font-size: 14px;
font-weight: 700;
color: var(--tg-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tg-item-row-sub[b-oiznzg643k] {
font-size: 12px;
color: var(--tg-text-soft);
font-weight: 500;
}
.tg-item-row-sub span[b-oiznzg643k] {
display: inline-flex;
align-items: center;
gap: 4px;
}
.tg-item-row-sub i[b-oiznzg643k] {
font-size: 11px;
opacity: 0.75;
}
.tg-item-badge[b-oiznzg643k] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2px;
}
.tg-badge-vinculado[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-primary-soft-2), var(--tg-primary-soft));
color: var(--tg-primary-dark);
border: 1px solid rgba(21, 101, 192, 0.2);
}
.tg-badge-novinculado[b-oiznzg643k] {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), var(--tg-warning-soft));
color: var(--tg-warning-dark);
border: 1px solid rgba(245, 158, 11, 0.25);
}
.tg-item-actions[b-oiznzg643k] {
display: flex;
gap: 6px;
opacity: 0.7;
transition: opacity 0.2s;
}
.tg-item:hover .tg-item-actions[b-oiznzg643k] {
opacity: 1;
}
/* ===== 13. ACTIONS BAR ===== */
.tg-actions-bar[b-oiznzg643k] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
background: linear-gradient(135deg, var(--tg-card) 0%, #FAFBFD 100%);
border-radius: var(--tg-radius);
box-shadow: var(--tg-shadow);
border: 1px solid var(--tg-border-soft);
gap: 14px;
flex-wrap: wrap;
position: sticky;
bottom: 12px;
}
.tg-actions-info[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--tg-text-soft);
font-weight: 500;
}
.tg-actions-info b[b-oiznzg643k] {
color: var(--tg-primary);
font-weight: 800;
}
.tg-info-icon[b-oiznzg643k] {
color: var(--tg-primary);
font-size: 16px;
}
.tg-actions-buttons[b-oiznzg643k] {
display: flex;
gap: 10px;
}
/* ===== 14. PROGRESS ===== */
.tg-progress[b-oiznzg643k] {
height: 10px;
background: linear-gradient(90deg, #E2E8F0 0%, #CBD5E1 100%);
border-radius: 20px;
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
position: relative;
}
.tg-progress-bar[b-oiznzg643k] {
height: 100%;
background: linear-gradient(90deg, var(--tg-primary) 0%, var(--tg-primary-light) 100%);
border-radius: 20px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 16px rgba(21, 101, 192, 0.55);
position: relative;
overflow: hidden;
}
.tg-progress-bar[b-oiznzg643k]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
animation: tg-progress-shine-b-oiznzg643k 1.5s linear infinite;
}
@keyframes tg-progress-shine-b-oiznzg643k {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
/* ===== 15. EMPTY STATES ===== */
.tg-empty[b-oiznzg643k] {
display: flex;
flex-direction: column;
align-items: center;
padding: 48px 20px;
gap: 14px;
color: var(--tg-text-soft);
}
.tg-empty-icon[b-oiznzg643k] {
font-size: 42px;
color: var(--tg-text-muted);
opacity: 0.6;
}
.tg-empty-text[b-oiznzg643k] {
font-size: 13px;
font-weight: 500;
}
.tg-empty-large[b-oiznzg643k] {
display: flex;
flex-direction: column;
align-items: center;
padding: 72px 20px;
gap: 14px;
background: linear-gradient(135deg, var(--tg-card) 0%, #FAFBFD 100%);
border-radius: var(--tg-radius);
border: 2px dashed var(--tg-border);
transition: var(--tg-transition);
}
.tg-empty-large:hover[b-oiznzg643k] {
border-color: var(--tg-primary-lighter);
background: linear-gradient(135deg, var(--tg-card) 0%, var(--tg-primary-soft) 100%);
}
.tg-empty-large-icon[b-oiznzg643k] {
font-size: 56px;
color: var(--tg-primary-lighter);
margin-bottom: 8px;
opacity: 0.75;
}
.tg-empty-large-title[b-oiznzg643k] {
font-size: 18px;
font-weight: 700;
color: var(--tg-text);
margin: 0;
}
.tg-empty-large-text[b-oiznzg643k] {
font-size: 14px;
color: var(--tg-text-soft);
margin: 0;
text-align: center;
max-width: 400px;
font-weight: 500;
}
/* ===== 16. HERO CARDS ===== */
.tg-hero-card[b-oiznzg643k] {
display: flex;
gap: 26px;
padding: 36px;
border-radius: var(--tg-radius-lg);
color: #FFFFFF;
box-shadow: var(--tg-shadow-lg);
position: relative;
overflow: hidden;
isolation: isolate;
}
.tg-hero-card[b-oiznzg643k]::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.tg-hero-card[b-oiznzg643k]::after {
content: '';
position: absolute;
bottom: -40%;
left: 20%;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(144, 202, 249, 0.15) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.tg-hero-card-purple[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-primary-darker) 0%, var(--tg-primary) 50%, var(--tg-purple) 100%);
}
.tg-hero-card-green[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-success-dark) 0%, var(--tg-success) 60%, #34D399 100%);
}
.tg-hero-icon[b-oiznzg643k] {
width: 78px;
height: 78px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
flex-shrink: 0;
border: 1.5px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
position: relative;
z-index: 1;
}
.tg-hero-body[b-oiznzg643k] {
flex: 1;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.tg-hero-title[b-oiznzg643k] {
font-size: 24px;
font-weight: 800;
margin: 0 0 10px;
letter-spacing: -0.4px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.tg-hero-desc[b-oiznzg643k] {
font-size: 14.5px;
opacity: 0.95;
line-height: 1.55;
margin: 0 0 22px;
max-width: 640px;
font-weight: 500;
}
.tg-hero-desc b[b-oiznzg643k] {
font-weight: 800;
background: rgba(255, 255, 255, 0.15);
padding: 2px 6px;
border-radius: 4px;
}
.tg-hero-actions[b-oiznzg643k] {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* ===== 17. FILTERS BAR ===== */
.tg-filters-bar[b-oiznzg643k] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: linear-gradient(135deg, var(--tg-card) 0%, #FAFBFD 100%);
border-radius: var(--tg-radius);
box-shadow: var(--tg-shadow-sm);
border: 1px solid var(--tg-border-soft);
gap: 12px;
flex-wrap: wrap;
}
.tg-filters-bar-left[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 10px;
}
.tg-filters-bar-right[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 8px;
}
/* ===== 18. SOLICITUDES CARDS ===== */
.tg-solicitudes-list[b-oiznzg643k] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 14px;
}
.tg-solicitud-card[b-oiznzg643k] {
display: flex;
gap: 16px;
padding: 18px;
background: linear-gradient(135deg, var(--tg-card) 0%, #FAFBFD 100%);
border-radius: var(--tg-radius);
border: 1.5px solid var(--tg-border-soft);
box-shadow: var(--tg-shadow-sm);
cursor: pointer;
transition: var(--tg-transition);
position: relative;
overflow: hidden;
}
.tg-solicitud-card[b-oiznzg643k]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--tg-primary) 0%, var(--tg-primary-light) 100%);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
.tg-solicitud-card:hover[b-oiznzg643k]::before {
transform: scaleY(1);
}
.tg-solicitud-card:hover[b-oiznzg643k] {
transform: translateY(-4px);
box-shadow: var(--tg-shadow-md);
border-color: var(--tg-primary-soft-2);
background: linear-gradient(135deg, var(--tg-card) 0%, var(--tg-primary-soft) 100%);
}
.tg-solicitud-card:active[b-oiznzg643k] {
transform: translateY(-2px) scale(0.99);
}
.tg-solicitud-icon[b-oiznzg643k] {
width: 54px;
height: 54px;
border-radius: 14px;
background: linear-gradient(135deg, var(--tg-primary-soft-2), var(--tg-primary-soft));
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
transition: var(--tg-transition);
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.12);
}
.tg-solicitud-card:hover .tg-solicitud-icon[b-oiznzg643k] {
transform: scale(1.08) rotate(-5deg);
box-shadow: 0 8px 20px rgba(21, 101, 192, 0.25);
}
.tg-solicitud-body[b-oiznzg643k] {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.tg-solicitud-row[b-oiznzg643k] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.tg-solicitud-title[b-oiznzg643k] {
font-size: 14.5px;
font-weight: 700;
color: var(--tg-text);
}
.tg-solicitud-row-sub[b-oiznzg643k] {
font-size: 12px;
color: var(--tg-text-soft);
justify-content: flex-start;
gap: 14px;
font-weight: 500;
}
.tg-solicitud-row-sub span[b-oiznzg643k] {
display: inline-flex;
align-items: center;
gap: 5px;
}
.tg-solicitud-row-sub i[b-oiznzg643k] {
font-size: 11px;
opacity: 0.7;
}
.tg-solicitud-detalle[b-oiznzg643k] {
font-size: 12.5px;
color: var(--tg-text-soft);
padding: 9px 12px;
background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
border-radius: 8px;
border-left: 3px solid var(--tg-primary-light);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.5;
font-weight: 500;
}
.tg-solicitud-row-meta[b-oiznzg643k] {
font-size: 11px;
color: var(--tg-text-muted);
justify-content: space-between;
font-weight: 500;
}
.tg-ticket[b-oiznzg643k] {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-weight: 700;
color: var(--tg-primary);
background: linear-gradient(135deg, var(--tg-primary-soft-2), var(--tg-primary-soft));
padding: 3px 9px;
border-radius: 6px;
font-size: 11px;
letter-spacing: 0.4px;
border: 1px solid rgba(21, 101, 192, 0.15);
}
/* ===== 19. BADGES ===== */
.tg-badge[b-oiznzg643k] {
display: inline-flex;
align-items: center;
padding: 5px 13px;
border-radius: 20px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid transparent;
white-space: nowrap;
}
.tg-badge-pendiente[b-oiznzg643k] {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), var(--tg-warning-soft));
color: var(--tg-warning-dark);
border-color: rgba(245, 158, 11, 0.25);
}
.tg-badge-resuelto[b-oiznzg643k] {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), var(--tg-success-soft));
color: var(--tg-success-dark);
border-color: rgba(16, 185, 129, 0.25);
}
.tg-badge-rechazado[b-oiznzg643k] {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), var(--tg-danger-soft));
color: var(--tg-danger-dark);
border-color: rgba(239, 68, 68, 0.25);
}
.tg-badge-proceso[b-oiznzg643k] {
background: linear-gradient(135deg, var(--tg-primary-soft-2), var(--tg-primary-soft));
color: var(--tg-primary-dark);
border-color: rgba(21, 101, 192, 0.25);
}
.tg-badge-cancelado[b-oiznzg643k] {
background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
color: #475569;
border-color: #CBD5E1;
}
.tg-badge-default[b-oiznzg643k] {
background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
color: #475569;
border-color: #CBD5E1;
}
/* ===== 20. INFO BOX ===== */
.tg-info-box[b-oiznzg643k] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: linear-gradient(135deg, var(--tg-primary-soft-2) 0%, var(--tg-primary-soft) 100%);
border-radius: 12px;
font-size: 13px;
color: var(--tg-primary-dark);
border-left: 4px solid var(--tg-primary);
font-weight: 500;
line-height: 1.5;
}
.tg-info-box i[b-oiznzg643k] {
font-size: 18px;
flex-shrink: 0;
}
.tg-info-box b[b-oiznzg643k] {
font-weight: 800;
color: var(--tg-primary-dark);
}
/* ===== 21. MODALES (REDISEΓADOS) ===== */
.tg-modal-overlay[b-oiznzg643k] {
position: fixed;
inset: 0;
background: radial-gradient(circle at center, rgba(10, 56, 128, 0.65) 0%, rgba(15, 23, 41, 0.75) 100%);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 24px;
animation: tg-modal-fade-b-oiznzg643k 0.25s ease;
}
@keyframes tg-modal-fade-b-oiznzg643k {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.tg-modal[b-oiznzg643k] {
background: var(--tg-card);
border-radius: var(--tg-radius-lg);
box-shadow: 0 32px 80px rgba(10, 56, 128, 0.35), 0 8px 24px rgba(15, 23, 41, 0.2), 0 0 0 1px rgba(21, 101, 192, 0.08);
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
animation: tg-modal-slide-b-oiznzg643k 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
position: relative;
}
@keyframes tg-modal-slide-b-oiznzg643k {
from {
opacity: 0;
transform: translateY(20px) scale(0.94);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.tg-modal-sm[b-oiznzg643k] {
max-width: 460px;
}
.tg-modal-md[b-oiznzg643k] {
max-width: 660px;
}
.tg-modal-lg[b-oiznzg643k] {
max-width: 860px;
}
.tg-modal-header[b-oiznzg643k] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 26px;
background: linear-gradient(135deg, var(--tg-primary-darker) 0%, var(--tg-primary) 100%);
color: #FFFFFF;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.tg-modal-header[b-oiznzg643k]::before {
content: '';
position: absolute;
top: -60%;
right: -10%;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 65%);
pointer-events: none;
}
.tg-modal-title[b-oiznzg643k] {
font-size: 17px;
font-weight: 700;
color: #FFFFFF;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.tg-modal-title i[b-oiznzg643k] {
color: #FFFFFF;
font-size: 18px;
background: rgba(255, 255, 255, 0.18);
width: 34px;
height: 34px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.25);
}
.tg-modal-close[b-oiznzg643k] {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
font-size: 24px;
color: #FFFFFF;
cursor: pointer;
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--tg-transition);
line-height: 1;
position: relative;
z-index: 1;
font-weight: 300;
}
.tg-modal-close:hover[b-oiznzg643k] {
background: rgba(255, 255, 255, 0.28);
transform: rotate(90deg) scale(1.08);
border-color: rgba(255, 255, 255, 0.45);
}
.tg-modal-close:active[b-oiznzg643k] {
transform: rotate(90deg) scale(0.95);
}
.tg-modal-body[b-oiznzg643k] {
padding: 26px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 18px;
flex: 1;
background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
}
.tg-modal-footer[b-oiznzg643k] {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 18px 26px;
border-top: 1px solid var(--tg-border-soft);
background: linear-gradient(135deg, #FAFBFD 0%, #F5F8FC 100%);
flex-shrink: 0;
}
/* ===== 22. PREVIEW BUBBLE ===== */
.tg-preview-bubble[b-oiznzg643k] {
padding: 22px;
background: linear-gradient(135deg, #E3F2FD 0%, #F0F7FF 50%, #E3F2FD 100%);
border-radius: 16px;
border: 1.5px solid #BBDEFB;
position: relative;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(21, 101, 192, 0.08);
}
.tg-preview-bubble[b-oiznzg643k]::before {
content: 'π¬';
position: absolute;
top: -12px;
left: 20px;
background: linear-gradient(135deg, var(--tg-primary) 0%, var(--tg-primary-light) 100%);
color: #FFFFFF;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}
.tg-preview-text[b-oiznzg643k] {
white-space: pre-wrap;
word-wrap: break-word;
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 13px;
line-height: 1.65;
color: var(--tg-text);
margin: 8px 0 0;
font-weight: 500;
}
/* ===== 23. DETAIL GRID ===== */
.tg-detail-grid[b-oiznzg643k] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
background: #FAFBFD;
padding: 18px;
border-radius: 12px;
border: 1px solid var(--tg-border-soft);
}
.tg-detail-item[b-oiznzg643k] {
display: flex;
flex-direction: column;
gap: 5px;
}
.tg-detail-full[b-oiznzg643k] {
grid-column: 1 / -1;
}
.tg-detail-label[b-oiznzg643k] {
font-size: 11px;
font-weight: 700;
color: var(--tg-text-soft);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.tg-detail-value[b-oiznzg643k] {
font-size: 14px;
color: var(--tg-text);
font-weight: 600;
line-height: 1.45;
}
.tg-detail-monto[b-oiznzg643k] {
color: var(--tg-success-dark);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.5px;
background: linear-gradient(135deg, var(--tg-success-dark), var(--tg-success));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===== 24. HELPERS ===== */
.tg-spin[b-oiznzg643k] {
animation: tg-spin-anim-b-oiznzg643k 1s linear infinite;
}
@keyframes tg-spin-anim-b-oiznzg643k {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ===== 25. SCROLLBAR ===== */
.tg-list-body[b-oiznzg643k]::-webkit-scrollbar,
.tg-modal-body[b-oiznzg643k]::-webkit-scrollbar {
width: 10px;
}
.tg-list-body[b-oiznzg643k]::-webkit-scrollbar-track,
.tg-modal-body[b-oiznzg643k]::-webkit-scrollbar-track {
background: transparent;
}
.tg-list-body[b-oiznzg643k]::-webkit-scrollbar-thumb,
.tg-modal-body[b-oiznzg643k]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--tg-border) 0%, #CBD5E1 100%);
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
.tg-list-body[b-oiznzg643k]::-webkit-scrollbar-thumb:hover,
.tg-modal-body[b-oiznzg643k]::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--tg-primary-lighter) 0%, var(--tg-primary-light) 100%);
background-clip: padding-box;
}
/* ===== 26. RESPONSIVE ===== */
/* ============================================================
============================================================
SECCIΓN MOBILE - ADAPTACIΓN PARA CELULARES
Codeado por π¦Ύ Hefesto 13.1 Pro Max | Sr. Ignacio
============================================================
============================================================ */
/* ===== M01. TABLET (hasta 1024px) ===== */
@media (max-width: 1024px) {
.tg-page[b-oiznzg643k] {
padding: 18px;
}
.tg-stats-grid[b-oiznzg643k] {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.tg-solicitudes-list[b-oiznzg643k] {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.tg-quick-actions[b-oiznzg643k] {
grid-template-columns: repeat(2, 1fr);
}
}
/* ===== M02. MOBILE GRANDE (hasta 768px) ===== */
@media (max-width: 768px) {
/* --- Base --- */
.tg-page[b-oiznzg643k] {
padding: 12px;
min-height: 100vh;
}
/* --- Header compacto --- */
.tg-header[b-oiznzg643k] {
padding: 18px 18px;
flex-direction: column;
gap: 14px;
align-items: stretch;
border-radius: 16px;
margin-bottom: 14px;
}
.tg-header-left[b-oiznzg643k] {
gap: 12px;
width: 100%;
}
.tg-header-icon[b-oiznzg643k] {
width: 48px;
height: 48px;
border-radius: 14px;
font-size: 24px;
}
.tg-title[b-oiznzg643k] {
font-size: 18px;
letter-spacing: -0.3px;
}
.tg-subtitle[b-oiznzg643k] {
font-size: 11.5px;
}
.tg-header-right[b-oiznzg643k] {
width: 100%;
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
}
.tg-stat-pill[b-oiznzg643k] {
padding: 7px 14px;
font-size: 12px;
border-radius: 22px;
}
.tg-stat-value[b-oiznzg643k] {
font-size: 14px;
}
.tg-stat-label[b-oiznzg643k] {
font-size: 10.5px;
}
.tg-btn-icon[b-oiznzg643k] {
width: 40px;
height: 40px;
font-size: 15px;
border-radius: 11px;
margin-left: auto;
}
/* --- Tabs scrolleables --- */
.tg-tabs[b-oiznzg643k] {
padding: 5px;
margin-bottom: 14px;
border-radius: 12px;
gap: 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tg-tabs[b-oiznzg643k]::-webkit-scrollbar {
display: none;
}
.tg-tab[b-oiznzg643k] {
padding: 10px 14px;
gap: 6px;
font-size: 13px;
border-radius: 9px;
flex-shrink: 0;
}
.tg-tab-icon[b-oiznzg643k] {
font-size: 15px;
}
.tg-tab-text[b-oiznzg643k] {
font-size: 12.5px;
}
.tg-tab-badge[b-oiznzg643k] {
font-size: 10px;
padding: 2px 7px;
min-width: 18px;
}
/* --- Panel mΓ‘s compacto --- */
.tg-panel[b-oiznzg643k] {
gap: 14px;
}
/* --- Stats en 2 columnas --- */
.tg-stats-grid[b-oiznzg643k] {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.tg-stat-card[b-oiznzg643k] {
padding: 14px;
gap: 12px;
border-radius: 12px;
}
.tg-stat-card-icon[b-oiznzg643k] {
width: 44px;
height: 44px;
border-radius: 12px;
font-size: 20px;
}
.tg-stat-card-value[b-oiznzg643k] {
font-size: 22px;
}
.tg-stat-card-label[b-oiznzg643k] {
font-size: 11px;
}
/* --- Sections --- */
.tg-section[b-oiznzg643k] {
padding: 16px;
border-radius: 12px;
}
.tg-section-header[b-oiznzg643k] {
margin-bottom: 14px;
gap: 10px;
}
.tg-section-title[b-oiznzg643k] {
font-size: 14.5px;
}
.tg-section-title i[b-oiznzg643k] {
font-size: 15px;
}
/* --- Quick actions vertical --- */
.tg-quick-actions[b-oiznzg643k] {
grid-template-columns: 1fr;
gap: 10px;
}
.tg-action-card[b-oiznzg643k] {
padding: 14px;
gap: 12px;
border-radius: 12px;
}
.tg-action-icon[b-oiznzg643k] {
width: 42px;
height: 42px;
border-radius: 11px;
font-size: 18px;
}
.tg-action-title[b-oiznzg643k] {
font-size: 13.5px;
}
.tg-action-desc[b-oiznzg643k] {
font-size: 11.5px;
}
/* --- Mini list --- */
.tg-mini-item[b-oiznzg643k] {
padding: 12px 14px;
border-radius: 10px;
gap: 10px;
}
.tg-mini-icon[b-oiznzg643k] {
font-size: 20px;
}
.tg-mini-title[b-oiznzg643k] {
font-size: 12.5px;
}
.tg-mini-desc[b-oiznzg643k] {
font-size: 11px;
}
/* --- Filters card --- */
.tg-filters-card[b-oiznzg643k] {
padding: 16px;
border-radius: 12px;
}
.tg-filters-header[b-oiznzg643k] {
font-size: 14px;
margin-bottom: 14px;
padding-bottom: 12px;
}
.tg-filters-grid[b-oiznzg643k] {
grid-template-columns: 1fr;
gap: 12px;
}
.tg-field-row[b-oiznzg643k] {
flex-direction: column;
gap: 12px;
}
.tg-label[b-oiznzg643k] {
font-size: 11px;
}
.tg-input[b-oiznzg643k],
.tg-select[b-oiznzg643k],
.tg-textarea[b-oiznzg643k] {
padding: 11px 14px;
font-size: 14px;
border-radius: 10px;
}
.tg-textarea[b-oiznzg643k] {
min-height: 80px;
}
.tg-field-action[b-oiznzg643k] {
margin-top: 4px;
}
.tg-field-action .tg-btn[b-oiznzg643k] {
width: 100%;
}
/* --- Buttons full width en mobile --- */
.tg-btn[b-oiznzg643k] {
padding: 12px 18px;
font-size: 13.5px;
border-radius: 10px;
gap: 8px;
}
.tg-btn-lg[b-oiznzg643k] {
padding: 14px 22px;
font-size: 14.5px;
width: 100%;
border-radius: 12px;
}
.tg-btn-ghost[b-oiznzg643k] {
padding: 8px 14px;
font-size: 12px;
}
.tg-btn-icon-sm[b-oiznzg643k] {
width: 34px;
height: 34px;
font-size: 13px;
}
/* --- List card --- */
.tg-list-card[b-oiznzg643k] {
border-radius: 12px;
}
.tg-list-header[b-oiznzg643k] {
padding: 14px 16px;
gap: 10px;
flex-direction: column;
align-items: flex-start;
}
.tg-list-header-left[b-oiznzg643k] {
width: 100%;
}
.tg-list-title[b-oiznzg643k] {
font-size: 14px;
}
.tg-list-subtitle[b-oiznzg643k] {
font-size: 11px;
}
.tg-list-actions[b-oiznzg643k] {
width: 100%;
justify-content: space-between;
}
.tg-list-actions .tg-btn-ghost[b-oiznzg643k] {
flex: 1;
justify-content: center;
}
.tg-list-body[b-oiznzg643k] {
max-height: none;
padding: 8px;
}
/* --- Items lista --- */
.tg-item[b-oiznzg643k] {
padding: 12px 14px;
gap: 12px;
border-radius: 11px;
margin-bottom: 5px;
}
.tg-item:hover[b-oiznzg643k] {
transform: none;
}
.tg-item-check[b-oiznzg643k] {
font-size: 20px;
min-width: 22px;
}
.tg-item-name[b-oiznzg643k] {
font-size: 13px;
white-space: normal;
word-break: break-word;
}
.tg-item-row[b-oiznzg643k] {
gap: 8px;
}
.tg-item-row-sub[b-oiznzg643k] {
font-size: 11px;
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.tg-item-badge[b-oiznzg643k] {
font-size: 10px;
padding: 3px 9px;
}
.tg-item-actions[b-oiznzg643k] {
opacity: 1;
}
/* --- Actions bar sticky full width --- */
.tg-actions-bar[b-oiznzg643k] {
padding: 14px 16px;
border-radius: 12px;
flex-direction: column;
align-items: stretch;
gap: 12px;
position: sticky;
bottom: 8px;
z-index: 50;
box-shadow: 0 -4px 20px rgba(15, 23, 41, 0.12), var(--tg-shadow);
}
.tg-actions-info[b-oiznzg643k] {
font-size: 12px;
justify-content: center;
text-align: center;
}
.tg-actions-buttons[b-oiznzg643k] {
width: 100%;
}
.tg-actions-buttons .tg-btn[b-oiznzg643k] {
width: 100%;
}
/* --- Progress --- */
.tg-progress[b-oiznzg643k] {
height: 8px;
}
/* --- Empty states --- */
.tg-empty-large[b-oiznzg643k] {
padding: 44px 18px;
border-radius: 12px;
}
.tg-empty-large-icon[b-oiznzg643k] {
font-size: 42px;
}
.tg-empty-large-title[b-oiznzg643k] {
font-size: 16px;
}
.tg-empty-large-text[b-oiznzg643k] {
font-size: 13px;
}
/* --- Hero cards --- */
.tg-hero-card[b-oiznzg643k] {
padding: 22px;
border-radius: 16px;
flex-direction: column;
gap: 16px;
}
.tg-hero-icon[b-oiznzg643k] {
width: 58px;
height: 58px;
font-size: 26px;
border-radius: 16px;
}
.tg-hero-title[b-oiznzg643k] {
font-size: 18px;
}
.tg-hero-desc[b-oiznzg643k] {
font-size: 13px;
line-height: 1.5;
margin-bottom: 16px;
}
.tg-hero-actions[b-oiznzg643k] {
flex-direction: column;
gap: 10px;
}
.tg-hero-actions .tg-btn[b-oiznzg643k] {
width: 100%;
}
/* --- Filters bar --- */
.tg-filters-bar[b-oiznzg643k] {
padding: 12px 16px;
border-radius: 12px;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.tg-filters-bar-left[b-oiznzg643k] {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.tg-filters-bar-right[b-oiznzg643k] {
width: 100%;
}
.tg-filters-bar-right .tg-btn-ghost[b-oiznzg643k] {
width: 100%;
justify-content: center;
}
.tg-select-sm[b-oiznzg643k] {
width: 100%;
min-width: 100%;
}
/* --- Solicitudes cards --- */
.tg-solicitudes-list[b-oiznzg643k] {
grid-template-columns: 1fr;
gap: 10px;
}
.tg-solicitud-card[b-oiznzg643k] {
padding: 14px;
gap: 12px;
border-radius: 12px;
}
.tg-solicitud-card:hover[b-oiznzg643k] {
transform: translateY(-2px);
}
.tg-solicitud-icon[b-oiznzg643k] {
width: 44px;
height: 44px;
font-size: 20px;
border-radius: 12px;
}
.tg-solicitud-body[b-oiznzg643k] {
gap: 6px;
}
.tg-solicitud-row[b-oiznzg643k] {
gap: 6px;
}
.tg-solicitud-title[b-oiznzg643k] {
font-size: 13px;
}
.tg-solicitud-row-sub[b-oiznzg643k] {
font-size: 11px;
gap: 10px;
flex-wrap: wrap;
}
.tg-solicitud-detalle[b-oiznzg643k] {
font-size: 11.5px;
padding: 8px 10px;
-webkit-line-clamp: 3;
}
.tg-solicitud-row-meta[b-oiznzg643k] {
font-size: 10.5px;
}
.tg-ticket[b-oiznzg643k] {
font-size: 10px;
padding: 2px 7px;
}
/* --- Badges --- */
.tg-badge[b-oiznzg643k] {
font-size: 10px;
padding: 4px 10px;
letter-spacing: 0.3px;
}
/* --- Info box --- */
.tg-info-box[b-oiznzg643k] {
padding: 12px 14px;
font-size: 12px;
gap: 10px;
border-radius: 10px;
}
.tg-info-box i[b-oiznzg643k] {
font-size: 15px;
}
/* --- MODALES pantalla completa con slide-up --- */
.tg-modal-overlay[b-oiznzg643k] {
padding: 0;
align-items: flex-end;
background: radial-gradient(circle at center top, rgba(10, 56, 128, 0.7) 0%, rgba(15, 23, 41, 0.85) 100%);
}
.tg-modal[b-oiznzg643k] {
max-width: 100% !important;
max-height: 92vh;
border-radius: 24px 24px 0 0;
animation: tg-mobile-slide-up-b-oiznzg643k 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.tg-modal-sm[b-oiznzg643k],
.tg-modal-md[b-oiznzg643k],
.tg-modal-lg[b-oiznzg643k] {
max-width: 100%;
}
@keyframes tg-mobile-slide-up-b-oiznzg643k {
from {
transform: translateY(100%);
opacity: 0.5;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Handle visual arriba del modal (mobile-style) */
.tg-modal-header[b-oiznzg643k]::before {
content: '';
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 42px;
height: 5px;
background: rgba(255, 255, 255, 0.4);
border-radius: 3px;
z-index: 5;
}
.tg-modal-header[b-oiznzg643k] {
padding: 26px 20px 18px;
border-radius: 24px 24px 0 0;
}
.tg-modal-title[b-oiznzg643k] {
font-size: 15.5px;
gap: 10px;
}
.tg-modal-title i[b-oiznzg643k] {
width: 30px;
height: 30px;
font-size: 15px;
border-radius: 8px;
}
.tg-modal-close[b-oiznzg643k] {
width: 34px;
height: 34px;
font-size: 20px;
}
.tg-modal-body[b-oiznzg643k] {
padding: 20px 18px;
gap: 14px;
border-radius: 0;
}
.tg-modal-footer[b-oiznzg643k] {
padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
border-radius: 0;
flex-direction: column-reverse;
gap: 10px;
}
/* ===== FIX HOVER BOTONES APROBAR/RECHAZAR ===== */
.tg-modal-footer .tg-btn[b-oiznzg643k] {
transform: none !important;
transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease;
}
.tg-modal-footer .tg-btn-success:hover:not(:disabled)[b-oiznzg643k] {
background: linear-gradient(135deg, #047857 0%, #10B981 100%);
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 8px 20px rgba(16, 185, 129, 0.35);
transform: none !important;
}
.tg-modal-footer .tg-btn-danger:hover:not(:disabled)[b-oiznzg643k] {
background: linear-gradient(135deg, #B91C1C 0%, #EF4444 100%);
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2), 0 8px 20px rgba(239, 68, 68, 0.35);
transform: none !important;
}
.tg-modal-footer .tg-btn-success:active:not(:disabled)[b-oiznzg643k],
.tg-modal-footer .tg-btn-danger:active:not(:disabled)[b-oiznzg643k] {
transform: scale(0.97) !important;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}
.tg-modal-footer .tg-btn-secondary:hover:not(:disabled)[b-oiznzg643k] {
background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
transform: none !important;
box-shadow: 0 4px 12px rgba(15, 23, 41, 0.1);
}
/* --- Preview bubble --- */
.tg-preview-bubble[b-oiznzg643k] {
padding: 18px;
border-radius: 14px;
}
.tg-preview-bubble[b-oiznzg643k]::before {
top: -14px;
left: 16px;
width: 30px;
height: 30px;
font-size: 14px;
}
.tg-preview-text[b-oiznzg643k] {
font-size: 12px;
line-height: 1.6;
}
/* --- Detail grid --- */
.tg-detail-grid[b-oiznzg643k] {
grid-template-columns: 1fr;
padding: 16px;
gap: 14px;
border-radius: 12px;
}
.tg-detail-label[b-oiznzg643k] {
font-size: 10px;
}
.tg-detail-value[b-oiznzg643k] {
font-size: 13px;
}
.tg-detail-monto[b-oiznzg643k] {
font-size: 20px;
}
}
/* ===== M03. MOBILE PEQUEΓO (hasta 480px) ===== */
@media (max-width: 480px) {
.tg-page[b-oiznzg643k] {
padding: 10px;
}
.tg-header[b-oiznzg643k] {
padding: 16px 14px;
border-radius: 14px;
margin-bottom: 12px;
}
.tg-header-icon[b-oiznzg643k] {
width: 42px;
height: 42px;
border-radius: 12px;
font-size: 21px;
}
.tg-title[b-oiznzg643k] {
font-size: 16.5px;
}
.tg-subtitle[b-oiznzg643k] {
font-size: 11px;
}
.tg-stat-pill[b-oiznzg643k] {
padding: 6px 12px;
font-size: 11px;
}
.tg-stat-value[b-oiznzg643k] {
font-size: 13px;
}
.tg-stat-label[b-oiznzg643k] {
display: none;
}
.tg-tabs[b-oiznzg643k] {
padding: 4px;
border-radius: 11px;
}
.tg-tab[b-oiznzg643k] {
padding: 9px 12px;
gap: 5px;
}
.tg-tab-text[b-oiznzg643k] {
font-size: 11.5px;
}
.tg-tab-icon[b-oiznzg643k] {
font-size: 14px;
}
.tg-tab-badge[b-oiznzg643k] {
font-size: 9px;
padding: 1px 6px;
min-width: 16px;
}
/* Stats vertical en muy chico */
.tg-stats-grid[b-oiznzg643k] {
grid-template-columns: 1fr;
gap: 8px;
}
.tg-stat-card[b-oiznzg643k] {
padding: 12px;
gap: 10px;
}
.tg-stat-card-icon[b-oiznzg643k] {
width: 40px;
height: 40px;
font-size: 18px;
}
.tg-stat-card-value[b-oiznzg643k] {
font-size: 20px;
}
.tg-stat-card-label[b-oiznzg643k] {
font-size: 10.5px;
}
/* Sections */
.tg-section[b-oiznzg643k] {
padding: 14px;
border-radius: 11px;
}
.tg-section-title[b-oiznzg643k] {
font-size: 13.5px;
}
/* Action cards */
.tg-action-card[b-oiznzg643k] {
padding: 12px;
gap: 10px;
}
.tg-action-icon[b-oiznzg643k] {
width: 38px;
height: 38px;
font-size: 16px;
}
.tg-action-title[b-oiznzg643k] {
font-size: 13px;
}
.tg-action-desc[b-oiznzg643k] {
font-size: 11px;
}
/* Filters */
.tg-filters-card[b-oiznzg643k] {
padding: 14px;
}
.tg-input[b-oiznzg643k],
.tg-select[b-oiznzg643k],
.tg-textarea[b-oiznzg643k] {
padding: 10px 12px;
font-size: 13.5px;
}
/* Botones */
.tg-btn[b-oiznzg643k] {
padding: 11px 16px;
font-size: 13px;
gap: 7px;
}
.tg-btn-lg[b-oiznzg643k] {
padding: 13px 18px;
font-size: 14px;
}
/* Items */
.tg-item[b-oiznzg643k] {
padding: 11px 12px;
gap: 10px;
}
.tg-item-name[b-oiznzg643k] {
font-size: 12.5px;
}
/* Hero */
.tg-hero-card[b-oiznzg643k] {
padding: 18px;
border-radius: 14px;
}
.tg-hero-icon[b-oiznzg643k] {
width: 50px;
height: 50px;
font-size: 22px;
border-radius: 14px;
}
.tg-hero-title[b-oiznzg643k] {
font-size: 16.5px;
}
.tg-hero-desc[b-oiznzg643k] {
font-size: 12.5px;
}
/* Solicitud cards */
.tg-solicitud-card[b-oiznzg643k] {
padding: 12px;
gap: 10px;
}
.tg-solicitud-icon[b-oiznzg643k] {
width: 40px;
height: 40px;
font-size: 18px;
border-radius: 10px;
}
.tg-solicitud-title[b-oiznzg643k] {
font-size: 12.5px;
}
/* Badges */
.tg-badge[b-oiznzg643k] {
font-size: 9.5px;
padding: 3px 9px;
}
/* Modales full height en muy chico */
.tg-modal[b-oiznzg643k] {
max-height: 95vh;
border-radius: 20px 20px 0 0;
}
.tg-modal-header[b-oiznzg643k] {
padding: 22px 16px 16px;
border-radius: 20px 20px 0 0;
}
.tg-modal-title[b-oiznzg643k] {
font-size: 14.5px;
gap: 8px;
}
.tg-modal-title i[b-oiznzg643k] {
width: 28px;
height: 28px;
font-size: 14px;
}
.tg-modal-close[b-oiznzg643k] {
width: 32px;
height: 32px;
font-size: 18px;
}
.tg-modal-body[b-oiznzg643k] {
padding: 16px 14px;
gap: 12px;
}
.tg-modal-footer[b-oiznzg643k] {
padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}
/* Detail */
.tg-detail-grid[b-oiznzg643k] {
padding: 14px;
gap: 12px;
}
.tg-detail-label[b-oiznzg643k] {
font-size: 9.5px;
}
.tg-detail-value[b-oiznzg643k] {
font-size: 12.5px;
}
.tg-detail-monto[b-oiznzg643k] {
font-size: 18px;
}
}
/* ===== M04. MOBILE LANDSCAPE (por si giran el celular) ===== */
@media (max-width: 900px) and (orientation: landscape) {
.tg-modal[b-oiznzg643k] {
max-height: 96vh;
}
.tg-modal-body[b-oiznzg643k] {
padding: 16px 20px;
}
.tg-stats-grid[b-oiznzg643k] {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.tg-stat-card[b-oiznzg643k] {
padding: 12px;
gap: 10px;
}
.tg-stat-card-icon[b-oiznzg643k] {
width: 38px;
height: 38px;
font-size: 18px;
}
.tg-stat-card-value[b-oiznzg643k] {
font-size: 20px;
}
.tg-header[b-oiznzg643k] {
flex-direction: row;
align-items: center;
padding: 14px 20px;
}
.tg-header-right[b-oiznzg643k] {
width: auto;
margin-left: auto;
}
.tg-quick-actions[b-oiznzg643k] {
grid-template-columns: repeat(2, 1fr);
}
.tg-solicitudes-list[b-oiznzg643k] {
grid-template-columns: repeat(2, 1fr);
}
}
/* ===== M05. PANTALLAS RETINA (alta densidad) ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.tg-header-icon[b-oiznzg643k],
.tg-hero-icon[b-oiznzg643k],
.tg-stat-card-icon[b-oiznzg643k],
.tg-action-icon[b-oiznzg643k],
.tg-solicitud-icon[b-oiznzg643k] {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.tg-shadow-blue[b-oiznzg643k],
.tg-shadow-blue-strong[b-oiznzg643k] {
filter: drop-shadow(0 4px 12px rgba(21, 101, 192, 0.2));
}
}
/* ===== M06. DISPOSITIVOS TΓCTILES (sin hover real) ===== */
@media (hover: none) and (pointer: coarse) {
/* Desactivar efectos de hover que no se ven en tΓ‘ctil */
.tg-btn-icon:hover[b-oiznzg643k] {
transform: none;
background: rgba(255, 255, 255, 0.12);
}
.tg-btn-primary:hover:not(:disabled)[b-oiznzg643k],
.tg-btn-success:hover:not(:disabled)[b-oiznzg643k],
.tg-btn-danger:hover:not(:disabled)[b-oiznzg643k] {
transform: none;
}
.tg-stat-card:hover[b-oiznzg643k] {
transform: none;
}
.tg-item:hover[b-oiznzg643k] {
transform: none;
background: transparent;
}
.tg-action-card:hover[b-oiznzg643k] {
transform: none;
}
.tg-solicitud-card:hover[b-oiznzg643k] {
transform: none;
}
.tg-mini-item:hover[b-oiznzg643k] {
transform: none;
}
/* Active states para tactil */
.tg-btn:active:not(:disabled)[b-oiznzg643k] {
transform: scale(0.97);
opacity: 0.9;
}
.tg-action-card:active[b-oiznzg643k] {
transform: scale(0.98);
background: var(--tg-primary-soft);
}
.tg-solicitud-card:active[b-oiznzg643k] {
transform: scale(0.98);
}
.tg-item:active[b-oiznzg643k] {
background: #F1F5F9;
}
.tg-stat-card:active[b-oiznzg643k] {
transform: scale(0.98);
}
.tg-tab:active[b-oiznzg643k] {
background: rgba(21, 101, 192, 0.1);
}
/* Botones mΓ‘s grandes para tΓ‘ctil */
.tg-btn-icon-sm[b-oiznzg643k] {
min-width: 40px;
min-height: 40px;
}
.tg-item-check[b-oiznzg643k] {
min-width: 28px;
}
/* Sin animaciones de shine en tΓ‘ctil (ahorra baterΓa) */
.tg-progress-bar[b-oiznzg643k]::after {
animation: none;
}
.tg-tab-badge[b-oiznzg643k] {
animation: none;
}
}
/* ===== M07. SAFE AREA (iPhone con notch) ===== */
@supports (padding: max(0px)) {
@media (max-width: 768px) {
.tg-page[b-oiznzg643k] {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.tg-modal-footer[b-oiznzg643k] {
padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
}
.tg-actions-bar[b-oiznzg643k] {
padding-bottom: max(14px, calc(14px + env(safe-area-inset-bottom)));
}
}
}
/* ===== M08. MODO OSCURO AUTOMΓTICO (opcional) ===== */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
.tg-page[b-oiznzg643k] {
--tg-bg: #0F1729;
--tg-bg-alt: #1A2236;
--tg-card: #1A2236;
--tg-border: #2D3A52;
--tg-border-soft: #243149;
--tg-text: #F1F5F9;
--tg-text-soft: #94A3B8;
--tg-text-muted: #64748B;
--tg-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
--tg-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
--tg-shadow-md: 0 10px 26px rgba(0, 0, 0, 0.5);
--tg-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
}
.tg-modal-body[b-oiznzg643k] {
background: linear-gradient(180deg, #1A2236 0%, #141D2E 100%);
}
.tg-modal-footer[b-oiznzg643k] {
background: linear-gradient(135deg, #141D2E 0%, #0F1729 100%);
}
.tg-input[b-oiznzg643k],
.tg-select[b-oiznzg643k],
.tg-textarea[b-oiznzg643k] {
background: #0F1729;
color: #F1F5F9;
}
.tg-input[b-oiznzg643k]::placeholder,
.tg-textarea[b-oiznzg643k]::placeholder {
color: #64748B;
}
.tg-preview-bubble[b-oiznzg643k] {
background: linear-gradient(135deg, #0F1729 0%, #1A2236 100%);
border-color: #2D3A52;
}
.tg-detail-grid[b-oiznzg643k] {
background: #0F1729;
}
}
/* ===== M09. IMPRESIΓN ===== */
@media print {
.tg-header[b-oiznzg643k],
.tg-tabs[b-oiznzg643k],
.tg-actions-bar[b-oiznzg643k],
.tg-btn-icon[b-oiznzg643k],
.tg-btn[b-oiznzg643k],
.tg-modal-overlay[b-oiznzg643k] {
display: none !important;
}
.tg-page[b-oiznzg643k] {
background: #FFFFFF;
padding: 0;
}
.tg-solicitud-card[b-oiznzg643k] {
break-inside: avoid;
box-shadow: none;
border: 1px solid #E5E9F0;
}
}
/* ===== ALARMA ===== */
.tg-alarma-overlay[b-oiznzg643k] {
position: fixed;
inset: 0;
background: radial-gradient(circle at center, rgba(239, 68, 68, 0.4) 0%, rgba(15, 23, 41, 0.85) 100%);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
padding: 24px;
animation: tg-alarma-pulse-b-oiznzg643k 1.2s ease-in-out infinite alternate;
}
@keyframes tg-alarma-pulse-b-oiznzg643k {
from {
background: radial-gradient(circle at center, rgba(239, 68, 68, 0.35) 0%, rgba(15, 23, 41, 0.85) 100%);
}
to {
background: radial-gradient(circle at center, rgba(239, 68, 68, 0.55) 0%, rgba(15, 23, 41, 0.9) 100%);
}
}
.tg-alarma-modal[b-oiznzg643k] {
background: #FFFFFF;
border-radius: 24px;
padding: 40px 32px;
text-align: center;
max-width: 420px;
width: 100%;
box-shadow: 0 32px 80px rgba(239, 68, 68, 0.5);
animation: tg-alarma-shake-b-oiznzg643k 0.6s ease-in-out infinite;
}
@keyframes tg-alarma-shake-b-oiznzg643k {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-6px) rotate(-1deg);
}
75% {
transform: translateX(6px) rotate(1deg);
}
}
.tg-alarma-icon[b-oiznzg643k] {
width: 90px;
height: 90px;
border-radius: 50%;
background: linear-gradient(135deg, #EF4444, #F87171);
color: #FFFFFF;
font-size: 42px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 12px 32px rgba(239, 68, 68, 0.5);
animation: tg-alarma-bell-b-oiznzg643k 0.5s ease-in-out infinite alternate;
}
@keyframes tg-alarma-bell-b-oiznzg643k {
from {
transform: rotate(-15deg);
}
to {
transform: rotate(15deg);
}
}
.tg-alarma-title[b-oiznzg643k] {
font-size: 24px;
font-weight: 800;
color: #1A2236;
margin: 0 0 10px;
letter-spacing: -0.5px;
}
.tg-alarma-desc[b-oiznzg643k] {
font-size: 15px;
color: #64748B;
margin: 0 0 28px;
line-height: 1.5;
}
.tg-alarma-desc b[b-oiznzg643k] {
color: #EF4444;
font-weight: 800;
font-size: 18px;
}
.tg-alarma-actions[b-oiznzg643k] {
display: flex;
flex-direction: column;
gap: 10px;
}
.tg-alarma-actions .tg-btn[b-oiznzg643k] {
width: 100%;
padding: 14px 20px;
font-size: 14px;
}
/* /Pages/Configuracion/Configuracion_Usuarios.razor.rz.scp.css */
/* ========================================
GRENLES CONFIGURACION USUARIOS - VERSIΓN FINAL
Basado en la estructura y colorimetrΓa de Paqueteria.razor.css
======================================== */
/* ========================================
1. RESET Y TIPOGRAFΓA GLOBAL
======================================== */
.config-container[b-qk2qrd7ykf] {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 0;
animation: fadeInPage-b-qk2qrd7ykf 0.4s ease;
}
@keyframes fadeInPage-b-qk2qrd7ykf {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
2. HEADER
======================================== */
.config-header[b-qk2qrd7ykf] {
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
border-radius: 16px;
padding: 24px 28px;
box-shadow: 0 4px 20px rgba(26, 58, 107, 0.08);
margin-bottom: 24px;
border: 1px solid rgba(37, 99, 235, 0.06);
transition: all 0.3s ease;
flex-wrap: wrap;
gap: 16px;
}
.config-header:hover[b-qk2qrd7ykf] {
box-shadow: 0 6px 30px rgba(26, 58, 107, 0.12);
}
.header-info h1[b-qk2qrd7ykf] {
margin: 0;
font-weight: 700;
color: #1f2937;
font-size: 1.5rem;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 12px;
}
.header-info h1 i[b-qk2qrd7ykf] {
color: #2563eb;
font-size: 1.6rem;
background: rgba(37, 99, 235, 0.1);
padding: 10px;
border-radius: 12px;
transition: all 0.3s ease;
}
.header-info h1 i:hover[b-qk2qrd7ykf] {
background: rgba(37, 99, 235, 0.18);
transform: scale(1.05) rotate(-5deg);
}
.header-info .subtitle[b-qk2qrd7ykf] {
margin: 4px 0 0 0;
color: #6b7280;
font-size: 0.9rem;
font-weight: 500;
}
.header-actions[b-qk2qrd7ykf] {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
/* ========================================
3. BOTONES HEADER
======================================== */
.btn-primary[b-qk2qrd7ykf] {
padding: 10px 22px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #ffffff;
background: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.btn-primary:hover[b-qk2qrd7ykf] {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}
.btn-primary:disabled[b-qk2qrd7ykf] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-outline[b-qk2qrd7ykf] {
padding: 10px 22px;
border: 2px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
color: #1f2937;
background: transparent;
}
.btn-outline:hover[b-qk2qrd7ykf] {
background: #f1f5f9;
border-color: #2563eb;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.btn-secondary[b-qk2qrd7ykf] {
padding: 10px 24px;
border: 2px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #f1f5f9;
color: #1f2937;
display: flex;
align-items: center;
gap: 8px;
}
.btn-secondary:hover:not(:disabled)[b-qk2qrd7ykf] {
background: #e2e8f0;
transform: translateY(-2px);
}
.btn-secondary:disabled[b-qk2qrd7ykf] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-danger[b-qk2qrd7ykf] {
padding: 10px 24px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #ef4444;
color: white;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
display: flex;
align-items: center;
gap: 8px;
}
.btn-danger:hover:not(:disabled)[b-qk2qrd7ykf] {
background: #dc2626;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}
.btn-danger:disabled[b-qk2qrd7ykf] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-link[b-qk2qrd7ykf] {
background: transparent;
border: none;
color: #2563eb;
font-weight: 600;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.3s ease;
padding: 4px 8px;
border-radius: 6px;
}
.btn-link:hover[b-qk2qrd7ykf] {
background: rgba(37, 99, 235, 0.08);
color: #1d4ed8;
}
/* ========================================
4. ESTADΓSTICAS
======================================== */
.stats-row[b-qk2qrd7ykf] {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.stat-card[b-qk2qrd7ykf] {
background: #ffffff;
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 4px 20px rgba(26, 58, 107, 0.06);
border: 1px solid rgba(37, 99, 235, 0.06);
display: flex;
align-items: center;
gap: 16px;
transition: all 0.3s ease;
}
.stat-card:hover[b-qk2qrd7ykf] {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(26, 58, 107, 0.1);
border-color: rgba(37, 99, 235, 0.12);
}
.stat-icon[b-qk2qrd7ykf] {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.stat-icon.total[b-qk2qrd7ykf] {
background: rgba(37, 99, 235, 0.1);
color: #2563eb;
}
.stat-icon.active[b-qk2qrd7ykf] {
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
}
.stat-icon.inactive[b-qk2qrd7ykf] {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.stat-icon.pending[b-qk2qrd7ykf] {
background: rgba(245, 158, 11, 0.1);
color: #f59e0b;
}
.stat-icon.admin[b-qk2qrd7ykf] {
background: rgba(139, 92, 246, 0.1);
color: #8b5cf6;
}
.stat-info[b-qk2qrd7ykf] {
display: flex;
flex-direction: column;
}
.stat-value[b-qk2qrd7ykf] {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
line-height: 1.2;
}
.stat-label[b-qk2qrd7ykf] {
font-size: 0.75rem;
color: #6b7280;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ========================================
5. TOOLBAR
======================================== */
.toolbar[b-qk2qrd7ykf] {
background: #ffffff;
border-radius: 14px;
padding: 18px 24px;
box-shadow: 0 4px 20px rgba(26, 58, 107, 0.06);
margin-bottom: 24px;
border: 1px solid rgba(37, 99, 235, 0.06);
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
transition: all 0.3s ease;
}
.toolbar:hover[b-qk2qrd7ykf] {
box-shadow: 0 6px 30px rgba(26, 58, 107, 0.1);
}
.search-box[b-qk2qrd7ykf] {
position: relative;
flex: 1;
min-width: 200px;
}
.search-box i[b-qk2qrd7ykf] {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 0.85rem;
transition: color 0.3s ease;
}
.search-box input[b-qk2qrd7ykf] {
width: 100%;
padding: 10px 16px 10px 40px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.85rem;
background: white;
transition: all 0.3s ease;
color: #1f2937;
font-weight: 500;
}
.search-box input:focus[b-qk2qrd7ykf] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}
.search-box input:focus + i[b-qk2qrd7ykf] {
color: #2563eb;
}
.search-box input[b-qk2qrd7ykf]::placeholder {
color: #a0aec0;
font-weight: 400;
}
.filter-group[b-qk2qrd7ykf] {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.filter-select[b-qk2qrd7ykf] {
padding: 10px 32px 10px 14px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.85rem;
background: white;
color: #1f2937;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
min-width: 140px;
}
.filter-select:focus[b-qk2qrd7ykf] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}
.filter-select:hover[b-qk2qrd7ykf] {
border-color: #2563eb;
}
.btn-icon-text[b-qk2qrd7ykf] {
padding: 10px 18px;
border: 2px solid #e2e8f0;
border-radius: 10px;
background: white;
cursor: pointer;
font-weight: 600;
font-size: 0.85rem;
color: #1f2937;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.btn-icon-text:hover[b-qk2qrd7ykf] {
background: #f1f5f9;
border-color: #2563eb;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.btn-icon-text i[b-qk2qrd7ykf] {
color: #2563eb;
}
/* ========================================
6. TABLA
======================================== */
.table-container[b-qk2qrd7ykf] {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(26, 58, 107, 0.06);
overflow: hidden;
border: 1px solid rgba(37, 99, 235, 0.06);
transition: all 0.3s ease;
}
.table-container:hover[b-qk2qrd7ykf] {
box-shadow: 0 6px 30px rgba(26, 58, 107, 0.1);
}
.config-table[b-qk2qrd7ykf] {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.config-table thead[b-qk2qrd7ykf] {
background: #f8fafc;
}
.config-table th[b-qk2qrd7ykf] {
padding: 14px 16px;
text-align: left;
font-weight: 700;
color: #1f2937;
border-bottom: 2px solid #e2e8f0;
white-space: nowrap;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.config-table td[b-qk2qrd7ykf] {
padding: 12px 16px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
color: #1f2937;
}
.config-table tbody tr[b-qk2qrd7ykf] {
transition: all 0.2s ease;
}
.config-table tbody tr:hover[b-qk2qrd7ykf] {
background: #f8fafc;
}
.config-table tbody tr:last-child td[b-qk2qrd7ykf] {
border-bottom: none;
}
.config-table tbody tr.row-inactive[b-qk2qrd7ykf] {
opacity: 0.7;
background: #fafafa;
}
.config-table tbody tr.row-pending[b-qk2qrd7ykf] {
background: #fffbeb;
}
/* ========================================
7. USER CELL
======================================== */
.user-cell[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 12px;
}
.avatar[b-qk2qrd7ykf] {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 0.9rem;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.avatar:hover[b-qk2qrd7ykf] {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.avatar-lg[b-qk2qrd7ykf] {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.2rem;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.user-name[b-qk2qrd7ykf] {
font-weight: 600;
color: #1f2937;
display: block;
}
.user-cell small[b-qk2qrd7ykf] {
font-size: 0.75rem;
color: #6b7280;
display: block;
}
/* ========================================
8. BADGES
======================================== */
.badge[b-qk2qrd7ykf] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.badge:hover[b-qk2qrd7ykf] {
transform: scale(1.05) translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.badge.administrador[b-qk2qrd7ykf],
.badge.Administrador[b-qk2qrd7ykf] {
background: #8b5cf6;
color: white;
}
.badge.supervisor[b-qk2qrd7ykf],
.badge.Supervisor[b-qk2qrd7ykf] {
background: #3b82f6;
color: white;
}
.badge.gerente[b-qk2qrd7ykf],
.badge.Gerente[b-qk2qrd7ykf] {
background: #f59e0b;
color: white;
}
.badge.director[b-qk2qrd7ykf],
.badge.Director[b-qk2qrd7ykf] {
background: #1e3a5f;
color: white;
}
.badge.administrativo[b-qk2qrd7ykf],
.badge.Administrativo[b-qk2qrd7ykf] {
background: #10b981;
color: white;
}
.badge.operario[b-qk2qrd7ykf],
.badge.Operario[b-qk2qrd7ykf] {
background: #64748b;
color: white;
}
.badge.telefonista[b-qk2qrd7ykf],
.badge.Telefonista[b-qk2qrd7ykf] {
background: #ec4899;
color: white;
}
/* Estados */
.badge.Activo[b-qk2qrd7ykf] {
background: #22c55e;
color: white;
}
.badge.Inactivo[b-qk2qrd7ykf] {
background: #ef4444;
color: white;
animation: pulse-inactivo-b-qk2qrd7ykf 2s ease-in-out infinite;
}
.badge.Pendiente[b-qk2qrd7ykf] {
background: #f59e0b;
color: white;
animation: pulse-pendiente-b-qk2qrd7ykf 1.5s ease-in-out infinite;
}
@keyframes pulse-inactivo-b-qk2qrd7ykf {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.03);
box-shadow: 0 0 30px rgba(239, 68, 68, 0.2);
}
}
@keyframes pulse-pendiente-b-qk2qrd7ykf {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.cargo-badge[b-qk2qrd7ykf] {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
color: #1f2937;
background: #f1f5f9;
border: 1px solid #e2e8f0;
}
/* ========================================
9. MΓDULOS Y PERMISOS
======================================== */
.modulos-chips[b-qk2qrd7ykf] {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.chip[b-qk2qrd7ykf] {
padding: 3px 10px;
border-radius: 12px;
font-size: 0.65rem;
font-weight: 600;
background: #eff6ff;
color: #2563eb;
border: 1px solid rgba(37, 99, 235, 0.15);
white-space: nowrap;
}
.chip-more[b-qk2qrd7ykf] {
padding: 3px 10px;
border-radius: 12px;
font-size: 0.65rem;
font-weight: 600;
background: #f1f5f9;
color: #6b7280;
border: 1px solid #e2e8f0;
white-space: nowrap;
}
.permiso-indicator[b-qk2qrd7ykf] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 12px;
}
.permiso-si[b-qk2qrd7ykf] {
color: #22c55e;
background: rgba(34, 197, 94, 0.08);
}
.permiso-no[b-qk2qrd7ykf] {
color: #ef4444;
background: rgba(239, 68, 68, 0.08);
}
/* ========================================
10. ACCIONES EN TABLA
======================================== */
.actions-cell[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 4px;
position: relative;
}
.btn-icon[b-qk2qrd7ykf] {
width: 34px;
height: 34px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: #64748b;
background: transparent;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.btn-icon:hover[b-qk2qrd7ykf] {
background: #f1f5f9;
transform: scale(1.1) translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
color: #2563eb;
}
.btn-icon i[b-qk2qrd7ykf] {
font-size: 0.85rem;
}
/* ========================================
11. DROPDOWN - CORREGIDO (SOLO CLIC)
======================================== */
.dropdown[b-qk2qrd7ykf] {
position: relative;
display: inline-block;
}
.dropdown-menu[b-qk2qrd7ykf] {
position: absolute;
right: 0;
bottom: 100%; /* Cambiado de top: 110% a bottom: 100% */
margin-bottom: 8px; /* Espacio hacia arriba */
background: white;
border-radius: 12px;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15); /* Sombra hacia arriba */
border: 1px solid #e2e8f0;
min-width: 220px;
padding: 8px 0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
/* β οΈ ELIMINADO dropdown:hover - Solo se abre con clic */
.dropdown:focus-within .dropdown-menu[b-qk2qrd7ykf] {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: all;
}
/* Mantener abierto al pasar el mouse sobre el menΓΊ */
.dropdown-menu:hover[b-qk2qrd7ykf] {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: all !important;
}
/* BotΓ³n de 3 puntos focusable */
.dropdown .btn-icon[b-qk2qrd7ykf] {
outline: none;
}
.dropdown .btn-icon:focus[b-qk2qrd7ykf] {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.dropdown-menu button[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 20px;
border: none;
background: transparent;
cursor: pointer;
font-size: 0.85rem;
color: #1f2937;
transition: all 0.2s ease;
text-align: left;
font-weight: 500;
border-left: 3px solid transparent;
}
.dropdown-menu button:not(:last-child)[b-qk2qrd7ykf] {
border-bottom: 1px solid #f1f5f9;
}
.dropdown-menu button:hover[b-qk2qrd7ykf] {
background: #f8fafc;
}
/* Colores de iconos en dropdown */
.dropdown-menu button .fa-lock[b-qk2qrd7ykf] {
color: #f59e0b !important;
}
.dropdown-menu button:has(.fa-lock):hover[b-qk2qrd7ykf] {
background: #fffbeb;
border-left-color: #f59e0b;
}
.dropdown-menu button .fa-user-slash[b-qk2qrd7ykf] {
color: #ef4444 !important;
}
.dropdown-menu button:has(.fa-user-slash):hover[b-qk2qrd7ykf] {
background: #fef2f2;
border-left-color: #ef4444;
}
.dropdown-menu button .fa-user-check[b-qk2qrd7ykf] {
color: #22c55e !important;
}
.dropdown-menu button:has(.fa-user-check):hover[b-qk2qrd7ykf] {
background: #f0fdf4;
border-left-color: #22c55e;
}
.dropdown-menu button .fa-trash[b-qk2qrd7ykf] {
color: #dc2626 !important;
}
.dropdown-menu button:has(.fa-trash):hover[b-qk2qrd7ykf] {
background: #fef2f2;
border-left-color: #dc2626;
}
/* ========================================
12. PAGINACIΓN
======================================== */
.pagination[b-qk2qrd7ykf] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 24px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
flex-wrap: wrap;
gap: 12px;
border-radius: 0 0 16px 16px;
}
.pagination-info[b-qk2qrd7ykf] {
color: #6b7280;
font-size: 0.85rem;
font-weight: 500;
}
.pagination-controls[b-qk2qrd7ykf] {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.btn-page[b-qk2qrd7ykf] {
padding: 6px 14px;
border: 2px solid #e2e8f0;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.85rem;
font-weight: 600;
color: #1f2937;
}
.btn-page:hover:not(:disabled):not(.active)[b-qk2qrd7ykf] {
background: #f1f5f9;
border-color: #2563eb;
transform: translateY(-2px);
}
.btn-page.active[b-qk2qrd7ykf] {
background: #2563eb;
color: white;
border-color: transparent;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.btn-page:disabled[b-qk2qrd7ykf] {
opacity: 0.4;
cursor: not-allowed;
}
.pagination-per-page[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: #6b7280;
}
.pagination-per-page select[b-qk2qrd7ykf] {
padding: 6px 12px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 0.85rem;
background: white;
cursor: pointer;
font-weight: 500;
color: #1f2937;
transition: all 0.3s ease;
}
.pagination-per-page select:focus[b-qk2qrd7ykf] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}
/* ========================================
13. MODALES - BASE
======================================== */
.modal-overlay[b-qk2qrd7ykf] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: fadeInModal-b-qk2qrd7ykf 0.3s ease;
padding: 40px 20px;
overflow-y: auto;
}
@keyframes fadeInModal-b-qk2qrd7ykf {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(12px);
}
}
.modal-container[b-qk2qrd7ykf] {
background: #ffffff;
border-radius: 20px;
max-width: 620px;
width: 95%;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
animation: slideUpModal-b-qk2qrd7ykf 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
margin: auto;
align-self: center;
border: 1px solid rgba(255, 255, 255, 0.1);
max-height: 95vh;
overflow-y: auto;
}
.modal-container.modal-sm[b-qk2qrd7ykf] {
max-width: 480px;
}
.modal-container.modal-xl[b-qk2qrd7ykf] {
max-width: 900px;
}
@keyframes slideUpModal-b-qk2qrd7ykf {
from {
transform: translateY(60px) scale(0.95);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.modal-header[b-qk2qrd7ykf] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 28px;
border-bottom: 2px solid #f1f5f9;
background: #f8fafc;
border-radius: 20px 20px 0 0;
}
.modal-header.danger[b-qk2qrd7ykf] {
background: #fef2f2;
border-bottom-color: #fecaca;
}
.modal-header.danger h2[b-qk2qrd7ykf] {
color: #dc2626;
}
.modal-header h2[b-qk2qrd7ykf] {
margin: 0;
color: #1f2937;
font-weight: 700;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 12px;
}
.modal-header h2 i[b-qk2qrd7ykf] {
color: #2563eb;
}
.modal-header.danger h2 i[b-qk2qrd7ykf] {
color: #dc2626;
}
.modal-close[b-qk2qrd7ykf] {
background: #f1f5f9;
border: none;
font-size: 1.3rem;
color: #6b7280;
cursor: pointer;
padding: 4px 14px;
border-radius: 10px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.4;
}
.modal-close:hover[b-qk2qrd7ykf] {
background: #fee2e2;
color: #ef4444;
transform: rotate(90deg);
}
.modal-body[b-qk2qrd7ykf] {
padding: 24px 28px;
}
.modal-footer[b-qk2qrd7ykf] {
display: flex;
gap: 12px;
padding: 16px 28px 24px;
border-top: 2px solid #f1f5f9;
justify-content: flex-end;
flex-wrap: wrap;
}
.modal-description[b-qk2qrd7ykf] {
color: #6b7280;
font-size: 0.9rem;
margin-bottom: 18px;
}
/* ========================================
14. FORMULARIOS
======================================== */
.form-grid[b-qk2qrd7ykf] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-group[b-qk2qrd7ykf] {
display: flex;
flex-direction: column;
gap: 4px;
}
.form-group label[b-qk2qrd7ykf] {
font-size: 0.8rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.form-group label i[b-qk2qrd7ykf] {
margin-right: 6px;
color: #2563eb;
}
.form-group input[b-qk2qrd7ykf],
.form-group select[b-qk2qrd7ykf] {
padding: 10px 14px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.9rem;
background: white;
transition: all 0.3s ease;
color: #1f2937;
width: 100%;
box-sizing: border-box;
}
.form-group input:focus[b-qk2qrd7ykf],
.form-group select:focus[b-qk2qrd7ykf] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}
.form-group input:disabled[b-qk2qrd7ykf],
.form-group select:disabled[b-qk2qrd7ykf] {
background: #f1f5f9;
cursor: not-allowed;
opacity: 0.7;
}
.form-group input[b-qk2qrd7ykf]::placeholder {
color: #a0aec0;
}
.form-group input[readonly][b-qk2qrd7ykf] {
background: #f8fafc;
cursor: default;
}
.password-field[b-qk2qrd7ykf] {
position: relative;
display: flex;
align-items: center;
}
.password-field input[b-qk2qrd7ykf] {
flex: 1;
padding-right: 48px;
}
.btn-toggle-password[b-qk2qrd7ykf] {
position: absolute;
right: 4px;
top: 4px;
bottom: 4px;
background: transparent;
border: none;
border-radius: 8px;
padding: 0 12px;
cursor: pointer;
color: #94a3b8;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.btn-toggle-password:hover[b-qk2qrd7ykf] {
color: #2563eb;
background: rgba(37, 99, 235, 0.06);
}
/* ========================================
15. PERMISOS - SECCIΓN
======================================== */
.permissions-section[b-qk2qrd7ykf] {
margin-top: 24px;
border-top: 2px solid #f1f5f9;
padding-top: 20px;
}
.permissions-header[b-qk2qrd7ykf] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
.permissions-header h3[b-qk2qrd7ykf] {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: #1f2937;
}
.permissions-header h3 i[b-qk2qrd7ykf] {
color: #2563eb;
margin-right: 8px;
}
.permissions-grid[b-qk2qrd7ykf] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.perm-module[b-qk2qrd7ykf] {
background: #f8fafc;
border-radius: 12px;
padding: 14px 16px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.perm-module:hover[b-qk2qrd7ykf] {
border-color: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.06);
}
.perm-module-header[b-qk2qrd7ykf] {
margin-bottom: 10px;
}
.checkbox-card[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-weight: 600;
font-size: 0.85rem;
color: #1f2937;
}
.checkbox-card input[type="checkbox"][b-qk2qrd7ykf] {
width: 18px;
height: 18px;
accent-color: #2563eb;
cursor: pointer;
flex-shrink: 0;
}
.checkbox-card span i[b-qk2qrd7ykf] {
margin-right: 6px;
color: #2563eb;
}
.perm-subitems[b-qk2qrd7ykf] {
display: flex;
flex-direction: column;
gap: 4px;
padding-left: 32px;
}
.perm-subitems label[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: #6b7280;
cursor: pointer;
font-weight: 500;
}
.perm-subitems label:hover[b-qk2qrd7ykf] {
color: #1f2937;
}
.perm-subitems input[type="checkbox"][b-qk2qrd7ykf] {
width: 16px;
height: 16px;
accent-color: #2563eb;
cursor: pointer;
flex-shrink: 0;
}
/* Permisos Especiales */
.special-permissions[b-qk2qrd7ykf] {
background: #f8fafc;
border-radius: 12px;
padding: 16px 20px;
border: 1px solid #e2e8f0;
}
.special-permissions h4[b-qk2qrd7ykf] {
margin: 0 0 12px 0;
font-size: 0.85rem;
font-weight: 700;
color: #1f2937;
}
.special-permissions h4 i[b-qk2qrd7ykf] {
color: #f59e0b;
margin-right: 8px;
}
.special-perms-grid[b-qk2qrd7ykf] {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.toggle-card[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-weight: 500;
font-size: 0.85rem;
color: #1f2937;
padding: 6px 12px;
border-radius: 8px;
transition: all 0.3s ease;
}
.toggle-card:hover[b-qk2qrd7ykf] {
background: rgba(37, 99, 235, 0.04);
}
.toggle-card input[type="checkbox"][b-qk2qrd7ykf] {
width: 18px;
height: 18px;
accent-color: #2563eb;
cursor: pointer;
flex-shrink: 0;
}
.toggle-card span i[b-qk2qrd7ykf] {
margin-right: 6px;
color: #6b7280;
}
/* ========================================
16. USER SUMMARY (MODAL PERMISOS)
======================================== */
.user-summary[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 20px;
padding: 16px 20px;
background: #f8fafc;
border-radius: 12px;
margin-bottom: 24px;
border: 1px solid #e2e8f0;
}
.user-summary h3[b-qk2qrd7ykf] {
margin: 0;
font-size: 1rem;
color: #1f2937;
}
.user-summary p[b-qk2qrd7ykf] {
margin: 4px 0 0 0;
color: #6b7280;
font-size: 0.85rem;
}
/* ========================================
17. MODAL - CONFIRMAR ELIMINAR
======================================== */
.text-center[b-qk2qrd7ykf] {
text-align: center;
}
.confirm-icon[b-qk2qrd7ykf] {
font-size: 3rem;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.confirm-icon.warning[b-qk2qrd7ykf] {
background: #fef3c7;
color: #f59e0b;
}
.confirm-icon.danger[b-qk2qrd7ykf] {
background: #fee2e2;
color: #ef4444;
}
.confirm-icon i[b-qk2qrd7ykf] {
font-size: 2.5rem;
}
.confirm-options[b-qk2qrd7ykf] {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
text-align: left;
}
.radio-card[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
background: white;
}
.radio-card:hover[b-qk2qrd7ykf] {
border-color: #94a3b8;
background: #f8fafc;
}
.radio-card.danger:hover[b-qk2qrd7ykf] {
border-color: #ef4444;
background: #fef2f2;
}
.radio-card input[type="radio"][b-qk2qrd7ykf] {
width: 18px;
height: 18px;
accent-color: #2563eb;
cursor: pointer;
flex-shrink: 0;
}
.radio-card span[b-qk2qrd7ykf] {
font-weight: 500;
font-size: 0.9rem;
color: #1f2937;
}
.radio-card span i[b-qk2qrd7ykf] {
margin-right: 8px;
}
.radio-card.danger span i[b-qk2qrd7ykf] {
color: #ef4444;
}
/* ========================================
18. EXPORT OPTIONS
======================================== */
.export-options[b-qk2qrd7ykf] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 18px;
}
.export-card[b-qk2qrd7ykf] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 20px 12px;
border: 2px solid #e2e8f0;
border-radius: 12px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
font-size: 0.8rem;
color: #1f2937;
}
.export-card:hover[b-qk2qrd7ykf] {
border-color: #2563eb;
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.export-card i[b-qk2qrd7ykf] {
font-size: 2rem;
}
/* ========================================
19. ALERTAS Y ERRORES
======================================== */
.alert-error[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
border-radius: 10px;
margin-bottom: 16px;
font-weight: 500;
font-size: 0.9rem;
}
.alert-error i[b-qk2qrd7ykf] {
color: #ef4444;
font-size: 1.1rem;
}
/* ========================================
20. PASSWORD STRENGTH
======================================== */
.password-strength[b-qk2qrd7ykf] {
margin-top: 8px;
}
.password-strength .strength-bar[b-qk2qrd7ykf] {
height: 4px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
margin-bottom: 4px;
}
.password-strength .strength-fill[b-qk2qrd7ykf] {
height: 100%;
border-radius: 4px;
transition: width 0.4s ease;
}
.password-strength span[b-qk2qrd7ykf] {
font-size: 0.75rem;
color: #6b7280;
font-weight: 500;
}
/* ========================================
21. SCROLLBAR
======================================== */
[b-qk2qrd7ykf]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
[b-qk2qrd7ykf]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
[b-qk2qrd7ykf]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
[b-qk2qrd7ykf]::-webkit-scrollbar-thumb:hover {
background: #2563eb;
}
/* ========================================
22. RESPONSIVE
======================================== */
@media (max-width: 1200px) {
.stats-row[b-qk2qrd7ykf] {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1024px) {
.permissions-grid[b-qk2qrd7ykf] {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.config-header[b-qk2qrd7ykf] {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.header-actions[b-qk2qrd7ykf] {
justify-content: stretch;
}
.header-actions .btn-primary[b-qk2qrd7ykf],
.header-actions .btn-outline[b-qk2qrd7ykf] {
flex: 1;
justify-content: center;
}
.stats-row[b-qk2qrd7ykf] {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.stat-card[b-qk2qrd7ykf] {
padding: 14px 16px;
}
.stat-value[b-qk2qrd7ykf] {
font-size: 1.2rem;
}
.toolbar[b-qk2qrd7ykf] {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.search-box[b-qk2qrd7ykf] {
min-width: unset;
}
.filter-group[b-qk2qrd7ykf] {
flex-wrap: wrap;
}
.filter-select[b-qk2qrd7ykf] {
flex: 1;
min-width: 120px;
}
.config-table[b-qk2qrd7ykf] {
font-size: 0.75rem;
}
.config-table th[b-qk2qrd7ykf],
.config-table td[b-qk2qrd7ykf] {
padding: 8px 10px;
}
.config-table th:nth-child(4)[b-qk2qrd7ykf],
.config-table td:nth-child(4)[b-qk2qrd7ykf],
.config-table th:nth-child(5)[b-qk2qrd7ykf],
.config-table td:nth-child(5)[b-qk2qrd7ykf],
.config-table th:nth-child(6)[b-qk2qrd7ykf],
.config-table td:nth-child(6)[b-qk2qrd7ykf],
.config-table th:nth-child(7)[b-qk2qrd7ykf],
.config-table td:nth-child(7)[b-qk2qrd7ykf],
.config-table th:nth-child(8)[b-qk2qrd7ykf],
.config-table td:nth-child(8)[b-qk2qrd7ykf] {
display: none;
}
.form-grid[b-qk2qrd7ykf] {
grid-template-columns: 1fr;
}
.modal-container[b-qk2qrd7ykf] {
width: 98%;
margin: 10px;
max-height: 98vh;
}
.modal-container.modal-xl[b-qk2qrd7ykf] {
max-width: 98%;
}
.modal-footer[b-qk2qrd7ykf] {
flex-direction: column;
align-items: stretch;
}
.modal-footer button[b-qk2qrd7ykf] {
justify-content: center;
}
.permissions-grid[b-qk2qrd7ykf] {
grid-template-columns: 1fr;
}
.special-perms-grid[b-qk2qrd7ykf] {
flex-direction: column;
gap: 8px;
}
.pagination[b-qk2qrd7ykf] {
flex-direction: column;
gap: 12px;
align-items: center;
}
.pagination-controls[b-qk2qrd7ykf] {
justify-content: center;
}
.export-options[b-qk2qrd7ykf] {
grid-template-columns: 1fr;
}
.user-summary[b-qk2qrd7ykf] {
flex-direction: column;
text-align: center;
}
.btn-icon-text span[b-qk2qrd7ykf] {
display: none;
}
.btn-icon-text i[b-qk2qrd7ykf] {
font-size: 1.1rem;
}
.header-info h1[b-qk2qrd7ykf] {
font-size: 1.2rem;
}
.header-info .subtitle[b-qk2qrd7ykf] {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.stats-row[b-qk2qrd7ykf] {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.stat-card[b-qk2qrd7ykf] {
padding: 12px 14px;
gap: 10px;
}
.stat-icon[b-qk2qrd7ykf] {
width: 36px;
height: 36px;
font-size: 1rem;
}
.stat-value[b-qk2qrd7ykf] {
font-size: 1rem;
}
.stat-label[b-qk2qrd7ykf] {
font-size: 0.6rem;
}
.config-table[b-qk2qrd7ykf] {
font-size: 0.7rem;
}
.config-table th[b-qk2qrd7ykf],
.config-table td[b-qk2qrd7ykf] {
padding: 6px 8px;
}
.config-table th:nth-child(9)[b-qk2qrd7ykf],
.config-table td:nth-child(9)[b-qk2qrd7ykf] {
display: none;
}
.btn-page[b-qk2qrd7ykf] {
padding: 4px 10px;
font-size: 0.75rem;
}
.avatar[b-qk2qrd7ykf] {
width: 32px;
height: 32px;
font-size: 0.7rem;
}
.modal-header[b-qk2qrd7ykf] {
padding: 16px 20px;
}
.modal-header h2[b-qk2qrd7ykf] {
font-size: 1rem;
}
.modal-body[b-qk2qrd7ykf] {
padding: 16px 20px;
}
.modal-footer[b-qk2qrd7ykf] {
padding: 12px 20px 18px;
}
.filter-select[b-qk2qrd7ykf] {
min-width: 100px;
font-size: 0.75rem;
padding: 8px 28px 8px 10px;
}
.search-box input[b-qk2qrd7ykf] {
font-size: 0.8rem;
padding: 8px 14px 8px 36px;
}
}
@media (max-height: 600px) {
.modal-overlay[b-qk2qrd7ykf] {
align-items: center;
padding: 10px;
}
.modal-container[b-qk2qrd7ykf] {
max-height: 95vh;
overflow-y: auto;
}
}
/* ========================================
23. MEJORAS SOLICITADAS
======================================== */
/* --- 23.1 Colores para botones de acciΓ³n --- */
.btn-icon[title="Editar"]:hover[b-qk2qrd7ykf] {
background: rgba(37, 99, 235, 0.1);
color: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.btn-icon[title="Permisos"]:hover[b-qk2qrd7ykf] {
background: rgba(139, 92, 246, 0.1);
color: #8b5cf6;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}
.btn-icon[title="MΓ‘s opciones"]:hover[b-qk2qrd7ykf] {
background: rgba(107, 114, 128, 0.1);
color: #374151;
box-shadow: 0 4px 12px rgba(107, 114, 128, 0.15);
}
/* --- 23.2 MΓ‘s color a la toolbar/header --- */
.config-header[b-qk2qrd7ykf] {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-left: 4px solid #2563eb;
}
.header-info h1 i[b-qk2qrd7ykf] {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #ffffff;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.header-info h1 i:hover[b-qk2qrd7ykf] {
background: linear-gradient(135deg, #1d4ed8, #1e40af);
}
/* --- 23.3 Estados en forma de burbujas con colores mejorados --- */
.badge.Estado-Activo[b-qk2qrd7ykf],
.badge.Activo[b-qk2qrd7ykf] {
background: #dcfce7;
color: #166534;
border: 1px solid #bbf7d0;
position: relative;
padding-left: 24px;
}
.badge.Estado-Activo[b-qk2qrd7ykf]::before,
.badge.Activo[b-qk2qrd7ykf]::before {
content: '';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
animation: pulse-dot-active-b-qk2qrd7ykf 2s ease-in-out infinite;
}
.badge.Estado-Inactivo[b-qk2qrd7ykf],
.badge.Inactivo[b-qk2qrd7ykf] {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
padding-left: 24px;
position: relative;
}
.badge.Estado-Inactivo[b-qk2qrd7ykf]::before,
.badge.Inactivo[b-qk2qrd7ykf]::before {
content: '';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}
.badge.Estado-Pendiente[b-qk2qrd7ykf],
.badge.Pendiente[b-qk2qrd7ykf] {
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
padding-left: 24px;
position: relative;
}
.badge.Estado-Pendiente[b-qk2qrd7ykf]::before,
.badge.Pendiente[b-qk2qrd7ykf]::before {
content: '';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #f59e0b;
box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
animation: pulse-dot-pending-b-qk2qrd7ykf 1.5s ease-in-out infinite;
}
@keyframes pulse-dot-active-b-qk2qrd7ykf {
0%, 100% {
box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
50% {
box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
}
}
@keyframes pulse-dot-pending-b-qk2qrd7ykf {
0%, 100% {
box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}
50% {
box-shadow: 0 0 14px rgba(245, 158, 11, 0.8);
}
}
/* --- 23.4 Barra de filtros con espacios y divisiones --- */
.filter-group[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 12px;
flex: 2;
flex-wrap: wrap;
}
.filter-select[b-qk2qrd7ykf] {
flex: 1;
padding: 10px 32px 10px 14px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.85rem;
background: white;
color: #1f2937;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
min-width: 140px;
background-color: white;
}
.filter-select:focus[b-qk2qrd7ykf] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
background-color: #f8fafc;
}
.filter-select:hover[b-qk2qrd7ykf] {
border-color: #2563eb;
background-color: #f8fafc;
}
@media (max-width: 768px) {
.filter-group[b-qk2qrd7ykf] {
flex-direction: column;
gap: 8px;
}
.filter-select[b-qk2qrd7ykf] {
min-width: 100%;
width: 100%;
}
}
/* --- 23.5 BotΓ³n de actualizar naranja --- */
.btn-icon-text[b-qk2qrd7ykf] {
background: #fff7ed;
border: 2px solid #fed7aa;
color: #c2410c;
font-weight: 700;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-icon-text i[b-qk2qrd7ykf] {
color: #f97316;
}
.btn-icon-text:hover[b-qk2qrd7ykf] {
background: #ffedd5;
border-color: #f97316;
color: #9a3412;
box-shadow: 0 4px 16px rgba(249, 115, 22, 0.25);
transform: translateY(-2px);
}
.btn-icon-text:hover i[b-qk2qrd7ykf] {
color: #ea580c;
animation: fa-spin 0.8s ease-in-out;
}
.btn-icon-text:active[b-qk2qrd7ykf] {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
}
/* --- 23.6 EstadΓsticas con mΓ‘s animaciones --- */
.stat-card[b-qk2qrd7ykf] {
position: relative;
overflow: hidden;
cursor: pointer;
}
.stat-card[b-qk2qrd7ykf]::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.6s ease;
}
.stat-card:hover[b-qk2qrd7ykf]::after {
left: 100%;
}
.stat-card .stat-icon[b-qk2qrd7ykf] {
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat-card:hover .stat-icon[b-qk2qrd7ykf] {
transform: scale(1.15) rotate(-10deg);
}
.stat-card .stat-value[b-qk2qrd7ykf] {
position: relative;
display: inline-block;
}
.stat-card:hover .stat-value[b-qk2qrd7ykf] {
animation: countBounce-b-qk2qrd7ykf 0.5s ease;
}
@keyframes countBounce-b-qk2qrd7ykf {
0%, 100% {
transform: scale(1);
}
30% {
transform: scale(1.2);
color: #2563eb;
}
60% {
transform: scale(0.95);
}
}
.stat-card .stat-icon.total[b-qk2qrd7ykf] {
animation: floatIcon-b-qk2qrd7ykf 3s ease-in-out infinite;
}
.stat-card .stat-icon.active[b-qk2qrd7ykf] {
animation: floatIcon-b-qk2qrd7ykf 3s ease-in-out 0.5s infinite;
}
.stat-card .stat-icon.inactive[b-qk2qrd7ykf] {
animation: floatIcon-b-qk2qrd7ykf 3s ease-in-out 1s infinite;
}
.stat-card .stat-icon.pending[b-qk2qrd7ykf] {
animation: floatIcon-b-qk2qrd7ykf 3s ease-in-out 1.5s infinite;
}
.stat-card .stat-icon.admin[b-qk2qrd7ykf] {
animation: floatIcon-b-qk2qrd7ykf 3s ease-in-out 2s infinite;
}
@keyframes floatIcon-b-qk2qrd7ykf {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
.stat-card:hover[b-qk2qrd7ykf] {
border-color: #2563eb;
}
.stat-card:hover .stat-label[b-qk2qrd7ykf] {
color: #2563eb;
font-weight: 700;
transition: all 0.3s ease;
}
/* --- 23.7 Ajuste para barra de bΓΊsqueda - evitar solapamiento --- */
.search-box[b-qk2qrd7ykf] {
position: relative;
flex: 1;
min-width: 200px;
margin-right: 16px; /* Espacio extra entre bΓΊsqueda y filtros */
}
.search-box input[b-qk2qrd7ykf] {
width: 100%;
padding: 10px 16px 10px 40px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.85rem;
background: white;
transition: all 0.3s ease;
color: #1f2937;
font-weight: 500;
box-sizing: border-box; /* Asegura que el padding no expanda el input */
}
/* En mΓ³viles, separaciΓ³n vertical */
@media (max-width: 768px) {
.search-box[b-qk2qrd7ykf] {
margin-right: 0;
margin-bottom: 8px;
min-width: 100%;
}
.search-box input[b-qk2qrd7ykf] {
width: 100%;
}
}
/* ========================================
24. COLORES PERMANENTES PARA ESTADO Y ACCIONES
======================================== */
/* --- 24.1 Estados siempre con color (burbujas con punto) --- */
/* Sobrescribe cualquier regla previa para forzar color permanente */
.badge.Activo[b-qk2qrd7ykf],
td .badge.Activo[b-qk2qrd7ykf] {
background: #dcfce7 !important;
color: #166534 !important;
border: 1px solid #bbf7d0 !important;
padding-left: 24px !important;
position: relative !important;
}
.badge.Activo[b-qk2qrd7ykf]::before {
content: '';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
animation: pulse-dot-active-b-qk2qrd7ykf 2s ease-in-out infinite;
}
.badge.Inactivo[b-qk2qrd7ykf],
td .badge.Inactivo[b-qk2qrd7ykf] {
background: #fee2e2 !important;
color: #991b1b !important;
border: 1px solid #fecaca !important;
padding-left: 24px !important;
position: relative !important;
}
.badge.Inactivo[b-qk2qrd7ykf]::before {
content: '';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}
.badge.Pendiente[b-qk2qrd7ykf],
td .badge.Pendiente[b-qk2qrd7ykf] {
background: #fef3c7 !important;
color: #92400e !important;
border: 1px solid #fde68a !important;
padding-left: 24px !important;
position: relative !important;
}
.badge.Pendiente[b-qk2qrd7ykf]::before {
content: '';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #f59e0b;
box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
animation: pulse-dot-pending-b-qk2qrd7ykf 1.5s ease-in-out infinite;
}
/* Animaciones para los puntos de estado */
@keyframes pulse-dot-active-b-qk2qrd7ykf {
0%, 100% {
box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
50% {
box-shadow: 0 0 14px rgba(34, 197, 94, 0.9);
}
}
@keyframes pulse-dot-pending-b-qk2qrd7ykf {
0%, 100% {
box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}
50% {
box-shadow: 0 0 16px rgba(245, 158, 11, 0.9);
}
}
/* --- 24.2 Botones de acciΓ³n SIEMPRE con color --- */
/* BotΓ³n Editar - Azul permanente */
.btn-icon[title="Editar"][b-qk2qrd7ykf] {
background: rgba(37, 99, 235, 0.08) !important;
color: #2563eb !important;
border: 1px solid rgba(37, 99, 235, 0.15) !important;
}
.btn-icon[title="Editar"]:hover[b-qk2qrd7ykf] {
background: #2563eb !important;
color: #ffffff !important;
border-color: #2563eb !important;
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important;
transform: scale(1.1) translateY(-2px);
}
/* BotΓ³n Permisos - PΓΊrpura permanente */
.btn-icon[title="Permisos"][b-qk2qrd7ykf] {
background: rgba(139, 92, 246, 0.08) !important;
color: #8b5cf6 !important;
border: 1px solid rgba(139, 92, 246, 0.15) !important;
}
.btn-icon[title="Permisos"]:hover[b-qk2qrd7ykf] {
background: #8b5cf6 !important;
color: #ffffff !important;
border-color: #8b5cf6 !important;
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35) !important;
transform: scale(1.1) translateY(-2px);
}
/* BotΓ³n MΓ‘s opciones - Gris oscuro permanente */
.btn-icon[title="MΓ‘s opciones"][b-qk2qrd7ykf] {
background: rgba(71, 85, 105, 0.08) !important;
color: #475569 !important;
border: 1px solid rgba(71, 85, 105, 0.15) !important;
}
.btn-icon[title="MΓ‘s opciones"]:hover[b-qk2qrd7ykf] {
background: #475569 !important;
color: #ffffff !important;
border-color: #475569 !important;
box-shadow: 0 4px 16px rgba(71, 85, 105, 0.35) !important;
transform: scale(1.1) translateY(-2px);
}
/* TransiciΓ³n suave para todos los botones de acciΓ³n */
.actions-cell .btn-icon[b-qk2qrd7ykf] {
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
width: 36px;
height: 36px;
border-radius: 10px;
font-size: 0.9rem;
}
/* Efecto de brillo sutil permanente en los botones de acciΓ³n */
.actions-cell .btn-icon[b-qk2qrd7ykf]::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
right: 2px;
height: 40%;
border-radius: 8px 8px 50% 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%);
pointer-events: none;
}
/* ========================================
25. DROPDOWN SOLO AL HACER CLIC - CORREGIDO
======================================== */
/* --- 25.1 Eliminar comportamiento hover, solo clic --- */
.dropdown[b-qk2qrd7ykf] {
position: relative;
display: inline-block;
}
/* Ocultar por defecto - SIN mostrar en hover */
.dropdown .dropdown-menu[b-qk2qrd7ykf] {
position: absolute;
right: 0;
bottom: 100%;
margin-bottom: 8px;
background: white;
border-radius: 12px;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
border: 1px solid #e2e8f0;
min-width: 220px;
padding: 8px 0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
/* ELIMINAMOS el hover - solo focus-within para clic */
/* .dropdown:hover .dropdown-menu { ... } <- ESTO SE ELIMINA */
/* Mostrar SOLO cuando tiene foco (clic en el botΓ³n) */
.dropdown:focus-within .dropdown-menu[b-qk2qrd7ykf] {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: all;
}
/* Mantener abierto mientras el mouse estΓ© sobre el menΓΊ abierto */
.dropdown-menu:hover[b-qk2qrd7ykf] {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: all !important;
}
/* El botΓ³n de 3 puntos debe ser "focusable" */
.dropdown .btn-icon[b-qk2qrd7ykf] {
outline: none;
}
.dropdown .btn-icon:focus[b-qk2qrd7ykf] {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* --- 25.2 Ajuste para que el dropdown no se cierre al quitar el mouse del botΓ³n --- */
/* Creamos un Γ‘rea invisible que mantiene la conexiΓ³n */
.dropdown[b-qk2qrd7ykf]::after {
content: '';
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 16px;
pointer-events: none;
}
/* --- 25.3 Botones del dropdown con colores permanentes --- */
.dropdown-menu button[b-qk2qrd7ykf] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 20px;
border: none;
background: transparent;
cursor: pointer;
font-size: 0.85rem;
color: #1f2937;
transition: all 0.2s ease;
text-align: left;
font-weight: 500;
position: relative;
border-left: 3px solid transparent;
}
/* Iconos con colores especΓficos siempre visibles */
.dropdown-menu button i[b-qk2qrd7ykf] {
width: 20px;
font-size: 0.9rem;
transition: all 0.2s ease;
}
/* Cambiar ContraseΓ±a - Naranja */
.dropdown-menu button .fa-lock[b-qk2qrd7ykf] {
color: #f59e0b !important;
}
.dropdown-menu button:has(.fa-lock):hover[b-qk2qrd7ykf] {
background: #fffbeb;
border-left-color: #f59e0b;
}
.dropdown-menu button:has(.fa-lock):hover i[b-qk2qrd7ykf] {
color: #d97706 !important;
}
/* Desactivar - Rojo anaranjado */
.dropdown-menu button .fa-user-slash[b-qk2qrd7ykf] {
color: #ef4444 !important;
}
.dropdown-menu button:has(.fa-user-slash):hover[b-qk2qrd7ykf] {
background: #fef2f2;
border-left-color: #ef4444;
}
.dropdown-menu button:has(.fa-user-slash):hover i[b-qk2qrd7ykf] {
color: #dc2626 !important;
}
/* Activar/Reactivar - Verde */
.dropdown-menu button .fa-user-check[b-qk2qrd7ykf] {
color: #22c55e !important;
}
.dropdown-menu button:has(.fa-user-check):hover[b-qk2qrd7ykf] {
background: #f0fdf4;
border-left-color: #22c55e;
}
.dropdown-menu button:has(.fa-user-check):hover i[b-qk2qrd7ykf] {
color: #16a34a !important;
}
/* Eliminar - Rojo intenso */
.dropdown-menu button .fa-trash[b-qk2qrd7ykf] {
color: #dc2626 !important;
}
.dropdown-menu button:has(.fa-trash):hover[b-qk2qrd7ykf] {
background: #fef2f2;
border-left-color: #dc2626;
}
.dropdown-menu button:has(.fa-trash):hover i[b-qk2qrd7ykf] {
color: #b91c1c !important;
}
/* Separador visual entre opciones */
.dropdown-menu button:not(:last-child)[b-qk2qrd7ykf] {
border-bottom: 1px solid #f1f5f9;
}
/* --- 25.4 Cerrar dropdown al hacer clic fuera (comportamiento nativo) --- */
/* Cuando se hace clic en una opciΓ³n, el dropdown se cierra automΓ‘ticamente
porque el foco se mueve al nuevo elemento */
/* --- 25.5 AnimaciΓ³n de entrada del dropdown --- */
@keyframes dropdownSlideUp-b-qk2qrd7ykf {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown:focus-within .dropdown-menu[b-qk2qrd7ykf] {
animation: dropdownSlideUp-b-qk2qrd7ykf 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* --- 25.6 Mejora del contenedor de la tabla para evitar recortes --- */
.table-container[b-qk2qrd7ykf] {
overflow: visible !important;
}
.config-table[b-qk2qrd7ykf] {
overflow: visible;
}
.config-table tbody tr[b-qk2qrd7ykf] {
position: relative;
}
/* Asegurar que el dropdown tenga prioridad sobre otros elementos */
.actions-cell[b-qk2qrd7ykf] {
position: relative;
z-index: 1;
}
.config-table tbody tr:focus-within .actions-cell[b-qk2qrd7ykf] {
z-index: 100;
}
/* Ajuste para que el dropdown no se corte en la ΓΊltima fila */
.config-table tbody tr:last-child .dropdown .dropdown-menu[b-qk2qrd7ykf],
.config-table tbody tr:nth-last-child(2) .dropdown .dropdown-menu[b-qk2qrd7ykf] {
bottom: 100%;
top: auto;
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
}
/* --- 25.7 Media query para mΓ³viles --- */
@media (max-width: 768px) {
.dropdown .dropdown-menu[b-qk2qrd7ykf] {
right: -10px;
min-width: 200px;
}
.dropdown-menu button[b-qk2qrd7ykf] {
padding: 14px 18px;
font-size: 0.9rem;
}
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* ============================================================
DASHBOARD - 3 COLUMNAS CON TODAS LAS ESTADΓSTICAS
COLORIMETRΓA AZUL PROFESIONAL
============================================================ */
.dashboard-container[b-ff3l37oupe] {
height: calc(100vh - 100px);
overflow: hidden;
padding: 16px 20px 30px;
background: #f0f4f8;
font-family: 'Segoe UI', system-ui, sans-serif;
}
/* ===== ESTRUCTURA DE 3 COLUMNAS ===== */
.dashboard-three-col[b-ff3l37oupe] {
display: grid;
grid-template-columns: 200px 1fr 340px;
gap: 16px;
height: 100%;
min-height: 0;
}
/* ===== CADA COLUMNA CON BORDE Y SOMBRA ===== */
.col-usuarios[b-ff3l37oupe],
.col-carrusel[b-ff3l37oupe],
.col-chat[b-ff3l37oupe] {
background: #ffffff;
border-radius: 16px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.3s ease;
}
.col-usuarios:hover[b-ff3l37oupe],
.col-carrusel:hover[b-ff3l37oupe],
.col-chat:hover[b-ff3l37oupe] {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}
/* ========== COLUMNA IZQUIERDA: USUARIOS ========== */
.usuarios-card[b-ff3l37oupe] {
display: flex;
flex-direction: column;
height: 100%;
}
.usuarios-header[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: linear-gradient(135deg, #f0f7ff, #e6f0ff);
border-bottom: 1px solid #dbeafe;
font-weight: 600;
color: #1e3a5f;
font-size: 14px;
flex-shrink: 0;
}
.usuarios-header i[b-ff3l37oupe] {
color: #2563eb;
font-size: 16px;
}
.usuarios-badge[b-ff3l37oupe] {
background: #2563eb;
color: white;
border-radius: 20px;
padding: 0 8px;
font-size: 12px;
font-weight: 700;
margin-left: auto;
}
.usuarios-lista[b-ff3l37oupe] {
flex: 1;
overflow-y: auto;
padding: 8px 4px 8px 8px;
}
.usuarios-lista[b-ff3l37oupe]::-webkit-scrollbar {
width: 4px;
}
.usuarios-lista[b-ff3l37oupe]::-webkit-scrollbar-track {
background: #f1f5f9;
}
.usuarios-lista[b-ff3l37oupe]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.usuario-item[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
transition: background 0.2s ease, transform 0.2s ease;
margin-bottom: 2px;
}
.usuario-item:hover[b-ff3l37oupe] {
background: #f1f5f9;
transform: translateX(4px);
}
.usuario-avatar[b-ff3l37oupe] {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.usuario-info[b-ff3l37oupe] {
flex: 1;
min-width: 0;
}
.usuario-nombre[b-ff3l37oupe] {
font-weight: 600;
font-size: 13px;
color: #0f172a;
display: block;
}
.usuario-estado[b-ff3l37oupe] {
font-size: 11px;
display: flex;
align-items: center;
gap: 4px;
color: #475569;
}
.estado-indicador[b-ff3l37oupe] {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.estado-indicador.online[b-ff3l37oupe] {
background: #22c55e;
box-shadow: 0 0 8px rgba(34,197,94,0.5);
animation: pulse-online-b-ff3l37oupe 2s infinite;
}
.estado-indicador.ausente[b-ff3l37oupe] {
background: #f59e0b;
}
.estado-indicador.ocupado[b-ff3l37oupe] {
background: #ef4444;
}
.estado-indicador.desconectado[b-ff3l37oupe] {
background: #94a3b8;
}
@keyframes pulse-online-b-ff3l37oupe {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(0.9);
}
}
.usuario-hora[b-ff3l37oupe] {
font-size: 10px;
color: #94a3b8;
display: block;
margin-top: 1px;
}
.usuarios-empty[b-ff3l37oupe] {
text-align: center;
padding: 30px 0;
color: #94a3b8;
}
.usuarios-empty i[b-ff3l37oupe] {
font-size: 32px;
display: block;
margin-bottom: 8px;
}
/* ========== COLUMNA CENTRAL: CARRUSEL + FILTROS ========== */
.carrusel-wrapper[b-ff3l37oupe] {
display: flex;
flex-direction: column;
height: 100%;
}
/* Barra de filtros */
.carrusel-toolbar[b-ff3l37oupe] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
background: #fafcfc;
border-bottom: 1px solid #eef2f6;
flex-shrink: 0;
gap: 8px;
}
.carrusel-toolbar .toolbar-left[b-ff3l37oupe] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.carrusel-toolbar .toolbar-right[b-ff3l37oupe] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.toolbar-filtros-rapidos[b-ff3l37oupe] {
display: flex;
gap: 4px;
}
.toolbar-fechas[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.toolbar-fechas label[b-ff3l37oupe] {
font-size: 12px;
font-weight: 500;
color: #475569;
}
.toolbar-fechas input[type="date"][b-ff3l37oupe] {
padding: 3px 6px;
border: 1px solid #e2e8f0;
border-radius: 4px;
font-size: 12px;
background: white;
}
.btn-aplicar-fechas[b-ff3l37oupe] {
padding: 3px 10px;
border: none;
border-radius: 4px;
background: #f1f5f9;
font-weight: 500;
font-size: 12px;
cursor: pointer;
transition: 0.25s ease;
display: inline-flex;
align-items: center;
gap: 3px;
}
.btn-aplicar-fechas.active[b-ff3l37oupe] {
background: #2563eb;
color: white;
box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.btn-aplicar-fechas:hover[b-ff3l37oupe] {
background: #e2e8f0;
}
.btn-refresh[b-ff3l37oupe] {
padding: 4px 12px;
border: none;
border-radius: 6px;
background: #1e293b;
color: white;
font-weight: 600;
font-size: 12px;
cursor: pointer;
transition: 0.3s ease;
display: inline-flex;
align-items: center;
gap: 4px;
}
.btn-refresh:hover:not(:disabled)[b-ff3l37oupe] {
background: #0f172a;
transform: scale(1.02);
}
.btn-refresh:disabled[b-ff3l37oupe] {
opacity: 0.6;
cursor: not-allowed;
}
.auto-refresh-group[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 4px;
background: #f1f5f9;
padding: 2px 8px 2px 4px;
border-radius: 30px;
}
.btn-auto-refresh[b-ff3l37oupe] {
border: none;
background: transparent;
padding: 2px 8px;
border-radius: 20px;
font-weight: 600;
font-size: 11px;
color: #64748b;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 3px;
transition: 0.3s ease;
}
.btn-auto-refresh.active[b-ff3l37oupe] {
background: #2563eb;
color: white;
box-shadow: 0 2px 6px rgba(37,99,235,0.3);
}
.countdown[b-ff3l37oupe] {
font-size: 11px;
font-weight: 500;
color: #334155;
display: inline-flex;
align-items: center;
gap: 3px;
min-width: 40px;
}
/* Slides */
.carrusel-slides[b-ff3l37oupe] {
flex: 1;
overflow: hidden;
position: relative;
}
.carrusel-slide[b-ff3l37oupe] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s ease;
transform: scale(0.96);
pointer-events: none;
padding: 16px 20px 20px 20px;
overflow-y: auto;
}
.carrusel-slide.activo[b-ff3l37oupe] {
opacity: 1;
transform: scale(1);
pointer-events: auto;
z-index: 2;
}
.carrusel-slide[b-ff3l37oupe]::-webkit-scrollbar {
width: 4px;
}
.carrusel-slide[b-ff3l37oupe]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.carrusel-slide[b-ff3l37oupe]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.slide-content[b-ff3l37oupe] {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Controles del carrusel */
.carrusel-controles[b-ff3l37oupe] {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 8px 12px 12px 12px;
border-top: 1px solid #eef2f6;
flex-shrink: 0;
background: #fafcfc;
flex-wrap: wrap;
}
.carrusel-nav-btn[b-ff3l37oupe] {
border: none;
background: #e2e8f0;
color: #475569;
font-weight: 600;
font-size: 12px;
padding: 6px 16px;
border-radius: 30px;
cursor: pointer;
transition: 0.3s ease;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.carrusel-nav-btn:hover[b-ff3l37oupe] {
background: #cbd5e1;
transform: translateY(-2px);
}
.carrusel-nav-btn.activo[b-ff3l37oupe] {
background: #2563eb;
color: white;
box-shadow: 0 4px 14px rgba(37,99,235,0.4);
transform: translateY(-2px);
}
.carrusel-nav-btn i[b-ff3l37oupe] {
font-size: 13px;
}
/* ========== COLUMNA DERECHA: CHAT HERMES ========== */
.chat-card[b-ff3l37oupe] {
display: flex;
flex-direction: column;
height: 100%;
}
.chat-header[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: linear-gradient(135deg, #f5f0ff, #ede9fe);
border-bottom: 1px solid #e2d9f3;
font-weight: 600;
font-size: 14px;
color: #4c1d95;
flex-shrink: 0;
}
.chat-header i[b-ff3l37oupe] {
font-size: 18px;
}
.chat-badge[b-ff3l37oupe] {
background: #8b5cf6;
color: white;
border-radius: 20px;
padding: 0 10px;
font-size: 10px;
font-weight: 700;
margin-left: auto;
letter-spacing: 0.3px;
}
.chat-mensajes[b-ff3l37oupe] {
flex: 1;
overflow-y: auto;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
background: #faf8ff;
position: relative;
}
.chat-mensajes[b-ff3l37oupe]::-webkit-scrollbar {
width: 4px;
}
.chat-mensajes[b-ff3l37oupe]::-webkit-scrollbar-track {
background: #f1f0f5;
}
.chat-mensajes[b-ff3l37oupe]::-webkit-scrollbar-thumb {
background: #c4b5d4;
border-radius: 4px;
}
/* Placeholder Β‘EN DESARROLLO! */
.chat-placeholder[b-ff3l37oupe] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-size: 32px;
font-weight: 900;
color: rgba(139, 92, 246, 0.50);
text-transform: uppercase;
letter-spacing: 4px;
pointer-events: none;
user-select: none;
white-space: nowrap;
z-index: 0;
}
.chat-mensaje[b-ff3l37oupe] {
display: flex;
animation: fadeInUp-b-ff3l37oupe 0.3s ease;
position: relative;
z-index: 1;
}
.chat-mensaje.usuario[b-ff3l37oupe] {
justify-content: flex-end;
}
.chat-mensaje.hermes[b-ff3l37oupe] {
justify-content: flex-start;
}
.chat-burbuja[b-ff3l37oupe] {
max-width: 85%;
padding: 8px 14px;
border-radius: 16px;
font-size: 13px;
line-height: 1.4;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
position: relative;
word-wrap: break-word;
}
.chat-mensaje.usuario .chat-burbuja[b-ff3l37oupe] {
background: #2563eb;
color: white;
border-bottom-right-radius: 4px;
}
.chat-mensaje.hermes .chat-burbuja[b-ff3l37oupe] {
background: white;
border: 1px solid #e2d9f3;
color: #1e293b;
border-bottom-left-radius: 4px;
}
.chat-avatar-hermes[b-ff3l37oupe] {
font-size: 16px;
margin-right: 6px;
}
.chat-texto[b-ff3l37oupe] {
display: inline;
}
.chat-hora[b-ff3l37oupe] {
font-size: 9px;
opacity: 0.6;
margin-left: 8px;
display: inline-block;
}
.chat-empty[b-ff3l37oupe] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #94a3b8;
font-size: 14px;
gap: 8px;
position: relative;
z-index: 1;
}
.chat-empty i[b-ff3l37oupe] {
font-size: 40px;
color: #c4b5d4;
}
.chat-input-area[b-ff3l37oupe] {
display: flex;
gap: 6px;
padding: 8px 12px;
border-top: 1px solid #e2d9f3;
background: white;
flex-shrink: 0;
}
.chat-input[b-ff3l37oupe] {
flex: 1;
border: 2px solid #e2d9f3;
border-radius: 24px;
padding: 8px 14px;
font-size: 13px;
outline: none;
transition: 0.3s ease;
background: #faf8ff;
}
.chat-input:focus[b-ff3l37oupe] {
border-color: #8b5cf6;
box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
}
.chat-enviar[b-ff3l37oupe] {
border: none;
background: #8b5cf6;
color: white;
border-radius: 50%;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.3s ease;
flex-shrink: 0;
}
.chat-enviar:hover:not(:disabled)[b-ff3l37oupe] {
background: #7c3aed;
transform: scale(1.05);
}
.chat-enviar:disabled[b-ff3l37oupe] {
opacity: 0.5;
cursor: not-allowed;
}
/* ===== ANIMACIONES ===== */
@keyframes fadeInUp-b-ff3l37oupe {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== ESTILOS DE ESTADΓSTICAS (COMPLETOS) ===== */
/* KPI Grid */
.kpi-grid[b-ff3l37oupe] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
.kpi-card[b-ff3l37oupe] {
background: #f8fafc;
border-radius: 12px;
padding: 10px 8px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #eef2f6;
transition: 0.3s ease;
cursor: default;
}
.kpi-card:hover[b-ff3l37oupe] {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
border-color: #dbeafe;
}
.kpi-icon[b-ff3l37oupe] {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: white;
flex-shrink: 0;
}
.kpi-content[b-ff3l37oupe] {
display: flex;
flex-direction: column;
text-align: center;
flex: 1;
}
.kpi-value[b-ff3l37oupe] {
font-size: 20px;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.kpi-label[b-ff3l37oupe] {
font-size: 10px;
font-weight: 500;
color: #64748b;
}
/* Colores de KPI */
.kpi-blue .kpi-icon[b-ff3l37oupe] {
background: linear-gradient(135deg, #2563eb, #3b82f6);
}
.kpi-green .kpi-icon[b-ff3l37oupe] {
background: linear-gradient(135deg, #16a34a, #22c55e);
}
.kpi-yellow .kpi-icon[b-ff3l37oupe] {
background: linear-gradient(135deg, #ca8a04, #eab308);
}
.kpi-orange .kpi-icon[b-ff3l37oupe] {
background: linear-gradient(135deg, #ea580c, #f97316);
}
.kpi-red .kpi-icon[b-ff3l37oupe] {
background: linear-gradient(135deg, #dc2626, #ef4444);
}
.kpi-purple .kpi-icon[b-ff3l37oupe] {
background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}
.kpi-success .kpi-icon[b-ff3l37oupe] {
background: linear-gradient(135deg, #059669, #10b981);
}
.kpi-info .kpi-icon[b-ff3l37oupe] {
background: linear-gradient(135deg, #0891b2, #06b6d4);
}
.kpi-warning .kpi-icon[b-ff3l37oupe] {
background: linear-gradient(135deg, #d97706, #f59e0b);
}
.kpi-danger .kpi-icon[b-ff3l37oupe] {
background: linear-gradient(135deg, #b91c1c, #dc2626);
}
/* Alertas */
.alerta-banner[b-ff3l37oupe] {
margin: 0 0 12px 0;
padding: 8px 14px;
border-radius: 10px;
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: white;
font-weight: 800;
font-size: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
box-shadow: 0 2px 14px rgba(220,38,38,0.3);
text-align: center;
animation: pulse-glow-b-ff3l37oupe 2s ease-in-out infinite;
cursor: pointer;
}
.alerta-banner span[b-ff3l37oupe] {
display: inline-block;
padding: 2px 14px;
border-radius: 40px;
background: rgba(0,0,0,0.15);
font-size: 14px;
}
@keyframes pulse-glow-b-ff3l37oupe {
0%, 100% {
box-shadow: 0 2px 14px rgba(220,38,38,0.3);
transform: scale(1);
}
50% {
box-shadow: 0 6px 28px rgba(220,38,38,0.5);
transform: scale(1.01);
}
}
/* Mosaico vencimientos */
.mosaico-vencimientos[b-ff3l37oupe] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px;
margin: 6px 0;
max-height: 220px;
overflow-y: auto;
}
.mosaico-vencimientos[b-ff3l37oupe]::-webkit-scrollbar {
width: 4px;
}
.mosaico-vencimientos[b-ff3l37oupe]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.mosaico-vencimientos[b-ff3l37oupe]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.tarjeta-vencimiento[b-ff3l37oupe] {
background: #f8fafc;
border-radius: 8px;
padding: 8px 10px;
display: flex;
align-items: center;
gap: 8px;
border-left: 4px solid #3b82f6;
transition: 0.2s ease;
}
.tarjeta-vencimiento:hover[b-ff3l37oupe] {
background: #f1f5f9;
transform: scale(1.02);
}
.tarjeta-vencimiento.urgente[b-ff3l37oupe] {
border-left-color: #ef4444;
}
.tarjeta-vencimiento.alta[b-ff3l37oupe] {
border-left-color: #f59e0b;
}
.tarjeta-vencimiento.media[b-ff3l37oupe] {
border-left-color: #3b82f6;
}
.tarjeta-vencimiento.baja[b-ff3l37oupe] {
border-left-color: #22c55e;
}
.vehiculo-icono[b-ff3l37oupe] {
font-size: 20px;
flex-shrink: 0;
}
.vencimiento-info[b-ff3l37oupe] {
flex: 1;
min-width: 0;
}
.vencimiento-nombre[b-ff3l37oupe] {
font-weight: 600;
font-size: 12px;
color: #0f172a;
}
.vencimiento-cedula[b-ff3l37oupe] {
font-size: 10px;
color: #64748b;
}
.vencimiento-tipo[b-ff3l37oupe] {
display: inline-block;
padding: 0 6px;
border-radius: 10px;
font-size: 9px;
font-weight: 600;
}
.vencimiento-tipo.badge-cedula[b-ff3l37oupe] {
background: #dbeafe;
color: #1e40af;
}
.vencimiento-tipo.badge-carnet[b-ff3l37oupe] {
background: #fce7f3;
color: #9d174d;
}
.vencimiento-tipo.badge-libreta[b-ff3l37oupe] {
background: #ede9fe;
color: #5b21b6;
}
.vencimiento-tipo.badge-seguro[b-ff3l37oupe] {
background: #fef3c7;
color: #92400e;
}
.vencimiento-fecha[b-ff3l37oupe] {
font-size: 10px;
color: #475569;
}
.vencimiento-dias[b-ff3l37oupe] {
font-size: 14px;
font-weight: 800;
padding: 0 6px;
border-radius: 16px;
white-space: nowrap;
}
.vencimiento-dias.rojo[b-ff3l37oupe] {
background: #fee2e2;
color: #991b1b;
}
.vencimiento-dias.amarillo[b-ff3l37oupe] {
background: #fef9c3;
color: #854d0e;
}
.vencimiento-dias.naranja[b-ff3l37oupe] {
background: #ffedd5;
color: #9a3412;
}
.vencimiento-dias.verde[b-ff3l37oupe] {
background: #dcfce7;
color: #166534;
}
/* Chart section */
.chart-section[b-ff3l37oupe] {
background: #fafcfc;
border-radius: 10px;
padding: 12px 14px;
border: 1px solid #eef2f6;
transition: 0.3s ease;
}
.chart-section:hover[b-ff3l37oupe] {
border-color: #dbeafe;
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.chart-section h4[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: #0f172a;
margin-bottom: 8px;
}
.chart-section h4 i[b-ff3l37oupe] {
color: #2563eb;
}
/* Barras */
.estado-bars[b-ff3l37oupe] {
display: flex;
flex-direction: column;
gap: 4px;
}
.bar-item[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 6px;
}
.bar-label[b-ff3l37oupe] {
min-width: 50px;
font-weight: 500;
font-size: 11px;
color: #334155;
}
.bar-track[b-ff3l37oupe] {
flex: 1;
height: 6px;
background: #e2e8f0;
border-radius: 20px;
overflow: hidden;
}
.bar-fill[b-ff3l37oupe] {
height: 100%;
border-radius: 20px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.bar-fill.bar-primary[b-ff3l37oupe] {
background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.bar-fill.bar-success[b-ff3l37oupe] {
background: linear-gradient(90deg, #16a34a, #4ade80);
}
.bar-fill.bar-danger[b-ff3l37oupe] {
background: linear-gradient(90deg, #dc2626, #f87171);
}
.bar-fill.bar-warning[b-ff3l37oupe] {
background: linear-gradient(90deg, #d97706, #fbbf24);
}
.bar-fill.bar-info[b-ff3l37oupe] {
background: linear-gradient(90deg, #0891b2, #67e8f9);
}
.bar-fill.bar-purple[b-ff3l37oupe] {
background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
.bar-value[b-ff3l37oupe] {
font-size: 11px;
font-weight: 600;
color: #475569;
min-width: 40px;
text-align: right;
}
/* Top lists */
.top-list[b-ff3l37oupe] {
display: flex;
flex-direction: column;
gap: 6px;
}
.top-item[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
background: #f8fafc;
border-radius: 8px;
transition: 0.2s ease;
}
.top-item:hover[b-ff3l37oupe] {
background: #eef2f6;
transform: translateX(4px);
}
.top-position[b-ff3l37oupe] {
font-weight: 800;
color: #94a3b8;
font-size: 12px;
min-width: 24px;
}
.top-info[b-ff3l37oupe] {
flex: 1;
}
.top-info strong[b-ff3l37oupe] {
display: block;
font-size: 13px;
color: #0f172a;
}
.top-detail[b-ff3l37oupe] {
font-size: 11px;
color: #64748b;
}
.top-count[b-ff3l37oupe] {
font-weight: 700;
font-size: 14px;
color: #0f172a;
}
/* Two columns layout */
.two-columns[b-ff3l37oupe] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.column[b-ff3l37oupe] {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Tendencia grid */
.tendencia-grid[b-ff3l37oupe] {
display: flex;
gap: 4px;
align-items: flex-end;
height: 120px;
padding-top: 8px;
}
.tendencia-item[b-ff3l37oupe] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
height: 100%;
}
.tendencia-bar[b-ff3l37oupe] {
width: 100%;
max-width: 30px;
min-height: 4px;
background: linear-gradient(180deg, #2563eb, #93c5fd);
border-radius: 4px 4px 0 0;
transition: height 0.5s ease;
flex: 1;
display: flex;
align-items: flex-end;
}
.tendencia-bar div[b-ff3l37oupe] {
width: 100%;
border-radius: 4px 4px 0 0;
background: inherit;
}
.tendencia-fecha[b-ff3l37oupe] {
font-size: 9px;
color: #64748b;
transform: rotate(-30deg);
white-space: nowrap;
}
.tendencia-valor[b-ff3l37oupe] {
font-size: 9px;
font-weight: 600;
color: #1e293b;
}
/* Hora grid */
.hora-grid[b-ff3l37oupe] {
display: flex;
gap: 4px;
align-items: flex-end;
height: 100px;
padding-top: 8px;
}
.hora-item[b-ff3l37oupe] {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
height: 100%;
}
.hora-bar[b-ff3l37oupe] {
width: 100%;
max-width: 20px;
min-height: 4px;
background: linear-gradient(180deg, #7c3aed, #c4b5fd);
border-radius: 4px 4px 0 0;
transition: height 0.5s ease;
flex: 1;
display: flex;
align-items: flex-end;
}
.hora-bar div[b-ff3l37oupe] {
width: 100%;
border-radius: 4px 4px 0 0;
background: inherit;
}
.hora-label[b-ff3l37oupe] {
font-size: 8px;
color: #64748b;
}
.hora-valor[b-ff3l37oupe] {
font-size: 8px;
font-weight: 600;
color: #1e293b;
}
/* VehΓculo grid */
.vehiculo-grid[b-ff3l37oupe] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.vehiculo-card[b-ff3l37oupe] {
background: #f8fafc;
border-radius: 10px;
padding: 12px;
text-align: center;
transition: 0.3s ease;
border: 1px solid #eef2f6;
}
.vehiculo-card:hover[b-ff3l37oupe] {
transform: translateY(-4px);
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
background: white;
}
.vehiculo-icon[b-ff3l37oupe] {
font-size: 28px;
margin-bottom: 4px;
}
.vehiculo-name[b-ff3l37oupe] {
font-weight: 600;
font-size: 12px;
color: #1e293b;
}
.vehiculo-count[b-ff3l37oupe] {
font-size: 18px;
font-weight: 800;
color: #0f172a;
margin: 2px 0;
}
.vehiculo-bar[b-ff3l37oupe] {
height: 4px;
background: #e2e8f0;
border-radius: 20px;
overflow: hidden;
margin: 4px 0;
}
.vehiculo-bar-fill[b-ff3l37oupe] {
height: 100%;
background: linear-gradient(90deg, #2563eb, #60a5fa);
border-radius: 20px;
transition: width 0.6s ease;
}
.vehiculo-percent[b-ff3l37oupe] {
font-size: 11px;
font-weight: 600;
color: #475569;
}
/* Zona y comisiΓ³n */
.zona-grid[b-ff3l37oupe] {
display: flex;
flex-direction: column;
gap: 4px;
}
.zona-item[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 8px;
}
.zona-name[b-ff3l37oupe] {
min-width: 60px;
font-weight: 500;
font-size: 12px;
color: #334155;
}
.zona-bar[b-ff3l37oupe] {
flex: 1;
height: 6px;
background: #e2e8f0;
border-radius: 20px;
overflow: hidden;
}
.zona-bar-fill[b-ff3l37oupe] {
height: 100%;
border-radius: 20px;
transition: width 0.6s ease;
}
.zona-count[b-ff3l37oupe] {
font-size: 11px;
font-weight: 600;
color: #475569;
min-width: 50px;
text-align: right;
}
.comision-grid[b-ff3l37oupe] {
display: flex;
flex-direction: column;
gap: 4px;
}
.comision-item[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 8px;
}
.comision-name[b-ff3l37oupe] {
min-width: 80px;
font-weight: 500;
font-size: 12px;
color: #334155;
}
.comision-bar[b-ff3l37oupe] {
flex: 1;
height: 6px;
background: #e2e8f0;
border-radius: 20px;
overflow: hidden;
}
.comision-bar-fill[b-ff3l37oupe] {
height: 100%;
border-radius: 20px;
transition: width 0.6s ease;
}
.comision-count[b-ff3l37oupe] {
font-size: 11px;
font-weight: 600;
color: #475569;
min-width: 30px;
text-align: right;
}
/* GΓ©nero */
.genero-grid[b-ff3l37oupe] {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.genero-item[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 12px;
}
.genero-circle[b-ff3l37oupe] {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.genero-item:hover .genero-circle[b-ff3l37oupe] {
transform: scale(1.1);
}
.genero-info[b-ff3l37oupe] {
display: flex;
flex-direction: column;
}
.genero-label[b-ff3l37oupe] {
font-weight: 600;
font-size: 14px;
color: #0f172a;
}
.genero-count[b-ff3l37oupe] {
font-size: 12px;
color: #475569;
}
/* Empty state */
.empty-state-dashboard[b-ff3l37oupe] {
text-align: center;
padding: 30px 10px;
color: #64748b;
}
.empty-state-dashboard i[b-ff3l37oupe] {
font-size: 36px;
display: block;
margin-bottom: 8px;
opacity: 0.5;
}
.empty-state-dashboard h4[b-ff3l37oupe] {
font-size: 16px;
font-weight: 700;
color: #1e293b;
margin-bottom: 2px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
.dashboard-three-col[b-ff3l37oupe] {
grid-template-columns: 200px 1fr 240px;
}
}
@media (max-width: 992px) {
/* β FIX SCROLL GLOBAL β sin esto el container corta el contenido apilado */
.dashboard-container[b-ff3l37oupe] {
height: auto;
min-height: calc(100vh - 100px);
overflow: visible;
}
.dashboard-three-col[b-ff3l37oupe] {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
height: auto;
gap: 12px;
}
.col-usuarios[b-ff3l37oupe] {
max-height: 280px;
}
.col-carrusel[b-ff3l37oupe] {
min-height: 500px;
}
.col-chat[b-ff3l37oupe] {
max-height: 400px;
}
.carrusel-slide[b-ff3l37oupe] {
padding: 12px 16px;
}
.carrusel-nav-btn[b-ff3l37oupe] {
font-size: 11px;
padding: 4px 12px;
}
.two-columns[b-ff3l37oupe] {
grid-template-columns: 1fr;
}
.chat-placeholder[b-ff3l37oupe] {
font-size: 32px;
}
}
@media (max-width: 600px) {
.dashboard-container[b-ff3l37oupe] {
padding: 10px;
}
.carrusel-toolbar[b-ff3l37oupe] {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.toolbar-left[b-ff3l37oupe], .toolbar-right[b-ff3l37oupe] {
flex-wrap: wrap;
justify-content: center;
}
.kpi-grid[b-ff3l37oupe] {
grid-template-columns: repeat(2, 1fr);
}
.mosaico-vencimientos[b-ff3l37oupe] {
grid-template-columns: 1fr;
}
.carrusel-nav-btn[b-ff3l37oupe] {
font-size: 10px;
padding: 3px 10px;
}
.chat-placeholder[b-ff3l37oupe] {
font-size: 24px;
}
}
/* ===== CHAT BLOQUEO ===== */
.chat-bloqueo-indicador[b-ff3l37oupe] {
animation: pulse-block-b-ff3l37oupe 1s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes pulse-block-b-ff3l37oupe {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
/* Deshabilitar input durante bloqueo */
.chat-input:disabled[b-ff3l37oupe] {
background: #f1f5f9;
cursor: not-allowed;
opacity: 0.6;
}
.chat-enviar:disabled[b-ff3l37oupe] {
background: #94a3b8 !important;
cursor: not-allowed !important;
}
/* ============================================================
BARRA DE CONSUMO HERMES
============================================================ */
.consumo-hermes-bar[b-ff3l37oupe] {
padding: 8px 12px;
background: linear-gradient(135deg, #f0f4ff, #e8ecf8);
border-bottom: 1px solid #dbeafe;
flex-shrink: 0;
}
.consumo-header[b-ff3l37oupe] {
display: flex;
justify-content: space-between;
font-size: 11px;
font-weight: 600;
color: #1e293b;
}
.consumo-track[b-ff3l37oupe] {
width: 100%;
height: 8px;
background: #e2e8f0;
border-radius: 20px;
overflow: hidden;
margin: 4px 0;
}
.consumo-fill[b-ff3l37oupe] {
height: 100%;
border-radius: 20px;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 4px;
font-size: 7px;
font-weight: 700;
color: white;
min-width: 20px;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
}
.consumo-footer[b-ff3l37oupe] {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #64748b;
}
.chat-puntos[b-ff3l37oupe] {
animation: puntos-b-ff3l37oupe 1.2s steps(4) infinite;
}
@keyframes puntos-b-ff3l37oupe {
0% {
opacity: 0;
}
25% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
75% {
opacity: 0.9;
}
100% {
opacity: 0;
}
}
/* ============================================================
MENΓ DE PREGUNTAS RΓPIDAS
============================================================ */
.chat-menu-wrapper[b-ff3l37oupe] {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
}
.chat-menu-btn[b-ff3l37oupe] {
background: transparent;
border: none;
color: #94a3b8;
font-size: 18px;
padding: 6px 8px;
cursor: pointer;
border-radius: 50%;
transition: 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
}
.chat-menu-btn:hover[b-ff3l37oupe] {
background: #f1f5f9;
color: #4c1d95;
}
.chat-menu-dropdown[b-ff3l37oupe] {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
background: white;
border-radius: 12px;
min-width: 280px;
max-width: 340px;
max-height: 350px;
overflow-y: auto;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
border: 1px solid #e2d9f3;
z-index: 1000;
padding: 6px 0;
animation: slideUpMenu-b-ff3l37oupe 0.2s ease;
}
.chat-menu-dropdown[b-ff3l37oupe]::-webkit-scrollbar {
width: 4px;
}
.chat-menu-dropdown[b-ff3l37oupe]::-webkit-scrollbar-track {
background: #f1f0f5;
}
.chat-menu-dropdown[b-ff3l37oupe]::-webkit-scrollbar-thumb {
background: #c4b5d4;
border-radius: 4px;
}
@keyframes slideUpMenu-b-ff3l37oupe {
from {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.chat-menu-header[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px 6px 16px;
font-size: 12px;
font-weight: 600;
color: #4c1d95;
border-bottom: 1px solid #f1f0f5;
}
.chat-menu-header i[b-ff3l37oupe] {
font-size: 14px;
}
.chat-menu-items[b-ff3l37oupe] {
display: flex;
flex-direction: column;
padding: 4px 0;
}
.chat-menu-item[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: transparent;
border: none;
width: 100%;
text-align: left;
font-size: 13px;
color: #1e293b;
cursor: pointer;
transition: 0.15s ease;
font-family: inherit;
line-height: 1.3;
}
.chat-menu-item:hover[b-ff3l37oupe] {
background: #f5f0ff;
color: #4c1d95;
}
.chat-menu-item i[b-ff3l37oupe] {
color: #c4b5d4;
flex-shrink: 0;
}
.chat-menu-item span[b-ff3l37oupe] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Responsive */
@media (max-width: 480px) {
.chat-menu-dropdown[b-ff3l37oupe] {
min-width: 220px;
max-width: 280px;
right: 0;
left: auto;
}
.chat-menu-item[b-ff3l37oupe] {
font-size: 12px;
padding: 6px 12px;
}
}
/* ============================================================
MENΓ DE TRES PUNTOS POR USUARIO - FLOTANTE A LA DERECHA
============================================================ */
.usuario-item[b-ff3l37oupe] {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
transition: background 0.2s ease, transform 0.2s ease;
margin-bottom: 2px;
}
.usuario-menu-wrapper[b-ff3l37oupe] {
position: relative;
flex-shrink: 0;
margin-left: auto; /* β
EMPUJA EL MENΓ A LA DERECHA */
}
.usuario-menu-btn[b-ff3l37oupe] {
background: transparent;
border: none;
color: #94a3b8;
font-size: 14px;
padding: 4px 6px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
opacity: 0.3;
}
.usuario-item:hover .usuario-menu-btn[b-ff3l37oupe] {
opacity: 1;
}
.usuario-menu-btn:hover[b-ff3l37oupe] {
background: #e2e8f0;
color: #1f2937;
}
/* β
MENΓ FLOTANTE - SE DESPLIEGA A LA DERECHA (HACIA AFUERA) */
.usuario-menu-dropdown[b-ff3l37oupe] {
position: fixed; /* β
FLOTANTE SOBRE TODO */
top: var(--menu-top, 0px);
left: var(--menu-left, 0px);
background: white;
border-radius: 12px;
min-width: 220px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
border: 1px solid #e2e8f0;
z-index: 99999;
padding: 6px 0;
animation: slideDownMenu-b-ff3l37oupe 0.2s ease;
pointer-events: auto;
}
@keyframes slideDownMenu-b-ff3l37oupe {
from {
opacity: 0;
transform: translateY(-8px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.usuario-menu-item[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: none;
border: none;
width: 100%;
text-align: left;
font-size: 13px;
color: #1f2937;
cursor: pointer;
transition: background 0.15s ease;
font-family: inherit;
}
.usuario-menu-item:hover[b-ff3l37oupe] {
background: #f1f5f9;
}
.usuario-menu-item i[b-ff3l37oupe] {
font-size: 14px;
color: #64748b;
width: 18px;
text-align: center;
}
/* ============================================================
PANEL DE TAREAS TELEGRAM (reemplaza al chat Hermes)
Codeado por π¦Ύ Hefesto 13.1 Pro Max | Sr. Ignacio
============================================================ */
.tareas-panel[b-ff3l37oupe] {
display: flex;
flex-direction: column;
height: 100%;
background: #FFFFFF;
overflow: hidden;
}
/* HEADER */
.tareas-panel-header[b-ff3l37oupe] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 14px;
background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
border-bottom: 1px solid #90CAF9;
flex-shrink: 0;
}
.tareas-panel-header-left[b-ff3l37oupe] {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.tareas-panel-header-left > i[b-ff3l37oupe] {
font-size: 22px;
color: #1565C0;
flex-shrink: 0;
}
.tareas-panel-header h3[b-ff3l37oupe] {
margin: 0;
font-size: 14px;
font-weight: 800;
color: #0D47A1;
letter-spacing: -0.2px;
}
.tareas-panel-header p[b-ff3l37oupe] {
margin: 1px 0 0;
font-size: 11px;
color: #1976D2;
font-weight: 500;
}
.tareas-btn-ir[b-ff3l37oupe] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%);
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 3px 10px rgba(21, 101, 192, 0.3);
transition: all 0.2s ease;
flex-shrink: 0;
white-space: nowrap;
}
.tareas-btn-ir:hover[b-ff3l37oupe] {
transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(21, 101, 192, 0.45);
}
.tareas-btn-ir:active[b-ff3l37oupe] {
transform: translateY(0);
}
/* TOOLBAR */
.tareas-panel-toolbar[b-ff3l37oupe] {
padding: 8px 12px;
background: #FAFBFD;
border-bottom: 1px solid #EEF2F7;
flex-shrink: 0;
}
.tareas-btn-refresh[b-ff3l37oupe] {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 12px;
border: 1px solid #E5E9F0;
border-radius: 8px;
background: #FFFFFF;
color: #475569;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.tareas-btn-refresh:hover:not(:disabled)[b-ff3l37oupe] {
border-color: #1565C0;
color: #1565C0;
background: #F0F7FF;
}
.tareas-btn-refresh:disabled[b-ff3l37oupe] {
opacity: 0.6;
cursor: not-allowed;
}
/* BODY */
.tareas-panel-body[b-ff3l37oupe] {
flex: 1;
overflow-y: auto;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
background: #FAFBFD;
}
.tareas-panel-body[b-ff3l37oupe]::-webkit-scrollbar {
width: 5px;
}
.tareas-panel-body[b-ff3l37oupe]::-webkit-scrollbar-track {
background: transparent;
}
.tareas-panel-body[b-ff3l37oupe]::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 4px;
}
/* EMPTY STATE */
.tareas-empty[b-ff3l37oupe] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 40px 20px;
color: #94A3B8;
text-align: center;
font-size: 13px;
font-weight: 500;
}
.tareas-empty i[b-ff3l37oupe] {
font-size: 32px;
opacity: 0.6;
}
/* CARD DE ESTADO */
.estado-card[b-ff3l37oupe] {
background: #FFFFFF;
border-radius: 12px;
border: 1.5px solid #EEF2F7;
overflow: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(15, 23, 41, 0.04);
}
.estado-card:hover[b-ff3l37oupe] {
border-color: var(--estado-color, #1565C0);
box-shadow: 0 4px 14px rgba(15, 23, 41, 0.08);
}
.estado-card-expandido[b-ff3l37oupe] {
border-color: var(--estado-color, #1565C0);
box-shadow: 0 6px 20px rgba(15, 23, 41, 0.1);
}
/* HEADER DEL CARD */
.estado-card-header[b-ff3l37oupe] {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background 0.2s ease;
}
.estado-card-header:hover[b-ff3l37oupe] {
background: #F8FAFC;
}
.estado-card-icon[b-ff3l37oupe] {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 18px;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(15, 23, 41, 0.15);
transition: transform 0.25s ease;
}
.estado-card:hover .estado-card-icon[b-ff3l37oupe] {
transform: scale(1.08) rotate(-4deg);
}
.estado-card-info[b-ff3l37oupe] {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.estado-card-nombre[b-ff3l37oupe] {
font-size: 13px;
font-weight: 800;
color: #1A2236;
letter-spacing: 0.3px;
}
.estado-card-count[b-ff3l37oupe] {
font-size: 11px;
color: #64748B;
font-weight: 500;
}
.estado-card-badge[b-ff3l37oupe] {
min-width: 30px;
height: 26px;
padding: 0 10px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 13px;
font-weight: 800;
flex-shrink: 0;
box-shadow: 0 3px 8px rgba(15, 23, 41, 0.2);
}
.estado-card-arrow[b-ff3l37oupe] {
color: #94A3B8;
font-size: 12px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
/* LISTA DESPLEGABLE */
.estado-card-lista[b-ff3l37oupe] {
padding: 4px 8px 10px;
display: flex;
flex-direction: column;
gap: 6px;
background: #FAFBFD;
animation: estado-slide-down-b-ff3l37oupe 0.25s ease;
}
@keyframes estado-slide-down-b-ff3l37oupe {
from {
opacity: 0;
max-height: 0;
}
to {
opacity: 1;
max-height: 2000px;
}
}
.tarea-item[b-ff3l37oupe] {
padding: 8px 10px;
background: #FFFFFF;
border-radius: 8px;
border-left: 3px solid var(--estado-color, #1565C0);
box-shadow: 0 1px 3px rgba(15, 23, 41, 0.04);
transition: all 0.2s ease;
cursor: default;
}
.tarea-item:hover[b-ff3l37oupe] {
transform: translateX(3px);
box-shadow: 0 3px 10px rgba(15, 23, 41, 0.08);
}
.tarea-item-top[b-ff3l37oupe] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.tarea-item-colaborador[b-ff3l37oupe] {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 700;
color: #1A2236;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.tarea-item-colaborador i[b-ff3l37oupe] {
color: var(--estado-color, #1565C0);
font-size: 10px;
flex-shrink: 0;
}
.tarea-item-hora[b-ff3l37oupe] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: #475569;
flex-shrink: 0;
background: #F1F5F9;
padding: 2px 8px;
border-radius: 6px;
}
.tarea-item-hora i[b-ff3l37oupe] {
color: #94A3B8;
font-size: 10px;
}
.tarea-item-mid[b-ff3l37oupe] {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 15px;
}
.tarea-item-cliente[b-ff3l37oupe],
.tarea-item-subsector[b-ff3l37oupe] {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: #64748B;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tarea-item-cliente i[b-ff3l37oupe],
.tarea-item-subsector i[b-ff3l37oupe] {
font-size: 9px;
color: #94A3B8;
flex-shrink: 0;
}
.tarea-item-subsector[b-ff3l37oupe] {
color: #94A3B8;
font-size: 10.5px;
}
/* ESTADO VACΓO */
.estado-card-vacio[b-ff3l37oupe] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
color: #94A3B8;
font-size: 12px;
font-weight: 500;
background: #FAFBFD;
}
.estado-card-vacio i[b-ff3l37oupe] {
opacity: 0.6;
}
/* RESPONSIVE */
@media (max-width: 992px) {
.col-chat[b-ff3l37oupe] {
max-height: 500px;
}
.tareas-panel-header h3[b-ff3l37oupe] {
font-size: 13px;
}
.tareas-panel-header p[b-ff3l37oupe] {
font-size: 10px;
}
.tareas-btn-ir span[b-ff3l37oupe] {
display: none;
}
.tareas-btn-ir[b-ff3l37oupe] {
padding: 6px 10px;
}
}
/* BADGES (coinciden con la colorimetrΓa de Telegram) */
.estado-badge-sin-avisar[b-ff3l37oupe] {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.12));
color: #B91C1C;
border: 1px solid rgba(239, 68, 68, 0.25);
}
.estado-badge-avisado[b-ff3l37oupe] {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.12));
color: #B45309;
border: 1px solid rgba(245, 158, 11, 0.25);
}
.estado-badge-confirmado[b-ff3l37oupe] {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.12));
color: #047857;
border: 1px solid rgba(16, 185, 129, 0.25);
}
.estado-badge-rechazado[b-ff3l37oupe] {
background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
color: #475569;
border: 1px solid #CBD5E1;
}
.estado-badge-default[b-ff3l37oupe] {
background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
color: #475569;
border: 1px solid #CBD5E1;
}
/* Codeado por π¦Ύ Hefesto 13.1 Pro Max | Sr. Ignacio */
/* /Pages/HermesFlotante.razor.rz.scp.css */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
HERMES FLOTANTE β Mascota IA animada y arrastrable
TamaΓ±o: 69Γ91px (+25% vs versiΓ³n anterior)
Burbuja: 7 segundos | AnimaciΓ³n solo al comentar
Codeado por π¦Ύ Hefesto 15.1 Pro Max | Sr. Ignacio
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* ===== 01. CONTENEDOR PRINCIPAL ===== */
.hermes-flotante[b-r8aakc3tzw] {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99998;
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
}
.hermes-flotante.hermes-dragging[b-r8aakc3tzw] {
transition: none !important;
}
/* ===== 02. ROBOT WRAPPER ===== */
.hermes-robot-wrapper[b-r8aakc3tzw] {
position: relative;
width: 69px;
height: 91px;
cursor: grab;
pointer-events: auto;
transition: filter 0.3s ease;
filter: drop-shadow(0 8px 15px rgba(59, 130, 246, 0.35));
touch-action: none;
-webkit-tap-highlight-color: transparent;
}
.hermes-robot-wrapper:active[b-r8aakc3tzw] {
cursor: grabbing;
}
.hermes-robot-wrapper:hover[b-r8aakc3tzw] {
filter: drop-shadow(0 10px 20px rgba(139, 92, 246, 0.55));
}
/* Wrapper interno del SVG β GPU acceleration */
.hermes-robot-svg-wrapper[b-r8aakc3tzw] {
width: 100%;
height: 100%;
animation: hermes-float-b-r8aakc3tzw 4s ease-in-out infinite;
}
.hermes-abierto .hermes-robot-svg-wrapper[b-r8aakc3tzw] {
animation: none;
}
.hermes-dragging .hermes-robot-svg-wrapper[b-r8aakc3tzw],
.hermes-dragging .hermes-robot-svg-wrapper *[b-r8aakc3tzw] {
animation-play-state: paused !important;
}
/* Sombra debajo del robot */
.hermes-robot-wrapper[b-r8aakc3tzw]::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 45px;
height: 8px;
background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.4) 0%, rgba(139, 92, 246, 0.15) 50%, transparent 80%);
filter: blur(4px);
animation: hermes-shadow-pulse-b-r8aakc3tzw 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes hermes-shadow-pulse-b-r8aakc3tzw {
0%, 100% {
opacity: 0.6;
transform: translateX(-50%) scale(1);
}
50% {
opacity: 0.3;
transform: translateX(-50%) scale(0.85);
}
}
/* SVG del robot */
.hermes-robot-svg[b-r8aakc3tzw] {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* ===== 03. ANIMACIONES INTERNAS (SIEMPRE ACTIVAS) ===== */
/* Antena pulsante */
.antenna-dot[b-r8aakc3tzw] {
animation: hermes-antenna-pulse-b-r8aakc3tzw 2s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes hermes-antenna-pulse-b-r8aakc3tzw {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.25);
}
}
/* Ojos que parpadean */
.ojo-ojo[b-r8aakc3tzw],
.ojo-brillo[b-r8aakc3tzw] {
animation: hermes-blink-b-r8aakc3tzw 5s step-end infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes hermes-blink-b-r8aakc3tzw {
0%, 92%, 100% {
transform: scaleY(1);
}
94% {
transform: scaleY(0.05);
}
}
/* Boca respirando */
.boca[b-r8aakc3tzw] {
animation: hermes-mouth-b-r8aakc3tzw 4s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes hermes-mouth-b-r8aakc3tzw {
0%, 100% {
transform: scaleY(1);
}
50% {
transform: scaleY(1.15);
}
}
/* CorazΓ³n latiendo */
.pecho-luz[b-r8aakc3tzw] {
animation: hermes-heartbeat-b-r8aakc3tzw 1.5s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
filter: drop-shadow(0 0 6px #a78bfa);
}
.pecho-luz-inner[b-r8aakc3tzw] {
animation: hermes-heartbeat-inner-b-r8aakc3tzw 1.5s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes hermes-heartbeat-b-r8aakc3tzw {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
@keyframes hermes-heartbeat-inner-b-r8aakc3tzw {
0%, 100% {
opacity: 0.9;
}
50% {
opacity: 0.4;
}
}
/* ===== 04. ANIMACIΓN BASE: FLOAT ===== */
@keyframes hermes-float-b-r8aakc3tzw {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
/* ===== 05. ANIMACIONES RANDOM ===== */
/* --- WAVE (saludar) --- */
.robot-wave[b-r8aakc3tzw] {
animation: hermes-float-wave-b-r8aakc3tzw 1.2s ease-in-out infinite !important;
}
@keyframes hermes-float-wave-b-r8aakc3tzw {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
30% {
transform: translateY(-5px) rotate(-3deg);
}
60% {
transform: translateY(-3px) rotate(3deg);
}
}
.robot-wave .hermes-part-arm-r[b-r8aakc3tzw] {
animation: hermes-wave-arm-b-r8aakc3tzw 0.6s ease-in-out infinite;
transform-box: fill-box;
transform-origin: 10% 10%;
}
@keyframes hermes-wave-arm-b-r8aakc3tzw {
0%, 100% {
transform: rotate(-30deg);
}
50% {
transform: rotate(-75deg);
}
}
/* --- WALK (caminar en el lugar) --- */
.robot-walk[b-r8aakc3tzw] {
animation: hermes-walk-bob-b-r8aakc3tzw 0.5s ease-in-out infinite !important;
}
@keyframes hermes-walk-bob-b-r8aakc3tzw {
0%, 100% {
transform: translateY(0);
}
25% {
transform: translateY(-3px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-3px);
}
}
.robot-walk .hermes-part-leg-l[b-r8aakc3tzw] {
animation: hermes-walk-leg-b-r8aakc3tzw 0.5s ease-in-out infinite;
transform-box: fill-box;
transform-origin: 50% 10%;
}
.robot-walk .hermes-part-leg-r[b-r8aakc3tzw] {
animation: hermes-walk-leg-b-r8aakc3tzw 0.5s ease-in-out infinite;
animation-delay: -0.25s;
transform-box: fill-box;
transform-origin: 50% 10%;
}
@keyframes hermes-walk-leg-b-r8aakc3tzw {
0%, 100% {
transform: rotate(-18deg);
}
50% {
transform: rotate(18deg);
}
}
.robot-walk .hermes-part-arm-l[b-r8aakc3tzw],
.robot-walk .hermes-part-arm-r[b-r8aakc3tzw] {
animation: hermes-walk-arm-b-r8aakc3tzw 0.5s ease-in-out infinite;
transform-box: fill-box;
transform-origin: 50% 10%;
}
.robot-walk .hermes-part-arm-r[b-r8aakc3tzw] {
animation-delay: -0.25s;
}
@keyframes hermes-walk-arm-b-r8aakc3tzw {
0%, 100% {
transform: rotate(15deg);
}
50% {
transform: rotate(-15deg);
}
}
/* --- STRETCH (estirar) --- */
.robot-stretch[b-r8aakc3tzw] {
animation: hermes-stretch-body-b-r8aakc3tzw 2s ease-in-out infinite !important;
}
@keyframes hermes-stretch-body-b-r8aakc3tzw {
0%, 100% {
transform: translateY(0) scaleY(1);
}
50% {
transform: translateY(-4px) scaleY(1.03);
}
}
.robot-stretch .hermes-part-arm-l[b-r8aakc3tzw],
.robot-stretch .hermes-part-arm-r[b-r8aakc3tzw] {
animation: hermes-stretch-arm-b-r8aakc3tzw 2s ease-in-out infinite;
transform-box: fill-box;
transform-origin: 50% 10%;
}
@keyframes hermes-stretch-arm-b-r8aakc3tzw {
0%, 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(-55deg);
}
}
/* --- JUMP (saltar) --- */
.robot-jump[b-r8aakc3tzw] {
animation: hermes-jump-b-r8aakc3tzw 0.7s cubic-bezier(0.5, 0, 0.5, 1) infinite !important;
}
@keyframes hermes-jump-b-r8aakc3tzw {
0%, 100% {
transform: translateY(0) scale(1, 1);
}
20% {
transform: translateY(1px) scale(1.05, 0.92);
}
45% {
transform: translateY(-18px) scale(0.96, 1.08);
}
70% {
transform: translateY(0) scale(1.06, 0.94);
}
85% {
transform: translateY(-4px) scale(0.99, 1.02);
}
}
.robot-jump .hermes-part-arm-l[b-r8aakc3tzw],
.robot-jump .hermes-part-arm-r[b-r8aakc3tzw] {
animation: hermes-jump-arm-b-r8aakc3tzw 0.7s ease-in-out infinite;
transform-box: fill-box;
transform-origin: 50% 10%;
}
@keyframes hermes-jump-arm-b-r8aakc3tzw {
0%, 100% {
transform: rotate(0deg);
}
45% {
transform: rotate(-40deg);
}
}
/* --- DANCE (bailar) --- */
.robot-dance[b-r8aakc3tzw] {
animation: hermes-dance-b-r8aakc3tzw 0.8s ease-in-out infinite !important;
}
@keyframes hermes-dance-b-r8aakc3tzw {
0%, 100% {
transform: rotate(0deg) translateY(0);
}
25% {
transform: rotate(-8deg) translateY(-4px);
}
75% {
transform: rotate(8deg) translateY(-4px);
}
}
.robot-dance .hermes-part-arm-l[b-r8aakc3tzw],
.robot-dance .hermes-part-arm-r[b-r8aakc3tzw] {
animation: hermes-dance-arm-b-r8aakc3tzw 0.8s ease-in-out infinite;
transform-box: fill-box;
transform-origin: 50% 10%;
}
@keyframes hermes-dance-arm-b-r8aakc3tzw {
0%, 100% {
transform: rotate(-20deg);
}
50% {
transform: rotate(-70deg);
}
}
.robot-dance .hermes-part-leg-l[b-r8aakc3tzw],
.robot-dance .hermes-part-leg-r[b-r8aakc3tzw] {
animation: hermes-dance-leg-b-r8aakc3tzw 0.8s ease-in-out infinite;
transform-box: fill-box;
transform-origin: 50% 10%;
}
.robot-dance .hermes-part-leg-r[b-r8aakc3tzw] {
animation-direction: reverse;
}
@keyframes hermes-dance-leg-b-r8aakc3tzw {
0%, 100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
/* --- LOOK (mirar a los lados) --- */
.robot-look[b-r8aakc3tzw] {
animation: hermes-float-b-r8aakc3tzw 4s ease-in-out infinite;
}
.robot-look .hermes-part-head[b-r8aakc3tzw] {
animation: hermes-look-head-b-r8aakc3tzw 3s ease-in-out infinite;
transform-box: fill-box;
transform-origin: 50% 80%;
}
@keyframes hermes-look-head-b-r8aakc3tzw {
0%, 20%, 100% {
transform: rotate(0deg) translateX(0);
}
35%, 55% {
transform: rotate(-12deg) translateX(-3px);
}
70%, 85% {
transform: rotate(12deg) translateX(3px);
}
}
/* --- SLEEP (dormir) --- */
.robot-sleep[b-r8aakc3tzw] {
animation: hermes-sleep-float-b-r8aakc3tzw 4s ease-in-out infinite !important;
}
@keyframes hermes-sleep-float-b-r8aakc3tzw {
0%, 100% {
transform: translateY(0) rotate(-2deg);
}
50% {
transform: translateY(-3px) rotate(-2deg);
}
}
.robot-sleep .hermes-part-head[b-r8aakc3tzw] {
animation: hermes-sleep-head-b-r8aakc3tzw 4s ease-in-out infinite;
transform-box: fill-box;
transform-origin: 50% 80%;
}
@keyframes hermes-sleep-head-b-r8aakc3tzw {
0%, 100% {
transform: rotate(0deg);
}
30%, 70% {
transform: rotate(8deg);
}
}
/* ===== 06. BURBUJA DE TEXTO (7 segundos) ===== */
.hermes-speech-bubble[b-r8aakc3tzw] {
position: absolute;
bottom: 100%;
left: 55%;
transform: translateX(-50%) translateY(6px) scale(0.7);
transform-origin: bottom left;
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
color: #FFFFFF;
padding: 6px 11px;
border-radius: 11px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.2px;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(139, 92, 246, 0.5), 0 3px 8px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 10;
}
.hermes-speech-bubble[b-r8aakc3tzw]::after {
content: '';
position: absolute;
bottom: -5px;
left: 30%;
transform: translateX(-50%) rotate(45deg);
width: 9px;
height: 9px;
background: linear-gradient(135deg, transparent 50%, #8b5cf6 50%);
border-radius: 0 0 3px 0;
}
.hermes-speech-bubble.visible[b-r8aakc3tzw] {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
/* ===== 07. VENTANA DE CHAT ===== */
.hermes-ventana[b-r8aakc3tzw] {
position: absolute;
bottom: 104px;
left: 0;
width: 250px;
height: 363px;
max-height: calc(100vh - 138px);
background: #FFFFFF;
border-radius: 13px;
box-shadow: 0 15px 38px rgba(15, 23, 41, 0.25), 0 5px 15px rgba(15, 23, 41, 0.15), 0 0 0 1px rgba(124, 58, 237, 0.1);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: translateY(13px) scale(0.9);
transform-origin: bottom left;
pointer-events: none;
transition: opacity 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hermes-ventana-visible[b-r8aakc3tzw] {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* HEADER */
.hermes-header[b-r8aakc3tzw] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 11px;
background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
color: #FFFFFF;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.hermes-header[b-r8aakc3tzw]::before {
content: '';
position: absolute;
top: -60%;
right: -10%;
width: 125px;
height: 125px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 65%);
pointer-events: none;
}
.hermes-header-left[b-r8aakc3tzw] {
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
}
.hermes-avatar[b-r8aakc3tzw] {
position: relative;
width: 26px;
height: 26px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
border: 1.5px solid rgba(255, 255, 255, 0.35);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.hermes-status-dot[b-r8aakc3tzw] {
position: absolute;
bottom: -1px;
right: -1px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
border: 1.5px solid #7c3aed;
animation: hermes-status-pulse-b-r8aakc3tzw 2s infinite;
}
@keyframes hermes-status-pulse-b-r8aakc3tzw {
0%, 100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
}
50% {
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
}
}
.hermes-header-info h3[b-r8aakc3tzw] {
margin: 0;
font-size: 10px;
font-weight: 700;
letter-spacing: -0.2px;
}
.hermes-header-info p[b-r8aakc3tzw] {
margin: 0;
font-size: 7px;
opacity: 0.9;
font-weight: 500;
}
.hermes-cerrar[b-r8aakc3tzw] {
width: 20px;
height: 20px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #FFFFFF;
font-size: 9px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
position: relative;
z-index: 1;
}
.hermes-cerrar:hover[b-r8aakc3tzw] {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
}
/* BARRA DE CONSUMO */
.hermes-consumo-bar[b-r8aakc3tzw] {
padding: 5px 9px;
background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf8 100%);
border-bottom: 1px solid #dbeafe;
flex-shrink: 0;
}
.hermes-consumo-header[b-r8aakc3tzw] {
display: flex;
justify-content: space-between;
font-size: 6px;
font-weight: 700;
color: #1e293b;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.hermes-consumo-track[b-r8aakc3tzw] {
width: 100%;
height: 4px;
background: #e2e8f0;
border-radius: 20px;
overflow: hidden;
margin: 3px 0;
}
.hermes-consumo-fill[b-r8aakc3tzw] {
height: 100%;
border-radius: 20px;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hermes-consumo-footer[b-r8aakc3tzw] {
display: flex;
justify-content: space-between;
font-size: 6px;
color: #64748b;
font-weight: 500;
}
/* MENSAJES */
.hermes-mensajes[b-r8aakc3tzw] {
flex: 1;
overflow-y: auto;
padding: 9px 9px 5px;
display: flex;
flex-direction: column;
gap: 5px;
background: #faf8ff;
}
.hermes-mensajes[b-r8aakc3tzw]::-webkit-scrollbar {
width: 4px;
}
.hermes-mensajes[b-r8aakc3tzw]::-webkit-scrollbar-track {
background: transparent;
}
.hermes-mensajes[b-r8aakc3tzw]::-webkit-scrollbar-thumb {
background: #c4b5d4;
border-radius: 4px;
}
.hermes-msg[b-r8aakc3tzw] {
display: flex;
animation: hermes-fadeInUp-b-r8aakc3tzw 0.3s ease;
}
.hermes-msg-usuario[b-r8aakc3tzw] {
justify-content: flex-end;
}
.hermes-msg-hermes[b-r8aakc3tzw] {
justify-content: flex-start;
}
.hermes-burbuja[b-r8aakc3tzw] {
max-width: 85%;
padding: 5px 9px;
border-radius: 9px;
font-size: 9px;
line-height: 1.45;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
word-wrap: break-word;
position: relative;
}
.hermes-msg-usuario .hermes-burbuja[b-r8aakc3tzw] {
background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
color: #FFFFFF;
border-bottom-right-radius: 3px;
}
.hermes-msg-hermes .hermes-burbuja[b-r8aakc3tzw] {
background: #FFFFFF;
border: 1px solid #e2d9f3;
color: #1e293b;
border-bottom-left-radius: 3px;
}
.hermes-avatar-mini[b-r8aakc3tzw] {
display: inline-block;
margin-right: 4px;
font-size: 9px;
}
.hermes-texto[b-r8aakc3tzw] {
display: inline;
}
.hermes-hora[b-r8aakc3tzw] {
font-size: 6px;
opacity: 0.55;
margin-left: 5px;
display: inline-block;
}
.hermes-empty[b-r8aakc3tzw] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #94a3b8;
text-align: center;
padding: 13px;
gap: 8px;
}
.hermes-empty i[b-r8aakc3tzw] {
font-size: 25px;
color: #c4b5d4;
}
.hermes-empty p[b-r8aakc3tzw] {
margin: 0;
font-size: 9px;
line-height: 1.5;
}
.hermes-empty b[b-r8aakc3tzw] {
color: #7c3aed;
}
@keyframes hermes-fadeInUp-b-r8aakc3tzw {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hermes-puntos[b-r8aakc3tzw] {
animation: hermes-dots-b-r8aakc3tzw 1.2s steps(4) infinite;
}
@keyframes hermes-dots-b-r8aakc3tzw {
0% {
opacity: 0.2;
}
50% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
/* BLOQUEO */
.hermes-bloqueo[b-r8aakc3tzw] {
padding: 4px 9px;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-top: 1px solid #f59e0b;
border-bottom: 1px solid #f59e0b;
text-align: center;
font-size: 7px;
color: #92400e;
font-weight: 600;
flex-shrink: 0;
}
/* INPUT */
.hermes-input-area[b-r8aakc3tzw] {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 8px;
border-top: 1px solid #e2d9f3;
background: #FFFFFF;
flex-shrink: 0;
position: relative;
}
.hermes-input[b-r8aakc3tzw] {
flex: 1;
border: 1.5px solid #e2d9f3;
border-radius: 12px;
padding: 5px 9px;
font-size: 9px;
outline: none;
transition: all 0.2s ease;
background: #faf8ff;
font-family: inherit;
color: #1e293b;
min-width: 0;
}
.hermes-input:focus[b-r8aakc3tzw] {
border-color: #7c3aed;
background: #FFFFFF;
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.hermes-input:disabled[b-r8aakc3tzw] {
background: #f1f5f9;
cursor: not-allowed;
opacity: 0.7;
}
.hermes-enviar[b-r8aakc3tzw] {
width: 23px;
height: 23px;
border: none;
border-radius: 50%;
background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
color: #FFFFFF;
font-size: 9px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
box-shadow: 0 3px 6px rgba(124, 58, 237, 0.3);
}
.hermes-enviar:hover:not(:disabled)[b-r8aakc3tzw] {
transform: scale(1.08);
box-shadow: 0 4px 9px rgba(124, 58, 237, 0.45);
}
.hermes-enviar:active:not(:disabled)[b-r8aakc3tzw] {
transform: scale(0.95);
}
.hermes-enviar:disabled[b-r8aakc3tzw] {
background: #cbd5e1;
box-shadow: none;
cursor: not-allowed;
opacity: 0.7;
}
/* MENΓ PREGUNTAS RΓPIDAS */
.hermes-menu-wrapper[b-r8aakc3tzw] {
position: relative;
flex-shrink: 0;
}
.hermes-menu-btn[b-r8aakc3tzw] {
width: 23px;
height: 23px;
border-radius: 50%;
border: none;
background: transparent;
color: #94a3b8;
font-size: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.hermes-menu-btn:hover[b-r8aakc3tzw] {
background: #f1f5f9;
color: #7c3aed;
}
.hermes-menu-dropdown[b-r8aakc3tzw] {
position: absolute;
bottom: calc(100% + 5px);
left: 0;
width: 188px;
max-height: 213px;
overflow-y: auto;
background: #FFFFFF;
border-radius: 9px;
box-shadow: 0 10px 25px rgba(15, 23, 41, 0.2), 0 0 0 1px #e2d9f3;
z-index: 10;
padding: 4px 0;
animation: hermes-slideUpMenu-b-r8aakc3tzw 0.2s ease;
}
.hermes-menu-dropdown[b-r8aakc3tzw]::-webkit-scrollbar {
width: 3px;
}
.hermes-menu-dropdown[b-r8aakc3tzw]::-webkit-scrollbar-thumb {
background: #c4b5d4;
border-radius: 4px;
}
@keyframes hermes-slideUpMenu-b-r8aakc3tzw {
from {
opacity: 0;
transform: translateY(6px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.hermes-menu-header[b-r8aakc3tzw] {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 9px 4px;
font-size: 6px;
font-weight: 700;
color: #4c1d95;
text-transform: uppercase;
letter-spacing: 0.4px;
border-bottom: 1px solid #f1f0f5;
}
.hermes-menu-header i[b-r8aakc3tzw] {
color: #7c3aed;
}
.hermes-menu-items[b-r8aakc3tzw] {
display: flex;
flex-direction: column;
padding: 3px 0;
}
.hermes-menu-item[b-r8aakc3tzw] {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 9px;
background: transparent;
border: none;
width: 100%;
text-align: left;
font-size: 8px;
color: #1e293b;
cursor: pointer;
transition: background 0.15s ease;
font-family: inherit;
line-height: 1.35;
}
.hermes-menu-item:hover[b-r8aakc3tzw] {
background: #f5f0ff;
color: #4c1d95;
}
.hermes-menu-item i[b-r8aakc3tzw] {
color: #c4b5d4;
font-size: 4px;
flex-shrink: 0;
}
.hermes-menu-item span[b-r8aakc3tzw] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===== 08. RESPONSIVE ===== */
@media (max-width: 600px) {
.hermes-flotante[b-r8aakc3tzw] {
bottom: 13px;
left: 13px;
}
.hermes-robot-wrapper[b-r8aakc3tzw] {
width: 50px;
height: 66px;
}
.hermes-speech-bubble[b-r8aakc3tzw] {
font-size: 8px;
padding: 4px 8px;
}
.hermes-ventana[b-r8aakc3tzw] {
width: calc(100vw - 26px);
height: calc(100vh - 113px);
max-height: 438px;
bottom: 86px;
}
.hermes-menu-dropdown[b-r8aakc3tzw] {
width: calc(100vw - 38px);
max-width: 200px;
}
}
/* ===== 09. ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
.hermes-robot-svg-wrapper[b-r8aakc3tzw],
.hermes-robot-svg-wrapper *[b-r8aakc3tzw] {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.hermes-speech-bubble[b-r8aakc3tzw] {
transition: opacity 0.2s ease;
}
}
/* /Pages/LoginPage.razor.rz.scp.css */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
LoginPage.razor.css
RediseΓ±o completo v1.8.5 β Modal de versiones + mobile-first
Codeado por π¦Ύ Hefesto 13.1 Pro Max | Sr. Ignacio
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 01. CONTENEDOR PRINCIPAL */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.login-container[b-2vak8k6pvl] {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
z-index: 9999;
font-family: 'Aptos', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.login-bg-layer[b-2vak8k6pvl] {
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.25), rgba(10, 22, 40, 0.55));
animation: gradientPulse-b-2vak8k6pvl 8s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 02. ΓCONOS FLOTANTES (mantiene floatUp) */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.login-float-icons[b-2vak8k6pvl] {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.float-icon[b-2vak8k6pvl] {
position: absolute;
font-size: 2.5rem;
color: rgba(255, 255, 255, 0.15);
animation: floatUp-b-2vak8k6pvl linear infinite;
pointer-events: none;
opacity: 0;
top: 0;
}
.float-icon:nth-child(1)[b-2vak8k6pvl] {
left: 5%;
animation-duration: 12s;
animation-delay: 0s;
font-size: 3rem;
}
.float-icon:nth-child(2)[b-2vak8k6pvl] {
left: 15%;
animation-duration: 14s;
animation-delay: 2s;
font-size: 2.5rem;
}
.float-icon:nth-child(3)[b-2vak8k6pvl] {
left: 25%;
animation-duration: 11s;
animation-delay: 4s;
font-size: 2rem;
}
.float-icon:nth-child(4)[b-2vak8k6pvl] {
left: 35%;
animation-duration: 13s;
animation-delay: 1s;
font-size: 3.2rem;
}
.float-icon:nth-child(5)[b-2vak8k6pvl] {
left: 45%;
animation-duration: 15s;
animation-delay: 3s;
font-size: 2.2rem;
}
.float-icon:nth-child(6)[b-2vak8k6pvl] {
left: 55%;
animation-duration: 12s;
animation-delay: 5s;
font-size: 2.8rem;
}
.float-icon:nth-child(7)[b-2vak8k6pvl] {
left: 65%;
animation-duration: 14s;
animation-delay: 2.5s;
font-size: 1.8rem;
}
.float-icon:nth-child(8)[b-2vak8k6pvl] {
left: 75%;
animation-duration: 11s;
animation-delay: 3.5s;
font-size: 3rem;
}
.float-icon:nth-child(9)[b-2vak8k6pvl] {
left: 85%;
animation-duration: 13s;
animation-delay: 1.5s;
font-size: 2.3rem;
}
.float-icon:nth-child(10)[b-2vak8k6pvl] {
left: 10%;
animation-duration: 16s;
animation-delay: 4.5s;
font-size: 2.7rem;
}
.float-icon:nth-child(11)[b-2vak8k6pvl] {
left: 50%;
animation-duration: 12s;
animation-delay: 2.8s;
font-size: 2.1rem;
}
.float-icon:nth-child(12)[b-2vak8k6pvl] {
left: 90%;
animation-duration: 14s;
animation-delay: 3.8s;
font-size: 2.4rem;
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 03. BURBUJAS FLOTANTES (mantiene floatBubble) */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.login-float-bubbles[b-2vak8k6pvl] {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.float-bubble[b-2vak8k6pvl] {
position: absolute;
top: 0;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 50px;
padding: 10px 20px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
animation: floatBubble-b-2vak8k6pvl linear infinite;
pointer-events: none;
opacity: 0;
white-space: nowrap;
}
.float-bubble .bubble-emoji[b-2vak8k6pvl] {
font-size: 1.2rem;
}
.float-bubble .bubble-text[b-2vak8k6pvl] {
font-size: 0.75rem;
color: #ffffff;
font-weight: 600;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 04. WRAPPER CON SCROLL (centra el login, permite scroll mΓ³vil) */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.login-scroll-wrapper[b-2vak8k6pvl] {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
padding: 100px 24px 120px 24px;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
.login-scroll-wrapper[b-2vak8k6pvl]::-webkit-scrollbar {
width: 8px;
}
.login-scroll-wrapper[b-2vak8k6pvl]::-webkit-scrollbar-track {
background: transparent;
}
.login-scroll-wrapper[b-2vak8k6pvl]::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.25);
border-radius: 8px;
}
.login-scroll-wrapper[b-2vak8k6pvl]::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.4);
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 05. LOGIN BOX */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.login-box[b-2vak8k6pvl] {
position: relative;
z-index: 2;
background: #ffffff;
padding: 2.5rem 2.5rem;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
width: 100%;
max-width: 440px;
animation: boxFadeIn-b-2vak8k6pvl 0.8s ease-out 0.2s both;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
border: none;
}
.login-box:hover[b-2vak8k6pvl] {
transform: translateY(-2px);
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.22), 0 6px 16px rgba(0, 0, 0, 0.1);
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 06. HEADER DEL LOGIN BOX */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.login-box-header[b-2vak8k6pvl] {
text-align: center;
margin-bottom: 2rem;
position: relative;
}
.login-box-header[b-2vak8k6pvl]::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 3px;
animation: headerLine-b-2vak8k6pvl 1s ease-out 0.5s both;
}
.login-icon-wrapper[b-2vak8k6pvl] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 65px;
height: 65px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
margin-bottom: 0.8rem;
box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.35);
animation: iconPulse-b-2vak8k6pvl 2s ease-in-out infinite;
}
.login-icon-wrapper i[b-2vak8k6pvl] {
font-size: 1.8rem;
color: #ffffff;
}
.login-titulo[b-2vak8k6pvl] {
color: var(--primary-color);
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.3rem;
letter-spacing: -0.5px;
}
.login-subtitulo[b-2vak8k6pvl] {
color: var(--text-dark);
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.5px;
opacity: 0.7;
margin: 0;
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 07. CAMPOS DEL FORMULARIO */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.login-box-form[b-2vak8k6pvl] {
display: flex;
flex-direction: column;
}
.login-field[b-2vak8k6pvl] {
margin-bottom: 1.5rem;
}
.login-field-label[b-2vak8k6pvl] {
display: block;
margin-bottom: 0.4rem;
color: var(--text-dark);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.5px;
text-transform: uppercase;
opacity: 0.8;
}
.login-field-label i[b-2vak8k6pvl] {
margin-right: 0.5rem;
}
.login-input-group[b-2vak8k6pvl] {
position: relative;
width: 100%;
}
.login-input[b-2vak8k6pvl] {
width: 100%;
padding: 0.75rem 2.8rem 0.75rem 2.8rem;
background: #f7f9fc;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.95rem;
color: var(--text-dark);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
font-family: inherit;
outline: none;
}
.login-input[b-2vak8k6pvl]::placeholder {
color: #a0aec0;
}
.login-input:hover[b-2vak8k6pvl] {
border-color: #cbd5e0;
}
.login-input:focus[b-2vak8k6pvl] {
border-color: var(--secondary-color);
background: #ffffff;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
transform: scale(1.01);
}
.login-input-icon[b-2vak8k6pvl] {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
font-size: 0.9rem;
transition: color 0.3s ease;
pointer-events: none;
}
.login-input:focus ~ .login-input-icon[b-2vak8k6pvl] {
color: var(--secondary-color);
}
.login-password-toggle[b-2vak8k6pvl] {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #a0aec0;
cursor: pointer;
transition: color 0.3s ease;
padding: 0.25rem;
font-size: 0.95rem;
outline: none;
}
.login-password-toggle:hover[b-2vak8k6pvl],
.login-password-toggle:focus[b-2vak8k6pvl] {
color: var(--secondary-color);
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 08. BOTΓN SUBMIT (default + BLOQUEADO con textura roja) */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.login-submit-btn[b-2vak8k6pvl] {
width: 100%;
padding: 0.85rem 1.5rem;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
letter-spacing: 0.5px;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.5rem;
box-sizing: border-box;
min-height: 48px;
}
.login-submit-btn .btn-default-content[b-2vak8k6pvl],
.login-submit-btn .btn-bloqueado-content[b-2vak8k6pvl],
.login-submit-btn .btn-loading[b-2vak8k6pvl] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
}
.login-submit-btn:not(.login-submit-btn-bloqueado)[b-2vak8k6pvl] {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: #ffffff;
box-shadow: 0 4px 15px -3px rgba(37, 99, 235, 0.4);
}
.login-submit-btn:not(.login-submit-btn-bloqueado)[b-2vak8k6pvl]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transition: left 0.5s ease;
}
.login-submit-btn:not(.login-submit-btn-bloqueado):hover:not(:disabled)[b-2vak8k6pvl] {
transform: translateY(-2px);
box-shadow: 0 8px 25px -5px rgba(37, 99, 235, 0.5);
}
.login-submit-btn:not(.login-submit-btn-bloqueado):hover:not(:disabled)[b-2vak8k6pvl]::before {
left: 100%;
}
.login-submit-btn:not(.login-submit-btn-bloqueado):active:not(:disabled)[b-2vak8k6pvl] {
transform: translateY(0) scale(0.98);
}
.login-submit-btn-bloqueado[b-2vak8k6pvl] {
background-color: #ffffff;
background-image: repeating-linear-gradient( 45deg, rgba(220, 38, 38, 0.14) 0px, rgba(220, 38, 38, 0.14) 2px, transparent 2px, transparent 8px ), repeating-linear-gradient( -45deg, rgba(220, 38, 38, 0.06) 0px, rgba(220, 38, 38, 0.06) 2px, transparent 2px, transparent 8px );
border: 2.5px solid #dc2626;
color: #0f172a;
box-shadow: 0 4px 15px -3px rgba(220, 38, 38, 0.35);
cursor: not-allowed;
animation: bloqueadoPulse-b-2vak8k6pvl 2.5s ease-in-out infinite;
}
.login-submit-btn-bloqueado:disabled[b-2vak8k6pvl] {
opacity: 1;
cursor: not-allowed;
}
.login-submit-btn-bloqueado .btn-bloqueado-content i[b-2vak8k6pvl] {
color: #dc2626;
font-size: 1.05rem;
animation: bloqueadoShake-b-2vak8k6pvl 2.5s ease-in-out infinite;
}
.login-submit-btn-bloqueado .btn-bloqueado-content span[b-2vak8k6pvl] {
color: #0f172a;
font-weight: 800;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
@keyframes bloqueadoPulse-b-2vak8k6pvl {
0%, 100% {
box-shadow: 0 4px 15px -3px rgba(220, 38, 38, 0.35);
}
50% {
box-shadow: 0 6px 22px -3px rgba(220, 38, 38, 0.6);
}
}
@keyframes bloqueadoShake-b-2vak8k6pvl {
0%, 100% {
transform: rotate(0deg);
}
10%, 30% {
transform: rotate(-8deg);
}
20%, 40% {
transform: rotate(8deg);
}
50% {
transform: rotate(0deg);
}
}
.login-submit-btn .spinner-border[b-2vak8k6pvl] {
width: 1.1rem;
height: 1.1rem;
border-width: 0.2em;
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 09. ERROR, DIVIDER Y COPYRIGHT */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.login-error[b-2vak8k6pvl] {
color: #dc2626;
text-align: center;
margin-top: 1rem;
font-size: 0.85rem;
font-weight: 600;
padding: 0.6rem 0.8rem;
background: rgba(220, 38, 38, 0.08);
border-radius: 8px;
border: 1px solid rgba(220, 38, 38, 0.18);
animation: errorShake-b-2vak8k6pvl 0.5s ease;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.login-divider[b-2vak8k6pvl] {
display: flex;
align-items: center;
margin: 1.5rem 0 1rem;
color: #a0aec0;
font-size: 0.8rem;
font-weight: 500;
}
.login-divider[b-2vak8k6pvl]::before,
.login-divider[b-2vak8k6pvl]::after {
content: '';
flex: 1;
border-bottom: 1px solid #e2e8f0;
}
.login-divider[b-2vak8k6pvl]::before {
margin-right: 1rem;
}
.login-divider[b-2vak8k6pvl]::after {
margin-left: 1rem;
}
.login-copyright[b-2vak8k6pvl] {
text-align: center;
color: #a0aec0;
font-size: 0.8rem;
}
.login-copyright p[b-2vak8k6pvl] {
margin: 0;
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 10. BOTΓN ACTUALIZAR (FIJO ABAJO IZQUIERDA) */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.version-btn-fixed[b-2vak8k6pvl] {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 100;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border-radius: 14px;
border: none;
font-family: inherit;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
min-width: 160px;
}
.version-btn-fixed:disabled[b-2vak8k6pvl] {
opacity: 0.7;
cursor: wait;
}
.version-btn-icon[b-2vak8k6pvl] {
font-size: 1.4rem;
line-height: 1;
}
.version-btn-texto[b-2vak8k6pvl] {
display: flex;
flex-direction: column;
gap: 1px;
text-align: left;
}
.version-btn-titulo[b-2vak8k6pvl] {
font-size: 0.9rem;
font-weight: 800;
letter-spacing: -0.2px;
}
.version-btn-version[b-2vak8k6pvl] {
font-size: 0.68rem;
font-weight: 600;
opacity: 0.8;
letter-spacing: 0.2px;
}
.version-btn-aldia[b-2vak8k6pvl] {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
color: #ffffff;
border: 1.5px solid rgba(255, 255, 255, 0.25);
}
.version-btn-aldia:hover:not(:disabled)[b-2vak8k6pvl] {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 14px 38px rgba(16, 185, 129, 0.45);
}
.version-btn-aldia:active:not(:disabled)[b-2vak8k6pvl] {
transform: translateY(-1px) scale(0.99);
}
.version-btn-actualizar[b-2vak8k6pvl] {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.95), rgba(185, 28, 28, 0.95));
color: #ffffff;
border: 1.5px solid rgba(255, 255, 255, 0.3);
animation: actualizarPulse-b-2vak8k6pvl 2s ease-in-out infinite;
}
.version-btn-actualizar:hover:not(:disabled)[b-2vak8k6pvl] {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 14px 38px rgba(220, 38, 38, 0.6);
animation-play-state: paused;
}
.version-btn-actualizar:active:not(:disabled)[b-2vak8k6pvl] {
transform: translateY(-1px) scale(0.99);
}
@keyframes actualizarPulse-b-2vak8k6pvl {
0%, 100% {
box-shadow: 0 10px 30px rgba(220, 38, 38, 0.4), 0 0 0 0 rgba(220, 38, 38, 0.5);
}
50% {
box-shadow: 0 10px 30px rgba(220, 38, 38, 0.5), 0 0 0 12px rgba(220, 38, 38, 0);
}
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 11. BOTΓN HISTORIAL (FIJO ABAJO DERECHA) */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.version-history-btn-fixed[b-2vak8k6pvl] {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
display: flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
border-radius: 14px;
border: 1.5px solid rgba(255, 255, 255, 0.25);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.95));
color: #ffffff;
font-family: inherit;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
}
.version-history-btn-fixed i[b-2vak8k6pvl] {
font-size: 1rem;
}
.version-history-btn-texto[b-2vak8k6pvl] {
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.3px;
}
.version-history-btn-fixed:hover[b-2vak8k6pvl] {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 14px 38px rgba(37, 99, 235, 0.55);
background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(29, 78, 216, 1));
}
.version-history-btn-fixed:active[b-2vak8k6pvl] {
transform: translateY(-1px) scale(0.99);
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 12. MODAL DE HISTORIAL DE VERSIONES */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.version-modal-overlay[b-2vak8k6pvl] {
position: fixed;
inset: 0;
z-index: 999998;
background: radial-gradient(circle at center, rgba(10, 56, 128, 0.75) 0%, rgba(15, 23, 41, 0.92) 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: consentFadeIn-b-2vak8k6pvl 0.3s ease;
}
.version-modal[b-2vak8k6pvl] {
background: #ffffff;
border-radius: 24px;
max-width: 720px;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 32px 80px rgba(10, 56, 128, 0.5), 0 8px 24px rgba(15, 23, 41, 0.25);
overflow: hidden;
animation: consentSlideUp-b-2vak8k6pvl 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
}
/* HEADER DEL MODAL */
.version-modal-header[b-2vak8k6pvl] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 26px;
background: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #42A5F5 100%);
color: #ffffff;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.version-modal-header[b-2vak8k6pvl]::before {
content: '';
position: absolute;
top: -60%;
right: -10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 65%);
pointer-events: none;
}
.version-modal-header-left[b-2vak8k6pvl] {
display: flex;
align-items: center;
gap: 14px;
position: relative;
z-index: 1;
}
.version-modal-icon[b-2vak8k6pvl] {
width: 52px;
height: 52px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1.5px solid rgba(255, 255, 255, 0.35);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #ffffff;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.version-modal-header-text[b-2vak8k6pvl] {
display: flex;
flex-direction: column;
gap: 2px;
}
.version-modal-title[b-2vak8k6pvl] {
font-size: 1.35rem;
font-weight: 800;
margin: 0;
letter-spacing: -0.3px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.version-modal-subtitle[b-2vak8k6pvl] {
font-size: 0.8rem;
margin: 0;
opacity: 0.9;
font-weight: 500;
}
.version-modal-close[b-2vak8k6pvl] {
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
position: relative;
z-index: 1;
font-family: inherit;
}
.version-modal-close:hover[b-2vak8k6pvl] {
background: rgba(255, 255, 255, 0.32);
transform: rotate(90deg);
border-color: rgba(255, 255, 255, 0.5);
}
/* β BODY DEL MODAL β CON SCROLL VISIBLE Y PROMINENTE */
.version-modal-body[b-2vak8k6pvl] {
padding: 22px 26px;
overflow-y: scroll; /* siempre visible */
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
min-height: 0; /* β CRΓTICO para que flex + overflow funcione */
background: linear-gradient(180deg, #ffffff 0%, #F1F5F9 100%);
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable; /* reserva espacio para el scrollbar */
}
/* β SCROLLBAR VISIBLE Y ATRACTIVA */
.version-modal-body[b-2vak8k6pvl]::-webkit-scrollbar {
width: 14px;
}
.version-modal-body[b-2vak8k6pvl]::-webkit-scrollbar-track {
background: #E2E8F0;
border-radius: 10px;
margin: 10px 0;
}
.version-modal-body[b-2vak8k6pvl]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #1565C0 0%, #42A5F5 100%);
border-radius: 10px;
border: 3px solid #E2E8F0;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
transition: background 0.2s ease;
}
.version-modal-body[b-2vak8k6pvl]::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #0D47A1 0%, #1565C0 100%);
}
/* Firefox */
.version-modal-body[b-2vak8k6pvl] {
scrollbar-width: thin;
scrollbar-color: #1565C0 #E2E8F0;
}
/* β CARD DE VERSIΓN β MΓS GRANDE Y VISIBLE */
.version-card-modal[b-2vak8k6pvl] {
border-radius: 16px;
padding: 0;
color: #ffffff;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
box-shadow: 0 6px 18px rgba(15, 23, 41, 0.18);
flex-shrink: 0;
}
.version-card-modal[b-2vak8k6pvl]::before {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.version-card-modal:hover[b-2vak8k6pvl] {
transform: translateX(8px) scale(1.01);
box-shadow: 0 10px 30px rgba(15, 23, 41, 0.28);
}
.version-card-modal-actual[b-2vak8k6pvl] {
border: 3px solid #fbbf24;
box-shadow: 0 6px 24px rgba(251, 191, 36, 0.5), 0 0 0 1px rgba(251, 191, 36, 0.3);
}
.version-card-modal-expandida[b-2vak8k6pvl] {
box-shadow: 0 12px 34px rgba(15, 23, 41, 0.3);
}
.version-card-modal-header[b-2vak8k6pvl] {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
cursor: pointer;
user-select: none;
transition: background 0.2s ease;
position: relative;
z-index: 1;
min-height: 64px;
}
.version-card-modal-header:hover[b-2vak8k6pvl] {
background: rgba(255, 255, 255, 0.1);
}
/* β TAG DE VERSIΓN β MΓS GRANDE Y VISIBLE */
.version-card-modal-tag[b-2vak8k6pvl] {
font-weight: 800;
font-size: 1.1rem;
background: rgba(255, 255, 255, 0.28);
padding: 6px 16px;
border-radius: 22px;
letter-spacing: 0.4px;
border: 1.5px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.version-card-modal-actual-badge[b-2vak8k6pvl] {
font-size: 0.72rem;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1f2937;
padding: 5px 12px;
border-radius: 20px;
font-weight: 800;
letter-spacing: 0.4px;
box-shadow: 0 3px 10px rgba(251, 191, 36, 0.5);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.version-card-modal-fecha[b-2vak8k6pvl] {
font-size: 0.9rem;
opacity: 1;
margin-left: auto;
font-weight: 700;
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
letter-spacing: 0.3px;
}
.version-card-modal-arrow[b-2vak8k6pvl] {
font-size: 1rem;
opacity: 0.95;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
color: #ffffff;
margin-left: 6px;
}
.version-card-modal-arrow.rotated[b-2vak8k6pvl] {
transform: rotate(180deg);
}
/* BODY EXPANDIBLE */
.version-card-modal-body[b-2vak8k6pvl] {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
position: relative;
z-index: 1;
}
.version-card-modal-body.visible[b-2vak8k6pvl] {
max-height: 340px;
overflow-y: auto;
padding: 8px 22px 20px 22px;
}
.version-card-modal-body[b-2vak8k6pvl]::-webkit-scrollbar {
width: 6px;
}
.version-card-modal-body[b-2vak8k6pvl]::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.12);
border-radius: 4px;
}
.version-card-modal-body[b-2vak8k6pvl]::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.5);
border-radius: 4px;
}
.version-card-modal-body[b-2vak8k6pvl]::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.7);
}
/* β CAMBIOS DEL CHANGELOG β MΓS GRANDES Y LEGIBLES */
.version-card-modal-cambio[b-2vak8k6pvl] {
font-size: 0.88rem;
line-height: 1.6;
padding: 8px 0 8px 20px;
opacity: 1;
position: relative;
font-weight: 600;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.version-card-modal-cambio:last-child[b-2vak8k6pvl] {
border-bottom: none;
}
.version-card-modal-cambio[b-2vak8k6pvl]::before {
content: 'βΈ';
position: absolute;
left: 0;
top: 8px;
opacity: 1;
font-weight: 800;
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
}
/* FOOTER DEL MODAL */
.version-modal-footer[b-2vak8k6pvl] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 26px;
background: #ffffff;
border-top: 1px solid #e5e9f0;
flex-shrink: 0;
flex-wrap: wrap;
}
.version-modal-footer-info[b-2vak8k6pvl] {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: #475569;
font-weight: 600;
}
.version-modal-footer-info i[b-2vak8k6pvl] {
color: #2563eb;
font-size: 1rem;
}
.version-modal-footer-info b[b-2vak8k6pvl] {
color: #1A2236;
font-weight: 800;
}
.version-modal-btn-cerrar[b-2vak8k6pvl] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 24px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%);
color: #ffffff;
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
font-family: inherit;
box-shadow: 0 4px 14px rgba(21, 101, 192, 0.35);
}
.version-modal-btn-cerrar:hover[b-2vak8k6pvl] {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(21, 101, 192, 0.5);
background: linear-gradient(135deg, #0D47A1 0%, #1565C0 100%);
}
.version-modal-btn-cerrar:active[b-2vak8k6pvl] {
transform: translateY(0) scale(0.98);
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 13. MODAL DE CONSENTIMIENTO (mantengo intacto) */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.consent-overlay[b-2vak8k6pvl] {
position: fixed;
inset: 0;
background: radial-gradient(circle at center, rgba(10, 56, 128, 0.75) 0%, rgba(15, 23, 41, 0.9) 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: consentFadeIn-b-2vak8k6pvl 0.35s ease;
}
.consent-modal[b-2vak8k6pvl] {
background: #ffffff;
border-radius: 24px;
max-width: 620px;
width: 100%;
max-height: 92vh;
display: flex;
flex-direction: column;
box-shadow: 0 32px 80px rgba(10, 56, 128, 0.4), 0 8px 24px rgba(15, 23, 41, 0.2);
overflow: hidden;
animation: consentSlideUp-b-2vak8k6pvl 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
}
.consent-header[b-2vak8k6pvl] {
background: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #42A5F5 100%);
padding: 28px 32px 24px;
text-align: center;
color: #ffffff;
position: relative;
overflow: hidden;
}
.consent-header[b-2vak8k6pvl]::before {
content: '';
position: absolute;
top: -60%;
right: -10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 65%);
pointer-events: none;
}
.consent-icon[b-2vak8k6pvl] {
width: 70px;
height: 70px;
margin: 0 auto 14px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
color: #ffffff;
border: 1.5px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
animation: consentIconPulse-b-2vak8k6pvl 2.2s ease-in-out infinite;
}
.consent-title[b-2vak8k6pvl] {
font-size: 1.6rem;
font-weight: 800;
margin: 0 0 6px;
letter-spacing: -0.4px;
position: relative;
z-index: 1;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.consent-subtitle[b-2vak8k6pvl] {
font-size: 0.85rem;
margin: 0;
opacity: 0.9;
font-weight: 500;
position: relative;
z-index: 1;
}
.consent-body[b-2vak8k6pvl] {
padding: 24px 28px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 14px;
background: linear-gradient(180deg, #ffffff 0%, #F8FAFC 100%);
flex: 1;
}
.consent-item[b-2vak8k6pvl] {
display: flex;
gap: 14px;
padding: 16px;
background: #ffffff;
border-radius: 14px;
border: 1.5px solid #E5E9F0;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.consent-item[b-2vak8k6pvl]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #1565C0, #42A5F5);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
.consent-item:hover[b-2vak8k6pvl] {
border-color: #42A5F5;
box-shadow: 0 6px 20px rgba(21, 101, 192, 0.1);
transform: translateX(4px);
}
.consent-item:hover[b-2vak8k6pvl]::before {
transform: scaleY(1);
}
.consent-item-icon[b-2vak8k6pvl] {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
transition: all 0.25s;
}
.consent-item:hover .consent-item-icon[b-2vak8k6pvl] {
transform: scale(1.08) rotate(-5deg);
}
.consent-item-icon-red[b-2vak8k6pvl] {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08));
color: #DC2626;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}
.consent-item-icon-blue[b-2vak8k6pvl] {
background: linear-gradient(135deg, rgba(21, 101, 192, 0.15), rgba(66, 165, 245, 0.08));
color: #1565C0;
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.15);
}
.consent-item-icon-purple[b-2vak8k6pvl] {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08));
color: #8B5CF6;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}
.consent-item-icon-green[b-2vak8k6pvl] {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08));
color: #10B981;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}
.consent-item-content[b-2vak8k6pvl] {
flex: 1;
min-width: 0;
}
.consent-item-title[b-2vak8k6pvl] {
font-size: 0.95rem;
font-weight: 700;
color: #1A2236;
margin: 0 0 4px;
}
.consent-item-desc[b-2vak8k6pvl] {
font-size: 0.8rem;
color: #64748B;
line-height: 1.5;
margin: 0;
}
.consent-item-desc b[b-2vak8k6pvl] {
color: #1565C0;
font-weight: 700;
}
.consent-checkbox-container[b-2vak8k6pvl] {
padding: 18px 28px;
background: linear-gradient(135deg, #F0F7FF 0%, #E3F2FD 100%);
border-top: 1px solid #BBDEFB;
border-bottom: 1px solid #BBDEFB;
}
.consent-checkbox-label[b-2vak8k6pvl] {
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
padding: 12px 16px;
border-radius: 12px;
border: 2px solid transparent;
background: #ffffff;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(21, 101, 192, 0.08);
}
.consent-checkbox-label:hover[b-2vak8k6pvl] {
border-color: #42A5F5;
box-shadow: 0 6px 18px rgba(21, 101, 192, 0.15);
transform: translateY(-1px);
}
.consent-checkbox-label.aceptado[b-2vak8k6pvl] {
border-color: #10B981;
background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.2);
}
.consent-checkbox-input[b-2vak8k6pvl] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.consent-checkbox-custom[b-2vak8k6pvl] {
width: 28px;
height: 28px;
border-radius: 8px;
border: 2.5px solid #CBD5E1;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
flex-shrink: 0;
color: #ffffff;
font-size: 14px;
}
.consent-checkbox-label:hover .consent-checkbox-custom[b-2vak8k6pvl] {
border-color: #42A5F5;
transform: scale(1.05);
}
.consent-checkbox-label.aceptado .consent-checkbox-custom[b-2vak8k6pvl] {
background: linear-gradient(135deg, #10B981, #34D399);
border-color: #10B981;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
transform: scale(1.05);
}
.consent-checkbox-text[b-2vak8k6pvl] {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.consent-checkbox-text b[b-2vak8k6pvl] {
font-size: 0.9rem;
color: #1A2236;
font-weight: 700;
}
.consent-checkbox-label.aceptado .consent-checkbox-text b[b-2vak8k6pvl] {
color: #047857;
}
.consent-checkbox-text small[b-2vak8k6pvl] {
font-size: 0.75rem;
color: #64748B;
font-weight: 500;
}
.consent-footer[b-2vak8k6pvl] {
padding: 18px 28px 22px;
display: flex;
gap: 12px;
background: #ffffff;
}
.consent-btn[b-2vak8k6pvl] {
flex: 1;
padding: 14px 20px;
border-radius: 12px;
border: none;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
}
.consent-btn:disabled[b-2vak8k6pvl] {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
.consent-btn-primary[b-2vak8k6pvl] {
background: linear-gradient(135deg, #1565C0 0%, #42A5F5 100%);
color: #ffffff;
box-shadow: 0 6px 18px rgba(21, 101, 192, 0.35);
flex: 2;
}
.consent-btn-primary:hover:not(:disabled)[b-2vak8k6pvl] {
background: linear-gradient(135deg, #0D47A1 0%, #1565C0 100%);
box-shadow: 0 10px 28px rgba(21, 101, 192, 0.5);
transform: translateY(-2px);
}
.consent-btn-primary:active:not(:disabled)[b-2vak8k6pvl] {
transform: translateY(0) scale(0.98);
}
.consent-btn-secondary[b-2vak8k6pvl] {
background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
color: #475569;
border: 1.5px solid #E5E9F0;
}
.consent-btn-secondary:hover:not(:disabled)[b-2vak8k6pvl] {
background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
color: #1A2236;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15, 23, 41, 0.1);
}
.consent-btn-secondary:active:not(:disabled)[b-2vak8k6pvl] {
transform: translateY(0) scale(0.98);
}
.consent-error-message[b-2vak8k6pvl] {
margin: 0 28px 18px;
padding: 10px 14px;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
border-left: 4px solid #EF4444;
border-radius: 10px;
font-size: 0.8rem;
color: #B91C1C;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
animation: consentErrorShake-b-2vak8k6pvl 0.5s ease;
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 14. KEYFRAMES */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
@keyframes gradientPulse-b-2vak8k6pvl {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
@keyframes floatUp-b-2vak8k6pvl {
0% {
transform: translateY(110vh) rotate(0deg) scale(0.3);
opacity: 0;
}
5% {
opacity: 0.6;
transform: translateY(100vh) rotate(10deg) scale(0.8);
}
15% {
opacity: 0.8;
transform: translateY(80vh) rotate(30deg) scale(1);
}
50% {
opacity: 0.9;
transform: translateY(50vh) rotate(180deg) scale(1.1);
}
85% {
opacity: 0.7;
transform: translateY(20vh) rotate(330deg) scale(1);
}
95% {
opacity: 0.3;
transform: translateY(5vh) rotate(350deg) scale(0.8);
}
100% {
transform: translateY(-10vh) rotate(360deg) scale(0.3);
opacity: 0;
}
}
@keyframes floatBubble-b-2vak8k6pvl {
0% {
transform: translateY(110vh) scale(0.5) rotate(-5deg);
opacity: 0;
}
5% {
opacity: 0.8;
}
15% {
transform: translateY(75vh) scale(1) rotate(0deg);
opacity: 1;
}
50% {
transform: translateY(40vh) scale(1.05) rotate(2deg);
opacity: 1;
}
85% {
transform: translateY(10vh) scale(1) rotate(-1deg);
opacity: 0.8;
}
95% {
opacity: 0.3;
}
100% {
transform: translateY(-10vh) scale(0.7) rotate(5deg);
opacity: 0;
}
}
@keyframes boxFadeIn-b-2vak8k6pvl {
0% {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes headerLine-b-2vak8k6pvl {
0% {
width: 0;
opacity: 0;
}
100% {
width: 50px;
opacity: 1;
}
}
@keyframes iconPulse-b-2vak8k6pvl {
0%, 100% {
transform: scale(1);
box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.35);
}
50% {
transform: scale(1.05);
box-shadow: 0 15px 40px -5px rgba(37, 99, 235, 0.55);
}
}
@keyframes errorShake-b-2vak8k6pvl {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
transform: translateX(5px);
}
}
@keyframes consentFadeIn-b-2vak8k6pvl {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes consentSlideUp-b-2vak8k6pvl {
from {
opacity: 0;
transform: translateY(40px) scale(0.94);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes consentIconPulse-b-2vak8k6pvl {
0%, 100% {
transform: scale(1);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
50% {
transform: scale(1.05);
box-shadow: 0 15px 34px rgba(0, 0, 0, 0.3);
}
}
@keyframes consentErrorShake-b-2vak8k6pvl {
0%, 100% {
transform: translateX(0);
}
20%, 60% {
transform: translateX(-6px);
}
40%, 80% {
transform: translateX(6px);
}
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 15. RESPONSIVE */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
@media (max-width: 1024px) {
.login-box[b-2vak8k6pvl] {
padding: 2rem 2rem;
max-width: 400px;
}
.version-modal[b-2vak8k6pvl] {
max-width: 620px;
}
}
@media (max-width: 768px) {
.login-scroll-wrapper[b-2vak8k6pvl] {
padding: 80px 16px 140px 16px;
align-items: flex-start;
}
.login-box[b-2vak8k6pvl] {
padding: 1.8rem 1.5rem;
max-width: 100%;
margin-top: 20px;
}
.login-titulo[b-2vak8k6pvl] {
font-size: 1.5rem;
}
.login-icon-wrapper[b-2vak8k6pvl] {
width: 55px;
height: 55px;
}
.login-icon-wrapper i[b-2vak8k6pvl] {
font-size: 1.5rem;
}
.login-input[b-2vak8k6pvl] {
padding: 0.7rem 2.5rem 0.7rem 2.5rem;
font-size: 0.9rem;
}
.login-submit-btn[b-2vak8k6pvl] {
padding: 0.8rem 1.2rem;
font-size: 0.95rem;
}
.float-icon[b-2vak8k6pvl] {
display: none;
}
.float-bubble[b-2vak8k6pvl] {
display: none;
}
.version-btn-fixed[b-2vak8k6pvl] {
bottom: 14px;
left: 14px;
padding: 10px 14px;
min-width: auto;
gap: 8px;
}
.version-btn-icon[b-2vak8k6pvl] {
font-size: 1.2rem;
}
.version-btn-titulo[b-2vak8k6pvl] {
font-size: 0.78rem;
}
.version-btn-version[b-2vak8k6pvl] {
font-size: 0.6rem;
}
.version-history-btn-fixed[b-2vak8k6pvl] {
bottom: 14px;
right: 14px;
padding: 10px 14px;
font-size: 0.78rem;
}
.version-history-btn-fixed i[b-2vak8k6pvl] {
font-size: 0.9rem;
}
.version-history-btn-texto[b-2vak8k6pvl] {
font-size: 0.72rem;
}
/* Modal de versiones */
.version-modal[b-2vak8k6pvl] {
max-width: 100%;
max-height: 94vh;
border-radius: 20px;
}
.version-modal-header[b-2vak8k6pvl] {
padding: 18px 20px;
}
.version-modal-icon[b-2vak8k6pvl] {
width: 44px;
height: 44px;
font-size: 20px;
border-radius: 12px;
}
.version-modal-title[b-2vak8k6pvl] {
font-size: 1.1rem;
}
.version-modal-subtitle[b-2vak8k6pvl] {
font-size: 0.72rem;
}
.version-modal-close[b-2vak8k6pvl] {
width: 36px;
height: 36px;
font-size: 15px;
}
.version-modal-body[b-2vak8k6pvl] {
padding: 16px 18px;
gap: 10px;
}
.version-modal-body[b-2vak8k6pvl]::-webkit-scrollbar {
width: 10px;
}
.version-modal-body[b-2vak8k6pvl]::-webkit-scrollbar-thumb {
border: 2px solid #E2E8F0;
}
.version-card-modal-header[b-2vak8k6pvl] {
padding: 14px 16px;
gap: 10px;
min-height: 56px;
}
.version-card-modal-tag[b-2vak8k6pvl] {
font-size: 0.95rem;
padding: 5px 12px;
}
.version-card-modal-actual-badge[b-2vak8k6pvl] {
font-size: 0.65rem;
padding: 4px 10px;
}
.version-card-modal-fecha[b-2vak8k6pvl] {
font-size: 0.78rem;
}
.version-card-modal-cambio[b-2vak8k6pvl] {
font-size: 0.82rem;
padding: 6px 0 6px 16px;
}
.version-modal-footer[b-2vak8k6pvl] {
padding: 14px 18px;
flex-direction: column;
gap: 10px;
}
.version-modal-footer-info[b-2vak8k6pvl] {
font-size: 0.78rem;
}
.version-modal-btn-cerrar[b-2vak8k6pvl] {
width: 100%;
padding: 12px 20px;
font-size: 0.88rem;
}
/* Consentimiento */
.consent-modal[b-2vak8k6pvl] {
max-width: 100%;
max-height: 95vh;
border-radius: 20px;
}
.consent-header[b-2vak8k6pvl] {
padding: 20px 20px 18px;
}
.consent-icon[b-2vak8k6pvl] {
width: 56px;
height: 56px;
font-size: 26px;
border-radius: 16px;
}
.consent-title[b-2vak8k6pvl] {
font-size: 1.25rem;
}
.consent-subtitle[b-2vak8k6pvl] {
font-size: 0.78rem;
}
.consent-body[b-2vak8k6pvl] {
padding: 18px 20px;
gap: 10px;
}
.consent-item[b-2vak8k6pvl] {
padding: 12px;
gap: 12px;
}
.consent-item-icon[b-2vak8k6pvl] {
width: 40px;
height: 40px;
font-size: 18px;
border-radius: 10px;
}
.consent-item-title[b-2vak8k6pvl] {
font-size: 0.85rem;
}
.consent-item-desc[b-2vak8k6pvl] {
font-size: 0.72rem;
}
.consent-checkbox-container[b-2vak8k6pvl] {
padding: 14px 20px;
}
.consent-checkbox-label[b-2vak8k6pvl] {
padding: 10px 12px;
gap: 10px;
}
.consent-checkbox-custom[b-2vak8k6pvl] {
width: 24px;
height: 24px;
}
.consent-checkbox-text b[b-2vak8k6pvl] {
font-size: 0.82rem;
}
.consent-checkbox-text small[b-2vak8k6pvl] {
font-size: 0.7rem;
}
.consent-footer[b-2vak8k6pvl] {
padding: 14px 20px 18px;
flex-direction: column-reverse;
gap: 10px;
}
.consent-btn[b-2vak8k6pvl] {
width: 100%;
padding: 12px 16px;
font-size: 0.85rem;
}
.consent-error-message[b-2vak8k6pvl] {
margin: 0 20px 14px;
font-size: 0.72rem;
}
}
@media (max-width: 480px) {
.login-scroll-wrapper[b-2vak8k6pvl] {
padding: 60px 12px 130px 12px;
}
.login-box[b-2vak8k6pvl] {
padding: 1.5rem 1.1rem;
border-radius: 16px;
margin-top: 10px;
}
.login-titulo[b-2vak8k6pvl] {
font-size: 1.25rem;
}
.login-subtitulo[b-2vak8k6pvl] {
font-size: 0.85rem;
}
.login-icon-wrapper[b-2vak8k6pvl] {
width: 48px;
height: 48px;
}
.login-icon-wrapper i[b-2vak8k6pvl] {
font-size: 1.3rem;
}
.login-field[b-2vak8k6pvl] {
margin-bottom: 1.1rem;
}
.login-field-label[b-2vak8k6pvl] {
font-size: 0.72rem;
}
.login-input[b-2vak8k6pvl] {
padding: 0.65rem 2.2rem 0.65rem 2.2rem;
font-size: 0.88rem;
}
.login-input-icon[b-2vak8k6pvl] {
font-size: 0.82rem;
left: 0.85rem;
}
.login-password-toggle[b-2vak8k6pvl] {
right: 0.75rem;
font-size: 0.88rem;
}
.login-submit-btn[b-2vak8k6pvl] {
padding: 0.75rem 1rem;
font-size: 0.9rem;
min-height: 46px;
}
.login-error[b-2vak8k6pvl] {
font-size: 0.75rem;
padding: 0.5rem;
}
.login-divider[b-2vak8k6pvl] {
margin: 1.2rem 0 0.8rem;
font-size: 0.72rem;
}
.login-copyright[b-2vak8k6pvl] {
font-size: 0.72rem;
}
.version-btn-fixed[b-2vak8k6pvl] {
bottom: 10px;
left: 10px;
padding: 9px 12px;
border-radius: 12px;
gap: 6px;
}
.version-btn-icon[b-2vak8k6pvl] {
font-size: 1.05rem;
}
.version-btn-titulo[b-2vak8k6pvl] {
font-size: 0.72rem;
}
.version-btn-version[b-2vak8k6pvl] {
font-size: 0.55rem;
}
.version-history-btn-fixed[b-2vak8k6pvl] {
bottom: 10px;
right: 10px;
padding: 9px 12px;
border-radius: 12px;
}
.version-history-btn-fixed i[b-2vak8k6pvl] {
font-size: 0.82rem;
}
.version-history-btn-texto[b-2vak8k6pvl] {
font-size: 0.66rem;
}
/* Modal compacto */
.version-modal-header[b-2vak8k6pvl] {
padding: 14px 16px;
}
.version-modal-icon[b-2vak8k6pvl] {
width: 38px;
height: 38px;
font-size: 17px;
}
.version-modal-title[b-2vak8k6pvl] {
font-size: 1rem;
}
.version-modal-subtitle[b-2vak8k6pvl] {
font-size: 0.66rem;
}
.version-modal-close[b-2vak8k6pvl] {
width: 32px;
height: 32px;
font-size: 13px;
}
.version-modal-body[b-2vak8k6pvl] {
padding: 12px 14px;
gap: 8px;
}
.version-card-modal-header[b-2vak8k6pvl] {
padding: 12px 14px;
gap: 8px;
min-height: 50px;
}
.version-card-modal-tag[b-2vak8k6pvl] {
font-size: 0.85rem;
padding: 4px 10px;
}
.version-card-modal-fecha[b-2vak8k6pvl] {
font-size: 0.72rem;
}
.version-card-modal-cambio[b-2vak8k6pvl] {
font-size: 0.76rem;
padding: 5px 0 5px 14px;
}
.version-modal-footer[b-2vak8k6pvl] {
padding: 12px 14px;
}
.version-modal-footer-info[b-2vak8k6pvl] {
font-size: 0.72rem;
}
.version-modal-btn-cerrar[b-2vak8k6pvl] {
font-size: 0.82rem;
padding: 10px 16px;
}
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
.login-scroll-wrapper[b-2vak8k6pvl] {
padding: 40px 20px 90px 20px;
align-items: flex-start;
}
.login-box[b-2vak8k6pvl] {
padding: 1.2rem 1.5rem;
margin-top: 10px;
}
.login-icon-wrapper[b-2vak8k6pvl] {
width: 42px;
height: 42px;
margin-bottom: 0.5rem;
}
.login-icon-wrapper i[b-2vak8k6pvl] {
font-size: 1.1rem;
}
.login-titulo[b-2vak8k6pvl] {
font-size: 1.1rem;
}
.login-box-header[b-2vak8k6pvl] {
margin-bottom: 1rem;
}
.login-field[b-2vak8k6pvl] {
margin-bottom: 0.9rem;
}
.version-btn-fixed[b-2vak8k6pvl] {
bottom: 8px;
left: 8px;
padding: 8px 12px;
}
.version-history-btn-fixed[b-2vak8k6pvl] {
bottom: 8px;
right: 8px;
padding: 8px 12px;
}
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 16. ACCESIBILIDAD */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.login-input:focus-visible[b-2vak8k6pvl],
.login-submit-btn:focus-visible[b-2vak8k6pvl],
.version-btn-fixed:focus-visible[b-2vak8k6pvl],
.version-history-btn-fixed:focus-visible[b-2vak8k6pvl],
.version-modal-close:focus-visible[b-2vak8k6pvl],
.version-modal-btn-cerrar:focus-visible[b-2vak8k6pvl] {
outline: 2px solid var(--secondary-color);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*[b-2vak8k6pvl],
*[b-2vak8k6pvl]::before,
*[b-2vak8k6pvl]::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 17. SELECTION */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
[b-2vak8k6pvl]::selection {
background: var(--secondary-color);
color: white;
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* 18. SCROLLBARS GLOBALES */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
[b-2vak8k6pvl]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
[b-2vak8k6pvl]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
[b-2vak8k6pvl]::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #94a3b8, #64748b);
border-radius: 4px;
}
[b-2vak8k6pvl]::-webkit-scrollbar-thumb:hover {
background: #475569;
}
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* FIN DEL CSS */
/* Codeado por π¦Ύ Hefesto 13.1 Pro Max | Sr. Ignacio */
/* ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* /Pages/Logistica/Operativa.razor.rz.scp.css */
/* ============================================================
π¦Ύ HEFESTO 13.1 PRO MAX β OPERATIVA v5 (FULL DOPAMINA)
============================================================ */
/* ===== 01. VARIABLES (compartidas page + overlay modal) ===== */
.op-page[b-d867pr3u6s],
.op-modal-overlay[b-d867pr3u6s] {
--op-primary: #1565C0;
--op-primary-dark: #0D47A1;
--op-primary-darker: #0A3880;
--op-primary-light: #42A5F5;
--op-primary-lighter: #90CAF9;
--op-primary-soft: rgba(21, 101, 192, 0.08);
--op-primary-soft-2: rgba(21, 101, 192, 0.15);
--op-success: #10B981;
--op-success-dark: #047857;
--op-warning: #F59E0B;
--op-warning-dark: #B45309;
--op-danger: #EF4444;
--op-danger-dark: #B91C1C;
--op-violet: #8B5CF6;
--op-violet-dark: #7C3AED;
--op-pink: #EC4899;
--op-pink-dark: #BE185D;
--op-cyan: #06B6D4;
--op-cyan-dark: #0E7490;
--op-bg: #F5F7FA;
--op-card: #FFFFFF;
--op-border: #E5E9F0;
--op-border-soft: #EEF2F7;
--op-text: #1A2236;
--op-text-soft: #64748B;
--op-text-muted: #94A3B8;
--op-shadow-sm: 0 2px 6px rgba(15, 23, 41, 0.06);
--op-shadow: 0 6px 18px rgba(15, 23, 41, 0.08);
--op-shadow-blue: 0 10px 30px rgba(21, 101, 192, 0.28);
--op-shadow-blue-strong: 0 14px 38px rgba(21, 101, 192, 0.4);
--op-radius-sm: 8px;
--op-radius: 14px;
--op-radius-lg: 20px;
--op-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.op-page[b-d867pr3u6s] {
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
color: var(--op-text);
padding: 20px;
background: radial-gradient(circle at 0% 0%, rgba(21, 101, 192, 0.05) 0%, transparent 40%), radial-gradient(circle at 100% 100%, rgba(66, 165, 245, 0.04) 0%, transparent 40%), var(--op-bg);
min-height: 100vh;
box-sizing: border-box;
}
/* ===== 02. TOOLBAR (AZUL DEGRADADO β FORZADO) ===== */
.op-toolbar[b-d867pr3u6s] {
background: linear-gradient(135deg, #0A3880 0%, #1565C0 50%, #42A5F5 100%) !important;
border-radius: var(--op-radius-lg);
padding: 16px 22px;
margin-bottom: 18px;
box-shadow: var(--op-shadow-blue-strong);
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
}
.op-toolbar[b-d867pr3u6s]::before {
content: '';
position: absolute;
top: -40%;
right: -5%;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 65%);
pointer-events: none;
}
.op-toolbar-row[b-d867pr3u6s] {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.op-toolbar-row-space[b-d867pr3u6s] {
justify-content: space-between;
}
.op-toolbar-grupo[b-d867pr3u6s] {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.op-toolbar-grupo-wrap[b-d867pr3u6s] {
flex-wrap: wrap;
}
.op-cronometro-grupo[b-d867pr3u6s] {
gap: 6px;
}
/* ===== 03. BOTONES TOOLBAR ===== */
.op-btn[b-d867pr3u6s] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
border-radius: 10px;
border: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: var(--op-transition);
font-family: inherit;
white-space: nowrap;
letter-spacing: 0.2px;
}
.op-btn:disabled[b-d867pr3u6s] {
opacity: 0.5;
cursor: not-allowed;
}
.op-btn-crear[b-d867pr3u6s],
.op-btn-dia[b-d867pr3u6s],
.op-btn-importar[b-d867pr3u6s],
.op-btn-exportar[b-d867pr3u6s],
.op-btn-imprimir[b-d867pr3u6s] {
background: rgba(255, 255, 255, 0.18);
color: #FFFFFF;
border: 1.5px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(8px);
}
.op-btn-crear:hover[b-d867pr3u6s],
.op-btn-dia:hover[b-d867pr3u6s],
.op-btn-importar:hover[b-d867pr3u6s],
.op-btn-exportar:hover[b-d867pr3u6s],
.op-btn-imprimir:hover[b-d867pr3u6s] {
background: rgba(255, 255, 255, 0.32);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.op-btn-vista[b-d867pr3u6s] {
background: rgba(139, 92, 246, 0.4);
color: #FFFFFF;
border: 1.5px solid rgba(139, 92, 246, 0.75);
}
.op-btn-vista:hover[b-d867pr3u6s] {
background: rgba(139, 92, 246, 0.6);
border-color: rgba(139, 92, 246, 1);
transform: translateY(-2px);
}
/* ===== 04. CHECKBOXES ===== */
.op-check[b-d867pr3u6s] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.12);
border-radius: 8px;
color: #FFFFFF;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: var(--op-transition);
user-select: none;
border: 1.5px solid transparent;
}
.op-check:hover[b-d867pr3u6s] {
background: rgba(255, 255, 255, 0.22);
}
.op-check.active[b-d867pr3u6s] {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}
.op-check input[type="checkbox"][b-d867pr3u6s] {
display: none;
}
.op-checkmark[b-d867pr3u6s] {
width: 16px;
height: 16px;
border-radius: 4px;
border: 2px solid rgba(255, 255, 255, 0.5);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: var(--op-transition);
position: relative;
flex-shrink: 0;
}
.op-checkmark[b-d867pr3u6s]::after {
content: 'β';
font-size: 10px;
font-weight: 800;
color: #FFFFFF;
opacity: 0;
transform: scale(0.5);
transition: var(--op-transition);
}
.op-check input[type="checkbox"]:checked + .op-checkmark[b-d867pr3u6s] {
background: #FFFFFF;
border-color: #FFFFFF;
}
.op-check input[type="checkbox"]:checked + .op-checkmark[b-d867pr3u6s]::after {
color: var(--op-primary);
opacity: 1;
transform: scale(1);
}
.op-check-text[b-d867pr3u6s] {
font-size: 12px;
white-space: nowrap;
}
.op-check-anuladas[b-d867pr3u6s] {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.4);
}
.op-check-anuladas:hover[b-d867pr3u6s] {
background: rgba(239, 68, 68, 0.35);
}
.op-check-badge[b-d867pr3u6s] {
background: #FFFFFF;
color: var(--op-danger);
font-size: 10px;
font-weight: 800;
padding: 1px 7px;
border-radius: 20px;
min-width: 18px;
text-align: center;
}
.op-check-dark[b-d867pr3u6s] {
background: #F1F5F9;
color: var(--op-text);
border: 1.5px solid var(--op-border);
}
.op-check-dark:hover[b-d867pr3u6s] {
background: #E2E8F0;
}
.op-checkmark-dark[b-d867pr3u6s] {
border-color: var(--op-text-muted);
}
.op-check-dark input[type="checkbox"]:checked + .op-checkmark-dark[b-d867pr3u6s] {
background: var(--op-primary);
border-color: var(--op-primary);
}
.op-check-dark input[type="checkbox"]:checked + .op-checkmark-dark[b-d867pr3u6s]::after {
color: #FFFFFF;
}
.op-check-text-dark[b-d867pr3u6s] {
color: var(--op-text);
}
/* ===== 05. CRONΓMETRO + MINI BOTONES ===== */
.op-btn-play[b-d867pr3u6s],
.op-btn-reset[b-d867pr3u6s],
.op-btn-refresh[b-d867pr3u6s] {
width: 42px;
height: 42px;
border-radius: 12px;
border: 1.5px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.15);
color: #FFFFFF;
cursor: pointer;
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--op-transition);
}
.op-btn-play:hover[b-d867pr3u6s],
.op-btn-reset:hover[b-d867pr3u6s],
.op-btn-refresh:hover[b-d867pr3u6s] {
background: rgba(255, 255, 255, 0.32);
transform: translateY(-2px) scale(1.05);
}
.op-btn-play.activo[b-d867pr3u6s] {
background: rgba(16, 185, 129, 0.5);
border-color: rgba(16, 185, 129, 0.8);
animation: op-pulse-b-d867pr3u6s 1.5s ease-in-out infinite;
}
.op-mini-btn[b-d867pr3u6s] {
width: 36px;
height: 36px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.15);
border: 1.5px solid rgba(255, 255, 255, 0.28);
color: #FFFFFF;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: var(--op-transition);
}
.op-mini-btn:hover[b-d867pr3u6s] {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px) scale(1.05);
}
.op-mini-btn.activo[b-d867pr3u6s] {
background: rgba(139, 92, 246, 0.5);
border-color: rgba(139, 92, 246, 0.9);
}
.op-cronometro[b-d867pr3u6s] {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 18px;
font-weight: 800;
color: #FFFFFF;
min-width: 72px;
text-align: center;
padding: 8px 14px;
background: rgba(0, 0, 0, 0.18);
border-radius: 10px;
border: 1.5px solid rgba(255, 255, 255, 0.2);
font-variant-numeric: tabular-nums;
letter-spacing: 1px;
}
.op-cronometro.alerta[b-d867pr3u6s] {
color: #FCA5A5;
border-color: rgba(239, 68, 68, 0.6);
animation: op-crono-pulse-b-d867pr3u6s 1s ease-in-out infinite;
}
@keyframes op-crono-pulse-b-d867pr3u6s {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.06);
}
}
@keyframes op-pulse-b-d867pr3u6s {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
/* ===== 06. BOTONES ALERTAS / ESTADΓSTICAS / COLABS ===== */
.op-btn-alertas[b-d867pr3u6s],
.op-btn-estadisticas[b-d867pr3u6s],
.op-btn-colabs[b-d867pr3u6s] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s;
color: #FFFFFF;
font-family: inherit;
position: relative;
letter-spacing: 0.2px;
}
.op-btn-colabs[b-d867pr3u6s] {
background: rgba(139, 92, 246, 0.4);
border: 1.5px solid rgba(139, 92, 246, 0.75);
}
.op-btn-colabs:hover[b-d867pr3u6s] {
background: rgba(139, 92, 246, 0.62);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}
.op-btn-alertas[b-d867pr3u6s] {
background: rgba(239, 68, 68, 0.28);
border: 1.5px solid rgba(239, 68, 68, 0.55);
}
.op-btn-alertas:hover[b-d867pr3u6s] {
background: rgba(239, 68, 68, 0.5);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}
.op-btn-estadisticas[b-d867pr3u6s] {
background: rgba(16, 185, 129, 0.28);
border: 1.5px solid rgba(16, 185, 129, 0.55);
}
.op-btn-estadisticas:hover[b-d867pr3u6s] {
background: rgba(16, 185, 129, 0.5);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}
.op-btn-alertas-badge[b-d867pr3u6s] {
background: #FFFFFF;
color: #EF4444;
font-size: 10.5px;
font-weight: 800;
padding: 2px 8px;
border-radius: 20px;
min-width: 20px;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.op-btn-alertas.sirena[b-d867pr3u6s] {
animation: op-sirena-b-d867pr3u6s 1.2s infinite ease-in-out;
}
@keyframes op-sirena-b-d867pr3u6s {
0%, 49% {
background: #EF4444;
border-color: #FCA5A5;
box-shadow: 0 0 20px rgba(239, 68, 68, 0.85), 0 0 40px rgba(239, 68, 68, 0.4);
}
50%, 100% {
background: #3B82F6;
border-color: #93C5FD;
box-shadow: 0 0 20px rgba(59, 130, 246, 0.85), 0 0 40px rgba(59, 130, 246, 0.4);
}
}
/* ===== 07. FILTROS ===== */
.op-filtros[b-d867pr3u6s] {
background: var(--op-card);
border-radius: var(--op-radius);
padding: 18px 22px;
box-shadow: var(--op-shadow);
border: 1px solid var(--op-border-soft);
margin-bottom: 18px;
}
.op-filtros-grid[b-d867pr3u6s] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
align-items: end;
}
.op-campo[b-d867pr3u6s] {
display: flex;
flex-direction: column;
gap: 6px;
}
.op-campo-acciones[b-d867pr3u6s] {
display: flex;
gap: 8px;
align-items: flex-end;
justify-content: flex-end;
flex-direction: row;
}
.op-label[b-d867pr3u6s] {
font-size: 11px;
font-weight: 700;
color: var(--op-text-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.op-input[b-d867pr3u6s],
.op-select[b-d867pr3u6s] {
width: 100%;
padding: 10px 14px;
border-radius: 10px;
border: 1.5px solid var(--op-border);
font-size: 13px;
font-family: inherit;
color: var(--op-text);
background: #FFFFFF;
transition: var(--op-transition);
outline: none;
box-sizing: border-box;
}
.op-input:focus[b-d867pr3u6s],
.op-select:focus[b-d867pr3u6s] {
border-color: var(--op-primary);
box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.12);
}
.op-fecha-wrapper[b-d867pr3u6s] {
display: flex;
gap: 4px;
align-items: stretch;
}
.op-fecha-wrapper .op-input[b-d867pr3u6s] {
flex: 1;
}
.op-flechas[b-d867pr3u6s] {
display: flex;
flex-direction: column;
gap: 2px;
}
.op-flecha[b-d867pr3u6s] {
background: var(--op-primary-soft);
border: 1px solid var(--op-border);
border-radius: 5px;
width: 24px;
height: 17px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 9px;
color: var(--op-primary);
transition: var(--op-transition);
padding: 0;
}
.op-flecha:hover[b-d867pr3u6s] {
background: var(--op-primary-soft-2);
border-color: var(--op-primary);
}
.op-btn-aplicar[b-d867pr3u6s],
.op-btn-limpiar[b-d867pr3u6s] {
padding: 11px 18px;
border-radius: 10px;
border: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: var(--op-transition);
display: inline-flex;
align-items: center;
gap: 7px;
font-family: inherit;
white-space: nowrap;
}
.op-btn-aplicar[b-d867pr3u6s] {
background: linear-gradient(135deg, var(--op-primary), var(--op-primary-light));
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}
.op-btn-aplicar:hover[b-d867pr3u6s] {
transform: translateY(-2px);
box-shadow: var(--op-shadow-blue);
}
.op-btn-limpiar[b-d867pr3u6s] {
background: #F1F5F9;
color: var(--op-text-soft);
border: 1.5px solid var(--op-border);
}
.op-btn-limpiar:hover[b-d867pr3u6s] {
background: #E2E8F0;
transform: translateY(-2px);
}
/* ===== 08. LISTA CONTENEDOR ===== */
.op-lista[b-d867pr3u6s] {
background: var(--op-card);
border-radius: var(--op-radius);
box-shadow: var(--op-shadow);
border: 1px solid var(--op-border-soft);
overflow: hidden;
margin-bottom: 18px;
}
/* ===== 09. LOADING / ERROR / EMPTY ===== */
.op-loading[b-d867pr3u6s] {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 20px;
gap: 16px;
}
.op-spinner[b-d867pr3u6s] {
width: 44px;
height: 44px;
border: 4px solid #E2E8F0;
border-top: 4px solid var(--op-primary);
border-radius: 50%;
animation: op-spin-b-d867pr3u6s 0.8s linear infinite;
}
@keyframes op-spin-b-d867pr3u6s {
to {
transform: rotate(360deg);
}
}
.op-loading-text[b-d867pr3u6s] {
font-size: 14px;
color: var(--op-text-soft);
font-weight: 500;
}
.op-error-box[b-d867pr3u6s] {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 22px;
margin: 20px;
background: #FEF2F2;
color: #991B1B;
border-radius: 12px;
border: 1px solid #FECACA;
}
.op-error-icon[b-d867pr3u6s] {
font-size: 18px;
}
.op-error-text[b-d867pr3u6s] {
font-size: 13px;
font-weight: 600;
}
.op-empty[b-d867pr3u6s] {
text-align: center;
padding: 60px 20px;
}
.op-empty-icon[b-d867pr3u6s] {
font-size: 52px;
color: var(--op-text-muted);
margin-bottom: 12px;
display: block;
opacity: 0.6;
}
.op-empty-title[b-d867pr3u6s] {
font-size: 18px;
font-weight: 700;
color: var(--op-text);
margin: 0 0 4px;
}
.op-empty-text[b-d867pr3u6s] {
font-size: 14px;
color: var(--op-text-muted);
margin: 0;
}
/* ===== 10. GRUPOS ===== */
.op-grupos[b-d867pr3u6s] {
padding: 8px 0;
}
.op-grupo-fecha[b-d867pr3u6s] {
margin-bottom: 4px;
}
.op-grupo-cliente[b-d867pr3u6s],
.op-grupo-sector[b-d867pr3u6s],
.op-grupo-subsector[b-d867pr3u6s] {
margin-left: 24px;
}
.op-grupo-content[b-d867pr3u6s] {
animation: op-slide-down-b-d867pr3u6s 0.25s ease;
padding-left: 8px;
}
@keyframes op-slide-down-b-d867pr3u6s {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.op-grupo-head[b-d867pr3u6s] {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
margin: 6px 12px;
border-radius: 14px;
cursor: pointer;
user-select: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.op-grupo-head:active[b-d867pr3u6s] {
transform: scale(0.99);
}
.op-grupo-head-fecha[b-d867pr3u6s] {
background: linear-gradient(120deg, #E3F2FD 0%, #BBDEFB 60%, #90CAF9 100%);
border: 1px solid rgba(21, 101, 192, 0.25);
box-shadow: 0 4px 14px rgba(21, 101, 192, 0.12);
}
.op-grupo-head-fecha:hover[b-d867pr3u6s] {
box-shadow: 0 8px 24px rgba(21, 101, 192, 0.22);
transform: translateY(-1px);
}
.op-grupo-head-cliente[b-d867pr3u6s] {
background: linear-gradient(120deg, #F3E5F5 0%, #E1BEE7 60%, #CE93D8 100%);
border: 1px solid rgba(139, 92, 246, 0.25);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.10);
}
.op-grupo-head-cliente:hover[b-d867pr3u6s] {
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
transform: translateY(-1px);
}
.op-grupo-head-sector[b-d867pr3u6s] {
background: linear-gradient(120deg, #FFF3E0 0%, #FFE0B2 60%, #FFCC80 100%);
border: 1px solid rgba(245, 158, 11, 0.28);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.10);
}
.op-grupo-head-sector:hover[b-d867pr3u6s] {
box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2);
transform: translateY(-1px);
}
.op-grupo-head-subsector[b-d867pr3u6s] {
background: linear-gradient(120deg, #E8F5E9 0%, #C8E6C9 60%, #A5D6A7 100%);
border: 1px solid rgba(16, 185, 129, 0.28);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.10);
}
.op-grupo-head-subsector:hover[b-d867pr3u6s] {
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
transform: translateY(-1px);
}
.op-grupo-icon-wrap[b-d867pr3u6s] {
width: 38px;
height: 38px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 15px;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.op-grupo-icon-fecha[b-d867pr3u6s] {
background: linear-gradient(135deg, #1565C0, #42A5F5);
}
.op-grupo-icon-cliente[b-d867pr3u6s] {
background: linear-gradient(135deg, #7C3AED, #A78BFA);
}
.op-grupo-icon-sector[b-d867pr3u6s] {
background: linear-gradient(135deg, #D97706, #FBBF24);
}
.op-grupo-icon-subsector[b-d867pr3u6s] {
background: linear-gradient(135deg, #047857, #34D399);
}
.op-grupo-texto[b-d867pr3u6s] {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.op-grupo-titulo[b-d867pr3u6s] {
font-size: 14px;
font-weight: 800;
color: var(--op-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
letter-spacing: 0.2px;
}
.op-grupo-titulo-warn[b-d867pr3u6s] {
color: #B91C1C;
font-style: italic;
text-transform: none;
}
.op-grupo-sub[b-d867pr3u6s] {
font-size: 10.5px;
font-weight: 700;
color: rgba(15, 23, 41, 0.5);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.op-grupo-badge[b-d867pr3u6s] {
font-size: 11px;
font-weight: 800;
padding: 4px 12px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.85);
color: var(--op-primary-dark);
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
letter-spacing: 0.3px;
}
.op-grupo-caret[b-d867pr3u6s] {
font-size: 12px;
color: rgba(15, 23, 41, 0.5);
transition: transform 0.2s;
}
/* ===== 11. AVATARES ===== */
.op-avatar[b-d867pr3u6s] {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--avatar-color, #FDE047);
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-weight: 800;
font-size: 14px;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 -2px 6px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.25);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
letter-spacing: 0.3px;
}
.op-avatar-lg[b-d867pr3u6s] {
width: 56px;
height: 56px;
font-size: 17px;
}
.op-avatar-iniciales[b-d867pr3u6s] {
line-height: 1;
}
/* ===== 12. PILLS ===== */
.op-pill[b-d867pr3u6s] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2px;
transition: all 0.2s;
white-space: nowrap;
}
.op-pill i[b-d867pr3u6s] {
font-size: 11px;
opacity: 0.85;
}
.op-pill-hora[b-d867pr3u6s] {
background: rgba(21, 101, 192, 0.10);
color: var(--op-primary-dark);
border: 1px solid rgba(21, 101, 192, 0.20);
}
.op-pill-hora:hover[b-d867pr3u6s] {
background: rgba(21, 101, 192, 0.18);
}
.op-pill-vehiculo[b-d867pr3u6s] {
background: rgba(139, 92, 246, 0.10);
color: var(--op-violet-dark);
border: 1px solid rgba(139, 92, 246, 0.20);
}
.op-pill-vehiculo:hover[b-d867pr3u6s] {
background: rgba(139, 92, 246, 0.18);
}
.op-pill-emoji[b-d867pr3u6s] {
font-size: 14px;
line-height: 1;
}
.op-colab-pill[b-d867pr3u6s] {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
background: linear-gradient(135deg, rgba(21, 101, 192, 0.12), rgba(66, 165, 245, 0.15));
color: var(--op-primary-dark);
border: 1px solid rgba(21, 101, 192, 0.22);
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 0.2px;
}
.op-marco-ok[b-d867pr3u6s],
.op-marco-no[b-d867pr3u6s] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
border-radius: 20px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.3px;
white-space: nowrap;
}
.op-marco-ok[b-d867pr3u6s] {
background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
color: #166534;
border: 1px solid rgba(16, 185, 129, 0.35);
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}
.op-marco-no[b-d867pr3u6s] {
background: linear-gradient(135deg, #FEE2E2, #FECACA);
color: #991B1B;
border: 1px solid rgba(239, 68, 68, 0.35);
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15);
}
.op-tag-urgente[b-d867pr3u6s] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.4px;
background: linear-gradient(135deg, #EF4444, #F97316);
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
animation: op-tag-pulse-b-d867pr3u6s 1.8s ease-in-out infinite;
}
@keyframes op-tag-pulse-b-d867pr3u6s {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
50% {
transform: scale(1.06);
box-shadow: 0 4px 18px rgba(239, 68, 68, 0.65);
}
}
/* ===== 13. MODO LISTA β BURBUJAS (CLICKABLE) ===== */
.op-burbujas[b-d867pr3u6s] {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 20px 14px 44px;
}
.op-burbuja[b-d867pr3u6s] {
display: grid;
grid-template-columns: auto 1fr auto auto auto;
gap: 16px;
align-items: center;
padding: 14px 20px;
background: linear-gradient(120deg, #FFFFFF 0%, #FAFCFF 100%);
border-radius: 18px;
border: 1px solid var(--op-border-soft);
box-shadow: 0 4px 14px rgba(15, 23, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
cursor: pointer;
}
.op-burbuja[b-d867pr3u6s]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--op-primary) 0%, var(--op-primary-light) 100%);
transition: width 0.3s;
}
.op-burbuja:hover[b-d867pr3u6s] {
transform: translateX(6px);
border-color: var(--op-primary-lighter);
box-shadow: 0 12px 32px rgba(21, 101, 192, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.op-burbuja:hover[b-d867pr3u6s]::before {
width: 6px;
}
.op-burbuja.urgente[b-d867pr3u6s] {
background: linear-gradient(120deg, #FFF7F7 0%, #FFFFFF 100%);
border-color: rgba(239, 68, 68, 0.3);
}
.op-burbuja.urgente[b-d867pr3u6s]::before {
background: linear-gradient(180deg, #EF4444 0%, #F97316 100%);
animation: op-fila-urgente-b-d867pr3u6s 2s ease-in-out infinite;
}
@keyframes op-fila-urgente-b-d867pr3u6s {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.op-burbuja-main[b-d867pr3u6s] {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.op-burbuja-cliente[b-d867pr3u6s] {
font-size: 14.5px;
font-weight: 800;
color: var(--op-text);
letter-spacing: 0.1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-burbuja-lugar[b-d867pr3u6s] {
display: flex;
gap: 6px;
align-items: center;
font-size: 12px;
font-weight: 600;
color: var(--op-text-soft);
}
.op-burbuja-sep[b-d867pr3u6s] {
color: var(--op-text-muted);
}
.op-burbuja-pills[b-d867pr3u6s] {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.op-burbuja-colab[b-d867pr3u6s] {
display: flex;
gap: 8px;
align-items: center;
padding-left: 16px;
border-left: 1px dashed var(--op-border);
}
.op-burbuja-acciones[b-d867pr3u6s] {
display: flex;
gap: 4px;
align-items: center;
padding-left: 12px;
border-left: 1px dashed var(--op-border);
}
/* ===== 14. MODO MOSAICO β CARDS ===== */
.op-mosaico-grid[b-d867pr3u6s] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 14px;
padding: 12px 20px 16px 44px;
}
.op-mosaico-card[b-d867pr3u6s] {
background: linear-gradient(160deg, #FFFFFF 0%, #FAFCFF 100%);
border-radius: 18px;
padding: 16px 18px;
border: 1px solid var(--op-border-soft);
box-shadow: 0 4px 14px rgba(15, 23, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
gap: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
cursor: pointer;
}
.op-mosaico-card[b-d867pr3u6s]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--op-primary) 0%, var(--op-primary-light) 100%);
transition: width 0.3s;
}
.op-mosaico-card:hover[b-d867pr3u6s] {
transform: translateY(-6px);
border-color: var(--op-primary-lighter);
box-shadow: 0 18px 40px rgba(21, 101, 192, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.op-mosaico-card:hover[b-d867pr3u6s]::before {
width: 6px;
}
.op-mosaico-card.urgente[b-d867pr3u6s] {
background: linear-gradient(160deg, #FFF7F7 0%, #FFFFFF 100%);
border-color: rgba(239, 68, 68, 0.3);
}
.op-mosaico-card.urgente[b-d867pr3u6s]::before {
background: linear-gradient(180deg, #EF4444 0%, #F97316 100%);
animation: op-fila-urgente-b-d867pr3u6s 2s ease-in-out infinite;
}
.op-mosaico-top[b-d867pr3u6s] {
display: flex;
gap: 12px;
align-items: center;
}
.op-mosaico-ubi[b-d867pr3u6s] {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.op-mosaico-cliente[b-d867pr3u6s] {
font-size: 14.5px;
font-weight: 800;
color: var(--op-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-mosaico-lugar[b-d867pr3u6s] {
font-size: 12px;
font-weight: 600;
color: var(--op-text-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-mosaico-pills[b-d867pr3u6s] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.op-mosaico-footer[b-d867pr3u6s] {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
padding-top: 10px;
border-top: 1px dashed var(--op-border);
}
.op-mosaico-marcas[b-d867pr3u6s] {
font-size: 10.5px;
color: var(--op-text-muted);
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 4px 10px;
background: var(--op-primary-soft);
border-radius: 8px;
}
.op-mosaico-acciones[b-d867pr3u6s] {
display: flex;
justify-content: flex-end;
gap: 4px;
padding-top: 8px;
}
/* ===== 15. BOTONES DE ACCIΓN ===== */
.op-acciones[b-d867pr3u6s] {
display: flex;
gap: 6px;
justify-content: flex-end;
align-items: center;
}
.op-page[b-d867pr3u6s] .op-accion {
width: 36px;
height: 36px;
border-radius: 11px;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 13.5px;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
flex-shrink: 0;
position: relative;
overflow: hidden;
isolation: isolate;
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14), inset 0 -2px 6px rgba(0, 0, 0, 0.12), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}
.op-page[b-d867pr3u6s] .op-accion i {
position: relative;
z-index: 2;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.op-page[b-d867pr3u6s] .op-accion::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
transform: translateX(-120%);
transition: transform 0.6s ease;
z-index: 1;
}
.op-page[b-d867pr3u6s] .op-accion:hover::before {
transform: translateX(120%);
}
.op-page[b-d867pr3u6s] .op-accion:hover {
transform: translateY(-4px) scale(1.12);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24), 0 0 0 4px rgba(255, 255, 255, 0.4), inset 0 -2px 6px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.35);
}
.op-page[b-d867pr3u6s] .op-accion:hover i {
transform: scale(1.15) rotate(-4deg);
}
.op-page[b-d867pr3u6s] .op-accion:active {
transform: translateY(-1px) scale(0.96);
transition: all 0.1s ease;
}
.op-page[b-d867pr3u6s] .op-accion-editar {
background: #2563EB;
background-image: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #60A5FA 100%);
}
.op-page[b-d867pr3u6s] .op-accion-editar:hover {
background-image: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #3B82F6 100%);
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.5), 0 0 0 4px rgba(59, 130, 246, 0.25), 0 0 22px rgba(59, 130, 246, 0.6);
}
.op-page[b-d867pr3u6s] .op-accion-editar:hover i {
animation: op-icon-wiggle-b-d867pr3u6s 0.5s ease;
}
.op-page[b-d867pr3u6s] .op-accion-anular {
background: #D97706;
background-image: linear-gradient(135deg, #D97706 0%, #F59E0B 50%, #FBBF24 100%);
}
.op-page[b-d867pr3u6s] .op-accion-anular:hover {
background-image: linear-gradient(135deg, #B45309 0%, #D97706 50%, #F59E0B 100%);
box-shadow: 0 12px 24px rgba(217, 119, 6, 0.5), 0 0 0 4px rgba(245, 158, 11, 0.25), 0 0 22px rgba(245, 158, 11, 0.6);
}
.op-page[b-d867pr3u6s] .op-accion-anular:hover i {
animation: op-icon-shake-b-d867pr3u6s 0.5s ease;
}
.op-page[b-d867pr3u6s] .op-accion-eliminar {
background: #DC2626;
background-image: linear-gradient(135deg, #DC2626 0%, #EF4444 50%, #F87171 100%);
}
.op-page[b-d867pr3u6s] .op-accion-eliminar:hover {
background-image: linear-gradient(135deg, #991B1B 0%, #DC2626 50%, #EF4444 100%);
box-shadow: 0 12px 24px rgba(220, 38, 38, 0.5), 0 0 0 4px rgba(239, 68, 68, 0.25), 0 0 22px rgba(239, 68, 68, 0.6);
}
.op-page[b-d867pr3u6s] .op-accion-eliminar:hover i {
animation: op-icon-shake-b-d867pr3u6s 0.5s ease;
}
.op-page[b-d867pr3u6s] .op-accion-ver {
background: #7C3AED;
background-image: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%);
}
.op-page[b-d867pr3u6s] .op-accion-ver:hover {
background-image: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #8B5CF6 100%);
box-shadow: 0 12px 24px rgba(124, 58, 237, 0.5), 0 0 0 4px rgba(139, 92, 246, 0.25), 0 0 22px rgba(139, 92, 246, 0.6);
}
.op-page[b-d867pr3u6s] .op-accion-ver:hover i {
animation: op-icon-pop-b-d867pr3u6s 0.5s ease;
}
@keyframes op-icon-wiggle-b-d867pr3u6s {
0%, 100% {
transform: scale(1.15) rotate(-4deg);
}
25% {
transform: scale(1.2) rotate(-10deg);
}
75% {
transform: scale(1.2) rotate(6deg);
}
}
@keyframes op-icon-shake-b-d867pr3u6s {
0%, 100% {
transform: scale(1.15);
}
20% {
transform: scale(1.2) rotate(-12deg);
}
40% {
transform: scale(1.2) rotate(12deg);
}
60% {
transform: scale(1.2) rotate(-8deg);
}
80% {
transform: scale(1.2) rotate(8deg);
}
}
@keyframes op-icon-pop-b-d867pr3u6s {
0% {
transform: scale(1.15);
}
50% {
transform: scale(1.4);
}
100% {
transform: scale(1.15);
}
}
/* ===== 16. PAGINACIΓN ===== */
.op-paginacion[b-d867pr3u6s] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 22px;
background: linear-gradient(135deg, #FAFBFD 0%, #F5F8FC 100%);
border-top: 1px solid var(--op-border-soft);
gap: 12px;
flex-wrap: wrap;
}
.op-paginacion-info[b-d867pr3u6s] {
font-size: 12.5px;
color: var(--op-text-soft);
font-weight: 600;
}
.op-paginacion-botones[b-d867pr3u6s] {
display: flex;
gap: 4px;
align-items: center;
}
.op-btn-pagina[b-d867pr3u6s] {
min-width: 34px;
height: 34px;
padding: 0 10px;
border-radius: 8px;
border: 1.5px solid var(--op-border);
background: #FFFFFF;
color: var(--op-text-soft);
font-weight: 700;
font-size: 12.5px;
cursor: pointer;
transition: var(--op-transition);
font-family: inherit;
}
.op-btn-pagina:hover:not(:disabled)[b-d867pr3u6s] {
background: var(--op-primary-soft);
border-color: var(--op-primary);
color: var(--op-primary);
transform: translateY(-2px);
}
.op-btn-pagina.active[b-d867pr3u6s] {
background: linear-gradient(135deg, var(--op-primary), var(--op-primary-light));
color: #FFFFFF;
border-color: var(--op-primary);
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
animation: op-page-glow-b-d867pr3u6s 2s ease-in-out infinite alternate;
}
@keyframes op-page-glow-b-d867pr3u6s {
from {
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}
to {
box-shadow: 0 4px 20px rgba(21, 101, 192, 0.55);
}
}
.op-btn-pagina:disabled[b-d867pr3u6s] {
opacity: 0.4;
cursor: not-allowed;
}
.op-pagina-ellipsis[b-d867pr3u6s] {
padding: 0 6px;
color: var(--op-text-muted);
font-weight: 700;
}
/* ===== 17. MODALES BASE ===== */
.op-modal-overlay[b-d867pr3u6s] {
position: fixed;
inset: 0;
background: radial-gradient(circle at center, rgba(10, 56, 128, 0.6) 0%, rgba(15, 23, 41, 0.78) 100%);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 20px;
animation: op-fade-in-b-d867pr3u6s 0.25s ease;
}
@keyframes op-fade-in-b-d867pr3u6s {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.op-modal[b-d867pr3u6s] {
background: #FFFFFF;
border-radius: var(--op-radius-lg);
box-shadow: 0 32px 80px rgba(10, 56, 128, 0.4), 0 8px 24px rgba(15, 23, 41, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
width: 100%;
max-height: 92vh;
display: flex;
flex-direction: column;
animation: op-slide-in-b-d867pr3u6s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
position: relative;
}
.op-modal[b-d867pr3u6s]::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at 0% 0%, rgba(21, 101, 192, 0.04) 0%, transparent 30%), radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.03) 0%, transparent 30%);
z-index: 0;
}
.op-modal > *[b-d867pr3u6s] {
position: relative;
z-index: 1;
}
@keyframes op-slide-in-b-d867pr3u6s {
from {
opacity: 0;
transform: translateY(30px) scale(0.92);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.op-modal-sm[b-d867pr3u6s] {
max-width: 460px;
}
.op-modal-md[b-d867pr3u6s] {
max-width: 680px;
}
.op-modal-lg[b-d867pr3u6s] {
max-width: 900px;
}
.op-modal-xl[b-d867pr3u6s] {
max-width: 1300px;
width: 96vw;
}
.op-modal-header[b-d867pr3u6s] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 26px;
background: linear-gradient(135deg, var(--op-primary-darker) 0%, var(--op-primary) 50%, var(--op-primary-light) 100%);
color: #FFFFFF;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.op-modal-header[b-d867pr3u6s]::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 65%);
pointer-events: none;
}
.op-modal-header[b-d867pr3u6s]::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
animation: op-header-shine-b-d867pr3u6s 3s ease-in-out infinite;
}
@keyframes op-header-shine-b-d867pr3u6s {
0%, 100% {
transform: translateX(-50%);
opacity: 0.3;
}
50% {
transform: translateX(50%);
opacity: 0.8;
}
}
.op-modal-header-danger[b-d867pr3u6s] {
background: linear-gradient(135deg, #7F1D1D 0%, #B91C1C 40%, #EF4444 100%);
}
.op-modal-header-danger[b-d867pr3u6s]::after {
background: linear-gradient(90deg, transparent, rgba(255, 200, 200, 0.8), transparent);
}
.op-modal-header-warning[b-d867pr3u6s] {
background: linear-gradient(135deg, #78350F 0%, #B45309 40%, #F59E0B 100%);
}
.op-modal-header-alertas[b-d867pr3u6s] {
background: linear-gradient(135deg, #7F1D1D 0%, #DC2626 40%, #EF4444 70%, #F97316 100%);
}
.op-modal-header-alertas[b-d867pr3u6s]::after {
background: linear-gradient(90deg, transparent, rgba(255, 200, 200, 0.9), transparent);
animation: op-header-shine-b-d867pr3u6s 2s ease-in-out infinite;
}
.op-modal-header-stats[b-d867pr3u6s] {
background: linear-gradient(135deg, #064E3B 0%, #059669 40%, #10B981 70%, #34D399 100%);
}
.op-modal-header-stats[b-d867pr3u6s]::after {
background: linear-gradient(90deg, transparent, rgba(200, 255, 220, 0.9), transparent);
}
.op-modal-header-colabs[b-d867pr3u6s] {
background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 40%, #A78BFA 70%, #C4B5FD 100%);
}
.op-modal-header-colabs[b-d867pr3u6s]::after {
background: linear-gradient(90deg, transparent, rgba(220, 200, 255, 0.9), transparent);
}
.op-modal-header-detalle[b-d867pr3u6s] {
background: linear-gradient(135deg, #0A3880 0%, #1565C0 40%, #2196F3 70%, #64B5F6 100%);
}
.op-modal-header-detalle[b-d867pr3u6s]::after {
background: linear-gradient(90deg, transparent, rgba(200, 230, 255, 0.9), transparent);
}
.op-modal-title[b-d867pr3u6s] {
margin: 0;
font-size: 17px;
font-weight: 800;
display: flex;
align-items: center;
gap: 12px;
letter-spacing: 0.3px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
position: relative;
z-index: 1;
}
.op-modal-title i[b-d867pr3u6s] {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.25);
font-size: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}
.op-modal-title-badge[b-d867pr3u6s] {
background: rgba(255, 255, 255, 0.25);
color: #FFFFFF;
font-size: 12px;
font-weight: 800;
padding: 4px 14px;
border-radius: 20px;
min-width: 32px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.op-modal-close[b-d867pr3u6s] {
background: rgba(255, 255, 255, 0.15);
border: 1.5px solid rgba(255, 255, 255, 0.3);
color: #FFFFFF;
font-size: 22px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--op-transition);
line-height: 1;
font-weight: 300;
position: relative;
z-index: 1;
}
.op-modal-close:hover[b-d867pr3u6s] {
background: rgba(255, 255, 255, 0.35);
border-color: rgba(255, 255, 255, 0.6);
transform: rotate(90deg) scale(1.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.op-modal-body[b-d867pr3u6s] {
padding: 26px 28px;
overflow-y: auto;
flex: 1;
background: #FFFFFF;
scrollbar-width: thin;
scrollbar-color: var(--op-primary-light) rgba(21, 101, 192, 0.05);
}
.op-modal-body[b-d867pr3u6s]::-webkit-scrollbar {
width: 10px;
}
.op-modal-body[b-d867pr3u6s]::-webkit-scrollbar-track {
background: rgba(21, 101, 192, 0.05);
border-radius: 10px;
}
.op-modal-body[b-d867pr3u6s]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--op-primary-light), var(--op-primary));
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.7);
}
.op-modal-body[b-d867pr3u6s]::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--op-primary), var(--op-primary-dark));
}
.op-modal-body-center[b-d867pr3u6s] {
text-align: center;
}
.op-modal-seccion[b-d867pr3u6s] {
margin-bottom: 22px;
padding: 18px 20px;
border-radius: 14px;
background: linear-gradient(135deg, #FAFBFD 0%, #F5F8FC 100%);
border: 1px solid var(--op-border-soft);
border-left: 4px solid var(--op-primary);
position: relative;
transition: all 0.25s ease;
}
.op-modal-seccion:hover[b-d867pr3u6s] {
background: linear-gradient(135deg, #FFFFFF 0%, #F8FBFF 100%);
box-shadow: 0 4px 14px rgba(21, 101, 192, 0.08);
}
.op-modal-seccion:last-child[b-d867pr3u6s] {
margin-bottom: 0;
}
.op-modal-seccion:nth-of-type(1)[b-d867pr3u6s] {
border-left-color: #3B82F6;
}
.op-modal-seccion:nth-of-type(2)[b-d867pr3u6s] {
border-left-color: #8B5CF6;
}
.op-modal-seccion:nth-of-type(3)[b-d867pr3u6s] {
border-left-color: #EC4899;
}
.op-modal-seccion:nth-of-type(4)[b-d867pr3u6s] {
border-left-color: #06B6D4;
}
.op-modal-seccion:nth-of-type(5)[b-d867pr3u6s] {
border-left-color: #F59E0B;
}
.op-modal-seccion:nth-of-type(6)[b-d867pr3u6s] {
border-left-color: #10B981;
}
.op-modal-seccion-title[b-d867pr3u6s] {
font-size: 14px;
font-weight: 800;
color: var(--op-primary-dark);
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.op-modal-seccion-title i[b-d867pr3u6s] {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: linear-gradient(135deg, var(--op-primary), var(--op-primary-light));
color: #FFFFFF;
font-size: 12px;
box-shadow: 0 3px 8px rgba(21, 101, 192, 0.3);
}
.op-modal-seccion:nth-of-type(1) .op-modal-seccion-title i[b-d867pr3u6s] {
background: linear-gradient(135deg, #2563EB, #60A5FA);
}
.op-modal-seccion:nth-of-type(2) .op-modal-seccion-title i[b-d867pr3u6s] {
background: linear-gradient(135deg, #7C3AED, #A78BFA);
}
.op-modal-seccion:nth-of-type(3) .op-modal-seccion-title i[b-d867pr3u6s] {
background: linear-gradient(135deg, #DB2777, #F472B6);
}
.op-modal-seccion:nth-of-type(4) .op-modal-seccion-title i[b-d867pr3u6s] {
background: linear-gradient(135deg, #0E7490, #22D3EE);
}
.op-modal-seccion:nth-of-type(5) .op-modal-seccion-title i[b-d867pr3u6s] {
background: linear-gradient(135deg, #B45309, #FBBF24);
}
.op-modal-seccion:nth-of-type(6) .op-modal-seccion-title i[b-d867pr3u6s] {
background: linear-gradient(135deg, #047857, #34D399);
}
.op-modal-grid-2[b-d867pr3u6s] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.op-modal-grid-2-mt[b-d867pr3u6s] {
margin-top: 12px;
}
.op-modal-campo[b-d867pr3u6s] {
display: flex;
flex-direction: column;
gap: 6px;
}
.op-modal-full[b-d867pr3u6s] {
grid-column: 1 / -1;
}
.op-modal-label[b-d867pr3u6s] {
font-size: 11px;
font-weight: 800;
color: var(--op-text-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 4px;
}
.op-modal-input[b-d867pr3u6s],
.op-modal-select[b-d867pr3u6s],
.op-modal-textarea[b-d867pr3u6s] {
padding: 10px 14px;
border-radius: 10px;
border: 1.5px solid var(--op-border);
font-size: 13px;
font-family: inherit;
color: var(--op-text);
background: #FFFFFF;
transition: var(--op-transition);
outline: none;
width: 100%;
box-sizing: border-box;
}
.op-modal-input:hover[b-d867pr3u6s],
.op-modal-select:hover[b-d867pr3u6s],
.op-modal-textarea:hover[b-d867pr3u6s] {
border-color: var(--op-primary-lighter);
}
.op-modal-textarea[b-d867pr3u6s] {
resize: vertical;
min-height: 70px;
}
.op-modal-input:focus[b-d867pr3u6s],
.op-modal-select:focus[b-d867pr3u6s],
.op-modal-textarea:focus[b-d867pr3u6s] {
border-color: var(--op-primary);
box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.15);
background: #FFFFFF;
}
.op-no-edit[b-d867pr3u6s] {
background: repeating-linear-gradient(45deg, #F8FAFC 0px, #F8FAFC 4px, #F1F5F9 4px, #F1F5F9 8px);
color: var(--op-text-muted);
cursor: not-allowed;
}
.op-no-edit-ok[b-d867pr3u6s] {
color: #166534;
font-weight: 800;
background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
border-color: rgba(16, 185, 129, 0.4);
}
.op-no-edit-err[b-d867pr3u6s] {
color: #991B1B;
font-weight: 800;
background: linear-gradient(135deg, #FEE2E2, #FECACA);
border-color: rgba(239, 68, 68, 0.4);
}
.op-modal-footer[b-d867pr3u6s] {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 18px 26px;
border-top: 2px solid var(--op-border-soft);
background: linear-gradient(135deg, #FAFBFD 0%, #F5F8FC 100%);
flex-shrink: 0;
position: relative;
}
.op-modal-footer[b-d867pr3u6s]::before {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--op-primary-lighter), transparent);
}
.op-btn-modal-cancelar[b-d867pr3u6s],
.op-btn-modal-guardar[b-d867pr3u6s],
.op-btn-modal-eliminar[b-d867pr3u6s],
.op-btn-modal-warning[b-d867pr3u6s],
.op-btn-modal-editar[b-d867pr3u6s] {
padding: 11px 24px;
border-radius: 11px;
border: none;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
display: inline-flex;
align-items: center;
gap: 8px;
font-family: inherit;
letter-spacing: 0.3px;
position: relative;
overflow: hidden;
}
.op-btn-modal-cancelar[b-d867pr3u6s]::before,
.op-btn-modal-guardar[b-d867pr3u6s]::before,
.op-btn-modal-eliminar[b-d867pr3u6s]::before,
.op-btn-modal-warning[b-d867pr3u6s]::before,
.op-btn-modal-editar[b-d867pr3u6s]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
transform: translateX(-120%);
transition: transform 0.6s ease;
}
.op-btn-modal-cancelar:hover[b-d867pr3u6s]::before,
.op-btn-modal-guardar:hover[b-d867pr3u6s]::before,
.op-btn-modal-eliminar:hover[b-d867pr3u6s]::before,
.op-btn-modal-warning:hover[b-d867pr3u6s]::before,
.op-btn-modal-editar:hover[b-d867pr3u6s]::before {
transform: translateX(120%);
}
.op-btn-modal-cancelar[b-d867pr3u6s] {
background: #FFFFFF;
color: var(--op-text-soft);
border: 1.5px solid var(--op-border);
}
.op-btn-modal-cancelar:hover[b-d867pr3u6s] {
background: #F1F5F9;
border-color: var(--op-text-muted);
transform: translateY(-2px);
}
.op-btn-modal-guardar[b-d867pr3u6s] {
background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary-light) 100%);
color: #FFFFFF;
box-shadow: 0 6px 18px rgba(21, 101, 192, 0.35);
}
.op-btn-modal-guardar:hover:not(:disabled)[b-d867pr3u6s] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(21, 101, 192, 0.5);
}
.op-btn-modal-guardar:disabled[b-d867pr3u6s] {
opacity: 0.5;
cursor: not-allowed;
}
.op-btn-modal-editar[b-d867pr3u6s] {
background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
color: #FFFFFF;
box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35);
}
.op-btn-modal-editar:hover[b-d867pr3u6s] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(139, 92, 246, 0.55);
}
.op-btn-modal-eliminar[b-d867pr3u6s] {
background: linear-gradient(135deg, #991B1B 0%, #EF4444 100%);
color: #FFFFFF;
box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}
.op-btn-modal-eliminar:hover[b-d867pr3u6s] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(239, 68, 68, 0.55);
}
.op-btn-modal-warning[b-d867pr3u6s] {
background: linear-gradient(135deg, #B45309 0%, #F59E0B 100%);
color: #FFFFFF;
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}
.op-btn-modal-warning:hover[b-d867pr3u6s] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(245, 158, 11, 0.55);
}
/* ===== 18. MODAL ALERTAS / COLABS β 3 COLUMNAS ===== */
.op-alertas-grid-modal[b-d867pr3u6s] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
align-items: start;
}
.op-alertas-col[b-d867pr3u6s] {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--op-border-soft);
background: #FFFFFF;
display: flex;
flex-direction: column;
max-height: 70vh;
min-height: 380px;
box-shadow: 0 6px 20px rgba(15, 23, 41, 0.08);
}
.op-alertas-col-head[b-d867pr3u6s] {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
color: #FFFFFF;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.3px;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.op-alertas-col-head[b-d867pr3u6s]::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 65%);
pointer-events: none;
}
.op-alertas-col-repetido .op-alertas-col-head[b-d867pr3u6s] {
background: linear-gradient(135deg, #92400E 0%, #D97706 50%, #F59E0B 100%);
}
.op-alertas-col-solapado .op-alertas-col-head[b-d867pr3u6s] {
background: linear-gradient(135deg, #7F1D1D 0%, #DC2626 50%, #EF4444 100%);
}
.op-alertas-col-sinasignar .op-alertas-col-head[b-d867pr3u6s] {
background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 50%, #3B82F6 100%);
}
.op-alertas-col-trabajando .op-alertas-col-head[b-d867pr3u6s] {
background: linear-gradient(135deg, #064E3B 0%, #059669 50%, #10B981 100%);
}
.op-alertas-col-disponibles .op-alertas-col-head[b-d867pr3u6s] {
background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 50%, #3B82F6 100%);
}
.op-alertas-col-descanso .op-alertas-col-head[b-d867pr3u6s] {
background: linear-gradient(135deg, #374151 0%, #6B7280 50%, #9CA3AF 100%);
}
.op-alertas-col-head i[b-d867pr3u6s] {
font-size: 17px;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}
.op-alertas-col-badge[b-d867pr3u6s] {
margin-left: auto;
background: rgba(255, 255, 255, 0.35);
padding: 4px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 800;
min-width: 32px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.op-alertas-col-body[b-d867pr3u6s] {
padding: 14px;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
scrollbar-width: thin;
scrollbar-color: var(--op-primary-light) rgba(21, 101, 192, 0.08);
scrollbar-gutter: stable;
}
.op-alertas-col-body[b-d867pr3u6s]::-webkit-scrollbar {
width: 10px;
}
.op-alertas-col-body[b-d867pr3u6s]::-webkit-scrollbar-track {
background: rgba(21, 101, 192, 0.06);
border-radius: 10px;
}
.op-alertas-col-body[b-d867pr3u6s]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--op-primary-light), var(--op-primary));
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.op-alertas-col-repetido .op-alertas-col-body[b-d867pr3u6s]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #F59E0B, #D97706);
}
.op-alertas-col-solapado .op-alertas-col-body[b-d867pr3u6s]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #EF4444, #DC2626);
}
.op-alertas-col-sinasignar .op-alertas-col-body[b-d867pr3u6s]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #3B82F6, #2563EB);
}
.op-alertas-col-trabajando .op-alertas-col-body[b-d867pr3u6s]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #10B981, #059669);
}
.op-alertas-col-disponibles .op-alertas-col-body[b-d867pr3u6s]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #3B82F6, #2563EB);
}
.op-alertas-col-descanso .op-alertas-col-body[b-d867pr3u6s]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #9CA3AF, #6B7280);
}
/* Tarjetas de grupo β CON ESPACIO GARANTIZADO */
.op-alerta-grupo[b-d867pr3u6s] {
background: linear-gradient(120deg, #F8FAFC 0%, #FFFFFF 100%);
border-radius: 14px;
border: 1px solid var(--op-border-soft);
overflow: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
width: 100%;
margin-bottom: 4px;
flex-shrink: 0;
}
.op-alerta-grupo[b-d867pr3u6s]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
transition: width 0.3s;
}
.op-alertas-col-repetido .op-alerta-grupo[b-d867pr3u6s]::before {
background: linear-gradient(180deg, #F59E0B, #FBBF24);
}
.op-alertas-col-solapado .op-alerta-grupo[b-d867pr3u6s]::before {
background: linear-gradient(180deg, #EF4444, #F87171);
}
.op-alertas-col-sinasignar .op-alerta-grupo[b-d867pr3u6s]::before {
background: linear-gradient(180deg, #3B82F6, #60A5FA);
}
.op-alertas-col-trabajando .op-alerta-grupo[b-d867pr3u6s]::before {
background: linear-gradient(180deg, #10B981, #34D399);
}
.op-alerta-grupo:hover[b-d867pr3u6s] {
box-shadow: 0 8px 22px rgba(15, 23, 41, 0.1);
transform: translateY(-2px);
}
.op-alerta-grupo:hover[b-d867pr3u6s]::before {
width: 5px;
}
.op-alerta-grupo.abierto[b-d867pr3u6s] {
border-color: var(--op-primary-lighter);
box-shadow: 0 10px 26px rgba(21, 101, 192, 0.15);
background: #FFFFFF;
}
.op-alerta-grupo-head[b-d867pr3u6s] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px 12px 18px;
cursor: pointer;
user-select: none;
transition: background 0.2s;
}
.op-alerta-grupo-head:hover[b-d867pr3u6s] {
background: rgba(21, 101, 192, 0.04);
}
.op-alerta-avatar[b-d867pr3u6s] {
width: 42px;
height: 42px;
border-radius: 13px;
background: var(--avatar-color, #94A3B8);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 -2px 5px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.28);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
letter-spacing: 0.3px;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.op-alerta-avatar-sm[b-d867pr3u6s] {
width: 38px;
height: 38px;
font-size: 12px;
border-radius: 11px;
}
.op-alerta-avatar-warn[b-d867pr3u6s] {
background: linear-gradient(135deg, #64748B, #94A3B8);
}
.op-alerta-grupo-info[b-d867pr3u6s] {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.op-alerta-grupo-nombre[b-d867pr3u6s] {
font-size: 13.5px;
font-weight: 800;
color: var(--op-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-alerta-grupo-sub[b-d867pr3u6s] {
font-size: 10.5px;
color: var(--op-text-muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-alerta-grupo-count[b-d867pr3u6s] {
font-size: 11.5px;
font-weight: 800;
padding: 4px 12px;
border-radius: 20px;
min-width: 28px;
text-align: center;
color: #FFFFFF;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.op-alertas-col-repetido .op-alerta-grupo-count[b-d867pr3u6s] {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.op-alertas-col-solapado .op-alerta-grupo-count[b-d867pr3u6s] {
background: linear-gradient(135deg, #EF4444, #DC2626);
}
.op-alertas-col-sinasignar .op-alerta-grupo-count[b-d867pr3u6s] {
background: linear-gradient(135deg, #3B82F6, #2563EB);
}
.op-alertas-col-trabajando .op-alerta-grupo-count[b-d867pr3u6s] {
background: linear-gradient(135deg, #10B981, #059669);
}
.op-alerta-grupo-caret[b-d867pr3u6s] {
font-size: 12px;
color: var(--op-text-muted);
transition: transform 0.25s;
}
.op-alerta-grupo.abierto .op-alerta-grupo-caret[b-d867pr3u6s] {
color: var(--op-primary);
}
.op-alerta-grupo-body[b-d867pr3u6s] {
padding: 6px 14px 14px 18px;
display: flex;
flex-direction: column;
gap: 8px;
animation: op-slide-down-b-d867pr3u6s 0.3s ease;
background: linear-gradient(180deg, transparent 0%, rgba(21, 101, 192, 0.03) 100%);
border-top: 1px dashed var(--op-border);
}
.op-alerta-tarea[b-d867pr3u6s] {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
background: #FFFFFF;
border-radius: 10px;
font-size: 12px;
flex-wrap: wrap;
border: 1px solid var(--op-border-soft);
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.op-alerta-tarea[b-d867pr3u6s]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
}
.op-alertas-col-repetido .op-alerta-tarea[b-d867pr3u6s]::before {
background: #F59E0B;
}
.op-alertas-col-solapado .op-alerta-tarea[b-d867pr3u6s]::before {
background: #EF4444;
}
.op-alertas-col-sinasignar .op-alerta-tarea[b-d867pr3u6s]::before {
background: #3B82F6;
}
.op-alertas-col-trabajando .op-alerta-tarea[b-d867pr3u6s]::before {
background: #10B981;
}
.op-alerta-tarea:hover[b-d867pr3u6s] {
background: #FAFCFF;
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(15, 23, 41, 0.08);
}
.op-alerta-tarea-hora[b-d867pr3u6s] {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 800;
padding: 4px 10px;
border-radius: 8px;
font-size: 11.5px;
white-space: nowrap;
color: #FFFFFF;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.op-alertas-col-repetido .op-alerta-tarea-hora[b-d867pr3u6s] {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.op-alertas-col-solapado .op-alerta-tarea-hora[b-d867pr3u6s] {
background: linear-gradient(135deg, #EF4444, #DC2626);
}
.op-alertas-col-sinasignar .op-alerta-tarea-hora[b-d867pr3u6s] {
background: linear-gradient(135deg, #3B82F6, #2563EB);
}
.op-alertas-col-trabajando .op-alerta-tarea-hora[b-d867pr3u6s] {
background: linear-gradient(135deg, #10B981, #059669);
}
.op-alerta-tarea-hora i[b-d867pr3u6s] {
font-size: 10px;
opacity: 0.85;
}
.op-alerta-tarea-cliente[b-d867pr3u6s] {
font-weight: 700;
color: var(--op-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 140px;
}
.op-alerta-tarea-lugar[b-d867pr3u6s] {
font-size: 11px;
color: var(--op-text-muted);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 120px;
}
/* Item de colaborador (Disponibles / Descanso) */
.op-colab-item[b-d867pr3u6s] {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: linear-gradient(120deg, #F8FAFC 0%, #FFFFFF 100%);
border-radius: 12px;
border: 1px solid var(--op-border-soft);
transition: all 0.2s ease;
position: relative;
overflow: hidden;
width: 100%;
flex-shrink: 0;
}
.op-colab-item[b-d867pr3u6s]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #94A3B8, #CBD5E1);
transition: width 0.3s;
}
.op-alertas-col-disponibles .op-colab-item[b-d867pr3u6s]::before {
background: linear-gradient(180deg, #3B82F6, #60A5FA);
}
.op-alertas-col-descanso .op-colab-item[b-d867pr3u6s]::before {
background: linear-gradient(180deg, #9CA3AF, #D1D5DB);
}
.op-colab-item:hover[b-d867pr3u6s] {
background: #FFFFFF;
transform: translateX(4px);
box-shadow: 0 6px 16px rgba(15, 23, 41, 0.1);
}
.op-colab-item:hover[b-d867pr3u6s]::before {
width: 5px;
}
.op-alertas-descanso-badge[b-d867pr3u6s] {
margin-left: auto;
background: #F3F4F6;
color: #6B7280;
font-size: 10px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
white-space: nowrap;
border: 1px solid #E5E7EB;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.op-alertas-empty[b-d867pr3u6s] {
text-align: center;
color: var(--op-text-muted);
font-size: 13px;
padding: 40px 16px;
font-weight: 700;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.op-alertas-empty i[b-d867pr3u6s] {
font-size: 40px;
color: var(--op-success);
opacity: 0.6;
animation: op-empty-pulse-b-d867pr3u6s 2s ease-in-out infinite;
}
@keyframes op-empty-pulse-b-d867pr3u6s {
0%, 100% {
transform: scale(1);
opacity: 0.6;
}
50% {
transform: scale(1.12);
opacity: 1;
}
}
/* ===== 19. MODAL ESTADΓSTICAS ===== */
.op-stats-modal-grid[b-d867pr3u6s] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 16px;
}
.op-stats-card[b-d867pr3u6s] {
background: #FFFFFF;
border-radius: 16px;
border: 1px solid var(--op-border-soft);
box-shadow: 0 6px 20px rgba(15, 23, 41, 0.06);
padding: 18px 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.op-stats-card[b-d867pr3u6s]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--op-primary), var(--op-primary-light));
}
.op-stats-card:nth-child(1)[b-d867pr3u6s]::before {
background: linear-gradient(90deg, #2563EB, #60A5FA);
}
.op-stats-card:nth-child(2)[b-d867pr3u6s]::before {
background: linear-gradient(90deg, #7C3AED, #A78BFA);
}
.op-stats-card:nth-child(3)[b-d867pr3u6s]::before {
background: linear-gradient(90deg, #DB2777, #F472B6);
}
.op-stats-card:nth-child(4)[b-d867pr3u6s]::before {
background: linear-gradient(90deg, #0E7490, #22D3EE);
}
.op-stats-card:nth-child(5)[b-d867pr3u6s]::before {
background: linear-gradient(90deg, #D97706, #FBBF24);
}
.op-stats-card:hover[b-d867pr3u6s] {
box-shadow: 0 14px 34px rgba(21, 101, 192, 0.18);
border-color: var(--op-primary-lighter);
transform: translateY(-4px);
}
.op-stats-card-wide[b-d867pr3u6s] {
grid-column: span 2;
}
.op-stats-card-title[b-d867pr3u6s] {
font-size: 14px;
font-weight: 800;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 2px dashed var(--op-border);
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.op-stats-card:nth-child(1) .op-stats-card-title[b-d867pr3u6s] {
color: #1E40AF;
}
.op-stats-card:nth-child(2) .op-stats-card-title[b-d867pr3u6s] {
color: #6D28D9;
}
.op-stats-card:nth-child(3) .op-stats-card-title[b-d867pr3u6s] {
color: #BE185D;
}
.op-stats-card:nth-child(4) .op-stats-card-title[b-d867pr3u6s] {
color: #0E7490;
}
.op-stats-card:nth-child(5) .op-stats-card-title[b-d867pr3u6s] {
color: #B45309;
}
.op-stats-card-title i[b-d867pr3u6s] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 10px;
color: #FFFFFF;
font-size: 14px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.op-stats-card:nth-child(1) .op-stats-card-title i[b-d867pr3u6s] {
background: linear-gradient(135deg, #2563EB, #60A5FA);
}
.op-stats-card:nth-child(2) .op-stats-card-title i[b-d867pr3u6s] {
background: linear-gradient(135deg, #7C3AED, #A78BFA);
}
.op-stats-card:nth-child(3) .op-stats-card-title i[b-d867pr3u6s] {
background: linear-gradient(135deg, #DB2777, #F472B6);
}
.op-stats-card:nth-child(4) .op-stats-card-title i[b-d867pr3u6s] {
background: linear-gradient(135deg, #0E7490, #22D3EE);
}
.op-stats-card:nth-child(5) .op-stats-card-title i[b-d867pr3u6s] {
background: linear-gradient(135deg, #D97706, #FBBF24);
}
.op-stats-card-grid[b-d867pr3u6s] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.op-stats-kpi[b-d867pr3u6s] {
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
border: 1px solid var(--op-border-soft);
position: relative;
overflow: hidden;
transition: all 0.25s ease;
}
.op-stats-kpi > *[b-d867pr3u6s] {
position: relative;
z-index: 1;
}
.op-stats-card-grid .op-stats-kpi:nth-child(1)[b-d867pr3u6s] {
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
border-color: rgba(59, 130, 246, 0.25);
}
.op-stats-card-grid .op-stats-kpi:nth-child(1) .op-stats-kpi-value[b-d867pr3u6s] {
color: #1E40AF;
}
.op-stats-card-grid .op-stats-kpi:nth-child(2)[b-d867pr3u6s] {
background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
border-color: rgba(139, 92, 246, 0.25);
}
.op-stats-card-grid .op-stats-kpi:nth-child(2) .op-stats-kpi-value[b-d867pr3u6s] {
color: #6D28D9;
}
.op-stats-card-grid .op-stats-kpi:nth-child(3)[b-d867pr3u6s] {
background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
border-color: rgba(236, 72, 153, 0.25);
}
.op-stats-card-grid .op-stats-kpi:nth-child(3) .op-stats-kpi-value[b-d867pr3u6s] {
color: #BE185D;
}
.op-stats-card-grid .op-stats-kpi:nth-child(4)[b-d867pr3u6s] {
background: linear-gradient(135deg, #ECFEFF 0%, #CFFAFE 100%);
border-color: rgba(6, 182, 212, 0.3);
}
.op-stats-card-grid .op-stats-kpi:nth-child(4) .op-stats-kpi-value[b-d867pr3u6s] {
color: #0E7490;
}
.op-stats-kpi:hover[b-d867pr3u6s] {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(15, 23, 41, 0.12);
}
.op-stats-kpi-label[b-d867pr3u6s] {
font-size: 10.5px;
font-weight: 800;
color: var(--op-text-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.op-stats-kpi-value[b-d867pr3u6s] {
font-size: 24px;
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.op-stats-lista[b-d867pr3u6s] {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 260px;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: var(--op-primary-light) rgba(21, 101, 192, 0.05);
}
.op-stats-lista[b-d867pr3u6s]::-webkit-scrollbar {
width: 8px;
}
.op-stats-lista[b-d867pr3u6s]::-webkit-scrollbar-track {
background: rgba(21, 101, 192, 0.05);
border-radius: 10px;
}
.op-stats-lista[b-d867pr3u6s]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--op-primary-light), var(--op-primary));
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.6);
}
.op-stats-lista-item[b-d867pr3u6s] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: linear-gradient(120deg, #F8FAFC 0%, #FFFFFF 100%);
border-radius: 11px;
font-size: 12.5px;
border: 1px solid var(--op-border-soft);
border-left: 4px solid var(--op-primary-light);
transition: all 0.25s ease;
}
.op-stats-lista-item:nth-child(5n+1)[b-d867pr3u6s] {
border-left-color: #3B82F6;
}
.op-stats-lista-item:nth-child(5n+2)[b-d867pr3u6s] {
border-left-color: #8B5CF6;
}
.op-stats-lista-item:nth-child(5n+3)[b-d867pr3u6s] {
border-left-color: #EC4899;
}
.op-stats-lista-item:nth-child(5n+4)[b-d867pr3u6s] {
border-left-color: #06B6D4;
}
.op-stats-lista-item:nth-child(5n+5)[b-d867pr3u6s] {
border-left-color: #F59E0B;
}
.op-stats-lista-item:hover[b-d867pr3u6s] {
background: #FFFFFF;
transform: translateX(4px);
box-shadow: 0 6px 16px rgba(21, 101, 192, 0.12);
border-color: var(--op-primary-lighter);
}
.op-stats-lista-label[b-d867pr3u6s] {
font-weight: 800;
color: var(--op-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-stats-lista-value[b-d867pr3u6s] {
font-weight: 800;
color: var(--op-primary-dark);
white-space: nowrap;
display: flex;
gap: 8px;
align-items: center;
font-size: 12.5px;
}
.op-stats-extra[b-d867pr3u6s] {
background: linear-gradient(135deg, #FEF3C7, #FDE68A);
color: #92400E;
padding: 3px 10px;
border-radius: 10px;
font-size: 10.5px;
font-weight: 900;
border: 1px solid rgba(245, 158, 11, 0.4);
box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
letter-spacing: 0.3px;
}
.op-stats-empty[b-d867pr3u6s] {
text-align: center;
color: var(--op-text-muted);
font-size: 12.5px;
padding: 30px 16px;
font-weight: 700;
background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
border-radius: 12px;
border: 1px dashed var(--op-border);
}
/* ===== 20. MODAL DETALLE NUEVO DISEΓO ===== */
.op-detalle-seccion[b-d867pr3u6s] {
margin-bottom: 20px;
border-radius: 16px;
border: 1px solid var(--op-border-soft);
background: #FFFFFF;
box-shadow: 0 4px 14px rgba(15, 23, 41, 0.05);
overflow: hidden;
transition: all 0.25s ease;
}
.op-detalle-seccion:hover[b-d867pr3u6s] {
box-shadow: 0 8px 24px rgba(21, 101, 192, 0.1);
}
.op-detalle-seccion-head[b-d867pr3u6s] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
font-size: 13.5px;
font-weight: 800;
color: #FFFFFF;
letter-spacing: 0.4px;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.op-detalle-seccion-head[b-d867pr3u6s]::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 65%);
pointer-events: none;
}
.op-detalle-seccion-head i[b-d867pr3u6s] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
font-size: 14px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.op-detalle-seccion-principal .op-detalle-seccion-head[b-d867pr3u6s] {
background: linear-gradient(135deg, #1565C0, #42A5F5);
}
.op-detalle-seccion-marcas .op-detalle-seccion-head[b-d867pr3u6s] {
background: linear-gradient(135deg, #7C3AED, #A78BFA);
}
.op-detalle-seccion-mapa .op-detalle-seccion-head[b-d867pr3u6s] {
background: linear-gradient(135deg, #047857, #34D399);
}
.op-detalle-seccion-body[b-d867pr3u6s] {
padding: 20px 22px;
background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
}
.op-detalle-grid-3[b-d867pr3u6s] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 14px;
}
.op-detalle-field[b-d867pr3u6s] {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px;
background: linear-gradient(120deg, #F8FAFC 0%, #FFFFFF 100%);
border-radius: 12px;
border: 1px solid var(--op-border-soft);
border-left: 3px solid #60A5FA;
transition: all 0.2s;
}
.op-detalle-field:hover[b-d867pr3u6s] {
background: #FFFFFF;
border-left-color: #1565C0;
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.1);
transform: translateY(-1px);
}
.op-detalle-field label[b-d867pr3u6s] {
font-size: 10.5px;
font-weight: 800;
color: var(--op-text-muted);
text-transform: uppercase;
letter-spacing: 0.6px;
display: flex;
align-items: center;
gap: 6px;
}
.op-detalle-field label i[b-d867pr3u6s] {
font-size: 11px;
color: var(--op-primary);
}
.op-detalle-field span[b-d867pr3u6s] {
font-size: 13.5px;
font-weight: 700;
color: var(--op-text);
word-break: break-word;
}
.op-detalle-field-full[b-d867pr3u6s] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 18px;
background: linear-gradient(120deg, #EFF6FF 0%, #F8FBFF 100%);
border-radius: 12px;
border: 1px solid rgba(21, 101, 192, 0.18);
border-left: 4px solid #1565C0;
}
.op-detalle-field-full label[b-d867pr3u6s] {
font-size: 11px;
font-weight: 800;
color: var(--op-primary-dark);
text-transform: uppercase;
letter-spacing: 0.6px;
display: flex;
align-items: center;
gap: 6px;
}
.op-detalle-field-full span[b-d867pr3u6s] {
font-size: 13.5px;
font-weight: 600;
color: var(--op-text);
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
/* Estado de Marco */
.op-detalle-marco-status[b-d867pr3u6s] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-radius: 12px;
font-size: 14px;
font-weight: 800;
margin-bottom: 16px;
letter-spacing: 0.3px;
}
.op-detalle-marco-status i[b-d867pr3u6s] {
font-size: 20px;
}
.op-detalle-marco-status.ok[b-d867pr3u6s] {
background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
color: #166534;
border: 2px solid rgba(16, 185, 129, 0.4);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
}
.op-detalle-marco-status.no[b-d867pr3u6s] {
background: linear-gradient(135deg, #FEE2E2, #FECACA);
color: #991B1B;
border: 2px solid rgba(239, 68, 68, 0.4);
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.15);
}
/* Grid de marcas */
.op-detalle-marcas-grid[b-d867pr3u6s] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.op-detalle-marca-item[b-d867pr3u6s] {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
border-radius: 12px;
border: 1px solid rgba(139, 92, 246, 0.25);
border-left: 4px solid #7C3AED;
transition: all 0.2s ease;
}
.op-detalle-marca-item:hover[b-d867pr3u6s] {
background: linear-gradient(135deg, #FFFFFF 0%, #F5F3FF 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.18);
border-left-color: #6D28D9;
}
.op-detalle-marca-num[b-d867pr3u6s] {
font-size: 10px;
font-weight: 800;
color: #6D28D9;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 5px;
}
.op-detalle-marca-num[b-d867pr3u6s]::before {
content: 'π';
font-size: 11px;
}
.op-detalle-marca-hora[b-d867pr3u6s] {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 18px;
font-weight: 900;
color: #1A2236;
letter-spacing: 1px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.op-detalle-marca-suc[b-d867pr3u6s] {
font-size: 11px;
font-weight: 600;
color: #64748B;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-detalle-marcas-empty[b-d867pr3u6s] {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 30px 20px;
text-align: center;
color: var(--op-text-muted);
font-size: 13px;
font-weight: 600;
background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
border-radius: 12px;
border: 2px dashed var(--op-border);
}
.op-detalle-marcas-empty i[b-d867pr3u6s] {
font-size: 36px;
opacity: 0.5;
}
/* ===== 21. MAPA ===== */
.op-detalle-direccion[b-d867pr3u6s] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
border-radius: 12px;
border: 1px solid rgba(16, 185, 129, 0.25);
border-left: 4px solid #10B981;
margin-bottom: 16px;
font-size: 14px;
font-weight: 700;
color: #065F46;
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.1);
}
.op-detalle-direccion i[b-d867pr3u6s] {
font-size: 22px;
color: #059669;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.25));
}
.op-detalle-mapa[b-d867pr3u6s] {
border-radius: 14px;
overflow: hidden;
border: 3px solid #FFFFFF;
box-shadow: 0 10px 30px rgba(15, 23, 41, 0.15), 0 0 0 1px rgba(21, 101, 192, 0.1);
line-height: 0;
position: relative;
}
.op-detalle-mapa iframe[b-d867pr3u6s] {
display: block;
width: 100%;
height: 380px;
border: 0;
filter: saturate(1.05);
}
.op-detalle-mapa-empty[b-d867pr3u6s] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 60px 20px;
background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
border-radius: 12px;
border: 2px dashed var(--op-border);
color: var(--op-text-muted);
font-size: 13.5px;
font-weight: 600;
text-align: center;
}
.op-detalle-mapa-empty i[b-d867pr3u6s] {
font-size: 52px;
opacity: 0.4;
color: var(--op-primary);
}
/* ===== 22. CONFIRMACIΓN ===== */
.op-confirm-icon[b-d867pr3u6s] {
font-size: 72px;
margin-bottom: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border-radius: 50%;
animation: op-confirm-pop-b-d867pr3u6s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.op-confirm-icon.danger[b-d867pr3u6s] {
background: radial-gradient(circle, #FEE2E2 0%, #FECACA 100%);
color: #DC2626;
box-shadow: 0 12px 30px rgba(239, 68, 68, 0.3), inset 0 -4px 10px rgba(220, 38, 38, 0.15);
}
.op-confirm-icon.warning[b-d867pr3u6s] {
background: radial-gradient(circle, #FEF3C7 0%, #FDE68A 100%);
color: #B45309;
box-shadow: 0 12px 30px rgba(245, 158, 11, 0.3), inset 0 -4px 10px rgba(180, 83, 9, 0.15);
}
@keyframes op-confirm-pop-b-d867pr3u6s {
0% {
transform: scale(0.3);
opacity: 0;
}
60% {
transform: scale(1.08);
opacity: 1;
}
100% {
transform: scale(1);
}
}
.op-confirm-text[b-d867pr3u6s] {
font-size: 17px;
color: var(--op-text);
margin: 8px 0;
line-height: 1.5;
font-weight: 600;
}
.op-confirm-sub[b-d867pr3u6s] {
font-size: 13px;
color: var(--op-text-muted);
margin: 0;
font-style: italic;
}
/* ===== 23. IMPORTAR ===== */
.op-import-area[b-d867pr3u6s] {
border: 2px dashed var(--op-primary-lighter);
border-radius: 16px;
padding: 34px 20px;
text-align: center;
transition: var(--op-transition);
background: linear-gradient(135deg, #FAFBFD 0%, #F5F8FC 100%);
position: relative;
overflow: hidden;
}
.op-import-area:hover[b-d867pr3u6s] {
border-color: var(--op-primary);
background: linear-gradient(135deg, var(--op-primary-soft) 0%, rgba(66, 165, 245, 0.1) 100%);
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(21, 101, 192, 0.15);
}
.op-import-icon[b-d867pr3u6s] {
font-size: 54px;
color: var(--op-primary);
margin-bottom: 14px;
display: block;
animation: op-import-bounce-b-d867pr3u6s 2.4s ease-in-out infinite;
filter: drop-shadow(0 6px 14px rgba(21, 101, 192, 0.3));
}
@keyframes op-import-bounce-b-d867pr3u6s {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.op-import-text[b-d867pr3u6s] {
font-size: 14px;
color: var(--op-text);
font-weight: 700;
margin: 0 0 8px;
}
.op-input-file[b-d867pr3u6s] {
display: inline-block;
padding: 11px 22px;
background: linear-gradient(135deg, var(--op-primary), var(--op-primary-light));
color: #FFFFFF;
border-radius: 11px;
cursor: pointer;
font-size: 13px;
font-weight: 800;
box-shadow: 0 6px 18px rgba(21, 101, 192, 0.35);
transition: var(--op-transition);
}
.op-input-file:hover[b-d867pr3u6s] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(21, 101, 192, 0.5);
}
.op-import-archivo[b-d867pr3u6s] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
border-radius: 12px;
margin-top: 14px;
border: 1px solid #BBF7D0;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
}
.op-import-archivo i[b-d867pr3u6s] {
color: var(--op-success);
font-size: 22px;
filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
}
.op-import-archivo-nombre[b-d867pr3u6s] {
flex: 1;
font-weight: 800;
font-size: 13px;
color: #166534;
}
.op-import-remove[b-d867pr3u6s] {
background: rgba(239, 68, 68, 0.1);
border: none;
color: var(--op-danger);
cursor: pointer;
font-size: 14px;
width: 30px;
height: 30px;
border-radius: 8px;
transition: var(--op-transition);
display: flex;
align-items: center;
justify-content: center;
}
.op-import-remove:hover[b-d867pr3u6s] {
background: var(--op-danger);
color: #FFFFFF;
transform: rotate(90deg) scale(1.1);
}
.op-import-opciones[b-d867pr3u6s] {
margin-top: 14px;
}
/* ===== 24. RESPONSIVE ===== */
@media (max-width: 992px) {
.op-filtros-grid[b-d867pr3u6s] {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.op-modal-lg[b-d867pr3u6s], .op-modal-md[b-d867pr3u6s], .op-modal-sm[b-d867pr3u6s] {
max-width: 100%;
}
.op-alertas-grid-modal[b-d867pr3u6s] {
grid-template-columns: 1fr;
}
.op-detalle-grid-3[b-d867pr3u6s] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.op-page[b-d867pr3u6s] {
padding: 10px;
}
.op-toolbar[b-d867pr3u6s] {
padding: 12px 14px;
border-radius: 16px;
}
.op-toolbar-row-space[b-d867pr3u6s] {
flex-direction: column;
align-items: stretch;
}
.op-toolbar-grupo[b-d867pr3u6s] {
justify-content: flex-start;
}
.op-cronometro-grupo[b-d867pr3u6s] {
justify-content: flex-end;
}
.op-btn[b-d867pr3u6s] {
padding: 8px 12px;
font-size: 12px;
}
.op-cronometro[b-d867pr3u6s] {
font-size: 15px;
min-width: 60px;
}
.op-btn-play[b-d867pr3u6s], .op-btn-reset[b-d867pr3u6s], .op-btn-refresh[b-d867pr3u6s] {
width: 38px;
height: 38px;
}
.op-filtros-grid[b-d867pr3u6s] {
grid-template-columns: 1fr;
}
.op-burbujas[b-d867pr3u6s] {
padding: 8px 12px;
}
.op-burbuja[b-d867pr3u6s] {
grid-template-columns: 1fr;
gap: 10px;
}
.op-burbuja-colab[b-d867pr3u6s] {
padding-left: 0;
border-left: none;
padding-top: 10px;
border-top: 1px dashed var(--op-border);
}
.op-burbuja-acciones[b-d867pr3u6s] {
padding-left: 0;
border-left: none;
padding-top: 10px;
border-top: 1px dashed var(--op-border);
}
.op-mosaico-grid[b-d867pr3u6s] {
grid-template-columns: 1fr;
padding: 8px 12px;
}
.op-modal-grid-2[b-d867pr3u6s], .op-detalle-grid-3[b-d867pr3u6s] {
grid-template-columns: 1fr;
}
.op-modal-footer[b-d867pr3u6s] {
flex-direction: column-reverse;
}
.op-btn-modal-cancelar[b-d867pr3u6s], .op-btn-modal-guardar[b-d867pr3u6s], .op-btn-modal-eliminar[b-d867pr3u6s], .op-btn-modal-warning[b-d867pr3u6s], .op-btn-modal-editar[b-d867pr3u6s] {
width: 100%;
justify-content: center;
}
.op-modal-xl[b-d867pr3u6s] {
width: 98vw;
}
.op-stats-card-wide[b-d867pr3u6s] {
grid-column: span 1;
}
.op-modal-body[b-d867pr3u6s] {
padding: 18px;
}
.op-modal-seccion[b-d867pr3u6s] {
padding: 14px 16px;
}
}
@media (max-width: 480px) {
.op-cronometro[b-d867pr3u6s] {
display: none;
}
.op-paginacion[b-d867pr3u6s] {
flex-direction: column;
align-items: stretch;
}
.op-grupo-cliente[b-d867pr3u6s], .op-grupo-sector[b-d867pr3u6s], .op-grupo-subsector[b-d867pr3u6s] {
margin-left: 12px;
}
.op-accion[b-d867pr3u6s] {
width: 32px;
height: 32px;
font-size: 12px;
}
}
/* ===== 25. IMPRESIΓN ===== */
@media print {
.op-toolbar[b-d867pr3u6s], .op-filtros[b-d867pr3u6s], .op-paginacion[b-d867pr3u6s], .op-acciones[b-d867pr3u6s], .op-modal-overlay[b-d867pr3u6s] {
display: none !important;
}
.op-page[b-d867pr3u6s] {
background: #FFFFFF;
padding: 0;
}
.op-lista[b-d867pr3u6s] {
box-shadow: none;
border: 1px solid #DDD;
}
.op-burbuja[b-d867pr3u6s], .op-mosaico-card[b-d867pr3u6s] {
break-inside: avoid;
}
}
/* ===== 26. BOTΓN ACTIVAR (v15.1) ===== */
.op-page[b-d867pr3u6s] .op-accion-activar {
background: #059669;
background-image: linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%);
}
.op-page[b-d867pr3u6s] .op-accion-activar:hover {
background-image: linear-gradient(135deg, #047857 0%, #059669 50%, #10B981 100%);
box-shadow: 0 12px 24px rgba(5, 150, 105, 0.5), 0 0 0 4px rgba(16, 185, 129, 0.25), 0 0 22px rgba(16, 185, 129, 0.6);
}
.op-page[b-d867pr3u6s] .op-accion-activar:hover i {
animation: op-icon-pop-b-d867pr3u6s 0.5s ease;
}
/* ===== 27. HEADER / BOTΓN / ICONO MODAL SUCCESS (v15.1) ===== */
.op-modal-header-success[b-d867pr3u6s] {
background: linear-gradient(135deg, #064E3B 0%, #059669 40%, #10B981 70%, #34D399 100%);
}
.op-modal-header-success[b-d867pr3u6s]::after {
background: linear-gradient(90deg, transparent, rgba(200, 255, 220, 0.9), transparent);
}
.op-btn-modal-success[b-d867pr3u6s] {
padding: 11px 24px;
border-radius: 11px;
border: none;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
display: inline-flex;
align-items: center;
gap: 8px;
font-family: inherit;
letter-spacing: 0.3px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #059669 0%, #10B981 100%);
color: #FFFFFF;
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
}
.op-btn-modal-success[b-d867pr3u6s]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
transform: translateX(-120%);
transition: transform 0.6s ease;
}
.op-btn-modal-success:hover[b-d867pr3u6s]::before {
transform: translateX(120%);
}
.op-btn-modal-success:hover[b-d867pr3u6s] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(16, 185, 129, 0.55);
}
.op-confirm-icon.success[b-d867pr3u6s] {
background: radial-gradient(circle, #D1FAE5 0%, #A7F3D0 100%);
color: #059669;
box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3), inset 0 -4px 10px rgba(5, 150, 105, 0.15);
}
/* ===== 26. CHECK DE OPERATIVA (v15.1) ===== */
.op-check-op[b-d867pr3u6s] {
background: rgba(16, 185, 129, 0.22);
border-color: rgba(16, 185, 129, 0.5);
padding: 6px 12px;
}
.op-check-op:hover[b-d867pr3u6s] {
background: rgba(16, 185, 129, 0.35);
}
.op-check-op.active[b-d867pr3u6s] {
background: rgba(16, 185, 129, 0.55);
border-color: rgba(16, 185, 129, 1);
box-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
}
.op-check-op .op-check-text[b-d867pr3u6s] {
font-weight: 800;
letter-spacing: 0.3px;
font-size: 11.5px;
}
/* ===== 27. SEPARADOR VERTICAL (v15.1) ===== */
.op-sep-vertical[b-d867pr3u6s] {
display: inline-block;
width: 2px;
height: 26px;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5), transparent);
margin: 0 6px;
border-radius: 2px;
}
/* /Pages/Logistica/Operativa_Predefinidos.razor.rz.scp.css */
/* ============================================================
π¦Ύ HEFESTO 13.1 PRO MAX β PREDEFINIDOS v1
Hereda de Operativa.razor.css
============================================================ */
/* ============================================================
π¦Ύ HEFESTO 13.1 PRO MAX β OPERATIVA v5 (FULL DOPAMINA)
============================================================ */
/* ===== 01. VARIABLES (compartidas page + overlay modal) ===== */
.op-page[b-ssrxpkrdsy],
.op-modal-overlay[b-ssrxpkrdsy] {
--op-primary: #1565C0;
--op-primary-dark: #0D47A1;
--op-primary-darker: #0A3880;
--op-primary-light: #42A5F5;
--op-primary-lighter: #90CAF9;
--op-primary-soft: rgba(21, 101, 192, 0.08);
--op-primary-soft-2: rgba(21, 101, 192, 0.15);
--op-success: #10B981;
--op-success-dark: #047857;
--op-warning: #F59E0B;
--op-warning-dark: #B45309;
--op-danger: #EF4444;
--op-danger-dark: #B91C1C;
--op-violet: #8B5CF6;
--op-violet-dark: #7C3AED;
--op-pink: #EC4899;
--op-pink-dark: #BE185D;
--op-cyan: #06B6D4;
--op-cyan-dark: #0E7490;
--op-bg: #F5F7FA;
--op-card: #FFFFFF;
--op-border: #E5E9F0;
--op-border-soft: #EEF2F7;
--op-text: #1A2236;
--op-text-soft: #64748B;
--op-text-muted: #94A3B8;
--op-shadow-sm: 0 2px 6px rgba(15, 23, 41, 0.06);
--op-shadow: 0 6px 18px rgba(15, 23, 41, 0.08);
--op-shadow-blue: 0 10px 30px rgba(21, 101, 192, 0.28);
--op-shadow-blue-strong: 0 14px 38px rgba(21, 101, 192, 0.4);
--op-radius-sm: 8px;
--op-radius: 14px;
--op-radius-lg: 20px;
--op-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.op-page[b-ssrxpkrdsy] {
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
color: var(--op-text);
padding: 20px;
background: radial-gradient(circle at 0% 0%, rgba(21, 101, 192, 0.05) 0%, transparent 40%), radial-gradient(circle at 100% 100%, rgba(66, 165, 245, 0.04) 0%, transparent 40%), var(--op-bg);
min-height: 100vh;
box-sizing: border-box;
}
/* ===== 02. TOOLBAR (AZUL DEGRADADO β FORZADO) ===== */
.op-toolbar[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #0A3880 0%, #1565C0 50%, #42A5F5 100%) !important;
border-radius: var(--op-radius-lg);
padding: 16px 22px;
margin-bottom: 18px;
box-shadow: var(--op-shadow-blue-strong);
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
}
.op-toolbar[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
top: -40%;
right: -5%;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 65%);
pointer-events: none;
}
.op-toolbar-row[b-ssrxpkrdsy] {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.op-toolbar-row-space[b-ssrxpkrdsy] {
justify-content: space-between;
}
.op-toolbar-grupo[b-ssrxpkrdsy] {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.op-toolbar-grupo-wrap[b-ssrxpkrdsy] {
flex-wrap: wrap;
}
.op-cronometro-grupo[b-ssrxpkrdsy] {
gap: 6px;
}
/* ===== 03. BOTONES TOOLBAR ===== */
.op-btn[b-ssrxpkrdsy] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
border-radius: 10px;
border: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: var(--op-transition);
font-family: inherit;
white-space: nowrap;
letter-spacing: 0.2px;
}
.op-btn:disabled[b-ssrxpkrdsy] {
opacity: 0.5;
cursor: not-allowed;
}
.op-btn-crear[b-ssrxpkrdsy],
.op-btn-dia[b-ssrxpkrdsy],
.op-btn-importar[b-ssrxpkrdsy],
.op-btn-exportar[b-ssrxpkrdsy],
.op-btn-imprimir[b-ssrxpkrdsy] {
background: rgba(255, 255, 255, 0.18);
color: #FFFFFF;
border: 1.5px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(8px);
}
.op-btn-crear:hover[b-ssrxpkrdsy],
.op-btn-dia:hover[b-ssrxpkrdsy],
.op-btn-importar:hover[b-ssrxpkrdsy],
.op-btn-exportar:hover[b-ssrxpkrdsy],
.op-btn-imprimir:hover[b-ssrxpkrdsy] {
background: rgba(255, 255, 255, 0.32);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.op-btn-vista[b-ssrxpkrdsy] {
background: rgba(139, 92, 246, 0.4);
color: #FFFFFF;
border: 1.5px solid rgba(139, 92, 246, 0.75);
}
.op-btn-vista:hover[b-ssrxpkrdsy] {
background: rgba(139, 92, 246, 0.6);
border-color: rgba(139, 92, 246, 1);
transform: translateY(-2px);
}
/* ===== 04. CHECKBOXES ===== */
.op-check[b-ssrxpkrdsy] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.12);
border-radius: 8px;
color: #FFFFFF;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: var(--op-transition);
user-select: none;
border: 1.5px solid transparent;
}
.op-check:hover[b-ssrxpkrdsy] {
background: rgba(255, 255, 255, 0.22);
}
.op-check.active[b-ssrxpkrdsy] {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}
.op-check input[type="checkbox"][b-ssrxpkrdsy] {
display: none;
}
.op-checkmark[b-ssrxpkrdsy] {
width: 16px;
height: 16px;
border-radius: 4px;
border: 2px solid rgba(255, 255, 255, 0.5);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: var(--op-transition);
position: relative;
flex-shrink: 0;
}
.op-checkmark[b-ssrxpkrdsy]::after {
content: 'β';
font-size: 10px;
font-weight: 800;
color: #FFFFFF;
opacity: 0;
transform: scale(0.5);
transition: var(--op-transition);
}
.op-check input[type="checkbox"]:checked + .op-checkmark[b-ssrxpkrdsy] {
background: #FFFFFF;
border-color: #FFFFFF;
}
.op-check input[type="checkbox"]:checked + .op-checkmark[b-ssrxpkrdsy]::after {
color: var(--op-primary);
opacity: 1;
transform: scale(1);
}
.op-check-text[b-ssrxpkrdsy] {
font-size: 12px;
white-space: nowrap;
}
.op-check-anuladas[b-ssrxpkrdsy] {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.4);
}
.op-check-anuladas:hover[b-ssrxpkrdsy] {
background: rgba(239, 68, 68, 0.35);
}
.op-check-badge[b-ssrxpkrdsy] {
background: #FFFFFF;
color: var(--op-danger);
font-size: 10px;
font-weight: 800;
padding: 1px 7px;
border-radius: 20px;
min-width: 18px;
text-align: center;
}
.op-check-dark[b-ssrxpkrdsy] {
background: #F1F5F9;
color: var(--op-text);
border: 1.5px solid var(--op-border);
}
.op-check-dark:hover[b-ssrxpkrdsy] {
background: #E2E8F0;
}
.op-checkmark-dark[b-ssrxpkrdsy] {
border-color: var(--op-text-muted);
}
.op-check-dark input[type="checkbox"]:checked + .op-checkmark-dark[b-ssrxpkrdsy] {
background: var(--op-primary);
border-color: var(--op-primary);
}
.op-check-dark input[type="checkbox"]:checked + .op-checkmark-dark[b-ssrxpkrdsy]::after {
color: #FFFFFF;
}
.op-check-text-dark[b-ssrxpkrdsy] {
color: var(--op-text);
}
/* ===== 05. CRONΓMETRO + MINI BOTONES ===== */
.op-btn-play[b-ssrxpkrdsy],
.op-btn-reset[b-ssrxpkrdsy],
.op-btn-refresh[b-ssrxpkrdsy] {
width: 42px;
height: 42px;
border-radius: 12px;
border: 1.5px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.15);
color: #FFFFFF;
cursor: pointer;
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--op-transition);
}
.op-btn-play:hover[b-ssrxpkrdsy],
.op-btn-reset:hover[b-ssrxpkrdsy],
.op-btn-refresh:hover[b-ssrxpkrdsy] {
background: rgba(255, 255, 255, 0.32);
transform: translateY(-2px) scale(1.05);
}
.op-btn-play.activo[b-ssrxpkrdsy] {
background: rgba(16, 185, 129, 0.5);
border-color: rgba(16, 185, 129, 0.8);
animation: op-pulse-b-ssrxpkrdsy 1.5s ease-in-out infinite;
}
.op-mini-btn[b-ssrxpkrdsy] {
width: 36px;
height: 36px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.15);
border: 1.5px solid rgba(255, 255, 255, 0.28);
color: #FFFFFF;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: var(--op-transition);
}
.op-mini-btn:hover[b-ssrxpkrdsy] {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px) scale(1.05);
}
.op-mini-btn.activo[b-ssrxpkrdsy] {
background: rgba(139, 92, 246, 0.5);
border-color: rgba(139, 92, 246, 0.9);
}
.op-cronometro[b-ssrxpkrdsy] {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 18px;
font-weight: 800;
color: #FFFFFF;
min-width: 72px;
text-align: center;
padding: 8px 14px;
background: rgba(0, 0, 0, 0.18);
border-radius: 10px;
border: 1.5px solid rgba(255, 255, 255, 0.2);
font-variant-numeric: tabular-nums;
letter-spacing: 1px;
}
.op-cronometro.alerta[b-ssrxpkrdsy] {
color: #FCA5A5;
border-color: rgba(239, 68, 68, 0.6);
animation: op-crono-pulse-b-ssrxpkrdsy 1s ease-in-out infinite;
}
@keyframes op-crono-pulse-b-ssrxpkrdsy {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.06);
}
}
@keyframes op-pulse-b-ssrxpkrdsy {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
/* ===== 06. BOTONES ALERTAS / ESTADΓSTICAS / COLABS ===== */
.op-btn-alertas[b-ssrxpkrdsy],
.op-btn-estadisticas[b-ssrxpkrdsy],
.op-btn-colabs[b-ssrxpkrdsy] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s;
color: #FFFFFF;
font-family: inherit;
position: relative;
letter-spacing: 0.2px;
}
.op-btn-colabs[b-ssrxpkrdsy] {
background: rgba(139, 92, 246, 0.4);
border: 1.5px solid rgba(139, 92, 246, 0.75);
}
.op-btn-colabs:hover[b-ssrxpkrdsy] {
background: rgba(139, 92, 246, 0.62);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}
.op-btn-alertas[b-ssrxpkrdsy] {
background: rgba(239, 68, 68, 0.28);
border: 1.5px solid rgba(239, 68, 68, 0.55);
}
.op-btn-alertas:hover[b-ssrxpkrdsy] {
background: rgba(239, 68, 68, 0.5);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}
.op-btn-estadisticas[b-ssrxpkrdsy] {
background: rgba(16, 185, 129, 0.28);
border: 1.5px solid rgba(16, 185, 129, 0.55);
}
.op-btn-estadisticas:hover[b-ssrxpkrdsy] {
background: rgba(16, 185, 129, 0.5);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}
.op-btn-alertas-badge[b-ssrxpkrdsy] {
background: #FFFFFF;
color: #EF4444;
font-size: 10.5px;
font-weight: 800;
padding: 2px 8px;
border-radius: 20px;
min-width: 20px;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.op-btn-alertas.sirena[b-ssrxpkrdsy] {
animation: op-sirena-b-ssrxpkrdsy 1.2s infinite ease-in-out;
}
@keyframes op-sirena-b-ssrxpkrdsy {
0%, 49% {
background: #EF4444;
border-color: #FCA5A5;
box-shadow: 0 0 20px rgba(239, 68, 68, 0.85), 0 0 40px rgba(239, 68, 68, 0.4);
}
50%, 100% {
background: #3B82F6;
border-color: #93C5FD;
box-shadow: 0 0 20px rgba(59, 130, 246, 0.85), 0 0 40px rgba(59, 130, 246, 0.4);
}
}
/* ===== 07. FILTROS ===== */
.op-filtros[b-ssrxpkrdsy] {
background: var(--op-card);
border-radius: var(--op-radius);
padding: 18px 22px;
box-shadow: var(--op-shadow);
border: 1px solid var(--op-border-soft);
margin-bottom: 18px;
}
.op-filtros-grid[b-ssrxpkrdsy] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
align-items: end;
}
.op-campo[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
gap: 6px;
}
.op-campo-acciones[b-ssrxpkrdsy] {
display: flex;
gap: 8px;
align-items: flex-end;
justify-content: flex-end;
flex-direction: row;
}
.op-label[b-ssrxpkrdsy] {
font-size: 11px;
font-weight: 700;
color: var(--op-text-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.op-input[b-ssrxpkrdsy],
.op-select[b-ssrxpkrdsy] {
width: 100%;
padding: 10px 14px;
border-radius: 10px;
border: 1.5px solid var(--op-border);
font-size: 13px;
font-family: inherit;
color: var(--op-text);
background: #FFFFFF;
transition: var(--op-transition);
outline: none;
box-sizing: border-box;
}
.op-input:focus[b-ssrxpkrdsy],
.op-select:focus[b-ssrxpkrdsy] {
border-color: var(--op-primary);
box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.12);
}
.op-fecha-wrapper[b-ssrxpkrdsy] {
display: flex;
gap: 4px;
align-items: stretch;
}
.op-fecha-wrapper .op-input[b-ssrxpkrdsy] {
flex: 1;
}
.op-flechas[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
gap: 2px;
}
.op-flecha[b-ssrxpkrdsy] {
background: var(--op-primary-soft);
border: 1px solid var(--op-border);
border-radius: 5px;
width: 24px;
height: 17px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 9px;
color: var(--op-primary);
transition: var(--op-transition);
padding: 0;
}
.op-flecha:hover[b-ssrxpkrdsy] {
background: var(--op-primary-soft-2);
border-color: var(--op-primary);
}
.op-btn-aplicar[b-ssrxpkrdsy],
.op-btn-limpiar[b-ssrxpkrdsy] {
padding: 11px 18px;
border-radius: 10px;
border: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: var(--op-transition);
display: inline-flex;
align-items: center;
gap: 7px;
font-family: inherit;
white-space: nowrap;
}
.op-btn-aplicar[b-ssrxpkrdsy] {
background: linear-gradient(135deg, var(--op-primary), var(--op-primary-light));
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}
.op-btn-aplicar:hover[b-ssrxpkrdsy] {
transform: translateY(-2px);
box-shadow: var(--op-shadow-blue);
}
.op-btn-limpiar[b-ssrxpkrdsy] {
background: #F1F5F9;
color: var(--op-text-soft);
border: 1.5px solid var(--op-border);
}
.op-btn-limpiar:hover[b-ssrxpkrdsy] {
background: #E2E8F0;
transform: translateY(-2px);
}
/* ===== 08. LISTA CONTENEDOR ===== */
.op-lista[b-ssrxpkrdsy] {
background: var(--op-card);
border-radius: var(--op-radius);
box-shadow: var(--op-shadow);
border: 1px solid var(--op-border-soft);
overflow: hidden;
margin-bottom: 18px;
}
/* ===== 09. LOADING / ERROR / EMPTY ===== */
.op-loading[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 20px;
gap: 16px;
}
.op-spinner[b-ssrxpkrdsy] {
width: 44px;
height: 44px;
border: 4px solid #E2E8F0;
border-top: 4px solid var(--op-primary);
border-radius: 50%;
animation: op-spin-b-ssrxpkrdsy 0.8s linear infinite;
}
@keyframes op-spin-b-ssrxpkrdsy {
to {
transform: rotate(360deg);
}
}
.op-loading-text[b-ssrxpkrdsy] {
font-size: 14px;
color: var(--op-text-soft);
font-weight: 500;
}
.op-error-box[b-ssrxpkrdsy] {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 22px;
margin: 20px;
background: #FEF2F2;
color: #991B1B;
border-radius: 12px;
border: 1px solid #FECACA;
}
.op-error-icon[b-ssrxpkrdsy] {
font-size: 18px;
}
.op-error-text[b-ssrxpkrdsy] {
font-size: 13px;
font-weight: 600;
}
.op-empty[b-ssrxpkrdsy] {
text-align: center;
padding: 60px 20px;
}
.op-empty-icon[b-ssrxpkrdsy] {
font-size: 52px;
color: var(--op-text-muted);
margin-bottom: 12px;
display: block;
opacity: 0.6;
}
.op-empty-title[b-ssrxpkrdsy] {
font-size: 18px;
font-weight: 700;
color: var(--op-text);
margin: 0 0 4px;
}
.op-empty-text[b-ssrxpkrdsy] {
font-size: 14px;
color: var(--op-text-muted);
margin: 0;
}
/* ===== 10. GRUPOS ===== */
.op-grupos[b-ssrxpkrdsy] {
padding: 8px 0;
}
.op-grupo-fecha[b-ssrxpkrdsy] {
margin-bottom: 4px;
}
.op-grupo-cliente[b-ssrxpkrdsy],
.op-grupo-sector[b-ssrxpkrdsy],
.op-grupo-subsector[b-ssrxpkrdsy] {
margin-left: 24px;
}
.op-grupo-content[b-ssrxpkrdsy] {
animation: op-slide-down-b-ssrxpkrdsy 0.25s ease;
padding-left: 8px;
}
@keyframes op-slide-down-b-ssrxpkrdsy {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.op-grupo-head[b-ssrxpkrdsy] {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
margin: 6px 12px;
border-radius: 14px;
cursor: pointer;
user-select: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.op-grupo-head:active[b-ssrxpkrdsy] {
transform: scale(0.99);
}
.op-grupo-head-fecha[b-ssrxpkrdsy] {
background: linear-gradient(120deg, #E3F2FD 0%, #BBDEFB 60%, #90CAF9 100%);
border: 1px solid rgba(21, 101, 192, 0.25);
box-shadow: 0 4px 14px rgba(21, 101, 192, 0.12);
}
.op-grupo-head-fecha:hover[b-ssrxpkrdsy] {
box-shadow: 0 8px 24px rgba(21, 101, 192, 0.22);
transform: translateY(-1px);
}
.op-grupo-head-cliente[b-ssrxpkrdsy] {
background: linear-gradient(120deg, #F3E5F5 0%, #E1BEE7 60%, #CE93D8 100%);
border: 1px solid rgba(139, 92, 246, 0.25);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.10);
}
.op-grupo-head-cliente:hover[b-ssrxpkrdsy] {
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
transform: translateY(-1px);
}
.op-grupo-head-sector[b-ssrxpkrdsy] {
background: linear-gradient(120deg, #FFF3E0 0%, #FFE0B2 60%, #FFCC80 100%);
border: 1px solid rgba(245, 158, 11, 0.28);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.10);
}
.op-grupo-head-sector:hover[b-ssrxpkrdsy] {
box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2);
transform: translateY(-1px);
}
.op-grupo-head-subsector[b-ssrxpkrdsy] {
background: linear-gradient(120deg, #E8F5E9 0%, #C8E6C9 60%, #A5D6A7 100%);
border: 1px solid rgba(16, 185, 129, 0.28);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.10);
}
.op-grupo-head-subsector:hover[b-ssrxpkrdsy] {
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
transform: translateY(-1px);
}
.op-grupo-icon-wrap[b-ssrxpkrdsy] {
width: 38px;
height: 38px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 15px;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.op-grupo-icon-fecha[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #1565C0, #42A5F5);
}
.op-grupo-icon-cliente[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #7C3AED, #A78BFA);
}
.op-grupo-icon-sector[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #D97706, #FBBF24);
}
.op-grupo-icon-subsector[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #047857, #34D399);
}
.op-grupo-texto[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.op-grupo-titulo[b-ssrxpkrdsy] {
font-size: 14px;
font-weight: 800;
color: var(--op-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
letter-spacing: 0.2px;
}
.op-grupo-titulo-warn[b-ssrxpkrdsy] {
color: #B91C1C;
font-style: italic;
text-transform: none;
}
.op-grupo-sub[b-ssrxpkrdsy] {
font-size: 10.5px;
font-weight: 700;
color: rgba(15, 23, 41, 0.5);
text-transform: uppercase;
letter-spacing: 0.6px;
}
.op-grupo-badge[b-ssrxpkrdsy] {
font-size: 11px;
font-weight: 800;
padding: 4px 12px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.85);
color: var(--op-primary-dark);
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
letter-spacing: 0.3px;
}
.op-grupo-caret[b-ssrxpkrdsy] {
font-size: 12px;
color: rgba(15, 23, 41, 0.5);
transition: transform 0.2s;
}
/* ===== 11. AVATARES ===== */
.op-avatar[b-ssrxpkrdsy] {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--avatar-color, #FDE047);
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-weight: 800;
font-size: 14px;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 -2px 6px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.25);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
letter-spacing: 0.3px;
}
.op-avatar-lg[b-ssrxpkrdsy] {
width: 56px;
height: 56px;
font-size: 17px;
}
.op-avatar-iniciales[b-ssrxpkrdsy] {
line-height: 1;
}
/* ===== 12. PILLS ===== */
.op-pill[b-ssrxpkrdsy] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2px;
transition: all 0.2s;
white-space: nowrap;
}
.op-pill i[b-ssrxpkrdsy] {
font-size: 11px;
opacity: 0.85;
}
.op-pill-hora[b-ssrxpkrdsy] {
background: rgba(21, 101, 192, 0.10);
color: var(--op-primary-dark);
border: 1px solid rgba(21, 101, 192, 0.20);
}
.op-pill-hora:hover[b-ssrxpkrdsy] {
background: rgba(21, 101, 192, 0.18);
}
.op-pill-vehiculo[b-ssrxpkrdsy] {
background: rgba(139, 92, 246, 0.10);
color: var(--op-violet-dark);
border: 1px solid rgba(139, 92, 246, 0.20);
}
.op-pill-vehiculo:hover[b-ssrxpkrdsy] {
background: rgba(139, 92, 246, 0.18);
}
.op-pill-emoji[b-ssrxpkrdsy] {
font-size: 14px;
line-height: 1;
}
.op-colab-pill[b-ssrxpkrdsy] {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
background: linear-gradient(135deg, rgba(21, 101, 192, 0.12), rgba(66, 165, 245, 0.15));
color: var(--op-primary-dark);
border: 1px solid rgba(21, 101, 192, 0.22);
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 0.2px;
}
.op-marco-ok[b-ssrxpkrdsy],
.op-marco-no[b-ssrxpkrdsy] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
border-radius: 20px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.3px;
white-space: nowrap;
}
.op-marco-ok[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
color: #166534;
border: 1px solid rgba(16, 185, 129, 0.35);
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}
.op-marco-no[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #FEE2E2, #FECACA);
color: #991B1B;
border: 1px solid rgba(239, 68, 68, 0.35);
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15);
}
.op-tag-urgente[b-ssrxpkrdsy] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.4px;
background: linear-gradient(135deg, #EF4444, #F97316);
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
animation: op-tag-pulse-b-ssrxpkrdsy 1.8s ease-in-out infinite;
}
@keyframes op-tag-pulse-b-ssrxpkrdsy {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
50% {
transform: scale(1.06);
box-shadow: 0 4px 18px rgba(239, 68, 68, 0.65);
}
}
/* ===== 13. MODO LISTA β BURBUJAS (CLICKABLE) ===== */
.op-burbujas[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 20px 14px 44px;
}
.op-burbuja[b-ssrxpkrdsy] {
display: grid;
grid-template-columns: auto 1fr auto auto auto;
gap: 16px;
align-items: center;
padding: 14px 20px;
background: linear-gradient(120deg, #FFFFFF 0%, #FAFCFF 100%);
border-radius: 18px;
border: 1px solid var(--op-border-soft);
box-shadow: 0 4px 14px rgba(15, 23, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
cursor: pointer;
}
.op-burbuja[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--op-primary) 0%, var(--op-primary-light) 100%);
transition: width 0.3s;
}
.op-burbuja:hover[b-ssrxpkrdsy] {
transform: translateX(6px);
border-color: var(--op-primary-lighter);
box-shadow: 0 12px 32px rgba(21, 101, 192, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.op-burbuja:hover[b-ssrxpkrdsy]::before {
width: 6px;
}
.op-burbuja.urgente[b-ssrxpkrdsy] {
background: linear-gradient(120deg, #FFF7F7 0%, #FFFFFF 100%);
border-color: rgba(239, 68, 68, 0.3);
}
.op-burbuja.urgente[b-ssrxpkrdsy]::before {
background: linear-gradient(180deg, #EF4444 0%, #F97316 100%);
animation: op-fila-urgente-b-ssrxpkrdsy 2s ease-in-out infinite;
}
@keyframes op-fila-urgente-b-ssrxpkrdsy {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.op-burbuja-main[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.op-burbuja-cliente[b-ssrxpkrdsy] {
font-size: 14.5px;
font-weight: 800;
color: var(--op-text);
letter-spacing: 0.1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-burbuja-lugar[b-ssrxpkrdsy] {
display: flex;
gap: 6px;
align-items: center;
font-size: 12px;
font-weight: 600;
color: var(--op-text-soft);
}
.op-burbuja-sep[b-ssrxpkrdsy] {
color: var(--op-text-muted);
}
.op-burbuja-pills[b-ssrxpkrdsy] {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.op-burbuja-colab[b-ssrxpkrdsy] {
display: flex;
gap: 8px;
align-items: center;
padding-left: 16px;
border-left: 1px dashed var(--op-border);
}
.op-burbuja-acciones[b-ssrxpkrdsy] {
display: flex;
gap: 4px;
align-items: center;
padding-left: 12px;
border-left: 1px dashed var(--op-border);
}
/* ===== 14. MODO MOSAICO β CARDS ===== */
.op-mosaico-grid[b-ssrxpkrdsy] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 14px;
padding: 12px 20px 16px 44px;
}
.op-mosaico-card[b-ssrxpkrdsy] {
background: linear-gradient(160deg, #FFFFFF 0%, #FAFCFF 100%);
border-radius: 18px;
padding: 16px 18px;
border: 1px solid var(--op-border-soft);
box-shadow: 0 4px 14px rgba(15, 23, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
gap: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
cursor: pointer;
}
.op-mosaico-card[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--op-primary) 0%, var(--op-primary-light) 100%);
transition: width 0.3s;
}
.op-mosaico-card:hover[b-ssrxpkrdsy] {
transform: translateY(-6px);
border-color: var(--op-primary-lighter);
box-shadow: 0 18px 40px rgba(21, 101, 192, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.op-mosaico-card:hover[b-ssrxpkrdsy]::before {
width: 6px;
}
.op-mosaico-card.urgente[b-ssrxpkrdsy] {
background: linear-gradient(160deg, #FFF7F7 0%, #FFFFFF 100%);
border-color: rgba(239, 68, 68, 0.3);
}
.op-mosaico-card.urgente[b-ssrxpkrdsy]::before {
background: linear-gradient(180deg, #EF4444 0%, #F97316 100%);
animation: op-fila-urgente-b-ssrxpkrdsy 2s ease-in-out infinite;
}
.op-mosaico-top[b-ssrxpkrdsy] {
display: flex;
gap: 12px;
align-items: center;
}
.op-mosaico-ubi[b-ssrxpkrdsy] {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.op-mosaico-cliente[b-ssrxpkrdsy] {
font-size: 14.5px;
font-weight: 800;
color: var(--op-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-mosaico-lugar[b-ssrxpkrdsy] {
font-size: 12px;
font-weight: 600;
color: var(--op-text-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-mosaico-pills[b-ssrxpkrdsy] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.op-mosaico-footer[b-ssrxpkrdsy] {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
padding-top: 10px;
border-top: 1px dashed var(--op-border);
}
.op-mosaico-marcas[b-ssrxpkrdsy] {
font-size: 10.5px;
color: var(--op-text-muted);
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 4px 10px;
background: var(--op-primary-soft);
border-radius: 8px;
}
.op-mosaico-acciones[b-ssrxpkrdsy] {
display: flex;
justify-content: flex-end;
gap: 4px;
padding-top: 8px;
}
/* ===== 15. BOTONES DE ACCIΓN ===== */
.op-acciones[b-ssrxpkrdsy] {
display: flex;
gap: 6px;
justify-content: flex-end;
align-items: center;
}
.op-page[b-ssrxpkrdsy] .op-accion {
width: 36px;
height: 36px;
border-radius: 11px;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 13.5px;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
flex-shrink: 0;
position: relative;
overflow: hidden;
isolation: isolate;
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14), inset 0 -2px 6px rgba(0, 0, 0, 0.12), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}
.op-page[b-ssrxpkrdsy] .op-accion i {
position: relative;
z-index: 2;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.op-page[b-ssrxpkrdsy] .op-accion::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
transform: translateX(-120%);
transition: transform 0.6s ease;
z-index: 1;
}
.op-page[b-ssrxpkrdsy] .op-accion:hover::before {
transform: translateX(120%);
}
.op-page[b-ssrxpkrdsy] .op-accion:hover {
transform: translateY(-4px) scale(1.12);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24), 0 0 0 4px rgba(255, 255, 255, 0.4), inset 0 -2px 6px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.35);
}
.op-page[b-ssrxpkrdsy] .op-accion:hover i {
transform: scale(1.15) rotate(-4deg);
}
.op-page[b-ssrxpkrdsy] .op-accion:active {
transform: translateY(-1px) scale(0.96);
transition: all 0.1s ease;
}
.op-page[b-ssrxpkrdsy] .op-accion-editar {
background: #2563EB;
background-image: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #60A5FA 100%);
}
.op-page[b-ssrxpkrdsy] .op-accion-editar:hover {
background-image: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #3B82F6 100%);
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.5), 0 0 0 4px rgba(59, 130, 246, 0.25), 0 0 22px rgba(59, 130, 246, 0.6);
}
.op-page[b-ssrxpkrdsy] .op-accion-editar:hover i {
animation: op-icon-wiggle-b-ssrxpkrdsy 0.5s ease;
}
.op-page[b-ssrxpkrdsy] .op-accion-anular {
background: #D97706;
background-image: linear-gradient(135deg, #D97706 0%, #F59E0B 50%, #FBBF24 100%);
}
.op-page[b-ssrxpkrdsy] .op-accion-anular:hover {
background-image: linear-gradient(135deg, #B45309 0%, #D97706 50%, #F59E0B 100%);
box-shadow: 0 12px 24px rgba(217, 119, 6, 0.5), 0 0 0 4px rgba(245, 158, 11, 0.25), 0 0 22px rgba(245, 158, 11, 0.6);
}
.op-page[b-ssrxpkrdsy] .op-accion-anular:hover i {
animation: op-icon-shake-b-ssrxpkrdsy 0.5s ease;
}
.op-page[b-ssrxpkrdsy] .op-accion-eliminar {
background: #DC2626;
background-image: linear-gradient(135deg, #DC2626 0%, #EF4444 50%, #F87171 100%);
}
.op-page[b-ssrxpkrdsy] .op-accion-eliminar:hover {
background-image: linear-gradient(135deg, #991B1B 0%, #DC2626 50%, #EF4444 100%);
box-shadow: 0 12px 24px rgba(220, 38, 38, 0.5), 0 0 0 4px rgba(239, 68, 68, 0.25), 0 0 22px rgba(239, 68, 68, 0.6);
}
.op-page[b-ssrxpkrdsy] .op-accion-eliminar:hover i {
animation: op-icon-shake-b-ssrxpkrdsy 0.5s ease;
}
.op-page[b-ssrxpkrdsy] .op-accion-ver {
background: #7C3AED;
background-image: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%);
}
.op-page[b-ssrxpkrdsy] .op-accion-ver:hover {
background-image: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #8B5CF6 100%);
box-shadow: 0 12px 24px rgba(124, 58, 237, 0.5), 0 0 0 4px rgba(139, 92, 246, 0.25), 0 0 22px rgba(139, 92, 246, 0.6);
}
.op-page[b-ssrxpkrdsy] .op-accion-ver:hover i {
animation: op-icon-pop-b-ssrxpkrdsy 0.5s ease;
}
@keyframes op-icon-wiggle-b-ssrxpkrdsy {
0%, 100% {
transform: scale(1.15) rotate(-4deg);
}
25% {
transform: scale(1.2) rotate(-10deg);
}
75% {
transform: scale(1.2) rotate(6deg);
}
}
@keyframes op-icon-shake-b-ssrxpkrdsy {
0%, 100% {
transform: scale(1.15);
}
20% {
transform: scale(1.2) rotate(-12deg);
}
40% {
transform: scale(1.2) rotate(12deg);
}
60% {
transform: scale(1.2) rotate(-8deg);
}
80% {
transform: scale(1.2) rotate(8deg);
}
}
@keyframes op-icon-pop-b-ssrxpkrdsy {
0% {
transform: scale(1.15);
}
50% {
transform: scale(1.4);
}
100% {
transform: scale(1.15);
}
}
/* ===== 16. PAGINACIΓN ===== */
.op-paginacion[b-ssrxpkrdsy] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 22px;
background: linear-gradient(135deg, #FAFBFD 0%, #F5F8FC 100%);
border-top: 1px solid var(--op-border-soft);
gap: 12px;
flex-wrap: wrap;
}
.op-paginacion-info[b-ssrxpkrdsy] {
font-size: 12.5px;
color: var(--op-text-soft);
font-weight: 600;
}
.op-paginacion-botones[b-ssrxpkrdsy] {
display: flex;
gap: 4px;
align-items: center;
}
.op-btn-pagina[b-ssrxpkrdsy] {
min-width: 34px;
height: 34px;
padding: 0 10px;
border-radius: 8px;
border: 1.5px solid var(--op-border);
background: #FFFFFF;
color: var(--op-text-soft);
font-weight: 700;
font-size: 12.5px;
cursor: pointer;
transition: var(--op-transition);
font-family: inherit;
}
.op-btn-pagina:hover:not(:disabled)[b-ssrxpkrdsy] {
background: var(--op-primary-soft);
border-color: var(--op-primary);
color: var(--op-primary);
transform: translateY(-2px);
}
.op-btn-pagina.active[b-ssrxpkrdsy] {
background: linear-gradient(135deg, var(--op-primary), var(--op-primary-light));
color: #FFFFFF;
border-color: var(--op-primary);
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
animation: op-page-glow-b-ssrxpkrdsy 2s ease-in-out infinite alternate;
}
@keyframes op-page-glow-b-ssrxpkrdsy {
from {
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}
to {
box-shadow: 0 4px 20px rgba(21, 101, 192, 0.55);
}
}
.op-btn-pagina:disabled[b-ssrxpkrdsy] {
opacity: 0.4;
cursor: not-allowed;
}
.op-pagina-ellipsis[b-ssrxpkrdsy] {
padding: 0 6px;
color: var(--op-text-muted);
font-weight: 700;
}
/* ===== 17. MODALES BASE ===== */
.op-modal-overlay[b-ssrxpkrdsy] {
position: fixed;
inset: 0;
background: radial-gradient(circle at center, rgba(10, 56, 128, 0.6) 0%, rgba(15, 23, 41, 0.78) 100%);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 20px;
animation: op-fade-in-b-ssrxpkrdsy 0.25s ease;
}
@keyframes op-fade-in-b-ssrxpkrdsy {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.op-modal[b-ssrxpkrdsy] {
background: #FFFFFF;
border-radius: var(--op-radius-lg);
box-shadow: 0 32px 80px rgba(10, 56, 128, 0.4), 0 8px 24px rgba(15, 23, 41, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
width: 100%;
max-height: 92vh;
display: flex;
flex-direction: column;
animation: op-slide-in-b-ssrxpkrdsy 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
position: relative;
}
.op-modal[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at 0% 0%, rgba(21, 101, 192, 0.04) 0%, transparent 30%), radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.03) 0%, transparent 30%);
z-index: 0;
}
.op-modal > *[b-ssrxpkrdsy] {
position: relative;
z-index: 1;
}
@keyframes op-slide-in-b-ssrxpkrdsy {
from {
opacity: 0;
transform: translateY(30px) scale(0.92);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.op-modal-sm[b-ssrxpkrdsy] {
max-width: 460px;
}
.op-modal-md[b-ssrxpkrdsy] {
max-width: 680px;
}
.op-modal-lg[b-ssrxpkrdsy] {
max-width: 900px;
}
.op-modal-xl[b-ssrxpkrdsy] {
max-width: 1300px;
width: 96vw;
}
.op-modal-header[b-ssrxpkrdsy] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 26px;
background: linear-gradient(135deg, var(--op-primary-darker) 0%, var(--op-primary) 50%, var(--op-primary-light) 100%);
color: #FFFFFF;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.op-modal-header[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 65%);
pointer-events: none;
}
.op-modal-header[b-ssrxpkrdsy]::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
animation: op-header-shine-b-ssrxpkrdsy 3s ease-in-out infinite;
}
@keyframes op-header-shine-b-ssrxpkrdsy {
0%, 100% {
transform: translateX(-50%);
opacity: 0.3;
}
50% {
transform: translateX(50%);
opacity: 0.8;
}
}
.op-modal-header-danger[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #7F1D1D 0%, #B91C1C 40%, #EF4444 100%);
}
.op-modal-header-danger[b-ssrxpkrdsy]::after {
background: linear-gradient(90deg, transparent, rgba(255, 200, 200, 0.8), transparent);
}
.op-modal-header-warning[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #78350F 0%, #B45309 40%, #F59E0B 100%);
}
.op-modal-header-alertas[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #7F1D1D 0%, #DC2626 40%, #EF4444 70%, #F97316 100%);
}
.op-modal-header-alertas[b-ssrxpkrdsy]::after {
background: linear-gradient(90deg, transparent, rgba(255, 200, 200, 0.9), transparent);
animation: op-header-shine-b-ssrxpkrdsy 2s ease-in-out infinite;
}
.op-modal-header-stats[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #064E3B 0%, #059669 40%, #10B981 70%, #34D399 100%);
}
.op-modal-header-stats[b-ssrxpkrdsy]::after {
background: linear-gradient(90deg, transparent, rgba(200, 255, 220, 0.9), transparent);
}
.op-modal-header-colabs[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 40%, #A78BFA 70%, #C4B5FD 100%);
}
.op-modal-header-colabs[b-ssrxpkrdsy]::after {
background: linear-gradient(90deg, transparent, rgba(220, 200, 255, 0.9), transparent);
}
.op-modal-header-detalle[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #0A3880 0%, #1565C0 40%, #2196F3 70%, #64B5F6 100%);
}
.op-modal-header-detalle[b-ssrxpkrdsy]::after {
background: linear-gradient(90deg, transparent, rgba(200, 230, 255, 0.9), transparent);
}
.op-modal-title[b-ssrxpkrdsy] {
margin: 0;
font-size: 17px;
font-weight: 800;
display: flex;
align-items: center;
gap: 12px;
letter-spacing: 0.3px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
position: relative;
z-index: 1;
}
.op-modal-title i[b-ssrxpkrdsy] {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.25);
font-size: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}
.op-modal-title-badge[b-ssrxpkrdsy] {
background: rgba(255, 255, 255, 0.25);
color: #FFFFFF;
font-size: 12px;
font-weight: 800;
padding: 4px 14px;
border-radius: 20px;
min-width: 32px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.op-modal-close[b-ssrxpkrdsy] {
background: rgba(255, 255, 255, 0.15);
border: 1.5px solid rgba(255, 255, 255, 0.3);
color: #FFFFFF;
font-size: 22px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--op-transition);
line-height: 1;
font-weight: 300;
position: relative;
z-index: 1;
}
.op-modal-close:hover[b-ssrxpkrdsy] {
background: rgba(255, 255, 255, 0.35);
border-color: rgba(255, 255, 255, 0.6);
transform: rotate(90deg) scale(1.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.op-modal-body[b-ssrxpkrdsy] {
padding: 26px 28px;
overflow-y: auto;
flex: 1;
background: #FFFFFF;
scrollbar-width: thin;
scrollbar-color: var(--op-primary-light) rgba(21, 101, 192, 0.05);
}
.op-modal-body[b-ssrxpkrdsy]::-webkit-scrollbar {
width: 10px;
}
.op-modal-body[b-ssrxpkrdsy]::-webkit-scrollbar-track {
background: rgba(21, 101, 192, 0.05);
border-radius: 10px;
}
.op-modal-body[b-ssrxpkrdsy]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--op-primary-light), var(--op-primary));
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.7);
}
.op-modal-body[b-ssrxpkrdsy]::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--op-primary), var(--op-primary-dark));
}
.op-modal-body-center[b-ssrxpkrdsy] {
text-align: center;
}
.op-modal-seccion[b-ssrxpkrdsy] {
margin-bottom: 22px;
padding: 18px 20px;
border-radius: 14px;
background: linear-gradient(135deg, #FAFBFD 0%, #F5F8FC 100%);
border: 1px solid var(--op-border-soft);
border-left: 4px solid var(--op-primary);
position: relative;
transition: all 0.25s ease;
}
.op-modal-seccion:hover[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #FFFFFF 0%, #F8FBFF 100%);
box-shadow: 0 4px 14px rgba(21, 101, 192, 0.08);
}
.op-modal-seccion:last-child[b-ssrxpkrdsy] {
margin-bottom: 0;
}
.op-modal-seccion:nth-of-type(1)[b-ssrxpkrdsy] {
border-left-color: #3B82F6;
}
.op-modal-seccion:nth-of-type(2)[b-ssrxpkrdsy] {
border-left-color: #8B5CF6;
}
.op-modal-seccion:nth-of-type(3)[b-ssrxpkrdsy] {
border-left-color: #EC4899;
}
.op-modal-seccion:nth-of-type(4)[b-ssrxpkrdsy] {
border-left-color: #06B6D4;
}
.op-modal-seccion:nth-of-type(5)[b-ssrxpkrdsy] {
border-left-color: #F59E0B;
}
.op-modal-seccion:nth-of-type(6)[b-ssrxpkrdsy] {
border-left-color: #10B981;
}
.op-modal-seccion-title[b-ssrxpkrdsy] {
font-size: 14px;
font-weight: 800;
color: var(--op-primary-dark);
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.op-modal-seccion-title i[b-ssrxpkrdsy] {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: linear-gradient(135deg, var(--op-primary), var(--op-primary-light));
color: #FFFFFF;
font-size: 12px;
box-shadow: 0 3px 8px rgba(21, 101, 192, 0.3);
}
.op-modal-seccion:nth-of-type(1) .op-modal-seccion-title i[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #2563EB, #60A5FA);
}
.op-modal-seccion:nth-of-type(2) .op-modal-seccion-title i[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #7C3AED, #A78BFA);
}
.op-modal-seccion:nth-of-type(3) .op-modal-seccion-title i[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #DB2777, #F472B6);
}
.op-modal-seccion:nth-of-type(4) .op-modal-seccion-title i[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #0E7490, #22D3EE);
}
.op-modal-seccion:nth-of-type(5) .op-modal-seccion-title i[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #B45309, #FBBF24);
}
.op-modal-seccion:nth-of-type(6) .op-modal-seccion-title i[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #047857, #34D399);
}
.op-modal-grid-2[b-ssrxpkrdsy] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.op-modal-grid-2-mt[b-ssrxpkrdsy] {
margin-top: 12px;
}
.op-modal-campo[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
gap: 6px;
}
.op-modal-full[b-ssrxpkrdsy] {
grid-column: 1 / -1;
}
.op-modal-label[b-ssrxpkrdsy] {
font-size: 11px;
font-weight: 800;
color: var(--op-text-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 4px;
}
.op-modal-input[b-ssrxpkrdsy],
.op-modal-select[b-ssrxpkrdsy],
.op-modal-textarea[b-ssrxpkrdsy] {
padding: 10px 14px;
border-radius: 10px;
border: 1.5px solid var(--op-border);
font-size: 13px;
font-family: inherit;
color: var(--op-text);
background: #FFFFFF;
transition: var(--op-transition);
outline: none;
width: 100%;
box-sizing: border-box;
}
.op-modal-input:hover[b-ssrxpkrdsy],
.op-modal-select:hover[b-ssrxpkrdsy],
.op-modal-textarea:hover[b-ssrxpkrdsy] {
border-color: var(--op-primary-lighter);
}
.op-modal-textarea[b-ssrxpkrdsy] {
resize: vertical;
min-height: 70px;
}
.op-modal-input:focus[b-ssrxpkrdsy],
.op-modal-select:focus[b-ssrxpkrdsy],
.op-modal-textarea:focus[b-ssrxpkrdsy] {
border-color: var(--op-primary);
box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.15);
background: #FFFFFF;
}
.op-no-edit[b-ssrxpkrdsy] {
background: repeating-linear-gradient(45deg, #F8FAFC 0px, #F8FAFC 4px, #F1F5F9 4px, #F1F5F9 8px);
color: var(--op-text-muted);
cursor: not-allowed;
}
.op-no-edit-ok[b-ssrxpkrdsy] {
color: #166534;
font-weight: 800;
background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
border-color: rgba(16, 185, 129, 0.4);
}
.op-no-edit-err[b-ssrxpkrdsy] {
color: #991B1B;
font-weight: 800;
background: linear-gradient(135deg, #FEE2E2, #FECACA);
border-color: rgba(239, 68, 68, 0.4);
}
.op-modal-footer[b-ssrxpkrdsy] {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 18px 26px;
border-top: 2px solid var(--op-border-soft);
background: linear-gradient(135deg, #FAFBFD 0%, #F5F8FC 100%);
flex-shrink: 0;
position: relative;
}
.op-modal-footer[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--op-primary-lighter), transparent);
}
.op-btn-modal-cancelar[b-ssrxpkrdsy],
.op-btn-modal-guardar[b-ssrxpkrdsy],
.op-btn-modal-eliminar[b-ssrxpkrdsy],
.op-btn-modal-warning[b-ssrxpkrdsy],
.op-btn-modal-editar[b-ssrxpkrdsy] {
padding: 11px 24px;
border-radius: 11px;
border: none;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
display: inline-flex;
align-items: center;
gap: 8px;
font-family: inherit;
letter-spacing: 0.3px;
position: relative;
overflow: hidden;
}
.op-btn-modal-cancelar[b-ssrxpkrdsy]::before,
.op-btn-modal-guardar[b-ssrxpkrdsy]::before,
.op-btn-modal-eliminar[b-ssrxpkrdsy]::before,
.op-btn-modal-warning[b-ssrxpkrdsy]::before,
.op-btn-modal-editar[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
transform: translateX(-120%);
transition: transform 0.6s ease;
}
.op-btn-modal-cancelar:hover[b-ssrxpkrdsy]::before,
.op-btn-modal-guardar:hover[b-ssrxpkrdsy]::before,
.op-btn-modal-eliminar:hover[b-ssrxpkrdsy]::before,
.op-btn-modal-warning:hover[b-ssrxpkrdsy]::before,
.op-btn-modal-editar:hover[b-ssrxpkrdsy]::before {
transform: translateX(120%);
}
.op-btn-modal-cancelar[b-ssrxpkrdsy] {
background: #FFFFFF;
color: var(--op-text-soft);
border: 1.5px solid var(--op-border);
}
.op-btn-modal-cancelar:hover[b-ssrxpkrdsy] {
background: #F1F5F9;
border-color: var(--op-text-muted);
transform: translateY(-2px);
}
.op-btn-modal-guardar[b-ssrxpkrdsy] {
background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary-light) 100%);
color: #FFFFFF;
box-shadow: 0 6px 18px rgba(21, 101, 192, 0.35);
}
.op-btn-modal-guardar:hover:not(:disabled)[b-ssrxpkrdsy] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(21, 101, 192, 0.5);
}
.op-btn-modal-guardar:disabled[b-ssrxpkrdsy] {
opacity: 0.5;
cursor: not-allowed;
}
.op-btn-modal-editar[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
color: #FFFFFF;
box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35);
}
.op-btn-modal-editar:hover[b-ssrxpkrdsy] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(139, 92, 246, 0.55);
}
.op-btn-modal-eliminar[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #991B1B 0%, #EF4444 100%);
color: #FFFFFF;
box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}
.op-btn-modal-eliminar:hover[b-ssrxpkrdsy] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(239, 68, 68, 0.55);
}
.op-btn-modal-warning[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #B45309 0%, #F59E0B 100%);
color: #FFFFFF;
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}
.op-btn-modal-warning:hover[b-ssrxpkrdsy] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(245, 158, 11, 0.55);
}
/* ===== 18. MODAL ALERTAS / COLABS β 3 COLUMNAS ===== */
.op-alertas-grid-modal[b-ssrxpkrdsy] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
align-items: start;
}
.op-alertas-col[b-ssrxpkrdsy] {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--op-border-soft);
background: #FFFFFF;
display: flex;
flex-direction: column;
max-height: 70vh;
min-height: 380px;
box-shadow: 0 6px 20px rgba(15, 23, 41, 0.08);
}
.op-alertas-col-head[b-ssrxpkrdsy] {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
color: #FFFFFF;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.3px;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.op-alertas-col-head[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 65%);
pointer-events: none;
}
.op-alertas-col-repetido .op-alertas-col-head[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #92400E 0%, #D97706 50%, #F59E0B 100%);
}
.op-alertas-col-solapado .op-alertas-col-head[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #7F1D1D 0%, #DC2626 50%, #EF4444 100%);
}
.op-alertas-col-sinasignar .op-alertas-col-head[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 50%, #3B82F6 100%);
}
.op-alertas-col-trabajando .op-alertas-col-head[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #064E3B 0%, #059669 50%, #10B981 100%);
}
.op-alertas-col-disponibles .op-alertas-col-head[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 50%, #3B82F6 100%);
}
.op-alertas-col-descanso .op-alertas-col-head[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #374151 0%, #6B7280 50%, #9CA3AF 100%);
}
.op-alertas-col-head i[b-ssrxpkrdsy] {
font-size: 17px;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}
.op-alertas-col-badge[b-ssrxpkrdsy] {
margin-left: auto;
background: rgba(255, 255, 255, 0.35);
padding: 4px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 800;
min-width: 32px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.op-alertas-col-body[b-ssrxpkrdsy] {
padding: 14px;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
scrollbar-width: thin;
scrollbar-color: var(--op-primary-light) rgba(21, 101, 192, 0.08);
scrollbar-gutter: stable;
}
.op-alertas-col-body[b-ssrxpkrdsy]::-webkit-scrollbar {
width: 10px;
}
.op-alertas-col-body[b-ssrxpkrdsy]::-webkit-scrollbar-track {
background: rgba(21, 101, 192, 0.06);
border-radius: 10px;
}
.op-alertas-col-body[b-ssrxpkrdsy]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--op-primary-light), var(--op-primary));
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.op-alertas-col-repetido .op-alertas-col-body[b-ssrxpkrdsy]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #F59E0B, #D97706);
}
.op-alertas-col-solapado .op-alertas-col-body[b-ssrxpkrdsy]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #EF4444, #DC2626);
}
.op-alertas-col-sinasignar .op-alertas-col-body[b-ssrxpkrdsy]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #3B82F6, #2563EB);
}
.op-alertas-col-trabajando .op-alertas-col-body[b-ssrxpkrdsy]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #10B981, #059669);
}
.op-alertas-col-disponibles .op-alertas-col-body[b-ssrxpkrdsy]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #3B82F6, #2563EB);
}
.op-alertas-col-descanso .op-alertas-col-body[b-ssrxpkrdsy]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #9CA3AF, #6B7280);
}
/* Tarjetas de grupo β CON ESPACIO GARANTIZADO */
.op-alerta-grupo[b-ssrxpkrdsy] {
background: linear-gradient(120deg, #F8FAFC 0%, #FFFFFF 100%);
border-radius: 14px;
border: 1px solid var(--op-border-soft);
overflow: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
width: 100%;
margin-bottom: 4px;
flex-shrink: 0;
}
.op-alerta-grupo[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
transition: width 0.3s;
}
.op-alertas-col-repetido .op-alerta-grupo[b-ssrxpkrdsy]::before {
background: linear-gradient(180deg, #F59E0B, #FBBF24);
}
.op-alertas-col-solapado .op-alerta-grupo[b-ssrxpkrdsy]::before {
background: linear-gradient(180deg, #EF4444, #F87171);
}
.op-alertas-col-sinasignar .op-alerta-grupo[b-ssrxpkrdsy]::before {
background: linear-gradient(180deg, #3B82F6, #60A5FA);
}
.op-alertas-col-trabajando .op-alerta-grupo[b-ssrxpkrdsy]::before {
background: linear-gradient(180deg, #10B981, #34D399);
}
.op-alerta-grupo:hover[b-ssrxpkrdsy] {
box-shadow: 0 8px 22px rgba(15, 23, 41, 0.1);
transform: translateY(-2px);
}
.op-alerta-grupo:hover[b-ssrxpkrdsy]::before {
width: 5px;
}
.op-alerta-grupo.abierto[b-ssrxpkrdsy] {
border-color: var(--op-primary-lighter);
box-shadow: 0 10px 26px rgba(21, 101, 192, 0.15);
background: #FFFFFF;
}
.op-alerta-grupo-head[b-ssrxpkrdsy] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px 12px 18px;
cursor: pointer;
user-select: none;
transition: background 0.2s;
}
.op-alerta-grupo-head:hover[b-ssrxpkrdsy] {
background: rgba(21, 101, 192, 0.04);
}
.op-alerta-avatar[b-ssrxpkrdsy] {
width: 42px;
height: 42px;
border-radius: 13px;
background: var(--avatar-color, #94A3B8);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 -2px 5px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.28);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
letter-spacing: 0.3px;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.op-alerta-avatar-sm[b-ssrxpkrdsy] {
width: 38px;
height: 38px;
font-size: 12px;
border-radius: 11px;
}
.op-alerta-avatar-warn[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #64748B, #94A3B8);
}
.op-alerta-grupo-info[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.op-alerta-grupo-nombre[b-ssrxpkrdsy] {
font-size: 13.5px;
font-weight: 800;
color: var(--op-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-alerta-grupo-sub[b-ssrxpkrdsy] {
font-size: 10.5px;
color: var(--op-text-muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-alerta-grupo-count[b-ssrxpkrdsy] {
font-size: 11.5px;
font-weight: 800;
padding: 4px 12px;
border-radius: 20px;
min-width: 28px;
text-align: center;
color: #FFFFFF;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.op-alertas-col-repetido .op-alerta-grupo-count[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.op-alertas-col-solapado .op-alerta-grupo-count[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #EF4444, #DC2626);
}
.op-alertas-col-sinasignar .op-alerta-grupo-count[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #3B82F6, #2563EB);
}
.op-alertas-col-trabajando .op-alerta-grupo-count[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #10B981, #059669);
}
.op-alerta-grupo-caret[b-ssrxpkrdsy] {
font-size: 12px;
color: var(--op-text-muted);
transition: transform 0.25s;
}
.op-alerta-grupo.abierto .op-alerta-grupo-caret[b-ssrxpkrdsy] {
color: var(--op-primary);
}
.op-alerta-grupo-body[b-ssrxpkrdsy] {
padding: 6px 14px 14px 18px;
display: flex;
flex-direction: column;
gap: 8px;
animation: op-slide-down-b-ssrxpkrdsy 0.3s ease;
background: linear-gradient(180deg, transparent 0%, rgba(21, 101, 192, 0.03) 100%);
border-top: 1px dashed var(--op-border);
}
.op-alerta-tarea[b-ssrxpkrdsy] {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
background: #FFFFFF;
border-radius: 10px;
font-size: 12px;
flex-wrap: wrap;
border: 1px solid var(--op-border-soft);
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.op-alerta-tarea[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
}
.op-alertas-col-repetido .op-alerta-tarea[b-ssrxpkrdsy]::before {
background: #F59E0B;
}
.op-alertas-col-solapado .op-alerta-tarea[b-ssrxpkrdsy]::before {
background: #EF4444;
}
.op-alertas-col-sinasignar .op-alerta-tarea[b-ssrxpkrdsy]::before {
background: #3B82F6;
}
.op-alertas-col-trabajando .op-alerta-tarea[b-ssrxpkrdsy]::before {
background: #10B981;
}
.op-alerta-tarea:hover[b-ssrxpkrdsy] {
background: #FAFCFF;
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(15, 23, 41, 0.08);
}
.op-alerta-tarea-hora[b-ssrxpkrdsy] {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 800;
padding: 4px 10px;
border-radius: 8px;
font-size: 11.5px;
white-space: nowrap;
color: #FFFFFF;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.op-alertas-col-repetido .op-alerta-tarea-hora[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.op-alertas-col-solapado .op-alerta-tarea-hora[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #EF4444, #DC2626);
}
.op-alertas-col-sinasignar .op-alerta-tarea-hora[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #3B82F6, #2563EB);
}
.op-alertas-col-trabajando .op-alerta-tarea-hora[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #10B981, #059669);
}
.op-alerta-tarea-hora i[b-ssrxpkrdsy] {
font-size: 10px;
opacity: 0.85;
}
.op-alerta-tarea-cliente[b-ssrxpkrdsy] {
font-weight: 700;
color: var(--op-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 140px;
}
.op-alerta-tarea-lugar[b-ssrxpkrdsy] {
font-size: 11px;
color: var(--op-text-muted);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 120px;
}
/* Item de colaborador (Disponibles / Descanso) */
.op-colab-item[b-ssrxpkrdsy] {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: linear-gradient(120deg, #F8FAFC 0%, #FFFFFF 100%);
border-radius: 12px;
border: 1px solid var(--op-border-soft);
transition: all 0.2s ease;
position: relative;
overflow: hidden;
width: 100%;
flex-shrink: 0;
}
.op-colab-item[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #94A3B8, #CBD5E1);
transition: width 0.3s;
}
.op-alertas-col-disponibles .op-colab-item[b-ssrxpkrdsy]::before {
background: linear-gradient(180deg, #3B82F6, #60A5FA);
}
.op-alertas-col-descanso .op-colab-item[b-ssrxpkrdsy]::before {
background: linear-gradient(180deg, #9CA3AF, #D1D5DB);
}
.op-colab-item:hover[b-ssrxpkrdsy] {
background: #FFFFFF;
transform: translateX(4px);
box-shadow: 0 6px 16px rgba(15, 23, 41, 0.1);
}
.op-colab-item:hover[b-ssrxpkrdsy]::before {
width: 5px;
}
.op-alertas-descanso-badge[b-ssrxpkrdsy] {
margin-left: auto;
background: #F3F4F6;
color: #6B7280;
font-size: 10px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
white-space: nowrap;
border: 1px solid #E5E7EB;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.op-alertas-empty[b-ssrxpkrdsy] {
text-align: center;
color: var(--op-text-muted);
font-size: 13px;
padding: 40px 16px;
font-weight: 700;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.op-alertas-empty i[b-ssrxpkrdsy] {
font-size: 40px;
color: var(--op-success);
opacity: 0.6;
animation: op-empty-pulse-b-ssrxpkrdsy 2s ease-in-out infinite;
}
@keyframes op-empty-pulse-b-ssrxpkrdsy {
0%, 100% {
transform: scale(1);
opacity: 0.6;
}
50% {
transform: scale(1.12);
opacity: 1;
}
}
/* ===== 19. MODAL ESTADΓSTICAS ===== */
.op-stats-modal-grid[b-ssrxpkrdsy] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 16px;
}
.op-stats-card[b-ssrxpkrdsy] {
background: #FFFFFF;
border-radius: 16px;
border: 1px solid var(--op-border-soft);
box-shadow: 0 6px 20px rgba(15, 23, 41, 0.06);
padding: 18px 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.op-stats-card[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--op-primary), var(--op-primary-light));
}
.op-stats-card:nth-child(1)[b-ssrxpkrdsy]::before {
background: linear-gradient(90deg, #2563EB, #60A5FA);
}
.op-stats-card:nth-child(2)[b-ssrxpkrdsy]::before {
background: linear-gradient(90deg, #7C3AED, #A78BFA);
}
.op-stats-card:nth-child(3)[b-ssrxpkrdsy]::before {
background: linear-gradient(90deg, #DB2777, #F472B6);
}
.op-stats-card:nth-child(4)[b-ssrxpkrdsy]::before {
background: linear-gradient(90deg, #0E7490, #22D3EE);
}
.op-stats-card:nth-child(5)[b-ssrxpkrdsy]::before {
background: linear-gradient(90deg, #D97706, #FBBF24);
}
.op-stats-card:hover[b-ssrxpkrdsy] {
box-shadow: 0 14px 34px rgba(21, 101, 192, 0.18);
border-color: var(--op-primary-lighter);
transform: translateY(-4px);
}
.op-stats-card-wide[b-ssrxpkrdsy] {
grid-column: span 2;
}
.op-stats-card-title[b-ssrxpkrdsy] {
font-size: 14px;
font-weight: 800;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 2px dashed var(--op-border);
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.op-stats-card:nth-child(1) .op-stats-card-title[b-ssrxpkrdsy] {
color: #1E40AF;
}
.op-stats-card:nth-child(2) .op-stats-card-title[b-ssrxpkrdsy] {
color: #6D28D9;
}
.op-stats-card:nth-child(3) .op-stats-card-title[b-ssrxpkrdsy] {
color: #BE185D;
}
.op-stats-card:nth-child(4) .op-stats-card-title[b-ssrxpkrdsy] {
color: #0E7490;
}
.op-stats-card:nth-child(5) .op-stats-card-title[b-ssrxpkrdsy] {
color: #B45309;
}
.op-stats-card-title i[b-ssrxpkrdsy] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 10px;
color: #FFFFFF;
font-size: 14px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.op-stats-card:nth-child(1) .op-stats-card-title i[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #2563EB, #60A5FA);
}
.op-stats-card:nth-child(2) .op-stats-card-title i[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #7C3AED, #A78BFA);
}
.op-stats-card:nth-child(3) .op-stats-card-title i[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #DB2777, #F472B6);
}
.op-stats-card:nth-child(4) .op-stats-card-title i[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #0E7490, #22D3EE);
}
.op-stats-card:nth-child(5) .op-stats-card-title i[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #D97706, #FBBF24);
}
.op-stats-card-grid[b-ssrxpkrdsy] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.op-stats-kpi[b-ssrxpkrdsy] {
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
border: 1px solid var(--op-border-soft);
position: relative;
overflow: hidden;
transition: all 0.25s ease;
}
.op-stats-kpi > *[b-ssrxpkrdsy] {
position: relative;
z-index: 1;
}
.op-stats-card-grid .op-stats-kpi:nth-child(1)[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
border-color: rgba(59, 130, 246, 0.25);
}
.op-stats-card-grid .op-stats-kpi:nth-child(1) .op-stats-kpi-value[b-ssrxpkrdsy] {
color: #1E40AF;
}
.op-stats-card-grid .op-stats-kpi:nth-child(2)[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
border-color: rgba(139, 92, 246, 0.25);
}
.op-stats-card-grid .op-stats-kpi:nth-child(2) .op-stats-kpi-value[b-ssrxpkrdsy] {
color: #6D28D9;
}
.op-stats-card-grid .op-stats-kpi:nth-child(3)[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
border-color: rgba(236, 72, 153, 0.25);
}
.op-stats-card-grid .op-stats-kpi:nth-child(3) .op-stats-kpi-value[b-ssrxpkrdsy] {
color: #BE185D;
}
.op-stats-card-grid .op-stats-kpi:nth-child(4)[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #ECFEFF 0%, #CFFAFE 100%);
border-color: rgba(6, 182, 212, 0.3);
}
.op-stats-card-grid .op-stats-kpi:nth-child(4) .op-stats-kpi-value[b-ssrxpkrdsy] {
color: #0E7490;
}
.op-stats-kpi:hover[b-ssrxpkrdsy] {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(15, 23, 41, 0.12);
}
.op-stats-kpi-label[b-ssrxpkrdsy] {
font-size: 10.5px;
font-weight: 800;
color: var(--op-text-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.op-stats-kpi-value[b-ssrxpkrdsy] {
font-size: 24px;
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.op-stats-lista[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 260px;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: var(--op-primary-light) rgba(21, 101, 192, 0.05);
}
.op-stats-lista[b-ssrxpkrdsy]::-webkit-scrollbar {
width: 8px;
}
.op-stats-lista[b-ssrxpkrdsy]::-webkit-scrollbar-track {
background: rgba(21, 101, 192, 0.05);
border-radius: 10px;
}
.op-stats-lista[b-ssrxpkrdsy]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--op-primary-light), var(--op-primary));
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.6);
}
.op-stats-lista-item[b-ssrxpkrdsy] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: linear-gradient(120deg, #F8FAFC 0%, #FFFFFF 100%);
border-radius: 11px;
font-size: 12.5px;
border: 1px solid var(--op-border-soft);
border-left: 4px solid var(--op-primary-light);
transition: all 0.25s ease;
}
.op-stats-lista-item:nth-child(5n+1)[b-ssrxpkrdsy] {
border-left-color: #3B82F6;
}
.op-stats-lista-item:nth-child(5n+2)[b-ssrxpkrdsy] {
border-left-color: #8B5CF6;
}
.op-stats-lista-item:nth-child(5n+3)[b-ssrxpkrdsy] {
border-left-color: #EC4899;
}
.op-stats-lista-item:nth-child(5n+4)[b-ssrxpkrdsy] {
border-left-color: #06B6D4;
}
.op-stats-lista-item:nth-child(5n+5)[b-ssrxpkrdsy] {
border-left-color: #F59E0B;
}
.op-stats-lista-item:hover[b-ssrxpkrdsy] {
background: #FFFFFF;
transform: translateX(4px);
box-shadow: 0 6px 16px rgba(21, 101, 192, 0.12);
border-color: var(--op-primary-lighter);
}
.op-stats-lista-label[b-ssrxpkrdsy] {
font-weight: 800;
color: var(--op-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-stats-lista-value[b-ssrxpkrdsy] {
font-weight: 800;
color: var(--op-primary-dark);
white-space: nowrap;
display: flex;
gap: 8px;
align-items: center;
font-size: 12.5px;
}
.op-stats-extra[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #FEF3C7, #FDE68A);
color: #92400E;
padding: 3px 10px;
border-radius: 10px;
font-size: 10.5px;
font-weight: 900;
border: 1px solid rgba(245, 158, 11, 0.4);
box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
letter-spacing: 0.3px;
}
.op-stats-empty[b-ssrxpkrdsy] {
text-align: center;
color: var(--op-text-muted);
font-size: 12.5px;
padding: 30px 16px;
font-weight: 700;
background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
border-radius: 12px;
border: 1px dashed var(--op-border);
}
/* ===== 20. MODAL DETALLE NUEVO DISEΓO ===== */
.op-detalle-seccion[b-ssrxpkrdsy] {
margin-bottom: 20px;
border-radius: 16px;
border: 1px solid var(--op-border-soft);
background: #FFFFFF;
box-shadow: 0 4px 14px rgba(15, 23, 41, 0.05);
overflow: hidden;
transition: all 0.25s ease;
}
.op-detalle-seccion:hover[b-ssrxpkrdsy] {
box-shadow: 0 8px 24px rgba(21, 101, 192, 0.1);
}
.op-detalle-seccion-head[b-ssrxpkrdsy] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
font-size: 13.5px;
font-weight: 800;
color: #FFFFFF;
letter-spacing: 0.4px;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.op-detalle-seccion-head[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 65%);
pointer-events: none;
}
.op-detalle-seccion-head i[b-ssrxpkrdsy] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
font-size: 14px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.op-detalle-seccion-principal .op-detalle-seccion-head[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #1565C0, #42A5F5);
}
.op-detalle-seccion-marcas .op-detalle-seccion-head[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #7C3AED, #A78BFA);
}
.op-detalle-seccion-mapa .op-detalle-seccion-head[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #047857, #34D399);
}
.op-detalle-seccion-body[b-ssrxpkrdsy] {
padding: 20px 22px;
background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%);
}
.op-detalle-grid-3[b-ssrxpkrdsy] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 14px;
}
.op-detalle-field[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px;
background: linear-gradient(120deg, #F8FAFC 0%, #FFFFFF 100%);
border-radius: 12px;
border: 1px solid var(--op-border-soft);
border-left: 3px solid #60A5FA;
transition: all 0.2s;
}
.op-detalle-field:hover[b-ssrxpkrdsy] {
background: #FFFFFF;
border-left-color: #1565C0;
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.1);
transform: translateY(-1px);
}
.op-detalle-field label[b-ssrxpkrdsy] {
font-size: 10.5px;
font-weight: 800;
color: var(--op-text-muted);
text-transform: uppercase;
letter-spacing: 0.6px;
display: flex;
align-items: center;
gap: 6px;
}
.op-detalle-field label i[b-ssrxpkrdsy] {
font-size: 11px;
color: var(--op-primary);
}
.op-detalle-field span[b-ssrxpkrdsy] {
font-size: 13.5px;
font-weight: 700;
color: var(--op-text);
word-break: break-word;
}
.op-detalle-field-full[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 18px;
background: linear-gradient(120deg, #EFF6FF 0%, #F8FBFF 100%);
border-radius: 12px;
border: 1px solid rgba(21, 101, 192, 0.18);
border-left: 4px solid #1565C0;
}
.op-detalle-field-full label[b-ssrxpkrdsy] {
font-size: 11px;
font-weight: 800;
color: var(--op-primary-dark);
text-transform: uppercase;
letter-spacing: 0.6px;
display: flex;
align-items: center;
gap: 6px;
}
.op-detalle-field-full span[b-ssrxpkrdsy] {
font-size: 13.5px;
font-weight: 600;
color: var(--op-text);
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
/* Estado de Marco */
.op-detalle-marco-status[b-ssrxpkrdsy] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-radius: 12px;
font-size: 14px;
font-weight: 800;
margin-bottom: 16px;
letter-spacing: 0.3px;
}
.op-detalle-marco-status i[b-ssrxpkrdsy] {
font-size: 20px;
}
.op-detalle-marco-status.ok[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
color: #166534;
border: 2px solid rgba(16, 185, 129, 0.4);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
}
.op-detalle-marco-status.no[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #FEE2E2, #FECACA);
color: #991B1B;
border: 2px solid rgba(239, 68, 68, 0.4);
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.15);
}
/* Grid de marcas */
.op-detalle-marcas-grid[b-ssrxpkrdsy] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.op-detalle-marca-item[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
border-radius: 12px;
border: 1px solid rgba(139, 92, 246, 0.25);
border-left: 4px solid #7C3AED;
transition: all 0.2s ease;
}
.op-detalle-marca-item:hover[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #FFFFFF 0%, #F5F3FF 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.18);
border-left-color: #6D28D9;
}
.op-detalle-marca-num[b-ssrxpkrdsy] {
font-size: 10px;
font-weight: 800;
color: #6D28D9;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 5px;
}
.op-detalle-marca-num[b-ssrxpkrdsy]::before {
content: 'π';
font-size: 11px;
}
.op-detalle-marca-hora[b-ssrxpkrdsy] {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 18px;
font-weight: 900;
color: #1A2236;
letter-spacing: 1px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.op-detalle-marca-suc[b-ssrxpkrdsy] {
font-size: 11px;
font-weight: 600;
color: #64748B;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-detalle-marcas-empty[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 30px 20px;
text-align: center;
color: var(--op-text-muted);
font-size: 13px;
font-weight: 600;
background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
border-radius: 12px;
border: 2px dashed var(--op-border);
}
.op-detalle-marcas-empty i[b-ssrxpkrdsy] {
font-size: 36px;
opacity: 0.5;
}
/* ===== 21. MAPA ===== */
.op-detalle-direccion[b-ssrxpkrdsy] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
border-radius: 12px;
border: 1px solid rgba(16, 185, 129, 0.25);
border-left: 4px solid #10B981;
margin-bottom: 16px;
font-size: 14px;
font-weight: 700;
color: #065F46;
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.1);
}
.op-detalle-direccion i[b-ssrxpkrdsy] {
font-size: 22px;
color: #059669;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.25));
}
.op-detalle-mapa[b-ssrxpkrdsy] {
border-radius: 14px;
overflow: hidden;
border: 3px solid #FFFFFF;
box-shadow: 0 10px 30px rgba(15, 23, 41, 0.15), 0 0 0 1px rgba(21, 101, 192, 0.1);
line-height: 0;
position: relative;
}
.op-detalle-mapa iframe[b-ssrxpkrdsy] {
display: block;
width: 100%;
height: 380px;
border: 0;
filter: saturate(1.05);
}
.op-detalle-mapa-empty[b-ssrxpkrdsy] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 60px 20px;
background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
border-radius: 12px;
border: 2px dashed var(--op-border);
color: var(--op-text-muted);
font-size: 13.5px;
font-weight: 600;
text-align: center;
}
.op-detalle-mapa-empty i[b-ssrxpkrdsy] {
font-size: 52px;
opacity: 0.4;
color: var(--op-primary);
}
/* ===== 22. CONFIRMACIΓN ===== */
.op-confirm-icon[b-ssrxpkrdsy] {
font-size: 72px;
margin-bottom: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border-radius: 50%;
animation: op-confirm-pop-b-ssrxpkrdsy 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.op-confirm-icon.danger[b-ssrxpkrdsy] {
background: radial-gradient(circle, #FEE2E2 0%, #FECACA 100%);
color: #DC2626;
box-shadow: 0 12px 30px rgba(239, 68, 68, 0.3), inset 0 -4px 10px rgba(220, 38, 38, 0.15);
}
.op-confirm-icon.warning[b-ssrxpkrdsy] {
background: radial-gradient(circle, #FEF3C7 0%, #FDE68A 100%);
color: #B45309;
box-shadow: 0 12px 30px rgba(245, 158, 11, 0.3), inset 0 -4px 10px rgba(180, 83, 9, 0.15);
}
@keyframes op-confirm-pop-b-ssrxpkrdsy {
0% {
transform: scale(0.3);
opacity: 0;
}
60% {
transform: scale(1.08);
opacity: 1;
}
100% {
transform: scale(1);
}
}
.op-confirm-text[b-ssrxpkrdsy] {
font-size: 17px;
color: var(--op-text);
margin: 8px 0;
line-height: 1.5;
font-weight: 600;
}
.op-confirm-sub[b-ssrxpkrdsy] {
font-size: 13px;
color: var(--op-text-muted);
margin: 0;
font-style: italic;
}
/* ===== 23. IMPORTAR ===== */
.op-import-area[b-ssrxpkrdsy] {
border: 2px dashed var(--op-primary-lighter);
border-radius: 16px;
padding: 34px 20px;
text-align: center;
transition: var(--op-transition);
background: linear-gradient(135deg, #FAFBFD 0%, #F5F8FC 100%);
position: relative;
overflow: hidden;
}
.op-import-area:hover[b-ssrxpkrdsy] {
border-color: var(--op-primary);
background: linear-gradient(135deg, var(--op-primary-soft) 0%, rgba(66, 165, 245, 0.1) 100%);
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(21, 101, 192, 0.15);
}
.op-import-icon[b-ssrxpkrdsy] {
font-size: 54px;
color: var(--op-primary);
margin-bottom: 14px;
display: block;
animation: op-import-bounce-b-ssrxpkrdsy 2.4s ease-in-out infinite;
filter: drop-shadow(0 6px 14px rgba(21, 101, 192, 0.3));
}
@keyframes op-import-bounce-b-ssrxpkrdsy {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.op-import-text[b-ssrxpkrdsy] {
font-size: 14px;
color: var(--op-text);
font-weight: 700;
margin: 0 0 8px;
}
.op-input-file[b-ssrxpkrdsy] {
display: inline-block;
padding: 11px 22px;
background: linear-gradient(135deg, var(--op-primary), var(--op-primary-light));
color: #FFFFFF;
border-radius: 11px;
cursor: pointer;
font-size: 13px;
font-weight: 800;
box-shadow: 0 6px 18px rgba(21, 101, 192, 0.35);
transition: var(--op-transition);
}
.op-input-file:hover[b-ssrxpkrdsy] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(21, 101, 192, 0.5);
}
.op-import-archivo[b-ssrxpkrdsy] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
border-radius: 12px;
margin-top: 14px;
border: 1px solid #BBF7D0;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
}
.op-import-archivo i[b-ssrxpkrdsy] {
color: var(--op-success);
font-size: 22px;
filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
}
.op-import-archivo-nombre[b-ssrxpkrdsy] {
flex: 1;
font-weight: 800;
font-size: 13px;
color: #166534;
}
.op-import-remove[b-ssrxpkrdsy] {
background: rgba(239, 68, 68, 0.1);
border: none;
color: var(--op-danger);
cursor: pointer;
font-size: 14px;
width: 30px;
height: 30px;
border-radius: 8px;
transition: var(--op-transition);
display: flex;
align-items: center;
justify-content: center;
}
.op-import-remove:hover[b-ssrxpkrdsy] {
background: var(--op-danger);
color: #FFFFFF;
transform: rotate(90deg) scale(1.1);
}
.op-import-opciones[b-ssrxpkrdsy] {
margin-top: 14px;
}
/* ===== 24. RESPONSIVE ===== */
@media (max-width: 992px) {
.op-filtros-grid[b-ssrxpkrdsy] {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.op-modal-lg[b-ssrxpkrdsy], .op-modal-md[b-ssrxpkrdsy], .op-modal-sm[b-ssrxpkrdsy] {
max-width: 100%;
}
.op-alertas-grid-modal[b-ssrxpkrdsy] {
grid-template-columns: 1fr;
}
.op-detalle-grid-3[b-ssrxpkrdsy] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.op-page[b-ssrxpkrdsy] {
padding: 10px;
}
.op-toolbar[b-ssrxpkrdsy] {
padding: 12px 14px;
border-radius: 16px;
}
.op-toolbar-row-space[b-ssrxpkrdsy] {
flex-direction: column;
align-items: stretch;
}
.op-toolbar-grupo[b-ssrxpkrdsy] {
justify-content: flex-start;
}
.op-cronometro-grupo[b-ssrxpkrdsy] {
justify-content: flex-end;
}
.op-btn[b-ssrxpkrdsy] {
padding: 8px 12px;
font-size: 12px;
}
.op-cronometro[b-ssrxpkrdsy] {
font-size: 15px;
min-width: 60px;
}
.op-btn-play[b-ssrxpkrdsy], .op-btn-reset[b-ssrxpkrdsy], .op-btn-refresh[b-ssrxpkrdsy] {
width: 38px;
height: 38px;
}
.op-filtros-grid[b-ssrxpkrdsy] {
grid-template-columns: 1fr;
}
.op-burbujas[b-ssrxpkrdsy] {
padding: 8px 12px;
}
.op-burbuja[b-ssrxpkrdsy] {
grid-template-columns: 1fr;
gap: 10px;
}
.op-burbuja-colab[b-ssrxpkrdsy] {
padding-left: 0;
border-left: none;
padding-top: 10px;
border-top: 1px dashed var(--op-border);
}
.op-burbuja-acciones[b-ssrxpkrdsy] {
padding-left: 0;
border-left: none;
padding-top: 10px;
border-top: 1px dashed var(--op-border);
}
.op-mosaico-grid[b-ssrxpkrdsy] {
grid-template-columns: 1fr;
padding: 8px 12px;
}
.op-modal-grid-2[b-ssrxpkrdsy], .op-detalle-grid-3[b-ssrxpkrdsy] {
grid-template-columns: 1fr;
}
.op-modal-footer[b-ssrxpkrdsy] {
flex-direction: column-reverse;
}
.op-btn-modal-cancelar[b-ssrxpkrdsy], .op-btn-modal-guardar[b-ssrxpkrdsy], .op-btn-modal-eliminar[b-ssrxpkrdsy], .op-btn-modal-warning[b-ssrxpkrdsy], .op-btn-modal-editar[b-ssrxpkrdsy] {
width: 100%;
justify-content: center;
}
.op-modal-xl[b-ssrxpkrdsy] {
width: 98vw;
}
.op-stats-card-wide[b-ssrxpkrdsy] {
grid-column: span 1;
}
.op-modal-body[b-ssrxpkrdsy] {
padding: 18px;
}
.op-modal-seccion[b-ssrxpkrdsy] {
padding: 14px 16px;
}
}
@media (max-width: 480px) {
.op-cronometro[b-ssrxpkrdsy] {
display: none;
}
.op-paginacion[b-ssrxpkrdsy] {
flex-direction: column;
align-items: stretch;
}
.op-grupo-cliente[b-ssrxpkrdsy], .op-grupo-sector[b-ssrxpkrdsy], .op-grupo-subsector[b-ssrxpkrdsy] {
margin-left: 12px;
}
.op-accion[b-ssrxpkrdsy] {
width: 32px;
height: 32px;
font-size: 12px;
}
}
/* ===== 25. IMPRESIΓN ===== */
@media print {
.op-toolbar[b-ssrxpkrdsy], .op-filtros[b-ssrxpkrdsy], .op-paginacion[b-ssrxpkrdsy], .op-acciones[b-ssrxpkrdsy], .op-modal-overlay[b-ssrxpkrdsy] {
display: none !important;
}
.op-page[b-ssrxpkrdsy] {
background: #FFFFFF;
padding: 0;
}
.op-lista[b-ssrxpkrdsy] {
box-shadow: none;
border: 1px solid #DDD;
}
.op-burbuja[b-ssrxpkrdsy], .op-mosaico-card[b-ssrxpkrdsy] {
break-inside: avoid;
}
}
/* ============================================================
π NUEVAS REGLAS EXCLUSIVAS DE PREDEFINIDOS
============================================================ */
/* ===== 90. CHECK DE DΓA DE SEMANA ===== */
.op-check-dia[b-ssrxpkrdsy] {
background: rgba(66, 165, 245, 0.22);
border-color: rgba(66, 165, 245, 0.5);
padding: 6px 10px;
min-width: 58px;
justify-content: center;
}
.op-check-dia:hover[b-ssrxpkrdsy] {
background: rgba(66, 165, 245, 0.35);
}
.op-check-dia.active[b-ssrxpkrdsy] {
background: rgba(66, 165, 245, 0.55);
border-color: rgba(66, 165, 245, 1);
box-shadow: 0 0 14px rgba(66, 165, 245, 0.5);
}
.op-check-dia-fin[b-ssrxpkrdsy] {
background: rgba(139, 92, 246, 0.22);
border-color: rgba(139, 92, 246, 0.5);
}
.op-check-dia-fin:hover[b-ssrxpkrdsy] {
background: rgba(139, 92, 246, 0.35);
}
.op-check-dia-fin.active[b-ssrxpkrdsy] {
background: rgba(139, 92, 246, 0.55);
border-color: rgba(139, 92, 246, 1);
box-shadow: 0 0 14px rgba(139, 92, 246, 0.5);
}
.op-check-dia .op-check-text[b-ssrxpkrdsy] {
font-weight: 800;
letter-spacing: 0.5px;
font-size: 11px;
}
/* ===== 91. TARJETA INACTIVA ===== */
.op-mosaico-card.inactivo[b-ssrxpkrdsy],
.op-burbuja.inactivo[b-ssrxpkrdsy] {
opacity: 0.55;
filter: grayscale(0.6);
}
.op-mosaico-card.inactivo[b-ssrxpkrdsy]::before,
.op-burbuja.inactivo[b-ssrxpkrdsy]::before {
background: linear-gradient(180deg, #94A3B8, #CBD5E1) !important;
animation: none !important;
}
.op-mosaico-card.inactivo:hover[b-ssrxpkrdsy],
.op-burbuja.inactivo:hover[b-ssrxpkrdsy] {
opacity: 0.75;
filter: grayscale(0.3);
}
/* ===== 92. TAG INACTIVO ===== */
.op-tag-inactivo[b-ssrxpkrdsy] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.4px;
background: linear-gradient(135deg, #64748B, #94A3B8);
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.4);
margin-left: auto;
}
/* ===== 93. BADGE DΓA EN TARJETAS ===== */
.op-dia-mini-badge[b-ssrxpkrdsy] {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 8px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.6px;
background: linear-gradient(135deg, rgba(66, 165, 245, 0.15), rgba(21, 101, 192, 0.2));
color: var(--op-primary-dark);
border: 1px solid rgba(21, 101, 192, 0.25);
text-transform: uppercase;
}
/* ===== 94. INFO APLICAR A FECHA ===== */
.op-aplicar-info[b-ssrxpkrdsy] {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
margin-top: 10px;
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
border-radius: 12px;
border: 1px solid rgba(59, 130, 246, 0.3);
font-size: 13px;
color: var(--op-primary-dark);
font-weight: 600;
}
.op-aplicar-info i[b-ssrxpkrdsy] {
font-size: 18px;
color: var(--op-primary);
flex-shrink: 0;
}
.op-aplicar-info strong[b-ssrxpkrdsy] {
font-weight: 900;
color: #1E40AF;
font-size: 15px;
padding: 0 3px;
}
/* ===== 95. HEADER APLICAR A FECHA (VERDE) ===== */
/* Reutiliza .op-modal-header-stats ya definido */
/* ===== 96. RESPONSIVE PREDEFINIDOS ===== */
@media (max-width: 768px) {
.op-check-dia[b-ssrxpkrdsy] {
min-width: 48px;
padding: 5px 8px;
}
.op-check-dia .op-check-text[b-ssrxpkrdsy] {
font-size: 10px;
}
}
/* ===== 97. BOTΓN ACTIVAR (v15.1) ===== */
.op-page[b-ssrxpkrdsy] .op-accion-activar {
background: #059669;
background-image: linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%);
}
.op-page[b-ssrxpkrdsy] .op-accion-activar:hover {
background-image: linear-gradient(135deg, #047857 0%, #059669 50%, #10B981 100%);
box-shadow: 0 12px 24px rgba(5, 150, 105, 0.5), 0 0 0 4px rgba(16, 185, 129, 0.25), 0 0 22px rgba(16, 185, 129, 0.6);
}
.op-page[b-ssrxpkrdsy] .op-accion-activar:hover i {
animation: op-icon-pop-b-ssrxpkrdsy 0.5s ease;
}
/* ===== 98. HEADER / BOTΓN / ICONO MODAL SUCCESS (v15.1) ===== */
.op-modal-header-success[b-ssrxpkrdsy] {
background: linear-gradient(135deg, #064E3B 0%, #059669 40%, #10B981 70%, #34D399 100%);
}
.op-modal-header-success[b-ssrxpkrdsy]::after {
background: linear-gradient(90deg, transparent, rgba(200, 255, 220, 0.9), transparent);
}
.op-btn-modal-success[b-ssrxpkrdsy] {
padding: 11px 24px;
border-radius: 11px;
border: none;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
display: inline-flex;
align-items: center;
gap: 8px;
font-family: inherit;
letter-spacing: 0.3px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #059669 0%, #10B981 100%);
color: #FFFFFF;
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
}
.op-btn-modal-success[b-ssrxpkrdsy]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
transform: translateX(-120%);
transition: transform 0.6s ease;
}
.op-btn-modal-success:hover[b-ssrxpkrdsy]::before {
transform: translateX(120%);
}
.op-btn-modal-success:hover[b-ssrxpkrdsy] {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(16, 185, 129, 0.55);
}
.op-confirm-icon.success[b-ssrxpkrdsy] {
background: radial-gradient(circle, #D1FAE5 0%, #A7F3D0 100%);
color: #059669;
box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3), inset 0 -4px 10px rgba(5, 150, 105, 0.15);
}
/* ===== 99. CHECKS DE OPERATIVA + SEPARADOR (v15.1) ===== */
.op-check-op[b-ssrxpkrdsy] {
background: rgba(16, 185, 129, 0.22);
border-color: rgba(16, 185, 129, 0.5);
padding: 6px 12px;
}
.op-check-op:hover[b-ssrxpkrdsy] {
background: rgba(16, 185, 129, 0.35);
}
.op-check-op.active[b-ssrxpkrdsy] {
background: rgba(16, 185, 129, 0.55);
border-color: rgba(16, 185, 129, 1);
box-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
}
.op-check-op .op-check-text[b-ssrxpkrdsy] {
font-weight: 800;
letter-spacing: 0.3px;
font-size: 11.5px;
}
.op-sep-vertical[b-ssrxpkrdsy] {
display: inline-block;
width: 2px;
height: 26px;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5), transparent);
margin: 0 6px;
border-radius: 2px;
}
/* /Pages/Logistica/Paqueteria.razor.rz.scp.css */
/* ========================================
PAQUETERIA STYLES - DOS SECCIONES
(Toolbar fija + Lista scrollable)
======================================== */
@keyframes agitar-fuerte-b-61zod2n7jm {
0% {
transform: translateX(0) scale(1);
}
10% {
transform: translateX(-8px) scale(1.02);
}
20% {
transform: translateX(8px) scale(1.02);
}
30% {
transform: translateX(-6px) scale(1.01);
}
40% {
transform: translateX(6px) scale(1.01);
}
50% {
transform: translateX(-4px) scale(1);
}
60% {
transform: translateX(4px) scale(1);
}
70% {
transform: translateX(-2px) scale(1);
}
80% {
transform: translateX(2px) scale(1);
}
90% {
transform: translateX(-1px) scale(1);
}
100% {
transform: translateX(0) scale(1);
}
}
/* Confirmados y No confirmados */
.stat-confirmado i[b-61zod2n7jm] {
color: #22c55e;
}
.stat-no-confirmado i[b-61zod2n7jm] {
color: #eab308;
}
.stat-encamino i[b-61zod2n7jm] {
color: #3b82f6;
}
.stat-encamino[b-61zod2n7jm] {
background: rgba(59, 130, 246, 0.08);
}
/* ========================================
1. RESET Y ESTRUCTURA PRINCIPAL
======================================== */
.paqueteria-container[b-61zod2n7jm] {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
height: 100%;
min-height: 100vh;
background: #f1f5f9;
overflow: hidden;
animation: fadeInPage-b-61zod2n7jm 0.4s ease;
}
@keyframes fadeInPage-b-61zod2n7jm {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
2. SECCIΓN TOOLBAR (FIJA)
======================================== */
.toolbar-section[b-61zod2n7jm] {
flex-shrink: 0;
background: #ffffff;
border-bottom: 2px solid #e2e8f0;
z-index: 10;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.toolbar-container[b-61zod2n7jm] {
padding: 16px 20px 12px 20px;
background: white;
}
/* ========================================
3. SECCIΓN LISTA (SCROLLABLE)
======================================== */
.lista-section[b-61zod2n7jm] {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 12px 20px 20px 20px;
min-height: 0;
background: #f1f5f9;
}
/* Scrollbar personalizado para la lista */
.lista-section[b-61zod2n7jm]::-webkit-scrollbar {
width: 6px;
}
.lista-section[b-61zod2n7jm]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.lista-section[b-61zod2n7jm]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.lista-section[b-61zod2n7jm]::-webkit-scrollbar-thumb:hover {
background: #2563eb;
}
/* ========================================
4. TOOLBAR ROW
======================================== */
.toolbar-row[b-61zod2n7jm] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
flex-wrap: wrap;
gap: 12px;
}
.toolbar-left[b-61zod2n7jm] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.toolbar-title[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 14px;
}
.toolbar-title i[b-61zod2n7jm] {
font-size: 1.8rem;
color: #2563eb;
background: rgba(37, 99, 235, 0.1);
padding: 10px;
border-radius: 12px;
transition: all 0.3s ease;
}
.toolbar-title:hover i[b-61zod2n7jm] {
background: rgba(37, 99, 235, 0.18);
transform: scale(1.05) rotate(-5deg);
}
.toolbar-title h3[b-61zod2n7jm] {
margin: 0;
font-weight: 700;
color: #1f2937;
font-size: 1.3rem;
letter-spacing: -0.5px;
}
.toolbar-right[b-61zod2n7jm] {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.toolbar-actions[b-61zod2n7jm] {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
/* ========================================
5. ESTADΓSTICAS
======================================== */
.stats-container[b-61zod2n7jm] {
display: flex;
gap: 8px;
margin-left: 16px;
padding-left: 16px;
border-left: 2px solid rgba(37, 99, 235, 0.15);
flex-wrap: wrap;
}
.stat-item[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
color: #6b7280;
padding: 3px 12px;
border-radius: 20px;
background: #f1f5f9;
white-space: nowrap;
transition: all 0.3s ease;
font-weight: 500;
}
.stat-item:hover[b-61zod2n7jm] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.stat-item strong[b-61zod2n7jm] {
color: #1f2937;
font-size: 0.9rem;
}
.stat-total i[b-61zod2n7jm] {
color: #2563eb;
}
.stat-total[b-61zod2n7jm] {
background: rgba(37, 99, 235, 0.08);
}
.stat-asignado i[b-61zod2n7jm] {
color: #f59e0b;
}
.stat-asignado[b-61zod2n7jm] {
background: rgba(245, 158, 11, 0.08);
}
.stat-sin-asignar i[b-61zod2n7jm] {
color: #94a3b8;
}
.stat-sin-asignar[b-61zod2n7jm] {
background: rgba(148, 163, 184, 0.08);
}
.stat-entregado i[b-61zod2n7jm] {
color: #22c55e;
}
.stat-entregado[b-61zod2n7jm] {
background: rgba(34, 197, 94, 0.08);
}
.stat-cancelado i[b-61zod2n7jm] {
color: #ef4444;
}
.stat-cancelado[b-61zod2n7jm] {
background: rgba(239, 68, 68, 0.08);
}
/* ========================================
6. BOTONES DE TOOLBAR
======================================== */
.btn-toolbar[b-61zod2n7jm] {
padding: 6px 16px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #ffffff;
height: 34px;
}
.btn-toolbar:hover[b-61zod2n7jm] {
transform: translateY(-2px) scale(1.02);
}
.btn-nuevo[b-61zod2n7jm] {
background: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.btn-nuevo:hover[b-61zod2n7jm] {
background: #1d4ed8;
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}
.btn-asignar[b-61zod2n7jm] {
background: #f59e0b;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-asignar:hover[b-61zod2n7jm] {
background: #d97706;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.btn-configuracion[b-61zod2n7jm] {
background: #8b5cf6;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.btn-configuracion:hover[b-61zod2n7jm] {
background: #7c3aed;
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
.btn-excel[b-61zod2n7jm] {
background: #22c55e;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.btn-excel:hover[b-61zod2n7jm] {
background: #16a34a;
box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}
.btn-qr-print[b-61zod2n7jm] {
background: #ec4899;
box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}
.btn-qr-print:hover[b-61zod2n7jm] {
background: #db2777;
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
}
.btn-refresh[b-61zod2n7jm] {
background: #f1f5f9;
color: #1f2937;
border: 1px solid #e2e8f0;
box-shadow: none;
}
.btn-refresh:hover:not(:disabled)[b-61zod2n7jm] {
background: #e2e8f0;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.btn-refresh:disabled[b-61zod2n7jm] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-refresh.btn-actualizar-naranja[b-61zod2n7jm] {
background: #f59e0b !important;
color: white !important;
border: none !important;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}
.btn-refresh.btn-actualizar-naranja:hover:not(:disabled)[b-61zod2n7jm] {
background: #d97706 !important;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4) !important;
}
/* ========================================
7. AUTO REFRESH
======================================== */
.auto-refresh-group[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 6px;
background: #f1f5f9;
padding: 2px 8px 2px 2px;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.btn-auto-refresh[b-61zod2n7jm] {
background: #f1f5f9;
color: #1f2937;
border: 1px solid #e2e8f0;
padding: 5px 14px;
border-radius: 10px;
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
height: 32px;
}
.btn-auto-refresh:hover[b-61zod2n7jm] {
background: #e2e8f0;
transform: translateY(-2px);
}
.btn-auto-refresh.active[b-61zod2n7jm] {
background: #f59e0b;
color: white;
border-color: transparent;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-auto-refresh.active:hover[b-61zod2n7jm] {
background: #d97706;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.auto-refresh-countdown[b-61zod2n7jm] {
font-size: 0.75rem;
color: #2563eb;
white-space: nowrap;
min-width: 40px;
font-weight: 600;
}
/* ========================================
8. FILTROS - DISTRIBUCIΓN EQUILIBRADA
======================================== */
.filters-grid[b-61zod2n7jm] {
display: grid;
grid-template-columns: 1fr 1.2fr 0.8fr 0.8fr 1fr 1fr 0.6fr;
gap: 10px;
padding-top: 12px;
border-top: 1px solid rgba(37, 99, 235, 0.08);
align-items: end;
}
.filter-item[b-61zod2n7jm] {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
position: relative !important;
}
.filter-item label[b-61zod2n7jm] {
font-size: 10px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
margin-bottom: 1px;
}
.filter-item label i[b-61zod2n7jm] {
margin-right: 3px;
color: #2563eb;
font-size: 10px;
}
.filter-actions[b-61zod2n7jm] {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.filter-actions-buttons[b-61zod2n7jm] {
display: flex;
gap: 6px;
}
.filter-input[b-61zod2n7jm],
.filter-select[b-61zod2n7jm] {
padding: 4px 8px;
border: 1.5px solid #e2e8f0;
border-radius: 6px;
font-size: 11px !important;
transition: all 0.15s ease;
background: white;
width: 100%;
color: #1f2937;
font-weight: 400;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
box-sizing: border-box;
line-height: 1.2;
}
.filter-select[b-61zod2n7jm] {
padding: 4px 24px 4px 8px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
appearance: none;
}
.filter-input[b-61zod2n7jm]::placeholder {
color: #a0aec0;
font-size: 11px;
}
.filter-input:focus[b-61zod2n7jm],
.filter-select:focus[b-61zod2n7jm] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.filter-input:hover[b-61zod2n7jm],
.filter-select:hover[b-61zod2n7jm] {
border-color: #2563eb;
}
.btn-filter[b-61zod2n7jm] {
padding: 4px 14px;
background: #2563eb;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 11px !important;
transition: all 0.15s ease;
box-shadow: 0 1px 4px rgba(37, 99, 235, 0.15);
height: 28px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
white-space: nowrap;
box-sizing: border-box;
flex: 1;
}
.btn-filter:hover[b-61zod2n7jm] {
background: #1d4ed8;
transform: translateY(-1px);
}
.btn-filter-clear[b-61zod2n7jm] {
padding: 4px 14px;
background: #f1f5f9;
color: #1f2937;
border: 1.5px solid #e2e8f0;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 11px !important;
transition: all 0.15s ease;
height: 28px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
white-space: nowrap;
box-sizing: border-box;
flex: 1;
}
.btn-filter-clear:hover[b-61zod2n7jm] {
background: #e2e8f0;
}
/* ========================================
9. FILTRO DE FECHAS - COMPACTO
======================================== */
.filter-item .fecha-controls[b-61zod2n7jm] {
display: flex !important;
flex-direction: row !important;
gap: 4px !important;
align-items: center !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
.filter-item .fecha-row[b-61zod2n7jm] {
display: flex !important;
align-items: center !important;
gap: 3px !important;
flex-wrap: nowrap !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
.filter-item .fecha-row .fecha-input[b-61zod2n7jm] {
width: 100% !important;
height: 24px !important;
padding: 2px 4px !important;
font-size: 10px !important;
flex: 1 1 auto !important;
min-width: 40px !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 4px !important;
background: white !important;
transition: all 0.15s ease !important;
box-sizing: border-box !important;
}
.filter-item .fecha-row .fecha-input:focus[b-61zod2n7jm] {
border-color: #2563eb !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1) !important;
}
.filter-item .fecha-row .btn-fecha[b-61zod2n7jm] {
padding: 2px 6px !important;
height: 24px !important;
font-size: 9px !important;
white-space: nowrap !important;
background: #2563eb !important;
color: white !important;
border: 1.5px solid #2563eb !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
flex-shrink: 0 !important;
}
.filter-item .fecha-row .btn-fecha:hover[b-61zod2n7jm] {
background: #1d4ed8 !important;
border-color: #1d4ed8 !important;
}
.filter-item .fecha-row .btn-fecha.active[b-61zod2n7jm] {
background: #1d4ed8 !important;
border-color: #1d4ed8 !important;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) !important;
}
.filter-item .fecha-row .btn-fecha-limpiar[b-61zod2n7jm] {
height: 24px !important;
width: 24px !important;
min-width: 24px !important;
font-size: 9px !important;
padding: 0 !important;
background: #ef4444 !important;
color: white !important;
border: 1.5px solid #ef4444 !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.filter-item .fecha-row .btn-fecha-limpiar:hover[b-61zod2n7jm] {
background: #dc2626 !important;
border-color: #dc2626 !important;
}
.filter-item .fecha-row .fecha-separador[b-61zod2n7jm] {
font-size: 9px !important;
padding: 0 2px !important;
color: #6b7280 !important;
font-weight: 600 !important;
flex-shrink: 0 !important;
}
.filter-item .fecha-nav-buttons[b-61zod2n7jm] {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
margin: 0 2px !important;
flex-shrink: 0 !important;
}
.filter-item .btn-fecha-nav-up[b-61zod2n7jm] {
width: 16px !important;
height: 11px !important;
font-size: 6px !important;
padding: 0 !important;
background: #2563eb !important;
color: white !important;
border: 1.5px solid #2563eb !important;
border-radius: 3px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.filter-item .btn-fecha-nav-up:hover[b-61zod2n7jm] {
background: #1d4ed8 !important;
border-color: #1d4ed8 !important;
}
.filter-item .btn-fecha-nav-down[b-61zod2n7jm] {
width: 16px !important;
height: 11px !important;
font-size: 6px !important;
padding: 0 !important;
background: #ef4444 !important;
color: white !important;
border: 1.5px solid #ef4444 !important;
border-radius: 3px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.filter-item .btn-fecha-nav-down:hover[b-61zod2n7jm] {
background: #dc2626 !important;
border-color: #dc2626 !important;
}
/* ========================================
10. RESPONSIVE FILTROS
======================================== */
@media (max-width: 1024px) {
.filters-grid[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.filter-actions[b-61zod2n7jm] {
grid-column: 1 / -1;
flex-direction: row;
}
.filter-actions-buttons[b-61zod2n7jm] {
flex: 1;
}
.btn-filter[b-61zod2n7jm],
.btn-filter-clear[b-61zod2n7jm] {
flex: 1;
}
}
@media (max-width: 768px) {
.filters-grid[b-61zod2n7jm] {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.filter-actions-buttons[b-61zod2n7jm] {
flex-direction: row !important;
}
.btn-filter[b-61zod2n7jm],
.btn-filter-clear[b-61zod2n7jm] {
flex: 1 !important;
}
.filter-item .fecha-controls[b-61zod2n7jm] {
flex-wrap: wrap !important;
}
}
/* ========================================
11. ESTADOS DE PAQUETES (BADGES)
======================================== */
.estado-badge[b-61zod2n7jm] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 14px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
min-width: 70px;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
letter-spacing: 0.3px;
text-transform: uppercase;
}
.estado-badge:hover[b-61zod2n7jm] {
transform: scale(1.05) translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.estado-badge[data-estado="asignado"][b-61zod2n7jm],
.estado-badge[data-estado="ASIGNADO"][b-61zod2n7jm],
.estado-badge[data-estado="Asignado"][b-61zod2n7jm] {
background: #f59e0b !important;
color: white !important;
}
.estado-badge[data-estado="en camino"][b-61zod2n7jm],
.estado-badge[data-estado="EN CAMINO"][b-61zod2n7jm],
.estado-badge[data-estado="En Camino"][b-61zod2n7jm] {
background: #3b82f6 !important;
color: white !important;
}
.estado-badge[data-estado="entregado"][b-61zod2n7jm],
.estado-badge[data-estado="ENTREGADO"][b-61zod2n7jm],
.estado-badge[data-estado="Entregado"][b-61zod2n7jm] {
background: #22c55e !important;
color: white !important;
}
.estado-badge[data-estado="anulado"][b-61zod2n7jm],
.estado-badge[data-estado="ANULADO"][b-61zod2n7jm],
.estado-badge[data-estado="Anulado"][b-61zod2n7jm] {
background: #ef4444 !important;
color: white !important;
animation: pulse-anulado-b-61zod2n7jm 2s ease-in-out infinite;
}
.estado-badge[data-estado="sin asignar"][b-61zod2n7jm],
.estado-badge[data-estado="SIN ASIGNAR"][b-61zod2n7jm],
.estado-badge[data-estado="Sin Asignar"][b-61zod2n7jm],
.estado-badge[data-estado=""][b-61zod2n7jm] {
background: #fbbf24 !important;
color: #78350f !important;
animation: parpadeo-lento-b-61zod2n7jm 1.2s ease-in-out infinite;
}
.estado-badge[data-estado="sin asignar"] i[b-61zod2n7jm],
.estado-badge[data-estado="SIN ASIGNAR"] i[b-61zod2n7jm],
.estado-badge[data-estado="Sin Asignar"] i[b-61zod2n7jm],
.estado-badge[data-estado=""] i[b-61zod2n7jm] {
display: none !important;
}
@keyframes pulse-anulado-b-61zod2n7jm {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.03);
box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
}
}
@keyframes parpadeo-lento-b-61zod2n7jm {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.85;
transform: scale(1.02);
box-shadow: 0 0 40px rgba(251, 191, 36, 0.4);
}
}
/* ========================================
12. BADGES DE ZONAS Y CLIENTES
======================================== */
.badge-zona[b-61zod2n7jm] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 12px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 700;
color: white;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.badge-zona:hover[b-61zod2n7jm] {
transform: scale(1.05) translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.badge-zona-1[b-61zod2n7jm] {
background: #1e3a5f;
}
.badge-zona-2[b-61zod2n7jm] {
background: #2563eb;
}
.badge-zona-3[b-61zod2n7jm] {
background: #3b82f6;
}
.badge-zona-4[b-61zod2n7jm] {
background: #60a5fa;
color: #1e3a5f;
}
.badge-zona-5[b-61zod2n7jm] {
background: #10b981;
color: #064e3b;
}
.badge-zona-6[b-61zod2n7jm] {
background: #34d399;
color: #064e3b;
}
.badge-zona-7[b-61zod2n7jm] {
background: #6ee7b7;
color: #064e3b;
}
.badge-zona-8[b-61zod2n7jm] {
background: #fbbf24;
color: #78350f;
}
.badge-zona-9[b-61zod2n7jm] {
background: #fb923c;
}
.badge-zona-10[b-61zod2n7jm] {
background: #ef4444;
}
.badge-cliente[b-61zod2n7jm] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 14px;
border-radius: 30px;
font-size: 0.65rem;
font-weight: 700;
color: white;
white-space: nowrap;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.badge-cliente:hover[b-61zod2n7jm] {
transform: scale(1.05) translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.badge-cliente-casmu-comun[b-61zod2n7jm] {
background: #1e3a5f;
}
.badge-cliente-casmu-express[b-61zod2n7jm] {
background: #2563eb;
}
.badge-cliente-casmu-hrauto[b-61zod2n7jm] {
background: #3b82f6;
color: #1e3a5f;
}
.badge-cliente-evangelico-comun[b-61zod2n7jm] {
background: #065f46;
}
.badge-cliente-evangelico-express[b-61zod2n7jm] {
background: #10b981;
}
.badge-cliente-evangelico-hrauto[b-61zod2n7jm] {
background: #34d399;
color: #065f46;
}
.badge-cliente-default[b-61zod2n7jm] {
background: #64748b;
}
/* ======================================== */
/* 13. TABLA Y LISTA DE PAQUETES */
/* ======================================== */
.table-container[b-61zod2n7jm] {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* β
Contenedor de la vista lista */
.paqueteria-container-lista[b-61zod2n7jm] {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
border: 1px solid #e2e8f0;
width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 16px;
}
/* β
Fila principal de la lista */
.paqueteria-fila[b-61zod2n7jm] {
display: flex;
align-items: center;
padding: 10px 18px;
background: #f8fafc;
gap: 8px;
flex-wrap: wrap;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid #e2e8f0;
width: 100%;
}
.paqueteria-fila:hover[b-61zod2n7jm] {
background: #eff6ff;
}
.paqueteria-fila:last-child[b-61zod2n7jm] {
border-bottom: none;
}
/* β
Checkbox de la lista */
.paqueteria-checkbox[b-61zod2n7jm] {
width: 18px;
height: 18px;
accent-color: #2563eb;
cursor: pointer;
}
/* β
Chevron de expansiΓ³n */
.paqueteria-chevron[b-61zod2n7jm] {
color: #6b7280;
font-size: 0.7rem;
transition: transform 0.3s ease;
}
/* β
Cantidad de paquetes */
.paqueteria-cantidad[b-61zod2n7jm] {
background: #2563eb;
color: white;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 4px;
transition: transform 0.2s ease;
}
.paqueteria-cantidad:hover[b-61zod2n7jm] {
transform: scale(1.05);
}
/* β
Icono de marcador */
.paqueteria-icon-marker[b-61zod2n7jm] {
color: #ef4444;
font-size: 0.8rem;
}
/* β
Texto de direcciΓ³n */
.paqueteria-direccion[b-61zod2n7jm] {
font-size: 0.85rem;
color: #1f2937;
flex: 1;
}
/* β
Badges comunes */
.paqueteria-badge[b-61zod2n7jm] {
font-size: 0.65rem;
transition: all 0.2s ease;
}
.paqueteria-badge:hover[b-61zod2n7jm] {
transform: scale(1.05);
}
/* β
Estado del paquete */
.paqueteria-estado[b-61zod2n7jm] {
font-size: 0.65rem;
padding: 2px 12px;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.paqueteria-estado:hover[b-61zod2n7jm] {
transform: scale(1.08);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
/* β
Colaborador */
.paqueteria-colaborador[b-61zod2n7jm] {
font-size: 0.75rem;
color: #6b7280;
display: inline-flex;
align-items: center;
gap: 4px;
transition: all 0.2s ease;
}
.paqueteria-colaborador:hover[b-61zod2n7jm] {
color: #2563eb;
transform: translateX(3px);
}
/* β
Botones de acciΓ³n */
.paqueteria-acciones[b-61zod2n7jm] {
display: flex;
gap: 4px;
}
.paqueteria-acciones .btn-accion[b-61zod2n7jm] {
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.paqueteria-acciones .btn-accion:hover[b-61zod2n7jm] {
transform: scale(1.15);
}
.paqueteria-acciones .btn-ver:hover[b-61zod2n7jm] {
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}
.paqueteria-acciones .btn-editar:hover[b-61zod2n7jm] {
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.paqueteria-acciones .btn-cancelar:hover[b-61zod2n7jm] {
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
.paqueteria-acciones .btn-eliminar:hover[b-61zod2n7jm] {
box-shadow: 0 4px 12px rgba(127, 29, 29, 0.4);
}
/* β
Etiqueta CONFIRMΓ */
.etiqueta-confirmo[b-61zod2n7jm] {
background: #22c55e;
color: white;
padding: 3px 12px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 600;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 5px;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
animation: pulse-verde-b-61zod2n7jm 2s ease-in-out infinite;
cursor: default;
}
.etiqueta-confirmo:hover[b-61zod2n7jm] {
transform: scale(1.08);
box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}
/* β
Etiqueta NO CONFIRMΓ */
.etiqueta-no-confirmo[b-61zod2n7jm] {
background: #fef9c3;
color: #854d0e;
padding: 3px 12px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 600;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 5px;
border: 2px solid #fde047;
box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4);
animation: agitar-fuerte-b-61zod2n7jm 0.8s ease-in-out infinite;
cursor: default;
}
.etiqueta-no-confirmo:hover[b-61zod2n7jm] {
transform: scale(1.08);
border-color: #ca8a04;
box-shadow: 0 0 0 6px rgba(234, 179, 8, 0.2);
}
/* β
Etiqueta MIXTO */
.etiqueta-mixto[b-61zod2n7jm] {
background: #f59e0b;
color: white;
padding: 3px 12px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 600;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 5px;
animation: parpadeo-lento-b-61zod2n7jm 1.5s ease-in-out infinite;
cursor: default;
}
.etiqueta-mixto:hover[b-61zod2n7jm] {
transform: scale(1.08);
box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}
/* β
Mosaico */
.mosaico-card[b-61zod2n7jm] {
background: white;
border-radius: 14px;
padding: 18px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
gap: 10px;
}
.mosaico-card:hover[b-61zod2n7jm] {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
border-color: #2563eb !important;
}
/* ======================================== */
/* 13.1. FILA EXPANDIDA (PAQUETES INTERNOS) */
/* ======================================== */
/* β
Contenedor expandido */
.paqueteria-fila-expandida[b-61zod2n7jm] {
background: #fafbfc;
padding: 4px 18px 8px 18px;
border-bottom: 1px solid #e2e8f0;
border-left: 3px solid #2563eb;
animation: expandirFila-b-61zod2n7jm 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes expandirFila-b-61zod2n7jm {
from {
opacity: 0;
transform: scaleY(0.8);
max-height: 0;
}
to {
opacity: 1;
transform: scaleY(1);
max-height: 500px;
}
}
/* β
Cada paquete dentro del grupo */
.paqueteria-item[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 16px;
padding: 6px 0;
font-size: 0.8rem;
border-bottom: 1px dashed #f1f5f9;
cursor: pointer;
transition: all 0.2s ease;
}
.paqueteria-item:hover[b-61zod2n7jm] {
background: #f8fafc;
border-radius: 6px;
padding-left: 8px;
padding-right: 8px;
}
.paqueteria-item:last-child[b-61zod2n7jm] {
border-bottom: none;
}
/* β
Elementos internos del paquete */
.item-checkbox[b-61zod2n7jm] {
display: flex;
align-items: center;
justify-content: center;
min-width: 24px;
}
.item-viatico[b-61zod2n7jm] {
font-weight: 700;
color: #2563eb;
min-width: 60px;
}
.item-cedula[b-61zod2n7jm] {
color: #6b7280;
min-width: 90px;
}
.item-monto[b-61zod2n7jm] {
color: #16a34a;
font-weight: 600;
min-width: 70px;
}
.item-comentario[b-61zod2n7jm] {
color: #6b7280;
font-size: 0.7rem;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ========================================
14. ACCIONES EN TABLA
======================================== */
.btn-accion[b-61zod2n7jm] {
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
color: white;
}
.btn-accion:hover[b-61zod2n7jm] {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-ver[b-61zod2n7jm] {
background: #2563eb;
}
.btn-ver:hover[b-61zod2n7jm] {
background: #1d4ed8;
}
.btn-editar[b-61zod2n7jm] {
background: #f59e0b;
}
.btn-editar:hover[b-61zod2n7jm] {
background: #d97706;
}
.btn-cancelar[b-61zod2n7jm] {
background: #ef4444;
}
.btn-cancelar:hover[b-61zod2n7jm] {
background: #dc2626;
}
.btn-eliminar[b-61zod2n7jm] {
background: #7f1d1d;
}
.btn-eliminar:hover[b-61zod2n7jm] {
background: #991b1b;
}
.btn-qr[b-61zod2n7jm] {
background: #8b5cf6;
}
.btn-qr:hover[b-61zod2n7jm] {
background: #7c3aed;
}
/* ========================================
15. PAGINACIΓN
======================================== */
.pagination-container[b-61zod2n7jm] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
background: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
margin-top: 16px;
flex-wrap: wrap;
gap: 12px;
}
.pagination-info[b-61zod2n7jm] {
color: #6b7280;
font-size: 0.8rem;
font-weight: 500;
}
.pagination-controls[b-61zod2n7jm] {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.btn-page[b-61zod2n7jm] {
padding: 5px 12px;
border: 2px solid #e2e8f0;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.8rem;
font-weight: 600;
color: #1f2937;
}
.btn-page:hover:not(:disabled):not(.active)[b-61zod2n7jm] {
background: #f1f5f9;
border-color: #2563eb;
transform: translateY(-2px);
}
.btn-page.active[b-61zod2n7jm] {
background: #2563eb;
color: white;
border-color: transparent;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.btn-page:disabled[b-61zod2n7jm] {
opacity: 0.4;
cursor: not-allowed;
}
/* ========================================
16. LOADING Y EMPTY STATE
======================================== */
.loading-panel[b-61zod2n7jm] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
background: #ffffff;
border-radius: 16px;
}
.loading-panel .spinner-border[b-61zod2n7jm] {
width: 3rem;
height: 3rem;
border-width: 4px;
color: #2563eb;
}
.loading-panel p[b-61zod2n7jm] {
margin-top: 16px;
color: #6b7280;
font-weight: 500;
}
.empty-state[b-61zod2n7jm] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
background: #ffffff;
border-radius: 16px;
text-align: center;
}
.empty-state i[b-61zod2n7jm] {
font-size: 4rem;
color: #d1d5db;
margin-bottom: 16px;
}
.empty-state h4[b-61zod2n7jm] {
color: #1f2937;
margin-bottom: 4px;
font-weight: 700;
}
.empty-state p[b-61zod2n7jm] {
color: #6b7280;
margin-bottom: 20px;
}
.empty-state .btn-crear[b-61zod2n7jm] {
padding: 8px 24px;
background: #2563eb;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
font-size: 0.85rem;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.empty-state .btn-crear:hover[b-61zod2n7jm] {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
/* ========================================
17. MODALES - BASE (POSICIΓN CORREGIDA)
======================================== */
.modal-overlay[b-61zod2n7jm] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: fadeInModal-b-61zod2n7jm 0.3s ease;
padding: 60px 20px 40px 20px;
overflow-y: auto;
}
@keyframes fadeInModal-b-61zod2n7jm {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(12px);
}
}
.modal-container[b-61zod2n7jm] {
background: #ffffff;
border-radius: 20px;
max-width: 620px;
width: 95%;
max-height: 80vh;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
animation: slideUpModal-b-61zod2n7jm 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
margin: 40px auto auto auto;
align-self: center;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal-container-small[b-61zod2n7jm] {
max-width: 520px;
}
.modal-container-form[b-61zod2n7jm] {
max-width: 820px;
max-height: 80vh;
min-height: 50vh;
}
.modal-container-detalle[b-61zod2n7jm] {
max-width: 820px;
max-height: 80vh;
min-height: 40vh;
}
.modal-container-qr[b-61zod2n7jm] {
max-width: 750px;
}
.modal-container-config[b-61zod2n7jm] {
max-width: 950px;
max-height: 80vh;
min-height: 50vh;
}
.modal-container-anulacion[b-61zod2n7jm] {
max-width: 580px;
}
@keyframes slideUpModal-b-61zod2n7jm {
from {
transform: translateY(60px) scale(0.95);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
/* Responsive para modales en pantallas pequeΓ±as */
@media (max-height: 700px) {
.modal-overlay[b-61zod2n7jm] {
padding: 30px 16px 20px 16px;
align-items: flex-start;
}
.modal-container[b-61zod2n7jm] {
margin-top: 20px;
max-height: 85vh;
}
.modal-container-form[b-61zod2n7jm],
.modal-container-detalle[b-61zod2n7jm],
.modal-container-config[b-61zod2n7jm] {
max-height: 85vh;
min-height: 40vh;
}
}
@media (max-height: 500px) {
.modal-overlay[b-61zod2n7jm] {
padding: 10px 12px 10px 12px;
align-items: flex-start;
}
.modal-container[b-61zod2n7jm] {
margin-top: 10px;
max-height: 92vh;
}
}
@media (max-width: 768px) {
.modal-container[b-61zod2n7jm] {
width: 98%;
margin: 30px auto auto auto;
}
}
/* ========================================
18. MODAL - HEADER
======================================== */
.modal-header[b-61zod2n7jm] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
border-bottom: 2px solid #f1f5f9;
background: #f8fafc;
border-radius: 20px 20px 0 0;
flex-shrink: 0;
}
.modal-header h4[b-61zod2n7jm] {
margin: 0;
color: #1f2937;
font-weight: 700;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 12px;
}
.modal-header h4 i[b-61zod2n7jm] {
font-size: 1.1rem;
}
.modal-header.header-danger[b-61zod2n7jm] {
background: linear-gradient(135deg, #fef2f2, #fecaca) !important;
border-bottom-color: #fecaca !important;
}
.modal-header.header-danger h4[b-61zod2n7jm] {
color: #991b1b !important;
}
.config-header[b-61zod2n7jm] {
background: linear-gradient(135deg, #1e3a5f, #2563eb) !important;
border-radius: 20px 20px 0 0;
}
.config-header h4[b-61zod2n7jm] {
color: white !important;
}
.config-header h4 i[b-61zod2n7jm] {
color: #fbbf24 !important;
background: rgba(251, 191, 36, 0.2) !important;
padding: 8px !important;
border-radius: 10px !important;
}
.modal-close-btn[b-61zod2n7jm] {
background: #f1f5f9;
border: none;
font-size: 1rem;
color: #6b7280;
cursor: pointer;
padding: 6px 12px;
border-radius: 10px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close-btn:hover[b-61zod2n7jm] {
background: #fee2e2;
color: #ef4444;
transform: rotate(90deg);
}
.config-close[b-61zod2n7jm] {
background: rgba(255, 255, 255, 0.15) !important;
color: white !important;
}
.config-close:hover[b-61zod2n7jm] {
background: rgba(255, 255, 255, 0.25) !important;
color: #fbbf24 !important;
}
/* ========================================
19. MODAL - BODY SCROLL
======================================== */
.modal-body-scroll[b-61zod2n7jm] {
padding: 20px 24px;
overflow-y: auto;
flex: 1;
}
.qr-body[b-61zod2n7jm] {
padding: 20px 24px;
}
.anulacion-body[b-61zod2n7jm] {
padding: 20px 24px;
}
.config-body[b-61zod2n7jm] {
padding: 0 !important;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ========================================
20. MODAL - FOOTER FIJO
======================================== */
.modal-footer-fixed[b-61zod2n7jm] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 24px;
border-top: 2px solid #f1f5f9;
background: white;
flex-shrink: 0;
flex-wrap: wrap;
gap: 10px;
border-radius: 0 0 20px 20px;
}
.modal-footer-left[b-61zod2n7jm] {
display: flex;
gap: 8px;
}
.modal-footer-center[b-61zod2n7jm] {
display: flex;
gap: 8px;
}
.modal-footer-right[b-61zod2n7jm] {
display: flex;
gap: 8px;
}
.btn-footer[b-61zod2n7jm] {
padding: 8px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-footer:hover[b-61zod2n7jm] {
transform: translateY(-2px);
}
.btn-footer-edit[b-61zod2n7jm] {
background: #f59e0b;
color: white;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-footer-edit:hover[b-61zod2n7jm] {
background: #d97706;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.btn-footer-danger[b-61zod2n7jm] {
background: #ef4444;
color: white;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.btn-footer-danger:hover[b-61zod2n7jm] {
background: #dc2626;
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}
.btn-footer-qr[b-61zod2n7jm] {
background: #8b5cf6;
color: white;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.btn-footer-qr:hover[b-61zod2n7jm] {
background: #7c3aed;
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
.btn-footer-secondary[b-61zod2n7jm] {
background: #f1f5f9;
color: #1f2937;
border: 2px solid #e2e8f0;
}
.btn-footer-secondary:hover[b-61zod2n7jm] {
background: #e2e8f0;
}
.btn-footer-success[b-61zod2n7jm] {
background: #22c55e;
color: white;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.btn-footer-success:hover[b-61zod2n7jm] {
background: #16a34a;
box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}
.qr-footer[b-61zod2n7jm] {
justify-content: center;
gap: 12px;
}
/* ========================================
21. MODAL - ACCIONES (para modales simples)
======================================== */
.modal-footer-actions[b-61zod2n7jm] {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px 20px 24px;
border-top: 2px solid #f1f5f9;
flex-shrink: 0;
flex-wrap: wrap;
}
.btn-modal[b-61zod2n7jm] {
padding: 8px 20px;
border: none;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.btn-modal-primary[b-61zod2n7jm] {
background: #2563eb;
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.btn-modal-primary:hover:not(:disabled)[b-61zod2n7jm] {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
.btn-modal-primary:disabled[b-61zod2n7jm] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-modal-secondary[b-61zod2n7jm] {
background: #f1f5f9;
color: #1f2937;
border: 2px solid #e2e8f0;
}
.btn-modal-secondary:hover[b-61zod2n7jm] {
background: #e2e8f0;
transform: translateY(-2px);
}
/* ========================================
22. MODAL - FORMULARIOS
======================================== */
.modal-form[b-61zod2n7jm] {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-group[b-61zod2n7jm] {
display: flex;
flex-direction: column;
gap: 3px;
position: relative !important;
}
.form-group label[b-61zod2n7jm] {
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.form-group label i[b-61zod2n7jm] {
margin-right: 4px;
color: #2563eb;
}
.form-group .required[b-61zod2n7jm] {
color: #ef4444;
font-weight: 700;
}
.form-control[b-61zod2n7jm] {
padding: 8px 12px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.85rem;
background: white;
transition: all 0.3s ease;
color: #1f2937;
width: 100%;
box-sizing: border-box;
}
.form-control:focus[b-61zod2n7jm] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
transform: translateY(-1px);
}
.form-control:disabled[b-61zod2n7jm] {
background: #f1f5f9;
cursor: not-allowed;
opacity: 0.7;
}
.form-control[b-61zod2n7jm]::placeholder {
color: #a0aec0;
}
select.form-control[b-61zod2n7jm] {
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
appearance: auto;
}
textarea.form-control[b-61zod2n7jm] {
resize: vertical;
min-height: 60px;
font-family: inherit;
}
/* ========================================
23. MODAL - FORMULARIO HEADER
======================================== */
.form-header-bar[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
padding: 12px 16px;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
flex-wrap: wrap;
}
.form-header-left[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.form-header-right[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 10px;
}
.form-header-label[b-61zod2n7jm] {
font-size: 0.7rem;
color: #6b7280;
font-weight: 600;
text-transform: uppercase;
white-space: nowrap;
}
.form-header-select[b-61zod2n7jm] {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 4px 12px !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
width: auto !important;
min-width: 180px !important;
}
.form-header-date[b-61zod2n7jm] {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 4px 12px !important;
font-size: 0.8rem !important;
width: 150px !important;
}
/* ========================================
24. MODAL - DOS COLUMNAS
======================================== */
.form-two-columns[b-61zod2n7jm] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 16px;
}
.form-column[b-61zod2n7jm] {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
}
.form-column-header[b-61zod2n7jm] {
padding: 8px 14px;
display: flex;
align-items: center;
gap: 8px;
color: white;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.header-blue[b-61zod2n7jm] {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.header-orange[b-61zod2n7jm] {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.header-purple[b-61zod2n7jm] {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.header-red[b-61zod2n7jm] {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.form-column-header i[b-61zod2n7jm] {
font-size: 0.85rem;
}
.form-column-body[b-61zod2n7jm] {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* ========================================
25. MODAL - DELIVERY SECTION
======================================== */
.form-delivery-section[b-61zod2n7jm] {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
margin-bottom: 16px;
}
.form-delivery-body[b-61zod2n7jm] {
padding: 14px 16px;
}
.delivery-row[b-61zod2n7jm] {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-bottom: 10px;
}
.delivery-row-coords[b-61zod2n7jm] {
grid-template-columns: 1.8fr 0.6fr 0.6fr;
}
.form-group-localidad[b-61zod2n7jm] {
grid-column: 1;
}
.form-group-zona[b-61zod2n7jm] {
grid-column: 2;
}
.form-group-coord[b-61zod2n7jm] {
grid-column: 3;
}
/* ========================================
26. MODAL - DETALLE PAQUETE
======================================== */
.detalle-grupo-banner[b-61zod2n7jm] {
margin-bottom: 16px;
padding: 10px 16px;
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-radius: 12px;
border: 1px solid #bfdbfe;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.detalle-grupo-left[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 10px;
}
.detalle-grupo-badge[b-61zod2n7jm] {
background: #2563eb;
color: white;
padding: 3px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
}
.detalle-grupo-direccion[b-61zod2n7jm] {
font-size: 0.85rem;
color: #1e40af;
font-weight: 600;
}
.detalle-grupo-right[b-61zod2n7jm] {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.detalle-grupo-btn[b-61zod2n7jm] {
padding: 4px 10px;
border-radius: 20px;
border: 2px solid #e2e8f0;
background: white;
color: #1f2937;
cursor: pointer;
font-size: 0.7rem;
font-weight: 600;
transition: all 0.2s;
}
.detalle-grupo-btn:hover[b-61zod2n7jm] {
border-color: #2563eb;
background: #eff6ff;
}
.detalle-grupo-btn.active[b-61zod2n7jm] {
border-color: #2563eb;
background: #2563eb;
color: white;
}
.detalle-cadete-row[b-61zod2n7jm] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: linear-gradient(135deg, #f8fafc, #eef2ff);
border-radius: 14px;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
border: 1px solid rgba(37, 99, 235, 0.1);
}
.detalle-cadete-avatar[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 14px;
}
.detalle-avatar-circle[b-61zod2n7jm] {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.3rem;
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
animation: float-moto-b-61zod2n7jm 3s ease-in-out infinite;
}
@keyframes float-moto-b-61zod2n7jm {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-6px);
}
}
.detalle-cadete-nombre[b-61zod2n7jm] {
font-size: 1rem;
font-weight: 700;
color: #1f2937;
}
.detalle-cadete-rol[b-61zod2n7jm] {
font-size: 0.7rem;
color: #6b7280;
font-weight: 500;
}
.detalle-cadete-estado[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 10px;
}
.detalle-estado-label[b-61zod2n7jm] {
font-size: 0.75rem;
color: #6b7280;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.detalle-timeline[b-61zod2n7jm] {
margin: 16px 0;
padding: 16px 0;
border-top: 2px solid #f1f5f9;
border-bottom: 2px solid #f1f5f9;
}
.detalle-timeline h5[b-61zod2n7jm] {
font-size: 0.85rem;
margin: 0 0 14px 0;
font-weight: 700;
color: #1f2937;
}
.detalle-timeline h5 i[b-61zod2n7jm] {
color: #2563eb;
margin-right: 8px;
}
.timeline[b-61zod2n7jm] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
position: relative;
}
.timeline[b-61zod2n7jm]::before {
content: '';
position: absolute;
top: 28px;
left: 50px;
right: 50px;
height: 3px;
background: #e2e8f0;
z-index: 0;
border-radius: 2px;
}
.timeline-item[b-61zod2n7jm] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
}
.timeline-item .timeline-icon[b-61zod2n7jm] {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.timeline-item.active .timeline-icon[b-61zod2n7jm] {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}
.timeline-item.inactive .timeline-icon[b-61zod2n7jm] {
background: #f1f5f9;
color: #94a3b8;
}
.timeline-item .timeline-title[b-61zod2n7jm] {
font-size: 0.7rem;
font-weight: 700;
color: #1f2937;
}
.timeline-item.active .timeline-title[b-61zod2n7jm] {
color: #16a34a;
}
.timeline-item.inactive .timeline-title[b-61zod2n7jm] {
color: #94a3b8;
}
.timeline-item .timeline-date[b-61zod2n7jm] {
font-size: 0.6rem;
color: #6b7280;
font-weight: 500;
}
.timeline-item.inactive .timeline-date[b-61zod2n7jm] {
color: #cbd5e1;
}
.timeline-item.anulado .timeline-icon[b-61zod2n7jm] {
animation: pulse-anulado-timeline-b-61zod2n7jm 2s ease-in-out infinite;
}
@keyframes pulse-anulado-timeline-b-61zod2n7jm {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 40px rgba(239, 68, 68, 0.4);
}
}
.detalle-grid[b-61zod2n7jm] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.detalle-card[b-61zod2n7jm] {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
}
.detalle-card-header[b-61zod2n7jm] {
padding: 8px 14px;
color: white;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
}
.detalle-card-body[b-61zod2n7jm] {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.detalle-card.delivery-card[b-61zod2n7jm] {
grid-column: 1 / -1;
}
.delivery-grid[b-61zod2n7jm] {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
}
.detalle-mapa[b-61zod2n7jm] {
margin-top: 10px;
border-radius: 10px;
overflow: hidden;
border: 2px solid #e2e8f0;
height: 160px;
}
.detalle-mapa iframe[b-61zod2n7jm] {
width: 100%;
height: 100%;
border: none;
}
.detalle-anulado[b-61zod2n7jm] {
border-color: #fecaca;
}
.detalle-anulado .detalle-card-header[b-61zod2n7jm] {
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}
.info-item[b-61zod2n7jm] {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
background: #f8fafc;
border-radius: 8px;
}
.info-item .info-label[b-61zod2n7jm] {
font-size: 0.6rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 700;
}
.info-item .info-label i[b-61zod2n7jm] {
margin-right: 4px;
font-size: 0.6rem;
color: #2563eb;
}
.info-item .info-value[b-61zod2n7jm] {
font-size: 0.85rem;
font-weight: 600;
color: #1f2937;
word-break: break-word;
}
/* ========================================
27. MODAL - QR
======================================== */
.qr-loading[b-61zod2n7jm] {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 30px;
color: #6b7280;
}
.qr-grid[b-61zod2n7jm] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.qr-item[b-61zod2n7jm] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px;
background: #f8fafc;
border-radius: 14px;
border: 1px solid #e2e8f0;
}
.qr-image[b-61zod2n7jm] {
width: 160px;
height: 160px;
border: 3px solid #e2e8f0;
border-radius: 14px;
padding: 10px;
background: white;
}
.qr-image img[b-61zod2n7jm] {
width: 100%;
height: 100%;
object-fit: contain;
}
.qr-info[b-61zod2n7jm] {
text-align: center;
}
.qr-info .qr-label[b-61zod2n7jm] {
font-size: 0.6rem;
color: #6b7280;
text-transform: uppercase;
font-weight: 600;
display: block;
}
.qr-info .qr-value[b-61zod2n7jm] {
font-size: 0.9rem;
font-weight: 700;
color: #1f2937;
}
.btn-qr-print[b-61zod2n7jm] {
padding: 4px 12px;
border: none;
border-radius: 8px;
background: #2563eb;
color: white;
cursor: pointer;
font-size: 0.7rem;
font-weight: 600;
width: 100%;
transition: all 0.3s ease;
}
.btn-qr-print:hover[b-61zod2n7jm] {
background: #1d4ed8;
transform: scale(1.02);
}
.qr-single[b-61zod2n7jm] {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: 100%;
}
.qr-image-large[b-61zod2n7jm] {
width: 200px;
height: 200px;
border: 4px solid #e2e8f0;
border-radius: 20px;
padding: 16px;
background: white;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.qr-image-large img[b-61zod2n7jm] {
width: 100%;
height: 100%;
object-fit: contain;
}
.qr-texto[b-61zod2n7jm] {
display: flex;
gap: 12px;
align-items: center;
background: #f8fafc;
padding: 8px 24px;
border-radius: 30px;
}
.qr-texto .qr-label[b-61zod2n7jm] {
font-size: 0.7rem;
color: #6b7280;
font-weight: 600;
text-transform: uppercase;
}
.qr-texto .qr-value[b-61zod2n7jm] {
font-size: 1rem;
font-weight: 700;
color: #1f2937;
}
.qr-details[b-61zod2n7jm] {
display: flex;
gap: 12px;
width: 100%;
}
.qr-detail[b-61zod2n7jm] {
flex: 1;
background: #f1f5f9;
border-radius: 8px;
padding: 6px 12px;
text-align: center;
}
.qr-detail-label[b-61zod2n7jm] {
font-size: 0.55rem;
color: #6b7280;
text-transform: uppercase;
font-weight: 600;
display: block;
}
.qr-detail-value[b-61zod2n7jm] {
font-size: 0.8rem;
font-weight: 600;
color: #1f2937;
}
/* ========================================
28. MODAL - ANULACIΓN
======================================== */
.anulacion-paquete-info[b-61zod2n7jm] {
background: #f8fafc;
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 16px;
border: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 8px;
}
.anulacion-info-left[b-61zod2n7jm] {
flex: 1;
}
.anulacion-cliente[b-61zod2n7jm] {
font-weight: 700;
font-size: 0.9rem;
color: #1a1a1a;
}
.anulacion-viatico[b-61zod2n7jm] {
font-size: 0.75rem;
color: #6b7280;
}
.anulacion-direccion[b-61zod2n7jm] {
font-size: 0.7rem;
color: #6b7280;
}
.anulacion-badge[b-61zod2n7jm] {
background: #fee2e2;
color: #991b1b;
padding: 3px 12px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
}
.btn-volver-motivos[b-61zod2n7jm] {
background: none;
border: none;
color: #1565C0;
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
padding: 0 0 12px 0;
display: flex;
align-items: center;
gap: 6px;
}
.btn-volver-motivos:hover[b-61zod2n7jm] {
text-decoration: underline;
}
.motivos-container[b-61zod2n7jm] {
margin-bottom: 12px;
}
.motivos-label[b-61zod2n7jm] {
font-size: 0.8rem;
color: #6b7280;
margin-bottom: 10px;
}
.motivos-list[b-61zod2n7jm] {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 340px;
overflow-y: auto;
padding-right: 4px;
}
.motivo-card[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: 12px;
border: 2px solid #e2e8f0;
background: white;
cursor: pointer;
transition: all 0.2s ease;
}
.motivo-card:hover[b-61zod2n7jm] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.motivo-card.selected[b-61zod2n7jm] {
border-color: var(--motivo-color, #1565C0);
background: var(--motivo-bg, rgba(21, 101, 192, 0.08));
}
.motivo-icon[b-61zod2n7jm] {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.motivo-info[b-61zod2n7jm] {
flex: 1;
}
.motivo-nombre[b-61zod2n7jm] {
font-weight: 600;
font-size: 0.85rem;
}
.motivo-desc[b-61zod2n7jm] {
font-size: 0.7rem;
color: #6b7280;
}
.motivo-card i[b-61zod2n7jm] {
font-size: 1.2rem;
}
.confirmacion-container[b-61zod2n7jm] {
margin-bottom: 12px;
}
.confirmacion-label[b-61zod2n7jm] {
font-size: 0.8rem;
color: #6b7280;
margin-bottom: 10px;
}
.confirmacion-motivo[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 10px;
border-radius: 10px;
padding: 8px 14px;
margin-bottom: 12px;
border-left: 4px solid #6b7280;
}
.checkboxes-list[b-61zod2n7jm] {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.checkbox-item[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 0;
cursor: pointer;
font-size: 0.8rem;
color: #1a1a1a;
}
.checkbox-item input[type="checkbox"][b-61zod2n7jm] {
width: 18px;
height: 18px;
accent-color: #1565C0;
cursor: pointer;
}
.slider-container[b-61zod2n7jm] {
background: #f8fafc;
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 12px;
border: 1px solid #e2e8f0;
}
.slider-label[b-61zod2n7jm] {
font-size: 0.75rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 6px;
}
.slider-row[b-61zod2n7jm] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.slider-option[b-61zod2n7jm] {
font-size: 0.8rem;
font-weight: 400;
color: #6b7280;
transition: all 0.3s ease;
}
.slider-option.active[b-61zod2n7jm] {
font-weight: 700;
}
.slider-track[b-61zod2n7jm] {
position: relative;
width: 48px;
height: 26px;
background: #cbd5e1;
border-radius: 13px;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
}
.slider-track.active[b-61zod2n7jm] {
background: var(--slider-color, #1976D2);
}
.slider-thumb[b-61zod2n7jm] {
position: absolute;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
background: white;
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.observaciones-container[b-61zod2n7jm] {
margin-bottom: 12px;
}
.observaciones-label[b-61zod2n7jm] {
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
display: block;
margin-bottom: 4px;
}
.observaciones-label .required[b-61zod2n7jm] {
color: #ef4444;
}
.observaciones-container textarea[b-61zod2n7jm] {
width: 100%;
padding: 8px 12px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.8rem;
font-family: inherit;
resize: vertical;
min-height: 50px;
transition: all 0.3s ease;
}
.observaciones-container textarea:focus[b-61zod2n7jm] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}
.error-msg[b-61zod2n7jm] {
font-size: 0.7rem;
color: #ef4444;
margin-top: 4px;
}
.validation-error[b-61zod2n7jm] {
font-size: 0.7rem;
color: #ef4444;
text-align: center;
margin-bottom: 8px;
}
.validation-error i[b-61zod2n7jm] {
margin-right: 4px;
}
.btn-anular-confirm[b-61zod2n7jm] {
width: 100%;
padding: 10px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: white;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-anular-confirm:hover:not(:disabled)[b-61zod2n7jm] {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}
.btn-anular-confirm:disabled[b-61zod2n7jm] {
opacity: 0.6;
cursor: not-allowed;
}
/* ========================================
29. MODAL - ACCIONES MΓLTIPLES
======================================== */
.acciones-list[b-61zod2n7jm] {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
.accion-card[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border: 2px solid #e2e8f0;
border-radius: 12px;
background: white;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
text-align: left;
}
.accion-card:hover[b-61zod2n7jm] {
transform: translateY(-3px) scale(1.01);
border-color: #2563eb;
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.12);
}
.accion-icono[b-61zod2n7jm] {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
transition: all 0.3s ease;
}
.accion-card .accion-titulo[b-61zod2n7jm] {
font-weight: 700;
font-size: 0.9rem;
color: #1f2937;
}
.accion-card .accion-desc[b-61zod2n7jm] {
font-size: 0.7rem;
color: #6b7280;
}
.accion-card i:last-child[b-61zod2n7jm] {
color: #94a3b8;
transition: all 0.3s ease;
margin-left: auto;
}
.accion-card:hover i:last-child[b-61zod2n7jm] {
color: #2563eb;
transform: translateX(4px);
}
.accion-card.anular .accion-icono[b-61zod2n7jm] {
background: #fef2f2;
color: #dc2626;
}
.accion-card.anular:hover[b-61zod2n7jm] {
border-color: #dc2626;
box-shadow: 0 8px 25px rgba(220, 38, 38, 0.12);
}
.accion-card.editar-colaborador .accion-icono[b-61zod2n7jm] {
background: #fffbeb;
color: #f59e0b;
}
.accion-card.editar-colaborador:hover[b-61zod2n7jm] {
border-color: #f59e0b;
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.12);
}
.accion-card.editar-zona .accion-icono[b-61zod2n7jm] {
background: #eff6ff;
color: #2563eb;
}
.accion-card.editar-zona:hover[b-61zod2n7jm] {
border-color: #2563eb;
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15);
}
.accion-card.eliminar .accion-icono[b-61zod2n7jm] {
background: #fef2f2;
color: #7f1d1d;
}
.accion-card.eliminar:hover[b-61zod2n7jm] {
border-color: #7f1d1d;
box-shadow: 0 8px 25px rgba(127, 29, 29, 0.12);
}
/* ========================================
30. MODAL - SELECTOR DE PAQUETES
======================================== */
.selector-info[b-61zod2n7jm] {
margin-bottom: 16px;
padding: 10px 14px;
background: #f8fafc;
border-radius: 10px;
}
.selector-info i[b-61zod2n7jm] {
margin-right: 6px;
}
.selector-info strong[b-61zod2n7jm] {
font-size: 0.85rem;
color: #1f2937;
}
.selector-count[b-61zod2n7jm] {
font-size: 0.7rem;
color: #6b7280;
margin-left: 8px;
}
.selector-list[b-61zod2n7jm] {
display: flex;
flex-direction: column;
gap: 8px;
}
.selector-item[b-61zod2n7jm] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
cursor: pointer;
width: 100%;
text-align: left;
transition: all 0.3s ease;
}
.selector-item:hover[b-61zod2n7jm] {
border-color: #f59e0b;
background: #fff7ed;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}
.selector-left[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 12px;
}
.selector-viatico[b-61zod2n7jm] {
background: #f59e0b;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-weight: 700;
font-size: 0.8rem;
}
.selector-cedula[b-61zod2n7jm] {
font-size: 0.8rem;
color: #1f2937;
font-weight: 500;
}
.selector-right[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 8px;
}
.selector-monto[b-61zod2n7jm] {
color: #16a34a;
font-weight: 700;
font-size: 0.85rem;
}
.selector-right i[b-61zod2n7jm] {
color: #6b7280;
}
/* ========================================
31. MODAL - CONFIGURACIΓN (continuaciΓ³n)
======================================== */
.modal-info[b-61zod2n7jm] {
background: #eff6ff;
padding: 12px 16px;
border-radius: 12px;
font-size: 0.85rem;
color: #1f2937;
margin-bottom: 16px;
border: 1px solid rgba(37, 99, 235, 0.15);
font-weight: 500;
}
.modal-info i[b-61zod2n7jm] {
color: #2563eb;
margin-right: 8px;
}
.info-box[b-61zod2n7jm] {
font-size: 0.8rem;
color: #6b7280;
background: #f8fafc;
padding: 10px 14px;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.info-box i[b-61zod2n7jm] {
color: #2563eb;
margin-right: 6px;
}
/* ========================================
32. TOOLBAR - SELECCIΓN MΓLTIPLE
======================================== */
.toolbar-seleccion-multiple[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 8px;
background: #eff6ff !important;
padding: 4px 12px 4px 16px;
border-radius: 10px;
border: 1.5px solid #2563eb !important;
animation: fadeInSeleccion-b-61zod2n7jm 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fadeInSeleccion-b-61zod2n7jm {
from {
opacity: 0;
transform: scale(0.95) translateX(-10px);
}
to {
opacity: 1;
transform: scale(1) translateX(0);
}
}
.toolbar-seleccion-multiple .seleccion-count[b-61zod2n7jm] {
font-size: 0.75rem;
font-weight: 600;
color: #1e3a5f;
}
.toolbar-seleccion-multiple .seleccion-count i[b-61zod2n7jm] {
color: #2563eb;
margin-right: 4px;
}
.toolbar-seleccion-multiple .btn-acciones-multiples[b-61zod2n7jm] {
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
color: white !important;
padding: 5px 14px !important;
font-size: 0.75rem !important;
border: none !important;
border-radius: 8px !important;
font-weight: 600 !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.toolbar-seleccion-multiple .btn-acciones-multiples:hover[b-61zod2n7jm] {
background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35) !important;
}
.toolbar-seleccion-multiple .btn-limpiar-seleccion[b-61zod2n7jm] {
background: #f1f5f9 !important;
color: #6b7280 !important;
padding: 3px 8px !important;
font-size: 0.65rem !important;
border: none !important;
border-radius: 6px !important;
cursor: pointer !important;
font-weight: 600 !important;
transition: all 0.2s ease !important;
}
.toolbar-seleccion-multiple .btn-limpiar-seleccion:hover[b-61zod2n7jm] {
background: #fee2e2 !important;
color: #dc2626 !important;
transform: scale(1.05) !important;
}
/* ========================================
33. ALERTAS
======================================== */
.alert[b-61zod2n7jm] {
padding: 10px 16px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
font-size: 0.85rem;
}
.alert-danger[b-61zod2n7jm] {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
.alert-success[b-61zod2n7jm] {
background: #f0fdf4;
color: #166534;
border: 1px solid #bbf7d0;
}
/* ========================================
34. MODAL - CONFIGURACIΓN (continuaciΓ³n)
======================================== */
.config-layout[b-61zod2n7jm] {
display: flex;
height: 100%;
min-height: 450px;
}
.config-sidebar[b-61zod2n7jm] {
width: 200px;
min-width: 200px;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
border-right: 2px solid #e2e8f0;
padding: 16px 0;
display: flex;
flex-direction: column;
gap: 4px;
overflow-y: auto;
}
.config-sidebar-label[b-61zod2n7jm] {
font-size: 0.65rem;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 0 16px 10px;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 6px;
}
.config-nav-btn[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
margin: 2px 8px;
border: none;
border-radius: 10px;
background: transparent;
color: #64748b;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
border-left: 3px solid transparent;
}
.config-nav-btn i[b-61zod2n7jm] {
font-size: 1rem;
width: 20px;
text-align: center;
transition: all 0.3s ease;
}
.config-nav-btn span[b-61zod2n7jm] {
flex: 1;
}
.config-nav-btn:hover[b-61zod2n7jm] {
background: #eff6ff;
color: #2563eb;
transform: translateX(4px);
border-left: 3px solid #2563eb;
}
.config-nav-btn.active[b-61zod2n7jm] {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
color: #1e3a5f;
font-weight: 700;
border-left: 3px solid #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}
.config-nav-badge[b-61zod2n7jm] {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: white;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
min-width: 24px;
text-align: center;
}
.config-content[b-61zod2n7jm] {
flex: 1;
padding: 20px 24px;
overflow-y: auto;
background: #ffffff;
}
.config-section[b-61zod2n7jm] {
display: flex;
flex-direction: column;
height: 100%;
animation: fadeInSection-b-61zod2n7jm 0.4s ease;
}
@keyframes fadeInSection-b-61zod2n7jm {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.config-header-row[b-61zod2n7jm] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 2px solid #f1f5f9;
flex-wrap: wrap;
gap: 12px;
flex-shrink: 0;
}
.config-header-info h5[b-61zod2n7jm] {
margin: 0 0 2px 0;
font-size: 1.1rem;
font-weight: 700;
color: #1f2937;
display: flex;
align-items: center;
gap: 8px;
}
.config-header-info h5 i[b-61zod2n7jm] {
color: #2563eb;
font-size: 1rem;
}
.config-header-info span[b-61zod2n7jm] {
font-size: 0.75rem;
color: #6b7280;
font-weight: 500;
}
.config-header-actions[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.config-search-wrapper[b-61zod2n7jm] {
position: relative;
display: flex;
align-items: center;
}
.config-search-wrapper i[b-61zod2n7jm] {
position: absolute;
left: 10px;
color: #94a3b8;
font-size: 0.8rem;
z-index: 2;
}
.config-search-wrapper input[b-61zod2n7jm] {
padding: 6px 12px 6px 32px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.8rem;
background: white;
transition: all 0.3s ease;
color: #1f2937;
width: 180px;
font-weight: 500;
height: 32px;
}
.config-search-wrapper input:focus[b-61zod2n7jm] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.config-search-wrapper input:focus + i[b-61zod2n7jm] {
color: #2563eb;
}
.config-btn-new[b-61zod2n7jm] {
padding: 6px 16px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: white;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
height: 32px;
}
.config-btn-new:hover[b-61zod2n7jm] {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
.config-btn-refresh[b-61zod2n7jm] {
width: 32px;
height: 32px;
border: 2px solid #e2e8f0;
border-radius: 10px;
background: white;
color: #64748b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-size: 0.8rem;
}
.config-btn-refresh:hover[b-61zod2n7jm] {
border-color: #2563eb;
color: #2563eb;
background: #eff6ff;
transform: rotate(90deg);
}
.config-filter-select[b-61zod2n7jm] {
padding: 6px 28px 6px 12px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.8rem;
background: white;
color: #1f2937;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
height: 32px;
}
.config-filter-select:focus[b-61zod2n7jm] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.config-form-card[b-61zod2n7jm] {
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 14px;
padding: 16px 20px;
margin-bottom: 16px;
flex-shrink: 0;
}
.config-form-title h5[b-61zod2n7jm] {
margin: 0 0 12px 0;
font-size: 0.95rem;
font-weight: 700;
color: #1f2937;
}
.config-form-title h5 i[b-61zod2n7jm] {
margin-right: 6px;
}
.config-form-grid[b-61zod2n7jm] {
display: grid;
gap: 12px;
margin-bottom: 12px;
}
.config-form-grid.cols-3[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr 1fr;
}
.config-form-grid.cols-2[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr;
}
.config-form-grid .form-group label[b-61zod2n7jm] {
font-size: 0.7rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.config-form-grid .form-group .form-control[b-61zod2n7jm] {
padding: 6px 12px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 0.8rem;
background: white;
transition: all 0.3s ease;
color: #1f2937;
font-weight: 500;
height: 32px;
}
.config-form-grid .form-group .form-control:focus[b-61zod2n7jm] {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
outline: none;
}
.config-form-actions[b-61zod2n7jm] {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.config-list-container[b-61zod2n7jm] {
flex: 1;
overflow-y: auto;
min-height: 0;
margin-bottom: 10px;
}
.config-cedula-list[b-61zod2n7jm] {
display: flex;
flex-direction: column;
gap: 8px;
}
.config-cedula-grupo[b-61zod2n7jm] {
background: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.config-cedula-grupo:hover[b-61zod2n7jm] {
border-color: #2563eb;
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}
.config-cedula-header[b-61zod2n7jm] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
cursor: pointer;
transition: all 0.3s ease;
background: #ffffff;
}
.config-cedula-header:hover[b-61zod2n7jm] {
background: #f8fafc;
}
.config-cedula-header.expanded[b-61zod2n7jm] {
background: #eff6ff;
border-bottom: 2px solid #dbeafe;
}
.config-cedula-header-left[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 10px;
}
.config-cedula-chevron[b-61zod2n7jm] {
color: #94a3b8;
font-size: 0.75rem;
transition: all 0.3s ease;
width: 16px;
}
.config-cedula-numero[b-61zod2n7jm] {
font-size: 0.9rem;
font-weight: 700;
color: #1f2937;
}
.config-cedula-badge[b-61zod2n7jm] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: all 0.3s ease;
}
.config-cedula-badge.activo[b-61zod2n7jm] {
background: #d1fae5;
color: #065f46;
}
.config-cedula-badge.inactivo[b-61zod2n7jm] {
background: #fee2e2;
color: #991b1b;
}
.config-cedula-header-right[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 8px;
}
.config-cedula-count[b-61zod2n7jm] {
font-size: 0.7rem;
color: #64748b;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
background: #f1f5f9;
padding: 3px 10px;
border-radius: 20px;
}
.config-cedula-count i[b-61zod2n7jm] {
color: #2563eb;
font-size: 0.7rem;
}
.config-btn-sm[b-61zod2n7jm] {
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: white;
}
.config-btn-sm.edit[b-61zod2n7jm] {
background: #f59e0b;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}
.config-btn-sm.edit:hover[b-61zod2n7jm] {
background: #d97706;
transform: scale(1.1);
}
.config-btn-sm.delete[b-61zod2n7jm] {
background: #ef4444;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.config-btn-sm.delete:hover[b-61zod2n7jm] {
background: #dc2626;
transform: scale(1.1);
}
.config-btn-sm.activate[b-61zod2n7jm] {
background: #22c55e;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
.config-btn-sm.activate:hover[b-61zod2n7jm] {
background: #16a34a;
transform: scale(1.1);
}
.config-cedula-body[b-61zod2n7jm] {
padding: 12px 16px;
background: #fafbfc;
border-top: 1px solid #e2e8f0;
animation: expandBody-b-61zod2n7jm 0.3s ease;
}
@keyframes expandBody-b-61zod2n7jm {
from {
opacity: 0;
max-height: 0;
}
to {
opacity: 1;
max-height: 500px;
}
}
.config-domicilio-item[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: #ffffff;
border-radius: 10px;
margin-bottom: 6px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
flex-wrap: wrap;
}
.config-domicilio-item:hover[b-61zod2n7jm] {
border-color: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.06);
}
.config-domicilio-item:last-child[b-61zod2n7jm] {
margin-bottom: 0;
}
.config-domicilio-direccion[b-61zod2n7jm] {
font-weight: 600;
color: #1f2937;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 150px;
}
.config-domicilio-direccion i[b-61zod2n7jm] {
color: #2563eb;
font-size: 0.75rem;
}
.config-domicilio-localidad[b-61zod2n7jm] {
font-size: 0.75rem;
color: #6b7280;
font-weight: 500;
background: #f1f5f9;
padding: 3px 10px;
border-radius: 20px;
}
.config-domicilio-estado[b-61zod2n7jm] {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 20px;
letter-spacing: 0.3px;
}
.config-domicilio-estado.activo[b-61zod2n7jm] {
background: #d1fae5;
color: #065f46;
}
.config-domicilio-estado.inactivo[b-61zod2n7jm] {
background: #fee2e2;
color: #991b1b;
}
.config-btn-add-domicilio[b-61zod2n7jm] {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 8px;
margin-top: 8px;
border: 2px dashed #cbd5e1;
border-radius: 10px;
background: transparent;
color: #64748b;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.config-btn-add-domicilio:hover[b-61zod2n7jm] {
border-color: #2563eb;
color: #2563eb;
background: #eff6ff;
border-style: solid;
}
.config-localidad-list[b-61zod2n7jm] {
display: flex;
flex-direction: column;
gap: 6px;
}
.config-localidad-item[b-61zod2n7jm] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 12px;
border-left-width: 5px;
transition: all 0.3s ease;
gap: 10px;
}
.config-localidad-item:hover[b-61zod2n7jm] {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.config-localidad-info[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.config-localidad-zona[b-61zod2n7jm] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
color: white;
text-transform: uppercase;
letter-spacing: 0.5px;
min-width: 60px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.config-localidad-nombre[b-61zod2n7jm] {
font-size: 0.85rem;
font-weight: 600;
color: #1f2937;
}
.config-loading[b-61zod2n7jm] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
gap: 12px;
}
.config-spinner[b-61zod2n7jm] {
width: 36px;
height: 36px;
border: 4px solid #e2e8f0;
border-top: 4px solid #2563eb;
border-radius: 50%;
animation: configSpin-b-61zod2n7jm 0.8s linear infinite;
}
@keyframes configSpin-b-61zod2n7jm {
to {
transform: rotate(360deg);
}
}
.config-loading p[b-61zod2n7jm] {
color: #6b7280;
font-weight: 500;
font-size: 0.85rem;
}
.config-empty[b-61zod2n7jm] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
gap: 6px;
}
.config-empty i[b-61zod2n7jm] {
font-size: 3rem;
color: #d1d5db;
margin-bottom: 4px;
}
.config-empty h5[b-61zod2n7jm] {
margin: 0;
color: #1f2937;
font-weight: 700;
font-size: 1rem;
}
.config-empty p[b-61zod2n7jm] {
margin: 0;
color: #94a3b8;
font-size: 0.8rem;
}
.config-pagination[b-61zod2n7jm] {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 0 4px;
margin-top: 12px;
border-top: 1px solid #f1f5f9;
flex-shrink: 0;
}
.config-pagination .btn-page[b-61zod2n7jm] {
padding: 5px 14px;
border: 2px solid #e2e8f0;
border-radius: 8px;
background: white;
color: #1f2937;
font-weight: 600;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
}
.config-pagination .btn-page:hover:not(:disabled)[b-61zod2n7jm] {
border-color: #2563eb;
color: #2563eb;
background: #eff6ff;
}
.config-pagination .btn-page:disabled[b-61zod2n7jm] {
opacity: 0.4;
cursor: not-allowed;
}
.config-pagination .page-info[b-61zod2n7jm] {
font-size: 0.75rem;
color: #64748b;
font-weight: 600;
}
/* ========================================
35. COMBOBOX - SISTEMA ΓNICO
======================================== */
.combobox-container[b-61zod2n7jm] {
position: relative !important;
width: 100%;
}
.combobox-input[b-61zod2n7jm] {
width: 100%;
padding-right: 40px !important;
box-sizing: border-box;
}
.combobox-toggle[b-61zod2n7jm] {
position: absolute !important;
right: 2px !important;
top: 2px !important;
bottom: 2px !important;
width: 34px !important;
background: #f1f5f9 !important;
border: none !important;
border-radius: 0 8px 8px 0 !important;
cursor: pointer !important;
color: #6b7280 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
z-index: 2 !important;
}
.combobox-toggle:hover[b-61zod2n7jm] {
background: #e2e8f0 !important;
color: #1f2937 !important;
}
.combobox-toggle-filtro[b-61zod2n7jm] {
position: absolute !important;
right: 4px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
color: #94a3b8 !important;
padding: 0 4px !important;
z-index: 2 !important;
height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.combobox-toggle-filtro:hover[b-61zod2n7jm] {
color: #2563eb !important;
}
.combobox-list[b-61zod2n7jm] {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
max-height: 200px !important;
overflow-y: auto !important;
background: white !important;
border: 2px solid #e2e8f0 !important;
border-top: none !important;
border-radius: 0 0 10px 10px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
z-index: 999999 !important;
margin-top: 2px !important;
animation: comboboxSlideDown-b-61zod2n7jm 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.combobox-list-top[b-61zod2n7jm] {
bottom: 100% !important;
top: auto !important;
border-top: 2px solid #e2e8f0 !important;
border-bottom: none !important;
border-radius: 10px 10px 0 0 !important;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25) !important;
margin-bottom: 2px !important;
}
.combobox-list-filtro[b-61zod2n7jm] {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
max-height: 150px !important;
overflow-y: auto !important;
background: white !important;
border: 2px solid #e2e8f0 !important;
border-top: none !important;
border-radius: 0 0 6px 6px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
z-index: 999999 !important;
margin-top: 2px !important;
}
.combobox-item[b-61zod2n7jm] {
padding: 8px 14px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
font-size: 0.85rem !important;
color: #1f2937 !important;
font-weight: 500 !important;
}
.combobox-item:hover[b-61zod2n7jm] {
background: #eff6ff !important;
}
.combobox-item.disabled[b-61zod2n7jm] {
color: #a0aec0 !important;
cursor: default !important;
font-weight: 400 !important;
}
.combobox-item.disabled:hover[b-61zod2n7jm] {
background: transparent !important;
}
@keyframes comboboxSlideDown-b-61zod2n7jm {
from {
opacity: 0;
transform: translateY(-8px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.combobox-list[b-61zod2n7jm]::-webkit-scrollbar,
.combobox-list-filtro[b-61zod2n7jm]::-webkit-scrollbar {
width: 5px !important;
}
.combobox-list[b-61zod2n7jm]::-webkit-scrollbar-track,
.combobox-list-filtro[b-61zod2n7jm]::-webkit-scrollbar-track {
background: #f1f5f9 !important;
border-radius: 4px !important;
}
.combobox-list[b-61zod2n7jm]::-webkit-scrollbar-thumb,
.combobox-list-filtro[b-61zod2n7jm]::-webkit-scrollbar-thumb {
background: #cbd5e1 !important;
border-radius: 4px !important;
}
.combobox-list[b-61zod2n7jm]::-webkit-scrollbar-thumb:hover,
.combobox-list-filtro[b-61zod2n7jm]::-webkit-scrollbar-thumb:hover {
background: #2563eb !important;
}
/* ========================================
36. EXPORT DROPDOWN
======================================== */
.dropdown-export[b-61zod2n7jm] {
position: relative;
display: inline-block;
}
.dropdown-export-menu[b-61zod2n7jm] {
position: absolute;
top: calc(100% + 4px);
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
border: 1px solid #e2e8f0;
min-width: 180px;
padding: 6px 0;
z-index: 1000;
animation: dropdownSlideUp-b-61zod2n7jm 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dropdown-export-menu button[b-61zod2n7jm] {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 16px;
border: none;
background: transparent;
cursor: pointer;
font-size: 0.8rem;
color: #1f2937;
transition: all 0.2s ease;
text-align: left;
font-weight: 500;
border-left: 3px solid transparent;
}
.dropdown-export-menu button:hover[b-61zod2n7jm] {
background: #f8fafc;
border-left-color: #2563eb;
}
.dropdown-export-menu button i[b-61zod2n7jm] {
width: 18px;
font-size: 1rem;
text-align: center;
}
.dropdown-export-menu button:disabled[b-61zod2n7jm] {
opacity: 0.5;
cursor: not-allowed;
}
.dropdown-export-menu button:not(:last-child)[b-61zod2n7jm] {
border-bottom: 1px solid #f1f5f9;
}
@keyframes dropdownSlideUp-b-61zod2n7jm {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
37. RESPONSIVE
======================================== */
@media (max-width: 1024px) {
.filters-grid[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.filter-actions[b-61zod2n7jm] {
grid-column: 1 / -1;
}
.filter-actions-buttons[b-61zod2n7jm] {
flex: 1;
}
.delivery-row[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr;
}
.delivery-row-coords[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr;
}
.form-group-localidad[b-61zod2n7jm] {
grid-column: 1;
}
.form-group-zona[b-61zod2n7jm] {
grid-column: 2;
}
.form-group-coord[b-61zod2n7jm] {
grid-column: 1 / -1;
}
.detalle-grid[b-61zod2n7jm] {
grid-template-columns: 1fr;
}
.delivery-grid[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr;
}
.config-sidebar[b-61zod2n7jm] {
width: 160px;
min-width: 160px;
}
.config-form-grid.cols-3[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.toolbar-section .toolbar-container[b-61zod2n7jm] {
padding: 10px 12px 8px 12px;
}
.lista-section[b-61zod2n7jm] {
padding: 8px 12px 12px 12px;
}
.toolbar-row[b-61zod2n7jm] {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.toolbar-right[b-61zod2n7jm] {
flex-wrap: wrap;
justify-content: flex-start;
}
.toolbar-actions[b-61zod2n7jm] {
gap: 6px;
}
.btn-toolbar[b-61zod2n7jm] {
padding: 5px 12px;
font-size: 0.75rem;
height: 30px;
}
.btn-toolbar span[b-61zod2n7jm] {
display: none;
}
.btn-toolbar i[b-61zod2n7jm] {
font-size: 1rem;
}
.stats-container[b-61zod2n7jm] {
margin-left: 0;
padding-left: 0;
border-left: none;
gap: 4px;
}
.stat-item[b-61zod2n7jm] {
font-size: 0.65rem;
padding: 2px 8px;
}
.stat-item strong[b-61zod2n7jm] {
font-size: 0.8rem;
}
.filters-grid[b-61zod2n7jm] {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.filter-actions-buttons[b-61zod2n7jm] {
flex-direction: row !important;
}
.btn-filter[b-61zod2n7jm], .btn-filter-clear[b-61zod2n7jm] {
flex: 1 !important;
}
.filter-item .fecha-controls[b-61zod2n7jm] {
flex-wrap: wrap !important;
}
.form-two-columns[b-61zod2n7jm] {
grid-template-columns: 1fr;
gap: 12px;
}
.delivery-row[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr;
}
.delivery-row-coords[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr;
}
.timeline[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.timeline[b-61zod2n7jm]::before {
display: none;
}
.detalle-grid[b-61zod2n7jm] {
grid-template-columns: 1fr;
}
.delivery-grid[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr;
}
.pagination-container[b-61zod2n7jm] {
flex-direction: column;
gap: 10px;
padding: 12px 16px;
}
.pagination-controls[b-61zod2n7jm] {
justify-content: center;
flex-wrap: wrap;
}
.modal-container[b-61zod2n7jm] {
width: 98%;
margin: 10px;
max-height: 95vh;
}
.modal-container-form[b-61zod2n7jm],
.modal-container-detalle[b-61zod2n7jm] {
max-height: 95vh;
min-height: 50vh;
}
.modal-body-scroll[b-61zod2n7jm] {
padding: 14px 16px;
}
.modal-footer-fixed[b-61zod2n7jm] {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.modal-footer-left[b-61zod2n7jm],
.modal-footer-center[b-61zod2n7jm],
.modal-footer-right[b-61zod2n7jm] {
justify-content: center;
}
.btn-footer[b-61zod2n7jm] {
justify-content: center;
padding: 8px 16px;
font-size: 0.8rem;
}
.config-layout[b-61zod2n7jm] {
flex-direction: column;
}
.config-sidebar[b-61zod2n7jm] {
width: 100%;
min-width: unset;
flex-direction: row;
border-right: none;
border-bottom: 2px solid #e2e8f0;
padding: 6px 0;
overflow-x: auto;
background: #f8fafc;
gap: 2px;
}
.config-sidebar-label[b-61zod2n7jm] {
display: none;
}
.config-nav-btn[b-61zod2n7jm] {
border-left: none !important;
border-bottom: 3px solid transparent;
justify-content: center;
padding: 8px 14px;
white-space: nowrap;
font-size: 0.75rem;
margin: 0 2px;
border-radius: 0;
}
.config-nav-btn.active[b-61zod2n7jm] {
border-bottom-color: #2563eb !important;
border-left-color: transparent !important;
}
.config-content[b-61zod2n7jm] {
padding: 14px 16px;
}
.config-form-grid.cols-3[b-61zod2n7jm] {
grid-template-columns: 1fr 1fr;
}
.config-form-grid.cols-2[b-61zod2n7jm] {
grid-template-columns: 1fr;
}
.config-header-row[b-61zod2n7jm] {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.config-header-actions[b-61zod2n7jm] {
flex-wrap: wrap;
gap: 6px;
}
.config-search-wrapper input[b-61zod2n7jm] {
width: 140px;
}
.config-cedula-header[b-61zod2n7jm] {
flex-wrap: wrap;
gap: 6px;
}
.config-cedula-header-right[b-61zod2n7jm] {
margin-left: auto;
}
.config-domicilio-item[b-61zod2n7jm] {
flex-wrap: wrap;
gap: 6px;
}
.config-domicilio-direccion[b-61zod2n7jm] {
flex-basis: 100%;
order: 1;
}
.config-domicilio-localidad[b-61zod2n7jm] {
order: 2;
}
.config-domicilio-estado[b-61zod2n7jm] {
order: 3;
}
.config-domicilio-item .config-btn-sm[b-61zod2n7jm] {
order: 4;
}
.modal-content-anulacion[b-61zod2n7jm] {
max-width: 98% !important;
}
.motivos-list[b-61zod2n7jm] {
max-height: 250px;
}
.qr-grid[b-61zod2n7jm] {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.qr-image[b-61zod2n7jm] {
width: 130px;
height: 130px;
}
.qr-image-large[b-61zod2n7jm] {
width: 160px;
height: 160px;
}
}
@media (max-width: 480px) {
.filters-grid[b-61zod2n7jm] {
grid-template-columns: 1fr !important;
}
.delivery-row[b-61zod2n7jm] {
grid-template-columns: 1fr;
}
.delivery-row-coords[b-61zod2n7jm] {
grid-template-columns: 1fr;
}
.form-group-localidad[b-61zod2n7jm],
.form-group-zona[b-61zod2n7jm],
.form-group-coord[b-61zod2n7jm] {
grid-column: 1 !important;
}
.timeline[b-61zod2n7jm] {
grid-template-columns: 1fr;
gap: 12px;
}
.detalle-grid[b-61zod2n7jm] {
grid-template-columns: 1fr;
}
.delivery-grid[b-61zod2n7jm] {
grid-template-columns: 1fr;
}
.detalle-mapa[b-61zod2n7jm] {
height: 120px;
}
.btn-toolbar span[b-61zod2n7jm] {
display: none;
}
.btn-toolbar i[b-61zod2n7jm] {
font-size: 1rem;
}
.stat-item[b-61zod2n7jm] {
font-size: 0.6rem;
padding: 2px 6px;
}
.modal-body-scroll[b-61zod2n7jm] {
padding: 10px 12px;
}
.modal-footer-actions[b-61zod2n7jm] {
flex-direction: column;
align-items: stretch;
padding: 10px 12px 16px 12px;
}
.btn-modal[b-61zod2n7jm] {
justify-content: center;
}
.config-form-grid.cols-3[b-61zod2n7jm] {
grid-template-columns: 1fr;
}
.config-form-grid.cols-2[b-61zod2n7jm] {
grid-template-columns: 1fr;
}
.config-cedula-header[b-61zod2n7jm] {
flex-direction: column;
align-items: stretch;
}
.config-cedula-header-right[b-61zod2n7jm] {
margin-left: 0;
justify-content: flex-start;
}
.config-search-wrapper input[b-61zod2n7jm] {
width: 100px;
}
.config-sidebar .config-nav-btn[b-61zod2n7jm] {
padding: 6px 10px;
font-size: 0.7rem;
}
.config-nav-btn i[b-61zod2n7jm] {
font-size: 0.8rem;
}
.config-nav-btn span[b-61zod2n7jm] {
display: none;
}
.config-nav-badge[b-61zod2n7jm] {
font-size: 0.55rem;
min-width: 18px;
padding: 1px 6px;
}
}
@media (max-height: 700px) {
.modal-overlay[b-61zod2n7jm] {
padding: 30px 16px 20px 16px;
align-items: flex-start;
}
.modal-container[b-61zod2n7jm] {
margin-top: 20px;
max-height: 85vh;
}
}
@media (max-height: 500px) {
.modal-overlay[b-61zod2n7jm] {
padding: 10px 12px 10px 12px;
align-items: flex-start;
}
.modal-container[b-61zod2n7jm] {
margin-top: 10px;
max-height: 92vh;
}
}
/* ========================================
38. SCROLLBAR GLOBAL
======================================== */
[b-61zod2n7jm]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
[b-61zod2n7jm]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
[b-61zod2n7jm]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
[b-61zod2n7jm]::-webkit-scrollbar-thumb:hover {
background: #2563eb;
}
/* ========================================
39. CORRECCIΓN BOTΓN QR - ANCHO FIJO
======================================== */
.toolbar-actions .btn-qr-print[b-61zod2n7jm] {
width: auto !important;
min-width: unset !important;
max-width: 85px !important;
flex: 0 0 auto !important;
padding: 6px 12px !important;
white-space: nowrap !important;
}
.toolbar-actions .btn-qr-print span[b-61zod2n7jm] {
display: inline !important;
font-size: 0.75rem !important;
}
/* ======================================== */
/* 40. ESTADΓSTICAS - UNIFICACIΓN VISUAL */
/* ======================================== */
/* Estructura unificada para todos los indicadores */
.stats-container .stat-item[b-61zod2n7jm] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 4px 14px;
height: 32px;
border-radius: 20px;
border: 1.5px solid #e2e8f0;
font-size: 0.75rem;
color: #1f2937;
background: #f8fafc;
white-space: nowrap;
transition: all 0.2s ease;
font-weight: 500;
cursor: default;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.stats-container .stat-item i[b-61zod2n7jm] {
font-size: 0.85rem;
margin-right: 2px;
}
.stats-container .stat-item strong[b-61zod2n7jm] {
font-weight: 700;
font-size: 0.85rem;
color: #1f2937;
}
/* ======================================== */
/* COLOROMETRΓA Y ANIMACIONES POR ESTADO */
/* ======================================== */
/* π¦ TOTAL - Azul suave */
.stat-total[b-61zod2n7jm] {
background: rgba(37, 99, 235, 0.06);
border-color: rgba(37, 99, 235, 0.2);
}
.stat-total i[b-61zod2n7jm] {
color: #2563eb;
}
/* π DOMICILIOS - Azul suave */
.stat-total[b-61zod2n7jm] {
background: rgba(37, 99, 235, 0.06);
border-color: rgba(37, 99, 235, 0.2);
}
.stat-total i[b-61zod2n7jm] {
color: #2563eb;
}
/* β
CONFIRMARON - Verde con pulso */
.stat-confirmado[b-61zod2n7jm] {
background: #dcfce7 !important;
border-color: #86efac !important;
animation: pulse-verde-b-61zod2n7jm 2s ease-in-out infinite;
}
.stat-confirmado i[b-61zod2n7jm] {
color: #22c55e !important;
}
.stat-confirmado strong[b-61zod2n7jm] {
color: #16a34a !important;
}
/* β NO CONFIRMARON - Amarillo con agitaciΓ³n fuerte */
.stat-no-confirmado[b-61zod2n7jm] {
background: #fef9c3 !important;
border-color: #fde047 !important;
animation: agitar-fuerte-b-61zod2n7jm 0.8s ease-in-out infinite;
}
.stat-no-confirmado i[b-61zod2n7jm] {
color: #eab308 !important;
}
.stat-no-confirmado strong[b-61zod2n7jm] {
color: #ca8a04 !important;
}
/* π« SIN ASIGNAR - Amarillo fluorescente con parpadeo lento */
.stat-sin-asignar[b-61zod2n7jm] {
background: #fef08a !important;
border-color: #eab308 !important;
animation: parpadeo-lento-b-61zod2n7jm 1.2s ease-in-out infinite;
}
.stat-sin-asignar i[b-61zod2n7jm] {
color: #854d0e !important;
}
.stat-sin-asignar strong[b-61zod2n7jm] {
color: #713f12 !important;
}
/* π€ ASIGNADOS - Naranja con latido (pulso) */
.stat-asignado[b-61zod2n7jm] {
background: rgba(245, 158, 11, 0.06);
border-color: rgba(245, 158, 11, 0.2);
animation: pulse-naranja-b-61zod2n7jm 1.5s ease-in-out infinite;
}
.stat-asignado i[b-61zod2n7jm] {
color: #f59e0b;
}
.stat-asignado strong[b-61zod2n7jm] {
color: #b45309;
}
/* π EN CAMINO - Azul con movimiento horizontal leve */
.stat-encamino[b-61zod2n7jm] {
background: rgba(59, 130, 246, 0.06);
border-color: rgba(59, 130, 246, 0.2);
animation: mover-horizontal-b-61zod2n7jm 1.0s ease-in-out infinite;
}
.stat-encamino i[b-61zod2n7jm] {
color: #3b82f6;
}
.stat-encamino strong[b-61zod2n7jm] {
color: #1e40af;
}
/* π ENTREGADOS - Verde sΓ³lido (sin animaciΓ³n) */
.stat-entregado[b-61zod2n7jm] {
background: rgba(34, 197, 94, 0.06);
border-color: rgba(34, 197, 94, 0.2);
/* Sin animaciΓ³n, se ve sΓ³lido */
}
.stat-entregado i[b-61zod2n7jm] {
color: #22c55e;
}
.stat-entregado strong[b-61zod2n7jm] {
color: #15803d;
}
/* β ANULADOS - Rojo con pulso intenso */
.stat-cancelado[b-61zod2n7jm] {
background: rgba(239, 68, 68, 0.06);
border-color: rgba(239, 68, 68, 0.2);
animation: pulse-anulado-b-61zod2n7jm 1.5s ease-in-out infinite;
}
.stat-cancelado i[b-61zod2n7jm] {
color: #ef4444;
}
.stat-cancelado strong[b-61zod2n7jm] {
color: #991b1b;
}
/* ======================================== */
/* ANIMACIONES DE ESTADΓSTICAS */
/* ======================================== */
/* Pulso verde para Confirmaron */
@keyframes pulse-verde-b-61zod2n7jm {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3);
}
50% {
transform: scale(1.04);
box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}
}
/* AgitaciΓ³n fuerte para No confirmaron */
@keyframes agitar-fuerte-b-61zod2n7jm {
0% {
transform: translateX(0) scale(1);
}
10% {
transform: translateX(-8px) scale(1.02);
}
20% {
transform: translateX(8px) scale(1.02);
}
30% {
transform: translateX(-6px) scale(1.01);
}
40% {
transform: translateX(6px) scale(1.01);
}
50% {
transform: translateX(-4px) scale(1);
}
60% {
transform: translateX(4px) scale(1);
}
70% {
transform: translateX(-2px) scale(1);
}
80% {
transform: translateX(2px) scale(1);
}
90% {
transform: translateX(-1px) scale(1);
}
100% {
transform: translateX(0) scale(1);
}
}
/* Parpadeo lento para Sin Asignar */
@keyframes parpadeo-lento-b-61zod2n7jm {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.75;
transform: scale(1.02);
box-shadow: 0 0 30px rgba(234, 179, 8, 0.3);
}
}
/* Pulso naranja para Asignados */
@keyframes pulse-naranja-b-61zod2n7jm {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3);
}
50% {
transform: scale(1.04);
box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}
}
/* Movimiento horizontal leve para En Camino */
@keyframes mover-horizontal-b-61zod2n7jm {
0% {
transform: translateX(0) scale(1);
}
50% {
transform: translateX(4px) scale(1.02);
}
100% {
transform: translateX(0) scale(1);
}
}
/* Pulso rojo intenso para Anulados */
@keyframes pulse-anulado-b-61zod2n7jm {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}
}
/* /Pages/Logistica/Paqueteria_Mapa.razor.rz.scp.css */
/* ========================================
PΓGINA: PAQUETERΓA MAPA
======================================== */
/* === VARIABLES === */
:root[b-k1dvl16plp] {
--secondary-color: #3498db;
--warning-color: #f39c12;
--success-color: #27ae60;
--danger-color: #dc3545;
--text-dark: #2c3e50;
--primary-blue: #3B82F6;
--bg-light: #f8fafc;
--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
--border-radius: 12px;
}
/* === CONTENEDOR PRINCIPAL === */
.mapa-container[b-k1dvl16plp] {
display: flex;
flex-direction: column;
height: 100vh;
max-height: 100vh;
min-height: 0;
background: var(--bg-light);
font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12px;
overflow: hidden;
position: relative;
}
/* === BARRA DE HERRAMIENTAS === */
.toolbar[b-k1dvl16plp] {
flex: 0 0 auto;
background: white;
border-bottom: 1px solid #e5e7eb;
padding: 8px 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
z-index: 10;
border-radius: 0 0 var(--border-radius) var(--border-radius);
overflow: visible;
}
.toolbar-top[b-k1dvl16plp] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
padding-bottom: 8px;
border-bottom: 1px solid #f1f5f9;
margin-bottom: 8px;
}
.toolbar-bottom[b-k1dvl16plp] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
}
.toolbar-left[b-k1dvl16plp] {
display: flex;
align-items: center;
gap: 6px;
}
.toolbar-right[b-k1dvl16plp] {
display: flex;
align-items: center;
gap: 6px;
}
.toolbar-spacer[b-k1dvl16plp] {
flex: 1;
}
/* === INDICADORES === */
.indicador[b-k1dvl16plp] {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 20px;
background: #f8f9fa;
font-size: 11px;
font-weight: 500;
color: var(--text-dark);
transition: all 0.2s;
cursor: default;
}
.indicador:hover[b-k1dvl16plp] {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.indicador-icono[b-k1dvl16plp] {
font-size: 14px;
}
.indicador-valor[b-k1dvl16plp] {
font-weight: 700;
font-size: 13px;
color: #1a3a6b;
min-width: 18px;
text-align: center;
}
.indicador-etiqueta[b-k1dvl16plp] {
font-size: 10px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.indicador-pendiente[b-k1dvl16plp] {
background: #fef3c7;
border-left: 3px solid #f59e0b;
}
.indicador-pendiente .indicador-valor[b-k1dvl16plp] {
color: #b45309;
}
.indicador-en-camino[b-k1dvl16plp] {
background: #dbeafe;
border-left: 3px solid #3b82f6;
}
.indicador-en-camino .indicador-valor[b-k1dvl16plp] {
color: #1d4ed8;
}
.indicador-entregado[b-k1dvl16plp] {
background: #d1fae5;
border-left: 3px solid #22c55e;
}
.indicador-entregado .indicador-valor[b-k1dvl16plp] {
color: #15803d;
}
.indicador-anulado[b-k1dvl16plp] {
background: #fee2e2;
border-left: 3px solid #ef4444;
}
.indicador-anulado .indicador-valor[b-k1dvl16plp] {
color: #b91c1c;
}
.indicador-destacado[b-k1dvl16plp] {
background: #1a3a6b;
color: white;
border-left: 3px solid #3498db;
}
.indicador-destacado .indicador-valor[b-k1dvl16plp] {
color: #ffffff;
}
.indicador-destacado .indicador-etiqueta[b-k1dvl16plp] {
color: rgba(255, 255, 255, 0.7);
}
.indicador-casmu[b-k1dvl16plp] {
background: #e0f2fe;
border-left: 3px solid #0ea5e9;
}
.indicador-casmu .indicador-valor[b-k1dvl16plp] {
color: #0369a1;
}
.indicador-evangelico[b-k1dvl16plp] {
background: #f3e8ff;
border-left: 3px solid #a855f7;
}
.indicador-evangelico .indicador-valor[b-k1dvl16plp] {
color: #7c3aed;
}
.indicador-grenles[b-k1dvl16plp] {
background: #fce7f3;
border-left: 3px solid #ec4899;
}
.indicador-grenles .indicador-valor[b-k1dvl16plp] {
color: #be185d;
}
.indicador-no-geo[b-k1dvl16plp] {
background: #fff3cd !important;
border: 2px solid #ffc107 !important;
animation: pulse-warning-geo-b-k1dvl16plp 2s ease-in-out infinite;
cursor: pointer;
}
.indicador-no-geo:hover[b-k1dvl16plp] {
background: #fff8e1 !important;
border-color: #ff9800 !important;
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}
@keyframes pulse-warning-geo-b-k1dvl16plp {
0%, 100% {
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
}
50% {
box-shadow: 0 0 0 8px rgba(255, 193, 7, 0);
}
}
/* === BOTONES DE LA BARRA === */
.btn-toolbar[b-k1dvl16plp] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
white-space: nowrap;
background: #f8f9fa;
color: var(--text-dark);
}
.btn-toolbar:hover[b-k1dvl16plp] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-toolbar:active[b-k1dvl16plp] {
transform: scale(0.95);
}
.btn-centrar-base[b-k1dvl16plp] {
background: #3498db;
color: white;
}
.btn-centrar-base:hover[b-k1dvl16plp] {
background: #2980b9;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.btn-actualizar[b-k1dvl16plp] {
background: #3498db;
color: white;
}
.btn-actualizar:hover[b-k1dvl16plp] {
background: #2980b9;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.btn-actualizar:disabled[b-k1dvl16plp] {
opacity: 0.7;
cursor: not-allowed;
}
.btn-auto-refresh[b-k1dvl16plp] {
background: #f39c12;
color: white;
}
.btn-auto-refresh:hover[b-k1dvl16plp] {
background: #e67e22;
box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
}
.btn-auto-refresh.active[b-k1dvl16plp] {
background: #e67e22;
box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.3);
}
.btn-toolbar.btn-geolocalizar[b-k1dvl16plp] {
background: #8b5cf6;
color: white;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.btn-toolbar.btn-geolocalizar:hover:not(:disabled)[b-k1dvl16plp] {
background: #7c3aed;
}
.btn-toolbar.btn-geolocalizar:disabled[b-k1dvl16plp] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-toolbar.btn-forzar-regeo[b-k1dvl16plp] {
background: #ef4444;
color: white;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.btn-toolbar.btn-forzar-regeo:hover:not(:disabled)[b-k1dvl16plp] {
background: #dc2626;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
.btn-toolbar.btn-forzar-regeo:disabled[b-k1dvl16plp] {
opacity: 0.6;
cursor: not-allowed;
}
/* === SELECTORES === */
.fecha-selector[b-k1dvl16plp] {
display: flex;
align-items: center;
}
.fecha-input[b-k1dvl16plp] {
padding: 5px 10px;
border: 1px solid #dce1e6;
border-radius: 6px;
font-size: 12px;
font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: white;
color: var(--text-dark);
outline: none;
transition: all 0.3s;
height: 32px;
cursor: pointer;
}
.fecha-input:focus[b-k1dvl16plp] {
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
.fecha-input:hover[b-k1dvl16plp] {
border-color: #9ca3af;
}
.toolbar-info[b-k1dvl16plp] {
font-size: 11px;
color: #6b7280;
white-space: nowrap;
font-weight: 400;
margin-left: 8px;
}
.colaborador-selector[b-k1dvl16plp] {
display: flex;
align-items: center;
margin-left: 8px;
}
.colaborador-select[b-k1dvl16plp] {
padding: 5px 12px;
border: 1px solid #dce1e6;
border-radius: 6px;
font-size: 12px;
font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: white;
color: var(--text-dark);
outline: none;
transition: all 0.3s;
height: 32px;
min-width: 180px;
cursor: pointer;
}
.colaborador-select:focus[b-k1dvl16plp] {
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
.auto-refresh-group[b-k1dvl16plp] {
display: flex;
align-items: center;
gap: 6px;
background: #f8f9fa;
padding: 2px 8px 2px 2px;
border-radius: 8px;
}
.auto-refresh-countdown[b-k1dvl16plp] {
font-size: 11px;
color: #f39c12;
white-space: nowrap;
min-width: 45px;
font-weight: 600;
}
/* === ΓREA DEL MAPA === */
.mapa-area[b-k1dvl16plp] {
position: relative;
width: 100%;
height: calc(100vh - 200px);
min-height: 400px;
overflow: hidden;
border-radius: 0 0 12px 12px;
background: #f1f5f9;
}
#map[b-k1dvl16plp] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100% !important;
width: 100% !important;
}
/* === OVERLAY DE CARGA === */
.mapa-loading-overlay[b-k1dvl16plp] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.85);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 20;
backdrop-filter: blur(4px);
}
.loading-spinner[b-k1dvl16plp] {
width: 40px;
height: 40px;
border: 4px solid #f1f5f9;
border-top: 4px solid #1a3a6b;
border-radius: 50%;
animation: spin-b-k1dvl16plp 0.8s linear infinite;
}
.mapa-loading-overlay p[b-k1dvl16plp] {
margin-top: 12px;
font-size: 13px;
color: var(--text-dark);
font-weight: 500;
}
@keyframes spin-b-k1dvl16plp {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* === OVERLAY DE INFORMACIΓN === */
.mapa-info-overlay[b-k1dvl16plp] {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 11px;
display: flex;
align-items: center;
gap: 8px;
z-index: 5;
pointer-events: none;
white-space: nowrap;
}
/* === LEYENDAS === */
.mapa-leyenda[b-k1dvl16plp],
.mapa-estados-leyenda[b-k1dvl16plp] {
position: absolute;
z-index: 5;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
border-radius: 10px;
padding: 10px 14px;
box-shadow: var(--card-shadow);
border: 1px solid rgba(255, 255, 255, 0.3);
left: 12px;
right: auto;
cursor: pointer;
}
.mapa-leyenda[b-k1dvl16plp] {
top: 12px;
min-width: 150px;
max-height: 280px;
overflow-y: auto;
}
.mapa-estados-leyenda[b-k1dvl16plp] {
bottom: 12px;
min-width: 130px;
}
.mapa-leyenda-item[b-k1dvl16plp],
.mapa-estados-leyenda-item[b-k1dvl16plp] {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
font-size: 10px;
color: var(--text-dark);
cursor: pointer;
border-radius: 6px;
transition: all 0.2s;
}
.mapa-leyenda-item:hover[b-k1dvl16plp],
.mapa-estados-leyenda-item:hover[b-k1dvl16plp] {
background: rgba(0, 0, 0, 0.05);
}
.mapa-leyenda-item.active[b-k1dvl16plp],
.mapa-estados-leyenda-item.active[b-k1dvl16plp] {
background: rgba(52, 152, 219, 0.15);
border: 1px solid rgba(52, 152, 219, 0.3);
font-weight: bold;
}
.mapa-leyenda-titulo[b-k1dvl16plp],
.mapa-estados-leyenda-titulo[b-k1dvl16plp] {
font-weight: 600;
font-size: 11px;
color: var(--text-dark);
margin-bottom: 6px;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 4px;
}
.mapa-leyenda-color[b-k1dvl16plp] {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.mapa-leyenda-cantidad[b-k1dvl16plp] {
margin-left: auto;
font-weight: 600;
font-size: 10px;
color: #6b7280;
background: #f1f5f9;
padding: 0 6px;
border-radius: 10px;
}
.mapa-leyenda-check[b-k1dvl16plp] {
color: #3498db;
font-weight: bold;
font-size: 12px;
}
.mapa-estados-leyenda-color[b-k1dvl16plp] {
width: 14px;
height: 14px;
border-radius: 4px;
flex-shrink: 0;
border: 1px solid rgba(0, 0, 0, 0.08);
}
/* ========================================
SCROLLBAR PERSONALIZADA
======================================== */
.mapa-area[b-k1dvl16plp]::-webkit-scrollbar {
display: none;
}
.mapa-area[b-k1dvl16plp] {
-ms-overflow-style: none;
scrollbar-width: none;
}
.mapa-leyenda[b-k1dvl16plp]::-webkit-scrollbar {
width: 5px;
}
.mapa-leyenda[b-k1dvl16plp]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.mapa-leyenda[b-k1dvl16plp]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.mapa-leyenda[b-k1dvl16plp]::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.mapa-leyenda[b-k1dvl16plp] {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
.modal-body[b-k1dvl16plp]::-webkit-scrollbar {
width: 6px;
}
.modal-body[b-k1dvl16plp]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.modal-body[b-k1dvl16plp]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.modal-body[b-k1dvl16plp]::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.modal-body[b-k1dvl16plp] {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
[b-k1dvl16plp]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
[b-k1dvl16plp]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
[b-k1dvl16plp]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
[b-k1dvl16plp]::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* ========================================
MODALES
======================================== */
.modal-overlay[b-k1dvl16plp] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
animation: fadeInModal-b-k1dvl16plp 0.3s ease;
padding: 20px;
}
.modal-content[b-k1dvl16plp] {
background: #ffffff;
border-radius: 20px;
width: 100%;
max-width: 500px;
max-height: 85vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
animation: slideUpModal-b-k1dvl16plp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes fadeInModal-b-k1dvl16plp {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(12px);
}
}
@keyframes slideUpModal-b-k1dvl16plp {
from {
transform: translateY(60px) scale(0.95);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.modal-header[b-k1dvl16plp] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 2px solid #f1f5f9;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}
.modal-header h4[b-k1dvl16plp] {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #1f2937;
display: flex;
align-items: center;
gap: 12px;
font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.modal-header h4 i[b-k1dvl16plp] {
color: #2563eb;
background: rgba(37, 99, 235, 0.1);
padding: 8px;
border-radius: 10px;
font-size: 1.1rem;
}
.btn-close-modal[b-k1dvl16plp] {
background: #f1f5f9;
border: none;
font-size: 1.1rem;
color: #6b7280;
cursor: pointer;
padding: 8px 12px;
border-radius: 10px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.btn-close-modal:hover[b-k1dvl16plp] {
background: #fee2e2;
color: #ef4444;
transform: rotate(90deg);
}
.modal-body[b-k1dvl16plp] {
padding: 20px 24px;
overflow-y: auto;
flex: 1;
}
.modal-actions[b-k1dvl16plp] {
display: flex;
gap: 12px;
justify-content: flex-end;
padding: 16px 24px 20px 24px;
border-top: 2px solid #f1f5f9;
background: #f8fafc;
}
/* === FORMULARIOS DEL MODAL === */
.modal-form[b-k1dvl16plp] {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-group[b-k1dvl16plp] {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label[b-k1dvl16plp] {
font-size: 0.8rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 6px;
font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.form-group label i[b-k1dvl16plp] {
color: #2563eb;
font-size: 14px;
}
.form-control[b-k1dvl16plp] {
padding: 10px 14px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 14px;
font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #1e293b;
background: #f8fafc;
transition: all 0.3s;
outline: none;
width: 100%;
box-sizing: border-box;
}
.form-control:focus[b-k1dvl16plp] {
border-color: #2563eb;
background: white;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
.form-control[b-k1dvl16plp]::placeholder {
color: #94a3b8;
}
/* === BOTONES DEL MODAL === */
.btn-modal[b-k1dvl16plp] {
padding: 10px 24px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.btn-modal:active[b-k1dvl16plp] {
transform: scale(0.95);
}
.btn-modal-secondary[b-k1dvl16plp] {
background: #f1f5f9;
color: #475569;
border: 2px solid #e2e8f0;
}
.btn-modal-secondary:hover[b-k1dvl16plp] {
background: #e2e8f0;
color: #1e293b;
}
.btn-modal-primary[b-k1dvl16plp] {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.btn-modal-primary:hover:not(:disabled)[b-k1dvl16plp] {
background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
.btn-modal-primary:disabled[b-k1dvl16plp] {
opacity: 0.6;
cursor: not-allowed;
}
/* === ALERTAS === */
.alert[b-k1dvl16plp] {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
}
.alert-warning[b-k1dvl16plp] {
background: #fef3c7;
color: #92400e;
border: 1px solid #fbbf24;
}
.alert-warning i[b-k1dvl16plp] {
color: #f59e0b;
font-size: 16px;
}
/* === LISTA DE PAQUETES SIN GEOLOCALIZAR === */
.paquete-sin-geo-item[b-k1dvl16plp] {
cursor: pointer;
padding: 12px;
border: 1px solid #e5e7eb;
border-radius: 10px;
transition: all 0.3s;
background: #fefce8;
}
.paquete-sin-geo-item:hover[b-k1dvl16plp] {
background: #fef9c3;
border-color: #fbbf24;
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}
.paquete-sin-geo-item:active[b-k1dvl16plp] {
transform: scale(0.98);
}
.badge[b-k1dvl16plp] {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
}
/* === DETALLE PAQUETE === */
.detalle-info-grid[b-k1dvl16plp] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
font-size: 13px;
}
.detalle-anulado-box[b-k1dvl16plp] {
margin-top: 10px;
padding: 10px;
background: #fee2e2;
border-radius: 8px;
border-left: 4px solid #ef4444;
}
/* === TIMELINE === */
.timeline-section[b-k1dvl16plp] {
margin-top: 16px;
}
.timeline-section h5[b-k1dvl16plp] {
font-size: 0.9rem;
margin: 0 0 16px 0;
font-weight: 700;
color: #1f2937;
font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.timeline-section h5 i[b-k1dvl16plp] {
color: #2563eb;
margin-right: 8px;
}
.timeline[b-k1dvl16plp] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
position: relative;
}
.timeline[b-k1dvl16plp]::before {
content: '';
position: absolute;
top: 30px;
left: 60px;
right: 60px;
height: 3px;
background: #e2e8f0;
z-index: 0;
border-radius: 2px;
}
.timeline-item[b-k1dvl16plp] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
}
.timeline-item .timeline-icon[b-k1dvl16plp] {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
margin-bottom: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.timeline-item.active .timeline-icon[b-k1dvl16plp] {
color: white;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.timeline-item.inactive .timeline-icon[b-k1dvl16plp] {
background: #f1f5f9;
color: #94a3b8;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.timeline-item .timeline-title[b-k1dvl16plp] {
font-size: 0.75rem;
font-weight: 700;
color: #1f2937;
font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.timeline-item.inactive .timeline-title[b-k1dvl16plp] {
color: #94a3b8;
}
.timeline-item .timeline-date[b-k1dvl16plp] {
font-size: 0.65rem;
color: #6b7280;
font-weight: 500;
font-family: 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.timeline-item.inactive .timeline-date[b-k1dvl16plp] {
color: #cbd5e1;
}
.timeline-item.ultimo .timeline-icon[b-k1dvl16plp] {
animation: pulse-timeline-b-k1dvl16plp 2s ease-in-out infinite;
}
@keyframes pulse-timeline-b-k1dvl16plp {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
/* ============================================ */
/* π― ANIMACIONES DE ESTADO PARA PAQUETES */
/* ============================================ */
/* 1. SIN ASIGNAR: AgitaciΓ³n fuerte + Escalado */
@keyframes estado-sin-asignar-anim-b-k1dvl16plp {
0% {
transform: scale(1) translateY(0) rotate(0deg);
}
10% {
transform: scale(1.08) translateY(-6px) rotate(-3deg);
}
20% {
transform: scale(0.95) translateY(0px) rotate(2deg);
}
30% {
transform: scale(1.05) translateY(-4px) rotate(-2deg);
}
40% {
transform: scale(0.98) translateY(2px) rotate(1deg);
}
50% {
transform: scale(1.1) translateY(-8px) rotate(-4deg);
}
60% {
transform: scale(0.95) translateY(0px) rotate(2deg);
}
70% {
transform: scale(1.04) translateY(-3px) rotate(-1deg);
}
80% {
transform: scale(0.97) translateY(2px) rotate(1deg);
}
90% {
transform: scale(1.02) translateY(-2px) rotate(0deg);
}
100% {
transform: scale(1) translateY(0) rotate(0deg);
}
}
/* 2. EN CAMINO: Movimiento horizontal (como si avanzara) */
@keyframes estado-en-camino-anim-b-k1dvl16plp {
0% {
transform: translateX(0) scale(1);
}
10% {
transform: translateX(4px) scale(1.02);
}
20% {
transform: translateX(-2px) scale(0.98);
}
30% {
transform: translateX(6px) scale(1.03);
}
40% {
transform: translateX(-4px) scale(0.97);
}
50% {
transform: translateX(8px) scale(1.04);
}
60% {
transform: translateX(-3px) scale(0.98);
}
70% {
transform: translateX(5px) scale(1.02);
}
80% {
transform: translateX(-2px) scale(0.99);
}
90% {
transform: translateX(3px) scale(1.01);
}
100% {
transform: translateX(0) scale(1);
}
}
/* 3. ANULADO: CompresiΓ³n vertical (como aplastarse) */
@keyframes estado-anulado-anim-b-k1dvl16plp {
0% {
transform: scaleY(1) scaleX(1);
}
15% {
transform: scaleY(0.7) scaleX(1.1);
}
30% {
transform: scaleY(1) scaleX(1);
}
45% {
transform: scaleY(0.7) scaleX(1.1);
}
60% {
transform: scaleY(1) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
/* ============================================ */
/* π― APLICACIΓN DE ANIMACIONES */
/* ============================================ */
.estado-sin-asignar[b-k1dvl16plp] {
animation: estado-sin-asignar-anim-b-k1dvl16plp 1.2s ease-in-out infinite !important;
transform-origin: center bottom !important;
}
.estado-en-camino[b-k1dvl16plp] {
animation: estado-en-camino-anim-b-k1dvl16plp 1.0s ease-in-out infinite !important;
transform-origin: center center !important;
}
.estado-en-camino .marcador-paquete[b-k1dvl16plp] {
filter: drop-shadow(0 0 8px rgba(33, 150, 243, 0.6));
animation: estado-en-camino-anim-b-k1dvl16plp 1s ease-in-out infinite, pulso-encamino-b-k1dvl16plp 1.5s ease-in-out infinite !important;
}
@keyframes pulso-encamino-b-k1dvl16plp {
0% {
filter: drop-shadow(0 0 5px rgba(33, 150, 243, 0.3));
}
50% {
filter: drop-shadow(0 0 20px rgba(33, 150, 243, 0.9));
}
100% {
filter: drop-shadow(0 0 5px rgba(33, 150, 243, 0.3));
}
}
.estado-anulado[b-k1dvl16plp] {
animation: estado-anulado-anim-b-k1dvl16plp 0.9s ease-in-out 2 !important;
transform-origin: center bottom !important;
opacity: 0.85 !important;
}
.estado-asignado[b-k1dvl16plp],
.estado-entregado[b-k1dvl16plp] {
animation: none !important;
transform: scale(1) !important;
}
/* ============================================ */
/* π― LEYENDA CON ANIMACIONES */
/* ============================================ */
.mapa-estados-leyenda-item .estado-preview[b-k1dvl16plp] {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
.mapa-estados-leyenda-item .estado-preview.sin-asignar[b-k1dvl16plp] {
background: #FFC107;
animation: estado-sin-asignar-anim-b-k1dvl16plp 1.2s ease-in-out infinite;
transform-origin: center bottom;
}
.mapa-estados-leyenda-item .estado-preview.en-camino[b-k1dvl16plp] {
background: #2196F3;
animation: estado-en-camino-anim-b-k1dvl16plp 1.0s ease-in-out infinite;
}
.mapa-estados-leyenda-item .estado-preview.anulado[b-k1dvl16plp] {
background: #DC3545;
animation: estado-anulado-anim-b-k1dvl16plp 0.9s ease-in-out 2;
}
.mapa-estados-leyenda-item .estado-preview.asignado[b-k1dvl16plp],
.mapa-estados-leyenda-item .estado-preview.entregado[b-k1dvl16plp] {
animation: none !important;
transform: scale(1) !important;
}
/* ============================================ */
/* π― PANEL DE INFORMACIΓN DEL COLABORADOR */
/* ============================================ */
/* Estilos para el InfoWindow de Google Maps que muestra el panel */
.gm-style .gm-style-iw-c[b-k1dvl16plp] {
padding: 0 !important;
border-radius: 12px !important;
max-width: 420px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
overflow: hidden !important;
}
.gm-style .gm-style-iw-d[b-k1dvl16plp] {
padding: 0 !important;
overflow: hidden !important;
max-height: none !important;
}
/* Botones dentro del panel */
.panel-btn-ruta[b-k1dvl16plp] {
flex: 1;
padding: 8px;
background: var(--primary-blue);
color: white;
border: none;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.panel-btn-ruta:hover[b-k1dvl16plp] {
background: #2563eb;
transform: scale(1.02);
}
.panel-btn-centrar[b-k1dvl16plp] {
flex: 1;
padding: 8px;
background: #6b7280;
color: white;
border: none;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.panel-btn-centrar:hover[b-k1dvl16plp] {
background: #4b5563;
transform: scale(1.02);
}
/* MΓ©tricas del panel */
.panel-metric[b-k1dvl16plp] {
background: white;
padding: 10px;
border-radius: 8px;
text-align: center;
border: 1px solid #e2e8f0;
transition: all 0.2s;
}
.panel-metric:hover[b-k1dvl16plp] {
border-color: var(--primary-blue);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}
.panel-metric-value[b-k1dvl16plp] {
font-size: 20px;
font-weight: 700;
}
.panel-metric-value.blue[b-k1dvl16plp] {
color: var(--primary-blue);
}
.panel-metric-value.green[b-k1dvl16plp] {
color: #22c55e;
}
.panel-metric-value.yellow[b-k1dvl16plp] {
color: #f59e0b;
}
.panel-metric-value.red[b-k1dvl16plp] {
color: #ef4444;
}
.panel-metric-value.purple[b-k1dvl16plp] {
color: #8b5cf6;
}
.panel-metric-value.cyan[b-k1dvl16plp] {
color: #06b6d4;
}
.panel-metric-label[b-k1dvl16plp] {
font-size: 10px;
color: #6b7280;
}
/* Encabezado del panel */
.panel-header[b-k1dvl16plp] {
padding: 16px 20px;
border-radius: 12px 12px 0 0;
color: white;
display: flex;
align-items: center;
gap: 16px;
}
.panel-avatar[b-k1dvl16plp] {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
border: 2px solid rgba(255, 255, 255, 0.3);
flex-shrink: 0;
}
.panel-name[b-k1dvl16plp] {
font-size: 18px;
font-weight: 700;
}
.panel-status[b-k1dvl16plp] {
font-size: 12px;
opacity: 0.9;
}
/* Cuerpo del panel */
.panel-body[b-k1dvl16plp] {
padding: 16px 20px;
background: #f8fafc;
border-radius: 0 0 12px 12px;
}
/* Grid de mΓ©tricas en el panel */
.panel-metrics-grid[b-k1dvl16plp] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
/* Detalles del panel */
.panel-details[b-k1dvl16plp] {
background: white;
padding: 12px;
border-radius: 8px;
border: 1px solid #e2e8f0;
margin-bottom: 12px;
}
.panel-details-grid[b-k1dvl16plp] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 16px;
font-size: 12px;
}
.panel-details-grid .label[b-k1dvl16plp] {
color: #6b7280;
}
.panel-details-grid .value[b-k1dvl16plp] {
font-weight: 600;
}
/* Paquetes en el panel */
.panel-paquetes[b-k1dvl16plp] {
background: white;
padding: 12px;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.panel-paquetes-grid[b-k1dvl16plp] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
text-align: center;
}
.panel-paquetes-number[b-k1dvl16plp] {
font-size: 24px;
font-weight: 700;
}
.panel-paquetes-number.purple[b-k1dvl16plp] {
color: #8b5cf6;
}
.panel-paquetes-number.cyan[b-k1dvl16plp] {
color: #06b6d4;
}
.panel-paquetes-label[b-k1dvl16plp] {
font-size: 10px;
color: #6b7280;
}
/* Acciones del panel */
.panel-actions[b-k1dvl16plp] {
display: flex;
gap: 8px;
margin-top: 12px;
}
/* ============================================ */
/* RESPONSIVE */
/* ============================================ */
@media (max-width: 768px) {
.mapa-container[b-k1dvl16plp] {
height: 100vh;
max-height: 100vh;
min-height: 0;
}
.toolbar[b-k1dvl16plp] {
padding: 6px 10px;
border-radius: 0;
}
.toolbar-top[b-k1dvl16plp] {
padding-bottom: 4px;
margin-bottom: 4px;
}
.toolbar-bottom[b-k1dvl16plp] {
gap: 4px;
}
.btn-toolbar[b-k1dvl16plp] {
padding: 4px 10px;
font-size: 10px;
}
.fecha-input[b-k1dvl16plp] {
width: 120px;
height: 26px;
font-size: 10px;
padding: 2px 6px;
}
.toolbar-info[b-k1dvl16plp] {
font-size: 9px;
}
.mapa-area[b-k1dvl16plp] {
border-radius: 0;
min-height: 0;
}
.mapa-leyenda[b-k1dvl16plp] {
top: 8px;
left: 8px;
min-width: 120px;
max-height: 200px;
padding: 8px 10px;
}
.mapa-estados-leyenda[b-k1dvl16plp] {
bottom: 8px;
left: 8px;
padding: 8px 10px;
min-width: 100px;
}
.modal-content[b-k1dvl16plp] {
margin: 20px;
max-height: 80vh;
border-radius: 12px;
}
.modal-header[b-k1dvl16plp] {
padding: 16px 20px;
}
.modal-body[b-k1dvl16plp] {
padding: 16px 20px;
}
.modal-actions[b-k1dvl16plp] {
padding: 12px 20px 16px 20px;
}
.timeline[b-k1dvl16plp] {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.timeline[b-k1dvl16plp]::before {
display: none;
}
.colaborador-select[b-k1dvl16plp] {
min-width: 120px;
font-size: 10px;
padding: 3px 8px;
height: 28px;
}
/* Panel responsivo */
.panel-metrics-grid[b-k1dvl16plp] {
grid-template-columns: 1fr 1fr;
}
.panel-details-grid[b-k1dvl16plp] {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.mapa-container[b-k1dvl16plp] {
height: 100dvh;
max-height: 100dvh;
min-height: 0;
}
.toolbar-top[b-k1dvl16plp] {
flex-wrap: wrap;
gap: 2px 4px;
}
.indicador[b-k1dvl16plp] {
padding: 2px 4px;
border-radius: 12px;
}
.indicador-icono[b-k1dvl16plp] {
font-size: 10px;
}
.indicador-valor[b-k1dvl16plp] {
font-size: 10px;
min-width: 12px;
}
.indicador-etiqueta[b-k1dvl16plp] {
display: none;
}
.toolbar-bottom[b-k1dvl16plp] {
flex-wrap: wrap;
}
.toolbar-left[b-k1dvl16plp] {
flex-wrap: wrap;
}
.toolbar-right[b-k1dvl16plp] {
flex-wrap: wrap;
width: 100%;
justify-content: flex-end;
}
.btn-toolbar[b-k1dvl16plp] {
padding: 3px 8px;
font-size: 9px;
border-radius: 4px;
}
.fecha-selector[b-k1dvl16plp] {
width: 100%;
}
.fecha-input[b-k1dvl16plp] {
flex: 1;
width: auto;
min-width: 100px;
height: 24px;
}
.mapa-area[b-k1dvl16plp] {
min-height: 0;
border-radius: 0;
}
.mapa-leyenda[b-k1dvl16plp] {
top: 4px;
left: 4px;
min-width: 100px;
max-height: 150px;
padding: 6px 8px;
font-size: 9px;
}
.mapa-estados-leyenda[b-k1dvl16plp] {
bottom: 4px;
left: 4px;
padding: 6px 8px;
min-width: 80px;
font-size: 9px;
}
.modal-content[b-k1dvl16plp] {
margin: 10px;
max-height: 90vh;
border-radius: 8px;
}
.modal-header h4[b-k1dvl16plp] {
font-size: 14px;
}
.btn-modal[b-k1dvl16plp] {
padding: 8px 16px;
font-size: 12px;
}
.form-control[b-k1dvl16plp] {
padding: 8px 12px;
font-size: 13px;
}
.timeline[b-k1dvl16plp] {
grid-template-columns: 1fr;
}
.detalle-info-grid[b-k1dvl16plp] {
grid-template-columns: 1fr;
}
.colaborador-selector[b-k1dvl16plp] {
width: 100%;
margin-left: 0;
}
.colaborador-select[b-k1dvl16plp] {
width: 100%;
min-width: unset;
}
/* Panel responsivo mΓ³vil */
.panel-metrics-grid[b-k1dvl16plp] {
grid-template-columns: 1fr 1fr;
}
.panel-actions[b-k1dvl16plp] {
flex-direction: column;
}
}
/* β BOTΓN VER RUTA / OCULTAR RUTA */
.btn-ver-ruta[b-k1dvl16plp] {
background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
color: white !important;
border: none !important;
padding: 8px 16px !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}
.btn-ver-ruta:hover[b-k1dvl16plp] {
transform: translateY(-2px) !important;
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5) !important;
}
.btn-ver-ruta:active[b-k1dvl16plp] {
transform: scale(0.96) !important;
}
.btn-ver-ruta i[b-k1dvl16plp] {
font-size: 1rem !important;
}
/* β BOTΓN ACTIVO (RUTA VISIBLE) - COLOR ROJO/NARANJA */
.btn-ver-ruta.active[b-k1dvl16plp] {
background: linear-gradient(135deg, #EF4444, #DC2626) !important;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}
.btn-ver-ruta.active:hover[b-k1dvl16plp] {
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.5) !important;
}
/* /Pages/Logistica/Paqueteria_Notificaciones.razor.rz.scp.css */
/* ========================================
NOTIFICACIONES - ESTILOS COMPLETOS
======================================== */
.notificaciones-container[b-8vpqhriolt] {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 0;
animation: fadeInPage-b-8vpqhriolt 0.4s ease;
}
@keyframes fadeInPage-b-8vpqhriolt {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
TOOLBAR
======================================== */
.toolbar-container[b-8vpqhriolt] {
background: #ffffff;
border-radius: 16px;
padding: 20px 24px;
box-shadow: 0 4px 20px rgba(26, 58, 107, 0.08);
margin-bottom: 24px;
border: 1px solid rgba(37, 99, 235, 0.06);
transition: all 0.3s ease;
}
.toolbar-container:hover[b-8vpqhriolt] {
box-shadow: 0 6px 30px rgba(26, 58, 107, 0.12);
}
.toolbar-row[b-8vpqhriolt] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
.toolbar-left[b-8vpqhriolt] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.toolbar-title[b-8vpqhriolt] {
display: flex;
align-items: center;
gap: 14px;
}
.toolbar-title i[b-8vpqhriolt] {
font-size: 2rem;
color: #2563eb;
background: rgba(37, 99, 235, 0.1);
padding: 10px;
border-radius: 12px;
transition: all 0.3s ease;
}
.toolbar-title:hover i[b-8vpqhriolt] {
background: rgba(37, 99, 235, 0.18);
transform: scale(1.05) rotate(-5deg);
}
.toolbar-title h3[b-8vpqhriolt] {
margin: 0;
font-weight: 700;
color: #1f2937;
font-size: 1.4rem;
letter-spacing: -0.5px;
}
.toolbar-title h3 small[b-8vpqhriolt] {
font-weight: 400;
font-size: 0.85rem;
color: #6b7280;
margin-left: 8px;
}
/* ========================================
ESTADΓSTICAS
======================================== */
.stats-container[b-8vpqhriolt] {
display: flex;
gap: 8px;
margin-left: 16px;
padding-left: 16px;
border-left: 2px solid rgba(37, 99, 235, 0.15);
flex-wrap: wrap;
}
.stat-item[b-8vpqhriolt] {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: #6b7280;
padding: 4px 14px;
border-radius: 20px;
background: #f1f5f9;
white-space: nowrap;
transition: all 0.3s ease;
font-weight: 500;
}
.stat-item:hover[b-8vpqhriolt] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.stat-item strong[b-8vpqhriolt] {
color: #1f2937;
font-size: 0.95rem;
}
.stat-total[b-8vpqhriolt] {
background: rgba(37, 99, 235, 0.08);
}
.stat-total i[b-8vpqhriolt] {
color: #2563eb;
}
.stat-sin-leer[b-8vpqhriolt] {
background: rgba(37, 99, 235, 0.08);
}
.stat-sin-leer i[b-8vpqhriolt] {
color: #2563eb;
}
.stat-leidas[b-8vpqhriolt] {
background: rgba(34, 197, 94, 0.08);
}
.stat-leidas i[b-8vpqhriolt] {
color: #22c55e;
}
.stat-anulacion[b-8vpqhriolt] {
background: rgba(239, 68, 68, 0.08);
}
.stat-anulacion i[b-8vpqhriolt] {
color: #ef4444;
}
.stat-tarea[b-8vpqhriolt] {
background: rgba(139, 92, 246, 0.08);
}
.stat-tarea i[b-8vpqhriolt] {
color: #8b5cf6;
}
/* ========================================
BOTONES TOOLBAR
======================================== */
.btn-toolbar[b-8vpqhriolt] {
padding: 8px 18px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #ffffff;
}
.btn-toolbar i[b-8vpqhriolt] {
font-size: 1rem;
}
.toolbar-actions[b-8vpqhriolt] {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
/* Altura uniforme para todos los botones */
.toolbar-actions .btn-toolbar[b-8vpqhriolt] {
height: 38px;
min-height: 38px;
max-height: 38px;
padding: 0 16px;
}
.btn-refresh[b-8vpqhriolt] {
background: #f1f5f9;
color: #1f2937;
border: 1px solid #e2e8f0;
}
.btn-refresh:hover:not(:disabled)[b-8vpqhriolt] {
background: #e2e8f0;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.btn-refresh:disabled[b-8vpqhriolt] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-marcar-todas[b-8vpqhriolt] {
background: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.btn-marcar-todas:hover:not(:disabled)[b-8vpqhriolt] {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}
.btn-marcar-todas:disabled[b-8vpqhriolt] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-crear[b-8vpqhriolt] {
background: #22c55e;
color: white;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.btn-crear:hover:not(:disabled)[b-8vpqhriolt] {
background: #16a34a;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}
.btn-crear:disabled[b-8vpqhriolt] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-auto-refresh[b-8vpqhriolt] {
background: #f1f5f9;
color: #1f2937;
border: 1px solid #e2e8f0;
}
.btn-auto-refresh:hover[b-8vpqhriolt] {
background: #e2e8f0;
transform: translateY(-2px);
}
.btn-auto-refresh.active[b-8vpqhriolt] {
background: #f59e0b;
color: white;
border-color: transparent;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-auto-refresh.active:hover[b-8vpqhriolt] {
background: #d97706;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.auto-refresh-group[b-8vpqhriolt] {
display: flex;
align-items: center;
gap: 6px;
background: #f1f5f9;
padding: 3px 10px 3px 3px;
border-radius: 10px;
border: 1px solid #e2e8f0;
height: 38px;
min-height: 38px;
max-height: 38px;
}
.auto-refresh-group .btn-toolbar[b-8vpqhriolt] {
height: 32px;
min-height: 32px;
max-height: 32px;
}
.auto-refresh-countdown[b-8vpqhriolt] {
font-size: 0.8rem;
color: #2563eb;
white-space: nowrap;
min-width: 50px;
font-weight: 600;
}
.auto-refresh-countdown i[b-8vpqhriolt] {
margin-right: 3px;
}
/* ========================================
FILTROS
======================================== */
.filters-grid[b-8vpqhriolt] {
display: grid;
grid-template-columns: 160px 120px 100px 130px 100px 110px 110px auto;
gap: 8px;
padding-top: 12px;
border-top: 1px solid rgba(37, 99, 235, 0.08);
align-items: end;
}
.filter-item[b-8vpqhriolt] {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.filter-item label[b-8vpqhriolt] {
font-size: 0.6rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
margin-bottom: 1px;
}
.filter-item label i[b-8vpqhriolt] {
margin-right: 3px;
color: #2563eb;
font-size: 0.55rem;
}
.filter-input[b-8vpqhriolt],
.filter-select[b-8vpqhriolt] {
padding: 4px 8px;
border: 1.5px solid #e2e8f0;
border-radius: 6px;
font-size: 0.75rem;
transition: all 0.15s ease;
background: white;
width: 100%;
color: #1f2937;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
box-sizing: border-box;
}
.filter-input[type="date"][b-8vpqhriolt],
.filter-input[type="time"][b-8vpqhriolt] {
padding: 4px 6px;
font-size: 0.7rem;
min-width: 90px;
}
.filter-select[b-8vpqhriolt] {
padding-right: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
appearance: none;
}
.filter-input:focus[b-8vpqhriolt],
.filter-select:focus[b-8vpqhriolt] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.filter-input:hover[b-8vpqhriolt],
.filter-select:hover[b-8vpqhriolt] {
border-color: #2563eb;
}
.filter-input[b-8vpqhriolt]::placeholder {
color: #a0aec0;
}
.filter-actions[b-8vpqhriolt] {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.filter-actions-buttons[b-8vpqhriolt] {
display: flex;
gap: 6px;
}
.btn-filter[b-8vpqhriolt] {
padding: 4px 14px;
background: #2563eb;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 0.7rem;
transition: all 0.15s ease;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
white-space: nowrap;
box-sizing: border-box;
}
.btn-filter:hover[b-8vpqhriolt] {
background: #1d4ed8;
transform: translateY(-1px);
}
.btn-filter-clear[b-8vpqhriolt] {
padding: 4px 14px;
background: #f1f5f9;
color: #1f2937;
border: 1.5px solid #e2e8f0;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 0.7rem;
transition: all 0.15s ease;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
white-space: nowrap;
box-sizing: border-box;
}
.btn-filter-clear:hover[b-8vpqhriolt] {
background: #e2e8f0;
}
/* ========================================
TABLA DE NOTIFICACIONES
======================================== */
.table-container[b-8vpqhriolt] {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(26, 58, 107, 0.08);
overflow: hidden;
border: 1px solid rgba(37, 99, 235, 0.06);
transition: all 0.3s ease;
}
.table-container:hover[b-8vpqhriolt] {
box-shadow: 0 6px 30px rgba(26, 58, 107, 0.12);
}
.table-notificaciones[b-8vpqhriolt] {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.table-notificaciones thead[b-8vpqhriolt] {
background: #f8fafc;
}
.table-notificaciones th[b-8vpqhriolt] {
padding: 12px 16px;
text-align: left;
font-weight: 700;
color: #1f2937;
border-bottom: 2px solid #e2e8f0;
white-space: nowrap;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.table-notificaciones td[b-8vpqhriolt] {
padding: 12px 16px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
color: #1f2937;
}
.table-notificaciones tbody tr[b-8vpqhriolt] {
transition: all 0.2s ease;
cursor: pointer;
}
.table-notificaciones tbody tr:hover[b-8vpqhriolt] {
background: #f8fafc;
}
.table-notificaciones tbody tr.no-leida[b-8vpqhriolt] {
background: #eff6ff;
font-weight: 600;
}
.table-notificaciones tbody tr.no-leida:hover[b-8vpqhriolt] {
background: #dbeafe;
}
.table-notificaciones tbody tr.anulacion-row[b-8vpqhriolt] {
border-left: 3px solid #ef4444;
}
.table-notificaciones td input[type="checkbox"][b-8vpqhriolt] {
cursor: pointer;
width: 16px;
height: 16px;
accent-color: #2563eb;
}
.notificacion-titulo[b-8vpqhriolt] {
display: flex;
align-items: center;
gap: 8px;
}
.titulo-texto[b-8vpqhriolt] {
flex: 1;
}
.titulo-icono[b-8vpqhriolt] {
font-size: 1.1rem;
}
.badge-viatico[b-8vpqhriolt] {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
color: #1f2937;
background: #f1f5f9;
border: 1px solid #e2e8f0;
white-space: nowrap;
}
.fecha-hora[b-8vpqhriolt] {
font-size: 0.75rem;
color: #1f2937;
white-space: nowrap;
}
/* ========================================
BADGES
======================================== */
.badge-nuevo[b-8vpqhriolt] {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 700;
font-size: 1rem;
}
.badge-leido[b-8vpqhriolt] {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 700;
font-size: 1rem;
color: #22c55e;
}
.badge-tipo[b-8vpqhriolt] {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
color: white;
white-space: nowrap;
}
.badge-tarea[b-8vpqhriolt] {
background: #2563eb;
}
.badge-entrega[b-8vpqhriolt] {
background: #22c55e;
}
.badge-alerta[b-8vpqhriolt] {
background: #f59e0b;
}
.badge-sistema[b-8vpqhriolt] {
background: #6b7280;
}
.badge-anulacion[b-8vpqhriolt] {
background: #ef4444;
animation: pulse-badge-anulacion-b-8vpqhriolt 2s ease-in-out infinite;
}
.badge-asignacion[b-8vpqhriolt] {
background: #8b5cf6;
}
.badge-modificacion[b-8vpqhriolt] {
background: #ec4899;
}
.badge-info[b-8vpqhriolt] {
background: #3b82f6;
}
.badge-exito[b-8vpqhriolt] {
background: #22c55e;
}
.badge-error[b-8vpqhriolt] {
background: #ef4444;
}
@keyframes pulse-badge-anulacion-b-8vpqhriolt {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.filtros-activos-badge[b-8vpqhriolt] {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 12px;
padding: 2px 12px;
background: #dbeafe;
color: #2563eb;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
}
/* ========================================
LOADING Y EMPTY
======================================== */
.loading-panel[b-8vpqhriolt] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
background: #ffffff;
border-radius: 16px;
}
.loading-panel .spinner-border[b-8vpqhriolt] {
width: 3.5rem;
height: 3.5rem;
border: 4px solid #e2e8f0;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin-b-8vpqhriolt 0.8s linear infinite;
}
@keyframes spin-b-8vpqhriolt {
to {
transform: rotate(360deg);
}
}
.loading-panel p[b-8vpqhriolt] {
margin-top: 18px;
color: #6b7280;
font-weight: 500;
}
.empty-state[b-8vpqhriolt] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
background: #ffffff;
border-radius: 16px;
text-align: center;
}
.empty-state i[b-8vpqhriolt] {
font-size: 4.5rem;
color: #d1d5db;
margin-bottom: 18px;
}
.empty-state h4[b-8vpqhriolt] {
color: #1f2937;
margin-bottom: 6px;
font-weight: 700;
}
.empty-state p[b-8vpqhriolt] {
color: #6b7280;
margin-bottom: 24px;
}
.btn-crear-empty[b-8vpqhriolt] {
padding: 10px 28px;
background: #2563eb;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.btn-crear-empty:hover[b-8vpqhriolt] {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
/* ========================================
PAGINACIΓN
======================================== */
.pagination-container[b-8vpqhriolt] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
flex-wrap: wrap;
gap: 12px;
}
.pagination-info[b-8vpqhriolt] {
color: #6b7280;
font-size: 0.85rem;
font-weight: 500;
}
.pagination-controls[b-8vpqhriolt] {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.btn-page[b-8vpqhriolt] {
padding: 6px 14px;
border: 2px solid #e2e8f0;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.85rem;
font-weight: 600;
color: #1f2937;
}
.btn-page:hover:not(:disabled):not(.active)[b-8vpqhriolt] {
background: #f1f5f9;
border-color: #2563eb;
transform: translateY(-2px);
}
.btn-page.active[b-8vpqhriolt] {
background: #2563eb;
color: white;
border-color: transparent;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.btn-page:disabled[b-8vpqhriolt] {
opacity: 0.4;
cursor: not-allowed;
}
/* ========================================
MODAL DETALLE
======================================== */
.modal-overlay[b-8vpqhriolt] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: fadeInModal-b-8vpqhriolt 0.3s ease;
padding: 40px 20px;
overflow-y: auto;
}
@keyframes fadeInModal-b-8vpqhriolt {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(12px);
}
}
.modal-content-detalle[b-8vpqhriolt] {
background: #ffffff;
border-radius: 20px;
max-width: 700px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
animation: slideUpModal-b-8vpqhriolt 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 1px solid rgba(255,255,255,0.1);
}
@keyframes slideUpModal-b-8vpqhriolt {
from {
transform: translateY(60px) scale(0.95);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.modal-header[b-8vpqhriolt] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 28px;
border-bottom: 2px solid #f1f5f9;
background: #f8fafc;
border-radius: 20px 20px 0 0;
}
.modal-header h4[b-8vpqhriolt] {
margin: 0;
color: #1f2937;
font-weight: 700;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 12px;
}
.modal-header h4 i[b-8vpqhriolt] {
color: #2563eb;
background: rgba(37, 99, 235, 0.1);
padding: 8px;
border-radius: 10px;
}
.btn-close-modal[b-8vpqhriolt] {
background: #f1f5f9;
border: none;
font-size: 1.1rem;
color: #6b7280;
cursor: pointer;
padding: 8px 12px;
border-radius: 10px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.btn-close-modal:hover[b-8vpqhriolt] {
background: #fee2e2;
color: #ef4444;
transform: rotate(90deg);
}
.modal-body[b-8vpqhriolt] {
padding: 24px 28px;
}
.modal-actions[b-8vpqhriolt] {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 28px 24px;
border-top: 2px solid #f1f5f9;
}
.btn-modal[b-8vpqhriolt] {
padding: 10px 24px;
border: none;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.btn-modal-primary[b-8vpqhriolt] {
background: #2563eb;
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.btn-modal-primary:hover:not(:disabled)[b-8vpqhriolt] {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
.btn-modal-secondary[b-8vpqhriolt] {
background: #f1f5f9;
color: #1f2937;
border: 2px solid #e2e8f0;
}
.btn-modal-secondary:hover[b-8vpqhriolt] {
background: #e2e8f0;
transform: translateY(-2px);
}
/* ========================================
DETALLE CONTENIDO
======================================== */
.detalle-header[b-8vpqhriolt] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-radius: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 12px;
}
.detalle-titulo[b-8vpqhriolt] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
.detalle-titulo h3[b-8vpqhriolt] {
margin: 0;
font-size: 1.3rem;
font-weight: 700;
color: #1f2937;
}
.detalle-fecha[b-8vpqhriolt] {
font-size: 0.85rem;
color: #6b7280;
display: flex;
align-items: center;
gap: 6px;
}
.detalle-fecha i[b-8vpqhriolt] {
color: #2563eb;
}
.detalle-mensaje[b-8vpqhriolt] {
padding: 16px 20px;
background: #f8fafc;
border-radius: 12px;
font-size: 0.95rem;
color: #1f2937;
line-height: 1.6;
margin-bottom: 20px;
border: 1px solid #e2e8f0;
white-space: pre-wrap;
word-break: break-word;
}
.info-grid[b-8vpqhriolt] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.info-item[b-8vpqhriolt] {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 16px;
background: #f8fafc;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.info-item.full-width[b-8vpqhriolt] {
grid-column: 1 / -1;
}
.info-item .info-label[b-8vpqhriolt] {
font-size: 0.65rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 700;
}
.info-item .info-label i[b-8vpqhriolt] {
margin-right: 4px;
color: #2563eb;
}
.info-item .info-value[b-8vpqhriolt] {
font-size: 0.9rem;
font-weight: 600;
color: #1f2937;
word-break: break-word;
}
/* ========================================
MODAL CREAR NOTIFICACIΓN
======================================== */
.modal-content-form[b-8vpqhriolt] {
max-width: 550px !important;
width: 90% !important;
background: #ffffff; /* β
Fondo blanco */
border-radius: 20px;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
animation: slideUpModal-b-8vpqhriolt 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 1px solid rgba(255,255,255,0.1);
overflow: hidden;
}
.modal-form[b-8vpqhriolt] {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-group[b-8vpqhriolt] {
display: flex;
flex-direction: column;
gap: 4px;
}
.form-group label[b-8vpqhriolt] {
font-size: 0.8rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.form-group label i[b-8vpqhriolt] {
margin-right: 6px;
color: #2563eb;
}
.form-group .required[b-8vpqhriolt] {
color: #ef4444;
font-weight: 700;
}
.form-control[b-8vpqhriolt] {
padding: 10px 14px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.9rem;
background: white;
transition: all 0.3s ease;
color: #1f2937;
width: 100%;
box-sizing: border-box;
}
.form-control:focus[b-8vpqhriolt] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
transform: translateY(-1px);
}
.form-control:disabled[b-8vpqhriolt] {
background: #f1f5f9;
cursor: not-allowed;
opacity: 0.7;
}
.form-control[b-8vpqhriolt]::placeholder {
color: #a0aec0;
}
textarea.form-control[b-8vpqhriolt] {
resize: vertical;
min-height: 80px;
}
.modal-content-form .modal-actions[b-8vpqhriolt] {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 28px 24px;
border-top: 2px solid #f1f5f9;
}
.modal-content-form .btn-modal-primary[b-8vpqhriolt] {
background: #22c55e;
color: white;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.modal-content-form .btn-modal-primary:hover:not(:disabled)[b-8vpqhriolt] {
background: #16a34a;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}
.modal-content-form .btn-modal-primary:disabled[b-8vpqhriolt] {
opacity: 0.6;
cursor: not-allowed;
}
/* ========================================
TOAST
======================================== */
.toast-container[b-8vpqhriolt] {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 10000;
animation: slideUpToast-b-8vpqhriolt 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
max-width: 400px;
}
@keyframes slideUpToast-b-8vpqhriolt {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.toast-content[b-8vpqhriolt] {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
background: white;
border-radius: 14px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
border: 1px solid #e2e8f0;
}
.toast-success .toast-content[b-8vpqhriolt] {
border-left: 4px solid #22c55e;
}
.toast-success i[b-8vpqhriolt] {
color: #22c55e;
}
.toast-error .toast-content[b-8vpqhriolt] {
border-left: 4px solid #ef4444;
}
.toast-error i[b-8vpqhriolt] {
color: #ef4444;
}
.toast-info .toast-content[b-8vpqhriolt] {
border-left: 4px solid #2563eb;
}
.toast-info i[b-8vpqhriolt] {
color: #2563eb;
}
.toast-close[b-8vpqhriolt] {
background: none;
border: none;
cursor: pointer;
color: #6b7280;
font-size: 0.9rem;
padding: 4px 8px;
border-radius: 6px;
transition: all 0.3s ease;
}
.toast-close:hover[b-8vpqhriolt] {
background: #fee2e2;
color: #ef4444;
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 1024px) {
.filters-grid[b-8vpqhriolt] {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 768px) {
.toolbar-row[b-8vpqhriolt] {
flex-direction: column;
align-items: stretch;
}
.toolbar-right[b-8vpqhriolt] {
flex-wrap: wrap;
}
.filters-grid[b-8vpqhriolt] {
grid-template-columns: 1fr 1fr;
}
.stats-container[b-8vpqhriolt] {
margin-left: 0;
padding-left: 0;
border-left: none;
}
.table-notificaciones[b-8vpqhriolt] {
font-size: 0.75rem;
}
.table-notificaciones th[b-8vpqhriolt],
.table-notificaciones td[b-8vpqhriolt] {
padding: 8px 10px;
}
.pagination-container[b-8vpqhriolt] {
flex-direction: column;
}
.modal-content-detalle[b-8vpqhriolt] {
width: 95%;
margin: 10px;
}
.modal-content-form[b-8vpqhriolt] {
max-width: 95% !important;
width: 95% !important;
margin: 10px;
}
.modal-content-form .modal-actions[b-8vpqhriolt] {
flex-direction: column;
}
.modal-content-form .btn-modal[b-8vpqhriolt] {
justify-content: center;
}
.info-grid[b-8vpqhriolt] {
grid-template-columns: 1fr;
}
.detalle-titulo[b-8vpqhriolt] {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 480px) {
.filters-grid[b-8vpqhriolt] {
grid-template-columns: 1fr;
}
.btn-toolbar span[b-8vpqhriolt] {
display: none;
}
.btn-toolbar i[b-8vpqhriolt] {
font-size: 1.1rem;
}
.modal-actions[b-8vpqhriolt] {
flex-direction: column;
}
.btn-modal[b-8vpqhriolt] {
justify-content: center;
}
.modal-content-form[b-8vpqhriolt] {
max-width: 98% !important;
width: 98% !important;
}
.form-control[b-8vpqhriolt] {
font-size: 0.8rem;
padding: 8px 12px;
}
}
/* ========================================
SCROLLBAR
======================================== */
[b-8vpqhriolt]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
[b-8vpqhriolt]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
[b-8vpqhriolt]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
[b-8vpqhriolt]::-webkit-scrollbar-thumb:hover {
background: #2563eb;
}
.btn-anular[b-8vpqhriolt] {
background: #ef4444;
color: white;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.btn-anular:hover:not(:disabled)[b-8vpqhriolt] {
background: #dc2626;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}
.btn-anular:disabled[b-8vpqhriolt] {
opacity: 0.6;
cursor: not-allowed;
}
/* ========================================
NOTIFICACIONES ANULADAS
======================================== */
.table-notificaciones tbody tr.anulada[b-8vpqhriolt] {
opacity: 0.6;
background: #f9fafb;
text-decoration: line-through;
}
.table-notificaciones tbody tr.anulada:hover[b-8vpqhriolt] {
background: #f3f4f6;
opacity: 0.7;
}
.texto-anulado[b-8vpqhriolt] {
text-decoration: line-through;
color: #9ca3af !important;
}
.badge-anulado[b-8vpqhriolt] {
opacity: 0.5;
filter: grayscale(0.5);
}
.badge-anulado-label[b-8vpqhriolt] {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.55rem;
font-weight: 700;
text-transform: uppercase;
background: #ef4444;
color: white;
margin-left: 8px;
animation: pulse-anulado-label-b-8vpqhriolt 2s ease-in-out infinite;
}
@keyframes pulse-anulado-label-b-8vpqhriolt {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}
}
.badge-anulada[b-8vpqhriolt] {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 700;
font-size: 1rem;
color: #ef4444;
}
/* Asegurar que las filas anuladas no tengan el fondo azul de no-leidas */
.table-notificaciones tbody tr.anulada.no-leida[b-8vpqhriolt] {
background: #f9fafb !important;
}
.table-notificaciones tbody tr.anulada.no-leida:hover[b-8vpqhriolt] {
background: #f3f4f6 !important;
}
/* ========================================
COMBOBOX - VERSIΓN CORREGIDA PARA MODAL
======================================== */
/* Contenedor del combobox - debe ser relativo */
.combobox-container[b-8vpqhriolt] {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
/* Input del combobox */
.combobox-input[b-8vpqhriolt] {
flex: 1;
padding-right: 44px !important;
z-index: 1;
}
/* BotΓ³n del combobox */
.combobox-toggle[b-8vpqhriolt] {
position: absolute;
right: 2px;
top: 2px;
bottom: 2px;
width: 38px;
background: #f1f5f9;
border: none;
border-radius: 0 8px 8px 0;
cursor: pointer;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 2;
}
.combobox-toggle:hover[b-8vpqhriolt] {
background: #e2e8f0;
color: #1f2937;
}
/* LISTA DE COLABORADORES - CORREGIDA PARA MODAL */
.combobox-list-auto[b-8vpqhriolt] {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
max-height: 200px;
overflow-y: auto;
background: white;
border: 2px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
z-index: 10000;
margin: 0;
padding: 4px 0;
width: 100%;
min-width: 100%;
}
.combobox-item[b-8vpqhriolt] {
padding: 10px 16px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.9rem;
color: #1f2937;
font-weight: 500;
border-bottom: 1px solid #f1f5f9;
}
.combobox-item:last-child[b-8vpqhriolt] {
border-bottom: none;
}
.combobox-item:hover[b-8vpqhriolt] {
background: #eff6ff;
}
.combobox-item.disabled[b-8vpqhriolt] {
color: #a0aec0;
cursor: default;
font-weight: 400;
}
.combobox-item.disabled:hover[b-8vpqhriolt] {
background: transparent;
}
/* ========================================
MODAL CREAR NOTIFICACIΓN - CORREGIDO
======================================== */
.modal-content-form[b-8vpqhriolt] {
max-width: 550px !important;
width: 90% !important;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
animation: slideUpModal-b-8vpqhriolt 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 1px solid rgba(255,255,255,0.1);
overflow: visible !important; /* π CLAVE: permitir overflow visible */
max-height: 90vh;
display: flex;
flex-direction: column;
}
/* El cuerpo del modal debe tener scroll interno pero permitir que el combobox se muestre */
.modal-content-form .modal-body[b-8vpqhriolt] {
padding: 24px 28px;
overflow-y: auto;
overflow-x: visible !important;
flex: 1;
position: relative;
}
/* El header y footer fijos */
.modal-content-form .modal-header[b-8vpqhriolt] {
flex-shrink: 0;
}
.modal-content-form .modal-actions[b-8vpqhriolt] {
flex-shrink: 0;
}
/* Asegurar que el formulario ocupe todo el espacio disponible */
.modal-form[b-8vpqhriolt] {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
/* Cada grupo de formulario debe manejar su propio z-index */
.form-group[b-8vpqhriolt] {
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
z-index: 1;
}
/* El grupo del combobox debe tener z-index mΓ‘s alto */
.form-group:has(.combobox-container)[b-8vpqhriolt] {
z-index: 10;
}
.form-group label[b-8vpqhriolt] {
font-size: 0.8rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.form-group label i[b-8vpqhriolt] {
margin-right: 6px;
color: #2563eb;
}
.form-group .required[b-8vpqhriolt] {
color: #ef4444;
font-weight: 700;
}
/* ========================================
RESPONSIVE PARA COMBOBOX
======================================== */
@media (max-width: 768px) {
.modal-content-form[b-8vpqhriolt] {
max-width: 95% !important;
width: 95% !important;
margin: 10px;
max-height: 95vh;
}
.modal-content-form .modal-body[b-8vpqhriolt] {
padding: 16px 20px;
}
.combobox-list-auto[b-8vpqhriolt] {
max-height: 150px;
}
.combobox-item[b-8vpqhriolt] {
padding: 8px 14px;
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.modal-content-form[b-8vpqhriolt] {
max-width: 98% !important;
width: 98% !important;
max-height: 98vh;
}
.modal-content-form .modal-body[b-8vpqhriolt] {
padding: 12px 16px;
}
.form-control[b-8vpqhriolt] {
font-size: 0.8rem;
padding: 8px 12px;
}
.combobox-list-auto[b-8vpqhriolt] {
max-height: 120px;
}
.combobox-item[b-8vpqhriolt] {
padding: 6px 12px;
font-size: 0.8rem;
}
.combobox-toggle[b-8vpqhriolt] {
width: 32px;
}
}
/* /Pages/Logistica/Paqueteria_Rendicion.razor.rz.scp.css */
/* ========================================
RENDICIΓN DE CADETE - ESTILOS EXCLUSIVOS
VERSIΓN 5.0 - CORRECCIΓN FINAL
======================================== */
/* ========================================
1. RESET Y TIPOGRAFΓA GLOBAL
======================================== */
.rendicion-container[b-qbbcd9482r] {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
animation: fadeInPage-b-qbbcd9482r 0.4s ease;
min-height: 100vh;
}
@keyframes fadeInPage-b-qbbcd9482r {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
2. SECCIΓN 1 - CABECERA (TΓtulo + Botones) - COMPRIMIDA
======================================== */
.seccion-cabecera[b-qbbcd9482r] {
background: #ffffff;
border-radius: 16px;
padding: 12px 16px;
box-shadow: 0 4px 20px rgba(26, 58, 107, 0.08);
margin-bottom: 24px;
border: 1px solid rgba(37, 99, 235, 0.06);
transition: all 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
min-height: 60px;
}
.seccion-cabecera:hover[b-qbbcd9482r] {
box-shadow: 0 6px 30px rgba(26, 58, 107, 0.12);
}
.seccion-cabecera[b-qbbcd9482r]::-webkit-scrollbar {
height: 4px;
}
.seccion-cabecera[b-qbbcd9482r]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 2px;
}
.seccion-cabecera[b-qbbcd9482r]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 2px;
}
.seccion-cabecera[b-qbbcd9482r]::-webkit-scrollbar-thumb:hover {
background: #2563eb;
}
.cabecera-izquierda[b-qbbcd9482r] {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
flex-shrink: 0;
}
.cabecera-titulo[b-qbbcd9482r] {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.cabecera-titulo i[b-qbbcd9482r] {
font-size: 1.4rem;
color: #2563eb;
background: rgba(37, 99, 235, 0.1);
padding: 6px;
border-radius: 10px;
transition: all 0.3s ease;
}
.cabecera-titulo:hover i[b-qbbcd9482r] {
background: rgba(37, 99, 235, 0.18);
transform: scale(1.05) rotate(-5deg);
}
.cabecera-titulo h3[b-qbbcd9482r] {
margin: 0;
font-weight: 700;
color: #1f2937;
font-size: 1.1rem;
letter-spacing: -0.3px;
white-space: nowrap;
}
.cabecera-info[b-qbbcd9482r] {
display: flex;
gap: 6px;
flex-wrap: nowrap;
padding-left: 10px;
border-left: 2px solid rgba(37, 99, 235, 0.15);
flex-shrink: 0;
}
.info-badge[b-qbbcd9482r] {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
color: #6b7280;
padding: 3px 10px;
border-radius: 16px;
background: #f1f5f9;
white-space: nowrap;
transition: all 0.3s ease;
font-weight: 500;
}
.info-badge:hover[b-qbbcd9482r] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.info-badge i[b-qbbcd9482r] {
color: #2563eb;
font-size: 0.7rem;
}
.info-badge strong[b-qbbcd9482r] {
color: #1f2937;
font-weight: 600;
}
.info-badge-total[b-qbbcd9482r] {
background: rgba(37, 99, 235, 0.08);
}
.info-badge-total i[b-qbbcd9482r] {
color: #2563eb;
}
.info-badge-domicilios[b-qbbcd9482r] {
background: rgba(139, 92, 246, 0.08);
}
.info-badge-domicilios i[b-qbbcd9482r] {
color: #8b5cf6;
}
.cabecera-derecha[b-qbbcd9482r] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
flex-shrink: 0;
}
.cabecera-acciones[b-qbbcd9482r] {
display: flex;
gap: 4px;
align-items: center;
flex-wrap: nowrap;
}
.filtro-fecha[b-qbbcd9482r] {
display: flex;
align-items: center;
gap: 4px;
background: #f1f5f9;
padding: 2px 10px 2px 8px;
border-radius: 8px;
border: 1px solid #e2e8f0;
flex-shrink: 0;
}
.filtro-fecha label[b-qbbcd9482r] {
font-size: 0.65rem;
font-weight: 600;
color: #6b7280;
display: flex;
align-items: center;
gap: 3px;
}
.filtro-fecha label i[b-qbbcd9482r] {
color: #2563eb;
font-size: 0.65rem;
}
.filtro-fecha input[type="date"][b-qbbcd9482r] {
padding: 2px 6px;
border: 1.5px solid #e2e8f0;
border-radius: 4px;
font-size: 0.7rem;
background: white;
color: #1f2937;
transition: all 0.3s ease;
height: 26px;
width: 110px;
}
.filtro-fecha input[type="date"]:focus[b-qbbcd9482r] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
/* ========================================
3. BOTONES DE CABECERA - COMPRIMIDOS
======================================== */
.btn-crear-paquete[b-qbbcd9482r] {
background: #22c55e;
color: white;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
.btn-crear-paquete:hover[b-qbbcd9482r] {
background: #16a34a;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.btn-toolbar[b-qbbcd9482r] {
padding: 5px 12px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #ffffff;
white-space: nowrap;
}
.btn-toolbar:hover[b-qbbcd9482r] {
transform: translateY(-2px) scale(1.02);
}
.btn-toolbar i[b-qbbcd9482r] {
font-size: 0.8rem;
}
.btn-toolbar span[b-qbbcd9482r] {
font-size: 0.7rem;
}
.btn-seleccionar-cadete[b-qbbcd9482r] {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.btn-seleccionar-cadete:hover[b-qbbcd9482r] {
background: linear-gradient(135deg, #1d4ed8, #1e40af);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}
.btn-refresh[b-qbbcd9482r] {
background: linear-gradient(135deg, #059669, #10b981);
color: white;
border: none;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.btn-refresh:hover:not(:disabled)[b-qbbcd9482r] {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45);
}
.btn-refresh:disabled[b-qbbcd9482r] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-print[b-qbbcd9482r] {
background: #8b5cf6;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.btn-print:hover[b-qbbcd9482r] {
background: #7c3aed;
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
/* ========================================
4. SECCIΓN 2 - PAQUETES A RENDIR
======================================== */
.seccion-paquetes[b-qbbcd9482r] {
margin-bottom: 24px;
}
.paquetes-panel[b-qbbcd9482r] {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(26, 58, 107, 0.08);
overflow: hidden;
border: 1px solid rgba(37, 99, 235, 0.06);
transition: all 0.3s ease;
}
.paquetes-panel:hover[b-qbbcd9482r] {
box-shadow: 0 6px 30px rgba(26, 58, 107, 0.12);
}
.panel-titulo-barra[b-qbbcd9482r] {
padding: 12px 20px;
background: #f8fafc;
border-bottom: 2px solid #e2e8f0;
}
.panel-titulo-barra h4[b-qbbcd9482r] {
margin: 0;
font-size: 0.9rem;
font-weight: 700;
color: #1f2937;
display: flex;
align-items: center;
gap: 8px;
}
.panel-titulo-barra h4 i[b-qbbcd9482r] {
color: #2563eb;
}
/* ========================================
5. BARRA DE HERRAMIENTAS DEL PANEL - COMPRIMIDA
======================================== */
.panel-toolbar[b-qbbcd9482r] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
background: #fafbfc;
border-bottom: 1px solid #e2e8f0;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
min-height: 48px;
}
.panel-toolbar[b-qbbcd9482r]::-webkit-scrollbar {
height: 4px;
}
.panel-toolbar[b-qbbcd9482r]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 2px;
}
.panel-toolbar[b-qbbcd9482r]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 2px;
}
.panel-toolbar[b-qbbcd9482r]::-webkit-scrollbar-thumb:hover {
background: #2563eb;
}
.panel-toolbar-izquierda[b-qbbcd9482r] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
flex-shrink: 0;
}
.buscador[b-qbbcd9482r] {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
}
.buscador i[b-qbbcd9482r] {
position: absolute;
left: 8px;
color: #94a3b8;
font-size: 0.7rem;
}
.buscador input[b-qbbcd9482r] {
padding: 4px 8px 4px 28px;
border: 1.5px solid #e2e8f0;
border-radius: 6px 0 0 6px;
font-size: 0.7rem;
background: white;
color: #1f2937;
transition: all 0.3s ease;
width: 180px;
height: 28px;
}
.buscador input:focus[b-qbbcd9482r] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.buscador input[b-qbbcd9482r]::placeholder {
color: #a0aec0;
font-size: 0.65rem;
}
.filtro-estado[b-qbbcd9482r] {
display: flex;
align-items: center;
flex-shrink: 0;
}
.filtro-estado select[b-qbbcd9482r] {
padding: 4px 8px;
border: 1.5px solid #e2e8f0;
border-radius: 6px;
font-size: 0.65rem;
background: white;
color: #1f2937;
transition: all 0.3s ease;
height: 28px;
cursor: pointer;
}
.filtro-estado select:focus[b-qbbcd9482r] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.btn-panel[b-qbbcd9482r] {
padding: 4px 10px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.65rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.btn-panel:hover[b-qbbcd9482r] {
transform: translateY(-2px);
}
.btn-panel i[b-qbbcd9482r] {
font-size: 0.7rem;
}
.btn-marcar-todos[b-qbbcd9482r] {
background: #2563eb;
color: white;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}
.btn-marcar-todos:hover[b-qbbcd9482r] {
background: #1d4ed8;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.btn-desmarcar-todos[b-qbbcd9482r] {
background: #f59e0b;
color: white;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}
.btn-desmarcar-todos:hover[b-qbbcd9482r] {
background: #d97706;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-limpiar-seleccion[b-qbbcd9482r] {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
border: none;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.btn-limpiar-seleccion:hover[b-qbbcd9482r] {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45);
}
.btn-asignar-colaborador[b-qbbcd9482r] {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.btn-asignar-colaborador:hover:not(:disabled)[b-qbbcd9482r] {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.45);
}
.btn-asignar-colaborador:disabled[b-qbbcd9482r] {
opacity: 0.5;
cursor: not-allowed;
}
/* π BOTΓN VER COBROS ESPECIALES */
.btn-ver-cobros[b-qbbcd9482r] {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.btn-ver-cobros:hover[b-qbbcd9482r] {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.45);
}
.panel-toolbar-derecha[b-qbbcd9482r] {
display: flex;
align-items: center;
flex-shrink: 0;
}
.badge-estado-rendicion[b-qbbcd9482r] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
border-radius: 16px;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.badge-estado-rendicion.estado-pendiente[b-qbbcd9482r] {
background: #fef3c7;
color: #92400e;
border: 2px solid #f59e0b;
}
.badge-estado-rendicion.estado-pendiente i[b-qbbcd9482r] {
color: #f59e0b;
}
.badge-estado-rendicion.estado-realizada[b-qbbcd9482r] {
background: #d1fae5;
color: #065f46;
border: 2px solid #22c55e;
}
.badge-estado-rendicion.estado-realizada i[b-qbbcd9482r] {
color: #22c55e;
}
.badge-estado-rendicion.estado-parcial[b-qbbcd9482r] {
background: #fef3c7;
color: #92400e;
border: 2px solid #f59e0b;
}
.badge-estado-rendicion.estado-parcial i[b-qbbcd9482r] {
color: #f59e0b;
}
.badge-estado-rendicion.estado-cerrada[b-qbbcd9482r] {
background: #fee2e2;
color: #991b1b;
border: 2px solid #ef4444;
}
.badge-estado-rendicion.estado-cerrada i[b-qbbcd9482r] {
color: #ef4444;
}
.badge-estado-rendicion.estado-anulada[b-qbbcd9482r] {
background: #f1f5f9;
color: #6b7280;
border: 2px solid #94a3b8;
}
.badge-estado-rendicion.estado-anulada i[b-qbbcd9482r] {
color: #94a3b8;
}
.btn-toggle-rendicion[b-qbbcd9482r] {
background: none;
border: none;
cursor: pointer;
color: #6b7280;
font-size: 0.75rem;
padding: 0 4px;
transition: all 0.3s ease;
}
.btn-toggle-rendicion:hover[b-qbbcd9482r] {
color: #2563eb;
transform: scale(1.1);
}
/* ========================================
6. TABLA DE RENDICIΓN Y COLORIMETRΓA DE FILAS
======================================== */
/* β
PUNTO 5: Scroll interno de la tabla */
.table-responsive[b-qbbcd9482r] {
overflow-x: auto;
padding: 0 0 1px 0;
}
.table-scrollable[b-qbbcd9482r] {
max-height: 450px;
overflow-y: auto;
overflow-x: auto;
}
/* BOTΓN DESRENDIR */
.btn-desrendir[b-qbbcd9482r] {
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 4px;
color: #92400e;
cursor: pointer;
padding: 2px 6px;
font-size: 0.65rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 3px;
}
.btn-desrendir:hover[b-qbbcd9482r] {
background: #fcd34d;
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.btn-desrendir i[b-qbbcd9482r] {
font-size: 0.7rem;
}
.table-rendicion[b-qbbcd9482r] {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
min-width: 1200px;
}
.table-rendicion thead[b-qbbcd9482r] {
background: #f8fafc;
}
.table-rendicion th[b-qbbcd9482r] {
padding: 8px 10px;
text-align: left;
font-weight: 700;
color: #1f2937;
border-bottom: 2px solid #e2e8f0;
white-space: nowrap;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.3px;
background: #f8fafc;
position: sticky;
top: 0;
z-index: 10;
}
.table-rendicion td[b-qbbcd9482r] {
padding: 6px 8px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
color: #1f2937;
}
.table-rendicion tbody tr[b-qbbcd9482r] {
transition: all 0.2s ease;
}
.table-rendicion tbody tr:hover[b-qbbcd9482r] {
filter: brightness(0.97);
}
/* ============================================
β
FILAS RENDIDAS (Confirmadas) - SIEMPRE VISIBLES
============================================ */
.table-rendicion tbody tr.row-rendido[b-qbbcd9482r] {
background: #d4edda !important;
}
.table-rendicion tbody tr.row-rendido td[b-qbbcd9482r] {
background: #d4edda !important;
}
.table-rendicion tbody tr.row-rendido:hover[b-qbbcd9482r] {
background: #d4edda !important;
}
.table-rendicion tbody tr.row-rendido-anulado[b-qbbcd9482r] {
background: #f8d7da !important;
}
.table-rendicion tbody tr.row-rendido-anulado td[b-qbbcd9482r] {
background: #f8d7da !important;
}
.table-rendicion tbody tr.row-rendido-anulado:hover[b-qbbcd9482r] {
background: #f8d7da !important;
}
/* ============================================
β
FILAS SELECCIONADAS SEGΓN ESTADO
============================================ */
.table-rendicion tbody tr.estado-asignado-fila[b-qbbcd9482r] {
background: #fff3cd !important;
}
.table-rendicion tbody tr.estado-asignado-fila td[b-qbbcd9482r] {
background: #fff3cd !important;
}
.table-rendicion tbody tr.estado-asignado-fila:hover[b-qbbcd9482r] {
background: #fff3cd !important;
}
.table-rendicion tbody tr.estado-en-camino-fila[b-qbbcd9482r] {
background: #cce5ff !important;
}
.table-rendicion tbody tr.estado-en-camino-fila td[b-qbbcd9482r] {
background: #cce5ff !important;
}
.table-rendicion tbody tr.estado-en-camino-fila:hover[b-qbbcd9482r] {
background: #cce5ff !important;
}
.table-rendicion tbody tr.estado-entregado-fila[b-qbbcd9482r] {
background: #d4edda !important;
}
.table-rendicion tbody tr.estado-entregado-fila td[b-qbbcd9482r] {
background: #d4edda !important;
}
.table-rendicion tbody tr.estado-entregado-fila:hover[b-qbbcd9482r] {
background: #d4edda !important;
}
.table-rendicion tbody tr.estado-anulado-fila[b-qbbcd9482r] {
background: #f8d7da !important;
}
.table-rendicion tbody tr.estado-anulado-fila td[b-qbbcd9482r] {
background: #f8d7da !important;
}
.table-rendicion tbody tr.estado-anulado-fila:hover[b-qbbcd9482r] {
background: #f8d7da !important;
}
/* ============================================
β
PRIORIDAD: Las clases de estado SIEMPRE ganan
============================================ */
.table-rendicion tbody tr.row-rendido[b-qbbcd9482r],
.table-rendicion tbody tr.row-rendido-anulado[b-qbbcd9482r],
.table-rendicion tbody tr.estado-asignado-fila[b-qbbcd9482r],
.table-rendicion tbody tr.estado-en-camino-fila[b-qbbcd9482r],
.table-rendicion tbody tr.estado-entregado-fila[b-qbbcd9482r],
.table-rendicion tbody tr.estado-anulado-fila[b-qbbcd9482r] {
filter: none !important;
}
/* β
Input Cliente Confirmado */
.input-cliente-confirmado[b-qbbcd9482r] {
background: transparent !important;
border: none !important;
font-weight: 700 !important;
color: #1f2937 !important;
padding: 0 !important;
cursor: default !important;
}
/* ============================================
β
FILAS SIN ESTADO - COLORIMETRΓA POR ZONA DE PAGO
============================================ */
.table-rendicion tbody tr.zona-pago-1[b-qbbcd9482r] {
background-color: #ffffff !important;
}
.table-rendicion tbody tr.zona-pago-2[b-qbbcd9482r] {
background-color: #f5f5f5 !important;
}
.table-rendicion tbody tr.zona-pago-ciudad-de-la-costa[b-qbbcd9482r] {
background-color: #f3e8ff !important;
}
.table-rendicion tbody tr.zona-pago-salinas[b-qbbcd9482r] {
background-color: #fff7ed !important;
}
.table-rendicion tbody tr.zona-pago-hr-auto[b-qbbcd9482r] {
background-color: #eff6ff !important;
}
.table-rendicion tbody tr.zona-pago-default[b-qbbcd9482r] {
background-color: #ffffff !important;
}
/* ========================================
7. SELECTORES ESTILIZADOS (Badges Select) - COMPRIMIDOS
======================================== */
.badge-select[b-qbbcd9482r] {
padding: 3px 10px;
border: none;
border-radius: 16px;
font-size: 0.6rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
appearance: auto;
min-width: 60px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
background: #f1f5f9;
color: #1f2937;
height: 26px;
}
.badge-select:hover:not(:disabled)[b-qbbcd9482r] {
transform: scale(1.03) translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.badge-select:disabled[b-qbbcd9482r] {
opacity: 0.7;
cursor: not-allowed;
transform: none !important;
}
.badge-select option[b-qbbcd9482r] {
background: white;
color: #1f2937;
}
/* CLIENTES - CASMU (AZULES) */
.badge-cliente[value="CasmuEnCasa_Comun"][b-qbbcd9482r],
.badge-cliente option[value="CasmuEnCasa_Comun"][b-qbbcd9482r] {
background: #1a3a6b !important;
color: white !important;
}
.badge-cliente[value="CasmuEnCasa_Express"][b-qbbcd9482r],
.badge-cliente option[value="CasmuEnCasa_Express"][b-qbbcd9482r] {
background: #2563eb !important;
color: white !important;
}
.badge-cliente[value="CasmuEnCasa_HrAuto"][b-qbbcd9482r],
.badge-cliente option[value="CasmuEnCasa_HrAuto"][b-qbbcd9482r] {
background: #60a5fa !important;
color: #1a3a6b !important;
}
/* CLIENTES - EVANGΓLICO (VERDES) */
.badge-cliente[value="Evangelico_Comun"][b-qbbcd9482r],
.badge-cliente option[value="Evangelico_Comun"][b-qbbcd9482r] {
background: #065f46 !important;
color: white !important;
}
.badge-cliente[value="Evangelico_Express"][b-qbbcd9482r],
.badge-cliente option[value="Evangelico_Express"][b-qbbcd9482r] {
background: #10b981 !important;
color: white !important;
}
.badge-cliente[value="Evangelico_HrAuto"][b-qbbcd9482r],
.badge-cliente option[value="Evangelico_HrAuto"][b-qbbcd9482r] {
background: #34d399 !important;
color: #065f46 !important;
}
.badge-cliente[value=""][b-qbbcd9482r],
.badge-cliente option[value=""][b-qbbcd9482r] {
background: #e2e8f0 !important;
color: #6b7280 !important;
}
/* ZONA DE PAGO */
.badge-zonapago[value="Zona 1"][b-qbbcd9482r],
.badge-zonapago option[value="Zona 1"][b-qbbcd9482r] {
background: #1e3a5f !important;
color: white !important;
}
.badge-zonapago[value="Zona 2"][b-qbbcd9482r],
.badge-zonapago option[value="Zona 2"][b-qbbcd9482r] {
background: #3b82f6 !important;
color: white !important;
}
.badge-zonapago[value="Ciudad de la Costa"][b-qbbcd9482r],
.badge-zonapago option[value="Ciudad de la Costa"][b-qbbcd9482r] {
background: #8b5cf6 !important;
color: white !important;
}
.badge-zonapago[value="Salinas"][b-qbbcd9482r],
.badge-zonapago option[value="Salinas"][b-qbbcd9482r] {
background: #f97316 !important;
color: white !important;
}
.badge-zonapago[value="Hr Auto"][b-qbbcd9482r],
.badge-zonapago option[value="Hr Auto"][b-qbbcd9482r] {
background: #2563eb !important;
color: white !important;
}
.badge-zonapago[value=""][b-qbbcd9482r],
.badge-zonapago option[value=""][b-qbbcd9482r] {
background: #e2e8f0 !important;
color: #6b7280 !important;
}
/* ========================================
8. INPUTS DE TABLA - COMPRIMIDOS
======================================== */
.table-rendicion .form-control[b-qbbcd9482r] {
padding: 2px 6px;
border: 1.5px solid #e2e8f0;
border-radius: 4px;
font-size: 0.7rem;
background: white;
transition: all 0.3s ease;
color: #1f2937;
height: 24px;
width: 100%;
}
.table-rendicion .form-control:focus[b-qbbcd9482r] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.table-rendicion .form-control:disabled[b-qbbcd9482r] {
background: #f1f5f9;
cursor: not-allowed;
opacity: 0.6;
}
.table-rendicion .form-control-sm[b-qbbcd9482r] {
font-size: 0.65rem;
padding: 1px 4px;
height: 22px;
}
.monto-cell .form-control[b-qbbcd9482r] {
font-weight: 700;
color: #16a34a;
}
.wrap-text[b-qbbcd9482r] {
max-width: 140px;
}
/* ========================================
8.1 COLORIMETRΓA DE COMENTARIO
======================================== */
.comentario-destacado[b-qbbcd9482r] {
background: #ffff00 !important;
font-weight: 700 !important;
color: #1f2937 !important;
border-radius: 4px !important;
padding: 1px 4px !important;
}
/* ========================================
8.2 COLORIMETRΓA DE MOTIVO ANULACIΓN
======================================== */
.motivo-anulacion[b-qbbcd9482r] {
font-weight: 700;
padding: 1px 6px;
border-radius: 4px;
font-size: 0.65rem;
}
.motivo-anulacion.cliente-ausente[b-qbbcd9482r] {
background: #fca5a5 !important;
color: #7f1d1d !important;
}
.motivo-anulacion.no-tiene-dinero[b-qbbcd9482r] {
background: #f87171 !important;
color: #7f1d1d !important;
}
.motivo-anulacion.no-tiene-receta[b-qbbcd9482r] {
background: #ef4444 !important;
color: white !important;
}
.motivo-anulacion.error-direccion[b-qbbcd9482r] {
background: #dc2626 !important;
color: white !important;
}
/* ========================================
9. COLORIMETRΓA DE ESTADOS DELIVERY
======================================== */
.estado-badge[b-qbbcd9482r] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 16px;
font-size: 0.6rem;
font-weight: 700;
white-space: nowrap;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
letter-spacing: 0.3px;
text-transform: uppercase;
border: none;
appearance: auto;
cursor: pointer;
min-width: 70px;
height: 24px;
}
.estado-badge:hover:not(:disabled)[b-qbbcd9482r] {
transform: scale(1.05) translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.estado-badge:disabled[b-qbbcd9482r] {
opacity: 0.7;
cursor: not-allowed;
transform: none !important;
}
.estado-badge option[b-qbbcd9482r] {
background: white;
color: #1f2937;
}
/* SIN ASIGNAR - Gris claro sin animaciΓ³n */
.estado-badge[value="SIN ASIGNAR"][b-qbbcd9482r] {
background: #9ca3af !important;
color: white !important;
}
/* ASIGNADO - Naranja con animaciΓ³n */
.estado-badge[value="Asignado"][b-qbbcd9482r] {
background: #f59e0b !important;
color: white !important;
animation: respirar-naranja-b-qbbcd9482r 1.5s ease-in-out infinite;
}
@keyframes respirar-naranja-b-qbbcd9482r {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}
50% {
transform: scale(1.08);
box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
}
}
/* EN CAMINO - Azul con animaciΓ³n */
.estado-badge[value="En Camino"][b-qbbcd9482r] {
background: #3b82f6 !important;
color: white !important;
animation: vibrar-b-qbbcd9482r 0.8s ease-in-out infinite;
}
@keyframes vibrar-b-qbbcd9482r {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-3px) rotate(-1deg);
}
75% {
transform: translateX(3px) rotate(1deg);
}
}
/* ENTREGADO - Verde sin animaciΓ³n */
.estado-badge[value="Entregado"][b-qbbcd9482r] {
background: #22c55e !important;
color: white !important;
}
/* ANULADO - Rojo con animaciΓ³n */
.estado-badge[value="Anulado"][b-qbbcd9482r] {
background: #ef4444 !important;
color: white !important;
animation: respirar-rojo-b-qbbcd9482r 1s ease-in-out infinite;
}
@keyframes respirar-rojo-b-qbbcd9482r {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}
50% {
transform: scale(1.15);
box-shadow: 0 0 40px rgba(239, 68, 68, 0.8);
}
}
/* ========================================
30. COLORIMETRΓA DEL SELECT CUANDO ESTΓ SELECCIONADO
======================================== */
.badge-cliente[value="CasmuEnCasa_Comun"][b-qbbcd9482r],
.badge-cliente:has(option[value="CasmuEnCasa_Comun"]:checked)[b-qbbcd9482r] {
background-color: #1a3a6b !important;
color: white !important;
}
.badge-cliente[value="CasmuEnCasa_Express"][b-qbbcd9482r],
.badge-cliente:has(option[value="CasmuEnCasa_Express"]:checked)[b-qbbcd9482r] {
background-color: #2563eb !important;
color: white !important;
}
.badge-cliente[value="CasmuEnCasa_HrAuto"][b-qbbcd9482r],
.badge-cliente:has(option[value="CasmuEnCasa_HrAuto"]:checked)[b-qbbcd9482r] {
background-color: #60a5fa !important;
color: #1a3a6b !important;
}
.badge-cliente[value="Evangelico_Comun"][b-qbbcd9482r],
.badge-cliente:has(option[value="Evangelico_Comun"]:checked)[b-qbbcd9482r] {
background-color: #065f46 !important;
color: white !important;
}
.badge-cliente[value="Evangelico_Express"][b-qbbcd9482r],
.badge-cliente:has(option[value="Evangelico_Express"]:checked)[b-qbbcd9482r] {
background-color: #10b981 !important;
color: white !important;
}
.badge-cliente[value="Evangelico_HrAuto"][b-qbbcd9482r],
.badge-cliente:has(option[value="Evangelico_HrAuto"]:checked)[b-qbbcd9482r] {
background-color: #34d399 !important;
color: #065f46 !important;
}
.badge-zonapago[value="Zona 1"][b-qbbcd9482r],
.badge-zonapago:has(option[value="Zona 1"]:checked)[b-qbbcd9482r] {
background-color: #1e3a5f !important;
color: white !important;
}
.badge-zonapago[value="Zona 2"][b-qbbcd9482r],
.badge-zonapago:has(option[value="Zona 2"]:checked)[b-qbbcd9482r] {
background-color: #3b82f6 !important;
color: white !important;
}
.badge-zonapago[value="Ciudad de la Costa"][b-qbbcd9482r],
.badge-zonapago:has(option[value="Ciudad de la Costa"]:checked)[b-qbbcd9482r] {
background-color: #8b5cf6 !important;
color: white !important;
}
.badge-zonapago[value="Salinas"][b-qbbcd9482r],
.badge-zonapago:has(option[value="Salinas"]:checked)[b-qbbcd9482r] {
background-color: #f97316 !important;
color: white !important;
}
.badge-zonapago[value="Hr Auto"][b-qbbcd9482r],
.badge-zonapago:has(option[value="Hr Auto"]:checked)[b-qbbcd9482r] {
background-color: #2563eb !important;
color: white !important;
}
.estado-badge[value="SIN ASIGNAR"][b-qbbcd9482r],
.estado-badge:has(option[value="SIN ASIGNAR"]:checked)[b-qbbcd9482r] {
background-color: #9ca3af !important;
color: white !important;
animation: none !important;
}
.estado-badge[value="Asignado"][b-qbbcd9482r],
.estado-badge:has(option[value="Asignado"]:checked)[b-qbbcd9482r] {
background-color: #f59e0b !important;
color: white !important;
animation: respirar-naranja-b-qbbcd9482r 1.5s ease-in-out infinite;
}
.estado-badge[value="En Camino"][b-qbbcd9482r],
.estado-badge:has(option[value="En Camino"]:checked)[b-qbbcd9482r] {
background-color: #3b82f6 !important;
color: white !important;
animation: vibrar-b-qbbcd9482r 0.8s ease-in-out infinite;
}
.estado-badge[value="Entregado"][b-qbbcd9482r],
.estado-badge:has(option[value="Entregado"]:checked)[b-qbbcd9482r] {
background-color: #22c55e !important;
color: white !important;
animation: none !important;
}
.estado-badge[value="Anulado"][b-qbbcd9482r],
.estado-badge:has(option[value="Anulado"]:checked)[b-qbbcd9482r] {
background-color: #ef4444 !important;
color: white !important;
animation: respirar-rojo-b-qbbcd9482r 1s ease-in-out infinite;
}
/* ========================================
10. LOADING Y EMPTY STATE
======================================== */
.loading-panel[b-qbbcd9482r] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
background: #ffffff;
border-radius: 16px;
}
.loading-panel .spinner-border[b-qbbcd9482r] {
width: 3rem;
height: 3rem;
border-width: 4px;
color: #2563eb;
}
.loading-panel p[b-qbbcd9482r] {
margin-top: 16px;
color: #6b7280;
font-weight: 500;
}
.empty-state[b-qbbcd9482r] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
background: #ffffff;
border-radius: 16px;
text-align: center;
}
.empty-state i[b-qbbcd9482r] {
font-size: 4rem;
color: #d1d5db;
margin-bottom: 16px;
}
.empty-state h4[b-qbbcd9482r] {
color: #1f2937;
margin-bottom: 4px;
font-weight: 700;
}
.empty-state p[b-qbbcd9482r] {
color: #6b7280;
margin-bottom: 0;
}
/* ========================================
11. SECCIΓN 3 y 4 - RENDICIΓN + RESUMEN (LADO A LADO)
======================================== */
.seccion-rendicion-resumen[b-qbbcd9482r] {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 24px;
margin-top: 0;
}
/* ========================================
12. SECCIΓN 3 - RENDICIΓN (IZQUIERDA)
======================================== */
.rendicion-panel[b-qbbcd9482r] {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(26, 58, 107, 0.08);
border: 1px solid rgba(37, 99, 235, 0.06);
padding: 16px 18px;
transition: all 0.3s ease;
}
.rendicion-panel:hover[b-qbbcd9482r] {
box-shadow: 0 6px 30px rgba(26, 58, 107, 0.12);
}
.rendicion-panel h4[b-qbbcd9482r] {
margin: 0 0 12px 0;
font-size: 0.9rem;
font-weight: 700;
color: #1f2937;
display: flex;
align-items: center;
gap: 8px;
}
.rendicion-panel h4 i[b-qbbcd9482r] {
color: #2563eb;
}
.rendicion-grid[b-qbbcd9482r] {
display: grid;
grid-template-columns: 1fr 1fr 0.8fr;
gap: 12px;
}
.rendicion-columna[b-qbbcd9482r] {
background: #f8fafc;
border-radius: 10px;
padding: 12px 14px;
border: 1px solid #e2e8f0;
}
.rendicion-columna h5[b-qbbcd9482r] {
margin: 0 0 10px 0;
font-size: 0.7rem;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.campo-rendicion[b-qbbcd9482r] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
border-bottom: 1px solid #e2e8f0;
}
.campo-rendicion:last-of-type[b-qbbcd9482r] {
border-bottom: none;
}
.campo-rendicion label[b-qbbcd9482r] {
font-size: 0.65rem;
font-weight: 600;
color: #6b7280;
}
.campo-rendicion .form-control[b-qbbcd9482r] {
width: 80px;
padding: 2px 6px;
border: 1.5px solid #e2e8f0;
border-radius: 4px;
font-size: 0.7rem;
background: white;
color: #1f2937;
transition: all 0.3s ease;
height: 24px;
text-align: right;
}
.campo-rendicion .form-control:focus[b-qbbcd9482r] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.campo-rendicion .form-control:disabled[b-qbbcd9482r] {
background: #f1f5f9;
cursor: not-allowed;
opacity: 0.6;
}
.campo-rendicion.total[b-qbbcd9482r] {
margin-top: 6px;
padding-top: 6px;
border-top: 2px solid #e2e8f0;
}
.campo-rendicion.total label[b-qbbcd9482r] {
font-size: 0.7rem;
color: #1f2937;
}
.campo-rendicion.diferencia[b-qbbcd9482r] {
margin-top: 4px;
padding-top: 6px;
border-top: 2px solid #e2e8f0;
}
.campo-rendicion.diferencia label[b-qbbcd9482r] {
font-size: 0.7rem;
color: #1f2937;
}
.valor-no-editable[b-qbbcd9482r] {
font-weight: 600;
color: #1f2937;
font-size: 0.8rem;
}
.valor-total[b-qbbcd9482r] {
font-weight: 700;
font-size: 0.95rem;
color: #2563eb;
}
.valor-diferencia[b-qbbcd9482r] {
font-weight: 700;
font-size: 0.85rem;
}
.valor-diferencia.positivo[b-qbbcd9482r] {
color: #22c55e;
}
.valor-diferencia.negativo[b-qbbcd9482r] {
color: #ef4444;
}
/* ========================================
13. SECCIΓN 4 - RESUMEN DE RENDICIΓN (DERECHA)
======================================== */
.resumen-panel[b-qbbcd9482r] {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(26, 58, 107, 0.08);
border: 1px solid rgba(37, 99, 235, 0.06);
overflow: hidden;
transition: all 0.3s ease;
}
.resumen-panel:hover[b-qbbcd9482r] {
box-shadow: 0 6px 30px rgba(26, 58, 107, 0.12);
}
.resumen-header[b-qbbcd9482r] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
background: #f8fafc;
border-bottom: 2px solid #e2e8f0;
}
.resumen-header h4[b-qbbcd9482r] {
margin: 0;
font-size: 0.9rem;
font-weight: 700;
color: #1f2937;
display: flex;
align-items: center;
gap: 8px;
}
.resumen-header h4 i[b-qbbcd9482r] {
color: #2563eb;
}
.resumen-fecha[b-qbbcd9482r] {
font-size: 0.6rem;
color: #6b7280;
font-weight: 500;
}
.resumen-body[b-qbbcd9482r] {
padding: 14px 18px;
}
/* INDICADORES CUADRADOS */
.resumen-cards-wrapper[b-qbbcd9482r] {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.resumen-card[b-qbbcd9482r] {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
padding: 10px;
border-radius: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
width: 100px;
height: 100px;
flex: 0 0 auto;
}
.resumen-card:hover[b-qbbcd9482r] {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.card-icon[b-qbbcd9482r] {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.card-total .card-icon[b-qbbcd9482r] {
background: rgba(37, 99, 235, 0.12);
color: #2563eb;
}
.card-domicilios .card-icon[b-qbbcd9482r] {
background: rgba(139, 92, 246, 0.12);
color: #8b5cf6;
}
.card-seleccionados .card-icon[b-qbbcd9482r] {
background: rgba(34, 197, 94, 0.12);
color: #22c55e;
}
.card-porcentaje .card-icon[b-qbbcd9482r] {
background: rgba(245, 158, 11, 0.12);
color: #f59e0b;
}
.card-monto .card-icon[b-qbbcd9482r] {
background: rgba(16, 185, 129, 0.12);
color: #10b981;
}
.card-recetas .card-icon[b-qbbcd9482r] {
background: rgba(236, 72, 153, 0.12);
color: #ec4899;
}
.card-devoluciones .card-icon[b-qbbcd9482r] {
background: rgba(239, 68, 68, 0.12);
color: #ef4444;
}
.card-ausente .card-icon[b-qbbcd9482r] {
background: rgba(249, 115, 22, 0.12);
color: #f97316;
}
.card-otros .card-icon[b-qbbcd9482r] {
background: rgba(107, 114, 128, 0.12);
color: #6b7280;
}
.card-boletos .card-icon[b-qbbcd9482r] {
background: rgba(59, 130, 246, 0.12);
color: #3b82f6;
}
.card-cobros .card-icon[b-qbbcd9482r] {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
.card-total-a-cobrar .card-icon[b-qbbcd9482r] {
background: rgba(37, 99, 235, 0.15);
color: #2563eb;
}
.card-info[b-qbbcd9482r] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.card-label[b-qbbcd9482r] {
font-size: 0.5rem;
color: #6b7280;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.card-value[b-qbbcd9482r] {
font-size: 0.85rem;
font-weight: 700;
color: #1f2937;
}
/* ========================================
14. PROGRESS BAR
======================================== */
.progress-section[b-qbbcd9482r] {
margin-bottom: 12px;
margin-top: 2px;
}
.progress-label[b-qbbcd9482r] {
display: flex;
justify-content: space-between;
font-size: 0.7rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 2px;
}
.progress-label span:last-child[b-qbbcd9482r] {
color: #2563eb;
}
.progress-bar-container[b-qbbcd9482r] {
width: 100%;
height: 6px;
background: #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.progress-bar-fill[b-qbbcd9482r] {
height: 100%;
background: linear-gradient(90deg, #2563eb, #3b82f6);
border-radius: 10px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========================================
15. DETALLE DE ESTADOS - COMPRIMIDO
======================================== */
.detalle-estados[b-qbbcd9482r] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin-bottom: 12px;
padding: 8px 12px;
background: #f8fafc;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.detalle-item[b-qbbcd9482r] {
display: flex;
justify-content: space-between;
align-items: center;
}
.detalle-label[b-qbbcd9482r] {
font-size: 0.6rem;
font-weight: 600;
color: #6b7280;
display: flex;
align-items: center;
gap: 4px;
}
.detalle-label i[b-qbbcd9482r] {
font-size: 0.5rem;
}
.detalle-value[b-qbbcd9482r] {
font-size: 0.8rem;
font-weight: 700;
color: #1f2937;
}
/* ========================================
16. BOTONES DE ACCIΓN DEL RESUMEN - COMPRIMIDOS
======================================== */
.resumen-actions[b-qbbcd9482r] {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.btn-accion-principal[b-qbbcd9482r] {
padding: 6px 16px;
border: none;
border-radius: 8px;
font-size: 0.7rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 6px;
flex: 1;
justify-content: center;
}
.btn-accion-principal:hover:not(:disabled)[b-qbbcd9482r] {
transform: translateY(-2px);
}
.btn-confirmar[b-qbbcd9482r] {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.btn-confirmar:hover:not(:disabled)[b-qbbcd9482r] {
box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}
.btn-confirmar:disabled[b-qbbcd9482r] {
opacity: 0.5;
cursor: not-allowed;
}
.btn-limpiar-resumen[b-qbbcd9482r] {
background: #f1f5f9;
color: #1f2937;
border: 1.5px solid #e2e8f0;
flex: 0.5;
}
.btn-limpiar-resumen:hover[b-qbbcd9482r] {
background: #e2e8f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* ========================================
17. MODAL - SELECCIONAR CADETE (Combobox)
======================================== */
.modal-form[b-qbbcd9482r] {
margin-top: 8px;
}
.form-group[b-qbbcd9482r] {
display: flex;
flex-direction: column;
gap: 4px;
position: relative !important;
}
.form-group label[b-qbbcd9482r] {
font-size: 0.8rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.form-group label i[b-qbbcd9482r] {
margin-right: 6px;
color: #2563eb;
}
.combobox-container[b-qbbcd9482r] {
position: relative !important;
width: 100%;
}
.combobox-input[b-qbbcd9482r] {
width: 100%;
padding: 12px 44px 12px 14px !important;
height: 48px !important;
font-size: 0.95rem !important;
box-sizing: border-box;
border: 2px solid #e2e8f0;
border-radius: 10px;
transition: all 0.3s ease;
background: white;
color: #1f2937;
}
.combobox-input:focus[b-qbbcd9482r] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
.combobox-toggle[b-qbbcd9482r] {
position: absolute !important;
right: 4px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 38px !important;
height: 38px !important;
background: #f1f5f9 !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
color: #6b7280 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
z-index: 2 !important;
}
.combobox-toggle:hover[b-qbbcd9482r] {
background: #e2e8f0 !important;
color: #1f2937 !important;
}
.combobox-list-auto[b-qbbcd9482r] {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
max-height: 220px !important;
overflow-y: auto !important;
background: white !important;
border: 2px solid #e2e8f0 !important;
border-top: none !important;
border-radius: 0 0 10px 10px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
z-index: 999999 !important;
margin-top: 2px !important;
animation: comboboxSlideDown-b-qbbcd9482r 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes comboboxSlideDown-b-qbbcd9482r {
from {
opacity: 0;
transform: translateY(-8px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.combobox-item[b-qbbcd9482r] {
padding: 12px 16px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
font-size: 0.95rem !important;
color: #1f2937 !important;
font-weight: 500 !important;
}
.combobox-item:hover[b-qbbcd9482r] {
background: #eff6ff !important;
}
.combobox-item.disabled[b-qbbcd9482r] {
color: #a0aec0 !important;
cursor: default !important;
font-weight: 400 !important;
}
.combobox-item.disabled:hover[b-qbbcd9482r] {
background: transparent !important;
}
.text-muted[b-qbbcd9482r] {
font-size: 0.75rem;
color: #6b7280;
margin-top: 4px;
}
/* ========================================
18. MODAL - CONFIRMAR RENDICIΓN
======================================== */
.confirmar-resumen[b-qbbcd9482r] {
background: #f8fafc;
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 18px;
border: 1px solid #e2e8f0;
}
.confirmar-item[b-qbbcd9482r] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #e2e8f0;
}
.confirmar-item:last-child[b-qbbcd9482r] {
border-bottom: none;
}
.confirmar-label[b-qbbcd9482r] {
font-size: 0.8rem;
font-weight: 600;
color: #6b7280;
display: flex;
align-items: center;
gap: 6px;
}
.confirmar-label i[b-qbbcd9482r] {
color: #2563eb;
}
.confirmar-value[b-qbbcd9482r] {
font-size: 0.95rem;
font-weight: 700;
color: #1f2937;
}
.confirmar-diferencia.positivo .confirmar-value[b-qbbcd9482r] {
color: #22c55e;
}
.confirmar-diferencia.negativo .confirmar-value[b-qbbcd9482r] {
color: #ef4444;
}
.confirmar-aviso[b-qbbcd9482r] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: #fef3c7;
border-radius: 12px;
border: 1px solid #fcd34d;
margin-bottom: 16px;
}
.confirmar-aviso i[b-qbbcd9482r] {
color: #f59e0b;
font-size: 1.2rem;
}
.confirmar-aviso span[b-qbbcd9482r] {
font-size: 0.85rem;
font-weight: 500;
color: #92400e;
}
/* ========================================
19. MODAL OVERLAY Y CONTENEDOR
======================================== */
.modal-overlay[b-qbbcd9482r] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: fadeInModal-b-qbbcd9482r 0.3s ease;
padding: 40px 20px;
overflow-y: auto;
}
@keyframes fadeInModal-b-qbbcd9482r {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(12px);
}
}
.modal-content[b-qbbcd9482r] {
background: #ffffff;
border-radius: 20px;
max-width: 520px;
width: 90%;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
animation: slideUpModal-b-qbbcd9482r 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
margin: auto;
align-self: center;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: visible !important;
}
.modal-content.modal-confirmar[b-qbbcd9482r] {
max-width: 480px;
}
@keyframes slideUpModal-b-qbbcd9482r {
from {
transform: translateY(60px) scale(0.95);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.modal-header[b-qbbcd9482r] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 28px;
border-bottom: 2px solid #f1f5f9;
background: #f8fafc;
border-radius: 20px 20px 0 0;
}
.modal-header h4[b-qbbcd9482r] {
margin: 0;
color: #1f2937;
font-weight: 700;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 12px;
}
.modal-header h4 i[b-qbbcd9482r] {
color: #2563eb;
}
.btn-close-modal[b-qbbcd9482r] {
background: #f1f5f9;
border: none;
font-size: 1.1rem;
color: #6b7280;
cursor: pointer;
padding: 8px 12px;
border-radius: 10px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.btn-close-modal:hover[b-qbbcd9482r] {
background: #fee2e2;
color: #ef4444;
transform: rotate(90deg);
}
.modal-body[b-qbbcd9482r] {
padding: 24px 28px;
overflow: visible !important;
}
.modal-info[b-qbbcd9482r] {
background: #eff6ff;
padding: 14px 18px;
border-radius: 12px;
font-size: 0.85rem;
color: #1f2937;
margin-bottom: 18px;
border: 1px solid rgba(37, 99, 235, 0.15);
font-weight: 500;
}
.modal-info i[b-qbbcd9482r] {
color: #2563eb;
margin-right: 10px;
}
.modal-actions[b-qbbcd9482r] {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 16px;
padding-top: 16px;
border-top: 2px solid #f1f5f9;
}
.btn-modal[b-qbbcd9482r] {
padding: 10px 24px;
border: none;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.btn-modal-primary[b-qbbcd9482r] {
background: #2563eb;
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.btn-modal-primary:hover:not(:disabled)[b-qbbcd9482r] {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
.btn-modal-primary:disabled[b-qbbcd9482r] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-modal-secondary[b-qbbcd9482r] {
background: #f1f5f9;
color: #1f2937;
border: 2px solid #e2e8f0;
}
.btn-modal-secondary:hover[b-qbbcd9482r] {
background: #e2e8f0;
transform: translateY(-2px);
}
.spinner-border-sm[b-qbbcd9482r] {
width: 1.2rem;
height: 1.2rem;
border-width: 0.2em;
}
/* ========================================
MODAL FORM - CREAR PAQUETE
======================================== */
.modal-content-form[b-qbbcd9482r] {
max-width: 820px !important;
max-height: 95vh !important;
min-height: 70vh !important;
overflow: visible !important;
}
.modal-content-form .modal-body[b-qbbcd9482r] {
overflow: visible !important;
padding-bottom: 10px !important;
}
.modal-content-form .modal-actions[b-qbbcd9482r] {
position: sticky !important;
bottom: 0 !important;
background: white !important;
padding: 16px 24px !important;
border-top: 2px solid #f1f5f9 !important;
margin-top: 16px !important;
z-index: 10 !important;
}
.form-grid[b-qbbcd9482r] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-grid .full-width[b-qbbcd9482r] {
grid-column: 1 / -1;
}
.form-group .required[b-qbbcd9482r] {
color: #ef4444;
font-weight: 700;
}
.form-control[b-qbbcd9482r] {
padding: 10px 14px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.9rem;
background: white;
transition: all 0.3s ease;
color: #1f2937;
}
.form-control:focus[b-qbbcd9482r] {
border-color: #2563eb;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
transform: translateY(-1px);
}
.form-control:disabled[b-qbbcd9482r] {
background: #f1f5f9;
cursor: not-allowed;
opacity: 0.7;
}
select.form-control[b-qbbcd9482r] {
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
padding: 6px 12px !important;
box-sizing: border-box !important;
appearance: auto;
}
/* ========================================
COBROS ESPECIALES - ESTILOS
======================================== */
.btn-cobro-especial[b-qbbcd9482r] {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
color: white !important;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
}
.btn-cobro-especial:hover:not(:disabled)[b-qbbcd9482r] {
transform: translateY(-2px) !important;
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4) !important;
}
.btn-cobro-especial:disabled[b-qbbcd9482r] {
opacity: 0.6 !important;
cursor: not-allowed !important;
}
.cobros-especiales-section[b-qbbcd9482r] {
margin: 8px 0 12px 0;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 10px;
padding: 10px 14px;
}
.cobros-especiales-header[b-qbbcd9482r] {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
font-weight: 700;
color: #92400e;
margin-bottom: 6px;
}
.cobros-especiales-header i[b-qbbcd9482r] {
color: #f59e0b;
}
.cobros-total[b-qbbcd9482r] {
background: #fef3c7;
padding: 2px 10px;
border-radius: 12px;
font-size: 0.7rem;
}
.cobros-especiales-list[b-qbbcd9482r] {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 120px;
overflow-y: auto;
}
.cobro-item[b-qbbcd9482r] {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid #fde68a;
font-size: 0.7rem;
}
.cobro-info[b-qbbcd9482r] {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.cobro-cedula[b-qbbcd9482r] {
font-weight: 600;
color: #1f2937;
}
.cobro-cedula i[b-qbbcd9482r] {
color: #6b7280;
margin-right: 3px;
}
.cobro-viaticos[b-qbbcd9482r] {
color: #6b7280;
}
.cobro-viaticos i[b-qbbcd9482r] {
color: #6b7280;
margin-right: 3px;
}
.cobro-importe[b-qbbcd9482r] {
font-weight: 700;
color: #16a34a;
}
.cobro-obs[b-qbbcd9482r] {
color: #6b7280;
font-style: italic;
font-size: 0.65rem;
}
.cobro-obs i[b-qbbcd9482r] {
margin-right: 3px;
}
.btn-cobro-eliminar[b-qbbcd9482r] {
background: none;
border: none;
color: #ef4444;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: all 0.2s ease;
font-size: 0.8rem;
}
.btn-cobro-eliminar:hover[b-qbbcd9482r] {
background: #fee2e2;
transform: scale(1.1);
}
.cobros-especiales-list[b-qbbcd9482r]::-webkit-scrollbar {
width: 4px;
}
.cobros-especiales-list[b-qbbcd9482r]::-webkit-scrollbar-track {
background: #fef3c7;
border-radius: 2px;
}
.cobros-especiales-list[b-qbbcd9482r]::-webkit-scrollbar-thumb {
background: #f59e0b;
border-radius: 2px;
}
/* ========================================
20. RESPONSIVE
======================================== */
@media (max-width: 1280px) {
.resumen-card[b-qbbcd9482r] {
min-width: 120px;
padding: 12px 14px;
}
}
@media (max-width: 1200px) {
.seccion-rendicion-resumen[b-qbbcd9482r] {
grid-template-columns: 1fr;
}
.rendicion-grid[b-qbbcd9482r] {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 1024px) {
.seccion-cabecera[b-qbbcd9482r] {
flex-direction: column;
align-items: stretch;
}
.cabecera-izquierda[b-qbbcd9482r] {
flex-direction: column;
align-items: flex-start;
}
.cabecera-info[b-qbbcd9482r] {
border-left: none;
padding-left: 0;
}
.cabecera-derecha[b-qbbcd9482r] {
justify-content: space-between;
}
}
@media (max-width: 768px) {
.seccion-cabecera[b-qbbcd9482r] {
padding: 16px;
}
.cabecera-titulo h3[b-qbbcd9482r] {
font-size: 1.1rem;
}
.panel-toolbar[b-qbbcd9482r] {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.panel-toolbar-izquierda[b-qbbcd9482r] {
flex-wrap: wrap;
}
.buscador input[b-qbbcd9482r] {
width: 100%;
}
.rendicion-grid[b-qbbcd9482r] {
grid-template-columns: 1fr;
}
.detalle-estados[b-qbbcd9482r] {
grid-template-columns: 1fr 1fr;
}
.resumen-actions[b-qbbcd9482r] {
flex-direction: column;
}
.btn-limpiar-resumen[b-qbbcd9482r] {
flex: 1;
}
.table-rendicion[b-qbbcd9482r] {
font-size: 0.7rem;
}
.table-rendicion th[b-qbbcd9482r],
.table-rendicion td[b-qbbcd9482r] {
padding: 6px 8px;
max-width: 120px;
}
.modal-content[b-qbbcd9482r] {
width: 95%;
margin: 10px;
}
.modal-actions[b-qbbcd9482r] {
flex-direction: column;
}
.btn-modal[b-qbbcd9482r] {
justify-content: center;
}
.resumen-card[b-qbbcd9482r] {
min-width: 100px;
padding: 10px 12px;
}
.card-icon[b-qbbcd9482r] {
width: 32px;
height: 32px;
font-size: 0.9rem;
}
.card-value[b-qbbcd9482r] {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.resumen-cards[b-qbbcd9482r] {
gap: 8px;
}
.resumen-card[b-qbbcd9482r] {
min-width: 80px;
padding: 8px 10px;
}
.card-icon[b-qbbcd9482r] {
width: 28px;
height: 28px;
font-size: 0.75rem;
}
.card-value[b-qbbcd9482r] {
font-size: 0.85rem;
}
.card-label[b-qbbcd9482r] {
font-size: 0.55rem;
}
.detalle-estados[b-qbbcd9482r] {
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.detalle-item[b-qbbcd9482r] {
font-size: 0.7rem;
}
.modal-content[b-qbbcd9482r] {
max-width: 100%;
}
.modal-body[b-qbbcd9482r] {
padding: 16px;
}
.modal-header[b-qbbcd9482r] {
padding: 14px 16px;
}
.rendicion-panel[b-qbbcd9482r] {
padding: 16px;
}
.rendicion-columna[b-qbbcd9482r] {
padding: 12px;
}
.campo-rendicion .form-control[b-qbbcd9482r] {
width: 70px;
}
.btn-toolbar span[b-qbbcd9482r] {
display: none;
}
.btn-toolbar i[b-qbbcd9482r] {
font-size: 1.1rem;
}
.btn-panel span[b-qbbcd9482r] {
display: none;
}
.btn-panel i[b-qbbcd9482r] {
font-size: 1rem;
}
.combobox-input[b-qbbcd9482r] {
height: 44px !important;
font-size: 0.9rem !important;
padding: 10px 40px 10px 12px !important;
}
.combobox-toggle[b-qbbcd9482r] {
width: 34px !important;
height: 34px !important;
}
}
/* ========================================
21. SCROLLBAR GLOBAL
======================================== */
.rendicion-container [b-qbbcd9482r]::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.rendicion-container [b-qbbcd9482r]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.rendicion-container [b-qbbcd9482r]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.rendicion-container [b-qbbcd9482r]::-webkit-scrollbar-thumb:hover {
background: #2563eb;
}
/* /Pages/Logistica/Paqueteria_Reportes.razor.rz.scp.css */
/* ============================================================
π¦Ύ HEFESTO 13.0 PRO MAX - Paqueteria_Reportes.razor.css
π Archivo: Paqueteria_Reportes.razor.css
π
Fecha: 2026-08-28
π€ Autor: π¦Ύ Hefesto 13.0 Pro Max | Sr. Ignacio
π DescripciΓ³n: Estilos premium para reportes de paqueterΓa
============================================================ */
/* ===== 01. CONTENEDOR PRINCIPAL ===== */
.reportes-container[b-83chy01s6n] {
padding: 1.5rem;
background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
min-height: 100vh;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
/* ===== 02. LOADING ===== */
.reportes-loading[b-83chy01s6n] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: 1.5rem;
}
.reportes-loading-spinner[b-83chy01s6n] {
width: 60px;
height: 60px;
border: 4px solid #e2e8f0;
border-top: 4px solid #3B82F6;
border-right: 4px solid #8B5CF6;
border-radius: 50%;
animation: reportes-spin-b-83chy01s6n 0.8s linear infinite;
}
@keyframes reportes-spin-b-83chy01s6n {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.reportes-loading-text[b-83chy01s6n] {
color: #64748b;
font-size: 1.1rem;
font-weight: 500;
animation: reportes-pulse-text-b-83chy01s6n 1.5s ease-in-out infinite;
}
@keyframes reportes-pulse-text-b-83chy01s6n {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* ===== 03. TOOLBAR SUPERIOR ===== */
.reportes-toolbar[b-83chy01s6n] {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 0.75rem 1.5rem;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
margin-bottom: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: box-shadow 0.3s ease;
}
.reportes-toolbar:hover[b-83chy01s6n] {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.reportes-toolbar-left[b-83chy01s6n] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.reportes-toolbar-title[b-83chy01s6n] {
font-size: 1.35rem;
font-weight: 800;
margin: 0;
background: linear-gradient(135deg, #1a3a6b 0%, #3B82F6 50%, #8B5CF6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.5px;
}
.reportes-toolbar-center[b-83chy01s6n] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.reportes-toolbar-month[b-83chy01s6n] {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
padding: 0.4rem 1.2rem;
border-radius: 10px;
min-width: 160px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.reportes-toolbar-month-text[b-83chy01s6n] {
font-weight: 700;
color: #1e293b;
font-size: 0.95rem;
text-transform: capitalize;
letter-spacing: 0.3px;
}
.reportes-toolbar-btn[b-83chy01s6n] {
background: rgba(255, 255, 255, 0.8);
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 0.4rem 0.8rem;
cursor: pointer;
font-size: 1rem;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
color: #475569;
backdrop-filter: blur(4px);
}
.reportes-toolbar-btn:hover:not(:disabled)[b-83chy01s6n] {
background: #ffffff;
border-color: #3B82F6;
transform: scale(1.05) translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.reportes-toolbar-btn:disabled[b-83chy01s6n] {
opacity: 0.4;
cursor: not-allowed;
transform: none !important;
}
.reportes-toolbar-btn-month[b-83chy01s6n] {
font-size: 1.1rem;
font-weight: 700;
padding: 0.4rem 1rem;
}
.reportes-toolbar-btn-refresh[b-83chy01s6n] {
font-size: 1.1rem;
padding: 0.4rem 0.8rem;
}
.reportes-toolbar-btn-refresh:hover:not(:disabled)[b-83chy01s6n] {
animation: reportes-refresh-spin-b-83chy01s6n 0.6s ease;
}
@keyframes reportes-refresh-spin-b-83chy01s6n {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* ===== 03a. BOTΓN DESCARGA TODOS ===== */
.reportes-toolbar-btn-export-all[b-83chy01s6n] {
background: linear-gradient(135deg, #1a3a6b, #3B82F6);
color: white;
border: none;
padding: 0.5rem 1.4rem;
font-weight: 600;
font-size: 0.9rem;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
letter-spacing: 0.3px;
}
.reportes-toolbar-btn-export-all:hover:not(:disabled)[b-83chy01s6n] {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
background: linear-gradient(135deg, #1e4a8b, #4B8FF7);
}
.reportes-toolbar-btn-export-all:disabled[b-83chy01s6n] {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.reportes-toolbar-right[b-83chy01s6n] {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.reportes-toolbar-filter[b-83chy01s6n] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.reportes-toolbar-label[b-83chy01s6n] {
font-size: 0.85rem;
font-weight: 600;
color: #475569;
white-space: nowrap;
}
.reportes-toolbar-select[b-83chy01s6n] {
padding: 0.4rem 0.8rem;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
font-size: 0.9rem;
background: white;
min-width: 180px;
color: #1e293b;
cursor: pointer;
transition: all 0.25s ease;
font-weight: 500;
}
.reportes-toolbar-select:focus[b-83chy01s6n] {
outline: none;
border-color: #3B82F6;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}
.reportes-toolbar-select:disabled[b-83chy01s6n] {
opacity: 0.6;
cursor: not-allowed;
background: #f1f5f9;
}
/* ===== 04. SECCIONES ===== */
.reportes-section[b-83chy01s6n] {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(255, 255, 255, 0.3);
margin-bottom: 1.5rem;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.reportes-section:hover[b-83chy01s6n] {
box-shadow: 0 8px 35px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.reportes-section-header[b-83chy01s6n] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1.5rem;
cursor: pointer;
user-select: none;
transition: all 0.25s ease;
border-bottom: 1px solid rgba(241, 245, 249, 0.8);
}
.reportes-section-header:hover[b-83chy01s6n] {
background: rgba(248, 250, 252, 0.7);
}
.reportes-section-header-left[b-83chy01s6n] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.reportes-section-header-right[b-83chy01s6n] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.reportes-section-icon[b-83chy01s6n] {
font-size: 1.6rem;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
transition: transform 0.3s ease;
}
.reportes-section-header:hover .reportes-section-icon[b-83chy01s6n] {
transform: scale(1.1) rotate(-5deg);
}
.reportes-section-title[b-83chy01s6n] {
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
margin: 0;
letter-spacing: -0.2px;
}
.reportes-section-status[b-83chy01s6n] {
font-size: 0.8rem;
color: #94a3b8;
font-weight: 500;
}
.reportes-section-export-btn[b-83chy01s6n] {
background: linear-gradient(135deg, #10B981, #059669);
color: white;
border: none;
padding: 0.4rem 1.2rem;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
letter-spacing: 0.2px;
}
.reportes-section-export-btn:hover:not(:disabled)[b-83chy01s6n] {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
background: linear-gradient(135deg, #14B87A, #047857);
}
.reportes-section-export-btn:disabled[b-83chy01s6n] {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.reportes-section-expand[b-83chy01s6n] {
font-size: 0.8rem;
color: #94a3b8;
transition: all 0.35s ease;
min-width: 20px;
text-align: center;
font-weight: 700;
}
.reportes-section-body[b-83chy01s6n] {
padding: 1.25rem;
animation: reportes-slide-down-b-83chy01s6n 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes reportes-slide-down-b-83chy01s6n {
0% {
opacity: 0;
transform: translateY(-12px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ===== 05. TARJETAS DE RESUMEN ===== */
.reportes-cards[b-83chy01s6n] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.reportes-card[b-83chy01s6n] {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.1rem 1.25rem;
background: rgba(248, 250, 252, 0.8);
backdrop-filter: blur(4px);
border-radius: 14px;
border: 1px solid rgba(226, 232, 240, 0.6);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.reportes-card:hover[b-83chy01s6n] {
transform: translateY(-4px) scale(1.01);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
}
.reportes-card-icon[b-83chy01s6n] {
font-size: 1.8rem;
opacity: 0.85;
line-height: 1;
transition: transform 0.3s ease;
}
.reportes-card:hover .reportes-card-icon[b-83chy01s6n] {
transform: scale(1.1) rotate(-3deg);
}
.reportes-card-content[b-83chy01s6n] {
display: flex;
flex-direction: column;
flex: 1;
}
.reportes-card-value[b-83chy01s6n] {
font-size: 1.6rem;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
letter-spacing: -0.5px;
}
.reportes-card-label[b-83chy01s6n] {
font-size: 0.7rem;
color: #64748b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ===== 05a. COLORES DE TARJETAS ===== */
.reportes-card-blue[b-83chy01s6n] {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-color: #93c5fd;
}
.reportes-card-blue .reportes-card-value[b-83chy01s6n] {
color: #1d4ed8;
}
.reportes-card-green[b-83chy01s6n] {
background: linear-gradient(135deg, #ecfdf5, #d1fae5);
border-color: #6ee7b7;
}
.reportes-card-green .reportes-card-value[b-83chy01s6n] {
color: #059669;
}
.reportes-card-orange[b-83chy01s6n] {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-color: #fcd34d;
}
.reportes-card-orange .reportes-card-value[b-83chy01s6n] {
color: #d97706;
}
.reportes-card-purple[b-83chy01s6n] {
background: linear-gradient(135deg, #f5f3ff, #ede9fe);
border-color: #c4b5fd;
}
.reportes-card-purple .reportes-card-value[b-83chy01s6n] {
color: #7c3aed;
}
.reportes-card-red[b-83chy01s6n] {
background: linear-gradient(135deg, #fef2f2, #fecaca);
border-color: #fca5a5;
}
.reportes-card-red .reportes-card-value[b-83chy01s6n] {
color: #dc2626;
}
.reportes-card-pink[b-83chy01s6n] {
background: linear-gradient(135deg, #fdf2f8, #fbcfe8);
border-color: #f9a8d4;
}
.reportes-card-pink .reportes-card-value[b-83chy01s6n] {
color: #db2777;
}
.reportes-card-indigo[b-83chy01s6n] {
background: linear-gradient(135deg, #eef2ff, #c7d2fe);
border-color: #a5b4fc;
}
.reportes-card-indigo .reportes-card-value[b-83chy01s6n] {
color: #4f46e5;
}
/* ===== 06. TABLAS ===== */
.reportes-table-wrapper[b-83chy01s6n] {
overflow-x: auto;
border-radius: 12px;
border: 1px solid #e2e8f0;
margin-bottom: 1rem;
background: white;
}
.reportes-table-wrapper:last-child[b-83chy01s6n] {
margin-bottom: 0;
}
.reportes-table-wrapper-small[b-83chy01s6n] {
max-width: 600px;
}
.reportes-table[b-83chy01s6n] {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
min-width: 600px;
}
.reportes-table thead[b-83chy01s6n] {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}
.reportes-table thead th[b-83chy01s6n] {
padding: 0.7rem 0.8rem;
text-align: left;
font-weight: 700;
color: #1e293b;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid #d1d5db;
white-space: nowrap;
position: sticky;
top: 0;
background: #f1f5f9;
z-index: 1;
}
.reportes-table tbody td[b-83chy01s6n] {
padding: 0.5rem 0.8rem;
border-bottom: 1px solid #f1f5f9;
color: #334155;
transition: all 0.15s ease;
}
.reportes-table tbody tr[b-83chy01s6n] {
transition: background 0.2s ease;
}
.reportes-table tbody tr:hover td[b-83chy01s6n] {
background: rgba(59, 130, 246, 0.04);
}
.reportes-table tbody tr:last-child td[b-83chy01s6n] {
border-bottom: none;
}
.reportes-table tfoot[b-83chy01s6n] {
background: linear-gradient(135deg, #f8fafc, #eef2f7);
font-weight: 700;
border-top: 2px solid #d1d5db;
}
.reportes-table tfoot th[b-83chy01s6n] {
padding: 0.6rem 0.8rem;
color: #0f172a;
font-size: 0.8rem;
}
.reportes-table tfoot td[b-83chy01s6n] {
padding: 0.6rem 0.8rem;
color: #0f172a;
font-weight: 700;
}
/* ===== 06a. CELDAS ESPECIALES ===== */
.reportes-table-cell-bold[b-83chy01s6n] {
font-weight: 700;
color: #0f172a;
}
.reportes-table-empty[b-83chy01s6n] {
text-align: center;
padding: 2.5rem !important;
color: #94a3b8;
font-style: italic;
font-size: 0.9rem;
}
/* ===== 07. TABLAS ESPECΓFICAS ===== */
/* === 07a. Pedidos por chofer === */
.reportes-table-pedidos tbody td:nth-child(3)[b-83chy01s6n],
.reportes-table-pedidos tbody td:nth-child(4)[b-83chy01s6n],
.reportes-table-pedidos tbody td:nth-child(5)[b-83chy01s6n] {
text-align: center;
}
/* === 07b. Detalle de pedidos === */
.reportes-table-detalle tbody td:not(:first-child)[b-83chy01s6n] {
text-align: center;
}
.reportes-table-detalle tfoot th[b-83chy01s6n] {
text-align: center;
}
/* === 07c. RendiciΓ³n === */
.reportes-table-rendicion tbody td:not(:first-child)[b-83chy01s6n] {
text-align: center;
}
/* === 07d. Cobros especiales === */
.reportes-table-cobros tbody td:not(:first-child)[b-83chy01s6n] {
text-align: right;
}
.reportes-table-cobros tfoot th[b-83chy01s6n] {
text-align: right;
}
/* === 07e. LiquidaciΓ³n personal === */
.reportes-table-liquidacion-personal tbody td:not(:first-child)[b-83chy01s6n] {
text-align: center;
}
/* === 07f. LiquidaciΓ³n CDLC === */
.reportes-table-liquidacion-cdlc tbody td:not(:first-child)[b-83chy01s6n] {
text-align: center;
}
/* === 07g. LiquidaciΓ³n Hora Auto === */
.reportes-table-liquidacion-hora-auto tbody td:not(:first-child)[b-83chy01s6n] {
text-align: center;
}
/* === 07h. LiquidaciΓ³n Salinas === */
.reportes-table-liquidacion-salinas tbody td:not(:first-child)[b-83chy01s6n] {
text-align: center;
}
/* ===== 08. COLORES POR TIPO DE SECCIΓN (BORDE IZQUIERDO) ===== */
.reportes-section-pedidos .reportes-section-header[b-83chy01s6n] {
border-left: 5px solid #3B82F6;
}
.reportes-section-pedidos .reportes-section-header:hover[b-83chy01s6n] {
border-left-color: #2563EB;
}
.reportes-section-rendicion .reportes-section-header[b-83chy01s6n] {
border-left: 5px solid #8B5CF6;
}
.reportes-section-rendicion .reportes-section-header:hover[b-83chy01s6n] {
border-left-color: #7C3AED;
}
.reportes-section-cobros .reportes-section-header[b-83chy01s6n] {
border-left: 5px solid #F59E0B;
}
.reportes-section-cobros .reportes-section-header:hover[b-83chy01s6n] {
border-left-color: #D97706;
}
.reportes-section-liquidacion-personal .reportes-section-header[b-83chy01s6n] {
border-left: 5px solid #10B981;
}
.reportes-section-liquidacion-personal .reportes-section-header:hover[b-83chy01s6n] {
border-left-color: #059669;
}
.reportes-section-liquidacion-cdlc .reportes-section-header[b-83chy01s6n] {
border-left: 5px solid #06B6D4;
}
.reportes-section-liquidacion-cdlc .reportes-section-header:hover[b-83chy01s6n] {
border-left-color: #0891B2;
}
.reportes-section-liquidacion-hora-auto .reportes-section-header[b-83chy01s6n] {
border-left: 5px solid #EF4444;
}
.reportes-section-liquidacion-hora-auto .reportes-section-header:hover[b-83chy01s6n] {
border-left-color: #DC2626;
}
.reportes-section-liquidacion-salinas .reportes-section-header[b-83chy01s6n] {
border-left: 5px solid #F97316;
}
.reportes-section-liquidacion-salinas .reportes-section-header:hover[b-83chy01s6n] {
border-left-color: #EA580C;
}
/* ===== 09. RESPONSIVE ===== */
/* Tablets y pantallas medianas */
@media screen and (max-width: 1024px) {
.reportes-toolbar[b-83chy01s6n] {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
padding: 1rem 1.25rem;
}
.reportes-toolbar-left[b-83chy01s6n] {
justify-content: center;
}
.reportes-toolbar-center[b-83chy01s6n] {
justify-content: center;
}
.reportes-toolbar-right[b-83chy01s6n] {
justify-content: center;
flex-wrap: wrap;
}
.reportes-toolbar-filter[b-83chy01s6n] {
flex-wrap: wrap;
justify-content: center;
}
.reportes-cards[b-83chy01s6n] {
grid-template-columns: repeat(2, 1fr);
}
.reportes-section-body[b-83chy01s6n] {
padding: 1rem;
overflow-x: auto;
}
}
/* MΓ³viles */
@media screen and (max-width: 640px) {
.reportes-container[b-83chy01s6n] {
padding: 0.75rem;
}
.reportes-toolbar[b-83chy01s6n] {
padding: 0.75rem 1rem;
border-radius: 12px;
}
.reportes-toolbar-title[b-83chy01s6n] {
font-size: 1rem;
}
.reportes-toolbar-month[b-83chy01s6n] {
min-width: 120px;
padding: 0.3rem 0.8rem;
border-radius: 8px;
}
.reportes-toolbar-month-text[b-83chy01s6n] {
font-size: 0.85rem;
}
.reportes-toolbar-select[b-83chy01s6n] {
min-width: 140px;
font-size: 0.8rem;
}
.reportes-toolbar-btn-export-all[b-83chy01s6n] {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
.reportes-cards[b-83chy01s6n] {
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
.reportes-card[b-83chy01s6n] {
padding: 0.75rem 1rem;
flex-direction: column;
text-align: center;
gap: 0.25rem;
border-radius: 12px;
}
.reportes-card-icon[b-83chy01s6n] {
font-size: 1.4rem;
}
.reportes-card-value[b-83chy01s6n] {
font-size: 1.2rem;
}
.reportes-section-header[b-83chy01s6n] {
padding: 0.6rem 1rem;
flex-wrap: wrap;
gap: 0.5rem;
border-radius: 0;
}
.reportes-section-header-left[b-83chy01s6n] {
gap: 0.4rem;
}
.reportes-section-title[b-83chy01s6n] {
font-size: 0.9rem;
}
.reportes-section-export-btn[b-83chy01s6n] {
font-size: 0.7rem;
padding: 0.3rem 0.7rem;
border-radius: 8px;
}
.reportes-section-body[b-83chy01s6n] {
padding: 0.75rem;
}
.reportes-table[b-83chy01s6n] {
font-size: 0.7rem;
min-width: 500px;
}
.reportes-table thead th[b-83chy01s6n] {
padding: 0.4rem 0.5rem;
font-size: 0.6rem;
}
.reportes-table tbody td[b-83chy01s6n] {
padding: 0.35rem 0.5rem;
}
.reportes-table tfoot th[b-83chy01s6n],
.reportes-table tfoot td[b-83chy01s6n] {
padding: 0.4rem 0.5rem;
font-size: 0.65rem;
}
.reportes-table-wrapper-small[b-83chy01s6n] {
max-width: 100%;
}
}
/* MΓ³viles muy pequeΓ±os */
@media screen and (max-width: 400px) {
.reportes-cards[b-83chy01s6n] {
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
}
.reportes-card[b-83chy01s6n] {
padding: 0.5rem 0.6rem;
border-radius: 10px;
}
.reportes-card-value[b-83chy01s6n] {
font-size: 1rem;
}
.reportes-card-label[b-83chy01s6n] {
font-size: 0.55rem;
}
.reportes-toolbar-btn[b-83chy01s6n] {
padding: 0.3rem 0.5rem;
font-size: 0.8rem;
border-radius: 8px;
}
.reportes-toolbar-filter[b-83chy01s6n] {
flex-direction: column;
gap: 0.25rem;
align-items: stretch;
}
.reportes-toolbar-label[b-83chy01s6n] {
text-align: center;
}
}
/* ===== 10. SCROLLBAR PERSONALIZADA ===== */
.reportes-table-wrapper[b-83chy01s6n]::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.reportes-table-wrapper[b-83chy01s6n]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.reportes-table-wrapper[b-83chy01s6n]::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #cbd5e1, #94a3b8);
border-radius: 4px;
transition: background 0.3s ease;
}
.reportes-table-wrapper[b-83chy01s6n]::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #94a3b8, #64748b);
}
/* ===== 11. IMPRESIΓN ===== */
@media print {
.reportes-toolbar[b-83chy01s6n] {
display: none !important;
}
.reportes-section-export-btn[b-83chy01s6n] {
display: none !important;
}
.reportes-section-expand[b-83chy01s6n] {
display: none !important;
}
.reportes-section[b-83chy01s6n] {
break-inside: avoid;
border: 1px solid #ddd !important;
box-shadow: none !important;
background: white !important;
backdrop-filter: none !important;
transform: none !important;
}
.reportes-section-header[b-83chy01s6n] {
cursor: default !important;
background: #f5f5f5 !important;
}
.reportes-card[b-83chy01s6n] {
break-inside: avoid;
border: 1px solid #ddd !important;
box-shadow: none !important;
transform: none !important;
}
.reportes-container[b-83chy01s6n] {
padding: 0.5rem;
background: white !important;
}
.reportes-table-wrapper[b-83chy01s6n] {
border: 1px solid #ddd;
}
.reportes-table thead[b-83chy01s6n] {
background: #f5f5f5 !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.reportes-table tfoot[b-83chy01s6n] {
background: #f5f5f5 !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.reportes-table tbody tr:hover td[b-83chy01s6n] {
background: transparent !important;
}
.reportes-card-blue[b-83chy01s6n],
.reportes-card-green[b-83chy01s6n],
.reportes-card-orange[b-83chy01s6n],
.reportes-card-purple[b-83chy01s6n],
.reportes-card-red[b-83chy01s6n],
.reportes-card-pink[b-83chy01s6n],
.reportes-card-indigo[b-83chy01s6n] {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.reportes-section-pedidos .reportes-section-header[b-83chy01s6n],
.reportes-section-rendicion .reportes-section-header[b-83chy01s6n],
.reportes-section-cobros .reportes-section-header[b-83chy01s6n],
.reportes-section-liquidacion-personal .reportes-section-header[b-83chy01s6n],
.reportes-section-liquidacion-cdlc .reportes-section-header[b-83chy01s6n],
.reportes-section-liquidacion-hora-auto .reportes-section-header[b-83chy01s6n],
.reportes-section-liquidacion-salinas .reportes-section-header[b-83chy01s6n] {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
/* /Pages/RRHH/RRHH_ColaboradoresListar.razor.rz.scp.css */
/* ========================================
π¦Ύ HEFESTO 13.1 PRO MAX β RRHH COLABORADORES
VersiΓ³n DOPAMΓNICA + COLOROMETRΓA
======================================== */
/* ========================================
01. CONTENEDOR PRINCIPAL
======================================== */
.colaboradores-container[b-1fwd0vml4m] {
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
padding: 28px;
background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.06) 0%, transparent 40%), radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.05) 0%, transparent 40%), #f8fafc;
min-height: 100vh;
animation: fadeInPage-b-1fwd0vml4m 0.4s ease;
}
@keyframes fadeInPage-b-1fwd0vml4m {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
02. TOOLBAR
======================================== */
.herramientas-colaboradores[b-1fwd0vml4m] {
background: #ffffff;
border-radius: 20px;
padding: 24px 28px;
box-shadow: 0 8px 32px rgba(26, 58, 107, 0.08);
margin-bottom: 24px;
border: 1px solid rgba(139, 92, 246, 0.08);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
overflow: hidden;
}
.herramientas-colaboradores[b-1fwd0vml4m]::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.herramientas-colaboradores:hover[b-1fwd0vml4m] {
box-shadow: 0 12px 44px rgba(26, 58, 107, 0.14);
}
/* ========================================
03. INDICADORES
======================================== */
.row-indicadores-wrapper[b-1fwd0vml4m] {
position: relative;
width: 100%;
}
.row-indicadores-scroll[b-1fwd0vml4m] {
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.row-indicadores-scroll[b-1fwd0vml4m]::-webkit-scrollbar {
height: 8px;
}
.row-indicadores-scroll[b-1fwd0vml4m]::-webkit-scrollbar-track {
background: linear-gradient(90deg, #f1f5f9, #fef3c7);
border-radius: 10px;
}
.row-indicadores-scroll[b-1fwd0vml4m]::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, #8b5cf6, #ec4899);
border-radius: 10px;
transition: all 0.3s ease;
}
.row-indicadores-scroll[b-1fwd0vml4m]::-webkit-scrollbar-thumb:hover {
background: linear-gradient(90deg, #7c3aed, #db2777);
}
.row-indicadores[b-1fwd0vml4m] {
display: flex;
gap: 10px;
min-width: max-content;
padding: 4px 0;
}
.indicador[b-1fwd0vml4m] {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 16px;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
border-radius: 14px;
border: 1px solid #e2e8f0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
min-width: 88px;
flex-shrink: 0;
}
.indicador[b-1fwd0vml4m]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 14px 14px 0 0;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
}
.indicador:nth-child(1)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.indicador:nth-child(2)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #16a34a, #4ade80);
}
.indicador:nth-child(3)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #dc2626, #f87171);
}
.indicador:nth-child(4)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #d97706, #fbbf24);
}
.indicador:nth-child(5)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
.indicador:nth-child(6)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #475569, #94a3b8);
}
.indicador:nth-child(7)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}
.indicador:nth-child(8)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #6366f1, #818cf8);
}
.indicador:nth-child(9)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #8b5cf6, #c084fc);
}
.indicador:nth-child(10)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #10b981, #34d399);
}
.indicador:nth-child(11)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #06b6d4, #22d3ee);
}
.indicador:nth-child(12)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #ec4899, #f472b6);
}
.indicador:nth-child(13)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #f97316, #fb923c);
}
.indicador:nth-child(14)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #84cc16, #a3e635);
}
.indicador:nth-child(15)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #14b8a6, #2dd4bf);
}
.indicador:nth-child(16)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #d946ef, #e879f9);
}
.indicador:nth-child(17)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #f472b6, #f9a8d4);
}
.indicador:nth-child(18)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #fb923c, #fdba74);
}
.indicador:nth-child(19)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #ef4444, #f87171);
}
.indicador:nth-child(20)[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #a78bfa, #c4b5fd);
}
.indicador-separador[b-1fwd0vml4m] {
width: 3px;
min-width: 3px;
background: linear-gradient(180deg, transparent, #cbd5e1, transparent);
border-radius: 4px;
margin: 4px 4px;
flex-shrink: 0;
}
.indicador:hover[b-1fwd0vml4m] {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-color: #cbd5e1;
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
transform: translateY(-3px) scale(1.02);
}
.indicador-numero[b-1fwd0vml4m] {
font-size: 24px;
font-weight: 800;
background: linear-gradient(135deg, #1e293b, #334155);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
letter-spacing: -0.5px;
}
.indicador-etiqueta[b-1fwd0vml4m] {
font-size: 10px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 2px;
text-align: center;
white-space: nowrap;
}
/* ========================================
04. BOTONES DE ACCIΓN
======================================== */
.row-botones[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.btn-primario[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);
color: #ffffff;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
position: relative;
overflow: hidden;
letter-spacing: 0.3px;
}
.btn-primario[b-1fwd0vml4m]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.4) 50%, transparent 80%);
transform: translateX(-120%);
transition: transform 0.6s ease;
}
.btn-primario:hover[b-1fwd0vml4m]::before {
transform: translateX(120%);
}
.btn-primario:hover[b-1fwd0vml4m] {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 12px 28px rgba(124, 58, 237, 0.5);
}
.btn-secundario[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
background: linear-gradient(135deg, #10b981, #34d399);
color: #ffffff;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.32);
letter-spacing: 0.3px;
}
.btn-secundario:hover[b-1fwd0vml4m] {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 12px 28px rgba(16, 185, 129, 0.5);
}
.separador[b-1fwd0vml4m] {
width: 2px;
height: 32px;
background: linear-gradient(180deg, transparent, #e2e8f0, transparent);
margin: 0 8px;
}
.btn-vista[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: #ffffff;
color: #64748b;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-vista:hover[b-1fwd0vml4m] {
background: #f8fafc;
transform: translateY(-2px);
border-color: #cbd5e1;
}
.btn-vista.activo[b-1fwd0vml4m] {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #ffffff;
border-color: transparent;
box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
}
.icono[b-1fwd0vml4m] {
font-style: normal;
font-size: 16px;
line-height: 1;
}
/* ========================================
05. FILTROS
======================================== */
.row-filtros[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-top: 16px;
border-top: 1px solid rgba(139, 92, 246, 0.08);
}
.filtro-busqueda[b-1fwd0vml4m] {
flex: 1;
min-width: 220px;
}
.input-buscar[b-1fwd0vml4m] {
width: 100%;
padding: 11px 16px 11px 42px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 14px;
color: #1f2937;
background: #ffffff;
transition: all 0.3s ease;
box-sizing: border-box;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 14px center;
background-size: 16px;
}
.input-buscar:focus[b-1fwd0vml4m] {
outline: none;
border-color: #8b5cf6;
box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.12);
}
.filtro-select[b-1fwd0vml4m] {
min-width: 150px;
}
.select-filtro[b-1fwd0vml4m] {
width: 100%;
padding: 11px 16px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 14px;
color: #1f2937;
background: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
.select-filtro:focus[b-1fwd0vml4m] {
outline: none;
border-color: #8b5cf6;
box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.12);
}
/* π SELECT DE CLIENTE con color diferenciado */
.select-cliente[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-color: #f59e0b;
color: #92400e;
font-weight: 600;
}
.select-cliente:focus[b-1fwd0vml4m] {
border-color: #d97706;
box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.15);
}
.btn-actualizar[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
background: linear-gradient(135deg, #0ea5e9, #22d3ee);
color: #ffffff;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
}
.btn-actualizar:hover[b-1fwd0vml4m] {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 10px 24px rgba(14, 165, 233, 0.45);
}
.btn-actualizar:active[b-1fwd0vml4m] {
transform: scale(0.96) rotate(180deg);
}
/* ========================================
06. ESTADOS DE CARGA Y ERROR
======================================== */
.cargando[b-1fwd0vml4m] {
display: flex;
justify-content: center;
align-items: center;
padding: 60px 20px;
background: #ffffff;
border-radius: 20px;
color: #8b5cf6;
font-size: 16px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.08);
position: relative;
}
.cargando[b-1fwd0vml4m]::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 30%;
background: linear-gradient(90deg, #8b5cf6, #ec4899, #8b5cf6);
border-radius: 3px;
animation: cargandoBar-b-1fwd0vml4m 1.5s ease-in-out infinite;
}
@keyframes cargandoBar-b-1fwd0vml4m {
0%, 100% {
width: 20%;
left: 0;
}
50% {
width: 60%;
left: 40%;
}
}
.alert-error[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border: 2px solid #fca5a5;
border-radius: 16px;
color: #991b1b;
font-weight: 700;
font-size: 15px;
animation: shakeError-b-1fwd0vml4m 0.4s ease;
}
@keyframes shakeError-b-1fwd0vml4m {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-6px);
}
75% {
transform: translateX(6px);
}
}
/* ========================================
07. VISTA MOSAICO
======================================== */
.mosaico-colaboradores[b-1fwd0vml4m] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 20px;
}
.tarjeta-colaborador[b-1fwd0vml4m] {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
border: 1px solid #f1f5f9;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
}
.tarjeta-colaborador[b-1fwd0vml4m]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #8b5cf6, #ec4899, #f97316, #fbbf24);
background-size: 300% 100%;
animation: rainbowSlide-b-1fwd0vml4m 6s linear infinite;
z-index: 2;
}
@keyframes rainbowSlide-b-1fwd0vml4m {
0% {
background-position: 0% 50%;
}
100% {
background-position: 300% 50%;
}
}
.tarjeta-colaborador:hover[b-1fwd0vml4m] {
transform: translateY(-8px) scale(1.01);
box-shadow: 0 24px 48px rgba(139, 92, 246, 0.18);
border-color: #c4b5fd;
}
.tarjeta-foto[b-1fwd0vml4m] {
display: flex;
justify-content: center;
align-items: center;
padding: 32px 20px 24px;
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #fae8ff 100%);
position: relative;
}
.tarjeta-foto img[b-1fwd0vml4m] {
width: 88px;
height: 88px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #ffffff;
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.2);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tarjeta-colaborador:hover .tarjeta-foto img[b-1fwd0vml4m] {
transform: scale(1.08) rotate(-3deg);
}
/* ========================================
08. BADGES EN MOSAICO
======================================== */
.badge-estado[b-1fwd0vml4m] {
position: absolute;
top: 20px;
right: 20px;
padding: 6px 14px;
border-radius: 22px;
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.6px;
background: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.badge-estado.activo[b-1fwd0vml4m] {
color: #166534;
border: 1.5px solid #86efac;
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
}
.badge-estado.inactivo[b-1fwd0vml4m] {
color: #991b1b;
border: 1.5px solid #fca5a5;
background: linear-gradient(135deg, #fee2e2, #fecaca);
}
.badge-estado.licencia[b-1fwd0vml4m] {
color: #92400e;
border: 1.5px solid #fcd34d;
background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.badge-estado.suspendido[b-1fwd0vml4m] {
color: #5b21b6;
border: 1.5px solid #c4b5fd;
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
}
.badge-estado.egresado[b-1fwd0vml4m] {
color: #374151;
border: 1.5px solid #d1d5db;
background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
/* π BADGE DE CLIENTES (esquina superior izquierda) */
.badge-clientes[b-1fwd0vml4m] {
position: absolute;
top: 20px;
left: 20px;
padding: 6px 12px;
border-radius: 22px;
font-size: 11px;
font-weight: 800;
color: #ffffff;
background: linear-gradient(135deg, #ec4899, #db2777, #be185d);
box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4);
display: inline-flex;
align-items: center;
gap: 4px;
animation: pulseBadge-b-1fwd0vml4m 2.4s ease-in-out infinite;
letter-spacing: 0.5px;
}
.badge-clientes i[b-1fwd0vml4m] {
font-size: 10px;
}
@keyframes pulseBadge-b-1fwd0vml4m {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 6px 22px rgba(236, 72, 153, 0.65);
}
}
.tarjeta-info[b-1fwd0vml4m] {
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.nombre-completo[b-1fwd0vml4m] {
font-size: 18px;
font-weight: 800;
color: #1e293b;
margin: 0;
line-height: 1.2;
letter-spacing: -0.3px;
}
.datos-personales[b-1fwd0vml4m] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dato[b-1fwd0vml4m] {
display: flex;
flex-direction: column;
background: linear-gradient(135deg, #f8fafc, #ffffff);
padding: 8px 12px;
border-radius: 10px;
border: 1px solid #f1f5f9;
min-width: 80px;
flex: 1;
transition: all 0.25s ease;
}
.dato:hover[b-1fwd0vml4m] {
border-color: #c4b5fd;
background: linear-gradient(135deg, #ffffff, #faf5ff);
transform: translateY(-1px);
}
.dato-etiqueta[b-1fwd0vml4m] {
font-size: 9.5px;
font-weight: 800;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.dato-valor[b-1fwd0vml4m] {
font-size: 13px;
font-weight: 700;
color: #334155;
margin-top: 2px;
}
/* ========================================
09. π CHIPS DE CLIENTES (lo nuevo DOPAMΓNICO)
======================================== */
.tarjeta-clientes-preview[b-1fwd0vml4m] {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: 8px;
border-top: 1px dashed #e2e8f0;
}
.chip-cliente[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
cursor: default;
white-space: nowrap;
}
.chip-mini[b-1fwd0vml4m] {
font-size: 9.5px;
padding: 4px 10px;
}
.chip-tabla[b-1fwd0vml4m] {
font-size: 9px;
padding: 3px 9px;
}
.chip-lg[b-1fwd0vml4m] {
font-size: 11px;
padding: 6px 14px;
gap: 6px;
}
.chip-mas[b-1fwd0vml4m] {
background: linear-gradient(135deg, #64748b, #94a3b8);
color: #ffffff;
}
.chip-sin[b-1fwd0vml4m] {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #64748b;
font-style: italic;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
/* Paleta de colores por cliente (hash simple por nombre) */
.chip-cliente[data-cliente="FARMASHOP"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #fff;
box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}
.chip-cliente[data-cliente="CASMU"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #0ea5e9, #38bdf8);
color: #fff;
box-shadow: 0 3px 10px rgba(14, 165, 233, 0.3);
}
.chip-cliente[data-cliente="HANDY"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #8b5cf6, #a78bfa);
color: #fff;
box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
}
.chip-cliente[data-cliente="TORNO METAL"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #475569, #94a3b8);
color: #fff;
box-shadow: 0 3px 10px rgba(71, 85, 105, 0.3);
}
.chip-cliente[data-cliente="BELA 05"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #ec4899, #f472b6);
color: #fff;
box-shadow: 0 3px 10px rgba(236, 72, 153, 0.3);
}
.chip-cliente[data-cliente="DHL"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #fff;
box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3);
}
.chip-cliente[data-cliente="FNR"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #16a34a, #4ade80);
color: #fff;
box-shadow: 0 3px 10px rgba(22, 163, 74, 0.3);
}
.chip-cliente[data-cliente="GUSTAVO POSE"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #0d9488, #14b8a6);
color: #fff;
box-shadow: 0 3px 10px rgba(13, 148, 136, 0.3);
}
.chip-cliente[data-cliente="PORTISUR"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: #fff;
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
}
.chip-cliente[data-cliente="GRIDO"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #f97316, #fb923c);
color: #fff;
box-shadow: 0 3px 10px rgba(249, 115, 22, 0.3);
}
.chip-cliente[data-cliente="Grenles"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #7c3aed, #a78bfa);
color: #fff;
box-shadow: 0 3px 10px rgba(124, 58, 237, 0.3);
}
.chip-cliente[data-cliente="OTROS"][b-1fwd0vml4m] {
background: linear-gradient(135deg, #64748b, #94a3b8);
color: #fff;
box-shadow: 0 3px 10px rgba(100, 116, 139, 0.3);
}
/* Default para clientes no mapeados */
.chip-cliente:not([data-cliente="FARMASHOP"]):not([data-cliente="CASMU"]):not([data-cliente="HANDY"]):not([data-cliente="TORNO METAL"]):not([data-cliente="BELA 05"]):not([data-cliente="DHL"]):not([data-cliente="FNR"]):not([data-cliente="GUSTAVO POSE"]):not([data-cliente="PORTISUR"]):not([data-cliente="GRIDO"]):not([data-cliente="Grenles"]):not([data-cliente="OTROS"]):not(.chip-sin):not(.chip-mas)[b-1fwd0vml4m] {
background: linear-gradient(135deg, #06b6d4, #22d3ee);
color: #ffffff;
box-shadow: 0 3px 10px rgba(6, 182, 212, 0.3);
}
.chip-cliente:hover[b-1fwd0vml4m] {
transform: translateY(-2px) scale(1.05);
filter: brightness(1.08);
}
.chip-removible[b-1fwd0vml4m] {
cursor: pointer;
padding-right: 8px;
}
.chip-remove[b-1fwd0vml4m] {
margin-left: 4px;
font-size: 9px;
opacity: 0.7;
cursor: pointer;
transition: all 0.2s ease;
padding: 2px;
border-radius: 50%;
}
.chip-remove:hover[b-1fwd0vml4m] {
opacity: 1;
background: rgba(255, 255, 255, 0.3);
transform: scale(1.15);
}
.tabla-clientes[b-1fwd0vml4m] {
display: flex;
flex-wrap: wrap;
gap: 4px;
max-width: 220px;
}
.tarjeta-acciones[b-1fwd0vml4m] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 14px 20px 18px;
background: linear-gradient(135deg, #fafbfc, #f8fafc);
border-top: 1px solid #f1f5f9;
}
/* ========================================
10. BOTONES DE ACCIΓN EN MOSAICO
======================================== */
.btn-accion[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 12px;
border-radius: 10px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 1px solid transparent;
letter-spacing: 0.2px;
}
.btn-accion.visualizar[b-1fwd0vml4m] {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
color: #1d4ed8;
border-color: #bfdbfe;
}
.btn-accion.visualizar:hover[b-1fwd0vml4m] {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
border-color: #60a5fa;
transform: translateY(-3px) scale(1.03);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
}
.btn-accion.editar[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fefce8, #fef3c7);
color: #a16207;
border-color: #fde68a;
}
.btn-accion.editar:hover[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fef9c3, #fef08a);
border-color: #facc15;
transform: translateY(-3px) scale(1.03);
box-shadow: 0 6px 16px rgba(202, 138, 4, 0.2);
}
.btn-linea-tiempo[b-1fwd0vml4m] {
grid-column: 1 / -1;
background: linear-gradient(135deg, #8b5cf6, #a78bfa);
color: white;
border: none;
padding: 10px 16px;
border-radius: 10px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: center;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
letter-spacing: 0.3px;
}
.btn-linea-tiempo:hover[b-1fwd0vml4m] {
background: linear-gradient(135deg, #7c3aed, #8b5cf6);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 10px 24px rgba(139, 92, 246, 0.5);
}
/* ========================================
11. VISTA LISTA (TABLA)
======================================== */
.tabla-container[b-1fwd0vml4m] {
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
border: 1px solid rgba(139, 92, 246, 0.08);
}
.tabla-colaboradores[b-1fwd0vml4m] {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.tabla-colaboradores thead[b-1fwd0vml4m] {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #eff6ff 100%);
border-bottom: 3px solid #e2e8f0;
}
.tabla-colaboradores th[b-1fwd0vml4m] {
padding: 16px 18px;
text-align: left;
font-weight: 800;
color: #1e293b;
border-bottom: 3px solid #e2e8f0;
white-space: nowrap;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.tabla-colaboradores td[b-1fwd0vml4m] {
padding: 14px 18px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
color: #1f2937;
}
.tabla-colaboradores tbody tr[b-1fwd0vml4m] {
transition: all 0.25s ease;
}
.tabla-colaboradores tbody tr:hover[b-1fwd0vml4m] {
background: linear-gradient(90deg, #faf5ff, #f8fafc, #fef3c7);
transform: scale(1.002);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.06);
}
.tabla-colaboradores tbody tr:last-child td[b-1fwd0vml4m] {
border-bottom: none;
}
.user-cell[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 12px;
}
.avatar[b-1fwd0vml4m] {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
color: #ffffff;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.avatar:hover[b-1fwd0vml4m] {
transform: scale(1.1) rotate(-4deg);
}
.user-name[b-1fwd0vml4m] {
font-weight: 700;
color: #1e293b;
}
/* ========================================
12. BADGES DE CARGO EN TABLA
======================================== */
.cargo-badge[b-1fwd0vml4m] {
display: inline-block;
padding: 5px 14px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.cargo-badge.Cadete-Empleado[b-1fwd0vml4m] {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #1d4ed8;
}
.cargo-badge.Cadete-FS-1-Dia[b-1fwd0vml4m] {
background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
color: #3730a3;
}
.cargo-badge.Cadete-Empresa[b-1fwd0vml4m] {
background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
color: #4338ca;
}
.cargo-badge.Chofer-Empleado[b-1fwd0vml4m] {
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
color: #15803d;
}
.cargo-badge.Chofer-Empresa[b-1fwd0vml4m] {
background: linear-gradient(135deg, #a7f3d0, #6ee7b7);
color: #0d9488;
}
.cargo-badge.Acompanante[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #b45309;
}
.cargo-badge.Mensajero[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fed7aa, #fdba74);
color: #c2410c;
}
.cargo-badge.Auxiliar-de-Servicio[b-1fwd0vml4m] {
background: linear-gradient(135deg, #e0f2fe, #bae6fd);
color: #0284c7;
}
.cargo-badge.Operario[b-1fwd0vml4m] {
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
color: #059669;
}
.cargo-badge.Idoneo[b-1fwd0vml4m] {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
color: #7c3aed;
}
.cargo-badge.Administrativo[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fce7f3, #fbcfe8);
color: #db2777;
}
.cargo-badge.Supervisor[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fefce8, #fef08a);
color: #ca8a04;
}
.cargo-badge.Gerente[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #dc2626;
}
.cargo-badge.Director[b-1fwd0vml4m] {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #1e293b;
}
/* ========================================
13. ESTADO EN TABLA
======================================== */
.badge[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
transition: all 0.3s ease;
}
.badge.Estado-Activo[b-1fwd0vml4m] {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #166534;
}
.badge.Estado-Inactivo[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #991b1b;
}
.badge.Estado-Licencia[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
}
.badge.Estado-Suspendido[b-1fwd0vml4m] {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
color: #5b21b6;
}
.badge.Estado-Egresado[b-1fwd0vml4m] {
background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
color: #374151;
}
/* ========================================
14. ACCIONES EN TABLA
======================================== */
.actions-cell[b-1fwd0vml4m] {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.btn-icon[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
border: 2px solid #e2e8f0;
background: #ffffff;
color: #64748b;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
font-size: 14px;
}
.btn-icon:hover[b-1fwd0vml4m] {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
transform: translateY(-3px) scale(1.08);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.btn-icon .fa-eye:hover[b-1fwd0vml4m] {
color: #2563eb;
}
.btn-icon .fa-edit:hover[b-1fwd0vml4m] {
color: #ca8a04;
}
.btn-icon .fa-clock:hover[b-1fwd0vml4m] {
color: #8b5cf6;
}
/* ========================================
15. PAGINACIΓN
======================================== */
.paginacion-colaboradores[b-1fwd0vml4m] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
color: #64748b;
font-size: 14px;
font-weight: 600;
flex-wrap: wrap;
gap: 12px;
}
.paginacion-controles[b-1fwd0vml4m] {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.btn-pagina[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
background: #ffffff;
color: #475569;
border: 2px solid #e2e8f0;
border-radius: 11px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-pagina:hover:not(:disabled):not(.activo)[b-1fwd0vml4m] {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
border-color: #cbd5e1;
transform: translateY(-3px) scale(1.05);
}
.btn-pagina.activo[b-1fwd0vml4m] {
background: linear-gradient(135deg, #7c3aed, #8b5cf6);
color: #ffffff;
border-color: transparent;
box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
animation: pulseActivo-b-1fwd0vml4m 2s ease-in-out infinite;
}
@keyframes pulseActivo-b-1fwd0vml4m {
0%, 100% {
box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
}
50% {
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.7);
}
}
.btn-pagina:disabled[b-1fwd0vml4m] {
opacity: 0.4;
cursor: not-allowed;
}
/* ========================================
16. TOAST
======================================== */
.toast-notificacion[b-1fwd0vml4m] {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 99999;
padding: 16px 26px;
border-radius: 14px;
font-size: 14px;
font-weight: 700;
color: #ffffff;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
animation: toastEntrada-b-1fwd0vml4m 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), toastSalida-b-1fwd0vml4m 0.4s ease 3.1s forwards;
max-width: 400px;
word-wrap: break-word;
letter-spacing: 0.3px;
}
.toast-success[b-1fwd0vml4m] {
background: linear-gradient(135deg, #16a34a, #22c55e, #4ade80);
}
.toast-error[b-1fwd0vml4m] {
background: linear-gradient(135deg, #dc2626, #ef4444, #f87171);
}
.toast-info[b-1fwd0vml4m] {
background: linear-gradient(135deg, #2563eb, #3b82f6, #60a5fa);
}
.toast-warning[b-1fwd0vml4m] {
background: linear-gradient(135deg, #d97706, #f59e0b, #fbbf24);
color: #1e293b;
}
@keyframes toastEntrada-b-1fwd0vml4m {
from {
opacity: 0;
transform: translateX(120px) scale(0.9);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes toastSalida-b-1fwd0vml4m {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(120px);
}
}
/* ========================================
17. SELECTOR DE COLORES
======================================== */
.color-selector-grid[b-1fwd0vml4m] {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.color-option[b-1fwd0vml4m] {
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
border: 3px solid transparent;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.color-option:hover[b-1fwd0vml4m] {
transform: scale(1.18) rotate(-8deg);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.color-option.selected[b-1fwd0vml4m] {
border-color: #1f2937;
box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #1f2937;
transform: scale(1.15);
}
.color-check[b-1fwd0vml4m] {
color: white;
font-size: 20px;
font-weight: 900;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
/* ========================================
18. MODALES BASE
======================================== */
.modal-overlay[b-1fwd0vml4m] {
position: fixed;
inset: 0;
background: radial-gradient(circle at center, rgba(76, 29, 149, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%);
backdrop-filter: blur(14px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 40px 20px;
overflow-y: auto;
animation: fadeInModal-b-1fwd0vml4m 0.3s ease;
}
@keyframes fadeInModal-b-1fwd0vml4m {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(14px);
}
}
.modal-contenido[b-1fwd0vml4m] {
background: #ffffff;
border-radius: 24px;
width: 100%;
max-width: 900px;
box-shadow: 0 40px 90px rgba(15, 23, 42, 0.4), 0 8px 24px rgba(139, 92, 246, 0.2);
animation: slideUpModal-b-1fwd0vml4m 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 1px solid rgba(255, 255, 255, 0.4);
max-height: 95vh;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.modal-contenido[b-1fwd0vml4m]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #8b5cf6, #ec4899, #f97316, #fbbf24, #22c55e, #3b82f6, #8b5cf6);
background-size: 400% 100%;
animation: rainbowSlide-b-1fwd0vml4m 8s linear infinite;
z-index: 3;
}
@keyframes slideUpModal-b-1fwd0vml4m {
from {
transform: translateY(60px) scale(0.94);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.modal-visualizar[b-1fwd0vml4m] {
max-width: 760px;
}
.modal-pestanas[b-1fwd0vml4m] {
max-width: 900px;
}
.modal-linea-tiempo[b-1fwd0vml4m] {
max-width: 720px;
}
.modal-header[b-1fwd0vml4m] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px 30px;
border-bottom: 2px solid #f1f5f9;
background: linear-gradient(135deg, #f8fafc, #f1f5f9, #eff6ff);
flex-shrink: 0;
}
.modal-header h2[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.25rem;
font-weight: 800;
color: #1f2937;
margin: 0;
letter-spacing: -0.3px;
}
.modal-id[b-1fwd0vml4m] {
font-size: 11px;
font-weight: 600;
color: #6b7280;
margin-left: 10px;
background: #ffffff;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid #e5e7eb;
}
.modal-subtitulo[b-1fwd0vml4m] {
font-size: 13px;
font-weight: 500;
color: #6b7280;
margin-left: 12px;
}
.modal-cerrar[b-1fwd0vml4m] {
background: #f1f5f9;
border: none;
font-size: 1.15rem;
color: #6b7280;
cursor: pointer;
padding: 10px 14px;
border-radius: 12px;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.modal-cerrar:hover[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #dc2626;
transform: rotate(90deg) scale(1.1);
box-shadow: 0 6px 18px rgba(220, 38, 38, 0.25);
}
.modal-body[b-1fwd0vml4m] {
padding: 26px 30px;
overflow-y: auto;
flex: 1;
}
.modal-body[b-1fwd0vml4m]::-webkit-scrollbar {
width: 8px;
}
.modal-body[b-1fwd0vml4m]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}
.modal-body[b-1fwd0vml4m]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #8b5cf6, #ec4899);
border-radius: 10px;
}
.modal-body[b-1fwd0vml4m]::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #7c3aed, #db2777);
}
.modal-footer[b-1fwd0vml4m] {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 18px 30px 26px;
background: linear-gradient(135deg, #fafbfc, #f1f5f9);
border-top: 2px solid #f1f5f9;
flex-shrink: 0;
flex-wrap: wrap;
}
/* ========================================
19. MODAL VISUALIZAR
======================================== */
.visualizar-foto[b-1fwd0vml4m] {
display: flex;
justify-content: center;
padding: 12px 0;
}
.visualizar-foto img[b-1fwd0vml4m] {
width: 110px;
height: 110px;
border-radius: 50%;
object-fit: cover;
border: 5px solid #ffffff;
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.visualizar-foto img:hover[b-1fwd0vml4m] {
transform: scale(1.08) rotate(-3deg);
}
.visualizar-nombre[b-1fwd0vml4m] {
text-align: center;
font-size: 26px;
font-weight: 800;
color: #1e293b;
margin-bottom: 24px;
letter-spacing: -0.5px;
}
.visualizar-grid[b-1fwd0vml4m] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 18px;
}
.burbuja-grupo[b-1fwd0vml4m] {
background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
border-radius: 18px;
padding: 20px;
border: 1px solid #f1f5f9;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}
.burbuja-grupo[b-1fwd0vml4m]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 18px 18px 0 0;
}
.burbuja-grupo.titulo-azul[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.burbuja-grupo.titulo-naranja[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #ea580c, #fb923c);
}
.burbuja-grupo.titulo-verde[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #16a34a, #4ade80);
}
.burbuja-grupo.titulo-morado[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
.burbuja-grupo.titulo-rosa[b-1fwd0vml4m]::before {
background: linear-gradient(90deg, #ec4899, #f472b6);
}
.burbuja-grupo:hover[b-1fwd0vml4m] {
box-shadow: 0 12px 28px rgba(139, 92, 246, 0.14);
border-color: #c4b5fd;
transform: translateY(-3px);
}
.burbuja-titulo[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 800;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px dashed #f1f5f9;
letter-spacing: 0.3px;
}
.burbuja-contador[b-1fwd0vml4m] {
margin-left: auto;
background: linear-gradient(135deg, #ec4899, #db2777);
color: #ffffff;
font-size: 12px;
font-weight: 800;
padding: 3px 12px;
border-radius: 20px;
min-width: 32px;
text-align: center;
box-shadow: 0 3px 10px rgba(236, 72, 153, 0.35);
}
.titulo-azul[b-1fwd0vml4m] {
color: #2563eb;
}
.titulo-naranja[b-1fwd0vml4m] {
color: #ea580c;
}
.titulo-verde[b-1fwd0vml4m] {
color: #16a34a;
}
.titulo-morado[b-1fwd0vml4m] {
color: #7c3aed;
}
.titulo-rosa[b-1fwd0vml4m] {
color: #ec4899;
}
.visualizar-item[b-1fwd0vml4m] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 0;
border-bottom: 1px solid #f8fafc;
}
.visualizar-item:last-child[b-1fwd0vml4m] {
border-bottom: none;
}
.visualizar-etiqueta[b-1fwd0vml4m] {
font-size: 12px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.visualizar-valor[b-1fwd0vml4m] {
font-size: 14px;
font-weight: 700;
color: #334155;
text-align: right;
max-width: 60%;
word-break: break-word;
}
/* π GRID DE CLIENTES EN VISUALIZAR */
.visualizar-clientes-grid[b-1fwd0vml4m] {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-top: 6px;
}
.sin-clientes-mini[b-1fwd0vml4m] {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 20px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 12px;
border: 2px dashed #e2e8f0;
}
.sin-clientes-mini span[b-1fwd0vml4m] {
font-size: 32px;
opacity: 0.6;
}
.sin-clientes-mini p[b-1fwd0vml4m] {
margin: 0;
font-size: 12px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.obs-box[b-1fwd0vml4m] {
margin-top: 16px;
background: linear-gradient(135deg, #f8fafc, #fafbfc);
border-radius: 12px;
padding: 14px 18px;
border: 1px solid #e2e8f0;
}
.obs-titulo[b-1fwd0vml4m] {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
color: #6b7280;
letter-spacing: 0.6px;
margin-bottom: 6px;
}
.obs-texto[b-1fwd0vml4m] {
font-size: 13px;
color: #1f2937;
line-height: 1.5;
}
/* ========================================
20. MODAL CON PESTAΓAS
======================================== */
.pestanas-nav[b-1fwd0vml4m] {
display: flex;
gap: 3px;
padding: 10px 14px;
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-shrink: 0;
}
.pestanas-nav[b-1fwd0vml4m]::-webkit-scrollbar {
height: 5px;
}
.pestanas-nav[b-1fwd0vml4m]::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, #8b5cf6, #ec4899);
border-radius: 5px;
}
.pestana-tab[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border: none;
border-radius: 11px;
background: transparent;
color: #64748b;
font-size: 12px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
flex-shrink: 0;
letter-spacing: 0.2px;
}
.pestana-tab:hover[b-1fwd0vml4m] {
background: rgba(255, 255, 255, 0.7);
color: #334155;
transform: translateY(-1px);
}
.pestana-tab.activo[b-1fwd0vml4m] {
background: linear-gradient(135deg, #ffffff, #faf5ff);
color: #7c3aed;
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.2);
transform: translateY(-2px) scale(1.03);
}
.pestana-tab.completado[b-1fwd0vml4m] {
color: #16a34a;
}
.pestana-icono[b-1fwd0vml4m] {
font-size: 16px;
font-style: normal;
line-height: 1;
}
.pestana-progreso[b-1fwd0vml4m] {
height: 4px;
background: #e2e8f0;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.progreso-barra[b-1fwd0vml4m] {
height: 100%;
background: linear-gradient(90deg, #8b5cf6, #ec4899, #f97316);
background-size: 200% 100%;
animation: rainbowSlide-b-1fwd0vml4m 3s linear infinite;
border-radius: 0 4px 4px 0;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
}
.pestana-contenido[b-1fwd0vml4m] {
animation: fadeSlideIn-b-1fwd0vml4m 0.28s ease;
}
@keyframes fadeSlideIn-b-1fwd0vml4m {
from {
opacity: 0;
transform: translateX(12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.pestana-titulo-grande[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 800;
color: #1e293b;
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 3px dashed #f1f5f9;
letter-spacing: -0.3px;
}
.pestana-titulo-grande span[b-1fwd0vml4m] {
font-size: 26px;
}
.contador-clientes[b-1fwd0vml4m] {
margin-left: auto;
background: linear-gradient(135deg, #ec4899, #db2777);
color: #ffffff;
font-size: 14px;
font-weight: 800;
padding: 4px 16px;
border-radius: 20px;
min-width: 40px;
text-align: center;
box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4);
}
/* ========================================
21. π PESTAΓA CLIENTES (DOPAMΓNICA)
======================================== */
.pestana-clientes .clientes-aviso[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
background: linear-gradient(135deg, #eff6ff, #dbeafe, #bfdbfe);
border-radius: 12px;
border-left: 4px solid #2563eb;
color: #1e40af;
font-size: 13px;
font-weight: 600;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}
.pestana-clientes .clientes-aviso i[b-1fwd0vml4m] {
font-size: 16px;
color: #2563eb;
flex-shrink: 0;
}
.clientes-grid-seleccion[b-1fwd0vml4m] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.cliente-card[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 2px solid #e2e8f0;
border-radius: 14px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
user-select: none;
position: relative;
overflow: hidden;
}
.cliente-card[b-1fwd0vml4m]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(236, 72, 153, 0.15) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform 0.6s ease;
}
.cliente-card:hover[b-1fwd0vml4m]::before {
transform: translateX(120%);
}
.cliente-card:hover[b-1fwd0vml4m] {
transform: translateY(-3px) scale(1.02);
border-color: #c4b5fd;
box-shadow: 0 10px 26px rgba(139, 92, 246, 0.15);
}
.cliente-card.seleccionado[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 50%, #fbcfe8 100%);
border-color: #ec4899;
box-shadow: 0 8px 24px rgba(236, 72, 153, 0.25);
animation: pulseCliente-b-1fwd0vml4m 2.4s ease-in-out infinite;
}
@keyframes pulseCliente-b-1fwd0vml4m {
0%, 100% {
box-shadow: 0 8px 24px rgba(236, 72, 153, 0.25);
}
50% {
box-shadow: 0 10px 32px rgba(236, 72, 153, 0.5);
}
}
.cliente-check[b-1fwd0vml4m] {
font-size: 22px;
line-height: 1;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
flex-shrink: 0;
color: #cbd5e1;
}
.cliente-card.seleccionado .cliente-check[b-1fwd0vml4m] {
color: #ec4899;
transform: scale(1.15) rotate(-8deg);
filter: drop-shadow(0 2px 6px rgba(236, 72, 153, 0.5));
}
.cliente-nombre[b-1fwd0vml4m] {
font-size: 13px;
font-weight: 800;
color: #1e293b;
text-transform: uppercase;
letter-spacing: 0.4px;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cliente-card.seleccionado .cliente-nombre[b-1fwd0vml4m] {
color: #be185d;
}
/* π AGREGAR CLIENTE PERSONALIZADO */
.agregar-cliente-custom[b-1fwd0vml4m] {
display: flex;
gap: 10px;
padding: 14px 16px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-radius: 14px;
border: 2px dashed #f59e0b;
margin-bottom: 20px;
align-items: center;
flex-wrap: wrap;
}
.input-cliente-custom[b-1fwd0vml4m] {
flex: 1;
min-width: 200px;
padding: 11px 16px;
border: 2px solid #ffffff;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #92400e;
background: #ffffff;
transition: all 0.3s ease;
box-sizing: border-box;
}
.input-cliente-custom[b-1fwd0vml4m]::placeholder {
color: #d97706;
opacity: 0.7;
}
.input-cliente-custom:focus[b-1fwd0vml4m] {
outline: none;
border-color: #d97706;
box-shadow: 0 0 0 5px rgba(217, 119, 6, 0.15);
}
.btn-agregar-cliente[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #ffffff;
border: none;
border-radius: 10px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
letter-spacing: 0.4px;
text-transform: uppercase;
white-space: nowrap;
}
.btn-agregar-cliente:hover:not(:disabled)[b-1fwd0vml4m] {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 26px rgba(245, 158, 11, 0.6);
}
.btn-agregar-cliente:disabled[b-1fwd0vml4m] {
opacity: 0.5;
cursor: not-allowed;
}
/* π RESUMEN DE SELECCIONADOS */
.clientes-seleccionados-resumen[b-1fwd0vml4m] {
padding: 18px;
background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 50%, #fbcfe8 100%);
border-radius: 16px;
border: 2px solid #f9a8d4;
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.12);
position: relative;
overflow: hidden;
}
.clientes-seleccionados-resumen[b-1fwd0vml4m]::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.resumen-titulo[b-1fwd0vml4m] {
font-size: 12px;
font-weight: 800;
color: #be185d;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.resumen-chips[b-1fwd0vml4m] {
display: flex;
flex-wrap: wrap;
gap: 8px;
position: relative;
z-index: 1;
}
/* ========================================
22. FORMULARIOS EN MODAL
======================================== */
.form-grid-2[b-1fwd0vml4m] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-grid-3[b-1fwd0vml4m] {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
}
.form-campo[b-1fwd0vml4m] {
margin-bottom: 14px;
}
.form-campo:last-child[b-1fwd0vml4m] {
margin-bottom: 0;
}
.form-campo label[b-1fwd0vml4m] {
display: block;
font-size: 12px;
font-weight: 700;
color: #475569;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.requerido[b-1fwd0vml4m] {
color: #dc2626;
font-weight: 900;
}
.form-campo input[b-1fwd0vml4m],
.form-campo select[b-1fwd0vml4m],
.form-campo textarea[b-1fwd0vml4m] {
width: 100%;
padding: 10px 14px;
border: 2px solid #e2e8f0;
border-radius: 11px;
font-size: 13px;
color: #1f2937;
background: #ffffff;
transition: all 0.3s ease;
box-sizing: border-box;
font-family: inherit;
}
.form-campo input:focus[b-1fwd0vml4m],
.form-campo select:focus[b-1fwd0vml4m],
.form-campo textarea:focus[b-1fwd0vml4m] {
outline: none;
border-color: #8b5cf6;
box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.1);
background: linear-gradient(135deg, #ffffff, #fdf4ff);
}
.form-campo select[b-1fwd0vml4m] {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.form-campo textarea[b-1fwd0vml4m] {
resize: vertical;
min-height: 80px;
}
.sub-seccion[b-1fwd0vml4m] {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 14px;
padding: 16px 18px;
border: 1px solid #e2e8f0;
margin-bottom: 14px;
position: relative;
}
.sub-seccion[b-1fwd0vml4m]::before {
content: '';
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 3px;
background: linear-gradient(180deg, #8b5cf6, #ec4899);
border-radius: 0 3px 3px 0;
}
.sub-seccion-titulo[b-1fwd0vml4m] {
font-size: 11px;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 12px;
}
/* ========================================
23. DIAS DE TRABAJO
======================================== */
.dias-trabajo-grid[b-1fwd0vml4m] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.dia-check[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 5px;
padding: 9px 14px;
background: #f1f5f9;
border-radius: 9px;
border: 2px solid #e2e8f0;
cursor: pointer;
font-size: 12px;
font-weight: 800;
color: #64748b;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
user-select: none;
letter-spacing: 0.4px;
}
.dia-check:hover[b-1fwd0vml4m] {
border-color: #cbd5e1;
transform: translateY(-2px);
}
.dia-check.activo[b-1fwd0vml4m] {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-color: #60a5fa;
color: #1d4ed8;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}
.dia-check input[type="checkbox"][b-1fwd0vml4m] {
width: 14px;
height: 14px;
accent-color: #2563eb;
cursor: pointer;
margin: 0;
}
/* ========================================
24. VEHΓCULOS Y SEGUROS
======================================== */
.sin-vehiculos[b-1fwd0vml4m] {
text-align: center;
padding: 34px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 14px;
border: 2px dashed #cbd5e1;
}
.sin-vehiculos p[b-1fwd0vml4m] {
color: #64748b;
font-size: 14px;
margin: 8px 0;
font-weight: 600;
}
.vehiculo-card[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
border-radius: 14px;
padding: 18px;
margin-bottom: 14px;
border: 2px solid #e2e8f0;
transition: all 0.3s ease;
}
.vehiculo-card:hover[b-1fwd0vml4m] {
border-color: #c4b5fd;
box-shadow: 0 8px 22px rgba(139, 92, 246, 0.1);
}
.vehiculo-card-header[b-1fwd0vml4m] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
font-size: 14px;
font-weight: 800;
color: #1e293b;
padding-bottom: 10px;
border-bottom: 2px dashed #e2e8f0;
}
.seguro-card[b-1fwd0vml4m] {
background: #ffffff;
border-radius: 12px;
padding: 14px;
margin-bottom: 10px;
border: 1px solid #f1f5f9;
}
.btn-agregar-vehiculo[b-1fwd0vml4m],
.btn-agregar-seguro[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: linear-gradient(135deg, #ffffff, #f0f9ff);
color: #2563eb;
border: 2px dashed #60a5fa;
border-radius: 11px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
width: 100%;
justify-content: center;
}
.btn-agregar-vehiculo:hover[b-1fwd0vml4m],
.btn-agregar-seguro:hover[b-1fwd0vml4m] {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border-color: #2563eb;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
}
.btn-eliminar-vehiculo[b-1fwd0vml4m],
.btn-eliminar-seguro[b-1fwd0vml4m] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 7px 14px;
background: linear-gradient(135deg, #fef2f2, #fee2e2);
color: #dc2626;
border: 1px solid #fca5a5;
border-radius: 9px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-eliminar-vehiculo:hover[b-1fwd0vml4m],
.btn-eliminar-seguro:hover[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fee2e2, #fecaca);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}
.sin-seguros[b-1fwd0vml4m] {
text-align: center;
padding: 14px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 10px;
border: 1px dashed #cbd5e1;
font-size: 12px;
color: #94a3b8;
}
.sin-seguros span[b-1fwd0vml4m] {
font-size: 22px;
display: block;
margin-bottom: 4px;
}
.sin-seguros p[b-1fwd0vml4m] {
margin: 0;
}
.seguro-card-header[b-1fwd0vml4m] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 12px;
font-weight: 700;
color: #475569;
}
/* ========================================
25. ALERTAS
======================================== */
.alerta-campos-vacios[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
margin: 0 22px 14px;
background: linear-gradient(135deg, #fefce8, #fef9c3);
border: 2px solid #fde047;
border-radius: 14px;
color: #854d0e;
font-size: 13px;
font-weight: 700;
animation: pulsoAmarillo-b-1fwd0vml4m 2s ease-in-out infinite;
}
@keyframes pulsoAmarillo-b-1fwd0vml4m {
0%, 100% {
box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.4);
}
50% {
box-shadow: 0 0 0 10px rgba(250, 204, 21, 0);
}
}
.alerta-confirmacion-crear[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
margin: 0 22px 14px;
background: linear-gradient(135deg, #fff7ed, #ffedd5);
border: 2px solid #f97316;
border-radius: 14px;
color: #9a3412;
font-size: 13px;
font-weight: 700;
animation: pulsoNaranja-b-1fwd0vml4m 1.5s ease-in-out infinite;
}
@keyframes pulsoNaranja-b-1fwd0vml4m {
0%, 100% {
box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
}
50% {
box-shadow: 0 0 0 10px rgba(249, 115, 22, 0);
}
}
/* ========================================
26. BOTONES NAV MODAL
======================================== */
.footer-nav[b-1fwd0vml4m] {
display: flex;
gap: 8px;
align-items: center;
}
.btn-anterior[b-1fwd0vml4m],
.btn-siguiente[b-1fwd0vml4m] {
padding: 11px 20px;
background: linear-gradient(135deg, #ffffff, #f1f5f9);
color: #475569;
border: 2px solid #e2e8f0;
border-radius: 11px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-anterior:hover[b-1fwd0vml4m],
.btn-siguiente:hover[b-1fwd0vml4m] {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
border-color: #cbd5e1;
transform: translateY(-2px) scale(1.03);
}
.btn-cerrar[b-1fwd0vml4m] {
padding: 11px 26px;
background: linear-gradient(135deg, #ffffff, #f1f5f9);
color: #475569;
border: 2px solid #e2e8f0;
border-radius: 11px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-cerrar:hover[b-1fwd0vml4m] {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
border-color: #cbd5e1;
transform: translateY(-2px);
}
.btn-guardar[b-1fwd0vml4m] {
padding: 11px 26px;
background: linear-gradient(135deg, #16a34a, #22c55e, #4ade80);
color: #ffffff;
border: none;
border-radius: 11px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
letter-spacing: 0.3px;
}
.btn-guardar:hover[b-1fwd0vml4m] {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 12px 28px rgba(22, 163, 74, 0.55);
}
/* ========================================
27. TIMELINE
======================================== */
.timeline-container[b-1fwd0vml4m] {
position: relative;
padding: 8px 0;
}
.timeline-item[b-1fwd0vml4m] {
position: relative;
padding-left: 60px;
padding-bottom: 28px;
display: flex;
flex-direction: column;
}
.timeline-item:last-child[b-1fwd0vml4m] {
padding-bottom: 0;
}
.timeline-line[b-1fwd0vml4m] {
position: absolute;
left: 26px;
top: 40px;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #e2e8f0, transparent);
border-radius: 4px;
}
.timeline-item:last-child .timeline-line[b-1fwd0vml4m] {
display: none;
}
.timeline-icon[b-1fwd0vml4m] {
position: absolute;
left: 12px;
top: 0;
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
z-index: 2;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
flex-shrink: 0;
color: #ffffff;
}
.timeline-item.creado .timeline-icon[b-1fwd0vml4m] {
background: linear-gradient(135deg, #16a34a, #4ade80);
}
.timeline-item.modificado .timeline-icon[b-1fwd0vml4m] {
background: linear-gradient(135deg, #2563eb, #60a5fa);
}
.timeline-item.eliminado .timeline-icon[b-1fwd0vml4m] {
background: linear-gradient(135deg, #dc2626, #f87171);
}
.timeline-item.activado .timeline-icon[b-1fwd0vml4m] {
background: linear-gradient(135deg, #16a34a, #4ade80);
}
.timeline-item.desactivado .timeline-icon[b-1fwd0vml4m] {
background: linear-gradient(135deg, #d97706, #fbbf24);
}
.timeline-item.otro .timeline-icon[b-1fwd0vml4m] {
background: linear-gradient(135deg, #7c3aed, #a78bfa);
}
.timeline-content[b-1fwd0vml4m] {
background: linear-gradient(135deg, #ffffff, #fafbfc);
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 16px 20px;
flex: 1;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.timeline-content:hover[b-1fwd0vml4m] {
box-shadow: 0 8px 22px rgba(139, 92, 246, 0.12);
border-color: #c4b5fd;
transform: translateX(4px);
}
.timeline-header[b-1fwd0vml4m] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
flex-wrap: wrap;
gap: 8px;
}
.timeline-titulo[b-1fwd0vml4m] {
font-size: 14px;
font-weight: 800;
color: #1f2937;
}
.timeline-tipo-badge[b-1fwd0vml4m] {
font-size: 10px;
font-weight: 800;
padding: 3px 12px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.timeline-tipo-badge.creado[b-1fwd0vml4m] {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #166534;
}
.timeline-tipo-badge.modificado[b-1fwd0vml4m] {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #1e40af;
}
.timeline-tipo-badge.eliminado[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #991b1b;
}
.timeline-tipo-badge.activado[b-1fwd0vml4m] {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #166534;
}
.timeline-tipo-badge.desactivado[b-1fwd0vml4m] {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
}
.timeline-tipo-badge.otro[b-1fwd0vml4m] {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
color: #5b21b6;
}
.timeline-body-text[b-1fwd0vml4m] {
font-size: 13px;
color: #4b5563;
line-height: 1.5;
margin-bottom: 10px;
}
.timeline-footer[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding-top: 8px;
border-top: 1px solid #f1f5f9;
}
.timeline-fecha[b-1fwd0vml4m],
.timeline-hora[b-1fwd0vml4m],
.timeline-usuario[b-1fwd0vml4m] {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #6b7280;
font-weight: 600;
}
.timeline-vacio[b-1fwd0vml4m] {
text-align: center;
padding: 46px 20px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 14px;
border: 2px dashed #cbd5e1;
}
/* ========================================
28. RESPONSIVE
======================================== */
@media (max-width: 768px) {
.colaboradores-container[b-1fwd0vml4m] {
padding: 16px;
}
.herramientas-colaboradores[b-1fwd0vml4m] {
padding: 18px;
border-radius: 18px;
}
.mosaico-colaboradores[b-1fwd0vml4m] {
grid-template-columns: 1fr;
}
.tarjeta-acciones[b-1fwd0vml4m] {
grid-template-columns: 1fr 1fr;
}
.tabla-container[b-1fwd0vml4m] {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tabla-colaboradores[b-1fwd0vml4m] {
min-width: 900px;
}
.modal-contenido[b-1fwd0vml4m] {
max-width: 100%;
margin: 8px;
border-radius: 20px;
max-height: 98vh;
}
.modal-body[b-1fwd0vml4m] {
padding: 18px 22px;
}
.modal-header[b-1fwd0vml4m] {
padding: 18px 22px;
}
.modal-footer[b-1fwd0vml4m] {
padding: 14px 22px 18px;
flex-direction: column;
align-items: stretch;
}
.modal-footer button[b-1fwd0vml4m] {
justify-content: center;
}
.form-grid-2[b-1fwd0vml4m], .form-grid-3[b-1fwd0vml4m] {
grid-template-columns: 1fr;
}
.visualizar-grid[b-1fwd0vml4m] {
grid-template-columns: 1fr;
}
.clientes-grid-seleccion[b-1fwd0vml4m] {
grid-template-columns: 1fr 1fr;
}
.pestana-tab[b-1fwd0vml4m] {
padding: 8px 12px;
font-size: 11px;
}
.pestana-texto[b-1fwd0vml4m] {
display: none;
}
.pestana-tab.activo .pestana-texto[b-1fwd0vml4m] {
display: inline;
}
.footer-nav[b-1fwd0vml4m] {
width: 100%;
justify-content: space-between;
}
.btn-anterior[b-1fwd0vml4m], .btn-siguiente[b-1fwd0vml4m] {
flex: 1;
justify-content: center;
}
.agregar-cliente-custom[b-1fwd0vml4m] {
flex-direction: column;
align-items: stretch;
}
.btn-agregar-cliente[b-1fwd0vml4m] {
width: 100%;
justify-content: center;
}
.row-filtros[b-1fwd0vml4m] {
flex-direction: column;
align-items: stretch;
}
.filtro-select[b-1fwd0vml4m] {
min-width: 100%;
}
}
@media (max-width: 480px) {
.indicador[b-1fwd0vml4m] {
padding: 10px 10px;
min-width: 68px;
}
.indicador-numero[b-1fwd0vml4m] {
font-size: 18px;
}
.indicador-etiqueta[b-1fwd0vml4m] {
font-size: 8.5px;
}
.tarjeta-acciones[b-1fwd0vml4m] {
grid-template-columns: 1fr;
}
.btn-accion[b-1fwd0vml4m] {
justify-content: center;
}
.clientes-grid-seleccion[b-1fwd0vml4m] {
grid-template-columns: 1fr;
}
.toast-notificacion[b-1fwd0vml4m] {
max-width: 90vw;
bottom: 12px;
right: 12px;
padding: 12px 18px;
font-size: 13px;
}
}
/* ========================================
29. IMPRESIΓN
======================================== */
@media print {
.herramientas-colaboradores[b-1fwd0vml4m],
.tarjeta-acciones[b-1fwd0vml4m],
.paginacion-colaboradores[b-1fwd0vml4m],
.toast-notificacion[b-1fwd0vml4m],
.modal-overlay[b-1fwd0vml4m] {
display: none !important;
}
.colaboradores-container[b-1fwd0vml4m] {
background: #fff;
padding: 0;
}
.tabla-container[b-1fwd0vml4m] {
box-shadow: none;
border: 1px solid #ddd;
}
}
/* /Pages/SoporteIT/SoporteIT_Tickets.razor.rz.scp.css */
/* ============================================================
π¦Ύ SOPORTE IT - GESTIΓN DE TICKETS
π HEFESTO 13.1 PRO MAX β CSS DOPAMΓNICO v3
π v3: Filas tipo burbuja con color por estado
============================================================ */
/* ===== 00. VARIABLES ===== */
.soporte-container[b-ptnucycx8e] {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--primary-light: #eff6ff;
--primary-glow: rgba(37, 99, 235, 0.28);
--danger: #dc2626;
--danger-light: #fef2f2;
--warning: #f59e0b;
--warning-light: #fffbeb;
--success: #22c55e;
--success-light: #f0fdf4;
--purple: #7c3aed;
--purple-light: #f3e8ff;
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-700: #374151;
--ink: #0f1829;
--border: #e9edf4;
--radius: 12px;
--radius-sm: 8px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.06);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
}
/* ===== 01. CONTENEDOR ===== */
.soporte-container[b-ptnucycx8e] {
padding: 1.5rem;
max-width: 100%;
background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
min-height: calc(100vh - 120px);
}
/* ===== 02. HEADER ===== */
.config-header[b-ptnucycx8e] {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1.5rem 1.75rem;
border-radius: var(--radius);
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
color: white;
overflow: hidden;
box-shadow: 0 10px 30px rgba(30, 58, 138, 0.25);
}
.config-header[b-ptnucycx8e]::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
transform: skewX(-25deg);
animation: shine-b-ptnucycx8e 6s infinite;
pointer-events: none;
}
@keyframes shine-b-ptnucycx8e {
0% {
left: -75%;
}
60% {
left: 125%;
}
100% {
left: 125%;
}
}
.config-header .header-info h1[b-ptnucycx8e] {
font-size: 1.4rem;
font-weight: 700;
color: #ffffff;
margin: 0;
display: flex;
align-items: center;
gap: 0.7rem;
letter-spacing: -0.01em;
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.config-header .header-info h1 i[b-ptnucycx8e] {
color: #bfdbfe;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.config-header .header-info .subtitle[b-ptnucycx8e] {
font-size: 0.85rem;
color: #dbeafe;
margin: 0.25rem 0 0 0;
display: flex;
align-items: center;
gap: 0.4rem;
}
.config-header .header-actions[b-ptnucycx8e] {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
z-index: 1;
}
.config-header .header-actions .btn-primary[b-ptnucycx8e] {
background: rgba(255,255,255,0.15);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.config-header .header-actions .btn-primary:hover[b-ptnucycx8e] {
background: #ffffff;
color: var(--primary);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.config-header .header-actions .btn-outline[b-ptnucycx8e] {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.4);
}
.config-header .header-actions .btn-outline:hover[b-ptnucycx8e] {
background: rgba(255,255,255,0.15);
border-color: #fff;
transform: translateY(-2px);
}
/* ===== 03. BOTONES ===== */
.btn-primary[b-ptnucycx8e] {
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: white;
border: none;
padding: 0.6rem 1.25rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: transform 0.18s ease, box-shadow 0.18s ease;
box-shadow: 0 3px 10px var(--primary-glow);
}
.btn-primary:hover:not(:disabled)[b-ptnucycx8e] {
transform: translateY(-2px);
box-shadow: 0 8px 22px var(--primary-glow);
}
.btn-primary:active:not(:disabled)[b-ptnucycx8e] {
transform: translateY(0) scale(0.98);
}
.btn-primary:disabled[b-ptnucycx8e] {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
.btn-primary i.fa-spinner[b-ptnucycx8e] {
animation: spin-b-ptnucycx8e 1s linear infinite;
}
.btn-outline[b-ptnucycx8e] {
background: transparent;
color: var(--gray-700);
border: 1px solid #d1d5db;
padding: 0.6rem 1.25rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.18s ease;
}
.btn-outline:hover[b-ptnucycx8e] {
background: var(--gray-100);
border-color: #9ca3af;
transform: translateY(-1px);
}
.btn-secondary[b-ptnucycx8e] {
background: var(--gray-100);
color: var(--gray-700);
border: 1px solid #d1d5db;
padding: 0.55rem 1.25rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.18s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-secondary:hover[b-ptnucycx8e] {
background: #e5e7eb;
transform: translateY(-1px);
}
.btn-danger[b-ptnucycx8e] {
background: linear-gradient(135deg, #dc2626, #ef4444);
color: white;
border: none;
padding: 0.55rem 1.25rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.18s ease;
box-shadow: 0 3px 10px rgba(220, 38, 38, 0.28);
}
.btn-danger:hover:not(:disabled)[b-ptnucycx8e] {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(220, 38, 38, 0.4);
}
.btn-danger:disabled[b-ptnucycx8e] {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
.btn-mail[b-ptnucycx8e] {
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: white;
border: none;
padding: 0.55rem 1.25rem;
border-radius: var(--radius-sm);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.18s ease;
box-shadow: 0 3px 10px var(--primary-glow);
}
.btn-mail:hover[b-ptnucycx8e] {
transform: translateY(-2px);
box-shadow: 0 8px 22px var(--primary-glow);
}
.btn-icon-text[b-ptnucycx8e] {
background: var(--gray-100);
color: var(--gray-700);
border: 1px solid var(--gray-200);
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
font-size: 0.85rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.18s ease;
}
.btn-icon-text:hover[b-ptnucycx8e] {
background: var(--primary-light);
border-color: var(--primary);
color: var(--primary);
transform: translateY(-1px);
}
.btn-icon-text:hover i[b-ptnucycx8e] {
animation: spin-once-b-ptnucycx8e 0.6s ease;
}
@keyframes spin-once-b-ptnucycx8e {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.btn-icon[b-ptnucycx8e] {
background: transparent;
border: none;
color: var(--gray-500);
font-size: 0.95rem;
cursor: pointer;
padding: 0.35rem 0.45rem;
border-radius: 6px;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.btn-icon:hover[b-ptnucycx8e] {
background: rgba(37, 99, 235, 0.12);
color: var(--primary);
transform: translateY(-1px);
}
.btn-icon.btn-icon-mail:hover[b-ptnucycx8e] {
background: #dbeafe;
color: #2563eb;
}
.btn-icon.btn-icon-more:hover[b-ptnucycx8e] {
background: var(--purple-light);
color: var(--purple);
}
.btn-icon i[b-ptnucycx8e] {
font-size: 0.9rem;
}
.btn-page[b-ptnucycx8e] {
background: white;
border: 1px solid var(--gray-200);
color: var(--gray-700);
padding: 0.4rem 0.8rem;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
min-width: 34px;
text-align: center;
}
.btn-page:hover:not(:disabled):not(.active)[b-ptnucycx8e] {
background: var(--primary-light);
border-color: var(--primary);
color: var(--primary);
transform: translateY(-1px);
}
.btn-page.active[b-ptnucycx8e] {
background: var(--primary);
color: white;
border-color: var(--primary);
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
}
.btn-page:disabled[b-ptnucycx8e] {
opacity: 0.4;
cursor: not-allowed;
}
/* ===== 04. ESTADΓSTICAS ===== */
.stats-row[b-ptnucycx8e] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.9rem;
margin-bottom: 1.25rem;
}
.stat-card[b-ptnucycx8e] {
background: white;
border-radius: var(--radius);
padding: 1rem;
display: flex;
align-items: center;
gap: 0.85rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.stat-card:hover[b-ptnucycx8e] {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: #d4dce8;
}
.stat-card.is-active[b-ptnucycx8e] {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 6px 18px rgba(37, 99, 235, 0.15);
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.stat-card.stat-critical:hover[b-ptnucycx8e] {
border-color: #fecaca;
}
.stat-card.stat-critical.is-active[b-ptnucycx8e] {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12), 0 6px 18px rgba(220, 38, 38, 0.15);
}
.stat-icon[b-ptnucycx8e] {
width: 44px;
height: 44px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
transition: transform 0.22s ease;
}
.stat-card:hover .stat-icon[b-ptnucycx8e] {
transform: scale(1.08) rotate(-4deg);
}
.stat-icon.total[b-ptnucycx8e] {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #2563eb;
}
.stat-icon.critical[b-ptnucycx8e] {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #dc2626;
animation: pulse-critical-b-ptnucycx8e 2.4s infinite;
}
@keyframes pulse-critical-b-ptnucycx8e {
0%, 100% {
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35);
}
50% {
box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
}
}
.stat-icon.open[b-ptnucycx8e] {
background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
color: #4f46e5;
}
.stat-icon.progress[b-ptnucycx8e] {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #d97706;
}
.stat-icon.resolved[b-ptnucycx8e] {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #16a34a;
}
.stat-icon.closed[b-ptnucycx8e] {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #64748b;
}
.stat-info[b-ptnucycx8e] {
display: flex;
flex-direction: column;
min-width: 0;
}
.stat-value[b-ptnucycx8e] {
font-size: 1.4rem;
font-weight: 800;
color: var(--ink);
line-height: 1.1;
letter-spacing: -0.02em;
}
.stat-label[b-ptnucycx8e] {
font-size: 0.68rem;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-top: 0.1rem;
}
/* ===== 05. TOOLBAR ===== */
.toolbar[b-ptnucycx8e] {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
align-items: center;
margin-bottom: 1.1rem;
background: white;
padding: 0.85rem 1.2rem;
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.search-box[b-ptnucycx8e] {
flex: 1;
min-width: 220px;
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
padding: 0.35rem 0.85rem;
transition: all 0.2s ease;
}
.search-box:focus-within[b-ptnucycx8e] {
border-color: var(--primary);
background: white;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.search-box i.fa-search[b-ptnucycx8e] {
color: var(--gray-400);
font-size: 0.9rem;
}
.search-box input[b-ptnucycx8e] {
border: none;
background: transparent;
padding: 0.45rem 0;
font-size: 0.875rem;
width: 100%;
outline: none;
color: #1f2937;
}
.search-box input[b-ptnucycx8e]::placeholder {
color: var(--gray-400);
}
.search-clear[b-ptnucycx8e] {
background: none;
border: none;
color: var(--gray-400);
cursor: pointer;
padding: 0.2rem;
display: inline-flex;
align-items: center;
border-radius: 4px;
transition: all 0.15s ease;
}
.search-clear:hover[b-ptnucycx8e] {
color: var(--danger);
background: var(--danger-light);
}
.filter-group[b-ptnucycx8e] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.filter-select[b-ptnucycx8e] {
padding: 0.5rem 0.85rem;
border-radius: var(--radius-sm);
border: 1px solid var(--gray-200);
background: white;
font-size: 0.82rem;
font-weight: 500;
color: #1f2937;
cursor: pointer;
min-width: 140px;
transition: all 0.18s ease;
}
.filter-select:hover[b-ptnucycx8e] {
border-color: #cbd5e1;
}
.filter-select:focus[b-ptnucycx8e] {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
/* ===== 06. FILTER CHIPS ===== */
.filter-chips[b-ptnucycx8e] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-bottom: 1rem;
padding: 0.6rem 0.9rem;
background: #fbfcff;
border: 1px dashed #c7d2fe;
border-radius: var(--radius-sm);
font-size: 0.82rem;
}
.chips-label[b-ptnucycx8e] {
color: var(--gray-500);
font-weight: 600;
display: flex;
align-items: center;
gap: 0.4rem;
}
.chip[b-ptnucycx8e] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--primary-light);
color: var(--primary);
border: 1px solid #bfdbfe;
border-radius: 999px;
padding: 0.2rem 0.3rem 0.2rem 0.75rem;
font-weight: 600;
font-size: 0.78rem;
animation: chipIn-b-ptnucycx8e 0.25s ease;
}
@keyframes chipIn-b-ptnucycx8e {
from {
opacity: 0;
transform: scale(0.85);
}
to {
opacity: 1;
transform: scale(1);
}
}
.chip button[b-ptnucycx8e] {
background: rgba(37, 99, 235, 0.15);
border: none;
color: var(--primary);
width: 18px;
height: 18px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
transition: all 0.15s ease;
}
.chip button:hover[b-ptnucycx8e] {
background: var(--primary);
color: white;
}
.chip-clear-all[b-ptnucycx8e] {
background: none;
border: none;
color: var(--danger);
cursor: pointer;
font-size: 0.78rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: 6px;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.3rem;
transition: all 0.15s ease;
}
.chip-clear-all:hover[b-ptnucycx8e] {
background: var(--danger-light);
}
/* ===== 07. TABLA β BUBBLE STYLE ===== */
.table-container[b-ptnucycx8e] {
background: white;
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
overflow: visible;
position: relative;
padding: 1rem 1.1rem 0.75rem 1.1rem;
}
.config-table[b-ptnucycx8e] {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px;
table-layout: fixed;
font-size: 0.85rem;
}
.config-table thead th[b-ptnucycx8e] {
padding: 0 0.75rem 0.75rem 0.75rem;
text-align: left;
font-weight: 700;
color: var(--gray-500);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.07em;
white-space: nowrap;
user-select: none;
background: transparent;
border-bottom: 2px solid var(--gray-100);
}
.config-table thead th.sortable[b-ptnucycx8e] {
cursor: pointer;
transition: color 0.15s ease;
}
.config-table thead th.sortable:hover[b-ptnucycx8e] {
color: var(--primary);
}
.config-table thead th.sortable i[b-ptnucycx8e] {
margin-left: 0.3rem;
font-size: 0.72rem;
opacity: 0.5;
transition: opacity 0.15s ease;
}
.config-table thead th.sortable:hover i[b-ptnucycx8e] {
opacity: 1;
}
/* Bubble rows */
.config-table tbody tr td[b-ptnucycx8e] {
padding: 0.75rem 0.75rem;
vertical-align: middle;
color: #1f2937;
background: #ffffff;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.config-table tbody tr td:first-child[b-ptnucycx8e] {
border-left: 4px solid #cbd5e1;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
padding-left: 0.75rem;
}
.config-table tbody tr td:last-child[b-ptnucycx8e] {
border-right: 1px solid var(--border);
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
/* Column widths β suman 100% */
.config-table .col-codigo[b-ptnucycx8e] {
width: 8%;
}
.config-table .col-reportado[b-ptnucycx8e] {
width: 12%;
}
.config-table .col-asunto[b-ptnucycx8e] {
width: 26%;
}
.config-table .col-prioridad[b-ptnucycx8e] {
width: 9%;
}
.config-table .col-estado[b-ptnucycx8e] {
width: 9%;
}
.config-table .col-tecnico[b-ptnucycx8e] {
width: 12%;
}
.config-table .col-creado[b-ptnucycx8e] {
width: 8%;
}
.config-table .col-acciones[b-ptnucycx8e] {
width: 16%;
}
/* ===== 07.1 ESTADO: NUEVO ===== */
.ticket-row.estado-nuevo td[b-ptnucycx8e] {
background: #eff6ff;
border-color: #bfdbfe;
}
.ticket-row.estado-nuevo td:first-child[b-ptnucycx8e] {
border-left-color: #3b82f6;
}
/* ===== 07.2 ESTADO: ASIGNADO ===== */
.ticket-row.estado-asignado td[b-ptnucycx8e] {
background: #f5f3ff;
border-color: #ddd6fe;
}
.ticket-row.estado-asignado td:first-child[b-ptnucycx8e] {
border-left-color: #8b5cf6;
}
/* ===== 07.3 ESTADO: EN_PROCESO ===== */
.ticket-row.estado-en_proceso td[b-ptnucycx8e] {
background: #fffbeb;
border-color: #fde68a;
}
.ticket-row.estado-en_proceso td:first-child[b-ptnucycx8e] {
border-left-color: #f59e0b;
}
/* ===== 07.4 ESTADO: PENDIENTE ===== */
.ticket-row.estado-pendiente td[b-ptnucycx8e] {
background: #fdf2f8;
border-color: #fbcfe8;
}
.ticket-row.estado-pendiente td:first-child[b-ptnucycx8e] {
border-left-color: #ec4899;
}
/* ===== 07.5 ESTADO: RESUELTO ===== */
.ticket-row.estado-resuelto td[b-ptnucycx8e] {
background: #f0fdf4;
border-color: #bbf7d0;
}
.ticket-row.estado-resuelto td:first-child[b-ptnucycx8e] {
border-left-color: #22c55e;
}
/* ===== 07.6 ESTADO: CERRADO ===== */
.ticket-row.estado-cerrado td[b-ptnucycx8e] {
background: #f8fafc;
border-color: #e2e8f0;
}
.ticket-row.estado-cerrado td:first-child[b-ptnucycx8e] {
border-left-color: #94a3b8;
}
/* ===== 07.7 ESTADO: REABIERTO ===== */
.ticket-row.estado-reabierto td[b-ptnucycx8e] {
background: #fef2f2;
border-color: #fecaca;
}
.ticket-row.estado-reabierto td:first-child[b-ptnucycx8e] {
border-left-color: #ef4444;
}
/* ===== 07.8 CRΓTICA β override ===== */
.ticket-row.row-critical td[b-ptnucycx8e] {
background: #fef2f2 !important;
border-color: #fca5a5 !important;
}
.ticket-row.row-critical td:first-child[b-ptnucycx8e] {
border-left-color: #dc2626 !important;
}
/* ===== 07.9 HOVER ===== */
.config-table tbody tr:hover td[b-ptnucycx8e] {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.config-table tbody tr:hover td:first-child[b-ptnucycx8e] {
border-left-width: 5px;
}
/* ===== 08. TICKET ID ===== */
.ticket-id-btn[b-ptnucycx8e] {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: all 0.15s ease;
}
.ticket-id[b-ptnucycx8e] {
font-weight: 700;
color: var(--primary);
font-family: 'SF Mono', 'Courier New', monospace;
font-size: 0.8rem;
letter-spacing: 0.02em;
}
.ticket-id-btn:hover .ticket-id[b-ptnucycx8e] {
text-decoration: underline;
}
/* ===== 09. USER CELL ===== */
.user-cell[b-ptnucycx8e] {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
overflow: hidden;
}
.avatar[b-ptnucycx8e] {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 0.68rem;
flex-shrink: 0;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
letter-spacing: 0.02em;
}
.user-name[b-ptnucycx8e] {
font-weight: 500;
color: #1f2937;
font-size: 0.82rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* ===== 10. SUBJECT ===== */
.subject-cell[b-ptnucycx8e] {
min-width: 0;
overflow: hidden;
}
.subject-cell .subject-title[b-ptnucycx8e] {
font-weight: 500;
color: #1f2937;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35;
word-break: break-word;
}
/* ===== 11. TECH CELL ===== */
.tech-cell[b-ptnucycx8e] {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.8rem;
min-width: 0;
overflow: hidden;
}
.tech-cell.unassigned[b-ptnucycx8e] {
color: var(--gray-400);
font-style: italic;
}
.tech-cell.unassigned i[b-ptnucycx8e] {
font-size: 0.8rem;
}
.avatar-small[b-ptnucycx8e] {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 0.62rem;
flex-shrink: 0;
text-transform: uppercase;
}
.tech-name[b-ptnucycx8e] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* ===== 12. FECHA RELATIVA ===== */
.fecha-relativa[b-ptnucycx8e] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--gray-500);
font-size: 0.76rem;
cursor: help;
white-space: nowrap;
}
.fecha-relativa i[b-ptnucycx8e] {
font-size: 0.72rem;
opacity: 0.6;
}
/* ===== 13. BADGES ===== */
.badge-priority-critical[b-ptnucycx8e],
.badge-priority-high[b-ptnucycx8e],
.badge-priority-medium[b-ptnucycx8e],
.badge-priority-low[b-ptnucycx8e] {
padding: 0.25rem 0.7rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.35rem;
letter-spacing: 0.02em;
white-space: nowrap;
}
.badge-priority-critical[b-ptnucycx8e] {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #b91c1c;
animation: badge-pulse-b-ptnucycx8e 2s infinite;
}
@keyframes badge-pulse-b-ptnucycx8e {
0%, 100% {
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
}
50% {
box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
}
}
.badge-priority-high[b-ptnucycx8e] {
background: linear-gradient(135deg, #fff7ed, #fed7aa);
color: #c2410c;
}
.badge-priority-medium[b-ptnucycx8e] {
background: linear-gradient(135deg, #fffbeb, #fde68a);
color: #b45309;
}
.badge-priority-low[b-ptnucycx8e] {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #475569;
}
.badge-state-new[b-ptnucycx8e],
.badge-state-assigned[b-ptnucycx8e],
.badge-state-progress[b-ptnucycx8e],
.badge-state-pending[b-ptnucycx8e],
.badge-state-resolved[b-ptnucycx8e],
.badge-state-closed[b-ptnucycx8e],
.badge-state-reopened[b-ptnucycx8e] {
padding: 0.25rem 0.7rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.35rem;
letter-spacing: 0.02em;
white-space: nowrap;
}
.badge-state-new[b-ptnucycx8e] {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #1d4ed8;
}
.badge-state-assigned[b-ptnucycx8e] {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
color: #6d28d9;
}
.badge-state-progress[b-ptnucycx8e] {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #b45309;
}
.badge-state-pending[b-ptnucycx8e] {
background: linear-gradient(135deg, #fce7f3, #fbcfe8);
color: #be185d;
}
.badge-state-resolved[b-ptnucycx8e] {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #15803d;
}
.badge-state-closed[b-ptnucycx8e] {
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
color: #475569;
}
.badge-state-reopened[b-ptnucycx8e] {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #b91c1c;
}
.badge-categoria[b-ptnucycx8e] {
background: var(--gray-100);
color: #475569;
padding: 0.25rem 0.7rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
border: 1px solid #e2e8f0;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.badge-urgencia[b-ptnucycx8e] {
background: linear-gradient(135deg, #e0f2fe, #bae6fd);
color: #0369a1;
padding: 0.25rem 0.7rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
/* ===== 14. ACTIONS CELL ===== */
.actions-cell[b-ptnucycx8e] {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.15rem;
flex-wrap: nowrap;
}
.actions-cell .btn-icon[b-ptnucycx8e] {
padding: 0.32rem 0.42rem;
border-radius: 7px;
}
.actions-cell .btn-icon i[b-ptnucycx8e] {
font-size: 0.85rem;
}
/* ===== 15. DROPDOWN FLOTANTE ===== */
.dropdown-backdrop[b-ptnucycx8e] {
position: fixed;
inset: 0;
z-index: 999998;
background: transparent;
}
.dropdown-menu-floating[b-ptnucycx8e] {
position: fixed;
z-index: 999999;
min-width: 230px;
background: white;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.06);
padding: 0.4rem 0;
animation: dropdownIn-b-ptnucycx8e 0.18s ease;
overflow: hidden;
}
@keyframes dropdownIn-b-ptnucycx8e {
from {
opacity: 0;
transform: translateY(-6px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.dropdown-section-label[b-ptnucycx8e] {
padding: 0.4rem 1rem 0.25rem 1rem;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-400);
}
.dropdown-menu-floating button[b-ptnucycx8e] {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 1rem;
background: none;
border: none;
width: 100%;
text-align: left;
font-size: 0.83rem;
color: #1f2937;
cursor: pointer;
transition: background 0.12s ease, padding-left 0.15s ease;
font-weight: 500;
}
.dropdown-menu-floating button:hover[b-ptnucycx8e] {
background: var(--primary-light);
padding-left: 1.15rem;
}
.dropdown-menu-floating button.drop-mail[b-ptnucycx8e] {
color: var(--primary);
font-weight: 700;
}
.dropdown-menu-floating button.drop-danger[b-ptnucycx8e] {
color: var(--danger);
font-weight: 600;
}
.dropdown-menu-floating button.drop-danger:hover[b-ptnucycx8e] {
background: var(--danger-light);
}
.dropdown-menu-floating hr[b-ptnucycx8e] {
margin: 6px 12px;
border: none;
border-top: 1px solid var(--gray-100);
}
.dot-blue[b-ptnucycx8e] {
color: #2563eb;
}
.dot-purple[b-ptnucycx8e] {
color: #8b5cf6;
}
.dot-amber[b-ptnucycx8e] {
color: #f59e0b;
}
.dot-green[b-ptnucycx8e] {
color: #22c55e;
}
.dot-gray[b-ptnucycx8e] {
color: #6b7280;
}
.dot-red[b-ptnucycx8e] {
color: #dc2626;
}
/* ===== 16. SKELETON ===== */
.skeleton-table[b-ptnucycx8e] {
padding: 0.5rem;
}
.skeleton-header[b-ptnucycx8e],
.skeleton-row[b-ptnucycx8e] {
display: grid;
grid-template-columns: 100px 170px 1fr 110px 120px 150px 140px 150px;
gap: 1rem;
padding: 0.9rem 1rem;
align-items: center;
}
.skeleton-header[b-ptnucycx8e] {
border-bottom: 2px solid var(--gray-100);
}
.skeleton-row[b-ptnucycx8e] {
border-bottom: 1px solid var(--gray-100);
}
.skeleton-cell[b-ptnucycx8e] {
height: 14px;
border-radius: 6px;
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
background-size: 200% 100%;
animation: shimmer-b-ptnucycx8e 1.4s infinite;
}
.skeleton-header .skeleton-cell[b-ptnucycx8e] {
height: 10px;
}
.w-sm[b-ptnucycx8e] {
width: 60%;
}
.w-md[b-ptnucycx8e] {
width: 80%;
}
.w-lg[b-ptnucycx8e] {
width: 100%;
}
@keyframes shimmer-b-ptnucycx8e {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@keyframes spin-b-ptnucycx8e {
to {
transform: rotate(360deg);
}
}
/* ===== 17. EMPTY STATE ===== */
.empty-state[b-ptnucycx8e] {
padding: 3.5rem 1.5rem;
text-align: center;
color: var(--gray-500);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
}
.empty-icon-wrap[b-ptnucycx8e] {
width: 88px;
height: 88px;
border-radius: 50%;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
margin-bottom: 0.5rem;
animation: float-b-ptnucycx8e 3s ease-in-out infinite;
}
@keyframes float-b-ptnucycx8e {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.empty-state h4[b-ptnucycx8e] {
color: var(--ink);
margin: 0;
font-size: 1.05rem;
font-weight: 700;
}
.empty-state p[b-ptnucycx8e] {
margin: 0 0 0.75rem 0;
font-size: 0.88rem;
max-width: 380px;
line-height: 1.5;
}
.empty-state-small[b-ptnucycx8e] {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--gray-400);
font-size: 0.85rem;
padding: 0.6rem 0;
font-style: italic;
justify-content: center;
}
/* ===== 18. ALERT ERROR ===== */
.alert-error[b-ptnucycx8e] {
padding: 1rem 1.5rem;
background: linear-gradient(135deg, #fef2f2, #fee2e2);
color: var(--danger);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 600;
margin: 0.75rem 1rem;
border-left: 4px solid var(--danger);
}
/* ===== 19. PAGINACIΓN ===== */
.pagination[b-ptnucycx8e] {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.8rem;
padding: 0.9rem 1.2rem;
background: white;
border-top: 1px solid var(--border);
border-radius: 0 0 var(--radius) var(--radius);
font-size: 0.85rem;
color: var(--gray-500);
margin-top: 0;
}
.pagination-info strong[b-ptnucycx8e] {
color: var(--ink);
font-weight: 700;
}
.pagination-controls[b-ptnucycx8e] {
display: flex;
gap: 0.3rem;
align-items: center;
}
.pagination-ellipsis[b-ptnucycx8e] {
padding: 0 0.4rem;
color: var(--gray-400);
font-weight: 700;
user-select: none;
}
/* ===== 20. MODALES β BASE ===== */
.modal-overlay[b-ptnucycx8e] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(8px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
animation: fadeIn-b-ptnucycx8e 0.25s ease;
}
@keyframes fadeIn-b-ptnucycx8e {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-container[b-ptnucycx8e] {
background: white;
border-radius: 20px;
max-width: 720px;
width: 100%;
max-height: 92vh;
display: flex;
flex-direction: column;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.05);
animation: modalSpring-b-ptnucycx8e 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
}
@keyframes modalSpring-b-ptnucycx8e {
from {
transform: translateY(30px) scale(0.94);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.modal-container.modal-xl[b-ptnucycx8e] {
max-width: 940px;
}
.modal-container.modal-sm[b-ptnucycx8e] {
max-width: 480px;
}
/* ===== 21. MODAL HEADER ===== */
.modal-header[b-ptnucycx8e] {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.4rem 1.6rem;
color: white;
overflow: hidden;
}
.modal-header[b-ptnucycx8e]::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(255,255,255,0.18) 0%, transparent 55%);
pointer-events: none;
}
.modal-header.header-create[b-ptnucycx8e] {
background: linear-gradient(135deg, #1e40af 0%, #2563eb 60%, #3b82f6 100%);
}
.modal-header.header-edit[b-ptnucycx8e] {
background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 60%, #8b5cf6 100%);
}
.modal-header.header-detail[b-ptnucycx8e] {
background: linear-gradient(135deg, #0e7490 0%, #0891b2 60%, #06b6d4 100%);
}
.modal-header.header-danger[b-ptnucycx8e] {
background: linear-gradient(135deg, #991b1b 0%, #dc2626 60%, #ef4444 100%);
}
.modal-header-main[b-ptnucycx8e] {
display: flex;
align-items: center;
gap: 1rem;
z-index: 1;
min-width: 0;
flex: 1;
}
.modal-header-badge[b-ptnucycx8e] {
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.modal-header-text[b-ptnucycx8e] {
min-width: 0;
}
.modal-header-text h2[b-ptnucycx8e] {
font-size: 1.15rem;
font-weight: 700;
margin: 0;
color: white;
letter-spacing: -0.01em;
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.modal-header-text p[b-ptnucycx8e] {
margin: 0.2rem 0 0 0;
font-size: 0.8rem;
color: rgba(255,255,255,0.85);
font-weight: 400;
}
.ticket-code-inline[b-ptnucycx8e] {
background: rgba(255,255,255,0.22);
border: 1px solid rgba(255,255,255,0.35);
padding: 0.15rem 0.6rem;
border-radius: 999px;
font-family: 'SF Mono', 'Courier New', monospace;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.modal-close[b-ptnucycx8e] {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
color: white;
font-size: 1rem;
width: 36px;
height: 36px;
border-radius: 10px;
cursor: pointer;
transition: all 0.18s ease;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
z-index: 1;
}
.modal-close:hover[b-ptnucycx8e] {
background: rgba(255,255,255,0.3);
transform: rotate(90deg) scale(1.05);
}
.modal-body[b-ptnucycx8e] {
padding: 1.6rem;
overflow-y: auto;
flex: 1;
background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}
.modal-body.text-center[b-ptnucycx8e] {
text-align: center;
}
.modal-footer[b-ptnucycx8e] {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
padding: 1.1rem 1.6rem;
border-top: 1px solid var(--border);
background: linear-gradient(180deg, #fafcff 0%, #f0f4fb 100%);
}
/* ===== 22. SECCIONES DEL FORMULARIO ===== */
.form-section[b-ptnucycx8e] {
margin-bottom: 1.5rem;
}
.form-section:last-child[b-ptnucycx8e] {
margin-bottom: 0;
}
.section-title[b-ptnucycx8e] {
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary);
display: flex;
align-items: center;
gap: 0.55rem;
padding-bottom: 0.55rem;
margin: 0 0 1rem 0;
border-bottom: 2px solid var(--primary-light);
}
.section-title i[b-ptnucycx8e] {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: var(--primary);
width: 26px;
height: 26px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}
.section-solution .section-title[b-ptnucycx8e] {
color: #15803d;
border-bottom-color: #dcfce7;
}
.section-solution .section-title i[b-ptnucycx8e] {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #15803d;
box-shadow: 0 2px 6px rgba(34, 197, 94, 0.2);
}
/* ===== 23. FORMULARIO ===== */
.form-grid[b-ptnucycx8e] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem 1.2rem;
}
.form-grid .span-2[b-ptnucycx8e] {
grid-column: span 2;
}
.form-group[b-ptnucycx8e] {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.form-group label[b-ptnucycx8e] {
font-size: 0.78rem;
font-weight: 600;
color: var(--gray-700);
display: flex;
align-items: center;
gap: 0.35rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.form-group label i[b-ptnucycx8e] {
color: var(--primary);
font-size: 0.78rem;
background: var(--primary-light);
width: 20px;
height: 20px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.form-group label .requerido[b-ptnucycx8e] {
color: var(--danger);
font-weight: 800;
margin-left: 0.1rem;
}
.form-group input[b-ptnucycx8e],
.form-group select[b-ptnucycx8e],
.form-group textarea[b-ptnucycx8e] {
padding: 0.65rem 0.85rem;
border: 1px solid #d1d5db;
border-radius: var(--radius-sm);
font-size: 0.88rem;
font-family: inherit;
transition: all 0.18s ease;
background: white;
color: #1f2937;
width: 100%;
}
.form-group input:focus[b-ptnucycx8e],
.form-group select:focus[b-ptnucycx8e],
.form-group textarea:focus[b-ptnucycx8e] {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
background: #fbfdff;
transform: translateY(-1px);
}
.form-group input[b-ptnucycx8e]::placeholder,
.form-group textarea[b-ptnucycx8e]::placeholder {
color: var(--gray-400);
}
.form-group textarea[b-ptnucycx8e] {
resize: vertical;
min-height: 80px;
line-height: 1.5;
}
/* ===== 24. DETALLE β HERO ===== */
.detail-hero[b-ptnucycx8e] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border-radius: 14px;
padding: 1.3rem 1.5rem;
margin-bottom: 1.3rem;
border: 1px solid #bfdbfe;
position: relative;
overflow: hidden;
}
.detail-hero[b-ptnucycx8e]::before {
content: "";
position: absolute;
top: -30px;
right: -30px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.detail-hero-title[b-ptnucycx8e] {
margin: 0 0 0.85rem 0;
font-size: 1.15rem;
color: var(--ink);
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
}
.detail-hero-badges[b-ptnucycx8e] {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
/* ===== 25. DETALLE β META GRID ===== */
.meta-grid[b-ptnucycx8e] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.meta-card[b-ptnucycx8e] {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1rem;
background: white;
border: 1px solid var(--border);
border-radius: 12px;
transition: all 0.2s ease;
}
.meta-card:hover[b-ptnucycx8e] {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: #d4dce8;
}
.meta-card.meta-card-success[b-ptnucycx8e] {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-color: #bbf7d0;
}
.meta-card.meta-card-danger[b-ptnucycx8e] {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border-color: #fecaca;
}
.meta-icon[b-ptnucycx8e] {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.meta-icon-blue[b-ptnucycx8e] {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #2563eb;
}
.meta-icon-purple[b-ptnucycx8e] {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
color: #7c3aed;
}
.meta-icon-amber[b-ptnucycx8e] {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #d97706;
}
.meta-icon-green[b-ptnucycx8e] {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #16a34a;
}
.meta-icon-red[b-ptnucycx8e] {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #dc2626;
}
.meta-content[b-ptnucycx8e] {
display: flex;
flex-direction: column;
min-width: 0;
}
.meta-label[b-ptnucycx8e] {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--gray-500);
margin-bottom: 0.1rem;
}
.meta-value[b-ptnucycx8e] {
font-size: 0.88rem;
font-weight: 600;
color: var(--ink);
word-break: break-word;
}
/* ===== 26. DETALLE β BLOQUES ===== */
.detail-block[b-ptnucycx8e] {
margin-bottom: 1.4rem;
}
.block-title[b-ptnucycx8e] {
font-size: 0.85rem;
color: var(--gray-700);
margin: 0 0 0.6rem 0;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 800;
display: flex;
align-items: center;
gap: 0.55rem;
}
.block-icon[b-ptnucycx8e] {
width: 26px;
height: 26px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
}
.block-icon-blue[b-ptnucycx8e] {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: var(--primary);
}
.block-icon-green[b-ptnucycx8e] {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #15803d;
}
.block-icon-purple[b-ptnucycx8e] {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
color: var(--purple);
}
.block-body[b-ptnucycx8e] {
background: #fafcff;
padding: 1rem 1.15rem;
border-radius: var(--radius-sm);
border-left: 4px solid var(--primary);
}
.block-body-success[b-ptnucycx8e] {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border-left-color: var(--success);
}
.block-body p[b-ptnucycx8e] {
margin: 0;
font-size: 0.88rem;
color: #334155;
line-height: 1.65;
white-space: pre-wrap;
}
.detail-block-success .block-title[b-ptnucycx8e] {
color: #15803d;
}
/* ===== 27. COMENTARIOS ===== */
.coment-count[b-ptnucycx8e] {
background: var(--purple-light);
color: var(--purple);
font-size: 0.7rem;
font-weight: 700;
padding: 0.1rem 0.55rem;
border-radius: 999px;
margin-left: 0.25rem;
text-transform: none;
letter-spacing: 0;
}
.comentarios-list[b-ptnucycx8e] {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-bottom: 0.8rem;
}
.comentario-item[b-ptnucycx8e] {
display: flex;
gap: 0.75rem;
background: white;
border: 1px solid var(--border);
border-radius: 12px;
padding: 0.8rem 1rem;
transition: all 0.18s ease;
}
.comentario-item:hover[b-ptnucycx8e] {
box-shadow: var(--shadow-md);
border-color: #d4dce8;
transform: translateX(2px);
}
.comentario-avatar[b-ptnucycx8e] {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 0.72rem;
text-transform: uppercase;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.comentario-body[b-ptnucycx8e] {
flex: 1;
min-width: 0;
}
.comentario-header[b-ptnucycx8e] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.3rem;
gap: 0.5rem;
}
.comentario-usuario[b-ptnucycx8e] {
font-weight: 700;
font-size: 0.83rem;
color: var(--ink);
}
.comentario-fecha[b-ptnucycx8e] {
font-size: 0.72rem;
color: var(--gray-400);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.25rem;
white-space: nowrap;
}
.comentario-fecha i[b-ptnucycx8e] {
font-size: 0.68rem;
}
.comentario-mensaje[b-ptnucycx8e] {
margin: 0;
font-size: 0.86rem;
color: #334155;
line-height: 1.55;
white-space: pre-wrap;
}
.comment-box[b-ptnucycx8e] {
display: flex;
gap: 0.6rem;
margin-top: 0.9rem;
align-items: flex-end;
}
.comment-box textarea[b-ptnucycx8e] {
flex: 1;
padding: 0.65rem 0.85rem;
border: 1px solid #d1d5db;
border-radius: var(--radius-sm);
font-size: 0.86rem;
font-family: inherit;
resize: vertical;
min-height: 55px;
transition: all 0.18s ease;
}
.comment-box textarea:focus[b-ptnucycx8e] {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
.comment-box .btn-primary[b-ptnucycx8e] {
padding: 0.65rem 1.15rem;
height: fit-content;
flex-shrink: 0;
}
/* ===== 28. CONFIRM ICON ===== */
.confirm-icon[b-ptnucycx8e] {
font-size: 2.4rem;
width: 82px;
height: 82px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.1rem auto;
animation: modalSpring-b-ptnucycx8e 0.5s ease;
}
.confirm-icon.danger[b-ptnucycx8e] {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: var(--danger);
box-shadow: 0 0 0 10px rgba(220, 38, 38, 0.08);
}
.confirm-title[b-ptnucycx8e] {
color: var(--ink);
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.confirm-text[b-ptnucycx8e] {
color: var(--gray-500);
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
}
/* ===== 29. RESPONSIVE ===== */
@media (max-width: 1024px) {
.skeleton-header[b-ptnucycx8e],
.skeleton-row[b-ptnucycx8e] {
grid-template-columns: 90px 1fr 1fr 100px 110px 130px;
}
.skeleton-header .skeleton-cell:nth-child(6)[b-ptnucycx8e],
.skeleton-row .skeleton-cell:nth-child(6)[b-ptnucycx8e],
.skeleton-header .skeleton-cell:nth-child(7)[b-ptnucycx8e],
.skeleton-row .skeleton-cell:nth-child(7)[b-ptnucycx8e],
.skeleton-header .skeleton-cell:nth-child(8)[b-ptnucycx8e],
.skeleton-row .skeleton-cell:nth-child(8)[b-ptnucycx8e] {
display: none;
}
}
@media (max-width: 768px) {
.soporte-container[b-ptnucycx8e] {
padding: 0.9rem;
}
.config-header[b-ptnucycx8e] {
flex-direction: column;
align-items: stretch;
gap: 0.9rem;
padding: 1.1rem;
}
.config-header .header-info h1[b-ptnucycx8e] {
font-size: 1.1rem;
}
.config-header .header-actions[b-ptnucycx8e] {
justify-content: stretch;
}
.config-header .header-actions button[b-ptnucycx8e] {
flex: 1;
justify-content: center;
}
.stats-row[b-ptnucycx8e] {
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.stat-card[b-ptnucycx8e] {
padding: 0.7rem;
flex-direction: column;
text-align: center;
gap: 0.4rem;
}
.stat-icon[b-ptnucycx8e] {
width: 34px;
height: 34px;
font-size: 0.95rem;
}
.stat-value[b-ptnucycx8e] {
font-size: 1.1rem;
}
.stat-label[b-ptnucycx8e] {
font-size: 0.62rem;
}
.toolbar[b-ptnucycx8e] {
flex-direction: column;
align-items: stretch;
padding: 0.85rem;
}
.search-box[b-ptnucycx8e] {
min-width: unset;
}
.filter-group[b-ptnucycx8e] {
flex-wrap: wrap;
}
.filter-group .filter-select[b-ptnucycx8e] {
flex: 1;
min-width: 110px;
}
.table-container[b-ptnucycx8e] {
padding: 0.7rem 0.6rem 0.5rem 0.6rem;
}
.config-table[b-ptnucycx8e] {
font-size: 0.76rem;
}
.config-table thead th[b-ptnucycx8e] {
padding: 0 0.5rem 0.6rem 0.5rem;
}
.config-table tbody td[b-ptnucycx8e] {
padding: 0.6rem 0.5rem;
}
.config-table thead th:nth-child(6)[b-ptnucycx8e],
.config-table tbody td:nth-child(6)[b-ptnucycx8e],
.config-table thead th:nth-child(7)[b-ptnucycx8e],
.config-table tbody td:nth-child(7)[b-ptnucycx8e] {
display: none;
}
.pagination[b-ptnucycx8e] {
flex-direction: column;
align-items: center;
padding: 0.7rem;
}
.modal-container[b-ptnucycx8e] {
max-width: 100%;
margin: 0.5rem;
max-height: 95vh;
border-radius: 16px;
}
.modal-header[b-ptnucycx8e] {
padding: 1.1rem 1.2rem;
}
.modal-header-badge[b-ptnucycx8e] {
width: 40px;
height: 40px;
font-size: 1.1rem;
}
.modal-header-text h2[b-ptnucycx8e] {
font-size: 1rem;
}
.form-grid[b-ptnucycx8e] {
grid-template-columns: 1fr;
}
.form-grid .span-2[b-ptnucycx8e] {
grid-column: span 1;
}
.modal-body[b-ptnucycx8e] {
padding: 1.1rem;
}
.modal-footer[b-ptnucycx8e] {
flex-wrap: wrap;
justify-content: stretch;
padding: 0.9rem 1.1rem;
}
.modal-footer button[b-ptnucycx8e] {
flex: 1;
justify-content: center;
}
.meta-grid[b-ptnucycx8e] {
grid-template-columns: 1fr;
}
.comment-box[b-ptnucycx8e] {
flex-direction: column;
}
.comment-box .btn-primary[b-ptnucycx8e] {
align-self: flex-end;
}
.btn-icon-text span[b-ptnucycx8e] {
display: none;
}
.filter-chips[b-ptnucycx8e] {
font-size: 0.75rem;
}
.chip-clear-all[b-ptnucycx8e] {
margin-left: 0;
flex-basis: 100%;
justify-content: center;
}
.detail-hero[b-ptnucycx8e] {
padding: 1rem 1.1rem;
}
.detail-hero-title[b-ptnucycx8e] {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.stats-row[b-ptnucycx8e] {
grid-template-columns: repeat(2, 1fr);
}
.config-header .header-info h1[b-ptnucycx8e] {
font-size: 1rem;
}
.skeleton-header[b-ptnucycx8e],
.skeleton-row[b-ptnucycx8e] {
grid-template-columns: 1fr 1fr;
}
}
/* ===== 30. ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
*[b-ptnucycx8e],
*[b-ptnucycx8e]::before,
*[b-ptnucycx8e]::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ===== 31. SCROLLBAR SUTIL ===== */
.modal-body[b-ptnucycx8e]::-webkit-scrollbar {
width: 8px;
}
.modal-body[b-ptnucycx8e]::-webkit-scrollbar-track {
background: transparent;
}
.modal-body[b-ptnucycx8e]::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 999px;
}
.modal-body[b-ptnucycx8e]::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Codeado por π¦Ύ Hefesto 13.1 Pro Max | Sr. Ignacio */
/* /Pages/Stock/Stock_Productos_General.razor.rz.scp.css */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
STOCK PRODUCTOS EN GENERAL β CSS Premium
Codeado por π¦Ύ Hefesto 15.1 Pro Max | Sr. Ignacio
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* ===== 01. VARIABLES GLOBALES ===== */
.uniform-container[b-afg8qnehfw] {
--c-primary: #2563eb;
--c-primary-light: #60a5fa;
--c-violet: #7c3aed;
--c-violet-light: #a78bfa;
--c-success: #059669;
--c-success-light: #34d399;
--c-warning: #d97706;
--c-warning-light: #fbbf24;
--c-danger: #dc2626;
--c-danger-light: #f87171;
--c-teal: #14b8a6;
--c-pink: #ec4899;
--c-bg: #f8fafc;
--c-bg-soft: #f1f5f9;
--c-text: #0f172a;
--c-text-soft: #64748b;
--c-text-mute: #94a3b8;
--c-border: #e2e8f0;
padding: 24px;
max-width: 1600px;
margin: 0 auto;
animation: unifFadeIn-b-afg8qnehfw 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes unifFadeIn-b-afg8qnehfw {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== 02. HEADER ===== */
.uniform-header[b-afg8qnehfw] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.uniform-header-left[b-afg8qnehfw] {
display: flex;
align-items: center;
gap: 16px;
}
.uniform-title-group[b-afg8qnehfw] {
display: flex;
align-items: center;
gap: 14px;
}
.uniform-icon-wrapper[b-afg8qnehfw] {
width: 56px;
height: 56px;
border-radius: 16px;
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);
background-size: 200% 200%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
animation: unifIconGradient-b-afg8qnehfw 4s ease infinite, unifIconPulse-b-afg8qnehfw 3s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.uniform-icon-wrapper[b-afg8qnehfw]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
animation: unifShimmer-b-afg8qnehfw 3s infinite;
}
@keyframes unifIconGradient-b-afg8qnehfw {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes unifIconPulse-b-afg8qnehfw {
0%, 100% {
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}
50% {
box-shadow: 0 8px 36px rgba(124, 58, 237, 0.6);
}
}
@keyframes unifShimmer-b-afg8qnehfw {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.uniform-title[b-afg8qnehfw] {
font-size: 28px;
font-weight: 900;
background: linear-gradient(135deg, #0f172a 0%, #2563eb 60%, #7c3aed 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
letter-spacing: -0.6px;
}
.uniform-subtitle[b-afg8qnehfw] {
font-size: 14px;
color: var(--c-text-soft);
margin: 3px 0 0;
font-weight: 500;
}
.uniform-header-right[b-afg8qnehfw] {
display: flex;
gap: 10px;
}
/* ===== 03. BOTONES ===== */
.unif-btn[b-afg8qnehfw] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border-radius: 12px;
border: none;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
font-family: inherit;
position: relative;
overflow: hidden;
}
.unif-btn[b-afg8qnehfw]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s;
}
.unif-btn:hover[b-afg8qnehfw]::before {
transform: translateX(100%);
}
.unif-btn:active[b-afg8qnehfw] {
transform: scale(0.95);
}
.unif-btn-primary[b-afg8qnehfw] {
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
background-size: 200% 200%;
color: #fff;
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}
.unif-btn-primary:hover[b-afg8qnehfw] {
background-position: 100% 50%;
box-shadow: 0 8px 28px rgba(124, 58, 237, 0.55);
transform: translateY(-2px);
}
.unif-btn-primary:disabled[b-afg8qnehfw] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.unif-btn-refresh[b-afg8qnehfw] {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
color: #475569;
border: 1.5px solid var(--c-border);
}
.unif-btn-refresh:hover[b-afg8qnehfw] {
background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
border-color: var(--c-primary-light);
color: var(--c-primary);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
}
.unif-btn-refresh i.fa-sync-alt:not(.fa-spin)[b-afg8qnehfw] {
transition: transform 0.5s;
}
.unif-btn-refresh:hover i.fa-sync-alt:not(.fa-spin)[b-afg8qnehfw] {
transform: rotate(180deg);
}
.unif-btn-clear[b-afg8qnehfw] {
background: #fff;
color: #64748b;
border: 1.5px solid var(--c-border);
}
.unif-btn-clear:hover[b-afg8qnehfw] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: var(--c-danger);
border-color: #fecaca;
transform: translateY(-2px);
}
.unif-btn-cancel[b-afg8qnehfw] {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
color: #475569;
border: 1.5px solid var(--c-border);
}
.unif-btn-cancel:hover[b-afg8qnehfw] {
background: #e2e8f0;
transform: translateY(-1px);
}
.unif-btn-success[b-afg8qnehfw] {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
background-size: 200% 200%;
color: #fff;
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
}
.unif-btn-success:hover[b-afg8qnehfw] {
background-position: 100% 50%;
box-shadow: 0 8px 28px rgba(16, 185, 129, 0.55);
transform: translateY(-2px);
}
.unif-btn-danger[b-afg8qnehfw] {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
background-size: 200% 200%;
color: #fff;
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
}
.unif-btn-danger:hover[b-afg8qnehfw] {
background-position: 100% 50%;
box-shadow: 0 8px 28px rgba(239, 68, 68, 0.55);
transform: translateY(-2px);
}
/* ===== 04. MΓTRICAS ===== */
.unif-metrics-grid[b-afg8qnehfw] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.unif-metric-card[b-afg8qnehfw] {
background: #fff;
border-radius: 18px;
padding: 20px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 2px 12px rgba(15, 23, 41, 0.06);
border: 1.5px solid #f1f5f9;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
animation: unifCardIn-b-afg8qnehfw 0.5s ease backwards;
}
.unif-metric-card:nth-child(1)[b-afg8qnehfw] {
animation-delay: 0.05s;
}
.unif-metric-card:nth-child(2)[b-afg8qnehfw] {
animation-delay: 0.1s;
}
.unif-metric-card:nth-child(3)[b-afg8qnehfw] {
animation-delay: 0.15s;
}
.unif-metric-card:nth-child(4)[b-afg8qnehfw] {
animation-delay: 0.2s;
}
@keyframes unifCardIn-b-afg8qnehfw {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.unif-metric-card[b-afg8qnehfw]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 18px 18px 0 0;
}
.unif-metric-card[b-afg8qnehfw]::after {
content: '';
position: absolute;
bottom: -50%;
right: -20%;
width: 140px;
height: 140px;
border-radius: 50%;
opacity: 0.06;
transition: opacity 0.3s, transform 0.5s;
}
.unif-metric-card:hover[b-afg8qnehfw]::after {
opacity: 0.12;
transform: scale(1.15);
}
.unif-metric-total[b-afg8qnehfw]::before {
background: linear-gradient(90deg, #2563eb, #60a5fa, #7c3aed);
}
.unif-metric-total[b-afg8qnehfw]::after {
background: #2563eb;
}
.unif-metric-stock[b-afg8qnehfw]::before {
background: linear-gradient(90deg, #059669, #34d399, #14b8a6);
}
.unif-metric-stock[b-afg8qnehfw]::after {
background: #059669;
}
.unif-metric-bajo[b-afg8qnehfw]::before {
background: linear-gradient(90deg, #d97706, #fbbf24, #f97316);
}
.unif-metric-bajo[b-afg8qnehfw]::after {
background: #d97706;
}
.unif-metric-clientes[b-afg8qnehfw]::before {
background: linear-gradient(90deg, #7c3aed, #a78bfa, #ec4899);
}
.unif-metric-clientes[b-afg8qnehfw]::after {
background: #7c3aed;
}
.unif-metric-card:hover[b-afg8qnehfw] {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 16px 36px rgba(15, 23, 41, 0.14);
border-color: #e2e8f0;
}
.unif-metric-icon[b-afg8qnehfw] {
width: 50px;
height: 50px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
z-index: 1;
}
.unif-metric-card:hover .unif-metric-icon[b-afg8qnehfw] {
transform: scale(1.15) rotate(-8deg);
}
.unif-metric-total .unif-metric-icon[b-afg8qnehfw] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.unif-metric-stock .unif-metric-icon[b-afg8qnehfw] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: #059669;
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
}
.unif-metric-bajo .unif-metric-icon[b-afg8qnehfw] {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
color: #d97706;
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
animation: unifWarningPulse-b-afg8qnehfw 2s ease-in-out infinite;
}
.unif-metric-clientes .unif-metric-icon[b-afg8qnehfw] {
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
color: #7c3aed;
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}
@keyframes unifWarningPulse-b-afg8qnehfw {
0%, 100% {
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}
50% {
box-shadow: 0 4px 20px rgba(217, 119, 6, 0.5);
}
}
.unif-metric-info[b-afg8qnehfw] {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.unif-metric-label[b-afg8qnehfw] {
font-size: 12px;
font-weight: 700;
color: var(--c-text-mute);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.unif-metric-value[b-afg8qnehfw] {
font-size: 30px;
font-weight: 900;
color: var(--c-text);
line-height: 1.1;
letter-spacing: -1px;
animation: unifCountUp-b-afg8qnehfw 0.8s ease;
}
@keyframes unifCountUp-b-afg8qnehfw {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.unif-metric-trend[b-afg8qnehfw] {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 4px;
position: relative;
z-index: 1;
transition: transform 0.25s;
}
.unif-metric-card:hover .unif-metric-trend[b-afg8qnehfw] {
transform: scale(1.05);
}
.unif-metric-trend.up[b-afg8qnehfw] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: #059669;
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
}
.unif-metric-trend.down[b-afg8qnehfw] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: #dc2626;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}
.unif-metric-trend.neutral[b-afg8qnehfw] {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
color: #64748b;
}
/* ===== 05. FILTROS ===== */
.unif-filters-card[b-afg8qnehfw] {
background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
border-radius: 18px;
padding: 16px 20px;
margin-bottom: 24px;
box-shadow: 0 2px 14px rgba(15, 23, 41, 0.06);
border: 1.5px solid #f1f5f9;
position: relative;
overflow: hidden;
}
.unif-filters-card[b-afg8qnehfw]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899, #f59e0b);
background-size: 200% 100%;
animation: unifRainbowMove-b-afg8qnehfw 4s linear infinite;
}
@keyframes unifRainbowMove-b-afg8qnehfw {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
.unif-filters-row[b-afg8qnehfw] {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.unif-filter-group[b-afg8qnehfw] {
position: relative;
display: flex;
align-items: center;
}
.unif-filter-search[b-afg8qnehfw] {
flex: 1;
min-width: 240px;
}
.unif-filter-icon[b-afg8qnehfw] {
position: absolute;
left: 14px;
color: var(--c-text-mute);
font-size: 14px;
pointer-events: none;
transition: color 0.25s, transform 0.25s;
}
.unif-filter-input[b-afg8qnehfw],
.unif-filter-select[b-afg8qnehfw] {
width: 100%;
padding: 11px 14px 11px 40px;
border: 1.5px solid var(--c-border);
border-radius: 12px;
font-size: 14px;
color: var(--c-text);
background: #f8fafc;
outline: none;
transition: all 0.25s;
font-family: inherit;
font-weight: 500;
}
.unif-filter-input:focus[b-afg8qnehfw],
.unif-filter-select:focus[b-afg8qnehfw] {
border-color: var(--c-violet);
background: #fff;
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
transform: translateY(-1px);
}
.unif-filter-input:focus + .unif-filter-icon[b-afg8qnehfw] {
color: var(--c-violet);
transform: scale(1.1);
}
/* ===== 06. GRID DE UNIFORMES ===== */
.unif-grid[b-afg8qnehfw] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.unif-card[b-afg8qnehfw] {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 14px rgba(15, 23, 41, 0.07);
border: 1.5px solid #f1f5f9;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
animation: unifCardIn-b-afg8qnehfw 0.4s ease backwards;
}
.unif-card:hover[b-afg8qnehfw] {
transform: translateY(-8px) scale(1.015);
box-shadow: 0 20px 48px rgba(15, 23, 41, 0.16);
border-color: #ddd6fe;
}
.unif-card[b-afg8qnehfw]::before {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
padding: 2px;
background: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
z-index: 1;
}
.unif-card:hover[b-afg8qnehfw]::before {
opacity: 1;
}
.unif-card-low[b-afg8qnehfw] {
border-color: #fecaca;
}
.unif-card-low:hover[b-afg8qnehfw] {
border-color: #f87171;
box-shadow: 0 20px 48px rgba(220, 38, 38, 0.22);
}
.unif-card-low[b-afg8qnehfw]::before {
background: linear-gradient(135deg, #dc2626, #f97316, #fbbf24);
}
/* ---------- IMAGEN CON PLACEHOLDER SVG ---------- */
.unif-card-image[b-afg8qnehfw] {
position: relative;
height: 190px;
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f5f3ff 100%);
background-size: 200% 200%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
animation: unifBgShift-b-afg8qnehfw 8s ease-in-out infinite;
}
@keyframes unifBgShift-b-afg8qnehfw {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.unif-card-image[b-afg8qnehfw]::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 60%;
background-repeat: no-repeat;
background-position: center 35%;
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
z-index: 0;
}
.unif-card-image.img-error[b-afg8qnehfw]::before {
opacity: 1;
}
.unif-card-image img[b-afg8qnehfw] {
width: 100%;
height: 100%;
object-fit: contain;
padding: 16px;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s;
position: relative;
z-index: 2;
}
.unif-card:hover .unif-card-image img[b-afg8qnehfw] {
transform: scale(1.12) rotate(-2deg);
filter: drop-shadow(0 12px 24px rgba(37, 99, 235, 0.25));
}
.unif-card-image[b-afg8qnehfw]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
transform: translateX(-100%);
transition: transform 0.7s;
pointer-events: none;
z-index: 3;
}
.unif-card:hover .unif-card-image[b-afg8qnehfw]::after {
transform: translateX(100%);
}
/* ---------- BADGES ---------- */
.unif-card-badge[b-afg8qnehfw] {
position: absolute;
top: 12px;
right: 12px;
font-size: 10px;
font-weight: 800;
padding: 5px 12px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 5px;
text-transform: uppercase;
letter-spacing: 0.4px;
z-index: 4;
backdrop-filter: blur(8px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.unif-badge-ok[b-afg8qnehfw] {
background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(209, 250, 229, 0.95) 100%);
color: #059669;
border: 1px solid rgba(5, 150, 105, 0.2);
}
.unif-badge-low[b-afg8qnehfw] {
background: linear-gradient(135deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 226, 226, 0.95) 100%);
color: #dc2626;
border: 1px solid rgba(220, 38, 38, 0.2);
animation: unifBadgePulse-b-afg8qnehfw 1.8s ease-in-out infinite;
}
.unif-badge-out[b-afg8qnehfw] {
background: linear-gradient(135deg, rgba(241, 245, 249, 0.95) 0%, rgba(226, 232, 240, 0.95) 100%);
color: #64748b;
border: 1px solid rgba(100, 116, 139, 0.2);
}
@keyframes unifBadgePulse-b-afg8qnehfw {
0%, 100% {
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2), 0 0 0 0 rgba(220, 38, 38, 0.4);
}
50% {
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3), 0 0 0 8px rgba(220, 38, 38, 0);
}
}
/* ---------- BODY ---------- */
.unif-card-body[b-afg8qnehfw] {
padding: 16px;
position: relative;
z-index: 2;
}
.unif-card-cliente[b-afg8qnehfw] {
font-size: 11px;
font-weight: 800;
color: var(--c-violet);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.unif-card-cliente i[b-afg8qnehfw] {
font-size: 10px;
animation: unifBuildingFloat-b-afg8qnehfw 3s ease-in-out infinite;
}
@keyframes unifBuildingFloat-b-afg8qnehfw {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-2px);
}
}
.unif-card-title[b-afg8qnehfw] {
font-size: 17px;
font-weight: 900;
color: var(--c-text);
margin: 0 0 12px;
line-height: 1.3;
letter-spacing: -0.3px;
}
.unif-card-tags[b-afg8qnehfw] {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.unif-tag[b-afg8qnehfw] {
font-size: 10px;
font-weight: 800;
padding: 4px 10px;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
transition: transform 0.25s;
}
.unif-card:hover .unif-tag[b-afg8qnehfw] {
transform: translateY(-2px);
}
.unif-tag-tipo[b-afg8qnehfw] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #2563eb;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}
.unif-tag-talla[b-afg8qnehfw] {
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
color: #7c3aed;
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.15);
}
.unif-tag-color[b-afg8qnehfw] {
background: #f8fafc;
color: #475569;
border: 1.5px solid #e2e8f0;
position: relative;
padding-left: 22px;
overflow: hidden;
}
.unif-tag-color[b-afg8qnehfw]::before {
content: '';
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color, #ccc);
border: 1.5px solid rgba(255,255,255,0.8);
box-shadow: 0 0 0 1px rgba(0,0,0,0.08), inset 0 1px 2px rgba(0,0,0,0.15);
}
.unif-card-logo[b-afg8qnehfw] {
font-size: 11px;
color: var(--c-text-soft);
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
font-weight: 600;
padding: 6px 10px;
background: #f8fafc;
border-radius: 8px;
border-left: 3px solid var(--c-violet-light);
}
.unif-card-logo i[b-afg8qnehfw] {
color: var(--c-pink);
animation: unifTagWiggle-b-afg8qnehfw 4s ease-in-out infinite;
}
@keyframes unifTagWiggle-b-afg8qnehfw {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(-8deg);
}
75% {
transform: rotate(8deg);
}
}
/* ---------- PROGRESS BAR PREMIUM ---------- */
.unif-card-stock-bar[b-afg8qnehfw] {
margin-top: 10px;
}
.unif-stock-label[b-afg8qnehfw] {
display: flex;
justify-content: space-between;
font-size: 11px;
font-weight: 800;
color: var(--c-text-mute);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.unif-stock-number[b-afg8qnehfw] {
color: var(--c-text);
font-weight: 900;
font-size: 12px;
}
.unif-stock-track[b-afg8qnehfw] {
height: 8px;
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%);
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 3px rgba(15, 23, 41, 0.08);
}
.unif-stock-track[b-afg8qnehfw]::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.3) 4px, rgba(255,255,255,0.3) 6px);
opacity: 0.5;
pointer-events: none;
}
.unif-stock-fill[b-afg8qnehfw] {
height: 100%;
border-radius: 20px;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.unif-stock-fill[b-afg8qnehfw]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
transform: translateX(-100%);
animation: unifBarShimmer-b-afg8qnehfw 2s infinite;
}
@keyframes unifBarShimmer-b-afg8qnehfw {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(200%);
}
}
.unif-stock-fill.ok[b-afg8qnehfw] {
background: linear-gradient(90deg, #059669 0%, #10b981 40%, #34d399 100%);
box-shadow: 0 0 12px rgba(16, 185, 129, 0.5), inset 0 1px 2px rgba(255,255,255,0.3);
}
.unif-stock-fill.low[b-afg8qnehfw] {
background: linear-gradient(90deg, #dc2626 0%, #ef4444 40%, #f87171 100%);
box-shadow: 0 0 12px rgba(239, 68, 68, 0.5), inset 0 1px 2px rgba(255,255,255,0.3);
animation: unifBarPulse-b-afg8qnehfw 1.8s ease-in-out infinite;
}
@keyframes unifBarPulse-b-afg8qnehfw {
0%, 100% {
box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
}
}
/* ---------- ACCIONES ---------- */
.unif-card-actions[b-afg8qnehfw] {
display: flex;
gap: 6px;
padding: 10px 12px;
border-top: 1.5px solid #f1f5f9;
background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
justify-content: center;
position: relative;
}
.unif-action-btn[b-afg8qnehfw] {
width: 38px;
height: 38px;
border-radius: 11px;
border: none;
background: transparent;
color: var(--c-text-mute);
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}
.unif-action-btn:hover[b-afg8qnehfw] {
transform: translateY(-3px) scale(1.15);
box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.unif-action-btn:active[b-afg8qnehfw] {
transform: scale(0.9);
}
.unif-action-edit:hover[b-afg8qnehfw] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: var(--c-primary);
}
.unif-action-mov:hover[b-afg8qnehfw] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: var(--c-success);
}
.unif-action-mov-out:hover[b-afg8qnehfw] {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
color: var(--c-warning);
}
.unif-action-delete:hover[b-afg8qnehfw] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: var(--c-danger);
}
/* ===== 07. ESTADOS VACΓOS / CARGA ===== */
.unif-loading[b-afg8qnehfw],
.unif-empty[b-afg8qnehfw] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
text-align: center;
gap: 16px;
}
.unif-loading-spinner[b-afg8qnehfw] {
width: 52px;
height: 52px;
border: 4px solid transparent;
border-top-color: var(--c-primary);
border-right-color: var(--c-violet);
border-bottom-color: var(--c-pink);
border-left-color: var(--c-warning);
border-radius: 50%;
animation: unifSpin-b-afg8qnehfw 1s linear infinite;
box-shadow: 0 0 24px rgba(124, 58, 237, 0.3);
}
@keyframes unifSpin-b-afg8qnehfw {
to {
transform: rotate(360deg);
}
}
.unif-loading p[b-afg8qnehfw] {
color: var(--c-text-soft);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.3px;
animation: unifDots-b-afg8qnehfw 1.4s ease-in-out infinite;
}
@keyframes unifDots-b-afg8qnehfw {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.unif-empty-icon[b-afg8qnehfw] {
font-size: 72px;
background: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: unifEmptyFloat-b-afg8qnehfw 3s ease-in-out infinite;
filter: drop-shadow(0 8px 20px rgba(124, 58, 237, 0.3));
}
@keyframes unifEmptyFloat-b-afg8qnehfw {
0%, 100% {
transform: translateY(0) rotate(-3deg);
}
50% {
transform: translateY(-14px) rotate(3deg);
}
}
.unif-empty h3[b-afg8qnehfw] {
font-size: 22px;
font-weight: 900;
background: linear-gradient(135deg, #0f172a 0%, #7c3aed 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
}
.unif-empty p[b-afg8qnehfw] {
color: var(--c-text-soft);
margin: 0;
max-width: 420px;
line-height: 1.55;
font-size: 14px;
font-weight: 500;
}
/* ===== 08. MODALES ===== */
.unif-modal-overlay[b-afg8qnehfw] {
position: fixed;
inset: 0;
background: rgba(15, 23, 41, 0.6);
backdrop-filter: blur(8px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: unifOverlayIn-b-afg8qnehfw 0.25s ease;
}
@keyframes unifOverlayIn-b-afg8qnehfw {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(8px);
}
}
.unif-modal[b-afg8qnehfw] {
background: #fff;
border-radius: 22px;
width: 100%;
max-width: 620px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 32px 80px rgba(15, 23, 41, 0.35);
animation: unifModalIn-b-afg8qnehfw 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
}
.unif-modal[b-afg8qnehfw]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899, #f59e0b, #2563eb);
background-size: 300% 100%;
animation: unifRainbowMove-b-afg8qnehfw 6s linear infinite;
z-index: 2;
}
.unif-modal-sm[b-afg8qnehfw] {
max-width: 440px;
}
.unif-modal-lg[b-afg8qnehfw] {
max-width: 780px;
}
@keyframes unifModalIn-b-afg8qnehfw {
from {
opacity: 0;
transform: scale(0.9) translateY(30px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.unif-modal-header[b-afg8qnehfw] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
color: #fff;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.unif-modal-header[b-afg8qnehfw]::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 65%);
pointer-events: none;
}
.unif-modal-header.header-entrada[b-afg8qnehfw] {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}
.unif-modal-header.header-salida[b-afg8qnehfw] {
background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}
.unif-modal-header.header-eliminar[b-afg8qnehfw] {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}
.unif-modal-header h2[b-afg8qnehfw] {
font-size: 19px;
font-weight: 900;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
position: relative;
z-index: 1;
letter-spacing: -0.3px;
}
.unif-modal-close[b-afg8qnehfw] {
width: 36px;
height: 36px;
border-radius: 11px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
z-index: 1;
}
.unif-modal-close:hover[b-afg8qnehfw] {
background: rgba(255,255,255,0.35);
transform: rotate(90deg) scale(1.08);
}
.unif-modal-body[b-afg8qnehfw] {
padding: 24px;
overflow-y: auto;
flex: 1;
}
.unif-modal-body[b-afg8qnehfw]::-webkit-scrollbar {
width: 8px;
}
.unif-modal-body[b-afg8qnehfw]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.unif-modal-body[b-afg8qnehfw]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #7c3aed, #2563eb);
border-radius: 4px;
}
.unif-modal-footer[b-afg8qnehfw] {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 18px 24px;
border-top: 1.5px solid #f1f5f9;
background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
flex-shrink: 0;
}
/* ===== 09. UPLOADER DE IMAGEN ===== */
.unif-image-uploader-section[b-afg8qnehfw] {
margin-bottom: 22px;
padding-bottom: 20px;
border-bottom: 1.5px dashed #e2e8f0;
}
.unif-uploader-label[b-afg8qnehfw] {
font-size: 12px;
font-weight: 800;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.unif-uploader-label i[b-afg8qnehfw] {
color: var(--c-violet);
}
.unif-image-uploader[b-afg8qnehfw] {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 16px;
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f5f3ff 100%);
background-size: 200% 200%;
border-radius: 16px;
border: 2px dashed #c7d2fe;
transition: all 0.3s;
animation: unifBgShift-b-afg8qnehfw 8s ease-in-out infinite;
}
.unif-image-uploader:hover[b-afg8qnehfw] {
border-color: var(--c-violet);
border-style: solid;
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
}
.unif-uploader-preview[b-afg8qnehfw] {
width: 140px;
height: 140px;
border-radius: 14px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(15, 23, 41, 0.08);
position: relative;
}
.unif-uploader-preview img[b-afg8qnehfw] {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8px;
transition: transform 0.3s;
}
.unif-image-uploader:hover .unif-uploader-preview img[b-afg8qnehfw] {
transform: scale(1.06);
}
.unif-uploader-placeholder[b-afg8qnehfw] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: #c7d2fe;
padding: 10px;
text-align: center;
}
.unif-uploader-placeholder i[b-afg8qnehfw] {
font-size: 44px;
animation: unifEmptyFloat-b-afg8qnehfw 3s ease-in-out infinite;
}
.unif-uploader-placeholder span[b-afg8qnehfw] {
font-size: 11px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.unif-uploader-info[b-afg8qnehfw] {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.unif-uploader-nombre[b-afg8qnehfw] {
font-size: 13px;
color: #475569;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
line-height: 1.5;
}
.unif-uploader-nombre i[b-afg8qnehfw] {
color: var(--c-violet);
font-size: 14px;
flex-shrink: 0;
}
.unif-uploader-botones[b-afg8qnehfw] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.unif-uploader-btn[b-afg8qnehfw] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 11px;
border: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
font-family: inherit;
position: relative;
overflow: hidden;
}
.unif-uploader-btn[b-afg8qnehfw]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s;
}
.unif-uploader-btn:hover[b-afg8qnehfw]::before {
transform: translateX(100%);
}
.unif-uploader-btn:active[b-afg8qnehfw] {
transform: scale(0.96);
}
.unif-uploader-btn-primary[b-afg8qnehfw] {
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
color: #fff;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.unif-uploader-btn-primary:hover[b-afg8qnehfw] {
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
transform: translateY(-2px);
}
.unif-uploader-btn-danger[b-afg8qnehfw] {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: #fff;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}
.unif-uploader-btn-danger:hover[b-afg8qnehfw] {
box-shadow: 0 8px 24px rgba(239, 68, 68, 0.5);
transform: translateY(-2px);
}
.unif-uploader-btn input[type="file"][b-afg8qnehfw] {
display: none;
}
.unif-uploader-hint[b-afg8qnehfw] {
font-size: 11px;
color: #64748b;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.6);
border-radius: 8px;
line-height: 1.4;
}
.unif-uploader-hint i[b-afg8qnehfw] {
color: var(--c-warning);
animation: unifTagWiggle-b-afg8qnehfw 4s ease-in-out infinite;
}
.unif-uploader-hint code[b-afg8qnehfw] {
background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
color: var(--c-violet);
font-weight: 700;
font-family: 'Courier New', monospace;
}
/* ===== 10. FORMULARIO ===== */
.unif-form-grid[b-afg8qnehfw] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.unif-form-full[b-afg8qnehfw] {
grid-column: 1 / -1;
}
.unif-form-group[b-afg8qnehfw] {
display: flex;
flex-direction: column;
gap: 6px;
}
.unif-form-group label[b-afg8qnehfw] {
font-size: 12px;
font-weight: 800;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.unif-form-input[b-afg8qnehfw] {
padding: 11px 14px;
border: 1.5px solid var(--c-border);
border-radius: 12px;
font-size: 14px;
color: var(--c-text);
background: #f8fafc;
outline: none;
transition: all 0.25s;
font-family: inherit;
font-weight: 500;
}
.unif-form-input:focus[b-afg8qnehfw] {
border-color: var(--c-violet);
background: #fff;
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
transform: translateY(-1px);
}
.unif-form-input-lg[b-afg8qnehfw] {
font-size: 20px;
font-weight: 900;
text-align: center;
color: var(--c-violet);
letter-spacing: 0.5px;
}
.unif-form-textarea[b-afg8qnehfw] {
resize: vertical;
min-height: 80px;
}
.unif-color-input-group[b-afg8qnehfw] {
display: flex;
gap: 10px;
align-items: center;
}
.unif-color-picker[b-afg8qnehfw] {
width: 48px;
height: 44px;
border: 2px solid var(--c-border);
border-radius: 12px;
cursor: pointer;
padding: 3px;
background: #fff;
transition: all 0.25s;
}
.unif-color-picker:hover[b-afg8qnehfw] {
border-color: var(--c-violet);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}
/* ===== 11. DETALLE ===== */
.unif-detail-grid[b-afg8qnehfw] {
display: grid;
grid-template-columns: 220px 1fr;
gap: 24px;
margin-bottom: 24px;
}
.unif-detail-image[b-afg8qnehfw] {
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f5f3ff 100%);
background-size: 200% 200%;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
aspect-ratio: 1;
animation: unifBgShift-b-afg8qnehfw 8s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.unif-detail-image[b-afg8qnehfw]::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 70%;
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
pointer-events: none;
}
.unif-detail-image img[b-afg8qnehfw] {
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
z-index: 1;
transition: transform 0.4s;
filter: drop-shadow(0 8px 16px rgba(37, 99, 235, 0.15));
}
.unif-detail-image:hover img[b-afg8qnehfw] {
transform: scale(1.08);
}
.unif-detail-info[b-afg8qnehfw] {
display: flex;
flex-direction: column;
gap: 10px;
}
.unif-detail-row[b-afg8qnehfw] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
font-size: 14px;
transition: background 0.2s;
}
.unif-detail-row:hover[b-afg8qnehfw] {
background: linear-gradient(90deg, transparent 0%, #f8fafc 20%, #f8fafc 80%, transparent 100%);
}
.unif-detail-label[b-afg8qnehfw] {
color: var(--c-text-soft);
font-weight: 700;
font-size: 13px;
}
.unif-detail-value[b-afg8qnehfw] {
color: var(--c-text);
font-weight: 800;
text-align: right;
}
.unif-sku[b-afg8qnehfw] {
font-family: 'Courier New', monospace;
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
color: var(--c-violet);
padding: 4px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(124, 58, 237, 0.15);
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.08);
}
.unif-color-dot[b-afg8qnehfw] {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.15);
vertical-align: middle;
margin-right: 8px;
}
.text-danger[b-afg8qnehfw] {
color: var(--c-danger) !important;
font-weight: 900;
}
.text-success[b-afg8qnehfw] {
color: var(--c-success) !important;
font-weight: 900;
}
.unif-detail-full[b-afg8qnehfw] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
/* ===== 12. HISTORIAL ===== */
.unif-history-section[b-afg8qnehfw] {
border-top: 1.5px solid #f1f5f9;
padding-top: 20px;
}
.unif-history-section h3[b-afg8qnehfw] {
font-size: 16px;
font-weight: 900;
color: var(--c-text);
margin: 0 0 16px;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: -0.3px;
}
.unif-history-section h3 i[b-afg8qnehfw] {
background: linear-gradient(135deg, #2563eb, #7c3aed);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: unifSpin-b-afg8qnehfw 3s linear infinite;
display: inline-block;
}
.unif-history-list[b-afg8qnehfw] {
display: flex;
flex-direction: column;
gap: 8px;
}
.unif-history-item[b-afg8qnehfw] {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: 12px;
background: #f8fafc;
border: 1.5px solid #f1f5f9;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}
.unif-history-item[b-afg8qnehfw]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
transition: width 0.25s;
}
.history-in[b-afg8qnehfw]::before {
background: linear-gradient(180deg, #059669, #34d399);
}
.history-out[b-afg8qnehfw]::before {
background: linear-gradient(180deg, #dc2626, #f87171);
}
.unif-history-item:hover[b-afg8qnehfw] {
background: #fff;
border-color: #e2e8f0;
transform: translateX(4px);
box-shadow: 0 6px 18px rgba(15, 23, 41, 0.08);
}
.unif-history-item:hover[b-afg8qnehfw]::before {
width: 6px;
}
.unif-history-icon[b-afg8qnehfw] {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
transition: transform 0.3s;
}
.unif-history-item:hover .unif-history-icon[b-afg8qnehfw] {
transform: scale(1.15) rotate(-8deg);
}
.history-in .unif-history-icon[b-afg8qnehfw] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: var(--c-success);
box-shadow: 0 3px 8px rgba(5, 150, 105, 0.2);
}
.history-out .unif-history-icon[b-afg8qnehfw] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: var(--c-danger);
box-shadow: 0 3px 8px rgba(220, 38, 38, 0.2);
}
.unif-history-info[b-afg8qnehfw] {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.unif-history-line-1[b-afg8qnehfw] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.unif-history-cantidad[b-afg8qnehfw] {
font-size: 16px;
font-weight: 900;
letter-spacing: -0.3px;
}
.history-in .unif-history-cantidad[b-afg8qnehfw] {
color: var(--c-success);
}
.history-out .unif-history-cantidad[b-afg8qnehfw] {
color: var(--c-danger);
}
.unif-history-usuario[b-afg8qnehfw] {
font-size: 11px;
color: var(--c-violet);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
border-radius: 20px;
border: 1px solid rgba(124, 58, 237, 0.15);
}
.unif-history-usuario i[b-afg8qnehfw] {
font-size: 10px;
}
.unif-history-motivo[b-afg8qnehfw] {
font-size: 12px;
color: var(--c-text-soft);
font-weight: 600;
}
.unif-history-fecha[b-afg8qnehfw] {
font-size: 11px;
color: var(--c-text-mute);
font-weight: 700;
white-space: nowrap;
padding: 4px 10px;
background: #f1f5f9;
border-radius: 20px;
}
.unif-history-empty[b-afg8qnehfw] {
color: var(--c-text-mute);
font-size: 13px;
text-align: center;
padding: 24px;
margin: 0;
font-weight: 500;
}
/* ===== 13. MOVIMIENTO ===== */
.unif-mov-item-info[b-afg8qnehfw] {
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 5px;
border: 1.5px solid #e2e8f0;
position: relative;
overflow: hidden;
}
.unif-mov-item-info[b-afg8qnehfw]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #2563eb, #7c3aed);
}
.unif-mov-item-info strong[b-afg8qnehfw] {
font-size: 15px;
color: var(--c-text);
font-weight: 900;
}
.unif-mov-item-info span[b-afg8qnehfw] {
font-size: 13px;
color: var(--c-text-soft);
font-weight: 600;
}
.unif-mov-stock-actual[b-afg8qnehfw] {
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid #e2e8f0;
font-weight: 700;
}
.unif-mov-stock-actual b[b-afg8qnehfw] {
color: var(--c-violet);
font-size: 18px;
font-weight: 900;
}
/* ===== 14. MODAL ELIMINAR ===== */
.unif-eliminar-info[b-afg8qnehfw] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.unif-eliminar-icon[b-afg8qnehfw] {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: #dc2626;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2);
animation: unifEliminarPulse-b-afg8qnehfw 2s ease-in-out infinite;
}
@keyframes unifEliminarPulse-b-afg8qnehfw {
0%, 100% {
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2);
}
50% {
box-shadow: 0 8px 32px rgba(220, 38, 38, 0.45);
}
}
.unif-eliminar-texto[b-afg8qnehfw] {
font-size: 16px;
color: #0f172a;
margin: 0;
line-height: 1.5;
}
.unif-eliminar-texto strong[b-afg8qnehfw] {
color: #dc2626;
font-weight: 900;
}
.unif-eliminar-detalle[b-afg8qnehfw] {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
padding: 12px 20px;
background: #f8fafc;
border-radius: 12px;
border: 1.5px solid #e2e8f0;
width: 100%;
}
.unif-eliminar-sku[b-afg8qnehfw] {
font-family: 'Courier New', monospace;
font-size: 12px;
font-weight: 700;
color: #7c3aed;
padding: 3px 10px;
background: #f5f3ff;
border-radius: 6px;
}
.unif-eliminar-cliente[b-afg8qnehfw] {
font-size: 13px;
color: #475569;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.unif-eliminar-aviso[b-afg8qnehfw] {
font-size: 12px;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fffbeb;
border-radius: 8px;
border-left: 3px solid #fbbf24;
color: #92400e;
font-weight: 600;
text-align: left;
width: 100%;
}
/* ===== 15. RESPONSIVE ===== */
@media (max-width: 768px) {
.uniform-container[b-afg8qnehfw] {
padding: 16px;
}
.uniform-header[b-afg8qnehfw] {
flex-direction: column;
align-items: flex-start;
}
.uniform-header-right[b-afg8qnehfw] {
width: 100%;
}
.uniform-header-right .unif-btn[b-afg8qnehfw] {
flex: 1;
justify-content: center;
}
.unif-metrics-grid[b-afg8qnehfw] {
grid-template-columns: 1fr 1fr;
}
.unif-grid[b-afg8qnehfw] {
grid-template-columns: 1fr;
}
.unif-form-grid[b-afg8qnehfw] {
grid-template-columns: 1fr;
}
.unif-detail-grid[b-afg8qnehfw] {
grid-template-columns: 1fr;
}
.unif-detail-image[b-afg8qnehfw] {
max-width: 180px;
margin: 0 auto;
}
.unif-filters-row[b-afg8qnehfw] {
flex-direction: column;
}
.unif-filter-group[b-afg8qnehfw] {
width: 100%;
}
.unif-filter-search[b-afg8qnehfw] {
min-width: 100%;
}
.uniform-title[b-afg8qnehfw] {
font-size: 22px;
}
.unif-image-uploader[b-afg8qnehfw] {
flex-direction: column;
}
.unif-uploader-preview[b-afg8qnehfw] {
width: 100%;
max-width: 200px;
height: 160px;
margin: 0 auto;
}
.unif-uploader-info[b-afg8qnehfw] {
width: 100%;
}
}
@media (max-width: 480px) {
.unif-metrics-grid[b-afg8qnehfw] {
grid-template-columns: 1fr;
}
.unif-btn span[b-afg8qnehfw] {
display: none;
}
.unif-btn[b-afg8qnehfw] {
padding: 11px 14px;
}
.unif-metric-value[b-afg8qnehfw] {
font-size: 24px;
}
.unif-uploader-botones[b-afg8qnehfw] {
flex-direction: column;
}
.unif-uploader-btn[b-afg8qnehfw] {
width: 100%;
justify-content: center;
}
}
/* ===== 16. ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
.uniform-container[b-afg8qnehfw],
.uniform-icon-wrapper[b-afg8qnehfw],
.unif-metric-card[b-afg8qnehfw],
.unif-card[b-afg8qnehfw],
.unif-btn[b-afg8qnehfw],
.unif-stock-fill[b-afg8qnehfw],
.unif-empty-icon[b-afg8qnehfw],
.unif-history-section h3 i[b-afg8qnehfw],
.unif-uploader-placeholder i[b-afg8qnehfw],
.unif-eliminar-icon[b-afg8qnehfw],
.unif-image-uploader[b-afg8qnehfw] {
animation: none !important;
transition-duration: 0.01ms !important;
}
}
/* ===== 17. ESPECΓFICAS DE GENERAL ===== */
/* Icono con gradiente naranja/Γ‘mbar */
.uniform-icon-wrapper.icon-general[b-afg8qnehfw] {
background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #dc2626 100%);
background-size: 200% 200%;
box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
}
.uniform-icon-wrapper.icon-general[b-afg8qnehfw]::after {
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
}
/* Tag de categorΓa */
.unif-tag-categoria[b-afg8qnehfw] {
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
color: #c2410c;
box-shadow: 0 2px 6px rgba(194, 65, 12, 0.15);
}
/* Tag de unidad de medida */
.unif-tag-unidad[b-afg8qnehfw] {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
color: #92400e;
box-shadow: 0 2px 6px rgba(146, 64, 14, 0.15);
}
/* Specs adicionales (medidas, material) */
.unif-card-specs[b-afg8qnehfw] {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 11px;
color: #64748b;
margin-bottom: 12px;
font-weight: 600;
}
.unif-card-specs span[b-afg8qnehfw] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
background: #f8fafc;
border-radius: 8px;
border-left: 2px solid #cbd5e1;
}
.unif-card-specs i[b-afg8qnehfw] {
font-size: 10px;
color: #94a3b8;
}
/* /Pages/Stock/Stock_Productos_Limpieza.razor.rz.scp.css */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
STOCK PRODUCTOS DE LIMPIEZA β CSS Premium
Codeado por π¦Ύ Hefesto 15.1 Pro Max | Sr. Ignacio
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* ===== 01. VARIABLES GLOBALES ===== */
.uniform-container[b-dwmpgvqnuf] {
--c-primary: #2563eb;
--c-primary-light: #60a5fa;
--c-violet: #7c3aed;
--c-violet-light: #a78bfa;
--c-success: #059669;
--c-success-light: #34d399;
--c-warning: #d97706;
--c-warning-light: #fbbf24;
--c-danger: #dc2626;
--c-danger-light: #f87171;
--c-teal: #14b8a6;
--c-pink: #ec4899;
--c-bg: #f8fafc;
--c-bg-soft: #f1f5f9;
--c-text: #0f172a;
--c-text-soft: #64748b;
--c-text-mute: #94a3b8;
--c-border: #e2e8f0;
padding: 24px;
max-width: 1600px;
margin: 0 auto;
animation: unifFadeIn-b-dwmpgvqnuf 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes unifFadeIn-b-dwmpgvqnuf {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== 02. HEADER ===== */
.uniform-header[b-dwmpgvqnuf] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.uniform-header-left[b-dwmpgvqnuf] {
display: flex;
align-items: center;
gap: 16px;
}
.uniform-title-group[b-dwmpgvqnuf] {
display: flex;
align-items: center;
gap: 14px;
}
.uniform-icon-wrapper[b-dwmpgvqnuf] {
width: 56px;
height: 56px;
border-radius: 16px;
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);
background-size: 200% 200%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
animation: unifIconGradient-b-dwmpgvqnuf 4s ease infinite, unifIconPulse-b-dwmpgvqnuf 3s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.uniform-icon-wrapper[b-dwmpgvqnuf]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
animation: unifShimmer-b-dwmpgvqnuf 3s infinite;
}
@keyframes unifIconGradient-b-dwmpgvqnuf {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes unifIconPulse-b-dwmpgvqnuf {
0%, 100% {
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}
50% {
box-shadow: 0 8px 36px rgba(124, 58, 237, 0.6);
}
}
@keyframes unifShimmer-b-dwmpgvqnuf {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.uniform-title[b-dwmpgvqnuf] {
font-size: 28px;
font-weight: 900;
background: linear-gradient(135deg, #0f172a 0%, #2563eb 60%, #7c3aed 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
letter-spacing: -0.6px;
}
.uniform-subtitle[b-dwmpgvqnuf] {
font-size: 14px;
color: var(--c-text-soft);
margin: 3px 0 0;
font-weight: 500;
}
.uniform-header-right[b-dwmpgvqnuf] {
display: flex;
gap: 10px;
}
/* ===== 03. BOTONES ===== */
.unif-btn[b-dwmpgvqnuf] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border-radius: 12px;
border: none;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
font-family: inherit;
position: relative;
overflow: hidden;
}
.unif-btn[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s;
}
.unif-btn:hover[b-dwmpgvqnuf]::before {
transform: translateX(100%);
}
.unif-btn:active[b-dwmpgvqnuf] {
transform: scale(0.95);
}
.unif-btn-primary[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
background-size: 200% 200%;
color: #fff;
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}
.unif-btn-primary:hover[b-dwmpgvqnuf] {
background-position: 100% 50%;
box-shadow: 0 8px 28px rgba(124, 58, 237, 0.55);
transform: translateY(-2px);
}
.unif-btn-primary:disabled[b-dwmpgvqnuf] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.unif-btn-refresh[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
color: #475569;
border: 1.5px solid var(--c-border);
}
.unif-btn-refresh:hover[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
border-color: var(--c-primary-light);
color: var(--c-primary);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
}
.unif-btn-refresh i.fa-sync-alt:not(.fa-spin)[b-dwmpgvqnuf] {
transition: transform 0.5s;
}
.unif-btn-refresh:hover i.fa-sync-alt:not(.fa-spin)[b-dwmpgvqnuf] {
transform: rotate(180deg);
}
.unif-btn-clear[b-dwmpgvqnuf] {
background: #fff;
color: #64748b;
border: 1.5px solid var(--c-border);
}
.unif-btn-clear:hover[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: var(--c-danger);
border-color: #fecaca;
transform: translateY(-2px);
}
.unif-btn-cancel[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
color: #475569;
border: 1.5px solid var(--c-border);
}
.unif-btn-cancel:hover[b-dwmpgvqnuf] {
background: #e2e8f0;
transform: translateY(-1px);
}
.unif-btn-success[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
background-size: 200% 200%;
color: #fff;
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
}
.unif-btn-success:hover[b-dwmpgvqnuf] {
background-position: 100% 50%;
box-shadow: 0 8px 28px rgba(16, 185, 129, 0.55);
transform: translateY(-2px);
}
.unif-btn-danger[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
background-size: 200% 200%;
color: #fff;
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
}
.unif-btn-danger:hover[b-dwmpgvqnuf] {
background-position: 100% 50%;
box-shadow: 0 8px 28px rgba(239, 68, 68, 0.55);
transform: translateY(-2px);
}
/* ===== 04. MΓTRICAS ===== */
.unif-metrics-grid[b-dwmpgvqnuf] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.unif-metric-card[b-dwmpgvqnuf] {
background: #fff;
border-radius: 18px;
padding: 20px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 2px 12px rgba(15, 23, 41, 0.06);
border: 1.5px solid #f1f5f9;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
animation: unifCardIn-b-dwmpgvqnuf 0.5s ease backwards;
}
.unif-metric-card:nth-child(1)[b-dwmpgvqnuf] {
animation-delay: 0.05s;
}
.unif-metric-card:nth-child(2)[b-dwmpgvqnuf] {
animation-delay: 0.1s;
}
.unif-metric-card:nth-child(3)[b-dwmpgvqnuf] {
animation-delay: 0.15s;
}
.unif-metric-card:nth-child(4)[b-dwmpgvqnuf] {
animation-delay: 0.2s;
}
@keyframes unifCardIn-b-dwmpgvqnuf {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.unif-metric-card[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 18px 18px 0 0;
}
.unif-metric-card[b-dwmpgvqnuf]::after {
content: '';
position: absolute;
bottom: -50%;
right: -20%;
width: 140px;
height: 140px;
border-radius: 50%;
opacity: 0.06;
transition: opacity 0.3s, transform 0.5s;
}
.unif-metric-card:hover[b-dwmpgvqnuf]::after {
opacity: 0.12;
transform: scale(1.15);
}
.unif-metric-total[b-dwmpgvqnuf]::before {
background: linear-gradient(90deg, #2563eb, #60a5fa, #7c3aed);
}
.unif-metric-total[b-dwmpgvqnuf]::after {
background: #2563eb;
}
.unif-metric-stock[b-dwmpgvqnuf]::before {
background: linear-gradient(90deg, #059669, #34d399, #14b8a6);
}
.unif-metric-stock[b-dwmpgvqnuf]::after {
background: #059669;
}
.unif-metric-bajo[b-dwmpgvqnuf]::before {
background: linear-gradient(90deg, #d97706, #fbbf24, #f97316);
}
.unif-metric-bajo[b-dwmpgvqnuf]::after {
background: #d97706;
}
.unif-metric-clientes[b-dwmpgvqnuf]::before {
background: linear-gradient(90deg, #7c3aed, #a78bfa, #ec4899);
}
.unif-metric-clientes[b-dwmpgvqnuf]::after {
background: #7c3aed;
}
.unif-metric-card:hover[b-dwmpgvqnuf] {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 16px 36px rgba(15, 23, 41, 0.14);
border-color: #e2e8f0;
}
.unif-metric-icon[b-dwmpgvqnuf] {
width: 50px;
height: 50px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
z-index: 1;
}
.unif-metric-card:hover .unif-metric-icon[b-dwmpgvqnuf] {
transform: scale(1.15) rotate(-8deg);
}
.unif-metric-total .unif-metric-icon[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.unif-metric-stock .unif-metric-icon[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: #059669;
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
}
.unif-metric-bajo .unif-metric-icon[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
color: #d97706;
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
animation: unifWarningPulse-b-dwmpgvqnuf 2s ease-in-out infinite;
}
.unif-metric-clientes .unif-metric-icon[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
color: #7c3aed;
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}
@keyframes unifWarningPulse-b-dwmpgvqnuf {
0%, 100% {
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}
50% {
box-shadow: 0 4px 20px rgba(217, 119, 6, 0.5);
}
}
.unif-metric-info[b-dwmpgvqnuf] {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.unif-metric-label[b-dwmpgvqnuf] {
font-size: 12px;
font-weight: 700;
color: var(--c-text-mute);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.unif-metric-value[b-dwmpgvqnuf] {
font-size: 30px;
font-weight: 900;
color: var(--c-text);
line-height: 1.1;
letter-spacing: -1px;
animation: unifCountUp-b-dwmpgvqnuf 0.8s ease;
}
@keyframes unifCountUp-b-dwmpgvqnuf {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.unif-metric-trend[b-dwmpgvqnuf] {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 4px;
position: relative;
z-index: 1;
transition: transform 0.25s;
}
.unif-metric-card:hover .unif-metric-trend[b-dwmpgvqnuf] {
transform: scale(1.05);
}
.unif-metric-trend.up[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: #059669;
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
}
.unif-metric-trend.down[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: #dc2626;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}
.unif-metric-trend.neutral[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
color: #64748b;
}
/* ===== 05. FILTROS ===== */
.unif-filters-card[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
border-radius: 18px;
padding: 16px 20px;
margin-bottom: 24px;
box-shadow: 0 2px 14px rgba(15, 23, 41, 0.06);
border: 1.5px solid #f1f5f9;
position: relative;
overflow: hidden;
}
.unif-filters-card[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899, #f59e0b);
background-size: 200% 100%;
animation: unifRainbowMove-b-dwmpgvqnuf 4s linear infinite;
}
@keyframes unifRainbowMove-b-dwmpgvqnuf {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
.unif-filters-row[b-dwmpgvqnuf] {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.unif-filter-group[b-dwmpgvqnuf] {
position: relative;
display: flex;
align-items: center;
}
.unif-filter-search[b-dwmpgvqnuf] {
flex: 1;
min-width: 240px;
}
.unif-filter-icon[b-dwmpgvqnuf] {
position: absolute;
left: 14px;
color: var(--c-text-mute);
font-size: 14px;
pointer-events: none;
transition: color 0.25s, transform 0.25s;
}
.unif-filter-input[b-dwmpgvqnuf],
.unif-filter-select[b-dwmpgvqnuf] {
width: 100%;
padding: 11px 14px 11px 40px;
border: 1.5px solid var(--c-border);
border-radius: 12px;
font-size: 14px;
color: var(--c-text);
background: #f8fafc;
outline: none;
transition: all 0.25s;
font-family: inherit;
font-weight: 500;
}
.unif-filter-input:focus[b-dwmpgvqnuf],
.unif-filter-select:focus[b-dwmpgvqnuf] {
border-color: var(--c-violet);
background: #fff;
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
transform: translateY(-1px);
}
.unif-filter-input:focus + .unif-filter-icon[b-dwmpgvqnuf] {
color: var(--c-violet);
transform: scale(1.1);
}
/* ===== 06. GRID DE UNIFORMES ===== */
.unif-grid[b-dwmpgvqnuf] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.unif-card[b-dwmpgvqnuf] {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 14px rgba(15, 23, 41, 0.07);
border: 1.5px solid #f1f5f9;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
animation: unifCardIn-b-dwmpgvqnuf 0.4s ease backwards;
}
.unif-card:hover[b-dwmpgvqnuf] {
transform: translateY(-8px) scale(1.015);
box-shadow: 0 20px 48px rgba(15, 23, 41, 0.16);
border-color: #ddd6fe;
}
.unif-card[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
padding: 2px;
background: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
z-index: 1;
}
.unif-card:hover[b-dwmpgvqnuf]::before {
opacity: 1;
}
.unif-card-low[b-dwmpgvqnuf] {
border-color: #fecaca;
}
.unif-card-low:hover[b-dwmpgvqnuf] {
border-color: #f87171;
box-shadow: 0 20px 48px rgba(220, 38, 38, 0.22);
}
.unif-card-low[b-dwmpgvqnuf]::before {
background: linear-gradient(135deg, #dc2626, #f97316, #fbbf24);
}
/* ---------- IMAGEN CON PLACEHOLDER SVG ---------- */
.unif-card-image[b-dwmpgvqnuf] {
position: relative;
height: 190px;
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f5f3ff 100%);
background-size: 200% 200%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
animation: unifBgShift-b-dwmpgvqnuf 8s ease-in-out infinite;
}
@keyframes unifBgShift-b-dwmpgvqnuf {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.unif-card-image[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 60%;
background-repeat: no-repeat;
background-position: center 35%;
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
z-index: 0;
}
.unif-card-image.img-error[b-dwmpgvqnuf]::before {
opacity: 1;
}
.unif-card-image img[b-dwmpgvqnuf] {
width: 100%;
height: 100%;
object-fit: contain;
padding: 16px;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s;
position: relative;
z-index: 2;
}
.unif-card:hover .unif-card-image img[b-dwmpgvqnuf] {
transform: scale(1.12) rotate(-2deg);
filter: drop-shadow(0 12px 24px rgba(37, 99, 235, 0.25));
}
.unif-card-image[b-dwmpgvqnuf]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
transform: translateX(-100%);
transition: transform 0.7s;
pointer-events: none;
z-index: 3;
}
.unif-card:hover .unif-card-image[b-dwmpgvqnuf]::after {
transform: translateX(100%);
}
/* ---------- BADGES ---------- */
.unif-card-badge[b-dwmpgvqnuf] {
position: absolute;
top: 12px;
right: 12px;
font-size: 10px;
font-weight: 800;
padding: 5px 12px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 5px;
text-transform: uppercase;
letter-spacing: 0.4px;
z-index: 4;
backdrop-filter: blur(8px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.unif-badge-ok[b-dwmpgvqnuf] {
background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(209, 250, 229, 0.95) 100%);
color: #059669;
border: 1px solid rgba(5, 150, 105, 0.2);
}
.unif-badge-low[b-dwmpgvqnuf] {
background: linear-gradient(135deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 226, 226, 0.95) 100%);
color: #dc2626;
border: 1px solid rgba(220, 38, 38, 0.2);
animation: unifBadgePulse-b-dwmpgvqnuf 1.8s ease-in-out infinite;
}
.unif-badge-out[b-dwmpgvqnuf] {
background: linear-gradient(135deg, rgba(241, 245, 249, 0.95) 0%, rgba(226, 232, 240, 0.95) 100%);
color: #64748b;
border: 1px solid rgba(100, 116, 139, 0.2);
}
@keyframes unifBadgePulse-b-dwmpgvqnuf {
0%, 100% {
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2), 0 0 0 0 rgba(220, 38, 38, 0.4);
}
50% {
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3), 0 0 0 8px rgba(220, 38, 38, 0);
}
}
/* ---------- BODY ---------- */
.unif-card-body[b-dwmpgvqnuf] {
padding: 16px;
position: relative;
z-index: 2;
}
.unif-card-cliente[b-dwmpgvqnuf] {
font-size: 11px;
font-weight: 800;
color: var(--c-violet);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.unif-card-cliente i[b-dwmpgvqnuf] {
font-size: 10px;
animation: unifBuildingFloat-b-dwmpgvqnuf 3s ease-in-out infinite;
}
@keyframes unifBuildingFloat-b-dwmpgvqnuf {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-2px);
}
}
.unif-card-title[b-dwmpgvqnuf] {
font-size: 17px;
font-weight: 900;
color: var(--c-text);
margin: 0 0 12px;
line-height: 1.3;
letter-spacing: -0.3px;
}
.unif-card-tags[b-dwmpgvqnuf] {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.unif-tag[b-dwmpgvqnuf] {
font-size: 10px;
font-weight: 800;
padding: 4px 10px;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
transition: transform 0.25s;
}
.unif-card:hover .unif-tag[b-dwmpgvqnuf] {
transform: translateY(-2px);
}
.unif-tag-tipo[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #2563eb;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}
.unif-tag-talla[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
color: #7c3aed;
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.15);
}
.unif-tag-color[b-dwmpgvqnuf] {
background: #f8fafc;
color: #475569;
border: 1.5px solid #e2e8f0;
position: relative;
padding-left: 22px;
overflow: hidden;
}
.unif-tag-color[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color, #ccc);
border: 1.5px solid rgba(255,255,255,0.8);
box-shadow: 0 0 0 1px rgba(0,0,0,0.08), inset 0 1px 2px rgba(0,0,0,0.15);
}
.unif-card-logo[b-dwmpgvqnuf] {
font-size: 11px;
color: var(--c-text-soft);
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
font-weight: 600;
padding: 6px 10px;
background: #f8fafc;
border-radius: 8px;
border-left: 3px solid var(--c-violet-light);
}
.unif-card-logo i[b-dwmpgvqnuf] {
color: var(--c-pink);
animation: unifTagWiggle-b-dwmpgvqnuf 4s ease-in-out infinite;
}
@keyframes unifTagWiggle-b-dwmpgvqnuf {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(-8deg);
}
75% {
transform: rotate(8deg);
}
}
/* ---------- PROGRESS BAR PREMIUM ---------- */
.unif-card-stock-bar[b-dwmpgvqnuf] {
margin-top: 10px;
}
.unif-stock-label[b-dwmpgvqnuf] {
display: flex;
justify-content: space-between;
font-size: 11px;
font-weight: 800;
color: var(--c-text-mute);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.unif-stock-number[b-dwmpgvqnuf] {
color: var(--c-text);
font-weight: 900;
font-size: 12px;
}
.unif-stock-track[b-dwmpgvqnuf] {
height: 8px;
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%);
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 3px rgba(15, 23, 41, 0.08);
}
.unif-stock-track[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.3) 4px, rgba(255,255,255,0.3) 6px);
opacity: 0.5;
pointer-events: none;
}
.unif-stock-fill[b-dwmpgvqnuf] {
height: 100%;
border-radius: 20px;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.unif-stock-fill[b-dwmpgvqnuf]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
transform: translateX(-100%);
animation: unifBarShimmer-b-dwmpgvqnuf 2s infinite;
}
@keyframes unifBarShimmer-b-dwmpgvqnuf {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(200%);
}
}
.unif-stock-fill.ok[b-dwmpgvqnuf] {
background: linear-gradient(90deg, #059669 0%, #10b981 40%, #34d399 100%);
box-shadow: 0 0 12px rgba(16, 185, 129, 0.5), inset 0 1px 2px rgba(255,255,255,0.3);
}
.unif-stock-fill.low[b-dwmpgvqnuf] {
background: linear-gradient(90deg, #dc2626 0%, #ef4444 40%, #f87171 100%);
box-shadow: 0 0 12px rgba(239, 68, 68, 0.5), inset 0 1px 2px rgba(255,255,255,0.3);
animation: unifBarPulse-b-dwmpgvqnuf 1.8s ease-in-out infinite;
}
@keyframes unifBarPulse-b-dwmpgvqnuf {
0%, 100% {
box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
}
}
/* ---------- ACCIONES ---------- */
.unif-card-actions[b-dwmpgvqnuf] {
display: flex;
gap: 6px;
padding: 10px 12px;
border-top: 1.5px solid #f1f5f9;
background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
justify-content: center;
position: relative;
}
.unif-action-btn[b-dwmpgvqnuf] {
width: 38px;
height: 38px;
border-radius: 11px;
border: none;
background: transparent;
color: var(--c-text-mute);
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}
.unif-action-btn:hover[b-dwmpgvqnuf] {
transform: translateY(-3px) scale(1.15);
box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.unif-action-btn:active[b-dwmpgvqnuf] {
transform: scale(0.9);
}
.unif-action-edit:hover[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: var(--c-primary);
}
.unif-action-mov:hover[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: var(--c-success);
}
.unif-action-mov-out:hover[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
color: var(--c-warning);
}
.unif-action-delete:hover[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: var(--c-danger);
}
/* ===== 07. ESTADOS VACΓOS / CARGA ===== */
.unif-loading[b-dwmpgvqnuf],
.unif-empty[b-dwmpgvqnuf] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
text-align: center;
gap: 16px;
}
.unif-loading-spinner[b-dwmpgvqnuf] {
width: 52px;
height: 52px;
border: 4px solid transparent;
border-top-color: var(--c-primary);
border-right-color: var(--c-violet);
border-bottom-color: var(--c-pink);
border-left-color: var(--c-warning);
border-radius: 50%;
animation: unifSpin-b-dwmpgvqnuf 1s linear infinite;
box-shadow: 0 0 24px rgba(124, 58, 237, 0.3);
}
@keyframes unifSpin-b-dwmpgvqnuf {
to {
transform: rotate(360deg);
}
}
.unif-loading p[b-dwmpgvqnuf] {
color: var(--c-text-soft);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.3px;
animation: unifDots-b-dwmpgvqnuf 1.4s ease-in-out infinite;
}
@keyframes unifDots-b-dwmpgvqnuf {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.unif-empty-icon[b-dwmpgvqnuf] {
font-size: 72px;
background: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: unifEmptyFloat-b-dwmpgvqnuf 3s ease-in-out infinite;
filter: drop-shadow(0 8px 20px rgba(124, 58, 237, 0.3));
}
@keyframes unifEmptyFloat-b-dwmpgvqnuf {
0%, 100% {
transform: translateY(0) rotate(-3deg);
}
50% {
transform: translateY(-14px) rotate(3deg);
}
}
.unif-empty h3[b-dwmpgvqnuf] {
font-size: 22px;
font-weight: 900;
background: linear-gradient(135deg, #0f172a 0%, #7c3aed 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
}
.unif-empty p[b-dwmpgvqnuf] {
color: var(--c-text-soft);
margin: 0;
max-width: 420px;
line-height: 1.55;
font-size: 14px;
font-weight: 500;
}
/* ===== 08. MODALES ===== */
.unif-modal-overlay[b-dwmpgvqnuf] {
position: fixed;
inset: 0;
background: rgba(15, 23, 41, 0.6);
backdrop-filter: blur(8px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: unifOverlayIn-b-dwmpgvqnuf 0.25s ease;
}
@keyframes unifOverlayIn-b-dwmpgvqnuf {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(8px);
}
}
.unif-modal[b-dwmpgvqnuf] {
background: #fff;
border-radius: 22px;
width: 100%;
max-width: 620px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 32px 80px rgba(15, 23, 41, 0.35);
animation: unifModalIn-b-dwmpgvqnuf 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
}
.unif-modal[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899, #f59e0b, #2563eb);
background-size: 300% 100%;
animation: unifRainbowMove-b-dwmpgvqnuf 6s linear infinite;
z-index: 2;
}
.unif-modal-sm[b-dwmpgvqnuf] {
max-width: 440px;
}
.unif-modal-lg[b-dwmpgvqnuf] {
max-width: 780px;
}
@keyframes unifModalIn-b-dwmpgvqnuf {
from {
opacity: 0;
transform: scale(0.9) translateY(30px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.unif-modal-header[b-dwmpgvqnuf] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
color: #fff;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.unif-modal-header[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 65%);
pointer-events: none;
}
.unif-modal-header.header-entrada[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}
.unif-modal-header.header-salida[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}
.unif-modal-header.header-eliminar[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}
.unif-modal-header h2[b-dwmpgvqnuf] {
font-size: 19px;
font-weight: 900;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
position: relative;
z-index: 1;
letter-spacing: -0.3px;
}
.unif-modal-close[b-dwmpgvqnuf] {
width: 36px;
height: 36px;
border-radius: 11px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
z-index: 1;
}
.unif-modal-close:hover[b-dwmpgvqnuf] {
background: rgba(255,255,255,0.35);
transform: rotate(90deg) scale(1.08);
}
.unif-modal-body[b-dwmpgvqnuf] {
padding: 24px;
overflow-y: auto;
flex: 1;
}
.unif-modal-body[b-dwmpgvqnuf]::-webkit-scrollbar {
width: 8px;
}
.unif-modal-body[b-dwmpgvqnuf]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.unif-modal-body[b-dwmpgvqnuf]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #7c3aed, #2563eb);
border-radius: 4px;
}
.unif-modal-footer[b-dwmpgvqnuf] {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 18px 24px;
border-top: 1.5px solid #f1f5f9;
background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
flex-shrink: 0;
}
/* ===== 09. UPLOADER DE IMAGEN ===== */
.unif-image-uploader-section[b-dwmpgvqnuf] {
margin-bottom: 22px;
padding-bottom: 20px;
border-bottom: 1.5px dashed #e2e8f0;
}
.unif-uploader-label[b-dwmpgvqnuf] {
font-size: 12px;
font-weight: 800;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.unif-uploader-label i[b-dwmpgvqnuf] {
color: var(--c-violet);
}
.unif-image-uploader[b-dwmpgvqnuf] {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 16px;
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f5f3ff 100%);
background-size: 200% 200%;
border-radius: 16px;
border: 2px dashed #c7d2fe;
transition: all 0.3s;
animation: unifBgShift-b-dwmpgvqnuf 8s ease-in-out infinite;
}
.unif-image-uploader:hover[b-dwmpgvqnuf] {
border-color: var(--c-violet);
border-style: solid;
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
}
.unif-uploader-preview[b-dwmpgvqnuf] {
width: 140px;
height: 140px;
border-radius: 14px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(15, 23, 41, 0.08);
position: relative;
}
.unif-uploader-preview img[b-dwmpgvqnuf] {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8px;
transition: transform 0.3s;
}
.unif-image-uploader:hover .unif-uploader-preview img[b-dwmpgvqnuf] {
transform: scale(1.06);
}
.unif-uploader-placeholder[b-dwmpgvqnuf] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: #c7d2fe;
padding: 10px;
text-align: center;
}
.unif-uploader-placeholder i[b-dwmpgvqnuf] {
font-size: 44px;
animation: unifEmptyFloat-b-dwmpgvqnuf 3s ease-in-out infinite;
}
.unif-uploader-placeholder span[b-dwmpgvqnuf] {
font-size: 11px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.unif-uploader-info[b-dwmpgvqnuf] {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.unif-uploader-nombre[b-dwmpgvqnuf] {
font-size: 13px;
color: #475569;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
line-height: 1.5;
}
.unif-uploader-nombre i[b-dwmpgvqnuf] {
color: var(--c-violet);
font-size: 14px;
flex-shrink: 0;
}
.unif-uploader-botones[b-dwmpgvqnuf] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.unif-uploader-btn[b-dwmpgvqnuf] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 11px;
border: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
font-family: inherit;
position: relative;
overflow: hidden;
}
.unif-uploader-btn[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s;
}
.unif-uploader-btn:hover[b-dwmpgvqnuf]::before {
transform: translateX(100%);
}
.unif-uploader-btn:active[b-dwmpgvqnuf] {
transform: scale(0.96);
}
.unif-uploader-btn-primary[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
color: #fff;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.unif-uploader-btn-primary:hover[b-dwmpgvqnuf] {
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
transform: translateY(-2px);
}
.unif-uploader-btn-danger[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: #fff;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}
.unif-uploader-btn-danger:hover[b-dwmpgvqnuf] {
box-shadow: 0 8px 24px rgba(239, 68, 68, 0.5);
transform: translateY(-2px);
}
.unif-uploader-btn input[type="file"][b-dwmpgvqnuf] {
display: none;
}
.unif-uploader-hint[b-dwmpgvqnuf] {
font-size: 11px;
color: #64748b;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.6);
border-radius: 8px;
line-height: 1.4;
}
.unif-uploader-hint i[b-dwmpgvqnuf] {
color: var(--c-warning);
animation: unifTagWiggle-b-dwmpgvqnuf 4s ease-in-out infinite;
}
.unif-uploader-hint code[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
color: var(--c-violet);
font-weight: 700;
font-family: 'Courier New', monospace;
}
/* ===== 10. FORMULARIO ===== */
.unif-form-grid[b-dwmpgvqnuf] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.unif-form-full[b-dwmpgvqnuf] {
grid-column: 1 / -1;
}
.unif-form-group[b-dwmpgvqnuf] {
display: flex;
flex-direction: column;
gap: 6px;
}
.unif-form-group label[b-dwmpgvqnuf] {
font-size: 12px;
font-weight: 800;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.unif-form-input[b-dwmpgvqnuf] {
padding: 11px 14px;
border: 1.5px solid var(--c-border);
border-radius: 12px;
font-size: 14px;
color: var(--c-text);
background: #f8fafc;
outline: none;
transition: all 0.25s;
font-family: inherit;
font-weight: 500;
}
.unif-form-input:focus[b-dwmpgvqnuf] {
border-color: var(--c-violet);
background: #fff;
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
transform: translateY(-1px);
}
.unif-form-input-lg[b-dwmpgvqnuf] {
font-size: 20px;
font-weight: 900;
text-align: center;
color: var(--c-violet);
letter-spacing: 0.5px;
}
.unif-form-textarea[b-dwmpgvqnuf] {
resize: vertical;
min-height: 80px;
}
.unif-color-input-group[b-dwmpgvqnuf] {
display: flex;
gap: 10px;
align-items: center;
}
.unif-color-picker[b-dwmpgvqnuf] {
width: 48px;
height: 44px;
border: 2px solid var(--c-border);
border-radius: 12px;
cursor: pointer;
padding: 3px;
background: #fff;
transition: all 0.25s;
}
.unif-color-picker:hover[b-dwmpgvqnuf] {
border-color: var(--c-violet);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}
/* ===== 11. DETALLE ===== */
.unif-detail-grid[b-dwmpgvqnuf] {
display: grid;
grid-template-columns: 220px 1fr;
gap: 24px;
margin-bottom: 24px;
}
.unif-detail-image[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f5f3ff 100%);
background-size: 200% 200%;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
aspect-ratio: 1;
animation: unifBgShift-b-dwmpgvqnuf 8s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.unif-detail-image[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 70%;
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
pointer-events: none;
}
.unif-detail-image img[b-dwmpgvqnuf] {
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
z-index: 1;
transition: transform 0.4s;
filter: drop-shadow(0 8px 16px rgba(37, 99, 235, 0.15));
}
.unif-detail-image:hover img[b-dwmpgvqnuf] {
transform: scale(1.08);
}
.unif-detail-info[b-dwmpgvqnuf] {
display: flex;
flex-direction: column;
gap: 10px;
}
.unif-detail-row[b-dwmpgvqnuf] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
font-size: 14px;
transition: background 0.2s;
}
.unif-detail-row:hover[b-dwmpgvqnuf] {
background: linear-gradient(90deg, transparent 0%, #f8fafc 20%, #f8fafc 80%, transparent 100%);
}
.unif-detail-label[b-dwmpgvqnuf] {
color: var(--c-text-soft);
font-weight: 700;
font-size: 13px;
}
.unif-detail-value[b-dwmpgvqnuf] {
color: var(--c-text);
font-weight: 800;
text-align: right;
}
.unif-sku[b-dwmpgvqnuf] {
font-family: 'Courier New', monospace;
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
color: var(--c-violet);
padding: 4px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(124, 58, 237, 0.15);
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.08);
}
.unif-color-dot[b-dwmpgvqnuf] {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.15);
vertical-align: middle;
margin-right: 8px;
}
.text-danger[b-dwmpgvqnuf] {
color: var(--c-danger) !important;
font-weight: 900;
}
.text-success[b-dwmpgvqnuf] {
color: var(--c-success) !important;
font-weight: 900;
}
.unif-detail-full[b-dwmpgvqnuf] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
/* ===== 12. HISTORIAL ===== */
.unif-history-section[b-dwmpgvqnuf] {
border-top: 1.5px solid #f1f5f9;
padding-top: 20px;
}
.unif-history-section h3[b-dwmpgvqnuf] {
font-size: 16px;
font-weight: 900;
color: var(--c-text);
margin: 0 0 16px;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: -0.3px;
}
.unif-history-section h3 i[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #2563eb, #7c3aed);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: unifSpin-b-dwmpgvqnuf 3s linear infinite;
display: inline-block;
}
.unif-history-list[b-dwmpgvqnuf] {
display: flex;
flex-direction: column;
gap: 8px;
}
.unif-history-item[b-dwmpgvqnuf] {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: 12px;
background: #f8fafc;
border: 1.5px solid #f1f5f9;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}
.unif-history-item[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
transition: width 0.25s;
}
.history-in[b-dwmpgvqnuf]::before {
background: linear-gradient(180deg, #059669, #34d399);
}
.history-out[b-dwmpgvqnuf]::before {
background: linear-gradient(180deg, #dc2626, #f87171);
}
.unif-history-item:hover[b-dwmpgvqnuf] {
background: #fff;
border-color: #e2e8f0;
transform: translateX(4px);
box-shadow: 0 6px 18px rgba(15, 23, 41, 0.08);
}
.unif-history-item:hover[b-dwmpgvqnuf]::before {
width: 6px;
}
.unif-history-icon[b-dwmpgvqnuf] {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
transition: transform 0.3s;
}
.unif-history-item:hover .unif-history-icon[b-dwmpgvqnuf] {
transform: scale(1.15) rotate(-8deg);
}
.history-in .unif-history-icon[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: var(--c-success);
box-shadow: 0 3px 8px rgba(5, 150, 105, 0.2);
}
.history-out .unif-history-icon[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: var(--c-danger);
box-shadow: 0 3px 8px rgba(220, 38, 38, 0.2);
}
.unif-history-info[b-dwmpgvqnuf] {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.unif-history-line-1[b-dwmpgvqnuf] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.unif-history-cantidad[b-dwmpgvqnuf] {
font-size: 16px;
font-weight: 900;
letter-spacing: -0.3px;
}
.history-in .unif-history-cantidad[b-dwmpgvqnuf] {
color: var(--c-success);
}
.history-out .unif-history-cantidad[b-dwmpgvqnuf] {
color: var(--c-danger);
}
.unif-history-usuario[b-dwmpgvqnuf] {
font-size: 11px;
color: var(--c-violet);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
border-radius: 20px;
border: 1px solid rgba(124, 58, 237, 0.15);
}
.unif-history-usuario i[b-dwmpgvqnuf] {
font-size: 10px;
}
.unif-history-motivo[b-dwmpgvqnuf] {
font-size: 12px;
color: var(--c-text-soft);
font-weight: 600;
}
.unif-history-fecha[b-dwmpgvqnuf] {
font-size: 11px;
color: var(--c-text-mute);
font-weight: 700;
white-space: nowrap;
padding: 4px 10px;
background: #f1f5f9;
border-radius: 20px;
}
.unif-history-empty[b-dwmpgvqnuf] {
color: var(--c-text-mute);
font-size: 13px;
text-align: center;
padding: 24px;
margin: 0;
font-weight: 500;
}
/* ===== 13. MOVIMIENTO ===== */
.unif-mov-item-info[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 5px;
border: 1.5px solid #e2e8f0;
position: relative;
overflow: hidden;
}
.unif-mov-item-info[b-dwmpgvqnuf]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #2563eb, #7c3aed);
}
.unif-mov-item-info strong[b-dwmpgvqnuf] {
font-size: 15px;
color: var(--c-text);
font-weight: 900;
}
.unif-mov-item-info span[b-dwmpgvqnuf] {
font-size: 13px;
color: var(--c-text-soft);
font-weight: 600;
}
.unif-mov-stock-actual[b-dwmpgvqnuf] {
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid #e2e8f0;
font-weight: 700;
}
.unif-mov-stock-actual b[b-dwmpgvqnuf] {
color: var(--c-violet);
font-size: 18px;
font-weight: 900;
}
/* ===== 14. MODAL ELIMINAR ===== */
.unif-eliminar-info[b-dwmpgvqnuf] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.unif-eliminar-icon[b-dwmpgvqnuf] {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: #dc2626;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2);
animation: unifEliminarPulse-b-dwmpgvqnuf 2s ease-in-out infinite;
}
@keyframes unifEliminarPulse-b-dwmpgvqnuf {
0%, 100% {
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2);
}
50% {
box-shadow: 0 8px 32px rgba(220, 38, 38, 0.45);
}
}
.unif-eliminar-texto[b-dwmpgvqnuf] {
font-size: 16px;
color: #0f172a;
margin: 0;
line-height: 1.5;
}
.unif-eliminar-texto strong[b-dwmpgvqnuf] {
color: #dc2626;
font-weight: 900;
}
.unif-eliminar-detalle[b-dwmpgvqnuf] {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
padding: 12px 20px;
background: #f8fafc;
border-radius: 12px;
border: 1.5px solid #e2e8f0;
width: 100%;
}
.unif-eliminar-sku[b-dwmpgvqnuf] {
font-family: 'Courier New', monospace;
font-size: 12px;
font-weight: 700;
color: #7c3aed;
padding: 3px 10px;
background: #f5f3ff;
border-radius: 6px;
}
.unif-eliminar-cliente[b-dwmpgvqnuf] {
font-size: 13px;
color: #475569;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.unif-eliminar-aviso[b-dwmpgvqnuf] {
font-size: 12px;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fffbeb;
border-radius: 8px;
border-left: 3px solid #fbbf24;
color: #92400e;
font-weight: 600;
text-align: left;
width: 100%;
}
/* ===== 15. RESPONSIVE ===== */
@media (max-width: 768px) {
.uniform-container[b-dwmpgvqnuf] {
padding: 16px;
}
.uniform-header[b-dwmpgvqnuf] {
flex-direction: column;
align-items: flex-start;
}
.uniform-header-right[b-dwmpgvqnuf] {
width: 100%;
}
.uniform-header-right .unif-btn[b-dwmpgvqnuf] {
flex: 1;
justify-content: center;
}
.unif-metrics-grid[b-dwmpgvqnuf] {
grid-template-columns: 1fr 1fr;
}
.unif-grid[b-dwmpgvqnuf] {
grid-template-columns: 1fr;
}
.unif-form-grid[b-dwmpgvqnuf] {
grid-template-columns: 1fr;
}
.unif-detail-grid[b-dwmpgvqnuf] {
grid-template-columns: 1fr;
}
.unif-detail-image[b-dwmpgvqnuf] {
max-width: 180px;
margin: 0 auto;
}
.unif-filters-row[b-dwmpgvqnuf] {
flex-direction: column;
}
.unif-filter-group[b-dwmpgvqnuf] {
width: 100%;
}
.unif-filter-search[b-dwmpgvqnuf] {
min-width: 100%;
}
.uniform-title[b-dwmpgvqnuf] {
font-size: 22px;
}
.unif-image-uploader[b-dwmpgvqnuf] {
flex-direction: column;
}
.unif-uploader-preview[b-dwmpgvqnuf] {
width: 100%;
max-width: 200px;
height: 160px;
margin: 0 auto;
}
.unif-uploader-info[b-dwmpgvqnuf] {
width: 100%;
}
}
@media (max-width: 480px) {
.unif-metrics-grid[b-dwmpgvqnuf] {
grid-template-columns: 1fr;
}
.unif-btn span[b-dwmpgvqnuf] {
display: none;
}
.unif-btn[b-dwmpgvqnuf] {
padding: 11px 14px;
}
.unif-metric-value[b-dwmpgvqnuf] {
font-size: 24px;
}
.unif-uploader-botones[b-dwmpgvqnuf] {
flex-direction: column;
}
.unif-uploader-btn[b-dwmpgvqnuf] {
width: 100%;
justify-content: center;
}
}
/* ===== 16. ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
.uniform-container[b-dwmpgvqnuf],
.uniform-icon-wrapper[b-dwmpgvqnuf],
.unif-metric-card[b-dwmpgvqnuf],
.unif-card[b-dwmpgvqnuf],
.unif-btn[b-dwmpgvqnuf],
.unif-stock-fill[b-dwmpgvqnuf],
.unif-empty-icon[b-dwmpgvqnuf],
.unif-history-section h3 i[b-dwmpgvqnuf],
.unif-uploader-placeholder i[b-dwmpgvqnuf],
.unif-eliminar-icon[b-dwmpgvqnuf],
.unif-image-uploader[b-dwmpgvqnuf] {
animation: none !important;
transition-duration: 0.01ms !important;
}
}
/* ===== 17. ESPECΓFICAS DE LIMPIEZA ===== */
/* Icono con gradiente verde/teal */
.uniform-icon-wrapper.icon-limpieza[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 50%, #0ea5e9 100%);
background-size: 200% 200%;
box-shadow: 0 8px 24px rgba(20, 184, 166, 0.4);
}
.uniform-icon-wrapper.icon-limpieza[b-dwmpgvqnuf]::after {
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
}
/* Card en advertencia por vencimiento */
.unif-card-warn[b-dwmpgvqnuf] {
border-color: #fcd34d;
}
.unif-card-warn:hover[b-dwmpgvqnuf] {
border-color: #f59e0b;
box-shadow: 0 20px 48px rgba(245, 158, 11, 0.22);
}
.unif-card-warn[b-dwmpgvqnuf]::before {
background: linear-gradient(135deg, #f59e0b, #fbbf24, #f97316) !important;
}
/* Badge de por vencer */
.unif-card-badge-venc[b-dwmpgvqnuf] {
position: absolute;
top: 12px;
left: 12px;
font-size: 10px;
font-weight: 800;
padding: 5px 12px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 5px;
text-transform: uppercase;
letter-spacing: 0.4px;
z-index: 4;
backdrop-filter: blur(8px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
background: linear-gradient(135deg, rgba(255, 251, 235, 0.95) 0%, rgba(254, 243, 199, 0.95) 100%);
color: #d97706;
border: 1px solid rgba(217, 119, 6, 0.25);
animation: unifBadgeVencPulse-b-dwmpgvqnuf 2s ease-in-out infinite;
}
@keyframes unifBadgeVencPulse-b-dwmpgvqnuf {
0%, 100% {
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2), 0 0 0 0 rgba(217, 119, 6, 0.4);
}
50% {
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3), 0 0 0 8px rgba(217, 119, 6, 0);
}
}
/* Tag de marca */
.unif-tag-marca[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
color: #0891b2;
box-shadow: 0 2px 6px rgba(8, 145, 178, 0.15);
}
/* Tag de presentaciΓ³n */
.unif-tag-presentacion[b-dwmpgvqnuf] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: #059669;
box-shadow: 0 2px 6px rgba(5, 150, 105, 0.15);
}
/* Card info de vencimiento */
.unif-card-venc[b-dwmpgvqnuf] {
font-size: 11px;
color: #64748b;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
font-weight: 600;
padding: 6px 10px;
background: #f8fafc;
border-radius: 8px;
border-left: 3px solid #94a3b8;
}
.unif-card-venc.venc-alerta[b-dwmpgvqnuf] {
background: #fffbeb;
border-left-color: #f59e0b;
color: #92400e;
}
.unif-card-venc i[b-dwmpgvqnuf] {
color: currentColor;
}
.unif-venc-dias[b-dwmpgvqnuf] {
font-size: 10px;
font-weight: 800;
padding: 2px 7px;
background: rgba(245, 158, 11, 0.15);
border-radius: 20px;
margin-left: auto;
}
/* /Pages/Stock/Stock_Uniformes.razor.rz.scp.css */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
STOCK UNIFORMES β MΓ³dulo multi-cliente
CSS Premium v15.1 β Colores, animaciones, placeholder SVG y uploader
Codeado por π¦Ύ Hefesto 15.1 Pro Max | Sr. Ignacio
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* ===== 01. VARIABLES GLOBALES ===== */
.uniform-container[b-u17sai02r0] {
--c-primary: #2563eb;
--c-primary-light: #60a5fa;
--c-violet: #7c3aed;
--c-violet-light: #a78bfa;
--c-success: #059669;
--c-success-light: #34d399;
--c-warning: #d97706;
--c-warning-light: #fbbf24;
--c-danger: #dc2626;
--c-danger-light: #f87171;
--c-teal: #14b8a6;
--c-pink: #ec4899;
--c-bg: #f8fafc;
--c-bg-soft: #f1f5f9;
--c-text: #0f172a;
--c-text-soft: #64748b;
--c-text-mute: #94a3b8;
--c-border: #e2e8f0;
padding: 24px;
max-width: 1600px;
margin: 0 auto;
animation: unifFadeIn-b-u17sai02r0 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes unifFadeIn-b-u17sai02r0 {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== 02. HEADER ===== */
.uniform-header[b-u17sai02r0] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
.uniform-header-left[b-u17sai02r0] {
display: flex;
align-items: center;
gap: 16px;
}
.uniform-title-group[b-u17sai02r0] {
display: flex;
align-items: center;
gap: 14px;
}
.uniform-icon-wrapper[b-u17sai02r0] {
width: 56px;
height: 56px;
border-radius: 16px;
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);
background-size: 200% 200%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
animation: unifIconGradient-b-u17sai02r0 4s ease infinite, unifIconPulse-b-u17sai02r0 3s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.uniform-icon-wrapper[b-u17sai02r0]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
animation: unifShimmer-b-u17sai02r0 3s infinite;
}
@keyframes unifIconGradient-b-u17sai02r0 {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes unifIconPulse-b-u17sai02r0 {
0%, 100% {
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}
50% {
box-shadow: 0 8px 36px rgba(124, 58, 237, 0.6);
}
}
@keyframes unifShimmer-b-u17sai02r0 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.uniform-title[b-u17sai02r0] {
font-size: 28px;
font-weight: 900;
background: linear-gradient(135deg, #0f172a 0%, #2563eb 60%, #7c3aed 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
letter-spacing: -0.6px;
}
.uniform-subtitle[b-u17sai02r0] {
font-size: 14px;
color: var(--c-text-soft);
margin: 3px 0 0;
font-weight: 500;
}
.uniform-header-right[b-u17sai02r0] {
display: flex;
gap: 10px;
}
/* ===== 03. BOTONES ===== */
.unif-btn[b-u17sai02r0] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border-radius: 12px;
border: none;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
font-family: inherit;
position: relative;
overflow: hidden;
}
.unif-btn[b-u17sai02r0]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s;
}
.unif-btn:hover[b-u17sai02r0]::before {
transform: translateX(100%);
}
.unif-btn:active[b-u17sai02r0] {
transform: scale(0.95);
}
.unif-btn-primary[b-u17sai02r0] {
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
background-size: 200% 200%;
color: #fff;
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}
.unif-btn-primary:hover[b-u17sai02r0] {
background-position: 100% 50%;
box-shadow: 0 8px 28px rgba(124, 58, 237, 0.55);
transform: translateY(-2px);
}
.unif-btn-primary:disabled[b-u17sai02r0] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.unif-btn-refresh[b-u17sai02r0] {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
color: #475569;
border: 1.5px solid var(--c-border);
}
.unif-btn-refresh:hover[b-u17sai02r0] {
background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
border-color: var(--c-primary-light);
color: var(--c-primary);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
}
.unif-btn-refresh i.fa-sync-alt:not(.fa-spin)[b-u17sai02r0] {
transition: transform 0.5s;
}
.unif-btn-refresh:hover i.fa-sync-alt:not(.fa-spin)[b-u17sai02r0] {
transform: rotate(180deg);
}
.unif-btn-clear[b-u17sai02r0] {
background: #fff;
color: #64748b;
border: 1.5px solid var(--c-border);
}
.unif-btn-clear:hover[b-u17sai02r0] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: var(--c-danger);
border-color: #fecaca;
transform: translateY(-2px);
}
.unif-btn-cancel[b-u17sai02r0] {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
color: #475569;
border: 1.5px solid var(--c-border);
}
.unif-btn-cancel:hover[b-u17sai02r0] {
background: #e2e8f0;
transform: translateY(-1px);
}
.unif-btn-success[b-u17sai02r0] {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
background-size: 200% 200%;
color: #fff;
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
}
.unif-btn-success:hover[b-u17sai02r0] {
background-position: 100% 50%;
box-shadow: 0 8px 28px rgba(16, 185, 129, 0.55);
transform: translateY(-2px);
}
.unif-btn-danger[b-u17sai02r0] {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
background-size: 200% 200%;
color: #fff;
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4);
}
.unif-btn-danger:hover[b-u17sai02r0] {
background-position: 100% 50%;
box-shadow: 0 8px 28px rgba(239, 68, 68, 0.55);
transform: translateY(-2px);
}
/* ===== 04. MΓTRICAS ===== */
.unif-metrics-grid[b-u17sai02r0] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.unif-metric-card[b-u17sai02r0] {
background: #fff;
border-radius: 18px;
padding: 20px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 2px 12px rgba(15, 23, 41, 0.06);
border: 1.5px solid #f1f5f9;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
animation: unifCardIn-b-u17sai02r0 0.5s ease backwards;
}
.unif-metric-card:nth-child(1)[b-u17sai02r0] {
animation-delay: 0.05s;
}
.unif-metric-card:nth-child(2)[b-u17sai02r0] {
animation-delay: 0.1s;
}
.unif-metric-card:nth-child(3)[b-u17sai02r0] {
animation-delay: 0.15s;
}
.unif-metric-card:nth-child(4)[b-u17sai02r0] {
animation-delay: 0.2s;
}
@keyframes unifCardIn-b-u17sai02r0 {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.unif-metric-card[b-u17sai02r0]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 18px 18px 0 0;
}
.unif-metric-card[b-u17sai02r0]::after {
content: '';
position: absolute;
bottom: -50%;
right: -20%;
width: 140px;
height: 140px;
border-radius: 50%;
opacity: 0.06;
transition: opacity 0.3s, transform 0.5s;
}
.unif-metric-card:hover[b-u17sai02r0]::after {
opacity: 0.12;
transform: scale(1.15);
}
.unif-metric-total[b-u17sai02r0]::before {
background: linear-gradient(90deg, #2563eb, #60a5fa, #7c3aed);
}
.unif-metric-total[b-u17sai02r0]::after {
background: #2563eb;
}
.unif-metric-stock[b-u17sai02r0]::before {
background: linear-gradient(90deg, #059669, #34d399, #14b8a6);
}
.unif-metric-stock[b-u17sai02r0]::after {
background: #059669;
}
.unif-metric-bajo[b-u17sai02r0]::before {
background: linear-gradient(90deg, #d97706, #fbbf24, #f97316);
}
.unif-metric-bajo[b-u17sai02r0]::after {
background: #d97706;
}
.unif-metric-clientes[b-u17sai02r0]::before {
background: linear-gradient(90deg, #7c3aed, #a78bfa, #ec4899);
}
.unif-metric-clientes[b-u17sai02r0]::after {
background: #7c3aed;
}
.unif-metric-card:hover[b-u17sai02r0] {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 16px 36px rgba(15, 23, 41, 0.14);
border-color: #e2e8f0;
}
.unif-metric-icon[b-u17sai02r0] {
width: 50px;
height: 50px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
z-index: 1;
}
.unif-metric-card:hover .unif-metric-icon[b-u17sai02r0] {
transform: scale(1.15) rotate(-8deg);
}
.unif-metric-total .unif-metric-icon[b-u17sai02r0] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.unif-metric-stock .unif-metric-icon[b-u17sai02r0] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: #059669;
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
}
.unif-metric-bajo .unif-metric-icon[b-u17sai02r0] {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
color: #d97706;
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
animation: unifWarningPulse-b-u17sai02r0 2s ease-in-out infinite;
}
.unif-metric-clientes .unif-metric-icon[b-u17sai02r0] {
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
color: #7c3aed;
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}
@keyframes unifWarningPulse-b-u17sai02r0 {
0%, 100% {
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}
50% {
box-shadow: 0 4px 20px rgba(217, 119, 6, 0.5);
}
}
.unif-metric-info[b-u17sai02r0] {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.unif-metric-label[b-u17sai02r0] {
font-size: 12px;
font-weight: 700;
color: var(--c-text-mute);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.unif-metric-value[b-u17sai02r0] {
font-size: 30px;
font-weight: 900;
color: var(--c-text);
line-height: 1.1;
letter-spacing: -1px;
animation: unifCountUp-b-u17sai02r0 0.8s ease;
}
@keyframes unifCountUp-b-u17sai02r0 {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.unif-metric-trend[b-u17sai02r0] {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 4px;
position: relative;
z-index: 1;
transition: transform 0.25s;
}
.unif-metric-card:hover .unif-metric-trend[b-u17sai02r0] {
transform: scale(1.05);
}
.unif-metric-trend.up[b-u17sai02r0] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: #059669;
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
}
.unif-metric-trend.down[b-u17sai02r0] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: #dc2626;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}
.unif-metric-trend.neutral[b-u17sai02r0] {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
color: #64748b;
}
/* ===== 05. FILTROS ===== */
.unif-filters-card[b-u17sai02r0] {
background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
border-radius: 18px;
padding: 16px 20px;
margin-bottom: 24px;
box-shadow: 0 2px 14px rgba(15, 23, 41, 0.06);
border: 1.5px solid #f1f5f9;
position: relative;
overflow: hidden;
}
.unif-filters-card[b-u17sai02r0]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899, #f59e0b);
background-size: 200% 100%;
animation: unifRainbowMove-b-u17sai02r0 4s linear infinite;
}
@keyframes unifRainbowMove-b-u17sai02r0 {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
.unif-filters-row[b-u17sai02r0] {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.unif-filter-group[b-u17sai02r0] {
position: relative;
display: flex;
align-items: center;
}
.unif-filter-search[b-u17sai02r0] {
flex: 1;
min-width: 240px;
}
.unif-filter-icon[b-u17sai02r0] {
position: absolute;
left: 14px;
color: var(--c-text-mute);
font-size: 14px;
pointer-events: none;
transition: color 0.25s, transform 0.25s;
}
.unif-filter-input[b-u17sai02r0],
.unif-filter-select[b-u17sai02r0] {
width: 100%;
padding: 11px 14px 11px 40px;
border: 1.5px solid var(--c-border);
border-radius: 12px;
font-size: 14px;
color: var(--c-text);
background: #f8fafc;
outline: none;
transition: all 0.25s;
font-family: inherit;
font-weight: 500;
}
.unif-filter-input:focus[b-u17sai02r0],
.unif-filter-select:focus[b-u17sai02r0] {
border-color: var(--c-violet);
background: #fff;
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
transform: translateY(-1px);
}
.unif-filter-input:focus + .unif-filter-icon[b-u17sai02r0] {
color: var(--c-violet);
transform: scale(1.1);
}
/* ===== 06. GRID DE UNIFORMES ===== */
.unif-grid[b-u17sai02r0] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.unif-card[b-u17sai02r0] {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 14px rgba(15, 23, 41, 0.07);
border: 1.5px solid #f1f5f9;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
animation: unifCardIn-b-u17sai02r0 0.4s ease backwards;
}
.unif-card:hover[b-u17sai02r0] {
transform: translateY(-8px) scale(1.015);
box-shadow: 0 20px 48px rgba(15, 23, 41, 0.16);
border-color: #ddd6fe;
}
.unif-card[b-u17sai02r0]::before {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
padding: 2px;
background: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
z-index: 1;
}
.unif-card:hover[b-u17sai02r0]::before {
opacity: 1;
}
.unif-card-low[b-u17sai02r0] {
border-color: #fecaca;
}
.unif-card-low:hover[b-u17sai02r0] {
border-color: #f87171;
box-shadow: 0 20px 48px rgba(220, 38, 38, 0.22);
}
.unif-card-low[b-u17sai02r0]::before {
background: linear-gradient(135deg, #dc2626, #f97316, #fbbf24);
}
/* ---------- IMAGEN CON PLACEHOLDER SVG ---------- */
.unif-card-image[b-u17sai02r0] {
position: relative;
height: 190px;
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f5f3ff 100%);
background-size: 200% 200%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
animation: unifBgShift-b-u17sai02r0 8s ease-in-out infinite;
}
@keyframes unifBgShift-b-u17sai02r0 {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.unif-card-image[b-u17sai02r0]::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 60%;
background-repeat: no-repeat;
background-position: center 35%;
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
z-index: 0;
}
.unif-card-image.img-error[b-u17sai02r0]::before {
opacity: 1;
}
.unif-card-image img[b-u17sai02r0] {
width: 100%;
height: 100%;
object-fit: contain;
padding: 16px;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s;
position: relative;
z-index: 2;
}
.unif-card:hover .unif-card-image img[b-u17sai02r0] {
transform: scale(1.12) rotate(-2deg);
filter: drop-shadow(0 12px 24px rgba(37, 99, 235, 0.25));
}
.unif-card-image[b-u17sai02r0]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
transform: translateX(-100%);
transition: transform 0.7s;
pointer-events: none;
z-index: 3;
}
.unif-card:hover .unif-card-image[b-u17sai02r0]::after {
transform: translateX(100%);
}
/* ---------- BADGES ---------- */
.unif-card-badge[b-u17sai02r0] {
position: absolute;
top: 12px;
right: 12px;
font-size: 10px;
font-weight: 800;
padding: 5px 12px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 5px;
text-transform: uppercase;
letter-spacing: 0.4px;
z-index: 4;
backdrop-filter: blur(8px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.unif-badge-ok[b-u17sai02r0] {
background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(209, 250, 229, 0.95) 100%);
color: #059669;
border: 1px solid rgba(5, 150, 105, 0.2);
}
.unif-badge-low[b-u17sai02r0] {
background: linear-gradient(135deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 226, 226, 0.95) 100%);
color: #dc2626;
border: 1px solid rgba(220, 38, 38, 0.2);
animation: unifBadgePulse-b-u17sai02r0 1.8s ease-in-out infinite;
}
.unif-badge-out[b-u17sai02r0] {
background: linear-gradient(135deg, rgba(241, 245, 249, 0.95) 0%, rgba(226, 232, 240, 0.95) 100%);
color: #64748b;
border: 1px solid rgba(100, 116, 139, 0.2);
}
@keyframes unifBadgePulse-b-u17sai02r0 {
0%, 100% {
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2), 0 0 0 0 rgba(220, 38, 38, 0.4);
}
50% {
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3), 0 0 0 8px rgba(220, 38, 38, 0);
}
}
/* ---------- BODY ---------- */
.unif-card-body[b-u17sai02r0] {
padding: 16px;
position: relative;
z-index: 2;
}
.unif-card-cliente[b-u17sai02r0] {
font-size: 11px;
font-weight: 800;
color: var(--c-violet);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.unif-card-cliente i[b-u17sai02r0] {
font-size: 10px;
animation: unifBuildingFloat-b-u17sai02r0 3s ease-in-out infinite;
}
@keyframes unifBuildingFloat-b-u17sai02r0 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-2px);
}
}
.unif-card-title[b-u17sai02r0] {
font-size: 17px;
font-weight: 900;
color: var(--c-text);
margin: 0 0 12px;
line-height: 1.3;
letter-spacing: -0.3px;
}
.unif-card-tags[b-u17sai02r0] {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.unif-tag[b-u17sai02r0] {
font-size: 10px;
font-weight: 800;
padding: 4px 10px;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
transition: transform 0.25s;
}
.unif-card:hover .unif-tag[b-u17sai02r0] {
transform: translateY(-2px);
}
.unif-tag-tipo[b-u17sai02r0] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #2563eb;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}
.unif-tag-talla[b-u17sai02r0] {
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
color: #7c3aed;
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.15);
}
.unif-tag-color[b-u17sai02r0] {
background: #f8fafc;
color: #475569;
border: 1.5px solid #e2e8f0;
position: relative;
padding-left: 22px;
overflow: hidden;
}
.unif-tag-color[b-u17sai02r0]::before {
content: '';
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color, #ccc);
border: 1.5px solid rgba(255,255,255,0.8);
box-shadow: 0 0 0 1px rgba(0,0,0,0.08), inset 0 1px 2px rgba(0,0,0,0.15);
}
.unif-card-logo[b-u17sai02r0] {
font-size: 11px;
color: var(--c-text-soft);
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
font-weight: 600;
padding: 6px 10px;
background: #f8fafc;
border-radius: 8px;
border-left: 3px solid var(--c-violet-light);
}
.unif-card-logo i[b-u17sai02r0] {
color: var(--c-pink);
animation: unifTagWiggle-b-u17sai02r0 4s ease-in-out infinite;
}
@keyframes unifTagWiggle-b-u17sai02r0 {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(-8deg);
}
75% {
transform: rotate(8deg);
}
}
/* ---------- PROGRESS BAR PREMIUM ---------- */
.unif-card-stock-bar[b-u17sai02r0] {
margin-top: 10px;
}
.unif-stock-label[b-u17sai02r0] {
display: flex;
justify-content: space-between;
font-size: 11px;
font-weight: 800;
color: var(--c-text-mute);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.unif-stock-number[b-u17sai02r0] {
color: var(--c-text);
font-weight: 900;
font-size: 12px;
}
.unif-stock-track[b-u17sai02r0] {
height: 8px;
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%);
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 3px rgba(15, 23, 41, 0.08);
}
.unif-stock-track[b-u17sai02r0]::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.3) 4px, rgba(255,255,255,0.3) 6px);
opacity: 0.5;
pointer-events: none;
}
.unif-stock-fill[b-u17sai02r0] {
height: 100%;
border-radius: 20px;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.unif-stock-fill[b-u17sai02r0]::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
transform: translateX(-100%);
animation: unifBarShimmer-b-u17sai02r0 2s infinite;
}
@keyframes unifBarShimmer-b-u17sai02r0 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(200%);
}
}
.unif-stock-fill.ok[b-u17sai02r0] {
background: linear-gradient(90deg, #059669 0%, #10b981 40%, #34d399 100%);
box-shadow: 0 0 12px rgba(16, 185, 129, 0.5), inset 0 1px 2px rgba(255,255,255,0.3);
}
.unif-stock-fill.low[b-u17sai02r0] {
background: linear-gradient(90deg, #dc2626 0%, #ef4444 40%, #f87171 100%);
box-shadow: 0 0 12px rgba(239, 68, 68, 0.5), inset 0 1px 2px rgba(255,255,255,0.3);
animation: unifBarPulse-b-u17sai02r0 1.8s ease-in-out infinite;
}
@keyframes unifBarPulse-b-u17sai02r0 {
0%, 100% {
box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
}
}
/* ---------- ACCIONES ---------- */
.unif-card-actions[b-u17sai02r0] {
display: flex;
gap: 6px;
padding: 10px 12px;
border-top: 1.5px solid #f1f5f9;
background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
justify-content: center;
position: relative;
}
.unif-action-btn[b-u17sai02r0] {
width: 38px;
height: 38px;
border-radius: 11px;
border: none;
background: transparent;
color: var(--c-text-mute);
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}
.unif-action-btn:hover[b-u17sai02r0] {
transform: translateY(-3px) scale(1.15);
box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.unif-action-btn:active[b-u17sai02r0] {
transform: scale(0.9);
}
.unif-action-edit:hover[b-u17sai02r0] {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: var(--c-primary);
}
.unif-action-mov:hover[b-u17sai02r0] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: var(--c-success);
}
.unif-action-mov-out:hover[b-u17sai02r0] {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
color: var(--c-warning);
}
.unif-action-delete:hover[b-u17sai02r0] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: var(--c-danger);
}
/* ===== 07. ESTADOS VACΓOS / CARGA ===== */
.unif-loading[b-u17sai02r0],
.unif-empty[b-u17sai02r0] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
text-align: center;
gap: 16px;
}
.unif-loading-spinner[b-u17sai02r0] {
width: 52px;
height: 52px;
border: 4px solid transparent;
border-top-color: var(--c-primary);
border-right-color: var(--c-violet);
border-bottom-color: var(--c-pink);
border-left-color: var(--c-warning);
border-radius: 50%;
animation: unifSpin-b-u17sai02r0 1s linear infinite;
box-shadow: 0 0 24px rgba(124, 58, 237, 0.3);
}
@keyframes unifSpin-b-u17sai02r0 {
to {
transform: rotate(360deg);
}
}
.unif-loading p[b-u17sai02r0] {
color: var(--c-text-soft);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.3px;
animation: unifDots-b-u17sai02r0 1.4s ease-in-out infinite;
}
@keyframes unifDots-b-u17sai02r0 {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.unif-empty-icon[b-u17sai02r0] {
font-size: 72px;
background: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: unifEmptyFloat-b-u17sai02r0 3s ease-in-out infinite;
filter: drop-shadow(0 8px 20px rgba(124, 58, 237, 0.3));
}
@keyframes unifEmptyFloat-b-u17sai02r0 {
0%, 100% {
transform: translateY(0) rotate(-3deg);
}
50% {
transform: translateY(-14px) rotate(3deg);
}
}
.unif-empty h3[b-u17sai02r0] {
font-size: 22px;
font-weight: 900;
background: linear-gradient(135deg, #0f172a 0%, #7c3aed 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
}
.unif-empty p[b-u17sai02r0] {
color: var(--c-text-soft);
margin: 0;
max-width: 420px;
line-height: 1.55;
font-size: 14px;
font-weight: 500;
}
/* ===== 08. MODALES ===== */
.unif-modal-overlay[b-u17sai02r0] {
position: fixed;
inset: 0;
background: rgba(15, 23, 41, 0.6);
backdrop-filter: blur(8px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: unifOverlayIn-b-u17sai02r0 0.25s ease;
}
@keyframes unifOverlayIn-b-u17sai02r0 {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(8px);
}
}
.unif-modal[b-u17sai02r0] {
background: #fff;
border-radius: 22px;
width: 100%;
max-width: 620px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 32px 80px rgba(15, 23, 41, 0.35);
animation: unifModalIn-b-u17sai02r0 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
}
.unif-modal[b-u17sai02r0]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899, #f59e0b, #2563eb);
background-size: 300% 100%;
animation: unifRainbowMove-b-u17sai02r0 6s linear infinite;
z-index: 2;
}
.unif-modal-sm[b-u17sai02r0] {
max-width: 440px;
}
.unif-modal-lg[b-u17sai02r0] {
max-width: 780px;
}
@keyframes unifModalIn-b-u17sai02r0 {
from {
opacity: 0;
transform: scale(0.9) translateY(30px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.unif-modal-header[b-u17sai02r0] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
color: #fff;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.unif-modal-header[b-u17sai02r0]::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 65%);
pointer-events: none;
}
.unif-modal-header.header-entrada[b-u17sai02r0] {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}
.unif-modal-header.header-salida[b-u17sai02r0] {
background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}
.unif-modal-header.header-eliminar[b-u17sai02r0] {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}
.unif-modal-header h2[b-u17sai02r0] {
font-size: 19px;
font-weight: 900;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
position: relative;
z-index: 1;
letter-spacing: -0.3px;
}
.unif-modal-close[b-u17sai02r0] {
width: 36px;
height: 36px;
border-radius: 11px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
z-index: 1;
}
.unif-modal-close:hover[b-u17sai02r0] {
background: rgba(255,255,255,0.35);
transform: rotate(90deg) scale(1.08);
}
.unif-modal-body[b-u17sai02r0] {
padding: 24px;
overflow-y: auto;
flex: 1;
}
.unif-modal-body[b-u17sai02r0]::-webkit-scrollbar {
width: 8px;
}
.unif-modal-body[b-u17sai02r0]::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.unif-modal-body[b-u17sai02r0]::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #7c3aed, #2563eb);
border-radius: 4px;
}
.unif-modal-footer[b-u17sai02r0] {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 18px 24px;
border-top: 1.5px solid #f1f5f9;
background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
flex-shrink: 0;
}
/* ===== 09. UPLOADER DE IMAGEN ===== */
.unif-image-uploader-section[b-u17sai02r0] {
margin-bottom: 22px;
padding-bottom: 20px;
border-bottom: 1.5px dashed #e2e8f0;
}
.unif-uploader-label[b-u17sai02r0] {
font-size: 12px;
font-weight: 800;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.unif-uploader-label i[b-u17sai02r0] {
color: var(--c-violet);
}
.unif-image-uploader[b-u17sai02r0] {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 16px;
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f5f3ff 100%);
background-size: 200% 200%;
border-radius: 16px;
border: 2px dashed #c7d2fe;
transition: all 0.3s;
animation: unifBgShift-b-u17sai02r0 8s ease-in-out infinite;
}
.unif-image-uploader:hover[b-u17sai02r0] {
border-color: var(--c-violet);
border-style: solid;
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
}
.unif-uploader-preview[b-u17sai02r0] {
width: 140px;
height: 140px;
border-radius: 14px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(15, 23, 41, 0.08);
position: relative;
}
.unif-uploader-preview img[b-u17sai02r0] {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8px;
transition: transform 0.3s;
}
.unif-image-uploader:hover .unif-uploader-preview img[b-u17sai02r0] {
transform: scale(1.06);
}
.unif-uploader-placeholder[b-u17sai02r0] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: #c7d2fe;
padding: 10px;
text-align: center;
}
.unif-uploader-placeholder i[b-u17sai02r0] {
font-size: 44px;
animation: unifEmptyFloat-b-u17sai02r0 3s ease-in-out infinite;
}
.unif-uploader-placeholder span[b-u17sai02r0] {
font-size: 11px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.unif-uploader-info[b-u17sai02r0] {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.unif-uploader-nombre[b-u17sai02r0] {
font-size: 13px;
color: #475569;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
line-height: 1.5;
}
.unif-uploader-nombre i[b-u17sai02r0] {
color: var(--c-violet);
font-size: 14px;
flex-shrink: 0;
}
.unif-uploader-botones[b-u17sai02r0] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.unif-uploader-btn[b-u17sai02r0] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 11px;
border: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
font-family: inherit;
position: relative;
overflow: hidden;
}
.unif-uploader-btn[b-u17sai02r0]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s;
}
.unif-uploader-btn:hover[b-u17sai02r0]::before {
transform: translateX(100%);
}
.unif-uploader-btn:active[b-u17sai02r0] {
transform: scale(0.96);
}
.unif-uploader-btn-primary[b-u17sai02r0] {
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
color: #fff;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.unif-uploader-btn-primary:hover[b-u17sai02r0] {
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
transform: translateY(-2px);
}
.unif-uploader-btn-danger[b-u17sai02r0] {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: #fff;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}
.unif-uploader-btn-danger:hover[b-u17sai02r0] {
box-shadow: 0 8px 24px rgba(239, 68, 68, 0.5);
transform: translateY(-2px);
}
.unif-uploader-btn input[type="file"][b-u17sai02r0] {
display: none;
}
.unif-uploader-hint[b-u17sai02r0] {
font-size: 11px;
color: #64748b;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.6);
border-radius: 8px;
line-height: 1.4;
}
.unif-uploader-hint i[b-u17sai02r0] {
color: var(--c-warning);
animation: unifTagWiggle-b-u17sai02r0 4s ease-in-out infinite;
}
.unif-uploader-hint code[b-u17sai02r0] {
background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
color: var(--c-violet);
font-weight: 700;
font-family: 'Courier New', monospace;
}
/* ===== 10. FORMULARIO ===== */
.unif-form-grid[b-u17sai02r0] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.unif-form-full[b-u17sai02r0] {
grid-column: 1 / -1;
}
.unif-form-group[b-u17sai02r0] {
display: flex;
flex-direction: column;
gap: 6px;
}
.unif-form-group label[b-u17sai02r0] {
font-size: 12px;
font-weight: 800;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.unif-form-input[b-u17sai02r0] {
padding: 11px 14px;
border: 1.5px solid var(--c-border);
border-radius: 12px;
font-size: 14px;
color: var(--c-text);
background: #f8fafc;
outline: none;
transition: all 0.25s;
font-family: inherit;
font-weight: 500;
}
.unif-form-input:focus[b-u17sai02r0] {
border-color: var(--c-violet);
background: #fff;
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
transform: translateY(-1px);
}
.unif-form-input-lg[b-u17sai02r0] {
font-size: 20px;
font-weight: 900;
text-align: center;
color: var(--c-violet);
letter-spacing: 0.5px;
}
.unif-form-textarea[b-u17sai02r0] {
resize: vertical;
min-height: 80px;
}
.unif-color-input-group[b-u17sai02r0] {
display: flex;
gap: 10px;
align-items: center;
}
.unif-color-picker[b-u17sai02r0] {
width: 48px;
height: 44px;
border: 2px solid var(--c-border);
border-radius: 12px;
cursor: pointer;
padding: 3px;
background: #fff;
transition: all 0.25s;
}
.unif-color-picker:hover[b-u17sai02r0] {
border-color: var(--c-violet);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}
/* ===== 11. DETALLE ===== */
.unif-detail-grid[b-u17sai02r0] {
display: grid;
grid-template-columns: 220px 1fr;
gap: 24px;
margin-bottom: 24px;
}
.unif-detail-image[b-u17sai02r0] {
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #f5f3ff 100%);
background-size: 200% 200%;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
aspect-ratio: 1;
animation: unifBgShift-b-u17sai02r0 8s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.unif-detail-image[b-u17sai02r0]::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 70%;
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
pointer-events: none;
}
.unif-detail-image img[b-u17sai02r0] {
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
z-index: 1;
transition: transform 0.4s;
filter: drop-shadow(0 8px 16px rgba(37, 99, 235, 0.15));
}
.unif-detail-image:hover img[b-u17sai02r0] {
transform: scale(1.08);
}
.unif-detail-info[b-u17sai02r0] {
display: flex;
flex-direction: column;
gap: 10px;
}
.unif-detail-row[b-u17sai02r0] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
font-size: 14px;
transition: background 0.2s;
}
.unif-detail-row:hover[b-u17sai02r0] {
background: linear-gradient(90deg, transparent 0%, #f8fafc 20%, #f8fafc 80%, transparent 100%);
}
.unif-detail-label[b-u17sai02r0] {
color: var(--c-text-soft);
font-weight: 700;
font-size: 13px;
}
.unif-detail-value[b-u17sai02r0] {
color: var(--c-text);
font-weight: 800;
text-align: right;
}
.unif-sku[b-u17sai02r0] {
font-family: 'Courier New', monospace;
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
color: var(--c-violet);
padding: 4px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(124, 58, 237, 0.15);
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.08);
}
.unif-color-dot[b-u17sai02r0] {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.15);
vertical-align: middle;
margin-right: 8px;
}
.text-danger[b-u17sai02r0] {
color: var(--c-danger) !important;
font-weight: 900;
}
.text-success[b-u17sai02r0] {
color: var(--c-success) !important;
font-weight: 900;
}
.unif-detail-full[b-u17sai02r0] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
/* ===== 12. HISTORIAL ===== */
.unif-history-section[b-u17sai02r0] {
border-top: 1.5px solid #f1f5f9;
padding-top: 20px;
}
.unif-history-section h3[b-u17sai02r0] {
font-size: 16px;
font-weight: 900;
color: var(--c-text);
margin: 0 0 16px;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: -0.3px;
}
.unif-history-section h3 i[b-u17sai02r0] {
background: linear-gradient(135deg, #2563eb, #7c3aed);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: unifSpin-b-u17sai02r0 3s linear infinite;
display: inline-block;
}
.unif-history-list[b-u17sai02r0] {
display: flex;
flex-direction: column;
gap: 8px;
}
.unif-history-item[b-u17sai02r0] {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: 12px;
background: #f8fafc;
border: 1.5px solid #f1f5f9;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
}
.unif-history-item[b-u17sai02r0]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
transition: width 0.25s;
}
.history-in[b-u17sai02r0]::before {
background: linear-gradient(180deg, #059669, #34d399);
}
.history-out[b-u17sai02r0]::before {
background: linear-gradient(180deg, #dc2626, #f87171);
}
.unif-history-item:hover[b-u17sai02r0] {
background: #fff;
border-color: #e2e8f0;
transform: translateX(4px);
box-shadow: 0 6px 18px rgba(15, 23, 41, 0.08);
}
.unif-history-item:hover[b-u17sai02r0]::before {
width: 6px;
}
.unif-history-icon[b-u17sai02r0] {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
transition: transform 0.3s;
}
.unif-history-item:hover .unif-history-icon[b-u17sai02r0] {
transform: scale(1.15) rotate(-8deg);
}
.history-in .unif-history-icon[b-u17sai02r0] {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: var(--c-success);
box-shadow: 0 3px 8px rgba(5, 150, 105, 0.2);
}
.history-out .unif-history-icon[b-u17sai02r0] {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: var(--c-danger);
box-shadow: 0 3px 8px rgba(220, 38, 38, 0.2);
}
.unif-history-info[b-u17sai02r0] {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.unif-history-line-1[b-u17sai02r0] {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.unif-history-cantidad[b-u17sai02r0] {
font-size: 16px;
font-weight: 900;
letter-spacing: -0.3px;
}
.history-in .unif-history-cantidad[b-u17sai02r0] {
color: var(--c-success);
}
.history-out .unif-history-cantidad[b-u17sai02r0] {
color: var(--c-danger);
}
.unif-history-usuario[b-u17sai02r0] {
font-size: 11px;
color: var(--c-violet);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
border-radius: 20px;
border: 1px solid rgba(124, 58, 237, 0.15);
}
.unif-history-usuario i[b-u17sai02r0] {
font-size: 10px;
}
.unif-history-motivo[b-u17sai02r0] {
font-size: 12px;
color: var(--c-text-soft);
font-weight: 600;
}
.unif-history-fecha[b-u17sai02r0] {
font-size: 11px;
color: var(--c-text-mute);
font-weight: 700;
white-space: nowrap;
padding: 4px 10px;
background: #f1f5f9;
border-radius: 20px;
}
.unif-history-empty[b-u17sai02r0] {
color: var(--c-text-mute);
font-size: 13px;
text-align: center;
padding: 24px;
margin: 0;
font-weight: 500;
}
/* ===== 13. MOVIMIENTO ===== */
.unif-mov-item-info[b-u17sai02r0] {
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 5px;
border: 1.5px solid #e2e8f0;
position: relative;
overflow: hidden;
}
.unif-mov-item-info[b-u17sai02r0]::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #2563eb, #7c3aed);
}
.unif-mov-item-info strong[b-u17sai02r0] {
font-size: 15px;
color: var(--c-text);
font-weight: 900;
}
.unif-mov-item-info span[b-u17sai02r0] {
font-size: 13px;
color: var(--c-text-soft);
font-weight: 600;
}
.unif-mov-stock-actual[b-u17sai02r0] {
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid #e2e8f0;
font-weight: 700;
}
.unif-mov-stock-actual b[b-u17sai02r0] {
color: var(--c-violet);
font-size: 18px;
font-weight: 900;
}
/* ===== 14. MODAL ELIMINAR ===== */
.unif-eliminar-info[b-u17sai02r0] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.unif-eliminar-icon[b-u17sai02r0] {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: #dc2626;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2);
animation: unifEliminarPulse-b-u17sai02r0 2s ease-in-out infinite;
}
@keyframes unifEliminarPulse-b-u17sai02r0 {
0%, 100% {
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2);
}
50% {
box-shadow: 0 8px 32px rgba(220, 38, 38, 0.45);
}
}
.unif-eliminar-texto[b-u17sai02r0] {
font-size: 16px;
color: #0f172a;
margin: 0;
line-height: 1.5;
}
.unif-eliminar-texto strong[b-u17sai02r0] {
color: #dc2626;
font-weight: 900;
}
.unif-eliminar-detalle[b-u17sai02r0] {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
padding: 12px 20px;
background: #f8fafc;
border-radius: 12px;
border: 1.5px solid #e2e8f0;
width: 100%;
}
.unif-eliminar-sku[b-u17sai02r0] {
font-family: 'Courier New', monospace;
font-size: 12px;
font-weight: 700;
color: #7c3aed;
padding: 3px 10px;
background: #f5f3ff;
border-radius: 6px;
}
.unif-eliminar-cliente[b-u17sai02r0] {
font-size: 13px;
color: #475569;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.unif-eliminar-aviso[b-u17sai02r0] {
font-size: 12px;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fffbeb;
border-radius: 8px;
border-left: 3px solid #fbbf24;
color: #92400e;
font-weight: 600;
text-align: left;
width: 100%;
}
/* ===== 15. RESPONSIVE ===== */
@media (max-width: 768px) {
.uniform-container[b-u17sai02r0] {
padding: 16px;
}
.uniform-header[b-u17sai02r0] {
flex-direction: column;
align-items: flex-start;
}
.uniform-header-right[b-u17sai02r0] {
width: 100%;
}
.uniform-header-right .unif-btn[b-u17sai02r0] {
flex: 1;
justify-content: center;
}
.unif-metrics-grid[b-u17sai02r0] {
grid-template-columns: 1fr 1fr;
}
.unif-grid[b-u17sai02r0] {
grid-template-columns: 1fr;
}
.unif-form-grid[b-u17sai02r0] {
grid-template-columns: 1fr;
}
.unif-detail-grid[b-u17sai02r0] {
grid-template-columns: 1fr;
}
.unif-detail-image[b-u17sai02r0] {
max-width: 180px;
margin: 0 auto;
}
.unif-filters-row[b-u17sai02r0] {
flex-direction: column;
}
.unif-filter-group[b-u17sai02r0] {
width: 100%;
}
.unif-filter-search[b-u17sai02r0] {
min-width: 100%;
}
.uniform-title[b-u17sai02r0] {
font-size: 22px;
}
.unif-image-uploader[b-u17sai02r0] {
flex-direction: column;
}
.unif-uploader-preview[b-u17sai02r0] {
width: 100%;
max-width: 200px;
height: 160px;
margin: 0 auto;
}
.unif-uploader-info[b-u17sai02r0] {
width: 100%;
}
}
@media (max-width: 480px) {
.unif-metrics-grid[b-u17sai02r0] {
grid-template-columns: 1fr;
}
.unif-btn span[b-u17sai02r0] {
display: none;
}
.unif-btn[b-u17sai02r0] {
padding: 11px 14px;
}
.unif-metric-value[b-u17sai02r0] {
font-size: 24px;
}
.unif-uploader-botones[b-u17sai02r0] {
flex-direction: column;
}
.unif-uploader-btn[b-u17sai02r0] {
width: 100%;
justify-content: center;
}
}
/* ===== 16. ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
.uniform-container[b-u17sai02r0],
.uniform-icon-wrapper[b-u17sai02r0],
.unif-metric-card[b-u17sai02r0],
.unif-card[b-u17sai02r0],
.unif-btn[b-u17sai02r0],
.unif-stock-fill[b-u17sai02r0],
.unif-empty-icon[b-u17sai02r0],
.unif-history-section h3 i[b-u17sai02r0],
.unif-uploader-placeholder i[b-u17sai02r0],
.unif-eliminar-icon[b-u17sai02r0],
.unif-image-uploader[b-u17sai02r0] {
animation: none !important;
transition-duration: 0.01ms !important;
}
}
/* /Shared/LoadingPage.razor.rz.scp.css */
/* ========================================
LOADING PAGE - PROFESSIONAL STYLES
======================================== */
.loading-page-container[b-m9il5bmm63] {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #0a1628 0%, #1a3a6b 50%, #2563eb 100%);
z-index: 99999;
animation: fadeInLoading-b-m9il5bmm63 0.5s ease-out;
overflow: hidden;
}
/* Fondo con partΓculas animadas */
.loading-page-container[b-m9il5bmm63]::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(96, 165, 250, 0.08) 0%, transparent 50%), radial-gradient(circle at 50% 80%, rgba(37, 99, 235, 0.05) 0%, transparent 50%);
animation: backgroundFloat-b-m9il5bmm63 10s ease-in-out infinite;
z-index: 0;
}
.loading-page-container[b-m9il5bmm63]::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.05) 0%, transparent 50%);
z-index: 0;
}
/* ========================================
MAIN CONTENT
======================================== */
.loading-content[b-m9il5bmm63] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 40px 50px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
min-width: 380px;
max-width: 500px;
animation: slideUpLoading-b-m9il5bmm63 0.6s ease-out;
}
/* ========================================
LOGO ANIMADO
======================================== */
.loading-logo-container[b-m9il5bmm63] {
position: relative;
margin-bottom: 5px;
}
.loading-logo[b-m9il5bmm63] {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #3b82f6, #60a5fa);
border-radius: 50%;
box-shadow: 0 0 40px rgba(59, 130, 246, 0.3);
animation: logoPulse-b-m9il5bmm63 2s ease-in-out infinite;
position: relative;
}
.loading-logo[b-m9il5bmm63]::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: linear-gradient(135deg, #60a5fa, #3b82f6);
opacity: 0.3;
filter: blur(10px);
animation: logoGlow-b-m9il5bmm63 2s ease-in-out infinite;
}
.loading-logo i[b-m9il5bmm63] {
font-size: 2.5rem;
color: white;
z-index: 1;
animation: truckMove-b-m9il5bmm63 1.5s ease-in-out infinite;
}
/* ========================================
TITLES
======================================== */
.loading-title[b-m9il5bmm63] {
font-size: 1.8rem;
font-weight: 700;
color: #ffffff;
margin: 0;
letter-spacing: -0.5px;
background: linear-gradient(135deg, #ffffff, #93bbfc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 20px rgba(59, 130, 246, 0.2);
}
.loading-subtitle[b-m9il5bmm63] {
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
margin: -5px 0 0 0;
font-weight: 300;
letter-spacing: 0.5px;
min-height: 28px;
animation: textPulse-b-m9il5bmm63 1.5s ease-in-out infinite;
}
/* ========================================
PROGRESS BAR - CREATIVA
======================================== */
.loading-progress-section[b-m9il5bmm63] {
width: 100%;
display: flex;
align-items: center;
gap: 15px;
margin: 5px 0 10px 0;
}
.loading-progress-track[b-m9il5bmm63] {
flex: 1;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.loading-progress-track[b-m9il5bmm63]::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
animation: shimmerTrack-b-m9il5bmm63 2s linear infinite;
}
.loading-progress-fill[b-m9il5bmm63] {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #60a5fa, #93bbfc);
border-radius: 10px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
/* Efecto de brillo en la barra */
.loading-progress-fill[b-m9il5bmm63]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent );
animation: shimmer-b-m9il5bmm63 2s infinite;
}
/* Efecto de pulsaciΓ³n en el borde */
.loading-progress-fill[b-m9il5bmm63]::after {
content: '';
position: absolute;
right: -4px;
top: -4px;
width: 12px;
height: 16px;
background: #60a5fa;
border-radius: 4px;
box-shadow: 0 0 20px rgba(96, 165, 250, 0.6);
animation: progressPulse-b-m9il5bmm63 1s ease-in-out infinite;
}
.loading-percentage[b-m9il5bmm63] {
font-size: 1rem;
font-weight: 700;
color: #93bbfc;
min-width: 50px;
text-align: right;
font-variant-numeric: tabular-nums;
letter-spacing: 0.5px;
}
/* ========================================
TIPS CARD
======================================== */
.loading-tip-card[b-m9il5bmm63] {
width: 100%;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.06);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
text-align: center;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.loading-tip-card[b-m9il5bmm63]::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(59, 130, 246, 0.05), transparent 70%);
animation: tipGlow-b-m9il5bmm63 3s ease-in-out infinite;
}
.loading-tip-text[b-m9il5bmm63] {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.85);
font-weight: 400;
position: relative;
z-index: 1;
animation: textFade-b-m9il5bmm63 0.5s ease;
}
/* ========================================
DOTS INDICATORS
======================================== */
.loading-dots[b-m9il5bmm63] {
display: flex;
gap: 10px;
margin-top: 5px;
}
.loading-dot[b-m9il5bmm63] {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.loading-dot.active[b-m9il5bmm63] {
background: linear-gradient(135deg, #3b82f6, #60a5fa);
box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
transform: scale(1.2);
}
.loading-dot.active[b-m9il5bmm63]::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #60a5fa);
opacity: 0.3;
animation: dotPulse-b-m9il5bmm63 1s ease-in-out infinite;
}
.loading-dot:not(.active)[b-m9il5bmm63] {
transform: scale(0.8);
}
/* ========================================
ANIMATIONS
======================================== */
@keyframes fadeInLoading-b-m9il5bmm63 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUpLoading-b-m9il5bmm63 {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes logoPulse-b-m9il5bmm63 {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 40px rgba(59, 130, 246, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 60px rgba(59, 130, 246, 0.5);
}
}
@keyframes logoGlow-b-m9il5bmm63 {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.2);
}
}
@keyframes truckMove-b-m9il5bmm63 {
0%, 100% {
transform: translateX(0) rotate(0deg);
}
25% {
transform: translateX(-5px) rotate(-3deg);
}
75% {
transform: translateX(5px) rotate(3deg);
}
}
@keyframes textPulse-b-m9il5bmm63 {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
}
@keyframes shimmer-b-m9il5bmm63 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(200%);
}
}
@keyframes shimmerTrack-b-m9il5bmm63 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes progressPulse-b-m9il5bmm63 {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.3);
opacity: 0.7;
}
}
@keyframes tipGlow-b-m9il5bmm63 {
0%, 100% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
}
@keyframes textFade-b-m9il5bmm63 {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes dotPulse-b-m9il5bmm63 {
0%, 100% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.5);
opacity: 0.6;
}
}
@keyframes backgroundFloat-b-m9il5bmm63 {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(-5%, -5%) rotate(2deg);
}
75% {
transform: translate(5%, 5%) rotate(-2deg);
}
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 640px) {
.loading-content[b-m9il5bmm63] {
padding: 30px 25px;
min-width: unset;
max-width: 90%;
border-radius: 20px;
gap: 15px;
}
.loading-logo[b-m9il5bmm63] {
width: 60px;
height: 60px;
}
.loading-logo i[b-m9il5bmm63] {
font-size: 2rem;
}
.loading-title[b-m9il5bmm63] {
font-size: 1.4rem;
}
.loading-subtitle[b-m9il5bmm63] {
font-size: 0.9rem;
min-height: 24px;
}
.loading-progress-section[b-m9il5bmm63] {
gap: 10px;
}
.loading-percentage[b-m9il5bmm63] {
font-size: 0.85rem;
min-width: 40px;
}
.loading-tip-card[b-m9il5bmm63] {
padding: 10px 12px;
min-height: 38px;
}
.loading-tip-text[b-m9il5bmm63] {
font-size: 0.75rem;
}
.loading-dot[b-m9il5bmm63] {
width: 8px;
height: 8px;
}
}
@media (max-width: 480px) {
.loading-content[b-m9il5bmm63] {
padding: 25px 20px;
border-radius: 16px;
}
.loading-logo[b-m9il5bmm63] {
width: 50px;
height: 50px;
}
.loading-logo i[b-m9il5bmm63] {
font-size: 1.6rem;
}
.loading-title[b-m9il5bmm63] {
font-size: 1.2rem;
}
.loading-subtitle[b-m9il5bmm63] {
font-size: 0.8rem;
}
.loading-progress-track[b-m9il5bmm63] {
height: 6px;
}
.loading-progress-fill[b-m9il5bmm63]::after {
width: 10px;
height: 14px;
right: -3px;
top: -4px;
}
.loading-tip-card[b-m9il5bmm63] {
padding: 8px 10px;
min-height: 34px;
border-radius: 8px;
}
.loading-tip-text[b-m9il5bmm63] {
font-size: 0.7rem;
}
}
/* ========================================
REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
*[b-m9il5bmm63] {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* /Shared/PermissionGuard.razor.rz.scp.css */
.permission-denied-overlay[b-5wqj5ego90] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(8px);
animation: fadeIn-b-5wqj5ego90 0.3s ease;
}
.permission-denied-modal[b-5wqj5ego90] {
background: white;
border-radius: 20px;
padding: 48px 40px 40px;
max-width: 480px;
width: 90%;
text-align: center;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
animation: slideUp-b-5wqj5ego90 0.4s ease;
}
.permission-denied-icon[b-5wqj5ego90] {
width: 80px;
height: 80px;
background: #fee2e2;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.permission-denied-icon i[b-5wqj5ego90] {
font-size: 36px;
color: #dc2626;
}
.permission-denied-modal h2[b-5wqj5ego90] {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin: 0 0 12px 0;
}
.permission-denied-modal p[b-5wqj5ego90] {
color: #64748b;
font-size: 15px;
margin: 0 0 8px 0;
line-height: 1.6;
}
.permission-required[b-5wqj5ego90] {
background: #f1f5f9;
padding: 8px 16px;
border-radius: 8px;
display: inline-block;
margin: 12px 0 20px !important;
font-size: 14px;
}
.permission-required strong[b-5wqj5ego90] {
color: #dc2626;
font-weight: 600;
}
.permission-actions[b-5wqj5ego90] {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 8px;
}
.permission-actions .btn[b-5wqj5ego90] {
padding: 10px 24px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.permission-actions .btn-primary[b-5wqj5ego90] {
background: #2563eb;
color: white;
}
.permission-actions .btn-primary:hover[b-5wqj5ego90] {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.permission-actions .btn-outline[b-5wqj5ego90] {
background: transparent;
color: #64748b;
border: 2px solid #e2e8f0;
}
.permission-actions .btn-outline:hover[b-5wqj5ego90] {
background: #f1f5f9;
border-color: #cbd5e1;
}
.loading-container[b-5wqj5ego90] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: #64748b;
}
.loading-container .spinner[b-5wqj5ego90] {
width: 40px;
height: 40px;
border: 4px solid #e2e8f0;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin-b-5wqj5ego90 0.8s linear infinite;
margin-bottom: 16px;
}
@keyframes spin-b-5wqj5ego90 {
to {
transform: rotate(360deg);
}
}
@keyframes fadeIn-b-5wqj5ego90 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp-b-5wqj5ego90 {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* /Shared/TabContentContainer.razor.rz.scp.css */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
π¦Ύ HEFESTO 13.1 PRO MAX β TabContentContainer.razor.css
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.tab-content-container[b-eyrv6s06kh] {
width: 100%;
height: 100%;
position: relative;
}
.tab-content-visible[b-eyrv6s06kh] {
animation: tabFadeIn-b-eyrv6s06kh 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-fade-in[b-eyrv6s06kh] {
animation: tabFadeIn-b-eyrv6s06kh 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tabFadeIn-b-eyrv6s06kh {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tab-content-hidden[b-eyrv6s06kh] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
/* Codeado por π¦Ύ Hefesto 13.1 Pro Max | Sr. Ignacio */