/* Monitoring — crash fallback, QA panel */

.crash-fallback {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--superficie);}

.crash-fallback.hidden {
  display: none !important;}

.crash-fallback-card {
  max-width: 360px;
  padding: 24px;
  text-align: center;
  border-radius: var(--radio);}

.crash-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;}

.crash-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;}

.qa-panel {
  position: fixed;
  bottom: max(90px, calc(90px + env(safe-area-inset-bottom)));
  left: 8px;
  right: 8px;
  max-height: 45vh;
  z-index: 9998;
  background: var(--superficie);
  color: var(--borde);
  border-radius: var(--radio);
  padding: 10px;
  font-size: 11px;
  overflow: auto;
  border: var(--regla-fina) solid var(--acento);}

.qa-panel.hidden {
  display: none !important;}

.qa-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;}

.qa-status-json {
  font-size: 10px;
  max-height: 120px;
  overflow: auto;
  background: var(--superficie);
  padding: 8px;
  border-radius: var(--radio);}

.qa-logs {
  max-height: 80px;
  overflow: auto;
  margin: 8px 0;}

.qa-log-line {
  padding: 2px 0;
  border-bottom: var(--regla-fina) solid var(--borde);}

body.qa-mode::after {
  content: 'QA';
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  background: var(--urgencia-media);
  color: var(--texto-invertido);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radio);}

body.capacitor-native {
  padding-top: var(--safe-top, env(safe-area-inset-top));}

body.capacitor-native .bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom));}

#feedback-form textarea {
  width: 100%;
  min-height: 88px;
  font-family: inherit;
  border-radius: var(--radio);
  padding: 10px;
  border: var(--regla-fina) solid var(--borde, var(--borde));}

/* ─── Detalle del fallo ───────────────────────────────────────────────────── */

/* El mensaje de la tarjeta siempre es el genérico. Esto es lo que de verdad
   dice qué pasó, y lo que hay que poder copiar y mandar. */
.crash-detalle {
  margin: var(--e-3) 0;
  text-align: left;
  border: var(--regla-fina) solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e-2) var(--e-3);
}

.crash-detalle summary {
  cursor: pointer;
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
  min-height: var(--toque-min);
  display: flex;
  align-items: center;
}

.crash-detalle pre {
  margin: var(--e-2) 0;
  padding: var(--e-2);
  background: var(--superficie-hundida);
  border-radius: var(--radio);
  font-size: var(--txt-1);
  line-height: var(--alto-linea);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 40vh;
  overflow: auto;
}