/* ============================================================
   Kiacos.fotos — critical CSS (inline-blocking)
   Real Lavender Flow tokens (R G B channels, rgb(var(--x)) usage)
   matched to Fronted-app/src/index.css.
   ============================================================ */

/* Light (default) · v3 Rigid · paleta Kiacos crema + violeta */
:root,
[data-theme="light"] {
  --lf-canvas: 246 244 239;            /* #F6F4EF crema cálida */
  --lf-canvas-lilac: 246 244 239;
  --lf-canvas-soft: 255 255 255;
  --lf-ink: 10 5 17;                   /* #0A0511 tinta */
  --lf-ink-soft: 42 36 56;
  --lf-body: 10 5 17;
  --lf-body-muted: 107 92 130;         /* #6B5C82 */
  --lf-surface-card: 255 255 255;
  --lf-surface-card-soft: 246 244 239;
  --lf-surface-card-tinted: 230 226 218;
  --lf-surface-sidebar: 246 244 239;
  --lf-surface-sidebar-active: 124 58 237;
  --lf-divider: 201 192 184;           /* #C9C0B8 */
  --lf-hairline: 10 5 17;              /* dura — borde base */
  --lf-hairline-strong: 10 5 17;
  --cta-action: 124 58 237;            /* #7C3AED Kiacos brand */
  --cta-action-hover: 76 29 149;       /* #4C1D95 deep */
  --cta-action-press: 76 29 149;
  --cta-action-fg: 255 255 255;
  --state-error-fg: 185 28 28;         /* #B91C1C */
  --state-error-bg: 254 226 226;
  --state-success-fg: 21 128 61;       /* #15803D */
  --state-success-bg: 220 252 231;
  --state-warn-fg: 180 83 9;           /* #B45309 */
  --state-warn-bg: 254 243 199;
  --state-info-fg: 29 78 216;          /* #1D4ED8 */
  --state-info-bg: 219 234 254;

  /* Sombras duras desplazadas (sin blur) */
  --shadow-card: 2px 2px 0 0 rgb(10 5 17);
  --shadow-elev: 4px 4px 0 0 rgb(76 29 149);
  --shadow-soft: 4px 4px 0 0 rgb(10 5 17);

  --radius-card: 0;
  --radius-btn: 0;
  --radius-input: 0;
  --radius-pill: 0;

  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
}

/* Dark · noche + violeta claro */
[data-theme="dark"] {
  --lf-canvas: 26 19 38;               /* #1A1326 noche */
  --lf-canvas-lilac: 26 19 38;
  --lf-canvas-soft: 36 27 51;
  --lf-ink: 248 244 254;               /* #F8F4FE perla */
  --lf-ink-soft: 220 213 238;
  --lf-body: 248 244 254;
  --lf-body-muted: 181 168 200;        /* #B5A8C8 */
  --lf-surface-card: 36 27 51;         /* #241B33 */
  --lf-surface-card-soft: 36 27 51;
  --lf-surface-card-tinted: 58 45 85;
  --lf-surface-sidebar: 26 19 38;
  --lf-surface-sidebar-active: 167 139 250;
  --lf-divider: 58 45 88;
  --lf-hairline: 107 92 130;           /* #6B5C82 visible no harsh */
  --lf-hairline-strong: 167 139 250;
  --cta-action: 167 139 250;           /* #A78BFA brand claro dark */
  --cta-action-hover: 124 58 237;
  --cta-action-press: 124 58 237;
  --cta-action-fg: 26 19 38;
  --state-error-fg: 251 113 133;       /* #FB7185 pink-red, NO orange */
  --state-error-bg: 70 28 28;
  --state-success-fg: 52 211 153;      /* #34D399 */
  --state-success-bg: 28 70 50;
  --state-warn-fg: 251 191 36;         /* #FBBF24 */
  --state-warn-bg: 70 50 18;
  --state-info-fg: 96 165 250;         /* #60A5FA */
  --state-info-bg: 28 50 100;
  --shadow-card: 2px 2px 0 0 rgb(167 139 250);
  --shadow-elev: 4px 4px 0 0 rgb(124 58 237);
  --shadow-soft: 4px 4px 0 0 rgb(167 139 250);
}

/* REGLA CERO · geometría rígida absoluta */
*, *::before, *::after { border-radius: 0 !important; }

/* Reset & base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light dark; }
body {
  font-family: var(--font-body);
  background: rgb(var(--lf-canvas));
  color: rgb(var(--lf-ink));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Loading curtain (anti-FOUC/CLS) */
html.kf-loading body { visibility: hidden; }
html.kf-loading::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgb(var(--lf-canvas));
  z-index: 9999;
}
html.kf-loading::after {
  content: '';
  position: fixed;
  top: 50%; left: 50%;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 3px solid rgb(var(--lf-surface-card-tinted));
  border-top-color: rgb(var(--cta-action));
  animation: kf-spin 800ms linear infinite;
  z-index: 10000;
}
@keyframes kf-spin { to { transform: rotate(360deg); } }

/* Global progress bar */
.global-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgb(var(--lf-canvas-lilac));
  z-index: 50;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms ease;
}
.global-progress.active { transform: scaleY(1); }
.global-progress__bar {
  height: 100%;
  background: rgb(var(--cta-action));
  width: 0%;
  transition: width 200ms ease;
}

/* App shell */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}
@media (min-width: 768px) {
  .wrap { padding: 40px 32px 120px; }
}

/* Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.brand {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  color: rgb(var(--lf-ink));
}
@media (min-width: 768px) { .brand { font-size: 36px; } }
.brand-dot { color: rgb(var(--cta-action)); }
.app-header__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tabs nav (segmented pill) */
.tabs-nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgb(var(--lf-surface-card-soft));
  border: 1px solid rgb(var(--lf-hairline));
  border-radius: 9999px;
  margin: 0 0 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tabs-nav__btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 20px;
  background: transparent;
  border: none;
  color: rgb(var(--lf-body-muted));
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.tabs-nav__btn:hover { color: rgb(var(--lf-ink)); }
.tabs-nav__btn.is-active {
  background: rgb(var(--lf-surface-card));
  color: rgb(var(--cta-action));
  box-shadow: var(--shadow-card);
}

/* Tab panels — always mounted */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Ads slot reservation (anti-CLS) */
.ads-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--lf-surface-card-soft));
  border: 1px dashed rgb(var(--lf-hairline));
  border-radius: var(--radius-card);
  color: rgb(var(--lf-body-muted));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 28px 0;
}
.ads-slot--banner { min-height: 100px; width: 100%; }
@media (min-width: 768px) { .ads-slot--banner { min-height: 120px; } }
.ads-slot--inline { min-height: 90px; width: 100%; }

/* Focus ring (Kiacos) */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
.dropzone:focus-visible {
  outline: 2px solid rgb(var(--cta-action));
  outline-offset: 2px;
}