@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* ==========================================================================
   1. VARIABLES GLOBALES (PALETA CERÁMICA Y ESTILOS)
   ========================================================================== */
:root {
    /* Paleta Orgánica / Cerámica */
    --color-clay: #B85B48;      /* Terracota / Arcilla cocida */
    --color-clay-dark: #9A4B3B; /* Terracota oscuro */
    --color-sand: #EAE3D9;      /* Arena / Engobe crudo */
    --color-sage: #8A9A86;      /* Verde Salvia (Esmalte) */
    --color-charcoal: #4c3636;  /* Carbón para textos (mejor que negro puro) */
    --color-stone: #F7F5F0;     /* Fondo Piedra/Beige extra claro */
    --color-white: #ffffff;
    --color-eldorado: #665f5f;

    /* Reemplazo de variables originales para no romper tu HTML actual */
    --color1: var(--color-clay);
    --color2: var(--color-clay-dark);
    --color3: #7D3C2F;
    --color4: #5E2C22;
    --colorLight1: var(--color-sand);
    --colorDark: var(--color-charcoal);

    /* Tipografía y Formas */
    --font-body: 'Montserrat', sans-serif;
    --font-titles: 'Montserrat', sans-serif;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-soft: 0 6px 20px rgba(54, 54, 54, 0.06);
    --shadow-hover: 0 12px 30px rgba(54, 54, 54, 0.12);
}

/* ==========================================================================
   2. RESET Y ESTILOS BASE
   ========================================================================== */
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; text-transform: capitalize;}
.container_admin * { text-transform: none;}

body, ul { margin: 0; padding: 0; }
li { list-style: none; }
img { border: 0; max-width: 100%; }
a { text-decoration: none; transition: all .3s ease; color: inherit; }

body {
    background-color: var(--color-stone);
    font-family: var(--font-body);
    color: var(--color-charcoal);
}

h1, h2, h3, h4, h5, .card-title, .titulo_carrito, .section-title {
    font-family: var(--font-titles);
    color: var(--color-charcoal);
}

/* Selección de texto */
*::selection { background-color: var(--color-clay); color: var(--color-white); }

/* Iconos Material */
.material-icons, .material-symbols-outlined {
    font-family: 'Material Icons';
    font-weight: normal; font-style: normal;
    display: inline-block; line-height: 1; text-transform: none;
    letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr;
}

/* Inputs, Selects y Botones Globales */
input, select, textarea {
    border-radius: var(--radius-sm); outline: none; border: 1px solid #ddd;
    padding: 12px 15px; color: var(--color-charcoal) !important; font-family: var(--font-body);
    background-color: var(--color-white); transition: all 0.3s;
}
input:focus, select:focus, textarea:focus { border-color: var(--color1); box-shadow: 0 0 0 3px rgba(184, 91, 72, 0.1); }
textarea { resize: vertical; min-height: 30px; }
input[type="checkbox"], input[type="radio"] { width: auto !important; box-shadow: none; cursor: pointer; accent-color: var(--color1); }

/* Botones Base */
input[type="button"], input[type="submit"], .btn-solid, .add_cart, .btn-banner, .btn-promo {
    background-color: var(--color1); color: var(--color-white);
    border: none; padding: 12px 30px; border-radius: 30px; cursor: pointer;
    font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    font-size: 13px; transition: all 0.3s ease; text-align: center;
}
input[type="button"]:hover, input[type="submit"]:hover, .btn-solid:hover, .add_cart:hover, .btn-banner:hover {
    background-color: var(--color2); transform: translateY(-2px); box-shadow: var(--shadow-soft);
}

/* ==========================================================================
   3. ESTRUCTURA Y LAYOUT (Rejilla)
   ========================================================================== */
.clear { clear: both; }
.estructura { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.estructura::after { content: ""; display: table; clear: both; }
.colSe { padding: 0 15px; width: 20%; float: left; min-height: 1px; }
.colSe_1_2 { width: 50%; float: left; padding: 0 15px;}

/* ==========================================================================
   4. HEADER Y NAVEGACIÓN
   ========================================================================== */
.cintaTop { width: 100%; font-size: 13px; padding: 8px 0; background-color: var(--color-charcoal); color: var(--color-sand); display: flex; justify-content: center; }
.cintaTopRight { display: flex; gap: 20px; align-items: center; }
.cintaTopRight a { color: var(--color-sand); font-weight: 500; letter-spacing: 0.5px;}
.cintaTopRight a:hover { color: var(--color-white); }

.cinta_head {
    width: 100%; background: var(--color-charcoal); top: 0; z-index: 1000;
    padding: 10px 40px; display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); flex-wrap: wrap; gap: 20px;
}
.head_logo_container { display: flex; }
.head_logo_container img { object-fit: contain; }

/* Buscador */
.head_search_container { flex: 1; max-width: 500px; display: flex; justify-content: center; }
.form-buscador-nuevo { display: flex; width: 100%; border: 1px solid #e0e0e0; border-radius: 50px; overflow: hidden; background: #faf9f7; transition: 0.3s; }
.form-buscador-nuevo:focus-within { border-color: var(--color1); background: var(--color-white); }
.form-buscador-nuevo input { flex: 1; border: none; padding: 12px 25px; background: transparent; box-shadow: none; border-radius: 0;}
.form-buscador-nuevo .btn-lupa-nuevo { background: transparent; color: var(--color-eldorado); border: none; padding: 0 20px; font-size: 20px; box-shadow: none; display: flex; align-items: center; }

/* Acciones Head (Usuario, Carrito) */
.head_actions_container { display: flex; align-items: center; gap: 25px; }
.head_item1 a { font-weight: 600; text-transform: uppercase; font-size: 12px; color: var(--color-charcoal); display: flex; align-items: center; gap: 5px;}
.head_item1 a:hover { color: var(--color1); }

/* Menú Principal */
.menu { background-color: var(--color-white); border-top: 1px solid #eee; border-bottom: 1px solid #eee; width: 100%; text-align: center; }
.menu > nav > ul > li { display: inline-block; position: relative; }
.menu > nav > ul > li > a { padding: 18px 10px; display: block; color: var(--color-charcoal); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; text-transform: uppercase;  }
.menu > nav > ul > li:hover > a, .menu_selected { color: var(--color1) !important; background: var(--color-stone); }
.menu > nav > ul > li:hover > ul { display: flex; flexDirection: column; min-width: 220px; }

.submenu { display: none; position: absolute; top: 100%; left: 0; z-index: 3000; background-color: var(--color-white); box-shadow: var(--shadow-hover); border-radius: 0 0 var(--radius-md) var(--radius-md); overflow: hidden; border: 1px solid #eee; border-top: none;}
.submenu > li > a { color: var(--color-charcoal); padding: 25px; display: block; font-size: 13px; font-weight: 500;}
.submenu > li > a:hover { background-color: var(--color-sand); color: var(--color1); padding-left: 30px; }

/* Carrito en el Menú */
.cart { background-color: var(--color-stone) !important; color: var(--color1) !important; border-radius: 30px; padding: 12px 15px !important; margin: 3px 0; }
.cart:hover { background-color: var(--color-sand) !important; color: var(--color1) !important; }
.cart img { filter: brightness(0) invert(1); width: 20px; left: 18px; top: 14px;}

/* ==========================================================================
   5. CATÁLOGO Y TARJETAS DE PRODUCTOS (GRID UNIFICADO)
   ========================================================================== */
.productos, .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px; padding: 20px 0; max-width: 1200px; margin: 0 auto;
}

/* Tarjeta de Producto */
.item_producto, .product-card, .brand-card, .makeup-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    float: none; width: auto; margin: 0; box-shadow: none;
}
.item_producto:hover, .product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: #ddd; }

.item_producto .divImgIndex, .card-img { width: 100%; height: 250px; background: var(--color-white); border-bottom: 1px solid #f4f4f4; padding: 20px; display: flex; align-items: center; justify-content: center;}
.item_producto img, .card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.item_producto h2, .card-title { font-size: 17px; font-weight: 600; margin: 15px 20px 5px; color: var(--color-charcoal); line-height: 1.3; flex-grow: 1; text-align: left; }
.item_producto .card-brand { color: var(--color-sage); font-size: 11px; text-transform: uppercase; font-weight: 700; margin: 15px 20px 0; letter-spacing: 1px; }

.item_producto h1, .final-price { font-size: 22px; font-weight: 700; margin: 10px 20px 20px; color: var(--color1); display: flex; align-items: center; gap: 10px; font-family: var(--font-body); }
.item_producto .divPrecioViejo span, .old-price { color: #3f51b5; text-decoration: line-through; font-size: 19px; font-style: normal; font-weight: bolder; margin-top: auto; }

/* Etiquetas (Badges) */
.descuento2, .badge-off, .item_producto .aviso_descuento { position: absolute; top: 15px; right: 15px; background: var(--color-sage); color: var(--color-white); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 20px; z-index: 2; letter-spacing: 0.5px;}
.envioGratis { position: absolute; top: 15px; left: 15px; background: #e8f5e9; color: #2e7d32; padding: 5px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; }
.item_producto .new { position: absolute; top: 15px; left: 15px; background: var(--color-sand); color: var(--color-charcoal); padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; height: auto; width: auto; line-height: normal; transform: none; box-shadow: none;}

.item_producto .add_cart, .product-card .action-btn-add { margin: 0 20px 20px; width: calc(100% - 40px); background-color: var(--color-stone); color: var(--color-charcoal); border: 1px solid #ddd; }
.item_producto:hover .add_cart { background-color: var(--color1); color: var(--color-white) !important; border-color: var(--color1); }

/* ==========================================================================
   6. VISTA DETALLE DE PRODUCTO (.item_producto_full)
   ========================================================================== */
.item_producto_full {
    display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
    max-width: 1200px; margin: 40px auto; padding: 40px; background: var(--color-white);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
}
.item_producto_full .imgs_prod { width: 100%; }
.item_producto_full .imgs_prod > img { width: 100%; height: 500px; object-fit: contain; border-radius: var(--radius-md); border: 1px solid #eee; padding: 20px; background: #faf9f7;}
.item_producto_full .mas_imgs { display: flex; gap: 15px; margin-top: 20px; }
.item_producto_full .mas_imgs > .divImg { width: 80px; height: 80px; border: 1px solid #ddd; border-radius: var(--radius-sm); cursor: pointer; padding: 5px; background: #fff;}
.item_producto_full .mas_imgs > .divImg img { width: 100%; height: 100%; object-fit: contain; }

.item_producto_full .datos_producto { width: 100%; text-align: left; }
.item_producto_full h2 { font-size: 32px; font-weight: 700; margin: 0 0 10px 0; line-height: 1.2; }
.item_producto_full b { color: var(--color-sage); text-transform: uppercase; margin-bottom: 20px; }
.item_producto_full h1 { font-size: 42px; color: var(--color1); margin: 20px 0; font-family: var(--font-body); font-weight: 700; display: flex; align-items: center; gap: 15px;}
.item_producto_full .descuento { background: var(--color-sage) !important; color: white !important; font-size: 16px; padding: 6px 12px; border-radius: 8px; border: none; }
.item_producto_full p { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 30px; font-weight: 300; }

.item_producto_full .add_cart { width: max-content; font-size: 16px; padding: 18px; margin: 30px 0; border-radius: 8px; background: var(--color1); color: white;}
.item_producto_full input[type="text"] { width: 80px; text-align: center; font-size: 18px; font-weight: bold; border: 2px solid #eee; border-radius: 8px; padding: 15px 0;}

/* ==========================================================================
   7. CARRITO DE COMPRAS Y PAGO
   ========================================================================== */
.carrito, .carritoDatos { max-width: 1000px; margin: 40px auto; padding: 40px; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.titulo_carrito { font-size: 28px; margin-bottom: 30px; text-align: left; border-bottom: 2px solid var(--color-sand); padding-bottom: 15px; }

.item_carrito { display: flex; align-items: center; padding: 20px 0; border-bottom: 1px solid #eee; position: relative;}
.item_carrito .img_cart { width: 100px; height: 100px; flex-shrink: 0; background: #faf9f7; border-radius: var(--radius-sm); padding: 10px;}
.item_carrito img { width: 100%; height: 100%; object-fit: contain; }
.item_carrito .nombre_cart { flex: 1; padding: 0 20px; text-align: left; }
.item_carrito .nombre_cart a { font-size: 16px; font-weight: 600; color: var(--color-charcoal); font-family: var(--font-titles);}
.item_carrito .cantidad_cart, .item_carrito .precio_cart, .item_carrito .subt_cart { width: 120px; text-align: right; font-weight: 600;}
.item_carrito .subt_cart { font-size: 18px; color: var(--color1); }
.delete_item_cart { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #e74c3c; cursor: pointer; opacity: 0.6; }
.delete_item_cart:hover { opacity: 1; text-decoration: underline;}

.carrito .total_cart { background: var(--color-stone); padding: 30px; border-radius: var(--radius-md); margin-top: 30px; text-align: right; font-size: 24px; font-weight: 700; color: var(--color-charcoal);}
.carrito .total_cart span { font-size: 16px; font-weight: 400; color: #777; margin-right: 15px;}
.carrito .buttons { display: flex; justify-content: flex-end; gap: 20px; margin-top: 30px; }

/* Opciones Checkout */
.grupoOpcionesCarrito { background: var(--color-stone); padding: 30px; border-radius: var(--radius-md); margin-bottom: 30px;}
.opcionCarrito { background: var(--color-white); border: 1px solid #eee; border-radius: var(--radius-sm); padding: 20px 20px 20px 50px; margin-bottom: 15px; cursor: pointer; transition: 0.3s; position: relative;}
.opcionCarrito:hover { border-color: var(--color1); box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.txtOpcionCarrito1 { font-size: 16px; font-weight: 600; color: var(--color-charcoal); font-family: var(--font-titles);}
.txtOpcionCarrito3 { font-size: 14px; color: #666; margin-top: 5px; }

/* ==========================================================================
   8. BANNERS, HERO Y SECCIONES
   ========================================================================== */
.hero { background: var(--color-stone); min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; }
.hero-content { background: rgba(255, 255, 255, 0.85); padding: 60px; border-radius: var(--radius-lg); backdrop-filter: blur(10px); box-shadow: var(--shadow-soft); max-width: 800px; border: 1px solid #fff;}
.hero h1 { font-size: 3rem; font-weight: 700; line-height: 1.1; margin-bottom: 20px; color: var(--color-charcoal); }
.hero h1 span { color: var(--color1); font-style: italic; }

.banner-zigzag { display: flex; align-items: stretch; max-width: 1200px; margin: 80px auto; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.banner-zigzag.reverse { flex-direction: row-reverse; }
.banner-img { flex: 1; min-height: 400px; background-size: cover; background-position: center; }
.banner-content { flex: 1; padding: 60px; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.banner-content h2 { font-size: 2.5rem; margin-bottom: 20px; color: var(--color-charcoal); }

.daily-promo { background: linear-gradient(135deg, var(--color-sand), var(--color-stone)); height: auto; padding: 30px 20px; text-align: center; border-bottom: 1px solid #eee;}
.promo-text h3 { color: var(--color1); font-size: 24px; margin: 0 0 5px 0; font-family: var(--font-titles);}
.promo-text p { color: var(--color-charcoal); font-size: 15px; margin: 0;}

/* Marcas (Grayscale elegante) */
.marcas-section { background: var(--color-white); padding: 60px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.marca-item img { filter: grayscale(100%) opacity(0.6); transition: 0.4s; height: 50px; }
.marca-item img:hover { filter: grayscale(0%) opacity(1); transform: scale(1.05); }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.site-footer { background-color: var(--color-charcoal); color: var(--color-stone); padding: 60px 0 0 0; margin-top: 80px; font-size: 14px; }
.footer-branches-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; }
.footer-branch h4 { color: var(--color-sand); font-size: 16px; margin-bottom: 20px; letter-spacing: 1px; font-family: var(--font-body); }
.footer-branch h4 span { color: var(--color1); }
.branch-address { color: #bbb; margin-bottom: 15px; line-height: 1.6; }
.branch-contact a { color: var(--color-white); margin-bottom: 8px; display: block; }
.branch-contact a:hover { color: var(--color-sand); }
.footer-bottom { background: #2a2a2a; padding: 25px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

/* ==========================================================================
   10. ADMIN & FORMULARIOS
   ========================================================================== */
.container_admin {
	max-width: 1200px;
    margin: 40px 20px 40px auto;
    background: var(--color-white);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    width: 75%;
}
.admin-list-header { background: var(--color-stone); color: var(--color-charcoal); padding: 15px; border-radius: var(--radius-sm); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 1px;}
.admin-list-row { background: var(--color-white); border-bottom: 1px solid #eee; padding: 15px; transition: 0.3s; }
.admin-list-row:hover { background: #faf9f7; }

/* ==========================================================================
   11. MEDIA QUERIES (TODO EL RESPONSIVE AGRUPADO AQUÍ)
   ========================================================================== */
@media (max-width: 1024px) {
    .item_producto_full { grid-template-columns: 1fr; gap: 30px; padding: 30px; }
    .item_producto_full .imgs_prod > img { height: 400px; }
}

@media (max-width: 900px) {
    /* Head y Menú */
    .cinta_head { flex-direction: column; padding: 15px; gap: 15px; }
    .head_logo_container, .head_search_container, .head_actions_container { width: 100%; max-width: 100%; justify-content: center; }
    .menu > nav > ul { display: flex; overflow-x: auto; white-space: nowrap; padding: 10px; scrollbar-width: none; background: var(--color-white);}
    .menu > nav > ul > li { display: inline-block; background: transparent; }
    .menu > nav > ul > li > a { padding: 10px 15px; font-size: 13px; border: none; }
    
    /* Layout */
    .colSe { width: 100%; float: none; margin-bottom: 20px; }
    .colSe_1_2 { width: 100%; float: none; }
    
    /* Banners */
    .banner-zigzag, .banner-zigzag.reverse { flex-direction: column; margin: 40px 20px; }
    .banner-img { min-height: 250px; }
    .banner-content { padding: 40px 25px; text-align: center; }
    .hero h1 { font-size: 2.2rem; }
    
    /* Carrito */
    .carrito { padding: 20px; margin: 20px 10px; }
    .item_carrito { flex-wrap: wrap; }
    .item_carrito .nombre_cart { width: 100%; padding: 15px 0; }
    .item_carrito .cantidad_cart, .item_carrito .precio_cart, .item_carrito .subt_cart { width: 33%; text-align: left; }
    .carrito .total_cart { font-size: 20px; padding: 20px; }
    .carrito .buttons { flex-direction: column; }
    .carrito .buttons .button_cart { width: 100%; margin: 10px 0; }
}

.cont-card-price{
	padding: 0 20px 20px 20px; display: flex; flex-direction: column; gap: 15px; margin-top:auto;
}

.action-group{
	display:flex; gap:10px; align-items:stretch; height: 42px;
}

.action-qty-box{
	display:flex; border: 1px solid #ddd; border-radius: var(--radius-sm); overflow:hidden; width: 110px; flex-shrink: 0; background: var(--color-white);
}

.add_cart_list{
	flex:1 !important;
	margin:0 !important;
	padding: 12px 10px !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	gap:5px !important;
}


.btn-pagar-mp{
	padding:5px 10px; font-size:11px; margin-left:10px; text-decoration:none;
}


.pwa-drawer{
	display: none;
}

@media (max-width: 600px) {
	
	.pwa-drawer{
		display: block;
	}

    /* Grilla de productos (2 columnas en celular) */
    .productos { grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 15px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; padding: 0px; }
    .item_producto .divImgIndex, .card-img { height: 160px; padding: 10px; }
    .item_producto h2, .card-title { font-size: 13px; margin: 10px 10px 5px; }
    
	.cont-card-price{
		padding: 10px;
	}
	
	.action-group{
		height: auto; flex-direction: column;
	}

	.item_producto h1, .final-price { font-size: 18px; margin: 10px 10px 15px;
		align-items: flex-start;
		flex-direction: column;
	}
    .item_producto .add_cart { width: calc(100% - 20px); margin: 0 10px 10px; padding: 10px; font-size: 11px; }
    
	.item_producto .add_cart_list{
		margin: 0 auto; width: 100%; padding: 12px 10px; border-radius: var(--radius-sm); background-color: var(--color-charcoal); color: white !important;
	}

    /* Botones de cantidad (Aumentar para el dedo) */
    .action-qty-box { width: 100%; height: 44px; 	}
    .action-qty-box button { width: 50px !important; font-size: 24px !important; }
    
    .footer-bottom { flex-direction: column; text-align: center; gap: 20px; padding-bottom: 120px; }
	
	
	.btn-pagar-mp{
		padding: 10px 20px;
		font-size: 11px;
		margin-left: 0;
		text-decoration: none;
		display: inline-block;
		white-space: nowrap;
		margin-top: 15px;
	}
	
	
}

@media (max-width: 900px) {
    /* Ocultamos textos del login legacy y habilitamos la lupa disparadora */
    .displayNoneMobile { display: none !important; }
    .head_actions_container_mobile .pwa-mobile-trigger { display: flex !important; }
    
    /* Reajuste de la caja del login de la cabecera */
    .col-login {
        border-top: none !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
	
	.cat-grid-container {
		padding: 50px 10px !important;
	}
	
}





/* ==========================================================================
   12. LOGIN CON GOOGLE Y CHECKOUT
   ========================================================================== */
.checkout-login-container {
    background: var(--color-white);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    text-align: center;
    max-width: 500px;
    margin: 40px auto;
    border: 1px solid #eee;
}

.checkout-login-container h2 {
    margin-bottom: 10px;
    font-size: 24px;
}

.checkout-login-container p {
    color: #666;
    margin-bottom: 30px;
    font-size: 14px;
}

/* Botón personalizado de Google */
.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: var(--color-white);
    color: #3c4043;
    border: 1px solid #dadce0;
    padding: 12px 24px;
    border-radius: 30px; /* Sigue tu estilo de botones redondeados */
    font-family: 'Roboto', var(--font-body); /* Roboto es el estándar de Google */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    width: 100%;
    max-width: 300px;
}

.btn-google:hover {
    background-color: #f8f9fa;
    box-shadow: 0 1px 3px rgba(60,64,67,0.3);
}

.btn-google img {
    width: 18px;
    height: 18px;
}


/* ==========================================================================
   BANNER OFERTAS EN EL HEADER
   ========================================================================== */
.banner-top-head {
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-right: auto; /* Empuja los íconos a la derecha */
    margin-left: 15px; /* Separación del buscador */
}

.banner-top-head img {
    height: 46px; /* Misma altura que tu nuevo buscador */
    border-radius: 50px; /* Hace match con el diseño del buscador */
    object-fit: cover;
    box-shadow: var(--shadow-soft);
    display: block;
}

.banner-top-head:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

@media (max-width: 900px) {
    /* En mobile, el buscador y el logo se centran. El banner pasa abajo. */
    .cinta_head {
        flex-direction: column;
        padding: 15px 20px;
    }
    
    .banner-top-head {
        order: 4; /* Lo mandamos al final del flex-container */
        width: 100%;
        margin: 10px 0 0 0; 
    }

    .banner-top-head img {
        width: 100%;
        height: auto; /* Que se adapte proporcionalmente */
        border-radius: var(--radius-md); /* Un borde más suave cuando es ancho total */
    }
}


/* ==========================================================================
   BOTONES FLOTANTES (FAB) - WHATSAPP Y CARRITO
   ========================================================================== */
.floating-actions {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
}

.fab-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
    position: relative;
    text-decoration: none;
}

.fab-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

/* Estilo WhatsApp */
.fab-wa {
    background-color: #25D366;
}

/* Estilo Carrito */
.fab-cart {
    background-color: var(--color1);
    color: var(--color-white);
}

.fab-cart .material-icons {
    font-size: 26px;
}

/* Burbuja del contador de items */
.fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: var(--color1); /* Usa el color arcilla principal */
    color: var(--color-white);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 2px solid var(--color-stone); /* Borde para recortar contra el fondo negro */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Ajustes para móviles */
@media (max-width: 600px) {
    .floating-actions {
        bottom: 20px;
        right: 20px;
        gap: 12px;
    }
    
    .fab-btn {
        width: 55px;
        height: 55px;
    }
    
    .fab-btn img {
        width: 28px;
    }
}


.pass-wrapper { position: relative; }
.pass-wrapper input { 
    width: 100%; 
    padding-right: 45px !important; /* Da espacio para que el ícono no tape el texto */
}
.toggle-pass { 
    position: absolute; 
    right: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    cursor: pointer; 
    color: #999; /* Color gris sutil */
    transition: color 0.3s;
    z-index: 10; /* Fuerza a que esté por encima del input */
}
.toggle-pass:hover { color: var(--color1); } /* Se pinta de arcilla al pasar el mouse */

.titulo_registro {
    font-size: 25px;
    margin-bottom: 15px;
}


.registro{
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: transparent;
    box-shadow: none;
}



/* ==========================================================================
   13. PANEL DE ADMINISTRADOR (Estructura Base)
   ========================================================================== */
/* Contenedores Principales */
.container_admin {
    margin: 20px 20px 40px auto;
    width: 75%;
    max-width: 1200px;
    background-color: var(--color-white);
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.container_menu_admin {
    width: 100%;
    margin: 0px 0;
    background-color: transparent;
}

/* Títulos y Secciones */
.titulo_registro {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--color-charcoal);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--color-stone);
    padding-bottom: 10px;
}

.registro {
    width: 100%;
    margin: 20px 0;
    padding: 0;
    text-align: center;
    background-color: transparent;
}

/* Inputs y Formularios en el Admin */
.registro form {
    width: 100%;
    padding: 20px;
    background: #faf9f7;
    border-radius: var(--radius-md);
    border: 1px solid #eee;
	padding-top: 10px;
}


.divInput {
    width: 100%;
    margin-top: 15px;
    text-align: left;
}

.divInput label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: 5px;
}

.divInput select, .divInput input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
}

/* Utilidades */
.notFound {
    background-color: #ffebee !important;
    border-color: #e74c3c !important;
    color: #c0392b !important;
}

/* ==========================================================================
   14. LISTADO MODERNO ADMINISTRADOR (GRID)
   ========================================================================== */
.admin-list-row {
    display: grid;
    gap: 10px;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    background: var(--color-white);
    transition: background 0.2s;
    text-decoration: none;
    color: #555;
    font-size: 13px;
}

.admin-list-header {
    background-color: var(--color-stone);
    border-bottom: 2px solid #e9ecef;
    font-weight: 700;
    color: var(--color-charcoal);
    text-transform: uppercase;
    font-size: 11px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.admin-list-data:hover {
    background-color: #f4f6f9;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    z-index: 1;
    position: relative;
}

/* Pastillas de Código y Estados */
.cell-code {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: var(--color1);
    font-size: 14px;
    background: #fdf2f0;
    padding: 4px 8px;
    border-radius: 4px;
    width: fit-content;
}

.badge-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
}

.badge-active { background-color: #e8f5e9; color: #2e7d32; }
.badge-inactive { background-color: #ffebee; color: #c62828; }
.badge-inactive-red { background: #e74c3c; color: white; }
.badge-neutral { background-color: #eceff1; color: #455a64; }

/* Botones de Acción (Borrar/Editar) */
.btn-delete-row {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.btn-delete-row img, .btn-delete-row i {
    color: #999;
    width: 22px; 
    height: 22px;
    font-size: 22px;
    transition: 0.2s;
}

.btn-delete-row:hover img, .btn-delete-row:hover i {
    color: #e74c3c;
    transform: scale(1.1);
}

.btn-edit-small {
    background: var(--color-stone);
    padding: 6px;
    border-radius: 4px;
    display: inline-flex;
    transition: 0.3s;
}

.btn-edit-small:hover {
    background: #e0e0e0;
}

/* ==========================================================================
   15. HEADER Y MENÚ DEL ADMIN (admin_head.php / admin_menu.php)
   ========================================================================== */
.admin_back {
    background-color: var(--color-charcoal) !important;
    border-bottom: 2px solid #333;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin_back .head_title2 {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-end;
}

.admin_back .head_item1 a {
    color: var(--color-sand);
    font-size: 13px;
    font-weight: 600;
}

.admin_back .head_item1 a:hover {
    color: var(--color-white);
}

.menu_admin {
    width: 100%;
    margin: 0;
    background-color: var(--color-charcoal);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.item_admin_cat {
    border-bottom: 1px solid #444;
    text-align: center;
    transition: 0.2s;
}

.item_admin_cat:last-child {
    border-bottom: none;
}

.item_admin_cat a {
    font-size: 14px;
    padding: 14px 20px;
    color: var(--color-sand);
    display: block;
    font-weight: 500;
}

.item_admin_cat:hover {
    background-color: var(--color1);
}

.item_admin_cat:hover a {
    color: var(--color-white);
}

/* Utilidades para Drag & Drop (Sortable de Categorías) */
.ui-sortable-placeholder {
    border: 2px dashed var(--color1) !important;
    background: rgba(184, 91, 72, 0.05) !important;
    visibility: visible !important;
    height: 60px !important;
    margin-bottom: 5px;
    border-radius: var(--radius-sm);
}

.ui-sortable-helper {
    box-shadow: var(--shadow-hover) !important;
    cursor: grabbing !important;
    opacity: 0.9;
    background-color: var(--color-white) !important;
    border: solid 2px var(--color1) !important;
}



/* ==========================================================================
   16. ADMIN EDIT (Formularios de Edición y Carga de Productos)
   ========================================================================== */

/* --- NAVEGACIÓN Y TOOLBAR --- */
.admin-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #eee; margin-bottom: 10px;
}
.admin-toolbar h2 { margin: 0; font-size: 18px; color: var(--color-charcoal); font-weight: 700; text-transform: uppercase; }

.btn-nav-group { display: flex; gap: 8px; }
.btn-nav {
    background: var(--color-stone); border: 1px solid #ddd; padding: 8px 15px;
    font-size: 13px; color: var(--color-charcoal); border-radius: var(--radius-sm); text-decoration: none; display: flex; align-items: center; font-weight: 600; transition: 0.2s;
}
.btn-nav:hover { background: #e0e0e0; color: #000; }
.btn-nav-web { background: var(--color1); color: var(--color-white) !important; border:none; }
.btn-nav-web:hover { background: var(--color2); color: var(--color-white); }

.admin-nav-arrows {
    display: flex; justify-content: space-between; margin-bottom: 20px;
}
.nav-arrow {
    background-color: var(--color-charcoal); color: var(--color-white); padding: 8px 15px;
    border-radius: var(--radius-sm); font-size: 20px; text-decoration: none; transition: 0.2s; display: flex; align-items: center;
}
.nav-arrow:hover { background-color: var(--color1); color: var(--color-white); }

/* --- GRILLAS DE FORMULARIOS (Modernas) --- */
.admin-grid-container, .dense-grid, .form-grid-container {
    display: grid; gap: 15px; align-items: end; background: var(--color-white);
    border: 1px solid #eee; border-radius: var(--radius-md); padding: 20px; margin-bottom: 20px;
}
.admin-grid-container { grid-template-columns: repeat(12, 1fr); }
.dense-grid { grid-template-columns: repeat(12, 1fr); gap: 10px; }
.form-grid-container { grid-template-columns: repeat(4, 1fr); }

.admin-grid-container label, .dense-grid label, .form-grid-container label {
    display: block; font-size: 12px; font-weight: 600; color: #666; margin-bottom: 4px; text-transform: uppercase;
}

.admin-grid-container input, .admin-grid-container select, .admin-grid-container textarea,
.dense-input input, .dense-input select, .dense-input textarea,
.form-grid-container input, .form-grid-container select {
    width: 100% !important; padding: 10px; border: 1px solid #ddd; border-radius: var(--radius-sm); box-sizing: border-box; background-color: #faf9f7;
}
.dense-input input, .dense-input select { height: 35px; padding: 5px 10px; }
.dense-input textarea { height: 60px !important; resize: vertical; }

/* Columnas utilitarias para la grilla de 12 */
.span-12, .col-12 { grid-column: span 12; }
.span-6, .col-6 { grid-column: span 6; }
.span-4, .col-4 { grid-column: span 4; }
.span-3, .col-3 { grid-column: span 3; }
.span-2, .col-2 { grid-column: span 2; }
.col-1 { grid-column: span 1; }
.col-5 { grid-column: span 5; }
.col-8 { grid-column: span 8; }
.form-group-full { grid-column: span 4; }
.form-group-half { grid-column: span 2; }

/* --- SECCIONES SECUNDARIAS --- */
.sec-section { border: 1px solid #eee; background: #faf9f7; padding: 20px; margin-top: 20px; border-radius: var(--radius-md); }
.sec-title { font-size: 15px; font-weight: 700; border-bottom: 2px solid #ddd; margin-bottom: 15px; padding-bottom: 8px; color: var(--color-charcoal); text-transform: uppercase; }

/* --- GESTIÓN DE VARIANTES --- */
.variantes-scroll-area { max-height: 400px; overflow-y: auto; border: 1px solid #eee; background: var(--color-white); border-radius: var(--radius-sm); }
.variant-header, .variant-row, .variant-card-row {
    display: grid; gap: 10px; align-items: center; padding: 10px 15px; border-bottom: 1px solid #eee;
}
.variant-header { background: var(--color-stone); font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; border-top-radius: var(--radius-sm); }
.variant-row:hover, .variant-card-row:hover { background-color: #f4f6f9; }

.variant-row input[type="text"], .variant-row input[type="number"] {
    width: 100%; border: 1px solid transparent; background: transparent; font-size: 13px; padding: 6px; border-radius: 4px;
}
.variant-row input:focus, .variant-row:hover input { border-color: #ddd; background: var(--color-white); }

.var-thumb, .variant-img-col img { width: 40px; height: 40px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px; background: var(--color-white); }
.var-color-circle, .variant-color-circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #ddd; cursor: pointer; margin: 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.btn-trash, .btn-del-variant, .linkDelete { color: #ccc; cursor: pointer; text-align: center; font-size: 20px; transition: 0.2s; }
.btn-trash:hover, .btn-del-variant:hover, .linkDelete:hover { color: #e74c3c; transform: scale(1.1); }

/* --- MULTIMEDIA (FOTOS Y VIDEOS) --- */
.media-input-group {
    display: flex; gap: 0; margin-bottom: 15px; border: 1px solid #ddd; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-white);
}
.media-input-group input[type="file"], .media-input-group input[type="text"], .input-url-img {
    border: none !important; background: transparent; padding: 10px !important; flex: 1;
}
.media-input-group input[type="submit"] {
    border: none; background: var(--color-charcoal); color: var(--color-white); font-weight: bold; font-size: 12px; text-transform: uppercase; cursor: pointer; padding: 0 20px; transition: 0.2s;
}
.media-input-group input[type="submit"]:hover { background: var(--color1); }

.media-grid, .img-thumb-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.media-item, .mini-card, .mini-thumb { position: relative; width: 80px; height: 80px; border: 1px solid #eee; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-white); }
.media-item img, .mini-card img { width: 100%; height: 100%; object-fit: contain; padding: 2px;}
.media-overlay-del {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(231, 76, 60, 0.8);
    display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.2s; cursor: pointer;
}
.media-item:hover .media-overlay-del, .mini-card:hover .media-overlay-del { opacity: 1; }
.media-overlay-del span { color: var(--color-white); font-weight: bold; font-size: 10px; text-transform: uppercase; }

/* --- COMPATIBILIDAD CON VISTAS LEGACY (Antiguas) --- */
.container_admin .item_option_edit90 { width:90%; display:inline-block !important; }
.container_admin .item_option_edit80 { width:80%; display:inline-block !important; }
.container_admin .campo_delete { display:inline-block; width:10%; }
.container_admin .item_option_edit { display:block; padding:7px; border-bottom:solid 1px #eee; }
.container_admin .head_optionedit { background-color:var(--color-charcoal); padding:10px 0; font-weight:bold; color:var(--color-white) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.campo1,.campo2,.campo3,.campo4,.campo5,.campo6,.campo7 { display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:6px 0; vertical-align:middle; font-size: 13px; color: #555; }
.container_admin .campo1 { width:10%; } .container_admin .campo2 { width:15%; }
.container_admin .campo3 { width:20%; } .container_admin .campo4 { width:25%; }
.container_admin .campo5 { width:30%; } .container_admin .campo6 { width:40%; }
.container_admin .campo7 { width:5%; }
.container_admin .align-left { text-align:left; }

/* --- RESPONSIVE ADMIN EDIT --- */
@media (max-width: 768px) {
    .admin-grid-container .span-6, .admin-grid-container .span-4, .admin-grid-container .span-3, .admin-grid-container .span-2,
    .dense-grid .col-1, .dense-grid .col-2, .dense-grid .col-3, .dense-grid .col-4, .dense-grid .col-5, .dense-grid .col-6, .dense-grid .col-8,
    .form-grid-container .form-group-half {
        grid-column: span 12 !important; /* Todo pasa a 100% en celular para no romper la pantalla */
    }
    .admin-toolbar { flex-direction: column; gap: 15px; align-items: flex-start; }
    .variant-header { display: none; } /* Ocultar cabeceras de tabla en celular para apilar mejor */
    .variant-row, .variant-card-row { grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px; }
}

.FondoModal{ width:100%; height:100%; position:fixed; background-color:rgba(0,0,0,.8); display:none; top:0; left:0; z-index:38500; }
.FormAgregarNuevo{ width:40%; left:50%; top:15%; margin-left:-20%; position:fixed; background-color:#fff; padding:20px 0; box-shadow:inset 0 0 5px 2px #ccc; z-index:40000; display:none;
overflow-y:scroll; overflow-x:hidden; max-height:70%;}
.FormAgregarNuevo form{ padding-bottom:0; display:none}
.FormAgregarNuevo form label{width:50% !important; margin:15px 25% 0 25% !important; text-align:left }
.FormAgregarNuevo input{ width:60% !important; margin:4px 20% !important}
.FormAgregarNuevo .selectAngosto{ width:40% !important; margin:4px 30% !important}
.FormAgregarNuevo .selectAngostoX{ width:20% !important; margin:4px 40% !important}

#formNuevo label{
	width: 80%;
    display: block;
    margin: 0 auto;
}

#formNuevo input, #formNuevo select {
    width: 80%;
    margin: 0 auto 20px;
}


.btnMas{
	color: #555 !important;
    cursor: pointer;
    position: static;
    font-size: 11px;
    background: #ddd;
    padding: 2px 7px;
    border-radius: 30px;
}


/* ==========================================================================
   17. FORMULARIOS DE EDICIÓN ADMIN (Grid Layout)
   ========================================================================== */
.admin-form-wrapper {
    background: var(--color-white);
    padding: 30px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    border: 1px solid #eee;
    margin-bottom: 30px;
}

.form-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Divide en 2 columnas iguales */
    gap: 20px; /* Espacio entre los campos */
    margin-top: 20px;
}

/* Clases para controlar el ancho de los campos */
.form-group-full {
    grid-column: span 2; /* Ocupa todo el ancho (las 2 columnas) */
}

.form-group-half {
    grid-column: span 1; /* Ocupa la mitad (1 columna) */
}

/* Estilos para Labels, Inputs y Selects dentro de la grilla */
.form-grid-container label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-charcoal);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-grid-container input[type="text"],
.form-grid-container input[type="number"],
.form-grid-container select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    background-color: #faf9f7;
    font-size: 14px;
    color: var(--color-charcoal);
    transition: 0.3s;
}

.form-grid-container input:focus,
.form-grid-container select:focus {
    border-color: var(--color1);
    background-color: var(--color-white);
    outline: none;
}

/* Responsive: En celulares, todo pasa a 1 sola columna */
@media (max-width: 768px) {
    .form-grid-container {
        grid-template-columns: 1fr;
    }
    .form-group-full, .form-group-half {
        grid-column: span 1;
    }
}

/* ==========================================================================
   LOGIN EN EL HEADER PRINCIPAL (.col-login)
   ========================================================================== */
.col-login {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 180px; /* Asegura que tenga espacio suficiente y no se aplaste */
    margin-left: auto; /* Empuja este bloque bien hacia la derecha en PC */
}

/* Forzamos el color oscuro porque el fondo del header ahora es blanco */
.col-login a, .col-login .botones-ingreso-top a {
    color: var(--color-white);
    font-weight: 600 !important;
    transition: color 0.3s;
}

.col-login a:hover, .col-login .botones-ingreso-top a:hover {
    color: var(--color1) !important; /* Se pinta de color terracota al pasar el mouse */
}

/* ==========================================================================
   RESPONSIVE (Celulares y Tablets)
   ========================================================================== */
@media (max-width: 900px) {
    .col-login {
        width: 100%; /* Ocupa todo el ancho disponible */
        margin-left: 0;
        justify-content: center; /* Centramos el login en celulares */
        order: 3; /* Asegura que quede estrictamente abajo del buscador */
        
        /* Opcional: Le damos una sutil línea separadora arriba para que quede más prolijo */
        border-top: 1px solid #f0f0f0; 
        padding-top: 15px; 
        margin-top: 5px;
    }
    
    /* Centramos también el div interno si el usuario ya está logueado */
    .col-login .mailRegistrado {
        justify-content: center !important;
    }
}



/* ==========================================================================
   BREADCRUMBS (Migas de Pan)
   ========================================================================== */
.breadcrumbs-container {
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 6px; 
    font-size: 13px; 
}

.bread-link {
    color: var(--color-charcoal) !important; 
    font-weight: 500; 
    text-decoration: none;
    transition: color 0.2s;
	font-size: 16px;
}

.bread-link:hover {
    color: var(--color1) !important;
	text-decoration: underline;
}

.bread-arrow {
    font-size: 16px; 
    color: #999; 
    margin-top: 2px;
}

.bread-active {
    color: var(--color1); 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ==========================================================================
   DETALLE DE PRODUCTO (detalle_producto.php)
   ========================================================================== */
.item_producto_full {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    background: var(--color-white);
    padding: 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 30px;
}

/* --- Galería de imágenes (Izquierda) --- */
.imgs_prod {
    flex: 1;
    min-width: 320px;
    max-width: 500px;
}

#img_main {
    width: 100%;
    border-radius: var(--radius-md);
    cursor: zoom-in;
    border: 1px solid #eee;
    object-fit: contain;
    background: #fff;
}

.mas_imgs {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.divImg {
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
    border-radius: var(--radius-sm);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    transition: border 0.2s;
    background: #fff;
}

.divImg:hover {
    border-color: var(--color1);
}

.divImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Datos del producto (Derecha) --- */
.datos_producto {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.datos-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.datos-header h2 {
    margin: 0;
    font-size: 26px;
    color: var(--color-charcoal);
    line-height: 1.2;
}


.precio-container h1 {
    margin: 0;
    font-size: 36px;
    color: var(--color-charcoal);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.descuentoProductoFull {
    background: #e74c3c;
    color: white;
    font-size: 16px;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
}

/* --- Controles de Variantes --- */
.variantes {
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.selectorVar {
    background: #f8f9fa;
    padding: 12px 15px;
    font-weight: 700;
    color: var(--color-charcoal);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.itemListaVar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
    gap: 10px;
}

.itemListaVar-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.picItemVar {
    width: 45px;
    height: 45px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.picItemVar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.infoVarContainer .nombreItemVar {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-charcoal);
}

.infoVarContainer .precioItemVar {
    font-size: 13px;
    color: #666;
}

.controlsVar {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.menosItemVar, .masItemVar {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    cursor: pointer;
    font-weight: bold;
    color: #555;
    transition: 0.2s;
    user-select: none;
}

.menosItemVar:hover, .masItemVar:hover {
    background: #e2e6ea;
}

.cantItemVar {
    width: 45px;
    height: 35px;
    text-align: center;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    font-weight: bold;
    color: #333;
    outline: none;
    box-shadow: none;
}

/* --- Botón Agregar al carrito --- */
.add_cart {
    background: var(--color1);
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.add_cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* --- Compartir --- */
.share-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.share-container span {
    font-weight: 600;
    color: #666;
}

.share-container img {
    width: 32px;
    transition: transform 0.2s;
}

.share-container img:hover {
    transform: scale(1.1);
}

/* --- Descripción larga --- */
.desc-producto {
    width: 100%;
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    color: #555;
    line-height: 1.6;
    font-size: 15px;
}

/* --- Responsive Móvil --- */
@media (max-width: 900px) {
    .item_producto_full {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    .imgs_prod {
        max-width: 100%;
    }
    .precio-container h1 {
        font-size: 28px;
    }
}


/* ==========================================================================
   CARRUSELES DE PRODUCTOS SUGERIDOS (sugeridos.php)
   ========================================================================== */
.slider-section {
    width: 90%;
    margin: 20px auto;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.slider-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-charcoal);
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Pista deslizante (Scroll) */
.slider-track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 15px;
    padding-top: 5px;
    scrollbar-width: none; /* Oculta scrollbar en Firefox */
    -ms-overflow-style: none;  /* Oculta scrollbar en IE */
}

/* Oculta scrollbar en Chrome/Safari/Edge */
.slider-track::-webkit-scrollbar {
    display: none;
}

/* Tarjeta del producto en el carrusel */
.sug-card {
    min-width: 180px;
    max-width: 180px;
    background: var(--color-white);
    border: 1px solid #eee;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.sug-card:hover{
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.sug-img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #f9f9f9;
}

.sug-body {
    padding: 12px;
}

.sug-brand {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    font-weight: 600;
    margin-bottom: 4px;
}

.sug-title {
    margin: 0 0 10px 0;
}

.sug-title a {
    color: var(--color-charcoal);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 34px; /* Forza altura fija para alinear precios */
    transition: color 0.2s;
}

.sug-title a:hover {
    color: var(--color1);
}

/* Precios en la tarjeta */
.sug-price {
    display: flex;
    flex-direction: column;
}

.sug-old-price {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}

.sug-final-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-charcoal);
}

/* Botones de navegación (Flechas) */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
    color: #555;
    transition: background 0.2s, color 0.2s;
}

.slider-btn:hover {
    background: var(--color1);
    color: white;
    border-color: var(--color1);
}

.slider-btn.prev {
    left: -20px;
}

.slider-btn.next {
    right: -20px;
}

/* --- Responsive Móvil --- */
@media (max-width: 768px) {
    .slider-btn {
        display: none; /* En celulares usan el dedo para deslizar */
    }
    .slider-track {
        gap: 10px;
        padding-left: 10px; /* Para que la primera tarjeta no quede pegada al borde */
    }
    .sug-card {
        min-width: 150px;
        max-width: 150px;
    }
    .sug-img {
        height: 120px;
    }
}


/* Botón eliminar favoritos */
.btn-delete-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: white;
    border: 1px solid #fee2e2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: 0.2s;
}

.btn-delete-fav:hover {
    background: #ef4444;
    color: white;
    transform: scale(1.1);
}


/* ==========================================================================
   CALCULADORA DE METROS CUADRADOS (Estilo Corralón)
   ========================================================================== */
.calc-m2-container {
    background: #f1f1f1; 
    border-radius: 4px;
    padding: 25px;
    margin-top: 25px;
    margin-bottom: 25px;
    font-family: inherit;
}

.calc-m2-container h2 {
    font-size: 22px;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
}

.calc-info {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 10px;
}

.calc-white-box {
    background: #ffffff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 15px;
}

.calc-grid {
    display: flex;
    gap: 30px;
}

.calc-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.calc-col label {
    font-size: 13px;
    color: #666;
    margin-bottom: 2px;
}

.calc-col input {
    width: 120px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    color: #333;
    outline: none;
}

.calc-col input:disabled {
    background: #f9f9f9;
    color: #666;
}

.calc-subtext {
    font-size: 13px;
    color: #555;
    margin-top: 8px;
    margin-bottom: 0;
}

.calc-desperdicio {
    font-size: 13px;
    color: #555;
    margin-bottom: 15px;
}

.calc-pastina {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #b45309;
    padding: 12px;
    border-radius: 4px;
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.link-pastina {
    display: block;
    margin-top: 4px;
    color: #d97706;
    font-weight: 600;
    text-decoration: underline;
}

.link-pastina:hover {
    color: #b45309;
}

@media (max-width: 600px) {
    .calc-grid {
        flex-direction: column;
        gap: 15px;
    }
}


/* ==========================================================================
   FOOTER PRINCIPAL
   ========================================================================== */
.main-footer {
    background-color: var(--color-charcoal, #222); /* Podés ajustarlo a tu variable oscura */
    color: #f1f1f1;
    padding: 60px 20px 20px;
    margin-top: 50px;
    font-family: 'Montserrat', sans-serif;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-col h3 {
    font-size: 16px;
    color: var(--color-white, #fff);
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color1);
    padding-bottom: 10px;
    display: inline-block;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #bbb;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s, padding-left 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-col ul li a:hover {
    color: var(--color1);
    padding-left: 5px;
}

.footer-info-text {
    font-size: 14px;
    color: #bbb;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

.footer-info-text i {
    font-size: 18px;
    color: var(--color1);
    margin-top: 2px;
}

/* Legal y Créditos */
.footer-legal-wrapper {
    max-width: 1200px;
    margin: 40px auto 0;
    border-top: 1px solid #444;
    padding-top: 25px;
}

.footer-disclaimer {
    font-size: 11px;
    color: #888;
    text-align: justify;
    text-align-last: center;
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-credits {
    text-align: center;
    font-size: 13px;
    color: #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.footer-credits a {
    color: var(--color1);
    text-decoration: none;
    font-weight: 700;
    transition: 0.2s;
}

.footer-credits a:hover {
    color: #fff;
}

/* Responsive */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer-disclaimer {
        text-align: left;
        text-align-last: left;
    }
}


/* ==========================================================================
   ESTILOS INDEX - LAYOUT DEL BUSCADOR / CATÁLOGO
   ========================================================================== */
.catalog-container { max-width: 1250px; margin: 40px auto; display: flex; gap: 30px; padding: 0 15px; position: relative; align-items: flex-start;}

.catalog-sidebar { flex: 0 0 260px; background: #fff; padding: 25px; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.04); border: 1px solid #f0f0f0; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.catalog-sidebar::-webkit-scrollbar { width: 6px; }
.catalog-sidebar::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

.filter-box { margin-bottom: 25px; }
.filter-title { font-size: 15px; font-weight: 800; color: #2c3e50; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #eee; padding-bottom: 8px;}

/* Links de filtros normales */
.filter-link { display: flex; justify-content: space-between; align-items: center; color: #555; text-decoration: none; font-size: 13.5px; margin-bottom: 10px; transition: color 0.2s;}
.filter-link:hover { color: var(--color1, #0877D3); font-weight: 600;}
.filter-link span { color: #aaa; font-size: 12px; }

/* Badges Activos */
.badge-active { display: flex; justify-content: space-between; align-items: center; background: #fdf2f0; color: #c0392b; border: 1px solid #fadbd8; padding: 10px 15px; border-radius: 8px; font-size: 13px; font-weight: bold; text-decoration: none; transition: 0.2s; width: max-content !important; box-sizing: border-box;}
.badge-active:hover { background: #fadbd8; }
.badge-active i { font-size: 16px; margin-left: 10px; }
.badge-search { background: #f0f7ff; color: var(--color1, #0877D3); border: 1px solid #cce4fc; cursor: default; }

/* Precios */
.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; outline: none; width: 100%;}
.price-inputs input:focus { border-color: var(--color1, #0877D3); }
.btn-price { background: #eee; border: none; padding: 10px; border-radius: 6px; cursor: pointer; color: #555; transition: 0.3s; display:flex; align-items:center; justify-content:center;}
.btn-price:hover { background: var(--color1, #0877D3); color: white; }

/* Contenido Principal */
.catalog-content { flex: 1; min-width: 0; }
.catalog-topbar { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 15px 25px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); border: 1px solid #f0f0f0; margin-bottom: 20px; }
.catalog-topbar h1 { font-size: 20px; color: #333; margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; display: flex; gap: 8px}
.sort-box { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #555; font-weight: bold;}
.sort-box select { padding: 8px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; outline: none; background: #fafafa; cursor: pointer; }
.btn-mobile-filter { display: none; background: var(--color1, #0877D3); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; font-size: 14px; cursor: pointer; align-items: center; gap: 5px; }

/* Loader y Botón Ver Más */
.catalog-loader { display: none; text-align: center; padding: 40px; width: 100%; grid-column: 1 / -1;}
.btn-load-more { background: #fff; border: 2px solid var(--color1, #0877D3); color: var(--color1, #0877D3); padding: 12px 30px; border-radius: 50px; font-weight: bold; font-size: 15px; cursor: pointer; transition: 0.3s; margin: 30px auto; display: block; text-transform: uppercase;}
.btn-load-more:hover { background: var(--color1, #0877D3); color: #fff;}

/* ==========================================================================
   NUEVO HOME (Hero y Categorías)
   ========================================================================== */
.hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
	padding: 20px;
}
.hero-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    height: 300px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}
.hero-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.hero-card:hover img {
    transform: scale(1.05);
}
.hero-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.7), rgba(0,0,0,.5), transparent);
    padding: 20px;
    color: white;
}
.hero-overlay h2 { margin: 0 0 5px 0; color: white; font-size: 22px; font-family: 'Montserrat', sans-serif; font-weight: 800; }
.hero-overlay p { margin: 0; font-size: 14px; opacity: 0.9; }

.section-title { font-size: 24px; font-weight: 800; color: #333; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; }

.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.cat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    transition: 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.cat-card:hover {
    border-color: var(--color1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.cat-card h3 { margin: 0; font-size: 16px; font-weight: 700; }
.cat-img-wrapper {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #f5f5f5;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.cat-img-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
}
.cat-img-wrapper i {
    font-size: 24px; color: #aaa;
}

.cat-grid-container{
	padding: 50px 100px;
}


@media (max-width: 900px) {
    .catalog-container { flex-direction: column; margin-top: 20px; }
    .catalog-topbar { flex-direction: column; align-items: flex-start; gap: 15px; }
    .btn-mobile-filter { display: flex; width: 100%; justify-content: center; }
    .sort-box { width: 100%; justify-content: space-between; }
    .catalog-sidebar { position: fixed; top: 0; left: -100%; width: 85vw; height: 100vh; z-index: 9999; border-radius: 0; transition: left 0.3s ease; padding-top: 60px; }
    .sidebar-active { left: 0; }
    .close-filter { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 30px; color: #333; cursor: pointer; display: block; }
    
    .hero-grid { grid-template-columns: 1fr; }
    .cat-grid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) { .close-filter { display: none; } }

/* Marquee Marcas */
.marca-item { padding: 0 20px; }
.marca-item a { max-height: 60px; }
.marquee-wrapper { padding: 35px 0; overflow: hidden; white-space: nowrap; width: 100%; }
.marquee-track { display: inline-flex; align-items: center; width: max-content; animation: scroll-left 100s linear infinite; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }


/* ==========================================================================
	   GRILLA DE CATEGORÍAS DESTACADAS (6 CARDS)
	   ========================================================================== */
	.cat-grid-container {
		margin-bottom: 50px;
	}
	.cat-grid-especial {
		display: grid;
		grid-template-columns: repeat(2, 1fr); /* 2 por fila en PC */
		gap: 20px;
	}

	.cat-card-especial {
		display: flex;
		align-items: stretch;
		height: 130px; /* Altura fija para que la imagen quede perfecta */
		border-radius: 12px;
		overflow: hidden;
		text-decoration: none;
		color: #333;
		box-shadow: 0 4px 15px rgba(0,0,0,0.04);
		transition: transform 0.3s, box-shadow 0.3s;
		border: 1px solid rgba(255,255,255,0.5); /* Borde sutil para resaltar el degradé */
	}

	.cat-card-especial:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 25px rgba(0,0,0,0.1);
	}

	.cat-card-img {
		width: 35%; /* La imagen ocupa el 35% a la izquierda */
		flex-shrink: 0;
		position: relative;
	}

	.cat-card-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.5s ease;
	}

	.cat-card-especial:hover .cat-card-img img {
		transform: scale(1.05); /* Efecto zoom sutil al pasar el mouse */
	}

	.cat-card-info {
		width: 65%;
		display: flex;
		align-items: center; /* Centrado vertical */
		padding: 0 25px;
	}

	.cat-card-info h3 {
		font-size: 20px;
		font-weight: 900;
		margin: 0;
		font-family: 'Montserrat', sans-serif;
		color: #2c3e50;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		line-height: 1.2;
	}

	@media (max-width: 900px) {
		.cat-grid-especial {
			grid-template-columns: 1fr; /* 1 por fila en Celular */
		}
		.cat-card-especial {
			height: 110px; /* Un poco más bajas en móvil */
		}
		.cat-card-info {
			padding: 0 15px;
		}
		.cat-card-info h3 {
			font-size: 17px;
		}
	}



/* =======================================================
   SELECTOR DE CANTIDAD ESTILO MATERIAL DESIGN 3 (MD3)
======================================================= */
.qty-container-md3 {
    display: inline-flex;
    align-items: center;
    background-color: #f3f4f6; /* Surface Container */
    border-radius: 24px; /* Totalmente redondeado estilo MD3 */
    padding: 4px;
    border: 1px solid #e5e7eb;
    width: fit-content;
}

.qty-btn-md3 {
    background-color: #ffffff;
    border: none;
    color: #1f2937;
    font-size: 18px;
    font-weight: 600;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.1s;
    user-select: none;
}

.qty-btn-md3:hover {
    background-color: #e5e7eb; /* Tonal state hover */
}

.qty-btn-md3:active {
    transform: scale(0.95);
}

.qty-input-md3 {
    border: none;
    background: transparent;
    width: 90px; /* Ancho cómodo para albergar hasta 6 cifras */
    height: 36px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    outline: none;
    -moz-appearance: textfield;
}

/* Ocultar flechas nativas del input number */
.qty-input-md3::-webkit-outer-spin-button,
.qty-input-md3::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}



.toast{color:white; padding:20px 40px; display:none; position:fixed; top:70px; box-shadow:0 5px 10px 5px rgba(0,0,0,.4); border-radius:20px; width:400px; left:50%; margin-left:-200px; z-index:10000; text-align: center; }



.pwa-card-discount-badge{
	background:#e0e7ff; color:#4338ca; border:1px solid #c7d2fe; padding: 8px; border-radius: 6px; font-size: 15px; font-weight:800; display:inline-flex; align-items: center; gap:10px; width: 100%; margin-top:5px; font-family:'Montserrat', sans-serif; flex-direction: row;
}

.pwa-card-discount-badge span{
	font-size:30px; font-variation-settings:'FILL' 1;
}


.pwa-card-discount-badge div{
	display: flex; align-items: flex-start;
    flex-direction: column; gap: 2px;
}


.pwa-card-discount-badge leyenda{
	color: #555; font-size: 12px;
}




/* Variante verde para el descuento de formas de pago estilo M3 */
.pwa-card-fp-discount-badge {
    background: #f0fdf4; 
    color: #166534; 
    border: 1px solid #bbf7d0; 
    padding: 8px; 
    border-radius: 6px; 
    font-size: 15px; 
    font-weight: 800; 
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    width: 100%; 
    margin-top: 5px; 
    font-family: 'Montserrat', sans-serif; 
    flex-direction: row;
    box-sizing: border-box;
}

.pwa-card-fp-discount-badge span {
    font-size: 30px; 
    font-variation-settings: 'FILL' 1;
}

.pwa-card-fp-discount-badge div {
    display: flex; 
    align-items: flex-start;
    flex-direction: column; 
    gap: 2px;
}

.pwa-card-fp-discount-badge leyenda {
    color: #15803d; 
    font-size: 12px;
    font-weight: 600;
}