:root {
  --fondo: #0f1216;
  --panel: #171b21;
  --panel2: #1d222a;
  --borde: #2a313b;
  --texto: #e6e9ee;
  --tenue: #99a2b0;
  --acento: #4a9eff;
  --bueno: #35c07f;
  --flojo: #e0a83a;
  --malo: #e5644e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body.centrado {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marca { color: var(--texto); font-weight: 600; text-decoration: none; }
header nav { display: flex; align-items: center; gap: 16px; }
header a { color: var(--acento); text-decoration: none; }
header a:hover { text-decoration: underline; }

main { max-width: 980px; margin: 0 auto; padding: 24px; }

h1 { font-size: 22px; margin: 0 0 6px; }
h2 { font-size: 17px; margin: 0 0 6px; }

.sub { color: var(--tenue); margin: 0 0 18px; }
.pie { color: var(--tenue); font-size: 13px; margin: 12px 0 0; }
.tenue { color: var(--tenue); }
.oculto { display: none !important; }

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.tarjeta.centro { text-align: center; }
.tarjeta.info ol { margin: 8px 0 0; padding-left: 20px; color: var(--tenue); }
.tarjeta.info li { margin-bottom: 6px; }
.tarjeta.info strong { color: var(--texto); }

.login { width: min(380px, 92vw); text-align: center; }
.login input {
  width: 100%;
  margin: 14px 0 12px;
  padding: 12px 14px;
  font-size: 16px;
  background: var(--panel2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
}

button, .boton {
  display: inline-block;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  background: var(--acento);
  color: #04121f;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
button:hover:not(:disabled), .boton:hover { filter: brightness(1.12); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.secundario { background: transparent; color: var(--tenue); border: 1px solid var(--borde); }

.aviso {
  padding: 10px 14px;
  border-radius: 8px;
  margin: 0 0 14px;
  font-size: 14px;
}
.aviso.malo { background: rgba(229, 100, 78, .12); border: 1px solid rgba(229, 100, 78, .4); color: #ffb3a5; }

/* Progreso */
.barra { height: 10px; background: var(--panel2); border-radius: 999px; overflow: hidden; margin: 18px 0; }
.barra > div { height: 100%; background: var(--acento); transition: width .4s ease; }

/* Revisión */
.cabecera-revision { position: sticky; top: 57px; z-index: 5; }
.resumen { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--panel2);
  border: 1px solid var(--borde);
}
.chip.bueno { color: var(--bueno); border-color: rgba(53, 192, 127, .4); }
.chip.flojo { color: var(--flojo); border-color: rgba(224, 168, 58, .4); }
.chip.malo { color: var(--malo); border-color: rgba(229, 100, 78, .4); }

.expediente {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--bueno);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.expediente.flojo { border-left-color: var(--flojo); }
.expediente.sin-pareja { border-left-color: var(--malo); }

.exp-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.exp-cab .num { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.exp-cab .nom { color: var(--tenue); }
.veredicto { margin-left: auto; font-size: 13px; font-weight: 600; }
.veredicto.bueno { color: var(--bueno); }
.veredicto.flojo { color: var(--flojo); }
.veredicto.malo { color: var(--malo); }

.par { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lado { min-width: 0; }
.etiqueta { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); margin-bottom: 8px; }
.dato { font-size: 14px; margin-bottom: 3px; word-break: break-word; }
.dato.grande { font-size: 16px; font-weight: 600; }

.lado select {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 8px;
  background: var(--panel2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  font-size: 14px;
}

.ver { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--acento); text-decoration: none; }
.ver:hover { text-decoration: underline; }

.motivos { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borde); font-size: 13px; color: var(--tenue); }

.huerfanas ul { list-style: none; padding: 0; margin: 0; }
.huerfanas li { padding: 12px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.huerfanas li:last-child { border-bottom: 0; }
.huerfanas .ver { margin-left: 8px; }

.barra-acciones {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin-top: 20px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.barra-acciones .pie { margin: 0; }
.barra-acciones .pie.malo { color: var(--malo); }

.borrar { margin: 18px 0 40px; text-align: center; }

@media (max-width: 700px) {
  .cajas, .par { grid-template-columns: 1fr; }
  .cabecera-revision { position: static; }
  main { padding: 16px; }
}


/* Subida */
.zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 20px;
  margin: 18px 0;
  background: var(--panel2);
  border: 2px dashed var(--borde);
  border-radius: 12px;
  text-align: center;
}
.zona.encima { border-color: var(--acento); background: rgba(74, 158, 255, .06); }
.zona .icono { font-size: 32px; }
.zona .pista { color: var(--tenue); font-size: 13px; }
.zona .botones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }

.listado {
  list-style: none;
  padding: 12px 0 0;
  margin: 12px 0 0;
  border-top: 1px solid var(--borde);
  width: 100%;
  max-height: 210px;
  overflow-y: auto;
  font-size: 13px;
  text-align: left;
}
.listado li { padding: 3px 0; color: var(--acento); word-break: break-all; }
.listado li.tenue { color: var(--tenue); }

.arbol {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--panel2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
}

/* Revisión */
.marcar { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; font-weight: 600; }
.marcar input { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }
.origen { color: var(--tenue); font-size: 13px; word-break: break-all; }
.exp-cab .ver { margin: 0 0 0 auto; }

.campos { display: grid; grid-template-columns: 140px 1fr 1.4fr; gap: 12px; }
.campos label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campos span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.campos input {
  padding: 9px 12px;
  background: var(--panel2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  font-size: 15px;
  min-width: 0;
}
.campos input:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

.previa { color: var(--texto); font-variant-numeric: tabular-nums; }
.barra-acciones .pie.flojo { color: var(--flojo); }

@media (max-width: 700px) {
  .campos { grid-template-columns: 1fr; }
}