/* ESTILOS DE LA INSCRIPCION DE LA BIZKAINA (fvtm.org/inscripciones) - 16-oct-2026
   Lavado de cara con la misma linea que la intranet vasca y las webs de resultados: tipografia Fredoka en los
   titulos, fondo gris claro, contenido en tarjetas blancas redondeadas, botones rojos redondeados.
   Lo cargan todas las plantillas (primera linea). Las plantillas llevan muchos estilos escritos en cada etiqueta,
   por eso aqui se usa !important. Para volver al aspecto anterior basta con quitar el <link> a este fichero
   (y los botones vuelven a ser imagenes deshaciendo el commit). */

@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Open+Sans:wght@400;600;700&display=swap");

:root {
	--rojo: #d62828;
	--rojo-oscuro: #b71f1f;
	--azul: #0F5394;
	--azul-claro: #e6f0fb;
	--fondo: #eef0f3;
	--borde: #e3e6ea;
	--texto: #2b2f36;
	--gris: #6b7280;
	--verde: #1b6e43;
}

body {
	color: var(--texto);
	font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0 16px 24px;
}
/* Pantallas de gestion: fondo gris claro. Pagina de acceso (body con background="img/fondo1.jpg"): se mantiene
   la foto del pabellon, a pantalla completa (16-oct-2026, a peticion de Edu) */
body:not([background]) { background: var(--fondo) !important; }
body[background] { background-size: cover !important; background-position: center !important; background-attachment: fixed !important; }
table { font-size: inherit; font-family: inherit; color: inherit; }
font[face] { font-family: inherit; }

/* ---------- CABECERA (tabla gris de arriba en todas las pantallas) ---------- */
table[bgcolor="#CCCCCC"] {
	background: transparent !important;
	max-width: 1300px;
	margin: 0 auto;
	padding: 14px 0 6px;
}
table[bgcolor="#CCCCCC"] img[src*="LogoFED"] { width: 64px !important; height: auto; }
table[bgcolor="#CCCCCC"] font[size="4"] {
	font-family: "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif !important;
	font-weight: 600; font-size: 22px; letter-spacing: .5px; word-spacing: .15em; line-height: 1.2; color: #222;
}
table[bgcolor="#CCCCCC"] font[size="5"] {
	font-family: "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif !important;
	font-weight: 600; font-size: 24px; letter-spacing: 1px;
}
/* titulo de la pantalla (DATOS CLUBS / INSCRIPCIONES) en rojo, como INTRANET */
table[bgcolor="#CCCCCC"] td[colspan="5"] font[size="5"] { color: var(--rojo); letter-spacing: 2px; }
/* temporada en azul */
table[bgcolor="#CCCCCC"] td:not([colspan]) > center > font > b > font[size="5"],
table[bgcolor="#CCCCCC"] td:not([colspan]) font[size="5"] { color: var(--azul); }
table[bgcolor="#CCCCCC"] u { text-decoration: none; color: var(--gris); font-size: 11px; letter-spacing: 1px; }
table[bgcolor="#CCCCCC"] img[src*="salir"] { background: none; border: 0; padding: 0; transition: transform .15s; }   /* la puerta sola, sin recuadro */
table[bgcolor="#CCCCCC"] img[src*="salir"]:hover { transform: scale(1.1); }

/* ---------- PESTAÑAS ---------- */
/* Antes: contenidos superpuestos con position:absolute y una altura fija de 3200 px. Ahora cada pestaña ocupa lo que necesita */
.tabs {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 0 !important;
	width: auto !important;
	max-width: 1300px;
	margin: 14px auto 0 !important;
	text-align: left;
}
.tab { display: contents; float: none !important; }
.tab label {
	order: 0;
	background: #fff !important;
	border: 1px solid var(--borde) !important;
	border-radius: 12px !important;
	color: var(--texto) !important;
	padding: 9px 22px !important;
	font: 600 15px "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif !important;
	letter-spacing: .3px;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
	margin: 0 !important;
	top: 0 !important;
}
.tab label:hover { background: #fdecea !important; }
.tab [type="radio"]:checked ~ label { background: var(--rojo) !important; border-color: var(--rojo) !important; color: #fff !important; }
.tab .content {
	order: 1;
	flex: 0 0 100%;
	display: none;
	position: static !important;
	background: #fff !important;
	border: 1px solid var(--borde) !important;
	border-radius: 16px !important;
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
	padding: 18px !important;
	box-sizing: border-box;
	overflow: visible !important;
}
.tab [type="radio"]:checked ~ label ~ .content { display: block; }

/* ---------- TITULOS ---------- */
[style*="font-size:22pt"] {
	font-family: "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif !important;
	font-size: 21px !important;
	font-weight: 600 !important;
	color: var(--azul) !important;
	letter-spacing: .5px;
}
[style*="font-size:22pt"] u { text-decoration: none; }
[style*="font-size:18pt"] { font-family: "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif !important; font-size: 18px !important; }
[style*="font-size:14pt"] { font-family: inherit !important; font-size: 14px !important; }
h1, h2, h3 { font-family: "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif; font-weight: 600; color: var(--azul); }

/* ---------- RECUADROS ---------- */
/* Listados (azul): tarjeta blanca con borde suave */
table[style*="border:2px solid #5E708F"] {
	background: #fff !important;
	border: 1px solid var(--borde) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 6px rgba(0,0,0,.06);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
table[style*="border:2px solid #5E708F"] tr:hover > td { background-color: var(--azul-claro); }
/* Informacion (verde) */
table[style*="border:2px solid #3C763D"] {
	background: #eef8f1 !important;
	border: 1px solid #cfe9d6 !important;
	border-radius: 12px !important;
}
/* Recuadros marrones */
table[style*="border:2px solid #8A6D38"] {
	background: #fff8ec !important;
	border: 1px solid #f0dfc0 !important;
	border-radius: 12px !important;
}
/* Importe total (rojo) */
[style*="background:red"] {
	background: var(--rojo) !important;
	font-family: "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif !important;
	border-radius: 20px !important;
	box-shadow: 0 2px 6px rgba(214,40,40,.25);
}

/* ---------- FORMULARIOS Y BOTONES ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
	font-family: inherit !important;
	font-size: 14px !important;
	border: 1px solid #c9ced6 !important;
	border-radius: 8px !important;
	padding: 5px 8px !important;
	background: #fff !important;
	height: auto !important;
	box-sizing: border-box;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul) !important; box-shadow: 0 0 0 3px rgba(15,83,148,.15); }
.boton, input[type="submit"], input[type="button"], button {
	font-family: "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif !important;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .3px;
	color: #fff !important;
	background: var(--rojo) !important;
	border: 0 !important;
	border-radius: 20px;
	padding: 8px 24px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(214,40,40,.25);
}
.boton:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover { background: var(--rojo-oscuro) !important; }
.boton.gris { background: #8a929e !important; box-shadow: none; }
.boton.gris:hover { background: #6b7280 !important; }

/* ---------- PAGINA DE ACCESO ---------- */
table[style*="border:2px solid #5189BC"] {
	background: #fff !important;
	border: 1px solid var(--borde) !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 20px rgba(0,0,0,.10);
	padding: 6px;
}
td[style*="background-color:#174E81"] { background: var(--azul) !important; border-radius: 10px !important; padding-left: 6px; }
td[style*="background-color:#174E81"] font { font-family: "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif !important; }

/* ---------- PIE ("Desarrollado por com V") ---------- */
body > hr { display: none; }
font[style*="font-size:10pt"] { display: block; text-align: center; color: var(--gris); font-family: inherit !important; font-size: 12px !important; margin-top: 14px; }
font[style*="font-size:10pt"] a { color: var(--gris); }

/* ---------- MARGEN INTERIOR DE LOS RECUADROS (16-oct-2026) ----------
   Las tablas-recuadro no tenian margen por dentro: el contenido (y los botones Guardar/Cancelar) quedaba pegado
   al borde de abajo y a los lados. Mismo margen por los cuatro lados en todos los recuadros. */
table[style*="border:2px solid"] {
	border-collapse: separate !important;
	padding: 14px 18px !important;
	box-sizing: border-box;
}
/* Formularios de modificar club/equipo (recuadro al 80 %): la primera fila es un titulo que ya trae su espacio,
   asi que arriba no se anade margen y abajo algo mas, para que quede igualado */
table[style*="width:80%"][style*="border:2px solid"] { padding: 0 18px 30px !important; }

/* =====================================================================================================
   MOVIL (16-oct-2026). Casi la mitad de los accesos son desde el telefono (registros del servidor, oct-nov 2025
   y oct 2026). Solo afecta a pantallas estrechas; en el ordenador todo queda igual.
   ===================================================================================================== */
@media (max-width: 700px) {
	body { padding: 0 8px 16px; font-size: 14px; }

	/* Cabecera en una rejilla de 3 filas (16-oct-2026):
	     1: logo + nombre de la federacion ............ puerta de salir (siempre a la derecha del todo)
	     2: club / equipo ............................. temporada
	     3: nombre de la pantalla (DATOS CLUBS...) ..... usuario
	     4: selector de torneo (si lo hay), a todo el ancho */
	table[bgcolor="#CCCCCC"] { display: block; width: 100%; padding: 10px 0 0 !important; }
	table[bgcolor="#CCCCCC"] > tbody {
		display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
	}
	table[bgcolor="#CCCCCC"] tr { display: contents; }
	table[bgcolor="#CCCCCC"] td { display: none; width: auto !important; text-align: left; }
	table[bgcolor="#CCCCCC"] td:has(img[src*="LogoFED"]) { display: block; grid-row: 1; grid-column: 1; }
	table[bgcolor="#CCCCCC"] td:has(font[size="4"]) { display: block; grid-row: 1; grid-column: 2; }
	table[bgcolor="#CCCCCC"] td:has(img[src*="salir"]) { display: block; grid-row: 1; grid-column: 3; justify-self: end; }
	table[bgcolor="#CCCCCC"] td[align="center"]:has(> u) { display: block; grid-row: 2; grid-column: 1 / -1; text-align: left; max-width: calc(100% - 150px); }
	table[bgcolor="#CCCCCC"] td:has(font[size="5"]):not([colspan]) { display: block; grid-row: 2; grid-column: 1 / -1; justify-self: end; text-align: right; }
	table[bgcolor="#CCCCCC"] td[colspan="5"] { display: block; grid-row: 3; grid-column: 1 / -1; justify-self: start; }
	table[bgcolor="#CCCCCC"] td:has(font[size="2"]) { display: block; grid-row: 3; grid-column: 1 / -1; justify-self: end; text-align: right; }
	table[bgcolor="#CCCCCC"] td[align="center"]:has(select, form) { display: block; grid-row: 4; grid-column: 1 / -1; }
	table[bgcolor="#CCCCCC"] td center { text-align: inherit; }
	table[bgcolor="#CCCCCC"] td:has(font[size="5"]):not([colspan]) center, table[bgcolor="#CCCCCC"] td:has(font[size="2"]) center { text-align: right; }
	table[bgcolor="#CCCCCC"] td[colspan="5"] center { text-align: left; }
	table[bgcolor="#CCCCCC"] td[align="center"]:has(> u) br { display: none; }
	table[bgcolor="#CCCCCC"] td[align="center"]:has(> u) u { margin-right: 6px; }
	table[bgcolor="#CCCCCC"] td:has(font[size="5"]):not([colspan]) br { display: none; }
	table[bgcolor="#CCCCCC"] td:has(font[size="5"]):not([colspan]) font[size="5"] { margin-left: 6px; }
	table[bgcolor="#CCCCCC"] img[src*="LogoFED"] { width: 40px !important; }
	table[bgcolor="#CCCCCC"] font[size="4"] { font-size: 12px; letter-spacing: 0; word-spacing: 0; line-height: 1.3; }
	table[bgcolor="#CCCCCC"] font[size="5"] { font-size: 18px; }
	table[bgcolor="#CCCCCC"] td[colspan="5"] font[size="5"] { font-size: 17px; }
	table[bgcolor="#CCCCCC"] img[src*="salir"] { width: 34px; }
	table[bgcolor="#CCCCCC"] + br, table[bgcolor="#CCCCCC"] + br + br { display: none; }

	/* Pestanas */
	.tabs { gap: 6px; margin-top: 10px !important; }
	.tab label { padding: 7px 12px !important; font-size: 13px !important; }
	.tab .content { padding: 10px !important; border-radius: 12px !important; min-width: 0; max-width: 100%; }
	.tabs { width: 100% !important; }
	center { display: block; }

	/* Titulos */
	[style*="font-size:22pt"] { font-size: 17px !important; }
	[style*="font-size:18pt"] { font-size: 15px !important; }
	table[style*="height:50px"] td[rowspan] { display: none; }            /* margenes laterales de los titulos */

	/* Recuadros a todo el ancho y con menos margen */
	table[style*="border:2px solid"] { width: 100% !important; padding: 8px 10px !important; height: auto !important; overflow: visible !important; }   /* sin la altura fija del codigo antiguo */
	table[style*="width:80%"][style*="border:2px solid"] { padding: 0 10px 18px !important; }

	/* LISTADOS (equipos, jugadores inscritos y disponibles): cada fila es una ficha */
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr:has(> th) { display: none; }   /* titulos de columna */
	table[style*="width:95%"][style*="border:2px solid"], table[style*="width:95%"][style*="border:2px solid"] > tbody { display: block; }
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr {
		display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
	}
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr[bgcolor] { padding: 8px 6px; border-radius: 8px; margin-bottom: 4px; }
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr > td {
		display: block; height: auto !important; padding: 0 !important; width: auto !important; text-align: left !important; max-width: 100%;
	}
	/* Filas "etiqueta: valor" (datos del club): sin las celdas de relleno, etiqueta en columna fija y el valor al lado */
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr > td:first-child:not(:has(*)) { display: none; }
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr:not([bgcolor]):has(> td:nth-child(2)[style*="#3C763D"]):has(> td:nth-child(4)) > td:nth-child(3) { display: none; }
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr:not([bgcolor]):has(> td:nth-child(2)[style*="#3C763D"]):has(> td:nth-child(4)) > td:nth-child(2) { flex: 0 0 100px; font-size: 12px !important; }
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr:not([bgcolor]):has(> td:nth-child(2)[style*="#3C763D"]):has(> td:nth-child(4)) > td:nth-child(4) { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-size: 13px !important; margin-left: -8px; }
	/* filas de boton (Inscribir, Crear equipo) e importe: un poco de aire */
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr:not([bgcolor]) > td:has(.boton, [style*="background:red"]) { padding: 8px 0 2px !important; }
	/* formulario "Inscribir nuevo equipo": la etiqueta encima del campo */
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr > td:has(input[type="text"], select) { flex: 1 1 100%; }
	table[style*="width:95%"][style*="border:2px solid"] input[type="text"] { width: 100% !important; }
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr[bgcolor] > td:first-child:empty { display: none; }
	/* numero y nombre en la primera linea; el resto debajo; el icono de editar/borrar a la derecha */
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr[bgcolor] > td:nth-child(3) { flex: 1 1 55%; font-weight: 700; }
	table[style*="width:95%"][style*="border:2px solid"] > tbody > tr[bgcolor] > td:last-child:has(img) { margin-left: auto; }
	table[style*="width:95%"][style*="border:2px solid"] input[type="checkbox"] { width: 20px; height: 20px; vertical-align: middle; }

	/* FORMULARIOS de modificar club/equipo: etiqueta encima y campo a todo el ancho */
	table[style*="width:80%"] > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; }
	table[style*="width:80%"] > tbody > tr > td:first-child { display: none; }
	table[style*="width:80%"] > tbody > tr > td:nth-child(3):not(:last-child) { display: none; }
	table[style*="width:80%"] > tbody > tr > td { width: 100% !important; flex: 1 1 100%; padding: 2px 0 !important; }
	table[style*="width:80%"] > tbody > tr > td:nth-child(2):not([colspan]) { font-size: 12px !important; margin-top: 6px; }
	table[style*="width:80%"] input[type="text"], table[style*="width:80%"] select { width: 100% !important; max-width: 100%; }
	table[style*="width:80%"] input[type="text"][size="1"], table[style*="width:80%"] input[type="text"][size="5"] { width: 90px !important; }
	table[style*="width:80%"] input[type="checkbox"] { width: 20px; height: 20px; vertical-align: middle; }
	/* delante de cada campo hay "&nbsp;&nbsp;" que, con el campo a todo el ancho, dejaba una linea en blanco */
	table[style*="width:80%"] > tbody > tr > td:has(> input[type="text"]:not([size="1"]):not([size="5"]), > select) { font-size: 0 !important; }
	table[style*="width:80%"] > tbody > tr > td:has(> input[type="text"]:not([size="1"]):not([size="5"]), > select) > * { font-size: 14px; }
	table[style*="width:80%"] > tbody > tr > td:nth-child(2):not([colspan]) { margin-top: 8px !important; padding-bottom: 0 !important; }

	/* Botones grandes para el dedo */
	.boton, input[type="submit"], input[type="button"] { padding: 10px 22px; font-size: 15px; }

	/* Pagina de acceso */
	table[style*="width:510px"] { width: 100% !important; height: auto !important; }
	table[style*="width:510px"] img[src*="userpass"] { width: 60px; }
}

/* ---------- TORNEOS CERRADOS, SOLO CONSULTA (27-oct-2026) ---------- */
/* Lista de la pantalla "Sin torneos disponibles": tarjeta blanca con un torneo por fila, agrupados por temporada */
.cerrados {
	max-width: 900px; margin: 18px auto 0; padding: 18px 20px; box-sizing: border-box; text-align: left;
	background: #fff; border: 1px solid var(--borde); border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.cerrados h2 { margin: 0 0 4px; font-size: 21px; letter-spacing: .5px; }
.cerrados .nota { margin: 0 0 12px; color: var(--gris); font-size: 13px; }
.cerrados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cerrados li.temporada {
	margin: 8px 0 0; color: var(--gris); font: 600 12px "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif;
	letter-spacing: 1px; text-transform: uppercase;
}
.cerrados li.temporada:first-child { margin-top: 0; }
.cerrados a.torneo {
	display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--borde); border-radius: 12px;
	background: #fafbfc; color: var(--texto); text-decoration: none; transition: background .15s, border-color .15s;
}
.cerrados a.torneo:hover { background: var(--azul-claro); border-color: #c9dcf2; }
.cerrados .nombre { flex: 1; font: 600 15px "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif; letter-spacing: .3px; color: var(--azul); }
.cerrados .fecha { font-size: 12px; color: var(--gris); background: var(--fondo); border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.cerrados .ver { font-size: 13px; font-weight: 600; color: var(--rojo); white-space: nowrap; }
/* Aviso encima de las pestanas al consultar un torneo cerrado */
.aviso-consulta {
	max-width: 1300px; margin: 12px auto 0; padding: 10px 16px; box-sizing: border-box;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
	background: #fdecea; border: 1px solid #f3c4bf; border-radius: 12px; color: #8a1f11;
	font: 600 15px "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif; letter-spacing: .3px; text-align: left;
}
.aviso-consulta a {
	background: var(--rojo); color: #fff !important; text-decoration: none; border-radius: 20px; padding: 6px 16px;
	font: 600 13px "Fredoka", "Trebuchet MS", Helvetica, Arial, sans-serif; white-space: nowrap;
}
.aviso-consulta a:hover { background: var(--rojo-oscuro); }
@media (max-width: 700px) {
	.cerrados { padding: 14px; border-radius: 12px; }
	.cerrados a.torneo { flex-wrap: wrap; gap: 6px 10px; }
	.cerrados .nombre { flex-basis: 100%; }
	.cerrados .ver { margin-left: auto; }
	.aviso-consulta { font-size: 14px; }
}