/* Mini App de ALUIATOR — estilos.
 *
 * Reglas duras (BRIEF §6.1):
 *  - CERO `position: fixed`. Lo único anclado abajo es el MainButton, que dibuja Telegram
 *    fuera del WebView: así el teclado no tapa nada (bug abierto de iOS desde julio de 2024).
 *  - Sin `@import`, sin fuentes externas, sin imágenes externas: la CSP es
 *    `default-src 'none'` con `style-src 'self'`.
 *  - Los colores salen de los themeParams que Telegram publica como variables CSS. Los
 *    valores de reserva son los del tema claro; el bloque `prefers-color-scheme: dark` cubre
 *    el caso de que Telegram no publique las variables (clientes viejos en modo oscuro).
 */

:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --texto: var(--tg-theme-text-color, #000000);
  --gris: var(--tg-theme-hint-color, #707579);
  --panel: var(--tg-theme-secondary-bg-color, #f2f2f7);
  --acento: var(--tg-theme-button-color, #2481cc);
  --acento-txt: var(--tg-theme-button-text-color, #ffffff);
  --borde: rgba(128, 128, 128, 0.35);
  --aviso-bg: rgba(214, 122, 30, 0.16);
  --aviso-txt: #a2551a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-bg-color, #17212b);
    --texto: var(--tg-theme-text-color, #f5f5f5);
    --gris: var(--tg-theme-hint-color, #a8b3bd);
    --panel: var(--tg-theme-secondary-bg-color, #232e3c);
    --aviso-bg: rgba(230, 160, 80, 0.18);
    --aviso-txt: #e8a866;
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
}

body {
  /* Hueco inferior para que el MainButton nativo no tape el último elemento al hacer scroll. */
  padding: 16px 16px 96px;
}

h1 {
  margin: 4px 0 16px;
  font-size: 20px;
  font-weight: 600;
}

p { margin: 0 0 8px; }

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Bloqueo (Telegram viejo / escritorio) ------------------------------------------- */

.bloqueo {
  padding: 32px 20px;
  font-size: 18px;
  color: var(--texto);
}

/* --- Banner de aviso ------------------------------------------------------------------ */

.banner {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--aviso-bg);
  color: var(--aviso-txt);
  font-size: 15px;
}

.banner p { margin: 0; }

/* --- Botón grande de foto -------------------------------------------------------------- */

.btn-foto {
  display: block;
  width: 100%;
  min-height: 148px;
  margin: 0 0 16px;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: var(--acento);
  color: var(--acento-txt);
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-foto:active { opacity: 0.8; }

/* --- Cámara en vivo (Android) ---------------------------------------------------------- */

.camara {
  margin: 0 0 16px;
  text-align: center;
}

.video {
  display: block;
  width: 100%;
  max-height: 60vh;
  border-radius: 16px;
  background: #000000;
  object-fit: cover;
}

.obturador {
  width: 76px;
  height: 76px;
  margin: 14px auto 0;
  display: block;
  border: 5px solid var(--acento);
  border-radius: 50%;
  background: var(--acento-txt);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.obturador:active { transform: scale(0.94); }

/* --- Miniatura ------------------------------------------------------------------------- */

.preview {
  margin: 0 0 16px;
  padding: 0;
}

.miniatura {
  display: block;
  width: 100%;
  max-height: 40vh;
  border-radius: 16px;
  object-fit: cover;
  background: var(--panel);
}

.preview figcaption { margin-top: 8px; }

/* --- Estado de la ubicación ------------------------------------------------------------ */

.gps {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--panel);
  font-size: 16px;
}

.gps p { margin: 0; }

.gps p + button { margin-top: 10px; }

/* --- Tarjetas de decisión (pendiente, confirmar sin ubicación) -------------------------- */

.tarjeta {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--panel);
  font-size: 16px;
}

.fila {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fila .btn { flex: 1 1 auto; }

/* --- Botones normales ------------------------------------------------------------------ */

.btn {
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--acento);
  color: var(--acento-txt);
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { opacity: 0.8; }

.btn-plano {
  background: transparent;
  color: var(--acento);
  border: 1px solid var(--borde);
}

.btn-ancho { display: block; width: 100%; }

/* --- Comentario ------------------------------------------------------------------------ */

.comentario { margin: 0 0 16px; }

textarea {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--bg);
  color: var(--texto);
  font-family: inherit;
  font-size: 17px;
  resize: none;
}

textarea::placeholder { color: var(--gris); }

/* --- Envío ----------------------------------------------------------------------------- */

.envio { margin: 0 0 16px; }

.barra {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--panel);
  overflow: hidden;
}

.barra-relleno {
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: var(--acento);
  transition: width 0.2s linear;
}

#envio-txt {
  margin-top: 8px;
  font-size: 15px;
  color: var(--gris);
}