/*
   ____  _   _ ____    _    _   _   _
  |  _ \| | | | __ )  / \  | | | | | |
  | | | | | | |  _ \ / _ \ | | | | | |
  | |_| | |_| | |_) / ___ \| |_| |_| |
  |____/ \___/|____/_/   \_\_____\___/

  Dubalu — Plataforma Buen Gobierno · 2026
*/

/* =========================================================
   Icon system v2 — Lucide-style
   Stroke 1.6px, line-cap round, line-join round.
   ========================================================= */

.i { display:inline-flex; flex:none; }
.i svg { display:block; }
.i-sm svg { width: 16px; height: 16px; }
.i-md svg { width: 20px; height: 20px; }
.i-lg svg { width: 24px; height: 24px; }
.i-xl svg { width: 28px; height: 28px; }

/* IconTile — the workhorse component */
.icon-tile {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--red-50);
  color: var(--red-600);
  flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-tile svg { width: 22px; height: 22px; stroke-width: 1.7; }

.icon-tile.sm { width: 36px; height: 36px; border-radius: 10px; }
.icon-tile.sm svg { width: 18px; height: 18px; }
.icon-tile.lg { width: 56px; height: 56px; border-radius: 14px; }
.icon-tile.lg svg { width: 26px; height: 26px; }
.icon-tile.xl { width: 64px; height: 64px; border-radius: 16px; }
.icon-tile.xl svg { width: 30px; height: 30px; }

/* Circular variant */
.icon-tile.round { border-radius: 999px; }

/* Color variants */
.icon-tile.is-red   { background: var(--red-50);    color: var(--red-600); }
.icon-tile.is-jade  { background: var(--jade-100);  color: var(--jade-700); }
.icon-tile.is-sky   { background: var(--sky-100);   color: var(--sky-700); }
.icon-tile.is-amber { background: var(--amber-100); color: var(--amber-700); }
.icon-tile.is-violet{ background: var(--violet-100);color: var(--violet-700); }
.icon-tile.is-gray  { background: var(--gray-200);  color: var(--ink-700); }
.icon-tile.is-dark  { background: var(--ink-900);   color: #fff; }
.icon-tile.is-white { background: #fff; color: var(--ink-900); border: 1px solid var(--border); }

/* When the parent card is hovered, fill the tile */
.card:hover > .icon-tile.is-red,
a.card:hover .icon-tile.is-red,
.cat:hover .icon-tile,
.svc:hover .icon-tile {
  background: var(--red-600); color: #fff;
}

/* Stroke uniformity for all inline SVGs inside icon-tile */
.icon-tile svg { stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }