/**
 * SISTEMA DE VENTANAS EMERGENTES DE CASAVE (v2.96.0)
 *
 * Del diseño que entregó Alex (casave-popups.html). Una sola forma de
 * preguntar, confirmar y avisar en toda la plataforma, en lugar de las tres
 * que convivían: los modales del panel, los del asistente y los
 * `window.confirm`/`prompt` del navegador — que además no se pueden diseñar y
 * en iOS salen con el dominio delante.
 *
 * TODO VA PREFIJADO CON `csv-`, Y NO ES CAPRICHO.
 * El diseño original usa nombres de dos y tres letras —`.pop`, `.pc`, `.sp`,
 * `.sw`, `.btn`— y ocho de ellos YA EXISTEN en las 24.000 líneas de
 * `casave.css` y del panel. Cargarlos sin prefijo habría repintado botones e
 * interruptores por media plataforma, que es exactamente el tipo de estropicio
 * que aquí ya ha pasado tres veces (`.csv-claim`, `.csv-value`, `.csv-arepo`).
 * Comprobado uno a uno antes de escribir este fichero.
 *
 * Piezas:
 *   .csv-pop            capa de fondo (velo + centrado)
 *   .csv-pc             la tarjeta; --sm/--lg/--xl para el ancho
 *   .csv-pc__vis        cabecera visual con color
 *   .csv-pc__ic         icono circular (i-y amarillo, i-g verde, i-r rojo…)
 *   .csv-pc__b/__t/__d  cuerpo, título y texto
 *   .csv-pc__f          pie con los botones
 *   .csv-sp             indicador de "estoy trabajando"
 *   .csv-toast          aviso corto que aparece abajo
 *
 * En móvil la tarjeta se convierte en hoja inferior: sube desde abajo y se
 * agarra al borde, que es como se manejan estas cosas con el pulgar.
 */

/* --- capa de fondo --- */
.csv-pop{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(17,17,17,.55);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .26s var(--ease);}
.csv-pop.on{opacity:1;pointer-events:auto;}
/* --- tarjeta base --- */
.csv-pc{background:var(--white);border-radius:26px;width:100%;max-width:460px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 32px 90px rgba(0,0,0,.3);
  transform:translateY(18px) scale(.96);opacity:0;transition:.3s var(--ease);}
.csv-pop.on .csv-pc{transform:none;opacity:1;}
.csv-pc--sm{max-width:400px;}
.csv-pc--lg{max-width:600px;}
.csv-pc--xl{max-width:740px;}
/* --- cabecera visual --- */
.csv-pc__vis{height:172px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.csv-pc__vis--y{background:linear-gradient(140deg,#FFFBE0,#FFED00);}
.csv-pc__vis--d{background:var(--ink);}
.csv-pc__vis--c{background:linear-gradient(140deg,#F7F6F2,#E7E4DC);}
.csv-pc__vis svg.big{width:60px;height:60px;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.csv-pc__blob{position:absolute;border-radius:50%;opacity:.32;}
/* --- icono circular --- */
.csv-pc__ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;flex-shrink:0;}
.csv-pc__ic svg{width:25px;height:25px;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.csv-i-y{background:var(--yellow-soft);}
.csv-i-y svg{stroke:#B8860B;}
.csv-i-g{background:var(--green-bg);}
.csv-i-g svg{stroke:var(--green);}
.csv-i-r{background:var(--red-bg);}
.csv-i-r svg{stroke:var(--red);}
.csv-i-b{background:var(--blue-bg);}
.csv-i-b svg{stroke:var(--blue);}
.csv-i-p{background:var(--purple-bg);}
.csv-i-p svg{stroke:var(--purple);}
.csv-i-n{background:var(--cream);}
.csv-i-n svg{stroke:var(--ink);}
/* --- cuerpo --- */
.csv-pc__b{padding:30px;overflow-y:auto;}
.csv-pc__b--c{text-align:center;}
.csv-pc__b--c .csv-pc__ic{margin-left:auto;margin-right:auto;}
.csv-pc__tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px;margin-bottom:14px;}
.csv-t-y{background:var(--yellow);color:var(--ink);}
.csv-t-g{background:var(--green-bg);color:var(--green);}
.csv-t-b{background:var(--blue-bg);color:var(--blue);}
.csv-pc__t{font-size:23px;font-weight:800;letter-spacing:-.035em;line-height:1.2;margin-bottom:10px;}
.csv-pc__d{font-size:15px;color:var(--grey);line-height:1.65;}
.csv-pc__d b{color:var(--ink-2);font-weight:600;}
/* --- pie --- */
.csv-pc__f{padding:20px 30px;border-top:1px solid var(--line);background:#FCFBF8;
  display:flex;gap:10px;align-items:center;}
.csv-pc__f--c{justify-content:center;}
.csv-pc__f--stack{flex-direction:column;}
.csv-pc__f--stack .csv-btn{width:100%;justify-content:center;}
.csv-pc__f .csv-sp{margin-right:auto;}
/* --- botones --- */
.csv-btn{border:none;border-radius:100px;padding:13px 22px;font-weight:700;font-size:14.5px;cursor:pointer;
  transition:.17s var(--ease);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.csv-btn:hover{transform:translateY(-1px);}
.csv-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.csv-btn--y{background:var(--yellow);color:var(--ink);}
.csv-btn--y:hover{box-shadow:0 8px 22px rgba(245,187,31,.36);}
.csv-btn--dark{background:var(--ink);color:#fff;}
.csv-btn--ghost{background:var(--white);color:var(--ink);border:1.5px solid var(--line);}
.csv-btn--ghost:hover{border-color:var(--ink);}
.csv-btn--red{background:var(--red);color:#fff;}
.csv-btn--plain{background:none;color:var(--grey);padding:13px 8px;}
.csv-btn--plain:hover{color:var(--ink);transform:none;}
/* --- cerrar --- */
.csv-pc__x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border:none;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;transition:.16s var(--ease);}
.csv-pc__x:hover{transform:scale(1.08);background:#fff;}
.csv-pc__x svg{width:14px;height:14px;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;}
.csv-pc__x--in{position:static;background:var(--white);border:1px solid var(--line);}
/* --- lista de detalles dentro del pop --- */
.csv-pl{display:flex;flex-direction:column;gap:12px;margin-top:20px;text-align:left;}
.csv-pl__i{display:flex;gap:12px;align-items:flex-start;}
.csv-pl__ic{width:34px;height:34px;border-radius:10px;background:var(--cream);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.csv-pl__ic svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.csv-pl__t{display:block;font-weight:700;font-size:14px;margin-bottom:2px;}
.csv-pl__d{display:block;font-size:13px;color:var(--grey);line-height:1.5;}
/* --- checks --- */
.csv-pk{display:flex;flex-direction:column;gap:11px;margin-top:20px;text-align:left;}
.csv-pk__i{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5;}
.csv-pk__i svg{width:17px;height:17px;stroke:var(--green);stroke-width:2.6;fill:none;stroke-linecap:round;flex-shrink:0;margin-top:2px;}
/* --- caja de aviso --- */
.csv-pbox{border-radius:14px;padding:16px 18px;font-size:13.5px;line-height:1.6;margin-top:20px;text-align:left;}
.csv-pbox--r{background:var(--red-bg);color:#991B1B;}
.csv-pbox--y{background:var(--yellow-soft);border:1px solid #F5E9A8;color:#7a5c00;}
.csv-pbox--n{background:var(--cream);color:var(--grey);}
.csv-pbox b{font-weight:700;}
/* --- métricas --- */
.csv-pm{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;}
.csv-pm__c{background:var(--cream);border-radius:14px;padding:16px 12px;text-align:center;}
.csv-pm__n{font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1;}
.csv-pm__l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--grey);margin-top:6px;}
/* --- pasos onboarding --- */
.csv-pdots{display:flex;gap:7px;justify-content:center;margin-bottom:18px;}
.csv-pdots i{width:7px;height:7px;border-radius:50%;background:var(--cream-2);transition:.25s var(--ease);}
.csv-pdots i.on{background:var(--ink);width:22px;border-radius:4px;}
/* --- input --- */
.csv-pinp{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;
  font-size:15px;font-family:inherit;font-weight:500;margin-top:18px;transition:.16s;}
.csv-pinp:focus{outline:none;border-color:var(--ink);}
/* --- switch fila --- */
.csv-prow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--line-soft);text-align:left;}
.csv-prow:last-child{border-bottom:none;}
.csv-prow__t{font-weight:600;font-size:14.5px;}
.csv-prow__d{font-size:12.5px;color:var(--grey);margin-top:3px;line-height:1.45;}
.csv-sw{position:relative;width:46px;height:27px;border-radius:20px;background:#DDD9CF;border:none;
  cursor:pointer;flex-shrink:0;transition:background .2s;}
.csv-sw::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .22s var(--ease);}
.csv-sw.on{background:var(--yellow-s);}
.csv-sw.on::after{transform:translateX(19px);}
/* ============ TOAST ============ */
.csv-tw{position:fixed;right:22px;bottom:22px;z-index:500;display:flex;flex-direction:column;gap:10px;
  align-items:flex-end;pointer-events:none;}
.csv-toast{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:15px 18px;
  display:flex;gap:13px;align-items:flex-start;max-width:380px;pointer-events:auto;
  box-shadow:0 14px 40px rgba(17,17,17,.16);
  transform:translateX(120%);opacity:0;transition:.36s var(--ease);}
.csv-toast.on{transform:none;opacity:1;}
.csv-toast__ic{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.csv-toast__ic svg{width:17px;height:17px;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.csv-toast__t{display:block;font-weight:700;font-size:14px;margin-bottom:3px;}
.csv-toast__d{display:block;font-size:13px;color:var(--grey);line-height:1.5;}
.csv-toast__x{width:26px;height:26px;border-radius:50%;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.14s;}
.csv-toast__x:hover{background:var(--cream);}
.csv-toast__x svg{width:12px;height:12px;stroke:var(--grey);stroke-width:2.6;fill:none;stroke-linecap:round;}
.csv-toast__bar{position:absolute;left:0;bottom:0;height:3px;background:var(--yellow-s);
  border-radius:0 0 18px 18px;animation:shrink 5s linear forwards;}
@keyframes shrink{from{width:100%;}
to{width:0;}
}
/* ============ BANNER SUPERIOR ============ */
.csv-bnr{position:fixed;top:0;left:0;right:0;z-index:390;background:var(--ink);color:#fff;
  padding:13px 22px;display:flex;align-items:center;gap:16px;justify-content:center;
  transform:translateY(-100%);transition:.34s var(--ease);flex-wrap:wrap;}
.csv-bnr.on{transform:none;}
.csv-bnr--y{background:var(--yellow);color:var(--ink);}
.csv-bnr__t{font-size:14px;font-weight:600;}
.csv-bnr__t b{font-weight:800;}
.csv-bnr .csv-btn{padding:8px 16px;font-size:13px;}
.csv-bnr__x{width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.14);
  cursor:pointer;display:flex;align-items:center;justify-content:center;}
.csv-bnr--y .csv-bnr__x{background:rgba(17,17,17,.1);}
.csv-bnr__x svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;}
@media(max-width:560px){
  .csv-pop{padding:0;align-items:flex-end;}
.csv-pc{max-width:100%;border-radius:26px 26px 0 0;max-height:92vh;
    transform:translateY(100%);}
.csv-pop.on .csv-pc{transform:none;}
.csv-pc__f{flex-direction:column-reverse;}
.csv-pc__f .csv-btn{width:100%;justify-content:center;}
.csv-pc__f .csv-sp{margin-right:0;}
.csv-tw{left:16px;right:16px;bottom:16px;}
.csv-toast{max-width:100%;}
.csv-pm{grid-template-columns:1fr;}
}
/* ═══════════════════════════════════════════════════════════════════
   PIEZAS QUE AÑADE LA IMPLEMENTACIÓN

   El diseño trae las ventanas; esto es lo que hace falta para que
   sustituyan de verdad a `confirm` y `prompt`: un campo de texto dentro
   de la ventana y el aviso corto de abajo.
   ═══════════════════════════════════════════════════════════════════ */
.csv-pc__campo{ margin-top:20px; }
.csv-pc__inp{
	width:100%; border:1.5px solid var(--line, #E7E4DC); border-radius:14px;
	padding:14px 16px; font-family:inherit; font-size:15px; color:var(--ink, #111);
	background:var(--white, #fff); text-align:center;
}
.csv-pc__inp:focus{ outline:none; border-color:var(--ink, #111); }

/* El aviso corto: aparece abajo, no interrumpe y se va solo. */
.csv-toast{
	position:fixed; left:50%; bottom:26px; transform:translate(-50%, 14px);
	z-index:420; background:#111318; color:#fff;
	padding:12px 20px; border-radius:14px;
	font:600 13.5px/1.35 inherit; max-width:80vw;
	box-shadow:0 12px 34px rgba(0,0,0,.26);
	opacity:0; pointer-events:none; transition:.26s var(--ease, cubic-bezier(.22,1,.36,1));
}
.csv-toast.on{ opacity:1; transform:translate(-50%, 0); }
.csv-toast--err{ background:#B4232A; }
@media(max-width:640px){
	.csv-toast{ bottom:calc(20px + env(safe-area-inset-bottom)); }
}