/* Dale formato a tu Excel · Pro
   Glassmorphism claro: paneles de vidrio esmerilado sobre manchas pastel.
   Acento principal verde menta; el texto oscuro garantiza el contraste. */

:root {
  --bg: #f4f6fb;
  --surface: rgba(255, 255, 255, 0.55);
  --surface-strong: rgba(255, 255, 255, 0.82);
  --surface-muted: rgba(255, 255, 255, 0.45);
  --surface-hover: rgba(255, 255, 255, 0.75);
  --border: rgba(255, 255, 255, 0.75);
  --border-soft: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --foreground: #1f2937;
  --muted: #556070;
  --subtle: #6b7585;
  /* Acento menta (pastel) con versión intensa para texto y bordes */
  --accent: #a7e8d3;
  --accent-strong: #2fa488;
  --accent-ink: #0f3d33;
  --accent-soft: rgba(167, 232, 211, 0.35);
  --peach: #ffd0ba;
  --sky: #bfddfe;
  --butter: #ffe9a8;
  --rose: #fbc8dc;
  --success: #13795f;
  --danger: #b42318;
  --warn: #a16207;
  --info: #1d5fa8;
  --radius: 18px;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -14px rgba(15, 23, 42, 0.18);
  --glass-blur: blur(22px) saturate(170%);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--foreground);
  background:
    radial-gradient(900px 520px at 0% -10%, rgba(167, 232, 211, 0.55) 0%, transparent 60%),
    radial-gradient(800px 480px at 100% 0%, rgba(191, 221, 254, 0.6) 0%, transparent 55%),
    radial-gradient(700px 500px at 50% 110%, rgba(255, 208, 186, 0.45) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Manchas pastel detrás del vidrio */
.blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.7; animation: float 26s ease-in-out infinite alternate; }
.blob-1 { width: 420px; height: 420px; background: #a7e8d3; top: -100px; left: -80px; }
.blob-2 { width: 380px; height: 380px; background: #ffd0ba; top: 38%; right: -120px; animation-delay: -8s; }
.blob-3 { width: 360px; height: 360px; background: #bfddfe; bottom: -120px; left: 30%; animation-delay: -14s; }

@keyframes float {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(40px, 50px) scale(1.08); }
}

/* Superficies de vidrio */
.glass, .card, .kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .card, .kpi { background: rgba(255, 255, 255, 0.92); }
}

.card { display: flex; flex-direction: column; min-width: 0; }
.card-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  min-height: 56px; padding: 0 20px; border-bottom: 1px solid var(--border-soft);
}
.card-header h3 { margin: 0; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.card-meta {
  font-size: 0.75rem; color: var(--muted); padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--border-soft); background: var(--surface-muted);
}
.card-content { padding: 20px; flex: 1; min-width: 0; }

/* Encabezado del sitio */
.site-header {
  max-width: 1200px; margin: 0 auto; padding: 28px 20px 8px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid; place-items: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 12px; font-size: 20px;
  background: var(--accent); color: var(--accent-ink); border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
h1 { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 650; letter-spacing: -0.02em; }
.pro-badge {
  display: inline-block; vertical-align: middle; margin-left: 4px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 6px; color: #6b2e16; background: var(--peach);
}
.tagline { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.privacy-badge {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border-radius: 999px;
  background: var(--surface-strong); border: 1px solid var(--border); color: var(--accent-ink);
  font-size: 0.82rem; font-weight: 500; box-shadow: var(--shadow);
}

main { max-width: 1200px; margin: 0 auto; padding: 16px 20px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

h2 { margin: 0 0 12px; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
h3 { margin: 0 0 12px; font-size: 0.95rem; font-weight: 600; }
.subhead { margin-top: 22px; }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.eyebrow { margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 700; color: var(--muted); }

.step, .panel { padding: 22px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.section-head h2 { margin: 0; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px; border-radius: 10px;
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; color: var(--foreground);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:focus-visible, select:focus-visible, input:focus-visible, canvas:focus-visible, summary:focus-visible, .style-card:focus-within {
  outline: 2px solid var(--accent-strong); outline-offset: 2px;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: rgba(47, 164, 136, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px -2px rgba(47, 164, 136, 0.35); }
.btn-primary:hover { background: #93dfc6; }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: var(--surface-strong); border-color: var(--border-strong); }
.btn-ghost:hover { background: #ffffff; }
.btn-lg { min-height: 46px; padding: 10px 22px; font-size: 0.95rem; }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* Zona de carga */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 230px; padding: 28px; text-align: center; cursor: pointer;
  border: 1.5px dashed rgba(47, 164, 136, 0.45); border-radius: 14px; background: var(--surface-muted);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dropzone:hover, .dropzone.is-over { background: var(--accent-soft); border-color: var(--accent-strong); }
.dropzone-icon { font-size: 36px; }

.alert { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; }
.alert-error { background: rgba(253, 226, 225, 0.85); border: 1px solid rgba(180, 35, 24, 0.25); color: var(--danger); }

/* Cancha */
.court-wrap { width: 100%; border-radius: 12px; overflow: hidden; margin-top: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); }
#court { display: block; width: 100%; touch-action: none; user-select: none; }
.court-actions { margin-top: 12px; display: flex; justify-content: flex-end; }

/* Dashboard */
#dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.dash-header { padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.select-type {
  font: inherit; font-size: 1.3rem; font-weight: 650; letter-spacing: -0.02em; color: var(--foreground);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 4px 40px 4px 12px; cursor: pointer; appearance: none;
  background-color: var(--surface-strong);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.file-name { margin: 6px 0 0; color: var(--muted); font-size: 0.85rem; word-break: break-all; }

/* Tarjetas KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; min-width: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.kpi:hover { background-color: var(--surface-hover); }
.kpi-feature { grid-column: span 2; grid-row: span 2; }
.kpi-body { padding: 18px 20px 16px; }
.kpi-label { margin: 0; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.kpi-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kpi-value {
  font-family: var(--mono); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.kpi-feature .kpi-value { font-size: 2.1rem; }
.kpi-sub { margin: 6px 0 0; font-size: 0.75rem; color: var(--subtle); overflow-wrap: anywhere; }
.kpi-spark { height: 72px; margin-top: auto; background: linear-gradient(to top, rgba(167, 232, 211, 0.35), transparent); }
.kpi-spark:has(.spark-down) { background: linear-gradient(to top, rgba(251, 200, 220, 0.4), transparent); }
.sparkline { display: block; width: 100%; height: 100%; }
.spark-up { color: var(--accent-strong); }
.spark-down { color: #e06a8c; }
.spark-flat { color: var(--subtle); }
.sparkline-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.9s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid;
  font-size: 0.72rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
}
.pill svg, .lc-change svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill-up { color: var(--success); background: rgba(167, 232, 211, 0.5); border-color: rgba(47, 164, 136, 0.35); }
.pill-down { color: var(--danger); background: rgba(251, 200, 220, 0.5); border-color: rgba(224, 106, 140, 0.4); }
.pill-flat { color: var(--muted); background: var(--surface-muted); border-color: var(--border-strong); }

/* Gráficas */
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart-wide { grid-column: 1 / -1; }
.empty-chart { color: var(--muted); margin: 0; }

.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hbars li { display: grid; grid-template-columns: minmax(80px, 150px) minmax(0, 1fr) auto 3.6em; gap: 12px; align-items: center; font-size: 0.82rem; }
.hb-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { height: 10px; border-radius: 999px; background: rgba(15, 23, 42, 0.06); overflow: hidden; }
.hb-fill { display: block; height: 100%; border-radius: 999px; transform-origin: left; animation: grow 0.7s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes grow { from { transform: scaleX(0); } }
.hb-value { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hb-pct { font-family: var(--mono); color: var(--subtle); text-align: right; font-variant-numeric: tabular-nums; }

/* Dona */
.dn { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.dn-figure { position: relative; width: min(240px, 100%); aspect-ratio: 1; }
.dn-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dn-seg {
  cursor: pointer; transform-box: view-box; transform-origin: 120px 120px;
  transition: stroke-dasharray 1.1s ease-out calc(var(--dn-i) * 60ms), filter .2s ease-out, transform .2s ease-out, opacity .2s ease-out;
}
.dn.has-active .dn-seg:not(.is-active) { opacity: .45; }
.dn-seg.is-active { filter: drop-shadow(0 0 6px var(--dn-color)) brightness(1.03); transform: scale(1.03); }
.dn-center { position: absolute; inset: 18%; display: grid; place-items: center; text-align: center; pointer-events: none; }
.dn-center-inner { display: grid; justify-items: center; gap: 2px; max-width: 100%; }
.dn-swap { animation: dn-swap .2s cubic-bezier(.08, .82, .17, 1); }
@keyframes dn-swap { from { opacity: 0; transform: scale(.9); } }
.dn-c-label { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 500; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-c-value { margin: 0; font-family: var(--mono); font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dn-c-pct { margin: 0; color: var(--muted); font-family: var(--mono); font-size: .95rem; font-weight: 500; }
.dn-legend { list-style: none; margin: 0; padding: 14px 0 0; width: 100%; display: grid; gap: 2px; border-top: 1px solid var(--border-soft); }
.dn-legend li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: .86rem;
  transition: background-color .2s ease;
  animation: dn-row .4s ease-out both; animation-delay: calc(900ms + var(--dn-i) * 80ms);
}
@keyframes dn-row { from { opacity: 0; transform: translateX(-16px); } }
.dn-legend li.is-active, .dn-legend li:focus-visible { background: var(--surface-hover); outline: none; }
.dn-dot { width: 10px; height: 10px; border-radius: 50%; }
.dn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dn-value { font-family: var(--mono); font-size: .82rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Gráfica de tendencia */
.lc-head { margin-bottom: 18px; }
.lc-label { margin: 0 0 4px; color: var(--muted); font-size: 0.85rem; font-weight: 500; }
.lc-value-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.lc-value { font-family: var(--mono); font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lc-change { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 0.9rem; }
.lc-muted { color: var(--muted); font-size: 0.85rem; }
.lc-stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
.lc-stats b { font-weight: 700; color: var(--foreground); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lc-stats-group { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.tone-up { color: var(--success) !important; }
.tone-down { color: var(--danger) !important; }
.tone-flat { color: var(--muted) !important; }
.tone-sky { color: var(--info) !important; }
.tone-amber { color: var(--warn) !important; }
.lc-plot { position: relative; }
.line-chart { display: block; width: 100%; height: auto; max-height: 360px; overflow: visible; }
.lc-grid { stroke: rgba(15, 23, 42, 0.12); stroke-dasharray: 4 8; }
.lc-tick { fill: var(--subtle); font-size: 12px; }
.lc-ref { stroke: var(--accent-strong); stroke-dasharray: 4 4; stroke-width: 1; opacity: 0.6; }
.lc-dot, .lc-active { fill: var(--accent-strong); stroke: #ffffff; stroke-width: 2; }
.lc-cursor { stroke: var(--muted); stroke-dasharray: 3 3; stroke-opacity: 0.5; }
.lc-overlay { cursor: crosshair; }
.lc-tooltip {
  position: absolute; pointer-events: none; min-width: 120px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-strong); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.lc-tip-label { color: var(--muted); font-size: 0.8rem; margin-bottom: 2px; }
.lc-tip-row { display: flex; align-items: baseline; gap: 8px; font-size: 0.72rem; font-weight: 700; }
.lc-tip-value { font-family: var(--mono); font-size: 0.95rem; font-weight: 700; color: var(--foreground); }

/* Auditoría */
.audit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.audit-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: 12px; border: 1px solid; background: var(--surface-muted);
}
.audit-icon { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 0.75rem; }
.audit-item h4 { margin: 0; font-size: 0.9rem; font-weight: 650; overflow-wrap: anywhere; }
.audit-item p { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }
.audit-cells { margin-top: 6px; font-size: 0.8rem; color: var(--muted); }
.audit-cells summary { cursor: pointer; color: var(--foreground); }
.audit-cells code { font-family: var(--mono); font-size: 0.75rem; background: rgba(15, 23, 42, 0.06); padding: 1px 6px; border-radius: 4px; margin: 2px; display: inline-block; }
.sev-error { border-color: rgba(244, 166, 166, 0.9); background: rgba(253, 226, 225, 0.55); }
.sev-error .audit-icon { color: #7a1f17; background: #f8b4b4; }
.sev-aviso { border-color: rgba(255, 217, 125, 0.9); background: rgba(255, 245, 214, 0.6); }
.sev-aviso .audit-icon { color: #6b4b06; background: #ffd97d; }
.sev-info { border-color: rgba(143, 211, 244, 0.9); background: rgba(224, 237, 255, 0.6); }
.sev-info .audit-icon { color: #163a63; background: #bfddfe; }
.sev-ok { border-color: rgba(108, 207, 176, 0.9); background: rgba(220, 245, 232, 0.6); }
.sev-ok .audit-icon { color: #0f3d33; background: #a7e8d3; }

/* Selector de estilo */
.style-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.style-card {
  position: relative; display: block; padding: 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-muted);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.style-card:hover { background: var(--surface-hover); }
.style-card input { position: absolute; opacity: 0; pointer-events: none; }
.style-card.is-selected { border-color: var(--accent-strong); background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
.style-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-soft); margin-bottom: 10px; }
.style-swatch div { height: 10px; }
.style-swatch .sw-header { height: 16px; }
.style-name { display: block; font-weight: 650; font-size: 0.9rem; }
.style-desc { display: block; font-size: 0.78rem; color: var(--muted); }

.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 8px 10px; border-radius: 8px; font-size: 0.9rem; }
.check:hover { background: var(--surface-muted); }
.check input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent-strong); flex-shrink: 0; }

/* Vista previa (colores según el estilo elegido) */
.table-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border-soft); -webkit-overflow-scrolling: touch; }
.preview-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: var(--pv-base); color: var(--pv-text); font-family: var(--pv-font); }
.preview-table th { background: var(--pv-header); color: var(--pv-header-text); text-align: left; padding: 9px 12px; white-space: nowrap; border-bottom: 2px solid var(--pv-header-border); font-weight: 600; }
.preview-table th.num { text-align: right; }
.preview-table td { padding: 8px 12px; border-bottom: 1px solid var(--pv-border); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.preview-table tr.banded td { background: var(--pv-band); }
.preview-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.preview-table td.neg { color: var(--pv-neg); }
.preview-table td.err { background: var(--pv-err-bg) !important; color: var(--pv-err-text); font-weight: 700; }

/* Resumen IA */
.ai-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.payload-details { margin-top: 16px; }
.payload-details summary { cursor: pointer; font-weight: 600; color: var(--accent-strong); font-size: 0.9rem; }
.payload-details pre {
  max-height: 280px; overflow: auto; padding: 14px; border-radius: 10px; font-family: var(--mono); font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.7); border: 1px solid var(--border-soft); color: var(--foreground); white-space: pre-wrap; word-break: break-word;
}
.ai-output { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border); border-left: 3px solid var(--accent); }
.ai-output p { margin: 0 0 10px; }
.ai-output ul { margin: 0 0 10px; padding-left: 22px; }
.ai-output li { margin-bottom: 4px; }

/* Cargando */
.loading { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(244, 246, 251, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.loading-card { padding: 16px 22px; display: flex; align-items: center; gap: 12px; font-weight: 600; background: var(--surface-strong); }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(15, 23, 42, 0.12); border-top-color: var(--accent-strong); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.site-footer { text-align: center; padding: 10px 20px 30px; color: var(--subtle); font-size: 0.8rem; }

/* ───────── Carpeta de vidrio (sección de descarga) ───────── */
.download-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
.download-panel h2 { margin-bottom: 4px; }
.download-panel p { margin: 0; max-width: 680px; font-size: 0.9rem; }
.download-copy { display: grid; gap: 14px; justify-items: start; }
.download-hint { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--subtle); }
.folder-slot { width: 340px; max-width: 100%; display: flex; justify-content: center; }

.gf-root {
  --gf-px: 0; --gf-py: 0;
  --gf-ease: cubic-bezier(.2, .8, .2, 1);
  --gf-spring: cubic-bezier(.34, 1.36, .5, 1);
  --gf-hinge: 0deg; --gf-lift: 42px; --gf-spread: 0px; --gf-fan: 0deg; --gf-stack: 15px;
  --gf-ink: #141416; --gf-ink-soft: rgba(20, 20, 22, .55);
  position: relative; display: inline-block; flex: none; isolation: isolate;
}
.gf-root:hover, .gf-root:focus-within { --gf-hinge: -11deg; --gf-lift: -34px; --gf-spread: 8px; --gf-fan: 1.4deg; --gf-stack: 10px; }
.gf-root[data-open] { --gf-hinge: -24deg; --gf-lift: -96px; --gf-spread: 40px; --gf-fan: 5deg; --gf-stack: 30px; }
.gf-stage { position: absolute; left: 0; top: 0; width: 340px; height: 272px; transform-origin: 0 0; }
.gf-tilt {
  position: absolute; inset: 0;
  transform: perspective(1400px) rotateX(calc(var(--gf-py) * -3deg)) rotateY(calc(var(--gf-px) * 4deg));
  transition: transform .9s var(--gf-ease);
}
.gf-shadow {
  position: absolute; left: 18px; right: 18px; bottom: -6px; height: 60px; border-radius: 40px;
  background: rgba(16, 18, 24, .28); filter: blur(22px);
  transform: translateX(calc(var(--gf-px) * -8px)); transition: transform .9s var(--gf-ease);
}
.gf-back { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #f3f3f4 0%, #e3e3e6 100%); }
/* Arte del panel trasero: manchas pastel que se mezclan */
.gf-art {
  position: absolute; inset: -14px;
  background:
    radial-gradient(55% 55% at 20% 30%, rgba(108, 207, 176, .95), transparent 70%),
    radial-gradient(55% 60% at 80% 22%, rgba(143, 211, 244, .95), transparent 70%),
    radial-gradient(50% 50% at 62% 80%, rgba(255, 181, 158, .9), transparent 70%),
    radial-gradient(45% 45% at 15% 85%, rgba(255, 217, 125, .85), transparent 70%),
    linear-gradient(160deg, #fdf6f0, #eef6ff);
  transform: translate(calc(var(--gf-px) * -7px), calc(var(--gf-py) * -6px)) scale(1.02);
  transition: transform 1.1s var(--gf-ease);
}
.gf-back-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%);
}
.gf-rim { position: absolute; left: 0; top: 0; max-width: none; overflow: visible; pointer-events: none; fill: none; }
.gf-back-rim { width: 340px; height: 272px; }
.gf-back-rim path { stroke: rgba(255, 255, 255, .55); stroke-width: 1; }

.gf-files { position: absolute; inset: 0; z-index: 5; pointer-events: none; clip-path: inset(-400px -400px 10px -400px); }
.gf-sheet {
  all: unset; box-sizing: border-box; position: absolute; left: 34px; top: 96px; width: 272px; height: 184px;
  border-radius: 16px; overflow: hidden; cursor: pointer; pointer-events: auto;
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(0, 0, 0, .1), 0 10px 26px -8px rgba(10, 12, 20, .25);
  transform-origin: 50% 100%;
  transform:
    translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)), calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1))
    rotate(calc(var(--gf-jr) + var(--gf-slot) * var(--gf-fan)));
  transition: transform .75s var(--gf-spring) calc(var(--gf-depth) * 40ms), box-shadow .4s var(--gf-ease);
}
.gf-sheet--art { background: linear-gradient(180deg, #f2fbf7 0%, #e6f6ef 100%); }
.gf-root[data-open] .gf-sheet:hover, .gf-root[data-open] .gf-sheet:focus-visible {
  transform:
    translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)), calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1 - 18px))
    rotate(calc(var(--gf-slot) * var(--gf-fan) * .6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1.5px rgba(47, 164, 136, .55), 0 22px 40px -12px rgba(10, 12, 20, .35);
  transition-delay: 0s;
}
.gf-sheet:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.gf-sheet-head {
  position: absolute; left: 14px; right: 14px; top: 11px; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; white-space: nowrap;
}
.gf-sheet-name { overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 650; color: #18181b; }
.gf-sheet-meta { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .02em; color: rgba(24, 24, 27, .55); }
.gf-mini { position: absolute; left: 14px; right: 14px; bottom: 14px; width: calc(100% - 28px); height: auto; }
.gf-lines { position: absolute; left: 14px; right: 14px; top: 42px; display: flex; flex-direction: column; gap: 9px; }
.gf-lines i { display: block; height: 6px; border-radius: 3px; background: rgba(24, 24, 27, .08); }
.gf-lines i:first-child { height: 9px; background: rgba(24, 24, 27, .14); }
.gf-lines i:nth-child(2n) { width: 88%; }
.gf-lines i:nth-child(3n) { width: 70%; }
.gf-lines--audit i { position: relative; margin-left: 16px; }
.gf-lines--audit i::before { content: ""; position: absolute; left: -16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; }
.gf-lines--audit .sev-r::before { background: #f8b4b4; }
.gf-lines--audit .sev-a::before { background: #ffd97d; }
.gf-lines--audit .sev-b::before { background: #8fd3f4; }
.gf-lines--audit .sev-g::before { background: #6ccfb0; }

.gf-front {
  position: absolute; left: 0; top: 74px; width: 340px; height: 198px; z-index: 10;
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  transform-origin: 50% 100%; transform: perspective(760px) rotateX(var(--gf-hinge));
  transition: transform .8s var(--gf-spring);
}
.gf-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .5) 42%, rgba(252, 252, 252, .93) 100%); }
.gf-spec {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .9;
  background: radial-gradient(260px 200px at calc(50% + var(--gf-px) * 46%) calc(30% + var(--gf-py) * 40%), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
}
.gf-front-rim { width: 340px; height: 198px; }
.gf-front-rim path { stroke-width: 2.4; transition: stroke-width .3s var(--gf-ease); }
.gf-front:has(.gf-hit:focus-visible) .gf-front-rim path { stroke-width: 5; }
.gf-hit { all: unset; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.gf-label {
  position: absolute; z-index: 2; left: 28px; bottom: 30px; display: flex; flex-direction: column; gap: 4px;
  max-width: 280px; pointer-events: none; color: var(--gf-ink);
}
.gf-title { font-size: 19px; font-weight: 550; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--gf-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .blob, .sparkline-path, .hb-fill, .dn-legend li, .dn-swap { animation: none; }
  .sparkline-path { stroke-dashoffset: 0; }
  .dn-seg { transition: none; }
  .gf-root *, .gf-root *::before, .gf-root *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .gf-tilt { transform: none; }
}

/* Responsivo */
@media (max-width: 1080px) {
  .style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-feature { grid-row: auto; }
  .chart-grid { grid-template-columns: 1fr; }
  .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .download-panel { grid-template-columns: 1fr; }
  .folder-slot { margin: 0 auto; }
}

@media (max-width: 600px) {
  main { padding: 12px 16px 32px; gap: 12px; }
  .site-header { padding: 20px 16px 4px; }
  .step, .panel { padding: 18px 16px; }
  .card-header { padding: 0 16px; }
  .card-content { padding: 16px; }
  .kpi-body { padding: 14px 16px; }
  .kpi-value { font-size: 1.25rem; }
  .kpi-feature .kpi-value, .lc-value { font-size: 1.6rem; }
  .hbars li { grid-template-columns: minmax(70px, 100px) minmax(0, 1fr) auto; }
  .hb-pct { display: none; }
  .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-panel .btn { width: 100%; }
  .select-type { font-size: 1.1rem; max-width: 100%; }
}

@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-feature { grid-column: auto; }
  .style-grid { grid-template-columns: 1fr; }
}

/* ───────── Asistente de fórmulas ───────── */
.fx-lang { display: inline-flex; align-items: center; gap: 8px; }
.fx-select {
  font: inherit; font-size: 0.85rem; color: var(--foreground); padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface-strong); cursor: pointer;
}
.fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.fx-card {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0;
  padding: 16px; border-radius: 14px; background: var(--surface-muted); border: 1px solid var(--border-soft);
}
.fx-card h3 { margin: 0; }
.fx-card p { margin: 0; }
.fx-form { display: grid; gap: 8px; width: 100%; }
.fx-form textarea {
  font: inherit; color: var(--foreground); width: 100%; resize: vertical; min-height: 76px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-strong);
}
.fx-form textarea:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.fx-form .btn { justify-self: start; }
.fx-examples { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chip {
  font: inherit; font-size: 0.78rem; color: var(--accent-ink); cursor: pointer; text-align: left;
  padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(47, 164, 136, 0.3); background: var(--accent-soft);
}
.fx-chip:hover { background: rgba(167, 232, 211, 0.6); }
.fx-out { width: 100%; display: grid; gap: 10px; }
.fx-out:empty { display: none; }
.fx-summary { padding: 10px 12px; border-radius: 10px; background: var(--surface-strong); border-left: 3px solid var(--accent); }
.fx-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fx-finding { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--surface-strong); display: grid; gap: 4px; }
.fx-finding p { margin: 0; font-size: 0.86rem; }
.fx-finding-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; }
.fx-error .fx-badge { color: #7a1f17; background: #f8b4b4; }
.fx-aviso .fx-badge { color: #6b4b06; background: #ffd97d; }
.fx-sugerencia .fx-badge { color: #163a63; background: #bfddfe; }
.fx-cells { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.fx-result { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border); }
.fx-result p { margin: 0; font-size: 0.88rem; }
.fx-formula {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 8px 8px 12px; border-radius: 10px; background: #f3fbf8; border: 1px solid rgba(47, 164, 136, 0.3);
}
.fx-formula code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.85rem; color: var(--accent-ink); white-space: normal; overflow-wrap: anywhere; }
.fx-copy { min-height: 30px; padding: 4px 10px; font-size: 0.78rem; flex-shrink: 0; }

@media (max-width: 860px) {
  .fx-grid { grid-template-columns: 1fr; }
}


/* ───────── Arreglos de la auditoría ───────── */
.fix-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin: 4px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border);
}
.fix-bar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fix-applied { font-weight: 600; color: var(--success); font-size: 0.88rem; }
.btn-sm { min-height: 32px; padding: 4px 12px; font-size: 0.82rem; }
.fix {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px; display: grid; gap: 6px; justify-items: start;
  background: rgba(255, 255, 255, 0.75); border: 1px dashed rgba(47, 164, 136, 0.45);
}
.fix p { margin: 0; color: var(--foreground); font-size: 0.85rem; }
.fix-auto { border-style: solid; border-color: rgba(108, 207, 176, 0.6); background: rgba(220, 245, 232, 0.6); }
.fix-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 1px 8px; border-radius: 999px; }
.fix-preview { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.8rem; }
.fix-preview code { font-family: var(--mono); font-size: 0.75rem; background: rgba(15, 23, 42, 0.06); padding: 1px 6px; border-radius: 4px; }
.fix-before { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, 0.5); font-family: var(--mono); font-size: 0.78rem; }
.fix-sugg { display: grid; gap: 4px; width: 100%; }
.fix-sugg p { color: var(--muted); }
.btn-fix { min-height: 34px; padding: 6px 14px; font-size: 0.84rem; }


/* ───────── Modificar con IA ───────── */
.edit-out { display: grid; gap: 10px; margin-top: 12px; }
.edit-out:empty { display: none; }
.edit-result { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border); }
.edit-result p { margin: 0; font-size: 0.9rem; }
.edit-ops { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.edit-op { display: grid; gap: 4px; }
.edit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.edit-notice { margin: 0; padding: 10px 12px; border-radius: 10px; font-weight: 600; color: var(--success); background: rgba(220, 245, 232, 0.7); border: 1px solid rgba(108, 207, 176, 0.6); }