/* =======================================================
   v0.26.0321.2 — AXION LAMSPA / Common UI
   Archivo: /css/common.css
   Fecha: 2026-03-21 22:05:00 (-03:00)

   Propósito:
   - Estilos transversales reutilizables
   - Botón instalar PWA
   - Gadgets y botones auxiliares
   ======================================================= */

:root{
  --ui-pill-radius: 12px;
  --ui-soft-border: #dfe3ea;
  --ui-soft-bg: #ffffff;
  --ui-soft-text: #fff;
  --ui-soft-hover: #f8fafc;
  --ui-primary: #0d6efd;
  --ui-primary-hover: #0b5ed7;
  --ui-success: #198754;
  --ui-warning-bg: #fff3cd;
  --ui-warning-border: #ffe69c;
  --ui-warning-text: #664d03;
  --ui-shadow-soft: 0 8px 20px rgba(0,0,0,.08);
}

/* =========================
   Botones transversales
========================= */
.ui-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:38px;
  padding:.55rem .9rem;
  border-radius:var(--ui-pill-radius);
  border:1px solid var(--ui-soft-border);
  background:var(--ui-soft-bg);
  color:var(--ui-soft-text);
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
  transition:all .18s ease;
  box-shadow:none;
}

.ui-btn:hover{
  background:var(--ui-soft-hover);
  color:var(--ui-soft-text);
  border-color:#cfd6df;
}

.ui-btn:disabled,
.ui-btn.disabled{
  opacity:.6;
  pointer-events:none;
}

.ui-btn-primary{
  background:var(--ui-primary);
  border-color:var(--ui-primary);
  color:#fff;
}

.ui-btn-primary:hover{
  background:var(--ui-primary-hover);
  border-color:var(--ui-primary-hover);
  color:#fff;
}

.ui-btn-outline{
  background:#fff;
  border-color:var(--ui-soft-border);
  color:var(--ui-soft-text);
}

.ui-btn-sm{
  min-height:34px;
  padding:.42rem .75rem;
  font-size:.86rem;
  border-radius:10px;
}

/* =========================
   Instalación PWA
========================= */
.pwa-install-wrap{
  display:none;
  width:100%;
}

.pwa-install-wrap.is-visible{
  display:block;
}

.pwa-install-btn{
  width:100%;
}

.pwa-install-row{
  display:flex;
  align-items:center;
  gap:.75rem;
  width:100%;
  padding:.35rem 0;
}

.pwa-install-row .pwa-install-icon{
  width:34px;
  height:34px;
  min-width:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--ui-soft-border);
  background:#fff;
  color:var(--ui-primary);
}

.pwa-install-row .pwa-install-copy{
  min-width:0;
  flex:1;
}

.pwa-install-row .pwa-install-title{
  display:block;
  font-size:.92rem;
  font-weight:700;
  color:#fff;
  line-height:1.15;
}

.pwa-install-row .pwa-install-subtitle{
  display:block;
  font-size:.76rem;
  color:#64748b;
  line-height:1.2;
  margin-top:.1rem;
}

/* Variante compacta para login */
.pwa-install-login{
  margin-top:.75rem;
  display:none;
}

.pwa-install-login.is-visible{
  display:block;
}

.pwa-install-login .pwa-install-btn{
  width:auto;
  min-width:180px;
}

/* =========================
   Badge / info transversal
========================= */
.ui-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid var(--ui-soft-border);
  background:#fff;
  color:#475569;
  font-size:.82rem;
}

.ui-gadget{
  border:1px solid var(--ui-soft-border);
  background:#fff;
  border-radius:16px;
  padding:.9rem 1rem;
  box-shadow:var(--ui-shadow-soft);
}

.ui-gadget-muted{
  background:#f8fafc;
  border-color:#e5e7eb;
}

.ui-alert-soft{
  border:1px solid var(--ui-warning-border);
  background:var(--ui-warning-bg);
  color:var(--ui-warning-text);
  border-radius:14px;
  padding:.85rem 1rem;
  font-size:.92rem;
}

/* =========================
   Sidebar integración
========================= */
.sidebar-footer .pwa-install-wrap{
  margin-bottom:.45rem;
}

/* =========================
   Responsive
========================= */
@media (max-width: 575.98px){
  .pwa-install-login .pwa-install-btn{
    width:100%;
  }
}