/**
 * De Varona · Asistente Web
 *
 * Hereda el sistema visual de devarona-v7.html: vidrio esmerilado en cuatro
 * niveles, escala de papel verdosa, tinta nunca negro puro, rojo solo acento.
 *
 * Todo va prefijado con .dva- y encapsulado para no chocar con el tema.
 */

.dva-lanzador,
.dva-panel,
.dva-panel * {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

.dva-lanzador,
.dva-panel {
	--dva-red:        #C70B0C;
	--dva-red-ink:    #960C0E;
	--dva-green:      #30806F;
	--dva-green-ink:  #2A7062;
	--dva-ink:        #14201D;
	--dva-ink-2:      #4A5A56;
	--dva-ink-3:      #5F6E6A;
	--dva-paper-1:    #FBFCFB;
	--dva-paper-2:    #F6F8F7;
	--dva-paper-3:    #F4F7F5;
	--dva-paper-4:    #F1F4F2;
	--dva-paper-5:    #EFF2F0;
	--dva-filete:     rgba(255, 255, 255, .55);
	--dva-borde:      #DDE4E1;
	--dva-r:          26px;
	--dva-r-card:     18px;
	--dva-r-item:     14px;
	--dva-r-ico:      10px;
	--dva-r-pill:     999px;
	--dva-sombra:     0 18px 48px rgba(20, 32, 29, .16);
}

/* --------------------------------------------------------------------- */
/* Lanzador                                                               */
/* --------------------------------------------------------------------- */

.dva-lanzador {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 26px;
	border: 1px solid var(--dva-filete);
	border-radius: var(--dva-r-pill);
	background: var(--dva-green);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 22px 56px rgba(20, 32, 29, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
	transition: background .18s ease, transform .18s ease;
}

.dva-lanzador:hover {
	background: var(--dva-green-ink);
	transform: translateY(-1px);
}

.dva-lanzador:focus-visible {
	outline: 3px solid var(--dva-green-ink);
	outline-offset: 3px;
}

.dva-lanzador--activo {
	transform: scale(.94);
	opacity: .85;
}

.dva-lanzador-ico {
	width: 22px;
	height: 22px;
	flex: none;
}

/* Punto rojo — el único acento rojo, con dos pulsos al cargar y ya. */
.dva-punto {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--dva-red);
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba(199, 11, 12, .45);
}

.dva-punto::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--dva-red);
	opacity: 0;
	animation: dva-pulso 1.6s ease-out 1s 2;
}

@keyframes dva-pulso {
	0%   { transform: scale(.6); opacity: .8; }
	100% { transform: scale(1.8); opacity: 0; }
}

.dva-lanzador--visto .dva-punto { display: none; }

/* Mensajito de invitación — vidrio nivel 14px, aparece una vez por sesión. */
.dva-teaser {
	position: fixed;
	right: 24px;
	bottom: 92px;
	z-index: 99997;
	max-width: 300px;
	padding: 14px 40px 14px 16px;
	border: 1px solid var(--dva-filete);
	border-radius: var(--dva-r-card);
	background: rgba(255, 255, 255, .78);
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	backdrop-filter: blur(14px) saturate(170%);
	box-shadow: 0 18px 44px rgba(20, 32, 29, .16), inset 0 1px 0 rgba(255, 255, 255, .75);
	color: var(--dva-ink);
	font-size: 14.5px;
	line-height: 1.5;
	cursor: pointer;
	animation: dva-subir .28s ease-out;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dva-teaser { background: var(--dva-paper-1); }
}

.dva-teaser strong { display: block; margin-bottom: 2px; color: var(--dva-green-ink); }

.dva-teaser-cerrar {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: var(--dva-r-ico);
	background: transparent;
	color: var(--dva-ink-3);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.dva-teaser-cerrar:hover { background: var(--dva-paper-4); color: var(--dva-ink); }

.dva-teaser-cerrar:focus-visible {
	outline: 3px solid var(--dva-green);
	outline-offset: 1px;
}

@keyframes dva-subir {
	from { transform: translateY(8px); opacity: 0; }
	to   { transform: translateY(0);   opacity: 1; }
}

/* --------------------------------------------------------------------- */
/* Panel — vidrio nivel 26px                                              */
/* --------------------------------------------------------------------- */

.dva-panel {
	position: fixed;
	right: 24px;
	bottom: 96px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	width: 384px;
	max-width: calc(100vw - 32px);
	max-height: min(640px, calc(100vh - 120px));
	border: 1px solid var(--dva-filete);
	border-radius: var(--dva-r);
	background: rgba(251, 252, 251, .78);
	-webkit-backdrop-filter: blur(26px) saturate(185%);
	backdrop-filter: blur(26px) saturate(185%);
	box-shadow: var(--dva-sombra), inset 0 1px 0 rgba(255, 255, 255, .75);
	overflow: hidden;
}

/* Sin soporte de blur, el panel va sólido — si no, el texto queda ilegible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dva-panel { background: var(--dva-paper-1); }
}

.dva-panel[hidden] { display: none; }

/* --------------------------------------------------------------------- */
/* Cabecera                                                               */
/* --------------------------------------------------------------------- */

.dva-cabecera {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--dva-borde);
	background: linear-gradient(90deg, var(--dva-red), var(--dva-green));
	color: #fff;
}

.dva-titulo {
	flex: 1;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dva-volver,
.dva-cerrar {
	flex: none;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: var(--dva-r-ico);
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.dva-volver:hover,
.dva-cerrar:hover { background: rgba(255, 255, 255, .3); }

.dva-volver:focus-visible,
.dva-cerrar:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------- */
/* Cuerpo                                                                 */
/* --------------------------------------------------------------------- */

.dva-cuerpo {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	color: var(--dva-ink);
	font-size: 14.5px;
	line-height: 1.55;
}

.dva-cuerpo p { margin: 0 0 10px; }

.dva-burbuja {
	padding: 12px 14px;
	margin-bottom: 14px;
	border: 1px solid var(--dva-filete);
	border-radius: var(--dva-r-card);
	background: rgba(255, 255, 255, .62);
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	backdrop-filter: blur(14px) saturate(170%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dva-burbuja { background: #fff; }
}

/* --------------------------------------------------------------------- */
/* Opciones                                                               */
/* --------------------------------------------------------------------- */

.dva-opciones {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dva-opcion {
	display: block;
	width: 100%;
	padding: 12px 15px;
	margin-bottom: 8px;
	border: 1px solid var(--dva-borde);
	border-radius: var(--dva-r-item);
	background: var(--dva-paper-1);
	color: var(--dva-ink);
	font-size: 14.5px;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.dva-opciones .dva-opcion { margin-bottom: 0; }

.dva-opcion:hover {
	border-color: var(--dva-green);
	background: #fff;
}

.dva-opcion:focus-visible {
	outline: 3px solid var(--dva-green);
	outline-offset: 2px;
}

.dva-whatsapp {
	display: block;
	width: 100%;
	padding: 11px 15px;
	margin-top: 14px;
	border: 1px solid var(--dva-green);
	border-radius: var(--dva-r-pill);
	background: transparent;
	color: var(--dva-green-ink);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.dva-whatsapp:hover { background: var(--dva-paper-3); }

.dva-whatsapp:focus-visible {
	outline: 3px solid var(--dva-green);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------- */
/* Aviso de huracán — el único uso del rojo                               */
/* --------------------------------------------------------------------- */

.dva-aviso {
	padding: 13px 15px;
	margin-bottom: 16px;
	border: 1px solid var(--dva-borde);
	border-left: 4px solid var(--dva-red);
	border-radius: var(--dva-r-item);
	background: var(--dva-paper-2);
	font-size: 14px;
	color: var(--dva-ink);
}

.dva-aviso-boton {
	display: block;
	width: 100%;
	margin-top: 11px;
	padding: 10px 14px;
	border: 1px solid var(--dva-red);
	border-radius: var(--dva-r-item);
	background: #fff;
	color: var(--dva-red-ink);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.dva-aviso-boton:focus-visible {
	outline: 3px solid var(--dva-red-ink);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------- */
/* Formularios                                                            */
/* --------------------------------------------------------------------- */

.dva-privacidad {
	padding: 9px 12px;
	margin-bottom: 14px;
	border-radius: var(--dva-r-ico);
	background: var(--dva-paper-4);
	color: var(--dva-ink-2);
	font-size: 12.5px;
	line-height: 1.45;
}

.dva-campo { margin-bottom: 13px; }

.dva-etiqueta {
	display: block;
	margin-bottom: 5px;
	color: var(--dva-ink-2);
	font-size: 13px;
	font-weight: 600;
}

.dva-opcional {
	color: var(--dva-ink-3);
	font-weight: 400;
	font-style: italic;
}

.dva-control {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--dva-borde);
	border-radius: var(--dva-r-ico);
	background: #fff;
	color: var(--dva-ink);
	font-size: 14.5px;
	line-height: 1.4;
}

.dva-control:focus {
	border-color: var(--dva-green);
	outline: 2px solid var(--dva-green);
	outline-offset: 1px;
}

textarea.dva-control { resize: vertical; min-height: 76px; }

.dva-checks {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 10px 12px;
	border: 1px solid var(--dva-borde);
	border-radius: var(--dva-r-ico);
	background: #fff;
}

.dva-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
}

.dva-check input { margin-top: 3px; flex: none; }

.dva-check input:focus-visible {
	outline: 3px solid var(--dva-green);
	outline-offset: 2px;
}

.dva-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.dva-enviar {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 13px 18px;
	border: 1px solid var(--dva-green-ink);
	border-radius: var(--dva-r-pill);
	background: var(--dva-green);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.dva-enviar:hover:not(:disabled) { background: var(--dva-green-ink); }

.dva-enviar:disabled { opacity: .6; cursor: default; }

.dva-enviar:focus-visible {
	outline: 3px solid var(--dva-green-ink);
	outline-offset: 3px;
}

.dva-error {
	padding: 10px 13px;
	margin-bottom: 12px;
	border: 1px solid var(--dva-red);
	border-radius: var(--dva-r-ico);
	background: #fff;
	color: var(--dva-red-ink);
	font-size: 13.5px;
	line-height: 1.45;
}

/* --------------------------------------------------------------------- */
/* Tarjetas de contenido                                                  */
/* --------------------------------------------------------------------- */

.dva-tarjeta {
	padding: 14px 16px;
	margin-bottom: 11px;
	border: 1px solid var(--dva-borde);
	border-radius: var(--dva-r-card);
	background: var(--dva-paper-1);
}

.dva-tarjeta-titulo {
	margin-bottom: 8px;
	color: var(--dva-ink);
	font-size: 15px;
	font-weight: 600;
}

.dva-tarjeta p { margin: 0; color: var(--dva-ink-2); font-size: 14px; }

.dva-puntos {
	margin: 0;
	padding-left: 19px;
	color: var(--dva-ink-2);
	font-size: 14px;
}

.dva-puntos li { margin-bottom: 7px; }

.dva-fila {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 7px 0;
	border-top: 1px solid var(--dva-paper-5);
}

.dva-fila-etiqueta { color: var(--dva-ink-3); font-size: 13px; }

.dva-enlace {
	color: var(--dva-green-ink);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
}

.dva-enlace:hover { text-decoration: underline; }

.dva-enlace:focus-visible {
	outline: 3px solid var(--dva-green);
	outline-offset: 2px;
}

.dva-nota {
	color: var(--dva-ink-3);
	font-size: 12.5px;
	line-height: 1.5;
	margin: 12px 0;
}

/* --------------------------------------------------------------------- */
/* Confirmación                                                           */
/* --------------------------------------------------------------------- */

.dva-exito {
	padding: 18px;
	margin-bottom: 14px;
	border: 1px solid var(--dva-borde);
	border-left: 4px solid var(--dva-green);
	border-radius: var(--dva-r-card);
	background: var(--dva-paper-1);
}

.dva-exito-titulo {
	color: var(--dva-ink);
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 10px;
}

.dva-referencia {
	display: inline-block;
	padding: 7px 13px;
	margin-bottom: 12px;
	border-radius: var(--dva-r-ico);
	background: var(--dva-paper-4);
	color: var(--dva-green-ink);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .4px;
}

.dva-asignado { color: var(--dva-ink-2); font-size: 13.5px; }

/* --------------------------------------------------------------------- */
/* Pie                                                                    */
/* --------------------------------------------------------------------- */

.dva-pie {
	flex: none;
	padding: 11px 16px;
	border-top: 1px solid var(--dva-borde);
	background: var(--dva-paper-4);
	color: var(--dva-ink-3);
	font-size: 11.5px;
	line-height: 1.45;
}

/* --------------------------------------------------------------------- */
/* Móvil                                                                  */
/* --------------------------------------------------------------------- */

@media (max-width: 480px) {
	.dva-panel {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		max-height: 88vh;
		border-radius: var(--dva-r) var(--dva-r) 0 0;
	}

	.dva-lanzador { right: 14px; bottom: 14px; padding: 14px 20px; font-size: 15.5px; }
	.dva-teaser { right: 14px; left: 14px; bottom: 76px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dva-lanzador,
	.dva-opcion,
	.dva-enviar { transition: none; }

	.dva-lanzador--activo,
	.dva-lanzador:hover { transform: none; }

	.dva-punto::before { animation: none; }
	.dva-teaser { animation: none; }
}