/* ./static/css/consorcios/simulacao/modules/history/sim-hist.css */
/* Modernização + responsividade + acessibilidade + FIX do header
   - .simhist-summary SEMPRE display:flex (mesmo com details[open])
   - Remove marcadores nativos (Firefox/WebKit)
   - Coluna de ações limitada (max-content) para não empurrar o summary
   - Ellipsis no título e contenção de largura
*/

/* =========================
   Tokens & Design System
   ========================= */
:root{
  /* Cores base */
  --sh-border: #e2e8f0;
  --sh-dark: #0f172a;
  --sh-muted: #64748b;
  --sh-card-bg: #fff;
  --sh-bg: #f8fafc;
  --sh-shadow: 0 12px 28px rgba(2,8,23,.08);
  --sh-shadow-sm: 0 6px 20px rgba(2,8,23,.06);
  --sh-ring: 0 0 0 3px rgba(59,130,246,.25);

  /* WhatsApp */
  --wa-green: #25D366;

  /* Botões */
  --btnH: 44px;
  --btnRadius: 12px;
  --btnPadY: .55rem;
  --btnPadX: .9rem;

  /* Espaçamentos */
  --gap-1: .45rem;
  --gap-2: .6rem;
  --gap-3: .85rem;
  --gap-4: 1rem;

  /* Tipografia fluida */
  --fz-0: clamp(.82rem, .78rem + .3vw, .92rem);
  --fz-1: clamp(.9rem, .86rem + .35vw, 1rem);
  --fz-2: clamp(1rem, .96rem + .45vw, 1.15rem);

  /* Raio e borda */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;

  /* Paleta primária (fallback) */
  --primary-600: var(--color-primary-600, #2563eb);
  --primary-700: var(--color-primary-700, #1d4ed8);

  /* Transições */
  --tr-fast: .18s ease;
  --tr-base: .25s ease;
}

/* Dark mode opcional */
@media (prefers-color-scheme: dark){
  :root{
    --sh-border: #263245;
    --sh-dark: #e5e7eb;
    --sh-muted: #9aa2af;
    --sh-card-bg: #0b1220;
    --sh-bg: #0a0f1a;
    --sh-shadow: 0 12px 28px rgba(0,0,0,.5);
    --sh-shadow-sm: 0 6px 20px rgba(0,0,0,.45);
    --sh-ring: 0 0 0 3px rgba(37,99,235,.35);
  }
}

/* Redução de movimento */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================
   Base
   ========================= */
.simhist-widget{ margin-top: .75rem; }

.simhist{
  position: relative;
  border:1px solid var(--sh-border);
  border-radius: var(--radius-lg);
  background: var(--sh-card-bg);
  box-shadow: var(--sh-shadow);
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  overflow: clip;
}
.simhist-shell{
  position:relative;
}

/* =========================
   Summary (header) — SEMPRE FLEX
   ========================= */
details.simhist > summary.simhist-summary{
  order:1;
  flex:1 1 100%;
  width:100%;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap: var(--gap-3);
  padding: 1.05rem 1.5rem 1.05rem 1.2rem;
  list-style:none;
  cursor:pointer;
  flex-wrap:wrap;
  min-width: 0;
  min-height: var(--btnH);
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb,33,40,108),.08) 0%, rgba(2,8,23,.02) 100%);
  border-bottom:1px solid var(--sh-border);
  padding-right: calc(1.5rem + 150px);
}
.simhist-summary::-webkit-details-marker,
.simhist-summary::marker{ display:none; content:""; }
.simhist-summary:hover{
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb,33,40,108),.12) 0%, rgba(2,8,23,.04) 100%);
}
.simhist-title{
  font-weight:800;
  color:var(--sh-dark);
  line-height:1.2;
  flex:1 1 auto;
  min-width:0;
  font-size: var(--fz-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-text{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
  flex:1 1 auto;
}
.summary-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.65rem;
  flex:0 0 auto;
  margin-left:auto;
  flex-wrap:wrap;
}
.summary-hint{
  font-size:.88rem;
  color:var(--sh-muted);
  white-space:normal;
}
.simhist-sub{
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  padding:.4rem .95rem;
  border-radius:999px;
  background:rgba(var(--bs-primary-rgb,33,40,108),.08);
  color:var(--sh-dark);
  font-weight:800;
  font-size:.95rem;
  white-space:nowrap;
  margin-left:0;
}
.simhist-sub .count{ font-size:1.15rem; }
.simhist-sub .divider{
  opacity:.6;
  font-weight:400;
}
.summary-clear{
  position:absolute;
  top: 1rem;;
  right:1.25rem;
  z-index:3;
  white-space:nowrap;
}
.summary-clear[disabled]{
  opacity:.5;
  cursor:not-allowed;
}
.summary-toggle{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--sh-border);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  box-shadow: var(--sh-shadow-sm);
  transition: border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base);
}
.summary-toggle svg{
  transition: transform var(--tr-base);
  transform-origin:center;
}
.simhist[open] .summary-toggle{
  border-color: rgba(var(--bs-primary-rgb,33,40,108),.3);
  box-shadow:0 14px 32px rgba(15,23,42,.18);
}
.simhist[open] .summary-toggle svg{ transform: rotate(180deg); }

.simhist-blur{
  filter: blur(6px);
  text-shadow: 0 0 12px rgba(15,23,42,.55);
  user-select:none;
  pointer-events:none;
}
.simhist-blur::selection{
  background: transparent;
}

@media (prefers-color-scheme: dark){
  details.simhist > summary.simhist-summary{
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb,33,40,108),.25) 0%, rgba(2,8,23,.25) 100%);
  }
  .summary-toggle{
    background:#0b1220;
    box-shadow: var(--sh-shadow-sm);
  }
  .simhist-sub{
    background:rgba(var(--bs-primary-rgb,33,40,108),.25);
  }
}

@media (max-width: 960px){
  details.simhist > summary.simhist-summary{
    border-bottom:1px solid var(--sh-border);
    padding-right:1.5rem;
  }
  .summary-meta{
    justify-content:flex-start;
  }
  .summary-clear{
    position:static;
    width:100%;
    margin:0 1.25rem .75rem;
  }
  .summary-toggle{
    margin-left:auto;
  }
}

/* =========================
   Botões (reutilizáveis)
   ========================= */
.simhist .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: var(--btnPadY) var(--btnPadX);
  border:1px solid var(--sh-border);
  background: var(--sh-bg);
  color: var(--sh-dark);
  border-radius: var(--btnRadius);
  font-weight:700;
  line-height:1.2;
  min-height: var(--btnH);
  font-size: var(--fz-0);
  transition: background var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
  text-align:center;
}
.simhist .btn:hover{
  background:#eef2f7;
  transform: translateY(-1px);
  box-shadow: var(--sh-shadow-sm);
}
.simhist .btn:active{ transform: translateY(0); }
.simhist .btn:focus-visible{
  outline: none;
  box-shadow: var(--sh-ring);
}
.simhist .btn .btn-label{ display:inline-block; }

/* Tamanhos */
.simhist .btn-xs{
  font-size:.82rem;
  padding:.35rem .6rem;
  min-height:34px;
  border-radius: var(--radius-sm);
}

/* Variações */
.simhist .btn-light{
  background:#fff;
}
.simhist .btn-primary{
  background: var(--primary-600);
  color:#fff;
  border-color: var(--primary-700);
}
.simhist .btn-primary:hover{
  filter: brightness(.97);
  border-color: var(--primary-600);
}
.simhist .btn-whatsapp{
  background:var(--wa-green);
  color:#fff;
  border-color:#1fb356;
}
.simhist .btn-whatsapp:hover{ filter:brightness(.97); }

/* Upsize em desktops para CTAs */
@media (min-width: 1024px){
  .summary-meta{
    gap:.8rem;
  }
  .summary-clear.btn,
  .summary-clear.btn-xs{
    padding:.7rem 1.05rem;
    min-height:52px;
    font-size:.95rem;
    border-radius: var(--radius-md);
    min-width: 132px;
  }
}

/* Ícones */
.i{width:16px;height:16px;display:inline-block;vertical-align:middle;fill:currentColor}
.i-wa{width:18px;height:18px;fill:currentColor}

/* =========================
   Corpo (lista / cards)
   ========================= */
.simhist-list-wrap{
  padding:.6rem var(--gap-3) var(--gap-3);
  border-top:0;
  background: linear-gradient(180deg, rgba(2,8,23,.02), transparent 60%);
  min-width: 0; /* impede overflow horizontal quando houver muitos cards */
  order:2;
  flex:1 1 100%;
  width:100%;
}

/* Grid comparativo responsivo */
.cmp-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap: var(--gap-4);
  align-items: stretch;
}
@media (max-width: 920px){
  .cmp-grid{ grid-template-columns:1fr; }
}

/* Card */
.cmp-card{
  border:1px solid var(--sh-border);
  border-radius: var(--radius-lg);
  background: var(--sh-card-bg);
  box-shadow: var(--sh-shadow-sm);
  overflow:hidden;
  position:relative;
  transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-fast);
  will-change: transform;
}
.cmp-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--sh-shadow);
  border-color: color-mix(in oklab, var(--sh-border) 70%, var(--primary-600));
}

/* Cabeçalho do card */
.cmp-card-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.6rem;
  padding:.9rem 1rem;
  background:linear-gradient(180deg,#f9fafb, #fff);
  border-bottom:1px dashed var(--sh-border);
}
@media (prefers-color-scheme: dark){
  .cmp-card-head{
    background:linear-gradient(180deg,#0e1729,#0b1220);
  }
}

.cmp-chip{
  background:#eef6ff;
  border:1px dashed var(--sh-border);
  border-radius:999px;
  padding:.15rem .6rem;
  font-weight:800;
  font-size:.82rem;
  color:#0b3a7a;
}
@media (prefers-color-scheme: dark){
  .cmp-chip{
    background:#0f2546;
    color:#dbeafe;
    border-color:#15325c;
  }
}

.cmp-title{
  margin:0;
  font-size:1rem;
  font-weight:800;
  color:var(--sh-dark);
  letter-spacing:.2px;
}
.cmp-sub{
  color:#64748b;
  font-weight:700;
  font-size:.9rem;
}

/* KPIs */
.kpi-list{
  list-style:none;
  margin:0;
  padding:.8rem 1rem;
  display:grid;
  grid-template-columns:1fr;
  gap:.4rem;
}
.kpi-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border-bottom:1px dashed #eef2f7;
  padding:.45rem 0;
}
.kpi-list li:last-child{ border-bottom:0; }

.kpi-label{
  color:#6b7280;
  font-size: .92rem;
}
.kpi-value{
  font-weight:800;
  color:#0f172a;
  font-size: var(--fz-1);
}
.kpi-sub{
  display:block;
  margin-top:.15rem;
  font-size:.85rem;
  color:#64748b;
  font-weight:600;
}

/* Ações do card */
.cmp-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  padding:.8rem 1rem;
  justify-content:flex-end;
  align-items:center;
  border-top:1px dashed #eef2f7;
  background:#fff;
}
.cmp-actions .btn{
  min-width:120px;
  white-space:nowrap;
}

/* Ações mobile empilhadas */
@media (max-width: 640px){
  .cmp-actions{
    flex-direction:column;
    align-items:stretch;
    gap:.5rem;
  }
  .cmp-actions .btn{
    width:100%;
    min-width:0;
    justify-content:center;
  }
}

/* Utilidades */
.muted{
  color:#64748b;
  padding:.35rem 0 .1rem;
  font-size:.92rem;
}

/* =========================
   Estados interativos extras
   ========================= */
.simhist:hover{
  border-color: color-mix(in oklab, var(--sh-border) 75%, var(--primary-600));
}

/* Outline consistente para elementos clicáveis do widget */
.simhist :where(button, a, [role="button"], .simhist-summary){
  border-radius: var(--radius-sm);
}
.simhist :where(button, a, [role="button"], .simhist-summary):focus-visible{
  outline: none;
  box-shadow: var(--sh-ring);
}

/* =========================
   Tipografia fina
   ========================= */
.simhist,
.simhist *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}

/* =========================
   Microajustes responsivos
   ========================= */
@media (min-width: 1280px){
  .simhist-title{ font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem); }
  .kpi-value{ font-size: clamp(1rem, .95rem + .4vw, 1.125rem); }
}