:root { --fondo: #0A1A2F; --panel: #102438; --linea: #1F3A5A; --texto: #F3F6F4; --suave: #A9BACB; --verde: #2BC46A; --verde-osc: #009845; --rojo: #D9534F; --ambar: #E9B75A; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
main { max-width: 960px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 8px; color: var(--suave); font-weight: 600; }
.panel { background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--suave); }
input { font: inherit; padding: 12px; border-radius: 10px; border: 1px solid var(--linea); background: var(--fondo); color: var(--texto); }
button { font: inherit; font-weight: 600; padding: 12px 16px; border-radius: 999px; border: 0; background: var(--linea); color: var(--texto); cursor: pointer; }
button.primario { background: var(--verde-osc); }
button.peligro { background: var(--rojo); }
button:disabled { opacity: .5; cursor: default; }
.fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
video { width: 100%; max-height: 60vh; background: #000; border-radius: 12px; object-fit: contain; }
.estado { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--linea); }
.estado.ok { background: #124A2E; color: #9BE8BC; }
.estado.mal { background: #4A1A1A; color: #F6B3B1; }
.aviso { padding: 10px 14px; border-radius: 10px; background: #3A2E12; color: #F7DDA3; }
.error { color: #F6B3B1; font-size: 14px; }
.enlace { word-break: break-all; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--fondo); padding: 10px; border-radius: 8px; }
.lista { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; background: var(--fondo); flex-wrap: wrap; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.fotos img { width: 100%; border-radius: 8px; display: block; }
.casilla { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); }
.casilla input { width: 20px; height: 20px; }
.marcar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.marcar input[type=text] { flex: 1; min-width: 200px; }
[hidden] { display: none !important; }