/* ============================================================
   estilo.css — Portal de clientes Reciclaje Tijarafe
   Compartido por login.php, registro.php, puntos.php y
   mi-tarjeta.php, para no repetir el mismo CSS en cada página.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:#f5f7f4; --surface:#fff; --surface2:#f0f3ee; --border:#e5e8e2;
  --green:#1a9e5c; --green-l:#e8f7ef; --green-v:#2dff8e;
  --text:#1a1f18; --muted:#7a8577;
  --rojo:#c0392b; --rojo-l:#fff0f0; --rojo-b:#fcc;
  --font:'DM Sans',sans-serif; --mono:'DM Mono',monospace;
}

body {
  background:var(--bg); color:var(--text); font-family:var(--font);
  min-height:100vh;
}

/* ── Páginas centradas (login, registro) ─────────────────── */
body.centrada {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px;
}

.card {
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:40px 36px; width:100%; max-width:440px;
  box-shadow:0 8px 32px rgba(0,0,0,.06);
}

.logo { text-align:center; margin-bottom:28px; }
.logo-ring {
  width:64px; height:64px; background:var(--green-l); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.logo-ring svg { width:28px; height:28px; }
.logo h1 { font-size:20px; font-weight:600; margin-bottom:4px; }
.logo p  { font-size:14px; color:var(--muted); }

/* ── Formularios ─────────────────────────────────────────── */
.field { margin-bottom:18px; }

label {
  display:block; font-size:12px; font-weight:500; color:var(--muted);
  text-transform:uppercase; letter-spacing:.7px; margin-bottom:8px;
}
label .opcional { text-transform:none; letter-spacing:0; font-weight:400; }

input[type=text], input[type=email], input[type=password], input[type=tel] {
  width:100%; background:var(--bg); border:1.5px solid var(--border);
  border-radius:10px; padding:14px 16px; color:var(--text);
  font-family:var(--font); font-size:16px; outline:none;
  transition:border-color .2s;
}
/* 16px evita que iOS haga zoom automático al enfocar un campo */
input[type=text].mono { font-family:var(--mono); letter-spacing:1px; }
input:focus { border-color:var(--green); }

.hint { font-size:12px; color:var(--muted); margin-top:6px; line-height:1.45; }

.check {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:20px;
}
.check input { margin-top:2px; flex-shrink:0; width:18px; height:18px; }
.check a { color:var(--green); }

.btn {
  width:100%; padding:15px; background:var(--green); color:#fff; border:none;
  border-radius:10px; font-family:var(--font); font-size:15px; font-weight:600;
  cursor:pointer; transition:background .2s, transform .1s; margin-top:4px;
}
.btn:hover  { background:#158f50; }
.btn:active { transform:scale(.98); }
.btn-sec {
  background:transparent; color:var(--green); border:1.5px solid var(--border);
}
.btn-sec:hover { background:var(--surface2); }

.aviso {
  border-radius:10px; padding:12px 14px; font-size:14px;
  margin-bottom:20px; line-height:1.5;
}
.aviso.error { background:var(--rojo-l); border:1.5px solid var(--rojo-b); color:var(--rojo); }
.aviso.ok    { background:var(--green-l); border:1.5px solid #a8e0c2; color:#12784a; }

.footer { text-align:center; margin-top:24px; font-size:13px; color:var(--muted); }
.footer a { color:var(--green); text-decoration:none; }

/* ── Cabecera de páginas internas ────────────────────────── */
header {
  background:var(--green); padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; height:56px;
  position:sticky; top:0; z-index:10;
}
.header-brand { display:flex; align-items:center; gap:10px; color:#fff; }
.header-brand svg { width:20px; height:20px; }
.header-brand span { font-weight:600; font-size:16px; }
.header-right { display:flex; align-items:center; gap:14px; }
header a { color:rgba(255,255,255,.85); font-size:13px; text-decoration:none; }
header a:hover { color:#fff; }

.tarjeta-badge {
  background:rgba(255,255,255,.2); border-radius:6px; padding:4px 10px;
  font-family:var(--mono); font-size:11px; color:#fff; letter-spacing:.5px;
}

/* ── Contenido ───────────────────────────────────────────── */
.content { max-width:680px; margin:0 auto; padding:24px 16px 40px; }

.section {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; margin-bottom:16px;
}
.section-head {
  padding:16px 18px; border-bottom:1px solid var(--border);
  font-weight:600; font-size:15px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.section-head a { font-size:13px; color:var(--green); text-decoration:none; font-weight:500; }

.empty { text-align:center; padding:32px; color:var(--muted); font-size:14px; line-height:1.6; }

/* ── Barra de navegación inferior (app) ──────────────────── */
.tabbar {
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  display:flex; background:var(--surface);
  border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px; text-decoration:none; color:var(--muted);
  font-size:11px; font-weight:500;
  -webkit-tap-highlight-color:transparent;
}
.tabbar a svg { width:22px; height:22px; }
.tabbar a.on { color:var(--green); }
.tabbar a.on svg { stroke-width:2.3; }