/* ==========================================================================
   MYPE 360 — Aplicación Frontend (Full Viewport)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
	/* Tamaño de los campos de formulario. En móvil sube a 16px:
	   por debajo de eso iOS hace zoom automático al enfocar un campo,
	   y ese zoom desencuadra toda la pantalla. Ver responsive.css. */
	--m360-campo-fs: 14px;
	--m360-primary: #4F46E5;
	--m360-primary-dark: #3730A3;
	--m360-primary-light: #EEF2FF;
	--m360-bg: #F5F6FA;
	--m360-surface: #FFFFFF;
	--m360-border: #E5E7EB;
	--m360-text: #111827;
	--m360-text-muted: #6B7280;
	--m360-sidebar-bg: #12142A;
	--m360-sidebar-text: #C7C9E0;
	--m360-sidebar-active: #4F46E5;
	--m360-success: #059669;
	--m360-success-bg: #ECFDF5;
	--m360-danger: #DC2626;
	--m360-danger-bg: #FEF2F2;
	--m360-warning: #D97706;
	--m360-warning-bg: #FFFBEB;
	--m360-info: #2563EB;
	--m360-info-bg: #EFF6FF;
	--m360-radius: 12px;
	--m360-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
	--m360-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--m360-font-heading: 'Sora', var(--m360-font);
	--m360-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-m360-theme="dark"] {
	--m360-bg: #0B0D1A;
	--m360-surface: #14162B;
	--m360-border: #262A47;
	--m360-text: #F3F4F6;
	--m360-text-muted: #9497C4;
	--m360-sidebar-bg: #0B0D1A;
	--m360-primary-light: #1B1D3C;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.m360-app-body {
	margin: 0;
	font-family: var(--m360-font);
	background: var(--m360-bg);
	color: var(--m360-text);
	-webkit-font-smoothing: antialiased;
}

.m360-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.m360-icon svg { width: 100%; height: 100%; }

/* ---------------- Layout general ---------------- */
/* El alto y el desbordamiento los fija shared/assets/css/responsive.css,
   que declara 100vh y 100dvh para que funcione también donde no hay dvh. */
.m360-app { display: flex; }

.m360-sidebar {
	width: 260px;
	flex-shrink: 0;
	background: var(--m360-sidebar-bg);
	color: var(--m360-sidebar-text);
	display: flex;
	flex-direction: column;
	transition: width .18s ease;
	overflow: hidden;
}
.m360-app.m360-sidebar-collapsed .m360-sidebar { width: 76px; }
.m360-app.m360-sidebar-collapsed .m360-brand-text,
.m360-app.m360-sidebar-collapsed .m360-nav-group-label,
.m360-app.m360-sidebar-collapsed .m360-nav-link span,
.m360-app.m360-sidebar-collapsed .m360-badge-soon,
.m360-app.m360-sidebar-collapsed .m360-theme-toggle span,
.m360-app.m360-sidebar-collapsed .m360-company-switch div,
.m360-app.m360-sidebar-collapsed .m360-brand-mark { display: none; }
.m360-app.m360-sidebar-collapsed .m360-nav-group-items { grid-template-rows: 1fr !important; }
.m360-app.m360-sidebar-collapsed .m360-sidebar-brand { padding: 20px 0 16px; justify-content: center; }
.m360-app.m360-sidebar-collapsed .m360-sidebar-toggle { margin-left: 0; }

.m360-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.m360-brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--m360-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.m360-brand-text { display: flex; flex-direction: column; overflow: hidden; }
.m360-brand-text strong { color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m360-brand-text span { font-size: 11px; color: var(--m360-sidebar-text); opacity: .7; }
.m360-sidebar-toggle { margin-left: auto; background: none; border: none; color: var(--m360-sidebar-text); cursor: pointer; padding: 6px; border-radius: 6px; flex-shrink: 0; }
.m360-sidebar-toggle:hover { background: rgba(255,255,255,.08); }

.m360-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 10px; }
.m360-nav {
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.18) transparent;
}
.m360-nav::-webkit-scrollbar { width: 6px; }
.m360-nav::-webkit-scrollbar-track { background: transparent; }
.m360-nav::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.18); border-radius: 999px; }
.m360-nav::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.32); }
.m360-nav-group { margin-bottom: 10px; }
.m360-nav-group-label { display: flex; align-items: center; width: 100%; gap: 6px; font: inherit; background: none; border: 0; cursor: pointer; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: rgba(199,201,224,.45); padding: 6px 10px 4px; }
.m360-nav-group-label:hover { color: rgba(199,201,224,.75); }
.m360-nav-group-label span { flex: 0 0 auto; }
.m360-nav-group-chevron { width: 13px; height: 13px; margin-left: auto; flex: none; transition: transform .18s ease; }
.m360-nav-group-collapsed .m360-nav-group-chevron { transform: rotate(-90deg); }
/* Animación de expandir/colapsar sin medir alturas en JS (evita que el
   contenido quede recortado si el texto se ajusta a más líneas o cambia
   el ancho de pantalla): la fila de grid pasa de 1fr a 0fr y el div
   interno, con overflow hidden, se recorta de forma progresiva y exacta. */
.m360-nav-group-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease; }
.m360-nav-group-collapsed .m360-nav-group-items { grid-template-rows: 0fr; }
.m360-nav-group-items-inner { overflow: hidden; min-height: 0; }
.m360-nav-group-soon .m360-badge-soon { margin-left: 0; }
.m360-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--m360-sidebar-text); text-decoration: none; font-size: 13.5px; margin-bottom: 2px; position: relative; }
.m360-nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.m360-nav-link.active { background: var(--m360-sidebar-active); color: #fff; }
.m360-badge-soon { margin-left: auto; font-size: 9.5px; background: rgba(255,255,255,.12); padding: 2px 6px; border-radius: 999px; font-style: normal; }

.m360-sidebar-footer { padding: 14px 14px 18px; border-top: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 10px; }
.m360-theme-toggle { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border: none; color: var(--m360-sidebar-text); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px; width: 100%; }
.m360-theme-toggle:hover { background: rgba(255,255,255,.09); }
.m360-company-switch { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.m360-company-switch .m360-muted { display: block; opacity: .55; font-size: 10.5px; }
.m360-company-switch strong { color: #fff; font-size: 12.5px; }

/* ---------------- Main / Topbar ---------------- */
.m360-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.m360-topbar { height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 0 22px; background: var(--m360-surface); border-bottom: 1px solid var(--m360-border); }
.m360-mobile-toggle { display: none; }
.m360-search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; background: var(--m360-bg); border: 1px solid var(--m360-border); border-radius: 8px; padding: 8px 12px; color: var(--m360-text-muted); }
.m360-search input { border: none; background: none; outline: none; width: 100%; font-size: var(--m360-campo-fs, 14px); color: var(--m360-text); }
.m360-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.m360-icon-btn { position: relative; background: none; border: none; cursor: pointer; color: var(--m360-text-muted); padding: 8px; border-radius: 8px; display: flex; }
.m360-icon-btn:hover { background: var(--m360-bg); }
.m360-badge-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--m360-danger); display: none; }
.m360-badge-dot.show { display: block; }
.m360-profile { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--m360-border); }
.m360-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--m360-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.m360-profile-text { display: flex; flex-direction: column; line-height: 1.25; }
.m360-profile-text strong { font-size: 13px; }
.m360-profile-text span { font-size: 11.5px; color: var(--m360-text-muted); }
.m360-logout { color: var(--m360-text-muted); margin-left: 4px; display: flex; }
.m360-logout:hover { color: var(--m360-danger); }

/* ---------------- Workarea ---------------- */
.m360-workarea { flex: 1; overflow-y: auto; padding: 24px 28px 60px; }
.m360-workarea { scrollbar-width: thin; scrollbar-color: var(--m360-border) transparent; }
.m360-workarea::-webkit-scrollbar { width: 8px; }
.m360-workarea::-webkit-scrollbar-track { background: transparent; }
.m360-workarea::-webkit-scrollbar-thumb { background-color: var(--m360-border); border-radius: 999px; }
.m360-workarea::-webkit-scrollbar-thumb:hover { background-color: var(--m360-text-muted); }
.m360-loading { color: var(--m360-text-muted); font-size: 14px; padding: 40px 0; text-align: center; }

.m360-page-header { margin-bottom: 20px; }
.m360-page-header h1, .m360-card-header h3, .m360-modal h2, .m360-brand-text strong { font-family: var(--m360-font-heading); }
.m360-kpi-value, .m360-kpi-ficha-value .m360-kpi-value, .m360-table td.m360-col-num, code, .m360-mono { font-family: var(--m360-font-mono); }
.m360-page-header h1 { font-size: 22px; margin: 0 0 4px; }
.m360-page-header p { margin: 0; color: var(--m360-text-muted); font-size: 13.5px; }

/* ---------------- Grid / Cards ---------------- */
.m360-grid { display: grid; gap: 16px; }
.m360-grid-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.m360-grid-3 { grid-template-columns: 2fr 1fr 1fr; }
.m360-grid-2 { grid-template-columns: 1fr 1fr; }
.m360-grid-alerts { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 1100px) { .m360-grid-3, .m360-grid-2 { grid-template-columns: 1fr; } }

.m360-card { background: var(--m360-surface); border: 1px solid var(--m360-border); border-radius: var(--m360-radius); padding: 18px 20px; box-shadow: var(--m360-shadow); }
.m360-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.m360-card-header h3 { font-size: 14.5px; margin: 0; }
.m360-card-link { font-size: 12.5px; color: var(--m360-primary); text-decoration: none; font-weight: 600; }

.m360-kpi-label { font-size: 12.5px; color: var(--m360-text-muted); margin-bottom: 8px; }
.m360-kpi-row { display: flex; align-items: center; justify-content: space-between; }
.m360-kpi-value { font-size: 22px; font-weight: 700; }
.m360-kpi-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.m360-kpi-trend { font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.m360-kpi-trend.up { color: var(--m360-success); }
.m360-kpi-trend.down { color: var(--m360-danger); }

/* ---------------- Alertas ---------------- */
.m360-alert-card { display: flex; gap: 12px; align-items: flex-start; }
.m360-alert-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m360-alert-card h4 { margin: 0 0 4px; font-size: 13px; }
.m360-alert-card p { margin: 0 0 6px; font-size: 12.5px; color: var(--m360-text-muted); }
.m360-alert-card a { font-size: 12px; font-weight: 600; color: var(--m360-primary); text-decoration: none; }
.severidad-alta .m360-alert-icon { background: var(--m360-danger-bg); color: var(--m360-danger); }
.severidad-media .m360-alert-icon { background: var(--m360-warning-bg); color: var(--m360-warning); }
.severidad-baja .m360-alert-icon { background: var(--m360-info-bg); color: var(--m360-info); }

/* ---------------- Tablas ---------------- */
.m360-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.m360-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--m360-text-muted); padding: 8px 10px; border-bottom: 1px solid var(--m360-border); }
.m360-table td { padding: 10px 10px; border-bottom: 1px solid var(--m360-border); }
.m360-table tr:last-child td { border-bottom: none; }
.m360-table tbody tr { transition: background .12s; }
.m360-table tbody tr:hover { background: var(--m360-bg); }
.m360-action-link { color: var(--m360-primary); font-weight: 600; text-decoration: none; }
.m360-table a.m360-action-link { color: var(--m360-primary); font-weight: 600; text-decoration: none; }
.m360-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* Tabla de ítems de la cotización: letra más pequeña y padding reducido para que
   quepa con comodidad la columna extra de Descuento sin perder el diseño. */
.m360-table-cot-items { font-size: 12px; }
.m360-table-cot-items th { font-size: 10.5px; padding: 6px 8px; white-space: nowrap; }
.m360-table-cot-items td { padding: 6px 8px; vertical-align: middle; }
.m360-table-cot-items td.m360-col-descuento { color: var(--m360-danger); font-weight: 600; white-space: nowrap; }
.m360-table-cot-items td.m360-col-descuento .m360-text-muted { font-weight: 400; }
.m360-line-promo-btn { background: none; border: 1px dashed var(--m360-primary); color: var(--m360-primary); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.m360-line-promo-btn:hover { background: var(--m360-primary-light); }
.m360-line-promo-tag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.m360-line-promo-quitar { background: none; border: none; color: var(--m360-text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.m360-line-promo-quitar:hover { color: var(--m360-danger); }
.m360-line-promo-menu { position: fixed; z-index: 400; background: var(--m360-surface); border: 1px solid var(--m360-border); border-radius: 8px; box-shadow: var(--m360-shadow); min-width: 190px; overflow: hidden; }
.m360-line-promo-menu-item { padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--m360-border); }
.m360-line-promo-menu-item:last-child { border-bottom: none; }
.m360-line-promo-menu-item:hover { background: var(--m360-primary-light); }
.m360-table-cot-items .m360-qty-input { width: 56px; padding: 4px 5px; font-size: var(--m360-campo-fs, 14px); }
.m360-row-actions .m360-icon-btn { padding: 7px; color: var(--m360-text-muted); }
.m360-row-actions .m360-icon-btn .m360-icon { width: 16px; height: 16px; }
.m360-row-actions .m360-icon-btn:hover { background: var(--m360-bg); color: var(--m360-text); }
.m360-row-actions .m360-icon-btn.is-danger:hover { background: var(--m360-danger-bg); color: var(--m360-danger); }

.m360-permisos-grupo { border: 1px solid var(--m360-border); border-radius: var(--m360-radius); margin-bottom: 10px; overflow: hidden; }
.m360-permisos-grupo-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--m360-bg); border: none; cursor: pointer; padding: 10px 14px; font: inherit; font-weight: 600; font-size: 13px; color: var(--m360-text); }
.m360-permisos-grupo-toggle:hover { background: var(--m360-border); }
.m360-permisos-grupo-chevron { width: 15px; height: 15px; flex: none; transition: transform .18s ease; }
.m360-permisos-grupo-collapsed .m360-permisos-grupo-chevron { transform: rotate(-90deg); }
.m360-permisos-grupo-collapsed .m360-permisos-grupo-items { display: none; }
.m360-permisos-marcar-todo { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: var(--m360-text-muted); cursor: pointer; }
.m360-permisos-grupo-items .m360-table { margin: 0; table-layout: fixed; width: 100%; }
.m360-permisos-grupo-items .m360-table th:first-child, .m360-permisos-grupo-items .m360-table td:first-child { width: 40%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m360-permisos-grupo-items .m360-table th:not(:first-child), .m360-permisos-grupo-items .m360-table td:not(:first-child) { width: 15%; text-align: center; }
.m360-text-danger { color: var(--m360-danger); font-weight: 600; }
.m360-text-warning { color: var(--m360-warning); font-weight: 600; }
.m360-text-success { color: var(--m360-success); font-weight: 600; }
.m360-text-muted { color: var(--m360-text-muted); }

.m360-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.m360-toolbar .m360-search { max-width: 280px; }
.m360-toolbar-spacer { flex: 1; }

.m360-pager {
	display: flex; align-items: center; justify-content: center; gap: 16px;
	margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--m360-border);
	flex-wrap: wrap;
}
.m360-pager-btn {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 13px; font-weight: 600; color: var(--m360-text);
	background: var(--m360-surface); border: 1px solid var(--m360-border);
	border-radius: 999px; padding: 8px 16px; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.m360-pager-btn .m360-icon { width: 15px; height: 15px; }
.m360-pager-btn:hover:not([disabled]) {
	background: var(--m360-primary-light); border-color: var(--m360-primary); color: var(--m360-primary-dark);
}
.m360-pager-btn:active:not([disabled]) { transform: scale(.97); }
.m360-pager-btn[disabled] { opacity: .4; cursor: not-allowed; }
.m360-pager-info {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; color: var(--m360-text-muted);
	background: var(--m360-bg); border: 1px solid var(--m360-border);
	border-radius: 999px; padding: 8px 18px; white-space: nowrap;
}
.m360-pager-info strong { color: var(--m360-text); font-weight: 700; }
.m360-pager-sep { opacity: .7; }
.m360-pager-total { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--m360-border); }
@media (max-width: 560px) {
	.m360-pager { gap: 10px; }
	.m360-pager-info { order: 3; width: 100%; justify-content: center; }
}

/* ---------------- Botones ---------------- */
.m360-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--m360-border); background: var(--m360-surface); color: var(--m360-text); cursor: pointer; text-decoration: none; }
/* Botón que se ve como texto clicable (no como hipervínculo): para abrir
   registros desde una tabla sin usar <a href>. */
.m360-linklike { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--m360-text); cursor: pointer; text-align: left; }
.m360-linklike:hover { color: var(--m360-primary); }
.m360-btn:hover { background: var(--m360-bg); }
.m360-btn-primary { background: var(--m360-primary); border-color: var(--m360-primary); color: #fff; }
.m360-btn-primary:hover { background: var(--m360-primary-dark); }
.m360-btn-danger { color: var(--m360-danger); border-color: var(--m360-danger-bg); }
.m360-btn-danger-solid { background: var(--m360-danger); border-color: var(--m360-danger); color: #fff; }
.m360-btn-danger-solid:hover { background: #B91C1C; border-color: #B91C1C; }
.m360-btn-block { width: 100%; justify-content: center; }
.m360-btn-sm { padding: 6px 10px; font-size: 12px; }

/* ---------------- Badges de estado ---------------- */
.m360-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.m360-pill .m360-icon { width: 12px; height: 12px; }
.pill-activo, .pill-completado, .pill-pagado, .pill-activa { background: var(--m360-success-bg); color: var(--m360-success); }
.pill-pendiente, .pill-en_proceso, .pill-parcial, .pill-trial, .pill-pendiente_validacion { background: var(--m360-warning-bg); color: var(--m360-warning); }
.pill-cancelado, .pill-vencido, .pill-inactivo, .pill-invalida { background: var(--m360-danger-bg); color: var(--m360-danger); }
.pill-condicional { background: var(--m360-warning-bg); color: var(--m360-warning); }
.pill-planificada { background: var(--m360-info-bg); color: var(--m360-info); }
.pill-pausada { background: var(--m360-warning-bg); color: var(--m360-warning); }
.pill-finalizada { background: var(--m360-border); color: var(--m360-text-muted); }
.pill-cancelada, .pill-anulada { background: var(--m360-danger-bg); color: var(--m360-danger); }
.pill-sobresaliente { background: var(--m360-success-bg); color: var(--m360-success); }
.pill-bueno { background: var(--m360-info-bg); color: var(--m360-info); }
.pill-regular { background: var(--m360-warning-bg); color: var(--m360-warning); }
.pill-deficiente { background: var(--m360-danger-bg); color: var(--m360-danger); }

/* ---------------- Evaluación de proveedores (escala 1-5) ---------------- */
.m360-eval-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.m360-eval-legend-text { font-size: 12px; color: var(--m360-text-muted); margin-right: 6px; }
.m360-eval-table { width: 100%; border-collapse: collapse; }
.m360-eval-table th, .m360-eval-table td { padding: 8px 10px; border-bottom: 1px solid var(--m360-border); font-size: 13px; vertical-align: middle; }
.m360-eval-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--m360-text-muted); }
.m360-eval-table td.m360-eval-nro { color: var(--m360-text-muted); width: 32px; }
.m360-eval-table td.m360-eval-criterio { font-weight: 600; }
.m360-eval-scale { display: flex; gap: 4px; }
.m360-eval-scale button { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--m360-border); background: var(--m360-surface); color: var(--m360-text); font-size: 13px; font-weight: 600; cursor: pointer; }
.m360-eval-scale button:hover { background: var(--m360-bg); }
.m360-eval-scale button.is-active { background: var(--m360-primary); border-color: var(--m360-primary); color: #fff; }
.m360-eval-resultado { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--m360-bg); font-size: 13px; }
.m360-eval-resultado strong { font-size: 15px; }
.m360-crit-grupo { border: 1px solid var(--m360-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.m360-crit-grupo-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.m360-crit-grupo-header input { font-weight: 600; }
.m360-subcrit-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.m360-subcrit-row span { flex: 1; }

/* ---------------- Evaluación de proveedores: panel de configuración amigable ---------------- */
.m360-eval-section { padding: 18px 0; border-bottom: 1px solid var(--m360-border); }
.m360-eval-section:first-of-type { padding-top: 4px; }
.m360-eval-section:last-of-type { border-bottom: none; padding-bottom: 4px; }
.m360-eval-section-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.m360-eval-section-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--m360-primary-light); color: var(--m360-primary); display: flex; align-items: center; justify-content: center; }
.m360-eval-section-icon .m360-icon { width: 18px; height: 18px; }
.m360-eval-section-head h4 { margin: 0 0 2px; font-size: 13.5px; }
.m360-eval-section-head p { margin: 0; font-size: 12.5px; color: var(--m360-text-muted); line-height: 1.45; }

.m360-eval-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; padding-left: 44px; }
.m360-eval-stat-row .m360-form-group { margin-bottom: 0; }

.m360-eval-gauge-wrap { padding-left: 44px; }
.m360-eval-gauge { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--m360-border); margin-bottom: 10px; }
.m360-eval-gauge-seg { height: 100%; transition: width .2s ease; }
.m360-eval-gauge-seg.no-calificado { background: var(--m360-danger); }
.m360-eval-gauge-seg.condicional { background: var(--m360-warning); }
.m360-eval-gauge-seg.calificado { background: var(--m360-success); }
.m360-eval-gauge-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; font-size: 12px; color: var(--m360-text-muted); }
.m360-eval-gauge-legend-item { display: flex; align-items: center; gap: 6px; }
.m360-eval-gauge-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.m360-eval-gauge-dot.no-calificado { background: var(--m360-danger); }
.m360-eval-gauge-dot.condicional { background: var(--m360-warning); }
.m360-eval-gauge-dot.calificado { background: var(--m360-success); }

.m360-crit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 4px; }
.m360-crit-card { border: 1px solid var(--m360-border); border-radius: 10px; padding: 14px; background: var(--m360-surface); display: flex; flex-direction: column; gap: 10px; }
.m360-crit-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.m360-crit-card-titulo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.m360-crit-card-titulo .m360-icon { width: 15px; height: 15px; color: var(--m360-primary); }
.m360-crit-card-count { font-size: 11px; font-weight: 600; color: var(--m360-text-muted); background: var(--m360-bg); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.m360-chip-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.m360-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--m360-primary-light); color: var(--m360-primary-dark); font-size: 12px; font-weight: 500; padding: 4px 6px 4px 10px; border-radius: 999px; }
.m360-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; cursor: pointer; color: inherit; opacity: .65; background: rgba(0,0,0,.06); }
.m360-chip-x:hover { opacity: 1; }
.m360-chip-x .m360-icon { width: 10px; height: 10px; }
.m360-crit-card-add { display: flex; gap: 6px; }
.m360-crit-card-add input { flex: 1; padding: 6px 9px; border: 1px solid var(--m360-border); border-radius: 7px; font-size: var(--m360-campo-fs, 14px); background: var(--m360-bg); color: var(--m360-text); }
.m360-crit-card-add input:focus { outline: 2px solid var(--m360-primary); outline-offset: 1px; }
.m360-crit-card-add .m360-icon-btn { flex-shrink: 0; padding: 6px; border: 1px solid var(--m360-border); border-radius: 7px; color: var(--m360-primary); }
.m360-crit-card-add .m360-icon-btn .m360-icon { width: 14px; height: 14px; }
.m360-crit-card-add .m360-icon-btn:hover { background: var(--m360-primary-light); border-color: var(--m360-primary); }
.m360-crit-empty { border: 1.5px dashed var(--m360-border); border-radius: 10px; padding: 24px; text-align: center; color: var(--m360-text-muted); font-size: 13px; }
@media (max-width: 640px) {
	.m360-eval-stat-row, .m360-eval-gauge-wrap { padding-left: 0; }
	.m360-eval-section-head { flex-wrap: wrap; }
}

/* ---------------- Formularios / Modal ---------------- */
.m360-modal-overlay { position: fixed; inset: 0; background: rgba(15,17,35,.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.m360-modal { background: var(--m360-surface); border-radius: var(--m360-radius); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 22px 24px; }
.m360-modal h2 { margin-top: 0; font-size: 17px; }
p.m360-text-muted { font-size: 12.5px; line-height: 1.4; margin: 4px 0 0; }
.m360-modal-confirm { max-width: 400px; }
.m360-confirm-message { color: var(--m360-text-muted); font-size: 14px; line-height: 1.5; margin: 0; }
.m360-form-group { margin-bottom: 14px; }
.m360-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m360-form-group label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--m360-text-muted); }
/*
 * `width: 100%` NO alcanza a casillas ni a radios.
 *
 * Un campo de texto ocupa toda la fila, pero una casilla estirada al
 * 100% se lleva la fila entera: el cuadrito se dibuja centrado en esa
 * caja enorme y el texto queda empujado a la derecha, cada uno en una
 * posición distinta según su largo. Eso era lo que se veía desalineado
 * en "Módulos incluidos": no un problema de alineación, sino un ancho
 * heredado por un tipo de campo que no lo pedía.
 *
 * Se excluyen por tipo y no con una clase aparte para que valga en
 * TODOS los formularios del panel, incluidos los que se escriban
 * después sin saber de esta regla.
 */
.m360-form-group input:not([type="checkbox"]):not([type="radio"]),
.m360-form-group select, .m360-form-group textarea {
	width: 100%; padding: 9px 11px; border: 1px solid var(--m360-border); border-radius: 8px; font-size: var(--m360-campo-fs, 14px); background: var(--m360-bg); color: var(--m360-text);
	/*
	 * La tipografía se hereda. Sin esto el navegador usa su fuente por
	 * defecto de cada control, y los textarea salen en monoespaciada:
	 * en el mismo formulario, "Misión" se veía con otra letra que
	 * "Razón social".
	 */
	font-family: inherit;
	line-height: 1.5;
}
.m360-form-group input[type="checkbox"], .m360-form-group input[type="radio"] {
	width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--m360-primary);
}
.m360-form-group input:focus, .m360-form-group select:focus, .m360-form-group textarea:focus { outline: 2px solid var(--m360-primary); outline-offset: 1px; }
.m360-form-group-oculto { display: none; }

/* Campo de color corporativo: una muestra de color visible + su código.
   El input de color hereda por defecto la regla de arriba (ancho completo
   y relleno) y se ve como una línea; aquí se le da tamaño de muestra y se
   quita el marco interno del swatch para que se vea el color elegido. */
.m360-color-field { display: flex; align-items: center; gap: 10px; }
.m360-color-field input[type="color"].m360-color-swatch {
	width: 54px !important; height: 40px !important; padding: 3px !important;
	border: 1px solid var(--m360-border); border-radius: 8px; background: var(--m360-bg); cursor: pointer; flex: 0 0 auto;
}
.m360-color-field input[type="color"].m360-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.m360-color-field input[type="color"].m360-color-swatch::-webkit-color-swatch { border: none; border-radius: 5px; }
.m360-color-field input[type="color"].m360-color-swatch::-moz-color-swatch { border: none; border-radius: 5px; }
.m360-color-field input.m360-color-hex { width: auto !important; max-width: 130px; text-transform: uppercase; letter-spacing: .5px; }

/* Lista de checkboxes (p.ej. "Productos específicos" en promociones): la
   regla .m360-form-group input de arriba estira cualquier <input>, incluidos
   los checkboxes, así que aquí se revierte explícitamente para que queden
   con su tamaño natural y el texto alineado a la izquierda justo al lado. */
.m360-check-list { border: 1px solid var(--m360-border); border-radius: 8px; overflow: hidden; }
.m360-check-list-search.m360-search { max-width: none; border: none; border-bottom: 1px solid var(--m360-border); border-radius: 0; }
.m360-check-list-search input { width: 100%; padding: 0; border: none; background: none; }
.m360-check-list-items { max-height: 160px; overflow-y: auto; padding: 8px; }
.m360-check-list-item {
	display: flex; align-items: center; justify-content: flex-start; gap: 8px;
	padding: 5px 2px; font-weight: 400; font-size: 13px; text-align: left; cursor: pointer;
}
.m360-check-list-item input[type="checkbox"] {
	width: 15px; height: 15px; flex: none; padding: 0; border: 1px solid var(--m360-border); border-radius: 4px; background: var(--m360-bg); accent-color: var(--m360-primary);
}

.m360-select-with-add { display: flex; gap: 8px; align-items: center; }
.m360-select-with-add select { flex: 1; }
.m360-select-add-btn { flex: 0 0 auto; padding: 9px 11px; }
.m360-select-add-btn .m360-icon { width: 15px; height: 15px; }

.m360-modal-gestor { max-width: 420px; }
.m360-gestor-tipos { margin-bottom: 14px; }
.m360-gestor-lista { list-style: none; margin: 0 0 14px; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--m360-border); border-radius: 10px; }
.m360-gestor-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--m360-border); }
.m360-gestor-item:last-child { border-bottom: none; }
.m360-gestor-nombre { font-size: 14px; }
.m360-gestor-acciones { display: flex; gap: 2px; flex-shrink: 0; }
.m360-gestor-acciones .m360-icon-btn { padding: 6px; }
.m360-gestor-acciones .m360-icon-btn .m360-icon { width: 15px; height: 15px; }
.m360-gestor-lista li.m360-text-muted,
.m360-gestor-lista li.m360-text-danger { padding: 12px; text-align: center; }
.m360-gestor-nueva { display: flex; gap: 8px; }
.m360-gestor-nueva input { flex: 1; padding: 9px 11px; border: 1px solid var(--m360-border); border-radius: 8px; font-size: var(--m360-campo-fs, 14px); background: var(--m360-bg); color: var(--m360-text); }
.m360-gestor-nueva input:focus { outline: 2px solid var(--m360-primary); outline-offset: 1px; }

/* ---------------- Selector segmentado tipo pestañas (ej. Producto / Servicio) ---------------- */
.m360-segmented { display: flex; gap: 22px; border-bottom: 1px solid var(--m360-border); }
.m360-segmented-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.m360-segmented-label {
	display: inline-block; padding: 9px 2px; margin-bottom: -1px;
	color: var(--m360-text-muted); font-size: 13.5px; font-weight: 600; cursor: pointer;
	border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.m360-segmented-label:hover { color: var(--m360-text); }
.m360-segmented-input:checked + .m360-segmented-label { color: var(--m360-primary); border-bottom-color: var(--m360-primary); }
.m360-segmented-input:focus-visible + .m360-segmented-label { outline: 2px solid var(--m360-primary); outline-offset: 2px; }

/* ---------------- Pestañas del panel (ej. Productos / Servicios) ---------------- */
.m360-tabs { display: flex; gap: 22px; margin: -18px -20px 16px; padding: 0 20px; border-bottom: 1px solid var(--m360-border); }
.m360-tab {
	appearance: none; background: none; border: none; cursor: pointer;
	padding: 14px 2px; margin-bottom: -1px; font: inherit;
	color: var(--m360-text-muted); font-size: 13.5px; font-weight: 600;
	border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.m360-tab:hover { color: var(--m360-text); }
.m360-tab.active { color: var(--m360-primary); border-bottom-color: var(--m360-primary); }

.m360-select-wrap { position: relative; display: inline-flex; align-items: center; }
.m360-select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background: var(--m360-bg); border: 1px solid var(--m360-border); color: var(--m360-text);
	font: inherit; font-size: var(--m360-campo-fs, 14px); font-weight: 600; padding: 9px 34px 9px 14px;
	border-radius: 8px; cursor: pointer; min-width: 190px;
}
.m360-select:hover { border-color: var(--m360-primary); }
.m360-select:focus { outline: 2px solid var(--m360-primary); outline-offset: 1px; }
.m360-select-chevron { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; color: var(--m360-text-muted); }
.m360-form-group .m360-select-wrap { width: 100%; }
.m360-form-group .m360-select-wrap select.m360-select { width: 100%; padding-right: 34px; font-weight: 500; }
.m360-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.m360-password-wrap {
	display: flex; align-items: stretch; width: 100%;
	border: 1px solid var(--m360-border, #E5E7EB); border-radius: 8px; background: #fff; overflow: hidden;
}
.m360-password-wrap:focus-within { outline: 2px solid var(--m360-primary, #4F46E5); outline-offset: 1px; }
.m360-password-wrap input {
	flex: 1 1 auto; min-width: 0; width: auto !important; border: none !important; outline: none !important;
	border-radius: 0 !important; background: transparent; padding: 10px 12px !important; font-size: var(--m360-campo-fs, 14px);
	box-sizing: border-box; display: block;
}
.m360-password-toggle {
	flex: 0 0 auto; width: 40px; align-self: stretch; box-sizing: border-box;
	background: none; border: none; border-left: 1px solid var(--m360-border, #E5E7EB); cursor: pointer; padding: 0; margin: 0; appearance: none;
	display: flex; align-items: center; justify-content: center; color: var(--m360-text-muted);
}
.m360-password-toggle:hover { color: var(--m360-text); background: var(--m360-bg, #F5F6FA); }
.m360-password-toggle svg, .m360-password-toggle .m360-icon { width: 18px; height: 18px; }
/* Ocultar íconos nativos de "ver contraseña" del navegador (Edge/IE y gestores de contraseñas)
   para que no se superpongan ni dupliquen con nuestro propio botón. */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button { display: none !important; visibility: hidden; pointer-events: none; }

.m360-roadmap { text-align: center; padding: 80px 20px; color: var(--m360-text-muted); }
.m360-roadmap .m360-icon { width: 46px; height: 46px; margin: 0 auto 16px; color: var(--m360-primary); }
.m360-roadmap h2 { color: var(--m360-text); margin-bottom: 8px; }

.m360-empty { text-align: center; padding: 40px 0; color: var(--m360-text-muted); font-size: 13.5px; }
.m360-toast { position: fixed; bottom: 24px; right: 24px; background: var(--m360-text); color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 13.5px; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.m360-toast.error { background: var(--m360-danger); }

/* ---------------- Charts (SVG) ---------------- */
.m360-chart-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 12.5px; }
.m360-chart-legend-item { display: flex; align-items: center; gap: 8px; }
.m360-chart-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.m360-chart-legend-name { flex: 1; color: var(--m360-text-muted); }
.m360-chart-legend-value { font-weight: 600; }
.m360-donut-center { text-anchor: middle; }
.m360-donut-center .num { font-size: 22px; font-weight: 700; fill: var(--m360-text); }
.m360-donut-center .label { font-size: 10px; fill: var(--m360-text-muted); }

/* ---------------- Login ---------------- */
body.m360-login-body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #4338CA 0%, #12142A 100%); font-family: var(--m360-font); }
.m360-login-wrap { width: 100%; max-width: 400px; padding: 20px; }
.m360-login-card { background: #fff; border-radius: 16px; padding: 36px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.m360-login-brand { text-align: center; margin-bottom: 22px; }
.m360-login-logo { width: 52px; height: 52px; border-radius: 14px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; margin: 0 auto 14px; }
.m360-login-brand h1 { font-size: 18px; margin: 0 0 4px; color: #111827; }
.m360-login-brand p { font-size: 12.5px; color: #6B7280; margin: 0; }
.m360-login-form label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin: 14px 0 6px; }
.m360-login-form input { width: 100%; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 8px; font-size: var(--m360-campo-fs, 14px); }
.m360-login-form input:focus { outline: 2px solid #4F46E5; }
.m360-login-form > button { margin-top: 20px; }
.m360-login-form .m360-password-toggle { margin-top: 0; }
.m360-login-footer { text-align: center; font-size: 11.5px; color: #9CA3AF; margin-top: 20px; }
.m360-alert { padding: 10px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 6px; }
.m360-alert-error { background: #FEF2F2; color: #B91C1C; }
.m360-alert-info { padding: 10px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 6px; background: var(--m360-info-bg); color: var(--m360-info); }
.m360-alert-success { background: var(--m360-success-bg); color: var(--m360-success); }

/* Ingreso: pantallas de login/recuperar/restablecer/registro/verificación */
.m360-login-logo { background: var(--m360-primary); }
.m360-login-brand h1 { font-family: var(--m360-font-heading); }
.m360-login-wrap-wide { max-width: 480px; }
.m360-login-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.m360-login-link { font-size: 12.5px; color: var(--m360-primary); text-decoration: none; font-weight: 600; }
.m360-login-switch { text-align: center; font-size: 13px; color: #6B7280; margin: 18px 0 0; }
.m360-login-switch a { color: var(--m360-primary); font-weight: 600; text-decoration: none; }
.m360-login-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6B7280; text-decoration: none; margin-bottom: 16px; }
.m360-login-back:hover { color: var(--m360-text); }
.m360-login-hint { font-size: 11.5px; color: #9CA3AF; margin: 6px 0 0; }
.m360-form-error-slot:empty { display: none; }
.m360-login-terms { margin-top: 10px; }
.m360-checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #6B7280; cursor: pointer; }
.m360-checkbox-row input { width: auto; margin-top: 2px; flex-shrink: 0; }
.m360-checkbox-row a { color: var(--m360-primary); text-decoration: none; font-weight: 600; }

.m360-code-inputs { display: flex; gap: 10px; justify-content: center; }
.m360-code-inputs input { width: 44px; height: 52px; text-align: center; font-size: var(--m360-campo-fs, 14px); font-family: var(--m360-font-mono); font-weight: 600; border: 1px solid #E5E7EB; border-radius: 10px; }
.m360-code-inputs input:focus { outline: 2px solid var(--m360-primary); }
.m360-resend-code { text-align: center; font-size: 12.5px; color: #6B7280; margin: 18px 0 0; }
.m360-resend-link { color: var(--m360-primary); font-weight: 600; text-decoration: none; }
.m360-resend-link.m360-resend-disabled { color: #9CA3AF; pointer-events: none; }
.m360-resend-count { font-family: var(--m360-font-mono); }

/* ---------------- Onboarding (bienvenida, plan, rubro, configuración, checklist) ---------------- */
.m360-onboarding-wrap { width: 100%; max-width: 640px; padding: 20px; }
.m360-onboarding-card { background: #fff; border-radius: 16px; padding: 36px 40px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.m360-onboarding-card.m360-onboarding-card-narrow { max-width: 460px; margin: 0 auto; }

.m360-stepper { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 26px; }
.m360-stepper-step { display: flex; align-items: center; gap: 6px; }
.m360-stepper-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--m360-bg); color: #9CA3AF; border: 1px solid var(--m360-border); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex-shrink: 0; }
.m360-stepper-step.done .m360-stepper-dot { background: var(--m360-success); border-color: var(--m360-success); color: #fff; }
.m360-stepper-step.actual .m360-stepper-dot { background: var(--m360-primary); border-color: var(--m360-primary); color: #fff; }
.m360-stepper-step span.m360-stepper-label { display: none; font-size: 11.5px; font-weight: 600; color: #9CA3AF; }
.m360-stepper-step.actual span.m360-stepper-label { color: var(--m360-text); }
.m360-stepper-line { width: 24px; height: 2px; background: var(--m360-border); flex-shrink: 0; }
.m360-stepper-step.done + .m360-stepper-line { background: var(--m360-success); }
@media (min-width: 560px) { .m360-stepper-step span.m360-stepper-label { display: inline; } }

.m360-onboarding-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--m360-primary); text-align: center; margin: 0 0 6px; }
.m360-onboarding-card h1 { font-size: 20px; margin: 0 0 6px; text-align: center; }
.m360-onboarding-card > p.m360-onboarding-lead { font-size: 13px; color: #6B7280; text-align: center; margin: 0 0 26px; }

.m360-welcome-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--m360-primary-light); color: var(--m360-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.m360-welcome-icon .m360-icon { width: 30px; height: 30px; }
.m360-welcome-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.m360-welcome-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--m360-text); }
.m360-welcome-list .m360-icon { width: 18px; height: 18px; color: var(--m360-primary); flex-shrink: 0; margin-top: 1px; }

.m360-plan-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 22px; }
@media (min-width: 560px) { .m360-plan-grid { grid-template-columns: 1fr 1fr; } }
.m360-plan-card { position: relative; border: 1.5px solid var(--m360-border); border-radius: 12px; padding: 16px 16px 14px; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.m360-plan-card:hover { border-color: var(--m360-primary); }
.m360-plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.m360-plan-card.selected { border-color: var(--m360-primary); box-shadow: 0 0 0 3px var(--m360-primary-light); }
.m360-plan-card-badge { position: absolute; top: -10px; right: 14px; background: var(--m360-primary); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.m360-plan-card-name { font-family: var(--m360-font-heading); font-size: 14.5px; font-weight: 700; margin: 0 0 2px; }
.m360-plan-card-precio { font-size: 20px; font-weight: 800; color: var(--m360-text); margin: 0 0 10px; }
.m360-plan-card-precio span { font-size: 12px; font-weight: 500; color: #9CA3AF; }
.m360-plan-card-detalle { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #6B7280; }
.m360-plan-card-detalle li { display: flex; align-items: center; gap: 6px; }
.m360-plan-card-detalle .m360-icon { width: 13px; height: 13px; color: var(--m360-success); flex-shrink: 0; }

.m360-rubro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
@media (min-width: 560px) { .m360-rubro-grid { grid-template-columns: repeat(3, 1fr); } }
.m360-rubro-card { position: relative; border: 1.5px solid var(--m360-border); border-radius: 12px; padding: 16px 10px; text-align: center; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.m360-rubro-card:hover { border-color: var(--m360-primary); }
.m360-rubro-card input { position: absolute; opacity: 0; pointer-events: none; }
.m360-rubro-card.selected { border-color: var(--m360-primary); box-shadow: 0 0 0 3px var(--m360-primary-light); }
.m360-rubro-card .m360-icon { width: 24px; height: 24px; color: var(--m360-primary); margin: 0 auto 8px; }
.m360-rubro-card-nombre { font-size: 12.5px; font-weight: 600; color: var(--m360-text); }

.m360-modulos-recomendados { background: var(--m360-bg); border-radius: 10px; padding: 12px 14px; margin-bottom: 22px; }
.m360-modulos-recomendados p { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: #6B7280; }
.m360-modulos-recomendados-list { display: flex; flex-wrap: wrap; gap: 6px; }
.m360-modulos-recomendados-list span { font-size: 11.5px; background: #fff; border: 1px solid var(--m360-border); padding: 3px 9px; border-radius: 999px; color: var(--m360-text); }

.m360-checklist { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.m360-checklist-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px; border-radius: 8px; }
.m360-checklist-item:hover { background: var(--m360-bg); }
.m360-checklist-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--m360-border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; margin-top: 1px; cursor: pointer; }
.m360-checklist-item.checked .m360-checklist-check { background: var(--m360-success); border-color: var(--m360-success); }
.m360-checklist-check svg { width: 13px; height: 13px; display: none; }
.m360-checklist-item.checked .m360-checklist-check svg { display: block; }
.m360-checklist-body { flex: 1; cursor: pointer; }
.m360-checklist-title { font-size: 13px; font-weight: 600; color: var(--m360-text); }
.m360-checklist-item.checked .m360-checklist-title { color: #9CA3AF; text-decoration: line-through; }
.m360-checklist-desc { font-size: 12px; color: #9CA3AF; margin-top: 1px; }
.m360-checklist-progress { margin-bottom: 18px; }
.m360-checklist-progress-label { display: flex; justify-content: space-between; font-size: 11.5px; color: #6B7280; margin-bottom: 6px; font-weight: 600; }

.m360-onboarding-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.m360-onboarding-skip { font-size: 12.5px; color: #9CA3AF; text-decoration: none; }
.m360-onboarding-skip:hover { color: var(--m360-text); }
.m360-onboarding-card .m360-btn-primary { min-width: 160px; justify-content: center; }


/* ---------------- Kanban (Tareas, Prospectos) ---------------- */
.m360-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
/* Variante con scroll horizontal, para tableros con más de 4 columnas
   (p. ej. el embudo de Prospectos) donde 1fr dejaría cada columna muy
   angosta. */
.m360-kanban-scroll { display: flex; gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.m360-kanban-scroll .m360-kanban-col { flex: 0 0 240px; }
.m360-kanban-col { background: var(--m360-bg); border: 1px solid var(--m360-border); border-radius: var(--m360-radius); padding: 12px; min-height: 200px; }
.m360-kanban-col-header { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.m360-kanban-col-body { display: flex; flex-direction: column; gap: 10px; min-height: 60px; border-radius: 8px; transition: background .12s; }
.m360-kanban-col-body.drag-over { background: var(--m360-primary-light); }
.m360-kanban-card { background: var(--m360-surface); border: 1px solid var(--m360-border); border-radius: 10px; padding: 12px; cursor: grab; box-shadow: var(--m360-shadow); }
.m360-kanban-card.dragging { opacity: .4; }
.m360-kanban-card-top { margin-bottom: 6px; }
.m360-kanban-card-title { font-size: 13.5px; font-weight: 600; margin: 0 0 6px; }
.m360-kanban-card-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--m360-text-muted); margin: 2px 0; }
.m360-kanban-empty { font-size: 12px; color: var(--m360-text-muted); text-align: center; padding: 14px 0; }
.m360-tarea-comentarios { max-height: 160px; overflow-y: auto; border: 1px solid var(--m360-border); border-radius: 8px; padding: 8px 10px; }
.m360-comentario { padding: 6px 0; border-bottom: 1px solid var(--m360-border); font-size: 12.5px; }
.m360-comentario:last-child { border-bottom: none; }
.m360-comentario p { margin: 3px 0 0; }
@media (max-width: 900px) { .m360-kanban { grid-template-columns: 1fr; } }

/* ==========================================================================
   Mapa de procesos: diagrama completo (no un tablero kanban) que arranca en
   "Necesidades y expectativas de las partes interesadas" (entrada) y cierra
   en "Satisfacción de las partes interesadas" (salida), con 3 franjas de
   nivel -Estratégicos / Operativos / Apoyo- y conectores visuales entre
   ellas. Las tarjetas de cada franja son 100% dinámicas: se agregan, editan
   y eliminan igual que en el organigrama de Colaboradores.
   ========================================================================== */
.m360-pmap-wrap { display: flex; align-items: stretch; gap: 6px; }
.m360-pmap-io {
	flex: 0 0 168px; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 6px; text-align: center; border-radius: var(--m360-radius); padding: 16px 14px; color: #fff;
}
.m360-pmap-io-in { background: linear-gradient(155deg, var(--m360-primary), var(--m360-primary-dark)); }
.m360-pmap-io-out { background: linear-gradient(155deg, var(--m360-success), #047857); }
.m360-pmap-io-eyebrow { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; opacity: .85; }
.m360-pmap-io-label { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.m360-pmap-flecha { flex: 0 0 26px; display: flex; align-items: center; justify-content: center; color: var(--m360-border); }
.m360-pmap-flecha .m360-icon { width: 22px; height: 22px; }
.m360-pmap-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.m360-pmap-banda { position: relative; border: 1px solid var(--m360-border); border-top-width: 4px; border-radius: var(--m360-radius); background: var(--m360-surface); padding: 12px 16px 16px; }
.m360-pmap-banda-estrategicos { border-top-color: #7C3AED; }
.m360-pmap-banda-operativos { border-top-color: #2563EB; }
.m360-pmap-banda-apoyo { border-top-color: #059669; }
.m360-pmap-banda-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.m360-pmap-banda-head .m360-chart-legend-dot { margin-top: 4px; flex-shrink: 0; }
.m360-pmap-banda-head-text { flex: 1; min-width: 0; }
.m360-pmap-banda-head-text strong { font-size: 13px; }
.m360-pmap-banda-head-text p { margin: 2px 0 0; font-size: 11px; color: var(--m360-text-muted); }
.m360-pmap-banda-head .m360-icon-btn { flex-shrink: 0; border: 1px solid var(--m360-border); border-radius: 8px; color: var(--m360-primary); padding: 5px; }
.m360-pmap-banda-head .m360-icon-btn:hover { background: var(--m360-primary-light); border-color: var(--m360-primary); }

.m360-pmap-cards-wrap { position: relative; }
.m360-pmap-flow-track { position: absolute; left: 0; right: 16px; top: 50%; height: 5px; margin-top: -2.5px; background: var(--m360-primary-light); border-radius: 3px; z-index: 0; }
.m360-pmap-flow-track::after { content: ''; position: absolute; right: -13px; top: 50%; margin-top: -7px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 13px solid var(--m360-primary-light); }
.m360-pmap-cards { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.m360-pmap-cards .m360-kanban-card { width: 202px; margin: 0; }
.m360-pmap-card-sub-count { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--m360-primary); margin-top: 4px; }
.m360-pmap-card-sub-count .m360-icon { width: 11px; height: 11px; }
.m360-pmap-empty { font-size: 12px; color: var(--m360-text-muted); padding: 6px 2px; }

.m360-procesos-card { cursor: pointer; transition: box-shadow .12s, border-color .12s, transform .12s; }
.m360-procesos-card:hover { border-color: var(--m360-primary); box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); }
.m360-procesos-card .m360-kanban-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.m360-subprocesos-list { display: flex; flex-direction: column; gap: 6px; }
.m360-subproceso-item {
	display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--m360-border);
	border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s;
}
.m360-subproceso-item:hover { border-color: var(--m360-primary); background: var(--m360-primary-light); }
.m360-subproceso-item-text { flex: 1; min-width: 0; }
.m360-subproceso-item-text strong { font-size: 12.5px; display: block; }
.m360-subproceso-item-text span { font-size: 11px; color: var(--m360-text-muted); }
.m360-subproceso-item .m360-icon { width: 14px; height: 14px; color: var(--m360-text-muted); flex-shrink: 0; }
.m360-subprocesos-add-btn { align-self: flex-start; }

.m360-pmap-conectores { display: flex; justify-content: space-evenly; padding: 0 36px; color: var(--m360-border); }
.m360-pmap-conectores .m360-icon { width: 15px; height: 15px; }
.m360-pmap-conectores-up .m360-icon { transform: rotate(180deg); }

@media (max-width: 960px) {
	.m360-pmap-wrap { flex-direction: column; }
	.m360-pmap-io { flex-direction: row; flex: 0 0 auto; padding: 10px 16px; }
	.m360-pmap-flecha { transform: rotate(90deg); flex: 0 0 22px; }
	.m360-pmap-cards .m360-kanban-card { width: 100%; }
}

/* ---------------- Calendario ---------------- */
.m360-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.m360-cal-grid-header { margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; color: var(--m360-text-muted); text-align: center; }
.m360-cal-cell { border: 1px solid var(--m360-border); border-radius: 8px; min-height: 92px; padding: 6px; background: var(--m360-surface); }
.m360-cal-cell-muted { opacity: .4; }
.m360-cal-cell-today { border-color: var(--m360-primary); box-shadow: inset 0 0 0 1px var(--m360-primary); }
.m360-cal-cell-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.m360-cal-add { background: none; border: none; color: var(--m360-text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 5px; border-radius: 4px; }
.m360-cal-add:hover { background: var(--m360-bg); color: var(--m360-primary); }
.m360-cal-events { display: flex; flex-direction: column; gap: 3px; }
.m360-cal-event { font-size: 10.5px; padding: 2px 6px; border-radius: 5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m360-cal-more { font-size: 10px; color: var(--m360-text-muted); padding-left: 4px; }
@media (max-width: 900px) {
	.m360-cal-cell { min-height: 70px; }
}
/*
 * EL MES ENTERO TIENE QUE ENTRAR EN LA PANTALLA.
 *
 * Acá había `minmax(60px, 1fr)` con `overflow-x: auto`: siete columnas
 * de 60px son 420px de ancho mínimo, y un teléfono común tiene 360. El
 * calendario salía cortado y había que arrastrarlo de lado, que es justo
 * lo que un calendario no puede pedir: la gracia de ver el mes es verlo
 * de una.
 *
 * Y el `overflow-x: auto` traía un segundo problema: al fijar el
 * desplazamiento en un eje, el navegador deja de mostrar lo que se sale
 * por el otro, así que cualquier menú que se abriera dentro de un día
 * quedaba recortado. Es el mismo error que ya se corrigió en las
 * tarjetas.
 *
 * Ahora las columnas se reparten lo que haya (`minmax(0, 1fr)`) y la
 * celda se compacta para que siga siendo legible y tocable.
 */
@media (max-width: 640px) {
	.m360-cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
	.m360-cal-cell { min-height: 58px; padding: 3px; border-radius: 6px; }
	.m360-cal-cell-header { font-size: 11px; margin-bottom: 2px; }
	.m360-cal-add { padding: 0 3px; font-size: 13px; }
	.m360-cal-event { font-size: 9.5px; padding: 1px 3px; border-radius: 4px; }
	.m360-cal-grid-header { font-size: 10px; margin: 10px 0 4px; }
}
@media (max-width: 900px) {
	.m360-sidebar { position: fixed; z-index: 90; height: 100%; transform: translateX(-100%); transition: transform .2s ease; }
	.m360-app.m360-mobile-open .m360-sidebar { transform: translateX(0); }
	.m360-mobile-toggle { display: flex; }
	.m360-grid-3 { grid-template-columns: 1fr; }
	.m360-form-row { grid-template-columns: 1fr; }
}

/* ---------------- Mapa de calor (Riesgos) ---------------- */
.m360-heatmap { display: flex; align-items: center; gap: 6px; }
.m360-heatmap-axis-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; color: var(--m360-text-muted); white-space: nowrap; }
.m360-heatmap-axis-x { text-align: center; font-size: 11px; color: var(--m360-text-muted); margin-top: 6px; }
.m360-heatmap-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; flex: 1; }
.m360-heatmap-cell { aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
.m360-plan-accion { font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--m360-border); }
.m360-plan-accion:last-child { border-bottom: none; }

/* ---------------- Tabs (Planeación Estratégica) ---------------- */
.m360-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--m360-border); padding-bottom: 0; }
.m360-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--m360-text-muted); cursor: pointer; }
.m360-tab:hover { color: var(--m360-text); }
.m360-tab.active { color: var(--m360-primary); border-bottom-color: var(--m360-primary); }

/* ================================================================
   PANTALLA MÓDULOS (Panel Admin): líneas B2C / B2B
   ================================================================
   Una tabla ancha con notas largas y una columna por paquete. Lo que
   ordena la lectura acá es la jerarquía: primero el módulo, después lo
   que cambia, y al final la inclusión por paquete —que se revisa de un
   vistazo y por eso va centrada—. En pantallas angostas la tabla deja
   de ser tabla: cada fila se vuelve una tarjeta con su etiqueta, para
   no obligar a arrastrar de lado. */

/* Pestañas de línea: son la navegación principal de la pantalla, así que
   pesan más que el filtro de rubro que va debajo. */
.m360-tabs-lineas { margin-bottom: 14px; gap: 4px; }
.m360-tabs-lineas .m360-tab { font-size: 14px; padding: 11px 18px; }

/* Ficha de la línea activa. */
.m360-linea-ficha { margin-bottom: 14px; }
.m360-linea-titulo {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
	margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--m360-text);
}
.m360-linea-sub { font-size: 12.5px; font-weight: 500; color: var(--m360-text-muted); }
.m360-linea-desc {
	margin: 0 0 12px; font-size: 12.5px; line-height: 1.55;
	color: var(--m360-text-muted); max-width: 78ch;
}
.m360-linea-paquetes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Chip de paquete: el color viene del propio paquete (variable --chip). */
.m360-paquete-chip {
	display: inline-flex; align-items: baseline; gap: 6px;
	padding: 5px 12px; border-radius: 999px;
	/* Respaldo primero: si el navegador no entiende color-mix, el chip
	   igual se ve como chip y no como texto suelto. */
	background: var(--m360-bg);
	border: 1px solid var(--m360-border);
	background: color-mix(in srgb, var(--chip) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--chip) 35%, transparent);
	line-height: 1.2;
}
.m360-paquete-nombre { font-size: 12.5px; font-weight: 700; color: var(--chip); }
.m360-paquete-n { font-size: 11.5px; color: var(--m360-text-muted); }

/* Barra de filtros por rubro + conteo. */
.m360-modulos-toolbar { margin-bottom: 12px; align-items: center; row-gap: 8px; }
.m360-tabs-chips { margin-bottom: 0; border-bottom: none; }
.m360-modulos-conteo {
	display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
	font-size: 12px; color: var(--m360-text-muted);
}
.m360-modulos-conteo strong { color: var(--m360-text); font-weight: 700; }
.m360-modulos-conteo .m360-sep { opacity: .45; }

.m360-modulos-scroll { overflow-x: auto; }
.m360-tabla-modulos { min-width: 940px; }
.m360-tabla-modulos th { white-space: nowrap; vertical-align: bottom; }
.m360-tabla-modulos td { vertical-align: top; }

/* Anchos: las notas se llevan el espacio sobrante; las columnas de
   paquete son estrechas porque solo dicen sí o no. */
.m360-tabla-modulos .col-modulo { width: 21%; min-width: 190px; }
.m360-tabla-modulos .col-nota { width: 24%; }
.m360-tabla-modulos .col-clave { width: 15%; }
.m360-tabla-modulos .col-paquete { width: 104px; text-align: center; white-space: nowrap; }

/* Nombre del módulo y su chip: en columna, para que un nombre largo no
   empuje el chip a una línea suelta y desalinee la fila. */
.m360-mod-celda { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.m360-mod-nombre { font-weight: 700; color: var(--m360-text); line-height: 1.3; }

.m360-tabla-modulos .col-clave code {
	font-size: 11.5px; color: var(--m360-text-muted);
	background: var(--m360-bg); border: 1px solid var(--m360-border);
	border-radius: 6px; padding: 2px 7px; display: inline-block; word-break: break-word;
}

.m360-nota { font-size: 12.5px; line-height: 1.5; color: var(--m360-text); }
.m360-nota-neutra { font-size: 12px; line-height: 1.5; color: var(--m360-text-muted); font-style: italic; }
.m360-no { color: var(--m360-text-muted); opacity: .55; }

/* Chips de estado. "Compartido" es información neutra, no un problema:
   antes usaba el rojo de "cancelado/vencido" y se leía como una alerta. */
.m360-chip {
	display: inline-flex; align-items: center; white-space: nowrap;
	font-size: 11px; font-weight: 700; letter-spacing: .02em;
	padding: 3px 9px; border-radius: 999px; line-height: 1.4;
}
.m360-chip.is-compartido { background: var(--m360-bg); color: var(--m360-text-muted); border: 1px solid var(--m360-border); }
.m360-chip.is-propio { background: var(--m360-primary-light, rgba(79,70,229,.10)); color: var(--m360-primary-dark, var(--m360-primary)); border: 1px solid transparent; }
.m360-chip.is-si { background: var(--m360-success-bg); color: var(--m360-success); }
.m360-chip.is-huerfano { background: var(--m360-bg); color: var(--m360-text-muted); border: 1px dashed var(--m360-border); }

.m360-row-grupo-n {
	display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
	background: var(--m360-surface); border: 1px solid var(--m360-border);
	font-size: 11px; color: var(--m360-text-muted); letter-spacing: 0;
}

/* --- Pantallas angostas: la tabla se vuelve una lista de tarjetas --- */
@media (max-width: 1024px) {
	.m360-modulos-scroll { overflow-x: visible; }
	.m360-tabla-modulos { min-width: 0; }
	.m360-tabla-modulos thead { display: none; }
	.m360-tabla-modulos, .m360-tabla-modulos tbody, .m360-tabla-modulos tr, .m360-tabla-modulos td { display: block; width: auto; }
	.m360-tabla-modulos tr:not(.m360-row-grupo) {
		border: 1px solid var(--m360-border); border-radius: 10px;
		padding: 10px 12px; margin-bottom: 10px; background: var(--m360-surface);
	}
	.m360-tabla-modulos tbody tr:hover { background: var(--m360-surface); }
	.m360-tabla-modulos td { border-bottom: none; padding: 4px 0; }
	/* Cada celda se presenta con el nombre de su columna. */
	.m360-tabla-modulos td[data-col]::before {
		content: attr(data-col);
		display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
		color: var(--m360-text-muted); margin-bottom: 2px;
	}
	.m360-tabla-modulos td.col-modulo::before { display: none; }
	.m360-tabla-modulos td.col-modulo { padding-bottom: 8px; }
	.m360-tabla-modulos td.col-modulo .m360-mod-celda { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
	.m360-tabla-modulos td.col-modulo .m360-mod-nombre { font-size: 14px; }
	/* Los paquetes, en línea: se leen como "Emprendedor: Incluido". */
	.m360-tabla-modulos td.col-paquete {
		display: inline-flex; align-items: center; gap: 6px;
		width: auto; text-align: left; margin: 6px 12px 0 0;
	}
	.m360-tabla-modulos td.col-paquete::before { margin-bottom: 0; }
	.m360-tabla-modulos tr.m360-row-grupo { padding: 0; margin: 14px 0 8px; }
	.m360-tabla-modulos tr.m360-row-grupo td { padding: 8px 12px; border-radius: 8px; }
}

@media (max-width: 560px) {
	.m360-tabs-lineas .m360-tab { flex: 1 1 auto; text-align: center; padding: 11px 10px; }
	.m360-modulos-toolbar { flex-direction: column; align-items: flex-start; }
	.m360-linea-desc { font-size: 12px; }
}

/* Fila que encabeza un grupo dentro de una tabla larga (Módulos): separa
   las áreas de la empresa para que la tabla se lea por bloques y no como
   una lista plana de treinta nombres. */
.m360-row-grupo td {
	background: var(--m360-bg);
	border-top: 1px solid var(--m360-border);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--m360-text-muted);
	padding-top: 10px;
	padding-bottom: 10px;
}
.m360-row-grupo td strong { color: var(--m360-text); letter-spacing: .2px; text-transform: none; font-size: 13px; }

/* ---------------- Canvas / FODA / PESTEL / Porter grids ---------------- */
.m360-canvas-grid { display: grid; gap: 12px; }
.m360-canvas-cols-2 { grid-template-columns: 1fr 1fr; }
.m360-canvas-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.m360-canvas-block label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--m360-text-muted); }
.m360-canvas-block textarea { width: 100%; border: 1px solid var(--m360-border); border-radius: 8px; padding: 10px; font-size: var(--m360-campo-fs, 14px); background: var(--m360-bg); color: var(--m360-text); resize: vertical; }
@media (max-width: 900px) { .m360-canvas-cols-2, .m360-canvas-cols-3 { grid-template-columns: 1fr; } }

/* ---------------- Objetivos e Indicadores: resumen y textos de ayuda ---------------- */
.m360-tool-hint { font-size: 12.5px; color: var(--m360-text-muted); margin: -6px 0 14px; max-width: 640px; line-height: 1.5; }
.m360-kpi-status { font-size: 11.5px; font-weight: 600; margin-top: 6px; }
.m360-kpi-status.on-track { color: var(--m360-success); }
.m360-kpi-status.mid { color: var(--m360-warning); }
.m360-kpi-status.off-track { color: var(--m360-danger); }
.m360-onboarding { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 10px; background: var(--m360-primary-bg, rgba(79,70,229,.07)); border: 1px solid var(--m360-border); margin-bottom: 16px; }
.m360-onboarding .m360-icon { width: 22px; height: 22px; color: var(--m360-primary); flex-shrink: 0; margin-top: 2px; }
.m360-onboarding h4 { margin: 0 0 4px; font-size: 13.5px; }
.m360-onboarding p { margin: 0; font-size: 12.5px; color: var(--m360-text-muted); line-height: 1.5; }

/* ---------------- Barra de progreso (Objetivos / Indicadores) ---------------- */
.m360-progress { height: 8px; border-radius: 999px; background: var(--m360-border); overflow: hidden; }
.m360-progress-bar { height: 100%; background: var(--m360-primary); border-radius: 999px; transition: width .4s ease; }
.m360-progress-sm { height: 5px; }

/* Vínculo Objetivos <-> Indicadores (módulo Planeamiento) */
.m360-vinculo-chip {
	display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 9px 1px 6px;
	border-radius: 999px; background: var(--m360-primary-light); color: var(--m360-primary);
	font-size: 10.5px; font-weight: 700; vertical-align: middle; max-width: 100%;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m360-vinculo-chip .m360-icon { width: 11px; height: 11px; }
.m360-vinculo-chip-proceso { background: #FEF3C7; color: #B45309; }
.m360-avance-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.m360-avance-meta + .m360-indicadores-lineas { margin-top: 6px; }
.m360-avance-auto-box {
	display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px;
	background: var(--m360-primary-light); border: 1px solid var(--m360-border);
}
.m360-avance-auto-txt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--m360-primary); }
.m360-avance-auto-txt .m360-icon { width: 14px; height: 14px; flex-shrink: 0; }
.m360-vinculo-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.m360-vinculo-item { display: grid; grid-template-columns: minmax(0,1fr) 90px 34px; align-items: center; gap: 10px; }
.m360-vinculo-nombre { font-size: 12.5px; color: var(--m360-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m360-vinculo-pct { font-size: 11.5px; font-weight: 700; color: var(--m360-text-muted); text-align: right; }

/* Una línea por cada indicador vinculado, dentro de las celdas
   "Indicador" / "Meta" / "Frecuencia" de la tabla de Objetivos (cuando
   un objetivo tiene más de un indicador vinculado, cada uno se ve en su
   propia línea, alineada entre columnas, en vez de mezclarse todos en
   un solo texto). */
.m360-indicadores-lineas { display: flex; flex-direction: column; gap: 2px; }
.m360-indicador-linea {
	font-size: 12px; line-height: 1.5; padding: 2px 0; border-bottom: 1px dashed var(--m360-border);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;
}
.m360-indicador-linea:last-child { border-bottom: none; }
.m360-estado-auto { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.m360-persona-mini { display: flex; align-items: center; gap: 8px; }
.m360-avatar-sm {
	width: 24px; height: 24px; border-radius: 50%; background: var(--m360-primary-light); color: var(--m360-primary);
	display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0;
}

.m360-kpi-mini { padding: 14px 16px; }

.m360-filtros-chip { display: flex; flex-wrap: wrap; gap: 8px; }
.m360-filter-chip {
	background: var(--m360-bg); color: var(--m360-text-muted); border: 1px solid var(--m360-border);
	font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.m360-filter-chip:hover { background: var(--m360-primary-light); color: var(--m360-primary); border-color: var(--m360-primary-light); }
.m360-filter-chip.activo { background: var(--m360-primary); color: #fff; border-color: var(--m360-primary); }

/* ---------------- Indicadores: fichas con diseño y gráficos ---------------- */
.m360-kpi-panel { background: transparent; border: none; box-shadow: none; padding: 0; }
.m360-grid-kpis-fichas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }

.m360-kpi-ficha {
	position: relative;
	background: var(--m360-surface);
	border: 1px solid var(--m360-border);
	border-radius: 16px;
	padding: 18px 20px 16px;
	box-shadow: var(--m360-shadow);
	border-top: 3px solid var(--m360-border);
	transition: box-shadow .15s, transform .15s;
	display: flex;
	flex-direction: column;
}
.m360-kpi-ficha:hover { box-shadow: 0 4px 14px rgba(16,24,40,.10), 0 2px 4px rgba(16,24,40,.06); transform: translateY(-1px); }
.m360-kpi-ficha.estado-on-track { border-top-color: var(--m360-success); }
.m360-kpi-ficha.estado-mid { border-top-color: var(--m360-warning); }
.m360-kpi-ficha.estado-off-track { border-top-color: var(--m360-danger); }

.m360-kpi-ficha-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.m360-kpi-ficha-icon {
	width: 40px; height: 40px; border-radius: 11px;
	display: flex; align-items: center; justify-content: center;
	background: var(--m360-primary-light); color: var(--m360-primary); flex-shrink: 0;
}
.m360-kpi-ficha-icon .m360-icon { width: 20px; height: 20px; }
.m360-kpi-ficha-ring { flex-shrink: 0; }
.m360-kpi-ficha-ring svg text { font-family: var(--m360-font); }

.m360-kpi-ficha-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.m360-badge-tipo { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.m360-badge-tipo.auto { background: var(--m360-info-bg); color: var(--m360-info); }
.m360-badge-tipo.manual { background: var(--m360-bg); color: var(--m360-text-muted); }

.m360-kpi-ficha-links { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--m360-text-muted); margin-top: 6px; }

.m360-kpi-ficha-value { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.m360-kpi-ficha-value .m360-kpi-value { font-size: 24px; font-weight: 700; line-height: 1; }
.m360-kpi-ficha-value .m360-kpi-target { font-size: 12.5px; color: var(--m360-text-muted); }

.m360-kpi-ficha .m360-progress { margin-top: 10px; }

.m360-kpi-ficha-spark { margin-top: 10px; height: 40px; line-height: 0; }

.m360-kpi-ficha-actions {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--m360-border);
}
.m360-kpi-ficha-actions .m360-btn { border-color: transparent; background: var(--m360-primary-light); color: var(--m360-primary); padding: 6px 10px; }
.m360-kpi-ficha-actions .m360-btn:hover { background: var(--m360-primary); color: #fff; }
.m360-kpi-ficha-actions .m360-btn .m360-icon { width: 14px; height: 14px; }
.m360-kpi-ficha-actions .m360-row-actions { gap: 0; }

/* Selector "manual / automático" del modal Nuevo/Editar indicador */
.m360-tipo-toggle { display: flex; gap: 8px; }
.m360-tipo-opcion {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
	padding: 9px 10px; border-radius: 9px; border: 1px solid var(--m360-border);
	background: var(--m360-surface); color: var(--m360-text-muted); font-size: 12.5px; font-weight: 600;
	cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.m360-tipo-opcion .m360-icon { width: 15px; height: 15px; }
.m360-tipo-opcion.activa { background: var(--m360-primary-light); color: var(--m360-primary); border-color: var(--m360-primary); }
.m360-tipo-opcion:hover:not(.activa) { border-color: var(--m360-text-muted); }

/* ---------------- Logo de la empresa (Mi Negocio) ---------------- */
.m360-logo-preview { width: 88px; height: 88px; border-radius: 12px; border: 1px dashed var(--m360-border); background: var(--m360-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.m360-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.m360-logo-preview span { font-size: 11px; color: var(--m360-text-muted); }

/* ---------------- Filas de "agregar ítem" en Cotizaciones (más amigables) ---------------- */
.m360-combo { position: relative; }
.m360-combo-input { width: 100%; padding: 8px 10px; border: 1px solid var(--m360-border); border-radius: 8px; font-size: var(--m360-campo-fs, 14px); background: var(--m360-bg); color: var(--m360-text); }
.m360-combo-input:focus { outline: 2px solid var(--m360-primary); outline-offset: 1px; }
.m360-combo-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; display: flex; flex-direction: column; background: var(--m360-surface); border: 1px solid var(--m360-border); border-radius: 8px; max-height: 260px; z-index: 150; box-shadow: var(--m360-shadow); overflow: hidden; }
.m360-combo-list { overflow-y: auto; }
.m360-combo-option { padding: 8px 10px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--m360-border); }
.m360-combo-option:last-child { border-bottom: none; }
.m360-combo-option:hover, .m360-combo-option.active { background: var(--m360-primary-light); }
.m360-combo-sub { color: var(--m360-text-muted); font-size: 11.5px; display: block; }
.m360-combo-empty { padding: 10px; color: var(--m360-text-muted); font-size: 12.5px; }
.m360-combo-crear { padding: 9px 10px; color: var(--m360-primary); font-weight: 600; font-size: 12.5px; cursor: pointer; border-top: 1px solid var(--m360-border); background: var(--m360-surface); flex-shrink: 0; }
.m360-combo-crear:hover { background: var(--m360-primary-light); }
.m360-linea-libre-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 8px; align-items: end; }
.m360-linea-libre-grid-3 { grid-template-columns: 2fr 1fr auto; }

/* ---- Modal grande con header/body/footer fijos (usado en Nueva cotización) ---- */
.m360-modal-flex { display: flex; flex-direction: column; padding: 0; max-height: 88vh; overflow: hidden; border-radius: var(--m360-radius); }
.m360-modal-flex .m360-modal-header {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
	padding: 18px 22px; border-bottom: 1px solid var(--m360-border); flex-shrink: 0;
}
.m360-modal-flex .m360-modal-header h2 { margin: 0; font-size: 17px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.m360-modal-flex .m360-modal-subtitle { margin: 4px 0 0; font-size: 12.5px; color: var(--m360-text-muted); }
.m360-modal-close { background: none; border: none; cursor: pointer; color: var(--m360-text-muted); padding: 6px; border-radius: 8px; display: flex; flex-shrink: 0; }
.m360-modal-close:hover { background: var(--m360-bg); color: var(--m360-text); }
.m360-modal-close svg { width: 18px; height: 18px; }
.m360-modal-flex > form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.m360-modal-flex .m360-modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.m360-modal-flex .m360-modal-footer {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 22px; border-top: 1px solid var(--m360-border); flex-shrink: 0; background: var(--m360-surface); flex-wrap: wrap;
}
.m360-modal-footer-actions { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.m360-modal-footer-total { font-size: 13px; color: var(--m360-text-muted); }
.m360-modal-footer-total strong { font-size: 16px; color: var(--m360-text); margin-left: 4px; }

.m360-form-section { margin-bottom: 20px; }
.m360-form-section:last-child { margin-bottom: 0; }
.m360-form-section-title {
	font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--m360-text-muted); margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.m360-item-count-badge { background: var(--m360-primary-light); color: var(--m360-primary); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; }

.m360-add-item-bar { background: var(--m360-bg); border: 1px solid var(--m360-border); border-radius: 10px; padding: 12px; }

.m360-cot-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 720px) { .m360-cot-footer-grid { grid-template-columns: 1fr; } }

.m360-totales-box { background: var(--m360-bg); border: 1px solid var(--m360-border); border-radius: 10px; padding: 14px 16px; }
.m360-totales-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--m360-text-muted); padding: 2px 0; }
.m360-totales-row.descuento { color: var(--m360-danger); }
.m360-totales-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; font-weight: 700; color: var(--m360-text); border-top: 1px solid var(--m360-border); margin-top: 8px; padding-top: 8px; }

.m360-qty-input { width: 64px; padding: 5px 6px; border: 1px solid var(--m360-border); border-radius: 6px; font-size: var(--m360-campo-fs, 14px); background: var(--m360-surface); color: var(--m360-text); text-align: center; }
.m360-qty-input:focus { outline: 2px solid var(--m360-primary); outline-offset: 1px; }
.m360-row-remove-btn { background: none; border: none; cursor: pointer; color: var(--m360-text-muted); padding: 5px; border-radius: 6px; display: inline-flex; flex-shrink: 0; }
.m360-row-remove-btn:hover { background: var(--m360-danger-bg); color: var(--m360-danger); }
.m360-row-remove-btn svg { width: 15px; height: 15px; }

.m360-descuento-box { background: var(--m360-bg); border: 1px solid var(--m360-border); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.m360-descuento-box-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--m360-text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.m360-descuento-box-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m360-descuento-box-row select,
.m360-descuento-box-row input {
	padding: 9px 11px; border: 1px solid var(--m360-border); border-radius: 8px; font-size: var(--m360-campo-fs, 14px);
	background: var(--m360-surface); color: var(--m360-text);
}
.m360-descuento-box-row select:focus,
.m360-descuento-box-row input:focus { outline: 2px solid var(--m360-primary); outline-offset: 1px; }
.m360-descuento-box-row select { flex: 0 0 auto; width: auto; }
.m360-descuento-box-row input { flex: 0 1 110px; width: 110px; }
.m360-descuento-preview { font-size: 13px; font-weight: 700; color: var(--m360-danger); margin-left: auto; }

@media (max-width: 640px) {
	.m360-linea-libre-grid { grid-template-columns: 1fr 1fr; }
	.m360-modal-flex .m360-modal-header, .m360-modal-flex .m360-modal-body, .m360-modal-flex .m360-modal-footer { padding-left: 16px; padding-right: 16px; }
}
.m360-linea-libre-grid .m360-mini-label { display: block; font-size: 11px; font-weight: 600; color: var(--m360-text-muted); margin-bottom: 4px; }
.m360-mini-label { display: block; font-size: 11px; font-weight: 600; color: var(--m360-text-muted); margin-bottom: 4px; }
.m360-linea-libre-grid input, .m360-linea-libre-grid select { width: 100%; padding: 8px 10px; border: 1px solid var(--m360-border); border-radius: 8px; font-size: var(--m360-campo-fs, 14px); background: var(--m360-bg); color: var(--m360-text); }
.m360-linea-libre-grid .m360-btn { white-space: nowrap; }
@media (max-width: 700px) {
	.m360-linea-libre-grid, .m360-linea-libre-grid-3 { grid-template-columns: 1fr; }
}

/* Proveedores: celdas truncadas y acciones mixtas (botón de texto + íconos) */
.m360-truncate-cell { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.m360-row-actions-mixed { gap: 8px; }

/* Proveedores: modal de información completa (solo lectura) */
.m360-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.m360-detail-grid.m360-detail-grid-1 { grid-template-columns: 1fr; }
.m360-detail-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.m360-detail-label { font-size: 11.5px; font-weight: 600; color: var(--m360-text-muted); }
.m360-detail-value { font-size: 13.5px; color: var(--m360-text); word-break: break-word; white-space: pre-line; }
.m360-detail-notas { font-size: 13.5px; color: var(--m360-text); line-height: 1.5; margin: 0; white-space: pre-line; }
@media (max-width: 560px) {
	.m360-detail-grid { grid-template-columns: 1fr; }
}

/* Colaboradores: organigrama de "Perfiles de Puestos" (árbol CSS puro) */
.m360-orgchart-wrap { overflow-x: auto; padding: 24px 12px; }
.m360-orgchart, .m360-orgchart ul { display: flex; justify-content: center; padding-top: 24px; position: relative; }
.m360-orgchart { margin: 0; }
.m360-orgchart ul { margin: 0; padding-left: 0; }
.m360-orgchart li { display: flex; flex-direction: column; align-items: center; list-style-type: none; position: relative; padding: 24px 10px 0 10px; }
.m360-orgchart li::before, .m360-orgchart li::after {
	content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid var(--m360-border); width: 50%; height: 24px;
}
.m360-orgchart li::after { right: auto; left: 50%; border-left: 2px solid var(--m360-border); }
.m360-orgchart li:only-child::after, .m360-orgchart li:only-child::before { display: none; }
.m360-orgchart li:only-child { padding-top: 0; }
.m360-orgchart li:first-child::before, .m360-orgchart li:last-child::after { border: 0 none; }
.m360-orgchart li:last-child::before { border-right: 2px solid var(--m360-border); border-radius: 0 6px 0 0; }
.m360-orgchart li:first-child::after { border-radius: 6px 0 0 0; }
.m360-orgchart > li { padding-top: 0; }
.m360-orgchart > li::before, .m360-orgchart > li::after { display: none; }
.m360-orgchart ul::before {
	content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--m360-border); width: 0; height: 24px;
}
.m360-org-node {
	display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 150px; max-width: 200px;
	border: 1px solid var(--m360-border); border-radius: 10px; background: var(--m360-surface); box-shadow: var(--m360-shadow);
}
.m360-org-node-body { cursor: pointer; padding: 10px 12px 6px 12px; text-align: center; }
.m360-org-node-nombre { font-size: 13px; font-weight: 700; color: var(--m360-text); line-height: 1.3; }
.m360-org-node-area { font-size: 11px; color: var(--m360-text-muted); margin-top: 2px; }
.m360-org-node-actions { display: flex; justify-content: center; gap: 4px; border-top: 1px solid var(--m360-border); padding: 4px; }
.m360-org-node-actions a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--m360-text-muted); text-decoration: none; }
.m360-org-node-actions a:hover { background: var(--m360-bg); color: var(--m360-text); }
.m360-org-node-actions a.m360-org-del:hover { color: var(--m360-danger); }
.m360-org-node-actions svg, .m360-org-node-actions i { width: 14px; height: 14px; }

/* ==========================================================================
   Sistema de Diseño vivo (#/sistema/...) — estilos propios de esta pantalla,
   reutilizando en lo posible las clases ya existentes (m360-card, m360-pill,
   m360-table, m360-badge-soon) para no duplicar el lenguaje visual.
   ========================================================================== */
.m360-ds-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px solid var(--m360-border); padding-bottom: 0; }
.m360-ds-tab { font: inherit; font-size: 13px; font-weight: 600; padding: 10px 14px; border: none; background: none; color: var(--m360-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.m360-ds-tab:hover { color: var(--m360-text); }
.m360-ds-tab.active { color: var(--m360-primary); border-bottom-color: var(--m360-primary); }

.m360-ds-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.m360-ds-swatch { border: 1px solid var(--m360-border); border-radius: var(--m360-radius); overflow: hidden; background: var(--m360-surface); }
.m360-ds-swatch-color { height: 64px; }
.m360-ds-swatch-meta { padding: 10px 12px; }
.m360-ds-swatch-meta strong { display: block; font-size: 12.5px; }
.m360-ds-swatch-meta span { display: block; font-family: var(--m360-font-mono); font-size: 11px; color: var(--m360-text-muted); margin-top: 2px; }

.m360-ds-type-row { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--m360-border); }
.m360-ds-type-row:last-child { border-bottom: none; }
.m360-ds-type-meta { flex: 0 0 200px; font-size: 12px; color: var(--m360-text-muted); font-family: var(--m360-font-mono); }
.m360-ds-type-sample { flex: 1; min-width: 0; }

.m360-ds-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.m360-ds-icon-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--m360-border); border-radius: 10px; background: var(--m360-surface); }
.m360-ds-icon-tile span { font-size: 10px; color: var(--m360-text-muted); text-align: center; word-break: break-all; }

.m360-ds-comp-block { margin-bottom: 28px; }
.m360-ds-comp-block h3 { font-family: var(--m360-font-heading); font-size: 14px; margin: 0 0 12px; }
.m360-ds-comp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px; background: var(--m360-bg); border-radius: var(--m360-radius); }

.m360-navmap { display: flex; flex-direction: column; gap: 18px; }
.m360-navmap-group { border: 1px solid var(--m360-border); border-radius: var(--m360-radius); background: var(--m360-surface); overflow: hidden; }
.m360-navmap-group-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--m360-bg); border-bottom: 1px solid var(--m360-border); }
.m360-navmap-group-header strong { font-family: var(--m360-font-heading); font-size: 13.5px; }
.m360-navmap-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--m360-border); }
.m360-navmap-item { background: var(--m360-surface); padding: 12px 16px; font-size: 12.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m360-navmap-item.is-locked { color: var(--m360-text-muted); }
.m360-navmap-item.is-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--m360-success); flex-shrink: 0; margin-right: 6px; }
.m360-navmap-item.is-locked::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--m360-border); flex-shrink: 0; margin-right: 6px; }
.m360-navmap-item-label { display: flex; align-items: center; }
.m360-badge-fase { font-size: 9.5px; font-weight: 600; background: var(--m360-bg); color: var(--m360-text-muted); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--m360-border); white-space: nowrap; }

/* ================================================================
 * RESPONSIVE INTEGRAL (panel SaaS) — gestión cómoda desde el móvil
 * ================================================================ */
.m360-card { max-width: 100%; }
@media (max-width: 900px) {
	.m360-table { min-width: 560px; }
	.m360-toolbar { flex-wrap: wrap; gap: 8px; }
	.m360-search { flex: 1 1 100%; }
}
@media (max-width: 640px) {
	.m360-modal-overlay { padding: 0; align-items: flex-end; }
	.m360-modal { max-width: 100%; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
	.m360-modal-actions, .m360-modal-footer-actions { flex-direction: column-reverse; width: 100%; }
	.m360-modal-actions .m360-btn, .m360-modal-footer-actions .m360-btn { width: 100%; justify-content: center; }
	.m360-table { font-size: 12.5px; }
	.m360-btn, .m360-icon-btn, select, input[type="text"], input[type="number"],
	input[type="tel"], input[type="email"] { min-height: 40px; }
}

/* Las acciones de fila (ver / editar / eliminar) SIEMPRE en fila horizontal,
   en cualquier ancho de pantalla. Nunca apiladas en vertical. */
.m360-row-actions { flex-direction: row !important; flex-wrap: nowrap; }


/* ================================================================
 * LISTA DE CASILLAS  ·  "Módulos incluidos" y similares
 * ================================================================
 * Todo alineado a la izquierda y en columna: al revisar veinte
 * módulos, el ojo baja por una sola línea vertical de cuadritos en
 * vez de buscar dónde empieza cada uno.
 */
.m360-check-lista {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	margin-top: 4px;
}
/*
 * ESPECIFICIDAD: por qué el selector va escrito con su ancestro.
 *
 * `.m360-form-group label` (una clase + un elemento) le gana a
 * `.m360-check` (una clase sola) sin importar el orden en el archivo, y
 * le impone `display: block`. Con eso el `gap` no hace nada y el texto
 * queda pegado al cuadrito.
 *
 * Es la MISMA trampa que ya se había resuelto en el selector segmentado
 * del ERP. Queda anotada en CONTINUIDAD: al estilar un <label> que vive
 * dentro de un .m360-form-group, hay que nombrar el ancestro.
 */
.m360-check,
.m360-form-group .m360-check-lista .m360-check {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin: 0;
	padding: 6px 8px;
	border-radius: 6px;
	font-weight: 400;
	font-size: 13.5px;
	color: var(--m360-text);
	text-align: left;
	cursor: pointer;
}
.m360-check:hover { background: var(--m360-bg); }
.m360-check > span { flex: 1 1 auto; min-width: 0; }

/* En pantalla ancha caben dos columnas: una lista de veinte módulos
   en una sola columna obliga a desplazarse por todo el modal. */
@media (min-width: 620px) {
	.m360-check-lista,
	.m360-form-group .m360-check-lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
}

/* ================================================================
 * ETIQUETA DE MÓDULO CON ACCIÓN
 * ================================================================
 * Los módulos del plan se pueden quitar a una empresa concreta y
 * devolver después. Un módulo quitado no desaparece de la lista: se
 * muestra apagado, porque saber QUÉ se le quitó es tan útil como
 * saber qué tiene.
 */
.m360-pill-apagado {
	background: var(--m360-bg);
	color: var(--m360-text-muted);
	border: 1px dashed var(--m360-border);
	text-decoration: line-through;
}
.m360-pill-accion {
	border: none; background: none; cursor: pointer;
	padding: 0; line-height: 1; color: inherit;
	font-size: 15px; opacity: .65;
}
.m360-pill-accion:hover { opacity: 1; }

/* ---------------------------------------------------------------------
   RESPALDOS (Panel Admin SaaS)

   Misma pieza visual que en el panel del negocio, y a propósito: son la
   misma pantalla con distinto alcance, así que tienen que verse igual.
   El aviso de alcance lleva acento porque lo que dice hay que leerlo
   antes de confiar en el resto.
   --------------------------------------------------------------------- */
.m360-respaldo-aviso { border-left: 3px solid var(--m360-primary); margin-bottom: 16px; }
.m360-respaldo-aviso h3 { margin: 0 0 8px; font-size: 15px; }
.m360-respaldo-aviso p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--m360-text); }
.m360-respaldo-aviso p:last-child { margin-bottom: 0; }

.m360-respaldo-problema { border-left: 3px solid var(--m360-danger); margin-bottom: 16px; }
.m360-respaldo-problema h3 { margin: 0 0 8px; font-size: 15px; color: var(--m360-danger); }
.m360-respaldo-problema ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }