/* =========================================================
   Account Studio — estilos frontend (minimalista e integrado)
   Scope: body.as-active (Mi Cuenta / Login de WooCommerce)
   ========================================================= */

body.as-active .woocommerce {
	font-family: var(--as-font);
	color: var(--as-text);
}

body.woocommerce-account.as-active .woocommerce {
	max-width: 1080px;
	margin-inline: auto;
}

/* Ocultar el título por defecto del tema en las páginas de cuenta:
   lo sustituimos por uno propio, centrado y compacto. */
body.woocommerce-account.as-active .entry-header,
body.woocommerce-account.as-active .entry-title,
body.woocommerce-account.as-active .page-title,
body.woocommerce-account.as-active .ast-archive-description {
	display: none !important;
}

/* Neutralizar el layout por defecto de WooCommerce (float + width 30%/68%). */
body.as-active .woocommerce-MyAccount-navigation,
body.as-active .woocommerce-MyAccount-content,
body.as-active .as-nav,
body.as-active .as-content {
	width: 100%;
	float: none;
	margin: 0;
}

/* =========================================================
   1. PANEL — layout general
   ========================================================= */
.as-account {
	display: grid;
	gap: clamp(18px, 2.4vw, 30px) clamp(24px, 3vw, 44px);
	color: var(--as-text);
	padding-bottom: clamp(32px, 6vw, 64px);
}

.as-mode-sidebar .as-account {
	grid-template-columns: 240px 1fr;
	align-items: start;
}

/* .as-col-content agrupa título + contenido en una sola celda de grid,
   apilados en flujo normal — así su altura no depende de la de la barra
   lateral (si fueran dos celdas separadas compartiendo filas "auto" con
   el nav, el sobrante de altura del nav se repartía entre ambas filas y
   dejaba un hueco enorme entre el título y el contenido). */
.as-col-content { min-width: 0; }

/* Estilo PC Componentes: sin avatar/saludo/estadísticas — el nombre ya está
   en la cabecera del tema. Título de sección compacto y a la izquierda,
   a la misma altura que el arranque de la barra lateral. */
.as-mode-sidebar .as-avatar,
.as-mode-sidebar .as-userline,
.as-mode-sidebar .as-summary {
	display: none;
}
.as-mode-sidebar .as-head {
	text-align: left;
	align-items: flex-start;
	padding: 0 0 14px;
}
.as-mode-sidebar .as-title {
	font-size: 1.45rem;
}

.as-mode-tabs .as-account,
.as-mode-cards .as-account,
.as-mode-minimal .as-account {
	grid-template-columns: 1fr;
}

/* Contenido plano, integrado con la página (sin caja) */
.as-content {
	min-width: 0;
	padding: 4px 0 0;
}
.as-mode-sidebar .as-nav {
	padding-right: clamp(20px, 2.4vw, 40px);
	border-right: 1px solid var(--as-border);
}

/* =========================================================
   2. CABECERA (título + usuario), centrada y compacta
   ========================================================= */
.as-head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	padding: 4px 0 18px;
}

.as-head .as-avatar img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: block;
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--as-primary-soft);
}

.as-title {
	margin: 2px 0 0;
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--as-text);
}

.as-userline {
	margin: 0;
	font-size: 13.5px;
	color: var(--as-muted);
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
.as-userline__hi { color: var(--as-text); font-weight: 600; }
.as-userline__hi + .as-userline__mail::before { content: "·"; margin-right: 6px; color: var(--as-border); }

.as-darktoggle {
	position: absolute;
	top: 0;
	right: 0;
	border: 1px solid var(--as-border);
	background: var(--as-surface);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}
.as-darktoggle__moon { display: none; }
html.as-dark .as-darktoggle__moon { display: inline; }
html.as-dark .as-darktoggle__sun { display: none; }

/* =========================================================
   3. RESUMEN RÁPIDO (stats planos, centrados)
   ========================================================= */
.as-summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 160px));
	justify-content: center;
	gap: 0;
	margin-bottom: 6px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--as-border);
}
.as-summary__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 2px 22px;
	text-decoration: none;
	color: var(--as-text);
	border-right: 1px solid var(--as-border);
	transition: color .18s ease;
}
.as-summary__item:last-child { border-right: 0; }
.as-summary__item:hover .as-summary__num { color: var(--as-primary); }
.as-summary__num {
	font-size: 22px;
	font-weight: 800;
	color: var(--as-primary);
	line-height: 1;
	transition: color .18s ease;
}
.as-summary__num--icon .as-ico { width: 22px; height: 22px; }
.as-summary__label {
	font-size: 11.5px;
	color: var(--as-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* =========================================================
   4. NAVEGACIÓN (lista limpia, sin caja)
   ========================================================= */
.as-nav { padding: 0; }
.as-mode-sidebar .as-nav { position: sticky; top: 24px; }

/* ".as-nav .as-nav__list" (2 clases) a propósito: WordPress trae
   ".entry-content ul { padding-left: 20px; ... }" que con 1 clase + 1
   elemento le ganaba a un selector de una sola clase y dejaba el "Salir"
   descentrado (20px de más a la izquierda). */
.as-nav .as-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.as-mode-tabs .as-nav__list,
.as-mode-cards .as-nav__list,
.as-mode-minimal .as-nav__list {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	border-bottom: 1px solid var(--as-border);
	padding-bottom: 14px;
}

/* Anular bordes/fondos que algunos temas (Astra) ponen a los <li> del menú */
body.as-active .woocommerce-MyAccount-navigation ul,
body.as-active .woocommerce-MyAccount-navigation li,
.as-nav .woocommerce-MyAccount-navigation-link {
	border: 0;
	background: transparent;
	list-style: none;
}
.as-nav .woocommerce-MyAccount-navigation-link { margin: 0; padding: 0; }

/* Especificidad ".as-nav .as-nav__link" a propósito: el CSS inline de
   WooCommerce ("body .woocommerce-MyAccount-navigation-link a") tiene más
   peso que una sola clase y pisaba display/padding — con dos clases ganamos
   siempre sin necesidad de !important. */
.as-nav .as-nav__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--as-radius-sm);
	color: var(--as-muted);
	text-decoration: none;
	font-weight: 500;
	font-size: 14.5px;
	line-height: 1.2;
	transition: background .16s ease, color .16s ease;
	white-space: nowrap;
}
.as-nav .as-nav__link:hover { background: var(--as-primary-soft); color: var(--as-text); }

.woocommerce-MyAccount-navigation-link.is-active .as-nav__link,
.woocommerce-MyAccount-navigation-link.is-active > a {
	background: var(--as-primary-soft);
	color: var(--as-primary);
	font-weight: 600;
}
.woocommerce-MyAccount-navigation-link--customer-logout .as-nav__link {
	color: #ef4444;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-sm);
	font-weight: 600;
}
.woocommerce-MyAccount-navigation-link--customer-logout .as-nav__link:hover {
	background: rgba(239,68,68,.08);
	border-color: #ef4444;
}
.woocommerce-MyAccount-navigation-link--customer-logout .as-nav__icon { color: #ef4444; }

.as-nav__icon { display: inline-flex; flex: 0 0 auto; }
.as-ico { width: 19px; height: 19px; display: block; }

.as-nav__toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
	padding: 12px 14px;
	background: var(--as-surface);
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-sm);
	color: var(--as-text);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

.as-nav__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	flex: 0 0 auto;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}
.as-nav__close .as-ico { width: 15px; height: 15px; flex: 0 0 auto; }

.as-nav__overlay {
	display: none;
}

/* Cabecera del panel lateral (drawer): título + "Conectado como", estilo
   oscuro a juego con la marca — inspirado en el menú de cuenta que ya
   existe en la cabecera del tema. Solo se muestra en móvil (ver 9. RESPONSIVE). */
.as-nav__drawerhead {
	display: none;
}
.as-nav__drawerhead-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.as-nav__drawertitle {
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #fff;
}
.as-nav__drawerwho {
	margin-top: 16px;
	font-size: 13px;
}
.as-nav__drawerwho-label {
	display: block;
	margin-bottom: 3px;
	color: rgba(255, 255, 255, .6);
}
.as-nav__drawerwho strong {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	color: #fff;
}

/* =========================================================
   5. DASHBOARD (tarjetas planas)
   ========================================================= */
.as-dashboard__intro {
	color: var(--as-muted);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0 0 20px;
}
.as-dashboard__intro a { color: var(--as-primary); text-decoration: none; font-weight: 600; }

.as-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}
.as-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	background: var(--as-surface);
	text-decoration: none;
	color: var(--as-text);
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.as-card:hover {
	border-color: var(--as-primary);
	background: var(--as-primary-soft);
	transform: translateY(-2px);
}
.as-card__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--as-primary-soft);
	color: var(--as-primary);
}
.as-card__icon .as-ico { width: 22px; height: 22px; }
.as-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-card__title { font-weight: 700; font-size: 14.5px; }
.as-card__desc { font-size: 12.5px; color: var(--as-muted); line-height: 1.4; }
.as-card__arrow { margin-left: auto; color: var(--as-muted); font-size: 17px; transition: transform .18s ease, color .18s ease; }
.as-card:hover .as-card__arrow { transform: translateX(4px); color: var(--as-primary); }

/* =========================================================
   6. CONTENIDO WOO (tablas, direcciones, mensajes) — minimalista
   ========================================================= */
body.as-active .woocommerce-MyAccount-content h2,
body.as-active .woocommerce-MyAccount-content h3 {
	color: var(--as-text);
	margin-top: 0;
	font-size: 1.05rem;
	font-weight: 700;
}

/* Tablas sin marco pesado: solo divisores de fila */
body.as-active .woocommerce table.shop_table,
body.as-active .woocommerce-orders-table {
	border: 0;
	border-collapse: collapse;
	background: transparent;
}
body.as-active .woocommerce table.shop_table thead th {
	background: transparent;
	color: var(--as-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 1px solid var(--as-border);
	padding: 10px 12px;
}
body.as-active .woocommerce table.shop_table td {
	padding: 14px 12px;
	border-top: 1px solid var(--as-border);
	background: transparent;
}
body.as-active .woocommerce table.shop_table tfoot th,
body.as-active .woocommerce table.shop_table tfoot td { border-top: 1px solid var(--as-border); }

/* Direcciones: tarjeta sutil, título pequeño */
body.as-active .woocommerce-Addresses { gap: 16px; }
body.as-active .woocommerce-Address {
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	padding: 20px;
	background: var(--as-surface);
}
body.as-active .woocommerce-Address-title { align-items: center; margin-bottom: 10px; }
body.as-active .woocommerce-Address-title h2,
body.as-active .woocommerce-Address-title h3 {
	font-size: 1rem !important;
	font-weight: 700;
	margin: 0;
}
body.as-active .woocommerce-Address address { color: var(--as-muted); font-style: normal; line-height: 1.7; }

/* Botones */
body.as-active .woocommerce .button,
body.as-active .woocommerce a.button,
body.as-active .woocommerce button.button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--as-primary);
	color: var(--as-primary-contrast);
	border-radius: var(--as-radius-sm);
	border: 0;
	font-weight: 600;
	padding: 11px 18px;
	box-shadow: none;
	transition: filter .18s ease, transform .12s ease;
}
body.as-active .woocommerce .button svg { width: 18px; height: 18px; flex: 0 0 auto; }
body.as-active .woocommerce .button:hover { filter: brightness(1.06); transform: translateY(-1px); }
body.as-active .woocommerce .button.alt,
body.as-active .woocommerce .woocommerce-Button--view,
body.as-active .woocommerce .button.view {
	background: var(--as-primary-soft);
	color: var(--as-primary);
}

/* Inputs */
body.as-active .woocommerce form .form-row label { color: var(--as-text); font-weight: 600; font-size: 14px; }
body.as-active .woocommerce .input-text,
body.as-active .woocommerce select,
body.as-active .woocommerce textarea {
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-sm);
	padding: 12px 14px;
	background: var(--as-surface);
	color: var(--as-text);
	transition: border-color .18s ease, box-shadow .18s ease;
}
body.as-active .woocommerce .input-text:focus,
body.as-active .woocommerce select:focus,
body.as-active .woocommerce textarea:focus {
	border-color: var(--as-primary);
	box-shadow: 0 0 0 3px var(--as-primary-soft);
	outline: none;
}

/* Mensajes / avisos Woo minimalistas */
body.as-active .woocommerce-message,
body.as-active .woocommerce-error,
body.as-active .woocommerce-info,
body.as-active .woocommerce-notice {
	border-radius: var(--as-radius-sm);
	border: 1px solid var(--as-border);
	border-left: 3px solid var(--as-primary);
	background: var(--as-primary-soft);
	box-shadow: none;
	color: var(--as-text);
}
body.as-active .woocommerce-error {
	border-left-color: #ef4444;
	background: rgba(239,68,68,.06);
}

/* =========================================================
   6b. NAVEGACIÓN AGRUPADA (estilo PC Componentes)
   ========================================================= */
.as-nav--grouped .as-nav__body { display: flex; flex-direction: column; gap: 20px; }
.as-nav__grouptitle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--as-muted);
	padding: 0 12px 8px;
}
.as-nav__groupicon { display: inline-flex; }
.as-nav__groupicon .as-ico { width: 16px; height: 16px; }
/* ".as-nav .as-nav__list--logout" (2 clases) a propósito: WordPress trae
   ".entry-content ul { margin-top: revert; padding-top: revert; }" que con
   1 clase + 1 elemento le ganaba a un selector de 1 sola clase. */
.as-nav .as-nav__list--logout { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--as-border); }

/* Sub-enlaces agrupados en escritorio: sin icono propio, solo texto
   indentado (estilo PC Componentes) — en el panel de móvil sí se muestran
   (ver 9. RESPONSIVE), a petición del usuario. */
.as-nav--grouped .as-nav__list:not(.as-nav__list--logout) .as-nav__link { padding: 8px 12px 8px 24px; gap: 0; }
.as-nav--grouped .as-nav__list:not(.as-nav__list--logout) .as-nav__icon { display: none; }
.as-nav--grouped .as-nav__list--logout .as-nav__link { gap: 12px; }

/* =========================================================
   6c. PEDIDOS COMO TARJETAS
   ========================================================= */
.as-orders { display: flex; flex-direction: column; gap: 16px; }

.as-orders__filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin-bottom: 2px; }
.as-orders__search { position: relative; flex: 1 1 240px; display: flex; align-items: center; }
.as-orders__search .as-ico { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--as-muted); pointer-events: none; z-index: 1; }
.as-orders__search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px 11px 42px !important;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-sm);
	background: var(--as-surface);
	color: var(--as-text);
	font-size: 14px;
	margin: 0;
}
.as-orders__search-input:focus,
.as-orders__status:focus { outline: none; border-color: var(--as-primary); box-shadow: 0 0 0 3px var(--as-primary-soft); }
.as-orders__status {
	flex: 0 0 auto;
	width: auto;
	max-width: 220px;
	padding: 11px 12px;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-sm);
	background: var(--as-surface);
	color: var(--as-text);
	font-size: 14px;
	margin: 0;
}

.as-order {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 22px;
	align-items: center;
	padding: 20px 22px;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	background: var(--as-surface);
	transition: box-shadow .18s ease, border-color .18s ease;
}
.as-order:hover { box-shadow: var(--as-shadow); border-color: color-mix(in srgb, var(--as-primary) 40%, var(--as-border)); }

.as-order__badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--as-text); }
.as-order__badge svg { width: 20px; height: 20px; color: var(--as-muted); flex: 0 0 auto; }
.as-order__badge--completed svg { color: #16a34a; }
.as-order__badge--cancelled svg, .as-order__badge--failed svg { color: #ef4444; }
.as-order__badge--processing svg, .as-order__badge--on-hold svg, .as-order__badge--pending svg { color: #f59e0b; }

.as-order__date { color: var(--as-text); font-size: 14px; margin: 7px 0 10px; }
.as-order__meta { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--as-muted); }
.as-order__meta strong { color: var(--as-text); font-weight: 700; }

.as-order__thumbs { display: flex; gap: 8px; }
.as-order__thumb {
	width: 58px;
	height: 58px;
	border-radius: 10px;
	border: 1px solid var(--as-border);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	flex: 0 0 auto;
}
.as-order__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.as-order__thumb--more { font-weight: 700; color: var(--as-muted); background: var(--as-bg); font-size: 14px; }

.as-order__view { width: auto; white-space: nowrap; gap: 8px; padding: 12px 18px; }
.as-order__view .as-ico { width: 18px; height: 18px; }

.as-btn--ghost { width: auto; background: var(--as-surface); border: 1px solid var(--as-border); color: var(--as-text); gap: 6px; padding: 11px 16px; }
.as-btn--ghost:hover { border-color: var(--as-primary); color: var(--as-primary); filter: none; transform: none; }
.as-btn--ghost .as-ico { width: 16px; height: 16px; }
.as-orders__pagination { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.as-orders__empty { text-align: center; color: var(--as-muted); padding: 28px; }

@media (max-width: 720px) {
	.as-order { grid-template-columns: 1fr; gap: 14px; }
	.as-order__thumbs { order: 3; }
	.as-order__view { width: 100%; }
}

/* =========================================================
   7. LOGIN / REGISTRO — integrado (sin caja flotante)
   ========================================================= */
.as-login {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	max-width: 940px;
	margin: 8px auto 24px;
	background: var(--as-surface);
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	box-shadow: 0 1px 3px rgba(2,6,23,.05);
	overflow: hidden;
	min-height: 520px;
}
.as-login-centered .as-login,
.as-login-card .as-login {
	grid-template-columns: 1fr;
	max-width: 440px;
}
.as-login-centered .as-login__brand,
.as-login-card .as-login__brand { display: none; }

.as-login__brand {
	position: relative;
	background: linear-gradient(160deg, #0b0e14 0%, #131a17 45%, var(--as-primary) 130%);
	background-size: cover;
	background-position: center;
	color: #fff;
	display: flex;
	align-items: flex-end;
}
.as-login__brand-overlay {
	position: relative;
	z-index: 1;
	padding: 40px;
	background: linear-gradient(to top, rgba(2,6,23,.5), rgba(2,6,23,0) 60%);
	width: 100%;
}
.as-login__logo { margin-bottom: auto; }
.as-login__logo img { max-width: 150px; height: auto; filter: brightness(0) invert(1); }
.as-login__logo--text { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.as-login__tagline { font-size: 27px; line-height: 1.15; margin: 0 0 8px; font-weight: 800; }
.as-login__subtitle { font-size: 15px; opacity: .9; margin: 0; max-width: 32ch; }

.as-login__panel {
	padding: clamp(28px, 3.6vw, 44px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Tabs */
.as-tabs {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--as-bg);
	border: 1px solid var(--as-border);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 26px;
}
.as-tab {
	position: relative;
	z-index: 1;
	border: 0;
	background: transparent;
	padding: 10px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	color: var(--as-muted);
	cursor: pointer;
	transition: color .2s ease;
}
.as-tab.is-active { color: var(--as-primary); }
.as-tabs__slider {
	position: absolute;
	z-index: 0;
	top: 4px;
	left: 4px;
	width: calc(50% - 4px);
	height: calc(100% - 8px);
	background: var(--as-surface);
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(2,6,23,.12);
	transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.as-tabs__slider.is-right { transform: translateX(100%); }

.as-pane { display: none; animation: as-fade .3s ease; }
.as-pane.is-active { display: block; }
@keyframes as-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.as-pane__head { margin-bottom: 22px; text-align: center; }
.as-pane__head h1 { font-size: 22px; font-weight: 800; margin: 0 0 5px; color: var(--as-text); }
.as-pane__head p { margin: 0; color: var(--as-muted); font-size: 14px; }

/* Campos con label flotante (estilo "outlined": el label se apoya en el borde) */
.as-form .as-field { position: relative; margin: 0 0 18px; }
.as-form .as-field .input-text {
	width: 100%;
	box-sizing: border-box;
	height: 52px;
	padding: 14px;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-sm);
	background: var(--as-surface);
	color: var(--as-text);
	font-size: 15px;
	line-height: 1.2;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.as-form .as-field--password .input-text { padding-right: 44px; }
.as-form .as-field .input-text:focus {
	border-color: var(--as-primary);
	box-shadow: 0 0 0 3px var(--as-primary-soft);
	outline: none;
}
/* Neutralizar el fondo amarillo del autocompletar de Chrome/Edge */
.as-form .as-field .input-text:-webkit-autofill,
.as-form .as-field .input-text:-webkit-autofill:hover,
.as-form .as-field .input-text:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--as-surface) inset;
	-webkit-text-fill-color: var(--as-text);
	caret-color: var(--as-text);
	transition: background-color 5000s ease-in-out 0s;
}
.as-form .as-field label {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	transform-origin: left center;
	padding: 0 6px;
	background: var(--as-surface);
	color: var(--as-muted);
	font-size: 15px;
	pointer-events: none;
	white-space: nowrap;
	transition: top .16s ease, transform .16s ease, color .16s ease;
}
.as-form .as-field .input-text:focus + label,
.as-form .as-field .input-text:not(:placeholder-shown) + label {
	top: 0;
	transform: translateY(-50%) scale(.84);
	color: var(--as-primary);
	font-weight: 600;
}
.as-form .as-field .required { color: var(--as-accent); border: 0; }

.as-eye {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	z-index: 2;
	border: 0;
	background: transparent;
	cursor: pointer;
	opacity: .55;
}
.as-eye::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: auto;
	background: currentColor;
	color: var(--as-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.as-eye:hover { opacity: 1; }
.as-eye.is-on::before { color: var(--as-primary); }

.as-meter { display: block; height: 5px; border-radius: 999px; background: var(--as-border); margin-top: 8px; overflow: hidden; }
.as-meter i { display: block; height: 100%; width: 0; border-radius: 999px; background: #ef4444; transition: width .25s ease, background .25s ease; }
.as-meter[data-level="1"] i { width: 25%; background: #ef4444; }
.as-meter[data-level="2"] i { width: 50%; background: #f59e0b; }
.as-meter[data-level="3"] i { width: 75%; background: #3b82f6; }
.as-meter[data-level="4"] i { width: 100%; background: #22c55e; }

.as-form__row-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 20px;
	flex-wrap: wrap;
}
.as-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--as-muted); cursor: pointer; }
.as-check input { width: 16px; height: 16px; accent-color: var(--as-primary); }
.as-link { color: var(--as-primary); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.as-link:hover { text-decoration: underline; }
.as-note { color: var(--as-muted); font-size: 14px; background: var(--as-bg); padding: 12px 14px; border-radius: var(--as-radius-sm); }

.as-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 18px;
	border: 0;
	border-radius: var(--as-radius-sm);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: filter .18s ease, transform .12s ease;
}
.as-btn--primary { background: var(--as-primary); color: var(--as-primary-contrast); }
.as-btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* =========================================================
   7b. LOGIN A PANTALLA COMPLETA (sin cabecera/pie del tema)
   ========================================================= */
body.as-fullpage {
	margin: 0;
	background: var(--as-surface);
	color: var(--as-text);
	font-family: var(--as-font);
}

.as-fp {
	max-width: 1000px;
	margin: 0 auto;
	min-height: 100vh;
	padding: 40px 24px 48px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.as-fp__logo {
	align-self: center;
	display: inline-flex;
	align-items: center;
	margin: 6px 0 44px;
}
.as-fp__logo img { max-height: 46px; width: auto; display: block; }
.as-fp__logo--badge {
	background: #0b0e14;
	padding: 14px 26px;
	border-radius: 16px;
}
.as-fp__logo--badge img { max-height: 40px; }
.as-fp__logotext { font-size: 24px; font-weight: 800; color: var(--as-text); letter-spacing: -.01em; }

.as-fp__grid {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
	max-width: 880px;
	width: 100%;
	margin: 0 auto;
}
.as-fp__divider { background: var(--as-border); width: 1px; align-self: stretch; }

.as-fp__benefits { display: flex; flex-direction: column; gap: 30px; }
.as-benefit { display: flex; gap: 16px; align-items: flex-start; }
.as-benefit__ico { flex: 0 0 auto; color: var(--as-primary); }
.as-benefit__svg { width: 34px; height: 34px; display: block; }
.as-benefit__body { display: flex; flex-direction: column; gap: 4px; }
.as-benefit__title { font-weight: 700; font-size: 16px; color: var(--as-text); }
.as-benefit__text { font-size: 14px; color: var(--as-muted); line-height: 1.5; }

.as-fp__card { width: 100%; max-width: 380px; justify-self: center; }
.as-fullpage .as-pane__head { text-align: left; }
.as-fullpage .as-pane__head h1 { font-size: 25px; }

.as-fp__back { text-align: center; margin: 36px 0 0; }
.as-fp__back a { color: var(--as-muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.as-fp__back a:hover { color: var(--as-primary); }

@media (max-width: 780px) {
	.as-fp__grid { grid-template-columns: 1fr; gap: 32px; max-width: 400px; }
	.as-fp__divider { display: none; }
	.as-fp__benefits { order: 2; }
	.as-fp__card { order: 1; max-width: 100%; }
	.as-fullpage .as-pane__head { text-align: center; }
}

/* =========================================================
   8. PRESETS DE ESTILO
   ========================================================= */
.as-style-glass .as-card,
.as-style-glass .as-login__panel {
	background: color-mix(in srgb, var(--as-surface) 78%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.as-style-corporate .as-card,
.as-style-corporate .as-login { border-radius: 6px; }

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
	body.woocommerce-account.as-active .woocommerce { padding-inline: 16px; }

	.as-mode-sidebar .as-account { grid-template-columns: 1fr; }
	.as-mode-sidebar .as-nav { padding-right: 0; border-right: 0; }
	.as-login { grid-template-columns: 1fr; max-width: 440px; }
	.as-login__brand { min-height: 170px; }
	.as-login__tagline { font-size: 23px; }

	/* Panel lateral (drawer): el botón "Menú" abre la navegación como una
	   capa fija sobre el contenido, en vez de empujarlo hacia abajo. Así el
	   título y el contenido de la sección quedan pegados a la cabecera. */
	.as-nav__toggle { display: flex; margin-top: 14px; }
	.as-nav__close { display: flex; }
	.as-nav__drawerhead { display: block; }

	.as-nav__list { display: flex; flex-direction: column; }

	/* En el panel de móvil, a diferencia del sidebar de escritorio, los
	   enlaces SÍ llevan icono (a petición del usuario) y el título del
	   grupo va sin icono, solo texto. */
	.as-nav--grouped .as-nav__list:not(.as-nav__list--logout) .as-nav__link {
		padding: 10px 12px;
		gap: 12px;
	}
	.as-nav--grouped .as-nav__list:not(.as-nav__list--logout) .as-nav__icon {
		display: inline-flex;
	}
	.as-nav__groupicon { display: none; }

	/* Misma especificidad que la regla general "body.as-active .as-nav {
	   width:100% }" (sección 1, reset de layout) para poder ganarle: si no,
	   el ancho del panel se queda al 100% en vez de los 340px del drawer. */
	body.as-active .as-nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100001;
		width: min(84vw, 340px);
		height: 100vh;
		height: 100dvh;
		margin: 0;
		padding: 0 0 20px;
		background: var(--as-surface);
		box-shadow: 0 0 40px rgba(0, 0, 0, .25);
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		transform: translateX(-100%);
		transition: transform .28s ease;
	}
	body.as-active .as-nav.is-open { transform: translateX(0); }

	.as-nav__drawerhead {
		padding: 20px;
		margin-bottom: 16px;
		background: #0b0e14;
	}

	/* El body ocupa el resto del alto del drawer, y "Salir" (única lista
	   fuera de los grupos) se ancla al fondo como un botón fijo. */
	.as-nav__body { padding: 0 20px; flex: 1 1 auto; }
	.as-nav .as-nav__list--logout { margin-top: auto; padding-top: 20px; }

	.as-nav__overlay {
		display: block;
		position: fixed;
		inset: 0;
		/* La cabecera del tema (.cc-header) usa z-index:9999, así que el
		   panel y su overlay tienen que ir por encima de eso o quedan
		   tapados debajo. */
		z-index: 100000;
		background: rgba(10, 11, 14, .45);
		opacity: 0;
		pointer-events: none;
		transition: opacity .28s ease;
	}
	.as-nav__overlay.is-open { opacity: 1; pointer-events: auto; }

	body.as-nav-open { overflow: hidden; }
}

@media (max-width: 480px) {
	.as-summary { grid-template-columns: 1fr 1fr; gap: 12px 0; }
	.as-login__panel { padding: 24px; }
}