/* MO2Kit — common.css
 * Tokens y clases base compartidas por portal / pesca / alquimia.
 * Heredado 1:1 del estilo de AlquimiaMO2 (alquimia_movil.html):
 * variables :root con tema claro/oscuro (media query + data-theme),
 * reset, header, card/btn/chip/pill/tag/snack/modal/sheet y utilidades. */

:root{
  --bg:#0e1512; --panel:#14201b; --panel2:#1a2a23; --raise:#20342b;
  --text:#e7f3ec; --muted:#8fb5a6; --border:#26392f;
  --acc:#25c07a; --acc-d:#1f9d63; --acc2:#a978ff; --acc2-d:#8a5cf0;
  --danger:#e5484d; --warn:#e2a63f; --ok:#25c07a;
  --shadow:0 6px 20px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#eef4f1; --panel:#ffffff; --panel2:#f4f8f6; --raise:#eaf1ed;
    --text:#152019; --muted:#5b7268; --border:#dbe7e1; --acc:#1f9d63; --acc-d:#188351;
    --shadow:0 6px 18px rgba(20,50,40,.10);}
}
:root[data-theme="dark"]{ --bg:#0e1512; --panel:#14201b; --panel2:#1a2a23; --raise:#20342b; --text:#e7f3ec; --muted:#8fb5a6; --border:#26392f; --shadow:0 6px 20px rgba(0,0,0,.35);}
:root[data-theme="light"]{ --bg:#eef4f1; --panel:#ffffff; --panel2:#f4f8f6; --raise:#eaf1ed; --text:#152019; --muted:#5b7268; --border:#dbe7e1; --shadow:0 6px 18px rgba(20,50,40,.10);}

/* ---- reset y base ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  padding-bottom:64px;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain;overflow-x:hidden}
main,section.screen,.card{max-width:100%}
a{color:var(--acc)}
.hide{display:none!important}
.b{font-weight:700}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-variant-numeric:tabular-nums}
.big{font-size:26px;font-weight:800;line-height:1}

/* ---- cabecera ---- */
header{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,var(--panel) 0,var(--panel) 70%,transparent);
  padding:10px 14px calc(10px + env(safe-area-inset-top)) 14px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px}
header .logo{width:30px;height:30px;flex:0 0 auto;border-radius:7px}
header h1{font-size:17px;margin:0;font-weight:700;letter-spacing:.2px;flex:1;overflow-wrap:anywhere}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:0 0 auto;cursor:pointer}
.dot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.err{background:var(--danger)}
button.ghost{background:none;border:1px solid var(--border);color:var(--text);border-radius:9px;padding:5px 9px;font-size:13px}

/* ---- layout ---- */
main{padding:12px 12px 20px;max-width:720px;margin:0 auto}
section.screen{display:none;animation:fade .18s ease}
section.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.divider{height:1px;background:var(--border);margin:12px 0}

/* ---- tarjetas ---- */
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:13px;margin-bottom:12px;box-shadow:var(--shadow)}
.card h2{margin:0 0 8px;font-size:15px}

/* ---- formularios ---- */
label.lbl{font-size:12px;color:var(--muted);display:block;margin:0 0 3px}
input,select{background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:10px;
  padding:9px 10px;font-size:16px;width:100%} /* 16px: evita el auto-zoom de iOS al enfocar */
input:focus,select:focus{outline:2px solid var(--acc-d);outline-offset:-1px}

/* ---- botones ---- */
.btn{background:var(--acc-d);color:#04140d;border:none;border-radius:10px;padding:10px 12px;font-weight:700;font-size:14px}
.btn:active{transform:translateY(1px)}
.btn.sec{background:var(--panel2);color:var(--text);border:1px solid var(--border);font-weight:600}
.btn.pur{background:var(--acc2-d);color:#fff}
.btn.sm{padding:6px 9px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5}
.x{color:var(--danger);background:none;border:none;font-size:18px;padding:2px 6px}

/* ---- pills / chips / tags ---- */
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--panel2);border:1px solid var(--border);
  border-radius:999px;padding:3px 9px;font-size:12px;color:var(--muted)}
.pill.v{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,var(--border))}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:6px 11px;font-size:13px}
.chip.on{background:var(--acc-d);color:#04140d;border-color:var(--acc-d);font-weight:700}
.tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:6px;background:var(--panel2);border:1px solid var(--border);color:var(--muted)}
.tag.b{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 35%,var(--border))}
.tag.m{color:var(--acc2);border-color:color-mix(in srgb,var(--acc2) 35%,var(--border))}
.tag.v{color:var(--warn)}

/* ---- listas / kpis / tablas ---- */
.kpis{display:flex;gap:8px}
.kpi{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:9px 6px;text-align:center}
.kpi .n{font-size:20px;font-weight:800}
.kpi .t{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;overflow-wrap:anywhere}
.itemrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
.itemrow:last-child{border-bottom:none}
.itemrow .nm{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.step{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.step button{width:32px;height:32px;background:var(--panel2);border:none;color:var(--text);font-size:18px;font-weight:700}
.step input{width:46px;text-align:center;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);border-radius:0;padding:6px 2px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;user-select:none}
tr.clk{cursor:pointer}
tr.clk:active{background:var(--panel2)}
.obs{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:9px;margin-bottom:8px;font-size:13px}
.result-attr{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)}
.result-attr:last-child{border:none}

/* ---- pestañas inferiores (pesca/alquimia) ---- */
nav.tabs{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;background:var(--panel);
  border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs button{flex:1;background:none;border:none;color:var(--muted);padding:8px 2px 9px;font-size:10.5px;
  display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:600}
nav.tabs button .ic{font-size:19px}
nav.tabs button.on{color:var(--acc)}

/* ---- snack ---- */
.snack{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);background:var(--raise);color:var(--text);
  border:1px solid var(--border);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);z-index:60;
  display:flex;gap:12px;align-items:center;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:92vw}
.snack.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.snack.show.err{border-color:var(--danger)}
.snack button{background:none;border:none;color:var(--acc);font-weight:700;font-size:14px}

/* ---- modal / sheet ---- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;display:none;align-items:flex-end;justify-content:center}
.modal.show{display:flex}
.sheet{background:var(--panel);border-radius:16px 16px 0 0;width:100%;max-width:720px;max-height:88vh;overflow:auto;
  padding:16px 14px calc(20px + env(safe-area-inset-bottom));border:1px solid var(--border)}
.sheet h3{margin:2px 0 12px}

/* ---- combo propio (los datalist nativos móviles no dejan explorar) ---- */
.comboWrap{position:relative}
.comboList{position:absolute;left:0;right:0;top:100%;margin-top:3px;z-index:70;background:var(--panel);
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);max-height:264px;overflow:auto}
.comboList button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);
  padding:9px 10px;font-size:14px;border-bottom:1px solid var(--border)}
.comboList button:last-child{border-bottom:none}
.comboList button:active{background:var(--panel2)}

/* contador de avisos pendientes (solicitudes de clan) */
.badge{display:inline-block;min-width:20px;padding:1px 7px;margin-left:6px;vertical-align:middle;
  background:var(--danger);color:#fff;border-radius:999px;font-size:12px;font-weight:800;
  line-height:18px;text-align:center}