/* ── Kyvex Hosting — hoja base ─────────────────────────────────────────── */
/* Identidad kyvex-web: fondo #05070d, superficies azul noche, marca #425e9e
   y acentos #5e99c6 / #8cb5d8. Tema claro por defecto + toggle oscuro
   (data-theme en <html>, localStorage 'kyvex-tema') con la paleta Kyvex.
   Estructura y microinteracciones estilo kernelshield (topbar, botones con
   sombra dura, hover-lift, reveal con blur); la marca y los colores son
   los de Kyvex. Tipografía Sora (títulos) + Inter (cuerpo). */

:root {
	color-scheme: light;
	--fondo: #ffffff;
	--fondo-2: #f6f8fc;
	--caja: #ffffff;
	--caja-2: #eef3fb;
	--borde: #dce4f2;
	--texto: #101a2c;
	--muted: #5a6b8c;
	--marca: #425e9e;
	--marca-alto: #33507f;
	--marca-suave: #33507f;
	--marca-sombra: #2d4375;
	--marca-btn: #425e9e;
	--marca-btn-hover: #4d6cb0;
	--ambar: #f5c451;
	--ambar-sombra: #b8933a;
	--ok: #34d399;
	--peligro: #ef4444;
	--ok-txt: #0f7b4f;
	--warn-txt: #8a6100;
	--peligro-txt: #b91c1c;
	--info-fuerte: #5e99c6;
	--info-txt: #33507f;
	--violet-txt: #40588f;
	--estrella: #d9a300;
	--texto-inv: #ffffff;
	--radio: 14px;
	--ancho: 1160px;
	--fuente-display: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--fuente: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--cabecera-bg: rgba(255, 255, 255, .92);
	--topbar-bg: #0a101d;
	--topbar-txt: #ffffff;
	--topbar-acento: #8cb5d8;
	--glow: #dce8f8;
	--sombra-marca: rgba(66, 94, 158, .35);
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--fondo: #05070d;
	--fondo-2: #0a101d;
	--caja: #0c1322;
	--caja-2: #16223a;
	--borde: #22314f;
	--texto: #e9edf6;
	--muted: #93a2c0;
	--marca: #5e99c6;
	--marca-alto: #8cb5d8;
	--marca-suave: #8cb5d8;
	--marca-sombra: #22355e;
	--marca-btn: #425e9e;
	--marca-btn-hover: #4d6cb0;
	--ambar: #f5c451;
	--ambar-sombra: #9c7c2e;
	--ok: #34d399;
	--peligro: #ef4444;
	--ok-txt: #6ee7b7;
	--warn-txt: #fde68a;
	--peligro-txt: #fca5a5;
	--info-fuerte: #818cf8;
	--info-txt: #a5b4fc;
	--violet-txt: #a9bde2;
	--estrella: #f5c451;
	--cabecera-bg: rgba(5, 7, 13, .82);
	--glow: rgba(94, 153, 198, .25);
	--sombra-marca: rgba(94, 153, 198, .5);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background:
		radial-gradient(1100px 480px at 85% -180px, var(--glow), transparent 70%),
		var(--fondo);
	color: var(--texto);
	font-family: var(--fuente);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	overflow-x: hidden;
}

a { color: var(--marca-alto); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--fuente-display); line-height: 1.22; margin: 0 0 .5em; letter-spacing: -.01em; }

::selection { background: color-mix(in srgb, var(--marca) 30%, transparent); }

:focus-visible { outline: 2px solid var(--marca-alto); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 8px; border: 2px solid var(--fondo); }
*::-webkit-scrollbar-track { background: transparent; }

/* Iconos SVG en línea (sprite en cabecera.ejs) */
.ico {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}
.ico-topbar { width: 13px; height: 13px; color: var(--topbar-acento); vertical-align: -2px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.seccion { padding: 52px 0; border-top: 1px solid color-mix(in srgb, var(--borde) 70%, transparent); }
.seccion-alt { background: var(--fondo-2); }
.contenedor-estrecho { max-width: 760px; }
.centrado { text-align: center; margin-top: 26px; }
.enlace-mas { display: inline-block; font-size: .9rem; font-weight: 700; color: var(--marca-alto); font-family: var(--fuente-display); }
.enlace-mas::after { content: ' →'; transition: margin .15s ease; }
.enlace-mas:hover { color: var(--marca); text-decoration: none; }
.enlace-mas:hover::after { margin-left: 4px; }

.eyebrow {
	font-family: var(--fuente-display);
	font-weight: 700;
	font-size: .8rem;
	color: var(--marca-alto);
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.eyebrow .ico { width: 15px; height: 15px; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1.5px solid transparent;
	border-radius: 10px;
	font: inherit;
	font-family: var(--fuente);
	font-weight: 700;
	font-size: .95rem;
	cursor: pointer;
	transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
	text-decoration: none;
	user-select: none;
	touch-action: manipulation;
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }

.btn-oro {
	background: var(--marca-btn);
	color: var(--texto-inv);
	box-shadow: 0 5px 0 var(--marca-sombra);
	filter: none;
}
.btn-oro:hover { background: var(--marca-btn-hover); filter: none; box-shadow: 0 4px 0 var(--marca-sombra); transform: translateY(1px); }
.btn-fantasma { background: var(--caja); color: var(--texto); border-color: var(--borde); }
.btn-fantasma:hover { background: var(--caja-2); border-color: var(--marca-alto); filter: none; }
.btn-discord { background: #5865f2; color: #fff; }
.btn-chico { padding: 7px 13px; font-size: .88rem; box-shadow: none; }
.btn-chico.btn-oro { box-shadow: 0 3px 0 var(--marca-sombra); }
.btn-ancho { width: 100%; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.topbar {
	background: var(--topbar-bg);
	color: var(--topbar-txt);
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	padding: 7px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.topbar-item { display: inline-flex; align-items: center; gap: 6px; }
.topbar .sep { opacity: .4; }

.cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--cabecera-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--borde);
}
.cabecera-int { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 62px; }

.marca { display: flex; align-items: center; gap: 10px; color: var(--texto); font-size: 1.08rem; font-weight: 800; font-family: var(--fuente-display); letter-spacing: -.01em; }
.marca:hover { text-decoration: none; color: var(--marca-alto); }
.marca-icono { width: 30px; height: 30px; border-radius: 9px; display: block; box-shadow: 0 0 0 1px var(--borde), 0 4px 14px -6px var(--sombra-marca); }
.marca-punto {
	width: 11px; height: 11px; border-radius: 50%;
	background: var(--marca-alto); box-shadow: 0 0 14px var(--marca);
}
.marca-txt b { color: var(--marca-alto); }

/* Logo con degradado vertical (estilo Kernel Shield), en azul Kyvex. */
.marca-texto {
	background: linear-gradient(180deg, #97b3dd 0%, #5e82c4 38%, var(--marca) 72%, var(--marca-sombra) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--marca);
	-webkit-text-fill-color: transparent;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
	transition: filter .15s ease;
}
.marca:hover .marca-texto { filter: brightness(1.06); color: var(--marca); }
:root[data-theme="dark"] .marca-texto {
	background: linear-gradient(180deg, #ffffff 0%, #c7dcf3 42%, var(--marca-alto) 78%, var(--marca) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { color: var(--texto); padding: 8px 12px; border-radius: 8px; font-size: .93rem; font-weight: 500; transition: background .15s ease, color .15s ease; }
.nav-links a:hover { background: var(--caja-2); text-decoration: none; color: var(--marca-alto); }
.nav-links a.activo { color: var(--marca-alto); background: var(--caja-2); font-weight: 600; }

.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-right .hamburguesa { margin-left: 4px; }
.nav-cuenta { color: var(--texto); padding: 8px 10px; border-radius: 8px; font-size: .93rem; font-weight: 500; }
.nav-cuenta:hover { background: var(--caja-2); text-decoration: none; color: var(--marca-alto); }
.nav-form { margin: 0; display: flex; }
.nav-sep { display: none; width: 100%; height: 1px; background: var(--borde); margin: 7px 0; flex: 0 0 auto; }
.solo-movil { display: none; }

/* ── Dropdown del switcher de idioma (ES/EN) ─────────────────────────── */
.dd { position: relative; }
.dd-btn {
	display: inline-flex; align-items: center; gap: 5px;
	border: 1.5px solid var(--borde); background: var(--caja); color: var(--texto);
	border-radius: 99px; padding: 7px 12px; font: inherit; font-size: .85rem; font-weight: 600;
	cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.dd-btn:hover, .dd.dd-abierto .dd-btn { border-color: var(--marca-alto); color: var(--marca-alto); }
.dd-btn .i-dd { width: 13px; height: 13px; transition: transform .18s ease; }
.dd.dd-abierto .dd-btn .i-dd { transform: rotate(180deg); }
.dd-menu {
	position: absolute; right: 0; top: calc(100% + 8px); min-width: 148px;
	background: var(--caja); border: 1px solid var(--borde); border-radius: 12px;
	box-shadow: 0 18px 40px -22px var(--sombra-marca); padding: 6px; margin: 0; list-style: none;
	display: none; z-index: 60;
}
.dd.dd-abierto .dd-menu { display: block; }
.dd-menu a { display: block; padding: 8px 11px; border-radius: 8px; color: var(--texto); font-size: .88rem; font-weight: 500; }
.dd-menu a:hover { background: var(--caja-2); color: var(--marca-alto); text-decoration: none; }
.dd-menu a.sel { background: var(--caja-2); color: var(--marca-alto); font-weight: 600; }

.btn-tema {
	width: 36px;
	height: 36px;
	border-radius: 99px;
	border: 1.5px solid var(--borde);
	background: var(--caja);
	color: var(--texto);
	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn-tema:hover { border-color: var(--marca-alto); color: var(--marca-alto); transform: translateY(-1px); }
.btn-tema .i-sol { display: none; }
.btn-tema .i-luna { display: block; }
:root[data-theme="dark"] .btn-tema .i-sol { display: block; }
:root[data-theme="dark"] .btn-tema .i-luna { display: none; }

.hamburguesa {
	display: none; margin-left: auto;
	background: none; border: 1px solid var(--borde); border-radius: 9px;
	padding: 9px 10px; cursor: pointer;
}
.hamburguesa span { display: block; width: 19px; height: 2px; background: var(--texto); margin: 3px 0; border-radius: 2px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
	padding: 72px 0 56px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.hero::before {
	content: '';
	position: absolute;
	top: -170px;
	right: -140px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, var(--glow), transparent 70%);
	z-index: 0;
	animation: heroFlotar 9s ease-in-out infinite alternate;
	pointer-events: none;
}
.hero::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--borde), transparent);
}
@keyframes heroFlotar {
	from { transform: translate(0, 0); }
	to { transform: translate(-26px, 22px); }
}
.hero > .contenedor { position: relative; z-index: 1; }
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px;
	background: var(--caja-2);
	color: var(--marca-alto);
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 700;
	font-family: var(--fuente-display);
	margin: 0 0 18px;
}
.hero-ojo { text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; color: var(--marca-alto); margin: 0 0 14px; font-weight: 700; }
.hero-titulo {
	font-family: var(--fuente-display);
	font-size: clamp(2rem, 5vw, 3.2rem);
	margin: 0 0 18px;
	letter-spacing: -.02em;
	line-height: 1.12;
	font-weight: 800;
	color: var(--texto);
	max-width: 22ch;
	margin-inline: auto;
}
.oro {
	background: linear-gradient(90deg, var(--marca-alto), var(--marca));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hero-texto { font-size: 1.05rem; color: var(--muted); max-width: 58ch; margin: 0 auto 28px; }
.hero-botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 32px 0 0; color: var(--muted); font-size: .88rem; justify-content: center; }
.hero-tags li::before { content: '✓'; color: var(--ok); margin-right: 6px; font-weight: 700; }
.hero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 34px auto 0;
	max-width: 900px;
	text-align: left;
}
.hero-stat {
	background: var(--caja);
	border: 1.5px solid var(--borde);
	border-radius: 14px;
	padding: 18px;
	transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.hero-stat:hover { border-color: color-mix(in srgb, var(--marca) 40%, var(--borde)); transform: translateY(-5px); box-shadow: 0 16px 30px -18px var(--sombra-marca); }
.hero-stat-n { display: block; font-family: var(--fuente-display); font-size: .98rem; font-weight: 700; color: var(--texto); line-height: 1.3; }
.hero-stat-l { font-size: .82rem; color: var(--muted); }

.seccion-titulo { font-family: var(--fuente-display); font-size: clamp(1.45rem, 3.2vw, 1.95rem); letter-spacing: -.01em; text-align: center; font-weight: 800; }
.seccion-sub { color: var(--muted); margin: 0 auto 30px; text-align: center; max-width: 62ch; }
.seccion-sub-titulo { font-size: 1.12rem; margin: 34px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--borde); }

/* ── Tarjetas y rejillas ──────────────────────────────────────────────── */
.rejilla-2, .rejilla-3, .rejilla-planes { display: grid; gap: 14px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla-planes { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }

.tarjeta {
	background: var(--caja);
	border: 1.5px solid var(--borde);
	border-radius: var(--radio);
	padding: 22px;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.tarjeta:hover {
	border-color: color-mix(in srgb, var(--marca) 35%, var(--borde));
	transform: translateY(-5px);
	box-shadow: 0 16px 30px -18px var(--sombra-marca);
}
.tarjeta h3 { font-family: var(--fuente-display); font-size: 1.02rem; font-weight: 700; }
.tarjeta p { color: var(--muted); margin: 0 0 14px; font-size: .92rem; }
.tarjeta-enlace { display: block; color: inherit; transition: border-color .15s ease, transform .12s ease; }
.tarjeta-enlace:hover { border-color: var(--marca-alto); text-decoration: none; transform: translateY(-2px); }
.t-icono {
	display: inline-grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 10px;
	font-size: 1.2rem;
	margin-bottom: 13px;
	background: var(--caja-2);
	color: var(--marca-alto);
}
.t-icono .ico { width: 20px; height: 20px; }

/* Pasos (cómo funciona) */
.pasos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: paso; }
.paso {
	position: relative;
	background: var(--caja);
	border: 1.5px solid var(--borde);
	border-radius: var(--radio);
	padding: 22px 20px 20px;
	transition: border-color .18s ease, transform .18s ease;
}
.paso:hover { border-color: color-mix(in srgb, var(--marca) 35%, var(--borde)); transform: translateY(-4px); }
.paso-n {
	display: grid; place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--marca);
	color: #fff; font-weight: 800; font-size: .95rem;
	font-family: var(--fuente-display);
	margin-bottom: 13px;
	box-shadow: 0 5px 0 var(--marca-sombra);
}
.paso h3 { font-family: var(--fuente-display); font-size: 1rem; margin-bottom: 6px; }
.paso p { margin: 0; color: var(--muted); font-size: .92rem; }

/* FAQ */
.faq { display: grid; gap: 11px; max-width: 760px; margin: 0 auto; }
.faq-item {
	background: var(--caja);
	border: 1.5px solid var(--borde);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .15s ease;
}
.faq-item:hover { border-color: color-mix(in srgb, var(--marca) 30%, var(--borde)); }
.faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 15px 42px 15px 18px;
	font-weight: 600;
	position: relative;
	font-size: .96rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: '+';
	position: absolute; right: 17px; top: 50%;
	transform: translateY(-50%);
	color: var(--marca-alto);
	font-size: 1.25rem; font-weight: 500;
	transition: transform .18s ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: .93rem; }

/* CTA final — banda púrpura estilo kernelshield */
.cta-final {
	margin: 26px auto 6px;
	text-align: center;
	border: 0;
	border-radius: 24px;
	padding: 48px 32px;
	background: linear-gradient(135deg, var(--marca-btn), var(--marca-sombra));
	position: relative;
	overflow: hidden;
}
.cta-final::after {
	content: '';
	position: absolute;
	bottom: -90px;
	right: -50px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	pointer-events: none;
}
.cta-final > * { position: relative; z-index: 1; }
.cta-final h2 { font-family: var(--fuente-display); font-size: clamp(1.4rem, 3.4vw, 1.95rem); margin-bottom: 8px; color: #fff; font-weight: 800; }
.cta-final p { color: rgba(255, 255, 255, .85); margin: 0 auto 22px; max-width: 54ch; }
.cta-final .hero-botones { justify-content: center; }

/* Franja de confianza */
.franja { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; color: var(--muted); font-size: .86rem; }
.franja span::before { content: '›'; color: var(--marca-alto); font-weight: 800; margin-right: 7px; }

/* Badges de métodos de pago */
.pago-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.pago-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border-radius: 12px;
	background: var(--caja);
	border: 1.5px solid var(--borde);
	font-family: var(--fuente-display);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .01em;
	white-space: nowrap;
	color: var(--texto);
}
.pago-badge .ico { width: 16px; height: 16px; color: var(--marca-alto); }
.seccion-pagos { text-align: center; }
.seccion-pagos .seccion-titulo { margin-bottom: 4px; }

/* ── Acordeón de planes ───────────────────────────────────────────────── */
.acordeon {
	border: 1.5px solid var(--borde);
	border-radius: var(--radio);
	margin-bottom: 14px;
	overflow: hidden;
	background: var(--caja);
	transition: border-color .18s ease, box-shadow .22s ease;
}
.acordeon[data-abierto="1"] { border-color: color-mix(in srgb, var(--cat-color, var(--marca)) 55%, var(--borde)); box-shadow: 0 12px 34px -26px var(--sombra-marca); }
.acordeon-cab {
	width: 100%; display: flex; align-items: center; gap: 13px;
	padding: 16px 19px; background: none; border: 0; border-left: 3px solid var(--cat-color, var(--marca));
	color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; text-align: left;
	transition: background .15s ease;
}
.acordeon-cab:hover { background: var(--caja-2); }
.acordeon-emoji { font-size: 1.3rem; }
.acordeon-titulo { flex: 1; font-family: var(--fuente-display); }
.acordeon-n { background: var(--caja-2); border: 1px solid var(--borde); border-radius: 20px; padding: 1px 10px; font-size: .82rem; color: var(--muted); }
.acordeon-flecha { transition: transform .18s ease; color: var(--muted); }
.acordeon[data-abierto="1"] .acordeon-flecha { transform: rotate(180deg); }
.acordeon-cuerpo { display: none; padding: 4px 19px 20px; border-top: 1px solid var(--borde); }
.acordeon[data-abierto="1"] .acordeon-cuerpo { display: block; }
.acordeon-desc { color: var(--muted); margin: 14px 0 16px; }

.plan {
	background: var(--caja);
	border: 1.5px solid var(--borde);
	border-radius: 12px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, border-color .18s ease, box-shadow .22s ease;
}
.plan:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--marca) 45%, var(--borde)); box-shadow: 0 16px 30px -18px var(--sombra-marca); }
.plan-nombre { font-family: var(--fuente-display); font-size: 1.02rem; font-weight: 700; margin: 0 0 4px; }
.plan-precio { font-family: var(--fuente-display); color: var(--marca-alto); font-size: 1.5rem; font-weight: 800; margin: 0 0 12px; }
.plan-promo { display: inline-block; background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .3px; padding: 2px 9px; border-radius: 999px; margin: 0 0 8px; }
.plan-precio-antes { color: var(--muted); font-size: .95rem; font-weight: 500; margin-right: 7px; text-decoration-thickness: 1px; }
.plan-specs { list-style: none; padding: 0; margin: 0 0 16px; color: var(--muted); font-size: .9rem; flex: 1; }
.plan-specs li { padding: 3px 0 3px 17px; position: relative; }
.plan-specs li::before { content: '›'; position: absolute; left: 2px; color: var(--marca-alto); font-weight: 700; }

/* ── Formularios ──────────────────────────────────────────────────────── */
.formulario { display: grid; gap: 15px; }
.campo { display: grid; gap: 6px; }
.campo > span { font-size: .87rem; color: var(--muted); font-weight: 600; }
.campo input, .campo select, .campo textarea, .input-busqueda, .sel-compacto {
	width: 100%; padding: 11px 13px; border-radius: 10px;
	border: 1.5px solid var(--borde); background: var(--fondo-2); color: var(--texto);
	font: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus, .input-busqueda:focus {
	outline: none;
	border-color: var(--marca);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent);
}
.campo textarea { resize: vertical; min-height: 96px; }
.ayuda { color: var(--muted); font-size: .8rem; }
.campo-inline { display: flex; align-items: center; gap: 10px; }
.campo-inline > span { white-space: nowrap; }

.fila-filtros { display: flex; gap: 11px; align-items: end; flex-wrap: wrap; margin-bottom: 24px; }
.input-busqueda { max-width: 340px; }
.sel-compacto { width: auto; padding: 8px 11px; }

.auth-caja {
	max-width: 470px;
	margin: 0 auto;
	background: var(--caja);
	border: 1.5px solid var(--borde);
	border-radius: 18px;
	padding: 34px 30px;
	box-shadow: 0 26px 60px -40px var(--sombra-marca);
	text-align: left;
}
.auth-icono { display: block; width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 14px; box-shadow: 0 10px 26px -12px var(--sombra-marca); }
.auth-titulo { font-family: var(--fuente-display); font-size: 1.55rem; margin-bottom: 20px; text-align: center; font-weight: 800; }
.auth-texto { color: var(--muted); }
.auth-pie { text-align: center; color: var(--muted); font-size: .9rem; margin: 20px 0 0; }
.separador { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: .82rem; margin: 22px 0; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--borde); }

.aviso { padding: 11px 14px; border-radius: 10px; font-size: .9rem; margin-bottom: 17px; }
.aviso-ok { background: color-mix(in srgb, var(--ok) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok-txt); }
.aviso-error { background: color-mix(in srgb, var(--peligro) 12%, transparent); border: 1px solid color-mix(in srgb, var(--peligro) 35%, transparent); color: var(--peligro-txt); }
.aviso-aviso { background: color-mix(in srgb, var(--ambar) 18%, transparent); border: 1px solid color-mix(in srgb, var(--ambar) 40%, transparent); color: var(--warn-txt); }

.fuerza { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--muted); }
.fuerza-barra { flex: 1; height: 5px; background: var(--borde); border-radius: 4px; overflow: hidden; }
.fuerza-barra i { display: block; height: 100%; width: 0; background: var(--peligro); transition: width .2s ease, background .2s ease; }
.fuerza-txt { min-width: 78px; font-weight: 600; }

/* ── Checkout ─────────────────────────────────────────────────────────── */
.co-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
	gap: 24px;
	align-items: start;
	margin-top: 8px;
}
.co-resumen {
	position: sticky;
	top: 84px;
	background: var(--caja);
	border: 1.5px solid var(--borde);
	border-radius: var(--radio);
	padding: 24px 22px;
	box-shadow: 0 24px 54px -40px var(--sombra-marca);
}
.co-etiqueta {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--marca-alto);
	margin-bottom: 10px;
}
.co-nombre { font-family: var(--fuente-display); font-size: 1.3rem; margin: 0 0 8px; }
.co-precio { font-family: var(--fuente-display); font-size: 1.9rem; font-weight: 800; color: var(--marca-alto); margin: 14px 0 2px; line-height: 1.15; }
.co-usd { color: var(--muted); font-size: .88rem; margin: 0 0 4px; }
.co-resumen .plan-specs { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--borde); margin-bottom: 0; }
.co-notas {
	display: grid;
	gap: 8px;
	margin-top: 17px;
	padding-top: 15px;
	border-top: 1px solid var(--borde);
	color: var(--muted);
	font-size: .85rem;
}

.co-formulario { display: grid; gap: 16px; }
.co-paso {
	margin: 0;
	border: 1.5px solid var(--borde);
	border-radius: var(--radio);
	background: var(--caja);
	padding: 18px 20px 20px;
}
.co-paso-cab {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 0 4px;
	font-weight: 700;
	font-size: 1rem;
	color: var(--texto);
}
.co-num {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--marca);
	border: none;
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	flex: 0 0 auto;
}
.co-metodos { display: grid; gap: 10px; margin-top: 15px; }
.co-metodo {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 6px 11px;
	padding: 13px 15px;
	border: 1.5px solid var(--borde);
	border-radius: 11px;
	background: var(--fondo-2);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.co-metodo:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--borde)); transform: translateY(-1px); }
.co-metodo:has(input:checked) {
	border-color: var(--marca);
	background: color-mix(in srgb, var(--marca) 12%, var(--fondo-2));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 16%, transparent);
}
.co-metodo input {
	width: auto;
	margin: 0;
	accent-color: var(--marca);
	grid-row: 1;
}
.co-metodo-n { font-weight: 600; font-size: .95rem; grid-row: 1; }
.co-metodo-datos {
	grid-column: 1 / -1;
	grid-row: 2;
	color: var(--marca-alto);
	background: var(--caja-2);
	border: 1px solid color-mix(in srgb, var(--marca) 30%, transparent);
	border-radius: 9px;
	padding: 9px 12px;
	font-size: .86rem;
	white-space: pre-wrap;
	word-break: break-word;
}
.co-pie { text-align: center; margin: -4px 0 0; }

@media (max-width: 880px) {
	.co-grid { grid-template-columns: 1fr; }
	.co-resumen { position: static; }
}

/* ── Panel ────────────────────────────────────────────────────────────── */
.panel-cab { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }

.rejilla-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 13px; margin-bottom: 12px; }
.stat {
	background: var(--caja);
	border: 1.5px solid var(--borde);
	border-radius: 12px;
	padding: 17px;
	display: grid;
	gap: 3px;
	transition: border-color .18s ease, transform .18s ease;
}
.stat:hover { border-color: color-mix(in srgb, var(--marca) 35%, var(--borde)); transform: translateY(-2px); }
.stat-ico { font-size: 1.05rem; margin-bottom: 4px; }
.stat-n { font-family: var(--fuente-display); font-size: 1.6rem; font-weight: 700; }
.stat-l { color: var(--muted); font-size: .84rem; }
.stat-oro .stat-n { color: var(--marca-alto); }

.tabla-wrap { overflow-x: auto; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--caja); }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla th { background: var(--caja-2); color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--caja-2); }
.peligro { color: var(--peligro-txt); }

.badge { padding: 2px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; background: var(--caja-2); border: 1px solid var(--borde); }
.badge-abierto, .badge-pendiente { color: var(--warn-txt); border-color: color-mix(in srgb, var(--ambar) 45%, transparent); }
.badge-en_proceso, .badge-procesando { color: var(--info-fuerte); }
.badge-respondido, .badge-pagado { color: var(--ok-txt); }
.badge-cerrado, .badge-cancelado, .badge-rechazado { color: var(--peligro-txt); }
.badge-entregado { color: var(--ok-txt); background: color-mix(in srgb, var(--ok) 13%, transparent); }

.lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.lista-simple li { display: flex; align-items: center; gap: 11px; padding: 12px 15px; background: var(--caja); border: 1.5px solid var(--borde); border-radius: 10px; transition: border-color .15s ease; }
.lista-simple li:hover { border-color: color-mix(in srgb, var(--marca) 35%, var(--borde)); }
.ticket-asunto { flex: 1; }

.datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 22px; }
.datos dt { color: var(--muted); font-size: .88rem; }
.datos dd { margin: 0; }

.vacio {
	color: var(--muted);
	padding: 30px 26px;
	text-align: center;
	background: var(--caja);
	border: 1.5px dashed var(--borde);
	border-radius: 12px;
}
.vacio-ico { display: block; font-size: 1.9rem; margin-bottom: 7px; filter: grayscale(.25); }
.muted { color: var(--muted); }

/* ── Tickets ──────────────────────────────────────────────────────────── */
.lista-tickets { display: grid; gap: 11px; margin-top: 24px; }
.modal { border: 0; padding: 0; background: transparent; max-width: 560px; width: 100%; }
.modal::backdrop { background: rgba(15, 11, 30, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-caja {
	background: var(--caja);
	border: 1.5px solid var(--borde);
	border-radius: var(--radio);
	padding: 24px;
	display: grid;
	gap: 15px;
	box-shadow: 0 30px 80px -40px var(--sombra-marca);
	animation: surgir .18s ease;
}
@keyframes surgir { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-titulo { margin: 0; font-family: var(--fuente-display); font-size: 1.2rem; }
.modal-pie { display: flex; gap: 10px; justify-content: end; }

/* ── Reseñas / opiniones ──────────────────────────────────────────────── */
.reseña { display: flex; flex-direction: column; }
.reseña-puntaje { color: var(--estrella); letter-spacing: 2px; margin-bottom: 9px; }
.reseña-texto { flex: 1; }
.reseña-pie { display: flex; justify-content: space-between; font-size: .86rem; color: var(--muted); }

.op-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 22px;
	text-align: center;
	margin: 0 auto 30px;
	padding: 22px;
	border: 1.5px solid var(--borde);
	border-radius: 16px;
	background: var(--caja);
	max-width: 640px;
}
.op-prom-num { font-family: var(--fuente-display); font-size: 2.5rem; font-weight: 800; color: var(--marca-alto); line-height: 1; }
.op-prom-estrellas { color: var(--estrella); letter-spacing: 3px; font-size: 1.15rem; }
.op-count { color: var(--muted); font-size: .87rem; margin: 4px 0 0; }
.op-card-top { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.op-ini {
	flex: 0 0 auto;
	width: 40px; height: 40px;
	border-radius: 50%;
	display: grid; place-items: center;
	font-weight: 700; font-size: .95rem;
	color: #fff;
	background: linear-gradient(135deg, var(--marca), var(--marca-alto));
	box-shadow: 0 6px 16px -8px var(--sombra-marca);
}
.op-tag { margin: 0; font-weight: 600; font-size: .93rem; line-height: 1.3; }
.op-prod {
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--marca-alto);
	background: var(--caja-2);
	border: 1px solid color-mix(in srgb, var(--marca) 30%, transparent);
	border-radius: 20px;
	padding: 1px 9px;
}
.op-fecha { margin: 3px 0 0; font-size: .78rem; color: var(--muted); }

/* ── Error ────────────────────────────────────────────────────────────── */
.error-caja { text-align: center; padding: 40px 0; }
.error-codigo { font-family: var(--fuente-display); font-size: 4.4rem; font-weight: 800; color: var(--marca-alto); margin: 0; line-height: 1; }
.error-titulo { font-family: var(--fuente-display); font-size: 1.6rem; margin: 12px 0; }
.error-msg { color: var(--muted); margin-bottom: 26px; }
.icono-ok, .icono-error { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; margin: 0 auto 16px; }
.icono-ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok-txt); }
.icono-error { background: color-mix(in srgb, var(--peligro) 16%, transparent); color: var(--peligro-txt); }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie {
	border-top: 1px solid var(--borde);
	background: var(--fondo);
	margin-top: 48px;
	padding: 42px 0 26px;
	position: relative;
}
.pie-int { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px 26px; }
.pie-col { display: grid; gap: 8px; align-content: start; }
.pie-col h4 {
	font-family: var(--fuente-display);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--marca-alto);
	margin: 0 0 5px;
	font-weight: 700;
}
.pie-col a { color: var(--texto); font-size: .92rem; width: fit-content; transition: color .15s ease, transform .15s ease; }
.pie-col a:hover { color: var(--marca-alto); text-decoration: none; transform: translateX(3px); }

.pie-col-marca { grid-column: span 1; max-width: 340px; }
.pie-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--texto); font-weight: 800; font-family: var(--fuente-display); font-size: 1.05rem; letter-spacing: -.01em; width: fit-content; }
.pie-logo:hover { text-decoration: none; color: var(--marca-alto); }
.pie-logo img {
	width: 40px; height: 40px; border-radius: 12px; display: block;
	box-shadow: 0 0 0 1px var(--borde), 0 8px 22px -10px var(--sombra-marca);
}
.pie-desc { color: var(--muted); font-size: .89rem; margin: 0; line-height: 1.6; }
.pie-redes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.pie-red {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 14px; border: 1.5px solid var(--borde); border-radius: 10px;
	background: var(--caja); color: var(--texto);
	font-size: .86rem; font-weight: 600;
	transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.pie-red:hover {
	border-color: color-mix(in srgb, var(--marca) 50%, var(--borde));
	background: var(--caja-2); color: var(--marca-alto); text-decoration: none; transform: translateY(-2px);
}

.pie-estado { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .88rem; }
.pie-estado-punto {
	width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
	background: var(--muted); transition: background .2s ease, box-shadow .2s ease;
}
.pie-estado[data-estado="ok"] .pie-estado-punto { background: var(--ok); box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 70%, transparent); }
.pie-estado[data-estado="mal"] .pie-estado-punto { background: var(--peligro); box-shadow: 0 0 10px color-mix(in srgb, var(--peligro) 70%, transparent); }
.pie-estado[data-estado="ok"] #pieEstadoTxt { color: var(--ok-txt); }
.pie-estado[data-estado="mal"] #pieEstadoTxt { color: var(--peligro-txt); }
.pie-facto { color: var(--muted); font-size: .86rem; display: inline-flex; align-items: center; gap: 6px; }
.pie-facto .ico { color: var(--marca-alto); width: 14px; height: 14px; }
.pie-muted { color: var(--muted); font-size: .87rem; margin: 0; }

.pie-abajo {
	display: flex; justify-content: space-between; align-items: center;
	gap: 14px; flex-wrap: wrap;
	margin-top: 34px; padding-top: 20px;
	border-top: 1px solid var(--borde);
	font-size: .85rem; color: var(--muted);
}
.pie-arriba {
	margin-left: auto;
	background: var(--caja); border: 1.5px solid var(--borde); border-radius: 9px;
	color: var(--texto); font-size: .83rem; padding: 7px 13px; cursor: pointer;
	transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.pie-arriba:hover { border-color: var(--marca-alto); color: var(--marca-alto); transform: translateY(-2px); }

/* ── Accesos rápidos de staff ─────────────────────────────────────────── */
.staff-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 22px; }
.staff-card {
	display: block;
	color: inherit;
	background: var(--caja);
	border: 1.5px solid var(--borde);
	border-radius: var(--radio);
	padding: 22px;
	transition: transform .18s ease, border-color .18s ease, box-shadow .22s ease;
}
.staff-card:hover { text-decoration: none; transform: translateY(-5px); border-color: color-mix(in srgb, var(--marca) 45%, var(--borde)); box-shadow: 0 16px 30px -18px var(--sombra-marca); }
.staff-card h3 { font-family: var(--fuente-display); font-size: 1.02rem; margin-bottom: 5px; }
.staff-card p { margin: 0; color: var(--muted); font-size: .9rem; }

/* ── Animaciones de entrada (solo con JS) ─────────────────────────────── */
html.con-anim .reveal {
	opacity: 0;
	transform: translateY(26px) scale(.97);
	filter: blur(7px);
	transition: opacity .8s cubic-bezier(.16, .8, .3, 1), transform .8s cubic-bezier(.16, .8, .3, 1), filter .8s cubic-bezier(.16, .8, .3, 1);
	will-change: opacity, transform, filter;
}
html.con-anim .reveal.visible { opacity: 1; transform: none; filter: none; }

/* ── Móvil ────────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
	.hamburguesa { display: block; }
	.nav-links {
		display: none; position: absolute; top: 62px; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 2px;
		background: var(--caja); border-bottom: 1px solid var(--borde);
		padding: 13px 18px 17px; margin: 0; z-index: 55;
		box-shadow: 0 20px 40px -24px var(--sombra-marca);
	}
	.nav-links.abierto { display: flex; }
	.nav-links a, .nav-links .btn { width: 100%; justify-content: center; }
	.nav-links .solo-movil { display: flex; }
	.nav-right .solo-escr { display: none; }
	.nav-right { gap: 6px; }
	.cabecera-int { position: relative; }
	.pie-abajo { flex-direction: column; gap: 5px; }
	.hero-stats { grid-template-columns: 1fr; }
	.auth-caja { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto; }
	html.con-anim .reveal { opacity: 1; transform: none; filter: none; }
}

/* ── Dashboard (panel de usuario) ──────────────────────────────────────── */

.btn-verde { background: var(--ok); color: #052e1e; }
.btn-verde:hover { background: #34d399; }
.btn-verde-osc { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok-txt); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.btn-verde-osc:hover { background: color-mix(in srgb, var(--ok) 24%, transparent); }
.btn-peligro { background: transparent; color: var(--peligro-txt); border-color: color-mix(in srgb, var(--peligro) 45%, transparent); }
.btn-peligro:hover { background: color-mix(in srgb, var(--peligro) 12%, transparent); }
.btn-indigo { background: var(--info-fuerte); color: #fff; }
.btn-indigo:hover { background: color-mix(in srgb, var(--info-fuerte) 85%, #000); }

.pill { padding: 3px 11px; border-radius: 20px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.pill-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok-txt); }
.pill-warn { background: color-mix(in srgb, var(--ambar) 20%, transparent); color: var(--warn-txt); }
.pill-indigo { background: color-mix(in srgb, var(--info-fuerte) 16%, transparent); color: var(--info-txt); }

.panel-main { padding: 26px 0 46px; }
.panel-main .contenedor { display: grid; gap: 18px; }

.aviso-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.aviso-fila p { margin: 0; flex: 1; min-width: 220px; }
.aviso-emoji { font-size: 1.2rem; }
.aviso-ok-texto { margin: -8px 0 0; color: var(--ok-txt); font-size: .88rem; }

.captura { border: 1px solid color-mix(in srgb, var(--info-fuerte) 40%, transparent); background: color-mix(in srgb, var(--info-fuerte) 9%, transparent); border-radius: 12px; padding: 16px; }
.captura-tit { margin: 0; font-weight: 600; color: var(--info-txt); font-size: .95rem; }
.captura-txt { margin: 5px 0 0; color: var(--muted); font-size: .83rem; }
.captura-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.captura-input { flex: 1; min-width: 200px; padding: 9px 12px; border-radius: 9px; border: 1.5px solid var(--borde); background: var(--caja); color: var(--texto); font: inherit; }
.captura-error { margin: 8px 0 0; color: var(--peligro-txt); font-size: .82rem; }

.subnav {
	position: sticky;
	top: 62px;
	z-index: 40;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 10px 2px 7px;
	-webkit-overflow-scrolling: touch;
	margin: 0 -2px;
	background: var(--cabecera-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid color-mix(in srgb, var(--borde) 70%, transparent);
}
.subnav-pill {
	flex: 0 0 auto;
	padding: 6px 13px;
	border-radius: 20px;
	border: 1.5px solid var(--borde);
	background: var(--caja);
	color: var(--muted);
	font-size: .8rem;
	font-weight: 600;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.subnav-pill:hover { border-color: color-mix(in srgb, var(--marca) 50%, var(--borde)); color: var(--marca-alto); text-decoration: none; }
.subnav-pill.activo { color: var(--marca-alto); border-color: var(--marca); background: var(--caja-2); }
.sn-amber { border-color: color-mix(in srgb, var(--ambar) 50%, transparent); background: color-mix(in srgb, var(--ambar) 14%, transparent); color: var(--warn-txt); }
.sn-violet { border-color: color-mix(in srgb, var(--marca) 50%, transparent); background: var(--caja-2); color: var(--violet-txt); }

.heroe-panel {
	border: 1.5px solid var(--borde);
	border-radius: 16px;
	padding: 26px;
	background:
		radial-gradient(520px 200px at 90% -40px, var(--glow), transparent 70%),
		linear-gradient(135deg, color-mix(in srgb, var(--marca) 14%, var(--caja)), var(--caja));
	position: relative;
	overflow: hidden;
}
.heroe-titulo { font-family: var(--fuente-display); font-size: clamp(1.35rem, 3.2vw, 1.7rem); margin: 0 0 6px; font-weight: 800; }
.heroe-txt { margin: 0; color: var(--muted); font-size: .95rem; }
.heroe-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.panel-stats { margin-top: 0; }
.stat-aprox { font-size: .74rem; color: var(--ok-txt); }

.panel-card {
	border: 1.5px solid var(--borde);
	background: var(--caja);
	border-radius: 16px;
	padding: 22px;
	transition: border-color .18s ease;
}
.panel-card:hover { border-color: color-mix(in srgb, var(--marca) 28%, var(--borde)); }
.panel-card-warn { border-color: color-mix(in srgb, var(--ambar) 40%, transparent); }
.panel-tit { font-family: var(--fuente-display); font-size: 1.12rem; margin: 0 0 4px; }
.panel-txt { margin: 0; color: var(--muted); font-size: .9rem; }
.panel-nota { margin: 16px 0 0; padding: 12px 15px; border: 1.5px solid var(--borde); background: var(--fondo-2); border-radius: 10px; color: var(--muted); font-size: .86rem; }
.panel-par { align-items: start; }
.contador { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok-txt); border-radius: 20px; padding: 3px 12px; font-size: .78rem; font-weight: 600; }

/* Servicios */
.sv-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: 16px; }
.sv-card { display: flex; flex-direction: column; gap: 10px; border: 1.5px solid var(--borde); background: var(--caja); border-radius: 13px; padding: 16px; transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease; }
.sv-card:hover { border-color: color-mix(in srgb, var(--ok) 45%, var(--borde)); transform: translateY(-3px); box-shadow: 0 16px 32px -24px color-mix(in srgb, var(--ok) 50%, transparent); }
.sv-top { display: flex; align-items: start; justify-content: space-between; gap: 9px; }
.sv-nombre { margin: 0; font-weight: 600; font-size: .96rem; min-width: 0; overflow-wrap: anywhere; }
.chip { flex: 0 0 auto; padding: 2px 9px; border-radius: 20px; font-size: .7rem; font-weight: 600; white-space: nowrap; }
.chip-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok-txt); }
.chip-warn { background: color-mix(in srgb, var(--ambar) 20%, transparent); color: var(--warn-txt); }
.chip-peligro { background: color-mix(in srgb, var(--peligro) 12%, transparent); color: var(--peligro-txt); }
.chip-neutro { background: var(--caja-2); color: var(--muted); }
.sv-meta { color: var(--muted); font-size: .86rem; display: grid; gap: 3px; }
.sv-meta p { margin: 0; }
.sv-usd { color: var(--muted); font-size: .8rem; }
.sv-acciones { display: flex; gap: 8px; margin-top: auto; }
.sv-acciones .btn { flex: 1; }
.sv-con-creditos { text-align: center; }

/* Órdenes */
.ord-lista { display: grid; gap: 10px; margin-top: 16px; }
.ord-item { border: 1.5px solid var(--borde); background: var(--caja); border-radius: 13px; padding: 14px 15px; transition: border-color .15s ease; }
.ord-item:hover { border-color: color-mix(in srgb, var(--marca) 35%, var(--borde)); }
.ord-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.ord-info { min-width: 0; }
.ord-tit { margin: 0; font-size: .93rem; font-weight: 600; overflow-wrap: anywhere; }
.ord-fecha { margin: 2px 0 0; font-size: .78rem; color: var(--muted); }
.ord-der { text-align: right; flex: 0 0 auto; }
.ord-monto { margin: 5px 0 0; font-size: .8rem; color: var(--muted); }
.entrega { margin-top: 11px; border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); background: color-mix(in srgb, var(--ok) 9%, transparent); border-radius: 10px; padding: 11px 13px; }
.entrega-tit { margin: 0; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ok-txt); font-weight: 700; }
.entrega-pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; color: var(--texto); font-family: inherit; }

/* Créditos */
.cr-saldo { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; border: 1.5px solid var(--borde); background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 8%, var(--caja)), var(--caja)); border-radius: 15px; padding: 19px; margin-top: 16px; }
.cr-lbl { margin: 0; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cr-monto { margin: 4px 0 0; font-size: 1.85rem; font-weight: 800; font-family: var(--fuente-display); }
.cr-aprox { margin: 2px 0 0; font-size: .78rem; color: var(--ok-txt); }
.cr-nota { margin: 6px 0 0; font-size: .8rem; color: var(--muted); }
.cr-meta { display: grid; gap: 4px; align-content: start; text-align: right; font-size: .82rem; color: var(--muted); }
.cr-grid { margin-top: 13px; }
.cr-caja { border: 1.5px solid var(--borde); background: var(--caja); border-radius: 14px; padding: 17px; display: grid; gap: 11px; align-content: start; }
.cr-tit { margin: 0; font-size: .98rem; }
.cr-tit-warn { color: var(--warn-txt); }
.cr-staff { margin-top: 13px; border-color: color-mix(in srgb, var(--ambar) 40%, transparent); }
.cr-error { margin: 0; color: var(--peligro-txt); font-size: .84rem; }
.cr-preview { max-height: 145px; border-radius: 9px; border: 1.5px solid var(--borde); object-fit: contain; justify-self: start; }
.cr-mov-lista { display: grid; gap: 9px; }
.mov-item { display: flex; align-items: center; justify-content: space-between; gap: 11px; border: 1.5px solid var(--borde); background: var(--fondo-2); border-radius: 10px; padding: 10px 12px; transition: border-color .15s ease; }
.mov-item:hover { border-color: color-mix(in srgb, var(--marca) 35%, var(--borde)); }
.mov-info { min-width: 0; }
.mov-tit { margin: 0; font-size: .87rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.mov-fecha { margin: 1px 0 0; font-size: .73rem; color: var(--muted); }
.mov-der { display: flex; flex-direction: column; align-items: end; gap: 3px; flex: 0 0 auto; }
.mov-monto { font-size: .88rem; font-weight: 700; }
.mov-pos { color: var(--ok-txt); }
.mov-neg { color: var(--peligro-txt); }
.mov-aprox { font-size: .7rem; color: var(--muted); }
.pend-item { border: 1.5px solid var(--borde); background: var(--fondo-2); border-radius: 12px; padding: 14px; display: grid; gap: 9px; }
.pend-top { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px; }
.pend-info { min-width: 0; }
.pend-cuenta { margin: 0; font-size: .87rem; font-weight: 600; overflow-wrap: anywhere; }
.pend-monto { margin: 4px 0 0; font-size: .92rem; font-weight: 700; color: var(--warn-txt); }
.pend-aprox { font-size: .76rem; font-weight: 400; }
.pend-btns { display: flex; gap: 8px; }
.enlace-comp { font-size: .8rem; }

/* Soporte y equipo */
.soporte-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.soporte-acciones { margin-top: 13px; }
#listaTickets { margin-top: 13px; }
.eq-lista { display: grid; gap: 11px; margin-top: 16px; }
.eq-item { display: flex; align-items: start; gap: 13px; border: 1.5px solid var(--borde); background: var(--caja); border-radius: 13px; padding: 15px; transition: border-color .15s ease, transform .15s ease; }
.eq-item:hover { border-color: color-mix(in srgb, var(--marca) 35%, var(--borde)); transform: translateY(-2px); }
.eq-icono { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--caja-2); color: var(--marca-alto); font-size: 1.1rem; }
.eq-info { min-width: 0; }
.eq-nombre { margin: 0; font-weight: 600; font-size: .95rem; }
.eq-rol { color: var(--marca-alto); font-weight: 500; }
.eq-desc { margin: 3px 0 0; color: var(--muted); font-size: .87rem; }
.eq-tag { margin: 4px 0 0; font-size: .76rem; color: var(--muted); }

/* Verificación de pagos (staff) */
.vp-lista { display: grid; gap: 13px; margin-top: 16px; }
.vp-tit { margin: 0; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--warn-txt); font-weight: 700; }
.vp-item { border: 1.5px solid var(--borde); background: var(--caja); border-radius: 13px; padding: 15px; display: grid; gap: 10px; transition: border-color .15s ease; }
.vp-item:hover { border-color: color-mix(in srgb, var(--marca) 32%, var(--borde)); }
.vp-top { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px; }
.vp-info { min-width: 0; }
.vp-tit-orden { margin: 0; font-size: .93rem; font-weight: 600; overflow-wrap: anywhere; }
.vp-sub { margin: 3px 0 0; font-size: .79rem; color: var(--muted); overflow-wrap: anywhere; }
.vp-comp { display: block; max-height: 210px; width: 100%; object-fit: contain; border: 1.5px solid var(--borde); border-radius: 9px; }
.vp-nota { margin: 0; font-size: .8rem; color: var(--muted); }
.vp-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-msg { margin: 0; font-size: .82rem; color: var(--violet-txt); }
.vp-caja { border: 1.5px solid var(--borde); background: var(--fondo-2); border-radius: 10px; padding: 12px; display: grid; gap: 9px; }
.vp-caja textarea { width: 100%; min-height: 84px; resize: vertical; padding: 9px 11px; border-radius: 9px; border: 1.5px solid var(--borde); background: var(--caja); color: var(--texto); font: inherit; }
.vp-aviso { margin: 0; font-size: .79rem; color: var(--muted); }

/* Modal de renovación */
.rn-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--borde); padding-bottom: 11px; }
.rn-tit { margin: 0; font-size: .95rem; font-weight: 600; }
.rn-cerrar { background: none; border: 0; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 3px 6px; }
.rn-cerrar:hover { color: var(--texto); }
.rn-datos { display: grid; gap: 8px; border: 1.5px solid var(--borde); background: var(--fondo-2); border-radius: 12px; padding: 13px; font-size: .88rem; }
.rn-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rn-fila span { color: var(--muted); }
.rn-precio { color: var(--ok-txt); }
.rn-falta { margin: 0; font-size: .78rem; color: var(--warn-txt); }
.rn-sepa { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.rn-sepa span { flex: 1; height: 1px; background: var(--borde); }
.rn-datos-pago { border: 1.5px solid var(--borde); background: var(--fondo-2); border-radius: 9px; padding: 11px; font-size: .8rem; white-space: pre-wrap; color: var(--texto); }
.rn-listo { border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); border-radius: 12px; padding: 14px; display: grid; gap: 9px; font-size: .9rem; }
.rn-listo p { margin: 0; }
.rn-listo-det { font-size: .8rem; color: var(--ok-txt); }
.acordeon-lista { display: grid; gap: 0; }
.plan-contratar { margin-top: auto; text-align: center; }

.badge-completado { color: var(--ok-txt); background: color-mix(in srgb, var(--ok) 13%, transparent); }

@media (max-width: 780px) {
	.panel-nombre, .panel-sub { max-width: 46vw; }
	.cr-meta { text-align: left; }
	.ord-der { text-align: right; }
	.mov-tit { max-width: 52vw; }
	.subnav { top: 0; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
}

/* Ver comprobante + detalles finos del dashboard */
.enlace-comp { background: none; border: 0; padding: 0; color: var(--marca-alto); font: inherit; font-size: .8rem; cursor: pointer; text-align: left; }
.enlace-comp:hover { text-decoration: underline; }
.vp-comp-btn { cursor: zoom-in; }
.modal-comp-caja { max-width: 640px; }
.comp-img { display: block; max-width: 100%; max-height: 68vh; width: auto; margin: 0 auto; border-radius: 10px; border: 1.5px solid var(--borde); }
.rn-saldo-bajo b { color: var(--warn-txt); }
.sv-renovar { cursor: pointer; }

/* Acciones por fila en la tabla de servicios (staff) */
.fila-acciones { display: flex; gap: 6px; }

/* ═══ Widget flotante de soporte ══════════════════════════════════════
   Paridad con ChatSoporte de kyvex-web: FAB + panel lista/chat. */
.chat-widget [hidden] { display: none !important; }

.chat-fab {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: var(--ok);
	color: #052e1e;
	font-size: 1.5rem;
	cursor: pointer;
	box-shadow: 0 12px 34px -10px color-mix(in srgb, var(--ok) 55%, transparent);
	transition: transform .15s, filter .15s;
}
.chat-fab:hover { filter: brightness(1.08); transform: translateY(-2px); }
.chat-badge {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 20px;
	background: var(--peligro);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--fondo);
}

.chat-panel {
	position: fixed;
	right: 18px;
	bottom: 84px;
	z-index: 90;
	width: 370px;
	max-width: calc(100vw - 2rem);
	height: 68vh;
	display: flex;
	flex-direction: column;
	background: var(--caja);
	border: 1.5px solid var(--borde);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .35);
}

.chat-hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--borde);
	background: var(--caja-2);
}
.chat-hdr-tit { margin: 0; font-family: var(--fuente-display); font-size: .95rem; font-weight: 700; }
.chat-hdr-vivo { margin: 2px 0 0; font-size: .7rem; color: var(--ok-txt); }
.chat-hdr-acciones { display: flex; align-items: center; gap: 8px; }
.chat-pill {
	padding: 4px 11px;
	border-radius: 20px;
	border: 1.5px solid var(--borde);
	background: transparent;
	color: var(--texto);
	font-size: .72rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.chat-pill:hover { background: var(--fondo-2); border-color: var(--marca-alto); }
.chat-pill.chat-pill-activo { background: var(--ok); color: #052e1e; border-color: var(--ok); }
.chat-x {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	font-size: 1rem;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.chat-x:hover { background: var(--fondo-2); color: var(--texto); }

.chat-cuerpo { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-vista { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px; gap: 10px; overflow-y: auto; }

.chat-caja-cta {
	border: 1.5px solid var(--borde);
	background: var(--caja-2);
	border-radius: 14px;
	padding: 18px 14px;
	text-align: center;
	font-size: .88rem;
	color: var(--texto);
	display: grid;
	gap: 12px;
	justify-items: center;
}
.chat-caja-cta p { margin: 0; }

.chat-tabs { display: flex; gap: 4px; padding: 4px; border: 1.5px solid var(--borde); background: var(--caja-2); border-radius: 10px; }
.chat-tab {
	flex: 1;
	padding: 6px 8px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--muted);
	font-size: .78rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.chat-tab:hover { color: var(--texto); }
.chat-tab-activo { background: var(--ok); color: #052e1e; }

.chat-lista { display: grid; gap: 8px; }
.chat-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 11px 12px;
	text-align: left;
	border: 1.5px solid var(--borde);
	background: var(--caja-2);
	border-radius: 13px;
	color: var(--texto);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.chat-item:hover { border-color: color-mix(in srgb, var(--ok) 55%, var(--borde)); background: var(--fondo-2); }
.chat-item-txt { min-width: 0; }
.chat-item-tit { margin: 0; font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-sub { margin: 3px 0 0; font-size: .73rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.chat-item-estado { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.chat-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 80%, transparent); }

.chat-vacio { margin: 14px 0; text-align: center; font-size: .82rem; color: var(--muted); }

.chat-nuevo-caja { display: grid; gap: 8px; margin-top: 2px; }
.chat-nuevo {
	width: 100%;
	padding: 10px 12px;
	border: 1px dashed color-mix(in srgb, var(--ok) 55%, transparent);
	background: color-mix(in srgb, var(--ok) 10%, transparent);
	color: var(--ok-txt);
	border-radius: 13px;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}
.chat-nuevo:hover { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.chat-form-nuevo { display: grid; gap: 10px; border: 1.5px solid var(--borde); background: var(--caja-2); border-radius: 13px; padding: 12px; }
.chat-form-nuevo .aviso { margin-bottom: 0; }

.chat-vista-chat { padding: 0; overflow: hidden; }
.chat-chat-hdr {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--borde);
	background: var(--caja-2);
}
.chat-atras {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--muted);
	font-size: 1rem;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.chat-atras:hover { background: var(--fondo-2); color: var(--texto); }
.chat-chat-tit { flex: 1; min-width: 0; font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-chat-estado { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); flex-shrink: 0; }

.chat-estados {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--borde);
	background: color-mix(in srgb, var(--caja-2) 60%, transparent);
}
.chat-estado-btn {
	padding: 3px 11px;
	border-radius: 20px;
	border: 1px solid color-mix(in srgb, var(--ambar) 45%, transparent);
	background: transparent;
	color: var(--warn-txt);
	font-size: .7rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}
.chat-estado-btn:hover { background: color-mix(in srgb, var(--ambar) 12%, transparent); }
.chat-estado-btn:disabled { opacity: .4; cursor: default; }
.chat-estado-cerrar { border-color: color-mix(in srgb, var(--peligro) 45%, transparent); color: var(--peligro-txt); }
.chat-estado-cerrar:hover { background: color-mix(in srgb, var(--peligro) 12%, transparent); }
.chat-estado-reabrir { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok-txt); }
.chat-estado-reabrir:hover { background: color-mix(in srgb, var(--ok) 12%, transparent); }

.chat-mensajes { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 12px; }
.chat-msg { display: flex; max-width: 84%; }
.chat-msg-yo { align-self: flex-end; }
.chat-msg-otro { align-self: flex-start; }
.chat-msg-caja { padding: 8px 11px; border-radius: 15px; font-size: .85rem; }
.chat-msg-yo .chat-msg-caja { background: var(--ok); color: #052e1e; border-bottom-right-radius: 5px; }
.chat-msg-otro .chat-msg-caja { background: var(--caja-2); border: 1px solid var(--borde); color: var(--texto); border-bottom-left-radius: 5px; }
.chat-msg-nom { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: .68rem; font-weight: 700; color: var(--marca-alto); }
.chat-msg-staff { padding: 0 6px; border-radius: 8px; background: color-mix(in srgb, var(--ok) 25%, transparent); color: var(--ok-txt); font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; }
.chat-msg-txt { margin: 0; white-space: pre-wrap; word-break: break-word; }
.chat-msg-pie { display: flex; justify-content: flex-end; gap: 5px; margin-top: 4px; font-size: .62rem; }
.chat-msg-yo .chat-msg-pie { color: color-mix(in srgb, #052e1e 70%, transparent); }
.chat-msg-otro .chat-msg-pie { color: var(--muted); }

.chat-escribiendo {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0 12px 8px;
	padding: 8px 11px;
	align-self: flex-start;
	width: fit-content;
	border-radius: 14px;
	background: var(--caja-2);
	border: 1px solid var(--borde);
	font-size: .73rem;
	color: var(--muted);
}
.chat-escribiendo-punto { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); animation: chatPunto 1s infinite ease-in-out; }
.chat-escribiendo-punto:nth-child(2) { animation-delay: .15s; }
.chat-escribiendo-punto:nth-child(3) { animation-delay: .3s; }
@keyframes chatPunto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

.chat-error { margin: 0 12px 8px; font-size: .78rem; }
.chat-enviar { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--borde); background: var(--caja-2); }
.chat-enviar textarea {
	flex: 1;
	max-height: 110px;
	min-height: 42px;
	resize: none;
	padding: 10px 12px;
	border-radius: 13px;
	border: 1.5px solid var(--borde);
	background: var(--caja);
	color: var(--texto);
	font: inherit;
	font-size: .85rem;
}
.chat-enviar textarea:focus { outline: none; border-color: var(--marca-alto); }
.chat-enviar textarea:disabled { opacity: .5; }
.chat-enviar-btn {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border: 0;
	border-radius: 13px;
	background: var(--ok);
	color: #052e1e;
	font-size: 1.05rem;
	cursor: pointer;
	transition: filter .15s;
}
.chat-enviar-btn:hover { filter: brightness(1.1); }
.chat-enviar-btn:disabled { opacity: .5; cursor: default; }

@media (max-width: 640px) {
	.chat-panel { right: 0; left: 0; bottom: 0; width: auto; max-width: none; height: 85vh; border-radius: 18px 18px 0 0; border-bottom: 0; }
	.chat-fab { right: 14px; bottom: 14px; }
	/* Con el panel abierto (bottom-sheet) el FAB ✕ flotaba encima del botón
	   enviar del composer: se oculta y se cierra con la ✕ del encabezado. */
	.chat-widget.chat-abierto .chat-fab { display: none; }
	.chat-enviar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}


/* Botones + utilidades facturas */
.boton { display:inline-flex; align-items:center; gap:8px; border-radius:10px; border:1.5px solid var(--borde); background:var(--caja); color:var(--texto); padding:8px 12px; font-weight:600; font-size:13px; cursor:pointer; text-decoration:none; }
.boton:hover { filter:brightness(1.05); }
.boton-primario { border-color:color-mix(in srgb, var(--ambar) 55%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--ambar) 25%, transparent) inset; }
.boton-secundario { opacity:.9; }
.boton-peligro { border-color:color-mix(in srgb, var(--peligro) 45%, transparent); color:var(--peligro-txt); }
.boton-sm { padding:6px 10px; font-size:12px; }
.boton-imprimir { }

.card { background:var(--caja); border:1.5px solid var(--borde); border-radius:12px; padding:16px; }

.modal-contenido { background:var(--caja); border:1.5px solid var(--borde); border-radius:14px; padding:18px; color:var(--texto); width:min(560px, calc(100% - 20px)); margin:40px auto; }
.modal-acciones { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }

.factura-card { background:linear-gradient(180deg, color-mix(in srgb, var(--ambar) 14%, var(--caja)), var(--caja)); border:1.5px solid color-mix(in srgb, var(--ambar) 35%, transparent); border-radius:12px; padding:24px; }

.btn-editar, .btn-eliminar, .btn-email { }
/* 🎃🎄 ESTILO POR TEMPORADA (sutil) */
html[data-temporada="halloween"] {
  --topbar-bg: radial-gradient(1000px 100% at 50% 0, color-mix(in srgb, #ff6b1c 30%, #0a101d), #0a101d);
  --marca: #ff6b1c;
  --marca-alto: color-mix(in srgb, #ff9e40 70%, white 10%);
  --marca-sombra: color-mix(in srgb, #9d4edd 40%, transparent);
}
html[data-temporada="halloween"] .topbar { border-bottom: 1px solid color-mix(in srgb, #ff6b1c 40%, transparent); }
html[data-temporada="halloween"] .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 18% 12%, #f4e06a 80%, transparent),
    radial-gradient(2px 2px at 82% 18%, #ff9e40 80%, transparent),
    radial-gradient(1.8px 1.8px at 35% 24%, #ffd166 80%, transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, #ff6b1c 30%, transparent));
  opacity: .45;
  mix-blend-mode: screen;
  animation: seasonFloat 22s ease-in-out infinite alternate;
}
html[data-temporada="halloween"] .hero-badge {
  background: linear-gradient(90deg, color-mix(in srgb, #ff6b1c 24%, var(--caja)), var(--caja));
  border: 1px solid color-mix(in srgb, #ff6b1c 45%, transparent);
  box-shadow: 0 6px 24px -14px color-mix(in srgb, #9d4edd 70%, transparent);
}

html[data-temporada="navidad"] {
  --topbar-bg: radial-gradient(1000px 100% at 50% 0, color-mix(in srgb, #3a5a40 28%, #0a101d), #0a101d);
  --marca: #e63946;
  --marca-alto: #f4a261;
  --marca-sombra: color-mix(in srgb, #457b9d 40%, transparent);
}
html[data-temporada="navidad"] .topbar { border-bottom: 1px solid color-mix(in srgb, #2a9d8f 40%, transparent); }
html[data-temporada="navidad"] .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.8px 2.6px at 10% 14%, #fff 90%, transparent),
    radial-gradient(1.6px 2.4px at 24% 8%, #e0fbfc 90%, transparent),
    radial-gradient(1.8px 2.6px at 38% 18%, #fff 90%, transparent),
    radial-gradient(1.6px 2.4px at 52% 12%, #e0fbfc 90%, transparent),
    radial-gradient(1.8px 2.6px at 68% 20%, #fff 90%, transparent),
    radial-gradient(1.6px 2.4px at 82% 10%, #e0fbfc 90%, transparent),
    radial-gradient(1.8px 2.6px at 92% 16%, #fff 90%, transparent);
  opacity: .28;
  mix-blend-mode: screen;
  animation: seasonSnow 32s linear infinite;
}
html[data-temporada="navidad"] .hero-badge {
  background: linear-gradient(90deg, color-mix(in srgb, #2a9d8f 20%, var(--caja)), var(--caja));
  border: 1px solid color-mix(in srgb, #2a9d8f 45%, transparent);
  box-shadow: 0 6px 24px -14px color-mix(in srgb, #e63946 70%, transparent);
}

@keyframes seasonFloat {
  from { transform: translateY(0px); opacity: .42; }
  to { transform: translateY(-8px); opacity: .5; }
}
@keyframes seasonSnow {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 120px, 0 160px, 0 140px, 0 180px, 0 130px, 0 170px, 0 150px; }
}

/* ── App de cliente · chrome estilo kernelshield ───────────────────────── */
/* Sidebar azul noche fija + área de contenido, en reemplazo del topbar y
   la cabecera públicas para dashboard, perfil, staff, admin y facturas.
   La paleta es la de Kyvex (azul noche #0a101d, acento ámbar). */

body.con-panel { background: var(--fondo-2); }

.panel-app {
	display: grid;
	grid-template-columns: 258px minmax(0, 1fr);
	min-height: 100vh;
}

.panel-side {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 20px 12px 16px;
	background: #0a101d;
	border-right: 1px solid #16223a;
	color: #b9c5dd;
}

.p-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 10px 14px;
	color: #fff;
	font-family: var(--fuente-display);
	font-weight: 700;
	letter-spacing: -.01em;
}
.p-brand:hover { color: #fff; text-decoration: none; }
.p-brand img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px #22314f, 0 8px 22px -10px var(--sombra-marca); }

.p-rotulo {
	margin: 14px 12px 5px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6c7ea6;
}

.p-nav { display: flex; flex-direction: column; gap: 2px; }
.p-nav a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border-left: 3px solid transparent;
	border-radius: 0 10px 10px 0;
	color: #b9c5dd;
	font-size: .92rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.p-nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.p-nav a.activo { background: rgba(255, 255, 255, .07); border-left-color: var(--ambar); color: #fff; font-weight: 600; }
.p-nav a .ico { flex: 0 0 auto; font-size: 1.05rem; opacity: .9; }

.p-who {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: grid;
	gap: 10px;
}
.p-user { display: flex; align-items: center; gap: 10px; padding: 0 6px; min-width: 0; }
.p-user-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid rgba(255, 255, 255, .18); }
.p-user-ini { display: grid; place-items: center; background: linear-gradient(135deg, var(--marca), var(--marca-alto)); color: #fff; font-weight: 700; font-size: .95rem; }
.p-user-txt { min-width: 0; line-height: 1.3; }
.p-user-nombre { margin: 0; color: #fff; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-user-sub { margin: 0; color: #8ea0c4; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.p-acciones { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.panel-side .btn-tema { border-color: rgba(255, 255, 255, .18); background: transparent; color: #dbe4f5; }
.panel-side .btn-tema:hover { border-color: var(--info-fuerte); color: var(--info-fuerte); }
.panel-side .dd-btn { border-color: rgba(255, 255, 255, .18); background: transparent; color: #dbe4f5; }
.panel-side .dd-btn:hover, .panel-side .dd.dd-abierto .dd-btn { border-color: var(--info-fuerte); color: var(--info-fuerte); }

.p-salir {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border-radius: 99px;
	border: 1.5px solid rgba(255, 255, 255, .18);
	background: transparent;
	color: #dbe4f5;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.p-salir:hover { border-color: var(--peligro); color: #fca5a5; }

.panel-area { min-width: 0; display: flex; flex-direction: column; }
.panel-area > .panel-main { flex: 1; }

/* Páginas "de sección" dentro del app (perfil, staff, admin, facturas) */
.panel-area .seccion { border-top: 0; padding: 26px 0 56px; }
.panel-area .seccion-titulo { text-align: left; font-size: clamp(1.3rem, 2.6vw, 1.65rem); }
.panel-area .auth-caja { margin: 4px auto 0; }

/* Barra compacta del dashboard (chip de estado + moneda) */
.panel-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.panel-barra .campo-inline { margin-left: auto; }

/* Pie mínimo del app */
.panel-pie { margin-top: auto; border-top: 1px solid color-mix(in srgb, var(--borde) 70%, transparent); padding: 16px 0 22px; }
.panel-pie-int { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

/* El subnav del dashboard ya no flota bajo un topbar fijo */
.panel-area .subnav { top: 0; }

@media (max-width: 900px) {
	.panel-app { display: block; }
	.panel-side {
		position: sticky;
		top: 0;
		z-index: 60;
		height: auto;
		flex-direction: row;
		align-items: center;
		gap: 6px;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 9px 12px;
		border-right: 0;
		border-bottom: 1px solid #16223a;
	}
	.p-brand { padding: 0 8px 0 2px; }
	.p-brand span { display: none; }
	.p-brand img { width: 30px; height: 30px; }
	.p-rotulo { display: none; }
	.p-nav { flex-direction: row; gap: 2px; }
	.p-nav a { border-left: 0; border-bottom: 3px solid transparent; border-radius: 8px; padding: 8px 11px; }
	.p-nav a.activo { border-bottom-color: var(--ambar); border-radius: 8px 8px 6px 6px; }
	.p-nav-admin { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 6px; margin-left: 2px; }
	.p-who { margin: 0 0 0 auto; padding: 0 0 0 8px; border-top: 0; display: flex; align-items: center; gap: 8px; }
	.p-user-txt, .p-salir span { display: none; }
	.p-user-av { width: 32px; height: 32px; }
	.p-salir { padding: 8px 9px; }
	.panel-area .subnav { top: 58px; }
}