/* =====================================================================
   IguanaApp — PWA  |  v3 "search-first" (modelo TaskRabbit, marca Iguana)
   Un solo acento: naranja #F47A20. Neutros claros de alto contraste.
   Verde reservado a WhatsApp. Responsivo: movil app-shell / escritorio web.
   ===================================================================== */
:root{
  --accent:#F47A20; --accent-d:#d96810;
  --ink:#16313B; --ink-2:#234b58; --muted:#64757d; --line:#e7ecef;
  --bg:#f7f9fa; --card:#ffffff;
  --cyan:#2BB7D6; --cyan-d:#1192ad; --green:#7DBA3F; --green-d:#5a8a25; --wa:#25D366;
  --r:18px; --r-sm:13px;
  --shadow:0 8px 26px rgba(16,49,59,.10); --shadow-sm:0 2px 12px rgba(16,49,59,.06);
  --topbar-h:62px; --bottomnav-h:64px; --shell:480px; --wide:1060px;
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --grad-soft:linear-gradient(135deg,#eaf6fa 0%,#f2faee 55%,#fff3e9 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.22;color:var(--ink);font-weight:800}
p{margin:0 0 .8em}
small{color:var(--muted)}
:focus-visible{outline:3px solid rgba(244,122,32,.5);outline-offset:2px;border-radius:6px}

/* ---------- Shell: movil app / escritorio web ---------- */
.ig-shell{max-width:var(--shell);margin:0 auto;min-height:100svh;background:var(--bg);
  position:relative;overflow-x:hidden}
@media(min-width:520px){.ig-shell{box-shadow:0 0 50px rgba(16,49,59,.14)}}
@media(min-width:900px){
  .ig-shell.public{max-width:none;box-shadow:none}
  .ig-shell.public .ig-wrap{max-width:var(--wide);margin:0 auto;padding-left:24px;padding-right:24px}
}

/* ---------- Barra superior ---------- */
.ig-topbar{position:sticky;top:0;z-index:40;height:var(--topbar-h);
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(8px);
  color:var(--ink);display:flex;align-items:center;gap:10px;padding:0 16px;
  border-bottom:1px solid var(--line)}
.ig-shell.public .ig-topbar{padding:0}
.ig-shell.public .ig-topbar .ig-topbar-in{max-width:var(--wide);margin:0 auto;width:100%;
  display:flex;align-items:center;gap:10px;padding:0 16px}
.ig-topbar-in{display:flex;align-items:center;gap:10px;width:100%}
.ig-brand{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);flex:none}
.ig-logo-img{height:42px;width:auto;display:block}
.ig-brand b{font-size:18px;letter-spacing:-.2px;white-space:nowrap}
.ig-brand b span{color:var(--accent)}
.ig-nav-links{display:none;gap:4px;margin-left:14px}
.ig-nav-links a{padding:9px 13px;border-radius:999px;font-size:14px;font-weight:700;color:var(--ink-2)}
.ig-nav-links a:hover{background:#f0f4f6}
@media(min-width:900px){.ig-nav-links{display:flex}}
.ig-top-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.ig-install{display:inline-flex;align-items:center;gap:6px;background:#fff;
  border:1.5px solid var(--line);color:var(--ink);border-radius:999px;
  padding:8px 13px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.ig-install:hover{border-color:var(--accent);color:var(--accent)}
.ig-install svg{width:15px;height:15px}
.ig-avatar{width:38px;height:38px;border-radius:50%;background:var(--cyan);
  color:#fff;border:none;font-weight:800;cursor:pointer;display:flex;
  align-items:center;justify-content:center;font-size:15px;box-shadow:var(--shadow-sm)}
.ig-menu-wrap{position:relative}
.ig-menu{position:absolute;right:0;top:48px;background:#fff;color:var(--ink);
  min-width:212px;border-radius:14px;box-shadow:var(--shadow);overflow:hidden;
  display:none;border:1px solid var(--line)}
.ig-menu.open{display:block}
.ig-menu a,.ig-menu button{display:flex;width:100%;text-align:left;gap:8px;
  padding:12px 15px;background:none;border:none;font:inherit;cursor:pointer;
  color:var(--ink);align-items:center}
.ig-menu a:hover,.ig-menu button:hover{background:#f5f9fa}
.ig-menu .sep{height:1px;background:var(--line);margin:2px 0}
.ig-menu .lbl{padding:10px 15px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}

/* ---------- Hero busqueda-primero (TaskRabbit) ---------- */
.ig-search-hero{background:var(--grad-soft);border-bottom:1px solid var(--line);
  padding:26px 18px 30px}
.ig-search-hero .ig-wrap{display:flex;flex-direction:column;gap:0}
.ig-search-hero h1{font-size:26px;letter-spacing:-.4px;margin-bottom:6px}
.ig-search-hero .sub{color:var(--muted);font-size:15px;margin:0 0 16px;max-width:460px}
.ig-searchbar{display:flex;background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:6px;box-shadow:var(--shadow-sm);max-width:560px}
.ig-searchbar input{flex:1;border:none;background:none;font:inherit;font-size:15px;
  padding:10px 16px;color:var(--ink);min-width:0}
.ig-searchbar input:focus{outline:none}
.ig-searchbar button{flex:none;background:var(--accent);color:#fff;border:none;border-radius:999px;
  padding:11px 22px;font-size:15px;font-weight:700;cursor:pointer}
.ig-searchbar button:hover{background:var(--accent-d)}
.ig-hero-logo{display:none}
@media(min-width:900px){
  .ig-search-hero{padding:52px 0 56px}
  .ig-search-hero .ig-wrap{flex-direction:row;align-items:center;gap:40px}
  .ig-search-hero .hero-copy{flex:1}
  .ig-search-hero h1{font-size:38px}
  .ig-hero-logo{display:block;width:210px;height:auto;flex:none;
    filter:drop-shadow(0 12px 22px rgba(16,49,59,.16))}
}
.ig-quicklinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ig-quicklinks a{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:700;color:var(--ink-2)}
.ig-quicklinks a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Hero interno (dashboards, subpaginas) ---------- */
.ig-hero{background:var(--grad-soft);color:var(--ink);padding:20px 18px 24px;
  border-radius:0 0 24px 24px;border-bottom:1px solid var(--line)}
.ig-hero h1{color:var(--ink);font-size:22px;margin-bottom:3px}
.ig-hero p{color:var(--muted);margin:0;font-size:14px}
.ig-pill{display:inline-block;background:#fff;color:var(--accent);
  border:1px solid #ffe1c7;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;margin-top:10px}
.ig-pill.warn{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- Contenido ---------- */
.ig-main{padding:16px 16px calc(var(--bottomnav-h) + 26px)}
.ig-shell.public .ig-main{padding-bottom:40px}
@media(min-width:900px){.ig-shell.public .ig-main{max-width:var(--wide);margin:0 auto;padding:24px}}
.ig-section-title{display:flex;align-items:center;justify-content:space-between;margin:20px 2px 12px}
.ig-section-title h2{font-size:17px;margin:0}
.ig-section-title a{font-size:13px;color:var(--accent);font-weight:700}
@media(min-width:900px){.ig-section-title h2{font-size:21px}}

.ig-card{display:block;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-sm);
  padding:16px;margin-bottom:13px;border:1px solid var(--line)}
.ig-card.tap{transition:transform .1s,box-shadow .15s;cursor:pointer}
.ig-card.tap:hover{box-shadow:var(--shadow)}
.ig-card.tap:active{transform:scale(.99)}
.ig-card h3{font-size:15.5px;margin-bottom:4px}
.ig-card .meta{font-size:13px;color:var(--muted)}
.ig-row{display:flex;align-items:center;gap:12px}
.ig-row .grow{flex:1;min-width:0}
.ig-row .grow h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ig-stats{display:flex;gap:11px;margin-bottom:6px}
.ig-stats .ig-stat{flex:1}
.ig-stat{background:var(--card);border-radius:var(--r-sm);padding:14px 10px;text-align:center;
  border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.ig-stat .n{font-size:24px;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.ig-stat .l{font-size:11.5px;color:var(--muted);margin-top:5px}
.ig-stat.accent .n{color:var(--accent)}

/* categorias (grid TaskRabbit) */
.ig-cats{display:flex;flex-wrap:wrap;gap:11px}
.ig-cats .ig-cat{flex:1 1 calc(33.33% - 8px);min-width:calc(33.33% - 8px)}
@media(min-width:900px){.ig-cats .ig-cat{flex:1 1 calc(16.66% - 10px);min-width:calc(16.66% - 10px)}}
.ig-cat{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px 8px;text-align:center;box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .1s,box-shadow .15s,border-color .15s}
.ig-cat:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#ffd9bd}
.ig-cat .ic{width:46px;height:46px;border-radius:13px;margin:0 auto 9px;
  background:#fff4ea;color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:21px}
.ig-cat .nm{font-size:12.5px;font-weight:700}

.ig-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.badge-open{background:rgba(43,183,214,.15);color:var(--cyan-d)}
.badge-assigned{background:rgba(244,122,32,.15);color:var(--accent-d)}
.badge-done{background:rgba(125,186,63,.2);color:var(--green-d)}
.badge-cancel{background:rgba(214,69,69,.14);color:#c0392b}
.badge-pending{background:rgba(120,135,142,.15);color:#5a6b73}

.ig-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;border:none;border-radius:999px;
  padding:13px 22px;font-size:15px;font-weight:700;cursor:pointer;width:100%;
  box-shadow:0 6px 16px rgba(244,122,32,.26);transition:background .12s,transform .08s}
.ig-btn:hover{background:var(--accent-d)}
.ig-btn:active{transform:translateY(1px)}
.ig-btn.ghost{background:#fff;color:var(--accent);border:1.5px solid var(--accent);box-shadow:none}
.ig-btn.ghost:hover{background:#fff7f0}
.ig-btn.dark{background:var(--ink);box-shadow:0 6px 16px rgba(16,49,59,.2)}
.ig-btn.dark:hover{background:var(--ink-2)}
.ig-btn.green{background:var(--wa);box-shadow:0 6px 16px rgba(37,211,102,.28)}
.ig-btn.danger{background:#e25555;box-shadow:none}
.ig-btn.sm{width:auto;padding:9px 17px;font-size:13.5px;box-shadow:none}
@media(min-width:900px){.ig-shell.public .ig-btn{width:auto;min-width:220px}}

.ig-field{margin-bottom:14px}
.ig-field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--ink-2)}
.ig-input,.ig-select,.ig-textarea{width:100%;border:1.5px solid var(--line);
  border-radius:12px;padding:12px 13px;font:inherit;background:#fff;color:var(--ink)}
.ig-input:focus,.ig-select:focus,.ig-textarea:focus{outline:none;
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(244,122,32,.12)}
.ig-textarea{min-height:96px;resize:vertical}
.ig-err{color:#c0392b;font-size:12.5px;margin-top:5px}
.ig-help{color:var(--muted);font-size:12.5px;margin-top:5px}
.ig-check{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:12px;margin-bottom:9px;cursor:pointer;background:#fff}
.ig-check input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent)}
.ig-check.on{border-color:var(--accent);background:#fff7f0}
.ig-check .t{font-weight:700;font-size:14px}
.ig-check .s{font-size:12px;color:var(--muted)}

.ig-empty{text-align:center;padding:34px 18px;color:var(--muted)}
.ig-empty .e-ic{width:64px;height:64px;border-radius:18px;background:#fff;border:1px solid var(--line);
  margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:var(--shadow-sm)}

.ig-flash{border-radius:14px;padding:12px 14px;margin:12px 16px 0;font-size:14px;font-weight:600;border:1px solid transparent}
.ig-flash.success{background:#eaf6df;color:#3f6b1c;border-color:#cfe9bf}
.ig-flash.danger{background:#fbe6e6;color:#a93226;border-color:#f3c9c9}
.ig-flash.warning{background:#fff3e0;color:#a05a14;border-color:#ffe0b8}
.ig-flash.info{background:#e3f5fa;color:#117a93;border-color:#c7eaf3}

/* ---------- Nav inferior (solo movil / zonas app) ---------- */
.ig-bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--shell);height:var(--bottomnav-h);background:#fff;
  border-top:1px solid var(--line);display:flex;z-index:40;box-shadow:0 -4px 18px rgba(16,49,59,.06)}
.ig-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--muted);font-size:10.5px;font-weight:700;background:none;border:none;cursor:pointer}
.ig-tab svg{width:23px;height:23px}
.ig-tab.active{color:var(--accent)}
.ig-tab.center{margin-top:-22px}
.ig-tab.center .fab-plus{width:52px;height:52px;border-radius:50%;background:var(--accent);
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(244,122,32,.45);border:4px solid var(--bg)}
.ig-tab.center .fab-plus svg{width:26px;height:26px}

.ig-fab-wa{position:fixed;bottom:calc(var(--bottomnav-h) + 16px);left:50%;
  transform:translateX(calc(var(--shell)/2 - 60px));width:54px;height:54px;border-radius:50%;
  background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;z-index:45;
  box-shadow:0 6px 18px rgba(37,211,102,.5)}
.ig-fab-wa svg{width:28px;height:28px}
@media(max-width:519px){.ig-fab-wa{left:auto;right:16px;transform:none}}
.ig-shell.public ~ .ig-fab-wa, .ig-shell.public .ig-fab-wa{bottom:20px}
@media(min-width:900px){.ig-shell.public .ig-fab-wa{left:auto;right:26px;transform:none}}

/* ---------- Secciones publicas ---------- */
.ig-pub-section{padding:22px 18px}
@media(min-width:900px){.ig-shell.public .ig-pub-section{max-width:var(--wide);margin:0 auto;padding:30px 24px}}
.ig-pub-section h2{font-size:20px;margin-bottom:4px}
.ig-pub-section .sub{color:var(--muted);margin-bottom:18px;font-size:14px}
@media(min-width:900px){.ig-pub-section h2{font-size:26px}}

.ig-feats{display:flex;flex-wrap:wrap;gap:11px}
.ig-feats .ig-feat{flex:1 1 calc(50% - 6px);min-width:calc(50% - 6px)}
@media(min-width:900px){.ig-feats .ig-feat{flex:1 1 calc(25% - 9px);min-width:calc(25% - 9px)}}
.ig-feat{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px;box-shadow:var(--shadow-sm)}
.ig-feat .ft{font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:7px}
.ig-feat .fs{font-size:12.5px;color:var(--muted);margin-top:3px}

.ig-steps{counter-reset:s}
.ig-step{display:flex;gap:14px;margin-bottom:14px;align-items:flex-start}
.ig-step .num{counter-increment:s;flex:none;width:38px;height:38px;border-radius:12px;
  background:#fff4ea;color:var(--accent);font-weight:800;display:flex;align-items:center;justify-content:center}
.ig-step .num::before{content:counter(s)}
@media(min-width:900px){
  .ig-steps.h{display:flex;gap:20px}
  .ig-steps.h .ig-step{flex:1}
  .ig-steps.h .ig-step{flex-direction:column;gap:10px}
}
.ig-auth-links{text-align:center;margin-top:16px;font-size:14px;color:var(--muted)}
.ig-auth-links a{color:var(--accent);font-weight:700}
.ig-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:16px 0}
.ig-divider::before,.ig-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.ig-foot{padding:24px 18px 90px;text-align:center;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line);margin-top:10px}
.ig-shell.public .ig-foot{padding-bottom:28px}
.ig-foot a{color:var(--accent)}

.ig-auth-wrap{max-width:440px;margin:0 auto}

.ig-seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:4px;gap:4px;margin-bottom:14px;overflow:auto}
.ig-seg a{flex:1;text-align:center;padding:8px 10px;border-radius:999px;font-size:13px;
  font-weight:700;color:var(--muted);white-space:nowrap}
.ig-seg a.on{background:var(--accent);color:#fff}

.ig-list-line{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.ig-list-line:last-child{border-bottom:none}
.ig-list-line .grow{flex:1;min-width:0}
.ig-list-line .grow .t{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-list-line .grow .s{font-size:12.5px;color:var(--muted)}
.ig-inline-actions{display:flex;gap:7px}
.ig-inline-actions form{margin:0}

/* ============================================================
   RESPONSIVIDAD DESKTOP (v8) — la app autenticada aprovecha el
   ancho en laptop en vez de verse como columna angosta gris.
   No afecta el móvil (todo bajo min-width:900px).
   ============================================================ */
@media (min-width: 900px) {
  /* El shell deja de ser una tira de 480px: ocupa un ancho cómodo,
     centrado, con respiración a los lados. */
  .ig-shell:not(.public){
    max-width: 900px;
    box-shadow: 0 0 60px rgba(16,49,59,.10);
    border-radius: 0;
  }
  /* La barra superior y el contenido se alinean al mismo ancho. */
  .ig-shell:not(.public) .ig-topbar-in,
  .ig-shell:not(.public) .ig-main{
    max-width: 860px; margin-left: auto; margin-right: auto;
  }
  /* El contenido principal gana aire y las tarjetas se ven en rejilla
     de 2 columnas donde tenga sentido (listas de tarjetas). */
  .ig-shell:not(.public) .ig-main{ padding: 22px 24px 90px; }

  /* Hero más contenido, no ocupando toda la altura. */
  .ig-shell:not(.public) .ig-hero{ border-radius: 18px; margin-bottom: 4px; }

  /* La barra inferior fija se centra al ancho del shell (no pegada
     al borde izquierdo de una pantalla ancha). */
  .ig-shell:not(.public) .ig-bottomnav{
    max-width: 900px; left: 50%; transform: translateX(-50%);
  }
  .ig-shell:not(.public) .fab-plus-wrap,
  .ig-shell:not(.public) .ig-tab.center{ /* el + centrado sigue centrado */ }

  /* El WhatsApp flotante se ancla al borde del shell, no de la ventana. */
  .ig-shell:not(.public) ~ .ig-fab-wa,
  .ig-shell:not(.public) .ig-fab-wa{
    left: 50%; transform: translateX(calc(450px - 74px)); right: auto;
  }
}

/* En pantallas muy anchas, rejilla de 2 columnas para tarjetas de acción
   del dashboard (Mensajes, Tokens, Buscar, Verificación…). */
@media (min-width: 1100px) {
  .ig-shell:not(.public) .ig-main{ max-width: 980px; }
  .ig-shell:not(.public){ max-width: 1020px; }
  .ig-shell:not(.public) .ig-bottomnav{ max-width: 1020px; }
}

/* --------- Formularios apretados: apilar en pantallas estrechas --------- */
/* En móviles angostos (<380px), las filas de 2-3 campos se apilan para
   no amontonar labels ("Años de exp / Tarifa/hora / Ese precio es"). */
@media (max-width: 400px) {
  .ig-row.ig-stack-sm{ flex-direction: column; gap: 0 !important; }
  .ig-row.ig-stack-sm > .ig-field{ width: 100%; flex: 1 1 100% !important; }
}