/**
 * Leadership Twin Frontend — app shell.
 *
 * WHY EVERYTHING IS SCOPED TO #ldt-app
 * ------------------------------------
 * This stylesheet used to be scoped to `.ldt-app` (one class = specificity
 * 0,1,0). Any WordPress theme rule like `.entry-content a` or
 * `.entry-content button` (0,2,0) beat it, which is why in a real theme the
 * links came out underlined and `.ldt-submit-btn`'s purple background was
 * dropped entirely — the "Iniciar evaluación" button rendered as white text
 * on white.
 *
 * Worse, the local reset `.ldt-app button { background: none; }` (0,1,1)
 * outranked `.ldt-submit-btn { background: ... }` (0,1,0), so the plugin was
 * overriding itself regardless of the theme.
 *
 * Scoping to the #ldt-app ID puts every rule at 1,1,0 or above, which wins
 * against normal theme selectors without needing !important everywhere.
 * The handful of !important flags below are only on properties themes
 * habitually force (link decoration, list markers, heading margins).
 */

/* ============= ROOT TOKENS ============= */
#ldt-app {
	--ldt-purple: #7C3AED;
	--ldt-purple-dark: #6D28D9;
	--ldt-blue: #3B82F6;
	--ldt-green: #10B981;
	--ldt-red: #EF4444;
	--ldt-amber: #F59E0B;
	--ldt-text: #111827;
	--ldt-text-2: #4B5563;
	--ldt-text-3: #9CA3AF;
	--ldt-bg: #FFFFFF;
	--ldt-surface: #F9FAFB;
	--ldt-border: #EEF0F4;
	--ldt-border-2: #E5E7EB;
	--ldt-light-purple: #F3E8FF;
	--ldt-light-blue: #EEF2FF;
	--ldt-radius-lg: 16px;
	--ldt-radius-md: 12px;
	--ldt-radius-sm: 8px;
	--ldt-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
	--ldt-pad: 18px;
	--ldt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

/* ============= FULL-BLEED SHELL =============
   The shortcode renders inside the theme's content container, which is
   usually narrow and padded. This breaks out to the full viewport width so
   the app reads as an app and not as a column of text. */
#ldt-app {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0;
	background: var(--ldt-bg);
	color: var(--ldt-text);
	font-family: var(--ldt-font);
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============= RESET ============= */
#ldt-app *,
#ldt-app *::before,
#ldt-app *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	max-width: none;
	float: none;
}
#ldt-app h1, #ldt-app h2, #ldt-app h3, #ldt-app h4, #ldt-app p {
	margin: 0 !important;
	padding: 0 !important;
	font-weight: inherit;
	color: inherit;
}
#ldt-app strong, #ldt-app b { font-weight: 700; }
#ldt-app ul, #ldt-app ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#ldt-app li { list-style: none !important; margin: 0; padding: 0; }
/* EL BOTÓN BLANCO SOBRE BLANCO EMPEZABA AQUÍ.
   `#ldt-app a:visited` y `#ldt-app a:hover` valen (1,1,1) porque una
   pseudo-clase cuenta como clase. `#ldt-app .ldt-brief-cta` vale (1,1,0).
   Es decir: en cuanto el enlace se visitaba o se pasaba el ratón, el
   `color: inherit` del reset le ganaba al color del botón, y el botón
   heredaba el blanco de la tarjeta morada que lo contiene. Resultado:
   texto blanco sobre fondo blanco, contraste 1:1, 208x40 px de botón
   invisible en la llamada a la acción principal del inicio.
   Los estados solo necesitaban el reset de subrayado; el color va en una
   regla de menor especificidad para que cualquier clase pueda ganarle. */
#ldt-app a,
#ldt-app a:hover,
#ldt-app a:focus,
#ldt-app a:visited {
	text-decoration: none !important;
	box-shadow: none;
	border: 0;
	background-image: none;
}
#ldt-app a { color: inherit; }
#ldt-app button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	border-radius: 0;
	width: auto;
	line-height: 1.4;
}
#ldt-app input, #ldt-app textarea, #ldt-app select {
	font-family: inherit;
	font-size: 14px;
	color: var(--ldt-text);
	background: #fff;
	box-shadow: none;
}
#ldt-app svg { flex-shrink: 0; display: block; }
#ldt-app img { max-width: 100%; height: auto; display: block; border-radius: 0; }

/* ============= LAYOUT ============= */
#ldt-app { display: flex; flex-direction: column; min-height: 100svh; }
#ldt-app .ldt-scroll {
	flex: 1;
	width: 100%;
	padding: 0 var(--ldt-pad) 96px;
	-webkit-overflow-scrolling: touch;
}
#ldt-app .ldt-content { padding: 0; }

/* ============= HEADER ============= */
#ldt-app .ldt-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px var(--ldt-pad);
	background: var(--ldt-bg);
	border-bottom: 1px solid var(--ldt-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
#ldt-app .ldt-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
#ldt-app .ldt-hamburger {
	width: 22px; height: 22px;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	gap: 4px; flex-shrink: 0; padding: 0; background: none; border: 0;
}
#ldt-app .ldt-hamburger span { display: block; height: 2px; width: 20px; background: var(--ldt-text); border-radius: 2px; }
#ldt-app .ldt-logo { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#ldt-app .ldt-logo svg { width: 28px; height: 28px; }
#ldt-app .ldt-header-titles { display: flex; flex-direction: column; min-width: 0; }
/* nowrap: the subtitle used to wrap onto three lines and push the header
   to double height on narrow phones. */
#ldt-app .ldt-header-title {
	font-size: 16px; font-weight: 700; color: var(--ldt-text);
	line-height: 1.15; white-space: nowrap;
}
#ldt-app .ldt-header-subtitle {
	font-size: 10.5px; font-weight: 400; color: var(--ldt-text-2);
	line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ldt-app .ldt-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#ldt-app .ldt-bell-wrap { position: relative; display: flex; align-items: center; color: var(--ldt-text-2); }
#ldt-app .ldt-bell-wrap svg { width: 22px; height: 22px; }
#ldt-app .ldt-bell-badge {
	position: absolute; top: -5px; right: -6px;
	min-width: 16px; height: 16px; padding: 0 4px;
	background: var(--ldt-purple); color: #fff;
	font-size: 9px; font-weight: 700; line-height: 16px; text-align: center;
	border-radius: 999px;
}
#ldt-app .ldt-bell-badge[hidden] { display: none; }
#ldt-app .ldt-avatar {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--ldt-light-purple);
	display: flex; align-items: center; justify-content: center;
	color: var(--ldt-purple); border: 2px solid var(--ldt-border);
	overflow: hidden; flex-shrink: 0;
}
#ldt-app .ldt-avatar img { width: 100%; height: 100%; object-fit: cover; }
#ldt-app .ldt-avatar svg { width: 19px; height: 19px; }
#ldt-app .ldt-chevron { display: flex; align-items: center; color: var(--ldt-text-3); margin-left: -4px; }
#ldt-app .ldt-chevron svg { width: 15px; height: 15px; }

/* ============= GREETING ============= */
#ldt-app .ldt-greeting { padding: 22px 0 18px; }
#ldt-app .ldt-greeting h1 {
	font-size: 22px; font-weight: 700; color: var(--ldt-text);
	line-height: 1.25; letter-spacing: -0.02em;
}
#ldt-app .ldt-greeting p { font-size: 14px; color: var(--ldt-text-2); margin-top: 4px !important; line-height: 1.4; }

/* ============= SECTION TITLE ============= */
#ldt-app .ldt-section-title {
	font-size: 12px; font-weight: 600; color: var(--ldt-text-2);
	text-transform: uppercase; letter-spacing: 0.06em;
	margin-bottom: 12px; line-height: 1.3;
}
#ldt-app .ldt-score-card-header .ldt-section-title,
#ldt-app .ldt-chart-header-left .ldt-section-title { margin-bottom: 0; }

/* ============= CARD BASE ============= */
#ldt-app .ldt-card {
	background: var(--ldt-bg);
	border: 1px solid var(--ldt-border);
	border-radius: var(--ldt-radius-lg);
	padding: 18px;
	box-shadow: var(--ldt-shadow);
	margin-bottom: 16px;
}

/* ============= SCORE CARD ============= */
#ldt-app .ldt-score-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
#ldt-app .ldt-score-card-header-left { display: flex; align-items: center; gap: 6px; }
#ldt-app .ldt-info-icon { width: 15px; height: 15px; color: var(--ldt-text-3); display: inline-flex; }
#ldt-app .ldt-info-icon svg { width: 15px; height: 15px; }
#ldt-app .ldt-trend-badge {
	width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
	background: var(--ldt-light-purple);
	display: flex; align-items: center; justify-content: center;
}
#ldt-app .ldt-trend-badge svg { width: 19px; height: 19px; color: var(--ldt-purple); }
#ldt-app .ldt-score-body { display: flex; align-items: center; gap: 20px; }
#ldt-app .ldt-circle-progress { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
#ldt-app .ldt-circle-progress svg { transform: rotate(-90deg); width: 116px; height: 116px; }
#ldt-app .ldt-circle-track { stroke: #E9EBF0; stroke-width: 10; fill: none; }
#ldt-app .ldt-circle-fill { stroke: url(#ldt-gradient); stroke-width: 10; fill: none; stroke-linecap: round; }
#ldt-app .ldt-circle-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
#ldt-app .ldt-circle-value { font-size: 34px; font-weight: 800; color: var(--ldt-text); line-height: 1; letter-spacing: -0.03em; }
#ldt-app .ldt-circle-max { font-size: 12px; color: var(--ldt-text-3); margin-top: 3px; line-height: 1; }
#ldt-app .ldt-score-stats { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#ldt-app .ldt-score-delta { display: flex; align-items: center; gap: 5px; }
#ldt-app .ldt-score-delta svg { width: 15px; height: 15px; }
#ldt-app .ldt-score-delta-value { font-size: 16px; font-weight: 700; }
#ldt-app .ldt-score-delta-label { font-size: 13px; color: var(--ldt-text-2); line-height: 1.35; }
#ldt-app .ldt-delta-up, #ldt-app .ldt-delta-up svg, #ldt-app .ldt-delta-up .ldt-score-delta-value { color: var(--ldt-green); }
#ldt-app .ldt-delta-down, #ldt-app .ldt-delta-down svg, #ldt-app .ldt-delta-down .ldt-score-delta-value { color: var(--ldt-red); }
#ldt-app .ldt-cta { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
#ldt-app .ldt-cta-purple { color: var(--ldt-purple); }
#ldt-app .ldt-cta-green { color: #059669; }
#ldt-app .ldt-cta-blue { color: var(--ldt-blue); }
#ldt-app .ldt-cta-amber { color: #D97706; }
#ldt-app .ldt-cta-row { display: flex; justify-content: flex-end; margin-top: 10px; }
#ldt-app .ldt-cta-inline { margin-top: auto; padding-top: 12px; }

/* ============= QUICK ACCESS ============= */
#ldt-app .ldt-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
#ldt-app .ldt-quick-card {
	background: var(--ldt-surface);
	border: 1px solid var(--ldt-border);
	border-radius: 14px;
	padding: 15px 6px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; min-height: 88px;
	transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
#ldt-app .ldt-quick-card:active { transform: scale(0.97); }
#ldt-app .ldt-quick-card.active { background: var(--ldt-light-blue); border-color: #C7D2FE; }
#ldt-app .ldt-quick-card svg { width: 24px; height: 24px; }
#ldt-app .ldt-quick-card span:last-child {
	font-size: 12.5px; font-weight: 600; color: #374151;
	text-align: center; line-height: 1.2; white-space: nowrap;
}

/* ============= INFO CARDS GRID ============= */
#ldt-app .ldt-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; align-items: stretch; }
#ldt-app .ldt-info-card {
	background: var(--ldt-bg);
	border: 1px solid var(--ldt-border);
	border-radius: var(--ldt-radius-lg);
	padding: 15px;
	box-shadow: var(--ldt-shadow);
	display: flex; flex-direction: column;
}
#ldt-app .ldt-info-card-header { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
#ldt-app .ldt-info-card-header svg { width: 17px; height: 17px; margin-top: 1px; }
#ldt-app .ldt-info-card-title { font-size: 13.5px; font-weight: 600; color: var(--ldt-text); line-height: 1.25; }
#ldt-app .ldt-info-card-big { font-size: 27px; font-weight: 800; color: var(--ldt-text); line-height: 1.1; letter-spacing: -0.02em; }
#ldt-app .ldt-info-card-desc { font-size: 12px; color: var(--ldt-text-2); line-height: 1.4; margin-top: 4px !important; }
#ldt-app .ldt-info-card-highlight { font-size: 16px; font-weight: 700; color: var(--ldt-text); margin-top: 2px; line-height: 1.25; }
#ldt-app .ldt-strength-list { margin-top: 2px !important; }
#ldt-app .ldt-strength-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: #374151; padding: 3px 0; line-height: 1.35; }
#ldt-app .ldt-strength-bullet { width: 7px; height: 7px; border-radius: 50%; background: var(--ldt-green); flex-shrink: 0; margin-top: 5px; }
#ldt-app .ldt-progress-bar { height: 7px; background: #E9EBF0; border-radius: 999px; overflow: hidden; margin-top: 8px; }
#ldt-app .ldt-progress-bar-fill { height: 100%; border-radius: 999px; }
#ldt-app .ldt-progress-bar-fill.purple { background: var(--ldt-purple); }
#ldt-app .ldt-progress-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#ldt-app .ldt-progress-row .ldt-progress-bar { flex: 1; margin-top: 0; }
#ldt-app .ldt-progress-value { font-size: 12px; font-weight: 600; color: var(--ldt-text-2); flex-shrink: 0; }

/* ============= LINE CHART ============= */
#ldt-app .ldt-chart-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#ldt-app .ldt-chart-header-left { display: flex; flex-direction: column; gap: 3px; }
#ldt-app .ldt-chart-subtitle { font-size: 13px; color: var(--ldt-text-3); }
#ldt-app .ldt-chart-dropdown {
	background: #F3F4F6; border-radius: var(--ldt-radius-sm);
	padding: 6px 11px; font-size: 12px; color: #374151; font-weight: 500;
	white-space: nowrap; flex-shrink: 0;
}
#ldt-app .ldt-chart-stats { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
#ldt-app .ldt-chart-value { font-size: 27px; font-weight: 800; color: var(--ldt-text); line-height: 1; letter-spacing: -0.02em; }
#ldt-app .ldt-chart-delta { font-size: 12.5px; color: var(--ldt-green); font-weight: 500; }
#ldt-app .ldt-chart-delta.ldt-delta-down { color: var(--ldt-red); }
#ldt-app .ldt-chart-svg { width: 100%; height: 172px; }
#ldt-app .ldt-chart-empty { padding: 30px 12px; text-align: center; font-size: 13px; color: var(--ldt-text-3); }

/* ============= BOTTOM NAV ============= */
#ldt-app .ldt-bottom-nav {
	position: fixed; bottom: 0; left: 0; right: 0;
	background: rgba(255, 255, 255, 0.97);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-top: 1px solid var(--ldt-border);
	display: flex; align-items: stretch;
	padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
	z-index: 200;
}
#ldt-app .ldt-nav-item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 3px; padding: 4px 2px; flex: 1 1 0; min-width: 0;
}
#ldt-app .ldt-nav-item svg { width: 22px; height: 22px; color: #9AA1AC; }
/* The labels used to wrap ("Feedback / 360°" on two lines) and inherit the
   theme's link underline. Both are pinned here. */
/* Cinco pestañas de 77 px para textos como "Feedback 360°" y "Plan de
   Acción": el texto se desbordaba y las etiquetas vecinas casi se
   tocaban. Las etiquetas se acortaron en el JS y aquí se les deja algo
   de aire con un cuerpo ligeramente menor. */
#ldt-app .ldt-nav-item span {
	font-size: 9px; color: #9AA1AC; font-weight: 500;
	line-height: 1.2; white-space: nowrap;
	letter-spacing: -0.01em; text-align: center;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
#ldt-app .ldt-nav-item.active svg,
#ldt-app .ldt-nav-item.active span { color: var(--ldt-purple); }
#ldt-app .ldt-nav-item.active span { font-weight: 600; }

/* ============= LOADING / ERROR / EMPTY ============= */
#ldt-app .ldt-loading { text-align: center; padding: 48px 20px; color: var(--ldt-text-2); font-size: 14px; }
#ldt-app .ldt-error { text-align: center; padding: 28px 20px; color: #B42318; font-size: 14px; background: #FEF3F2; border: 1px solid #FEE4E2; border-radius: var(--ldt-radius-md); margin-top: 20px; }
#ldt-app .ldt-empty { text-align: center; padding: 44px 20px; color: var(--ldt-text-2); font-size: 14px; }
#ldt-app .ldt-empty a { color: var(--ldt-purple); font-weight: 600; }

/* ============= GATE (feature needs an assessment first) ============= */
#ldt-app .ldt-gate { text-align: center; padding: 34px 20px; }
#ldt-app .ldt-gate-icon {
	width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px;
	background: var(--ldt-light-purple); color: var(--ldt-purple);
	display: flex; align-items: center; justify-content: center;
}
#ldt-app .ldt-gate-icon svg { width: 24px; height: 24px; }
#ldt-app .ldt-gate h3 { font-size: 17px; font-weight: 700; color: var(--ldt-text); }
#ldt-app .ldt-gate p { font-size: 14px; color: var(--ldt-text-2); margin-top: 8px !important; line-height: 1.5; }

/* ============= TWIN SCREEN ============= */
#ldt-app .ldt-domain-row { margin-bottom: 12px; }
#ldt-app .ldt-domain-row:last-child { margin-bottom: 0; }
#ldt-app .ldt-domain-row-header { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; margin-bottom: 5px; }
#ldt-app .ldt-domain-row-header span { color: var(--ldt-text); font-weight: 500; }
#ldt-app .ldt-domain-row-header strong { font-weight: 700; color: var(--ldt-text); }
#ldt-app .ldt-badge-trajectory { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
#ldt-app .ldt-badge-improving { background: #D1FAE5; color: #065F46; }
#ldt-app .ldt-badge-declining { background: #FEE2E2; color: #991B1B; }
#ldt-app .ldt-badge-stable { background: #FEF3C7; color: #92400E; }
#ldt-app .ldt-badge-insufficient_data { background: #E0E7FF; color: #3730A3; }

/* ============= STATS GRID ============= */
#ldt-app .ldt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px; }
#ldt-app .ldt-stat { background: var(--ldt-surface); border-radius: var(--ldt-radius-md); padding: 14px 8px; text-align: center; border: 1px solid var(--ldt-border); }
#ldt-app .ldt-stat-value { font-size: 25px; font-weight: 800; color: var(--ldt-purple); line-height: 1.1; }
#ldt-app .ldt-stat-label { font-size: 11.5px; color: var(--ldt-text-2); margin-top: 4px; line-height: 1.25; }

/* ============= ASSESSMENT ============= */
#ldt-app .ldt-question h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px !important; color: var(--ldt-text); line-height: 1.4; }
#ldt-app .ldt-options { display: flex; flex-direction: column; gap: 8px; }
#ldt-app .ldt-option {
	display: flex; align-items: center; gap: 12px; padding: 13px 14px;
	border: 1.5px solid var(--ldt-border-2); border-radius: var(--ldt-radius-md);
	cursor: pointer; transition: border-color 160ms, background 160ms;
}
#ldt-app .ldt-option:hover { border-color: #C4B5FD; background: #FCFAFF; }
#ldt-app .ldt-option:focus-within { border-color: var(--ldt-purple); }
#ldt-app .ldt-option input { margin: 0; width: 18px; height: 18px; accent-color: var(--ldt-purple); flex-shrink: 0; }
#ldt-app .ldt-option label { cursor: pointer; flex: 1; font-size: 14px; color: var(--ldt-text); line-height: 1.4; }
/* The purple fill on this button was previously eaten by the local
   `.ldt-app button { background: none }` reset. */
#ldt-app .ldt-submit-btn {
	background: var(--ldt-purple);
	color: #fff;
	padding: 14px 28px;
	border-radius: var(--ldt-radius-md);
	font-weight: 600;
	font-size: 15px;
	margin-top: 18px;
	width: 100%;
	display: block;
	text-align: center;
	box-shadow: 0 1px 2px rgba(124, 58, 237, 0.24);
}
#ldt-app .ldt-submit-btn:hover { background: var(--ldt-purple-dark); }
#ldt-app .ldt-submit-btn:active { transform: scale(0.985); }
#ldt-app .ldt-submit-btn:disabled { opacity: 0.55; cursor: default; }
#ldt-app .ldt-btn-secondary {
	background: var(--ldt-surface); color: var(--ldt-text);
	border: 1px solid var(--ldt-border-2);
	padding: 12px 22px; border-radius: var(--ldt-radius-md);
	font-weight: 600; font-size: 14px; display: inline-block; margin-top: 16px;
}
#ldt-app .ldt-progress-steps { font-size: 12px; color: var(--ldt-text-3); margin-bottom: 10px; font-weight: 600; letter-spacing: 0.04em; }

/* ============= COACH ============= */
#ldt-app .ldt-chat {
	display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
	min-height: 220px; max-height: 46vh; overflow-y: auto;
	padding: 12px; background: var(--ldt-surface); border-radius: var(--ldt-radius-md);
}
#ldt-app .ldt-msg { padding: 10px 13px; border-radius: 14px; max-width: 84%; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
#ldt-app .ldt-msg-user { background: var(--ldt-purple); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
#ldt-app .ldt-msg-coach { background: var(--ldt-bg); border: 1px solid var(--ldt-border); align-self: flex-start; border-bottom-left-radius: 4px; }
#ldt-app .ldt-msg-error { background: #FEF3F2; border: 1px solid #FEE4E2; color: #B42318; align-self: flex-start; }
#ldt-app .ldt-chat-input { display: flex; gap: 8px; align-items: flex-end; }
#ldt-app .ldt-chat-input textarea {
	flex: 1; padding: 11px 13px; border: 1px solid var(--ldt-border-2);
	border-radius: var(--ldt-radius-md); font-size: 14px; resize: none; line-height: 1.4;
}
#ldt-app .ldt-chat-input textarea:focus { outline: none; border-color: var(--ldt-purple); }
#ldt-app .ldt-chat-input button {
	background: var(--ldt-purple); color: #fff; padding: 12px 18px;
	border-radius: var(--ldt-radius-md); font-weight: 600; font-size: 14px; flex-shrink: 0;
}
#ldt-app .ldt-chat-input button:disabled { opacity: 0.5; }

/* ============= CERTIFICATIONS ============= */
#ldt-app .ldt-cert { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px; border-radius: var(--ldt-radius-md); background: var(--ldt-surface); margin-bottom: 8px; border: 1px solid var(--ldt-border); }
#ldt-app .ldt-cert strong { font-size: 14px; }
#ldt-app .ldt-cert-level { padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
#ldt-app .ldt-cert-practitioner { background: #DBEAFE; color: #1E40AF; }
#ldt-app .ldt-cert-advanced { background: #C7D2FE; color: #3730A3; }
#ldt-app .ldt-cert-expert { background: #FCE7F3; color: #9D174D; }
#ldt-app .ldt-cert-date { font-size: 12px; color: var(--ldt-text-2); margin-top: 4px !important; }

/* ============= NOTIFICATIONS ============= */
#ldt-app .ldt-notification { display: flex; justify-content: space-between; align-items: flex-start; padding: 13px; border-radius: var(--ldt-radius-md); background: var(--ldt-surface); margin-bottom: 8px; border: 1px solid var(--ldt-border); }
#ldt-app .ldt-notification.unread { border-left: 3px solid var(--ldt-purple); }
#ldt-app .ldt-notification strong { font-size: 14px; }
#ldt-app .ldt-notification-date { font-size: 11.5px; color: var(--ldt-text-3); flex-shrink: 0; margin-left: 12px; white-space: nowrap; }

/* ============= SHARED TYPOGRAPHY ============= */
#ldt-app .ldt-card-title { font-size: 15px; font-weight: 600; margin-bottom: 12px !important; color: var(--ldt-text); }
#ldt-app .ldt-card-title-lg { font-size: 18px; font-weight: 700; margin-bottom: 6px !important; color: var(--ldt-text); letter-spacing: -0.01em; }
#ldt-app .ldt-card-lead { font-size: 14px; color: var(--ldt-text-2); margin-top: 6px !important; line-height: 1.5; }
#ldt-app .ldt-muted { color: var(--ldt-text-3); }
#ldt-app .ldt-plain-list { margin: 0 !important; }
#ldt-app .ldt-milestone { padding: 8px 0; border-bottom: 1px solid var(--ldt-border); font-size: 14px; }
#ldt-app .ldt-milestone:last-child { border-bottom: none; }
#ldt-app .ldt-textarea { width: 100%; padding: 12px; border: 1.5px solid var(--ldt-border-2); border-radius: var(--ldt-radius-md); font-size: 14px; resize: vertical; line-height: 1.45; }
#ldt-app .ldt-textarea:focus { outline: none; border-color: var(--ldt-purple); }

/* ============= ACTION PLAN ============= */
#ldt-app .ldt-action-card { margin-bottom: 8px; }
#ldt-app .ldt-action-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#ldt-app .ldt-action-head strong { font-size: 14px; }
#ldt-app .ldt-priority { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; }
#ldt-app .ldt-priority-high { background: #FEE2E2; color: #991B1B; }
#ldt-app .ldt-priority-medium { background: #FEF3C7; color: #92400E; }
#ldt-app .ldt-priority-low { background: #DBEAFE; color: #1E40AF; }

/* ============= FEEDBACK 360 SCREEN ============= */
#ldt-app .ldt-round { padding: 14px 0; border-bottom: 1px solid var(--ldt-border); }
#ldt-app .ldt-round:last-child { border-bottom: none; padding-bottom: 0; }
#ldt-app .ldt-round-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
#ldt-app .ldt-round-head strong { font-size: 14px; }

/* ============= LOGIN PROMPT (outside #ldt-app) ============= */
.ldt-login-required { text-align: center; padding: 48px 20px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.ldt-login-required p { font-size: 15px; color: #4B5563; margin-bottom: 18px; }
.ldt-login-btn { display: inline-block; background: #7C3AED; color: #fff !important; padding: 13px 28px; border-radius: 12px; font-weight: 600; text-decoration: none !important; }

/* ============= RESPONSIVE ============= */
@media (max-width: 359px) {
	#ldt-app { --ldt-pad: 14px; }
	#ldt-app .ldt-quick-grid { gap: 8px; }
	#ldt-app .ldt-quick-card { padding: 12px 4px; min-height: 80px; }
	#ldt-app .ldt-quick-card span:last-child { font-size: 11.5px; }
	#ldt-app .ldt-info-grid { gap: 8px; }
	#ldt-app .ldt-info-card { padding: 12px; }
	#ldt-app .ldt-header-subtitle { display: none; }
	#ldt-app .ldt-nav-item span { font-size: 9px; }
}
@media (min-width: 700px) {
	#ldt-app { --ldt-pad: 24px; background: #F4F5F8; }
	#ldt-app .ldt-header { padding-left: max(24px, calc(50% - 320px)); padding-right: max(24px, calc(50% - 320px)); }
	#ldt-app .ldt-scroll { max-width: 688px; margin: 0 auto; }
	#ldt-app .ldt-bottom-nav { max-width: 688px; left: 50%; right: auto; transform: translateX(-50%); border: 1px solid var(--ldt-border); border-bottom: none; border-radius: 16px 16px 0 0; }
	#ldt-app .ldt-header-title { font-size: 17px; }
	#ldt-app .ldt-header-subtitle { font-size: 11.5px; }
}
@media (min-width: 1024px) {
	#ldt-app .ldt-scroll { max-width: 760px; }
	#ldt-app .ldt-bottom-nav { max-width: 760px; }
	#ldt-app .ldt-info-grid { gap: 14px; }
	#ldt-app .ldt-quick-grid { gap: 14px; }
}

/* ============= DAILY COACHING BRIEF (spec §19, §33) =============
   Deliberately the loudest thing on the dashboard: the product's core is
   the accompaniment, not the score. */
#ldt-app .ldt-brief {
	background: linear-gradient(135deg, #6D28D9 0%, #4F46E5 100%);
	border-radius: var(--ldt-radius-lg);
	padding: 18px;
	margin-bottom: 16px;
	color: #fff;
	box-shadow: 0 4px 14px rgba(79, 70, 229, 0.22);
}
#ldt-app .ldt-brief-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
#ldt-app .ldt-brief-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.82; }
#ldt-app .ldt-streak { font-size: 10.5px; font-weight: 600; background: rgba(255,255,255,0.18); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
#ldt-app .ldt-brief-headline { font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: #fff; }
#ldt-app .ldt-brief-body { font-size: 13.5px; line-height: 1.5; margin-top: 7px !important; color: rgba(255,255,255,0.9); }
#ldt-app .ldt-focus-chip { margin-top: 12px; font-size: 11.5px; background: rgba(255,255,255,0.14); padding: 7px 11px; border-radius: var(--ldt-radius-sm); display: inline-block; }
#ldt-app .ldt-focus-chip strong { font-weight: 700; }
#ldt-app .ldt-brief-actions { margin-top: 12px !important; }
#ldt-app .ldt-brief-actions li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; padding: 3px 0; color: rgba(255,255,255,0.93); line-height: 1.35; }
#ldt-app .ldt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: rgba(255,255,255,0.6); }
#ldt-app .ldt-dot-high { background: #FCA5A5; }
#ldt-app .ldt-dot-medium { background: #FCD34D; }
#ldt-app .ldt-dot-low { background: #A5B4FC; }
/* Y además se fija explícitamente en los cuatro estados. El morado
   oscuro sobre blanco da 7:1 de contraste; el anterior, 4.6:1 justo en
   el límite. Un botón que es la puerta de entrada al coach no debería
   depender de que nadie vuelva a tocar el reset. */
#ldt-app a.ldt-brief-cta,
#ldt-app a.ldt-brief-cta:hover,
#ldt-app a.ldt-brief-cta:focus,
#ldt-app a.ldt-brief-cta:visited,
#ldt-app .ldt-brief-cta {
	display: inline-block; margin-top: 14px;
	background: #fff; color: var(--ldt-purple-dark);
	font-size: 13.5px; font-weight: 700;
	padding: 10px 18px; border-radius: var(--ldt-radius-md);
}

/* ============= ASSESSMENT CATALOGUE (spec §8) ============= */
#ldt-app .ldt-battery-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#ldt-app .ldt-battery-badge {
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
	padding: 4px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
	background: #EEF2FF; color: #3730A3;
}
#ldt-app .ldt-battery-badge.base { background: var(--ldt-light-purple); color: var(--ldt-purple-dark); }
#ldt-app .ldt-battery-meta { font-size: 12px; color: var(--ldt-text-3); margin-top: 10px; }

/* ============= PLAN AS A WORKING TOOL (spec §17, §18) ============= */
#ldt-app .ldt-plan-stats { display: flex; gap: 24px; margin-top: 14px; }
#ldt-app .ldt-plan-stats div { display: flex; flex-direction: column; }
#ldt-app .ldt-plan-stats strong { font-size: 24px; font-weight: 800; color: var(--ldt-purple); line-height: 1.1; }
#ldt-app .ldt-plan-stats span { font-size: 11.5px; color: var(--ldt-text-2); margin-top: 2px; }

#ldt-app .ldt-action-status { margin-top: 12px; }
#ldt-app .ldt-status-pill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
#ldt-app .ldt-status-suggested { background: #F3F4F6; color: #4B5563; }
#ldt-app .ldt-status-accepted { background: #DBEAFE; color: #1E40AF; }
#ldt-app .ldt-status-in_progress { background: #FEF3C7; color: #92400E; }
#ldt-app .ldt-status-completed { background: #E0E7FF; color: #3730A3; }
/* Verified is the only green state: it's the one that cost something. */
#ldt-app .ldt-status-verified { background: #D1FAE5; color: #065F46; }
#ldt-app .ldt-status-pending { background: #FEF3C7; color: #92400E; }
#ldt-app .ldt-status-needs_more { background: #FFEDD5; color: #9A3412; }
#ldt-app .ldt-status-rejected { background: #FEE2E2; color: #991B1B; }
#ldt-app .ldt-status-skipped { background: #F3F4F6; color: #9CA3AF; }

#ldt-app .ldt-action-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#ldt-app .ldt-btn-primary-sm { background: var(--ldt-purple); color: #fff; padding: 9px 16px; border-radius: var(--ldt-radius-md); font-weight: 600; font-size: 13px; }
#ldt-app .ldt-btn-ghost { background: transparent; color: var(--ldt-text-2); padding: 9px 14px; border-radius: var(--ldt-radius-md); font-weight: 600; font-size: 13px; border: 1px solid var(--ldt-border-2); }
#ldt-app .ldt-action-controls .ldt-btn-secondary { margin-top: 0; padding: 9px 16px; font-size: 13px; }
#ldt-app .ldt-action-controls button:disabled { opacity: 0.5; }
#ldt-app .ldt-action-panel:not(:empty) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ldt-border); }

#ldt-app .ldt-panel-title { font-size: 14px; font-weight: 700; color: var(--ldt-text); }
#ldt-app .ldt-panel-hint { font-size: 12.5px; color: var(--ldt-text-2); margin-top: 4px !important; line-height: 1.45; }
#ldt-app .ldt-field { display: block; margin-top: 12px; }
#ldt-app .ldt-field > span { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 5px; line-height: 1.35; }
#ldt-app .ldt-field em { font-weight: 400; color: var(--ldt-text-3); font-style: normal; }
#ldt-app .ldt-field textarea,
#ldt-app .ldt-field input {
	width: 100%; padding: 10px 12px; border: 1.5px solid var(--ldt-border-2);
	border-radius: var(--ldt-radius-md); font-size: 14px; resize: vertical; line-height: 1.45;
}
#ldt-app .ldt-field textarea:focus,
#ldt-app .ldt-field input:focus { outline: none; border-color: var(--ldt-purple); }

#ldt-app .ldt-verdict { padding: 14px; border-radius: var(--ldt-radius-md); }
#ldt-app .ldt-verdict-ok { background: #ECFDF5; border: 1px solid #A7F3D0; }
#ldt-app .ldt-verdict-more { background: #FFF7ED; border: 1px solid #FED7AA; }
#ldt-app .ldt-verdict-list { margin-top: 10px !important; }
#ldt-app .ldt-verdict-list li { font-size: 12.5px; color: #374151; padding: 4px 0; line-height: 1.4; }
#ldt-app .ldt-verdict-list em { font-style: italic; color: var(--ldt-text-2); }
#ldt-app .ldt-verdict-how { font-size: 11.5px; color: var(--ldt-text-3); margin-top: 10px !important; }
#ldt-app .ldt-verdict .ldt-btn-secondary { margin-top: 12px; }

#ldt-app .ldt-evidence-entry { padding: 12px 0; border-bottom: 1px solid var(--ldt-border); }
#ldt-app .ldt-evidence-entry:last-child { border-bottom: none; }
#ldt-app .ldt-evidence-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
#ldt-app .ldt-evidence-date { font-size: 11.5px; color: var(--ldt-text-3); }
#ldt-app .ldt-evidence-form { display: block; }

#ldt-app .ldt-criteria { margin-top: 12px; background: var(--ldt-surface); border: 1px solid var(--ldt-border); border-radius: var(--ldt-radius-md); padding: 11px 12px; }
#ldt-app .ldt-criteria-row { font-size: 12.5px; color: #374151; line-height: 1.45; }
#ldt-app .ldt-criteria-row + .ldt-criteria-row { margin-top: 8px; }
#ldt-app .ldt-criteria-row > span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ldt-text-3); margin-bottom: 3px; }

/* ============= RADAR + COMPETENCY MATRIX (spec §22) ============= */
#ldt-app .ldt-radar { width: 100%; max-width: 320px; height: auto; margin: 0 auto; display: block; }
#ldt-app .ldt-matrix-domain { margin-bottom: 16px; }
#ldt-app .ldt-matrix-domain:last-child { margin-bottom: 0; }
#ldt-app .ldt-matrix-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font-size: 12px; font-weight: 700; color: var(--ldt-text-2);
	text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
#ldt-app .ldt-matrix-head span { font-size: 13px; color: var(--ldt-purple); letter-spacing: 0; }
#ldt-app .ldt-matrix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
#ldt-app .ldt-cell {
	border-radius: var(--ldt-radius-sm); padding: 8px 8px 7px;
	display: flex; flex-direction: column; gap: 3px; min-height: 54px; justify-content: space-between;
}
#ldt-app .ldt-cell span { font-size: 10.5px; line-height: 1.2; }
#ldt-app .ldt-cell strong { font-size: 15px; font-weight: 800; line-height: 1; }
#ldt-app .ldt-cell-high { background: #D1FAE5; color: #065F46; }
#ldt-app .ldt-cell-mid { background: #DBEAFE; color: #1E40AF; }
#ldt-app .ldt-cell-low { background: #FEF3C7; color: #92400E; }
#ldt-app .ldt-cell-critical { background: #FEE2E2; color: #991B1B; }
/* Deliberately colourless: absence of data must not read as a bad score. */
#ldt-app .ldt-cell-na { background: var(--ldt-surface); color: var(--ldt-text-3); border: 1px dashed var(--ldt-border-2); }

/* ============= ORG HEATMAP (spec §24, §34) ============= */
#ldt-app .ldt-heatmap { display: flex; flex-direction: column; gap: 9px; }
#ldt-app .ldt-heat-row { display: flex; align-items: center; gap: 10px; }
#ldt-app .ldt-heat-label { flex: 0 0 38%; font-size: 12px; color: #374151; text-transform: capitalize; line-height: 1.3; }
#ldt-app .ldt-heat-bar { flex: 1; height: 9px; background: #EEF0F4; border-radius: 999px; overflow: hidden; }
#ldt-app .ldt-heat-bar > div { height: 100%; border-radius: 999px; }
#ldt-app .ldt-heat-row strong { font-size: 12px; font-weight: 700; color: var(--ldt-text-2); min-width: 24px; text-align: right; }

/* ============= MORE HUB ============= */
#ldt-app .ldt-screen-lead { font-size: 13.5px; color: var(--ldt-text-2); line-height: 1.5; margin-bottom: 16px !important; }
#ldt-app .ldt-more-grid { display: flex; flex-direction: column; gap: 8px; }
#ldt-app .ldt-more-item {
	display: flex; align-items: center; gap: 13px; padding: 14px;
	background: var(--ldt-bg); border: 1px solid var(--ldt-border);
	border-radius: var(--ldt-radius-lg); box-shadow: var(--ldt-shadow);
}
#ldt-app .ldt-more-icon {
	width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
	background: var(--ldt-light-purple); color: var(--ldt-purple);
	display: flex; align-items: center; justify-content: center;
}
#ldt-app .ldt-more-icon svg { width: 19px; height: 19px; }
#ldt-app .ldt-more-text { display: flex; flex-direction: column; min-width: 0; }
#ldt-app .ldt-more-text strong { font-size: 14.5px; font-weight: 600; color: var(--ldt-text); }
#ldt-app .ldt-more-text em { font-size: 12px; font-style: normal; color: var(--ldt-text-2); margin-top: 2px; line-height: 1.35; }

/* Challenge statuses reuse the action status pills. */
#ldt-app .ldt-status-pending_acceptance { background: #F3F4F6; color: #4B5563; }
#ldt-app .ldt-status-abandoned,
#ldt-app .ldt-status-dismissed { background: #F3F4F6; color: #9CA3AF; }

/* ============= PSYCHOMETRIC DISCLOSURE (spec §9, §36) =============
   Sits with the results, not in a footer nobody reads: the moment someone
   sees a number about themselves is the moment they need to know what it
   is and isn't. */
#ldt-app .ldt-disclosure {
	font-size: 11.5px; line-height: 1.5; color: var(--ldt-text-2);
	background: var(--ldt-surface); border: 1px solid var(--ldt-border);
	border-left: 3px solid var(--ldt-text-3);
	border-radius: var(--ldt-radius-md); padding: 11px 13px; margin-bottom: 16px;
}

/* ============= CORROBORATION (spec §15 "feedback externo") =============
   Always rendered next to a verdict so "verificada" never silently implies
   that anyone outside the leader saw it. */
#ldt-app .ldt-corr {
	display: inline-block; margin-top: 10px;
	font-size: 11.5px; font-weight: 600;
	padding: 5px 11px; border-radius: 999px;
}
#ldt-app .ldt-corr-self_reported { background: #F3F4F6; color: #4B5563; }
#ldt-app .ldt-corr-awaiting_witness { background: #FEF3C7; color: #92400E; }
#ldt-app .ldt-corr-externally_confirmed { background: #D1FAE5; color: #065F46; }
#ldt-app .ldt-corr-disputed { background: #FEE2E2; color: #991B1B; }

#ldt-app .ldt-witness { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ldt-border-2); }
#ldt-app .ldt-witness .ldt-btn-ghost { margin-top: 12px; }
#ldt-app .ldt-witness-link {
	display: block; margin-top: 8px; padding: 10px 12px;
	background: var(--ldt-surface); border: 1px solid var(--ldt-border);
	border-radius: var(--ldt-radius-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px; color: var(--ldt-text-2);
	word-break: break-all; line-height: 1.45;
}

/* The witness landing page renders standalone, outside any theme layout. */
body.ldt-witness-page { margin: 0; background: #fff; }
body.ldt-witness-page #ldt-app { left: auto; right: auto; margin-left: 0; margin-right: 0; width: 100%; max-width: 640px; }
body.ldt-witness-page #ldt-app .ldt-scroll { padding-bottom: 40px; }

/* ============= EXPORTS (spec §28) ============= */
#ldt-app .ldt-export-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#ldt-app .ldt-export-row .ldt-btn-ghost { padding: 9px 14px; font-size: 13px; }

/* ============= MATRIX PROVENANCE (spec §22) =============
   Each cell carries where its number came from, and each empty one says
   what to answer. An unexplained "—" beside a green 100 reads as a verdict
   about the person instead of "not measured yet". */
#ldt-app .ldt-cell { position: relative; min-height: 64px; }
#ldt-app .ldt-cell em {
	font-style: normal; font-size: 9px; line-height: 1.2;
	opacity: 0.7; display: block; margin-top: 2px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ldt-app .ldt-matrix-legend {
	display: flex; flex-wrap: wrap; gap: 12px;
	margin: 10px 0 14px; font-size: 10.5px; color: var(--ldt-text-2);
}
#ldt-app .ldt-matrix-legend span { display: inline-flex; align-items: center; gap: 5px; }
#ldt-app .ldt-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
#ldt-app .ldt-swatch.ldt-cell-na { border: 1px dashed var(--ldt-border-2); }

/* ============= ORG STRUCTURE / TEAM INTELLIGENCE (§23, §25) ============= */
#ldt-app .ldt-dept { margin-bottom: 16px; }
#ldt-app .ldt-dept:last-of-type { margin-bottom: 0; }
#ldt-app .ldt-team-row {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 0; border-bottom: 1px solid var(--ldt-border);
}
#ldt-app .ldt-team-row:last-child { border-bottom: none; }
#ldt-app .ldt-team-row > span:first-child { flex: 1; font-size: 13.5px; font-weight: 500; min-width: 0; }
#ldt-app .ldt-team-count { font-size: 11.5px; color: var(--ldt-text-3); white-space: nowrap; }
#ldt-app .ldt-team-row .ldt-btn-ghost,
#ldt-app .ldt-matrix-head .ldt-btn-ghost { padding: 6px 11px; font-size: 11.5px; }
/* Los formularios en línea se envolvían y dejaban campos de 40px donde
   no cabía ni una palabra. En móvil van apilados: un campo de texto que
   no deja leer lo que escribes no es un campo, es un obstáculo. */
#ldt-app .ldt-structure-new {
	display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center;
}
#ldt-app .ldt-structure-new > input,
#ldt-app .ldt-structure-new > select { flex: 1 1 100%; min-width: 0; }
#ldt-app .ldt-structure-new > button { flex: 0 0 auto; }
@media (min-width: 560px) {
	#ldt-app .ldt-structure-new > input,
	#ldt-app .ldt-structure-new > select { flex: 1 1 200px; }
}
#ldt-app .ldt-field-label {
	flex: 1 1 100%; font-size: 12px; font-weight: 600; color: var(--ldt-text-2);
	margin: 4px 0 -2px;
}
/* AQUÍ SE ROMPÍA EL ORDEN ETIQUETA/CAMPO.
   Esta regla llega después de `.ldt-structure-new > input` y reponía
   `flex: 1`, que es `flex: 1 1 0%`: la base pasaba de 100% a 0, así que
   los campos dejaban de ocupar su propia línea y el contenedor los
   reacomodaba junto a las etiquetas siguientes. Lo que se leía en
   pantalla era [campo] [campo] «Nombre visible» «Cómo te describes»,
   con cada etiqueta debajo de un campo que no era el suyo.
   Se conserva el crecimiento pero no se toca la base. */
#ldt-app .ldt-structure-new input {
	flex-grow: 1; padding: 10px 12px; border: 1.5px solid var(--ldt-border-2);
	border-radius: var(--ldt-radius-md); font-size: 14px;
}
/* Etiqueta real (<label for>), no un span decorativo: es lo que asocia el
   texto con su campo para un lector de pantalla. */
#ldt-app label.ldt-field-label { display: block; cursor: pointer; }
#ldt-app .ldt-structure-new input:focus { outline: none; border-color: var(--ldt-purple); }
/* Structural risk, not a person: amber, never red-alert. */
#ldt-app .ldt-plain-list li.ldt-risk { color: #92400E; }

/* ============ EMPRESA / DASHBOARD EJECUTIVO ============
   Pestañas de la vista de organización. Scroll horizontal en vez de
   apilarse: en pantalla chica cuatro pestañas apiladas empujan el
   contenido fuera de la primera vista. */
#ldt-app .ldt-org-tabs {
	display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
	margin: 0 0 14px; padding-bottom: 4px;
}
#ldt-app .ldt-org-tabs::-webkit-scrollbar { display: none; }
#ldt-app .ldt-org-tab {
	flex: 0 0 auto; background: transparent; color: var(--ldt-text-2);
	border: 1px solid var(--ldt-border-2); border-radius: var(--ldt-radius-md);
	padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
	white-space: nowrap;
}
#ldt-app .ldt-org-tab.active {
	background: var(--ldt-purple); color: #fff; border-color: var(--ldt-purple);
}
/* Verde para la barra de evolución: el rojo de ldt-cell-critical marca
   problema, y una serie temporal no es un problema por existir. */
#ldt-app .ldt-cell-good { background: #D1FAE5; }
#ldt-app .ldt-org-suggestion {
	cursor: pointer; text-align: left; font-size: 12px; line-height: 1.35;
	margin-top: 8px;
}
#ldt-app #ldt-org-suggested { flex-wrap: wrap; gap: 8px; }

/* ==================== RESUMEN EJECUTIVO ====================
   Réplica del diseño de referencia. Tokens propios de esta pantalla
   para no arrastrar la escala del espacio del líder, que es más
   compacta: un tablero ejecutivo se lee de un vistazo y necesita más
   aire y números más grandes. */
#ldt-app .ldt-exec {
	--ex-tinta: #0F172A;
	--ex-gris: #64748B;
	--ex-tenue: #94A3B8;
	--ex-linea: #EDF0F4;
	--ex-radio: 16px;
	--ex-sombra: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05);
	margin: -4px 0 0;
}

#ldt-app .ldt-exec-head { margin-bottom: 18px; }
#ldt-app .ldt-exec-title {
	font-size: 26px; font-weight: 800; color: var(--ex-tinta);
	letter-spacing: -0.02em; margin: 0 0 4px; line-height: 1.15;
}
#ldt-app .ldt-exec-sub { font-size: 14px; color: var(--ex-gris); margin: 0 0 14px; }
#ldt-app .ldt-exec-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#ldt-app .ldt-chip {
	display: inline-flex; align-items: center; gap: 6px; background: #fff;
	border: 1px solid var(--ex-linea); border-radius: 12px;
	padding: 9px 14px; font-size: 13px; font-weight: 600; color: #334155;
}
#ldt-app .ldt-btn-blue {
	background: #2563EB; color: #fff; border: none; border-radius: 12px;
	padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
	box-shadow: 0 1px 2px rgba(37,99,235,.3);
}
#ldt-app .ldt-btn-blue:hover { background: #1D4ED8; }
#ldt-app .ldt-btn-block { width: 100%; margin-top: 12px; }
#ldt-app .ldt-exec-note {
	margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ex-gris);
	background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px; padding: 10px 12px;
}

/* --- Rejilla de KPIs: dos columnas en teléfono --- */
#ldt-app .ldt-kpi-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px; margin-bottom: 12px;
}
#ldt-app .ldt-kpi {
	background: #fff; border: 1px solid var(--ex-linea); border-radius: var(--ex-radio);
	padding: 14px; box-shadow: var(--ex-sombra); display: flex; flex-direction: column;
	min-width: 0; overflow: hidden;
}
#ldt-app .ldt-kpi-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
#ldt-app .ldt-kpi-icon {
	width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px;
	display: inline-flex; align-items: center; justify-content: center;
}
#ldt-app .ldt-kpi-icon svg { width: 19px; height: 19px; }
#ldt-app .ldt-kpi-title {
	font-size: 13px; font-weight: 600; color: #334155; line-height: 1.3;
	min-width: 0; word-break: break-word;
}
#ldt-app .ldt-kpi-value {
	font-size: 30px; font-weight: 800; color: var(--ex-tinta);
	line-height: 1; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 5px;
}
#ldt-app .ldt-kpi-unit { font-size: 12.5px; font-weight: 600; color: var(--ex-tenue); letter-spacing: 0; }
#ldt-app .ldt-kpi-note { font-size: 12px; color: var(--ex-tenue); line-height: 1.45; margin: 2px 0 0; }
#ldt-app .ldt-kpi .ldt-spark { width: 100%; height: 40px; margin-top: 12px; display: block; }
#ldt-app .ldt-spark-empty { height: 40px; margin-top: 12px; }
#ldt-app .ldt-kpi-360 { grid-column: 1 / -1; }
#ldt-app .ldt-kpi-empty { grid-column: 1 / -1; background: #FAFBFC; border-style: dashed; }

/* --- Tarjetas grandes --- */
#ldt-app .ldt-org-grid { display: grid; gap: 12px; }
#ldt-app .ldt-org-cell {
	background: #fff; border: 1px solid var(--ex-linea); border-radius: var(--ex-radio);
	box-shadow: var(--ex-sombra); padding: 16px; margin: 0;
}
#ldt-app .ldt-exec .ldt-card-title {
	font-size: 15px; font-weight: 700; color: var(--ex-tinta); margin: 0 0 2px;
	display: flex; align-items: center; gap: 7px;
}
#ldt-app .ldt-exec .ldt-card-title svg { width: 15px; height: 15px; }
#ldt-app .ldt-title-alert { color: #DC2626; }
#ldt-app .ldt-title-ai { color: #2563EB; }
#ldt-app .ldt-card-sub { font-size: 12.5px; color: var(--ex-gris); margin: 2px 0 14px; line-height: 1.45; }
#ldt-app .ldt-card-foot { font-size: 12px; color: var(--ex-tenue); margin: 12px 0 0; line-height: 1.5; }
#ldt-app .ldt-card-empty { background: #FAFBFC; border-style: dashed; box-shadow: none; }
#ldt-app .ldt-card-alert { background: #FFFCFC; }
#ldt-app .ldt-card-ai { background: #FAFBFF; }

/* --- Donas --- */
#ldt-app .ldt-donut-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
#ldt-app .ldt-donut-wrap { position: relative; width: 116px; height: 116px; flex: 0 0 116px; }
#ldt-app .ldt-donut { width: 116px; height: 116px; display: block; }
#ldt-app .ldt-donut-center {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; pointer-events: none;
}
#ldt-app .ldt-donut-center strong { font-size: 21px; font-weight: 800; color: var(--ex-tinta); line-height: 1; }
#ldt-app .ldt-donut-center span { font-size: 10px; color: var(--ex-tenue); margin-top: 2px; }
#ldt-app .ldt-legend { flex: 1 1 auto; min-width: 0; }
#ldt-app .ldt-legend-row { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 12.5px; }
#ldt-app .ldt-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
#ldt-app .ldt-legend-label { flex: 1 1 auto; color: var(--ex-gris); min-width: 0; }
#ldt-app .ldt-legend-value { font-weight: 700; color: var(--ex-tinta); font-size: 12px; }

/* --- Gráfica de tendencia --- */
#ldt-app .ldt-chart { display: flex; gap: 8px; height: 150px; }
#ldt-app .ldt-chart-y {
	display: flex; flex-direction: column; justify-content: space-between;
	font-size: 10px; color: var(--ex-tenue); flex: 0 0 auto; text-align: right;
}
#ldt-app .ldt-chart-svg { flex: 1 1 auto; height: 100%; width: 100%; }
#ldt-app .ldt-chart-x {
	display: flex; justify-content: space-between; font-size: 10px;
	color: var(--ex-tenue); margin-top: 6px; padding-left: 28px;
}

/* --- Brechas --- */
#ldt-app .ldt-gap-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px; }
#ldt-app .ldt-gap-name { flex: 1 1 40%; color: #334155; min-width: 0; }
#ldt-app .ldt-gap-bar { flex: 1 1 40%; height: 7px; background: #F1F5F9; border-radius: 4px; overflow: hidden; }
#ldt-app .ldt-gap-bar > div { height: 100%; background: #7C3AED; border-radius: 4px; }
#ldt-app .ldt-gap-score { flex: 0 0 auto; font-weight: 700; color: var(--ex-tinta); font-size: 12px; }

/* --- Listas --- */
#ldt-app .ldt-list-row,
#ldt-app .ldt-action-row,
#ldt-app .ldt-alert-row {
	display: flex; align-items: center; gap: 11px; padding: 11px 0;
	border-top: 1px solid var(--ex-linea); text-align: left;
}
#ldt-app .ldt-org-cell > .ldt-list-row:first-of-type,
#ldt-app .ldt-org-cell > .ldt-action-row:first-of-type,
#ldt-app .ldt-org-cell > .ldt-alert-row:first-of-type { border-top: none; }
#ldt-app .ldt-action-row { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
#ldt-app .ldt-action-row:hover { background: #F8FAFC; }
#ldt-app .ldt-avatar {
	width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
	background: #EEF2FF; color: #4F46E5; font-weight: 700; font-size: 14px;
	display: inline-flex; align-items: center; justify-content: center;
}
#ldt-app .ldt-list-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#ldt-app .ldt-list-main strong { font-size: 13.5px; font-weight: 600; color: var(--ex-tinta); }
#ldt-app .ldt-list-main em {
	font-style: normal; font-size: 12px; color: var(--ex-gris); line-height: 1.4;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ldt-app .ldt-alert-row .ldt-list-main em { white-space: normal; }
#ldt-app .ldt-status { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; }
#ldt-app .ldt-status-ok { color: #16A34A; }
#ldt-app .ldt-status-warn { color: #F59E0B; }
#ldt-app .ldt-status-bad { color: #DC2626; }
#ldt-app .ldt-action-chevron { color: var(--ex-tenue); display: inline-flex; }
#ldt-app .ldt-action-chevron svg { width: 16px; height: 16px; }
#ldt-app .ldt-alert-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; margin-top: 5px; align-self: flex-start; }
#ldt-app .ldt-pending-row {
	display: flex; flex-direction: column; gap: 2px; padding: 10px 0;
	border-top: 1px solid var(--ex-linea); font-size: 13px;
}
#ldt-app .ldt-pending-row strong { color: var(--ex-tinta); font-weight: 600; }
#ldt-app .ldt-pending-row span { color: var(--ex-gris); font-size: 12px; line-height: 1.45; }

/* --- Teléfono grande / tableta --- */
@media (min-width: 600px) {
	#ldt-app .ldt-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#ldt-app .ldt-kpi-360 { grid-column: auto; }
	#ldt-app .ldt-org-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#ldt-app .ldt-org-cell-wide { grid-column: 1 / -1; }
}

/* --- Escritorio: la barra inferior se vuelve menú lateral ---
   POR QUÉ EL MENÚ SE QUEDABA MEDIO FUERA DE LA PANTALLA.
   El bloque de (min-width: 700px), más arriba en este mismo archivo, deja
   la barra centrada con `left: 50%` y `transform: translateX(-50%)`, que
   es lo correcto mientras es una barra inferior flotante. Este bloque la
   convierte en menú lateral pero solo redeclaraba position/top/left/width:
   `transform`, `max-width` y `right` seguían puestos. El translateX(-50%)
   se aplicaba entonces sobre 236 px de ancho y empujaba el menú 118 px
   fuera del viewport por la izquierda — exactamente la franja blanca con
   el texto cortado ("...ones", "...k 360°").
   Cuando una regla cambia el papel de un elemento, tiene que deshacer todo
   lo que traía del papel anterior. */
@media (min-width: 1024px) {
	#ldt-app .ldt-bottom-nav {
		position: fixed; top: 0; left: 0; right: auto; bottom: 0; width: 236px;
		max-width: none; transform: none; border-radius: 0;
		flex-direction: column; justify-content: flex-start; align-items: stretch;
		gap: 4px; padding: 92px 12px 16px; border-top: none;
		border-right: 1px solid var(--ldt-border-2); background: #fff;
		overflow-y: auto;
	}

	/* El menú lateral se pinta por encima de la cabecera (z-index 200
	   contra 100), así que el logo y el título quedaban tapados. La
	   cabecera arranca donde termina el menú. */
	#ldt-app .ldt-header {
		padding-left: 260px;
		padding-right: 28px;
	}
	#ldt-app .ldt-nav-item {
		flex-direction: row; justify-content: flex-start; gap: 12px;
		padding: 11px 14px; border-radius: 12px;
	}
	#ldt-app .ldt-nav-item span { font-size: 14px; }
	#ldt-app .ldt-nav-item.active { background: #EEF2FF; }

	/* El `max-width: 760px` que hereda del bloque de 1024px de arriba
	   dejaba el contenido en 712 px útiles y más de 600 px vacíos a la
	   derecha, en un producto lleno de tablas y matrices de competencias
	   que agradecen el espacio. Se libera el contenedor de scroll y se
	   centra el contenido con un ancho de lectura razonable. */
	#ldt-app .ldt-scroll {
		margin-left: 236px; margin-right: 0;
		max-width: none; width: auto;
		padding: 0 28px 40px;
	}
	#ldt-app .ldt-content { max-width: 1100px; margin: 0 auto; padding: 24px 0 40px; }

	#ldt-app .ldt-exec-title { font-size: 30px; }
	#ldt-app .ldt-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	#ldt-app .ldt-kpi-value { font-size: 32px; }
	#ldt-app .ldt-org-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#ldt-app .ldt-org-cell-wide { grid-column: 1 / -1; }
}

/* ==================== MENÚ LATERAL ====================
   Panel azul marino sobre el fondo claro de la app. Es la única
   superficie oscura del producto a propósito: separa "dónde estoy"
   de "qué estoy viendo" sin necesidad de ningún rótulo. */
#ldt-app .ldt-dw-overlay {
	position: fixed; inset: 0; background: rgba(15,23,42,.55);
	z-index: 998; backdrop-filter: blur(1px);
}
#ldt-app .ldt-dw {
	position: fixed; top: 0; left: 0; bottom: 0; width: 288px; max-width: 86vw;
	background: linear-gradient(180deg, #0B1F3F 0%, #08182F 100%);
	color: #E2E8F0; z-index: 999; display: flex; flex-direction: column;
	transform: translateX(-102%); transition: transform .26s cubic-bezier(.4,0,.2,1);
	box-shadow: 4px 0 24px rgba(2,8,23,.4);
}
#ldt-app .ldt-dw.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
	#ldt-app .ldt-dw { transition: none; }
}

#ldt-app .ldt-dw-head {
	display: flex; align-items: flex-start; justify-content: space-between;
	padding: 20px 18px 4px; flex: 0 0 auto;
}
#ldt-app .ldt-dw-brand { display: flex; align-items: center; gap: 10px; }
#ldt-app .ldt-dw-brand svg { width: 30px; height: 30px; color: #3B82F6; }
#ldt-app .ldt-dw-brand span {
	font-size: 15px; font-weight: 800; letter-spacing: .02em;
	line-height: 1.05; color: #fff;
}
#ldt-app .ldt-dw-close {
	background: none; border: none; color: #94A3B8; font-size: 27px;
	line-height: 1; cursor: pointer; padding: 0 4px;
}

#ldt-app .ldt-dw-user {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 18px 18px; flex: 0 0 auto;
}
#ldt-app .ldt-dw-face {
	width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
	flex: 0 0 48px; background: #1E3A8A; display: inline-flex;
	align-items: center; justify-content: center;
}
#ldt-app .ldt-dw-face img { width: 100%; height: 100%; object-fit: cover; }
#ldt-app .ldt-dw-face svg { width: 22px; height: 22px; color: #93C5FD; }
#ldt-app .ldt-dw-who { display: flex; flex-direction: column; min-width: 0; }
#ldt-app .ldt-dw-who strong {
	font-size: 15px; font-weight: 700; color: #fff;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ldt-app .ldt-dw-who em { font-style: normal; font-size: 12.5px; color: #94A3B8; margin-top: 2px; }

#ldt-app .ldt-dw-nav {
	flex: 1 1 auto; overflow-y: auto; padding: 0 12px 8px;
	-webkit-overflow-scrolling: touch;
}
#ldt-app .ldt-dw-group { margin-bottom: 16px; }
#ldt-app .ldt-dw-group-title {
	font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
	color: #3B82F6; padding: 8px 10px 6px;
}
#ldt-app .ldt-dw-item {
	display: flex; align-items: center; gap: 13px; width: 100%;
	background: none; border: none; color: #CBD5E1; cursor: pointer;
	padding: 10px 10px; border-radius: 10px; text-align: left;
	font-size: 14px; font-weight: 500; line-height: 1.2;
}
#ldt-app .ldt-dw-item:hover { background: rgba(59,130,246,.13); color: #fff; }
#ldt-app .ldt-dw-item.active { background: #1D4ED8; color: #fff; font-weight: 600; }
#ldt-app .ldt-dw-ico { flex: 0 0 20px; display: inline-flex; }
#ldt-app .ldt-dw-ico svg { width: 20px; height: 20px; }
#ldt-app .ldt-dw-text { flex: 1 1 auto; min-width: 0; }
#ldt-app .ldt-dw-badge {
	flex: 0 0 auto; background: #EF4444; color: #fff; font-size: 11px;
	font-weight: 700; min-width: 21px; height: 21px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
/* Los módulos sin construir se ven igual, apenas más tenues: el menú es
   el mapa completo del producto y no debería cambiar de forma en cada
   entrega, pero tampoco fingir que ya llevan a algún lado. */
#ldt-app .ldt-dw-soon { color: #7C8DA6; }

#ldt-app .ldt-dw-foot {
	flex: 0 0 auto; padding: 10px 12px 18px;
	border-top: 1px solid rgba(148,163,184,.16);
}
#ldt-app .ldt-dw-logout { color: #F87171; }
#ldt-app .ldt-dw-logout:hover { background: rgba(248,113,113,.12); color: #FCA5A5; }

.ldt-toast {
	position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px);
	background: #0F172A; color: #F8FAFC; font-size: 13px; line-height: 1.45;
	padding: 12px 16px; border-radius: 12px; max-width: min(420px, 90vw);
	box-shadow: 0 8px 28px rgba(2,8,23,.32); z-index: 1000;
	opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
}
.ldt-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* En escritorio el menú lateral ya está fijo, así que el panel se
   comporta como un cajón secundario sobre él, no como el único menú. */
@media (min-width: 1024px) {
	#ldt-app .ldt-dw { width: 300px; }
	.ldt-toast { bottom: 28px; }
}

/* Puestos */
#ldt-app .ldt-pos-row { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
#ldt-app .ldt-pos-row:hover { background: #F8FAFC; }
#ldt-app .ldt-tag-crit {
	display: inline-block; background: #FEE2E2; color: #991B1B; font-size: 10px;
	font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}
#ldt-app .ldt-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; white-space: nowrap; }
#ldt-app .ldt-structure-new select,
#ldt-app .ldt-structure-new input[type="number"] {
	border: 1px solid var(--ldt-border-2); border-radius: var(--ldt-radius-md);
	padding: 10px 12px; font-size: 14px; background: #fff;
}

/* Personas */
#ldt-app .ldt-person { padding: 12px 0; border-top: 1px solid var(--ex-linea, #EDF0F4); }
#ldt-app .ldt-person:first-of-type { border-top: none; }
#ldt-app .ldt-person-head { display: flex; align-items: center; gap: 11px; }
#ldt-app .ldt-person-controls { display: flex; gap: 8px; margin-top: 10px; padding-left: 45px; }
#ldt-app .ldt-person-controls select {
	flex: 1 1 0; min-width: 0; border: 1px solid var(--ldt-border-2);
	border-radius: 10px; padding: 8px 10px; font-size: 12.5px; background: #fff;
}
#ldt-app .ldt-tag-self {
	display: inline-block; background: #EEF2FF; color: #4F46E5; font-size: 10px;
	font-weight: 700; padding: 2px 7px; border-radius: 999px; vertical-align: middle;
}
@media (max-width: 420px) {
	#ldt-app .ldt-person-controls { padding-left: 0; flex-direction: column; }
}

/* Código de invitación */
#ldt-app .ldt-invite-code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
#ldt-app .ldt-invite-code code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px;
	font-weight: 700; letter-spacing: .16em; background: #F1F5F9; color: #0F172A;
	padding: 10px 16px; border-radius: 10px; flex: 1 1 auto; text-align: center;
}

/* Diagnóstico de membresías */
#ldt-app .ldt-diag {
	margin-top: 12px; padding: 12px 14px; background: #F8FAFC;
	border: 1px solid #E2E8F0; border-radius: 12px; font-size: 12.5px; line-height: 1.6;
}
#ldt-app .ldt-diag p { margin: 0 0 6px; }
#ldt-app .ldt-diag ul { margin: 0 0 10px; padding-left: 18px; }
#ldt-app .ldt-diag li { margin-bottom: 3px; }

/* Perfil */
#ldt-app .ldt-profile-head { display: flex; align-items: center; gap: 16px; }
#ldt-app .ldt-profile-photo {
	width: 76px; height: 76px; flex: 0 0 76px; border-radius: 50%; overflow: hidden;
	background: #EEF2FF; display: inline-flex; align-items: center; justify-content: center;
}
#ldt-app .ldt-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
#ldt-app .ldt-profile-photo span { font-size: 30px; font-weight: 700; color: #4F46E5; }
#ldt-app .ldt-profile-id { min-width: 0; }
#ldt-app .ldt-profile-id h2 { font-size: 20px; font-weight: 700; margin: 0 0 2px; color: #0F172A; }
#ldt-app .ldt-profile-id p { font-size: 13px; color: #475569; margin: 0 0 3px; }
#ldt-app .ldt-profile-id small { font-size: 12px; color: #94A3B8; }
#ldt-app .ldt-profile-row {
	display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
	border-top: 1px solid #EDF0F4; font-size: 13px;
}
#ldt-app .ldt-profile-row span { color: #64748B; }
#ldt-app .ldt-profile-row strong { color: #0F172A; text-align: right; }

/* Sugerencia de competencias del Coach */
#ldt-app .ldt-sug-row {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 9px 0; border-top: 1px solid var(--ex-linea, #EDF0F4); font-size: 13px;
}
#ldt-app .ldt-sug-row .ldt-check { flex: 1 1 55%; min-width: 0; }
#ldt-app .ldt-sug-level {
	flex: 0 0 74px; border: 1px solid var(--ldt-border-2); border-radius: 8px;
	padding: 6px 8px; font-size: 13px; text-align: center;
}
#ldt-app .ldt-sug-reason {
	flex: 1 1 100%; font-size: 11.5px; color: var(--ldt-text-2);
	line-height: 1.45; padding-left: 24px;
}

/* Informe 360: barras agrupadas por dominio */
#ldt-app .ldt-multi-chart { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
#ldt-app .ldt-multi-group { flex: 0 0 auto; text-align: center; min-width: 76px; }
#ldt-app .ldt-multi-bars {
	display: flex; align-items: flex-end; justify-content: center;
	gap: 3px; height: 110px;
}
#ldt-app .ldt-multi-bar {
	width: 12px; height: 100%; display: flex; align-items: flex-end;
	background: #F1F5F9; border-radius: 3px; overflow: hidden;
}
#ldt-app .ldt-multi-bar > div { width: 100%; border-radius: 3px; }
#ldt-app .ldt-multi-label {
	display: block; font-size: 10.5px; color: var(--ldt-text-2);
	margin-top: 6px; line-height: 1.25;
}

/* Página del evaluador 360 */
#ldt-app .ldt-subject-bar {
	position: sticky; top: 0; z-index: 5; background: #EEF2FF; color: #3730A3;
	border: 1px solid #C7D2FE; border-radius: 12px; padding: 10px 14px;
	font-size: 13px; margin-bottom: 14px; line-height: 1.4;
}
#ldt-app .ldt-intro-h {
	font-size: 13px; font-weight: 700; color: #0F172A; margin: 16px 0 6px;
}
#ldt-app .ldt-intro-list { margin: 0; padding-left: 18px; }
#ldt-app .ldt-intro-list li {
	font-size: 13px; line-height: 1.55; color: #334155; margin-bottom: 7px;
}
#ldt-app .ldt-360-nobasis { color: #64748B; font-style: italic; }
#ldt-app .ldt-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#ldt-app .ldt-avatar { overflow: hidden; }

/* Sin bordes en los avatares: el aro alrededor de la foto la hace ver
   recortada y compite con la imagen. */
#ldt-app .ldt-avatar,
#ldt-app .ldt-profile-photo,
#ldt-app .ldt-dw-face,
#ldt-app .ldt-header-avatar,
#ldt-app .ldt-avatar img,
#ldt-app .ldt-profile-photo img { border: none !important; box-shadow: none !important; }

/* Matriz de talento */
#ldt-app .ldt-ninebox {
	display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr));
	gap: 6px; margin-top: 12px;
}
#ldt-app .ldt-box-rowlabel {
	display: flex; align-items: center; font-size: 10.5px; font-weight: 700;
	color: var(--ldt-text-2); writing-mode: vertical-rl; transform: rotate(180deg);
	justify-content: center; padding: 4px 0;
}
#ldt-app .ldt-box-collabel {
	font-size: 10.5px; font-weight: 600; color: var(--ldt-text-2);
	text-align: center; padding-top: 4px;
}
#ldt-app .ldt-box-cell {
	border-radius: 10px; padding: 8px; min-height: 74px;
	display: flex; flex-direction: column; gap: 3px;
}
#ldt-app .ldt-box-baja  { background: #FEF2F2; }
#ldt-app .ldt-box-media { background: #FFFBEB; }
#ldt-app .ldt-box-alta  { background: #ECFDF5; }
#ldt-app .ldt-box-count { font-size: 17px; font-weight: 800; color: #0F172A; line-height: 1; }
#ldt-app .ldt-box-person {
	font-size: 10.5px; color: #334155; line-height: 1.3;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ldt-app .ldt-rate { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; }
#ldt-app .ldt-rate span { font-size: 11px; font-weight: 600; color: var(--ldt-text-2); }

/* Objetivos */
#ldt-app .ldt-objective { padding: 12px 0; border-top: 1px solid var(--ex-linea, #EDF0F4); }
#ldt-app .ldt-objective:first-of-type { border-top: none; }
#ldt-app .ldt-obj-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 14px; }
#ldt-app .ldt-kr-row {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 6px 0 6px 14px; font-size: 12.5px;
}
#ldt-app .ldt-kr-title { flex: 1 1 45%; color: var(--ldt-text-2); min-width: 0; }
#ldt-app .ldt-kr-value {
	flex: 0 0 84px; border: 1px solid var(--ldt-border-2); border-radius: 8px;
	padding: 6px 8px; font-size: 12.5px; text-align: center;
}

/* Cambio conductual */
#ldt-app .ldt-change-row {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 9px 0; border-top: 1px solid var(--ex-linea, #EDF0F4); font-size: 12.5px;
}
#ldt-app .ldt-change-track {
	display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
	background: #F8FAFC; border-radius: 999px; padding: 3px 10px;
}
#ldt-app .ldt-change-base { color: #94A3B8; font-weight: 600; }
#ldt-app .ldt-change-arrow { color: #CBD5E1; }
#ldt-app .ldt-change-now { color: #0F172A; font-weight: 700; }

/* Simulaciones */
#ldt-app .ldt-scenario {
	display: block; width: 100%; text-align: left; background: #fff; cursor: pointer;
	border: 1px solid var(--ldt-border-2); border-radius: var(--ldt-radius-lg);
	padding: 14px; margin-bottom: 10px;
}
#ldt-app .ldt-scenario:hover { border-color: var(--ldt-purple); }
#ldt-app .ldt-scenario strong { display: block; font-size: 15px; color: #0F172A; margin-bottom: 4px; }
#ldt-app .ldt-scenario em { display: block; font-style: normal; font-size: 12.5px; color: #475569; line-height: 1.45; }
#ldt-app .ldt-scenario span { display: block; font-size: 12px; color: #94A3B8; line-height: 1.45; margin-top: 4px; }
#ldt-app .ldt-chat { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
#ldt-app .ldt-bubble {
	max-width: 86%; padding: 10px 13px; border-radius: 14px;
	font-size: 13.5px; line-height: 1.5; white-space: pre-wrap;
}
#ldt-app .ldt-bubble-yo { align-self: flex-end; background: #2563EB; color: #fff; border-bottom-right-radius: 4px; }
#ldt-app .ldt-bubble-otro { align-self: flex-start; background: #F1F5F9; color: #0F172A; border-bottom-left-radius: 4px; }

/* Encuestas de clima */
#ldt-app .ldt-survey-q { padding: 12px 0; border-top: 1px solid var(--ex-linea, #EDF0F4); }
#ldt-app .ldt-survey-q p { font-size: 13.5px; color: #0F172A; line-height: 1.5; margin: 0 0 8px; }
#ldt-app .ldt-sv-scale { display: flex; gap: 6px; }
#ldt-app .ldt-sv-opt {
	flex: 1 1 0; border: 1px solid var(--ldt-border-2); background: #fff; cursor: pointer;
	border-radius: 10px; padding: 10px 0; font-size: 14px; font-weight: 700; color: #475569;
}
#ldt-app .ldt-sv-opt.active { background: var(--ldt-purple); border-color: var(--ldt-purple); color: #fff; }
#ldt-app .ldt-comment {
	font-size: 13px; line-height: 1.55; color: #334155; background: #F8FAFC;
	border-left: 3px solid #CBD5E1; border-radius: 0 10px 10px 0;
	padding: 10px 12px; margin: 8px 0 0;
}

/* Señales */
#ldt-app .ldt-signal {
	display: flex; flex-direction: column; gap: 3px; padding: 11px 0;
	border-top: 1px solid var(--ex-linea, #EDF0F4);
}
#ldt-app .ldt-signal:first-of-type { border-top: none; }
#ldt-app .ldt-signal strong { font-size: 13.5px; color: #0F172A; }
#ldt-app .ldt-signal span { font-size: 12.5px; color: #475569; line-height: 1.5; }
#ldt-app .ldt-signal em {
	font-style: normal; font-size: 12.5px; color: #2563EB; line-height: 1.5;
	padding-left: 12px; border-left: 2px solid #BFDBFE; margin-top: 3px;
}

/* Primeros pasos */
#ldt-app .ldt-card-onboarding { background: #F8FAFF; border-color: #DBEAFE; }
#ldt-app .ldt-step {
	display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
	border-top: 1px solid #E3ECFA;
}
#ldt-app .ldt-step-ok, #ldt-app .ldt-step-todo {
	flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; margin-top: 2px;
}
#ldt-app .ldt-step-ok { background: #16A34A; color: #fff; }
#ldt-app .ldt-step-todo { border: 2px solid #CBD5E1; }
#ldt-app .ldt-step-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#ldt-app .ldt-step-body strong { font-size: 13.5px; color: #0F172A; }
#ldt-app .ldt-step-body span { font-size: 12.5px; color: #475569; line-height: 1.45; }
#ldt-app .ldt-step-body em { font-style: normal; font-size: 12px; color: #2563EB; line-height: 1.45; }
#ldt-app .ldt-step-done .ldt-step-body strong { color: #64748B; font-weight: 500; }

/* Hallazgos */
#ldt-app .ldt-findings { display: grid; gap: 10px; margin-top: 10px; }
#ldt-app .ldt-finding {
	border-left: 3px solid; border-radius: 0 12px 12px 0; padding: 12px 14px;
}
#ldt-app .ldt-finding-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
#ldt-app .ldt-finding-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
#ldt-app .ldt-finding strong { display: block; font-size: 14px; color: #0F172A; margin-bottom: 4px; }
#ldt-app .ldt-finding p { font-size: 13px; color: #334155; line-height: 1.55; margin: 0 0 6px; }
#ldt-app .ldt-finding-evidence { font-size: 11.5px; color: #64748B; font-style: italic; }
#ldt-app .ldt-lid-row { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; text-align: left; }
#ldt-app .ldt-lid-row:hover { background: #F8FAFC; }

/* ============= ORGANIGRAMA ============= */
/* El arbol se sangra con margin-left en linea (lo calcula el JS por nivel)
   y la guia vertical la dibuja el borde izquierdo del nodo. Sin lineas
   SVG ni posicionamiento absoluto: la jerarquia puede tener cualquier
   profundidad y cualquier numero de hermanos, y con posiciones calculadas
   el primer organigrama real se desborda del contenedor en movil. */
#ldt-app .ldt-chart-tree { margin-top: 4px; }
#ldt-app .ldt-chart-node { position: relative; padding-left: 12px; border-left: 2px solid var(--ex-linea); }
#ldt-app .ldt-chart-tree > .ldt-chart-node { border-left: none; padding-left: 0; }
#ldt-app .ldt-chart-card {
	background: #fff; border: 1px solid var(--ex-linea); border-radius: 12px;
	padding: 11px 13px; margin: 8px 0;
}
#ldt-app .ldt-chart-critical { border-color: #FECACA; background: #FFFBFB; }
#ldt-app .ldt-chart-title {
	font-size: 13.5px; font-weight: 700; color: var(--ex-tinta);
	display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
#ldt-app .ldt-chart-flag {
	font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: #DC2626; background: #FEF2F2; border-radius: 5px; padding: 2px 6px;
}
#ldt-app .ldt-chart-holders { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 3px; }
#ldt-app .ldt-chart-holder {
	display: inline-flex; align-items: center; gap: 6px;
	background: #F8FAFC; border-radius: 999px; padding: 3px 9px 3px 3px;
	font-size: 12px; color: #334155;
}
#ldt-app .ldt-chart-holder em { font-style: normal; font-weight: 700; font-size: 11.5px; }
#ldt-app .ldt-chart-vacant { font-size: 12px; color: var(--ex-tenue); font-style: italic; }
#ldt-app .ldt-chart-warn { display: block; font-size: 11.5px; color: #B45309; margin-top: 2px; }
#ldt-app .ldt-chart-parent { display: block; margin-top: 9px; }
#ldt-app .ldt-chart-select {
	width: 100%; margin-top: 3px; padding: 7px 9px; font-size: 12.5px;
	border: 1px solid var(--ex-linea); border-radius: 9px; background: #fff; color: #334155;
}
#ldt-app .ldt-chart-select:disabled { opacity: .55; }
#ldt-app .ldt-avatar-xs {
	width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
	background: #EEF2FF; color: #4F46E5; font-weight: 700; font-size: 10px;
	display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
#ldt-app .ldt-avatar-xs img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ============= BRECHAS ============= */
#ldt-app .ldt-gap-item { padding: 13px 0; border-top: 1px solid var(--ex-linea); }
#ldt-app .ldt-gap-item:first-of-type { border-top: none; padding-top: 4px; }
#ldt-app .ldt-gap-head {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px;
}
#ldt-app .ldt-gap-head strong { font-size: 13.5px; color: var(--ex-tinta); }
/* La cifra de brecha va en rojo porque siempre es una falta: aqui un
   numero grande nunca es una buena noticia, al reves que en las barras
   de puntaje. */
#ldt-app .ldt-gap-head .ldt-gap-score { margin-left: auto; color: #DC2626; font-size: 14px; }
#ldt-app .ldt-gap-item .ldt-gap-bar { flex: none; width: 100%; height: 8px; margin-bottom: 6px; }
#ldt-app .ldt-gap-item .ldt-card-sub { margin: 0 0 2px; }
#ldt-app .ldt-gap-item .ldt-card-foot { margin-top: 3px; }

/* ============= REPORTE DE DECISIONES ============= */
#ldt-app .ldt-decision { padding: 14px 0; border-top: 1px solid var(--ex-linea); }
#ldt-app .ldt-decision:first-of-type { border-top: none; padding-top: 2px; }
#ldt-app .ldt-decision-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 6px; }
#ldt-app .ldt-decision-num {
	flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
	background: #4F46E5; color: #fff; font-size: 11.5px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
}
#ldt-app .ldt-decision-head strong { font-size: 14px; color: var(--ex-tinta); line-height: 1.35; }
#ldt-app .ldt-decision-do { font-size: 13px; color: #334155; line-height: 1.55; margin: 0 0 9px; }
/* Evidencia y confianza en un bloque aparte y mas apagado: la
   recomendacion se lee primero, el respaldo esta ahi para quien lo
   cuestione. Al mismo peso visual, nadie lee ninguno de los dos. */
#ldt-app .ldt-criteria {
	background: #F8FAFC; border-radius: 10px; padding: 9px 11px; margin-bottom: 9px;
}
#ldt-app .ldt-criteria-row {
	display: flex; gap: 8px; font-size: 12px; color: #475569;
	line-height: 1.5; padding: 3px 0;
}
#ldt-app .ldt-criteria-row > span:first-child {
	flex: 0 0 96px; color: var(--ex-tenue); font-weight: 600;
}

/* ============= COMPETENCIAS POR LIDER ============= */
#ldt-app .ldt-comp-row { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
#ldt-app .ldt-comp-row:hover { background: #F8FAFC; }
#ldt-app .ldt-comp-empty { opacity: .6; }
/* La marca del nivel exigido va dentro de la barra, no al lado: al lado
   se lee como un segundo puntaje en vez de como el umbral que hay que
   alcanzar. */
#ldt-app .ldt-comp-bar { position: relative; overflow: visible; }
#ldt-app .ldt-comp-bar > div { position: relative; z-index: 0; }
#ldt-app .ldt-comp-req {
	position: absolute; top: -3px; width: 2px; height: 13px;
	background: #0F172A; border-radius: 1px; z-index: 1;
}
#ldt-app .ldt-comp-bar + .ldt-gap-score { flex: 0 0 34px; text-align: right; }

/* ============= PLAN ASIGNADO ============= */
/* La franja de asignación va inmediatamente bajo el título y con fondo
   propio: es lo que separa una sugerencia de un compromiso con fecha, y
   si se lee al final ya nadie la ve. */
#ldt-app .ldt-assigned {
	display: flex; align-items: flex-start; gap: 8px;
	background: #EEF2FF; border-radius: 10px; padding: 8px 11px; margin: 9px 0;
	font-size: 12.5px; color: #3730A3; line-height: 1.45;
}
#ldt-app .ldt-assigned-late { background: #FEF2F2; color: #991B1B; }
#ldt-app .ldt-assigned-icon { flex: 0 0 auto; font-size: 13px; line-height: 1.35; }
#ldt-app .ldt-assigned strong { font-weight: 700; }

/* ============= MATERIAL DE APOYO ============= */
#ldt-app .ldt-resources { margin-top: 10px; }
#ldt-app .ldt-resource {
	display: block; text-decoration: none; padding: 11px 13px; margin-bottom: 8px;
	background: #F8FAFC; border: 1px solid var(--ex-linea, #EDF0F4); border-radius: 12px;
}
#ldt-app .ldt-resource:hover { background: #F1F5F9; }
#ldt-app .ldt-resource-type {
	display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; color: #4F46E5; background: #EEF2FF;
	border-radius: 5px; padding: 2px 7px; margin-bottom: 5px;
}
#ldt-app .ldt-resource strong { display: block; font-size: 13.5px; color: #0F172A; line-height: 1.35; }
#ldt-app .ldt-resource em { display: block; font-style: normal; font-size: 12px; color: #64748B; margin-top: 1px; }
#ldt-app .ldt-resource-why { display: block; font-size: 12px; color: #475569; line-height: 1.5; margin-top: 5px; }
#ldt-app .ldt-resource-note { display: block; font-size: 11px; color: #94A3B8; margin-top: 6px; }

/* ============= SESIÓN DE COACHING ============= */
#ldt-app .ldt-coach-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 4px; }
#ldt-app .ldt-coach-avatar {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
	background: #EEF2FF; display: inline-flex; align-items: center; justify-content: center;
	font-size: 20px; line-height: 1;
}
/* El foco declarado es lo que distingue una sesión de un chat: la
   conversación trata de algo concreto que ya estaba decidido antes de
   abrirla. */
#ldt-app .ldt-coach-focus {
	display: flex; flex-direction: column; gap: 2px;
	background: #F8FAFC; border-left: 3px solid #4F46E5; border-radius: 0 10px 10px 0;
	padding: 9px 12px; margin: 10px 0 4px;
}
#ldt-app .ldt-coach-focus-label {
	font-size: 10.5px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; color: #94A3B8;
}
#ldt-app .ldt-coach-focus strong { font-size: 13.5px; color: #0F172A; }
#ldt-app .ldt-coach-focus span:last-child { font-size: 12px; color: #64748B; }
#ldt-app .ldt-msg-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
#ldt-app .ldt-msg-avatar {
	flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
	background: #EEF2FF; display: inline-flex; align-items: center; justify-content: center;
	font-size: 13px; line-height: 1; margin-top: 2px;
}
#ldt-app .ldt-msg-row .ldt-msg { margin-bottom: 0; }
/* Entradas concretas en vez de un cursor parpadeando. Sin esto, quien
   entra tiene que inventar el tema y a menudo se va sin escribir nada. */
#ldt-app .ldt-starters { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
#ldt-app .ldt-starters-label {
	font-size: 10.5px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; color: #94A3B8;
}
#ldt-app .ldt-starter {
	text-align: left; background: #F8FAFC; border: 1px solid var(--ex-linea, #EDF0F4);
	border-radius: 999px; padding: 8px 13px; font-size: 12.5px; color: #334155;
	cursor: pointer; line-height: 1.4;
}
#ldt-app .ldt-starter:hover { background: #EEF2FF; border-color: #C7D2FE; color: #3730A3; }

/* ============= ASIGNACIÓN DE DESARROLLO ============= */
#ldt-app .ldt-plan-block { border-top: 1px solid var(--ex-linea, #EDF0F4); }
#ldt-app .ldt-plan-block:first-of-type { border-top: none; }
#ldt-app .ldt-plan-row { width: 100%; background: none; border: 0; cursor: pointer; }
#ldt-app .ldt-plan-row:hover { background: #F8FAFC; }
#ldt-app .ldt-plan-detail { padding: 4px 0 12px 45px; }
#ldt-app .ldt-plan-action {
	background: #F8FAFC; border-radius: 11px; padding: 11px 13px; margin-bottom: 8px;
}
#ldt-app .ldt-plan-action-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 9px;
}
#ldt-app .ldt-plan-action-head strong { font-size: 13px; color: #0F172A; line-height: 1.35; }
#ldt-app .ldt-plan-action .ldt-card-foot { margin: 4px 0 0; }
#ldt-app .ldt-assign-box { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; align-items: center; }
#ldt-app .ldt-due {
	padding: 6px 9px; font-size: 12.5px; border: 1px solid var(--ex-linea, #EDF0F4);
	border-radius: 9px; background: #fff; color: #334155;
}

/* ============= AVATARES ============= */
/* Había DOS reglas .ldt-avatar en esta hoja (línea ~182 y ~928). La
   segunda gana por orden y no declara overflow:hidden, así que la foto
   salía cuadrada dentro de un contenedor redondo. Se unifica aquí, al
   final, donde no la pisa ninguna de las dos.

   La inicial vive en el contenedor y la imagen se superpone en absoluto:
   si la imagen falla, su onerror la retira y la inicial queda a la vista
   sin que haya que repintar nada. */
#ldt-app .ldt-avatar,
#ldt-app .ldt-avatar-xs,
#ldt-app .ldt-avatar-sm {
	position: relative;
	overflow: hidden;
	text-transform: uppercase;
}
#ldt-app .ldt-avatar > img,
#ldt-app .ldt-avatar-xs > img,
#ldt-app .ldt-avatar-sm > img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; border-radius: 50%;
	background: inherit;
}

/* ============= RESULTADOS OPERATIVOS (§6, §7) ============= */

#ldt-app .ldt-section-sub {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ldt-text-muted, #64748b);
	margin: 18px 0 8px;
}

.ldt-bandeja-lead { margin: 0 0 12px; font-size: 13px; }

.ldt-outcome { margin-bottom: 12px; }

#ldt-app .ldt-outcome-head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.ldt-outcome-dir svg { width: 18px; height: 18px; color: var(--ldt-accent, #3b82f6); }

.ldt-outcome-titles { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ldt-outcome-titles span { font-size: 12px; }

/* El sello es el elemento más importante de la tarjeta: separa un número
   que alguien declaró de uno que su jefe confirmó contra una fuente. Se
   diferencian por color Y por texto, no solo por color: un daltónico
   tiene que poder distinguirlos igual. */
#ldt-app .ldt-outcome-seal {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 999px;
	background: #fef3c7;
	color: #92400e;
	white-space: nowrap;
}

.ldt-outcome-seal-observed { background: #dcfce7; color: #166534; }

#ldt-app .ldt-outcome-rejection {
	margin: 10px 0 0;
	padding: 8px 10px;
	border-left: 3px solid #f59e0b;
	background: #fffbeb;
	font-size: 13px;
	border-radius: 0 6px 6px 0;
}

#ldt-app .ldt-outcome-numbers {
	display: flex;
	gap: 8px;
	margin: 14px 0 10px;
}

#ldt-app .ldt-outcome-num {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--ldt-surface-2, #f8fafc);
}

.ldt-outcome-num span { font-size: 11px; }
.ldt-outcome-num strong { font-size: 16px; }

#ldt-app .ldt-outcome-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--ldt-surface-2, #e2e8f0);
	overflow: hidden;
}

#ldt-app .ldt-outcome-bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #3b82f6, #7c3aed);
}

.ldt-outcome-pct { margin: 6px 0 0; font-size: 12px; font-weight: 600; }
.ldt-outcome-nodata { margin: 6px 0 0; font-size: 13px; }
.ldt-outcome-source { margin: 8px 0 0; font-size: 12px; color: var(--ldt-text-muted, #64748b); }

#ldt-app .ldt-outcome-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}

#ldt-app .ldt-outcome-reports:not(:empty) {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ldt-border, #e2e8f0);
}

#ldt-app .ldt-outcome-report-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 13px;
}

.ldt-outcome-report-row strong { min-width: 60px; }

#ldt-app .ldt-btn-mini {
	margin-left: auto;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 6px;
	border: 1px solid var(--ldt-accent, #3b82f6);
	background: transparent;
	color: var(--ldt-accent, #3b82f6);
	cursor: pointer;
}

.ldt-btn-mini:disabled { opacity: .5; cursor: default; }

/* El aviso de no-causalidad. Va discreto pero presente: el §7 pide que la
   plataforma nunca deje que una correlación se lea como una causa. */
#ldt-app .ldt-disclaimer {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ldt-text-muted, #64748b);
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--ldt-surface-2, #f8fafc);
}

/* ============= IMPACTO DE NEGOCIO (§7) ============= */

#ldt-app .ldt-funnel-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 13px;
}

.ldt-funnel-label { flex: 0 0 42%; }

#ldt-app .ldt-funnel-bar {
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: var(--ldt-surface-2, #e2e8f0);
	overflow: hidden;
}

#ldt-app .ldt-funnel-bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #3b82f6, #7c3aed);
}

.ldt-funnel-n { flex: 0 0 40px; text-align: right; }

.ldt-impact-nums { display: flex; gap: 8px; margin: 14px 0 10px; }

/* Una tarjeta retenida no se disfraza de tarjeta vacía: se ve distinta a
   propósito, porque "no publicamos esto" es información, no un hueco. */
#ldt-app .ldt-withheld {
	border-left: 3px solid var(--ldt-text-muted, #94a3b8);
	background: var(--ldt-surface-2, #f8fafc);
}

#ldt-app .ldt-impact-pending {
	margin: 10px 0 0;
	padding: 8px 10px;
	border-radius: 6px;
	background: #fffbeb;
	color: #92400e;
	font-size: 12px;
}

#ldt-app .ldt-contingency {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 8px;
	font-size: 13px;
}

.ldt-contingency th,
#ldt-app .ldt-contingency td {
	padding: 8px 6px;
	text-align: center;
	border-bottom: 1px solid var(--ldt-border, #e2e8f0);
}

.ldt-contingency th:first-child,
.ldt-contingency tr th:first-child { text-align: left; font-weight: 600; }
.ldt-contingency td { font-variant-numeric: tabular-nums; font-weight: 600; }

/* El aviso de no-causalidad de la tabla de contingencia va más marcado
   que el resto: es el punto exacto donde alguien podría leer una causa. */
#ldt-app .ldt-disclaimer-strong {
	border-left: 3px solid #f59e0b;
	background: #fffbeb;
	color: #78350f;
}

/* ============= SELECTOR DE ESPACIO (B5) ============= */

/* Va en el encabezado y siempre visible: si hay que abrir un menú para
   saber en qué espacio estás, el selector no está haciendo su trabajo. */
#ldt-app .ldt-ws {
	display: flex;
	gap: 2px;
	padding: 2px;
	border-radius: 999px;
	background: var(--ldt-surface-2, #f1f5f9);
	flex-shrink: 0;
}

#ldt-app .ldt-ws-opt {
	border: 0;
	background: transparent;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ldt-text-muted, #64748b);
	cursor: pointer;
	white-space: nowrap;
}

#ldt-app .ldt-ws-opt.active {
	background: #fff;
	color: var(--ldt-text, #0f172a);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

/* En pantallas estrechas el selector sigue estando, con las etiquetas
   recortadas. Esconderlo en mobile devolvería el problema original a
   quien más lo sufre: quien administra desde el teléfono. */
@media (max-width: 560px) {
	.ldt-ws-opt { padding: 6px 9px; font-size: 11px; }
	.ldt-header-subtitle { display: none; }
}

/* Nombre de la sección encima de sus pestañas: seis pestañas sueltas no
   dicen de qué conjunto forman parte. */
#ldt-app .ldt-org-section {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--ldt-text-muted, #94a3b8);
	padding: 10px 4px 2px;
}

/* ============= CICLO DE DESARROLLO (Fase 2) ============= */

/* Cinco entradas de menú que en realidad son cinco momentos del mismo
   ciclo. La tira no añade función: añade la relación, que es lo que
   faltaba para que el producto se entienda sin que se lo expliquen. */
#ldt-app .ldt-flow {
	display: flex;
	align-items: stretch;
	gap: 4px;
	padding: 10px 14px 2px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ldt-flow::-webkit-scrollbar { display: none; }

#ldt-app .ldt-flow-step {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 7px 11px;
	border-radius: 8px;
	text-decoration: none;
	background: var(--ldt-surface-2, #f1f5f9);
	white-space: nowrap;
	flex-shrink: 0;
}

#ldt-app .ldt-flow-step strong {
	font-size: 12px;
	font-weight: 600;
	color: var(--ldt-text-muted, #475569);
}

.ldt-flow-step span { font-size: 10px; color: var(--ldt-text-muted, #94a3b8); }

/* El paso actual se distingue por fondo Y por peso, no solo por color:
   igual que los sellos de evidencia, tiene que leerse sin depender de
   distinguir tonos. */
.ldt-flow-step.active { background: var(--ldt-accent, #3b82f6); }
.ldt-flow-step.active strong { color: #fff; font-weight: 700; }
.ldt-flow-step.active span { color: rgba(255, 255, 255, .85); }

#ldt-app .ldt-flow-sep {
	align-self: center;
	color: var(--ldt-text-muted, #cbd5e1);
	font-size: 12px;
	flex-shrink: 0;
}

/* Enlace al paso siguiente desde dentro de una tarjeta: de ver la brecha
   a trabajarla, sin que el usuario tenga que adivinar dónde vive eso. */
#ldt-app .ldt-inline-cta {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ldt-accent, #3b82f6);
	text-decoration: none;
}

.ldt-inline-cta:hover { text-decoration: underline; }

/* ============= CHECKLIST DE ARRANQUE (B3) ============= */

/* Un tablero vacío se lee como "esto no sirve" en vez de como "falta
   cargar gente". El checklist convierte lo segundo en algo accionable, y
   por eso va arriba del todo: es lo que decide si lo de abajo se puede
   creer. */
.ldt-checklist { border-left: 3px solid var(--ldt-accent, #3b82f6); }
.ldt-checklist-block { border-left-color: #ef4444; }

#ldt-app .ldt-check-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ldt-border, #f1f5f9);
}

.ldt-check-row:last-of-type { border-bottom: 0; }

#ldt-app .ldt-check-dot {
	width: 8px;
	height: 8px;
	margin-top: 5px;
	border-radius: 50%;
	background: #f59e0b;
	flex-shrink: 0;
}

.ldt-check-dot.bad { background: #ef4444; }

.ldt-check-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ldt-check-text strong { font-size: 13px; }
.ldt-check-text span { font-size: 12px; color: var(--ldt-text-muted, #64748b); }

.ldt-check-row .ldt-btn-mini { margin-left: 0; align-self: center; }

/* Los estados vacíos conservan su explicación y añaden la salida. */
.ldt-card-empty .ldt-inline-cta { margin-top: 8px; }

#ldt-app button.ldt-inline-cta {
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

/* Descripción de una línea bajo el nombre de la sección. */
#ldt-app .ldt-org-section em {
	display: block;
	margin-top: 2px;
	font-style: normal;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ldt-text-muted, #94a3b8);
}

/* ============= BANDA DE DECISIÓN (Fase 4) ============= */

/* Trece tarjetas correctas no son una respuesta. Esta banda va entre la
   cabecera y el muro de datos: primero qué hacer, después las cifras que
   lo sostienen. */
#ldt-app .ldt-decide {
	margin: 4px 0 18px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--ldt-surface, #fff);
	border: 1px solid var(--ldt-border, #e2e8f0);
}

#ldt-app .ldt-decide-row {
	display: grid;
	grid-template-columns: 150px 150px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--ldt-border, #f1f5f9);
}

.ldt-decide-row:last-child { border-bottom: 0; }

#ldt-app .ldt-decide-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ldt-text-muted, #94a3b8);
}

.ldt-decide-state { font-size: 15px; font-weight: 700; }
.ldt-decide-read { font-size: 13px; color: var(--ldt-text-muted, #475569); }

#ldt-app .ldt-decide-cta {
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ldt-accent, #3b82f6);
	cursor: pointer;
	white-space: nowrap;
	padding: 4px 2px;
}

/* En pantalla estrecha la rejilla de cuatro columnas se apila. El CTA se
   queda: es la parte que no se puede perder al reducir, porque es la
   única que lleva a algún sitio. */
@media (max-width: 720px) {
	#ldt-app .ldt-decide-row {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"label label"
			"state cta"
			"read  read";
		gap: 4px 12px;
	}

	#ldt-app .ldt-decide-label { grid-area: label; }
	#ldt-app .ldt-decide-state { grid-area: state; }
	.ldt-decide-read  { grid-area: read; }
	.ldt-decide-cta   { grid-area: cta; justify-self: end; }
}

/* ============= RESPONSIVE DE LO AÑADIDO EN ESTAS FASES ============= */

@media (max-width: 720px) {
	/* La tabla de contingencia no se puede apilar sin perder el cruce:
	   las cuatro celdas SON el mensaje. Se deja desplazable en lugar de
	   comprimirla hasta que los números se toquen. */
	.ldt-contingency { display: block; overflow-x: auto; white-space: nowrap; }

	/* El checklist de arranque manda el botón a su propia línea antes que
	   partir el texto del pendiente en cuatro renglones. */
	.ldt-check-row { flex-wrap: wrap; }
	.ldt-check-row .ldt-btn-mini { margin-left: 18px; }

	.ldt-outcome-numbers { flex-wrap: wrap; }
	.ldt-outcome-num { min-width: 30%; }

	.ldt-funnel-label { flex-basis: 38%; font-size: 12px; }
}

@media (max-width: 720px) {
	/* Tres huecos que destapó la auditoría de responsive, no la vista:
	   el embudo, la cabecera de sección y los números de impacto no
	   tenían regla de pantalla estrecha y se comprimían hasta ser
	   ilegibles en un teléfono. */
	.ldt-funnel-row { flex-wrap: wrap; gap: 6px; }
	.ldt-funnel-label { flex-basis: 100%; }
	.ldt-funnel-n { flex-basis: auto; }

	.ldt-org-section { padding-left: 14px; padding-right: 14px; }

	.ldt-impact-nums { flex-wrap: wrap; }
	.ldt-impact-nums .ldt-outcome-num { min-width: 45%; }
}

/* ============= CLIMA POR EQUIPO ============= */

.ldt-climate-card { border-left: 3px solid var(--ldt-accent, #3b82f6); }

#ldt-app .ldt-clima-scope {
	padding: 12px 14px;
	margin-bottom: 12px;
	border-radius: 10px;
	background: var(--ldt-surface-2, #f8fafc);
}

#ldt-app .ldt-clima-scope label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 6px;
}

#ldt-app .ldt-clima-scope select {
	width: 100%;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid var(--ldt-border, #cbd5e1);
	font-family: inherit;
	font-size: 14px;
	background: #fff;
}

.ldt-clima-scope .ldt-card-foot { margin-top: 8px; }

/* Responsable del equipo en la lista de estructura. Sin responsable no
   hay clima por líder, así que el hueco se marca en vez de dejarse en
   blanco: en blanco parece "no aplica" y lo que significa es "falta". */
#ldt-app .ldt-team-lead {
	font-size: 12px;
	color: var(--ldt-text-muted, #64748b);
}

#ldt-app .ldt-team-lead-none {
	color: #b91c1c;
	font-weight: 600;
}

/* ============= AJUSTES DE ESPACIADO Y ENLACES (v0.99.0) ============= */

/* El selector de espacio, como franja propia bajo el encabezado.
   Dentro del encabezado se encimaba con el nombre del producto: en un
   teléfono no caben marca, subtítulo, selector, campana y avatar en la
   misma línea, y el título no encogía. */
#ldt-app .ldt-ws-bar {
	display: flex;
	justify-content: center;
	padding: 10px 16px;
	background: var(--ldt-surface, #fff);
	border-bottom: 1px solid var(--ldt-border, #e2e8f0);
}

#ldt-app .ldt-ws { display: flex; gap: 2px; padding: 2px; }

/* El título nunca debe empujar a nadie: si no cabe, se recorta. */
#ldt-app .ldt-header-title,
#ldt-app .ldt-header-subtitle {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La tira del ciclo iba pegada al encabezado, sin aire. Es lo primero
   que se ve al entrar a cualquier pantalla del ciclo. */
#ldt-app .ldt-flow {
	padding-top: 16px;
	padding-bottom: 6px;
}

/* Los accesos rápidos de Mi Twin y de Desarrollo salían justo debajo del
   encabezado, tocándolo. */
#ldt-app .ldt-content > .ldt-quick-access:first-child,
#ldt-app .ldt-content > .ldt-tabs:first-child,
#ldt-app .ldt-content > .ldt-section-title:first-child {
	margin-top: 14px;
}

/* Separación entre tarjetas consecutivas. Varias venían sin margen y se
   veían amontonadas, que es la queja de fondo de casi toda la pantalla. */
#ldt-app .ldt-card + .ldt-card,
#ldt-app .ldt-card + .ldt-info-grid,
#ldt-app .ldt-info-grid + .ldt-card,
#ldt-app .ldt-card + .ldt-stats,
#ldt-app .ldt-org-grid + .ldt-card {
	margin-top: 14px;
}

/* Cifras que además son enlaces. Se distinguen de las que no lo son por
   fondo y por el cursor, y las que valen cero se apagan: mandar a
   alguien a una pantalla vacía es peor que no ofrecerle el viaje. */
#ldt-app .ldt-stats-links { gap: 10px; }

#ldt-app .ldt-stat-link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
	transition: background .15s ease;
}

#ldt-app .ldt-stat-link:hover,
#ldt-app .ldt-stat-link:focus {
	background: var(--ldt-surface-2, #f1f5f9);
	outline: none;
}

#ldt-app .ldt-stat-off { opacity: .45; }

/* Hitos: nombre legible arriba, explicación debajo. */
#ldt-app .ldt-milestones .ldt-milestone {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 0;
}

#ldt-app .ldt-milestones .ldt-milestone span {
	font-size: 12px;
	color: var(--ldt-text-muted, #64748b);
}

/* ============= CAMINO A LA CERTIFICACIÓN (v1.0.0) ============= */

#ldt-app .ldt-cert-path {
	padding: 14px 0;
	border-bottom: 1px solid var(--ldt-border, #f1f5f9);
}

#ldt-app .ldt-cert-path:last-child { border-bottom: 0; }

#ldt-app .ldt-cert-path-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

#ldt-app .ldt-cert-count {
	font-size: 12px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ldt-surface-2, #f1f5f9);
	color: var(--ldt-text-muted, #64748b);
	white-space: nowrap;
}

/* Una puerta cumplida y una pendiente se distinguen por la marca y por el
   peso del texto, no solo por color: el mismo criterio que los sellos de
   evidencia. */
#ldt-app .ldt-req {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 6px 0;
}

#ldt-app .ldt-req-mark {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: 50%;
	border: 1.5px solid var(--ldt-border, #cbd5e1);
	font-size: 11px;
	line-height: 15px;
	text-align: center;
	color: transparent;
}

#ldt-app .ldt-req.met .ldt-req-mark {
	background: #16a34a;
	border-color: #16a34a;
	color: #fff;
}

#ldt-app .ldt-req-text { display: flex; flex-direction: column; gap: 1px; }
#ldt-app .ldt-req-text strong { font-size: 13px; }
#ldt-app .ldt-req.met .ldt-req-text strong { color: #166534; }
#ldt-app .ldt-req-text span { font-size: 12px; color: var(--ldt-text-muted, #64748b); }

/* ============= COMPROMISOS Y PLANES (v1.1.0) ============= */

#ldt-app .ldt-outcome-work:not(:empty) {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ldt-border, #e2e8f0);
}

#ldt-app .ldt-work-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	font-size: 13px;
}

/* La etiqueta distingue de un vistazo lo que pide método de lo que no.
   Sin ella, un plan y un compromiso se ven igual en la lista y la
   distinción que motivó separarlos se pierde en la pantalla. */
#ldt-app .ldt-work-kind {
	flex-shrink: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 4px;
	background: var(--ldt-surface-2, #f1f5f9);
	color: var(--ldt-text-muted, #64748b);
}

#ldt-app .ldt-work-plan .ldt-work-kind {
	background: #ede9fe;
	color: #5b21b6;
}

#ldt-app .ldt-work-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
#ldt-app .ldt-work-text span { font-size: 12px; color: var(--ldt-text-muted, #64748b); }
#ldt-app .ldt-work-text em { font-size: 11px; color: #5b21b6; font-style: normal; }

/* ============= AJUSTES v1.2.0 ============= */

/* La tira del ciclo se veía apretada y con el texto cortado a media
   palabra. Ahora solo el paso activo lleva subtítulo, y la caja tiene
   aire suficiente para que se lea completo. */
#ldt-app .ldt-flow-step { padding: 8px 12px; min-height: 40px; justify-content: center; }
#ldt-app .ldt-flow-step strong { font-size: 12.5px; }
#ldt-app .ldt-flow-step.active { padding-right: 14px; }
#ldt-app .ldt-flow-step span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* La tarjeta morada del coaching: su botón es la salida de la pantalla y
   estaba pegado al borde inferior. */
#ldt-app .ldt-brief-cta { margin-top: 16px; }
#ldt-app .ldt-brief { margin-bottom: 18px; }

/* ============= FILAS QUE SE ENCIMABAN (v1.3.0) ============= */

/* CAUSA RAÍZ
   Una fila con nombre + porcentaje + tres botones son cinco elementos en
   una línea de 360 px. El nombre encogía hasta cero y el porcentaje se le
   montaba encima ("Israel Ledezma100%"). En una tabla de escritorio cabe;
   en un teléfono no, y esta aplicación se usa en el teléfono.

   La regla base pone flex-wrap implícito en nowrap. Se permite envolver y
   los botones bajan a su propia línea, que es lo que hace cualquier
   interfaz que se usa con el pulgar. */
@media (max-width: 720px) {
	#ldt-app .ldt-list-row,
	#ldt-app .ldt-team-row {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	#ldt-app .ldt-list-main { flex: 1 1 100%; }

	#ldt-app .ldt-list-row .ldt-btn-blue,
	#ldt-app .ldt-list-row .ldt-btn-ghost,
	#ldt-app .ldt-team-row .ldt-btn-ghost {
		flex: 0 0 auto;
	}

	/* El porcentaje deja de competir por el mismo renglón que el nombre. */
	#ldt-app .ldt-list-row .ldt-gap-score { order: -1; margin-left: auto; }
}

/* El nombre del equipo y su responsable se montaban porque la regla base
   le da flex:1 SOLO al primer span, y el responsable es el segundo. */
#ldt-app .ldt-team-row { flex-wrap: wrap; }
#ldt-app .ldt-team-row > span:first-child { flex: 1 1 auto; }

#ldt-app .ldt-team-lead {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ldt-surface-2, #f1f5f9);
}

#ldt-app .ldt-team-lead-none { background: #fef2f2; }

/* La banda de decisión iba sin fondo propio y se leía encima de las
   tarjetas de KPI que vienen justo debajo. */
#ldt-app .ldt-decide {
	background: #fff;
	border: 1px solid var(--ldt-border, #e2e8f0);
	border-radius: 12px;
	margin: 8px 0 20px;
	overflow: hidden;
}

/* Entradas de menú aún no construidas: se ven distintas y no responden.
   Antes eran idénticas a las que funcionan (F2). */
#ldt-app .ldt-dw-item.ldt-dw-soon { opacity: .45; cursor: default; }
#ldt-app .ldt-dw-soon-tag {
	margin-left: auto;
	font-size: 9.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .8;
}

/* F8 — en escritorio la barra pasa a columna y los cinco ítems heredaban
   flex:1, así que cada uno medía 165px de alto en una pantalla de 950.
   Altura fija y alineados arriba. */
@media (min-width: 1024px) {
	#ldt-app .ldt-bottom-nav { justify-content: flex-start; padding-top: 12px; }
	#ldt-app .ldt-bottom-nav .ldt-nav-item { flex: 0 0 auto; min-height: 60px; }
}

/* De qué está hecho el puntaje (v1.5.0). El borde cambia según cuánto se
   ha contrastado: sin contraste no se disimula. */
#ldt-app .ldt-corro { border-left: 3px solid #cbd5e1; }
#ldt-app .ldt-corro-partial { border-left-color: #f59e0b; }
#ldt-app .ldt-corro-strong { border-left-color: #3b82f6; }
#ldt-app .ldt-corro-full { border-left-color: #16a34a; }

#ldt-app .ldt-src-row {
	display: flex;
	justify-content: space-between;
	padding: 7px 0;
	font-size: 13px;
	border-bottom: 1px solid var(--ldt-border, #f1f5f9);
}

#ldt-app .ldt-src-row:last-of-type { border-bottom: 0; }