/* ============================================================
   VARIABLES Y RESET
   ============================================================ */
:root {
  --color-primary:    #4CAF50;
  --color-primary-dk: #388E3C;
  --color-primary-lt: #E8F5E9;
  --color-bg:         #FFFFFF;
  --color-surface:    #F8F9FA;
  --color-border:     #E8E8E8;
  --color-text:       #1A1A1A;
  --color-text-muted: #6B7280;
  --color-error:      #EF4444;
  --color-error-lt:   #FEE2E2;
  --radius:           12px;
  --radius-sm:        8px;
  --shadow:           0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.12);
  --header-h:         56px;
  --bottom-nav-h:     60px;
  --max-w:            480px;
  --sp:               16px;   /* unidad de espaciado base */
}

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

html {
  height: 100%;
  /* Soporte para el notch de iOS */
  padding-top: env(safe-area-inset-top);
}

body {
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   LAYOUT BASE
   ============================================================ */

/* Wrapper máximo que centra el contenido en pantallas anchas */
#app {
  min-height: 100vh;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
}

/* Contenido desplazado bajo el header fijo */
.page-content {
  padding: calc(var(--header-h) + var(--sp)) var(--sp) calc(var(--bottom-nav-h) + var(--sp));
}

/* Cuando no hay bottom nav (admin, login) */
.page-content--no-bottom-nav {
  padding-bottom: var(--sp);
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */

h1 { font-size: 1.5rem;  font-weight: 700; }
h2 { font-size: 1.125rem; font-weight: 600; }
h3 { font-size: 1rem;    font-weight: 600; }

.section-title {
  margin-bottom: var(--sp);
}

.empty-msg {
  text-align: center;
  color: var(--color-text-muted);
  padding: calc(var(--sp) * 2) 0;
  font-size: 0.9rem;
}

/* ============================================================
   SKELETON (carga)
   ============================================================ */

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

.skeleton-row {
  height: 44px;
  margin-bottom: 8px;
}

/* ============================================================
   RESPONSIVE — ESCRITORIO
   ============================================================ */

@media (min-width: 768px) {
  :root {
    --max-w: 960px;
  }

  /* En escritorio no hay bottom-nav, no necesitamos su padding */
  .page-content {
    padding-bottom: var(--sp);
  }
}