/**
 * Panel de administración federativa servido fuera del escritorio.
 *
 * fpcv-admin.css se escribió sobre los componentes de wp-admin: da por hechas
 * .wrap, .button, .notice, .widefat, .form-table, .tablenav… que vienen de
 * common.css y forms.css, hojas que WordPress sólo carga dentro del escritorio.
 * Aquí se reponen esas clases —nada más que las que usan las plantillas— para no
 * tener que duplicar el marcado del panel.
 *
 * Todo cuelga de .fpcv-admin-frontend: el panel vive dentro de una página del
 * tema, y unas reglas sueltas sobre `.button` o `table` reescribirían medio
 * sitio. Por el mismo motivo se fija aquí la tipografía y el tamaño de letra en
 * lugar de heredar los del tema, que descuadran las tablas densas del panel.
 */

.fpcv-admin-frontend {
	--fpcv-azul: #2271b1;
	--fpcv-azul-oscuro: #135e96;
	--fpcv-borde: #dcdcde;
	--fpcv-texto: #1d2327;
	--fpcv-apagado: #646970;
	--fpcv-fondo: #f0f0f1;

	background: var(--fpcv-fondo);
	border-radius: 6px;
	box-sizing: border-box;
	color: var(--fpcv-texto);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	/*
	 * 14px, no los 13 del escritorio. Allí el 13 funciona porque toda la pantalla
	 * está a esa escala; aquí el panel convive con el texto del tema, que ronda
	 * los 18, y la misma medida se lee como «letra diminuta».
	 */
	font-size: 14px;
	line-height: 1.5;
	padding: 4px 16px 20px;
	width: 100%;
}

.fpcv-admin-frontend *,
.fpcv-admin-frontend *::before,
.fpcv-admin-frontend *::after {
	box-sizing: inherit;
}

/* -------------------------------------------------------------------------
 * Barra de navegación entre pantallas.
 * ---------------------------------------------------------------------- */

.fpcv-admin-nav {
	align-items: center;
	background: #fff;
	border: 1px solid var(--fpcv-borde);
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	margin: 16px 0;
	padding: 8px 12px;
}

.fpcv-admin-nav__enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.fpcv-admin-nav__enlace {
	border-bottom: 2px solid transparent;
	border-radius: 3px 3px 0 0;
	color: var(--fpcv-azul);
	display: inline-block;
	font-weight: 600;
	padding: 8px 12px;
	text-decoration: none;
}

.fpcv-admin-nav__enlace:hover,
.fpcv-admin-nav__enlace:focus {
	background: #f6f7f7;
	color: var(--fpcv-azul-oscuro);
}

.fpcv-admin-nav__enlace.is-active {
	border-bottom-color: var(--fpcv-azul);
	color: var(--fpcv-texto);
}

.fpcv-admin-nav__sesion {
	align-items: center;
	display: flex;
	gap: 12px;
}

.fpcv-admin-nav__usuario {
	color: var(--fpcv-apagado);
}

.fpcv-admin-nav__salir {
	color: var(--fpcv-apagado);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Contenedor y títulos: el equivalente de .wrap del escritorio.
 * ---------------------------------------------------------------------- */

.fpcv-admin-frontend .wrap {
	margin: 0;
	max-width: none;
}

.fpcv-admin-frontend h1 {
	font-size: 23px;
	font-weight: 400;
	line-height: 1.3;
	margin: 0 0 16px;
	padding: 9px 0 4px;
}

.fpcv-admin-frontend h2 {
	font-size: 16px;
	margin: 0 0 12px;
}

.fpcv-admin-frontend p {
	margin: 0 0 12px;
}

.fpcv-admin-frontend .description {
	color: var(--fpcv-apagado);
	font-size: 13px;
	font-style: italic;
	margin: 4px 0 0;
}

.fpcv-admin-frontend .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* -------------------------------------------------------------------------
 * Campos de formulario.
 * ---------------------------------------------------------------------- */

.fpcv-admin-frontend input[type="text"],
.fpcv-admin-frontend input[type="search"],
.fpcv-admin-frontend input[type="number"],
.fpcv-admin-frontend input[type="email"],
.fpcv-admin-frontend input[type="url"],
.fpcv-admin-frontend input[type="password"],
.fpcv-admin-frontend input[type="date"],
.fpcv-admin-frontend select,
.fpcv-admin-frontend textarea {
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	color: var(--fpcv-texto);
	font-family: inherit;
	font-size: 14px;
	line-height: 2;
	margin: 0;
	max-width: 100%;
	min-height: 30px;
	padding: 0 8px;
}

.fpcv-admin-frontend textarea {
	line-height: 1.5;
	padding: 6px 8px;
}

.fpcv-admin-frontend input:focus,
.fpcv-admin-frontend select:focus,
.fpcv-admin-frontend textarea:focus {
	border-color: var(--fpcv-azul);
	box-shadow: 0 0 0 1px var(--fpcv-azul);
	outline: 2px solid transparent;
}

.fpcv-admin-frontend input[type="checkbox"],
.fpcv-admin-frontend input[type="radio"] {
	margin: 0 6px 0 0;
	vertical-align: middle;
}

.fpcv-admin-frontend .regular-text {
	width: 25em;
}

.fpcv-admin-frontend .large-text {
	width: 100%;
}

.fpcv-admin-frontend .small-text {
	width: 6em;
}

/* -------------------------------------------------------------------------
 * Botones.
 * ---------------------------------------------------------------------- */

.fpcv-admin-frontend .button {
	background: #f6f7f7;
	border: 1px solid var(--fpcv-azul);
	border-radius: 3px;
	color: var(--fpcv-azul);
	cursor: pointer;
	display: inline-block;
	font-size: 13px;
	font-weight: 400;
	line-height: 2.15384615;
	margin: 0;
	min-height: 30px;
	padding: 0 10px;
	text-decoration: none;
	vertical-align: top;
	white-space: nowrap;
}

.fpcv-admin-frontend .button:hover,
.fpcv-admin-frontend .button:focus {
	background: #f0f0f1;
	border-color: var(--fpcv-azul-oscuro);
	color: var(--fpcv-azul-oscuro);
}

.fpcv-admin-frontend .button-primary {
	background: var(--fpcv-azul);
	border-color: var(--fpcv-azul);
	color: #fff;
}

.fpcv-admin-frontend .button-primary:hover,
.fpcv-admin-frontend .button-primary:focus {
	background: var(--fpcv-azul-oscuro);
	border-color: var(--fpcv-azul-oscuro);
	color: #fff;
}

.fpcv-admin-frontend .button[disabled],
.fpcv-admin-frontend .button:disabled {
	background: #f6f7f7;
	border-color: var(--fpcv-borde);
	color: #a7aaad;
	cursor: default;
}

.fpcv-admin-frontend .submit {
	margin: 16px 0 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Avisos.
 * ---------------------------------------------------------------------- */

.fpcv-admin-frontend .notice {
	background: #fff;
	border: 1px solid var(--fpcv-borde);
	border-left: 4px solid var(--fpcv-azul);
	border-radius: 3px;
	margin: 16px 0;
	padding: 1px 12px;
}

.fpcv-admin-frontend .notice p {
	margin: 8px 0;
}

.fpcv-admin-frontend .notice-success {
	border-left-color: #00a32a;
}

.fpcv-admin-frontend .notice-error {
	border-left-color: #d63638;
}

.fpcv-admin-frontend .notice-warning {
	border-left-color: #dba617;
}

/* -------------------------------------------------------------------------
 * Tablas: .widefat, .striped y la de dos columnas de los ajustes.
 * ---------------------------------------------------------------------- */

.fpcv-admin-frontend .widefat {
	background: #fff;
	border: 1px solid var(--fpcv-borde);
	border-radius: 4px;
	border-spacing: 0;
	clear: both;
	margin: 0;
	width: 100%;
}

.fpcv-admin-frontend .widefat th,
.fpcv-admin-frontend .widefat td {
	color: var(--fpcv-texto);
	font-size: 13px;
	line-height: 1.4;
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}

.fpcv-admin-frontend .widefat thead th {
	border-bottom: 1px solid var(--fpcv-borde);
	font-weight: 600;
}

.fpcv-admin-frontend .widefat tbody th,
.fpcv-admin-frontend .widefat tbody td {
	border-top: 1px solid #f0f0f1;
}

.fpcv-admin-frontend .striped > tbody > tr:nth-child(odd) {
	background: #f6f7f7;
}

.fpcv-admin-frontend .form-table {
	border-collapse: collapse;
	clear: both;
	margin: 0;
	width: 100%;
}

.fpcv-admin-frontend .form-table th,
.fpcv-admin-frontend .form-table td {
	padding: 15px 10px;
	text-align: left;
	vertical-align: top;
}

.fpcv-admin-frontend .form-table th {
	font-weight: 600;
	padding-left: 0;
	width: 200px;
}

/* -------------------------------------------------------------------------
 * Paginación.
 * ---------------------------------------------------------------------- */

.fpcv-admin-frontend .tablenav {
	clear: both;
	margin: 12px 0;
}

.fpcv-admin-frontend .tablenav-pages {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-end;
}

.fpcv-admin-frontend .displaying-num {
	color: var(--fpcv-apagado);
	margin-right: 8px;
}

.fpcv-admin-frontend .page-numbers {
	background: #fff;
	border: 1px solid #7e8993;
	border-radius: 3px;
	color: var(--fpcv-azul);
	display: inline-block;
	line-height: 1;
	min-width: 30px;
	padding: 8px 10px;
	text-align: center;
	text-decoration: none;
}

.fpcv-admin-frontend .page-numbers.current {
	background: var(--fpcv-azul);
	border-color: var(--fpcv-azul);
	color: #fff;
}

.fpcv-admin-frontend .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* -------------------------------------------------------------------------
 * Formulario de acceso.
 * ---------------------------------------------------------------------- */

.fpcv-admin-frontend--login {
	background: none;
	padding: 0;
}

.fpcv-login-admin {
	background: #fff;
	border: 1px solid var(--fpcv-borde);
	border-radius: 6px;
	margin: 32px auto;
	max-width: 380px;
	padding: 24px;
}

.fpcv-login-admin h2 {
	font-size: 18px;
	margin-top: 0;
}

.fpcv-login-admin label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.fpcv-login-admin input[type="text"],
.fpcv-login-admin input[type="password"] {
	width: 100%;
}

.fpcv-login-admin__recordar label {
	font-weight: 400;
}

/* -------------------------------------------------------------------------
 * Pantallas estrechas: las tablas del panel son anchas y densas, así que se
 * desplazan en horizontal dentro de su caja en lugar de romper la página.
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 782px) {
	.fpcv-admin-frontend {
		padding: 4px 8px 16px;
	}

	.fpcv-admin-frontend .widefat {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.fpcv-admin-frontend .form-table th {
		display: block;
		padding-bottom: 0;
		width: auto;
	}

	.fpcv-admin-frontend .form-table td {
		display: block;
		padding-left: 0;
	}
}

/* =========================================================================
 * Blindaje frente al tema
 *
 * Todo lo anterior usa una sola clase de especificidad (0,1,0), que cualquier
 * tema supera con reglas como `.entry-content table` o `.entry-content .button`.
 * Aquí se repite el contenedor —dos veces la misma clase, sin `!important`— para
 * subir a (0,2,0) y ganar esas reglas sin recurrir a la fuerza bruta.
 *
 * Sólo se tocan propiedades que fpcv-admin.css NO fija en sus componentes: esa
 * hoja se carga después de ésta, así que en un empate gana ella y los estilos
 * propios del panel (.fpcv-btn, .fpcv-admin__tabla, .fpcv-admin__conceptos…)
 * siguen mandando sobre los suyos.
 * ====================================================================== */

/*
 * Los temas de bloques limitan el ancho de cada hijo del contenido
 * (`.entry-content > * { max-width: var(--wp--style--global--content-size) }`,
 * unos 650px). El panel entero cabría ahí comprimido, que es de donde sale la
 * sensación de «tablas minúsculas». Es el único `!important` del fichero: la
 * regla del tema tiene la misma especificidad que la nuestra y se carga después,
 * así que sin él no hay forma de ganarla.
 *
 * El tope se puede subir o bajar desde el shortcode con
 * [fpcv_panel_admin ancho="1800"], que escribe --fpcv-admin-ancho en el
 * contenedor.
 */
.fpcv-admin-frontend.fpcv-admin-frontend {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--fpcv-admin-ancho, 1400px) !important;
}

/*
 * [fpcv_panel_admin ancho="completo"]: sin tope, todo lo que dé el contenedor.
 * Con un maquetador es lo que suele hacer falta cuando la sección ya está a
 * ancho completo y el que sobra es nuestro máximo.
 */
.fpcv-admin-frontend.fpcv-admin-frontend--completo {
	max-width: none !important;
	width: 100%;
}

/*
 * [fpcv_panel_admin ancho="pantalla"]: el panel se sale de su contenedor hasta
 * el ancho de la ventana. Es la salida para las secciones «en caja» —los 1140px
 * de Elementor, por ejemplo— cuando no se puede o no se quiere tocar la
 * maquetación de la página.
 *
 * Los márgenes negativos tiran de los dos lados hasta el borde de la ventana
 * esté donde esté el contenedor. Ojo: 100vw cuenta la barra de desplazamiento
 * vertical, así que puede aparecer una barra horizontal de unos pocos píxeles;
 * si molesta, lo limpio es poner la sección a ancho completo en el maquetador y
 * usar ancho="completo".
 */
.fpcv-admin-frontend.fpcv-admin-frontend--pantalla {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw !important;
	width: auto;
}

/* Las celdas del panel a 13px: los 12px del escritorio se quedan cortos aquí. */
.fpcv-admin-frontend .fpcv-admin__tabla th,
.fpcv-admin-frontend .fpcv-admin__tabla td,
.fpcv-admin-frontend.fpcv-admin-frontend .widefat th,
.fpcv-admin-frontend.fpcv-admin-frontend .widefat td {
	font-size: 13px;
	line-height: 1.4;
}

/* El tema no decide cómo se ven las tablas del panel. */
.fpcv-admin-frontend.fpcv-admin-frontend table {
	border-collapse: collapse;
	font-family: inherit;
	margin: 0;
	max-width: none;
	width: 100%;
}

/*
 * Muchos temas estiran todos los campos con `input, select { width: 100% }`, y
 * es lo que descoloca y deforma los filtros y los botones de cada fila. Se
 * devuelven a su ancho natural; los que sí deben ocupar todo lo piden luego.
 */
.fpcv-admin-frontend.fpcv-admin-frontend input,
.fpcv-admin-frontend.fpcv-admin-frontend select,
.fpcv-admin-frontend.fpcv-admin-frontend textarea {
	float: none;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	width: auto;
}

.fpcv-admin-frontend.fpcv-admin-frontend textarea,
.fpcv-admin-frontend.fpcv-admin-frontend .large-text {
	width: 100%;
}

.fpcv-admin-frontend.fpcv-admin-frontend .regular-text {
	width: 25em;
}

.fpcv-admin-frontend.fpcv-admin-frontend .small-text {
	width: 6em;
}

/*
 * Quita el maquillaje que los temas ponen a los botones —mayúsculas, espaciado
 * entre letras, sombras, esquinas redondeadas, ancho completo— sin tocar nada
 * de lo que fpcv-admin.css usa para colocarlos (margin-left ni vertical-align).
 *
 * Los botones propios del panel quedan fuera. Este selector va a (0,2,1) y los
 * suyos a (0,2,0), así que la especificidad los alcanzaba pese a cargarse
 * después: al conmutador SI/NO le quitaba el `min-width` que iguala las dos
 * pastillas —de ahí que el NO saliera más ancho que el SI— y a los dos, las
 * mayúsculas. Su propia hoja ya los deja a prueba de temas.
 */
.fpcv-admin-frontend.fpcv-admin-frontend .button,
.fpcv-admin-frontend.fpcv-admin-frontend button:not(.fpcv-btn):not(.fpcv-conmutador) {
	box-shadow: none;
	float: none;
	font-family: inherit;
	letter-spacing: normal;
	min-width: 0;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	width: auto;
}

/* Los enlaces del panel no llevan el subrayado del contenido del tema; los que
   son un botón de acción disfrazado de enlace, tampoco al pasar por encima. */
.fpcv-admin-frontend.fpcv-admin-frontend a {
	box-shadow: none;
	text-decoration: none;
}

.fpcv-admin-frontend.fpcv-admin-frontend a:not(.fpcv-btn):hover {
	text-decoration: underline;
}

/* El tema no pinta las listas ni los títulos de dentro del panel. */
.fpcv-admin-frontend.fpcv-admin-frontend h1,
.fpcv-admin-frontend.fpcv-admin-frontend h2,
.fpcv-admin-frontend.fpcv-admin-frontend h3 {
	color: inherit;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}
