/* =========================
       1. VARIABLES Y RESET
    ========================= */
    :root {
      --primary: #ff5722;
      --primary-dark: #e64a19;
      --success: #00b894;
      --danger: #d63031;
      --warning: #fdcb6e;
      --text-dark: #2d3436;
      --text-light: #636e72;
      --bg: #f8f9fa;
      --card-bg: #ffffff;
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
      --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
      --nav-height: 60px;
      --safe-top: 0px; /* Ajustado a 0 porque Android pondrá el Banner arriba */
      --radius: 16px;
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    body, html {
      margin: 0; padding: 0;
      height: 100%; width: 100%;
      background: var(--bg);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      overflow: hidden; /* Vital para SPA */
      user-select: none;
    }