/* ===========================================================================
   BOTONES
   Relieve real: luz interior arriba, sombra proyectada abajo, y un brillo
   que recorre la superficie al pasar el puntero.
   =========================================================================== */

.btn{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 0 18px;
	height: 42px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	background: var(--superficie-2);
	box-shadow: var(--sombra-interior), var(--sombra-1);
	color: var(--texto);
	font-size: 14px;
	font-weight: 650;
	letter-spacing: -.01em;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	transition: transform var(--transicion), box-shadow var(--transicion),
	            background var(--transicion), border-color var(--transicion);
}

.btn::after{
	content:"";
	position:absolute;
	inset:0;
	background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.14), transparent 70%);
	transform: translateX(-120%);
	transition: transform .6s ease;
	pointer-events:none;
}
.btn:hover::after{ transform: translateX(120%); }

.btn:hover{
	background: var(--superficie-3);
	border-color: var(--linea-fuerte);
	transform: translateY(-1px);
	box-shadow: var(--sombra-interior), var(--sombra-2);
}
.btn:active{ transform: translateY(0); box-shadow: var(--sombra-interior), var(--sombra-1); }

.btn[disabled],.btn.esta-desactivado{
	opacity:.45;
	cursor:not-allowed;
	transform:none;
	box-shadow: var(--sombra-1);
}
.btn[disabled]::after{ display:none; }

/* --- Primario: degradado de marca con halo propio. --- */
.btn--primario{
	border-color: transparent;
	color: var(--texto-sobre-marca);
	background:
		linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 58%),
		linear-gradient(118deg, var(--marca-1), var(--marca-2));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.26), var(--sombra-marca);
}
.btn--primario:hover{
	background:
		linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%),
		linear-gradient(118deg, var(--marca-1), var(--marca-2));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 38px rgba(var(--marca-1-rgb), .44);
}

.btn--fantasma{ background: transparent; box-shadow:none; }
.btn--fantasma:hover{ background: var(--superficie-2); box-shadow: var(--sombra-1); }

.btn--peligro{
	border-color: rgba(var(--peligro-rgb), .34);
	color: var(--peligro);
	background: rgba(var(--peligro-rgb), .10);
}
.btn--peligro:hover{ background: rgba(var(--peligro-rgb), .16); border-color: rgba(var(--peligro-rgb), .5); }

.btn--bloque{ width:100%; }
.btn--alto{ height: 48px; font-size: 15px; padding: 0 22px; }
.btn--bajo{ height: 34px; font-size: 13px; padding: 0 13px; border-radius: var(--radio-xs); }

/* --- Botón de solo icono. --- */
.btn-icono{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	background: var(--superficie);
	box-shadow: var(--sombra-interior), var(--sombra-1);
	color: var(--texto-suave);
	cursor: pointer;
	transition: all var(--transicion);
}
.btn-icono:hover{
	background: var(--superficie-3);
	border-color: var(--linea-fuerte);
	color: var(--texto);
	transform: translateY(-1px);
	box-shadow: var(--sombra-interior), var(--sombra-2);
}

/* --- Grupo segmentado, para filtros de periodo. --- */
.segmentos{
	display: inline-flex;
	padding: 4px;
	gap: 3px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	background: var(--superficie-honda);
	box-shadow: inset 0 2px 6px rgba(0,0,0,.26);
}
.segmentos button,
.segmentos a{
	display: inline-flex;
	align-items: center;
	padding: 0 14px;
	height: 32px;
	border-radius: var(--radio-xs);
	color: var(--texto-tenue);
	font-size: 13px;
	font-weight: 650;
	transition: all var(--transicion);
}
.segmentos button:hover,
.segmentos a:hover{ color: var(--texto); }
.segmentos button[aria-pressed="true"],
.segmentos a[aria-pressed="true"]{
	color: var(--texto);
	background: var(--superficie-3);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 8px rgba(0,0,0,.28);
}