/* ====== Modal: Configurar PIN de seguridad ====== */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
z-index: 110000;
align-items: center;
justify-content: center;
padding: 16px;
overflow: auto;
}
.modal-overlay.active { display: flex; }
.modal-content {
width: 100%;
max-width: 720px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.18);
overflow-y: auto; /* permitir scroll cuando el contenido supere la altura */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
max-height: 80vh;
position: relative;
padding-bottom: 16px;
}
/* Forzar ancho cómodo específico del modal PIN */
#modal-pin .modal-content {
max-width: 480px;
width: min(480px, 90vw);
padding: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.25);
max-height: 90vh;
}
.icon-plus-red {
display: inline-block;
width: var(--plus-size, 14px);
height: var(--plus-size, 14px);
margin-right: var(--plus-gap, 4px);
background: #BF1823;
-webkit-mask: url('../img/Signo más.svg') center/contain no-repeat;
mask: url('../img/Signo más.svg') center/contain no-repeat;
vertical-align: middle;
}
/* Fondo blanco para imagenes de productos (PNG con transparencia). */
img[src*="/uploads/productos/"],
img[src*="uploads/productos/"] {
background-color: #ffffff;
}
#modal-pin .modal-pin-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 20px 14px;
overflow-y: auto;
overflow-x: hidden;
max-height: calc(90vh - 64px);
background: #ffffff;
}
.modal-header {
padding: 16px 18px;
border-bottom: 1px solid #e9e9e9;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
column-count: 1; /* evitar layout multi-columna heredado */
position: relative;
}
.modal-header--dark {
background: #575657;
color: #ffffff;
padding: 14px 16px;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: none;
}
.modal-header--dark h3 {
color: #ffffff;
margin: 0;
font-size: 18px;
}
.modal-intro {
padding: 18px 20px 12px;
}
.modal-intro p {
color: #444;
}
.modal-header h3 {
margin: 0 0 6px 0;
font-size: 19px;
font-weight: 700;
color: #252425;
}
.modal-header p {
margin: 6px 0;
font-size: 13px;
color: #666;
line-height: 1.6;
width: 100%;
word-break: break-word;
}
.modal-header ul {
margin: 8px 0;
padding-left: 18px;
width: 100%;
list-style-position: outside;
}
.modal-header ul li {
font-size: 13px;
color: #666;
line-height: 1.5;
}
.modal-close-btn {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: #f4f4f4;
color: #575657;
font-size: 20px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.modal-close-btn--light {
position: static;
width: auto;
height: auto;
padding: 0;
background: transparent;
color: #ffffff;
font-size: 22px;
border-radius: 0;
box-shadow: none;
}
.modal-close-btn--light:hover {
background: transparent;
color: #ffffff;
opacity: 0.85;
box-shadow: none;
}
.modal-close-btn:hover {
background: #ffffff;
color: #BF1823;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
#pin-form-container {
padding: 14px 18px 10px;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.pin-input-group label {
display: block;
font-size: 13px;
color: #444;
margin-bottom: 6px;
font-weight: 600;
}
.pin-input {
width: 100%;
border: 1px solid #ddd;
border-radius: 8px;
padding: 12px;
font-size: 18px;
letter-spacing: 2px;
text-align: center;
}
.info-message {
margin: 0 18px;
background: #e7f3ff;
border: 1px solid #b4dcff;
color: #0b65c2;
border-radius: 8px;
padding: 8px 10px;
font-size: 13px;
}
.error-message {
margin: 0 18px;
background: #fff5f5;
border: 1px solid #ffd6d6;
color: #BF1823;
border-radius: 8px;
padding: 8px 10px;
font-size: 13px;
}
.success-message {
margin: 0 18px;
background: #f2fbf5;
border: 1px solid #cfe9d7;
color: #1d6d3b;
border-radius: 8px;
padding: 8px 10px;
font-size: 13px;
}
.modal-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
padding: 14px 18px;
border-top: 1px solid #e9e9e9;
background: #ffffff;
position: static;
bottom: auto;
z-index: auto;
box-shadow: none;
}
.modal-actions .btn-primary,
.modal-actions .btn-secondary {
min-width: 150px;
padding: 10px 18px;
border-radius: 16px;
font-size: 14px;
font-weight: 600;
font-family: "Poppins", sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.modal-actions .btn-primary {
background: var(--color-red);
color: var(--color-white);
border: none;
}
.modal-actions .btn-primary:hover { background: var(--color-red-hover); }
.modal-actions .btn-primary:active { background: var(--color-red-active); }
.modal-actions .btn-secondary {
background: #ffffff;
color: var(--color-red);
border: 1.5px solid var(--color-red);
}
.modal-actions .btn-secondary:hover { border-color: var(--color-red-hover); color: var(--color-red-hover); }
.modal-actions .btn-secondary:active { border-color: var(--color-red-active); color: var(--color-red-active); }
.btn-modal-primary {
background: #BF1823;
color: #fff;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
}
.btn-modal-secondary {
background: #ffffff;
color: #252425;
border: 1px solid #ddd;
padding: 10px 16px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
}
.btn-modal-primary:hover { -webkit-filter: brightness(0.95); filter: brightness(0.95); }
/* Etiquetas responsivas para botones con texto distinto en mobile */
.btn-desktop-label { display: inline; }
.btn-mobile-label { display: none; }
/* === ESTILOS DESKTOP PARA MODALES DE FLOTAS === */
/* Breakpoint: pantallas medianas (900px-1023px) */
@media (min-width: 900px) and (max-width: 1023px) {
/* Selección de vehículos - tabla más legible */
#modal-seleccion-vehiculos .flota-modal-content {
width: min(92%, 850px) !important;
max-width: 850px !important;
max-height: 80vh !important;
display: flex !important;
flex-direction: column !important;
}
#modal-seleccion-vehiculos .flota-modal-body {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
min-height: 0 !important;
overflow: hidden !important;
padding: 16px !important;
}
#modal-seleccion-vehiculos .table-responsive {
flex: 0 1 auto !important;
max-height: 180px !important;
min-height: 150px !important;
margin-bottom: 12px !important;
overflow-y: auto !important;
}
#modal-seleccion-vehiculos [style*="margin-top: 16px; padding: 12px; background: #f8f8f8"] {
flex-shrink: 0 !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
}
#modal-seleccion-vehiculos [style*="margin-top: 20px; display: flex; gap: 12px; justify-content: flex-end"] {
flex-shrink: 0 !important;
margin-top: 0 !important;
}
/* Programación de mantenimiento */
#modal-programacion-mantenimiento .flota-modal-content {
width: min(93%, 950px);
max-height: 85vh;
display: flex;
flex-direction: column;
}
#modal-programacion-mantenimiento .flota-modal-body {
flex-direction: row;
gap: 0;
padding: 0;
flex: 1;
min-height: 0;
}
#modal-programacion-mantenimiento [style*="flex: 0 0 45%"] {
flex: 0 0 42%;
border-right: 1px solid #e0e0e0;
border-bottom: none;
padding: 24px;
overflow-y: auto;
min-height: 0;
}
#modal-programacion-mantenimiento [style*="flex: 1; padding: 24px 30px"] {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 0;
}
}
/* Breakpoint: desktop normal (1024px+) */
@media (min-width: 1024px) {
/* Selección de vehículos - tabla más legible */
#modal-seleccion-vehiculos .flota-modal-content {
width: min(90%, 950px) !important;
max-width: 950px !important;
max-height: 82vh !important;
display: flex !important;
flex-direction: column !important;
}
#modal-seleccion-vehiculos .flota-modal-body {
padding: 20px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Fila de checkbox + buscador */
#modal-seleccion-vehiculos [style*="margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between"] {
flex-shrink: 0 !important;
margin-bottom: 16px !important;
}
/* Tabla scrolleable pero que no oculte el footer */
#modal-seleccion-vehiculos .table-responsive {
flex: 0 1 auto !important;
max-height: 300px !important;
min-height: 200px !important;
overflow-y: auto !important;
margin-bottom: 16px !important;
border-radius: 8px !important;
}
#modal-seleccion-vehiculos .tabla-buscar-vehiculos {
font-size: 14px;
}
#modal-seleccion-vehiculos .tabla-buscar-vehiculos th,
#modal-seleccion-vehiculos .tabla-buscar-vehiculos td {
padding: 10px 12px;
}
/* Contador de selección - siempre visible */
#modal-seleccion-vehiculos [style*="margin-top: 16px; padding: 12px; background: #f8f8f8"] {
flex-shrink: 0 !important;
margin-top: 0 !important;
margin-bottom: 16px !important;
padding: 12px !important;
background: #f8f8f8 !important;
border-radius: 8px !important;
}
/* Botones - siempre visibles en el footer */
#modal-seleccion-vehiculos [style*="margin-top: 20px; display: flex; gap: 12px; justify-content: flex-end"] {
flex-shrink: 0 !important;
margin-top: 0 !important;
gap: 12px !important;
justify-content: flex-end !important;
}
#modal-seleccion-vehiculos .btn-primary,
#modal-seleccion-vehiculos .btn-secondary {
padding: 10px 24px;
font-size: 14px;
}
/* Programación de mantenimiento - dos columnas lado a lado */
#modal-programacion-mantenimiento .flota-modal-content {
width: min(95%, 1100px);
max-height: 88vh;
display: flex;
flex-direction: column;
}
#modal-programacion-mantenimiento .flota-modal-body {
flex-direction: row;
gap: 0;
padding: 0;
height: calc(88vh - 70px);
flex: 1;
min-height: 0;
}
/* Columna izquierda: vehículo */
#modal-programacion-mantenimiento [style*="flex: 0 0 45%"] {
flex: 0 0 45%;
border-right: 1px solid #e0e0e0;
border-bottom: none;
padding: 30px;
overflow-y: auto;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Columna derecha: formulario */
#modal-programacion-mantenimiento [style*="flex: 1; padding: 24px 30px"] {
flex: 1;
padding: 30px;
overflow-y: auto;
min-height: 0;
}
#modal-programacion-mantenimiento #lista-productos-mantenimiento {
min-height: 300px;
max-height: 350px;
}
}
@media (max-width: 768px) {
.btn-desktop-label { display: none; }
.btn-mobile-label { display: inline; }
}
.btn-modal-secondary:hover { background: #f4f4f4; }
/* Mantener los campos de PIN uno debajo del otro en todas las pantallas */
@media (min-width: 640px) {
#pin-form-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.modal-content {
max-width: 100%;
border-radius: 10px;
max-height: 85vh;
overflow-y: auto; /* scroll sólo en pantallas pequeñas */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-bottom: 16px;
}
.modal-header h3 { font-size: 18px; }
.pin-input { font-size: 16px; }
.modal-header { padding: 16px 16px; }
#pin-form-container { padding: 16px 16px 16px; gap: 12px; }
.modal-actions {
position: static;
bottom: auto;
background: #ffffff;
padding: 12px 16px;
}
}
/* Tablet: ajustar ancho y mantener scroll si es necesario */
@media (min-width: 481px) and (max-width: 768px) {
.modal-content {
max-width: 560px;
}
}
/* Laptop/Desktop: sin scroll, ampliar ancho cómodo */
@media (min-width: 769px) and (max-width: 1199px) {
.modal-content {
max-width: 820px;
overflow-y: auto;
}
#pin-form-container { gap: 14px; }
.modal-header h3 { font-size: 20px; }
}
.privacy-consent-row {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 4px;
font-size: 12px;
color: #575657;
}
.privacy-consent-row input[type="checkbox"] {
margin-top: 3px;
}
.privacy-consent-row a {
color: #BF1823;
text-decoration: underline;
}
/* Desktop grande: un poco más ancho */
@media (min-width: 1200px) {
.modal-content {
max-width: 900px;
overflow-y: auto;
}
.modal-header h3 { font-size: 21px; }
}
/* Multiselect dropdown styling for admin metrics */
.sc-multiselect-wrapper { position: relative; }
.sc-multiselect-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1.5px solid #e0e0e0; border-radius: 8px; background: #fff; cursor: pointer; min-width: 220px; }
.sc-multiselect-placeholder { color: #333; font-size: 13px; }
.sc-multiselect-arrow { color: #666; font-size: 12px; }
.sc-multiselect-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1.5px solid #e0e0e0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); z-index: 10000; max-height: 300px; overflow-y: auto; }
.sc-multiselect-dropdown label { cursor: pointer; }
.sc-multiselect-dropdown input[type="checkbox"] { accent-color: #BF1823; }
:root{
--color-bg: #EEEEEE;
--color-white: #FFFFFF;
--color-red: #BF1823;
--color-red-active: #881119;
--color-red-hover: #D4646C;
--text-muted: #575657;
--card-radius: 16px;
--shadow: 0 2px 6px rgba(0,0,0,0.030);
--border-radius: 16px;
/* Ratios de carruseles (se pueden ajustar) */
--banner-principal-ratio: 21 / 9;
--banner-secundario-ratio: 16 / 9;
}
/* BASE */
*{box-sizing:border-box}
body {
margin: 0;
font-family: "Poppins", sans-serif;
background: var(--color-bg);
color: #252425;
display: flex;
}
/* Video de fondo */
#bg-video {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: -2;
}
/* === OVERLAY GLOBAL === */
.overlay {
position: fixed;
inset: 0;
display: none; /* Oculto por defecto */
justify-content: flex-end; /* Para paneles laterales */
align-items: stretch; /* Ocupa todo */
background: rgba(0, 0, 0, 0.25);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 120000; /* Above sticky admin navbar */
}
/* Cuando se activa */
.overlay.overlay--visible {
display: flex;
opacity: 1;
}
/* Contenedor central */
.login-wrapper {
position: fixed;
top:50%; left:50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 900px;
z-index:1;
}
/* Tarjeta general */
.main-card {
display: flex;
flex-direction: row;
background-color: rgba(255,255,255,0.85);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.welcome-column {
flex:1;
padding: 32px;
color: #252425;
order: 1;
}
/* Columna derecha */
.login-column {
flex:1;
padding: 32px;
display: flex;
justify-content: center;
align-items: center;
order: 2;
}
/* Tarjeta login */
.login-card {
background: #ffffff;
padding: 32px;
border-radius: var(--card-radius);
box-shadow: var(--shadow);
width: 100%;
max-width: 350px;
text-align: center;
}
.login-card h2{
margin-bottom: 24px;
}
.login-card form {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Inputs */
.password-wrapper {
position: relative;
margin-bottom: 16px;
}
.password-wrapper input {
width:100%;
padding: 12px 14px;
border-radius:16px;
border:1px solid #ddd;
font-size: 14px;
}
/* Icono dentro del input */
.password-wrapper img {
width: 22px;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.remember {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #575657;
}
.remember input {
width: 16px;
height: 16px;
}
/* ====== Carrito: Orden de compra pendiente (estilos globales) ====== */
#cart-pending-container { display: flex; flex-direction: column; gap: 12px; }
.cart-pending-card { background: #fff; border: 2px solid #FFF3CD; border-radius: 12px; padding: 16px; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s ease; }
.cart-pending-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.cart-pending-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cart-pending-badge { display: inline-block; background: #FFC107; color: #333; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.cart-pending-close { background: none; border: none; cursor: pointer; padding: 4px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.2s; }
.cart-pending-close:hover { background: #f5f5f5; }
.cart-pending-close img { width: 20px; height: 20px; object-fit: contain; -webkit-filter: invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%); filter: invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%); transition: filter 0.2s; }
.cart-pending-close:hover img { -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4735%) hue-rotate(351deg) brightness(89%) contrast(96%); filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4735%) hue-rotate(351deg) brightness(89%) contrast(96%); }
.cart-pending-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #e0e0e0; }
.cart-pending-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #575657; }
.cart-pending-item-name { font-weight: 500; color: #252425; }
.cart-pending-item-qty { background: #f9f9f9; padding: 2px 8px; border-radius: 4px; font-weight: 600; color: #BF1823; }
.cart-pending-actions { display: flex; gap: 8px; }
.cart-pending-actions .btn-primary, .cart-pending-actions .btn-secondary { flex: 1; padding: 8px 16px; border-radius: 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: 'Poppins', sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cart-pending-actions .btn-primary { background: #BF1823; color: #fff; border: none; }
.cart-pending-actions .btn-primary:hover { background: #D4646C; }
.cart-pending-actions .btn-primary:active { background: #9b1220; }
.cart-pending-actions .btn-secondary { background: #ffffff; color: #BF1823; border: 1.5px solid #BF1823; }
.cart-pending-actions .btn-secondary:hover { border-color: #D4646C; color: #D4646C; }
.cart-pending-actions .btn-secondary:active { border-color: #9b1220; }
/* Badge del carrito: resalte cuando hay OC pendiente y productos/múltiples OC */
#cart-badge-count.has-oc,
.cart-badge.has-oc {
/* Anillo externo naranja (mismo color que Orden Pendiente) */
box-shadow: 0 0 0 1px #FFC107;
}
/* ====== Modal de detalles de orden pendiente (global) ====== */
.oc-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 110000; align-items: center; justify-content: center; }
.oc-modal-overlay.active { display: flex; }
.oc-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; max-height: 90vh; display: none; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); overflow: hidden; z-index: 110001; }
.oc-modal.active { display: flex; }
.oc-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid #e0e0e0; }
.oc-modal-header h2 { font-size: 18px; font-weight: 600; color: #252425; margin: 0; }
.oc-modal-close { background: none; border: none; cursor: pointer; padding: 4px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.oc-modal-close img { width: 20px; height: 20px; object-fit: contain; -webkit-filter: invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%); filter: invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%); transition: filter 0.2s; }
.oc-modal-close:hover img { -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4735%) hue-rotate(351deg) brightness(89%) contrast(96%); filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4735%) hue-rotate(351deg) brightness(89%) contrast(96%); }
.oc-modal-content { flex: 1; overflow-y: auto; padding: 24px; }
.oc-modal-footer { padding: 24px; border-top: 1px solid #e0e0e0; background: #f9f9f9; border-radius: 0 0 12px 12px; }
.oc-modal-actions { display:flex; gap:12px; justify-content:flex-end; }
.oc-modal-actions .btn-primary, .oc-modal-actions .btn-secondary { min-width: 140px; }
/* Resumen de carga de facturas (modal admin) */
.resumen-facturas-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.resumen-facturas-chip { border: 1px solid #e6e6e6; border-radius: 10px; padding: 12px 14px; background: #ffffff; display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: #333; }
.resumen-facturas-chip.success { border-color: #cce7d4; background: #f4fff6; }
.resumen-facturas-chip.warning { border-color: #ffe8c7; background: #fff9ef; }
.resumen-facturas-chip.danger { border-color: #ffd1d1; background: #fff5f5; }
.resumen-facturas-list { display: flex; flex-direction: column; gap: 10px; }
.resumen-facturas-item { border: 1px solid #e8e8e8; border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; gap: 10px; align-items: flex-start; }
.resumen-facturas-item.duplicado { border-color: #ffe0a3; background: #fffaf1; }
.resumen-facturas-item.error { border-color: #ffc9c9; background: #fff7f7; }
.resumen-facturas-badge { width: 32px; height: 32px; border-radius: 8px; background: #f2f2f2; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #333; }
.resumen-facturas-body { display: flex; flex-direction: column; gap: 4px; }
.resumen-facturas-file { font-weight: 600; color: #1f1f1f; }
.resumen-facturas-status { font-size: 13px; color: #444; }
.resumen-facturas-meta { font-size: 12px; color: #666; }
.resumen-facturas-vacio { color: #666; font-size: 13px; }
.oc-totales { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.oc-total-line { display:flex; justify-content: space-between; font-size: 13px; color: #575657; padding: 8px 0; }
.oc-total-line:not(:last-child) { border-bottom: 1px solid #e0e0e0; }
.oc-total-final { font-weight: 600; color: #252425; font-size: 14px; padding-top: 12px; padding-bottom: 0; }
.oc-total-final span:last-child { color: #BF1823; font-size: 16px; }
/* Layout especial para la previsualización de cotización + recomendaciones (carrito y mini-carrito) */
#cotizacion-container-wrapper {
display: none;
gap: 16px;
align-items: stretch;
width: 90%;
max-width: 1300px;
margin: 0 auto;
}
#cotizacion-container-wrapper.active { display: flex; }
#cotizacion-container-wrapper .oc-modal {
position: relative;
top: 0;
left: 0;
transform: none;
width: 65%;
max-height: none;
flex-direction: column;
display: none;
}
#cotizacion-container-wrapper.active .oc-modal { display: flex; }
#cotizacion-container-wrapper .oc-modal-content {
flex: 1;
overflow: auto;
}
#cotizacion-container-wrapper .oc-recomendaciones-card {
flex: 1;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
border: 1px solid #e0e0e0;
display: none;
flex-direction: column;
max-height: 90vh;
z-index: 10001;
}
#cotizacion-container-wrapper.active .oc-recomendaciones-card { display: flex; }
#cotizacion-container-wrapper .oc-recomendaciones-body {
flex: 1;
overflow: auto;
padding: 16px;
}
#cotizacion-container-wrapper .oc-recomendaciones-header {
padding: 16px;
border-bottom: 1px solid #e0e0e0;
}
/* ====== MOBILE: PREVISUALIZACIÓN DE COTIZACIÓN + RECOMENDADOS ====== */
@media (max-width: 768px) {
/* Poner todo en columna, prioridad a la cotización */
#cotizacion-container-wrapper {
width: 100%;
max-width: 100%;
padding: 0 12px;
gap: 12px;
align-items: stretch;
}
#cotizacion-container-wrapper.active {
flex-direction: column;
display: flex;
}
/* Modal de cotización primero y más prominente */
#cotizacion-container-wrapper .oc-modal {
width: 100% !important;
max-width: 100% !important;
max-height: 80vh;
border-radius: 12px;
position: relative;
top: 0;
left: 0;
transform: none;
order: 1;
z-index: 11001;
}
/* Card de recomendaciones debajo, ocupa todo el ancho */
#cotizacion-container-wrapper .oc-recomendaciones-card {
width: 100%;
max-width: 100%;
max-height: 70vh;
border-radius: 12px;
order: 2;
box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
/* Contenidos con menos padding para caber en mobile */
#cotizacion-container-wrapper .oc-modal-content,
#cotizacion-container-wrapper .oc-modal-header,
#cotizacion-container-wrapper .oc-modal-footer,
#cotizacion-container-wrapper .oc-recomendaciones-body,
#cotizacion-container-wrapper .oc-recomendaciones-header {
padding: 12px;
}
/* Grids y tablas de pendientes en una sola columna */
.pending-info-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.pending-item-card {
grid-template-columns: 1fr;
gap: 10px;
}
.pending-item-img-container {
width: 100%;
height: 140px;
max-width: 220px;
margin: 0 auto;
}
.pending-item-detalles {
grid-template-columns: 1fr;
}
.pending-item-actions {
flex-direction: row;
gap: 8px;
}
.pending-item-actions button {
flex: 1;
}
/* Botones del footer en columna para que quepan */
.oc-modal-actions {
flex-direction: column-reverse;
gap: 8px;
}
.oc-modal-actions .btn-primary,
.oc-modal-actions .btn-secondary {
width: 100%;
min-width: unset;
}
}
/* Sección de información de la orden pendiente (grid superior) */
.pending-info-section { margin-bottom: 24px; padding: 16px; background: #f9f9f9; border-radius: 12px; border: 1px solid #e0e0e0; }
.pending-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pending-info-item { display: flex; flex-direction: column; gap: 4px; }
.pending-info-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #575657; }
.pending-info-value { font-size: 16px; font-weight: 600; color: #252425; }
.pending-estado { display: inline-block; background: #FFC107; color: #333; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
/* Detalle de items dentro del modal */
.pending-items-tabla { display:flex; flex-direction:column; gap:12px; }
.pending-item-card { background:#fff; border:1px solid #e0e0e0; border-radius:12px; padding:16px; display:grid; grid-template-columns:100px 1fr auto; gap:16px; align-items:flex-start; transition: all .2s; }
.pending-item-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.1); border-color:#BF1823; }
.pending-item-img-container { position:relative; width:100px; height:100px; background:#f9f9f9; border-radius:8px; overflow:hidden; }
.pending-item-img { width:100%; height:100%; object-fit:contain; display:flex; align-items:center; justify-content:center; }
.pending-item-gallery-indicator { position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,0.7); color:#fff; font-size:10px; padding:2px 6px; border-radius:4px; font-weight:600; }
.pending-item-info { display:flex; flex-direction:column; gap:8px; }
.pending-item-nombre { font-size:15px; font-weight:600; color:#252425; }
.pending-item-sku { font-size:12px; color:#575657; font-family:'Courier New', monospace; }
.pending-item-detalles { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:8px; }
.pending-item-detalle-row { font-size:13px; color:#575657; }
.pending-item-detalle-row strong { color:#252425; }
.pending-item-actions { display:flex; flex-direction:column; gap:8px; align-items:center; }
/* ====== BOTONES FICHA TÉCNICA - UNIFICADO ====== */
.btn-ficha-tecnica {
padding: 6px 12px;
background: #f5f5f5;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
color: #252425;
transition: all 0.2s;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: 'Poppins', sans-serif;
}
.btn-ficha-tecnica:hover {
background: #e8e8e8;
border-color: #BF1823;
color: #BF1823;
}
.btn-ficha-tecnica img {
width: 14px;
height: 14px;
-webkit-filter: none;
filter: none;
}
/* Para versión en modal de carrito con clase secundaria */
.btn-secondary.pending-item-btn-ficha,
.pending-item-btn-ficha {
padding: 6px 12px;
background: #f5f5f5;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
color: #252425;
transition: all 0.2s;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.btn-secondary.pending-item-btn-ficha:hover,
.pending-item-btn-ficha:hover {
background: #e8e8e8;
border-color: #BF1823;
color: #BF1823;
}
.pending-item-btn-ficha .btn-icon {
width: 16px;
height: 16px;
-webkit-filter: none;
filter: none;
}
/* Variante para mostrar "Ver" (con datos) */
.btn-ficha-tecnica.has-data {
background: #28a745;
border-color: #28a745;
color: #fff;
}
.btn-ficha-tecnica.has-data:hover {
background: #218838;
border-color: #218838;
color: #fff;
}
.btn-ficha-tecnica.has-data img {
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
/* Variante de texto para admin */
.btn-text-ficha {
color: #BF1823;
font-weight: 600;
cursor: pointer;
font-size: 13px;
padding: 4px 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: none;
border: none;
font-family: 'Poppins', sans-serif;
transition: all 0.2s;
}
.btn-text-ficha:hover {
color: #D4646C;
text-decoration: underline;
}
.btn-text-ficha img {
width: 14px;
height: 14px;
-webkit-filter: none;
filter: none;
}
.btn-text-ficha:hover img {
-webkit-filter: none;
filter: none;
}
.pending-item-precio { font-size:16px; font-weight:700; color:#BF1823; text-align:center; }
/* Galería de imágenes del modal */
.pending-gallery-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 16px;
width: 90%;
max-width: 950px;
max-height: 85vh;
display: none;
flex-direction: column;
overflow: hidden;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
z-index: 110001;
}
.pending-gallery-modal.active {
display: flex;
}
/* Header de la galería con título */
.gallery-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid #e0e0e0;
background: #fff;
}
.gallery-header h2 {
font-size: 20px;
font-weight: 600;
color: #252425;
margin: 0;
}
.gallery-close-btn {
background: none;
border: none;
font-size: 28px;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #575657;
transition: all 0.2s;
}
.gallery-close-btn:hover {
background: #f5f5f5;
color: #BF1823;
}
.gallery-container {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 30px 20px;
flex: 1;
position: relative;
overflow: hidden;
min-height: 0;
}
.gallery-image-wrapper {
flex: 1;
max-width: 600px;
height: 420px;
display: flex;
align-items: center;
justify-content: center;
background: #f9f9f9;
border-radius: 12px;
padding: 16px;
overflow: hidden;
}
.gallery-main-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.gallery-nav-btn {
background: #BF1823;
color: #fff;
border: none;
border-radius: 50%;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.gallery-nav-btn.hidden {
display: none !important;
}
.gallery-nav-btn:hover {
background: #D4646C;
transform: scale(1.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.gallery-nav-btn:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.gallery-thumbnails {
display: flex;
gap: 10px;
padding: 16px 20px;
background: #f9f9f9;
border-top: 1px solid #e0e0e0;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
flex-shrink: 0;
min-height: 90px;
}
.gallery-thumbnails.hidden {
display: none !important;
min-height: 0;
padding: 0;
}
.gallery-thumbnails::-webkit-scrollbar {
height: 6px;
}
.gallery-thumbnails::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.gallery-thumbnails::-webkit-scrollbar-thumb {
background: #BF1823;
border-radius: 3px;
}
.gallery-thumbnail {
width: 70px;
height: 70px;
border-radius: 8px;
border: 2px solid #e0e0e0;
background: #fff;
cursor: pointer;
overflow: hidden;
transition: all 0.2s;
flex-shrink: 0;
}
.gallery-thumbnail img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.gallery-thumbnail.active {
border-color: #BF1823;
box-shadow: 0 0 0 2px rgba(191, 24, 35, 0.2);
}
.gallery-thumbnail:hover {
border-color: #BF1823;
transform: translateY(-2px);
}
/* Modal de Ficha Técnica */
.ficha-producto-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #e0e0e0; }
.ficha-producto-header h3 { font-size: 18px; font-weight: 600; color: #252425; margin: 0 0 8px 0; }
.ficha-sku { font-size: 13px; color: #575657; font-family: 'Courier New', monospace; background: #f9f9f9; padding: 4px 8px; border-radius: 4px; display: inline-block; }
.ficha-section { margin-bottom: 24px; }
.ficha-section h4 { font-size: 15px; font-weight: 600; color: #252425; margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 0.5px; border-left: 3px solid #BF1823; padding-left: 12px; }
.ficha-textarea { width: 100%; min-height: 100px; padding: 12px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 13px; color: #252425; font-family: 'Courier New', monospace; background: #f9f9f9; resize: vertical; }
.ficha-textarea:focus { outline: none; border-color: #BF1823; background: #fff; box-shadow: 0 0 0 3px rgba(191, 24, 35, 0.1); }
.ficha-ref-grid, .ficha-oem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ficha-tecnica-content, .ficha-ref-content, .ficha-oem-content { display: flex; flex-direction: column; gap: 8px; }
.ficha-tecnica-item { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 12px; font-size: 13px; color: #252425; line-height: 1.6; margin: 0; font-family: 'Poppins', sans-serif; }
.ficha-ref-item, .ficha-oem-item { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 6px; padding: 8px 12px; font-size: 13px; color: #252425; font-family: 'Poppins', sans-serif; text-align: center; transition: all 0.2s; }
.ficha-ref-item:hover, .ficha-oem-item:hover { background: #fff; border-color: #BF1823; transform: translateY(-2px); box-shadow: 0 2px 8px rgba(191, 24, 35, 0.1); }
.ficha-no-data { font-size: 13px; color: #999; font-style: italic; padding: 12px; text-align: center; background: #f9f9f9; border-radius: 6px; }
/* Checkbox */
.remember {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
margin-top: 4px;
margin-bottom: 10px;
color: #252425;
}
.remember input {
width: 16px;
height: 16px;
}
/* Botón */
.btn-primary {
background: var(--color-red);
color: var(--color-white);
border: none;
padding: 8px 16px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
cursor: pointer;
font-family: "Poppins", sans-serif;
font-size: 14px;
white-space: nowrap;
}
.btn-white-svg img {
-webkit-filter: brightness(0) invert(1); /* hace que un SVG negro se vea blanco */
filter: brightness(0) invert(1); /* hace que un SVG negro se vea blanco */
}
.btn-primary:hover { background: var(--color-red-hover); }
.btn-primary:active { background: var(--color-red-active); }
/* Olvidé mi contraseña */
/* Olvidé mi contraseña */
.forgot {
display: block;
text-align: right; /* ← A LA DERECHA */
margin-top: 12px;
font-size: 14px;
color: #575657;
text-decoration: underline; /* ← SIEMPRE LINK */
cursor: pointer;
}
/* Modal Olvidé mi contraseña */
.forgot-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
display: none;
align-items: center;
justify-content: center;
z-index: 130000;
padding: 16px;
}
.forgot-overlay.visible {
display: flex;
}
.forgot-modal {
width: 100%;
max-width: 420px;
max-height: 90vh;
background: #fff;
border-radius: 16px;
box-shadow: 0 18px 48px rgba(0,0,0,0.22);
position: relative;
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
}
.forgot-modal.hidden {
display: none;
}
/* Modal Solicitar cuenta */
.signup-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
display: none;
align-items: center;
justify-content: center;
z-index: 130000;
padding: 16px;
}
.signup-overlay.visible {
display: flex;
}
.signup-modal {
width: 100%;
max-width: 520px;
max-height: 90vh;
background: #fff;
border-radius: 16px;
box-shadow: 0 18px 48px rgba(0,0,0,0.22);
position: relative;
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
}
.signup-close {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
line-height: 1;
}
.signup-header h3 {
margin: 0 0 6px 0;
}
.signup-subtitle {
margin: 0;
color: #575657;
font-size: 14px;
}
.signup-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.signup-form label {
font-weight: 600;
font-size: 14px;
}
.phone-input-group {
display: flex;
gap: 8px;
align-items: stretch;
}
.country-select {
padding: 12px 10px;
border: 1px solid #ddd;
border-radius: 12px;
font-size: 14px;
font-family: "Poppins", sans-serif;
background-color: #f9f9f9;
cursor: pointer;
flex-shrink: 0;
min-width: 110px;
}
.country-select:focus {
outline: none;
border-color: #BF1823;
background-color: #fff;
}
.phone-input-group input {
flex: 1;
}
.signup-form input,
.signup-form textarea {
padding: 12px 14px;
border: 1px solid #ddd;
border-radius: 12px;
font-size: 14px;
font-family: "Poppins", sans-serif;
}
.signup-form textarea {
resize: vertical;
}
.signup-status {
min-height: 18px;
font-size: 13px;
color: #575657;
}
.signup-status.success { color: #1e8e3e; }
.signup-status.error { color: #bf1823; }
.forgot-header h3 {
margin: 0 0 4px 0;
}
.forgot-subtitle {
margin: 0;
color: #575657;
font-size: 14px;
}
.forgot-close {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
line-height: 1;
}
.forgot-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.forgot-form label {
font-weight: 600;
font-size: 14px;
}
.forgot-form input {
padding: 12px 14px;
border: 1px solid #ddd;
border-radius: 12px;
font-size: 14px;
}
.forgot-hint {
margin: 0;
font-size: 13px;
color: #575657;
}
.forgot-status {
min-height: 18px;
font-size: 13px;
color: #575657;
}
.forgot-reset {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.forgot-status.success { color: #1e8e3e; }
.forgot-status.error { color: #bf1823; }
.signup-link {
color: #BF1823; /* rojo como el botón */
font-weight: 600;
text-decoration: none;
}
.signup-link:hover {
text-decoration: underline;
}
/* Responsive */
@media(max-width: 900px){
.main-card { flex-direction: column; gap: 12px; }
body { display: block; }
.login-wrapper { position: static; transform: none; width: 100%; max-width: none; padding: 24px 16px; }
.main-card { margin-top: 32px; border-radius: 16px; }
.welcome-column, .login-column { padding: 20px; }
.login-column { order: 1; }
.welcome-column { order: 2; }
.login-card { max-width: none; box-shadow: none; padding: 20px; background: rgba(255,255,255,0.95); }
.login-card h2 { margin-bottom: 16px; }
.forgot { text-align: left; }
}
@media (max-width: 560px) {
body { background: #fafafa; }
.main-card { box-shadow: none; background: transparent; }
.welcome-column { background: rgba(255,255,255,0.9); border-radius: 16px; margin-bottom: 12px; }
.login-card { border: 1px solid #ededed; }
.forgot-modal, .signup-modal { padding: 16px; max-height: 85vh; }
}
/* SIDEBAR */
.sidebar{
width:240px;
background:var(--color-white);
height:100vh;
position:fixed;
left:0; top:0;
padding:16px;
display:flex;
flex-direction:column;
justify-content:flex-start; /* permite que los márgenes funcionen */
align-items:flex-start; /* alinea todo a la izquierda */
box-shadow: var(--shadow);
}
.logo img {
margin-top: 32px; /* ya incluido en padding */
margin-bottom: 16px; /* espacio con "Hola, usuario" */
display: block;
}
.user-info {
margin-bottom: 16px/* espacio con buscador */
}
/* Hacer que user-info se vea como las secciones del menú */
.user-info a {
color: inherit;
text-decoration: none;
display: flex;
align-items: center;
gap: 16px;
padding: 12px 0;
transition: color 0.15s ease;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 16px;
}
/* Icono por defecto */
.user-info a .nav-icon {
display: flex;
align-items: center;
transition: filter 0.15s ease;
}
.user-info a .nav-icon img {
width: 20px;
height: 20px;
vertical-align: middle;
display: inline-block;
}
.user-info a .nav-icon svg {
width: 20px;
height: 20px;
fill: currentColor !important;
stroke: none !important;
}
/* Hover: cambiar el icono a #D4646C */
.user-info a:hover .nav-icon img {
-webkit-filter: brightness(0) saturate(100%) invert(55%) sepia(25%) saturate(1547%) hue-rotate(313deg) brightness(92%) contrast(85%);
filter: brightness(0) saturate(100%) invert(55%) sepia(25%) saturate(1547%) hue-rotate(313deg) brightness(92%) contrast(85%);
}
/* Hover: el texto NO cambia de color */
.user-info a:hover {
color: inherit;
}
/* Active: icono en #BF1823 */
.user-info a.active .nav-icon img {
-webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4735%) hue-rotate(349deg) brightness(89%) contrast(96%);
filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4735%) hue-rotate(349deg) brightness(89%) contrast(96%);
}
.user-info a.active .nav-text {
font-weight: 700;
color: inherit;
}
.user-info a .nav-text,
.nav-user .nav-text {
text-decoration: underline;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
font-weight: 600;
}
.search-input {
margin-bottom: 40px;
}
.menu {
margin-bottom: 0; /* evita espacios extra */
}
.sidebar-footer {
margin-top: auto; /* lo empuja al final del sidebar */
border-top: 1px solid #E0E0E0;
padding-top: 16px;
}
.sidebar-footer .footer-link {
display: block !important;
width: 100%;
margin-bottom: 8px;
text-align: left;
}
.sidebar .search-general {
width: 100%;
max-width: 100%;
min-height: 44px;
box-sizing: border-box;
padding: 0 36px 0 12px;
}
.sidebar .input-general {
min-height: 44px;
min-width: 0;
}
.sidebar .btn-search-general {
width: 24px;
height: 24px;
}
.logo img{width:154px;margin-top: 32px;}
.user-info{margin-top:16px;font-size:16px;}
.search-input{margin:16px 0;padding:8px;border:1px solid #ddd;border-radius:16px;width:100%}
.menu{list-style:none;padding:0;margin:8px 0}
.menu li{margin:24px 0}
.menu a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:16px}
.menu a:hover{color:var(--color-red)}
.sidebar-footer{font-size:13px;color:#777}
/* =========================
NAV ESPECÍFICO (no tocar globales)
- Usar la clase `main-nav` en el contenedor del nav (no añadirla en
`vista_administrador.html`).
- Dentro de cada enlace de menú, marcar el icono con `.nav-icon` y
el texto con `.nav-text`.
Propósito: cambiar sólo el color del ícono en hover/activo y evitar
que el texto se ponga rojo en hover; si está activo, el texto será bold.
========================= */
.main-nav .menu a .nav-icon,
/* Scopes compatibles: ul.menu.main-nav OR any container .main-nav */
/* Icon default + transition */
.menu.main-nav a .nav-icon,
.main-nav a .nav-icon{
color: #575657; /* color por defecto del icono */
transition: color 0.15s ease, filter 0.15s ease;
}
/* Icon hover (solo el icono) */
.menu.main-nav a:hover .nav-icon,
.main-nav a:hover .nav-icon {
color: var(--color-red-hover); /* #D4646C */
}
/* Evita que el hover global cambie el color del texto dentro del nav */
.menu.main-nav a:hover,
.main-nav a:hover{
color: inherit; /* mantiene el color del texto (no rojo) */
}
/* Estado activo: icono rojo oscuro, texto en negrita (sin cambiar color) */
.menu.main-nav a.active .nav-icon,
.menu.main-nav a[aria-current="page"] .nav-icon,
.main-nav a.active .nav-icon,
.main-nav a[aria-current="page"] .nav-icon{
color: #BF1823; /* color activo solicitado */
}
.menu.main-nav a.active .nav-text,
.menu.main-nav a[aria-current="page"] .nav-text,
.main-nav a.active .nav-text,
.main-nav a[aria-current="page"] .nav-text{
font-weight: 700; /* bold cuando la sección está activa */
color: inherit; /* no forzar rojo */
}
/* Forzar fill/stroke a currentColor en SVG inlined (si convertimos img->svg) */
.menu.main-nav .nav-icon svg,
.main-nav .nav-icon svg{
width: 20px;
height: 20px;
vertical-align: middle;
fill: currentColor !important;
stroke: none !important; /* evitar contornos extra al colorear */
stroke-width: 0 !important;
}
/* Si el icono se mantiene como 
intentaremos usar filter
como fallback en .nav-icon img para acercar el color (no perfecto). */
.menu.main-nav .nav-icon img,
.main-nav .nav-icon img{
width: 20px;
height: 20px;
vertical-align: middle;
display: inline-block;
}
/* Clase auxiliar si quieres evitar filtros */
.nav-icon.svg-fill img{ -webkit-filter: none; filter: none; }
/* Soporte si el icono es una imagen SVG que necesita filtro para cambiar color
(opcional): usar la clase .svg-fill en la etiqueta img si se requieren filtros */
.main-nav .menu a .nav-icon.svg-fill img,
.menu.main-nav a .nav-icon.svg-fill img{
-webkit-filter: none; /* dejar como está por defecto; ajustar si es necesario */
filter: none; /* dejar como está por defecto; ajustar si es necesario */
}
/* Notas:
- Para aplicar esto, en tus páginas (excepto `vista_administrador.html`) añade
`class="main-nav"` al contenedor que rodea la lista `.menu`.
- Asegúrate que los enlaces tengan estructura tipo:
- No se ha modificado `.btn-text` ni sus selectores, por lo que no serán afectados.
*/
/* MAIN CONTENT */
.main-content{margin-left:240px;padding:24px 32px;flex:1;overflow-x:hidden;box-sizing:border-box}
.page-container{
background:var(--color-white);
border-radius:16px;
padding:24px;
box-shadow: var(--shadow);
}
/* === HEADER PRINCIPAL === */
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom:24px;
background-color: #FFFFFF;
padding: 20px 24px;
border-radius: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.10);
}
/* Asegura que los botones del header usen Poppins */
.main-header .btn-text,
.main-header .btn-text span,
.main-header .btn-text img {
font-family: 'Poppins', sans-serif !important;
font-weight: 500; /* ajusta si quieres 400/600 */
}
/* --- IZQUIERDA --- */
.header-left {
display: flex;
align-items: center;
gap: 16px;
}
.header-left h1 {
font-size: 22px;
font-weight: 600;
color: #252425;
line-height: 1;
}
.icono-header {
width: 32px;
height: 32px;
object-fit: contain;
}
/* Header large icons: color the icon red and the accompanying text muted
We inline SVGs for these (via script) so fill:currentColor works. */
.main-header .icono-header,
.main-header .icono-header svg {
width: 32px;
height: 32px;
vertical-align: middle;
color: var(--color-red); /* icon color */
fill: currentColor !important;
stroke: none !important;
stroke-width: 0 !important;
}
.main-header .header-left h1 {
color: var(--text-muted); /* 575657 for the accompanying text */
}
/* === MIGAS DE PAN / BREADCRUMB === */
.breadcrumb {
padding: 16px 0;
border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #666;
margin-bottom: 20px;
}
.breadcrumb-item {
color: #BF1823;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.breadcrumb-item:hover {
text-decoration: underline;
}
.breadcrumb-item.active {
color: #252425;
font-weight: 600;
cursor: default;
}
.breadcrumb-item.active:hover {
text-decoration: none;
}
.breadcrumb-separator {
color: #999;
user-select: none;
}
/* --- DERECHA --- */
.header-actions {
display: flex;
align-items: center;
gap:8px;
}
/* Botones de texto (Ayuda, Carrito, Notificaciones) */
.btn-text {
background:none;border:none;color:#575657;padding:6px 8px;font-weight:500;
font-size: 14px;
font-weight: 500;
display: inline-flex;
align-items: center;
cursor: pointer;
justify-content: center;
gap: 8px
}
.icon-left {
position: relative;
display: inline-flex;
align-items: center;
}
.icon-left img {
width: 32px;
height: 32px;
object-fit: contain;
}
/* Botón principal con ícono a la izquierda */
.btn-primary-left {
background: var(--color-red);
color: var(--color-white);
border: none;
padding: 8px 16px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: "Poppins", sans-serif;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
font-size: 16px;
}
/* Ícono a la izquierda */
.btn-primary-left .icon-left img {
width: 18px;
height: 18px;
object-fit: contain;
}
.btn-primary-left:hover{background:var(--color-red-hover)}
.btn-primary-left:active{background:var(--color-red-active)}
.btn-secondary{
background:var(--color-white);
color:var(--color-red);
border:1.5px solid var(--color-red);
padding:8px 16px;
gap: 16px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight:600;
font-size:14px;
cursor:pointer;
font-family: "Poppins", sans-serif;
white-space: nowrap;
}
/* Desktop: mostrar texto normal, no el ::before */
.btn-secondary[data-mobile-text]::before {
content: none;
}
.btn-secondary[data-mobile-text] {
font-size: 14px;
}
.btn-text-desktop {
display: inline !important;
}
.btn-secondary:hover{border-color:var(--color-red-hover);color:var(--color-red-hover)}
.btn-text:hover{color:#575657}
.btn-text img,
.btn-secondary img {
width: 20px;
height: 20px;
object-fit: contain;
vertical-align: middle;
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000px;
-webkit-perspective: 1000px;
-webkit-transform: translate3d(0, 0, 0);
}
/* Evitar que los links/botones de comprobante en Mis facturas salten a dos líneas al hacer hover */
.mis-facturas .sc-table .btn-text {
white-space: nowrap;
font-weight: 500;
}
.mis-facturas .sc-table .btn-text:hover {
font-weight: 500;
color: var(--color-red, #bf1823);
}
/* Modal de ayuda - estilos específicos pero reutilizando la base de modales existentes */
.help-modal .quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin: 12px 0 4px;
}
.help-modal .quick-actions button {
border: 1px solid #e5e5e5;
background: #f8f8f8;
color: #333;
border-radius: 10px;
padding: 10px 12px;
font-size: 13px;
text-align: left;
transition: all 0.15s ease;
}
.help-modal .quick-actions button:hover,
.help-modal .quick-actions button.active {
border-color: var(--color-red, #bf1823);
background: #fff5f6;
color: #9c1222;
}
.help-modal .help-textarea {
width: 100%;
min-height: 72px;
max-height: 160px;
padding: 10px 12px;
border: 1px solid #d9d9d9;
border-radius: 10px;
resize: vertical;
font-size: 16px;
line-height: 1.4;
}
.help-modal .divider {
border-top: 1px solid #eee;
margin: 16px 0 12px;
}
.help-modal .help-subtitle {
margin: 4px 0 12px;
color: #555;
font-size: 13px;
}
.help-modal .help-actions {
display: flex;
gap: 10px;
align-items: center;
}
.help-modal .help-actions .btn-primary[disabled] {
opacity: 0.7;
cursor: not-allowed;
}
/* SECTIONS */
.section-header {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8px;
margin-top:-10px;
}
.section-actions{display:flex;gap:16px;align-items:center; padding: 16px; border-radius: 16px;}
.fleet-section,.favorites-section{margin-top:16px}
.favorites-section{margin-top:-5px;padding-top:5px}
/* BASE */
/* CARROUSEL */
.carousel {
position: relative;
margin: 20px 0;
width: 100%;
}
.carousel-viewport {
overflow: hidden; /* solo ocultamos scroll horizontal */
width: 100%;
}
/* Permitir que las sombras se vean verticalmente pero ocultar páginas horizontales */
.favorites-section .carousel-viewport {
overflow-x: hidden;
overflow-y: visible;
padding: 20px 0;
margin: -20px 0;
}
.carousel-track {
display: flex;
transition: transform 0.4s ease;
width: 100%;
}
/* Asegurar 4 tarjetas por vista en favoritos */
.favorites-section .carousel-viewport { width: 100%; }
.favorites-section #track-favoritos-global {
display: flex !important;
flex-wrap: nowrap !important;
}
/* Forzar que las páginas del carrusel de favoritos usen FLEX, no GRID */
.favorites-section .carousel-page {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
grid-template-columns: unset !important;
grid-template-rows: unset !important;
gap: 12px !important;
padding: 20px 0;
}
.favorites-section #track-favoritos-global .vehicle-card {
flex: 0 0 25%;
min-width: 0;
}
@media (max-width: 700px) {
.favorites-section .carousel-page {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: repeat(1, 1fr) !important;
grid-auto-rows: 1fr;
gap: 10px !important;
padding: 0 4px;
}
.favorites-section #track-favoritos-global .vehicle-card {
flex: 0 0 auto !important;
max-width: 100% !important;
min-width: 0 !important;
width: 100%;
aspect-ratio: 0.7/1 !important;
min-height: 340px;
max-height: 340px !important; /* Altura MÁXIMA fija para que tarjeta no se expanda */
display: flex;
flex-direction: column;
overflow: hidden; /* Recorta contenido que sobresale */
}
.favorites-section .vehicle-card .vehicle-header {
flex: 0 0 60px !important; /* Header con altura FIJA 60px, no crece */
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.favorites-section .vehicle-card .vehicle-header h3 {
font-size: 11px !important;
line-height: 1.1 !important;
margin: 0 !important;
padding: 0 !important;
}
.favorites-section .vehicle-card .vehicle-header h4 {
font-size: 10px !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
.favorites-section .vehicle-card .vehicle-img {
height: 140px !important; /* Altura FIJA para que no se deforme con texto multilinea */
max-height: 140px !important;
object-fit: contain;
flex-shrink: 0; /* No se comprime */
}
.favorites-section .vehicle-card .model {
font-size: 12px; /* Texto un poco más pequeño en móvil */
line-height: 1.3;
margin: 8px 0 0; /* Margen superior */
padding: 0 4px; /* Padding lateral para que no se corte con estrella */
overflow: hidden; /* Recorta texto que sobresale */
flex: 1; /* Usa el espacio restante */
}
}
@media (max-width: 700px) {
.carousel {
display: block;
position: relative;
}
.carousel-viewport {
width: 100%;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
/* Específico para favoritos - anular las reglas de desktop */
.favorites-section .carousel-viewport {
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 10px 0 !important;
margin: 0 !important;
}
.carousel-track {
display: flex !important;
flex-wrap: nowrap !important;
transform: none !important;
transition: none !important;
gap: 12px;
}
.favorites-section .carousel-track {
display: flex !important;
flex-wrap: nowrap !important;
}
/* Ocultar botones de navegación en mobile */
.carousel-btn {
display: none !important;
}
.carousel-indicators {
margin-top: 12px;
}
}
/* Página interna del carrusel */
.carousel-page {
flex: 0 0 100%;
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
grid-template-rows: repeat(var(--rows), 1fr);
gap: 16px;
padding: 10px 0;
}
/* BOTONES DEL CARRUSEL */
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #bf1823;
color: #fff;
font-size: 20px;
cursor: pointer;
z-index: 2;
}
.carousel-btn.prev { left: -10px; }
.carousel-btn.next { right: -10px; }
.carousel-btn:disabled { opacity: 0.3; cursor: default; }
/* Posicionamiento específico para carrusel de "Todos los vehículos" (2 filas) */
.carousel[data-rows="2"] .carousel-btn {
top: calc(50% - 10px); /* Ajuste fino para centrar entre las 2 filas de tarjetas */
}
/* Posicionamiento específico para carrusel de "Vehículos favoritos" (1 fila) */
.favorites-section .carousel[data-rows="1"] .carousel-btn {
top: 50%; /* Centrado en la única fila de tarjetas */
}
.carousel-indicators {
display: flex;
justify-content: center;
gap: 6px;
list-style: none;
margin-top: 16px;
padding: 0;
}
.carousel-indicators li {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-indicators li.active {
background: #bf1823;
transform: scale(1.2);
}
/* RESPONSIVO */
@media (max-width: 900px) {
.carousel-page { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.carousel-page { grid-template-columns: repeat(1, 1fr); }
}
/* BUSCADOR GENERAL */
.search-general,
.search-patente {
position: relative;
display: flex;
align-items: center;
background: #fff;
border: 1px solid #b2b1b2;
border-radius: 16px;
height: 40px;
transition: border-color 0.2s ease;
overflow: hidden;
padding: 0 40px 0 12px;
}
.search-general:focus-within,
.search-patente:focus-within {
border-color: #575657;
}
.input-general,
.input-patente {
border: none;
outline: none;
width: 100%;
font-size: 14px;
color: #252425;
background: transparent;
height: 100%;
}
.btn-search-general,
.btn-search-patente {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 6px;
color: #575657;
height: 32px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
border-radius: 6px;
}
.btn-search-general img,
.btn-search-general svg,
.btn-search-patente img,
.btn-search-patente svg {
width: 20px;
height: 20px;
object-fit: contain;
display: block;
transition: all 0.2s ease;
}
.btn-search-general:hover,
.btn-search-patente:hover {
background: #f4f4f4;
color: #BF1823;
}
.btn-search-general:hover img,
.btn-search-general:hover svg,
.btn-search-patente:hover img,
.btn-search-patente:hover svg {
filter: brightness(0) saturate(100%) invert(17%) sepia(82%) saturate(2859%) hue-rotate(343deg) brightness(91%) contrast(96%);
transform: scale(1.1);
}
.btn-search-general:active,
.btn-search-patente:active {
background: #e0e0e0;
transform: translateY(-50%) scale(0.95);
}
.btn-search-general:active img,
.btn-search-general:active svg,
.btn-search-patente:active img,
.btn-search-patente:active svg {
transform: scale(1.05);
}
/* ===== BÚSQUEDA INTELIGENTE ===== */
.search-general {
position: relative;
}
.busqueda-sugerencias {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
max-height: 500px;
overflow-y: auto;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 0;
}
.busqueda-item {
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.15s ease;
display: flex;
align-items: center;
gap: 12px;
min-height: 60px;
}
.busqueda-item:last-child {
border-bottom: none;
}
.busqueda-item:hover,
.busqueda-item.seleccionado {
background-color: #f9f9f9;
}
.busqueda-item.seleccionado {
background-color: #f5f5f5;
border-left: 3px solid #BF1823;
padding-left: 13px;
}
.busqueda-item-producto {
align-items: flex-start;
}
.busqueda-item-content {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.busqueda-img {
width: 48px;
height: 48px;
object-fit: contain;
background: #f9f9f9;
border-radius: 6px;
flex-shrink: 0;
}
.busqueda-item-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.busqueda-item-titulo {
font-size: 13px;
font-weight: 600;
color: #252425;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.busqueda-item-meta {
display: flex;
gap: 8px;
font-size: 11px;
color: #666;
}
.busqueda-marca {
background: #f0f0f0;
padding: 2px 6px;
border-radius: 3px;
}
.busqueda-sku {
color: #999;
font-family: 'Courier New', monospace;
}
.busqueda-precio {
font-weight: 600;
color: #BF1823;
font-size: 12px;
white-space: nowrap;
margin-left: auto;
flex-shrink: 0;
}
/* Sin resultados de búsqueda */
.busqueda-sin-resultados {
padding: 30px 20px;
text-align: center;
color: #999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 120px;
}
.busqueda-sin-resultados svg {
width: 48px;
height: 48px;
color: #b2b1b2;
opacity: 0.6;
stroke-width: 1.5;
}
.busqueda-sin-resultados div {
font-size: 13px;
color: #999;
font-weight: 500;
}
/* Estados de resultado */
.busqueda-item-selected {
background-color: #f5f5f5 !important;
border-left: 3px solid #BF1823;
}
/* Responsive para mobile */
@media (max-width: 768px) {
.busqueda-sugerencias {
max-height: 60vh;
position: fixed;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.busqueda-item {
padding: 14px 16px;
min-height: 56px;
}
.busqueda-item-titulo {
font-size: 13px;
}
.busqueda-sin-resultados {
min-height: 100px;
padding: 20px 16px;
}
}
.busqueda-item-categoria {
color: #575657;
font-weight: 500;
}
.busqueda-item-categoria svg {
width: 18px;
height: 18px;
color: #BF1823;
flex-shrink: 0;
}
.busqueda-categoria-nombre {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.busqueda-sin-resultados {
padding: 24px 16px;
text-align: center;
color: #999;
font-size: 13px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.busqueda-sin-resultados svg {
width: 24px;
height: 24px;
color: #ccc;
}
/* Scroll personalizado */
.busqueda-sugerencias::-webkit-scrollbar {
width: 6px;
}
.busqueda-sugerencias::-webkit-scrollbar-track {
background: transparent;
}
.busqueda-sugerencias::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 3px;
}
.busqueda-sugerencias::-webkit-scrollbar-thumb:hover {
background: #bbb;
}
/* RESPONSIVO: MOBILE */
@media (max-width: 768px) {
.search-general {
position: relative;
height: 44px; /* Aumentar altura para mejor tapabilidad en mobile */
}
.input-general {
font-size: 16px; /* Prevenir zoom automático en iOS */
padding: 0 56px 0 12px; /* Más espacio a la derecha para el botón */
height: 44px;
}
.btn-search-general,
.btn-search-patente {
width: 40px;
height: 40px;
right: 6px; /* Separación del borde */
padding: 8px;
border-radius: 6px;
}
.btn-search-general img,
.btn-search-general svg,
.btn-search-patente img,
.btn-search-patente svg {
width: 20px;
height: 20px;
}
/* Hover state en mobile (para tablets con mouse) */
.btn-search-general:hover,
.btn-search-patente:hover {
background: #f4f4f4;
}
/* Active state más prominente en mobile */
.btn-search-general:active,
.btn-search-patente:active {
background: #e0e0e0;
transform: translateY(-50%) scale(0.92);
}
.btn-search-general:active img,
.btn-search-general:active svg,
.btn-search-patente:active img,
.btn-search-patente:active svg {
transform: scale(1.0);
}
.busqueda-sugerencias {
max-height: 60vh; /* Usar viewport height en mobile */
max-width: calc(100vw - 32px);
left: 50%;
transform: translateX(-50%);
width: 100%;
}
.busqueda-item {
min-height: 56px; /* Cumplir estándar de 48px+ para touch targets */
padding: 12px;
gap: 10px;
}
.busqueda-img {
width: 44px;
height: 44px;
}
.busqueda-item-titulo {
font-size: 13px;
}
.busqueda-item-meta {
font-size: 11px;
}
.busqueda-precio {
font-size: 12px;
}
.busqueda-sin-resultados {
padding: 40px 16px;
}
/* No mostrar marca en mobile si hay poco espacio */
.busqueda-marca {
padding: 2px 4px;
font-size: 10px;
}
}
/* TARJETAS DE VEHÍCULO */
.vehicle-card {
background: #FFFFFF;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
overflow: hidden;
aspect-ratio: 1/1;
padding: 10px;
transition: 0.3s ease;
}
.vehicle-card:hover {
transform: translateY(-8px) scale(1.03); /* levanta y hace un zoom sutil */
box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* sombra más intensa */
}
/* Sombra más fina para tarjetas del carrusel de favoritos */
.favorites-section .vehicle-card {
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.favorites-section .vehicle-card:hover {
box-shadow: 0 6px 12px rgba(0,0,0,0.09);
}
.vehicle-card .vehicle-img {
width: 100%;
height: 65%;
max-height: 180px;
object-fit: contain;
margin-bottom: 8px;
/* CENTRADO PERFECTO */
display: block;
margin: 0 auto; /* centra horizontalmente */
align-self: center; /* refuerzo de centrado dentro del flex */
}
.vehicle-card .vehicle-brand {
max-height: 40px;
object-fit: contain;
margin-bottom: 4px;
}
.vehicle-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.vehicle-model {
margin-top: 8px;
text-align: center;
font-weight: 600;
color: #252425;
}
.vehicle-card .model span {
font-weight: normal; /* Nombre del conductor normal */
}
.vehicle-card .model {
text-align: center; /* Centra el texto completo */
font-size: 14px;
margin: 10px 0 0;
line-height: 1.2;
width: 100%;
display: flex;
flex-direction: column;
align-items: center; /* Centrado extra */
}
.vehicle-card .model strong,
.vehicle-card .model b {
font-weight: 700; /* Patente en bold */
}
.vehicle-card:hover .vehicle-model,
.vehicle-card:hover .model {
color: #bf1823; /* resalta el texto */
}
.vehicle-header:has(.vehicle-brand) {
justify-content: space-between;
}
.vehicle-header:not(:has(.vehicle-brand)) {
justify-content: flex-start;
}
.vehicle-card.placeholder {
visibility: hidden; /* No se ve */
pointer-events: none; /* No se puede clickear */
box-shadow: none !important;
background: transparent !important;
}
.vehicle-year {
opacity: 0; /* invisible pero sigue ocupando espacio y accesible */
height: 0;
margin: 0;
padding: 0;
}
/* Título */
.vehicle-model {
margin-top: 8px;
text-align: center;
font-weight: 600;
}
/* === PANEL LATERAL === */
.filtros-panel {
width: 340px;
max-width: 95vw;
height: 100%;
background: #fff;
box-shadow: -6px 0 24px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.filtros-panel.panel--open {
transform: translateX(0);
}
.filtros-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
justify-content: space-between; /* Distribuye contenido */
}
.filtros-header h2 {
font-size: 16px; /* Igual al de "Mis flotas" */
font-weight: 600;
color: #252425;
margin: 0;
}
.filtros-tags {
margin-bottom: 24px; /* separación entre las pastillas y la primera categoría */
}
/* Espaciado entre cada bloque de sección */
.filtros-section {
margin-bottom: 16px; /* espacio uniforme entre secciones */
}
/* Removido - conflictúa con el layout flex del footer */
/* .aplicar-filtros {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
margin-top: auto;
} */
/* === BOTÓN CERRAR === */
.close-filtros {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
color: #252425;
transition: color 0.2s ease;
}
.close-filtros:hover {
color: #BF1823;
}
/* === ACORDEÓN === */
.section-toggle {
background: none;
border: none;
font-size: 15px;
font-weight: 600;
color: #252425;
cursor: pointer;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
transition: color 0.2s ease;
}
.campana-banner-preview {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px;
border: 1px solid #e5e5e5;
border-radius: 8px;
background: #fff;
min-height: auto;
}
/* Acciones de campañas: espaciar botones */
.campana-card-actions {
display: flex;
gap: 16px;
}
/* Estilos para tarjetas de campañas */
.campana-card-compact {
background: white;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 20px;
transition: box-shadow 0.2s;
}
.campana-card-compact:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.campana-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #e0e0e0;
}
.campana-card-title {
display: flex;
align-items: center;
gap: 12px;
}
.campana-nombre {
font-size: 16px;
font-weight: 600;
color: #333;
}
.badge-activa {
background: #d4edda;
color: #155724;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
.badge-inactiva {
background: #f8d7da;
color: #721c24;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
.campana-card-stats {
display: flex;
flex-direction: column;
gap: 8px;
}
.campana-card-stats .stat-item {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 0;
}
.campana-card-stats .stat-label {
font-size: 13px;
color: #666;
font-weight: 500;
}
.campana-card-stats .stat-value {
font-size: 14px;
color: #333;
font-weight: 600;
}
.campana-banner-preview img {
width: 120px;
height: 80px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #ddd;
}
.campana-banner-preview.mobile img {
width: 80px;
height: 80px;
}
/* Lista de SKUs en tarjetas de campañas */
.campana-sku-items {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.campana-sku-tag {
background: #f1f1f1;
border: 1px solid #e5e5e5;
border-radius: 10px;
padding: 2px 6px;
}
.section-toggle:hover {
color: #BF1823;
}
.section-content {
max-height: 300px;
overflow: hidden;
transition: max-height 0.3s ease;
display: flex;
flex-direction: column;
gap: 8px;
padding-left: 4px;
}
.section-content.collapsed {
max-height: 0;
}
/* Scroll interno para marcas */
.filtros-scroll {
max-height: 140px;
overflow-y: auto;
padding-right: 6px;
}
.filtros-scroll::-webkit-scrollbar {
width: 6px;
}
.filtros-scroll::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
/* === TAGS DE FILTROS SELECCIONADOS === */
.filtros-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tag {
background: #BF1823;
color: #fff;
font-size: 13px;
padding: 4px 8px;
border-radius: 16px;
display: flex;
align-items: center;
gap: 4px;
}
.tag button {
background: none;
border: none;
color: #fff;
font-size: 13px;
cursor: pointer;
padding: 0;
margin-left: 2px;
line-height: 1;
}
.tag button:hover {
color: #ddd;
}
/* ===== RESPONSIVIDAD ===== */
@media (max-width: 1024px) {
.sidebar .sku-input-row { align-items: center; }
.sidebar .logo img { width: 48px; }
.menu a span,
.user-info,
.search-container input { display: none; }
.search-container .search-icon { display: inline-flex; }
}
/* === SKU Dropdown (select-like) === */
.sku-input-row { display: flex; align-items: center; gap: 8px; max-width: 540px; width: 100%; }
.sku-select { position: relative; flex: 0 1 auto; }
.sku-select-trigger {
width: 100%;
min-width: 280px;
max-width: 540px;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 13px;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
cursor: pointer;
}
.sku-select-arrow { margin-left: 8px; color: #555; }
.sku-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0; /* se alinea al ancho del row (máx 540px) */
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 10px;
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
max-height: 320px;
overflow: hidden;
z-index: 1002;
display: none;
}
.sku-dropdown.visible { display: block; }
.sku-dropdown-search { padding: 6px; border-bottom: 1px solid #eee; }
.sku-dropdown-search input {
width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px;
}
.sku-suggestions { max-height: 260px; overflow: auto; }
.sku-suggestions .item {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 8px 10px; cursor: pointer; font-size: 12px;
}
.sku-suggestions .item:hover,
.sku-suggestions .item.active { background: #f7f7f7; }
.sku-suggestions .item .sku { font-weight: 700; color: #333; }
.sku-suggestions .item .desc { color: #777; }
/* Botón eliminar SKU estilo plataforma */
.sku-remove {
width: 28px;
height: 28px;
border-radius: 50%;
background: #BF1823;
color: #ffffff;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
}
.sku-remove:hover { background: #D4646C; }
.sku-remove:active { background: #881119; }
/* Carrusel principal: contenedor y viewport */
.banner-carousel-single {
position: relative;
overflow: visible;
width: calc(100% - 48px);
margin: 0 auto;
}
.banner-viewport-single {
overflow: hidden;
border-radius: 16px;
width: 100%;
/* Desktop ratio por defecto; en móvil se sobreescribe a 1/1 desde la vista */
aspect-ratio: var(--banner-principal-ratio, 3 / 1);
}
.banner-track-single {
display: flex;
height: 100%;
transition: transform 0.45s ease;
will-change: transform;
}
/* Imagen del banner */
.banner-slide-single {
flex: 0 0 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.banner-item-single {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
/* Flechas del banner */
.banner-btn-single {
position: absolute;
top: 45%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #BF1823;
color: #fff;
font-size: 20px;
cursor: pointer;
z-index: 10;
transition: background 0.3s ease;
pointer-events: auto;
touch-action: manipulation;
}
.banner-btn-single.prev {
left: -10px;
}
.banner-btn-single.next {
right: -10px;
}
.banner-btn-single:disabled {
opacity: 0.3;
cursor: default;
}
/* Indicadores */
.banner-indicators-single {
display: flex;
justify-content: center;
gap: 6px;
list-style: none;
margin: 16px 0 0;
padding: 0;
}
.banner-indicators-single li {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: all 0.3s ease;
}
.banner-indicators-single li.active {
background: #BF1823;
transform: scale(1.2);
}
/* 🔹 Responsive */
@media (max-width: 768px) {
.banner-carousel-single {
width: 100%;
padding: 0;
}
.banner-viewport-single {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
.banner-track-single {
transform: none !important;
transition: none !important;
}
.banner-slide-single {
scroll-snap-align: start;
}
.banner-btn-single {
display: none !important;
}
}
/* Estructura general */
.fleet-section {
width: 100%;
box-sizing: border-box;
padding: 0;
}
/* Título */
.fleet-title {
font-size: 18px;
font-weight: 600;
margin: 32px 0 16px 60px; /* Alineado con el inicio del carrusel */
color: #1E1E1E;
}
/* Contenedor del carrusel: usa todo el ancho disponible */
.fleet-carousel {
position: relative;
overflow: visible;
width: 100%;
margin: 0;
box-sizing: border-box;
padding: 0 60px; /* Espacio solo para las flechas */
}
/* Viewport: área visible que sí oculta el track */
.fleet-viewport {
overflow: hidden;
border-radius: 16px;
width: 100%;
box-sizing: border-box;
}
/* Desktop: sin limitación de ancho máximo para usar todo el espacio */
@media (min-width: 769px) {
.fleet-viewport { width: 100%; margin: 0; }
}
/* Track: fila de slides que se moverá con transform */
.fleet-track {
display: flex;
gap: 24px; /* Separación de 24px entre slides */
transition: transform 0.45s ease;
will-change: transform;
}
/* Cada slide */
.fleet-slide {
flex: 0 0 calc(50% - 12px); /* 2 por vista con espacio para gap */
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 4 / 3; /* Ligeramente rectangular */
}
/* Imagen dentro del slide - 4:3 */
.fleet-slide img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3; /* Ligeramente rectangular */
object-fit: cover;
display: block;
border-radius: 16px;
background-color: #f5f5f5;
pointer-events: none;
}
/* Flechas: mantenemos estilo similar al tuyo (ajusta si ya tienes .carousel-btn) */
.fleet-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #BF1823;
color: #fff;
font-size: 20px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
touch-action: manipulation;
}
/* Colocación dentro del padding del contenedor */
.fleet-btn.prev { left: 10px; }
.fleet-btn.next { right: 10px; }
.fleet-btn:disabled { opacity: 0.3; cursor: default; }
/* Indicadores */
.fleet-indicators {
display: flex;
justify-content: center;
gap: 6px;
list-style: none;
margin: 12px 0 0;
padding: 0;
}
.fleet-indicators li {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: all 0.25s ease;
}
.fleet-indicators li.active {
background: #BF1823;
transform: scale(1.2);
}
/* Responsive: 1 imagen cuadrada por vista en pantallas pequeñas */
@media (max-width: 768px) {
.fleet-carousel {
width: 100%;
padding: 0;
}
.fleet-title {
margin-left: 20px; /* Ajuste para móvil */
}
.fleet-viewport {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
.fleet-track {
transform: none !important;
transition: none !important;
}
.fleet-slide {
flex: 0 0 100%; /* 1 por vista */
aspect-ratio: 4 / 3; /* Ligeramente rectangular */
scroll-snap-align: start;
}
.fleet-slide img {
aspect-ratio: 4 / 3; /* 4:3 en móvil también */
}
.fleet-btn {
display: none !important;
}
.fleet-btn.prev { left: 8px; }
.fleet-btn.next { right: 8px; }
}
/* Estructura general */
main {
padding: 24px;
overflow-x: hidden;
}
/* Contenedor principal */
.listado-section {
background: #fff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.listado-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0.8rem 1rem;
background-color: #f5f6fa;
border-radius: 8px;
font-family: "Poppins", sans-serif;
}
.listado-acciones {
flex: 1;
}
.listado-info {
flex: 2;
text-align: center;
}
.listado-controles {
flex: 1;
text-align: right;
}
.listado-filtrar:hover {
text-decoration: underline;
}
/* contenedor general */
.pendientes-scroll {
width: 100%;
max-height: 300px; /* AJUSTA EL ALTO A TU GUSTO */
overflow: hidden;
position: relative;
}
/* que el THEAD quede arriba y no se mueva */
.pendientes-scroll thead {
position: sticky;
top: 0;
background: white;
z-index: 2;
}
/* scroll SOLO en el cuerpo de la tabla */
.pendientes-scroll tbody {
display: block;
max-height: 260px; /* un poco menos que el contenedor */
overflow-y: auto;
overflow-x: hidden;
}
/* que el thead mantenga ancho */
.pendientes-scroll thead tr {
display: table;
width: 100%;
table-layout: fixed;
}
/* que el tbody mantenga ancho */
.pendientes-scroll tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
/* Tabla / Lista */
.listado-tabla {
display: flex;
flex-direction: column;
width: 100%;
border-top: 2px solid #BF1823;
border-radius: 8px;
overflow: hidden;
}
/* Encabezado */
.listado-encabezado,
.listado-fila {
display: grid;
grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
padding: 12px 16px;
align-items: center;
}
.listado-encabezado {
background: #f4f4f4;
font-weight: bold;
}
/* Filas */
.listado-fila:nth-child(even) {
background: #fafafa;
}
.listado-fila:hover {
background: #f0f0f0;
}
/* Enlaces de repuestos */
.repuesto-link {
color: #BF1823;
font-weight: 600;
text-decoration: none;
}
.repuesto-link:hover {
text-decoration: underline;
}
/* Paginación inferior */
.listado-paginacion-controles {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 20px;
flex-wrap: nowrap;
padding: 0 16px;
}
.page-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #BF1823;
color: #fff;
font-size: 14px;
cursor: pointer;
flex-shrink: 0;
font-weight: 600;
transition: all 0.2s ease;
}
.page-btn:hover {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(191, 24, 35, 0.3);
}
.page-btn:disabled {
opacity: 0.4;
cursor: default;
}
/* Estilo para puntos suspensivos en paginación */
.page-btn.ellipsis {
background: transparent;
color: #666;
cursor: default;
pointer-events: none;
font-size: 12px;
}
/* Responsive */
@media (max-width: 700px) {
.listado-encabezado,
.listado-fila {
grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr;
font-size: 13px;
}
.listado-filtrar {
padding: 6px 10px;
}
}
/* Contenedor principal flex */
.filtros-main {
display:flex;
flex-direction:column;
flex:1;
overflow:hidden;
}
.filtros-tags { margin-bottom:8px; display:flex; flex-wrap:wrap; gap:6px; }
.filtros-content {
flex:1;
overflow-y:auto;
padding:0 16px;
}
.filtros-section { margin-bottom:16px; }
.section-toggle {
background:none;
border:none;
font-size:15px;
font-weight:600;
color:#252425;
cursor:pointer;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:4px 0;
}
.section-toggle:hover { color:#BF1823; }
.section-content { display:flex; flex-direction:column; gap:4px; padding-left:4px; }
.section-content.collapsed { max-height:0; }
.filtros-scroll { max-height:140px; overflow-y:auto; padding-right:6px; }
.filtros-scroll::-webkit-scrollbar { width:6px; }
.filtros-scroll::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }
/* Footer fijo abajo, fuera del scroll */
.filtros-footer-container {
flex-shrink:0;
padding:8px 12px;
background:#fff;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}
.aplicar-filtros {
width: 90%; /* un poco más chico que el contenedor */
max-width: 300px; /* opcional, para no exceder un tamaño */
margin: 0 auto; /* centrado horizontal */
padding: 10px;
font-size: 14px;
border-radius: 16px;
border: none;
background: #BF1823;
color: #fff;
cursor: pointer;
display: block;
}
.aplicar-filtros:hover { background: #a3131e; }
/* ESTADO DE LA CUENTA */
/* GRID PRINCIPAL */
main.dashboard{
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-rows:min-content;
gap:32px;
}
.section-header h2{
font-size:18px;
font-weight:600;
}
/* CALENDARIOS */
input[type=date]{
border:1px solid #B2B1B2;
border-radius:16px;
padding:6px 10px;
font-size:14px;
margin-right:8px;
}
.calendar-container{margin-bottom:16px;}
.estado-box .calendar-container {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.estado-box .calendar-container label {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #555;
font-weight: 600;
margin: 0;
}
.estado-box .calendar-container input[type="date"] {
border: 1px solid #ccc;
border-radius: 16px;
padding: 8px 12px;
height: 40px;
font-family: "Poppins";
font-size: 12px;
color: #555;
outline: none;
background: #fff;
min-width: 150px;
}
/* TABLAS */
.listado-tabla{overflow-x:auto;}
.mis-facturas .listado-tabla{
max-height:520px;
overflow-y:auto;
margin-top:12px;
border-radius: 8px;
background: transparent;
}
/* Tabla de facturas del cliente - usar mismo estilo que sc-table */
.mis-facturas #tabla-facturas {
width: 100%;
border-collapse: collapse;
min-width: 700px;
background: white;
}
.mis-facturas #tabla-facturas th {
text-align: left;
padding: 12px 15px;
border-bottom: 2px solid #eee;
color: #555;
font-weight: 600;
font-size: 13px;
white-space: nowrap;
background: white;
position: sticky;
top: 0;
z-index: 10;
}
.mis-facturas #tabla-facturas td {
padding: 12px 15px;
border-bottom: 1px solid #f9f9f9;
color: #333;
font-size: 13px;
vertical-align: middle;
}
.mis-facturas #tabla-facturas tr:hover {
background-color: #fafafa;
}
.mis-facturas #tabla-facturas tr {
height: auto;
min-height: 50px;
}
.facturas-pendientes .listado-tabla{
max-height:250px;
overflow-y:auto;
margin-top:32px;
}
/* Estilos solo para tabla de estado de cuenta */
.facturas-pendientes table{
width:100%;
border-collapse:collapse;
}
.facturas-pendientes th,
.facturas-pendientes td{
padding:8px;
text-align:left;
border-bottom:1px solid #ddd;
font-size:14px;
}
.facturas-pendientes th{
background:#f9f9f9;
font-weight:600;
position:sticky;
top:0;
}
/* Botones sin fondo */
.action-btn{
background:none;
border:none;
cursor:pointer;
padding:0;
display:flex;
align-items:center;
justify-content:center;
}
.action-btn img{
width:16px;
height:16px;
}
/* GRÁFICO */
.chart-container{margin-top:12px;}
.total-container{margin-top:12px;font-weight:600;font-size:16px;}
/* SELECTOR DE TABS */
.selector-tabs{
display:flex;
gap:12px;
margin-top:12px;
flex-wrap:wrap;
}
.selector-tab{
padding:10px 18px;
background:#eee;
border-radius:16px;
cursor:pointer;
font-size:14px;
font-weight:600;
transition:0.2s;
}
.selector-tab.active{
background:#BF1823;
color:#fff;
}
/* TARJETAS */
.cards-container{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:16px;
}
.product-card{
width:calc(33% - 12px);
min-width:120px;
aspect-ratio:1 / 1; /* ← NUEVO: mantiene proporción perfecta */
position:relative;
border-radius:16px;
overflow:hidden;
}
.product-card img.main{
width:100%;
height:100%;
object-fit:cover;
}
.product-card img.logo{
position:absolute;
bottom:4px;
left:4px;
width:24px;
height:24px;
border-radius:8px;
background:#fff;
padding:2px;
object-fit:contain;
}
.product-card .patente{
position:absolute;
bottom:4px;
right:4px;
background:rgba(0,0,0,0.6);
padding:2px 4px;
font-size:11px;
border-radius:8px;
color:#fff;
}
/* ================
RESPONSIVE FIX
===================*/
/* 1) Tablet → 1100px */
@media(max-width:1100px){
main.dashboard{
grid-template-columns:1fr;
}
}
/* 2) Medium → 900px */
@media(max-width:900px){
.product-card{
width:calc(50% - 12px); /* 2 por fila */
}
/* Estado de la Cuenta: mantener filtros de fecha lado a lado */
.section-header-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.section-header-row .section-title {
flex: 1;
min-width: 200px;
}
.section-header-row .admin-actions {
display: flex;
justify-content: flex-end;
}
/* Filtros de fecha: mantener horizontal */
.dashboard-box-header {
display: flex !important;
flex-direction: column !important;
gap: 24px;
position: relative;
padding-bottom: 0;
align-items: flex-start;
}
.dashboard-box-header .header-row-1 {
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: 16px;
width: 100%;
}
.dashboard-box-header h3 {
margin: 0;
width: 100% !important;
text-align: left !important;
display: block;
}
#btn-subir-factura-top {
white-space: normal;
flex-shrink: 1;
min-width: 0;
font-size: 13px;
padding: 8px 12px;
line-height: 1.3;
text-align: center;
}
.date-filters {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
width: 100%;
flex-wrap: nowrap;
}
.date-group {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex: 1;
}
.date-group label {
white-space: nowrap !important;
font-size: 12px;
}
.date-group .sc-input-date,
.estado-box .calendar-container input[type="date"] {
max-width: 130px !important;
min-width: 100px !important;
width: 100%;
}
/* Total Invertido: asegurar que desde/hasta estén en fila con margen */
.chart-container .dashboard-box-header .date-filters {
display: flex !important;
flex-direction: row !important;
gap: 10px !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
.chart-container .date-group {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
flex: 1 !important;
min-width: 0 !important;
}
.chart-container .date-group label {
white-space: nowrap !important;
font-size: 11px !important;
}
.chart-container .date-group .sc-input-date {
max-width: none !important;
min-width: 0 !important;
width: 100% !important;
font-size: 11px !important;
}
}
/* 3) Mobile → 600px */
@media(max-width:600px){
section{padding:14px;}
.product-card{
width:100%; /* 1 por fila */
}
table th,table td{
font-size:12px;
padding:6px;
}
.selector-tabs{
gap:8px;
}
.selector-tab{
padding:8px 14px;
font-size:13px;
}
}
/* 4) FIX: al volver al 100% que NO quede pegado */
@media(min-width:901px){
.product-card{
width:calc(33% - 12px);
}
}
/* MAIN CONTENT */
.page-container{
background:var(--color-white);
border-radius:16px;
padding:24px;
box-shadow: var(--shadow);
}
/* =========================== ESTILOS DE "MIS COMPRAS" =========================== */
.purchases-section { margin-top: 10px; }
.purchase-date {
font-size: 18px;
font-weight: 600;
color: #252425;
margin-bottom: 12px;
margin-top: 28px;
border-top: 1px solid rgba(0,0,0,0.05);
padding-top: 12px;
}
.purchase-card {
background: #F5F5F5;
border-radius: 16px;
padding: 18px;
margin-bottom: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.purchase-info { display: flex; align-items: center; gap: 14px; }
.purchase-img { width: 84px; height: 84px; border-radius: 8px; object-fit: contain; background: var(--color-white); padding: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.purchase-text { display: flex; flex-direction: column; gap: 6px; }
.purchase-text h4 { margin: 0; font-size: 14px; font-weight: 600; color: #252425; }
.purchase-status {
font-size: 13px;
color: var(--text-muted);
display: inline-flex; /* evita que se corte */
gap: 8px;
align-items: center;
flex-wrap: nowrap; /* mantiene todo en una sola línea */
white-space: nowrap; /* evita saltos raros */
}
.purchase-status .status-badge {
font-weight: 700;
color: var(--color-red);
text-transform: none;
white-space: nowrap; /* evita cortes dentro del badge */
}
.purchase-actions { display: flex; flex-direction: column; gap: 10px; min-width: 190px; align-items: flex-end; width: 100%;align-items: flex-end;}
@media (max-width: 800px){
.purchase-actions { min-width: 140px; align-items: flex-end; }
.purchase-img { width:72px; height:72px; }
}
.ver-mas-container { display:flex; justify-content:center; margin-top:18px; }
.no-more-msg { text-align:center; margin-top:12px; font-size:14px; color:var(--text-muted); font-style:italic; }
/* CONTENEDOR ESPECIAL PARA LAS 4 SECCIONES */
.dashboard section.estado-box {
background: #fff !important;
border-radius: 16px !important;
padding: 25px !important;
margin-bottom: 32px !important;
/* Asegura que sea una caja real */
display: block !important;
position: relative !important;
overflow: visible !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.10);
}
/* ======================================
OVERLAY NUEVA FLOTA
====================================== */
.overlay-flota {
display: none; /* inicia oculto */
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.25);
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
justify-content: center;
align-items: center;
z-index: 120000; /* Above sticky admin navbar */
}
/* ======================================
TARJETA MODAL
====================================== */
.modal-flota {
background: #fff;
width: 480px;
max-width: 90%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.25);
animation: fadeIn 0.25s ease;
}
/* ======================================
HEADER
====================================== */
.modal-flota-header {
background: #575657;
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
}
.modal-flota-title {
font-size: 18px;
font-weight: 600;
}
.close-flota-btn {
background: none;
border: none;
color: white;
font-size: 22px;
cursor: pointer;
padding: 0;
}
/* ======================================
BODY
====================================== */
.modal-flota-body {
padding: 22px 20px;
display: flex;
flex-direction: column;
gap: 24px;
}
/* ======================================
DROPZONE
====================================== */
.dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 140px;
border: 2px dashed #ccc;
border-radius: 16px;
padding: 30px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: #fafafa;
}
.dropzone:hover {
border-color: #BF1823;
background: #fff5f5;
}
.dropzone.active {
border-color: #4caf50;
background: #f1f8f4;
border-width: 2px;
}
.dropzone p {
margin: 0;
font-size: 14px;
color: #575657;
}
.drop-zone-campana {
border: 2px dashed #ccc;
border-radius: 10px;
padding: 30px 20px;
text-align: center;
background: #fafafa;
cursor: pointer;
transition: all 0.3s ease;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.drop-zone-campana:hover {
border-color: #BF1823;
background: #fff5f5;
}
.drop-zone-campana.drag-over {
border-color: #BF1823;
background: #ffe8ea;
transform: scale(1.02);
}
.drop-zone-campana.has-image {
padding: 0;
border: 2px solid #4CAF50;
background: white;
}
.dropzone img {
width: 40px;
margin-bottom: 10px;
pointer-events: none;
user-select: none;
}
/* Nombre del archivo subido en dropzone */
.nf-file-name {
font-size: 13px;
color: #575657;
min-height: 18px;
margin-top: 16px; /* Espacio de 16px desde el dropzone */
}
/* Botones dentro del modal-flota */
.modal-flota-body .btn-primary,
.modal-flota-body .btn-secondary {
width: 100%; /* Ocupa todo el ancho del contenedor padre */
max-width: 100%; /* No excede el ancho del contenedor */
padding: 12px 20px; /* Espacio interno */
box-sizing: border-box; /* Incluye padding dentro del ancho */
display: block; /* Cada botón en su línea */
text-align: center; /* Centra el texto */
border-radius: 16px; /* Bordes redondeados */
font-size: 14px; /* Tamaño de fuente 14px */
font-weight: 500; /* Opcional, para que se vea consistente */
}
/* ======================================
ANIMACIÓN
====================================== */
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
/* Contenedor principal */ .main-content { margin-left: 260px; /* ancho sidebar */ padding: 16px; font-family: 'Poppins', sans-serif; } /* Flotas Container */ .flotas-container { max-width: 1200px; margin: 0 auto; padding: 16px 0; } /* Tarjeta de página */ .pagina-container { border: none; /* quita el outline/borde */ border-radius: 8px; padding: 16px; background-color: #fff; } /* Contenedor superior oscuro */ .top-bar { background-color: #575657; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: 8px 8px 0 0; } /* Página header */ .pagina-header { display: flex; justify-content: space-between; align-items: center; color: #FFFFFF; } /* Listados */ .listados-row { display: flex; gap: 16px; flex-wrap: wrap; border-top: 1px solid #ccc; padding-top: 16px; } .listado { flex: 1; min-width: 280px; border-right: 1px solid #eee; padding-right: 16px; } .listado:last-child { border-right: none; } .listado label { display: block; font-weight: bold; margin-top: 12px; color: #575657; } .listado select, .listado input { width: 100%; padding: 6px 8px; margin-top: 4px; border-radius: 4px; border: 1px solid #ccc; } /* Botón "Agregar nueva página" */
.btn-text-page { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; color: #FFFFFF; display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 6px 8px; } .btn-text-page img { width: 20px; height: 20px; object-fit: contain; } .btn-text-page:hover { color: #FFFFFF; font-weight: 600; } /* Paginación */ .pagina-indicator button { background: none; border: none; cursor: pointer; margin: 0 4px; color: #FFFFFF; } .page-info { color: #FFFFFF; font-family: 'Poppins', sans-serif; font-size: 14px; }
/* Contenedor de totales + acción */
.flotas-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 210px; /* padding izquierdo y derecho */
margin-top: 16px;
}
/* Totales estilo simple */
.flotas-footer .totales {
font-weight: 600;
color: #333;
}
/* Botón Crear Flota con signo + */
#crear-flota {
display: flex;
align-items: center;
gap: 8px;
}
#crear-flota img {
width: 20px;
height: 20px;
}
/* Modal general */
.flota-modal {
display: none; /* oculto por defecto */
position: fixed;
z-index: 140000; /* encima de overlays de carga/excel */
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
font-family: inherit;
}
/* Contenido del modal */
.flota-modal-content {
background-color: #fff;
border-radius: 16px;
width: 400px;
max-width: 90%;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
overflow: hidden;
position: relative;
z-index: 140001;
}
/* Header */
.flota-modal-header {
background: #575657;
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
}
.flota-modal-header h2 {
margin: 0;
font-size: 1.25rem;
}
.flota-close-btn {
background: none;
border: none;
color: white;
font-size: 22px;
cursor: pointer;
padding: 0;
}
/* Body */
.flota-modal-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.flota-input-text {
padding: 8px;
font-size: 14px;
border-radius: 16px;
border: 1px solid #ccc;
font-family: inherit;
margin-bottom: 8px;
}
.flota-btn-submit {
background-color: #575657;
color: #fff;
padding: 8px;
border-radius: 14px;
cursor: pointer;
font-family: inherit;
}
.flota-btn-submit:hover {
background-color: #444;
}
/* =========================================================
LISTADO DE VEHÍCULOS (GRID 4-3-2 COLUMNAS)
========================================================= */
/* 1. CONTENEDOR GRID (La Rejilla) */
/* Unificamos tu clase .vehiculos-grid con la real .listado-flota */
.vehiculos-grid,
.listado-flota {
display: grid;
/* PANTALLA PC (Grande): 4 columnas por defecto */
grid-template-columns: repeat(4, 1fr);
gap: 16px; /* Gap un poco menor para que entren bien 2 en móvil */
padding: 10px;
/* 🔥 Tu limitador de ancho y centrado */
max-width: 1400px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* 2. TARJETA INDIVIDUAL */
.vehiculo-card,
.tarjeta-vehiculo-editar {
background: #FFFFFF;
border-radius: var(--card-radius, 16px);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
border: 1px solid #E0E0E0;
padding: 12px; /* Padding ajustado para ganar espacio */
display: flex;
align-items: center; /* Alineación vertical */
position: relative;
gap: 10px;
/* 🔥 NUEVO: Ocupa el 100% de la celda */
width: 100%;
min-width: 0; /* CRUCIAL: Evita que el texto empuje y deforme la tarjeta */
transition: transform 0.2s ease;
}
.vehiculo-card:hover,
.tarjeta-vehiculo-editar:hover {
transform: translateY(-3px);
}
/* 3. IMAGEN (Contenedor y Foto) */
.vehiculo-img,
.tarjeta-vehiculo-editar img {
position: relative;
width: 100px; /* 🔥 Ajuste a 100px para que entren mejor en 2 columnas */
height: 100px;
border-radius: 8px;
overflow: hidden;
background: transparent;
flex-shrink: 0; /* IMPORTANTE: Impide que la imagen se aplaste */
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.10);
object-fit: contain;
}
/* Si hay una imagen dentro del contenedor */
.vehiculo-img img,
.vehiculo-foto {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.vehiculo-fav {
width: 24px;
height: 24px;
position: absolute;
top: 6px;
right: 6px;
cursor: pointer;
z-index: 30;
}
/* 4. INFORMACIÓN (Textos) */
.vehiculo-info,
.tarjeta-vehiculo-editar div {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
text-align: left;
/* 🔥 SOLUCIÓN MAGICA: Esto arregla el corte de texto */
flex: 1; /* Ocupa el espacio restante */
min-width: 0; /* Permite que el texto use '...' si no cabe */
}
/* === NOMBRE VEHÍCULO (2 líneas + ...) === */
.vehiculo-nombre,
.tarjeta-vehiculo-editar h3 {
font-weight: 600;
font-size: 13px; /* Un poco más pequeño para que quepa bien */
color: #252425;
margin: 0 0 4px 0;
/* Clamp para cortar en 2 líneas */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
max-height: 2.4em;
position: relative;
cursor: default;
}
/* Tooltip (Tu estilo intacto) */
.vehiculo-nombre:hover::after {
content: attr(data-fulltext);
position: absolute;
left: 0px;
bottom: 100%;
transform: translateY(-8px);
background: #252425;
color: #ffffff;
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
font-size: 12px;
z-index: 9999;
box-shadow: 0px 6px 12px rgba(0,0,0,0.22);
pointer-events: none;
}
.vehiculo-ano, .vehiculo-patente,
.tarjeta-vehiculo-editar p {
display: block;
font-size: 11px;
color: #666;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =========================================================
MEDIA QUERIES (RESPONSIVIDAD CONTROLADA)
========================================================= */
/* 1. Laptops y Tablets (menos de 1200px) -> 3 COLUMNAS */
@media screen and (max-width: 1200px) {
.vehiculos-grid, .listado-flota {
grid-template-columns: repeat(3, 1fr);
}
}
/* 2. MÓVILES (menos de 768px) -> 2 COLUMNAS (Lo que pediste) */
@media screen and (max-width: 768px) {
.vehiculos-grid, .listado-flota {
grid-template-columns: repeat(2, 1fr); /* 2 columnas forzadas */
gap: 10px; /* Menos espacio entre tarjetas para que quepan */
}
/* Ajuste interno para que entre en 2 columnas en movil */
.vehiculo-card,
.tarjeta-vehiculo-editar {
flex-direction: column; /* Foto arriba, texto abajo */
text-align: center; /* Texto centrado */
padding: 10px;
height: 100%; /* Altura uniforme */
}
.vehiculo-img,
.tarjeta-vehiculo-editar img {
width: 100%; /* Foto aprovecha el ancho */
height: 90px; /* Altura controlada */
margin-bottom: 8px;
}
.vehiculo-info,
.tarjeta-vehiculo-editar div {
align-items: center; /* Centrar textos */
width: 100%;
}
/* El botón editar o estrella se ajusta */
.vehiculo-fav {
top: 8px;
right: 8px;
}
}
/* =========================================
ESTILOS DE BOTÓN (ALINEADO A LA IZQUIERDA + RESPONSIVO)
========================================= */
/* 1. TU ESTILO BASE (PC Gigante - 150px) */
.btn-secondary-fixed {
min-width: 150px; /* Ancho original */
white-space: nowrap;
justify-content: center;
flex-shrink: 0;
display: inline-flex;
align-items: center;
/* 🔥 CAMBIO: Quitamos margin-left: auto para que no se vaya a la derecha */
margin-left: 0;
margin-right: auto; /* (Opcional) Esto asegura que si sobra espacio, quede a la izquierda */
}
.btn-text-white {
background: none;
border: none;
color: #FFFFFF; /* TEXTO BLANCO */
padding: 6px 8px;
font-weight: 500;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
font-family: "Poppins", sans-serif;
}
.btn-text-white img {
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
width: 16px;
height: 16px;
transition: all 0.2s ease;
}
/* =========================================
MEDIA QUERIES (RESPONSIVIDAD)
========================================= */
/* 2. SOLUCIÓN NOTEBOOK (1000px - 1450px)
Achicamos el botón para que entre en la tarjeta */
@media screen and (max-width: 1450px) {
.btn-secondary-fixed {
min-width: auto !important; /* Flexible */
width: auto !important;
padding: 0 8px;
height: 32px;
}
.btn-text-white {
font-size: 11px !important; /* Texto pequeño */
gap: 4px;
padding: 0;
}
.btn-text-white img {
width: 12px !important; /* Ícono pequeño */
height: 12px !important;
}
}
/* 3. SOLUCIÓN MÓVIL (Menos de 768px)
Botón ancho completo */
@media screen and (max-width: 768px) {
.btn-secondary-fixed {
width: 100% !important;
min-width: 0 !important;
margin-top: auto;
margin-left: 0;
height: 36px;
padding: 0;
}
.btn-text-white {
font-size: 13px !important;
width: 100%;
gap: 6px;
}
.btn-text-white img {
width: 14px !important;
height: 14px !important;
}
}
/* =========================================
TOOLTIP DEFINITIVO (SOLUCIÓN CORTE DE TEXTO)
========================================= */
/* 1. El contenedor NUEVO (No corta el contenido) */
.nombre-tooltip-wrapper {
position: relative; /* Referencia para el tooltip */
cursor: help;
width: 100%;
/* No ponemos overflow: hidden aquí para que el tooltip salga */
}
/* 2. El Tooltip (La etiqueta negra) se aplica al WRAPPER */
.nombre-tooltip-wrapper:hover::after {
content: attr(data-fulltext); /* Lee el texto del div padre */
position: absolute;
bottom: 100%;
left: 0;
background-color: #252425;
color: #ffffff;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
line-height: 1.2;
z-index: 9999;
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
pointer-events: none;
transform: translateY(-5px);
}
/* 3. El Texto Interior (Mantiene los 3 puntitos) */
.vehiculo-nombre {
display: block; /* Importante para que tome el ancho */
font-weight: 600;
font-size: 14px;
color: #252425;
margin: 0;
/* Lógica de los 3 puntitos (...) */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden; /* Esto corta el texto, pero YA NO CORTA EL TOOLTIP */
text-overflow: ellipsis;
line-height: 1.2;
max-height: 2.4em;
}
/* === BUSCADOR HEADER === */
.search-header {
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid #b2b1b2;
border-radius: 16px;
padding: 0 40px 0 12px;
height: 40px;
position: relative;
width: 260px; /* Ajusta a tu gusto */
flex-shrink: 0; /* No permite que el buscador aplaste otros elementos */
}
.search-header-input {
border: none;
outline: none;
width: 100%;
font-size: 14px;
color: #252425;
background: transparent;
font-family: "Poppins", sans-serif;
}
.search-header-icon {
position: absolute;
right: 12px;
width: 18px;
height: 18px;
pointer-events: none;
}
.search-header:focus-within {
border-color: #575657;
}
/* ===== ESTILOS DEL MODAL EDICIÓN (UNIQUE) ===== */
.overlay-editar-unique {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
justify-content: center;
align-items: center;
z-index: 110000;
padding: 16px;
}
.overlay-editar-unique.is-visible { display:flex; }
.overlay-editar-unique[aria-hidden="false"] {
display: flex !important;
}
.modal-editar-unique {
width: 700px; /* reducido para no quedar tan grande */
max-width: 100%;
border-radius: 16px;
background: #fff;
box-shadow: 0 18px 40px rgba(0,0,0,0.28);
overflow: hidden;
font-family: "Poppins", sans-serif;
}
.modal-editar-header-unique {
display:flex;
align-items:center;
justify-content:space-between;
padding: 14px 18px;
background: #575657;
color: #fff;
}
.modal-editar-title-unique { font-size: 18px; font-weight: 600; }
.modal-editar-close-unique { background:none; border:none; color:#fff; font-size:20px; cursor:pointer; padding:6px; }
/* BODY layout */
.modal-editar-body-unique {
display:flex;
gap: 20px;
padding: 18px;
align-items: flex-start;
box-sizing: border-box;
}
/* LEFT column */
.modal-left-col-unique {
width: 340px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
position: relative; /* necesario para ubicar favoritos */
}
/* eliminar button */
.btn-delete-vehiculo-unique {
display:inline-flex;
gap:8px;
align-items:center;
justify-content:center;
background: var(--color-white);
color: var(--color-red);
border:1.5px solid var(--color-red);
padding:8px 16px;
border-radius:16px;
font-weight:600;
font-size:14px;
font-family: "Poppins", sans-serif;
cursor:pointer;
}
.btn-delete-vehiculo-unique img { width:18px; height:18px; object-fit:contain; }
/* imagen cuadrada usando padding trick para mantener proporción */
.modal-vehiculo-img-unique {
position: relative;
width: 100%;
padding-top: 100%; /* cuadrado */
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
background: transparent;
}
/* foto dentro (absolute) */
.modal-vehiculo-foto-unique {
position:absolute;
inset: 0;
width:100%;
height:100%;
object-fit: contain;
display:block;
background: transparent;
}
/* logo dentro imagen (top-left) */
.modal-vehiculo-logo-unique {
position: absolute;
top: 16px;
left: 16px;
width: 24px;
height: 24px;
z-index: 5;
}
/* FAVORITOS AL LADO DEL TEXTO */
.modal-fav-container {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end; /* alineado a la derecha */
width: 100%;
cursor: pointer;
margin-bottom: -4px; /* para acercarlo un poco al bloque de la imagen */
}
.modal-fav-container svg {
width: 24px;
height: 24px;
}
.modal-fav-text {
font-size: 14px;
font-weight: 600;
color: #252425;
}
/* RIGHT column */
.modal-right-col-unique {
flex: 1;
display:flex;
flex-direction:column;
gap:12px;
}
/* form rows (inputs más cortos y mitad de ancho) */
.modal-form-block-unique {
display: flex;
flex-direction: column;
gap: 12px;
}
.modal-form-row-unique {
display: flex;
flex-direction: column;
}
.modal-form-row-unique label {
font-weight: 600;
font-size: 13px;
color: #252425;
margin-bottom: 4px;
display: block;
}
.modal-form-row-unique input,
.modal-form-row-unique select {
height: 35px; /* más cortos */
padding: 6px 8px;
border-radius: 12px;
border: 1px solid #ddd;
font-size: 12px;
font-family: "Poppins", sans-serif;
width: 88%; /* mitad de ancho */
box-sizing: border-box;
}
/* actions alineados con inputs */
.modal-actions-unique {
display:flex;
gap: 8px;
margin-top:8px;
align-items: center; /* alinea verticalmente con inputs */
justify-content: flex-start; /* botones empiezan en mismo eje que inputs */
}
.btn-primary.modal-guardar-unique {
height: auto; /* mantiene altura original */
padding: 8px 16px; /* altura original */
font-size: 14px;
}
.btn-secondary.modal-cancelar-unique {
height: auto;
padding: 8px 16px;
font-size: 14px;
}
/* Contenedor del input dentro de la imagen */
.input-conductor-container {
position: absolute;
bottom: 12px; /* distancia desde la parte inferior */
left: 50%;
transform: translateX(-50%);
width: 90%; /* ancho relativo al contenedor de la imagen */
display: flex;
justify-content: center;
z-index: 10;
}
/* Input dentro de la imagen */
.input-asignar-conductor {
width: 100%;
padding: 6px 10px;
border-radius: 12px;
border: 1px solid #ccc;
font-size: 13px;
font-family: "Poppins", sans-serif;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.9); /* ligero fondo semitransparente */
color: #252425;
}
.input-asignar-conductor::placeholder {
color: #888888;
font-weight: 500;
}
/* RESPONSIVE MODAL EDITAR VEHICULO ADMIN */
@media (max-width: 900px) {
.overlay-editar-unique {
padding: 16px;
align-items: center;
}
.modal-editar-unique {
width: 95vw;
max-width: 95vw;
max-height: 90vh;
border-radius: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal-editar-header-unique {
padding: 12px 16px;
flex-shrink: 0;
}
.modal-editar-title-unique {
font-size: 14px;
}
.modal-editar-body-unique {
flex-direction: column;
gap: 12px;
padding: 12px 16px;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
max-height: calc(90vh - 60px);
}
.modal-left-col-unique {
width: 100%;
max-width: 100%;
}
.modal-vehiculo-img-unique {
padding-top: 65%;
max-width: 280px;
margin: 0 auto;
}
.btn-delete-vehiculo-unique {
width: 100%;
max-width: 280px;
margin: 0 auto;
justify-content: center;
font-size: 13px;
}
.modal-right-col-unique {
width: 100%;
gap: 10px;
}
.modal-form-row-unique input,
.modal-form-row-unique select {
width: 100% !important;
max-width: 100%;
font-size: 14px;
height: 40px;
}
.modal-form-row-unique label {
font-size: 12px;
}
.modal-actions-unique {
flex-direction: column;
gap: 8px;
width: 100%;
margin-top: 4px;
}
.modal-actions-unique button {
width: 100%;
justify-content: center;
font-size: 14px;
padding: 10px 16px;
}
.input-conductor-container {
width: 90%;
bottom: 10px;
}
.input-asignar-conductor {
font-size: 12px;
padding: 8px 10px;
}
.modal-fav-container {
margin-bottom: 8px;
}
}
/* 3. RESPONSIVE DEL HEADER DEL LISTADO */
@media (max-width: 900px) {
.pagina-header {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 12px;
}
.search-header { order: 1; grid-column: 1 / 3; } /* Buscador arriba, full width */
.btn-text-white { order: 2; grid-column: 2 / 3; justify-self: end;} /* Filtrar a la derecha */
.btn-text-page { order: 3; grid-column: 1 / 2; } /* Agregar a la izquierda */
.vehiculos-count { order: 4; grid-column: 1 / 2; } /* Conteo a la izquierda */
.pagina-indicator { order: 5; grid-column: 2 / 3; justify-self: end; } /* Paginación a la derecha */
}
@media (max-width: 600px) {
.pagina-header {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
}
.search-header { order: 1; grid-column: 1 / 2; }
.btn-text-page { order: 2; grid-column: 1 / 2; }
.btn-text-white { order: 3; grid-column: 1 / 2; }
.vehiculos-count { order: 4; grid-column: 1 / 2; }
.pagina-indicator { order: 5; grid-column: 1 / 2; justify-self: start; }
}
/* Variante específica para Agregar vehículo en edición de flota */
.btn-text-page-flota {
font-family: 'Poppins', sans-serif;
font-weight: 500; /* siempre normal, incluso en hover */
font-size: 13px;
color: #FFFFFF;
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
padding: 6px 8px;
}
/* Hover sin bold */
.btn-text-page-flota:hover {
font-weight: 500; /* no cambia al pasar el mouse */
color: #FFFFFF; /* puedes cambiar color si quieres efecto hover */
opacity: 0.8; /* ejemplo de efecto hover visual */
}
.modal-logo-marca {
position: absolute;
top: 16px;
left: 16px;
width: 48px;
height: 48px;
z-index: 2;
object-fit: contain;
pointer-events: none; /* opcional: evita clic accidental */
}
/* contenedor */
.model {
margin-top: 2px; /* o lo que quieras */
font-size: 14px; /* tamaño general */
}
/* patente */
.model .patente-text {
font-weight: normal;
font-size: 14px;
margin-right: 4px;
}
/* conductor */
.model .conductor-text {
font-weight: 600; /* bold */
font-size: 13px; /* más chico si quieres */
color: #cc0000; /* rojo si quieres */
}
.overlay-flota[aria-hidden="false"] {
display: flex !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.overlay-flota[aria-hidden="true"] {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* === PAGINACIÓN MODAL === */
.pagina-container-modal {
background: #fff;
padding: 16px;
border-radius: 16px;
margin-bottom: 16px;
}
.btn-add-page-modal {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.pagina-info-modal {
font-weight: 600;
}
/* CONTENEDOR PRINCIPAL DE LA MODAL */
.modal-flota-body {
width: 100%;
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;
padding: 24px;
}
.btn-disabled {
background: #B2B1B2 !important;
color: #252425 !important;
cursor: not-allowed !important;
opacity: .6;
}
/* ================================
MODAL 2 (AGREGAR VEHÍCULOS) — EXCLUSIVA
================================ */
.modal-grande-editar {
max-width: 1200px; /* 🔥 Ancho propio solo para modal 2 */
width: 95%;
overflow: hidden; /* 🔥 evita que se rompa el carrusel */
}
/* Cuerpo exclusivo de la segunda modal */
.modal-grande-editar .modal-flota-body {
display: flex;
flex-direction: column;
gap: 32px;
padding: 24px;
overflow-y: auto;
overflow-x: hidden;
}
/* Contenedor general del formulario con 3 listados */
.modal-grande-editar .modal-listado-container {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
/* La fila que contiene los 3 listados */
.modal-grande-editar .modal-listados-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 24px;
width: 100%;
min-width: 100%;
}
/* Cada listado dentro de la modal 2 */
.modal-grande-editar .listado-modal {
flex: 1 1 0;
min-width: 0;
background: #fff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
gap: 14px;
}
.footer-modal-editar {
display: flex;
justify-content: space-between; /* contador izquierda, botón derecha */
align-items: center; /* alineados verticalmente */
width: 100%;
margin-top: 16px;
}
/* 🔥 BOTÓN "Agregar vehículos" — SOLO MODAL EDITAR */
#overlay-formulario-editar .btn-primary {
width: auto !important; /* deja de ocupar los 100% */
padding: 12px 24px; /* tamaño correcto */
min-width: 220px; /* largo ideal */
text-align: center;
}
.info-flota-editar {
width: 100%;
margin: 8px 0 16px 0;
padding: 15px 20px;
background: #F5F5F5;
border-radius: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nombre-flota-actual {
font-size: 16px;
font-weight: 600;
color: #252525;
}
.btn-eliminar-flota {
background: #BF1823;
color: white;
padding: 10px 16px;
border-radius: 16px;
border: none;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
font-family: "Poppins", sans-serif;
}
.btn-eliminar-flota:hover {
background: #D4646C;
}
.btn-eliminar-flota:active {
background: #881119;
}
/* ==== BOTÓN LISTA DE REPUESTOS (Fuera del layout) ==== */
#btn-lista-repuestos {
background: transparent;
border: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 0;
cursor: pointer;
font-size: 18px;
font-weight: 500;
color: #333;
transition: font-weight .15s ease;
margin-bottom: 10px;
}
#btn-lista-repuestos img {
width: 24px;
height: 24px;
object-fit: contain;
}
#btn-lista-repuestos:hover {
font-weight: 700;
}
/* ==== LAYOUT PRINCIPAL ==== */
#detalle-layout {
display: flex;
gap: 24px;
width: 100%;
margin-top: 24px;
/* Esto hace que las dos columnas principales tengan la misma altura */
align-items: stretch;
}
/* ==== COLUMNA IZQUIERDA (ANCHO FIJO) ==== */
#detalle-col-izq {
flex: 0 0 380px; /* Ancho fijo */
max-width: 380px;
display: flex;
flex-direction: column;
}
/* ==== TARJETA DEL VEHÍCULO ==== */
#card-detalle-vehiculo {
width: 100%;
background: #fff;
border-radius: 16px;
padding: 24px;
position: relative;
box-shadow: var(--shadow);
flex: 1;
display: flex;
flex-direction: column;
}
#info-flota-editar .info-flota-title-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.btn-rename-flota {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.15s ease, transform 0.12s ease;
padding: 0;
}
.btn-rename-flota:hover { opacity: 0.85; }
.btn-rename-flota:active { transform: translateY(1px); }
.icon-rename-flota {
width: 18px;
height: 18px;
display: block;
background: #575657;
-webkit-mask: url('../img/Editar flota.svg') center/contain no-repeat;
mask: url('../img/Editar flota.svg') center/contain no-repeat;
}
/* Patente y Textos */
#detalle-patente {
margin: 0 0 4px 0;
font-weight: 700;
}
/* Modal renombrar flota */
.rename-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.25);
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
display: none !important;
align-items: center;
justify-content: center;
z-index: 140000;
padding: 18px;
}
.rename-overlay.visible {
display: flex !important;
}
.rename-modal {
background: #ffffff;
width: min(480px, 90vw);
border-radius: 16px;
box-shadow: 0 8px 25px rgba(0,0,0,0.25);
padding: 0;
overflow: hidden;
transform: translateY(12px);
transition: transform 0.18s ease, opacity 0.18s ease;
opacity: 0;
}
.rename-overlay.visible .rename-modal {
transform: translateY(0);
opacity: 1;
}
.rename-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #575657;
color: #ffffff;
margin: 0;
}
.rename-header h3 {
margin: 2px 0 0;
font-size: 20px;
color: #ffffff;
}
.rename-close {
border: none;
background: none;
color: #ffffff;
width: 32px;
height: 32px;
border-radius: 8px;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: opacity 0.2s ease;
}
.rename-close:hover { opacity: 0.85; }
.rename-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 20px;
background: #ffffff;
}
.rename-label {
font-weight: 600;
color: #333;
}
.rename-input {
width: 100%;
border: 1px solid #d9d9d9;
border-radius: 10px;
padding: 12px 14px;
font-size: 15px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rename-input:focus {
border-color: #BF1823;
box-shadow: 0 0 0 3px rgba(191,24,35,0.12);
}
.rename-help {
margin: 0;
color: #6a6a6a;
font-size: 13px;
line-height: 1.5;
}
.rename-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 12px 20px 18px;
background: #f8f8f8;
border-top: 1px solid #ededed;
}
#detalle-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
flex-shrink: 0; /* Evita que el header se aplaste */
}
#detalle-modelo {
font-size: 16px;
font-weight: 600;
margin: 0;
color: #333;
}
#detalle-conductor {
font-size: 14px;
color: #666;
margin: 4px 0 0 0;
}
#detalle-logo {
width: 40px;
height: auto;
}
/* --- IMAGEN (ESTA ES LA PARTE CRÍTICA PARA EL CUADRADO) --- */
#detalle-imagen-wrapper {
width: 100%; /* Toma el ancho de la tarjeta (aprox 380px - padding) */
/* ESTA LÍNEA HACE QUE SEA CUADRADO. La altura será igual al ancho */
aspect-ratio: 1 / 1;
/* Asegura que flexbox no intente achicar el cuadrado */
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
/* Centra el cuadrado verticalmente en el espacio sobrante */
margin: auto 0;
/* (Opcional: para probar, descomenta esto y verás el cuadrado rojo) */
/* background: rgba(255,0,0,0.1); */
}
#detalle-imagen {
/* La imagen se adapta al contenedor cuadrado sin deformarse */
width: 100%;
height: 100%;
object-fit: contain;
border: none;
background: transparent;
}
/* --- Botón --- */
#detalle-boton-wrapper {
width: 100%;
margin-top: auto; /* Empuja el botón al final */
flex-shrink: 0; /* Evita que el botón se aplaste */
}
#btn-mantencion {
width: 100%;
background: #BF1823;
color: #fff;
border: none;
padding: 14px 24px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
#btn-mantencion img {
width: 20px;
height: 20px;
}
/* --- Favorito --- */
#detalle-favorito {
width: 24px;
height: 24px;
position: absolute;
top: 24px;
right: 24px;
cursor: pointer;
}
/* ==== COLUMNA DERECHA (FLEXIBLE) ==== */
#detalle-col-der {
flex: 1;
display: flex;
flex-direction: column;
}
#secciones-wrapper {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
height: 100%;
}
.fila-secciones {
display: flex;
gap: 24px;
width: 100%;
flex: 1; /* Las filas se reparten el alto */
}
/* ==== ITEMS DE LA DERECHA ==== */
.seccion-item {
flex: 1;
background: #fff;
border-radius: 16px;
padding: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
min-height: 200px;
/* --- AGREGADO: Transiciones suaves y cursor --- */
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
/* --- Estilos para links --- */
text-decoration: none;
color: inherit;
}
.seccion-item h3 {
margin: 0 0 12px 0;
font-weight: 600;
font-size: 18px;
text-align: left;
color: #555;
}
.seccion-img {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
/* --- AGREGADO: Para evitar que el zoom se salga de la caja (opcional) --- */
overflow: hidden;
}
.seccion-img img {
width: 200px;
height: 200px;
object-fit: contain;
/* --- AGREGADO: Transición suave para el zoom de la imagen --- */
transition: transform 0.3s ease;
}
/* =======================================================
NUEVOS EFECTOS (HOVER Y CLICK)
======================================================= */
/* 1. HOVER: Fondo gris en la tarjeta */
.seccion-item:hover {
background-color: #EEEEEE;
}
/* 2. HOVER: Zoom solo en la imagen (cuando pasas el mouse por la tarjeta) */
.seccion-item:hover .seccion-img img {
transform: scale(1.15); /* Aumenta tamaño al 115% */
}
/* 3. CLICK (ACTIVE): Efecto "Bounce" (la tarjeta se achica un poco) */
.seccion-item:active {
transform: scale(0.96); /* Se contrae al 96% */
}
/* 4. SECCIÓN BLOQUEADA: Estilo para secciones sin productos */
.seccion-item.seccion-bloqueada {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.seccion-item.seccion-bloqueada:hover {
background-color: transparent;
transform: none;
}
.mensaje-no-disponible {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
background: rgba(191, 24, 35, 0.9);
color: white;
padding: 8px;
border-radius: 4px;
font-size: 12px;
text-align: center;
z-index: 10;
}
/* ==== SECCIÓN ESPECÍFICA DETALLE ==== */
.seccion-recomendados-detalle {
width: 100%;
max-width: 100%;
margin-top: 40px;
margin-bottom: 60px;
box-sizing: border-box;
}
/* 🔥 SECCIÓN: Comprados juntos frecuentemente + Otra opción */
.pack-productos-wrapper {
display: flex;
gap: 24px;
width: 100%;
margin-top: 32px;
margin-bottom: 40px;
}
.seccion-pack-productos {
flex: 1;
padding: 24px;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.seccion-otra-opcion {
width: 320px;
min-width: 320px;
padding: 24px;
padding-bottom: 90px;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
position: relative;
min-height: 100%;
}
.otra-opcion-container {
position: relative;
min-height: 320px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.otra-opcion-content {
display: flex;
justify-content: center;
width: 100%;
}
.btn-nav-opcion {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #BF1823;
color: #fff;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
z-index: 10;
transition: background 0.2s;
}
.btn-nav-opcion:hover {
background: #a0141d;
}
.btn-nav-opcion.prev {
left: -10px;
}
.btn-nav-opcion.next {
right: -10px;
}
.btn-agregar-opcion {
position: absolute;
bottom: 41px;
left: 24px;
right: 24px;
width: calc(100% - 48px);
background: var(--color-red);
color: var(--color-white);
border: none;
padding: 8px 16px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
cursor: pointer;
font-family: "Poppins", sans-serif;
font-size: 14px;
white-space: nowrap;
transition: all 0.2s ease;
}
.btn-agregar-opcion:hover {
background: #D4646C;
transform: translateY(-1px);
}
.btn-agregar-opcion:active {
background: #881119;
transform: translateY(0);
}
.btn-agregar-opcion img {
filter: brightness(0) invert(1);
}
.indicador-alternativas {
text-align: center;
font-size: 13px;
color: #666;
margin-top: 8px;
font-weight: 500;
}
.seccion-pack-productos h3,
.seccion-otra-opcion h3 {
font-size: 20px;
font-weight: 600;
color: #333;
margin: 0 0 24px 0;
}
.pack-container {
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 24px;
flex-wrap: wrap;
}
.pack-item {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
background: #f8f8f8;
border-radius: 8px;
min-width: 140px;
max-width: 180px;
flex: 1 1 0;
border: 2px solid transparent;
transition: all 0.2s ease;
position: relative;
}
.pack-item.producto-actual {
background: #fff5f5;
border-color: #BF1823;
}
.pack-item:not(.producto-actual):hover {
border-color: #D4646C;
box-shadow: 0 4px 12px rgba(191,24,35,0.12);
}
/* 🔲 CHECKBOX INTERACTIVO */
.pack-header {
display: flex;
align-items: flex-start;
gap: 8px;
width: 100%;
}
.pack-checkbox {
width: 20px;
height: 20px;
min-width: 20px;
margin-top: 2px;
cursor: pointer;
accent-color: #BF1823;
}
.pack-checkbox:disabled {
cursor: not-allowed;
opacity: 0.8;
}
.pack-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
/* 🚫 ESTADO DESHABILITADO */
.pack-item-disabled {
opacity: 0.4;
background: #f0f0f0 !important;
border-color: #d0d0d0 !important;
transition: all 0.3s ease;
}
.pack-item-disabled .pack-item-image {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.pack-item-disabled .pack-item-image img {
pointer-events: none;
}
.pack-item-disabled .pack-text {
pointer-events: none;
}
.pack-item-disabled .pack-item-precio {
color: #999 !important;
}
.pack-item-image {
width: 100%;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 6px;
overflow: hidden;
transition: transform 0.2s ease;
}
.pack-item-clickeable {
cursor: pointer;
}
.pack-item-clickeable:hover .pack-item-image img {
transform: scale(1.1);
}
.pack-item-clickeable:active .pack-item-image img {
transform: scale(0.95);
}
.pack-item-image {
position: relative;
overflow: hidden;
}
.pack-item-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
}
.pack-item-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.pack-item-label {
font-size: 11px;
color: #888;
text-transform: uppercase;
font-weight: 600;
margin: 0;
}
.pack-item-cruce {
font-size: 11px;
color: #666;
margin: 4px 0 0 0;
font-style: italic;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.pack-item-info h4 {
font-size: 13px;
font-weight: 500;
color: #333;
margin: 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.pack-item-precio {
font-size: 16px;
font-weight: 700;
color: #BF1823;
margin: 4px 0 0 0;
margin-top: auto;
}
.pack-item-precio-anterior {
font-size: 13px;
color: #888;
text-decoration: line-through;
margin-left: 6px;
}
.pack-items-grid {
display: flex;
gap: 16px;
flex-wrap: wrap;
flex: 1;
align-items: stretch;
}
.pack-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
border-top: 2px solid #e0e0e0;
gap: 16px;
flex-wrap: wrap;
}
.pack-total {
display: flex;
flex-direction: column;
gap: 4px;
}
.pack-total-label {
font-size: 14px;
color: #666;
font-weight: 500;
}
.pack-total-precios {
display: flex;
gap: 8px;
align-items: baseline;
}
.pack-total-precio {
font-size: 28px;
font-weight: 700;
color: #BF1823;
}
.pack-total-precio-anterior {
font-size: 20px;
color: #888;
text-decoration: line-through;
}
.btn-agregar-pack {
background: var(--color-red);
color: var(--color-white);
border: none;
padding: 8px 16px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
cursor: pointer;
font-family: "Poppins", sans-serif;
font-size: 14px;
white-space: nowrap;
transition: all 0.2s ease;
}
.btn-agregar-pack:hover {
background: #D4646C;
transform: translateY(-1px);
}
.btn-agregar-pack:active {
background: #881119;
transform: translateY(0);
}
.btn-agregar-pack img {
filter: brightness(0) invert(1);
}
/* 🔥 RESPONSIVE: Pack productos */
@media (max-width: 768px) {
.seccion-pack-productos {
padding: 16px;
margin-top: 24px;
margin-bottom: 32px;
max-height: none !important;
overflow: visible !important;
}
.seccion-pack-productos h3 {
font-size: 18px;
margin-bottom: 16px;
}
.pack-container {
flex-direction: column;
gap: 12px;
max-height: none !important;
overflow: visible !important;
}
.pack-item {
max-width: 100%;
min-width: 100%;
flex-direction: row;
gap: 12px;
}
.pack-checkbox {
width: 18px;
height: 18px;
min-width: 18px;
}
.pack-header {
gap: 6px;
}
.pack-item-image {
min-width: 80px;
max-width: 80px;
aspect-ratio: 1;
}
.pack-item-info {
flex: 1;
}
.pack-items-grid {
flex-direction: column;
width: 100%;
}
.pack-footer {
flex-direction: column;
gap: 12px;
}
.pack-total {
width: 100%;
align-items: center;
text-align: center;
}
.btn-agregar-pack {
width: 100%;
padding: 16px;
}
/* Responsive para Otra opción */
.pack-productos-wrapper {
flex-direction: column;
gap: 16px;
margin-top: 16px;
margin-bottom: 16px;
}
.seccion-otra-opcion {
width: 100%;
min-width: 100%;
padding: 16px;
padding-bottom: 70px;
}
.seccion-otra-opcion h3 {
font-size: 18px;
margin-bottom: 12px;
}
.otra-opcion-container {
min-height: auto;
margin-bottom: 0;
}
.otra-opcion-content .pack-item {
flex-direction: row;
gap: 12px;
padding: 12px;
background: #f8f8f8;
border-radius: 8px;
}
.otra-opcion-content .pack-item-image {
min-width: 70px;
max-width: 70px;
height: 70px;
}
.btn-agregar-opcion {
bottom: 16px;
left: 16px;
right: 16px;
width: calc(100% - 32px);
padding: 12px 16px;
}
.btn-nav-opcion {
width: 32px;
height: 32px;
font-size: 18px;
}
.btn-nav-opcion.prev {
left: -8px;
}
.btn-nav-opcion.next {
right: -8px;
}
}
.seccion-recomendados-detalle h3 {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 24px 0;
text-align: left;
padding-left: 4px;
}
/* ==== ESTRUCTURA CARRUSEL (RELATIVE PARA FLECHAS ABSOLUTAS) ==== */
.carrusel-contenedor-detalle {
position: relative; /* CRUCIAL: Para que las flechas floten respecto a esto */
width: 100%;
max-width: 100%;
overflow: hidden;
box-sizing: border-box;
/* Quitamos display: flex del contenedor padre para no afectar las flechas */
}
.viewport-detalle {
width: 100%;
max-width: 100%;
overflow: hidden;
padding: 15px 0 25px 0;
box-sizing: border-box;
/* Aseguramos que solo muestre 4 tarjetas a la vez */
display: block;
}
.track-detalle {
display: flex;
gap: 24px; /* Espacio entre tarjetas */
transition: transform 0.3s ease-in-out;
}
/* ==== BOTONES NAVEGACIÓN FLOTANTES (OVERLAY) ==== */
.btn-nav-detalle {
position: absolute; /* FLOTAN ENCIMA */
top: 50%; /* CENTRADAS VERTICALMENTE */
transform: translateY(-50%);
background: #BF1823;
color: #fff;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: none;
z-index: 10; /* ENCIMA DE LAS TARJETAS */
transition: background 0.2s, transform 0.2s;
}
.btn-nav-detalle:hover {
background: #a0141d;
transform: translateY(-50%) scale(1.1);
}
/* Posición exacta a los lados */
.btn-nav-detalle.prev {
left: 5px; /* Dentro del contenedor */
}
.btn-nav-detalle.next {
right: 5px; /* Dentro del contenedor */
}
/* ==== BOTONES NAVEGACIÓN CARRUSEL FLOTA (mismo estilo) ==== */
.btn-nav-flota {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #BF1823;
color: #fff;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: none;
z-index: 10;
transition: background 0.2s, transform 0.2s;
}
.btn-nav-flota:hover {
background: #a0141d;
transform: translateY(-50%) scale(1.1);
}
.btn-nav-flota.prev {
left: 5px;
}
.btn-nav-flota.next {
right: 5px;
}
/* ==== TARJETA PRODUCTO (TAMAÑO FLEXIBLE) ==== */
.card-producto-detalle {
/* CÁLCULO EXACTO: 100% del ancho, menos 3 espacios de 24px (72px total), dividido en 4 */
flex: 0 0 calc((100% - 72px) / 4);
max-width: calc((100% - 72px) / 4);
/* Forma Cuadrada */
aspect-ratio: 1 / 1;
/* Estilos Visuales */
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
border: 1px solid #f0f0f0;
/* Layout Interno */
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
position: relative;
flex-shrink: 0;
transition: transform 0.2s ease;
cursor: pointer;
overflow: hidden;
}
.card-producto-detalle:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
/* --- Estilos internos (Igual que antes) --- */
.header-producto-detalle {
width: 100%;
text-align: left;
position: relative;
}
/* En desktop: el badge debe ser absoluto respecto a la tarjeta, no al header */
@media (min-width: 701px) {
.header-producto-detalle {
position: static;
}
}
.header-producto-detalle h4 {
font-size: 14px; font-weight: 600; color: #333; margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.header-producto-detalle .sku-visible {
font-size: 11px;
font-weight: 400;
color: #666;
margin-top: 4px;
margin-bottom: 0;
display: block;
word-break: break-word;
white-space: normal;
}
@media (max-width: 700px) {
.header-producto-detalle .sku-visible {
margin-bottom: 28px;
padding-right: 4px;
}
}
.header-producto-detalle .sku-invisible {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0;
}
.body-producto-detalle {
flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; padding: 8px 0;
}
.body-producto-detalle img { max-width: 85%; max-height: 85%; object-fit: contain; }
/* Placeholder cuando no hay imagen */
.placeholder-sin-imagen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #f8f9fa;
border-radius: 12px;
gap: 8px;
}
.placeholder-sin-imagen img {
width: 40px;
height: 40px;
opacity: 0.6;
object-fit: contain;
}
.placeholder-sin-imagen p {
font-size: 12px;
color: #999;
margin: 0;
text-align: center;
}
/* Badge oferta en tarjetas recomendadas - borde izquierdo debajo del SKU */
.header-producto-detalle .badge-oferta {
position: absolute;
left: 0;
top: 58px;
padding: 4px 10px;
font-size: 10px;
font-weight: 700;
background-color: #BF1823;
color: white;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
text-transform: uppercase;
line-height: 1;
z-index: 5;
pointer-events: none;
}
@media (max-width: 700px) {
.header-producto-detalle .badge-oferta {
position: static;
display: inline-block;
margin-top: 4px;
border-radius: 0 8px 8px 0;
}
}
.footer-producto-detalle { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; }
.logo-marca-detalle {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo-marca-detalle img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
opacity: 0.9;
}
.precio-container-detalle { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.precio-anterior-detalle { font-size: 11px; color: #999; text-decoration: line-through; margin: 0; }
.precio-actual-detalle { font-size: 16px; font-weight: 700; color: #BF1823; line-height: 1.2; }
/* RESPONSIVE */
@media (max-width: 1024px) {
/* 3 tarjetas: Restamos 2 gaps de 24px (48px) */
.card-producto-detalle { flex: 0 0 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); }
}
@media (max-width: 768px) {
/* 2 tarjetas: Restamos 1 gap de 24px */
.card-producto-detalle {
flex: 0 0 calc((100% - 24px) / 2);
max-width: calc((100% - 24px) / 2);
}
}
@media (max-width: 700px) {
/* 2 tarjetas en móvil con aspecto vertical más alto */
.card-producto-detalle {
flex: 0 0 calc((100% - 16px) / 2) !important;
max-width: calc((100% - 16px) / 2) !important;
aspect-ratio: 0.7 / 1 !important; /* Más alto que cuadrado */
min-height: 320px;
}
/* Navegación fuera del carrusel en móvil: botones fuera sin mostrar tarjetas ocultas */
.carrusel-contenedor-detalle {
position: relative;
display: block;
padding: 0;
overflow: visible; /* permite que flechas sobresalgan */
}
.viewport-detalle {
padding: 10px 0 20px 0;
overflow-x: auto; /* Habilitar scroll horizontal en mobile */
overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* Smooth scroll en iOS */
scroll-snap-type: x mandatory; /* Snap opcional */
}
/* Ocultar botones de navegación en mobile */
.btn-nav-detalle {
display: none !important;
}
.track-detalle {
gap: 16px; /* Gap más pequeño en móvil */
transform: none !important; /* Desactivar transform en mobile */
transition: none !important; /* Desactivar transición */
}
.seccion-recomendados-detalle {
margin-top: 30px;
margin-bottom: 40px;
}
/* 📱 Ocultar carruseles en mobile */
.carrusel-desktop-only {
display: none !important;
}
/* 📱 Mostrar grid mobile */
.seccion-productos-mobile {
display: block !important;
margin: 30px 0 40px;
padding: 0 16px;
}
.seccion-productos-mobile h3 {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 20px;
}
.productos-mobile-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* Reutilizar estilos de tarjeta de producto existentes */
.productos-mobile-grid .sc-card-producto-detalle {
width: 100%;
min-width: 0;
position: relative;
overflow: hidden;
}
/* Badges en grid mobile */
.productos-mobile-grid .sc-card-producto-detalle .badge-nuevo-ribbon {
position: static !important;
display: inline-block !important;
margin-top: 4px !important;
margin-right: 3px !important;
background: #BF1823 !important;
color: white !important;
font-size: 10px !important;
font-weight: 700 !important;
padding: 4px 10px !important;
border-radius: 0 8px 8px 0 !important;
transform: none !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1 !important;
}
.productos-mobile-grid .sc-card-producto-detalle .badge-oferta {
position: absolute !important;
top: 0 !important;
left: 0 !important;
background-color: #BF1823 !important;
color: white !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 4px 10px !important;
border-bottom-right-radius: 8px !important;
text-transform: uppercase !important;
z-index: 10 !important;
}
/* Cuando hay NUEVO y OFERTA juntos en grid mobile */
.productos-mobile-grid .sc-card-producto-detalle:has(.badge-nuevo-ribbon) .badge-oferta {
position: static !important;
display: inline-block !important;
margin-top: 4px !important;
margin-left: 2px !important;
}
.seccion-recomendados-detalle h3 {
font-size: 16px;
margin-bottom: 20px;
}
.body-producto-detalle img {
max-width: 90%;
max-height: 90%;
}
.header-producto-detalle h4 {
font-size: 13px;
}
.precio-actual-detalle {
font-size: 14px;
}
/* Botones de navegación del carrusel Productos para tu flota - EXACTO como btn-nav-detalle */
.btn-nav-flota {
position: absolute;
top: 50%;
transform: translateY(-50%);
justify-self: auto;
z-index: 15;
width: 36px;
height: 36px;
font-size: 22px;
}
.btn-nav-flota.prev {
left: -20px;
}
.btn-nav-flota.next {
right: -20px;
}
.btn-nav-detalle {
width: 36px;
height: 36px;
font-size: 20px;
}
}
@media (max-width: 480px) {
/* Mantener 2 tarjetas en pantallas muy pequeñas */
.card-producto-detalle {
flex: 0 0 calc((100% - 12px) / 2) !important;
max-width: calc((100% - 12px) / 2) !important;
}
.track-detalle {
gap: 12px;
}
}
/* === LAYOUT Y GRILLA === */
.products-container {
padding: 20px 0;
}
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 40px;
}
/* Responsividad */
@media (max-width: 1366px) {
.products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
.products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
.products-grid { grid-template-columns: 1fr; }
}
/* === TARJETA DEL PRODUCTO === */
.sc-card {
background: var(--color-white);
border-radius: var(--card-radius);
padding: 20px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
position: relative; /* Necesario para que badge-offer se posicione correctamente */
border: 1px solid transparent;
transition: transform 0.2s, box-shadow 0.2s;
overflow: hidden;
contain: layout style paint;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
}
.sc-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
border-color: #e5e5e5;
}
/* Desactivar hover para tarjetas que no deben elevarse */
.sc-card.no-hover:hover {
transform: none;
box-shadow: var(--shadow);
border-color: transparent;
}
.sc-card.no-hover {
overflow: visible;
}
/* === IMAGEN Y OFERTA (CORREGIDO) === */
/* 1. EL CONTENEDOR DE LA IMAGEN */
/* ESTO ES LO QUE FALTABA: Define el área donde vive la oferta */
.sc-card-img {
position: relative; /* <--- CLAVE: Atrapa la etiqueta dentro de este cuadro */
width: 100%;
height: 220px; /* Altura fija para el área de la foto */
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
overflow: hidden; /* Asegura que nada se salga */
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000px;
-webkit-perspective: 1000px;
backface-visibility: hidden;
}
/* 2. LA ETIQUETA DE OFERTA */
.badge-offer,
.badge-oferta {
position: absolute;
top: 0;
left: 0;
background-color: var(--color-red);
color: white;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-bottom-right-radius: 8px;
text-transform: uppercase;
z-index: 10;
line-height: 1;
pointer-events: none;
}
/* Badge NUEVO estilo ribbon diagonal (solo desktop) */
.badge-nuevo-ribbon {
position: absolute;
top: 14px;
right: -34px;
background: #BF1823;
color: white;
font-size: 11px;
font-weight: 800;
padding: 7px 60px;
display: inline-flex;
align-items: center;
justify-content: center;
transform: rotate(45deg) translateY(2px);
text-transform: uppercase;
letter-spacing: 0.5px;
pointer-events: none;
z-index: 11;
}
.sc-card .badge-nuevo-ribbon { top: 16px; right: -34px; }
/* En desktop: el badge debe ser absoluto respecto a la tarjeta */
@media (min-width: 701px) {
.card-producto-detalle .badge-nuevo-ribbon {
position: absolute;
top: 14px;
right: -34px;
}
}
/* En mobile: convertir badge-nuevo-ribbon a badge simple como oferta */
@media (max-width: 700px) {
/* General para todas las tarjetas EXCEPTO categorías */
.sc-card:not(.sc-card-categoria) .badge-nuevo-ribbon,
.card-producto-detalle .badge-nuevo-ribbon {
position: static !important;
display: inline-block !important;
top: auto !important;
left: auto !important;
right: auto !important;
margin-top: 4px !important;
margin-right: 3px !important;
background: #BF1823 !important;
color: white !important;
font-size: 10px !important;
font-weight: 700 !important;
padding: 4px 10px !important;
border-radius: 0 8px 8px 0 !important;
transform: none !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1 !important;
pointer-events: none !important;
}
/* Cuando hay NUEVO y OFERTA juntos, mostrar lado a lado */
.sc-card:has(.badge-nuevo-ribbon) .badge-offer {
display: inline-block !important;
position: static !important;
margin-left: 2px !important;
margin-top: 4px !important;
}
/* Cuando hay NUEVO y OFERTA juntos en tarjetas detalle, mostrar lado a lado */
.card-producto-detalle:has(.badge-nuevo-ribbon) .header-producto-detalle .badge-oferta {
position: static !important;
display: inline-block !important;
margin-top: 4px !important;
margin-left: 2px !important;
top: auto !important;
}
}
/* ============================================
REGLA ESPECÍFICA PARA TARJETAS DE CATEGORÍAS
============================================ */
@media (max-width: 700px) {
/* Permitir overflow visible en tarjetas de categoría */
article.sc-card.sc-card-categoria {
overflow: visible !important;
}
/* Badge NUEVO en tarjetas de categoría: esquina superior izquierda */
article.sc-card.sc-card-categoria .badge-nuevo-ribbon {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
background: #BF1823 !important;
color: white !important;
font-size: 10px !important;
font-weight: 700 !important;
padding: 4px 10px !important;
border-radius: 0 !important;
border-bottom-right-radius: 8px !important;
transform: none !important;
z-index: 10 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: none !important;
}
}
/* Estilo de la imagen dentro del contenedor */
.sc-card-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
padding: 10px;
}
/* ==== CARRUSEL EN HOVER DE TARJETAS ==== */
/* Contenedor del carrusel en la tarjeta */
.card-carousel-container {
position: relative;
width: 100%;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
overflow: hidden;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Todas las imágenes del carrusel ocultas por defecto */
.card-carousel-container .carousel-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
padding: 10px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
will-change: opacity;
transform: translateZ(0);
}
/* Solo la imagen activa es visible */
.card-carousel-container .carousel-image.active {
opacity: 1;
pointer-events: auto;
}
/* Botones de navegación del carrusel - OCULTOS POR DEFECTO */
.card-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(191, 24, 35, 0.9);
color: #fff;
border: none;
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
line-height: 1;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
z-index: 15;
transition: all 0.2s ease;
display: none;
opacity: 0;
}
.card-carousel-btn.prev {
left: 10px;
}
.card-carousel-btn.next {
right: 10px;
}
.card-carousel-btn:hover {
background: rgba(160, 20, 29, 0.95);
transform: translateY(-50%) scale(1.08);
}
/* Indicadores del carrusel - OCULTOS POR DEFECTO */
.card-carousel-indicators {
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
gap: 8px;
z-index: 15;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.card-carousel-indicators .dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(221, 221, 221, 0.8);
cursor: pointer;
transition: all 0.2s ease;
display: inline-block;
}
.card-carousel-indicators .dot:hover {
background: rgba(191, 24, 35, 0.7);
transform: scale(1.2);
}
.card-carousel-indicators .dot.active {
background: #bf1823;
transform: scale(1.3);
}
/* SOLO MOSTRAR CONTROLES EN HOVER SI HAY MÁS DE 1 IMAGEN (clase has-carousel) */
.sc-card:hover .card-carousel-container.has-carousel .card-carousel-btn {
display: flex;
opacity: 1;
}
.sc-card:hover .card-carousel-container.has-carousel .card-carousel-indicators {
display: flex;
opacity: 1;
}
/* MOBILE: MOSTRAR BOTONES SIEMPRE (SIN HOVER) */
@media (max-width: 768px) {
.card-carousel-container.has-carousel .card-carousel-btn {
display: flex !important;
opacity: 1 !important;
}
.card-carousel-container.has-carousel .card-carousel-indicators {
display: flex !important;
opacity: 1 !important;
left: auto !important;
right: 8px !important;
transform: none !important;
}
.card-carousel-indicators .dot {
width: 7px !important;
height: 7px !important;
}
/* OPTIMIZACIONES ANTI-FLICKERING MOBILE */
.sc-card,
.sc-card-img,
.sc-card-img img,
.brand-logo,
.btn-secondary,
.btn-secondary img,
.card-carousel-container,
.carousel-image {
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
-webkit-perspective: 1000px !important;
perspective: 1000px !important;
will-change: transform !important;
}
.sc-card {
contain: layout style paint !important;
}
.card-carousel-indicators .dot.active {
transform: scale(1.5) !important;
}
}
/* Asegurar que los placeholders no interfieran */
.card-carousel-container .image-placeholder {
position: relative;
z-index: 1;
}
/* Cabecera Tarjeta */
.sc-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.brand-logo {
height: 56px;
width: 56px;
object-fit: contain;
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000px;
-webkit-perspective: 1000px;
-webkit-transform: translate3d(0, 0, 0);
}
.sku-text { font-size: 11px; color: #888; font-weight: 500; }
/* SKU en desktop: visible en body, oculto en header */
.sku-body-desktop {
font-size: 12px;
color: #888;
font-weight: 500;
display: block;
margin: 2px 0 0 0;
}
.sku-header-mobile {
display: none;
}
/* Links deshabilitados (Mis compras, historial admin) */
.link-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.link-disabled .nav-icon img {
filter: grayscale(1) opacity(0.6);
}
/* SKU en mobile: visible en header, oculto en body */
@media (max-width: 700px) {
.sku-body-desktop {
display: none !important;
}
.sku-header-mobile {
display: block;
font-size: 12px;
color: #888;
font-weight: 500;
}
}
/* Cuerpo */
.sc-card-body {
margin-bottom: 4px;
flex-grow: 1;
}
.sc-card-title {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
color: #575657;
margin: 0;
margin-bottom: 4px;
/* Truncado de texto */
display: -webkit-box;
-webkit-line-clamp: 2; /* Soporte actual */
line-clamp: 2; /* Estándar futuro (quita la advertencia) */
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 34px;
max-height: 34px;
}
/* Sección de Precio */
.price-section {
margin-bottom: 16px;
min-height: 44px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.price-old {
font-size: 12px;
color: #999;
text-decoration: line-through;
margin-bottom: 2px;
}
.price-current {
font-size: 22px;
font-weight: 700;
color: var(--color-red);
}
/* Footer: Acciones */
.sc-card-actions {
display: flex;
flex-direction: column;
gap: 16px;
}
/* === PAGINACIÓN === */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 40px;
}
.page-btn {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid #ddd;
background: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
}
.page-btn:hover { border-color: var(--color-red); color: var(--color-red); }
.page-btn.active { background-color: var(--color-red); color: white; border-color: var(--color-red); }
.page-btn.arrow img { height: 12px; }
.page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
border-color: #ddd;
color: #ccc;
}
.page-indicator {
font-size: 14px;
color: #666;
font-weight: 500;
padding: 0 12px;
white-space: nowrap;
}
/* === BARRA DE HERRAMIENTAS (LAYOUT PRINCIPAL) === */
.toolbar-products {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap; /* Permite que los elementos bajen si no caben */
gap: 16px;
}
/* Repuestos admin: fijar botón filtrar sin posición absoluta */
#repuestos .toolbar-right #btn-filtrar-admin-repuestos {
position: static;
}
/* Grupo Izquierdo: Buscador + Texto */
.toolbar-left {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap; /* Importante para responsividad interna */
}
/* === ESTILOS UNIFICADOS DE BUSCADORES === */
.search-general,
.search-patente,
.search-repuesto {
position: relative;
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid #d0d0d0;
border-radius: 16px;
height: 40px;
-webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
overflow: visible;
padding: 0 44px 0 12px;
width: 100%;
max-width: 320px;
box-sizing: border-box;
z-index: 1;
}
.search-repuesto:focus-within {
border-color: #BF1823;
box-shadow: 0 0 0 2px rgba(191, 24, 35, 0.1);
z-index: 10;
}
/* Efecto Focus */
.search-general:focus-within,
.search-patente:focus-within,
.search-repuesto:focus-within {
border-color: #575657;
}
/* Input interno */
.input-repuesto {
border: none;
background: transparent;
outline: none;
width: 100%;
height: 100%;
font-family: "Poppins", sans-serif;
font-size: 14px;
color: #333;
padding-right: 8px;
}
.input-repuesto::placeholder {
color: #aaa;
}
/* Botón Lupa */
.btn-search-repuesto {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
height: 32px;
width: 32px;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.btn-search-repuesto img {
width: 16px;
height: 16px;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.btn-search-repuesto:hover img {
opacity: 1;
}
/* Texto de resultados */
.results-text {
font-size: 13px;
color: #666;
font-weight: 500;
white-space: nowrap; /* Evita que el texto se rompa feo */
}
/* === RESPONSIVIDAD (MEDIA QUERIES) === */
/* Para Tablets y Móviles (Menos de 768px) */
@media (max-width: 768px) {
.toolbar-products {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.toolbar-left {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
flex-wrap: nowrap;
}
.search-repuesto {
flex: 1 1 260px !important; /* base más amplia para no cortar placeholder */
min-width: 0 !important;
max-width: 100% !important;
}
.search-repuesto .input-repuesto {
padding: 12px 14px;
font-size: 14px;
}
.results-text {
white-space: nowrap;
font-size: 13px;
flex-shrink: 0;
}
.toolbar-right {
flex-shrink: 0;
}
/* ===== MODAL VER CRUCES - Tarjetas de productos responsivas ===== */
#lista-cruces-sistema .cruce-card {
padding: 14px !important;
border-radius: 10px !important;
}
/* Header de la tarjeta con título y stock */
#lista-cruces-sistema .cruce-card > div:first-child {
flex-direction: column !important;
gap: 12px !important;
}
/* SKU y nombre del producto */
#lista-cruces-sistema .cruce-card h4 {
font-size: 15px !important;
line-height: 1.3 !important;
}
#lista-cruces-sistema .cruce-card > div:first-child > div:first-child > div:nth-child(2) {
font-size: 13px !important;
}
/* Stock badge a la izquierda en móvil */
#lista-cruces-sistema .cruce-card > div:first-child > div:last-child {
width: 100% !important;
min-width: 100% !important;
text-align: left !important;
}
#lista-cruces-sistema .cruce-card > div:first-child > div:last-child > div {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 16px !important;
}
#lista-cruces-sistema .cruce-card > div:first-child > div:last-child > div > div:first-child {
font-size: 10px !important;
margin-bottom: 0 !important;
}
#lista-cruces-sistema .cruce-card > div:first-child > div:last-child > div > div:last-child {
font-size: 18px !important;
}
/* Secciones de aplicaciones, motor, chasis */
#lista-cruces-sistema .cruce-card > div[style*="background"] {
padding: 12px !important;
margin-bottom: 10px !important;
}
/* Botones dentro de las tarjetas más grandes en móvil */
#lista-cruces-sistema .cruce-card .btn-secondary {
padding: 10px 14px !important;
font-size: 13px !important;
min-height: 42px !important;
}
/* Textos de motor y chasis más legibles */
#lista-cruces-sistema .cruce-card span[style*="border-radius"] {
font-size: 12px !important;
padding: 6px 10px !important;
}
}
/* Para Móviles muy pequeños (Menos de 480px) */
@media (max-width: 480px) {
.toolbar-left {
flex-direction: row; /* Mantener en línea horizontal */
align-items: center;
gap: 10px;
}
.results-text {
font-size: 12px; /* Texto un poco más chico */
white-space: nowrap;
flex-shrink: 0;
margin-left: 6px;
}
}
/* === MOBILE STABILITY OVERRIDES (anti-flicker) === */
@media (max-width: 768px) {
/* Reduce nested compositing and isolate image area */
.sc-card {
contain: none !important;
transform: none !important;
will-change: auto !important;
}
.sc-card-img {
contain: paint !important;
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
will-change: transform !important;
}
/* Ensure stable rasterization for images and SVGs */
.sc-card-img img,
.brand-logo,
.btn-secondary img,
.card-carousel-container .carousel-image {
display: block !important;
-webkit-transform: none !important;
transform: none !important;
will-change: opacity !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
image-rendering: -webkit-optimize-contrast !important;
}
}
/* iOS Safari-specific: reinforce image rendering and compositing */
@supports (-webkit-overflow-scrolling: touch) {
@media (max-width: 768px) {
.brand-logo,
.btn-secondary img,
.sc-card-img img,
.card-carousel-container .carousel-image {
image-rendering: -webkit-optimize-contrast !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
}
}
}
/* =========================================
ESTILOS DETALLE DE PRODUCTO (FINAL v7)
========================================= */
.product-detail-container {
display: flex;
gap: 40px;
background: var(--color-white);
padding: 30px;
border-radius: var(--card-radius);
box-shadow: var(--shadow);
margin-bottom: 40px;
align-items: stretch;
}
/* === COLUMNA IZQUIERDA === */
.detail-left-column {
flex: 0 0 50%;
min-width: 350px;
display: flex;
flex-direction: column;
}
.detail-title {
font-size: 22px; font-weight: 700; color: #333;
margin: 0; line-height: 1.3;
}
.detail-sku {
display: block;
margin-top: 8px;
font-size: 13px; color: #999; font-weight: 500;
}
/* === GALERÍA (Grid Ajustado) === */
.gallery-container {
display: flex;
gap: 16px;
margin-top: 20px;
margin-bottom: 24px;
width: 100%;
max-width: 600px;
}
/* 1. STACK IMAGEN PRINCIPAL */
.main-image-stack {
position: relative;
width: 480px; /* Ancho fijo */
height: 480px; /* Alto fijo */
flex-shrink: 0; /* No permitir que se encoja */
}
/* Contenedor interno */
.image-carousel-wrapper {
width: 480px;
height: 480px;
border: 1px solid #eee;
border-radius: 12px;
background: #fff;
overflow: hidden;
position: relative;
}
.main-product-image {
width: 480px;
height: 480px;
max-width: 480px;
max-height: 480px;
object-fit: contain; /* Adapta la imagen sin distorsionar */
padding: 20px;
display: block;
cursor: zoom-in;
transition: transform 0.1s ease-out;
transform-origin: center center;
}
/* ZOOM EN DESKTOP */
@media (min-width: 901px) {
.main-product-image.zoomed {
transform: scale(3);
cursor: zoom-out;
}
.image-carousel-wrapper {
overflow: hidden !important;
}
.image-carousel-wrapper:hover {
overflow: hidden;
z-index: 50;
}
}
/* MINIMAP PARA MOSTRAR ÁREA DE ZOOM */
.image-zoom-minimap {
display: none;
position: absolute;
bottom: 12px;
right: 12px;
width: 100px;
height: 100px;
border: 2px solid #eee;
border-radius: 4px;
background: #fff;
overflow: hidden;
z-index: 100;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.image-zoom-minimap img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 2px;
}
.image-zoom-indicator {
display: none;
position: absolute;
border: 2px solid #BF1823;
box-sizing: border-box;
background: transparent;
z-index: 101;
}
@media (min-width: 901px) {
.image-carousel-wrapper:hover .image-zoom-minimap,
.image-carousel-wrapper:hover .image-zoom-indicator {
display: block;
}
}
/* Marca (Adentro) */
.brand-floating {
position: absolute; top: 15px; left: 15px;
height: 72px; width: 72px; object-fit: contain;
z-index: 5;
}
/* Flechas (En el borde del stack, usando clases globales) */
.prod-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
margin: 0;
}
.prod-arrow.prev { left: 0; }
.prod-arrow.next { right: 0; }
/* 2. Miniaturas Laterales */
.side-thumbs-column {
width: 110px;
display: flex;
flex-direction: column;
gap: 16px;
height: auto;
}
.side-thumb {
width: 100%;
flex: 1; /* Ocupan espacio equitativo vertical */
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: 0.2s;
background: #fff;
min-height: 0;
position: relative; /* Para que el overlay funcione */
}
.side-thumb:hover, .side-thumb.active { border-color: var(--color-red); }
/* IMAGEN DE MINIATURA (Ajuste solicitado) */
.side-thumb img {
width: 100%;
height: 100%;
object-fit: contain; /* Se adapta sin cortarse ni distorsionarse */
padding: 5px; /* Un poco de aire igual que la grande */
}
/* Indicadores */
.carousel-indicators {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
list-style: none;
padding: 0;
}
.carousel-indicators li,
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ddd;
transition: 0.2s;
display: inline-block;
}
.carousel-indicators li.active,
.dot.active {
background: var(--color-red);
transform: scale(1.2);
}
/* ===== MODAL GALERÍA PROFESIONAL (Coincide con lista de repuestos) ===== */
.gallery-overlay {
position: fixed;
inset: 0;
background: rgba(10, 12, 17, 0.92);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(4px);
}
.gallery-overlay.active { display: flex; }
.gallery-shell {
position: relative;
width: 92vw;
max-width: 1200px;
height: 92vh;
background: #0f1115;
border-radius: 16px;
box-shadow: 0 20px 70px rgba(0,0,0,0.45);
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid rgba(255,255,255,0.05);
}
.gallery-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
color: #f7f8fb;
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gallery-title {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.2px;
margin-bottom: 6px;
}
.gallery-close {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
color: #fff;
border-radius: 999px;
padding: 10px 14px;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
}
.gallery-close:hover { background: rgba(255,255,255,0.2); }
.gallery-body {
flex: 1;
display: grid;
grid-template-rows: 1fr 128px;
gap: 12px;
padding: 16px 16px 18px;
min-height: 0;
}
.gallery-viewport {
position: relative;
background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.04), rgba(0,0,0,0.35));
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.gallery-main-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 12px 35px rgba(0,0,0,0.35);
}
.gallery-counter {
position: absolute;
left: 16px;
bottom: 16px;
background: rgba(0,0,0,0.55);
color: #fff;
padding: 6px 10px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.3px;
}
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.4);
background: rgba(15,17,21,0.75);
color: #fff;
font-size: 22px;
display: grid;
place-items: center;
cursor: pointer;
transition: all 0.2s ease;
}
.gallery-nav:hover { background: rgba(255,255,255,0.18); }
.gallery-nav.prev { left: 14px; }
.gallery-nav.next { right: 14px; }
.gallery-thumbs {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
padding: 10px 12px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
gap: 10px;
align-items: center;
height: 100%;
}
.gallery-thumb {
width: 120px;
height: 96px;
border-radius: 10px;
overflow: hidden;
position: relative;
flex: 0 0 auto;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s ease;
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery-thumb.active {
border-color: #BF1823;
box-shadow: 0 0 0 4px rgba(191,24,35,0.3);
}
.gallery-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
opacity: 0;
transition: opacity 0.2s ease;
}
.gallery-thumb:hover::after { opacity: 1; }
.gallery-empty {
color: #d8dce6;
text-align: center;
display: grid;
place-items: center;
width: 100%;
height: 100%;
}
.gallery-empty .box {
border: 1px dashed rgba(255,255,255,0.25);
padding: 24px 28px;
border-radius: 12px;
background: rgba(255,255,255,0.02);
}
/* Responsivo galería para tablet */
@media (max-width: 900px) {
.gallery-shell {
width: 95vw;
height: 95vh;
}
.gallery-thumb { width: 110px; height: 90px; }
}
/* Responsivo galería para móvil */
@media (max-width: 576px) {
.gallery-shell {
width: 98vw;
height: 98vh;
border-radius: 12px;
}
.gallery-header {
padding: 12px 16px;
}
.gallery-title {
font-size: 14px;
margin-bottom: 4px;
}
.gallery-close {
padding: 8px 12px;
font-size: 14px;
}
.gallery-body {
grid-template-rows: 1fr 110px;
gap: 8px;
padding: 12px 12px 14px;
}
.gallery-thumb { width: 95px; height: 78px; }
.gallery-thumbs { padding: 8px; gap: 6px; }
.gallery-nav {
width: 40px;
height: 40px;
font-size: 18px;
}
}
/* Acciones Izquierda */
.left-actions-row {
display: flex; align-items: center; justify-content: space-between;
margin-top: auto;
border-top: 1px solid #f0f0f0; padding-top: 20px;
max-width: 600px;
}
.qty-group { display: flex; align-items: center; gap: 10px; }
.qty-label { font-weight: 600; font-size: 14px; color: #333; }
.quantity-selector {
display: flex; align-items: center;
border: 1px solid #ddd; border-radius: 50px; height: 36px; overflow: hidden;
}
.qty-btn {
width: 32px; height: 100%; border: none; background: var(--color-red); color: white;
cursor: pointer; font-weight: bold; font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.qty-btn:hover { background: var(--color-red-hover); }
.qty-input {
width: 40px; text-align: center; border: none; font-family: "Poppins"; font-weight: 600; outline: none; color: #333;
appearance: textfield; /* Estándar */
-moz-appearance: textfield; /* Firefox */
}
/* Ocultar flechas nativas del input number en Chrome, Safari, Edge, Opera */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.stock-indicator { font-size: 14px; color: #333; display: flex; align-items: center; gap: 5px; }
.stock-indicator strong { font-weight: 700; }
.dot-stock { width: 8px; height: 8px; background: #2e7d32; border-radius: 50%; display: inline-block; }
/* === COLUMNA DERECHA === */
.detail-right-column {
flex: 1;
min-width: 300px;
display: flex; flex-direction: column;
justify-content: space-between;
gap: 20px;
align-self: stretch;
}
.specs-panel { border: 1px solid #eee; border-radius: 12px; background: #fff; overflow: hidden; height: 100%; display: flex; flex-direction: column; flex: 1; }
.specs-tabs { display: flex; border-bottom: 1px solid #eee; background: #fcfcfc; flex-shrink: 0; }
.tab-btn {
flex: 1; border: none; background: none; padding: 12px 5px;
font-family: "Poppins"; font-size: 13px; font-weight: 500; color: #666; cursor: pointer; border-bottom: 2px solid transparent;
}
.tab-btn.active { color: var(--color-red); border-bottom-color: var(--color-red); background: #fff; font-weight: 600; }
.specs-body-scroll { flex-grow: 1; overflow-y: auto; padding: 15px 20px; max-height: 400px; }
.spec-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f9f9f9; font-size: 13px; }
.spec-label { color: #666; font-weight: 500; }
.spec-value { color: #333; font-weight: 600; text-align: right; }
.specs-actions-footer { display: flex; justify-content: space-around; padding: 10px 20px; background: #fafafa; border-top: 1px solid #eee; flex-shrink: 0; margin-top: auto; }
.specs-actions-footer img { width: 16px; height: 16px; }
.price-buy-block {
display: flex; flex-direction: column; align-items: flex-end;
gap: 15px; margin-top: 10px;
}
.price-stack { text-align: right; }
.price-old { display: block; font-size: 13px; color: #999; text-decoration: line-through; margin-bottom: 2px; }
.price-final { display: block; font-size: 28px; font-weight: 700; color: var(--color-red); line-height: 1; }
.iva-text { display: block; font-size: 11px; color: #666; margin-top: 2px; }
.btn-buy-final { width: 100%; justify-content: center; padding: 12px; }
/* RESPONSIVIDAD */
@media (max-width: 900px) {
.product-detail-container {
flex-direction: column;
padding: 20px;
gap: 30px;
}
/* Deshabilitar zoom en tablet/mobile */
.main-product-image {
cursor: pointer;
}
.image-carousel-wrapper:hover .main-product-image {
transform: none;
}
.detail-left-column {
flex: 1;
max-width: 100%;
min-width: auto;
}
.detail-header {
text-align: center;
}
.detail-title {
font-size: 20px;
}
.gallery-container {
flex-direction: column;
max-width: 100%;
align-items: center;
}
.main-image-stack {
width: 100%;
max-width: 450px;
height: auto;
aspect-ratio: 1;
}
.image-carousel-wrapper,
.main-product-image {
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 1;
}
.brand-floating {
height: 60px;
width: 60px;
top: 12px;
left: 12px;
}
.side-thumbs-column {
flex-direction: row;
width: 100%;
height: auto;
justify-content: center;
max-width: 450px;
}
.side-thumb {
width: 80px;
height: 80px;
flex: none;
}
.left-actions-row {
max-width: 100%;
flex-direction: column;
gap: 15px;
align-items: stretch;
}
.qty-group {
justify-content: center;
}
.stock-indicator {
justify-content: center;
}
.price-buy-block {
align-items: center;
text-align: center;
width: 100%;
}
.price-stack {
text-align: center;
}
.btn-buy-final {
max-width: 450px;
}
.detail-right-column {
flex-direction: column-reverse;
}
.specs-panel {
max-height: none;
}
.specs-body-scroll {
max-height: 300px;
}
.tab-btn {
font-size: 12px;
padding: 10px 8px;
}
}
@media (max-width: 576px) {
.product-detail-container {
padding: 15px;
gap: 20px;
}
.breadcrumb {
padding: 12px 0;
font-size: 12px;
gap: 6px;
margin-bottom: 16px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.breadcrumb-item {
font-size: 12px;
}
.breadcrumb-separator {
font-size: 12px;
}
.detail-title {
font-size: 18px;
}
.detail-sku {
font-size: 12px;
}
.main-image-stack {
max-width: 100%;
}
.brand-floating {
height: 48px;
width: 48px;
top: 10px;
left: 10px;
}
.btn-nav-detalle {
width: 32px;
height: 32px;
font-size: 20px;
}
.side-thumbs-column {
gap: 8px;
max-width: 100%;
}
.side-thumb {
width: 60px;
height: 60px;
}
.left-actions-row {
gap: 12px;
}
.qty-label {
font-size: 13px;
}
.quantity-selector {
height: 32px;
}
.qty-btn {
width: 28px;
font-size: 16px;
}
.qty-input {
width: 35px;
font-size: 14px;
}
.stock-indicator {
font-size: 13px;
}
/* Asegurar que la tabla aparezca debajo del precio en mobile */
.detail-right-column {
flex-direction: column-reverse !important;
}
.specs-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
position: relative;
background: linear-gradient(to right, #fcfcfc 0%, #fcfcfc 85%, rgba(0,0,0,0.05) 100%);
}
.tab-btn {
font-size: 11px;
padding: 10px 6px;
white-space: nowrap;
min-width: 90px;
}
/* Abreviar "Referencia cruzada" a "Ref. Cruzada" en mobile */
.tab-btn:nth-child(2) {
font-size: 0;
}
.tab-btn:nth-child(2)::before {
content: "Ref. Cruzada";
font-size: 11px;
}
.specs-body-scroll {
padding: 12px 15px;
max-height: 250px;
}
.spec-row {
font-size: 12px;
flex-direction: column;
gap: 4px;
padding: 10px 0;
}
.spec-label {
font-weight: 600;
color: #333;
}
.spec-value {
text-align: left;
font-weight: 500;
}
.specs-actions-footer {
flex-direction: column;
gap: 8px;
padding: 12px 15px;
}
.specs-actions-footer .btn-text {
width: 100%;
justify-content: center;
}
.price-old {
font-size: 12px;
}
.price-final {
font-size: 24px;
}
.iva-text {
font-size: 10px;
}
.btn-buy-final {
padding: 10px;
font-size: 13px;
max-width: 100%;
}
.btn-buy-final img {
width: 18px;
height: 18px;
}
}
/* =========================================
VISTA ADMINISTRADOR / CENTRO DE CONTROL
========================================= */
/* --- Layout General --- */
.admin-body {
background-color: #f4f6f8;
margin: 0;
display: block;
}
.admin-container {
max-width: 1400px;
margin: 40px auto;
padding: 0 24px;
display: flex;
flex-direction: column;
gap: 34px;
}
/* === NAVBAR === */
.sc-navbar {
background: var(--color-white);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
padding: 12px 32px;
position: sticky;
top: 0;
z-index: 100000; /* Debe estar por encima del overlay */
}
.navbar-container {
max-width: none;
width: 100%;
margin: 0 auto;
min-height: 80px;
display: grid;
grid-template-columns: minmax(220px, auto) 1fr minmax(340px, max-content); /* brand | menu | wider user */
align-items: center;
column-gap: 28px;
transition: all 0.3s ease;
}
.nav-brand {
display: flex;
align-items: center;
gap: 15px;
flex-shrink: 0;
}
.nav-brand { margin-right: 8px; padding-right: 0; border-right: none; gap: 12px; justify-self: start; }
.nav-brand img { height: 32px; width: auto; }
.nav-brand .divider { color: #ddd; font-size: 20px; font-weight: 300; }
.nav-brand h1 { font-size: 18px; font-weight: 600; color: #333; margin: 0; white-space: nowrap; }
.nav-menu-horizontal {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 22px;
height: 100%;
overflow-x: auto; /* Permite scroll horizontal en menú si es muy largo */
min-width: 0; /* evita romper layout cuando hay muchos ítems */
justify-content: flex-start; /* alinear a la izquierda para más espacio */
}
.nav-menu-horizontal::-webkit-scrollbar { display: none; } /* Ocultar scrollbar */
.nav-menu-horizontal li { height: 100%; display: flex; align-items: center; flex-shrink: 0; }
.nav-menu-horizontal a {
text-decoration: none; color: #555; font-size: 14px; font-weight: 500;
height: 100%; display: flex; align-items: center;
border-bottom: 3px solid transparent; transition: all 0.2s;
white-space: nowrap;
}
.nav-menu-horizontal a:hover, .nav-menu-horizontal a.active {
color: var(--color-red); border-bottom-color: var(--color-red);
}
.nav-user { display: flex; align-items: center; flex-shrink: 0; gap: 12px; margin-left: 0; min-width: max-content; justify-content: flex-end; padding-left: 16px; border-left: 1px solid #eee; justify-self: end; }
.nav-toggle-admin {
display: none;
background: none;
border: none;
padding: 8px;
cursor: pointer;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
}
.nav-toggle-admin img { width: 24px; height: 24px; }
.nav-toggle-fallback { font-size: 22px; font-weight: 700; color: #252425; }
.admin-nav-overlay {
display: none;
}
@media (min-width: 769px) and (max-width: 1366px) {
.sc-navbar {
padding: 10px 16px;
}
.navbar-container {
grid-template-columns: minmax(180px, auto) minmax(0, 1fr) minmax(220px, max-content);
column-gap: 12px;
min-height: 68px;
}
.nav-menu-horizontal {
gap: 14px;
padding-bottom: 6px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: #b7b7b7 transparent;
}
.nav-menu-horizontal::-webkit-scrollbar {
display: block;
height: 6px;
}
.nav-menu-horizontal::-webkit-scrollbar-thumb {
background: #b7b7b7;
border-radius: 999px;
}
.nav-user {
padding-left: 10px;
gap: 8px;
}
}
/* === SELECTOR CLIENTE === */
.client-bar-section {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: -10px;
flex-wrap: wrap;
padding-left: 25px; /* Alinear horizontalmente con el contenido de las secciones (padding interno de .admin-section) */
padding-right: 25px; /* Mover el bloque derecho hacia la izquierda para alinear con el contenido de las secciones */
}
.client-selector-group {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap; /* Permite bajar en móviles */
justify-content: flex-end;
}
.client-selector-group label { font-size: 13px; font-weight: 500; color: #666; }
.sc-select-wrapper { position: relative; min-width: 250px; max-width: 100%; box-sizing: border-box; }
.sc-input-select {
width: 100%; padding: 8px 12px;
border: 1px solid #ccc; border-radius: 50px;
font-family: "Poppins", sans-serif; font-size: 13px;
background: #fff; cursor: pointer; outline: none;
box-sizing: border-box;
}
.sc-input-select:focus { border-color: var(--color-red); }
@media (max-width: 768px) {
.sc-select-wrapper {
min-width: auto;
max-width: 100%;
}
}
/* === TARJETA FLOTANTE - SELECTOR DE CLIENTE === */
.floating-client-card {
position: fixed;
bottom: 20px;
right: 20px;
background: #ffffff;
border: 1.5px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
padding: 16px;
max-width: 220px;
z-index: 999;
animation: slideInUp 0.3s ease-out;
transition: all 0.3s ease;
}
.floating-client-card:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
border-color: #d0d0d0;
}
.floating-client-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.floating-client-label {
font-size: 12px;
font-weight: 600;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 0;
}
.btn-close-floating {
position: absolute;
top: 8px;
right: 8px;
background: none;
border: none;
cursor: pointer;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
transition: all 0.2s ease;
padding: 0;
}
.btn-close-floating:hover {
color: #BF1823;
transform: scale(1.1);
}
@keyframes slideInUp {
from {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
/* Responsividad para tablet */
@media (max-width: 1200px) {
.floating-client-card {
max-width: 200px;
bottom: 15px;
right: 15px;
padding: 14px;
}
}
/* Responsividad para móviles - OCULTAR tarjeta flotante */
@media (max-width: 768px) {
.floating-client-card {
display: none !important;
}
}
/* === NOTIFICACIONES DEL ADMINISTRADOR - LADO IZQUIERDO === */
/* Panel lateral solo visible en móvil, oculto en PC donde se usa la modal */
@media (min-width: 769px) {
.admin-notifications-container {
display: none !important;
}
}
.admin-notifications-container {
position: fixed;
left: 20px;
top: 120px; /* Por debajo del navbar (80px min-height + 24px padding + 16px extra margen) */
max-height: calc(100vh - 160px); /* Altura máxima: ventana - navbar - margen bottom */
width: 220px; /* Mismo tamaño que tarjeta flotante */
display: flex;
flex-direction: column;
gap: 8px;
z-index: 98; /* Por debajo del navbar (z-index: 100) */
}
.admin-notifications-track {
display: flex;
flex-direction: column-reverse; /* Para que se staqueen de abajo hacia arriba */
gap: 12px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px; /* Espacio para la scrollbar */
max-height: inherit;
width: 100%;
cursor: grab;
}
.admin-notifications-mobile-bar {
display: none;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 4px 2px;
font-size: 12px;
color: #444;
}
.admin-notifications-counter {
font-weight: 600;
font-size: 12px;
}
.admin-notifications-new {
display: none;
background: #BF1823;
color: #fff;
padding: 4px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.admin-notifications-new.visible {
display: inline-flex;
align-items: center;
gap: 6px;
}
.admin-notifications-nav {
display: flex;
align-items: center;
gap: 12px;
}
.admin-notifications-handle {
display: none;
margin: 6px auto 0;
width: 48px;
height: 5px;
border-radius: 100px;
background: #bbb;
border: none;
cursor: grab;
touch-action: pan-y;
position: relative;
}
/* Área de presión invisible más grande */
.admin-notifications-handle::before {
content: '';
position: absolute;
top: -16px;
left: -28px;
right: -28px;
bottom: -16px;
/* Área invisible que capta los toques */
}
.admin-notifications-handle:active {
cursor: grabbing;
}
.admin-notifications-handle.has-new::after {
content: '';
position: absolute;
top: -6px;
right: -10px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #BF1823;
-webkit-box-shadow: 0 0 0 2px #fff;
box-shadow: 0 0 0 2px #fff;
}
.admin-notifications-nav-btn {
width: 34px;
height: 34px;
border-radius: 8px;
border: 1px solid #dcdcdc;
background: #fff;
color: #333;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
.admin-notifications-nav-btn:hover {
background: #f4f4f4;
}
.admin-notifications-nav-btn:active {
transform: translateY(1px);
}
.admin-notifications-track::-webkit-scrollbar {
width: 6px;
}
.admin-notifications-track::-webkit-scrollbar-track {
background: transparent;
}
.admin-notifications-track::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 3px;
transition: background 0.2s ease;
}
.admin-notifications-track::-webkit-scrollbar-thumb:hover {
background: #bbb;
}
/* Tarjeta de notificación */
.admin-notification-card {
background: #ffffff;
border: 1.5px solid #e8e8e8;
border-radius: 8px;
padding: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
animation: slideInFromLeft 0.3s ease-out;
transition: all 0.3s ease;
width: 100%;
flex-shrink: 0;
position: relative;
border-left: 3px solid #BF1823; /* Línea roja al lado izquierdo */
}
.admin-notification-card:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
border-color: #d0d0d0;
}
.admin-notification-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
margin-bottom: 6px;
}
.admin-notification-title {
font-weight: 600;
font-size: 12px;
color: #252425;
margin: 0;
flex: 1;
line-height: 1.3;
word-wrap: break-word;
}
.admin-notification-close {
background: none;
border: none;
cursor: pointer;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
transition: all 0.2s ease;
padding: 0;
flex-shrink: 0;
min-width: 20px;
}
.admin-notification-close:hover {
color: #BF1823;
transform: scale(1.15);
}
.admin-notification-close svg {
width: 14px;
height: 14px;
}
.admin-notification-description {
font-size: 11px;
color: #666;
margin: 0 0 8px 0;
line-height: 1.3;
word-wrap: break-word;
}
.admin-notification-actions {
display: flex;
gap: 6px;
align-items: center;
margin-bottom: 6px;
}
.admin-notification-actions .btn-primary {
flex: 1;
padding: 6px 8px;
font-size: 10px;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
background: #BF1823;
color: #fff;
transition: all 0.2s ease;
font-family: 'Poppins', sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-notification-actions .btn-primary:hover {
background: #D4646C;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(191, 24, 35, 0.2);
}
.admin-notification-actions .btn-primary:active {
background: #9b1220;
}
.admin-notification-timestamp {
font-size: 10px;
color: #999;
text-align: right;
}
@keyframes slideInFromLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideOutToLeft {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(-30px);
}
}
.admin-notification-card.removing {
animation: slideOutToLeft 0.3s ease-out forwards;
}
/* Notificación vacía */
.admin-notifications-empty {
text-align: center;
color: #999;
font-size: 11px;
padding: 12px 8px;
display: none;
}
.admin-notifications-container:not(:has(.admin-notification-card)) .admin-notifications-empty {
display: block;
}
/* Responsividad para Tablet */
@media (max-width: 1400px) {
.admin-notifications-container {
width: 200px;
left: 15px;
top: 115px;
max-height: calc(100vh - 155px);
}
.admin-notification-card {
padding: 10px;
}
.admin-notification-title {
font-size: 11px;
}
.admin-notification-description {
font-size: 10px;
}
.admin-notification-actions .btn-primary {
font-size: 9px;
padding: 5px 6px;
}
}
@media (max-width: 1200px) {
.admin-notifications-container {
width: 180px;
left: 12px;
top: 110px;
max-height: calc(100vh - 150px);
}
.admin-notification-card {
padding: 9px;
}
.admin-notification-title {
font-size: 10px;
}
.admin-notification-description {
font-size: 9px;
margin-bottom: 6px;
}
.admin-notification-close {
width: 18px;
height: 18px;
}
.admin-notification-close svg {
width: 12px;
height: 12px;
}
}
@media (max-width: 1024px) {
.admin-notifications-container {
width: 160px;
top: 105px;
max-height: calc(100vh - 145px);
}
.admin-notification-card {
padding: 8px;
}
.admin-notification-title {
font-size: 10px;
}
.admin-notification-timestamp {
font-size: 9px;
}
}
/* Responsividad para Móvil - Cambiar a bottom si es muy pequeño */
@media (max-width: 768px) {
.admin-notifications-container {
width: 100%;
left: 0;
right: 0;
top: auto;
bottom: 0;
max-height: 55vh; /* permite varias notificaciones sin tapar todo */
gap: 6px;
border-radius: 12px 12px 0 0;
padding: 10px 10px 6px;
background: #f9f9f9;
border-top: 1px solid #e0e0e0;
z-index: 98;
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
transition: transform 0.25s ease;
}
.admin-container {
padding-bottom: calc(70vh + 220px); /* gran colchón para que el carrusel quede debajo sin tapar la última tarjeta */
}
.admin-notifications-container.collapsed {
-webkit-transform: translateY(calc(100% - 44px)); /* deja solo el handle visible */
transform: translateY(calc(100% - 44px)); /* deja solo el handle visible */
}
.admin-notifications-handle {
display: block;
/* Mantener el área de presión ampliada */
}
.admin-notifications-mobile-bar {
display: flex;
}
.admin-notifications-track {
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
gap: 12px;
scroll-snap-type: x mandatory;
-webkit-scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 6px 4px 10px;
touch-action: pan-x;
}
.admin-notifications-track::-webkit-scrollbar {
height: 6px;
}
.admin-notification-card {
width: auto;
min-width: 82%;
max-width: 92%;
padding: 10px;
scroll-snap-align: start;
}
.admin-notification-title {
font-size: 12px;
}
.admin-notification-description {
font-size: 11px;
}
.admin-notification-actions .btn-primary {
font-size: 10px;
padding: 6px 8px;
}
.admin-notification-timestamp {
font-size: 10px;
}
}
/* === SECCIONES === */
.admin-section {
background: var(--color-white);
border-radius: 16px;
padding: 25px;
box-shadow: var(--shadow);
border: 1px solid #eee;
}
.section-title {
font-size: 18px; font-weight: 700; color: #333;
margin: 0 0 20px 0; padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
}
.section-header-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; /* Responsivo */
gap: 15px;
margin-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
}
.section-header-row .section-title { border: none; margin: 0; padding: 0; }
/* Ajustes responsivos globales para el panel admin */
@media (max-width: 1024px) {
.admin-container { padding: 0 16px; gap: 20px; }
.admin-section { padding: 18px; border-radius: 14px; }
.section-header-row { align-items: flex-start; gap: 12px; }
.section-header-row .section-title { font-size: 17px; }
}
@media (max-width: 768px) {
.admin-section { padding: 20px; position: relative; margin-bottom: 20px; }
.section-title {
font-size: 16px;
white-space: normal;
}
/* Section header en mobile: título izq, botón filtrar derecha */
.section-header-row {
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
.section-header-row .section-title {
font-size: 17px;
flex: 1;
border-bottom: none;
padding-bottom: 0;
line-height: 1.4;
}
.section-header-row > div,
.section-header-row > button {
width: 100%;
margin-top: 14px;
}
/* Posicionar botón filtrar a la derecha del título */
.toolbar-products .toolbar-right .btn-text,
.admin-toolbar .admin-actions .btn-text {
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
padding: 8px 12px !important;
font-size: 14px !important;
white-space: nowrap;
background-color: transparent !important;
border: none !important;
color: #575657 !important;
width: auto !important;
}
/* Ocultar el contenedor toolbar-right pero mantener el botón visible */
.toolbar-products .toolbar-right {
position: static;
width: auto;
display: contents;
}
.admin-toolbar { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; }
.admin-toolbar > div:first-child {
width: 100%;
flex-direction: row !important;
gap: 12px;
align-items: center;
}
.admin-toolbar > div:first-child .sc-select-wrapper {
flex: 1;
width: auto !important;
min-width: 0;
}
.admin-toolbar > div:first-child button {
width: auto !important;
flex-shrink: 0;
font-size: 13px;
padding: 12px 16px;
white-space: nowrap;
}
.admin-actions {
width: 100%;
flex-direction: row !important;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 18px !important;
}
.admin-actions .search-repuesto {
flex: 1 !important;
min-width: 0 !important;
max-width: 100% !important;
position: relative !important;
}
.admin-actions .btn-search-repuesto {
position: absolute !important;
right: 4px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
max-width: 32px !important;
max-height: 32px !important;
}
.admin-actions .btn-search-repuesto img {
width: 16px !important;
height: 16px !important;
object-fit: contain !important;
}
.admin-actions .results-text {
flex-shrink: 0;
white-space: nowrap;
margin: 0 !important;
font-size: 13px;
}
.admin-actions .btn-text {
flex-shrink: 0;
}
.pagination {
flex-wrap: nowrap;
gap: 3px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0 4px;
}
.page-btn {
min-width: 28px;
width: 28px;
height: 28px;
font-size: 12px;
flex-shrink: 0;
}
.page-btn.arrow img {
width: 10px !important;
}
.table-responsive { margin: 0 -8px; padding: 0 8px; }
/* Tabla de usuarios activos - ocultar última columna en mobile */
.metricas-card-content .sc-table { min-width: 420px; }
.metricas-card-content .sc-table th:nth-child(6),
.metricas-card-content .sc-table td:nth-child(6) {
display: none;
}
.metricas-card-content .sc-table th,
.metricas-card-content .sc-table td {
padding: 10px 8px;
font-size: 12px;
}
.metricas-card-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
/* Tarjeta de tiempo en plataforma para mobile */
.tiempo-plataforma-mobile {
display: block !important;
margin-top: 16px;
padding: 14px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e7e7e7;
}
.tiempo-plataforma-mobile h4 {
margin: 0 0 12px 0;
font-size: 13px;
font-weight: 600;
color: #555;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.tiempo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
background: white;
border-radius: 8px;
margin-bottom: 8px;
border: 1px solid #f0f0f0;
}
.tiempo-item:last-child {
margin-bottom: 0;
}
.tiempo-cliente {
font-weight: 500;
color: #333;
font-size: 13px;
}
.tiempo-duracion {
font-weight: 600;
color: #BF1823;
font-size: 13px;
}
/* Grid de botones 2x2 a 1 columna en móvil */
.admin-btn-grid-2x2 {
grid-template-columns: 1fr !important;
}
.admin-btn-grid-2x2 button {
white-space: nowrap !important;
font-size: 13px !important;
padding: 10px 14px !important;
line-height: 1.5;
min-height: 44px;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* SVG icons in buttons - fix color for all browsers including iOS Safari */
.btn-icon-svg {
width: 14px;
height: 14px;
margin-right: 4px;
flex-shrink: 0;
color: #BF1823;
}
.btn-secondary .btn-icon-svg {
color: #BF1823;
}
.btn-secondary .btn-icon-svg path,
.btn-secondary .btn-icon-svg circle,
.btn-secondary .btn-icon-svg rect {
stroke: #BF1823 !important;
fill: #BF1823 !important;
}
/* Desktop grid buttons default styling */
.admin-btn-grid-2x2 button {
font-size: 13px;
padding: 6px 12px;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* === INFO CLIENTE === */
.user-info-card {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Columnas automáticas */
gap: 20px;
background: #fcfcfc;
padding: 20px;
border-radius: 12px;
border: 1px solid #eee;
}
.info-item { display: flex; flex-direction: column; gap: 4px; }
.info-label { font-size: 11px; color: #888; text-transform: uppercase; font-weight: 600; }
.info-value-row {
display: flex; align-items: center; gap: 8px; font-size: 14px; color: #333; flex-wrap: wrap;
}
/* Botón Editar pequeño */
.btn-icon-edit {
background: none; border: none; cursor: pointer; padding: 0; display: flex;
}
.btn-icon-edit img { width: 14px; height: 14px; opacity: 0.6; transition: 0.2s; }
.btn-icon-edit:hover img { opacity: 1; transform: scale(1.1); }
/* Editar flota.svg - ya es color BF1823, sin filtros necesarios */
.btn-icon-edit img[src*="Editar flota.svg"] {
opacity: 0.85;
}
.btn-icon-edit:hover img[src*="Editar flota.svg"] {
opacity: 1;
}
/* Editar flota.svg en h3 de modales */
h3 img[src*="Editar flota.svg"] {
opacity: 0.85;
}
/* === TABLAS Y FILTROS === */
.admin-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap; /* Clave para responsividad */
gap: 15px;
}
.admin-actions {
display: flex;
gap: 10px;
flex-wrap: nowrap;
align-items: center;
}
/* Desktop: admin-actions en línea horizontal */
@media (min-width: 769px) {
.admin-actions .search-repuesto {
flex: 0 1 auto;
min-width: 200px;
max-width: none;
}
.admin-actions .results-text {
flex-shrink: 0;
white-space: nowrap;
}
.admin-actions .btn-text {
flex-shrink: 0;
white-space: nowrap;
}
}
/* Barra superior: selects + CTAs */
@media (max-width: 1024px) {
.client-bar-section {
flex-direction: column;
gap: 12px;
align-items: stretch;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 14px;
padding: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.client-bar-section > div { flex-wrap: wrap; }
.client-bar-section .sc-select-wrapper { width: 100%; }
.client-bar-section button { width: 100%; justify-content: center; }
.client-bar-section label { font-size: 13px; font-weight: 600; color: #333; }
}
@media (max-width: 768px) {
/* Navbar sticky siempre visible */
.sc-navbar { position: sticky; top: 0; z-index: 100000; }
/* Mostrar barra de cliente en móvil pero compacta y scrolleable */
.client-bar-section {
display: flex !important;
flex-direction: column;
gap: 10px;
padding: 12px;
margin-bottom: 16px;
}
.client-bar-section > div:first-child {
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.client-bar-section > div:first-child > div {
width: 100%;
}
.client-bar-section button {
font-size: 13px;
padding: 8px 12px;
}
/* Selector en navbar: oculto por defecto, visible solo al scrollear */
.nav-client-selector-mobile {
display: none;
align-items: center;
gap: 6px;
}
.nav-client-selector-mobile.show-mobile-selector {
display: flex !important;
}
.navbar-container { grid-template-columns: auto minmax(100px, 1fr) auto; gap: 6px; }
.nav-brand h1 { font-size: 14px; }
.nav-brand .divider { display: none; }
}
.table-responsive {
overflow-x: auto;
overflow-y: visible;
width: 100%;
margin-bottom: 20px;
border-radius: 8px;
background: transparent;
position: relative;
scrollbar-gutter: stable both-edges;
-webkit-overflow-scrolling: touch;
}
.sc-table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
background: white; /* Fondo blanco solo en la tabla */
}
.sc-table th {
text-align: left; padding: 12px 15px;
border-bottom: 2px solid #eee; color: #555; font-weight: 600; font-size: 13px;
white-space: nowrap;
position: sticky;
top: 0;
background: #fff;
z-index: 2;
}
.sc-table td {
padding: 12px 15px;
border-bottom: 1px solid #f9f9f9;
color: #333;
font-size: 13px;
vertical-align: top;
position: relative;
white-space: normal;
word-break: break-word;
}
.sc-table tr:hover {
background-color: #fafafa;
}
.sc-table tr {
height: auto;
min-height: 50px;
}
/* Congelar primera columna para no perder contexto al hacer scroll horizontal */
.sc-table th:first-child,
.sc-table td:first-child {
position: sticky;
left: 0;
background: #fff;
z-index: 3;
box-shadow: 1px 0 0 #eee;
}
/* Columna de acciones en Historial de Compras - Desktop */
#tabla-compras-admin td:nth-child(8) {
text-align: center;
}
#tabla-compras-admin td:nth-child(8) > div,
#tabla-compras-admin td:nth-child(8) > span {
display: inline-flex;
gap: 8px;
justify-content: center;
align-items: center;
}
#tabla-compras-admin td:nth-child(8) .btn-icon-edit {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
}
@media (max-width: 900px) {
.sc-table { min-width: 580px; }
.sc-table th,
.sc-table td { padding: 8px 10px; font-size: 11px; }
.table-responsive { margin: 0 -8px 16px; padding: 0 8px; }
}
/* Modo tarjetas en móvil/tablet con scroll acotado */
@media (max-width: 900px) {
.table-responsive {
overflow-x: hidden !important;
overflow-y: auto !important;
max-height: 65vh !important;
padding: 0;
margin: 0;
background: transparent;
}
#tabla-flotas-admin,
#tabla-repuestos-admin,
#tabla-facturas-admin,
#tabla-compras-admin {
min-width: 0;
border-collapse: separate;
}
#tabla-flotas-admin thead,
#tabla-repuestos-admin thead,
#tabla-facturas-admin thead,
#tabla-compras-admin thead {
display: none;
}
#tabla-flotas-admin tbody,
#tabla-repuestos-admin tbody,
#tabla-facturas-admin tbody,
#tabla-compras-admin tbody {
display: grid;
gap: 12px;
padding: 8px 10px 12px;
}
#tabla-flotas-admin tr,
#tabla-repuestos-admin tr,
#tabla-facturas-admin tr,
#tabla-compras-admin tr {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px 12px;
background: #ffffff;
border: 1px solid #e7e7e7;
border-radius: 14px;
padding: 12px 12px 10px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
/* Flotas en móvil: pares horizontal y botón editar en esquina */
#tabla-flotas-admin tr {
position: relative;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"tipo marca"
"modelo anio"
"motor patente"
"conductor favorito";
gap: 8px 12px;
padding: 16px 44px 12px 12px;
}
/* Repuestos en móvil: recomendar arriba izq, editar arriba der */
#tabla-repuestos-admin tr {
position: relative;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"reco edit"
"linea cod"
"desc codcli"
"marca precio"
"descu stock"
"fotos ficha";
gap: 8px 12px;
padding: 16px 44px 12px 12px;
}
/* Facturas en móvil: acciones flotantes y pares horizontales */
#tabla-facturas-admin tr {
position: relative;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"num fecha"
"total estado"
"archivo comp";
gap: 8px 12px;
padding: 40px 12px 12px 12px;
}
/* Compras en móvil: acciones flotantes y pares horizontales */
#tabla-compras-admin tr {
position: relative;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"id tag"
"fecha items"
"total estado";
gap: 8px 12px;
padding: 48px 12px 12px 12px;
}
#tabla-flotas-admin td,
#tabla-repuestos-admin td,
#tabla-facturas-admin td,
#tabla-compras-admin td {
border: none;
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 4px;
font-size: 13px;
color: #252425;
white-space: normal;
word-break: break-word;
}
#tabla-flotas-admin td {
align-items: flex-start;
text-align: left !important;
}
#tabla-repuestos-admin td {
align-items: flex-start;
text-align: left !important;
}
#tabla-facturas-admin td {
align-items: flex-start;
text-align: left !important;
}
#tabla-flotas-admin td:nth-child(7),
#tabla-flotas-admin td:nth-child(8) {
justify-content: flex-start;
align-items: flex-start;
text-align: left !important;
}
#tabla-flotas-admin td:nth-child(1) { grid-area: tipo; }
#tabla-flotas-admin td:nth-child(2) { grid-area: marca; }
#tabla-flotas-admin td:nth-child(3) { grid-area: modelo; }
#tabla-flotas-admin td:nth-child(4) { grid-area: anio; }
#tabla-flotas-admin td:nth-child(5) { grid-area: motor; }
#tabla-flotas-admin td:nth-child(6) { grid-area: patente; }
#tabla-flotas-admin td:nth-child(7) { grid-area: conductor; text-align: left !important; }
#tabla-flotas-admin td:nth-child(8) { grid-area: favorito; text-align: left !important; }
#tabla-repuestos-admin td:nth-child(1) { grid-area: linea; }
#tabla-repuestos-admin td:nth-child(2) { grid-area: cod; }
#tabla-repuestos-admin td:nth-child(3) { grid-area: desc; }
#tabla-repuestos-admin td:nth-child(4) { grid-area: marca; }
#tabla-repuestos-admin td:nth-child(5) { grid-area: codcli; }
#tabla-repuestos-admin td:nth-child(6) { grid-area: precio; }
#tabla-repuestos-admin td:nth-child(7) { grid-area: descu; }
#tabla-repuestos-admin td:nth-child(8) { grid-area: stock; }
#tabla-repuestos-admin td:nth-child(9) { grid-area: fotos; }
#tabla-repuestos-admin td:nth-child(10) { grid-area: ficha; }
#tabla-repuestos-admin td:nth-child(11) { grid-area: edit; }
#tabla-repuestos-admin td:nth-child(12) { grid-area: reco; }
#tabla-facturas-admin td:nth-child(1) { grid-area: num; }
#tabla-facturas-admin td:nth-child(2) { grid-area: fecha; }
#tabla-facturas-admin td:nth-child(3) { grid-area: total; }
#tabla-facturas-admin td:nth-child(4) { grid-area: estado; }
#tabla-facturas-admin td:nth-child(5) { grid-area: archivo; }
#tabla-facturas-admin td:nth-child(6) { grid-area: comp; }
#tabla-facturas-admin td:nth-child(7) { grid-area: acciones; }
#tabla-compras-admin td:nth-child(1) { grid-area: id; }
#tabla-compras-admin td:nth-child(2) { grid-area: tag; }
#tabla-compras-admin td:nth-child(3) { grid-area: fecha; }
#tabla-compras-admin td:nth-child(4) { grid-area: items; }
#tabla-compras-admin td:nth-child(5) { grid-area: total; }
#tabla-compras-admin td:nth-child(6) { grid-area: estado; }
#tabla-compras-admin td:nth-child(7) { grid-area: docs; display: none; }
#tabla-compras-admin td:nth-child(8) { grid-area: acciones; display: none; }
#tabla-flotas-admin td::before,
#tabla-repuestos-admin td::before,
#tabla-facturas-admin td::before,
#tabla-compras-admin td::before {
content: attr(data-label);
font-size: 11px;
letter-spacing: 0.3px;
text-transform: uppercase;
color: #777;
font-weight: 700;
line-height: 1.2;
}
#tabla-flotas-admin td[colspan],
#tabla-repuestos-admin td[colspan],
#tabla-facturas-admin td[colspan],
#tabla-compras-admin td[colspan] {
grid-column: 1 / -1;
text-align: center;
padding: 16px;
color: #777;
}
#tabla-flotas-admin td[colspan]::before,
#tabla-repuestos-admin td[colspan]::before,
#tabla-facturas-admin td[colspan]::before,
#tabla-compras-admin td[colspan]::before {
content: none;
}
#tabla-flotas-admin td:nth-child(1)::before { content: "Tipo de vehículo"; }
#tabla-flotas-admin td:nth-child(2)::before { content: "Marca"; }
#tabla-flotas-admin td:nth-child(3)::before { content: "Modelo"; }
#tabla-flotas-admin td:nth-child(4)::before { content: "Año"; }
#tabla-flotas-admin td:nth-child(5)::before { content: "Motor (opcional)"; }
#tabla-flotas-admin td:nth-child(6)::before { content: "Patente"; }
#tabla-flotas-admin td:nth-child(7)::before { content: "Conductor"; }
#tabla-flotas-admin td:nth-child(8)::before { content: "Favoritos"; }
#tabla-flotas-admin td:nth-child(9)::before { content: none; }
#tabla-repuestos-admin td:nth-child(11)::before { content: none; }
#tabla-repuestos-admin td:nth-child(12)::before {
content: "Recomendar";
font-size: 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
color: #777;
font-weight: 700;
line-height: 1.2;
margin-right: 8px;
}
#tabla-facturas-admin td:nth-child(7)::before { content: none; }
#tabla-flotas-admin td:nth-child(9) {
position: absolute !important;
top: 8px !important;
right: 8px !important;
padding: 0 !important;
grid-area: auto;
display: flex;
align-items: center;
justify-content: center;
}
#tabla-repuestos-admin td:nth-child(11) {
position: absolute !important;
top: 8px !important;
right: 8px !important;
padding: 0 !important;
grid-area: auto;
display: flex;
align-items: center;
justify-content: center;
}
#tabla-repuestos-admin td:nth-child(11) .btn-icon-only {
background: transparent;
padding: 6px;
}
#tabla-repuestos-admin td:nth-child(11) img {
width: 20px;
height: 20px;
}
#tabla-repuestos-admin td:nth-child(12) {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-weight: 600;
white-space: nowrap;
flex-wrap: nowrap;
}
#tabla-repuestos-admin td:nth-child(9),
#tabla-repuestos-admin td:nth-child(10) {
text-align: left !important;
align-items: flex-start;
}
#tabla-facturas-admin td:nth-child(5),
#tabla-facturas-admin td:nth-child(6) {
text-align: left !important;
align-items: flex-start;
width: 100%;
gap: 2px;
}
#tabla-facturas-admin td:nth-child(5) a,
#tabla-facturas-admin td:nth-child(6) a {
display: inline-block;
margin: 0;
}
#tabla-facturas-admin td:nth-child(7) {
position: absolute !important;
top: 8px !important;
left: 8px !important;
right: 8px !important;
padding: 0 !important;
grid-area: auto;
display: block;
width: calc(100% - 16px);
height: 24px;
z-index: 2;
}
#tabla-facturas-admin td:nth-child(7) .btn-icon-edit {
background: none;
border: none;
padding: 6px;
position: absolute;
top: 0;
cursor: pointer;
}
#tabla-facturas-admin td:nth-child(7) .btn-icon-edit[data-action="delete"] {
left: 0;
}
#tabla-facturas-admin td:nth-child(7) .btn-icon-edit[data-action="edit"] {
right: 0;
}
#tabla-facturas-admin td:nth-child(7) img {
width: 20px;
height: 20px;
opacity: 1;
}
#tabla-compras-admin td:nth-child(6) {
align-items: flex-start;
text-align: left !important;
}
#tabla-compras-admin td:nth-child(6) .btn-secondary,
#tabla-compras-admin td:nth-child(6) .btn-text {
font-size: 13px;
padding: 6px 10px;
white-space: nowrap;
}
#tabla-compras-admin td:nth-child(7) {
position: absolute !important;
top: 8px !important;
left: 8px !important;
padding: 0 !important;
grid-area: auto;
display: flex;
align-items: center;
justify-content: flex-start;
z-index: 2;
width: auto;
max-width: 50%;
}
#tabla-compras-admin td:nth-child(7)::before {
content: none !important;
}
#tabla-compras-admin td:nth-child(7) .btn-text {
font-size: 13px;
padding: 4px 8px;
white-space: nowrap;
}
#tabla-compras-admin td:nth-child(8) {
position: absolute !important;
top: 8px !important;
right: 8px !important;
padding: 0 !important;
grid-area: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 4px;
z-index: 2;
width: auto;
}
#tabla-compras-admin td:nth-child(8)::before {
content: none !important;
}
#tabla-compras-admin td:nth-child(8) .btn-icon-edit {
background: none;
border: none;
padding: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
#tabla-compras-admin td:nth-child(8) img {
width: 20px;
height: 20px;
opacity: 1;
}
#tabla-flotas-admin td:nth-child(9) .btn-icon-only {
background: transparent;
padding: 6px;
}
#tabla-flotas-admin td:nth-child(9) img {
width: 20px;
height: 20px;
}
#tabla-repuestos-admin td:nth-child(1)::before { content: "Línea"; }
#tabla-repuestos-admin td:nth-child(2)::before { content: "Cód. StarClutch"; }
#tabla-repuestos-admin td:nth-child(3)::before { content: "Descripción"; }
#tabla-repuestos-admin td:nth-child(4)::before { content: "Marca"; }
#tabla-repuestos-admin td:nth-child(5)::before { content: "Cód. Cliente"; }
#tabla-repuestos-admin td:nth-child(6)::before { content: "Precio autorizado"; }
#tabla-repuestos-admin td:nth-child(7)::before { content: "Descuento"; }
#tabla-repuestos-admin td:nth-child(8)::before { content: "Stock"; }
#tabla-repuestos-admin td:nth-child(9)::before { content: "Fotos"; }
#tabla-repuestos-admin td:nth-child(10)::before { content: "Ficha Técnica"; }
#tabla-repuestos-admin td:nth-child(11)::before { content: none; }
#tabla-repuestos-admin td:nth-child(12)::before { content: "Recomendar"; }
#tabla-repuestos-admin td:nth-child(12)::before {
white-space: nowrap;
display: inline-block;
}
#tabla-facturas-admin td:nth-child(1)::before { content: "N° Factura"; }
#tabla-facturas-admin td:nth-child(2)::before { content: "Fecha"; }
#tabla-facturas-admin td:nth-child(3)::before { content: "Total"; }
#tabla-facturas-admin td:nth-child(4)::before { content: "Estado"; }
#tabla-facturas-admin td:nth-child(5)::before { content: "Archivo"; }
#tabla-facturas-admin td:nth-child(6)::before { content: "Comprobante"; }
#tabla-facturas-admin td:nth-child(7)::before { content: none; }
#tabla-compras-admin td:nth-child(1)::before { content: "ID Pedido"; }
#tabla-compras-admin td:nth-child(2)::before { content: "TAG"; }
#tabla-compras-admin td:nth-child(3)::before { content: "Fecha"; }
#tabla-compras-admin td:nth-child(4)::before { content: "Items"; }
#tabla-compras-admin td:nth-child(5)::before { content: "Total"; }
#tabla-compras-admin td:nth-child(6)::before { content: "Estado despacho"; }
#tabla-compras-admin td:nth-child(7)::before { content: none; }
#tabla-compras-admin td:nth-child(8)::before { content: none; }
}
/* Filas con descuento */
.sc-table tr.row-descuento {
background-color: #fff9f5;
border-left: 4px solid #BF1823;
}
.sc-table tr.row-descuento:hover {
background-color: #ffe6e6;
}
/* Asegurar que la primera columna (sticky) también tenga el fondo anaranjado en descuentos */
.sc-table tr.row-descuento td:first-child {
background-color: #fff9f5;
}
.sc-table tr.row-descuento:hover td:first-child {
background-color: #ffe6e6;
}
/* Centrar verticalmente el contenido de las celdas en filas con descuento */
.sc-table tr.row-descuento td {
vertical-align: middle;
}
/* Filas con productos nuevos */
.sc-table tr.row-nuevo {
background-color: #fff6f7;
border-left: 4px solid #BF1823;
}
.sc-table tr.row-nuevo:hover {
background-color: #ffecee;
}
/* Asegurar que la primera columna (sticky) también tenga el fondo rosado en nuevos */
.sc-table tr.row-nuevo td:first-child {
background-color: #fff6f7;
}
.sc-table tr.row-nuevo:hover td:first-child {
background-color: #ffecee;
}
/* Centrar verticalmente el contenido de las celdas en filas nuevas */
.sc-table tr.row-nuevo td {
vertical-align: middle;
}
.pill-nuevo {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px;
background: #BF1823;
color: #fff;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
line-height: 1.2;
}
/* Celdas Especiales */
.action-cell { text-align: center; width: 60px; }
.badge-yes { background: #e6fffa; color: #2e7d32; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-no { background: #fff5f5; color: #c53030; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.lr-btn-ver {
display: inline-flex;
align-items: center;
gap: 6px;
color: #BF1823;
font-weight: 600;
}
.lr-btn-ver:hover { color: #8f1119; }
.lr-icon-ver {
width: 16px;
height: 16px;
display: inline-block;
background-color: #BF1823;
-webkit-mask: url('img/Ocultar%20contrase%C3%B1a.svg') center/contain no-repeat;
mask: url('img/Ocultar%20contrase%C3%B1a.svg') center/contain no-repeat;
}
.lr-btn-ver:hover .lr-icon-ver { background-color: #8f1119; }
.btn-icon-only {
background: none; border: none; cursor: pointer; padding: 6px;
display: flex; align-items: center; justify-content: center;
transition: transform 0.2s;
}
.btn-icon-only img { width: 16px; height: 16px; display: block; }
.btn-icon-only:hover { transform: scale(1.1); }
.btn-radius-16 {
border-radius: 16px !important;
padding: 4px 16px;
font-size: 12px;
height: auto;
white-space: nowrap;
}
/* Mobile: permitir que el texto se ajuste en botones */
@media (max-width: 900px) {
.btn-radius-16 {
white-space: nowrap !important;
padding: 5px 8px !important;
font-size: 11px !important;
line-height: 1.2 !important;
overflow: visible !important;
text-overflow: clip !important;
max-width: none !important;
min-width: auto !important;
width: auto !important;
letter-spacing: 0px !important;
display: inline-block !important;
}
}
/* === OFERTAS === */
.offers-upload-row { display: flex; gap: 20px; flex-wrap: wrap; }
.btn-dashed {
border: 2px dashed #ccc; background: #fafafa; color: #666;
height: 100px; width: 100%; max-width: 300px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
font-size: 13px; border-radius: 12px; cursor: pointer; transition: 0.2s;
text-align: center; padding: 10px;
}
.btn-dashed:hover { border-color: var(--color-red); color: var(--color-red); background: #fff; }
.plus-icon { font-size: 24px; margin-bottom: 5px; display: block; }
/* === DASHBOARD CUENTA (RESPONSIVO) === */
.account-dashboard {
display: flex;
gap: 30px;
margin-bottom: 30px;
flex-wrap: wrap; /* Permite que el gráfico baje en pantallas chicas */
}
.invoices-container {
flex: 2;
min-width: 300px; /* Ancho mínimo antes de encogerse */
}
.chart-container {
flex: 1;
min-width: 300px;
background: #fdfdfd; padding: 20px; border-radius: 12px; border: 1px solid #f0f0f0;
}
/* Cabecera Interna (Título + Filtros Fecha) */
.dashboard-box-header {
display: flex;
flex-direction: column;
align-items: stretch;
margin-bottom: 8px;
gap: 15px;
}
.dashboard-box-header .header-row-1 {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.dashboard-box-header h3 {
font-size: 16px;
margin: 0;
color: #333;
white-space: nowrap;
font-weight: 700;
text-align: left;
}
/* Filtros de Fecha (RESPONSIVO) */
.date-filters {
display: flex;
gap: 15px;
align-items: center;
flex-wrap: nowrap;
justify-content: flex-start;
}
.date-group {
display: flex;
align-items: center;
gap: 8px;
}
.date-group label { font-size: 12px; color: #666; font-weight: 500; white-space: nowrap; }
.sc-input-date {
border: 1px solid #ccc; border-radius: 8px; padding: 6px 10px;
font-family: "Poppins"; font-size: 12px; color: #555; outline: none; background: #fff;
min-width: 120px;
}
.estado-box .calendar-container input[type="date"] {
border: 1px solid #ccc;
border-radius: 8px;
padding: 6px 10px;
font-family: "Poppins";
font-size: 12px;
color: #555;
outline: none;
background: #fff;
min-width: 140px;
}
/* Badges Estado */
.status-badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.status-badge.paid { background: #e6fffa; color: #2e7d32; }
.status-badge.pending { background: #fff8e1; color: #f57f17; }
.status-badge.review { background: #E3F2FD; color: #1976D2; }
.status-badge.overdue { background: #ffebee; color: #c62828; }
.status-badge.cancelled { background: #f5f5f5; color: #616161; }
.status-badge.credit { background: #f0f4ff; color: #5e35b1; }
.btn-sm { padding: 4px 12px; font-size: 12px; width: auto; height: auto; border-radius: 4px; }
/* Gráfico */
.bar-chart {
display: flex; align-items: flex-end; justify-content: space-between;
height: 180px; padding-top: 20px; border-bottom: 1px solid #ccc; margin-bottom: 10px;
}
.chart-col { width: 12%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bar { width: 100%; background: #ddd; border-radius: 4px 4px 0 0; transition: height 0.5s; }
.bar.highlight { background: var(--color-red); }
.label { font-size: 10px; color: #666; margin-top: 5px; }
.chart-total { text-align: center; font-size: 14px; color: #333; margin-top: 15px; }
/* Contenedor de totales mejorado */
.totales-resumen-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 20px;
padding: 0 8px;
}
.total-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
}
.total-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.total-card.total-periodo {
border-left: 4px solid #BF1823;
}
.total-card.total-historico {
border-left: 4px solid #1976D2;
}
.total-card .total-icon {
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.total-periodo .total-icon {
background: linear-gradient(135deg, #FFE5E5 0%, #FFD0D0 100%);
color: #BF1823;
}
.total-historico .total-icon {
background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
color: #1976D2;
}
.total-card .total-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.total-card .total-label {
font-size: 13px;
font-weight: 500;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.total-card .total-value {
font-size: 24px;
font-weight: 700;
color: #333;
line-height: 1.2;
}
.total-periodo .total-value {
color: #BF1823;
}
.total-historico .total-value {
color: #1976D2;
}
/* Responsive para totales */
@media (max-width: 768px) {
.totales-resumen-container {
grid-template-columns: 1fr;
gap: 12px;
}
.total-card {
padding: 16px;
}
.total-card .total-value {
font-size: 20px;
}
}
/* Métricas de facturas (ticket promedio y tendencia) */
.facturas-metricas-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin: 0 0 30px 0;
padding: 0 4px;
margin-top: 8px;
}
.metrica-card {
background: #ffffff;
border-radius: 10px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
border: 1px solid #e8e8e8;
transition: all 0.3s ease;
}
.metrica-card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.metrica-card .metrica-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.metrica-promedio {
border-left: 3px solid #9C27B0;
}
.metrica-promedio .metrica-icon {
background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
color: #9C27B0;
}
.metrica-vencidas {
border-left: 3px solid #FF9800;
}
.metrica-vencidas .metrica-icon {
background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
color: #FF9800;
}
.metrica-vencidas .metrica-value {
color: #FF9800;
}
.metrica-tendencia {
border-left: 3px solid #4CAF50;
}
.metrica-tendencia .metrica-icon {
background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
color: #4CAF50;
}
.metrica-tendencia.tendencia-baja {
border-left-color: #BF1823;
}
.metrica-tendencia.tendencia-baja .metrica-icon {
background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
color: #BF1823;
}
.metrica-tendencia.tendencia-baja .metrica-icon svg {
transform: rotate(180deg);
}
.metrica-card .metrica-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.metrica-card .metrica-label {
font-size: 11px;
font-weight: 600;
color: #666;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.metrica-card .metrica-value {
font-size: 18px;
font-weight: 700;
color: #333;
line-height: 1.2;
}
.metrica-promedio .metrica-value {
color: #9C27B0;
}
.metrica-tendencia .metrica-value {
display: flex;
align-items: center;
gap: 6px;
}
.tendencia-texto {
font-size: 16px;
}
.tendencia-porcentaje {
font-size: 14px;
font-weight: 600;
padding: 2px 8px;
border-radius: 12px;
display: inline-block;
}
.tendencia-sube {
color: #4CAF50;
background: #E8F5E9;
}
.tendencia-baja {
color: #F44336;
background: #FFEBEE;
}
.tendencia-neutral {
color: #757575;
background: #F5F5F5;
}
/* Responsive para métricas de facturas */
@media (max-width: 768px) {
.facturas-metricas-container {
grid-template-columns: 1fr;
gap: 10px;
}
.metrica-card {
padding: 12px 14px;
}
.metrica-card .metrica-value {
font-size: 16px;
}
.tendencia-texto {
font-size: 14px;
}
}
/* Ajuste para el canvas de Total Invertido en admin */
.chart-container .bar-chart {
display: block;
padding-top: 10px;
border-bottom: none;
margin-bottom: 14px;
height: auto;
}
.chart-container .bar-chart canvas {
width: 100% !important;
height: auto !important;
min-height: 260px;
max-height: 380px;
max-width: 100%;
display: block;
}
/* Top Lists */
.top-lists-grid { display: flex; gap: 30px; flex-wrap: wrap; border-top: 1px solid #eee; padding-top: 20px; }
.top-list-box { flex: 1; min-width: 300px; }
.top-list-box h3 { font-size: 16px; margin-bottom: 15px; color: #444; }
.ranking-list { list-style: none; padding: 0; margin: 0; }
.ranking-list li {
display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f9f9f9; font-size: 13px;
}
.ranking-list li:nth-child(1) { font-weight: 600; color: var(--color-red); }
.ranking-list li.more { color: var(--text-muted); font-style: italic; cursor: pointer; justify-content: center; }
/* =========================================
MEDIA QUERIES (RESPONSIVIDAD AVANZADA)
========================================= */
/* Tablets y Laptops Pequeños (max-width: 1024px) */
@media (max-width: 1024px) {
.account-dashboard {
flex-direction: column; /* Apilar gráfico debajo de facturas */
}
.invoices-container, .chart-container {
width: 100%; /* Ocupar todo el ancho */
}
}
/* Tablets Verticales y Móviles Grandes (max-width: 768px) */
@media (max-width: 768px) {
/* Navbar Vertical */
.navbar-container {
height: auto;
grid-template-columns: auto 1fr auto;
align-items: center;
padding: 12px 16px;
gap: 12px;
position: relative; /* asegurar stacking por encima del drawer */
z-index: 2;
}
.nav-toggle-admin { display: inline-flex; }
.nav-menu-horizontal {
display: flex;
visibility: hidden;
pointer-events: none;
position: fixed;
top: 60px; /* comenzar bajo el header */
left: 0;
bottom: 0;
width: 78vw;
max-width: 320px;
background: #ffffff; /* fondo sólido para el drawer */
flex-direction: column;
gap: 0;
padding: 12px 12px 16px;
box-shadow: 4px 0 20px rgba(0,0,0,0.12);
max-height: calc(100vh - 60px);
height: calc(100vh - 60px);
overflow-y: auto;
z-index: 1; /* debajo del header dentro del navbar */
transform: translateX(-100%);
transition: none;
opacity: 0;
will-change: transform, opacity;
}
.sc-navbar.mobile-open .nav-menu-horizontal {
visibility: visible;
pointer-events: auto;
transform: translateX(0);
opacity: 1;
transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-menu-horizontal a { padding: 8px 12px; border-bottom: none !important; height: auto; line-height: 1.2; }
/* Alinear contenido a la izquierda dentro de cada link/botón del drawer */
.nav-menu-horizontal a { justify-content: flex-start; text-align: left; }
/* Ocultar bloque de usuario en topbar y mostrarlo dentro del drawer */
.navbar-container > .nav-user { display: none; }
.nav-menu-horizontal .nav-user {
display: flex;
width: 100%;
justify-content: flex-start;
border-top: 1px solid #f0f0f0;
padding: 12px 16px 8px;
gap: 10px;
background: #fff;
margin-top: auto;
}
.nav-menu-horizontal .nav-user .btn-text { padding-left: 0; }
.nav-menu-horizontal .nav-user .btn-text { justify-content: flex-start; text-align: left; width: 100%; }
.admin-nav-overlay {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0; top: 60px; /* no cubrir el header */
background: rgba(0,0,0,0.4);
z-index: 99990; /* Debajo del header y del drawer */
}
.admin-nav-overlay.visible { display: block; }
.nav-menu-horizontal li { display: block; margin: 6px 0; height: auto; align-items: initial; flex-shrink: initial; }
.nav-menu-horizontal li:first-child { margin-top: 0; }
.nav-menu-horizontal li:last-child { margin-bottom: 0; }
.nav-menu-horizontal li a { color: #252425; padding: 6px 8px; height: auto; }
/* En móvil, formatear como listado compacto tipo usuario (btn-text + subrayado animado) */
.nav-menu-horizontal a.btn-text {
color: #575657;
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
padding: 8px 12px;
font-weight: 500;
font-size: 14px;
width: 100%;
position: relative;
border-radius: 0;
justify-content: flex-start;
text-align: left;
}
.nav-menu-horizontal a.btn-text::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 0;
height: 2px;
background: transparent;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-menu-horizontal a.btn-text:hover { color: #575657; font-weight: 600; background: rgba(0,0,0,0.03); }
.nav-menu-horizontal a.btn-text:hover::after { background: var(--color-red); transform: scaleX(1); }
.nav-menu-horizontal a.btn-text.active { color: var(--color-red); font-weight: 600; }
.nav-menu-horizontal a.btn-text.active::after { background: var(--color-red); transform: scaleX(1); }
.sc-navbar.mobile-open + .admin-nav-overlay { display: block; }
/* Stackear Headers de Sección */
.section-header-row {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.admin-actions {
width: 100%;
justify-content: space-between;
}
/* Stackear Toolbar */
.admin-toolbar {
flex-direction: column;
align-items: stretch;
}
.sc-select-wrapper { width: 100%; }
}
/* Móviles (max-width: 480px) */
@media (max-width: 480px) {
.admin-container { padding: 0 15px; } /* Menos padding lateral */
/* Client bar section: stack verticalmente en pantallas pequeñas */
.client-bar-section {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.client-bar-section > div {
width: 100%;
max-width: 100%;
}
.client-bar-section button {
width: 100%;
max-width: 100%;
justify-content: center;
}
.client-bar-section .sc-select-wrapper,
.client-bar-section .sc-input-select {
width: 100%;
max-width: 100%;
}
/* Inputs fecha (Calendario) FULL WIDTH en móvil */
.date-filters {
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.date-group {
width: 100%;
flex-direction: column; /* Label arriba, input abajo */
align-items: flex-start;
}
.sc-input-date {
width: 100%; /* Input fecha ancho completo */
}
/* Ajuste de Botones en móvil */
.offers-upload-row .btn-dashed { max-width: 100%; }
.top-lists-grid { flex-direction: column; }
/* Botones de acción general a columna */
.admin-actions { flex-direction: column; }
.btn-primary, .btn-secondary { width: 100%; text-align: center; justify-content: center; }
/* Section header buttons apilados verticalmente */
.section-header-row > div { flex-direction: column; gap: 8px; }
.section-header-row button { width: 100% !important; }
.admin-toolbar > div { flex-direction: column; gap: 8px; }
.admin-toolbar button { width: 100% !important; }
.sc-select-wrapper { width: 100%; }
/* ===== MODAL VER CRUCES - RESPONSIVE FIX ===== */
#modal-ver-cruces-sistema .sc-modal-body {
padding: 12px 16px !important;
}
/* Contenedor de búsqueda en modal Ver Cruces */
#modal-ver-cruces-sistema .sc-modal-body > div:first-child {
flex-direction: column !important;
gap: 8px !important;
margin-bottom: 20px !important;
}
/* Input de búsqueda más grande y usable en móvil */
#modal-ver-cruces-sistema .search-repuesto {
flex: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 44px !important;
}
#modal-ver-cruces-sistema .input-repuesto {
font-size: 15px !important;
padding: 12px 40px 12px 14px !important;
}
#modal-ver-cruces-sistema .btn-search-repuesto {
width: 36px !important;
height: 36px !important;
right: 4px !important;
}
/* Contador de productos */
#contador-cruces {
font-size: 13px !important;
width: 100% !important;
text-align: center !important;
white-space: normal !important;
}
/* Cards de productos en la lista */
#lista-cruces-sistema .cruce-card {
padding: 14px !important;
}
/* Botón cargar más */
#btn-cargar-mas-cruces {
width: 100% !important;
padding: 14px 20px !important;
font-size: 15px !important;
}
/* ===== MODALES SECUNDARIAS (Editar aplicación, motor, chasis, etc) ===== */
#modal-editar-aplicacion .sc-modal-container,
#modal-editar-motor .sc-modal-container,
#modal-editar-chasis .sc-modal-container,
#modal-editar-ficha-tecnica .sc-modal-container,
#modal-editar-referencias .sc-modal-container,
#modal-editar-oem .sc-modal-container {
max-width: 95vw !important;
width: 95vw !important;
}
/* Grids de 2 columnas a 1 columna en modales secundarias */
#modal-editar-aplicacion .sc-modal-body > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
/* Textareas más cómodas en móvil */
#modal-editar-ficha-tecnica textarea,
#modal-editar-referencias textarea,
#modal-editar-oem textarea,
#modal-editar-chasis textarea {
font-size: 14px !important;
padding: 12px !important;
min-height: 120px !important;
}
/* Inputs más grandes en modal editar aplicación */
#modal-editar-aplicacion .sc-input {
font-size: 15px !important;
padding: 12px 14px !important;
}
}
/* =========================================
MODAL SUBIR PRODUCTOS
========================================= */
/* Overlay Oscuro */
.sc-modal-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.75); /* Opacidad 75% negro */
z-index: 120000; /* Above sticky admin nav (z-index 100000) */
display: none; /* Oculto por defecto */
justify-content: center;
align-items: center;
padding: 20px;
}
#modal-ficha-tecnica,
#modal-ficha-tecnica-edicion {
/* Debe ir por encima de cualquier otra sc-modal-overlay (120000) */
z-index: 130000 !important;
}
/* Asegurar que el modal de Reportar Incidente quede por encima del tracking modal (z-index: 999999) */
#modal-reportar-incidente {
z-index: 1400000 !important;
}
#modal-reportar-incidente .sc-modal-container {
z-index: 1400001 !important;
}
/* Asegurar que el contenedor y header/footer de Ficha Técnica queden por encima */
#modal-ficha-tecnica .sc-modal-container,
#modal-ficha-tecnica-edicion .sc-modal-container { z-index: 130001; }
#modal-ficha-tecnica .sc-modal-header,
#modal-ficha-tecnica-edicion .sc-modal-header,
#modal-ficha-tecnica .sc-modal-footer,
#modal-ficha-tecnica-edicion .sc-modal-footer { z-index: 130002; }
.sc-modal-overlay.active {
display: flex;
}
/* Contenedor Modal */
.sc-modal-container {
background: white;
width: 100%;
max-width: 900px; /* Ancho para la tabla */
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
max-height: 90vh; /* Para que no se salga en pantallas chicas */
z-index: 120001; /* Por encima de todo incluyendo navbar */
}
/* Header */
.sc-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px;
border-bottom: 1px solid #eee;
}
.sc-modal-header h3 { margin: 0; font-size: 18px; color: #333; }
.btn-close-modal {
background: none; border: none;
font-size: 24px; cursor: pointer; color: #999;
}
.btn-close-modal:hover { color: #333; }
/* Body */
.sc-modal-body {
padding: 20px 25px;
overflow-y: auto; /* Scroll si hay muchos productos */
}
/* Tabla interna de inputs */
.upload-table th { background: #f9f9f9; font-size: 12px; }
.upload-table td { padding: 8px; vertical-align: middle; }
/* Ampliar columna de Stock en tabla upload */
.upload-table td[data-label="Stock"] {
min-width: 250px;
padding: 8px 12px;
}
/* Desactivar sticky de primera columna en tablas de upload */
.upload-table td:first-child,
.upload-table th:first-child {
position: static;
left: auto;
background: #fff;
z-index: auto;
box-shadow: none;
}
.sc-input-small, .sc-select-small {
width: 100%;
padding: 10px 14px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 13px;
font-family: "Poppins";
outline: none;
}
.sc-input-small:focus, .sc-select-small:focus { border-color: var(--color-red); }
.input-linea { background-color: #f5f5f5; color: #666; cursor: default; }
/* Botón Borrar fila */
.delete-row {
color: #999; font-size: 18px; width: 24px; height: 24px; margin: 0 auto;
}
.delete-row:hover { color: var(--color-red); background: #fff5f5; border-radius: 4px; }
.modal-actions-row { margin-top: 15px; }
/* Footer */
.sc-modal-footer {
padding: 20px 25px;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Estilo Base del botón subir */
.file-upload-custom {
display: inline-block;
cursor: pointer;
position: relative;
}
.file-upload-custom input[type="file"] {
display: none; /* Oculto */
}
/* ========================
MEDIA QUERIES: MODAL RESPONSIVA
======================== */
/* Tablets y móviles (≤900px) */
@media (max-width: 900px) {
.sc-modal-overlay {
padding: 12px;
}
.sc-modal-container {
max-width: 95vw;
width: 95vw;
max-height: calc(100vh - 100px);
border-radius: 12px;
}
.sc-modal-header {
padding: 16px 20px;
}
.sc-modal-header h3 {
font-size: 16px;
}
.sc-modal-body {
padding: 16px 20px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Grids de 2 o 3 columnas → 1 columna en mobile */
.sc-modal-body > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 20px !important;
margin-bottom: 20px !important;
}
/* Específico para modal editar producto */
#modal-editar-producto .sc-modal-body > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
/* Form groups con más espacio */
#modal-editar-producto .form-group {
margin-bottom: 20px !important;
}
#modal-editar-producto .form-group label {
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
display: block;
}
#modal-editar-producto .sc-input,
#modal-editar-producto select {
width: 100%;
font-size: 14px;
padding: 10px 12px;
margin-bottom: 4px;
}
/* Footer responsive - Sin position sticky para evitar bugs */
.sc-modal-footer {
padding: 16px 20px;
flex-direction: column;
gap: 24px;
position: relative;
/* Removido position: sticky que causaba que botones aparecieran stuck en móvil */
}
/* Botón eliminar centrado y con espacio */
#modal-editar-producto .sc-modal-footer .btn-primary {
width: 100% !important;
justify-content: center !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 8px !important;
}
/* Botones del footer en columna */
.sc-modal-footer > div {
width: 100%;
flex-direction: column !important;
gap: 8px !important;
}
.sc-modal-footer > div > button {
width: 100% !important;
justify-content: center !important;
}
.sc-modal-footer > button {
width: 100% !important;
justify-content: center !important;
}
.sc-modal-footer .btn-primary,
.sc-modal-footer .btn-secondary {
width: 100%;
}
.upload-table {
width: 100%;
overflow-x: auto;
}
.upload-table th,
.upload-table td {
padding: 10px 8px;
font-size: 12px;
}
.sc-input-small,
.sc-select-small {
width: 100%;
padding: 8px 10px;
font-size: 12px;
}
}
/* Móviles (≤768px) */
@media (max-width: 768px) {
.sc-modal-overlay {
padding: 16px;
background-color: rgba(0, 0, 0, 0.85);
}
.sc-modal-container {
max-width: calc(100vw - 32px);
width: calc(100vw - 32px);
max-height: calc(100vh - 140px);
border-radius: 16px;
margin: auto;
position: relative;
top: auto;
left: auto;
right: auto;
}
.sc-modal-header {
padding: 12px 16px;
position: sticky;
top: 0;
background: white;
z-index: 120002;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.sc-modal-header h3 {
font-size: 15px;
}
.btn-close-modal {
font-size: 20px;
}
.sc-modal-body {
padding: 12px 16px;
max-height: calc(100vh - 180px);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
/* Área de scroll interna para las tarjetas de producto en mobile */
.upload-scroll-box {
max-height: 58vh;
overflow-y: auto;
padding: 8px 6px 10px;
margin: 0 -4px 14px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 12px;
box-shadow: inset 0 -8px 12px -12px rgba(0, 0, 0, 0.25);
overscroll-behavior: contain;
}
.upload-scroll-box::-webkit-scrollbar { width: 8px; }
.upload-scroll-box::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 8px; }
/* Contenedor de tabla responsive */
.sc-modal-body .table-responsive {
width: 100%;
max-width: 100%;
overflow-x: visible;
overflow-y: visible; /* evita scroll vertical interno de la tabla */
margin: 0;
padding: 0;
}
.upload-table {
width: 100%;
max-width: 100%;
display: block;
overflow-x: visible;
overflow-y: visible; /* evita scroll vertical interno */
margin: 0;
padding: 0;
box-sizing: border-box;
}
.upload-table thead {
display: none;
}
.upload-table tbody {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.upload-table tr {
display: flex;
flex-direction: column;
gap: 8px;
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 8px;
padding: 12px;
margin: 0 0 8px 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.upload-table td {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0;
font-size: 12px;
border: none;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: visible;
gap: 6px;
}
.upload-table td::before {
content: attr(data-label);
font-weight: 700;
color: #333;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.3px;
display: block;
margin-bottom: 4px;
}
/* Ocultar label vacío del botón eliminar */
.upload-table td[data-label=""]::before {
display: none;
}
.sc-input-small,
.sc-select-small {
width: 100%;
max-width: 100%;
padding: 8px 10px;
font-size: 12px;
border-radius: 6px;
box-sizing: border-box;
flex: 1;
min-width: 0;
}
/* Asegurar que los divs internos no se desborden */
.upload-table td > div {
width: 100%;
max-width: 100%;
box-sizing: border-box;
flex: 1;
min-width: 0;
}
.upload-table .upload-wrapper-bd {
width: 100%;
max-width: 100%;
box-sizing: border-box;
flex: 1;
min-width: 0;
}
/* Footer de modales en móvil - Sin position sticky para evitar que aparezcan stuck */
.sc-modal-footer {
padding: 12px 16px;
background: white;
border-top: 1px solid #eee;
flex-direction: column;
gap: 8px;
position: relative;
/* Removido position: sticky que causaba que los botones aparecieran pegados */
}
.sc-modal-footer .btn-primary,
.sc-modal-footer .btn-secondary {
width: 100%;
padding: 10px 16px;
border-radius: 12px;
font-size: 13px;
}
.upload-table {
width: 100%;
display: block;
overflow-x: visible;
margin: 0;
padding: 0;
}
.upload-table thead {
display: none;
}
.upload-table tbody {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.upload-table tr {
display: flex;
flex-direction: column;
gap: 8px;
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 8px;
padding: 12px;
margin-bottom: 8px;
margin-left: 0;
margin-right: 0;
width: 100%;
box-sizing: border-box;
}
.upload-table td {
display: flex;
align-items: center;
padding: 0;
font-size: 12px;
border: none;
width: 100%;
box-sizing: border-box;
}
.upload-table td::before {
content: attr(data-label);
font-weight: 600;
color: #666;
margin-right: 8px;
min-width: 100px;
flex-shrink: 0;
}
.sc-input-small,
.sc-select-small {
width: 100%;
max-width: 100%;
padding: 8px 10px;
font-size: 12px;
border-radius: 6px;
box-sizing: border-box;
}
/* Asegurar que los divs internos no se desborden */
.upload-table td > div {
width: 100%;
box-sizing: border-box;
}
.upload-table .upload-wrapper-bd {
width: 100%;
box-sizing: border-box;
}
/* Botón eliminar arriba en móvil, con texto "Eliminar" */
.upload-table td:last-child {
order: -1;
justify-content: flex-start;
}
.upload-table .delete-row {
width: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
margin: 0;
background: #fff5f5;
border: 1px solid #ffcdd2;
border-radius: 8px;
color: #d32f2f;
font-weight: 600;
font-size: 14px;
height: auto;
}
.upload-table .delete-row::after {
content: 'Eliminar';
margin-left: 4px;
}
.upload-table .delete-row:hover {
background: #ffebee;
}
/* Botones de fotos y ficha técnica */
.upload-table .btn-mini-upload {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.upload-table .btn-ficha-tecnica {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Overrides específicos para #tabla-productos-bd en móvil */
#tabla-productos-bd { width: 100%; max-width: 100%; display: block; overflow-x: visible; margin: 0; padding: 0; box-sizing: border-box; }
/* Anula min-width heredado de .sc-table para evitar overflow */
#tabla-productos-bd { min-width: 0 !important; }
/* Desactiva sticky de primera columna en móvil para esta tabla */
#tabla-productos-bd th:first-child,
#tabla-productos-bd td:first-child { position: static; left: auto; box-shadow: none; background: transparent; z-index: auto; }
#tabla-productos-bd thead { display: none; }
#tabla-productos-bd tbody { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; }
#tabla-productos-bd tr { display: flex; flex-direction: column; gap: 10px; background: #f9f9f9; border: 1px solid #eee; border-radius: 8px; padding: 10px; margin: 0 0 8px 0; width: 100%; max-width: 100%; box-sizing: border-box; }
#tabla-productos-bd td { display: flex; flex-direction: column; align-items: flex-start; padding: 0; font-size: 12px; border: none; width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; gap: 4px; }
#tabla-productos-bd td::before { content: attr(data-label); font-weight: 700; color: #333; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; display: block; margin: 0 0 2px 0; text-align: left; min-width: auto; }
#tabla-productos-bd td[data-label=""]::before { display: none; }
#tabla-productos-bd .sc-input-small, #tabla-productos-bd .sc-select-small { width: 100%; max-width: 100%; padding: 6px 8px; font-size: 13px; border-radius: 6px; box-sizing: border-box; flex: none; min-width: 0; }
#tabla-productos-bd td > div, #tabla-productos-bd .upload-wrapper-bd { width: 100%; max-width: 100%; box-sizing: border-box; flex: none; min-width: 0; }
#tabla-productos-bd .btn-mini-upload, #tabla-productos-bd .btn-ficha-tecnica { width: 100%; max-width: 100%; box-sizing: border-box; padding: 6px 10px; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 4px; }
#tabla-productos-bd .btn-ficha-tecnica img { width: 12px; height: 12px; }
#tabla-productos-bd .delete-row { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; margin: 0; background: #fff5f5; border: 1px solid #ffcdd2; border-radius: 8px; color: #d32f2f; font-weight: 600; font-size: 13px; height: auto; }
#tabla-productos-bd .delete-row::after { content: 'Eliminar'; margin-left: 2px; }
/* Overrides específicos para #tabla-productos-upload en móvil */
#tabla-productos-upload { width: 100%; max-width: 100%; display: block; overflow-x: visible; overflow-y: visible; margin: 0; padding: 0; box-sizing: border-box; min-width: 0 !important; }
#tabla-productos-upload thead { display: none; }
#tabla-productos-upload tbody { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; }
#tabla-productos-upload tr { display: flex; flex-direction: column; gap: 10px; background: #f9f9f9; border: 1px solid #eee; border-radius: 8px; padding: 10px; margin: 0 0 8px 0; width: 100%; max-width: 100%; box-sizing: border-box; }
#tabla-productos-upload td { display: flex; flex-direction: column; align-items: flex-start; padding: 0; font-size: 12px; border: none; width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; gap: 4px; }
#tabla-productos-upload td::before { content: attr(data-label); font-weight: 700; color: #333; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; display: block; margin: 0 0 2px 0; text-align: left; }
#tabla-productos-upload td[data-label=""]::before { display: none; }
#tabla-productos-upload .sc-input-small, #tabla-productos-upload .sc-select-small { width: 100%; max-width: 100%; padding: 6px 8px; font-size: 13px; border-radius: 6px; box-sizing: border-box; flex: none; min-width: 0; }
#tabla-productos-upload td > div, #tabla-productos-upload .upload-wrapper-bd { width: 100%; max-width: 100%; box-sizing: border-box; flex: none; min-width: 0; }
#tabla-productos-upload .btn-mini-upload, #tabla-productos-upload .btn-ficha-tecnica { width: 100%; max-width: 100%; box-sizing: border-box; padding: 6px 10px; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 4px; }
#tabla-productos-upload .btn-ficha-tecnica img { width: 12px; height: 12px; }
#tabla-productos-upload .delete-row { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; margin: 0; background: #fff5f5; border: 1px solid #ffcdd2; border-radius: 8px; color: #d32f2f; font-weight: 600; font-size: 13px; height: auto; }
#tabla-productos-upload .delete-row::after { content: 'Eliminar'; margin-left: 2px; }
/* ===== Productos Guardados (tabla -> tarjetas en móvil) ===== */
#tabla-productos-guardados { width: 100%; max-width: 100%; min-width: 0 !important; display: block; overflow-x: visible; overflow-y: visible; margin: 0; padding: 0; box-sizing: border-box; }
#tabla-productos-guardados thead { display: none; }
#tabla-productos-guardados tbody { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; }
#tabla-productos-guardados tr { display: flex; flex-direction: column; gap: 8px; background: #f9f9f9; border: 1px solid #eee; border-radius: 8px; padding: 10px; margin: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
#tabla-productos-guardados td { display: flex; flex-direction: column; align-items: flex-start; padding: 0; font-size: 12px; border: none; width: 100%; max-width: 100%; box-sizing: border-box; gap: 4px; }
#tabla-productos-guardados td::before { content: attr(data-label); font-weight: 700; color: #333; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; display: block; margin-bottom: 2px; text-align: left; }
#tabla-productos-guardados td[data-label=""]::before { display: none; }
/* Desactivar sticky de primera columna para evitar desbordes en móvil */
#tabla-productos-guardados th:first-child,
#tabla-productos-guardados td:first-child { position: static; left: auto; box-shadow: none; background: transparent; z-index: auto; }
/* Acciones arriba a la derecha en móvil */
#tabla-productos-guardados td:last-child {
order: -1;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end !important; /* sobrepone inline center */
gap: 8px;
padding: 0;
margin-bottom: 6px;
}
}
/* Apariencia del botón (Span dentro del label) */
.upload-label-text {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 50px; /* Redondeado y moderno */
font-size: 12px;
font-weight: 500;
background: #f9f9f9;
color: #555;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
min-width: 90px; /* Para evitar saltos bruscos de tamaño */
}
.file-upload-custom:hover .upload-label-text {
background: #eee;
border-color: #999;
}
/* === ESTADO DE ÉXITO (Cuando hay fotos) === */
.file-upload-custom.success .upload-label-text {
background-color: #e6fffa; /* Fondo verde suave */
color: #2e7d32; /* Texto verde oscuro */
border-color: #2e7d32; /* Borde verde */
font-weight: 600;
box-shadow: 0 2px 5px rgba(46, 125, 50, 0.15); /* Sutil sombra */
}
/* Animación pequeña al subir */
@keyframes popIn {
0% { transform: scale(0.9); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.file-upload-custom.success {
animation: popIn 0.3s ease-out;
}
/* Contenedor para alinear el botón de subir y la X de borrar */
.file-input-wrapper {
display: flex;
align-items: center;
gap: 5px;
}
/* Botón "X" para eliminar fotos seleccionadas */
.btn-delete-file {
background: #ffebee;
border: 1px solid #ffcdd2;
color: #c62828;
width: 20px;
height: 20px;
border-radius: 50%;
display: none; /* Oculto por defecto */
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0;
transition: all 0.2s;
}
.btn-delete-file:hover {
background: #c62828;
color: white;
border-color: #c62828;
}
/* Clase para mostrar la X */
.btn-delete-file.visible {
display: flex;
}
/* === ESTILOS CARGA DE ARCHIVOS AVANZADA === */
.upload-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Botón subir pequeño */
.btn-mini-upload {
display: inline-block;
cursor: pointer;
}
.btn-mini-upload input { display: none; }
.btn-mini-upload span {
display: inline-block;
padding: 4px 10px;
background: #333;
color: #fff;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
transition: 0.2s;
}
.btn-mini-upload span:hover { background: #555; }
/* Contenedor de lista de archivos */
.file-list-container {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 8px;
overflow: visible;
}
/* Chip de archivo individual */
.file-chip {
display: flex;
justify-content: space-between;
align-items: center;
background: #f0f0f0;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
border: 1px solid #ddd;
}
.file-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
color: #007bff; /* Azul link */
cursor: pointer;
text-decoration: underline;
}
.file-name:hover { color: #0056b3; }
.btn-del-file {
background: none;
border: none;
color: #c62828;
font-weight: bold;
cursor: pointer;
margin-left: 5px;
font-size: 14px;
padding: 0 4px;
}
.btn-del-file:hover { background: #ffdcdccc; border-radius: 50%; }
/* === MODAL PREVIEW === */
.preview-container {
position: relative;
max-width: 90%;
max-height: 90%;
}
.preview-container img {
max-width: 100%;
max-height: 80vh;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.btn-close-preview {
position: absolute;
top: -40px;
right: 0;
background: none;
border: none;
color: white;
font-size: 30px;
cursor: pointer;
}
/* =========================================
SECCIÓN CREAR USUARIO (ADMIN)
========================================= */
/* Estilo distintivo para la sección de crear */
.create-user-box {
border-left: 5px solid var(--color-red); /* Borde rojo a la izquierda para destacar */
margin-bottom: 25px;
background-color: #fff;
}
/* Grid para poner los inputs en fila */
.create-user-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-end; /* Alinea los inputs con el botón abajo */
}
/* Grupos de formulario */
.form-group {
flex: 1;
min-width: 200px; /* Para que bajen si la pantalla es chica */
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label {
font-size: 12px;
font-weight: 600;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Input genérico bonito */
.sc-input {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.sc-input:focus {
border-color: var(--color-red);
background-color: #fffdfd;
}
/* Select estilo consistente con inputs */
.sc-select {
width: 100%;
max-width: 280px;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
background-color: white;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
appearance: none;
-webkit-appearance: none;
-moz-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='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px;
padding-right: 36px;
}
.sc-select:focus {
border-color: var(--color-red);
background-color: #fffdfd;
}
/* Responsive: Select en mobile */
@media (max-width: 768px) {
.sc-select {
max-width: 100%;
width: 100%;
min-width: 200px;
}
}
/* =========================================
POPUP MODAL - RESPONSIVE STYLES
========================================= */
/* Notebooks y PC pequeñas (≤1024px) */
@media (max-width: 1024px) {
#modal-popup .sc-modal-container {
max-width: 85vw;
max-height: 88vh;
}
#modal-popup .sc-modal-body {
padding: 20px;
}
#modal-popup #popup-imagen-preview {
height: 180px;
}
}
/* Tablets y móviles grandes (≤900px) */
@media (max-width: 900px) {
#modal-popup .sc-modal-container {
max-width: 90vw;
max-height: 90vh;
}
#modal-popup .sc-modal-header h3 {
font-size: 17px;
}
#modal-popup .sc-modal-body {
padding: 18px;
}
#modal-popup #popup-imagen-preview {
height: 160px;
}
/* Grid de productos seleccionados a 1 columna */
#modal-popup #popup-productos-seleccionados > div {
flex-direction: column;
gap: 10px;
}
}
/* Móviles (≤768px) */
@media (max-width: 768px) {
#modal-popup .sc-modal-overlay {
padding: 12px;
}
#modal-popup .sc-modal-container {
max-width: calc(100vw - 24px);
max-height: calc(100vh - 80px);
border-radius: 12px;
}
#modal-popup .sc-modal-header {
padding: 14px 16px;
position: sticky;
top: 0;
background: white;
z-index: 120002;
}
#modal-popup .sc-modal-header h3 {
font-size: 16px;
}
#modal-popup .btn-close-modal {
font-size: 22px;
}
#modal-popup .sc-modal-body {
padding: 16px;
max-height: calc(100vh - 180px);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* Contenedor de imagen responsive */
#modal-popup #popup-imagen-preview {
height: 140px;
border-radius: 6px;
}
#modal-popup #popup-btn-eliminar-imagen {
width: 100%;
margin-top: 8px;
padding: 10px 16px;
}
/* Imagen preview en columna */
#modal-popup .sc-modal-body > div > div[style*="flex"] {
flex-direction: column !important;
gap: 8px !important;
}
/* Labels más pequeños */
#modal-popup label {
font-size: 13px !important;
}
/* Input y checkboxes responsive */
#modal-popup #popup-nombre {
font-size: 14px;
padding: 10px 12px;
}
#modal-popup #popup-activo {
width: 16px;
height: 16px;
}
/* Multiselect dropdown fullwidth */
#modal-popup .sc-multiselect-wrapper {
width: 100%;
}
#modal-popup .sc-multiselect-trigger {
padding: 10px 12px;
font-size: 13px;
}
#modal-popup .sc-multiselect-dropdown {
max-height: 60vh;
}
#modal-popup .sc-multiselect-options {
max-height: 45vh;
}
/* Productos seleccionados card más compacto */
#modal-popup #popup-productos-seleccionados > div {
padding: 10px;
gap: 8px;
}
#modal-popup #popup-productos-seleccionados img {
width: 50px !important;
height: 50px !important;
}
#modal-popup #popup-productos-seleccionados strong {
font-size: 13px;
}
#modal-popup #popup-productos-seleccionados small {
font-size: 11px;
}
/* Botón agregar productos fullwidth */
#modal-popup .btn-secondary[onclick*="abrirSelectorProductosPopup"] {
width: 100% !important;
padding: 12px !important;
font-size: 14px;
}
/* Footer sticky en mobile */
#modal-popup .sc-modal-footer {
padding: 12px 16px;
position: sticky;
bottom: 0;
background: white;
z-index: 120002;
flex-direction: row;
gap: 8px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
#modal-popup .sc-modal-footer .btn-secondary,
#modal-popup .sc-modal-footer .btn-primary {
flex: 1;
padding: 11px 16px;
font-size: 14px;
}
/* Modal selector de productos responsive */
#modal-selector-productos-popup .sc-modal-container {
max-width: calc(100vw - 24px);
max-height: calc(100vh - 100px);
}
#modal-selector-productos-popup .sc-modal-header {
padding: 14px 16px;
}
#modal-selector-productos-popup .sc-modal-header h3 {
font-size: 16px;
}
#modal-selector-productos-popup .sc-modal-body {
padding: 16px;
}
#modal-selector-productos-popup #popup-productos-buscar {
font-size: 14px;
padding: 10px 12px;
}
#modal-selector-productos-popup #popup-productos-disponibles {
max-height: 350px;
}
#modal-selector-productos-popup .sc-modal-footer {
padding: 12px 16px;
flex-direction: row;
gap: 8px;
}
#modal-selector-productos-popup .sc-modal-footer button {
flex: 1;
font-size: 14px;
}
}
/* Móviles pequeños (≤480px) */
@media (max-width: 480px) {
#modal-popup .sc-modal-container {
max-width: calc(100vw - 16px);
max-height: calc(100vh - 60px);
border-radius: 10px;
}
#modal-popup .sc-modal-header {
padding: 12px 14px;
}
#modal-popup .sc-modal-header h3 {
font-size: 15px;
}
#modal-popup .sc-modal-body {
padding: 14px;
}
#modal-popup #popup-imagen-preview {
height: 120px;
}
#modal-popup .popup-form-section {
margin-bottom: 18px !important;
}
#modal-popup .sc-modal-footer {
padding: 10px 14px;
gap: 6px;
}
#modal-popup .sc-modal-footer button {
padding: 10px 14px;
font-size: 13px;
}
/* Productos seleccionados más compacto */
#modal-popup #popup-productos-seleccionados > div {
padding: 8px;
}
#modal-popup #popup-productos-seleccionados img {
width: 45px !important;
height: 45px !important;
}
/* Modal selector productos más compacto */
#modal-selector-productos-popup .sc-modal-container {
max-width: calc(100vw - 16px);
}
#modal-selector-productos-popup #popup-productos-disponibles {
max-height: 300px;
}
/* Popup carrusel responsive */
.popup-contenedor.popup-carrusel {
width: 95% !important;
max-width: 95vw !important;
}
.popup-nav-btn {
width: 30px !important;
height: 30px !important;
font-size: 20px !important;
}
.popup-nav-btn.prev {
left: 5px !important;
}
.popup-nav-btn.next {
right: 5px !important;
}
.popup-footer {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 12px !important;
}
.popup-indicador {
align-self: flex-end !important;
}
}
/* =========================================
POPUP CARRUSEL - ESTILOS BASE
========================================= */
.popup-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 20px;
}
.popup-contenedor {
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
max-width: min(600px, 90vw);
max-height: calc(100vh - 40px);
width: 100%;
padding: 0;
overflow: auto;
position: relative;
display: flex;
flex-direction: column;
}
.popup-btn-cerrar {
position: absolute;
top: 12px;
right: 12px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10002;
transition: all 0.2s;
flex-shrink: 0;
}
.popup-btn-cerrar:hover {
background: rgba(0, 0, 0, 0.7);
transform: scale(1.1);
}
.popup-slides-wrapper {
position: relative;
width: 100%;
overflow: hidden;
flex: 1;
display: flex;
align-items: center;
min-height: 200px;
max-height: calc(100vh - 200px);
}
.popup-slides-track {
display: flex;
transition: transform 0.3s ease-in-out;
height: 100%;
align-items: center;
width: 100%;
}
.popup-slide {
flex: 0 0 100%;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
min-height: 200px;
}
.popup-imagen,
.popup-slide img {
width: 100%;
max-height: calc(100vh - 160px);
height: auto;
display: block;
cursor: pointer;
object-fit: contain;
max-width: 100%;
}
.popup-footer {
padding: 16px;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #e0e0e0;
flex-shrink: 0;
min-height: 60px;
flex-wrap: wrap;
gap: 10px;
}
.popup-checkbox-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
margin: 0;
font-size: 12px;
color: #666;
white-space: nowrap;
flex-shrink: 0;
}
.popup-indicador {
font-size: 12px;
color: #999;
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
/* Botones de navegación del carrusel de popups */
.popup-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #bf1823;
color: #fff;
font-size: 24px;
cursor: pointer;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
}
.popup-nav-btn:hover {
background: #a01622;
transform: translateY(-50%) scale(1.1);
}
.popup-nav-btn:disabled,
.popup-nav-btn[style*="opacity: 0.3"] {
opacity: 0.3 !important;
cursor: default !important;
}
.popup-nav-btn.prev {
left: 10px;
}
.popup-nav-btn.next {
right: 10px;
}
/* Responsive popup carrusel - Notebooks y pantallas medianas (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
.popup-modal-overlay {
padding: 15px;
}
.popup-contenedor {
max-width: min(550px, 85vw);
max-height: calc(100vh - 30px);
}
.popup-slide img {
max-height: calc(100vh - 140px);
}
.popup-btn-cerrar {
width: 30px;
height: 30px;
font-size: 18px;
top: 10px;
right: 10px;
}
.popup-nav-btn {
width: 34px;
height: 34px;
font-size: 22px;
}
.popup-footer {
padding: 14px;
min-height: 55px;
}
.popup-checkbox-label,
.popup-indicador {
font-size: 11px;
}
}
/* Responsive popup carrusel - Tablets */
@media (max-width: 768px) {
.popup-modal-overlay {
padding: 10px;
}
.popup-contenedor {
max-width: min(500px, 92vw);
max-height: calc(100vh - 20px);
}
.popup-slide img {
max-height: calc(100vh - 120px);
}
.popup-btn-cerrar {
width: 30px;
height: 30px;
font-size: 18px;
top: 10px;
right: 10px;
}
.popup-nav-btn {
width: 34px;
height: 34px;
font-size: 22px;
}
.popup-nav-btn.prev {
left: 8px;
}
.popup-nav-btn.next {
right: 8px;
}
.popup-footer {
padding: 14px;
min-height: 50px;
}
.popup-checkbox-label,
.popup-indicador {
font-size: 11px;
}
}
/* Responsive popup carrusel - Mobile pequeño */
@media (max-width: 480px) {
.popup-modal-overlay {
padding: 5px;
}
.popup-contenedor {
max-width: min(400px, 95vw);
max-height: calc(100vh - 10px);
border-radius: 10px;
}
.popup-slide img {
max-height: calc(100vh - 100px);
}
.popup-btn-cerrar {
width: 28px;
height: 28px;
font-size: 16px;
top: 8px;
right: 8px;
}
.popup-nav-btn {
width: 30px;
height: 30px;
font-size: 20px;
}
.popup-nav-btn.prev {
left: 5px;
}
.popup-nav-btn.next {
right: 5px;
}
.popup-footer {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 12px;
min-height: auto;
}
.popup-indicador {
align-self: flex-end;
}
.popup-checkbox-label {
font-size: 11px;
}
}
/* Responsive popup carrusel - Landscape móvil (orientación horizontal) */
@media (max-width: 896px) and (max-height: 414px) and (orientation: landscape) {
.popup-modal-overlay {
padding: 5px;
}
.popup-contenedor {
max-width: 70vw;
max-height: 95vh;
}
.popup-slides-wrapper {
max-height: calc(95vh - 120px);
min-height: 150px;
}
.popup-slide img {
max-height: calc(95vh - 120px);
}
.popup-btn-cerrar {
width: 26px;
height: 26px;
font-size: 15px;
top: 5px;
right: 5px;
}
.popup-nav-btn {
width: 28px;
height: 28px;
font-size: 18px;
}
.popup-footer {
padding: 10px 14px;
min-height: auto;
flex-direction: row;
justify-content: space-between;
}
.popup-checkbox-label,
.popup-indicador {
font-size: 10px;
}
}
/* Responsive popup carrusel - Pantallas extra pequeñas (menos de 360px) */
@media (max-width: 360px) {
.popup-modal-overlay {
padding: 3px;
}
.popup-contenedor {
max-width: 98vw;
max-height: calc(100vh - 6px);
border-radius: 8px;
}
.popup-slides-wrapper {
min-height: 180px;
max-height: calc(100vh - 140px);
}
.popup-slide img {
max-height: calc(100vh - 90px);
}
.popup-btn-cerrar {
width: 26px;
height: 26px;
font-size: 15px;
top: 6px;
right: 6px;
}
.popup-nav-btn {
width: 28px;
height: 28px;
font-size: 18px;
}
.popup-nav-btn.prev {
left: 3px;
}
.popup-nav-btn.next {
right: 3px;
}
.popup-footer {
padding: 10px;
min-height: auto;
}
.popup-checkbox-label,
.popup-indicador {
font-size: 10px;
}
}
/* Contenedor del botón (para que no se estire demasiado) */
.form-group.btn-container {
flex: 0 0 auto; /* No crecer, solo ocupar lo necesario */
min-width: auto;
}
/* =========================================
BOTÓN CERRAR SESIÓN (NAVBAR)
========================================= */
.btn-logout {
margin-left: 20px;
padding-left: 20px;
border-left: 1px solid #eee; /* Línea separadora */
color: #cc0000 !important; /* Texto rojo */
font-weight: 500;
display: flex;
align-items: center;
transition: 0.2s;
}
.btn-logout:hover {
opacity: 0.7;
background: #fff5f5; /* Fondo rojo muy suave al pasar mouse */
border-radius: 6px;
}
.btn-logout img {
height: 16px;
width: 16px;
}
/* Ajuste Responsivo */
@media (max-width: 768px) {
.create-user-grid {
flex-direction: column;
align-items: stretch;
}
.form-group.btn-container {
margin-top: 10px;
}
.nav-user {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.btn-logout {
margin-left: 0;
padding-left: 0;
border: none;
}
}
/* ============================================
RESPONSIVE NAV - MOBILE STYLES
============================================ */
/* Barra superior (navbar) - visible solo en mobile */
.navbar-mobile {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: var(--color-white);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 1001;
align-items: center;
justify-content: space-between;
padding: 0 12px;
}
.navbar-mobile.active {
display: flex;
}
/* Botón hamburguesa - a la IZQUIERDA */
.menu-toggle {
background: none;
border: none;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
order: -1;
}
.menu-toggle img {
width: 24px;
height: 24px;
object-fit: contain;
display: block;
}
/* Logo - a la DERECHA */
.navbar-mobile .logo-mobile {
height: 40px;
width: auto;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
text-align: right;
padding-right: 8px;
}
.navbar-mobile .logo-mobile img {
height: 100%;
width: auto;
object-fit: contain;
max-width: 150px;
}
/* Contenedor de acciones en navbar móvil */
.navbar-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Botones de iconos en navbar móvil */
.icon-btn {
background: none;
border: none;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
position: relative;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.icon-btn:hover {
background-color: #f5f5f5;
}
.icon-btn img {
width: 20px;
height: 20px;
object-fit: contain;
display: block;
}
/* Badges en la navbar móvil */
.icon-btn .cart-badge,
.icon-btn .notif-badge {
position: absolute;
top: 2px;
right: 2px;
background-color: #BF1823;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
}
/* Mobile nav - sidebar que se desliza */
.sidebar.mobile-open {
transform: translateX(0) !important;
visibility: visible !important;
opacity: 1 !important;
}
.sidebar {
scrollbar-width: thin;
scrollbar-color: #ddd #fff;
}
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: #fff;
}
.sidebar::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 3px;
}
/* Overlay para cerrar menú al clickear afuera */
.mobile-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 998;
pointer-events: none;
}
.mobile-overlay.active {
display: block;
pointer-events: auto;
}
/* Estilos base para sidebar en desktop */
@media (min-width: 768px) {
.sidebar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 240px !important;
height: 100vh !important;
background: var(--color-white) !important;
transform: none !important;
transition: none !important;
z-index: auto !important;
overflow-y: auto !important;
box-shadow: var(--shadow) !important;
padding: 16px !important;
visibility: visible !important;
opacity: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.sidebar .logo {
display: block !important;
}
.navbar-mobile {
display: none !important;
}
.mobile-overlay {
display: none !important;
}
}
/* Media Query para dispositivos móviles (<768px) */
@media (max-width: 767px) {
/* Mostrar barra superior en mobile */
.navbar-mobile {
display: flex;
}
/* Sidebar como panel deslizable */
.sidebar {
position: fixed;
top: 60px;
left: 0;
width: 280px;
height: calc(100vh - 60px);
background: var(--color-white);
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1000;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
padding: 16px;
visibility: hidden;
opacity: 0;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
}
/* Cuando está abierto */
.sidebar.mobile-open {
transform: translateX(0) !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ocultar logo en sidebar (se muestra en navbar) */
.sidebar .logo {
display: none !important;
}
/* User info visible */
.sidebar .user-info {
width: 100% !important;
display: block !important;
margin-bottom: 12px;
min-height: 44px;
}
.sidebar .user-info .btn-text {
font-size: 14px;
padding: 8px;
min-height: 44px;
display: flex !important;
align-items: center;
width: 100%;
}
/* Search visible */
.sidebar .search-general {
width: 100% !important;
display: flex !important;
margin: 16px 0;
height: 44px;
}
.sidebar .input-general {
font-size: 14px;
}
/* Mostrar y asegurar menú visible */
.sidebar .menu,
.sidebar .main-nav {
display: flex !important;
flex-direction: column !important;
list-style: none !important;
padding: 0 !important;
margin: 0 0 20px 0 !important;
width: 100% !important;
}
.sidebar .menu li,
.sidebar .main-nav li {
display: list-item !important;
margin: 8px 0 !important;
width: 100% !important;
}
.sidebar .menu a,
.sidebar .main-nav a {
display: flex !important;
align-items: center !important;
padding: 12px 8px !important;
font-size: 14px !important;
border-radius: 8px !important;
min-height: 44px !important;
color: inherit !important;
text-decoration: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
.sidebar .menu a:hover,
.sidebar .main-nav a:hover {
background-color: rgba(0, 0, 0, 0.05) !important;
}
.sidebar .nav-icon {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 12px !important;
color: #575657 !important; /* color base de icono en nav */
}
.sidebar .nav-text {
font-size: 14px !important;
flex: 1 !important;
margin-left: 0 !important;
color: #575657 !important; /* color base del texto en nav */
}
/* Color y visibilidad del texto del menú en mobile */
.sidebar .menu a,
.sidebar .main-nav a,
.sidebar .menu a .nav-text,
.sidebar .main-nav a .nav-text {
color: #575657 !important; /* texto base */
opacity: 1 !important;
text-indent: 0 !important;
visibility: visible !important;
display: flex !important;
}
/* Rehabilitar spans ocultados en otros breakpoints (<=1024px) */
.sidebar .menu a span,
.sidebar .main-nav a span {
display: inline-block !important;
color: #575657 !important;
opacity: 1 !important;
}
/* Estado activo en mobile: icono rojo, texto bold (color base) */
.sidebar .menu a.active .nav-icon,
.sidebar .main-nav a.active .nav-icon,
.sidebar .menu a[aria-current="page"] .nav-icon,
.sidebar .main-nav a[aria-current="page"] .nav-icon {
color: #BF1823 !important;
}
.sidebar .menu a.active .nav-text,
.sidebar .main-nav a.active .nav-text,
.sidebar .menu a[aria-current="page"] .nav-text,
.sidebar .main-nav a[aria-current="page"] .nav-text {
font-weight: 700 !important;
color: #575657 !important;
}
/* Aumentar clickeability */
.sidebar .btn-text {
padding: 10px 8px;
min-height: 44px;
font-size: 14px;
display: flex !important;
align-items: center !important;
}
/* Ajustar search en mobile */
.sidebar .search-general {
margin: 16px 0;
height: 44px;
width: 100%;
}
.sidebar .input-general {
font-size: 14px;
}
/* Footer visible y accesible */
.sidebar .sidebar-footer {
padding-top: 12px;
margin-top: auto;
font-size: 12px;
width: 100% !important;
display: block !important;
border-top: 1px solid #E0E0E0;
}
.sidebar .sidebar-footer .btn-text,
.sidebar .sidebar-footer .footer-link {
padding: 8px 0;
font-size: 12px;
min-height: 40px;
display: flex !important;
align-items: center;
justify-content: flex-start;
width: 100%;
margin-bottom: 4px;
}
.sidebar .sidebar-footer p {
font-size: 11px;
line-height: 1.4;
margin-top: 8px;
}
/* Main content ajustado */
.main-content {
margin-left: 0;
margin-top: 60px;
padding: 16px;
}
.page-container {
padding: 16px;
}
/* Dashboard (estado de la cuenta) en mobile */
main.dashboard {
padding: 0;
gap: 16px;
}
.dashboard section.estado-box {
margin-bottom: 16px !important;
padding: 16px !important;
border-radius: 12px !important;
}
/* Header responsivo en mobile */
.main-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
}
.header-left {
width: 100%;
}
.header-left h1 {
font-size: 18px;
}
.header-actions {
width: 100%;
flex-wrap: wrap;
gap: 6px;
}
.header-actions .btn-primary {
flex: 1;
min-width: 150px;
font-size: 12px;
padding: 8px 12px;
}
.header-actions .btn-text {
font-size: 12px;
padding: 6px 12px;
}
.header-actions .icon-left img,
.header-actions .icon-right img {
width: 18px;
height: 18px;
}
/* Ocultar botones de header (notificaciones, carrito, ayuda) en mobile */
/* Aparecen en la navbar móvil en su lugar */
.header-actions .btn-text {
display: none;
}
/* Reducir tamaño de iconos en header actions */
.btn-text img {
width: 18px;
height: 18px;
}
/* Ajustes para carrusel en mobile */
.carousel-page {
grid-template-columns: repeat(1, 1fr);
gap: 12px;
}
/* Botones del carrusel menos visibles */
.carousel-btn {
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
font-size: 18px;
}
/* Carrusel de grupos de flotas: 2x2 en mobile */
.carousel-grupos .carousel-page {
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: repeat(2, 1fr) !important;
gap: 12px;
}
/* Ajustar el tamaño de las tarjetas en el carrusel */
.carousel-grupos .vehicle-group-card {
min-height: 200px;
}
.carousel-grupos .group-image-container {
height: 120px;
}
.carousel-grupos .group-brand-logo {
max-height: 30px;
}
.carousel-grupos .group-title {
font-size: 14px;
}
.carousel-grupos .group-count {
font-size: 12px;
}
/* Secciones con mejor spacing */
.section-header {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
position: relative;
}
/* H2 y filtrar en la misma fila - Grid Row 2 */
.section-header h2 {
font-size: 16px;
margin: 0;
grid-row: 2;
grid-column: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
}
/* Controles aparecen PRIMERO - Grid Row 1 */
.section-actions {
width: 100%;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
grid-row: 1;
grid-column: 1;
}
/* Controles centrados (select, botones, search) */
.section-actions > *:not(#btn-filtrar-grupos) {
width: 100%;
max-width: 400px;
}
/* Botón filtrar posicionado junto al h2 */
.section-actions #btn-filtrar-grupos {
position: absolute;
right: 12px;
bottom: 0;
margin: 0;
padding: 8px 12px;
}
/* Botones en mobile más grandes para mejor interacción */
.btn-primary,
.btn-secondary,
.btn-primary-left {
min-height: 44px;
font-size: 14px;
padding: 10px 16px;
}
/* Forzar una sola línea en botones en mobile y ajustar tamaño */
.btn-primary,
.btn-secondary,
.btn-primary-left,
.btn-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: clamp(11px, 3.6vw, 14px);
line-height: 1.1;
}
/* También en footers de modales (mismo criterio) */
.sc-modal-footer .btn-primary,
.sc-modal-footer .btn-secondary {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: clamp(11px, 3.4vw, 13px);
line-height: 1.1;
}
/* Select boxes más grandes */
select {
min-height: 44px;
font-size: 14px;
padding: 8px 12px;
}
/* Input fields más grandes */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
.input-general,
.input-patente {
min-height: 44px;
font-size: 14px;
}
/* Asegurar que los elementos no sean muy pequeños */
.icono-header {
width: 28px;
height: 28px;
}
/* Mejorar spacing en listas */
.listado-tabla {
overflow-x: auto;
}
/* Tablas responsivas */
.sc-table th,
.sc-table td {
padding: 10px 8px;
font-size: 12px;
}
/* Modal/Overlay en mobile */
.modal-flota {
width: 95vw;
max-height: 90vh;
border-radius: 12px;
}
.modal-flota-header {
padding: 12px 16px;
}
.modal-flota-title {
font-size: 14px;
}
.modal-flota-body {
padding: 12px 16px;
max-height: calc(90vh - 120px);
overflow-y: auto;
}
/* Modal editar vehículo específica para mobile */
.modal-grande-editar {
max-width: 95vw !important;
width: 95vw !important;
max-height: 90vh !important;
overflow: hidden !important;
}
.modal-grande-editar .modal-flota-body {
padding: 16px 12px !important;
max-height: calc(90vh - 60px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
gap: 16px !important;
}
.modal-grande-editar .modal-listados-row {
flex-direction: column !important;
gap: 16px !important;
}
.modal-grande-editar .listado-modal {
width: 100% !important;
max-width: 100% !important;
}
.modal-grande-editar .modal-flota-header {
padding: 12px 16px !important;
}
.modal-grande-editar input,
.modal-grande-editar select,
.modal-grande-editar button {
font-size: 14px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* Media Query para tablets (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
/* En tablets, el sidebar sigue visible pero con ancho reducido */
.sidebar {
width: 200px;
}
.main-content {
margin-left: 200px;
}
.logo img {
width: 120px;
}
.menu a {
font-size: 13px;
gap: 12px;
}
.nav-icon {
width: 20px;
height: 20px;
}
}
/* Media Query para pantallas muy pequeñas (< 375px) */
@media (max-width: 374px) {
.navbar-mobile {
height: 56px;
padding: 0 12px;
}
.navbar-mobile .logo-mobile img {
height: 32px;
}
.menu-toggle img {
width: 20px;
height: 20px;
}
.main-content {
margin-top: 56px;
padding: 12px;
}
.page-container {
padding: 12px;
}
.header-left h1 {
font-size: 16px;
}
.header-actions {
gap: 4px;
}
.btn-primary,
.btn-secondary,
.btn-text {
font-size: 12px;
padding: 8px 12px;
}
.section-header h2 {
font-size: 14px;
}
}
/* Checkbox de "Recomendar" en admin con color corporativo */
.admin-recomendado-toggle {
accent-color: #BF1823;
width: 18px;
height: 18px;
}
/* ========================================
LOADING SCREEN
======================================== */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(238, 238, 238, 0.95);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 150000;
opacity: 1;
transition: opacity 0.3s ease;
}
.loading-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(191, 24, 35, 0.1);
border-top-color: var(--color-red);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.loading-text {
margin-top: 20px;
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--text-muted);
}
.loading-progress-container {
margin-top: 20px;
width: 300px;
text-align: center;
}
.loading-progress-bar {
width: 100%;
height: 8px;
background: rgba(191, 24, 35, 0.1);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.loading-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-red) 0%, #d91828 100%);
border-radius: 10px;
transition: width 0.4s ease;
box-shadow: 0 0 10px rgba(191, 24, 35, 0.5);
}
.loading-progress-text {
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--color-red);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ========================================
SKELETON LOADING — LISTA DE PRODUCTOS
======================================== */
@keyframes shimmer {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
/* Base skeleton cell: animated shimmer strip */
.skeleton-cell {
display: inline-block;
border-radius: 4px;
height: 14px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
background-size: 600px 100%;
animation: shimmer 1.4s ease infinite;
}
/* Cell padding for skeleton rows */
#tbody-productos .skeleton-tr td {
vertical-align: middle;
padding: 10px 14px;
border-bottom: 1px solid #f2f2f2;
}
/* Width/height variants */
.skeleton-badge { height: 22px; width: 80px; border-radius: 12px; }
.skeleton-code { width: 85px; }
.skeleton-text { width: 155px; }
.skeleton-text-sm { width: 65px; }
.skeleton-price { height: 18px; width: 75px; }
.skeleton-stock { width: 30px; }
.skeleton-actions { height: 26px; width: 110px; border-radius: 6px; }
/* -------- Skeleton: tarjetas de grupo de flotas -------- */
.skeleton-group-card {
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
display: flex;
flex-direction: column;
min-height: 220px;
}
.skeleton-group-card .sk-img {
width: 100%;
height: 150px;
display: block;
border-radius: 0;
}
.skeleton-group-card .sk-info {
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* -------- Skeleton: vehicle-card (favoritos) -------- */
.skeleton-vehicle-card {
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 200px;
flex-shrink: 0;
}
/* -------- Skeleton: card-producto-detalle (carruseles de recomendados) -------- */
.skeleton-product-detalle {
flex: 0 0 calc((100% - 72px) / 4);
max-width: calc((100% - 72px) / 4);
aspect-ratio: 1/1;
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
border: 1px solid #f0f0f0;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-shrink: 0;
}
@media (max-width: 1024px) {
.skeleton-product-detalle { flex: 0 0 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); }
}
@media (max-width: 700px) {
.skeleton-product-detalle { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); aspect-ratio: auto; min-height: 200px; }
.skeleton-vehicle-card { flex: 0 0 calc(50% - 8px); }
}
/* -------- Skeleton: sc-card (categorias products grid) -------- */
.skeleton-sc-card {
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
display: flex;
flex-direction: column;
gap: 12px;
min-height: 320px;
}
/* -------- Skeleton: purchase-card (mis compras) -------- */
.skeleton-purchase-card {
background: #F5F5F5;
border-radius: 16px;
padding: 18px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 16px;
}
/* -------- Skeleton: banner slides (ofertas) -------- */
.skeleton-banner-slide {
width: 100%;
border-radius: 12px;
flex-shrink: 0;
}
.skeleton-banner-slide-sm {
flex: 0 0 calc(50% - 8px);
height: 140px;
border-radius: 10px;
display: inline-block;
flex-shrink: 0;
}
/* Mobile: rows become cards (mirrors the real table card layout) */
@media (max-width: 768px) {
#tbody-productos .skeleton-tr {
display: block;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 14px;
padding: 16px;
margin-bottom: 10px;
box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
#tbody-productos .skeleton-tr td {
display: block;
padding: 5px 0;
border: none;
}
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* ========================================
PDF GENERATOR MODAL
======================================== */
.pdf-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 110000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.pdf-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.pdf-modal-content {
background: #FFFFFF;
border-radius: 20px;
padding: 50px 60px;
text-align: center;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
transform: scale(0.9) translateY(20px);
transition: transform 0.3s ease;
max-width: 400px;
width: 90%;
}
.pdf-modal-overlay.active .pdf-modal-content {
transform: scale(1) translateY(0);
}
.pdf-modal-spinner {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 30px;
}
.spinner-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 4px solid rgba(179, 27, 27, 0.15);
border-top-color: #B31B1B;
border-radius: 50%;
animation: pdfSpin 1s linear infinite;
}
.spinner-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
object-fit: contain;
animation: pdfPulse 1.5s ease-in-out infinite;
}
@keyframes pdfSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes pdfPulse {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
.pdf-modal-title {
font-family: 'Poppins', sans-serif;
font-size: 22px;
font-weight: 600;
color: #333333;
margin: 0 0 10px 0;
}
.pdf-modal-text {
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #666666;
margin: 0 0 25px 0;
}
.pdf-progress-container {
width: 100%;
height: 6px;
background: #E8E8E8;
border-radius: 10px;
overflow: hidden;
}
.pdf-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #B31B1B, #D93636);
border-radius: 10px;
transition: width 0.3s ease;
}
/* =========================== MODAL DE CARGA OC (INDEPENDIENTE) =========================== */
.oc-pdf-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 110000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.oc-pdf-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.oc-pdf-modal-content {
background: #FFFFFF;
border-radius: 20px;
padding: 50px 60px;
text-align: center;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
transform: scale(0.9) translateY(20px);
transition: transform 0.3s ease;
max-width: 400px;
width: 90%;
}
.oc-pdf-modal-overlay.active .oc-pdf-modal-content {
transform: scale(1) translateY(0);
}
.oc-pdf-modal-spinner {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 30px;
}
.oc-pdf-modal-title {
font-family: 'Poppins', sans-serif;
font-size: 22px;
font-weight: 600;
color: #333333;
margin: 0 0 10px 0;
}
.oc-pdf-modal-text {
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #666666;
margin: 0 0 25px 0;
}
.oc-pdf-progress-container {
width: 100%;
height: 6px;
background: #E8E8E8;
border-radius: 10px;
overflow: hidden;
}
.oc-pdf-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #B31B1B, #D93636);
border-radius: 10px;
transition: width 0.3s ease;
}
/* =========================== PANEL DE NOTIFICACIONES =========================== */
.notif-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
z-index: 9998;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.notif-overlay.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.notif-panel {
position: fixed;
top: 0;
right: 0;
width: 430px;
max-width: 95vw;
height: auto;
max-height: 90vh;
background: #fff;
box-shadow: none;
z-index: 9999;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.35s, box-shadow 0s 0.35s;
display: flex;
flex-direction: column;
overflow: hidden;
}
.notif-panel.open {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.35s, box-shadow 0s 0s;
}
.notif-header {
background: #fff;
color: #252425;
padding: 20px 24px 16px;
border-bottom: 1px solid #e8e8e8;
}
.notif-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
color: #252425;
}
.notif-close {
background: none;
border: none;
color: #666;
font-size: 28px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s;
line-height: 1;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.notif-close:hover {
opacity: 1;
}
.notif-tabs {
display: flex;
padding: 0 24px;
gap: 0;
border-bottom: 1px solid #e8e8e8;
background: #fff;
align-items: center;
justify-content: space-between;
}
.notif-tabs-left {
display: flex;
gap: 24px;
}
.notif-tab {
background: none;
border: none;
font-size: 14px;
font-weight: 500;
color: #666;
cursor: pointer;
padding: 12px 0;
border-bottom: 2px solid transparent;
transition: all 0.2s;
position: relative;
}
.notif-tab:hover {
color: #252425;
}
.notif-tab.active {
color: #252425;
border-bottom-color: #252425;
font-weight: 600;
}
.notif-tab-count {
color: #666;
font-weight: 400;
margin-left: 4px;
}
.notif-tab.active .notif-tab-count {
color: #252425;
}
#marcar-todas-vistas {
background: none;
border: none;
color: #BF1823;
font-size: 13px;
font-weight: 500;
cursor: pointer;
padding: 12px 0;
text-decoration: none;
}
#marcar-todas-vistas:hover {
text-decoration: underline;
}
.notif-body {
flex: 1;
overflow-y: auto;
padding: 0;
background: #fafafa;
}
.notif-group-title {
font-size: 11px;
color: #999;
padding: 16px 24px 8px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.5px;
background: #fafafa;
}
.notif-list {
list-style: none;
margin: 0;
padding: 0;
}
.notif-item {
display: flex;
gap: 12px;
padding: 16px 24px;
background: #fff;
border-bottom: 1px solid #f0f0f0;
transition: background 0.15s;
cursor: pointer;
align-items: flex-start;
position: relative;
}
.notif-item:hover {
background: #f8f8f8;
}
.notif-item:hover .notif-delete-btn {
opacity: 1;
visibility: visible;
}
.notif-item.no-leida {
background: #fff;
}
.notif-item.leida {
opacity: 0.65;
}
.notif-item.leida .notif-link {
opacity: 1;
color: #BF1823;
font-weight: 500;
}
.notif-icon-container {
width: 56px;
height: 56px;
border-radius: 50%;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
border: 1px solid #e8e8e8;
}
.notif-icon-container img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8px;
}
.notif-content {
flex: 1;
min-width: 0;
}
.notif-title {
font-size: 15px;
font-weight: 600;
color: #252425;
margin: 0 0 4px 0;
line-height: 1.4;
}
.notif-message {
font-size: 13px;
color: #666;
margin: 0 0 8px 0;
line-height: 1.5;
}
.notif-product-details {
display: flex;
gap: 8px;
margin: 8px 0;
flex-wrap: wrap;
}
.notif-detail-text {
font-size: 12px;
color: #888;
}
.notif-link {
font-size: 13px;
color: #BF1823 !important;
font-weight: 500;
text-decoration: underline;
display: inline-block;
margin-top: 4px;
opacity: 1 !important;
}
.notif-link:hover {
color: #881119 !important;
text-decoration: underline;
}
.notif-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.notif-time {
font-size: 11px;
color: #999;
white-space: nowrap;
}
.notif-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ccc;
flex-shrink: 0;
}
.notif-indicator.no-leida {
background: #BF1823;
}
.notif-indicator.leida {
background: #ccc;
}
.notif-delete-btn {
position: absolute;
bottom: 12px;
right: 12px;
background: none;
border: none;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #999;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
padding: 0;
z-index: 10;
}
.notif-delete-btn:hover {
background: #ffebee;
color: #BF1823;
transform: scale(1.1);
}
.notif-delete-btn:active {
transform: scale(0.95);
}
.notif-delete-btn svg {
display: block;
}
.notif-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 40px;
text-align: center;
background: #fff;
}
.notif-empty-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.notif-empty-icon img {
width: 40px;
height: 40px;
opacity: 0.3;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.notif-empty h4 {
margin: 0 0 8px 0;
font-size: 16px;
font-weight: 600;
color: #252425;
}
.notif-empty p {
margin: 0;
font-size: 13px;
color: #999;
line-height: 1.5;
}
/* Responsive */
@media (max-width: 500px) {
.notif-panel {
width: 100%;
max-height: 100vh;
height: 100vh;
}
.notif-tabs {
gap: 8px;
padding: 10px 16px;
flex-wrap: wrap;
}
.notif-tab {
font-size: 13px;
padding: 8px 0;
}
#marcar-todas-vistas {
font-size: 12px;
padding: 8px 0;
}
/* En mobile, el botón X siempre está visible */
.notif-delete-btn {
opacity: 1 !important;
visibility: visible !important;
}
/* El hover en mobile no cambia nada (ya está visible) */
.notif-item:hover .notif-delete-btn {
opacity: 1 !important;
visibility: visible !important;
}
}
.notif-icon-producto img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* =========================== PANEL DE CARRITO =========================== *//* =========================== PANEL DE CARRITO =========================== */
.cart-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
z-index: 9998;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cart-overlay.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.cart-panel {
position: fixed;
top: 0;
right: 0;
width: 420px;
max-width: 95vw;
height: auto;
max-height: 90vh;
background: #fff;
border-radius: 0 0 0 16px;
box-shadow: none;
z-index: 9999;
transform: translateY(-100%);
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0s 0.35s;
display: flex;
flex-direction: column;
overflow: hidden;
}
.cart-panel.open {
transform: translateY(0);
box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.15);
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0s 0s;
}
.cart-header {
background: #575657;
color: #fff;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 12px;
justify-content: space-between;
}
.cart-header-close {
background: none;
border: none;
color: #fff;
font-size: 20px;
font-weight: bold;
cursor: pointer;
padding: 0;
line-height: 1;
transition: opacity 0.2s;
}
.cart-header-close:hover {
opacity: 0.8;
}
.cart-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
flex: 1;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
.cart-close {
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.cart-close:hover {
opacity: 1;
}
.cart-count {
padding: 12px 20px;
border-bottom: 1px solid #e0e0e0;
font-size: 15px;
color: #252425;
}
.cart-count strong {
font-weight: 600;
}
.cart-body {
flex: 1;
overflow-y: auto;
padding: 0;
max-height: 350px;
}
.cart-list {
list-style: none;
margin: 0;
padding: 0;
}
.cart-item {
display: flex;
gap: 14px;
padding: 16px 20px;
border-bottom: 1px solid #f0f0f0;
align-items: center;
}
.cart-item-img {
width: 70px;
height: 70px;
border-radius: 8px;
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.cart-item-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.cart-item-info {
flex: 1;
min-width: 0;
}
.cart-item-name {
font-size: 14px;
font-weight: 500;
color: #252425;
margin: 0 0 10px 0;
line-height: 1.3;
}
.cart-item-qty {
display: flex;
align-items: center;
gap: 8px;
}
.cart-item-qty span {
font-size: 14px;
color: #666;
}
.cart-qty-btn {
width: 28px;
height: 28px;
border-radius: 6px;
border: none;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.cart-qty-btn.minus {
background: #BF1823;
color: #fff;
}
.cart-qty-btn.minus:hover {
background: #a3141d;
}
.cart-qty-btn.plus {
background: #fff;
border: 2px solid #BF1823;
color: #BF1823;
}
.cart-qty-btn.plus:hover {
background: #fff5f5;
}
.cart-qty-value {
font-size: 15px;
font-weight: 600;
color: #252425;
min-width: 24px;
text-align: center;
}
.cart-item-delete {
background: none;
border: none;
cursor: pointer;
padding: 8px;
position: relative;
}
.cart-item-delete:hover {
transform: scale(1.05);
}
.cart-item-delete img {
width: 22px;
height: 22px;
opacity: 0.5;
transition: opacity 0.2s ease;
}
.cart-item-delete:hover img {
opacity: 0;
}
/* Icono rojo que aparece en hover */
.cart-item-delete::after {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 22px;
height: 22px;
background-image: url('../img/Delete.svg');
background-size: contain;
background-repeat: no-repeat;
-webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4735%) hue-rotate(351deg) brightness(89%) contrast(96%);
filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4735%) hue-rotate(351deg) brightness(89%) contrast(96%);
opacity: 0;
transition: opacity 0.2s ease;
}
.cart-item-delete:hover::after {
opacity: 1;
}
.cart-footer {
padding: 16px 20px;
border-top: 1px solid #e0e0e0;
background: #fff;
}
.cart-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.cart-btn-primary {
background: var(--color-red);
color: var(--color-white);
border: none;
padding: 8px 16px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
cursor: pointer;
font-family: "Poppins", sans-serif;
font-size: 14px;
transition: background 0.2s;
}
.cart-btn-primary:hover {
background: var(--color-red-hover);
}
.cart-btn-primary:active {
background: var(--color-red-active);
}
.cart-btn-secondary {
background: var(--color-white);
color: var(--color-red);
border: 1.5px solid var(--color-red);
padding: 8px 16px;
gap: 16px;
border-radius: 16px;
justify-content: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
font-family: "Poppins", sans-serif;
transition: all 0.2s;
}
.cart-btn-secondary:hover {
border-color: var(--color-red-hover);
color: var(--color-red-hover);
}
.cart-total {
font-size: 16px;
color: #252425;
margin-bottom: 12px;
}
.cart-total strong {
color: var(--color-red);
font-weight: 700;
}
.cart-total span {
font-size: 13px;
color: #666;
font-weight: 400;
}
.cart-link {
display: block;
text-align: center;
font-size: 14px;
color: #575657;
text-decoration: underline;
cursor: pointer;
}
.cart-link:hover {
color: var(--color-red);
}
/* Estilos adicionales de items del carrito */
.cart-item-img {
position: relative;
}
.cart-item-discount {
position: absolute;
top: -5px;
left: -5px;
background: var(--color-red);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 2px 5px;
border-radius: 4px;
}
.cart-item-sku {
font-size: 12px;
color: #888;
margin: 0 0 6px 0;
}
.cart-item-price-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.cart-item-price-old {
font-size: 12px;
color: #999;
text-decoration: line-through;
}
.cart-item-price {
font-size: 14px;
font-weight: 600;
color: var(--color-red);
}
.cart-qty-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Toast de notificación del carrito */
.cart-toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: #333;
color: #fff;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
z-index: 99999;
opacity: 0;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.cart-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.cart-toast-success {
background: #28a745;
}
.cart-toast-error {
background: #dc3545;
}
.cart-toast-info {
background: #575657;
}
.cart-toast-warning {
background: #ff9800;
}
/* Botón carrito en tabla de repuestos */
.btn-carrito-tabla {
transition: all 0.2s ease;
}
.btn-carrito-tabla:hover {
background: #fff5f5 !important;
border-radius: 8px;
}
.btn-carrito-tabla img {
transition: transform 0.2s ease;
}
.btn-carrito-tabla:hover img {
transform: scale(1.1);
}
/* Estado vacío del carrito */
.cart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 20px;
text-align: center;
}
.cart-empty-icon {
width: 80px;
height: 80px;
background: #f5f5f5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.cart-empty-icon img {
width: 40px;
height: 40px;
opacity: 0.4;
}
.cart-empty h4 {
margin: 0 0 8px 0;
font-size: 16px;
color: #333;
}
.cart-empty p {
margin: 0;
font-size: 14px;
color: #888;
line-height: 1.5;
}
/* Responsive carrito */
@media (max-width: 500px) {
.cart-panel {
width: 100%;
border-radius: 0;
max-height: 85vh;
}
.cart-item {
padding: 12px 16px;
gap: 10px;
}
.cart-item-img {
width: 60px;
height: 60px;
}
.cart-btn-primary,
.cart-btn-secondary {
padding: 10px 16px;
font-size: 14px;
}
}
/* === BADGE DEL CARRITO === */
.cart-badge {
position: absolute;
top: -2px;
left: -2px;
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
background-color: #BF1823;
color: white;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
border: 1px solid white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* === BADGE DE NOTIFICACIONES === */
.notif-badge {
position: absolute;
top: -2px;
left: -2px;
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
background-color: #BF1823;
color: white;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
border: 1px solid white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Animación de respiración para notificaciones nuevas */
@keyframes notifBadgeBreathing {
0%, 100% {
transform: scale(1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
50% {
transform: scale(1.2);
box-shadow: 0 0 8px rgba(191, 24, 35, 0.6);
}
}
.notif-badge-breathing {
animation: notifBadgeBreathing 1.2s ease-in-out infinite !important;
}
/* ============================================
ESTILOS MODAL DE NOTIFICACIONES ADMIN (PC)
============================================ */
/* === ESTILOS MODAL DE NOTIFICACIONES ADMIN (PC) === */
/* Modal de notificaciones - Abierta por defecto en PC */
.admin-notifications-modal {
position: fixed;
top: 108px; /* Debajo del navbar */
left: 0; /* sin margen a la izquierda */
width: 280px;
max-height: calc(100vh - 108px); /* limitar al alto visible de la pantalla */
background: white;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
z-index: 100000;
overflow: hidden;
transition: all 0.3s ease;
display: none; /* Oculto por defecto, se muestra con JS */
flex-direction: column; /* para que el body flex:1 funcione cuando se muestre */
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.admin-notifications-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #575657; /* gris corporativo */
color: white;
border-radius: 12px 12px 0 0;
}
.admin-notifications-modal-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
}
/* Badge en el header de la modal - posición relativa */
.admin-notifications-modal-header .notif-badge {
position: relative;
top: 0;
left: 0;
width: 18px;
height: 18px;
font-size: 10px;
margin-left: 0;
}
/* Botón de colapsar modal (flecha <) */
.admin-notifications-collapse-btn {
background: transparent;
border: none;
color: white;
font-size: 20px;
font-weight: bold;
cursor: pointer;
padding: 4px 8px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.2s;
line-height: 1;
}
.admin-notifications-collapse-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.admin-notifications-modal-body {
flex: 1; /* ocupar el alto disponible */
overflow-y: auto;
padding: 10px;
display: flex !important;
flex-direction: column;
gap: 10px;
min-height: 0; /* permitir que el hijo flex haga scroll */
/* Scrollbar para navegadores no-WebKit */
scrollbar-color: #575657 #e6e6e6;
scrollbar-width: thin;
}
.admin-notifications-modal-body::-webkit-scrollbar {
width: 10px;
}
.admin-notifications-modal-body::-webkit-scrollbar-track {
background: #e6e6e6;
border-radius: 3px;
}
.admin-notifications-modal-body::-webkit-scrollbar-thumb {
background: #575657; /* color del scroll */
border-radius: 3px;
}
.admin-notifications-modal-body::-webkit-scrollbar-thumb:hover {
background: #3f3f3f;
}
/* Viñeta para expandir modal (cuando está colapsada) */
.admin-notifications-expand-tab {
position: fixed;
top: 108px;
left: 0;
background: #575657; /* gris corporativo */
border: none;
color: white;
font-size: 14px;
font-weight: 600;
padding: 10px 12px;
border-radius: 0 8px 8px 0;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 100000;
transition: all 0.3s ease;
display: none;
align-items: center;
justify-content: center;
gap: 4px;
line-height: 1;
}
.admin-notifications-expand-tab:hover {
transform: translateX(4px);
box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.3);
}
.admin-notifications-expand-tab .notif-badge {
position: relative;
top: 0;
left: 0;
width: 18px;
height: 18px;
font-size: 10px;
margin-left: 0;
}
/* Mostrar solo en PC (min-width: 769px) */
@media (min-width: 769px) {
/* Desktop: modal oculta por defecto */
.admin-notifications-modal {
display: none !important;
}
/* Tab visible por defecto */
.admin-notifications-expand-tab {
display: inline-flex !important;
}
/* Cuando modal está abierta, mostrarla como flex */
.admin-notifications-modal[style*="display: block"],
.admin-notifications-modal[style*="display: flex"] {
display: flex !important;
flex-direction: column !important;
}
/* Cuando modal está abierta, ocultar el tab */
.admin-notifications-modal[style*="display: block"] ~ .admin-notifications-expand-tab,
.admin-notifications-modal[style*="display: flex"] ~ .admin-notifications-expand-tab {
display: none !important;
}
}
/* En móvil, mantener el sistema anterior */
@media (max-width: 768px) {
.admin-notifications-modal,
.admin-notifications-expand-tab {
display: none !important;
}
}
/* ── Panel header: dos vistas ── */
.admin-notif-header-left {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.admin-notif-header-titles {
flex: 1;
min-width: 0;
}
.admin-notif-header-titles h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
}
.admin-notif-panel-subtitle {
font-size: 10px;
color: rgba(255,255,255,0.7);
display: block;
margin-top: 1px;
}
/* ── Botón volver ── */
.admin-notif-back-btn {
background: rgba(255,255,255,0.15);
border: none;
border-radius: 6px;
color: #fff;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 0.2s;
}
.admin-notif-back-btn:hover {
background: rgba(255,255,255,0.28);
}
/* ── Vista 2: track desktop ── */
#admin-notif-view-detail {
display: flex;
flex-direction: column;
}
#admin-notifications-track-desktop {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ── Vista 1: lista de usuarios ── */
#admin-notif-view-users {
display: flex;
flex-direction: column;
gap: 6px;
}
/* ── Tarjeta de usuario ── */
.admin-notif-user-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #fff;
border: 1.5px solid #e8e8e8;
border-left: 3px solid #BF1823;
border-radius: 8px;
cursor: pointer;
transition: box-shadow 0.2s, border-color 0.2s, background 0.15s;
animation: slideInFromLeft 0.28s ease-out both;
}
.admin-notif-user-card:hover {
background: #fafafa;
box-shadow: 0 4px 14px rgba(0,0,0,0.1);
border-color: #BF1823;
}
.admin-notif-user-card:active {
background: #f5f5f5;
}
/* Avatar con inicial */
.admin-notif-user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #575657;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 15px;
flex-shrink: 0;
}
/* Información del usuario */
.admin-notif-user-info {
flex: 1;
min-width: 0;
}
.admin-notif-user-name {
font-weight: 600;
font-size: 12px;
color: #252425;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-notif-user-preview {
font-size: 10px;
color: #777;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-notif-user-time {
font-size: 9px;
color: #aaa;
margin-top: 2px;
}
/* Badge de cantidad */
.admin-notif-user-count {
background: #BF1823;
color: #fff;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
min-width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
flex-shrink: 0;
}
/* ── Estado vacío ── */
.admin-notif-empty {
text-align: center;
color: #aaa;
font-size: 11px;
padding: 24px 12px;
line-height: 1.5;
}
/* ============================================
ESTILOS VISTA ADMINISTRADOR
============================================ */
@keyframes slideInRight {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(400px);
opacity: 0;
}
}
/* Estilos para drag & drop de fotos */
.foto-draggable {
cursor: move !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.foto-draggable:hover {
transform: scale(1.05);
}
.foto-dragging {
opacity: 0.5;
transform: scale(0.95);
}
.foto-drag-over {
transform: scale(1.1);
box-shadow: 0 0 10px rgba(191, 24, 35, 0.5);
}
.foto-position-badge {
position: absolute;
top: -8px;
left: -8px;
background: linear-gradient(135deg, #BF1823, #d32f2f);
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: bold;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 10;
}
.foto-position-badge.primera {
background: linear-gradient(135deg, #4CAF50, #66BB6A);
animation: pulse-first 2s infinite;
}
@keyframes pulse-first {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* ESTILOS PARA SECCIÓN DE BANNERS OFERTAS */
.banner-upload-section {
background: #f8f9fa;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
}
.banner-section-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 8px;
}
.banner-section-title .icon-title {
width: 22px;
height: 22px;
-webkit-filter: invert(12%) sepia(98%) saturate(5765%) hue-rotate(353deg) brightness(82%) contrast(96%);
filter: invert(12%) sepia(98%) saturate(5765%) hue-rotate(353deg) brightness(82%) contrast(96%);
}
.banner-section-desc {
font-size: 14px;
color: #666;
margin: 0 0 20px 0;
}
.banner-upload-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.banner-upload-box {
background: white;
border-radius: 10px;
padding: 20px;
border: 1px solid #e0e0e0;
}
.banner-upload-box h4 {
font-size: 15px;
font-weight: 600;
color: #444;
margin: 0 0 12px 0;
}
.drop-zone-banner {
border: 2px dashed #ccc;
border-radius: 10px;
padding: 30px 20px;
text-align: center;
background: #fafafa;
cursor: pointer;
transition: all 0.3s ease;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.drop-zone-banner:hover {
border-color: #BF1823;
background: #fff5f5;
}
.drop-zone-banner.drag-over {
border-color: #BF1823;
background: #ffe8ea;
transform: scale(1.02);
}
.drop-zone-content {
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.drop-icon {
display: block;
margin: 0 auto 8px auto;
width: 36px;
height: 36px;
}
.drop-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.drop-text {
font-size: 14px;
color: #333;
margin: 0 0 4px 0;
}
.drop-subtext {
font-size: 12px;
color: #888;
margin: 0;
}
.size-hint {
font-size: 12px;
color: #666;
margin: 12px 0 16px 0;
padding: 8px 12px;
background: #fff3cd;
border-radius: 6px;
border-left: 3px solid #ffc107;
}
.preview-container {
display: flex;
flex-wrap: wrap;
gap: 12px;
min-height: 20px;
}
.preview-item {
position: relative;
width: 100px;
height: 70px;
border-radius: 8px;
overflow: hidden;
border: 2px solid #e0e0e0;
cursor: grab;
transition: all 0.2s ease;
background: #f5f5f5;
}
.preview-item:hover {
border-color: #BF1823;
transform: scale(1.05);
}
.preview-item.dragging {
opacity: 0.5;
transform: scale(0.95);
}
.preview-item.drag-over {
border-color: #4CAF50;
transform: scale(1.08);
}
.preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.preview-item .preview-order {
position: absolute;
top: 4px;
left: 4px;
background: linear-gradient(135deg, #BF1823, #d32f2f);
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 11px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.preview-item .preview-order.first {
background: linear-gradient(135deg, #4CAF50, #66BB6A);
}
.preview-item .btn-delete-preview {
position: absolute;
top: 4px;
right: 4px;
background: rgba(0,0,0,0.7);
color: white;
border: none;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.preview-item:hover .btn-delete-preview {
opacity: 1;
}
.preview-item .btn-delete-preview:hover {
background: #BF1823;
}
@media (max-width: 900px) {
.banner-upload-grid {
grid-template-columns: 1fr;
}
}
/* Estilos para el modal de filtros lateral */
.filtros-panel {
position: fixed;
top: 0;
right: 0;
width: 400px;
max-width: 90%;
height: 100%;
background: white;
box-shadow: -2px 0 15px rgba(0, 0, 0, 0.2);
transform: translateX(100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
z-index: 9999;
}
.panel--open {
transform: translateX(0);
}
.filtros-header-container {
border-bottom: 1px solid #e0e0e0;
padding: 20px 24px;
flex-shrink: 0;
}
.filtros-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.filtros-header h2 {
font-size: 20px;
font-weight: 600;
color: #333;
margin: 0;
}
.close-filtros {
background: none;
border: none;
font-size: 28px;
color: #666;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.2s;
}
.close-filtros:hover {
background: #f5f5f5;
color: #BF1823;
}
.filtros-main {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.filtros-tags {
padding: 16px 24px;
display: flex;
flex-wrap: wrap;
gap: 8px;
border-bottom: 1px solid #e0e0e0;
min-height: 56px;
}
.tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: #BF1823;
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
}
.tag button {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 16px;
padding: 0;
margin-left: 4px;
opacity: 0.8;
transition: opacity 0.2s;
}
.tag button:hover {
opacity: 1;
}
.filtros-content {
padding: 16px 24px;
flex: 1;
}
.filtros-section {
margin-bottom: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
}
.section-toggle {
width: 100%;
background: #f8f9fa;
border: none;
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: 600;
color: #333;
transition: background 0.2s;
}
.section-toggle:hover {
background: #e9ecef;
}
.section-toggle .arrow {
transition: transform 0.3s;
font-size: 14px;
}
.section-toggle[aria-expanded="false"] .arrow {
transform: rotate(-90deg);
}
.section-content {
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
max-height: 1000px;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.section-content.collapsed {
max-height: 0;
padding: 0 16px;
}
.section-content.filtros-scroll {
max-height: 250px;
overflow-y: auto;
}
.section-content label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 6px 0;
font-size: 14px;
color: #333;
}
.section-content label:hover {
color: #BF1823;
}
.section-content input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #BF1823;
}
.section-content select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}
.filtros-footer-container {
padding: 20px 24px;
border-top: 1px solid #e0e0e0;
flex-shrink: 0;
}
.aplicar-filtros {
width: 100%;
max-width: none;
margin: 0;
padding: 12px;
box-sizing: border-box;
background: #BF1823;
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: background 0.2s;
}
.aplicar-filtros:hover {
background: #a01620;
}
.limpiar-filtros {
width: 100%;
padding: 12px;
box-sizing: border-box;
background: #f5f5f5;
color: #333;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: background 0.2s;
margin-bottom: 12px;
}
.limpiar-filtros:hover {
background: #e0e0e0 !important;
}
/* ===== MODAL EDITAR VEHÍCULO ===== */
.modal-editar-vehiculo-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.modal-editar-vehiculo-overlay.visible {
opacity: 1;
visibility: visible;
}
.modal-editar-vehiculo {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
background: white;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
z-index: 1000;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
}
.modal-editar-vehiculo.visible {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.modal-header {
padding: 20px;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #333;
}
.modal-close {
background: none;
border: none;
font-size: 28px;
color: #999;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}
.modal-close:hover {
color: #333;
}
.modal-body {
padding: 20px;
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-weight: 600;
color: #333;
margin-bottom: 6px;
font-size: 14px;
}
.form-group input {
width: 100%;
padding: 10px 12px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
box-sizing: border-box;
transition: border-color 0.2s;
}
.form-group input:focus {
outline: none;
border-color: #BF1823;
}
.form-group input:read-only {
background: #f5f5f5;
color: #999;
cursor: not-allowed;
}
.modal-actions {
display: flex;
gap: 12px;
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid #e0e0e0;
}
.btn-cancel,
.btn-save {
flex: 1;
padding: 12px 16px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.btn-cancel {
background: #f0f0f0;
color: #333;
}
.btn-cancel:hover {
background: #e0e0e0;
transform: translateY(-1px);
}
.btn-save {
background: #BF1823;
color: white;
}
.btn-save:hover {
background: #a01620;
transform: translateY(-1px);
}
.btn-editar-fila {
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
}
.btn-editar-fila:hover {
transform: scale(1.15);
}
/* ====================================================
MÉTRICAS GLOBALES - SECCIÓN PROFESIONAL
==================================================== */
/* Tarjeta de filtros */
.metricas-filtros-card {
padding: 20px;
margin-bottom: 20px;
background: #f8f9fa;
border: 1px solid #e0e0e0;
}
.metricas-filtros-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
align-items: flex-end;
gap: 16px;
flex-wrap: wrap;
}
.metricas-filtro-group {
display: flex;
flex-direction: column;
gap: 6px;
}
@media (max-width: 900px) {
.metricas-filtros-row {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
padding: 0 !important;
}
.metricas-filtro-group:first-child {
width: 100%;
}
/* Métricas: aplicar mismo estilo que Facturas */
.metricas-filtros-row .date-filters {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
width: 100%;
flex-wrap: nowrap;
}
.metricas-filtros-row .date-group {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex: 1;
}
.metricas-filtros-row .date-group label {
white-space: nowrap !important;
font-size: 12px;
}
.metricas-filtros-row .date-group .sc-input-date {
max-width: 130px !important;
min-width: 100px !important;
width: 100%;
}
}
.metricas-btn-group {
grid-column: 1 / -1;
display: flex !important;
gap: 8px !important;
align-items: stretch !important;
flex-direction: row !important;
}
.metricas-quick-btn {
flex: 1 !important;
height: 36px !important;
font-size: 11px !important;
padding: 6px 8px !important;
min-width: 0 !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
#metricas-globales .section-title,
.metricas-filtros-card .section-title {
font-size: 14px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Asegurar que las tarjetas de filtros no se desborden */
.metricas-filtros-card {
padding: 12px !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.metricas-filtros-card > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
.metricas-filtro-label {
font-size: 12px;
font-weight: 600;
color: #555;
text-transform: uppercase;
letter-spacing: 0.3px;
min-height: 18px;
}
/* Ajustar altura del multiselect para alinearlo con los inputs */
#metricas-globales .sc-multiselect-trigger {
height: auto;
min-height: auto;
padding: 6px 10px;
font-size: 12px;
}
.metricas-btn-group {
flex-direction: row;
align-items: flex-end;
gap: 8px;
/* Sin margin-top adicional, se alinea naturalmente */
}
.metricas-quick-btn {
padding: 8px 14px !important;
font-size: 13px;
white-space: nowrap;
height: 40px; /* Misma altura que los inputs */
}
/* Grid de estadísticas principales */
.metricas-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
@media (max-width: 768px) {
#metricas-globales-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"mg-ganancias mg-ganancias"
"mg-ordenes mg-cotizaciones"
"mg-usuarios mg-usuarios";
gap: 12px;
}
#metricas-globales-grid .stat-item:nth-child(1) { grid-area: mg-ganancias; }
#metricas-globales-grid .stat-item:nth-child(2) { grid-area: mg-ordenes; }
#metricas-globales-grid .stat-item:nth-child(3) { grid-area: mg-cotizaciones; }
#metricas-globales-grid .stat-item:nth-child(4) { grid-area: mg-usuarios; }
}
/* Estilos específicos para métricas globales */
#metricas-globales .stat-item {
background: white;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
transition: transform 0.2s, box-shadow 0.2s;
}
#metricas-globales .stat-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
#metricas-globales .stat-label {
font-size: 13px;
font-weight: 600;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#metricas-globales .stat-value {
font-size: 28px;
font-weight: 700;
color: #BF1823;
}
#metricas-globales .stat-sublabel {
font-size: 14px;
font-weight: 500;
color: #666;
margin-top: 4px;
}
/* Grid de Top SKUs (2 columnas) */
.metricas-top-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
/* Tarjetas de contenido */
.metricas-card-content {
padding: 20px;
margin-bottom: 20px;
}
.metricas-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #f0f0f0;
}
.metricas-content {
font-size: 13px;
color: #333;
line-height: 1.6;
}
/* Gráfico de tendencias */
.metricas-chart {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2px;
height: 200px;
background: #fdfdfd;
padding: 20px;
border-radius: 12px;
border: 1px solid #f0f0f0;
border-bottom: 2px solid #ccc;
margin-top: 12px;
}
/* Columnas del gráfico de barras */
.bar-chart-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
min-width: 0;
animation: slideInUp 0.4s ease-out forwards;
opacity: 0;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Barras individuales */
.bar-chart-bar {
width: 100%;
max-width: 30px;
background: #BF1823;
border-radius: 4px 4px 0 0;
transition: all 0.3s ease;
cursor: pointer;
min-height: 2px;
position: relative;
}
.bar-chart-bar:hover,
.bar-chart-bar:active,
.bar-chart-bar.active {
background: #950f1a;
transform: scaleY(1.05);
transform-origin: bottom;
}
/* Tooltip para mostrar el valor */
.bar-chart-bar::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
background: rgba(0, 0, 0, 0.85);
color: white;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 100;
}
.bar-chart-bar:hover::after,
.bar-chart-bar:active::after,
.bar-chart-bar.active::after {
opacity: 1;
}
/* Etiquetas del gráfico */
.bar-chart-label {
font-size: 9px;
color: #666;
margin-top: 6px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Responsive */
@media (max-width: 1200px) {
.metricas-filtros-row {
flex-direction: column;
align-items: stretch;
}
.metricas-filtro-group {
width: 100%;
}
.metricas-btn-group {
flex-direction: row;
justify-content: flex-start;
}
.metricas-top-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.metricas-stats-grid {
grid-template-columns: 1fr;
}
.stat-value {
font-size: 24px;
}
}
/* ====== ANIMACIONES OC FEEDBACK MODAL ====== */
@keyframes fadeOutOverlay {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes slideDownModal {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(30px);
}
}
/* ===== TABLA MANTENIMIENTOS RESPONSIVA ===== */
/* Desktop - mantener tabla normal */
#tabla-mantenimientos {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
}
#tabla-mantenimientos thead {
display: table-header-group;
}
#tabla-mantenimientos tbody {
display: table-row-group;
}
#tabla-mantenimientos tr {
display: table-row;
}
#tabla-mantenimientos td {
display: table-cell;
border-bottom: 1px solid #e0e0e0;
padding: 16px;
vertical-align: top;
}
/* Móvil - Convertir tabla en tarjetas */
@media (max-width: 900px) {
#tabla-mantenimientos {
border-collapse: separate;
background: transparent;
}
#tabla-mantenimientos thead {
display: none;
}
#tabla-mantenimientos tbody {
display: grid;
gap: 12px;
padding: 8px 0;
}
#tabla-mantenimientos tr {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"vehiculo acciones"
"fecha fecha"
"sistemas productos";
gap: 8px 12px;
background: #ffffff;
border: 1px solid #e7e7e7;
border-radius: 14px;
padding: 16px 12px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
position: relative;
}
#tabla-mantenimientos td {
border: none;
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 4px;
font-size: 13px;
color: #252425;
white-space: normal;
word-break: break-word;
align-items: flex-start;
text-align: left !important;
}
#tabla-mantenimientos td[data-label="Vehículo"] {
grid-area: vehiculo;
}
#tabla-mantenimientos td[data-label="Fecha"] {
grid-area: fecha;
}
#tabla-mantenimientos td[data-label="Sistemas"] {
grid-area: sistemas;
}
#tabla-mantenimientos td[data-label="Productos"] {
grid-area: productos;
}
#tabla-mantenimientos td[data-label="Acciones"] {
grid-area: acciones;
justify-self: end;
align-items: flex-start;
justify-content: flex-start;
}
#tabla-mantenimientos td::before {
content: attr(data-label);
font-size: 11px;
letter-spacing: 0.3px;
text-transform: uppercase;
color: #777;
font-weight: 700;
line-height: 1.2;
margin-bottom: 4px;
}
#tabla-mantenimientos td[data-label="Acciones"]::before {
display: none;
}
}
/* ===== TABLA BUSCAR VEHÍCULOS RESPONSIVA ===== */
/* Desktop - mantener tabla normal */
.tabla-buscar-vehiculos {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
}
.tabla-buscar-vehiculos thead {
display: table-header-group;
}
.tabla-buscar-vehiculos tbody {
display: table-row-group;
}
.tabla-buscar-vehiculos tr {
display: table-row;
}
.tabla-buscar-vehiculos td {
display: table-cell;
border-bottom: 1px solid #e0e0e0;
padding: 12px 15px;
vertical-align: middle;
}
/* Móvil - Convertir tabla en tarjetas */
@media (max-width: 900px) {
.tabla-buscar-vehiculos {
border-collapse: separate;
background: transparent;
}
.tabla-buscar-vehiculos thead {
display: none;
}
.tabla-buscar-vehiculos tbody {
display: grid;
gap: 12px;
padding: 8px 0;
}
.tabla-buscar-vehiculos tr {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"checkbox marca"
"checkbox modelo"
"checkbox patente"
"checkbox conductor"
"checkbox motor";
gap: 4px 12px;
background: #ffffff;
border: 1px solid #e7e7e7;
border-radius: 12px;
padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
position: relative;
align-items: center;
}
.tabla-buscar-vehiculos td {
border: none;
display: flex;
flex-direction: column;
gap: 2px;
padding: 2px 0;
font-size: 13px;
color: #252425;
white-space: normal;
word-break: break-word;
align-items: flex-start;
text-align: left !important;
}
.tabla-buscar-vehiculos td[data-label=""] {
grid-column: 1;
grid-row: 1 / span 5;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
.tabla-buscar-vehiculos td[data-label="Marca"] {
grid-area: marca;
}
.tabla-buscar-vehiculos td[data-label="Modelo"] {
grid-area: modelo;
}
.tabla-buscar-vehiculos td[data-label="Patente"] {
grid-area: patente;
}
.tabla-buscar-vehiculos td[data-label="Conductor"] {
grid-area: conductor;
}
.tabla-buscar-vehiculos td[data-label="Motor"] {
grid-area: motor;
}
.tabla-buscar-vehiculos td::before {
content: attr(data-label);
font-size: 11px;
letter-spacing: 0.3px;
text-transform: uppercase;
color: #999;
font-weight: 700;
line-height: 1;
margin-bottom: 2px;
}
.tabla-buscar-vehiculos td[data-label=""]::before {
display: none;
}
}
/* ===== ADAPTACIÓN RESPONSIVA DE MODALES ===== */
/* Hacer que las modales se adapten bien en móvil */
@media (max-width: 768px) {
/* Modal de selección de vehículos */
#modal-seleccion-vehiculos .flota-modal-content {
width: 95% !important;
max-width: 95% !important;
max-height: 90vh;
display: flex;
flex-direction: column;
}
#modal-seleccion-vehiculos .flota-modal-body {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Hacer el buscador y checkbox apilados en móvil */
#modal-seleccion-vehiculos [style*="display: flex; align-items: center; justify-content: space-between"] {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
#modal-seleccion-vehiculos .search-patente {
width: 100% !important;
flex-shrink: 0 !important;
max-width: 100% !important;
margin: 0 !important;
box-sizing: border-box;
}
#modal-seleccion-vehiculos .input-patente {
width: 100% !important;
}
#modal-seleccion-vehiculos label[style*="display: flex"] {
flex-wrap: nowrap;
align-items: center;
}
#modal-seleccion-vehiculos label span {
font-size: 13px !important;
}
/* Tabla responsiva */
#modal-seleccion-vehiculos .table-responsive {
max-height: auto !important;
flex: 1;
overflow: auto;
margin-bottom: 12px !important;
min-height: 200px;
}
/* Indicador de selección */
#modal-seleccion-vehiculos [style*="margin-top: 16px; padding: 12px; background: #f8f8f8"] {
margin-top: 0 !important;
margin-bottom: 12px !important;
padding: 10px !important;
font-size: 13px !important;
flex-shrink: 0;
}
/* Botones de acción en móvil */
#modal-seleccion-vehiculos [style*="margin-top: 20px; display: flex; gap: 12px; justify-content: flex-end"] {
margin-top: 0 !important;
gap: 8px !important;
flex-direction: row;
flex-shrink: 0;
}
#modal-seleccion-vehiculos .btn-primary,
#modal-seleccion-vehiculos .btn-secondary {
padding: 10px 16px !important;
font-size: 13px !important;
flex: 1;
}
/* Modal de programación de mantenimiento */
#modal-programacion-mantenimiento .flota-modal-content {
width: 95% !important;
max-width: 95% !important;
max-height: 95vh !important;
display: flex !important;
flex-direction: column !important;
}
#modal-programacion-mantenimiento .flota-modal-body {
flex-direction: column !important;
padding: 16px !important;
overflow-y: auto !important;
flex: 1 !important;
}
/* Tarjeta del vehículo ocupa todo el ancho en móvil */
#modal-programacion-mantenimiento [style*="flex: 0 0 45%"] {
flex: 0 0 auto !important;
width: 100%;
border-right: none !important;
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
overflow: visible !important;
}
/* Formulario ajustado con scroll */
#modal-programacion-mantenimiento [style*="flex: 1; padding: 24px 30px"] {
flex: 1 !important;
padding: 16px !important;
overflow-y: visible !important;
}
/* Ajuste del checkbox de repetir mantenimiento en móvil */
#modal-programacion-mantenimiento #mantener-fecha-todos {
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
#modal-programacion-mantenimiento label[for="mantener-fecha-todos"] {
font-size: 12px !important;
line-height: 1.3 !important;
flex: 1 !important;
}
#modal-programacion-mantenimiento .info-icon-recurrencia {
width: 14px !important;
height: 14px !important;
margin-left: 2px !important;
flex-shrink: 0 !important;
}
/* DEFINITIVO: Campo de fecha alineado con todos los demás elementos */
#modal-programacion-mantenimiento #fecha-mantenimiento {
padding: 8px 10px !important;
font-size: 13px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin: 0 !important;
border: 1px solid #ccc !important;
border-radius: 4px !important;
-webkit-appearance: none !important;
appearance: none !important;
display: block !important;
}
/* En mobile, hacer que el checkbox y label se apilen verticalmente */
#modal-programacion-mantenimiento .fecha-checkbox-container {
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
}
#modal-programacion-mantenimiento .fecha-checkbox-container label {
margin: 0 !important;
line-height: 1.3 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Asegurar que TODOS los inputs tengan el mismo ancho en móvil */
#modal-programacion-mantenimiento input[type="date"],
#modal-programacion-mantenimiento #dropdown-sistemas,
#modal-programacion-mantenimiento #lista-productos-mantenimiento {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Contenedor de fecha responsive */
#modal-programacion-mantenimiento [style*="display: flex; align-items: center; gap: 8px"] {
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
width: 100% !important;
}
/* Modal de edición de mantenimiento */
#modal-editar-mantenimiento .flota-modal-content {
width: 95% !important;
max-width: 95% !important;
max-height: 90vh;
}
#modal-editar-mantenimiento .flota-modal-body {
padding: 16px !important;
max-height: calc(90vh - 120px);
overflow-y: auto;
}
/* Modal de mis mantenimientos */
#modal-mis-mantenimientos .flota-modal-content {
width: 95% !important;
max-width: 95% !important;
max-height: 90vh;
}
#modal-mis-mantenimientos .flota-modal-body {
padding: 16px !important;
max-height: calc(90vh - 120px);
overflow-y: auto;
}
/* Tabs responsivos */
.tabs {
flex-wrap: wrap !important;
}
.tabs button {
flex: 1;
min-width: calc(33.333% - 8px) !important;
}
}
/* === RESPONSIVE PARA MODALES DE OC EN MOBILE === */
@media (max-width: 768px) {
/* Modal de OC pendiente */
.oc-modal {
width: 95vw !important;
max-width: 95vw !important;
max-height: 95vh !important;
border-radius: 12px;
}
.oc-modal-header {
padding: 16px;
}
.oc-modal-header h2 {
font-size: 16px;
}
.oc-modal-content {
padding: 16px;
}
.oc-modal-footer {
padding: 16px;
}
/* Grid de informaci�n pendiente - 1 columna en mobile */
.pending-info-grid {
grid-template-columns: 1fr;
gap: 12px;
}
/* Tarjetas de items - dise�o vertical en mobile */
.pending-item-card {
grid-template-columns: 1fr;
gap: 12px;
padding: 12px;
}
.pending-item-img-container {
width: 100%;
height: 150px;
max-width: 200px;
margin: 0 auto;
}
.pending-item-detalles {
grid-template-columns: 1fr;
gap: 8px;
}
.pending-item-actions {
flex-direction: row;
width: 100%;
}
.pending-item-actions button {
flex: 1;
padding: 8px 12px;
font-size: 13px;
}
/* Botones del modal - stack vertical en mobile */
.oc-modal-actions {
flex-direction: column-reverse;
gap: 8px;
}
.oc-modal-actions .btn-primary,
.oc-modal-actions .btn-secondary {
width: 100%;
min-width: unset;
}
/* Modal de galer�a de im�genes */
#gallery-modal,
#ficha-modal {
width: 95vw !important;
max-width: 95vw !important;
max-height: 95vh !important;
}
#gallery-modal .oc-modal-content,
#ficha-modal .oc-modal-content {
padding: 12px;
}
/* Im�genes de galer�a m�s peque�as en mobile */
#gallery-img-principal {
max-height: 250px;
}
#gallery-thumbnails {
gap: 8px;
}
.gallery-thumbnail {
width: 60px;
height: 60px;
}
/* Z-index para modales anidadas en mobile */
#pending-modal-overlay { z-index: 10000 !important; }
#pending-modal { z-index: 10001 !important; }
#gallery-modal-overlay { z-index: 10200 !important; }
#gallery-modal { z-index: 10201 !important; }
#ficha-modal-overlay { z-index: 10300 !important; }
#ficha-modal { z-index: 10301 !important; }
/* Contenedor de OC pendientes en carrito mobile */
#cart-pending-container {
gap: 10px;
}
.cart-pending-card {
padding: 12px;
}
.cart-pending-header {
margin-bottom: 10px;
}
.cart-pending-badge {
font-size: 10px;
padding: 3px 6px;
}
.cart-pending-items {
margin-bottom: 10px;
padding-bottom: 10px;
}
.cart-pending-item {
font-size: 12px;
}
.cart-pending-actions {
flex-direction: column;
gap: 6px;
}
.cart-pending-actions .btn-primary,
.cart-pending-actions .btn-secondary {
width: 100%;
padding: 10px 14px;
font-size: 13px;
}
}
/* ==============================================
SVG NAVIGATION ICONS - FILTROS BLANCOS
============================================== */
/* SVGs blancos para botones tracking carousel (fondo gris) */
.tracking-carousel-btn img,
.tracking-nav-icon {
filter: brightness(0) invert(1);
width: 14px;
height: auto;
}
/* SVGs izq.svg y der.svg en notificaciones - DESKTOP BLANCO */
@media (min-width: 769px) {
/* Botón para expandir (der.svg) */
.admin-notifications-expand-tab img {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* Botones navegación dentro de modal (izq.svg y der.svg) */
.admin-notifications-nav-btn img,
.admin-notif-nav-icon {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* Botón colapsar dentro de la modal (flecha izq) */
.admin-notifications-collapse-btn img {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
}
/* Mobile: SVGs con color normal */
@media (max-width: 768px) {
.admin-notifications-expand-tab img,
.admin-notifications-nav-btn img,
.admin-notif-nav-icon {
filter: none !important;
opacity: 1 !important;
}
/* Ajustar tamaño de flechas izq/der en mobile para evitar que crezcan */
.admin-notifications-nav-btn img,
.admin-notif-nav-icon {
width: 18px;
height: 18px;
object-fit: contain;
}
}
/* ======================================================
RESPONSIVE: LISTA DE REPUESTOS - MOBILE
====================================================== */
@media (max-width: 768px) {
/* Layout mobile: header en columna con wrapping */
.listado-header {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 16px;
padding: 20px 16px;
background-color: transparent;
}
/* Botón solicitar - 100% ancho con más margen */
.listado-acciones {
flex: 0 0 100%;
width: 100%;
margin-bottom: 4px;
}
.listado-solicitar {
width: 100%;
justify-content: center;
padding: 14px 16px;
font-size: 14px;
min-height: 48px;
}
/* Buscador - ocupa espacio flexible */
.listado-buscar {
flex: 1 1 auto;
margin: 0 !important;
min-width: 0;
max-width: 100%;
}
.listado-buscar .search-general {
width: 100%;
min-height: 44px;
max-width: 100%;
padding: 0 36px 0 12px !important;
overflow: visible !important;
}
.listado-buscar .input-general {
min-height: 44px;
padding: 12px 36px 12px 12px !important;
width: 100%;
font-size: 13px;
}
.listado-buscar .input-general::placeholder {
font-size: 13px;
}
/* Botón filtrar - al lado del buscador */
.listado-controles {
flex: 0 0 auto;
text-align: left;
}
#btn-filtrar-componentes {
padding: 12px 16px;
font-size: 13px;
white-space: nowrap;
min-height: 44px;
}
/* Total componentes - 100% ancho, nueva línea con más espacio */
.listado-info {
flex: 0 0 100%;
width: 100%;
text-align: left;
padding: 12px 0;
margin-top: 4px;
}
#paginacion-texto {
font-size: 14px;
margin: 0;
}
/* ===== TABLA COMO TARJETAS EN MOBILE ===== */
/* Forzar que table-responsive no oculte contenido */
.listado-section .table-responsive {
overflow-x: hidden !important;
overflow-y: auto !important;
max-height: 65vh !important;
padding: 0;
margin: 0;
background: transparent;
display: block !important;
}
/* Tabla base sin restricciones de ancho */
.listado-section #tabla-productos {
min-width: 0 !important;
border-collapse: separate !important;
width: 100% !important;
}
/* Ocultar thead en mobile */
.listado-section #tabla-productos thead {
display: none !important;
}
/* Tbody como grid de tarjetas */
.listado-section #tabla-productos tbody {
display: grid !important;
gap: 16px !important;
padding: 8px 10px 12px !important;
}
/* Cada fila es una tarjeta con grid interno */
.listado-section #tabla-productos tbody tr {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
background: #ffffff !important;
border: 1px solid #e7e7e7 !important;
border-radius: 14px !important;
padding: 16px !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
position: relative !important;
}
/* Hover en tarjetas */
.listado-section #tabla-productos tbody tr:hover {
box-shadow: 0 6px 18px rgba(0,0,0,0.1) !important;
transform: translateY(-2px);
}
/* Tarjetas con DESCUENTO */
.listado-section #tabla-productos tbody tr.row-descuento {
background-color: #fff9f5 !important;
border-left: 4px solid #FF9800 !important;
}
/* Tarjetas NUEVAS */
.listado-section #tabla-productos tbody tr.row-nuevo {
background-color: #fff6f7 !important;
border-left: 4px solid #BF1823 !important;
}
/* Badge "Nuevo" en esquina */
.listado-section .pill-nuevo {
position: absolute !important;
top: 12px !important;
right: 12px !important;
z-index: 2 !important;
}
/* Celdas como bloques con etiquetas */
.listado-section #tabla-productos tbody tr td {
display: block !important;
padding: 8px 0 !important;
border: none !important;
background: transparent !important;
text-align: left !important;
position: relative !important;
font-family: 'Poppins', sans-serif !important;
}
/* td:nth-child(1) = Línea */
.listado-section #tabla-productos tbody tr td:nth-child(1)::before {
content: "Línea: ";
font-weight: 700;
color: #333;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.5px;
font-family: 'Poppins', sans-serif;
}
.listado-section #tabla-productos tbody tr td:nth-child(1) {
font-size: 12px;
color: #666;
font-family: 'Poppins', sans-serif;
}
/* td:nth-child(2) = Código StarClutch */
.listado-section #tabla-productos tbody tr td:nth-child(2)::before {
content: "Cód. StarClutch: ";
font-weight: 700;
color: #333;
font-size: 12px;
font-family: 'Poppins', sans-serif;
}
.listado-section #tabla-productos tbody tr td:nth-child(2) {
font-size: 13px;
color: #252425;
font-family: 'Courier New', monospace;
}
/* td:nth-child(3) = Descripción */
.listado-section #tabla-productos tbody tr td:nth-child(3) {
font-size: 16px;
font-weight: 600;
color: #252425;
margin-top: 4px;
margin-bottom: 4px;
font-family: 'Poppins', sans-serif;
}
/* td:nth-child(4) = Marca */
.listado-section #tabla-productos tbody tr td:nth-child(4)::before {
content: "Marca: ";
font-weight: 700;
color: #333;
font-size: 12px;
font-family: 'Poppins', sans-serif;
}
.listado-section #tabla-productos tbody tr td:nth-child(4) {
font-size: 13px;
color: #575657;
font-family: 'Poppins', sans-serif;
}
/* td:nth-child(5) = Código Cliente */
.listado-section #tabla-productos tbody tr td:nth-child(5)::before {
content: "Cód. Cliente: ";
font-weight: 700;
color: #333;
font-size: 12px;
font-family: 'Poppins', sans-serif;
}
.listado-section #tabla-productos tbody tr td:nth-child(5) {
font-size: 13px;
color: #666;
font-family: 'Courier New', monospace;
}
/* td:nth-child(6) = Precio */
.listado-section #tabla-productos tbody tr td:nth-child(6) {
font-size: 20px;
font-weight: 700;
color: #BF1823;
margin-top: 8px;
margin-bottom: 12px;
}
/* Badge de descuento */
.listado-section #tabla-productos tbody tr.row-descuento td:nth-child(6)::after {
content: " 🔥";
font-size: 18px;
}
/* td:nth-child(7) = Acciones */
.listado-section #tabla-productos tbody tr td:nth-child(7) {
display: flex !important;
gap: 10px !important;
flex-wrap: wrap !important;
padding-top: 12px !important;
}
.listado-section #tabla-productos tbody tr td:nth-child(7) button,
.listado-section #tabla-productos tbody tr td:nth-child(7) .btn-text,
.listado-section #tabla-productos tbody tr td:nth-child(7) .btn-primary {
flex: 1 1 auto;
min-width: 110px;
justify-content: center;
padding: 10px 14px;
font-size: 13px;
min-height: 44px;
}
/* Ajustar paginación mobile - siempre en una línea */
.listado-paginacion-controles {
margin-top: 24px;
gap: 6px;
padding: 8px 12px;
}
.page-btn {
width: 32px;
height: 32px;
font-size: 12px;
flex-shrink: 0;
}
/* Ajustar sección completa */
.listado-section {
padding: 16px;
}
/* ================================ */
/* ESTADO DE CUENTA - MOBILE CARDS */
/* ================================ */
/* Tabla de facturas como tarjetas */
.mis-facturas .listado-tabla {
max-height: none;
overflow-y: visible;
margin-top: 12px;
}
.mis-facturas .calendar-container {
flex-direction: row;
gap: 8px;
flex-wrap: wrap;
}
.mis-facturas .calendar-container label {
flex: 1;
min-width: 140px;
justify-content: space-between;
padding: 0 4px;
}
.mis-facturas .calendar-container input[type="date"] {
min-width: auto;
flex: 1;
min-width: 120px;
}
.mis-facturas #tabla-facturas {
min-width: auto;
background: transparent;
display: grid;
gap: 12px;
padding: 8px;
}
.mis-facturas #tabla-facturas thead {
display: none;
}
.mis-facturas #tabla-facturas tbody {
display: grid;
gap: 12px;
grid-template-columns: 1fr;
}
.mis-facturas #tabla-facturas tr {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
padding: 16px;
border-radius: 12px;
border: 1px solid #e8e8e8;
background: white;
min-height: auto;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
transition: none;
}
/* En mobile, eliminar hover y reemplazar con active/focus */
.mis-facturas #tabla-facturas tr:hover {
background-color: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.mis-facturas #tabla-facturas tr:active {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
background-color: #fafafa;
}
.mis-facturas #tabla-facturas td {
padding: 8px 0;
border-bottom: none;
border-top: 1px solid #f0f0f0;
padding-top: 8px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
.mis-facturas #tabla-facturas td:first-child {
border-top: none;
padding-top: 0;
}
.mis-facturas #tabla-facturas td::before {
content: attr(data-label);
font-weight: 600;
color: #555;
flex: 0 0 45%;
}
.mis-facturas #tabla-facturas td:nth-child(1)::before { content: "N° Factura"; }
.mis-facturas #tabla-facturas td:nth-child(2)::before { content: "Fecha"; }
.mis-facturas #tabla-facturas td:nth-child(3)::before { content: "Total"; }
.mis-facturas #tabla-facturas td:nth-child(4)::before { content: "Estado"; }
.mis-facturas #tabla-facturas td:nth-child(5)::before { content: "Archivo"; }
.mis-facturas #tabla-facturas td:nth-child(6)::before { content: "Comprobante"; }
/* Resumen de inversión - adaptación mobile */
.resumen-inversion {
margin-top: 20px;
}
.resumen-inversion .calendar-container {
flex-direction: row;
gap: 8px;
flex-wrap: wrap;
}
.resumen-inversion .calendar-container label {
flex: 1;
min-width: 140px;
justify-content: space-between;
padding: 0 4px;
}
.resumen-inversion .calendar-container input[type="date"] {
min-width: auto;
flex: 1;
min-width: 120px;
}
.resumen-inversion .chart-container {
padding: 12px 0;
background: transparent;
border: none;
margin-top: 16px;
}
.resumen-inversion #grafico-inversion {
width: 100% !important;
height: auto !important;
max-height: 240px !important;
min-height: 200px !important;
}
.resumen-inversion .total-container {
text-align: center;
padding: 16px 12px;
background: linear-gradient(135deg, #FFE5E5 0%, #FFD0D0 100%);
border-radius: 12px;
color: #BF1823;
font-weight: 700;
font-size: 16px;
margin-top: 16px;
border: 1px solid #FFCDD2;
}
/* ================================ */
/* MIS COMPRAS - MOBILE RESPONSIVE */
/* ================================ */
.purchases-section {
margin-top: 16px;
}
.purchase-date {
font-size: 16px;
margin-top: 20px;
padding-top: 12px;
}
.purchase-card {
flex-direction: column;
align-items: flex-start;
padding: 16px;
gap: 12px;
}
.purchase-info {
width: 100%;
flex-direction: column-reverse;
gap: 12px;
align-items: flex-start;
}
.purchase-img {
width: 64px;
height: 64px;
flex-shrink: 0;
}
.purchase-text {
flex: 1;
gap: 4px;
min-width: 0;
overflow-wrap: break-word;
text-align: left;
}
.purchase-text h4 {
font-size: 13px;
line-height: 1.3;
word-break: break-word;
}
.purchase-text p {
word-break: break-word;
}
.purchase-status {
font-size: 12px;
flex-wrap: wrap;
word-break: break-word;
}
.purchase-images-container {
width: 100%;
margin-right: 0 !important;
margin-bottom: 0;
}
.purchase-images-container > div:first-child {
width: 100%;
height: 200px !important;
margin: 0 auto;
}
.purchase-actions {
width: 100%;
min-width: auto;
flex-direction: row;
gap: 8px;
align-items: stretch;
margin-top: 16px;
}
.purchase-actions .btn-primary,
.purchase-actions .btn-secondary {
flex: 1;
min-width: 0;
font-size: 13px;
padding: 10px 12px;
white-space: nowrap;
}
/* Botones con texto responsive - SOLO MOBILE */
.btn-secondary[data-mobile-text]::before {
content: attr(data-mobile-text);
font-size: 14px;
display: inline;
}
.btn-secondary[data-mobile-text] {
font-size: 14px;
}
.btn-text-desktop {
display: none !important;
}
/* Carrusel botones más grandes en mobile */
.carousel-nav-btn {
width: 32px !important;
height: 32px !important;
font-size: 16px !important;
}
.ver-mas-container {
margin-top: 24px;
}
}
/* ====================================================
VISTA GRUPO - ESTILOS ESPECÍFICOS
==================================================== */
/* Tabla de grupo (coherente con mis flotas) */
#vista-tabla-grupo {
padding: 10px 20px 30px 20px;
}
.tabla-grupo-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
#tabla-grupo-titulo {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #333;
}
#tabla-grupo-subtitulo {
margin: 0;
font-size: 13px;
color: #666;
}
.tabla-grupo-wrapper {
background: white;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
overflow: auto;
max-height: 600px;
}
table.tabla-grupo {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
table.tabla-grupo thead {
background: #f7f7f7;
position: sticky;
top: 0;
z-index: 1;
}
table.tabla-grupo th,
table.tabla-grupo td {
padding: 12px 10px;
text-align: left;
border-bottom: 1px solid #eaeaea;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 100px;
}
table.tabla-grupo th {
font-weight: 700;
font-size: 12px;
color: #555;
}
table.tabla-grupo tr:hover td {
background: #fafafa;
}
.tabla-grupo-empty {
text-align: center;
padding: 16px;
color: #777;
}
.sin-repuestos-banner {
margin-top: 16px;
background: #fff6f7;
border: 1px solid #f3c9cf;
border-radius: 12px;
padding: 16px 18px;
}
.sin-repuestos-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.sin-repuestos-text h4 {
margin: 0 0 6px 0;
font-size: 15px;
color: #252425;
}
.sin-repuestos-text p {
margin: 0;
font-size: 13px;
color: #5a5a5a;
}
.solicitud-repuestos-modal {
max-width: 540px;
width: min(540px, 94vw);
padding: 0;
border-radius: 16px;
overflow: visible;
box-shadow: 0 10px 40px rgba(0,0,0,0.25);
max-height: 90vh;
display: flex;
flex-direction: column;
}
#modal-solicitud-repuestos .modal-header {
background: #575657;
padding: 14px 16px;
border-bottom: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
#modal-solicitud-repuestos .modal-header-text {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.solicitud-subtitle {
margin: 0;
font-size: 13px;
color: #575657;
line-height: 1.4;
}
.solicitud-subtitle-row {
margin: 0 0 12px 0;
padding: 8px 10px;
background: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 10px;
}
#modal-solicitud-repuestos .modal-body {
padding: 20px;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
-webkit-overflow-scrolling: touch;
max-height: calc(90vh - 70px);
}
#modal-solicitud-repuestos .modal-intro {
padding: 0 0 12px 0;
text-align: center;
}
#modal-solicitud-repuestos .modal-intro p {
margin: 0;
font-size: 14px;
color: #4a4a4a;
line-height: 1.5;
}
#modal-solicitud-repuestos #solicitud-vehiculo-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
#modal-solicitud-repuestos #solicitud-vehiculo-wrapper label {
width: 100%;
max-width: 420px;
text-align: left;
}
#modal-solicitud-repuestos #solicitud-vehiculo-wrapper select,
#modal-solicitud-repuestos #solicitud-vehiculo-wrapper .solicitud-vehiculo-resumen {
width: 100%;
max-width: 420px;
margin: 0 auto;
}
#modal-solicitud-repuestos .modal-header h3 {
color: #ffffff;
margin: 0;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
}
#modal-solicitud-repuestos .modal-close {
color: #ffffff;
font-size: 22px;
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
line-height: 1;
}
#modal-solicitud-repuestos .modal-close:hover {
opacity: 0.85;
transform: scale(1.1);
}
#modal-solicitud-repuestos .modal-close:active {
transform: scale(0.95);
}
.solicitud-form .form-group {
margin-bottom: 16px;
}
.solicitud-form .form-group:last-of-type {
margin-bottom: 0;
}
#modal-solicitud-repuestos .solicitud-form label {
display: block;
font-weight: 600;
font-size: 13px;
color: #2f2f2f;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 8px;
}
.solicitud-form textarea,
.solicitud-form input[type="text"],
.solicitud-form input[type="email"],
.solicitud-form select {
width: 100%;
border-radius: 12px;
border: 1.5px solid #d0d0d0;
padding: 11px 14px;
font-size: 14px;
font-family: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background: #ffffff;
box-sizing: border-box;
}
.solicitud-form textarea:focus,
.solicitud-form input[type="text"]:focus,
.solicitud-form input[type="email"]:focus,
.solicitud-form select:focus {
outline: none;
border-color: #BF1823;
box-shadow: 0 0 0 3px rgba(191, 24, 35, 0.1);
}
.solicitud-form textarea {
resize: vertical;
min-height: 90px;
line-height: 1.5;
}
.solicitud-form input::placeholder,
.solicitud-form textarea::placeholder {
color: #999;
}
.solicitud-lineas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
gap: 10px;
margin-top: 8px;
}
.solicitud-linea-item {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-radius: 12px;
border: 1.5px solid #e0e0e0;
background: #fafafa;
font-size: 13px;
color: #333;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
/* ================================
PRODUCT TOUR / ONBOARDING
================================ */
.product-tour-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
transition: opacity 0.25s ease;
z-index: 100000;
pointer-events: none;
}
.product-tour-overlay.active {
opacity: 1;
}
.product-tour-highlight {
position: absolute;
border: 2px solid #BF1823;
border-radius: 10px;
box-shadow: 0 0 0 6px rgba(191, 24, 35, 0.15);
transition: all 0.2s ease;
z-index: 100001;
pointer-events: none;
}
.product-tour-tooltip {
position: absolute;
max-width: 320px;
min-width: 240px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
padding: 16px 16px 12px 16px;
z-index: 100002;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: auto;
}
.product-tour-tooltip.active {
opacity: 1;
transform: translateY(0);
}
.product-tour-progress {
font-size: 12px;
font-weight: 600;
color: #BF1823;
margin-bottom: 6px;
}
.product-tour-title {
margin: 0 0 6px 0;
font-size: 16px;
font-weight: 600;
color: #252425;
}
.product-tour-desc {
margin: 0 0 12px 0;
font-size: 13px;
color: #555;
line-height: 1.5;
}
.product-tour-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.product-tour-interaction {
margin: 0 0 10px 0;
font-size: 12px;
color: #6a7280;
line-height: 1.45;
}
.product-tour-action-btn {
border: 1px solid #ffd1d5;
background: #fff4f5;
color: #a51620;
border-radius: 8px;
padding: 7px 10px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.product-tour-action-btn:hover {
background: #ffe9ec;
}
.product-tour-next:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.product-tour-actions .btn-secondary,
.product-tour-actions .btn-primary {
padding: 8px 12px;
font-size: 13px;
}
.product-tour-skip {
background: transparent;
border: none;
color: #666;
font-size: 13px;
cursor: pointer;
padding: 0 6px;
}
.product-tour-skip:hover {
color: #BF1823;
}
.product-tour-close {
position: absolute;
top: 6px;
right: 8px;
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #999;
font-size: 18px;
cursor: pointer;
}
.product-tour-close:hover {
color: #BF1823;
}
.tour-replay {
margin-top: 16px;
padding: 12px 14px;
border: 1px solid #e6e6e6;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #fafafa;
}
.tour-replay-title {
font-size: 14px;
font-weight: 600;
color: #252425;
}
.tour-replay-desc {
font-size: 12px;
color: #666;
}
.product-tour-welcome {
position: fixed;
inset: 0;
background: rgba(10, 13, 20, 0.58);
z-index: 100010;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(2px);
}
.product-tour-welcome.active {
display: flex;
animation: welcomeBackdropIn 0.34s ease-out both;
}
.product-tour-welcome-card {
position: relative;
overflow: hidden;
width: min(680px, 100%);
background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
border-radius: 16px;
border: 1px solid #eceff3;
box-shadow: 0 24px 60px rgba(10, 13, 20, 0.24);
padding: 24px;
transform: translateY(18px) scale(0.985);
opacity: 0;
}
.product-tour-welcome.active .product-tour-welcome-card {
animation: welcomeCardIn 0.52s cubic-bezier(0.2, 0.7, 0.2, 1) 0.04s both;
}
.product-tour-welcome-card::before {
content: "";
position: absolute;
inset: -1px;
background: linear-gradient(105deg, rgba(191, 24, 35, 0) 0%, rgba(191, 24, 35, 0.08) 38%, rgba(191, 24, 35, 0) 68%);
transform: translateX(-120%);
pointer-events: none;
}
.product-tour-welcome.active .product-tour-welcome-card::before {
animation: welcomeSweep 1.2s ease-out 0.18s both;
}
.product-tour-welcome-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff2f3;
color: #bf1823;
border: 1px solid #ffd6d9;
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
opacity: 0;
transform: translateY(8px);
}
.product-tour-welcome.active .product-tour-welcome-badge {
animation: welcomeContentIn 0.44s ease-out 0.16s both;
}
.product-tour-welcome-title {
margin: 12px 0 8px;
color: #1f2430;
font-size: 28px;
line-height: 1.16;
opacity: 0;
transform: translateY(10px);
}
.product-tour-welcome.active .product-tour-welcome-title {
animation: welcomeContentIn 0.44s ease-out 0.2s both;
}
.product-tour-welcome-subtitle {
margin: 0 0 10px;
color: #2b3342;
font-size: 14px;
font-weight: 600;
line-height: 1.45;
opacity: 0;
transform: translateY(10px);
}
.product-tour-welcome.active .product-tour-welcome-subtitle {
animation: welcomeContentIn 0.44s ease-out 0.24s both;
}
.product-tour-welcome-text {
margin: 0 0 14px;
color: #4a5160;
font-size: 15px;
line-height: 1.55;
opacity: 0;
transform: translateY(10px);
}
.product-tour-welcome.active .product-tour-welcome-text {
animation: welcomeContentIn 0.44s ease-out 0.28s both;
}
.product-tour-welcome-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 0 0 18px;
}
.product-tour-welcome-item {
border: 1px solid #e6ebf2;
border-radius: 12px;
background: #ffffff;
padding: 12px;
opacity: 0;
transform: translateY(10px);
transition: border-color 0.24s ease, box-shadow 0.24s ease;
}
.product-tour-welcome-item:hover {
border-color: #d8e1eb;
box-shadow: 0 8px 18px rgba(25, 35, 52, 0.08);
}
.product-tour-welcome.active .product-tour-welcome-item:nth-child(1) {
animation: welcomeContentIn 0.4s ease-out 0.34s both;
}
.product-tour-welcome.active .product-tour-welcome-item:nth-child(2) {
animation: welcomeContentIn 0.4s ease-out 0.39s both;
}
.product-tour-welcome.active .product-tour-welcome-item:nth-child(3) {
animation: welcomeContentIn 0.4s ease-out 0.44s both;
}
.product-tour-welcome.active .product-tour-welcome-item:nth-child(4) {
animation: welcomeContentIn 0.4s ease-out 0.49s both;
}
.product-tour-welcome-item h3 {
margin: 0 0 5px;
color: #202734;
font-size: 14px;
line-height: 1.3;
}
.product-tour-welcome-item p {
margin: 0;
color: #5b6475;
font-size: 12px;
line-height: 1.5;
}
.product-tour-welcome-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 8px;
border-top: 1px solid #edf1f5;
opacity: 0;
transform: translateY(10px);
}
.product-tour-welcome.active .product-tour-welcome-footer {
animation: welcomeContentIn 0.45s ease-out 0.54s both;
}
.product-tour-welcome-note {
color: #616b7d;
font-size: 12px;
line-height: 1.45;
}
.product-tour-welcome-start {
min-width: 160px;
padding: 11px 18px;
font-size: 14px;
transition: transform 0.18s ease, box-shadow 0.24s ease;
}
.product-tour-welcome-start:hover {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(191, 24, 35, 0.24);
}
@keyframes welcomeBackdropIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes welcomeCardIn {
from {
opacity: 0;
transform: translateY(18px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes welcomeContentIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes welcomeSweep {
from {
transform: translateX(-120%);
}
to {
transform: translateX(125%);
}
}
@media (max-width: 768px) {
.product-tour-tooltip {
max-width: min(320px, 90vw);
min-width: 220px;
}
.product-tour-actions {
flex-wrap: wrap;
justify-content: flex-end;
}
.product-tour-interaction {
width: 100%;
}
.tour-replay {
flex-direction: column;
align-items: flex-start;
}
.product-tour-welcome {
align-items: flex-end;
padding: 12px;
}
.product-tour-welcome-card {
border-radius: 14px;
padding: 18px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
}
.product-tour-welcome-title {
font-size: 22px;
}
.product-tour-welcome-grid {
grid-template-columns: 1fr;
}
.product-tour-welcome-footer {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 520px) {
.product-tour-tooltip {
width: calc(100vw - 16px);
min-width: 0;
max-width: calc(100vw - 16px);
border-radius: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.product-tour-welcome,
.product-tour-welcome * {
animation: none !important;
transition: none !important;
}
.product-tour-welcome-card,
.product-tour-welcome-badge,
.product-tour-welcome-title,
.product-tour-welcome-subtitle,
.product-tour-welcome-text,
.product-tour-welcome-item,
.product-tour-welcome-footer {
opacity: 1 !important;
transform: none !important;
}
}
.solicitud-linea-item:hover {
border-color: #c0c0c0;
background: #f5f5f5;
}
.solicitud-linea-item input[type="checkbox"] {
accent-color: #BF1823;
cursor: pointer;
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
}
.solicitud-linea-item:has(input:checked) {
border-color: #BF1823;
background: #fff5f6;
box-shadow: 0 2px 8px rgba(191, 24, 35, 0.15);
}
.solicitud-linea-item span {
flex: 1;
font-weight: 500;
}
.solicitud-vehiculo-resumen {
padding: 11px 14px;
border-radius: 12px;
background: #fafafa;
border: 1.5px solid #e0e0e0;
font-size: 14px;
color: #333;
line-height: 1.5;
}
.input-hint {
margin-top: 6px;
font-size: 12px;
color: #6b6b6b;
text-align: left;
line-height: 1.4;
}
.solicitud-estado {
margin-top: 12px;
padding: 10px;
font-size: 13px;
color: #575657;
text-align: center;
background: #f0f0f0;
border-radius: 8px;
line-height: 1.4;
}
#modal-solicitud-repuestos .modal-actions {
display: flex;
gap: 12px;
margin-top: 20px;
padding-top: 0;
border-top: none;
}
#modal-solicitud-repuestos .modal-actions button {
flex: 1;
padding: 12px 20px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
border: none;
}
#modal-solicitud-repuestos .btn-cancel {
background: #f0f0f0;
color: #333;
}
#modal-solicitud-repuestos .btn-cancel:hover {
background: #e0e0e0;
transform: translateY(-1px);
}
#modal-solicitud-repuestos .btn-cancel:active {
transform: translateY(0);
}
#modal-solicitud-repuestos .btn-save {
background: #BF1823;
color: #ffffff;
}
#modal-solicitud-repuestos .btn-save:hover {
background: #a01620;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(191, 24, 35, 0.3);
}
#modal-solicitud-repuestos .btn-save:active {
transform: translateY(0);
}
#modal-solicitud-repuestos .btn-save:disabled {
background: #ccc;
cursor: not-allowed;
opacity: 0.6;
}
@media (max-width: 640px) {
.solicitud-repuestos-modal {
max-width: 96vw;
width: 96vw;
max-height: 92vh;
}
#modal-solicitud-repuestos .modal-header {
padding: 14px 16px;
}
#modal-solicitud-repuestos .modal-header h3 {
font-size: 17px;
}
#modal-solicitud-repuestos .modal-body {
padding: 16px;
}
.solicitud-lineas-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.solicitud-linea-item {
padding: 10px 12px;
}
#modal-solicitud-repuestos .modal-actions button {
padding: 11px 16px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.solicitud-repuestos-modal {
border-radius: 12px;
}
#modal-solicitud-repuestos .modal-header h3 {
font-size: 16px;
}
#modal-solicitud-repuestos .modal-close {
font-size: 24px;
width: 28px;
height: 28px;
}
.solicitud-form .form-group {
margin-bottom: 14px;
}
}
/* Columnas invisibles pero disponibles en el DOM para lógica */
.col-hidden {
display: none !important;
}
.btn-ver-repuestos {
display: inline-block;
background: none;
border: none;
color: #BF1823;
font-weight: 600;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
text-decoration: none;
}
.btn-ver-repuestos:hover {
background: #ffe9ec;
}
/* ===== CRUCES INTELIGENTES EN TABLA GRUPO ===== */
.cruce-inteligente-cell {
padding: 8px !important;
}
.cruce-producto-info {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.cruce-cantidad {
font-size: 13px;
font-weight: 600;
color: #333;
}
.cruce-score {
font-size: 12px;
padding: 2px 8px;
border-radius: 12px;
font-weight: 600;
}
.cruce-score.score-high {
background: #d4edda;
color: #155724;
}
.cruce-score.score-medium {
background: #fff3cd;
color: #856404;
}
.cruce-score.score-low {
background: #f8d7da;
color: #721c24;
}
.btn-ver-cruces {
background: #BF1823;
color: white;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.btn-ver-cruces:hover {
background: #a01520;
}
/* Modal Cruces Inteligentes */
.modal-cruces-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 130000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.modal-cruces-overlay.visible {
opacity: 1;
visibility: visible;
}
.modal-cruces-content {
background: white;
border-radius: 12px;
width: 90%;
max-width: 900px;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-cruces-header {
padding: 20px 24px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-cruces-header h3 {
margin: 0;
font-size: 20px;
color: #333;
}
.modal-cruces-close {
background: none;
border: none;
font-size: 28px;
color: #999;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.2s;
}
.modal-cruces-close:hover {
background: #f5f5f5;
color: #333;
}
.modal-cruces-body {
padding: 24px;
overflow-y: auto;
flex: 1;
}
.cruce-producto-card {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
display: flex;
gap: 16px;
transition: box-shadow 0.2s;
}
.cruce-producto-card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.cruce-producto-img {
width: 80px;
height: 80px;
object-fit: contain;
border-radius: 6px;
background: #f9f9f9;
}
.cruce-producto-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.cruce-producto-nombre {
font-weight: 600;
font-size: 15px;
color: #333;
margin: 0;
}
.cruce-producto-sku {
font-size: 13px;
color: #666;
}
.cruce-producto-aplicaciones {
font-size: 12px;
color: #888;
line-height: 1.4;
}
.cruce-producto-actions {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
justify-content: center;
}
.cruce-producto-stock {
font-size: 13px;
padding: 4px 10px;
border-radius: 12px;
font-weight: 600;
}
.cruce-producto-stock.disponible {
background: #d4edda;
color: #155724;
}
.cruce-producto-stock.limitado {
background: #fff3cd;
color: #856404;
}
.cruce-producto-stock.agotado {
background: #f8d7da;
color: #721c24;
}
.btn-agregar-cruce {
background: #BF1823;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.btn-agregar-cruce:hover {
background: #a01520;
}
.btn-agregar-cruce:disabled {
background: #ccc;
cursor: not-allowed;
}
.modal-cruces-empty {
text-align: center;
padding: 40px;
color: #999;
font-size: 15px;
}
/* Modal Lista de Repuestos */
.lr-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 120000;
opacity: 0;
visibility: hidden;
transition: opacity .2s, visibility .2s;
}
.lr-overlay.visible {
opacity: 1;
visibility: visible;
}
.lr-modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) scale(.98);
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,.2);
z-index: 120001;
width: 98%;
max-width: 1200px;
max-height: 85vh;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: transform .2s, opacity .2s, visibility .2s;
display: flex;
flex-direction: column;
}
.lr-modal.visible {
opacity: 1;
visibility: visible;
transform: translate(-50%,-50%) scale(1);
}
/* === DESKTOP: Modal Header Layout === */
.lr-header {
padding: 16px 20px;
border-bottom: 1px solid #eee;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
.lr-header h3 {
margin: 0;
font-size: 18px;
color: #333;
flex-shrink: 0;
}
.lr-close {
background: none;
border: none;
font-size: 24px;
color: #666;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
flex-shrink: 0;
}
.lr-close:hover {
color: #333;
}
.lr-subheader {
padding: 10px 20px;
font-size: 13px;
color: #666;
}
.lr-body {
padding: 0 20px 20px 20px;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.lr-table-wrapper {
overflow: auto;
flex: 1;
min-height: 0;
}
.lr-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.lr-table thead {
background: #f7f7f7;
}
.lr-table th,
.lr-table td {
padding: 12px 14px;
border-bottom: 1px solid #eaeaea;
text-align: left;
color: #333;
}
.lr-table th {
font-weight: 700;
font-size: 13px;
color: #555;
}
.lr-table tr:hover td {
background: #fafafa;
}
.lr-paginacion {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
}
.lr-table td .btn-ver-text {
background: none;
border: none;
color: #BF1823;
font-weight: 600;
cursor: pointer;
padding: 6px 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.lr-table td .btn-ver-text:hover {
text-decoration: underline;
}
/* === ICONOS DE MODAL LR === */
/* Iconos pre-coloreados en rojo (CARROROJO.svg y VERROJO.svg) - SIN FILTROS */
.lr-table td .btn-ver-text .icon-left img.icon-lr-no-filter,
.lr-table td .btn-ver-text .icon-left--lr img.icon-lr-no-filter,
.btn-ver-text--lr .icon-left--lr img.icon-lr-no-filter,
.btn-ver-text--lr .icon-left img.icon-lr-no-filter,
img.icon-lr-no-filter {
width: 16px !important;
height: 16px !important;
display: inline-block !important;
filter: none !important;
-webkit-filter: none !important;
image-rendering: -webkit-optimize-contrast !important;
image-rendering: crisp-edges !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Forzar color institucional en íconos de la modal LR */
.btn-ver-text--lr {
color: #BF1823 !important;
}
/* Contenedor de título y botón en tabla grupo */
.tabla-grupo-title-section {
display: flex;
align-items: center;
gap: 24px;
}
.tabla-grupo-title-section h2 {
margin-bottom: 8px;
}
.tabla-grupo-title-section p {
margin-top: 0;
}
/* Icono de carrito en header del panel */
.cart-header-icon {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
margin-right: 8px;
}
/* Contenedor de búsqueda en header del modal LR - DESKTOP: pegado a la derecha */
.lr-header-search-container {
display: flex;
align-items: center;
margin-left: auto;
}
.lr-header-search-container .search-general {
width: 300px;
}
/* Estilos de paginación en modal LR */
#lr-paginacion {
padding: 16px 20px;
border-top: 1px solid #eee;
flex-shrink: 0;
background: #fff;
}
/* Ajuste responsive para paginación de tabla grupo */
#paginacion-grupo {
margin-top: 12px;
display: none;
}
#paginacion-grupo.visible {
display: flex;
}
/* Estilos para elementos de precio en tabla LR */
.precio-anterior-lr {
text-decoration: line-through;
color: #999;
font-size: 12px;
}
.precio-actual-lr {
font-weight: bold;
color: #333;
}
/* Botón con margen en modal LR */
.btn-ver-text--lr.btn-add-cart {
margin-right: 12px;
}
/* Iconos de flechas de paginación */
.page-arrow-icon {
width: 12px;
height: auto;
}
/* Estrella favorito en tabla */
.star-favorite-table {
display: inline-block;
vertical-align: middle;
margin-right: 6px;
pointer-events: none;
cursor: default;
}
/* Mobile layout: tabla-grupo → tarjetas apiladas y modal responsiva */
@media (max-width: 768px) {
.tabla-grupo-wrapper {
overflow: visible;
max-height: none;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.tabla-grupo-header {
flex-direction: column;
align-items: stretch;
}
.tabla-grupo-header > div:first-child {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
}
.tabla-grupo-header h2 {
font-size: 18px;
}
table.tabla-grupo,
table.tabla-grupo thead,
table.tabla-grupo tbody,
table.tabla-grupo th,
table.tabla-grupo td,
table.tabla-grupo tr {
display: block;
}
table.tabla-grupo thead {
position: static;
height: 0;
overflow: hidden;
}
table.tabla-grupo tr {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 6px 16px rgba(0,0,0,0.06);
margin-bottom: 14px;
padding: 12px 12px 4px 12px;
}
table.tabla-grupo td {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 8px 0;
border-bottom: 1px solid #f1f1f1;
white-space: normal;
}
table.tabla-grupo td:last-child {
border-bottom: none;
}
table.tabla-grupo td::before {
content: attr(data-label);
font-weight: 600;
color: #444;
margin-right: 12px;
min-width: 110px;
}
table.tabla-grupo td.patente-cell {
justify-content: space-between;
align-items: center;
gap: 8px;
}
table.tabla-grupo td.patente-cell .star-favorite-table {
order: 1;
}
table.tabla-grupo td a.btn-ver-repuestos {
margin-left: auto;
}
.lr-modal {
width: 96%;
max-width: 96%;
height: auto;
max-height: 90vh;
border-radius: 12px;
top: 50%;
transform: translate(-50%, -50%) scale(1);
display: flex;
flex-direction: column;
}
.lr-body {
padding: 0 12px 16px 12px;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
.lr-table-wrapper {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.lr-table-wrapper::-webkit-scrollbar {
display: none;
}
/* === MOBILE: Modal Header Layout === */
.lr-header {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0;
padding: 16px 20px 0 20px;
}
.lr-header h3 {
margin: 0;
flex: 1;
order: 1;
padding-right: 12px;
}
.lr-header .lr-close {
position: static;
margin-left: 0;
order: 2;
}
.lr-header-search-container {
width: 100vw;
margin-left: calc(-20px);
margin-right: 0;
padding: 12px 0 16px 0;
flex-basis: 100%;
order: 3;
}
.lr-header-search-container .search-general {
width: calc(100% - 40px);
margin: 0 20px;
min-width: none;
display: flex;
}
.lr-header-search-container .search-general input {
flex: 1;
text-align: left;
}
.lr-subheader {
font-size: 12px;
}
.lr-table-wrapper {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: none;
}
table.lr-table,
table.lr-table thead,
table.lr-table tbody,
table.lr-table th,
table.lr-table td,
table.lr-table tr {
display: block;
}
table.lr-table thead {
position: static;
height: 0;
overflow: hidden;
}
table.lr-table tr {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 6px 16px rgba(0,0,0,0.06);
margin-bottom: 14px;
padding: 12px;
}
table.lr-table td {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #f1f1f1;
white-space: normal;
}
table.lr-table td:last-child {
border-bottom: none;
}
table.lr-table td::before {
content: attr(data-label);
font-weight: 600;
color: #444;
min-width: 140px;
}
table.lr-table td .btn-ver-text {
white-space: nowrap;
}
table.lr-table td.actions-cell {
flex-direction: row;
align-items: center;
gap: 12px;
justify-content: space-between;
}
table.lr-table td.actions-cell .btn-ver-text {
width: auto;
}
/* Ocultar la etiqueta "Acciones" en mobile */
table.lr-table td.actions-cell::before {
content: '';
display: none;
min-width: 0;
}
/* Iconos en mobile de modal LR - sin filtros para pre-coloreados */
table.lr-table td .btn-ver-text .icon-left--lr img.icon-lr-no-filter,
table.lr-table td .btn-ver-text .icon-left img.icon-lr-no-filter {
filter: none !important;
-webkit-filter: none !important;
}
}
/* Ensure pagination arrows are visible on dark top bar */
.pagina-indicator button img {
filter: brightness(0) invert(1);
}
/* ============================================================ */
/* FILTROS AVANZADOS - MODAL CRUCES */
/* ============================================================ */
/* Panel de filtros con animación suave */
#filtros-avanzados-panel {
animation: slideDown 0.3s ease-out;
transition: all 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Estilo para los selects de filtros */
#filtros-avanzados-panel select {
transition: all 0.2s ease;
}
#filtros-avanzados-panel select:focus {
border-color: #BF1823;
box-shadow: 0 0 0 3px rgba(191, 24, 35, 0.1);
outline: none;
}
/* Badges de filtros activos */
#filtros-activos-badges > div {
animation: fadeInScale 0.2s ease-out;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Hover en botones de badges */
#filtros-activos-badges button:hover {
transform: scale(1.2);
transition: transform 0.15s ease;
}
/* Animación para cruce-card al filtrar */
.cruce-card {
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Contador de productos con animación */
#contador-cruces {
transition: all 0.2s ease;
font-weight: 600;
}
#contador-cruces.actualizado {
color: #BF1823;
animation: pulse 0.5s ease;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Responsive para filtros */
@media (max-width: 768px) {
#filtros-avanzados-panel > div:last-of-type {
grid-template-columns: 1fr;
}
#filtros-avanzados-panel h4 {
font-size: 13px;
}
}
/* ============================================================ */
/* FILTROS AVANZADOS - MODAL BULK PRODUCTOS */
/* ============================================================ */
#bulk-filtros-avanzados-panel {
animation: slideDown 0.3s ease-out;
transition: all 0.3s ease;
}
#bulk-filtros-avanzados-panel select {
transition: all 0.2s ease;
appearance: none;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 34px;
}
#bulk-filtros-avanzados-panel select:hover {
border-color: #4a90e2;
box-shadow: 0 2px 6px rgba(74, 144, 226, 0.1);
}
#bulk-filtros-avanzados-panel select:focus {
border-color: #4a90e2;
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
outline: none;
}
/* Badges de filtros activos (bulk) */
#bulk-filtros-activos-badges > div {
animation: fadeInScale 0.2s ease-out;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Hover en botones de badges (bulk) */
#bulk-filtros-activos-badges button:hover {
transform: scale(1.15);
transition: transform 0.15s ease;
}
/* Contador de productos con animación (bulk) */
#contador-bulk-productos {
transition: all 0.2s ease;
}
#contador-bulk-productos.actualizado {
animation: pulse 0.5s ease;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Contador de seleccionados */
#seleccionados-bulk-count {
animation: fadeInScale 0.2s ease-out;
}
/* Responsive para filtros (bulk) */
@media (max-width: 768px) {
#bulk-filtros-avanzados-panel > div:nth-child(2) {
grid-template-columns: 1fr;
}
#bulk-filtros-avanzados-panel h4 {
font-size: 13px;
}
#contador-bulk-productos {
font-size: 12px;
}
}
/* Estado de cuenta: notebooks y desktop pequeno */
@media (min-width: 769px) and (max-width: 1366px) {
.estado-cuenta-page .main-content {
padding: 16px 20px;
}
.estado-cuenta-page .page-container {
padding: 16px;
}
.estado-cuenta-page .main-header {
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
}
.estado-cuenta-page .header-left {
flex: 1 1 220px;
min-width: 0;
}
.estado-cuenta-page .header-actions {
flex: 1 1 420px;
min-width: 0;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
}
.estado-cuenta-page main.dashboard {
grid-template-columns: 1fr;
gap: 20px;
}
.estado-cuenta-page .dashboard .estado-box {
min-width: 0;
}
.estado-cuenta-page .mis-facturas .listado-tabla {
width: 100%;
overflow-x: auto;
}
.estado-cuenta-page .mis-facturas #tabla-facturas {
min-width: 640px;
}
}