:root {
  --mc-primary: #0d6efd;
  --mc-primary-dark: #0b5ed7;
  --mc-gray: #6c757d;
  --mc-bg: #f5f7fb;
}

/* Fondo general suave */
body {
  background-color: var(--mc-bg);
}

/* Tarjetas generales estilo MAPCOFIC */
.card-mc {
  border-radius: 14px;
  border: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-mc:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}

/* Variantes de color */
.card-mc-primary {
  border-top: 3px solid var(--mc-primary);
}

.card-mc-primary-soft {
  border-top: 3px solid rgba(13, 110, 253, 0.5);
}

.card-mc-success {
  border-top: 3px solid #198754;
}

.card-mc-warning {
  border-top: 3px solid #ffc107;
}

.card-mc-danger {
  border-top: 3px solid #dc3545;
}

.card-mc-info {
  border-top: 3px solid #0dcaf0;
}

.card-mc-secondary {
  border-top: 3px solid #6c757d;
}

/* Icono redondo arriba a la izquierda */
.card-mc-icon-wrapper {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 110, 253, 0.08);
  color: var(--mc-primary);
  font-size: 1.1rem;
}

/* Ajustes de texto generales */
.card-mc .card-body h3 {
  letter-spacing: 0.02em;
}

.card-mc .badge {
  border-radius: 999px;
}

/* ========= Ajustes específicos para los cards de tareas ========= */

/* Altura mínima del header para que no “salte” al cambiar de título */
.card-mc-header {
  min-height: 3.4rem;
}

/* Título de la tarea: 2 líneas máximo, luego “…” */
.card-mc-title {
  font-size: 0.9rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* máximo 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Proyecto: una sola línea con ellipsis */
.card-mc-project {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===========================
   MODO MÓVIL "SUPERMERCADO"
   =========================== */
@media (max-width: 576px) {

  /* Más espacio general */
  main.container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Tarjeta principal de la tarea */
  .task-mobile-card {
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  }

  /* Ítems del checklist grandes y fáciles de tocar */
  .checklist-item-large {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    font-size: 1.05rem;
  }

  .checklist-item-large .form-check-input {
    width: 1.4rem;
    height: 1.4rem;
  }

  .checklist-item-large .form-check-label {
    margin-left: 0.75rem;
  }

  /* Texto tachado más suave pero legible */
  .checklist-item-done {
    text-decoration: line-through;
    color: #6c757d !important;
    opacity: 0.85;
  }

  /* Botones grandes y a lo ancho */
  .task-mobile-actions .btn {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    font-size: 1rem;
  }

  .task-mobile-actions .btn + .btn {
    margin-top: 0.4rem;
  }

  /* Barra de progreso un poquito más alta en móvil */
  .task-mobile-progress {
    height: 8px !important;
    border-radius: 999px;
    overflow: hidden;
  }
}

/* ============================
   MICROINTERACCIONES CHECKLIST
   ============================ */

/* Suavizar cambio de la barra de progreso */
.task-mobile-progress,
.progress .progress-bar {
  transition: width 0.25s ease-out;
}

/* Animación cuando se completa un ítem */
.checklist-item-anim-complete {
  animation: mc-item-complete 0.35s ease-out;
}

/* Animación cuando se desmarca un ítem */
.checklist-item-anim-uncomplete {
  animation: mc-item-uncomplete 0.35s ease-out;
}

/* Pequeño "pop" del checkbox */
.checklist-checkbox-pop {
  animation: mc-checkbox-pop 0.25s ease-out;
}

@keyframes mc-item-complete {
  0% {
    background-color: rgba(25, 135, 84, 0.10); /* verde suave */
    transform: translateY(0);
  }
  50% {
    background-color: rgba(25, 135, 84, 0.20);
    transform: translateY(-1px);
  }
  100% {
    background-color: transparent;
    transform: translateY(0);
  }
}

@keyframes mc-item-uncomplete {
  0% {
    background-color: rgba(108, 117, 125, 0.10); /* gris suave */
    transform: translateY(0);
  }
  50% {
    background-color: rgba(108, 117, 125, 0.18);
    transform: translateY(-1px);
  }
  100% {
    background-color: transparent;
    transform: translateY(0);
  }
}

@keyframes mc-checkbox-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}