/**
 * Skin del portal de clientes — replica los tokens de marca del frontend
 * Next.js (ifcelectronic/src/app/globals.css): mismos hex, mismo skew
 * (-12deg/+12deg), mismos glows, mismo circuit-grid, misma tipografía
 * (Akira Super Bold para headings, Helvetica/Oblique para body).
 * Todo escopado bajo .ifc-portal para no afectar el resto del admin/tema.
 */

@font-face {
	font-family: 'IFC Akira';
	src: url('fonts/akira-super-bold.otf') format('opentype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IFC Helvetica';
	src: url('fonts/helvetica-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IFC Helvetica';
	src: url('fonts/helvetica-oblique.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'IFC Helvetica';
	src: url('fonts/helvetica-bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IFC Helvetica';
	src: url('fonts/helvetica-bold-oblique.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/*
 * Tokens del sistema «Placa iluminada» — ver docs/design/MASTER.md.
 *
 * Van en :root y NO en .ifc-portal. Las custom properties heredan hacia
 * abajo, así que declararlas en .ifc-portal las deja fuera del alcance de
 * cualquier regla que apunte a un ancestro — body.ifc-staff-shell y
 * body.ifc-cliente-shell son ancestros, no descendientes, y ahí
 * var(--ifc-ground) resolvía a nada: la declaración quedaba inválida y el
 * fondo caía a transparente, dejando el shell en blanco. Declarar tokens en
 * :root no pinta ni afecta nada por sí solo (son solo variables), y los deja
 * disponibles en todo el documento: shells, .ifc-portal y la plantilla de
 * certificado por igual.
 */
:root {

	/* --- Marca. Ya existían; --ifc-action-blue-light pasa a ser el azul de
	   texto (7.9:1 sobre el fondo), porque --ifc-action-blue da 4.2:1 y no
	   llega a AA: ese queda solo para relleno de botón y borde de control. --- */
	/* El navegador tiene que saber que esto es oscuro: sin `color-scheme` pinta
	   sus propias superficies en claro — barras de scroll, el desplegable nativo
	   de un <select>, los selectores de fecha. Era la costura más visible entre
	   el diseño y el chrome del navegador. */
	color-scheme: dark;

	/* Señal de "esto sigue hacia la derecha" para contenedores que desplazan en
	   horizontal. El color no importa, solo el canal alfa: negro es el tope opaco
	   idiomático de una máscara, no una decisión de paleta. */
	--ifc-mask-scroll-derecha: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);

	--ifc-tech-blue: #0f172a;
	--ifc-dark-base: #111827;
	--ifc-action-blue: #3974c9;
	--ifc-action-blue-light: #7fa8dd;
	--ifc-yellow: #efbe53;

	/* --- Rampa neutra, derivada de --ifc-tech-blue. Reemplaza los hex de
	   Tailwind slate que estaban escritos a mano por todo el archivo. --- */
	--ifc-ground: #0a0d12;
	--ifc-surface: #111722;
	--ifc-surface-2: #161d2b;
	--ifc-surface-3: #1b2333;
	--ifc-ink: #dde3ee;       /* 15.1:1 — reemplaza #e2e8f0 */
	--ifc-ink-2: #b9c2d1;     /* 10.4:1 — reemplaza #cbd5e1 */
	--ifc-ink-dim: #8b95a8;   /*  6.5:1 — reemplaza #94a3b8 */
	/* 5.4:1 sobre --ifc-ground y 4.9:1 sobre una tarjeta. El valor anterior,
	   #6f7b90, se calibró contra el ground: daba 4.55:1 ahí, pero ninguno de sus
	   consumidores vive sobre el ground pelado — .ifc-empty-mini,
	   .ifc-activity-time, .ifc-linechart-readout y .ifc-staff-deep-link están todos
	   sobre tarjetas o filas, donde el fondo sube y el contraste caía a 4.15–4.2:1,
	   por debajo de AA. Medido en vivo el 2026-08-28. Sigue siendo claramente más
	   tenue que --ifc-ink-dim, así que la rampa conserva sus cuatro pasos. */
	--ifc-ink-faint: #7c8799;

	/* --- Tintes de los dos acentos. No hay verde ni rojo: el estado se
	   codifica por tratamiento, no por un matiz nuevo (ver .ifc-estado). --- */
	--ifc-yellow-soft: rgba(239, 190, 83, 0.13);
	--ifc-yellow-line: rgba(239, 190, 83, 0.24);
	--ifc-action-blue-soft: rgba(57, 116, 201, 0.15);
	--ifc-action-blue-line: rgba(127, 168, 221, 0.28);

	/* --- Materiales. --ifc-hairline se mantiene como shorthand de borde
	   porque ya se usa así (border: var(--ifc-hairline)); el color suelto va
	   aparte, para border-bottom-color y similares. --- */
	/* --- Escalera de velos ---------------------------------------------
	   Blanco translúcido sobre el fondo oscuro: es de lo que están hechas las
	   superficies, los bordes y los separadores de todo el panel.

	   Eran doce pasos y sobraban. Entre 0.03 y 0.06 hay unos 8 puntos RGB sobre
	   el ground —nada que un ojo distinga— y --ifc-velo-7 no lo usaba nadie. Se
	   consolidó a cuatro anclados en los dos valores que ya dominaban el uso
	   (0.05 con 13 usos, 0.10 con 19), así que 39 de los 69 usos no cambiaron un
	   solo píxel y 25 se movieron 0.02 o menos. Cada salto que queda sí se ve:
	   13, 12 y 26 puntos RGB sobre el ground.

	   Cada paso tiene un trabajo. Si hace falta un valor intermedio, la pregunta
	   correcta es cuál de estos cuatro es, no agregar un quinto.
	   ------------------------------------------------------------------- */
	--ifc-velo-1: rgba(255, 255, 255, 0.05);  /* relleno de superficie: inputs, filas */
	--ifc-velo-2: rgba(255, 255, 255, 0.1);   /* borde y separador estándar */
	--ifc-velo-3: rgba(255, 255, 255, 0.15);  /* borde de hover o activo */
	--ifc-velo-4: rgba(255, 255, 255, 0.25);  /* borde de énfasis */

	--ifc-hairline-color: rgba(255, 255, 255, 0.08);
	--ifc-hairline-lit-color: rgba(255, 255, 255, 0.13);
	--ifc-hairline: 1px solid var(--ifc-hairline-color);
	--ifc-pcb: rgba(57, 116, 201, 0.055);
	/* El bisel es ámbar, no blanco: si la luz de la escena es ámbar, el
	   reflejo del borde superior no puede ser blanco. */
	--ifc-bevel: rgba(239, 190, 83, 0.10);

	/* --- Espacio. Ya existía en dashboard-ui.css; se consolida acá. --- */
	--ifc-space-1: 4px;
	--ifc-space-2: 8px;
	--ifc-space-3: 12px;
	--ifc-space-4: 16px;
	--ifc-space-5: 20px;
	--ifc-space-6: 24px;
	--ifc-space-7: 32px;
	--ifc-space-8: 48px;

	/* --- Radio: cuatro, con significado. Si es dato denso, esquina recta. --- */
	--ifc-r-container: 4px;
	--ifc-r-control: 4px;
	/* Era 999px, o sea cápsula. El usuario pidió el 2026-08-28 que toda forma
	   redonda pase a rectángulo de 6 px. Ojo con una consecuencia del motor: el
	   navegador recorta el radio a la mitad de la caja, así que los puntos de 6 a
	   10 px (--ifc-ring-stat-dot, .ifc-activity-dot, .ifc-stepper-dot) siguen
	   viéndose redondos aunque tomen este valor. Si se los quiere cuadrados de
	   verdad necesitan ~2 px propios, no este token. */
	--ifc-r-chip: 4px;
	--ifc-r-data: 0;

	/* --- Elevación = interactividad, no decoración. Los niveles 1-3 ya
	   existían con estos nombres pero con valores decorativos y bisel blanco:
	   se redefinen en su lugar, así los 9 usos actuales de
	   var(--ifc-elevation-N) siguen resolviendo. El nivel 0 es nuevo. --- */
	--ifc-elevation-0: none;
	--ifc-elevation-1:
		inset 0 1px 0 var(--ifc-bevel),
		0 8px 20px rgba(0, 0, 0, 0.32);
	--ifc-elevation-2:
		inset 0 1px 0 var(--ifc-bevel),
		0 12px 28px rgba(0, 0, 0, 0.40);
	--ifc-elevation-3:
		inset 0 1px 0 rgba(239, 190, 83, 0.14),
		0 18px 40px rgba(0, 0, 0, 0.46);

	/* --- Tipografía. --- */
	--ifc-font-display: 'IFC Akira', 'IFC Helvetica', sans-serif;
	--ifc-font-body: 'IFC Helvetica', Helvetica, Arial, sans-serif;

	/* --- Movimiento. Las dos animaciones de entrada corren una sola vez por
	   carga de vista; el scroll no dispara nada. --- */
	--ifc-ease: cubic-bezier(0.2, 0, 0, 1);
	--ifc-t-fast: 160ms;
	--ifc-t-slow: 220ms;
	--ifc-t-count: 600ms;
	--ifc-t-draw: 900ms;
}

.ifc-portal {
	background-color: var(--ifc-dark-base);
	background-image:
		linear-gradient(var(--ifc-pcb) 1px, transparent 1px),
		linear-gradient(90deg, var(--ifc-pcb) 1px, transparent 1px);
	background-size: 32px 32px;
	color: var(--ifc-ink);
	font-family: var(--ifc-font-body);
	font-size: 15px;
	line-height: 1.6;
	padding: 3rem 1.75rem;
	border-radius: var(--ifc-r-container);
	min-height: 60vh;
	box-sizing: border-box;
}

.ifc-portal * {
	box-sizing: border-box;
}

.ifc-portal h1,
.ifc-portal h2,
.ifc-portal h3 {
	font-family: 'IFC Akira', 'IFC Helvetica', sans-serif;
	text-transform: uppercase;
	font-style: italic;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
	color: #fff;
}

.ifc-portal h1 {
	font-size: 1.9rem;
	text-shadow: 0 0 20px color-mix(in srgb, var(--ifc-yellow) 35%, transparent);
}

.ifc-portal h3 {
	font-size: 1.05rem;
	margin-bottom: 0.35rem;
}

.ifc-subtitle {
	color: var(--ifc-ink-dim);
	margin: 0 0 2rem;
}

.ifc-portal-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2rem;
}

.ifc-link-logout {
	color: var(--ifc-ink-dim);
	font-size: 0.85rem;
	text-decoration: underline;
	white-space: nowrap;
}
.ifc-link-logout:hover {
	color: var(--ifc-yellow);
}

/* --- Login --- */

.ifc-portal-login {
	max-width: 420px;
	margin: 0 auto;
	text-align: center;
}

.ifc-portal-login #loginform {
	text-align: left;
	background: var(--ifc-velo-1);
	border: 1px solid var(--ifc-velo-2);
	border-radius: 4px;
	padding: 1.75rem;
	backdrop-filter: blur(12px);
}

.ifc-portal p.login-remember,
.ifc-portal p.login-submit {
	margin-top: 1rem;
}

.ifc-portal label {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ifc-ink-dim);
	margin-bottom: 0.35rem;
}

.ifc-portal input[type="text"],
.ifc-portal input[type="password"],
.ifc-portal input[type="email"],
.ifc-portal input[type="number"],
.ifc-portal select {
	width: 100%;
	border-radius: 4px;
	border: 1px solid var(--ifc-velo-2);
	background: var(--ifc-velo-1);
	padding: 0.7rem 1rem;
	color: #fff;
	font-family: 'IFC Helvetica', sans-serif;
	font-style: normal;
	margin-bottom: 1rem;
}

.ifc-portal input[type="text"]:focus,
.ifc-portal input[type="password"]:focus,
.ifc-portal input[type="email"]:focus,
.ifc-portal input[type="number"]:focus,
.ifc-portal select:focus {
	outline: none;
	border-color: var(--ifc-action-blue);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ifc-action-blue) 40%, transparent);
}

.ifc-portal input:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.ifc-portal select option {
	background: var(--ifc-dark-base);
	color: #fff;
}

.ifc-portal input#wp-submit {
	display: inline-block;
	background: var(--ifc-yellow);
	color: var(--ifc-dark-base);
	font-family: 'IFC Helvetica', sans-serif;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border: none;
	padding: 0.75rem 2.5rem;
	min-width: 14rem;
	max-width: 100%;
	cursor: pointer;
	border-radius: var(--ifc-r-control);
	/* Sin `transform: skewX(-12deg)` desde 1.9.3. El paralelogramo era la firma
	   del CTA de marca del sitio público y era la única forma inclinada del
	   portal, con todo lo demás en rectángulos de 4 px. Pedido del usuario el
	   2026-08-28 tras verlo en "Submeta o seu primeiro caso". Ojo: el sitio
	   público en Next.js sigue usando el skew, así que a partir de acá el portal
	   y la web de marketing ya no comparten la forma del botón. */
	box-shadow: 0 0 25px 2px color-mix(in srgb, var(--ifc-yellow) 35%, transparent);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ifc-portal input#wp-submit:hover {
	box-shadow: 0 0 35px 6px color-mix(in srgb, var(--ifc-yellow) 50%, transparent);
}

.ifc-lost-password {
	margin-top: 1.25rem;
	font-size: 0.85rem;
}
.ifc-lost-password a {
	color: var(--ifc-ink-dim);
}
.ifc-lost-password a:hover {
	color: var(--ifc-yellow);
}

/* --- Escala de área táctil del portal de cliente -----------------------
   La escala de 44 px de §8.1 se aplicó primero solo al shell de staff. Acá va la
   misma, a pedido del usuario: el portal es la superficie que toca el cliente,
   muchas veces desde el teléfono, así que si algún shell la necesitaba era este.

   Dos técnicas, según el control tenga espacio o no. Los que lo tienen crecen de
   verdad. Los enlaces que viven en una línea de texto no pueden: agrandarlos
   rompería el renglón, así que el área se la da un `::after` que sale de la caja.
   En los del pie la expansión es **solo vertical** — crecer a lo ancho pisaría el
   área del enlace de al lado, que están separados por pocos píxeles.
   -------------------------------------------------------------------- */

.ifc-portal input#wp-submit,
.ifc-cliente-shell .ff-btn-submit,
.ifc-shell-logo,
.ifc-perfil-nav a,
.ifc-filter-chip a,
.ifc-portal input[type="text"],
.ifc-portal input[type="email"],
.ifc-portal input[type="tel"],
.ifc-portal input[type="password"],
.ifc-portal input[type="number"],
.ifc-portal select,
.ifc-cliente-shell .ff-el-form-control {
	min-height: 44px;
}
.ifc-perfil-nav a,
.ifc-shell-logo,
.ifc-filter-chip a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* La nav del cabezal no crece de caja: su subrayado de activo es un
   `border-bottom`, y con la caja en 44 px el borde se despegaba del texto varios
   píxeles. El objetivo se completa con un ::after, solo en vertical para no
   pisar el ítem de al lado. */
.ifc-shell-nav a {
	position: relative;
}
.ifc-shell-nav a::after {
	content: '';
	position: absolute;
	inset: -7px 0;
}
.ifc-portal textarea,
.ifc-cliente-shell textarea.ff-el-form-control {
	min-height: 88px;
}

/* La "x" que quita un chip mide 20 px de ancho: alta pero angosta, y WCAG 2.5.8
   mide la dimensión menor. Ensancharla de verdad deformaría el chip, así que el
   área se completa con un ::after. Pisa la etiqueta del chip, que no es
   interactiva, así que no le quita objetivo a nadie. */
.ifc-filter-chip a {
	position: relative;
}
.ifc-filter-chip a::after {
	content: '';
	position: absolute;
	inset: 0 -12px;
}

/* Enlaces en línea: el área crece, la caja no. */
.ifc-shell-back,
.ifc-link-logout,
.ifc-link-arrow {
	position: relative;
}
.ifc-shell-back::after,
.ifc-link-logout::after,
.ifc-link-arrow::after {
	content: '';
	position: absolute;
	inset: -12px -8px;
}
.ifc-shell-back::after {
	inset: -14px -8px;
}

/* En el pie los enlaces van hombro con hombro: la expansión es solo vertical
   para que dos áreas contiguas no se solapen. */
.ifc-shell-footer a {
	position: relative;
}
.ifc-shell-footer a::after {
	content: '';
	position: absolute;
	inset: -14px 0;
}

/* --- La forma de marca ------------------------------------------------
   Esquinas achaflanadas, el mismo path que usa el sitio público
   (`brand-shapes.tsx`, derivado de los archivos "Botón fino" / "Contorno botón
   fino" del usuario). Las <defs> las imprime
   ifc_backoffice_brand_shape_defs() sobre wp_body_open.

   **El chaflán se pinta sobre una capa de fondo, nunca sobre el botón.** Es la
   técnica del sitio público (shape-pill.tsx) y no es un capricho: `clip-path`
   recorta todo lo que sale de la caja, incluidos el glow y **el anillo de foco**.
   Aplicado al botón, la navegación por teclado se queda sin indicador visible.
   Sobre una capa, el recorte afecta solo a lo pintado.

   El glow va como `drop-shadow` en la capa y no como `box-shadow` en el botón:
   `box-shadow` sigue la caja rectangular y dibujaría un halo recto alrededor de
   una forma achaflanada; `drop-shadow` sigue el alfa ya recortado.
   -------------------------------------------------------------------- */

.ifc-btn::before,
.ifc-cliente-shell .ff-btn-submit::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ifc-yellow);
	clip-path: url(#clip-boton-fino);
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ifc-yellow) 35%, transparent));
	transition: filter var(--ifc-t-fast, 160ms) ease, background-color var(--ifc-t-fast, 160ms) ease;
}

/* La variante de peligro solo cambia el color de la capa: la forma es la misma. */
.ifc-btn-danger::before {
	background: #f87171;
	filter: drop-shadow(0 0 10px rgba(248, 113, 113, 0.35));
}

/* `input[type=submit]` no admite pseudo-elementos, así que acá el recorte va
   sobre el elemento y el foco no puede ser un `outline` — lo recortaría. Se
   resuelve con un anillo interior, que se pinta dentro del área recortada y
   sobrevive. */
.ifc-portal input#wp-submit {
	clip-path: url(#clip-boton-fino);
}
.ifc-portal input#wp-submit:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px var(--ifc-dark-base);
}

/* --- CTA button (industrial, recto desde 1.9.3) --- */

.ifc-btn {
	position: relative;
	isolation: isolate;
	display: inline-block;
	color: var(--ifc-dark-base) !important;
	font-family: 'IFC Helvetica', sans-serif;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.85rem;
	/* El path de marca es un rectángulo estirado de 4.78:1 y `objectBoundingBox`
	   lo deforma al elemento: en un botón compacto el chaflán se comprime y sale
	   más empinado de lo dibujado. El padding generoso más un `min-width` llevan
	   al botón cerca de esa proporción para que el corte se lea como fue hecho.
	   El `max-width` es para que en 375 px el mínimo no desborde. */
	padding: 0.7rem 2.5rem;
	min-width: 14rem;
	max-width: 100%;
	text-decoration: none !important;
	/* Sin `transform: skewX(-12deg)` desde 1.9.3. El paralelogramo era la firma
	   del CTA de marca del sitio público y era la única forma inclinada del
	   portal, con todo lo demás en rectángulos de 4 px. Pedido del usuario el
	   2026-08-28 tras verlo en "Submeta o seu primeiro caso". Ojo: el sitio
	   público en Next.js sigue usando el skew, así que a partir de acá el portal
	   y la web de marketing ya no comparten la forma del botón. */
	transition: box-shadow 0.2s ease;
}
.ifc-btn:hover::before {
	filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ifc-yellow) 55%, transparent));
}
.ifc-btn span {
	/* El contra-giro se fue con el skew: solo existía para enderezar el texto
	   dentro del botón inclinado. */
	display: inline-block;
}
.ifc-btn-sm {
	padding: 0.45rem 2rem;
	min-width: 13rem;
	font-size: 0.75rem;
}
.ifc-btn-danger {
	background: #f87171;
	box-shadow: 0 0 25px 2px rgba(248, 113, 113, 0.35);
}
.ifc-btn-danger:hover {
	box-shadow: 0 0 35px 6px rgba(248, 113, 113, 0.5);
}

/* --- Notices --- */

.ifc-notice {
	background: color-mix(in srgb, var(--ifc-action-blue) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--ifc-action-blue) 35%, transparent);
	border-radius: 4px;
	padding: 0.85rem 1.1rem;
	color: var(--ifc-ink-2);
	font-size: 0.85rem;
	margin-bottom: 1.5rem;
}
.ifc-notice-error {
	background: rgba(239, 68, 68, 0.12);
	border-color: rgba(239, 68, 68, 0.35);
}

/* --- Calificación del servicio (casos entregados/cerrados) — estrellas
   con radio inputs + selector ~ de hermanos, sin JS. El orden en el DOM
   va 5→1 con flex-direction: row-reverse para poder resaltar desde la
   estrella elegida hacia la izquierda con un solo selector CSS. --- */

.ifc-calificacion-box {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ifc-velo-2);
}
.ifc-calificacion-box p.ifc-field-note {
	margin-top: 0;
}

.ifc-star-rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 0.15rem;
	margin-bottom: 0.75rem;
}
.ifc-star-rating input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.ifc-star-rating label {
	font-size: 1.6rem;
	line-height: 1;
	color: var(--ifc-velo-4);
	cursor: pointer;
	transition: color 0.15s ease;
}
.ifc-star-rating input:checked ~ label,
.ifc-star-rating label:hover,
.ifc-star-rating label:hover ~ label {
	color: var(--ifc-yellow);
}

.ifc-star-display {
	font-size: 1.1rem;
	color: var(--ifc-yellow);
	letter-spacing: 0.15em;
	margin-bottom: 0.35rem;
}
.ifc-star-display .vacia {
	color: var(--ifc-velo-4);
}

/* --- Filtro rápido por grupo de estado (Mis casos) --- */

.ifc-filtro-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.ifc-filtro-pill {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ifc-ink-dim);
	background: var(--ifc-velo-1);
	border: 1px solid var(--ifc-velo-2);
	border-radius: var(--ifc-r-chip);
	padding: 0.4rem 0.9rem;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.ifc-filtro-pill:hover {
	color: var(--ifc-ink);
	border-color: var(--ifc-velo-4);
}
.ifc-filtro-pill.active {
	color: var(--ifc-yellow);
	border-color: color-mix(in srgb, var(--ifc-yellow) 50%, transparent);
	background: color-mix(in srgb, var(--ifc-yellow) 10%, transparent);
}

/* --- Toggle (switch) para preferencias --- */

.ifc-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 0;
}
.ifc-toggle-row-label {
	color: var(--ifc-ink);
	font-size: 0.9rem;
}
.ifc-toggle-row-note {
	color: var(--ifc-ink-dim);
	font-size: 0.75rem;
	margin-top: 0.2rem;
}
.ifc-toggle {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 24px;
	flex-shrink: 0;
}
.ifc-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}
.ifc-toggle-track {
	position: absolute;
	inset: 0;
	background: var(--ifc-velo-3);
	border-radius: var(--ifc-r-chip);
	cursor: pointer;
	transition: background 0.2s ease;
}
.ifc-toggle-track::before {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s ease;
}
.ifc-toggle input:checked + .ifc-toggle-track {
	background: var(--ifc-action-blue);
}
.ifc-toggle input:checked + .ifc-toggle-track::before {
	transform: translateX(18px);
}

/* --- Línea de checkbox simple (ej. "usar la misma dirección") --- */

.ifc-checkbox-line {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ifc-ink-2);
	font-size: 0.85rem;
	margin-bottom: 1.1rem;
	cursor: pointer;
}
.ifc-checkbox-line input {
	width: 16px;
	height: 16px;
	accent-color: var(--ifc-yellow);
}

/* --- Form cards (perfil / vehículo edit) --- */

.ifc-form-card {
	position: relative;
	background: var(--ifc-velo-1);
	border: 1px solid var(--ifc-velo-2);
	backdrop-filter: blur(12px);
	border-radius: 4px;
	padding: 1.75rem;
	max-width: 480px;
	margin-bottom: 1.5rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ifc-form-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3), 0 0 20px color-mix(in srgb, var(--ifc-action-blue) 15%, transparent);
	border-color: var(--ifc-velo-3);
}

/* --- Perfil: secciones + tarjeta de "garage" (vehículos) --- */

.ifc-vehiculo-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 1.5rem;
}
.ifc-vehiculo-list .ifc-form-card {
	max-width: none;
}

/* --- Sidebar de "Mi perfil" — navega entre secciones (Datos personales /
   Direcciones / Garantías / Seguridad) mostrando una a la vez, en vez de
   todas apiladas en un scroll largo. Mismo patrón visual del sidebar de
   staff (icono + label, pill activo en amarillo) pero con su propia
   clase: este vive en el portal de cliente, no en /staff/. --- */

.ifc-perfil-layout {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

.ifc-perfil-nav {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	position: sticky;
	top: 100px;
}
.ifc-perfil-nav a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.65rem 0.9rem;
	border-radius: 4px;
	color: var(--ifc-ink-dim);
	text-decoration: none;
	font-family: 'IFC Helvetica', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.ifc-perfil-nav a svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.ifc-perfil-nav a:hover {
	background: var(--ifc-velo-1);
	color: var(--ifc-ink);
}
.ifc-perfil-nav a.active {
	background: color-mix(in srgb, var(--ifc-yellow) 12%, transparent);
	color: var(--ifc-yellow);
}

.ifc-perfil-content {
	flex: 1;
	min-width: 0;
}
.ifc-perfil-content .ifc-form-card {
	max-width: none;
}

.ifc-empresa-repeater-row {
	display: grid;
	grid-template-columns: 1fr 1fr 0.7fr;
	gap: 0.6rem;
	margin-bottom: 0.6rem;
}
.ifc-empresa-repeater-row-direccion {
	grid-template-columns: 1fr 2fr;
}
.ifc-empresa-repeater-row input {
	margin: 0;
}

.ifc-perfil-direcciones-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 1.5rem;
}

#ifc-garantias {
	scroll-margin-top: 90px;
}

@media (max-width: 780px) {
	.ifc-perfil-layout {
		flex-direction: column;
		gap: 1.25rem;
	}
	.ifc-perfil-nav {
		flex-direction: row;
		flex-wrap: wrap;
		position: static;
		width: 100%;
		gap: 0.4rem;
	}
	.ifc-perfil-nav a {
		flex: 1 1 auto;
		justify-content: center;
		padding: 0.55rem 0.6rem;
	}
	.ifc-perfil-nav a span {
		display: none;
	}
}

/* --- Avatar (foto de perfil o iniciales) --- */

.ifc-avatar {
	border-radius: var(--ifc-r-chip);
	background: var(--ifc-action-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'IFC Helvetica', sans-serif;
	font-weight: 700;
	overflow: hidden;
	flex-shrink: 0;
}
.ifc-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ifc-avatar-lg {
	width: 72px;
	height: 72px;
	font-size: 1.5rem;
}

.ifc-perfil-avatar-row {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}
.ifc-perfil-avatar-row input[type="file"] {
	font-size: 0.78rem;
	color: var(--ifc-ink-2);
	margin-bottom: 0.35rem;
}

.ifc-garage-meta {
	display: flex;
	gap: 1.25rem;
	margin: 0.75rem 0 1.1rem;
	font-size: 0.78rem;
	color: var(--ifc-ink-dim);
}
.ifc-garage-meta strong {
	color: var(--ifc-ink);
}

.ifc-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78rem;
	color: var(--ifc-action-blue-light);
	text-decoration: none;
	font-weight: 700;
}
.ifc-link-arrow:hover {
	color: var(--ifc-yellow);
}

.ifc-garage-edit-toggle {
	margin-top: 1.1rem;
	border-top: 1px solid var(--ifc-velo-2);
	padding-top: 0.85rem;
}
.ifc-garage-edit-toggle summary {
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ifc-action-blue-light);
	list-style: none;
}
.ifc-garage-edit-toggle summary::-webkit-details-marker {
	display: none;
}
.ifc-garage-edit-toggle summary::before {
	content: '+ ';
}
.ifc-garage-edit-toggle[open] summary::before {
	content: '– ';
}
.ifc-garage-edit-toggle form {
	margin-top: 1rem;
}

/* --- Filtro activo (chip) sobre "Mis casos" cuando se filtra por
   vehículo desde una tarjeta de garage --- */

.ifc-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: color-mix(in srgb, var(--ifc-action-blue) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--ifc-action-blue) 35%, transparent);
	border-radius: var(--ifc-r-chip);
	padding: 0.4rem 0.5rem 0.4rem 1rem;
	font-size: 0.8rem;
	color: var(--ifc-ink-2);
	margin-bottom: 1.5rem;
}
.ifc-filter-chip a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: var(--ifc-r-chip);
	background: var(--ifc-velo-2);
	color: var(--ifc-ink-2);
	text-decoration: none;
	font-size: 0.75rem;
	line-height: 1;
}
.ifc-filter-chip a:hover {
	background: rgba(239, 68, 68, 0.25);
	color: #fff;
}

.ifc-field-note {
	color: var(--ifc-ink-dim);
	font-size: 0.75rem;
	margin: -0.6rem 0 1rem;
}
.ifc-field-note-spaced {
	margin-top: 1.25rem;
}
.ifc-field-note a {
	color: var(--ifc-action-blue-light);
}

/* --- Dashboard grid + case cards --- */

.ifc-empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--ifc-ink-dim);
}
.ifc-empty p {
	margin-bottom: 1.5rem;
}

.ifc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 1.5rem;
}

.ifc-card {
	position: relative;
	/* Retícula de circuito adentro, con origen propio: la tarjeta se lee como
	   un trozo de placa, no como un rectángulo sobre un fondo texturado. */
	background-color: var(--ifc-surface);
	background-image:
		linear-gradient(var(--ifc-pcb) 1px, transparent 1px),
		linear-gradient(90deg, var(--ifc-pcb) 1px, transparent 1px);
	background-size: 32px 32px;
	border: var(--ifc-hairline);
	border-radius: var(--ifc-r-container);
	padding: 1.5rem;
	overflow: hidden;
	box-shadow: var(--ifc-elevation-1);
	transition:
		box-shadow var(--ifc-t-fast) var(--ifc-ease),
		border-color var(--ifc-t-fast) var(--ifc-ease);
}
.ifc-card:hover {
	box-shadow: var(--ifc-elevation-2);
	border-color: var(--ifc-yellow-line);
}
/* El riel de acento de 2 px que llevaba cada tarjeta se retiró (2026-08-26):
   era el tercer sitio con el mismo acabado —tile, tarjeta y certificado— y en
   los tres decía exactamente lo mismo, o sea nada. La tarjeta ya se separa del
   fondo por su superficie, su hairline y el bisel ámbar de la elevación. */

.ifc-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
}

.ifc-numero {
	font-family: 'IFC Helvetica', sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	color: var(--ifc-action-blue-light);
}

.ifc-estado-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ifc-yellow);
	border: 1px solid color-mix(in srgb, var(--ifc-yellow) 35%, transparent);
	border-radius: var(--ifc-r-chip);
	padding: 0.2rem 0.7rem;
}

.ifc-badge-cancelado {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	/* Cancelado es un estado cerrado, no una alarma: deja de emitir en vez de
	   pedir atención. Ver docs/design/MASTER.md §6. */
	color: var(--ifc-ink-faint);
	background: transparent;
	border: var(--ifc-hairline);
	border-radius: var(--ifc-r-chip);
	padding: 0.2rem 0.7rem;
}

.ifc-titular {
	font-size: 0.75rem;
	color: var(--ifc-ink-dim);
	margin-bottom: 0.5rem;
}

.ifc-falla {
	color: var(--ifc-ink-2);
	font-size: 0.85rem;
	margin: 0 0 1rem;
}

/* --- Stepper de progreso (dots + línea), estilo "seguimiento de pedido"
   en vez de la barra segmentada plana anterior --- */

.ifc-stepper {
	display: flex;
	align-items: center;
	margin-bottom: 0.6rem;
}
.ifc-stepper-dot {
	width: 10px;
	height: 10px;
	/* 2px y no el token: a 10px de caja, 4px se recorta a la mitad y vuelve a ser
	   un círculo. Ver la nota de puntos chicos en dashboard-ui.css. */
	border-radius: 2px;
	background: var(--ifc-velo-3);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
.ifc-stepper-dot.done {
	background: var(--ifc-action-blue);
}
.ifc-stepper-dot.current {
	background: var(--ifc-yellow);
	animation: ifc-pulse-dot 1.8s ease-in-out infinite;
}
.ifc-stepper-line {
	flex: 1;
	height: 2px;
	background: var(--ifc-velo-2);
}
.ifc-stepper-line.done {
	background: var(--ifc-action-blue);
}
/* El punto del paso actual late en bucle infinito, que §7.1 prohíbe como glow
   pulsante y que además no tiene forma de detenerse. Con movimiento reducido se
   queda en el fotograma de reposo: sigue siendo el punto encendido y distinto
   de los demás, sin latir. */
@media (prefers-reduced-motion: reduce) {
	.ifc-stepper-dot.current {
		animation: none;
		box-shadow:
			0 0 0 4px color-mix(in srgb, var(--ifc-yellow) 25%, transparent),
			0 0 10px color-mix(in srgb, var(--ifc-yellow) 60%, transparent);
	}
}

@keyframes ifc-pulse-dot {
	0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ifc-yellow) 25%, transparent), 0 0 10px color-mix(in srgb, var(--ifc-yellow) 60%, transparent); }
	50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ifc-yellow) 12%, transparent), 0 0 16px color-mix(in srgb, var(--ifc-yellow) 85%, transparent); }
}
.ifc-stepper-caption {
	font-size: 0.72rem;
	color: var(--ifc-ink-dim);
	margin-bottom: 1rem;
}
.ifc-stepper-caption strong {
	color: var(--ifc-yellow);
	font-weight: 700;
}

.ifc-card-meta {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.78rem;
	color: var(--ifc-ink-dim);
	margin-bottom: 1rem;
}

/* --- Línea de tiempo desplegable dentro de la tarjeta de caso --- */

.ifc-timeline-toggle {
	margin-top: 1rem;
	border-top: var(--ifc-hairline);
	padding-top: 0.85rem;
}
.ifc-timeline-toggle summary {
	cursor: pointer;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ifc-action-blue-light);
	list-style: none;
}
.ifc-timeline-toggle summary::-webkit-details-marker {
	display: none;
}
.ifc-timeline-toggle summary::before {
	content: '+ ';
}
.ifc-timeline-toggle[open] summary::before {
	content: '– ';
}

.ifc-timeline {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}
/*
 * Readout de caso (docs/design/MASTER.md §8.9). evento_caso ya es un freeze
 * frame: guarda el estado anterior, el nuevo, la nota y las fotos en el instante
 * de la transición. La línea de tiempo lo presenta como el readout de un
 * escáner de diagnóstico — regla vertical de 1 px con el punto del estado
 * encima, sin cromado de aparato.
 */
.ifc-timeline-item {
	position: relative;
	padding: 0 0 1rem 1rem;
	border-left: 1px solid var(--ifc-hairline-color);
	margin-left: 0.25rem;
}
.ifc-timeline-item::before {
	content: '';
	position: absolute;
	left: -4px;
	top: 5px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	/* El punto toma el tono del evento cuando el llamador lo pasa; por defecto
	   es el canal de espera, que es lo que un evento ya cerrado significa. */
	background: var(--ifc-evento-tono, var(--ifc-action-blue-light));
}
/* Un evento marcado como visible para el cliente es señal que sale hacia
   afuera: se distingue por el borde, no por un color nuevo. */
.ifc-timeline-item.visible-cliente {
	border-left-color: var(--ifc-action-blue-line);
}
.ifc-timeline-item:last-child {
	padding-bottom: 0;
}
.ifc-timeline-header {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	font-size: 0.8rem;
}
.ifc-timeline-header strong {
	color: var(--ifc-ink);
}
.ifc-timeline-header span {
	color: var(--ifc-ink-faint);
	font-size: 0.72rem;
}
.ifc-timeline-item p {
	color: var(--ifc-ink-2);
	font-size: 0.82rem;
	margin: 0.35rem 0 0;
}
.ifc-timeline-fotos {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
	flex-wrap: wrap;
}
.ifc-timeline-fotos img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--ifc-velo-3);
}

/* --- Mini formulario de fotos previas (página de intake) ---
   Vive FUERA de .ifc-portal (no está dentro del shortcode del portal),
   así que no puede depender de sus custom properties/selectores
   heredados — todo aquí es autocontenido, con los mismos hex literales. */

.ifc-fotos-previas {
	max-width: 480px;
	margin: 0 auto 2rem;
}
.ifc-fotos-previas h3 {
	font-family: 'IFC Akira', 'IFC Helvetica', sans-serif;
	text-transform: uppercase;
	font-style: italic;
	letter-spacing: -0.01em;
	color: #fff;
	font-size: 1.05rem;
	margin: 0 0 0.35rem;
}
.ifc-fotos-previas label {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ifc-ink-dim);
	margin-bottom: 0.35rem;
}
.ifc-fotos-previas input[type="email"],
.ifc-fotos-previas input[type="text"],
.ifc-fotos-previas input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	border-radius: 4px;
	border: 1px solid var(--ifc-velo-2);
	background: var(--ifc-velo-1);
	padding: 0.7rem 1rem;
	color: #fff;
	font-family: 'IFC Helvetica', sans-serif;
	margin-bottom: 1rem;
}
.ifc-fotos-previas input[type="email"]:focus,
.ifc-fotos-previas input[type="text"]:focus,
.ifc-fotos-previas input[type="password"]:focus {
	outline: none;
	border-color: var(--ifc-action-blue);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ifc-action-blue) 40%, transparent);
}
.ifc-fotos-previas input[type="file"] {
	width: 100%;
	color: var(--ifc-ink-2);
	font-size: 0.85rem;
	margin-bottom: 1rem;
}
.ifc-fotos-previas .ifc-btn {
	background: var(--ifc-yellow);
	color: var(--ifc-dark-base) !important;
}

@media (max-width: 640px) {
	.ifc-portal {
		padding: 2rem 1rem;
	}
}

/* --- Certificado de garantía (página pública /garantia/{codigo}) --- */

.ifc-cert {
	display: flex;
	justify-content: center;
}

/*
 * La barra de acento de 3 px que iba arriba de esta tarjeta se retiró
 * (2026-08-26). No codificaba nada: se veía idéntica con el certificado
 * vigente, vencido o anulado, así que era ornamento — y una barra de color
 * al borde de una tarjeta redondeada es de los acabados más reconocibles de
 * una interfaz generada. El estado ya lo dice el badge, que sí distingue los
 * tres casos. La tarjeta se sostiene con su borde y su superficie.
 */
.ifc-cert-card {
	position: relative;
	max-width: 560px;
	width: 100%;
	background: var(--ifc-surface);
	border: var(--ifc-hairline);
	border-radius: var(--ifc-r-container);
	box-shadow: var(--ifc-elevation-1);
	padding: 2.5rem;
	text-align: center;
}

.ifc-cert-badge {
	display: inline-block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	padding: 0.3rem 1rem;
	border-radius: var(--ifc-r-chip);
	margin-bottom: 1.25rem;
}
/*
 * Los tres estados siguen los tratamientos del sistema (docs/design/MASTER.md
 * §6). Antes "vigente" era ámbar sólido con tinta oscura — que es exactamente
 * la lámpara de aviso, el tratamiento reservado a lo que necesita una decisión
 * humana ya. Un certificado válido no pide nada a nadie, así que gritaba con la
 * misma señal que un testeo fallido. Ahora vigente es el chip tenue, vencido se
 * apaga y solo anulado enciende la lámpara.
 */
.ifc-cert-badge.vigente {
	color: var(--ifc-yellow);
	background: var(--ifc-yellow-soft);
	border: 1px solid var(--ifc-yellow-line);
}
/* Vencido: cerrado, deja de emitir. El blanco sobre --ifc-ink-faint que había
   antes daba 4.3:1 y no llegaba a AA. */
.ifc-cert-badge.vencido {
	color: var(--ifc-ink-dim);
	background: transparent;
	border: var(--ifc-hairline);
}
/* Un certificado anulado sí pide una decisión: lámpara de aviso. Es el único
   de los tres con relleno sólido, así que la señal fuerte queda reservada al
   único caso que la merece. */
.ifc-cert-badge.anulado {
	color: var(--ifc-ground);
	background: var(--ifc-yellow);
	border: 1px solid var(--ifc-yellow);
}

.ifc-cert-card h1 {
	font-size: 1.6rem;
	margin-bottom: 0.25rem;
}

.ifc-cert-codigo {
	font-family: 'IFC Helvetica', sans-serif;
	color: var(--ifc-action-blue-light);
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	margin-bottom: 2rem;
}

.ifc-cert-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	text-align: left;
	margin-bottom: 2rem;
}
.ifc-cert-grid .label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ifc-ink-dim);
	margin-bottom: 0.2rem;
}
.ifc-cert-grid .value {
	display: block;
	font-size: 0.95rem;
	color: #fff;
}

.ifc-cert-qr {
	margin: 0 auto 2rem;
	width: 180px;
	padding: 0.75rem;
	background: #fff;
	border-radius: 4px;
}
.ifc-cert-qr img {
	display: block;
	width: 100%;
	height: auto;
}

.ifc-cert-cta {
	border-top: 1px solid var(--ifc-velo-2);
	padding-top: 1.5rem;
	margin-top: 1rem;
}
.ifc-cert-cta p {
	color: var(--ifc-ink-dim);
	font-size: 0.85rem;
	margin-bottom: 1rem;
}
.ifc-cert-cta textarea {
	width: 100%;
	min-height: 80px;
	border-radius: 4px;
	border: 1px solid var(--ifc-velo-2);
	background: var(--ifc-velo-1);
	color: #fff;
	font-family: 'IFC Helvetica', sans-serif;
	font-style: normal;
	padding: 0.7rem 1rem;
	margin-bottom: 1rem;
}
.ifc-cert-success {
	background: color-mix(in srgb, var(--ifc-action-blue) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--ifc-action-blue) 35%, transparent);
	border-radius: 4px;
	padding: 1rem;
	color: var(--ifc-ink-2);
	font-size: 0.9rem;
}

@media (max-width: 480px) {
	.ifc-cert-grid {
		grid-template-columns: 1fr;
	}
	.ifc-cert-card {
		padding: 1.75rem;
	}
}

/* ==========================================================================
   Shell de página completa (portal / intake / certificado) — ver
   templates/pagina-cliente.php. Reemplaza el header/footer del tema por
   uno mínimo de marca, y da fondo oscuro de borde a borde para que el
   contenido de adentro (.ifc-portal / .ifc-cert / el form de Fluent
   Forms) no se sienta como un widget flotando en una página blanca.
   ========================================================================== */

body.ifc-cliente-shell {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--ifc-dark-base);
	background-image:
		linear-gradient(rgba(57, 116, 201, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(57, 116, 201, 0.08) 1px, transparent 1px);
	background-size: 32px 32px;
	color: var(--ifc-ink);
	font-family: 'IFC Helvetica', Helvetica, Arial, sans-serif;
}

.ifc-shell-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 1.1rem 1.75rem;
	background: color-mix(in srgb, var(--ifc-dark-base) 85%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ifc-velo-2);
}
.ifc-shell-header-left {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.ifc-shell-back {
	font-family: 'IFC Helvetica', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ifc-ink-dim);
	text-decoration: none;
	white-space: nowrap;
}
.ifc-shell-back:hover {
	color: var(--ifc-yellow);
}
.ifc-shell-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.ifc-shell-logo img {
	display: block;
	height: 24px;
	width: auto;
}

.ifc-shell-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.ifc-shell-nav a {
	font-family: 'IFC Helvetica', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ifc-ink-dim);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
}
.ifc-shell-nav a:hover {
	color: var(--ifc-ink-2);
}
.ifc-shell-nav a.active {
	color: var(--ifc-yellow);
	border-bottom-color: var(--ifc-yellow);
}

.ifc-shell-main {
	flex: 1;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 2.5rem 1.75rem 3rem;
	box-sizing: border-box;
}

.ifc-shell-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	text-align: center;
	padding: 2rem 1.75rem 2.5rem;
	border-top: 1px solid var(--ifc-velo-2);
	color: var(--ifc-ink-faint);
	font-size: 0.75rem;
}
.ifc-shell-footer-contact,
.ifc-shell-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.25rem;
}
.ifc-shell-footer a {
	color: var(--ifc-ink-dim);
	text-decoration: none;
}
.ifc-shell-footer a:hover {
	color: var(--ifc-yellow);
}
.ifc-shell-footer-copy {
	margin: 0;
}

@media (max-width: 640px) {
	.ifc-shell-header {
		justify-content: center;
		text-align: center;
	}
	.ifc-shell-nav {
		gap: 1.1rem;
		justify-content: center;
	}
	.ifc-shell-main {
		padding: 2rem 1rem 2rem;
	}
}

/* Deja lugar a la barra de administración de WP cuando la ve el staff
   logueado (los clientes nunca la ven) — si no, tapa la navbar sticky. */
body.admin-bar .ifc-shell-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .ifc-shell-header {
		top: 46px;
	}
}

/* ==========================================================================
   Reskin de Fluent Forms (página "Ingresa tu caso") — el plugin no
   traía ningún estilo de marca, salía con el look por defecto del
   navegador. Reusa los mismos tokens/clases visuales que el resto del
   portal (mismo input, mismo botón skew, misma tipografía).
   ========================================================================== */

.ifc-cliente-shell .ff-el-group {
	margin-bottom: 1.35rem;
}

.ifc-cliente-shell .ff-el-input--label label {
	display: block;
	font-size: 0.8rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ifc-ink-dim);
	margin-bottom: 0.35rem;
}
.ifc-cliente-shell .ff_asterisk,
.ifc-cliente-shell .ff-required_mark {
	color: var(--ifc-yellow);
}

.ifc-cliente-shell .ff-el-form-control {
	width: 100%;
	box-sizing: border-box;
	border-radius: 4px;
	border: 1px solid var(--ifc-velo-2);
	background: var(--ifc-velo-1);
	padding: 0.7rem 1rem;
	color: #fff;
	font-family: 'IFC Helvetica', sans-serif;
	font-size: 0.95rem;
}
.ifc-cliente-shell .ff-el-form-control::placeholder {
	color: var(--ifc-ink-faint);
}
.ifc-cliente-shell .ff-el-form-control:focus {
	outline: none;
	border-color: var(--ifc-action-blue, var(--ifc-action-blue));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ifc-action-blue) 40%, transparent);
}
.ifc-cliente-shell select.ff-el-form-control option {
	background: var(--ifc-dark-base);
	color: #fff;
}
.ifc-cliente-shell textarea.ff-el-form-control {
	min-height: 100px;
}

.ifc-cliente-shell .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ifc-ink-2);
	font-size: 0.9rem;
	font-weight: 400;
	margin-bottom: 0.5rem;
	cursor: pointer;
}
.ifc-cliente-shell .ff-el-form-check-input {
	width: 16px;
	height: 16px;
	accent-color: var(--ifc-yellow);
}

.ifc-cliente-shell .ff-custom_html {
	margin-bottom: 1.75rem;
}
.ifc-cliente-shell .ff-custom_html:not(:first-child) {
	margin-top: 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--ifc-velo-2);
}
.ifc-cliente-shell .ff-custom_html h1 {
	font-family: 'IFC Akira', 'IFC Helvetica', sans-serif;
	text-transform: uppercase;
	font-style: italic;
	letter-spacing: -0.01em;
	color: #fff;
	font-size: 1.75rem;
	margin: 0 0 0.5rem;
	text-shadow: 0 0 20px color-mix(in srgb, var(--ifc-yellow) 35%, transparent);
}
.ifc-cliente-shell .ff-custom_html .ifc-shell-lead {
	color: var(--ifc-ink-dim);
	margin: 0;
}
.ifc-cliente-shell .ff-custom_html h2 {
	font-family: 'IFC Akira', 'IFC Helvetica', sans-serif;
	text-transform: uppercase;
	font-style: italic;
	font-size: 1.1rem;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0;
}

.ifc-cliente-shell .ff-btn-submit {
	position: relative;
	isolation: isolate;
	display: inline-block;
	color: var(--ifc-dark-base) !important;
	font-family: 'IFC Helvetica', sans-serif;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.85rem;
	padding: 0.75rem 2.5rem;
	min-width: 14rem;
	max-width: 100%;
	border: none;
	cursor: pointer;
	/* Sin `transform: skewX(-12deg)` desde 1.9.3. El paralelogramo era la firma
	   del CTA de marca del sitio público y era la única forma inclinada del
	   portal, con todo lo demás en rectángulos de 4 px. Pedido del usuario el
	   2026-08-28 tras verlo en "Submeta o seu primeiro caso". Ojo: el sitio
	   público en Next.js sigue usando el skew, así que a partir de acá el portal
	   y la web de marketing ya no comparten la forma del botón. */
	transition: box-shadow 0.2s ease;
}
.ifc-cliente-shell .ff-btn-submit:hover::before {
	filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ifc-yellow) 55%, transparent));
}

.ifc-cliente-shell .ff-el-is-error .ff-el-form-control {
	border-color: rgba(239, 68, 68, 0.5);
}
.ifc-cliente-shell .error,
.ifc-cliente-shell .text-danger {
	color: #f87171;
	font-size: 0.8rem;
}

.ifc-cliente-shell .ff-message-success {
	color: var(--ifc-ink-2);
	background: color-mix(in srgb, var(--ifc-action-blue) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--ifc-action-blue) 35%, transparent);
	border-radius: 4px;
	padding: 1rem 1.25rem;
}