/*
 * Alquímica — el CSS de toda la app.
 *
 * Sale de las maquetas aprobadas (docs/maquetas/fuentes.css, base.css y
 * pantallas.css, en ese orden), con lo que el plugin necesita distinto al final:
 * los formularios de verdad en las filas, la falla general, el "Ver los otros"
 * de "Para revisar" sin JavaScript y los estilos que en la maqueta iban en línea.
 * Si cambia una maqueta, cambia acá.
 */

/* ── Fuentes (autoalojadas: ningún pedido a otro dominio) ───────────── */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('fuentes/schibsted-400-900-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fuentes/schibsted-400-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Alquímica — la base de las dos maquetas.
 *
 * Paleta de pigmentos de laboratorio, no de marca de software: papel mineral
 * frío (no crema), tinta verde muy oscura, y tres pigmentos que dicen estado:
 *   cardenillo (la pátina del cobre) — lo que se hace y lo que ya salió;
 *   oro                               — lo que está programado y todavía no pasó;
 *   cinabrio                          — lo que falló.
 * El color no decora: si algo tiene color, está diciendo en qué estado está.
 * Los pares pasan AA: ver paleta.json (`python herramientas/contraste.py --json …`).
 */

:root {
	--papel: #EDF1EF;
	--superficie: #FFFFFF;
	--hundido: #E3E9E6;
	--tinta: #14201C;
	--tinta-2: #4A5853;
	--tinta-3: #5D6A66;
	--linea: #D2DAD7;
	--control: #838E8A;

	--cardenillo: #14695B;
	--cardenillo-oscuro: #0E5247;
	--cardenillo-fondo: #DDEEE9;
	--oro: #7D5300;
	--oro-fondo: #F5E8C8;
	--oro-linea: #D9BE7E;
	--cinabrio: #A3301D;
	--cinabrio-fondo: #F7E0DA;

	--letra: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;

	/* Escala de 1,2 sobre 16, redondeada a píxeles enteros. */
	--t-chica: 13px;
	--t-cuerpo: 16px;
	--t-media: 19px;
	--t-titulo: 28px;
	--t-hora: 30px;

	--r-campo: 10px;
	--r-caja: 16px;   /* = r-campo + 6 px de aire: los radios anidados son concéntricos */

	--sombra-caja: 0 0 0 1px rgb(20 32 28 / .06), 0 1px 2px rgb(20 32 28 / .06), 0 4px 12px -6px rgb(20 32 28 / .10);
	--foco: 0 0 0 2px var(--papel), 0 0 0 4px var(--cardenillo);
	--sale: cubic-bezier(.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--letra);
	font-size: var(--t-cuerpo);
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

.cifra { font-variant-numeric: tabular-nums; }

/* `hidden` gana siempre: si no, un `display: flex` de clase lo pisa. */
[hidden] { display: none !important; }

.solo-lector {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: none; box-shadow: var(--foco); }

/* ── Campos ─────────────────────────────────────────────────────────── */

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span:first-child { font-size: 14px; font-weight: 500; color: var(--tinta-2); }

.entrada {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--control);
	border-radius: var(--r-campo);
	background: var(--superficie);
	color: var(--tinta);
	font: inherit;
	font-size: 16px;   /* 16 px: con menos, Safari del iPhone hace zoom al enfocar */
	transition-property: border-color, box-shadow;
	transition-duration: .15s;
}
.entrada::placeholder { color: var(--tinta-3); opacity: 1; }
.entrada:focus-visible { border-color: var(--cardenillo); }
textarea.entrada { resize: vertical; min-height: 116px; line-height: 1.45; }
.entrada[aria-invalid="true"] { border-color: var(--cinabrio); }
.entrada[aria-invalid="true"]:focus-visible { border-color: var(--cinabrio); box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--cinabrio); }

.ayuda { font-size: var(--t-chica); line-height: 1.4; color: var(--tinta-3); }
.ayuda[data-estado="ok"] { color: var(--cardenillo); font-weight: 500; }
.ayuda[data-estado="error"] { color: var(--cinabrio); font-weight: 500; }

/* ── Botones ────────────────────────────────────────────────────────── */

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--r-campo);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition-property: background-color, color, scale;
	transition-duration: .15s;
	transition-timing-function: var(--sale);
}
.boton:active { scale: .96; }
.boton svg { flex: none; }

.boton-primario { background: var(--cardenillo); color: #fff; }
.boton-primario:hover { background: var(--cardenillo-oscuro); }

.boton-secundario {
	background: var(--superficie);
	color: var(--tinta);
	box-shadow: inset 0 0 0 1px var(--control);
}
.boton-secundario:hover { background: var(--hundido); }

/* Acción de texto dentro de una fila: chica a la vista, 44 px de blanco táctil. */
.accion {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--tinta-2);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: .15s;
}
.accion:hover { background: var(--hundido); color: var(--tinta); }
.accion-peligro:hover { background: var(--cinabrio-fondo); color: var(--cinabrio); }
.accion-reintentar { color: var(--cardenillo); font-weight: 600; }
.accion-reintentar:hover { background: var(--cardenillo-fondo); color: var(--cardenillo-oscuro); }

/* ── Chips de estado: forma y color dicen lo mismo, para no depender del color. */

.estado {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 9px 2px 7px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}
.estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado-programado { background: var(--oro-fondo); color: var(--oro); }
.estado-programado::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
/* En curso: el mismo oro, pero lleno (blanco sobre oro, 6,75:1). Sin spinner. */
.estado-enviando { background: var(--oro); color: #fff; }
.estado-enviado { background: var(--cardenillo-fondo); color: var(--cardenillo); }
.estado-error, .estado-vencido { background: var(--cinabrio-fondo); color: var(--cinabrio); }
.estado-cancelado { background: var(--hundido); color: var(--tinta-2); }
/* Sin confirmar: ni falló ni salió. Neutro, con un rombo: no es rojo para no invitar a reenviar. */
.estado-sinconfirmar { background: var(--hundido); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--control); }
.estado-sinconfirmar::before { width: 6px; height: 6px; border-radius: 1px; rotate: 45deg; }
.estado-cancelado::before { border-radius: 1px; height: 1.5px; width: 8px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.boton:active { scale: 1; }
}

/*
 * Alquímica — el marco y las dos pantallas.
 *
 * Una sola cosa se luce: la línea de tiempo de Mensajes, con la hora grande y
 * un riel que une lo que sale el mismo día. Todo lo demás va callado.
 */

.marco {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

/* ── Cabecera y navegación ─────────────────────────────────────────────
 * Dos links arriba, sin fijar: una barra fija abajo se sube con el teclado y
 * tapa el "Guardar". El de Mensajes lleva el problema en texto.          */

.cabecera {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 0 20px;
}

.marca {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	align-self: flex-start;
	min-height: 44px;
	padding-right: 8px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-decoration: none;
	border-radius: 8px;
}
.marca svg { color: var(--oro); }

.nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	border-radius: 14px;          /* 10 del link + 4 de aire */
	background: var(--hundido);
}
.nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 10px;
	color: var(--tinta-2);
	font-weight: 500;
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: .15s;
}
.nav a:hover { color: var(--tinta); }
.nav a[aria-current="page"] {
	background: var(--superficie);
	color: var(--tinta);
	font-weight: 600;
	box-shadow: var(--sombra-caja);
}
.nav .alerta {
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--cinabrio-fondo);
	color: var(--cinabrio);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.cabecera { flex-direction: row; align-items: center; gap: 28px; padding: 14px 0 28px; }
	.nav { display: flex; }
	.nav a { padding: 0 16px; }
}

/* ── Piezas comunes ───────────────────────────────────────────────── */

.titulo {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
}
.titulo h1 { font-size: var(--t-titulo); font-weight: 700; letter-spacing: -.02em; }
.titulo .cuenta { color: var(--tinta-3); font-size: 17px; font-weight: 500; }

.caja {
	background: var(--superficie);
	border-radius: var(--r-caja);
	box-shadow: var(--sombra-caja);
}

.aviso {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 16px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--cardenillo-fondo);
	color: var(--cardenillo-oscuro);
	font-weight: 500;
}
.aviso { flex-wrap: wrap; align-items: center; }
.aviso p { flex: 1 1 200px; padding-top: 1px; }
.aviso .boton { min-height: 44px; }

.resumen-salieron a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	color: var(--cardenillo);
	font-size: 15px;
	font-weight: 600;
	text-underline-offset: 3px;
}
.resumen-salieron a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Desconectado no es lo mismo que "3 para revisar": lleno, para que no se acostumbre el ojo. */
.nav .alerta-grave { background: var(--cinabrio); color: #fff; }

/* Vincular: el QR no se puede escanear desde el mismo teléfono que lo muestra. */
.aviso-pantalla { padding: 12px 14px; border-radius: 12px; background: var(--oro-fondo); max-width: 52ch; }
.aviso-pantalla strong { display: block; }
@media (min-width: 900px) { .aviso-pantalla { display: none; } }
.aviso svg { flex: none; margin-top: 2px; }

.vacio {
	padding: 28px 20px;
	color: var(--tinta-2);
}
.vacio strong { display: block; margin-bottom: 4px; color: var(--tinta); font-size: var(--t-media); }

h2.seccion {
	font-size: var(--t-media);
	font-weight: 700;
	letter-spacing: -.01em;
}

/* Borrar en dos pasos: el primero solo abre la pregunta. */
.borrar > summary { list-style: none; display: inline-flex; }
.borrar > summary::-webkit-details-marker { display: none; }
.borrar[open] > summary { display: none; }
.borrar-pregunta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border-radius: 12px;
	background: var(--cinabrio-fondo);
	color: var(--tinta);
}
.borrar-pregunta .botones { display: flex; flex-wrap: wrap; gap: 8px; }
.boton-peligro { background: var(--cinabrio); color: #fff; }
.boton-peligro:hover { background: #862514; }

/* ── Contactos ────────────────────────────────────────────────────── */

.herramientas {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}
.buscar { position: relative; flex: 1; min-width: 0; }
.buscar svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: var(--tinta-3); pointer-events: none; }
.buscar .entrada { padding-left: 40px; }
.buscar .entrada::-webkit-search-cancel-button { display: none; }
.herramientas .boton { flex: none; padding: 0 16px; }

.contactos-cuerpo { display: grid; gap: 20px; align-items: start; }

.lista-contactos { overflow: hidden; }
.lista-contactos .columnas { display: none; }
.fila-contacto {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	padding: 9px 16px 10px;
	line-height: 1.32;
	text-decoration: none;
	transition-property: background-color;
	transition-duration: .12s;
}
.lista-contactos li + li .fila-contacto { box-shadow: inset 0 1px 0 var(--linea); }
.fila-contacto:hover { background: #F6F8F7; }
.fila-contacto[aria-current="true"] { background: var(--cardenillo-fondo); }
.lista-contactos li .fila-contacto:focus-visible { box-shadow: inset 0 0 0 2px var(--cardenillo); }
.fila-contacto .nombre { font-weight: 600; overflow-wrap: anywhere; }
.fila-contacto .numero { color: var(--tinta-2); font-size: 15px; }
.fila-contacto .desc {
	color: var(--tinta-3);
	font-size: var(--t-chica);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fila-contacto .desc:empty { display: none; }
.marca-busqueda { background: var(--oro-fondo); color: inherit; border-radius: 3px; }

.panel { padding: 20px 18px 22px; }
.panel h2 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; }
.panel form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.panel .pie-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.volver { margin: -6px 0 6px -10px; }

.ficha-numero { margin-top: 4px; color: var(--tinta-2); font-size: 18px; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ficha-acciones .boton { flex: 1 1 auto; }
.ficha-proximos {
	margin-top: 18px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--oro-fondo);
	color: var(--tinta);
	font-size: 15px;
}
.ficha-proximos strong { color: var(--oro); }
.ficha-proximos ul { margin-top: 6px; display: grid; gap: 2px; }
.ficha-proximos a { color: var(--tinta); }
.ficha-separador { height: 1px; margin: 22px 0 0; border: 0; background: var(--linea); }
.ficha-borrar { margin-top: 18px; }

/* En el celular, el contacto abierto ocupa la pantalla: la lista se va. */
@media (max-width: 899.98px) {
	body.con-contacto .titulo,
	body.con-contacto .col-lista { display: none; }
	body:not(.con-contacto):not(.con-alta) .panel { display: none; }
	body.con-alta .panel { order: -1; }
	body.con-vacio .panel { order: 0; }
	.contactos-cuerpo { display: flex; flex-direction: column; }
}

@media (min-width: 900px) {
	.volver, .solo-celular { display: none; }
	.contactos-cuerpo { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; }
	.lista-contactos .columnas {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) 200px minmax(0, 1.4fr);
		gap: 16px;
		padding: 10px 18px;
		color: var(--tinta-3);
		font-size: var(--t-chica);
		font-weight: 600;
		box-shadow: inset 0 -1px 0 var(--linea);
	}
	.fila-contacto {
		grid-template-columns: minmax(0, 1.1fr) 200px minmax(0, 1.4fr);
		gap: 16px;
		align-items: baseline;
		padding: 12px 18px;
	}
	.fila-contacto .numero { font-size: 15px; }
	.fila-contacto .desc { font-size: 14px; }
	.fila-contacto .desc:empty { display: block; }
	.panel { position: sticky; top: 20px; padding: 24px 24px 26px; }
}

/* ── Mensajes ─────────────────────────────────────────────────────── */

.titulo-mensajes { justify-content: space-between; flex-wrap: wrap; row-gap: 4px; }
/* "WhatsApp conectado" (el .wa-ok de la maqueta) no se muestra: conectado es lo normal. */

.wa-alerta {
	display: grid;
	gap: 12px;
	margin-bottom: 18px;
	padding: 16px;
	border-radius: var(--r-caja);
	background: var(--cinabrio-fondo);
	box-shadow: inset 0 0 0 1px #E9BCB2;
}
.wa-alerta strong { display: block; color: var(--cinabrio); font-size: 17px; margin-bottom: 2px; }
.wa-alerta.wa-dudosa { background: var(--hundido); box-shadow: inset 0 0 0 1px var(--linea); }
.wa-alerta.wa-dudosa strong { color: var(--tinta); }
.wa-alerta .boton { justify-self: start; }

.mensajes-cuerpo { display: flex; flex-direction: column; gap: 26px; }

.abrir-programar { width: 100%; }

.programar { padding: 20px 18px 22px; }
.programar h2 { font-size: var(--t-media); font-weight: 700; }
.programar form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.cuando { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }
.cuando .entrada { min-width: 0; }

.bloque { display: flex; flex-direction: column; gap: 10px; }
.bloque-cabeza { display: flex; align-items: baseline; gap: 8px; }
.bloque-cabeza .cuenta { color: var(--tinta-3); font-weight: 500; }
.bloque-no-salieron h2 { color: var(--cinabrio); }

/* El día: la palabra que importa grande, la fecha completa al lado. */
.dia { display: flex; align-items: baseline; gap: 8px; padding: 6px 0 2px 2px; }
.dia h3 { font-size: 16px; font-weight: 700; }
.dia span { color: var(--tinta-3); font-size: 14px; }

/* La fila: hora | riel | mensaje. */
.linea { display: flex; flex-direction: column; }
.msg {
	position: relative;
	display: grid;
	grid-template-columns: 56px 26px minmax(0, 1fr);
	padding-bottom: 14px;
}

.mas > summary { list-style: none; gap: 6px; margin: -4px 0 0 72px; color: var(--cinabrio); font-weight: 600; }
.mas > summary::-webkit-details-marker { display: none; }
.mas > summary svg { transition: rotate .2s var(--sale); }
.mas[open] > summary svg { rotate: 180deg; }
/* El <details> es solo el interruptor: la lista va después, como hermana, y se ve con él abierto. */
.mas:not([open]) + .linea-resto { display: none; }
.msg-hora {
	padding-top: 13px;
	text-align: right;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -.01em;
}
.msg-hora small { display: block; margin-bottom: 2px; color: var(--tinta-3); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
/* El riel: une lo que sale el mismo día. El nodo repite la forma del estado. */
.msg-riel { position: relative; }
.msg-riel::before {
	content: '';
	position: absolute;
	left: 50%; top: 0; bottom: -14px;
	width: 1.5px;
	translate: -50% 0;
	background: var(--oro-linea);
}
.msg:first-child .msg-riel::before { top: 20px; }
.msg:last-child .msg-riel::before { bottom: auto; height: 20px; }
.msg:only-child .msg-riel::before { display: none; }
.msg-riel::after {
	content: '';
	position: absolute;
	left: 50%; top: 17px;
	width: 11px; height: 11px;
	translate: -50% 0;
	border-radius: 50%;
	background: var(--papel);
	box-shadow: inset 0 0 0 2px var(--oro);
}
.msg-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 12px 14px 8px;
}
.msg-programado .msg-cuerpo,
.msg-enviando .msg-cuerpo { background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-caja); }
.msg-cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 2px; min-height: 26px; }
.msg-para { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
a.msg-para:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 44 px de blanco táctil sin mover el renglón: el padding se come con margen negativo. */
a.msg-para { padding: 10px 0; margin: -10px 0; border-radius: 6px; }
.msg-para.solo-numero { font-weight: 500; color: var(--tinta-2); }
.msg-cabeza .estado { margin-left: auto; }
/* Entero: lo que va a salir solo se tiene que poder leer antes. Solo el historial se recorta. */
.msg-texto {
	white-space: pre-line;
	overflow-wrap: anywhere;
	line-height: 1.4;
}
.historial .msg-texto {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.msg-motivo { color: var(--cinabrio); font-size: 14.5px; font-weight: 500; }
.msg-motivo span { display: block; color: var(--tinta-2); font-weight: 400; }
.msg-acciones { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 -4px -10px; }
.msg-acciones .borrar[open] { flex-basis: 100%; margin: 4px 0 8px 10px; }

/* Los que no salieron: caja propia, con el borde del problema. */
.msg-error .msg-cuerpo,
.msg-vencido .msg-cuerpo { background: var(--superficie); border-radius: 14px; box-shadow: inset 0 0 0 1.5px #E2A99D; }
.msg-error .msg-riel::after,
.msg-vencido .msg-riel::after { background: var(--cinabrio); box-shadow: none; }
.bloque-no-salieron .msg-riel::before { background: #E2A99D; }
.msg-sinconfirmar .msg-cuerpo { background: var(--superficie); border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--control); }
.msg-sinconfirmar .msg-riel::after { width: 9px; height: 9px; border-radius: 1px; rotate: 45deg; background: var(--tinta-2); box-shadow: none; }
.msg-sinconfirmar .msg-motivo { color: var(--tinta); }

/* Lo que ya salió va callado: sin caja, en tinta suave. */
.msg-enviado .msg-riel::after { background: var(--cardenillo); box-shadow: none; }
.msg-cancelado .msg-riel::after { background: var(--papel); box-shadow: inset 0 0 0 2px var(--control); }
.historial .msg-riel::before { background: var(--linea); }
.historial .msg-hora { font-size: 17px; color: var(--tinta-2); padding-top: 12px; }
.historial .msg-texto { color: var(--tinta-2); -webkit-line-clamp: 2; line-clamp: 2; }
.historial .msg-cuerpo { padding-top: 10px; }
.historial .msg-riel::after { top: 15px; }

.msg-enviando .msg-riel::after { box-shadow: inset 0 0 0 2px var(--oro); background: var(--oro-fondo); }

.historial > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	list-style: none;
	cursor: pointer;
	border-radius: 10px;
}
.historial > summary::-webkit-details-marker { display: none; }
.historial > summary h2 { font-size: var(--t-media); font-weight: 700; }
.historial > summary .cuenta { color: var(--tinta-3); font-weight: 500; }
.historial > summary svg { margin-left: auto; color: var(--tinta-3); transition: rotate .2s var(--sale); }
.historial[open] > summary svg { rotate: 180deg; }
.historial .linea { margin-top: 8px; }

/* Vincular WhatsApp */
.vincular { display: grid; gap: 24px; max-width: 880px; }
.pasos { display: grid; gap: 14px; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; counter-increment: paso; }
.pasos li::before {
	content: counter(paso);
	display: grid; place-items: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--superficie);
	box-shadow: inset 0 0 0 1.5px var(--control);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.pasos li p { padding-top: 4px; }
.qr { justify-self: start; padding: 18px; background: #fff; border-radius: var(--r-caja); box-shadow: var(--sombra-caja); }
.qr img { display: block; width: 232px; height: 232px; max-width: 100%; }

@media (min-width: 900px) {
	.mensajes-cuerpo {
		display: grid;
		grid-template-columns: 380px minmax(0, 720px);
		gap: 44px;
		align-items: start;
	}
	.titulo-mensajes { max-width: 1144px; }
	.col-form { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
	.abrir-programar { display: none; }
	.col-linea { display: flex; flex-direction: column; gap: 30px; }
	.msg { grid-template-columns: 76px 34px minmax(0, 1fr); }
	.msg-hora { font-size: 27px; padding-top: 11px; }
	.msg-riel::after { top: 19px; }
	.historial .msg-hora { font-size: 19px; }
	.vincular { grid-template-columns: 1fr auto; align-items: start; }
}

@media (max-width: 899.98px) {
	body:not(.con-form) .programar { display: none; }
	body.con-form .abrir-programar { display: none; }
}

/* ── Lo que el plugin agrega a las maquetas ────────────────────────── */

/* La falla general de arriba: el mismo lugar que el aviso, con el color del problema. */
.aviso-falla { background: var(--cinabrio-fondo); color: var(--cinabrio); }

/* Lo que en la maqueta iba en línea. */
.form-error { margin-top: 6px; }
.campo-cuando { border: 0; margin: 0; padding: 0; min-width: 0; }
.volver-mensajes { margin: -6px 0 4px -10px; }
.vincular-texto { display: grid; gap: 20px; }
.vincular-intro { color: var(--tinta-2); max-width: 52ch; }
.vincular-nota { font-size: 14px; }
.qr { margin: 0; }
.qr-falla { align-self: start; max-width: 380px; }

/* Cada acción de una fila es su propio form: que no rompa la fila de botones. */
.msg-acciones form,
.borrar-pregunta .botones form { display: contents; }

.prohibido p + p { margin-top: 16px; }

@media (min-width: 900px) {
	/* En la compu entran todos los de "Para revisar": sin interruptor, una sola lista. */
	.mas { display: none; }
	.mas:not([open]) + .linea-resto,
	.mas + .linea-resto { display: flex; margin-top: -10px; }
	/* El riel sigue de una lista a la otra, como si fueran una. */
	.linea-primeros .msg:last-child .msg-riel::before { display: block; bottom: -14px; height: auto; }
	.linea-resto .msg:first-child .msg-riel::before { display: block; top: 0; }
}

/* Foco: estas reglas le ganan a las que ponen su propia sombra (la pestaña actual, el
   botón con borde), que si no se comían el anillo. */
.nav a:focus-visible,
.nav a[aria-current="page"]:focus-visible { box-shadow: var(--foco); }
.boton-secundario:focus-visible { box-shadow: inset 0 0 0 1px var(--control), var(--foco); }

/* Vincular: el aviso de falla ocupa lo mismo que la caja del QR, así el texto no se mueve. */
@media (min-width: 900px) {
	.qr-falla { width: 268px; }
}

/* ── Cabecera con el logo y "Salir" ──────────────────────────────────
   Celular: el logo y Salir arriba, las dos pestañas abajo a todo el ancho.
   Compu: todo en una fila, Salir al final. */
.cabecera {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "marca salir" "nav nav";
	align-items: center;
}
.cabecera .marca { grid-area: marca; padding-right: 0; }
.cabecera .marca img { display: block; height: 36px; width: auto; }
.cabecera .nav { grid-area: nav; }
.cabecera .salir { grid-area: salir; margin-right: -10px; }
@media (min-width: 900px) {
	.cabecera { grid-template-columns: auto auto 1fr; grid-template-areas: "marca nav salir"; }
	.cabecera .salir { justify-self: end; }
}

/* ── Entrar ───────────────────────────────────────────────────────────
   La única pantalla pública. El azul es el del logo, y solo vive acá. */
:root { --marca: #003295; --marca-oscuro: #00246B; }
.entrar {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 24px 16px;
}
.entrar-caja {
	width: 100%;
	max-width: 400px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px 22px 24px;
}
.entrar-logo { align-self: center; width: 200px; height: auto; margin-bottom: 4px; }
.entrar-caja h1 { font-size: 24px; font-weight: 700; letter-spacing: -.015em; }
.entrar-bajada { margin-top: 4px; color: var(--tinta-2); font-size: 15px; }
.entrar-form { display: flex; flex-direction: column; gap: 16px; }
.entrar-falla {
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--cinabrio-fondo);
	color: var(--cinabrio);
	font-weight: 500;
}
.entrar-ayuda { text-align: center; }
.boton-marca { width: 100%; background: var(--marca); color: #fff; }
.boton-marca:hover { background: var(--marca-oscuro); }
/* En el login, el foco también es del azul de la marca. */
.pantalla-entrar { --cardenillo: var(--marca); --foco: 0 0 0 2px var(--papel), 0 0 0 4px var(--marca); }

/* ── Importar contactos ───────────────────────────────────────────────
   El panel de Importar, en Contactos (se abre desde el alta): el archivo, los pasos
   del iPhone y las listas importadas, cada una con "Borrar sus contactos". La
   revisión, en su pantalla: una lista con casillas, como la de Contactos, y el
   botón de agregar pegado abajo mientras se recorre la lista. */

.volver-contactos { margin: -6px 0 4px -10px; }

/* El título del panel con la otra forma de cargar al lado: "Nuevo contacto · Importar". */
.panel-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.boton-chico { min-height: 40px; padding: 0 14px; font-size: 15px; }
.volver-panel { margin: -6px 0 6px -10px; }
.importar-bajada { margin-top: 6px; color: var(--tinta-2); font-size: 15px; }

.importar-como { margin-top: 12px; }
.importar-como > summary { list-style: none; gap: 6px; margin-left: -10px; color: var(--cardenillo); font-weight: 600; }
.importar-como > summary::-webkit-details-marker { display: none; }
.importar-como > summary svg { transition: rotate .2s var(--sale); }
.importar-como[open] > summary svg { rotate: 180deg; }
.importar-como .pasos { gap: 12px; margin: 8px 0 12px; }
.importar-como .pasos li { grid-template-columns: 28px 1fr; gap: 10px; font-size: 15px; }
.importar-como .pasos li::before { width: 28px; height: 28px; font-size: 14px; }
.importar-como .pasos li p { padding-top: 3px; }

.entrada-archivo {
	width: 100%;
	min-height: 52px;
	padding: 5px;
	border: 1px dashed var(--control);
	border-radius: var(--r-campo);
	background: var(--superficie);
	color: var(--tinta-2);
	font: inherit;
	font-size: 15px;
	overflow-wrap: anywhere;
}
.entrada-archivo[aria-invalid="true"] { border-color: var(--cinabrio); }
.entrada-archivo::file-selector-button {
	min-height: 40px;
	margin-right: 12px;
	padding: 0 14px;
	border: 0;
	border-radius: 7px;
	background: var(--cardenillo-fondo);
	color: var(--cardenillo-oscuro);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
/* Aparte: un selector que el navegador no conoce anula toda la regla. */
.entrada-archivo::-webkit-file-upload-button {
	min-height: 40px;
	margin-right: 12px;
	padding: 0 14px;
	border: 0;
	border-radius: 7px;
	background: var(--cardenillo-fondo);
	color: var(--cardenillo-oscuro);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.importar-revision { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.importar-resumen { color: var(--tinta-2); }
.importar-resumen strong { color: var(--tinta); }

/* La característica para los números agendados sin ella. */
.importar-car { display: grid; gap: 12px; padding: 16px 18px; }
.importar-car a { color: var(--cardenillo); font-weight: 600; text-underline-offset: 3px; }
.importar-car-campo { display: flex; align-items: flex-end; gap: 10px; }
.importar-car-campo .campo { flex: 0 1 140px; }

.importar-agregar { display: flex; flex-direction: column; }
.importar-nuevos { overflow: hidden; }
.importar-cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2px 12px;
	padding: 10px 6px 8px 16px;
}
.importar-cabeza .cuenta { color: var(--tinta-3); font-weight: 500; }
.importar-marcar { display: flex; }
.importar-buscar { margin: 0 12px 10px; }

.importar-lista { box-shadow: inset 0 1px 0 var(--linea); }
.importar-lista li + li { box-shadow: inset 0 1px 0 var(--linea); }

/* Una fila: la casilla y, al lado, nombre, número y la primera línea de la descripción. */
.importar-fila {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
	min-height: 56px;
	padding: 9px 16px 10px;
	line-height: 1.32;
	cursor: pointer;
	transition-property: background-color;
	transition-duration: .12s;
}
.importar-fila:hover { background: #F6F8F7; }
.importar-fila input {
	grid-column: 1;
	grid-row: 1 / span 3;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--cardenillo);
	cursor: pointer;
}
.importar-fila input:focus-visible { box-shadow: var(--foco); border-radius: 4px; }
.importar-fila > span { grid-column: 2; min-width: 0; }
.importar-fila .nombre,
.importar-fila-otra .nombre { font-weight: 600; overflow-wrap: anywhere; }
.importar-fila .numero,
.importar-fila-otra .numero { color: var(--tinta-2); font-size: 15px; }
.importar-fila .desc,
.importar-fila-otra .desc {
	color: var(--tinta-3);
	font-size: var(--t-chica);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.importar-fila .desc:empty,
.importar-fila-otra .numero:empty { display: none; }
/* Lo que no se va a agregar se apaga. */
.importar-fila:has(input:not(:checked)) .nombre,
.importar-fila:has(input:not(:checked)) .numero { color: var(--tinta-3); }

.importar-fijo { color: var(--tinta-2); font-weight: 500; }

.importar-fila-otra { display: grid; padding: 9px 16px 10px; line-height: 1.32; }
.importar-fila-otra .desc { white-space: normal; }
.importar-fila-otra .motivo { color: var(--cinabrio); font-weight: 500; }
.importar-fila-otra .sin-nombre { color: var(--tinta-3); font-weight: 500; }

/* El botón queda a la vista mientras se recorre la lista. */
.importar-pie {
	position: sticky;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px -16px 0;
	padding: 12px 16px;
	background: var(--papel);
	box-shadow: 0 -1px 0 var(--linea);
}
.importar-pie .boton { flex: 1 1 auto; }
.importar-pie .boton:disabled { background: var(--hundido); color: var(--tinta-2); cursor: default; scale: 1; }

/* "Ya están" y "No se pueden agregar": cerrados, se abren si interesa. */
.importar-otros > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 4px 16px;
	list-style: none;
	cursor: pointer;
	border-radius: var(--r-caja);
}
.importar-otros > summary::-webkit-details-marker { display: none; }
.importar-otros > summary h2 { font-size: 17px; font-weight: 700; }
.importar-otros > summary .cuenta { color: var(--tinta-3); font-weight: 500; }
.importar-otros > summary svg { margin-left: auto; color: var(--tinta-3); transition: rotate .2s var(--sale); }
.importar-otros[open] > summary svg { rotate: 180deg; }
.importar-otros[open] > summary { border-radius: var(--r-caja) var(--r-caja) 0 0; }
.importar-otros > summary:focus-visible { box-shadow: var(--foco); }
.importar-otros-ayuda { padding: 10px 16px 12px; color: var(--tinta-2); font-size: 14px; box-shadow: inset 0 1px 0 var(--linea); }

.importar-otro { margin-left: -10px; }

/* Las listas importadas, en el panel. */
.listas-importadas { margin-top: 24px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--linea); }
.listas-importadas h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.listas-importadas ul { margin-top: 6px; }
.lista-importada {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2px 12px;
	padding: 10px 0;
}
.lista-importada + .lista-importada { box-shadow: inset 0 1px 0 var(--linea); }
.lista-importada-dato { display: flex; flex-direction: column; min-width: 0; }
.lista-importada-nombre { font-weight: 600; overflow-wrap: anywhere; }
/* El borde del texto alineado con el nombre, también cuando baja a su renglón. */
.lista-importada .borrar { margin: 0 -10px; }
.lista-importada .borrar[open] { flex-basis: 100%; margin: 6px 0 4px; }
/* La que se acaba de importar. */
.lista-importada-nueva { margin: 0 -12px; padding: 10px 12px; border-radius: 12px; background: var(--cardenillo-fondo); }
.lista-importada-nueva + .lista-importada { box-shadow: none; }

/* El botón de Contactos vacío. */
.vacio-importar { margin-top: 16px; }

/* En el celular, Importar se abre arriba de la lista, como el alta. */
@media (max-width: 899.98px) {
	body.con-importar:not(.con-contacto) .panel { display: block; order: -1; }
}

@media (min-width: 900px) {
	/* Con los pasos abiertos y varias listas pasa el alto de la pantalla: no se pega. */
	.panel-importar { position: static; }
	.importar-cabeza { padding: 12px 8px 10px 18px; }
	.importar-buscar { margin: 0 18px 12px; }
	.importar-fila {
		grid-template-columns: 24px minmax(0, 1.1fr) 190px minmax(0, 1.4fr);
		column-gap: 16px;
		min-height: 48px;
		padding: 10px 18px;
	}
	.importar-fila input { grid-row: auto; }
	.importar-fila > span { grid-column: auto; }
	.importar-fila .desc:empty { display: block; }
	.importar-fila-otra {
		grid-template-columns: minmax(0, 1.1fr) 190px minmax(0, 1.4fr);
		column-gap: 16px;
		align-items: baseline;
		padding: 11px 18px;
	}
	.importar-fila-otra .numero:empty { display: block; }
	.importar-pie { margin: 12px 0 0; padding: 14px 0; }
	.importar-pie .boton { flex: 0 0 auto; }
}

/* ── Programar a varios ───────────────────────────────────────────────
   "A varios contactos" es una casilla al lado de "Para": tildada, el campo de un
   destinatario deja lugar a la lista de contactos con casillas. Lo decide `:has()`,
   así anda sin JavaScript; con JavaScript, además, la clase `con-varios`. */

.campo-para { position: relative; }
.para-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.para-cabeza > label:first-child { font-size: 14px; font-weight: 500; color: var(--tinta-2); }
.para-uno { display: flex; flex-direction: column; gap: 6px; }

.check-varios {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	color: var(--tinta-2);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
}
.check-varios:hover { color: var(--tinta); }
.check-varios input { width: 24px; height: 24px; margin: 0; accent-color: var(--cardenillo); cursor: pointer; }
.check-varios input:focus-visible { box-shadow: var(--foco); border-radius: 4px; }
.check-varios:has(input:checked) { color: var(--cardenillo-oscuro); font-weight: 600; }

.para-varios { display: none; flex-direction: column; gap: 8px; }
.campo-para:has(.varios-check:checked) .para-uno,
.campo-para.con-varios .para-uno { display: none; }
.campo-para:has(.varios-check:checked) .para-varios,
.campo-para.con-varios .para-varios { display: flex; }

/* "Desmarcar todos" (que después dice "Deshacer"). Sin nadie marcado no hace nada, y se ve apagado. */
.para-marcar { display: flex; }
.para-marcar .boton[aria-disabled="true"] { background: var(--superficie); color: var(--tinta-3); opacity: .6; cursor: default; scale: none; }

/* La lista se recorre adentro de su caja: con cientos de contactos, el formulario no se estira. */
.para-lista {
	max-height: 280px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--control);
	border-radius: var(--r-campo);
	background: var(--superficie);
}
.para-lista li + li { box-shadow: inset 0 1px 0 var(--linea); }
.para-lista label {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 10px;
	align-items: center;
	min-height: 48px;
	padding: 6px 12px;
	line-height: 1.3;
	cursor: pointer;
}
.para-lista input { grid-row: 1 / span 2; width: 24px; height: 24px; margin: 0; accent-color: var(--cardenillo); cursor: pointer; }
.para-lista input:focus-visible { box-shadow: var(--foco); border-radius: 4px; }
.para-lista .nombre { grid-column: 2; font-weight: 600; overflow-wrap: anywhere; }
.para-lista .numero { grid-column: 2; color: var(--tinta-3); font-size: 14px; }
.para-lista label:hover { background: #F6F8F7; }
.para-lista label:has(input:checked) { background: var(--cardenillo-fondo); }
.para-sin-resultados { padding: 12px 4px 4px; font-size: 14px; }

/* A quiénes les llega: con alguien marcado, el texto es un link que muestra solo a
   los marcados; viéndolos, el link vuelve a la lista entera. El texto queda donde
   estaría sin link, y el blanco táctil se estira con `::after`: hasta el borde de la
   lista arriba y hasta el campo siguiente abajo, sin tapar ninguno. */
.eco-varios { display: flex; flex-direction: column; align-items: flex-start; }
.ver-marcados {
	position: relative;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ver-marcados::after { content: ""; position: absolute; inset: -8px -6px -15px; }
.ver-marcados:hover { text-decoration-thickness: 2px; }

/* "No mandar ninguno" en el aviso de recién programado. */
.aviso .borrar[open] { flex-basis: 100%; }
.aviso-deshacer > summary { color: var(--cardenillo-oscuro); font-weight: 600; }
.aviso-deshacer .borrar-pregunta { font-weight: 400; }
/* El párrafo de la pregunta no es el del aviso: no se estira como él. */
.aviso-deshacer .borrar-pregunta p { flex: none; padding-top: 0; }