/* Paleta Medusa: azules translúcidos y morados suaves */
body {
  background: #0a1e3e;
  color: #c9e4f8;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
header {
  background: rgba(44, 123, 229,0.2);
  padding: 1rem;
  text-align: center;
}
nav.menu {
  display: flex;
  gap: 1rem;
  background: rgba(75, 123, 236,0.1);
  padding: 0.5rem;
  justify-content: center;
}
nav.menu button {
  background: rgba(75, 123, 236,0.5);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  color: #0a1e3e;
}
main {
  padding: 1rem;
  max-width: 800px;
  margin: 0 auto;
}
.form-section input,
.form-section button {
  padding: 0.5rem;
  margin: 0.5rem 0;
  font-size: 1rem;
  width: 100%;
}
.consultas-section table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
th,
td {
  border: 1px solid #2e5984;
  padding: 0.5rem;
  text-align: left;
}
.consultas-section th {
  background: rgba(44, 123, 229,0.3);
}
button.view-btn {
  background: rgba(44, 123, 229,0.7);
  color: #fff;
}

/* Responsive Mobile */
@media (max-width: 600px) {
  nav.menu {
    flex-direction: column;
    align-items: stretch;
  }
  nav.menu button {
    width: 100%;
  }
  .consultas-section table,
  .consultas-section thead,
  .consultas-section tbody,
  .consultas-section th,
  .consultas-section td,
  .consultas-section tr {
    display: block;
    width: 100%;
  }
  .consultas-section thead {
    display: none;
  }
  .consultas-section tr {
    margin-bottom: 1rem;
    border: 1px solid #2e5984;
    border-radius: 8px;
    padding: 0.5rem;
  }
  .consultas-section td {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
  }
  .consultas-section td::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 0.5rem;
  }
}

/* ---------- Modal base ---------- */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;
  align-items:center;justify-content:center;z-index:999}
#modal-box{background:#0a1e3e;border:1px solid #2e5984;border-radius:12px;
  max-width:90%;max-height:80%; width:70%;padding:1rem 2rem;overflow:auto;box-shadow:0 0 10px #000}
#modal-close{float:right;font-size:1.5rem;cursor:pointer;color:#c9e4f8}
#modal-content.scroll{overflow-y:auto}

/* ---------- Avatar + cabecera ---------- */
.result-header{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}
.result-header img{width:100px;height:100px;object-fit:cover;border-radius:8px;border:2px solid #2e5984}
.result-header h3{margin:0;color:#c9e4f8}
.result-header .number{font-size:1.1rem;color:#4ec9b0}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}
.chip{background:#2e5984;color:#fff;padding:.25rem .5rem;border-radius:16px;font-size:.85rem}
a.result-link{color:#9cdcfe;text-decoration:underline}

/* ---------- Grid detalles ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.grid p{margin:.25rem 0;font-size:.85rem}

/* ---------- Accordion fuentes ---------- */
.acc-item      {border:1px solid #2e5984;border-radius:8px;margin:.5rem 0;overflow:hidden}
.acc-header    {background:#2e5984;color:#fff;padding:.5rem .75rem;
                cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.acc-header span{font-weight:600}
/* ---------- Accordion body (scroll interno y sin saltos) ---------- */
.acc-body{
  display:none;
  background:#0f294b;
  padding:.75rem;
   
  overflow:auto;
} 

.acc-item.open .acc-body{display:block}
.acc-item.open .acc-header svg{transform:rotate(180deg)}
.acc-header svg{transition:.2s}
.acc-empty .acc-header{background:#3e4d5f}
.acc-empty .acc-header span{opacity:.5}

@media (max-width: 768px){

  main{padding:0;}             /* quitamos padding, lo daremos con % */

  /* ----- tarjeta ----- */
  #tbl-consultas tr{
    display:block;
    width:97%;                 /*  ❱❱  aquí  */
    margin:0 auto 1rem auto;   /* centrado y separación */
    border:1px solid #2e5984;
    border-radius:8px;
    box-sizing:border-box;     /* cuenta el borde dentro del 97 % */
    background:#0f294b;
    padding:.5rem 0;
  }

  /* ----- filas dentro de la tarjeta ----- */
  #tbl-consultas td{
    display:flex;
    justify-content:space-between;
    width:95%;                 /*  ❱❱  aquí  */
    margin:0 auto;             /* centra los td dentro del tr */
    padding:.25rem 0;
  }
  #tbl-consultas td::before{
    content:attr(data-label);
    font-weight:600;
    color:#9cdcfe;
  }

  /* opcional: cabecera fuera en móvil */
  #tbl-consultas thead{display:none;}
}


/* ---------- Desktop (mantiene tabla normal) ---------- */
#tbl-consultas{
  width:100%;
  border-collapse:collapse;
}
#tbl-consultas td,#tbl-consultas th{
  padding:.4rem .6rem;
  border:1px solid #2e5984;
}

/* ----- preview de imagen en el formulario ----- */
#preview-wrapper{
  margin:.5rem 0;
  display:flex;
  justify-content:center;
}
#preview-wrapper img{
  max-width:160px;
  max-height:160px;
  object-fit:cover;
  border:1px solid #2e5984;
  border-radius:8px;
}


/* ---------- preview & modal ---------- */
#preview-wrapper img{max-width:160px;max-height:160px;object-fit:cover;border:1px solid #2e5984;border-radius:8px}

.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;z-index:999}
.modal.hidden{display:none}
.modal-content{background:#0d1b2a;padding:1rem;border-radius:10px;max-width:95%;width:420px}
.modal-content h3{margin-top:0}
.close{float:right;font-size:24px;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem}
.card{background:#11263c;border-radius:6px;padding:.5rem;text-align:center}
.card img{width:100%;height:100px;object-fit:cover;border-radius:4px;margin-bottom:.25rem}


/* ==== Facial Search Results ==== */
.original-container {
  text-align: center;
  margin-bottom: 1rem;
}
.original-img {
  max-width: 200px;
  border-radius: 8px;
  border: 2px solid #2e5984;
}

.matches-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.match-card {
  background: #11263c;
  border: 1px solid #2e5984;
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}

.match-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.match-card p,
.match-card a {
  color: #c9e4f8;
  font-size: 0.9rem;
  margin: 0.25rem 0;
}

.match-card a {
  text-decoration: underline;
}


/* ==== Pendiente facial_search ==== */
#modal-content img { display:block; margin:1rem auto; }

/* ==== Resultados facial_search ==== */
.matches-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.match-card {
  background: #11263c;
  border: 1px solid #2e5984;
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}
.match-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.match-card p, .match-card a {
  color: #c9e4f8;
  font-size: 0.9rem;
  margin: 0.25rem 0;
}
.match-card a { text-decoration: underline; }

/* ==== Pendiente facial_search ==== */
#modal-content img { display: block; margin: 1rem auto; }

/* ==== Resultados facial_search ==== */
.matches-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.match-card {
  background: #11263c;
  border: 1px solid #2e5984;
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}
.match-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.match-card p, 
.match-card a {
  color: #c9e4f8;
  font-size: 0.9rem;
  margin: 0.25rem 0;
}
.match-card a { text-decoration: underline; }

/* ---------------- GRID DE COINCIDENCIAS ---------------- */
.matches-container{
  /* distribución en 3-4 columnas automáticas */
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1rem;                /* separación entre tarjetas */

  /* que crezca a lo ancho y desborde en vertical */
  max-height:70vh;         /* evita que tape toda la pantalla */
  overflow-y:auto;         /* scroll vertical dentro del modal */
  padding:1rem 0;
}

.match-card{
  background:#111;
  border-radius:8px;
  padding:.5rem;
  text-align:center;
}

.match-card img{
  width:100%;
  height:auto;
  border-radius:6px;
}


/* ------------ Phone Lookup · tabla KV ------------ */
.kv-table{
  width:100%;
  border-collapse:collapse;
  background:#111;
  margin-top:.5rem;
  font-size:.9rem;
}
.kv-table tr:nth-child(odd){ background:#141414; }
.kv-key{
  font-weight:600;
  padding:.35rem .6rem;
  width:35%;
  text-align:left;
  border-right:1px solid #222;
}
.kv-val{
  padding:.35rem .6rem;
  word-break:break-word;
}

/* ---------- Tabla Key-Value genérica ------------------- */
.kv-table{
  width:100%;
  border-collapse:collapse;
  margin-top:.3rem;
  font-size:.9rem;
  background:#fdfdfd;
}
.kv-table tr:nth-child(odd){ background:#f7f7f7; }

.kv-key, .kv-val{
  padding:.35rem .6rem;
  vertical-align:top;
  word-break:break-word;
}
.kv-val{
   color: #31377a;
}
.kv-key{
  font-weight:600;
  color:#2d8531;
  width:28%;
}
/* sangrías para sub-niveles (d1,d2,…) */
.kv-key.d1{ padding-left:1.2rem; }
.kv-key.d2{ padding-left:2.2rem; }
.kv-key.d3{ padding-left:3.2rem; }