/* Hallmark · component: auth-modal · genre: modern-minimal · theme: design.md (Trámite Legal)
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P4 H5 E4 S4 R5 V4 */
/* =========================================================================
 * TLC · Autenticación (popup + vista embebida en /mi-cuenta/)
 * Comparte paleta y tipografía con account.css. Los tokens se redeclaran
 * aquí porque account.css los define bajo .woocommerce-account y el popup
 * vive en el footer, fuera de ese scope.
 * ====================================================================== */

/* 1 · TOKENS -------------------------------------------------------------- */
.tlc-auth,
.tlc-auth-modal{
	--auth-ink:#14283f;
	--auth-ink-soft:#33475c;
	--auth-accent:#f28a2b;
	--auth-accent-hover:#dd7419;
	--auth-bg:#ffffff;
	--auth-bg-soft:#f8f7f3;
	--auth-bg-muted:#f2f0eb;
	--auth-border:#e5e2da;
	--auth-border-strong:#d6d1c7;
	--auth-text:#172536;
	--auth-muted:#68727d;
	--auth-success:#247a58;
	--auth-success-bg:#e7f2ec;
	--auth-danger:#b74444;
	--auth-danger-bg:#f6e7e5;
	--auth-radius-sm:8px;
	--auth-radius-md:12px;
	--auth-radius-lg:18px;
	--auth-radius-input:10px;
	--auth-radius-pill:999px;
	--auth-focus-ring:0 0 0 3px rgba(242,138,43,.18);
	--auth-font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
	--auth-ease:cubic-bezier(.33,0,.2,1);
	--auth-ease-pop:cubic-bezier(.34,1.4,.44,1); /* solo el brote del check */
}

/* 2 · MODAL --------------------------------------------------------------- */
.tlc-auth-modal[hidden]{display:none}
.tlc-auth-modal{
	position:fixed;inset:0;z-index:100000;
	display:flex;align-items:center;justify-content:center;
	padding:24px;
}
.tlc-auth-modal__backdrop{
	position:absolute;inset:0;
	background:rgba(14,26,42,.55);
	opacity:0;transition:opacity .22s var(--auth-ease);
}
.tlc-auth-modal.is-open .tlc-auth-modal__backdrop{opacity:1}

.tlc-auth-modal__dialog{
	position:relative;
	width:100%;max-width:470px;max-height:calc(100vh - 48px);
	overflow-y:auto;overscroll-behavior:contain;
	background:var(--auth-bg);
	border:1px solid var(--auth-border);
	border-radius:var(--auth-radius-lg);
	padding:36px 34px 30px;
	opacity:0;transform:translateY(10px) scale(.99);
	transition:opacity .22s var(--auth-ease),transform .22s var(--auth-ease);
}
.tlc-auth-modal.is-open .tlc-auth-modal__dialog{opacity:1;transform:none}

/* Banda cálida en la cabecera del diálogo, como los heros del sitio. */
.tlc-auth-modal__dialog::before{
	content:"";
	position:absolute;inset:0 0 auto 0;height:130px;
	border-radius:var(--auth-radius-lg) var(--auth-radius-lg) 0 0;
	background:linear-gradient(180deg,#faf3ea 0%,rgba(250,243,234,0) 100%);
	pointer-events:none;
}

.tlc-auth-modal__close{
	position:absolute;top:14px;right:14px;
	display:flex;align-items:center;justify-content:center;
	width:34px;height:34px;padding:0;
	background:transparent;border:0;border-radius:50%;
	color:var(--auth-muted);cursor:pointer;
	transition:background .18s var(--auth-ease),color .18s var(--auth-ease);
}
.tlc-auth-modal__close:hover{background:var(--auth-bg-muted);color:var(--auth-ink)}
.tlc-auth-modal__close:focus-visible{outline:2px solid var(--auth-accent);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
	.tlc-auth-modal__backdrop,
	.tlc-auth-modal__dialog{transition:none}
}

/* 3 · BASE ---------------------------------------------------------------- */
.tlc-auth,
.tlc-auth *{
	font-family:var(--auth-font);
	-webkit-font-smoothing:antialiased;
	box-sizing:border-box;
}
.tlc-auth{color:var(--auth-text);font-size:15px;line-height:1.55}
.tlc-auth__view[hidden]{display:none}
.tlc-auth__step[hidden]{display:none}

/* 4 · CABECERA ------------------------------------------------------------ */
.tlc-auth__head{position:relative;margin:0 0 24px}
.tlc-auth__title{
	margin:0 0 6px;padding:0;
	font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.02em;
	color:var(--auth-ink);
}
/* Subrayado de marca, como los titulares de sección del sitio. */
.tlc-auth__head::after{
	content:"";display:block;
	width:52px;height:3px;border-radius:2px;
	background:var(--auth-accent);
	margin-top:14px;
}
.tlc-auth__sub{
	margin:0;font-size:14.5px;line-height:1.5;color:var(--auth-muted);
}

/* Pasos del registro */
.tlc-steps{
	display:flex;gap:10px;
	margin:18px 0 0;padding:0;list-style:none;
}
.tlc-steps__item{
	display:flex;align-items:center;gap:8px;flex:1;
	padding:0;margin:0;
	font-size:13px;font-weight:600;color:var(--auth-muted);
}
.tlc-steps__item span{
	display:flex;align-items:center;justify-content:center;
	width:24px;height:24px;flex:0 0 24px;
	border:1px solid var(--auth-border-strong);border-radius:50%;
	font-size:12px;font-weight:700;
	transition:background .18s var(--auth-ease),border-color .18s var(--auth-ease),color .18s var(--auth-ease);
}
.tlc-steps__item.is-current{color:var(--auth-ink)}
.tlc-steps__item.is-current span,
.tlc-steps__item.is-done span{
	background:var(--auth-ink);border-color:var(--auth-ink);color:#fff;
}
.tlc-steps__item.is-done{color:var(--auth-ink-soft)}

/* 5 · CAMPOS -------------------------------------------------------------- */
.tlc-field{margin:0 0 18px}
.tlc-field > label,
.tlc-auth .tlc-billing label{
	display:block;margin:0 0 6px;
	font-size:13.5px;font-weight:700;color:var(--auth-ink);
}
.tlc-auth input[type="text"],
.tlc-auth input[type="email"],
.tlc-auth input[type="tel"],
.tlc-auth input[type="password"],
.tlc-auth select,
.tlc-auth .select2-selection{
	width:100%;min-height:48px;padding:12px 14px;
	background:var(--auth-bg);
	border:1px solid var(--auth-border-strong);
	border-radius:var(--auth-radius-input);
	font-family:var(--auth-font);font-size:15px;color:var(--auth-text);
	box-shadow:none;
	transition:border-color .18s var(--auth-ease),box-shadow .18s var(--auth-ease);
}
.tlc-auth input:focus,
.tlc-auth select:focus{outline:none;border-color:var(--auth-accent);box-shadow:var(--auth-focus-ring)}
.tlc-auth input::placeholder{color:var(--auth-muted);opacity:1}
.tlc-auth input.has-error,
.tlc-auth select.has-error{border-color:var(--auth-danger)}

.tlc-field__error{
	display:none;margin-top:6px;
	font-size:13px;font-weight:600;color:var(--auth-danger);
}
.tlc-field__error.is-visible{display:block}
.tlc-field__hint{
	display:none;margin-top:6px;
	font-size:13px;font-weight:600;
}
.tlc-field__hint.is-visible{display:block}
.tlc-field__hint.is-ok{color:var(--auth-success)}
.tlc-field__hint.is-bad{color:var(--auth-danger)}

.tlc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:420px){.tlc-grid-2{grid-template-columns:1fr}}

/* Contraseña con botón de ver/ocultar */
.tlc-field__pass{position:relative}
.tlc-field__pass input{padding-right:46px}
.tlc-pass-toggle{
	position:absolute;top:50%;right:6px;transform:translateY(-50%);
	display:flex;align-items:center;justify-content:center;
	width:36px;height:36px;padding:0;
	background:transparent;border:0;border-radius:var(--auth-radius-sm);
	color:var(--auth-muted);cursor:pointer;
	transition:color .18s var(--auth-ease),background .18s var(--auth-ease);
}
.tlc-pass-toggle:hover{color:var(--auth-ink);background:var(--auth-bg-muted)}
.tlc-pass-toggle:focus-visible{outline:2px solid var(--auth-accent);outline-offset:1px}
.tlc-pass-toggle::before{
	content:"";width:20px;height:20px;
	background:currentColor;
	-webkit-mask:var(--icon-eye) center/contain no-repeat;
	mask:var(--icon-eye) center/contain no-repeat;
}
.tlc-pass-toggle.is-on::before{
	-webkit-mask-image:var(--icon-eye-off);
	mask-image:var(--icon-eye-off);
}
.tlc-auth,
.tlc-auth-modal{
	--icon-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--icon-eye-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c6.5 0 10 7 10 7a17.5 17.5 0 0 1-2.7 3.7M6.6 6.6A17.5 17.5 0 0 0 2 11s3.5 7 10 7a9.1 9.1 0 0 0 5.4-1.6'/%3E%3Cpath d='M14.1 14.1a3 3 0 1 1-4.2-4.2'/%3E%3Cpath d='M2 2l20 20'/%3E%3C/svg%3E");
	--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* 6 · MEDIDOR DE FORTALEZA ------------------------------------------------ */
.tlc-strength{margin-top:10px}
.tlc-strength[hidden]{display:none}
.tlc-strength__bar{
	height:5px;border-radius:99px;
	background:var(--auth-bg-muted);overflow:hidden;
}
.tlc-strength__bar span{
	display:block;height:100%;width:0;border-radius:99px;
	background:var(--auth-danger);
	transition:width .25s var(--auth-ease),background .25s var(--auth-ease);
}
.tlc-strength__label{
	margin:6px 0 0;font-size:12.5px;font-weight:700;color:var(--auth-muted);
}
.tlc-strength[data-score="0"] .tlc-strength__bar span{width:12%;background:#c0392b}
.tlc-strength[data-score="1"] .tlc-strength__bar span{width:30%;background:#d35400}
.tlc-strength[data-score="2"] .tlc-strength__bar span{width:55%;background:#c99a2e}
.tlc-strength[data-score="3"] .tlc-strength__bar span{width:80%;background:#4a9c6d}
.tlc-strength[data-score="4"] .tlc-strength__bar span{width:100%;background:var(--auth-success)}
.tlc-strength[data-score="0"] .tlc-strength__label{color:#c0392b}
.tlc-strength[data-score="1"] .tlc-strength__label{color:#d35400}
.tlc-strength[data-score="2"] .tlc-strength__label{color:#a56513}
.tlc-strength[data-score="3"],
.tlc-strength[data-score="4"]{--x:0}
.tlc-strength[data-score="3"] .tlc-strength__label,
.tlc-strength[data-score="4"] .tlc-strength__label{color:var(--auth-success)}

/* 7 · CHECKBOX ------------------------------------------------------------ */
/* Dibujado a medida: caja redondeada, check Lucide que "brota" al marcar. */
.tlc-check{
	display:flex;align-items:center;gap:10px;
	margin:0;font-size:14px;font-weight:600;color:var(--auth-ink-soft);cursor:pointer;
}
.tlc-check--block{align-items:flex-start;margin:4px 0 18px;font-weight:500;line-height:1.45}
.tlc-check input[type="checkbox"]{
	appearance:none;-webkit-appearance:none;
	width:20px;height:20px;flex:0 0 20px;margin:0;padding:0;
	display:grid;place-items:center;
	background:var(--auth-bg);
	border:2px solid var(--auth-border-strong);
	border-radius:6px;
	cursor:pointer;
	transition:background .16s var(--auth-ease),border-color .16s var(--auth-ease);
}
.tlc-check input[type="checkbox"]::before{
	content:"";width:12px;height:12px;
	background:#fff;
	-webkit-mask:var(--icon-check) center/contain no-repeat;
	mask:var(--icon-check) center/contain no-repeat;
	transform:scale(0);
	transition:transform .18s var(--auth-ease-pop);
}
.tlc-check:hover input[type="checkbox"]:not(:checked){border-color:var(--auth-ink)}
.tlc-check input[type="checkbox"]:checked{
	background:var(--auth-accent);
	border-color:var(--auth-accent);
}
.tlc-check input[type="checkbox"]:checked::before{transform:scale(1)}
.tlc-check input[type="checkbox"]:active{transform:scale(.92)}
.tlc-check input[type="checkbox"]:focus-visible{outline:2px solid var(--auth-ink);outline-offset:2px}
.tlc-check input[type="checkbox"]:disabled{opacity:.5;cursor:not-allowed}
.tlc-check--block input[type="checkbox"]{margin-top:1px}
.tlc-check a{color:var(--auth-accent-hover);text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){
	.tlc-check input[type="checkbox"]::before{transition:none}
	.tlc-check input[type="checkbox"]:active{transform:none}
}
.tlc-req{color:var(--auth-danger)}

/* 8 · BOTONES ------------------------------------------------------------- */
.tlc-auth__submit{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	width:100%;min-height:50px;padding:13px 24px;
	background:var(--auth-accent);border:1px solid var(--auth-accent);
	border-radius:var(--auth-radius-pill);
	color:#fff;font-family:var(--auth-font);font-size:15px;font-weight:600;line-height:1;
	text-decoration:none;text-transform:none;letter-spacing:.01em;
	box-shadow:none;cursor:pointer;
	transition:background .18s var(--auth-ease),border-color .18s var(--auth-ease),color .18s var(--auth-ease),transform .12s var(--auth-ease);
}
.tlc-auth__submit:hover{background:var(--auth-accent-hover);border-color:var(--auth-accent-hover);color:#fff;transform:translateY(-1px)}
.tlc-auth__submit:active{transform:translateY(0)}
.tlc-auth__submit:focus-visible{outline:2px solid var(--auth-ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
	.tlc-auth__submit:hover{transform:none}
}
.tlc-auth__submit--ghost{
	background:var(--auth-bg);color:var(--auth-ink);border-color:var(--auth-border-strong);
}
.tlc-auth__submit--ghost:hover{background:var(--auth-bg-muted);color:var(--auth-ink);border-color:var(--auth-ink)}
.tlc-auth__submit[disabled],
.tlc-auth__submit.is-loading{opacity:.65;cursor:not-allowed;pointer-events:none}
.tlc-auth__submit.is-loading::after{
	content:"";width:16px;height:16px;
	border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
	animation:tlc-spin .6s linear infinite;
}
.tlc-auth__submit--ghost.is-loading::after{border-color:rgba(20,40,63,.3);border-top-color:var(--auth-ink)}
@keyframes tlc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
	.tlc-auth__submit.is-loading::after{animation-duration:1.6s}
}

.tlc-auth__actions{display:grid;grid-template-columns:auto 1fr;gap:10px}
.tlc-auth__actions .tlc-auth__submit--ghost{width:auto;padding:13px 16px}

/* Enlaces tipo botón */
.tlc-auth__link{
	padding:0;background:transparent;border:0;
	color:var(--auth-accent-hover);
	font-family:var(--auth-font);font-size:13.5px;font-weight:700;
	text-decoration:none;cursor:pointer;
	transition:color .18s var(--auth-ease);
}
/* Los !important frenan el `button:hover{background:#637c77}` global del
 * tema, que pintaba una losa verde detrás de estos enlaces-botón. */
.tlc-auth__link:hover,
.tlc-auth__link:focus{
	color:var(--auth-ink) !important;
	background:transparent !important;
	text-decoration:underline;text-underline-offset:2px;
	box-shadow:none !important;
}
.tlc-auth__link:focus-visible{outline:2px solid var(--auth-accent);outline-offset:2px;border-radius:2px}

.tlc-auth__row{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	margin:0 0 22px;flex-wrap:wrap;
}
.tlc-auth__foot{
	margin:20px 0 0;text-align:center;
	font-size:14px;color:var(--auth-muted);
}
.tlc-auth__foot .tlc-auth__link{font-size:14px}

/* 9 · AVISOS -------------------------------------------------------------- */
.tlc-auth__alert{
	margin:0 0 20px;padding:12px 14px;
	border:1px solid var(--auth-danger);border-radius:var(--auth-radius-sm);
	background:var(--auth-danger-bg);
	font-size:14px;font-weight:600;line-height:1.45;color:#8f3535;
}
.tlc-auth__alert[hidden]{display:none}
.tlc-auth__alert.is-success{
	border-color:var(--auth-success);background:var(--auth-success-bg);color:#1c5c43;
}

/* Confirmación de email enviado */
.tlc-auth__done[hidden]{display:none}
.tlc-auth__done{text-align:center;padding:8px 0 0}
.tlc-auth__done-icon{
	display:flex;align-items:center;justify-content:center;
	width:60px;height:60px;margin:0 auto 16px;
	border-radius:50%;
	background:var(--auth-success-bg);color:var(--auth-success);
}
.tlc-auth__done h3{
	margin:0 0 8px;font-size:19px;font-weight:700;color:var(--auth-ink);
}
.tlc-auth__done p{
	margin:0 0 22px;font-size:14.5px;line-height:1.5;color:var(--auth-muted);
}

/* 10 · CAMPOS DE WOOCOMMERCE ----------------------------------------------- */
/* WooCommerce reparte los pares (nombre/apellidos, C.P./ciudad) con float.
   Se traduce a grid: con float, una fila más alta que su vecina —al mostrar un
   error— arrastra a la siguiente y descuadra la rejilla. */
.tlc-auth .tlc-billing{
	display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start;
}
.tlc-auth .tlc-billing .form-row{
	grid-column:1 / -1;margin:0 0 18px;padding:0;float:none;width:auto;
}
.tlc-auth .tlc-billing .form-row-first{grid-column:1 / 2}
.tlc-auth .tlc-billing .form-row-last{grid-column:2 / 3}
.tlc-auth .tlc-billing .clear{display:none}
@media (max-width:420px){
	.tlc-auth .tlc-billing{grid-template-columns:1fr}
	.tlc-auth .tlc-billing .form-row-first,
	.tlc-auth .tlc-billing .form-row-last{grid-column:1 / -1}
}
.tlc-auth .tlc-billing .form-row .tlc-field__error{margin-top:6px}
.tlc-auth .tlc-billing .required{color:var(--auth-danger);text-decoration:none}
.tlc-auth .tlc-billing .optional{color:var(--auth-muted);font-weight:500}
.tlc-auth .tlc-billing abbr[title]{text-decoration:none;border:0}

/* Select2 (país / provincia) alineado con el resto de inputs */
.tlc-auth .select2-container--default .select2-selection--single{
	height:48px;
	border:1px solid var(--auth-border-strong);
	border-radius:var(--auth-radius-sm);
	background:var(--auth-bg);
}
.tlc-auth .select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height:46px;padding-left:14px;
	color:var(--auth-text);font-size:15px;
}
.tlc-auth .select2-container--default .select2-selection--single .select2-selection__arrow{height:46px;right:8px}
.tlc-auth .select2-container--default.select2-container--focus .select2-selection--single,
.tlc-auth .select2-container--default.select2-container--open .select2-selection--single{
	border-color:var(--auth-accent);
}
/* El desplegable de select2 se monta en <body>, fuera del scope .tlc-auth */
.select2-dropdown{
	border-color:var(--auth-border-strong);
	border-radius:var(--auth-radius-sm);
	font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
.select2-container{z-index:100010}

/* 11 · VISTA EMBEBIDA EN /mi-cuenta/ -------------------------------------- */
.tlc-auth-page{
	max-width:1300px;
	margin:0 auto;
	padding:56px 24px 72px;
}
.tlc-auth-page__grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,470px);
	gap:64px;align-items:center;
}
.tlc-auth-page__panel{
	background:var(--auth-bg,#fff);
	border:1px solid #e5e2da;
	border-radius:16px;
	padding:38px 36px 32px;
}
.tlc-auth-page__pitch{max-width:520px}
.tlc-auth-page__eyebrow{
	display:inline-block;margin:0 0 14px;padding:5px 11px;
	border-radius:99px;background:#f2f0eb;
	font-family:"Poppins",sans-serif;font-size:12px;font-weight:700;
	letter-spacing:.06em;text-transform:uppercase;color:#33475c;
}
.tlc-auth-page__title{
	margin:0 0 14px;padding:0;
	font-family:"Poppins",sans-serif;
	font-size:38px;font-weight:700;line-height:1.15;letter-spacing:-.02em;
	color:#14283f;
}
.tlc-auth-page__text{
	margin:0 0 28px;
	font-family:"Poppins",sans-serif;font-size:16px;line-height:1.6;color:#68727d;
}
.tlc-auth-page__list{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.tlc-auth-page__list li{
	display:flex;align-items:flex-start;gap:11px;
	font-family:"Poppins",sans-serif;font-size:15px;font-weight:600;color:#33475c;
}
.tlc-auth-page__list li::before{
	content:"";flex:0 0 20px;width:20px;height:20px;margin-top:1px;
	border-radius:50%;background:#e7f2ec;
	-webkit-mask:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23247a58' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-size:12px;background-position:center;background-repeat:no-repeat;
}

@media (max-width:1024px){
	.tlc-auth-page__grid{grid-template-columns:1fr;gap:40px}
	.tlc-auth-page__pitch{max-width:none}
	.tlc-auth-page__title{font-size:31px}
	.tlc-auth-page__panel{justify-self:stretch}
}
@media (max-width:600px){
	.tlc-auth-page{padding:32px 18px 56px}
	.tlc-auth-page__panel{padding:28px 22px 26px;border-radius:14px}
	.tlc-auth-page__title{font-size:27px}
	.tlc-auth-modal{padding:0;align-items:flex-end}
	.tlc-auth-modal__dialog{
		max-width:none;max-height:92vh;
		border-radius:18px 18px 0 0;
		padding:30px 22px 26px;
		transform:translateY(24px);
	}
}

/* La página de cuenta sin sesión no debe heredar el layout del panel */
.woocommerce-account .tlc-auth-page .woocommerce-notices-wrapper{margin-bottom:16px}