/* ---------- Paleta ----------
   Los colores del área privada viven acá y en ningún otro lado. El tema oscuro no
   reescribe reglas: sólo le cambia el valor a estas variables, así una regla nueva
   queda con los dos temas resueltos sin escribirla dos veces.

   La landing no participa: tiene su propia hoja y nunca recibe data-tema. */
:root{
	--fondo: #f5f7fb;          /* el lienzo detrás de las tarjetas */
	--superficie: #fff;        /* tarjetas, barra lateral, tablas */
	--superficie-2: #f2f5fa;   /* campos y pistas */
	--superficie-3: #eaeff8;   /* hover */
	--borde: #e3e8f1;
	--borde-suave: #f0f3f8;    /* separadores dentro de una tabla */
	--texto: #171f2e;
	--texto-medio: #45526a;
	/* Los dos grises de apoyo, corregidos. Sobre el blanco de una tarjeta, el tenue daba
	   3,67:1 y el débil 2,61:1, y con ellos están escritos los subtítulos de cada pantalla,
	   las notas al pie de las tarjetas, los rótulos de las columnas de una tabla y el pie
	   de cada cifra: buena parte de lo que esta herramienta explica de sí misma quedaba por
	   debajo del 4,5:1 que pide la norma para texto corriente. Ahora dan 5,29 y 4,79.

	   No es una preferencia: un portal del Estado colombiano se rige por la Resolución 1519
	   de 2020, que adopta WCAG 2.1 AA, y esto es el área donde se trabaja ocho horas por
	   día. La landing resuelve lo mismo con su modo de contraste alto; acá no hay ese
	   interruptor, así que el contraste tiene que venir de fábrica. */
	--texto-tenue: #5f6c85;
	--texto-debil: #66738a;
	--acento: #006a50;         /* el verde institucional de la corporación */
	--acento-claro: #00875f;
	--acento-fondo: #e4f1eb;
	--cabecera: #00382a;
	--sombra: rgba(0, 56, 42, .14);
	--viva: #128a5b;           /* "está adentro ahora" */
}

/* Mismo esqueleto, otros valores. El verde se aclara a propósito: sobre un fondo
   oscuro el #006a50 original queda sin contraste contra el texto. */
[data-tema="oscuro"]{
	--fondo: #0f1220;
	--superficie: #171b2d;
	--superficie-2: #1d2236;
	--superficie-3: #262d47;
	--borde: #2b3149;
	--borde-suave: #212739;
	--texto: #e9ecf6;
	--texto-medio: #b5bdd2;
	--texto-tenue: #8d97b0;
	/* 4,38:1 sobre la superficie oscura, a un pelo del mínimo. Sube a 5,41. */
	--texto-debil: #8791aa;
	--acento: #4cbd92;
	--acento-claro: #79d6b0;
	--acento-fondo: #0e3a2c;
	--cabecera: #0a2119;
	--sombra: rgba(0, 0, 0, .45);
	--viva: #31c78d;
}

/* Cuánto mide la cabecera. No es un color, pero vive acá por el mismo motivo: la usan
   cuatro reglas —el alto de la pantalla, el de la barra lateral y los dos "top" de los
   elementos pegados— y si cada una la escribe a mano, cambiar el padding de la cabecera
   deja tres de ellas mintiendo. En pantallas chicas se corrige en el media query.

   Que lo diga no alcanzaba: la cabecera medía 66 px —40 del botón de tema más 13 de
   relleno arriba y abajo— mientras esto decía 64, y los dos píxeles de diferencia los
   pagaban las cuatro reglas que la leen. La barra lateral pegada se anclaba dos píxeles
   demasiado arriba y su primer renglón quedaba debajo de la cabecera. Ahora la cabecera
   se mide contra esta variable (`min-height`) en lugar de salirle el alto de la suma de
   lo que lleva adentro, así que no puede volver a desfasarse. */
:root{ --cabecera-alto: 64px; }

*{ margin: 0; padding: 0; box-sizing: border-box; }

/* El "display" que el navegador le da a [hidden] lo pisa cualquier regla de clase, y
   varias piezas de estas pantallas son flex o grid. Sin esto quedan a la vista. */
[hidden]{ display: none !important; }

body{
	font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
	min-height: 100vh;
}

/* ============================================================
   La puerta
   ============================================================ */

.login-body{
	background: linear-gradient(160deg, #00382a 0%, #006a50 55%, #12a173 100%);
}

/* La puerta: una sola tarjeta, centrada. */
.login{
	min-height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 32px 20px;
}

/* La tarjeta del login no cambia con el tema: es la única pantalla que se ve antes de
   saber quién entra, y siempre está sobre el mismo fondo verde. */
.login-card{
	width: 100%;
	max-width: 404px;
	background: #fff;
	border-radius: 20px;
	padding: 38px 34px 30px;
	box-shadow: 0 24px 60px rgba(18, 16, 58, .38);
	text-align: center;
}

.login-title{
	font-size: 1.32rem;
	color: #171f2e;
}

.login-subtitle{
	margin: 8px 0 24px;
	font-size: .92rem;
	color: #6b7589;
}

.login-error{
	margin-bottom: 16px;
	padding: 10px 14px;
	font-size: .85rem;
	color: #a4262c;
	background: #fdeeee;
	border: 1px solid #f3c9c9;
	border-radius: 10px;
	text-align: left;
}

/* El mismo aviso vive en el login (siempre claro) y dentro de los formularios del
   panel, que sí cambian de tema. */
[data-tema="oscuro"] .login-error{
	color: #f4949a;
	background: rgba(201, 66, 74, .14);
	border-color: rgba(201, 66, 74, .4);
}

.login-form{
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: left;
}

.login-btn{
	margin-top: 6px;
	padding: 13px;
	font-family: inherit;
	font-size: .98rem;
	font-weight: 700;
	color: #fff;
	background: #006a50;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background .2s, transform .15s;
}

.login-btn:hover{
	background: #00382a;
	transform: translateY(-1px);
}

.login-volver{
	display: inline-block;
	margin-top: 22px;
	font-size: .85rem;
	color: #00875f;
	text-decoration: none;
}

.login-volver:hover{ text-decoration: underline; }

/* ============================================================
   La marca
   ============================================================ */

/* Un bloque para las tres pantallas privadas. El monograma es un cuadrado con las
   iniciales y no una imagen: no hay archivo que perder ni ruta que resolver, y se
   pinta con las variables del tema como cualquier otra cosa. */
.marca{
	display: inline-flex;
	align-items: center;
	gap: 11px;
}

/* Era un cuadrito con las iniciales; ahora es el emblema de la corporacion. Sin
   fondo ni borde redondeado: el PNG es transparente y ya trae su propia forma,
   y cualquier relleno detras le dibujaria una caja que el escudo no tiene. */
.marca-icono{
	display: block;
	width: 38px;
	height: 38px;
	object-fit: contain;
}

.marca-texto{
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-align: left;
}

.marca-nombre{
	font-size: 1.02rem;
	font-weight: 700;
	color: #171f2e;
}

.marca-bajada{
	font-size: .72rem;
	color: #7a869c;
}

/* En el login la marca está sola arriba de la tarjeta y va centrada. */
.marca.is-login{ margin-bottom: 24px; }

/* ============================================================
   Cabecera y estructura
   ============================================================ */

.app-body{
	background: var(--fondo);
	/* Le avisa al navegador de qué color pintar scrollbars y controles nativos. */
	color-scheme: light;
}

[data-tema="oscuro"] .app-body{ color-scheme: dark; }

/* Se queda arriba al desplazar: adentro están quién soy, el botón de tema y el de
   salir, y los tres se buscan en cualquier momento, no sólo al llegar. Va por encima
   de la barra lateral, que también es pegada. */
.app-header{
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* El alto lo manda la variable y no la suma de lo que lleva adentro: es la única forma
	   de que las cuatro reglas que la leen no queden mintiendo el día que un control de
	   acá crezca dos píxeles. El relleno es el mínimo; si el contenido pide más, crece. */
	min-height: var(--cabecera-alto);
	padding: 8px 24px;
	background: var(--cabecera);
	color: #fff;
}

.app-header .marca-nombre{ color: #fff; }
.app-header .marca-bajada{ color: #a9cfc3; }

.app-header .marca-icono{
	background: rgba(255, 255, 255, .16);
}

.app-user{
	display: flex;
	align-items: center;
	gap: 13px;
}

.app-quien{
	font-size: .85rem;
	color: #c3ded4;
	white-space: nowrap;
}

/* El salto al otro lado del sistema: de la plataforma al panel y de vuelta. Va como
   botón y no como enlace suelto porque es la única salida de la pantalla, y tiene que
   encontrarse sin buscarla. */
/* Los tres controles de la derecha miden 40 px de alto. Antes el salto medía 31 y los
   otros dos 40: tres piezas en una fila, con tres altos distintos, alineadas por el
   medio. Es la clase de desalineación que no se nombra pero se nota. */
.app-salto{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 15px;
	font-size: .82rem;
	font-weight: 600;
	color: #00382a;
	background: #f2c94c;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}

.app-salto:hover{ filter: brightness(1.07); }

/* La flecha. El salto es el único control de la cabecera que lleva a otra pantalla —los
   otros dos cambian algo acá mismo— y eso se dice con una flecha antes que con el color. */
.app-salto svg{
	flex: none;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Los dos controles de la cabecera comparten el alto mínimo de un objetivo táctil. No es
   un capricho de norma: esta es la herramienta que se usa ocho horas por día, y buena parte
   de esas horas desde un teléfono en una sesión de plenaria. */
.app-logout{
	min-height: 40px;
	padding: 8px 15px;
	font-family: inherit;
	font-size: .84rem;
	color: #00382a;
	background: #fff;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

/* En oscuro un botón blanco sólido encandila: pasa a la misma pinta translúcida que
   el botón de tema, que ya está al lado. */
[data-tema="oscuro"] .app-logout{
	color: #e9ecf6;
	background: rgba(255, 255, 255, .14);
}

[data-tema="oscuro"] .app-logout:hover{ background: rgba(255, 255, 255, .26); }

/* Botón de tema: dos íconos en el mismo lugar, el CSS destapa el que corresponde. */
.tema-btn{
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	transition: background .18s;
}

.tema-btn:hover{ background: rgba(255, 255, 255, .26); }

.tema-icono{
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* En claro se ofrece la luna; en oscuro, el sol. El ícono dice a dónde vas, no dónde
   estás: es lo que espera quien lo aprieta. */
.tema-icono.is-sol{ display: none; }
[data-tema="oscuro"] .tema-icono.is-luna{ display: none; }
[data-tema="oscuro"] .tema-icono.is-sol{ display: block; }

/* ---- Reportar un error y la cuenta ----
   Los dos botones de quien entró, juntos y con la misma pinta que el de tema. Los arma
   `compartido/barra-usuario.js`. El de reportar lleva el triángulo en ámbar: es la señal
   de peligro de siempre y se encuentra sin leer. */
.cabecera-cuenta{
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cabecera-btn{
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	transition: background .18s;
}

.cabecera-btn:hover{ background: rgba(255, 255, 255, .26); }
.cabecera-btn:focus-visible{ outline: 2px solid #f2c94c; outline-offset: 2px; }

.cabecera-btn svg{
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cabecera-btn.is-peligro{ color: #f2c94c; }

.cabecera-btn.is-usuario{ border-radius: 50%; }
.cabecera-btn.is-usuario[aria-expanded="true"]{ color: #00382a; background: #fff; }

/* El cuadro emergente de la cuenta. Cuelga del botón, alineado a su borde derecho, y se
   dibuja sobre la pantalla sin taparla: se consulta y se deja. */
.cuenta-pop{
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 40;
	width: min(340px, calc(100vw - 24px));
	max-height: calc(100vh - var(--cabecera-alto) - 24px);
	overflow-y: auto;
	padding: 18px;
	color: var(--texto);
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 14px;
	box-shadow: 0 18px 48px var(--sombra);
}

.cuenta-pop-cabeza{
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--borde);
}

.cuenta-avatar{
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	font-size: .95rem;
	font-weight: 700;
	color: #fff;
	background: var(--acento);
	border-radius: 50%;
}

.cuenta-pop-quien{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cuenta-pop-nombre{
	font-size: .98rem;
	overflow-wrap: anywhere;
}

.cuenta-pop-rol{
	font-size: .8rem;
	color: var(--texto-tenue);
}

.cuenta-datos{
	display: grid;
	gap: 10px;
	margin: 14px 0 0;
}

.cuenta-dato{
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: .84rem;
}

.cuenta-dato dt{ color: var(--texto-tenue); }

.cuenta-dato dd{
	margin: 0;
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
}

.cuenta-nota{
	margin: 10px 0 0;
	font-size: .76rem;
	line-height: 1.45;
	color: var(--texto-debil);
}

.cuenta-clave{
	display: grid;
	gap: 10px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--borde);
}

.cuenta-clave-titulo{
	margin: 0;
	font-size: .9rem;
}

.cuenta-clave .btn-primary{ justify-self: start; }
.cuenta-clave .aviso:empty{ display: none; }

/* El cuadro de reportar. Un <dialog> modal: mientras se escribe un reporte no hay nada
   más que hacer en la pantalla. */
.reporte-dialogo{
	width: min(560px, calc(100vw - 28px));
	max-width: none;
	max-height: 88vh;
	height: fit-content;
	margin: auto;
	padding: 0;
	color: var(--texto);
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 16px;
	box-shadow: 0 24px 64px var(--sombra);
	overflow: hidden;
}

.reporte-dialogo::backdrop{ background: rgba(8, 14, 26, .6); }

.reporte-dialogo-caja{
	max-height: 88vh;
	padding: 18px 20px 20px;
	overflow-y: auto;
}

.reporte-dialogo-alto{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.reporte-dialogo-titulo{
	margin: 0;
	font-size: 1.1rem;
}

.reporte-dialogo-bajada{
	margin: 6px 0 16px;
	font-size: .84rem;
	color: var(--texto-tenue);
}

.reporte-dialogo-cerrar{
	flex: none;
	width: 34px;
	height: 34px;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--texto-tenue);
	background: none;
	border: 1px solid var(--borde);
	border-radius: 9px;
	cursor: pointer;
}

.reporte-dialogo-cerrar:hover{ color: var(--texto); background: var(--superficie-3); }
.reporte-dialogo .aviso:empty{ display: none; }

.app-shell{
	display: flex;
	align-items: flex-start;
	min-height: calc(100vh - var(--cabecera-alto));
}

/* Arranca donde termina la cabecera, no en el borde de la pantalla: con top:0 el menú
   se metería debajo de la cabecera pegada y las primeras opciones quedarían tapadas. */
/* 252 y no 228. El renglón más largo del menú es "Perfiles de diputados" con su globito
   de once, y con el ícono adelante pide 219 px: en 228 se partía en dos líneas y quedaba
   desalineado con los otros diez. Los 252 dejan 224 de contenido, seis de sobra para un
   globito de dos cifras. Se los paga el área de trabajo, que a 1280 px pasa de 1037 a
   1028 y no se entera; recortarle el nombre a la pantalla para que entre en el menú
   habría sido pagarlo con lo único que el menú tiene para decir. */
/* Mide exactamente lo que queda de pantalla debajo de la cabecera y se desplaza solo.
   Antes medía lo que su contenido: con el grupo de documentos el menú pasó a ser más alto
   que la ventana, la rueda del ratón encima de él movía la página entera y, al terminar
   la lista, debajo se veía el fondo de la página y no el del menú. `overscroll-behavior`
   evita que, al llegar al final de la lista, el desplazamiento siga en el contenido. */
.app-side{
	position: sticky;
	top: var(--cabecera-alto);
	flex: 0 0 252px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: calc(100vh - var(--cabecera-alto));
	padding: 20px 14px 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	background: var(--superficie);
	border-right: 1px solid var(--borde);
	transition: flex-basis .22s ease, padding .22s ease;
}

/* El pie del menú: una franja con fondo propio, pegada abajo aunque la lista se desplace,
   con el botón que oculta el menú. Los márgenes negativos la llevan de borde a borde. */
.side-pie{
	position: sticky;
	bottom: 0;
	margin: auto -14px 0;
	padding: 12px 14px;
	background: var(--superficie-2);
	border-top: 1px solid var(--borde);
}

.side-plegar{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 9px 12px;
	font-family: inherit;
	font-size: .86rem;
	color: var(--texto-medio);
	background: none;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	transition: background .18s, color .18s;
}

.side-plegar:hover{
	background: var(--superficie-3);
	color: var(--acento);
}

.side-plegar:focus-visible{ outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---- El menú oculto ----
   Queda una columna de íconos. Los textos se apagan con `font-size: 0` porque son nodos
   de texto sueltos dentro del enlace y no tienen elemento propio que esconder; los íconos
   miden en píxeles y no se enteran. El globito pasa a una esquina del ícono. Sólo en
   escritorio: en un teléfono el menú ya es una tira horizontal. */
@media (min-width: 821px){
	[data-menu="plegado"] .app-side{
		flex-basis: 72px;
		padding-inline: 12px;
	}

	[data-menu="plegado"] .side-title{
		height: 1px;
		margin: 10px 6px;
		font-size: 0;
		background: var(--borde);
	}

	[data-menu="plegado"] .side-link,
	[data-menu="plegado"] .side-plegar{
		position: relative;
		justify-content: center;
		gap: 0;
		padding-inline: 0;
		font-size: 0;
	}

	[data-menu="plegado"] .side-badge{
		position: absolute;
		top: 3px;
		right: 3px;
		min-width: 16px;
		padding: 0 4px;
		font-size: .6rem;
		line-height: 16px;
	}

	[data-menu="plegado"] .side-pie{ margin-inline: -12px; padding-inline: 12px; }

	[data-menu="plegado"] .side-plegar .side-icono{ transform: scaleX(-1); }
}

@media (prefers-reduced-motion: reduce){
	.app-side{ transition: none; }
}

.side-title{
	margin: 18px 12px 6px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--texto-debil);
}

.side-title:first-child{ margin-top: 0; }

.side-link{
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 9px 12px;
	font-size: .89rem;
	color: var(--texto-medio);
	text-decoration: none;
	border-radius: 9px;
	transition: background .18s, color .18s;
}

/* El ícono. Con once opciones de nombres largos —"Perfiles de diputados", "Páginas del
   portal"— volver a una pantalla era leer once renglones parecidos; el dibujo se reconoce
   antes que la palabra, que es lo que uno hace veinte veces por día en un menú.

   Van a trazo y no rellenos, con el mismo grosor que los del portal, y heredan el color
   del renglón: no hay un color de ícono que mantener aparte del de su texto. */
.side-icono{
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .75;
}

.side-link:hover{
	background: var(--superficie-3);
	color: var(--acento);
}

/* Dónde estoy. Era un rectángulo verde sólido de ancho completo con el texto en blanco:
   el elemento más pesado de la pantalla para decir algo que ya se sabe —acabo de apretarlo—
   y que compite con el verde de los botones, que es el color de lo que hace algo.

   Ahora lo dice el fondo tenue, el color del texto y la barra del borde izquierdo. Pesa
   lo que tiene que pesar una marca de posición: lo suficiente para encontrarla de un
   vistazo, no tanto como para mirarla primero. */
.side-link.is-active{
	position: relative;
	background: var(--acento-fondo);
	color: var(--acento);
	font-weight: 600;
}

.side-link.is-active .side-icono{ opacity: 1; }

.side-link.is-active::before{
	content: "";
	position: absolute;
	top: 9px;
	bottom: 9px;
	left: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--acento);
}

/* El pie del menú. "Mi cuenta" no es una sección más: es de quien entró, no del sitio, y
   antes llevaba su propio título de grupo —"Tú"— para decir eso mismo con una palabra y
   un renglón de más. La línea lo dice sin texto, y lo empuja abajo del todo, que es donde
   se busca. */
.side-link.is-pie{
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--borde);
	border-radius: 0;
}

.side-link.is-pie.is-active::before{ top: 18px; }

/* La etiqueta de lo que todavía no está construido. Se dice en el menú y se repite
   adentro de la pantalla: prometer una función que no existe es peor que no tenerla. */
/* Las dos cosas que van al final del renglón. Con el ícono adelante, el `space-between`
   que las empujaba dejó de servir —repartiría el aire entre tres piezas y no entre dos—,
   así que se empujan solas. */
.side-marca,
.side-badge{ margin-left: auto; }

.side-marca{
	padding: 2px 6px;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--texto-debil);
	background: var(--superficie-2);
	border-radius: 5px;
}

/* Sobre el renglón activo, que ya no es un bloque verde sino un fondo tenue, la etiqueta
   en blanco sobre blanco translúcido desaparecía. Toma el color del renglón. */
.side-link.is-active .side-marca{
	color: var(--acento);
	background: var(--superficie);
}

.side-badge{
	min-width: 20px;
	padding: 1px 6px;
	font-size: .7rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: var(--viva);
	border-radius: 999px;
}

.app-main{
	flex: 1;
	min-width: 0;
	padding: 26px 28px 44px;
}

/* ============================================================
   Encabezado de vista, tarjetas, tablas
   ============================================================ */

.view{ display: none; }
.view.is-active{ display: block; }

.head{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.h1{
	font-size: 1.38rem;
	color: var(--texto);
}

.sub{
	margin-top: 4px;
	font-size: .88rem;
	color: var(--texto-tenue);
}

/* `minmax(0, 1fr)` y no `1fr` a secas. `1fr` quiere decir `minmax(auto, 1fr)`, y ese
   `auto` es el ancho mínimo del contenido: una columna con la palabra "Superadministrador"
   en cuerpo 1,55 rem se negaba a bajar de 271 px mientras las otras tres quedaban en 221.
   Las cuatro cifras del tablero, desalineadas, en la primera pantalla que se ve al entrar.
   Con el mínimo en cero, el texto se ajusta y las columnas vuelven a ser iguales. */
.kpi-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

/* Sin borde, a diferencia de `.card`. Las dos piezas del tablero llevaban el mismo fondo,
   el mismo borde y el mismo radio, así que una pantalla eran ocho cajas idénticas y nada
   decía cuál se lee primero. La cifra se distingue por lo que es —un número grande— y le
   alcanza el cambio de fondo para despegarse del lienzo. */
.kpi{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.kpi-label{
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--texto-debil);
}

.kpi-value{
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--texto);
	/* Una fecha larga o un rol de dieciocho letras tienen que poder partirse: la columna
	   ya no cede ancho por ellos. */
	overflow-wrap: anywhere;
}

/* Una cifra que es una palabra —el rol— y no un número: a 1,7 rem "Superadministrador" se
   partía en dos renglones. */
.kpi-value.is-texto{ font-size: 1.2rem; line-height: 1.3; padding-top: .3rem; }

.kpi-pie{
	font-size: .75rem;
	color: var(--texto-debil);
}

.card{
	margin-bottom: 18px;
	padding: 18px 20px 20px;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	overflow-x: auto;
	/* La tarjeta es la que se desplaza cuando adentro hay una tabla más ancha que la
	   pantalla. En un teléfono, ese arrastre al llegar al extremo se lo queda el navegador
	   y dispara el gesto de "atrás": se sale de la plataforma queriendo ver una columna. */
	overscroll-behavior-x: contain;
}

.card-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.card-title{
	font-size: 1rem;
	color: var(--texto);
}

.card-note{
	margin-top: 14px;
	font-size: .78rem;
	color: var(--texto-debil);
}

.card-note strong{ color: var(--texto-tenue); }

.data-table{
	width: 100%;
	border-collapse: collapse;
	font-size: .84rem;
}

.data-table th{
	padding: 0 10px 10px 0;
	text-align: left;
	font-size: .71rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--texto-debil);
	border-bottom: 1px solid var(--borde);
	white-space: nowrap;
}

.data-table td{
	padding: 11px 10px 11px 0;
	color: var(--texto-medio);
	border-bottom: 1px solid var(--borde-suave);
	vertical-align: middle;
}

.data-table tr:last-child td{ border-bottom: 0; }
.data-table td:first-child{ color: var(--texto); }

/* El nombre y el usuario en la misma celda: uno es cómo se llama y el otro con qué
   entra, y en una tabla de cuentas se necesitan los dos a la vez. */
.persona-nombre{
	font-weight: 700;
	color: var(--texto);
}

.persona-usuario{
	font-size: .77rem;
	color: var(--texto-debil);
}

.vacio{
	padding: 26px 0;
	text-align: center;
	font-size: .86rem;
	color: var(--texto-debil);
}

/* ============================================================
   Piezas sueltas
   ============================================================ */

.tag{
	display: inline-block;
	padding: 4px 10px;
	font-size: .72rem;
	font-weight: 600;
	border-radius: 999px;
	white-space: nowrap;
}

.tag.is-ok{ color: #128a5b; background: #e3f6ec; }
.tag.is-info{ color: #006a50; background: #e4f1eb; }
.tag.is-wait{ color: #a5750d; background: #fdf2d9; }
.tag.is-off{ color: #a4262c; background: #fdeeee; }

/* Las etiquetas guardan el color pero invierten la relación: en oscuro el fondo pastel
   sería una mancha brillante, así que el color pasa al texto. */
[data-tema="oscuro"] .tag.is-ok{ color: #5cd6a0; background: rgba(18, 138, 91, .2); }
[data-tema="oscuro"] .tag.is-info{ color: #79d6b0; background: rgba(0, 135, 95, .24); }
[data-tema="oscuro"] .tag.is-wait{ color: #e8bb55; background: rgba(217, 160, 33, .18); }
[data-tema="oscuro"] .tag.is-off{ color: #f4949a; background: rgba(201, 66, 74, .18); }

/* El punto de "adentro ahora". Va antes del nombre y no como una columna aparte:
   es un estado de la persona, no un dato más de la fila. */
.punto{
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--texto-debil);
	vertical-align: 1px;
}

.punto.is-viva{ background: var(--viva); }

.leyenda{
	display: inline-flex;
	gap: 14px;
	font-size: .76rem;
	color: var(--texto-debil);
}

.leyenda-item{ display: inline-flex; align-items: center; gap: 6px; }

.btn-primary{
	padding: 10px 18px;
	font-family: inherit;
	font-size: .86rem;
	font-weight: 600;
	color: #fff;
	background: var(--acento);
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	transition: background .2s;
}

.btn-primary:hover{ background: var(--acento-claro); }
.btn-primary:disabled{ opacity: .55; cursor: default; }

a.btn-primary{
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* Un botón de tabla no puede tener el mismo aire que el de un formulario: entra en una
   celda y convive con tres más. */
.btn-fila{
	padding: 5px 11px;
	font-family: inherit;
	font-size: .78rem;
	font-weight: 600;
	color: var(--acento);
	background: transparent;
	border: 1px solid var(--borde);
	border-radius: 7px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s, border-color .18s;
}

.btn-fila:hover{
	background: var(--superficie-3);
	border-color: var(--acento);
}

.btn-fila:disabled{ opacity: .45; cursor: default; }

/* El que borra o apaga. Rojo y con menos peso que el de al lado: tiene que poder
   encontrarse, pero no competir por el toque con la acción que sí se deshace. */
.btn-fila.is-peligro{ color: #a4262c; }
.btn-fila.is-peligro:hover{ border-color: #a4262c; }

[data-tema="oscuro"] .btn-fila.is-peligro{ color: #f4949a; }
[data-tema="oscuro"] .btn-fila.is-peligro:hover{ border-color: #f4949a; }

.fila-acciones{
	display: flex;
	gap: 7px;
	justify-content: flex-end;
}

/* ============================================================
   Formularios
   ============================================================ */

.form-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.form-grid .field.is-full{ grid-column: 1 / -1; }

.field > span{
	display: block;
	margin-bottom: 6px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--texto-medio);
}

.field > span small{
	font-weight: 400;
	color: var(--texto-debil);
}

/* El tamaño de letra de un campo no es sólo estética: Safari de iOS acerca la página
   sola en cuanto enfocas un campo de menos de 16 px, y deja al usuario dentro de un
   formulario ampliado del que tiene que salir pellizcando. Por eso el mínimo de 16 px
   —el max() mantiene los 0,93 rem cuando alguien agranda la letra del sistema, que es
   justo lo que no hay que pisarle. */
.field input,
.field select,
.field textarea{
	width: 100%;
	padding: 11px 13px;
	font-family: inherit;
	font-size: max(16px, .93rem);
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 10px;
	outline: none;
	transition: border-color .2s, background .2s;
}

/* El área de texto entró con el constructor de noticias, que es donde se escriben
   párrafos. Hereda todo lo del input; lo único propio es que se pueda estirar sólo hacia
   abajo —a lo ancho la caja ya ocupa la columna, y dejarla crecer rompe la rejilla— y que
   el renglón sea el de leer, no el de un campo de una línea. */
.field textarea{
	min-height: 84px;
	line-height: 1.6;
	resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
	border-color: var(--acento-claro);
	background: var(--superficie);
}

/* El cambio de color del borde de arriba es de 1 px y no alcanza como único indicador de
   foco en una herramienta que se usa ocho horas por día con teclado —la misma exigencia
   de la Resolución 1519 de 2020 que fijó el contraste de fábrica, ver el comentario de la
   paleta arriba del todo—. El mismo anillo que ya usan `.doc-seccion` y
   `.gal-card-cuerpo`, así que un campo no inventa una señal nueva. `:focus-visible` y no
   `:focus`: sólo aparece navegando con teclado, no al hacer clic con el mouse. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
	outline: 2px solid var(--acento-claro);
	outline-offset: 2px;
}

/* ---- Los módulos de una cuenta ----
   El mismo bloque se usa en el alta y adentro de la tabla. En la tabla no hay un modo
   "editar": cada casilla es el cambio, así que la variante compacta sólo achica lo
   suficiente para que las seis opciones entren en una celda. */
.modulos{
	padding: 12px 16px 14px;
	border: 1px solid var(--borde);
	border-radius: 12px;
}

.modulos legend{
	padding: 0 6px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--texto-medio);
}

/* Apagado y no escondido: así se entiende que el superadministrador no elige porque
   los tiene todos, en vez de parecer que el formulario perdió una parte. */
.modulos:disabled{ opacity: .55; }

.modulos-lista{
	display: flex;
	flex-wrap: wrap;
	gap: 9px 18px;
}

.modulo{
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: .85rem;
	color: var(--texto);
	cursor: pointer;
}

/* El ancho completo y el padding vienen de .field input, que acá no aplican: una
   casilla no es un campo de texto. */
.modulo input{
	width: 16px;
	height: 16px;
	padding: 0;
	accent-color: var(--acento);
	cursor: pointer;
}

.modulos-lista.is-compacta{ gap: 5px 12px; }
.modulos-lista.is-compacta .modulo{ font-size: .77rem; }

/* ---- El alta de una cuenta ----
   Tres pasos numerados —quién es, qué puesto, a qué entra— y un resumen de lo que va a
   quedar. Las áreas son tarjetas con sus secciones adentro: así se ve de un vistazo que
   una cuenta puede tener la prensa entera o sólo la galería. */
.alta-form{
	display: grid;
	gap: 22px;
}

.alta-paso{
	display: grid;
	gap: 12px;
}

.alta-paso-titulo{
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: .92rem;
	color: var(--texto);
}

.alta-paso-num{
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	font-size: .74rem;
	color: #fff;
	background: var(--acento);
	border-radius: 50%;
}

.alta-nota{ margin: 0; }

.field-pista{
	display: block;
	margin-top: 5px;
	font-size: .75rem;
	color: var(--texto-debil);
}

.field-pista.is-error{ color: #a4262c; }
[data-tema="oscuro"] .field-pista.is-error{ color: #f4949a; }

.clave-fila{
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.clave-fila input{ flex: 1; min-width: 0; }
.clave-fila .btn-fila{ flex: none; }

/* Las plantillas: botones chicos, uno por puesto frecuente. */
.alta-plantillas{
	display: grid;
	gap: 7px;
}

.alta-plantillas-titulo{
	font-size: .76rem;
	font-weight: 600;
	color: var(--texto-debil);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.alta-plantillas-lista{
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.alta-plantilla{
	padding: 6px 12px;
	font-family: inherit;
	font-size: .8rem;
	color: var(--texto-medio);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 999px;
	cursor: pointer;
}

.alta-plantilla:hover{ border-color: var(--acento); color: var(--acento); }
.alta-plantilla.is-activa{ color: #fff; background: var(--acento); border-color: var(--acento); }
.alta-plantilla:focus-visible{ outline: 2px solid var(--acento); outline-offset: 2px; }

/* Los roles, como tarjetas: el nombre y qué puede, a la vista. */
.rol-opciones{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
}

.rol-opcion{
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px;
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.rol-opcion:hover{ border-color: var(--acento-claro); }
.rol-opcion:has(input:checked){ border-color: var(--acento); background: var(--acento-fondo); }
.rol-opcion:has(input:focus-visible){ outline: 2px solid var(--acento); outline-offset: 2px; }

.rol-opcion input{
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--acento);
}

.rol-opcion-texto strong{ display: block; font-size: .87rem; color: var(--texto); }
.rol-opcion-texto small{ display: block; margin-top: 3px; font-size: .76rem; line-height: 1.45; color: var(--texto-tenue); }

/* Las áreas con sus secciones. */
.permisos{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 10px;
}

.permiso{
	padding: 12px 14px;
	border: 1px solid var(--borde);
	border-radius: 12px;
	transition: border-color .2s, background .2s;
}

.permiso.is-marcada{ border-color: var(--acento); background: var(--acento-fondo); }

.permiso-area{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--texto);
	cursor: pointer;
}

.permiso-area input{
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--acento);
	cursor: pointer;
}

.permiso-cuenta{
	margin-left: auto;
	font-size: .72rem;
	font-weight: 500;
	color: var(--acento);
}

.permiso-secciones{
	display: grid;
	gap: 6px;
	margin-top: 10px;
	padding: 10px 0 0 24px;
	border-top: 1px solid var(--borde-suave);
}

.permiso-secciones .modulo{ font-size: .82rem; }

/* A qué diputado se ata la cuenta del blog. */
.permiso-diputado{
	display: grid;
	gap: 5px;
	margin-top: 10px;
	padding-top: 10px;
	font-size: .78rem;
	color: var(--texto-tenue);
	border-top: 1px solid var(--borde-suave);
}

.permiso-diputado select{
	width: 100%;
	padding: 7px 9px;
	font-family: inherit;
	font-size: .82rem;
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 8px;
}

/* El superadministrador, el delegado y el ingeniero no eligen áreas. Apagado y no
   escondido, para que se entienda por qué. */
.alta-paso.is-apagado .permisos{ opacity: .45; pointer-events: none; }

.alta-resumen{
	padding: 14px 16px;
	background: var(--superficie-2);
	border: 1px dashed var(--borde);
	border-radius: 12px;
}

.alta-resumen-puesto{ margin: 0; font-size: .88rem; color: var(--texto-medio); }
.alta-resumen-puesto strong{ color: var(--texto); }

.alta-resumen-lista{
	margin: 8px 0 0;
	padding-left: 18px;
	font-size: .8rem;
	line-height: 1.6;
	color: var(--texto-medio);
}

.alta-resumen-lista .is-no{ color: var(--texto-debil); }

.alta-enviar{ display: grid; gap: 10px; justify-items: start; }

.alta-lista{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 12px 16px;
	font-size: .84rem;
	color: #128a5b;
	background: #e3f6ec;
	border-radius: 12px;
}

.alta-lista p{ flex: 1 1 260px; margin: 0; }
[data-tema="oscuro"] .alta-lista{ color: #5cd6a0; background: rgba(18, 138, 91, .2); }

.dialogo-acciones{
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

#permisosDialogo{ width: min(760px, calc(100vw - 28px)); }

/* El alta en un cuadro emergente: ancho para que las áreas entren de a tres, y con el
   título y los botones siempre a la vista mientras se desplaza lo del medio. */
.alta-dialogo{ width: min(980px, calc(100vw - 28px)); }
.alta-dialogo .reporte-dialogo-caja{ padding: 0; }

.alta-dialogo .reporte-dialogo-alto{
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 16px 22px;
	background: var(--superficie);
	border-bottom: 1px solid var(--borde);
}

.alta-dialogo .alta-form{ padding: 20px 22px 0; }

.alta-dialogo .alta-enviar{
	position: sticky;
	bottom: 0;
	justify-items: stretch;
	margin: 0 -22px;
	padding: 12px 22px;
	background: var(--superficie);
	border-top: 1px solid var(--borde);
}

.alta-dialogo .alta-enviar .dialogo-acciones{ margin-top: 0; }

.head-acciones{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.alta-lista .reporte-dialogo-cerrar{ width: 28px; height: 28px; font-size: 1.1rem; }
#altaLista{ margin-bottom: 18px; }
#usuariosError{ margin: 0 0 14px; }

/* Las áreas de una cuenta en la tabla: etiquetas, y el botón para cambiarlas. */
.areas-etiquetas{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.areas-editar{ margin-top: 6px; }

@media (max-width: 560px){
	.clave-fila{ flex-wrap: wrap; }
	.clave-fila input{ flex-basis: 100%; }
}

/* El desplegable de rol adentro de una fila: del tamaño de la celda, no del formulario. */
.rol-select{
	padding: 5px 8px;
	font-family: inherit;
	font-size: .79rem;
	font-weight: 600;
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 7px;
	cursor: pointer;
}

.rol-select:disabled{
	cursor: default;
	opacity: .7;
}

/* El aviso de guardado. Sin fondo cuando está vacío: aparece y se va sin mover nada
   de lugar, que es lo que se espera de algo que confirma. */
.aviso{
	min-height: 18px;
	margin-top: 10px;
	font-size: .8rem;
	font-weight: 600;
	color: var(--viva);
}

/* ============================================================
   El registro
   ============================================================ */

/* Tres columnas: quién, qué y cuándo. El "cuándo" va al final y en relativo —"hace 3
   minutos"— porque leyendo de arriba abajo lo que se busca es hasta dónde llegar, no la
   hora exacta de cada renglón. La hora completa está en el title. */
.hilo-item{
	display: grid;
	grid-template-columns: 130px 1fr auto;
	align-items: baseline;
	gap: 12px;
	padding: 9px 0;
	font-size: .82rem;
	border-bottom: 1px solid var(--borde-suave);
}

.hilo-item:last-child{ border-bottom: 0; }

.hilo-quien{
	font-weight: 700;
	color: var(--texto);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hilo-que{ color: var(--texto-medio); }

.hilo-accion{
	display: inline-block;
	margin-right: 8px;
	padding: 1px 7px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--acento);
	background: var(--acento-fondo);
	border-radius: 5px;
}

/* Un ingreso rechazado no es un movimiento más: es lo único de esta lista que puede
   ser el rastro de alguien intentando entrar. */
.hilo-accion.is-alerta{
	color: #a4262c;
	background: #fdeeee;
}

[data-tema="oscuro"] .hilo-accion.is-alerta{
	color: #f4949a;
	background: rgba(201, 66, 74, .18);
}

.hilo-cuando{
	font-size: .74rem;
	color: var(--texto-debil);
	white-space: nowrap;
}

/* ============================================================
   Reportes de error
   ============================================================
   No son un renglón corto como el registro: llevan un título, quién y cuándo, un
   párrafo que puede ser largo y hasta un adjunto. Por eso van en columna y no en la
   grilla de tres columnas de `.hilo-item`, que truncaría el título a la fuerza. */
.reporte-item{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 0;
	border-bottom: 1px solid var(--borde-suave);
}

.reporte-item:last-child{ border-bottom: 0; }

.reporte-titulo{
	font-size: .88rem;
	font-weight: 700;
	color: var(--texto);
}

.reporte-meta{
	font-size: .74rem;
	color: var(--texto-debil);
}

.reporte-cuerpo{
	font-size: .82rem;
	color: var(--texto-medio);
	white-space: pre-wrap;
}

.reporte-item .fila-acciones{ margin-top: 4px; }

/* `.reporte-item` es `flex-direction:column`, así que sin esto el adjunto se estira al
   100% del ancho de la tarjeta en vez de quedar del tamaño de su contenido. */
.reporte-adjunto{
	align-self: flex-start;
	display: inline-flex;
}

.reporte-adjunto img{
	display: block;
	max-width: 220px;
	max-height: 140px;
	border-radius: 8px;
	border: 1px solid var(--borde-suave);
}

/* ============================================================
   La plataforma: tarjetas de módulo
   ============================================================ */

.modulo-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: 14px;
}

.modulo-secciones{
	display: grid;
	gap: 20px;
}

.modulo-seccion-titulo{
	margin: 0 0 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--texto-debil);
}

.modulo-card{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	column-gap: 14px;
	row-gap: 4px;
	padding: 16px 18px;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 13px;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	transition: transform .16s, box-shadow .16s, border-color .16s;
}

.modulo-card:hover{
	transform: translateY(-2px);
	border-color: var(--acento);
	box-shadow: 0 10px 24px var(--sombra);
}

.modulo-card:focus-visible{ outline: 2px solid var(--acento); outline-offset: 2px; }

/* El ícono del menú, en una pastilla del color de la corporación. Ocupa las dos filas de
   la izquierda: título y bajada se leen a su lado. */
.modulo-card-icono{
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--acento);
	background: var(--acento-fondo);
	border-radius: 11px;
}

.modulo-card-icono svg{
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 1;
}

.modulo-card-titulo{
	font-size: .95rem;
	font-weight: 700;
	color: var(--texto);
}

.modulo-card-texto{
	grid-column: 2;
	font-size: .8rem;
	line-height: 1.45;
	color: var(--texto-tenue);
}

/* ============================================================
   El panel: documentos
   ============================================================

   Una tabla de setenta y cinco filas donde lo único que cambia entre una y otra es si el
   PDF está o no es una tabla que se lee entera para encontrar una cosa. En cuadros, el
   estado es el color y la forma del bloque: las que faltan se ven de lejos sin leer
   ninguna, que es la pregunta con la que se entra a esta pantalla. */

/* La tarjeta de cada página en la primera pantalla. Es un .kpi que además se presiona, así
   que sólo agrega lo que un <button> necesita para no parecer uno del navegador. */
/* ---- Las páginas con documentos ----
   Siete cuadros, uno por página del portal que tiene tablas: Ordenanzas, Actas,
   Convocatorias y las demás. Cada uno abre la suya.

   El contenedor llevaba `class="kpis"`, que no existe en ninguna hoja. Sin regla, los
   siete botones caían en flujo normal midiendo cada uno lo que decía adentro, así que
   bajaban en escalera con siete anchos distintos. Ahora son una rejilla pareja.

   Lo que dice cada cuadro también cambió. Antes era un marcador —"107/107", "las 5
   tablas, completas", "faltan 8 · 27 tablas"— y un marcador supone que hay un final:
   esto no lo tiene, porque cada sesión trae actas nuevas y cada periodo ordenanzas
   nuevas. "Completas" era verdad hasta la semana siguiente. Queda el nombre, que es lo
   que se viene a buscar, y cuántos documentos hay, que es un número que sólo crece. */
.doc-secciones{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.doc-seccion{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px;
	font-family: inherit;
	text-align: left;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 14px;
	cursor: pointer;
	transition: transform .16s, box-shadow .16s, border-color .16s;
}

.doc-seccion:hover{
	transform: translateY(-2px);
	border-color: var(--acento);
	box-shadow: 0 10px 24px var(--sombra);
}

.doc-seccion:focus-visible{
	outline: 2px solid var(--acento);
	outline-offset: 2px;
}

/* El nombre de la página es lo que se lee, así que va en el cuerpo en el que antes iba
   la cifra. Un cuadro que se aprieta para entrar a "Actas" tiene que decir "Actas" más
   fuerte que ninguna otra cosa. */
.doc-seccion-nombre{
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--texto);
}

.doc-seccion-pie{
	font-size: .78rem;
	color: var(--texto-debil);
}

/* La caja del buscador no genera caja: su hijo pasa a colgar de la vista entera. Un
   elemento pegajoso sólo se desplaza adentro del rectángulo de su padre, y un envoltorio
   que mide exactamente lo que mide la barra no le deja ni un píxel por donde moverse —se
   despegaría y se iría con el scroll, que es justo lo que no se quería—. */
#documentosBarra{ display: contents; }

/* ---- El buscador ----
   Pegado bajo la cabecera mientras se recorre la rejilla: con tres tablas y cuarenta
   convocatorias, un campo que se fue de la pantalla obliga a subir para corregir una letra.

   El `top` es la altura de la cabecera y no cero porque la cabecera también es pegajosa y
   está por encima: a cero, el buscador se pegaría debajo de ella y no se vería.

   Vive afuera de la tarjeta, y eso tampoco es casual: `.card` lleva `overflow-x: auto` y
   eso la convierte en el contenedor de scroll de lo que tiene dentro, así que un sticky
   ahí se pega a una caja que no se desplaza nunca —o sea, no se pega—. */
.doc-barra{
	position: sticky;
	top: var(--cabecera-alto);
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 12px 0 14px;
	background: var(--fondo);
}

.doc-buscar{
	position: relative;
	flex: 1 1 260px;
	min-width: 0;
}

.doc-buscar input{
	width: 100%;
	padding: 11px 38px 11px 38px;
	font-family: inherit;
	/* Los 16 px son los de iOS: por debajo, Safari acerca la página sola al enfocar. */
	font-size: max(16px, .9rem);
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 10px;
	outline: none;
	transition: border-color .2s, background .2s;
}

.doc-buscar input:focus{
	border-color: var(--acento-claro);
	background: var(--superficie);
}

/* El navegador dibuja su propia "x" en un input[type=search] y queda encima de la
   nuestra, que además sabe devolver el foco al campo. */
.doc-buscar input::-webkit-search-cancel-button{ display: none; }

.doc-buscar-icono{
	position: absolute;
	top: 50%;
	left: 13px;
	width: 15px;
	height: 15px;
	transform: translateY(-50%);
	fill: none;
	stroke: var(--texto-debil);
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}

.doc-buscar-limpiar{
	position: absolute;
	top: 50%;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	transform: translateY(-50%);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1;
	color: var(--texto-debil);
	background: transparent;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
}

.doc-buscar-limpiar:hover{ color: var(--texto); background: var(--superficie-3); }

/* Los tres estados posibles de una fila. Son botones y no un <select> porque son tres y
   se alternan: un desplegable escondería dos de cada tres y costaría dos clics. */
.doc-filtros{
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	gap: 6px;
	padding: 3px;
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 10px;
}

.doc-filtro{
	padding: 7px 13px;
	font-family: inherit;
	font-size: .78rem;
	font-weight: 600;
	color: var(--texto-tenue);
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: color .16s, background .16s;
}

.doc-filtro:hover{ color: var(--texto); }

.doc-filtro[aria-pressed="true"]{
	color: var(--acento);
	background: var(--superficie);
	box-shadow: 0 1px 3px var(--sombra);
}

.doc-cuenta{
	flex: 0 0 auto;
	margin-left: auto;
	font-size: .78rem;
	color: var(--texto-debil);
	white-space: nowrap;
}

/* ---- La rejilla ---- */

.doc-grupo{ margin-bottom: 30px; }

.doc-grupo-titulo{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
	font-size: .95rem;
	color: var(--texto);
}

.doc-grupo-cuenta{
	font-size: .78rem;
	font-weight: 400;
	color: var(--texto-debil);
}

.doc-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
	gap: 12px;
}

/* El cuadro. El borde izquierdo es el estado: verde cuando el documento está, ámbar
   cuando falta. Es lo que hace que una rejilla de veintiocho se lea de un vistazo. */
.doc-card{
	display: flex;
	flex-direction: column;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-left: 3px solid var(--borde);
	border-radius: 13px;
	overflow: hidden;
	transition: transform .16s, box-shadow .16s, border-color .16s;
}

.doc-card:hover{
	transform: translateY(-2px);
	box-shadow: 0 10px 24px var(--sombra);
}

.doc-card.is-cargado{ border-left-color: var(--viva); }
.doc-card.is-pendiente{ border-left-color: #d9a021; }

[data-tema="oscuro"] .doc-card.is-pendiente{ border-left-color: #e8bb55; }

/* El cuerpo es el botón que abre la vista previa: presionar "el cuadro" tiene que ser
   presionar el cuadro, no cazar un enlace adentro. Las acciones viven en su propio pie,
   afuera de él, porque un botón adentro de otro botón no es HTML válido y el navegador
   lo desarma donde menos conviene. */
.doc-card-cuerpo{
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 7px;
	padding: 15px 16px 14px;
	font-family: inherit;
	text-align: left;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.doc-card-cuerpo:hover{ background: var(--superficie-3); }

.doc-card-cuerpo:focus-visible{
	outline: 2px solid var(--acento-claro);
	outline-offset: -3px;
}

.doc-card-marcas{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* Que la fila la agregó el panel y no viene del HTML de la página. Importa porque son las
   únicas que se pueden borrar y a las que se les corrige el texto desde acá. */
.doc-card-propia{
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--texto-debil);
}

.doc-card-titulo{
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--texto);
	/* El número de una ordenanza no se parte a mitad de palabra; un título largo sí tiene
	   que poder cortarse antes que estirar el cuadro y romper la rejilla. */
	overflow-wrap: anywhere;
}

/* La segunda columna de una ordenanza es una fecha, pero la de una convocatoria es la
   descripción de una actuación entera. Sin recorte, un cuadro mide el triple que el de al
   lado y la rejilla deja de leerse de un vistazo, que es lo único que tenía a favor.
   Tres renglones alcanzan para reconocer la fila; el texto completo está a un clic, en la
   vista previa, y en el `title` mientras tanto. */
.doc-card-sub{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-size: .8rem;
	color: var(--texto-tenue);
	overflow-wrap: anywhere;
}

.doc-card-archivo{
	margin-top: auto;
	padding-top: 6px;
	font-size: .74rem;
	color: var(--texto-debil);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.doc-card-acciones{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 14px 13px;
}

/* Las ponencias de una fila: píldoras que abren su PDF, con su × para quitarlas. */
.doc-anexos{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 14px 10px;
}

.doc-visor-ficha .doc-anexos{ padding: 0; }

.doc-anexo{
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px 4px 3px 10px;
	font-size: .74rem;
	font-weight: 600;
	color: #128a5b;
	background: #e3f6ec;
	border-radius: 999px;
}

[data-tema="oscuro"] .doc-anexo{ color: #5cd6a0; background: rgba(18, 138, 91, .2); }

.doc-anexo a{ color: inherit; text-decoration: none; }
.doc-anexo a:hover{ text-decoration: underline; }

.doc-anexo-quitar{
	width: 20px;
	height: 20px;
	padding: 0;
	font-size: .9rem;
	line-height: 1;
	color: inherit;
	opacity: .7;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.doc-anexo-quitar:hover{ opacity: 1; background: rgba(127, 127, 127, .2); }

.doc-nuevo .doc-nuevo-a{ flex: 1 1 100%; }

/* Lo que el buscador encontró adentro del texto del cuadro. */
.doc-card mark{
	padding: 0 1px;
	color: inherit;
	background: var(--acento-fondo);
	border-radius: 3px;
}

[data-tema="oscuro"] .doc-card mark{ background: rgba(0, 135, 95, .38); }

/* Agregar una fila que todavía no está escrita en la página. Va al pie de su tabla y
   separado con una línea punteada: lo de arriba es lo que ya existe, esto es lo que se
   suma. El borde entero lo haría parecer otra tarjeta. */
.doc-nuevo{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 9px;
	margin-top: 16px;
	padding-top: 15px;
	border-top: 1px dashed var(--borde);
}

.doc-nuevo .field{ flex: 1 1 240px; margin: 0; }

/* La primera columna es un número de ordenanza o una fecha: no necesita el mismo ancho
   que la descripción de al lado. */
.doc-nuevo .field:first-child{ flex: 0 1 220px; }

/* Alto de campo, para que no quede flotando a media altura del que tiene al lado. */
.doc-nuevo button{ min-height: 43px; }

/* ---- El visor ----
   La vista previa del PDF, que es la única forma honesta de comprobar que se subió el que
   era. Es un <dialog> y no una tarjeta más de la pantalla porque tiene que tapar lo demás:
   se entra a mirar un documento, no a mirarlo al lado de otros setenta y cuatro. */
.doc-visor{
	width: min(1060px, calc(100vw - 28px));
	max-width: none;
	max-height: none;
	height: min(90vh, 940px);
	padding: 0;
	color: var(--texto);
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 16px;
	box-shadow: 0 24px 64px var(--sombra);
	overflow: hidden;
}

.doc-visor::backdrop{ background: rgba(8, 14, 26, .6); }

.doc-visor-caja{
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%;
	min-height: 0;
}

.doc-visor-cabeza{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--borde);
}

.doc-visor-titulos{ flex: 1; min-width: 0; }

.doc-visor-titulo{
	font-size: 1.02rem;
	line-height: 1.35;
	color: var(--texto);
	overflow-wrap: anywhere;
}

.doc-visor-sub{
	margin-top: 3px;
	font-size: .82rem;
	color: var(--texto-tenue);
	overflow-wrap: anywhere;
}

.doc-visor-cerrar{
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	font-family: inherit;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--texto-tenue);
	background: transparent;
	border: 1px solid var(--borde);
	border-radius: 9px;
	cursor: pointer;
}

.doc-visor-cerrar:hover{ color: var(--texto); background: var(--superficie-3); }

/* El PDF a la izquierda y su ficha a la derecha: mirar el documento y corregir lo que la
   página dice de él es la misma tarea, y en dos pantallas se hace mal. */
.doc-visor-cuerpo{
	display: grid;
	grid-template-columns: 1fr 300px;
	min-height: 0;
}

.doc-visor-previa{
	min-width: 0;
	min-height: 0;
	background: var(--superficie-2);
}

.doc-visor-previa iframe{
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Sin documento, o en un teléfono, donde ningún navegador dibuja un PDF adentro de un
   marco: en vez de un rectángulo en blanco que parece un error, se dice qué pasa. */
.doc-visor-hueco{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	padding: 34px 26px;
	text-align: center;
}

.doc-visor-hueco p{
	max-width: 34ch;
	font-size: .85rem;
	color: var(--texto-tenue);
}

.doc-visor-ficha{
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 18px 20px;
	border-left: 1px solid var(--borde);
	overflow-y: auto;
}

.doc-visor-dato{
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: .79rem;
}

.doc-visor-dato dt{ color: var(--texto-debil); white-space: nowrap; }

.doc-visor-dato dd{
	color: var(--texto-medio);
	text-align: right;
	overflow-wrap: anywhere;
}

.doc-visor-acciones{
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--borde);
}

/* ============================================================
   El panel: PQRSD
   ============================================================

   Lo que radica la ciudadanía. Cuadros y no una tabla por lo mismo que en documentos: la
   pregunta con la que se entra es "¿cuáles faltan?", y en una rejilla eso es el color del
   borde izquierdo —ámbar las que esperan, verde las cerradas— y se ve sin leer ninguna.

   El tipo de solicitud va en una píldora gris y no en cinco colores. Cinco colores más los
   dos del estado son siete cosas que aprender en una pantalla donde lo urgente es una
   sola: cuáles faltan. El tipo se lee, no se reconoce de lejos, y para eso alcanza con la
   palabra. */

#pqrsdBarra{ display: contents; }

.pqr-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
	gap: 12px;
}

.pqr-card{
	display: flex;
	flex-direction: column;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-left: 3px solid var(--borde);
	border-radius: 13px;
	overflow: hidden;
	transition: transform .16s, box-shadow .16s, border-color .16s;
}

.pqr-card:hover{
	transform: translateY(-2px);
	box-shadow: 0 10px 24px var(--sombra);
}

.pqr-card.is-pendiente{ border-left-color: #d9a021; }
.pqr-card.is-resuelta{ border-left-color: var(--acento); }

[data-tema="oscuro"] .pqr-card.is-pendiente{ border-left-color: #e8bb55; }

/* El cuadro entero es el botón: no hay ninguna acción secundaria adentro, así que no hay
   motivo para que el objetivo sea más chico que la tarjeta. */
.pqr-card-cuerpo{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	height: 100%;
	padding: 14px 15px;
	font-family: inherit;
	font-size: inherit;
	text-align: left;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.pqr-card-cuerpo:hover{ background: var(--superficie-2); }

.pqr-card-alto{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* El código en monoespaciada: se copia a mano y se dicta por teléfono, y en una
   proporcional las dos mitades de cuatro no se alinean al recorrerlas con la vista. */
.pqr-card-codigo{
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: .78rem;
	letter-spacing: .01em;
	color: var(--texto-tenue);
}

.pqr-card-asunto{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--texto);
}

.pqr-card-quien{
	font-size: .84rem;
	color: var(--texto-medio);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pqr-card-pie{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
	font-size: .76rem;
	color: var(--texto-debil);
	border-top: 1px solid var(--borde-suave);
}

.pqr-card.is-pendiente .pqr-card-estado{ color: #a8760f; font-weight: 600; }
.pqr-card.is-resuelta .pqr-card-estado{ color: var(--acento); font-weight: 600; }

[data-tema="oscuro"] .pqr-card.is-pendiente .pqr-card-estado{ color: #e8bb55; }

/* ---- Las píldoras ---- */

.pqr-tipo-pildora{
	flex: 0 0 auto;
	padding: 3px 9px;
	font-size: .72rem;
	font-weight: 600;
	color: var(--texto-medio);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 999px;
	white-space: nowrap;
}

.pqr-estado-pildora{
	padding: 3px 10px;
	font-size: .72rem;
	font-weight: 600;
	border-radius: 999px;
	white-space: nowrap;
}

.pqr-estado-pildora.is-pendiente{ color: #7a5406; background: #fbf0d5; }
.pqr-estado-pildora.is-resuelta{ color: var(--acento); background: var(--acento-fondo); }

[data-tema="oscuro"] .pqr-estado-pildora.is-pendiente{ color: #e8bb55; background: #3a2f10; }

/* ---- El visor ----
   Se entra a leer una solicitud, no a leerla al lado de otras veinte: por eso es un
   <dialog> que tapa lo demás. Más angosto que el de documentos porque acá no hay un PDF
   que mostrar, sólo texto, y una columna de mil píxeles de ancho no se lee. */
.pqr-visor{
	width: min(680px, calc(100vw - 28px));
	max-width: none;
	max-height: 88vh;
	height: fit-content;
	margin: auto;
	padding: 0;
	color: var(--texto);
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 16px;
	box-shadow: 0 24px 64px var(--sombra);
	overflow: hidden;
}

.pqr-visor::backdrop{ background: rgba(8, 14, 26, .6); }

/* El que se desplaza es este y no el <dialog>: así la cabecera con el código no se va
   arriba al recorrer un relato largo. */
.pqr-visor-caja{
	max-height: 88vh;
	padding: 18px 20px 20px;
	overflow-y: auto;
}

.pqr-visor-alto{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--borde);
}

.pqr-visor-codigo{
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--texto);
	overflow-wrap: anywhere;
}

.pqr-visor-pildoras{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.pqr-visor-cerrar{
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--texto-tenue);
	background: none;
	border: 1px solid var(--borde);
	border-radius: 9px;
	cursor: pointer;
}

.pqr-visor-cerrar:hover{ color: var(--texto); background: var(--superficie-3); }

.pqr-visor-rotulo{
	margin-top: 18px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--texto-debil);
}

/* ---- La ficha de contacto ---- */

.pqr-ficha{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 7px 16px;
	margin-top: 16px;
	font-size: .88rem;
}

.pqr-ficha dt{
	color: var(--texto-tenue);
	white-space: nowrap;
}

.pqr-ficha dd{
	color: var(--texto);
	overflow-wrap: anywhere;
}

.pqr-ficha a{ color: var(--acento); }

/* ---- Lo que contó ----
   `pre-wrap` conserva los saltos de línea del relato sin tener que convertirlo en HTML
   para meterle un <br>: lo escribió un desconocido y entra como texto, siempre. */
.pqr-relato{
	margin-top: 8px;
	padding: 14px 16px;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--texto-medio);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	background: var(--superficie-2);
	border-radius: 11px;
}

.pqr-relato.is-nota{
	color: var(--texto);
	background: var(--acento-fondo);
}

/* ---- Cerrarla ---- */

.pqr-cerrar{
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--borde);
}

.pqr-respuesta{
	width: 100%;
	margin-top: 8px;
	padding: 11px 13px;
	font-family: inherit;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 11px;
	resize: vertical;
}

.pqr-respuesta:focus{
	outline: none;
	border-color: var(--acento);
	background: var(--superficie);
}

/* La advertencia de que la nota se publica. Va pegada al campo y no al pie del cuadro:
   tiene que leerse antes de escribir, no después de guardar. */
.pqr-aviso{
	margin-top: 8px;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--texto-debil);
}

.pqr-visor-acciones{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

/* ============================================================
   Pantallas chicas
   ============================================================ */

@media (max-width: 1000px){
	.kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px){
	:root{ --cabecera-alto: 58px; }

	/* ---- PQRSD en pantalla chica ----
	   La barra deja de estar pegada por el mismo motivo que la de documentos: acá arriba la
	   cabecera se parte en dos renglones y `--cabecera-alto` deja de decir la verdad, así
	   que un sticky calculado con esa variable se pega en el lugar equivocado. */
	.pqr-grid{ grid-template-columns: 1fr; }

	/* El visor ocupa la pantalla: en 375 px, un recuadro con margen a los cuatro lados deja
	   el relato en una columna de trescientos píxeles. */
	.pqr-visor{
		width: 100vw;
		max-width: 100vw;
		max-height: 100dvh;
		height: 100dvh;
		border: 0;
		border-radius: 0;
	}

	.pqr-visor-caja{ max-height: 100dvh; }

	/* 44 px: es el mínimo de un objetivo táctil, y éste es la única salida del visor. */
	.pqr-visor-cerrar{ width: 44px; height: 44px; }

	.pqr-ficha{ grid-template-columns: 1fr; gap: 2px; }
	.pqr-ficha dt{ margin-top: 10px; }

	.pqr-visor-acciones .btn-primary,
	.pqr-visor-acciones .btn-fila{ width: 100%; }

	.app-header{ padding: 10px 16px; flex-wrap: wrap; }
	.app-quien{ display: none; }

	/* Los botones de la derecha —el salto al otro lado, reportar, la cuenta, el tema y
	   salir— no entran en 375 px al lado de la marca: bajan a su propia fila, alineados a
	   la derecha, y si aun así no caben se reparten en dos. */
	.app-user{
		flex: 1 1 100%;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 8px;
	}

	/* La barra lateral deja de ser una columna y pasa a ser una tira que se desplaza
	   arriba del contenido: en un teléfono no hay ancho para las dos cosas.
	   
	   El align-items tiene que volver a "stretch" junto con la dirección, y no es un
	   detalle: en fila, el eje transversal es el vertical y "flex-start" sólo decide que
	   las columnas arranquen arriba; en columna pasa a ser el horizontal, y entonces le
	   está diciendo al contenido que se mida por lo que lleva adentro. Lo más ancho que
	   lleva es una tabla de 601 px, así que en un teléfono de 375 el área de trabajo medía
	   607 px y la página entera se desplazaba de costado —tapando media interfaz—. El
	   overflow-x de las tarjetas, que existe justamente para eso, nunca llegaba a actuar
	   porque el desborde ocurría un nivel más arriba. */
	.app-shell{ flex-direction: column; align-items: stretch; }
	.app-main{ min-width: 0; }

	/* De las siete secciones se ven tres, y la única pista de que hay más era una barra de
	   desplazamiento fina que en un teléfono ni siquiera se dibuja. El degradado del borde
	   derecho es esa pista: el último ítem visible se desvanece en lugar de cortarse, que
	   es como se lee "esto sigue". Se apaga solo al llegar al final, porque la máscara se
	   ancla al contenido y no a la ventana. */
	.app-side{
		position: static;
		flex: none;
		width: 100%;
		min-height: 0;
		flex-direction: row;
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
		/* El arrastre de la tira no se contagia al navegador: sin esto, llegar al final de
		   las secciones dispara el gesto de "atrás" y se sale de la plataforma. */
		overscroll-behavior-x: contain;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
		padding: 10px 14px;
		border-right: 0;
		border-bottom: 1px solid var(--borde);
	}

	.side-title{ display: none; }
	.side-link{ white-space: nowrap; min-height: 44px; }

	/* En la tira horizontal no hay pie ni nada que ocultar, y la tira vuelve a medir lo
	   que su contenido. */
	.app-side{ height: auto; overflow-y: visible; }
	.side-pie{ display: none; }

	/* En tira horizontal, el pie deja de ser un pie: `margin-top:auto` lo empujaría contra
	   el borde derecho y la línea de arriba le cruzaría el renglón entero. Vuelve a ser un
	   ítem más, el último de la fila. */
	.side-link.is-pie{
		margin-top: 0;
		padding-top: 9px;
		border-top: 0;
		border-radius: 9px;
	}

	.side-link.is-pie.is-active::before{ top: 9px; }

	/* La barra del renglón activo es vertical y a la izquierda: en una tira que se desplaza
	   de costado, eso señala el borde de una pastilla en vez del renglón. Acá la marca es
	   el fondo, que ya alcanza. */
	.side-link.is-active::before{ display: none; }

	/* ---- El tamaño del dedo ----
	   Los botones de esta pantalla están medidos para el puntero: cinco píxeles de aire
	   arriba y abajo dan veintiocho de alto, que con el ratón sobran y con el pulgar son la
	   mitad de lo que hace falta. En un teléfono, "Quitar" y "Editar" quedaban a siete
	   píxeles uno de otro dentro de una fila de veintiocho. Acá recuperan los 44 px. */
	.btn-fila{ padding: 13px 15px; font-size: .82rem; }
	.btn-primary{ padding: 13px 20px; font-size: .88rem; }
	.app-salto{ display: inline-flex; align-items: center; min-height: 44px; padding: 7px 16px; }
	.app-logout{ min-height: 44px; }
	.tema-btn,
	.cabecera-btn{ width: 44px; height: 44px; }

	/* Con botones más altos, tres acciones no entran en el ancho de una celda: que bajen
	   de renglón en lugar de encogerse. */
	.fila-acciones{ flex-wrap: wrap; gap: 8px; }

	/* El único enlace de la puerta, por el mismo motivo. El margen de arriba que ya tenía
	   se compensa con el relleno nuevo para que la tarjeta no crezca. */
	.login-volver{ margin-top: 11px; padding: 13px 12px; }

	.app-main{ padding: 20px 16px 36px; }

	.form-grid{ grid-template-columns: 1fr; }

	.hilo-item{
		grid-template-columns: 1fr auto;
		gap: 2px 10px;
	}

	.hilo-quien{ grid-column: 1; }
	.hilo-cuando{ grid-column: 2; grid-row: 1; }
	.hilo-que{ grid-column: 1 / -1; }

	/* ---- Usuarios y roles ----
	   La tabla de cuentas es la más ancha del panel —persona, rol, módulos, estado, última
	   vez y hasta tres botones— y en un teléfono se desplaza de costado adentro de `.card`.
	   Sin la persona congelada, llegar a los botones de Acciones deja fuera de vista de
	   quién es la fila que se está por tocar. */
	.data-table td:first-child,
	.data-table th:first-child{
		position: sticky;
		left: 0;
		background: var(--superficie);
	}

	/* ---- Documentos ----
	   El contador se va al renglón de abajo antes que empujar al campo de búsqueda a un
	   ancho en el que no entra ni "ordenanza". */
	.doc-cuenta{ flex-basis: 100%; margin-left: 0; text-align: right; }

	/* La cabecera de un teléfono envuelve en dos renglones y deja de medir lo que dice
	   `--cabecera-alto`, así que el `top` del buscador apuntaría a media cabecera y quedaría
	   medio tapado. Acá se desplaza con la página, que es honesto: en una pantalla de esta
	   altura, dos barras fijas dejan sin sitio a lo que se vino a mirar. */
	.doc-barra{ position: static; }

	/* Los 44 px del pulgar, igual que los demás botones de esta pantalla. */
	.doc-filtro{ padding: 14px 14px; }

	/* El visor ocupa la pantalla: en un teléfono, un diálogo con aire alrededor deja la
	   ficha del documento en una columna de doscientos píxeles. */
	.doc-visor{
		width: 100vw;
		height: 100vh;
		max-height: 100vh;
		border: 0;
		border-radius: 0;
	}

	/* La previa desaparece —ningún navegador de teléfono dibuja un PDF adentro de un
	   marco— y queda la ficha, con el botón que lo abre de verdad. */
	.doc-visor-cuerpo{ grid-template-columns: 1fr; }

	.doc-visor-ficha{
		border-left: 0;
		border-top: 1px solid var(--borde);
	}

	/* La cruz de cerrar es el control más usado del visor y el único con el que se sale sin
	   la tecla Esc, que en un teléfono no existe. Los 44 px del pulgar, como los demás. */
	.doc-visor-cerrar{ width: 44px; height: 44px; }
}

/* ============================================================
   Galería
   ============================================================ */

/* Las fotografías del portal. Es la misma idea que la rejilla de Documentos —cuadros y no
   una tabla— pero llevada un paso más allá: acá lo que se administra ES una imagen, así
   que el cuadro no la representa, la muestra.

   La rejilla es `auto-fill` y no un número fijo de columnas: una galería crece de a una
   foto, y con columnas fijas la última fila queda coja cada vez que el total no es
   múltiplo del ancho. */
.gal-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
}

.gal-card{
	overflow: hidden;
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-left: 3px solid var(--borde);
	border-radius: 12px;
	transition: border-color .16s, box-shadow .16s, transform .16s;
}

/* El estado en el borde izquierdo, igual que en Documentos y en PQRSD: es la única
   diferencia que hay que ver de lejos, y en una rejilla eso es el color de la franja. */
.gal-card.is-publicada{ border-left-color: var(--viva); }
.gal-card.is-oculta{ border-left-color: #8b93a5; }

.gal-card:hover{
	border-color: var(--acento);
	box-shadow: 0 10px 22px var(--sombra);
	transform: translateY(-2px);
}

/* El cuadro entero se presiona. Es un <button> y no un enlace —la foto no tiene página
   propia— así que hay que devolverle a mano lo que un botón trae puesto. */
.gal-card-cuerpo{
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	font-family: inherit;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

.gal-card-cuerpo:focus-visible{
	outline: 2px solid var(--acento);
	outline-offset: -2px;
}

/* Cuadrada, por lo mismo que en la galería pública: una rejilla con fotos de proporciones
   distintas es una rejilla con escalones, y el recorte le cuesta menos a la mirada que el
   desorden. La foto entera se ve en el visor, que es donde de verdad se la mira. */
.gal-card-foto{
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--superficie-3);
}

.gal-card-pie{
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 11px 11px;
}

.gal-card-titulo{
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--texto);
	/* Dos renglones y lo que sobre se corta: un pie largo estiraría su cuadro y rompería la
	   altura pareja de la fila, que es lo que hace legible la rejilla. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Una foto sin título no está rota, pero sí está incompleta: en el portal sale sin decir
   de qué es. Se marca para que se vea cuál falta, sin gritarlo. */
.gal-card-titulo.is-sin{ color: var(--texto-debil); font-style: italic; font-weight: 500; }

.gal-card-sub{
	font-size: .73rem;
	color: var(--texto-debil);
}

/* El cartel de oculta va sobre la foto y no en el pie: es lo que hay que ver de lejos, y
   en el pie se leería recién al llegar a ella. */
.gal-card-marca{
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 8px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(17, 24, 39, .74);
	border-radius: 999px;
	backdrop-filter: blur(3px);
}

.gal-card mark{
	padding: 0 1px;
	color: inherit;
	background: var(--acento-fondo);
	border-radius: 3px;
}

[data-tema="oscuro"] .gal-card mark{ background: rgba(0, 135, 95, .38); }

/* La caja del buscador no genera caja: su hijo pasa a colgar de la vista entera, por lo
   mismo que en Documentos. Un envoltorio que mide exactamente lo que mide la barra no le
   deja ni un píxel por donde moverse, y el `position: sticky` se despegaría. */
#galeriaBarra{ display: contents; }

/* ---- El visor ----

   La foto en grande y su ficha al lado. Es un <dialog> y no una tarjeta más de la pantalla
   porque tiene que tapar lo demás: se entra a mirar una fotografía, no a mirarla al lado
   de otras cincuenta. */
.gal-visor{
	width: min(1060px, calc(100vw - 28px));
	max-width: none;
	max-height: none;
	padding: 0;
	color: var(--texto);
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 16px;
	box-shadow: 0 24px 64px var(--sombra);
	overflow: hidden;
}

.gal-visor::backdrop{ background: rgba(8, 14, 26, .6); }

/* Dos columnas: la foto manda y la ficha la acompaña. La foto es lo que se está mirando
   mientras se escribe el pie, así que se lleva la mayor parte del ancho. */
.gal-visor-caja{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
	max-height: min(88vh, 860px);
}

/* La cruz de cerrar. En Documentos vive adentro de una cabecera flex y por eso no trae
   posición propia; acá no hay cabecera —la foto empieza en el borde de arriba— así que se
   la pone la galería. Adentro del recuadro y no flotando encima del diálogo: afuera se
   sale de la pantalla en cuanto la ventana es baja, y ahí no hay forma de cerrar salvo
   Escape. El fondo oscuro la despega de la foto, que puede ser clara justo ahí. */
.gal-visor-caja > .doc-visor-cerrar{
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	color: #fff;
	background: rgba(8, 14, 26, .66);
	border-color: rgba(255, 255, 255, .26);
	backdrop-filter: blur(3px);
}

.gal-visor-caja > .doc-visor-cerrar:hover{ color: #fff; background: rgba(8, 14, 26, .9); }

.gal-visor-previa{
	display: grid;
	place-items: center;
	min-height: 0;
	padding: 16px;
	background: var(--superficie-3);
}

/* `max-height` en vh y no en porcentaje: el diálogo no tiene alto propio —lo toma de su
   contenido— así que un porcentaje no tendría contra qué medirse y la foto saldría a
   tamaño completo. */
.gal-visor-previa img{
	display: block;
	max-width: 100%;
	max-height: min(80vh, 780px);
	object-fit: contain;
	border-radius: 8px;
}

.gal-visor-ficha{
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
	padding: 20px;
	overflow-y: auto;
	border-left: 1px solid var(--borde);
}

.gal-visor-ficha .form-grid{ margin: 0; }

.gal-visor-dato{
	font-size: .78rem;
	color: var(--texto-debil);
}

/* Los mandos, pegados abajo. La ficha se desplaza si hace falta y ellos no se van con
   ella: guardar es lo que se viene a hacer acá, y perseguirlo con el scroll es absurdo. */
.gal-visor-ficha .doc-visor-acciones{
	position: sticky;
	bottom: -20px;
	margin-top: auto;
	padding: 12px 0 0;
	background: var(--superficie);
	border-top: 1px solid var(--borde);
}

/* La fila del evento que se está corrigiendo. El formulario está arriba de la tabla, así
   que sin esta marca no hay forma de saber cuál de las veinte filas se está tocando. */
.data-table tr.is-editando td{
	background: var(--acento-fondo);
	box-shadow: inset 3px 0 0 var(--acento);
}

@media (max-width: 860px){
	/* La ficha baja debajo de la foto. En dos columnas a este ancho, los campos quedan tan
	   angostos que un título de ocho palabras se lee de a tres letras. */
	.gal-visor-caja{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

	.gal-visor-ficha{
		border-left: 0;
		border-top: 1px solid var(--borde);
	}

	.gal-visor-previa img{ max-height: 42vh; }
}

@media (max-width: 520px){
	.kpi-grid{ grid-template-columns: minmax(0, 1fr); }

	/* Dos columnas y no una: un cuadro de ancho completo es una foto por pantallazo, y
	   revisar cincuenta así es imposible. Lo que se saca es el subtítulo —el tema y la
	   fecha— que en 140 px no se lee y está entero en el visor. */
	.gal-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.gal-card-sub{ display: none; }
	.gal-visor{ width: 100vw; height: 100%; max-height: none; border: 0; border-radius: 0; }
	.gal-visor-caja{ max-height: none; height: 100%; }
}


/* ============================================================
   Inicio: la bienvenida y los mensajes
   ============================================================ */

/* La bienvenida. Una franja con el verde de la corporación, la fecha, el saludo y el
   único atajo de Inicio que hace algo: escribir un mensaje. */
.bienvenida{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 18px;
	padding: 24px 26px;
	color: #fff;
	background:
		radial-gradient(circle at 88% 0%, rgba(242, 201, 76, .22), transparent 42%),
		linear-gradient(120deg, var(--cabecera) 0%, #00573f 100%);
	border-radius: 16px;
	box-shadow: 0 12px 30px var(--sombra);
}

.bienvenida-fecha{
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #a9cfc3;
}

.bienvenida-titulo{
	margin-top: 4px;
	font-size: 1.6rem;
	line-height: 1.2;
	color: #fff;
}

.bienvenida-sub{
	margin-top: 4px;
	font-size: .9rem;
	color: #d4e8e1;
}

.bienvenida-accion{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 0 20px;
	font-family: inherit;
	font-size: .88rem;
	font-weight: 700;
	color: #00382a;
	background: #f2c94c;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: filter .18s, transform .18s;
}

.bienvenida-accion:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.bienvenida-accion:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }

.bienvenida-accion svg{
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Las pestañas ---- */
.pestanas{
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 11px;
}

.pestana{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 0 14px;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 600;
	color: var(--texto-tenue);
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.pestana:hover{ color: var(--texto); }

.pestana.is-activa{
	color: var(--acento);
	background: var(--superficie);
	box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.pestana-cuenta{
	min-width: 18px;
	padding: 0 6px;
	font-size: .68rem;
	line-height: 18px;
	color: #fff;
	text-align: center;
	background: var(--viva);
	border-radius: 999px;
}

/* ---- La lista de mensajes ---- */
.mensajes-lista{
	display: flex;
	flex-direction: column;
	border: 1px solid var(--borde);
	border-radius: 12px;
	overflow: hidden;
}

.mensajes-lista .vacio{ padding: 30px 16px; }

.mensaje + .mensaje{ border-top: 1px solid var(--borde); }

.mensaje.is-nuevo{ background: var(--acento-fondo); }

.mensaje-fila{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px;
	width: 100%;
	padding: 13px 16px;
	font-family: inherit;
	text-align: left;
	color: var(--texto);
	background: none;
	border: 0;
	cursor: pointer;
}

.mensaje-fila:hover{ background: var(--superficie-3); }
.mensaje-fila:focus-visible{ outline: 2px solid var(--acento); outline-offset: -2px; }

.mensaje-avatar{
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	font-size: .8rem;
	font-weight: 700;
	color: #fff;
	background: var(--acento);
	border-radius: 50%;
}

.mensaje-avatar.is-chico{ width: 30px; height: 30px; font-size: .7rem; }

.mensaje-medio{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mensaje-arriba{
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.mensaje-quien{
	font-size: .88rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mensaje-punto{
	flex: none;
	padding: 1px 7px;
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--viva);
	border-radius: 999px;
}

.mensaje-asunto{
	font-size: .86rem;
	color: var(--texto-medio);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mensaje.is-nuevo .mensaje-asunto{ font-weight: 700; color: var(--texto); }

.mensaje-extracto{
	font-size: .8rem;
	color: var(--texto-debil);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mensaje.is-abierto .mensaje-extracto{ display: none; }

.mensaje-lado{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	font-size: .76rem;
	color: var(--texto-debil);
	white-space: nowrap;
}

.mensaje-clip{
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.mensaje-clip svg,
.mensaje-archivo svg,
.mensaje-soltar svg{
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mensaje-cuerpo{ padding: 2px 16px 16px 66px; }

.mensaje-texto{
	font-size: .88rem;
	line-height: 1.6;
	color: var(--texto);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.mensaje-archivos{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.mensaje-archivo{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 8px 12px;
	font-size: .8rem;
	color: var(--texto);
	text-decoration: none;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 9px;
	transition: border-color .16s, color .16s;
}

.mensaje-archivo:hover{ border-color: var(--acento); color: var(--acento); }

.mensaje-archivo-nombre{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.mensaje-archivo-peso{
	flex: none;
	font-size: .74rem;
	color: var(--texto-debil);
}

.mensaje-leidos,
.mensaje-vence{
	margin-top: 10px;
	font-size: .76rem;
	color: var(--texto-debil);
}

/* ---- El mensaje nuevo ---- */
.mensaje-dialogo{
	width: min(640px, calc(100vw - 28px));
	max-width: none;
	max-height: 90vh;
	height: fit-content;
	margin: auto;
	padding: 0;
	color: var(--texto);
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 16px;
	box-shadow: 0 24px 64px var(--sombra);
	overflow: hidden;
}

.mensaje-dialogo::backdrop{ background: rgba(8, 14, 26, .6); }

.mensaje-dialogo-caja{
	max-height: 90vh;
	padding: 18px 20px 20px;
	overflow-y: auto;
}

.mensaje-form{
	display: grid;
	gap: 14px;
	margin-top: 14px;
}

.mensaje-para{
	margin: 0;
	padding: 0;
	border: 0;
}

.mensaje-para legend{
	margin-bottom: 6px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--texto-medio);
}

.mensaje-buscar{
	width: 100%;
	padding: 9px 12px;
	font-family: inherit;
	font-size: .86rem;
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 9px;
}

.mensaje-buscar:focus-visible{ outline: 2px solid var(--acento); outline-offset: 1px; }

.mensaje-personas{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
	gap: 6px;
	max-height: 200px;
	margin-top: 8px;
	padding: 2px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mensaje-persona{
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	border: 1px solid var(--borde);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .16s, background .16s;
}

.mensaje-persona:hover{ background: var(--superficie-3); }

.mensaje-persona:has(input:checked){
	border-color: var(--acento);
	background: var(--acento-fondo);
}

.mensaje-persona input{ accent-color: var(--acento); }

.mensaje-persona-texto{
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: .82rem;
}

.mensaje-persona-texto strong{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mensaje-persona-texto span{
	font-size: .72rem;
	color: var(--texto-debil);
}

.mensaje-elegidos{
	margin-top: 6px;
	font-size: .76rem;
	color: var(--texto-debil);
}

.mensaje-soltar{
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 18px;
	text-align: center;
	color: var(--texto-tenue);
	background: var(--superficie-2);
	border: 1.5px dashed var(--borde);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .16s, background .16s;
}

.mensaje-soltar svg{ width: 22px; height: 22px; color: var(--acento); }
.mensaje-soltar strong{ font-size: .88rem; color: var(--texto); }
.mensaje-soltar span{ font-size: .78rem; }

.mensaje-soltar:hover,
.mensaje-soltar.is-encima{
	border-color: var(--acento);
	background: var(--acento-fondo);
}

.mensaje-soltar:focus-visible{ outline: 2px solid var(--acento); outline-offset: 2px; }

.mensaje-adjuntos{
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mensaje-adjuntos:empty{ display: none; }

.mensaje-adjunto{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px 7px 12px;
	font-size: .82rem;
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 9px;
}

.mensaje-adjunto .mensaje-archivo-nombre{ flex: 1; }

.mensaje-adjunto-quitar{
	flex: none;
	width: 28px;
	height: 28px;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--texto-tenue);
	background: none;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
}

.mensaje-adjunto-quitar:hover{ color: var(--texto); background: var(--superficie-3); }

.mensaje-subida-barra{
	height: 8px;
	overflow: hidden;
	background: var(--superficie-3);
	border-radius: 999px;
}

.mensaje-subida-barra span{
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--acento), var(--acento-claro));
	border-radius: inherit;
	transition: width .2s linear;
}

.mensaje-subida-texto{
	margin-top: 6px;
	font-size: .78rem;
	color: var(--texto-tenue);
}

.mensaje-form-pie{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 12px;
}

.mensaje-form-pie .login-error{ flex: 1; margin: 0; }

@media (max-width: 820px){
	.bienvenida{ padding: 20px; }
	.bienvenida-titulo{ font-size: 1.35rem; }
	.bienvenida-accion{ width: 100%; justify-content: center; }
	.mensajes .card-head{ flex-wrap: wrap; }
	.mensaje-cuerpo{ padding-left: 16px; }
	.mensaje-fila{ grid-template-columns: auto minmax(0, 1fr); }
	.mensaje-lado{ grid-column: 2; flex-direction: row; align-items: center; }
}

/* ============================================================
   Aprobaciones
   ============================================================ */

/* El aviso de "enviado a aprobación": abajo al centro, encima de todo, y se va solo. */
.aprobacion-aviso{
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 100;
	max-width: min(560px, calc(100vw - 32px));
	padding: 14px 18px;
	font-size: .88rem;
	line-height: 1.45;
	color: #3d2c00;
	background: #f2c94c;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
	transform: translate(-50%, 140%);
	opacity: 0;
	transition: transform .3s ease, opacity .3s ease;
	pointer-events: none;
}

.aprobacion-aviso.is-visible{ transform: translate(-50%, 0); opacity: 1; }

/* La casilla del alta en el panel. */
.aprobacion-casilla-caja{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 10px;
	cursor: pointer;
}

.aprobacion-casilla-caja input{ margin-top: 3px; accent-color: var(--acento); }

/* Adentro de un `.field` le ganan `.field > span` (block) y `.field input` (ancho entero):
   una casilla no es un campo de texto. */
.field > .aprobacion-casilla-caja{ display: flex; margin-bottom: 0; }
.field .aprobacion-casilla-caja input{ flex: none; width: 16px; height: 16px; padding: 0; }

.aprobacion-casilla-caja strong{ display: block; font-size: .88rem; color: var(--texto); }
.aprobacion-casilla-caja small{ display: block; margin-top: 2px; font-size: .78rem; color: var(--texto-tenue); }

.aprobacion-regla{ margin-top: 6px; font-style: italic; }

.pestana-cuenta.is-aviso{ background: #d98a00; }

/* ---- La bandeja ---- */
.aprob-seccion{
	margin: 0;
	padding: 12px 16px 6px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto-debil);
	background: var(--superficie-2);
	border-top: 1px solid var(--borde);
}

.aprob-seccion:first-child{ border-top: 0; }

.aprob{
	display: grid;
	gap: 4px;
	padding: 12px 16px;
	border-top: 1px solid var(--borde);
}

.aprob.is-revisar{ background: color-mix(in srgb, #f2c94c 10%, transparent); }

.aprob-arriba{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.aprob-titulo{ font-size: .9rem; overflow-wrap: anywhere; }

.aprob-pie{
	margin: 0;
	font-size: .78rem;
	color: var(--texto-tenue);
}

.aprob-motivo{
	margin: 2px 0 0;
	padding: 8px 10px;
	font-size: .8rem;
	color: var(--texto);
	background: var(--superficie-2);
	border-left: 3px solid #d64545;
	border-radius: 0 8px 8px 0;
	white-space: pre-wrap;
}

.aprob-acciones{ display: flex; gap: 8px; margin-top: 4px; }

/* ---- La vista previa de una solicitud ---- */
.aprob-dialogo{
	width: min(760px, calc(100vw - 28px));
	max-width: none;
	max-height: 90vh;
	height: fit-content;
	margin: auto;
	padding: 0;
	color: var(--texto);
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 16px;
	box-shadow: 0 24px 64px var(--sombra);
	overflow: hidden;
}

.aprob-dialogo::backdrop{ background: rgba(8, 14, 26, .6); }

.aprob-dialogo-caja{
	display: grid;
	gap: 12px;
	max-height: 90vh;
	padding: 18px 20px 20px;
	overflow-y: auto;
}

.aprob-previa{
	display: grid;
	gap: 10px;
	padding: 16px;
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 12px;
}

.aprob-portada{
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: 10px;
}

.aprob-previa-titulo{ margin: 0; font-size: 1.3rem; line-height: 1.3; }
.aprob-previa-resumen{ margin: 0; color: var(--texto-medio); }

.aprob-campos{
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 12px;
	margin: 0;
	font-size: .84rem;
}

.aprob-campos dt{ color: var(--texto-tenue); }
.aprob-campos dd{ margin: 0; overflow-wrap: anywhere; }

.aprob-motivo-campo{
	width: 100%;
	padding: 10px 12px;
	font-family: inherit;
	font-size: .86rem;
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 9px;
	resize: vertical;
}

.aprob-dialogo-pie{
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
}

/* ---- Portada: el editor del hero ----
   La vista previa copia en chico el hero de la landing: foto, velo verde, sello, título con
   su resalte y botones. No carga la hoja de la landing: son pocas reglas y las dos hojas
   pelearían por los mismos nombres. */
.portada-ed-acciones{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.portada-ed-hero{
	position: relative;
	display: flex;
	align-items: center;
	min-height: 300px;
	padding: 36px clamp(20px, 4vw, 48px);
	border-radius: 14px;
	overflow: hidden;
	color: rgba(255, 255, 255, .88);
	background-color: #041c15;
	background-image:
		linear-gradient(100deg, rgba(4, 28, 21, .95) 0%, rgba(6, 42, 32, .85) 45%, rgba(6, 42, 32, .5) 100%),
		var(--foto, none);
	background-size: cover;
	background-position: center, var(--foco, center);
}
.portada-ed-hero.is-oculto{ filter: grayscale(.7); }
.portada-ed-hero-cuerpo{ position: relative; max-width: 640px; }

.portada-ed-sello{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
}
.portada-ed-sello::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7fe3bb; }

.portada-ed-titulo{
	margin: 16px 0 0;
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.035em;
	color: #fff;
	text-wrap: balance;
}
.portada-ed-titulo em{ font-style: normal; color: #7fe3bb; }
.portada-ed-texto{ margin: 12px 0 0; max-width: 58ch; font-size: .95rem; font-weight: 300; }

.portada-ed-botones{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.portada-ed-boton{
	padding: 10px 18px;
	font-size: .85rem;
	font-weight: 600;
	color: #041c15;
	background: #7fe3bb;
	border-radius: 999px;
}
.portada-ed-boton.is-linea{ color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .45); }

.portada-ed-marca{
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 10px;
	font-size: .75rem;
	font-weight: 600;
	color: #a4262c;
	background: #fdeeee;
	border-radius: 999px;
}

.portada-ed-rejilla{
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 20px;
	align-items: start;
}
@media (max-width: 1000px){ .portada-ed-rejilla{ grid-template-columns: minmax(0, 1fr); } }

.portada-ed-lista{ display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.portada-ed-item{
	display: grid;
	grid-template-columns: auto 64px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--borde);
	border-radius: 12px;
	background: var(--superficie);
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.portada-ed-item:hover{ border-color: var(--acento-claro); }
.portada-ed-item:focus-visible{ outline: 2px solid var(--acento); outline-offset: 2px; }
.portada-ed-item.is-elegido{ border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fondo); }
.portada-ed-item.is-oculto .portada-ed-foto-mini{ opacity: .45; }

.portada-ed-num{
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-size: .8rem;
	font-weight: 700;
	color: var(--acento);
	background: var(--acento-fondo);
	border-radius: 50%;
}

.portada-ed-foto-mini{
	display: grid;
	place-items: center;
	width: 64px;
	height: 42px;
	font-size: .7rem;
	color: var(--texto-tenue);
	background: var(--borde-suave) center / cover no-repeat;
	border-radius: 8px;
}

.portada-ed-item-texto{ display: grid; gap: 4px; min-width: 0; justify-items: start; }
.portada-ed-item-texto strong{
	max-width: 100%;
	overflow: hidden;
	font-size: .9rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.portada-ed-item-acciones{ display: flex; gap: 4px; }
.portada-ed-item-acciones .btn-fila{ min-width: 32px; padding-inline: 8px; }

@media (max-width: 520px){
	.portada-ed-item{ grid-template-columns: auto minmax(0, 1fr); }
	.portada-ed-item .portada-ed-foto-mini{ display: none; }
	.portada-ed-item-acciones{ grid-column: 1 / -1; justify-content: flex-end; }
}

.portada-ed-agregar{ width: 100%; margin-top: 12px; }
.portada-ed-ritmo{ margin-top: 16px; }
.portada-ed-ritmo input{ max-width: 120px; }

.portada-ed-foto{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.portada-ed-foto .portada-ed-foto-mini{ width: 150px; height: 90px; }
.portada-ed-foto input[type="file"]{ max-width: 100%; }

.field.portada-ed-casilla{ display: flex; flex-direction: row; gap: 10px; align-items: center; }
.field.portada-ed-casilla input{ width: auto; }
.field.portada-ed-casilla > span{ margin: 0; }

/* La portada propuesta, en la bandeja de aprobaciones. */
.aprob-portada-lista{ display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.aprob-portada-lista .portada-ed-hero{ min-height: 180px; padding: 24px; }

/* ============================================================
   Mi perfil: la ficha y el mapa de la jerarquía
   ============================================================ */

.perfil-ficha{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
}

.perfil-cabeza{
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.perfil-quien{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.perfil-nombre{
	font-size: 1.08rem;
	color: var(--texto);
	overflow-wrap: anywhere;
}

.perfil-rol{
	font-size: .84rem;
	font-weight: 600;
	color: var(--acento);
}

.perfil-datos{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

.perfil-dato dt{
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--texto-debil);
}

.perfil-dato dd{
	font-size: .88rem;
	color: var(--texto);
}

/* El mapa es un árbol de listas anidadas: cada `li` es un nodo y su `ul` los hijos. Las
   líneas las dibujan los pseudoelementos —un tramo horizontal a cada lado del nodo y uno
   vertical desde el padre—, así el árbol se reacomoda solo cuando cambia la gente. Si es
   más ancho que la tarjeta, se desplaza la tarjeta, no la página. */
.mapa-marco{
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 6px 0 4px;
}

.mapa{
	width: max-content;
	min-width: 100%;
	display: flex;
	justify-content: center;
	--mapa-linea: #c3ccdb;
	--mapa-alto: 22px;
}

[data-tema="oscuro"] .mapa{ --mapa-linea: #3a4262; }

.mapa ul{
	display: flex;
	justify-content: center;
	list-style: none;
}

.mapa ul ul{
	position: relative;
	padding-top: var(--mapa-alto);
}

.mapa ul ul::before{
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -1px;
	height: var(--mapa-alto);
	border-left: 2px solid var(--mapa-linea);
}

.mapa li{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--mapa-alto) 8px 0;
}

.mapa-arbol > li{ padding-top: 0; }

.mapa li::before,
.mapa li::after{
	content: '';
	position: absolute;
	top: 0;
	right: calc(50% - 1px);
	width: 50%;
	height: var(--mapa-alto);
	border-top: 2px solid var(--mapa-linea);
}

.mapa li::after{
	right: auto;
	left: 50%;
	margin-left: -1px;
	border-left: 2px solid var(--mapa-linea);
}

.mapa li:first-child::before,
.mapa li:last-child::after{ border: 0; }

.mapa li:last-child::before{
	border-right: 2px solid var(--mapa-linea);
	border-top-right-radius: 8px;
}

.mapa li:first-child::after{ border-top-left-radius: 8px; }

.mapa li:only-child::before,
.mapa li:only-child::after{ display: none; }

.mapa li:only-child{ padding-top: 0; }

.mapa-arbol > li::before,
.mapa-arbol > li::after{ display: none; }

.mapa-nodo{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 160px;
	max-width: 230px;
	padding: 10px 14px;
	text-align: center;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 12px;
	box-shadow: 0 1px 3px var(--sombra);
}

.mapa-nombre,
.mapa-titulo{
	font-size: .86rem;
	color: var(--texto);
	overflow-wrap: anywhere;
}

.mapa-nombre .punto{ margin-right: 6px; }

.mapa-rol{
	font-size: .74rem;
	color: var(--texto-tenue);
}

.mapa-extra{
	font-size: .7rem;
	font-weight: 600;
	color: var(--texto-debil);
}

.mapa-nodo.is-raiz{
	color: #fff;
	background: var(--acento);
	border-color: var(--acento);
}

.mapa-nodo.is-raiz .mapa-nombre,
.mapa-nodo.is-raiz .mapa-titulo,
.mapa-nodo.is-raiz .mapa-rol,
.mapa-nodo.is-raiz .mapa-extra{ color: #fff; }

[data-tema="oscuro"] .mapa-nodo.is-raiz,
[data-tema="oscuro"] .mapa-nodo.is-raiz :is(.mapa-nombre, .mapa-titulo, .mapa-rol, .mapa-extra){ color: #07231a; }

.mapa-nodo.is-grupo{ background: var(--superficie-2); }

.mapa-nodo.is-raiz.is-grupo{ background: var(--acento); }

.mapa-nodo.is-area{
	background: var(--acento-fondo);
	border-color: transparent;
	border-radius: 999px;
	min-width: 140px;
}

.mapa-nodo.is-area .mapa-titulo{ color: var(--acento); }

.mapa-nodo.is-suelta,
.mapa-nodo.is-lateral{
	border-style: dashed;
	box-shadow: none;
}

.mapa-nodo.is-suelta{ background: var(--superficie-2); }
.mapa-nodo.is-suelta .mapa-titulo{ color: var(--texto-medio); }

.mapa-nodo.is-yo:not(.is-raiz){
	border: 2px solid var(--acento);
}

.mapa-nodo.is-off{ opacity: .55; }

.mapa-nodo.is-hoja{
	min-width: 150px;
	padding: 7px 12px;
	box-shadow: none;
}

.mapa-nodo.is-hoja .mapa-nombre{ font-size: .8rem; font-weight: 600; }
.mapa-nodo.is-hoja .mapa-rol{ font-size: .7rem; }

/* Los editores cuelgan en columna, con una línea que baja por detrás. */
.mapa-hojas{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-top: 16px;
}

.mapa-hojas::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 16px;
	left: 50%;
	margin-left: -1px;
	border-left: 2px dotted var(--mapa-linea);
}

.mapa-hojas.is-vacia::before{ bottom: 12px; }

.mapa-hoja-vacia{
	position: relative;
	z-index: 1;
	padding: 3px 10px;
	font-size: .72rem;
	color: var(--texto-debil);
	background: var(--superficie);
	border: 1px dashed var(--borde);
	border-radius: 999px;
}

.mapa-personas{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
	margin-top: 6px;
}

.mapa-persona{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	font-size: .76rem;
	color: var(--texto);
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 999px;
}

.mapa-persona .punto{ margin: 0; }

.mapa-persona.is-yo{ border-color: var(--acento); }
.mapa-persona.is-off{ opacity: .55; text-decoration: line-through; }

.mapa-tu{
	font-size: .66rem;
	font-weight: 700;
	color: var(--acento);
}

.mapa-nodo.is-raiz .mapa-persona{
	color: var(--texto);
	background: var(--superficie);
	border-color: transparent;
}

/* ============================================================
   Usuarios y roles como cuadro emergente
   ============================================================
   La plataforma abre el panel en un <dialog> casi a pantalla completa, con el panel
   adentro de un iframe (`/panel/?embebido`). Un solo lugar de trabajo: las cuentas se
   gobiernan sin salir de la plataforma. */
button.app-salto{ font-family: inherit; border: 0; cursor: pointer; }

.panel-dialogo{
	width: min(1320px, calc(100vw - 24px));
	max-width: none;
	height: calc(100vh - 24px);
	max-height: none;
	margin: auto;
	padding: 0;
	color: var(--texto);
	background: var(--fondo, var(--superficie-2));
	border: 1px solid var(--borde);
	border-radius: 16px;
	box-shadow: 0 24px 64px var(--sombra);
	overflow: hidden;
}

.panel-dialogo[open]{ display: flex; flex-direction: column; }
.panel-dialogo::backdrop{ background: rgba(8, 14, 26, .6); }

.panel-dialogo-alto{
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 18px;
	font-size: 1.02rem;
	background: var(--superficie);
	border-bottom: 1px solid var(--borde);
}

.panel-dialogo-marco{
	flex: 1;
	width: 100%;
	border: 0;
}

/* El panel adentro del cuadro: sin su cabecera —la pone el cuadro— y con el menú como
   una fila de pestañas arriba, que en un cuadro rinde más que una columna al costado. */
.is-embebido .app-header{ display: none; }

.is-embebido .app-shell{
	flex-direction: column;
	align-items: stretch;
	min-height: 100vh;
}

.is-embebido .app-side{
	position: static;
	flex: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	width: auto;
	height: auto;
	padding: 10px 18px;
	overflow: visible;
	border-right: 0;
	border-bottom: 1px solid var(--borde);
}

.is-embebido .app-side .side-pie{ display: none; }
.is-embebido .app-side .side-link{ width: auto; margin: 0; }
.is-embebido .app-main{ width: 100%; }

/* ============================================================
   Disco (pantalla del ingeniero)
   ============================================================ */
.disco-aviso{
	margin: 0 0 18px;
	padding: 12px 16px;
	font-size: .85rem;
	color: #a4262c;
	background: #fdeeee;
	border-radius: 12px;
}

[data-tema="oscuro"] .disco-aviso{ color: #f4949a; background: rgba(201, 66, 74, .18); }

.disco-migas{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin-bottom: 12px;
	font-size: .84rem;
	color: var(--texto-debil);
}

.disco-miga,
.disco-carpeta{
	padding: 2px 4px;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	color: var(--acento);
	background: none;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
}

.disco-miga:hover,
.disco-carpeta:hover{ background: var(--superficie-3); }

.disco-carpeta{ padding-left: 0; font-size: .88rem; }
.disco-tag{ margin-left: 8px; }
a.btn-fila{ display: inline-flex; align-items: center; text-decoration: none; }
.entorno-nota{ font-size: .8rem; color: var(--texto-tenue); }
#view-disco code{ font-size: .8rem; font-weight: 600; }

/* ============================================================
   Métricas de Prensa
   ============================================================
   Las tres series tienen color fijo: Noticias, Blog y Resto del portal. Son los tres
   primeros de la paleta categórica validada (daltonismo y contraste) para la superficie
   blanca de las tarjetas y, con su propio paso, para la oscura. El texto nunca va de
   esos colores: la identidad la lleva la marca al lado. */
.metricas{
	--serie-1: #2a78d6;
	--serie-2: #eb6834;
	--serie-3: #1baf7a;
	--viz-grilla: #e8ebf1;
	--viz-base: #c9cfdb;
	--viz-eje: #66738a;
}

[data-tema="oscuro"] .metricas{
	--serie-1: #3987e5;
	--serie-2: #d95926;
	--serie-3: #199e70;
	--viz-grilla: #262c40;
	--viz-base: #39405a;
	--viz-eje: #8791aa;
}

.is-serie-1{ --serie: var(--serie-1); }
.is-serie-2{ --serie: var(--serie-2); }
.is-serie-3{ --serie: var(--serie-3); }

.metricas-filtros{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: -6px 0 18px;
}

.metricas-rango{
	padding: 7px 14px;
	font-family: inherit;
	font-size: .8rem;
	font-weight: 600;
	color: var(--texto-medio);
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 999px;
	cursor: pointer;
}

.metricas-rango:hover{ background: var(--superficie-3); }
.metricas-rango.is-activo{ color: #fff; background: var(--acento); border-color: var(--acento); }
.metricas-rango:focus-visible{ outline: 2px solid var(--acento); outline-offset: 2px; }

.metricas-cuerpo{ transition: opacity .2s; }
.metricas-cuerpo.is-cargando{ opacity: .5; }

.metricas-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.metricas-par{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 18px;
	margin-bottom: 18px;
}

.metricas-par .card{ margin-bottom: 0; }

/* La marca de identidad: un cuadrito (barras) o un trazo corto (líneas). */
.metricas-clave{
	display: inline-block;
	flex: none;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	vertical-align: -1px;
	background: var(--serie);
	border-radius: 3px;
}

.metricas-clave.is-linea{ width: 14px; height: 3px; vertical-align: 3px; border-radius: 2px; }

.metricas-leyenda{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-bottom: 8px;
	font-size: .8rem;
	color: var(--texto-medio);
}

.metricas-leyenda-item{ display: inline-flex; align-items: center; }

.metricas-grafica{ width: 100%; min-height: 260px; }
.metricas-grafica.is-baja{ min-height: 200px; }
.metricas-grafica svg{ display: block; overflow: visible; }

.metricas-grilla{ stroke: var(--viz-grilla); stroke-width: 1; }
.metricas-base{ stroke: var(--viz-base); stroke-width: 1; }
.metricas-eje{ font-size: 11px; fill: var(--viz-eje); font-variant-numeric: tabular-nums; }
.metricas-linea{ fill: none; stroke: var(--serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.metricas-punto{ fill: var(--serie); stroke: var(--superficie); stroke-width: 2; }
.metricas-guia{ stroke: var(--viz-base); stroke-width: 1; }
.metricas-columna{ fill: var(--serie); }
.metricas-zona{ cursor: crosshair; outline: none; }
.metricas-zona:focus-visible{ stroke: var(--acento); stroke-width: 2; }

.metricas-tabla{ margin-top: 14px; max-height: 320px; overflow: auto; }

/* Las barras horizontales, en HTML: el nombre arriba y la barra con su valor en la punta. */
.metricas-barras{ display: grid; gap: 12px; }

.metricas-barra{ display: grid; gap: 5px; border-radius: 6px; outline: none; }
.metricas-barra:focus-visible{ outline: 2px solid var(--acento); outline-offset: 4px; }

.metricas-barra-texto{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }

.metricas-barra-nombre{
	overflow: hidden;
	max-width: 100%;
	font-size: .84rem;
	font-weight: 600;
	color: var(--texto);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.metricas-barra-nombre:hover{ color: var(--acento); text-decoration: underline; }
.metricas-barra-detalle{ font-size: .74rem; color: var(--texto-debil); }

.metricas-barra-pista{ display: flex; align-items: center; gap: 8px; }

.metricas-barra-marca{
	display: block;
	height: 10px;
	background: var(--serie);
	border-radius: 0 4px 4px 0;
	transition: filter .15s;
}

.metricas-barra:hover .metricas-barra-marca,
.metricas-barra:focus-visible .metricas-barra-marca{ filter: brightness(1.12); }

.metricas-barra-valor{ flex: none; font-size: .8rem; font-weight: 700; color: var(--texto-medio); font-variant-numeric: tabular-nums; }

.metricas-vacio{ margin: 0; padding: 18px 0; font-size: .84rem; color: var(--texto-debil); text-align: center; }

/* El globo: el valor primero y fuerte, el nombre después. */
.metricas-tip{
	position: fixed;
	z-index: 50;
	min-width: 150px;
	max-width: 280px;
	padding: 9px 12px;
	font-size: .78rem;
	color: var(--texto);
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 10px;
	box-shadow: 0 10px 28px var(--sombra);
	pointer-events: none;
}

.metricas-tip-titulo{ margin-bottom: 6px; font-weight: 600; color: var(--texto-medio); }
.metricas-tip-fila{ display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.metricas-tip-fila strong{ font-size: .86rem; font-variant-numeric: tabular-nums; }
.metricas-tip-fila span{ color: var(--texto-tenue); }
.metricas-tip-clave{ flex: none; width: 12px; height: 3px; background: var(--serie); border-radius: 2px; }

.kpi-label .metricas-clave{ width: 8px; height: 8px; }

/* ---- Servidor (pantalla del ingeniero) ---- */
.metricas-grafica.is-servidor{ min-height: 180px; }
.servidor-bajada{ margin: -6px 0 10px; font-size: .76rem; color: var(--texto-debil); }
.servidor-lavado{ fill: var(--serie); opacity: .1; stroke: none; }
.servidor-limite{ stroke: var(--viz-eje); stroke-width: 1; }
.disco-aviso.is-info{ color: var(--texto-medio); background: var(--superficie-2); border: 1px solid var(--borde); }

.servidor-datos{
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 8px 16px;
	margin: 0;
	font-size: .84rem;
}

.servidor-datos dt{ color: var(--texto-tenue); }
.servidor-datos dd{ margin: 0; color: var(--texto); overflow-wrap: anywhere; }
.servidor-commit{ font-size: .8rem; }
.servidor-commit code{ font-weight: 600; }

/* La barra de avance de los documentos que se traen al disco. */
.docs-barra{ height: 8px; margin: 10px 0 6px; background: var(--superficie-3); border-radius: 999px; overflow: hidden; }
.docs-barra i{ display: block; height: 100%; background: var(--acento); border-radius: 999px; transition: width .4s; }
.docs-errores{ margin: 6px 0 0; padding-left: 18px; font-size: .76rem; color: #a4262c; }
.docs-errores:empty{ display: none; }
[data-tema="oscuro"] .docs-errores{ color: #f4949a; }

/* ---- Restaurar una copia ---- */
.restaurar-elegir{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 4px; }
.restaurar-elegir input[type="file"]{ max-width: 100%; font-size: .82rem; color: var(--texto-medio); }

/* ---- Registro ---- */
.registro-pestanas{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--borde);
}

.registro-pestana{
	padding: 9px 14px;
	font-family: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var(--texto-tenue);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
}

.registro-pestana.is-activa{ color: var(--acento); border-bottom-color: var(--acento); }
.registro-pestana:focus-visible{ outline: 2px solid var(--acento); outline-offset: 2px; }
.registro-pestanas.is-chica{ margin-top: 16px; }
.registro-csv{ margin-left: auto; margin-bottom: 6px; }

.registro-herramientas{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

.registro-buscar,
.registro-select{
	min-width: min(320px, 100%);
	padding: 9px 12px;
	font-family: inherit;
	font-size: max(16px, .86rem);
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 9px;
}

.registro-fila{ cursor: pointer; }
.registro-fila:hover td{ background: var(--superficie-3); }
.registro-fila:focus-visible{ outline: 2px solid var(--acento); outline-offset: -2px; }
.registro-ultima{ max-width: 280px; font-size: .8rem; }
.registro-ip{ font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--texto-tenue); }
.registro-mas{ margin-top: 12px; }
.registro-persona-puesto{ margin: 4px 0 0; font-size: .82rem; color: var(--texto-tenue); }
.registro-dialogo{ width: min(1080px, calc(100vw - 24px)); }
.registro-kpis{ margin-top: 16px; }
.registro-dialogo .data-table{ font-size: .82rem; }
.registro-tabla{ width: 100%; }

@media (max-width: 760px){
	.registro-tabla thead{ display: none; }
	.registro-tabla tr{ display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
	.registro-tabla td{ padding: 0; border: 0; }
}

/* ---- Mapa conceptual ----
   Un puesto vacío: el mismo nodo, con borde punteado y en gris, para que se lea como un
   hueco del organigrama y no como una persona. Para el Presidente es un botón. */
.mapa-nodo.is-vacante{
	font-family: inherit;
	text-align: inherit;
	color: var(--texto-tenue);
	background: var(--superficie);
	border: 1.5px dashed var(--borde);
	box-shadow: none;
}

.mapa-nodo.is-vacante .mapa-nombre{ color: var(--texto-medio); }
button.mapa-nodo.is-vacante{ cursor: pointer; }
button.mapa-nodo.is-vacante:hover{ border-color: var(--acento); background: var(--acento-fondo); }
button.mapa-nodo.is-vacante:hover .mapa-extra{ color: var(--acento); }
button.mapa-nodo.is-vacante:focus-visible,
.mapa-nodo.is-tocable:focus-visible{ outline: 2px solid var(--acento); outline-offset: 2px; }

.mapa-nodo.is-tocable{ cursor: pointer; }
.mapa-nodo.is-tocable:not(.is-raiz):hover{ border-color: var(--acento); }

.mapa-clave-vacante{
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	vertical-align: -1px;
	border: 1.5px dashed var(--texto-debil);
	border-radius: 3px;
}

/* El panel cargado sólo con el mapa, adentro de la plataforma: sin pestañas. */
.is-solo-mapa .app-side{ display: none; }
.is-solo-mapa .app-main{ padding-top: 18px; }

/* La categoría Mapa conceptual de la plataforma: el mapa del panel, a todo lo alto. */
.plataforma-mapa{
	display: block;
	width: 100%;
	height: calc(100vh - var(--cabecera-alto) - 40px);
	min-height: 520px;
	border: 0;
	border-radius: 14px;
	background: var(--fondo);
}

/* ============================================================
   Ajustes de diseño del panel (septiembre de 2026)
   ============================================================ */

/* El salto a "Usuarios y roles" / "Ir a la plataforma" pasa a secundario: el amarillo
   lleno queda para la acción principal de cada pantalla (por ejemplo, "Nuevo mensaje"),
   y dos botones amarillos a la vista competían por lo mismo. */
.app-salto{
	color: #f2c94c;
	background: rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px rgba(242, 201, 76, .75);
}

.app-salto:hover{ filter: none; background: rgba(255, 255, 255, .14); }

/* El botón ☰ de la cabecera: sólo en el teléfono. */
.cabecera-menu{ display: none; }

/* El rol en la tarjeta del inicio: el nombre del puesto grande y el rol técnico debajo,
   chico. Sin partir palabras a la mitad. */
.kpi-value.is-texto{ overflow-wrap: normal; }
.kpi-rol-tecnico{ display: block; font-size: .78rem; font-weight: 600; color: var(--texto-debil); }

/* El estado de la cuenta y la presencia, separados: la etiqueta dice si la cuenta está
   habilitada; el punto junto al nombre dice si la persona está adentro ahora. */
.usuarios-filtros{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.usuarios-filtros input,
.usuarios-filtros select{
	min-height: 40px;
	padding: 8px 12px;
	font-family: inherit;
	font-size: .86rem;
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 9px;
}

.usuarios-filtros input{ flex: 1 1 220px; }
.usuarios-filtros select{ flex: 0 1 220px; }

@media (max-width: 820px){
	/* ---- La cabecera en una sola fila ----
	   El escudo, "Asamblea del Cesar" y el botón ☰. Lo demás se despliega debajo. */
	.app-header{
		flex-wrap: nowrap;
		padding: 8px 12px;
	}

	.marca-largo{ display: none; }
	.app-header .marca-nombre{ font-size: .98rem; white-space: nowrap; }
	.app-header .marca-icono{ width: 34px; height: 34px; }

	.cabecera-menu{
		display: grid;
		place-items: center;
		flex: none;
		width: 44px;
		height: 44px;
		margin-left: auto;
		padding: 0;
		color: #fff;
		background: rgba(255, 255, 255, .14);
		border: 0;
		border-radius: 10px;
		cursor: pointer;
	}

	.cabecera-menu svg{
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
	}

	.app-header.is-menu .cabecera-menu{ color: #00382a; background: #fff; }

	.app-user{
		display: none;
		position: absolute;
		top: calc(100% + 6px);
		right: 12px;
		flex: none;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 6px;
		width: min(300px, calc(100vw - 24px));
		max-height: calc(100dvh - var(--cabecera-alto) - 20px);
		overflow-y: auto;
		padding: 10px;
		background: var(--cabecera);
		border-radius: 14px;
		box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
	}

	.app-header.is-menu .app-user{ display: flex; }

	.app-user .app-salto{ justify-content: flex-start; width: 100%; }

	.app-user .cabecera-cuenta{
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.app-user .cabecera-btn,
	.app-user .tema-btn{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		height: 44px;
		padding: 0 14px;
		border-radius: 10px;
	}

	.app-user .cabecera-btn::after,
	.app-user .tema-btn::after{
		content: attr(aria-label);
		font-family: inherit;
		font-size: .86rem;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.app-user .cabecera-btn.is-usuario[aria-expanded="true"]::after{ color: #00382a; }

	.app-user .cuenta-pop{
		position: static;
		width: auto;
		max-height: 60dvh;
	}

	.app-user form,
	.app-user .app-logout{ width: 100%; }

	/* Adentro del menú el cuadro de la cuenta es angosto: cada dato va en dos renglones,
	   el rótulo arriba y el valor abajo, en vez de partir el nombre por la mitad. */
	.app-user .cuenta-dato{ display: block; }
	.app-user .cuenta-dato dd{ margin: 2px 0 0; text-align: left; overflow-wrap: normal; }

	.usuarios-filtros input,
	.usuarios-filtros select{ flex-basis: 100%; }

	/* ---- Las pestañas de "Usuarios y roles" ----
	   Una sola fila que se desliza, como el menú de la plataforma, en vez de tres renglones. */
	.is-embebido .app-side{
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
		padding: 8px 12px;
	}

	.is-embebido .app-side .side-link{ white-space: nowrap; flex: none; }
}

/* ---- Las cifras en el teléfono ----
   De a dos por fila y más bajas: de a una, las cuatro llenaban la primera pantalla. */
@media (max-width: 520px){
	.kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.kpi{ padding: 12px 14px; gap: 2px; }
	.kpi-label{ font-size: .66rem; }
	.kpi-value{ font-size: 1.35rem; }
	.kpi-value.is-texto{ font-size: 1rem; padding-top: .15rem; }
	.kpi-pie{ font-size: .7rem; }
}

/* ============================================================
   Sin efectos de brillo
   ============================================================
   Nada de resplandores, reflejos de color ni botones o tarjetas que saltan o se
   iluminan al pasar el puntero: cambian de color, y nada más. */

.app-salto{
	color: #fff;
	background: rgba(255, 255, 255, .14);
	box-shadow: none;
}

.app-salto:hover{ filter: none; background: rgba(255, 255, 255, .24); }

.bienvenida{ background: var(--cabecera); }

.login-body{ background: var(--cabecera, #00382a); }

.login-btn:hover,
.modulo-card:hover,
.doc-seccion:hover,
.doc-card:hover,
.pqr-card:hover,
.gal-card:hover,
.bienvenida-accion:hover{
	transform: none;
	filter: none;
}

.metricas-barra:focus-visible .metricas-barra-marca{ filter: none; }
.bienvenida-accion:hover{ background: #e3b93c; }
.login-card{ box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }

/* ============================================================
   Diputados (Secretaría general)
   ============================================================ */

.aviso-ok{
	margin: 0 0 14px;
	padding: 11px 14px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--acento);
	background: var(--acento-fondo);
	border-radius: 10px;
}

.dip-barra{ margin-bottom: 14px; }

.dip-barra input{
	width: 100%;
	max-width: 420px;
	min-height: 42px;
	padding: 9px 13px;
	font-family: inherit;
	font-size: max(16px, .9rem);
	color: var(--texto);
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 10px;
}

.dip-rejilla{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}

.dip-tarjeta{
	display: flex;
	flex-direction: column;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 14px;
	overflow: hidden;
}

.dip-tarjeta-foto{
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--superficie-2);
	border-bottom: 1px solid var(--borde);
}

.dip-tarjeta-foto img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.dip-iniciales{
	font-size: 2rem;
	font-weight: 700;
	color: var(--texto-debil);
}

.dip-tarjeta-cuerpo{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	flex: 1;
	padding: 14px 16px 10px;
}

.dip-cargo{
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto-debil);
}

.dip-cargo.is-mesa{ color: var(--acento); }

.dip-nombre{
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.3;
	color: var(--texto);
}

.dip-partido{
	margin: 0 0 6px;
	font-size: .84rem;
	color: var(--texto-tenue);
}

.dip-acciones{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 16px 14px;
	border-top: 1px solid var(--borde-suave);
}

.dip-acciones .btn-fila{ text-decoration: none; }

/* La cuenta de cada diputado, en su tarjeta. */
.dip-cuenta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 6px 0 0;
	font-size: .8rem;
	color: var(--texto-tenue);
}

.dip-cuenta strong{ color: var(--texto); }
.dip-cuenta-extra{ color: var(--texto-debil); }

/* ============================================================
   Cuentas: delegados, claves y funciones del Secretario
   ============================================================ */

/* Un usuario o una clave: se copian a mano, así que van en letra de ancho fijo y sin
   que el navegador los corte por la mitad. */
.cuentas-dato{
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: .84rem;
	white-space: nowrap;
}

.cuentas-dialogo{ width: min(600px, calc(100vw - 28px)); }

.cuentas-dialogo-cuerpo{
	display: grid;
	gap: 14px;
	padding: 4px 22px 16px;
	max-height: 60vh;
	overflow: auto;
}

.cuentas-dialogo-cuerpo .login-error{ margin: 0; }

/* ---- Mis delegados, en la bitácora del diputado ---- */

.delegados{ margin-top: 18px; }

.delegados-alto{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.delegados-titulo{
	margin: 0;
	font-size: 1.05rem;
	color: var(--texto);
}

.delegados-bajada{
	margin: 4px 0 0;
	font-size: .84rem;
	color: var(--texto-tenue);
}

.delegados-acciones{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}

/* ---- Funciones del Secretario ---- */

#funcionesLista{
	display: grid;
	gap: 16px;
	margin-bottom: 16px;
}

.funciones-grupo-titulo{
	margin: 0 0 6px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto-debil);
}

.funcion{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 0;
	border-top: 1px solid var(--borde-suave);
	cursor: pointer;
}

.funciones-grupo-titulo + .funcion{ border-top: 0; }

.funcion-textos{
	display: grid;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.funcion-nombre{ font-size: .92rem; color: var(--texto); }
.funcion-texto{ font-size: .8rem; color: var(--texto-tenue); }

/* El interruptor: una casilla de verdad —se marca con teclado y la lee un lector de
   pantalla como interruptor— dibujada como una píldora. */
.funcion-caja{
	flex: none;
	position: relative;
	width: 44px;
	height: 24px;
	margin: 0;
	appearance: none;
	background: var(--borde);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s;
}

.funcion-caja::after{
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	transition: left .15s;
}

.funcion-caja:checked{ background: var(--acento); }
.funcion-caja:checked::after{ left: 23px; }
.funcion-caja:disabled{ opacity: .6; cursor: wait; }

.funcion-caja:focus-visible{
	outline: 2px solid var(--acento-claro);
	outline-offset: 2px;
}

@media (max-width: 560px){
	.funcion{ flex-wrap: wrap; }
	.funcion-textos{ flex-basis: 100%; }
	.funcion .tag{ margin-right: auto; }
}

@media (prefers-reduced-motion: reduce){
	.funcion-caja, .funcion-caja::after{ transition: none; }
}

/* ---- El cuadro de la ficha ---- */

.dip-dialogo{ width: min(720px, calc(100vw - 28px)); }

.dip-form{
	display: flex;
	flex-direction: column;
	max-height: 88vh;
}

.dip-form-alto{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 22px 0;
}

.dip-form-cuerpo{
	flex: 1;
	overflow-y: auto;
	padding: 0 22px 8px;
}

.dip-form-pie{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 22px 18px;
	border-top: 1px solid var(--borde);
}

.dip-form-pie .login-error{ flex: 1 1 100%; margin: 0; }

.dip-bloque{
	padding: 16px 0;
	border-top: 1px solid var(--borde-suave);
}

.dip-bloque:first-child{ border-top: 0; padding-top: 4px; }

.dip-bloque-titulo{
	margin: 0 0 12px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--texto-debil);
}

.dip-retrato{
	display: flex;
	align-items: center;
	gap: 18px;
}

.dip-retrato-marco{
	display: grid;
	place-items: center;
	width: 104px;
	height: 104px;
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 50%;
	overflow: hidden;
}

.dip-retrato-marco img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dip-retrato-foto.is-cargando{ opacity: .5; }

.dip-retrato-acciones{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.dip-retrato-acciones small{
	flex: 1 1 100%;
	font-size: .78rem;
	color: var(--texto-debil);
}

.dip-subir{ cursor: pointer; }

.dip-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.dip-chip{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 6px 5px 12px;
	font-size: .84rem;
	color: var(--texto);
	background: var(--acento-fondo);
	border-radius: 999px;
}

.dip-chip-quitar{
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	padding: 0;
	font-size: 1rem;
	line-height: 1;
	color: var(--texto-medio);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.dip-chip-quitar:hover{ color: var(--texto); background: var(--superficie-3); }

.dip-nada{
	font-size: .84rem;
	color: var(--texto-debil);
}

.dip-agregar,
.dip-red{
	display: flex;
	gap: 8px;
}

.dip-red{ margin-bottom: 8px; }

.dip-agregar input,
.dip-red input,
.dip-red select{
	min-height: 42px;
	padding: 9px 12px;
	font-family: inherit;
	font-size: max(16px, .9rem);
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 10px;
}

.dip-agregar input,
.dip-red input{ flex: 1; min-width: 0; }

.dip-red select{ flex: 0 0 140px; }

.dip-redes{ margin-bottom: 8px; }

@media (max-width: 560px){
	.dip-retrato{ flex-direction: column; align-items: flex-start; }
	.dip-red{ flex-wrap: wrap; }
	.dip-red select{ flex: 1 1 100%; }
	.dip-dialogo{ width: 100vw; max-height: 100dvh; border-radius: 0; }
	.dip-form{ max-height: 100dvh; }
}
.dip-acciones{ gap: 5px; }
.dip-acciones .btn-fila{ padding: 6px 10px; font-size: .76rem; }
.dip-acciones .is-peligro{ margin-left: auto; }

/* ---- Agregar, al principio ----
   El formulario de una tabla va arriba de sus filas, y el de la página (un acta en su
   periodo, una convocatoria nueva) arriba de todo, en una tarjeta propia. */
.doc-grupo > .doc-nuevo{
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-top: 0;
	border-bottom: 1px dashed var(--borde);
}

.doc-nuevo.is-pagina{
	margin: 0 0 20px;
	padding: 16px 18px;
	background: var(--superficie);
	border: 1px solid var(--borde);
	border-radius: 14px;
}

.doc-nuevo-titulo{
	flex: 1 1 100%;
	margin: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto-debil);
}

.doc-nuevo.is-pagina .field:first-of-type{ flex: 1 1 260px; }
.doc-nuevo select{
	width: 100%;
	padding: 11px 13px;
	font-family: inherit;
	font-size: max(16px, .93rem);
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 10px;
}

.doc-grupo-borrar{ margin-left: auto; align-self: center; }

/* ---- Documentos: el botón + y su cuadro ---- */
.btn-mas{
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	color: #fff;
	background: var(--acento);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.btn-mas:hover{ background: var(--acento-claro); }
.btn-mas:focus-visible{ outline: 2px solid var(--acento); outline-offset: 3px; }

.btn-mas svg{
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}

.doc-grupo-botones{
	display: inline-flex;
	gap: 6px;
	margin-left: auto;
	align-self: center;
}

.doc-grupo-botones .btn-fila{ padding: 5px 10px; font-size: .76rem; }

.doc-cuadro{ width: min(560px, calc(100vw - 28px)); }

.doc-cuadro-form{
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 22px 20px;
}

.doc-cuadro-alto{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.doc-pestanas{
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 11px;
}

.doc-pestana{
	flex: 1;
	padding: 9px 12px;
	font-family: inherit;
	font-size: .84rem;
	font-weight: 600;
	color: var(--texto-tenue);
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.doc-pestana[aria-selected="true"]{ color: var(--acento); background: var(--superficie); box-shadow: 0 1px 2px var(--sombra); }
.doc-pestana[hidden]{ display: none; }

.doc-cuadro-cuerpo{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.doc-cuadro-cuerpo .field select{
	width: 100%;
	padding: 11px 13px;
	font-family: inherit;
	font-size: max(16px, .93rem);
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 10px;
}

.doc-cuadro-cuerpo input[type="file"]{ padding: 9px; }

.doc-cuadro-pie{
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--borde);
}

.doc-cuadro-hueco{ flex: 1; }
.doc-cuadro .login-error{ margin: 0; }

/* El + de documentos queda fijo abajo a la derecha, siempre a mano mientras se recorre la
   lista. Vive dentro de la vista, así que sólo aparece en las pantallas de documentos. */
.btn-mas{
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 30;
	width: 58px;
	height: 58px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

.btn-mas svg{ width: 26px; height: 26px; }

@media (max-width: 820px){
	.btn-mas{ right: 16px; bottom: 18px; }
}

/* ---- Mapa conceptual: cómo se recorre ---- */
.mapa-cabeza{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.mapa-herramientas{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mapa-herramientas .btn-fila[aria-pressed="true"]{ color: var(--acento); background: var(--acento-fondo); }

/* Con el cursor: un recuadro de alto fijo que se recorre moviendo el puntero. */
.mapa-marco.is-cursor{
	height: min(68vh, 680px);
	overflow: hidden;
	cursor: move;
	border: 1px solid var(--borde-suave);
	border-radius: 12px;
}

/* Pantalla completa: la del navegador (:fullscreen) o, si no hay, la tarjeta estirada. */
.mapa-tarjeta:fullscreen,
.mapa-tarjeta.is-completa{
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 18px 22px;
	background: var(--superficie);
	border-radius: 0;
}

.mapa-tarjeta.is-completa{
	position: fixed;
	inset: 0;
	z-index: 100;
}

.mapa-tarjeta:fullscreen .mapa-marco,
.mapa-tarjeta.is-completa .mapa-marco{
	flex: 1;
	min-height: 0;
	height: auto;
	overflow: auto;
}

.mapa-tarjeta:fullscreen .mapa-marco.is-cursor,
.mapa-tarjeta.is-completa .mapa-marco.is-cursor{ overflow: hidden; }

.mapa-tarjeta:fullscreen .card-note,
.mapa-tarjeta.is-completa .card-note{ display: none; }

/* ---- Categorías editables ----
   El cuadro que abre «Categorías» en noticias, galería y bitácoras: una fila por categoría,
   con su nombre editable, cuántos elementos la usan y los botones de orden y borrar. */
.cat-dialogo{ width: min(560px, calc(100vw - 32px)); }
.cat-lista{ display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }

.cat-fila{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.cat-fila > input{
	flex: 1 1 180px;
	min-width: 0;
	min-height: 40px;
	padding: 8px 12px;
	font-family: inherit;
	font-size: max(16px, .9rem);
	color: var(--texto);
	background: var(--superficie-2);
	border: 1px solid var(--borde);
	border-radius: 10px;
}

.cat-usos{
	min-width: 32px;
	padding: 4px 8px;
	font-size: .78rem;
	font-weight: 700;
	text-align: center;
	color: var(--texto-debil);
	background: var(--superficie-2);
	border-radius: 999px;
}

.cat-fila .btn-fila{ padding: 7px 11px; }
.cat-fila .btn-fila:disabled{ opacity: .4; cursor: default; }

.cat-borrar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 12px;
	font-size: .84rem;
	background: var(--superficie-2);
	border-radius: 10px;
}

.cat-borrar select{ min-height: 36px; padding: 6px 10px; font-family: inherit; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); }