/* ══════════════════════════════════════════════════════════════
   COMPONENTE CARD — La Escala  (Fase 3)
   Todos los modificadores en doble clase (.card.card-X) para
   garantizar especificidad (0,2,0) frente a reglas de contexto.
   ══════════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────── */
.card {
  background: var(--fondo-card);
  border-radius: 5px;
  padding: 0;
}

/* ── Hijos estructurales ───────────────────────────────────── */
.card-header {
  padding: 20px 25px 0;
}

.card-content {
  padding: 25px;
}

.card-footer {
  padding: 0 25px 25px;
}

.card-subtitle {
  font-size: var(--texto-xs);
  color: var(--texto-secundario);
  margin: 0;
}

/* ── Variante 1: Card autocontenida (tile) ─────────────────── */
/* border: 2px solid transparent evita layout shift en hover    */
.card.card-tile {
  padding: 24px;
  border: 2px solid transparent;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

/* Hover solo en tiles que son enlaces (clicables).
   a.card.card-tile cubre <a class="card card-tile">.
   a > .card.card-tile cubre <a><div class="card card-tile"></div></a>. */
a.card.card-tile:hover,
a > .card.card-tile:hover {
  border-color: var(--marca-borde);
  box-shadow: var(--sombra-sm);
}

/* ── Variante 2: Sub-card inset (superficie anidada) ──────── */
.card.card-inset {
  background: var(--gris-50);
  padding: 16px;
}

/* ── Variante 3: Callout con borde semántico ──────────────── */
.card.card-callout {
  padding: 16px;
  border-left: 4px solid transparent;
}

.card.card-callout.card-callout-success {
  background: var(--badge-ok-fondo);
  border-left-color: var(--estado-resuelta);
  color: var(--badge-ok-texto);
}

.card.card-callout.card-callout-warning {
  background: var(--badge-pend-fondo);
  border-left-color: var(--estado-pendiente);
  color: var(--badge-pend-texto);
}

.card.card-callout.card-callout-info {
  background: var(--alerta-info-fondo);
  border-left-color: var(--estado-curso);
  color: #1565c0;
}

.card.card-callout.card-callout-danger {
  background: var(--badge-err-fondo);
  border-left-color: var(--estado-urgente);
  color: var(--badge-err-texto);
}

/* ── Variante 4: Banner de marca ──────────────────────────── */
/* border-radius: 8px — excepción documentada al radius 5px estándar */
.card.card-banner {
  background: var(--color-marca);
  color: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: var(--sombra-sm);
}

/* ── Estado activo ────────────────────────────────────────── */
.card.is-active {
  border: 2px solid var(--color-marca);
}

/* ══════════════════════════════════════════════════════════════
   CARD CON MEDIA — estructura thumb + body + kebab
   Solo para .incidencia-card y .documento-card (no stat-cards).
   ══════════════════════════════════════════════════════════════ */

/* ── Layout de enlaces (todos los tiles como <a>) ─────────────── */
a.card.card-tile {
  text-decoration: none;
  color: inherit;
}

/* ── Wrapper para card + kebab + menu (solo cuando hay kebab) ─── */
.card-tile-wrap {
  position: relative;
  display: block;
}

/* ── Grid: solo tiles con thumb ───────────────────────────────── */
.card.card-tile.incidencia-card,
.card.card-tile.documento-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: start;
}

/* ── Thumb ────────────────────────────────────────────────────── */
.card.card-tile .card-thumb {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--marca-suave);
  color: var(--color-marca);
}

.card.card-tile .card-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card.card-tile .card-thumb > .lsc-icon {
  font-size: 32px;
}

/* Modificadores de fondo del thumb */
.card.card-tile .card-thumb.thumb-marca {
  background: var(--marca-suave);
  color: var(--color-marca);
}

.card.card-tile .card-thumb.thumb-pendiente {
  background: var(--pastel-pendiente);
  color: var(--estado-pendiente);
}

.card.card-tile .card-thumb.thumb-urgente {
  background: var(--pastel-urgente);
  color: var(--estado-urgente);
}

.card.card-tile .card-thumb.thumb-resuelta {
  background: var(--pastel-resuelta);
  color: var(--estado-resuelta);
}

/* thumb-neutral — para estados finales sin carga positiva/negativa
   (cancelado, archivado). Añadida en Fase 1.5 Consultas. */
.card.card-tile .card-thumb.thumb-neutral {
  background: var(--pastel-neutral);
  color: var(--texto-secundario);
}

/* ── Body ─────────────────────────────────────────────────────── */
.card.card-tile .card-body {
  min-width: 0;
  padding-right: 32px;
}

.card.card-tile .card-title {
  font-size: var(--texto-sm);
  font-weight: 500;
  margin: 0 0 6px;
  line-height: 1.3;
  color: var(--texto-principal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card.card-tile .card-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.card.card-tile .card-meta {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: var(--texto-xs);
  color: var(--texto-secundario);
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

/* Parte variable (autor): se encoge con ellipsis */
.card.card-tile .card-meta-autor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}

/* Parte fija (separador + fecha + fotos): siempre visible */
.card.card-tile .card-meta-fija {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card.card-tile .card-meta-fija > .lsc-icon {
  font-size: 14px;
  flex-shrink: 0;
}

/* Para documentos.php: texto completo en un único span */
.card.card-tile .card-meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.card.card-tile .card-desc {
  font-size: var(--texto-sm);
  color: var(--texto-secundario);
  margin: 0 0 6px;
  line-height: 1.35;
}

/* ── Kebab ────────────────────────────────────────────────────── */
.card-tile-wrap > .card-kebab {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-secundario);
  cursor: pointer;
  padding: 0;
}

.card-tile-wrap > .card-kebab:hover,
.card-tile-wrap > .card-kebab[aria-expanded="true"] {
  background: var(--gris-50);
}

.card-tile-wrap > .card-kebab > .lsc-icon {
  font-size: 18px;
}

/* Apertura hacia arriba cuando no hay espacio abajo */
.card-tile-wrap > .card-menu.card-menu-up {
  top: auto;
  bottom: 46px;
}

/* ── Menú dropdown del kebab ──────────────────────────────────── */
.card-tile-wrap > .card-menu[hidden] {
  display: none;
}

.card-tile-wrap > .card-menu {
  position: absolute;
  top: 46px;
  right: 6px;
  bottom: auto;
  background: white;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 4px;
  min-width: 180px;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.card-tile-wrap .card-menu button,
.card-tile-wrap .card-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: var(--texto-sm);
  color: var(--texto-principal);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
  text-decoration: none;
  box-sizing: border-box;
}

.card-tile-wrap .card-menu button:hover,
.card-tile-wrap .card-menu a:hover {
  background: var(--gris-50);
}

.card-tile-wrap .card-menu button.dg {
  color: var(--estado-urgente);
}

.card-tile-wrap .card-menu button > .lsc-icon,
.card-tile-wrap .card-menu a > .lsc-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Marca visual: incidencia particular ─────────────────────── */
.card-privada-mark {
  display: inline-flex;
  align-items: center;
  color: var(--texto-principal);
  line-height: 1;
}

.card-privada-mark > .lsc-icon {
  font-size: 20px;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (min-width: 900px) {
  .card.card-tile.incidencia-card,
  .card.card-tile.documento-card {
    grid-template-columns: 80px 1fr;
    gap: 16px;
  }

  .card.card-tile .card-thumb {
    width: 80px;
    height: 80px;
  }
}