/* 🌈 MODO CLARO */
body {
    min-height: 100vh;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #7fe9c8;
    background-image: 
    radial-gradient(at 47% 33%, hsl(178.15, 100%, 60%) 0, transparent 59%), 
    radial-gradient(at 75% 100%, hsl(214.13, 100%, 70%) 0, transparent 150%);
    font-family: 'Segoe UI', sans-serif;
    color: #000;
  }
  
  /* LISTA DE TAREAS */
  .list-group-item {
    backdrop-filter: blur(-1px) saturate(180%);
    -webkit-backdrop-filter: blur(-1px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    color: #000;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 0.75rem;
  }
  
  /* MODAL */
  .modal-content {
    backdrop-filter: blur(-1px) saturate(180%);
    -webkit-backdrop-filter: blur(-1px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #000;
  }
  
  /* CALENDARIO */
  #calendar {
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(-1px);
    -webkit-backdrop-filter: blur(-1px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #000;
}

/* Fuerza altura fija para cada franja horaria */
#calendar .fc-slats tr {
    height: 1.6rem; /* o ajusta a tu gusto */
  }

  /* Aplica a las tablas internas del calendario */
#calendar table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }
  
  /* Asegura bordes negros finos y coherentes */
  #calendar th,
  #calendar td {
    border: 1px solid black !important;
  }
  
  /* BADGE */
  .badge-time {
    background-color: #0d6efd;
    color: #fff;
    padding: 0.3rem 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 2rem;
    display: inline-block;
    min-width: 80px;
    text-align: center;
  }
  
  
  /* BOTÓN COMPLETAR */
  .btn-check-complete {
    border: none;
    background-color: transparent;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

/* Scrollbar negra moderna para WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #000; /* Negro */
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: #222;
  }
  
  /* Firefox (experimental support) */
  * {
    scrollbar-color: #000 transparent;
    scrollbar-width: thin;
  }

  
  #calendar td,
  #calendar th {
    border-width: 1px;
    border-style: solid;
  }
  
  
  /* TEXTO "COMPLETADO" */
  .completed-label {
    font-size: 0.85em;
    color: #333;
  }

  body.dark-mode .completed-label {
    color: white;
  }
  
  /* FULLCALENDAR EVENT */
  .card, .fc-event {
    backdrop-filter: blur(25px) saturate(120%);
    -webkit-backdrop-filter: blur(25px) saturate(120%);
    background-color: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #000;
  }
  
  /* BOTONES */
  .btn {
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
  }
  
  .btn:hover {
    opacity: 0.9;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  }
  
  /* 🌒 MODO OSCURO */
  body.dark-mode {
    background-image: 
    radial-gradient(at 47% 45%, hsl(287.76, 100%, 50%) 0, transparent 65%), 
    radial-gradient(at 82% 65%, hsl(100, 50%, 0%) 0, transparent 55%)!important;
    font-family: 'Segoe UI', sans-serif;
    color: white;
    background-color: black;
  }
  
  body.dark-mode .list-group-item {
    background-color: rgba(0, 0, 0, 0.70) !important;
    backdrop-filter: blur(-1px) saturate(120%);
    -webkit-backdrop-filter: blur(-1px) saturate(120%);
    border: 1px solid rgba(209, 213, 219, 0.3);
    color: #f1f1f1;
  }
  
  body.dark-mode #calendar {
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(-1px) saturate(120%);
    -webkit-backdrop-filter: blur(-1px) saturate(120%);
    border: 1px solid rgba(209, 213, 219, 0.3);
    color: #f1f1f1;
  }
  
  body.dark-mode .modal-content {
    background-color: rgba(25, 29, 29, 0.7);
    backdrop-filter: blur(-1px) saturate(120%);
    -webkit-backdrop-filter: blur(-1px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: white;
  }
  
  body.dark-mode .btn,
  body.dark-mode .btn-check-complete {
    background-color: transparent!important;
    color: #f1f1f1;
  }
  
  body.dark-mode a {
    color: #ffffff;
  }

  .fc-next-button.alert-next {
    border-color: #dc3545 !important;
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.5);
    border-width: 2px;
    transition: all 0.3s ease;
  }
  
  /* ANIMACIONES */
  @keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 6px rgba(220, 53, 69, 0.3); }
    50% { box-shadow: 0 0 12px rgba(220, 53, 69, 0.7); }
  }
  
  .fc-next-button.alert-next {
    animation: pulse-red 1.5s infinite;
  }

  @keyframes bounceOut {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(0.8) rotate(360deg); opacity: 0; }
  }
  
  .bounce-spin-hide {
    animation: bounceOut 0.5s ease forwards;
  }
  
  @keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .task-slide-in {
    animation: fadeSlideIn 0.4s ease;
  }
  
  @keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  
  .fc-event {
    animation: fadeInScale 0.2s ease-in-out;
  }
  
  @keyframes slideUpFade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .modal-content {
    animation: slideUpFade 0.4s ease;
  }
  
  @keyframes fadeInCompleted {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  
  @keyframes fadeOutCompleted {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
  }
  
  .task-fade-in {
    animation: fadeInCompleted 0.3s ease forwards;
  }
  
  .task-fade-out {
    animation: fadeOutCompleted 0.3s ease forwards;
  }
  
  /* RESPONSIVE */
  @media (max-width: 768px) {
    #calendar { font-size: 0.8em; }
    .fc-event { font-size: 0.9em; }
  }
  
  /* BOTÓN DE CAMBIO DE TEMA */
  .theme-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
  }
  
  /* Forzar fondo en todas las celdas del calendario */
#calendar .fc-widget-content,
#calendar .fc-day,
#calendar .fc-day-header {
  background-color: transparent !important;
}

/* Colorear fondo por defecto para cada día */
#calendar .fc-day.fc-widget-content {
  background-color: rgba(255, 255, 255, 0.05); /* o el color que uses */
}

#calendar .fc-view {
    overflow-x: hidden;
  }


/* Modo oscuro */
body.dark-mode #calendar .fc-day.fc-widget-content {
  background-color: rgba(255, 255, 255, 0.05); /* fondo sutil oscuro */
}

 /* ✅ Forzar que todas las celdas tengan bordes sólidos negros alineados */
 body.dark-mode #calendar th,
 body.dark-mode #calendar td {
   border: 1px solid white !important;
 }
  
  body.dark-mode::-webkit-scrollbar-thumb {
    background-color: white; /* Negro */
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  
  body.dark-mode::-webkit-scrollbar-thumb:hover {
    background-color: gray;
  }
  
  /* Firefox (experimental support) */
  body.dark-mode * {
    scrollbar-color: white transparent;
    scrollbar-width: thin;
  }