/*
 * mi-cuenta.css
 * Misma línea minimalista del resto del sitio (tipografía Sora en mayúsculas
 * para etiquetas, mucho espacio, un solo acento de color) aplicada a
 * "Mi Cuenta" y al panel instalador que ya renderiza
 * plugin-saes-electronica-core (clases .saes-panel-*, .saes-tier-*,
 * .saes-credito-*, .saes-tracking-*) más la gráfica de evolución que añade
 * inc/instaladores-visual.php (.saes-evolucion-*). El tema solo aporta
 * estilos: la lógica de esas clases vive en el plugin, no aquí.
 */

.woocommerce-account .site-main { padding-block: var(--espacio-lg) var(--espacio-2xl); }

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--espacio-lg);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--espacio-md);
	border-bottom: 1px solid var(--color-borde);
	padding-bottom: var(--espacio-sm);
}
.woocommerce-MyAccount-navigation li a {
	display: inline-block;
	color: var(--color-texto-suave);
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding-bottom: .4rem;
	border-bottom: 2px solid transparent;
}
.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--color-secundario);
	border-bottom-color: var(--color-acento);
}

.woocommerce-MyAccount-content table.shop_table th { text-align: left; }

/* ─── Panel instalador (contenido generado por el plugin) ─── */
.saes-panel-upgrade {
	text-align: center;
	background: var(--color-fondo-alterno);
	padding: var(--espacio-2xl) var(--espacio-lg);
}
.saes-panel-upgrade h2 { text-transform: uppercase; }

.saes-panel-wrap { display: flex; flex-direction: column; gap: var(--espacio-md); }

.saes-panel-tier { border: 1px solid var(--color-borde); border-top: 3px solid var(--color-primario); }
.saes-tier-header { display: flex; align-items: center; gap: var(--espacio-sm); padding: var(--espacio-md); color: #fff; }
.saes-tier-emoji { font-size: 1.8rem; }
.saes-tier-name { font-family: var(--fuente-titulos); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 1.2rem; margin: 0; color: #fff; }
.saes-tier-disc { margin: 0; opacity: .95; font-size: .9rem; }

.saes-tier-progress { padding: var(--espacio-md); }
.saes-prog-labels { display: flex; justify-content: space-between; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; color: var(--color-texto-suave); }
.saes-prog-bar { height: 6px; background: var(--color-fondo-alterno); overflow: hidden; }
.saes-prog-fill { height: 100%; transition: width .6s ease; }
.saes-prog-hint { margin: .75rem 0 0; font-size: .85rem; color: var(--color-texto-suave); }
.saes-gold-msg { padding: var(--espacio-md); text-align: center; font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; }

.saes-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-borde); border: 1px solid var(--color-borde); }
.saes-stat { background: var(--color-fondo); padding: var(--espacio-md) var(--espacio-sm); text-align: center; }
.saes-stat-label { font-size: .7rem; color: var(--color-texto-suave); margin: 0 0 .4rem; text-transform: uppercase; letter-spacing: .05em; }
.saes-stat-value { font-family: var(--fuente-titulos); font-size: 1.4rem; font-weight: 800; margin: 0; color: var(--color-secundario); }

.saes-credito-card, .saes-tracking-card, .saes-evolucion-card {
	background: var(--color-fondo);
	border: 1px solid var(--color-borde);
	padding: var(--espacio-md);
}
.saes-credito-card h3, .saes-tracking-card h3, .saes-evolucion-card h3 {
	margin-bottom: var(--espacio-sm);
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.saes-credito-aprobado { color: var(--color-exito); font-weight: 700; }
.saes-credito-revision { color: var(--color-aviso); font-weight: 700; }
.saes-credito-hint { font-size: .85rem; color: var(--color-texto-suave); }

.saes-tracking-table { width: 100%; border-collapse: collapse; }
.saes-tracking-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-texto-suave); padding-bottom: .6rem; }
.saes-tracking-table td { padding: .6rem 0; border-top: 1px solid var(--color-borde); font-size: .9rem; }
.saes-status { display: inline-block; padding: .2rem .6rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--color-fondo-alterno); border: 1px solid var(--color-borde); }
.saes-status-completed { background: #e6f6ee; color: var(--color-exito); border-color: transparent; }
.saes-status-processing, .saes-status-empacado { background: #fdf3e3; color: var(--color-aviso); border-color: transparent; }
.saes-status-enviado { background: #e7f4fb; color: var(--color-azul-electrico); border-color: transparent; }
.saes-track-btn { display: inline-block; padding: .3rem .8rem; background: var(--color-secundario); color: #fff; font-size: .75rem; font-weight: 600; }
.saes-no-track, .saes-no-orders { color: var(--color-texto-suave); font-size: .85rem; }

/* Gráfica de evolución (SVG propio, sin librerías) */
.saes-evolucion-svg { width: 100%; height: auto; }
.saes-barra { fill: var(--color-primario); transform-origin: bottom; animation: saes-crecer .6s ease both; }
.saes-barra-label { font-size: 11px; fill: var(--color-texto-suave); font-family: var(--fuente-cuerpo); }
@keyframes saes-crecer { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

@media (min-width: 768px) {
	.saes-panel-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-md); }
	.saes-panel-tier, .saes-evolucion-card { grid-column: 1 / -1; }
}