:root { --cq-primary: #d21829; }

.cq-wrap, .cq-single, .cq-fab, .cq-toast, .cq-counter { --cq-ink:#111111; --cq-muted:#667085; --cq-line:#e4e9f1; --cq-bg:#f5f7fb; --cq-radius:14px; font-family: inherit; box-sizing: border-box; }
.cq-wrap *, .cq-single * { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Botones */
.cq-btn, .button.cofersa-quote-add {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--cq-primary); color: #fff !important; border: 0; border-radius: 10px;
	padding: 12px 20px; font-weight: 700; font-size: 14px; letter-spacing: .02em; line-height: 1.2;
	text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s;
}
.cq-btn:hover, .button.cofersa-quote-add:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(210,24,41,.25); }
.cq-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.cofersa-quote-add.cq-added { background: #12805c; }
.cq-loop { margin-top: 8px; }

/* Ficha de producto */
.cq-single { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0; }
.cq-view-link { flex-basis: 100%; font-size: 14px; color: var(--cq-primary); text-decoration: underline; }

/* Selector de cantidad */
.cq-stepper { display: inline-flex; align-items: center; border: 1px solid var(--cq-line); border-radius: 10px; background: #fff; overflow: hidden; }
.cq-qty-btn { width: 36px; height: 40px; border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--cq-ink); }
.cq-qty-btn:hover { background: var(--cq-bg); }
.cq-qty-input { width: 52px; height: 40px; border: 0 !important; text-align: center; font-weight: 600; background: transparent; padding: 0 !important; -moz-appearance: textfield; box-shadow: none !important; }
.cq-qty-input::-webkit-outer-spin-button, .cq-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Página de cotización */
.cq-wrap { color: var(--cq-ink); margin: 0 auto; max-width: 1180px; }
.cq-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.cq-card { background: #fff; border: 1px solid var(--cq-line); border-radius: var(--cq-radius); padding: 26px; box-shadow: 0 10px 30px rgba(24,33,47,.06); }
.cq-form-card { position: sticky; top: 24px; }
.cq-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--cq-bg); }
.cq-card-head h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.cq-count-pill { background: color-mix(in srgb, var(--cq-primary) 12%, #fff); color: var(--cq-primary); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.cq-muted { color: var(--cq-muted); }

.cq-list { list-style: none; margin: 0; padding: 0; }
.cq-item { display: grid; grid-template-columns: 76px minmax(0,1fr) auto 32px; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cq-line); }
.cq-item:last-child { border-bottom: 0; }
.cq-thumb { display: block; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: var(--cq-bg); border: 1px solid var(--cq-line); }
.cq-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cq-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cq-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--cq-primary); font-weight: 700; }
.cq-title { font-weight: 700; color: var(--cq-ink); text-decoration: none; line-height: 1.3; }
.cq-title:hover { color: var(--cq-primary); }
.cq-sku { font-size: 12px; color: var(--cq-muted); }
.cq-remove { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--cq-bg); color: var(--cq-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.cq-remove:hover { background: #fde8e8; color: #b42318; }
.cq-continue { display: inline-block; margin-top: 18px; color: var(--cq-primary); font-weight: 600; text-decoration: none; }
.cq-continue:hover { text-decoration: underline; }
.cq-empty { text-align: center; padding: 28px 10px; }
.cq-empty h3 { margin: 0 0 6px; }
.cq-empty .cq-btn { margin-top: 14px; }

/* Formulario */
.cq-form { display: grid; gap: 16px; }
.cq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cq-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.cq-req { color: #b42318; }
.cq-field input, .cq-field textarea, .cq-field select {
	width: 100%; border: 1px solid #cfd6e2; border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 15px;
	background: #fff; color: var(--cq-ink); transition: border-color .15s, box-shadow .15s;
}
.cq-field textarea { resize: vertical; min-height: 100px; }
.cq-field input:focus, .cq-field textarea:focus, .cq-field select:focus {
	outline: none; border-color: var(--cq-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cq-primary) 18%, transparent);
}
.cq-submit { width: 100%; padding: 15px 20px; font-size: 15px; }
.cq-status { margin: 0; font-size: 14px; min-height: 1em; }
.cq-status.cq-error, .cq-error { color: #b42318; }
.cq-fine { margin: 0; font-size: 12px; color: var(--cq-muted); text-align: center; }
.cq-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Éxito */
.cq-success { text-align: center; max-width: 560px; margin: 0 auto; padding: 44px 28px; }
.cq-success h2 { margin: 12px 0 8px; }
.cq-success-icon { width: 68px; height: 68px; margin: 0 auto; border-radius: 50%; background: #e3f6ee; color: #12805c; display: flex; align-items: center; justify-content: center; }
.cq-success .cq-btn { margin-top: 18px; }

/* Flotante / contador / toast */
.cq-fab {
	position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: inline-flex; align-items: center; gap: 10px;
	background: var(--cq-primary); color: #fff !important; padding: 13px 18px; border-radius: 999px; text-decoration: none;
	font-weight: 700; font-size: 14px; box-shadow: 0 10px 28px rgba(210,24,41,.35); transition: transform .15s;
}
.cq-fab:hover { transform: translateY(-2px); }
.cq-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--cq-primary); font-size: 12px; font-weight: 800; }
.cq-counter { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; font-weight: 600; }
.cq-counter .cq-badge { background: var(--cq-primary); color: #fff; }

.cq-toast {
	position: fixed; left: 50%; bottom: 28px; z-index: 9999; transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
	display: flex; gap: 14px; align-items: center; background: #18212f; color: #fff; padding: 13px 20px; border-radius: 12px;
	font-size: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.3); transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px);
}
.cq-toast.cq-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cq-toast a { color: #8fc5ff; font-weight: 700; white-space: nowrap; }

@media (max-width: 860px) {
	.cq-grid { grid-template-columns: 1fr; }
	.cq-form-card { position: static; }
	.cq-card { padding: 20px; }
}
@media (max-width: 560px) {
	.cq-row { grid-template-columns: 1fr; }
	.cq-item { grid-template-columns: 60px minmax(0,1fr) 32px; }
	.cq-thumb { width: 60px; height: 60px; }
	.cq-item .cq-stepper { grid-column: 2 / 3; justify-self: start; }
	.cq-item .cq-remove { grid-row: 1; grid-column: 3; }
	
}
@media (prefers-reduced-motion: reduce) {
	.cq-btn, .cq-fab, .cq-toast { transition: none; }
}

/* WhatsApp / PDF */
.cq-or { display: flex; align-items: center; gap: 12px; color: var(--cq-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.cq-or::before, .cq-or::after { content: ""; flex: 1; height: 1px; background: var(--cq-line); }
.cq-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cq-btn.cq-wa { background: #1fa855; }
.cq-btn.cq-wa:hover { box-shadow: 0 6px 16px rgba(31,168,85,.3); }
.cq-btn.cq-pdf { background: #fff; color: var(--cq-primary) !important; border: 2px solid var(--cq-primary); }
.cq-btn.cq-pdf:hover { box-shadow: 0 6px 16px rgba(210,24,41,.18); }
.cq-alt .cq-btn { padding: 13px 10px; font-size: 13px; }
.cq-btn.cq-loading { opacity: .7; }
.cq-success-actions { max-width: 420px; margin: 18px auto 0; }
@media (max-width: 560px) { .cq-alt { grid-template-columns: 1fr; } }


/* ===== Blindaje contra estilos del tema (botones/inputs) ===== */
.cq-wrap button, .cq-single button, .cq-loop, .cq-fab, .cq-toast a { text-transform: none; letter-spacing: normal; }
.cq-btn, .button.cofersa-quote-add, button.cofersa-quote-add {
	background: var(--cq-primary) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important;
	box-shadow: none; text-shadow: none !important; opacity: 1 !important; min-height: 0; height: auto;
	display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; text-align: center;
	font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; padding: 13px 20px !important; letter-spacing: .02em !important; text-transform: uppercase !important;
}
.cq-btn:hover, .cq-btn:focus, .button.cofersa-quote-add:hover, .button.cofersa-quote-add:focus, button.cofersa-quote-add:hover {
	background: var(--cq-primary) !important; color: #fff !important; filter: brightness(.9);
}
.cofersa-quote-add.cq-added, .cofersa-quote-add.cq-added:hover { background: #12805c !important; }
.cq-loop { width: 100%; margin-top: 10px; }
.cq-submit { width: 100%; }
.cq-submit.cq-loading { opacity: .7 !important; pointer-events: none; }
.cq-wrap .cq-submit { background: #1fa855 !important; text-transform: none !important; font-size: 15px !important; padding: 15px 20px !important; }
.cq-wrap .cq-submit:hover { background: #178a45 !important; filter: none; box-shadow: 0 6px 16px rgba(31,168,85,.3); }
.cq-wrap .cq-success .cq-btn:not(.cq-submit) { text-transform: none !important; }

.cq-wrap .cq-stepper, .cq-single .cq-stepper { display: inline-flex !important; width: auto !important; max-width: none; align-items: center; background: #fff; border: 1px solid var(--cq-line) !important; border-radius: 10px !important; overflow: hidden; padding: 0 !important; margin: 0 !important; }
.cq-wrap .cq-qty-btn, .cq-single .cq-qty-btn {
	flex: 0 0 38px; width: 38px !important; min-width: 0 !important; height: 42px !important; padding: 0 !important; margin: 0 !important;
	background: transparent !important; color: var(--cq-ink) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	font-size: 20px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; text-transform: none !important;
}
.cq-wrap .cq-qty-btn:hover, .cq-single .cq-qty-btn:hover { background: var(--cq-bg) !important; color: var(--cq-primary) !important; }
.cq-wrap .cq-qty-input, .cq-single .cq-qty-input {
	width: 48px !important; min-width: 0 !important; height: 42px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
	background: transparent !important; box-shadow: none !important; text-align: center !important; font-size: 15px !important; font-weight: 700 !important; color: var(--cq-ink) !important;
}
.cq-wrap .cq-remove {
	flex: 0 0 34px; width: 34px !important; height: 34px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
	border: 0 !important; border-radius: 50% !important; background: var(--cq-bg) !important; color: var(--cq-muted) !important;
	font-size: 22px !important; line-height: 1 !important; display: flex !important; align-items: center; justify-content: center; box-shadow: none !important; text-transform: none !important;
}
.cq-wrap .cq-remove:hover { background: #fde8e8 !important; color: #b42318 !important; }
.cq-item { grid-template-columns: 76px minmax(0,1fr) auto 34px; }

/* Botón flotante */
.cq-fab { background: var(--cq-fab-bg, var(--cq-primary)) !important; color: #fff !important; }
.cq-fab-left { right: auto; }
.cq-fab-right { left: auto; }
.cq-fab .cq-badge { background: #fff; color: #111; }
.cq-fab[hidden] { display: none !important; }
@media (max-width: 560px) { .cq-fab .cq-fab-label { display: none; } .cq-fab { padding: 13px 16px; } }

/* Dos opciones de envío */
.cq-send { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cq-wrap .cq-send .cq-btn { width: 100%; text-transform: none !important; font-size: 14px !important; padding: 14px 10px !important; }
.cq-wrap .cq-send .cq-mail { background: var(--cq-primary) !important; }
.cq-wrap .cq-send .cq-mail:hover { background: var(--cq-primary) !important; filter: brightness(.9); box-shadow: 0 6px 16px rgba(210,24,41,.28); }
.cq-wrap .cq-send .cq-btn:disabled { opacity: .6 !important; }
@media (max-width: 560px) { .cq-send { grid-template-columns: 1fr; } }

/* v1.2.1 — botones de envío: mismo tamaño y separados */
.cq-wrap .cq-send { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; align-items: stretch; width: 100%; margin: 4px 0 0; }
.cq-wrap .cq-send > .cq-btn, .cq-wrap .cq-send > button {
	width: 100% !important; min-width: 0 !important; height: 54px !important; min-height: 54px !important; margin: 0 !important;
	padding: 0 12px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
	font-size: 14px !important; font-weight: 700 !important; line-height: 1.1 !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap; border-radius: 10px !important;
}
@media (max-width: 560px) { .cq-wrap .cq-send { grid-template-columns: 1fr !important; gap: 12px !important; } }