/* -------------------------------------------------------------------------
   GestFel CSS · friendly-ui.css
   Iconografía cálida, banner motivacional y familias cromáticas por módulo.
   ------------------------------------------------------------------------- */
:root {
  --cb-icon-teal: #0f8a78;
  --cb-icon-blue: #247fc4;
  --cb-icon-amber: #c77a00;
  --cb-icon-coral: #d45748;
  --cb-icon-purple: #7b61d1;
  --cb-icon-slate: #5d6b82;
  --cb-soft-teal: #eaf8f4;
  --cb-soft-blue: #e8f5ff;
  --cb-soft-amber: #fff4db;
  --cb-soft-coral: #fff0ed;
  --cb-soft-purple: #f4f0ff;
  --cb-soft-slate: #f1f5f9;
}

.app-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Menú lateral: iconos más vivos sin perder sobriedad */
.sidebar nav a .nav-icon {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 12px;
  background: var(--cb-soft-slate);
  color: var(--cb-icon-slate);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sidebar nav a:hover .nav-icon,
.sidebar nav a:focus-visible .nav-icon,
.sidebar nav a.active .nav-icon {
  transform: translateY(-1px);
}

/* Dashboard: iconos con un poco más de presencia */
.kpi .kpi-icon,
.kpi.card .kpi-icon,
.card .kpi-icon {
  width: 52px;
  height: 52px;
  padding: 11px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(15, 36, 55, .045);
}

/* Menú inferior: mantener tamaño equilibrado */
.mobile-bottom-icon {
  width: 1.42rem;
  height: 1.42rem;
}

/* Familias cromáticas por módulo */
.app-icon-type-dashboard,
.app-icon-type-home {
  color: var(--cb-icon-teal);
  background: var(--cb-soft-teal);
}

.app-icon-type-map,
.app-icon-type-pin,
.app-icon-type-reports,
.app-icon-type-report {
  color: #247aa6;
  background: var(--cb-soft-blue);
}

.app-icon-type-colonies,
.app-icon-type-inventory,
.app-icon-type-receipt,
.app-icon-type-euro {
  color: var(--cb-icon-amber);
  background: var(--cb-soft-amber);
}

.app-icon-type-foster,
.app-icon-type-food {
  color: var(--cb-icon-coral);
  background: var(--cb-soft-coral);
}

.app-icon-type-cat,
.app-icon-cat,
.app-icon-gato,
.app-icon-gatos {
  color: var(--cb-icon-purple);
  background: var(--cb-soft-purple);
}

.app-icon-type-heart {
  color: #d68400;
  background: var(--cb-soft-amber);
}

/* Salud: cruz azul veterinaria */
.app-icon-type-health,
.app-icon-type-stethoscope,
.app-icon-health,
.app-icon-salud,
.app-icon-vet,
.app-icon-veterinario {
  color: var(--cb-icon-blue);
  background: var(--cb-soft-blue);
}

.app-icon-type-alert,
.app-icon-alert,
.app-icon-incidencias,
.app-icon-reportes {
  color: var(--cb-icon-purple);
  background: var(--cb-soft-purple);
}

.app-icon-type-requests,
.app-icon-type-communications,
.app-icon-type-users,
.app-icon-type-council,
.app-icon-type-account,
.app-icon-type-support,
.app-icon-type-backup,
.app-icon-type-photo,
.app-icon-type-plus,
.app-icon-type-tasks,
.app-icon-type-archive,
.app-icon-type-tag,
.app-icon-type-book,
.app-icon-type-scissors {
  color: var(--cb-icon-teal);
  background: var(--cb-soft-teal);
}

/* Banner motivacional */
.friendly-motivation-banner {
  display: flex;
  align-items: center;
  gap: .65rem;
  max-width: 100% !important;
  margin: 0 0 1rem;
  border: 1px solid rgba(244, 166, 42, .38);
  background: linear-gradient(135deg, #fff8ec 0%, #fff2df 100%);
  border-radius: .85rem;
  padding: .55rem .85rem;
  color: #12343f;
  box-shadow: 0 12px 30px rgba(18, 52, 63, 0.065);
}

.friendly-motivation-banner .motivation-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--cb-icon-teal);
  box-shadow: 0 5px 18px rgba(15, 138, 120, .12);
}

.friendly-motivation-banner strong {
  display: inline;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1.15;
}

.friendly-motivation-banner span {
  display: inline;
  margin-top: 0;
  color: #5d6b82;
  font-size: .875rem;
  line-height: 1.35;
}

.friendly-motivation-banner strong::after {
  content: ' · ';
  font-weight: 400;
  opacity: .5;
}

@media (max-width: 760px) {
  .kpi .kpi-icon,
  .kpi.card .kpi-icon,
  .card .kpi-icon {
    width: 46px;
    height: 46px;
    padding: 10px;
  }
}

/* Colores del menú lateral con suficiente especificidad */
.sidebar nav a .nav-icon.app-icon-type-dashboard,
.sidebar nav a .nav-icon.app-icon-type-home {
  color: var(--cb-icon-teal);
  background: var(--cb-soft-teal);
}

.sidebar nav a .nav-icon.app-icon-type-map,
.sidebar nav a .nav-icon.app-icon-type-pin,
.sidebar nav a .nav-icon.app-icon-type-reports,
.sidebar nav a .nav-icon.app-icon-type-report {
  color: #247aa6;
  background: var(--cb-soft-blue);
}

.sidebar nav a .nav-icon.app-icon-type-colonies,
.sidebar nav a .nav-icon.app-icon-type-inventory,
.sidebar nav a .nav-icon.app-icon-type-receipt,
.sidebar nav a .nav-icon.app-icon-type-euro {
  color: var(--cb-icon-amber);
  background: var(--cb-soft-amber);
}

.sidebar nav a .nav-icon.app-icon-type-foster,
.sidebar nav a .nav-icon.app-icon-type-food {
  color: var(--cb-icon-coral);
  background: var(--cb-soft-coral);
}

.sidebar nav a .nav-icon.app-icon-type-cat,
.sidebar nav a .nav-icon.app-icon-cat,
.sidebar nav a .nav-icon.app-icon-gato,
.sidebar nav a .nav-icon.app-icon-gatos {
  color: #7b61d1;
  background: var(--cb-soft-purple);
}

.sidebar nav a .nav-icon.app-icon-type-heart {
  color: #d68400;
  background: var(--cb-soft-amber);
}

.sidebar nav a .nav-icon.app-icon-type-health,
.sidebar nav a .nav-icon.app-icon-type-stethoscope,
.sidebar nav a .nav-icon.app-icon-health,
.sidebar nav a .nav-icon.app-icon-salud,
.sidebar nav a .nav-icon.app-icon-vet,
.sidebar nav a .nav-icon.app-icon-veterinario {
  color: var(--cb-icon-blue);
  background: var(--cb-soft-blue);
}

.sidebar nav a .nav-icon.app-icon-type-alert,
.sidebar nav a .nav-icon.app-icon-alert,
.sidebar nav a .nav-icon.app-icon-incidencias,
.sidebar nav a .nav-icon.app-icon-reportes {
  color: var(--cb-icon-purple);
  background: var(--cb-soft-purple);
}

.sidebar nav a .nav-icon.app-icon-type-requests,
.sidebar nav a .nav-icon.app-icon-type-communications,
.sidebar nav a .nav-icon.app-icon-type-users,
.sidebar nav a .nav-icon.app-icon-type-council,
.sidebar nav a .nav-icon.app-icon-type-account,
.sidebar nav a .nav-icon.app-icon-type-support,
.sidebar nav a .nav-icon.app-icon-type-backup,
.sidebar nav a .nav-icon.app-icon-type-photo,
.sidebar nav a .nav-icon.app-icon-type-plus,
.sidebar nav a .nav-icon.app-icon-type-tasks,
.sidebar nav a .nav-icon.app-icon-type-archive,
.sidebar nav a .nav-icon.app-icon-type-tag,
.sidebar nav a .nav-icon.app-icon-type-book,
.sidebar nav a .nav-icon.app-icon-type-scissors,
.sidebar nav a .nav-icon.app-icon-type-ellipsis {
  color: var(--cb-icon-teal);
  background: var(--cb-soft-teal);
}

.sidebar nav a.active .nav-icon {
  background: #fff;
}

/* El icono Más del menú inferior no repite Inicio y queda más reconocible */
.mobile-bottom-item .mobile-bottom-icon.app-icon-type-ellipsis {
  color: #5d6b82;
}