/* ══════════════════════════════════════════
   Buscador CURP · buscadordeestatus.mx
   v3.0.0 — Clean & Simple Design
   ══════════════════════════════════════════ */

/* ── VARIABLES ── */
.bc-wrap {
  --bc-bg:        #ffffff;
  --bc-bg2:       #faf7f8;
  --bc-bg3:       #f5eff2;
  --bc-primary:   #3D0C21;
  --bc-mid:       #8C1B3F;
  --bc-gold:      #C9943A;
  --bc-gold-bg:   #fdf6ec;
  --bc-border:    #e8dbe0;
  --bc-text:      #1a0a10;
  --bc-text2:     #6b3d4e;
  --bc-text3:     #9e6b7a;
  --bc-ok:        #15803d;
  --bc-ok-bg:     #f0fdf4;
  --bc-ok-border: #bbf7d0;
  --bc-err:       #b91c1c;
  --bc-err-bg:    #fef2f2;
  --bc-err-border:#fecaca;
  --bc-warn-bg:   #fffbeb;
  --bc-warn-brd:  #fde68a;
  --bc-info-bg:   #f0f9ff;
  --bc-info-brd:  #bae6fd;
  --bc-radius:    14px;
  --bc-radius-sm: 8px;
  --bc-shadow:    0 4px 32px rgba(61,12,33,.10), 0 1px 4px rgba(61,12,33,.06);
  --bc-font:      'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── RESET ── */
.bc-wrap, .bc-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.bc-wrap { font-family: var(--bc-font); background: var(--bc-bg); border-radius: var(--bc-radius); box-shadow: var(--bc-shadow); border: 1px solid var(--bc-border); max-width: 720px; margin: 32px auto; overflow: hidden; }

/* ── HEADER ── */
.bc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  background: var(--bc-primary);
  gap: 12px;
}
.bc-head-left { display: flex; align-items: center; gap: 14px; }
.bc-head-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  color: #E8B86D; flex-shrink: 0;
}
.bc-head-title {
  font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: -.2px; line-height: 1.3;
}
.bc-head-sub {
  font-size: .78rem; color: rgba(245,200,215,.75); margin-top: 2px; line-height: 1;
}
.bc-head-badge {
  font-size: .65rem; font-weight: 800; letter-spacing: 1.2px;
  background: var(--bc-gold); color: var(--bc-primary);
  padding: 4px 10px; border-radius: 20px; flex-shrink: 0;
}

/* ── TAB NAV ── */
.bc-nav {
  display: flex; background: var(--bc-bg3);
  border-bottom: 1px solid var(--bc-border);
  overflow-x: auto; scrollbar-width: none;
}
.bc-nav::-webkit-scrollbar { display: none; }
.bc-nav-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 22px; border: none; border-bottom: 3px solid transparent;
  background: transparent; color: var(--bc-text3);
  font-size: .85rem; font-weight: 600; font-family: var(--bc-font);
  cursor: pointer; white-space: nowrap; transition: all .18s;
}
.bc-nav-btn svg { opacity: .6; transition: opacity .18s; }
.bc-nav-btn:hover { color: var(--bc-mid); background: rgba(140,27,63,.05); }
.bc-nav-btn:hover svg { opacity: .9; }
.bc-nav-btn.active {
  color: var(--bc-primary); border-bottom-color: var(--bc-primary);
  background: var(--bc-bg);
}
.bc-nav-btn.active svg { opacity: 1; }

/* ── TAB PANELS ── */
.bc-tab { display: none; }
.bc-tab.active { display: block; animation: bcIn .2s ease; }
@keyframes bcIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

/* ── BODY ── */
.bc-body { padding: 24px; }

/* ── LABEL ── */
.bc-label {
  display: block; font-size: .83rem; font-weight: 700;
  color: var(--bc-primary); margin-bottom: 8px;
}
.bc-label-opt {
  font-size: .75rem; font-weight: 400; color: var(--bc-text3);
}

/* ── INPUT FIELD ── */
.bc-field-wrap { position: relative; }
.bc-field {
  display: block; width: 100%;
  padding: 13px 44px 13px 14px;
  background: var(--bc-bg); border: 1.5px solid var(--bc-border);
  border-radius: var(--bc-radius-sm); outline: none;
  font-size: 1rem; font-family: 'Courier New', monospace;
  letter-spacing: 2px; color: var(--bc-text);
  transition: border-color .18s, box-shadow .18s;
}
.bc-field::placeholder {
  font-family: var(--bc-font); letter-spacing: 0;
  font-size: .88rem; color: #cbb8bf;
}
.bc-field:focus { border-color: var(--bc-mid); box-shadow: 0 0 0 3px rgba(140,27,63,.1); }
.bc-field.bc-f-ok    { border-color: var(--bc-ok); }
.bc-field.bc-f-ok:focus { box-shadow: 0 0 0 3px rgba(21,128,61,.1); }
.bc-field.bc-f-warn  { border-color: #d97706; }
.bc-field.bc-f-err   { border-color: var(--bc-err); }
.bc-field.bc-f-err:focus { box-shadow: 0 0 0 3px rgba(185,28,28,.1); }

/* ── STATUS DOT ── */
.bc-field-end {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.bc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #ddd; display: inline-block;
  transition: background .2s, box-shadow .2s;
}
.bc-dot-ok  { background: var(--bc-ok); box-shadow: 0 0 0 3px rgba(21,128,61,.15); }
.bc-dot-warn{ background: #d97706; }
.bc-dot-err { background: var(--bc-err); box-shadow: 0 0 0 3px rgba(185,28,28,.15); }

/* ── FIELD FOOTER ── */
.bc-field-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin: 6px 2px 18px; gap: 8px;
}
.bc-cnt { font-size: .73rem; color: var(--bc-text3); }
.bc-tip { font-size: .75rem; font-weight: 600; }
.bc-tip-ok  { color: var(--bc-ok); }
.bc-tip-dim { color: var(--bc-text3); font-weight: 400; }
.bc-tip-err { color: var(--bc-err); }

/* ── BUTTON ── */
.bc-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px;
  background: var(--bc-primary); color: #fff;
  border: none; border-radius: var(--bc-radius-sm);
  font-size: .92rem; font-weight: 700; font-family: var(--bc-font);
  cursor: pointer; letter-spacing: .2px;
  transition: background .18s, box-shadow .18s, transform .1s;
}
.bc-btn:hover { background: var(--bc-mid); box-shadow: 0 4px 16px rgba(140,27,63,.3); transform: translateY(-1px); }
.bc-btn:active { transform: none; }

.bc-btn-accent {
  background: var(--bc-gold); color: var(--bc-primary);
}
.bc-btn-accent:hover { background: #b8821e; box-shadow: 0 4px 16px rgba(201,148,58,.35); }

/* ── NOTICE (info box) ── */
.bc-notice {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bc-bg3); border-left: 3px solid var(--bc-mid);
  border-radius: 0 var(--bc-radius-sm) var(--bc-radius-sm) 0;
  padding: 12px 14px; margin-bottom: 20px;
  font-size: .82rem; color: var(--bc-text2); line-height: 1.5;
}
.bc-notice svg { color: var(--bc-mid); margin-top: 1px; }

/* ── LINKS ── */
.bc-link-plain {
  display: block; text-align: center; margin-top: 14px;
  font-size: .8rem; color: var(--bc-text3); text-decoration: none;
  transition: color .15s;
}
.bc-link-plain:hover { color: var(--bc-mid); text-decoration: underline; }

/* ── ANATOMY GUIDE ── */
.bc-anatomy {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 22px;
  background: var(--bc-bg3); border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-sm); padding: 14px 12px;
}
.bc-seg {
  flex: 1; min-width: 60px; text-align: center;
  padding: 8px 4px; border-radius: 6px; border: 1px solid transparent;
}
.bc-seg-a { background: rgba(139,92,246,.08); border-color: rgba(139,92,246,.2); }
.bc-seg-b { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.2); }
.bc-seg-c { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.2); }
.bc-seg-d { background: rgba(201,148,58,.08); border-color: rgba(201,148,58,.25); }
.bc-seg-e { background: rgba(140,27,63,.06); border-color: rgba(140,27,63,.15); }
.bc-seg-f { background: rgba(61,12,33,.06); border-color: rgba(61,12,33,.12); }
.bc-seg-pos  { display: block; font-size: .6rem; color: var(--bc-text3); margin-bottom: 4px; }
.bc-seg-code { display: block; font-size: .82rem; font-weight: 800; font-family: monospace; color: var(--bc-text); margin-bottom: 3px; }
.bc-seg-name { display: block; font-size: .6rem; color: var(--bc-text3); line-height: 1.2; }

/* ── RESULTS ── */
.bc-result { border-radius: var(--bc-radius-sm); overflow: hidden; margin-bottom: 0; }
.bc-res-ok   { background: var(--bc-ok-bg);   border: 1px solid var(--bc-ok-border); }
.bc-res-err  { background: var(--bc-err-bg);  border: 1px solid var(--bc-err-border); }
.bc-res-warn { background: var(--bc-warn-bg); border: 1px solid var(--bc-warn-brd); }
.bc-res-info { background: var(--bc-info-bg); border: 1px solid var(--bc-info-brd); }

.bc-r-badge {
  padding: 10px 16px; font-size: .82rem; font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.bc-r-ok  { color: var(--bc-ok);  background: rgba(21,128,61,.08); }
.bc-r-err { color: var(--bc-err); background: rgba(185,28,28,.08); }

.bc-r-curp {
  padding: 12px 16px 8px;
  font-family: 'Courier New', monospace; font-size: 1.1rem; font-weight: 700;
  letter-spacing: 3px; color: var(--bc-primary);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.bc-r-rows { padding: 6px 8px 8px; }
.bc-r-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px; border-bottom: 1px solid rgba(0,0,0,.04);
  gap: 12px;
}
.bc-r-row:last-child { border-bottom: none; }
.bc-r-k { font-size: .78rem; color: var(--bc-text3); font-weight: 500; flex-shrink: 0; }
.bc-r-v { font-size: .85rem; font-weight: 700; color: var(--bc-text); text-align: right; }

.bc-r-note {
  padding: 10px 16px; font-size: .76rem;
  color: var(--bc-text3); line-height: 1.5;
  border-top: 1px solid rgba(0,0,0,.05);
}
.bc-r-note a { color: var(--bc-mid); }

.bc-msg { padding: 12px 16px; font-size: .85rem; color: var(--bc-text); line-height: 1.5; }

/* ── DECODED STRIP ── */
.bc-strip {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.bc-ds {
  font-family: 'Courier New', monospace; font-size: 1rem; font-weight: 800;
  padding: 6px 8px; border-radius: 6px; letter-spacing: 1px;
  cursor: default;
}
.bc-da { background: rgba(139,92,246,.1); color: #5b21b6; }
.bc-db { background: rgba(59,130,246,.1);  color: #1d4ed8; }
.bc-dc { background: rgba(16,185,129,.1);  color: #065f46; }
.bc-dd { background: rgba(201,148,58,.12); color: #92400e; }
.bc-de { background: rgba(140,27,63,.08);  color: var(--bc-mid); }
.bc-df { background: rgba(61,12,33,.08);   color: var(--bc-primary); }

/* ── MONO ── */
.bc-mono { font-family: 'Courier New', monospace; font-size: .9em; letter-spacing: 1px; }

/* ── WHAT'S IN CONSTANCIA ── */
.bc-what {
  padding: 0 24px 20px;
  border-top: 1px solid var(--bc-border);
  margin-top: 4px;
}
.bc-what-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--bc-text3);
  padding-top: 18px; margin-bottom: 12px;
}
.bc-what-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px;
}
.bc-what-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--bc-bg3);
  border: 1px solid var(--bc-border); border-radius: var(--bc-radius-sm);
  font-size: .82rem; color: var(--bc-text2);
}
.bc-what-icon { font-size: 1.1rem; }

/* ── FOOTER ── */
.bc-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 12px 24px; background: var(--bc-bg3);
  border-top: 1px solid var(--bc-border);
  font-size: .73rem; color: var(--bc-text3);
}
.bc-foot a { color: var(--bc-mid); text-decoration: none; font-weight: 600; }
.bc-foot a:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 520px) {
  .bc-head         { padding: 16px; flex-wrap: wrap; }
  .bc-head-left    { gap: 10px; }
  .bc-head-title   { font-size: .98rem; }
  .bc-nav-btn      { padding: 11px 15px; font-size: .8rem; }
  .bc-body         { padding: 18px 16px; }
  .bc-r-curp       { font-size: .9rem; letter-spacing: 2px; }
  .bc-anatomy      { gap: 5px; }
  .bc-seg          { min-width: 50px; }
  .bc-what         { padding: 0 16px 16px; }
  .bc-foot         { padding: 12px 16px; flex-direction: column; align-items: flex-start; }
  .bc-r-row        { flex-direction: column; align-items: flex-start; gap: 2px; }
  .bc-r-v          { text-align: left; }
}