/* ==========================================================================
   Euskalgym - sistema de diseño compartido (tickets, recuperación, login)
   Usado por: inicio.html, recover/recover.php, recover/recover1.php
   ========================================================================== */

:root{
	--eg-pink:#e0056f;
	--eg-pink-dark:#7a0140;
	--eg-ink:#22101a;
	--eg-bg:#faf7f9;
	--eg-border:#ece2e8;
}

/* ---- Cabecera de sección (banner rosa con título + icono) ---- */
.eg-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	background:linear-gradient(120deg, var(--eg-pink), var(--eg-pink-dark));
	color:#fff;
	border-radius:16px;
	padding:22px 26px;
	margin-bottom:18px;
	flex-wrap:wrap;
}
.eg-top h3{margin:0 0 4px;font-weight:700;color:#fff;}
.eg-top p{margin:0;opacity:.85;font-size:14px;color:#fff;}
.eg-top .eg-icon{font-size:30px;opacity:.85;color:#fff;}

/* ---- Tarjeta blanca genérica ---- */
.eg-card{
	background:#fff;
	border:1px solid var(--eg-border);
	border-radius:16px;
	padding:28px;
}
@media (max-width:600px){
	.eg-card{padding:20px;}
}

/* ---- Pestañas responsivas: en escritorio, una fila; en movil, ocultas
   detras de un boton de menu (patron "hamburguesa"), igual que el navbar
   collapse de Bootstrap del que reutilizamos el plugin ya cargado.
   Los colores llevan !important porque la hoja global (style.css) fuerza
   `a{color:#ef146a !important}` en todos los enlaces, y sin esto la pestaña
   activa quedaba con texto casi del mismo rosa que su propio fondo. ---- */
.eg-tabs{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	list-style:none;
	margin:0;
	padding:6px;
	background:#fff;
	border:1px solid var(--eg-border);
	border-radius:14px;
}
.eg-tabs li{list-style:none;min-width:0;flex:1 1 130px;}
.eg-tabs li a{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	padding:11px 10px;
	border-radius:10px;
	font-weight:500;
	font-size:14px;
	color:var(--eg-ink) !important;
	text-decoration:none;
	border:none;
	background:transparent;
	text-align:center;
}
.eg-tabs li a:hover{background:var(--eg-bg);text-decoration:none;color:var(--eg-ink) !important;}
.eg-tabs li.active a,
.eg-tabs li.active a:hover,
.eg-tabs li.active a:focus{
	background:var(--eg-pink);
	color:#fff !important;
	box-shadow:0 6px 16px rgba(224,5,111,.35);
}

/* Boton hamburguesa: oculto en escritorio, visible solo cuando las pestañas
   se ocultan detras de el (ver breakpoint mas abajo). */
.eg-tabs-toggle{
	display:none;
	width:100%;
	align-items:center;
	gap:10px;
	padding:12px 16px;
	margin-bottom:12px;
	border-radius:12px;
	border:1px solid var(--eg-border);
	background:#fff;
	font-size:14px;
	font-weight:600;
	color:var(--eg-ink);
	cursor:pointer;
}
.eg-tabs-toggle .fa-bars{color:var(--eg-pink);}
.eg-tabs-toggle:focus{outline:2px solid var(--eg-pink);outline-offset:2px;}
.eg-tabs-collapse{margin-bottom:18px;}

@media (max-width:767px){
	.eg-tabs-toggle{display:flex;}
	/* Mismo truco que .navbar-collapse: sin tocar el plugin de Bootstrap,
	   por defecto el menu esta cerrado (.collapse) y se abre con .in. */
	.eg-tabs{flex-direction:column;}
	.eg-tabs li{flex:0 0 auto;}
	.eg-tabs li a{justify-content:flex-start;text-align:left;}
}
@media (min-width:768px){
	.eg-tabs-collapse.collapse{display:block !important;height:auto !important;}
}

/* ---- Botones ---- */
/* Colores con !important: cuando .eg-btn se usa sobre un <a> (no un
   <button>), la hoja global style.css fuerza `a{color:#ef146a !important}`
   y sin esto botones como "Pagar" o "Ver factura" quedaban con texto rosa
   sobre fondo rosa, ilegibles (mismo problema que en .eg-tabs). */
.eg-btn{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:7px 13px;
	border-radius:8px;
	font-size:13px;
	font-weight:500;
	text-decoration:none;
	border:1px solid var(--eg-border);
	color:var(--eg-ink) !important;
	background:#fff;
	cursor:pointer;
}
.eg-btn:hover{background:var(--eg-bg);text-decoration:none;color:var(--eg-ink) !important;}
.eg-btn-primary{background:var(--eg-pink);border-color:var(--eg-pink);color:#fff !important;}
.eg-btn-primary:hover{background:var(--eg-pink-dark);color:#fff !important;}
.eg-btn-danger{color:#b3113f !important;}
.eg-btn-danger:hover{background:#fdeef2;color:#b3113f !important;}
.eg-btn-block{width:100%;justify-content:center;padding:12px 16px;font-size:15px;}

/* ---- Tablas tipo tarjeta ---- */
/* max-height + scroll vertical: listados como "Entradas compradas" pueden
   tener cientos de filas, y sin esto la pagina se alargaba indefinidamente. */
.eg-table-wrap{overflow-x:auto;overflow-y:auto;max-height:480px;-webkit-overflow-scrolling:touch;border-radius:12px;}
.eg-card-table{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	background:#fff;
	border:1px solid var(--eg-border);
	border-radius:12px;
	overflow:hidden;
}
.eg-card-table thead th{
	background:var(--eg-bg);
	color:var(--eg-ink);
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.5px;
	font-weight:700;
	padding:12px 14px;
	border-bottom:1px solid var(--eg-border);
	text-align:left;
}
.eg-card-table td{
	padding:12px 14px;
	border-bottom:1px solid var(--eg-border);
	font-size:14px;
	vertical-align:middle;
}
.eg-card-table tr:last-child td{border-bottom:none;}
.eg-card-table tbody tr:hover{background:var(--eg-bg);}

/* ---- Insignias de estado ---- */
.eg-badge{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:4px 10px;
	border-radius:20px;
	font-size:12px;
	font-weight:600;
}
.eg-badge-process{background:#fff3cd;color:#8a6300;}
.eg-badge-done{background:#e6f4ea;color:#1e7e34;}
.eg-badge-info{background:#eef1fb;color:#2b4bbf;}

/* ---- Alertas de página (bloques de aviso destacados, ej. pago rechazado) ---- */
.eg-alert{
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:16px 18px;
	border-radius:12px;
	margin-bottom:18px;
	font-size:14px;
	line-height:1.5;
}
.eg-alert i{font-size:20px;flex-shrink:0;margin-top:1px;}
.eg-alert strong{display:block;margin-bottom:2px;}
.eg-alert-danger{background:#fdeef2;color:#b3113f;border:1px solid #f7c9d7;}

/* ---- Estado vacío ---- */
.eg-empty{
	text-align:center;
	padding:36px 20px;
	color:#8a8a8a;
	background:var(--eg-bg);
	border-radius:12px;
	border:1px dashed var(--eg-border);
}
.eg-empty i{font-size:28px;display:block;margin-bottom:10px;opacity:.6;}

/* ---- Buscador dentro de una pestaña (filtra filas de tabla en cliente) ---- */
.eg-search{position:relative;margin-bottom:14px;}
.eg-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#b9a9b2;font-size:14px;pointer-events:none;}
.eg-search input{padding-left:36px;}

/* ---- Formularios ---- */
.eg-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.eg-form-grid .eg-field{display:flex;flex-direction:column;gap:6px;}
.eg-form-grid .eg-field label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#8a8a8a;}
.eg-form-grid .eg-field.readonly .eg-static{
	padding:9px 12px;background:var(--eg-bg);border-radius:8px;font-size:14px;color:var(--eg-ink);border:1px solid var(--eg-border);
}
@media (max-width:600px){
	.eg-form-grid{grid-template-columns:1fr;}
}

.eg-input, .eg-form-grid .form-control, .form-control{
	border-radius:8px;
	box-shadow:none;
	border:1px solid var(--eg-border);
}
.form-control:focus{
	border-color:var(--eg-pink);
	box-shadow:0 0 0 3px rgba(224,5,111,.15);
}
.eg-label{font-size:13px;font-weight:600;color:var(--eg-ink);margin-bottom:6px;display:block;}

/* ---- Footer legal / cookies (icono, en la home y en los accesos) ---- */
.eg-footer{
	margin-top:32px;
	padding:22px 26px;
	border-top:1px solid var(--eg-border);
	color:#8a8a8a;
	font-size:13px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}
.eg-footer a{color:var(--eg-pink-dark);text-decoration:none;font-weight:500;}
.eg-footer a:hover{text-decoration:underline;}
.eg-footer .eg-footer-links{display:flex;flex-wrap:wrap;gap:16px;}
.eg-footer.eg-footer-dark{
	border-top:1px solid rgba(255,255,255,.15);
	color:rgba(255,255,255,.7);
}
.eg-footer.eg-footer-dark a{color:#fff;}

/* Icono X (antes Twitter) inline, hereda el color del enlace que lo envuelve */
.eg-icon-x{width:1em;height:1em;vertical-align:-0.125em;fill:currentColor;display:inline-block;}

/* ---- Modales (Bootstrap 3), mismo aspecto en toda la web ---- */
.modal-content{
	border:none;
	border-radius:16px;
	overflow:hidden;
}
.modal-header{
	background:linear-gradient(120deg, var(--eg-pink), var(--eg-pink-dark));
	border-bottom:none;
	padding:20px 24px;
}
.modal-header .modal-title{color:#fff;font-weight:700;}
.modal-header .close{color:#fff;opacity:.85;text-shadow:none;}
.modal-header .close:hover{opacity:1;color:#fff;}
.modal-body{padding:24px;color:#333;}
.modal-body h4{color:var(--eg-pink-dark);font-weight:700;margin-top:24px;}
.modal-body h4:first-child{margin-top:0;}
.modal-body ul{padding-left:20px;margin-bottom:16px;}
.modal-body li{margin-bottom:10px;line-height:1.55;font-size:14px;}
.modal-footer{border-top:1px solid #eee;}
.btn-primary{background:var(--eg-pink);border-color:var(--eg-pink);}
.btn-primary:hover, .btn-primary:focus{background:var(--eg-pink-dark);border-color:var(--eg-pink-dark);}