/* Panel de empleados (inc/panel.php): menú lateral marino y contenido sobre gris claro, al estilo de los paneles
   modernos: tarjetas redondeadas con sombra suave, botones y campos redondeados, etiquetas tipo píldora. Los colores
   de la marca (marino y rojo MRW) se mantienen. En el móvil y la tableta queda arriba una barra con la marca y un botón
   de hamburguesa que abre el menú en un cajón lateral. Los valores comunes están en variables al principio. */

.oiarso-panel {
	--oiarso-marino: #19133B;
	--oiarso-marino-oscuro: #110C2B;
	--oiarso-rojo: #C83228;
	--oiarso-rojo-vivo: #FE4438;
	--oiarso-azul: #242424; /* Negro mate: antes azul var(--oiarso-azul) (el usuario lo pidió el 22/10/2026). */
	--oiarso-texto: #1A1A2E;
	--oiarso-texto-suave: #616175;
	--oiarso-fondo: #F4F4F6;
	--oiarso-fondo-suave: #FAFAFB;
	--oiarso-borde: #E4E4E9;
	--oiarso-borde-fuerte: #C9C9D3;
	--oiarso-radio: 12px;
	--oiarso-radio-chico: 8px;
	--oiarso-sombra: 0 1px 2px rgba(25, 19, 59, 0.06), 0 6px 20px rgba(25, 19, 59, 0.05);
	--oiarso-foco: 0 0 0 3px rgba(36, 36, 36, 0.16);
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	color: var(--oiarso-texto);
	background: var(--oiarso-fondo);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Menú lateral: fijo al bajar por la página (ocupa el alto de la pantalla, debajo de la barra de WordPress si se ve) */
.oiarso-panel__lateral {
	box-sizing: border-box;
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	align-self: start;
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	overflow-y: auto;
	padding: 28px 14px 20px;
	background: var(--oiarso-marino);
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.oiarso-panel__marca {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 12px;
	color: #FFFFFF;
	text-decoration: none;
}
.oiarso-panel__marca:hover,
.oiarso-panel__marca:focus {
	color: #FFFFFF;
}
.oiarso-panel__empresa {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.oiarso-panel__franquicia {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
}
.oiarso-panel__menu {
	flex-grow: 1;
}
.oiarso-panel__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.oiarso-panel__menu a,
.oiarso-panel__salir {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.oiarso-panel__corto {
	display: none;
}
.oiarso-panel__menu a:hover,
.oiarso-panel__salir:hover {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.08);
}
.oiarso-panel__menu a:focus-visible,
.oiarso-panel__salir:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}
.oiarso-panel__menu a.is-actual {
	background: var(--oiarso-rojo);
	color: #FFFFFF;
	font-weight: 600;
}
.oiarso-panel__usuario {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.oiarso-panel__nombre {
	padding: 0 14px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.oiarso-icono {
	flex-shrink: 0;
}

/* Contenido */
.oiarso-panel__contenido {
	box-sizing: border-box;
	padding: 36px 44px 72px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}
.oiarso-panel__titulo {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Piezas que usan las secciones */
.oiarso-tarjeta {
	box-sizing: border-box;
	padding: 24px 28px;
	background: #FFFFFF;
	border: 1px solid var(--oiarso-borde);
	border-radius: var(--oiarso-radio);
	box-shadow: var(--oiarso-sombra);
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}
.oiarso-tarjeta h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.oiarso-raya {
	display: block;
	width: 48px;
	height: 5px;
	border-radius: 3px;
	background: var(--oiarso-rojo-vivo);
}
.oiarso-nota {
	margin: 0;
	color: var(--oiarso-texto-suave);
	font-size: 14px;
	line-height: 1.55;
	overflow-wrap: break-word;
}
.oiarso-boton {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--oiarso-rojo);
	border-radius: 10px;
	background: var(--oiarso-rojo);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.oiarso-boton:hover {
	background: #B02A21;
	border-color: #B02A21;
	color: #FFFFFF;
}
.oiarso-boton:focus-visible {
	outline: none;
	box-shadow: var(--oiarso-foco);
}
.oiarso-boton:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.oiarso-rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	align-items: start;
}
.oiarso-campo {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.oiarso-campo label,
.oiarso-campo__etiqueta {
	font-size: 14px;
	font-weight: 500;
	color: var(--oiarso-texto);
}
.oiarso-campo input,
.oiarso-campo select,
.oiarso-campo textarea {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--oiarso-borde-fuerte);
	border-radius: 10px;
	font: inherit;
	font-size: 15px;
	color: var(--oiarso-texto);
	background: #FFFFFF;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.oiarso-campo input,
.oiarso-campo select {
	height: 44px;
	padding: 0 14px;
}
.oiarso-campo textarea {
	min-height: 96px;
	padding: 11px 14px;
	line-height: 1.5;
	resize: vertical;
}
.oiarso-campo input:focus,
.oiarso-campo select:focus,
.oiarso-campo textarea:focus {
	outline: none;
	border-color: var(--oiarso-azul);
	box-shadow: var(--oiarso-foco);
}
.oiarso-campo input::placeholder,
.oiarso-campo textarea::placeholder {
	color: #9A9AA8;
}
.oiarso-campo__fijo {
	font-size: 15px;
	color: var(--oiarso-texto-suave);
}
.oiarso-campo__ayuda {
	font-size: 13px;
	line-height: 1.45;
	color: var(--oiarso-texto-suave);
}
.oiarso-mensaje {
	margin: 0;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 15px;
}
.oiarso-mensaje--bien {
	background: #E3F4EA;
	color: #1E6B44;
}
.oiarso-mensaje--mal {
	background: #FDE9E7;
	color: #B0140C;
}
.oiarso-casilla {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 15px;
}
.oiarso-enlace {
	color: var(--oiarso-azul);
	font-size: 15px;
	font-weight: 500;
}

/* Franja con el estado de una conexión (API, WhatsApp, ElevenLabs) */
.oiarso-estado-api {
	margin: 0;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.4;
}
.oiarso-estado-api__punto {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}
.oiarso-estado-api--bien {
	background: #E3F4EA;
	color: #1E6B44;
}
.oiarso-estado-api--aviso {
	background: #FBF1DE;
	color: #7A4F00;
}
.oiarso-estado-api--mal {
	background: #FDE9E7;
	color: #B0140C;
}

/* Buscadores */
.oiarso-buscador__filtros {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1.2fr)) auto;
	gap: 16px;
	align-items: end;
}
.oiarso-buscador__botones {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.oiarso-total {
	margin: 0;
	font-weight: 500;
}

/* Tablas (en el móvil, cada fila es una tarjeta) */
.oiarso-tabla-caja {
	position: relative; /* contiene los textos ocultos (.oiarso-oculto) de las cabeceras: si no, se salen del marco y alargan la página */
	background: #FFFFFF;
	border: 1px solid var(--oiarso-borde);
	border-radius: var(--oiarso-radio);
	box-shadow: var(--oiarso-sombra);
	overflow-x: auto;
}
.oiarso-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.oiarso-tabla th {
	padding: 12px 16px;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oiarso-texto-suave);
	background: var(--oiarso-fondo-suave);
	border-bottom: 1px solid var(--oiarso-borde);
	white-space: nowrap;
}
.oiarso-tabla td {
	padding: 14px 16px;
	border-top: 1px solid var(--oiarso-borde);
	vertical-align: top;
	line-height: 1.45;
}
.oiarso-tabla tbody tr:first-child td {
	border-top: 0;
}
.oiarso-tabla tbody tr:hover td {
	background: var(--oiarso-fondo-suave);
}
.oiarso-tabla__numero {
	font-weight: 600;
	color: var(--oiarso-azul);
}
.oiarso-tabla__dato {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--oiarso-texto-suave);
}
/* Todas las tablas: "Mostrando X–Y de N", cuántos por página y la paginación (inc/tabla.php) */
.oiarso-tabla-resumen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
}
.oiarso-por-pagina {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--oiarso-texto-suave);
}
.oiarso-por-pagina__opcion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 34px;
	padding: 0 8px;
	box-sizing: border-box;
	border: 1px solid var(--oiarso-borde);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--oiarso-texto);
	font-weight: 500;
	text-decoration: none;
}
.oiarso-por-pagina__opcion:hover {
	border-color: var(--oiarso-borde-fuerte);
	background: var(--oiarso-fondo-suave);
}
.oiarso-por-pagina__opcion.is-actual {
	background: var(--oiarso-marino);
	border-color: var(--oiarso-marino);
	color: #FFFFFF;
}
.oiarso-paginas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 14px;
}
.oiarso-paginas__numeros {
	display: flex;
	align-items: center;
	gap: 6px;
}
.oiarso-paginas__boton,
.oiarso-paginas__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid var(--oiarso-borde);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--oiarso-texto);
	font-weight: 500;
	text-decoration: none;
}
.oiarso-paginas__boton:hover,
.oiarso-paginas__numero:hover {
	border-color: var(--oiarso-borde-fuerte);
	background: var(--oiarso-fondo-suave);
}
.oiarso-paginas__boton[aria-disabled="true"] {
	color: #A8A8B5;
	background: var(--oiarso-fondo-suave);
}
.oiarso-paginas__numero.is-actual {
	background: var(--oiarso-marino);
	border-color: var(--oiarso-marino);
	color: #FFFFFF;
}
.oiarso-paginas__salto {
	padding: 0 4px;
	color: var(--oiarso-texto-suave);
}
.oiarso-paginas__texto {
	display: none;
	padding: 0 8px;
	color: var(--oiarso-texto);
}

/* Etiquetas de estado, tipo píldora */
.oiarso-estado {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.oiarso-estado--entregado {
	background: #E3F4EA;
	color: #1E6B44;
}
.oiarso-estado--en-camino {
	background: #E8EAF8;
	color: var(--oiarso-azul);
}
.oiarso-estado--pendiente {
	background: #FBF1DE;
	color: #7A4F00;
}
.oiarso-estado--cancelado {
	background: #EDEDF1;
	color: #4F4F60;
}
.oiarso-incidencia {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #B0140C;
}

/* Fichas (envío) */
.oiarso-volver {
	align-self: flex-start;
}
.oiarso-ficha__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.oiarso-ficha__motivo {
	display: block;
	margin-top: 4px;
}
.oiarso-ficha__datos {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 24px;
}
.oiarso-ficha__datos dt {
	font-size: 13px;
	color: var(--oiarso-texto-suave);
}
.oiarso-ficha__datos dd {
	margin: 2px 0 0;
	font-weight: 500;
	overflow-wrap: anywhere;
}
.oiarso-historial {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.oiarso-historial li {
	display: flex;
	align-items: center;
	gap: 8px 14px;
	flex-wrap: wrap;
	padding: 12px 0;
	border-top: 1px solid var(--oiarso-borde);
}
.oiarso-historial li:first-child {
	border-top: 0;
}
.oiarso-historial__fecha {
	min-width: 130px;
	font-size: 14px;
	color: var(--oiarso-texto-suave);
}
.oiarso-historial .oiarso-incidencia {
	display: inline;
	margin: 0;
}
.oiarso-historial__motivo {
	flex-basis: 100%;
	font-size: 14px;
	color: var(--oiarso-texto-suave);
}

/* Tableta: las tarjetas de Configuración una debajo de otra; filtros en dos columnas */
/* Estas piezas se ajustan al sitio que tiene el contenido (no a la pantalla): así también cuando el panel de la IA
   lo estrecha. 744px es el ancho del contenido con una pantalla de 1100px. */
.oiarso-panel__contenido {
	container-type: inline-size;
}
@container (max-width: 744px) {
	.oiarso-rejilla {
		grid-template-columns: minmax(0, 1fr);
	}
	.oiarso-buscador__filtros {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.oiarso-ficha__datos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Contenido estrecho (móvil, o con el panel de la IA abierto): los resultados como tarjetas. 608px es el ancho del
   contenido con una pantalla de 640px. */
@container (max-width: 608px) {
	.oiarso-buscador__filtros,
	.oiarso-ficha__datos {
		grid-template-columns: minmax(0, 1fr);
	}
	.oiarso-tabla-caja {
		background: transparent;
		border: 0;
		overflow: visible;
	}
	.oiarso-tabla thead {
		display: none;
	}
	.oiarso-tabla,
	.oiarso-tabla tbody,
	.oiarso-tabla tr,
	.oiarso-tabla td {
		display: block;
	}
	.oiarso-tabla tr {
		margin-bottom: 12px;
		padding: 12px 16px;
		background: #FFFFFF;
		border: 1px solid #E0DEDC;
	}
	.oiarso-tabla td {
		padding: 6px 0;
		border-top: 0;
	}
	.oiarso-tabla td::before {
		content: attr(data-etiqueta);
		display: block;
		font-size: 12px;
		color: #6B6B6B;
	}
	.oiarso-historial__fecha {
		min-width: 0;
		flex-basis: 100%;
	}
	/* Paginación compacta: Anterior · Página X de Y · Siguiente */
	.oiarso-paginas__numeros,
	.oiarso-paginas__extremo {
		display: none;
	}
	.oiarso-paginas__texto {
		display: inline;
	}
}

/* Móvil y tableta en vertical: menú arriba */
@media (max-width: 782px) {
	.oiarso-panel {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
	}
	/* Barra de arriba: la marca y la hamburguesa; se queda pegada arriba al bajar */
	.oiarso-panel__lateral {
		position: sticky;
		top: 0;
		z-index: 30;
		height: auto;
		min-height: 60px;
		overflow: visible;
		padding: 8px 16px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	.oiarso-panel__marca {
		padding: 0;
	}
	.oiarso-panel__empresa {
		font-size: 18px;
	}
	.oiarso-panel__hamburguesa {
		display: inline-flex;
	}
	.oiarso-panel__velo {
		display: block;
	}
	/* El cajón con el menú: entra desde la izquierda al pulsar la hamburguesa */
	.oiarso-panel__cajon {
		box-sizing: border-box;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(320px, 86vw);
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 14px 14px 20px;
		background: var(--oiarso-marino);
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
		overflow-y: auto;
		transform: translateX(-104%);
		transition: transform 0.22s ease;
		z-index: 100001;
	}
	.oiarso-panel__lateral.is-abierto .oiarso-panel__cajon {
		transform: none;
	}
	.oiarso-panel__cajon-cabecera {
		display: flex;
	}
	.oiarso-panel__submenu a {
		min-height: 44px;
	}
	.oiarso-panel__contenido {
		padding: 24px 16px 48px;
		gap: 18px;
	}
	.oiarso-panel__titulo {
		font-size: 26px;
	}
	.oiarso-tarjeta {
		padding: 22px 18px;
	}
	.oiarso-boton {
		align-self: stretch;
	}
}

/* Notificaciones WhatsApp: código QR para vincular (en el móvil, los pasos van debajo) */
.oiarso-qr {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.oiarso-qr img {
	display: block;
	width: 264px;
	max-width: 100%;
	height: auto;
	padding: 8px;
	border: 1px solid #E0DEDC;
	background: #FFFFFF;
}
.oiarso-qr__pasos {
	flex: 1 1 240px;
	margin: 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
}

/* Notificaciones WhatsApp: la lista por estado y el detalle de cada una */
.oiarso-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.oiarso-bloque {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
.oiarso-subtitulo {
	margin: 8px 0 0;
	font-size: 22px;
}
.oiarso-tabla__mensaje {
	min-width: 220px;
	max-width: 420px;
	font-size: 14px;
	line-height: 1.5;
}

	outline: 2px solid var(--oiarso-azul);
	outline-offset: 2px;
}
.oiarso-notificacion__cabecera {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.oiarso-datos-envio {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.oiarso-datos-envio legend {
	padding: 0;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 500;
}
.oiarso-datos-envio .oiarso-campo__ayuda {
	margin: 0;
}
.oiarso-datos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 8px;
}
.oiarso-dato {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 8px 12px;
	border: 1px solid #E0DEDC;
	border-radius: 10px;
	background: #F2F0EE;
	color: #19133B;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.oiarso-dato:hover {
	border-color: #19133B;
}
.oiarso-dato__nombre {
	font-size: 13px;
	font-weight: 500;
}
.oiarso-dato__nombre::before {
	content: "+ ";
	color: #C83228;
	font-weight: 600;
}
.oiarso-dato__ejemplo {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: #6B6B6B;
}
@container (max-width: 608px) {
	.oiarso-tabla__mensaje {
		min-width: 0;
		max-width: none;
	}
}

.oiarso-estado--incidencia {
	background: #FCE9E7;
	color: #B0140C;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Anomalías: etiqueta neutra (el rojo queda para los errores) */
.oiarso-estado--anomalia {
	background: #F2F0EE;
	color: #19133B;
	border: 1px solid #E0DEDC;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Detalle de la notificación: el editor y, al lado, la vista previa (debajo en pantallas estrechas) */
.oiarso-notificacion-rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	gap: 24px;
	align-items: start;
}
/* 824px es el ancho del contenido con una pantalla de 1180px. */
@container (max-width: 824px) {
	.oiarso-notificacion-rejilla {
		grid-template-columns: minmax(0, 1fr);
	}
}
.oiarso-formato {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.oiarso-formato__boton {
	min-width: 44px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid #9B9B9B;
	border-radius: 0;
	background: #FFFFFF;
	color: #19133B;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.oiarso-formato__boton:hover {
	border-color: #19133B;
	background: #F2F0EE;
}
.oiarso-formato__boton:focus-visible {
	outline: 2px solid var(--oiarso-azul);
	outline-offset: 2px;
}
.oiarso-formato__boton code {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 13px;
}

/* Vista previa con el aspecto de WhatsApp */
.oiarso-whatsapp {
	border: 1px solid #E0DEDC;
	border-radius: 12px;
	overflow: hidden;
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}
.oiarso-whatsapp__cabecera {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #008069;
	color: #FFFFFF;
}
.oiarso-whatsapp__avatar {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #DFE5E7;
	color: #54656F;
	font-weight: 600;
}
.oiarso-whatsapp__nombre {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}
.oiarso-whatsapp__numero {
	display: block;
	font-size: 12px;
	opacity: 0.85;
}
.oiarso-whatsapp__chat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-height: 280px;
	padding: 14px 16px 20px;
	background: #EFEAE2;
}
.oiarso-whatsapp__dia {
	align-self: center;
	padding: 4px 10px;
	border-radius: 8px;
	background: #FFFFFF;
	color: #54656F;
	font-size: 12px;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.oiarso-whatsapp__burbuja {
	position: relative;
	box-sizing: border-box;
	max-width: 92%;
	padding: 6px 8px 6px 9px;
	border-radius: 0 8px 8px 8px;
	background: #FFFFFF;
	color: #111B21;
	font-size: 14.2px;
	line-height: 1.45;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
	overflow-wrap: anywhere;
}
.oiarso-whatsapp__burbuja::before {
	content: "";
	position: absolute;
	top: 0;
	left: -8px;
	border-right: 8px solid #FFFFFF;
	border-bottom: 10px solid transparent;
}
.oiarso-whatsapp__hora {
	display: block;
	margin-top: 2px;
	text-align: right;
	font-size: 11px;
	color: #667781;
}
.oiarso-whatsapp__texto code {
	padding: 0 3px;
	border-radius: 3px;
	background: #F0F2F5;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 13px;
}
.oiarso-whatsapp__texto .oiarso-whatsapp__bloque {
	display: block;
	padding: 0;
	background: none;
}
.oiarso-whatsapp__lista {
	display: flex;
	gap: 6px;
	padding-left: 4px;
}
.oiarso-whatsapp__cita {
	display: block;
	margin: 2px 0;
	padding: 2px 8px;
	border-left: 3px solid #C8CDD1;
	color: #54656F;
}
.oiarso-whatsapp__vacio {
	color: #8696A0;
	font-style: italic;
}

/* Interruptores: todas las opciones de sí / no (casillas y el activar de la lista) */
.oiarso-interruptor {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: inline-block;
	flex: none;
	box-sizing: border-box;
	width: 44px;
	height: 24px;
	margin: 0;
	border-radius: 12px;
	background: #8A8886;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color 0.15s;
}
.oiarso-interruptor::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s;
}
input.oiarso-interruptor:checked,
[aria-checked="true"] > .oiarso-interruptor {
	background: var(--oiarso-azul);
}
input.oiarso-interruptor:checked::before,
[aria-checked="true"] > .oiarso-interruptor::before {
	transform: translateX(20px);
}
input.oiarso-interruptor:focus-visible,
.oiarso-interruptor-boton:focus-visible {
	outline: 2px solid var(--oiarso-azul);
	outline-offset: 2px;
}
.oiarso-interruptor-boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: #19133B;
	font: inherit;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
}
.oiarso-interruptor-boton:disabled {
	color: #6B6B6B;
	cursor: not-allowed;
}
.oiarso-interruptor-boton:disabled > .oiarso-interruptor {
	opacity: 0.45;
	cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
	.oiarso-interruptor,
	.oiarso-interruptor::before {
		transition: none;
	}
}

/* Mensaje de prueba, debajo de la vista previa */
.oiarso-prueba {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid #E0DEDC;
}
.oiarso-prueba h3 {
	margin: 0;
	font-size: 17px;
}
.oiarso-prueba .oiarso-boton {
	align-self: stretch;
}

/* Chat IA, como el chat de OpenAI: un solo contenedor con las conversaciones a la izquierda y la conversación a todo
   el ancho, con la caja de escribir abajo (en el centro si la conversación es nueva). En pantallas
   estrechas la lista se abre por encima con el botón ☰. */
.oiarso-chat {
	position: relative;
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 180px);
	min-height: 480px;
	overflow: hidden;
	border: 1px solid #E0DEDC;
	border-radius: 12px;
	background: #FFFFFF;
}
.oiarso-chat__lateral {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 0;
	padding: 12px;
	overflow-y: auto;
	background: #F6F6F6;
	border-right: 1px solid #E0DEDC;
}
.oiarso-chat__nueva {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 8px;
	color: #19133B;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.oiarso-chat__nueva:hover {
	background: #ECEAE7;
	color: #19133B;
}
.oiarso-chat__grupo {
	margin: 14px 12px 4px;
	font-size: 12px;
	font-weight: 600;
	color: #6B6B6B;
}
.oiarso-chat__conversaciones {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oiarso-chat__conversaciones a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	color: #19133B;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.oiarso-chat__conversaciones a:hover {
	background: #ECEAE7;
}
.oiarso-chat__conversaciones .is-actual a {
	background: #E3E0DC;
	font-weight: 500;
}
.oiarso-chat__sin {
	margin: 12px;
	font-size: 14px;
	color: #6B6B6B;
}
.oiarso-chat__principal {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}
.oiarso-chat__cabecera {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 0 16px;
	border-bottom: 1px solid #F0EEEB;
}
.oiarso-chat__cabecera h2 {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.oiarso-chat__icono-boton {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #19133B;
	cursor: pointer;
}
.oiarso-chat__icono-boton:hover {
	background: #F2F0EE;
}
.oiarso-chat__boton-borrar:hover {
	color: #B0140C;
}
.oiarso-chat__menu {
	display: none;
}
.oiarso-chat__borrar {
	margin: 0;
}
.oiarso-chat__mensajes {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}
.oiarso-chat__columna {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	min-width: 0;
	padding: 24px 32px;
}
.oiarso-chat__mensaje {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
}
.oiarso-chat__mensaje--empleado {
	align-self: flex-end;
	max-width: 75%;
}
.oiarso-chat__burbuja {
	color: #19133B;
	font-size: 16px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
.oiarso-chat__mensaje--empleado .oiarso-chat__burbuja {
	padding: 10px 16px;
	border-radius: 18px;
	background: #F2F0EE;
	white-space: pre-wrap;
}
.oiarso-chat__mensaje--error .oiarso-chat__burbuja {
	padding: 10px 14px;
	border-radius: 12px;
	background: #FCE9E7;
	color: #B0140C;
	font-size: 15px;
}
.oiarso-chat__mensaje--pensando .oiarso-chat__burbuja {
	color: #6B6B6B;
}
.oiarso-chat__burbuja p,
.oiarso-chat__burbuja ul,
.oiarso-chat__burbuja ol {
	margin: 0 0 12px;
}
.oiarso-chat__burbuja ul,
.oiarso-chat__burbuja ol {
	padding-left: 22px;
}
.oiarso-chat__burbuja li + li {
	margin-top: 4px;
}
.oiarso-chat__burbuja > :last-child {
	margin-bottom: 0;
}
.oiarso-chat__burbuja a {
	color: var(--oiarso-azul);
	font-weight: 500;
}
.oiarso-chat__consultas {
	margin: 8px 0 0;
	font-size: 12px;
	color: #6B6B6B;
}
.oiarso-chat__pie {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding: 0 32px 16px;
}
.oiarso-chat__caja {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 8px 8px 8px 18px;
	border: 1px solid #D5D2CE;
	border-radius: 26px;
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(25, 19, 59, 0.08);
}
.oiarso-chat__caja:focus-within {
	border-color: var(--oiarso-azul);
	box-shadow: 0 0 0 1px var(--oiarso-azul);
}
.oiarso-chat__caja textarea {
	flex: 1;
	min-width: 0;
	max-height: 200px;
	padding: 8px 0;
	border: 0;
	outline: none;
	background: transparent;
	color: #19133B;
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	resize: none;
}
.oiarso-chat__enviar {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #19133B;
	color: #FFFFFF;
	cursor: pointer;
}
.oiarso-chat__enviar:hover {
	background: #2A2260;
}
.oiarso-chat__enviar:disabled {
	background: #C9C6C2;
	cursor: not-allowed;
}
.oiarso-chat__enviar:focus-visible,
.oiarso-chat__icono-boton:focus-visible,
.oiarso-chat__nueva:focus-visible,
.oiarso-chat__conversaciones a:focus-visible,
.oiarso-chat__sugerencia:focus-visible {
	outline: 2px solid var(--oiarso-azul);
	outline-offset: 2px;
}
.oiarso-chat__aviso {
	margin: 0;
	text-align: center;
	font-size: 12px;
	color: #6B6B6B;
}
.oiarso-chat__sugerencias {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.oiarso-chat__sugerencia {
	padding: 8px 14px;
	border: 1px solid #E0DEDC;
	border-radius: 18px;
	background: #FFFFFF;
	color: #19133B;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.oiarso-chat__sugerencia:hover {
	background: #F2F0EE;
}
/* Conversación nueva: el saludo y la caja, en el centro */
.oiarso-chat--vacio .oiarso-chat__mensajes {
	flex: 0 0 auto;
	margin-top: auto;
}
.oiarso-chat--vacio .oiarso-chat__pie {
	margin-bottom: auto;
}
.oiarso-chat__inicio {
	text-align: center;
}
.oiarso-chat__inicio h3 {
	margin: 0 0 8px;
	font-size: 26px;
}
.oiarso-chat__inicio p {
	max-width: 560px;
	margin: 0 auto;
	color: #6B6B6B;
	font-size: 15px;
	line-height: 1.5;
}
@media (max-width: 900px) {
	.oiarso-chat {
		grid-template-columns: minmax(0, 1fr);
	}
	.oiarso-chat__lateral {
		position: absolute;
		z-index: 3;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(300px, 85%);
		box-sizing: border-box;
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform 0.2s, visibility 0.2s;
		box-shadow: 4px 0 16px rgba(25, 19, 59, 0.15);
	}
	.oiarso-chat--lateral-abierto .oiarso-chat__lateral {
		visibility: visible;
		transform: none;
	}
	.oiarso-chat__fondo {
		position: absolute;
		z-index: 2;
		inset: 0;
		background: rgba(25, 19, 59, 0.35);
	}
	.oiarso-chat__menu {
		display: inline-grid;
	}
	.oiarso-chat__columna {
		padding: 16px;
	}
	.oiarso-chat__pie {
		padding: 0 12px 12px;
	}
	.oiarso-chat__mensaje--empleado {
		max-width: 85%;
	}
}
@media (max-width: 782px) {
	.oiarso-chat {
		height: calc(100vh - 230px);
		height: calc(100dvh - 230px);
		min-height: 420px;
	}
	.oiarso-chat__inicio h3 {
		font-size: 22px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.oiarso-chat__lateral {
		transition: none;
	}
	.oiarso-escribiendo i {
		animation: none;
	}
}

/* La IA en las demás pestañas, como el Sidekick de Shopify: una barra flotante abajo en el centro del contenido
   y, al escribir, el panel a la derecha (en pantallas anchas aparta el contenido; en las estrechas va por encima). */
.oiarso-panel:has(.oiarso-asistente) .oiarso-panel__contenido {
	padding-bottom: 120px;
}
.oiarso-asistente__barra {
	position: fixed;
	z-index: 40;
	bottom: 20px;
	left: calc(50% + 130px);
	transform: translateX(-50%);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 6px;
	width: min(560px, calc(100vw - 260px - 48px));
	padding: 6px 6px 6px 10px;
	border: 1px solid #E0DEDC;
	border-radius: 28px;
	background: #FFFFFF;
	box-shadow: 0 6px 24px rgba(25, 19, 59, 0.15);
}
.oiarso-asistente__barra:focus-within {
	border-color: var(--oiarso-azul);
	box-shadow: 0 0 0 1px var(--oiarso-azul), 0 6px 24px rgba(25, 19, 59, 0.15);
}
.oiarso-asistente--abierto .oiarso-asistente__barra {
	display: none;
}
.oiarso-asistente__icono {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #19133B;
	color: #FFFFFF;
}
.oiarso-asistente__icono .oiarso-icono {
	width: 18px;
	height: 18px;
}
.oiarso-asistente__barra input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 4px;
	border: 0;
	outline: none;
	background: transparent;
	color: #19133B;
	font: inherit;
	font-size: 15px;
}
.oiarso-asistente__barra input:disabled {
	color: #6B6B6B;
}
.oiarso-asistente__enviar {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #19133B;
	color: #FFFFFF;
	cursor: pointer;
}
.oiarso-asistente__enviar:hover {
	background: #2A2260;
}
.oiarso-asistente__enviar:disabled {
	background: #C9C6C2;
	cursor: not-allowed;
}
.oiarso-asistente__enviar:focus-visible {
	outline: 2px solid var(--oiarso-azul);
	outline-offset: 2px;
}
.oiarso-asistente__abrir {
	border-left: 1px solid #E0DEDC;
	border-radius: 0 20px 20px 0;
}
.oiarso-asistente__abrir:disabled {
	color: #C9C6C2;
	cursor: not-allowed;
}
.oiarso-asistente__panel {
	position: fixed;
	z-index: 45;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 420px;
	max-width: 100%;
	background: #FFFFFF;
	border-left: 1px solid #E0DEDC;
	box-shadow: -8px 0 24px rgba(25, 19, 59, 0.1);
}
.oiarso-asistente__panel[hidden] {
	display: none;
}
.oiarso-asistente__cabecera {
	display: flex;
	align-items: center;
	gap: 2px;
	min-height: 56px;
	padding: 0 8px 0 16px;
	border-bottom: 1px solid #F0EEEB;
}
.oiarso-asistente__titulo {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #19133B;
	font-size: 16px;
	font-weight: 600;
}
.oiarso-asistente__panel .oiarso-chat__columna {
	gap: 18px;
	padding: 16px;
}
.oiarso-asistente__panel .oiarso-chat__pie {
	padding: 0 12px 12px;
}
.oiarso-asistente__panel .oiarso-chat__mensaje--empleado {
	max-width: 85%;
}
.oiarso-asistente__panel .oiarso-chat__burbuja {
	font-size: 15px;
}
.oiarso-asistente__vacio {
	margin: 24px 8px 0;
	text-align: center;
	color: #6B6B6B;
	font-size: 14px;
	line-height: 1.5;
}
@media (min-width: 1200px) {
	.oiarso-panel:has(.oiarso-asistente--abierto) {
		padding-right: 420px;
	}
}
@media (max-width: 782px) {
	.oiarso-asistente__barra {
		left: 50%;
		bottom: 12px;
		width: calc(100vw - 24px);
	}
}
@media (max-width: 600px) {
	.oiarso-asistente__panel {
		width: 100%;
		border-left: 0;
	}
}

/* Anomalías: cuántas hay de cada tipo (pulsando una, se filtra) y los filtros */
.oiarso-anomalias__tipos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.oiarso-anomalias__tipo {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	min-height: 40px;
	padding: 4px 6px 4px 14px;
	border: 1px solid #E0DEDC;
	border-radius: 20px;
	background: #FFFFFF;
	color: #19133B;
	font-size: 14px;
	text-decoration: none;
}
.oiarso-anomalias__tipo > span:first-child {
	overflow-wrap: anywhere;
}
.oiarso-anomalias__tipo:hover {
	border-color: #19133B;
	color: #19133B;
}
.oiarso-anomalias__tipo.is-actual {
	background: #19133B;
	border-color: #19133B;
	color: #FFFFFF;
}
.oiarso-anomalias__tipo:focus-visible {
	outline: 2px solid var(--oiarso-azul);
	outline-offset: 2px;
}
.oiarso-anomalias__cuantas {
	box-sizing: border-box;
	min-width: 28px;
	padding: 2px 8px;
	border-radius: 14px;
	background: #F2F0EE;
	color: #19133B;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}
.oiarso-anomalias__tipo.is-actual .oiarso-anomalias__cuantas {
	background: #FFFFFF;
}
.oiarso-buscador__filtros.oiarso-anomalias__filtros {
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
@container (max-width: 608px) {
	.oiarso-buscador__filtros.oiarso-anomalias__filtros {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Pendientes (asistente de WhatsApp): contador en el menú, cabecera, gestiones y la conversación */
.oiarso-panel__contador {
	margin-left: auto;
	min-width: 22px;
	padding: 2px 7px;
	border-radius: 11px;
	background: #FE4438;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}
.oiarso-panel__menu a.is-actual .oiarso-panel__contador {
	background: #FFFFFF;
	color: #19133B;
}
.oiarso-pendiente {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.oiarso-pendiente__cabecera h2 {
	margin: 0 0 4px;
}
.oiarso-pendiente__telefono {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	color: #6B6B6B;
}
.oiarso-pendiente__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.oiarso-pendiente__acciones form {
	display: contents;
}
.oiarso-boton--secundario {
	background: #FFFFFF;
	color: #19133B;
	border: 1px solid #19133B;
}
.oiarso-boton--secundario:hover {
	background: #F2F0EE;
}
.oiarso-gestion {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.oiarso-gestion + .oiarso-gestion {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #E0DEDC;
}
.oiarso-gestion__envio {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.oiarso-gestion__datos {
	margin: 4px 0 0;
}
.oiarso-gestion__datos dt {
	font-size: 12px;
	color: #6B6B6B;
}
.oiarso-gestion__datos dd {
	margin: 0 0 8px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.oiarso-gestion .oiarso-boton {
	align-self: flex-start;
}
.oiarso-tabla__falta,
.oiarso-gestion__falta {
	color: #6B6B6B;
	font-style: italic;
}
.oiarso-pendientes__datos {
	max-width: 320px;
}
.oiarso-gestion-etiqueta {
	display: inline-block;
	margin-top: 6px;
	text-decoration: none;
}
@media (max-width: 782px) {
	.oiarso-panel__contador {
		margin-left: 6px;
	}
	.oiarso-pendiente__acciones .oiarso-boton {
		align-self: auto;
	}
}
.oiarso-pendiente__resumen {
	margin: 0 0 14px;
	padding: 12px 16px;
	border-left: 4px solid #FE4438;
	background: #F2F0EE;
}
.oiarso-pendiente__resumen p {
	margin: 4px 0 0;
}

/* Submenú del menú lateral (Pendientes y Notificaciones WhatsApp dentro de Anomalías) */
.oiarso-panel__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.oiarso-panel__submenu a {
	min-height: 40px;
	padding-left: 46px;
	font-size: 14px;
	font-weight: 400;
}
.oiarso-panel__menu a.is-abierto {
	background: rgba(255, 255, 255, 0.08);
}
.oiarso-pendientes__tabla td[data-etiqueta="Anomalía"] {
	min-width: 170px;
}

/* Llamadas (ElevenLabs): barra de arriba, cabecera del detalle, audio y transcripción */
.oiarso-llamadas__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.oiarso-llamadas__barra .oiarso-estado-api {
	margin: 0;
}
.oiarso-llamada {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.oiarso-llamada__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.oiarso-llamada__cabecera h2 {
	margin: 0;
}
.oiarso-llamada__audio {
	display: block;
	width: 100%;
	max-width: 520px;
	margin-top: 14px;
}
.oiarso-conv {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 70vh;
	overflow-y: auto;
	padding: 16px;
	border-radius: 12px;
	background: #F2F0EE;
}
.oiarso-conv__mensaje {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 85%;
	padding: 8px 12px;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
.oiarso-conv__mensaje--cliente {
	align-self: flex-start;
	border-top-left-radius: 2px;
}
.oiarso-conv__mensaje--agente {
	align-self: flex-end;
	border-top-right-radius: 2px;
	background: #E8EAF8;
}
.oiarso-conv__quien {
	font-size: 12px;
	font-weight: 600;
	color: #19133B;
}
.oiarso-conv__texto {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	line-height: 1.5;
}
.oiarso-conv__hora {
	align-self: flex-end;
	font-size: 11px;
	color: #6B6B6B;
}

/* Los datos recogidos de una gestión, como una tabla de dos columnas para leerlos de un vistazo */
.oiarso-gestion__tabla {
	width: 100%;
	max-width: 720px;
	margin: 6px 0 2px;
	border-collapse: collapse;
	font-size: 16px;
}
.oiarso-gestion__tabla th,
.oiarso-gestion__tabla td {
	padding: 10px 12px;
	border: 1px solid #E0DEDC;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}
.oiarso-gestion__tabla th {
	width: 38%;
	background: #F2F0EE;
	font-weight: 500;
	color: #19133B;
}
.oiarso-gestion__tabla td {
	font-weight: 600;
	background: #FFFFFF;
}
@container (max-width: 608px) {
	.oiarso-gestion__tabla th,
	.oiarso-gestion__tabla td {
		display: block;
		width: auto;
		border-top: 0;
	}
	.oiarso-gestion__tabla tr {
		display: block;
		margin-bottom: 8px;
		border-top: 1px solid #E0DEDC;
	}
}

/* Cabecera de cada sección: título y una línea que dice qué es */
.oiarso-panel__cabecera {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.oiarso-panel__descripcion {
	margin: 0;
	max-width: 820px;
	color: #6B6B6B;
	font-size: 15px;
	line-height: 1.5;
}

/* Grupos de tarjetas (Configuración): un título pequeño encima de cada grupo */
.oiarso-grupo {
	margin: 12px 0 -8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6B6B6B;
}
.oiarso-rejilla--una {
	grid-template-columns: minmax(0, 1fr);
}
.oiarso-tarjeta--ancha .oiarso-buscador__filtros {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Inicio: el saludo, las cifras del día, las conexiones y los atajos */
.oiarso-inicio__saludo {
	margin: 0;
	font-size: 17px;
	color: #19133B;
}
.oiarso-cifras {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.oiarso-cifra {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 20px 22px;
	border: 1px solid #E0DEDC;
	border-top: 4px solid #19133B;
	background: #FFFFFF;
	color: #19133B;
	text-decoration: none;
}
.oiarso-cifra:hover {
	border-color: #19133B;
	color: #19133B;
}
.oiarso-cifra:focus-visible {
	outline: 2px solid var(--oiarso-azul);
	outline-offset: 2px;
}
.oiarso-cifra:first-child {
	border-top-color: #FE4438;
}
.oiarso-cifra__valor {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
}
.oiarso-cifra__titulo {
	font-size: 15px;
	font-weight: 600;
}
.oiarso-cifra__nota {
	font-size: 13px;
	color: #6B6B6B;
}
.oiarso-conexiones {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.oiarso-conexiones__linea {
	display: grid;
	grid-template-columns: 12px minmax(0, 170px) minmax(0, 1fr);
	align-items: baseline;
	gap: 10px;
}
.oiarso-conexiones .oiarso-estado-api__punto {
	position: relative;
	top: 1px;
}
.oiarso-estado-api__punto--bien {
	background: #1E6B44;
}
.oiarso-estado-api__punto--aviso {
	background: #B8860B;
}
.oiarso-estado-api__punto--mal {
	background: #B0140C;
}
.oiarso-conexiones__nombre {
	font-weight: 600;
}
.oiarso-conexiones__texto {
	color: #6B6B6B;
	font-size: 14px;
	overflow-wrap: anywhere;
}
.oiarso-atajos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

/* Llamadas: subtítulo de los datos y el aviso de «hay que devolver esta llamada» */
.oiarso-llamada__subtitulo {
	margin: 18px 0 0;
	font-size: 15px;
	font-weight: 600;
}
.oiarso-atencion {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 16px;
	padding: 14px 16px;
	border-left: 4px solid #B0140C;
	background: #FCE9E7;
}
.oiarso-atencion--hecha {
	border-left-color: #1E6B44;
	background: #E6F3EC;
}
.oiarso-atencion__titulo {
	margin: 0;
	font-weight: 700;
	color: #19133B;
}
.oiarso-atencion__texto {
	margin: 0;
}
.oiarso-atencion .oiarso-boton {
	align-self: flex-start;
}
@container (max-width: 900px) {
	.oiarso-cifras {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@container (max-width: 608px) {
	.oiarso-cifras {
		grid-template-columns: minmax(0, 1fr);
	}
	.oiarso-conexiones__linea {
		grid-template-columns: 12px minmax(0, 1fr);
	}
	.oiarso-conexiones__texto {
		grid-column: 2;
	}
	.oiarso-tarjeta--ancha .oiarso-buscador__filtros {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mismo estilo redondeado para las piezas de las secciones nuevas y el chat */
.oiarso-cifra,
.oiarso-pendiente__resumen,
.oiarso-atencion,
.oiarso-dato,
.oiarso-qr img {
	border-radius: var(--oiarso-radio);
}
.oiarso-cifra {
	border: 1px solid var(--oiarso-borde);
	border-top-width: 4px;
	box-shadow: var(--oiarso-sombra);
}
.oiarso-cifra__valor {
	letter-spacing: -0.03em;
}
.oiarso-chat {
	border-radius: var(--oiarso-radio);
	box-shadow: var(--oiarso-sombra);
	overflow: hidden;
}
.oiarso-gestion__tabla th:first-child,
.oiarso-gestion__tabla td:last-child {
	border-radius: 0;
}
.oiarso-gestion__tabla {
	border-radius: 10px;
	overflow: hidden;
}
.oiarso-anomalias__tipo {
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(25, 19, 59, 0.04);
}
.oiarso-panel__contador {
	border-radius: 999px;
}
.oiarso-boton--secundario {
	border-color: var(--oiarso-borde-fuerte);
	color: var(--oiarso-texto);
}
.oiarso-boton--secundario:hover {
	background: var(--oiarso-fondo-suave);
	border-color: var(--oiarso-marino);
	color: var(--oiarso-texto);
}
.oiarso-interruptor-boton {
	border-radius: 999px;
}
.oiarso-llamadas__tabla .oiarso-tabla__numero {
	white-space: nowrap;
}
.oiarso-llamadas__tabla td[data-etiqueta="Resultado"] {
	min-width: 170px;
}
.oiarso-llamadas__tabla td[data-etiqueta="Duración"] {
	white-space: nowrap;
}

/* Configuración: cada tarjeta resume lo que hay y abre su formulario en una ventana */
.oiarso-ajuste__datos {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 20px;
}
.oiarso-ajuste__datos--ancha {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.oiarso-ajuste__datos dt {
	font-size: 12px;
	font-weight: 500;
	color: var(--oiarso-texto-suave);
}
.oiarso-ajuste__datos dd {
	margin: 2px 0 0;
	font-size: 15px;
	font-weight: 500;
	overflow-wrap: anywhere;
}
.oiarso-ajuste__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}
.oiarso-ajuste__acciones form {
	display: contents;
}
.oiarso-dialogo {
	box-sizing: border-box;
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #FFFFFF;
	color: #1A1A2E;
	box-shadow: 0 24px 64px rgba(25, 19, 59, 0.28);
	overflow: auto;
}
.oiarso-dialogo::backdrop {
	background: rgba(25, 19, 59, 0.45);
}
.oiarso-dialogo form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px;
	font-family: Inter, system-ui, sans-serif;
}
.oiarso-dialogo h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}
.oiarso-dialogo .oiarso-campo label,
.oiarso-dialogo .oiarso-campo__etiqueta {
	font-size: 14px;
	font-weight: 500;
}
.oiarso-dialogo .oiarso-campo input,
.oiarso-dialogo .oiarso-campo textarea {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #C9C9D3;
	border-radius: 10px;
	font: inherit;
	font-size: 15px;
	color: #1A1A2E;
}
.oiarso-dialogo .oiarso-campo input {
	height: 44px;
	padding: 0 14px;
}
.oiarso-dialogo .oiarso-campo textarea {
	min-height: 72px;
	padding: 11px 14px;
}
.oiarso-dialogo .oiarso-campo input:focus,
.oiarso-dialogo .oiarso-campo textarea:focus {
	outline: none;
	border-color: var(--oiarso-azul);
	box-shadow: 0 0 0 3px rgba(36, 36, 36, 0.16);
}
.oiarso-dialogo__dos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.oiarso-dialogo__botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 6px;
}
.oiarso-dialogo .oiarso-boton {
	align-self: auto;
}

/* El enlace «← Volver» con aspecto de botón secundario */
.oiarso-volver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--oiarso-borde-fuerte);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--oiarso-texto);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.oiarso-volver:hover {
	background: var(--oiarso-fondo-suave);
	border-color: var(--oiarso-marino);
	color: var(--oiarso-texto);
}
@container (max-width: 608px) {
	.oiarso-ajuste__datos,
	.oiarso-ajuste__datos--ancha {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 782px) {
	.oiarso-dialogo form {
		padding: 22px 18px;
	}
	.oiarso-dialogo__dos {
		grid-template-columns: minmax(0, 1fr);
	}
	.oiarso-dialogo__botones .oiarso-boton {
		flex: 1 1 140px;
	}
}

/* Menú del móvil: hamburguesa, velo y cajón (inc/panel.php + assets/js/menu.js). En el ordenador no se ven:
   el cajón es transparente (display: contents) y el menú queda en la columna lateral de siempre. */
.oiarso-panel__hamburguesa {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
	cursor: pointer;
}
.oiarso-panel__hamburguesa:hover {
	background: rgba(255, 255, 255, 0.12);
}
.oiarso-panel__hamburguesa:focus-visible,
.oiarso-panel__cerrar:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}
.oiarso-panel__hamburguesa .oiarso-panel__contador {
	position: absolute;
	top: -7px;
	right: -7px;
}
.oiarso-panel__velo {
	display: block;
	position: fixed;
	inset: 0;
	background: rgba(25, 19, 59, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease;
	z-index: 100000;
}
.oiarso-panel__lateral.is-abierto .oiarso-panel__velo {
	opacity: 1;
	pointer-events: auto;
}
.oiarso-panel__cajon-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 14px;
}
.oiarso-panel__cajon-titulo {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}
.oiarso-panel__cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #FFFFFF;
	cursor: pointer;
}
.oiarso-panel__cerrar:hover {
	background: rgba(255, 255, 255, 0.08);
}
body.oiarso-menu-abierto {
	overflow: hidden;
}
@media (min-width: 601px) and (max-width: 782px) {
	/* En la tableta la barra de WordPress (si se ve) es fija: la barra del panel se pega debajo de ella */
	.oiarso-panel__lateral {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.oiarso-panel__cajon,
	.oiarso-panel__velo {
		transition: none;
	}
}

/* En el ordenador (y al final de la hoja para que mande sobre lo de arriba): sin hamburguesa, velo ni cabecera del cajón */
@media (min-width: 783px) {
	.oiarso-panel__cajon {
		display: contents;
	}
	.oiarso-panel__hamburguesa,
	.oiarso-panel__velo,
	.oiarso-panel__cajon-cabecera {
		display: none;
	}
}

@media (max-width: 782px) {
	/* Con el cajón abierto, el menú queda por encima de todo (también de la barra flotante del Chat IA, que se esconde) */
	.oiarso-panel__lateral.is-abierto {
		z-index: 100000;
	}
	body.oiarso-menu-abierto .oiarso-asistente__barra,
	body.oiarso-menu-abierto .oiarso-asistente__panel {
		visibility: hidden;
	}
}

/* Buscadores en ventana (oiarso_buscador en inc/panel.php): fuera queda el botón y, si hay búsqueda, qué se busca */
.oiarso-busqueda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}
.oiarso-busqueda__abrir {
	gap: 8px;
}
.oiarso-busqueda__actual {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--oiarso-borde);
	border-radius: 999px;
	background: #FFFFFF;
	font-size: 14px;
	font-weight: 500;
	overflow-wrap: anywhere;
}
.oiarso-busqueda__etiqueta {
	color: var(--oiarso-texto-suave);
	font-weight: 400;
}
.oiarso-dialogo .oiarso-buscador__filtros {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.oiarso-dialogo .oiarso-campo select {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #C9C9D3;
	border-radius: 10px;
	background: #FFFFFF;
	font: inherit;
	font-size: 15px;
	color: #1A1A2E;
}
.oiarso-dialogo .oiarso-campo select:focus {
	outline: none;
	border-color: var(--oiarso-azul);
	box-shadow: 0 0 0 3px rgba(36, 36, 36, 0.16);
}
.oiarso-dialogo .oiarso-casilla {
	align-self: end;
	min-height: 44px;
}
@media (max-width: 782px) {
	.oiarso-dialogo .oiarso-buscador__filtros {
		grid-template-columns: minmax(0, 1fr);
	}
	.oiarso-busqueda__abrir {
		flex: 1 1 100%;
	}
}

/* Detalle de una notificación de WhatsApp: cabecera con la anomalía, apartados separados, datos rápidos como
   píldoras (el resto plegado), botones como en las ventanas y la vista previa pegada al bajar (en pantallas
   estrechas, en una ventana con «Ver cómo llega») */
.oiarso-notificacion__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.oiarso-notificacion__sobre {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oiarso-texto-suave);
}
.oiarso-notificacion__cabecera h2 {
	font-size: 22px;
}
.oiarso-vista__abrir {
	display: none;
}
.oiarso-apartado {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--oiarso-borde);
}
.oiarso-apartado h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}
.oiarso-formato__boton {
	min-width: 40px;
	min-height: 36px;
	border: 1px solid var(--oiarso-borde-fuerte);
	border-radius: 8px;
}
.oiarso-formato__boton:hover {
	border-color: var(--oiarso-marino);
	background: var(--oiarso-fondo-suave);
}
.oiarso-notificacion__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.oiarso-vista {
	position: sticky;
	top: 24px;
}
.oiarso-dialogo__cerrar {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--oiarso-texto, #1A1A2E);
	cursor: pointer;
}
.oiarso-dialogo__cerrar:hover {
	background: #F4F4F6;
}
.oiarso-dialogo--vista .oiarso-vista {
	position: static;
	border: 0;
	box-shadow: none;
	display: flex;
}
.oiarso-dialogo--vista form {
	padding: 0;
	gap: 14px;
}
.oiarso-dialogo--vista .oiarso-prueba .oiarso-campo input {
	height: 44px;
}
/* Contenido estrecho (una sola columna): la vista previa solo en la ventana */
@container (max-width: 824px) {
	.oiarso-vista__abrir {
		display: inline-flex;
	}
	.oiarso-notificacion-rejilla > .oiarso-vista {
		display: none;
	}
}

/* Anomalías: los tipos a partir del séptimo quedan plegados; «Sin aviso» en gris; en el móvil cada anomalía es
   una tarjeta a dos columnas (envío y cliente · destinatario · anomalía y estado · WhatsApp) */
.oiarso-anomalias__tipos.is-plegado .oiarso-anomalias__tipo--mas {
	display: none;
}
.oiarso-anomalias__mas {
	border-style: dashed;
	color: var(--oiarso-azul);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.oiarso-anomalias__mas:hover {
	border-color: var(--oiarso-azul);
}
.oiarso-tabla__sin {
	color: var(--oiarso-texto-suave);
}
@container (max-width: 608px) {
	.oiarso-anomalias__tabla tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-auto-flow: row dense;
		gap: 2px 12px;
		align-items: start;
	}
	.oiarso-anomalias__tabla td {
		padding: 4px 0;
		min-width: 0;
	}
	.oiarso-anomalias__tabla td[data-etiqueta="Envío"]::before,
	.oiarso-anomalias__tabla td[data-etiqueta="Anomalía"]::before {
		display: none;
	}
	.oiarso-anomalias__tabla td[data-etiqueta="Destinatario"],
	.oiarso-anomalias__tabla td[data-etiqueta="WhatsApp"] {
		grid-column: 1 / -1;
	}
}

/* Botón de acción dentro de las filas de todas las tablas («Ver», «Editar mensaje»…): pequeño y secundario; en el
   móvil ocupa el ancho de la tarjeta */
.oiarso-boton--fila {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--oiarso-borde-fuerte);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--oiarso-texto);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
}
.oiarso-boton--fila:hover,
.oiarso-boton--fila:focus-visible {
	border-color: var(--oiarso-marino);
	background: var(--oiarso-fondo-suave);
	color: var(--oiarso-texto);
}
.oiarso-tabla td[data-etiqueta=""] {
	text-align: right;
	white-space: nowrap;
}
@container (max-width: 608px) {
	.oiarso-tabla td[data-etiqueta=""]::before {
		display: none;
	}
	.oiarso-tabla td[data-etiqueta=""] {
		text-align: left;
		padding-top: 10px;
	}
	.oiarso-tabla td[data-etiqueta=""] .oiarso-boton--fila {
		width: 100%;
		min-height: 40px;
	}
	.oiarso-anomalias__tabla td[data-etiqueta=""] {
		grid-column: 1 / -1;
	}
}

/* Pendientes → «Llamadas por devolver»: dos acciones en la fila (ver la llamada y marcarla devuelta) */
.oiarso-boton--fila {
	font-family: inherit;
	cursor: pointer;
}
.oiarso-boton--fila-ok {
	border-color: var(--oiarso-marino);
	background: var(--oiarso-marino);
	color: #FFFFFF;
}
.oiarso-boton--fila-ok:hover,
.oiarso-boton--fila-ok:focus-visible {
	border-color: var(--oiarso-marino-oscuro);
	background: var(--oiarso-marino-oscuro);
	color: #FFFFFF;
}
.oiarso-tabla__acciones {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}
.oiarso-tabla__acciones form {
	display: contents;
}
@container (max-width: 608px) {
	.oiarso-tabla td[data-etiqueta=""] .oiarso-tabla__acciones {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
}

/* Detalle de una llamada: dos columnas como en la plantilla de WhatsApp, con la transcripción a la derecha, pegada
   al bajar (y con su propio scroll si es larga). En contenido estrecho, debajo. */
.oiarso-llamada {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
	gap: 24px;
	align-items: start;
}
.oiarso-llamada > .oiarso-tarjeta:last-child {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px);
	max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 48px);
}
.oiarso-llamada > .oiarso-tarjeta:last-child .oiarso-conv {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
}
@container (max-width: 824px) {
	.oiarso-llamada {
		grid-template-columns: minmax(0, 1fr);
	}
	.oiarso-llamada > .oiarso-tarjeta:last-child {
		position: static;
		max-height: none;
	}
	.oiarso-llamada > .oiarso-tarjeta:last-child .oiarso-conv {
		max-height: 70vh;
	}
}

/* Menú de acciones de una fila (los tres puntos; inc/panel.php oiarso_menu_fila). En el móvil, las acciones salen como
   botones a todo el ancho y el botón de los puntos no se ve. */
.oiarso-menu-fila {
	position: relative;
	display: inline-block;
}
.oiarso-menu-fila__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--oiarso-borde-fuerte);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--oiarso-texto);
	cursor: pointer;
}
.oiarso-menu-fila__boton:hover,
.oiarso-menu-fila__boton[aria-expanded="true"] {
	border-color: var(--oiarso-marino);
	background: var(--oiarso-fondo-suave);
}
.oiarso-menu-fila__boton:focus-visible {
	outline: 2px solid var(--oiarso-azul);
	outline-offset: 2px;
}
.oiarso-menu-fila__lista {
	position: fixed;
	z-index: 60;
	box-sizing: border-box;
	min-width: 200px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border: 1px solid var(--oiarso-borde);
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 12px 32px rgba(25, 19, 59, 0.16);
	text-align: left;
	white-space: nowrap;
}
.oiarso-menu-fila__lista[hidden] {
	display: none;
}
.oiarso-menu-fila__lista form {
	display: contents;
}
.oiarso-menu-fila__opcion {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--oiarso-texto);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.oiarso-menu-fila__opcion:hover,
.oiarso-menu-fila__opcion:focus-visible {
	background: var(--oiarso-fondo-suave);
	color: var(--oiarso-texto);
	outline: none;
}
@container (max-width: 608px) {
	.oiarso-menu-fila {
		display: block;
	}
	.oiarso-menu-fila__boton {
		display: none;
	}
	.oiarso-menu-fila__lista,
	.oiarso-menu-fila__lista[hidden] {
		position: static;
		display: flex;
		gap: 8px;
		min-width: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		white-space: normal;
	}
	.oiarso-menu-fila__opcion {
		min-height: 40px;
		border: 1px solid var(--oiarso-borde-fuerte);
		text-align: center;
		font-weight: 600;
	}
}

/* En pantallas muy anchas el detalle de la llamada no se estira sin fin: la transcripción se lleva dos quintos
   (mínimo 360 px) y el conjunto no pasa de 1600 px, para que los textos se lean cómodos. */
.oiarso-llamada {
	max-width: 1600px;
	grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
}

/* Transcripción de una llamada con el aspecto de un chat de WhatsApp (reutiliza .oiarso-whatsapp de la vista previa):
   el cliente a la izquierda en blanco, el agente a la derecha en verde, y el chat se desplaza dentro de la tarjeta */
.oiarso-whatsapp--llamada {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__avatar {
	background: #25D366;
	color: #FFFFFF;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__burbuja {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 85%;
	padding: 6px 9px 5px;
	background: #FFFFFF;
	border-radius: 0 10px 10px 10px;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__burbuja::before {
	border-right-color: #FFFFFF;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__burbuja--salida {
	align-self: flex-end;
	background: #D9FDD3;
	border-radius: 10px 0 10px 10px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__burbuja--salida::before {
	left: auto;
	right: -8px;
	border-right: 0;
	border-left: 8px solid #D9FDD3;
}
.oiarso-whatsapp__quien {
	font-size: 12px;
	font-weight: 600;
	color: #008069;
}
.oiarso-whatsapp__burbuja--salida .oiarso-whatsapp__quien {
	color: var(--oiarso-azul);
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__texto {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	line-height: 1.45;
}
@container (max-width: 824px) {
	/* Contenido estrecho: el detalle de la llamada vuelve a una sola columna (manda sobre la regla de arriba). */
	.oiarso-llamada {
		max-width: none;
		grid-template-columns: minmax(0, 1fr);
	}
}

/* El chat de la transcripción, más compacto: letra y burbujas más pequeñas, menos aire */
.oiarso-whatsapp--llamada .oiarso-whatsapp__cabecera {
	gap: 8px;
	padding: 8px 12px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__avatar {
	width: 30px;
	height: 30px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__avatar .oiarso-icono {
	width: 16px;
	height: 16px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__nombre {
	font-size: 14px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__numero {
	font-size: 11px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__dia {
	padding: 2px 8px;
	font-size: 11px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__burbuja {
	gap: 1px;
	max-width: 88%;
	padding: 4px 8px 3px;
	font-size: 13px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__quien {
	font-size: 11px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__texto {
	line-height: 1.35;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__hora {
	margin-top: 0;
	font-size: 10px;
}

/* El chat de la transcripción, más pequeño de verdad: columna más estrecha (un tercio), caja de alto limitado con su
   scroll, letra a 12 px */
.oiarso-llamada {
	grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__burbuja {
	max-width: 90%;
	padding: 3px 7px 2px;
	font-size: 12px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__quien {
	font-size: 10px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__hora {
	font-size: 9px;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__chat {
	gap: 5px;
	padding: 10px 12px 12px;
}
@container (max-width: 824px) {
	.oiarso-llamada {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Submenú plegable del menú (Anomalías → Notificaciones WhatsApp): la flecha lo abre y lo cierra; viene abierto
   cuando se está dentro */
.oiarso-panel__padre {
	display: flex;
	align-items: center;
	gap: 2px;
}
.oiarso-panel__padre > a {
	flex: 1 1 auto;
	min-width: 0;
}
.oiarso-panel__desplegar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
}
.oiarso-panel__desplegar:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
}
.oiarso-panel__desplegar:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}
.oiarso-panel__desplegar .oiarso-icono {
	width: 18px;
	height: 18px;
	transition: transform 0.15s ease;
}
.oiarso-panel__con-submenu.is-desplegado .oiarso-panel__desplegar .oiarso-icono {
	transform: rotate(180deg);
}
.oiarso-panel__con-submenu:not(.is-desplegado) .oiarso-panel__submenu {
	display: none;
}

/* Inicio: gráficos de barras (una fila por categoría; barra fina, redondeada solo en la punta; el número al lado) */
.oiarso-graficos {
	align-items: start;
}
.oiarso-grafico {
	gap: 14px;
}
.oiarso-grafico__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}
.oiarso-grafico__nota {
	font-size: 13px;
	color: var(--oiarso-texto-suave);
}
.oiarso-grafico__vacio {
	margin: 0;
	color: var(--oiarso-texto-suave);
}
.oiarso-barras {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.oiarso-barras__fila {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto;
	grid-auto-flow: row dense;
	align-items: center;
	gap: 6px 10px;
	font-size: 14px;
}
.oiarso-barras__etiqueta {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.oiarso-barras__pista {
	position: relative;
	display: block;
	height: 12px;
	border-radius: 0 4px 4px 0;
	background: var(--oiarso-fondo);
}
.oiarso-barras__barra {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	min-width: 3px;
	border-radius: 0 4px 4px 0;
	background: #2F2F2F;
	transition: background 0.15s ease;
}
.oiarso-barras__fila:hover .oiarso-barras__barra {
	background: #1A1A1A;
}
.oiarso-barras__valor {
	min-width: 2.5em;
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
@container (max-width: 608px) {
	/* En el móvil: nombre y número en una línea, la barra debajo a todo el ancho */
	.oiarso-barras__fila {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.oiarso-barras__pista {
		grid-column: 1 / -1;
	}
}

/* El logo de MRW encima del nombre, en el menú y en la pantalla de entrada */
.oiarso-panel__logo {
	display: block;
	width: 92px;
	height: auto;
	margin-bottom: 8px;
}
.oiarso-acceso__logo {
	display: block;
	width: 118px;
	height: auto;
	margin-bottom: 12px;
}
@media (max-width: 782px) {
	.oiarso-panel__marca {
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}
	.oiarso-panel__logo {
		width: 66px;
		margin-bottom: 0;
	}
	.oiarso-panel__marca > span {
		display: block;
	}
}
@media (max-width: 782px) {
	/* En la barra del móvil: el logo y el nombre en una línea; «Franquicia MRW» no cabe */
	.oiarso-panel__marca {
		min-width: 0;
	}
	.oiarso-panel__empresa {
		font-size: 17px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.oiarso-panel__franquicia {
		display: none;
	}
}
@media (max-width: 782px) {
	.oiarso-panel__marca > .oiarso-panel__franquicia {
		display: none;
	}
}

/* Pendientes de resolver: el bloque de llamadas por devolver debajo de las gestiones */
.oiarso-pendientes__subtitulo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
	font-size: 18px;
	font-weight: 700;
}

/* Llamadas: los dos botones de la barra; Agente: el texto de las instrucciones y la ventana ancha para editarlas */
.oiarso-llamadas__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.oiarso-llamadas__acciones form {
	display: contents;
}
.oiarso-agente__prompt {
	margin: 0;
	max-height: 260px;
	overflow: auto;
	padding: 14px 16px;
	border: 1px solid var(--oiarso-borde);
	border-radius: var(--oiarso-radio-chico);
	background: var(--oiarso-fondo-suave);
	font: inherit;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.oiarso-ajuste__datos .oiarso-ajuste__ancho {
	grid-column: 1 / -1;
}
.oiarso-dialogo--ancho {
	width: min(900px, calc(100vw - 32px));
}
.oiarso-dialogo .oiarso-campo textarea#oiarso-agente-prompt {
	font-size: 14px;
	line-height: 1.5;
}

/* Agente → Voz: el botón de escuchar la muestra */
.oiarso-agente__escuchar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

/* Configuración → Crear el agente: lo que se crea en ElevenLabs, como pasos */
.oiarso-pasos {
	margin: 0 0 14px;
	padding-left: 22px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--oiarso-texto-suave, #5c6370);
}
.oiarso-pasos li + li {
	margin-top: 4px;
}

/* Llamadas → Agente: la lista de agentes de la cuenta y el botón de crear */
.oiarso-agentes__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 12px 0 26px;
}
.oiarso-agentes__acciones .oiarso-nota {
	margin: 0;
	flex: 1 1 320px;
}
.oiarso-agentes__tabla tr.is-elegido td {
	background: var(--oiarso-fondo-suave);
}
.oiarso-grupo__nota {
	font-weight: 400;
	font-size: 14px;
	color: var(--oiarso-texto-suave);
}

/* Crear un agente: idioma y voz arriba alineados aunque la voz lleve el botón de escuchar debajo */
#dialogo-agente-nuevo .oiarso-dialogo__dos {
	align-items: start;
}

/* Llamadas → Agente → Probar el agente: controles, estado y el chat de la conversación de prueba */
.oiarso-prueba__controles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 4px 0 14px;
}
.oiarso-prueba__estado {
	flex: 1 1 200px;
	font-size: 14px;
	color: var(--oiarso-texto-suave);
}
.oiarso-prueba__estado.is-mal {
	color: var(--oiarso-rojo);
}
.oiarso-prueba__conversacion {
	max-width: 760px;
}
/* La caja de escribir de las conversaciones (simulador de WhatsApp y prueba del agente de voz): el mismo campo y el
   mismo fondo que el resto de formularios del panel. */
.oiarso-prueba__escribir {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid var(--oiarso-borde);
	background: #FFFFFF;
}
.oiarso-prueba__escribir input {
	flex: 1 1 180px;
	box-sizing: border-box;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--oiarso-borde-fuerte);
	border-radius: 10px;
	font: inherit;
	font-size: 15px;
	color: var(--oiarso-texto);
	background: #FFFFFF;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.oiarso-prueba__escribir input:focus {
	outline: none;
	border-color: var(--oiarso-azul);
	box-shadow: var(--oiarso-foco);
}
.oiarso-prueba__escribir input:disabled {
	background: var(--oiarso-fondo);
	color: var(--oiarso-texto-suave);
}
.oiarso-prueba__escribir .oiarso-boton {
	flex: 1 1 auto;
	min-height: 44px;
}
/* En la columna estrecha del simulador (20 %), el botón «Enviar» baja debajo del campo y los dos van a todo el ancho. */

/* Llamadas → Agente → Herramientas */
.oiarso-herramientas__url {
	word-break: break-all;
}
.oiarso-herramientas__tabla td[data-etiqueta="En este agente"] .oiarso-interruptor-form {
	margin: 0;
}
.oiarso-campo--casilla {
	justify-content: flex-end;
}
.oiarso-campo--casilla label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* Probar el agente: lo oculto con el atributo hidden se oculta aunque el botón o el chat tengan su display propio */
.oiarso-prueba [hidden] {
	display: none !important;
}

/* Agente → Instrucciones por apartados */
.oiarso-apartados {
	display: grid;
	gap: 12px;
	margin: 4px 0 14px;
}
.oiarso-apartados__item {
	padding: 12px 14px;
	border: 1px solid var(--oiarso-borde);
	border-radius: 12px;
	background: #FFFFFF;
}
.oiarso-apartados__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 10px;
	margin-bottom: 6px;
}
.oiarso-apartados__titulo {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}
.oiarso-apartados__cabecera .oiarso-menu-fila__lista {
	flex-wrap: wrap;
}
.oiarso-apartados__texto {
	margin: 0;
}

/* En pantallas estrechas, las acciones de un apartado van debajo del título, en dos columnas */
@container (max-width: 608px) {
	.oiarso-apartados__cabecera {
		flex-direction: column;
		align-items: stretch;
	}
	.oiarso-apartados__cabecera .oiarso-menu-fila__lista {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Llamadas → Agentes → ficha de un agente: cabecera y pestañas */
.oiarso-ficha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 14px;
}
.oiarso-ficha__nombre {
	margin: 0 0 2px;
	font-size: 22px;
	line-height: 1.2;
}
.oiarso-ficha__estado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 8px;
}
.oiarso-ficha__acciones {
	margin: 0;
}
.oiarso-pestanas {
	display: flex;
	gap: 4px;
	margin: 0 0 18px;
	border-bottom: 1px solid var(--oiarso-borde);
	overflow-x: auto;
	scrollbar-width: thin;
}
.oiarso-pestanas [role="tab"] {
	flex: 0 0 auto;
	padding: 10px 14px;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	background: transparent;
	color: var(--oiarso-texto-suave);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.oiarso-pestanas [role="tab"]:hover {
	color: var(--oiarso-texto);
}
.oiarso-pestanas [role="tab"][aria-selected="true"] {
	color: var(--oiarso-azul);
	border-bottom-color: var(--oiarso-azul);
}
.oiarso-pestanas [role="tab"]:focus-visible {
	outline: 2px solid var(--oiarso-azul);
	outline-offset: -2px;
	border-radius: 6px;
}
.oiarso-pestana[hidden] {
	display: none;
}

/* La cabecera de la ficha ocupa el ancho: el nombre a la izquierda, el botón a la derecha */
.oiarso-ficha__quien {
	flex: 1 1 320px;
	min-width: 0;
}
.oiarso-ficha {
	flex-direction: row;
}

/* Agentes → Voz → Buscar una voz */
.oiarso-voces__fila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px 14px;
}
.oiarso-voces__botones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 12px 0 0;
}
.oiarso-voces__estado {
	font-size: 14px;
	color: var(--oiarso-texto-suave);
}
.oiarso-voces__lista {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
	max-height: 46vh;
	overflow: auto;
}
.oiarso-voces__voz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	padding: 10px 12px;
	border: 1px solid var(--oiarso-borde);
	border-radius: 10px;
}
.oiarso-voces__info {
	display: flex;
	flex: 1 1 260px;
	flex-direction: column;
	min-width: 0;
}
.oiarso-voces__acciones {
	display: flex;
	gap: 8px;
}

/* El buscador de voces cabe en pantalla: la lista se desplaza dentro y la ventana nunca supera la altura */
#dialogo-agente-voces {
	max-height: calc(100vh - 32px);
	overflow: auto;
}
#dialogo-agente-voces .oiarso-voces__lista {
	max-height: min(34vh, 420px);
}

/* Ventanas sin formulario envolvente (buscador de voces, texto que se manda): el relleno va en la propia ventana */
#dialogo-agente-voces {
	padding: 28px;
}
#dialogo-agente-voces form {
	padding: 0;
}
#dialogo-agente-voces > .oiarso-nota {
	margin-bottom: 14px;
}

/* Fichas (agente de voz y asistente): los botones de cada tarjeta van arriba a la derecha, en la línea del título; lo
   demás, debajo a todo el ancho. */
.oiarso-pestana .oiarso-ajuste {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 12px;
}
.oiarso-pestana .oiarso-ajuste > * {
	grid-column: 1 / -1;
	min-width: 0;
}
.oiarso-pestana .oiarso-ajuste > h2 {
	grid-column: 1;
	grid-row: 1;
}
.oiarso-pestana .oiarso-ajuste > .oiarso-ajuste__acciones {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	margin: 0;
	padding: 0;
	border: 0;
}
/* Las pestañas como botones en una barra, con la elegida resaltada */
.oiarso-pestanas {
	gap: 6px;
	padding: 6px;
	border: 1px solid var(--oiarso-borde);
	border-radius: 12px;
	background: var(--oiarso-fondo-suave);
}
.oiarso-pestanas [role="tab"] {
	padding: 9px 14px;
	margin-bottom: 0;
	border-bottom: 0;
	border-radius: 8px;
}
.oiarso-pestanas [role="tab"][aria-selected="true"] {
	background: #FFFFFF;
	color: var(--oiarso-texto);
	box-shadow: 0 1px 3px rgba(25, 19, 59, 0.14);
}

/* Filas de dos columnas en las ventanas: las etiquetas y los campos alineados arriba, aunque una columna lleve ayuda debajo */
.oiarso-dialogo__dos {
	align-items: start;
}

/* Anomalías: el enlace al diccionario de tipos, como un chip más pero discreto */
.oiarso-anomalias__diccionario {
	color: var(--oiarso-azul);
	border-style: dashed;
}

/* Tipos de anomalía: un nombre sin espacios (el tipo internacional) no ensancha la pantalla del móvil */
.oiarso-tipos__tabla strong,
.oiarso-tipos__tabla h2 {
	overflow-wrap: anywhere;
}
.oiarso-dialogo h2 {
	overflow-wrap: anywhere;
}

/* Menú por bloques (Trabajo · Asistentes · Ajustes) */
.oiarso-panel__bloque {
	margin: 14px 0 4px;
	padding: 0 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}
.oiarso-panel__menu > ul > li.oiarso-panel__bloque:first-child {
	margin-top: 0;
}
/* Buscador rápido de envíos, encima del menú */
.oiarso-panel__buscar {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 2px;
	padding-left: 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
}
.oiarso-panel__buscar:focus-within {
	background: rgba(255, 255, 255, 0.16);
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 1px;
}
.oiarso-panel__buscar input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 0;
	border: 0;
	background: transparent;
	color: #FFFFFF;
	font: inherit;
	font-size: 14px;
}
.oiarso-panel__buscar input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}
.oiarso-panel__buscar input:focus {
	outline: none;
	box-shadow: none;
}
.oiarso-panel__buscar input::-webkit-search-cancel-button {
	filter: invert(1);
}
.oiarso-panel__buscar button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 0 10px 10px 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
}
.oiarso-panel__buscar button:hover,
.oiarso-panel__buscar button:focus-visible {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.1);
	outline: none;
}
/* Barra inferior del móvil */
.oiarso-barra {
	display: none;
}
@media (max-width: 782px) {
	.oiarso-barra {
		position: fixed;
		z-index: 45;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		height: 62px;
		padding-bottom: env(safe-area-inset-bottom);
		background: #FFFFFF;
		border-top: 1px solid var(--oiarso-borde);
		box-shadow: 0 -4px 16px rgba(25, 19, 59, 0.06);
	}
	.oiarso-barra__item {
		position: relative;
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--oiarso-texto-suave);
		font: inherit;
		font-size: 11px;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;
	}
	.oiarso-barra__item .oiarso-icono {
		width: 22px;
		height: 22px;
	}
	.oiarso-barra__item.is-actual {
		color: var(--oiarso-rojo);
	}
	.oiarso-barra__item .oiarso-panel__contador {
		position: absolute;
		top: 5px;
		left: calc(50% + 4px);
	}
	.oiarso-panel__contenido {
		padding-bottom: 90px;
	}
	.oiarso-panel:has(.oiarso-asistente) .oiarso-panel__contenido {
		padding-bottom: 160px;
	}
	.oiarso-asistente__barra {
		bottom: 76px;
	}
	body.oiarso-menu-abierto .oiarso-barra {
		display: none;
	}
}

/* El buscador de encima de cada tabla, igual en todas (estilo Shopify) */
.oiarso-busqueda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0 0 14px;
}
.oiarso-busqueda__campo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 280px;
	max-width: 520px;
	min-height: 42px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid var(--oiarso-borde-fuerte);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--oiarso-texto-suave);
	cursor: text;
}
.oiarso-busqueda__campo:focus-within {
	border-color: var(--oiarso-azul);
	box-shadow: 0 0 0 3px rgba(61, 75, 208, 0.15);
}
.oiarso-busqueda__campo input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--oiarso-texto);
	font: inherit;
	font-size: 15px;
}
.oiarso-busqueda__campo input:focus {
	outline: none;
}
.oiarso-busqueda__filtros {
	gap: 8px;
}
button.oiarso-por-pagina__opcion,
button.oiarso-paginas__boton,
button.oiarso-paginas__numero {
	font: inherit;
	cursor: pointer;
}
@media (max-width: 600px) {
	.oiarso-busqueda__campo {
		max-width: none;
	}
}

/* Tablas más compactas en el ordenador: 10 filas tienen que caber en la vista */
@media (min-width: 783px) {
	.oiarso-tabla {
		font-size: 13px;
	}
	.oiarso-tabla th {
		padding: 8px 12px;
		font-size: 11px;
	}
	.oiarso-tabla td {
		padding: 7px 12px;
		line-height: 1.35;
	}
	.oiarso-tabla__dato {
		margin-top: 1px;
		font-size: 12px;
	}
	.oiarso-tabla .oiarso-estado {
		padding: 2px 9px;
		font-size: 12px;
		line-height: 1.35;
	}
	.oiarso-tabla .oiarso-boton--fila {
		min-height: 28px;
		padding: 0 10px;
		font-size: 12px;
	}
	.oiarso-tabla .oiarso-menu-fila__boton {
		width: 30px;
		height: 28px;
	}
	.oiarso-tabla .oiarso-interruptor-boton {
		min-height: 28px;
		font-size: 12px;
	}
	.oiarso-busqueda {
		margin-bottom: 10px;
	}
	.oiarso-busqueda__campo {
		min-height: 38px;
	}
	.oiarso-busqueda__campo input {
		min-height: 36px;
		font-size: 14px;
	}
	.oiarso-tabla-resumen {
		margin-bottom: 8px;
	}
	.oiarso-por-pagina__opcion {
		min-width: 34px;
		min-height: 30px;
	}
	.oiarso-paginas {
		margin-top: 10px;
	}
}

/* Más compacto todavía en el ordenador: celdas más bajas, textos largos a dos líneas y menos aire encima de la tabla */
@media (min-width: 783px) {
	.oiarso-tabla td {
		padding: 5px 12px;
		line-height: 1.3;
	}
	.oiarso-tabla__dato {
		font-size: 11.5px;
	}
	.oiarso-tabla__mensaje {
		max-width: 480px;
		font-size: 13px;
		line-height: 1.35;
	}
	.oiarso-tabla__texto {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.oiarso-anomalias__tabla td[data-etiqueta="Anomalía"] .oiarso-tabla__dato,
	.oiarso-tabla td[data-etiqueta="Estado"] .oiarso-tabla__dato {
		white-space: nowrap;
	}
	.oiarso-panel__descripcion {
		font-size: 14px;
		line-height: 1.4;
	}
	.oiarso-estado-api {
		padding: 7px 12px;
		font-size: 13px;
	}
	.oiarso-nota {
		font-size: 13.5px;
		line-height: 1.45;
	}
}

/* Menos aire entre bloques en el ordenador, para que las tablas empiecen más arriba */
@media (min-width: 783px) {
	.oiarso-panel__contenido {
		gap: 16px;
		padding-top: 28px;
	}
}

/* Anchos de columna para que las filas no se partan en tres líneas; botón extra a la derecha del buscador */
.oiarso-busqueda__extra {
	margin-left: auto;
}
@media (min-width: 783px) {
	.oiarso-tabla td[data-etiqueta="Envío"] .oiarso-tabla__dato,
	.oiarso-tabla td[data-etiqueta="Llamada"] .oiarso-tabla__dato {
		white-space: nowrap;
	}
	.oiarso-anomalias__tabla td[data-etiqueta="Destinatario"] {
		min-width: 230px;
	}
	.oiarso-anomalias__tabla td[data-etiqueta="Anomalía"] .oiarso-tabla__dato {
		white-space: normal;
	}
	.oiarso-anomalias__tabla td[data-etiqueta="Cliente"] {
		max-width: 180px;
	}
}

/* Pendientes: la columna «Tipo» de la tabla única */
.oiarso-tipo {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
}
.oiarso-tipo--whatsapp {
	background: #E3F5EA;
	color: #1A6B3C;
}
.oiarso-tipo--llamada {
	background: #ECECEC;
	color: #242424;
}
.oiarso-tipo--persona {
	background: #FFF1DB;
	color: #8A5300;
}
.oiarso-tipo--prueba {
	background: #EEE7FB;
	color: #4B2A8A;
}
.oiarso-pendientes__tabla td[data-etiqueta="Asunto"] .oiarso-tabla__dato .oiarso-estado,
.oiarso-pendientes__tabla td[data-etiqueta="Asunto"] .oiarso-tabla__dato .oiarso-anomalia-etiqueta {
	margin-top: 2px;
}

/* Pendientes: la columna Asunto con sitio para el chip de la anomalía */
@media (min-width: 783px) {
	.oiarso-pendientes__tabla td[data-etiqueta="Asunto"] {
		min-width: 230px;
	}
	.oiarso-pendientes__tabla td[data-etiqueta="Quién"] {
		min-width: 150px;
	}
}

/* Detalles de conversación y de llamada: compactos y a dos columnas (el chat a la derecha, pegado al bajar) */
.oiarso-pendiente.oiarso-detalle {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	gap: 20px;
	align-items: start;
	max-width: 1600px;
}
.oiarso-detalle__principal {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.oiarso-detalle__lateral {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px);
	max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 48px);
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.oiarso-detalle__lateral .oiarso-whatsapp--llamada {
	flex: 1 1 auto;
}
.oiarso-whatsapp__sistema {
	max-width: 85%;
	white-space: normal;
	text-align: center;
	opacity: 0.85;
}
.oiarso-detalle .oiarso-tarjeta {
	padding: 18px 20px;
	gap: 10px;
}
.oiarso-detalle .oiarso-tarjeta > h2,
.oiarso-detalle .oiarso-pendiente__cabecera h2,
.oiarso-detalle .oiarso-llamada__cabecera h2 {
	font-size: 19px;
}
.oiarso-detalle .oiarso-pendiente__resumen,
.oiarso-detalle .oiarso-atencion {
	padding: 10px 12px;
}
.oiarso-detalle .oiarso-pendiente__resumen p,
.oiarso-detalle .oiarso-atencion__texto {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.45;
}
.oiarso-detalle .oiarso-pendiente__acciones {
	gap: 8px;
}
.oiarso-detalle .oiarso-gestion {
	padding: 10px 12px;
	gap: 6px;
}
.oiarso-detalle .oiarso-gestion__tabla th,
.oiarso-detalle .oiarso-gestion__tabla td {
	padding: 4px 8px;
	font-size: 13px;
	line-height: 1.35;
}
.oiarso-detalle .oiarso-nota {
	font-size: 13px;
}
.oiarso-detalle .oiarso-llamada__audio {
	margin-top: 4px;
}
@container (max-width: 824px) {
	.oiarso-pendiente.oiarso-detalle {
		grid-template-columns: minmax(0, 1fr);
		max-width: none;
	}
	.oiarso-detalle__lateral {
		position: static;
		max-height: none;
	}
}

/* Detalles con secciones (Resolver arriba, Resumen, Datos recogidos, Audio; Transcripción y chat a la derecha) */
.oiarso-detalle__lateral {
	overflow-y: auto;
}
.oiarso-detalle__bloque {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.oiarso-detalle__bloque + .oiarso-detalle__bloque {
	margin-top: 10px;
}
.oiarso-detalle__enlace {
	align-self: flex-end;
}
.oiarso-detalle .oiarso-pendiente__resumen,
.oiarso-detalle .oiarso-atencion,
.oiarso-detalle .oiarso-pendiente__telefono {
	margin: 0;
}
.oiarso-detalle .oiarso-pendiente__acciones {
	margin-top: 2px;
}
.oiarso-detalle .oiarso-tarjeta > h2 {
	margin: 0;
}
.oiarso-detalle .oiarso-gestion__tabla {
	margin: 0;
}
.oiarso-detalle .oiarso-llamada__audio {
	max-width: none;
}

/* Barra de arriba de los detalles: «Volver» a la izquierda y los botones (Resolver, Responder…) a la derecha, fuera
   de las tarjetas. En móvil, los botones pasan debajo del enlace. */
.oiarso-detalle__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
}
.oiarso-detalle__barra .oiarso-volver {
	margin: 0;
}
.oiarso-detalle__barra .oiarso-pendiente__acciones {
	margin: 0 0 0 auto;
}

/* Barra de arriba de una sección (WhatsApp, Agentes de voz): el botón «Probar» a la derecha, fuera de las tarjetas */
.oiarso-seccion__barra {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 10px 16px;
}

/* Probar el asistente de WhatsApp: cómo empieza, qué pasaría de verdad y la conversación simulada */
.oiarso-simulador__inicio {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.oiarso-simulador__inicio .oiarso-pendiente__acciones {
	margin: 0;
}
.oiarso-simulador__envio {
	margin: 0;
}
/* «Qué pasaría de verdad»: cada mensaje del cliente es una tarjeta con su número y, debajo, lo que haría el asistente,
   cada cosa con su chip (WhatsApp, Pendientes, Consulta a MRW, Persona). */
.oiarso-simulador__eventos {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14px;
	line-height: 1.45;
}
.oiarso-simulador__evento {
	padding: 12px 14px;
	border: 1px solid var(--oiarso-borde);
	border-radius: 10px;
	background: #FFFFFF;
}
.oiarso-evento__cabecera {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
}
.oiarso-evento__numero {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--oiarso-marino);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
}
.oiarso-evento__dicho {
	font-weight: 600;
	overflow-wrap: anywhere;
}
.oiarso-evento__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.oiarso-evento {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.oiarso-evento__chip {
	flex: 0 0 auto;
	min-width: 96px;
	justify-content: center;
	text-align: center;
}
.oiarso-evento__texto {
	overflow-wrap: anywhere;
}
.oiarso-evento--whatsapp .oiarso-evento__chip {
	background: #E7F6EC;
	color: #0F7A46;
}
.oiarso-evento--pendientes .oiarso-evento__chip {
	background: #FFF4DB;
	color: #8A5A00;
}
.oiarso-evento--consulta .oiarso-evento__chip {
	background: #EFEFEF;
	color: var(--oiarso-azul);
}
.oiarso-evento--persona .oiarso-evento__chip {
	background: #FCE9E7;
	color: #B0140C;
}
.oiarso-evento--otro .oiarso-evento__chip {
	background: var(--oiarso-fondo);
	color: var(--oiarso-texto-suave);
}
.oiarso-simulador .oiarso-prueba__estado {
	display: block;
	min-height: 18px;
}
.oiarso-simulador .oiarso-prueba__conversacion {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* El simulador no es el formulario de prueba de notificaciones: sin su borde de arriba, el chat pegado al título y
   el botón «Enviar» a su ancho */
.oiarso-simulador .oiarso-prueba {
	padding-top: 18px;
	border-top: 0;
	justify-content: flex-start;
}
.oiarso-simulador .oiarso-prueba .oiarso-boton {
	align-self: auto;
}
.oiarso-simulador .oiarso-prueba__conversacion {
	flex: 0 0 auto;
	max-width: none;
	margin: 0;
}

/* El simulador: quién empieza (dos opciones, una por línea) */

/* En el simulador la línea de estado no se estira (en la zona de prueba del agente va en una fila con los botones) */
.oiarso-simulador .oiarso-prueba__estado {
	flex: 0 0 auto;
}

/* Instrucciones del asistente de WhatsApp: el chip «Compartido con el agente de voz» junto al título del apartado */
.oiarso-apartados__titulo + .oiarso-estado {
	margin-right: auto;
}

/* Pendientes: la lista corta (De dónde · Quién · Envío · Desde · Estado); la fila entera lleva al detalle */
.oiarso-pendientes__tabla tr[data-href] {
	cursor: pointer;
}
.oiarso-pendientes__tabla td[data-etiqueta="De dónde"] .oiarso-tabla__dato {
	margin-top: 3px;
}
.oiarso-pendientes__tabla td[data-etiqueta="De dónde"] .oiarso-tipo + .oiarso-tipo {
	margin-left: 4px;
}
@media (min-width: 783px) {
	.oiarso-pendientes__tabla td[data-etiqueta="Quién"] {
		min-width: 180px;
	}
	.oiarso-pendientes__tabla td[data-etiqueta="Envío"] {
		min-width: 140px;
	}
}

/* Pendientes: la referencia del caso (C-12, L-7) en la lista y arriba del detalle */
.oiarso-pendiente__referencia {
	margin: 0 0 2px;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oiarso-texto-suave);
}
.oiarso-pendiente__referencia strong {
	color: var(--oiarso-texto);
}

/* Pendientes: la columna ID (C-12, L-7), la primera */
.oiarso-pendientes__tabla td[data-etiqueta="ID"] {
	white-space: nowrap;
}

/* Detalle de un pendiente: dos columnas 80/20 (lo demás a la izquierda, la transcripción y el chat a la derecha) */
.oiarso-pendiente.oiarso-detalle {
	grid-template-columns: minmax(0, 4fr) minmax(240px, 1fr);
	gap: 16px;
}
@container (max-width: 824px) {
	.oiarso-pendiente.oiarso-detalle {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Detalle de un pendiente: la ficha de la primera tarjeta (Cliente, De dónde, Teléfono, Estado) */
.oiarso-pendiente__ficha th {
	width: 110px;
	white-space: nowrap;
}
.oiarso-pendiente__ficha .oiarso-tipo + .oiarso-tabla__dato,
.oiarso-pendiente__ficha .oiarso-estado + .oiarso-tabla__dato {
	display: inline;
	margin-left: 8px;
}
.oiarso-detalle .oiarso-pendiente__cabecera h2.oiarso-pendiente__referencia {
	margin: 0;
	font-size: 19px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--oiarso-texto);
}

/* Todas las tablas: la fila entera lleva al detalle */
.oiarso-tabla tr[data-href] {
	cursor: pointer;
}
.oiarso-tabla tr[data-href]:hover td {
	background: var(--oiarso-fondo-suave);
}

/* El chat de las transcripciones y detalles (y el del simulador y la prueba del agente), con los colores del tema:
   cabecera marino, fondo gris claro, el cliente en blanco y el asistente en azul suave. La vista previa de las
   notificaciones también lo usa desde 2026-10-22 (el usuario quiso el mismo chat en todas partes). */
.oiarso-whatsapp--llamada {
	border-color: var(--oiarso-borde);
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__cabecera {
	background: var(--oiarso-marino);
	color: #FFFFFF;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__avatar {
	background: rgba(255, 255, 255, 0.16);
	color: #FFFFFF;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__numero {
	color: rgba(255, 255, 255, 0.78);
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__chat {
	background: var(--oiarso-fondo);
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__dia {
	background: #FFFFFF;
	border: 1px solid var(--oiarso-borde);
	color: var(--oiarso-texto-suave);
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__burbuja {
	background: #FFFFFF;
	border: 1px solid var(--oiarso-borde);
	color: var(--oiarso-texto);
	box-shadow: none;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__burbuja::before {
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__burbuja--salida {
	background: #EFEFEF;
	border-color: #DCDCDC;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__burbuja--salida::before {
	border-right-color: #EFEFEF;
	border-left-color: #EFEFEF;
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__quien {
	color: var(--oiarso-texto-suave);
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__burbuja--salida .oiarso-whatsapp__quien {
	color: var(--oiarso-azul);
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__hora {
	color: var(--oiarso-texto-suave);
}
.oiarso-whatsapp--llamada .oiarso-whatsapp__sistema {
	background: #FFFFFF;
	color: var(--oiarso-texto-suave);
}

/* La ventana «Vincular WhatsApp» (sin formulario: el relleno va en su cuerpo) */
#dialogo-wa-vincular .oiarso-dialogo__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 28px;
}
#dialogo-wa-vincular .oiarso-dialogo__cuerpo h2 {
	margin: 0;
}
#dialogo-wa-vincular .oiarso-prueba__estado {
	flex: 0 0 auto;
}
#dialogo-wa-vincular .oiarso-prueba__estado.is-mal {
	color: var(--oiarso-rojo);
}
#dialogo-wa-vincular .oiarso-dialogo__botones {
	flex-wrap: wrap;
}
/* Tabla de anomalías (ficha del asistente): desde cuándo se manda cada aviso, bajo su interruptor. */
.oiarso-notificacion__desde {
	display: block;
	margin-top: 4px;
}
/* Tabla de anomalías: la columna «Anomalía» no se estrecha hasta partir las etiquetas letra a letra. */

/* Detalle de la notificación: el formulario apila sus dos tarjetas (Notificación por WhatsApp y Asistente de WhatsApp). */
.oiarso-notificacion {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}
/* Las variables del mensaje: una ficha por variable con su nombre, su clave y un ejemplo. */
.oiarso-datos {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}
.oiarso-dato {
	gap: 4px;
	padding: 10px 14px;
	border: 1px solid var(--oiarso-borde-fuerte);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--oiarso-texto);
}
.oiarso-dato:hover {
	border-color: var(--oiarso-marino);
	background: var(--oiarso-fondo-suave);
}
.oiarso-dato:focus-visible {
	outline: 2px solid var(--oiarso-azul);
	outline-offset: 2px;
}
.oiarso-dato__nombre {
	font-size: 14px;
	font-weight: 600;
}
.oiarso-dato__clave {
	padding: 1px 7px;
	border-radius: 6px;
	background: #F3F4FD;
	color: var(--oiarso-azul);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 12px;
}
.oiarso-dato__ejemplo {
	font-size: 13px;
	color: var(--oiarso-texto-suave);
}
.oiarso-dato__ejemplo::before {
	content: "Ej.: ";
}

/* Ventanas sin formulario (las variables del mensaje): el cuerpo con el mismo aire que las ventanas con formulario. */
.oiarso-dialogo__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px;
}
.oiarso-formato__boton--variable {
	color: var(--oiarso-azul);
	font-weight: 600;
}
/* Detalle de una notificación: la tabla de «Datos que debe conseguir», con Editar y Quitar en cada fila. */
.oiarso-datos-tabla td[data-etiqueta="Dato"] {
	font-weight: 500;
}
.oiarso-datos-tabla__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}

/* Simulador: el interruptor de quién empieza va con un poco de aire antes del formulario. */
.oiarso-simulador__quien {
	margin-top: 4px;
}

/* Instrucciones del asistente de WhatsApp: tabla con los títulos de los apartados (el texto, en la ventana de Editar). */
.oiarso-apartados__tabla td[data-etiqueta="Apartado"] {
	min-width: 220px;
}
.oiarso-apartados__tabla .oiarso-apartados__titulo + .oiarso-estado {
	margin-left: 8px;
}
.oiarso-apartados__envio {
	display: block;
	margin-top: 4px;
}
.oiarso-apartados__tabla .oiarso-estado {
	white-space: normal;
}

/* Las conversaciones (simulador de WhatsApp, Probar del agente de voz, Pendientes y llamadas) usan la misma caja:
   alto fijo y desplazamiento por dentro, así que no crece con los mensajes. La vista previa de una notificación no es
   una conversación y se adapta a su único mensaje. */
.oiarso-whatsapp--conversacion .oiarso-whatsapp__chat {
	flex: 0 0 auto;
	height: min(440px, 60vh);
	min-height: 0;
	max-height: none;
	overflow-y: auto;
}

/* ===== Tamaños de letra de todo el panel (2026-10-22, a petición del usuario): los textos a 13 px y los títulos a 25 px.
   Va al final y con !important para pasar por encima de todos los tamaños sueltos de arriba. Se quedan como estaban
   las cifras grandes del Inicio y el nombre de la empresa en el menú; los subtítulos (h3, h4) van a 17 px para
   distinguirse del texto sin igualar a los títulos. ===== */
.oiarso-panel {
	font-size: 13px;
}
.oiarso-panel :where(p, li, td, th, dt, dd, label, legend, span, small, strong, em, b, i, a, input, select, textarea, button, summary, pre, code, time, option, optgroup, figcaption, blockquote, div) {
	font-size: 13px !important;
}
.oiarso-panel :where(h1, h2),
.oiarso-panel .oiarso-panel__titulo,
.oiarso-panel .oiarso-subtitulo,
.oiarso-panel .oiarso-ficha__nombre,
.oiarso-panel .oiarso-chat__inicio h3 {
	font-size: 25px !important;
}
.oiarso-panel :where(h3, h4) {
	font-size: 17px !important;
}
.oiarso-panel .oiarso-cifra__valor {
	font-size: 36px !important;
}
.oiarso-panel .oiarso-panel__empresa {
	font-size: 21px !important;
}

/* ===== Compactar (2026-10-22, usuario: «que todo entre en vh»): menos aire en el contenido, las tarjetas, las rejillas,
   las tablas, los campos y los botones, para que quepa más en una pantalla sin desplazarse. Va al final, por encima
   de lo de arriba. El relleno de abajo del contenido no se toca: es el sitio de la barra de la IA. ===== */
.oiarso-panel .oiarso-panel__contenido {
	padding-top: 16px;
	padding-left: 24px;
	padding-right: 24px;
	gap: 12px;
}
@media (max-width: 782px) {
	.oiarso-panel .oiarso-panel__contenido {
		padding-top: 12px;
		padding-left: 16px;
		padding-right: 16px;
	}
}
.oiarso-panel .oiarso-panel__cabecera {
	gap: 2px;
}
.oiarso-panel .oiarso-tarjeta {
	padding: 14px 18px;
	gap: 10px;
}
.oiarso-panel .oiarso-rejilla {
	gap: 12px;
}
.oiarso-panel .oiarso-cifras {
	gap: 10px;
}
@media (min-width: 1280px) {
	.oiarso-panel .oiarso-cifras {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}
.oiarso-panel .oiarso-cifra {
	padding: 12px 14px;
}
.oiarso-panel .oiarso-barras {
	gap: 6px;
}
.oiarso-panel .oiarso-tabla th,
.oiarso-panel .oiarso-tabla td {
	padding: 7px 12px;
}
.oiarso-panel .oiarso-tabla-resumen {
	gap: 6px 16px;
}
.oiarso-panel .oiarso-busqueda {
	gap: 8px 12px;
}
.oiarso-panel .oiarso-pestanas {
	margin: 0 0 10px;
}
.oiarso-panel .oiarso-pestanas [role="tab"] {
	padding: 7px 12px;
}
.oiarso-panel .oiarso-ficha {
	margin-bottom: 8px;
}
.oiarso-panel .oiarso-detalle__barra,
.oiarso-panel .oiarso-seccion__barra {
	gap: 8px 12px;
}
.oiarso-panel .oiarso-campo {
	gap: 4px;
}
.oiarso-panel .oiarso-campo input,
.oiarso-panel .oiarso-campo select {
	height: 36px;
	padding: 0 10px;
}
.oiarso-panel .oiarso-boton {
	min-height: 36px;
	padding: 0 14px;
}
.oiarso-panel .oiarso-boton--fila {
	min-height: 28px;
	padding: 0 10px;
}
.oiarso-panel .oiarso-interruptor-boton {
	min-height: 32px;
}
.oiarso-panel .oiarso-prueba__escribir input {
	height: 36px;
}
.oiarso-panel .oiarso-prueba__escribir .oiarso-boton {
	min-height: 36px;
}
.oiarso-panel .oiarso-dialogo form,
.oiarso-panel .oiarso-dialogo__cuerpo {
	gap: 12px;
	padding: 18px;
}
.oiarso-panel .oiarso-apartado {
	gap: 10px;
	padding-top: 12px;
}
.oiarso-panel .oiarso-ajuste__acciones {
	gap: 8px;
}
.oiarso-panel .oiarso-whatsapp__cabecera {
	padding: 8px 12px;
}
.oiarso-panel .oiarso-whatsapp--conversacion .oiarso-whatsapp__chat {
	height: min(360px, 50vh);
}
/* Inicio compacto: en pantallas anchas los gráficos van a tres columnas, para que la portada quepa en la pantalla. */
@media (min-width: 1280px) {
	.oiarso-panel .oiarso-graficos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* El simulador, en pantallas anchas, a tres columnas: «Cómo empieza», «Qué pasaría de verdad» (tarjeta vertical, con su
   propio desplazamiento) y el chat; las dos últimas estrechas, como la columna de Pendientes. En estrechas, una columna. */
.oiarso-pendiente.oiarso-detalle.oiarso-simulador {
	grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr) minmax(240px, 1fr);
}
@container (max-width: 824px) {
	.oiarso-pendiente.oiarso-detalle.oiarso-simulador {
		grid-template-columns: minmax(0, 1fr);
	}
}
.oiarso-simulador__real {
	align-self: start;
}
.oiarso-simulador__real .oiarso-simulador__eventos {
	max-height: min(420px, 55vh);
	overflow-y: auto;
}
.oiarso-simulador__real .oiarso-evento {
	flex-direction: column;
	gap: 4px;
}
.oiarso-simulador__real .oiarso-evento__chip {
	align-self: flex-start;
	min-width: 0;
}
/* El simulador: las tres tarjetas a la misma altura (la de la más alta). El chat y «Qué pasaría de verdad» rellenan su
   tarjeta hasta ese nivel y se desplazan por dentro, así que los mensajes no las agrandan. */
.oiarso-pendiente.oiarso-detalle.oiarso-simulador {
	align-items: stretch;
}
.oiarso-simulador__real {
	align-self: auto;
}
.oiarso-simulador__real .oiarso-simulador__eventos {
	flex: 1 1 0;
	min-height: 120px;
	max-height: none;
	overflow-y: auto;
}
.oiarso-simulador .oiarso-prueba {
	display: flex;
	flex-direction: column;
}
.oiarso-simulador .oiarso-prueba__conversacion {
	flex: 1 1 auto;
	min-height: 0;
}
.oiarso-simulador .oiarso-whatsapp--conversacion .oiarso-whatsapp__chat {
	flex: 1 1 0;
	height: auto;
	min-height: min(360px, 50vh);
}
/* «Cómo empieza» va dentro de la columna principal: la tarjeta rellena la columna para quedar al nivel de las otras dos. */
.oiarso-simulador .oiarso-detalle__principal {
	display: flex;
	flex-direction: column;
}
.oiarso-simulador .oiarso-detalle__principal > .oiarso-tarjeta {
	flex: 1 1 auto;
}

/* Tabla de anomalías (ficha del asistente), compacta: una línea por fila; la etiqueta no se parte, los datos que recoge
   van en una línea con puntos suspensivos (el texto entero, al pasar el ratón) y «desde d/m/a» solo si se manda. */
#notificaciones-anomalia .oiarso-tabla td[data-etiqueta="Anomalía"] .oiarso-estado {
	white-space: nowrap;
}
#notificaciones-anomalia .oiarso-tabla td[data-etiqueta="Notificación"],
#notificaciones-anomalia .oiarso-tabla td[data-etiqueta="Asistente"] {
	white-space: nowrap;
}
#notificaciones-anomalia .oiarso-notificacion__desde {
	display: inline-block;
	margin: 0 0 0 8px;
	vertical-align: middle;
}
#notificaciones-anomalia .oiarso-notificacion__datos {
	display: block;
	max-width: 420px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
@container (max-width: 608px) {
	#notificaciones-anomalia .oiarso-notificacion__datos {
		max-width: none;
		white-space: normal;
	}
}

/* Detalle de un pendiente o una llamada, compacto: las tarjetas de la columna principal van a dos columnas (la del
   audio, a todo el ancho) para que el detalle quepa en la pantalla; en contenido estrecho, una columna. El simulador
   no (solo tiene una tarjeta en esa columna). */
.oiarso-pendiente.oiarso-detalle:not(.oiarso-simulador) .oiarso-detalle__principal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
}
.oiarso-pendiente.oiarso-detalle:not(.oiarso-simulador) .oiarso-detalle__principal > [aria-labelledby="oiarso-audio-titulo"] {
	grid-column: 1 / -1;
}
@container (max-width: 1100px) {
	.oiarso-pendiente.oiarso-detalle:not(.oiarso-simulador) .oiarso-detalle__principal {
		grid-template-columns: minmax(0, 1fr);
	}
}
.oiarso-panel .oiarso-gestion__tabla th,
.oiarso-panel .oiarso-gestion__tabla td {
	padding: 4px 8px;
}

/* Detalle de una notificación, compacto: en pantallas anchas, tres columnas (Notificación por WhatsApp, Asistente de
   WhatsApp y la vista previa); los botones Guardar/Cancelar debajo de las dos primeras. En contenido más estrecho, las
   dos tarjetas apiladas y la vista previa al lado; en estrecho, una columna (la vista previa en su ventana). */
.oiarso-notificacion-rejilla {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 340px);
}
.oiarso-notificacion {
	display: contents;
}
.oiarso-notificacion__botones {
	grid-column: 1 / 3;
}
@container (max-width: 1100px) {
	.oiarso-notificacion-rejilla {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	}
	.oiarso-notificacion {
		display: flex;
	}
	.oiarso-notificacion__botones {
		grid-column: auto;
	}
}
@container (max-width: 824px) {
	.oiarso-notificacion-rejilla {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Detalle de una notificación a tres columnas: la vista previa ocupa la tercera columna desde la primera fila (si no,
   la rejilla la colocaba debajo de los botones) y los botones van en la segunda fila bajo las dos tarjetas. */
.oiarso-notificacion-rejilla > .oiarso-vista {
	grid-column: 3;
	grid-row: 1 / span 2;
}
.oiarso-notificacion__botones {
	grid-row: 2;
}
@container (max-width: 1100px) {
	.oiarso-notificacion-rejilla > .oiarso-vista {
		grid-column: 2;
		grid-row: 1;
	}
	.oiarso-notificacion__botones {
		grid-row: auto;
	}
}
.oiarso-datos-tabla__acciones {
	flex-wrap: nowrap;
}
/* Interruptores más bajos (24 px, lo que mide el propio interruptor): las filas de las tablas con interruptor quedan a
   la altura de las demás. */
.oiarso-panel .oiarso-interruptor-boton {
	min-height: 24px;
}
/* En la ficha del asistente o del agente y en los detalles, la descripción de la sección sobra: ya lo dice la propia
   página. */
.oiarso-panel__contenido:has(.oiarso-ficha, .oiarso-detalle__barra) .oiarso-panel__descripcion {
	display: none;
}
/* Tabla de anomalías aún más baja: celdas y etiquetas con menos relleno (sin título en la tarjeta: ya lo dice la pestaña). */
#notificaciones-anomalia .oiarso-tabla th,
#notificaciones-anomalia .oiarso-tabla td {
	padding: 4px 10px;
}
#notificaciones-anomalia .oiarso-tabla .oiarso-estado {
	padding: 2px 8px;
}
#notificaciones-anomalia .oiarso-tabla .oiarso-boton--fila {
	min-height: 26px;
}

/* Tabla de anomalías: los datos que recoge en una línea más corta, para que la fila entera (con su botón) quepa. */
#notificaciones-anomalia .oiarso-notificacion__datos {
	max-width: 300px;
}
/* Datos que debe conseguir: el chip «Opcional» junto al dato; Editar y Quitar en una línea. */
.oiarso-datos-tabla__opcional {
	margin-left: 6px;
}
/* El chip «Opcional» se oculta de verdad con hidden (la regla de .oiarso-estado le pone display y lo tapaba). */
.oiarso-datos-tabla__opcional[hidden] {
	display: none;
}

/* Botones de acción siempre arriba a la derecha (2026-10-22, usuario): en las páginas, en la barra junto a «Volver»;
   en las tarjetas, en la línea del título o de la etiqueta. */
.oiarso-tarjeta__cabecera,
.oiarso-campo__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}
.oiarso-tarjeta__cabecera > h2 {
	margin: 0;
}
/* Detalle de la notificación: las tres tarjetas a la misma altura (la de la vista previa) y el cuadro del mensaje
   crece para rellenar la suya. */
.oiarso-notificacion-rejilla {
	align-items: stretch;
}
.oiarso-notificacion .oiarso-apartado:has(#oiarso-notificacion-texto),
.oiarso-notificacion .oiarso-apartado:has(#oiarso-notificacion-texto) > .oiarso-campo {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
#oiarso-notificacion-texto {
	flex: 1 1 auto;
	min-height: 140px;
	resize: vertical;
}
/* Sin la fila de botones, la vista previa ocupa solo la primera fila: así las tres tarjetas se estiran a la misma altura. */
.oiarso-notificacion-rejilla > .oiarso-vista {
	grid-row: 1;
}
/* Un botón con hidden se oculta de verdad (su display de botón lo tapaba). */
.oiarso-boton[hidden] {
	display: none;
}

/* Detalle de un pendiente o una llamada, al mismo nivel: las dos tarjetas de arriba se estiran hasta el alto que
   quede (la del audio, en una línea, debajo) y la columna del chat mide lo mismo; su caja se rellena y se desplaza
   por dentro. */
.oiarso-pendiente.oiarso-detalle:not(.oiarso-simulador) .oiarso-detalle__principal {
	align-items: stretch;
	align-content: stretch;
	grid-auto-rows: auto;
	grid-template-rows: minmax(0, 1fr);
}
.oiarso-pendiente.oiarso-detalle:not(.oiarso-simulador) .oiarso-detalle__principal:has(> .oiarso-pendiente__audio) {
	grid-template-rows: minmax(0, 1fr) auto;
}
.oiarso-pendiente__audio .oiarso-tarjeta__cabecera > h2 {
	flex: 0 0 auto;
}
.oiarso-pendiente__audio .oiarso-llamada__audio {
	flex: 1 1 320px;
	max-width: none;
	margin: 0;
}
.oiarso-pendiente__audio .oiarso-nota {
	flex: 1 1 320px;
	margin: 0;
}
.oiarso-detalle__lateral .oiarso-detalle__bloque,
.oiarso-detalle__lateral .oiarso-whatsapp--conversacion {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.oiarso-detalle__lateral .oiarso-whatsapp--conversacion .oiarso-whatsapp__chat {
	flex: 1 1 0;
	height: auto;
	min-height: min(360px, 50vh);
}
/* La columna principal del detalle se estira hasta la altura de la columna del chat (la rejilla la dejaba arriba). */
.oiarso-pendiente.oiarso-detalle:not(.oiarso-simulador) {
	align-items: stretch;
}

/* La prueba del agente de voz: dos columnas como el detalle de un pendiente (cómo empieza y la conversación), al mismo
   nivel; en estrecho, una columna. */
.oiarso-pendiente.oiarso-detalle.oiarso-prueba-agente {
	grid-template-columns: minmax(0, 4fr) minmax(240px, 1fr);
}
@container (max-width: 824px) {
	.oiarso-pendiente.oiarso-detalle.oiarso-prueba-agente {
		grid-template-columns: minmax(0, 1fr);
	}
}
.oiarso-prueba-agente .oiarso-detalle__principal {
	display: flex;
	flex-direction: column;
}
.oiarso-prueba-agente .oiarso-detalle__principal > .oiarso-tarjeta {
	flex: 1 1 auto;
}
/* Vincular el WhatsApp: todo en una columna (el código y, debajo, los pasos), en una ventana normal, no ancha. */
.oiarso-qr {
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.oiarso-qr__pasos {
	flex: 0 0 auto;
	width: 100%;
	max-width: 440px;
	box-sizing: border-box;
}

/* Portada de WhatsApp: el interruptor general de los avisos, a la izquierda de la barra de arriba. */
.oiarso-seccion__barra .oiarso-interruptor-general {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin-right: auto;
}
.oiarso-interruptor-general .oiarso-interruptor-boton {
	gap: 8px;
	font-weight: 600;
}

/* ==================== Carga y espera (assets/js/carga.js) ==================== */
/* La barra de arriba mientras llega la página siguiente. */
#oiarso-progreso {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	z-index: 100001;
	width: 0;
	height: 3px;
	border-radius: 0 2px 2px 0;
	background: linear-gradient(90deg, var(--oiarso-rojo), #FF7A70);
	box-shadow: 0 0 8px rgba(215, 38, 30, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: width 7s cubic-bezier(0.1, 0.7, 0.15, 1), opacity 0.2s ease;
}
#oiarso-progreso.is-visible {
	opacity: 1;
}
#oiarso-progreso.is-fin {
	transition: width 0.25s ease, opacity 0.3s ease 0.15s;
}
/* El giro: en un botón ocupa el sitio del texto; delante de una línea de estado va en pequeño. */
@keyframes oiarso-girar {
	to {
		transform: rotate(360deg);
	}
}
.oiarso-boton.oiarso-boton--cargando {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.oiarso-boton.oiarso-boton--cargando::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: oiarso-girar 0.8s linear infinite;
}
.oiarso-boton--secundario.oiarso-boton--cargando::after,
.oiarso-chat__icono-boton.oiarso-boton--cargando::after {
	border-color: rgba(25, 19, 59, 0.18);
	border-top-color: #19133B;
}
.oiarso-boton--cargando:not(.oiarso-boton),
[aria-busy="true"]:not(.oiarso-boton):not(.oiarso-boton--cargando):not(.oiarso-cargando-texto):not(.oiarso-chat__columna) {
	opacity: 0.6;
	pointer-events: none;
}
.oiarso-cargando-texto::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 8px;
	border: 2px solid rgba(25, 19, 59, 0.18);
	border-top-color: var(--oiarso-rojo);
	border-radius: 50%;
	vertical-align: -2px;
	animation: oiarso-girar 0.8s linear infinite;
}
.oiarso-cargando {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 28px 16px;
	color: #6B6B6B;
}
.oiarso-cargando__giro {
	width: 22px;
	height: 22px;
	border: 3px solid rgba(25, 19, 59, 0.12);
	border-top-color: var(--oiarso-rojo);
	border-radius: 50%;
	animation: oiarso-girar 0.8s linear infinite;
}
/* Los tres puntos de «está escribiendo», en los chats. */
.oiarso-escribiendo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 18px;
	vertical-align: middle;
}
.oiarso-escribiendo i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	animation: oiarso-rebotar 1.2s ease-in-out infinite;
}
.oiarso-escribiendo i:nth-child(2) {
	animation-delay: 0.15s;
}
.oiarso-escribiendo i:nth-child(3) {
	animation-delay: 0.3s;
}
@keyframes oiarso-rebotar {
	0%,
	70%,
	100% {
		transform: translateY(0);
		opacity: 0.35;
	}
	35% {
		transform: translateY(-4px);
		opacity: 1;
	}
}
/* El chat IA mientras consulta: los puntos y la frase en una burbuja suave. */
.oiarso-chat__mensaje--pensando .oiarso-chat__burbuja {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 8px 14px;
	border-radius: 16px;
	background: #F7F6F4;
	color: #6B6B6B;
}
/* El simulador y la prueba del agente: la burbuja de «escribiendo» del asistente. */
.oiarso-conv__mensaje--escribiendo {
	color: #6B6B6B;
}
.oiarso-conv__mensaje--escribiendo .oiarso-escribiendo {
	height: 22px;
}

/* ==================== Ventanas: entrada y salida animadas (assets/js/dialogo.js) ==================== */
.oiarso-dialogo[open] {
	animation: oiarso-dialogo-entrar 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oiarso-dialogo[open]::backdrop {
	animation: oiarso-velo-entrar 0.22s ease;
}
.oiarso-dialogo.oiarso-dialogo--cerrando {
	animation: oiarso-dialogo-salir 0.18s ease forwards;
	pointer-events: none;
}
.oiarso-dialogo.oiarso-dialogo--cerrando::backdrop {
	animation: oiarso-velo-salir 0.18s ease forwards;
}
@keyframes oiarso-dialogo-entrar {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes oiarso-dialogo-salir {
	from {
		opacity: 1;
		transform: none;
	}
	to {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}
}
@keyframes oiarso-velo-entrar {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes oiarso-velo-salir {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* ==================== El chat lateral (la IA en las demás pestañas) ==================== */
.oiarso-asistente__panel {
	box-shadow: -12px 0 32px rgba(25, 19, 59, 0.14);
	animation: oiarso-lateral-entrar 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oiarso-asistente__panel.is-cerrando {
	animation: oiarso-lateral-salir 0.2s ease forwards;
	pointer-events: none;
}
@keyframes oiarso-lateral-entrar {
	from {
		opacity: 0;
		transform: translateX(48px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes oiarso-lateral-salir {
	from {
		opacity: 1;
		transform: none;
	}
	to {
		opacity: 0;
		transform: translateX(48px);
	}
}
@keyframes oiarso-lateral-subir {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes oiarso-lateral-bajar {
	from {
		opacity: 1;
		transform: none;
	}
	to {
		opacity: 0;
		transform: translateY(40px);
	}
}
@media (max-width: 600px) {
	/* En el móvil ocupa toda la pantalla: entra desde abajo. */
	.oiarso-asistente__panel {
		animation-name: oiarso-lateral-subir;
	}
	.oiarso-asistente__panel.is-cerrando {
		animation-name: oiarso-lateral-bajar;
	}
}
@media (min-width: 1200px) {
	/* El contenido se aparta a la vez que entra el panel. */
	.oiarso-panel {
		transition: padding-right 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
}
.oiarso-asistente__cabecera {
	gap: 4px;
	padding-left: 14px;
}
.oiarso-asistente__titulo {
	gap: 10px;
}
.oiarso-asistente__titulo > :first-child {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	padding: 6px;
	border-radius: 9px;
	background: #FCE9E7;
	color: var(--oiarso-rojo);
}
.oiarso-asistente__panel .oiarso-chat__mensajes {
	background: #FBFAF9;
}
.oiarso-asistente__panel .oiarso-chat__mensaje--ia .oiarso-chat__burbuja {
	padding: 10px 14px;
	border-radius: 16px;
	background: #FFFFFF;
	border: 1px solid #EFEDEA;
}
.oiarso-asistente__panel .oiarso-chat__pie {
	padding-top: 10px;
	border-top: 1px solid #F0EEEB;
	background: #FFFFFF;
}
/* Conversación nueva en el panel: icono, título, explicación y preguntas de ejemplo (se mandan al pulsarlas). */
.oiarso-asistente__vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 28px 8px 0;
	text-align: center;
	color: #6B6B6B;
	line-height: 1.5;
}
.oiarso-asistente__vacio-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: #FCE9E7;
	color: var(--oiarso-rojo);
}
.oiarso-asistente__vacio-icono svg {
	width: 26px;
	height: 26px;
}
.oiarso-asistente__vacio h3 {
	margin: 4px 0 0;
	color: #19133B;
	font-size: 17px;
}
.oiarso-asistente__vacio p {
	max-width: 300px;
	margin: 0;
}
.oiarso-asistente__sugerencias {
	margin-top: 6px;
}
.oiarso-asistente__sugerencias .oiarso-chat__sugerencia {
	text-align: left;
}
/* El panel mientras recupera la conversación de antes. */
.oiarso-asistente__panel .oiarso-cargando {
	margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
	#oiarso-progreso {
		transition: none;
	}
	.oiarso-boton.oiarso-boton--cargando::after,
	.oiarso-cargando-texto::before,
	.oiarso-cargando__giro,
	.oiarso-escribiendo i,
	.oiarso-dialogo[open],
	.oiarso-dialogo[open]::backdrop,
	.oiarso-dialogo.oiarso-dialogo--cerrando,
	.oiarso-dialogo.oiarso-dialogo--cerrando::backdrop,
	.oiarso-asistente__panel,
	.oiarso-asistente__panel.is-cerrando {
		animation: none;
	}
	.oiarso-panel {
		transition: none;
	}
}

/* El botón redondo de enviar de los chats también gira mientras la IA contesta (es oscuro: giro blanco). */
.oiarso-chat__enviar.oiarso-boton--cargando,
.oiarso-asistente__enviar.oiarso-boton--cargando {
	position: relative;
	color: transparent !important;
	opacity: 1;
	pointer-events: none;
}
.oiarso-chat__enviar.oiarso-boton--cargando::after,
.oiarso-asistente__enviar.oiarso-boton--cargando::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: oiarso-girar 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.oiarso-chat__enviar.oiarso-boton--cargando::after,
	.oiarso-asistente__enviar.oiarso-boton--cargando::after {
		animation: none;
	}
}

/* Mientras gira, el botón de enviar no se apaga aunque esté desactivado. */
.oiarso-chat__enviar.oiarso-boton--cargando:disabled,
.oiarso-asistente__enviar.oiarso-boton--cargando:disabled {
	background: #19133B;
	opacity: 1;
}

/* La caja de escribir de los chats: la misma marca de foco que los demás campos, nunca de altura cero y el texto
   centrado con el botón cuando es una sola línea. */
.oiarso-chat__caja {
	align-items: center;
}
.oiarso-chat__caja:focus-within {
	border-color: var(--oiarso-azul);
	box-shadow: var(--oiarso-foco);
}
.oiarso-chat__caja textarea {
	box-sizing: border-box; /* Así la altura que calcula chat.js (scrollHeight) es la del borde, sin sumar el relleno dos veces. */
	min-height: 36px;
	overflow-y: auto;
}
.oiarso-chat__caja textarea::placeholder {
	color: #9A9AA8;
}

/* Aviso (ni bien ni mal): por ejemplo, Usuarios sin correo configurado. */
.oiarso-mensaje--aviso {
	background: #FFF3DC;
	color: #7A4F00;
}
.oiarso-mensaje--aviso a {
	color: inherit;
	font-weight: 600;
}
/* Usuarios: la fila del propio administrador, un poco apagada. */
.oiarso-usuarios__yo td:first-child {
	font-weight: 600;
}
.oiarso-usuarios__yo td:first-child {
	white-space: nowrap;
}

/* La barra lateral del ordenador: el menú ocupa lo que queda y, si no cabe, se desplaza él solo; el nombre y «Cerrar
   sesión» quedan siempre abajo, a la vista (el usuario lo pidió al crecer el menú con Usuarios). Un poco más compacto.
   para que en una pantalla normal quepa todo sin desplazar. */
@media (min-width: 783px) {
	.oiarso-panel__lateral {
		overflow: hidden;
		gap: 20px;
	}
	.oiarso-panel__menu {
		flex: 1 1 auto;
		min-height: 0;
		margin: 0 -6px;
		padding: 0 6px;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
	}
	.oiarso-panel__menu ul {
		gap: 2px;
	}
	.oiarso-panel__menu a {
		min-height: 40px;
	}
	.oiarso-panel__bloque {
		margin: 10px 0 2px;
	}
	.oiarso-panel__usuario {
		flex: none;
		padding-top: 12px;
	}
}

/* ==================== Avatar: la foto o las iniciales (inc/avatar.php) ==================== */
.oiarso-avatar {
	--oiarso-avatar-tam: 36px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--oiarso-avatar-tam);
	height: var(--oiarso-avatar-tam);
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
}
img.oiarso-avatar {
	background: #FFFFFF;
}
.oiarso-avatar--iniciales {
	background: var(--oiarso-avatar-color, #19133B);
	color: #FFFFFF;
	font-weight: 700;
	font-size: calc(var(--oiarso-avatar-tam) * 0.38) !important;
	letter-spacing: 0.02em;
	line-height: 1;
	user-select: none;
}
/* Abajo en la barra lateral: foto, nombre y rol. */
.oiarso-panel__perfil {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px 6px;
	min-width: 0;
}
.oiarso-panel__perfil .oiarso-avatar {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}
.oiarso-panel__quien {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.oiarso-panel__quien .oiarso-panel__nombre {
	padding: 0;
	color: #FFFFFF;
	font-weight: 600;
}
.oiarso-panel__rol {
	font-size: 11px !important;
	color: rgba(255, 255, 255, 0.55);
}
/* Tus datos: la foto grande encima de los datos. */
.oiarso-ajuste__foto {
	margin: 0 0 12px;
}
.oiarso-campo input[type="file"] {
	padding: 8px 10px;
	font-size: 13px;
}
/* Usuarios: avatar pequeño delante del nombre. */
.oiarso-usuarios__nombre {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

/* El chat IA escribiéndose: un cursor al final del texto mientras aparece (assets/js/chat.js). */
.oiarso-chat__burbuja.is-escribiendo {
	cursor: pointer;
}
.oiarso-chat__burbuja.is-escribiendo > :last-child::after,
.oiarso-chat__burbuja.is-escribiendo:empty::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	vertical-align: -0.15em;
	background: currentColor;
	animation: oiarso-parpadeo 0.8s steps(2, start) infinite;
}
@keyframes oiarso-parpadeo {
	to {
		visibility: hidden;
	}
}
@media (prefers-reduced-motion: reduce) {
	.oiarso-chat__burbuja.is-escribiendo > :last-child::after,
	.oiarso-chat__burbuja.is-escribiendo:empty::after {
		animation: none;
	}
}

/* Chat IA: el título se cambia ahí mismo (lápiz de la cabecera, assets/js/chat.js). */
.oiarso-chat__titulo-campo {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 2px 0;
	border: 0;
	border-bottom: 2px solid var(--oiarso-azul);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: inherit !important;
	font-weight: inherit;
	outline: none;
}
.oiarso-chat__renombrar[hidden] {
	display: none;
}
/* Inicio: el saludo a la izquierda y el periodo (chips) a la derecha; la ventana para elegir fechas. */
.oiarso-inicio__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
}
.oiarso-periodo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.oiarso-periodo .oiarso-anomalias__tipo {
	min-height: 36px;
	padding: 4px 14px;
	cursor: pointer;
	font: inherit;
}
.oiarso-periodo__texto {
	flex-basis: 100%;
	margin: 0;
	color: #6B6B6B;
}
@media (max-width: 782px) {
	.oiarso-inicio__cabecera {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==================== Los enlaces de texto, como botones (el usuario lo pidió el 22/10/2026) ==================== */
/* «Ver envíos», «Ir a Configuración», «Ver pendientes»… como botones secundarios (los «← Volver» ya lo eran). */
.oiarso-enlace {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--oiarso-borde-fuerte);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--oiarso-texto);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.oiarso-enlace:hover {
	background: var(--oiarso-fondo-suave);
	border-color: var(--oiarso-marino);
	color: var(--oiarso-texto);
}
.oiarso-enlace:focus-visible {
	outline: 2px solid var(--oiarso-azul);
	outline-offset: 2px;
}
.oiarso-grafico .oiarso-enlace,
.oiarso-conexiones + .oiarso-enlace {
	margin-top: 10px;
}
/* Los que van dentro de un texto (avisos, notas, ayudas, respuestas de la IA, «¿Has olvidado tu contraseña?»): botón pequeño en línea. */
.oiarso-mensaje a,
.oiarso-nota a,
.oiarso-campo__ayuda a,
.oiarso-tabla__dato a,
.oiarso-simulador__envio a,
.oiarso-chat__burbuja a,
.oiarso-acceso__nota a,
.oiarso-acceso__olvido {
	display: inline-block;
	padding: 1px 9px;
	border: 1px solid currentColor;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: background 0.15s ease;
}
.oiarso-mensaje a:hover,
.oiarso-nota a:hover,
.oiarso-campo__ayuda a:hover,
.oiarso-tabla__dato a:hover,
.oiarso-simulador__envio a:hover,
.oiarso-chat__burbuja a:hover,
.oiarso-acceso__nota a:hover,
.oiarso-acceso__olvido:hover {
	background: rgba(25, 19, 59, 0.06);
	color: inherit;
}
.oiarso-acceso__olvido {
	align-self: center;
	margin-top: 4px;
	padding: 6px 14px;
	border-radius: 10px;
}

/* ==================== Entrada de cada pestaña (lo pidió el usuario el 22/10/2026) ==================== */
/* Al cargar una pestaña, cada bloque del contenido (título, texto, cifras, tablas, tarjetas…) aparece subiendo suave y
   escalonado. Solo mientras entra (backwards): al acabar no queda ninguna transformación que estorbe a lo fijo. */
@keyframes oiarso-entrar-pestana {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.oiarso-panel__contenido > * {
	animation: oiarso-entrar-pestana 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.oiarso-panel__contenido > :nth-child(2) { animation-delay: 0.04s; }
.oiarso-panel__contenido > :nth-child(3) { animation-delay: 0.08s; }
.oiarso-panel__contenido > :nth-child(4) { animation-delay: 0.12s; }
.oiarso-panel__contenido > :nth-child(5) { animation-delay: 0.16s; }
.oiarso-panel__contenido > :nth-child(6) { animation-delay: 0.2s; }
.oiarso-panel__contenido > :nth-child(7) { animation-delay: 0.24s; }
.oiarso-panel__contenido > :nth-child(n + 8) { animation-delay: 0.28s; }
/* Dentro de una rejilla de tarjetas (Inicio, Configuración), las tarjetas también entran una tras otra. */
.oiarso-panel__contenido .oiarso-rejilla > .oiarso-tarjeta,
.oiarso-panel__contenido .oiarso-cifras > .oiarso-cifra,
.oiarso-panel__contenido .oiarso-graficos > .oiarso-tarjeta {
	animation: oiarso-entrar-pestana 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.oiarso-panel__contenido .oiarso-rejilla > :nth-child(2), .oiarso-panel__contenido .oiarso-cifras > :nth-child(2), .oiarso-panel__contenido .oiarso-graficos > :nth-child(2) { animation-delay: 0.1s; }
.oiarso-panel__contenido .oiarso-rejilla > :nth-child(3), .oiarso-panel__contenido .oiarso-cifras > :nth-child(3), .oiarso-panel__contenido .oiarso-graficos > :nth-child(3) { animation-delay: 0.16s; }
.oiarso-panel__contenido .oiarso-rejilla > :nth-child(4), .oiarso-panel__contenido .oiarso-cifras > :nth-child(4), .oiarso-panel__contenido .oiarso-graficos > :nth-child(4) { animation-delay: 0.22s; }
.oiarso-panel__contenido .oiarso-rejilla > :nth-child(5), .oiarso-panel__contenido .oiarso-cifras > :nth-child(5), .oiarso-panel__contenido .oiarso-graficos > :nth-child(5) { animation-delay: 0.28s; }
.oiarso-panel__contenido .oiarso-rejilla > :nth-child(n + 6), .oiarso-panel__contenido .oiarso-cifras > :nth-child(n + 6), .oiarso-panel__contenido .oiarso-graficos > :nth-child(n + 6) { animation-delay: 0.34s; }
@media (prefers-reduced-motion: reduce) {
	.oiarso-panel__contenido > *,
	.oiarso-panel__contenido .oiarso-rejilla > .oiarso-tarjeta,
	.oiarso-panel__contenido .oiarso-cifras > .oiarso-cifra,
	.oiarso-panel__contenido .oiarso-graficos > .oiarso-tarjeta {
		animation: none;
	}
}

/* «Instalar como app» (inc/app.php): un botón con el mismo aspecto que «Cerrar sesión»; oculto si ya está instalada. */
.oiarso-panel__instalar {
	width: 100%;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	text-align: left;
}
.oiarso-panel__instalar[hidden] {
	display: none;
}
.oiarso-instalar__pasos {
	display: grid;
	gap: 10px;
	margin: 0 0 18px;
	padding-left: 20px;
	color: var(--oiarso-texto);
	font-size: 14px;
	line-height: 1.45;
}