/* Panichini Convenios — portal de administración y módulo de caja.
   El módulo de caja sigue la guía de legibilidad del proyecto: ruta visual
   evidente, códigos grandes, contraste AA y nada que dependa sólo del color. */

:root {
	--pp-fondo: var(--pan-marfil, #F7F2EA);
	--pp-carta: var(--pan-blanco, #FDFBF7);
	--pp-tinta: var(--pan-carbon, #2B2320);
	--pp-texto: var(--pan-texto, #4A3F38);
	--pp-oro: var(--pan-oro, #B99657);
	--pp-borde: rgba(185, 150, 87, .28);
	--pp-ok: #1A7F37;
	--pp-ok-suave: rgba(26, 127, 55, .08);
	--pp-mal: #B3261E;
	--pp-mal-suave: rgba(179, 38, 30, .07);
	--pp-espera: #8A6D1F;
	--pp-espera-suave: rgba(138, 109, 31, .1);
	--pp-radio: 4px;
}

.pan-portal,
.pan-caja { padding: 128px 0 90px; background: var(--pp-fondo); min-height: 70vh; }
.pan-caja { padding-top: 118px; }

/* ---------- Cabecera y navegación ---------- */
.pan-portal-cabecera {
	display: flex; flex-wrap: wrap; gap: 16px;
	align-items: flex-end; justify-content: space-between;
	margin-bottom: 26px;
}
.pan-portal-cabecera h1 { margin: 4px 0 0; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.pan-portal-sesion { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--pp-texto); }

.pan-portal-nav {
	display: flex; flex-wrap: wrap; gap: 4px;
	margin: 0 0 26px; border-bottom: 1px solid var(--pp-borde);
}
.pan-portal-nav a {
	padding: 11px 20px; text-decoration: none; color: var(--pp-texto);
	font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
	border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pan-portal-nav a:hover { color: var(--pp-tinta); }
.pan-portal-nav a.activo { color: var(--pp-tinta); border-bottom-color: var(--pp-oro); }

.pan-migas { font-size: .8rem; color: var(--pp-texto); margin: 0 0 12px; }
.pan-migas a { color: var(--pp-oro); }
.pan-titulo-seccion { margin: 0 0 24px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

/* ---------- Tarjetas ---------- */
.pan-tarjeta {
	background: var(--pp-carta); border: 1px solid var(--pp-borde);
	border-radius: var(--pp-radio); padding: 28px 30px; margin: 0 0 22px;
}
.pan-tarjeta h3 { margin: 0 0 16px; font-size: 1.12rem; }
.pan-tarjeta--destacada { border-left: 3px solid var(--pp-oro); }
.pan-centrado { text-align: center; }

.pan-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.pan-grid-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; margin-bottom: 30px; }

.pan-tarjeta--empresa header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.pan-tarjeta--empresa h3 { margin: 0; font-size: 1.08rem; }
.pan-tarjeta--empresa h3 a { color: var(--pp-tinta); text-decoration: none; }
.pan-tarjeta--empresa h3 a:hover { color: var(--pp-oro); }

.pan-datos { margin: 0 0 16px; display: grid; gap: 9px; }
.pan-datos dt { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(74, 63, 56, .62); }
.pan-datos dd { margin: 2px 0 0; font-size: .88rem; }
.pan-ok { color: var(--pp-ok); }
.pan-pendiente { color: var(--pp-espera); }

/* ---------- Pastillas y avisos ---------- */
.pan-pastilla {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	font-size: .68rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
}
.pan-pastilla--ok { background: var(--pp-ok-suave); color: var(--pp-ok); }
.pan-pastilla--off { background: rgba(74, 63, 56, .09); color: var(--pp-texto); }
.pan-pastilla--mal { background: var(--pp-mal-suave); color: var(--pp-mal); }
.pan-pastilla--espera { background: var(--pp-espera-suave); color: var(--pp-espera); }

.pan-aviso { padding: 14px 18px; border-radius: var(--pp-radio); margin: 0 0 22px; font-size: .9rem; border-left: 3px solid; }
.pan-aviso--ok { background: var(--pp-ok-suave); border-color: var(--pp-ok); color: var(--pp-ok); }
.pan-aviso--error { background: var(--pp-mal-suave); border-color: var(--pp-mal); color: var(--pp-mal); }
.pan-aviso--aviso { background: var(--pp-espera-suave); border-color: var(--pp-espera); color: var(--pp-espera); }
.pan-aviso a { color: inherit; }

.pan-alerta-mini { display: inline-block; font-size: .72rem; color: var(--pp-espera); font-weight: 700; }
.pan-vacio { padding: 44px 30px; text-align: center; background: var(--pp-carta); border: 1px dashed var(--pp-borde); border-radius: var(--pp-radio); margin-bottom: 22px; }
.pan-vacio h2, .pan-vacio h3 { margin: 0 0 10px; }
.pan-vacio p { max-width: 56ch; margin: 0 auto; font-size: .92rem; }

/* ---------- Formularios ---------- */
.pan-form-panel { display: block; }
.pan-campo { margin: 0 0 18px; }
.pan-campo > label {
	display: block; margin-bottom: 6px; font-size: .7rem; font-weight: 700;
	letter-spacing: .13em; text-transform: uppercase; color: var(--pp-tinta);
}
.pan-campo input[type="text"], .pan-campo input[type="email"], .pan-campo input[type="number"],
.pan-campo input[type="date"], .pan-campo input[type="time"], .pan-campo input[type="search"],
.pan-campo input[type="password"], .pan-campo input[type="tel"],
.pan-campo select, .pan-campo textarea {
	width: 100%; padding: 11px 13px; font: inherit; font-size: .92rem;
	color: var(--pp-tinta); background: #fff;
	border: 1px solid var(--pp-borde); border-radius: var(--pp-radio);
}
.pan-campo textarea { resize: vertical; line-height: 1.6; }
.pan-campo :focus-visible { outline: 2px solid var(--pp-oro); outline-offset: 1px; }
.pan-ayuda { margin: 5px 0 0; font-size: .78rem; line-height: 1.5; color: rgba(74, 63, 56, .78); }
.pan-nota { padding: 12px 14px; background: var(--pp-fondo); border-radius: var(--pp-radio); }

.pan-fila-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pan-fila-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.pan-opciones { display: grid; gap: 8px; margin-top: 8px; }
.pan-opcion {
	display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
	padding: 10px 12px; background: var(--pp-fondo); border: 1px solid transparent;
	border-radius: var(--pp-radio); font-size: .88rem; line-height: 1.5;
}
.pan-opcion:hover { border-color: var(--pp-borde); }
.pan-opcion input { margin-top: 3px; accent-color: var(--pp-oro); width: 17px; height: 17px; flex: 0 0 auto; }
.pan-opcion--plantilla code { margin-right: 8px; font-weight: 700; color: var(--pp-oro); }

.pan-dias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pan-dia { cursor: pointer; }
.pan-dia input { position: absolute; opacity: 0; width: 0; height: 0; }
.pan-dia span {
	display: block; padding: 9px 14px; background: var(--pp-fondo);
	border: 1px solid var(--pp-borde); border-radius: var(--pp-radio);
	font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}
.pan-dia input:checked + span { background: var(--pp-oro); border-color: var(--pp-oro); color: #fff; }
.pan-dia input:focus-visible + span { outline: 2px solid var(--pp-tinta); outline-offset: 2px; }

.pan-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.pan-acciones--fin { margin-top: 6px; }
.pan-form-inline { display: flex; gap: 5px; align-items: center; }
.pan-form-inline select { padding: 5px 7px; font-size: .8rem; max-width: 160px; }

.pan-desplegable { background: var(--pp-carta); border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); padding: 0 26px; margin: 0 0 22px; }
.pan-desplegable > summary { padding: 18px 0; cursor: pointer; font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.pan-desplegable[open] > summary { border-bottom: 1px solid var(--pp-borde); margin-bottom: 20px; }
.pan-desplegable > *:last-child { padding-bottom: 24px; }
.pan-desplegable--sutil { background: transparent; border: 0; padding: 0; margin-top: 16px; }
.pan-desplegable--sutil > summary { padding: 8px 0; font-size: .74rem; color: var(--pp-texto); }

/* ---------- Qué aplica ahora / simulador ---------- */
.pan-ahora-cabecera { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; }
.pan-ahora-cabecera h3 { margin: 4px 0 0; }
.pan-sim { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pan-sim input, .pan-sim select { padding: 7px 9px; font: inherit; font-size: .82rem; border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); background: #fff; }

.pan-resultado-regla { display: flex; gap: 18px; align-items: center; padding: 20px 22px; border-radius: var(--pp-radio); }
.pan-resultado-regla--ok { background: var(--pp-ok-suave); border: 1px solid rgba(26, 127, 55, .25); }
.pan-resultado-regla--nada { background: var(--pp-fondo); border: 1px dashed var(--pp-borde); }
.pan-resultado-regla p { margin: 3px 0 0; font-size: .88rem; }
.pan-codigo-grande {
	font-size: 1.25rem; font-weight: 700; letter-spacing: .08em;
	padding: 10px 16px; background: #fff; border: 1px solid rgba(26, 127, 55, .3);
	border-radius: var(--pp-radio); color: var(--pp-ok); white-space: nowrap;
}

.pan-diagnostico { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.pan-diagnostico li { display: flex; gap: 12px; align-items: baseline; font-size: .84rem; padding: 7px 12px; border-radius: var(--pp-radio); background: var(--pp-fondo); }
.pan-diagnostico li.si { background: var(--pp-ok-suave); }
.pan-diagnostico code { font-weight: 700; min-width: 90px; }

/* ---------- Listas ---------- */
.pan-lista-convenios, .pan-lista-beneficios { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.pan-lista-convenios li, .pan-lista-beneficios li { padding: 14px 16px; background: var(--pp-fondo); border-radius: var(--pp-radio); border: 1px solid transparent; }
.pan-lista-beneficios li.inactivo { opacity: .62; }
.pan-benef-cab { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.pan-benef-cab code { font-weight: 700; color: var(--pp-oro); }
.pan-benef-acciones { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.pan-plantillas { padding: 18px 20px; background: var(--pp-fondo); border-radius: var(--pp-radio); margin-bottom: 22px; }

/* ---------- Tablas ---------- */
.pan-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pan-filtros input, .pan-filtros select { padding: 9px 11px; font: inherit; font-size: .86rem; border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); background: #fff; }
.pan-tabla-envoltura { overflow-x: auto; background: var(--pp-carta); border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); }
.pan-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.pan-tabla th, .pan-tabla td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(185, 150, 87, .16); }
.pan-tabla th { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(74, 63, 56, .7); white-space: nowrap; }
.pan-tabla tr:last-child td { border-bottom: 0; }

.pan-metricas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 26px; }
.pan-metrica { padding: 18px 20px; background: var(--pp-carta); border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); }
.pan-metrica--aviso { border-left: 3px solid var(--pp-espera); }
.pan-metrica-num { display: block; font-size: 1.8rem; font-weight: 700; color: var(--pp-tinta); line-height: 1.1; }
.pan-metrica-et { display: block; margin-top: 5px; font-size: .72rem; letter-spacing: .06em; color: var(--pp-texto); }

/* =========================================================================
   MÓDULO DE CAJA
   Se lee de un vistazo, a un brazo de distancia, con luz de cafetería.
   ====================================================================== */
.pan-caja-cabecera { margin-bottom: 26px; }
.pan-caja-cabecera h1 { margin: 4px 0 10px; font-size: clamp(1.6rem, 4vw, 2.1rem); }

.pan-caja-buscar { background: var(--pp-carta); border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); padding: 26px 24px; }
.pan-entrada-codigo {
	font-size: 1.5rem !important; letter-spacing: .12em; text-align: center;
	text-transform: uppercase; font-weight: 700; padding: 16px 12px !important;
}
.pan-btn-grande { display: block; width: 100%; padding: 18px; font-size: 1rem; text-align: center; }
.pan-btn-secundario { display: block; width: 100%; margin-top: 10px; text-align: center; padding: 14px; }

/* Veredicto: lo primero que ve el cajero, inequívoco y sin depender del color */
.pan-veredicto { padding: 26px 26px 22px; border-radius: var(--pp-radio); margin-bottom: 16px; border-left: 6px solid; }
.pan-veredicto--ok { background: var(--pp-ok-suave); border-color: var(--pp-ok); }
.pan-veredicto--mal { background: var(--pp-mal-suave); border-color: var(--pp-mal); }
.pan-veredicto-et { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.pan-veredicto--ok .pan-veredicto-et { color: var(--pp-ok); }
.pan-veredicto--mal .pan-veredicto-et { color: var(--pp-mal); }
.pan-veredicto h2 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.7rem); }
.pan-veredicto-sub { margin: 6px 0 0; font-size: .9rem; color: var(--pp-texto); }

/* Instrucción: código enorme, después los pasos numerados */
.pan-instruccion { background: var(--pp-carta); border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); padding: 26px 24px; margin-bottom: 16px; }
.pan-instruccion h3 { margin: 24px 0 12px; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-texto); }
.pan-instruccion-codigo { text-align: center; padding: 20px; background: var(--pp-tinta); border-radius: var(--pp-radio); }
.pan-instruccion-codigo span { display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(253, 251, 247, .7); margin-bottom: 8px; }
.pan-instruccion-codigo strong { display: block; font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 700; letter-spacing: .1em; color: #fff; line-height: 1.1; }
.pan-instruccion-que { margin: 16px 0 0; text-align: center; font-size: 1.02rem; font-weight: 600; color: var(--pp-tinta); }

.pan-pasos { margin: 0; padding-left: 0; list-style: none; counter-reset: paso; }
.pan-pasos li { counter-increment: paso; position: relative; padding: 12px 0 12px 46px; border-bottom: 1px solid rgba(185, 150, 87, .16); font-size: .96rem; line-height: 1.55; }
.pan-pasos li:last-child { border-bottom: 0; }
.pan-pasos li::before {
	content: counter(paso); position: absolute; left: 0; top: 11px;
	width: 30px; height: 30px; display: grid; place-items: center;
	background: var(--pp-oro); color: #fff; border-radius: 50%;
	font-size: .84rem; font-weight: 700;
}
.pan-verificar { margin: 0; padding-left: 0; list-style: none; }
.pan-verificar li { position: relative; padding: 10px 0 10px 30px; font-size: .92rem; line-height: 1.5; border-bottom: 1px solid rgba(185, 150, 87, .16); }
.pan-verificar li:last-child { border-bottom: 0; }
.pan-verificar li::before { content: "☐"; position: absolute; left: 0; top: 9px; font-size: 1.1rem; color: var(--pp-oro); }

.pan-instruccion--sobria p { font-size: .98rem; line-height: 1.6; }
.pan-nota-cierre { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--pp-borde); font-weight: 700; color: var(--pp-mal); }

.pan-caja-confirmar { background: var(--pp-carta); border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); padding: 22px 24px; }
.pan-caja-final { text-align: center; padding: 46px 30px; border-radius: var(--pp-radio); margin-bottom: 20px; }
.pan-caja-final--ok { background: var(--pp-ok-suave); border: 1px solid rgba(26, 127, 55, .3); }
.pan-caja-final--mal { background: var(--pp-mal-suave); border: 1px solid rgba(179, 38, 30, .3); }
.pan-caja-icono { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; font-size: 1.9rem; color: #fff; }
.pan-caja-final--ok .pan-caja-icono { background: var(--pp-ok); }
.pan-caja-final--mal .pan-caja-icono { background: var(--pp-mal); }
.pan-caja-final h2 { margin: 0 0 8px; }
.pan-caja-final p { margin: 0 auto 24px; max-width: 46ch; }

/* ---------- Adaptación ---------- */
@media (max-width: 900px) {
	.pan-columnas, .pan-fila-2, .pan-fila-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.pan-portal, .pan-caja { padding-top: 104px; }
	.pan-tarjeta, .pan-caja-buscar, .pan-instruccion, .pan-caja-confirmar { padding: 22px 18px; }
	.pan-desplegable { padding: 0 18px; }
	.pan-portal-cabecera { align-items: flex-start; }
	.pan-portal-nav a { padding: 10px 13px; font-size: .72rem; }
	.pan-ahora-cabecera { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.pan-portal *, .pan-caja * { transition: none !important; animation: none !important; }
}

/* =========================================================================
   PUERTA DE ACCESO
   Una sola columna, centrada y angosta: en una pantalla de credenciales todo
   lo que no sea el formulario compite con él.
   ====================================================================== */
.pan-acceso { max-width: 560px; }
.pan-acceso .pan-aviso { max-width: 620px; margin-left: auto; margin-right: auto; }

.pan-acceso-caja {
	background: var(--pp-carta);
	border: 1px solid var(--pp-borde);
	border-radius: var(--pp-radio);
	padding: 34px 32px 28px;
}
.pan-acceso-caja h2 { margin: 0 0 4px; font-size: 1.3rem; }
.pan-acceso-caja > .pan-ayuda { margin: 0 0 22px; }
.pan-acceso-caja .pan-opcion { margin-top: 4px; font-size: .84rem; }
.pan-acceso-caja .pan-acciones { margin-top: 22px; }

.pan-acceso-pie { margin: 20px 0 0; text-align: center; font-size: .84rem; }
.pan-acceso-pie a { color: var(--pp-texto); text-decoration: none; border-bottom: 1px solid var(--pp-borde); padding-bottom: 1px; }
.pan-acceso-pie a:hover { color: var(--pp-oro); border-bottom-color: var(--pp-oro); }

/* Segunda puerta: quien viene por un convenio no necesita cuenta, y decirlo
   aquí evita que se quede atascado intentando inventar una contraseña. */
.pan-acceso-otro {
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid var(--pp-borde);
	text-align: center;
}
.pan-acceso-otro h3 { margin: 0 0 10px; font-size: 1.06rem; }
.pan-acceso-otro p { margin: 0 auto 18px; font-size: .9rem; max-width: 46ch; }
.pan-acceso-otro .grupo-btn { justify-content: center; margin-bottom: 14px; }
.pan-acceso-otro .pan-ayuda { max-width: 44ch; margin: 0 auto; }

@media (max-width: 700px) {
	.pan-acceso-caja { padding: 26px 20px 22px; }
}

/* ---------- Dos puertas: personal y asociados ----------
   El asociado va primero porque es quien más veces va a entrar, y porque el
   personal ya sabe dónde está su formulario. */
.pan-dos-puertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.pan-acceso-caja--asociado { border-left: 3px solid var(--pp-oro); }
.pan-acceso-caja .kicker { margin-bottom: 10px; }
.pan-acceso-caja h2 { margin: 0 0 6px; font-size: 1.25rem; }

/* ---------- Credencial del asociado ---------- */
.pan-credencial {
	text-align: center;
	padding: 34px 28px 28px;
	margin-bottom: 22px;
	background: var(--pp-tinta);
	border-radius: var(--pp-radio);
	color: var(--pp-carta);
}
.pan-credencial-et {
	display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--pan-oro-claro, #D4BC8B); margin-bottom: 14px;
}
.pan-credencial-codigo {
	display: block; font-size: clamp(1.9rem, 8vw, 2.7rem); font-weight: 700;
	letter-spacing: .1em; line-height: 1.1; color: #fff;
}
.pan-credencial-nombre { margin: 16px 0 2px; font-size: 1.02rem; color: rgba(253, 251, 247, .92) !important; }
.pan-credencial-empresa { margin: 0 0 16px; font-size: .86rem; color: rgba(253, 251, 247, .62) !important; }
.pan-credencial-nota { margin: 16px 0 0; font-size: .78rem; color: rgba(253, 251, 247, .55) !important; }

/* ---------- Beneficio de hoy ---------- */
.pan-hoy h2 { margin: 0 0 14px; font-size: 1.1rem; }
.pan-hoy-si { display: flex; gap: 16px; align-items: center; padding: 18px 20px; background: var(--pp-ok-suave); border-radius: var(--pp-radio); }
.pan-hoy-si p { margin: 3px 0 0; font-size: .88rem; }
.pan-hoy-codigo {
	font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap;
	padding: 10px 14px; background: #fff; border: 1px solid rgba(26, 127, 55, .3);
	border-radius: var(--pp-radio); color: var(--pp-ok);
}

.pan-datos--fijos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; }

/* ---------- Zona de eliminación ---------- */
.pan-peligro { border-color: rgba(179, 38, 30, .3); }
.pan-peligro > summary { color: var(--pp-mal); }
.pan-btn-peligro { border-color: var(--pp-mal) !important; color: var(--pp-mal) !important; }
.pan-btn-peligro:hover { background: var(--pp-mal) !important; color: #fff !important; }

@media (max-width: 800px) {
	.pan-dos-puertas { grid-template-columns: 1fr; }
	.pan-hoy-si { flex-direction: column; align-items: flex-start; }
	.pan-datos--fijos { grid-template-columns: 1fr; }
}

/* ---------- QR de la credencial ----------
   Fondo blanco siempre: un QR sobre fondo oscuro no lo lee ninguna cámara. */
.pan-qr { margin: 22px auto 4px; max-width: 230px; }
.pan-qr-lienzo {
	background: #fff; padding: 12px; border-radius: var(--pp-radio);
	line-height: 0; min-height: 180px;
}
.pan-qr-lienzo svg { width: 100%; height: auto; display: block; }
.pan-qr-pie {
	display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
	margin: 10px 0 0 !important; font-size: .7rem;
	color: rgba(253, 251, 247, .55) !important;
}
.pan-qr-pie [data-palabra] {
	font-weight: 700; letter-spacing: .16em;
	color: var(--pan-oro-claro, #D4BC8B) !important;
}
.pan-qr-aviso {
	margin: 10px 0 0 !important; font-size: .74rem;
	color: #F0B7B2 !important;
}
.pan-qr.sin-conexion .pan-qr-lienzo { opacity: .25; }

/* ---------- Otros beneficios, en caja ---------- */
.pan-otros { margin-top: 20px; border-top: 1px solid var(--pp-borde); padding-top: 14px; }
.pan-otros > summary { cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-texto); }
.pan-otros-lista { list-style: none; margin: 8px 0 14px; padding: 0; }
.pan-otros-lista li { padding: 8px 0; border-bottom: 1px solid rgba(185, 150, 87, .16); font-size: .88rem; }
.pan-otros-lista li:last-child { border-bottom: 0; }
.pan-otros-lista code { font-weight: 700; color: var(--pp-oro); margin-right: 8px; }

/* ---------- Acceso del equipo: presente pero sin competir ----------
   El asociado entra muchas más veces que el personal, así que su puerta manda.
   La del equipo se abre sola cuando hace falta. */
.pan-acceso-equipo {
	margin-top: 26px; padding: 0 20px;
	border: 1px solid var(--pp-borde); border-radius: var(--pp-radio);
	background: transparent;
}
.pan-acceso-equipo > summary {
	padding: 16px 0; cursor: pointer; list-style: none;
	font-size: .74rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: rgba(74, 63, 56, .68); text-align: center;
}
.pan-acceso-equipo > summary::-webkit-details-marker { display: none; }
.pan-acceso-equipo > summary:hover { color: var(--pp-oro); }
.pan-acceso-equipo[open] > summary { border-bottom: 1px solid var(--pp-borde); margin-bottom: 20px; }
.pan-acceso-equipo > *:last-child { padding-bottom: 22px; }
.pan-enlace-sutil { font-size: .8rem; color: var(--pp-texto); text-decoration: none; border-bottom: 1px solid var(--pp-borde); }
.pan-enlace-sutil:hover { color: var(--pp-oro); border-bottom-color: var(--pp-oro); }

/* ---------- QR de inscripción en el local ---------- */
.pan-inscribir-qr { max-width: 240px; margin: 18px auto 0; }
.pan-inscribir-qr .pan-qr-lienzo {
	background: #fff; padding: 12px; border-radius: var(--pp-radio);
	border: 1px solid var(--pp-borde); line-height: 0;
}
.pan-inscribir-qr .pan-qr-lienzo svg { width: 100%; height: auto; display: block; }
.pan-inscribir-qr .pan-ayuda { margin-top: 10px; }
.pan-centrado { text-align: center; }

/* ---------- Entrada por código ----------
   Aparece sólo después de pedir el enlace, y encima de todo: si alguien llega
   aquí es porque el enlace no le funcionó y no conviene hacerle buscar. */
.pan-acceso-caja--codigo { border-left: 3px solid var(--pp-ok); margin-bottom: 22px; }
.pan-acceso-caja--codigo .pan-entrada-codigo {
	letter-spacing: .5em; text-indent: .5em; font-size: 1.7rem !important;
	text-align: center; font-weight: 700;
}
.pan-sr {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* ---------- Sesión en el módulo de caja ----------
   El cajero ya no entra a wp-admin, así que salir y cambiar su contraseña
   tienen que estar aquí o no están en ninguna parte. */
.pan-caja-sesion { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.pan-caja-sesion .pan-ayuda { margin: 0 6px 0 0; }
.pan-suc-fija {
	margin: 0 0 18px; padding: 14px 16px; background: var(--pp-fondo);
	border-radius: var(--pp-radio); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.pan-suc-fija span:first-child { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(74, 63, 56, .7); }
.pan-suc-fija strong { font-size: 1.02rem; color: var(--pp-tinta); }

/* ---------- Acción secundaria bajo la confirmación de caja ---------- */
.pan-caja-extra {
	margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pp-borde);
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.pan-caja-extra .pan-ayuda { margin: 0; }

/* =========================================================================
 * Escáner de credenciales en caja.
 * ====================================================================== */

.pan-escaner { margin-bottom: 22px; }

.pan-escaner-abrir { width: 100%; }

.pan-escaner-visor {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #14100E;
	aspect-ratio: 4 / 3;
	margin-bottom: 12px;
}

.pan-escaner-visor video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Una mira, no un adorno: le dice al cajero dónde encuadrar y evita que acerque
   el teléfono hasta perder el foco. */
.pan-escaner-mira {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 62%;
	aspect-ratio: 1;
	border: 2px solid rgba(255, 255, 255, .9);
	border-radius: 18px;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .38);
}

.pan-escaner-cerrar {
	position: absolute;
	right: 10px;
	bottom: 10px;
	background: rgba(20, 16, 14, .78);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: 9px 16px;
	font: inherit;
	font-size: .8rem;
	cursor: pointer;
}

.pan-escaner-estado:empty { display: none; }
.pan-escaner-estado { margin: 10px 0 0; }

/* Separador entre escanear y escribir el código. */
.pan-escaner-o {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 0;
	color: var(--tinta-suave, #6E5A50);
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.pan-escaner-o::before,
.pan-escaner-o::after {
	content: '';
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .25;
}

/*
 * Misma trampa que en la app: `[hidden]` viene de la hoja del navegador y
 * cualquier `.clase { display: ... }` propia le gana. Afecta al botón de
 * escanear, al visor de la cámara y al QR de inscripción, que arrancan ocultos.
 */
.pan-caja [hidden],
.pan-portal [hidden] { display: none !important; }

/* Explicación al cajero de por qué no corresponde el beneficio. */
.pan-porque { list-style: none; margin: 8px 0 10px; padding: 0; }
.pan-porque li {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 9px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.pan-porque li:last-child { border-bottom: 0; }
.pan-porque code {
	flex: 0 0 auto;
	font-size: .82rem;
	background: rgba(185, 150, 87, .16);
	padding: 3px 8px;
	border-radius: 5px;
}

/* =========================================================================
 * Informes y revisión del sistema.
 * ====================================================================== */

.pan-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pan-filtros a {
	padding: 7px 14px;
	border: 1px solid var(--rule, #E2D8C7);
	border-radius: 999px;
	font-size: .82rem;
	text-decoration: none;
	color: var(--tinta-suave, #6E5A50);
}
.pan-filtros a.activo {
	background: var(--pan-oro, #B99657);
	border-color: var(--pan-oro, #B99657);
	color: #201B18;
	font-weight: 700;
}

.pan-metrica--clave { border-color: var(--pan-oro, #B99657); }
.pan-metrica--alerta strong { color: #B26E5F; }

.pan-subtitulo {
	font-family: var(--f-display, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.3rem;
	margin: 28px 0 12px;
}

/* Tasa de uso: el color codifica el estado, no decora. */
.pan-tasa {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-weight: 700;
	font-size: .85rem;
}
.pan-tasa--ok    { background: rgba(111, 127, 106, .18); color: #4E6049; }
.pan-tasa--media { background: rgba(185, 150, 87, .18);  color: #8A6B2F; }
.pan-tasa--baja  { background: rgba(178, 110, 95, .16);  color: #8F4E40; }

.pan-tabla--compacta td { padding: 8px 10px 8px 0; font-size: .9rem; }

/* Barras diarias. Sin librería: son rectángulos. */
.pan-barras {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 110px;
	margin: 14px 0 10px;
	overflow-x: auto;
	padding-bottom: 2px;
}
.pan-barra { flex: 1 0 10px; min-width: 10px; height: 100%; display: flex; align-items: flex-end; }
.pan-barra span {
	display: block;
	width: 100%;
	background: var(--pan-oro, #B99657);
	border-radius: 2px 2px 0 0;
}

/* Hallazgos de la revisión. */
.pan-hallazgos { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.pan-hallazgo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	background: var(--superficie, #FDFBF7);
	border: 1px solid var(--rule, #E2D8C7);
	border-left-width: 4px;
	border-radius: 0 8px 8px 0;
	padding: 15px 18px;
}
.pan-hallazgo--alto  { border-left-color: #B26E5F; }
.pan-hallazgo--medio { border-left-color: #B99657; }
.pan-hallazgo--info  { border-left-color: #8A9BA0; }

.pan-hallazgo-cuerpo { min-width: 0; }
.pan-hallazgo-nivel {
	display: block;
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tinta-suave, #6E5A50);
	margin-bottom: 4px;
}
.pan-hallazgo strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.pan-hallazgo p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--tinta-suave, #6E5A50); max-width: 70ch; }
.pan-hallazgo .btn-mini { flex: 0 0 auto; }

.pan-nav-conteo {
	display: inline-block;
	min-width: 18px;
	padding: 1px 6px;
	margin-left: 6px;
	border-radius: 999px;
	background: #B26E5F;
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	text-align: center;
}

/* Trazabilidad administrativa de una ficha. */
.pan-traza { list-style: none; margin: 12px 0 0; padding: 0; }
.pan-traza li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--rule, #E2D8C7);
}
.pan-traza li:last-child { border-bottom: 0; }
.pan-traza strong { font-size: .94rem; }
.pan-traza-fecha { flex: 0 0 auto; font-size: .8rem; color: var(--tinta-suave, #6E5A50); white-space: nowrap; }

/* =========================================================================
 * Carga de clientes en los puntos de venta.
 * ====================================================================== */

a.pan-metrica { text-decoration: none; color: inherit; display: block; }
a.pan-metrica:hover { border-color: var(--pan-oro, #B99657); }

.pan-filtro-barra {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 18px 0;
}
.pan-filtro-barra input[type="search"],
.pan-filtro-barra select {
	padding: 8px 12px;
	border: 1px solid var(--rule, #E2D8C7);
	border-radius: 8px;
	font: inherit;
	font-size: .9rem;
	background: var(--superficie, #FDFBF7);
	color: var(--tinta, #2B2320);
}
.pan-filtro-barra input[type="search"] { min-width: 220px; }

.pan-col-check { width: 34px; text-align: center; }
.pan-col-check input { width: 17px; height: 17px; accent-color: var(--pan-oro, #B99657); }

.pan-tabla-carga td { vertical-align: middle; }
.pan-tabla-carga .pan-ayuda { display: block; font-size: .78rem; }

/* Estado de carga por sistema. El color codifica el estado. */
.pan-carga {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
	white-space: nowrap;
}
.pan-carga--falta    { background: rgba(178, 110, 95, .14); color: #8F4E40; }
.pan-carga--planilla { background: rgba(185, 150, 87, .18); color: #8A6B2F; }
.pan-carga--ok       { background: rgba(111, 127, 106, .18); color: #4E6049; }

/* Barra de acciones sobre la selección. */
.pan-acciones-lote {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 16px;
	padding: 14px 16px;
	background: var(--surface-alt, #F1EADE);
	border: 1px solid var(--rule, #E2D8C7);
	border-radius: 10px;
	/* Se queda a la vista al recorrer una lista larga: la selección se hace
	   arriba y la acción está abajo. */
	position: sticky;
	bottom: 10px;
}
.pan-lote-conteo {
	font-size: .85rem;
	color: var(--tinta-suave, #6E5A50);
	min-width: 150px;
}
.pan-lote-conteo.es-activo { color: var(--tinta, #2B2320); font-weight: 700; }
.pan-lote-conteo.es-alerta { color: #8F4E40; font-weight: 700; }

.pan-lote-campo { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.pan-lote-campo select {
	padding: 7px 11px;
	border: 1px solid var(--rule, #E2D8C7);
	border-radius: 8px;
	font: inherit;
	font-size: .85rem;
}