/* Campos, selectores y botones de elección: que se vea claro dónde se escribe o se elige.
   Se carga al final en todas las páginas; "html body" sube la prioridad sobre los estilos de cada página. */
:root { --field:#0b1222; --field-b:#33456b; --field-bh:#4a6190; --ring:color-mix(in srgb, var(--acc) 38%, transparent);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393a4c3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2393a4c3' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --field:#ffffff; --field-b:#b8c4d6; --field-bh:#8a9bb5 } }
:root[data-theme="light"] { --field:#ffffff; --field-b:#b8c4d6; --field-bh:#8a9bb5 }

/* Etiqueta + campo + ayuda */
html body .fld { display:flex; flex-direction:column; gap:6px; flex:1 1 200px; min-width:0; margin:0 }
html body .fld.full { flex-basis:100% }
html body .fl-l { font-size:13px; font-weight:700; color:var(--fg); letter-spacing:.01em; display:flex; align-items:center; gap:6px }
html body .fl-l .opt { font-weight:500; color:var(--mut); font-size:12px }
html body .fl-h { font-size:12.5px; color:var(--mut); line-height:1.35 }
html body .row:has(> .fld) { align-items:flex-end }

/* Campos de texto, listas y áreas */
html body :is(input.inp, select.sel, textarea, #craft .sel) {
  min-height:48px; border-radius:12px; border:1.5px solid var(--field-b); background-color:var(--field); color:var(--fg);
  font:inherit; font-size:16px; padding:0 14px; transition:border-color .15s, box-shadow .15s; box-shadow:inset 0 1px 2px rgba(0,0,0,.08) }
html body textarea { padding:12px 14px; min-height:90px; width:100% }
html body :is(input.inp, select.sel, textarea)::placeholder { color:var(--mut); opacity:.85 }
html body :is(input.inp, select.sel, textarea):hover { border-color:var(--field-bh) }
html body :is(input.inp, select.sel, textarea):focus, html body :is(input.inp, select.sel, textarea):focus-visible { outline:none; border-color:var(--acc); box-shadow:0 0 0 4px var(--ring) }
html body select.sel { appearance:none; -webkit-appearance:none; background-image:var(--chev); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; cursor:pointer; text-overflow:ellipsis }
html body input.inp[type="search"], html body input.inp.buscar { background-image:var(--lupa); background-repeat:no-repeat; background-position:14px center; padding-left:44px }
html body input.inp[type="search"]::-webkit-search-cancel-button { cursor:pointer }
html body input.inp[type="number"] { font-variant-numeric:tabular-nums }
html body input.inp[type="file"] { padding:8px 10px; display:flex; align-items:center; font-size:14px; cursor:pointer }
html body input.inp[type="file"]::file-selector-button { font:inherit; font-weight:650; border:0; border-radius:9px; background:var(--acc); color:#fff; padding:8px 14px; margin-right:12px; cursor:pointer }
html body input[type="checkbox"], html body input[type="radio"] { accent-color:var(--acc); width:22px; height:22px; flex:none; cursor:pointer }

/* Botones: estado de foco visible */
html body :is(button, a.btn, .pbtn, .btn, .hbtn, .chip, .ctype, .ccat, .chk, .locbtn):focus-visible { outline:3px solid var(--acc); outline-offset:2px }

/* Opciones para elegir (chips, tipos de aeronave, días): la elegida se ve rellena y con palomita */
html body :is(.chip, .ctype) { min-height:44px; border:1.5px solid var(--field-b); background:var(--card); color:var(--fg); font-weight:650; padding:0 16px; border-radius:999px; transition:background .15s, border-color .15s }
html body :is(.chip, .ctype):hover { border-color:var(--acc) }
html body :is(.chip, .ctype).on { background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:0 2px 8px color-mix(in srgb, var(--acc) 35%, transparent) }
html body .ctype.on::before { content:"✓"; margin-right:6px; font-weight:800 }
html body .ccat { border:1.5px solid var(--field-b); color:var(--fg); min-height:52px }
html body .ccat:hover { border-color:var(--acc) }
html body .ccat.on { box-shadow:0 2px 10px color-mix(in srgb, var(--acc) 35%, transparent) }
html body .chk { min-height:44px; border:1.5px solid var(--field-b); padding:0 14px; font-weight:600 }
html body .chk:has(input:checked) { border-color:var(--acc); background:color-mix(in srgb, var(--acc) 16%, var(--card)) }
html body .ctypes, html body .chips { gap:8px }

/* Selector de ubicación en el encabezado: que parezca botón para cambiar */
html body .locbtn { min-height:40px; padding:6px 14px; border-width:1.5px; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.16); font-size:15px }
html body .locbtn:hover { background:rgba(255,255,255,.26) }

/* Bloque "elige" con título dentro de las secciones */
html body .pick-h { font-size:13px; font-weight:700; color:var(--fg); margin:4px 0 8px; display:flex; align-items:center; gap:6px }
html body .pick-h small { font-weight:500; color:var(--mut); font-size:12px }
html body .fld > :is(input, select, textarea) { flex:none; width:100%; max-width:100% }

/* Logo de Drone Solutions en la barra de secciones (computadora). En celular la barra va abajo y no cabe. */
html body .nav .nav-logo { display:none }
@media (min-width:801px) {
  html body .nav { position:sticky }
  html body .nav .nav-logo { display:flex; position:absolute; left:max(16px, env(safe-area-inset-left)); top:50%; transform:translateY(-50%); align-items:center; padding:0 4px; min-height:0; background:none !important }
  html body .nav .nav-logo img { height:40px; width:auto; display:block }
  html body .nav .nav-logo:hover { opacity:.85 }
}
@media (min-width:801px) and (max-width:1180px) { html body .nav { justify-content:flex-end; padding-left:150px } html body .nav .nav-logo img { height:32px } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nav .nav-logo img { filter:brightness(0) } }
:root[data-theme="light"] .nav .nav-logo img { filter:brightness(0) }