/*
 * base.css — Ampara PWA
 *
 * Contiene:
 *   - Variables CSS globales (paleta, espaciado, blur, transiciones)
 *   - Reset universal
 *   - Estilos base de html, body, button, body::before
 *
 * Para cambiar la paleta de Ampara: editar solo el bloque :root
 */

/* ============================================================
   VARIABLES CSS GLOBALES
   ============================================================ */

:root {
  /* --- Colores primarios --- */
  --color-primary:        #4299e1;
  --color-primary-hover:  #3182ce;
  --color-primary-deep:   #2563eb;
  --color-primary-deeper: #1d4ed8;

  /* --- Neon (dark mode header) --- */
  --color-neon:           #00ffff;

  /* --- Peligro / Emergencia --- */
  --color-danger:         #dc2626;
  --color-danger-hover:   #b91c1c;

  /* --- Advertencia --- */
  --color-warning:        #f59e0b;
  --color-warning-bg:     #fef5e7;
  --color-warning-bg-dark: rgba(69, 26, 3, 0.6);

  /* --- Info --- */
  --color-info:           #3b82f6;
  --color-info-bg:        #eff6ff;
  --color-info-bg-dark:   rgba(30, 58, 138, 0.6);

  /* --- Fondos dark mode --- */
  --color-dark-bg:        #2d3748;
  --color-dark-surface:   #2a3441;
  --color-dark-hover:     #334155;
  --color-dark-border:    #4a5568;
  --color-dark-card-hover: #3a4a5e;

  /* --- Texto dark mode --- */
  --color-dark-text:      #f7fafc;
  --color-dark-text-muted: #a0aec0;
  --color-dark-text-soft: #e2e8f0;
  --color-dark-text-sub:  #cbd5e0;

  /* --- Sombras --- */
  --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 4px 8px rgba(66, 153, 225, 0.3);
  --shadow-primary-hover: 0 6px 12px rgba(66, 153, 225, 0.4);
  --shadow-neon:    0 0 20px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 255, 255, 0.4);

  /* --- Glassmorphism --- */
  --blur-glass:     blur(10px);
  --blur-glass-sm:  blur(8px);
  --glass-light:    rgba(255, 255, 255, 0.85);
  --glass-light-sm: rgba(255, 255, 255, 0.1);
  --glass-dark:     rgba(45, 55, 72, 0.85);
  --glass-dark-sm:  rgba(45, 55, 72, 0.1);

  /* --- Transiciones --- */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.3s ease;

  /* --- Border radius --- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 50%;

  /* --- Fuente --- */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;

  /* --- Overlay del fondo --- */
  --overlay-opacity: rgba(0, 0, 0, 0.45);

  /* --- URL del fondo --- */
  --bg-image: url("https://cdn.jsdelivr.net/gh/nauthix/data_set@main/img/tu-fondo2.png");
}

/* ============================================================
   RESET UNIVERSAL
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   HTML / BODY
   ============================================================ */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  touch-action: pan-y;
}

/* ============================================================
   BUTTON
   ============================================================ */

button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   OVERLAY SEMITRANSPARENTE SOBRE EL FONDO
   ============================================================ */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--overlay-opacity);
  pointer-events: none;
  z-index: -1;
}