/* ============================================================
   IProgramer — Estilos personalizados del proyecto
   Basados en los patrones nativos del tema Cuba Admin
   ============================================================ */

/* ── Acciones en tablas (patrón nativo Cuba: ul.action) ─────
   Uso: <ul class="action">
          <li class="edit"><a href="#"><i class="icon-pencil-alt"></i></a></li>
          <li class="delete"><a href="#"><i class="icon-trash"></i></a></li>
          <li class="view"><a href="#"><i class="icon-eye"></i></a></li>
        </ul>
   ─────────────────────────────────────────────────────────── */
div .action .view i  { color: var(--theme-deafult); }
div .action .view    { margin-right: 5px; }
div .action .edit    { margin-right: 5px; } /* refuerza por si acaso */

/* ── Botones: corrección de alineación de íconos feather ────
   Cuba genera <svg> via feather.replace() — necesita
   vertical-align para quedar centrado con el texto del botón.
   NO se sobreescribe display del .btn para no romper el tema.
   ─────────────────────────────────────────────────────────── */
.btn svg,
.btn i.feather,
.btn i[data-feather] {
  vertical-align: -0.15em;
  flex-shrink: 0;
}

/* Ícono dentro de anchor/button sin texto (ícono solo) */
a.btn-icon-only,
button.btn-icon-only {
  padding: 5px 8px;
  line-height: 1;
}

/* ── btn-xs: tamaño extra pequeño para acciones en tablas ───
   Cuba no tiene btn-xs nativo, lo agregamos.
   ─────────────────────────────────────────────────────────── */
.btn-xs {
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 4px;
}

.btn-xs svg {
  width: 12px !important;
  height: 12px !important;
  vertical-align: -0.1em;
}

/* ── Badges con ícono ───────────────────────────────────────
   Cuba usa <span class="badge badge-primary"> con feather
   ─────────────────────────────────────────────────────────── */
.badge svg,
.badge i[data-feather] {
  vertical-align: -0.15em;
  width: 11px;
  height: 11px;
}

/* ── Cards: header con botón a la derecha ───────────────────
   Patrón: <div class="card-header card-no-border d-flex ...">
   ─────────────────────────────────────────────────────────── */
.card-header.card-no-border {
  padding-bottom: 0;
}

/* ── Filtros encima de tablas ───────────────────────────────
   Barra de filtros consistente con el diseño del template
   ─────────────────────────────────────────────────────────── */
.filtros-tabla {
  background: #fff;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(82, 82, 108, .08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ── Avatar inicial (cuando no hay foto) ────────────────────
   Cuadrado redondeado con inicial del nombre
   ─────────────────────────────────────────────────────────── */
.avatar-iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  background-color: rgba(var(--theme-deafult-rgb), 0.1);
  color: var(--theme-deafult);
}

.avatar-iniciales.lg {
  width: 72px;
  height: 72px;
  font-size: 26px;
}

/* ── Progress bar compacta para tablas ──────────────────────*/
.progress-xs {
  height: 5px;
  border-radius: 3px;
}