/* =========================================================================
   VGV 365 Hub — hoja de estilos principal
   ========================================================================= */

/* ---------- Tokens ----------
   Punto único de cambio. Al agregar una sección nueva, usar estos valores en
   vez de escribir números: cambiar acá se refleja en todo el theme.

   Formas     var(--v-radius) tarjetas · var(--v-radius-sm) campos · var(--v-pill) botones
   Bordes     var(--v-border)
   Alturas    var(--v-control-h) campos y botones · var(--v-control-h-sm) paginación
   Rellenos   var(--v-card-pad) dentro de tarjetas · var(--v-gap) entre bloques
   Texto      var(--v-fs-sm) secundario · var(--v-fs-xs) meta
   Sombras    var(--v-shadow-1) reposo · var(--v-shadow-2) elevado
   Movimiento var(--v-ease)
   ---------------------------------------------------------------------- */
:root {
	--v-primary: #16283C;
	--v-primary-700: #223A52;
	--v-accent: #C8A55B;

	--v-bg: #F5F7FA;
	--v-surface: #FFFFFF;
	--v-surface-2: #FAFBFD;
	--v-line: #E4E9F0;
	--v-line-strong: #CBD5E1;

	--v-text: #16283C;
	--v-text-2: #4A5C72;
	--v-muted: #7C8CA1;

	--v-ok: #12A66A;
	--v-warn: #D08700;
	--v-danger: #D2453C;

	--v-radius: 16px;
	--v-radius-sm: 10px;
	--v-radius-lg: 22px;
	--v-pill: 999px;

	/* Alturas de los controles: botones, campos, selectores y paginación. */
	--v-control-h: 42px;
	--v-control-h-sm: 36px;

	/* Un solo borde y un solo relleno de tarjeta para todo el theme. */
	--v-border: 1px solid var(--v-line);
	--v-card-pad: 20px 22px;

	/* Escala de texto secundario. */
	--v-fs-sm: 13.5px;
	--v-fs-xs: 12.5px;

	--v-shadow-1: 0 1px 2px rgba(22, 40, 60, .05), 0 1px 3px rgba(22, 40, 60, .04);
	--v-shadow-2: 0 4px 12px rgba(22, 40, 60, .07), 0 1px 3px rgba(22, 40, 60, .04);
	--v-shadow-3: 0 14px 40px rgba(22, 40, 60, .12);

	--v-rail-w: 224px;
	--v-gap: 20px;

	/* Márgenes del contenedor. Son tokens y no números sueltos porque la
	   cabecera del dashboard los usa en negativo para salirse a los bordes:
	   si dejan de coincidir, aparece un escalón. */
	--v-container-top: 28px;
	--v-container-x: clamp(16px, 3vw, 32px);

	--v-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--v-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ligero ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.v-body {
	margin: 0;
	font-family: var(--v-font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--v-text);
	background: var(--v-bg);
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--v-primary); }

button { font: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }

p { margin: 0 0 .75em; }

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

:focus-visible {
	outline: 2px solid var(--v-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}

.v-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 10px 16px;
	background: var(--v-primary);
	color: #fff;
	border-radius: 0 0 var(--v-radius-sm) 0;
}
.v-skip:focus { left: 0; color: #fff; }

/* ---------- Layout ---------- */
.v-shell { display: flex; min-height: 100vh; }

.v-shell__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	margin-left: var(--v-rail-w);
}

.v-main { flex: 1 1 auto; padding-bottom: 48px; }

.v-container {
	width: 100%;
	margin-inline: auto;
	padding: var(--v-container-top) var(--v-container-x) 0;
}

/* Solo las pantallas de lectura y las de acceso se limitan en ancho. */
.v-container--narrow { max-width: 900px; }

/* ---------- Barra lateral ----------
   Expandida con icono y texto: es la única navegación en escritorio. */
.v-rail {
	position: fixed;
	inset: 0 auto 0 0;
	width: var(--v-rail-w);
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 14px;
	background: var(--v-primary);
	color: #fff;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.v-rail__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 8px;
	margin-bottom: 18px;
}
.v-rail__mark img { height: 30px; width: auto; }

/* Solo hace falta en móvil, donde la barra es un cajón. */
.v-rail__close {
	display: none;
	border: 0;
	background: none;
	padding: 6px;
	border-radius: 8px;
	color: rgba(255, 255, 255, .7);
	cursor: pointer;
}
.v-rail__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.v-rail__search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	margin-bottom: 16px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--v-radius-sm);
	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .6);
	font-size: var(--v-fs-sm);
	text-align: left;
	cursor: pointer;
	transition: background .16s var(--v-ease), border-color .16s var(--v-ease);
}
.v-rail__search:hover {
	background: rgba(255, 255, 255, .11);
	border-color: rgba(255, 255, 255, .24);
	color: #fff;
}

.v-rail__nav { display: flex; flex-direction: column; gap: 4px; }

.v-rail__group { display: flex; flex-direction: column; gap: 2px; }
.v-rail__group + .v-rail__group {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.v-rail__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border-radius: var(--v-radius-sm);
	font-size: 14px;
	font-weight: 550;
	color: rgba(255, 255, 255, .7);
	transition: background .16s var(--v-ease), color .16s var(--v-ease);
}
.v-rail__link:hover { background: rgba(255, 255, 255, .09); color: #fff; }

.v-rail__link.is-current {
	background: rgba(255, 255, 255, .13);
	color: #fff;
	font-weight: 600;
}
.v-rail__link.is-current::before {
	content: "";
	position: absolute;
	left: -14px; top: 50%;
	transform: translateY(-50%);
	width: 3px; height: 22px;
	border-radius: 0 3px 3px 0;
	background: var(--v-accent);
}

/* El texto no debe romper la barra si el nombre es largo. */
.v-rail__link > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.v-rail__foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.v-rail__me { padding-block: 7px; }
.v-rail__me .v-avatar img,
.v-rail__me .v-avatar .avatar,
.v-rail__me .v-avatar__initials {
	width: 28px; height: 28px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .2);
}

.v-rail-scrim {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(22, 40, 60, .45);
	backdrop-filter: blur(2px);
}


/* ---------- Panel de búsqueda ---------- */
.v-searchpanel {
	padding: 16px clamp(16px, 3vw, 28px);
	margin-bottom: -28px;
	background: var(--v-surface);
	border-bottom: 1px solid var(--v-line);
}

/* ---------- Átomos ---------- */
.v-icon { width: 20px; height: 20px; flex: none; }
.v-icon--sm { width: 17px; height: 17px; }
.v-icon--xs { width: 14px; height: 14px; }

.v-iconbtn {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--v-text-2);
	cursor: pointer;
	transition: background .16s var(--v-ease), color .16s var(--v-ease);
}
.v-iconbtn:hover { background: var(--v-surface-2); color: var(--v-primary); }
.v-iconbtn--sm { width: 32px; height: 32px; border-radius: 9px; }

.v-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--v-pill);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .14s var(--v-ease), background .16s var(--v-ease), border-color .16s var(--v-ease), box-shadow .16s var(--v-ease);
}
.v-btn:active { transform: translateY(1px); }
.v-btn--sm { padding: 7px 14px; font-size: 13px; }
.v-btn--block { width: 100%; }

.v-btn--primary { background: var(--v-primary); color: #fff; }
.v-btn--primary:hover { background: var(--v-primary-700); color: #fff; box-shadow: var(--v-shadow-2); }

.v-btn--ghost { background: var(--v-surface); border-color: var(--v-line); color: var(--v-text); }
.v-btn--ghost:hover { border-color: var(--v-line-strong); background: var(--v-surface-2); color: var(--v-primary); }

.v-btn--accent { background: var(--v-accent); color: #2A1F06; }

.v-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--v-pill);
	font-size: 12px;
	font-weight: 600;
	background: var(--v-primary);
	color: #fff;
}
.v-badge--tiny { padding: 1px 7px; font-size: 10.5px; letter-spacing: .04em; }

.v-dot {
	display: inline-block;
	width: 3px; height: 3px;
	margin-inline: 8px;
	border-radius: 50%;
	background: var(--v-line-strong);
	vertical-align: middle;
}

.v-avatar { display: inline-block; flex: none; }
.v-avatar img,
.v-avatar .avatar {
	border-radius: 50%;
	object-fit: cover;
	background: var(--v-surface-2);
}
.v-avatar--sm img, .v-avatar--sm .avatar { width: 36px; height: 36px; }

/* Iniciales cuando el usuario no tiene foto ni gravatar. */
.v-avatar__initials {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--v-primary);
	color: #fff;
	font-size: .9em;
	font-weight: 650;
}
.v-avatar--lg img,
.v-avatar--lg .avatar,
.v-avatar--lg .v-avatar__initials { width: 56px; height: 56px; }

.v-empty {
	margin: 0;
	padding: 32px 16px;
	text-align: center;
	color: var(--v-muted);
	font-size: 14.5px;
}

.v-empty--box {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 56px 24px;
	background: var(--v-surface);
	border: 1px dashed var(--v-line-strong);
	border-radius: var(--v-radius);
}
.v-empty__icon { width: 34px; height: 34px; color: var(--v-line-strong); }
.v-empty--box p { margin: 0; }

/* Chips de filtros activos */
.v-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.v-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--v-pill);
	background: rgba(22, 40, 60, .06);
	font-size: var(--v-fs-xs);
	font-weight: 600;
	color: var(--v-text-2);
	transition: background .16s var(--v-ease), color .16s var(--v-ease);
}
.v-chip:hover { background: rgba(210, 69, 60, .1); color: #B0362E; }
.v-chip .v-icon { opacity: .55; }

.v-chips__reset {
	font-size: var(--v-fs-xs);
	font-weight: 600;
	color: var(--v-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.v-chips__reset:hover { color: var(--v-primary); }

/* ---------- Card ---------- */
.v-card {
	background: var(--v-surface);
	border: var(--v-border);
	border-radius: var(--v-radius);
	padding: var(--v-card-pad);
	box-shadow: var(--v-shadow-1);
}

.v-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.v-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	font-weight: 650;
}

.v-card__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--v-text-2);
}
.v-card__more:hover { color: var(--v-primary); }

/* ---------- Page head ---------- */
.v-pagehead { margin-bottom: 22px; }
.v-pagehead__title { font-size: clamp(24px, 3vw, 32px); }

.v-pagehead__sub {
	margin: 6px 0 0;
	font-size: 14.5px;
	color: var(--v-muted);
}

.v-pagehead__eyebrow {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--v-muted);
}



/* ---------- Cabecera del dashboard ----------
   Barra de color a todo el ancho con saludo, buscador y fecha. Debajo arranca
   la grilla de dos columnas. */
.v-head {
	position: relative;
	margin-bottom: var(--v-gap);
	padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 32px);
	border-radius: var(--v-radius-lg);
	background: linear-gradient(135deg, var(--v-primary) 0%, var(--v-primary-700) 100%);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.v-head__media { position: absolute; inset: 0; z-index: -1; }
.v-head__media img,
.v-head__media video { width: 100%; height: 100%; object-fit: cover; opacity: .22; }

.v-head__inner {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
}

.v-head__avatar img,
.v-head__avatar .avatar,
.v-head__avatar .v-avatar__initials {
	width: 56px; height: 56px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .28);
}

.v-head__who { min-width: 0; }

.v-head__hi {
	margin: 0;
	font-size: var(--v-fs-sm);
	color: rgba(255, 255, 255, .72);
}

.v-head__name {
	font-size: clamp(20px, 2.4vw, 27px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Panel montado ---------- */
.v-panel {
	padding: var(--v-card-pad);
	background: var(--v-surface);
	border: var(--v-border);
	border-radius: var(--v-radius);
	box-shadow: var(--v-shadow-2);
}

/* ---------- Carrusel slim ---------- */
.v-slim {
	position: relative;
	border-radius: var(--v-radius);
	overflow: hidden;
	background: var(--v-primary);
}

.v-slim__track { display: flex; }

.v-slim__item {
	position: relative;
	flex: 0 0 100%;
	display: none;
	color: #fff;
}
.v-slim__item.is-active { display: block; animation: v-fade .4s var(--v-ease); }

/* El arte es de 1200x100 y trae el título y la fecha impresos.
   Se muestra entero: `contain` sobre la proporción real evita que se recorten
   los costados, y si algún banner viniera con otra medida queda enmarcado en
   el color de marca en vez de cortado. */
.v-slim__item img {
	width: 100%;
	height: auto;
	aspect-ratio: 12 / 1;
	object-fit: contain;
	background: var(--v-primary);
}

.v-slim__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	cursor: pointer;
	transition: background .16s var(--v-ease);
}
.v-slim__nav:hover { background: rgba(255, 255, 255, .3); }
.v-slim__nav--prev { left: 14px; }
.v-slim__nav--next { right: 14px; }

@keyframes v-fade { from { opacity: 0; } to { opacity: 1; } }



/* ---------- Accesos directos ----------
   Fichas grandes con icono arriba y texto abajo: blanco de toque amplio en
   móvil, y en escritorio siguen leyéndose de un vistazo. */
.v-shortcut {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 92px;
	height: 100%;
	padding: 14px 8px;
	border-radius: var(--v-radius-sm);
	background: rgba(22, 40, 60, .06);
	color: var(--v-text);
	text-align: center;
	transition: background .16s var(--v-ease), transform .16s var(--v-ease);
}
.v-shortcut:hover { background: rgba(22, 40, 60, .11); transform: translateY(-2px); color: var(--v-text); }
.v-shortcut:active { transform: translateY(0); }

.v-shortcut__icon {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 12px;
	background: var(--v-primary);
	color: #fff;
	transition: background .16s var(--v-ease), color .16s var(--v-ease);
}
.v-shortcut__icon .v-icon { width: 21px; height: 21px; }
.v-shortcut:hover .v-shortcut__icon { background: var(--v-accent); color: var(--v-primary); }

.v-shortcut__label {
	width: 100%;
	font-size: var(--v-fs-xs);
	font-weight: 600;
	line-height: 1.25;
	/* Dos renglones como máximo: "Go to Market" no debe pisar al vecino. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* ---------- Grid del dashboard ---------- */
.v-dash__grid {
	display: grid;
	grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
	gap: var(--v-gap);
	align-items: start;
}
.v-dash__col, .v-dash__side { display: grid; gap: var(--v-gap); }

/* ---------- Grids genéricas ---------- */
.v-grid { display: grid; gap: var(--v-gap); }
.v-grid--cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.v-grid--folders { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: var(--v-gap); }
.v-grid--members { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---------- Tile ---------- */
.v-tile {
	display: flex;
	flex-direction: column;
	background: var(--v-surface);
	border: var(--v-border);
	border-radius: var(--v-radius);
	overflow: hidden;
	box-shadow: var(--v-shadow-1);
	transition: transform .18s var(--v-ease), box-shadow .18s var(--v-ease);
}
.v-tile:hover { transform: translateY(-2px); box-shadow: var(--v-shadow-2); }

/* Las fichas de archivo no tienen portada: el cuerpo ocupa toda la tarjeta. */
.v-tile--file { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
.v-tile--file .v-tile__body { padding: 0; gap: 3px; }

.v-tile__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--v-surface-2);
	overflow: hidden;
}
.v-tile__media img { width: 100%; height: 100%; object-fit: cover; }

.v-tile__placeholder {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 6px;
	height: 100%;
	color: var(--v-muted);
}
.v-tile__placeholder em {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
}

.v-tile__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
	flex: 1 1 auto;
}

.v-tile__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--v-accent);
}
.v-tile__title { font-size: 15.5px; font-weight: 650; }
.v-tile__meta, .v-tile__foot {
	margin: 0;
	font-size: 13px;
	color: var(--v-muted);
}
.v-tile__foot { margin-top: auto; padding-top: 8px; }
.v-tile__body .v-btn { align-self: flex-start; margin-top: 10px; }

/* ---------- Filas de lista ----------
   Un solo patrón para eventos, documentos, días no laborables y cumpleaños:
   [ranura delantera] [cuerpo: título + meta] [ranura trasera].
   Antes cada lista tenía su propio juego de clases haciendo exactamente lo
   mismo; unificarlas evita que se vayan separando con cada cambio. */
.v-list { display: grid; gap: 2px; }

.v-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 8px;
	border-radius: var(--v-radius-sm);
	transition: background .16s var(--v-ease);
}
.v-row:hover { background: var(--v-surface-2); }

.v-row__body {
	min-width: 0;
	flex: 1 1 auto;
	display: grid;
	gap: 3px;
}

/* Título + banderas en un renglón: el título cede espacio, las banderas no. */
.v-row__line {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.v-row__line .v-row__title { min-width: 0; flex: 0 1 auto; }
.v-row__line .v-flags { flex: none; margin: 0; }

.v-row__title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--v-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.v-row__title:hover { color: var(--v-primary); }

.v-row__meta {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	margin: 0;
	font-size: var(--v-fs-xs);
	color: var(--v-muted);
}
.v-row__meta .v-icon { opacity: .7; }
.v-row__meta .v-flags { margin: 0; justify-content: flex-start; }

.v-row__end { flex: none; display: flex; align-items: center; gap: 6px; }

/* Cubo de fecha */
.v-date {
	display: grid;
	place-items: center;
	width: 46px;
	flex: none;
	padding: 6px 0;
	border-radius: var(--v-radius-sm);
	background: var(--v-surface-2);
	border: var(--v-border);
	line-height: 1.1;
}
.v-date strong { font-size: 17px; font-weight: 700; }
.v-date small {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--v-muted);
}

/* Distintivo de tipo de archivo */
.v-ext {
	display: grid;
	place-items: center;
	width: 46px; height: 42px;
	flex: none;
	border-radius: var(--v-radius-sm);
	background: var(--v-surface-2);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--v-text-2);
}
.v-ext[data-ext="pdf"] { background: rgba(210, 69, 60, .1); color: #B0362E; }
.v-ext[data-ext="doc"],
.v-ext[data-ext="docx"] { background: rgba(37, 99, 235, .1); color: #1D4ED8; }
.v-ext[data-ext="xls"],
.v-ext[data-ext="xlsx"],
.v-ext[data-ext="csv"] { background: rgba(18, 166, 106, .12); color: #0E7A50; }
.v-ext[data-ext="ppt"],
.v-ext[data-ext="pptx"] { background: rgba(208, 135, 0, .12); color: #A66B00; }
.v-ext[data-ext="jpg"],
.v-ext[data-ext="jpeg"],
.v-ext[data-ext="png"],
.v-ext[data-ext="webp"] { background: rgba(124, 58, 237, .1); color: #6D28D9; }

/* Píldora de estado */
.v-pill {
	flex: none;
	padding: 4px 11px;
	border-radius: var(--v-pill);
	background: var(--v-surface-2);
	border: var(--v-border);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--v-text-2);
	white-space: nowrap;
}
.v-pill--soon {
	background: rgba(200, 165, 91, .16);
	border-color: transparent;
	color: #8A6A17;
}

/* ---------- Checklist de perfil ---------- */
/* ---------- Drive ---------- */
.v-crumbs {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--v-fs-sm);
	color: var(--v-muted);
}
.v-crumbs a:hover { color: var(--v-primary); }
.v-crumbs__sep { display: inline-grid; color: var(--v-line-strong); }

.v-folder {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: var(--v-surface);
	border: var(--v-border);
	border-radius: var(--v-radius);
	box-shadow: var(--v-shadow-1);
	transition: transform .18s var(--v-ease), box-shadow .18s var(--v-ease), border-color .18s var(--v-ease);
}
.v-folder:hover { transform: translateY(-2px); box-shadow: var(--v-shadow-2); border-color: var(--v-line-strong); }

.v-folder__icon {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	flex: none;
	border-radius: 13px;
	background: rgba(200, 165, 91, .14);
	color: #8A6A17;
}
.v-folder__body { min-width: 0; flex: 1 1 auto; }
.v-folder__title { display: block; font-size: 14.5px; font-weight: 650; }
.v-folder__meta { font-size: var(--v-fs-xs); color: var(--v-muted); }

/* ---------- Búsqueda y filtros ---------- */
.v-searchbox, .v-field {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	height: var(--v-control-h);
	background: var(--v-surface);
	border: var(--v-border);
	border-radius: var(--v-pill);
	color: var(--v-muted);
	transition: border-color .16s var(--v-ease), box-shadow .16s var(--v-ease);
}
.v-searchbox:focus-within, .v-field:focus-within {
	border-color: var(--v-primary);
	box-shadow: 0 0 0 3px rgba(22, 40, 60, .07);
}

.v-searchbox input[type="search"],
.v-field input, .v-field select {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	color: var(--v-text);
	outline: none;
	appearance: none;
}
.v-field select {
	cursor: pointer;
	padding-right: 4px;
	width: 100%;
	/* Sin esto el selector reclama el ancho de su opción más larga. */
	text-overflow: ellipsis;
}

/* El campo de búsqueda de WebKit trae decoración propia que rompe el pill. */
.v-field input[type="search"] { width: 100%; -webkit-appearance: none; appearance: none; }
.v-field input[type="search"]::-webkit-search-decoration,
.v-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.v-searchbox--wide {
	max-width: 620px;
	margin-inline: auto;
	padding-right: 5px;
	height: 46px;
}
.v-searchbox--wide .v-btn { margin-left: auto; }

.v-filters {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px;
	margin-bottom: 18px;
	background: var(--v-surface);
	border: var(--v-border);
	border-radius: var(--v-radius);
	box-shadow: var(--v-shadow-1);
}
/* El buscador se queda con todo el espacio sobrante; los selectores toman el
   ancho de su contenido con un tope, para que un país de nombre largo no
   estire la barra ni deje huecos. */
.v-field--grow { flex: 1 1 auto; min-width: 180px; padding-right: 14px; }

.v-field { position: relative; flex: 0 1 auto; padding-right: 34px; }
.v-filters .v-field:not(.v-field--grow) { max-width: 220px; }
.v-field__caret {
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	pointer-events: none;
	color: var(--v-muted);
}

.v-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.v-toolbar__count {
	margin: 0;
	font-size: var(--v-fs-sm);
	font-weight: 600;
	color: var(--v-muted);
}

/* ---------- Miembro ----------
   La tarjeta no lleva etiqueta de tipo: el tipo de miembro sigue existiendo
   como filtro arriba, pero en la grilla ensuciaba la esquina y desalineaba las
   tarjetas que no lo tenían. */
.v-member {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 26px 18px 20px;
	text-align: center;
	background: var(--v-surface);
	border: var(--v-border);
	border-radius: var(--v-radius);
	box-shadow: var(--v-shadow-1);
	color: inherit;
	/* En .v-prose los links van subrayados; la tarjeta nunca lo está. */
	text-decoration: none;
	transition: transform .18s var(--v-ease), box-shadow .18s var(--v-ease), border-color .18s var(--v-ease);
}
.v-member:hover {
	transform: translateY(-3px);
	box-shadow: var(--v-shadow-2);
	border-color: var(--v-line-strong);
	color: inherit;
}
.v-member:hover .v-member__name { color: var(--v-primary); }
.v-member:hover .v-member__avatar::after { border-color: var(--v-accent); }

.v-member__avatar {
	position: relative;
	display: block;
	margin-bottom: 2px;
	border-radius: 50%;
}
/* El aro va como pseudo-elemento para poder teñirlo en hover sin mover nada. */
.v-member__avatar::after {
	content: "";
	position: absolute;
	inset: -4px;
	border: 2px solid var(--v-line);
	border-radius: 50%;
	transition: border-color .18s var(--v-ease);
}
.v-member__avatar img, .v-member__avatar .avatar {
	width: 84px; height: 84px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--v-surface-2);
}

.v-member__name {
	font-size: 15px;
	font-weight: 650;
	line-height: 1.3;
	/* Dos renglones fijos: así las banderas y el "activo hace…" quedan a la
	   misma altura en toda la fila, tenga el nombre una línea o dos. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.3em);
	/* Nombres largos no deben empujar la tarjeta. */
	overflow-wrap: anywhere;
	transition: color .16s var(--v-ease);
}

/* ---------- Banderas ----------
   Se sirven como PNG desde assets/flags/. Los emoji de bandera no se dibujan
   en Windows, que es donde no se veían. */
.v-flags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
	min-height: 15px;
	margin: 2px 0;
}
.v-flags__item { display: inline-flex; line-height: 0; }
.v-flags--sm { gap: 3px; min-height: 0; }
.v-flags--sm .v-flags__item img { width: 15px; height: 11px; border-radius: 1.5px; }
.v-flags--sm .v-flags__item--more,
.v-flags--sm .v-flags__item abbr { font-size: 9.5px; line-height: 11px; }

.v-flags__item img {
	width: 20px;
	height: 15px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(22, 40, 60, .1);
	object-fit: cover;
}
.v-flags__item abbr {
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: .04em;
	color: var(--v-muted);
	text-decoration: none;
}
.v-flags__item--more {
	font-size: 10.5px;
	font-weight: 700;
	line-height: 15px;
	color: var(--v-muted);
	cursor: help;
}

/* `auto` arriba: la meta se apoya en el piso de la tarjeta aunque el bloque de
   banderas venga vacío, y todas las tarjetas de la fila cierran parejas. */
.v-member__meta { margin: auto 0 0; padding-top: 2px; font-size: var(--v-fs-xs); color: var(--v-muted); }

/* ---------- Tabs / pager ---------- */

.v-pager {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
}
.v-pager__link, .v-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: var(--v-control-h-sm); height: var(--v-control-h-sm);
	padding-inline: 10px;
	/* Redondeo completo, como los botones y los chips: la paginación dejaba de
	   parecer parte del mismo sistema con esquinas cuadradas. */
	border-radius: var(--v-pill);
	border: var(--v-border);
	background: var(--v-surface);
	font-size: var(--v-fs-sm);
	font-weight: 600;
	color: var(--v-text-2);
	transition: border-color .16s var(--v-ease), background .16s var(--v-ease), color .16s var(--v-ease);
}
.v-pager__link:hover { border-color: var(--v-line-strong); background: var(--v-surface-2); color: var(--v-text); }

.v-pager__link.is-current, .v-pager .page-numbers.current {
	background: var(--v-primary);
	border-color: var(--v-primary);
	color: #fff;
}

.v-deflist { display: grid; gap: 10px; margin-bottom: 18px; font-size: 14px; }
.v-deflist dt {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--v-muted);
}
.v-deflist dd { margin: 0; }

/* ---------- Prosa ---------- */
.v-prose {
	background: var(--v-surface);
	border: var(--v-border);
	border-radius: var(--v-radius);
	padding: clamp(20px, 3vw, 34px);
	box-shadow: var(--v-shadow-1);
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--v-text-2);
}
.v-prose > :first-child { margin-top: 0; }
.v-prose > :last-child { margin-bottom: 0; }
.v-prose h2, .v-prose h3, .v-prose h4 { margin: 1.6em 0 .5em; color: var(--v-text); }
.v-prose h2 { font-size: 22px; }
.v-prose h3 { font-size: 18px; }
.v-prose a { color: var(--v-primary); text-decoration: underline; text-underline-offset: 2px; }
.v-prose ul, .v-prose ol { margin: 0 0 1em 1.25em; }
.v-prose ul li { list-style: disc; }
.v-prose ol li { list-style: decimal; }
.v-prose img { border-radius: var(--v-radius-sm); }
.v-prose blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--v-accent);
	color: var(--v-text);
}
.v-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.v-prose th, .v-prose td { padding: 10px 12px; border-bottom: 1px solid var(--v-line); text-align: left; }

.v-page__media { margin: 0 0 24px; border-radius: var(--v-radius); overflow: hidden; }

/* ---------- Estados ---------- */
.v-state {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: clamp(48px, 10vh, 110px) 20px;
	text-align: center;
}
.v-state--hero { min-height: 70vh; align-content: center; }
.v-state__logo { margin-bottom: 8px; }
.v-state__title { font-size: clamp(28px, 5vw, 46px); }
.v-state__text { max-width: 46ch; color: var(--v-muted); }

.v-body--bare { background: var(--v-bg); }

/* ---------- Footer ---------- */
.v-footer {
	margin-top: auto;
	border-top: 1px solid var(--v-line);
	background: var(--v-surface);
}
.v-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 22px var(--v-container-x);
	font-size: var(--v-fs-sm);
	color: var(--v-muted);
}
.v-footer__copy { margin: 0; }
.v-footer__nav { display: flex; gap: 18px; }

/* ---------- Toast / PWA ---------- */
.v-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 100;
	transform: translate(-50%, 12px);
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: min(92vw, 460px);
	padding: 12px 18px;
	border-radius: 14px;
	background: var(--v-primary);
	color: #fff;
	font-size: 14px;
	box-shadow: var(--v-shadow-3);
	opacity: 0;
	transition: opacity .22s var(--v-ease), transform .22s var(--v-ease);
}
.v-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.v-toast .v-btn { padding: 6px 14px; font-size: 13px; }
.v-toast .v-btn--accent { background: var(--v-accent); color: #2A1F06; }
.v-toast__close {
	background: none;
	border: 0;
	color: rgba(255, 255, 255, .7);
	cursor: pointer;
	padding: 4px;
	line-height: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	/* El dashboard pasa a una sola columna: la barra lateral queda debajo. */
	.v-dash__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
	/* La barra pasa a ser un cajón: el contenido ocupa todo el ancho y la
	   navegación la resuelve la barra inferior. */
	:root { --v-rail-w: 0px; }

	.v-shell__main { margin-left: 0; }

	.v-rail {
		/* Ancho propio, no el de la variable: esa vale 0 acá para que el
		   contenido no quede corrido, pero el cajón sí tiene que medir algo.
		   Sin esto se abría con 0px de ancho y sus enlaces eran intocables. */
		width: min(84vw, 300px);
		transform: translateX(-100%);
		transition: transform .24s var(--v-ease);
		box-shadow: none;
		padding-bottom: calc(18px + env(safe-area-inset-bottom));
	}
	.v-rail.is-open { transform: translateX(0); box-shadow: var(--v-shadow-3); }
	.v-rail__link.is-current::before { display: none; }

	/* Objetivos de toque más generosos dentro del cajón. */
	.v-rail__link { padding-block: 11px; }
}

/* Zoom automático de iOS: Safari agranda la página al enfocar un campo de
   menos de 16px y deja todo descolocado. Solo en pantallas táctiles, para no
   engordar los formularios en escritorio. */
@media (max-width: 860px) and (pointer: coarse) {
	.v-field input,
	.v-field select,
	.v-input,
	select.v-input,
	textarea.v-input { font-size: 16px; }
}

@media (max-width: 520px) {
	:root {
		--v-container-top: 20px;
		/* Muescas y esquinas redondeadas: el contenido no se mete abajo del borde. */
		--v-container-x: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));

		/* Todo se contrae desde acá: los dos tokens de espaciado gobiernan el
		   aire entre bloques y adentro de las tarjetas en todo el theme, así que
		   bajarlos compacta la pantalla entera sin tocar componente por
		   componente. En el celular el aire de escritorio sobra. */
		--v-gap: 12px;
		--v-card-pad: 14px 15px;
	}

	.v-grid--members { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.v-member { padding: 18px 12px 16px; gap: 6px; }
	.v-member__avatar img, .v-member__avatar .avatar { width: 64px; height: 64px; }
	.v-member__name { font-size: 13.5px; }

	/* Filtros: el buscador arriba a todo el ancho, los selectores repartidos y
	   el botón cerrando la barra. Antes quedaban tres renglones desparejos. */
	.v-filters { gap: 8px; padding: 10px; }
	.v-filters .v-field--grow { flex: 1 0 100%; }
	.v-filters .v-field:not(.v-field--grow) { flex: 1 1 calc(50% - 4px); max-width: none; }
	.v-filters .v-btn { flex: 1 0 100%; }

	/* Filas de lista: más alto de toque y sin apretar el texto contra el borde. */
	.v-row { padding: 11px 6px; gap: 10px; }
	.v-date { width: 42px; }

	/* .v-card y .v-panel ya toman el relleno de --v-card-pad. */
	.v-pagehead { margin-bottom: 12px; }
	.v-pagehead__title { font-size: clamp(21px, 5.5vw, 26px); }
	.v-toolbar { gap: 8px; margin-bottom: 10px; }
	.v-card__head { margin-bottom: 10px; }
	.v-card__title { font-size: 15px; }

	/* La ficha de la lección también se aprieta: el video manda y el resto
	   acompaña sin empujar la pantalla hacia abajo. */
	.v-lesson__meta { margin-bottom: 12px; }
	.v-lesson__title { font-size: clamp(19px, 5vw, 23px); }
}

/* Nada debe empujar el ancho de la pantalla. Lo que no entra scrollea dentro
   de su propia caja, no arrastrando la página entera de costado. */
@media (max-width: 860px) {
	.v-prose table,
	.v-lesson__notes table { display: block; width: 100%; overflow-x: auto; }
	.v-prose pre { overflow-x: auto; }
}

/* Tacto de app en pantallas táctiles: al tocar, el elemento responde con un
   hundido corto en vez del recuadro gris del navegador. El :active reemplaza
   al hover, que en un dedo no existe. */
@media (pointer: coarse) {
	a, button, .v-btn, .v-row, .v-tabbar__item, .v-member, .v-tile {
		-webkit-tap-highlight-color: transparent;
	}

	.v-btn:active,
	.v-tabbar__item:active,
	.v-iconbtn:active { transform: scale(.96); }

	.v-member:active,
	.v-tile:active { transform: scale(.985); }

	.v-row:active { background: var(--v-surface-2); }

	/* El hover deja el color pegado después de tocar; en táctil no va. */
	.v-member:hover { transform: none; box-shadow: var(--v-shadow-1); }
}

/* Modo app instalada: sin barra del navegador. */
@media (display-mode: standalone) {
	.v-footer { display: none; }
	.v-main { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
	/* La muesca de la cabecera se resuelve más abajo, después del bloque de
	   760px: si fuera acá, el padding-block de ahí la pisaría por venir después. */
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.v-rail, .v-footer, .v-toast, .v-tabbar { display: none !important; }
	.v-shell__main { margin-left: 0; }
	.v-card, .v-prose { border: 0; box-shadow: none; }
}

/* =========================================================================
   Pantallas de acceso: ingreso y registro

   Layout partido — panel de bienvenida a la izquierda con la imagen de fondo,
   formulario a la derecha. Replica el ingreso actual de BuddyBoss.
   ========================================================================= */

.v-body--auth { background: var(--v-surface); }

.v-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	min-height: 100svh;
}

/* ---------- Panel de bienvenida ---------- */
.v-split__aside {
	position: relative;
	display: flex;
	align-items: center;
	padding: clamp(32px, 6vw, 72px);
	background: var(--v-primary) center / cover no-repeat;
	color: #fff;
	overflow: hidden;
}

/* Velo oscuro para que el texto se lea sobre cualquier foto. */
.v-split__aside::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(10, 20, 32, .78) 0%, rgba(10, 20, 32, .58) 55%, rgba(10, 20, 32, .82) 100%);
}

.v-split__aside-inner { position: relative; z-index: 1; max-width: 460px; }

.v-split__title {
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
}
.v-split__title span { color: var(--v-accent); }

.v-split__text {
	margin: 18px 0 0;
	font-size: clamp(14.5px, 1.1vw, 16px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
}

/* ---------- Columna del formulario ---------- */
.v-split__main {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	max-height: 100vh;
	max-height: 100svh;
}

.v-split__inner {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 48px);
}

.v-split__foot {
	flex: none;
	padding: 0 clamp(20px, 4vw, 48px) 28px;
	text-align: center;
}

.v-split__legal { margin: 0; font-size: var(--v-fs-xs); color: var(--v-muted); }
.v-split__legal a { color: var(--v-text-2); text-decoration: underline; text-underline-offset: 2px; }
.v-split__legal a:hover { color: var(--v-primary); }

/* ---------- Caja del formulario ---------- */
.v-authbox { width: 100%; max-width: 400px; }
.v-authbox--wide { max-width: 440px; }
.v-authbox--center { text-align: center; }

.v-authbox__logo { display: block; width: fit-content; margin: 0 auto 32px; }
.v-authbox__logo img { height: 44px; width: auto; }

.v-authbox__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.v-authbox__title { font-size: 22px; font-weight: 650; }

.v-authbox__switch {
	font-size: var(--v-fs-sm);
	font-weight: 500;
	color: var(--v-text-2);
	white-space: nowrap;
}
.v-authbox__switch:hover { color: var(--v-primary); text-decoration: underline; text-underline-offset: 2px; }

.v-authbox__lead {
	margin-bottom: 22px;
	font-size: var(--v-fs-sm);
	line-height: 1.6;
	color: var(--v-muted);
	text-align: center;
}
.v-authbox__lead--left { text-align: left; }

.v-authbox__check {
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: rgba(18, 166, 106, .12);
	color: var(--v-ok);
}
.v-authbox__check .v-icon { width: 26px; height: 26px; }

.v-authbox__options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 14px 0 20px;
	font-size: var(--v-fs-sm);
}

.v-authbox__link { color: var(--v-text-2); }
.v-authbox__link:hover { color: var(--v-primary); text-decoration: underline; text-underline-offset: 2px; }

.v-authbox__foot { margin: 20px 0 0; font-size: var(--v-fs-sm); text-align: center; color: var(--v-muted); }
.v-authbox__foot a { font-weight: 600; color: var(--v-primary); text-decoration: underline; text-underline-offset: 2px; }

/* Aviso neutro, como el "You are now logged out" actual. */
.v-notice {
	padding: 13px 16px;
	margin-bottom: 18px;
	border-radius: var(--v-radius-sm);
	background: var(--v-primary);
	color: #fff;
	font-size: var(--v-fs-sm);
}

/* ---------- Campos ---------- */
.v-form__row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.v-label { font-size: 13px; font-weight: 600; color: var(--v-text); }
.v-req { margin-left: 3px; color: var(--v-danger); }

.v-input {
	width: 100%;
	padding: 12px 14px;
	border: var(--v-border);
	border-radius: var(--v-radius-sm);
	background: var(--v-surface-2);
	font: inherit;
	font-size: 14.5px;
	color: var(--v-text);
	transition: border-color .16s var(--v-ease), box-shadow .16s var(--v-ease), background .16s var(--v-ease);
}
.v-input:focus {
	outline: none;
	background: var(--v-surface);
	border-color: var(--v-primary);
	box-shadow: 0 0 0 3px rgba(22, 40, 60, .07);
}
.v-input.has-error { border-color: var(--v-danger); background: rgba(210, 69, 60, .04); }
.v-input.has-error:focus { box-shadow: 0 0 0 3px rgba(210, 69, 60, .12); }

select.v-input { cursor: pointer; appearance: none; background-image: none; padding-right: 34px; }

.v-hint { margin: 0; font-size: var(--v-fs-xs); color: var(--v-muted); }
.v-error { margin: 0; font-size: var(--v-fs-xs); font-weight: 500; color: var(--v-danger); }

/* Campo con icono adelante y/o botón de revelar atrás */
.v-inputgroup { position: relative; margin-bottom: 14px; }
.v-form__row .v-inputgroup { margin-bottom: 0; }

.v-inputgroup__icon {
	position: absolute;
	left: 14px; top: 50%;
	transform: translateY(-50%);
	color: var(--v-muted);
	pointer-events: none;
}
.v-input--icon { padding-left: 42px; }
.v-input--reveal { padding-right: 44px; }

.v-reveal {
	position: absolute;
	right: 6px; top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--v-muted);
	cursor: pointer;
	transition: color .16s var(--v-ease), background .16s var(--v-ease);
}
.v-reveal:hover { color: var(--v-text); background: var(--v-line); }

/* Fecha de nacimiento en tres selectores */
.v-datefields { display: grid; grid-template-columns: 88px 1fr 100px; gap: 8px; }

.v-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	color: var(--v-text-2);
}
.v-check input { accent-color: var(--v-primary); flex: none; }
.v-check--terms { align-items: flex-start; font-size: var(--v-fs-sm); line-height: 1.5; }
.v-check--terms input { margin-top: 3px; }
.v-check--terms a { color: var(--v-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Selector de países ---------- */
.v-picker {
	border: var(--v-border);
	border-radius: var(--v-radius-sm);
	background: var(--v-surface-2);
	overflow: hidden;
}
.v-picker.has-error { border-color: var(--v-danger); }

.v-picker__search {
	width: 100%;
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid var(--v-line);
	background: var(--v-surface);
	font: inherit;
	font-size: 14px;
	color: var(--v-text);
}
.v-picker__search:focus { outline: none; box-shadow: inset 0 -2px 0 var(--v-accent); }

.v-picker__list { max-height: 220px; overflow-y: auto; padding: 6px; }

.v-picker__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 9px;
	border-radius: 8px;
	font-size: var(--v-fs-sm);
	cursor: pointer;
	transition: background .14s var(--v-ease);
}
.v-picker__item:hover { background: var(--v-surface); }
.v-picker__item input { accent-color: var(--v-primary); flex: none; }
.v-picker__item img {
	width: 20px; height: 15px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(22, 40, 60, .1);
	flex: none;
}
.v-picker__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-picker__item:has(input:checked) { background: rgba(200, 165, 91, .16); font-weight: 600; }
.v-picker__item[hidden] { display: none; }

.v-picker__count {
	margin: 0;
	padding: 8px 14px;
	border-top: 1px solid var(--v-line);
	background: var(--v-surface);
	font-size: var(--v-fs-xs);
	color: var(--v-muted);
}
.v-picker__count:empty { display: none; }

/* ---------- Avisos ---------- */
.v-alert {
	padding: 14px 16px;
	margin-bottom: 20px;
	border-radius: var(--v-radius-sm);
	border-left: 3px solid var(--v-line-strong);
	background: var(--v-surface-2);
	font-size: var(--v-fs-sm);
	line-height: 1.55;
}
.v-alert p { margin: 0 0 6px; }
.v-alert p:last-child { margin-bottom: 0; }
.v-alert ul { margin: 0; padding-left: 18px; }
.v-alert li { list-style: disc; margin-bottom: 4px; }
.v-alert li:last-child { margin-bottom: 0; }

.v-alert--error {
	border-left-color: var(--v-danger);
	background: rgba(210, 69, 60, .06);
	color: #8E2B24;
}

/* Trampa para bots: fuera de la vista pero accesible para el navegador. */
.v-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* ---------- Adaptación a pantallas chicas ---------- */
@media (max-width: 980px) {
	.v-split { grid-template-columns: 1fr; }

	.v-split__aside {
		min-height: 210px;
		align-items: flex-end;
		padding: 28px 24px;
	}
	.v-split__title { font-size: clamp(24px, 6vw, 32px); }
	.v-split__text { margin-top: 10px; font-size: 14px; }

	.v-split__main { max-height: none; }
	.v-split__inner { padding: 32px 24px; }
	.v-authbox, .v-authbox--wide { max-width: 460px; }
}

@media (max-width: 480px) {
	.v-datefields { grid-template-columns: 1fr; }
	.v-authbox__head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* =========================================================================
   Barra de navegación inferior (móvil)
   ========================================================================= */
.v-tabbar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 70;
	display: none;
	grid-template-columns: repeat(5, 1fr);
	align-items: end;
	gap: 2px;
	padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(180%) blur(14px);
	border-top: 1px solid var(--v-line);
}

.v-tabbar__item {
	/* "Más" es un <button>: se iguala a los enlaces vecinos. */
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 7px 2px;
	border-radius: 12px;
	color: var(--v-muted);
	font-size: 10.5px;
	font-weight: 600;
	text-align: center;
	transition: color .16s var(--v-ease);
}
.v-tabbar__item.is-current { color: var(--v-primary); }
.v-tabbar__item.is-current .v-tabbar__icon { color: var(--v-primary); }

.v-tabbar__icon { display: grid; place-items: center; }
.v-tabbar__icon .v-icon { width: 22px; height: 22px; }

.v-tabbar__label {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Acceso central destacado, como el botón de acción de una app. */
.v-tabbar__item--primary { position: relative; color: var(--v-text-2); }

.v-tabbar__item--primary .v-tabbar__icon {
	width: 50px; height: 50px;
	margin-top: -22px;
	border-radius: 17px;
	background: var(--v-primary);
	color: #fff;
	box-shadow: 0 6px 18px rgba(22, 40, 60, .3);
}
.v-tabbar__item--primary.is-current .v-tabbar__icon { background: var(--v-primary); color: var(--v-accent); }

@media (max-width: 860px) {
	.v-tabbar { display: grid; }

	/* Deja aire para que la barra no tape el final del contenido. */
	.v-main { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
	.v-footer { margin-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   Ajustes de la home en pantallas chicas
   ========================================================================= */
@media (max-width: 760px) {
	/* La cabecera se estira de borde a borde y se apoya en el techo de la
	   pantalla, como el header de una app: sin franja blanca arriba y con las
	   esquinas redondeadas solo abajo. El margen negativo usa los mismos tokens
	   que el padding del contenedor, así siempre cierra justo con los bordes. */
	.v-dash .v-head {
		margin-top: calc(var(--v-container-top) * -1);
		margin-inline: calc(var(--v-container-x) * -1);
		border-radius: 0 0 var(--v-radius-lg) var(--v-radius-lg);
		/* Compacta: sin buscador adentro no hace falta tanto alto.

		   El relleno de arriba NO le suma env(safe-area-inset-top). Como el
		   viewport va con viewport-fit=cover, iOS informa la muesca —unos 47px—
		   y sumarla acá dejaba esa franja de azul vacío arriba del saludo aun
		   dentro del navegador, donde la barra de direcciones ya ocupa ese lugar.
		   La muesca solo hace falta con la app instalada: se agrega abajo, en el
		   bloque de display-mode. */
		padding-top: 6px;
		padding-bottom: 8px;
		padding-inline: max(var(--v-container-x), 18px);
	}
	.v-dash__grid { gap: 14px; }

	/* El buscador se apaga abajo, junto a su propia definición: acá la regla
	   quedaba antes que ella en el archivo y no ganaba.

	   Pasa de grilla a flex para poder centrar el conjunto: con la columna
	   minmax(0, 1fr) el bloque de texto se estiraba hasta el borde derecho y
	   empujaba al par contra la izquierda. En flex, avatar y texto miden lo que
	   necesitan y el grupo queda al medio, con el mismo orden de ahora. */
	.v-head__inner {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	/* El bloque de texto también centrado. Centrar solo el grupo no alcanzaba:
	   el saludo es corto y el nombre largo, así que alineados a la izquierda
	   dejaban el conjunto visualmente corrido aunque la caja estuviera al medio.
	   El nombre además deja de recortarse con puntos suspensivos: en dos
	   renglones entra entero y sigue centrado. */
	.v-head__who { text-align: center; }
	.v-head__name { white-space: normal; overflow: visible; }

	.v-head__hi { font-size: var(--v-fs-xs); line-height: 1.15; }
	.v-head__name { font-size: 16px; line-height: 1.2; }

	.v-head__avatar img,
	.v-head__avatar .avatar,
	.v-head__avatar .v-avatar__initials { width: 32px; height: 32px; }

	.v-shortcut { min-height: 84px; padding: 12px 4px; }
	.v-shortcut__icon { width: 36px; height: 36px; border-radius: 11px; }
	.v-shortcut__label { font-size: 11.5px; }
}

/* Las fichas de acceso rápido se ajustan más abajo, en el bloque de 620px,
   donde cada área pasa a un solo renglón. */

/* Con la app instalada la página arranca abajo del reloj y la señal. Ese lugar
   se lo hace el contenedor de toda la app, NO la cabecera: si el hueco se lo
   cargaba la cabecera, quedaba una barra azul altísima. Así la franja del reloj
   queda fuera del azul y la cabecera conserva sus 6px de relleno.

   Va acá y no en el bloque de display-mode de más arriba porque el padding del
   bloque de 760px lo pisaría por venir después. */
@media (display-mode: standalone) {
	.v-shell__main { padding-top: env(safe-area-inset-top); }

	/* La franja del reloj se pinta SOLO en la home, que es la única pantalla con
	   cabecera azul: así se ve como una continuación de la barra y no como un
	   parche. En el resto acompaña al fondo claro de la página.

	   El degradado con paradas duras es un truco para teñir únicamente esos
	   píxeles de arriba. Antes esto era `background` sobre .v-shell, que envuelve
	   TODA la página: por eso quedaba el fondo azul de punta a punta. */
	body.home .v-shell__main,
	body.page-template-tpl-dashboard .v-shell__main {
		background:
			linear-gradient(
				var(--v-primary) 0,
				var(--v-primary) env(safe-area-inset-top),
				transparent env(safe-area-inset-top)
			) no-repeat;
	}
}

/* =========================================================================
   Buscador de la cabecera
   ========================================================================= */
.v-headsearch {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	width: 100%;
	max-width: 420px;
	justify-self: end;
}

/* Fuera de la cabecera en el celular: ahí la barra azul tiene que ser bien
   compacta, y buscar se busca desde el cajón lateral ("More" en la barra de
   abajo). Va acá abajo y no en el bloque de móvil de más arriba a propósito:
   una media query no suma especificidad, así que la regla tiene que venir
   DESPUÉS de la declaración de display de arriba o no gana. */
@media (max-width: 760px) {
	.v-headsearch { display: none; }
}
.v-headsearch .v-icon {
	position: absolute;
	left: 14px;
	color: rgba(255, 255, 255, .55);
	pointer-events: none;
}
.v-headsearch input {
	width: 100%;
	padding: 10px 16px 10px 40px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--v-radius-sm);
	background: rgba(255, 255, 255, .08);
	font: inherit;
	font-size: 14px;
	color: #fff;
	transition: background .16s var(--v-ease), border-color .16s var(--v-ease);
}
.v-headsearch input::placeholder { color: rgba(255, 255, 255, .5); }
.v-headsearch input:focus {
	outline: none;
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .32);
}

/* =========================================================================
   Connect with VGV Corporate
   ========================================================================= */
.v-social__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}

.v-social__item {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: var(--v-radius-sm);
	overflow: hidden;
	background: var(--v-surface-2);
}
.v-social__item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .3s var(--v-ease), filter .2s var(--v-ease);
}
.v-social__item:hover img { transform: scale(1.06); filter: brightness(.88); }

.v-social__badge {
	position: absolute;
	top: 5px; right: 5px;
	display: grid;
	place-items: center;
	width: 20px; height: 20px;
	border-radius: 6px;
	background: rgba(15, 26, 38, .6);
	color: #fff;
}

.v-social__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--v-line);
}

.v-social__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: var(--v-pill);
	border: var(--v-border);
	font-size: var(--v-fs-xs);
	font-weight: 600;
	color: var(--v-text-2);
	transition: border-color .16s var(--v-ease), background .16s var(--v-ease), color .16s var(--v-ease);
}
.v-social__link:hover {
	border-color: var(--v-primary);
	background: var(--v-primary);
	color: #fff;
}

/* =========================================================================
   Accesos rápidos
   ========================================================================= */
/* El propio <nav> es la fila de áreas: ya no hay un título suelto arriba. */
.v-shortcuts {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

/* Cada área crece según cuántos accesos tiene, así las fichas conservan el
   mismo ancho aunque un área tenga 4 y la otra 3. */
.v-shortcuts__area {
	display: flex;
	flex-direction: column;
	flex: 4 1 0;
	min-width: 0;
	padding: 10px;
	border-radius: var(--v-radius);
}
.v-shortcuts__area--dark {
	flex: 3 1 0;
	background: linear-gradient(135deg, var(--v-primary) 0%, var(--v-primary-700) 100%);
}

/* Altura fija en el encabezado: es lo que hace que el rótulo de la izquierda y
   el logo de Academy queden a la misma altura y las fichas arranquen parejas. */
.v-shortcuts__area-title {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Altura fija: es lo que mantiene el rótulo y el logo de Academy a la misma
	   altura, y por lo tanto las fichas de ambos lados alineadas. */
	height: 28px;
	margin: 0 0 12px;
	padding-inline: 4px;
	font-size: 16px;
	font-weight: 650;
	color: var(--v-text);
}
.v-shortcuts__area-title img { height: 20px; width: auto; }

.v-shortcuts__slash {
	color: var(--v-accent);
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
}

.v-shortcuts__word {
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

.v-shortcuts__group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
	gap: 10px;
	/* Ocupa el alto sobrante y las fichas se estiran: los bordes de abajo de
	   ambas áreas terminan en la misma línea aunque una etiqueta use dos
	   renglones. */
	flex: 1 1 auto;
}

.v-shortcuts__area--dark .v-shortcut {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}
.v-shortcuts__area--dark .v-shortcut:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.v-shortcuts__area--dark .v-shortcut__icon {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}
.v-shortcuts__area--dark .v-shortcut:hover .v-shortcut__icon {
	background: var(--v-accent);
	color: var(--v-primary);
}

/* Recién en pantallas angostas las áreas pasan una debajo de la otra. */
@media (max-width: 620px) {
	.v-shortcuts { flex-wrap: wrap; gap: 8px; }
	.v-shortcuts__area, .v-shortcuts__area--dark { flex-basis: 100%; padding: 8px; }

	/* Cada área en un renglón: --v-cols lo pone la plantilla según cuántas
	   fichas tiene (4 en accesos rápidos, 3 en Academy). Apiladas de a dos
	   columnas ocupaban el doble de alto sin ganar nada. */
	.v-shortcuts__group {
		grid-template-columns: repeat(var(--v-cols, 2), minmax(0, 1fr));
		gap: 6px;
	}

	.v-shortcuts__area-title {
		height: 22px;
		margin-bottom: 8px;
		font-size: 14.5px;
	}
	.v-shortcuts__area-title img { height: 17px; }
	.v-shortcuts__slash { font-size: 17px; }
	.v-shortcuts__word { font-size: 12.5px; }

	/* Fichas más bajas: con cuatro por renglón el alto de antes las dejaba
	   cuadradas y comiéndose media pantalla. */
	.v-shortcut { min-height: 66px; padding: 9px 3px; gap: 5px; }
	.v-shortcut__icon { width: 30px; height: 30px; border-radius: 9px; }
	.v-shortcut__icon .v-icon { width: 17px; height: 17px; }
	.v-shortcut__label { font-size: 10.5px; line-height: 1.2; }
}

/* =========================================================================
   Videoteca
   ========================================================================= */
.v-category-catalog__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin: 0 0 22px;
}

.v-category-catalog__head > div > span {
	display: block;
	margin-bottom: 5px;
	color: var(--v-accent);
	font-size: 10px;
	font-weight: 750;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.v-category-catalog__head h2 {
	margin: 0;
	font-size: clamp(22px, 2.3vw, 32px);
	line-height: 1.15;
	letter-spacing: -.025em;
}

.v-category-catalog__head p {
	max-width: 420px;
	margin: 0;
	color: var(--v-muted);
	font-size: var(--v-fs-sm);
	line-height: 1.55;
}

.v-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
	gap: var(--v-gap);
}

.v-category-card {
	display: block;
	min-width: 0;
	overflow: hidden;
	border: var(--v-border);
	border-radius: var(--v-radius);
	background: var(--v-surface);
	box-shadow: var(--v-shadow-1);
	color: var(--v-text);
	transition: transform .2s var(--v-ease), border-color .2s var(--v-ease), box-shadow .2s var(--v-ease);
}

.v-category-card:hover {
	border-color: var(--v-line-strong);
	box-shadow: var(--v-shadow-2);
	color: var(--v-text);
	transform: translateY(-3px);
}

.v-category-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--v-primary);
}

.v-category-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s var(--v-ease);
}

.v-category-card:hover .v-category-card__media img { transform: scale(1.04); }

.v-category-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: rgba(255,255,255,.55);
}

.v-category-card__placeholder .v-icon { width: 34px; height: 34px; }

.v-category-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 35%, rgba(15,26,38,.48));
	pointer-events: none;
}

.v-category-card__featured {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 9px;
	border-radius: 999px;
	background: var(--v-accent);
	color: #2A1F06;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.v-category-card__body {
	display: flex;
	flex-direction: column;
	min-height: 146px;
	padding: 18px;
}

.v-category-card__count {
	color: var(--v-muted);
	font-size: 11px;
	font-weight: 650;
	text-transform: uppercase;
}

.v-category-card__title {
	display: block;
	margin-top: 7px;
	font-size: 17px;
	font-weight: 750;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.v-category-card__action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--v-primary);
	font-size: 12px;
	font-weight: 700;
}

.v-category-card__action .v-icon {
	transform: rotate(-90deg);
	transition: transform .18s var(--v-ease);
}

.v-category-card:hover .v-category-card__action .v-icon { transform: translateX(3px) rotate(-90deg); }

.v-category-card--live {
	border-color: rgba(200,165,91,.62);
	box-shadow: 0 10px 30px rgba(200,165,91,.14);
}

@media (max-width: 700px) {
	.v-category-catalog__head { display: block; margin-bottom: 16px; }
	.v-category-catalog__head p { margin-top: 8px; }
	.v-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.v-category-card__body { min-height: 130px; padding: 13px; }
	.v-category-card__title { font-size: 14px; }
	.v-category-card__action { padding-top: 13px; font-size: 11px; }
}

.v-tile__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.v-tile__play .v-icon {
	width: 44px; height: 44px;
	padding: 12px;
	border-radius: 50%;
	background: rgba(15, 26, 38, .58);
	color: #fff;
	backdrop-filter: blur(2px);
	transition: background .18s var(--v-ease), transform .18s var(--v-ease);
}
.v-tile:hover .v-tile__play .v-icon { background: var(--v-primary); transform: scale(1.08); }

.v-tile__time {
	position: absolute;
	right: 8px; bottom: 8px;
	padding: 2px 7px;
	border-radius: 6px;
	background: rgba(15, 26, 38, .78);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
}

.v-tile__seen {
	position: absolute;
	left: 8px; top: 8px;
	display: grid;
	place-items: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--v-ok);
	color: #fff;
}

/* La ficha vista se atenúa apenas: sigue legible pero no compite. */
.v-tile.is-watched .v-tile__media img { opacity: .62; }
.v-tile.is-watched:hover .v-tile__media img { opacity: 1; }

/* El contenedor de la portada necesita ser el marco de las etiquetas. */
.v-tile__media { position: relative; }

/* ---------- Ficha de la lección ---------- */
.v-lesson {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--v-gap);
	align-items: start;
}
.v-lesson__main { min-width: 0; }
.v-lesson__side { display: grid; gap: var(--v-gap); }

.v-lesson__area {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--v-muted);
}
.v-lesson__area a:hover { color: var(--v-primary); }

.v-lesson__title { font-size: clamp(21px, 2.6vw, 29px); overflow-wrap: anywhere; }
.v-lesson__meta { margin: 6px 0 18px; font-size: var(--v-fs-sm); color: var(--v-muted); }

/* Reproductor: proporción fija para que no salte al cargar. */
.v-player {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-bottom: var(--v-gap);
	border-radius: var(--v-radius);
	overflow: hidden;
	background: #0F1A26;
	box-shadow: var(--v-shadow-2);
}
.v-player iframe {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	border: 0;
}

.v-lesson__cover {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin-bottom: var(--v-gap);
	border-radius: var(--v-radius);
	background: var(--v-surface-2);
}

/* El banner del carrusel es de 1200x100: se muestra con su proporción real,
   nunca recortado a 16:9. */
.v-lesson__cover--slim { aspect-ratio: 12 / 1; object-fit: contain; background: var(--v-primary); }

/* ---------- Visor de PDF ----------
   Ocupa el lugar del reproductor en las lecciones que no tienen video. Alto
   atado a la ventana en vez de una proporción fija: el PDF es apaisado o
   vertical según el archivo, y así entra bien en cualquiera de los dos casos. */
.v-pdf {
	margin: 0 0 var(--v-gap);
	border: var(--v-border);
	border-radius: var(--v-radius);
	overflow: hidden;
	background: var(--v-surface);
	box-shadow: var(--v-shadow-2);
}
.v-pdf__frame {
	display: block;
	width: 100%;
	height: min(78vh, 860px);
	border: 0;
	background: var(--v-surface-2);
}

/* Respaldo para los navegadores que no dibujan el PDF adentro de la página. */
.v-pdf__fallback {
	display: grid;
	place-items: center;
	gap: 10px;
	height: 100%;
	padding: 28px;
	text-align: center;
}
.v-pdf__fallback p { margin: 0; font-size: var(--v-fs-sm); color: var(--v-muted); }
.v-pdf__icon { width: 34px; height: 34px; color: var(--v-line-strong); }

.v-pdf__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 14px;
	border-top: var(--v-border);
	background: var(--v-surface-2);
}
.v-pdf__name {
	min-width: 0;
	font-size: var(--v-fs-sm);
	font-weight: 600;
	overflow-wrap: anywhere;
}
.v-pdf__name small { margin-left: 6px; font-weight: 500; color: var(--v-muted); }
.v-pdf__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* En pantallas chicas el visor incrustado se lee mal: se achica y se apoya en
   los botones, que ahí es como se abre un PDF de verdad. */
@media (max-width: 700px) {
	.v-pdf__frame { height: 52vh; }
	.v-pdf__bar { justify-content: center; }
}

/* Resumen de la sesión, debajo del video y del texto de la lección. */
.v-lesson__notes { margin-top: var(--v-gap); }
.v-lesson__notes > h2:first-child { margin-top: 0; }
/* El material venía de un editor ajeno: puede traer tablas anchas o imágenes
   con ancho fijo, y no debe estirar la columna. */
.v-lesson__notes img { max-width: 100%; height: auto; }
.v-lesson__notes table { display: block; overflow-x: auto; }

.v-lesson__watch { text-align: center; }
.v-lesson__done {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--v-ok);
}

@media (max-width: 900px) {
	.v-lesson { grid-template-columns: minmax(0, 1fr); }
}

/* Los dos listados con filtros —directorio y videoteca— comparten envoltorio
   para que el espaciado y el comportamiento sean idénticos. */
.v-directory,
.v-library,
.v-events-archive,
.v-holidays,
.v-approvals,
.v-drive { display: grid; gap: var(--v-gap); }

/* ---------- Solicitud de alta ---------- */
.v-signup { display: grid; gap: 12px; align-content: start; }

.v-signup__who { display: flex; align-items: center; gap: 10px; }
.v-signup__name { display: grid; gap: 1px; min-width: 0; }
.v-signup__name strong { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.v-signup__name small { font-size: var(--v-fs-xs); color: var(--v-muted); }

/* Los renglones de datos van más apretados que en la ficha de perfil: son
   pocos y la tarjeta tiene que entrar en una columna angosta. */
.v-signup .v-deflist__row { grid-template-columns: minmax(90px, 34%) 1fr; gap: 4px 12px; padding: 6px 0; }
.v-signup .v-deflist__row dt { font-size: var(--v-fs-xs); }
.v-signup .v-deflist__row dd { font-size: var(--v-fs-sm); overflow-wrap: anywhere; }

.v-signup .v-field { width: 100%; margin-bottom: 10px; }
.v-signup .v-field select { width: 100%; }

.v-signup__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.v-signup__actions .v-btn { flex: 1 1 auto; }

/* ---------- Revisión de un alta (pantalla del enlace del mail) ----------
   La caja de acceso no trae marco propio: sirve para un formulario suelto sobre
   el panel de ingreso, pero acá adentro hay una ficha con datos y necesita
   leerse como un bloque aparte. */
.v-review {
	margin-bottom: 20px;
	border: var(--v-border);
	border-radius: var(--v-radius);
	background: var(--v-surface-2);
	overflow: hidden;
}

.v-review__who {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--v-surface);
	border-bottom: var(--v-border);
}
.v-review__who .v-avatar img,
.v-review__who .v-avatar .avatar,
.v-review__who .v-avatar__initials { width: 46px; height: 46px; }

.v-review__name {
	display: grid;
	gap: 1px;
	min-width: 0;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.v-review__name small {
	font-size: var(--v-fs-xs);
	font-weight: 500;
	color: var(--v-muted);
}

/* Etiqueta y valor en dos renglones: en una columna de 440px, la fila a dos
   columnas dejaba los valores largos —un email, cinco jurisdicciones— colgando
   contra el borde derecho. */
.v-review .v-deflist { padding: 4px 16px 12px; }
.v-review .v-deflist__row {
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid var(--v-line);
}
.v-review .v-deflist__row:last-child { border-bottom: 0; }
.v-review .v-deflist__row dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--v-muted);
}
.v-review .v-deflist__row dd {
	font-size: 14.5px;
	color: var(--v-text);
	overflow-wrap: anywhere;
}

/* La etiqueta del selector necesita aire propio: es lo único entre la ficha y
   los botones, y pegada al select se leía como parte de la ficha. */
.v-authbox .v-label { display: block; margin-bottom: 6px; }

/* Aprobar es la acción esperada: se lleva el ancho. Rechazar queda al lado,
   alcanzable pero sin invitar. */
.v-review__actions { display: flex; gap: 8px; margin-top: 14px; }
.v-review__actions .v-btn { flex: 1 1 auto; justify-content: center; }
.v-review__actions .v-btn--ghost { flex: 0 0 auto; color: var(--v-muted); }
.v-review__actions .v-btn--ghost:hover { color: var(--v-danger); border-color: var(--v-danger); }

/* Contador de pendientes en el renglón del cajón lateral. */
.v-rail__count {
	margin-left: auto;
	min-width: 20px;
	padding: 1px 6px;
	border-radius: var(--v-pill);
	background: var(--v-danger);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

/* El día que cae hoy se marca en el listado de días no laborables. */
.v-row.is-today { background: rgba(200, 165, 91, .1); }
.v-row.is-today .v-date { border-color: var(--v-accent); background: var(--v-surface); }

/* En el listado completo la fecha larga y las banderas van en el mismo renglón
   de meta, y el motivo puede ocupar dos líneas sin recortarse. */
.v-holidays .v-row__title { white-space: normal; overflow: visible; }

.v-lesson__main { min-width: 0; }

/* =========================================================================
   Compatibilidad con las pantallas de BuddyPress que faltan migrar
   (perfil, mensajes, actividad).

   SECCIÓN DESECHABLE: se borra junto con inc/mod-buddypress.php cuando
   saquemos BuddyBoss.

   Todos los selectores van dentro de :where(), que aporta especificidad CERO.
   Sin eso, #buddypress es un ID y le ganaba a las clases del theme: en el
   directorio pisaba el botón "Buscar" y le dibujaba un borde propio al campo
   de búsqueda. Así estas reglas solo alcanzan al marcado de BuddyPress que no
   tiene estilo propio, y cualquier componente del theme siempre manda.
   ========================================================================= */

:where(#buddypress) {
	background: var(--v-surface);
	border: var(--v-border);
	border-radius: var(--v-radius);
	padding: clamp(18px, 3vw, 28px);
	box-shadow: var(--v-shadow-1);
	font-size: 14.5px;
	color: var(--v-text-2);
}

/* El directorio es marcado propio: no necesita la caja de BuddyPress. */
:where(.v-bp--bare #buddypress, .v-bp--bare .members-directory-wrapper) {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

:where(#buddypress h1, #buddypress h2, #buddypress h3, #buddypress h4) {
	color: var(--v-text);
	font-weight: 650;
}

:where(#buddypress a) { color: var(--v-primary); }

:where(#buddypress img.avatar, #buddypress .avatar) {
	border-radius: 50%;
	object-fit: cover;
}

:where(
	#buddypress .generic-button a,
	#buddypress button,
	#buddypress input[type="submit"],
	#buddypress input[type="button"],
	#buddypress a.button
) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: var(--v-border);
	border-radius: var(--v-pill);
	background: var(--v-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--v-text);
	cursor: pointer;
}

:where(#buddypress input[type="submit"]) {
	background: var(--v-primary);
	border-color: var(--v-primary);
	color: #fff;
}

:where(
	#buddypress input[type="text"],
	#buddypress input[type="email"],
	#buddypress input[type="password"],
	#buddypress input[type="search"],
	#buddypress input[type="tel"],
	#buddypress input[type="url"],
	#buddypress input[type="date"],
	#buddypress select,
	#buddypress textarea
) {
	width: 100%;
	max-width: 520px;
	padding: 10px 14px;
	border: var(--v-border);
	border-radius: var(--v-radius-sm);
	background: var(--v-surface);
	font: inherit;
	font-size: 14px;
	color: var(--v-text);
}

/* Navegación de perfil */
:where(#buddypress .item-list-tabs ul, #buddypress .bp-navs ul) {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	padding: 0;
	margin: 0 0 20px;
	border-bottom: 1px solid var(--v-line);
}

:where(
	#buddypress .item-list-tabs li a,
	#buddypress .bp-navs li a
) {
	display: block;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--v-text-2);
	border-bottom: 2px solid transparent;
}

:where(
	#buddypress .item-list-tabs li.current a,
	#buddypress .item-list-tabs li.selected a,
	#buddypress .bp-navs li.current a,
	#buddypress .bp-navs li.selected a
) {
	color: var(--v-primary);
	border-bottom-color: var(--v-accent);
}

/* Listas */
:where(#buddypress ul.item-list > li) {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--v-line);
}

/* Avisos */
:where(#buddypress div.error, #buddypress div.updated, #buddypress div.info) {
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: var(--v-radius-sm);
	border-left: 3px solid var(--v-line-strong);
	background: var(--v-surface-2);
	font-size: 14px;
}
:where(#buddypress div.error) { border-left-color: var(--v-danger); }
:where(#buddypress div.updated) { border-left-color: var(--v-ok); }

/* Paginación propia de BuddyPress */
:where(#buddypress .pagination) { display: flex; gap: 6px; margin-top: 20px; }

:where(#buddypress .pagination a, #buddypress .pagination span) {
	display: grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 10px;
	border: var(--v-border);
	border-radius: var(--v-pill);
	font-size: var(--v-fs-sm);
	font-weight: 600;
}
:where(#buddypress .pagination span.current) {
	background: var(--v-primary);
	border-color: var(--v-primary);
	color: #fff;
}

/* ---------- Tarjetas de evento ----------
   Reusan .v-tile de la videoteca; solo cambia lo propio del evento. */
.v-tile__date {
	position: absolute;
	left: 8px; top: 8px;
	display: grid;
	place-items: center;
	width: 46px;
	padding: 5px 0;
	border-radius: var(--v-radius-sm);
	background: rgba(255, 255, 255, .94);
	line-height: 1.1;
	box-shadow: var(--v-shadow-1);
}
.v-tile__date strong { font-size: 17px; font-weight: 700; color: var(--v-text); }
.v-tile__date small {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--v-muted);
}

/* Los eventos pasados se atenúan, igual que las lecciones ya vistas. */
.v-tile.is-past .v-tile__media img { opacity: .6; }
.v-tile.is-past:hover .v-tile__media img { opacity: 1; }

.v-tile__meta { display: flex; align-items: center; gap: 6px; }
.v-tile__meta .v-icon { opacity: .7; flex: none; }

/* Lista de definiciones de los detalles del evento. */
.v-deflist { display: grid; gap: 2px; margin: 0; }
.v-deflist dt {
	font-size: var(--v-fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--v-muted);
}
.v-deflist dd {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--v-text);
}
.v-deflist dd:last-child { margin-bottom: 0; }

/* =========================================================================
   MIS DOCUMENTOS — carpetas personales del reseller
   ========================================================================= */

/* Una tarjeta por sección, apiladas: son pocas y con nombre largo, así que
   la grilla de carpetas del drive no sirve acá. */
.v-files { display: grid; gap: var(--v-gap); }

.v-files__section { padding: 0; }
.v-files__section .v-card__head { padding: 16px 20px; margin: 0; }
.v-files__section .v-list { padding: 6px 12px 14px; }
.v-files__section > .v-empty { padding: 4px 20px 18px; }

.v-files__section .v-card__title {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}
.v-files__section .v-card__title .v-icon { flex: none; color: var(--v-muted); }
.v-files__section .v-card__title .v-badge { flex: none; }

/* ---------- Panel de subida ---------- */
.v-files__upload {
	display: grid;
	gap: 10px;
	justify-items: start;
	padding: 16px 20px;
	border-top: var(--v-border);
	background: var(--v-surface-2);
}
.v-files__upload[hidden] { display: none; }
.v-files__upload .v-btn { margin-top: 2px; }

.v-files__drop {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 18px;
	border: 1px dashed var(--v-line-strong);
	border-radius: var(--v-radius-sm);
	background: var(--v-surface);
	color: var(--v-text-2);
	font-size: var(--v-fs-sm);
	cursor: pointer;
	transition: border-color .16s var(--v-ease), background .16s var(--v-ease);
}
.v-files__drop:hover,
.v-files__drop.is-over { border-color: var(--v-accent); background: var(--v-surface-2); }
.v-files__drop.is-set { border-style: solid; border-color: var(--v-ok); }
.v-files__drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.v-files__drop-icon { flex: none; width: 20px; height: 20px; color: var(--v-muted); transform: rotate(180deg); }

/* ---------- Progreso y avisos ---------- */
.v-files__bar {
	width: 100%;
	height: 6px;
	border-radius: var(--v-pill);
	background: var(--v-line);
	overflow: hidden;
}
.v-files__bar[hidden] { display: none; }
.v-files__bar span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--v-accent);
	transition: width .2s var(--v-ease);
}

.v-files__msg { margin: 0; font-size: var(--v-fs-xs); font-weight: 500; color: var(--v-text-2); }
.v-files__msg[hidden] { display: none; }
.v-files__msg.is-ok { color: var(--v-ok); }
.v-files__msg.is-error { color: var(--v-danger); }

/* ---------- Subcarpetas ---------- */
/* Un filete a la izquierda alcanza para leer la jerarquía sin abrir otra
   tarjeta dentro de la tarjeta. */
.v-files__sub {
	margin: 0 20px 14px 32px;
	padding-left: 14px;
	border-left: 2px solid var(--v-line);
}
.v-files__sub .v-list { padding: 4px 0 0; }
.v-files__sub > .v-empty { padding: 4px 0 0; }

.v-files__sub-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--v-fs-sm);
	font-weight: 650;
	color: var(--v-text-2);
}
.v-files__sub-title .v-icon { flex: none; color: var(--v-muted); }

/* La acción destructiva solo se tiñe al apuntarla: en reposo compite con el
   nombre del archivo. */
.v-iconbtn--danger:hover { background: rgba(210, 69, 60, .1); color: var(--v-danger); }

@media (max-width: 600px) {
	.v-files__section .v-card__head { flex-wrap: wrap; gap: 10px; }
	.v-files__sub { margin-left: 20px; }
}

/* =========================================================================
   FICHA DE MIEMBRO
   ========================================================================= */

.v-profile { display: grid; gap: var(--v-gap); }

/* ---------- Encabezado: portada + foto ---------- */
/* La portada es el fondo y la identidad monta encima con margen negativo, así
   la foto pisa el borde inferior como en cualquier ficha de red social. */
.v-profile__head {
	background: var(--v-surface);
	border: var(--v-border);
	border-radius: var(--v-radius);
	box-shadow: var(--v-shadow-1);
	overflow: hidden;
}

.v-profile__cover {
	aspect-ratio: 4 / 1;
	min-height: 140px;
	background: var(--v-surface-2);
}
.v-profile__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sin foto, un degradé de marca en vez de un hueco gris. */
.v-profile__cover.is-empty {
	background: linear-gradient(120deg, var(--v-primary), var(--v-primary-700) 60%, var(--v-accent));
}

.v-profile__identity {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	padding: 0 22px 20px;
	margin-top: -46px;
}

.v-profile__avatar {
	flex: none;
	width: 116px; height: 116px;
	border-radius: 50%;
	border: 4px solid var(--v-surface);
	background: var(--v-surface);
	box-shadow: var(--v-shadow-2);
	overflow: hidden;
}
.v-profile__avatar img,
.v-profile__avatar .v-avatar__initials {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.v-profile__who { flex: 1 1 auto; min-width: 0; padding-bottom: 4px; }

.v-profile__name {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--v-text);
}

.v-profile__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 8px;
}
.v-profile__active { font-size: var(--v-fs-xs); color: var(--v-muted); }

/* .v-flags viene centrado porque nació dentro de la tarjeta del directorio.
   Acá y en los detalles va alineado a la izquierda, con el resto del texto. */
.v-profile__who .v-flags,
.v-deflist__row .v-flags { justify-content: flex-start; margin: 0; }

.v-profile__action { flex: none; margin-bottom: 4px; }

/* ---------- Detalles ---------- */
.v-deflist__row {
	display: grid;
	grid-template-columns: minmax(160px, 240px) 1fr;
	gap: 6px 20px;
	align-items: baseline;
	padding: 11px 0;
	border-bottom: var(--v-border);
}
.v-deflist__row:last-child { border-bottom: 0; }
.v-deflist__note { display: block; margin-top: 5px; font-size: var(--v-fs-xs); color: var(--v-muted); }

.v-muted { color: var(--v-muted); }

.v-profile .v-card { padding: 0 22px 8px; }
.v-profile .v-card__head { padding: 16px 0; margin: 0; }

/* ---------- Formulario ---------- */
.v-profile__fields { display: grid; gap: 16px; padding-bottom: 18px; }
.v-profile__fields .v-form__row { display: grid; gap: 6px; }
.v-profile__fields .v-input:disabled { background: var(--v-surface-2); color: var(--v-muted); }

.v-profile__foot {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 16px 0 20px;
	border-top: var(--v-border);
}

@media (max-width: 720px) {
	/* En vertical la foto deja de compartir renglón con el nombre: si no, el
	   nombre queda en una columna de dos palabras. */
	.v-profile__identity {
		display: grid;
		justify-items: start;
		gap: 12px;
		margin-top: -40px;
	}
	.v-profile__avatar { width: 92px; height: 92px; }
	.v-profile__name { font-size: 20px; }
	.v-profile__action { margin-bottom: 0; }
	.v-deflist__row { grid-template-columns: 1fr; gap: 3px; }
}

/* =========================================================================
   COOL STUFF — álbumes de fotos
   ========================================================================= */

.v-gallery { display: grid; gap: var(--v-gap); }

/* Portadas de álbum: proporción fija para que la grilla no salte según la
   foto que quedó primera. */
.v-tile--album .v-tile__media { aspect-ratio: 3 / 2; display: block; overflow: hidden; }
.v-tile--album .v-tile__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .3s var(--v-ease);
}
.v-tile--album:hover .v-tile__media img { transform: scale(1.04); }

/* ---------- Grilla de fotos ---------- */
.v-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
}

.v-gallery__shot {
	padding: 0;
	border: 0;
	border-radius: var(--v-radius-sm);
	background: var(--v-surface-2);
	aspect-ratio: 1;
	overflow: hidden;
	cursor: zoom-in;
}
.v-gallery__shot img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s var(--v-ease);
}
.v-gallery__shot:hover img { transform: scale(1.05); }
.v-gallery__shot:focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; }

/* ---------- Visor ---------- */
.v-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 64px;
	background: rgba(10, 18, 28, .93);
}
.v-lightbox[hidden] { display: none; }

.v-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--v-radius-sm);
	box-shadow: var(--v-shadow-3);
}

.v-lightbox__close,
.v-lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background .16s var(--v-ease);
}
.v-lightbox__close:hover,
.v-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }

.v-lightbox__close { top: 18px; right: 18px; }
.v-lightbox__nav--prev { left: 12px; }
.v-lightbox__nav--next { right: 12px; }

@media (max-width: 600px) {
	.v-lightbox { padding: 16px; }
	/* En el teléfono se pasa deslizando: las flechas taparían la foto. */
	.v-lightbox__nav { display: none; }
	.v-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
}

/* =========================================================================
   MURO — lo que publica la gente
   ========================================================================= */

.v-feed { display: grid; gap: 14px; margin-top: 32px; }

.v-feed__head { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; }

.v-feed__avatar {
	flex: none;
	width: 44px; height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--v-surface-2);
}
.v-feed__avatar img,
.v-feed__avatar .v-avatar__initials {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* ---------- Caja de publicar ---------- */
.v-feed__compose { display: grid; gap: 12px; }
.v-feed__compose-top { display: flex; align-items: flex-start; gap: 12px; }

.v-feed__text {
	flex: 1 1 auto;
	min-height: 52px;
	resize: vertical;
	font-family: inherit;
}

.v-feed__compose-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

/* El input de archivo va oculto: la etiqueta entera es el botón. */
.v-feed__pick { cursor: pointer; }
.v-feed__pick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- Publicaciones ---------- */
.v-feed__post { display: grid; gap: 12px; }

.v-feed__by { display: flex; align-items: center; gap: 12px; }
.v-feed__who { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }

.v-feed__name {
	font-size: 14.5px;
	font-weight: 650;
	color: var(--v-text);
	text-decoration: none;
}
.v-feed__name:hover { color: var(--v-primary); }
.v-feed__when { font-size: var(--v-fs-xs); color: var(--v-muted); }

.v-feed__body { font-size: 14.5px; line-height: 1.55; color: var(--v-text-2); }
.v-feed__body p { margin: 0 0 8px; }
.v-feed__body p:last-child { margin-bottom: 0; }

/* ---------- Fotos de una publicación ----------
   Hasta cuatro fotos arman un mosaico; de ahí en más, grilla pareja. La que
   viene sola se muestra apaisada en vez de cuadrada: recortar a cuadrado una
   foto única es lo que peor se ve. */
.v-feed__shots { display: grid; gap: 4px; border-radius: var(--v-radius-sm); overflow: hidden; }
.v-feed__shots .v-gallery__shot { border-radius: 0; }

.v-feed__shots--1 { grid-template-columns: 1fr; }
.v-feed__shots--1 .v-gallery__shot { aspect-ratio: 16 / 10; }

.v-feed__shots--2 { grid-template-columns: 1fr 1fr; }
.v-feed__shots--3 { grid-template-columns: repeat(3, 1fr); }
.v-feed__shots--4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

@media (max-width: 600px) {
	.v-feed__shots--3,
	.v-feed__shots--4 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Administración del drive ----------
   La pantalla de "Manage" es la misma que ve el equipo, con las manos puestas:
   tarjetas y filas idénticas, más una casilla adelante y un menú atrás. Lo que
   se agrega acá es solo lo que administrar necesita. */
.v-manage__title {
	margin: 26px 0 12px;
	font-size: 15px;
	font-weight: 650;
	color: var(--v-text-2);
}

.v-toolbar__end { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.v-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 11px 15px;
	border-radius: var(--v-radius-sm);
	font-size: var(--v-fs-sm);
	font-weight: 500;
}
.v-note--ok { background: rgba(18, 166, 106, .1); color: #0B7A4D; }

.v-btn--danger { background: var(--v-surface); border-color: rgba(210, 69, 60, .35); color: var(--v-danger); }
.v-btn--danger:hover { background: rgba(210, 69, 60, .08); border-color: var(--v-danger); color: var(--v-danger); }

/* La casilla de selección no se pinta hasta que hace falta: en reposo es un
   cuadradito tenue, y toma color cuando la fila queda elegida. */
.v-folder--manage, .v-row--manage { position: relative; }
.v-folder--manage .v-check, .v-row--manage .v-check { flex: none; }
.v-folder--manage .v-check input, .v-row--manage .v-check input { width: 16px; height: 16px; }
.v-folder--manage:has(.v-check input:checked),
.v-row--manage:has(.v-check input:checked) {
	border-color: var(--v-primary);
	box-shadow: 0 0 0 2px rgba(22, 40, 60, .08);
}
.v-folder--manage .v-folder__title { text-decoration: none; }
.v-folder--manage .v-folder__title:hover { color: var(--v-primary); }

/* Menú de acciones por item. Es un <details>: abre y cierra sin JavaScript. */
.v-menu { position: relative; flex: none; }
.v-menu > summary { list-style: none; cursor: pointer; }
.v-menu > summary::-webkit-details-marker { display: none; }
.v-menu[open] > summary { background: var(--v-surface-2); color: var(--v-primary); }

.v-menu__list {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	min-width: 190px;
	padding: 6px;
	background: var(--v-surface);
	border: var(--v-border);
	border-radius: var(--v-radius-sm);
	box-shadow: var(--v-shadow-3);
}
.v-menu__list button {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	font: inherit;
	font-size: 13.5px;
	text-align: left;
	color: var(--v-text-2);
	cursor: pointer;
}
.v-menu__list button:hover { background: var(--v-surface-2); color: var(--v-primary); }
.v-menu__list button.is-danger { color: var(--v-danger); }
.v-menu__list button.is-danger:hover { background: rgba(210, 69, 60, .08); }
.v-menu__list form { margin: 0; }

/* Barra de selección: se pega abajo para no perderla al bajar por la lista. */
.v-selbar {
	position: sticky;
	bottom: 14px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding: 12px 16px;
	background: var(--v-primary);
	border-radius: var(--v-pill);
	box-shadow: var(--v-shadow-3);
	color: #fff;
}
/* `display: flex` le gana al [hidden] del navegador: hay que apagarlo a mano. */
.v-selbar[hidden] { display: none; }
.v-selbar__count { font-size: var(--v-fs-sm); font-weight: 600; }
.v-selbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v-selbar .v-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.v-selbar .v-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.v-selbar .v-btn--danger { background: transparent; border-color: rgba(255, 255, 255, .35); color: #FFD9D6; }
.v-selbar .v-btn--danger:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- Diálogos ---------- */
.v-modal {
	width: min(560px, calc(100vw - 32px));
	max-height: min(86vh, 780px);
	padding: 0;
	border: 0;
	border-radius: var(--v-radius);
	background: var(--v-surface);
	box-shadow: var(--v-shadow-3);
	color: var(--v-text);
	overflow: visible;
}
.v-modal::backdrop { background: rgba(22, 40, 60, .45); backdrop-filter: blur(2px); }

.v-modal__box { display: flex; flex-direction: column; max-height: inherit; }

.v-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: var(--v-border);
}
.v-modal__head h2 { margin: 0; font-size: 16px; font-weight: 650; }

.v-modal__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	overflow-y: auto;
}
.v-modal__body .v-label { margin-top: 6px; }
.v-modal__body .v-label:first-child { margin-top: 0; }
.v-modal__lead { margin: 0 0 4px; font-size: var(--v-fs-sm); color: var(--v-muted); }
.v-modal__cover { display: flex; flex-direction: column; gap: 8px; }
.v-modal__cover[hidden] { display: none; }

.v-modal__foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 18px;
	border-top: var(--v-border);
	background: var(--v-surface-2);
	border-radius: 0 0 var(--v-radius) var(--v-radius);
}

.v-checkline { display: flex; align-items: center; gap: 8px; font-size: var(--v-fs-sm); color: var(--v-text-2); }
.v-checkline input { accent-color: var(--v-primary); }

/* Lista de gente para acceso y para compartir. */
.v-people {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	border: var(--v-border);
	border-radius: var(--v-radius-sm);
	background: var(--v-surface-2);
}
.v-people__list { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; }
.v-people__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 8px;
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--v-text-2);
	cursor: pointer;
}
.v-people__item:hover { background: var(--v-surface); }
.v-people__item input { accent-color: var(--v-primary); }
.v-people__item[hidden] { display: none; }

@media (max-width: 600px) {
	.v-selbar { border-radius: var(--v-radius); }
	.v-menu__list { min-width: 170px; }
}

/* ---------- Material de una lección, cargado desde la ficha ----------
   La caja de subida solo la dibuja la plantilla para administradores; acá solo
   se le da forma. */
.v-lesson__attach { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.v-lesson__attach .v-files__drop { padding: 14px; }
.v-lesson__attach .v-hint { text-align: center; }

.v-note--bad { background: rgba(210, 69, 60, .1); color: #A5322B; }

#material .v-note { margin-bottom: 12px; }
#material .v-row form { margin: 0; display: flex; }