/**
 * Estilos del panel de administración.
 *
 * Extraídos del bloque <style> de «panel de administrador.php» y adaptados a
 * los componentes nativos del escritorio de WordPress.
 */

.fpcv-admin__panel {
	background: #fff;
	border: 1px solid #dcdcde;
	border-left: 4px solid #2271b1;
	border-radius: 4px;
	margin: 20px 0;
	padding: 16px 20px;
}

.fpcv-admin__panel h2 {
	margin-top: 0;
}

.fpcv-admin__panel-cabecera {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

.fpcv-admin__badge {
	background: #2271b1;
	border-radius: 10px;
	color: #fff;
	font-size: 11px;
	padding: 2px 9px;
	vertical-align: middle;
}

.fpcv-admin__filtros {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}

.fpcv-admin__filtros label {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	font-weight: 600;
}

.fpcv-admin__filtros label span {
	margin-bottom: 3px;
}

.fpcv-admin__ayuda {
	color: #646970;
	font-size: 12px;
	margin: 0;
	width: 100%;
}

/* La acción en bloque cabe en una sola línea: la ayuda a la izquierda y el
   botón pegado al margen derecho, en lugar de ocupar otra fila él solo. El
   texto conserva un ancho mínimo para que en pantallas estrechas el botón
   baje en vez de estrujarse. */
.fpcv-admin__filtros--bloque {
	align-items: center;
}

.fpcv-admin__filtros--bloque .fpcv-admin__ayuda {
	flex: 1 1 240px;
	width: auto;
}

.fpcv-admin__filtros--bloque .button {
	margin-left: auto;
}

.fpcv-admin__tabla {
	margin-bottom: 20px;
}

.fpcv-admin__tabla th,
.fpcv-admin__tabla td {
	font-size: 12px;
	vertical-align: middle;
}

.fpcv-admin__edicion > td {
	background: #fcf9e8;
}

.fpcv-admin__rejilla {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(140px, 1fr));
	margin: 10px 0;
}

.fpcv-admin__rejilla label {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	font-weight: 600;
}

.fpcv-admin__rejilla label span {
	margin-bottom: 3px;
}

.fpcv-form-inline {
	display: inline-block;
	margin: 0;
}

/* Mantiene alineados los botones de acción de cada fila. */
.fpcv-admin__tabla .fpcv-form-inline,
.fpcv-admin__tabla .button {
	vertical-align: middle;
}

/* Aviso junto a un campo de ajustes mal configurado. */
.fpcv-admin__aviso-ajuste {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 3px;
	background: #fcf0f1;
	color: #b32d2e;
	font-size: 12px;
}

/* --- Botones de acción de fila ------------------------------------------ */

/* Mismo lenguaje que los botones del panel de clubes: pastilla sólida de color,
   texto en versalitas y tamaño «mini» dentro de las tablas. Las reglas se
   repiten aquí porque fpcv-public.css no se carga en el escritorio, y van
   scopeadas con «.fpcv-admin» para no tocar los botones nativos de WordPress.
   Los colores son los mismos de la paleta pública, salvo el de editar: en el
   panel de clubes es azul, pero aquí acompaña siempre a eliminar y en naranja
   la pareja se lee de un vistazo. */
.fpcv-admin {
	--fpcv-medio: #34495e;
	--fpcv-azul: #2980b9;
	--fpcv-verde: #27ae60;
	--fpcv-rojo: #c0392b;
	--fpcv-naranja: #d35400;
	--fpcv-morado: #8e44ad;
	--fpcv-gris: #95a5a6;
	--fpcv-dorado: #f39c12;
}

.fpcv-admin .fpcv-btn {
	align-items: center;
	background: var(--fpcv-medio);
	border: none;
	border-radius: 4px;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	gap: 5px;
	height: auto;
	justify-content: center;
	line-height: 1.2;
	margin: 0;
	min-height: 0;
	padding: 10px 16px;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.fpcv-admin .fpcv-btn:hover,
.fpcv-admin .fpcv-btn:focus {
	color: #fff;
	filter: brightness(0.9);
	text-decoration: none;
}

.fpcv-admin .fpcv-btn--mini {
	font-size: 10px;
	padding: 5px 9px;
}

.fpcv-admin .fpcv-btn--editar { background: var(--fpcv-naranja); }
.fpcv-admin .fpcv-btn--peligro { background: var(--fpcv-rojo); }
.fpcv-admin .fpcv-btn--documento { background: var(--fpcv-morado); }
.fpcv-admin .fpcv-btn--neutro { background: var(--fpcv-gris); }
.fpcv-admin .fpcv-btn--exito { background: var(--fpcv-verde); }
.fpcv-admin .fpcv-btn--factura { background: var(--fpcv-dorado); }

.fpcv-admin .fpcv-btn[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

/* Agrupa las acciones de una fila en una sola línea. Sin «nowrap» la columna
   es demasiado estrecha y los botones se apilan uno debajo de otro. */
.fpcv-admin .fpcv-acciones {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	line-height: 1;
}

/* La celda de acciones se queda con el ancho de sus botones y deja el resto
   del espacio a las columnas de datos. */
.fpcv-admin__tabla .fpcv-acciones {
	white-space: nowrap;
}

/* --- Conmutadores SI/NO ------------------------------------------------- */

/* Scopeados con «.fpcv-admin», igual que .fpcv-btn: una sola clase pierde
   contra las reglas de botón de cualquier tema —«.entry-content button» y
   compañía— cuando el panel se sirve fuera del escritorio con
   [fpcv_panel_admin], y el conmutador se queda gris y sin tamaño fijo. Por lo
   mismo se repiten aquí la tipografía y el maquillaje que los temas dan por su
   cuenta a los botones. */
.fpcv-admin .fpcv-conmutador {
	border: none;
	border-radius: 3px;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.4;
	margin: 0;
	min-width: 40px;
	padding: 4px 8px;
	text-shadow: none;
	text-transform: uppercase;
	vertical-align: middle;
}

.fpcv-admin .fpcv-conmutador--si { background: #2ecc71; }
.fpcv-admin .fpcv-conmutador--no { background: #e74c3c; }

.fpcv-admin .fpcv-conmutador:hover:not(:disabled) {
	opacity: 0.85;
}

.fpcv-admin .fpcv-conmutador:disabled {
	cursor: wait;
	opacity: 0.6;
}

/* --- Indicadores e importes --------------------------------------------- */

.fpcv-indicador {
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	height: 20px;
	line-height: 20px;
	min-width: 20px;
	text-align: center;
}

.fpcv-indicador--verde { background: #27ae60; }
.fpcv-indicador--rojo { background: #e74c3c; }

/* Etiqueta de estado de una fila: dice lo que ya ha pasado (una devolución
   hecha, un intento fallido). No es un botón ni un conmutador, así que no
   debe parecerlo: sin relieve, sin cursor de mano y en cuerpo pequeño. */
.fpcv-admin .fpcv-estado {
	border-radius: 3px;
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	padding: 2px 8px;
	white-space: nowrap;
}

.fpcv-admin .fpcv-estado--ok {
	background: #e6f6ec;
	color: #1e7e46;
}

.fpcv-admin .fpcv-estado--mal {
	background: #fdeaea;
	color: #a02b2b;
}

.fpcv-importe--verde { color: #27ae60; font-weight: 700; }
.fpcv-importe--rojo { color: #e74c3c; font-weight: 700; }

.fpcv-admin__no-disponible {
	color: #a7aaad;
	font-size: 11px;
}

/* --- Pestañas de la tabla de facturas ------------------------------------ */

/* Mismo lenguaje que las pestañas nativas del escritorio (.nav-tab): fila de
   pastillas apoyadas sobre una línea, y la activa «cosida» a la tabla que hay
   debajo tapando esa línea con su propio fondo blanco. */
.fpcv-admin__pestanas {
	align-items: flex-end;
	border-bottom: 1px solid #c3c4c7;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 20px 0 0;
}

.fpcv-admin .fpcv-admin__pestana {
	align-items: center;
	background: #dcdcde;
	border: 1px solid #c3c4c7;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	color: #50575e;
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 7px;
	line-height: 1.4;
	margin-bottom: -1px;
	padding: 8px 14px;
	text-decoration: none;
}

.fpcv-admin .fpcv-admin__pestana:hover,
.fpcv-admin .fpcv-admin__pestana:focus {
	background: #f0f0f1;
	color: #1d2327;
}

.fpcv-admin__pestana:focus-visible {
	box-shadow: 0 0 0 2px #2271b1;
	outline: none;
}

.fpcv-admin .fpcv-admin__pestana.is-active,
.fpcv-admin .fpcv-admin__pestana.is-active:hover {
	background: #fff;
	color: #1d2327;
	padding-bottom: 9px;
}

/* El contador es un círculo: con una sola cifra manda el ancho mínimo, y con
   tres o más se estira a pastilla en vez de recortar el número. */
.fpcv-admin__contador {
	background: #787c82;
	border-radius: 9px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	min-width: 18px;
	padding: 0 5px;
	text-align: center;
}

/* Las dos burbujas van juntas y más pegadas entre sí que al texto: se leen
   como un par «cobradas / pendientes», no como dos datos sueltos. */
.fpcv-admin__pestana .fpcv-admin__contador + .fpcv-admin__contador {
	margin-left: -3px;
}

.fpcv-admin__contador--cobradas {
	background: var(--fpcv-verde);
}

.fpcv-admin__contador--pendientes {
	background: var(--fpcv-rojo);
}

/* Un cero no es una alarma ni un logro: quitar la burbuja movería la barra al
   cambiar de pestaña, así que se queda pero apagada en gris. */
.fpcv-admin .fpcv-admin__contador.is-cero {
	background: #c3c4c7;
	color: #50575e;
}

.fpcv-admin__pestana.is-active .fpcv-admin__contador {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset;
}

/* «Nueva factura» no es una pestaña: no filtra, abre otra pantalla. Va al otro
   extremo de la barra, en verde y sin contador, para que se lea como acción. */
.fpcv-admin .fpcv-admin__pestana--nueva {
	background: var(--fpcv-verde);
	border-color: var(--fpcv-verde);
	color: #fff;
	margin-left: auto;
	text-decoration: none;
}

.fpcv-admin .fpcv-admin__pestana--nueva:hover,
.fpcv-admin .fpcv-admin__pestana--nueva:focus {
	background: #229954;
	border-color: #229954;
	color: #fff;
}

.fpcv-admin .fpcv-admin__pestana--nueva::before {
	content: '+';
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.fpcv-admin__facturas {
	border-collapse: collapse;
	margin-top: 0;
	/* El reparto automático mide el contenido de las filas visibles, así que
	   cada pestaña salía con unos anchos distintos y las columnas se movían al
	   pasar de Licencias a Abonos. Con «fixed» el reparto lo mandan los
	   porcentajes de abajo y la tabla se lee igual en las cinco pestañas. */
	table-layout: fixed;
	width: 100%;
}

/* Suman 100. El grueso va a Club / Concepto, que es la única columna de texto
   libre; el resto son cifras, fechas y pastillas de ancho conocido. */
.fpcv-admin__facturas th:nth-child(1) { width: 9%; }  /* Tipo */
.fpcv-admin__facturas th:nth-child(2) { width: 8%; }  /* Fecha */
.fpcv-admin__facturas th:nth-child(3) { width: 23%; } /* Club / Concepto */
.fpcv-admin__facturas th:nth-child(4) { width: 7%; }  /* Registros */
.fpcv-admin__facturas th:nth-child(5) { width: 9%; }  /* Cobrado */
.fpcv-admin__facturas th:nth-child(6) { width: 9%; }  /* Pendiente */
.fpcv-admin__facturas th:nth-child(7) { width: 9%; }  /* Importe total */
.fpcv-admin__facturas th:nth-child(8) { width: 10%; } /* Nº factura */
.fpcv-admin__facturas th:nth-child(9) { width: 6%; }  /* Pagada */
.fpcv-admin__facturas th:nth-child(10) { width: 10%; } /* PDF */

/* Con anchos fijos el texto largo ya no ensancha la columna, así que hay que
   dejarlo partir: el concepto de una factura administrativa es el nombre
   entero de la línea del pedido. */
.fpcv-admin .fpcv-admin__facturas td {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Rejilla completa. «widefat» sólo separa filas, y esta tabla mezcla cuatro
   procedencias con siete columnas seguidas de cifras: sin líneas verticales se
   pierde de vista a qué columna pertenece cada importe. */
.fpcv-admin .fpcv-admin__facturas th,
.fpcv-admin .fpcv-admin__facturas td {
	border: 1px solid #c3c4c7;
}

/* Cabecera en el azul pizarra de la paleta del plugin, para que se despegue de
   los datos y quede claro dónde empieza la tabla. El borde va más oscuro que
   el de las celdas: sobre fondo oscuro, el gris claro no se ve. */
.fpcv-admin .fpcv-admin__facturas thead th {
	background: var(--fpcv-medio);
	border-color: #22303c;
	color: #fff;
	font-weight: 700;
}

/* El enlace de orden de WordPress, si algún día se activa, hereda el color. */
.fpcv-admin .fpcv-admin__facturas thead th a {
	color: #fff;
}

/* Barra entre las pestañas y la tabla: filtro de ejercicio a la izquierda y
   recuento a la derecha. */
.fpcv-admin__barra {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin: 12px 0;
}

.fpcv-admin__filtro-anio {
	align-items: center;
	display: flex;
	gap: 8px;
}

.fpcv-admin__filtro-anio label {
	font-size: 12px;
	font-weight: 600;
}

.fpcv-admin__recuento {
	color: #646970;
	font-size: 12px;
	margin: 0;
}

.fpcv-admin__paginacion {
	margin-top: 12px;
}

/* --- Tipos de factura ---------------------------------------------------- */

.fpcv-admin__tipo {
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
	padding: 1px 8px;
	text-transform: uppercase;
	white-space: nowrap;
}

.fpcv-admin__tipo--licencias { background: var(--fpcv-azul); }
.fpcv-admin__tipo--inscripciones { background: var(--fpcv-morado); }
.fpcv-admin__tipo--abonos { background: var(--fpcv-rojo); }
.fpcv-admin__tipo--administrativas { background: var(--fpcv-medio); }

.fpcv-admin__vacia td {
	color: #646970;
	padding: 18px;
	text-align: center;
}

/* Segunda línea de una celda: aviso al club, error de devolución… */
.fpcv-admin__nota {
	color: #646970;
	display: inline-block;
	font-size: 11px;
	margin-top: 4px;
}

/* --- Alta de factura administrativa -------------------------------------- */

/* Campo que ocupa el ancho del panel, para textos largos. La rejilla de arriba
   reparte en cuatro columnas y unas observaciones no caben en una de ellas. */
.fpcv-admin__campo-ancho {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-top: 12px;
}

.fpcv-admin__campo-ancho span {
	display: block;
	margin-bottom: 3px;
}

.fpcv-admin__campo-ancho textarea {
	width: 100%;
}

.fpcv-admin__conceptos input[type="text"] {
	width: 100%;
}

.fpcv-admin__conceptos input[type="number"] {
	width: 110px;
}

.fpcv-admin__conceptos th:nth-child(2),
.fpcv-admin__conceptos th:nth-child(3),
.fpcv-admin__conceptos th:nth-child(4) {
	width: 150px;
}

.fpcv-admin__conceptos th:nth-child(5) {
	width: 40px;
}

.fpcv-admin__celda-quitar {
	text-align: center;
}

/* Aspa para descartar un concepto. Va apagada y sólo se enciende al apuntarla:
   es una acción destructiva menor y no debe competir con los campos. */
.fpcv-admin__quitar {
	background: none;
	border: none;
	color: #a7aaad;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0 4px;
}

.fpcv-admin__quitar:hover,
.fpcv-admin__quitar:focus {
	color: var(--fpcv-rojo);
}

.fpcv-admin__quitar[hidden] {
	display: none;
}

.fpcv-admin__anadir {
	margin: 12px 0 0;
}

/* El subtotal de cada concepto, en verde: es la cifra que se va comprobando
   mientras se teclea. */
.fpcv-admin__subtotal {
	color: #27ae60;
	font-size: 13px;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.fpcv-admin__pie-factura {
	align-items: center;
	background: #fff;
	border: 1px solid #dcdcde;
	border-left: 4px solid var(--fpcv-verde);
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin: 20px 0;
	padding: 16px 20px;
}

.fpcv-admin__total-factura {
	font-size: 14px;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
}

.fpcv-admin__total-factura span {
	color: #27ae60;
	font-size: 22px;
	margin-left: 10px;
}

/* --- Tarjetas de estadísticas ------------------------------------------- */

.fpcv-admin__tarjetas {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, 1fr);
}

.fpcv-admin__tarjeta {
	background: #f6f7f7;
	border-radius: 6px;
	border-top: 3px solid #2271b1;
	padding: 12px 14px;
}

.fpcv-admin__tarjeta--verde { border-top-color: #27ae60; }
.fpcv-admin__tarjeta--rojo { border-top-color: #e74c3c; }

.fpcv-admin__tarjeta h4 {
	color: #646970;
	font-size: 11px;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.fpcv-admin__cifra {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	text-align: center;
}

.fpcv-admin__detalle {
	color: #646970;
	font-size: 12px;
	margin: 6px 0 0;
	text-align: center;
}

.fpcv-admin__total,
.fpcv-admin__total-fila {
	background: #f0f0f1;
	font-weight: 700;
}

/* --- Modal -------------------------------------------------------------- */

.fpcv-admin__modal {
	align-items: center;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100000;
}

.fpcv-admin__modal[hidden] {
	display: none;
}

.fpcv-admin__modal-caja {
	background: #fff;
	border-radius: 6px;
	max-height: 88vh;
	max-width: 95%;
	overflow-y: auto;
	padding: 20px;
	width: 960px;
}

.fpcv-admin__modal-cabecera {
	align-items: center;
	border-bottom: 1px solid #dcdcde;
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
	padding-bottom: 12px;
}

.fpcv-admin__modal-cabecera h2 {
	margin: 0;
}

.fpcv-admin__modal-resumen {
	background: #f6f7f7;
	border-radius: 4px;
	padding: 8px 12px;
}

@media (max-width: 782px) {
	.fpcv-admin__rejilla,
	.fpcv-admin__tarjetas {
		grid-template-columns: 1fr;
	}
}


/*
 * El panel servido en una página pública se estiliza por completo en
 * fpcv-admin-frontend.css: esa hoja repone los componentes del escritorio que
 * aquí se dan por hechos (.wrap, .button, .notice, .widefat…), fija el ancho del
 * contenedor y blinda el conjunto frente a los estilos del tema. No se pone nada
 * de eso aquí: este fichero se carga también en wp-admin, y además lo hace
 * después, así que cualquier regla suya ganaría a la del front-end y habría que
 * mantener las dos en paralelo.
 */