/* ==========================================================================
   LicenseHub: estilos propios.
   Regla (checklist de aceptación): acá NO se definen colores. Solo se usan las variables de
   paraguapps-tokens.css (var(--pa-...)). Ningún hex, rgb() ni hsl() suelto.
   ========================================================================== */

body { min-height: 100vh; display: flex; flex-direction: column; }
.pa-main { flex: 1 0 auto; padding-block: 2rem; }

/* --- Header -------------------------------------------------------------- */
.pa-header .navbar-brand { gap: .75rem; }
.pa-header__producto {
  font-family: var(--pa-font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pa-blanco);
  opacity: .8;
}
.pa-header .navbar-toggler { border-color: var(--pa-gris); }
.pa-header__usuario { color: var(--pa-blanco); opacity: .8; font-size: .875rem; }
.pa-header .btn-salir {
  --bs-btn-color: var(--pa-blanco);
  --bs-btn-border-color: var(--pa-gris);
  --bs-btn-hover-color: var(--pa-azul-noche);
  --bs-btn-hover-bg: var(--pa-blanco);
  --bs-btn-hover-border-color: var(--pa-blanco);
  --bs-btn-active-color: var(--pa-azul-noche);
  --bs-btn-active-bg: var(--pa-blanco);
}

/* --- Montos: símbolo en Plus Jakarta (JetBrains Mono no tiene ₲), número en mono --- */
.pa-monto { white-space: nowrap; }
.pa-monto__simbolo { font-family: var(--pa-font-body); font-weight: 600; }
.pa-monto__numero { font-family: var(--pa-font-mono); font-variant-numeric: tabular-nums; }

/* --- Botones y formularios (Bootstrap trae colores propios: se reemplazan por tokens) --- */
.btn-outline-primary {
  --bs-btn-color: var(--pa-azul-noche);
  --bs-btn-border-color: var(--pa-azul-noche);
  --bs-btn-hover-color: var(--pa-blanco);
  --bs-btn-hover-bg: var(--pa-azul-noche);
  --bs-btn-hover-border-color: var(--pa-azul-noche);
  --bs-btn-active-color: var(--pa-blanco);
  --bs-btn-active-bg: var(--pa-azul-noche);
  --bs-btn-active-border-color: var(--pa-azul-noche);
}
.btn-outline-secondary {
  --bs-btn-color: var(--pa-gris);
  --bs-btn-border-color: var(--pa-borde);
  --bs-btn-hover-color: var(--pa-azul-noche);
  --bs-btn-hover-bg: var(--pa-azul-suave);
  --bs-btn-hover-border-color: var(--pa-borde);
  --bs-btn-active-color: var(--pa-azul-noche);
  --bs-btn-active-bg: var(--pa-azul-suave);
  --bs-btn-active-border-color: var(--pa-borde);
}
/* Errores y acciones destructivas: rojo de ERROR, nunca el rojo de marca. */
.btn-danger {
  --bs-btn-color: var(--pa-blanco);
  --bs-btn-bg: var(--pa-error);
  --bs-btn-border-color: var(--pa-error);
  --bs-btn-hover-color: var(--pa-blanco);
  --bs-btn-hover-bg: var(--pa-error);
  --bs-btn-hover-border-color: var(--pa-error);
  --bs-btn-active-color: var(--pa-blanco);
  --bs-btn-active-bg: var(--pa-error);
  --bs-btn-active-border-color: var(--pa-error);
  --bs-btn-disabled-bg: var(--pa-error);
  --bs-btn-disabled-border-color: var(--pa-error);
}
.btn-danger:hover { filter: brightness(.92); }
.btn-outline-danger {
  --bs-btn-color: var(--pa-error);
  --bs-btn-border-color: var(--pa-error);
  --bs-btn-hover-color: var(--pa-blanco);
  --bs-btn-hover-bg: var(--pa-error);
  --bs-btn-hover-border-color: var(--pa-error);
  --bs-btn-active-color: var(--pa-blanco);
  --bs-btn-active-bg: var(--pa-error);
  --bs-btn-active-border-color: var(--pa-error);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--pa-azul-noche);
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
.form-check-input:checked { background-color: var(--pa-azul-noche); border-color: var(--pa-azul-noche); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--pa-error); }
.invalid-feedback { color: var(--pa-error); }
.form-text { color: var(--pa-gris); }
.pa-mono-input { font-family: var(--pa-font-mono); font-size: .875rem; }

/* --- Pestañas ------------------------------------------------------------- */
.nav-tabs { --bs-nav-tabs-border-color: var(--pa-borde); --bs-nav-tabs-link-active-border-color: var(--pa-borde) var(--pa-borde) var(--pa-blanco); }
.nav-tabs .nav-link { color: var(--pa-gris); }
.nav-tabs .nav-link.active { color: var(--pa-azul-noche); font-weight: 600; background: var(--pa-blanco); }
.tab-content.pa-panel { background: var(--pa-blanco); border: 1px solid var(--pa-borde); border-top: 0;
  border-radius: 0 0 var(--pa-radio) var(--pa-radio); padding: 1.5rem; }

/* --- Tablas --------------------------------------------------------------- */
.table { --bs-table-bg: var(--pa-blanco); --bs-table-color: var(--pa-azul-noche); --bs-table-border-color: var(--pa-borde); }
.table thead th { font-family: var(--pa-font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pa-gris); font-weight: 500; }

/* --- Mensajes (flash) ----------------------------------------------------- */
.pa-alerta { border-radius: var(--pa-radio); padding: .85rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; }
.pa-alerta--ok     { background: var(--pa-verde-suave);  color: var(--pa-verde-texto); }
.pa-alerta--error  { background: var(--pa-error-suave);  color: var(--pa-error); }
.pa-alerta--alerta { background: var(--pa-alerta-suave); color: var(--pa-alerta); }
.pa-alerta--info   { background: var(--pa-azul-suave);   color: var(--pa-azul-noche); }
.pa-alerta--link   { background: var(--pa-blanco); border-color: var(--pa-borde); color: var(--pa-azul-noche); }

/* --- Login y pantallas sueltas ------------------------------------------- */
.pa-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.pa-login__tarjeta { width: 100%; max-width: 420px; padding: 2.5rem 2rem; box-shadow: var(--pa-sombra); }
.pa-login__logo { display: block; margin: 0 auto 1rem; }
.pa-tagline { color: var(--pa-gris); font-size: .875rem; }

/* --- Catálogo ------------------------------------------------------------- */
.pa-paleta { display: flex; flex-wrap: wrap; gap: .5rem; }
.pa-paleta input { position: absolute; opacity: 0; pointer-events: none; }
.pa-paleta label { cursor: pointer; border-radius: 50%; padding: 2px; }
.pa-paleta input:checked + label { outline: 3px solid var(--pa-azul-noche); outline-offset: 1px; }
.pa-paleta input:focus-visible + label { outline: 3px solid var(--bs-focus-ring-color); }
.pa-precios dt { font-family: var(--pa-font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pa-gris); font-weight: 500; }
.pa-precios dd { margin-bottom: .5rem; }
.pa-contadores { display: flex; flex-wrap: wrap; gap: .35rem; }
.pa-vacio { color: var(--pa-gris); text-align: center; padding: 2.5rem 1rem; }
.pa-ficha dt { color: var(--pa-gris); font-weight: 500; }
.pa-mono { overflow-wrap: anywhere; }
.pa-multilinea { white-space: pre-line; }
.pa-codigo { background: var(--pa-niebla); border: 1px solid var(--pa-borde); border-radius: var(--pa-radio-sm);
  padding: .75rem 1rem; font-family: var(--pa-font-mono); font-size: .8rem; color: var(--pa-azul-noche);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.pa-codigo--largo { max-height: 28rem; overflow: auto; white-space: pre; }
.pa-pasos { display: flex; gap: .5rem; flex-wrap: wrap; }
.pa-pasos .pa-badge.active { background: var(--pa-azul-noche); color: var(--pa-blanco); }

/* --- Dashboard y reportes ------------------------------------------------ */
.pa-kpi { padding: 1rem 1.25rem; }
.pa-kpi__valor { font-family: var(--pa-font-display); font-weight: 800; font-size: 1.45rem; line-height: 1.25;
  color: var(--pa-azul-noche); overflow-wrap: anywhere; }
.pa-kpi--atencion { border-color: var(--pa-alerta); box-shadow: inset 4px 0 0 var(--pa-alerta); }
.pa-grafico { position: relative; height: 280px; }
.pa-tabla-reporte td, .pa-tabla-reporte th { white-space: nowrap; }

/* --- Cobros y comprobantes ------------------------------------------------ */
.pa-tabla-cobros .dropdown-menu { max-height: 22rem; overflow-y: auto; }
.pa-comprobante { border: 1px solid var(--pa-borde); border-radius: var(--pa-radio-sm); background: var(--pa-blanco);
  overflow: hidden; }
.pa-comprobante__vista { display: block; width: 100%; height: 160px; object-fit: cover; background: var(--pa-niebla); }
.pa-comprobante__pdf { display: flex; align-items: center; justify-content: center; text-decoration: none;
  font-family: var(--pa-font-mono); font-weight: 700; letter-spacing: .1em; color: var(--pa-azul-noche); }

/* --- Perfil de la app (Configuración) y logos propios --------------------- */
.pa-header__logo { height: 32px; width: auto; max-width: 220px; object-fit: contain; }
.pa-login__logo--propio { width: auto; height: auto; max-width: 100%; max-height: 120px; }
.pa-perfil__vista { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  min-height: 6.5rem; padding: 1rem; margin-bottom: 1rem; background: var(--pa-niebla);
  border: 1px solid var(--pa-borde); border-radius: var(--pa-radio); }
.pa-perfil__vista > img { max-width: 100%; max-height: 4.5rem; }
.pa-perfil__vista--menu { background: var(--pa-azul-noche); border-color: var(--pa-azul-noche); }
.pa-perfil__vista--menu > img { max-height: 2.5rem; }
.pa-perfil__app { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .75rem;
  color: var(--pa-azul-noche); }
.pa-perfil__icono { width: 4rem; height: 4rem; border-radius: var(--pa-radio-iso); box-shadow: var(--pa-sombra); }
.pa-perfil__pestana { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; font-size: .75rem;
  color: var(--pa-azul-noche); background: var(--pa-blanco); border: 1px solid var(--pa-borde);
  border-radius: var(--pa-radio-sm) var(--pa-radio-sm) 0 0; }
.pa-perfil__pestana img { width: 16px; height: 16px; }
.pa-perfil__color { width: 3rem; height: 2.4rem; padding: .2rem; }

/* --- Ojito de las contraseñas -------------------------------------------- */
.pa-ojito svg { width: 1.15rem; height: 1.15rem; }
.pa-ojito[aria-pressed="true"] .pa-ojito__ver, .pa-ojito[aria-pressed="false"] .pa-ojito__ocultar { display: none; }

/* --- Pie ------------------------------------------------------------------ */
.pa-pie { color: var(--pa-gris); font-size: .8rem; padding-block: 1.25rem; border-top: 1px solid var(--pa-borde); }