/* # Nota de Transparencia: Código generado/refactorizado con asistencia de IA
   # Generativa (Claude Code) bajo la Política ODTI012 del CCS.
   # Requiere supervisión y validación humana permanente. */
/*
 * ccs-admin.css — Sistema ccs-dashboard-design adaptado al panel Admin (Kaiadmin + Bootstrap 5).
 *
 * Por qué no se enlaza el ccs.css del skill tal cual: ese archivo estiliza selectores
 * globales (body, *, table, .card, .btn, .badge, .sidebar, .modal) que chocan con
 * Bootstrap/Kaiadmin en los ~28 módulos del admin. Aquí:
 *   1. Los tokens viven como variables en :root (globales, sin efecto visual por sí solas).
 *      Son el punto de extensión para el futuro esquema híbrido con la marca del tenant:
 *      basta redefinir --ccs-* en :root desde el layout.
 *   2. Los componentes van prefijados .ccs-* y dentro de .ccs-scope.
 *   3. El modo oscuro se fuerza con <html data-theme="dark"> (lo pone ccs-tema.js, que
 *      también pone data-bs-theme para los componentes Bootstrap de los módulos).
 *   4. Overrides mínimos del shell Kaiadmin solo en oscuro (fase de rediseño del shell pendiente).
 */

/* ---------- Tokens ---------- */
:root {
	--ccs-green: #00A94F; --ccs-lime: #8DC63F; --ccs-blue: #00539B;
	--ccs-ink-900: #122A3F; --ccs-ink-600: #4A6076; --ccs-ink-400: #8296A9;
	--ccs-line: #D9E1E8; --ccs-surface: #FFFFFF; --ccs-canvas: #F4F7F6; --ccs-hover: #EDF3F0;
	--ccs-success: #00A94F; --ccs-warning: #C77800; --ccs-danger: #C0392B; --ccs-info: #00539B;
	--ccs-radius: 10px;
	--ccs-shadow-card: 0 1px 3px rgb(18 42 63 / .06), 0 4px 14px rgb(18 42 63 / .08);
	--ccs-font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ccs-dur-1: 120ms; --ccs-dur-2: 200ms; --ccs-ease: cubic-bezier(.2, 0, 0, 1);
}
:root[data-theme="dark"] {
	--ccs-green: #2BBF6E; --ccs-lime: #9ED35C; --ccs-blue: #4D9BE0;
	--ccs-ink-900: #E8EFF5; --ccs-ink-600: #9FB3C4; --ccs-ink-400: #6B8094;
	--ccs-line: #24394E; --ccs-surface: #16283A; --ccs-canvas: #0E1B26; --ccs-hover: #1C3147;
	--ccs-success: #2BBF6E; --ccs-warning: #E09A3A; --ccs-danger: #E06456; --ccs-info: #4D9BE0;
	--ccs-shadow-card: 0 2px 10px rgb(0 0 0 / .35);
	color-scheme: dark;
}

/* ---------- Ámbito del sistema ---------- */
.ccs-scope {
	font-family: var(--ccs-font);
	font-size: 13px; line-height: 1.45;
	color: var(--ccs-ink-900);
	padding: 4px 0 24px;
}
.ccs-scope *, .ccs-scope *::before, .ccs-scope *::after { box-sizing: border-box; }
.ccs-num { font-variant-numeric: tabular-nums; }

/* Encabezado de página */
.ccs-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ccs-page-head h1 { font-size: 20px; font-weight: 600; margin: 0; color: var(--ccs-ink-900); }
.ccs-page-head .ccs-sub { font-size: 12px; color: var(--ccs-ink-600); margin-top: 2px; }

/* Control segmentado (periodo) */
.ccs-seg { display: inline-flex; border: 1px solid var(--ccs-line); border-radius: 6px; background: var(--ccs-surface); overflow: hidden; }
.ccs-seg button {
	height: 32px; padding: 0 12px; border: 0; background: transparent; color: var(--ccs-ink-600);
	font: 500 12px/1 var(--ccs-font); cursor: pointer;
	transition: background-color var(--ccs-dur-1), color var(--ccs-dur-1);
}
.ccs-seg button + button { border-left: 1px solid var(--ccs-line); }
.ccs-seg button:hover { background: var(--ccs-hover); color: var(--ccs-ink-900); }
.ccs-seg button[aria-pressed="true"] { background: var(--ccs-green); color: #fff; font-weight: 600; }
.ccs-seg button:focus-visible, .ccs-btn:focus-visible, .ccs-tema-btn:focus-visible {
	outline: none; box-shadow: 0 0 0 3px rgb(0 83 155 / .35);
}

/* Grillas */
.ccs-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.ccs-grid-top { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.ccs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ccs-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 991.98px) {
	.ccs-grid-top, .ccs-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Card */
.ccs-card {
	background: var(--ccs-surface); border: 1px solid var(--ccs-line);
	border-radius: var(--ccs-radius); box-shadow: var(--ccs-shadow-card);
	padding: 16px; min-width: 0;
}
.ccs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ccs-card-title { font-size: 14px; font-weight: 600; margin: 0; color: var(--ccs-ink-900); }
.ccs-card-meta { font-size: 11px; color: var(--ccs-ink-600); }

/* KPI */
.ccs-kpi-label { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ccs-ink-600); }
.ccs-kpi-value { font-size: 28px; font-weight: 700; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--ccs-ink-900); }
.ccs-kpi-main .ccs-kpi-value { font-size: 32px; }
.ccs-kpi-ctx { font-size: 12px; color: var(--ccs-ink-600); margin-top: 2px; }
.ccs-kpi-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ccs-kpi-card { display: flex; flex-direction: column; justify-content: space-between; }
.ccs-kpi-icon { color: var(--ccs-ink-400); }

/* Delta con ícono + texto (nunca solo color) */
.ccs-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ccs-delta.up { color: var(--ccs-success); }
.ccs-delta.down { color: var(--ccs-danger); }
.ccs-delta.flat { color: var(--ccs-ink-600); }

/* Gráficas */
.ccs-chart { width: 100%; height: 220px; }
.ccs-spark { width: 100%; height: 96px; margin-top: 12px; }

/* Barra de uso */
.ccs-bar { height: 8px; border-radius: 4px; background: var(--ccs-hover); overflow: hidden; margin: 10px 0 8px; }
.ccs-bar > span { display: block; height: 100%; background: var(--ccs-blue); }
.ccs-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ccs-ink-600); }
.ccs-legend b { color: var(--ccs-ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tabla densa */
.ccs-table-wrap { overflow-x: auto; margin: 0 -16px -16px; }
.ccs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ccs-table th {
	position: sticky; top: 0; background: var(--ccs-canvas); color: var(--ccs-ink-600);
	font-size: 11px; font-weight: 500; text-align: left; padding: 8px 16px; border-bottom: 1px solid var(--ccs-line); white-space: nowrap;
}
.ccs-table td { padding: 8px 16px; border-bottom: 1px solid var(--ccs-line); color: var(--ccs-ink-900); }
.ccs-table tbody tr:last-child td { border-bottom: 0; }
.ccs-table tbody tr { transition: background-color var(--ccs-dur-1); }
.ccs-table tbody tr:hover { background: var(--ccs-hover); }
.ccs-table .r { text-align: right; font-variant-numeric: tabular-nums; }

/* Badge semántico con ícono */
.ccs-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ccs-badge.ok { color: var(--ccs-success); background: color-mix(in srgb, var(--ccs-success) 12%, transparent); }
.ccs-badge.warn { color: var(--ccs-warning); background: color-mix(in srgb, var(--ccs-warning) 14%, transparent); }
.ccs-badge.crit { color: var(--ccs-danger); background: color-mix(in srgb, var(--ccs-danger) 12%, transparent); }
.ccs-badge.neutral { color: var(--ccs-ink-600); background: var(--ccs-hover); }

/* Banner (nivel 2) */
.ccs-banner {
	display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 16px;
	background: var(--ccs-surface); border: 1px solid var(--ccs-line); border-left: 3px solid var(--ccs-info);
	border-radius: 6px; font-size: 13px;
}
.ccs-banner.warning { border-left-color: var(--ccs-warning); }
.ccs-banner.warning > svg { color: var(--ccs-warning); }
.ccs-banner.danger { border-left-color: var(--ccs-danger); }
.ccs-banner.danger > svg { color: var(--ccs-danger); }
.ccs-banner b { font-weight: 600; }

/* Botón */
.ccs-btn {
	display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
	border-radius: 6px; border: 1px solid var(--ccs-line); background: var(--ccs-surface); color: var(--ccs-ink-900);
	font: 600 12px/1 var(--ccs-font); cursor: pointer; transition: background-color var(--ccs-dur-1);
}
.ccs-btn:hover { background: var(--ccs-hover); }

/* Estados: carga, vacío, error */
.ccs-skel { background: var(--ccs-line); border-radius: 4px; animation: ccs-pulso 1.2s ease-in-out infinite; }
@keyframes ccs-pulso { 50% { opacity: .45; } }
.ccs-skel-num { height: 30px; width: 90px; margin-top: 8px; }
.ccs-skel-line { height: 10px; width: 60%; margin-top: 10px; }
.ccs-skel-block { height: 180px; width: 100%; margin-top: 8px; }
/* Dentro de un contenedor de gráfica el skeleton toma el alto del contenedor (sparkline 96px, gráfica 220px) */
.ccs-spark .ccs-skel-block, .ccs-chart .ccs-skel-block { height: 100%; margin-top: 0; }
.ccs-empty { text-align: center; padding: 28px 12px; color: var(--ccs-ink-600); font-size: 13px; }
.ccs-empty svg { color: var(--ccs-ink-400); margin-bottom: 6px; }
.ccs-err { border-left: 3px solid var(--ccs-danger); }
.ccs-err-title { display: flex; align-items: center; gap: 8px; color: var(--ccs-danger); font-weight: 600; }
.ccs-err details { margin-top: 8px; font-size: 12px; color: var(--ccs-ink-600); }
.ccs-err code { font-size: 11px; color: var(--ccs-ink-900); }

/* Conmutador de tema (bombillo) en la topbar */
.ccs-tema-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
	border: 0; border-radius: 6px; background: transparent; color: var(--ccs-ink-600); cursor: pointer;
	transition: background-color var(--ccs-dur-1), color var(--ccs-dur-1);
}
.ccs-tema-btn:hover { background: var(--ccs-hover); }
.ccs-tema-btn[data-modo="claro"] { color: var(--ccs-warning); }
.ccs-tema-btn[data-modo="claro"] svg { fill: color-mix(in srgb, var(--ccs-warning) 25%, transparent); }

@media (prefers-reduced-motion: reduce) {
	.ccs-skel { animation: none; }
	.ccs-scope *, .ccs-tema-btn { transition: none !important; }
}


/* ======================================================================
   SHELL (§9): sidebar 240/64px + topbar 52px + drawer móvil
   Reemplaza la plantilla Kaiadmin.
   ====================================================================== */
:root { --ccs-overlay: rgb(18 42 63 / .5); --ccs-sb-ancho: 240px; }
:root[data-theme="dark"] { --ccs-overlay: rgb(0 0 0 / .6); }

.ccs-app { display: flex; min-height: 100vh; background: var(--ccs-canvas); }

/* Barra de carga (reemplaza el spinner de página completa) */
.ccs-progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000; overflow: hidden;
	background: color-mix(in srgb, var(--ccs-green) 15%, transparent); }
.ccs-progreso::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
	background: var(--ccs-green); animation: ccs-carga 1s var(--ccs-ease) infinite; }
@keyframes ccs-carga { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---- Sidebar ---- */
.ccs-sb {
	width: var(--ccs-sb-ancho); flex: none; position: sticky; top: 0; height: 100vh; z-index: 1030;
	display: flex; flex-direction: column;
	background: var(--ccs-surface); border-right: 1px solid var(--ccs-line);
	font-family: var(--ccs-font);
	transition: width var(--ccs-dur-2) var(--ccs-ease);
}
.ccs-sb-logo { height: 52px; flex: none; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--ccs-line); overflow: hidden; }
.ccs-sb-logo a { display: flex; align-items: center; }
.ccs-sb-logo img { display: none; width: auto; }
.ccs-logo-full { height: 34px; }
.ccs-logo-sym { height: 28px; }
/* Exactamente un logo visible según tema y estado (positivo en claro, negativo en oscuro, sin caja) */
.ccs-logo-full.ccs-logo-pos { display: block; }
:root[data-theme="dark"] .ccs-logo-full.ccs-logo-pos { display: none; }
:root[data-theme="dark"] .ccs-logo-full.ccs-logo-neg { display: block; }

.ccs-sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0 12px; }
.ccs-sb-list, .ccs-sb-sub { list-style: none; margin: 0; padding: 0; }
.ccs-sb-group {
	padding: 16px 20px 6px; font-size: 11px; font-weight: 500; letter-spacing: .04em;
	text-transform: uppercase; color: var(--ccs-ink-400); white-space: nowrap;
}
.ccs-sb-item {
	display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 17px;
	border: 0; border-left: 3px solid transparent; background: none; text-align: left;
	color: var(--ccs-ink-600); font: 500 13px/1 var(--ccs-font); text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background-color var(--ccs-dur-1), color var(--ccs-dur-1);
}
.ccs-sb-item:hover { background: var(--ccs-hover); color: var(--ccs-ink-900); }
.ccs-sb-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgb(0 83 155 / .35); }
.ccs-sb-item svg { flex: none; }
.ccs-sb-item span { overflow: hidden; text-overflow: ellipsis; }
.ccs-sb-chev { margin-left: auto; transition: transform var(--ccs-dur-1); }
.ccs-sb-item[aria-expanded="true"] .ccs-sb-chev { transform: rotate(180deg); }
.ccs-sb-sub .ccs-sb-item { height: 32px; padding-left: 47px; font-weight: 400; }
/* Activo: fondo hover + borde izquierdo 3px verde + texto ink-900/600 (la marca como acento, no relleno) */
.ccs-sb li.active > .ccs-sb-item { background: var(--ccs-hover); border-left-color: var(--ccs-green); color: var(--ccs-ink-900); font-weight: 600; }
.ccs-sb-parent:has(li.active) > .ccs-sb-item { color: var(--ccs-ink-900); }

.ccs-sb-user { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--ccs-line); }
.ccs-sb-user-info { flex: 1; min-width: 0; }
.ccs-sb-user-name { font-size: 13px; font-weight: 600; color: var(--ccs-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccs-sb-user-rol { font-size: 11px; color: var(--ccs-ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ccs-avatar {
	width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ccs-blue); color: #fff; font: 600 12px/1 var(--ccs-font);
}
.ccs-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Colapsado (solo escritorio): íconos centrados, sin textos ni submenús */
@media (min-width: 761px) {
	:root[data-sb="colapsado"] { --ccs-sb-ancho: 64px; }
	:root[data-sb="colapsado"] .ccs-sb-logo { justify-content: center; padding: 0; }
	:root[data-sb="colapsado"] .ccs-logo-full { display: none !important; }
	:root[data-sb="colapsado"] .ccs-logo-sym.ccs-logo-pos { display: block; }
	:root[data-sb="colapsado"][data-theme="dark"] .ccs-logo-sym.ccs-logo-pos { display: none; }
	:root[data-sb="colapsado"][data-theme="dark"] .ccs-logo-sym.ccs-logo-neg { display: block; }
	:root[data-sb="colapsado"] .ccs-sb-group { font-size: 0; height: 1px; padding: 0; margin: 10px 16px; background: var(--ccs-line); }
	:root[data-sb="colapsado"] .ccs-sb-item { justify-content: center; padding: 0; }
	:root[data-sb="colapsado"] .ccs-sb-item > span,
	:root[data-sb="colapsado"] .ccs-sb-chev,
	:root[data-sb="colapsado"] .ccs-sb .collapse,
	:root[data-sb="colapsado"] .ccs-sb-user-info,
	:root[data-sb="colapsado"] .ccs-sb-user .salirapp { display: none !important; }
	:root[data-sb="colapsado"] .ccs-sb-user { justify-content: center; padding: 10px 0; }
}

/* ---- Columna principal ---- */
.ccs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ccs-topbar {
	height: 52px; position: sticky; top: 0; z-index: 1020;
	display: flex; align-items: center; gap: 8px; padding: 0 16px;
	background: var(--ccs-surface); border-bottom: 1px solid var(--ccs-line); font-family: var(--ccs-font);
}
.ccs-tb-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
	border: 0; border-radius: 6px; background: transparent; color: var(--ccs-ink-600); cursor: pointer;
	transition: background-color var(--ccs-dur-1), color var(--ccs-dur-1);
}
.ccs-tb-btn:hover { background: var(--ccs-hover); color: var(--ccs-ink-900); }
.ccs-tb-btn:focus-visible, .ccs-tb-avatar:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(0 83 155 / .35); }

/* Migas: Módulo › Sección › Detalle (12px, chevrons ink-400, el último ink-900/600) */
.ccs-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; font-size: 12px; overflow: hidden; white-space: nowrap; }
.ccs-crumb-home { color: var(--ccs-ink-600); text-decoration: none; }
.ccs-crumb-home:hover { color: var(--ccs-ink-900); }
.ccs-crumbs .breadcrumb { margin: 0; padding: 0; background: none; flex-wrap: nowrap; font-size: 12px; }
.ccs-crumbs .breadcrumb:not(:empty)::before,
.ccs-crumbs .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--ccs-ink-400); padding: 0 8px; float: none; }
.ccs-crumbs .breadcrumb-item { padding: 0; color: var(--ccs-ink-600); }
.ccs-crumbs .breadcrumb-item a { color: var(--ccs-ink-600); text-decoration: none; }
.ccs-crumbs .breadcrumb-item a:hover { color: var(--ccs-ink-900); }
.ccs-crumbs .breadcrumb-item.active { color: var(--ccs-ink-900); font-weight: 600; }
/* Sin migas (dashboard), "Inicio" es la página actual */
.ccs-crumbs:has(.breadcrumb:empty) .ccs-crumb-home { color: var(--ccs-ink-900); font-weight: 600; }

.ccs-tb-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ccs-tb-org { font-size: 12px; color: var(--ccs-ink-600); margin-right: 8px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccs-tb-avatar { border: 0; background: none; padding: 2px; margin-left: 4px; border-radius: 50%; cursor: pointer; }
.ccs-user-menu { width: 260px; padding: 0 0 6px; font-family: var(--ccs-font); }
.ccs-user-menu-head { padding: 12px 16px; border-bottom: 1px solid var(--ccs-line); }
.ccs-user-menu-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--ccs-line); font-size: 12px; }
.ccs-user-menu-datos dt { font-weight: 500; color: var(--ccs-ink-600); }
.ccs-user-menu-datos dd { margin: 0; color: var(--ccs-ink-900); overflow: hidden; text-overflow: ellipsis; }
.ccs-user-menu .dropdown-item { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.ccs-content { flex: 1; min-width: 0; padding: 20px 24px; }
.ccs-footer { padding: 12px 24px; font-size: 11px; color: var(--ccs-ink-600); border-top: 1px solid var(--ccs-line); font-family: var(--ccs-font); }

.ccs-scrim { display: none; }

/* ---- Móvil: drawer ---- */
@media (max-width: 760px) {
	.ccs-sb { position: fixed; left: 0; top: 0; width: 240px; transform: translateX(-100%);
		transition: transform var(--ccs-dur-2) var(--ccs-ease); box-shadow: var(--ccs-shadow-card); }
	html.ccs-drawer-abierto .ccs-sb { transform: none; }
	html.ccs-drawer-abierto .ccs-scrim { display: block; position: fixed; inset: 0; z-index: 1029; background: var(--ccs-overlay); }
	html.ccs-drawer-abierto { overflow: hidden; }
	.ccs-tb-org { display: none; }
	.ccs-content { padding: 16px; }
	.ccs-footer { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.ccs-sb, .ccs-sb-item, .ccs-sb-chev, .ccs-tb-btn { transition: none !important; }
	.ccs-progreso::after { animation: none; width: 100%; opacity: .6; }
}

/* ======================================================================
   LOGIN del panel Admin
   Excepción documentada al skill (anti-patrón "ilustraciones 3D decorativas"
   y tope de 300ms): el símbolo SMART en 3D gira de forma continua. Se acota a
   esta pantalla (no es herramienta de trabajo, se ve una vez por sesión),
   respeta prefers-reduced-motion (queda estático) y usa colores del sistema.
   Decisión de producto 2026-11-05.
   ====================================================================== */
:root { --ccs-login-3d: #00539B; }
:root[data-theme="dark"] { --ccs-login-3d: #FFFFFF; }
/* Panel de marca: azul corporativo SÓLIDO (sin degradados). En oscuro, azul profundo derivado del 287. */
:root { --ccs-login-panel: #00539B; --ccs-login-panel-texto: #FFFFFF; --ccs-login-panel-texto-2: rgb(255 255 255 / .78); --ccs-login-marca-agua: rgb(255 255 255 / .07); }
:root[data-theme="dark"] { --ccs-login-panel: #0D2A45; --ccs-login-panel-texto: #E8EFF5; --ccs-login-panel-texto-2: #9FB3C4; --ccs-login-marca-agua: rgb(255 255 255 / .05); }
/* Sobre el panel azul el símbolo va blanco en ambos temas */
.ccs-login-marca { --ccs-login-3d: #FFFFFF; }

.ccs-login { margin: 0; min-height: 100vh; background: var(--ccs-canvas); color: var(--ccs-ink-900); font-family: var(--ccs-font); font-size: 13px; }
.ccs-login-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); min-height: 100vh; }

/* Panel de marca con el símbolo 3D */
.ccs-login-marca {
	position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 48px 32px; background: var(--ccs-login-panel); overflow: hidden;
}
/* Elemento complementario: silueta del símbolo a baja opacidad, recortada en la esquina */
.ccs-login-marca::before {
	content: ""; position: absolute; z-index: -1; right: -14%; bottom: -18%; width: 62%; aspect-ratio: 88.5 / 96.3;
	background: var(--ccs-login-marca-agua);
	-webkit-mask: var(--ccs-login-svg) center / contain no-repeat; mask: var(--ccs-login-svg) center / contain no-repeat;
	transform: rotate(-8deg);
}
.ccs-login-3d { position: relative; width: min(100%, 520px); aspect-ratio: 1 / 1; }
.ccs-login-3d canvas { display: block; width: 100% !important; height: 100% !important; outline: none; }
/* Respaldo sin WebGL: el símbolo plano, coloreado por máscara con el token del tema */
.ccs-login-3d-plano {
	display: none; position: absolute; inset: 22%;
	background: var(--ccs-login-3d);
	-webkit-mask: var(--ccs-login-svg) center / contain no-repeat; mask: var(--ccs-login-svg) center / contain no-repeat;
}
.ccs-login-3d.sin-webgl .ccs-login-3d-plano { display: block; }
.ccs-login-marca-texto { text-align: center; max-width: 420px; margin-top: 8px; }
.ccs-login-producto { font-size: 28px; font-weight: 700; letter-spacing: .08em; color: var(--ccs-login-panel-texto); }
.ccs-login-lema { margin: 6px 0 0; font-size: 13px; color: var(--ccs-login-panel-texto-2); }

/* Panel del formulario */
.ccs-login-panel { display: flex; flex-direction: column; background: var(--ccs-surface); min-height: 100vh; }
.ccs-login-top { display: flex; justify-content: flex-end; padding: 12px 16px; }
.ccs-login-centro { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ccs-login-card { width: 100%; max-width: 360px; }
.ccs-login-logo { display: block; height: 40px; width: auto; margin-bottom: 28px; }
.ccs-login-logo.ccs-logo-neg { display: none; }
:root[data-theme="dark"] .ccs-login-logo.ccs-logo-pos { display: none; }
:root[data-theme="dark"] .ccs-login-logo.ccs-logo-neg { display: block; }
.ccs-login-card h1 { font-size: 20px; font-weight: 600; margin: 0; color: var(--ccs-ink-900); }
.ccs-login-sub { margin: 4px 0 20px; font-size: 13px; color: var(--ccs-ink-600); }
.ccs-login-campo { margin-bottom: 14px; }
.ccs-login-campo .form-label .req { color: var(--ccs-danger); margin-left: 2px; }
.ccs-login-clave { position: relative; }
.ccs-login-clave .form-control { padding-right: 40px; }
.ccs-login-ojo {
	position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
	width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 4px; background: transparent; color: var(--ccs-ink-600); cursor: pointer;
}
.ccs-login-ojo:hover { background: var(--ccs-hover); color: var(--ccs-ink-900); }
.ccs-login-ojo:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(0 83 155 / .35); }
.ccs-login-error-campo { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--ccs-danger); }
.ccs-login-error-campo[hidden] { display: none; }
.ccs-login-card .ccs-banner { margin-bottom: 14px; }
.ccs-login-card .ccs-banner[hidden] { display: none; }
.ccs-login-btn { width: 100%; margin-top: 6px; min-height: 36px; }
.ccs-login-btn .ccs-login-giro { display: none; width: 14px; height: 14px; border: 2px solid rgb(255 255 255 / .45); border-top-color: #fff; border-radius: 50%; animation: ccs-giro .7s linear infinite; }
.ccs-login-btn[aria-busy="true"] .ccs-login-giro { display: inline-block; }
.ccs-login-btn[aria-busy="true"] .ccs-login-btn-ico { display: none; }
@keyframes ccs-giro { to { transform: rotate(360deg); } }
.ccs-login-pie { padding: 16px 24px; font-size: 11px; color: var(--ccs-ink-600); text-align: center; border-top: 1px solid var(--ccs-line); }

@media (max-width: 860px) {
	.ccs-login-layout { grid-template-columns: minmax(0, 1fr); }
	.ccs-login-marca { padding: 16px 16px 20px; }
	.ccs-login-marca::before { width: 46%; right: -10%; bottom: -30%; }
	.ccs-login-3d { width: min(60vw, 220px); }
	.ccs-login-producto { font-size: 20px; }
	.ccs-login-lema { display: none; }
	.ccs-login-panel { min-height: 0; }
	.ccs-login-centro { padding: 24px 16px 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.ccs-login-btn .ccs-login-giro { animation-duration: 2s; }
}

/* ======================================================================
   Par de marca CCS | SMART (login y sidebar)
   El logotipo SMART es el wordmark oficial de smartcliente (Comercial.jsx) recortado
   a la palabra, sin el lema; se pinta por máscara con el token del tema.
   ====================================================================== */
:root { --ccs-smart-logo: #00539B; }
:root[data-theme="dark"] { --ccs-smart-logo: #FFFFFF; }
.ccs-lockup { display: flex; align-items: center; gap: 12px; }
.ccs-lockup-sep { width: 1px; height: 26px; flex: none; background: var(--ccs-line); }
.ccs-smart-logo {
	display: block; flex: none; height: 24px; aspect-ratio: 352.6 / 96.3;
	background: var(--ccs-smart-logo);
	-webkit-mask: url("../imagenes/smart/smart-logotipo.svg") center / contain no-repeat;
	mask: url("../imagenes/smart/smart-logotipo.svg") center / contain no-repeat;
}
/* Login: CCS a 40px, SMART a 24px (mismo peso visual) */
.ccs-login-card .ccs-lockup { margin-bottom: 28px; }
.ccs-login-card .ccs-lockup .ccs-login-logo { margin-bottom: 0; }
.ccs-login-card .ccs-lockup-sep { height: 32px; }
/* Sidebar: CCS a 34px, SMART a 20px; colapsado solo queda el símbolo CCS */
.ccs-sb-logo .ccs-lockup-sep { height: 24px; }
.ccs-sb-logo .ccs-smart-logo { height: 20px; }
@media (min-width: 761px) {
	:root[data-sb="colapsado"] .ccs-sb-logo .ccs-lockup-sep,
	:root[data-sb="colapsado"] .ccs-sb-logo .ccs-smart-logo { display: none; }
	:root[data-sb="colapsado"] .ccs-sb-logo .ccs-lockup { gap: 0; }
}

/* ======================================================================
   Estructura del programa (admin/programas/detalle + _estructura.php)
   Árbol denso: una fila de 36px por nodo, sangría por nivel, acciones de
   ícono a la derecha. Sin zebra; hover = --ccs-hover (sistema §3).
   ====================================================================== */
.ccs-est-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 12px; color: var(--ccs-ink-600); margin-bottom: 12px; }
.ccs-est-resumen b { color: var(--ccs-ink-900); font-weight: 600; }
.ccs-est-lista { list-style: none; margin: 0; padding: 0; }
.ccs-est-lista.nivel-1 { border-top: 1px solid var(--ccs-line); }
.ccs-est-lista.guardando { opacity: .6; pointer-events: none; }
.ccs-est-hijos > .ccs-est-lista, .ccs-est-hijos > .ccs-est-vacio-nodo { margin-left: 28px; }
.ccs-est-fila {
	display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 2px 8px 2px 0;
	border-bottom: 1px solid var(--ccs-line); transition: background-color var(--ccs-dur-1);
}
.ccs-est-fila:hover { background: var(--ccs-hover); }
.ccs-est-nodo.inactivo > .ccs-est-fila .ccs-est-nombre { color: var(--ccs-ink-400); }
.ccs-est-handle { display: inline-flex; color: var(--ccs-ink-400); cursor: grab; padding: 4px 0 4px 4px; }
.ccs-est-handle:active { cursor: grabbing; }
.ccs-est-handle-vacio { display: inline-block; width: 20px; }
.ccs-est-mover { display: inline-flex; flex-direction: column; }
.ccs-est-mover .ccs-est-ico { width: 20px; height: 14px; }
.ccs-est-toggle, .ccs-est-hoja {
	display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto;
	border: 0; background: transparent; padding: 4px 0; text-align: left; color: var(--ccs-ink-900); font: inherit;
}
.ccs-est-toggle { cursor: pointer; }
.ccs-est-chev { color: var(--ccs-ink-400); transition: transform var(--ccs-dur-1); flex: none; }
.ccs-est-toggle[aria-expanded="true"] .ccs-est-chev { transform: rotate(90deg); }
.ccs-est-tipo { color: var(--ccs-ink-600); flex: none; }
.ccs-est-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.nivel-1 > .ccs-est-nodo > .ccs-est-fila .ccs-est-nombre { font-weight: 600; }
.ccs-est-meta { font-size: 11px; color: var(--ccs-ink-600); white-space: nowrap; flex: none; }
.ccs-est-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: none; max-width: 40%; justify-content: flex-end; }
.ccs-est-acciones { display: inline-flex; gap: 2px; flex: none; }
.ccs-est-ico {
	display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
	border: 0; border-radius: 6px; background: transparent; color: var(--ccs-ink-600); cursor: pointer;
	transition: background-color var(--ccs-dur-1), color var(--ccs-dur-1);
}
.ccs-est-ico:hover { background: var(--ccs-line); color: var(--ccs-ink-900); }
.ccs-est-ico.peligro:hover { color: var(--ccs-danger); }
.ccs-est-ico:focus-visible, .ccs-est-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(0 83 155 / .35); border-radius: 6px; }
.ccs-est-evals .ccs-est-fila { background: color-mix(in srgb, var(--ccs-canvas) 60%, transparent); }
.ccs-est-vacio-nodo { font-size: 12px; color: var(--ccs-ink-600); padding: 8px 0; border-bottom: 1px solid var(--ccs-line); }
.ccs-est-vacio { text-align: center; padding: 32px 16px; color: var(--ccs-ink-600); }
.ccs-est-vacio p { margin-bottom: 12px; }
.ccs-est .sortable-ghost > .ccs-est-fila { background: color-mix(in srgb, var(--ccs-blue) 10%, transparent); }
/* Las acciones de fila solo se insinúan en reposo para no saturar el árbol */
@media (hover: hover) {
	.ccs-est-fila .ccs-est-acciones, .ccs-est-fila .ccs-est-mover { opacity: .35; transition: opacity var(--ccs-dur-1); }
	.ccs-est-fila:hover .ccs-est-acciones, .ccs-est-fila:hover .ccs-est-mover,
	.ccs-est-fila:focus-within .ccs-est-acciones, .ccs-est-fila:focus-within .ccs-est-mover { opacity: 1; }
}
@media (max-width: 760px) {
	.ccs-est-fila { flex-wrap: wrap; }
	.ccs-est-badges { max-width: none; order: 5; flex-basis: 100%; justify-content: flex-start; padding-left: 28px; }
	.ccs-est-meta { display: none; }
	.ccs-est-hijos > .ccs-est-lista, .ccs-est-hijos > .ccs-est-vacio-nodo { margin-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.ccs-est-chev, .ccs-est-fila, .ccs-est-ico { transition: none; }
}