/* ============================================================
   PLAZA PROGRESO – DESIGN SYSTEM
   Capa visual compartida para PPMM (tickets/visitas) y PPERP (ERP).
   No reemplaza el CSS original: lo extiende y refina.
   Namespaces respetados: .ppmm-*  y  .e-*
   ============================================================ */

:root{
  /* Tokens de marca (fallback; PHP inyecta --ppmm-primary/--e vía inline style) */
  --pp-primary: #02734A;
  --pp-primary-dark: #015536;
  --pp-accent: #00C4A7;
  --pp-ink: #0B1220;
  --pp-muted: #5B6472;
  --pp-line: rgba(11,18,32,.09);
  --pp-bg: #F6F8F9;
  --pp-surface: #FFFFFF;

  --pp-radius-sm: 10px;
  --pp-radius: 16px;
  --pp-radius-lg: 22px;

  --pp-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --pp-shadow: 0 8px 24px rgba(2,20,15,.08), 0 2px 6px rgba(2,20,15,.06);
  --pp-shadow-lg: 0 20px 45px rgba(2,20,15,.14), 0 6px 14px rgba(2,20,15,.08);

  --pp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --pp-ease: cubic-bezier(.2,.8,.2,1);

  /* Áreas seguras para PWA en modo standalone (notch / home indicator) */
  --pp-safe-top: env(safe-area-inset-top, 0px);
  --pp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pp-safe-left: env(safe-area-inset-left, 0px);
  --pp-safe-right: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark){
  body.pp-auto-dark{
    --pp-ink:#EDF1F5; --pp-muted:#A7B0BD; --pp-line:rgba(255,255,255,.10);
    --pp-bg:#0B0F14; --pp-surface:#121826;
  }
}

/* ------------------------------------------------------------
   Base tipográfica y contenedor de la app
   ------------------------------------------------------------ */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

.ppmm-wrap, .e-wrap{
  font-family: var(--pp-font);
  color: var(--pp-ink);
  padding-left: calc(14px + var(--pp-safe-left));
  padding-right: calc(14px + var(--pp-safe-right));
  padding-bottom: calc(28px + var(--pp-safe-bottom));
}

/* ------------------------------------------------------------
   Tarjetas: elevación suave, borde sutil, hover con intención
   ------------------------------------------------------------ */
.ppmm-card, .e-card{
  border-radius: var(--pp-radius-lg) !important;
  box-shadow: var(--pp-shadow) !important;
  border: 1px solid var(--pp-line) !important;
  transition: box-shadow .25s var(--pp-ease), transform .25s var(--pp-ease);
  background: var(--pp-surface) !important;
}
.ppmm-card:hover, .e-card:hover{ box-shadow: var(--pp-shadow-lg) !important; }

.ppmm-title, .e-title{
  font-weight: 800 !important;
  letter-spacing: -.01em;
  font-size: clamp(18px, 2.4vw, 24px) !important;
}
.ppmm-sub, .e-sub{ color: var(--pp-muted) !important; }

/* ------------------------------------------------------------
   Botones: estados claros, foco accesible, tamaño táctil (44px)
   ------------------------------------------------------------ */
.ppmm-btn, .e-btn{
  border-radius: 12px !important;
  font-weight: 700 !important;
  min-height: 44px;
  padding: 11px 18px !important;
  box-shadow: var(--pp-shadow-sm);
  transition: transform .15s var(--pp-ease), box-shadow .15s var(--pp-ease), opacity .15s var(--pp-ease), filter .15s var(--pp-ease);
  background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
}
.ppmm-btn:hover, .e-btn:hover{ transform: translateY(-1px); filter:brightness(1.04); box-shadow: var(--pp-shadow); }
.ppmm-btn:active, .e-btn:active{ transform: translateY(0); }
.ppmm-btn:focus-visible, .e-btn:focus-visible,
.ppmm-field input:focus-visible, .e-field input:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--pp-primary, #02734A) 45%, transparent);
  outline-offset: 2px;
}
.ppmm-btn-ghost, .e-ghost{ box-shadow:none !important; background-image:none !important; }

/* ------------------------------------------------------------
   Campos de formulario: más aire, mejor contraste de foco
   ------------------------------------------------------------ */
.ppmm-field input, .ppmm-field select, .ppmm-field textarea,
.e-field input, .e-field select, .e-field textarea{
  border-radius: 12px !important;
  min-height: 44px;
  transition: border-color .15s var(--pp-ease), box-shadow .15s var(--pp-ease);
  background: var(--pp-surface);
}

/* ------------------------------------------------------------
   KPIs: tarjetas con acento superior y jerarquía tipográfica clara
   ------------------------------------------------------------ */
.ppmm-kpi, .e-kpi{
  border-radius: var(--pp-radius) !important;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--pp-surface), var(--pp-bg)) !important;
}
.ppmm-kpi::before, .e-kpi::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--pp-primary,#02734A), var(--pp-accent,#00C4A7));
}
.ppmm-kpi .v, .e-kpi b{ font-weight: 800 !important; letter-spacing:-.02em; }
.ppmm-kpi .l, .e-kpi span{ letter-spacing:.04em; }

/* ------------------------------------------------------------
   Badges / chips: mayor legibilidad
   ------------------------------------------------------------ */
.ppmm-badge, .e-badge, .ppmm-chip{
  border-radius: 999px !important;
  letter-spacing:.02em;
}

/* ------------------------------------------------------------
   Tablas: cabecera fija visual + fila hover, sin romper el
   overflow-x que ya usan ambos plugins para móviles pequeños
   ------------------------------------------------------------ */
.ppmm-table th, .e-table th{
  background: var(--pp-bg);
  position: sticky; top: 0;
  letter-spacing:.05em;
}
.ppmm-table tbody tr, .e-table tbody tr{ transition: background .15s var(--pp-ease); }
.ppmm-table tbody tr:hover, .e-table tbody tr:hover{ background: color-mix(in srgb, var(--pp-primary,#02734A) 5%, transparent); }

/* ------------------------------------------------------------
   RESPONSIVE 100%
   Mobile-first: colapsa grids progresivamente y evita overflow
   horizontal accidental del layout general (las tablas conservan
   su propio scroll interno, que es la UX correcta para datos anchos)
   ------------------------------------------------------------ */
html, body{ overflow-x: hidden; }

@media (max-width: 1024px){
  .ppmm-kpis{ grid-template-columns: repeat(2, 1fr) !important; }
  .e-kpis{ grid-template-columns: repeat(3, 1fr) !important; }
  .ppmm-charts{ grid-template-columns: 1fr !important; }
}

@media (max-width: 780px){
  .ppmm-wrap, .e-wrap{ margin: 14px auto !important; }
  .ppmm-card, .e-card{ padding: 16px !important; border-radius: var(--pp-radius) !important; }
  .ppmm-grid, .e-grid{ grid-template-columns: 1fr !important; }
  .ppmm-kpis{ grid-template-columns: repeat(2, 1fr) !important; }
  .e-kpis{ grid-template-columns: repeat(2, 1fr) !important; }
  .ppmm-kpi-wide{ grid-column: span 2 !important; }
  .ppmm-head, .e-head{ flex-direction: column !important; align-items: stretch !important; }
  .ppmm-actions{ width:100%; }
  .ppmm-actions .ppmm-btn, .e-actions .e-btn{ flex:1 1 auto; text-align:center; justify-content:center; }
  .ppmm-btn, .e-btn{ width: 100%; }
  .ppmm-row > .ppmm-btn, .e-row > .e-btn{ width:auto; }
}

@media (max-width: 480px){
  .ppmm-kpis, .e-kpis{ grid-template-columns: 1fr 1fr !important; }
  .ppmm-title, .e-title{ font-size: 19px !important; }
  .ppmm-pass-qr{ width:100% !important; }
}

/* Tap targets cómodos en pantallas táctiles */
@media (hover:none) and (pointer:coarse){
  .ppmm-btn, .e-btn, .ppmm-field input, .e-field input, .ppmm-field select, .e-field select{ min-height:46px; }
}

/* ------------------------------------------------------------
   Estado vacío / skeleton de carga reutilizable (opcional, para
   listas que se pueblen vía JS en el futuro)
   ------------------------------------------------------------ */
.pp-skeleton{
  background: linear-gradient(90deg, var(--pp-bg) 25%, var(--pp-line) 37%, var(--pp-bg) 63%);
  background-size: 400% 100%;
  animation: pp-shimmer 1.4s ease infinite;
  border-radius: 10px;
}
@keyframes pp-shimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* ------------------------------------------------------------
   Banner de instalación PWA e indicador offline (usados por pp-pwa.js)
   ------------------------------------------------------------ */
.pp-install-banner{
  position: fixed; left: 50%; transform: translateX(-50%) translateY(120%);
  bottom: calc(16px + var(--pp-safe-bottom));
  z-index: 9999;
  background: var(--pp-ink); color:#fff;
  padding: 12px 16px; border-radius: 14px;
  box-shadow: var(--pp-shadow-lg);
  display:flex; align-items:center; gap:12px;
  font-family: var(--pp-font); font-size:14px; font-weight:600;
  max-width: calc(100vw - 32px);
  transition: transform .35s var(--pp-ease);
}
.pp-install-banner.pp-show{ transform: translateX(-50%) translateY(0); }
.pp-install-banner button{
  border:0; border-radius:10px; padding:8px 12px; font-weight:800; cursor:pointer;
}
.pp-install-banner .pp-install-yes{ background: var(--pp-accent,#00C4A7); color:#00281F; }
.pp-install-banner .pp-install-no{ background: transparent; color:#fff; opacity:.75; }

.pp-offline-pill{
  position: fixed; top: calc(10px + var(--pp-safe-top)); left: 50%; transform: translateX(-50%) translateY(-150%);
  z-index: 9999; background:#B42318; color:#fff; font-family: var(--pp-font);
  font-size:12px; font-weight:800; letter-spacing:.03em;
  padding:8px 14px; border-radius:999px; box-shadow: var(--pp-shadow);
  transition: transform .3s var(--pp-ease);
}
.pp-offline-pill.pp-show{ transform: translateX(-50%) translateY(0); }

/* Ocultar elementos no relevantes cuando la app corre "instalada" (standalone) */
@media all and (display-mode: standalone){
  .pp-hide-standalone{ display:none !important; }
}