/* EL CHASQUI (rf-eventos 1.120.0, doc 64 §2).
 *
 * EL BOTÓN: ocre (`acento`, #8a6212) con contorno y SIN relleno — opción A,
 * elegida por Pablo el 23-10. Sorteos sigue siendo el único elemento lleno del
 * encabezado. Contraste del ocre sobre el crema: 5,4 a 1.
 * Mide lo mismo que «Cargar» (2.1rem, píldora) para que la fila quede pareja.
 *
 * VA EN EL PLUGIN Y NO EN EL TEMA: así la 1.120.0 se instala sola, sin tocar el
 * rf-tema 1.45.5. La ubicación en la grilla del celular ya la resuelve el tema
 * (1.43.0: `.rf-cab-botones > :not(.rf-sorteo-caja)` va al área «chasqui»).
 */

.rf-chq-caja { display: flex; align-items: center; margin: 0; }
.rf-chq-caja p:not([class]) { display: contents; }
.rf-chq-caja br { display: none; }

.rf-chq-boton {
	display: inline-flex; align-items: center; gap: 0.35rem;
	height: 2.1rem; padding: 0 0.85rem 0 0.7rem; margin: 0;
	border: 1.5px solid var(--wp--preset--color--acento, #8a6212); border-radius: 999px;
	background: transparent; color: var(--wp--preset--color--acento, #8a6212);
	font: inherit; font-weight: 700; font-size: 0.95rem; line-height: 1; white-space: nowrap; cursor: pointer;
}
.rf-chq-boton:hover,
.rf-chq-boton[aria-expanded="true"] { background: #f6eedb; }
.rf-chq-boton:focus-visible { outline: 2px solid var(--wp--preset--color--acento, #8a6212); outline-offset: 2px; }
.rf-chq-icono { flex: none; display: block; }

/* Pantalla muy angosta: queda el globo solo; el nombre sigue en aria-label. */
@media (max-width: 21.25rem) {
	.rf-chq-boton { padding: 0; width: 2.1rem; justify-content: center; }
	.rf-chq-boton-texto { display: none; }
}

/* --- EL PANEL ------------------------------------------------------------ */

.rf-chq-panel {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1001;
	display: flex; flex-direction: column;
	width: 380px; max-width: calc(100vw - 2rem); height: min(600px, calc(100vh - 2.5rem));
	background: var(--wp--preset--color--superficie, #fffdf9); color: var(--wp--preset--color--texto, #1b1714);
	border: 1px solid var(--wp--preset--color--borde, #e2d9c9); border-radius: 16px;
	box-shadow: 0 18px 48px -12px rgba(27, 23, 20, 0.35);
	overflow: hidden;
	font-size: 0.98rem; line-height: 1.45;
}
.rf-chq-panel[hidden] { display: none !important; }

.rf-chq-cab {
	display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
	padding: 0.7rem 0.6rem 0.7rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--borde, #e2d9c9);
	background: #f6eedb;
}
.rf-chq-titulo {
	display: flex; align-items: center; gap: 0.45rem; margin: 0 !important;
	font-family: var(--wp--preset--font-family--titulos, Georgia, serif); font-weight: 700; font-size: 1.1rem;
	color: var(--wp--preset--color--acento, #8a6212);
}
.rf-chq-cerrar {
	border: 0; background: none; cursor: pointer; padding: 0.35rem 0.55rem; border-radius: 8px;
	font: inherit; font-size: 1.5rem; line-height: 1; color: #635a50;
}
.rf-chq-cerrar:hover, .rf-chq-cerrar:focus-visible { background: rgba(27, 23, 20, 0.07); }

.rf-chq-prueba {
	margin: 0 !important; padding: 0.35rem 1rem; font-size: 0.82rem;
	background: #fff4d6; color: #6b4d0e; border-bottom: 1px solid #ecd9a6;
}

.rf-chq-mensajes {
	flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
	padding: 0.9rem 0.9rem 0.4rem;
	display: flex; flex-direction: column; gap: 0.6rem;
}
.rf-chq-msg { max-width: 92%; padding: 0.55rem 0.8rem; border-radius: 14px; overflow-wrap: anywhere; }
.rf-chq-msg p { margin: 0.4rem 0 0 !important; }
.rf-chq-msg--el { align-self: flex-start; background: var(--wp--preset--color--fondo, #f5f1e8); border-bottom-left-radius: 4px; }
.rf-chq-msg--yo { align-self: flex-end; background: #8a6212; color: #fffdf9; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.rf-chq-msg--espera { color: #635a50; font-style: italic; }
.rf-chq-msg--aviso { background: #fbeceb; color: #6e1d18; }
.rf-chq-msg a { color: var(--wp--preset--color--primario, #7a2b2b); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rf-chq-wa a { font-weight: 700; }

.rf-chq-ejemplos { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.9rem 0.6rem; }
.rf-chq-ejemplos[hidden] { display: none; }
.rf-chq-ejemplo {
	border: 1px solid var(--wp--preset--color--borde, #e2d9c9); background: #fffdf9; color: #1b1714;
	border-radius: 999px; padding: 0.3rem 0.75rem; font: inherit; font-size: 0.88rem; cursor: pointer;
}
.rf-chq-ejemplo:hover, .rf-chq-ejemplo:focus-visible { border-color: #8a6212; color: #8a6212; }

.rf-chq-form {
	display: flex; align-items: flex-end; gap: 0.5rem; margin: 0 !important;
	padding: 0.6rem 0.9rem 0.3rem; border-top: 1px solid var(--wp--preset--color--borde, #e2d9c9);
}
.rf-chq-texto {
	flex: 1 1 auto; min-width: 0; resize: none; max-height: 120px;
	padding: 0.55rem 0.7rem; border: 1px solid #cfc4b1; border-radius: 10px;
	font: inherit; font-size: 1rem; line-height: 1.35; background: #fff; color: #1b1714;
}
.rf-chq-texto:focus { outline: 2px solid #8a6212; outline-offset: 0; border-color: #8a6212; }
.rf-chq-enviar {
	flex: none; height: 2.45rem; padding: 0 0.95rem; border: 0; border-radius: 10px; cursor: pointer;
	background: #8a6212; color: #fffdf9; font: inherit; font-weight: 700; font-size: 0.95rem;
}
.rf-chq-enviar:disabled { opacity: 0.55; cursor: wait; }
.rf-chq-enviar:focus-visible { outline: 2px solid #1b1714; outline-offset: 2px; }

.rf-chq-aviso { margin: 0 !important; padding: 0.2rem 0.9rem 0.75rem; font-size: 0.78rem; line-height: 1.35; color: #635a50; }

.rf-chq-oculto {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Mientras el panel está abierto, el botón flotante de WhatsApp se esconde: el
   panel ocupa ese rincón (en la compu) o la pantalla entera (en el celular). */
body.rf-chq-abierto .rf-wa-flotante { display: none !important; }

/* EL CELULAR: pantalla completa. 100dvh para que el teclado no tape la caja. */
@media (max-width: 40rem) {
	.rf-chq-panel {
		inset: 0; right: 0; bottom: 0; width: 100%; max-width: none;
		height: 100vh; height: 100dvh; border-radius: 0; border: 0;
	}
	body.rf-chq-abierto { overflow: hidden; }
	/* Con la sesión iniciada, la barra negra de WordPress (46 px, siempre
	   encima) tapaba el título y la cruz de cerrar. Visto en Chromium a 390 px. */
	body.admin-bar .rf-chq-panel { top: var(--wp-admin--admin-bar--height, 46px); height: auto; }
	.rf-chq-texto { font-size: 16px; } /* menos de 16 px y el iPhone agranda la página */
}

@media (prefers-reduced-motion: no-preference) {
	.rf-chq-panel:not([hidden]) { animation: rf-chq-entrar 0.16s ease-out; }
	@keyframes rf-chq-entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}