/* ==========================================================
   Tema Cavernify para Glance
   Misma estética que la web de música: fuente Outfit,
   fondo casi negro y acento ámbar (#E8A94C).
   Los colores base se definen en glance.yml (sección theme);
   aquí solo va lo que Glance no permite configurar allí.
   ========================================================== */

@font-face { font-family: 'Outfit'; src: url('/assets/fonts/Outfit-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/Outfit-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/Outfit-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/Outfit-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

html, body, button, input, select, textarea {
  font-family: 'Outfit', sans-serif;
}

/* ---------- Servizos: cuadrados con icono y punto de estado ---------- */
.cv-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.cv-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 12px;
  border-radius: 16px;
  background: #17181C;
  border: 1px solid #2C2D32;
  text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
a.cv-tile:hover { border-color: #E8A94C; transform: translateY(-2px); }
.cv-tile-icon { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; margin-bottom: 10px; }
.cv-tile-name { color: #F2F3F5; font-weight: 600; font-size: 1.05em; }
.cv-tile-sub { color: #9DA0A8; font-size: .85em; margin-top: 2px; }

.cv-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.cv-dot.cv-ok   { background: #3FB950; box-shadow: 0 0 8px rgba(63,185,80,.6); }
.cv-dot.cv-warn { background: #E8A94C; box-shadow: 0 0 8px rgba(232,169,76,.6); }
.cv-dot.cv-down { background: #F85149; box-shadow: 0 0 8px rgba(248,81,73,.6); }

/* ---------- Engadido recentemente: lista con carátula ---------- */
.cv-recent { list-style: none; margin: 0; padding: 0; }
.cv-recent li + li { margin-top: 2px; }
.cv-recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  border-radius: 8px;
  transition: background .15s ease;
}
.cv-recent-row:hover { background: #212226; }
.cv-recent-art { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #212226; }
.cv-recent-text { min-width: 0; flex: 1; line-height: 1.25; }
.cv-recent-album { color: #F2F3F5; font-weight: 600; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-recent-artist { color: #9DA0A8; font-size: .78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }