/* ============================================================
   DANGOFE OS · TALLER · REVISIÓN DE LA COTIZACIÓN ANTES DE ENVIARLA (prefijo crv-) · 2026-10-20 · chat de Diseño
   Va con cotrev.js: al tocar «Enviar cotización/estimado al cliente» (#tal-cot-enviar) se abre esto en vez del confirm().
   Colores propios (la hoja vive fuera de .tal-wrap, así que no depende de los --tp-*); claro y «Noche azul» por [data-theme='dark'] (o .is-noche en el velo).
   Sin sombras (solo anillos planos de foco); el velo sin desenfoque de fondo; nada animado sin parar (3–4 ciclos).
   A · Hoja (abajo en el teléfono, centrada en pantalla grande) · B · Panel dentro de la ficha (#tal-cotform) · C · Dos pasos (tarjeta centrada).
   ============================================================ */
.crv { --crv-az: 3, 38, 155; --crv-cel: 59, 130, 246; --crv-ver: 34, 197, 94; --crv-amb: 245, 158, 11; --crv-roj: 239, 68, 68;
  --crv-tinta: #0b1540; --crv-tenue: #4a5680; --crv-txt3: #7a85a8; --crv-azul: #0b3dd6;
  --crv-linea: rgba(3, 38, 155, .10); --crv-linea2: rgba(3, 38, 155, .18); --crv-campo: rgba(3, 38, 155, .045); --crv-campo2: rgba(255, 255, 255, .92);
  --crv-vidrio: rgba(255, 255, 255, .97); --crv-borde: rgba(255, 255, 255, .9); --crv-card: rgba(255, 255, 255, .78);
  --crv-amb-t: #9a5b00; --crv-ver-t: #15724a; --crv-roj-t: #b42318; --crv-sobre: #fff;
  box-sizing: border-box; color: var(--crv-tinta); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.4; text-align: left; }
[data-theme='dark'] .crv, .crv-velo.is-noche .crv { --crv-tinta: #eef1ff; --crv-tenue: #aab5e0; --crv-txt3: #7d89b8; --crv-azul: #8db0ff;
  --crv-linea: rgba(120, 150, 255, .14); --crv-linea2: rgba(120, 150, 255, .26); --crv-campo: rgba(255, 255, 255, .05); --crv-campo2: rgba(255, 255, 255, .07);
  --crv-vidrio: rgba(12, 22, 60, .97); --crv-borde: rgba(140, 170, 255, .28); --crv-card: rgba(8, 16, 46, .72);
  --crv-amb-t: #fcd34d; --crv-ver-t: #86efac; --crv-roj-t: #ff8a7a; --crv-sobre: #0b1540; }
.crv *, .crv *::before, .crv *::after { box-sizing: border-box; }
.crv [hidden] { display: none !important; }

/* ---------- velo (A y C) ---------- */
.crv-velo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 8800; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 22, 51, .42); animation: crv-aparece .2s ease both; }
[data-theme='dark'] .crv-velo, .crv-velo.is-noche { background: rgba(2, 6, 24, .62); }
.crv-velo.is-fuera { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.crv-velo--C { align-items: center; padding: 16px; }
@keyframes crv-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes crv-sube { to { transform: translateY(0); } }

/* ---------- la caja ---------- */
.crv--A, .crv--C { position: relative; width: 100%; max-width: 600px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--crv-borde); background: var(--crv-vidrio); }
.crv--A::-webkit-scrollbar, .crv--C::-webkit-scrollbar { display: none; }
.crv--A { border-radius: 30px 30px 0 0; border-bottom: 0; transform: translateY(24px); animation: crv-sube .3s cubic-bezier(.2, .9, .25, 1) both; }
.crv--C { max-width: 520px; max-height: 90vh; max-height: 90dvh; border-radius: 26px; padding: 18px 18px 16px; }
.crv-asa { width: 42px; height: 5px; margin: -8px auto 0; border-radius: 999px; background: var(--crv-linea2); flex: none; }
@media (min-width: 700px) {
  .crv-velo { align-items: center; padding: 20px; }
  .crv--A { border-radius: 28px; border-bottom: 1px solid var(--crv-borde); max-height: 88vh; transform: none; animation: none; }
  .crv-asa { display: none; }
}
/* B · panel dentro de la ficha (#tal-cotform), sin velo */
.crv--B { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--crv-linea2); background: var(--crv-card); animation: crv-aparece .25s ease both; }
.crv--B .crv-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 640px) { .crv--B .crv-cuerpo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.crv--B .crv-cab b { font-size: 17px; }

/* ---------- cabecera ---------- */
.crv-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.crv-cab > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crv-ojal { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--crv-tenue); }
.crv-ojal svg { width: 12px; height: 12px; }
.crv-cab b { font-size: 20px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.crv-cab small { font-size: 13px; color: var(--crv-tenue); }
.crv-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--crv-linea2); background: var(--crv-campo); color: var(--crv-tenue); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.crv-x svg { width: 15px; height: 15px; }
/* pasos (C) */
.crv-pasos { display: flex; flex-direction: column; gap: 6px; }
.crv-pasos__t { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--crv-txt3); }
.crv-pasos__b { display: flex; gap: 6px; }
.crv-pasos__b i { flex: 1; height: 6px; border-radius: 999px; background: var(--crv-linea2); }
.crv-pasos__b i.is-on { background: rgb(var(--crv-az)); }
[data-theme='dark'] .crv-pasos__b i.is-on, .crv-velo.is-noche .crv-pasos__b i.is-on { background: #8db0ff; }

/* ---------- el precio ---------- */
.crv-precio { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; border: 1px solid var(--crv-linea); background: var(--crv-campo); }
.crv-precio--alto, .crv-precio--bajo { border-color: rgba(var(--crv-amb), .5); background: rgba(var(--crv-amb), .09); }
.crv-precio--ok { border-color: rgba(var(--crv-ver), .4); background: rgba(var(--crv-ver), .07); }
.crv-precio--error { border-color: rgba(var(--crv-roj), .35); background: rgba(var(--crv-roj), .06); }
.crv-precio__fila { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.crv-precio__num { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.crv-precio__num small { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--crv-tenue); margin-right: 4px; }
.crv-precio--alto .crv-precio__num, .crv-precio--bajo .crv-precio__num { color: var(--crv-amb-t); }
.crv-precio--ok .crv-precio__num { color: var(--crv-ver-t); }
.crv-precio__cap { font-size: 12.5px; color: var(--crv-tenue); }
.crv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; border: 1px solid var(--crv-linea2); background: var(--crv-campo2); color: var(--crv-tenue); }
.crv-pill svg { width: 14px; height: 14px; }
.crv-pill--amb { border-color: rgba(var(--crv-amb), .55); background: rgba(var(--crv-amb), .16); color: var(--crv-amb-t); }
.crv-pill--ok { border-color: rgba(var(--crv-ver), .45); background: rgba(var(--crv-ver), .14); color: var(--crv-ver-t); }
.crv-pill--roj { border-color: rgba(var(--crv-roj), .4); background: rgba(var(--crv-roj), .1); color: var(--crv-roj-t); }
.crv-precio__txt { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; font-weight: 600; }
.crv-precio__ref { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--crv-tenue); }
/* la escala: dónde cae el precio frente a lo normal */
.crv-escala { position: relative; height: 58px; margin: 8px 2px 0; }
.crv-escala__pista { position: absolute; left: 0; right: 0; top: 27px; height: 8px; border-radius: 999px; background: var(--crv-linea2); }
.crv-escala__zona { position: absolute; top: 27px; height: 8px; border-radius: 999px; background: rgba(var(--crv-ver), .55); }
.crv-escala__med { position: absolute; top: 23px; width: 2px; height: 16px; margin-left: -1px; border-radius: 2px; background: var(--crv-ver-t); opacity: .9; }
.crv-escala__mio { position: absolute; top: 29px; height: 4px; border-radius: 999px; background: rgba(var(--crv-amb), .55); }
.crv-precio--ok .crv-escala__mio { background: rgba(var(--crv-ver), .7); }
.crv-escala__pto { position: absolute; top: 21px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; border: 3px solid var(--crv-sobre); background: var(--crv-tenue); }
.crv-precio--alto .crv-escala__pto, .crv-precio--bajo .crv-escala__pto { background: var(--crv-amb-t); }
.crv-precio--ok .crv-escala__pto { background: var(--crv-ver-t); }
.crv-escala__eti { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--crv-tenue); }
.crv-escala__eti.is-izq { transform: none; }
.crv-escala__eti.is-der { transform: translateX(-100%); }
.crv-escala__min, .crv-escala__max, .crv-escala__uno { position: absolute; top: 40px; font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--crv-tenue); }
.crv-escala__max, .crv-escala__min.is-der { transform: translateX(-100%); }
.crv-escala__max.is-izq { transform: none; }
.crv-escala__uno { transform: translateX(-50%); }
.crv-escala__uno.is-izq { transform: none; } .crv-escala__uno.is-der { transform: translateX(-100%); }
/* cargando: barras que brillan 4 veces y se quedan quietas */
.crv-esq { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.crv-esq i { display: block; height: 10px; border-radius: 999px; background: var(--crv-linea2); animation: crv-brillo 1.2s ease-in-out 4 both; }
.crv-esq i:nth-child(1) { width: 78%; } .crv-esq i:nth-child(2) { width: 92%; animation-delay: .15s; } .crv-esq i:nth-child(3) { width: 64%; animation-delay: .3s; }
.crv-carga { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--crv-tenue); }
.crv-carga svg { width: 16px; height: 16px; flex: none; color: var(--crv-azul); animation: crv-late 1s ease-in-out 4 both; }
@keyframes crv-brillo { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes crv-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* ---------- lo que le diremos al cliente ---------- */
.crv-texto { display: flex; flex-direction: column; gap: 10px; }
.crv-sec { display: flex; flex-direction: column; gap: 2px; }
.crv-sec__fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crv-sec b { font-size: 14.5px; font-weight: 800; line-height: 1.25; }
.crv-sec small { font-size: 12.5px; color: var(--crv-tenue); line-height: 1.35; }
.crv-ia { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(var(--crv-az), .1); color: var(--crv-azul); white-space: nowrap; }
.crv-ia svg { width: 12px; height: 12px; }
.crv-ta { width: 100%; min-height: 124px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--crv-linea2); background: var(--crv-campo2); color: inherit; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; outline: 0; }
.crv-ta::placeholder { color: var(--crv-txt3); }
.crv-ta[disabled] { opacity: .6; }
/* v2 · «Pedir otra explicación» (solo si el programa pasa op.otra) */
.crv-otra { display: flex; align-items: center; min-height: 36px; }
.crv-otra .crv-carga { font-size: 12.5px; }
.crv-b--mini { min-height: 36px; padding: 7px 12px; border-radius: 11px; font-size: 13px; }
.crv-b--mini svg { width: 14px; height: 14px; }
.crv-ta:focus-visible { border-color: rgba(var(--crv-cel), .7); box-shadow: 0 0 0 3px rgba(var(--crv-cel), .3); }
.crv-inc { display: flex; flex-direction: column; gap: 2px; }
.crv-inc__t { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--crv-txt3); margin: 2px 0 4px; }
.crv-inc__t span { font-weight: 600; letter-spacing: 0; text-transform: none; }
.crv-inc__it { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.35; -webkit-tap-highlight-color: transparent; }
.crv-inc__it input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.crv-inc__caja { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--crv-linea2); background: var(--crv-campo2); position: relative; }
.crv-inc__caja::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); opacity: 0; }
.crv-inc__it input:checked + .crv-inc__caja { background: rgb(var(--crv-az)); border-color: transparent; }
[data-theme='dark'] .crv-inc__it input:checked + .crv-inc__caja, .crv-velo.is-noche .crv-inc__it input:checked + .crv-inc__caja { background: #2e5bd9; }
.crv-inc__it input:checked + .crv-inc__caja::after { opacity: 1; }
.crv-inc__it input:focus-visible + .crv-inc__caja { box-shadow: 0 0 0 3px rgba(var(--crv-cel), .35); }
.crv-inc__it:not(.is-on) .crv-inc__txt { opacity: .5; }
/* avisos: sin clave, la IA falló */
.crv-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(var(--crv-amb), .4); background: rgba(var(--crv-amb), .09); }
.crv-aviso > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--crv-amb-t); }
.crv-aviso > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.crv-aviso b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.crv-aviso small { display: block; font-size: 12.5px; color: var(--crv-tenue); line-height: 1.35; }
.crv-aviso--roj { border-color: rgba(var(--crv-roj), .3); background: rgba(var(--crv-roj), .06); }
.crv-aviso--roj > svg { color: var(--crv-roj-t); }
.crv-aviso .crv-b { min-height: 34px; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; }

/* ---------- acciones ---------- */
.crv-err { font-size: 13px; font-weight: 600; color: var(--crv-roj-t); }
.crv-err:empty { display: none; }
.crv-puesta { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 700; color: var(--crv-ver-t); }
.crv-puesta svg { width: 15px; height: 15px; flex: none; }
.crv-acc { display: flex; flex-direction: column; gap: 8px; }
.crv-acc__der { display: flex; flex-direction: column; gap: 8px; }
.crv-acc__izq { display: flex; flex-direction: column; }
.crv-acc__izq .crv-b { width: 100%; }
.crv-b { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--crv-linea2); background: var(--crv-campo2); color: inherit; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: center; }
.crv-b svg { width: 16px; height: 16px; flex: none; }
.crv-b[disabled] { opacity: .55; cursor: default; }
.crv-b:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--crv-cel), .35); }
.crv-b--pri { color: #fff; border-color: transparent; background: linear-gradient(135deg, rgb(var(--crv-az)), rgb(var(--crv-cel))); }
.crv-b--amb { border-color: rgba(var(--crv-amb), .6); background: rgba(var(--crv-amb), .12); color: var(--crv-amb-t); }
.crv-b--txt { border-color: transparent; background: transparent; color: var(--crv-tenue); }
.crv-b__esp { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: crv-gira .9s linear 4 both; }
@keyframes crv-gira { to { transform: rotate(360deg); } }
/* A y C: apilados siempre (como una hoja de iOS). B: en fila cuando el panel es ancho: «Volver» a la izquierda, el par poner/enviar a la derecha; si no caben, el par baja entero */
@container (min-width: 600px) {
  .crv--B .crv-acc { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .crv--B .crv-acc__izq { order: -1; flex-direction: row; }
  .crv--B .crv-acc__izq .crv-b { width: auto; }
  .crv--B .crv-acc__der { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
  .crv--B .crv-acc .crv-puesta { width: 100%; }
}
.crv--B .crv-b { min-height: 40px; padding: 8px 14px; border-radius: 12px; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  .crv-velo, .crv--A, .crv--B, .crv-esq i, .crv-carga svg, .crv-b__esp { animation: none; transform: none; opacity: 1; }
  .crv-velo.is-fuera { opacity: 0; transition: none; }
}
/* el nodo de la B (#tal-cotform) es un ítem del flex .tal-cotizacion: que ocupe toda la fila mientras tenga la revisión */
.crv-nodo { flex: 1 0 100%; min-width: 0; }