:root{--accent:#B0C80B;--accent-700:#9AB209;--accent-100:#F4F8DD;--text:#222;--muted:#666;--line:#eee}
.clago-cart{max-width:1200px;margin:30px auto;padding:0 16px;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial;color:var(--text)}
.clago-cart *{box-sizing:border-box}
.clago-cart a{color:inherit;text-decoration:none}
.clago-cart input,.clago-cart button{font:inherit}
.clago-cart button{cursor:pointer}

/* Loader */
.clago-spinner{position:fixed;right:18px;bottom:18px;width:30px;height:30px;border-radius:50%;border:3px solid #dfe6b6;border-top-color:var(--accent);opacity:0;pointer-events:none;transform:translateZ(0);transition:opacity .15s ease}
body.clago-loading .clago-spinner{opacity:1;animation:clago-spin .7s linear infinite}
@keyframes clago-spin{to{transform:rotate(360deg)}}

/* Encabezado */
.clago-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.clago-head h1{font-size:42px;margin:0;font-weight:800;line-height:1.1;color:var(--accent)}
.clago-sub{margin-top:4px;color:#6b6b6b;font-size:14px}
.clago-secure{display:inline-flex;align-items:center;gap:10px;background:var(--accent-100);border:1px solid #e3ebba;border-left:4px solid var(--accent);color:#1f3d00;padding:10px 14px;border-radius:12px;font-weight:700}
.clago-secure .fa-shield-halved{color:var(--accent)}

/* Grid */
.clago-grid{display:grid;grid-template-columns:1fr 380px;gap:24px}
@media(max-width:1100px){.clago-grid{grid-template-columns:1fr}}
@media(max-width:480px){.clago-cart{padding:0 12px}}

/* Tabla */
.clago-table{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.clago-row{display:grid;grid-template-columns:1fr 120px 160px 140px;align-items:center;padding:18px;border-top:1px solid #f1f1f1}
.clago-row-head{background:#fafafa;font-weight:700;border-top:0}
.hide-sm{display:block}
@media(max-width:860px){
  .clago-row{grid-template-columns:1fr 150px}
  .hide-sm{display:none}
  .clago-subtotal{justify-self:end}
}
.clago-prod{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:center;position:relative}
.clago-thumb img{width:90px;height:90px;object-fit:contain;display:block}
.clago-remove{position:absolute;left:-6px;top:-6px;background:#ffefef;border:1px solid #ffd7d7;color:#c62828;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:12px}
.clago-title{font-weight:700;color:#111}
.clago-price,.clago-subtotal{font-weight:700;justify-self:end}
.clago-price-mobile{display:none}
@media(max-width:860px){.clago-price-mobile{display:block;color:var(--muted);margin-top:4px}}

/* Qty */
.clago-qty{display:flex;align-items:center;justify-content:flex-end;gap:0}
.clago-qty .qty{width:56px;text-align:center;height:38px;border:1px solid #d6d6d6;border-left:0;border-right:0;padding:0 6px;appearance:textfield}
.clago-qty .qty::-webkit-outer-spin-button,.clago-qty .qty::-webkit-inner-spin-button{appearance:none;margin:0}
.qty-btn{width:38px;height:38px;border:1px solid #d6d6d6;background:#fff;user-select:none}
.qty-btn:first-child{border-radius:20px 0 0 20px}
.clago-qty .qty{border-top:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6}
.qty-btn:last-child{border-radius:0 20px 20px 0}
.qty-btn:hover{background:var(--accent-100);border-color:#cbd98e}
.clago-qty .quantity{display:inline-block}
.clago-qty .quantity .qty{width:56px;text-align:center;height:38px;border:1px solid #d6d6d6;border-left:0;border-right:0;padding:0 6px;appearance:textfield}

/* Aside */
.clago-card{position:sticky;top:16px}
.coupon-toggle{width:100%;background:#fff;border:2px solid var(--accent);color:#333;font-weight:800;border-radius:12px;padding:12px;margin-bottom:14px}
.coupon-toggle:hover{background:var(--accent-100)}
.clago-totals{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.clago-totals h3{margin:0 0 10px;font-weight:800}

/* Totales */
.totals{display:flex;flex-direction:column;gap:10px;margin:10px 0 16px}
.totals .row{display:flex;align-items:center;justify-content:space-between}
.totals .row.total{font-size:20px;font-weight:900;border-top:1px dashed #e5e5e5;padding-top:12px}

/* CTA */
.terms{font-size:12px;color:#444;margin-bottom:14px}
.terms a{color:#2e7d32;border-bottom:1px dotted #2e7d32}
.checkout{display:block;text-align:center;background:var(--accent);color:#fff;padding:14px 16px;border-radius:12px;font-weight:900}
.checkout:hover{background:var(--accent-700)}


/* ===== Ajustes visuales para el campo de cupón ===== */
.clago-coupon {
  display: flex;
  flex-direction: column; /* apila los elementos */
  gap: 10px;
  align-items: stretch;
  padding: 18px;
  background: #fff;
  border-top: 1px solid #f1f1f1;
}

.clago-coupon label {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.clago-coupon input[type="text"] {
  width: 100%;
  height: 44px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 15px;
}

.clago-coupon .btn {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-weight: 800;
  transition: background 0.2s ease;
}

.clago-coupon .btn:hover {
  background: var(--accent-700);
  border-color: var(--accent-700);
}

/* ===== Hover verde oscuro en botón "Añadir cupón de descuento" ===== */
.coupon-toggle:hover {
  background: var(--accent-700);
  color: #fff;
  border-color: var(--accent-700);
}



/* ===== Ajuste móvil: contador debajo del texto y subtot al borde derecho ===== */
@media (max-width: 480px){

  /* La fila pasa a una sola columna */
  .clago-row{
    grid-template-columns: 1fr;
    align-items: flex-start;
    row-gap: 8px;
  }

  /* Bloque del producto: miniatura + texto más ancho */
  .clago-prod{
    grid-template-columns: 70px 1fr;   /* deja más ancho el texto */
    gap: 10px;
  }
  .clago-thumb img{ width: 64px; height: 64px; }

  /* Precio de escritorio ya está oculto; muestra el móvil debajo del título */
  .clago-price-mobile{ display: block; color: var(--muted); margin-top: 2px; }

  /* El contador ocupa toda la fila, debajo del bloque de producto */
  .clago-qty{
    justify-content: flex-start;
    margin-top: 2px;
  }
  .clago-qty .qty{ width: 52px; height: 34px; }
  .qty-btn{ width: 34px; height: 34px; }

  /* El subtotal se mantiene a la derecha, en su propia línea */
  .clago-subtotal{ justify-self: end; margin-top: 4px; }

  /* Encabezados de tabla en móvil: sólo Producto/Cantidad */
  .clago-row-head{
    grid-template-columns: 1fr 120px;
  }
}

/* ===== Alertas de cupón con barra de progreso ===== */
.clago-alert {
  display:flex; align-items:center; gap:10px;
  border-radius:10px; padding:10px 12px; margin-top:12px;
  font-weight:700; font-size:14px;
  border:1px solid transparent;
}
.clago-alert--ok { background:#E9F6D7; color:#204b00; border-color:#cfeab0; }
.clago-alert--err{ background:#FFE7E7; color:#6f1111; border-color:#ffc7c7; }

.clago-alert__bar {
  flex:1; height:6px; border-radius:999px; overflow:hidden; background:#ffffff33;
}
.clago-alert--ok  .clago-alert__bar > span{ display:block; height:100%; background:#7BC600; }
.clago-alert--err .clago-alert__bar > span{ display:block; height:100%; background:#E53935; }

/* Ubicación (debajo del bloque de cupón / dentro de la tarjeta) */
.clago-card .clago-alert { margin-left:0; margin-right:0; }


.clago-cart-empty { text-align: center; padding: 60px 20px; background: #fff; border-radius: 12px; border: 1px solid var(--line); }
.clago-empty-icon { font-size: 64px; color: var(--accent); margin-bottom: 20px; opacity: 0.5; }
.clago-cart-empty h2 { font-weight: 800; margin-bottom: 10px; }
.clago-cart-empty p { color: var(--muted); margin-bottom: 30px; }
.clago-cart-empty .checkout { display: inline-block; min-width: 250px; }
/* 鈹�鈹� Badge +IVA 鈹�鈹� */
.clago-iva-badge {
    display: inline-block;
    background-color: #c0392b;
    color: #fff;
    font-size: 0.82em;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
    letter-spacing: 0.04em;
}

/* Precio base sin IVA (muted, sin tachar) */
.clago-price-base {
    display: block;
    font-size: 0.82em;
    color: #888;
    line-height: 1.2;
}

/* Precio original tachado (solo para ofertas reales) */
.clago-price-original {
    display: block;
    font-size: 0.85em;
    color: #999;
    text-decoration: line-through;
    line-height: 1.2;
}

/* Precio con IVA incluido */
.clago-price-iva {
    display: block;
    font-weight: 700;
    line-height: 1.4;
}

/* 鈹�鈹� Fila IVA en totales 鈹�鈹� */
.clago-row-iva {
    color: #666;
    font-size: 0.92em;
    border-top: 1px dashed #e0e0e0;
    padding-top: 6px;
    margin-top: 2px;
}