/* SPDX-License-Identifier: AGPL-3.0-only
 * S4 Sales · ficha emergente (ver s4-sales-ficha.js). Colores solo con variables de tokens.css.
 * Este mismo fichero se inyecta dentro del iframe: ahí `html.s4-embebida` quita lateral, barra y marco.
 */

/* ── Ventana (en la página de Sales) ─────────────────────────────────────────────────────────────── */
.s4-ficha {
  position: fixed;
  inset: 0;
  z-index: 2147482000; /* por debajo de la barra común (2147483000): la barra sigue visible */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--s4-barra-alto, 40px) + 16px) 24px 20px;
  visibility: hidden;
  pointer-events: none;
}
.s4-ficha--abierta { visibility: visible; pointer-events: auto; }
.s4-ficha__fondo {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--txt-primary, #001f54) 46%, transparent);
  -webkit-backdrop-filter: blur(5px) saturate(1.1);
  backdrop-filter: blur(5px) saturate(1.1);
  opacity: 0;
}
.s4-ficha__hoja {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1240px, 100%);
  height: 100%;
  max-height: 920px;
  overflow: hidden;
  background: var(--bg-surface-1, #fff);
  border: 1px solid var(--border-subtle, #dfe5e6);
  border-radius: 14px;
  box-shadow: 0 24px 64px -12px rgba(0, 16, 42, .45), 0 2px 8px rgba(0, 16, 42, .16);
  outline: none;
  will-change: transform, opacity;
}
.s4-ficha__barra {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px 0 16px;
  border-bottom: 1px solid var(--border-subtle, #dfe5e6);
  background: var(--bg-surface-1, #fff);
}
.s4-ficha__tipo {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-seleccion, rgba(0, 31, 84, .09));
  color: var(--txt-secondary, #26406b);
  font: 600 11px/18px var(--font-sans, 'Inter Variable', system-ui, sans-serif);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.s4-ficha__titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--txt-primary, #001f54);
  font: 500 13px/20px var(--font-sans, 'Inter Variable', system-ui, sans-serif);
}
.s4-ficha__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--txt-secondary, #26406b);
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, transform .14s ease;
}
.s4-ficha__btn:hover { background: var(--bg-hover, #dfe5e6); color: var(--txt-primary, #001f54); }
.s4-ficha__btn:active { transform: scale(.92); }
.s4-ficha__btn:focus-visible { outline: 2px solid var(--focus-ring, #0088dd); outline-offset: 1px; }

.s4-ficha__cuerpo { position: relative; flex: 1; min-height: 0; background: var(--bg-surface-1, #fff); }
.s4-ficha__marco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg-surface-1, #fff);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .26s ease, transform .32s cubic-bezier(.22,1,.36,1);
}
.s4-ficha__marco--visible { opacity: 1; transform: none; }

/* Esqueleto mientras carga la ficha */
.s4-ficha__carga {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 28px 32px;
  transition: opacity .2s ease;
}
.s4-ficha__carga--fuera { opacity: 0; pointer-events: none; }
.s4-ficha__carga i {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--bg-hover, #dfe5e6) 25%, var(--bg-seleccion, rgba(0,31,84,.09)) 37%, var(--bg-hover, #dfe5e6) 63%);
  background-size: 400% 100%;
  animation: s4-ficha-brillo 1.3s ease-in-out infinite;
}
.s4-ficha__carga i:nth-child(1) { width: 52%; height: 22px; }
.s4-ficha__carga i:nth-child(2) { width: 92%; height: 34px; border-radius: 10px; margin-bottom: 8px; }
.s4-ficha__carga i:nth-child(3) { width: 78%; }
.s4-ficha__carga i:nth-child(4) { width: 64%; }
.s4-ficha__carga i:nth-child(5) { width: 86%; }
@keyframes s4-ficha-brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (max-width: 767px) {
  .s4-ficha { align-items: flex-end; padding: calc(var(--s4-barra-alto, 48px) + 8px) 0 0; }
  .s4-ficha__hoja { width: 100%; max-height: none; border-radius: 16px 16px 0 0; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .s4-ficha__marco, .s4-ficha__btn { transition: none; }
  .s4-ficha__carga i { animation: none; }
}

/* ── Dentro del iframe: solo la ficha, sin lateral, barra ni marco ──────────────────────────────── */
html.s4-embebida s4-barra { display: none !important; }
html.s4-embebida, html.s4-embebida body { background: var(--bg-surface-1, #fff) !important; }
html.s4-embebida body { padding-top: 0 !important; }
html.s4-embebida #root { height: 100dvh !important; }
html.s4-embebida #root > div:not(#captcha-widget) { padding: 0 !important; background: transparent !important; }
html.s4-embebida #root > div:not(#captcha-widget) > div {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html.s4-embebida #root > div:not(#captcha-widget) > div > div:first-child { display: none !important; }
html.s4-embebida #root > div:not(#captcha-widget) > div > div:nth-child(2) { border-left: 0 !important; }
html.s4-embebida .s4-migas { height: 40px !important; min-height: 40px !important; }

/* ── Barra de proceso de la ficha (ver s4-sales-proceso.js) ─────────────────────────────────────── */
.s4-pr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle, #dfe5e6);
  background: var(--bg-surface-1, #fff);
  animation: s4-pr-entra .32s cubic-bezier(.22,1,.36,1) both;
}
@keyframes s4-pr-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.s4-pr-etapas { flex: 1; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.s4-pr-etapas::-webkit-scrollbar { display: none; }
.s4-pr-etapa {
  position: relative;
  flex: 1 1 0;
  min-width: 84px;
  height: 30px;
  margin-right: -6px;
  padding: 0 14px 0 20px;
  border: 0;
  background: var(--bg-hover, #dfe5e6);
  color: var(--txt-secondary, #26406b);
  font: 500 12px/30px var(--font-sans, 'Inter Variable', system-ui, sans-serif);
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  transition: background-color .18s ease, color .18s ease, filter .18s ease;
}
.s4-pr-etapa:first-child { padding-left: 14px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.s4-pr-etapa span { display: block; overflow: hidden; text-overflow: ellipsis; }
.s4-pr-etapa:hover { filter: brightness(.96); }
.s4-pr-etapa--hecha { background: color-mix(in srgb, var(--bg-accent-primary, #005f9b) 16%, var(--bg-surface-1, #fff)); color: var(--txt-primary, #001f54); }
.s4-pr-etapa--actual { background: var(--bg-accent-primary, #005f9b); color: var(--txt-on-accent, #fff); font-weight: 600; }
.s4-pr-acciones { flex: none; display: flex; gap: 8px; align-items: center; }
.s4-pr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-default, #c8d1d4);
  border-radius: 8px;
  background: var(--bg-surface-1, #fff);
  color: var(--txt-primary, #001f54);
  font: 500 12px/1 var(--font-sans, 'Inter Variable', system-ui, sans-serif);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.s4-pr-btn:hover { background: var(--bg-hover, #dfe5e6); }
.s4-pr-btn:active { transform: scale(.97); }
.s4-pr-btn:disabled { opacity: .55; pointer-events: none; }
.s4-pr-btn--primario { background: var(--bg-accent-primary, #005f9b); border-color: transparent; color: var(--txt-on-accent, #fff); }
.s4-pr-btn--primario:hover { background: var(--bg-accent-primary-hover, #004a78); }

.s4-pr-form {
  position: fixed;
  right: 24px;
  top: 150px;
  z-index: 2147483200;
  width: 320px;
  padding: 14px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--border-subtle, #dfe5e6);
  border-radius: 12px;
  background: var(--bg-surface-1, #fff);
  box-shadow: 0 16px 40px -8px rgba(0, 16, 42, .35);
  animation: s4-pr-pop .22s cubic-bezier(.22,1.1,.36,1) both;
}
@keyframes s4-pr-pop { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
.s4-pr-form__t { font: 600 13px/1.3 var(--font-sans, 'Inter Variable', system-ui, sans-serif); color: var(--txt-primary, #001f54); }
.s4-pr-form__c { display: grid; gap: 4px; font: 500 11px/1.2 var(--font-sans, 'Inter Variable', system-ui, sans-serif); color: var(--txt-tertiary, #4d6287); }
.s4-pr-form__c input, .s4-pr-form__c select {
  height: 32px; padding: 0 10px; border: 1px solid var(--border-default, #c8d1d4); border-radius: 8px;
  background: var(--bg-surface-1, #fff); color: var(--txt-primary, #001f54); font: 400 13px var(--font-sans, 'Inter Variable', system-ui, sans-serif);
}
.s4-pr-form__c input:focus, .s4-pr-form__c select:focus { outline: 2px solid var(--focus-ring, #0088dd); outline-offset: -1px; }
.s4-pr-form__b { display: flex; justify-content: flex-end; gap: 8px; }

.s4-pr-aviso {
  position: fixed; left: 50%; bottom: 26px; z-index: 2147483300; transform: translate(-50%, 12px); opacity: 0;
  max-width: min(90vw, 460px); padding: 10px 16px; border-radius: 10px;
  background: var(--txt-primary, #001f54); color: var(--bg-surface-1, #fff);
  font: 500 13px/1.35 var(--font-sans, 'Inter Variable', system-ui, sans-serif);
  box-shadow: 0 10px 28px -6px rgba(0, 16, 42, .45);
  transition: opacity .22s ease, transform .3s cubic-bezier(.22,1.1,.36,1);
}
.s4-pr-aviso--on { opacity: 1; transform: translate(-50%, 0); }
.s4-pr-aviso--mal { background: #b3261e; color: #fff; }
@media (max-width: 767px) {
  .s4-pr { flex-direction: column; align-items: stretch; }
  .s4-pr-acciones { overflow-x: auto; }
  .s4-pr-form { right: 12px; left: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .s4-pr, .s4-pr-form { animation: none; } .s4-pr-aviso { transition: none; } }

/* ── Tablero «Reactivación» (ver s4-sales-tablero.js) ──────────────────────────────────────────── */
.s4-tablero__hoja { width: min(1040px, 100%); max-height: 720px; height: auto; }
.s4-tb-cuerpo { padding: 22px 26px 28px; overflow: auto; display: grid; gap: 18px; }
.s4-tb-carga { display: grid; gap: 12px; } .s4-tb-carga i { display: block; height: 90px; border-radius: 12px; background: var(--bg-hover, #dfe5e6); animation: s4-ficha-brillo 1.3s ease-in-out infinite; background-size: 400% 100%; background-image: linear-gradient(90deg, var(--bg-hover, #dfe5e6) 25%, var(--bg-seleccion, rgba(0,31,84,.09)) 37%, var(--bg-hover, #dfe5e6) 63%); }
.s4-tb-error { color: var(--txt-secondary, #26406b); font: 400 13px var(--font-sans, 'Inter Variable', system-ui, sans-serif); }
.s4-tb-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.s4-tb-kpi, .s4-tb-panel {
  padding: 14px 16px; border: 1px solid var(--border-subtle, #dfe5e6); border-radius: 12px; background: var(--bg-surface-1, #fff);
  opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * 60ms);
}
.s4-tb-cuerpo--on .s4-tb-kpi, .s4-tb-cuerpo--on .s4-tb-panel { opacity: 1; transform: none; }
.s4-tb-kpi__t { font: 500 11px/1.3 var(--font-sans, 'Inter Variable', system-ui, sans-serif); color: var(--txt-tertiary, #4d6287); text-transform: uppercase; letter-spacing: .03em; }
.s4-tb-kpi__v { margin: 6px 0 2px; font: 600 30px/1.1 var(--font-sans, 'Inter Variable', system-ui, sans-serif); color: var(--txt-primary, #001f54); font-variant-numeric: tabular-nums; }
.s4-tb-kpi__v small { font-size: 16px; margin-left: 2px; color: var(--txt-secondary, #26406b); }
.s4-tb-kpi__s { min-height: 30px; font: 400 12px/1.3 var(--font-sans, 'Inter Variable', system-ui, sans-serif); color: var(--txt-secondary, #26406b); }
.s4-tb-barra { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--bg-hover, #dfe5e6); overflow: hidden; position: relative; }
.s4-tb-barra i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--bg-accent-primary, #005f9b); transition: width .9s cubic-bezier(.22,1,.36,1) .2s; }
.s4-tb-cuerpo--on .s4-tb-barra i { width: var(--w); }
.s4-tb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s4-tb-panel h3 { margin: 0 0 12px; font: 600 13px/1.3 var(--font-sans, 'Inter Variable', system-ui, sans-serif); color: var(--txt-primary, #001f54); }
.s4-tb-fila { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; margin-bottom: 8px; font: 400 12px var(--font-sans, 'Inter Variable', system-ui, sans-serif); color: var(--txt-secondary, #26406b); }
.s4-tb-barra--grande { height: 20px; margin: 0; border-radius: 6px; } .s4-tb-barra--grande i { border-radius: 6px; }
.s4-tb-barra--grande b { position: absolute; left: 8px; top: 0; font: 600 11px/20px var(--font-sans, 'Inter Variable', system-ui, sans-serif); color: var(--txt-primary, #001f54); mix-blend-mode: normal; }
.s4-tb-pie { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle, #dfe5e6); font: 400 12px var(--font-sans, 'Inter Variable', system-ui, sans-serif); color: var(--txt-secondary, #26406b); }
@media (max-width: 900px) { .s4-tb-kpis { grid-template-columns: repeat(2, 1fr); } .s4-tb-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .s4-tb-kpi, .s4-tb-panel, .s4-tb-barra i { transition: none; } }

/* Respuesta inmediata al pulsar: línea de progreso bajo la barra (s4-sales.js) y estado «pulsado» sin esperar a la aplicación. */
.s4-progreso {
  position: fixed; left: 0; right: 0; top: var(--s4-barra-alto, 40px); height: 2px; z-index: 2147482900;
  background: var(--bg-accent-primary, #2f7fd6); transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none;
}
.s4-progreso--corre { opacity: 1; transform: scaleX(.86); transition: transform 1100ms cubic-bezier(.08, .8, .2, 1), opacity 60ms linear; }
.s4-progreso--corre.s4-progreso--fin { transform: scaleX(1); opacity: 0; transition: transform 140ms ease-out, opacity 260ms ease-out 140ms; }
.navigation-drawer-item:active { background: var(--bg-seleccion, rgba(0, 31, 84, .09)) !important; }
[data-selectable-id] { transition: transform 90ms ease-out; }
[data-selectable-id]:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .s4-progreso--corre, [data-selectable-id] { transition: none; } }