/* ============================================================
   Forecast Aramark · design system
   Panel de control moderno (mismo lenguaje que Gestión de Datos Seguros):
   fondo gris azulado, superficies blancas con sombra suave, menú lateral
   pizarra oscuro, índigo como color de acción y estados con fondo pastel.
   El rojo Aramark queda para la marca (logo) y los errores.
   ============================================================ */
:root {
  /* Acción (índigo) */
  --fc-primario: #4F46E5;
  --fc-primario-500: #6366F1;
  --fc-primario-400: #A5B4FC;
  --fc-primario-100: #E0E7FF;
  --fc-primario-50: #EEF2FF;
  --fc-primario-ink: #3730A3;
  --fc-cian: #06B6D4;

  /* Fondo y superficies */
  --fc-bg: #F4F6FB;
  --fc-superficie: #FFFFFF;
  --fc-superficie-2: #F8FAFC;
  --fc-borde: #E2E8F0;
  --fc-borde-suave: #EEF2F7;

  /* Menú lateral oscuro */
  --fc-lateral: #0D1424;
  --fc-lateral-2: #111B31;
  --fc-lateral-texto: #94A3B8;
  --fc-lateral-hover: #E2E8F0;
  --fc-lateral-activo: #1E293B;
  --fc-lateral-seccion: #64748B;
  --fc-topbar: #1E293B;          /* barra superior, más tenue que el lateral */
  --fc-alto-topbar: 56px;

  /* Texto */
  --fc-tinta: #0F172A;
  --fc-texto: #1E293B;
  --fc-suave: #475569;

  /* Estados */
  --fc-ok: #047857;      --fc-ok-50: #D1FAE5;
  --fc-ambar: #B45309;   --fc-ambar-50: #FEF3C7;
  --fc-rojo: #B91C1C;    --fc-rojo-50: #FEE2E2;
  --fc-info: #1D4ED8;    --fc-info-50: #DBEAFE;
  --fc-gris: #475569;    --fc-gris-50: #EEF2F7;

  /* Marca Aramark (solo logo y alertas) */
  --fc-aramark: #E4002B;

  --fc-radio: 14px;
  --fc-radio-sm: 10px;
  --fc-sombra: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .06);
  --fc-sombra-lg: 0 8px 30px rgba(15, 23, 42, .14);

  --bs-primary: #4F46E5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: #1E293B;
  --bs-secondary-color: #475569;
  --bs-border-color: #E2E8F0;
}

/* ---------- Base ---------- */
body, .page-content { background: var(--fc-bg) !important; font-family: var(--bs-body-font-family); color: var(--fc-texto); font-size: 14px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h4, .h5 { font-family: var(--bs-body-font-family); color: var(--fc-tinta); font-weight: 700; letter-spacing: -.01em; }
.text-muted { color: var(--fc-suave) !important; }
a { color: var(--fc-primario); text-decoration: none; }
a:hover { color: var(--fc-primario-ink); }

/* ---------- Topbar: pizarra un tono más claro que el lateral y más baja (56 px) ---------- */
#page-topbar { background: var(--fc-topbar); border-bottom: 1px solid rgba(255, 255, 255, .06); box-shadow: none; }
.navbar-header { height: var(--fc-alto-topbar); }
.header-item { height: var(--fc-alto-topbar); }
.vertical-menu { top: var(--fc-alto-topbar); }
.page-content { padding-top: calc(var(--fc-alto-topbar) + 24px); }
.header-item, #page-header-user-dropdown, #page-header-user-dropdown .fw-semibold { color: #E2E8F0; }
#page-header-user-dropdown .text-muted, #page-header-user-dropdown i { color: var(--fc-lateral-texto) !important; }
.fc-avatar { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--fc-primario), var(--fc-primario-500)); color: #FFF; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
#btn-ayuda { color: var(--fc-lateral-texto); font-weight: 600; }
#btn-ayuda:hover { color: #FFFFFF; }

/* ---------- Menú lateral ---------- */
.navbar-brand-box { height: var(--fc-alto-topbar); display: flex; align-items: center; background: var(--fc-lateral) !important; border-right: 0 !important; }
.navbar-brand-box .logo { line-height: 1; }
.fc-marca { font-weight: 800; color: #FFFFFF; font-size: 16px; letter-spacing: -.01em; }
#vertical-menu-btn { color: var(--fc-lateral-texto); }
#vertical-menu-btn:hover { color: #FFFFFF; }
body[data-sidebar-size="sm"] #vertical-menu-btn { color: var(--fc-lateral-texto); }

.vertical-menu { background: linear-gradient(180deg, var(--fc-lateral), var(--fc-lateral-2)); border-right: 0; box-shadow: none; }
#sidebar-menu ul { padding: 0 10px; }
#sidebar-menu .menu-title { color: var(--fc-lateral-seccion); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#sidebar-menu ul li a { color: var(--fc-lateral-texto); font-size: 13.5px; font-weight: 500; border-radius: var(--fc-radio-sm); transition: background .12s, color .12s; }
#sidebar-menu ul li a i { color: var(--fc-lateral-texto); min-width: 1.9rem; font-size: 1.15rem; }
#sidebar-menu ul li a:hover { background: rgba(255, 255, 255, .05); }
#sidebar-menu ul li a:hover, #sidebar-menu ul li a:hover i { color: var(--fc-lateral-hover) !important; }
#sidebar-menu ul li.mm-active > a, #sidebar-menu ul li a.active { color: #FFFFFF !important; background: var(--fc-lateral-activo); font-weight: 600; box-shadow: inset 3px 0 0 var(--fc-primario-500); }
#sidebar-menu ul li.mm-active > a i, #sidebar-menu ul li a.active i { color: var(--fc-primario-400) !important; }
.fc-sidebar-pie { padding: 14px 24px; border-top: 1px solid rgba(255, 255, 255, .07); margin-top: 24px; }
.fc-sidebar-pie .text-muted { color: var(--fc-lateral-seccion) !important; }
body[data-sidebar-size="sm"] .fc-sidebar-pie, body[data-sidebar-size="sm"] .fc-marca { display: none; }

/* Menú contraído: logo e íconos centrados en la franja de 70 px de ancho */
body[data-sidebar-size="sm"] .navbar-brand-box { padding: 0; justify-content: center; }
body[data-sidebar-size="sm"] .navbar-brand-box .logo { justify-content: center; gap: 0; }
body[data-sidebar-size="sm"] .navbar-brand-box img { height: 28px; }
body[data-sidebar-size="sm"] #sidebar-menu ul { padding: 0 8px; }
body[data-sidebar-size="sm"] #sidebar-menu > ul > li > a { display: flex; justify-content: center; align-items: center; padding: 14px 0; }
body[data-sidebar-size="sm"] #sidebar-menu > ul > li > a i { min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 1.3rem; line-height: 1; }
/* Menú contraído: al pasar el mouse la opción se despliega como etiqueta oscura (el tema la pinta gris claro) */
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a {
  justify-content: flex-start; gap: 14px; padding: 14px 20px 14px 16px; width: auto; min-width: 250px;
  background: var(--fc-lateral-activo) !important; color: #FFFFFF !important; border-radius: var(--fc-radio-sm); box-shadow: var(--fc-sombra-lg);
}
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a i { color: var(--fc-primario-400) !important; }
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a span { padding-left: 0; font-weight: 600; white-space: nowrap; }

.footer { background: transparent; border-top: 1px solid var(--fc-borde-suave); color: var(--fc-suave); }

/* ---------- Botones y controles ---------- */
.btn { border-radius: var(--fc-radio-sm); font-weight: 600; font-size: 13.5px; }
.btn-primary { --bs-btn-bg: #4F46E5; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #4338CA; --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: #4338CA; --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: #4F46E5; --bs-btn-disabled-border-color: transparent;
  background: linear-gradient(135deg, var(--fc-primario), var(--fc-primario-500)); border-color: transparent; color: #FFF; box-shadow: 0 2px 10px rgba(99, 102, 241, .35); }
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.08); color: #FFF; }
.btn-outline-primary { --bs-btn-color: #4F46E5; --bs-btn-border-color: #A5B4FC; --bs-btn-hover-bg: #EEF2FF; --bs-btn-hover-color: #3730A3; --bs-btn-hover-border-color: #A5B4FC; --bs-btn-active-bg: #E0E7FF; --bs-btn-active-color: #3730A3; }
.btn-light { background: var(--fc-superficie); border: 1px solid var(--fc-borde); color: var(--fc-tinta); }
.btn-light:hover { border-color: var(--fc-primario-400); color: var(--fc-primario); background: var(--fc-superficie); }
.btn-acento { background: var(--fc-tinta); border-color: var(--fc-tinta); color: #FFF; }
.btn-acento:hover { background: #1E293B; border-color: #1E293B; color: #FFF; }
.btn-link { color: var(--fc-primario); font-weight: 600; text-decoration: none; }
.form-control, .form-select { border: 1.5px solid var(--fc-borde); border-radius: var(--fc-radio-sm); color: var(--fc-tinta); background-color: var(--fc-superficie); }
.form-control:focus, .form-select:focus { border-color: var(--fc-primario-500); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.form-control::placeholder { color: #64748B; }
.form-label { font-weight: 600; color: var(--fc-texto); font-size: 12.5px; }
.form-check-input:checked { background-color: var(--fc-primario); border-color: var(--fc-primario); }

/* ---------- Encabezado de página ---------- */
.fc-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.fc-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-primario); }
.fc-titulo h4 { margin: 4px 0 0; font-size: 22px; font-weight: 700; color: var(--fc-tinta); }
.fc-titulo p { margin: 4px 0 0; color: var(--fc-suave); max-width: 90ch; }

/* ---------- Barra de filtros ---------- */
.fc-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--fc-superficie); border: 1px solid var(--fc-borde-suave); border-radius: var(--fc-radio); box-shadow: var(--fc-sombra); padding: 14px 16px; margin-bottom: 20px; }
.fc-filtros .form-select { min-width: 200px; }
.fc-filtros .fc-estado-periodo { margin-left: auto; }

/* ---------- Tarjetas ---------- */
.card { background: var(--fc-superficie); border: 1px solid var(--fc-borde-suave); border-radius: var(--fc-radio); box-shadow: var(--fc-sombra); }
.card-header { background: var(--fc-superficie); border-bottom: 1px solid var(--fc-borde-suave); border-radius: var(--fc-radio) var(--fc-radio) 0 0 !important; }
.card-title { font-size: 15px; font-weight: 700; color: var(--fc-tinta); }
.card-body, .modal-body, .list-group-item, .dropdown-item { color: var(--fc-texto); }
.modal-content { border: 0; border-radius: var(--fc-radio); box-shadow: var(--fc-sombra-lg); }
.fc-kpi { padding: 18px 20px; }
.fc-kpi .fc-kpi-label { font-size: 12px; font-weight: 600; color: var(--fc-suave); }
.fc-kpi .fc-kpi-valor { font-size: 24px; font-weight: 800; color: var(--fc-tinta); margin: 6px 0 4px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fc-kpi .fc-kpi-sub { font-size: 12.5px; color: var(--fc-suave); }
.fc-kpi.fc-kpi-destacado { border-top: 3px solid var(--fc-primario-500); }

/* ---------- Estados (chips con fondo pastel, siempre con texto) ---------- */
.fc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 0; }
.fc-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fc-pill-validado, .fc-pill-abierto, .fc-pill-reabierto { background: var(--fc-ok-50); color: var(--fc-ok); }
.fc-pill-ingresado { background: var(--fc-primario-100); color: var(--fc-primario-ink); }
.fc-pill-pendiente, .fc-pill-programado { background: var(--fc-ambar-50); color: var(--fc-ambar); }
.fc-pill-cero, .fc-pill-cerrado { background: var(--fc-gris-50); color: var(--fc-gris); }
.fc-delta-pos { color: var(--fc-ok); font-weight: 600; }
.fc-delta-neg { color: var(--fc-rojo); font-weight: 600; }

/* ---------- Tablas ---------- */
.table { --bs-table-bg: transparent; color: var(--fc-texto); font-size: 13.5px; }
.table > :not(caption) > * > * { padding: .65rem .75rem; color: var(--fc-texto); }
.table thead th { background: var(--fc-superficie-2); color: var(--fc-suave); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-bottom: 1px solid var(--fc-borde); white-space: nowrap; }
.table td, .table th { border-color: var(--fc-borde-suave); vertical-align: middle; }
.table tbody tr { transition: background .1s; }
.table tbody tr:hover > td { background: var(--fc-primario-50); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-fila-supra td { background: var(--fc-primario-50) !important; color: var(--fc-primario-ink) !important; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.fc-fila-cat td { background: var(--fc-superficie-2) !important; font-weight: 600; color: var(--fc-tinta) !important; }
.fc-fila-total td { font-weight: 700; background: var(--fc-superficie-2) !important; color: var(--fc-tinta) !important; }
.fc-fila-margen td { font-weight: 700; background: var(--fc-ok-50) !important; }
.table .fc-fila-noaplica td { color: #94A3B8; }
.fc-input { max-width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.fc-fuente { white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--fc-gris); background: var(--fc-gris-50); border-radius: 6px; padding: 2px 7px; }
tr.fc-modificada td { background: #FFFBEB !important; }

/* ---------- Progreso ---------- */
.fc-progreso { height: 8px; border-radius: 999px; background: var(--fc-borde-suave); overflow: hidden; min-width: 120px; }
.fc-progreso > span { display: block; height: 100%; background: linear-gradient(90deg, var(--fc-primario), var(--fc-cian)); border-radius: 999px; }
.fc-progreso.bajo > span { background: #F59E0B; }

/* ---------- Árbol de estructura ---------- */
.fc-supra { border: 1px solid var(--fc-borde-suave); border-radius: var(--fc-radio); margin-bottom: 16px; overflow: hidden; background: var(--fc-superficie); }
.fc-supra-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--fc-superficie-2); }
.fc-supra-head h5 { margin: 0; color: var(--fc-tinta); font-weight: 700; }
.fc-cat-titulo { padding: 10px 16px 6px; font-weight: 700; font-size: 13px; color: var(--fc-tinta); border-top: 1px solid var(--fc-borde-suave); }

/* Mantenedor de categorías: árboles como control segmentado y buscador a la derecha */
.fc-cat-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 16px; }
.fc-segmentos { display: inline-flex; flex-wrap: wrap; flex: 0 1 auto; gap: 2px; padding: 3px; background: #F1F5F9; border-radius: var(--fc-radio-sm); }
.fc-seg { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--fc-suave); font-weight: 600; font-size: 13px; white-space: nowrap; transition: background .12s, color .12s; }
.fc-seg:hover { color: var(--fc-tinta); }
.fc-seg:focus-visible { outline: 2px solid var(--fc-primario-500); outline-offset: 1px; }
.fc-seg.active { background: var(--fc-superficie); color: var(--fc-tinta); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.fc-seg-num { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #E2E8F0; color: var(--fc-suave); font-size: 11px; font-weight: 700; text-align: center; }
.fc-seg.active .fc-seg-num { background: var(--fc-primario-100); color: var(--fc-primario-ink); }
.fc-buscar { position: relative; flex: 1 1 220px; max-width: 340px; min-width: 200px; margin-left: auto; }
.fc-buscar i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #64748B; font-size: 18px; pointer-events: none; }
.fc-buscar .form-control { padding-left: 38px; height: 40px; }
.fc-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.fc-cat-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; text-align: left; background: var(--fc-superficie); border: 1px solid var(--fc-borde); border-radius: var(--fc-radio-sm); color: var(--fc-texto); font-size: 13px; font-weight: 500; transition: border-color .12s, background .12s; }
.fc-cat-item:hover { border-color: var(--fc-primario-400); }
.fc-cat-item.active { background: var(--fc-primario-50); border-color: var(--fc-primario-400); color: var(--fc-primario-ink); font-weight: 700; }
.fc-cat-num { flex: none; min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--fc-gris-50); color: var(--fc-suave); font-size: 11.5px; font-weight: 700; text-align: center; }
.fc-cat-item.active .fc-cat-num { background: var(--fc-primario); color: #FFF; }

/* ---------- Login ---------- */
.fc-login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--fc-bg); }
.fc-login-marca { background: linear-gradient(180deg, var(--fc-lateral), var(--fc-lateral-2)); color: var(--fc-lateral-hover); padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.fc-login-marca h1 { color: #FFFFFF; }
.fc-login-marca p { color: var(--fc-lateral-texto) !important; }
.fc-login-form { padding: 56px; display: flex; flex-direction: column; justify-content: center; max-width: 520px; width: 100%; margin: 0 auto; }
.fc-usuario-demo { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--fc-borde); border-radius: var(--fc-radio-sm); background: var(--fc-superficie); margin-bottom: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.fc-usuario-demo:hover, .fc-usuario-demo:focus-visible { border-color: var(--fc-primario-400); background: var(--fc-primario-50); outline: none; }
@media (max-width: 900px) { .fc-login { grid-template-columns: 1fr; } .fc-login-marca { padding: 32px; } .fc-login-form { padding: 32px; } }

/* ---------- Trend Forecast ---------- */
.fc-trend thead th { background: var(--fc-superficie-2); color: var(--fc-suave); border-color: var(--fc-borde); white-space: nowrap; }
.fc-trend td:first-child, .fc-trend th:first-child { position: sticky; left: 0; background: var(--fc-superficie); z-index: 1; min-width: 150px; font-weight: 600; color: var(--fc-tinta); }
.fc-trend thead th:first-child { background: var(--fc-superficie-2); }
.fc-trend .fc-trend-pct td { color: var(--fc-suave); font-style: italic; }
.fc-trend .fc-trend-pct td:first-child { font-weight: 400; }
.fc-trend .fc-trend-dest td { background: var(--fc-primario-50) !important; color: var(--fc-tinta); font-weight: 700; }
.fc-trend .fc-sep { border-left: 3px solid var(--fc-superficie-2) !important; }
.fc-trend tbody .fc-sep { border-left: 3px solid var(--fc-borde-suave) !important; }
.fc-trend td { font-size: 12.5px; }

/* ---------- Tour guiado ---------- */
.fc-tour-fondo { position: fixed; inset: 0; z-index: 2000; background: transparent; }
.fc-tour-foco { position: fixed; z-index: 2001; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55); outline: 3px solid var(--fc-primario-500); pointer-events: none; transition: all .25s ease; }
.fc-tour-caja { position: fixed; z-index: 2002; width: 360px; max-width: calc(100vw - 24px); background: var(--fc-superficie); border-radius: var(--fc-radio); padding: 16px 18px 12px; box-shadow: var(--fc-sombra-lg); }
.fc-tour-paso { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-primario); }
.fc-tour-titulo { font-size: 16px; font-weight: 700; color: var(--fc-tinta); margin: 4px 0 6px; }
.fc-tour-texto { font-size: 13.5px; line-height: 1.55; color: var(--fc-texto); }
.fc-tour-texto ol, .fc-tour-texto ul { padding-left: 18px; margin: 6px 0 0; }
.fc-tour-botones { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .fc-tour-foco { transition: none; } }

/* Barras de desplazamiento discretas */
* { scrollbar-color: rgba(148, 163, 184, .45) transparent; }

/* Acciones de fila: botones de solo ícono, con tooltip */
.fc-acciones { display: inline-flex; gap: 4px; justify-content: flex-end; }
.fc-accion { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--fc-suave); font-size: 18px; transition: background .12s, color .12s, border-color .12s; }
.fc-accion:hover { background: var(--fc-primario-50); border-color: var(--fc-primario-100); color: var(--fc-primario); }
.fc-accion:focus-visible { outline: 2px solid var(--fc-primario-500); outline-offset: 1px; }
.fc-accion-peligro:hover { background: var(--fc-rojo-50); border-color: #FECACA; color: var(--fc-rojo); }
.fc-accion-ok:hover { background: var(--fc-ok-50); border-color: #A7F3D0; color: var(--fc-ok); }

/* ---------- Mantenedor de perfiles: lista + editor ---------- */
.fc-perfil-lista { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.fc-perfil-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--fc-radio-sm); background: transparent; text-align: left; color: var(--fc-texto); transition: background .12s, border-color .12s; }
.fc-perfil-item:hover { background: var(--fc-superficie-2); }
.fc-perfil-item.active { background: var(--fc-primario-50); border-color: var(--fc-primario-100); }
.fc-perfil-item.inactivo .fc-perfil-info { opacity: .6; }
.fc-perfil-sigla { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; padding: 0 6px; border-radius: 8px; background: var(--fc-gris-50); color: var(--fc-suave); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.fc-perfil-item.active .fc-perfil-sigla { background: var(--fc-primario); color: #FFF; }
.fc-perfil-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fc-perfil-info b { color: var(--fc-tinta); font-size: 13.5px; font-weight: 600; }
.fc-perfil-info small { color: var(--fc-suave); font-size: 12px; }

.fc-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.fc-opcion { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--fc-borde); border-radius: var(--fc-radio-sm); cursor: pointer; margin: 0; }
.fc-opcion input { margin-top: 3px; accent-color: var(--fc-primario); }
.fc-opcion span { display: flex; flex-direction: column; }
.fc-opcion b { color: var(--fc-tinta); font-size: 13.5px; }
.fc-opcion small { color: var(--fc-suave); font-size: 12px; }
.fc-opcion:has(input:checked) { border-color: var(--fc-primario-500); background: var(--fc-primario-50); }
.fc-opcion:has(input:disabled) { cursor: default; opacity: .75; }

.fc-permisos { border: 1px solid var(--fc-borde-suave); border-radius: var(--fc-radio-sm); overflow: hidden; }
.fc-permisos-area { padding: 8px 14px; background: var(--fc-superficie-2); color: var(--fc-suave); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-top: 1px solid var(--fc-borde-suave); }
.fc-permisos-area:first-child { border-top: 0; }
.fc-permisos-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border-top: 1px solid var(--fc-borde-suave); }
.fc-permisos-modulo { color: var(--fc-tinta); font-weight: 500; }
.fc-permisos-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-permiso { position: relative; margin: 0; cursor: pointer; }
.fc-permiso input { position: absolute; opacity: 0; pointer-events: none; }
.fc-permiso span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1.5px solid var(--fc-borde); border-radius: 999px; color: var(--fc-suave); font-size: 12.5px; font-weight: 600; background: var(--fc-superficie); transition: all .12s; }
.fc-permiso span::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #CBD5E1; background: #FFF; }
.fc-permiso input:checked + span { border-color: var(--fc-primario-400); background: var(--fc-primario-50); color: var(--fc-primario-ink); }
.fc-permiso input:checked + span::before { border-color: var(--fc-primario); background: var(--fc-primario) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.fc-permiso input:focus-visible + span { outline: 2px solid var(--fc-primario-500); outline-offset: 2px; }
.fc-permiso input:disabled + span { cursor: default; opacity: .7; }
.fc-permiso:hover input:not(:disabled) + span { border-color: var(--fc-primario-400); }
.fc-perfil-info .fc-perfil-estado { color: var(--fc-rojo); font-weight: 700; }