:root {
  --fondo: #eef2f5;
  --tarjeta: #ffffff;
  --tinta: #0f1f2b;
  --suave: #5b6b78;
  --linea: #d5dde4;
  --marca: #0f2a3d;
  --acento: #0f8a6f;
  --acento-claro: #e3f5ef;
  --error: #c0392b;
  --error-claro: #fdecea;
  --ambar: #9a6700;
  --ambar-claro: #fff4d6;
  --radio: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------- Barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 5; background: var(--marca); color: #fff;
  padding: calc(10px + env(safe-area-inset-top)) 16px 0;
  box-shadow: 0 2px 10px rgb(0 0 0 / .18);
}
.barra-tit { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; }
.logo { width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: #37c4a3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 17l5 5 9-11' stroke='%230f2a3d' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px no-repeat; }
h1 { font-size: 1.05rem; margin: 0; letter-spacing: .01em; }
.tecnico { background: none; border: 0; padding: 2px 0; color: #b9cad6; font-size: .85rem; text-align: left; }
.tecnico b { color: #fff; font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; }

.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pestanas button {
  min-height: 48px; border: 0; background: transparent; color: #b9cad6;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem;
  border-bottom: 3px solid transparent;
}
.pestanas button[aria-selected="true"] { color: #fff; border-bottom-color: #37c4a3; }

/* ---------- Contenido ---------- */
main { max-width: 640px; margin: 0 auto; padding: 18px 16px calc(110px + env(safe-area-inset-bottom)); }
.campo { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; margin-bottom: 14px; }
label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.opc, .obl { font-size: .7rem; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: 99px; }
.opc { background: #e8edf1; color: var(--suave); }
.obl { background: var(--error-claro); color: var(--error); }
input {
  width: 100%; min-height: 52px; padding: 10px 14px; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--linea); border-radius: 10px; background: #fbfcfd; outline: none;
}
input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgb(15 138 111 / .18); background: #fff; }
input[aria-invalid="true"] { border-color: var(--error); }
.ayuda { margin: 8px 0 0; font-size: .85rem; color: var(--suave); }
.error { margin: 8px 0 0; font-size: .88rem; color: var(--error); font-weight: 600; }
.fila-consulta { display: flex; gap: 8px; }
.fila-consulta input { flex: 1; min-width: 0; }

.btn-prim, .btn-sec { min-height: 52px; border-radius: 12px; font-weight: 700; padding: 0 18px; }
.btn-prim { width: 100%; border: 0; background: var(--acento); color: #fff; font-size: 1.05rem; box-shadow: 0 4px 14px rgb(15 138 111 / .3); }
.btn-prim:disabled { background: #9db3aa; box-shadow: none; }
.btn-sec { border: 1.5px solid var(--marca); background: #fff; color: var(--marca); flex: none; }
.btn-sec:disabled { opacity: .55; }
.btn-prim:active:not(:disabled), .btn-sec:active:not(:disabled) { transform: translateY(1px); }

.pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--fondo) 70%, rgb(238 242 245 / 0));
}
.pie .btn-prim { max-width: 608px; display: block; margin: 0 auto; }

/* ---------- Resultado de la consulta ---------- */
.res { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; margin-bottom: 14px; }
.res-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: var(--acento-claro); border-bottom: 1px solid #c5e8dc; }
.res-cab.alerta { background: var(--ambar-claro); border-bottom-color: #f0dc9c; }
.res-cab b { font-size: 1rem; }
.res-cab small { color: var(--suave); display: block; font-size: .8rem; }
.estado { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px; border-radius: 99px; background: #fff; border: 1px solid var(--linea); white-space: nowrap; }
.res-cuerpo { padding: 4px 14px 14px; }
.dato { padding: 10px 0; border-bottom: 1px dashed var(--linea); }
.dato:last-child { border-bottom: 0; }
.dato h3 { margin: 0 0 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.etq { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92rem; word-break: break-word; background: #f3f6f8; border-radius: 8px; padding: 8px 10px; margin: 6px 0 0; }
.etq.caja { background: #e8f0fb; }
.coords { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.enlace { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; background: var(--marca); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; }
details { margin-top: 4px; }
summary { min-height: 44px; display: flex; align-items: center; color: var(--suave); font-size: .88rem; font-weight: 600; }
.crudo { font-size: .85rem; white-space: pre-wrap; word-break: break-word; background: #f3f6f8; border-radius: 8px; padding: 10px; margin: 0; }
.meta { font-size: .8rem; color: var(--suave); }
.cargando { padding: 18px 14px; color: var(--suave); display: flex; align-items: center; gap: 10px; }
.cargando::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--linea); border-top-color: var(--acento); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.vacio { background: var(--tarjeta); border: 1.5px dashed var(--linea); border-radius: var(--radio); padding: 28px 18px; text-align: center; color: var(--suave); }
.vacio h2 { color: var(--tinta); margin: 0 0 6px; font-size: 1.1rem; }

/* ---------- Diálogos y aviso ---------- */
dialog { border: 0; border-radius: 18px; padding: 22px 18px; width: min(92vw, 380px); box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
dialog::backdrop { background: rgb(15 42 61 / .6); }
dialog h2 { margin: 0 0 4px; font-size: 1.15rem; }
dialog p { margin: 0 0 12px; color: var(--suave); font-size: .9rem; }
dialog input { margin-bottom: 12px; }

.aviso {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: .95rem;
  max-width: calc(100vw - 32px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 10;
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }
.aviso.ok { background: var(--acento); }
.aviso.mal { background: var(--error); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: 2s !important; } }