/*
 * La ficha pública del vehículo.
 *
 * El look de la ficha de Mi-Contacto (Alex, 2026-09-29): fondo gris, una
 * barra con el logo, banda carbón arriba y abajo y los datos en paneles
 * blancos; filas etiqueta → valor y el VIN soldado a su código de barras.
 *
 * Carbón y dorado, no la paleta del dueño: aquí NO hay diseños a elegir. La
 * tarjeta de contacto es de quien la reparte y por eso se pinta; la ficha del
 * vehículo se lee de pie, con mala luz y en diez segundos, y para eso hay una
 * sola respuesta buena. Un vehículo tampoco tiene marca propia que respetar.
 *
 * Móvil primero. Sin compilar: en este servidor no hay Node, así que un paso de
 * build sería una pieza que nadie puede reproducir.
 *
 * Accesibilidad, y no como añadido:
 *   · el foco SIEMPRE se ve, también con ratón
 *   · 44 px de zona táctil en todo lo que se toca
 *   · contraste AA sobre el carbón, comprobado con el dorado y con el gris
 *   · se respeta prefers-reduced-motion
 *
 * IMPRESIÓN: la hoja de @media print existe porque la ficha SE IMPRIME de
 * verdad. El PDF de dos tarjetas es para la billetera; esto es para pegar en la
 * pared del taller. Se despliega la ficha completa aunque estuviera plegada.
 */

.poc-vin-page {
	--poc-vin-carbon: #131312;
	--poc-vin-gold: #d8b368;
	--poc-vin-gold-text: #8f6b24;
	--poc-vin-cream: #fbf6ec;
	--poc-vin-bg: #f0f2f5;
	--poc-vin-ink: #16283f;
	--poc-vin-muted: #51617a;
	--poc-vin-line: #dfe5ec;

	margin: 0;
	background: var(--poc-vin-bg);
	color: var(--poc-vin-ink);
	font-family: var(--poc-font-sans);
}

.poc-vin-shell {
	max-width: 560px;
	margin: 0 auto;
	padding: 0 14px 40px;
}

/* ── La barra: el logo y «Entrar», nada más ─────────────────────────────── */

.poc-vin-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 4px;
}
/* La marca a 40 px y 34 en el móvil, como la cabecera del sitio (c73d7a5,
   Alex 2026-10-14): a 26 px el punto NFC del centro medía 2,5 px. */
.poc-vin-top .poc-brand { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 44px; color: var(--poc-vin-ink); font-size: 1.375rem; letter-spacing: -0.015em; text-decoration: none; }
.poc-vin-top .poc-brand .poc-logo { flex: none; width: 40px; height: 40px; color: var(--poc-vin-ink); }
@media (max-width: 640px) {
	.poc-vin-top .poc-brand { gap: 0.55rem; font-size: 1.1875rem; }
	.poc-vin-top .poc-brand .poc-logo { width: 34px; height: 34px; }
}
.poc-vin-top .poc-brand__word b,
.poc-vin-top .poc-brand__word i { font-style: normal; font-weight: 800; color: var(--poc-vin-ink); }
.poc-vin-account {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--poc-vin-line);
	border-radius: 999px;
	background: #fff;
	color: var(--poc-vin-ink);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}
.poc-vin-account:hover { border-color: var(--poc-vin-ink); }

/*
 * El selector de idioma (Alex, 2026-10-01: «todas las interfaces deberían
 * tenerlo»). Mismo marcado que el de la cabecera del sitio —`Marketing::
 * lang_menu()`—, pero esta página no carga la hoja del escaparate.
 */
.poc-vin-top__end { display: flex; align-items: center; gap: 8px; }
.poc-vin-top .poc-langmenu {
	--poc-lm-ink: var(--poc-vin-ink);
	--poc-lm-muted: #5b6b80;
	--poc-lm-line: var(--poc-vin-line);
	--poc-lm-surface: #fff;
	--poc-lm-soft: #f3f5f8;
	--poc-lm-shadow: 0 12px 32px rgb(13 27 42 / 16%);
}

.poc-vin { display: block; }

/*
 * Lo que ve el dueño con sesión, encima de la ficha (A-116): no es parte de
 * ella. Crema con raya dorada, como una nota pegada, y fuera de la impresión.
 */
.poc-vin-owner {
	margin: 2px 0 14px;
	padding: 12px 16px;
	border-left: 4px solid var(--poc-vin-gold);
	border-radius: 12px;
	background: var(--poc-vin-cream);
	color: var(--poc-vin-ink);
	font-size: 14px;
	line-height: 1.5;
}

.poc-vin-owner p { margin: 0 0 6px; }
.poc-vin-owner p:last-child { margin-bottom: 0; }

.poc-vin-owner__h {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
}

.poc-vin-owner__h svg { flex: none; color: var(--poc-vin-gold-text); }

.poc-vin-owner a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--poc-vin-ink);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Banda carbón: qué carro es y las tres acciones ─────────────────────── */

.poc-vin-hero {
	margin: 2px 0 14px;
	padding: 22px 20px 20px;
	border-radius: 18px;
	background: var(--poc-vin-carbon);
	color: #fff;
}

/*
 * La cinta de cortesía (Alex, 2026-10-01): una banda dorada a todo el ancho del
 * hero, pegada a su canto de arriba. Texto en la tinta del oro: 9:1 sobre
 * `--poc-vin-gold`. El nombre del taller lo pone quien reparte y puede ser
 * largo: la línea se parte, no se corta.
 */
.poc-vin-courtesy {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -22px -20px 18px;
	padding: 10px 20px;
	border-radius: 18px 18px 0 0;
	background: var(--poc-vin-gold);
	color: var(--poc-accent-ink, #1e1600);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}
.poc-vin-courtesy svg { flex: none; }

.poc-vin-photo {
	display: block;
	width: 100%;
	max-height: 240px;
	object-fit: cover;
	margin: 0 0 16px;
	border-radius: 12px;
}

.poc-vin-eyebrow {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--poc-vin-gold);
}
.poc-vin-eyebrow span { white-space: nowrap; }

.poc-vin-title {
	margin: 0 0 14px;
	font-size: clamp(24px, 6vw, 32px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
}

.poc-vin-sale { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.poc-vin-price { font-size: 20px; font-weight: 800; color: #fff; }
.poc-vin-badge { padding: 3px 10px; border-radius: 999px; background: var(--poc-vin-gold); color: var(--poc-vin-carbon); font-size: 12px; font-weight: 800; }
.poc-vin-badge--sold { background: rgba(255, 255, 255, 0.16); color: #fff; }
/* Llamar a quien vende: solo mientras está «En venta». Relleno, porque es
   lo que vino a hacer quien escanea el cartel del parabrisas. */
.poc-vin-seller { margin: 0 0 14px; }
.poc-vin-call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--poc-vin-gold);
	color: var(--poc-vin-carbon);
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
}
.poc-vin-call svg { width: 18px; height: 18px; }

.poc-vin-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.poc-vin-actions button {
	/* Crecen para llenar su fila: en español y portugués el tercero no cabía
	   y se quedaba solo, pequeño, en una segunda línea. */
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 9px 18px;
	border: 1px solid rgba(216, 179, 104, 0.5);
	border-radius: 999px;
	background: transparent;
	color: var(--poc-vin-gold);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.poc-vin-actions button:hover { background: rgba(216, 179, 104, 0.12); }
/* El dueño con sesión: registrar un servicio. Relleno: es SU acción aquí. */
.poc-vin-actions .poc-vin-log-link {
	flex: 1 1 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--poc-vin-gold);
	color: var(--poc-vin-carbon);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}
.poc-vin-actions .poc-vin-log-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.poc-vin-actions svg { flex: none; }
/* El de instalar lo crea el JS sin icono: se le pone aquí, con máscara. */
.poc-vin-install::before {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Paneles blancos ────────────────────────────────────────────────────── */

.poc-vin-panel {
	margin: 0 0 14px;
	padding: 18px 18px 16px;
	border: 1px solid var(--poc-vin-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 14px 34px -22px rgba(8, 26, 51, 0.25);
}

.poc-vin-h {
	display: block;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--poc-vin-gold);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--poc-vin-muted);
}

/* Filas etiqueta → valor, dos columnas desde 520 px (la referencia de
   Mi-Contacto es AutoZone). Sin fichas: ninguna fila puede quedar huérfana. */
.poc-vin-chips {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 28px;
	margin: 0;
	padding: 0;
}
@media (min-width: 520px) {
	.poc-vin-chips { grid-template-columns: 1fr 1fr; }
	/* Con un número impar de datos, el último ocupa la fila: sin huérfana. */
	.poc-vin-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.poc-vin-chip {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 9px 2px;
	border-bottom: 1px solid var(--poc-vin-line);
}
.poc-vin-chip dt {
	flex: none;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--poc-vin-muted);
	white-space: nowrap;
}
.poc-vin-chip dd {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	text-align: right;
	color: var(--poc-vin-ink);
	overflow-wrap: anywhere;
}

/* ── El VIN, protagonista: una placa con su código de barras ────────────── */

/* Suelta, debajo de la banda del título (2026-10-02): mismo hueco que un panel. */
.poc-vin-plate {
	margin: 0 0 14px;
	border-radius: 14px;
	box-shadow: 0 14px 34px -22px rgba(8, 26, 51, 0.25);
}
.poc-vin-id {
	position: relative;
	padding: 12px 16px 10px;
	border: 1.5px solid var(--poc-vin-gold);
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	background: var(--poc-vin-cream);
}
/* Sin código de barras la placa cierra sola. */
.poc-vin-id--solo { border-bottom: 1.5px solid var(--poc-vin-gold); border-radius: 14px; }
.poc-vin-id-label {
	margin: 0 0 3px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--poc-vin-muted);
}
.poc-vin-id-value {
	margin: 0;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	/* Mínimo 17 y no 19: a 320 px los 17 caracteres medían 219,6 px en una
	   caja de 220 y el último saltaba solo a otra línea. */
	font-size: clamp(17px, 5.6vw, 25px);
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.15;
	color: var(--poc-vin-carbon);
	overflow-wrap: anywhere;
}
/* Copiar el VIN: icono pequeño en la esquina, a la altura de la etiqueta. */
.poc-vin-copy {
	position: absolute;
	top: 4px;
	right: 6px;
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--poc-vin-muted);
	cursor: pointer;
}
.poc-vin-copy[hidden] { display: none; }
.poc-vin-copy:hover { color: var(--poc-vin-carbon); background: rgba(0, 0, 0, 0.05); }
.poc-vin-copy svg { width: 16px; height: 16px; }
.poc-vin-copy .poc-vin-copy-ok { display: none; }
.poc-vin-copy.is-copied { color: #1f7a4d; }
.poc-vin-copy.is-copied .poc-vin-copy-i { display: none; }
.poc-vin-copy.is-copied .poc-vin-copy-ok { display: inline; }
.poc-vin-barcode-wrap {
	margin: 0;
	padding: 12px 14px 8px;
	border: 1.5px solid var(--poc-vin-gold);
	border-top: 0;
	border-radius: 0 0 14px 14px;
	background: #fff;
}
.poc-vin-barcode-wrap svg { display: block; width: 100%; height: auto; max-height: 96px; }
.poc-vin-barcode-hint,
.poc-vin-source {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--poc-vin-muted);
	text-align: center;
}

/* ── Mantenimiento, notas y la ficha completa ───────────────────────────── */

.poc-vin-rows { margin: 0; padding: 0; }
.poc-vin-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 8px 2px;
	border-bottom: 1px solid var(--poc-vin-line);
	font-size: 14px;
}
.poc-vin-row dt { color: var(--poc-vin-muted); }
.poc-vin-row dd { margin: 0; font-weight: 700; text-align: right; color: var(--poc-vin-ink); overflow-wrap: anywhere; }
.poc-vin-notes p { margin: 0; line-height: 1.6; }
/* El historial: la fecha en una línea; el detalle se parte él (2026-10-14). */
.poc-vin-history .poc-vin-row dt { white-space: nowrap; }

.poc-vin-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	font-size: 15px;
	font-weight: 700;
	color: var(--poc-vin-ink);
	cursor: pointer;
	list-style: none;
}
.poc-vin-details summary::-webkit-details-marker { display: none; }
.poc-vin-details summary::after { content: "⌄"; font-size: 18px; line-height: 1; color: var(--poc-vin-muted); }
.poc-vin-details[open] summary::after { content: "⌃"; }
.poc-vin-sheet-group {
	margin: 1rem 0 0.15rem;
	color: var(--poc-vin-muted);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.poc-vin-empty,
.poc-vin-held-msg {
	padding: 24px;
	border: 1px dashed var(--poc-vin-line);
	border-radius: 18px;
	background: #fff;
	color: var(--poc-vin-muted);
	text-align: center;
}

/* ── Cierre: banda carbón, espejo de la de arriba ───────────────────────── */

.poc-vin-ft {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 2px;
	padding: 18px 20px;
	border-radius: 18px;
	background: var(--poc-vin-carbon);
}
.poc-vin-ft-reco {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.86);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}
.poc-vin-ft-reco svg { flex: none; color: var(--poc-vin-gold); }
.poc-vin-ft-brand { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.62); }
.poc-vin-ft-brand a { color: var(--poc-vin-gold); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-decoration: none; }
.poc-vin-ft-brand a:hover { text-decoration: underline; text-underline-offset: 3px; }
.poc-vin-ft-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--poc-vin-gold);
	color: var(--poc-vin-carbon);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}
.poc-vin-ft-cta:hover { filter: brightness(1.06); color: var(--poc-vin-carbon); }
.poc-vin-ft-refer {
	flex-basis: 100%;
	margin: 0;
	text-align: right;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.62);
	text-wrap: balance;
}
.poc-vin-ft-refer button {
	min-height: 44px;
	padding: 0 2px;
	border: 0;
	background: none;
	color: var(--poc-vin-gold);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
@media (max-width: 480px) {
	.poc-vin-ft { justify-content: center; text-align: center; }
	.poc-vin-ft-refer { text-align: center; }
	.poc-vin-ft-reco { justify-content: center; }
	/* La pregunta en su línea y el enlace en la suya: dentro del mismo
	   renglón, los 44 px táctiles del botón separaban las dos líneas de la
	   pregunta (es/fr a 390 px). */
	.poc-vin-ft-refer button { display: block; margin: 0 auto; }
	.poc-vin-ft-cta { width: 100%; justify-content: center; }
}

/* Los legales, pequeños y al final: la ficha no lleva el pie del sitio. */
.poc-vin-legal { margin-top: 18px; }
.poc-vin-legal .poc-legal-links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.poc-vin-legal .poc-legal-links a,
.poc-vin-legal .poc-legal-links .poc-link-btn { display: inline-flex; align-items: center; min-height: 44px; color: var(--poc-vin-muted); font-size: 12.5px; text-decoration: none; }

/* ── Foco visible. Siempre, también con ratón ───────────────────────────── */

.poc-vin-page :focus-visible {
	outline: 3px solid var(--poc-vin-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.poc-vin-page * {
		transition: none !important;
		animation: none !important;
	}
}

/* ── Impresión: se pega en la pared del taller ──────────────────────────── */

@media print {
	.poc-vin-page { background: #fff; }
	.poc-vin-shell { padding: 0; }
	.poc-vin-top,
	.poc-vin-owner,
	.poc-vin-actions,
	.poc-vin-copy,
	.poc-vin-ft,
	.poc-vin-legal { display: none !important; }
	.poc-vin-panel { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; }
	.poc-vin-plate { box-shadow: none; break-inside: avoid; }
	.poc-vin-hero { border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.poc-vin-courtesy { border-radius: 0; }
	/* Lo plegado se despliega: si se imprime, se imprime entero. */
	.poc-vin-details .poc-vin-sheet-body { display: block !important; }
	.poc-vin-details summary::after { content: none; }
}