/* GP Eficiencia - Dron Solar */

.dgs {
  --dgs-navy: #0A1B3C;
  --dgs-navy-2: #102850;
  --dgs-navy-3: #16315F;
  --dgs-gold: #C9A227;
  --dgs-gold-2: #E7D191;
  --dgs-ink: #E8ECF5;
  --dgs-ink-dim: #9FB0CC;
  --dgs-line: rgba(201, 162, 39, .22);
  --dgs-ok: #6FD3A8;
  --dgs-no: #E2574C;
  --dgs-r: 4px;

  position: relative;
  background: var(--dgs-navy);
  color: var(--dgs-ink);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "tnum" 1;
  padding: 24px;
  border-radius: 8px;
  container-type: inline-size;
}

.dgs *, .dgs *::before, .dgs *::after { box-sizing: border-box; }

/* ---------------------------------------------------------- cabecera */
.dgs-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--dgs-line); }
.dgs-logo { flex: 0 0 auto; border-radius: 12px; }
.dgs-head__txt { flex: 1 1 auto; min-width: 0; }
.dgs-eyebrow { margin: 0 0 2px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dgs-gold); }
.dgs-head h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--dgs-ink); }

/* ------------------------------------------------------------- pasos */
.dgs-steps { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 18px 0 20px; padding: 0; counter-reset: dgs; }
.dgs-step { counter-increment: dgs; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dgs-ink-dim);
  cursor: pointer; border-radius: var(--dgs-r); transition: color .15s, background .15s; }
.dgs-step:hover { color: var(--dgs-ink); background: rgba(201,162,39,.08); }
.dgs-step > button { all: unset; cursor: pointer; letter-spacing: inherit; }
.dgs-step > button:focus-visible { outline: 2px solid var(--dgs-gold); outline-offset: 3px; }
.dgs-step::before { content: counter(dgs, decimal-leading-zero); display: grid; place-items: center;
  width: 22px; height: 22px; border: 1px solid var(--dgs-line); border-radius: 50%; font-size: 10px; color: var(--dgs-gold); }
.dgs-step.is-current { color: var(--dgs-ink); }
.dgs-step.is-current::before { background: var(--dgs-gold); color: var(--dgs-navy); border-color: var(--dgs-gold); font-weight: 700; }
.dgs-step.is-done::before { content: "✓"; color: var(--dgs-gold); }

/* ------------------------------------------------------------ layout */
.dgs-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 24px; align-items: start; }
@container (max-width: 900px) { .dgs-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .dgs-grid { grid-template-columns: 1fr; } .dgs { padding: 16px; } }

/* ------------------------------------------------------------ lienzo */
.dgs-canvas-wrap { position: relative; aspect-ratio: 16 / 10; background:
  linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03)),
  repeating-linear-gradient(0deg, transparent 0 23px, rgba(201,162,39,.06) 23px 24px),
  repeating-linear-gradient(90deg, transparent 0 23px, rgba(201,162,39,.06) 23px 24px);
  border: 1px solid var(--dgs-line); border-radius: var(--dgs-r); overflow: hidden; }
#dgs-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#dgs-canvas[data-mode="outline"], #dgs-canvas[data-mode="hole"], #dgs-canvas[data-mode="scale"] { cursor: crosshair; }
.dgs-canvas-wrap.has-frame 
/* --------------------------------------------------------- barra sup */
.dgs-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.dgs-toolbar__sep { flex: 1 1 auto; }
.dgs-mode { appearance: none; background: transparent; color: var(--dgs-ink-dim); border: 1px solid var(--dgs-line);
  border-radius: var(--dgs-r); padding: 6px 11px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.dgs-mode:hover { color: var(--dgs-ink); border-color: var(--dgs-gold); }
.dgs-mode.is-active { background: var(--dgs-gold); border-color: var(--dgs-gold); color: var(--dgs-navy); font-weight: 600; }

/* ----------------------------------------------------------- lectura */
.dgs-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
  margin: 16px 0 0; padding: 0; background: var(--dgs-line); border: 1px solid var(--dgs-line); border-radius: var(--dgs-r); overflow: hidden; }
.dgs-readout > div { background: var(--dgs-navy-2); padding: 10px 14px; }
.dgs-readout dt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dgs-ink-dim); }
.dgs-readout dd { margin: 2px 0 0; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--dgs-gold-2); }

/* --------------------------------------------------------- resultados */
.dgs-results { margin-top: 20px; }
.dgs-placeholder { color: var(--dgs-ink-dim); font-size: 13px; margin: 0; }

.dgs-verdict { margin-bottom: 14px; }
.dgs-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.dgs-badge--ok { background: rgba(111,211,168,.14); color: var(--dgs-ok); border: 1px solid rgba(111,211,168,.4); }
.dgs-badge--no { background: rgba(226,87,76,.14); color: var(--dgs-no); border: 1px solid rgba(226,87,76,.4); }

.dgs-headline { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
  background: var(--dgs-line); border: 1px solid var(--dgs-line); border-radius: var(--dgs-r); overflow: hidden; margin-bottom: 18px; }
.dgs-headline__item { background: var(--dgs-navy-2); padding: 16px; }
.dgs-headline__item .dgs-k { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dgs-ink-dim); }
.dgs-headline__item strong { display: block; font-size: 34px; line-height: 1.05; font-weight: 600; color: var(--dgs-gold); font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.dgs-headline__item em { font-style: normal; font-size: 12px; color: var(--dgs-ink-dim); }

.dgs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dgs-table th, .dgs-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(201,162,39,.14); }
.dgs-table th { font-weight: 400; color: var(--dgs-ink-dim); width: 62%; }
.dgs-table td { font-variant-numeric: tabular-nums; color: var(--dgs-ink); }

.dgs-note { margin-top: 16px; padding: 14px 16px; border-left: 2px solid var(--dgs-gold);
  background: rgba(201,162,39,.06); font-size: 13px; line-height: 1.6; color: var(--dgs-ink-dim); }
.dgs-note strong { color: var(--dgs-gold-2); }

.dgs-alert { padding: 16px; border: 1px solid rgba(226,87,76,.45); background: rgba(226,87,76,.08); border-radius: var(--dgs-r); }
.dgs-alert strong { color: var(--dgs-no); }
.dgs-alert p { margin: 6px 0; font-size: 13px; color: var(--dgs-ink-dim); }
.dgs-alert ul { margin: 8px 0 0 18px; padding: 0; font-size: 13px; }

/* -------------------------------------------------------- panel dcha */
.dgs-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-width: 0; align-content: stretch; }
.dgs-panel:not(:has(.dgs-live)) { grid-template-rows: minmax(0, 1fr); }

/* ---------------------------------------------- paneles por paso
   Solo hay uno visible a la vez. Es lo que permite que todo quepa en la
   ventana sin barras de desplazamiento laterales. */
.dgs-pane { display: none; }
.dgs-pane.is-active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  border: 1px solid var(--dgs-line);
  border-radius: var(--dgs-r);
  background: var(--dgs-navy-2);
  overflow: hidden;
}
.dgs-pane__title {
  margin: 0;
  padding: 9px 14px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dgs-gold);
  border-bottom: 1px solid var(--dgs-line);
}
.dgs-pane__body { padding: 12px 14px; display: grid; gap: 9px; align-content: start; min-height: 0; }
.dgs-pane__body--scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(201,162,39,.28) transparent; }
.dgs-pane__body--scroll::-webkit-scrollbar { width: 7px; }
.dgs-pane__body--scroll::-webkit-scrollbar-thumb { background: rgba(201,162,39,.22); border-radius: 7px; }
.dgs-pane__foot {
  display: flex; gap: 7px; padding: 9px 14px;
  border-top: 1px solid var(--dgs-line);
  background: rgba(255,255,255,.02);
}
.dgs-pane__foot .dgs-btn { flex: 1 1 0; padding: 9px 10px; white-space: nowrap; }
.dgs-actions { display: grid; gap: 8px; }

/* ------------------------------------------------- capa de ajustes */
.dgs-sheet {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(5, 13, 30, .78);
  backdrop-filter: blur(3px);
}
.dgs-sheet[hidden] { display: none; }
.dgs-sheet__box {
  width: min(1080px, 100%);
  max-height: min(86vh, 760px);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--dgs-navy-2);
  border: 1px solid var(--dgs-line);
  border-radius: 8px;
  overflow: hidden;
}
.dgs-sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--dgs-line);
}
.dgs-sheet__head h2 {
  margin: 0; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dgs-gold);
}
.dgs-sheet__body {
  padding: 18px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(201,162,39,.28) transparent;
}
.dgs-sheet__body::-webkit-scrollbar { width: 8px; }
.dgs-sheet__body::-webkit-scrollbar-thumb { background: rgba(201,162,39,.22); border-radius: 8px; }
.dgs-sheet__col { display: grid; gap: 9px; align-content: start; }
.dgs-sheet__col .dgs-sub { margin-top: 4px; }
@media (max-width: 900px) {
  .dgs-sheet { padding: 12px; }
  .dgs-sheet__body { grid-template-columns: 1fr; gap: 14px; }
}

/* ------------------------------------------------- boton de icono */
.dgs-icon-btn {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; border: 1px solid var(--dgs-line);
  border-radius: var(--dgs-r); color: var(--dgs-ink-dim); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.dgs-icon-btn:hover { color: var(--dgs-gold); border-color: var(--dgs-gold); }
.dgs-icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.dgs-card { border: 1px solid var(--dgs-line); border-radius: var(--dgs-r); background: var(--dgs-navy-2); }
.dgs-card > summary { cursor: pointer; list-style: none; padding: 13px 16px; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dgs-gold); font-weight: 600; }
.dgs-card > summary::-webkit-details-marker { display: none; }
.dgs-card > summary::after { content: "+"; float: right; color: var(--dgs-ink-dim); font-weight: 400; }
.dgs-card[open] > summary::after { content: "–"; }
.dgs-card__body { padding: 0 16px 16px; display: grid; gap: 10px; }

/* Bloque de ajustes: plegado por defecto y visualmente secundario, para que
   el operador no lo confunda con los pasos que si tiene que tocar. */
.dgs-card--adv { background: transparent; border-style: dashed; }
.dgs-card--adv > summary { color: var(--dgs-ink-dim); font-weight: 500; }
.dgs-card--adv[open] { background: var(--dgs-navy-2); border-style: solid; }
.dgs-card--adv .dgs-sub { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--dgs-line); }
.dgs-card--adv .dgs-sub:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.dgs-sub { margin: 4px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dgs-ink-dim); }
.dgs-hr { border: 0; border-top: 1px solid var(--dgs-line); margin: 6px 0; }
.dgs-help { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--dgs-ink-dim); }
.dgs-meta { margin: 0; font-size: 12px; color: var(--dgs-ink-dim); word-break: break-all; }

.dgs-field { display: grid; gap: 4px; }
.dgs-field > span { font-size: 11px; letter-spacing: .06em; color: var(--dgs-ink-dim); }
.dgs-field--req > span::after { content: " ·"; color: var(--dgs-gold); }
.dgs-field input, .dgs-field select {
  width: 100%; background: var(--dgs-navy); color: var(--dgs-ink); border: 1px solid var(--dgs-line);
  border-radius: var(--dgs-r); padding: 9px 11px; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; }
.dgs-field input:focus-visible, .dgs-field select:focus-visible,
.dgs-btn:focus-visible, .dgs-mode:focus-visible, .dgs-card > summary:focus-visible {
  outline: 2px solid var(--dgs-gold); outline-offset: 2px; }

.dgs-file { position: relative; display: block; }
.dgs-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dgs-file > span { display: block; text-align: center; padding: 11px; border: 1px dashed var(--dgs-line);
  border-radius: var(--dgs-r); font-size: 13px; color: var(--dgs-gold-2); }
.dgs-file:hover > span { border-color: var(--dgs-gold); }
.dgs-file--sm > span { padding: 9px; font-size: 12px; }

/* ------------------------------------------------------ reproductor */
.dgs-player {
  border: 1px solid var(--dgs-line);
  border-radius: var(--dgs-r);
  background: #05101F;
  overflow: hidden;
}
.dgs-player:fullscreen { display: flex; flex-direction: column; justify-content: center; background: #000; }
.dgs-player:fullscreen .dgs-player__screen { flex: 1 1 auto; max-height: none; }
.dgs-player:fullscreen #dgs-video { max-height: none; height: 100%; }

.dgs-player__screen { position: relative; background: #000; line-height: 0; }
#dgs-video { width: 100%; max-height: 150px; background: #000; cursor: pointer; }

.dgs-overlay-play {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 27, 60, .72);
  border: 1px solid var(--dgs-gold);
  cursor: pointer; padding: 0;
  transition: transform .15s, background .15s;
}
.dgs-overlay-play:hover { transform: scale(1.06); background: rgba(10, 27, 60, .9); }
.dgs-overlay-play svg { width: 26px; height: 26px; fill: var(--dgs-gold); margin-left: 3px; }
.dgs-overlay-play[hidden] { display: none; }

/* pista de progreso */
.dgs-scrub { position: relative; padding: 8px 12px 3px; }
.dgs-scrub__track {
  position: relative; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .14); overflow: visible;
}
.dgs-scrub__buffer, .dgs-scrub__played {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 3px; width: 0;
}
.dgs-scrub__buffer { background: rgba(255, 255, 255, .18); }

/* tramo marcado para medir */
.dgs-scrub__range {
  position: absolute; top: -2px; height: 9px; border-radius: 2px;
  background: rgba(111, 211, 168, .32);
  border-left: 1px solid var(--dgs-ok); border-right: 1px solid var(--dgs-ok);
  pointer-events: none;
}
.dgs-scrub__range[hidden] { display: none; }

.dgs-mark {
  position: absolute; top: 50%; width: 10px; height: 18px;
  transform: translate(-50%, -50%);
  background: var(--dgs-ok); border-radius: 2px;
  cursor: ew-resize; touch-action: none; z-index: 3;
}
.dgs-mark[hidden] { display: none; }
.dgs-mark::after {
  content: ""; position: absolute; top: 4px; left: 50%;
  width: 1px; height: 10px; margin-left: -0.5px;
  background: #05101F;
}
.dgs-mark--in { border-radius: 2px 0 0 2px; }
.dgs-mark--out { border-radius: 0 2px 2px 0; }
.dgs-mark:hover, .dgs-mark:focus-visible { background: #8FE3C0; }
.dgs-mark:focus-visible { outline: 2px solid var(--dgs-gold); outline-offset: 2px; }
.dgs-scrub__played { background: var(--dgs-gold); }
.dgs-scrub__knob {
  position: absolute; z-index: 2; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--dgs-gold); border: 2px solid #05101F;
  transform: translate(-50%, -50%); pointer-events: none;
  transition: transform .12s;
}
.dgs-scrub:hover .dgs-scrub__knob { transform: translate(-50%, -50%) scale(1.25); }

#dgs-seek {
  position: absolute; left: 12px; right: 12px; top: 4px;
  width: calc(100% - 24px); height: 18px; margin: 0;
  opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent;
}
#dgs-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; }
#dgs-seek:focus-visible { opacity: .01; outline: 2px solid var(--dgs-gold); outline-offset: 4px; }

/* botonera */
.dgs-controls {
  display: flex; flex-wrap: wrap; align-items: center;
  row-gap: 4px; column-gap: 2px;
  padding: 2px 7px 6px;
}
.dgs-controls__gap { flex: 1 1 auto; min-width: 6px; }

/* Nada dentro del reproductor debe apilarse: el atributo hidden manda
   siempre, para que los iconos de estado no se dibujen uno sobre otro. */
.dgs-player [hidden] { display: none !important; }

.dgs-ctrl {
  flex: 0 0 auto;
  display: inline-grid;
  grid-template-areas: "ico";
  place-items: center;
  box-sizing: border-box;
  width: 29px; height: 29px; padding: 0;
  background: transparent; border: 0; border-radius: var(--dgs-r);
  color: var(--dgs-ink-dim); cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0;
  line-height: 1; white-space: nowrap;
  transition: color .15s, background .15s;
}
.dgs-ctrl > * { grid-area: ico; }
.dgs-ctrl:hover { color: var(--dgs-gold); background: rgba(201, 162, 39, .12); }
.dgs-ctrl:disabled { opacity: .35; cursor: not-allowed; }
.dgs-ctrl svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* botones de salto, con etiqueta de texto en lugar de icono superpuesto */
.dgs-ctrl--txt { width: auto; min-width: 34px; padding: 0 7px; font-size: 11px; }

.dgs-ctrl--main { width: 33px; height: 33px; color: var(--dgs-gold); margin-right: 2px; }
.dgs-ctrl--main svg { width: 22px; height: 22px; }

.dgs-timecode--range { color: var(--dgs-ok); }
.dgs-timecode--range[hidden] { display: none; }

.dgs-timecode {
  flex: 0 0 auto;
  padding: 0 6px; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--dgs-gold-2); white-space: nowrap; line-height: 1;
}

/* controles de rango con aspecto propio, para que el pulsador no crezca */
.dgs-volume, .dgs-range {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; padding: 0;
  background: rgba(255, 255, 255, .18);
  cursor: pointer;
}
.dgs-volume { flex: 0 0 auto; width: 62px; margin: 0 6px 0 2px; }
.dgs-range { width: 100%; }
.dgs-volume::-webkit-slider-thumb, .dgs-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--dgs-gold); border: 0; cursor: pointer;
}
.dgs-volume::-moz-range-thumb, .dgs-range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--dgs-gold); border: 0; cursor: pointer;
}
.dgs-volume::-moz-range-track, .dgs-range::-moz-range-track {
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18);
}

.dgs-speed { flex: 0 0 auto; display: inline-flex; align-items: center; margin: 0 2px; }
.dgs-speed select {
  height: 27px; padding: 0 4px; font-size: 11px; line-height: 1;
  background: transparent; color: var(--dgs-ink-dim);
  border: 1px solid var(--dgs-line); border-radius: var(--dgs-r); cursor: pointer;
}
.dgs-speed select:hover { color: var(--dgs-gold); border-color: var(--dgs-gold); }

.dgs-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 420px) {
  .dgs-volume { width: 46px; }
  .dgs-ctrl { min-width: 28px; padding: 0 5px; }
}

.dgs-btn { appearance: none; cursor: pointer; border-radius: var(--dgs-r); padding: 9px 13px;
  font: inherit; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  line-height: 1.25; transition: background .15s, color .15s, border-color .15s; }
.dgs-btn--primary { background: var(--dgs-gold); border: 1px solid var(--dgs-gold); color: var(--dgs-navy); }
.dgs-btn--primary:hover { background: var(--dgs-gold-2); border-color: var(--dgs-gold-2); }
.dgs-btn--ghost { background: transparent; border: 1px solid var(--dgs-line); color: var(--dgs-ink-dim); }
.dgs-btn--ghost:hover { color: var(--dgs-ink); border-color: var(--dgs-gold); }
.dgs-btn--lg { padding: 12px 14px; font-size: 13px; }


#dgs-camera-preset { width: 100%; }
.dgs-opt { display: grid; gap: 10px; }
.dgs-opt.is-discouraged { opacity: .62; }
.dgs-opt.is-discouraged:focus-within,
.dgs-opt.is-discouraged:hover { opacity: 1; }
.dgs-opt.is-blocked { opacity: .42; }
.dgs-opt.is-blocked:hover, .dgs-opt.is-blocked:focus-within { opacity: .55; }
.dgs-opt.is-blocked > .dgs-sub { color: var(--dgs-no); }
.dgs-opt input:disabled, .dgs-opt button:disabled { cursor: not-allowed; }
.dgs-opt.is-blocked .dgs-file > span { border-style: solid; }
.dgs-opt.is-recommended {
  border-left: 2px solid var(--dgs-gold);
  padding-left: 12px;
  margin-left: -2px;
}
.dgs-opt.is-recommended > .dgs-sub { color: var(--dgs-gold); }

.dgs-edge-warning {
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(201, 162, 39, .5);
  background: rgba(201, 162, 39, .08);
  border-radius: var(--dgs-r);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dgs-ink-dim);
}
.dgs-edge-warning strong { color: var(--dgs-gold-2); }
.dgs-edge-warning.is-severe {
  border-color: rgba(226, 87, 76, .55);
  background: rgba(226, 87, 76, .10);
}
.dgs-edge-warning.is-severe strong { color: var(--dgs-no); }

/* --------------------------------------------- deteccion automatica */
.dgs-field > span b { color: var(--dgs-gold-2); font-variant-numeric: tabular-nums; }

.dgs-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--dgs-ink-dim); }
.dgs-check input { accent-color: var(--dgs-gold); width: 15px; height: 15px; cursor: pointer; }
.dgs-check:hover { color: var(--dgs-ink); }

.dgs-auto-report {
  padding: 10px 12px; border-radius: var(--dgs-r);
  font-size: 12px; line-height: 1.5;
  border: 1px solid var(--dgs-line); background: rgba(201, 162, 39, .07); color: var(--dgs-ink-dim);
}
.dgs-auto-report.is-ok { border-color: rgba(111, 211, 168, .45); background: rgba(111, 211, 168, .08); color: var(--dgs-ok); }
.dgs-auto-report.is-warn { border-color: rgba(201, 162, 39, .5); color: var(--dgs-gold-2); }
.dgs-auto-report.is-bad { border-color: rgba(226, 87, 76, .5); background: rgba(226, 87, 76, .08); color: var(--dgs-no); }

/* ----------------------------------------------------------- directo */
.dgs-live {
  border: 1px solid var(--dgs-line);
  border-radius: var(--dgs-r);
  background: var(--dgs-navy-2);
  overflow: hidden;
}
.dgs-live__head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--dgs-line);
}
.dgs-live__label {
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dgs-gold); white-space: nowrap;
}
.dgs-live__head .dgs-live-status {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dgs-live__toggle { width: 24px; height: 24px; }
.dgs-live__toggle svg { transition: transform .15s; }
.dgs-live.is-collapsed .dgs-live__toggle svg { transform: rotate(-90deg); }
.dgs-live.is-collapsed .dgs-live__body { display: none; }

.dgs-live__body { padding: 9px 12px 10px; display: grid; gap: 7px; }
.dgs-live__actions { display: flex; gap: 6px; }
.dgs-live__actions .dgs-btn { flex: 1 1 0; padding: 8px 6px; font-size: 11px; white-space: nowrap; }

.dgs-live-head { display: flex; align-items: center; gap: 8px; }
.dgs-live-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dgs-ink-dim); box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.dgs-live-dot.is-on { background: var(--dgs-ok); animation: dgs-pulse 1.6s ease-in-out infinite; }
@keyframes dgs-pulse { 50% { box-shadow: 0 0 0 6px rgba(111,211,168,.18); } }
@media (prefers-reduced-motion: reduce) { .dgs-live-dot.is-on { animation: none; } }

.dgs-live-status { font-size: 12px; line-height: 1.45; color: var(--dgs-ink-dim); }
.dgs-live-status.is-ok { color: var(--dgs-ok); }
.dgs-live-status.is-warn { color: var(--dgs-gold-2); }
.dgs-live-status.is-bad { color: var(--dgs-no); }

.dgs-live-video {
  width: 100%; aspect-ratio: 16 / 9; max-height: 112px; object-fit: contain;
  background: #000; border: 1px solid var(--dgs-line); border-radius: var(--dgs-r);
}

.dgs-live-marks {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0;
  background: var(--dgs-line); border: 1px solid var(--dgs-line);
  border-radius: var(--dgs-r); overflow: hidden;
}
.dgs-live-marks > div { background: var(--dgs-navy); padding: 5px 8px; }
.dgs-live-marks dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dgs-ink-dim); }
.dgs-live-marks dd { margin: 1px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--dgs-gold-2); }

#dgs-live-rec.is-recording { background: var(--dgs-no); border-color: var(--dgs-no); color: #fff; }

/* ------------------------------------------------------------ avisos */
.dgs-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 14px);
  background: var(--dgs-navy-3); color: var(--dgs-ink); border: 1px solid var(--dgs-gold);
  border-radius: var(--dgs-r); padding: 12px 20px; font-size: 13px; max-width: min(90vw, 460px);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999; }
.dgs-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.dgs-toast.is-error { border-color: var(--dgs-no); color: #FFD9D5; }

.dgs-busy { position: absolute; inset: 0; display: none; place-items: center;
  background: rgba(10,27,60,.78); border-radius: 8px; z-index: 20; }
.dgs.is-busy .dgs-busy { display: grid; }
.dgs-busy__box { display: flex; align-items: center; gap: 12px; padding: 16px 24px;
  border: 1px solid var(--dgs-line); border-radius: var(--dgs-r); background: var(--dgs-navy-2); font-size: 13px; }
.dgs-spinner { width: 16px; height: 16px; border: 2px solid var(--dgs-line);
  border-top-color: var(--dgs-gold); border-radius: 50%; animation: dgs-spin .8s linear infinite; }
@keyframes dgs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dgs-spinner { animation-duration: 2.4s; } .dgs-toast { transition: none; } }

/* ---------------------------------------------------------- impresion */
.dgs-print-sheet { display: none; }
@media print {
  body.dgs-printing > *:not(#dgs-print-sheet) { display: none !important; }
  body.dgs-printing { background: #fff; }
  body.dgs-printing .dgs-print-sheet { display: block !important; color: #000; font: 11pt/1.5 Georgia, "Times New Roman", serif; }
  body.dgs-printing .dgs-print-sheet header { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #C9A227; padding-bottom: 8px; margin-bottom: 12px; }
  body.dgs-printing .dgs-print-sheet #dgs-print-img { width: 100%; max-height: 90mm; object-fit: contain; margin: 10px 0; border: 1px solid #ccc; }
  body.dgs-printing .dgs-print-sheet .dgs-headline { display: flex; gap: 12px; border: 0; }
  body.dgs-printing .dgs-print-sheet .dgs-headline__item { background: none; border: 1px solid #C9A227; padding: 8px 12px; }
  body.dgs-printing .dgs-print-sheet .dgs-headline__item strong { color: #000; font-size: 20pt; }
  body.dgs-printing .dgs-print-sheet .dgs-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  body.dgs-printing .dgs-print-sheet .dgs-table th, body.dgs-printing .dgs-print-sheet .dgs-table td { border-bottom: 1px solid #ddd; padding: 4px 6px; text-align: left; }
  body.dgs-printing .dgs-print-sheet .dgs-badge { border: 1px solid #000; padding: 3px 8px; }
  body.dgs-printing .dgs-print-sheet .dgs-note { border-left: 2px solid #C9A227; padding-left: 10px; font-size: 9pt; }
  body.dgs-printing .dgs-print-sheet, body.dgs-printing .dgs-print-sheet * { break-inside: avoid; page-break-inside: avoid; }
  @page { size: A4 portrait; margin: 14mm; }
}

/* =========================================================================
   MODO APLICACION A PANTALLA COMPLETA
   Se activa con [dron_solar_app full="yes"] o con la URL /?dronapp=1, que
   sirve la app como documento propio, sin tema de WordPress ni barra del
   navegador cuando esta instalada como PWA.
   ========================================================================= */

body.dgs-standalone { margin: 0; padding: 0; background: var(--dgs-navy, #0A1B3C); overflow: hidden; }
body.dgs-standalone #wpadminbar { display: none !important; }

/* Una sola zona de desplazamiento en toda la aplicacion. Dos columnas con
   scroll propio obligan a fijarse donde esta el cursor antes de mover la
   rueda, y con un touchpad eso es un incordio. El lienzo se queda fijo
   mientras el resto se desplaza. */
.dgs--app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "cabecera pasos"
    "cuerpo   cuerpo";
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* --- cabecera compacta: logo, titulo y pasos en una sola franja */
.dgs--app .dgs-head {
  grid-area: cabecera;
  gap: 11px;
  padding: 7px 0 7px max(16px, env(safe-area-inset-left));
  border-bottom: 0;
  -webkit-app-region: drag;
}
.dgs--app .dgs-head button { -webkit-app-region: no-drag; }
.dgs--app .dgs-head { min-width: 0; overflow: hidden; }
.dgs--app .dgs-head__txt { flex: 0 1 auto; min-width: 0; }
.dgs--app .dgs-logo { width: 30px; height: 30px; border-radius: 7px; }
.dgs--app .dgs-eyebrow { display: none; }
.dgs--app .dgs-head h1 {
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: var(--dgs-ink-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dgs--app #dgs-install { padding: 6px 11px; font-size: 10px; }

.dgs--app .dgs-steps {
  grid-area: pasos;
  justify-self: end; align-self: center;
  margin: 0;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 0;
  flex-wrap: nowrap;
}
.dgs--app .dgs-step { padding: 4px 8px; font-size: 10px; gap: 6px; }
.dgs--app .dgs-step::before { width: 18px; height: 18px; font-size: 9px; }

/* --- cuerpo: unico contenedor con desplazamiento */
.dgs--app .dgs-grid {
  grid-area: cuerpo;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
  padding: 14px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
  border-top: 1px solid var(--dgs-line);
}
/* el lienzo ocupa lo que sobra, las herramientas y lecturas van fijas */
.dgs--app .dgs-stage {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  gap: 0;
}
.dgs--app .dgs-panel { min-height: 0; }



/* Barras de desplazamiento discretas */


/* El lienzo se dimensiona por altura de ventana para que quepa el conjunto */
.dgs--app .dgs-canvas-wrap { aspect-ratio: auto; height: auto; min-height: 0; }
.dgs--app .dgs-toolbar { margin-top: 9px; gap: 5px; }
.dgs--app .dgs-mode { padding: 6px 11px; font-size: 11px; }
.dgs--app .dgs-toolbar .dgs-btn { padding: 6px 11px; font-size: 11px; }
/* Las seis lecturas caben en una fila: si se parten, el hueco vacio
   queda como una franja muerta del color de la linea. */
.dgs--app .dgs-readout { margin-top: 11px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dgs--app .dgs-readout > div { padding: 7px 10px; }
.dgs--app .dgs-readout dd { font-size: 13px; }
@media (max-width: 1200px) {
  .dgs--app .dgs-readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dgs--app .dgs-busy { border-radius: 0; }

/* --- ventanas estrechas: una columna y cabecera apilada */
@media (max-width: 900px) {
  .dgs--app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "cabecera" "pasos" "cuerpo";
  }
  .dgs--app .dgs-steps { justify-self: stretch; padding: 0 14px 8px; flex-wrap: wrap; }
  .dgs--app .dgs-head { padding: 9px 14px; }
  .dgs--app .dgs-grid { padding: 12px 14px 18px; }
  .dgs--app .dgs-canvas-wrap { height: clamp(200px, 38vh, 400px); }
}

/* --- ventanas muy bajas: el lienzo cede altura */


/* Instalada como PWA no hay que ofrecer instalarla otra vez */
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: window-controls-overlay) {
  #dgs-install { display: none !important; }
}