/* ============================================
   PLATIIS — Panel admin: gráficas de Métricas (27-oct-2026)
   Una serie = un color (verde Platiis brillante); rojo y ámbar solo para estados (mora, por desembolsar).
   El texto nunca va del color de la serie: los valores y etiquetas van en blanco.
   ============================================ */
:root {
  --g-serie: #4DF0B4;
  --g-neto: #E9FFF6;
  --g-rojo: #FF7468;
  --g-ambar: #FFC56B;
  --g-neutro: #C7DDF0;
  --g-rejilla: rgba(255, 255, 255, .16);
}
.g-wrap { display: grid; gap: 14px; margin: 4px 0 26px; }
.g-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .g-row { grid-template-columns: minmax(0, 1fr); } }

/* La cifra principal de la vista */
.g-hero { display: grid; gap: 2px; padding: 2px 4px 4px; }
.g-hero-k { font-size: 13px; color: var(--ink2); }
.g-hero-v { font-size: clamp(40px, 6vw, 56px); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ink); }
.g-hero-d { font-size: 12.5px; color: var(--ink3); }

/* Tarjeta de vidrio de cada gráfica */
.g-card { position: relative; min-width: 0; border-radius: var(--r); padding: 18px 18px 12px; background: var(--glass); box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); text-shadow: var(--texto-sobre-vidrio); }
@supports (backdrop-filter: url(#lente)) { .g-card { backdrop-filter: var(--glass-lente); } }
.g-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .18) 22%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .14) 78%, rgba(255, 255, 255, .55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.g-head { margin-bottom: 8px; }
.g-t { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.g-sub { font-size: 12.5px; color: var(--ink3); margin-top: 1px; }
.g-plot { position: relative; }
.g-plot svg { display: block; max-width: 100%; overflow: visible; }

/* Marcas */
.g-grid { stroke: var(--g-rejilla); stroke-width: 1; }
.g-line { fill: none; stroke: var(--g-serie); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(77, 240, 180, .45)); }
.g-dot { fill: var(--g-serie); stroke: rgba(10, 40, 70, .85); stroke-width: 2; }
.g-cross { stroke: rgba(255, 255, 255, .55); stroke-width: 1; }
.g-track { fill: rgba(255, 255, 255, .14); }
.g-link { stroke: rgba(255, 255, 255, .45); stroke-width: 1; stroke-dasharray: 3 3; }
.g-ax { fill: var(--ink3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.g-lbl { fill: var(--ink); font-size: 13px; }
.g-val { fill: var(--ink); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.g-plot svg text { paint-order: stroke; stroke: rgba(4, 24, 48, .28); stroke-width: 2px; stroke-linejoin: round; }
.g-hit { cursor: default; }
.g-hit:hover path, .g-hit:hover rect:not(.g-track) { filter: brightness(1.12); }

/* Detalle al pasar el mouse */
.g-tip[hidden] { display: none; }
.g-tip { position: absolute; z-index: 5; pointer-events: none; display: grid; gap: 1px; min-width: 120px; padding: 9px 12px; border-radius: 12px;
  background: rgba(6, 22, 42, .82); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12.5px; color: #fff; text-shadow: none; }
.g-tip b { font-weight: 500; font-size: 12px; color: rgba(255, 255, 255, .75); }
.g-tip span { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.g-tip i { font-style: normal; color: rgba(255, 255, 255, .7); }

/* Tabla con los datos */
.g-data { margin-top: 6px; font-size: 12.5px; }
.g-data summary { cursor: pointer; color: var(--ink3); width: max-content; padding: 4px 0; }
.g-data summary:hover { color: var(--ink); }
.g-data .mini { margin-top: 6px; }

/* Las curvas de "¿el negocio funciona?" */
.g-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { .g-row2 { grid-template-columns: minmax(0, 1fr); } }
.g-sub2 { display: grid; gap: 2px; margin: 14px 4px 0; }
.g-sub2 b { font-size: 17px; font-weight: 500; color: var(--ink); text-shadow: 0 1px 2px rgba(0, 18, 36, .55); }
.g-sub2 span { font-size: 13px; color: var(--ink2); text-shadow: 0 1px 1px rgba(0, 18, 36, .6); }
.g-zona { fill: rgba(77, 240, 180, .10); }
.g-meta { stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; stroke-dasharray: 5 4; }
.g-cac { stroke: var(--g-ambar); stroke-width: 2; }
.g-cruce { fill: none; stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7)); }
.g-estado { font-size: 13px; color: var(--ink); margin: 6px 0 2px; }
.g-cac-in { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.g-cac-in label { font-size: 12.5px; color: var(--ink2); flex: 1 1 100%; }
.g-cac-in .field { flex: 1 1 160px; max-width: 220px; height: 36px; color: var(--ink); }
.g-falta { fill: rgba(255, 116, 104, .16); }
.g-card > .btn { margin: 6px 0 4px; }