@use "tokens" as *;

// Tarjeta de entidad: mezcla kontuan (contenedor + hover) y CDL (cabecera con
// acciones + divisoria, contenido con badges/meta).
.entity-card {
  display: flex;
  flex-direction: column;
  background: $surface;
  border: 1px solid $border;
  border-radius: $radius-lg;
  box-shadow: $shadow-sm;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;

  &--clickable {
    cursor: pointer;
    &:hover { border-color: $border-strong; box-shadow: $shadow-md; }
  }
  &--muted { opacity: 0.65; }
  // Seleccionada: acento del tema, borde doblado con un anillo (sin mover
  // el layout) y una sombra suave para despegarla de la rejilla.
  &.is-active {
    border-color: $accent-500;
    box-shadow:
      0 0 0 1px $accent-500,
      0 2px 10px color-mix(in srgb, $accent-500 30%, transparent);
  }

  // Borde teñido con el color de la entidad (prop accentColor, p. ej. su
  // facción). El color viene de los datos del juego, así que en reposo nunca
  // va puro: mezclado con el borde del tema queda sutil tanto en claro como
  // en oscuro; gana presencia al hover y es pleno en la tarjeta seleccionada.
  &--accented {
    border-color: color-mix(in srgb, var(--entity-card-accent) 45%, $border);

    &.entity-card--clickable:hover {
      border-color: color-mix(in srgb, var(--entity-card-accent) 75%, $border-strong);
    }
    // La selección manda sobre el tinte de la entidad: mismo acento del
    // tema que cualquier otra card seleccionada.
    &.is-active {
      border-color: $accent-500;
    }
  }

  // Franja superior opcional (emblema/imagen). Cuadrada: con el grid de los
  // index a 4 columnas la tarjeta es más estrecha y la imagen queda contenida
  // (más bien pequeña) y centrada, nunca deformada ni recortada. Sin fondo:
  // la franja hereda la superficie de la tarjeta.
  &__media {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    img { width: 100%; height: 100%; object-fit: contain; }
  }

  // Cabecera: título + acciones, con divisoria (CDL).
  &__header {
    display: flex;
    align-items: center;
    gap: $space-2;
    padding: $space-3 $space-4 $space-2;
    border-bottom: 1px solid $border;
    min-width: 0;

    // Sin badges ni meta la cabecera es lo último de la card: la divisoria
    // sobra y el padding inferior recupera el del resto de lados.
    &:last-child {
      border-bottom: none;
      padding-bottom: $space-3;
    }
  }

  &__title {
    flex: 1;
    margin: 0;
    font-size: $fs-16;
    font-weight: $k-fw-semibold;
    color: $text-1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  // Editar en la propia tarjeta (entidades sin single). En verde ($success),
  // con hover al estilo de los icon-btn del ui (fondo semitransparente).
  &__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: $space-1;
    background: none;
    border: none;
    border-radius: $radius-sm;
    color: $success;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;

    &:hover { background: rgba(74, 222, 128, 0.16); }
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: $space-2;
    padding: $space-2 $space-4 $space-3;
  }

  &__badges {
    display: flex;
    flex-wrap: wrap;
    gap: $space-1;
  }

  &__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: $space-3;
    font-size: $fs-13;
    color: $text-3;
  }
}