/* public/index.css — La Coartada global premium editorial theme */

:root{
  --premium-bg: #05050a;
  --premium-red: #c41e3a;
  --premium-red-hover: #d12b49;
  --premium-red-soft: rgba(196, 30, 58, 0.16);
  --premium-gold: #e0d8d0;

  --bg: var(--premium-bg);
  --bg-elevated: #0b0b10;
  --bg-card: #101015;
  --bg-card-strong: #131319;

  --text: rgba(224, 216, 208, 0.94);
  --text-strong: #ffffff;
  --muted: rgba(224, 216, 208, 0.58);
  --muted-strong: rgba(224, 216, 208, 0.74);

  --border: rgba(255,255,255,0.10);
  --border-soft: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.16);

  --panel: rgba(255,255,255,0.05);
  --panel-strong: rgba(255,255,255,0.07);
  --card: rgba(255,255,255,0.03);

  --shadow-xl: 0 24px 70px rgba(0,0,0,0.45);
  --glow-red: 0 0 0 1px rgba(196, 30, 58, 0.14), 0 20px 55px rgba(196, 30, 58, 0.18);
}

html, body, #root{
  min-height: 100%;
}

html{
  background: var(--premium-bg);
}

body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  /* ✅ QA responsive: evita scroll horizontal por desbordes mínimos */
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -20%, rgba(196, 30, 58, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(196, 30, 58, 0.05) 0%, transparent 40%),
    var(--premium-bg);
}

/* Root: clip horizontal overflow sin afectar scroll vertical */
#root{
  overflow-x: clip;
}

*{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

::selection{
  background: rgba(196, 30, 58, 0.26);
  color: #ffffff;
}

::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb{ background: rgba(224,216,208,0.15); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(196,30,58,0.50); }

img{ max-width: 100%; }
video{ max-width: 100%; height: auto; }
button, input, textarea, select{ font: inherit; }

a{ color: inherit; text-decoration: none; }

/* Utilities (sin romper Tailwind) */
.no-scrollbar{ scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar{ display: none; }

.break-anywhere{ overflow-wrap: anywhere; word-break: break-word; }

/* Safe areas (iOS) */
.safe-top{ padding-top: env(safe-area-inset-top); }
.safe-bottom{ padding-bottom: env(safe-area-inset-bottom); }

/* Typography helpers */
.font-editorial,
.lc-editorial{
  font-family: "Playfair Display", Georgia, serif;
}

.font-tech,
.lc-tech,
code,
pre{
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Atmosphere */
.atmosphere,
.lc-page-bg{
  background:
    radial-gradient(circle at 50% -20%, rgba(196, 30, 58, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(196, 30, 58, 0.05) 0%, transparent 40%),
    var(--premium-bg);
}

/* Premium glass system */
.glass-panel,
.lc-nav,
.lc-surface{
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
}

.glass-card,
.lc-surface-strong{
  background: var(--card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-soft);
}

.lc-ring{
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
}

.lc-accent-bg{
  background: var(--premium-red);
}

.lc-title{
  letter-spacing: .18em;
}

.thread-light,
.bento-thread{
  position: relative;
}

.thread-light::before,
.bento-thread::before{
  content: "";
  position: absolute;
  top: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(196, 30, 58, 0.5), transparent);
  pointer-events: none;
}

.glow-red,
.lc-glow{
  box-shadow: var(--glow-red);
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.glow-red:hover,
.lc-glow:hover{
  box-shadow: 0 0 0 1px rgba(196, 30, 58, 0.22), 0 24px 70px rgba(196, 30, 58, 0.24);
}

/* Structural polish */
.premium-shell{
  position: relative;
  isolation: isolate;
}

.premium-shell::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top center, rgba(196, 30, 58, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 28%);
  z-index: 0;
}