/* ============ CERTICAR Córdoba — Web · design tokens ============ */
/* Mirror of app móvil. Cyan = UI funcional. Dorado = marca/sello.  */

:root {
  /* Brand / UI */
  --primary:   #06b6d4;
  --primaryD:  #0891b2;
  --primaryL:  #cffafe;
  --primaryBg: #ecfeff;
  --primaryInk:#062a32;

  /* Dorado — marca / sello (NO ES COLOR FUNCIONAL) */
  --brand:    #E8C460;
  --brandD:   #c9a23f;
  --brandBg:  #fdf6dc;

  /* Superficies */
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --surfaceAlt:#f1f3f6;
  --hairline:  rgba(15,23,32,0.08);
  --hairline2: rgba(15,23,32,0.14);

  /* Tinta */
  --ink:  #0f1720;
  --ink2: #384151;
  --ink3: #6b7480;
  --ink4: #9aa3ad;

  /* Semáforo */
  --green:    #0e9f6e;
  --greenBg:  #e6f6ef;
  --greenD:   #086b4a;
  --yellow:   #d97706;
  --yellowBg: #fef3e2;
  --yellowD:  #a05c05;
  --red:      #dc2626;
  --redBg:    #fdecec;
  --redD:     #99181c;

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

  /* Radii */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-3xl: 28px;

  /* Shadow */
  --sh-card: 0 1px 0 rgba(15,23,32,0.02), 0 1px 2px rgba(15,23,32,0.04);
  --sh-pop:  0 12px 32px rgba(15,23,32,0.10), 0 2px 6px rgba(15,23,32,0.06);
  --sh-deep: 0 24px 60px rgba(15,23,32,0.18);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Tipografía ===== */
.cc-display1 { font-size: 72px; line-height: 1.0;  font-weight: 800; letter-spacing: -0.03em; }
.cc-display2 { font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; }
.cc-h1       { font-size: 40px; line-height: 1.1;  font-weight: 700; letter-spacing: -0.02em; }
.cc-h2       { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.cc-h3       { font-size: 24px; line-height: 1.2;  font-weight: 700; letter-spacing: -0.01em; }
.cc-h4       { font-size: 20px; line-height: 1.3;  font-weight: 700; }
.cc-bodyLg   { font-size: 18px; line-height: 1.55; font-weight: 400; }
.cc-body     { font-size: 16px; line-height: 1.55; font-weight: 400; color: var(--ink2); }
.cc-bodySm   { font-size: 14px; line-height: 1.5;  font-weight: 400; color: var(--ink2); }
.cc-caption  { font-size: 12px; line-height: 1.4;  font-weight: 500; color: var(--ink3); }
.cc-kicker   { font-size: 11px; line-height: 1;    font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); }
.cc-mono     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cc-monoLg   { font-family: var(--font-mono); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.cc-num { font-variant-numeric: tabular-nums; }

/* ===== Reset link / button ===== */
a { color: var(--primaryD); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

/* ===== Botones ===== */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  border: none; border-radius: var(--r-lg);
  padding: 12px 20px;
  font-size: 15px; font-weight: 600;
  white-space: nowrap;
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
  text-decoration: none;
}
.cc-btn:hover { text-decoration: none; }
.cc-btn:active { transform: scale(0.98); }
.cc-btn-primary {
  background: var(--ink); color: #fff;
}
.cc-btn-primary:hover { background: #1c2532; }
.cc-btn-cyan {
  background: var(--primary); color: var(--primaryInk);
  box-shadow: 0 1px 0 rgba(15,23,32,0.04), inset 0 1px 0 rgba(255,255,255,0.25);
}
.cc-btn-cyan:hover { background: #07c5e3; }
.cc-btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--hairline2);
}
.cc-btn-ghost:hover { background: var(--surfaceAlt); }
.cc-btn-soft {
  background: var(--surfaceAlt); color: var(--ink);
}
.cc-btn-soft:hover { background: #e7eaef; }
.cc-btn-wa {
  background: var(--wa); color: #fff;
}
.cc-btn-wa:hover { background: #1eb958; }

.cc-btn-lg { padding: 16px 28px; font-size: 16px; border-radius: var(--r-lg); }
.cc-btn-sm { padding: 7px 14px; font-size: 13px; border-radius: var(--r-md); }
.cc-btn-icon-only { padding: 10px; }

/* ===== Cards ===== */
.cc-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
}
.cc-card-pad { padding: 20px; }
.cc-card-padLg { padding: 32px; }

/* ===== Pills / chips ===== */
.cc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cc-pill-neutral { background: var(--surfaceAlt); color: var(--ink2); border: 1px solid var(--hairline); }
.cc-pill-cyan    { background: var(--primaryBg); color: var(--primaryD); }
.cc-pill-green   { background: var(--greenBg);   color: var(--greenD); }
.cc-pill-yellow  { background: var(--yellowBg);  color: var(--yellowD); }
.cc-pill-red     { background: var(--redBg);     color: var(--redD); }
.cc-pill-ink     { background: var(--ink);       color: #fff; }
.cc-pill-brand   {
  background: linear-gradient(180deg, #fdf6dc 0%, #f8e9b0 100%);
  color: #6b4d05;
  border: 1px solid rgba(184,138,11,0.25);
}

/* ===== Inputs ===== */
.cc-field { display: flex; flex-direction: column; gap: 6px; }
.cc-field-label { font-size: 12px; font-weight: 600; color: var(--ink2); }
.cc-input {
  background: var(--surface);
  border: 1px solid var(--hairline2);
  border-radius: var(--r-md);
  height: 44px;
  padding: 0 14px;
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.cc-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(6,182,212,0.12);
}

/* ===== Hairline divider ===== */
.cc-hr { border: none; height: 1px; background: var(--hairline); margin: 0; }

/* ===== Generic utilities ===== */
.cc-stack { display: flex; flex-direction: column; }
.cc-row   { display: flex; flex-direction: row; align-items: center; }
.cc-grid  { display: grid; }
.cc-center{ display: flex; align-items: center; justify-content: center; }

/* ===== Semáforo big badge ===== */
.cc-sem {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid transparent;
}
.cc-sem-lg {
  padding: 20px 32px;
  font-size: 20px;
  border-radius: 999px;
}
.cc-sem-xl {
  padding: 28px 44px;
  font-size: 28px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.cc-sem-green  { background: var(--greenBg);  color: var(--greenD);  border-color: rgba(14,159,110,0.20); }
.cc-sem-yellow { background: var(--yellowBg); color: var(--yellowD); border-color: rgba(217,119,6,0.22); }
.cc-sem-red    { background: var(--redBg);    color: var(--redD);    border-color: rgba(220,38,38,0.22); animation: ccPulse 2.6s ease-in-out infinite; }

@keyframes ccPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.22); }
  50%      { box-shadow: 0 0 0 10px rgba(220,38,38,0.0); }
}

.cc-sem-dot {
  width: 12px; height: 12px; border-radius: 999px;
  display: inline-block;
}
.cc-sem-dot-green  { background: var(--green); box-shadow: 0 0 0 3px rgba(14,159,110,0.18); }
.cc-sem-dot-yellow { background: var(--yellow); box-shadow: 0 0 0 3px rgba(217,119,6,0.18); }
.cc-sem-dot-red    { background: var(--red);    box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }

/* ===== WhatsApp floating ===== */
.cc-wa-float {
  position: absolute;
  right: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 0;
  background: var(--wa); color: #fff;
  border-radius: 999px;
  padding: 14px;
  box-shadow: 0 6px 22px rgba(37,211,102,0.42), 0 2px 6px rgba(0,0,0,0.08);
  z-index: 50;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.cc-wa-float .cc-wa-text {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 240ms ease, padding 240ms ease, opacity 200ms;
  opacity: 0;
}
.cc-wa-float:hover .cc-wa-text {
  max-width: 200px;
  padding-right: 8px;
  padding-left: 8px;
  opacity: 1;
}

/* ===== Dotted grid texture used in hero backgrounds ===== */
.cc-dot-grid {
  background-image: radial-gradient(rgba(15,23,32,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ===== Subtle cyan glow ===== */
.cc-cyan-glow {
  position: relative;
}
.cc-cyan-glow::before {
  content: '';
  position: absolute; inset: -40% -20% auto auto;
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(6,182,212,0.16) 0%, rgba(6,182,212,0) 60%);
  pointer-events: none;
  z-index: 0;
}

/* ===== Sello dorado glow ===== */
.cc-seal-glow {
  filter: drop-shadow(0 4px 18px rgba(232,196,96,0.45));
}

/* ===== Tab focus visible ===== */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===== DARK THEME · "V2 Oscuro" (negro + dorado + cyan) ===== */
/* This is the APPROVED direction for all production surfaces.            */
/* Cyan = UI funcional · Dorado = marca/sello · Negro = base.             */
.theme-dark {
  /* Base surfaces — negro */
  --bg:         #06080c;   /* page base */
  --bg-elev:    #0a0d14;   /* elevated band / gradient stop */
  --bg-elev2:   #0f1218;   /* card / panel */
  --surface:    #0f1218;
  --surfaceAlt: #161a22;
  --hairline:   rgba(255,255,255,0.07);
  --hairline2:  rgba(255,255,255,0.14);

  /* Tinta (sobre negro) */
  --ink:  #f5f6f8;
  --ink2: #c4c8d2;
  --ink3: #8b909d;
  --ink4: #5a5f6a;

  /* Cyan — funcional, más brillante para dark */
  --primary:    #22d3ee;
  --primaryD:   #06b6d4;
  --primaryL:   rgba(34,211,238,0.18);
  --primaryBg:  rgba(34,211,238,0.10);
  --primaryInk: #062a32;
  --cyan-a06:  rgba(34,211,238,0.06);
  --cyan-a10:  rgba(34,211,238,0.10);
  --cyan-a22:  rgba(34,211,238,0.22);
  --cyan-a32:  rgba(34,211,238,0.32);

  /* Dorado — marca / sello (protagonista en dark) */
  --brand:        #E8C460;
  --brandD:       #d4a93b;
  --brandHover:   #f0d075;
  --brandBg:      rgba(232,196,96,0.10);
  --ink-on-gold:  #1a1206;
  --gold-a04:  rgba(232,196,96,0.04);
  --gold-a10:  rgba(232,196,96,0.10);
  --gold-a14:  rgba(232,196,96,0.14);
  --gold-a22:  rgba(232,196,96,0.22);
  --gold-a28:  rgba(232,196,96,0.28);
  --gold-a32:  rgba(232,196,96,0.32);
  --gold-grad: linear-gradient(180deg, #fce8a0 0%, #d4a93b 80%);

  /* Semáforo (hallazgos del peritaje) — brillo para dark */
  --green:  #10b981; --greenD: #086b4a;
  --yellow: #f59e0b; --yellowD: #f4b73b;
  --red:    #ef4444; --redD: #991b1b;
}

.theme-dark { background: var(--bg); color: var(--ink); }
.theme-dark .cc-card { background: var(--surface); border-color: var(--hairline); box-shadow: none; }
.theme-dark .cc-btn-primary { background: var(--brand); color: var(--ink-on-gold); }
.theme-dark .cc-btn-primary:hover { background: var(--brandHover); }
.theme-dark .cc-btn-ghost { color: var(--ink); border-color: var(--hairline2); }
.theme-dark .cc-btn-ghost:hover { background: rgba(255,255,255,0.04); }
.theme-dark .cc-btn-soft { background: var(--surfaceAlt); color: var(--ink); }
.theme-dark .cc-btn-soft:hover { background: #1f242d; }
.theme-dark .cc-input { background: var(--surface); border-color: var(--hairline2); color: var(--ink); }
.theme-dark .cc-pill-neutral { background: var(--surfaceAlt); color: var(--ink2); border-color: var(--hairline); }
.theme-dark .cc-pill-cyan    { background: var(--primaryBg); color: var(--primary); }
.theme-dark .cc-pill-ink     { background: var(--ink); color: var(--bg); }
.theme-dark .cc-pill-brand   {
  background: linear-gradient(180deg, rgba(232,196,96,0.22), rgba(232,196,96,0.10));
  color: var(--brand);
  border: 1px solid var(--gold-a32);
}
.theme-dark .cc-card { background: var(--surface); border-color: var(--hairline); box-shadow: none; }
.theme-dark .cc-btn-primary { background: var(--brand); color: #1a1206; }
.theme-dark .cc-btn-primary:hover { background: #f0d075; }
.theme-dark .cc-btn-ghost { color: var(--ink); border-color: var(--hairline2); }
.theme-dark .cc-btn-ghost:hover { background: rgba(255,255,255,0.04); }
.theme-dark .cc-btn-soft { background: var(--surfaceAlt); color: var(--ink); }
.theme-dark .cc-btn-soft:hover { background: #1f242d; }
.theme-dark .cc-input { background: var(--surface); border-color: var(--hairline2); color: var(--ink); }
.theme-dark .cc-pill-neutral { background: var(--surfaceAlt); color: var(--ink2); border-color: var(--hairline); }
.theme-dark .cc-pill-cyan    { background: var(--primaryBg); color: var(--primary); }
.theme-dark .cc-pill-ink     { background: var(--ink); color: var(--bg); }
.theme-dark .cc-pill-brand   {
  background: linear-gradient(180deg, rgba(232,196,96,0.22), rgba(232,196,96,0.10));
  color: var(--brand);
  border: 1px solid rgba(232,196,96,0.32);
}
.theme-dark .cc-dot-grid {
  background-image: radial-gradient(rgba(232,196,96,0.10) 1px, transparent 1px);
}

/* ===== Mobile frame container ===== */
.cc-mobile-frame {
  width: 100%;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}