/* =========================================================================
   eTradie CRM -- Buscador global y ficha 360

   Archivo propio y no dentro de cada pantalla porque el buscador se
   auto-monta desde crm_shared.js en todas: si el estilo viviera en un HTML,
   habria que copiarlo en cada uno y se desincronizaria al primer ajuste.
   Solo usa tokens de eDS; cero valores de color hardcodeados.
   ========================================================================= */

/* ---- Overlay del buscador ---- */
.bg-overlay {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(26,34,54,.45);
  display: none; align-items: flex-start; justify-content: center;
  padding: 90px 16px 16px;
}
.bg-overlay.open { display: flex; }

.bg-box {
  width: 100%; max-width: 620px;
  background: var(--et-surface);
  border-radius: var(--et-radius);
  box-shadow: var(--et-sh-3, 0 16px 40px rgba(26,34,54,.16));
  overflow: hidden;
}

.bg-head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--et-line);
}
.bg-head i { color: var(--et-ink-muted); font-size: 14px; }
.bg-head input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; color: var(--et-ink);
}
.bg-head input::placeholder { color: var(--et-ink-muted); }
.bg-esc {
  font-size: 10.5px; font-weight: 700; color: var(--et-ink-muted);
  border: 1px solid var(--et-line); border-radius: 4px;
  padding: 2px 6px; flex: 0 0 auto;
}

.bg-res { max-height: 420px; overflow-y: auto; }
.bg-vacio { padding: 22px 16px; font-size: 13px; color: var(--et-ink-muted); text-align: center; }

.bg-grupo {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--et-ink-muted);
  padding: 10px 16px 5px; background: var(--et-surface-2);
}

.bg-it {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid var(--et-line);
  transition: background var(--et-transition, 180ms);
}
.bg-it:last-child { border-bottom: none; }
.bg-it:hover { background: var(--et-primary-50); }

.bg-it-ico {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: var(--et-radius-sm);
  background: var(--et-primary-50); color: var(--et-primary);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.bg-it-bd { flex: 1; min-width: 0; }
.bg-it-n {
  font-size: 13.5px; font-weight: 600; color: var(--et-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bg-it-s {
  font-size: 11.5px; color: var(--et-ink-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bg-it-m { font-size: 12.5px; font-weight: 700; color: var(--et-ink); flex: 0 0 auto; }
.bg-it-ro { color: var(--et-ink-muted); font-size: 11px; flex: 0 0 auto; }

/* ---- Ficha 360 ---- */
.f360-top { background: var(--et-surface-2); border-radius: var(--et-radius-sm); padding: 13px 15px; }
.f360-grid { display: flex; gap: 22px; flex-wrap: wrap; font-size: 11.5px; color: var(--et-ink-soft); }
.f360-grid b {
  display: block; color: var(--et-ink); font-size: 13px; font-weight: 700; margin-top: 2px;
}

/* El aviso de solo lectura explica POR QUE, no solo que no se puede: sin la
   razon, el usuario cree que es un error del sistema. */
.f360-ro {
  margin-top: 11px; padding: 9px 12px;
  background: var(--et-surface); border: 1px solid var(--et-line);
  border-radius: var(--et-radius-sm);
  font-size: 11.5px; color: var(--et-ink-soft);
}
.f360-ro i { color: var(--et-ink-muted); margin-right: 6px; }

.f360-sec {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--et-ink-muted);
  margin: 20px 0 9px; padding-bottom: 5px; border-bottom: 1px solid var(--et-line);
}
.f360-sec small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }
.f360-vacio { font-size: 12.5px; color: var(--et-ink-muted); padding: 6px 0; }

.f360-cts { display: flex; flex-wrap: wrap; gap: 10px; }
.f360-ct {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--et-line); border-radius: var(--et-radius-sm);
  padding: 9px 12px; flex: 1 1 260px; min-width: 0;
}
.f360-ct-n { font-size: 12.5px; font-weight: 600; color: var(--et-ink); }
.f360-ct-d { font-size: 11px; color: var(--et-ink-muted); margin-top: 1px; }
.f360-ct > div:first-child { flex: 1; min-width: 0; }
.f360-ct-a {
  width: 27px; height: 27px; flex: 0 0 auto;
  border: 1px solid var(--et-line); border-radius: var(--et-radius-sm);
  background: var(--et-surface); color: var(--et-ink-soft); font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.f360-ct-a:hover { border-color: var(--et-primary); color: var(--et-primary); }

.f360-op {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0 10px 11px; border-left: 3px solid var(--et-line);
  border-bottom: 1px solid var(--et-line); margin-bottom: 2px;
}
.f360-op:last-of-type { border-bottom: none; }
.f360-op-bd { flex: 1; min-width: 0; }
.f360-op-t { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.f360-op-s { font-size: 11.5px; color: var(--et-ink-muted); margin-top: 2px; }
.f360-op-m { font-size: 13px; font-weight: 700; color: var(--et-ink); flex: 0 0 auto; }
.f360-mia {
  font-size: 10px; font-weight: 700; color: var(--et-success);
  border: 1px solid var(--et-success); border-radius: var(--et-radius-pill, 20px);
  padding: 1px 7px; margin-left: 5px;
}

.f360-cmp {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--et-line); font-size: 12.5px;
}
.f360-cmp:last-of-type { border-bottom: none; }
.f360-cmp small { color: var(--et-ink-muted); font-size: 11px; flex: 0 0 auto; }

.f360-act { padding: 9px 0; border-bottom: 1px solid var(--et-line); }
.f360-act:last-of-type { border-bottom: none; }
.f360-act-t { font-size: 12.5px; font-weight: 600; color: var(--et-ink); }
.f360-act-d { font-size: 12px; color: var(--et-ink-soft); margin-top: 2px; white-space: pre-wrap; }
.f360-act-m { font-size: 11px; color: var(--et-ink-muted); margin-top: 3px; }

@media (max-width: 576px) {
  .bg-overlay { padding: 60px 10px 10px; }
  .f360-grid { gap: 14px; }
}

/* ---- Edicion desde la ficha ----
   El boton de editar aparece en el mismo lugar donde, cuando no se puede,
   va el aviso de solo lectura. Asi el usuario siempre encuentra la respuesta
   en el mismo sitio: o puede editar, o se le dice por que no. */
.f360-edit { margin-top: 11px; }
.f360-add {
  float: right; border: 1px solid var(--et-line); background: var(--et-surface);
  border-radius: var(--et-radius-sm); padding: 3px 10px;
  font-size: 10.5px; font-weight: 600; color: var(--et-ink-soft);
  cursor: pointer; text-transform: none; letter-spacing: 0;
}
.f360-add:hover { border-color: var(--et-primary); color: var(--et-primary); }
/* El boton dentro de la fila de contacto se ve igual que los enlaces de
   llamar y correo: son acciones del mismo nivel. */
button.f360-ct-a { cursor: pointer; }

/* =========================================================================
   ASISTENTE eTradie IA -- barra y panel

   Estaban duplicados en cuatro pantallas con pequenas diferencias, asi que
   corregir el estilo en una dejaba a las otras distintas. Viven aqui porque
   este archivo ya lo cargan las cinco pantallas del CRM.

   La barra sigue el mismo patron que las tarjetas del tablero: superficie
   blanca, borde de 1px, radio y sombra de eDS, con chip de icono. Antes era
   una caja plana con borde izquierdo, y al lado de las tarjetas se veia como
   un elemento de otro sistema.
   ========================================================================= */

.ia-bar { display: block; }

.ia-bar-btn {
  width: 100%;
  display: flex; align-items: center; gap: 13px;
  background: var(--et-surface);
  border: 1px solid var(--et-line);
  border-left: 3px solid #FF5F00;
  border-radius: var(--et-radius);
  box-shadow: var(--et-sh-1);
  padding: 13px 16px;
  cursor: pointer; text-align: left;
  transition: box-shadow var(--et-transition), border-color var(--et-transition);
}
.ia-bar-btn:hover { box-shadow: var(--et-sh-2, 0 6px 18px rgba(26,34,54,.10)); }

/* Chip de icono, igual que en las tarjetas de KPI */
.ia-bar-ico {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 10px; background: #FFEEE2; color: #FF5F00;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.ia-bar-txt { flex: 1; min-width: 0; }
.ia-bar-t { font-size: 13px; font-weight: 700; color: var(--et-ink); line-height: 1.3; }
.ia-bar-s {
  font-size: 11.5px; color: var(--et-ink-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ia-bar-arrow { color: #FF5F00; font-size: 12px; flex: 0 0 auto; }

/* ---- Panel expandido ---- */
.ia-card { border-left: 3px solid #FF5F00; }
.ia-ico { color: #FF5F00; margin-right: 6px; }
.ia-btn { background: #FFEEE2; color: #FF5F00; border: 1px solid #FFD9C2; }
.ia-btn:hover { background: #FFDFC9; color: #C24A00; }

.ia-item {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px dashed #FFD9C2;
  font-size: 12.5px; color: var(--et-ink);
}
.ia-item:last-child { border-bottom: none; padding-bottom: 0; }
.ia-item i { color: #FF5F00; margin-top: 2px; flex: 0 0 14px; text-align: center; }
/* El color del icono dice el tipo sin leer: rojo lo que puede perderse,
   ambar lo pendiente, azul lo de cuota, verde el reconocimiento. */
.ia-item.tipo-riesgo i,
.ia-item.tipo-urgente i        { color: var(--et-danger); }
.ia-item.tipo-carga i,
.ia-item.tipo-pendiente i      { color: var(--et-warning); }
.ia-item.tipo-cuota i          { color: var(--et-info); }
.ia-item.tipo-logro i,
.ia-item.tipo-reconocimiento i { color: var(--et-success); }

.ia-foot {
  font-size: 10.5px; color: var(--et-ink-muted);
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--et-line);
}

/* =========================================================================
   FICHA DE OPORTUNIDAD (modal de consulta)

   El componente vive en crm_shared.js, asi que lo abren las cinco pantallas
   del CRM. Su CSS estaba dentro de crm_team_agenda.html, de modo que en el
   panel del supervisor el modal salia sin formato: texto corrido sin
   jerarquia. Mismo error que tuvo la barra de IA -- componente compartido con
   estilos locales. Ahora vive donde lo ve todo el modulo.
   ========================================================================= */

.fo-top {
  background: var(--et-surface-2);
  border-radius: var(--et-radius-sm);
  padding: 13px 15px;
}
.fo-t1 {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 9px;
}
.fo-tit { font-size: 14.5px; font-weight: 700; color: var(--et-ink); }
.fo-folio { font-size: 11.5px; color: var(--et-ink-muted); }
.fo-tag {
  font-size: 11px; font-weight: 700; padding: 2px 9px;
  border: 1px solid; border-radius: var(--et-radius-pill, 20px);
  margin-left: auto; white-space: nowrap;
}

/* Rejilla de datos: cada dato con su etiqueta arriba en tono tenue y el valor
   debajo en negro. Sin esto todo salia en una sola linea corrida y no se
   distinguia la etiqueta del dato. */
.fo-grid {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--et-ink-soft);
}
.fo-grid > span { display: block; }
.fo-grid b {
  display: block; color: var(--et-ink);
  font-size: 13px; font-weight: 700; margin-top: 2px;
}

.fo-acts { display: flex; gap: 6px; margin-top: 11px; }
.fo-a {
  width: 30px; height: 30px; border-radius: var(--et-radius-sm);
  border: 1px solid var(--et-line); background: var(--et-surface);
  color: var(--et-ink-soft); font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.fo-a:hover { border-color: var(--et-primary); color: var(--et-primary); }

.fo-sec {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--et-ink-muted);
  margin: 18px 0 9px; padding-bottom: 5px;
  border-bottom: 1px solid var(--et-line);
}
.fo-vacio { font-size: 12.5px; color: var(--et-ink-muted); padding: 6px 0; }

.fo-ev { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--et-line); }
.fo-ev:last-of-type { border-bottom: none; }
.fo-ev-ico {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--et-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff;
}
.fo-ev-bd { flex: 1; min-width: 0; }
.fo-ev-t { font-size: 12.5px; font-weight: 600; color: var(--et-ink); }
.fo-ev-d { font-size: 12px; color: var(--et-ink-soft); margin-top: 2px; white-space: pre-wrap; }
.fo-ev-m { font-size: 11px; color: var(--et-ink-muted); margin-top: 3px; }
.fo-pend {
  font-size: 10px; font-weight: 700; color: var(--et-warning);
  border: 1px solid var(--et-warning); border-radius: var(--et-radius-pill, 20px);
  padding: 1px 7px; margin-left: 6px;
}
.fo-pie {
  margin-top: 16px; padding-top: 11px; border-top: 1px solid var(--et-line);
  font-size: 11.5px; color: var(--et-ink-muted);
}

/* ---- Redactor de correo ----
   Correo vive en crm_shared.js y lo puede abrir cualquier pantalla, asi que
   su estilo no puede quedarse en el HTML de una sola. */
.co-chk {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--et-ink-soft);
  cursor: pointer; margin: 0;
}
.co-chk input { margin: 0; }

/* ---- Registro rapido de actividad ----
   Componente de crm_shared.js: su estilo vive aqui, no en el HTML de una
   pantalla, para que se vea igual desde donde sea que se abra. */
.rr-rapidos { display: flex; gap: 6px; flex-wrap: wrap; }
.rr-r {
  flex: 1 1 auto; border: 1px solid var(--et-line); background: var(--et-surface);
  border-radius: var(--et-radius-sm); padding: 7px 10px;
  font-size: 12px; font-weight: 600; color: var(--et-ink-soft);
  cursor: pointer; white-space: nowrap;
  transition: all var(--et-transition);
}
.rr-r:hover {
  border-color: var(--et-primary); color: var(--et-primary);
  background: var(--et-primary-50);
}

/* El pie con accion no lleva el tono apagado del pie informativo */
.fo-pie-acc {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* =========================================================================
   BOTONES SECUNDARIOS VISIBLES

   EL PROBLEMA
   .btn-light en etradie.css se define asi:

       color: #8f9cc0;  background-color: #f1f2f9;  border-color: #f1f2f9;

   El borde existe, pero es del MISMO color que el relleno, y ese relleno sobre
   una tarjeta blanca es casi invisible. El resultado es un boton que parece
   texto suelto: el usuario no sabe que puede pulsarlo hasta que lo roza por
   accidente. Ademas #8f9cc0 sobre #f1f2f9 queda por debajo del contraste
   minimo AA.

   LA CORRECCION
   Superficie blanca con borde de 1px en el token de linea, y texto en
   --et-ink-soft. Se hace aqui y no en etradie.css porque ese archivo se genera
   con el ensamblador y no se parchea a mano; ademas asi el cambio queda
   acotado al modulo y es reversible quitando un <link>.

   Las reglas de :hover que ya trae etradie.css siguen ganando por
   especificidad, asi que el comportamiento al pasar el mouse no cambia.
   ========================================================================= */

.btn-light {
  background-color: var(--et-surface);
  border-color: var(--et-line);
  color: var(--et-ink-soft);
}
.btn-light:not(:disabled):not(.disabled):hover { border-color: var(--et-primary); }

/* Los botones dentro de un fondo gris si necesitan superficie propia para no
   confundirse con el panel que los contiene. */
.et-notice .btn-light,
.det-nota-box .btn-light,
.fo-top .btn-light {
  background-color: var(--et-surface);
}

/* ---- Iconos de marca en SVG ----
   .ico-marca se movio a etradie-tipografia.css: aqui solo cargaba en el CRM y
   fuera de el los SVG de etradie_iconos.js salian a tamano por omision. */

/* =========================================================================
   COTIZADOR
   Componente de crm_shared.js, disponible desde las cinco pantallas.
   ========================================================================= */

.cz-res { max-height: 200px; overflow-y: auto; margin-top: 6px; }
.cz-r {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--et-line); border-radius: var(--et-radius-sm);
  margin-bottom: 4px; cursor: pointer; font-size: 12.5px;
  background: var(--et-surface); transition: background var(--et-transition);
}
.cz-r:hover { background: var(--et-primary-50); border-color: var(--et-primary); }
.cz-r-n { flex: 1; min-width: 0; font-weight: 600; color: var(--et-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-r-c { font-size: 11px; color: var(--et-ink-muted); flex: 0 0 auto; }
.cz-r-p { font-weight: 700; color: var(--et-ink); flex: 0 0 auto; }
.cz-vacio { font-size: 12px; color: var(--et-ink-muted); padding: 8px 0; }
.cz-vacio-box {
  border: 1px dashed var(--et-line); border-radius: var(--et-radius-sm);
  padding: 20px; text-align: center; font-size: 12.5px; color: var(--et-ink-muted);
}

.cz-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cz-tabla th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--et-ink-muted); font-weight: 700;
  padding: 6px 8px; border-bottom: 1px solid var(--et-line);
}
.cz-tabla th.n, .cz-tabla td.n { text-align: right; }
.cz-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--et-line); }
.cz-tabla input {
  width: 78px; height: 30px; text-align: right; font-size: 12.5px;
  border: 1px solid var(--et-line); border-radius: var(--et-radius-sm);
  padding: 0 7px;
}
.cz-tabla input:focus { border-color: var(--et-primary); outline: none; }
.cz-x {
  border: none; background: none; color: var(--et-ink-muted);
  cursor: pointer; font-size: 12px; padding: 4px 6px;
}
.cz-x:hover { color: var(--et-danger); }

.cz-tot {
  display: flex; justify-content: flex-end; gap: 22px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--et-line);
  font-size: 12.5px; color: var(--et-ink-soft);
}
.cz-tot b { display: block; color: var(--et-ink); font-size: 14px;
  font-weight: 700; text-align: right; }
.cz-tot .grande b { font-size: 18px; color: var(--et-primary); }

/* ---- Cotizaciones dentro de la ficha ---- */
.fo-cot-it {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--et-line);
}
.fo-cot-it:last-of-type { border-bottom: none; }
.fo-cot-bd { flex: 1; min-width: 0; }
.fo-cot-f { font-size: 12.5px; font-weight: 600; color: var(--et-ink); }
.fo-cot-m { font-size: 11px; color: var(--et-ink-muted); margin-top: 2px; }
.fo-cot-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.fo-cot-t { font-size: 13px; font-weight: 700; color: var(--et-ink); }
/* Una cotizacion vencida se marca: mandarla creyendola vigente cuesta caro */
.fo-cot-v, .fo-cot-p {
  font-size: 10px; font-weight: 700; padding: 1px 7px; margin-left: 7px;
  border-radius: var(--et-radius-pill); border: 1px solid;
}
.fo-cot-v { color: var(--et-danger);  border-color: var(--et-danger); }
.fo-cot-p { color: var(--et-warning); border-color: var(--et-warning); }
.fo-cot-no {
  font-size: 11.5px; color: var(--et-ink-soft); margin-top: 8px;
  background: var(--et-surface-2); border-radius: var(--et-radius-sm); padding: 9px 12px;
}

/* =========================================================================
   DOCUMENTO IMPRIMIBLE
   Patron DC-4: @media print aisla el documento y lo deja listo para carta.
   Cuando exista el motor de plantillas, esto se reemplaza sin tocar el resto.
   ========================================================================= */

.dc { font-size: 12.5px; color: var(--et-ink); }
.dc-hd { display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 12px; border-bottom: 2px solid var(--et-primary); margin-bottom: 14px; }
.dc-tit { font-size: 20px; font-weight: 700; color: var(--et-primary); }
.dc-folio { font-size: 13px; font-weight: 600; color: var(--et-ink-soft); margin-top: 2px; }
.dc-fec { font-size: 11.5px; color: var(--et-ink-muted); text-align: right; }
.dc-cli { margin-bottom: 14px; line-height: 1.6; }
.dc-cli-n { font-weight: 700; font-size: 14px; }
.dc-desc { background: var(--et-surface-2); border-radius: var(--et-radius-sm);
  padding: 9px 12px; margin-bottom: 14px; }
.dc-t { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.dc-t th { background: var(--et-primary); color: #fff; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; padding: 8px; text-align: left; }
.dc-t th.n, .dc-t td.n { text-align: right; }
.dc-t td { padding: 8px; border-bottom: 1px solid var(--et-line); }
.dc-g { font-size: 10.5px; color: var(--et-ink-muted); }
.dc-tot { margin-left: auto; width: 260px; }
.dc-tot > div { display: flex; justify-content: space-between; padding: 5px 0;
  border-bottom: 1px solid var(--et-line); }
.dc-tot .grande { border-bottom: none; border-top: 2px solid var(--et-primary);
  margin-top: 4px; padding-top: 8px; font-size: 15px; font-weight: 700; }
.dc-pie { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--et-line);
  font-size: 11px; color: var(--et-ink-muted); }

@media print {
  /* Se oculta todo y se saca el documento del modal: sin esto la impresion
     saldria con el tablero de fondo y el documento recortado en su caja. */
  body * { visibility: hidden !important; }
  #dc-overlay, #dc-overlay * { visibility: visible !important; }
  #dc-overlay {
    position: absolute !important; inset: 0 !important;
    background: #fff !important; display: block !important;
    padding: 0 !important; overflow: visible !important;
  }
  #dc-overlay .modal-box {
    max-width: 100% !important; width: 100% !important;
    box-shadow: none !important; border: none !important;
    max-height: none !important;
  }
  #dc-overlay .modal-body { overflow: visible !important; max-height: none !important; }
  .no-print { display: none !important; }
  @page { size: letter; margin: 14mm; }
}


/* =========================================================================
   ALCANCE DE UNA CIFRA: "Hoy" vs "Del periodo"

   Los tableros mezclan dos naturalezas de dato y eso confunde al filtrar:
   el pipeline abierto es estado de HOY (no existe "el pipeline abierto de
   noviembre"), mientras que lo ganado, la conversion o el cumplimiento SI
   dependen del periodo elegido. Sin decirlo, cambiar el filtro parece no
   hacer nada.

   Se usa en el tablero de direccion y en el panel del supervisor, por eso
   vive aqui y no en el <style> de una pantalla (regla eDS: lo que usan dos
   o mas pantallas sube al compartido).
   ========================================================================= */
.et-scope { font-size:9.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 7px; border-radius:var(--et-radius-pill);
  white-space:nowrap; margin-left:auto; flex:0 0 auto }
.et-scope-hoy { background:var(--et-surface-2); color:var(--et-ink-muted) }
.et-scope-per { background:var(--et-primary-50); color:var(--et-primary) }
/* En el encabezado de una tarjeta grande va a la derecha del titulo */
.et-scope-hd { margin-left:8px; vertical-align:middle }