:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --ink: #14213d;
  --muted: #6b7280;
  --line: #d9e2ef;
  --primary: #0b3b75;
  --primary-2: #115baa;
  --accent: #f59e0b;
  --danger: #b91c1c;
  --ok: #047857;
  --warn-bg: #fff7ed;
  --warn-line: #fed7aa;
  --shadow: 0 18px 45px rgba(15, 23, 42, .12);
  --radius: 20px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #dbeafe 0, transparent 32rem), var(--bg);
  color: var(--ink);
}
button, input, select, textarea { font: inherit; }
button {
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  color: white;
  background: var(--primary);
  cursor: pointer;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(11, 59, 117, .18);
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
button:hover { filter: brightness(1.05); transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button.secondary { background: var(--primary-2); }
button.accent { background: var(--accent); color: #231800; }
button.ghost { background: white; color: var(--primary); border: 1px solid var(--line); box-shadow: none; }
button.danger { background: var(--danger); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 28px clamp(16px, 5vw, 48px);
  background: linear-gradient(135deg, #062b57, #0b3b75 58%, #115baa);
  color: white;
}
.eyebrow { margin: 0 0 6px; color: #bfdbfe; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.topbar h1 { margin: 0; font-size: clamp(28px, 5vw, 48px); line-height: 1; }
.subtitle { margin: 10px 0 0; color: #dbeafe; max-width: 780px; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.layout {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
  gap: 20px;
  padding: 22px clamp(14px, 4vw, 38px);
  max-width: 1500px;
  margin: 0 auto;
}
.panel {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(217,226,239,.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 24px);
}
.records-panel, .app-mode-panel { grid-column: 1 / -1; }
.app-mode-panel { padding-top: 18px; padding-bottom: 18px; }
.section-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.compact-title { margin-bottom: 12px; }
.section-title h2 { margin: 0; font-size: 22px; }
.section-title p { margin: 4px 0 0; color: var(--muted); }
.badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #e0f2fe; color: #075985; padding: 7px 10px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.badge.muted { background: #f1f5f9; color: #475569; }
.badge.ok { background: #d1fae5; color: #065f46; }
.badge.warn { background: #ffedd5; color: #9a3412; }
.badge.danger { background: #fee2e2; color: #991b1b; }

.app-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app-checks div { border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; padding: 12px; }
.app-checks strong, .app-checks span { display: block; }
.app-checks strong { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.app-checks span { margin-top: 4px; font-weight: 900; color: var(--ink); }

.camera-box { position: relative; overflow: hidden; border-radius: 18px; background: #0f172a; aspect-ratio: 4 / 3; border: 1px solid #1e293b; margin-bottom: 10px; }
.camera-box video, .camera-box img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.camera-box video { z-index: 0; object-fit: cover; }
.camera-box img { z-index: 1; object-fit: contain; background: #050816; }
.camera-box.is-active .empty-camera { display: none !important; }
.empty-camera { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: white; gap: 8px; padding: 20px; background: linear-gradient(135deg, rgba(11,59,117,.72), rgba(15,23,42,.88)); z-index: 2; }
.empty-camera span { color: #bfdbfe; font-size: 14px; }
.status-line { color: var(--muted); font-size: 13px; font-weight: 700; margin: 8px 0 0; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-2 #clearPhotoBtn { grid-column: 1 / -1; }
.form-actions { justify-content: flex-start; }
.gps-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.gps-card div { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #f8fafc; min-width: 0; }
.gps-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.gps-card strong, .gps-card a { display: block; color: var(--ink); margin-top: 4px; word-break: break-word; font-size: 13px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
label { color: #334155; font-weight: 900; font-size: 13px; }
input, select, textarea { width: 100%; margin-top: 7px; border: 1px solid var(--line); border-radius: 13px; padding: 12px; background: #fbfdff; color: var(--ink); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--primary-2); box-shadow: 0 0 0 4px rgba(17,91,170,.10); }
.span-2 { grid-column: 1 / -1; }

.duplicate-box { border: 1px solid var(--warn-line); background: var(--warn-bg); border-radius: 16px; padding: 14px; margin-top: 16px; }
.dup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dup-item { border: 1px solid #fed7aa; background: white; border-radius: 14px; padding: 12px; margin-top: 10px; }
.dup-item strong { display: block; }
.dup-item p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.toolbar { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 10px; align-items: center; }
.records-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 16px; }
.record-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 10px 28px rgba(15, 23, 42, .07); }
.record-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; background: #050816; }
.record-body { padding: 14px; }
.record-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.record-top h3 { margin: 0; font-size: 16px; }
.record-meta { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.record-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.record-actions a, .record-actions button { font-size: 12px; padding: 9px 10px; border-radius: 11px; text-decoration: none; }
.record-actions a { background: #e0f2fe; color: #075985; font-weight: 900; }
.empty-list { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px; border: 1px dashed var(--line); border-radius: 18px; background: #fff; }
.footer { padding: 24px; text-align: center; color: var(--muted); }

@media (display-mode: standalone) {
  body { background: var(--bg); }
  .topbar { padding-top: calc(18px + env(safe-area-inset-top)); }
}

@media (max-width: 900px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .layout { grid-template-columns: 1fr; }
  .toolbar { grid-template-columns: 1fr; }
  .grid-2, .gps-card, .form-grid { grid-template-columns: 1fr; }
  .grid-2 #clearPhotoBtn { grid-column: auto; }
  .span-2 { grid-column: auto; }
}

@media (max-width: 700px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .topbar { padding: 18px 14px 16px; gap: 12px; }
  .topbar h1 { font-size: 30px; }
  .subtitle { font-size: 14px; }
  .header-actions { width: 100%; justify-content: space-between; }
  .layout { padding: 12px; gap: 12px; }
  .panel { border-radius: 18px; padding: 14px; box-shadow: 0 10px 25px rgba(15, 23, 42, .10); }
  .section-title { align-items: flex-start; gap: 10px; }
  .section-title h2 { font-size: 19px; }
  .section-title p { font-size: 13px; }
  .app-checks { grid-template-columns: 1fr; }
  .camera-box { border-radius: 16px; aspect-ratio: 3 / 4; }
  .actions { position: sticky; bottom: 0; z-index: 10; background: rgba(244,247,251,.96); backdrop-filter: blur(12px); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); margin-left: -2px; margin-right: -2px; }
  .actions button { flex: 1 1 100%; min-height: 48px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
  .grid-2 button { min-width: 0; padding-left: 10px; padding-right: 10px; }
  input, select, textarea { font-size: 16px; }
  .records-list { grid-template-columns: 1fr; }
}
.toolbar-v6 { grid-template-columns: 1fr auto auto auto auto auto; }
@media (max-width: 900px) { .toolbar-v6 { grid-template-columns: 1fr; } }
.field-note { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* v9: mejoras visuales para uso tipo app / iPhone */
.ios-hint {
  margin-top: 12px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  color: #0f2d4f;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
}
.template-strip {
  margin-top: 12px;
  border: 1px solid var(--line);
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 12px;
  align-items: end;
}
.template-strip label { margin: 0; }
.template-strip select { margin-top: 6px; background: #fff; }
.template-note { color: var(--muted); font-size: 13px; font-weight: 700; padding-bottom: 12px; }

@media (max-width: 700px) {
  body {
    background: #eef4fb;
    -webkit-tap-highlight-color: transparent;
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(255,255,255,.16);
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  .eyebrow { font-size: 11px; }
  .topbar h1 { font-size: 28px; }
  .camera-panel { padding: 10px; }
  .camera-panel .section-title { padding: 4px 4px 0; }
  .camera-box {
    border-radius: 22px;
    aspect-ratio: 9 / 16;
    max-height: 72vh;
    box-shadow: 0 20px 48px rgba(2, 6, 23, .22);
  }
  .camera-box video { object-fit: cover; }
  .camera-box img { object-fit: contain; }
  .template-strip {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 6px;
  }
  .template-note { padding-bottom: 0; font-size: 12px; }
  .gps-card { font-size: 12px; }
  .actions { border-radius: 20px 20px 0 0; padding-left: 10px; padding-right: 10px; }
  .actions button { border-radius: 18px; }
  .records-panel .toolbar button#exportXlsxBtn {
    min-height: 54px;
    font-size: 18px;
  }
}


/* v10: panel Compartir / Informar y experiencia más tipo app */
.share-report-card {
  border: 1px solid #dbe7f3;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
}
.share-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.share-head h3 { margin: 0; font-size: 22px; }
.share-head p { margin: 4px 0 0; color: var(--muted); }
.today-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.today-thumb, .today-more, .today-empty {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  color: var(--ink);
  min-height: 82px;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.today-thumb img { width: 100%; height: 82px; object-fit: cover; display: block; }
.today-thumb span {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgba(0,0,0,.56);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 7px;
}
.today-more, .today-empty { display: grid; place-items: center; padding: 10px; color: var(--muted); font-weight: 900; }
.share-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.share-tile {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 78px;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.share-tile span { font-size: 25px; line-height: 1; }
.share-tile strong { font-size: 12px; }
.share-tile.whatsapp { color: #075e54; background: #ecfdf5; }
.share-tile.pdf { color: #9f1239; background: #fff1f2; }
.share-tile.excel { color: #166534; background: #f0fdf4; }
.share-tile.zip { color: #92400e; background: #fffbeb; }
.share-tile.open { color: #0b3b75; background: #eff6ff; }
.share-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; }
@media (max-width: 700px) {
  .share-report-card { margin-top: 2px; border-radius: 18px; padding: 14px; }
  .share-head h3 { font-size: 21px; }
  .today-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .share-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .share-tile { min-height: 70px; border-radius: 16px; padding: 8px 4px; }
  .share-tile span { font-size: 22px; }
  .share-tile strong { font-size: 10.5px; }
  .records-panel { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}


/* v11: modo aplicativo real visual */
.app-shell { overscroll-behavior-y: contain; }
.bottom-app-nav { display: none; }

@media (display-mode: fullscreen), (display-mode: standalone) {
  .app-mode-panel { display: none !important; }
  .footer { display: none; }
}

@media (max-width: 700px) {
  .app-shell { padding-bottom: calc(72px + env(safe-area-inset-bottom)); background: #07172d; }
  .app-shell .topbar {
    min-height: auto;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    background: rgba(5, 26, 53, .96);
    backdrop-filter: blur(18px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
  }
  .app-shell .topbar .eyebrow { display: none; }
  .app-shell .topbar h1 { font-size: 18px; letter-spacing: -.02em; }
  .app-shell .topbar .subtitle { display: none; }
  .app-shell .header-actions { width: auto; gap: 6px; justify-content: flex-end; }
  .app-shell #connectionBadge, .app-shell #appModeBadge { display: none; }
  .app-shell #installBtn { padding: 9px 12px; border-radius: 999px; font-size: 12px; background: #fff; }
  .app-shell .layout { padding: 10px; gap: 10px; background: #eef4fb; border-radius: 0 0 24px 24px; }
  .app-shell .app-mode-panel { display: none !important; }
  .app-shell .camera-panel { order: 1; padding: 10px; background: #ffffff; }
  .app-shell .form-panel { order: 2; }
  .app-shell .records-panel { order: 3; }
  .app-shell .camera-panel .section-title h2::before { content: '📷 '; }
  .app-shell .camera-panel .section-title h2 { font-size: 18px; }
  .app-shell .camera-panel .section-title p { display: none; }
  .app-shell .camera-box { aspect-ratio: 9 / 16; min-height: 58vh; max-height: 72vh; border-radius: 26px; margin: 0; }
  .app-shell .status-line { margin: 8px 4px 0; }
  .app-shell .template-strip {
    margin-top: 10px;
    border-radius: 18px;
    background: #f9fbff;
  }
  .app-shell .gps-card { display: none; }
  .app-shell .camera-panel .actions {
    position: sticky;
    bottom: calc(62px + env(safe-area-inset-bottom));
    z-index: 35;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(217,226,239,.9);
    box-shadow: 0 14px 32px rgba(2,6,23,.16);
    border-radius: 24px;
    padding: 10px;
    margin: 10px 0 0;
    backdrop-filter: blur(18px);
  }
  .app-shell .grid-2 { grid-template-columns: 1fr 1fr; }
  .app-shell #gpsBtn { grid-column: 1 / 2; }
  .app-shell #captureBtn { grid-column: 2 / 3; }
  .app-shell #clearPhotoBtn { grid-column: 1 / -1; }
  .app-shell .records-panel .section-title p,
  .app-shell .form-panel .section-title p { font-size: 12px; }
  .bottom-app-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 60;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(217,226,239,.95);
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(2,6,23,.24);
    padding: 8px;
    backdrop-filter: blur(18px);
  }
  .bottom-app-nav a {
    text-decoration: none;
    color: #64748b;
    display: grid;
    place-items: center;
    gap: 2px;
    border-radius: 18px;
    padding: 8px 4px;
    min-height: 52px;
  }
  .bottom-app-nav a span { font-size: 20px; line-height: 1; }
  .bottom-app-nav a strong { font-size: 11px; }
  .bottom-app-nav a.active { color: #0b3b75; background: #eaf3ff; }
}

@media (max-width: 420px) {
  .app-shell .grid-2 button { font-size: 13px; padding: 11px 8px; }
  .app-shell #captureBtn { font-size: 14px; }
}

/* v12: modo cámara nativo, guardado automático y selección */
.selection-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fafc;
}
.selection-bar button { box-shadow: none; }
.record-card { position: relative; }
.record-card.is-selected { outline: 3px solid rgba(245,158,11,.65); box-shadow: 0 14px 34px rgba(245,158,11,.15); }
.record-select {
  position: absolute;
  z-index: 3;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  font-size: 12px;
  box-shadow: 0 8px 20px rgba(2,6,23,.18);
}
.record-select input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.shutter-btn { letter-spacing: -.01em; }

@media (max-width: 700px) {
  .app-shell.camera-native { background: #050816; }
  .app-shell .topbar {
    position: sticky;
    top: 0;
    min-height: auto;
    grid-template-columns: 1fr auto;
    background: rgba(3, 13, 29, .92);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: none;
  }
  .app-shell .layout {
    padding: 0;
    gap: 0;
    background: #050816;
    border-radius: 0;
    max-width: none;
  }
  .app-shell .camera-panel {
    min-height: calc(100vh - 138px - env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #050816;
    color: white;
    padding: 0 0 116px;
  }
  .app-shell .camera-panel .section-title {
    position: absolute;
    z-index: 8;
    left: 12px;
    right: 12px;
    top: calc(58px + env(safe-area-inset-top));
    margin: 0;
    color: white;
    pointer-events: none;
  }
  .app-shell .camera-panel .section-title h2 { display: none; }
  .app-shell #gpsBadge {
    margin-left: auto;
    background: rgba(255,255,255,.90);
    color: #064e3b;
    box-shadow: 0 8px 24px rgba(0,0,0,.20);
  }
  .app-shell .camera-box {
    width: 100%;
    min-height: calc(100vh - 188px - env(safe-area-inset-bottom));
    max-height: none;
    height: calc(100vh - 188px - env(safe-area-inset-bottom));
    aspect-ratio: auto;
    border-radius: 0 0 32px 32px;
    border: 0;
    box-shadow: none;
    margin: 0;
    background: #000;
  }
  .app-shell .camera-box video { object-fit: cover; }
  .app-shell .camera-box img { object-fit: contain; background: #000; }
  .app-shell .empty-camera {
    background: radial-gradient(circle at top, rgba(11,91,170,.62), rgba(2,6,23,.96));
    padding: 28px;
  }
  .app-shell .empty-camera strong { font-size: 23px; }
  .app-shell .empty-camera span { font-size: 14px; }
  .app-shell .status-line {
    position: absolute;
    z-index: 9;
    left: 14px;
    right: 14px;
    bottom: calc(150px + env(safe-area-inset-bottom));
    margin: 0;
    color: white;
    background: rgba(0,0,0,.36);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-shell .template-strip {
    position: absolute;
    z-index: 12;
    top: calc(86px + env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 26px rgba(0,0,0,.20);
  }
  .app-shell .template-strip label {
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 0;
  }
  .app-shell .template-strip label::before {
    content: 'Plantilla';
    font-size: 12px;
    font-weight: 950;
    color: #334155;
  }
  .app-shell .template-strip select {
    margin: 0;
    border-radius: 999px;
    padding: 8px 10px;
    font-size: 13px;
    background: #fff;
  }
  .app-shell .template-note { display: none; }
  .app-shell .camera-panel .actions {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr 92px;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border-radius: 28px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 20px 48px rgba(0,0,0,.32);
    backdrop-filter: blur(18px);
  }
  .app-shell .camera-panel .actions button {
    min-height: 48px;
    border-radius: 18px;
    box-shadow: none;
    font-size: 12px;
    padding: 8px 9px;
  }
  .app-shell #startCameraBtn { grid-column: 1 / 2; }
  .app-shell #switchCameraBtn { grid-column: 2 / 3; }
  .app-shell #gpsBtn { grid-column: 1 / 3; }
  .app-shell #clearPhotoBtn { display: none; }
  .app-shell #captureBtn.shutter-btn {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
    width: 80px;
    height: 80px;
    min-height: 80px;
    border-radius: 50%;
    padding: 0;
    color: transparent;
    background: #fff;
    border: 7px solid #f59e0b;
    box-shadow: inset 0 0 0 5px #fff, 0 8px 24px rgba(245,158,11,.42);
    overflow: hidden;
  }
  .app-shell #captureBtn.shutter-btn::after {
    content: '';
    position: absolute;
    inset: 17px;
    border-radius: 50%;
    background: #f59e0b;
  }
  .app-shell #captureBtn.shutter-btn:disabled { opacity: .55; }
  .app-shell .form-panel, .app-shell .records-panel {
    margin: 10px;
    border-radius: 24px;
    box-shadow: 0 16px 36px rgba(2,6,23,.20);
  }
  .selection-bar, .toolbar-v6 { display: grid; grid-template-columns: 1fr; }
  .bottom-app-nav {
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
  }
}

/* v13: corrección visual modo aplicativo/cámara
   - Arregla el óvalo naranja que se salía del botón de captura.
   - Reordena controles para que no se monten.
   - Deja la pantalla más tipo app, con cámara grande y controles flotantes. */
@media (max-width: 700px) {
  html, body {
    min-height: 100%;
    background: #050816 !important;
  }

  .app-shell.camera-native {
    background: #050816 !important;
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }

  .app-shell .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 80 !important;
    min-height: 58px !important;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(180deg, rgba(2, 13, 29, .98), rgba(2, 13, 29, .78)) !important;
    box-shadow: none !important;
  }

  .app-shell .topbar h1 {
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .app-shell .topbar .eyebrow,
  .app-shell .topbar .subtitle,
  .app-shell #connectionBadge,
  .app-shell #appModeBadge {
    display: none !important;
  }
  .app-shell .header-actions {
    width: auto !important;
    justify-content: flex-end !important;
  }
  .app-shell #installBtn {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #0b3b75 !important;
    font-size: 13px !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.25) !important;
  }

  .app-shell .layout {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    padding-top: calc(58px + env(safe-area-inset-top)) !important;
    gap: 0 !important;
    max-width: none !important;
    background: #050816 !important;
    border-radius: 0 !important;
  }

  .app-shell .camera-panel {
    position: relative !important;
    min-height: calc(100dvh - 86px - env(safe-area-inset-bottom)) !important;
    padding: 0 0 calc(182px + env(safe-area-inset-bottom)) !important;
    background: #050816 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .app-shell .camera-panel .section-title {
    display: none !important;
  }

  .app-shell .camera-box {
    position: relative !important;
    width: 100% !important;
    height: calc(100dvh - 92px - env(safe-area-inset-top)) !important;
    min-height: 540px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 0 28px 28px !important;
    background: #07172d !important;
    box-shadow: none !important;
  }

  .app-shell .camera-box::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0,0,0,.18), transparent 20%, transparent 58%, rgba(0,0,0,.68)),
      radial-gradient(circle at top, rgba(11,91,170,.22), transparent 38%);
    z-index: 1;
  }
  .app-shell .camera-box video,
  .app-shell .camera-box img {
    z-index: 0 !important;
  }
  .app-shell .camera-box video { object-fit: cover !important; }
  .app-shell .camera-box img { object-fit: contain !important; background: #000 !important; }

  .app-shell .empty-camera {
    z-index: 2 !important;
    background: radial-gradient(circle at 50% 18%, rgba(11,91,170,.55), rgba(2,6,23,.92) 62%) !important;
    padding: 36px 26px !important;
  }
  .app-shell .empty-camera strong { font-size: 24px !important; }
  .app-shell .empty-camera span { max-width: 310px; margin: 0 auto; line-height: 1.4; }

  .app-shell .template-strip {
    position: fixed !important;
    z-index: 85 !important;
    top: calc(64px + env(safe-area-inset-top)) !important;
    left: 14px !important;
    right: 14px !important;
    display: grid !important;
    grid-template-columns: 76px 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
  }
  .app-shell .template-strip label {
    display: contents !important;
    color: #0f172a !important;
    font-size: 0 !important;
  }
  .app-shell .template-strip label::before {
    content: 'Plantilla' !important;
    display: flex !important;
    align-items: center !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }
  .app-shell .template-strip select {
    margin: 0 !important;
    min-height: 40px !important;
    padding: 8px 34px 8px 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    box-shadow: inset 0 0 0 1px #dbe3ef !important;
  }
  .app-shell .template-note { display: none !important; }

  .app-shell .status-line {
    position: fixed !important;
    z-index: 82 !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(214px + env(safe-area-inset-bottom)) !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    background: rgba(0,0,0,.50) !important;
    color: #ffffff !important;
    backdrop-filter: blur(14px) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-shell .gps-card { display: none !important; }

  .app-shell .camera-panel .actions {
    position: fixed !important;
    z-index: 84 !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: 1fr 86px 1fr !important;
    grid-template-rows: 52px 42px !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 24px 58px rgba(0,0,0,.36) !important;
    backdrop-filter: blur(20px) !important;
  }

  .app-shell .camera-panel .actions button {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 17px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    box-shadow: none !important;
    white-space: normal !important;
    overflow: hidden !important;
  }
  .app-shell #startCameraBtn { grid-column: 1 / 2 !important; grid-row: 1 / 2 !important; }
  .app-shell #switchCameraBtn { grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; }
  .app-shell #gpsBtn {
    grid-column: 1 / 4 !important;
    grid-row: 2 / 3 !important;
    background: #eaf3ff !important;
    color: #0b3b75 !important;
  }
  .app-shell #clearPhotoBtn { display: none !important; }

  .app-shell #captureBtn.shutter-btn {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    color: transparent !important;
    background: #ffffff !important;
    border: 7px solid #f59e0b !important;
    box-shadow: inset 0 0 0 4px #fff, 0 9px 24px rgba(245,158,11,.42) !important;
    overflow: hidden !important;
    transform: translateY(8px) !important;
    isolation: isolate !important;
  }
  .app-shell #captureBtn.shutter-btn span { display: none !important; }
  .app-shell #captureBtn.shutter-btn::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 42px !important;
    height: 42px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    z-index: 1 !important;
  }
  .app-shell #captureBtn.shutter-btn:disabled {
    opacity: .55 !important;
    border-color: #cbd5e1 !important;
    box-shadow: inset 0 0 0 4px #fff, 0 9px 24px rgba(15,23,42,.18) !important;
  }
  .app-shell #captureBtn.shutter-btn:disabled::after { background: #94a3b8 !important; }

  .bottom-app-nav {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    border-radius: 26px !important;
    padding: 8px !important;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(217,226,239,.95) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.32) !important;
  }

  .app-shell .form-panel,
  .app-shell .records-panel {
    position: relative !important;
    z-index: 2 !important;
    margin: 12px !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 45px rgba(2,6,23,.22) !important;
  }
}

@media (max-width: 380px) {
  .app-shell .camera-panel .actions {
    left: 10px !important;
    right: 10px !important;
    grid-template-columns: 1fr 76px 1fr !important;
  }
  .app-shell #captureBtn.shutter-btn {
    width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    border-width: 6px !important;
  }
  .app-shell .camera-panel .actions button { font-size: 11.5px !important; }
}


/* v16 interactive gallery */
.record-card { position: relative; }
.record-select { position: absolute; top: 12px; left: 12px; z-index: 3; background: rgba(15,23,42,.68); color: #fff; border-radius: 999px; padding: 7px 12px; font-size: 12px; backdrop-filter: blur(10px); }
.record-select input { width: 16px; height: 16px; margin: 0 8px 0 0; accent-color: #f59e0b; }
.record-card.is-selected { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18), 0 10px 28px rgba(15,23,42,.07); }
.record-image-btn { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.record-image-btn img { width: 100%; }
.record-image-btn::after { content: 'Tocar para ampliar'; position: absolute; right: 12px; bottom: 12px; z-index: 2; background: rgba(15,23,42,.72); color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 7px 10px; opacity: .96; }
.record-actions { align-items: center; }
.bulk-action-bar { position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 50; background: rgba(9,18,32,.94); color: #fff; border-radius: 20px; padding: 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center; box-shadow: 0 18px 50px rgba(15,23,42,.28); backdrop-filter: blur(16px); }
.bulk-copy strong, .bulk-copy span { display: block; }
.bulk-copy span { color: #cbd5e1; font-size: 13px; margin-top: 4px; }
.bulk-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bulk-buttons button { min-height: 44px; }
.photo-modal, .export-sheet { position: fixed; inset: 0; z-index: 100; }
.photo-modal-backdrop, .export-sheet-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.72); backdrop-filter: blur(8px); }
.photo-modal-card { position: relative; z-index: 1; width: min(1100px, calc(100vw - 24px)); max-height: calc(100vh - 24px); margin: 12px auto; background: #0f172a; color: #fff; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); }
.photo-modal-media { position: relative; background: #020617; display: grid; place-items: center; min-height: 360px; }
.photo-modal-media img { width: 100%; height: 100%; object-fit: contain; max-height: calc(100vh - 24px); }
.photo-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(15,23,42,.76); color: #fff; font-size: 28px; }
.photo-nav.prev { left: 12px; } .photo-nav.next { right: 12px; }
.photo-modal-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 42px; height: 42px; border-radius: 999px; border: 0; background: rgba(15,23,42,.78); color: #fff; font-size: 20px; }
.photo-modal-body { padding: 20px; background: linear-gradient(180deg,#111827,#0f172a); overflow: auto; }
.photo-modal-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.photo-modal-head h3 { margin: 0; font-size: 22px; }
.photo-modal-head p { margin: 5px 0 0; color: #cbd5e1; font-size: 13px; line-height: 1.4; }
.photo-modal-address { color: #f8fafc; line-height: 1.55; margin: 14px 0; }
.photo-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.photo-modal-actions .map-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.export-sheet-card { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; background: #fff; border-radius: 24px 24px 0 0; padding: 18px; box-shadow: 0 -16px 40px rgba(15,23,42,.18); }
.export-sheet-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.export-sheet-head h3 { margin: 0; }
.export-sheet-head p { margin: 4px 0 0; color: #64748b; }
.export-sheet-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.small { padding: 10px 12px; min-height: 40px; }
body.modal-open { overflow: hidden; }
@media (max-width: 900px) { .photo-modal-card { grid-template-columns: 1fr; width: calc(100vw - 12px); max-height: calc(100vh - 12px); margin: 6px auto; } .photo-modal-media { min-height: 46vh; } }
@media (max-width: 700px) { .selection-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .selection-bar .badge { grid-column: 1 / -1; justify-self: flex-start; } .bulk-action-bar { left: 10px; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; } .bulk-buttons { width: 100%; } .bulk-buttons button { flex: 1 1 0; } .photo-modal-head { flex-direction: column; } .photo-modal-actions button, .photo-modal-actions a { flex: 1 1 calc(50% - 8px); } .export-sheet-grid { grid-template-columns: 1fr 1fr; } .record-image-btn::after { font-size: 11px; padding: 6px 8px; } }


/* v17: navegación por vistas + correcciones de orientación/interacción */
.records-list .record-card img,
.records-list .record-image-btn img {
  aspect-ratio: auto;
  object-fit: contain;
  max-height: 620px;
  background: #050816;
}

@media (max-width: 700px) {
  .app-shell.view-captura { background: #050816 !important; }
  .app-shell.view-datos,
  .app-shell.view-informar { background: #eef4fb !important; }

  .app-shell.view-captura .form-panel,
  .app-shell.view-captura .records-panel { display: none !important; }

  .app-shell.view-datos .camera-panel,
  .app-shell.view-datos .records-panel { display: none !important; }
  .app-shell.view-datos .form-panel {
    display: block !important;
    margin: 12px !important;
    margin-top: 12px !important;
    padding: 16px !important;
    padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 36px rgba(2,6,23,.18) !important;
  }

  .app-shell.view-informar .camera-panel,
  .app-shell.view-informar .form-panel { display: none !important; }
  .app-shell.view-informar .records-panel {
    display: block !important;
    margin: 12px !important;
    margin-top: 12px !important;
    padding: 14px !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 36px rgba(2,6,23,.18) !important;
  }

  .app-shell.view-datos .layout,
  .app-shell.view-informar .layout {
    display: block !important;
    padding: calc(58px + env(safe-area-inset-top)) 0 0 !important;
    background: #eef4fb !important;
    min-height: 100dvh;
  }

  .app-shell.view-datos .template-strip,
  .app-shell.view-datos .status-line,
  .app-shell.view-datos .camera-panel .actions,
  .app-shell.view-informar .template-strip,
  .app-shell.view-informar .status-line,
  .app-shell.view-informar .camera-panel .actions {
    display: none !important;
  }

  .app-shell.view-captura .template-strip {
    position: fixed !important;
    z-index: 85 !important;
    top: calc(64px + env(safe-area-inset-top)) !important;
    left: 14px !important;
    right: 14px !important;
    display: block !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
  }
  .app-shell.view-captura .template-strip label {
    display: block !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    color: #334155 !important;
  }
  .app-shell.view-captura .template-strip label::before { content: none !important; }
  .app-shell.view-captura .template-strip select {
    width: 100% !important;
    margin-top: 8px !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px #dbe3ef !important;
  }

  .app-shell.view-captura .camera-box {
    height: calc(100dvh - 92px - env(safe-area-inset-top)) !important;
    min-height: 560px !important;
  }
  .app-shell.view-captura .status-line {
    bottom: calc(220px + env(safe-area-inset-bottom)) !important;
  }
  .app-shell.view-captura .camera-panel .actions {
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  .app-shell.view-datos .section-title,
  .app-shell.view-informar .section-title { margin-bottom: 12px; }
  .app-shell.view-datos .form-grid { gap: 10px; }

  .app-shell.view-informar .share-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .app-shell.view-informar .share-head .badge { align-self: flex-start; }
  .app-shell.view-informar .share-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .app-shell.view-informar .share-tile { min-height: 72px; }
  .app-shell.view-informar .selection-bar {
    position: sticky;
    top: calc(70px + env(safe-area-inset-top));
    z-index: 8;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(12px);
    border-radius: 22px;
    box-shadow: 0 14px 32px rgba(2,6,23,.12);
  }
  .app-shell.view-informar .toolbar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .app-shell.view-informar .toolbar button {
    min-height: 48px;
    box-shadow: none;
  }
  .app-shell.view-informar .records-list {
    gap: 12px;
    padding-bottom: 14px;
  }
  .app-shell.view-informar .record-card {
    border-radius: 22px;
    overflow: hidden;
  }
  .app-shell.view-informar .record-body { padding: 12px; }

  .bulk-action-bar {
    bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    z-index: 95 !important;
  }
}


/* v18: captura continua, orientación adaptable y vista limpia */
.orientation-control { display: block; }
.orientation-control select { margin-top: 6px; }
@media (max-width: 700px) {
  .app-shell.view-captura .template-strip {
    display: grid !important;
    grid-template-columns: 1fr 108px !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    border-radius: 22px !important;
  }
  .app-shell.view-captura .template-strip label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    color: #334155 !important;
  }
  .app-shell.view-captura .template-strip select {
    min-height: 38px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    padding: 8px 9px !important;
  }
  .app-shell.view-captura .template-strip .orientation-control { display: block !important; }
  .app-shell.view-captura .template-note {
    grid-column: 1 / -1 !important;
    display: block !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    padding: 0 !important;
    color: #64748b !important;
  }
  .app-shell.view-captura .camera-panel .actions {
    grid-template-columns: 1fr 88px 1fr !important;
  }
  .app-shell.view-captura .status-line {
    pointer-events: none !important;
  }
  .app-shell.view-informar .record-actions a[href^="https://www.google.com/maps"]::before { content: '📍 '; }
}

/* v19: interfaz más tecnológica + captura continua + orientación limpia */
:root {
  --tech-cyan: #38bdf8;
  --tech-blue: #2563eb;
  --tech-violet: #7c3aed;
  --glass-dark: rgba(3, 10, 24, .62);
}
.camera-box.shot-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: rgba(255,255,255,.82);
  animation: shotPulse .26s ease-out forwards;
}
@keyframes shotPulse { 0% { opacity: .95; } 100% { opacity: 0; } }

@media (max-width: 700px) {
  .app-shell .topbar {
    background: linear-gradient(135deg, rgba(2,6,23,.98), rgba(11,59,117,.92), rgba(37,99,235,.72)) !important;
    border-bottom: 1px solid rgba(56,189,248,.18) !important;
  }
  .app-shell .topbar h1::after {
    content: '  LIVE';
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(16,185,129,.16);
    color: #86efac;
    font-size: 9px;
    letter-spacing: .08em;
    vertical-align: middle;
  }
  .app-shell #installBtn {
    background: linear-gradient(135deg, #ffffff, #eaf3ff) !important;
    box-shadow: 0 12px 28px rgba(37,99,235,.24) !important;
  }
  .app-shell.view-captura .template-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background: rgba(248,251,255,.90) !important;
    border: 1px solid rgba(255,255,255,.56) !important;
    box-shadow: 0 18px 42px rgba(2,6,23,.24), inset 0 1px 0 rgba(255,255,255,.65) !important;
  }
  .app-shell.view-captura .template-strip label {
    display: block !important;
    color: #334155 !important;
    font-size: 11px !important;
    letter-spacing: .02em !important;
  }
  .app-shell.view-captura .template-strip select {
    margin-top: 6px !important;
    min-height: 42px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148,163,184,.26) !important;
    background: linear-gradient(180deg,#fff,#f8fbff) !important;
    color: #0f172a !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
    font-size: 13px !important;
  }
  .app-shell.view-captura .template-note {
    display: block !important;
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 8px 10px 2px !important;
    color: #475569 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  .app-shell.view-captura.capture-landscape .template-note::after {
    content: ' · Horizontal detectado';
    color: #2563eb;
    font-weight: 950;
  }
  .app-shell.view-captura.capture-portrait .template-note::after {
    content: ' · Vertical detectado';
    color: #047857;
    font-weight: 950;
  }
  .app-shell.view-captura .camera-box::after {
    background:
      linear-gradient(180deg, rgba(2,6,23,.25), transparent 25%, transparent 57%, rgba(2,6,23,.76)),
      radial-gradient(circle at 82% 18%, rgba(56,189,248,.16), transparent 30%),
      radial-gradient(circle at 20% 8%, rgba(124,58,237,.16), transparent 28%) !important;
  }
  .app-shell.view-captura .status-line {
    background: linear-gradient(135deg, rgba(3,10,24,.72), rgba(15,23,42,.52)) !important;
    border: 1px solid rgba(56,189,248,.22) !important;
    box-shadow: 0 12px 30px rgba(2,6,23,.25) !important;
  }
  .app-shell.view-captura .camera-panel .actions {
    grid-template-columns: 1fr 92px 1fr !important;
    grid-template-rows: 50px 44px !important;
    background: rgba(248,251,255,.90) !important;
    border: 1px solid rgba(255,255,255,.68) !important;
    box-shadow: 0 24px 64px rgba(2,6,23,.38), inset 0 1px 0 rgba(255,255,255,.72) !important;
  }
  .app-shell.view-captura .camera-panel .actions button:not(.shutter-btn) {
    background: linear-gradient(135deg, #0b3b75, #1768c8) !important;
  }
  .app-shell.view-captura #gpsBtn {
    background: linear-gradient(135deg, #e0f2fe, #eff6ff) !important;
    color: #0b3b75 !important;
  }
  .app-shell.view-captura #captureBtn.shutter-btn {
    width: 82px !important;
    height: 82px !important;
    border: 7px solid #f59e0b !important;
    box-shadow: inset 0 0 0 5px #fff, 0 0 0 7px rgba(245,158,11,.18), 0 14px 34px rgba(245,158,11,.40) !important;
  }
  .app-shell.view-captura #captureBtn.shutter-btn::after {
    background: radial-gradient(circle at 35% 30%, #fcd34d, #f59e0b 60%, #ea580c) !important;
  }
  .bottom-app-nav {
    background: rgba(248,251,255,.92) !important;
    border: 1px solid rgba(255,255,255,.66) !important;
    box-shadow: 0 20px 54px rgba(2,6,23,.32), inset 0 1px 0 rgba(255,255,255,.70) !important;
  }
  .bottom-app-nav a.active {
    background: linear-gradient(135deg, #e0f2fe, #eef5ff) !important;
    color: #0b3b75 !important;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.08) !important;
  }

  /* Cuando el equipo está horizontal, damos más espacio a cámara y bajamos la leyenda/controles */
  .app-shell.view-captura.capture-landscape .template-strip {
    top: calc(58px + env(safe-area-inset-top)) !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 8px 10px !important;
  }
  .app-shell.view-captura.capture-landscape .template-note { display: none !important; }
  .app-shell.view-captura.capture-landscape .status-line {
    bottom: calc(184px + env(safe-area-inset-bottom)) !important;
  }
  .app-shell.view-captura.capture-landscape .camera-panel .actions {
    bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  }
  .app-shell.view-captura.capture-landscape .bottom-app-nav {
    opacity: .95;
  }

  .app-shell.view-informar .share-report-card,
  .app-shell.view-informar .selection-bar,
  .app-shell.view-informar .toolbar,
  .app-shell.view-informar .record-card {
    border: 1px solid rgba(203,213,225,.72) !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.08) !important;
  }
  .app-shell.view-informar .share-tile {
    background: linear-gradient(180deg,#ffffff,#f8fbff) !important;
  }
}

/* v20 - modo cámara profesional: menos web, más app */
@media (max-width: 700px) {
  html, body { width: 100%; height: 100%; overflow: hidden !important; background: #020817 !important; }
  body.app-shell { min-height: 100dvh; background: #020817 !important; color: #fff; }

  .app-shell .hero {
    position: fixed !important;
    z-index: 90 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(56px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(180deg, rgba(5,12,24,.88), rgba(5,12,24,.50), rgba(5,12,24,0)) !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
  }
  .app-shell .hero .hero-text { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .app-shell .hero .hero-kicker,
  .app-shell .hero .hero-subtitle,
  .app-shell .hero .hero-badges { display: none !important; }
  .app-shell .hero h1 { font-size: 18px !important; line-height: 1 !important; margin: 0 !important; letter-spacing: -.02em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-shell #installBtn { min-height: 40px !important; padding: 8px 14px !important; border-radius: 999px !important; font-size: 13px !important; background: rgba(255,255,255,.94) !important; color: #0b3b75 !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; }

  .app-shell.view-captura .layout,
  .app-shell .layout {
    display: block !important;
    width: 100vw !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #020817 !important;
  }
  .app-shell.view-captura .camera-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #020817 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  .app-shell.view-captura .camera-panel .section-title,
  .app-shell.view-captura .gps-card,
  .app-shell.view-captura .template-note,
  .app-shell.view-captura #emptyCamera span { display: none !important; }

  .app-shell.view-captura .camera-box {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: #020817 !important;
    overflow: hidden !important;
  }
  .app-shell.view-captura #video,
  .app-shell.view-captura #preview {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }
  .app-shell.view-captura .empty-camera { background: radial-gradient(circle at center, rgba(37,99,235,.24), rgba(2,8,23,.95)) !important; }

  .app-shell.view-captura .template-strip {
    position: fixed !important;
    z-index: 92 !important;
    top: calc(62px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr 116px !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 22px !important;
    background: rgba(3,10,23,.36) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.20) !important;
    backdrop-filter: blur(18px) !important;
    margin: 0 !important;
  }
  .app-shell.view-captura .template-strip label { color: #fff !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .05em !important; text-transform: uppercase !important; display: block !important; }
  .app-shell.view-captura .template-strip select {
    margin-top: 4px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.90) !important;
    color: #0f172a !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    box-shadow: none !important;
  }

  .app-shell.view-captura .status-line {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(166px + env(safe-area-inset-bottom)) !important;
    z-index: 93 !important;
    min-height: 38px !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    background: rgba(2,8,23,.56) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 16px 35px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(14px) !important;
  }

  .app-shell.view-captura .camera-panel .actions {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    z-index: 94 !important;
    display: grid !important;
    grid-template-columns: 1fr 82px 1fr !important;
    grid-template-areas:
      "start shutter switch"
      "gps gps gps" !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(20px) !important;
  }
  .app-shell.view-captura #startCameraBtn { grid-area: start; }
  .app-shell.view-captura #switchCameraBtn { grid-area: switch; }
  .app-shell.view-captura #gpsBtn { grid-area: gps; }
  .app-shell.view-captura #captureBtn { grid-area: shutter; }
  .app-shell.view-captura #clearPhotoBtn { display: none !important; }

  .app-shell.view-captura .camera-panel .actions button:not(.shutter-btn) {
    min-height: 48px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: 0 8px 20px rgba(11,59,117,.18) !important;
  }
  .app-shell.view-captura #gpsBtn { min-height: 42px !important; background: #eaf5ff !important; color: #0b3b75 !important; box-shadow: none !important; }
  .app-shell.view-captura #captureBtn.shutter-btn {
    width: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 8px solid #fff !important;
    outline: 5px solid rgba(245,158,11,.85) !important;
    background: radial-gradient(circle at 36% 32%, #fff4c5, #f59e0b 48%, #d97706 100%) !important;
    color: transparent !important;
    box-shadow: 0 0 0 10px rgba(245,158,11,.18), 0 18px 35px rgba(245,158,11,.30) !important;
  }
  .app-shell.view-captura #captureBtn.shutter-btn span { display: none !important; }

  .bottom-app-nav {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 96 !important;
    min-height: 56px !important;
    border-radius: 24px !important;
    padding: 6px !important;
    background: rgba(255,255,255,.90) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.22) !important;
  }
  .bottom-app-nav a { min-height: 44px !important; padding: 6px !important; border-radius: 18px !important; color: #64748b !important; }
  .bottom-app-nav a.active { background: #eaf5ff !important; color: #0b3b75 !important; }
  .bottom-app-nav span { font-size: 18px !important; }
  .bottom-app-nav strong { font-size: 11px !important; }

  .app-shell.view-datos,
  .app-shell.view-informar { overflow: auto !important; background: #eef4fb !important; }
  .app-shell.view-datos .layout,
  .app-shell.view-informar .layout { padding: calc(68px + env(safe-area-inset-top)) 10px calc(84px + env(safe-area-inset-bottom)) !important; background: #eef4fb !important; }
  .app-shell.view-datos .form-panel,
  .app-shell.view-informar .records-panel { border-radius: 24px !important; background: #fff !important; box-shadow: 0 16px 38px rgba(2,8,23,.16) !important; margin: 0 !important; }
}

@media (max-width: 700px) and (orientation: landscape) {
  html, body { overflow: hidden !important; }
  .app-shell.view-captura .hero { height: calc(46px + env(safe-area-inset-top)) !important; }
  .app-shell.view-captura .template-strip {
    top: calc(50px + env(safe-area-inset-top)) !important;
    left: 10px !important;
    right: auto !important;
    width: min(420px, 48vw) !important;
    grid-template-columns: 1fr 104px !important;
    padding: 7px !important;
  }
  .app-shell.view-captura .template-strip select { min-height: 34px !important; font-size: 12px !important; }
  .app-shell.view-captura .status-line {
    left: 12px !important;
    right: auto !important;
    width: min(430px, 50vw) !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }
  .app-shell.view-captura .camera-panel .actions {
    left: 12px !important;
    right: auto !important;
    width: min(430px, 50vw) !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    grid-template-columns: 1fr 70px 1fr !important;
    padding: 8px !important;
    border-radius: 22px !important;
  }
  .app-shell.view-captura .camera-panel .actions button:not(.shutter-btn) { min-height: 38px !important; font-size: 11px !important; }
  .app-shell.view-captura #gpsBtn { min-height: 34px !important; }
  .app-shell.view-captura #captureBtn.shutter-btn { width: 64px !important; height: 64px !important; min-height: 64px !important; border-width: 6px !important; outline-width: 4px !important; }
  .bottom-app-nav {
    left: auto !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: min(290px, 38vw) !important;
    min-height: 54px !important;
  }
}


/* ===== v21 camera-first mobile experience ===== */
.icon-btn{border:0;background:rgba(255,255,255,.14);color:#fff;width:44px;height:44px;border-radius:14px;font-size:20px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(2,8,23,.18)}
.topbar-brand{display:flex;align-items:center;gap:12px}
.live-stamp-preview{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg,rgba(12,18,34,.16),rgba(2,6,23,.55));backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);color:#fff;box-shadow:0 20px 44px rgba(0,0,0,.24);pointer-events:none}
.live-stamp-brand{font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fbbf24;margin-bottom:6px}
.live-stamp-main{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.live-stamp-main strong{font-size:44px;line-height:.95;font-weight:300;letter-spacing:-.04em}
.live-stamp-main span{font-size:18px;font-weight:800}
.live-stamp-address,.live-stamp-meta{font-size:13px;line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.live-stamp-address{margin-top:6px;font-weight:700}
.live-stamp-meta{margin-top:4px;color:rgba(255,255,255,.9)}
.zoom-bar{display:flex;justify-content:center;gap:8px;margin:8px 0 0}
.zoom-bar button{min-width:52px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(15,23,42,.58);color:#fff;font-weight:800;font-size:13px;backdrop-filter:blur(10px)}
.zoom-bar button.active{background:#f59e0b;color:#111827;border-color:#fbbf24;box-shadow:0 10px 20px rgba(245,158,11,.3)}
.quick-menu-sheet[hidden]{display:none!important}
.quick-menu-sheet{position:fixed;inset:0;z-index:55}
.quick-menu-backdrop{position:absolute;inset:0;background:rgba(2,8,23,.52);backdrop-filter:blur(3px)}
.quick-menu-card{position:absolute;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));background:#fff;border-radius:28px;padding:18px;box-shadow:0 28px 64px rgba(2,8,23,.28);max-height:min(76vh,720px);overflow:auto}
.quick-menu-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.quick-menu-head h3{margin:0;font-size:22px;color:#0f172a}
.quick-menu-head p{margin:6px 0 0;color:#475569;font-size:13px;line-height:1.35}
.quick-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.quick-menu-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.quick-menu-settings label{font-size:13px;font-weight:800;color:#334155}
.quick-menu-settings select{width:100%;margin-top:8px;border-radius:16px;border:1px solid #dbe4f0;padding:13px 14px;font:inherit;background:#f8fafc}
.quick-menu-note{margin:14px 2px 2px;color:#475569;font-size:12.5px;line-height:1.4}

@media (max-width: 700px){
  body.app-shell.camera-native{background:#040812!important;overflow-x:hidden}
  .app-shell .topbar.app-topbar-modern{position:fixed!important;top:0;left:0;right:0;z-index:30;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:calc(12px + env(safe-area-inset-top)) 12px 12px!important;background:linear-gradient(180deg,rgba(3,10,25,.96),rgba(5,15,36,.72) 70%,rgba(5,15,36,0))!important;box-shadow:none!important;border:0!important}
  .app-shell .topbar .header-actions{display:flex!important;align-items:center!important;gap:8px!important}
  .app-shell .topbar .header-actions .badge{display:none!important}
  .app-shell .topbar .ghost{min-height:40px!important;padding:0 14px!important;border-radius:999px!important;background:rgba(255,255,255,.94)!important;color:#0b3b75!important;font-weight:900!important;box-shadow:0 10px 24px rgba(2,8,23,.20)!important}
  .app-shell .topbar h1{font-size:18px!important;color:#fff!important}
  .app-shell .topbar .eyebrow,.app-shell .topbar .subtitle{display:none!important}
  .app-shell.view-captura .camera-panel{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;padding:0!important;background:#000!important;border-radius:0!important;overflow:hidden!important;z-index:1!important}
  .app-shell.view-captura .camera-panel .section-title,
  .app-shell.view-captura .template-strip,
  .app-shell.view-captura .gps-card,
  .app-shell.view-captura .camera-status-inline{display:none!important}
  .app-shell.view-captura .camera-box{position:absolute!important;inset:0!important;min-height:100dvh!important;max-height:none!important;aspect-ratio:auto!important;border-radius:0!important;border:0!important;background:#000!important}
  .app-shell.view-captura .camera-box::after{content:'';position:absolute;left:0;right:0;bottom:0;height:44%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.16) 28%,rgba(0,0,0,.56) 100%);z-index:1;pointer-events:none}
  .app-shell.view-captura .camera-box video,.app-shell.view-captura .camera-box img{width:100%!important;height:100%!important;object-fit:cover!important}
  .app-shell.view-captura .empty-camera{position:absolute!important;inset:auto 18px calc(176px + env(safe-area-inset-bottom)) 18px!important;z-index:2!important;border-radius:22px!important;background:rgba(5,15,36,.52)!important;color:#fff!important;backdrop-filter:blur(14px)!important;padding:16px!important;border:1px solid rgba(255,255,255,.16)!important}
  .app-shell.view-captura .empty-camera strong{font-size:24px!important}
  .app-shell.view-captura .zoom-bar{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;bottom:162px!important;z-index:3!important;margin:0!important}
  .app-shell.view-captura .actions.app-camera-controls{position:absolute!important;left:12px!important;right:12px!important;bottom:calc(86px + env(safe-area-inset-bottom))!important;z-index:4!important;display:grid!important;grid-template-columns:62px 1fr 92px 62px!important;grid-template-areas:'switch shutter capture menu'!important;align-items:center!important;gap:12px!important;padding:0!important;background:transparent!important;box-shadow:none!important}
  .app-shell.view-captura .actions.app-camera-controls button{min-height:58px!important;border-radius:20px!important;font-size:0!important;padding:0!important;border:1px solid rgba(255,255,255,.15)!important;backdrop-filter:blur(14px)!important;background:rgba(10,19,38,.58)!important;color:#fff!important;box-shadow:0 14px 28px rgba(0,0,0,.22)!important}
  .app-shell.view-captura #switchCameraBtn{grid-area:switch!important}
  .app-shell.view-captura #gpsBtn{grid-area:capture!important;background:rgba(11,59,117,.68)!important}
  .app-shell.view-captura #clearPhotoBtn{grid-area:menu!important}
  .app-shell.view-captura #startCameraBtn{display:none!important}
  .app-shell.view-captura #captureBtn{grid-area:shutter!important;min-height:78px!important;width:78px!important;max-width:78px!important;justify-self:center!important;border-radius:999px!important;border:8px solid rgba(255,255,255,.95)!important;background:radial-gradient(circle at 50% 42%,#ffd970 0,#f59e0b 45%,#d97706 100%)!important;box-shadow:0 18px 40px rgba(245,158,11,.32),0 0 0 6px rgba(255,255,255,.18)!important}
  .app-shell.view-captura #captureBtn span{display:none!important}
  .app-shell.view-captura #switchCameraBtn::before{content:'↺';font-size:22px;font-weight:900}
  .app-shell.view-captura #gpsBtn::before{content:'GPS';font-size:12px;font-weight:900;letter-spacing:.08em}
  .app-shell.view-captura #clearPhotoBtn::before{content:'🖼️';font-size:22px}
  .app-shell.view-captura #clearPhotoBtn{background:rgba(255,255,255,.15)!important}
  .app-shell.view-captura #clearPhotoBtn:disabled{opacity:1!important}
  .app-shell.view-captura .cameraStatus{position:absolute!important;left:12px!important;right:12px!important;bottom:calc(160px + env(safe-area-inset-bottom))!important;z-index:3!important;margin:0!important;border-radius:999px!important;background:rgba(5,10,22,.60)!important;color:#fff!important;padding:12px 16px!important;font-size:13px!important;backdrop-filter:blur(12px)!important;border:1px solid rgba(56,189,248,.18)!important;box-shadow:0 16px 34px rgba(2,8,23,.22)!important}
  .app-shell.view-captura.capture-landscape .live-stamp-preview{left:18px;right:auto;bottom:20px;max-width:min(58vw,560px)}
  .app-shell.view-captura.capture-landscape .zoom-bar{bottom:118px!important}
  .app-shell.view-captura.capture-landscape .cameraStatus{bottom:calc(114px + env(safe-area-inset-bottom))!important}
  .app-shell.view-captura.capture-landscape .actions.app-camera-controls{bottom:calc(18px + env(safe-area-inset-bottom))!important;grid-template-columns:72px 1fr 92px 72px!important}
  .app-shell.view-captura.capture-landscape .bottom-app-nav{bottom:10px!important;left:auto!important;right:12px!important;width:auto!important;padding:6px!important;gap:6px!important;background:rgba(255,255,255,.92)!important}
  .app-shell.view-captura.capture-landscape .bottom-app-nav a strong{display:none!important}
  .app-shell.view-captura.capture-landscape .bottom-app-nav a{min-width:42px!important;padding:8px!important}
  .app-shell .form-panel,.app-shell .records-panel{padding-top:calc(76px + env(safe-area-inset-top))!important}
}

/* ===== v23: mantener modo cámara en horizontal y zoom siempre visible ===== */
@media (max-width: 900px), (pointer: coarse) {
  .app-shell.view-captura .zoom-bar {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(178px + env(safe-area-inset-bottom)) !important;
    z-index: 7 !important;
    display: flex !important;
  }
  .app-shell.view-captura .zoom-bar button {
    min-width: 48px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    background: rgba(15,23,42,.62) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }
  .app-shell.view-captura .zoom-bar button.active {
    background: #f59e0b !important;
    color: #111827 !important;
    box-shadow: 0 10px 24px rgba(245,158,11,.32) !important;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  .app-shell.view-captura .topbar.app-topbar-modern {
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
  }
  .app-shell.view-captura .topbar h1 { font-size: 16px !important; }
  .app-shell.view-captura .header-actions { display: none !important; }
  .app-shell.view-captura .camera-panel,
  .app-shell.view-captura .camera-box {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: #000 !important;
  }
  .app-shell.view-captura .camera-box video,
  .app-shell.view-captura .camera-box img {
    width: 100vw !important;
    height: 100dvh !important;
    object-fit: cover !important;
  }
  .app-shell.view-captura .live-stamp-preview {
    left: 16px !important;
    right: auto !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    width: min(50vw, 520px) !important;
    max-width: 520px !important;
  }
  .app-shell.view-captura .zoom-bar {
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  }
  .app-shell.view-captura .cameraStatus {
    left: 16px !important;
    right: 140px !important;
    bottom: calc(142px + env(safe-area-inset-bottom)) !important;
  }
  .app-shell.view-captura .actions.app-camera-controls {
    left: auto !important;
    right: 16px !important;
    bottom: calc(22px + env(safe-area-inset-bottom)) !important;
    width: 112px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .app-shell.view-captura #captureBtn {
    width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    max-width: 76px !important;
    order: 1 !important;
  }
  .app-shell.view-captura #switchCameraBtn,
  .app-shell.view-captura #gpsBtn,
  .app-shell.view-captura #clearPhotoBtn {
    width: 54px !important;
    height: 46px !important;
    min-height: 46px !important;
    order: 2 !important;
  }
  .bottom-app-nav {
    right: 142px !important;
    left: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
  }
}


/* ===== v24: cámara limpia, zoom visible y controles por orientación ===== */
@media (max-width: 900px), (pointer: coarse) {
  .app-shell.view-captura .camera-box::after{
    display:none!important;
    content:none!important;
  }
  .app-shell.view-captura .camera-box::before{
    content:''!important;
    position:absolute!important;
    left:0!important;right:0!important;bottom:0!important;
    height:32%!important;
    z-index:1!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.48))!important;
  }
  .app-shell.view-captura .topbar.app-topbar-modern{
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px!important;
    min-height:auto!important;
  }
  .app-shell.view-captura .topbar .ghost{display:none!important;}
  .app-shell.view-captura .topbar h1{font-size:18px!important;white-space:nowrap!important;}
  .app-shell.view-captura .icon-btn{width:46px!important;height:46px!important;border-radius:16px!important;background:rgba(15,23,42,.62)!important;backdrop-filter:blur(14px)!important;}

  /* Zoom vertical: flotante al lado derecho, siempre visible */
  .app-shell.view-captura:not(.capture-landscape) .zoom-bar{
    position:absolute!important;
    right:12px!important;
    left:auto!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    flex-direction:column!important;
    gap:8px!important;
    z-index:12!important;
    margin:0!important;
    display:flex!important;
  }
  .app-shell.view-captura:not(.capture-landscape) .zoom-bar button{
    min-width:46px!important;
    width:46px!important;
    min-height:46px!important;
    height:46px!important;
    padding:0!important;
    border-radius:999px!important;
    font-size:13px!important;
    background:rgba(15,23,42,.64)!important;
    color:#fff!important;
    box-shadow:0 10px 22px rgba(0,0,0,.26)!important;
  }
  .app-shell.view-captura:not(.capture-landscape) .zoom-bar button.active{
    background:#f59e0b!important;color:#111827!important;
  }

  /* Vista previa de leyenda: compacta y sin banda al centro */
  .app-shell.view-captura:not(.capture-landscape) .live-stamp-preview{
    left:14px!important;
    right:78px!important;
    bottom:calc(194px + env(safe-area-inset-bottom))!important;
    padding:9px 11px!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,rgba(4,10,22,.20),rgba(4,10,22,.58))!important;
    border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
  }
  .app-shell.view-captura:not(.capture-landscape) .live-stamp-brand{font-size:10px!important;margin-bottom:3px!important;}
  .app-shell.view-captura:not(.capture-landscape) .live-stamp-main strong{font-size:34px!important;}
  .app-shell.view-captura:not(.capture-landscape) .live-stamp-main span{font-size:14px!important;}
  .app-shell.view-captura:not(.capture-landscape) .live-stamp-address,
  .app-shell.view-captura:not(.capture-landscape) .live-stamp-meta{font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}

  /* Controles vertical: obturador limpio, sin panel gigante */
  .app-shell.view-captura:not(.capture-landscape) .actions.app-camera-controls{
    left:0!important;right:0!important;
    bottom:calc(84px + env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:64px 1fr 86px 64px!important;
    grid-template-areas:'switch shutter capture menu'!important;
    padding:0 18px!important;
    gap:10px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .app-shell.view-captura:not(.capture-landscape) .cameraStatus{
    left:14px!important;right:14px!important;
    bottom:calc(160px + env(safe-area-inset-bottom))!important;
    padding:10px 14px!important;
    font-size:12px!important;
    z-index:10!important;
  }

  /* En cámara, la navegación queda mínima para no tapar */
  .app-shell.view-captura .bottom-app-nav{
    padding:6px!important;
    border-radius:22px!important;
    box-shadow:0 10px 24px rgba(2,8,23,.18)!important;
  }
}

/* Landscape real: controles a la derecha y obturador siempre visible */
@media (orientation: landscape) and (pointer: coarse), (max-height: 520px) and (pointer: coarse) {
  .app-shell.view-captura .topbar.app-topbar-modern{
    width:auto!important;right:auto!important;bottom:auto!important;
    background:linear-gradient(90deg,rgba(3,10,25,.78),rgba(3,10,25,0))!important;
    padding:calc(8px + env(safe-area-inset-top)) 10px 8px!important;
  }
  .app-shell.view-captura .topbar h1{font-size:15px!important;}
  .app-shell.view-captura .live-stamp-preview{
    left:16px!important;right:auto!important;
    bottom:calc(16px + env(safe-area-inset-bottom))!important;
    width:min(52vw,520px)!important;
    max-width:520px!important;
    padding:12px 14px!important;
    background:linear-gradient(180deg,rgba(4,10,22,.18),rgba(4,10,22,.66))!important;
    border-radius:18px!important;
  }
  .app-shell.view-captura .live-stamp-main strong{font-size:42px!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:18px!important;}
  .app-shell.view-captura .live-stamp-address,
  .app-shell.view-captura .live-stamp-meta{font-size:13px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}

  .app-shell.view-captura .actions.app-camera-controls{
    position:absolute!important;
    right:14px!important;left:auto!important;
    top:50%!important;bottom:auto!important;
    transform:translateY(-50%)!important;
    width:86px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:54px 92px 54px 54px!important;
    grid-template-areas:'switch' 'shutter' 'capture' 'menu'!important;
    gap:10px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    z-index:14!important;
  }
  .app-shell.view-captura #captureBtn{
    width:82px!important;height:82px!important;min-height:82px!important;max-width:82px!important;
    justify-self:center!important;align-self:center!important;
    display:block!important;opacity:1!important;visibility:visible!important;
  }
  .app-shell.view-captura #switchCameraBtn,
  .app-shell.view-captura #gpsBtn,
  .app-shell.view-captura #clearPhotoBtn{
    width:58px!important;height:50px!important;min-height:50px!important;justify-self:center!important;
  }
  .app-shell.view-captura .zoom-bar{
    position:absolute!important;
    right:112px!important;
    top:50%!important;
    bottom:auto!important;left:auto!important;
    transform:translateY(-50%)!important;
    flex-direction:column!important;
    gap:8px!important;
    z-index:13!important;
    display:flex!important;
  }
  .app-shell.view-captura .zoom-bar button{
    width:50px!important;height:44px!important;min-width:50px!important;min-height:44px!important;
    padding:0!important;border-radius:999px!important;font-size:13px!important;
  }
  .app-shell.view-captura .cameraStatus{
    left:16px!important;right:auto!important;
    width:min(52vw,520px)!important;
    bottom:calc(122px + env(safe-area-inset-bottom))!important;
    z-index:11!important;
    font-size:12px!important;
    padding:9px 12px!important;
  }
  .app-shell.view-captura .bottom-app-nav{
    display:none!important;
  }
  .app-shell.view-captura .camera-box::before{height:38%!important;}
}


/* v25: la barra de selección jamás debe bloquear la cámara */
@media (max-width: 700px) {
  .app-shell.view-captura .bulk-action-bar { display: none !important; visibility: hidden !important; pointer-events: none !important; }
}
.bulk-action-bar { padding-right: 54px; }
.bulk-close { position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1; font-weight:900; }
.bulk-close:active { transform: scale(.96); }
@media (max-width: 700px) { .bulk-action-bar { padding-top: 18px; } }


/* ===== v26: cámara limpia + galería por rangos + exportación compartir ===== */
.range-panel{margin:14px 0 10px;padding:12px;border:1px solid #dbe7f5;border-radius:18px;background:linear-gradient(180deg,#ffffff,#f8fbff)}
.range-panel strong{display:block;margin-bottom:10px;color:#0f172a;font-size:14px}
.range-chips{display:flex;gap:8px;flex-wrap:wrap}
.range-chips button{border:1px solid #dbe7f5;background:#fff;color:#0b3b75;border-radius:999px;padding:10px 12px;font-weight:900;font-size:12px;box-shadow:0 8px 18px rgba(15,23,42,.05)}
.range-chips button.active{background:#0b5eb3;color:#fff;border-color:#0b5eb3;box-shadow:0 10px 22px rgba(11,94,179,.22)}
.range-panel small{display:block;margin-top:10px;color:#64748b;font-weight:800}
.export-sheet-grid-v26 .share-tile small{display:block;margin-top:4px;font-size:11px;color:#64748b;font-weight:800}.export-sheet-grid-v26 .share-tile.whatsapp small,.export-sheet-grid-v26 .share-tile.excel small{color:rgba(15,23,42,.75)}
@media(max-width:700px){
  .app-shell.view-captura .camera-box::before{display:none!important;content:none!important;background:none!important;height:0!important}
  .app-shell.view-captura .camera-box::after{height:24%!important;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.24) 58%,rgba(0,0,0,.50))!important}
  .app-shell.view-captura .live-stamp-preview{left:14px!important;right:14px!important;bottom:calc(154px + env(safe-area-inset-bottom))!important;max-width:none!important;padding:10px 12px!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(10,18,32,.20),rgba(10,18,32,.54))!important;box-shadow:0 12px 24px rgba(0,0,0,.18)!important}
  .app-shell.view-captura .live-stamp-brand{font-size:9px!important;margin-bottom:2px!important;letter-spacing:.09em!important}
  .app-shell.view-captura .live-stamp-main strong{font-size:30px!important;line-height:.95!important}
  .app-shell.view-captura .live-stamp-main span{font-size:12px!important;line-height:1.1!important}
  .app-shell.view-captura .live-stamp-address,.app-shell.view-captura .live-stamp-meta{font-size:10px!important;line-height:1.16!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .app-shell.view-captura .zoom-bar{right:12px!important;left:auto!important;bottom:calc(320px + env(safe-area-inset-bottom))!important;transform:none!important;flex-direction:column!important;gap:9px!important;z-index:8!important}
  .app-shell.view-captura .zoom-bar button{width:54px!important;height:54px!important;min-width:54px!important;border-radius:999px!important;padding:0!important;background:rgba(15,23,42,.66)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 10px 20px rgba(0,0,0,.18)!important}
  .app-shell.view-captura .zoom-bar button.active{background:#f59e0b!important;color:#111827!important;border-color:#fbbf24!important}
  .app-shell.view-captura .cameraStatus{left:14px!important;right:14px!important;bottom:calc(114px + env(safe-area-inset-bottom))!important;z-index:9!important;font-size:12px!important;padding:10px 12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .app-shell.view-captura .actions.app-camera-controls{left:0!important;right:0!important;bottom:calc(42px + env(safe-area-inset-bottom))!important;z-index:10!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:18px!important;background:transparent!important;box-shadow:none!important;padding:0!important}
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn){width:52px!important;height:52px!important;min-height:52px!important;border-radius:999px!important;font-size:0!important;background:rgba(15,23,42,.54)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:0 12px 22px rgba(0,0,0,.22)!important;backdrop-filter:blur(12px)!important}
  .app-shell.view-captura #captureBtn.shutter-btn{width:76px!important;height:76px!important;min-height:76px!important;max-width:76px!important;border-radius:999px!important;border:8px solid rgba(255,255,255,.96)!important;outline:5px solid rgba(245,158,11,.35)!important;box-shadow:0 16px 34px rgba(245,158,11,.28)!important}
  .app-shell.view-captura #switchCameraBtn::before{content:'↺'!important;font-size:24px!important}
  .app-shell.view-captura #gpsBtn::before{content:'📍'!important;font-size:22px!important}
  .app-shell.view-captura #clearPhotoBtn::before{content:'🖼️'!important;font-size:22px!important}
  .app-shell.view-captura #startCameraBtn{display:none!important}
  .app-shell.view-captura .bottom-app-nav{display:none!important}
  .app-shell.view-captura .bulk-action-bar{display:none!important}
  .app-shell.view-captura.capture-landscape .live-stamp-preview{left:16px!important;right:auto!important;bottom:16px!important;width:min(48vw,520px)!important;max-width:min(48vw,520px)!important}
  .app-shell.view-captura.capture-landscape .live-stamp-main strong{font-size:34px!important}.app-shell.view-captura.capture-landscape .live-stamp-main span{font-size:13px!important}
  .app-shell.view-captura.capture-landscape .zoom-bar{right:calc(100px + env(safe-area-inset-right))!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;flex-direction:column!important}
  .app-shell.view-captura.capture-landscape .actions.app-camera-controls{top:50%!important;right:calc(10px + env(safe-area-inset-right))!important;left:auto!important;bottom:auto!important;transform:translateY(-50%)!important;flex-direction:column!important;width:80px!important;gap:16px!important}
  .app-shell.view-captura.capture-landscape #captureBtn.shutter-btn{width:72px!important;height:72px!important;min-height:72px!important}.app-shell.view-captura.capture-landscape .cameraStatus{display:none!important}.app-shell.view-captura.capture-landscape .camera-box::after{height:36%!important}.app-shell.view-captura.capture-landscape .topbar.app-topbar-modern{padding:calc(6px + env(safe-area-inset-top)) 10px 6px!important;background:linear-gradient(180deg,rgba(2,8,23,.72),rgba(2,8,23,0))!important}.app-shell.view-captura.capture-landscape .topbar h1{font-size:14px!important}
  .app-shell.view-informar .share-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}.app-shell.view-informar .range-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}.app-shell.view-informar .toolbar-v6{display:none!important}.app-shell.view-informar .selection-bar{gap:8px!important}
}


/* ===== v28 FINAL: cámara primero, iconos y sin superposición ===== */
@media (max-width: 920px), (orientation: landscape) {
  .app-shell.view-captura .camera-box::before{display:none!important;content:none!important;background:none!important;}
  .app-shell.view-captura .camera-box::after{
    height:26%!important;
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.22) 55%,rgba(0,0,0,.55))!important;
    pointer-events:none!important;
  }
  .app-shell.view-captura .topbar.app-topbar-modern{
    position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:30!important;
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px!important;
    background:linear-gradient(180deg,rgba(2,8,23,.78),rgba(2,8,23,.34) 72%,rgba(2,8,23,0))!important;
    border:0!important;box-shadow:none!important;
  }
  .app-shell.view-captura .topbar h1{font-size:17px!important;white-space:nowrap!important;color:#fff!important;}
  .app-shell.view-captura .topbar .eyebrow,.app-shell.view-captura .topbar .subtitle,.app-shell.view-captura .header-actions{display:none!important;}
  .app-shell.view-captura .icon-btn{width:48px!important;height:48px!important;border-radius:18px!important;background:rgba(15,23,42,.62)!important;backdrop-filter:blur(14px)!important;}

  /* La leyenda visible en cámara queda arriba de los controles, nunca encima del obturador */
  .app-shell.view-captura .live-stamp-preview{
    left:16px!important;right:16px!important;bottom:calc(142px + env(safe-area-inset-bottom))!important;
    z-index:6!important;max-width:none!important;padding:10px 12px!important;border-radius:18px!important;
    background:linear-gradient(135deg,rgba(7,14,27,.70),rgba(8,35,76,.42))!important;
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.24)!important;
    backdrop-filter:blur(12px)!important;
  }
  .app-shell.view-captura .live-stamp-brand{font-size:9px!important;margin-bottom:2px!important;letter-spacing:.09em!important;color:#fbbf24!important;}
  .app-shell.view-captura .live-stamp-main{gap:8px!important;align-items:flex-end!important;}
  .app-shell.view-captura .live-stamp-main strong{font-size:32px!important;line-height:.95!important;font-weight:300!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:13px!important;line-height:1.05!important;font-weight:850!important;}
  .app-shell.view-captura .live-stamp-address,.app-shell.view-captura .live-stamp-meta{
    font-size:10.5px!important;line-height:1.16!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }

  /* Estado arriba, fuera de la marca y fuera del botón */
  .app-shell.view-captura .cameraStatus{
    position:fixed!important;left:14px!important;right:14px!important;top:calc(66px + env(safe-area-inset-top))!important;bottom:auto!important;
    z-index:7!important;padding:9px 12px!important;border-radius:999px!important;
    background:rgba(5,12,24,.54)!important;border:1px solid rgba(56,189,248,.18)!important;color:#fff!important;
    font-size:11px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    backdrop-filter:blur(12px)!important;box-shadow:0 10px 24px rgba(0,0,0,.20)!important;
  }

  /* Zoom siempre visible, lado derecho, sin tapar centro */
  .app-shell.view-captura .zoom-bar{
    position:fixed!important;right:12px!important;left:auto!important;top:43%!important;bottom:auto!important;transform:translateY(-50%)!important;
    z-index:12!important;display:flex!important;flex-direction:column!important;gap:10px!important;margin:0!important;
  }
  .app-shell.view-captura .zoom-bar button{
    width:54px!important;height:54px!important;min-width:54px!important;padding:0!important;border-radius:999px!important;
    font-size:14px!important;font-weight:900!important;background:rgba(15,23,42,.70)!important;color:#fff!important;
    border:1px solid rgba(255,255,255,.20)!important;box-shadow:0 10px 22px rgba(0,0,0,.22)!important;backdrop-filter:blur(12px)!important;
  }
  .app-shell.view-captura .zoom-bar button.active{background:#f59e0b!important;color:#111827!important;border-color:#fbbf24!important;}

  /* Controles inferiores solo iconos */
  .app-shell.view-captura .actions.app-camera-controls{
    position:fixed!important;left:0!important;right:0!important;bottom:calc(24px + env(safe-area-inset-bottom))!important;top:auto!important;transform:none!important;
    z-index:11!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:34px!important;
    width:auto!important;padding:0 16px!important;background:transparent!important;box-shadow:none!important;border:0!important;
  }
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn){
    width:58px!important;height:58px!important;min-height:58px!important;border-radius:999px!important;font-size:0!important;padding:0!important;
    background:rgba(15,23,42,.60)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;
    box-shadow:0 12px 24px rgba(0,0,0,.24)!important;backdrop-filter:blur(12px)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  }
  .app-shell.view-captura #captureBtn.shutter-btn{
    width:82px!important;height:82px!important;min-height:82px!important;max-width:82px!important;border-radius:999px!important;
    border:8px solid rgba(255,255,255,.96)!important;outline:6px solid rgba(245,158,11,.34)!important;
    background:radial-gradient(circle at 40% 35%,#ffe19a 0,#f59e0b 56%,#d97706 100%)!important;
    box-shadow:0 18px 42px rgba(245,158,11,.32),0 10px 28px rgba(0,0,0,.32)!important;
  }
  .app-shell.view-captura #captureBtn.shutter-btn span{display:none!important;}
  .app-shell.view-captura #startCameraBtn::before{content:'⏻'!important;font-size:24px!important;}
  .app-shell.view-captura #switchCameraBtn::before{content:'🔄'!important;font-size:22px!important;}
  .app-shell.view-captura #gpsBtn::before{content:'📍'!important;font-size:22px!important;}
  .app-shell.view-captura #clearPhotoBtn::before{content:'🖼️'!important;font-size:22px!important;}
  .app-shell.view-captura .bottom-app-nav{display:none!important;}
  .app-shell.view-captura .bulk-action-bar{display:none!important;visibility:hidden!important;pointer-events:none!important;}
}

@media (max-width: 920px) and (orientation: landscape) {
  .app-shell.view-captura .topbar.app-topbar-modern{padding:calc(5px + env(safe-area-inset-top)) 10px 5px!important;background:linear-gradient(180deg,rgba(2,8,23,.55),rgba(2,8,23,0))!important;}
  .app-shell.view-captura .topbar h1{font-size:13px!important;}
  .app-shell.view-captura .icon-btn{width:40px!important;height:40px!important;border-radius:14px!important;}
  .app-shell.view-captura .cameraStatus{display:none!important;}
  .app-shell.view-captura .live-stamp-preview{
    left:18px!important;right:auto!important;bottom:18px!important;width:min(52vw,560px)!important;max-width:min(52vw,560px)!important;
    padding:12px 14px!important;border-radius:20px!important;
  }
  .app-shell.view-captura .live-stamp-main strong{font-size:38px!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:15px!important;}
  .app-shell.view-captura .live-stamp-address,.app-shell.view-captura .live-stamp-meta{font-size:12px!important;}
  .app-shell.view-captura .zoom-bar{right:calc(86px + env(safe-area-inset-right))!important;top:50%!important;gap:8px!important;}
  .app-shell.view-captura .zoom-bar button{width:48px!important;height:48px!important;min-width:48px!important;font-size:13px!important;}
  .app-shell.view-captura .actions.app-camera-controls{
    left:auto!important;right:calc(8px + env(safe-area-inset-right))!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;
    width:68px!important;flex-direction:column!important;gap:10px!important;padding:0!important;
  }
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn){width:52px!important;height:52px!important;min-height:52px!important;}
  .app-shell.view-captura #captureBtn.shutter-btn{width:66px!important;height:66px!important;min-height:66px!important;border-width:7px!important;outline-width:4px!important;}
}

@media (max-width: 380px) and (orientation: portrait) {
  .app-shell.view-captura .live-stamp-preview{bottom:calc(134px + env(safe-area-inset-bottom))!important;}
  .app-shell.view-captura .live-stamp-main strong{font-size:28px!important;}
  .app-shell.view-captura .zoom-bar button{width:48px!important;height:48px!important;min-width:48px!important;font-size:12px!important;}
  .app-shell.view-captura .actions.app-camera-controls{gap:24px!important;bottom:calc(22px + env(safe-area-inset-bottom))!important;}
  .app-shell.view-captura #captureBtn.shutter-btn{width:74px!important;height:74px!important;min-height:74px!important;}
}


/* ===== v29 estabilizado: cámara limpia, sin superposición y sin PWA conflictiva ===== */
.app-shell .topbar .ghost#installBtn{background:#fff!important;color:#0b3b75!important;}
@media (max-width: 900px){
  .app-shell.view-captura .cameraStatus{display:none!important;}
  .app-shell.view-captura .live-stamp-preview{
    left:14px!important;
    right:106px!important;
    bottom:calc(148px + env(safe-area-inset-bottom))!important;
    max-width:none!important;
    padding:10px 12px!important;
    border-radius:18px!important;
    z-index:7!important;
  }
  .app-shell.view-captura .live-stamp-brand{font-size:10px!important;margin-bottom:4px!important;letter-spacing:.07em!important;}
  .app-shell.view-captura .live-stamp-main strong{font-size:38px!important;line-height:.9!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:14px!important;}
  .app-shell.view-captura .live-stamp-address,
  .app-shell.view-captura .live-stamp-meta{font-size:11px!important;line-height:1.18!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .app-shell.view-captura .actions.app-camera-controls{
    left:0!important;right:0!important;
    bottom:calc(26px + env(safe-area-inset-bottom))!important;
    z-index:10!important;
    display:grid!important;
    grid-template-columns:56px 1fr 88px 1fr 56px!important;
    grid-template-areas:'start . shutter . gallery'!important;
    align-items:center!important;justify-items:center!important;
    gap:10px!important;padding:0 18px!important;background:transparent!important;box-shadow:none!important;
  }
  .app-shell.view-captura #startCameraBtn{grid-area:start!important;}
  .app-shell.view-captura #captureBtn{grid-area:shutter!important;}
  .app-shell.view-captura #clearPhotoBtn{grid-area:gallery!important;}
  .app-shell.view-captura #switchCameraBtn{position:absolute!important;right:88px!important;bottom:0!important;}
  .app-shell.view-captura #gpsBtn{position:absolute!important;left:88px!important;bottom:0!important;}
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn){
    width:56px!important;height:56px!important;min-height:56px!important;border-radius:999px!important;
    font-size:22px!important;line-height:1!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    background:rgba(12,22,42,.72)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:0 14px 26px rgba(0,0,0,.25)!important;backdrop-filter:blur(12px)!important;
  }
  .app-shell.view-captura #captureBtn.shutter-btn{
    width:86px!important;height:86px!important;min-height:86px!important;border-radius:999px!important;
    border:8px solid rgba(255,255,255,.92)!important;
    background:radial-gradient(circle at 50% 42%,#ffd76a 0,#f59e0b 52%,#c56c00 100%)!important;
    box-shadow:0 18px 42px rgba(245,158,11,.30),0 0 0 6px rgba(255,255,255,.15)!important;
  }
  .app-shell.view-captura #captureBtn.shutter-btn span{display:none!important;}
  .app-shell.view-captura .zoom-bar{
    right:12px!important;left:auto!important;top:42%!important;bottom:auto!important;transform:translateY(-50%)!important;
    flex-direction:column!important;gap:10px!important;z-index:9!important;
  }
  .app-shell.view-captura .zoom-bar button{width:52px!important;height:52px!important;min-width:52px!important;border-radius:999px!important;padding:0!important;font-size:13px!important;}
  .app-shell.view-captura.capture-landscape .topbar.app-topbar-modern{height:52px!important;padding:6px 10px!important;background:linear-gradient(180deg,rgba(2,8,23,.72),rgba(2,8,23,0))!important;}
  .app-shell.view-captura.capture-landscape .topbar h1{font-size:13px!important;}
  .app-shell.view-captura.capture-landscape .topbar .menu-icon{width:38px!important;height:38px!important;border-radius:13px!important;}
  .app-shell.view-captura.capture-landscape .live-stamp-preview{left:16px!important;right:auto!important;bottom:14px!important;width:min(46vw,520px)!important;max-width:min(46vw,520px)!important;padding:10px 12px!important;}
  .app-shell.view-captura.capture-landscape .zoom-bar{right:calc(92px + env(safe-area-inset-right))!important;top:50%!important;gap:8px!important;}
  .app-shell.view-captura.capture-landscape .zoom-bar button{width:46px!important;height:46px!important;min-width:46px!important;font-size:12px!important;}
  .app-shell.view-captura.capture-landscape .actions.app-camera-controls{
    top:50%!important;right:calc(10px + env(safe-area-inset-right))!important;left:auto!important;bottom:auto!important;
    transform:translateY(-50%)!important;width:66px!important;display:flex!important;flex-direction:column!important;gap:10px!important;padding:0!important;
  }
  .app-shell.view-captura.capture-landscape .actions.app-camera-controls button:not(.shutter-btn){width:50px!important;height:50px!important;min-height:50px!important;font-size:20px!important;position:static!important;}
  .app-shell.view-captura.capture-landscape #captureBtn.shutter-btn{width:66px!important;height:66px!important;min-height:66px!important;border-width:7px!important;}
  .app-shell.view-captura.capture-landscape .bottom-app-nav{display:none!important;}
}


/* ===== v30 PRO: layout cámara real sin sobreposición ===== */
/* Nota: estos overrides van al final para corregir el problema real visto en celular:
   #cameraStatus estaba como id, no como clase .cameraStatus, por eso seguía apareciendo. */
:root{
  --ecp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ecp-safe-right: env(safe-area-inset-right, 0px);
  --ecp-safe-left: env(safe-area-inset-left, 0px);
  --ecp-safe-top: env(safe-area-inset-top, 0px);
}

@media (max-width: 920px), (orientation: landscape){
  body:has(.app-shell.view-captura){overflow:hidden!important;background:#000!important;}
  .app-shell.view-captura{background:#000!important;min-height:100dvh!important;overflow:hidden!important;}
  .app-shell.view-captura .main-grid,
  .app-shell.view-captura .camera-panel,
  .app-shell.view-captura .camera-card,
  .app-shell.view-captura .camera-box{
    position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#000!important;box-shadow:none!important;
  }
  .app-shell.view-captura .camera-panel > h2,
  .app-shell.view-captura .camera-panel > p,
  .app-shell.view-captura .camera-panel .template-strip,
  .app-shell.view-captura .camera-panel .camera-fields,
  .app-shell.view-captura .info-panel,
  .app-shell.view-captura .ready-panel,
  .app-shell.view-captura .section-title,
  .app-shell.view-captura .form-grid,
  .app-shell.view-captura #mapLink,
  .app-shell.view-captura .duplicate-panel{
    display:none!important;
  }
  .app-shell.view-captura video,
  .app-shell.view-captura canvas,
  .app-shell.view-captura #video,
  .app-shell.view-captura #canvas{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important;background:#000!important;
  }
  .app-shell.view-captura .topbar.app-topbar-modern{
    position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:40!important;height:auto!important;min-height:68px!important;
    padding:calc(8px + var(--ecp-safe-top)) 18px 18px!important;display:flex!important;align-items:center!important;gap:12px!important;
    background:linear-gradient(180deg,rgba(2,8,23,.82),rgba(2,8,23,.42) 72%,rgba(2,8,23,0))!important;
    border:0!important;box-shadow:none!important;color:#fff!important;backdrop-filter:none!important;
  }
  .app-shell.view-captura .topbar h1{font-size:18px!important;color:#fff!important;margin:0!important;line-height:1.1!important;max-width:70vw!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .app-shell.view-captura .topbar .eyebrow,
  .app-shell.view-captura .topbar .subtitle,
  .app-shell.view-captura .header-actions{display:none!important;}
  .app-shell.view-captura .topbar .icon-btn,
  .app-shell.view-captura .topbar .menu-icon{width:48px!important;height:48px!important;min-width:48px!important;border-radius:18px!important;background:rgba(15,23,42,.70)!important;color:#fff!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 10px 22px rgba(0,0,0,.24)!important;}

  /* Estado fuera de la vista para que nunca pise marca ni obturador */
  .app-shell.view-captura #cameraStatus,
  .app-shell.view-captura .status-line#cameraStatus,
  .app-shell.view-captura .cameraStatus{
    display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;
  }

  /* Marca compacta: arriba del obturador, no encima */
  .app-shell.view-captura .live-stamp-preview{
    position:fixed!important;left:18px!important;right:18px!important;bottom:calc(142px + var(--ecp-safe-bottom))!important;z-index:18!important;
    width:auto!important;max-width:none!important;min-height:0!important;padding:10px 12px!important;border-radius:18px!important;
    background:linear-gradient(135deg,rgba(3,8,18,.76),rgba(8,20,42,.50))!important;backdrop-filter:blur(10px)!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:0 14px 28px rgba(0,0,0,.26)!important;
  }
  .app-shell.view-captura .live-stamp-brand{font-size:10px!important;line-height:1!important;margin:0 0 5px!important;letter-spacing:.08em!important;color:#fbbf24!important;}
  .app-shell.view-captura .live-stamp-main{display:flex!important;align-items:flex-end!important;gap:10px!important;margin:0!important;min-width:0!important;}
  .app-shell.view-captura .live-stamp-main strong{font-size:36px!important;line-height:.86!important;font-weight:400!important;letter-spacing:-.04em!important;white-space:nowrap!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:14px!important;line-height:1.1!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .app-shell.view-captura .live-stamp-address,
  .app-shell.view-captura .live-stamp-meta{display:block!important;font-size:11px!important;line-height:1.18!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin-top:4px!important;}

  /* Zoom lateral ordenado */
  .app-shell.view-captura .zoom-bar{
    position:fixed!important;right:14px!important;left:auto!important;top:47%!important;bottom:auto!important;transform:translateY(-50%)!important;z-index:24!important;
    display:flex!important;flex-direction:column!important;gap:11px!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important;
  }
  .app-shell.view-captura .zoom-bar button{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;border-radius:999px!important;padding:0!important;font-size:13px!important;font-weight:1000!important;background:rgba(15,23,42,.70)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 12px 22px rgba(0,0,0,.23)!important;backdrop-filter:blur(12px)!important;}
  .app-shell.view-captura .zoom-bar button.active{background:#f59e0b!important;color:#111827!important;border-color:#fbbf24!important;}

  /* Controles inferiores: solo iconos, obturador separado */
  .app-shell.view-captura .actions.app-camera-controls{
    position:fixed!important;left:0!important;right:0!important;bottom:calc(20px + var(--ecp-safe-bottom))!important;top:auto!important;transform:none!important;z-index:30!important;
    width:auto!important;display:grid!important;grid-template-columns:64px minmax(18px,1fr) 92px minmax(18px,1fr) 64px!important;grid-template-areas:'power gap1 shutter gap2 gallery'!important;align-items:center!important;justify-items:center!important;gap:0!important;padding:0 24px!important;background:transparent!important;border:0!important;box-shadow:none!important;
  }
  .app-shell.view-captura #startCameraBtn{grid-area:power!important;position:static!important;}
  .app-shell.view-captura #captureBtn{grid-area:shutter!important;position:static!important;}
  .app-shell.view-captura #clearPhotoBtn{grid-area:gallery!important;position:static!important;}
  .app-shell.view-captura #gpsBtn{display:none!important;}
  .app-shell.view-captura #switchCameraBtn{position:fixed!important;right:18px!important;bottom:calc(92px + var(--ecp-safe-bottom))!important;z-index:31!important;}
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn),
  .app-shell.view-captura #switchCameraBtn{
    width:58px!important;height:58px!important;min-height:58px!important;border-radius:999px!important;font-size:0!important;line-height:1!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
    background:rgba(15,23,42,.72)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 14px 26px rgba(0,0,0,.26)!important;backdrop-filter:blur(12px)!important;
  }
  .app-shell.view-captura #startCameraBtn::before{content:'⏻'!important;font-size:25px!important;}
  .app-shell.view-captura #switchCameraBtn::before{content:'↺'!important;font-size:27px!important;}
  .app-shell.view-captura #clearPhotoBtn::before{content:'🖼'!important;font-size:23px!important;}
  .app-shell.view-captura #captureBtn.shutter-btn{
    width:86px!important;height:86px!important;min-height:86px!important;max-width:86px!important;border-radius:999px!important;font-size:0!important;padding:0!important;
    border:8px solid rgba(255,255,255,.96)!important;outline:6px solid rgba(245,158,11,.34)!important;background:radial-gradient(circle at 40% 36%,#ffe8ad 0,#f59e0b 55%,#d97706 100%)!important;box-shadow:0 18px 44px rgba(245,158,11,.33),0 10px 28px rgba(0,0,0,.34)!important;
  }
  .app-shell.view-captura #captureBtn.shutter-btn span{display:none!important;}
  .app-shell.view-captura .bottom-app-nav,
  .app-shell.view-captura .bulk-action-bar{display:none!important;visibility:hidden!important;pointer-events:none!important;}
}

@media (max-width: 920px) and (orientation: portrait){
  .app-shell.view-captura .live-stamp-preview{right:86px!important;bottom:calc(142px + var(--ecp-safe-bottom))!important;}
  .app-shell.view-captura .camera-box::after{content:''!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:32%!important;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.30) 48%,rgba(0,0,0,.64))!important;pointer-events:none!important;z-index:5!important;}
}

@media (max-width: 390px) and (orientation: portrait){
  .app-shell.view-captura .live-stamp-preview{left:14px!important;right:82px!important;bottom:calc(136px + var(--ecp-safe-bottom))!important;padding:9px 10px!important;}
  .app-shell.view-captura .live-stamp-main strong{font-size:31px!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:12px!important;}
  .app-shell.view-captura .live-stamp-address,.app-shell.view-captura .live-stamp-meta{font-size:10px!important;}
  .app-shell.view-captura .zoom-bar button{width:49px!important;height:49px!important;min-width:49px!important;}
  .app-shell.view-captura #captureBtn.shutter-btn{width:78px!important;height:78px!important;min-height:78px!important;}
}

@media (max-width: 920px) and (orientation: landscape){
  .app-shell.view-captura .topbar.app-topbar-modern{min-height:48px!important;padding:calc(5px + var(--ecp-safe-top)) 10px 6px!important;background:linear-gradient(180deg,rgba(2,8,23,.60),rgba(2,8,23,.12) 76%,rgba(2,8,23,0))!important;}
  .app-shell.view-captura .topbar h1{font-size:13px!important;max-width:42vw!important;}
  .app-shell.view-captura .topbar .icon-btn,.app-shell.view-captura .topbar .menu-icon{width:38px!important;height:38px!important;min-width:38px!important;border-radius:14px!important;}
  .app-shell.view-captura .live-stamp-preview{left:18px!important;right:auto!important;bottom:18px!important;width:min(44vw,500px)!important;max-width:min(44vw,500px)!important;padding:10px 12px!important;border-radius:18px!important;}
  .app-shell.view-captura .live-stamp-brand{font-size:9px!important;margin-bottom:4px!important;}
  .app-shell.view-captura .live-stamp-main strong{font-size:34px!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:13px!important;}
  .app-shell.view-captura .live-stamp-address,.app-shell.view-captura .live-stamp-meta{font-size:11px!important;}
  .app-shell.view-captura .zoom-bar{right:calc(106px + var(--ecp-safe-right))!important;top:50%!important;gap:8px!important;}
  .app-shell.view-captura .zoom-bar button{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;font-size:12px!important;}
  .app-shell.view-captura .actions.app-camera-controls{
    left:auto!important;right:calc(20px + var(--ecp-safe-right))!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;width:70px!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:12px!important;
  }
  .app-shell.view-captura #switchCameraBtn{position:static!important;}
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn),
  .app-shell.view-captura #switchCameraBtn{width:50px!important;height:50px!important;min-height:50px!important;}
  .app-shell.view-captura #captureBtn.shutter-btn{width:70px!important;height:70px!important;min-height:70px!important;border-width:7px!important;outline-width:4px!important;}
  .app-shell.view-captura #startCameraBtn{display:none!important;}
  .app-shell.view-captura #gpsBtn{display:none!important;}
  .app-shell.view-captura .camera-box::after{height:30%!important;}
}

/* Panel de evidencias: mantener acciones debajo de filtros, no encima de cámara */
@media (max-width: 700px){
  .app-shell.view-informar .bulk-action-bar{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin:10px 0 14px!important;border-radius:18px!important;}
}


/* ===== v31 CORRECCION FUERTE: cámara de campo limpia =====
   Objetivo: evitar cualquier sobreposición entre marca, estado y obturador.
   - Estado se vuelve chip superior pequeño o se oculta en cámara.
   - Marca vertical sube sobre controles.
   - Controles horizontales solo iconos y separados del borde Android.
*/
:root{
  --v31-bottom-safe: max(env(safe-area-inset-bottom, 0px), 10px);
  --v31-right-safe: max(env(safe-area-inset-right, 0px), 8px);
  --v31-left-safe: max(env(safe-area-inset-left, 0px), 8px);
  --v31-top-safe: max(env(safe-area-inset-top, 0px), 0px);
}

@media (max-width: 940px), (orientation: landscape){
  html, body{overscroll-behavior:none!important;}
  body:has(.app-shell.view-captura){background:#000!important;overflow:hidden!important;}
  .app-shell.view-captura{height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;overflow:hidden!important;background:#000!important;}

  /* Header flotante compacto */
  .app-shell.view-captura .topbar.app-topbar-modern{
    position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:60!important;
    min-height:64px!important;padding:calc(8px + var(--v31-top-safe)) 14px 8px!important;
    background:linear-gradient(180deg,rgba(2,8,23,.76),rgba(2,8,23,.34) 70%,rgba(2,8,23,0))!important;
    backdrop-filter:blur(4px)!important;
  }
  .app-shell.view-captura .topbar h1{font-size:17px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .app-shell.view-captura .topbar .topbar-subtitle,.app-shell.view-captura .topbar .topbar-actions{display:none!important;}
  .app-shell.view-captura .topbar .menu-icon,.app-shell.view-captura .topbar .icon-btn{width:48px!important;height:48px!important;border-radius:18px!important;background:rgba(15,23,42,.72)!important;color:#fff!important;}

  /* Cámara full-screen real */
  .app-shell.view-captura .status-grid,
  .app-shell.view-captura .camera-panel>.section-title,
  .app-shell.view-captura .template-strip,
  .app-shell.view-captura .gps-card,
  .app-shell.view-captura .form-panel,
  .app-shell.view-captura .share-report-card,
  .app-shell.view-captura .selection-panel,
  .app-shell.view-captura .gallery-grid,
  .app-shell.view-captura .bottom-app-nav,
  .app-shell.view-captura .bulk-action-bar{display:none!important;}

  .app-shell.view-captura .main-grid,
  .app-shell.view-captura .panel,
  .app-shell.view-captura .camera-panel{
    display:block!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#000!important;max-width:none!important;width:100%!important;height:100dvh!important;overflow:hidden!important;
  }

  .app-shell.view-captura #cameraBox.camera-box{
    position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:1!important;border-radius:0!important;border:0!important;background:#000!important;overflow:hidden!important;
  }
  .app-shell.view-captura #video,
  .app-shell.view-captura #preview,
  .app-shell.view-captura #canvas{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important;
  }
  .app-shell.view-captura .empty-camera{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;background:#030712!important;z-index:2!important;}
  .app-shell.view-captura .camera-box.is-active .empty-camera,
  .app-shell.view-captura .camera-box.is-captured .empty-camera{display:none!important;}
  .app-shell.view-captura .camera-box::after{content:''!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:34%!important;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.36) 45%,rgba(0,0,0,.78))!important;pointer-events:none!important;z-index:5!important;}

  /* Status: nunca más como barra encima del disparador */
  .app-shell.view-captura #cameraStatus,
  .app-shell.view-captura .status-line#cameraStatus,
  .app-shell.view-captura .cameraStatus{
    display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;max-height:0!important;overflow:hidden!important;pointer-events:none!important;
  }
  .app-shell.view-captura #gpsBadge{
    display:block!important;position:fixed!important;top:calc(72px + var(--v31-top-safe))!important;right:14px!important;z-index:62!important;
    max-width:130px!important;padding:7px 10px!important;border-radius:999px!important;background:rgba(6,95,70,.76)!important;color:#d1fae5!important;font-size:11px!important;font-weight:1000!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;backdrop-filter:blur(10px)!important;border:1px solid rgba(167,243,208,.20)!important;
  }

  /* Marca de agua compacta y separada del botón */
  .app-shell.view-captura #liveStampPreview.live-stamp-preview{
    position:fixed!important;left:18px!important;right:92px!important;bottom:calc(176px + var(--v31-bottom-safe))!important;z-index:20!important;
    width:auto!important;max-width:none!important;min-width:0!important;padding:10px 12px!important;border-radius:18px!important;
    background:linear-gradient(135deg,rgba(3,7,18,.80),rgba(15,23,42,.56))!important;backdrop-filter:blur(12px)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 16px 32px rgba(0,0,0,.30)!important;
  }
  .app-shell.view-captura .live-stamp-brand{font-size:10px!important;line-height:1!important;margin:0 0 5px!important;letter-spacing:.09em!important;color:#fbbf24!important;font-weight:1000!important;text-transform:uppercase!important;}
  .app-shell.view-captura .live-stamp-main{display:flex!important;align-items:flex-end!important;gap:10px!important;min-width:0!important;}
  .app-shell.view-captura .live-stamp-main strong{font-size:34px!important;line-height:.88!important;font-weight:400!important;letter-spacing:-.045em!important;white-space:nowrap!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:13px!important;line-height:1.05!important;font-weight:950!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important;}
  .app-shell.view-captura .live-stamp-address,
  .app-shell.view-captura .live-stamp-meta{font-size:11px!important;line-height:1.15!important;margin-top:4px!important;font-weight:850!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}

  /* Zoom: separado de marca y obturador */
  .app-shell.view-captura #zoomBar.zoom-bar{
    position:fixed!important;right:14px!important;left:auto!important;top:46%!important;bottom:auto!important;transform:translateY(-50%)!important;z-index:35!important;
    display:flex!important;flex-direction:column!important;gap:11px!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;
  }
  .app-shell.view-captura #zoomBar.zoom-bar button{
    width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;border-radius:999px!important;padding:0!important;font-size:13px!important;font-weight:1000!important;background:rgba(15,23,42,.72)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 12px 24px rgba(0,0,0,.24)!important;backdrop-filter:blur(12px)!important;
  }
  .app-shell.view-captura #zoomBar.zoom-bar button.active{background:#f59e0b!important;color:#111827!important;border-color:#fbbf24!important;}

  /* Controles inferiores: área propia, no pisa marca */
  .app-shell.view-captura .actions.app-camera-controls{
    position:fixed!important;left:0!important;right:0!important;bottom:calc(30px + var(--v31-bottom-safe))!important;top:auto!important;transform:none!important;z-index:45!important;width:auto!important;height:96px!important;
    display:grid!important;grid-template-columns:64px minmax(20px,1fr) 92px minmax(20px,1fr) 64px!important;grid-template-areas:'power gap1 shutter gap2 gallery'!important;align-items:center!important;justify-items:center!important;gap:0!important;padding:0 22px!important;background:transparent!important;border:0!important;box-shadow:none!important;
  }
  .app-shell.view-captura #startCameraBtn{grid-area:power!important;position:static!important;display:flex!important;}
  .app-shell.view-captura #captureBtn{grid-area:shutter!important;position:static!important;display:block!important;}
  .app-shell.view-captura #clearPhotoBtn{grid-area:gallery!important;position:static!important;display:flex!important;}
  .app-shell.view-captura #gpsBtn{display:none!important;}
  .app-shell.view-captura #switchCameraBtn{position:fixed!important;right:18px!important;bottom:calc(126px + var(--v31-bottom-safe))!important;z-index:46!important;display:flex!important;}
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn),
  .app-shell.view-captura #switchCameraBtn{
    width:58px!important;height:58px!important;min-height:58px!important;border-radius:999px!important;font-size:0!important;padding:0!important;align-items:center!important;justify-content:center!important;background:rgba(15,23,42,.72)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 14px 28px rgba(0,0,0,.28)!important;backdrop-filter:blur(12px)!important;
  }
  .app-shell.view-captura #startCameraBtn::before{content:'⏻'!important;font-size:25px!important;}
  .app-shell.view-captura #switchCameraBtn::before{content:'↺'!important;font-size:27px!important;}
  .app-shell.view-captura #clearPhotoBtn::before{content:'🖼'!important;font-size:23px!important;}
  .app-shell.view-captura #captureBtn.shutter-btn{
    width:86px!important;height:86px!important;min-height:86px!important;max-width:86px!important;border-radius:999px!important;font-size:0!important;padding:0!important;border:8px solid rgba(255,255,255,.96)!important;outline:6px solid rgba(245,158,11,.34)!important;background:radial-gradient(circle at 40% 36%,#ffe8ad 0,#f59e0b 55%,#d97706 100%)!important;box-shadow:0 18px 44px rgba(245,158,11,.33),0 10px 28px rgba(0,0,0,.34)!important;
  }
  .app-shell.view-captura #captureBtn.shutter-btn span{display:none!important;}
}

@media (max-width: 390px) and (orientation: portrait){
  .app-shell.view-captura #liveStampPreview.live-stamp-preview{left:14px!important;right:86px!important;bottom:calc(168px + var(--v31-bottom-safe))!important;padding:9px 10px!important;}
  .app-shell.view-captura .live-stamp-main strong{font-size:30px!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:12px!important;}
  .app-shell.view-captura .live-stamp-address,.app-shell.view-captura .live-stamp-meta{font-size:10px!important;}
  .app-shell.view-captura #zoomBar.zoom-bar button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;}
  .app-shell.view-captura #captureBtn.shutter-btn{width:80px!important;height:80px!important;min-height:80px!important;}
}

@media (max-width: 940px) and (orientation: landscape){
  .app-shell.view-captura .topbar.app-topbar-modern{min-height:44px!important;padding:calc(4px + var(--v31-top-safe)) 10px 5px!important;}
  .app-shell.view-captura .topbar h1{font-size:13px!important;max-width:40vw!important;}
  .app-shell.view-captura .topbar .menu-icon,.app-shell.view-captura .topbar .icon-btn{width:36px!important;height:36px!important;border-radius:13px!important;}
  .app-shell.view-captura #gpsBadge{top:calc(50px + var(--v31-top-safe))!important;right:calc(14px + var(--v31-right-safe))!important;font-size:10px!important;padding:6px 9px!important;}
  .app-shell.view-captura #liveStampPreview.live-stamp-preview{
    left:calc(16px + var(--v31-left-safe))!important;right:auto!important;bottom:16px!important;width:min(43vw,500px)!important;max-width:min(43vw,500px)!important;padding:10px 12px!important;border-radius:18px!important;
  }
  .app-shell.view-captura .live-stamp-brand{font-size:9px!important;margin-bottom:4px!important;}
  .app-shell.view-captura .live-stamp-main strong{font-size:33px!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:12px!important;}
  .app-shell.view-captura .live-stamp-address,.app-shell.view-captura .live-stamp-meta{font-size:10.5px!important;}
  .app-shell.view-captura #zoomBar.zoom-bar{right:calc(116px + var(--v31-right-safe))!important;top:50%!important;gap:8px!important;}
  .app-shell.view-captura #zoomBar.zoom-bar button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;font-size:12px!important;}
  .app-shell.view-captura .actions.app-camera-controls{
    left:auto!important;right:calc(20px + var(--v31-right-safe))!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;width:78px!important;height:auto!important;display:flex!important;flex-direction:column!important;gap:11px!important;padding:0!important;
  }
  .app-shell.view-captura #switchCameraBtn{position:static!important;}
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn),
  .app-shell.view-captura #switchCameraBtn{width:48px!important;height:48px!important;min-height:48px!important;}
  .app-shell.view-captura #captureBtn.shutter-btn{width:70px!important;height:70px!important;min-height:70px!important;border-width:7px!important;outline-width:4px!important;}
  .app-shell.view-captura #startCameraBtn{display:none!important;}
  .app-shell.view-captura #gpsBtn{display:none!important;}
  .app-shell.view-captura .camera-box::after{height:30%!important;}
}


/* ===== v32: galería editable + edición posterior a captura ===== */
.edit-modal[hidden] { display: none !important; }
.edit-modal { position: fixed; inset: 0; z-index: 115; }
.edit-modal-backdrop { position: absolute; inset: 0; background: rgba(2,8,23,.66); backdrop-filter: blur(8px); }
.edit-modal-card {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 22px));
  max-height: calc(100dvh - 24px);
  margin: 12px auto;
  overflow: auto;
  background: #fff;
  color: #0f172a;
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 30px 80px rgba(2,8,23,.34);
}
.edit-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.edit-modal-head h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.edit-modal-head p { margin: 5px 0 0; color: #64748b; line-height: 1.35; }
.edit-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.edit-grid label {
  display: block;
  font-weight: 850;
  color: #334155;
  font-size: 13px;
}
.edit-grid .span-2 { grid-column: 1 / -1; }
.edit-grid input,
.edit-grid select,
.edit-grid textarea {
  margin-top: 7px;
  width: 100%;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  padding: 13px 14px;
  font: inherit;
  background: #f8fafc;
  color: #0f172a;
}
.edit-grid textarea { resize: vertical; min-height: 86px; }
.edit-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.edit-actions button { flex: 1 1 190px; min-height: 48px; }
.edit-hint {
  margin: 12px 2px 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}
.record-actions button.secondary {
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 850;
  color: #0b3b75;
  background: #eaf3ff;
}
.record-actions button.secondary:active { transform: translateY(1px); }

@media (max-width: 700px) {
  .edit-modal-card {
    width: calc(100vw - 14px);
    margin: 7px auto;
    border-radius: 24px;
    padding: 15px;
  }
  .edit-modal-head h3 { font-size: 20px; }
  .edit-grid { grid-template-columns: 1fr; gap: 10px; }
  .edit-grid .span-2 { grid-column: auto; }
  .edit-actions { position: sticky; bottom: 0; background: linear-gradient(180deg,rgba(255,255,255,0),#fff 20%); padding-top: 12px; }
}

@media (max-width: 700px) {
  .app-shell.view-captura .live-stamp-preview {
    bottom: calc(178px + env(safe-area-inset-bottom)) !important;
    max-height: 118px;
    overflow: hidden;
  }
  .app-shell.view-captura .live-stamp-main strong { font-size: 34px !important; }
  .app-shell.view-captura .live-stamp-main span { font-size: 14px !important; }
  .app-shell.view-captura .live-stamp-address,
  .app-shell.view-captura .live-stamp-meta { font-size: 11.5px !important; line-height: 1.18 !important; }
  .app-shell.view-captura .cameraStatus { display: none !important; }
  .app-shell.view-captura.capture-landscape .live-stamp-preview {
    bottom: 18px !important;
    max-width: 48vw !important;
    max-height: 100px !important;
  }
}

/* ===== v33 FINAL: cámara de campo sin cruces ===== */
:root{
  --v33-bottom: env(safe-area-inset-bottom, 0px);
  --v33-top: env(safe-area-inset-top, 0px);
  --v33-right: env(safe-area-inset-right, 0px);
  --v33-left: env(safe-area-inset-left, 0px);
}

/* Evita menú nativo del video: downloadfile.bin / copiar fotograma */
.camera-box, .camera-box *,
#video, #canvas, #preview{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  touch-action:manipulation!important;
}

.app-shell.view-captura #cameraStatus,
.app-shell.view-captura .status-line#cameraStatus,
.app-shell.view-captura .status-line{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  height:0!important;
  max-height:0!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
}

.app-shell.view-captura .camera-chip{
  position:fixed!important;
  top:calc(76px + var(--v33-top))!important;
  right:calc(16px + var(--v33-right))!important;
  z-index:45!important;
  max-width:142px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:950!important;
  line-height:1!important;
  color:#eafff2!important;
  background:rgba(5,22,18,.62)!important;
  border:1px solid rgba(52,211,153,.24)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(12px)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.app-shell.view-captura .camera-chip[data-level="warn"]{background:rgba(58,37,8,.68)!important;border-color:rgba(251,191,36,.28)!important;color:#fff7d6!important;}
.app-shell.view-captura .camera-chip[data-level="muted"]{background:rgba(15,23,42,.62)!important;border-color:rgba(148,163,184,.22)!important;color:#e5e7eb!important;}

@media (max-width:920px), (orientation:landscape){
  .app-shell.view-captura{
    background:#000!important;
    overflow:hidden!important;
    min-height:100dvh!important;
  }
  .app-shell.view-captura .camera-panel,
  .app-shell.view-captura .camera-box{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border-radius:0!important;
    border:0!important;
    overflow:hidden!important;
    background:#000!important;
    box-shadow:none!important;
  }
  .app-shell.view-captura .section-title,
  .app-shell.view-captura .template-strip,
  .app-shell.view-captura .gps-card,
  .app-shell.view-captura .duplicate-panel,
  .app-shell.view-captura .form-grid{
    display:none!important;
  }
  .app-shell.view-captura #video,
  .app-shell.view-captura #canvas,
  .app-shell.view-captura #preview{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    border-radius:0!important;
    background:#000!important;
  }
  .app-shell.view-captura .topbar.app-topbar-modern{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:42!important;
    min-height:70px!important;
    padding:calc(10px + var(--v33-top)) 18px 20px!important;
    background:linear-gradient(180deg,rgba(2,8,23,.80),rgba(2,8,23,.42) 68%,rgba(2,8,23,0))!important;
    border:0!important;
    box-shadow:none!important;
    color:#fff!important;
    backdrop-filter:none!important;
  }
  .app-shell.view-captura .topbar h1{
    font-size:18px!important;
    max-width:62vw!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:#fff!important;
  }
  .app-shell.view-captura .topbar .eyebrow,
  .app-shell.view-captura .topbar .subtitle,
  .app-shell.view-captura .header-actions{display:none!important;}
  .app-shell.view-captura .topbar .icon-btn,
  .app-shell.view-captura .topbar .menu-icon{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    border-radius:18px!important;
    background:rgba(15,23,42,.72)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:0 10px 22px rgba(0,0,0,.24)!important;
  }

  /* Marca: compacta, encima de controles, sin tocar obturador */
  .app-shell.view-captura .live-stamp-preview{
    position:fixed!important;
    left:18px!important;
    right:18px!important;
    bottom:calc(136px + var(--v33-bottom))!important;
    z-index:18!important;
    width:auto!important;
    max-width:none!important;
    max-height:104px!important;
    overflow:hidden!important;
    padding:10px 12px!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,rgba(3,8,18,.76),rgba(8,20,42,.50))!important;
    backdrop-filter:blur(10px)!important;
    border:1px solid rgba(255,255,255,.13)!important;
    box-shadow:0 14px 28px rgba(0,0,0,.26)!important;
  }
  .app-shell.view-captura .live-stamp-brand{font-size:10px!important;line-height:1!important;margin:0 0 5px!important;letter-spacing:.08em!important;color:#fbbf24!important;}
  .app-shell.view-captura .live-stamp-main{display:flex!important;align-items:flex-end!important;gap:10px!important;margin:0!important;min-width:0!important;}
  .app-shell.view-captura .live-stamp-main strong{font-size:34px!important;line-height:.88!important;font-weight:420!important;letter-spacing:-.04em!important;white-space:nowrap!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:13px!important;line-height:1.05!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .app-shell.view-captura .live-stamp-address,
  .app-shell.view-captura .live-stamp-meta{font-size:10.5px!important;line-height:1.16!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin-top:4px!important;}

  /* Zoom fijo, lejos del obturador */
  .app-shell.view-captura #zoomBar.zoom-bar{
    position:fixed!important;
    right:calc(16px + var(--v33-right))!important;
    left:auto!important;
    top:46%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    z-index:24!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .app-shell.view-captura #zoomBar.zoom-bar button{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    border-radius:999px!important;
    padding:0!important;
    font-size:13px!important;
    font-weight:1000!important;
    background:rgba(15,23,42,.70)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:0 12px 22px rgba(0,0,0,.23)!important;
    backdrop-filter:blur(12px)!important;
  }
  .app-shell.view-captura #zoomBar.zoom-bar button.active{background:#f59e0b!important;color:#111827!important;border-color:#fbbf24!important;}

  /* Controles inferiores limpios */
  .app-shell.view-captura .actions.app-camera-controls{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:calc(22px + var(--v33-bottom))!important;
    top:auto!important;
    transform:none!important;
    z-index:30!important;
    display:grid!important;
    grid-template-columns:64px 64px 1fr 64px!important;
    grid-template-areas:'start switch shutter gallery'!important;
    align-items:center!important;
    justify-items:center!important;
    gap:10px!important;
    padding:0 22px!important;
    margin:0!important;
    width:auto!important;
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
  }
  .app-shell.view-captura #startCameraBtn{grid-area:start!important;}
  .app-shell.view-captura #switchCameraBtn{grid-area:switch!important;position:static!important;}
  .app-shell.view-captura #captureBtn{grid-area:shutter!important;justify-self:center!important;}
  .app-shell.view-captura #clearPhotoBtn{grid-area:gallery!important;}
  .app-shell.view-captura #gpsBtn{display:none!important;}
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn){
    width:54px!important;
    height:54px!important;
    min-height:54px!important;
    max-width:54px!important;
    border-radius:999px!important;
    font-size:0!important;
    padding:0!important;
    background:rgba(15,23,42,.58)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    color:#fff!important;
    box-shadow:0 12px 22px rgba(0,0,0,.22)!important;
    backdrop-filter:blur(12px)!important;
  }
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn)::first-letter{font-size:22px!important;}
  .app-shell.view-captura #startCameraBtn::after{content:'▶';font-size:22px!important;}
  .app-shell.view-captura #switchCameraBtn::after{content:'↺';font-size:24px!important;}
  .app-shell.view-captura #clearPhotoBtn::after{content:'🖼';font-size:22px!important;}
  .app-shell.view-captura #captureBtn.shutter-btn{
    width:82px!important;
    height:82px!important;
    min-height:82px!important;
    max-width:82px!important;
    border-radius:999px!important;
    border:8px solid rgba(255,255,255,.96)!important;
    outline:5px solid rgba(245,158,11,.34)!important;
    background:radial-gradient(circle at 50% 42%,#ffd970 0,#f59e0b 48%,#d97706 100%)!important;
    box-shadow:0 18px 40px rgba(245,158,11,.30),0 0 0 7px rgba(255,255,255,.14)!important;
  }
  .app-shell.view-captura #captureBtn.shutter-btn span{display:none!important;}
}

@media (max-width:390px) and (orientation:portrait){
  .app-shell.view-captura .live-stamp-preview{bottom:calc(132px + var(--v33-bottom))!important;left:14px!important;right:72px!important;}
  .app-shell.view-captura #zoomBar.zoom-bar{right:12px!important;}
  .app-shell.view-captura #zoomBar.zoom-bar button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;font-size:12px!important;}
  .app-shell.view-captura #captureBtn.shutter-btn{width:78px!important;height:78px!important;min-height:78px!important;}
}

@media (max-width:920px) and (orientation:landscape){
  .app-shell.view-captura .topbar.app-topbar-modern{min-height:52px!important;padding:calc(4px + var(--v33-top)) 10px 8px!important;}
  .app-shell.view-captura .topbar h1{font-size:13px!important;max-width:42vw!important;}
  .app-shell.view-captura .topbar .icon-btn,.app-shell.view-captura .topbar .menu-icon{width:38px!important;height:38px!important;min-width:38px!important;border-radius:14px!important;}
  .app-shell.view-captura .camera-chip{top:calc(50px + var(--v33-top))!important;right:calc(94px + var(--v33-right))!important;font-size:10px!important;padding:6px 9px!important;}
  .app-shell.view-captura .live-stamp-preview{
    left:18px!important;
    right:auto!important;
    bottom:18px!important;
    width:min(44vw,500px)!important;
    max-width:min(44vw,500px)!important;
    max-height:92px!important;
    padding:9px 11px!important;
    border-radius:17px!important;
  }
  .app-shell.view-captura .live-stamp-main strong{font-size:32px!important;}
  .app-shell.view-captura .live-stamp-main span{font-size:12px!important;}
  .app-shell.view-captura .live-stamp-address,.app-shell.view-captura .live-stamp-meta{font-size:10px!important;}
  .app-shell.view-captura #zoomBar.zoom-bar{
    right:calc(104px + var(--v33-right))!important;
    top:50%!important;
    gap:8px!important;
  }
  .app-shell.view-captura #zoomBar.zoom-bar button{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;font-size:12px!important;}
  .app-shell.view-captura .actions.app-camera-controls{
    left:auto!important;
    right:calc(18px + var(--v33-right))!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:74px!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  .app-shell.view-captura #startCameraBtn,
  .app-shell.view-captura #gpsBtn{display:none!important;}
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn){width:50px!important;height:50px!important;min-height:50px!important;}
  .app-shell.view-captura #captureBtn.shutter-btn{width:70px!important;height:70px!important;min-height:70px!important;border-width:7px!important;outline-width:4px!important;}
}

/* Evidencias: acciones más compactas para campo */
@media (max-width:700px){
  .app-shell.view-informar .panel{border-radius:24px!important;}
  .app-shell.view-informar .report-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .app-shell.view-informar .report-actions button{min-height:74px!important;border-radius:20px!important;font-size:13px!important;}
}

/* =========================================================
   V34 FIX REAL - LIMPIEZA DEFINITIVA DE CÁMARA DE CAMPO
   Este bloque va al final para pisar todas las reglas viejas.
   ========================================================= */
html, body { overscroll-behavior: none; }
#video, #canvas, #preview, #cameraBox, .camera-box, .camera-box * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
#video { pointer-events: none !important; }
.app-shell.view-captura #cameraStatus,
.app-shell.view-captura .status-line,
#cameraStatus.status-line {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.app-shell.view-captura .camera-chip {
  position: fixed !important;
  top: calc(84px + env(safe-area-inset-top, 0px)) !important;
  right: calc(14px + env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 80 !important;
  width: auto !important;
  max-width: 112px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  color: #eafff4 !important;
  background: rgba(7, 34, 25, .72) !important;
  border: 1px solid rgba(52, 211, 153, .28) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(12px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.app-shell.view-captura .camera-box {
  height: 100dvh !important;
  min-height: 100dvh !important;
  width: 100vw !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}
.app-shell.view-captura #video,
.app-shell.view-captura #preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.app-shell.view-captura .template-strip,
.app-shell.view-captura .gps-card,
.app-shell.view-captura .camera-panel > .section-title,
.app-shell.view-captura .footer,
.app-shell.view-captura .bottom-app-nav,
.app-shell.view-captura .bulk-action-bar {
  display: none !important;
}
.app-shell.view-captura .topbar.app-topbar-modern {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 70 !important;
  min-height: calc(70px + env(safe-area-inset-top, 0px)) !important;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 10px !important;
  background: linear-gradient(180deg, rgba(3,7,18,.82), rgba(3,7,18,.42), rgba(3,7,18,0)) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
}
.app-shell.view-captura .topbar .eyebrow,
.app-shell.view-captura .topbar .subtitle,
.app-shell.view-captura .header-actions,
.app-shell.view-captura .topbar .badge:not(#connectionBadge) { display: none !important; }
.app-shell.view-captura .topbar h1 {
  font-size: 20px !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: #fff !important;
  max-width: 62vw !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.app-shell.view-captura .menu-icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 22px !important;
  font-size: 30px !important;
  background: rgba(15,23,42,.68) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px) !important;
}
.app-shell.view-captura .live-stamp-preview {
  position: fixed !important;
  left: 18px !important;
  right: 112px !important;
  bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 45 !important;
  max-width: none !important;
  max-height: 128px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(4,10,23,.38), rgba(4,10,23,.74)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.app-shell.view-captura .live-stamp-brand { font-size: 11px !important; line-height: 1 !important; margin: 0 0 6px !important; color: #fbbf24 !important; letter-spacing: .08em !important; }
.app-shell.view-captura .live-stamp-main { display: flex !important; align-items: flex-end !important; gap: 10px !important; min-width: 0 !important; margin: 0 !important; }
.app-shell.view-captura .live-stamp-main strong { font-size: 38px !important; line-height: .86 !important; font-weight: 430 !important; letter-spacing: -.04em !important; white-space: nowrap !important; }
.app-shell.view-captura .live-stamp-main span { font-size: 13px !important; line-height: 1.05 !important; font-weight: 900 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.app-shell.view-captura .live-stamp-address,
.app-shell.view-captura .live-stamp-meta { display: block !important; font-size: 11px !important; line-height: 1.18 !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-top: 5px !important; }
.app-shell.view-captura #zoomBar.zoom-bar {
  position: fixed !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  top: 46% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 55 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.app-shell.view-captura #zoomBar.zoom-bar button {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  background: rgba(15,23,42,.68) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(12px) !important;
}
.app-shell.view-captura #zoomBar.zoom-bar button.active { background: #f59e0b !important; color: #111827 !important; border-color: #fbbf24 !important; }
.app-shell.view-captura .actions.app-camera-controls {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(38px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  z-index: 60 !important;
  display: grid !important;
  grid-template-columns: 64px 1fr 88px 1fr 64px !important;
  grid-template-areas: 'switch gap1 shutter gap2 gallery' !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 !important;
  padding: 0 24px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.app-shell.view-captura #startCameraBtn,
.app-shell.view-captura #gpsBtn { display: none !important; }
.app-shell.view-captura #switchCameraBtn { grid-area: switch !important; position: static !important; }
.app-shell.view-captura #captureBtn { grid-area: shutter !important; position: static !important; justify-self: center !important; }
.app-shell.view-captura #clearPhotoBtn { grid-area: gallery !important; position: static !important; }
.app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn) {
  width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  padding: 0 !important;
  background: rgba(15,23,42,.60) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(12px) !important;
}
.app-shell.view-captura #switchCameraBtn::after { content: '↺'; font-size: 25px !important; }
.app-shell.view-captura #clearPhotoBtn::after { content: '🖼'; font-size: 23px !important; }
.app-shell.view-captura #captureBtn.shutter-btn {
  width: 84px !important;
  height: 84px !important;
  min-height: 84px !important;
  max-width: 84px !important;
  border-radius: 999px !important;
  border: 8px solid rgba(255,255,255,.96) !important;
  outline: 5px solid rgba(245,158,11,.34) !important;
  background: radial-gradient(circle at 50% 42%, #ffd970 0, #f59e0b 48%, #d97706 100%) !important;
  box-shadow: 0 18px 40px rgba(245,158,11,.30), 0 0 0 7px rgba(255,255,255,.14) !important;
}
.app-shell.view-captura #captureBtn.shutter-btn span { display:none!important; }
@media (max-width: 390px) and (orientation: portrait) {
  .app-shell.view-captura .live-stamp-preview { left: 16px !important; right: 92px !important; bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important; padding: 9px 10px !important; }
  .app-shell.view-captura #zoomBar.zoom-bar { right: 12px !important; top: 45% !important; }
  .app-shell.view-captura #zoomBar.zoom-bar button { width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; }
  .app-shell.view-captura #captureBtn.shutter-btn { width: 80px !important; height: 80px !important; min-height: 80px !important; }
}
@media (max-width: 920px) and (orientation: landscape) {
  .app-shell.view-captura .topbar.app-topbar-modern { min-height: calc(50px + env(safe-area-inset-top, 0px)) !important; padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 6px !important; }
  .app-shell.view-captura .menu-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 15px !important; font-size: 25px !important; }
  .app-shell.view-captura .topbar h1 { font-size: 14px !important; max-width: 36vw !important; }
  .app-shell.view-captura .camera-chip { top: calc(52px + env(safe-area-inset-top, 0px)) !important; right: calc(98px + env(safe-area-inset-right, 0px)) !important; font-size: 10px !important; padding: 6px 9px !important; }
  .app-shell.view-captura .live-stamp-preview { left: 18px !important; right: auto !important; bottom: 18px !important; width: min(42vw, 500px) !important; max-width: min(42vw, 500px) !important; max-height: 92px !important; padding: 9px 11px !important; }
  .app-shell.view-captura .live-stamp-main strong { font-size: 32px !important; }
  .app-shell.view-captura .live-stamp-main span { font-size: 12px !important; }
  .app-shell.view-captura .live-stamp-address,
  .app-shell.view-captura .live-stamp-meta { font-size: 10px !important; }
  .app-shell.view-captura #zoomBar.zoom-bar { right: calc(106px + env(safe-area-inset-right, 0px)) !important; top: 50% !important; gap: 8px !important; }
  .app-shell.view-captura #zoomBar.zoom-bar button { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; font-size: 12px !important; }
  .app-shell.view-captura .actions.app-camera-controls { left: auto !important; right: calc(18px + env(safe-area-inset-right, 0px)) !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; width: 76px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn) { width: 50px !important; height: 50px !important; min-height: 50px !important; }
  .app-shell.view-captura #captureBtn.shutter-btn { width: 70px !important; height: 70px !important; min-height: 70px !important; border-width: 7px !important; outline-width: 4px !important; }
}

/* =========================================================
   V35 CLEAN CAMERA LAYOUT - CORRECCIÓN REAL DE INTERFAZ
   ========================================================= */
html, body { overscroll-behavior: none; }
body.ecp-v35-clean.view-captura,
body.app-shell.view-captura {
  overflow: hidden !important;
  touch-action: manipulation !important;
}

/* 1) MATAR DEFINITIVAMENTE LA BARRA GRANDE DE ESTADO */
#cameraStatus,
.status-line#cameraStatus,
body.view-captura #cameraStatus,
body.view-captura .status-line,
body.ecp-v35-clean.view-captura #cameraStatus,
body.ecp-v35-clean.view-captura .status-line {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -99999px !important;
  bottom: auto !important;
  z-index: -1 !important;
}

/* 2) QUITAR FRANJA/BLUR INFERIOR QUE TAPABA BOTÓN */
body.view-captura .camera-box::after,
body.view-captura .camera-box::before,
body.ecp-v35-clean.view-captura .camera-box::after,
body.ecp-v35-clean.view-captura .camera-box::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}
body.view-captura .camera-box {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  height: 100vh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
body.view-captura #video,
body.view-captura #preview,
body.view-captura #canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
  pointer-events: auto !important;
}

/* 3) HEADER SUPERIOR FIJO Y NO INVASIVO */
body.view-captura .topbar.app-topbar-modern,
body.view-captura .topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  min-height: calc(78px + env(safe-area-inset-top, 0px)) !important;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 14px !important;
  z-index: 90 !important;
  background: linear-gradient(180deg, rgba(2,8,23,.74), rgba(2,8,23,.38) 56%, rgba(2,8,23,0)) !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.view-captura .topbar h1 { font-size: 22px !important; line-height: 1 !important; max-width: 62vw !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.view-captura .menu-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; border-radius: 20px !important; }

/* 4) CHIP GPS PEQUEÑO, NO BARRA */
body.view-captura .camera-chip {
  position: fixed !important;
  top: calc(84px + env(safe-area-inset-top, 0px)) !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 91 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 116px !important;
  min-height: 30px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #fff !important;
  background: rgba(4, 12, 24, .58) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.20) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* 5) MARCA DE AGUA: ZONA PROPIA, NUNCA SOBRE BOTÓN */
body.view-captura .live-stamp-preview {
  position: fixed !important;
  left: 18px !important;
  right: 104px !important;
  bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 50 !important;
  width: auto !important;
  max-width: none !important;
  max-height: 132px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(5,12,24,.36), rgba(5,12,24,.66)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
body.view-captura .live-stamp-brand { font-size: 11px !important; margin: 0 0 5px !important; line-height: 1 !important; letter-spacing: .08em !important; }
body.view-captura .live-stamp-main { gap: 10px !important; align-items: flex-end !important; min-width:0 !important; }
body.view-captura .live-stamp-main strong { font-size: 42px !important; line-height: .88 !important; font-weight: 420 !important; letter-spacing: -.04em !important; }
body.view-captura .live-stamp-main span { font-size: 14px !important; line-height: 1.05 !important; font-weight: 900 !important; white-space: nowrap !important; overflow:hidden !important; text-overflow: ellipsis !important; }
body.view-captura .live-stamp-address,
body.view-captura .live-stamp-meta { font-size: 12px !important; line-height: 1.15 !important; margin-top: 5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

/* 6) CONTROLES: OBTURADOR CON ESPACIO PROTEGIDO */
body.view-captura .actions.app-camera-controls,
body.view-captura .actions {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  z-index: 80 !important;
  height: 96px !important;
  display: grid !important;
  grid-template-columns: 68px 1fr 92px 1fr 68px !important;
  grid-template-areas: 'switch gap1 shutter gap2 gallery' !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 0 24px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
body.view-captura #startCameraBtn,
body.view-captura #gpsBtn { display: none !important; }
body.view-captura #switchCameraBtn { grid-area: switch !important; position: static !important; }
body.view-captura #captureBtn { grid-area: shutter !important; position: static !important; }
body.view-captura #clearPhotoBtn { grid-area: gallery !important; position: static !important; }
body.view-captura .actions button:not(.shutter-btn) {
  width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important;
  max-width: 58px !important; padding: 0 !important; border-radius: 999px !important; font-size: 0 !important;
  background: rgba(15,23,42,.62) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important; backdrop-filter: blur(10px) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.24) !important;
}
body.view-captura #switchCameraBtn::after { content: '↺'; font-size: 26px !important; }
body.view-captura #clearPhotoBtn::after { content: '🖼'; font-size: 24px !important; }
body.view-captura #captureBtn.shutter-btn {
  width: 88px !important; height: 88px !important; min-width: 88px !important; min-height: 88px !important; max-width: 88px !important;
  border-radius: 999px !important; padding: 0 !important; font-size: 0 !important;
  border: 8px solid rgba(255,255,255,.98) !important; outline: 5px solid rgba(245,158,11,.36) !important;
  background: radial-gradient(circle at 50% 42%, #ffe18a 0, #f59e0b 48%, #d97706 100%) !important;
  box-shadow: 0 18px 40px rgba(245,158,11,.33), 0 0 0 7px rgba(255,255,255,.14) !important;
}
body.view-captura #captureBtn.shutter-btn span { display:none !important; }

/* 7) ZOOM: COLUMNA LIMPIA, SEPARADA DEL OBTURADOR */
body.view-captura #zoomBar.zoom-bar {
  position: fixed !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  top: 48% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 75 !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.view-captura #zoomBar.zoom-bar button {
  width: 56px !important; height: 56px !important; min-width:56px !important; min-height:56px !important;
  border-radius: 999px !important; padding: 0 !important; font-size: 13px !important; font-weight: 1000 !important;
  background: rgba(15,23,42,.68) !important; color:#fff !important; border:1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.22) !important; backdrop-filter: blur(10px) !important;
}
body.view-captura #zoomBar.zoom-bar button.active { background:#f59e0b !important; color:#111827 !important; border-color:#fbbf24 !important; }

/* Pantallas angostas: stamp más compacta */
@media (max-width: 390px) and (orientation: portrait) {
  body.view-captura .live-stamp-preview { left: 14px !important; right: 88px !important; bottom: calc(136px + env(safe-area-inset-bottom,0px)) !important; padding: 10px 11px !important; max-height: 118px !important; }
  body.view-captura .live-stamp-main strong { font-size: 38px !important; }
  body.view-captura .live-stamp-main span { font-size: 12px !important; }
  body.view-captura .live-stamp-address, body.view-captura .live-stamp-meta { font-size: 11px !important; }
  body.view-captura #zoomBar.zoom-bar { right: 10px !important; top: 47% !important; }
  body.view-captura #zoomBar.zoom-bar button { width: 50px !important; height: 50px !important; min-width:50px !important; min-height:50px !important; }
}

/* Horizontal: marca izquierda; controles y zoom separados */
@media (orientation: landscape) {
  body.view-captura .topbar.app-topbar-modern,
  body.view-captura .topbar { min-height: calc(50px + env(safe-area-inset-top,0px)) !important; padding: calc(6px + env(safe-area-inset-top,0px)) 10px 6px !important; }
  body.view-captura .menu-icon { width:42px !important; height:42px !important; min-width:42px !important; border-radius:15px !important; font-size:25px !important; }
  body.view-captura .topbar h1 { font-size:14px !important; max-width:38vw !important; }
  body.view-captura .camera-chip { top: calc(52px + env(safe-area-inset-top,0px)) !important; right: calc(18px + env(safe-area-inset-right,0px)) !important; max-width: 96px !important; font-size:10px !important; min-height:26px !important; padding:6px 8px !important; }
  body.view-captura .live-stamp-preview { left: 18px !important; right: auto !important; bottom: 16px !important; width: min(43vw, 520px) !important; max-width: min(43vw, 520px) !important; max-height: 96px !important; padding: 9px 11px !important; border-radius:16px !important; }
  body.view-captura .live-stamp-main strong { font-size: 32px !important; }
  body.view-captura .live-stamp-main span { font-size: 12px !important; }
  body.view-captura .live-stamp-address, body.view-captura .live-stamp-meta { font-size: 10px !important; margin-top: 4px !important; }
  body.view-captura #zoomBar.zoom-bar { right: calc(110px + env(safe-area-inset-right,0px)) !important; top: 50% !important; gap:8px !important; }
  body.view-captura #zoomBar.zoom-bar button { width:46px !important; height:46px !important; min-width:46px !important; min-height:46px !important; font-size:12px !important; }
  body.view-captura .actions.app-camera-controls,
  body.view-captura .actions { left:auto !important; right:calc(18px + env(safe-area-inset-right,0px)) !important; top:50% !important; bottom:auto !important; transform:translateY(-50%) !important; width:76px !important; height:auto !important; padding:0 !important; display:flex !important; flex-direction:column !important; gap:12px !important; }
  body.view-captura .actions button:not(.shutter-btn) { width:50px !important; height:50px !important; min-width:50px !important; min-height:50px !important; }
  body.view-captura #captureBtn.shutter-btn { width:72px !important; height:72px !important; min-width:72px !important; min-height:72px !important; border-width:7px !important; outline-width:4px !important; }
}
/* =========================================================
   FIX INTERFAZ FINAL - EVIDENCIA CALLE PRO
   Objetivo:
   - No más barra "Estado: GPS..."
   - Marca de agua separada del botón
   - Botones sin sobreponerse
   - Zoom separado
   - Horizontal limpio
   ========================================================= */

:root {
  --ecp-top: env(safe-area-inset-top, 0px);
  --ecp-bottom: env(safe-area-inset-bottom, 0px);
  --ecp-left: env(safe-area-inset-left, 0px);
  --ecp-right: env(safe-area-inset-right, 0px);
}

/* Matar cualquier barra vieja tipo estado */
#cameraStatus,
.cameraStatus,
.camera-status,
.status-line,
.status-bar,
.capture-status,
.field-status,
.bottom-status {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Evitar menú downloadfile.bin / copiar fotograma */
video,
canvas,
#video,
#canvas,
#preview,
.camera-box,
.camera-box *,
.camera-panel {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  touch-action: manipulation !important;
}

#video::-webkit-media-controls,
#video::-webkit-media-controls-panel,
#video::-webkit-media-controls-play-button,
#video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cámara modo full */
.app-shell.view-captura,
body.view-captura {
  background: #000 !important;
  overflow: hidden !important;
}

.app-shell.view-captura .layout {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
}

.app-shell.view-captura .camera-panel {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.app-shell.view-captura .camera-panel .section-title,
.app-shell.view-captura .template-strip,
.app-shell.view-captura .gps-card,
.app-shell.view-captura .app-mode-panel,
.app-shell.view-captura .form-panel,
.app-shell.view-captura .records-panel {
  display: none !important;
}

.app-shell.view-captura .camera-box {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.app-shell.view-captura #video,
.app-shell.view-captura #preview,
.app-shell.view-captura .camera-box video,
.app-shell.view-captura .camera-box img {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  object-fit: cover !important;
  background: #000 !important;
}

/* Header limpio */
.app-shell.view-captura .topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 120 !important;

  min-height: calc(74px + var(--ecp-top)) !important;
  padding: calc(12px + var(--ecp-top)) 18px 12px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  background: linear-gradient(
    180deg,
    rgba(2, 8, 23, 0.78),
    rgba(2, 8, 23, 0.42),
    rgba(2, 8, 23, 0)
  ) !important;

  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

.app-shell.view-captura .topbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.app-shell.view-captura .topbar h1 {
  display: block !important;
  margin: 0 !important;
  font-size: 25px !important;
  line-height: 1 !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.app-shell.view-captura .topbar .eyebrow,
.app-shell.view-captura .topbar .subtitle,
.app-shell.view-captura .header-actions,
.app-shell.view-captura #installBtn,
.app-shell.view-captura #connectionBadge,
.app-shell.view-captura #appModeBadge {
  display: none !important;
}

.app-shell.view-captura #menuBtn {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  border-radius: 24px !important;
  font-size: 34px !important;
  color: #fff !important;
  background: rgba(8, 18, 38, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

/* LIVE chip */
.app-shell.view-captura .topbar h1::after {
  content: "LIVE";
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  color: #7cf7b0;
  background: rgba(5, 88, 56, .42);
}

/* Chip GPS pequeño: reemplaza la barra Estado */
.app-shell.view-captura #cameraChip,
.app-shell.view-captura .camera-chip {
  position: fixed !important;
  top: calc(var(--ecp-top) + 86px) !important;
  right: calc(var(--ecp-right) + 16px) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 125 !important;

  width: auto !important;
  max-width: 120px !important;
  min-width: 66px !important;
  height: auto !important;
  min-height: 0 !important;

  padding: 7px 10px !important;
  border-radius: 999px !important;

  color: #eafff2 !important;
  background: rgba(4, 30, 22, .62) !important;
  border: 1px solid rgba(52, 211, 153, .26) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(10px) !important;

  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  pointer-events: none !important;
}

/* Marca de agua EN PANTALLA */
.app-shell.view-captura #liveStampPreview,
.app-shell.view-captura .live-stamp-preview {
  position: fixed !important;
  z-index: 80 !important;
  pointer-events: none !important;

  left: 22px !important;
  right: 122px !important;
  bottom: calc(var(--ecp-bottom) + 172px) !important;

  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;

  padding: 12px 15px !important;
  border-radius: 22px !important;

  color: #fff !important;
  background: linear-gradient(
    135deg,
    rgba(4, 13, 29, .82),
    rgba(8, 29, 57, .66)
  ) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .25) !important;
  backdrop-filter: blur(12px) !important;
}

.app-shell.view-captura .live-stamp-brand {
  font-size: 13px !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  color: #fbbf24 !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}

.app-shell.view-captura .live-stamp-main {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.app-shell.view-captura .live-stamp-main strong {
  font-size: clamp(42px, 10vw, 56px) !important;
  line-height: .9 !important;
  font-weight: 300 !important;
  letter-spacing: -.05em !important;
}

.app-shell.view-captura .live-stamp-main span {
  font-size: clamp(16px, 4vw, 20px) !important;
  font-weight: 900 !important;
}

.app-shell.view-captura .live-stamp-address,
.app-shell.view-captura .live-stamp-meta {
  max-width: 100% !important;
  font-size: 14px !important;
  line-height: 1.28 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-shell.view-captura .live-stamp-address {
  margin-top: 7px !important;
  font-weight: 900 !important;
}

.app-shell.view-captura .live-stamp-meta {
  margin-top: 4px !important;
  color: rgba(255,255,255,.9) !important;
}

/* Quitar franja borrosa inferior vieja */
.app-shell.view-captura .actions.app-camera-controls {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--ecp-bottom) + 26px) !important;
  z-index: 110 !important;

  height: 118px !important;
  margin: 0 !important;
  padding: 0 !important;

  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

.app-shell.view-captura .actions.app-camera-controls button {
  pointer-events: auto !important;
  font-size: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  background: rgba(10, 18, 35, .74) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(12px) !important;
}

/* Botón iniciar oculto cuando ya estamos en cámara */
.app-shell.view-captura #startCameraBtn {
  display: none !important;
}

/* Botón principal toma foto */
.app-shell.view-captura #captureBtn {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(var(--ecp-bottom) + 46px) !important;
  transform: translateX(-50%) !important;
  z-index: 130 !important;

  display: block !important;
  width: 92px !important;
  height: 92px !important;
  min-width: 92px !important;
  min-height: 92px !important;

  border-radius: 999px !important;
  background: radial-gradient(circle at 50% 42%, #ffd970 0%, #f59e0b 48%, #d97706 100%) !important;
  border: 8px solid rgba(255, 255, 255, .92) !important;
  outline: 7px solid rgba(245, 158, 11, .24) !important;
  box-shadow:
    0 20px 48px rgba(245, 158, 11, .36),
    0 0 0 1px rgba(255,255,255,.16) !important;
}

.app-shell.view-captura #captureBtn span {
  display: none !important;
}

/* Cambiar cámara */
.app-shell.view-captura #switchCameraBtn {
  position: fixed !important;
  left: 30px !important;
  right: auto !important;
  bottom: calc(var(--ecp-bottom) + 58px) !important;
  z-index: 128 !important;

  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
}

.app-shell.view-captura #switchCameraBtn::before {
  content: "↺" !important;
  font-size: 27px !important;
  font-weight: 950 !important;
}

/* GPS button oculto: GPS ya es automático */
.app-shell.view-captura #gpsBtn {
  display: none !important;
}

/* Galería */
.app-shell.view-captura #clearPhotoBtn {
  position: fixed !important;
  right: 30px !important;
  left: auto !important;
  bottom: calc(var(--ecp-bottom) + 58px) !important;
  z-index: 128 !important;

  display: block !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  opacity: 1 !important;
}

.app-shell.view-captura #clearPhotoBtn::before {
  content: "🖼️" !important;
  font-size: 25px !important;
}

/* Zoom separado del botón */
.app-shell.view-captura #zoomBar,
.app-shell.view-captura .zoom-bar {
  position: fixed !important;
  right: calc(var(--ecp-right) + 20px) !important;
  top: 45% !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 115 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.app-shell.view-captura #zoomBar button,
.app-shell.view-captura .zoom-bar button {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;

  padding: 0 !important;
  border-radius: 999px !important;

  font-size: 17px !important;
  font-weight: 950 !important;

  color: #fff !important;
  background: rgba(11, 18, 36, .76) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25) !important;
  backdrop-filter: blur(12px) !important;
}

.app-shell.view-captura #zoomBar button.active,
.app-shell.view-captura .zoom-bar button.active {
  color: #1f1600 !important;
  background: #f59e0b !important;
  border-color: #fbbf24 !important;
}

/* Toast pequeño al guardar */
#tinyToast {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(var(--ecp-bottom) + 148px) !important;
  transform: translateX(-50%) translateY(12px) !important;
  z-index: 180 !important;

  padding: 10px 15px !important;
  border-radius: 999px !important;

  color: #fff !important;
  background: rgba(6, 18, 36, .9) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(12px) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  opacity: 0 !important;
  pointer-events: none !important;
  transition: .18s ease !important;
}

#tinyToast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Horizontal */
@media (orientation: landscape) {
  .app-shell.view-captura .topbar {
    justify-content: flex-start !important;
    min-height: calc(58px + var(--ecp-top)) !important;
    padding: calc(8px + var(--ecp-top)) 14px 8px !important;
  }

  .app-shell.view-captura #menuBtn {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    font-size: 28px !important;
    border-radius: 18px !important;
  }

  .app-shell.view-captura .topbar h1 {
    font-size: 18px !important;
  }

  .app-shell.view-captura #cameraChip,
  .app-shell.view-captura .camera-chip {
    top: calc(var(--ecp-top) + 62px) !important;
    right: calc(var(--ecp-right) + 220px) !important;
  }

  .app-shell.view-captura #liveStampPreview,
  .app-shell.view-captura .live-stamp-preview {
    left: calc(var(--ecp-left) + 28px) !important;
    right: auto !important;
    bottom: calc(var(--ecp-bottom) + 26px) !important;
    width: min(46vw, 640px) !important;
    max-width: min(46vw, 640px) !important;
    padding: 12px 16px !important;
    border-radius: 22px !important;
  }

  .app-shell.view-captura .live-stamp-main strong {
    font-size: clamp(42px, 6vw, 56px) !important;
  }

  .app-shell.view-captura .live-stamp-main span {
    font-size: 18px !important;
  }

  .app-shell.view-captura #zoomBar,
  .app-shell.view-captura .zoom-bar {
    right: calc(var(--ecp-right) + 156px) !important;
    top: 49% !important;
    gap: 10px !important;
    width: 58px !important;
  }

  .app-shell.view-captura #zoomBar button,
  .app-shell.view-captura .zoom-bar button {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    font-size: 15px !important;
  }

  .app-shell.view-captura #captureBtn {
    left: auto !important;
    right: calc(var(--ecp-right) + 50px) !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    min-height: 86px !important;
  }

  .app-shell.view-captura #switchCameraBtn {
    left: auto !important;
    right: calc(var(--ecp-right) + 122px) !important;
    bottom: auto !important;
    top: calc(50% + 108px) !important;

    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  .app-shell.view-captura #clearPhotoBtn {
    left: auto !important;
    right: calc(var(--ecp-right) + 44px) !important;
    bottom: auto !important;
    top: calc(50% + 108px) !important;

    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  #tinyToast {
    bottom: calc(var(--ecp-bottom) + 24px) !important;
  }
}

/* Celulares muy angostos */
@media (orientation: portrait) and (max-width: 390px) {
  .app-shell.view-captura #liveStampPreview,
  .app-shell.view-captura .live-stamp-preview {
    left: 18px !important;
    right: 104px !important;
    bottom: calc(var(--ecp-bottom) + 166px) !important;
  }

  .app-shell.view-captura #zoomBar,
  .app-shell.view-captura .zoom-bar {
    right: 14px !important;
  }

  .app-shell.view-captura #zoomBar button,
  .app-shell.view-captura .zoom-bar button {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    font-size: 15px !important;
  }

  .app-shell.view-captura #captureBtn {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    min-height: 86px !important;
  }
}
/* =========================================================
   FIX REAL V36 - USA LOS IDS REALES DE TUS ARCHIVOS
   ========================================================= */

:root {
  --safe-top-real: env(safe-area-inset-top, 0px);
  --safe-bottom-real: env(safe-area-inset-bottom, 0px);
  --safe-right-real: env(safe-area-inset-right, 0px);
  --safe-left-real: env(safe-area-inset-left, 0px);
}

/* Cámara a pantalla completa */
html body.app-shell.view-captura {
  background: #000 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html body.app-shell.view-captura .layout,
html body.app-shell.view-captura .camera-panel,
html body.app-shell.view-captura #cameraBox {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

/* Video full */
html body.app-shell.view-captura #video,
html body.app-shell.view-captura #preview,
html body.app-shell.view-captura #cameraBox video,
html body.app-shell.view-captura #cameraBox img {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  object-fit: cover !important;
  background: #000 !important;
}

/* Ocultar partes de web cuando estás en cámara */
html body.app-shell.view-captura .camera-panel .section-title,
html body.app-shell.view-captura .template-strip,
html body.app-shell.view-captura .gps-card,
html body.app-shell.view-captura .app-mode-panel,
html body.app-shell.view-captura .form-panel,
html body.app-shell.view-captura .records-panel,
html body.app-shell.view-captura .bottom-app-nav {
  display: none !important;
}

/* Barra Estado: eliminada de verdad */
html body.app-shell.view-captura #cameraStatus,
html body.app-shell.view-captura .cameraStatus,
html body.app-shell.view-captura .camera-status,
html body.app-shell.view-captura .status-line,
html body.app-shell.view-captura .status-bar,
html body.app-shell.view-captura .capture-status,
html body.app-shell.view-captura .field-status,
html body.app-shell.view-captura .bottom-status {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Header */
html body.app-shell.view-captura .topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 300 !important;

  min-height: calc(76px + var(--safe-top-real)) !important;
  padding: calc(12px + var(--safe-top-real)) 18px 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: linear-gradient(
    180deg,
    rgba(3, 8, 20, .82),
    rgba(3, 8, 20, .45),
    rgba(3, 8, 20, 0)
  ) !important;

  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

html body.app-shell.view-captura .topbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

html body.app-shell.view-captura .topbar h1 {
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 25px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html body.app-shell.view-captura .topbar h1::after {
  content: "LIVE";
  margin-left: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(5, 88, 56, .45);
  color: #72f7aa;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
}

html body.app-shell.view-captura .topbar .eyebrow,
html body.app-shell.view-captura .topbar .subtitle,
html body.app-shell.view-captura .header-actions,
html body.app-shell.view-captura #connectionBadge,
html body.app-shell.view-captura #appModeBadge,
html body.app-shell.view-captura #installBtn {
  display: none !important;
}

html body.app-shell.view-captura #menuBtn {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  border-radius: 24px !important;
  padding: 0 !important;
  font-size: 34px !important;
  color: #fff !important;
  background: rgba(9, 18, 38, .78) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.32) !important;
}

/* Chip GPS pequeño */
html body.app-shell.view-captura #cameraChip {
  position: fixed !important;
  top: calc(var(--safe-top-real) + 88px) !important;
  right: calc(var(--safe-right-real) + 16px) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 310 !important;

  width: auto !important;
  min-width: 64px !important;
  max-width: 112px !important;
  height: auto !important;

  padding: 7px 10px !important;
  border-radius: 999px !important;

  background: rgba(5, 38, 28, .68) !important;
  color: #eafff3 !important;
  border: 1px solid rgba(52, 211, 153, .24) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(10px) !important;

  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  pointer-events: none !important;
}

/* Marca en vertical: arriba del botón */
html body.app-shell.view-captura #liveStampPreview {
  position: fixed !important;
  z-index: 180 !important;
  pointer-events: none !important;

  left: 22px !important;
  right: 122px !important;
  bottom: calc(var(--safe-bottom-real) + 174px) !important;

  width: auto !important;
  max-width: none !important;

  padding: 12px 15px !important;
  border-radius: 22px !important;

  color: #fff !important;
  background: linear-gradient(135deg, rgba(5, 13, 28, .82), rgba(9, 31, 62, .66)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(12px) !important;
}

html body.app-shell.view-captura .live-stamp-brand {
  color: #fbbf24 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

html body.app-shell.view-captura .live-stamp-main {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

html body.app-shell.view-captura .live-stamp-main strong {
  font-size: clamp(42px, 10vw, 56px) !important;
  line-height: .9 !important;
  font-weight: 300 !important;
  letter-spacing: -.05em !important;
}

html body.app-shell.view-captura .live-stamp-main span {
  font-size: clamp(16px, 4vw, 20px) !important;
  font-weight: 900 !important;
}

html body.app-shell.view-captura .live-stamp-address,
html body.app-shell.view-captura .live-stamp-meta {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 14px !important;
  line-height: 1.28 !important;
}

html body.app-shell.view-captura .live-stamp-address {
  margin-top: 7px !important;
  font-weight: 900 !important;
}

html body.app-shell.view-captura .live-stamp-meta {
  margin-top: 4px !important;
  color: rgba(255,255,255,.9) !important;
}

/* Contenedor de botones sin blur ni fondo */
html body.app-shell.view-captura .actions.app-camera-controls {
  position: fixed !important;
  inset: auto 0 calc(var(--safe-bottom-real) + 24px) 0 !important;
  z-index: 230 !important;

  height: 122px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

/* Botones base */
html body.app-shell.view-captura .actions.app-camera-controls button {
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  background: rgba(10, 18, 35, .75) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(12px) !important;
}

/* Ocultar iniciar y GPS */
html body.app-shell.view-captura #startCameraBtn,
html body.app-shell.view-captura #gpsBtn {
  display: none !important;
}

/* Botón capturar vertical */
html body.app-shell.view-captura #captureBtn {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--safe-bottom-real) + 48px) !important;
  transform: translateX(-50%) !important;
  z-index: 350 !important;

  display: block !important;
  width: 92px !important;
  height: 92px !important;
  min-width: 92px !important;
  min-height: 92px !important;

  border-radius: 999px !important;
  background: radial-gradient(circle at 50% 42%, #ffd970 0%, #f59e0b 48%, #d97706 100%) !important;
  border: 8px solid rgba(255,255,255,.93) !important;
  outline: 7px solid rgba(245,158,11,.24) !important;
}

html body.app-shell.view-captura #captureBtn span {
  display: none !important;
}

/* Cambiar cámara vertical */
html body.app-shell.view-captura #switchCameraBtn {
  position: fixed !important;
  left: 30px !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--safe-bottom-real) + 60px) !important;
  z-index: 340 !important;

  display: block !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
}

html body.app-shell.view-captura #switchCameraBtn::before {
  content: "↺" !important;
  font-size: 28px !important;
  font-weight: 950 !important;
}

/* Galería vertical */
html body.app-shell.view-captura #clearPhotoBtn {
  position: fixed !important;
  right: 30px !important;
  left: auto !important;
  top: auto !important;
  bottom: calc(var(--safe-bottom-real) + 60px) !important;
  z-index: 340 !important;

  display: block !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  opacity: 1 !important;
}

html body.app-shell.view-captura #clearPhotoBtn::before {
  content: "🖼️" !important;
  font-size: 25px !important;
}

/* Zoom vertical */
html body.app-shell.view-captura #zoomBar {
  position: fixed !important;
  right: calc(var(--safe-right-real) + 18px) !important;
  top: 45% !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 330 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;

  width: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.app-shell.view-captura #zoomBar button {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;

  padding: 0 !important;
  border-radius: 999px !important;

  color: #fff !important;
  background: rgba(11,18,36,.78) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(12px) !important;

  font-size: 17px !important;
  font-weight: 950 !important;
}

html body.app-shell.view-captura #zoomBar button.active {
  color: #1f1600 !important;
  background: #f59e0b !important;
  border-color: #fbbf24 !important;
}

/* Toast pequeño */
#tinyToast {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(var(--safe-bottom-real) + 148px) !important;
  transform: translateX(-50%) translateY(12px) !important;
  z-index: 500 !important;

  padding: 10px 15px !important;
  border-radius: 999px !important;

  color: #fff !important;
  background: rgba(6,18,36,.9) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(12px) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  opacity: 0 !important;
  pointer-events: none !important;
  transition: .18s ease !important;
}

#tinyToast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* =========================================================
   HORIZONTAL REAL: usando la clase capture-landscape de tu JS
   ========================================================= */

html body.app-shell.view-captura.capture-landscape .topbar {
  justify-content: flex-start !important;
  min-height: calc(58px + var(--safe-top-real)) !important;
  padding: calc(8px + var(--safe-top-real)) 14px 8px !important;
}

html body.app-shell.view-captura.capture-landscape #menuBtn {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  font-size: 28px !important;
  border-radius: 18px !important;
}

html body.app-shell.view-captura.capture-landscape .topbar h1 {
  font-size: 19px !important;
}

/* En horizontal oculto chip GPS para que no ensucie */
html body.app-shell.view-captura.capture-landscape #cameraChip {
  display: none !important;
}

/* Marca horizontal */
html body.app-shell.view-captura.capture-landscape #liveStampPreview {
  left: calc(var(--safe-left-real) + 28px) !important;
  right: auto !important;
  bottom: calc(var(--safe-bottom-real) + 26px) !important;
  width: min(48vw, 670px) !important;
  max-width: min(48vw, 670px) !important;
  padding: 12px 16px !important;
  border-radius: 22px !important;
}

/* Zoom horizontal a la derecha */
html body.app-shell.view-captura.capture-landscape #zoomBar {
  right: calc(var(--safe-right-real) + 18px) !important;
  top: 50% !important;
  gap: 10px !important;
  width: 58px !important;
}

html body.app-shell.view-captura.capture-landscape #zoomBar button {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  font-size: 15px !important;
}

/* Botón foto horizontal: ya no al centro */
html body.app-shell.view-captura.capture-landscape #captureBtn {
  left: auto !important;
  right: calc(var(--safe-right-real) + 150px) !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;

  width: 86px !important;
  height: 86px !important;
  min-width: 86px !important;
  min-height: 86px !important;
}

/* Cambiar cámara horizontal */
html body.app-shell.view-captura.capture-landscape #switchCameraBtn {
  left: auto !important;
  right: calc(var(--safe-right-real) + 164px) !important;
  top: calc(50% + 108px) !important;
  bottom: auto !important;

  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
}

/* Galería horizontal */
html body.app-shell.view-captura.capture-landscape #clearPhotoBtn {
  left: auto !important;
  right: calc(var(--safe-right-real) + 164px) !important;
  top: calc(50% + 186px) !important;
  bottom: auto !important;

  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
}


/* =========================================================
   V37 EMERGENCIA REAL - CORRECCIÓN VISUAL DEFINITIVA
   Aplicado sobre tus IDs reales: cameraChip, liveStampPreview,
   zoomBar, startCameraBtn, switchCameraBtn, captureBtn, clearPhotoBtn.
   ========================================================= */

html, body {
  width: 100%;
  min-height: 100%;
}

/* Solo en Captura: pantalla tipo cámara */
body.app-shell.camera-native.view-captura {
  background: #000 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Mata de raíz la barra "Estado..." y el chip largo. Para hoy NO lo mostramos. */
body.app-shell.camera-native.view-captura #cameraChip,
body.app-shell.camera-native.view-captura .camera-chip,
body.app-shell.camera-native.view-captura #cameraStatus,
body.app-shell.camera-native.view-captura .status-line,
body.app-shell.camera-native.view-captura .cameraStatus,
body.app-shell.camera-native.view-captura .camera-status,
body.app-shell.camera-native.view-captura .capture-status,
body.app-shell.camera-native.view-captura .field-status,
body.app-shell.camera-native.view-captura .bottom-status {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Oculta paneles web dentro del modo captura */
body.app-shell.camera-native.view-captura .app-mode-panel,
body.app-shell.camera-native.view-captura .form-panel,
body.app-shell.camera-native.view-captura .records-panel,
body.app-shell.camera-native.view-captura .gps-card,
body.app-shell.camera-native.view-captura .template-strip,
body.app-shell.camera-native.view-captura .bottom-app-nav,
body.app-shell.camera-native.view-captura .camera-panel > .section-title {
  display: none !important;
}

/* Estructura full-screen */
body.app-shell.camera-native.view-captura .layout,
body.app-shell.camera-native.view-captura .camera-panel,
body.app-shell.camera-native.view-captura #cameraBox {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100vw !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

/* Cámara full */
body.app-shell.camera-native.view-captura #video,
body.app-shell.camera-native.view-captura #preview,
body.app-shell.camera-native.view-captura #cameraBox video,
body.app-shell.camera-native.view-captura #cameraBox img {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  object-fit: cover !important;
  background: #000 !important;
}

/* Header encima de cámara */
body.app-shell.camera-native.view-captura .topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 400 !important;
  min-height: calc(78px + env(safe-area-inset-top, 0px)) !important;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(2,8,23,.84), rgba(2,8,23,.42), rgba(2,8,23,0)) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

body.app-shell.camera-native.view-captura .topbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

body.app-shell.camera-native.view-captura .topbar h1 {
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.app-shell.camera-native.view-captura .topbar h1::after {
  content: "LIVE";
  margin-left: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(5,88,56,.48);
  color: #72f7aa;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
}

body.app-shell.camera-native.view-captura .eyebrow,
body.app-shell.camera-native.view-captura .subtitle,
body.app-shell.camera-native.view-captura .header-actions {
  display: none !important;
}

body.app-shell.camera-native.view-captura #menuBtn {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  padding: 0 !important;
  border-radius: 24px !important;
  font-size: 34px !important;
  color: #fff !important;
  background: rgba(9,18,38,.78) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.32) !important;
}

/* Marca de agua en pantalla: separada del botón */
body.app-shell.camera-native.view-captura #liveStampPreview {
  position: fixed !important;
  left: 22px !important;
  right: 124px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 184px) !important;
  z-index: 240 !important;
  width: auto !important;
  max-width: none !important;
  padding: 12px 15px !important;
  border-radius: 22px !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(5,13,28,.82), rgba(9,31,62,.66)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(12px) !important;
  pointer-events: none !important;
}

body.app-shell.camera-native.view-captura .live-stamp-brand {
  color: #fbbf24 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

body.app-shell.camera-native.view-captura .live-stamp-main {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

body.app-shell.camera-native.view-captura .live-stamp-main strong {
  font-size: clamp(42px, 10vw, 56px) !important;
  line-height: .9 !important;
  font-weight: 300 !important;
  letter-spacing: -.05em !important;
}

body.app-shell.camera-native.view-captura .live-stamp-main span {
  font-size: clamp(16px, 4vw, 20px) !important;
  font-weight: 900 !important;
}

body.app-shell.camera-native.view-captura .live-stamp-address,
body.app-shell.camera-native.view-captura .live-stamp-meta {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 14px !important;
  line-height: 1.28 !important;
}

body.app-shell.camera-native.view-captura .live-stamp-address {
  margin-top: 7px !important;
  font-weight: 900 !important;
}

body.app-shell.camera-native.view-captura .live-stamp-meta {
  margin-top: 4px !important;
  color: rgba(255,255,255,.9) !important;
}

/* Base invisible de controles */
body.app-shell.camera-native.view-captura .actions.app-camera-controls {
  position: fixed !important;
  inset: auto 0 calc(env(safe-area-inset-bottom, 0px) + 24px) 0 !important;
  height: 130px !important;
  z-index: 320 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

body.app-shell.camera-native.view-captura .actions.app-camera-controls button {
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  background: rgba(10,18,35,.75) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(12px) !important;
}

/* Cuando NO hay cámara activa: mostrar solo botón iniciar */
body.app-shell.camera-native.view-captura:not(.camera-is-active) #startCameraBtn {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 48px) !important;
  transform: translateX(-50%) !important;
  z-index: 500 !important;
  display: grid !important;
  place-items: center !important;
  width: 92px !important;
  height: 92px !important;
  min-width: 92px !important;
  min-height: 92px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 50% 42%, #ffd970 0%, #f59e0b 48%, #d97706 100%) !important;
  border: 8px solid rgba(255,255,255,.93) !important;
  outline: 7px solid rgba(245,158,11,.24) !important;
  color: #1f1600 !important;
  font-size: 34px !important;
}

body.app-shell.camera-native.view-captura:not(.camera-is-active) #captureBtn,
body.app-shell.camera-native.view-captura:not(.camera-is-active) #switchCameraBtn,
body.app-shell.camera-native.view-captura:not(.camera-is-active) #gpsBtn,
body.app-shell.camera-native.view-captura:not(.camera-is-active) #clearPhotoBtn,
body.app-shell.camera-native.view-captura:not(.camera-is-active) #zoomBar {
  display: none !important;
}

/* Cuando cámara está activa: ocultar iniciar */
body.app-shell.camera-native.view-captura.camera-is-active #startCameraBtn,
body.app-shell.camera-native.view-captura.camera-is-active #gpsBtn {
  display: none !important;
}

/* Botón capturar activo vertical */
body.app-shell.camera-native.view-captura.camera-is-active #captureBtn {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 48px) !important;
  transform: translateX(-50%) !important;
  z-index: 500 !important;
  display: block !important;
  width: 92px !important;
  height: 92px !important;
  min-width: 92px !important;
  min-height: 92px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 50% 42%, #ffd970 0%, #f59e0b 48%, #d97706 100%) !important;
  border: 8px solid rgba(255,255,255,.93) !important;
  outline: 7px solid rgba(245,158,11,.24) !important;
}

body.app-shell.camera-native.view-captura.camera-is-active #switchCameraBtn {
  position: fixed !important;
  left: 30px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 60px) !important;
  z-index: 480 !important;
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
}

body.app-shell.camera-native.view-captura.camera-is-active #switchCameraBtn::before {
  content: "↺" !important;
  font-size: 28px !important;
  font-weight: 950 !important;
}

body.app-shell.camera-native.view-captura.camera-is-active #clearPhotoBtn {
  position: fixed !important;
  right: 30px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 60px) !important;
  z-index: 480 !important;
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  opacity: 1 !important;
}

body.app-shell.camera-native.view-captura.camera-is-active #clearPhotoBtn::before {
  content: "🖼️" !important;
  font-size: 25px !important;
}

body.app-shell.camera-native.view-captura.camera-is-active #zoomBar {
  position: fixed !important;
  right: calc(env(safe-area-inset-right, 0px) + 18px) !important;
  top: 43% !important;
  transform: translateY(-50%) !important;
  z-index: 470 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.app-shell.camera-native.view-captura.camera-is-active #zoomBar button {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(11,18,36,.78) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(12px) !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

body.app-shell.camera-native.view-captura.camera-is-active #zoomBar button.active {
  color: #1f1600 !important;
  background: #f59e0b !important;
  border-color: #fbbf24 !important;
}

#tinyToast {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 148px) !important;
  transform: translateX(-50%) translateY(12px) !important;
  z-index: 900 !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(6,18,36,.9) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(12px) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: .18s ease !important;
}

#tinyToast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* HORIZONTAL */
body.app-shell.camera-native.view-captura.capture-landscape .topbar {
  justify-content: flex-start !important;
  min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px !important;
}

body.app-shell.camera-native.view-captura.capture-landscape #menuBtn {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  font-size: 28px !important;
  border-radius: 18px !important;
}

body.app-shell.camera-native.view-captura.capture-landscape .topbar h1 {
  font-size: 19px !important;
}

/* Marca horizontal abajo izquierda */
body.app-shell.camera-native.view-captura.capture-landscape #liveStampPreview {
  left: calc(env(safe-area-inset-left, 0px) + 28px) !important;
  right: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px) !important;
  width: min(48vw, 670px) !important;
  max-width: min(48vw, 670px) !important;
  padding: 12px 16px !important;
}

/* Horizontal sin cámara activa */
body.app-shell.camera-native.view-captura.capture-landscape:not(.camera-is-active) #startCameraBtn {
  left: auto !important;
  right: calc(env(safe-area-inset-right, 0px) + 150px) !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

/* Horizontal con cámara activa */
body.app-shell.camera-native.view-captura.capture-landscape.camera-is-active #captureBtn {
  left: auto !important;
  right: calc(env(safe-area-inset-right, 0px) + 150px) !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 86px !important;
  height: 86px !important;
  min-width: 86px !important;
  min-height: 86px !important;
}

body.app-shell.camera-native.view-captura.capture-landscape.camera-is-active #zoomBar {
  right: calc(env(safe-area-inset-right, 0px) + 18px) !important;
  top: 50% !important;
  gap: 10px !important;
  width: 58px !important;
}

body.app-shell.camera-native.view-captura.capture-landscape.camera-is-active #zoomBar button {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  font-size: 15px !important;
}

body.app-shell.camera-native.view-captura.capture-landscape.camera-is-active #switchCameraBtn {
  left: auto !important;
  right: calc(env(safe-area-inset-right, 0px) + 164px) !important;
  top: calc(50% + 108px) !important;
  bottom: auto !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
}

body.app-shell.camera-native.view-captura.capture-landscape.camera-is-active #clearPhotoBtn {
  left: auto !important;
  right: calc(env(safe-area-inset-right, 0px) + 164px) !important;
  top: calc(50% + 186px) !important;
  bottom: auto !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
}

/* Bloqueo menú raro del video */
body.app-shell.camera-native.view-captura video,
body.app-shell.camera-native.view-captura canvas,
body.app-shell.camera-native.view-captura img,
body.app-shell.camera-native.view-captura #cameraBox,
body.app-shell.camera-native.view-captura #cameraBox * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  touch-action: manipulation !important;
}
/* =========================================================
   FIX V38 FINAL - CAPTURA LIMPIA + TIMEMARK MOVIBLE
   Pegar al FINAL de styles.css
   ========================================================= */

.app-shell.view-captura #cameraStatus,
.app-shell.view-captura .cameraStatus,
.app-shell.view-captura .camera-status,
.app-shell.view-captura .status-line,
.app-shell.view-captura .status-bar,
.app-shell.view-captura .capture-status,
.app-shell.view-captura .field-status,
.app-shell.view-captura .bottom-status {
  display: none !important;
}

/* En modo captura limpiamos lo innecesario */
.app-shell.view-captura .template-strip,
.app-shell.view-captura .gps-card,
.app-shell.view-captura .camera-panel .section-title,
.app-shell.view-captura .camera-panel > .section-title {
  display: none !important;
}

/* Cámara full screen */
.app-shell.view-captura .camera-panel {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  border-radius: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.app-shell.view-captura #cameraBox,
.app-shell.view-captura .camera-box {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.app-shell.view-captura #video,
.app-shell.view-captura #preview,
.app-shell.view-captura #canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Chip GPS pequeño: arriba derecha */
.app-shell.view-captura #cameraChip {
  position: fixed !important;
  top: calc(86px + env(safe-area-inset-top)) !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 70 !important;
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: rgba(15,23,42,.60) !important;
  color: #fff !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.20) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: calc(100vw - 28px) !important;
}

/* Marca de agua / timemark */
.app-shell.view-captura .live-stamp-preview {
  position: fixed !important;
  left: 14px !important;
  right: 14px !important;
  bottom: calc(138px + env(safe-area-inset-bottom)) !important;
  z-index: 60 !important;
  max-width: none !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(10,18,32,.18), rgba(10,18,32,.58)) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.22) !important;
  pointer-events: auto !important;
  touch-action: none !important;
  cursor: grab !important;
  user-select: none !important;
}

.app-shell.view-captura .live-stamp-preview.dragging {
  cursor: grabbing !important;
  box-shadow: 0 20px 38px rgba(0,0,0,.32) !important;
}

.app-shell.view-captura .live-stamp-brand {
  color: #fbbf24 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.app-shell.view-captura .live-stamp-main {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 4px !important;
}

.app-shell.view-captura .live-stamp-main strong {
  font-size: clamp(34px, 7vw, 56px) !important;
  line-height: .92 !important;
  font-weight: 300 !important;
}

.app-shell.view-captura .live-stamp-main span {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.app-shell.view-captura .live-stamp-address {
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  margin-top: 3px !important;
}

.app-shell.view-captura .live-stamp-meta {
  font-size: 12px !important;
  line-height: 1.25 !important;
  opacity: .95 !important;
  margin-top: 4px !important;
}

/* Zoom siempre limpio a la derecha */
.app-shell.view-captura .zoom-bar {
  position: fixed !important;
  top: 50% !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 75 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
}

.app-shell.view-captura .zoom-bar button {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(15,23,42,.62) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(12px) !important;
}

.app-shell.view-captura .zoom-bar button.active {
  background: #f59e0b !important;
  color: #111827 !important;
  border-color: #fbbf24 !important;
}

/* CONTROLES DE CÁMARA: retrato */
.app-shell.view-captura .actions.app-camera-controls {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  top: auto !important;
  width: 100% !important;
  height: 110px !important;
  z-index: 80 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  pointer-events: none !important;
}

.app-shell.view-captura .actions.app-camera-controls button {
  position: absolute !important;
  pointer-events: auto !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(15,23,42,.58) !important;
  color: #fff !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.22) !important;
}

.app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn) {
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.app-shell.view-captura #captureBtn.shutter-btn {
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 78px !important;
  height: 78px !important;
  min-height: 78px !important;
  max-width: 78px !important;
  border-radius: 999px !important;
  border: 8px solid rgba(255,255,255,.96) !important;
  background: radial-gradient(circle at 50% 42%, #ffd970 0, #f59e0b 48%, #d97706 100%) !important;
  outline: 5px solid rgba(245,158,11,.34) !important;
  box-shadow: 0 16px 34px rgba(245,158,11,.30) !important;
  padding: 0 !important;
  font-size: 0 !important;
}

.app-shell.view-captura #captureBtn.shutter-btn span {
  display: none !important;
}

.app-shell.view-captura #startCameraBtn { left: 14px !important; bottom: 58px !important; }
.app-shell.view-captura #gpsBtn         { left: 14px !important; bottom: 0 !important; }
.app-shell.view-captura #clearPhotoBtn  { right: 14px !important; bottom: 58px !important; }
.app-shell.view-captura #switchCameraBtn{ right: 14px !important; bottom: 0 !important; }

/* Cuando la cámara ya arrancó, ocultamos iniciar */
.app-shell.view-captura.camera-running #startCameraBtn {
  display: none !important;
}

/* LANDSCAPE */
.app-shell.view-captura.capture-landscape .live-stamp-preview {
  left: 16px !important;
  right: auto !important;
  width: min(48vw, 540px) !important;
  max-width: min(48vw, 540px) !important;
  bottom: 18px !important;
}

.app-shell.view-captura.capture-landscape .zoom-bar {
  right: 96px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

.app-shell.view-captura.capture-landscape .actions.app-camera-controls {
  left: auto !important;
  right: 10px !important;
  top: 50% !important;
  bottom: auto !important;
  width: 82px !important;
  height: 308px !important;
  transform: translateY(-50%) !important;
}

.app-shell.view-captura.capture-landscape #captureBtn.shutter-btn {
  left: auto !important;
  right: 0 !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

.app-shell.view-captura.capture-landscape #startCameraBtn {
  left: auto !important;
  right: 14px !important;
  top: 0 !important;
  bottom: auto !important;
}

.app-shell.view-captura.capture-landscape #gpsBtn {
  left: auto !important;
  right: 14px !important;
  top: 64px !important;
  bottom: auto !important;
}

.app-shell.view-captura.capture-landscape #clearPhotoBtn {
  left: auto !important;
  right: 14px !important;
  bottom: 64px !important;
}

.app-shell.view-captura.capture-landscape #switchCameraBtn {
  left: auto !important;
  right: 14px !important;
  bottom: 0 !important;
}

@media (max-width: 380px) {
  .app-shell.view-captura #captureBtn.shutter-btn {
    width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    border-width: 7px !important;
  }

  .app-shell.view-captura .zoom-bar button,
  .app-shell.view-captura .actions.app-camera-controls button:not(.shutter-btn) {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }

  .app-shell.view-captura .live-stamp-preview {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(132px + env(safe-area-inset-bottom)) !important;
  }
}

/* V41 HOTFIX */
body.view-captura #cameraStatus,body.view-captura .status-line,body.view-captura .camera-status,body.view-captura .capture-status,body.view-captura .field-status,body.view-captura .bottom-status,.app-shell.view-captura #cameraStatus,.app-shell.view-captura .status-line,.app-shell.view-captura .camera-status,.app-shell.view-captura .capture-status,.app-shell.view-captura .field-status,.app-shell.view-captura .bottom-status{display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;overflow:hidden!important;pointer-events:none!important}
#v40UiBar{position:fixed!important;left:16px!important;top:calc(88px + env(safe-area-inset-top,0px))!important;z-index:960!important;display:flex!important;gap:8px!important}
#v40UiBar button{min-height:38px!important;padding:8px 13px!important;border-radius:999px!important;font-size:12px!important;font-weight:950!important}
#v41StartCameraBig{position:fixed!important;left:50%!important;top:48%!important;transform:translate(-50%,-50%)!important;z-index:940!important;min-width:min(82vw,360px)!important;min-height:62px!important;padding:14px 20px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.18)!important;background:linear-gradient(135deg,#fbbf24,#f59e0b)!important;color:#1f1600!important;font-size:18px!important;font-weight:950!important;box-shadow:0 18px 42px rgba(245,158,11,.32),0 16px 38px rgba(0,0,0,.32)!important;backdrop-filter:blur(12px)!important}
body.camera-running #v41StartCameraBig{display:none!important} body.v40-edit-ui #v41StartCameraBig{opacity:.35!important;pointer-events:none!important}
body.view-captura #emptyCamera,body.app-shell.view-captura #emptyCamera{background:rgba(0,0,0,.18)!important;z-index:120!important;pointer-events:none!important}
body:not(.v40-edit-ui) .v40-movable{outline:none!important} body.v40-edit-ui .v40-movable{outline:2px dashed rgba(251,191,36,.9)!important;outline-offset:4px!important}
body.view-captura #liveStampPreview,body.app-shell.view-captura #liveStampPreview{z-index:730!important;width:min(calc(100vw - 24px),560px)!important;max-width:calc(100vw - 24px)!important;touch-action:none!important;pointer-events:auto!important}
body.view-captura.capture-portrait #liveStampPreview,body.app-shell.view-captura.capture-portrait #liveStampPreview{left:12px!important;right:auto!important;bottom:calc(146px + env(safe-area-inset-bottom,0px))!important;width:calc(100vw - 24px)!important}
body.view-captura.capture-portrait #zoomBar,body.app-shell.view-captura.capture-portrait #zoomBar{right:14px!important;top:32dvh!important;z-index:750!important}
body.view-captura.capture-portrait #captureBtn,body.app-shell.view-captura.capture-portrait #captureBtn{left:calc(50vw - 39px)!important;top:calc(100dvh - 104px - env(safe-area-inset-bottom,0px))!important;z-index:760!important}
body.view-captura.capture-portrait #gpsBtn,body.app-shell.view-captura.capture-portrait #gpsBtn{left:16px!important;top:calc(100dvh - 92px - env(safe-area-inset-bottom,0px))!important}
body.view-captura.capture-portrait #switchCameraBtn,body.app-shell.view-captura.capture-portrait #switchCameraBtn{left:calc(100vw - 148px)!important;right:auto!important;top:calc(100dvh - 92px - env(safe-area-inset-bottom,0px))!important}
body.view-captura.capture-portrait #clearPhotoBtn,body.app-shell.view-captura.capture-portrait #clearPhotoBtn{left:calc(100vw - 82px)!important;right:auto!important;top:calc(100dvh - 92px - env(safe-area-inset-bottom,0px))!important}
body.view-captura:not(.camera-running) #startCameraBtn,body.app-shell.view-captura:not(.camera-running) #startCameraBtn{display:none!important}
body.view-captura.capture-landscape #liveStampPreview,body.app-shell.view-captura.capture-landscape #liveStampPreview{left:16px!important;bottom:16px!important;width:min(46vw,540px)!important}
body.view-captura.capture-landscape #zoomBar,body.app-shell.view-captura.capture-landscape #zoomBar{right:112px!important;top:calc(50dvh - 128px)!important}
body.view-captura.capture-landscape #captureBtn,body.app-shell.view-captura.capture-landscape #captureBtn{left:calc(100vw - 100px - env(safe-area-inset-right,0px))!important;top:calc(50dvh - 39px)!important}
body.view-captura.capture-landscape #clearPhotoBtn,body.app-shell.view-captura.capture-landscape #clearPhotoBtn{left:calc(100vw - 88px - env(safe-area-inset-right,0px))!important;top:calc(50dvh + 50px)!important}
body.view-captura.capture-landscape #switchCameraBtn,body.app-shell.view-captura.capture-landscape #switchCameraBtn{left:calc(100vw - 88px - env(safe-area-inset-right,0px))!important;top:calc(50dvh + 112px)!important}