.card.border-g1 { border-color:#dc3545!important; }  /* rojo */
        .card.border-g2 { border-color:#0d6efd!important; }  /* azul */
        .card.border-g3 { border-color:#198754!important; }  /* verde */
        .card.border-g4 { border-color:#fd7e14!important; }  /* naranja */
        .card.border-g5 { border-color:#6f42c1!important; }  /* morado */
        .card.border-g6 { border-color:#20c997!important; }  /* teal */
        .card.border-g7 { border-color:#ffc107!important; }  /* amarillo */
        .card.border-g8 { border-color:#0dcaf0!important; }  /* cyan */
        .card.border-g9 { border-color:#6c757d!important; }  /* gris */
        .card.border-g10{ border-color:#6610f2!important; }  /* indigo */
		.plan-item, .plan-item-created {
    transition: background 0.3s, transform 0.2s;
    cursor: pointer;
}
.plan-item:hover {
    background-color: #f1f3f5;
    transform: translateX(5px);
}
.plan-item-created:hover {
    background-color: #e3f2fd;
    transform: translateX(5px);
}
.navbar-text.text-light:hover {
    color: #ffd700; /* amarillo dorado al pasar el ratón */
    text-decoration: underline;
}
.card-img-top {
    height: 180px;       /* altura fija de las imágenes */
    object-fit: cover;   /* mantiene la proporción y recorta lo que sobresalga */
}

/* ====== ROSA ====== */
.btn-outline-pink { color: #d63384; border-color: #d63384; }
.btn-outline-pink:hover, .btn-check:checked + .btn-outline-pink {
  background-color: #d63384; color: #fff;
}
.bg-pink { background-color: #d63384 !important; color: #fff !important; }
.bg-pink-subtle { background-color: #f7d6e6 !important; }
.border-pink { border-color: #d63384 !important; }

/* ====== MORADO ====== */
.btn-outline-purple { color: #6f42c1; border-color: #6f42c1; }
.btn-outline-purple:hover, .btn-check:checked + .btn-outline-purple {
  background-color: #6f42c1; color: #fff;
}
.bg-purple { background-color: #6f42c1 !important; color: #fff !important; }
.bg-purple-subtle { background-color: #e2d9f3 !important; }
.border-purple { border-color: #6f42c1 !important; }

/* ====== MARRÓN ====== */
.btn-outline-brown { color: #795548; border-color: #795548; }
.btn-outline-brown:hover, .btn-check:checked + .btn-outline-brown {
  background-color: #795548; color: #fff;
}
.bg-brown { background-color: #795548 !important; color: #fff !important; }
.bg-brown-subtle { background-color: #e0cfc6 !important; }
.border-brown { border-color: #795548 !important; }

/* ====== AMARILLO ====== */
.btn-outline-yellow { color: #ffc107; border-color: #ffc107; }
.btn-outline-yellow:hover, .btn-check:checked + .btn-outline-yellow {
  background-color: #ffc107; color: #000;
}
.bg-yellow { background-color: #ffc107 !important; color: #000 !important; }
.bg-yellow-subtle { background-color: #fff3cd !important; }
.border-yellow { border-color: #ffc107 !important; }

/* ====== BLANCO (usamos dark border) ====== */
.btn-outline-white { color: #6c757d; border-color: #6c757d; }
.btn-outline-white:hover, .btn-check:checked + .btn-outline-white {
  background-color: #fff; color: #000; border-color: #6c757d;
}
.bg-white { background-color: #fff !important; color: #000 !important; }
.border-white { border-color: #6c757d !important; } /* gris como borde */

/* ====== LEGIBILIDAD GENERAL EN BADGES ====== */
.bg-warning, .bg-yellow, .bg-white, .bg-pink-subtle {
  color: #000 !important;
}
.bg-danger, .bg-primary, .bg-success, .bg-purple, .bg-brown, .bg-secondary, .bg-dark, .bg-pink {
  color: #fff !important;
}
.enlace-plan {
    text-decoration: none; 
    color: inherit;
}

.enlace-plan:hover {
    text-decoration: underline; /* opcional, para mostrar al pasar el ratón */
}
.asistente {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background: #f8f9fa;
    transition: transform 0.2s ease;
}
.asistente:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.asistente.confirmado { background: #e6ffed; }
.asistente.pendiente { background: #f0f0f0; }

.foto-galeria {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.foto-galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.foto-galeria:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* Enlaces de asistentes sin color azul ni subrayado */
.link-asistente {
    color: inherit;
    text-decoration: none;
}
.link-asistente:hover {
    text-decoration: underline;
}

.link-sin-decoracion {
    color: inherit !important;
    text-decoration: none !important;
}

.link-sin-decoracion:hover {
    text-decoration: underline; /* Opcional, si quieres que al pasar el ratón se note */
}

.border-naranja { border-color: #fd7e14 !important; }
.bg-naranja-subtle { background-color: #ffe5d0 !important; }
.btn-naranja {
    background-color: #fd7e14;
    border-color: #fd7e14;
    color: #fff;
}
.btn-naranja:hover {
    background-color: #e96b0c;
    border-color: #e96b0c;
}

/* Tabs (Todos / Para ti) */
.nav-tabs .nav-link {
  color: black !important;
}
.nav-tabs .nav-link.active {
  color: white !important;
  background-color: black !important;
  border-color: black !important;
}

/* Botones "Ver más" */
#btn-ver-mas-todas,
#btn-ver-mas-parati {
  color: black !important;
  border-color: black !important;
}
#btn-ver-mas-todas:hover,
#btn-ver-mas-parati:hover {
  background-color: black !important;
  color: white !important;
}

.estrellas-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas exactas */
    gap: 4px;                              /* separación entre estrellas */
    justify-content: center;                /* centra la última fila si hay menos de 4 */
}

.estrellas-container .star-tooltip {
    color: gold;
    font-size: 1.2rem;
    text-align: center;
}



.grupo-barra {
  backdrop-filter: blur(3px);
  border-bottom: 2px solid rgba(255,255,255,0.2);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.badge.border-dark {
  background-color: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}

.badge.bg-light.text-dark {
  font-weight: 600;
  border: 2px solid rgba(0,0,0,0.3) !important;
}

.badge-organizador {
  background-color: #f8f9fa !important; /* gris claro de Bootstrap */
  color: #000 !important;               /* texto negro */
  border: 2px solid #000 !important;    /* borde oscuro */
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  border-radius: 0.5rem;
  padding: 0.35em 0.65em;
  display: inline-block;
}

.asistentes-lista .badge {
  font-size: 0.85rem !important;
  font-weight: 500;
}

    .plan-card {
            cursor: pointer;
            transition: transform 0.15s ease-in-out;
        }
        .plan-card:hover {
            transform: scale(1.02);
        }
        .plan-img {
            height: 180px;
            object-fit: cover;
            border-radius: 0.5rem 0.5rem 0 0;
        }


/* ====== NUEVO DISEÑO TARJETA PLAN ====== */
.plan-header {
  border-width: 4px 4px 0 4px;
  border-style: solid;
  border-radius: 0.5rem 0.5rem 0 0;
  background-color: #fff;
}

.plan-grupo-titulo {
  font-size: 1.1rem;
}

.plan-img-container {
  position: relative;
  overflow: hidden;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

.plan-img {
  width: 100%;
  height: 220px; /* más grande */
  object-fit: cover;
  display: block;
}

.plan-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1));
  color: white;
}

.plan-overlay .plan-titulo {
  font-size: 1.2rem;
  margin: 0;
  font-weight: 700;
}

.plan-overlay .plan-fecha {
  font-size: 0.9rem;
  margin: 0.25rem 0 0;
}

.card.plan-card {
  border-width: 4px;
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Imagen genérica por grupo */
img[src*="placeholder_g1"] { background-color: #dc3545; }
img[src*="placeholder_g2"] { background-color: #0d6efd; }
img[src*="placeholder_g3"] { background-color: #198754; }
img[src*="placeholder_g4"] { background-color: #fd7e14; }
img[src*="placeholder_g5"] { background-color: #6f42c1; }
img[src*="placeholder_g6"] { background-color: #20c997; }
img[src*="placeholder_g7"] { background-color: #ffc107; }
img[src*="placeholder_g8"] { background-color: #0dcaf0; }
img[src*="placeholder_g9"] { background-color: #6c757d; }
img[src*="placeholder_g10"] { background-color: #6610f2; }

/* estilos compactos para las estrellas */
.star-rating { display:inline-flex; gap:4px; align-items:center; }
.star-btn {
    background: transparent;
    border: 0;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    color: #ccc;
    transition: color .12s ease;
    padding: 0 4px;
    user-select: none;
}
.star-btn.hover, .star-btn.selected { color: #fbc02d; } /* dorado */
.star-btn:focus { outline: 2px solid rgba(0,0,0,0.12); border-radius: 4px; }

/* ---- Estilo Moderno para ver_plan.php ---- */
.card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
}
.card-header {
  font-weight: 600;
  background: #f8f9fa;
}
.card-body {
  font-size: 1rem;
}
.badge {
  border-radius: 999px;
  font-weight: 500;
}
.btn {
  border-radius: 0.6rem;
}
.asistente {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #f8f9fa;
  padding: .4rem .8rem;
  border-radius: .6rem;
  transition: all .2s ease;
}
.asistente:hover {
  background: #e9ecef;
}
.asistente img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.link-asistente {
  text-decoration: none;
  color: #212529;
  font-weight: 500;
}
.link-asistente:hover {
  color: #0d6efd;
}
.btn-group-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.card-precio {
  font-size: 1.2rem;
  font-weight: 600;
}
.card-precio span {
  color: #198754;
}
.card-descripcion {
  background: #f9fafb;
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  color: #555;
  margin-top: .6rem;
}

/* ---- Estilo modernizado con color de grupo y degradado visible ---- */
.plan-card {
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

.plan-imagen {
  background-size: cover;
  background-position: center;
  min-height: 240px;
  position: relative;
}

/* Capa que añade el degradado de fusión */
.plan-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* El texto va directamente sobre el color del grupo */
.plan-card .card-body {
  background: transparent;
  color: inherit;
}

/* Cuerpo semitransparente para que se vea el color del grupo detrás */
.plan-card .card-body {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border-radius: 1rem;
}

/* Móvil: imagen arriba */
@media (max-width: 767.98px) {
  .plan-imagen .plan-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.1));
  }
}

.plan-card .card-body {
  background: transparent; /* sin fondo */
  backdrop-filter: none;
  border-radius: 0;
  color: inherit; /* usa el color de texto del grupo */
}


/* Si la card tiene color oscuro (por ejemplo bg-primary), mejora el contraste del texto */
.bg-primary .card-body,
.bg-success .card-body,
.bg-dark .card-body {
  color: #fff;
}

/* --- CONTENEDOR DE ASISTENTES --- */
.asistentes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
  align-items: flex-start;
}

/* --- CADA ASISTENTE --- */
.asistente {
  width: 200px;
  text-align: center;
  overflow: hidden; /* evita que el texto o el borde de la imagen desborde */
  white-space: nowrap; /* evita salto de línea en el nombre */
}

.link-asistente {
  display: block;
  font-size: 1rem;
  color: inherit;
  text-decoration: none;
  margin-top: 0.25rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis; /* muestra “…” si el nombre es largo */
}

.link-asistente:hover {
  text-decoration: underline;
}

/* --- FOTO GENERAL --- */
.asistente-foto {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 3px solid transparent; /* base */
  background-color: rgba(255,255,255,0.1);
}

/* --- EFECTO HOVER --- */
.asistente-foto:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* --- COLORES SEGÚN ESTADO --- */
.asistente.confirmado .asistente-foto {
  border-color: #28a745;
}

.asistente.pendiente .asistente-foto {
  border-color: #adb5bd;
}

.asistente.reserva .asistente-foto {
  border-color: #ffc107;
}

/* --- PLACEHOLDER (sin foto) --- */
.asistente-foto-placeholder {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: rgba(0,0,0,0.5);
  font-size: 1.8rem;
  border: 3px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Colores del borde del placeholder según estado */
.asistente.confirmado .asistente-foto-placeholder {
  border-color: #28a745;
}
.asistente.pendiente .asistente-foto-placeholder {
  border-color: #adb5bd;
}
.asistente.reserva .asistente-foto-placeholder {
  border-color: #ffc107;
}

/* --- Tarjeta de coche --- */
/* GRID general de coches */
.coches-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* En escritorio: 2 por fila */
@media (min-width: 992px) {
  .coches-grid {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    justify-content: center;
    max-width: 900px;
    margin-inline: auto;
  }
}

/* Tarjeta de coche */
.coche-card {
  background: rgba(255, 255, 255, 0.7);
  border-left: 5px solid #007bff;
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  padding: 1.5rem;
  position: relative;
}

/* Línea de conexión vertical */
.linea-conexion {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, #007bff, transparent);
  margin: 0 auto;
}

/* Conductor */
.conductor-foto {
  border: 3px solid #007bff;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

/* Pasajeros */
.pasajeros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.pasajero .asistente-foto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}
.pasajero .asistente-foto.confirmado {
  border-color: #28a745;
}
.pasajero .asistente-foto.pendiente {
  border-color: #adb5bd;
}
.pasajero .asistente-foto:hover {
  transform: scale(1.07);
}

/* Placeholder */
.asistente-foto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200,200,200,0.2);
  color: rgba(0,0,0,0.5);
}

/* Sin coche */
.sin-coche {
  background: rgba(240,240,240,0.5);
  border-left: 5px solid #adb5bd;
}