/* ========================================================== Carrito — Responsive limpio y consistente con Cotización Mantiene header/footer sin encogerse en móvil ========================================================== */ :root{ --bg: #ffffff; --card: #ffffff; --soft: #f7f9fc; --border: #e5e7eb; --border-2: #d1d5db; --text: #0f172a; --muted: #475569; --primary: #0b3a8b; /* tu azul */ --primary-2: #0a3380; --radius: 12px; --shadow: 0 10px 30px rgba(2,6,23,.06); } /* Reseteos suaves y seguridad anti “zoom” del layout */ *{ box-sizing: border-box; } html, body{ height:100%; } html, body{ width:100%; max-width:100%; } body{ margin:0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Contenedor principal */ .carrito-wrap{ padding: 24px 12px 40px; } .carrito-title{ font-size: clamp(1.25rem, 1.4vw + 1rem, 1.6rem); margin: 0 0 16px; } /* Mensaje vacío */ .alert-vacio{ background: #f6f9ff; border: 1px solid #dfe6ff; padding: 24px; border-radius: var(--radius); text-align: center; box-shadow: var(--shadow); } .alert-vacio h2{ margin: 0 0 8px; font-size: 1.25rem; } .alert-vacio p{ margin: 0 0 16px; color: #4b5563; } .alert-vacio .actions{ display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* Botones */ .btn{ display:inline-block; padding:.6rem 1rem; border-radius:.7rem; text-decoration:none; font-weight:600; border:1px solid transparent; cursor:pointer; } .btn-primary{ background:var(--primary); color:#fff; border-color:var(--primary); } .btn-primary:hover{ background:var(--primary-2); } .btn-outline{ background:#fff; color:var(--primary); border:1px solid #cfd6e4; } .btn-outline:hover{ background:#f3f6fd; } .btn-link{ background:transparent; color:var(--primary); border:none; text-align:center; } .btn-danger{ background:#ef4444; color:#fff; border-color:#ef4444; } .btn-danger:hover{ background:#dc2626; } .btn-sm{ padding:.45rem .7rem; font-size:.9rem; } .w-100{ width:100%; } /* Grid (lista + resumen) */ .carrito-grid{ display:grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; } @media (max-width: 1024px){ .carrito-grid{ grid-template-columns: 1fr 320px; } } @media (max-width: 900px){ .carrito-grid{ grid-template-columns: 1fr; } } /* ====== LISTA: Contenedor con overflow ====== */ /* CLAVE: el scroll horizontal vive solo aquí, nunca en */ .carrito-lista{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; /* ← scroll X aquí */ overflow-y: hidden; -webkit-overflow-scrolling: touch; box-shadow: var(--shadow); } /* Barra de scroll sutil (webkit) */ .carrito-lista::-webkit-scrollbar{ height:10px; } .carrito-lista::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:10px; border:2px solid #fff; } .carrito-lista::-webkit-scrollbar-track{ background:#fff; } /* Tabla */ .carrito-tabla{ width:100%; border-collapse: collapse; min-width: 760px; /* ← fuerza ancho mínimo en pantallas chicas */ } .carrito-tabla thead th{ background:#fbfdff; font-weight:700; color:#111827; padding:12px 14px; text-align:left; border-bottom:1px solid #eef2f5; position: sticky; top: 0; z-index: 1; } .carrito-tabla th.th-right, .th-right { text-align:right; } .carrito-tabla th.th-center, .th-center { text-align:center; } .carrito-tabla td{ padding:12px 14px; border-bottom:1px solid #f0f2f5; vertical-align: middle; background:#fff; } .carrito-tabla tbody tr:last-child td{ border-bottom:none; } /* Celda de producto */ .td-producto{ display:flex; align-items:flex-start; gap:12px; } .prod-img{ width:72px; height:72px; object-fit:cover; border-radius:10px; border:1px solid #eef2f7; } .prod-info .prod-nombre{ font-weight:600; } .prod-info .prod-id{ font-size:.8rem; color:#6b7280; } /* ====== RESUMEN ====== */ .carrito-resumen .resumen-card{ background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius); padding:16px; box-shadow: var(--shadow); } .resumen-card h3{ margin:0 0 12px; font-size:1.1rem; } .resumen-card .row{ display:flex; justify-content:space-between; padding:8px 0; } .resumen-card .row.total{ font-size:1.05rem; } /* ====== RESPONSIVE FINO ====== */ @media (max-width: 780px){ /* deja respirar inputs/botones dentro de las celdas */ .carrito-tabla td form{ flex-wrap: wrap; } .carrito-tabla td input[type="number"]{ width: 84px; } } @media (max-width: 640px){ /* seguridad extra: nada debe forzar el zoom del sitio */ header, footer, .container, .carrito-wrap, .carrito-grid{ width:100%; max-width:100%; } /* la tabla seguirá pudiendo desplazarse horizontalmente en su contenedor */ .carrito-tabla{ min-width: 680px; } .prod-img{ width:64px; height:64px; } } @media (max-width: 380px){ .carrito-tabla{ min-width: 640px; } } /* Utilidades pequeñas */ .visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .zoomable{ cursor: zoom-in; }