/* Verificación pública · Orden de Visita: verde esmeralda con detalles dorados, SIEMPRE claro; celular primero. */
:root {
  --verde-900: #063d27; --verde-700: #0d6b45; --verde-100: #e6f6ed; --verde-50: #f4fbf7;
  --oro: #c9a033; --oro-claro: #f6e3a1; --tinta: #0f2e22; --tenue: #4c6a5d; --linea: #d7e8de; --superficie: #ffffff;
  --ok: #157347; --ok-suave: #dcf3e6; --error: #b42318; --error-suave: #fde5e2; --aviso: #8a5a00; --aviso-suave: #fff1cf;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "New York", Georgia, serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: linear-gradient(180deg, var(--verde-50), #eaf5ef); color: var(--tinta); font: 16px/1.55 var(--sans); min-height: 100vh; display: flex; flex-direction: column;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); -webkit-text-size-adjust: 100%; }
.barra { position: sticky; top: 0; z-index: 5; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: linear-gradient(135deg, var(--verde-900), var(--verde-700)); border-bottom: 2px solid var(--oro); color: #fbfff9; }
.marca { display: flex; align-items: center; gap: 12px; max-width: 820px; margin: 0 auto; }
.marca strong { display: block; font: 600 17px var(--serif); }
.marca small { color: var(--oro-claro); font-size: 12px; }
.logo { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--oro); object-fit: cover; flex: none; }
.vista { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 18px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.pie { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); color: var(--tenue); font-size: 12px; border-top: 1px solid var(--linea); background: #fff; }
h1 { font: 600 22px/1.25 var(--serif); margin: 0; color: var(--verde-900); }
h2 { font: 600 18px var(--serif); margin: 0 0 6px; color: var(--verde-900); }
p { margin: 6px 0; }
.tenue { color: var(--tenue); }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-top: 3px solid var(--oro); border-radius: 16px; padding: 18px; box-shadow: 0 1px 2px rgba(6,61,39,.08), 0 6px 18px rgba(6,61,39,.08); }
.estado { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.icono { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 700; background: var(--ok-suave); color: var(--ok); }
.estado.error .icono { background: var(--error-suave); color: var(--error); }
.datos { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 6px 12px; margin: 10px 0 0; }
.datos dt { color: var(--tenue); font-size: 14px; }
.datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: 13px; font-weight: 500 !important; }
.nota { border-radius: 10px; padding: 10px 12px; margin: 10px 0 0; }
.nota.ok { background: var(--ok-suave); color: var(--ok); }
.nota.error { background: var(--error-suave); color: var(--error); }
.nota.aviso { background: var(--aviso-suave); color: var(--aviso); }
.boton { display: inline-block; margin-top: 10px; padding: 11px 16px; border-radius: 12px; background: linear-gradient(135deg, #fff1b8, #e9c45a 30%, #c9a033 60%, #f1d273); color: #3a2a06; font-weight: 700; text-decoration: none; border: 1px solid #b98a22; }
.archivo { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.archivo label { font-weight: 600; }
@media (max-width: 480px) { .datos { grid-template-columns: 1fr; } .datos dt { margin-top: 6px; } }