/* ===== Mi nube app — mismo lenguaje visual del dashboard ===== */
.nube-app {
	--nube-bg: #0b1c18;
	--nube-bg-2: #13261f;
	--nube-surface: rgba(255,255,255,.06);
	--nube-surface-2: rgba(255,255,255,.1);
	--nube-border: rgba(255,255,255,.12);
	--nube-text: #eef6f2;
	--nube-muted: rgba(238,246,242,.72);
	--nube-primary: #3dba94;
	--nube-primary-soft: rgba(15,110,86,.35);
	--nube-accent: #c45c26;
	--nube-danger: #f97066;
	--nube-radius: 16px;
	--nube-font: "Segoe UI", "IBM Plex Sans", "Source Sans 3", sans-serif;
	--nube-shadow: 0 18px 40px rgba(0,0,0,.28);

	position: relative;
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	min-height: calc(100vh - 70px);
	width: 100%;
	box-sizing: border-box;
	border-radius: 22px;
	overflow: hidden;
	background:
		radial-gradient(900px 420px at 10% -10%, rgba(15,110,86,.35), transparent 55%),
		radial-gradient(800px 380px at 95% 0%, rgba(196,92,38,.18), transparent 50%),
		linear-gradient(160deg, var(--nube-bg) 0%, var(--nube-bg-2) 45%, #1a2332 100%);
	color: var(--nube-text);
	font-family: var(--nube-font);
	border: 1px solid var(--nube-border);
	z-index: 5;
}

.nube-app[data-nube-theme="light"] {
	--nube-bg: #f3f6f4;
	--nube-bg-2: #e8eee9;
	--nube-surface: #ffffff;
	--nube-surface-2: #eef3f0;
	--nube-border: #d5ddd8;
	--nube-text: #15241e;
	--nube-muted: #5f7269;
	--nube-primary: #0f6e56;
	--nube-primary-soft: #e6f4ef;
	--nube-accent: #c45c26;
	--nube-danger: #b42318;
	--nube-shadow: 0 10px 28px rgba(21,36,30,.08);
	background:
		radial-gradient(900px 420px at 10% -10%, rgba(15,110,86,.10), transparent 55%),
		radial-gradient(800px 380px at 95% 0%, rgba(196,92,38,.08), transparent 50%),
		linear-gradient(160deg, #f7faf8 0%, #eef3f0 100%);
}

.nube-app-side {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 14px;
	background: rgba(0,0,0,.18);
	border-right: 1px solid var(--nube-border);
	min-height: 100%;
}

.nube-app[data-nube-theme="light"] .nube-app-side {
	background: rgba(255,255,255,.7);
}

.nube-app-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 6px;
}

.nube-app-brand img {
	width: 42px;
	height: auto;
}

.nube-app-brand small {
	display: block;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--nube-muted);
}

.nube-app-brand strong {
	font-size: 1.05rem;
}

.nube-app-nuevo,
.nube-empty-state .nube-app-nuevo {
	border: none;
	border-radius: 999px;
	padding: 11px 14px;
	font-weight: 650;
	cursor: pointer;
	background: #e8f7f1;
	color: #0f6e56;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.nube-app[data-nube-theme="light"] .nube-app-nuevo {
	background: var(--nube-primary);
	color: #fff;
}

.nube-app-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nube-app-nav button {
	border: 1px solid transparent;
	background: transparent;
	color: var(--nube-text);
	text-align: left;
	padding: 10px 12px;
	border-radius: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.nube-app-nav button:hover,
.nube-app-nav button.is-active {
	background: var(--nube-primary-soft);
	border-color: rgba(61,186,148,.35);
	color: var(--nube-primary);
}

.nube-app-tree {
	flex: 1;
	overflow: auto;
	min-height: 120px;
	padding: 4px;
	border-radius: 12px;
	background: rgba(255,255,255,.03);
}

.nube-app-tree-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--nube-muted);
	padding: 8px 6px 4px;
}

.nube-app .arbol_lista {
	list-style: none;
	margin: 0;
	padding: 0 0 0 4px;
}

.nube-app .arbol_nombre {
	color: var(--nube-text);
	cursor: pointer;
	font-size: 13px;
}

.nube-app .arbol_fila {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: 8px;
}

.nube-app .arbol_seleccionado {
	background: var(--nube-primary-soft);
}

.nube-app-quota {
	padding: 12px;
	border-radius: 14px;
	background: var(--nube-surface);
	border: 1px solid var(--nube-border);
	font-size: 12px;
	color: var(--nube-muted);
}

.nube-app-quota-bar {
	height: 8px;
	border-radius: 999px;
	background: rgba(255,255,255,.15);
	overflow: hidden;
	margin: 8px 0 6px;
}

.nube-app[data-nube-theme="light"] .nube-app-quota-bar {
	background: #d9e4de;
}

.nube-app-quota-bar > i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #3dba94, #c45c26);
	font-style: normal;
}

.nube-app-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: calc(100vh - 70px);
}

.nube-app-top {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--nube-border);
	background: rgba(255,255,255,.04);
}

.nube-app-search {
	flex: 1;
	position: relative;
	max-width: 560px;
}

.nube-app-search i {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--nube-muted);
}

.nube-app-search input {
	width: 100%;
	border: 1px solid var(--nube-border);
	background: var(--nube-surface);
	color: var(--nube-text);
	border-radius: 999px;
	padding: 11px 14px 11px 38px;
	outline: none;
}

.nube-app-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.nube-app-icon {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	border: 1px solid var(--nube-border);
	background: var(--nube-surface);
	color: var(--nube-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nube-app-icon.is-active,
.nube-app-icon:hover {
	background: var(--nube-primary-soft);
	color: var(--nube-primary);
}

.nube-theme-switch {
	display: inline-flex;
	gap: 4px;
	padding: 3px;
	border-radius: 14px;
	border: 1px solid var(--nube-border);
	background: rgba(0,0,0,.12);
}

.nube-app-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
}

.nube-app-crumbs {
	flex: 1;
	min-width: 180px;
	color: var(--nube-muted);
	font-size: 14px;
}

.nube-app-crumbs a,
.nube-app-crumbs span {
	color: var(--nube-primary);
	cursor: pointer;
}

.nube-app-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.nube-chip {
	border: 1px solid var(--nube-border);
	background: var(--nube-surface);
	color: var(--nube-muted);
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 12px;
	cursor: pointer;
}

.nube-chip.is-active {
	background: var(--nube-primary-soft);
	color: var(--nube-primary);
	border-color: transparent;
}

.nube-app-quick {
	display: flex;
	gap: 6px;
}

.nube-app-quick button {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid var(--nube-border);
	background: var(--nube-surface);
	color: var(--nube-text);
	cursor: pointer;
}

.nube-app-content {
	position: relative;
	flex: 1;
	overflow: auto;
	padding: 8px 18px 28px;
	min-height: 360px;
}

.nube-cards {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	align-content: start;
}

.nube-card {
	position: relative;
	appearance: none;
	border: 1px solid var(--nube-border);
	background: var(--nube-surface);
	border-radius: var(--nube-radius);
	padding: 14px 12px 12px;
	text-align: center;
	color: var(--nube-text);
	min-height: 148px;
	cursor: default;
	transition: transform .16s ease, background .16s ease, border-color .16s ease;
	user-select: none;
}

.nube-card:hover {
	transform: translateY(-2px);
	background: var(--nube-surface-2);
	border-color: rgba(61,186,148,.35);
	box-shadow: var(--nube-shadow);
}

.nube-card.is-selected,
.nube-card.is-drop-target {
	border-color: var(--nube-primary);
	background: var(--nube-primary-soft);
	outline: 2px solid rgba(61,186,148,.35);
}

.nube-card.is-create {
	cursor: pointer;
	border-style: dashed;
}

.nube-card-check {
	position: absolute;
	top: 8px;
	left: 8px;
	opacity: 0;
}

.nube-card:hover .nube-card-check,
.nube-card.is-selected .nube-card-check {
	opacity: 1;
}

.nube-card-badge,
.nube-card-share {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 12px;
	color: var(--nube-accent);
}

.nube-card-share {
	right: 28px;
	color: var(--nube-primary);
}

.nube-card-open {
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
	color: inherit;
	width: 100%;
}

.nube-card-ico {
	width: 54px;
	height: 54px;
	margin: 8px auto;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	background: rgba(61,186,148,.18);
	color: var(--nube-primary);
}

.nube-card-thumb {
	width: 54px;
	height: 54px;
	object-fit: contain;
	margin: 8px auto;
	display: block;
}

.nube-card-name {
	font-size: 13px;
	line-height: 1.3;
	word-break: break-word;
	margin-top: 4px;
}

.nube-card-meta {
	font-size: 11px;
	color: var(--nube-muted);
	margin-top: 4px;
}

.nube-card.is-menu-open {
	z-index: 1000;
	transform: none;
}

.nube-card-menu {
	display: none;
	position: absolute;
	z-index: 40;
	right: 8px;
	top: 36px;
	min-width: 160px;
	padding: 6px;
	border-radius: 12px;
	background: #10241e;
	border: 1px solid rgba(255,255,255,.14);
	box-shadow: var(--nube-shadow);
	text-align: left;
}

.nube-app[data-nube-theme="light"] .nube-card-menu {
	background: #fff;
}

.nube-card-menu.is-open {
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: fixed;
	right: auto;
	z-index: 200080;
}

.nube-card-menu button {
	border: none;
	background: transparent;
	color: var(--nube-text);
	text-align: left;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
}

.nube-card-menu button:hover {
	background: var(--nube-surface-2);
}

.nube-card-menu .is-danger {
	color: var(--nube-danger);
}

.nube-empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px 16px;
	color: var(--nube-muted);
}

.nube-empty-state i {
	font-size: 42px;
	margin-bottom: 10px;
	opacity: .75;
}

.nube-empty-state h3 {
	margin: 0 0 8px;
	color: var(--nube-text);
}

.nube-app-section {
	margin-top: 28px;
}

.nube-app-section h3 {
	margin: 0 0 12px;
	font-size: 1rem;
}

.nube-selection-bar {
	display: none;
	align-items: center;
	gap: 8px;
	margin: 0 18px 8px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--nube-primary);
	color: #07352a;
	font-weight: 600;
}

.nube-selection-bar.is-visible {
	display: flex;
	flex-wrap: wrap;
}

.nube-selection-bar button {
	border: 1px solid rgba(0,0,0,.12);
	background: rgba(255,255,255,.55);
	border-radius: 8px;
	padding: 6px 10px;
	cursor: pointer;
}

.nube-dropzone-overlay {
	display: none;
	position: absolute;
	inset: 8px;
	border: 2px dashed var(--nube-primary);
	border-radius: 18px;
	background: rgba(15,110,86,.18);
	z-index: 30;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--nube-primary);
	pointer-events: none;
}

.nube-dropzone-overlay.is-active {
	display: flex;
}

.nube-list-wrap {
	overflow: auto;
}

.nube-list-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--nube-surface);
	border-radius: 14px;
	overflow: hidden;
}

.nube-list-table th,
.nube-list-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--nube-border);
	text-align: left;
	font-size: 13px;
}

.nube-list-table th {
	color: var(--nube-muted);
	font-weight: 600;
}

.nube-list-table button {
	border: 1px solid var(--nube-border);
	background: transparent;
	color: var(--nube-text);
	border-radius: 8px;
	padding: 5px 8px;
	cursor: pointer;
}

.nube-menu-nuevo {
	position: fixed;
	display: none;
	z-index: 100000;
	min-width: 190px;
	padding: 6px;
	border-radius: 14px;
	background: #10241e;
	border: 1px solid rgba(255,255,255,.14);
	box-shadow: var(--nube-shadow);
}

.nube-menu-nuevo.is-open {
	display: block;
}

.nube-menu-nuevo button {
	display: block;
	width: 100%;
	text-align: left;
	border: none;
	background: transparent;
	color: #eef6f2;
	padding: 10px;
	border-radius: 10px;
	cursor: pointer;
}

.nube-menu-nuevo button:hover {
	background: rgba(255,255,255,.08);
}

.nube-toast-host {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nube-toast {
	min-width: 240px;
	max-width: 360px;
	background: #10241e;
	color: #eef6f2;
	border: 1px solid rgba(255,255,255,.14);
	border-left: 4px solid #3dba94;
	border-radius: 12px;
	box-shadow: var(--nube-shadow);
	padding: 12px 14px;
	font-size: 13px;
}

.nube-toast.is-error { border-left-color: #f97066; }
.nube-toast.is-warn { border-left-color: #f2ae40; }

.nube-picker {
	border: 1px solid var(--nube-border, #d8dee8);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.nube-picker-search { padding: 10px; border-bottom: 1px solid #e5e7eb; }
.nube-picker-list { max-height: 360px; overflow: auto; padding: 8px; }
.nube-picker-item {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.nube-picker-item:hover,
.nube-picker-item.elementoMarcado { background: #e6f4ef; }
.nube-picker-selected {
	padding: 10px 12px; border-top: 1px solid #e5e7eb;
	font-size: 13px; color: #66758a; background: #f8faf9;
}

.nube-mobile-toggle { display: none; }

@media (max-width: 960px) {
	.nube-app {
		grid-template-columns: 1fr;
		min-height: calc(100vh - 60px);
		border-radius: 0;
	}

	.nube-app-side {
		display: none;
	}

	.nube-app-side.is-open-mobile {
		display: flex;
		position: absolute;
		inset: 0 auto 0 0;
		width: min(280px, 86vw);
		z-index: 50;
		box-shadow: var(--nube-shadow);
	}

	.nube-mobile-toggle { display: inline-flex; }
}

/* Compat: ocultar restos del layout antiguo si aparecen */
#capa_contenido_web .nube-app ~ .explorador_layout { display: none !important; }