/* ==========================================================================
   Credencial online v2 — laminated ID with chrome emblem, diffraction foil,
   guilloche security print, microtext and a live clock.
   JS drives: --mx/--my (light position, %), --rx/--ry (tilt), --hue (foil
   phase), --sx/--sy (floor shadow offset, px), --lit (0–1 light intensity).
   ========================================================================== */
.cnp-cred {
	--mx: 30%; --my: 30%; --rx: 0deg; --ry: 0deg; --hue: 0deg; --sx: 0px; --sy: 0px; --lit: .55;
	--metal-1: #59676a; --metal-2: #f6f9f9; --metal-3: #8b9798; --metal-4: #ffffff; --metal-5: #6b787a; --metal-6: #d9e1e1;
	display: grid; gap: 18px; justify-items: center;
}

/* ---------- Stage & card ---------- */
.cnp-cred__stage { position: relative; width: min(100%, 600px); perspective: 1600px; container-type: inline-size; padding-bottom: 4cqi; }
@media (prefers-reduced-motion: no-preference) {
	.cnp-cred__stage { animation: cnp-cred-in 1.1s cubic-bezier(.16,1,.3,1) both; }
	@keyframes cnp-cred-in {
		from { opacity: 0; transform: translateY(46px) rotateX(24deg) rotateZ(-3deg) scale(.94); }
		60% { opacity: 1; }
	}
}
.cnp-cred__floor {
	position: absolute; left: 10%; right: 10%; bottom: 0; height: 9cqi; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0,0,0,.42), transparent);
	transform: translate(var(--sx), var(--sy)); filter: blur(6px); transition: transform .25s ease-out;
}
.cnp-cred__card {
	position: relative; width: 100%; aspect-ratio: 85.6 / 54;
	transform-style: preserve-3d;
	transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip, 0deg)));
	transition: transform .7s cubic-bezier(.2,.8,.2,1);
	cursor: pointer; outline: none; border-radius: 4.2cqi;
}
.cnp-cred__card.is-tilting { transition: transform .1s linear; }
.cnp-cred__card.is-flipped { --flip: 180deg; }
.cnp-cred__card:focus-visible { outline: 3px solid var(--cnp-signal); outline-offset: 6px; }

.cnp-cred__face {
	position: absolute; inset: 0; overflow: hidden; border-radius: 4.2cqi; isolation: isolate;
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	color: #fff; font-family: var(--cnp-body);
	background:
		radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--cnp-petrol) 55%, #fff) 0%, transparent 55%),
		radial-gradient(80% 90% at 0% 100%, color-mix(in srgb, var(--cnp-petrol) 45%, #000) 0%, transparent 70%),
		linear-gradient(155deg, var(--cnp-petrol) 0%, color-mix(in srgb, var(--cnp-petrol) 50%, var(--cnp-ink)) 100%);
	box-shadow: 0 34px 60px -30px rgba(0,0,0,.6), 0 12px 24px -14px rgba(0,0,0,.4);
}
.cnp-cred__back { transform: rotateY(180deg); }

/* Security linework */
.cnp-cred__guilloche {
	position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
	color: rgba(255,255,255,.13);
}

/* ---------- Chrome emblem ---------- */
.cnp-cred__chrome, .cnp-cred__chrome-holo {
	position: absolute; z-index: 1; pointer-events: none;
	width: 50cqi; aspect-ratio: 1; right: -6cqi; top: 12.5cqi;
	-webkit-mask: var(--emblem) center / contain no-repeat; mask: var(--emblem) center / contain no-repeat;
}
.cnp-cred__chrome {
	background:
		linear-gradient(calc(118deg + var(--hue) / 10),
			var(--metal-1) 0%, var(--metal-2) 14%, var(--metal-3) 27%, var(--metal-4) 39%,
			var(--metal-5) 52%, var(--metal-6) 66%, var(--metal-1) 80%, var(--metal-2) 92%, var(--metal-3) 100%);
	background-size: 260% 260%;
	background-position: var(--mx) var(--my);
	opacity: calc(.07 + var(--lit) * .22);
	filter: drop-shadow(0 0 0 transparent);
}
.cnp-cred__chrome-holo {
	background:
		conic-gradient(from var(--hue) at var(--mx) var(--my), #ff6ad5, #7af7ff, #fff27a, #86ff9a, #8f8bff, #ff6ad5);
	mix-blend-mode: color-dodge;
	opacity: calc(var(--lit) * var(--lit) * .5);
}
.cnp-cred__chrome--back { width: 44cqi; right: 50%; top: 50%; translate: 50% -44%; opacity: .1; }

/* ---------- Header ---------- */
.cnp-cred__head {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2.4cqi;
	padding: 4.2cqi 5cqi 0;
}
.cnp-cred__emblem {
	width: 9.4cqi; aspect-ratio: 1; border-radius: 50%;
	background: #fff; display: grid; place-items: center;
	box-shadow: 0 0 0 .45cqi rgba(255,255,255,.18), 0 .8cqi 1.6cqi rgba(0,0,0,.35);
}
.cnp-cred__emblem img { width: 88%; height: 88%; object-fit: contain; }
.cnp-cred__org { display: grid; gap: .5cqi; min-width: 0; }
.cnp-cred__org b { font: 800 4.1cqi/1 var(--cnp-display); font-stretch: 118%; letter-spacing: -.01em; }
.cnp-cred__org small { font-size: 1.45cqi; line-height: 1.25; opacity: .72; max-width: 34cqi; }
.cnp-cred__kind { display: grid; justify-items: end; gap: .9cqi; font: 500 1.9cqi/1.2 var(--cnp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cnp-signal); text-align: right; }
.cnp-cred__live { display: inline-flex; align-items: center; gap: .9cqi; font-size: 1.55cqi; letter-spacing: .08em; color: rgba(255,255,255,.85); }
.cnp-cred__live i { width: 1.2cqi; height: 1.2cqi; border-radius: 50%; background: #2ee88a; box-shadow: 0 0 0 0 rgba(46,232,138,.6); animation: cnp-live 1.6s ease-out infinite; }
@keyframes cnp-live { 70% { box-shadow: 0 0 0 1.2cqi rgba(46,232,138,0); } 100% { box-shadow: 0 0 0 0 rgba(46,232,138,0); } }
.cnp-cred__live time { font-variant-numeric: tabular-nums; }

/* ---------- Identity ---------- */
.cnp-cred__body { position: relative; z-index: 2; display: flex; gap: 4.2cqi; align-items: center; padding: 3.6cqi 30cqi 0 5cqi; }
.cnp-cred__photo {
	position: relative; flex: none; width: 19cqi; aspect-ratio: 4/5; border-radius: 2.2cqi;
	background: rgba(255,255,255,.12); display: grid; place-items: center;
}
.cnp-cred__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cnp-cred__photo span { font: 800 7cqi/1 var(--cnp-display); font-stretch: 120%; color: rgba(255,255,255,.9); }
.cnp-cred__photo::after {
	/* holographic frame around the photo */
	content: ""; position: absolute; inset: -.55cqi; border-radius: 2.7cqi; padding: .55cqi;
	background: conic-gradient(from var(--hue), #ff6ad5, #7af7ff, #fff27a, #86ff9a, #8f8bff, #ff6ad5);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: calc(.35 + var(--lit) * .5);
}
.cnp-cred__id { display: grid; gap: 1cqi; min-width: 0; }
.cnp-cred__label { font: 500 1.9cqi/1.2 var(--cnp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cnp-signal); }
.cnp-cred__name {
	font: 800 5.8cqi/1 var(--cnp-display); font-stretch: 112%; letter-spacing: -.02em; overflow-wrap: anywhere;
	background: linear-gradient(100deg, #fff 30%, #d8f1ee 50%, #fff 70%) 0 0 / 250% 100%;
	background-position: var(--mx) 0;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	text-shadow: 0 .2cqi .6cqi rgba(0,0,0,.18);
}
.cnp-cred__dni { font: 500 2.6cqi/1.2 var(--cnp-mono); letter-spacing: .08em; }
.cnp-cred__dni em { font-style: normal; opacity: .6; }
.cnp-cred__work { font-size: 2.7cqi; font-weight: 600; opacity: .92; }

/* ---------- Footer ---------- */
.cnp-cred__foot { position: absolute; z-index: 2; left: 5cqi; right: 5cqi; bottom: 5.6cqi; display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqi; }
.cnp-cred__status { display: grid; gap: 1.3cqi; justify-items: start; }
.cnp-cred__pill {
	display: inline-flex; align-items: center; gap: 1.1cqi; padding: 1.05cqi 2.2cqi 1.05cqi 1.8cqi; border-radius: 99px;
	font: 800 2.4cqi/1 var(--cnp-body); letter-spacing: .06em; text-transform: uppercase;
	background: linear-gradient(180deg, #45e095, #22b56d); color: #04261a;
	box-shadow: 0 .5cqi 1.4cqi -.4cqi rgba(34,181,109,.8), inset 0 1px 0 rgba(255,255,255,.5);
}
.cnp-cred__pill::before {
	content: ""; width: 2cqi; height: 2cqi; border-radius: 50%; flex: none;
	background: #04261a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%2345e095' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.is-vencida .cnp-cred__pill, .is-suspendida .cnp-cred__pill { background: linear-gradient(180deg, #ff8a7f, #e0483c); color: #3a0906; box-shadow: 0 .5cqi 1.4cqi -.4cqi rgba(224,72,60,.8), inset 0 1px 0 rgba(255,255,255,.5); }
.is-vencida .cnp-cred__pill::before, .is-suspendida .cnp-cred__pill::before { background: #3a0906; }
.is-sin_cursos .cnp-cred__pill { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.cnp-cred__until { font: 500 2.2cqi/1 var(--cnp-mono); letter-spacing: .05em; }
.cnp-cred__badges { display: flex; gap: .7cqi; align-items: center; }
.cnp-cred__badges .cnp-insignia { width: 6.6cqi; height: 6.6cqi; filter: drop-shadow(0 .4cqi .6cqi rgba(0,0,0,.35)); }
.cnp-cred__more { font: 500 2.1cqi/1 var(--cnp-mono); opacity: .8; }
.cnp-cred__verify-box { display: flex; align-items: flex-end; gap: 1.8cqi; }
.cnp-cred__ghost {
	/* secondary "ghost" portrait, like official IDs */
	position: relative; width: 8.6cqi; aspect-ratio: 4/5; border-radius: 1.2cqi; overflow: hidden; opacity: .42;
	mix-blend-mode: luminosity;
}
.cnp-cred__ghost img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3) brightness(1.2); }
.cnp-cred__ghost::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
.cnp-cred__qr { flex: none; width: 16cqi; aspect-ratio: 1; padding: 1.1cqi; background: #fff; border-radius: 1.6cqi; box-shadow: 0 .6cqi 1.4cqi rgba(0,0,0,.25); }
.cnp-cred__qr svg { display: block; width: 100%; height: 100%; }

/* ---------- Microtext ---------- */
.cnp-cred__micro {
	position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3.2cqi;
	display: flex; align-items: center; overflow: hidden; white-space: nowrap;
	background: rgba(0,0,0,.18); border-top: 1px solid rgba(255,255,255,.1);
	font: 500 1.2cqi/1 var(--cnp-mono); letter-spacing: .22em; color: color-mix(in srgb, var(--cnp-signal) 70%, transparent);
}
.cnp-cred__micro span, .cnp-cred__stripe span { display: inline-block; padding-left: 2cqi; }
@media (prefers-reduced-motion: no-preference) {
	.cnp-cred__micro span { animation: cnp-marquee 60s linear infinite; }
	@keyframes cnp-marquee { to { transform: translateX(-50%); } }
}

/* ---------- Light layers ---------- */
.cnp-cred__foil {
	position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background:
		repeating-linear-gradient(calc(110deg + var(--hue) / 8),
			rgba(255,90,210,0) 0%, rgba(255,90,210,.3) 3%, rgba(100,245,255,.3) 6%, rgba(255,245,110,.28) 9%, rgba(120,255,160,.26) 12%, rgba(150,140,255,.28) 15%, rgba(255,90,210,0) 18%),
		repeating-radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.14) 0 .12cqi, transparent .12cqi .5cqi);
	background-size: 200% 200%, auto;
	background-position: var(--mx) var(--my), 0 0;
	mix-blend-mode: color-dodge;
	opacity: calc(var(--lit) * .7);
	-webkit-mask: radial-gradient(65% 85% at var(--mx) var(--my), #000 0%, rgba(0,0,0,.2) 55%, transparent 90%);
	        mask: radial-gradient(65% 85% at var(--mx) var(--my), #000 0%, rgba(0,0,0,.2) 55%, transparent 90%);
}
.cnp-cred__glare {
	position: absolute; inset: 0; z-index: 4; pointer-events: none;
	background: radial-gradient(38% 52% at var(--mx) var(--my), rgba(255,255,255,.38), rgba(255,255,255,.06) 55%, transparent 75%);
	mix-blend-mode: soft-light;
}
.cnp-cred__rim {
	position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; padding: 1px;
	background: linear-gradient(calc(135deg + var(--hue) / 6), rgba(255,255,255,.75), rgba(255,255,255,.08) 30%, rgba(255,255,255,.04) 60%, rgba(255,255,255,.5));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---------- Back ---------- */
.cnp-cred__stripe {
	position: absolute; z-index: 2; left: 0; right: 0; top: 5cqi; height: 8.5cqi;
	display: flex; align-items: flex-end; overflow: hidden; white-space: nowrap;
	background:
		linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%),
		linear-gradient(180deg, #151b1c, #0a0e0f);
	font: 500 1.15cqi/1 var(--cnp-mono); letter-spacing: .22em; color: rgba(255,255,255,.28); padding-bottom: .8cqi;
}
.cnp-cred__back-in { position: absolute; z-index: 2; inset: 16cqi 6cqi 4.5cqi; display: flex; flex-direction: column; gap: 2.2cqi; }
.cnp-cred__back-head { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqi; }
.cnp-cred__back-head .cnp-cred__kind { display: block; }
.cnp-cred__code { font: 500 2.2cqi/1 var(--cnp-mono); letter-spacing: .12em; opacity: .85; }
.cnp-cred__hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4cqi; }
.cnp-cred__hist li { display: grid; grid-template-columns: auto 1fr; column-gap: 2.2cqi; align-items: center; padding-bottom: 1.4cqi; border-bottom: 1px dashed rgba(255,255,255,.2); }
.cnp-cred__hist .cnp-insignia { grid-row: span 2; width: 6.4cqi; height: 6.4cqi; }
.cnp-cred__hist-t { font: 700 2.6cqi/1.15 var(--cnp-display); font-stretch: 104%; }
.cnp-cred__hist-d { font: 500 1.95cqi/1.2 var(--cnp-mono); opacity: .8; }
.cnp-cred__hist li.is-off { opacity: .55; }
.cnp-cred__hist-more { margin: 0; font: 500 2cqi/1 var(--cnp-mono); opacity: .8; }
.cnp-cred__verify { margin: auto 0 0; font-size: 2.2cqi; opacity: .9; }

/* ---------- Actions ---------- */
.cnp-cred__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cnp-cred__dl { position: relative; }
.cnp-cred__menu {
	position: absolute; z-index: 20; left: 50%; top: calc(100% + 8px); translate: -50% 0; width: 290px;
	display: grid; padding: 6px; border-radius: 14px; background: var(--cnp-white);
	box-shadow: 0 20px 50px -18px rgba(0,0,0,.45), 0 0 0 1px var(--cnp-line);
}
.cnp-cred__menu[hidden] { display: none; }
.cnp-cred__menu button {
	display: grid; gap: 2px; text-align: left; padding: 11px 14px; border: 0; border-radius: 10px;
	background: none; color: var(--cnp-ink); font: inherit; cursor: pointer;
}
.cnp-cred__menu button:hover, .cnp-cred__menu button:focus-visible { background: var(--cnp-mist); outline: none; }
.cnp-cred__menu b { font-weight: 700; }
.cnp-cred__menu span { font-size: .84rem; color: var(--cnp-muted); }
.cnp-cred__menu button[aria-busy="true"] b::after { content: " · generando…"; font-weight: 400; color: var(--cnp-muted); }
.cnp-cred__hint { margin: -4px 0 0; font-size: .85rem; color: var(--cnp-muted); text-align: center; max-width: 52ch; }

/* Detail (accessible + print) */
.cnp-cred__detail { width: min(100%, 760px); display: grid; gap: 18px; margin-top: 10px; }
.cnp-cred__verdict { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 12px; background: #dff3e4; color: #0f3d1f; }
.cnp-cred__verdict .cnp-icon { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #135c2b; color: #fff; flex: none; }
.is-vencida .cnp-cred__verdict, .is-suspendida .cnp-cred__verdict { background: #fde3e1; color: #5c1510; }
.is-vencida .cnp-cred__verdict .cnp-icon, .is-suspendida .cnp-cred__verdict .cnp-icon { background: #8c1d18; }
.is-sin_cursos .cnp-cred__verdict { background: var(--cnp-mist); color: var(--cnp-ink); }
.cnp-cred__verdict p { margin: 0; }
.cnp-cred__checked { display: block; margin-top: 6px; font: 500 .75rem/1.3 var(--cnp-mono); opacity: .75; }
.cnp-cred__timeline { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--cnp-ink); }
.cnp-cred__timeline li { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cnp-line); }
.cnp-cred__timeline li div { display: grid; gap: 2px; }
.cnp-cred__timeline strong { font: 700 1.05rem/1.25 var(--cnp-display); font-stretch: 104%; }
.cnp-cred__timeline strong a { color: inherit; }
.cnp-cred__timeline span { color: var(--cnp-muted); font-size: .9rem; }
.cnp-cred__timeline .cnp-cred__valid { font: 500 .78rem/1.3 var(--cnp-mono); text-transform: uppercase; letter-spacing: .04em; text-align: right; }
.cnp-cred__timeline .cnp-cred__valid b { display: block; color: var(--cnp-ink); font-size: .95rem; }
.cnp-cred__timeline li.is-off .cnp-cred__valid b { color: #8c1d18; }
@media (max-width: 560px) {
	.cnp-cred__timeline li { grid-template-columns: auto 1fr; }
	.cnp-cred__timeline .cnp-cred__valid { grid-column: 2; text-align: left; }
}
.cnp-cred__company { margin: 0; }

/* ---------- Verificador ---------- */
.cnp-verify { display: grid; gap: 18px; }
.cnp-verify__form label { display: block; margin-bottom: 8px; font-weight: 600; }
.cnp-verify__row { display: flex; gap: 10px; flex-wrap: wrap; }
.cnp-verify__row input {
	flex: 1 1 260px; min-height: 56px; padding: 0 18px; font: 500 1.15rem/1 var(--cnp-mono); letter-spacing: .04em;
	border: 2px solid var(--cnp-line); border-radius: 12px; background: var(--cnp-white); color: var(--cnp-ink); box-sizing: border-box;
}
.cnp-verify__row input:focus { outline: none; border-color: var(--cnp-petrol); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cnp-signal) 55%, transparent); }
.cnp-verify__row .cnp-btn { min-height: 56px; border-radius: 12px; }
.cnp-verify__result { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 20px; border-radius: 14px; background: var(--cnp-white); box-shadow: inset 0 0 0 1px var(--cnp-line), inset 6px 0 0 #2ec27e; }
.cnp-verify__result .cnp-btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 640px) { .cnp-verify__result { grid-template-columns: auto 1fr auto; } .cnp-verify__result .cnp-btn { grid-column: auto; } }
.cnp-verify__result.is-vencida, .cnp-verify__result.is-suspendida { box-shadow: inset 0 0 0 1px var(--cnp-line), inset 6px 0 0 #d93b30; }
.cnp-verify__result.is-empty { display: block; box-shadow: inset 0 0 0 1px var(--cnp-line), inset 6px 0 0 var(--cnp-muted); }
.cnp-verify__result.is-empty p { margin: 0; }
.cnp-verify__photo { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--cnp-mist); font: 800 1.4rem/1 var(--cnp-display); color: var(--cnp-petrol); }
.cnp-verify__photo img { width: 100%; height: 100%; object-fit: cover; }
.cnp-verify__info { display: grid; gap: 4px; min-width: 0; }
.cnp-verify__info strong { font: 800 1.35rem/1.15 var(--cnp-display); font-stretch: 108%; }
.cnp-verify__info > span:not(.cnp-verify__state) { color: var(--cnp-muted); }
.cnp-verify__state { font: 500 .78rem/1.2 var(--cnp-mono); letter-spacing: .08em; text-transform: uppercase; color: #135c2b; }
.is-vencida .cnp-verify__state, .is-suspendida .cnp-verify__state { color: #8c1d18; }
.cnp-verify__badges { display: flex; gap: 6px; margin-top: 4px; }


@media (prefers-reduced-motion: reduce) {
	.cnp-cred__card, .cnp-cred__floor { transition: none; }
	.cnp-cred__live i { animation: none; }
}
@media print {
	.cnp-cred__actions, .cnp-cred__hint, .site-header, .site-footer, .page-band { display: none !important; }
	.cnp-cred__stage { animation: none !important; }
	.cnp-cred__card { transform: none !important; }
	.cnp-cred__foil, .cnp-cred__glare, .cnp-cred__floor { display: none; }
	.cnp-cred__face { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cnp-cred__back { display: none; }
}
.cnp-cred__motion[hidden] { display: none; }