/* ============================================================
   GEO-FIBER · App de técnicos de campo
   Dirección: "Linear en el campo" — precisión y calma de
   Linear/Vercel, pero optimizada para uso con guantes, apurado
   y bajo el sol: superficies SÓLIDAS (no glass translúcido),
   alto contraste, tap targets grandes, estado escaneable.

   Scopeado a esta página (carga después de cosmic.css). Redefine
   algunos tokens semánticos SOLO para el field app; no afecta
   admin/login/app/demo.
   ============================================================ */

:root {
  /* ---- Contraste subido para lectura al sol (antes fallaba AA) ---- */
  --text-hi:  #F1F4FB;   /* títulos            (antes #E8ECF7) */
  --text-mid: #C6CDDF;   /* cuerpo             (antes #A6AEC4) */
  --text-low: #8B93AD;   /* meta / hints — ahora pasa AA (antes #5C6685) */

  /* ---- Superficies sólidas, en niveles (nada translúcido) ---- */
  --f-bg:       #070A16;  /* fondo del app       */
  --f-card:     #0E1426;  /* tarjeta base        */
  --f-card-hi:  #141B31;  /* tarjeta hover/press */
  --f-field:    #0A0F1F;  /* inputs (un nivel por debajo de la card) */

  /* ---- Bordes precisos (con alpha, nunca negro puro) ---- */
  --f-line:   rgba(255, 255, 255, 0.09);
  --f-line-2: rgba(255, 255, 255, 0.16);

  /* ---- Radios consolidados (un solo sistema) ---- */
  --r-card:  16px;
  --r-field: 12px;
  --r-photo: 14px;
  --r-pill:  999px;

  /* ---- Sombras: casi planas + borde nítido (estilo Linear);
          solo el FAB lleva glow teñido del acento ---- */
  --f-shadow:     0 1px 2px rgba(0, 0, 0, 0.4);
  --f-shadow-fab: 0 10px 28px -8px rgba(110, 139, 255, 0.55);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Fondo: atenúo el halo cósmico para que no lave el contraste al sol */
body { background: var(--f-bg); }
.sop-main ~ .cosmic-bg::before,
.cosmic-bg::before { opacity: 0.55; }

/* ============================================================
   HEADER — sólido (el blur translúcido se lava afuera)
   ============================================================ */
.sop-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(7, 10, 22, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--f-line);
}
.sop-header .brand img { height: 28px; }
.sop-header .brand span { font-size: 1rem; color: var(--text-hi); letter-spacing: -0.01em; }
.sop-header .pill { border-color: var(--f-line); background: rgba(255, 255, 255, 0.04); color: var(--text-mid); }
.sop-header .btn-ghost { min-height: 44px; min-width: 44px; border-color: var(--f-line-2); }

/* Contenedor responsive: crece en tablet/desktop; la lista aprovecha el
   ancho con grid, mientras form y detalle se mantienen en ancho de lectura. */
.sop-main { width: 100%; max-width: 720px; margin: 0 auto; padding: 18px 16px 104px; }
.sop-loading { display: flex; justify-content: center; padding: 64px 0; }

@media (min-width: 760px)  { .sop-main { max-width: 900px;  padding: 24px 24px 112px; } }
@media (min-width: 1200px) { .sop-main { max-width: 1180px; padding: 28px 32px 120px; } }

/* Vistas de formulario / detalle: ancho cómodo, alineado a la izquierda
   (un form estirado a lo ancho es mal diseño y difícil de completar). */
.sop-detail { max-width: 640px; }
.form-stack { max-width: 640px; }

/* Lista de reportes: grid fluido — 1 col en móvil, 2-3 en tablet/desktop
   según el ancho disponible, sin breakpoints frágiles. */
.rep-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.rep-list .empty { grid-column: 1 / -1; }

/* Título de sección de vista (Mis reportes / Nuevo reporte / detalle) */
.sop-main h1 { font-size: 1.45rem; letter-spacing: -0.02em; color: var(--text-hi); }

/* ============================================================
   FILTROS — chips con tap target grande
   ============================================================ */
.chips {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 6px; margin-bottom: 16px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  white-space: nowrap; min-height: 44px; padding: 0 18px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--f-line);
  background: rgba(255, 255, 255, 0.03); color: var(--text-mid);
  font-size: 0.9rem; font-weight: 500; cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.chip:hover { border-color: var(--f-line-2); color: var(--text-hi); }
.chip.active {
  background: var(--accent); color: #0A0F1F;
  border-color: var(--accent); font-weight: 700;
}

/* ============================================================
   TARJETAS DE REPORTE — sólidas, con franja de estado a la izq.
   (escaneo instantáneo del estado sin leer el badge)
   ============================================================ */
.rep-card {
  display: block; position: relative; overflow: hidden;
  padding: 16px 16px 16px 20px;
  background: var(--f-card); border: 1px solid var(--f-line);
  border-radius: var(--r-card); box-shadow: var(--f-shadow);
  cursor: pointer;
  transition: transform .12s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
/* Franja lateral de estado */
.rep-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--text-low);
}
.rep-card[data-estado="Abierto"]::before      { background: var(--warn); }
.rep-card[data-estado="En progreso"]::before  { background: var(--accent); }
.rep-card[data-estado="Cerrado"]::before      { background: var(--ok); }
.rep-card:hover  { border-color: var(--f-line-2); }
.rep-card:active { transform: scale(0.97); background: var(--f-card-hi); }

.rep-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rep-title { font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: 1.06rem; line-height: 1.25; letter-spacing: -0.01em; }
.rep-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 0.82rem; color: var(--text-low); }
.rep-meta i { margin-right: 5px; opacity: 0.9; }

/* ============================================================
   BADGES DE ESTADO / PRIORIDAD — color funcional, no decorativo
   ============================================================ */
.estado {
  padding: 6px 11px; border-radius: var(--r-pill);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap; border: 1px solid transparent;
}
.estado.Abierto      { background: rgba(251, 191, 36, .16); color: #fcd34d; border-color: rgba(251, 191, 36, .28); }
.estado.En.progreso,
.estado.progreso     { background: rgba(110, 139, 255, .20); color: var(--accent-soft); border-color: rgba(110, 139, 255, .34); }
.estado.Cerrado      { background: rgba(52, 211, 153, .16); color: #6ee7b7; border-color: rgba(52, 211, 153, .28); }

.prio-Alta  { color: #fb7185; font-weight: 600; }
.prio-Media { color: #fcd34d; font-weight: 600; }
.prio-Baja  { color: #6ee7b7; font-weight: 600; }

/* ============================================================
   FAB — botón extendido y etiquetado (más legible/tappable que "+")
   ============================================================ */
.fab {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40; height: 56px; padding: 0 22px 0 18px;
  display: inline-flex; align-items: center; gap: 9px;
  border: none; border-radius: var(--r-pill); cursor: pointer;
  background: var(--accent); color: #0A0F1F;
  font-family: var(--font-body); font-weight: 700; font-size: 0.98rem;
  box-shadow: var(--f-shadow-fab);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.fab i { font-size: 1.35rem; }
.fab:hover  { background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(110, 139, 255, 0.65); }
.fab:active { transform: translateY(0) scale(0.97); }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form-stack { display: flex; flex-direction: column; gap: 18px; }

.field .label { color: var(--text-low); }

/* Inputs sólidos, borde nítido, focus ring generoso */
.input {
  background: var(--f-field); border: 1px solid var(--f-line-2);
  border-radius: var(--r-field); padding: 14px 16px; min-height: 50px;
  color: var(--text-hi); font-size: 1rem;
}
.input::placeholder { color: var(--text-low); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.textarea { min-height: 104px; resize: vertical; line-height: 1.5; }

/* Segmented control — un solo track, segmento activo resaltado */
.seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--f-field); border: 1px solid var(--f-line);
  border-radius: var(--r-field);
}
.seg button {
  flex: 1; min-height: 44px; padding: 10px 8px;
  border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--text-mid); font-weight: 600; font-size: 0.92rem; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.seg button:hover:not(.active) { color: var(--text-hi); background: rgba(255, 255, 255, 0.04); }
.seg button.active {
  background: var(--accent); color: #0A0F1F; border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Materiales */
.mat-row { display: grid; grid-template-columns: 1fr 84px 48px; gap: 8px; align-items: center; }
.mat-row .input { min-height: 48px; }
.icon-btn {
  background: rgba(251, 113, 133, .12); color: #fb7185;
  border: 1px solid rgba(251, 113, 133, .3); border-radius: var(--r-field);
  height: 48px; cursor: pointer; display: grid; place-items: center; font-size: 1.05rem;
  transition: background .15s var(--ease);
}
.icon-btn:hover { background: rgba(251, 113, 133, .2); }

/* GPS — protagonista del flujo: caja clara con estado ok/error */
.gps-box {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; min-height: 50px;
  border: 1px dashed var(--f-line-2); border-radius: var(--r-field);
  color: var(--text-mid); font-size: 0.94rem; font-family: var(--font-mono);
}
.gps-box i { font-size: 1.15rem; color: var(--text-low); }
.gps-box.ok { border-style: solid; border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .07); color: #6ee7b7; }
.gps-box.ok i { color: #6ee7b7; }

/* Botón "capturar GPS" y otros ghost dentro del form: tap target pleno */
.form-stack .btn-ghost { min-height: 48px; border-color: var(--f-line-2); }
.form-stack .btn-ghost:hover { border-color: var(--accent); }

/* ============================================================
   FOTOS
   ============================================================ */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-photo); border: 1px solid var(--f-line); }
.photo-add {
  aspect-ratio: 1; border: 1px dashed var(--f-line-2); border-radius: var(--r-photo);
  display: grid; place-items: center; color: var(--text-low); font-size: 1.7rem;
  cursor: pointer; background: rgba(255, 255, 255, 0.02);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.photo-add:hover { border-color: var(--accent); color: var(--accent-soft); }

/* Card sólida en el detalle (materiales usados) */
.sop-main .glass { background: var(--f-card); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--f-line); box-shadow: var(--f-shadow); }

/* ============================================================
   MISC
   ============================================================ */
.back-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--text-mid); font-size: 0.92rem; margin-bottom: 12px; cursor: pointer;
  transition: color .15s var(--ease);
}
.back-link:hover { color: var(--text-hi); }
.empty { text-align: center; color: var(--text-low); padding: 56px 16px; }
.empty i { color: var(--f-line-2); }
.section-label {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-low); margin: 10px 0 6px;
}

/* ============================================================
   MOTION — feedback rápido, stagger sutil en la lista.
   Reduced-motion apaga todo lo no esencial.
   ============================================================ */
@keyframes rep-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rep-card { animation: rep-in .32s var(--ease) both; }
.rep-card:nth-child(1) { animation-delay: .02s; }
.rep-card:nth-child(2) { animation-delay: .06s; }
.rep-card:nth-child(3) { animation-delay: .10s; }
.rep-card:nth-child(4) { animation-delay: .14s; }
.rep-card:nth-child(5) { animation-delay: .18s; }
.rep-card:nth-child(n+6) { animation-delay: .22s; }

/* Foco visible para navegación con teclado (accesibilidad) */
.chip:focus-visible, .seg button:focus-visible, .rep-card:focus-visible,
.fab:focus-visible, .back-link:focus-visible, .photo-add:focus-visible, .icon-btn:focus-visible {
  outline: 2px solid var(--accent-soft); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rep-card { animation: none; }
  .fab:hover, .rep-card:active { transform: none; }
}