/* =====================================================================
   IguanaApp — MVP PWA  |  Tema CLARO de marca (v2)
   Alineado a la identidad oficial: mascota iguana + paleta
   verde #7DBA3F · azul/cian #2BB7D6 · naranja #F47A20 · dark #16313B.
   Estilo aireado, claro, con acentos vibrantes (guía de marca).
   ===================================================================== */
:root{
  --ig-orange:#F47A20; --ig-orange-d:#d96810;
  --ig-cyan:#2BB7D6; --ig-cyan-d:#1192ad; --ig-green:#7DBA3F; --ig-green-d:#5a8a25;
  --ig-dark:#16313B; --ig-dark-2:#234b58; --wa:#25D366;
  --bg:#f4f8fa; --card:#ffffff; --ink:#16313B; --muted:#6b7c84; --line:#e7ecef;
  --r:20px; --r-sm:14px;
  --shadow:0 8px 26px rgba(16,49,59,.09); --shadow-sm:0 2px 12px rgba(16,49,59,.06);
  --topbar-h:60px; --bottomnav-h:64px; --shell:480px;
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --grad-hero:linear-gradient(135deg,#e9f7fb 0%,#eafaf1 55%,#fff2e8 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);color:var(--ink);
  background:linear-gradient(135deg,#e6f5fa 0%,#ffffff 45%,#fff1e6 100%);
  background-attachment:fixed;-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)}

/* ---------- App shell ---------- */
.ig-shell{max-width:var(--shell);margin:0 auto;min-height:100vh;background:var(--bg);
  position:relative;overflow-x:hidden}
@media(min-width:520px){
  .ig-shell{box-shadow:0 0 50px rgba(16,49,59,.16);border-radius:0}
}

/* ---------- Barra superior (BLANCA) ---------- */
.ig-topbar{position:sticky;top:0;z-index:40;height:var(--topbar-h);
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);
  color:var(--ink);display:flex;align-items:center;gap:10px;padding:0 14px;
  border-bottom:1px solid var(--line)}
.ig-brand{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink)}
.ig-logo-img{height:40px;width:auto;display:block}
.ig-brand b{font-size:18px;letter-spacing:-.2px}
.ig-brand b span{color:var(--ig-orange)}
.ig-top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.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:7px 13px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.ig-install:hover{border-color:var(--ig-orange);color:var(--ig-orange)}
.ig-install svg{width:15px;height:15px}
.ig-avatar{width:37px;height:37px;border-radius:50%;background:var(--ig-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:210px;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)}

/* ---------- Banda hero (CLARA) ---------- */
.ig-hero{background:var(--grad-hero);color:var(--ink);padding:20px 18px 24px;
  border-radius:0 0 26px 26px;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(--ig-orange);
  border:1px solid #ffe1c7;padding:4px 12px;border-radius:999px;font-size:12px;
  font-weight:700;margin-top:10px}
.ig-pill.warn{background:var(--ig-orange);color:#fff;border-color:var(--ig-orange)}

/* ---------- Contenido ---------- */
.ig-main{padding:16px 16px calc(var(--bottomnav-h) + 26px)}
.ig-section-title{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 10px}
.ig-section-title h2{font-size:16px;margin:0}
.ig-section-title a{font-size:13px;color:var(--ig-orange);font-weight:700}

.ig-card{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 .08s,box-shadow .12s;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:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:6px}
.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(--ig-dark);line-height:1}
.ig-stat .l{font-size:11.5px;color:var(--muted);margin-top:5px}
.ig-stat.accent .n{color:var(--ig-orange)}

.ig-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.ig-cat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 8px;text-align:center;box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .08s,box-shadow .12s}
.ig-cat:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.ig-cat .ic{width:44px;height:44px;border-radius:13px;margin:0 auto 8px;
  background:rgba(43,183,214,.12);color:var(--ig-cyan-d);display:flex;
  align-items:center;justify-content:center;font-size:20px}
.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(--ig-cyan-d)}
.badge-assigned{background:rgba(244,122,32,.15);color:var(--ig-orange-d)}
.badge-done{background:rgba(125,186,63,.2);color:var(--ig-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(--ig-orange);color:#fff;border:none;border-radius:999px;
  padding:13px 20px;font-size:15px;font-weight:700;cursor:pointer;width:100%;
  box-shadow:0 6px 16px rgba(244,122,32,.28);transition:filter .12s,transform .08s}
.ig-btn:hover{filter:brightness(.97)}
.ig-btn:active{transform:translateY(1px)}
.ig-btn.block{width:100%}
.ig-btn.ghost{background:#fff;color:var(--ig-orange);border:1.5px solid var(--ig-orange);box-shadow:none}
.ig-btn.dark{background:var(--ig-dark);box-shadow:0 6px 16px rgba(16,49,59,.22)}
.ig-btn.green{background:var(--ig-green);box-shadow:0 6px 16px rgba(125,186,63,.3)}
.ig-btn.danger{background:#e25555;box-shadow:none}
.ig-btn.sm{width:auto;padding:9px 16px;font-size:13.5px;box-shadow:none}

.ig-field{margin-bottom:14px}
.ig-field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:#3a4f57}
.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(--ig-orange);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(--ig-orange)}
.ig-check.on{border-color:var(--ig-orange);background:rgba(244,122,32,.05)}
.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-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;position:relative;
  background:none;border:none;cursor:pointer}
.ig-tab svg{width:23px;height:23px}
.ig-tab.active{color:var(--ig-orange)}
.ig-tab.center{margin-top:-22px}
.ig-tab.center .fab-plus{width:52px;height:52px;border-radius:50%;background:var(--ig-orange);
  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}}

/* ---------- Público (landing-style, claro) ---------- */
.ig-pub-hero{background:var(--grad-hero);color:var(--ink);padding:30px 20px 34px;
  border-radius:0 0 30px 30px;text-align:center;border-bottom:1px solid var(--line)}
.ig-pub-logo{width:104px;height:auto;margin:0 auto 12px;display:block;
  filter:drop-shadow(0 8px 16px rgba(16,49,59,.16))}
.ig-pub-hero h1{color:var(--ink);font-size:26px;margin-bottom:8px;letter-spacing:-.3px}
.ig-pub-hero p{color:var(--muted);font-size:15px;max-width:340px;margin:0 auto 18px}
.ig-pub-hero .ig-btn{max-width:280px;margin:0 auto}
.ig-pills-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.ig-pills-row span{background:#fff;border:1px solid var(--line);padding:6px 12px;
  border-radius:999px;font-size:12px;font-weight:700;color:var(--ink)}
.ig-pub-section{padding:20px 18px}
.ig-pub-section h2{font-size:20px;text-align:center;margin-bottom:4px}
.ig-pub-section .sub{text-align:center;color:var(--muted);margin-bottom:18px;font-size:14px}

/* rejilla de features (estilo tarjetas de la landing) */
.ig-feats{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ig-feat{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px;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:rgba(244,122,32,.12);color:var(--ig-orange);font-weight:800;
  display:flex;align-items:center;justify-content:center}
.ig-step .num::before{content:counter(s)}
.ig-auth-links{text-align:center;margin-top:16px;font-size:14px;color:var(--muted)}
.ig-auth-links a{color:var(--ig-orange);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:22px 18px calc(var(--bottomnav-h));text-align:center;color:var(--muted);font-size:12.5px}
.ig-foot a{color:var(--ig-orange)}

.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(--ig-orange);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}