/* ============================================================
   COMPONENTS.CSS - CERASUS PROJECTS
   Detalle producto, carrito, checkout, perfil, login, modales
   ============================================================ */

/* ── DETALLE PRODUCTO ── */
.product-detail { max-width:var(--ancho-maximo); margin:0 auto; padding:var(--espacio-lg); display:grid; grid-template-columns:1fr 1fr; gap:var(--espacio-2xl); }
.gallery { display:grid; grid-template-columns:80px 1fr; gap:var(--espacio-md); align-self:start; }
.gallery-thumbs { display:flex; flex-direction:column; gap:var(--espacio-sm); }
.thumb { width:80px; height:100px; overflow:hidden; cursor:pointer; border:2px solid transparent; transition:border-color var(--transicion-rapida); background-color:var(--gris-fondo); }
.thumb:hover, .thumb.active { border-color:var(--negro); }
.thumb img { width:100%; height:100%; object-fit:cover; }
.gallery-main { position:relative; aspect-ratio:500/769; overflow:hidden; background-color:var(--gris-fondo); }
.gallery-main img { width:100%; height:100%; object-fit:cover; }
.gallery-main .badge-sale-detail { position:absolute; top:16px; left:16px; background-color:var(--blanco-puro); color:var(--negro); padding:6px 14px; font-size:var(--texto-sm); font-weight:var(--peso-bold); letter-spacing:1px; }

/* Info del producto */
.product-info-detail { padding:var(--espacio-md) 0; }
.detail-brand { font-size:var(--texto-base); font-weight:var(--peso-normal); color:var(--gris-oscuro); font-style:italic; margin-bottom:var(--espacio-sm); }
.detail-name { font-size:var(--texto-lg); font-weight:var(--peso-bold); color:var(--negro); margin-bottom:var(--espacio-lg); line-height:1.4; }
.detail-prices { display:flex; align-items:center; gap:var(--espacio-md); margin-bottom:var(--espacio-md); }
.detail-original { font-size:var(--texto-md); color:var(--gris-medio); text-decoration:line-through; }
.detail-discount { font-size:var(--texto-xl); font-weight:var(--peso-bold); color:var(--rojo-descuento); }
.detail-percent { font-size:var(--texto-sm); color:var(--gris-medio); }
.detail-fav { display:flex; align-items:center; gap:6px; color:var(--gris-medio); cursor:pointer; padding:4px; margin-bottom:var(--espacio-xl); }
.detail-fav:hover { color:var(--rosa-sakura); }
.detail-fav svg { width:20px; height:20px; }
.detail-divider { border:none; border-top:var(--borde-fino); margin:var(--espacio-lg) 0; }

/* Selector de color */
.color-selector { margin-bottom:var(--espacio-xl); }
.color-selector-label { font-size:var(--texto-sm); font-weight:var(--peso-medium); margin-bottom:var(--espacio-md); }
.color-circles { display:flex; gap:var(--espacio-md); }
.color-circle { width:32px; height:32px; border-radius:var(--radio-full); border:2px solid var(--gris-claro); cursor:pointer; transition:all var(--transicion-rapida); }
.color-circle:hover, .color-circle.selected { border-color:var(--negro); box-shadow:0 0 0 2px var(--blanco-puro), 0 0 0 4px var(--negro); }

/* Guía de tallas */
.size-guide-link { display:flex; align-items:center; gap:6px; font-size:var(--texto-sm); color:var(--negro); margin-bottom:var(--espacio-md); cursor:pointer; }
.size-guide-link:hover { color:var(--rosa-sakura); }
.size-guide-link svg { width:16px; height:16px; }

/* Selector de tallas */
.size-selector { margin-bottom:var(--espacio-xl); }
.size-options { display:flex; gap:var(--espacio-sm); }
.size-btn { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:var(--borde-fino); font-size:var(--texto-sm); font-weight:var(--peso-medium); cursor:pointer; transition:all var(--transicion-rapida); }
.size-btn:hover, .size-btn.selected { background-color:var(--negro); color:var(--blanco-puro); border-color:var(--negro); }
.size-btn.disabled { opacity:0.3; cursor:not-allowed; }

/* ── Selector de CANTIDAD en página de detalle (+/-) ── */
.qty-selector-detail { margin-bottom:var(--espacio-xl); }
.qty-label { font-size:var(--texto-sm); font-weight:var(--peso-medium); margin-bottom:var(--espacio-sm); color:var(--negro); }
.qty-selector-detail .qty-control { display:inline-flex; align-items:center; border:var(--borde-fino); border-radius:var(--radio-sm); overflow:hidden; background-color:var(--blanco-puro); }
.qty-selector-detail .qty-btn { width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:var(--texto-lg); font-weight:var(--peso-semibold); cursor:pointer; background-color:var(--blanco-puro); border:none; color:var(--negro); transition:background-color var(--transicion-rapida); }
.qty-selector-detail .qty-btn:hover { background-color:var(--gris-fondo); }
.qty-selector-detail .qty-btn:active { background-color:var(--gris-claro); }
.qty-selector-detail .qty-value { min-width:50px; text-align:center; font-size:var(--texto-base); font-weight:var(--peso-semibold); border-left:var(--borde-fino); border-right:var(--borde-fino); padding:10px; user-select:none; }

/* Botón principal negro */
.btn-primary { width:100%; padding:16px; background-color:var(--negro); color:var(--blanco-puro); font-size:var(--texto-base); font-weight:var(--peso-semibold); letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:background-color var(--transicion-base); margin-bottom:var(--espacio-xl); }
.btn-primary:hover { background-color:#333; }

/* Enlaces detalle */
.detail-link { display:block; font-size:var(--texto-sm); color:var(--negro); text-decoration:underline; margin-bottom:var(--espacio-md); cursor:pointer; }
.detail-link:hover { color:var(--rosa-sakura); }

/* Descripción */
.detail-description { margin-top:var(--espacio-lg); font-size:var(--texto-base); color:var(--gris-oscuro); line-height:1.7; }
.detail-description p { margin-bottom:var(--espacio-md); }
.show-more-btn { font-size:var(--texto-sm); color:var(--negro); text-decoration:underline; cursor:pointer; font-weight:var(--peso-medium); }
.detail-sku { font-size:var(--texto-sm); color:var(--gris-medio); margin-top:var(--espacio-md); }

/* Acordeón */
.accordion-item { border-top:var(--borde-fino); padding:var(--espacio-md) 0; }
.accordion-header { display:flex; justify-content:space-between; align-items:center; width:100%; padding:var(--espacio-sm) 0; font-size:var(--texto-base); font-weight:var(--peso-medium); cursor:pointer; }
.accordion-header svg { width:20px; height:20px; transition:transform var(--transicion-rapida); }
.accordion-header.open svg { transform:rotate(180deg); }
.accordion-body { display:none; padding:var(--espacio-md) 0; font-size:var(--texto-sm); color:var(--gris-oscuro); line-height:1.8; }
.accordion-body.open { display:block; }

/* Productos relacionados (fuera del grid de detalle) */
.related-products { max-width:var(--ancho-maximo); margin:0 auto; padding:var(--espacio-2xl) var(--espacio-lg); border-top:var(--borde-fino); }
.related-products h2 { font-size:var(--texto-xl); margin-bottom:var(--espacio-xl); }

/* ── CARRITO ── */
.cart-page { max-width:var(--ancho-contenido); margin:0 auto; padding:var(--espacio-2xl) var(--espacio-lg); }
.cart-page h1 { font-size:var(--texto-2xl); margin-bottom:var(--espacio-2xl); }
.cart-layout { display:grid; grid-template-columns:2fr 1fr; gap:var(--espacio-2xl); }
.cart-item { display:grid; grid-template-columns:100px 1fr auto; gap:var(--espacio-lg); padding:var(--espacio-lg) 0; border-bottom:var(--borde-fino); align-items:center; }
.cart-item-img { width:100px; height:154px; background-color:var(--gris-fondo); overflow:hidden; }
.cart-item-img img { width:100%; height:100%; object-fit:cover; }
.cart-item-info h3 { font-size:var(--texto-base); font-weight:var(--peso-semibold); margin-bottom:var(--espacio-sm); }
.cart-item-info p { font-size:var(--texto-sm); color:var(--gris-medio); margin-bottom:var(--espacio-xs); }
.qty-control { display:flex; align-items:center; border:var(--borde-fino); border-radius:var(--radio-sm); overflow:hidden; margin-top:var(--espacio-md); width:fit-content; }
.qty-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:var(--texto-md); cursor:pointer; }
.qty-btn:hover { background-color:var(--gris-fondo); }
.qty-value { width:40px; text-align:center; font-size:var(--texto-sm); font-weight:var(--peso-semibold); border-left:var(--borde-fino); border-right:var(--borde-fino); padding:6px; }
.cart-item-actions { text-align:right; }
.cart-item-price { font-size:var(--texto-md); font-weight:var(--peso-bold); margin-bottom:var(--espacio-md); }
.cart-remove-btn { font-size:var(--texto-sm); color:var(--gris-medio); text-decoration:underline; cursor:pointer; }
.cart-remove-btn:hover { color:var(--rojo-descuento); }

/* Resumen carrito */
.cart-summary { background-color:var(--blanco-puro); padding:var(--espacio-xl); border:var(--borde-fino); border-radius:var(--radio-md); position:sticky; top:140px; align-self:start; }
.cart-summary h3 { font-size:var(--texto-lg); margin-bottom:var(--espacio-lg); }
.summary-row { display:flex; justify-content:space-between; padding:var(--espacio-sm) 0; font-size:var(--texto-base); }
.summary-row.total { border-top:2px solid var(--negro); margin-top:var(--espacio-md); padding-top:var(--espacio-md); font-weight:var(--peso-bold); font-size:var(--texto-lg); }
.cart-checkout-btn { width:100%; padding:16px; background-color:var(--negro); color:var(--blanco-puro); font-size:var(--texto-base); font-weight:var(--peso-semibold); letter-spacing:2px; text-transform:uppercase; margin-top:var(--espacio-xl); cursor:pointer; }
.cart-checkout-btn:hover { background-color:#333; }
.cart-continue { display:block; text-align:center; margin-top:var(--espacio-md); font-size:var(--texto-sm); color:var(--negro); text-decoration:underline; }
.cart-empty { text-align:center; padding:var(--espacio-3xl); }
.cart-empty h2 { margin-bottom:var(--espacio-md); }
.cart-empty p { color:var(--gris-medio); margin-bottom:var(--espacio-xl); }

/* ── CHECKOUT ── */
.checkout-page { max-width:var(--ancho-contenido); margin:0 auto; padding:var(--espacio-2xl) var(--espacio-lg); }
.steps-indicator { display:flex; justify-content:center; gap:var(--espacio-2xl); margin-bottom:var(--espacio-2xl); }
.step { display:flex; align-items:center; gap:var(--espacio-sm); font-size:var(--texto-sm); color:var(--gris-medio); }
.step.active { color:var(--negro); font-weight:var(--peso-semibold); }
.step-number { width:30px; height:30px; border-radius:var(--radio-full); border:2px solid var(--gris-claro); display:flex; align-items:center; justify-content:center; font-size:var(--texto-sm); font-weight:var(--peso-bold); }
.step.active .step-number { background-color:var(--negro); color:var(--blanco-puro); border-color:var(--negro); }
.step.completed .step-number { background-color:var(--verde-exito); color:var(--blanco-puro); border-color:var(--verde-exito); }
.checkout-layout { display:grid; grid-template-columns:2fr 1fr; gap:var(--espacio-2xl); }
.checkout-form { background-color:var(--blanco-puro); padding:var(--espacio-xl); border:var(--borde-fino); border-radius:var(--radio-md); }
.checkout-form h2 { font-size:var(--texto-lg); margin-bottom:var(--espacio-xl); }
.login-invite { display:flex; justify-content:space-between; align-items:center; padding:var(--espacio-md); background-color:var(--gris-fondo); border-radius:var(--radio-md); margin-bottom:var(--espacio-xl); font-size:var(--texto-sm); }
.login-invite a { color:var(--negro); font-weight:var(--peso-semibold); text-decoration:underline; }
.form-group { margin-bottom:var(--espacio-lg); }
.form-group label { display:block; font-size:var(--texto-sm); font-weight:var(--peso-medium); margin-bottom:var(--espacio-sm); color:var(--negro); }
.form-group input, .form-group select { width:100%; padding:12px 16px; border:var(--borde-fino); border-radius:var(--radio-sm); font-family:var(--fuente-principal); font-size:var(--texto-base); color:var(--negro); transition:border-color var(--transicion-rapida); }
.form-group input:focus, .form-group select:focus { outline:none; border-color:var(--rosa-sakura); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--espacio-md); }
.payment-methods { display:flex; flex-direction:column; gap:var(--espacio-md); }
.payment-option { display:flex; align-items:center; gap:var(--espacio-md); padding:var(--espacio-md); border:var(--borde-fino); border-radius:var(--radio-md); cursor:pointer; transition:border-color var(--transicion-rapida); }
.payment-option:hover, .payment-option.selected { border-color:var(--negro); }
.payment-option input[type="radio"] { width:auto; accent-color:var(--negro); }

/* ── PERFIL ── */
.profile-page { max-width:var(--ancho-contenido); margin:0 auto; padding:var(--espacio-2xl) var(--espacio-lg); display:grid; grid-template-columns:250px 1fr; gap:var(--espacio-2xl); }
.profile-menu { background-color:var(--blanco-puro); border:var(--borde-fino); border-radius:var(--radio-md); padding:var(--espacio-lg); position:sticky; top:140px; align-self:start; }
.profile-menu h3 { font-size:var(--texto-lg); margin-bottom:var(--espacio-lg); }
.profile-menu-item { display:flex; align-items:center; gap:var(--espacio-md); padding:var(--espacio-md); border-radius:var(--radio-md); font-size:var(--texto-sm); font-weight:var(--peso-medium); color:var(--gris-oscuro); cursor:pointer; transition:all var(--transicion-rapida); }
.profile-menu-item:hover, .profile-menu-item.active { background-color:var(--gris-fondo); color:var(--negro); }
.profile-menu-item .count { margin-left:auto; font-size:var(--texto-xs); color:var(--gris-medio); }
.logout-btn { display:block; width:100%; text-align:center; padding:var(--espacio-md); margin-top:var(--espacio-lg); border-top:var(--borde-fino); padding-top:var(--espacio-xl); font-size:var(--texto-sm); color:var(--rojo-descuento); cursor:pointer; }
.profile-content { min-height:500px; }
.profile-content h2 { font-size:var(--texto-xl); margin-bottom:var(--espacio-xl); }
.info-card { background-color:var(--blanco-puro); border:var(--borde-fino); border-radius:var(--radio-md); padding:var(--espacio-xl); margin-bottom:var(--espacio-xl); }
.info-row { display:flex; justify-content:space-between; padding:var(--espacio-md) 0; border-bottom:var(--borde-fino); font-size:var(--texto-base); }
.info-row:last-child { border-bottom:none; }
.info-label { font-weight:var(--peso-medium); color:var(--gris-oscuro); }
.info-value { color:var(--negro); }
.favorites-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--espacio-md); }
.fav-card-actions { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.fav-btn-cart { display:block; width:100%; padding:10px; background-color:var(--negro); color:var(--blanco-puro); font-size:var(--texto-xs); font-weight:var(--peso-semibold); letter-spacing:1.5px; text-transform:uppercase; text-align:center; cursor:pointer; border:none; text-decoration:none; transition:background-color var(--transicion-base); }
.fav-btn-cart:hover { background-color:#333; }
.fav-btn-wa { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:10px; background-color:#25D366; color:#fff; font-size:var(--texto-xs); font-weight:var(--peso-semibold); letter-spacing:1px; text-transform:uppercase; text-align:center; cursor:pointer; border:none; text-decoration:none; transition:background-color var(--transicion-base); }
.fav-btn-wa:hover { background-color:#1ebe5d; }
.order-card { background-color:var(--blanco-puro); border:var(--borde-fino); border-radius:var(--radio-md); padding:var(--espacio-xl); margin-bottom:var(--espacio-md); }
.order-header { display:flex; justify-content:space-between; margin-bottom:var(--espacio-md); }
.order-status { padding:4px 12px; border-radius:var(--radio-full); font-size:var(--texto-xs); font-weight:var(--peso-bold); }
.order-status.delivered { background-color:#d4edda; color:var(--verde-exito); }
.order-status.transit { background-color:#fff3cd; color:#856404; }
.order-status.processing { background-color:#cce5ff; color:var(--azul-info); }

/* ── LOGIN ── */
.auth-page { max-width:450px; margin:var(--espacio-3xl) auto; padding:0 var(--espacio-lg); }
.auth-card { background-color:var(--blanco-puro); border:var(--borde-fino); border-radius:var(--radio-md); padding:var(--espacio-2xl); }
.auth-card h1 { font-size:var(--texto-xl); text-align:center; margin-bottom:var(--espacio-2xl); }
.auth-tabs { display:flex; border-bottom:2px solid #e8e8e8; margin-bottom:var(--espacio-xl); }
.auth-tab { flex:1; padding:var(--espacio-md); text-align:center; font-weight:var(--peso-semibold); font-size:var(--texto-base); color:var(--gris-medio); cursor:pointer; border-bottom:3px solid transparent; transition:all var(--transicion-rapida); }
.auth-tab.active { color:var(--negro); border-bottom-color:var(--negro); }
.auth-btn { width:100%; padding:16px; background-color:var(--negro); color:var(--blanco-puro); font-size:var(--texto-base); font-weight:var(--peso-semibold); letter-spacing:1px; margin-top:var(--espacio-lg); cursor:pointer; }
.auth-btn:hover { background-color:#333; }
.forgot-password { display:block; text-align:center; margin-top:var(--espacio-lg); font-size:var(--texto-sm); color:var(--gris-medio); text-decoration:underline; }

/* ── MODAL ── */
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; visibility:hidden; transition:all var(--transicion-base); }
.modal-overlay.active { opacity:1; visibility:visible; }
.modal-box { background-color:var(--blanco-puro); padding:var(--espacio-2xl); border-radius:var(--radio-lg); max-width:400px; width:90%; text-align:center; transform:translateY(20px); transition:transform var(--transicion-base); }
.modal-overlay.active .modal-box { transform:translateY(0); }
.modal-box h2 { font-size:var(--texto-lg); margin-bottom:var(--espacio-md); }
.modal-box p { font-size:var(--texto-base); color:var(--gris-oscuro); margin-bottom:var(--espacio-xl); }
.modal-buttons { display:flex; gap:var(--espacio-md); }
.modal-btn-primary { flex:1; padding:12px; background-color:var(--negro); color:var(--blanco-puro); font-weight:var(--peso-semibold); border-radius:var(--radio-md); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.modal-btn-secondary { flex:1; padding:12px; background-color:var(--gris-fondo); color:var(--negro); font-weight:var(--peso-medium); border-radius:var(--radio-md); cursor:pointer; }

/* ── NOTIFICACIONES ── */
.notification { position:fixed; top:20px; right:20px; padding:14px 24px; border-radius:var(--radio-md); color:var(--blanco-puro); font-size:var(--texto-sm); font-weight:var(--peso-medium); z-index:2000; animation:slideInRight 0.3s ease; box-shadow:var(--sombra-lg); }
.notification.success { background-color:var(--verde-exito); }
.notification.error { background-color:var(--rojo-descuento); }
.notification.info { background-color:var(--azul-info); }
@keyframes slideInRight { from{transform:translateX(100px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── AVISO DE MODO DEMO (login) ── */
.demo-warning { background-color:#fff3cd; border:1px solid #ffc107; border-radius:var(--radio-md); padding:var(--espacio-md); margin-bottom:var(--espacio-lg); font-size:var(--texto-sm); color:#856404; }
.demo-warning strong { display:block; margin-bottom:var(--espacio-xs); font-size:var(--texto-base); }
.demo-warning p { margin-bottom:var(--espacio-xs); line-height:1.5; }
.demo-warning p:last-child { margin-bottom:0; }
.demo-warning a { color:#856404; font-weight:var(--peso-semibold); text-decoration:underline; }
.demo-warning a:hover { color:#000; }

/* ── BOTÓN WHATSAPP en detalle de producto ── */
.btn-whatsapp {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:14px 20px; margin-top:var(--espacio-md);
    background-color:#25D366; color:#fff;
    font-size:var(--texto-base); font-weight:var(--peso-semibold);
    border:none; cursor:pointer; text-decoration:none;
    transition:background-color var(--transicion-rapida);
}
.btn-whatsapp:hover { background-color:#1ebe5d; }

/* Nota profesional sobre tallaje */
.detail-whatsapp-note {
    font-size:var(--texto-sm); color:var(--gris-oscuro);
    line-height:1.6; margin:var(--espacio-lg) 0;
    padding:var(--espacio-md);
    background-color:var(--gris-fondo);
    border-left:3px solid var(--negro);
}

/* ── FOOTER: iconos lineales alineados ── */
.footer-contact-item {
    display:flex; align-items:center; gap:8px;
    margin-bottom:var(--espacio-sm);
    font-size:var(--texto-sm);
}
.footer-contact-item svg { flex-shrink:0; opacity:0.75; }