/* El carnet «tipo cédula» (carnet.js): lo usan la app y el panel. Todo se mide en --u = 1 % del ancho de la tarjeta. */
/* ------------------------------------------------------------------ el carnet «tipo cédula» (8-oct-2026): raíz .carnet-ci, todo en --u = 1 % del ancho */
.carnet-ci { container-type: inline-size; width: 100%; }
.carnet-ci__tarjeta {
	--u: 3.58px;                               /* respaldo si el navegador no conoce cqw (se ve bien a 358 px) */
	--ci-rojo: #dc1f26;                        /* rojo Ubipets: número, acentos, esquina */
	--ci-rojo2: #b3121a;                       /* rojo oscuro (sello) */
	--ci-tinta: #141517;                       /* negro de los valores */
	--ci-plomo: #2b2d31;                       /* plomo grafito: títulos, MRZ */
	--ci-gris: #6b6f76;                        /* etiquetas */
	--ci-gris2: #9a9ea5;                       /* textos secundarios */
	--ci-papel: #fbfbfc;                       /* fondo: de blanco roto... */
	--ci-papel2: #e4e5e8;                      /* ...a plomo claro */
	--ci-linea: #2b2d31;                       /* color del guilloché */
	--ci-linea-op: .16;                        /* fuerza del guilloché */
	--ci-esquina: rgba(220, 31, 38, .20);      /* degradado rojo de la esquina superior derecha */
	--ci-f-titulo: "Archivo", "Instrument Sans", system-ui, sans-serif;
	--ci-f-texto: "Instrument Sans", "Archivo", system-ui, sans-serif;
	--ci-f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
	position: relative; isolation: isolate; overflow: hidden;
	width: 100%; aspect-ratio: 856 / 540;
	border-radius: calc(var(--u) * 3.6);       /* 3,1 mm, como una tarjeta de verdad */
	background: linear-gradient(118deg, var(--ci-papel) 0%, #f1f1f3 48%, var(--ci-papel2) 100%);
	color: var(--ci-tinta);
	font-family: var(--ci-f-texto); font-size: calc(var(--u) * 3.6); line-height: 1.2;
	text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px rgba(20, 21, 23, .10), 0 16px 34px -16px rgba(20, 21, 23, .38);
}
@supports (width: 1cqw) { .carnet-ci__tarjeta { --u: 1cqw; } }
.carnet-ci__tarjeta * { box-sizing: border-box; }

/* Esquina roja y laminado (brillo diagonal) */
.carnet-ci__tarjeta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(62% 78% at 100% 0%, var(--ci-esquina) 0%, rgba(220, 31, 38, .07) 45%, rgba(220, 31, 38, 0) 72%); }
.carnet-ci__tarjeta::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
	background: linear-gradient(112deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .28) 47%, rgba(255, 255, 255, 0) 58%);
	mix-blend-mode: screen; }

/* Guilloché: SVG de líneas finas (una copia plomo en toda la tarjeta y otra roja solo en la esquina) */
.carnet-ci__fondo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none; }
.carnet-ci__l1 { stroke: var(--ci-linea); opacity: var(--ci-linea-op); }
.carnet-ci__l2 { stroke: var(--ci-rojo); opacity: .42; }

/* Franja blanquecina del MRZ, abajo */
.carnet-ci__banda { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: calc(var(--u) * 8.4); pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 38%, rgba(255, 255, 255, .62) 100%); }

/* Correlativo vertical del lateral izquierdo (se lee de abajo hacia arriba) */
.carnet-ci__lateral { position: absolute; z-index: 3; left: calc(var(--u) * 1.15); top: calc(var(--u) * 15.9); bottom: calc(var(--u) * 7.9);
	display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg);
	font: 500 calc(var(--u) * 2.3) / 1 var(--ci-f-mono); letter-spacing: .2em; color: var(--ci-plomo); opacity: .62; white-space: nowrap; }

/* Cabecera: emisor (logo en pastilla + leyenda) y, a la derecha, «CARNET DE MASCOTA» con el número en rojo */
.carnet-ci__cabecera { position: absolute; z-index: 3; left: calc(var(--u) * 5.6); right: calc(var(--u) * 4.2); top: calc(var(--u) * 3);
	height: calc(var(--u) * 9.2); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); }
.carnet-ci__emisor { display: flex; align-items: center; gap: calc(var(--u) * 1.7); min-width: 0; }
.carnet-ci__logo { flex: 0 0 auto; display: grid; place-items: center; height: calc(var(--u) * 8); padding: 0 calc(var(--u) * 1.5);
	border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 21, 23, .09), 0 1px 2px rgba(20, 21, 23, .12); }
.carnet-ci__logo img { display: block; height: calc(var(--u) * 5.7); width: auto; max-width: none; }
.carnet-ci__emisor-txt { display: flex; flex-direction: column; gap: calc(var(--u) * .45); min-width: 0; white-space: nowrap; }
.carnet-ci__emisor-txt b { font: 800 calc(var(--u) * 2.2) / 1 var(--ci-f-titulo); font-stretch: 108%; letter-spacing: .06em; text-transform: uppercase; color: var(--ci-plomo); }
.carnet-ci__emisor-txt span { font: 600 calc(var(--u) * 2.25) / 1 var(--ci-f-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--ci-gris); }
.carnet-ci__emisor-txt i { font: 500 calc(var(--u) * 2.35) / 1 var(--ci-f-texto); font-style: normal; color: var(--ci-gris2); }
.carnet-ci__titulo { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .9); text-align: right; flex: 0 0 auto; }
.carnet-ci__tipo { font: 800 calc(var(--u) * 2.5) / 1 var(--ci-f-titulo); font-stretch: 112%; letter-spacing: .07em; text-transform: uppercase; color: var(--ci-plomo); }
.carnet-ci__numero { font: 800 calc(var(--u) * 5.5) / 1 var(--ci-f-titulo); font-stretch: 112%; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--ci-rojo); }

/* Microtexto de seguridad (una línea de texto chiquito repetido) */
.carnet-ci__micro { position: absolute; z-index: 3; left: calc(var(--u) * 5.6); right: calc(var(--u) * 4.2); top: calc(var(--u) * 13.1);
	font: 500 calc(var(--u) * 2.2) / 1 var(--ci-f-mono); letter-spacing: .06em; white-space: nowrap; overflow: hidden; color: var(--ci-plomo); opacity: .36;
	-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }

/* Cuerpo: foto recortada a la izquierda y los campos al centro. Cinco filas (nombre · especie/sexo/edad/castrado · color/raza ·
   tatuaje/microchip · familia/registrado) medidas para que entre todo a 320 px de ancho; nada lleva puntos suspensivos salvo
   un dato absurdamente largo. Los largos se achican solos hasta entrar (ajustarCarnet, en app.js); el color puede ir en dos líneas. */
.carnet-ci__cuerpo { position: absolute; z-index: 3; left: calc(var(--u) * 5.6); right: calc(var(--u) * 4.2); top: calc(var(--u) * 15.9); bottom: calc(var(--u) * 7.9);
	display: grid; grid-template-columns: calc(var(--u) * 24) minmax(0, 1fr); column-gap: calc(var(--u) * 2.8); }
.carnet-ci__foto { position: relative; margin: 0; min-height: 0; }
.carnet-ci__foto img, .carnet-ci__sinfoto { position: absolute; inset: 0 0 auto 0; z-index: 1; width: 100%; aspect-ratio: 1 / 1; height: auto; display: block; object-fit: cover; object-position: 50% 12%;
	border-radius: calc(var(--u) * 2); box-shadow: 0 0 0 calc(var(--u) * .4) #fff, 0 calc(var(--u) * .9) calc(var(--u) * 1.8) rgba(20, 21, 23, .28); }   /* cuadrada, arriba de la columna; abajo va la huella */
.carnet-ci__sinfoto { padding: calc(var(--u) * 3); box-sizing: border-box; background: rgba(255, 255, 255, .7); color: var(--ci-gris); }
.carnet-ci__campos { margin: 0; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.carnet-ci__fila { display: flex; align-items: flex-start; gap: calc(var(--u) * 2.8); min-width: 0; }
.carnet-ci__campo { min-width: 0; flex: 0 1 auto; }
.carnet-ci__campo dt { font: 600 calc(var(--u) * 2.1) / 1.1 var(--ci-f-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--ci-gris); white-space: nowrap; }
.carnet-ci__campo dd { margin: calc(var(--u) * .2) 0 0; font: 600 calc(var(--u) * 3.5) / 1.15 var(--ci-f-texto); letter-spacing: -.005em; color: var(--ci-tinta);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carnet-ci__campo--nombre dd { font: 800 calc(var(--u) * 5.6) / 1.02 var(--ci-f-titulo); font-stretch: 100%; letter-spacing: -.015em; margin-top: calc(var(--u) * .3); }
.carnet-ci__campo--edad { flex: 0 1 auto; }
.carnet-ci__campo--color { flex: 1 1 0; }                                   /* el color toma todo lo que la raza no usa */
.carnet-ci__campo--color dd { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.carnet-ci__campo--raza { flex: 0 0 auto; max-width: 46%; }                /* la raza conserva su ancho (hasta un 46 %) y se achica sola si hace falta */
.carnet-ci__campo--tatuaje dd { font: 500 calc(var(--u) * 4.2) / 1.1 var(--ci-f-mono); letter-spacing: .04em; color: var(--ci-tinta); }
.carnet-ci__campo--chip { flex: 1 1 auto; }
.carnet-ci__campo--chip dd { font: 500 calc(var(--u) * 3.3) / 1.2 var(--ci-f-mono); letter-spacing: .02em; margin-top: calc(var(--u) * .45); }
.carnet-ci__campo--familia { flex: 1 1 0; }
.carnet-ci__campo--fecha { flex: 0 0 auto; }
.carnet-ci__fila--pie dd { font-size: calc(var(--u) * 3.2); }

/* Huella de gato en relieve plateado con crestas: va como un sello centrado debajo de la foto cuadrada (como la huella dactilar
   de la cédula, que va bajo la foto) */
.carnet-ci__huella { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--u) * 2.1); transform: translateX(-50%); width: calc(var(--u) * 11); height: calc(var(--u) * 11); display: block;
	filter: drop-shadow(0 calc(var(--u) * .35) calc(var(--u) * .6) rgba(20, 21, 23, .4)); }
/* El QR de la mascota bajo la foto, con la huella como sello en el medio (nivel H: el QR sigue leyéndose) */
.carnet-ci__qr { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--u) * .8); transform: translateX(-50%); width: calc(var(--u) * 13); height: calc(var(--u) * 13);
	padding: calc(var(--u) * .7); box-sizing: border-box; background: #fff; border-radius: calc(var(--u) * 1.4);
	box-shadow: 0 0 0 calc(var(--u) * .3) rgba(255, 255, 255, .9), 0 calc(var(--u) * .6) calc(var(--u) * 1.2) rgba(20, 21, 23, .2); }
.carnet-ci__qr svg.qr { display: block; width: 100%; height: 100%; }
.carnet-ci__qr-sello { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); display: grid; place-items: center; background: #fff; border-radius: 30%; }
.carnet-ci__qr .carnet-ci__huella { position: static; transform: none; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); filter: none; }
.carnet-ci__huella-sombra { fill: rgba(20, 21, 23, .16); }
.carnet-ci__huella-cuerpo { fill: url(#ci-plata); stroke: rgba(255, 255, 255, .9); stroke-width: .8; }
.carnet-ci__huella-crestas { fill: none; stroke: var(--ci-rojo); stroke-width: .95; opacity: .55; }

/* Línea tipo MRZ (decorativa) */
.carnet-ci__mrz { position: absolute; z-index: 3; left: calc(var(--u) * 5.6); right: calc(var(--u) * 4.2); bottom: calc(var(--u) * 1.1);
	display: grid; font: 500 calc(var(--u) * 2.6) / 1.18 var(--ci-f-mono); letter-spacing: .1em; color: var(--ci-plomo); white-space: nowrap; overflow: hidden;
	font-variant-ligatures: none; }

/* ---- Variante «perdida»: el fondo vira a rojo y lleva un sello de tinta ---- */
.carnet-ci--perdida .carnet-ci__tarjeta { --ci-papel: #fff6f6; --ci-papel2: #f3d6d8; --ci-linea: #b3121a; --ci-linea-op: .2; --ci-esquina: rgba(220, 31, 38, .42);
	background: linear-gradient(118deg, var(--ci-papel) 0%, #fbe9ea 48%, var(--ci-papel2) 100%); }
.carnet-ci--perdida .carnet-ci__l2 { opacity: .5; }
.carnet-ci--perdida .carnet-ci__micro { color: var(--ci-rojo2); opacity: .55; }
.carnet-ci--perdida .carnet-ci__lateral { color: var(--ci-rojo2); }
.carnet-ci--perdida .carnet-ci__huella-crestas { stroke: var(--ci-rojo2); }
.carnet-ci__sello { position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-6%, -34%) rotate(-9deg); pointer-events: none;
	display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5);
	padding: calc(var(--u) * 1.1) calc(var(--u) * 2.6) calc(var(--u) * 1.3);
	border: calc(var(--u) * .7) solid var(--ci-rojo2); border-radius: calc(var(--u) * 1.6);
	outline: calc(var(--u) * .25) solid var(--ci-rojo2); outline-offset: calc(var(--u) * .45);
	color: var(--ci-rojo2); mix-blend-mode: multiply; opacity: .82; filter: url(#ci-tinta); white-space: nowrap; }
.carnet-ci__sello b { font: 900 calc(var(--u) * 7.4) / 1 var(--ci-f-titulo); font-stretch: 118%; letter-spacing: .1em; text-transform: uppercase; }
.carnet-ci__sello i { font: 700 calc(var(--u) * 2.5) / 1 var(--ci-f-titulo); font-stretch: 110%; font-style: normal; letter-spacing: .22em; text-transform: uppercase; }
/* ===================================================== fin del carnet ===================================================== */
.carnet-ci { display: block; margin-top: 12px; text-decoration: none; color: inherit; }
.carnet-ci + .a-btn { margin-top: 10px; }
.carnet-ci__campo dd.vacio { color: var(--ci-gris2); }


/* ---- Reverso: QR grande con las instrucciones para quien la encuentra, los códigos en grande y los datos del registro ---- */
.carnet-ci--reverso .carnet-ci__micro { top: calc(var(--u) * 3.4); }
.carnet-ci__rev { position: absolute; z-index: 3; left: calc(var(--u) * 5.6); right: calc(var(--u) * 4.2); top: calc(var(--u) * 8); bottom: calc(var(--u) * 7.9);
	display: grid; grid-template-columns: calc(var(--u) * 30) minmax(0, 1fr); column-gap: calc(var(--u) * 3.5); align-items: start; }
.carnet-ci__rev-qr { margin: 0; text-align: center; }
.carnet-ci__rev-qr [data-qr] { width: calc(var(--u) * 30); height: calc(var(--u) * 30); padding: calc(var(--u) * 1); box-sizing: border-box; background: #fff; border-radius: calc(var(--u) * 2);
	box-shadow: 0 0 0 calc(var(--u) * .4) #fff, 0 calc(var(--u) * .9) calc(var(--u) * 1.8) rgba(20, 21, 23, .28); }
.carnet-ci__rev-qr svg.qr { display: block; width: 100%; height: 100%; }
.carnet-ci__rev-qr figcaption { margin-top: calc(var(--u) * 1.6); font: 500 calc(var(--u) * 2.3) / 1.1 var(--ci-f-mono); letter-spacing: .02em; color: var(--ci-plomo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carnet-ci__rev-txt { min-width: 0; display: flex; flex-direction: column; height: 100%; }
.carnet-ci__rev-txt > b { font: 800 calc(var(--u) * 4.2) / 1.1 var(--ci-f-titulo); letter-spacing: -.01em; color: var(--ci-tinta); }
.carnet-ci__rev-txt > p { margin: calc(var(--u) * 1.2) 0 0; font: 500 calc(var(--u) * 2.75) / 1.32 var(--ci-f-texto); color: var(--ci-plomo); }
.carnet-ci__rev-txt > p strong { font-weight: 700; color: var(--ci-rojo); }
.carnet-ci__rev-cod { display: flex; gap: calc(var(--u) * 4); margin: calc(var(--u) * 2.2) 0 0; }
.carnet-ci__rev-cod div { min-width: 0; }
.carnet-ci__rev-cod dt { font: 600 calc(var(--u) * 2.1) / 1.1 var(--ci-f-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--ci-gris); }
.carnet-ci__rev-cod dd { margin: calc(var(--u) * .3) 0 0; font: 500 calc(var(--u) * 4.4) / 1.1 var(--ci-f-mono); letter-spacing: .03em; color: var(--ci-tinta); white-space: nowrap; }
.carnet-ci__rev-cod dd.vacio { color: var(--ci-gris2); }
.carnet-ci__rev-txt > .carnet-ci__rev-reg { margin-top: auto; font: 500 calc(var(--u) * 2.3) / 1.3 var(--ci-f-texto); color: var(--ci-gris); }
.carnet-ci__rev-reg b { font-weight: 800; color: var(--ci-plomo); }