/*
 * Finaurum — Dashboard / Escritorio del Alumno (Tutor LMS 4.0.1)
 * Fidelidad visual al mockup (Agente QA/auditorias/finaurum/2026-07-14-scrape-referencia).
 * Solo carga en el dashboard (enqueue condicional en functions.php).
 * Agente Gestor Web — Ronda 2 — 2026-07-14.
 */

/* ============================================================
   0. RESET DE PÁGINA (documento standalone)
   ============================================================ */
html, body.fin-dashboard-body {
	margin: 0;
	padding: 0;
	/* Ronda 30.1 (2026-07-22): color exacto pedido por el cliente, medido
	   directo del mockup -- #F9FAFC (no el token --fin-bg #fdfdfd, que
	   habia quedado como aproximacion de la Ronda 30). */
	background: #f9fafc;
}
.fin-dashboard,
.fin-dashboard *,
.fin-dashboard *::before,
.fin-dashboard *::after {
	box-sizing: border-box;
}
.fin-dashboard {
	font-family: var(--fin-font-body);
	color: var(--fin-gray);
	/* Ronda 30.2 (2026-07-22): esta es la regla que en realidad se VE -- este
	   div interno con min-height:100vh tapa por completo el background del
	   body/html, que quedo cambiado en la Ronda 30/30.1 pero nunca visible. */
	background: #f9fafc;
	min-height: 100vh;
}
.fin-dashboard a { text-decoration: none; }
.fin-dashboard ul { list-style: none; margin: 0; padding: 0; }

/* Ronda 9 (2026-07-16) — fidelidad dashboard: `.fin-card` es un token GLOBAL
   (finaurum-tokens.css: radius 36px + sombra permanente 0 15px 45px), compartido
   con checkout/thank-you/landing. Scopeado a `.fin-dashboard` (mismo patron que
   `.fin-dashboard .fin-btn` de la seccion 2) para no pisar esos otros contextos.
   Unifica el radius (36px cards / 20px statcards) a 16px y pasa la sombra a
   hover-only, sin tocar el token global. */
.fin-dashboard .fin-card {
	border-radius: 16px;
	box-shadow: none;
	transition: box-shadow .2s ease;
}
.fin-dashboard .fin-card:hover {
	box-shadow: 0 4px 6px -1px rgba(12, 60, 96, 0.1), 0 2px 4px -2px rgba(12, 60, 96, 0.1);
}

/* ============================================================
   1. TOPBAR (header propio de sitio — el dashboard no hereda header.php)
   ============================================================ */
.fin-dash-topbar {
	background: #ffffff;
	border-bottom: 1px solid rgba(12, 60, 96, 0.08);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.fin-dash-topbar-inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 16px 32px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.fin-dash-logo {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-shrink: 0;
}
.fin-dash-logo img { height: 32px; width: auto; display: block; }
.fin-dash-logo-mark {
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	border: 2px solid var(--fin-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: var(--fin-navy);
	flex-shrink: 0;
}
.fin-dash-logo-text {
	font-family: var(--fin-font-heading);
	font-weight: 700;
	font-size: 20px;
	color: var(--fin-navy);
}
.fin-dash-logo-dot { color: var(--fin-verde); }
.fin-dash-logo-sub {
	font-family: var(--fin-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--fin-gray);
	align-self: center;
}

.fin-dash-burger { display: none; flex-direction: column; gap: 4px; cursor: pointer; margin-left: auto; }
.fin-dash-burger span { width: 20px; height: 2px; background: var(--fin-navy); border-radius: 2px; }
.fin-dash-burger-input { display: none; }

.fin-dash-topbar-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-left: auto;
}

.fin-dash-nav-cursos { position: relative; }
.fin-dash-nav-cursos-trigger {
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--fin-font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--fin-navy);
	padding: 0;
}
.fin-dash-nav-cursos-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border: 1px solid rgba(12, 60, 96, 0.1);
	border-radius: 12px;
	box-shadow: 0 15px 35px rgba(12, 60, 96, 0.15);
	padding: 8px;
	min-width: 220px;
	display: none;
	flex-direction: column;
	z-index: 40;
}
.fin-dash-nav-cursos:hover .fin-dash-nav-cursos-menu,
.fin-dash-nav-cursos:focus-within .fin-dash-nav-cursos-menu { display: flex; }
.fin-dash-nav-cursos-menu a {
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--fin-navy);
}
.fin-dash-nav-cursos-menu a:hover { background: var(--fin-bg-alt, #faf5ec); }

.fin-dash-nav-user {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--fin-navy);
}
.fin-dash-nav-user-name { font-weight: 700; font-size: 14px; }

.fin-dash-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: var(--fin-verde);
	color: #fff;
	font-family: var(--fin-font-body);
	font-weight: 800;
	overflow: hidden;
	flex-shrink: 0;
}
.fin-dash-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fin-dash-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.fin-dash-avatar-lg {
	width: 80px;
	height: 80px;
	font-size: 30px;
	font-weight: 900;
	font-family: var(--fin-font-heading);
	background: var(--fin-mostaza);
	color: var(--fin-navy);
	border: 4px solid #0c3c600d;

}

.fin-dash-btn-cursos { padding: 12px 24px; font-size: 14px; }

/* ============================================================
   2. BOTONES — variantes propias del dashboard (además de las de tokens.css)
   ============================================================ */
.fin-dashboard .fin-btn {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 13px 22px;
	border-radius: 9999px;
}
.fin-dashboard .fin-btn-block { display: flex; width: 100%; }
.fin-dashboard .fin-btn-secondary { border-width: 1.5px; }
.fin-btn-outline-red {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	color: #dc2626;
	border: 1.5px solid #dc2626;
	font-family: var(--fin-font-body);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 13px 22px;
	border-radius: 10px;
	cursor: pointer;
}
.fin-btn-outline-red:hover { background: #dc2626; color: #fff; }

/* ============================================================
   3. BANNER navy (dashboard/components/header.php)
   ============================================================ */
.fin-dash-banner {
	/* Ronda 11 (2026-07-23): navy solido (mockup: bg-[#0C3C60], sin gradiente) --
	   antes un gradiente 135deg que oscurecia hacia #0a2e4a, mas duro que la referencia. */
	background: var(--fin-navy);
	border-radius: 24px;
	/* Ronda 15 -- Addendum 7 (2026-07-23): 28px 32px -> 32px parejo, medido 1:1 del mockup real (p-8). */
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	/* Ronda 13 (2026-07-23): 40px medido del mockup (mb-10) -- antes 28px. */
	margin-bottom: 40px;
	color: #fff;
	/* Ronda 13 (2026-07-23): shadow-xl medido del mockup + position/overflow para
	   contener el circulo decorativo .fin-dash-banner-decor (ver mas abajo). */
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}
/* Ronda 13 (2026-07-23): circulo decorativo del card header navy -- medido 1:1 del
   mockup (outerHTML real): 320x320px, rounded-full, border 1px blanco al 5%,
   offset -80px derecha/abajo (sangrado parcial, generando un anillo visible en la
   esquina inferior derecha, recortado por overflow:hidden del padre). */
.fin-dash-banner-decor {
	position: absolute;
	/* Ronda 15 (2026-07-23), Addendum 3: right ajustado de -80px a -65px. El usuario
	   senalo (2 capturas nuevas) que el borde visible del circulo cae en medio del
	   hueco / sobre el boton 'Ir al aula virtual' en el sitio, en vez de pegado al
	   borde derecho del pill 'Soporte activo' como en el mockup. Medido con
	   getBoundingClientRect() real (Chrome DevTools MCP, 1440px): el circulo tiene
	   la MISMA posicion absoluta en mockup y sitio (mismo banner de 1176px, mismo
	   offset -80px) -- lo que cambia es el ancho del pill/boton (texto de fecha
	   distinto: 'Hasta Julio, 2027' vs 'Hasta Noviembre, 2026'), que corre el
	   bloque pill+boton ~15px a la derecha en el sitio (boton mas ancho, mismo
	   borde derecho anclado). Rondas 12/14/15-B concluyeron 'sin cambio' comparando
	   solo geometria absoluta del circulo (identica en ambos) sin cruzarla contra
	   el pill/boton de CADA sitio por separado -- por eso no vieron el problema.
	   Se reposiciona el circulo (no se toca texto/ancho del pill o boton) para que
	   su borde quede pegado al pill en AMBOS sitios, replicando la relacion visual
	   del mockup sin arriesgar el resto del layout del banner. */
	/* Ronda 15 -- Addendum 7 (2026-07-23): -65px -> -78px. Los fixes de esta ronda (icono del
	   pill 16->20px, banner-padding 28/32->32 parejo) volvieron a correr el pill/boton y la
	   altura del banner, desactualizando el calibre de -65px del Addendum 3. Recalculado con
	   getBoundingClientRect() real (mismo metodo del Addendum 3): offset del borde del circulo
	   vs pill.right pasa de -13.7/-11.0 (adentro del pill) a -0.7/+2.0, calcado al rango del
	   mockup real (-0.46/+2.55). Verificado en vivo tras aplicar -- ver Contexto_Finaurum.md. */
	right: -78px;
	bottom: -80px;
	width: 320px;
	height: 320px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	pointer-events: none;
}
.fin-dash-banner-left { display: flex; align-items: center; gap: 18px; }
.fin-dash-banner-name {
	font-family: var(--fin-font-heading);
	/* Ronda 15 -- Addendum 7 (2026-07-23): 700/26px -> 900/30px, medido 1:1 del mockup real. */
	font-weight: 900;
	font-size: 30px;
	color: #fff;
}
/* Ronda 12 (2026-07-23): 12px medido del mockup (gap-3) -- antes 16px (compensaba
   el ancho del divisor que se elimina en esta ronda, ver mas abajo). */
.fin-dash-banner-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.fin-dash-support-pill {
	display: flex;
	align-items: center;
	gap: 12px; /* Re-verificacion R15 (2026-07-23): 10px -> 12px, medido 1:1 del mockup real (gap-3 del div flex del pill) via getComputedStyle -- el usuario senalo que "los espacios no son los mismos" en el pill despues del Addendum 5 (que solo habia tocado padding, no este gap). */
/* Ronda 15 -- Addendum 7 (2026-07-23): background/border/radius medidos 1:1 del mockup real (bg-white/5, border-white/10, rounded-2xl=16px) -- antes .08/.18/14px. */
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 12px 16px; /* Ronda 15 Addendum 5 Punto F (2026-07-23): 10px 18px -> 12px 16px, medido del mockup real (p-3 px-4) */
	color: var(--fin-mostaza);
}
/* Ronda 15 -- Addendum 7 (2026-07-23): icono calendario 16x16 -> 20x20, medido 1:1 del mockup real (svg renderizado a 20x20 via clase w-5 h-5, aunque el atributo width/height propio del svg es 24). CSS-only. */
.fin-dash-support-pill svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
/* Ronda 15 Addendum 5 Punto F (2026-07-23): line-height 1.3 -> 1 (mockup usa leading-none en ambas lineas del pill, achica el gap vertical eyebrow<->fecha) */
/* Re-verificacion R15 (2026-07-23): sumado gap:7px -- con line-height:1 puro las 2 lineas quedaban PEGADAS
   (0px de separacion real, medido con getBoundingClientRect en el sitio) mientras el mockup real mide 7px
   de separacion entre el fondo de "SOPORTE ACTIVO" y el techo de "Hasta Noviembre, 2026" (metrica de fuente
   del mockup, no un gap explicito en su CSS -- se replica acá con un gap fijo ya que la estructura HTML es
   distinta entre React/Tailwind y WP/PHP). Mismo punto que el usuario senalo como "espacios no son los mismos". */
.fin-dash-support-pill-text { display: flex; flex-direction: column; line-height: 1; gap: 7px; }
.fin-dash-support-eyebrow {
	font-size: 9px;
	font-weight: 400; /* antes 700, mockup usa peso normal (sin clase font-*) */
	letter-spacing: normal; /* antes 0.6px, mockup no tiene tracking en este span */
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5); /* antes 0.65, mockup usa text-white/50 */
}
.fin-dash-support-pill-text strong {
	font-size: 12px; /* antes 13px */
	font-weight: 800; /* antes inherit (browser bold ~700 del <strong>), mockup usa font-extrabold */
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* mockup usa font-mono para la fecha, antes heredaba Inter */
	color: #fff;
}

/* Ronda 15 Addendum 5 Punto G (2026-07-23): overrides puntuales sobre la base compartida .fin-btn (13px/800/0.3px/13px 22px)
   para igualar al mockup (12px/900/0.6px/12px 20px/gap 6px). Escopeado a ESTE boton -- no se toco .fin-btn para no afectar
   los demas botones del sitio (Ver los cursos, Reproducir, VER PROGRAMA COMPLETO, etc.).
   NOTA: selector prefijado con ".fin-dashboard" (especificidad 0-2-0) porque la regla base real es
   ".fin-dashboard .fin-btn" (0-2-0, mas arriba en este mismo archivo) -- un ".fin-dash-btn-aula" simple
   (0-1-0) pierde contra ella para font-size/weight/letter-spacing/padding (solo gap ganaba, por no estar
   seteado en la regla de mayor especificidad). Confirmado con enumeracion real de cssRules matched. */
.fin-dashboard .fin-dash-btn-aula {
	display: inline-flex;
	align-items: center;
	gap: 6px; /* antes 8px */
	font-size: 12px; /* antes 13px (heredado de .fin-btn) */
	font-weight: 900; /* antes 800 */
	letter-spacing: 0.6px; /* antes 0.3px */
	padding: 12px 20px; /* antes 13px 22px */
	/* Re-verificacion R15 (2026-07-23): box-shadow AUSENTE ("none") en el sitio -- el mockup real (getComputedStyle)
	   tiene shadow-lg de Tailwind en reposo (0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1)) que
	   nunca se habia medido en rondas anteriores (Ronda 15 Punto G solo comparo tipografia/padding/gap). Esto es lo
	   que hacia que "el boton no este igual" pese a que tipografia/padding ya coincidian tras el Addendum 5. */
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	/* Ronda 15 -- Addendum 7 (2026-07-23): 0.2s ease generico -> 0.15s cubic-bezier(.4,0,.2,1) (easing real de Tailwind, medido del mockup). */
	transition: box-shadow .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
	/* Ronda 15 -- Addendum 7 (2026-07-23): border:none agregado -- causa raiz confirmada del residual de altura 44px vs 40px: heredaba "border: 2px solid transparent" de la regla base .fin-btn (finaurum-tokens.css) sin overridear, sumando 4px al alto total. */
	border: none;
}
.fin-dashboard .fin-dash-btn-aula:hover {
	/* Re-verificacion R15 (2026-07-23): hover:shadow-xl + hover:scale-[1.01] medidos del mockup real, sumados por
	   fidelidad completa (el estado de reposo era lo que el usuario marco, pero el hover tambien difería). */
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	transform: scale(1.01);
}
/* Ronda 12 (2026-07-23): REVERTIDO el divisor de Ronda 11. Verificado en el DOM
   real del mockup (outerHTML del banner): el pill "Soporte activo" y el boton
   "Ir al aula virtual" son simples hermanos flex con gap-3 (12px) -- el mockup
   NO tiene ningun elemento separador ahi. Ronda 11 leyo una sombra/espaciado de
   la captura como una linea real y agrego un <span> que no existe en la
   referencia. El usuario volvio a marcarlo como no coincidente (grosor/altura/
   color) en una nueva comparacion -- la causa real es que el elemento no
   deberia existir. El <span class="fin-dash-banner-divider"> se elimina de
   header.php en la misma ronda; el gap de .fin-dash-banner-right pasa a 12px
   (ver arriba) para reproducir el espaciado exacto del mockup sin el separador. */

/* ============================================================
   4. GRID PRINCIPAL
   ============================================================ */
.fin-dash-container {
	/* Ronda 11 (2026-07-23): 1240px medido del mockup real (max-w-[1240px] mx-auto
	   px-4 sm:px-6 lg:px-8) -- antes 1360px, mas ancho que la referencia. */
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px 32px 80px;
}
.fin-dash-grid {
	display: grid;
	/* Ronda 15 (2026-07-23), Punto C: 270px medido 1:1 del mockup real via
	   getBoundingClientRect (nav del sidebar: grid-cols-4 gap-8 sobre un
	   contenedor de 1176px -> (1176-3*32)/4=270px) -- antes 280px, el card
	   blanco de la sidebar salia mas ancho que la referencia. Gap de esta fila
	   (28px) sin tocar -- el mockup mide 32px (gap-8) ahi, diferencia de 4px
	   fuera del alcance pedido (solo ancho del card), documentado como residual. */
	grid-template-columns: 270px 1fr;
	/* Ronda 15, Addendum 9 (2026-07-23): 32px medido del mockup real (gap-8) -- antes 28px, cierra
	   el residual documentado en Ronda 15 Punto C. */
	gap: 32px;
	align-items: start;
}
@media (max-width: 1023px) {
	.fin-dash-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   5. SIDEBAR — Área del Alumno
   ============================================================ */
.fin-dash-sidebar {
	background: #fff;
	/* Ronda 15, Addendum 9 (2026-07-23): 16px medido del mockup real (rounded-2xl) -- antes 20px. */
	border-radius: 16px;
	border: 1px solid rgba(12, 60, 96, 0.06);
	/* Ronda 15 (2026-07-23), Addendum 4: shadow-sm medido 1:1 del mockup real via
	   getComputedStyle (Chrome DevTools MCP, 1440px, cuenta demo) -- antes
	   0 8px 24px rgba(12,60,96,.06), mucho mas pronunciado/grande que la referencia.
	   El usuario senalo (2 capturas nuevas) que el card del sidebar flota con una
	   sombra notoria en el sitio, mientras el mockup es casi imperceptible. */
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	padding: 20px;
	position: sticky;
	top: 24px;
}
@media (max-width: 1023px) { .fin-dash-sidebar { position: static; } }

.fin-dash-sidebar-eyebrow {
	font-family: var(--fin-font-body);
	/* Ronda 11 (2026-07-23): valores medidos del mockup -- clave: NO es uppercase
	   (el mockup muestra "Área del Alumno" en minuscula/mayuscula normal, no
	   "ÁREA DEL ALUMNO"), antes 700/0.8px/uppercase/opacity .4. */
	/* Ronda 15 (2026-07-23): font-weight ABSOLUTO 700 pedido explicito por el
	   usuario (antes 800 desde Ronda 14) -- deviacion deliberada del mockup real
	   (que mide 900/font-black), mismo criterio que Ronda 13 Punto 3. */
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.55px;
	text-transform: none;
	color: rgba(12, 60, 96, 0.5);
	padding: 4px 12px 12px;
	/* Ronda 15 -- Addendum 7 (2026-07-23): el eyebrow es HERMANO del <nav> (no hijo), su padding-bottom no genera separacion real del primer item -- gap medido en vivo era ~0px. Mockup mide ~10px. Se agrega margin-bottom. */
	margin-bottom: 10px;
}
.fin-dash-sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.fin-dash-sidebar-item {
	display: flex;
	align-items: center;
	/* Ronda 15 (2026-07-23), Punto D: gap 12px->14px medido 1:1 del mockup real
	   (gap-3.5) via getComputedStyle -- clase COMPARTIDA por los 6 items del menu
	   en el mockup (no exclusiva del activo "Escritorio"), asi que se corrige aca
	   en la regla base. Hallazgo surgido al investigar el boton activo (Punto D). */
	gap: 14px;
	/* Ronda 15 (2026-07-23), Punto D: padding 13px 14px -> 14px 16px, mismo
	   hallazgo/razon que el gap de arriba (medido del mockup: p-3.5 px-4). */
	padding: 14px 16px;
	border-radius: 12px;
	font-family: var(--fin-font-body);
	/* Ronda 12 (2026-07-23): 12px/900/0.6px medido del mockup (text-xs font-black
	   uppercase tracking-wider) -- antes 13px/700/0.2px. */
	/* Ronda 15 (2026-07-23), Punto A: font-weight ABSOLUTO 700 pedido explicito
	   por el usuario para los 6 items del menu, esta vez INCLUYENDO "Cerrar
	   Sesion" (Ronda 14 lo habia excluido a proposito). Ya no hace falta el
	   selector :not() de Ronda 14 -- se simplifica aplicando 700 directo en la
	   regla base, cascada mas simple. Deviacion deliberada del mockup real
	   (900/font-black), mismo criterio que Ronda 13 Punto 3. */
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	/* Ronda 15, Addendum 9 (2026-07-23): color de REPOSO medido del mockup real -- gris #485460
	   (mismo tono de .fin-dash-subtitle), antes reusaba var(--fin-navy) tambien en reposo. El navy
	   queda reservado para el estado :hover (regla de mas abajo, Addendum 8, sin tocar). El item
	   activo (.fin-dash-sidebar-item-active, color:#fff) y "Cerrar Sesion" (.fin-dash-sidebar-item-logout,
	   color:#dc2626) sobreescriben esto en reglas propias mas abajo en la cascada -- no se ven afectados. */
	color: #485460;
	transition: background-color .15s ease, color .15s ease;
}

.fin-dash-sidebar-icon { display: flex; flex-shrink: 0; opacity: 0.7; }
.fin-dash-sidebar-item:hover { background: rgba(12, 60, 96, 0.05); }
/* Ronda 15, Addendum 8: color en hover perdía contra `a:hover{color:rgb(51,51,102)}` de hello-elementor/reset.css
   (especificidad 0-1-1 > 0-1-0 de .fin-dash-sidebar-item). :not() excluye el item activo (verde) sin depender de
   orden en cascada y sube especificidad a 0-3-0, mínimo necesario para ganarle sin !important. */
.fin-dash-sidebar-item:hover:not(.fin-dash-sidebar-item-active):not(.fin-dash-sidebar-item-logout) { color: var(--fin-navy); }
.fin-dash-sidebar-item-active,
.fin-dash-sidebar-item-active:hover {
	background: var(--fin-verde);
	color: #fff;
	/* Ronda 15 (2026-07-23), Punto D: box-shadow + scale medidos 1:1 del mockup
	   real via getComputedStyle (shadow-md tintado verde shadow-[#009054]/10 +
	   scale-[1.01]) -- el sitio no los replicaba, el boton activo quedaba plano. */
	box-shadow: 0 4px 6px -1px rgba(0, 144, 84, 0.1), 0 2px 4px -2px rgba(0, 144, 84, 0.1);
	transform: scale(1.01);
}
.fin-dash-sidebar-item-active .fin-dash-sidebar-icon { opacity: 1; }
/* Ronda 15 (2026-07-23), Addendum 4: color 1:1 del mockup real (border-[#0C3C60]/5
   = rgba(12,60,96,.05), antes .08 -- mas visible/oscuro que la referencia) + margin
   ajustado de 10px 4px a 4px 0 -- el mockup NO tiene inset horizontal (el divisor
   ocupa el mismo ancho de contenido que los items del menu, border-top del wrapper
   que envuelve 'Cerrar Sesion', medido 228px de 230px de ancho de contenido = full-
   width, sin margen lateral) y el gap vertical total alrededor del boton (mt-2+pt-2
   = 8+8 = 16px) es bastante menor que el de esta regla anterior (10+10 = 20px de
   margin, mas 2x4px de gap del flex = 28px+ total) -- eso tambien explica gran parte
   de los ~14px de diferencia de ALTO total del card vs el mockup (377.5px real vs
   391.6px del sitio antes de este fix). */
.fin-dash-sidebar-divider {
	height: 1px;
	background: rgba(12, 60, 96, 0.05);
	margin: 4px 0;
}
.fin-dash-sidebar-item-logout { color: #dc2626; }
.fin-dash-sidebar-item-logout:hover { background: #fef2f2; color: #b91c1c; } /* Ronda 15 -- Addendum 10: hover oscurece a red-700 (antes se mantenia red-600 identico al reposo) */

/* ============================================================
   6. CONTENIDO — títulos comunes
   ============================================================ */
.fin-dash-content { min-width: 0; }
.fin-dash-title {
	font-family: var(--fin-font-heading);
	/* Ronda 15 -- Addendum 7 (2026-07-23, fix loop QA): la Ronda 13 habia bajado esto a
	   100 por instruccion EXPLICITA del usuario en ese momento (deviacion deliberada
	   documentada arriba). El QA de esta ronda lo reporto como BUG real (no figura en
	   la lista de deviaciones deliberadas de Ronda 15) y la instruccion vigente del
	   Orquestador es restaurarlo a 800 (valor real del mockup, font-extrabold). Se
	   aplica 800 -- si el 100 de Ronda 13 sigue siendo intencional, reconfirmar con
	   el usuario porque esta ronda lo revierte. */
	font-weight: 800;
	font-size: 24px;
	color: var(--fin-navy);
	margin: 0 0 6px;
}
.fin-dash-subtitle {
	font-family: var(--fin-font-body);
	font-size: 12px; /* Ronda 15 Addendum 5 Punto E (2026-07-23): 14px -> 12px exacto, valor pedido por el usuario. Weight/color/family ya coincidian con el mockup. */
	color: var(--fin-gray);
	/* Ronda 15 -- Addendum 7 (2026-07-23): 24px -> 49px, gap real medido subtitulo->stat-cards vs mockup (49px). */
	margin: 0 0 32px;
	/* Ronda 11 (2026-07-23): linea divisoria debajo del header (titulo+subtitulo),
	   arriba de las stat-cards -- medida del mockup ("border-b border-[#0C3C60]/5 pb-4"
	   en el wrapper del header). Se aplica en .fin-dash-subtitle (comun a las 5 vistas)
	   en vez de en un wrapper nuevo para no tocar el markup PHP. */
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(12, 60, 96, 0.05);
}
.fin-dash-section-title {
	font-family: var(--fin-font-heading);
	/* Ronda 15 -- Addendum 7 (2026-07-23): 700/22px -> 800/24px, medido del mockup real (font-extrabold). */
	font-weight: 800;
	font-size: 24px;
	color: var(--fin-navy);
	margin: 0 0 4px;
}
.fin-dash-section-sub { font-size: 13px; color: var(--fin-gray); margin: 0 0 18px; }

.fin-dash-empty { text-align: center; padding: 48px 32px; }
.fin-dash-empty .fin-btn { margin-top: 16px; }

/* ============================================================
   7. STAT CARDS
   ============================================================ */
.fin-dash-statcards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Ronda 11 (2026-07-23): 24px medido del mockup (gap-6) -- antes 18px. */
	gap: 24px;
	/* Ronda 13 (2026-07-23): 32px medido del mockup (patron space-y-8 entre bloques
	   del dashboard) -- antes 24px, el gap horizontal (gap-6=24px de arriba) ya
	   coincidia y no se toco. */
	margin-bottom: 32px;
}
@media (max-width: 767px) { .fin-dash-statcards { grid-template-columns: 1fr; } }

.fin-dash-statcard {
	/* Ronda 15 -- Addendum 7 (2026-07-23): 22px -> 24px, medido del mockup real. */
	padding: 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	border-radius: 20px;
}
.fin-dash-statcard-icon {
	width: 48px;
	height: 48px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}
/* Certificacion R9: residual dejado explicito por E3 (REPORTE-fidelidad-dashboard) —
   tinte de color por categoria al 10% en vez de gris/verde/dorado neutro, 48px (antes 44px). */
.fin-dash-statcard-icon-grey  { background: rgba(12, 60, 96, 0.1); color: var(--fin-navy); }
.fin-dash-statcard-icon-green { background: rgba(0, 144, 84, 0.1); color: var(--fin-verde); }
.fin-dash-statcard-icon-gold  { background: rgba(251, 211, 141, 0.1); color: var(--fin-mostaza); }
.fin-dash-statcard-num {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 800;
	font-size: 30px;
	color: var(--fin-navy);
}
.fin-dash-statcard-label {
	font-size: 12px; /* Ronda 15 Addendum 5 Punto H (2026-07-23): antes 11px */
	/* Re-verificacion R15 (2026-07-23): DISCREPANCIA CONSCIENTE vs mockup -- se re-midio el mockup real ahora mismo
	   con Chrome DevTools MCP (getComputedStyle en vivo, cuenta demo) y el mockup SIGUE dando font-weight:900
	   (clase font-black), idéntico a lo que ya habia medido el Addendum 5. La medicion anterior NO estaba mal.
	   El usuario pidio EXPLICITAMENTE bajarlo a 700 en esta ronda ("el font weight de cursos deberia ser 700"),
	   contradiciendo a proposito el valor real del mockup -- se aplica 700 por instruccion directa del usuario
	   (tiene prioridad sobre la medicion), mismo criterio de deviacion deliberada que .fin-dash-sidebar-item,
	   .fin-dash-title, etc. en Rondas 13/15. NO se documenta como "coincide con el mockup" -- coincide con el
	   pedido del usuario, no con la referencia visual. */
	font-weight: 700; /* antes 900 (Addendum 5) -- mockup real mide 900, bajado a 700 por pedido explicito del usuario, deviacion deliberada */
	letter-spacing: 0.6px; /* antes 0.4px */
	text-transform: uppercase;
	color: rgba(72, 84, 96, 0.75); /* antes var(--fin-gray) solido; mockup usa text-[#485460]/75 -- no se toco la variable global para no afectar otros usos de --fin-gray */
}

/* ============================================================
   8. ÚLTIMA CLASE PENDIENTE
   ============================================================ */
.fin-dash-pending {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 24px 28px;
	border-radius: 20px;
	margin-bottom: 32px;
}
.fin-dash-pending-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Ronda 11 (2026-07-23): valores medidos del mockup -- antes 11px/700/0.5px/verde. */
	/* Ronda 15 (2026-07-23): font-weight ABSOLUTO 700 pedido explicito por el
	   usuario (antes 800 desde Ronda 14) -- deviacion deliberada del mockup real,
	   mismo criterio que Ronda 13 Punto 3. */
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--fin-navy);
	/* Ronda 15 (2026-07-23), addendum -- gap vertical al "Curso: ...": medido con
	   getBoundingClientRect() en mockup real (contenedor eyebrow con mb-5=20px,
	   gap visual resultante bottom->top ~26px) vs sitio (8px) -- el usuario marco
	   que estaban muy pegados. Subido a 20px (valor Tailwind real del mockup,
	   mb-5) en vez de forzar el gap visual exacto de 26px, para no sobrecorregir
	   por diferencias de line-height entre ambos stacks. */
	margin-bottom: 20px;
}
.fin-dash-dot {
	/* Ronda 15 -- Addendum 11 (2026-07-23): 14x14px medido 1:1 del mockup real
	   (w-3.5 h-3.5 = 0.875rem) -- antes 8x8px. */
	width: 14px;
	height: 14px;
	border-radius: 9999px;
	background: var(--fin-verde);
	display: inline-block;
	flex-shrink: 0;
}
.fin-dash-pending-course {
	/* Ronda 11 (2026-07-23): 12px medido del mockup -- antes 13px. */
	/* Ronda 15 (2026-07-23): font-weight ABSOLUTO 700 pedido explicito por el
	   usuario (antes 600 desde Ronda 14 -- esta vez SUBE, no baja, porque el
	   target es un valor absoluto y no un delta relativo). */
	font-size: 12px;
	font-weight: 700;
	color: var(--fin-verde);
	margin-bottom: 2px;
}
.fin-dash-pending-lesson {
	font-family: var(--fin-font-heading);
	font-size: 18px;
	/* Ronda 11 (2026-07-23): 900 medido del mockup (font-black) -- antes 700. */
	font-weight: 900;
	color: var(--fin-navy);
}
.fin-dash-btn-play { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Ronda 15 -- Addendum 7 (2026-07-23): overrides sobre la base compartida .fin-btn (13px/800) para igualar al mockup (12px/900), + gap propio 8px->4px medido del mockup real. Prefijado con ".fin-dashboard" (misma tecnica que .fin-dash-btn-aula) porque la regla base real es ".fin-dashboard .fin-btn" (0-2-0). */
.fin-dashboard .fin-dash-btn-play {
	gap: 4px;
	font-size: 12px;
	font-weight: 900;
	/* Ronda 15 -- Addendum 10 (2026-07-23): shadow-md medido 1:1 del mockup (antes ausente, box-shadow:none). */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	/* Ronda 15 -- Addendum 10: letter-spacing propio 0.3px (heredado de .fin-dashboard .fin-btn) -> 0.6px medido del mockup. */
	letter-spacing: 0.6px;
}

/* ============================================================
   9. SEGUÍ TU CAMINO (cross-sell)
   ============================================================ */
/* Ronda 13 (2026-07-23): border-top + padding-top medidos 1:1 del DOM real del
   mockup ("border-t border-[#0C3C60]/10 pt-8") -- ES el divisor pedido por el
   usuario arriba de "Segui tu camino", confirmado que SI existe en el mockup real
   (distinto del divisor de Ronda 11/12 en el topbar, que se confirmo que NO
   existia y se elimino). Antes: margin-top:8px sin ninguna linea. */
.fin-dash-path {
	border-top: 1px solid rgba(12, 60, 96, 0.1);
	padding-top: 32px;
}
.fin-dash-path-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Ronda 11 (2026-07-23): 32px medido del mockup (gap-8 en desktop) -- antes 22px. */
	gap: 32px;
}
@media (max-width: 767px) { .fin-dash-path-grid { grid-template-columns: 1fr; } }

.fin-dash-path-card { padding: 0; overflow: hidden; }
.fin-dash-path-media {
	position: relative;
	/* Ronda 15 -- Addendum 7 (2026-07-23): 110px -> 112px, ajuste menor de baja prioridad. */
	height: 112px;
	/* Ronda 11 (2026-07-23): difuminado azulado medido del mockup
	   (bg-gradient-to-br from-[#0C3C60]/75 to-[#0A2A44]/90) -- antes un gradiente
	   135deg navy->#35566e mas claro/verdoso, distinto al mockup. */
	background: linear-gradient(to bottom right, rgba(12, 60, 96, 0.75), rgba(10, 42, 68, 0.9));
	display: flex;
	align-items: flex-end;
	padding: 12px 16px;
}
/* Ronda 13 (2026-07-23): badge completo medido 1:1 del mockup (antes solo un
   icono suelto sin fondo/borde/padding). El svg del candado tambien se redujo de
   16x16 a 14x14 en el markup (dashboard.php) para calzar con el padding 6px del
   badge de 28x28. */
.fin-dash-path-lock {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 28px;
	height: 28px;
	padding: 6px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	color: #fff;
}
/* Ronda 13 (2026-07-23): background base rgba(255,255,255,.1) medido 1:1 del
   mockup (bg-white/10) -- antes .16. El color POR CATEGORIA (inline style en
   dashboard.php via _finaurum_color_acento) se elimino del markup en esta misma
   ronda -- ahora todos los iconos usan esta unica regla base, sin distincion. */
.fin-dash-path-icon {
	position: absolute;
	top: 12px;
	left: 16px;
	width: 36px;
	height: 36px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
}
.fin-dash-path-cat {
	font-size: 10px;
	font-weight: 700;
	/* Ronda 12 (2026-07-23): 1px medido del mockup (tracking-widest) -- antes 0.8px. */
	letter-spacing: 1px;
	text-transform: uppercase;
	/* Ronda 11 (2026-07-23): opacity .6 medida del mockup -- antes .75. */
	color: rgba(255, 255, 255, 0.6);
}
.fin-dash-path-body { padding: 20px 22px 24px; }
.fin-dash-path-badge {
	display: inline-block;
	/* Ronda 11 (2026-07-23): 9px/0.45px medidos del mockup -- antes 10px/0.4px. */
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.45px;
	text-transform: uppercase;
	color: var(--fin-verde);
	margin-bottom: 8px;
}
.fin-dash-path-title {
	font-family: var(--fin-font-heading);
	/* Ronda 11 (2026-07-23): 18px/900 medidos del mockup (font-black) -- antes 19px/700. */
	font-size: 18px;
	font-weight: 900;
	color: var(--fin-navy);
	margin: 0 0 6px;
}
.fin-dash-path-desc {
	/* Ronda 11 (2026-07-23): 12px medido del mockup -- antes 13px. */
	font-size: 12px;
	/* Ronda 15 -- Addendum 7 (2026-07-23): line-height explicito 16.5px (antes heredado ~13.8px de Inter default) medido del mockup real. */
	line-height: 16.5px;
	color: var(--fin-gray);
	margin: 0 0 16px;
}

/* Ronda 13 (2026-07-23): "Ver programa completo" NO es un CTA pill -- el mockup
   lo muestra outline rectangular (rounded-lg=8px, h-10=40px), hover gris claro
   (bg-[#0C3C60]/5, NO navy solido), texto navy que NO cambia en hover. Se pisa
   aca el .fin-dashboard .fin-btn (pill 9999px, seccion 2 de este archivo) y el
   .fin-btn-secondary:hover navy (finaurum-tokens.css) SOLO para este boton via
   mayor especificidad -- no se toco ningun otro boton pill del dashboard (ej.
   "Reproducir", que ya era correcto). */
.fin-dash-path-body .fin-btn.fin-btn-secondary {
	border-radius: 8px;
	height: 40px;
	padding: 0 12px;
	font-size: 12px;
	/* Ronda 15 (2026-07-23), Punto A (sumado a mitad de tarea): font-weight
	   ABSOLUTO 700 pedido explicito por el usuario para "VER PROGRAMA COMPLETO"
	   (antes 800 desde Ronda 14) -- mismo criterio/deviacion deliberada del
	   mockup real que el resto de los 9(+1) elementos de este punto. */
	font-weight: 700;
	letter-spacing: 0.6px;
	border: 1px solid rgba(12, 60, 96, 0.1);
	background: transparent;
	color: var(--fin-navy);
}
.fin-dash-path-body .fin-btn.fin-btn-secondary:hover {
	background: rgba(12, 60, 96, 0.05);
	color: var(--fin-navy);
}

/* ============================================================
   10. COURSE CARDS — Cursos Inscritos
   ============================================================ */

/* Tabs — Ronda 4 (2026-07-15): reemplaza el Nav nativo en inglés de
   tutor/templates/dashboard/courses.php (ver override dashboard/courses.php). */
.fin-courses-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 1px solid rgba(12, 60, 96, 0.1);
	margin-bottom: 24px;
}
.fin-courses-tab {
	padding: 14px;
	margin-right: 22px;
	font-size: 14px;
	font-weight: 700;
	color: var(--fin-gray);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.fin-courses-tab:hover { color: var(--fin-navy); }
.fin-courses-tab-active {
	color: var(--fin-verde-dark);
	border-bottom-color: var(--fin-verde);
}

/* Grid de cards — Ronda 4: antes 1 columna (tutor-flex tutor-flex-column nativo). */
.fin-courses-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	margin-bottom: 8px;
}
@media (max-width: 767px) { .fin-courses-grid { grid-template-columns: 1fr; } }

.fin-courses-pagination { margin-top: 24px; }

/* Wrapper liviano para las 2 sub-vistas que se dejan en markup nativo de Tutor
   (Wishlist / Intentos de examen) — fuera de alcance de re-skin completo esta
   ronda, pero al menos quedan dentro de una fin-card en vez de a fondo perdido. */
.fin-courses-native-wrap { padding: 24px; }

.fin-course-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.fin-course-media {
	position: relative;
	height: 130px;
	background: var(--fin-navy);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 14px 16px;
	overflow: hidden;
}
/* Ronda 9 (2026-07-16): bloque de color/gradiente + icono de categoria (via
   _finaurum_icono), reemplaza el thumbnail nativo de Tutor (placeholder.svg
   montana). El gradiente real se aplica inline por curso (style=) en
   course-card.php usando _finaurum_color_acento; este bg es solo fallback. */
.fin-course-media-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.fin-course-cat,
.fin-course-status { position: relative; z-index: 1; }
.fin-course-cat {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #fff;
}
.fin-course-status {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 9999px;
}
.fin-course-status-active { background: var(--fin-verde); color: #fff; }
.fin-course-status-expired { background: #dc2626; color: #fff; }

.fin-course-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.fin-course-rating-row { display: flex; align-items: center; justify-content: space-between; }
.fin-course-stars { color: var(--fin-mostaza); font-size: 13px; letter-spacing: 1px; }
.fin-course-view {
	background: rgba(251, 211, 141, 0.15);
	padding: 4px 10px;
	border-radius: 9999px;
	text-decoration: none;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--fin-navy);
}
.fin-course-title {
	font-family: var(--fin-font-heading);
	font-size: 19px;
	font-weight: 700;
	color: var(--fin-navy);
	margin: 0;
}
/* Ronda 12 (2026-07-23): descripcion corta debajo del titulo, delta QA Ronda 11
   (accion 2). Usa get_the_excerpt() real de Tutor (fallback nativo de WP =
   wp_trim_words del post_content cuando no hay excerpt cargado) -- no se
   inventa copy nuevo. line-clamp:2 replica el recorte visual del mockup
   (text-xs text-[#485460] leading-snug line-clamp-2). */
.fin-course-desc {
	font-family: var(--fin-font-body);
	font-size: 12px;
	line-height: 1.4;
	color: #485460;
	margin: 2px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fin-course-progress-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: var(--fin-gray);
}
.fin-course-progress-track {
	width: 100%;
	height: 7px;
	background: #eef1f4;
	border-radius: 9999px;
	overflow: hidden;
}
.fin-course-progress-fill {
	height: 100%;
	background: var(--fin-mostaza);
	border-radius: 9999px;
}
.fin-course-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* ============================================================
   11. MI PERFIL
   ============================================================ */
.fin-profile-head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.fin-profile-name {
	font-family: var(--fin-font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--fin-navy);
	margin: 0 0 4px;
}
.fin-profile-egresado { font-size: 13px; color: var(--fin-gray); margin: 0 0 8px; }
.fin-profile-badge {
	display: inline-block;
	background: #e4f5ec;
	color: #009054;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 9999px;
}
.fin-profile-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	border-top: 1px solid rgba(12, 60, 96, 0.08);
	padding-top: 24px;
}
@media (max-width: 640px) { .fin-profile-fields { grid-template-columns: 1fr; } }
.fin-profile-field { display: flex; flex-direction: column; gap: 6px; }
.fin-profile-field-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(12, 60, 96, 0.5);
}
/* Certificacion R9: mismo residual E3 aplicado a Mi Perfil (bg blanco, borde
   navy/10, radius 12px) — consistente con el fix de inputs de Ajustes. */
.fin-profile-field-value {
	background: #f9fafc;
	border: 1px solid rgba(12, 60, 96, 0.1);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--fin-navy);
}

/* ============================================================
   12. HISTORIAL DE PEDIDOS (tabla)
   ============================================================ */
/* Ronda 20 (2026-07-24, fix loop QA): el card generico `.fin-dashboard .fin-card`
   trae padding:32px (compartido con checkout/thank-you/landing) -- el mockup real
   mide `padding:0` en el div `bg-white rounded-2xl border ... overflow-hidden shadow-2xs`
   que envuelve la tabla (el unico inset visible viene del padding 16/24px de los
   th/td extremos, que el sitio YA implementaba bien). Se especializa aca, scopeado
   a `.fin-orders-card`, sin tocar el token global `.fin-card` (usado en otras vistas
   donde el padding de 32px SI es correcto). `overflow:hidden` deja que la franja gris
   #F9FAFC de los headers llegue flush al borde redondeado, igual que el mockup.
   box-shadow 1:1 del mockup (shadow-2xs = 0 1px 0 rgba(0,0,0,.05)), constante -- no
   solo en :hover como el resto de las .fin-card (Ronda 9), por eso se pisa tambien el
   :hover para que no salte al shadow mas fuerte generico al pasar el mouse. */
.fin-orders-card.fin-card {
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
.fin-orders-card.fin-card:hover {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
.fin-orders-table-wrap { overflow-x: auto; }
.fin-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	/* Ronda 22 (2026-07-24): margin:0 -- el reset.css del tema padre hello-elementor pone
	   "table { margin-block-end: 15px }" (propiedad LOGICA), dejando 15px de aire muerto
	   bajo la ultima fila antes del borde redondeado del card (mismo patron recurrente que
	   Ronda 21: reset.css usa propiedades logicas que hay que neutralizar explicitamente).
	   El mockup mide margin:0 en la tabla. Alto del card bajaba de 130px (113 tabla + 15
	   margin + 2 border) a 115px tras el fix. */
	margin: 0;
}
.fin-orders-table th {
	text-align: left;
	font-size: 10px;
	/* Ronda 20 (2026-07-24, fix loop QA): 900->700 -- el mockup aplica font-black (900)
	   al <tr> del thead, pero el default de user-agent (th{font-weight:bold}=700) le gana
	   a la herencia -- el th real del mockup COMPUTA 700, confirmado con getComputedStyle
	   en vivo (https://finaurum-459965135674.us-east1.run.app/dashboard/account/billing/). */
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fin-navy);
	background: #F9FAFC;
	padding: 16px;
	/* Ronda 21 (2026-07-24): la tabla se veia como grilla (bordes verticales en las 6
	   columnas) -- origen identificado con document.styleSheets: NO es una regla propia,
	   viene del reset global del tema PADRE hello-elementor (reset.css) "table td, table th
	   { border: 1px solid rgba(128,128,128,.5); ... }" (especificidad 0-0-2), que nuestra
	   regla de aca (0-1-1, gana) solo pisaba en border-bottom -- top/left/right quedaban sin
	   cubrir y se veian los del reset. El mockup (outerHTML Tailwind real) confirma CERO
	   bordes verticales -- solo border-b en el <tr> del thead / divide-y en el <tbody>.
	   Se neutralizan explicitamente los otros 3 lados sin !important (alcanza con la
	   especificidad ya ganadora de esta regla). */
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid rgba(12, 60, 96, 0.1);
	white-space: nowrap;
}
.fin-orders-table th:first-child { padding-left: 24px; }
.fin-orders-table th:last-child { padding-right: 24px; text-align: right; }
.fin-orders-table th:nth-child(5) { text-align: center; }
.fin-orders-table td {
	padding: 16px;
	/* Ronda 21: mismo caso que el th de arriba -- neutraliza el border top/left/right
	   heredado del reset.css del tema padre (hello-elementor), que aplicaba grilla
	   completa a TODOS los td/th del sitio via "table td, table th { border: 1px solid
	   rgba(128,128,128,.5) }". */
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid rgba(12, 60, 96, 0.05);
	vertical-align: middle;
	color: var(--fin-navy);
}
.fin-orders-table td:first-child { padding-left: 24px; }
.fin-orders-table td:last-child { padding-right: 24px; text-align: right; }
.fin-orders-table td:nth-child(5) { text-align: center; }
/* Ronda 21: el mockup usa "divide-y" de Tailwind en el tbody -- linea SOLO entre filas,
   nunca despues de la ultima (confirmado computed style: la ultima fila mide
   border-bottom:0px en el mockup). Nuestro .fin-orders-table td de arriba pone
   border-bottom en TODAS las filas incluida la ultima -- sin este override quedaba una
   linea extra pegada al borde redondeado inferior del card (que ahora es overflow:hidden
   desde Ronda 20), un detalle que el mockup no tiene. */
.fin-orders-table tbody tr:last-child td { border-bottom: none; }
/* Ronda 21 (2026-07-24) -- 2 reglas MAS del mismo reset.css del tema padre hello-elementor
   que tambien "grillaban" la tabla, detectadas recorriendo el resto del archivo:
   1) Zebra striping en filas impares: "table tbody>tr:nth-child(odd)>td, table
	  tbody>tr:nth-child(odd)>th { background-color: hsla(0,0%,50%,.071) }" -- el mockup NO
	  tiene zebra alguna (filas siempre transparentes salvo :hover). Coincide exactamente con
	  el rgba(128,128,128,.07) medido en vivo en la fila de datos antes de este fix.
   2) Hover propio del reset aplicado al <td>/<th> (no al <tr>): "table tbody tr:hover>td,
	  table tbody tr:hover>th { background-color: hsla(0,0%,50%,.102) }" -- pinta ENCIMA del
	  hover que ya declarabamos en el <tr> desde Ronda 17 (el background de un hijo se dibuja
	  visualmente por encima del fondo del padre aunque el tr tenga el suyo propio), asi que
	  el hover real que se veia era el gris de este reset, no el celeste tenue del mockup.
   Ambas reglas del reset usan selectores de 4 tipos + 1 pseudo-clase (especificidad
   0-1-4) -- para ganarles sin !important se duplica la clase propia (".fin-orders-table.
   fin-orders-table", tecnica de especificidad estandar) en vez de escalar por cantidad de
   tipos, y se apunta directo a td/th (mismo nivel donde pinta el reset) en vez de solo al tr. */
.fin-orders-table.fin-orders-table tbody tr td,
.fin-orders-table.fin-orders-table tbody tr th {
	background-color: transparent;
}
.fin-orders-table.fin-orders-table tbody tr:hover td,
.fin-orders-table.fin-orders-table tbody tr:hover th {
	background-color: rgba(249, 250, 252, 0.5);
}
/* Reset tambien fuerza border-top (via propiedad LOGICA border-block-start, especificidad
   0-2-4) en la primera fila del thead: "table thead:first-child tr:first-child th
   { border-block-start: 1px solid rgba(128,128,128,.5) }". Nuestra regla de mas arriba
   (.fin-orders-table th, 0-1-1) alcanza para pisar border-top pero NO border-block-start
   (es otra propiedad) ni la especificidad mayor del reset -- replica exacta del selector
   con la clase propia agregada para igualar/superar especificidad, neutralizando ambas
   propiedades (fisica y logica) por las dudas. */
.fin-orders-table thead:first-child tr:first-child th {
	border-top: none;
	border-block-start: none;
}
/* Ronda 20 (2026-07-24, fix loop QA): columna Fecha (3ra) con tratamiento tipografico
   reducido en el mockup (text-xs font-medium = 12px/500), medido en vivo -- el resto
   de columnas sigue en 14px/400 (heredado de .fin-orders-table). */
.fin-orders-table td:nth-child(3) { font-size: 12px; font-weight: 500; }
.fin-orders-table tbody tr:hover { background: rgba(249, 250, 252, 0.5); }
.fin-orders-id {
	font-weight: 700;
	color: var(--fin-navy);
	/* Ronda 22 (2026-07-24): mono para hacer juego con .fin-orders-amount (columna IMPORTE,
	   tambien mono desde antes) -- el mockup usa font-mono en ambas columnas numericas de la
	   tabla; el sitio tenia PEDIDO en Inter (sans), rompiendo el pareo visual. */
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.fin-orders-course { font-weight: 700; }
.fin-orders-subtitle { display: block; margin-top: 2px; font-size: 10px; line-height: 1; font-weight: 400; color: rgba(72, 84, 96, 0.75); }
/* Certificacion R9: bump de especificidad (0-2-1) — ".fin-orders-table td" (0-1-1)
   le ganaba a ".fin-orders-amount" (0-1-0) y el verde/mono nunca se veia (quedaba
   navy heredado de la regla generica de celda). Confirmado en vivo antes del fix. */
.fin-orders-table td.fin-orders-amount { color: var(--fin-verde); font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fin-orders-status {
	display: inline-block;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: normal;
	text-transform: uppercase;
	padding: 2px 10px;
	border-radius: 9999px;
	background: #eef1f4;
	color: var(--fin-gray);
}
.fin-orders-status-completed { background: rgba(0, 144, 84, 0.1); color: #009054; }
.fin-orders-status-pending,
.fin-orders-status-on-hold { background: #fdf3d4; color: #92400e; }
.fin-orders-status-cancelled,
.fin-orders-status-cancel,
.fin-orders-status-failed { background: #fde8e8; color: #dc2626; }
.fin-orders-invoice a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--fin-navy);
	text-decoration: underline;
}
.fin-orders-invoice a:hover { color: var(--fin-verde); }
/* Ronda 22 (2026-07-24): hover salia AZUL (#4979E8, var(--tutor-text-brand-hover) de Tutor)
   en vez de VERDE -- causa: el link "Factura PDF" tambien matchea "a.tutor-btn-link:hover
   :not(:disabled):not(.disabled)" de tutor-core.min.css (especificidad 0-4-1), que le gana
   a la regla propia de arriba (0-2-1). En reposo empataban 0-1-1 y ganaba el orden de carga
   (por eso nadie lo habia detectado -- el estado quieto SI se veia bien). Replica del selector
   completo del plugin con la clase propia agregada para igualar/superar especificidad, sin
   !important. Confirmado en vivo (hover real via CDP): antes rgb(73,121,232), despues
   rgb(0,144,84). */
.fin-orders-invoice a.tutor-btn-link:hover:not(:disabled):not(.disabled) { color: var(--fin-verde); }
.fin-orders-invoice a::before {
	content: "";
	flex: 0 0 auto;
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ============================================================
   12.5 AJUSTES (formulario nativo — dashboard/account/settings.php)
   ============================================================ */
.fin-settings-section-title {
	font-family: var(--fin-font-heading);
	font-size: 16px;
	font-weight: 700;
	color: var(--fin-navy);
	margin: 0 0 25px;
	padding-bottom:8px;
	border-bottom:1px solid #0c3c600d;
}
.fin-settings-divider {
	height: 1px;
	background: rgba(12, 60, 96, 0.08);
	margin: 28px 0;
}
.fin-settings-form { display: flex; flex-direction: column; gap: 18px; }
.fin-settings-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.fin-settings-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
	.fin-settings-grid,
	.fin-settings-grid-3 { grid-template-columns: 1fr; }
}
.fin-settings-field { display: flex; flex-direction: column; gap: 6px; }
.fin-settings-field label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(12, 60, 96, 0.5);
}
/* Certificacion R9: residual dejado explicito por E3 — filled crema (#faf5ec sin
   borde marcado) a outlined (bg blanco, borde navy/10 visible, radius 12px, antes 10px). */
.fin-settings-field input {
	background: #ffffff;
	border: 1px solid rgba(12, 60, 96, 0.1);
	border-radius: 12px;
	padding: 12px 14px;
	font-family: var(--fin-font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--fin-navy);
}
.fin-settings-field input:focus {
	outline: none;
	border-color: var(--fin-verde);
	background: #fff;
}
.fin-settings-field input:disabled {
	color: var(--fin-gray);
	cursor: not-allowed;
	opacity: 0.85;
	font-style: italic;
}
.fin-settings-form .fin-btn { align-self: flex-start; }
.fin-settings-alert {
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 24px;
}
.fin-settings-alert-success { background: #e4f5ec; color: var(--fin-verde-dark); }
.fin-settings-alert-error { background: #fde8e8; color: #dc2626; }

/* ============================================================
   13. RESKIN de páginas nativas de Tutor NO overrideadas (Ajustes /
   tabs de Cursos / paginación) — aplicado sobre las clases reales de
   Tutor para que convivan visualmente sin reescribir su funcionalidad.
   ============================================================ */
.fin-dash-content .tutor-btn,
.fin-dash-content button.tutor-btn-primary {
	font-family: var(--fin-font-body);
	border-radius: 10px !important;
}
.fin-dash-content .tutor-btn-primary {
	background-color: var(--fin-verde) !important;
	border-color: var(--fin-verde) !important;
}
.fin-dash-content .tutor-btn-primary:hover { background-color: var(--fin-verde-dark) !important; }
.fin-dash-content .tutor-text-brand,
.fin-dash-content a.active,
.fin-dash-content .tutor-nav .active { color: var(--fin-verde) !important; }
.fin-dash-content h1,
.fin-dash-content h2,
.fin-dash-content h3,
.fin-dash-content h4 { font-family: var(--fin-font-heading); color: var(--fin-navy); }
.fin-dash-content .tutor-profile-header,
.fin-dash-content .tutor-billing-wrapper,
.fin-dash-content .tutor-dashboard-courses-wrapper {
	background: transparent;
}
.fin-dash-content .tutor-form-control:focus { border-color: var(--fin-verde) !important; box-shadow: none !important; }

/* ============================================================
   14. RESPONSIVE — mobile (ver mockup -375)
   ============================================================ */
@media (max-width: 767px) {
	.fin-dash-topbar-inner { padding: 14px 20px; }
	.fin-dash-burger { display: flex; }
	.fin-dash-topbar-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		padding: 16px 20px 20px;
		box-shadow: 0 12px 24px rgba(12, 60, 96, 0.12);
		gap: 14px;
		z-index: 30;
	}
	.fin-dash-burger-input:checked ~ .fin-dash-topbar-nav { display: flex; }
	.fin-dash-topbar { position: relative; }
	.fin-dash-nav-cursos-menu { position: static; transform: none; box-shadow: none; border: 0; padding: 4px 0 0; }

	.fin-dash-container { padding: 20px 16px 60px; }
	.fin-dash-banner { flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; border-radius: 20px; }
	.fin-dash-banner-left { flex-direction: column; }
	.fin-dash-banner-right { flex-direction: column; width: 100%; }
	.fin-dash-support-pill,
	.fin-dash-btn-aula { width: 100%; justify-content: center; }

	.fin-dash-pending { flex-direction: column; align-items: stretch; text-align: left; }
	.fin-dash-btn-play { justify-content: center; }
}