:root {
  --bg: #090A0F;
  --bg-elevated: #11131A;
  --bg-soft: #161922;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-strong: rgba(255, 255, 255, 0.07);
  --chat: #F4F5F8;
  --text: #F5F6FA;
  --text-secondary: #9AA0B4;
  --text-tertiary: #6B728A;
  --text-dark: #151821;
  --text-dark-sec: #6B7280;
  --accent: #6E5BFF;
  --accent-2: #8B7CFF;
  --accent-soft: rgba(110, 91, 255, 0.16);
  --accent-ring: rgba(110, 91, 255, 0.35);
  --green: #22C55E;
  --green-soft: rgba(34, 197, 94, 0.16);
  --danger: #F87171;
  --warning: #FBBF24;
  --line: rgba(255, 255, 255, 0.06);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --nav-h: 76px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #05060A;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, textarea, input { font-family: inherit; }

#app {
  height: 100vh;
  height: 100svh;
  max-width: 430px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  position: relative;
  background: var(--bg);
}

.view {
  display: none;
  flex-direction: column;
  height: 100%;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 1;
  animation: view-in .38s var(--ease);
}
.view.active { display: flex; }
#view-resumen.active { padding-bottom: env(safe-area-inset-bottom, 0px); }
#app.hide-nav #bottom-nav { display: none; }
#app.hide-nav .view.active { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* Respaldo: si el chat de registro está activo, la nav no puede tapar Enviar
   (p. ej. teclado móvil / showView que olvidó hide-nav). */
#app:has(#view-registro.chat-mode.active) #bottom-nav,
#app:has(#view-resumen.active) #bottom-nav {
  display: none !important;
  pointer-events: none;
}
#app:has(#view-registro.chat-mode.active) #view-registro.active,
#app:has(#view-resumen.active) #view-resumen.active {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn img { width: 17px; height: 17px; opacity: .85; filter: invert(1); }
.icon-btn.ghost { background: rgba(255,255,255,0.05); }
.icon-btn svg { stroke: currentColor; opacity: .85; }

::placeholder { color: var(--text-tertiary); }

/* ============================================================ */
/* Dashboard                                                      */
/* ============================================================ */

#view-dashboard {
  padding: 0;
  overflow: hidden;
}

.dash-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 20px calc(12px + var(--nav-h) + env(safe-area-inset-bottom, 0px));
  min-height: 0;
  overflow-y: auto;
}

.dash-hero {
  --hero-img: url("./branding/hero-earth-night4.webp");
  position: absolute;
  inset: 0 0 38% 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #071018;
}
/* Placeholder borroso altiro (0.8 KB) mientras llega el WebP. */
.dash-hero::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 0;
  background-image: url("./branding/hero-earth-night4-tiny.jpg");
  background-size: cover;
  background-position: center 48%;
  filter: blur(16px) saturate(1.15);
  transform: scale(1.12);
}
.dash-hero > picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}
.dash-hero-photo,
.dash-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  display: block;
  filter: saturate(1.08) contrast(1.04);
  will-change: transform, opacity;
  transform-origin: 50% 45%;
  animation: hero-drift-far 15s ease-in-out infinite alternate;
}
.dash-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 48%;
}
.dash-hero-img {
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.dash-hero.is-ready .dash-hero-img { opacity: 1; }
.dash-hero.is-ready::before {
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
/* Capa cercana: más recorrido = profundidad (misma URL = 1 descarga). */
.dash-hero-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.42;
  mix-blend-mode: screen;
  pointer-events: none;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 40%;
  filter: saturate(1.2) contrast(1.1) brightness(1.25);
  transform-origin: 50% 40%;
  animation: hero-drift-near 15s ease-in-out infinite alternate;
}
@keyframes hero-drift-far {
  0%   { transform: scale(1.1) translate3d(-4%, -1.5%, 0); }
  100% { transform: scale(1.22) translate3d(4.5%, 2%, 0); }
}
@keyframes hero-drift-near {
  0%   { transform: scale(1.3) translate3d(-12%, -4%, 0); }
  100% { transform: scale(1.55) translate3d(13%, 6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-hero-img,
  .dash-hero-photo { animation: none; transform: scale(1.08); }
  .dash-hero-glow { opacity: 0.2; animation: none; transform: scale(1.18); }
}
.dash-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(5,6,10,0.42) 0%, rgba(5,6,10,0.28) 20%, rgba(5,6,10,0.5) 48%, rgba(5,6,10,0.88) 78%, rgba(5,6,10,1) 100%),
    linear-gradient(90deg, rgba(5,6,10,0.35), transparent 50%);
}

/* Fondo animado en Nuevo registro (solo picker; se oculta en chat) */
#view-registro {
  position: relative;
  overflow: hidden;
}
#view-registro > .registro-hero {
  inset: 0;
}
#view-registro > .registro-hero .dash-hero-photo {
  filter: saturate(0.85) contrast(0.96) brightness(0.62);
  animation-duration: 36s;
}
#view-registro > .registro-hero .dash-hero-glow {
  opacity: 0.16;
  animation-duration: 36s;
}
#view-registro > .registro-hero .dash-hero-veil {
  background:
    linear-gradient(180deg, rgba(5,6,10,0.72) 0%, rgba(5,6,10,0.62) 18%, rgba(5,6,10,0.74) 45%, rgba(5,6,10,0.94) 78%, rgba(5,6,10,0.99) 100%),
    linear-gradient(90deg, rgba(5,6,10,0.55), transparent 58%);
}

/* Tipografía / jerarquía del picker */
#view-registro .topbar-titles h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
#view-registro .topbar-titles p {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(245, 246, 250, 0.62);
  font-weight: 400;
}
#view-registro .picker .section-label {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(245, 246, 250, 0.92);
}
#view-registro .section-sublabel {
  margin: -6px 0 12px;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 400;
  color: rgba(154, 160, 180, 0.72);
}
#view-registro #tipo-registro-block {
  margin-top: -4px;
}
#view-registro #tipo-registro-block .section-label {
  margin-bottom: 8px;
}

/* Módulos = tarjetas verticales con label interno */
#view-registro .system-chip-row {
  gap: 10px;
  padding: 4px 2px 8px;
}
#view-registro .system-chip {
  width: 76px;
}
#view-registro .system-chip .chip-face {
  width: 76px;
  height: 104px;
  border-radius: 20px;
  padding: 4px 3px 8px;
  position: relative;
  background:
    linear-gradient(165deg, rgba(36, 40, 56, 0.72) 0%, rgba(14, 16, 24, 0.78) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.38),
    0 3px 6px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -10px 18px rgba(0, 0, 0, 0.22);
  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease),
    background .28s var(--ease);
}
#view-registro .system-chip .chip-face img {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  align-self: stretch;
  object-fit: contain;
  object-position: center;
  opacity: 0.92;
  filter: none;
  mix-blend-mode: screen;
  transition: opacity .25s ease, transform .28s var(--ease);
}
#view-registro .system-chip .chip-face .icon-mask {
  width: 42px;
  height: 42px;
  margin: auto 0;
  flex: 1;
}
#view-registro .system-chip .chip-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(184, 190, 210, 0.78);
  z-index: 1;
}
#view-registro .system-chip.active {
  width: 80px;
}
#view-registro .system-chip.active .chip-face {
  width: 80px;
  height: 110px;
  border-radius: 22px;
  padding: 4px 3px 8px;
  overflow: hidden;
  background:
    linear-gradient(165deg, rgba(48, 40, 78, 0.72) 0%, rgba(18, 14, 36, 0.82) 100%) !important;
  border-color: rgba(138, 112, 255, 0.78);
  box-shadow:
    0 0 0 1px rgba(138, 112, 255, 0.2),
    0 0 30px rgba(110, 91, 255, 0.34),
    0 16px 34px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -12px 20px rgba(0, 0, 0, 0.28);
  transform: translateY(-3px);
}
#view-registro .system-chip.active .chip-face::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 0;
  height: 2.5px;
  border-radius: 2px 2px 0 0;
  background: #8A70FF;
  box-shadow: 0 0 10px rgba(138, 112, 255, 0.7);
}
#view-registro .system-chip.active .chip-face img {
  opacity: 1;
  filter: none;
  transform: none;
  width: 100%;
  height: auto;
}
#view-registro .system-chip.active .chip-label {
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding-bottom: 0;
}
#view-registro .system-chip.disabled {
  opacity: 0.58;
}
#view-registro .system-chip.disabled .chip-face {
  background: rgba(14, 16, 22, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#view-registro .system-chip.disabled .chip-label {
  color: rgba(154, 160, 180, 0.55);
}
#view-registro .system-chip:not(.active):not(.disabled):active .chip-face {
  transform: scale(0.96);
}

/* Tarjetas de tipo: más compactas, icono grande, relieve 3D */
#view-registro .tipo-registro-list {
  gap: 8px;
}
#view-registro .tipo-registro-item {
  gap: 14px;
  padding: 12px 14px;
  min-height: 0;
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(28, 32, 44, 0.62) 0%, rgba(12, 14, 22, 0.72) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.36),
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -8px 16px rgba(0, 0, 0, 0.22);
}
#view-registro .tipo-registro-item.selected,
#view-registro .tipo-registro-item:not(.disabled):hover {
  background:
    linear-gradient(165deg, rgba(34, 36, 52, 0.72) 0%, rgba(16, 18, 28, 0.8) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.42),
    0 3px 6px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -8px 16px rgba(0, 0, 0, 0.24);
  transform: translateY(-1px);
}
#view-registro .tipo-registro-item .tipo-icon {
  width: 58px;
  height: 58px;
  border-radius: 15px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.22) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #8A70FF;
}
#view-registro .tipo-registro-item.selected .tipo-icon {
  background:
    linear-gradient(160deg, rgba(138, 112, 255, 0.22) 0%, rgba(40, 30, 70, 0.45) 100%);
  border-color: rgba(138, 112, 255, 0.32);
  color: #A78BFF;
}
#view-registro .tipo-registro-item .tipo-icon svg {
  width: 32px;
  height: 32px;
}
#view-registro .tipo-registro-item .tipo-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
#view-registro .tipo-registro-item .tipo-icon.has-img {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
}
#view-registro .tipo-registro-item .tipo-icon.has-img img {
  width: 42px;
  height: 42px;
}
#view-registro .tipo-registro-item .tipo-icon .icon-mask {
  width: 28px;
  height: 28px;
  background-color: #8A70FF;
}
#view-registro .tipo-registro-item .tipo-text strong {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}
#view-registro .tipo-registro-item .tipo-text .tipo-desc {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 400;
  color: rgba(184, 190, 210, 0.72);
  text-transform: none;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#view-registro .tipo-registro-item .tipo-text .tipo-meta {
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 400;
  color: rgba(107, 114, 138, 0.9);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-registro .tipo-registro-item .tipo-arrow {
  color: #8A70FF;
  opacity: 0.85;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}
#view-registro .tipo-registro-item .tipo-arrow svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.6;
}
#view-registro .picker-hint {
  background: rgba(18, 20, 28, 0.42);
  border-color: rgba(110, 91, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 4px;
}
#view-registro > .topbar,
#view-registro > .intel-header,
#view-registro > .picker,
#view-registro > .chat-surface,
#view-registro > #manual-form,
#view-registro > #offline-banner,
#view-registro > #recording-indicator,
#view-registro > #recording-limit-toast,
#view-registro > #dropzone-overlay,
#view-registro > .ai-ready-bar {
  position: relative;
  z-index: 1;
}
/* Composer por encima de la nav: si se solapan (teclado), Enviar gana el toque. */
#view-registro > .composer {
  position: relative;
  z-index: 45;
}
#view-registro.chat-mode > .registro-hero,
#view-registro.manual-mode:not(.regma-mode):not(.playas-mode) > .registro-hero {
  display: none;
}
/* REGMA sí mantiene el fondo animado detrás del checklist (no queda negro plano). */
#view-registro.regma-mode > .registro-hero .dash-hero-veil {
  background:
    linear-gradient(180deg, rgba(5,6,10,0.72) 0%, rgba(5,6,10,0.62) 20%, rgba(5,6,10,0.78) 48%, rgba(5,6,10,0.94) 78%, rgba(5,6,10,0.99) 100%),
    linear-gradient(90deg, rgba(5,6,10,0.55), transparent 55%);
}

.dash-header,
.dash-greeting,
.dash-actions {
  position: relative;
  z-index: 1;
}

.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-top: 2px;
}

.dash-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.92);
}
.dash-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
  padding: 3px;
}
.dash-logo {
  height: 36px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
  display: block;
}

.dash-greeting {
  margin-bottom: 20px;
  max-width: 320px;
}
.dash-greeting h1 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.brand-accent {
  font-weight: 600;
  background: linear-gradient(120deg, #BAE6FD 0%, #60A5FA 60%, #3B82F6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dash-lede {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  font-weight: 400;
  max-width: 260px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

.dash-actions-heading {
  margin: auto 0 12px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.dash-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
}

.action-primary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: 1.5px solid rgba(129, 140, 248, 0.65);
  border-radius: 22px;
  padding: 15px 16px;
  background:
    linear-gradient(145deg, rgba(110, 91, 255, 0.28), rgba(20, 22, 34, 0.65) 55%);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 0 0 1px rgba(129,140,248,0.15) inset,
    0 0 22px rgba(99, 102, 241, 0.35),
    0 18px 40px rgba(110, 91, 255, 0.22);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.action-primary:active { transform: scale(0.985); }
.action-primary-glow {
  position: absolute;
  inset: -40% auto auto -20%;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(139,124,255,0.45), transparent 70%);
  pointer-events: none;
}
.action-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.action-icon img { width: 21px; height: 21px; filter: none; }
.action-icon.sm {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
.action-icon.sm img { width: 19px; height: 19px; filter: invert(1); opacity: .85; }
.action-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  z-index: 1;
}
.action-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.action-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 400;
}
.action-chevron {
  color: rgba(255,255,255,0.45);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.action-secondary-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-secondary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: 1.5px solid rgba(129, 140, 248, 0.22);
  border-radius: 20px;
  padding: 12px 16px;
  background: linear-gradient(145deg, rgba(99,102,241,0.08), rgba(20,22,34,0.5) 60%);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.12);
  transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.action-secondary:hover { border-color: rgba(129,140,248,0.4); background: linear-gradient(145deg, rgba(99,102,241,0.14), rgba(20,22,34,0.55) 60%); }
.action-secondary:active { transform: scale(0.985); background: var(--surface-strong); }
.action-secondary .action-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; }
.action-secondary .action-sub { font-size: 12px; color: var(--text-tertiary); font-weight: 400; }
.action-secondary .action-chevron { color: rgba(255,255,255,0.28); }

/* ============================================================ */
/* Topbar                                                         */
/* ============================================================ */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 14px;
  flex-shrink: 0;
  background: transparent;
}
.topbar-titles { flex: 1; min-width: 0; }
.topbar-titles.centered { text-align: center; padding-inline: 36px; }
.topbar-titles h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.topbar-titles p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}
.topbar-close {
  position: absolute;
  right: 16px;
  top: 12px;
}
#view-resumen .topbar { position: relative; justify-content: center; }

#view-registro .topbar {
  position: relative;
  justify-content: center;
  padding: 14px 16px 10px;
}
#view-registro .topbar-titles { text-align: center; padding-inline: 44px; }
#view-registro #registro-back-btn {
  position: absolute;
  left: 16px;
  top: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
#view-registro #registro-back-btn img {
  opacity: 0.9;
}
#view-registro .system-avatar { position: absolute; right: 16px; top: 10px; }

/* Registro en curso: título a la altura del logo, más espacio para chat/form. */
#view-registro.chat-mode .topbar,
#view-registro.manual-mode:not(.playas-mode):not(.regma-mode) .topbar {
  align-items: center;
  min-height: 48px;
  padding: 6px 14px 4px;
}
#view-registro.chat-mode .topbar-titles h2,
#view-registro.manual-mode:not(.playas-mode):not(.regma-mode) .topbar-titles h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
#view-registro.chat-mode .topbar-titles p,
#view-registro.manual-mode:not(.playas-mode):not(.regma-mode) .topbar-titles p {
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-registro.chat-mode #registro-back-btn,
#view-registro.manual-mode:not(.playas-mode):not(.regma-mode) #registro-back-btn {
  top: 50%;
  transform: translateY(-50%);
}
#view-registro.chat-mode #registro-back-btn:active,
#view-registro.manual-mode:not(.playas-mode):not(.regma-mode) #registro-back-btn:active {
  transform: translateY(-50%) scale(0.94);
}
#view-registro.chat-mode .system-avatar,
#view-registro.manual-mode:not(.playas-mode):not(.regma-mode) .system-avatar {
  top: 50%;
  transform: translateY(-50%);
}

.system-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  padding: 4px;
}
.system-avatar[hidden] { display: none !important; }
.system-avatar img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================ */
/* Intelligent progress header                                    */
/* ============================================================ */

.intel-header {
  display: none;
  flex-shrink: 0;
  margin: 0;
  padding: 8px 14px 8px;
  border-radius: 0;
  background: var(--bg-elevated);
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  animation: header-in .3s var(--ease);
  width: 100%;
  box-sizing: border-box;
}
.intel-header.visible { display: block; }

@keyframes header-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.progress-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  min-height: 22px;
}
.progress-hero-main {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
  min-width: 0;
}
.progress-pct-num {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.progress-hero-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.progress-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
  margin-bottom: 0;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .5s var(--ease);
}
.progress-fill.pulse {
  animation: fill-pulse .5s var(--ease);
}
@keyframes fill-pulse {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.25); }
  100% { filter: brightness(1); }
}

.progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  min-width: 0;
  gap: 4px;
  margin-top: 8px;
  padding: 0;
}
.progress-steps::before {
  display: none;
}
.progress-step {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--text-tertiary);
  min-width: 0;
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: color .25s ease;
  background: none;
  border: 0;
  padding: 2px 1px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.progress-step .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 0;
  font-weight: 700;
  color: transparent;
  flex-shrink: 0;
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.progress-step.done .dot {
  background: var(--green);
  border-color: var(--green);
  color: transparent;
}
.progress-step.done { color: var(--text-secondary); }
.progress-step.current { color: var(--text); font-weight: 700; }
.progress-step.current .dot {
  background: var(--accent-2);
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.progress-step-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
.progress-step.synced { color: #5eead4; }
.progress-step.synced .dot,
.progress-step.done.synced .dot {
  background: #0d9488;
  border-color: #14b8a6;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22);
}
.progress-step.sensor-loading { color: #5eead4; }
.progress-step.sensor-loading .dot,
.progress-step.current.sensor-loading .dot,
.progress-step.done.sensor-loading .dot {
  background: var(--bg);
  border-color: #2dd4bf;
  color: transparent;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.28);
  animation: sensor-dot-pulse 1.15s ease-in-out infinite;
}
@keyframes sensor-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(45, 212, 191, 0); }
}
.registro-sync-toast {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #99f6e4;
  text-align: center;
  line-height: 1.3;
  transition: max-height .28s var(--ease), opacity .22s ease, margin .28s ease;
  pointer-events: none;
}
.registro-sync-toast.visible {
  max-height: 32px;
  opacity: 1;
  margin-top: 8px;
}
.intel-header.sensor-loading .registro-sync-toast.visible::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #2dd4bf;
  vertical-align: 1px;
  animation: sensor-toast-dot 1s ease-in-out infinite;
}
@keyframes sensor-toast-dot {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.progress-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  flex-wrap: nowrap;
}
.intel-expand {
  margin-top: 0;
  padding: 7px 10px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 100%;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  text-align: left;
  min-height: 34px;
}
.intel-expand:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
}
.intel-expand-copy {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
#progress-fields-label {
  white-space: nowrap;
  flex-shrink: 0;
}
.intel-expand-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.intel-expand-hint::before {
  content: "·";
  margin-right: 6px;
  color: rgba(255,255,255,0.28);
  font-weight: 600;
}
.intel-expand-chevron { flex-shrink: 0; transition: transform .25s var(--ease); opacity: .7; }
.intel-expand.open {
  color: var(--text);
  border-color: rgba(91, 75, 224, 0.45);
  background: rgba(91, 75, 224, 0.12);
}
.intel-expand.open .intel-expand-chevron { transform: rotate(180deg); opacity: 1; }
#progress-goto-resumen-btn {
  display: none !important;
}
.registro-mode-switch {
  flex-shrink: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 650;
  padding: 2px 0;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.18);
  transition: color .15s ease, text-decoration-color .15s ease;
  line-height: 1.2;
  max-width: none;
  text-align: right;
  margin-left: auto;
}
.registro-mode-switch:hover {
  color: #6EE7B7;
  text-decoration-color: rgba(110, 231, 183, 0.55);
}
.registro-mode-switch[hidden] { display: none !important; }

.ai-ready-bar {
  flex-shrink: 0;
  margin: 0;
  padding: 0 14px 10px;
  background: transparent;
  z-index: 5;
}
.ai-ready-bar[hidden] { display: none !important; }
#view-registro:not(.chat-mode) .ai-ready-bar {
  display: none !important;
}
#view-registro.chat-mode .ai-ready-bar {
  background: var(--chat);
  padding: 0 14px calc(10px + env(safe-area-inset-bottom, 0px));
}
.ai-ready-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: #052e1c;
  background: linear-gradient(145deg, #34D399, #059669);
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.28);
}
.ai-ready-btn:hover { filter: brightness(1.05); }
#progress-detail-body {
  display: none;
  margin-top: 10px;
  max-height: min(34vh, 280px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
}
#progress-detail-body.visible { display: block; }
#progress-detail-content { padding: 8px 10px 10px; }
.intel-header.detail-open.swiping-close {
  transform: translateY(calc(var(--detail-pull, 0px) * 0.2));
  opacity: calc(1 - (var(--detail-pull, 0px) / 140));
  transition: none;
}
#progress-detail-body .detail-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 2px;
}
#progress-detail-body .detail-row + .detail-row { border-top: 1px solid var(--line); }
#progress-detail-body .detail-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
#progress-detail-body .label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
#progress-detail-body .detail-empty {
  padding: 10px 2px;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Editor de borrador (progreso oscuro + resumen claro) */
.draft-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-tertiary);
}
.draft-editor .draft-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  border-top: 1px solid var(--line);
  min-height: 40px;
}
.draft-editor .draft-row:first-of-type { border-top: 0; }
.draft-editor .draft-row-inline {
  gap: 6px;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.draft-editor .draft-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.draft-editor .draft-row-inline .draft-check {
  margin-top: 10px;
}
.draft-editor .draft-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  flex: 1 1 36%;
  max-width: 46%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 1.25;
}
.draft-editor .draft-row-inline .draft-label {
  padding-top: 8px;
}
.draft-editor .draft-row-field .draft-label {
  max-width: none;
  flex: 1 1 auto;
}
.draft-editor .draft-value {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: right;
}
.draft-editor .draft-value-btn {
  margin-left: auto;
  appearance: none;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  max-width: 55%;
  word-break: break-word;
  transition: background .15s ease, border-color .15s ease;
}
.draft-editor .draft-value-btn:hover {
  border-color: rgba(139, 124, 255, 0.4);
  background: rgba(110, 91, 255, 0.14);
}
.draft-editor .draft-icon-btn {
  appearance: none;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.draft-editor .draft-row:hover .draft-icon-btn,
.draft-editor .draft-icon-btn:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .draft-editor .draft-icon-btn { opacity: 0.75; }
}
.draft-editor .draft-icon-btn.danger:hover {
  color: #FCA5A5;
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.3);
}
.draft-editor .draft-mediciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  flex: 1 1 auto;
  min-width: 5.5rem;
  max-width: none;
  overflow: visible;
  padding: 1px 2px;
}
.draft-editor .draft-mediciones::-webkit-scrollbar { height: 3px; }
.draft-editor .draft-mediciones::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 99px;
}
.draft-editor .draft-muted {
  font-size: 11.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.draft-editor .depth-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(139, 124, 255, 0.22);
  background: rgba(110, 91, 255, 0.12);
  transition: border-color .15s ease, background .15s ease;
  gap: 4px;
  padding: 0;
}
.draft-editor .depth-chip-main {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 4px 8px;
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
}
.draft-editor .depth-chip-m {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-2);
  opacity: 0.9;
}
.draft-editor .depth-chip-v {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.draft-editor .depth-chip:hover {
  border-color: rgba(139, 124, 255, 0.5);
  background: rgba(110, 91, 255, 0.2);
}

/* Resumen (fondo claro) */
.draft-editor.theme-light { color: var(--text-dark-sec); }
.draft-editor.theme-light .draft-row { border-top-color: rgba(15, 23, 42, 0.08); }
.draft-editor.theme-light .draft-label { color: var(--text-dark); }
.draft-editor.theme-light .draft-value { color: var(--text-dark-sec); }
.draft-editor.theme-light .draft-value-btn {
  background: #F3F4F8;
  color: var(--text-dark);
}
.draft-editor.theme-light .draft-value-btn:hover {
  background: #EEE9FF;
  border-color: rgba(110, 91, 255, 0.35);
}
.draft-editor.theme-light .draft-icon-btn {
  border-color: transparent;
  background: transparent;
  color: #9CA3AF;
}
.draft-editor.theme-light .depth-chip {
  border-color: rgba(110, 91, 255, 0.18);
  background: #F3F0FF;
}
.draft-editor.theme-light .depth-chip-m { color: #5B4BE0; }
.draft-editor.theme-light .depth-chip-v { color: var(--text-dark); }
.draft-editor.theme-light .depth-chip:hover {
  border-color: rgba(110, 91, 255, 0.4);
  background: #EDE9FE;
}

/* Edición inline: auto-guarda al salir (sin ✓/✕) */
.draft-editor .draft-row.editing { align-items: center; }
.draft-inline-editor {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 62%;
  justify-content: flex-end;
  animation: draft-edit-in .18s var(--ease);
}
@keyframes draft-edit-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
.draft-inline-input {
  appearance: none;
  border: 1px solid rgba(139, 124, 255, 0.5);
  background: rgba(0,0,0,0.32);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 12.5px;
  font-weight: 600;
  width: min(100%, 10.5rem);
  outline: none;
  box-shadow: 0 0 0 2px rgba(110, 91, 255, 0.12);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.draft-inline-input:focus {
  border-color: rgba(139, 124, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(110, 91, 255, 0.2);
}
.draft-inline-input.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2);
}
.draft-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}
.draft-choice-btn {
  appearance: none;
  border: 1px solid rgba(139, 124, 255, 0.28);
  background: rgba(110, 91, 255, 0.12);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.draft-choice-btn.selected,
.draft-choice-btn:hover {
  background: rgba(110, 91, 255, 0.28);
  border-color: rgba(139, 124, 255, 0.55);
}
.draft-editor .draft-icon-btn.confirming {
  width: auto;
  min-width: 44px;
  min-height: 36px;
  padding: 0 10px;
  opacity: 1;
  color: #fff;
  background: rgba(248, 113, 113, 0.55);
  border-color: rgba(248, 113, 113, 0.7);
  font-size: 12px;
}
.draft-edit-error {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.12);
  color: #B91C1C;
  font-size: 12.5px;
  font-weight: 600;
}

.depth-chip {
  position: relative;
}
.depth-chip.editing {
  background: rgba(110, 91, 255, 0.2);
  border-color: rgba(139, 124, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(110, 91, 255, 0.15);
  padding: 2px 5px 2px 7px;
}
.depth-chip.editing .depth-chip-m {
  flex-shrink: 0;
}
.depth-inline-input {
  width: 3.4rem;
  padding: 2px 4px;
  text-align: center;
  font-size: 12.5px;
  border-radius: 6px;
  box-shadow: none;
  border: 0;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
}

.draft-editor.theme-light .draft-inline-input {
  background: #fff;
  color: var(--text-dark);
  border-color: rgba(110, 91, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(110, 91, 255, 0.08);
}
.draft-editor.theme-light .draft-choice-btn {
  background: #F3F0FF;
  color: var(--text-dark);
}
.draft-editor.theme-light .depth-chip.editing {
  background: #EDE9FE;
  border-color: rgba(110, 91, 255, 0.45);
}
.draft-editor.theme-light .depth-inline-input {
  background: #fff;
  color: var(--text-dark);
}

/* ============================================================ */
/* Picker                                                         */
/* ============================================================ */

.picker {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.picker.hidden { display: none; }

.picker-section { animation: rise .4s var(--ease); }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.section-label {
  margin: 0 0 14px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--text);
}
.section-sublabel {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--text-tertiary);
  font-weight: 400;
  line-height: 1.4;
}

.icon-mask {
  display: inline-block;
  width: 22px;
  height: 22px;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color .25s ease;
}

.systems-empty-state {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(122, 132, 160, 0.08);
  color: var(--text-secondary, #5b647a);
  font-size: 0.92rem;
  line-height: 1.45;
}

.system-chip-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 6px;
  scrollbar-width: none;
}
.system-chip-row::-webkit-scrollbar { display: none; }

.system-chip {
  flex-shrink: 0;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.system-chip .chip-face,
.system-chip .chip-icon {
  width: 68px;
  height: 92px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  padding: 12px 8px 10px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.system-chip:active .chip-face,
.system-chip:active .chip-icon { transform: scale(0.96); }
.system-chip.active .chip-face,
.system-chip.active .chip-icon {
  border-color: rgba(138, 112, 255, 0.7);
  box-shadow:
    0 0 22px rgba(110, 91, 255, 0.32),
    0 14px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}
.system-chip .chip-face img,
.system-chip .chip-icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
}
.system-chip .chip-face .icon-mask,
.system-chip .chip-icon .icon-mask {
  width: 26px;
  height: 26px;
  margin: auto 0;
}
.system-chip .chip-label {
  font-size: 10px;
  text-align: center;
  color: var(--text-tertiary);
  font-weight: 600;
  line-height: 1.15;
  transition: color .2s ease;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.system-chip.active .chip-label { color: var(--text); font-weight: 700; }
.system-chip.disabled { opacity: .38; cursor: not-allowed; }

.tipo-registro-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tipo-registro-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
  animation: rise .4s var(--ease) both;
}
.tipo-registro-item:nth-child(1) { animation-delay: .02s; }
.tipo-registro-item:nth-child(2) { animation-delay: .06s; }
.tipo-registro-item:nth-child(3) { animation-delay: .1s; }
.tipo-registro-item:nth-child(4) { animation-delay: .14s; }
.tipo-registro-item:nth-child(5) { animation-delay: .18s; }
.tipo-registro-item:nth-child(6) { animation-delay: .22s; }
.tipo-registro-item:active { transform: scale(0.985); }
.tipo-registro-item.selected,
.tipo-registro-item:not(.disabled):hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.tipo-registro-item.disabled,
.tipo-registro-item:disabled {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
}
.tipo-registro-item.disabled:active { transform: none; }
.tipo-registro-item .tipo-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--accent-2);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.tipo-registro-item.selected .tipo-icon {
  background: rgba(138, 112, 255, 0.14);
  border-color: rgba(138, 112, 255, 0.3);
}
.tipo-registro-item .tipo-icon img { width: 22px; height: 22px; object-fit: contain; }
.tipo-registro-item .tipo-icon.has-img {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}
.tipo-registro-item .tipo-icon.has-img img { width: 36px; height: 36px; }
.tipo-registro-item .tipo-icon .icon-mask { width: 20px; height: 20px; }
.tipo-registro-item .tipo-icon svg { width: 22px; height: 22px; display: block; }
.tipo-registro-item .tipo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.tipo-registro-item .tipo-text strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.tipo-registro-item .tipo-text .tipo-desc {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.35;
  font-weight: 400;
}
.tipo-registro-item .tipo-text .tipo-meta {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 3px;
  line-height: 1.35;
  font-weight: 400;
}
.tipo-registro-item .tipo-arrow {
  color: var(--accent-2);
  display: grid;
  opacity: 0.8;
}

.picker-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 16px;
  margin-top: auto;
  border: 1px solid rgba(110, 91, 255, 0.22);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(110,91,255,0.1), rgba(255,255,255,0.02));
}
.picker-hint-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FBBF24;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.3);
}
.picker-hint-copy { min-width: 0; }
.picker-hint-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.picker-hint-text {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  font-weight: 400;
}

/* ============================================================ */
/* Chat — mundo separado                                          */
/* ============================================================ */

.chat-surface {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 12px;
  display: none;
  flex-direction: column;
  gap: 14px;
  background: var(--chat);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  margin-top: 12px;
}
.chat-surface.visible { display: flex; }
#ayuda-messages.chat-surface { display: flex; margin-top: 0; }

#view-registro.chat-mode {
  background: var(--bg);
}
#view-registro.chat-mode .topbar {
  padding-bottom: 4px;
}

.msg-row {
  display: flex;
  gap: 9px;
  align-items: flex-end;
  max-width: 100%;
  animation: msg-in .3s var(--ease);
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.msg-row.user { justify-content: flex-end; }
.msg-row.assistant { justify-content: flex-start; }

.msg-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 78%;
  min-width: 0;
}
.msg-stack .bubble,
.msg-stack .duplicate-sheet,
.msg-stack .receipt-sheet {
  max-width: 100%;
}
.msg-sender {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  padding-left: 6px;
  line-height: 1.2;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
}
.avatar.agent {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
  padding: 4px;
}
.avatar.user {
  background: #2A3142;
  border-color: rgba(200,208,224,0.18);
  box-shadow: none;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; }
.avatar.user img { width: 100%; height: 100%; object-fit: cover; }

.bubble {
  max-width: 78%;
  padding: 12px 15px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.48;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.bubble p { margin: 0 0 6px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 6px 0; padding-left: 1.35em; }
.bubble ol { list-style: decimal; }
.bubble-steps {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bubble-step {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.bubble-step-n {
  flex: 0 0 auto;
  min-width: 1.25em;
  font-weight: 700;
  color: #6D28D9;
  line-height: 1.48;
}
.bubble-step-t { flex: 1; min-width: 0; }
.bubble li { margin: 3px 0; }
.bubble li + li { margin-top: 4px; }
.bubble strong { font-weight: 700; }
.bubble .bubble-kicker {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #4C1D95;
}
.ayuda-caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -2px;
  background: #7C5CFC;
  border-radius: 1px;
  animation: ayuda-caret-blink 0.75s step-end infinite;
}
@keyframes ayuda-caret-blink {
  50% { opacity: 0; }
}

.msg-row.user .bubble {
  background: linear-gradient(145deg, #7B6CFF, #5F4FE8);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 8px 20px rgba(110, 91, 255, 0.22);
}
.msg-row.user .bubble .heard-text {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.22);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.88;
  font-weight: 400;
}
.msg-row.assistant .bubble {
  background: #fff;
  color: var(--text-dark);
  border-bottom-left-radius: 5px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.msg-row.assistant .bubble.error {
  color: #9F1239;
  background: #FFF1F2;
}
.bubble.welcome-guide {
  max-width: 92%;
  padding: 13px 15px 12px;
}
.welcome-guide-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.welcome-guide-title {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.welcome-guide-lead {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-dark-sec);
}
.welcome-guide-manual {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-dark-sec);
}
.welcome-guide-manual-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.welcome-guide-manual-btn:hover {
  color: #5B4BE0;
}
.welcome-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.welcome-guide-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.welcome-guide-ico {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
  background: var(--accent-soft);
}
.welcome-guide-item.kind-lab .welcome-guide-ico { color: #7c3aed; background: #ede9fe; }
.welcome-guide-item.kind-place .welcome-guide-ico { color: #7c3aed; background: #ede9fe; }
.welcome-guide-item.kind-calendar .welcome-guide-ico { color: #c2410c; background: #ffedd5; }
.welcome-guide-item.kind-species .welcome-guide-ico { color: #0f766e; background: #ccfbf1; }
.welcome-guide-item.kind-water .welcome-guide-ico { color: #0369a1; background: #e0f2fe; }
.welcome-guide-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding-top: 3px;
}
.welcome-guide-label {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text-dark);
  line-height: 1.25;
}
.welcome-guide-hint {
  font-size: 12px;
  color: var(--text-dark-sec);
  line-height: 1.3;
}
.welcome-guide-item.done .welcome-guide-label::after {
  content: " · listo";
  font-weight: 600;
  color: #15803d;
  font-size: 11px;
}
.welcome-guide-item.done {
  opacity: 0.78;
}
.welcome-guide-item.optional .welcome-guide-label {
  font-weight: 600;
}
.bubble .msg-time {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: right;
  opacity: 0.55;
}
.msg-row.user .bubble .msg-time { color: rgba(255,255,255,0.85); opacity: 0.8; }
.msg-row.assistant .bubble .msg-time { color: var(--text-tertiary); }

.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.quick-reply {
  border: 1px solid rgba(110, 91, 255, 0.28);
  background: #fff;
  color: #4C3FD6;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.quick-reply:hover {
  border-color: var(--accent);
}
.quick-reply.selected {
  background: #fff;
  border: 2px solid var(--accent);
  color: #4C3FD6;
  font-weight: 700;
  padding: 7px 13px;
}
.quick-reply:active { transform: scale(0.96); }

.especies-candidatas {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.especies-candidatas-hint {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.4;
  padding: 2px 2px 0;
}
.especies-candidatas-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.especies-candidatas-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #6B7280;
}
.especie-candidato-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.especie-candidato {
  border: 1px solid rgba(16, 185, 129, 0.32);
  background: #ECFDF5;
  color: #047857;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 550;
  font-style: italic;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.especie-candidato:hover { border-color: #059669; }
.especie-candidato.selected {
  background: #059669;
  border-color: #059669;
  color: #fff;
  font-weight: 700;
}
.especie-candidato:disabled { opacity: .55; cursor: default; }
.especie-candidato:active { transform: scale(0.96); }
.especie-candidato-ninguna {
  background: #fff;
  border-color: rgba(107, 114, 128, 0.35);
  color: #6B7280;
  font-style: normal;
}
.especie-research {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.especie-research-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark, #0F172A);
  outline: none;
}
.especie-research-input:focus {
  border-color: rgba(5, 150, 105, 0.55);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.especie-research-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}
.especie-research-status {
  font-size: 11.5px;
  color: #6B7280;
  line-height: 1.3;
}
.especie-research-back {
  appearance: none;
  border: 0;
  background: transparent;
  color: #059669;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.bubble.thinking {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  max-width: 85%;
}
.bubble.thinking:not(:has(.thinking-steps)) {
  flex-direction: row;
  align-items: center;
  padding: 10px 14px;
}
.thinking-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.thinking-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}
.thinking-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94A3B8;
  animation: blink 1.2s infinite ease-in-out;
}
.thinking-dots .thinking-dot:nth-child(2) { animation-delay: .2s; }
.thinking-dots .thinking-dot:nth-child(3) { animation-delay: .4s; }
.thinking-status {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dark-sec, #6B7280);
  line-height: 1.35;
}
.thinking-head[hidden] { display: none !important; }
.thinking-status[hidden] { display: none !important; }
.thinking-steps {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.thinking-steps[hidden] { display: none !important; }
.thinking-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.3;
  color: #94A3B8;
  font-weight: 500;
}
.thinking-step-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E2E8F0;
  flex-shrink: 0;
}
.thinking-step.done {
  color: #64748B;
}
.thinking-step.done .thinking-step-dot {
  background: #34D399;
}
.thinking-step.current {
  color: var(--text-dark, #0F172A);
  font-weight: 650;
}
.thinking-step.current .thinking-step-dot {
  background: #6E5BFF;
  box-shadow: 0 0 0 3px rgba(110, 91, 255, 0.18);
  animation: blink 1.2s infinite ease-in-out;
}
.thinking-partial {
  margin-top: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #F1F5F9;
  color: #475569;
  font-size: 11.5px;
  line-height: 1.35;
  max-width: 100%;
}
.thinking-partial[hidden] { display: none !important; }
.bubble.thinking:not(:has(.thinking-status:not([hidden])):not(:empty)) {
  /* keep column layout when steps visible */
}
@keyframes blink {
  0%, 80%, 100% { opacity: .25; }
  40% { opacity: 1; }
}

.detected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.detected-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  font-size: 11px;
  line-height: 1.25;
  color: #334155;
}
.detected-chip.is-auto {
  background: #EEF2FF;
  border-color: #C7D2FE;
  color: #3730A3;
}
.detected-chip-label {
  font-weight: 700;
  opacity: 0.75;
}
.detected-chip-value {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.msg-attachments {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
}
.msg-attachments img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.bubble.queued { opacity: .7; }
.bubble .queued-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 10.5px;
  opacity: .8;
  font-style: italic;
}

/* Comprobante de envío en el chat — misma ficha que el resumen */
.receipt-sheet.resumen-sheet {
  max-width: min(92%, 360px);
  width: 100%;
  border-radius: 22px;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(15, 23, 42, 0.04);
}
.msg-row.assistant .receipt-sheet {
  margin-top: 2px;
}
.receipt-sheet .resumen-sheet-head {
  padding: 14px 14px 13px;
}
.receipt-sheet .resumen-sheet-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.receipt-sheet .resumen-sheet-title {
  font-size: 15.5px;
}
.receipt-sheet .resumen-fact {
  grid-template-columns: 78px 1fr;
  padding: 10px 12px;
}
.receipt-sheet .resumen-fact.is-lead dd {
  font-size: 15px;
}
.receipt-check-icon {
  color: #fff;
}
.receipt-alarma-badge {
  max-width: 42%;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
.receipt-sheet.tono-verde .receipt-alarma-badge {
  color: #DCFCE7;
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(134, 239, 172, 0.35);
}
.receipt-sheet.tono-amarillo .resumen-sheet-head {
  background: linear-gradient(155deg, #D97706, #1A1410 72%);
}
.receipt-sheet.tono-amarillo .receipt-alarma-badge {
  color: #FEF3C7;
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(252, 211, 77, 0.35);
}
.receipt-sheet.tono-rojo .resumen-sheet-head {
  background: linear-gradient(155deg, #EF4444, #1A1012 72%);
}
.receipt-sheet.tono-rojo .receipt-alarma-badge {
  color: #FECACA;
  background: rgba(248, 113, 113, 0.22);
  border-color: rgba(252, 165, 165, 0.35);
}
.receipt-sheet.tono-neutro .receipt-alarma-badge {
  color: #E0E7FF;
  background: rgba(129, 140, 248, 0.22);
  border-color: rgba(165, 180, 252, 0.35);
}
.receipt-block {
  margin: 2px 10px 0;
  padding: 8px 4px 4px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.05);
}
.receipt-block-title {
  margin: 0 12px 2px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8B93A7;
}
.receipt-facts-compact {
  padding: 0 2px 4px;
}
.receipt-muted-note {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: #8B93A7;
  line-height: 1.4;
}
.receipt-sheet .receipt-warning {
  margin: 8px 10px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #FFFBEB;
  border: 1px solid rgba(245, 158, 11, 0.22);
  color: #92400E;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}
.receipt-footer {
  margin: 8px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.receipt-sheet .receipt-next-hint {
  margin: 0;
  padding: 11px 12px;
  border-radius: 14px;
  background: #EEF0FF;
  color: #3730A3;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}
.receipt-sheet .receipt-new-btn {
  appearance: none;
  border: none;
  border-radius: 14px;
  padding: 13px 14px;
  background: linear-gradient(145deg, #8B7CFF, #5B4BE0);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(91, 75, 224, 0.28);
  transition: transform .18s var(--ease);
}
.receipt-sheet .receipt-new-btn:active { transform: scale(0.98); }

.duplicate-sheet {
  margin: 2px 0 0;
  max-width: min(92%, 360px);
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #F7F8FC;
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: var(--text-dark);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}
.duplicate-sheet-head {
  padding: 14px 14px 10px;
  background: linear-gradient(155deg, #D97706, #1A1410 72%);
  color: #fff;
}
.duplicate-sheet-eyebrow {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.duplicate-sheet-title {
  margin: 0;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.duplicate-sheet-body {
  margin: 0;
  padding: 12px 14px 6px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #3F465A;
}
.duplicate-sheet-facts {
  margin: 0 10px 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.duplicate-sheet-facts > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  padding: 6px 2px;
}
.duplicate-sheet-facts dt {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  color: #8B93A7;
}
.duplicate-sheet-facts dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  text-align: right;
  color: #151821;
  word-break: break-word;
}
.duplicate-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 12px;
}
.duplicate-force-btn,
.duplicate-cancel-btn {
  appearance: none;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 0;
}
.duplicate-force-btn {
  background: linear-gradient(145deg, #8B7CFF, #5B4BE0);
  color: #fff;
  box-shadow: 0 10px 22px rgba(91, 75, 224, 0.28);
}
.duplicate-cancel-btn {
  background: transparent;
  color: #6B7280;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.duplicate-force-btn:disabled,
.duplicate-cancel-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ============================================================ */
/* Attachments / recording                                        */
/* ============================================================ */

#offline-banner {
  display: none;
  background: #FFFBEB;
  color: #92400E;
  font-size: 12px;
  text-align: center;
  padding: 8px 10px;
  flex-shrink: 0;
}
#offline-banner.visible { display: block; }

/* Adjuntos pendientes: ahora viven DENTRO de .composer-shell, como una fila
   de chips compactos arriba del textarea (mismo bloque redondeado), en vez
   de una tira suelta pegada a la pantalla. */
#pending-attachments {
  display: none;
  gap: 12px;
  padding: 10px 8px 2px;
  overflow-x: auto;
  overflow-y: visible;
  flex-shrink: 0;
}
#pending-attachments.visible { display: flex; }

.attachment-chip {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.attachment-chip .thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.attachment-chip img { width: 100%; height: 100%; object-fit: cover; }
.attachment-chip .file-icon { font-size: 15px; }
.attachment-chip .remove-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #EF4444;
  color: #fff;
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  -webkit-appearance: none;
  appearance: none;
}
.attachment-chip .remove-btn::before {
  content: "×";
  display: block;
  line-height: 1;
  transform: translateY(-0.5px);
}
.attachment-chip.audio-chip {
  width: 40px;
  height: 40px;
}
.attachment-chip.audio-chip .thumb {
  position: relative;
  background: #EDE9FE;
  color: var(--accent);
}
.attachment-chip.audio-chip .audio-chip-n {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #5B4BE0;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

#mic-btn.recording {
  background: rgba(34, 197, 94, 0.16);
  color: #22C55E;
  animation: pulse-mic 1s infinite;
}
#mic-btn .mic-icon-stop { display: none; }
#mic-btn.recording .mic-icon-idle { display: none; }
#mic-btn.recording .mic-icon-stop { display: block; }
#mic-btn.recording .mic-icon-stop { color: #22C55E; filter: none; }
@keyframes pulse-mic {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .35); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

#recording-indicator {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #FEF2F2;
  color: #9F1239;
  font-size: 12.5px;
  font-weight: 600;
  flex-shrink: 0;
}
#recording-indicator.visible { display: flex; }
.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  animation: blink 1s infinite ease-in-out;
}
.rec-label { flex: 1; min-width: 0; }
.rec-done-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  background: #16A34A;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
}
.rec-done-btn:active { transform: scale(0.96); }
#recording-cancel {
  margin-left: 0;
  border: none;
  background: none;
  color: #9F1239;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  opacity: .85;
}

.recording-limit-toast {
  flex-shrink: 0;
  margin: 0 14px 8px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(20, 83, 45, 0.94);
  color: #DCFCE7;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  animation: rise .3s var(--ease);
}
.recording-limit-toast[hidden] { display: none !important; }

/* ============================================================ */
/* Composer                                                       */
/* ============================================================ */

.composer {
  display: none;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px 12px;
  background: transparent;
  flex-shrink: 0;
}
.composer.visible { display: flex; }
#ayuda-composer { display: flex; background: var(--chat); }

/* El picker no tiene chat: hay que elegir un tipo de registro. */
#view-registro:not(.chat-mode):not(.manual-mode) #composer {
  display: none !important;
}

#view-registro:not(.chat-mode) .composer {
  background: linear-gradient(180deg, transparent, rgba(5,6,10,0.92) 42%);
}
#view-registro:not(.chat-mode) .composer-shell {
  background: rgba(14, 16, 24, 0.62);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
#view-registro:not(.chat-mode) #text-input { color: var(--text); }
#view-registro:not(.chat-mode) .composer-icon img { filter: invert(1); opacity: .7; }
#view-registro:not(.chat-mode) #send-btn {
  box-shadow: 0 8px 24px rgba(110, 91, 255, 0.45), 0 0 20px rgba(138, 112, 255, 0.25);
}

#view-registro.chat-mode .composer,
#ayuda-composer {
  background: var(--chat);
}
#view-registro.chat-mode .composer-shell,
#ayuda-composer .composer-shell {
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
#view-registro.chat-mode #text-input,
#ayuda-input { color: var(--text-dark); }
#view-registro.chat-mode .composer-icon img { filter: none; opacity: .5; }

.composer-shell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  padding: 4px 6px;
  min-height: 48px;
  justify-content: center;
}

.composer-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 40px;
}

.composer-icon {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.composer-icon img { width: 18px; height: 18px; opacity: .6; }

#text-input,
#ayuda-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 6px;
  margin: 0;
  font-size: 14.5px;
  resize: none;
  overflow: hidden;
  max-height: 100px;
  color: var(--text-dark);
  line-height: 1.3;
  height: 40px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  /* Evita el “asa” vertical de iOS en textareas */
  -webkit-border-radius: 0;
}
#text-input::-webkit-resizer,
#ayuda-input::-webkit-resizer { display: none; }
#text-input:focus,
#ayuda-input:focus { outline: none; }
#text-input.dictating-live {
  opacity: 0.95;
  caret-color: #0d9488;
}
#text-input.dictating-live::placeholder {
  color: #0f766e;
  opacity: 0.7;
}
#text-input::placeholder,
#ayuda-input::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#send-btn,
#ayuda-send-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, #8B7CFF, #5B4BE0);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(110, 91, 255, 0.35);
  padding: 0;
  transition: transform .2s var(--ease);
}
#send-btn:active,
#ayuda-send-btn:active { transform: scale(0.94); }
#send-btn img,
#ayuda-send-btn img {
  width: 17px;
  height: 17px;
  filter: invert(1);
}
#send-btn:disabled,
#ayuda-send-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
#ayuda-composer.disabled {
  opacity: .55;
  pointer-events: none;
}
#ayuda-input:disabled {
  cursor: not-allowed;
  color: var(--text-tertiary);
}

.ayuda-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 14px 12px;
  background: var(--chat);
  flex-shrink: 0;
}
.ayuda-chips[hidden] { display: none !important; }
.ayuda-chip {
  appearance: none;
  border: 1px solid rgba(91, 75, 224, 0.22);
  background: #fff;
  color: var(--text-dark);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}
.ayuda-chip:active { transform: scale(0.97); }
#composer input[type="file"] {
  /* Fuera del flex del composer, pero clickeable en Android/iOS (display:none bloquea el picker). */
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none;
  z-index: -1;
}

#view-registro > #attach-sheet,
#attach-sheet {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
#view-registro > #attach-sheet:not([hidden]),
#attach-sheet:not([hidden]) {
  pointer-events: auto;
}
#attach-sheet[hidden] { display: none !important; }
.attach-sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  padding: 0;
  background: rgba(5, 6, 10, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  pointer-events: auto;
}
.attach-sheet-panel {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  width: calc(100% - 20px);
  max-width: 400px;
  margin: 0 10px calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 8px 12px 12px;
  background: #fff;
  border-radius: 28px;
  box-shadow:
    0 28px 64px rgba(5, 6, 10, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.65);
  animation: attach-sheet-in .38s var(--ease);
}
@keyframes attach-sheet-in {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.attach-sheet-handle {
  width: 36px;
  height: 4px;
  margin: 6px auto 8px;
  border-radius: 999px;
  background: rgba(21, 24, 33, 0.14);
}
.attach-sheet-head {
  padding: 2px 8px 14px;
}
.attach-sheet-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-dark);
  text-transform: none;
}
.attach-sheet-sub {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark-sec);
  line-height: 1.35;
}
.attach-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #F4F5F8;
}
.attach-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dark);
  text-align: left;
  cursor: pointer;
  min-height: 68px;
  transition: background .16s var(--ease);
}
.attach-sheet-row + .attach-sheet-row {
  border-top: 1px solid rgba(21, 24, 33, 0.06);
}
.attach-sheet-row:active {
  background: rgba(110, 91, 255, 0.06);
}
.attach-sheet-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.attach-sheet-icon svg {
  width: 20px;
  height: 20px;
}
.attach-sheet-icon-gallery {
  background: var(--accent-soft);
  color: var(--accent);
}
.attach-sheet-icon-pdf {
  background: rgba(225, 29, 72, 0.12);
  color: #E11D48;
}
.attach-sheet-icon-excel {
  background: var(--green-soft);
  color: #16A34A;
}
.attach-sheet-tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.attach-sheet-tile-text strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.attach-sheet-tile-text small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dark-sec);
  line-height: 1.3;
}
.attach-sheet-chevron {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-right: 1.8px solid rgba(21, 24, 33, 0.28);
  border-bottom: 1.8px solid rgba(21, 24, 33, 0.28);
  transform: rotate(-45deg);
  margin-right: 4px;
}
.attach-sheet-cancel {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 13px 12px;
  appearance: none;
  border: 0;
  border-radius: 16px;
  background: #F4F5F8;
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}
.attach-sheet-cancel:active {
  background: #eceef3;
}

#dropzone-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9,10,15,.92);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  text-align: center;
  padding: 20px;
}
#dropzone-overlay.visible { display: flex; }
.drop-title { font-size: 18px; font-weight: 600; }
.drop-sub { font-size: 14px; color: var(--text-secondary); }

/* ============================================================ */
/* Resumen — una ficha clara, sin solapes                          */
/* ============================================================ */

#view-resumen.active {
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(110, 91, 255, 0.22), transparent 55%),
    linear-gradient(180deg, #0B0C12 0%, #090A0F 40%, #07080C 100%);
}

.resumen-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 18px 12px;
}

.resumen-sheet {
  --resumen-accent: #6E5BFF;
  background: #F7F8FC;
  color: var(--text-dark);
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(15, 23, 42, 0.04);
  animation: rise .45s var(--ease);
}

.resumen-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 16px;
  background: linear-gradient(155deg, #6E5BFF, #15182A 72%);
  background: linear-gradient(155deg, var(--resumen-accent), #15182A 72%);
  color: #fff;
}

.resumen-sheet-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.resumen-sheet-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 6px;
  overflow: hidden;
}
.resumen-sheet-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.resumen-sheet-copy { min-width: 0; }
.resumen-sheet-sys {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
.resumen-sheet-title {
  margin: 0;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.resumen-sheet-badge {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #DCFCE7;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(134, 239, 172, 0.28);
  white-space: nowrap;
}
.resumen-sheet-badge.is-incomplete {
  color: #FDE68A;
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(251, 191, 36, 0.32);
}
.resumen-missing {
  margin: 0 6px 8px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
  color: #F5F6FA;
  background: rgba(245, 158, 11, 0.12);
}

.resumen-facts {
  margin: 0;
  padding: 6px 6px 4px;
  display: flex;
  flex-direction: column;
}
.resumen-fact {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: 14px;
}
.resumen-fact + .resumen-fact {
  margin-top: 1px;
}
.resumen-fact.is-lead {
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.resumen-fact dt {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  color: #8B93A7;
  letter-spacing: 0.01em;
}
.resumen-fact dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
  color: #151821;
  letter-spacing: -0.015em;
  text-align: right;
  word-break: break-word;
}
.resumen-fact.is-lead dd {
  font-size: 16px;
  font-weight: 750;
}

.resumen-accordion {
  margin: 8px 10px 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.resumen-accordion-trigger {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background .18s ease;
}
.resumen-accordion-trigger:hover { background: rgba(110, 91, 255, 0.04); }
.resumen-accordion-trigger:active { background: rgba(110, 91, 255, 0.07); }
.resumen-accordion-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.resumen-accordion-title {
  font-size: 14.5px;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: #151821;
}
.resumen-accordion-sub {
  font-size: 12px;
  font-weight: 500;
  color: #8B93A7;
}
.resumen-accordion-chevron {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--resumen-accent);
  background: rgba(110, 91, 255, 0.12);
  transition: transform .28s var(--ease), background .18s ease;
}
.resumen-accordion.open .resumen-accordion-chevron {
  transform: rotate(180deg);
  background: rgba(110, 91, 255, 0.2);
}
.resumen-accordion-panel {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding: 4px 10px 12px;
  background: #FBFBFE;
  animation: rise .28s var(--ease);
}
.resumen-accordion-panel[hidden] { display: none !important; }

/* Detalle editable dentro del resumen: menos “todo verde” */
.resumen-accordion-panel .draft-editor {
  margin: 0;
}
.resumen-accordion-panel .draft-editor .draft-check {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #A5B0C8;
  color: transparent;
  font-size: 0;
  box-shadow: none;
}
.resumen-accordion-panel .draft-editor.theme-light .draft-row {
  border-top-color: rgba(15, 23, 42, 0.06);
}
.resumen-accordion-panel .draft-editor.theme-light .draft-label {
  color: #5B6478;
  font-weight: 600;
}
.resumen-accordion-panel .draft-editor.theme-light .draft-value-btn {
  background: #F1F3F8;
  color: #151821;
  border-radius: 10px;
}
.resumen-accordion-panel .draft-editor.theme-light .depth-chip {
  background: #EEF0FF;
  border-color: rgba(110, 91, 255, 0.16);
}

.resumen-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  padding: 48px 20px;
}

.resumen-actions {
  padding: 10px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, transparent, rgba(9, 10, 15, 0.92) 28%);
}
.btn-primary-lg {
  background: linear-gradient(145deg, #8B7CFF, #5B4BE0);
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 17px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.015em;
  box-shadow: 0 14px 32px rgba(110,91,255,0.35);
  transition: transform .2s var(--ease);
}
.btn-primary-lg:active { transform: scale(0.985); }
.btn-primary-lg:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.btn-text-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 14px;
  color: var(--text-tertiary);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 11px;
  transition: color .2s ease, background .2s ease;
}
.btn-text-link:hover { color: var(--text); background: var(--surface); }

/* Botones genéricos "sueltos" (fuera de .manual-form-actions/.modal/etc.),
   usados por las pantallas REGMA. */
.btn-primary {
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(145deg, var(--accent-2), #5B4BE0);
  color: #fff;
  transition: transform .2s var(--ease);
}
.btn-primary:active { transform: scale(0.97); }
.btn-secondary {
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255,255,255,.06);
  color: var(--text);
  transition: transform .2s var(--ease), background .2s ease;
}
.btn-secondary:active { transform: scale(0.97); }

/* ============================================================ */
/* Tareas                                                         */
/* ============================================================ */

#tareas-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tarea-card {
  background: var(--surface);
  border: 0;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tarea-card .icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(255,255,255,0.05);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.tarea-card .icon-wrap img { width: 22px; height: 22px; object-fit: contain; }
.tarea-card .tarea-text { flex: 1; min-width: 0; }
.tarea-card .tarea-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.tarea-card .tarea-text span {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.tarea-card .tarea-text span.reciente { color: var(--green); font-weight: 600; }
.tarea-card .repeat-btn {
  flex-shrink: 0;
  background: var(--accent-soft);
  color: #C4B5FD;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
}
.tareas-empty-hint {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 24px 8px;
}

#enviados-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 16px 10px;
  flex-shrink: 0;
}
#enviados-toolbar[hidden] { display: none !important; }
.enviados-search-wrap {
  position: relative;
  display: block;
}
.enviados-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}
.enviados-search-wrap input {
  width: 100%;
  border: 1px solid rgba(139, 124, 255, 0.18);
  background: rgba(255,255,255,.045);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 14px 11px 40px;
  font-size: 14px;
}
.enviados-search-wrap input:focus {
  outline: none;
  border-color: rgba(139, 124, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(110, 91, 255, 0.16);
}
.enviados-search-wrap input::placeholder { color: var(--text-tertiary); }

#enviados-body {
  gap: 12px;
  padding: 4px 16px 28px;
}
#enviados-body.is-detail {
  padding: 4px 14px 36px;
}

.enviados-limit-note {
  margin: 4px 4px 8px;
  padding: 0 4px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-tertiary);
  text-align: center;
}

.enviados-empty {
  margin: 28px 8px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}
.enviados-empty-ico {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(110, 91, 255, 0.12);
  color: #C4B5FD;
  margin-bottom: 4px;
}
.enviados-empty p {
  margin: 0;
  font-size: 15.5px;
  font-weight: 650;
  color: var(--text);
}
.enviados-empty span {
  font-size: 13px;
  line-height: 1.45;
  max-width: 280px;
}

.enviado-card {
  --sys-accent: #7C5CFC;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.02) 55%);
  box-shadow: 0 8px 20px rgba(0,0,0,.16);
  overflow: visible;
  transition: transform .2s var(--ease), border-color .2s ease, background .2s ease;
}
.enviado-card:hover {
  border-color: rgba(139, 124, 255, 0.4);
}
.enviado-card:active { transform: scale(0.985); }
.enviado-card-rail {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--sys-accent);
  pointer-events: none;
}
.enviado-card-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px 14px 16px;
}
.enviado-card-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  margin-top: 1px;
  border-radius: 12px;
  background-color: rgba(124, 92, 252, 0.16);
  background-color: color-mix(in srgb, var(--sys-accent) 22%, transparent);
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62% auto;
  border: 1px solid rgba(255,255,255,.1);
  pointer-events: none;
}
.enviado-card-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.enviado-card-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sys-accent);
  opacity: 0.92;
}
.enviado-card-main strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.enviado-card-place {
  font-size: 13.5px;
  font-weight: 650;
  color: #C4B5FD;
}
.enviado-card-when {
  font-size: 12px;
  color: var(--text-tertiary);
}
.enviado-card-sp {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.enviado-card-chevron {
  flex: 0 0 16px;
  margin-top: 10px;
  color: var(--text-tertiary);
  display: grid;
  place-items: center;
}

.enviado-sheet {
  flex-shrink: 0;
  margin-bottom: 8px;
}
.enviado-sheet-when {
  margin: 0;
  padding: 10px 18px 0;
  font-size: 12.5px;
  color: #8B93A7;
}
.enviado-species {
  padding: 4px 14px 8px;
}
.enviado-species .receipt-block-title {
  color: #151821;
  margin: 8px 4px 10px;
}
.enviado-empty-sp {
  margin: 0 4px 8px;
  font-size: 13.5px;
  color: #5B6478;
}
.enviado-sp {
  background: #fff;
  border-radius: 16px;
  padding: 12px 12px 10px;
  margin-bottom: 8px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.enviado-sp-name {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #151821;
  font-style: italic;
}
.enviado-depths {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.enviado-depth {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 62px;
  padding: 6px 8px;
  border-radius: 12px;
  background: #F3F0FF;
  border: 1px solid rgba(110, 91, 255, 0.12);
}
.enviado-depth em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8B93A7;
}
.enviado-depth strong {
  font-size: 15px;
  font-weight: 750;
  color: #151821;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.enviado-depth small {
  font-size: 10px;
  color: #8B7CFF;
  font-weight: 650;
}
.enviado-depth.is-empty {
  background: #F4F5F8;
  border-color: transparent;
  color: #8B93A7;
  font-size: 12px;
  min-width: 0;
}
.enviado-amb-value {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  color: #151821;
  letter-spacing: -0.03em;
}
.enviado-sheet .enviado-note {
  margin: 4px 18px 16px;
  font-size: 12.5px;
  color: #8B93A7;
  line-height: 1.4;
}
.action-icon.sm svg {
  width: 19px;
  height: 19px;
  opacity: .9;
}

/* ============================================================ */
/* Bottom nav                                                     */
/* ============================================================ */

#bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding: 8px 6px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(9, 10, 15, 0.88);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  z-index: 40;
  border-top: 1px solid var(--line);
}

.nav-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px 6px;
  min-width: 52px;
  font-weight: 500;
  transition: color .2s ease;
}
.nav-btn img {
  width: 20px;
  height: 20px;
  opacity: .45;
  filter: invert(1);
}
.nav-btn.active { color: var(--accent-2); }
.nav-btn.active img {
  opacity: 1;
  filter: invert(48%) sepia(78%) saturate(2476%) hue-rotate(226deg) brightness(98%) contrast(97%);
}

.nav-fab {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(160deg, #A598FF 0%, #7B6CFF 42%, #5646D8 100%);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin-top: -26px;
  margin-bottom: 6px;
  box-shadow:
    0 14px 30px rgba(86, 70, 216, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.nav-fab::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 108, 255, 0.38) 0%, rgba(123, 108, 255, 0.08) 55%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}
.nav-fab svg {
  width: 24px;
  height: 24px;
  display: block;
}
.nav-fab:active {
  transform: scale(0.94);
  filter: brightness(0.96);
}

/* ============================================================ */
/* Overlay instalación PWA (pantalla completa + fondo difuso)   */
/* ============================================================ */

.pwa-install-overlay {
  display: none; /* Solo JS + beforeinstallprompt lo hace visible */
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}

.pwa-install-overlay[hidden] {
  display: none !important;
}

.pwa-install-overlay.is-visible {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.pwa-install-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 12, 0.62);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.pwa-install-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  padding: 28px 22px 22px;
  border-radius: 28px;
  border: 1px solid rgba(139, 124, 255, 0.32);
  background:
    linear-gradient(165deg, rgba(36, 32, 68, 0.98) 0%, rgba(16, 17, 28, 0.99) 48%, rgba(9, 10, 15, 1) 100%);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 60px rgba(110, 91, 255, 0.2);
  transform: translateY(18px) scale(0.96);
  transition: transform .4s var(--ease);
}

.pwa-install-overlay.is-visible .pwa-install-sheet {
  transform: none;
  animation: pwa-install-sheet-in .45s var(--ease);
}

@keyframes pwa-install-sheet-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pwa-install-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 50% -10%, rgba(139, 124, 255, 0.32), transparent 55%);
  pointer-events: none;
}

.pwa-install-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-tertiary);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.pwa-install-dismiss:active { transform: scale(0.92); }
.pwa-install-dismiss:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.pwa-install-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.pwa-install-inner.is-busy .pwa-install-icon {
  width: auto;
  height: 44px;
  max-width: 220px;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 2px;
  object-fit: contain;
  background: transparent;
  animation: pwa-install-pulse 1.2s ease-in-out infinite;
}
.pwa-install-inner.is-ready .pwa-install-icon,
.pwa-install-inner.is-success .pwa-install-icon {
  animation: none;
}

.pwa-install-open-btn.is-hidden,
.pwa-install-btn.is-hidden,
.pwa-install-continue.is-hidden,
.pwa-install-dismiss.is-hidden,
.pwa-install-progress.is-hidden,
.pwa-install-hint.is-hidden,
.pwa-install-done-btn.is-hidden,
.pwa-install-success-badge.is-hidden,
.pwa-install-icon.is-hidden,
.pwa-install-tip.is-hidden,
.pwa-install-next-step.is-hidden,
.pwa-install-eyebrow.is-hidden,
.pwa-install-ios-steps.is-hidden,
.pwa-install-ios-note.is-hidden {
  display: none !important;
}

.pwa-install-ios-steps {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.pwa-install-ios-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pwa-ios-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, #9B8CFF, #6E5BFF);
}

.pwa-ios-text {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  padding-top: 2px;
}
.pwa-ios-text strong { color: var(--text); font-weight: 700; }

.pwa-ios-share {
  display: inline-block;
  vertical-align: -3px;
  color: #60A5FA;
  margin: 0 2px;
}

.pwa-install-ios-note {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-tertiary);
  max-width: 34ch;
}

.pwa-install-progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 2px 0 4px;
}

.pwa-install-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8B7CFF, #6E5BFF, #A78BFA);
  transition: width .4s linear;
}

.pwa-install-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #86efac;
}

.pwa-install-tip {
  width: 100%;
  margin-top: 4px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(139, 124, 255, 0.28);
  background: rgba(110, 91, 255, 0.12);
  text-align: left;
  min-height: 74px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: pwa-tip-in .35s var(--ease);
}

.pwa-install-tip-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #C4B5FD;
}
.pwa-install-tip-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.pwa-install-tip-copy {
  min-width: 0;
  flex: 1;
}

.pwa-install-tip-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 6px;
}

.pwa-install-tip-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: -0.01em;
}

.pwa-install-next-step {
  width: 100%;
  margin-top: 6px;
  padding: 16px 15px;
  border-radius: 18px;
  border: 1px solid rgba(74, 222, 128, 0.35);
  background:
    linear-gradient(160deg, rgba(34, 197, 94, 0.18), rgba(255, 255, 255, 0.03));
  text-align: left;
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.12);
  animation: pwa-success-pop .45s var(--ease);
}

.pwa-install-next-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #86efac;
  margin-bottom: 8px;
}

.pwa-install-next-text {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text);
}

.pwa-install-success-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: #052e16;
  background: linear-gradient(145deg, #4ade80, #22c55e);
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.35);
  animation: pwa-success-pop .45s var(--ease);
}

.pwa-install-inner.is-success .pwa-install-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-secondary);
}

.pwa-install-inner.is-success .pwa-install-sub {
  display: none;
}

.pwa-install-inner.is-busy .pwa-install-title {
  font-size: 18px;
}

.pwa-install-inner.is-busy .pwa-install-sub {
  display: none;
}

.pwa-install-done-btn {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.pwa-install-done-btn:active { transform: scale(0.975); }
.pwa-install-done-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

@keyframes pwa-success-pop {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: none; }
}

@keyframes pwa-tip-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

a.pwa-install-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.pwa-install-icon {
  width: auto;
  height: 48px;
  max-width: 220px;
  border-radius: 0;
  object-fit: contain;
  margin-bottom: 6px;
  box-shadow: none;
  background: transparent;
}

.pwa-install-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.2;
}

.pwa-install-sub {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.45;
  max-width: 28ch;
}

.pwa-install-btn {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 16px;
  padding: 15px 18px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(145deg, #9B8CFF 0%, #6E5BFF 45%, #5340D4 100%);
  box-shadow:
    0 12px 32px rgba(110, 91, 255, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.pwa-install-btn:active {
  transform: scale(0.975);
  filter: brightness(0.96);
}
.pwa-install-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.pwa-install-continue {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 8px 2px;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.pwa-install-continue:hover { color: var(--text-secondary); }

@keyframes pwa-install-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.96); opacity: 0.85; }
}

/* ============================================================ */
/* Modal                                                          */
/* ============================================================ */

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 10, .72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
  backdrop-filter: blur(8px);
}
.modal-backdrop.visible { display: flex; }
.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow-soft);
}
.modal h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--text); }
.modal p.hint { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary); }
.modal label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 12px 0 6px;
}
.modal input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.modal input:focus { outline: none; border-color: rgba(110,91,255,0.5); }
.modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.modal button {
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.modal .btn-secondary { background: rgba(255,255,255,.06); color: var(--text); }
.modal .btn-primary {
  background: linear-gradient(145deg, var(--accent-2), #5B4BE0);
  color: #fff;
}
.settings-field-error {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #f3b4b4;
}

.app-sheet-label {
  display: block;
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(245, 246, 250, 0.72);
}
.app-sheet-input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(139, 124, 255, 0.28);
  border-radius: 14px;
  font-size: 15px;
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.app-sheet-input:focus {
  outline: none;
  border-color: rgba(139, 124, 255, 0.7);
}
.app-sheet-error {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #f3b4b4;
}
#device-name-save { margin-top: 16px; }
#device-name-overlay { z-index: 220; }
#device-name-overlay .app-sheet-inner { text-align: left; }
#device-name-overlay .app-sheet-title,
#device-name-overlay .app-sheet-sub { text-align: center; }

/* ============================================================ */
/* Offline drafts / pendientes / modo manual                     */
/* ============================================================ */

/* ============================================================ */
/* Overlays de decisión (mismo patrón visual que instalar PWA) */
/* ============================================================ */

.app-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 190;
  align-items: center;
  justify-content: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.app-sheet-overlay[hidden] { display: none !important; }
.app-sheet-overlay.is-visible {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.app-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 12, 0.62);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.app-sheet {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  padding: 28px 22px 22px;
  border-radius: 28px;
  border: 1px solid rgba(139, 124, 255, 0.32);
  background:
    linear-gradient(165deg, rgba(36, 32, 68, 0.98) 0%, rgba(16, 17, 28, 0.99) 48%, rgba(9, 10, 15, 1) 100%);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 60px rgba(110, 91, 255, 0.2);
  transform: translateY(18px) scale(0.96);
  transition: transform .4s var(--ease);
}
.app-sheet-overlay.is-visible .app-sheet {
  transform: none;
  animation: app-sheet-in .45s var(--ease);
}
@keyframes app-sheet-in {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.app-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 50% -10%, rgba(139, 124, 255, 0.32), transparent 55%);
  pointer-events: none;
}
.app-sheet-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 246, 250, 0.85);
  cursor: pointer;
}
.app-sheet-dismiss:active { transform: scale(0.92); }
.app-sheet-dismiss:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.app-sheet-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.app-sheet-eyebrow {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C4B5FD;
}
.app-sheet-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
}
.app-sheet-sub {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.app-sheet-primary,
.app-sheet-secondary {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.app-sheet-primary {
  background: linear-gradient(145deg, var(--accent-2), #5B4BE0);
  color: #fff;
}
.app-sheet-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.app-sheet-primary:active,
.app-sheet-secondary:active { transform: scale(0.98); }

.modo-registro-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  margin-top: 4px;
}
.modo-registro-item {
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modo-registro-item strong { font-size: 15px; }
.modo-registro-item span { font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; }
.modo-registro-item.recommended {
  border-color: rgba(52, 211, 153, .55);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, .18);
  background: rgba(52, 211, 153, .08);
}

.ai-queue-banner {
  position: sticky;
  bottom: 72px;
  margin: 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(251, 191, 36, .15);
  color: #FDE68A;
  font-size: 12.5px;
  text-align: center;
  z-index: 5;
}

.nav-btn { position: relative; }
.nav-badge, .action-badge {
  position: absolute;
  top: 2px;
  right: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #F43F5E;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-badge[hidden],
.action-badge[hidden] {
  display: none !important;
}
.action-secondary { position: relative; }
.action-badge { top: 10px; right: 36px; }

/* Filtro por sistema en Pendientes */
.pendientes-filters {
  display: flex;
  gap: 8px;
  padding: 4px 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.pendientes-filters[hidden] { display: none !important; }
.pendientes-filters::-webkit-scrollbar { display: none; }

.pendientes-filter-chip {
  --chip-accent: var(--accent);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 7px 11px 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background .22s var(--ease),
    color .22s var(--ease),
    border-color .22s var(--ease),
    box-shadow .22s var(--ease),
    transform .18s var(--ease);
}
.pendientes-filter-chip:active { transform: scale(0.96); }
.pendientes-filter-chip:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
.pendientes-filter-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 4px;
  opacity: 0.85;
  filter: brightness(1.05);
}
.pendientes-filter-label { line-height: 1; }
.pendientes-filter-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.06);
  transition: background .22s var(--ease), color .22s var(--ease);
}

.pendientes-filter-chip.active {
  color: var(--text);
  background: color-mix(in srgb, var(--chip-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--chip-accent) 45%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chip-accent) 18%, transparent),
    0 8px 20px color-mix(in srgb, var(--chip-accent) 16%, transparent);
}
.pendientes-filter-chip.active .pendientes-filter-icon { opacity: 1; }
.pendientes-filter-chip.active .pendientes-filter-count {
  color: #fff;
  background: var(--chip-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--chip-accent) 40%, transparent);
}

/* Fallback si el navegador no soporta color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .pendientes-filter-chip.active {
    background: var(--accent-soft);
    border-color: var(--accent-ring);
    box-shadow: 0 0 0 1px rgba(110, 91, 255, 0.12), 0 8px 20px rgba(110, 91, 255, 0.14);
  }
  .pendientes-filter-chip.active .pendientes-filter-count {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(110, 91, 255, 0.35);
  }
}

.pendientes-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pendiente-card {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pendiente-card.status-needs_input { border-color: rgba(251, 191, 36, .5); }
.pendiente-card.status-ready_to_sync { border-color: rgba(52, 211, 153, .45); }
.pendiente-card.status-error { border-color: rgba(244, 63, 94, .5); }
.pendiente-main { display: flex; flex-direction: column; gap: 4px; }
.pendiente-main strong { font-size: 15px; }
.pendiente-meta { font-size: 12.5px; color: var(--text-secondary); }
.pendiente-meta-lugar { color: var(--accent-2); font-weight: 600; }
.pendiente-date { font-size: 12px; color: rgba(245, 246, 250, 0.62); }
.pendiente-faltan { font-size: 12.5px; color: #FBBF24; }
.pendiente-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pendiente-actions-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.pendiente-actions-row:has(> :nth-child(2):last-child) {
  grid-template-columns: 1fr auto;
}
.pendiente-actions-row .btn-primary,
.pendiente-actions-row .btn-secondary,
.pendiente-actions-row .btn-text-link {
  margin: 0;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap;
}
.pendiente-actions-row .pendiente-open { width: 100%; }
.pendiente-actions-row .pendiente-discard {
  justify-self: end;
  padding-left: 8px;
  padding-right: 8px;
}

.manual-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 14px 12px;
  overflow: auto;
}
/* display:flex arriba gana al UA [hidden]; sin esto el formulario se ve en el picker */
.manual-form[hidden] {
  display: none !important;
}
.manual-form-head {
  margin: 2px 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* display:flex arriba gana al UA [hidden]; REGMA/Playas lo ocultan vía JS */
.manual-form-head[hidden] {
  display: none !important;
}
#manual-step-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0f766e;
  letter-spacing: 0.02em;
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-radius: 999px;
  padding: 8px 14px;
}
.mf-step-num {
  font-variant-numeric: tabular-nums;
  color: #0d9488;
}
.mf-step-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #99f6e4;
  flex-shrink: 0;
}
.mf-step-name {
  color: #134e4a;
  font-weight: 700;
}
.manual-form-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}
.mf-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  color: #4b5563;
  width: 100%;
}
.mf-field-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 650;
  color: #334155;
}
.mf-field-label svg {
  color: #0d9488;
  flex-shrink: 0;
  opacity: .9;
}
.mf-field input, .mf-field select {
  width: 100%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mf-field input:focus, .mf-field select:focus {
  outline: none;
  border-color: #5eead4;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}
.mf-field-error {
  margin: -4px 0 8px;
  font-size: 12px;
  color: #be123c;
  line-height: 1.35;
}
.mf-field-hint {
  margin: -2px 0 4px;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.35;
}
.mf-field input.invalid,
.mf-field select.invalid {
  border-color: #e11d48;
  background: #fff1f2;
}
.mf-restore-btn {
  align-self: flex-start;
  border: 1px dashed #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.mf-restore-btn:hover { background: #ccfbf1; }
.mf-tecnica-otra {
  margin-top: 8px;
}
.mf-optional {
  padding-top: 8px;
}
.mf-optional-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.mf-optional-sum::-webkit-details-marker { display: none; }
.mf-optional-sum .mf-block-title { margin: 0; flex: 1; }
.mf-optional-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px 8px;
  flex-shrink: 0;
}
.mf-optional[open] .mf-optional-sum { margin-bottom: 8px; }
.mf-optional .mf-block-hint { margin-left: 0; }
.mf-otros-spacer { width: 34px; height: 1px; }
.draft-row-missing .draft-check { opacity: .45; }
.draft-row-missing .draft-value-btn { color: #0d9488; font-weight: 650; }
.mf-block {
  border: 1px solid #e8eef3;
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.mf-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 750;
  margin-bottom: 6px;
  color: #0f172a;
}
.mf-block-ico {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.mf-block-ico-species {
  color: #0f766e;
  background: #ccfbf1;
}
.mf-block-ico-water {
  color: #0369a1;
  background: #e0f2fe;
}
.mf-block-ico-fish {
  color: #b45309;
  background: #ffedd5;
}
.mf-block-hint {
  margin: 0 0 12px 36px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}
.mf-card {
  border: 1px solid #e8eef3;
  border-radius: 12px;
  padding: 11px;
  margin-bottom: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.mf-card:last-child { margin-bottom: 0; }
.mf-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}
.mf-sp-wrap { position: relative; min-width: 0; }
.mf-sp-name, .mf-amb-name, .mf-card input[type="text"], .mf-card input[type="number"] {
  width: 100%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  box-sizing: border-box;
}
.mf-sp-name:focus, .mf-amb-name:focus, .mf-card input:focus {
  outline: none;
  border-color: #5eead4;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.16);
}
.mf-depth-cell span {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  text-align: center;
  letter-spacing: .02em;
}
.mf-depth-cell input {
  width: 100%;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}
.mf-depth-cell input:focus {
  outline: none;
  border-color: #5eead4;
  background: #fff;
}
.mf-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 8;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #ccfbf1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
  display: none;
}
.mf-suggest.open { display: block; }
.mf-suggest button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #0f172a;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}
.mf-suggest button:last-child { border-bottom: 0; }
.mf-suggest button:hover, .mf-suggest button.active { background: #f0fdfa; }
.mf-suggest strong { font-size: 13px; font-weight: 650; }
.mf-suggest em {
  font-style: normal;
  font-size: 11px;
  color: #6b7280;
  text-transform: capitalize;
}
.mf-depths {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.mf-depth-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mf-row-del {
  border: none;
  background: #fff1f2;
  color: #e11d48;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: background .15s ease;
}
.mf-row-del:hover { background: #ffe4e6; }
.mf-otros-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eef2f7;
}
.mf-otros-row input,
.mf-otros-row select {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.mf-otros-row input:focus,
.mf-otros-row select:focus {
  outline: none;
  border-color: #5eead4;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.16);
}
.mf-otros-label {
  font-size: 12.5px;
  font-weight: 650;
  color: #334155;
  line-height: 1.25;
}
.mf-otros-name { min-width: 0; }
.mf-card-head .mf-otros-label {
  display: block;
  padding: 8px 2px;
}
/* ============================================================
 * FAN manual form — estilos SCOPED a #view-registro.fan-mode
 * No deben afectar Playas (playas-mode) ni REGMA (regma-mode).
 * ============================================================ */
#view-registro.fan-mode .mf-add-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  border: 1px solid #99f6e4 !important;
  background: #ccfbf1 !important;
  color: #0f766e !important;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
}
#view-registro.fan-mode .mf-add-btn:hover {
  background: #99f6e4 !important;
  border-color: #5eead4 !important;
}
#view-registro.fan-mode .mf-add-btn svg {
  flex-shrink: 0;
}
#view-registro.fan-mode .mf-row-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}
#view-registro.fan-mode .mf-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
#view-registro.fan-mode .mf-check input {
  width: 15px;
  height: 15px;
  accent-color: #0d9488;
  flex-shrink: 0;
  margin: 0;
}
#view-registro.fan-mode .mf-block {
  border: 1px solid #e8eef3;
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
#view-registro.fan-mode .mf-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 750;
  margin-bottom: 6px;
  color: #0f172a;
}
#view-registro.fan-mode .mf-block-ico {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
#view-registro.fan-mode .mf-block-ico-species { color: #0f766e; background: #ccfbf1; }
#view-registro.fan-mode .mf-block-ico-water { color: #0369a1; background: #e0f2fe; }
#view-registro.fan-mode .mf-block-ico-fish { color: #b45309; background: #ffedd5; }
#view-registro.fan-mode .mf-block-ico-place { color: #7c3aed; background: #ede9fe; }
#view-registro.fan-mode .mf-block-ico-sea { color: #0369a1; background: #e0f2fe; }
#view-registro.fan-mode .mf-block-ico-sky { color: #0369a1; background: #f0f9ff; }
#view-registro.fan-mode .mf-optional-sum .mf-block-title { margin-bottom: 0; }
#view-registro.fan-mode .mf-optional .mf-block-hint { margin-left: 0; }
#view-registro.fan-mode .mf-field-error { color: #be123c; }
#view-registro.fan-mode .mf-field input.invalid,
#view-registro.fan-mode .mf-field select.invalid {
  border-color: #e11d48;
  background: #fff1f2;
}
#view-registro.fan-mode .mf-restore-btn { color: #0f766e; }
#view-registro.fan-mode .mf-block-hint {
  margin: 0 0 12px 36px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}
#view-registro.fan-mode .mf-block-hint.is-live {
  color: #0f766e;
}
#view-registro.fan-mode .mf-amb-sensor-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: #0f766e;
  font-weight: 750;
  cursor: pointer;
}
#view-registro.fan-mode .mf-sensor-panel {
  position: relative;
  border: 1px solid #99f6e4;
  background: linear-gradient(180deg, #f0fdfa 0%, #fff 48%);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 4px;
}
#view-registro.fan-mode .mf-sensor-panel.is-updating {
  opacity: 0.78;
}
#view-registro.fan-mode .mf-sensor-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ccfbf1;
  border-bottom: 1px solid #99f6e4;
}
#view-registro.fan-mode .mf-sensor-pill {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: #0d9488;
  border-radius: 999px;
  padding: 3px 7px;
}
#view-registro.fan-mode .mf-sensor-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#view-registro.fan-mode .mf-sensor-copy strong {
  font-size: 13px;
  font-weight: 750;
  color: #115e59;
  line-height: 1.2;
}
#view-registro.fan-mode .mf-sensor-copy span {
  font-size: 11px;
  color: #0f766e;
  line-height: 1.3;
}
#view-registro.fan-mode .mf-sensor-edit {
  flex-shrink: 0;
  border: 0;
  background: #fff;
  color: #0f766e;
  font-size: 12px;
  font-weight: 750;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
#view-registro.fan-mode .mf-sensor-edit:active {
  transform: scale(0.97);
}
#view-registro.fan-mode .mf-sensor-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#view-registro.fan-mode .mf-sensor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#view-registro.fan-mode .mf-sensor-table th,
#view-registro.fan-mode .mf-sensor-table td {
  padding: 7px 6px;
  text-align: center;
  border-bottom: 1px solid #e6f7f4;
  color: #0f172a;
}
#view-registro.fan-mode .mf-sensor-table thead th {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
}
#view-registro.fan-mode .mf-sensor-table tbody th {
  text-align: left;
  font-weight: 650;
  color: #334155;
  padding-left: 12px;
  white-space: nowrap;
}
#view-registro.fan-mode .mf-sensor-table tr.is-api th {
  color: #0f766e;
}
#view-registro.fan-mode .mf-sensor-table tbody tr:last-child th,
#view-registro.fan-mode .mf-sensor-table tbody tr:last-child td {
  border-bottom: 0;
}
#view-registro.fan-mode .mf-sensor-searching {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 12.5px;
  font-weight: 650;
}
#view-registro.fan-mode .mf-sensor-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #99f6e4;
  border-top-color: #0d9488;
  animation: mf-sensor-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes mf-sensor-spin {
  to { transform: rotate(360deg); }
}
#view-registro.fan-mode .mf-field-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 650;
  color: #334155;
}
#view-registro.fan-mode .mf-field-label svg {
  color: #0d9488;
  flex-shrink: 0;
  opacity: .9;
}
#view-registro.fan-mode .mf-field input,
#view-registro.fan-mode .mf-field select {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 12px;
  padding: 12px 14px;
}
#view-registro.fan-mode .mf-field input:focus,
#view-registro.fan-mode .mf-field select:focus {
  outline: none;
  border-color: #5eead4;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}
#view-registro.fan-mode #manual-step-label {
  color: #0f766e;
  background: #f0fdfa;
  border-color: #ccfbf1;
}

.mf-row-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}
.mf-row-actions .mf-add-btn,
.mf-row-actions .btn-secondary.mf-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  border: 1px solid #cce8e4;
  background: #f0fdfa;
  color: #0f766e;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
}
.mf-row-actions .mf-add-btn:hover {
  background: #ccfbf1;
  border-color: #99f6e4;
}
.mf-row-actions .mf-add-btn svg {
  flex-shrink: 0;
}
.mf-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.mf-check input {
  width: 15px;
  height: 15px;
  accent-color: #0d9488;
  flex-shrink: 0;
  margin: 0;
}
.mf-check span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.progress-step:disabled {
  opacity: 1;
  cursor: default;
}
#view-registro.manual-mode:not(.regma-mode) .progress-step:not(:disabled) {
  cursor: pointer;
}
#view-registro.manual-mode:not(.regma-mode) .progress-step:not(:disabled):hover {
  color: var(--text);
}
#view-registro.manual-mode:not(.regma-mode) .progress-step:not(:disabled):hover .dot {
  border-color: var(--accent-2);
}
.mf-empty { font-size: 12.5px; color: #64748b; margin: 0; padding: 4px 2px; }

/* --- Playas Limpias: detalle_residuos / percentage_group / people_list / photo_slots --- */
.mf-residuo-row { border-left: 4px solid transparent; }
.mf-residuo-sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}
.mf-residuo-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #475569;
}
.mf-residuo-sub-row input { width: 84px; }
.mf-pct-total {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  margin-top: 6px;
  display: inline-block;
}
.mf-pct-ok { background: #dcfce7; color: #15803d; }
.mf-pct-warn { background: #fef3c7; color: #92400e; }
.mf-photo-slots {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mf-photo-slot { display: flex; }
.mf-photo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 84px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-size: 12.5px;
  cursor: pointer;
}
.mf-photo-slot.done .mf-photo-btn {
  border-color: #22c55e;
  background: #f0fdf4;
  color: #15803d;
}
.mf-photo-check { font-size: 18px; }
.manual-form-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 12px 0 8px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%);
  margin-top: auto;
}
.manual-nav-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.manual-form-actions[hidden] {
  display: none !important;
}
.manual-form-actions .btn-primary,
.manual-form-actions .btn-secondary,
.pendiente-actions .btn-primary,
.pendiente-actions .btn-secondary {
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.manual-form-actions .btn-primary,
.pendiente-actions .btn-primary {
  background: linear-gradient(145deg, var(--accent-2), #5B4BE0);
  color: #fff;
}
.manual-form-actions .btn-secondary,
.pendiente-actions .btn-secondary {
  background: #e5e7eb;
  color: #111827;
}
.manual-form-actions .btn-primary-lg {
  width: 100%;
  min-width: 0;
  border: none;
  border-radius: 12px;
  padding: 13px 14px;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(145deg, #34D399, #059669);
  color: #052e1c;
  cursor: pointer;
}
.manual-form-actions .btn-primary-lg[hidden] {
  display: none !important;
}
#view-registro.manual-mode #composer,
#view-registro.manual-mode #messages { display: none !important; }
#view-registro.manual-mode:not(.regma-mode):not(.playas-mode) #manual-form:not([hidden]) {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 0;
  margin: 0;
  padding: 16px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  color: #111827;
  box-shadow: none;
}
#view-registro.manual-mode.regma-mode #manual-form:not([hidden]),
#view-registro.manual-mode.playas-mode #manual-form:not([hidden]) {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
}
/* Fuera de modo formulario, nunca mostrar #manual-form (evita barra/acciones fantasma) */
#view-registro:not(.manual-mode):not(.is-booting) > #manual-form {
  display: none !important;
}

/* Boot de registro (FAN/REGMA/Playas): spinner visible aunque aún no haya manual-mode. */
#view-registro.is-booting > #manual-form {
  display: flex !important;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 2;
  background: transparent;
}
#view-registro.is-booting > #registro-picker,
#view-registro.is-booting > #messages,
#view-registro.is-booting > #composer,
#view-registro.is-booting > #progress-bar-wrap,
#view-registro.is-booting > #offline-banner,
#view-registro.is-booting > #ai-queue-banner {
  display: none !important;
}
#view-registro.is-booting .registro-boot-loading {
  color: var(--text-secondary, #a8b0c0);
}

/* ============================================================ */
/* REGMA — chequeos e inspecciones                               */
/* Oscuro, premium, orientado a terreno. Acento violeta = IA;    */
/* verde = cumple; rojo = no cumple. Controles grandes, sin      */
/* depender solo del color (siempre hay ícono + texto).          */
/* ============================================================ */

#view-registro.regma-mode .manual-form { overflow: auto; -webkit-overflow-scrolling: touch; }
#view-registro.regma-mode > #manual-form { position: relative; z-index: 1; }
#view-registro.regma-mode #manual-form-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }

.regma-notice, .regma-api-note { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.regma-notice { padding: 10px 12px; border-radius: 10px; background: rgba(245,158,11,.12); color: #FCD34D; }
.regma-notice.is-error { background: rgba(239,68,68,.16); color: #FCA5A5; }
.regma-grid label.is-sync-error select,
.regma-grid label.is-sync-error input { outline: 2px solid #F87171; }
.regma-grid { display: grid; gap: 11px; }
.regma-grid label { display: grid; gap: 5px; font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.regma-grid input, .regma-grid select {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 12px 13px;
  font: inherit;
  font-size: 14px;
}
.regma-fixed { font-size: 13px; color: var(--text-secondary); }

/* --- Toast flotante (confirmaciones "✓ Guardado") --- */
.regma-toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 8px);
  background: rgba(20,22,30,.96);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  z-index: 40;
}
.regma-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* --- Tarjeta de progreso (pantalla general) --- */
.regma-progress-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  background: #08090E;
}
.regma-progress-card::before {
  content: "";
  position: absolute;
  top: -27%;
  right: -3%;
  width: 51%;
  height: 102%;
  z-index: -2;
  background-image: url("./branding/regma-hero-barco.jpg");
  background-size: cover;
  background-position: 58% 8%;
  background-repeat: no-repeat;
  opacity: 0.95;
  pointer-events: none;
  /* Bordes difusos: la foto se funde con el fondo oscuro */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 26%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 26%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}
.regma-progress-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Sombra suave a la izquierda para legibilidad, sin tapa dura */
    linear-gradient(
      90deg,
      #08090E 0%,
      #08090E 14%,
      rgba(8, 9, 14, 0.72) 32%,
      rgba(8, 9, 14, 0.2) 48%,
      transparent 62%
    ),
    /* Transición inferior hacia el bloque de Continuar */
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 42%,
      rgba(8, 9, 14, 0.35) 62%,
      rgba(8, 9, 14, 0.85) 82%,
      #08090E 100%
    );
  pointer-events: none;
}
.regma-progress-main {
  display: block;
  padding: 14px 16px 2px;
  position: relative;
  z-index: 1;
}
.regma-progress-meter {
  width: 59%;
  max-width: 66.666%;
  min-width: 0;
}
.regma-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.regma-progress-score {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
  min-width: 0;
}
.regma-progress-num {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.regma-progress-unit {
  font-size: 12px;
  font-weight: 600;
  color: rgba(200, 205, 220, 0.78);
  letter-spacing: 0.01em;
}
.regma-progress-pct {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 22px;
  font-weight: 800;
  color: #C4B5FD;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.regma-progress-track {
  height: 8px;
  width: 100%;
  max-width: none;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.regma-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #34D399, #10B981);
  transition: width .4s var(--ease);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
}
.regma-progress-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 10px 16px 10px;
  border-top: 0;
  position: relative;
  z-index: 1;
  background: transparent;
}
.regma-progress-resume-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.regma-progress-resume-label {
  font-size: 10.5px;
  color: rgba(180, 186, 205, 0.78);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.regma-progress-resume-text strong {
  font-size: 13.5px;
  color: #fff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.regma-progress-resume .btn-primary {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8B7CFF, #6E5BFF);
  box-shadow: 0 8px 20px rgba(110, 91, 255, 0.35);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.regma-offline-note {
  font-size: 12.5px;
  color: #93C5FD;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 12px;
  padding: 11px 13px;
  line-height: 1.4;
}

/* --- Banner "revisión IA disponible" al reconectar --- */
.regma-sync-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
  border-radius: 14px;
  padding: 12px 14px;
}
.regma-sync-banner-text { font-size: 13px; color: var(--text); font-weight: 600; }
.regma-sync-banner-actions { display: flex; gap: 6px; align-items: center; }

/* --- Buscador + filtros --- */
.regma-search input {
  width: 100%;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
}
.regma-search input::placeholder { color: var(--text-tertiary); }

.regma-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.regma-filters::-webkit-scrollbar { display: none; }
.regma-filter-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.regma-filter-chip span { font-variant-numeric: tabular-nums; opacity: .8; }
.regma-filter-chip.active { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--text); }
.regma-filter-chip.is-bad.active { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.4); color: #FCA5A5; }
.regma-filter-chip.is-ok.active { background: var(--green-soft); border-color: rgba(34,197,94,.4); color: #86EFAC; }

/* --- Secciones colapsables + filas de puntos --- */
.regma-sections { display: flex; flex-direction: column; gap: 8px; }
.regma-section-group {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.regma-section-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 12px;
  background: #00000033;
  backdrop-filter: blur(3px);
}
.regma-section-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 3px 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.regma-section-icon { flex-shrink: 0; width: 24px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; }
.regma-section-name { flex: 1; font-size: 13.5px; font-weight: 700; min-width: 0; }
.regma-section-count { flex-shrink: 0; font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.regma-section-chevron { flex-shrink: 0; display: flex; color: var(--text-tertiary); transition: transform .2s var(--ease); }
.regma-section-chevron.open { transform: rotate(180deg); }

.regma-section-bulk-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(52,211,153,.28);
  background: rgba(52,211,153,.1);
  color: #6EE7B7;
  border-radius: 999px;
  padding: 7px 7px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.regma-section-bulk-btn svg { flex-shrink: 0; }
.regma-section-bulk-btn:active { background: rgba(52,211,153,.2); }
.regma-section-bulk-btn.is-done { background: rgba(52,211,153,.22); border-color: rgba(52,211,153,.5); color: #A7F3D0; }
.regma-section-bulk-btn.is-rest { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.4); }
.regma-section-body { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.06); }
.regma-section-body[hidden] { display: none; }
.regma-empty { padding: 12px 14px; font-size: 12.5px; color: var(--text-tertiary); margin: 0; }

.regma-point-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: #00000033;
  backdrop-filter: blur(3px);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.regma-point-row:last-child { border-bottom: none; }
.regma-point-row:active { background: rgba(255,255,255,.03); }
.regma-point-icon { flex-shrink: 0; display: flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; }
.regma-point-row.state-pending .regma-point-icon { color: var(--text-tertiary); }
.regma-point-row.state-ok .regma-point-icon { color: #052e1c; background: #34D399; }
.regma-point-row.state-bad .regma-point-icon { color: #fff; background: #F87171; }
.regma-point-text { flex: 1; line-height: 1.35; min-width: 0; }
.regma-point-row.state-ok .regma-point-text { color: var(--text-secondary); }
.regma-ia-flag { flex-shrink: 0; font-size: 13px; }
.regma-point-arrow { flex-shrink: 0; color: var(--text-tertiary); }

.regma-overview-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.regma-next-pending-btn {
  border: 1px dashed var(--accent-ring);
  background: transparent;
  color: var(--accent-2);
  border-radius: 14px;
  padding: 13px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

/* Finalizar: barra sticky abajo, solo cuando no quedan pendientes. */
#view-registro.regma-mode.regma-ready-finish #manual-form-body {
  padding-bottom: 110px;
}
#view-registro.regma-mode .manual-form-actions.regma-finish-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 12px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(9, 10, 15, 0), rgba(9, 10, 15, 0.92) 28%, #090A0F 70%);
  border-top: 0;
  z-index: 6;
}
#view-registro.regma-mode .manual-form-actions.regma-finish-actions .regma-finish-hint {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #86EFAC;
  letter-spacing: 0.01em;
}
#view-registro.regma-mode .manual-form-actions.regma-finish-actions .btn-primary-lg {
  width: 100%;
  min-width: 0;
}

/* --- Vista de punto (Cumple / No cumple) --- */
.regma-point-detail, .regma-hallazgo { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.regma-point-progress { margin: 0; font-size: 12px; color: var(--text-tertiary); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.regma-point-question { margin: 0; font-size: 21px; line-height: 1.32; font-weight: 700; color: var(--text); letter-spacing: -0.015em; }

.regma-answer-grid { display: grid; gap: 12px; margin-top: 6px; }
.regma-answer-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 20px 18px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.02) 38%, rgba(0,0,0,.28) 100%),
    linear-gradient(155deg, #1c2033 0%, #0d101a 62%, #0a0c14 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 10px 22px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.03);
  transition: transform .16s var(--ease), border-color .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
}
.regma-answer-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.08), transparent 55%);
}
.regma-answer-btn-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.regma-answer-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px currentColor);
}
.regma-answer-btn:active { transform: scale(0.98) translateY(1px); }
.regma-answer-btn.is-ok {
  color: #86EFAC;
  border-color: rgba(52, 211, 153, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 10px 22px rgba(0,0,0,.42),
    0 0 0 1px rgba(52, 211, 153, .1),
    0 0 26px rgba(34, 197, 94, .18);
}
.regma-answer-btn.is-ok::before {
  background: radial-gradient(120% 80% at 50% 0%, rgba(52, 211, 153, .22), transparent 55%);
}
.regma-answer-btn.is-ok.is-selected,
.regma-answer-btn.is-ok:hover {
  border-color: rgba(52, 211, 153, 0.65);
  background:
    linear-gradient(180deg, rgba(52,211,153,.18) 0%, rgba(52,211,153,.05) 40%, rgba(0,0,0,.28) 100%),
    linear-gradient(155deg, #142820 0%, #0b1410 62%, #0a0c14 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 10px 24px rgba(0,0,0,.45),
    0 0 0 1px rgba(52, 211, 153, .16),
    0 0 30px rgba(34, 197, 94, .32);
}
.regma-answer-btn.is-bad {
  color: #FCA5A5;
  border-color: rgba(248, 113, 113, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 10px 22px rgba(0,0,0,.42),
    0 0 0 1px rgba(248, 113, 113, .1),
    0 0 26px rgba(248, 113, 113, .18);
}
.regma-answer-btn.is-bad::before {
  background: radial-gradient(120% 80% at 50% 0%, rgba(248, 113, 113, .22), transparent 55%);
}
.regma-answer-btn.is-bad.is-selected,
.regma-answer-btn.is-bad:hover {
  border-color: rgba(248, 113, 113, 0.65);
  background:
    linear-gradient(180deg, rgba(248,113,113,.18) 0%, rgba(248,113,113,.05) 40%, rgba(0,0,0,.28) 100%),
    linear-gradient(155deg, #2a1520 0%, #120b10 62%, #0a0c14 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 10px 24px rgba(0,0,0,.45),
    0 0 0 1px rgba(248, 113, 113, .16),
    0 0 30px rgba(248, 113, 113, .32);
}
.regma-point-clear {
  align-self: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.regma-point-clear:hover { color: var(--text); }

#regma-choice-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Registrar hallazgo (No cumple) --- */
.regma-hallazgo-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.regma-hallazgo-head .regma-point-progress { flex: 0 0 auto; margin: 0; }
.regma-hallazgo-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(248,113,113,.14);
  color: #FCA5A5;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 700;
}
.regma-hallazgo-badge svg { width: 12px; height: 12px; }
.regma-hallazgo-lead { margin: -8px 0 0; font-size: 13.5px; color: var(--text-secondary); }

.regma-hallazgo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.regma-hallazgo-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(139, 124, 255, 0.28);
  border-radius: 18px;
  padding: 18px 12px 14px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.02) 38%, rgba(0,0,0,.28) 100%),
    linear-gradient(155deg, #1c2033 0%, #0d101a 62%, #0a0c14 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 10px 22px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 22px rgba(110, 91, 255, .1);
  transition: transform .16s var(--ease), border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.regma-hallazgo-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(139,124,255,.18), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.regma-hallazgo-btn > * { position: relative; z-index: 1; }
.regma-hallazgo-btn.is-mic {
  border-color: rgba(167, 139, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 10px 24px rgba(0,0,0,.45),
    0 0 0 1px rgba(139,124,255,.12),
    0 0 28px rgba(110, 91, 255, .28);
}
.regma-hallazgo-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  color: #B7A6FF;
  filter: drop-shadow(0 0 7px rgba(139, 124, 255, .55));
}
.regma-hallazgo-btn-icon svg { display: block; flex-shrink: 0; }
.regma-hallazgo-btn.is-mic .regma-hallazgo-btn-icon { color: #C4B5FF; }
.regma-hallazgo-btn:active { transform: scale(0.98) translateY(1px); }
.regma-hallazgo-btn.is-recording {
  border-color: rgba(248,113,113,.55);
  color: #FCA5A5;
  background:
    linear-gradient(180deg, rgba(248,113,113,.16) 0%, rgba(248,113,113,.04) 40%, rgba(0,0,0,.28) 100%),
    linear-gradient(155deg, #2a1520 0%, #120b10 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 10px 22px rgba(0,0,0,.42),
    0 0 26px rgba(248,113,113,.28);
}
.regma-hallazgo-btn.is-recording .regma-hallazgo-btn-icon {
  color: #FCA5A5;
  filter: drop-shadow(0 0 7px rgba(248,113,113,.55));
}
.regma-hallazgo-btn.is-recording::before {
  background: radial-gradient(120% 80% at 50% 0%, rgba(248,113,113,.22), transparent 55%);
}

.regma-evidence-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.regma-evidence-thumb { position: relative; width: 68px; height: 68px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.regma-evidence-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.regma-evidence-audio {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-secondary);
}
.regma-evidence-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.regma-evidence-audio .regma-evidence-remove { position: static; background: rgba(255,255,255,.08); }

.regma-divider { display: flex; align-items: center; gap: 10px; color: var(--text-tertiary); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.regma-divider::before, .regma-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); }

.regma-obs-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
#regma-observacion {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 12px 13px;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 6px;
}

.regma-criticidad-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.regma-criticidad-label select {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 7px 10px;
  font: inherit;
  font-size: 12.5px;
}
.regma-save-btn { margin-top: 2px; }
.regma-hint-warn { margin: -6px 0 0; font-size: 12px; color: #FCD34D; line-height: 1.4; }

/* --- Tarjeta / prompts de IA (acento violeta) --- */
.regma-ai-card, .regma-ai-prompt {
  border: 1px solid var(--accent-ring);
  background: linear-gradient(160deg, var(--accent-soft), rgba(255,255,255,.02));
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.regma-ai-label { margin: 0; font-size: 12px; font-weight: 700; color: var(--accent-2); letter-spacing: .01em; }
.regma-ai-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.regma-ai-summary { display: flex; flex-direction: column; gap: 8px; }
.regma-ai-summary p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.regma-ai-summary .regma-ai-h {
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.regma-ai-summary .regma-ai-h:first-child { margin-top: 0; }
.regma-ai-summary ul {
  margin: 0;
  padding: 0 0 0 1.15em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.regma-ai-summary li {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
}
.regma-ai-summary strong { color: #E9E7FF; font-weight: 700; }
.regma-ai-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.regma-ai-prompt p { margin: 0; font-size: 13px; color: var(--text-secondary); }
.regma-ai-card.is-loading { flex-direction: row; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); }
.regma-ai-card.is-mismatch { border-color: rgba(251, 191, 36, .45); }
.regma-ai-warn {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #FDE68A;
  background: rgba(251, 191, 36, .12);
  border: 1px solid rgba(251, 191, 36, .35);
  border-radius: 10px;
  padding: 9px 11px;
}
.regma-ai-motivo {
  margin: -2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(253, 230, 138, .9);
}
.regma-ai-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(139,124,255,.25);
  border-top-color: var(--accent-2);
  animation: regma-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes regma-spin { to { transform: rotate(360deg); } }
.regma-ai-note { font-size: 12.5px; color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: 12px; padding: 10px 12px; line-height: 1.4; }
.regma-ai-note.is-error { color: #FCA5A5; background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }

/* --- Revisión final --- */
.regma-review { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.regma-review-clean { background: var(--green-soft); border: 1px solid rgba(34,197,94,.3); color: #86EFAC; border-radius: 14px; padding: 14px; font-size: 13.5px; font-weight: 600; }
.regma-review-row { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 13px 14px; background: rgba(255,255,255,.02); }
.regma-review-row.is-blocking { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.06); }
.regma-review-row-title { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.regma-review-row-title span { color: var(--text-tertiary); font-weight: 600; }
.regma-review-row-hint { margin: 4px 0 0; font-size: 12px; color: var(--text-secondary); }
.regma-review-row-items { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.regma-review-item-link { text-align: left; border: none; background: transparent; color: var(--accent-2); font-size: 12.5px; padding: 3px 0; cursor: pointer; }
.regma-review-actions { display: flex; gap: 10px; padding-top: 4px; }
.regma-review-actions .btn-secondary { flex: 1; }
.regma-review-actions .btn-primary-lg { flex: 1.4; }

/* --- Completado --- */
.regma-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 4px 8px;
}
.regma-done-hero {
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
}
.regma-done-badge {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #052e1c;
  z-index: 2;
  transform: scale(0.72);
  opacity: 0;
  background:
    linear-gradient(160deg, #6EE7B7 0%, #34D399 42%, #059669 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 2px 0 rgba(4, 80, 55, .35),
    0 14px 28px rgba(16, 185, 129, .38),
    0 0 40px rgba(52, 211, 153, .28);
}
.regma-done-badge-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(110, 231, 183, .35);
  box-shadow: 0 0 18px rgba(52, 211, 153, .25);
  pointer-events: none;
}
.regma-done-badge-face {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
}
.regma-done-badge-face svg {
  width: 40px;
  height: 40px;
  stroke-width: 2.9;
}
.regma-done.is-celebrate .regma-done-badge {
  animation: regma-done-pop .55s var(--ease) both;
}
.regma-done-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.regma-done-burst-bit {
  --i: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  opacity: 0;
  border-radius: 2px;
  background: #FDE68A;
  box-shadow: 0 0 8px rgba(253, 230, 138, .7);
  transform: rotate(calc(var(--i) * 25.7deg)) translateY(0) scale(.4);
}
.regma-done-burst-bit.is-star {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: #FBBF24;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  border-radius: 0;
  box-shadow: 0 0 10px rgba(251, 191, 36, .75);
}
.regma-done-burst-bit.is-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #A78BFA;
  box-shadow: 0 0 8px rgba(167, 139, 250, .7);
}
.regma-done-burst-bit.is-spark {
  width: 7px;
  height: 3px;
  margin: -1.5px 0 0 -3.5px;
  border-radius: 999px;
  background: #6EE7B7;
  box-shadow: 0 0 8px rgba(110, 231, 183, .65);
}
.regma-done.is-celebrate .regma-done-burst-bit {
  animation: regma-done-burst .9s var(--ease) both;
  animation-delay: calc(var(--i) * 28ms);
}
.regma-done h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(8px);
}
.regma-done.is-celebrate h2 {
  animation: regma-done-copy-in .45s var(--ease) .18s both;
}
.regma-done-sub {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 13.5px;
  opacity: 0;
  transform: translateY(8px);
}
.regma-done.is-celebrate .regma-done-sub {
  animation: regma-done-copy-in .45s var(--ease) .28s both;
}
.regma-done-counts { display: flex; gap: 12px; width: 100%; margin-bottom: 6px; }
.regma-done-count { flex: 1; border-radius: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.08); }
.regma-done-count strong { display: block; font-size: 24px; }
.regma-done-count span { font-size: 12px; color: var(--text-secondary); }
.regma-done-count.is-ok { background: var(--green-soft); }
.regma-done-count.is-ok strong { color: #34D399; }
.regma-done-count.is-bad { background: rgba(248,113,113,.1); }
.regma-done-count.is-bad strong { color: #F87171; }
.regma-done-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 8px; }
#regma-done-summary:not(:empty) { width: 100%; margin-top: -4px; }

@keyframes regma-done-pop {
  0% { opacity: 0; transform: scale(0.55) translateY(10px); }
  65% { opacity: 1; transform: scale(1.08) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes regma-done-burst {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 25.7deg)) translateY(8px) scale(.35);
  }
  25% { opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 25.7deg)) translateY(-58px) scale(1);
  }
}
@keyframes regma-done-copy-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .regma-done-badge,
  .regma-done h2,
  .regma-done-sub,
  .regma-done-burst-bit {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .regma-done-burst { display: none; }
}

/* ============================================================ */
/* REGMA — ajustes v2                                            */
/* ============================================================ */

/* Checklist ya elegido desde "Tipos de registro": chip de solo lectura. */
.regma-checklist-chip {
  font-size: 12.5px;
  color: var(--text-secondary);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 9px 12px;
}
.regma-checklist-chip strong { color: var(--text); font-weight: 700; }

/* CTA de datos generales: no reutilizar .manual-form-actions (fondo blanco del formulario claro). */
.regma-header-actions {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}
.regma-header-actions .btn-primary-lg {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 15px 14px;
  font-weight: 700;
  font-size: 14.5px;
  background: linear-gradient(145deg, #34D399, #059669);
  color: #052e1c;
  box-shadow: 0 12px 28px rgba(5, 150, 105, 0.28);
  cursor: pointer;
}

/* Número "sección.punto" en la lista y en el detalle. */
.regma-point-n {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
}
.regma-point-row.state-ok .regma-point-n { color: rgba(134, 239, 172, 0.55); }

/* Feedback visual inmediato al responder Cumple / No cumple. */
.regma-answer-btn.is-flash.is-ok {
  color: #052e1c;
  border-color: rgba(52, 211, 153, 0.85);
  background: linear-gradient(145deg, #34D399, #059669);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 24px rgba(0,0,0,.4),
    0 0 32px rgba(52, 211, 153, .45);
}
.regma-answer-btn.is-flash.is-ok::before { background: transparent; }
.regma-answer-btn.is-flash.is-ok svg { filter: none; color: #052e1c; }
.regma-answer-btn.is-flash.is-bad {
  color: #fff;
  border-color: rgba(248, 113, 113, 0.85);
  background: linear-gradient(145deg, #F87171, #B91C1C);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 10px 24px rgba(0,0,0,.4),
    0 0 32px rgba(248, 113, 113, .45);
}
.regma-answer-btn.is-flash.is-bad::before { background: transparent; }
.regma-answer-btn.is-flash.is-bad svg { filter: none; color: #fff; }
.regma-answer-btn:disabled { cursor: default; }

/* Navegación libre sin tener que responder. */
.regma-point-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 2px;
}
.regma-point-nav-btn {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
}
.regma-point-nav-btn:hover { color: var(--text-secondary); }

/* Vista previa sutil de los próximos puntos. */
.regma-upcoming { margin-top: 4px; opacity: 0.72; }
.regma-upcoming-label { margin: 0 0 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.regma-upcoming-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  padding: 5px 0;
  text-align: left;
  cursor: pointer;
}
.regma-upcoming-item:hover { color: var(--text-secondary); }
.regma-upcoming-n { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.regma-upcoming-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Criticidad como botones segmentados (en vez de <select>). */
.regma-crit-label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.regma-crit-group { display: flex; gap: 6px; }
.regma-crit-btn {
  flex: 1;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 9px 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.regma-crit-btn.active { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--text); }
.regma-crit-btn[data-crit="alta"].active { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.4); color: #FCA5A5; }
.regma-crit-btn[data-crit="media"].active { background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.4); color: #FCD34D; }

/* Adjuntar foto/archivo desde galería (junto a Tomar fotografía). */
.regma-attach-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed rgba(255,255,255,.14);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 12px;
  padding: 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.regma-attach-link svg { color: var(--text-tertiary); flex-shrink: 0; }

/* Botón secundario, poco invasivo, para volver a pedirle a Asistente GTR IA. */
.regma-ai-retry-link {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}

/* Descartar hallazgo. */
.regma-discard-btn {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px;
  align-self: center;
}
.regma-discard-btn:hover { color: #FCA5A5; }

/* Pendientes: separadores por sistema (FAN / REGMA). */
.pendientes-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-tertiary);
}
.pendientes-section-head:first-child { padding-top: 2px; }
.pendientes-section-count { font-variant-numeric: tabular-nums; opacity: .8; }

/* ============================================================ */
/* Playas Limpias — wizard de operativo                          */
/* Oscuro, cards redondeadas, acento violeta, mic protagonista.  */
/* ============================================================ */

#view-registro.playas-mode .manual-form {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#view-registro.playas-mode > #manual-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-height: 0;
  background: transparent;
  color: var(--text);
  padding: 8px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: none;
  border-radius: 0;
}
#view-registro.playas-mode #manual-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 12px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
#view-registro.playas-mode #manual-form-body:has(.pl-ai-layout),
#view-registro.playas-mode #manual-form-body:has(.pl-photos-layout) {
  overflow: hidden;
  padding-bottom: 0;
  gap: 0;
}
#view-registro.playas-mode #manual-form-head { display: none !important; }
#view-registro.playas-mode > .registro-hero { opacity: 0.35; }

.pl-sticky-footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: auto;
  padding: 10px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, var(--bg) 32%);
}
.pl-sticky-footer .pl-cta { margin-top: 0; }

.pl-footer-nav {
  display: grid;
  grid-template-columns: minmax(96px, 0.9fr) 1.4fr;
  gap: 10px;
  align-items: stretch;
}
.pl-cta-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 16px;
  padding: 14px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.pl-cta-back svg { opacity: 0.85; }
.pl-footer-nav .pl-cta { margin-top: 0; }

.pl-activity {
  margin: 10px 0 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.pl-activity-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  padding: 10px 12px;
  font: inherit;
  cursor: pointer;
}
.pl-activity-toggle-meta {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2);
  white-space: nowrap;
}
.pl-activity-toggle-preview {
  font-size: 12.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pl-activity-chevron {
  font-size: 12px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.pl-activity-toggle.is-open .pl-activity-chevron {
  transform: rotate(180deg);
}
.pl-activity-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 10px 10px;
}
.pl-activity-log {
  max-height: 132px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.pl-activity-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 12.5px;
  line-height: 1.35;
}
.pl-activity-who {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-top: 1px;
}
.pl-activity-row.is-ai .pl-activity-who { color: var(--accent-2); }
.pl-activity-text {
  color: var(--text-secondary);
  word-break: break-word;
  white-space: pre-wrap;
}
.pl-activity-row.is-user .pl-activity-text { color: #EDE9FE; }

.pl-detect-card.pl-detect-landed {
  animation: pl-detect-land 0.85s ease;
}
@keyframes pl-detect-land {
  0% { box-shadow: 0 0 0 0 rgba(110, 91, 255, 0.55); transform: scale(0.985); }
  40% { box-shadow: 0 0 0 8px rgba(110, 91, 255, 0.12); transform: scale(1.01); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}
.pl-detect-overlay.is-flying {
  background: rgba(6, 8, 16, 0.2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pl-detect-overlay.is-leaving {
  opacity: 0;
  transition: opacity 0.75s ease;
}

.pl-detect-hidden {
  display: none !important;
}
.pl-detect-list li.pl-detect-enter {
  animation: pl-detect-in 0.45s ease both;
}
@keyframes pl-detect-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.pl-progress-pulse {
  box-shadow: 0 0 0 0 rgba(110, 91, 255, 0.45);
  animation: pl-bar-pulse 1s ease-in-out 2;
}
.pl-progress-pulse .pl-progress-fill {
  transition: width 0.4s ease;
}
.pl-progress-done-flash {
  animation: pl-bar-flash 0.7s ease;
}
@keyframes pl-bar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 91, 255, 0); }
  50% { box-shadow: 0 0 0 6px rgba(110, 91, 255, 0.18); }
}
@keyframes pl-bar-flash {
  0% { background: rgba(110, 91, 255, 0.08); }
  40% { background: rgba(34, 197, 94, 0.16); }
  100% { background: transparent; }
}

.registro-boot-loading {
  flex: 1;
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
  padding: 24px 16px;
}
.registro-boot-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(110, 91, 255, 0.2);
  border-top-color: var(--accent-2);
  animation: pl-spin 0.8s linear infinite;
}
@keyframes pl-spin {
  to { transform: rotate(360deg); }
}
.pl-otros-tag {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2);
  opacity: 0.85;
  margin-left: 4px;
}
.pl-pct-input.pl-otros-auto {
  opacity: 0.85;
  color: var(--accent-2);
  border-color: rgba(110, 91, 255, 0.35);
  background: rgba(110, 91, 255, 0.08);
}
.pl-write-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.pl-write-row textarea {
  flex: 1;
  min-width: 0;
  resize: vertical;
}
.pl-write-row .pl-send-text {
  flex-shrink: 0;
  align-self: stretch;
  min-width: 78px;
  border: none;
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, var(--accent-2), #5B4BE0);
  cursor: pointer;
}
.pl-ai-progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 6px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(110, 91, 255, 0.1);
  border: 1px solid rgba(110, 91, 255, 0.22);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.pl-ai-progress-bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(110, 91, 255, 0.25), var(--accent-2), rgba(110, 91, 255, 0.25));
  background-size: 200% 100%;
  animation: pl-progress-slide 1.1s linear infinite;
}
@keyframes pl-progress-slide {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.pl-ai-hint-mini {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--text-tertiary);
  text-align: center;
}
.pl-photos-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 10px;
}
.pl-photos-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.pl-card {
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 16px 14px;
}
.pl-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.pl-lead {
  margin: 0 0 2px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.pl-empty {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-tertiary);
}
.pl-link {
  border: none;
  background: transparent;
  color: var(--accent-2);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  padding: 0;
}
.pl-link:disabled { opacity: 0.45; cursor: not-allowed; }

.pl-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 15px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, var(--accent-2), #5B4BE0);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(110, 91, 255, 0.28);
  margin-top: 4px;
}
.pl-cta svg { opacity: 0.9; }
.pl-cta:active { transform: scale(0.985); }
.pl-cta-ghost {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: var(--text);
  border-radius: 16px;
  padding: 14px 16px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 650;
  cursor: pointer;
}

/* --- Info general --- */
.pl-info-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.pl-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.pl-info-row:last-child { border-bottom: 0; }
.pl-info-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-2);
  flex-shrink: 0;
  margin-top: 2px;
}
.pl-info-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pl-info-meta em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.pl-info-meta input,
.pl-info-meta select {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  padding: 0;
  outline: none;
}
.pl-info-meta input[type="datetime-local"] {
  color-scheme: dark;
  min-height: 28px;
}
.pl-info-meta select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AA0B4' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 18px;
}
.pl-info-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-style: italic;
}
.pl-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(110, 91, 255, 0.12);
  border: 1px solid var(--accent-ring);
  color: #C4B5FD;
  font-size: 12.5px;
  line-height: 1.4;
}
.pl-note svg { flex-shrink: 0; margin-top: 1px; color: var(--accent-2); }

/* --- IA / mic --- */
.pl-ai-lead {
  margin: 10px 0 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.pl-ai-examples {
  margin: 6px 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.pl-ai-examples strong { color: var(--text); font-weight: 650; }
.pl-ai-feedback {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(110, 91, 255, 0.12);
  border: 1px solid var(--accent-ring);
  color: #C4B5FD;
  font-size: 12px;
  line-height: 1.4;
}
.pl-ai-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 10px;
}
.pl-ai-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.pl-ai-footer {
  flex-shrink: 0;
  padding-top: 2px;
  background: linear-gradient(180deg, transparent, var(--bg) 28%);
}
.pl-ai-card-compact .pl-mic-btn {
  width: 64px;
  height: 64px;
}
.pl-ai-card-compact .pl-mic-caption { margin-bottom: 8px; }
.pl-ai-card-compact .pl-card-title { font-size: 14.5px; }
.pl-progress-inline {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
}
.pl-ai-bullets {
  margin: 0 0 18px;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.pl-ai-bullets li { margin: 2px 0; }
.pl-mic-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 2px;
}
.pl-mic-btn {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, var(--accent-2), #5B4BE0);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(110, 91, 255, 0.4);
  transition: transform 0.2s var(--ease);
}
.pl-mic-btn:active { transform: scale(0.94); }
.pl-mic-wrap.is-recording .pl-mic-btn {
  animation: pl-pulse 1.1s ease-in-out infinite;
  background: linear-gradient(145deg, #F87171, #DC2626);
}
.pl-mic-wrap.is-busy .pl-mic-btn { opacity: 0.7; pointer-events: none; }
@keyframes pl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.45); }
  50% { box-shadow: 0 0 0 16px rgba(248, 113, 113, 0); }
}
.pl-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  color: var(--accent-2);
}
.pl-wave span {
  display: block;
  width: 3px;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.55;
  animation: pl-wave 1.1s ease-in-out infinite;
}
.pl-wave span:nth-child(1) { height: 10px; animation-delay: 0s; }
.pl-wave span:nth-child(2) { height: 18px; animation-delay: 0.12s; }
.pl-wave span:nth-child(3) { height: 28px; animation-delay: 0.24s; }
.pl-wave span:nth-child(4) { height: 16px; animation-delay: 0.36s; }
.pl-wave span:nth-child(5) { height: 12px; animation-delay: 0.48s; }
.pl-mic-wrap.is-recording .pl-wave span { opacity: 1; }
@keyframes pl-wave {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}
.pl-mic-caption {
  text-align: center;
  margin: 4px 0 14px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-secondary);
}
.pl-ai-alts { display: none; }
.pl-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.pl-composer-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pl-composer-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 8px 4px;
  outline: none;
}
.pl-composer-input::placeholder { color: var(--text-tertiary); }
.pl-composer-ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pl-composer-ico:active { background: rgba(255, 255, 255, 0.08); }
.pl-composer-send {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-2), #5B4BE0);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(110, 91, 255, 0.35);
}
.pl-composer-send:active { transform: scale(0.94); }
.pl-demo-anim {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 1px dashed rgba(110, 91, 255, 0.35);
  background: rgba(110, 91, 255, 0.08);
  color: var(--accent-2);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  opacity: 0.85;
}

.pl-detect-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 20px;
  background: rgba(6, 8, 16, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.pl-detect-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.pl-detect-overlay.is-leaving { opacity: 0; }
#view-registro.playas-mode { position: relative; }
.pl-detect-overlay-card {
  position: relative;
  width: min(100%, 360px);
  border-radius: 22px;
  padding: 22px 18px 18px;
  background: linear-gradient(165deg, rgba(28, 30, 48, 0.98), rgba(14, 16, 28, 0.98));
  border: 1px solid rgba(110, 91, 255, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-detect-overlay.is-visible .pl-detect-overlay-card {
  transform: translateY(0) scale(1);
}
.pl-detect-overlay-glow {
  position: absolute;
  top: -40%;
  left: 20%;
  right: 20%;
  height: 120px;
  background: radial-gradient(ellipse, rgba(110, 91, 255, 0.35), transparent 70%);
  pointer-events: none;
}
.pl-detect-overlay-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-align: center;
}
.pl-detect-overlay-title {
  margin: 6px 0 14px;
  font-size: 20px;
  font-weight: 750;
  text-align: center;
  letter-spacing: -0.02em;
  color: var(--text);
}
.pl-detect-overlay-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.pl-detect-overlay-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7C6CFF, #22C55E);
  transition: width 0.4s ease;
}
.pl-detect-overlay-pct {
  margin: 8px 0 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}
.pl-detect-overlay-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Altura fija desde el inicio: el punto de entrada del check nuevo no sube. */
  height: 252px;
  min-height: 252px;
  max-height: 252px;
  overflow: hidden;
  justify-content: flex-start;
  align-content: flex-start;
}
.pl-detect-overlay-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-detect-overlay-item.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pl-detect-overlay-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(34, 197, 94, 0.18);
  color: #4ADE80;
  flex-shrink: 0;
  animation: pl-check-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pl-check-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.pl-alt-btn {
  flex: 1;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.pl-alt-btn svg { color: var(--accent-2); flex-shrink: 0; }
.pl-write-box {
  margin-top: 12px;
  display: block;
}
.pl-write-box textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 12px;
  padding: 12px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 56px;
}

.pl-detect-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.pl-detect-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pl-detect-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13.5px;
  color: var(--text-secondary);
}
.pl-detect-list li:last-child { border-bottom: 0; }
.pl-detect-list li.done { color: var(--text); }
.pl-detect-status {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pl-detect-list li.done .pl-detect-status {
  background: var(--green-soft);
  color: var(--green);
}
.pl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: block;
}
.pl-progress-dock {
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 12px 14px;
}
.pl-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.pl-progress-track {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.pl-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.35s var(--ease);
}

/* --- Review --- */
.pl-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pl-stat {
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pl-stat em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 650;
}
.pl-stat strong {
  font-size: 22px;
  font-weight: 750;
  color: var(--accent-2);
  letter-spacing: -0.02em;
}
.pl-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.pl-edit-ico { color: var(--text-tertiary); }
.pl-edit-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pl-edit-rows label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.pl-edit-rows input,
.pl-edit-rows select {
  width: 110px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: right;
}
.pl-edit-rows select { width: auto; min-width: 140px; text-align: left; }
.pl-sec-foot {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--text-tertiary);
}
.pl-dist-layout {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pl-donut { flex-shrink: 0; }
.pl-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pl-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.pl-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.pl-leg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pct-input {
  width: 64px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 7px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  text-align: right;
}
.pl-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pl-sub-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.pl-sub-list input {
  width: 72px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: right;
}
.pl-destino-rows label { gap: 8px; }
.pl-dest-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.pl-acomp-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  margin-bottom: 6px;
}
.pl-acomp-row input {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
}
.pl-del {
  border: none;
  background: rgba(248, 113, 113, 0.12);
  color: #FCA5A5;
  border-radius: 10px;
  width: 36px;
  cursor: pointer;
  font-size: 18px;
}

/* --- Photos --- */
.pl-photo-card {
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 12px;
  overflow: hidden;
}
.pl-photo-card.done {
  border-color: rgba(34, 197, 94, 0.35);
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.08), var(--bg-elevated) 55%);
}
.pl-photo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.pl-photo-head strong {
  display: block;
  font-size: 14px;
}
.pl-photo-hint {
  display: block;
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-weight: 500;
}
.pl-photo-badge {
  font-size: 11px;
  font-weight: 650;
  color: var(--text-tertiary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px 8px;
}
.pl-photo-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green);
  flex-shrink: 0;
}
.pl-photo-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 8px;
  align-items: stretch;
}
.pl-photo-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 72px;
  max-height: 88px;
  background:
    linear-gradient(135deg, rgba(110, 91, 255, 0.12), transparent 50%),
    rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.08);
}
.pl-photo-card.done .pl-photo-thumb { border-style: solid; border-color: rgba(34, 197, 94, 0.25); }
.pl-photo-thumb img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}
.pl-photo-placeholder {
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.pl-photo-placeholder-ico { opacity: 0.45; color: var(--accent-2); }
.pl-photo-placeholder.done { color: var(--green); }
.pl-photo-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: rgba(10, 12, 20, 0.72);
  color: #E9E4FF;
  font-size: 11px;
  font-weight: 650;
  text-align: center;
}
.pl-photo-loading-bar {
  width: 70%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(110, 91, 255, 0.2), var(--accent-2), rgba(110, 91, 255, 0.2));
  background-size: 200% 100%;
  animation: pl-progress-slide 1.1s linear infinite;
}
.pl-photo-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pl-photo-cam,
.pl-photo-gallery {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 4px;
  cursor: pointer;
  font: inherit;
  font-size: 9.5px;
  font-weight: 650;
}
.pl-photo-cam svg,
.pl-photo-gallery svg {
  width: 16px;
  height: 16px;
}
.pl-photo-cam {
  background: linear-gradient(145deg, rgba(110, 91, 255, 0.28), rgba(110, 91, 255, 0.1));
  border-color: var(--accent-ring);
  color: #E9E4FF;
}
.pl-photo-gallery { color: var(--text-secondary); }
.pl-photo-cam:disabled,
.pl-photo-gallery:disabled { opacity: 0.45; cursor: not-allowed; }
.pl-photo-count {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
  font-weight: 650;
  color: var(--text-secondary);
  overflow: hidden;
}
.pl-photo-count-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(110, 91, 255, 0.25), rgba(34, 197, 94, 0.2));
  pointer-events: none;
}
.pl-photo-count-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pl-photo-count-label svg { color: var(--accent-2); }
.pl-sec-emoji {
  margin-right: 4px;
  font-size: 0.95em;
}

/* --- Notes --- */
.pl-notes-card { position: relative; }
.pl-notes-dictate {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px 14px;
}
.pl-notes-card textarea {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  resize: vertical;
  min-height: 110px;
  outline: none;
}
.pl-notes-mic {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, var(--accent-2), #5B4BE0);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pl-notes-mic.is-recording {
  background: linear-gradient(145deg, #F87171, #DC2626);
}
.pl-notes-mic svg { width: 18px; height: 18px; }
.pl-ai-help {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(110, 91, 255, 0.12);
  border: 1px solid var(--accent-ring);
  color: #C4B5FD;
  font-size: 12.5px;
  line-height: 1.4;
}
.pl-ai-help svg { flex-shrink: 0; color: var(--accent-2); margin-top: 1px; }
.pl-ai-help p { margin: 0 0 4px; }

/* --- Summary / done --- */
.pl-dl {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pl-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}
.pl-dl dt {
  margin: 0;
  color: var(--text-tertiary);
  font-weight: 550;
}
.pl-dl dd {
  margin: 0;
  color: var(--text);
  font-weight: 650;
  text-align: right;
}
.pl-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.pl-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pl-tile em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 650;
}
.pl-tile strong {
  font-size: 20px;
  font-weight: 750;
  color: var(--accent-2);
  letter-spacing: -0.02em;
}
.pl-tile span {
  font-size: 11.5px;
  color: var(--text-secondary);
}
.pl-success {
  text-align: center;
  padding: 18px 8px 8px;
}
.pl-success-ico {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green);
  box-shadow: 0 0 0 10px rgba(34, 197, 94, 0.08);
}
.pl-success-ico svg { width: 32px; height: 32px; }
.pl-success h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.pl-success p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.pl-photo-fail {
  margin: 12px 0 0;
  padding: 10px 14px;
  list-style: none;
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 12px;
}
.pl-photo-fail li + li { margin-top: 8px; }
.pl-success-summary { display: flex; flex-direction: column; gap: 10px; }
.pl-success-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.pl-success-row svg { color: var(--accent-2); flex-shrink: 0; }

.pl-live-cam {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #000;
  display: flex;
  flex-direction: column;
}
.pl-live-cam video {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.pl-live-cam-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
}
.pl-live-cam-cancel {
  position: absolute;
  left: 18px;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  padding: 8px;
}
.pl-live-cam-shot {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28);
  cursor: pointer;
}
.pl-live-cam-shot:active { transform: scale(0.94); }

.pl-notice {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  background: rgba(6, 8, 18, 0.72);
}
.pl-notice-card {
  width: min(100%, 360px);
  border-radius: 18px;
  padding: 22px 20px 16px;
  background: #1A1D2E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  color: var(--text);
}
.pl-notice-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.3;
}
.pl-notice-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.pl-notice-card ul {
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #EDE9FE;
}
.pl-notice-card .pl-cta { margin-top: 18px; }