/* Shared site styles (moved from caja.html) */
:root{
/* Restored original blue palette */
--q-primary: #006bc2; /* primary blue */
--q-secondary: #005da6; /* darker blue */
--q-accent: #0fb8b5;
--q-surface: #ffffff;
--q-bg: #f4f6f9;
--q-text: #063856;
--q-muted: #6c757d;
--q-success: #2f9e44;
--q-danger: #e11d48;
/* Backwards-compatible names used across the CSS */
--primary-blue: var(--q-primary);
--secondary-blue: var(--q-secondary);
--primary-blue-gradient: linear-gradient(160deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
/* RGB tuple for shadows/overlays (primary blue) */
--primary-rgb: 0,107,194;
}
body { font-family: 'Poppins', sans-serif; background-color: #eef2f7; }
.main-card { background: white; border-radius: 18px; box-shadow: 0 10px 30px rgba(var(--primary-rgb),0.08); overflow: hidden; max-width: 1200px; margin: 30px auto; }
.card-header-custom { background: var(--primary-blue-gradient); padding: 28px 20px; text-align: center; color: white; box-shadow: 0 15px 40px rgba(0,107,194,0.12);}
.header-title{ font-weight:600; font-size:1.4rem; margin:0 }
.card-body-custom{ padding: 22px; }
.product-grid .product-card{ background:#fff; border-radius:12px; padding:20px; box-shadow: 0 8px 30px rgba(6,22,39,0.07); display:flex; flex-direction:column; height:100%; transition: transform .18s ease, box-shadow .18s ease; }
.product-item{ display:flex; }
.card-img-placeholder{ height:80px; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--primary-blue); }
.product-name{ font-weight:600; margin-bottom:6px; font-size:0.95rem; color:#212529 }
.product-price{ color:var(--primary-blue); font-weight:700; margin-bottom:8px }
.qty-control{ display:flex; align-items:center; gap:12px; justify-content:center }
.btn-qty{ width:48px; height:48px; border-radius:10px; border:1px solid #e9ecef; background:#f8f9fa; box-shadow: 0 6px 18px rgba(6,22,39,0.08); font-size:1.05rem; }
.qty-value{ min-width:26px; text-align:center; display:inline-block }
product-card.selected{
border:2px solid rgba(var(--primary-rgb),0.22);
box-shadow: 0 24px 60px rgba(6,22,39,0.18);
/* No vertical translation or scaling to keep cards aligned in grid */
transform: none;
background: linear-gradient(180deg, rgba(var(--primary-rgb),0.03), #ffffff);
}
.product-card.selected .product-name{ color:#003a6b; }
.product-card.selected .product-price{ color:#003a6b; }
.product-grid .product-card:hover{ box-shadow: 0 14px 40px rgba(6,22,39,0.10); }
.btn-qty{ width:48px; height:48px; border-radius:10px; border:1px solid #e9ecef; background:#f8f9fa; box-shadow: 0 6px 18px rgba(6,22,39,0.08); font-size:1.05rem; }
.total-bar{ display:flex; justify-content:space-between; align-items:center; padding:18px; border-top:1px solid #f1f3f5; margin-top:18px; box-shadow: 0 8px 30px rgba(6,22,39,0.04); border-radius: 12px; background: #fff; }
.total-label{ color:#6c757d; font-weight:600 }
.total-value{ color:#005ba8; font-weight:700; font-size:1.6rem }
#noResults{ display:none; align-items:center; justify-content:center; padding:40px; color:#6c757d }
/* Search input highlighting */
#searchInput{
background: #fff;
border-radius: 30px;
border: 1px solid rgba(13,110,253,0.06);
box-shadow: 0 6px 20px rgba(6,22,39,0.06);
transition: box-shadow .15s ease, transform .08s ease;
}
#searchInput:focus{
outline: none;
border-color: rgba(var(--primary-rgb),0.18);
box-shadow: 0 12px 40px rgba(var(--primary-rgb),0.12);
transform: translateY(-1px);
}
#searchInput::placeholder{ color: #9aa6b2; }
@media (max-width:767px){
.main-card{ margin:12px; border-radius:12px }
.card-header-custom{ border-radius:0 0 12px 12px }
.product-grid .product-card{ padding:10px; flex-direction:row; align-items:center }
.card-img-placeholder{ width:84px; height:84px; font-size:22px; display:flex; align-items:center; justify-content:center }
.card-content{ flex:1; padding-left:10px }
/* Centrar controles de cantidad en móvil en vez de empujar a la derecha */
.qty-control{ margin-left:0; justify-content:center }
.btn-qty{ width:48px; height:48px }
/* Barra total fija en móvil: safe-area y mayor visibilidad */
.total-bar{
position:fixed;
bottom: env(safe-area-inset-bottom, 0);
left:0; right:0;
z-index:1200;
background: rgba(255,255,255,0.98);
padding:16px 18px;
box-shadow:0 -12px 30px rgba(3,54,95,0.08);
border-top-left-radius:12px;
border-top-right-radius:12px;
border-top:1px solid rgba(0,0,0,0.06);
margin:0;
backdrop-filter: blur(6px);
}
/* Evitar que el contenido quede oculto bajo la barra fija (ajustable)
Apply padding only when page explicitly opts-in via `.has-total-bar` */
.has-total-bar { padding-bottom: 140px }
/* En móvil ocultar el snackbar para evitar duplicidad con el header-message */
.snackbar{ display: none !important }
/* Centrar el contenido de la barra total en móvil */
.total-bar{ justify-content:center; gap:14px; }
.total-bar > div:first-child{ text-align:center; display:flex; flex-direction:column; align-items:center }
.total-bar .d-flex{ justify-content:center; gap:10px }
}
/* On mobile hide the header badge and show a compact message instead */
@media (max-width:767px){
.card-header-custom .header-badge{ display:none !important }
/* Make the mobile header badge more compact and centered vertically */
.card-header-custom{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px }
.header-badge-mobile{
display:inline-flex;
align-items:center;
justify-content:center;
background: rgba(0,0,0,0.12);
border-radius:6px;
padding:4px 8px;
height:30px;
font-size:0.85rem;
line-height:1;
margin:0 auto;
min-width: 120px;
box-sizing: border-box;
}
.header-badge-mobile a{ color: #fff; text-decoration:underline; font-weight:700 }
}
/* Desktop header layout */
@media (min-width:768px){
.card-header-custom{ display:flex; align-items:center; justify-content:space-between; padding:28px 36px; text-align:left }
.card-header-custom .header-left{ display:flex; align-items:center; gap:18px }
.card-header-custom .logo-lg{ width:140px }
.card-header-custom .header-titles{ display:flex; flex-direction:column }
.card-header-custom .header-title{ font-size:1.6rem; margin:0; font-weight:700 }
.card-header-custom .header-subtitle{ margin:0; opacity:0.95; font-weight:500 }
.card-header-custom .header-right{ display:flex; align-items:center; gap:12px }
.card-header-custom .header-badge .badge{ padding:10px 14px; font-weight:700 }
.card-header-custom .header-alert{ max-width:420px }
}
/* Flex helpers to keep product cards aligned on small screens */
.product-grid{ display:flex; flex-wrap:wrap; gap:12px }
.product-grid .product-card{ flex: 1 1 calc(50% - 12px); display:flex; flex-direction:row; align-items:stretch }
.product-card .card-content{ display:flex; flex-direction:column; justify-content:space-between; width:100% }
.product-card .card-img-placeholder{ flex: 0 0 84px; height:84px }
.product-item{ display:flex; align-items:stretch }
/* Horizontal form rows for desktop: group fields side-by-side */
.form-row-horizontal{ display:flex; flex-direction:column; gap:12px }
.form-row-horizontal .mb-3{ margin-bottom:0 }
@media (min-width:768px){
.form-row-horizontal{ flex-direction:row; align-items:flex-start }
.form-row-horizontal .mb-3{ flex:1 }
/* Give the first column a bit more space when needed (e.g., name) */
.form-row-horizontal .mb-3.wide{ flex:2 }
}
/* Small visual tweak for select width when in row */
.form-row-horizontal select.form-select{ min-width:150px }
/* Improve text truncation and ensure cards fill column height */
.product-item > .product-card{ height:100%; display:flex; flex-direction:column }
.product-name{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
/* Reserve some minimum height so rows look uniform */
.product-grid .product-card{ min-height:160px }
/* Badges area should not push card too tall */
.badges-container{ min-height:20px; margin-bottom:6px }
/* Badges area should not push card too tall. Use minimal footprint when empty */
.badges-container{ min-height:0; margin-bottom:0; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.badges-container .badge{ margin-bottom:6px }
/* On very small screens, reduce min-height so more cards fit vertically */
@media (max-width:420px){
.product-grid .product-card{ min-height:100px }
.product-card .card-img-placeholder{ flex:0 0 64px; width:64px; height:64px }
}
/* Optional: make product-price slightly separated from name */
.product-price{ margin-top:6px; font-size:0.98rem }
/* Mejoras visuales para botones secundarios redondeados dentro de la tarjeta principal */
.main-card .btn-outline-secondary.rounded-pill{
border-color: rgba(13,110,253,0.08);
color: #495057;
background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(250,250,250,0.75));
box-shadow: 0 6px 18px rgba(6,22,39,0.04);
transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.main-card .btn-outline-secondary.rounded-pill .bi{ color: #0d6efd; }
.main-card .btn-outline-secondary.rounded-pill:hover,
.main-card .btn-outline-secondary.rounded-pill:focus{
transform: translateY(-2px);
background: linear-gradient(180deg, #ffffff, #f1f5fb);
border-color: rgba(13,110,253,0.18);
color: #0b5ed7;
box-shadow: 0 10px 30px rgba(0,93,166,0.08);
text-decoration: none;
}
/* Variante sutil para el icono dentro del botón, mantiene contraste en estados inactivos */
.main-card .btn-outline-secondary.rounded-pill .bi{ transition: color .12s ease, transform .12s ease; }
.main-card .btn-outline-secondary.rounded-pill:hover .bi{ transform: translateY(-1px); color: #0b5ed7; }
/* Header buttons: usar misma tipografía (Poppins) y colores más ricos y consistentes */
.card-header-custom .btn{
font-family: 'Poppins', sans-serif;
font-weight: 600;
letter-spacing: 0.1px;
padding-top: .5rem;
padding-bottom: .5rem;
}
/* Botón primario redondeado (header) */
.main-card .btn-primary.rounded-pill{
background: var(--primary-blue);
border: 1px solid rgba(0,93,166,0.12);
box-shadow: 0 10px 28px rgba(3,54,95,0.12);
color: #fff;
transition: transform .12s ease, box-shadow .12s ease;
}
.main-card .btn-primary.rounded-pill .bi{ margin-right:6px; }
.main-card .btn-primary.rounded-pill:hover,
.main-card .btn-primary.rounded-pill:focus{
transform: translateY(-3px);
background: var(--secondary-blue);
box-shadow: 0 18px 46px rgba(3,54,95,0.18);
}
/* Botón secundario (outline) en header: tono frío, texto más oscuro para mejor legibilidad */
.main-card .btn-outline-secondary.rounded-pill{
border-color: rgba(3,54,95,0.06);
color: #08324a;
background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(246,251,255,0.9));
box-shadow: 0 6px 18px rgba(6,22,39,0.04);
}
.main-card .btn-outline-secondary.rounded-pill .bi{ color:#0d6efd }
.main-card .btn-outline-secondary.rounded-pill:hover{
border-color: rgba(3,54,95,0.14);
color:#053047;
box-shadow: 0 12px 30px rgba(3,54,95,0.08);
}
/* Aplicar diseño consistente a TODOS los botones */
.btn{
font-family: 'Poppins', sans-serif;
font-weight: 600;
letter-spacing: 0.1px;
}
/* Botones primarios globales */
.btn-primary{
background: var(--primary-blue);
border: 1px solid rgba(0,91,168,0.12);
box-shadow: 0 8px 24px rgba(3,54,95,0.10);
color: #fff;
transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary .bi{ margin-right:6px }
.btn-primary:hover, .btn-primary:focus{
transform: translateY(-3px);
background: var(--secondary-blue);
box-shadow: 0 16px 46px rgba(3,54,95,0.16);
}
/* Botones secundarios outline globales */
.btn-outline-secondary{
border-color: rgba(3,54,95,0.06);
color: #08324a;
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(246,251,255,0.95));
box-shadow: 0 6px 18px rgba(6,22,39,0.04);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus{
border-color: rgba(3,54,95,0.14);
color: #053047;
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(3,54,95,0.08);
}
/* Mantener accesibilidad: foco visible */
.btn:focus{
outline: 3px solid rgba(0,93,166,0.12);
outline-offset: 2px;
}
/* Inputs, selects and textareas: rounded corners and subtle transition for desktop */
.form-control, .form-select, textarea {
border-radius: 10px;
transition: box-shadow .12s ease, border-color .12s ease, transform .08s ease;
}
/* Rounded input-group pairs: keep the left addon and the input visually rounded as a single pill */
.rounded-group {
display: flex;
align-items: stretch;
width: 100%;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.06);
background: #fff;
}
/* keep the addon visually distinct but remove its own border so corners are unified */
.rounded-group .input-group-text{
border: none;
background: #f8f9fa;
display: flex; align-items: center; justify-content: center;
padding: 0.45rem 0.75rem;
}
.rounded-group .form-control{
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
}
.rounded-group:focus-within{ box-shadow: 0 10px 30px rgba(0,93,166,0.08); }
@media (min-width: 992px){
/* Slightly larger rounding on desktop for a more modern look */
.form-control, .form-select, textarea { border-radius: 12px; }
}
/* Estilos específicos para la lista de 'Aperturas' (tarjetas) */
.aperturas-list{ display:flex; flex-direction:column; gap:12px }
.aperturas-list .product-item{ width:100%; }
.aperturas-list .product-card{
padding:14px; border-radius:14px; background: linear-gradient(180deg,#ffffff,#f6fbff);
box-shadow: 0 12px 40px rgba(0,93,166,0.06);
transition: transform .14s ease, box-shadow .14s ease, background .12s ease;
display:flex; flex-direction:row; align-items:center; gap:14px;
}
.aperturas-list .product-card .card-content{ padding-left:12px; display:flex; flex-direction:column; width:100% }
.aperturas-list .card-img-placeholder{ flex:0 0 84px; width:84px; height:84px; border-radius:10px; background:linear-gradient(135deg,#eaf4ff,#ffffff); color:var(--primary-blue); display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow: 0 6px 18px rgba(0,93,166,0.06); }
.aperturas-list .product-name{ font-size:1rem; color:#063856; font-weight:700 }
.aperturas-list .product-price.small.text-muted{ color:#6c757d }
.aperturas-list .fw-bold{ color:var(--primary-blue); font-size:1rem }
.aperturas-list .badges-container{ margin-bottom:8px }
.aperturas-list .product-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 80px rgba(0,93,166,0.12); }
/* Desktop: organizar en columnas y tarjetas más altas */
@media (min-width:768px){
.aperturas-list{ display:flex; flex-wrap:wrap; gap:18px }
.aperturas-list .product-item{ flex: 1 1 calc(33.333% - 18px); }
.aperturas-list .product-card{ flex-direction:column; align-items:flex-start; min-height:160px; }
.aperturas-list .card-img-placeholder{ width:100%; height:100px; font-size:28px; border-radius:12px }
.aperturas-list .product-card .card-content{ padding-left:0 }
}
/* Móvil: reducir tamaño y mantener buen espaciado */
@media (max-width:767px){
.aperturas-list .product-card{ padding:12px; gap:10px }
.aperturas-list .card-img-placeholder{ width:64px; height:64px; font-size:20px }
.aperturas-list .product-name{ font-size:0.98rem }
}
/* Corregir problemas de overflow y permitir que el contenido interno se reduzca en pantallas pequeñas */
.aperturas-list,
.aperturas-list .product-item,
.aperturas-list .product-card{
box-sizing: border-box;
max-width: 100%;
}
.aperturas-list .product-card{
flex: 0 0 100% !important;
width: 100% !important;
overflow: hidden;
}
.aperturas-list .card-content{ flex: 1 1 auto; min-width: 0; }
.aperturas-list .product-name{ word-break: break-word; -webkit-line-clamp:2; }
.aperturas-list .card-img-placeholder{ flex: 0 0 auto; }
/* Asegurar que botones y etiquetas no expandan la tarjeta */
.aperturas-list .d-flex .btn{ white-space: nowrap; }
.aperturas-list .badges-container{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
/* Si por alguna razón existe un contenido muy largo, evitar barra horizontal */
body{ overflow-x: hidden; }
/* Snackbar (pequeña notificación flotante) */
.snackbar{
position:fixed;
left:50%;
bottom:22px;
transform:translateX(-50%) translateY(12px);
background: rgba(255,255,255,0.98);
color:#08324a;
padding:10px 14px;
border-radius:10px;
box-shadow: 0 12px 30px rgba(3,54,95,0.12);
z-index:1300;
opacity:0; transition: transform .28s ease, opacity .28s ease;
min-width:280px; max-width:92%; display:flex; justify-content:center; align-items:center;
}
.snackbar.show{ transform:translateX(-50%) translateY(0); opacity:1 }
.snackbar .snackbar-content{ display:flex; align-items:center; gap:12px }
.snackbar a{ color: #0b5ed7; font-weight:600 }
.snackbar .snackbar-close{ background:none; border:0; font-size:18px; line-height:1; cursor:pointer; color:#6c757d }
.snackbar-warning{ background: linear-gradient(90deg,#fff7e6,#fff3d6); border:1px solid rgba(255,193,7,0.18); }
.snackbar-danger{ background: linear-gradient(90deg,#fff0f0,#ffecec); border:1px solid rgba(220,53,69,0.12); }
/* Ajustes finos para pantallas muy pequeñas (320px) */
@media (max-width:320px){
.main-card{ margin:8px; border-radius:10px; }
.card-header-custom{ padding:16px 12px; }
.card-body-custom{ padding:12px; }
/* Aperturas list compacta */
.aperturas-list{ gap:10px }
.aperturas-list .product-card{ padding:10px; gap:8px; min-height:92px; }
.aperturas-list .card-img-placeholder{ width:56px; height:56px; font-size:18px; flex:0 0 56px; border-radius:8px }
.aperturas-list .card-img-placeholder i{ font-size:18px }
.aperturas-list .product-name{ font-size:0.92rem; line-height:1.1; }
.aperturas-list .product-price.small.text-muted{ font-size:0.78rem }
.aperturas-list .fw-bold{ font-size:0.95rem }
.aperturas-list .d-flex .btn{ padding:6px 8px; font-size:0.82rem }
/* Forzar que las tarjetas ocupen todo el ancho y el contenido pueda reducirse */
.aperturas-list,
.aperturas-list .product-item,
.aperturas-list .product-card{ box-sizing:border-box; max-width:100%; width:100% !important; flex:0 0 100% !important; overflow:hidden }
.aperturas-list .card-content{ flex:1 1 auto; min-width:0 }
.aperturas-list .product-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
/* Ajustes generales en caja view (productos) */
.product-grid .product-card{ min-height:100px }
.product-grid .product-card .card-content{ min-width:0 }
.card-img-placeholder{ flex:0 0 auto }
/* Buscar input y total-bar compactos */
#searchInput{ padding-top:10px; padding-bottom:10px; font-size:0.95rem }
.total-bar{ padding:10px; }
.has-total-bar { padding-bottom:140px }
}
/* Ajustes adicionales para móviles muy pequeños: reordenar card a columna y hacer botones full-width */
@media (max-width:480px){
.aperturas-list .product-card{
display:flex;
flex-direction:column;
align-items:stretch;
padding:12px;
gap:10px;
min-height:120px;
}
/* Reordenar elementos: badges arriba, imagen centrada, contenido, precio, acciones */
.aperturas-list .badges-container{ order: 0; align-self:flex-start }
.aperturas-list .card-img-placeholder{ order: 1; margin:6px auto; width:72px; height:72px; flex:0 0 72px }
.aperturas-list .card-content{ order: 2; padding-left:0 }
.aperturas-list .card-content > div:first-child{ order:2 }
.aperturas-list .card-content .fw-bold{ order:3; text-align:center; margin-top:6px }
.aperturas-list .card-content > .mt-2.d-flex{ order:4; margin-top:8px; width:100%; display:flex; flex-direction:column; gap:8px; align-items:center }
/* Botones full-width y stack en móvil pequeño */
.aperturas-list .card-content .d-flex .btn{
width:100%;
display:block;
padding:10px 12px;
box-shadow: 0 10px 28px rgba(2,37,87,0.14);
}
.aperturas-list .card-content .d-flex.gap-2{ gap:8px; }
/* Ajustes tipográficos para que no rompan el layout */
.aperturas-list .product-name{ font-size:0.96rem; text-align:left }
.aperturas-list .product-price.small.text-muted{ text-align:left }
}
/* Fix definitivo para evitar overflow horizontal y asegurar ancho real en móviles */
@media (max-width:767px){
/* dar padding controlado al contenedor para que cards no se salgan */
.aperturas-list{ padding: 0 12px; }
.aperturas-list .product-item{ width:100%; box-sizing:border-box; }
.aperturas-list .product-card{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin: 0 0 12px 0 !important;
overflow: hidden !important;
padding-left:12px !important;
padding-right:12px !important;
}
/* asegurar que elementos internos no forcen ancho */
.aperturas-list .card-content,
.aperturas-list .card-img-placeholder,
.aperturas-list .product-name,
.aperturas-list .product-price{ max-width:100%; box-sizing:border-box }
.aperturas-list .card-img-placeholder{ margin:0 auto 8px auto; }
/* evitar que iconos o botones se desborden */
.aperturas-list .d-flex .btn{ max-width:100%; box-sizing:border-box }
}
/* Móvil: asegurar que las acciones queden en el pie de la tarjeta y aumentar sombras */
@media (max-width:767px){
.aperturas-list .product-card{ align-items:stretch; display:flex; flex-direction:row; }
.aperturas-list .product-card .card-content{ display:flex; flex-direction:column; }
/* El contenedor de acciones (el div con .mt-2.d-flex) se empuja abajo */
.aperturas-list .product-card .card-content > .mt-2{ margin-top:auto; }
/* Aumentar sombra y borde para distinguir cada tarjeta en móvil */
.aperturas-list .product-card{
box-shadow: 0 20px 60px rgba(3,54,95,0.10);
border: 1px solid rgba(3,54,95,0.04);
background: linear-gradient(180deg,#ffffff,#f7fbff);
}
/* Sombra y elevación para los botones de acción dentro de cada tarjeta */
.aperturas-list .product-card .d-flex .btn{
box-shadow: 0 8px 20px rgba(2,37,87,0.16);
border-radius: 8px;
}
/* Si hay varios botones, separarlos y que no rompan la línea */
.aperturas-list .product-card .d-flex.gap-2{ gap:8px; flex-wrap:wrap }
}
/* Alineación centrada de acciones en el pie de la tarjeta (móvil) */
@media (max-width:767px){
.aperturas-list .product-card .card-content > .mt-2.d-flex{
margin-top:auto;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
padding-top:6px;
}
/* Centrar el total y ajustar su espaciado */
.aperturas-list .product-card .card-content > .mt-2 .fw-bold{
text-align:center;
width:100%;
color:#005ba8;
}
/* Botón primario dentro de la tarjeta: tamaño y anchura adecuada */
.aperturas-list .product-card .d-flex .btn.btn-primary{
min-width:88px;
padding:8px 12px;
}
/* Permitir que varios botones se muestren centrados y envueltos si es necesario */
.aperturas-list .product-card .d-flex.gap-2{ justify-content:center; flex-wrap:wrap }
}
/* Nueva estructura de tarjeta remodelada (ap-card) - estilos generales */
.ap-card{
background: linear-gradient(180deg,#ffffff,#f6fbff);
border-radius:12px;
box-shadow:0 18px 48px rgba(3,54,95,0.08);
padding:28px; /* más "aire" dentro de la tarjeta */
display:flex;
flex-direction:column;
align-items:center; /* centrar contenido horizontalmente */
justify-content:center; /* centrar contenido verticalmente */
gap:20px; /* separar secciones dentro de la card */
width:100%;
box-sizing:border-box;
overflow:hidden;
border: 1px solid rgba(3,54,95,0.04);
position:relative;
transition: box-shadow .18s ease, transform .14s ease, border-color .12s ease;
}
.ap-card:hover{ transform: translateY(-6px); box-shadow:0 26px 80px rgba(3,54,95,0.12); }
/* Estado visual: borde lateral distintivo según estado */
.ap-card.ap-open{ border-left-color: rgba(25,135,84,0.9); }
.ap-card.ap-closed{ border-left-color: rgba(108,117,125,0.9); }
/* Separación extra entre tarjetas para que no se confundan */
.aperturas-list .product-item{ padding:6px 0 }
.aperturas-list .ap-card + .ap-card{ margin-top:8px }
/* Aumentar contraste del footer y botones para que destaquen */
.ap-card-footer{ padding-top:6px; border-top:1px dashed rgba(3,54,95,0.03); }
.ap-actions .btn{ box-shadow: 0 10px 30px rgba(3,54,95,0.12); }
.ap-card-head{ display:flex; justify-content:flex-start }
.ap-card-body{ display:flex; gap:22px; align-items:center; justify-content:center }
/* Añadir padding interno al contenedor de contenido para respirar */
.ap-card-content{ padding: 8px 12px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center }
.ap-card-media{ flex:0 0 72px; width:72px; height:72px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#eaf4ff,#ffffff); box-shadow:0 8px 20px rgba(3,54,95,0.06); color:#0d6efd }
.ap-card-content{ flex:1 1 auto; min-width:0 }
.ap-title{ font-weight:700; color:#063856; font-size:1rem; line-height:1.1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.ap-meta{ color:#6c757d; font-size:.92rem; margin-top:6px }
.ap-card-footer{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:relative }
/* Las acciones se colocan ahora en flujo normal y centradas */
.ap-actions{ display:flex; justify-content:center; align-items:center; position:static; transform:none }
.ap-total{ color:#005ba8; font-weight:700; font-size:1rem }
@media (max-width:480px){
.ap-card{ padding:10px }
.ap-card-body{ flex-direction:column; align-items:center; text-align:center }
.ap-card-media{ width:64px;height:64px }
.ap-card-footer{ flex-direction:column; align-items:center }
/* En móvil las acciones vuelven al flujo normal y ocupan todo el ancho */
.ap-actions{ position:static; transform:none; width:100%; display:flex; flex-direction:column; gap:8px }
.ap-actions .btn{ width:100%; padding:10px; border-radius:8px }
.ap-total{ order:0; margin-bottom:6px }
}
/* Franja decorativa roja->azul aplicada ahora a los botones .btn-qty (::before) */
.btn-qty{ position:relative; overflow:hidden }
/* Botones + / - coloreados (fondo completo) */
/* Botones + / - sutiles: fondo suave, borde y sombra ligera */
.btn-qty.btn-plus{
background: linear-gradient(180deg,#e9f2ff,#d7e9ff);
color: #063856;
border: 1px solid rgba(0,86,179,0.12);
box-shadow: 0 6px 12px rgba(6,86,179,0.06);
}
.btn-qty.btn-plus:hover, .btn-qty.btn-plus:focus{
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(6,86,179,0.10);
}
.btn-qty.btn-minus{
background: linear-gradient(180deg,#ffecec,#ffdede);
color: #063856;
border: 1px solid rgba(212,63,63,0.12);
box-shadow: 0 6px 12px rgba(212,63,63,0.06);
}
.btn-qty.btn-minus:hover, .btn-qty.btn-minus:focus{
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(212,63,63,0.10);
}
/* Ajustes estéticos para el número intermedio */
.qty-value{ min-width:32px; text-align:center; display:inline-block; font-weight:600 }
/* Logo en header: estilo propio, tamaño y sombra */
.app-logo{
width:64px;
height:64px;
object-fit:cover;
border-radius:12px;
border: 2px solid rgba(255,255,255,0.9);
box-shadow: 0 10px 30px rgba(3,54,95,0.12);
background: #fff;
padding:6px;
}
/* Efecto de sobresalir (elevación) por estado en las tarjetas de Aperturas */
.apertura-item-card.ap-open{
transform: translateY(-6px);
box-shadow: 0 30px 80px rgba(25,135,84,0.08);
border-left: 6px solid rgba(25,135,84,0.95);
}
.apertura-item-card.ap-closed{
transform: translateY(0);
box-shadow: 0 10px 30px rgba(108,117,125,0.06);
border-left: 6px solid rgba(108,117,125,0.9);
opacity: 0.98;
}
/* Acento en badge según estado para mayor legibilidad */
.apertura-item-card.ap-open .badge-pill{ background: #e6f4ea; color: #0b5e3a; border: none }
.apertura-item-card.ap-closed .badge-pill{ background: #f1f3f5; color: #495057; border: none }
/* Asegurar que el borde lateral no provoque overflow en móvil */
@media (max-width:767px){
.apertura-item-card.ap-open, .apertura-item-card.ap-closed{ border-left-width:6px; padding-left: 1rem }
}
/* ========================================
MODERN PRODUCT CARDS - REDESIGNED
======================================== */
.modern-product-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 107, 194, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.modern-product-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0, 107, 194, 0.16);
border-color: rgba(0, 107, 194, 0.1);
}
.modern-product-card.selected,
.modern-product-card.has-items {
border-color: var(--primary-blue);
background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
box-shadow: 0 8px 32px rgba(0, 107, 194, 0.2);
}
.modern-product-card.selected::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-blue), var(--q-accent));
}
.product-card-inner {
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
height: 100%;
}
/* Product Image Container */
.product-image-container {
position: relative;
width: 100%;
aspect-ratio: 1;
border-radius: 12px;
background: linear-gradient(135deg, #e8f4ff 0%, #d4e9ff 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product-image-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
color: var(--primary-blue);
opacity: 0.6;
transition: all 0.3s ease;
}
.modern-product-card:hover .product-image-wrapper {
transform: scale(1.1);
opacity: 0.8;
}
.modern-product-card.selected .product-image-wrapper {
opacity: 1;
color: var(--primary-blue);
}
.badges-wrapper {
position: absolute;
top: 8px;
right: 8px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-end;
}
.badges-wrapper .badge {
font-size: 0.7rem;
padding: 4px 8px;
border-radius: 6px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.badge-info {
background: linear-gradient(135deg, #17a2b8, #0d8ca3);
color: white;
}
.badge-warning {
background: linear-gradient(135deg, #ffc107, #ff9800);
color: #333;
}
/* Product Details */
.product-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.product-title {
font-size: 1rem;
font-weight: 600;
color: var(--q-text);
margin: 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
}
.modern-product-card.selected .product-title {
color: var(--primary-blue);
font-weight: 700;
}
.product-price-tag {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-blue);
background: linear-gradient(90deg, var(--primary-blue), var(--q-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Product Actions */
.product-actions {
margin-top: auto;
}
.quantity-selector {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 8px;
border-radius: 12px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}
.qty-btn {
width: 36px;
height: 36px;
border-radius: 10px;
border: none;
background: white;
color: var(--primary-blue);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
font-size: 1.1rem;
}
.qty-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 107, 194, 0.2);
}
.qty-btn:active {
transform: scale(0.95);
}
.qty-btn-minus {
background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
color: #dc3545;
}
.qty-btn-minus:hover {
background: linear-gradient(135deg, #ffe5e5 0%, #ffd5d5 100%);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}
.qty-btn-plus {
background: linear-gradient(135deg, #f0f7ff 0%, #e0f0ff 100%);
color: var(--primary-blue);
}
.qty-btn-plus:hover {
background: linear-gradient(135deg, #e0f0ff 0%, #d0e8ff 100%);
box-shadow: 0 4px 12px rgba(0, 107, 194, 0.3);
}
.qty-display {
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.qty-number {
font-size: 1.25rem;
font-weight: 700;
color: var(--q-text);
text-align: center;
transition: all 0.2s ease;
}
.modern-product-card.selected .qty-number {
color: var(--primary-blue);
font-size: 1.4rem;
}
/* Responsive adjustments */
@media (max-width: 576px) {
.product-card-inner {
padding: 14px;
gap: 12px;
}
.product-image-wrapper {
font-size: 2.5rem;
}
.product-title {
font-size: 0.95rem;
min-height: 2.4em;
}
.product-price-tag {
font-size: 1.2rem;
}
.qty-btn {
width: 32px;
height: 32px;
font-size: 1rem;
}
.qty-number {
font-size: 1.1rem;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.product-image-wrapper {
font-size: 3rem;
}
}
@media (min-width: 1200px) {
.product-image-wrapper {
font-size: 4rem;
}
.product-card-inner {
padding: 24px;
}
}
/* Animation for quantity change */
@keyframes pulse-qty {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.qty-number.animate {
animation: pulse-qty 0.3s ease;
}
/* ======================================== */
/* Embedded form appearance: make forms look inserted (card) on mobile */
@media (max-width:767px){
.embedded-form .card{
max-width: calc(100% - 32px);
margin: 12px auto !important;
border-radius: 12px;
box-shadow: 0 18px 50px rgba(3,54,95,0.08);
overflow: visible;
background: #fff;
}
.embedded-form .card-header-custom{ padding: 16px 16px; border-top-left-radius:12px; border-top-right-radius:12px }
.embedded-form .card-body-custom, .embedded-form .card-body{ padding: 14px }
.embedded-form .btn{ border-radius:10px }
}
@media (min-width:768px){
/* Slightly constrain width on desktop when using embedded form */
.embedded-form .card{ max-width: 820px; margin: 20px auto }
}
/* Fullscreen form: immersive checkout on mobile (Option A) */
@media (max-width:767px){
.fullscreen-form, body.fullscreen-form {
background: #f4f6f9; /* subtle background behind the form */
}
.fullscreen-form .card,
body.fullscreen-form .card,
.fullscreen-form .main-card,
body.fullscreen-form .main-card{
position: fixed;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
display: flex;
flex-direction: column;
overflow: hidden;
/* Allow specific fullscreen views to remove the white card background/border
so the header gradient and the page background feel more immersive. */
.fullscreen-form .no-border-card,
body.fullscreen-form .no-border-card{
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.fullscreen-form .no-border-card .card-body,
body.fullscreen-form .no-border-card .card-body,
.fullscreen-form .no-border-card .card-body-custom,
body.fullscreen-form .no-border-card .card-body-custom{
background: transparent !important;
padding: 18px; /* keep internal spacing */
color: #08324a; /* ensure text contrast */
}
}
.fullscreen-form .card-header-custom,
body.fullscreen-form .card-header-custom{
border-radius: 0; padding: 18px 16px;
}
.fullscreen-form .card-body, .fullscreen-form .card-body-custom,
body.fullscreen-form .card-body, body.fullscreen-form .card-body-custom{
padding: 18px; overflow:auto; flex: 1 1 auto;
-webkit-overflow-scrolling: touch;
}
/* Ensure fixed total-bar won't overlap content badly: push content above it */
body.fullscreen-form.has-total-bar .card-body,
body.fullscreen-form.has-total-bar .card-body-custom,
.fullscreen-form.has-total-bar .card-body,
.fullscreen-form.has-total-bar .card-body-custom{ padding-bottom: calc(140px + 18px); }
/* Keep footer buttons visible and tappable */
.fullscreen-form .total-bar, .fullscreen-form .card-footer, .fullscreen-form .modal-footer,
body.fullscreen-form .total-bar, body.fullscreen-form .card-footer, body.fullscreen-form .modal-footer{
z-index: 1300;
}
}
/* Make fullscreen pages flush: remove container side padding so card truly spans edge-to-edge */
@media (max-width:767px){
.fullscreen-form .container, body.fullscreen-form .container{ padding-left:0; padding-right:0; max-width:100%; }
/* Compact header/nav in mobile when using fullscreen mode (similar to index) */
.fullscreen-form .card-header-custom,
body.fullscreen-form .card-header-custom,
.fullscreen-form .main-card .card-header-custom,
body.fullscreen-form .main-card .card-header-custom{
padding: 10px 12px;
align-items: center;
}
.fullscreen-form .card-header-custom .header-left,
.fullscreen-form .main-card .card-header-custom .header-left{ gap:10px }
.fullscreen-form .logo-lg,
body.fullscreen-form .logo-lg,
.fullscreen-form .main-card .logo-lg{ width:64px !important; height:auto }
.fullscreen-form .header-title,
body.fullscreen-form .header-title{ font-size:1rem }
.fullscreen-form .header-subtitle, body.fullscreen-form .header-subtitle{ font-size:0.78rem }
/* Reduce badge/mobile message height slightly */
.fullscreen-form .header-badge-mobile, body.fullscreen-form .header-badge-mobile{ height:26px; padding:3px 8px; font-size:0.82rem }
}