: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;}
}