/* Estilos propios del CRM: shell con barra superior y lateral (como platform-structure y control-app),
   Kanban de proyectos y fichas. */
/* ---- Marca ---------------------------------------------------------------------------------
   Colores del logo: azul petróleo (principal: botones, enlaces, menú activo, foco), dorado y verde (acentos, con
   moderación). Todo color de la interfaz sale de estas variables: el modo oscuro solo tendrá que redefinirlas. */
:root {
  --app-topbar-h: 60px;
  --app-sidebar-w: 232px;
  --app-sidebar-collapsed-w: 68px;
  --app-primary: #005173;
  --app-primary-rgb: 0, 81, 115;
  --app-primary-hover: #00415c;
  --app-primary-soft: #e8f1f5;      /* fondos de resaltado y pasar el ratón */
  --app-primary-border: #b5cfdb;    /* bordes de lo resaltado */
  --app-primary-strong-soft: #d3e5ed;
  --app-accent: #e3ac2f;            /* dorado del logo */
  --app-green: #8bb236;             /* verde del logo */
  --app-chart: #1a7aa0;             /* barras y marcas de datos: el petróleo de la marca, aclarado para que se lea
                                       como color (validado con la guía de visualización: luminosidad, croma, contraste) */
  --app-bg: #f4f5f8;
  --app-border: #e3e6ec;
  --stage-w: 272px;
  /* Bootstrap toma el principal de aquí (text-bg-primary, enlaces, foco…). */
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-primary-text-emphasis: var(--app-primary-hover);
  --bs-primary-bg-subtle: var(--app-primary-soft);
  --bs-primary-border-subtle: var(--app-primary-border);
  --bs-link-color: var(--app-primary);
  --bs-link-color-rgb: var(--app-primary-rgb);
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-link-hover-color-rgb: 0, 65, 92;
  --bs-focus-ring-color: rgba(var(--app-primary-rgb), .25);
  /* «info» (estado «Nuevo»…): un petróleo claro en lugar del cian de Bootstrap. */
  --bs-info: #6fb3cf;
  --bs-info-rgb: 111, 179, 207;
}
/* Componentes de Bootstrap que llevan el azul fijo en su propia clase. */
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-active-border-color: var(--app-primary-hover);
  --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary);
  --bs-btn-focus-shadow-rgb: var(--app-primary-rgb); }
.btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-bg: var(--app-primary); --bs-btn-active-border-color: var(--app-primary);
  --bs-btn-disabled-color: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary);
  --bs-btn-focus-shadow-rgb: var(--app-primary-rgb); }
.btn-check:checked + .btn-outline-secondary, .btn-outline-secondary.active { --bs-btn-active-bg: var(--app-primary);
  --bs-btn-active-border-color: var(--app-primary); --bs-btn-active-color: #fff; }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus, .ts-wrapper.focus .ts-control {
  border-color: var(--app-primary-border); box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .15); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-primary); }
.nav-underline .nav-link.active, .nav-underline .show > .nav-link { color: var(--app-primary); }
.nav-tabs .nav-link.active { color: var(--app-primary); }
.pagination { --bs-pagination-color: var(--app-primary); --bs-pagination-hover-color: var(--app-primary-hover);
  --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .2); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--app-primary); }
.list-group { --bs-list-group-active-bg: var(--app-primary); --bs-list-group-active-border-color: var(--app-primary); }
.ts-dropdown .active { background-color: var(--app-primary-soft); color: var(--bs-body-color); }
body { background: var(--app-bg); min-height: 100vh; }

/* ---- Shell: barra superior (marca, buscador global, usuario) y barra lateral blanca --------- */
.app-topbar { position: sticky; top: 0; z-index: 1030; height: var(--app-topbar-h); display: flex; align-items: center;
  gap: .75rem; padding: 0 1rem; background: #fff; border-bottom: 1px solid var(--app-border); }
.app-brand { display: flex; align-items: center; gap: .5rem; color: var(--bs-body-color); text-decoration: none;
  font-weight: 600; font-size: 1.1rem; flex: 0 0 auto; }
.app-brand .app-logo { width: 34px; height: 34px; flex: 0 0 auto; }
.app-brand .brand-text { flex-direction: column; line-height: 1.1; min-width: 0; }
.app-brand .brand-name { font-size: 1rem; font-weight: 600; white-space: nowrap; }
.app-brand .brand-by { font-size: .7rem; font-weight: 400; color: var(--bs-secondary-color); }
/* La marca ocupa lo que la barra lateral: el buscador empieza alineado con el contenido. */
@media (min-width: 992px) { .app-brand { width: calc(var(--app-sidebar-w) - .5rem); } }
.icon-btn { border: 0; background: none; color: var(--bs-secondary-color); width: 2.25rem; height: 2.25rem; border-radius: .5rem;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.icon-btn:hover { background: #f0f2f6; color: var(--bs-body-color); }
.icon-btn.active { color: var(--app-primary); }
.app-user-menu { display: flex; align-items: center; gap: .5rem; color: var(--bs-body-color); text-decoration: none; }
.app-user-menu .name { max-width: 160px; }

.app-body { display: flex; min-height: calc(100vh - var(--app-topbar-h)); }
.app-sidebar { background: #fff; border-right: 1px solid var(--app-border); display: flex; flex-direction: column; }
@media (min-width: 992px) {
  .app-sidebar { width: var(--app-sidebar-w); flex: 0 0 var(--app-sidebar-w); position: sticky; top: var(--app-topbar-h);
    height: calc(100vh - var(--app-topbar-h)); overflow: hidden; transition: width .2s ease, flex-basis .2s ease; }
}
@media (max-width: 991.98px) { .app-sidebar { --bs-offcanvas-width: var(--app-sidebar-w); } }
/* Si el menú no cabe, se desplaza él solo (el pie con «Plegar menú» queda fijo); su barra, como la del resto de zonas
   que se desplazan (abajo). */
.app-nav { display: flex; flex-direction: column; gap: 2px; padding: .75rem .6rem; flex: 1; min-height: 0;
  overflow-x: hidden; overflow-y: auto; }
/* Barras de desplazamiento de las zonas que se desplazan dentro de la página (menú, tablero y sus columnas, resumen de
   fases, tablas, resultados de búsqueda, desplegables…): finas e invisibles hasta pasar el ratón por encima. La de la
   página no se toca: es la que dice que hay más abajo. */
:is(.app-nav, .board, .stage-summary, .stage-body, .table-responsive, .omnibar-results, .help-search-results,
    .home-agenda, .account-nav, .ts-dropdown-content, .dropdown-menu, .modal-body) {
  scrollbar-width: thin; scrollbar-color: transparent transparent; }
:is(.app-nav, .board, .stage-summary, .stage-body, .table-responsive, .omnibar-results, .help-search-results,
    .home-agenda, .account-nav, .ts-dropdown-content, .dropdown-menu, .modal-body):is(:hover, :focus-within) {
  scrollbar-color: #cfd5de transparent; }
/* Enlaces como píldoras, con un relleno que entra desde la izquierda al pasar el ratón. Los mismos en la
   navegación de Mi cuenta (.account-nav). */
.app-nav a, .account-nav a { position: relative; z-index: 0; overflow: hidden; color: #3b4352; text-decoration: none; padding: .35rem .75rem;
  border-radius: .5rem; display: flex; gap: .7rem; align-items: center; white-space: nowrap; font-size: .925rem; }
.app-nav a .bi, .account-nav a .bi { font-size: 1.05rem; color: #6b7385; }
.app-nav a::before, .account-nav a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #f0f2f6; border-radius: inherit;
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.app-nav a:not(.active):hover::before, .account-nav a:not(.active):hover::before { transform: scaleX(1); }
.app-nav a:hover, .account-nav a:hover { color: var(--bs-body-color); }
.app-nav a.active, .account-nav a.active { background: var(--app-primary); color: #fff; }
.app-nav a.active .bi, .account-nav a.active .bi { color: #fff; }
.app-nav a { flex-shrink: 0; }
.app-nav .nav-soon { margin-left: auto; font-size: .75rem; }
.app-nav .nav-soon .bi { font-size: .8rem; color: #c9a227; }
.app-nav a.active .nav-soon .bi { color: #fff; }
.sidebar-collapsed .app-nav .nav-soon { display: none; }
.app-nav-sep { border-top: 1px solid var(--app-border); margin: .35rem .3rem; flex-shrink: 0; }
.app-nav-title { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-secondary-color); padding: .1rem .75rem .25rem; }
/* Pantallas bajas (portátiles, sobre todo con escalado): el menú más apretado para que quepa sin desplazarse.
   Umbrales medidos con 17 entradas: cabe sin barra desde unos 720 px de alto de ventana. */
@media (min-width: 992px) and (max-height: 940px) {
  .app-nav { padding-block: .5rem; }
  .app-nav a { padding-block: .25rem; }
  .app-nav-sep { margin-block: .25rem; }
  .app-nav-title { padding-bottom: .1rem; }
  .app-sidebar-footer { padding-block: .3rem; }
  .sidebar-toggle { padding-block: .3rem; }
}
@media (min-width: 992px) and (max-height: 820px) {
  .app-nav a { padding-block: .15rem; }
  .app-nav-sep { margin-block: .15rem; }
}
/* Barra lateral plegada (solo iconos; se recuerda en el navegador). */
@media (min-width: 992px) {
  .sidebar-collapsed .app-sidebar { width: var(--app-sidebar-collapsed-w); flex-basis: var(--app-sidebar-collapsed-w); }
  .sidebar-collapsed .app-nav a { justify-content: center; padding-inline: 0; }
  .sidebar-collapsed .app-nav a .label { display: none; }
  .sidebar-collapsed .app-nav-title { display: none; }
  .sidebar-collapsed .app-nav a .badge { position: absolute; top: 2px; right: 6px; font-size: .6rem; }
  .sidebar-collapsed .sidebar-toggle { justify-content: center; padding-inline: 0; }
  .sidebar-collapsed .sidebar-toggle .label { display: none; }
  .sidebar-collapsed .sidebar-toggle .bi { transform: rotate(180deg); }
}
/* Pie de la barra lateral con el botón de plegarla. */
.app-sidebar-footer { padding: .5rem .6rem .75rem; border-top: 1px solid var(--app-border); }
.sidebar-toggle { width: 100%; display: flex; align-items: center; gap: .7rem; border: 0; background: none; color: #6b7385;
  padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; white-space: nowrap; }
.sidebar-toggle:hover { background: #f0f2f6; color: var(--bs-body-color); }
.sidebar-toggle .bi { font-size: 1.05rem; transition: transform .2s ease; }
.app-content { padding: 1.25rem; flex: 1; min-width: 0; }
.page-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; min-height: 2.25rem; }
.app-title { font-size: 1.2rem; font-weight: 600; min-width: 0; }
@media (max-width: 575.98px) { .app-content { padding: 1rem; } .app-topbar { padding: 0 .6rem; gap: .4rem; } }

/* Buscador global (Ctrl + K). */
.omnibar { position: relative; flex: 1 1 auto; max-width: 560px; margin-inline: auto; }
.omnibar .form-control { background: #f3f5f9; border-color: transparent; padding-left: 2.25rem; }
.omnibar .form-control:focus { background: #fff; border-color: var(--app-primary-border); box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .12); }
.omnibar > .bi-search { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); }
.omnibar kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-size: .7rem; background: #fff;
  color: var(--bs-secondary-color); border: 1px solid var(--app-border); box-shadow: none; }
.omnibar-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1060; max-height: 70vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--app-border); border-radius: .5rem; box-shadow: 0 10px 30px rgba(16,24,40,.12); padding: .3rem 0; }
.omnibar-results .group { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-secondary-color); padding: .45rem .9rem .2rem; }
.omnibar-results a { display: flex; gap: .65rem; align-items: center; padding: .45rem .9rem; color: var(--bs-body-color); text-decoration: none; }
.omnibar-results a .bi { color: var(--bs-secondary-color); }
.omnibar-results a.active, .omnibar-results a:hover { background: var(--app-primary-soft); }
.omnibar-results .empty { padding: .8rem; font-size: .875rem; }

/* ---- Componentes ------------------------------------------------------------------------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--app-primary-strong-soft); color: var(--app-primary); font-size: .72rem; font-weight: 600; flex: 0 0 auto; }
.avatar-sm { width: 22px; height: 22px; font-size: .62rem; }
.avatar-xs { width: 16px; height: 16px; font-size: .5rem; }
/* «Para todos» junto al nombre de una tarea: no más alta que la línea, para no descolocar el círculo de completar. */
.everyone-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .4rem; font-weight: 500;
  line-height: 1.2; }
.everyone-badge .avatar-xs { width: 13px; height: 13px; }
/* Iniciales sobre el color de la persona (accounts.colors); sin color, el de la marca. */
.avatar-color { background: var(--avatar-color, var(--app-primary-strong-soft)); color: #fff; }
.avatar-lg { width: 40px; height: 40px; font-size: .95rem; }
.avatar-xl { width: 72px; height: 72px; font-size: 1.5rem; }
img.avatar { object-fit: cover; background: #eef1f6; }
/* Personas en los desplegables (Tom Select con data-people). */
.person-option { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.person-option > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-wrapper.multi .ts-control > .item .person-option { gap: .3rem; }
.avatar-xxl { width: 128px; height: 128px; font-size: 2.6rem; }
/* Mi cuenta: centrada, con la navegación como la barra lateral (en el móvil, en fila). */
.account-page { max-width: 1040px; margin-inline: auto; }
.account-nav { display: flex; flex-direction: column; gap: 2px; width: 210px; }
@media (max-width: 991.98px) { .account-nav { flex-direction: row; width: auto; overflow-x: auto; } }
.text-bg-teal { color: #fff !important; background-color: #0f8a7e !important; }
.card { border-color: var(--app-border); }
.card-header { background: #fff; font-weight: 600; }
.kpi .kpi-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.kpi .kpi-label { color: var(--bs-secondary-color); font-size: .85rem; }
/* Inicio: proyectos por fase (barras horizontales en un solo tono; la fila entera es el objetivo del ratón). */
.phase-bars { list-style: none; padding: 0; margin: 0; }
.last-activity { max-width: 16rem; }
.phase-bar { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr 2.2rem; align-items: center; gap: .6rem;
  padding: .22rem .35rem; border-radius: .35rem; color: var(--bs-body-color); text-decoration: none; font-size: .82rem; }
.phase-bar:hover { background: var(--app-primary-soft); }
.phase-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase-bar-track { height: 10px; }
.phase-bar-fill { display: block; height: 100%; min-width: 3px; background: var(--app-chart); border-radius: 0 4px 4px 0; }
.phase-bar-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.nav-pills-sm .nav-link { font-size: .78rem; }
.filters .form-control, .filters .form-select { min-width: 0; }
.filter-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; font-size: .8rem;
  background: #fff; border: 1px solid var(--app-border); border-radius: .45rem; padding: .3rem .7rem; }
.filter-summary .badge { font-weight: 500; }
/* Desplegables con búsqueda (Tom Select): el menú cuelga de <body> y va por encima de todo. */
.ts-dropdown { z-index: 1060; font-size: .875rem; }
.filters .ts-wrapper { min-width: 0; }
/* Los de una opción, iguales que un desplegable nativo: el tema solo reduce la letra en -sm, no el
   relleno (y lo quita abajo al elegir un valor), y un texto largo no debe partirse en dos líneas. */
.ts-wrapper.single.form-select-sm .ts-control, .input-group-sm > .ts-wrapper.single .ts-control { padding: .25rem .5rem; }
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single .ts-control > .item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-dropdown .dropdown-input { font-size: .875rem; }
.table-clickable tbody tr { cursor: pointer; }
.empty { color: var(--bs-secondary-color); text-align: center; padding: 2rem 1rem; }
.dl-grid { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: .35rem .75rem; margin: 0; font-size: .9rem; }
.dl-grid dt { color: var(--bs-secondary-color); font-weight: 400; }
.dl-grid dd { margin: 0; overflow-wrap: anywhere; }

/* ---- Pipeline (Kanban) ------------------------------------------------------------------- */
.pipeline-tabs .nav-link { color: var(--bs-body-color); }
.pipeline-tabs .nav-link.active { font-weight: 600; }
.stage-summary { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; margin-bottom: .75rem; }
.stage-summary a { flex: 1 0 auto; min-width: 34px; text-decoration: none; font-size: .75rem; color: var(--bs-body-color);
  background: #fff; border: 1px solid var(--app-border); border-top: 3px solid var(--stage-color); border-radius: .35rem; padding: .25rem .45rem; white-space: nowrap; }
.stage-summary a.is-empty { opacity: .55; }
.stage-summary a:hover { background: var(--app-primary-soft); }
/* Columnas de altura fija (la de la pantalla) y zona de soltar a toda la columna: al arrastrar nada cambia de
   tamaño, así que las columnas no se mueven mientras se apunta (ver .board.dragging más abajo). */
.board { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: 1rem; align-items: stretch; scroll-behavior: smooth; }
.stage { flex: 0 0 var(--stage-w); background: #eceef3; border-radius: .5rem; display: flex; flex-direction: column;
  position: relative; height: max(22rem, calc(100vh - 290px)); }
.stage-head { padding: .55rem .7rem; border-top: 4px solid var(--stage-color); border-radius: .5rem .5rem 0 0; background: #fff; display: flex; gap: .4rem; align-items: flex-start; }
.stage-head .stage-name { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.stage-head .stage-meta { font-size: .75rem; color: var(--bs-secondary-color); }
.stage-toggle { border: 0; background: none; padding: 0 .1rem; color: var(--bs-secondary-color); margin-left: auto; }
.stage-body { padding: .5rem; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; min-height: 0; }
.stage.collapsed { flex-basis: 54px; }
/* Fases sin proyectos con los filtros aplicados: apagadas, como en el resumen de arriba. Se encienden al pasar
   el ratón y al ser el destino de una tarjeta que se arrastra. */
.stage[data-empty="true"] { opacity: .55; transition: opacity .15s; }
.stage[data-empty="true"]:hover, .board.dragging .stage[data-empty="true"]:has(.sortable-ghost) { opacity: 1; }
.stage.collapsed .stage-body, .stage.collapsed .stage-meta { display: none; }
.stage.collapsed .stage-head { flex-direction: column; align-items: center; min-height: 220px; padding: .5rem .2rem; }
.stage.collapsed .stage-name { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 600; font-size: .9rem;
  color: #3b4352; }
.stage.collapsed .stage-toggle { margin: 0 0 .4rem; order: -1; }
/* Resumen de la fase plegada, separado de los botones de arriba por una línea fina. */
.stage-folded { display: none; }
.stage.collapsed .stage-folded { display: flex; flex-direction: column; align-items: center; gap: .25rem; align-self: stretch;
  margin: .35rem .3rem .6rem; padding-top: .7rem; border-top: 1px solid var(--app-border);
  font-size: .68rem; line-height: 1.1; text-align: center; color: var(--bs-secondary-color); white-space: nowrap; }
.stage-folded .stage-count { font-size: .95rem; font-weight: 700; color: var(--bs-body-color); }
.stage[data-empty="true"] .stage-folded .stage-count { color: var(--bs-secondary-color); font-weight: 500; }
.stage-meta .badge { font-size: .65rem; font-weight: 600; }
/* Destello de las fases con resultados al aplicar un filtro. Con outline hacia dentro: una sombra
   exterior quedaría recortada por el desplazamiento horizontal del tablero. */
@keyframes stage-flash {
  0%, 100% { outline-color: transparent; }
  25% { outline-color: var(--stage-color); }
}
.stage.flash, .stage-summary a.flash { outline: 3px solid transparent; outline-offset: -3px; animation: stage-flash .9s ease-out; }
/* Columna resaltada mientras se pasa el ratón por su tramo de la barra de fases. */
.stage.is-highlighted { outline: 3px solid var(--stage-color); outline-offset: -3px; transition: outline-color .15s; }
@media (prefers-reduced-motion: reduce) { .stage.flash, .stage-summary a.flash { animation: none; } }
.deal { display: block; cursor: pointer; background: #fff; border: 1px solid var(--app-border); border-radius: .45rem; padding: .55rem .65rem;
  color: inherit; text-decoration: none; font-size: .85rem; box-shadow: 0 1px 1px rgba(16,24,40,.04); }
.deal:hover { border-color: var(--app-primary-border); box-shadow: 0 2px 6px rgba(16,24,40,.08); }
.deal-title { display: block; font-weight: 600; line-height: 1.25; margin-bottom: .2rem; color: inherit; text-decoration: none; }
.deal-title:hover { text-decoration: underline; }
.deal-line { color: var(--bs-secondary-color); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-foot { display: flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .75rem; }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.priority-dot-empty { box-shadow: inset 0 0 0 1px #a9b1bf; }
/* Menú de prioridad: el disparador es un botón sin aspecto de botón. */
.priority-picker { display: inline-block; }
.priority-toggle { border: 0; background: none; padding: 0; line-height: 1; display: inline-flex; align-items: center; }
.deal-foot .priority-toggle { padding: 3px; margin: -3px; border-radius: 50%; }
button.priority-toggle:hover .priority-dot { transform: scale(1.4); }
.priority-picker .dropdown-menu { --bs-dropdown-min-width: 9rem; }
/* Menú de responsable y asignados. En la ficha sus filas forman parte de la rejilla de «Datos». */
.people-picker { display: inline-block; }
.card.people-picker { display: flex; }  /* la tarjeta «Equipo» de la ficha: a todo el ancho, como las demás */
.people-toggle { border: 0; background: none; padding: 0; color: inherit; text-align: left; display: inline-flex; align-items: center; gap: .2rem; }
/* Franja de estado de la ficha (en pausa, cancelado, sin servicio): colores del tema, sirven en modo oscuro. */
.status-banner { padding: .6rem .8rem; border-radius: var(--bs-border-radius); border: 1px solid transparent; }
.status-banner-on_hold { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); }
.status-banner-cancelled { background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); }
.status-banner-no_service { background: var(--bs-secondary-bg-subtle); border-color: var(--bs-secondary-border-subtle); }
/* Tarjeta del pipeline de un proyecto en pausa (solo se ve con el filtro «En pausa»). */
.deal.is-paused { opacity: .7; border-style: dashed; }
/* Calendario: repeticiones previstas de una tarea periódica (aún no creadas), atenuadas. */
.fc .is-projected { opacity: .55; border-style: dashed !important; }
/* Lo pasado y lo completado, apagado; lo completado, además, tachado. */
.fc .is-past, .fc .is-done { opacity: .5; }
.fc .is-done .fc-event-title, .fc .is-done .fc-list-event-title { text-decoration: line-through; }
.avatar-empty { background: none; border: 1px dashed #a9b1bf; color: var(--bs-secondary-color); }
.avatar-more { font-size: .68rem; color: var(--bs-secondary-color); }
button.people-toggle:hover .avatar { box-shadow: 0 0 0 2px var(--app-primary-border); }
.people-menu { width: 20rem; max-width: calc(100vw - 2rem); overflow-wrap: normal; font-size: .875rem; }
/* Las opciones de los buscadores del menú se abren dentro de él: más cortas para que no se salgan. */
.people-menu .ts-dropdown-content { max-height: 160px; }

/* ---- Ficha de proyecto ------------------------------------------------------------------- */
.stage-track { display: flex; gap: 3px; margin: .25rem 0 .35rem; }
.stage-track span { flex: 1; height: 8px; border-radius: 2px; background: #dfe3ea; }
/* Cada tramo se rellena según sus requisitos cumplidos (--progress): pasadas en verde (y en ámbar lo que quedó
   pendiente), la actual en petróleo; las futuras quedan en gris. */
.stage-track span.past { background: linear-gradient(to right, #7fb07a var(--progress, 100%), #e0a100 var(--progress, 100%)); }
.stage-track span.current { background: linear-gradient(to right, var(--app-primary) var(--progress, 100%), var(--app-primary-border) var(--progress, 100%)); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--app-border); }
.timeline li:last-child { border-bottom: 0; }
.timeline .tl-icon { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #eef1f6; }
.timeline .tl-body { min-width: 0; flex: 1; }
.timeline .tl-text { white-space: pre-line; font-size: .875rem; color: #3b4352; overflow-wrap: anywhere; }
/* Notas con formato (core.richtext): los saltos ya vienen como <br>. */
.timeline .tl-rich { white-space: normal; }
.tl-rich p, .tl-rich ul, .tl-rich ol, .tl-rich blockquote { margin-bottom: .35rem; }
.tl-rich > :last-child { margin-bottom: 0; }
.tl-rich ul, .tl-rich ol { padding-left: 1.25rem; }
.tl-rich ul { list-style: disc; }
.tl-rich ol { list-style: decimal; }
.timeline .tl-rich li { display: list-item; padding: 0; border: 0; }  /* no son entradas del Timeline */
.tl-rich blockquote { border-left: 3px solid var(--app-border); padding-left: .6rem; color: var(--bs-secondary-color); }
/* Barra de formato sobre el texto de una nota (app.js, data-markdown). */
.md-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin-bottom: .25rem; }
.md-toolbar .btn { padding: .05rem .4rem; line-height: 1.4; }
.md-toolbar .md-hint { margin-left: auto; font-size: .75rem; color: var(--bs-secondary-color); }
/* Notas (lo que escribe alguien) destacadas; cambios de fase y registros automáticos, compactos y en gris. */
.feed { list-style: none; padding: 0; margin: 0; }
.feed-day { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color);
  padding: .6rem 0 .2rem; }
.feed-day:first-child { padding-top: .2rem; }
.feed-item { display: flex; gap: .65rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px solid var(--app-border); font-size: .875rem; }
.feed-item:has(+ .feed-day), .feed-item:last-child { border-bottom: 0; }
.feed-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; background: #eef1f6; color: #6b7385; }
.feed-notas .feed-icon { background: #fff4d6; color: #a06a00; }
.feed-tareas .feed-icon { background: #ece4fb; color: #6f42c1; }
.feed-cambios .feed-icon { background: none; color: #a9b1bf; }
.feed-title a { text-decoration: none; }
.feed-title a:hover { text-decoration: underline; }
/* Timeline: notas destacadas. */
.timeline li.tl-note .tl-icon { background: #fff4d6; color: #a06a00; }
.timeline li.tl-record { padding: .35rem 0; }
.timeline li.tl-record .tl-icon { width: 30px; height: 22px; background: none; color: #a9b1bf; font-size: .85rem; }
.nav-tabs .badge { font-weight: 500; }
.min-w-0 { min-width: 0; }
.d-contents { display: contents; }
.map-picker { height: 320px; border-radius: .45rem; border: 1px solid var(--app-border); z-index: 0; cursor: crosshair; }
.mini-map { height: 180px; border-radius: .45rem; border: 1px solid var(--app-border); z-index: 0; }
/* Calendario (FullCalendar) con los colores de la aplicación en vez de sus botones gris oscuro. */
.fc { --fc-button-bg-color: #fff; --fc-button-border-color: var(--app-border); --fc-button-text-color: #3b4352;
  --fc-button-hover-bg-color: var(--app-primary-soft); --fc-button-hover-border-color: var(--app-primary-border);
  --fc-button-active-bg-color: var(--app-primary); --fc-button-active-border-color: var(--app-primary);
  --fc-today-bg-color: var(--app-primary-soft); --fc-border-color: var(--app-border); }
.fc .fc-button { font-size: .85rem; padding: .3rem .7rem; text-transform: none; }
.fc .fc-button:focus, .fc .fc-button-primary:not(:disabled):focus { box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .2); }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: #fff; }
.fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 600; }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--bs-body-color); text-decoration: none; }
/* Logos de instaladoras (vienen del CRM antiguo). */
.installer-logo { flex: 0 0 auto; object-fit: contain; background: #fff; border: 1px solid var(--app-border); border-radius: .35rem;
  display: inline-flex; align-items: center; justify-content: center; }
.installer-logo-sm { width: 32px; height: 32px; padding: 2px; }
.installer-logo-lg { width: 64px; height: 64px; padding: 4px; }
.installer-logo-empty { color: var(--bs-secondary-color); background: #f3f5f9; }
/* Documentos de cada fase en Workflows, con su tipo de documento a la derecha. */
.workflow-document { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; border-bottom: 1px dashed var(--app-border); }
.workflow-document:last-child { border-bottom: 0; }
/* Workflows: solo lectura hasta pulsar «Editar» (los controles llevan .wf-edit; lo que los sustituye, .wf-view). */
.workflows:not(.is-editing) .wf-edit { display: none !important; }
.workflows.is-editing .wf-view { display: none !important; }
.workflows.is-editing .list-group-item { border-left: 3px solid var(--app-primary); }
.workflow-document > select, .workflow-document > .ts-wrapper { flex: 0 0 15rem; max-width: 55%; }
/* Confirmación breve de que un desplegable que guarda al elegir (data-saved-flash) se ha guardado. */
@keyframes saved-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 3px rgba(46, 157, 87, .45); } }
.just-saved { animation: saved-flash 1s ease-out; border-radius: var(--bs-border-radius-sm); }
/* Ficheros del proyecto agrupados por fase (plegables). */
.file-group { border-bottom: 1px solid var(--app-border); }
.file-group:last-child { border-bottom: 0; }
.file-group-head { display: flex; align-items: center; gap: .4rem; width: 100%; border: 0; background: none; padding: .5rem 0;
  text-align: left; color: inherit; font-size: .9rem; }
.file-group-caret { transition: transform .15s; }
.file-group-head.collapsed .file-group-caret, .left-behind-toggle.collapsed .file-group-caret { transform: rotate(-90deg); }
.left-behind-toggle { display: flex; align-items: center; gap: .4rem; width: 100%; border: 0; background: none; padding: 0;
  color: inherit; font-weight: 600; text-align: left; }

/* ---- Requisitos de fase y arrastre en el Kanban ----------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem 0; font-size: .875rem; }
.checklist .bi-check-circle-fill { color: #2e9d57; }
.checklist .bi-circle { color: #a9b1bf; }
.checklist .done-label { color: var(--bs-secondary-color); text-decoration: line-through; }
.checklist button.check { border: 0; background: none; padding: 0; line-height: 1; }
/* Acción para resolver un requisito pendiente (Subir, Asignar titular…): botón pequeño junto al texto. */
.req-action { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; line-height: 1.2; white-space: nowrap;
  padding: .1rem .45rem; border: 1px solid var(--app-primary-border); border-radius: 1rem; background: var(--app-primary-soft); color: var(--app-primary);
  text-decoration: none; vertical-align: baseline; }
.alert .req-action { background: #fff; }
.req-silence { border: 0; background: none; padding: 0 .15rem; color: #a9b1bf; font-size: .8rem; vertical-align: baseline; }
.req-silence:hover { color: var(--bs-body-color); }
.req-action:hover, .alert .req-action:hover { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }
/* Pestañas de la ficha: los botones de acción, siempre arriba a la derecha. */
.panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-bottom: .75rem; }
/* Tareas: lista de la ficha y «Mis tareas» del inicio. */
.task-list { list-style: none; padding: 0; margin: 0; }
.task { display: flex; gap: .55rem; align-items: flex-start; padding: .45rem 0; font-size: .875rem; }
.task-list .task + .task { border-top: 1px solid var(--app-border); }
.task button.check { border: 0; background: none; padding: 0; line-height: 1; color: #a9b1bf; }
/* El círculo, centrado en la primera línea del texto (que mide 1,5 veces la letra), no pegado arriba. */
.task-list .task > button.check, .task-list .task > .bi, .list-group-item.task > button.check {
  display: inline-flex; align-items: center; height: calc(.875rem * 1.5); flex: 0 0 auto; font-size: 1rem; }
.task button.check:hover { color: #2e9d57; }
.task .bi-check-circle-fill { color: #2e9d57; }
.list-group-item.task { padding: .55rem 1rem; }
.task-group-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: .5rem 1rem .2rem; }
/* Píldoras de filtro con contador (estados de la sección Tareas, tipos del Timeline). */
.filter-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.filter-pill { border: 1px solid var(--app-border); background: #fff; color: var(--bs-body-color); border-radius: 2rem; padding: .2rem .7rem; }
.filter-pill .badge { background: #eef1f6; color: var(--bs-secondary-color); font-weight: 500; }
.filter-pill:hover { border-color: var(--app-primary-border); background: var(--app-primary-soft); }
.btn-check:checked + .filter-pill { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }
.btn-check:checked + .filter-pill .badge { background: rgba(255,255,255,.25); color: #fff; }
.filter-pill-vencidas .badge:not(:empty) { color: #b02a37; }
.btn-check:checked + .filter-pill-vencidas { background: #c0392b; border-color: #c0392b; }
.task-table .sel-col { width: 1.9rem; padding-right: 0; }
.task-table td.task { display: table-cell; padding-top: .5rem; font-size: 1rem; }
.task-table .task-name { min-width: 14rem; }
.task-table .task-desc { max-width: 38rem; white-space: pre-line; }
.task-row.is-done td { color: var(--bs-secondary-color); }
.task-table .done-label { text-decoration: line-through; }
.task-table .task-group-row td { background: #f6f8fb; padding-top: .55rem; padding-bottom: .55rem; }
.task-bulk { background: var(--app-primary-soft); position: sticky; top: 0; z-index: 2; }
/* «Reasignar a…»: ancho fijo (no cambia al elegir) y menú más ancho que la caja para leer los nombres enteros. */
.task-reassign > .ts-wrapper { flex: 0 0 15rem; width: 15rem; }
.ts-dropdown.dropdown-wide { min-width: min(20rem, 90vw); }
.ts-dropdown.dropdown-wide .person-option span { white-space: normal; }
.deal.sortable-ghost { opacity: .4; }
.deal.sortable-chosen { box-shadow: 0 6px 16px rgba(16,24,40,.18); }
/* Al arrastrar solo cambia el aspecto: zonas de soltar marcadas y la columna de destino resaltada con su color.
   Una columna plegada no se despliega: su zona de soltar la cubre entera por encima (sin ocupar sitio) y la
   tarjeta no se ve dentro; se resalta la columna. */
.board.dragging .stage-body { outline: 2px dashed var(--app-primary-border); outline-offset: -4px; border-radius: .4rem; }
.board.dragging .stage.collapsed .stage-body { display: flex; position: absolute; inset: 0; z-index: 2; padding: 0;
  overflow: hidden; background: transparent; }
.board.dragging .stage.collapsed .stage-body > .deal { opacity: 0; }
.board.dragging .stage:has(.sortable-ghost) { outline: 3px solid var(--stage-color); outline-offset: -3px; background: #e3e8f2; }
/* La ventana de confirmación puede abrirse sobre otra (p. ej. borrar desde la ventana de una tarea). */
#confirm-modal { z-index: 1070; }
/* Calendario: mano en todo lo que se abre al pulsarlo (con enlace o editable, como los eventos generales). */
.fc-event.is-clickable { cursor: pointer; }
.cal-day-menu { position: fixed; z-index: 1050; }
/* Calendario: iniciales de la persona en cada evento y leyenda de personas (se pulsa para ocultar o mostrar). */
.fc-ev { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; max-width: 100%; overflow: hidden; }
.fc-ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-ev-time { font-weight: 600; }
.fc-person { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.2rem; height: 1.2rem;
  border-radius: 50%; background: var(--person-color); color: #fff; font-size: .55rem; font-weight: 700; letter-spacing: -.02em; }
img.fc-person { object-fit: cover; background: #fff; box-shadow: 0 0 0 1.5px var(--person-color); }
/* Tarea de varias personas: las fotos se solapan un poco, como en una pila. */
.avatar-stack { display: inline-flex; flex: 0 0 auto; }
.avatar-stack > .avatar + .avatar { margin-left: -.4rem; box-shadow: 0 0 0 2px var(--bs-body-bg, #fff); }
.fc-people { display: inline-flex; flex: 0 0 auto; }
.fc-people .fc-person + .fc-person { margin-left: -.35rem; }
.fc-list-event .fc-ev { white-space: normal; }
/* Eventos claros: fondo tintado, texto oscuro y barra de su color a la izquierda (más contraste que el color lleno). */
#calendar .fc-daygrid-block-event, #calendar .fc-timegrid-event { border-width: 0 0 0 3px; border-radius: 4px; }
#calendar .fc-daygrid-block-event .fc-event-main { padding: 1px 4px; font-weight: 500; }
#calendar .fc-daygrid-event-harness + .fc-daygrid-event-harness { margin-top: 2px; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: .35rem; }
.legend-person { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--app-border); background: #fff;
  border-radius: 2rem; padding: .1rem .6rem .1rem .15rem; color: var(--bs-body-color); }
.legend-person:hover { border-color: var(--app-primary-border); background: var(--app-primary-soft); }
.legend-person.is-off { opacity: .45; text-decoration: line-through; }
/* Mi cuenta → Preferencias: muestras de color. */
.color-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.color-swatch { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 5.2rem; cursor: pointer; }
.color-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.color-swatch .swatch { width: 2rem; height: 2rem; border-radius: 50%; background: var(--swatch, #fff); display: inline-flex;
  align-items: center; justify-content: center; color: var(--bs-secondary-color); border: 1px solid var(--app-border); }
.color-swatch input:checked + .swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch, var(--app-primary)); }
.color-swatch input:focus-visible + .swatch { outline: 2px solid var(--app-primary); outline-offset: 3px; }
/* Calendario del inicio: un mes en miniatura (como un selector de fechas, con puntos de color) y una lista al lado. */
.mini-cal { width: 15.5rem; max-width: 100%; }
.mini-cal .fc { font-size: .75rem; }
.mini-cal .fc .fc-toolbar.fc-header-toolbar { margin-bottom: .25rem; }
.mini-cal .fc .fc-toolbar-title { font-size: .85rem; }
.mini-cal .fc .fc-toolbar-title::first-letter { text-transform: uppercase; }
.mini-cal .fc .fc-button { padding: 0 .35rem; font-size: .75rem; border: 0; background: none; color: var(--bs-secondary-color); }
.mini-cal .fc .fc-button:hover { color: var(--bs-body-color); background: #f0f2f6; }
.mini-cal .fc-theme-standard td, .mini-cal .fc-theme-standard th, .mini-cal .fc-theme-standard .fc-scrollgrid { border: 0; }
.mini-cal .fc-col-header-cell-cushion { font-weight: 500; color: var(--bs-secondary-color); padding: 2px 0; }
.mini-cal .fc-daygrid-day-frame { min-height: 0; height: 1.9rem; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; border-radius: .35rem; }
.mini-cal .fc-daygrid-day-frame:hover { background: #f0f2f6; }
.mini-cal .fc-day-today { background: none !important; }
.mini-cal .fc-daygrid-day-top { justify-content: center; }
.mini-cal .fc-daygrid-day-number { padding: 1px 0 0; font-size: .72rem; line-height: 1.2; }
.mini-cal .fc-day-today .fc-daygrid-day-number { background: var(--app-primary); color: #fff; border-radius: 50%;
  width: 1.2rem; height: 1.2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.mini-cal .fc-day-other .fc-daygrid-day-number { opacity: .4; }
.mini-cal .is-selected .fc-daygrid-day-frame { background: var(--app-primary-strong-soft); }
.mini-cal .fc-daygrid-day-events { display: flex; justify-content: center; gap: 2px; margin: 0; min-height: 0;
  max-width: 100%; overflow: hidden; }
.mini-cal .fc-daygrid-day-bottom { display: none; }
.mini-cal .fc-daygrid-event-harness { margin: 0 !important; }
.mini-cal .fc-daygrid-dot-event { padding: 0; }
.mini-cal .fc-daygrid-dot-event .fc-event-time, .mini-cal .fc-daygrid-dot-event .fc-event-title { display: none; }
.mini-cal .fc-daygrid-event-dot { margin: 0; border-width: 2.5px; }
.home-agenda { max-height: 16rem; overflow-y: auto; }
.home-agenda .fc-list { border: 0; font-size: .8rem; }
.home-agenda .fc-list-day-cushion { background: #f6f8fb; padding: .25rem .5rem; }
.home-agenda .fc-listDay-view .fc-list-day { display: none; }  /* el día ya va en el título */
.home-agenda .fc-list-day-text, .home-agenda .fc-list-day-side-text { color: var(--bs-body-color); text-decoration: none;
  font-weight: 600; }
.home-agenda .fc-list-event td { padding: .3rem .5rem; }
.modal-backdrop ~ .modal-backdrop { z-index: 1065; }

/* ---- Centro de ayuda (apps/help) ------------------------------------------------------------ */
.help-aside, .help-toc { position: sticky; top: 1rem; }
.help-search-results { z-index: 1000; max-height: 60vh; overflow: auto; }
.help-nav-title { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--bs-secondary-color); margin-bottom: .25rem; }
.help-nav-link { display: block; padding: .2rem .5rem; font-size: .875rem; border-radius: var(--bs-border-radius);
  color: var(--bs-body-color); text-decoration: none; }
.help-nav-link:hover { background: var(--app-primary-soft); }
.help-nav-link.active { background: var(--app-primary-soft); color: var(--app-primary); font-weight: 600; }
.help-body h2 { margin-top: 1.75rem; font-size: 1.15rem; font-weight: 600; }
.help-body h3 { margin-top: 1.25rem; font-size: 1rem; font-weight: 600; }
.help-body p, .help-body li, .help-body dd { line-height: 1.6; }
.help-body dt { margin-top: .5rem; }
.help-body dd { margin-left: 1rem; }
.help-cond { border-left: 3px solid var(--app-primary); padding-left: .9rem; margin: 1rem 0; }
.help-cond-label { display: inline-block; font-size: .7rem; font-weight: 600; color: var(--app-primary);
  background: var(--app-primary-soft); border-radius: 1rem; padding: .1rem .55rem; margin-bottom: .4rem; }
.help-toc ul { list-style: none; padding-left: .75rem; margin-bottom: 0; }
.help-toc > .toc > ul { padding-left: 0; }
.help-toc a { text-decoration: none; font-size: .8rem; }
.timeline-search { max-width: 14rem; }

/* Impresión (p. ej. el Resumen semanal): solo el contenido, sin barras ni botones. */
@media print {
  .app-topbar, .app-sidebar, .page-header .btn, .page-header .help-btn { display: none !important; }
  .app-shell, .app-body { display: block !important; }
  .app-content { padding: 0; }
  .card { break-inside: avoid; }
}
/* Usuarios → Roles: tabla que compara los roles y editor de permisos. */
.role-compare th:first-child, .role-compare td:first-child { min-width: 12rem; }
.role-compare thead th { font-weight: 600; white-space: nowrap; }
.role-compare .role-group th { background: var(--bs-tertiary-bg); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; }
.role-compare td + td { border-left: 1px solid var(--app-border); }
.role-action { color: var(--app-primary, #005173); margin: 0 .15rem; }
.role-editor .form-check-input { margin: 0; }
/* Avisos (campana de la barra superior y página «Avisos»). */
.notif-badge { position: absolute; top: .1rem; right: .05rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
  border-radius: 1rem; background: #c0392b; color: #fff; font-size: .65rem; font-weight: 700; line-height: 1.05rem;
  text-align: center; }
.notif-menu { width: min(24rem, calc(100vw - 2rem)); }
.notif-head, .notif-foot { border-color: var(--app-border) !important; }
.notif-head { border-bottom: 1px solid var(--app-border); }
.notif-foot { border-top: 1px solid var(--app-border); }
.notif-menu .notif-list { max-height: 24rem; overflow-y: auto; }
.notif-item { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 1rem; color: var(--bs-body-color);
  text-decoration: none; border-bottom: 1px solid var(--app-border); }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--app-primary-soft, #eef4f7); color: var(--bs-body-color); }
.notif-item > .bi { color: var(--bs-secondary-color); margin-top: .1rem; }
.notif-item.is-unread { background: #f4f8fb; }
.notif-item.is-unread > .bi { color: var(--app-primary); }
.notif-item.is-unread .notif-text { font-weight: 600; }
.notif-text { display: block; font-size: .875rem; }
.notif-when { display: block; font-size: .75rem; color: var(--bs-secondary-color); }
/* Workflows: preguntas del formulario de una fase, con sus botones en modo edición. */
.workflow-question { display: flex; gap: .5rem; align-items: flex-start; }
/* Comunicación: lista de destinatarios, vista previa del email (en un iframe, con su propio estilo). */
.comm-recipients { max-height: 22rem; overflow-y: auto; }
.comm-recipients td:first-child { padding-left: 1rem; }
.comm-recipients td:last-child { padding-right: 1rem; }
.comm-preview { width: 100%; height: 34rem; border: 1px solid var(--app-border); border-radius: .375rem; background: #f2f4f3; }
@media (min-width: 992px) { .comm-preview-card { position: sticky; top: 1rem; } }
/* Pestañas de la ficha del proyecto: con icono y algo más pequeñas. Si no caben en una línea, las que no están
   activas pierden primero el contador (columna de menos de ~900 px) y, si aún no caben, el nombre (que sale al pasar
   el ratón). */
.project-tabs-header { container-type: inline-size; }
.project-tabs { flex-wrap: nowrap; }
.project-tabs .nav-link { font-size: .8rem; padding: .4rem .55rem; display: inline-flex; align-items: center; gap: .3rem;
  white-space: nowrap; }
.project-tabs .nav-link .bi { font-size: .95rem; }
.project-tabs .nav-link .badge { font-size: .66rem; }
@container (max-width: 900px) {
  .project-tabs .nav-link { font-size: .76rem; padding: .4rem .35rem; gap: .25rem; }
  .project-tabs .nav-link:not(.active) .badge { display: none; }
}
@container (max-width: 700px) {
  .project-tabs .nav-link:not(.active) .tab-label { display: none; }
  .project-tabs .nav-link:not(.active) .badge { display: inline-block; }
}
/* Zona para soltar un fichero (includes/dropzone.html). */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; width: 100%;
  min-height: 7.5rem; padding: 1rem; border: 2px dashed var(--app-border); border-radius: .5rem; background: #fff;
  text-align: center; cursor: pointer; color: var(--bs-secondary-color); transition: border-color .15s, background .15s; }
.dropzone .bi { font-size: 1.75rem; }
.dropzone:hover, .dropzone.is-over { border-color: var(--app-primary); background: var(--app-primary-soft, #eef4f7); }
.dropzone.has-file { border-style: solid; border-color: var(--app-primary); color: var(--bs-body-color); }
.dropzone.has-file .bi { color: var(--app-primary); }
/* Puntos de suministro (CUPS y coeficiente) bajo cada contacto de un proyecto, y revisión de una importación. */
.supply-line { font-size: .75rem; }
.supply-line code, .import-review code { font-size: .75rem; color: inherit; }