/* ============================================================
   Arbex — Estilos compartidos
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{
  --arbex-navy:#0b1f3a;
  --arbex-blue:#2856d9;
  --arbex-blue-dark:#193a99;
  --arbex-accent:#f97316;
  --arbex-accent-dark:#ea580c;
  --arbex-green:#16a34a;
  --arbex-amber:#f59e0b;
  --arbex-red:#dc2626;
  --arbex-bg:#f5f7fb;
}

*{ -webkit-tap-highlight-color: transparent; }

html,body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--arbex-bg);
  color:#0f172a;
  scroll-behavior:smooth;
}
h1,h2,h3,h4,.font-display{ font-family:'Plus Jakarta Sans','Inter',sans-serif; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Layout helpers ---------- */
.app-shell{ min-height:100vh; display:flex; }
.card-shadow{ box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.08); }
.card-shadow-lg{ box-shadow:0 4px 6px rgba(15,23,42,.04), 0 20px 40px -14px rgba(15,23,42,.16); }

/* ---------- Buttons ---------- */
.btn-cta{
  background: linear-gradient(135deg,#fb923c 0%, var(--arbex-accent) 55%, var(--arbex-accent-dark) 100%);
  box-shadow:0 8px 20px -6px rgba(249,115,22,.55);
  transition:.15s transform ease, .15s box-shadow ease;
}
.btn-cta:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -6px rgba(249,115,22,.65); }
.btn-cta:active{ transform:translateY(0); }

.btn-primary{
  background:var(--arbex-blue);
  transition:.15s all ease;
}
.btn-primary:hover{ background:var(--arbex-blue-dark); }

/* ---------- Nav active state ---------- */
.nav-link{ position:relative; }
.nav-link.active{ color:var(--arbex-blue); background:#eef3ff; }
.nav-link.active .nav-ico{ color:var(--arbex-blue); }

.bottom-tab.active{ color:var(--arbex-blue); }
.bottom-tab.active .tab-ico-wrap{ background:#eef3ff; }

/* ---------- Status badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; font-size:.72rem; padding:.28rem .65rem; border-radius:999px; white-space:nowrap; }
.badge-dot{ width:6px; height:6px; border-radius:999px; }

.badge-pendiente{ background:#fef3c7; color:#92400e; }
.badge-pendiente .badge-dot{ background:#d97706; }

.badge-revisado{ background:#e0e7ff; color:#3730a3; }
.badge-revisado .badge-dot{ background:#6366f1; }

.badge-entregado{ background:#dbeafe; color:#1e40af; }
.badge-entregado .badge-dot{ background:#2563eb; }

.badge-aceptado{ background:#dcfce7; color:#166534; }
.badge-aceptado .badge-dot{ background:#16a34a; }

.badge-rechazado{ background:#fee2e2; color:#991b1b; }
.badge-rechazado .badge-dot{ background:#dc2626; }

/* ---------- Confidence semaphore ---------- */
.conf-pill{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.75rem; padding:.3rem .7rem; border-radius:999px; }
.conf-green{ background:#dcfce7; color:#15803d; }
.conf-amber{ background:#fef3c7; color:#b45309; }
.conf-red{ background:#fee2e2; color:#b91c1c; }
.conf-dot{ width:8px; height:8px; border-radius:999px; box-shadow:0 0 0 3px rgba(0,0,0,.05); }
.conf-dot.green{ background:#22c55e; }
.conf-dot.amber{ background:#f59e0b; }
.conf-dot.red{ background:#ef4444; }

/* ---------- Toast ---------- */
#toast-container{ position:fixed; top:1.25rem; right:1.25rem; z-index:200; display:flex; flex-direction:column; gap:.6rem; }
.toast{
  background:#0f172a; color:#fff; padding:.75rem 1.1rem; border-radius:.75rem;
  font-size:.85rem; font-weight:500; box-shadow:0 10px 30px -8px rgba(0,0,0,.35);
  display:flex; align-items:flex-start; gap:.6rem; max-width:340px;
  animation: toast-in .25s ease-out;
}
.toast.success{ background:#065f46; }
.toast.warn{ background:#92400e; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
.toast.leaving{ animation: toast-out .2s ease-in forwards; }
@keyframes toast-out{ to{ opacity:0; transform:translateX(20px);} }

/* ---------- Phone frame (mobile flow demo) ---------- */
.phone-wrap{ display:flex; justify-content:center; padding:2.5rem 1rem; min-height:100vh; align-items:flex-start; background:
  radial-gradient(circle at 15% 10%, rgba(40,86,217,.08), transparent 40%),
  radial-gradient(circle at 85% 90%, rgba(249,115,22,.08), transparent 40%),
  var(--arbex-bg);
}
.phone-frame{
  width:390px; max-width:100%; background:#0b1220; border-radius:2.5rem; padding:12px;
  box-shadow:0 30px 60px -15px rgba(11,18,32,.45), 0 0 0 1px rgba(11,18,32,.06);
}
.phone-screen{
  background:#f6f8fc; border-radius:2rem; overflow:hidden; position:relative;
  height:820px; display:flex; flex-direction:column;
}
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:22px;
  background:#0b1220; border-radius:0 0 14px 14px; z-index:30;
}
.phone-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 480px){
  .phone-wrap{ padding:0; }
  .phone-frame{ width:100%; border-radius:0; padding:0; box-shadow:none; }
  .phone-screen{ border-radius:0; height:100vh; }
  .phone-notch{ display:none; }
}

/* ---------- Mic button ---------- */
.mic-btn{
  width:96px; height:96px; border-radius:999px;
  background:linear-gradient(135deg,#3b6df0,var(--arbex-blue));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:2rem;
  box-shadow:0 10px 30px -6px rgba(40,86,217,.55);
  position:relative;
}
.mic-btn.recording{ background:linear-gradient(135deg,#ef4444,#b91c1c); box-shadow:0 10px 30px -6px rgba(220,38,38,.55); }
.mic-pulse{
  position:absolute; inset:-14px; border-radius:999px; border:3px solid rgba(239,68,68,.5);
  animation: pulse-ring 1.4s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulse-ring{ 0%{ transform:scale(.85); opacity:.9;} 100%{ transform:scale(1.35); opacity:0;} }

.waveform{ display:flex; align-items:center; gap:3px; height:36px; }
.waveform span{ width:4px; border-radius:3px; background:#ef4444; animation: wave 1s ease-in-out infinite; }
.waveform span:nth-child(1){ height:14px; animation-delay:0s; }
.waveform span:nth-child(2){ height:26px; animation-delay:.1s; }
.waveform span:nth-child(3){ height:36px; animation-delay:.2s; }
.waveform span:nth-child(4){ height:20px; animation-delay:.3s; }
.waveform span:nth-child(5){ height:30px; animation-delay:.4s; }
.waveform span:nth-child(6){ height:16px; animation-delay:.5s; }
.waveform span:nth-child(7){ height:24px; animation-delay:.6s; }
@keyframes wave{ 0%,100%{ transform:scaleY(.4);} 50%{ transform:scaleY(1);} }

/* ---------- Chat bubbles (Arbex IA) ---------- */
.chat-bubble-ai{ background:#eef3ff; color:#1e293b; border-radius:1rem 1rem 1rem .25rem; }
.chat-bubble-user{ background:var(--arbex-blue); color:#fff; border-radius:1rem 1rem .25rem 1rem; }

/* ---------- Marked area overlay on photos ---------- */
.mark-area{
  position:absolute; border:2.5px dashed var(--arbex-accent);
  background:rgba(249,115,22,.18); border-radius:.4rem;
  box-shadow:0 0 0 2000px rgba(15,23,42,.0);
}
.mark-label{
  position:absolute; background:var(--arbex-accent); color:#fff; font-size:.65rem; font-weight:700;
  padding:.15rem .5rem; border-radius:.35rem; top:-1.6rem; left:0; white-space:nowrap;
}

/* ---------- Generic step fade ---------- */
.step-fade{ animation: step-in .25s ease-out; }
@keyframes step-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

/* Spinner */
.spinner{ width:20px; height:20px; border-radius:999px; border:3px solid #dbe3fb; border-top-color:var(--arbex-blue); animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Progress dots for AI generation */
.gen-step{ opacity:.35; transition:.3s opacity ease; }
.gen-step.active{ opacity:1; }
.gen-step.done .gen-check{ opacity:1; transform:scale(1); }
.gen-check{ opacity:0; transform:scale(.5); transition:.25s all ease; }

/* Table editable inputs */
.line-input{
  width:100%; border:1px solid transparent; background:transparent; border-radius:.4rem;
  padding:.35rem .5rem; font-weight:600; transition:.15s all;
}
.line-input:hover{ background:#f1f5f9; }
.line-input:focus{ background:#fff; border-color:var(--arbex-blue); outline:none; box-shadow:0 0 0 3px rgba(40,86,217,.12); }

/* PDF sheet */
.pdf-sheet{ width:100%; max-width:820px; background:#fff; }
@media print{
  body *{ visibility:hidden; }
  .pdf-sheet, .pdf-sheet *{ visibility:visible; }
  .pdf-sheet{ position:absolute; left:0; top:0; box-shadow:none !important; }
  .no-print{ display:none !important; }
}

/* Timeline */
.timeline-item{ position:relative; padding-left:1.75rem; }
.timeline-item::before{ content:''; position:absolute; left:.25rem; top:.35rem; width:9px; height:9px; border-radius:999px; background:var(--arbex-blue); }
.timeline-item::after{ content:''; position:absolute; left:.48rem; top:1rem; bottom:-1.1rem; width:1.5px; background:#e2e8f0; }
.timeline-item:last-child::after{ display:none; }

/* utility */
.tap-scale:active{ transform:scale(.97); }