/* En: src/App.css */
/* ¡REEMPLAZA ESTE ARCHIVO COMPLETO! */

/* Corrección para el scroll horizontal y reseteo básico */
body, html {
  overflow-x: hidden; 
  margin: 0;
  padding: 0;
  font-family: sans-serif; 
}

/* Layout principal de la aplicación usando Flexbox */
.App {
  width: 100%; 
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
}

/* Regla para que el contenido principal crezca */
main {
  flex-grow: 1; 
  margin: 0; /* ¡AÑADIDO! Asegura que no haya margen entre el header y el main */
}
/* ESTRUCTURA GENERAL */
.header-container {
  background-color: #000000;
  padding: 0.7rem 0; /* Padding vertical, el horizontal lo maneja el content */
  border-bottom: 1px solid #1a1a1a;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2000; /* Por encima de todo */
  width: 100%;
  box-sizing: border-box;
}

.header-content {
  max-width: 1200px; /* Reducido para centrar más la visión en PC */
  margin: 0 auto; 
  padding: 0 1.5rem; /* Margen de seguridad lateral */
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: 1rem;
}

/* LOGO */
.logo-link { flex-shrink: 0; display: flex; align-items: center; }
.logo { height: 40px; width: auto; display: block; }

/* BUSCADOR */
.search-bar-form { 
  flex-grow: 1; 
  max-width: 500px; 
  margin: 0 1rem; /* Separación del logo y usuario */
}

.search-input {
  width: 100%;
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  border: 1px solid #333;
  background-color: #1a1a1a; 
  color: #fff;
  font-size: 0.9rem; 
  outline: none;
  transition: all 0.3s ease;
}

.search-input:focus { border-color: #0d6efd; background-color: #222; }

/* ACCIONES DERECHA */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.header-icon-link {
  color: white;
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.header-icon-link:hover { transform: scale(1.1); color: #0d6efd; }
.icon-emoji { font-size: 1.6rem; line-height: 1; }

/* BADGE DEL CARRITO */
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* --- BOTÓN DE USUARIO (CÁPSULA) --- */
.user-menu-wrapper { position: relative; }

.user-menu-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 12px 4px 4px; /* Asimétrico para rodear el avatar */
  border-radius: 30px;
  cursor: pointer;
  color: #fff;
  transition: all 0.3s ease;
}

.user-menu-button:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: #fff;
}

/* AVATAR */
.user-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #0d6efd;
  overflow: hidden; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #000; 
}

.user-img-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-initials { font-size: 0.85rem; font-weight: bold; color: white; }

.user-name-text {
  font-size: 0.9rem;
  font-weight: 500;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-arrow { font-size: 0.6rem; color: #888; margin-left: 2px; }

/* --- MENÚ DESPLEGABLE --- */
.dropdown-menu-box {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 240px;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.9);
  z-index: 3000;
  overflow: hidden;
  padding: 8px 0;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-menu-box a, .dropdown-logout-button {
  display: block;
  padding: 10px 20px;
  color: #ccc;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
  text-align: left;
  border: none;
  background: none;
  width: 100%;
}

.dropdown-menu-box a:hover { background-color: #0d6efd; color: white; }
.dropdown-logout-button:hover { background-color: #dc3545; color: white; }

.dropdown-section-title {
  padding: 8px 20px;
  font-size: 0.7rem;
  font-weight: bold;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dropdown-divider { height: 1px; background-color: #333; margin: 5px 0; }

.auth-actions { display: flex; gap: 10px; }
.auth-button {
  text-decoration: none; padding: 6px 16px; border-radius: 4px; font-size: 0.9rem; font-weight: 500; transition: all 0.2s;
}
.auth-button.login { color: #fff; border: 1px solid #fff; }
.auth-button.login:hover { background: #fff; color: #000; }
.auth-button.register { background: #0d6efd; color: #fff; border: 1px solid #0d6efd; }
.auth-button.register:hover { background: #0b5ed7; }

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
  .header-container { padding: 0.8rem 1rem; }
  .header-content { gap: 0.5rem; padding: 0; }
  
  .user-name-text, .dropdown-arrow { display: none; } /* Ocultar nombre */
  
  /* Botón de usuario limpio en móvil */
  .user-menu-button { 
    padding: 0; 
    border: none; 
    background: none;
  }
  
  .user-avatar-circle { width: 36px; height: 36px; border: none; }

  .search-bar-form { max-width: 180px; margin: 0; }
  .search-input { padding: 0.5rem 1rem; font-size: 0.8rem; }
  .logo { height: 32px; }

  /* Menú fijo en móvil */
  .dropdown-menu-box {
    position: fixed;
    top: 60px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: 80vh;
    overflow-y: auto;
  }
}
/* Limpieza total para evitar rebotes */
.footer-container {
  background-color: #000000;
  color: #686868;
  padding: 2rem 1.5rem; /* Padding estándar y cómodo */
  border-top: 1px solid #1a1a1a;
  width: 100%;
  box-sizing: border-box;
  /* Eliminamos margin-top negativos y box-shadows raros */
  display: block; 
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-section {
  flex: 1 1;
  min-width: 250px;
}

.footer-section h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-section p {
  margin: 0.5rem 0;
  line-height: 1.6;
  font-size: 0.9rem;
}

.social-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.footer-link { 
  color: #0d6efd; 
  text-decoration: none; 
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom { 
  text-align: center; 
  padding-top: 2rem; 
  font-size: 0.85rem; 
  border-top: 1px solid #1a1a1a;
  margin-top: 2rem; 
}

/* RESPONSIVE MÓVIL */
@media (max-width: 768px) {
  .footer-container {
      padding-bottom: 3rem; /* Un poco de aire al final en móvil */
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  
  .footer-section { min-width: 100%; }

  .social-links {
    justify-content: center;
  }
}
/* Contenedor fijo en la esquina */
.feedback-widget-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Botón Redondo Flotante (FAB) - TAMAÑO REDUCIDO */
.feedback-fab {
    width: 45px;  /* Antes 60px */
    height: 45px; /* Antes 60px */
    border-radius: 50%;
    background-color: #0d6efd;
    color: white;
    border: none;
    font-size: 1.2rem; /* Fuente más pequeña */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s, background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feedback-fab:hover {
    background-color: #0b5ed7;
    transform: scale(1.1);
}

.feedback-fab.open {
    background-color: #dc3545;
    transform: rotate(180deg);
}

/* Cajita del Formulario - TAMAÑO REDUCIDO */
.feedback-form-box {
    background-color: white;
    width: 250px; /* Antes 300px */
    padding: 15px; /* Padding reducido */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    margin-bottom: 10px;
    border: 1px solid #ddd;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.feedback-header h4 {
    margin: 0;
    color: #333;
    font-size: 0.9rem; /* Fuente más pequeña */
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.2rem; /* Icono más pequeño */
    cursor: pointer;
    color: #999;
}

.form-group {
    margin-bottom: 8px;
}

.form-group select, .form-group textarea {
    width: 100%;
    padding: 6px; /* Padding reducido */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.85rem; /* Letra más pequeña */
    box-sizing: border-box;
}

.form-group textarea {
    resize: none;
}

.send-btn {
    width: 100%;
    padding: 8px; /* Botón más delgado */
    background-color: #198754;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.send-btn:hover {
    background-color: #157347;
}

.send-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
.hero-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40vh; /* Ocupa el 70% de la altura de la pantalla */
  color: white;
  text-align: center;

  /* --- IMPORTANTE: Aquí va tu imagen de fondo --- */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/static/media/IMGFONDO.cc9453d6a8a39d995f93.webp);  
background-size: cover;
  background-position: center;
}


.hero-text h1 {
  font-size: 3.5rem; /* Letra grande para el título */
  font-weight: bold;
  margin: 0;
}

.hero-text p {
  font-size: 1.6rem;
  font-weight: 400;
}
.categories-container {
  padding: 3rem 1rem;
  background-color: #ffffff;
  /* CAMBIO: Aseguramos que todo el texto dentro se centre por defecto */
  text-align: center; 
}

.categories-title {
  /* CAMBIO: Recuperamos el tamaño y margen */
  font-size: 2.5rem;
  margin-bottom: 2.5rem;
  color: #1a1a1a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.categories-grid {
  display: flex;
  justify-content: center;
  gap: 1.5rem; /* Un poco más de aire en PC */
  flex-wrap: wrap;
  max-width: 1200px; /* Limitamos el ancho para que no se dispersen en pantallas gigantes */
  margin: 0 auto;
}

.category-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  overflow: hidden;
  width: 280px; 
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  color: inherit; /* Hereda color negro, evita azul/morado */
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* TEXTOS DENTRO DE LA TARJETA */
.card-text {
  padding: 1.2rem;
  text-align: left; /* El contenido de la tarjeta se ve mejor alineado a la izquierda */
}

.card-text h3 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem 0;
  color: #333;
}

.card-text p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

/* RESPONSIVE MÓVIL (Mantenemos tu configuración 2x2 que te gustó) */
@media (max-width: 600px) {
  .categories-title {
    font-size: 1.8rem; /* Título un poco más chico en móvil */
    margin-bottom: 1.5rem;
  }
  
  .categories-grid {
    gap: 10px; /* Gap más pequeño para que quepan */
  }

  .category-card {
    width: 46%; /* Garantiza 2 columnas */
  }
  
  .card-text { padding: 0.8rem; text-align: center; } /* En móvil centrado se ve bien */
  .card-text h3 { font-size: 0.95rem; margin: 0; }
  .card-text p { display: none; } 
}

.category-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
/* UBICACIÓN: src/components/INICIO/PackagesSection.css */

.packages-container {
    padding: 4rem 2rem;
    background-color: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
}

.packages-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.packages-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Lista más ancha que foto */
    grid-gap: 4rem;
    gap: 4rem;
    align-items: start; /* IMPORTANTE para que sticky funcione */
    position: relative;
}

/* --- LISTA --- */
.packages-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.package-wrapper {
    /* El wrapper captura el mouse */
}

.package-item {
    border: 1px solid #eee;
    border-left: 5px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

/* Estado Activo */
.package-item.is-active,
.package-item:hover {
    border-left-color: #00BFA5;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border-color: #00BFA5;
    transform: translateX(10px);
}

.package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.package-item h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #333;
}

.expand-icon {
    font-size: 1.5rem;
    color: #aaa;
    font-weight: bold;
}
.package-item.is-active .expand-icon { color: #00BFA5; }

/* Descripción Corta: Se oculta al expandir */
.package-simple-desc {
    color: #666;
    font-size: 0.95rem;
    transition: all 0.3s;
    max-height: 50px;
    opacity: 1;
}

.package-item.is-active .package-simple-desc {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* --- ACORDEÓN --- */
.package-details-hover {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.3s ease 0.1s;
}

.package-item.is-active .package-details-hover {
    max-height: 600px; /* Suficiente para el contenido */
    opacity: 1;
    margin-top: 1rem;
}

.details-content {
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
}

.details-label {
    font-weight: bold;
    color: #00BFA5;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.package-details-hover ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.package-details-hover li {
    padding: 5px 0;
    font-size: 0.95rem;
    color: #555;
    border-bottom: 1px dashed #f5f5f5;
    display: flex;
    align-items: center;
}

/* Bullet personalizado */
.package-details-hover li::before {
    content: "•";
    color: #00BFA5;
    font-weight: bold;
    margin-right: 10px;
}

.package-button {
    width: 100%;
    padding: 12px;
    background-color: #2c3e50;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.package-button:hover {
    background-color: #00BFA5;
}

/* --- IMAGEN STICKY --- */
.package-image-col {
    position: relative;
    height: 100%; /* Necesario para que sticky tenga pista */
}

.sticky-frame {
    position: -webkit-sticky;
    position: sticky;
    top: 120px; /* Margen superior desde el techo del navegador */
    width: 100%;
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.sticky-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animación suave de cambio de imagen */
@keyframes fadeIn {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

.fade-in-image {
    animation: fadeIn 0.4s ease-out;
}

/* Responsive */
@media (max-width: 900px) {
    .packages-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .package-image-col {
        display: none; /* En celular ocultamos la foto lateral */
    }
}
/* UBICACIÓN: src/components/INICIO/EventsSection.css */

.events-container {
  padding: 4rem 2rem;
  background-color: #ffffff;
  max-width: 1400px;
  margin: 0 auto;
}

.events-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
}

.events-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: #00BFA5;
  margin: 10px auto 0;
  border-radius: 2px;
}

.event-slider-container {
  margin-bottom: 2rem;
  padding: 0 10px;
}

.carousel-item-padding {
  padding: 10px;
}

/* --- TARJETA PRINCIPAL --- */
.event-card {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  height: 450px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  background-color: #000;
}

.event-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0.95; /* Un poco más clara por defecto */
}

/* Efecto Zoom y aclarado al Hover para compensar el overlay oscuro */
.event-card:hover .event-card-image {
  transform: scale(1.1);
  opacity: 1; 
}

.event-card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- VISTA SIMPLE (Estado Normal: Abajo) --- */
.simple-view {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  /* Degradado más sutil para la vista normal */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  color: white;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-sizing: border-box;
  text-align: center;
}

.simple-view h3 {
  margin: 0 0 5px 0;
  font-size: 1.6rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.simple-view p {
  margin: 0;
  font-size: 1rem;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.event-card:hover .simple-view {
  opacity: 0;
  transform: translateY(20px);
}

/* --- VISTA DETALLADA (Estado Hover: Centrado) --- */
.detailed-view {
  position: absolute;
  inset: 0;
  /* CAMBIO AQUÍ: De 0.75 a 0.4 para que sea "casi transparente" */
  background-color: rgba(0, 0, 0, 0.4); 
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: auto;
  /* Opcional: un ligero desenfoque ayuda a leer el texto sobre fondos complejos */
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px); 
}

.event-card:hover .detailed-view {
  opacity: 1;
}

.detailed-view h3 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  transform: translateY(-20px);
  transition: transform 0.4s ease 0.1s;
  /* Sombra al texto para asegurar legibilidad sobre fondo transparente */
  text-shadow: 0 2px 8px rgba(0,0,0,0.8); 
}

.detailed-view p {
  color: #f0f0f0; /* Texto un poco más brillante */
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  transform: translateY(20px);
  transition: transform 0.4s ease 0.1s;
  max-width: 90%;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.event-card:hover .detailed-view h3,
.event-card:hover .detailed-view p {
  transform: translateY(0);
}

/* Botón */
.event-button {
  display: inline-block;
  padding: 12px 35px;
  font-size: 1rem;
  color: #fff;
  background-color: #00BFA5;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Sombra oscura para resaltar */
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.event-button:hover {
  background-color: #009688;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

/* Estilos Slick Dots */
.slick-dots li button:before {
  font-size: 12px;
  color: #00BFA5;
  opacity: 0.5;
}
.slick-dots li.slick-active button:before {
  color: #00BFA5;
  opacity: 1;
}
/* Sección General */
.about-section {
    background-color: #111; /* Fondo muy oscuro, casi negro */
    color: #fff;
    padding: 4rem 2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Encabezado Principal */
.about-header {
    text-align: center;
    margin-bottom: 4rem;
}

.about-header h2 {
    font-size: 2.5rem;
    color: #00e5ff; /* Color Cyan/Azul brillante del logo */
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}

.about-underline {
    width: 60px;
    height: 4px;
    background-color: #333;
    margin: 0 auto;
    border-radius: 2px;
}

/* Contenedor */
.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4rem; /* Espacio entre filas */
}

/* Filas (Zig-Zag) */
.about-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

/* Clase para invertir el orden (Texto - Imagen) */
.about-row.reverse {
    flex-direction: row-reverse;
}

/* Columnas */
.about-image-col, .about-text-col {
    flex: 1 1;
}

/* Imágenes */
.about-image-col img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 229, 255, 0.15); /* Sombra sutil cyan */
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.about-image-col img:hover {
    transform: scale(1.02);
}

/* Textos */
.about-text-col {
    padding: 1rem;
}

.about-text-col h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    color: #fff;
}

.about-text-col p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ccc; /* Gris claro para lectura cómoda */
    text-align: justify;
}

/* --- RESPONSIVE (Móvil) --- */
@media (max-width: 768px) {
    .about-row, .about-row.reverse {
        flex-direction: column;
        gap: 1.5rem;
    }

    .about-header h2 {
        font-size: 2rem;
    }

    .about-text-col {
        padding: 0;
        text-align: center;
    }

    .about-text-col h3 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
    
    .about-text-col p {
        text-align: center; /* En móvil se ve mejor centrado o a la izquierda */
        font-size: 1rem;
    }
}
/* UBICACIÓN: src/components/INICIO/ProductCard.css */

.product-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  /* Ancho PC reducido (aprox 2/3 de 250px) */
  flex: 0 0 170px; 
}

.product-card-item {
  width: 170px; /* PC: Ancho reducido */
  height: 260px; /* PC: Altura reducida */
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
  position: relative; 
}

.product-card-item:hover {
  transform: translateY(-3px); 
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); 
}

.product-card-image-container {
  width: 100%;
  height: 140px; /* Altura de imagen reducida */
  background-color: #f1f1f1; 
  padding: 0.5rem; 
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain; 
}

/* --- ESTILOS DEL BOTÓN RÁPIDO (Ajustado) --- */
.quick-add-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  
  width: 35px; /* Más pequeño */
  height: 35px;
  border-radius: 50%;
  
  background-color: #0d6efd; 
  color: white;
  border: 2px solid white; 
  
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, background-color 0.2s;
  
  z-index: 100;
  opacity: 1;
  padding: 0;
  margin: 0;
}

.pc-cart-icon {
  font-size: 1rem; /* Icono más pequeño */
  margin-right: -2px;
  line-height: 1;
}

.pc-plus-sign {
  font-size: 0.8rem; 
  font-weight: 900;
  margin-bottom: 6px; 
  margin-left: 1px;
  line-height: 1;
}

.quick-add-btn:hover {
  background-color: #0b5ed7; 
  transform: scale(1.1); 
}

.quick-add-btn:active {
  transform: scale(0.95); 
}

/* --- INFO CARD --- */
.product-card-info {
  padding: 0.8rem;
  flex-grow: 1; 
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  align-items: center; 
  text-align: center;
  border-top: 1px solid #e0e0e0;
}

.product-card-info h3 {
  font-size: 1rem; /* Texto más pequeño */
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.product-card-price {
  font-size: 1rem; /* Precio ajustado */
  font-weight: bold;
  color: #0d6efd;
  margin: 0;
}

/* --- VISTA MÓVIL (Aprox 1/2 del original) --- */
@media (max-width: 768px) {
  .product-card-link {
    flex: 0 0 135px; /* Mitad de 250 aprox (+ margen) */
  }

  .product-card-item {
    width: 135px;
    height: 220px;
  }

  .product-card-image-container {
    height: 110px;
  }

  .quick-add-btn {
    width: 30px;
    height: 30px;
    top: 5px;
    right: 5px;
  }

  .pc-cart-icon { font-size: 0.9rem; }
  .pc-plus-sign { font-size: 0.7rem; }

  .product-card-info { padding: 0.5rem; }
  .product-card-info h3 { font-size: 0.9rem; }
  .product-card-price { font-size: 0.9rem; }
}
/* UBICACIÓN: src/components/INICIO/CategoryRow.css */

.category-row {
  margin-bottom: 2.5rem;
  width: 100%;
}

/* --- ENCABEZADO DE CATEGORÍA --- */
.category-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
  /* Padding ajustado para alinear con las nuevas tarjetas más pequeñas */
  padding: 0 1.5rem; 
}

.category-row-title {
  font-size: 1.5rem; /* Título un poco más pequeño para balancear */
  margin: 0;
  color: #333;
  border-bottom: 3px solid #0d6efd; 
  padding-bottom: 0.3rem;
  display: inline-block;
}

.see-more-link {
  text-decoration: none;
  color: #0d6efd;
  font-weight: bold;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.see-more-link:hover {
  color: #0a58ca;
  text-decoration: underline;
}

/* --- CONTENEDOR DE SCROLL HORIZONTAL --- */
.products-scroll-container {
  display: flex;
  overflow-x: auto;
  gap: 1rem; /* Gap reducido */
  
  /* Padding ajustado */
  padding: 0 1.5rem 1rem 1.5rem;
  
  scroll-behavior: smooth;
}

.products-scroll-container::-webkit-scrollbar {
  display: none;
}

.products-scroll-container {
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}

/* Asegura que las tarjetas no se encojan */
.products-scroll-container > div {
  flex: 0 0 auto;
}

/* [NUEVO] Wrapper para controlar el tamaño en el Row horizontal */
.category-item-wrapper {
  min-width: 170px; /* PC Size */
}

@media (max-width: 768px) {
  .category-row-header {
    padding: 0 1rem;
  }
  
  .products-scroll-container {
    padding: 0 1rem 1rem 1rem;
    gap: 0.8rem;
  }

  /* Móvil Size */
  .category-item-wrapper {
    min-width: 135px; 
  }
  
  .category-row-title {
    font-size: 1.2rem;
  }
}

.catalog-page-container {
  padding: 2rem;
  max-width: 1400px; /* Ancho máximo para la página */
  margin: 0 auto;
}
/* Archivo: src/pages/CategoryPage.css */
.category-page-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.category-page-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    color: #1a1a1a;
}

.product-grid {
    display: grid;
    /* Ajuste para tarjetas más pequeñas en PC (170px) */
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

/* --- ESTILOS DE LA TARJETA EN MODO GRID (HEREDAN DE PRODUCTCARD PERO ASEGURAMOS) --- */
/* Nota: ProductCard tiene sus propios estilos internos, aquí manejamos el layout */

.category-error {
    text-align: center;
    font-size: 1.2rem;
    color: #666;
}

.loading-message {
    text-align: center;
    margin-top: 50px;
    font-size: 1.2rem;
    color: #666;
}

/* --- VISTA MÓVIL PARA GRID --- */
@media (max-width: 768px) {
    .category-page-container {
        padding: 0 1rem;
    }
    
    .category-page-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .product-grid {
        /* Ajuste para tarjetas móviles (135px) */
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
        gap: 1rem;
    }
}
.pdp-container {
  max-width: 1000px; /* Reducido para contener todo */
  margin: 2rem auto;
  padding: 1rem;
}

.pdp-top-section {
  display: flex;
  justify-content: center;
  gap: 3rem; /* Espacio entre galería e info */
  margin-bottom: 3rem;
  align-items: flex-start;
}

/* Wrappers para controlar el tamaño al 50% */
.pdp-gallery-wrapper, .pdp-info-wrapper {
  flex: 1 1;
  max-width: 400px; /* Límite de ancho para PC (Mitad de tamaño) */
}

/* RESPONSIVE MÓVIL */
@media (max-width: 768px) {
  .pdp-top-section {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .pdp-gallery-wrapper, .pdp-info-wrapper {
    width: 100%;
    max-width: 350px; /* Tamaño controlado en móvil */
  }
}
.gallery-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gallery-container.placeholder {
  display: flex; justify-content: center; align-items: center;
  background-color: #f0f0f0; border-radius: 8px;
  color: #ccc; font-weight: bold; font-size: 1.2rem;
  height: 300px;
}

.main-image-wrapper {
  position: relative;
  width: 100%;
  height: 300px; /* Altura fija reducida */
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
  background-color: #fff;
  display: flex; justify-content: center; align-items: center;
}

.main-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Para ver la foto completa */
}

/* Flechas */
.left-arrow, .right-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 2rem; color: #333; z-index: 2; cursor: pointer;
  padding: 0 10px; background: rgba(255,255,255,0.5); border-radius: 50%;
}
.left-arrow { left: 5px; }
.right-arrow { right: 5px; }

.image-counter {
  position: absolute; top: 10px; right: 10px;
  background-color: rgba(0, 0, 0, 0.6); color: white;
  padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; z-index: 2;
}

.thumbnail-strip {
  display: flex; justify-content: center; gap: 8px;
  overflow-x: auto; padding-bottom: 5px;
}

.thumbnail-wrapper {
  width: 60px; height: 60px; /* Miniaturas más chicas */
  border: 2px solid #eee; border-radius: 6px;
  overflow: hidden; cursor: pointer; flex-shrink: 0;
}
.thumbnail-wrapper.active { border-color: #0d6efd; }
.thumbnail-image { width: 100%; height: 100%; object-fit: cover; }
.info-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.product-title {
  font-size: 1.8rem; /* Reducido de 2.8rem */
  font-weight: 800;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  text-align: left;
  color: #2c3e50;
}

.product-price {
  font-size: 1.4rem; /* Reducido de 2rem */
  color: #0d6efd;
  margin: 0 0 1.5rem 0;
  text-align: left;
  font-weight: 600;
}

.actions-container {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-bottom: 1.5rem;
  flex-wrap: wrap; /* Para móvil */
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-selector label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #555;
}

.quantity-input-group {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  height: 36px; /* Altura controlada */
}

.quantity-input-group input {
  width: 40px;
  text-align: center;
  font-size: 1rem;
  border: none;
  padding: 0;
  -moz-appearance: textfield;
}

.quantity-input-group input::-webkit-outer-spin-button,
.quantity-input-group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.quantity-input-group button {
  width: 30px;
  font-size: 1rem;
  background-color: #f8f9fa;
  border: none;
  cursor: pointer;
  color: #333;
}

.add-to-cart-button {
  flex-grow: 1;
  padding: 0.8rem;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  background-color: #0d6efd;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.add-to-cart-button:hover { background-color: #5599ff; }
.qna-container {
  padding: 2.5rem;
  margin-top: 3rem;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.qna-container h2 {
  font-size: 1.8rem;
  margin-top: 0;
  margin-bottom: 2rem;
  color: #333;
}

.question-form {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
}

.question-form label {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #555;
}

.question-form textarea {
  padding: 0.8rem;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid #ccc;
  resize: vertical;
  margin-bottom: 1rem;
}

.question-form button {
  align-self: flex-end;
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  background-color: #0d6efd;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* --- SECCIÓN MODIFICADA --- */

.existing-questions {
  border-top: 1px solid #eee; /* Línea divisoria superior */
  padding-top: 1.5rem;
}

.existing-questions h3 {
  font-size: 1.2rem;
  color: #333;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.qna-item {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #f0f0f0; /* Línea divisoria entre preguntas */
  padding-bottom: 1.5rem;
}

.qna-item:last-child {
  border-bottom: none; /* La última pregunta no necesita línea divisoria */
  margin-bottom: 0;
  padding-bottom: 0;
}

.qna-item p {
  margin: 0.5rem 0;
  line-height: 1.6;
  text-align: justify; /* <-- TEXTO JUSTIFICADO */
}

.qna-item span {
  font-weight: bold;
  color: #000;
}
.similar-products-container {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
  padding-bottom: 4rem; /* Espacio inferior extra para no pegar al footer */
  width: 100%;
  overflow: hidden; /* Importante para evitar scroll horizontal global */
  box-sizing: border-box;
}

.similar-products-container h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: #333;
}

.slider-wrapper {
  width: 100%; 
  padding: 0 10px;
  box-sizing: border-box;
  display: block;
}

/* Espacio entre tarjetas controlado por Slick */
.slick-slide {
  padding: 0 8px; 
  box-sizing: border-box;
}

.similar-product-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  background-color: white;
  transition: transform 0.2s;
  height: 100%;
}

.similar-product-card:hover { 
  transform: translateY(-3px); 
  border-color: #0d6efd; 
}

.image-container {
  width: 100%; 
  height: 150px; 
  background-color: #f8f9fa;
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.similar-product-card img { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  padding: 10px; 
}

.similar-product-info { 
  padding: 0.8rem; 
  text-align: center; 
}

.similar-product-info h4 {
  margin: 0 0 5px 0; 
  font-size: 0.9rem; 
  font-weight: 600;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  color: #333;
}

.similar-price { 
  color: #0d6efd; 
  font-weight: bold; 
  margin: 0; 
  font-size: 0.9rem; 
}

/* --- AJUSTES MÓVIL --- */
@media (max-width: 768px) {
    .slider-wrapper {
        padding: 0; 
    }

    /* Reducimos el gap en móvil para aprovechar espacio */
    .slick-slide {
        padding: 0 5px; 
    }

    .image-container {
        height: 120px; 
    }

    .similar-product-info { padding: 0.5rem; }
    .similar-product-info h4 { font-size: 0.85rem; }
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url(data:image/gif;base64,R0lGODlhIAAgAPUAAP///wAAAPr6+sTExOjo6PDw8NDQ0H5+fpqamvb29ubm5vz8/JKSkoaGhuLi4ri4uKCgoOzs7K6urtzc3D4+PlZWVmBgYHx8fKioqO7u7kpKSmxsbAwMDAAAAM7OzsjIyNjY2CwsLF5eXh4eHkxMTLCwsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAIAAgAAAG/0CAcEgkFjgcR3HJJE4SxEGnMygKmkwJxRKdVocFBRRLfFAoj6GUOhQoFAVysULRjNdfQFghLxrODEJ4Qm5ifUUXZwQAgwBvEXIGBkUEZxuMXgAJb1dECWMABAcHDEpDEGcTBQMDBQtvcW0RbwuECKMHELEJF5NFCxm1AAt7cH4NuAOdcsURy0QCD7gYfcWgTQUQB6Zkr66HoeDCSwIF5ucFz3IC7O0CC6zx8YuHhW/3CvLyfPX4+OXozKnDssBdu3G/xIHTpGAgOUPrZimAJCfDPYfDin2TQ+xeBnWbHi37SC4YIYkQhdy7FvLdpwWvjA0JyU/ISyIx4xS6sgfkNS4me2rtVKkgw0JCb8YMZdjwqMQ2nIY8BbcUQNVCP7G4MQq1KRivR7tiDEuEFrggACH5BAAKAAEALAAAAAAgACAAAAb/QIBwSCQmNBpCcckkEgREA4ViKA6azM8BEZ1Wh6LOBls0HA5fgJQ6HHQ6InKRcWhA1d5hqMMpyIkOZw9Ca18Qbwd/RRhnfoUABRwdI3IESkQFZxB4bAdvV0YJQwkDAx9+bWcECQYGCQ5vFEQCEQoKC0ILHqUDBncCGA5LBiHCAAsFtgqoQwS8Aw64f8m2EXdFCxO8INPKomQCBgPMWAvL0n/ff+jYAu7vAuxy8O/myvfX8/f7/Arq+v0W0HMnr9zAeE0KJlQkJIGCfE0E+PtDq9qfDMogDkGmrIBCbNQUZIDosNq1kUsEZJBW0dY/b0ZsLViQIMFMW+RKKgjFzp4fNokPIdki+Y8JNVxA79jKwHAI0G9JGw5tCqDWTiFRhVhtmhVA16cMJTJ1OnVIMo1cy1KVI5NhEAAh+QQACgACACwAAAAAIAAgAAAG/0CAcEgkChqNQnHJJCYWRMfh4CgamkzFwBOdVocNCgNbJAwGhKGUOjRQKA1y8XOGAtZfgIWiSciJBWcTQnhCD28Qf0UgZwJ3XgAJGhQVcgKORmdXhRBvV0QMY0ILCgoRmIRnCQIODgIEbxtEJSMdHZ8AGaUKBXYLIEpFExZpAG62HRRFArsKfn8FIsgjiUwJu8FkJLYcB9lMCwUKqFgGHSJ5cnZ/uEULl/CX63/x8KTNu+RkzPj9zc/0/Cl4V0/APDIE6x0csrBJwybX9DFhBhCLgAilIvzRVUriKHGlev0JtyuDvmsZUZlcIiCDnYu7KsZ0UmrBggRP7n1DqcDJEzciOgHwcwTyZEUmIKEMFVIqgyIjpZ4tjdTxqRCMPYVMBYDV6tavUZ8yczpkKwBxHsVWtaqo5tMgACH5BAAKAAMALAAAAAAgACAAAAb/QIBwSCQuBgNBcck0FgvIQtHRZCYUGSJ0IB2WDo9qUaBQKIXbLsBxOJTExUh5mB4iDo0zXEhWJNBRQgZtA3tPZQsAdQINBwxwAnpCC2VSdQNtVEQSEkOUChGSVwoLCwUFpm0QRAMVFBQTQxllCqh0kkIECF0TG68UG2O0foYJDb8VYVa0alUXrxoQf1WmZnsTFA0EhgCJhrFMC5Hjkd57W0jpDsPDuFUDHfHyHRzstNN78PPxHOLk5dwcpBuoaYk5OAfhXHG3hAy+KgLkgNozqwzDbgWYJQyXsUwGXKNA6fnYMIO3iPeIpBwyqlSCBKUqEQk5E6YRmX2UdAT5kEnHKkQ5hXjkNqTPtKAARl1sIrGoxSFNuSEFMNWoVCxEpiqyRlQY165wEHELAgAh+QQACgAEACwAAAAAIAAgAAAG/0CAcEgsKhSLonJJTBIFR0GxwFwmFJlnlAgaTKpFqEIqFJMBhcEABC5GjkPz0KN2tsvHBH4sJKgdd1NHSXILah9tAmdCC0dUcg5qVEQfiIxHEYtXSACKnWoGXAwHBwRDGUcKBXYFi0IJHmQEEKQHEGGpCnp3AiW1DKFWqZNgGKQNA65FCwV8bQQHJcRtds9MC4rZitVgCQbf4AYEubnKTAYU6eoUGuSpu3fo6+ka2NrbgQAE4eCmS9xVAOW7Yq7IgA4Hpi0R8EZBhDshOnTgcOtfM0cAlTigILFDiAFFNjk8k0GZgAxOBozouIHIOyKbFixIkECmIyIHOEiEWbPJTTQ5FxcVOMCgzUVCWwAcyZJvzy45ADYVZNIwTlIAVfNB7XRVDLxEWLQ4E9JsKq+rTdsMyhcEACH5BAAKAAUALAAAAAAgACAAAAb/QIBwSCwqFIuicklMEgVHQVHKVCYUmWeUWFAkqtOtEKqgAsgFcDFyHJLNmbZa6x2Lyd8595h8C48RagJmQgtHaX5XZUYKQ4YKEYSKfVKPaUMZHwMDeQBxh04ABYSFGU4JBpsDBmFHdXMLIKofBEyKCpdgspsOoUsLXaRLCQMgwky+YJ1FC4POg8lVAg7U1Q5drtnHSw4H3t8HDdnZy2Dd4N4Nzc/QeqLW1bnM7rXuV9tEBhQQ5UoCbJDmWKBAQcMDZNhwRVNCYANBChZYEbkVCZOwASEcCDFQ4SEDIq6WTVqQIMECBx06iCACQQPBiSabHDqzRUTKARMhSFCDrc+WNQIcOoRw5+ZIHj8ADqSEQBQAwKKLhIzowEEeGKQ0owIYkPKjHihZoBKi0KFE01b4zg7h4y4IACH5BAAKAAYALAAAAAAgACAAAAb/QIBwSCwqFIuicklMEgVHQVHKVCYUmWeUWFAkqtOtEKqgAsgFcDFyHJLNmbZa6x2Lyd8595h8C48RagJmQgtHaX5XZUUJeQCGChGEin1SkGlubEhDcYdOAAWEhRlOC12HYUd1eqeRokOKCphgrY5MpotqhgWfunqPt4PCg71gpgXIyWSqqq9MBQPR0tHMzM5L0NPSC8PCxVUCyeLX38+/AFfXRA4HA+pjmoFqCAcHDQa3rbxzBRD1BwgcMFIlidMrAxYICHHA4N8DIqpsUWJ3wAEBChQaEBnQoB6RRr0uARjQocMAAA0w4nMz4IOaU0lImkSngYKFc3ZWyTwJAALGK4fnNA3ZOaQCBQ22wPgRQlSIAYwSfkHJMrQkTyEbKFzFydQq15ccOAjUEwQAIfkEAAoABwAsAAAAACAAIAAABv9AgHBILCoUi6JySUwSBUdBUcpUJhSZZ5RYUCSq060QqqACyAVwMXIcks2ZtlrrHYvJ3zn3mHwLjxFqAmZCC0dpfldlRQl5AIYKEYSKfVKQaW5sSENxh04ABYSFGU4LXYdhR3V6p5GiQ4oKmGCtjkymi2qGBZ+6eo+3g8KDvYLDxKrJuXNkys6qr0zNygvHxL/V1sVD29K/AFfRRQUDDt1PmoFqHgPtBLetvMwG7QMes0KxkkIFIQNKDhBgKvCh3gQiqmxt6NDBAAEIEAgUOHCgBBEH9Yg06uWAIQUABihQMACgBEUHTRwoUEOBIcqQI880OIDgm5ABDA8IgUkSwAAyij1/jejAARPPIQwONBCnBAJDCEOOCnFA8cOvEh1CEJEqBMIBEDaLcA3LJIEGDe/0BAEAIfkEAAoACAAsAAAAACAAIAAABv9AgHBILCoUi6JySUwSBUdBUcpUJhSZZ5RYUCSq060QqqACyAVwMXIcks2ZtlrrHYvJ3zn3mHwLjxFqAmZCC0dpfldlRQl5AIYKEYSKfVKQaW5sSENxh04ABYSFGU4LXYdhR3V6p5GiQ4oKmGCtjkymi2qGBZ+6eo+3g8KDvYLDxKrJuXNkys6qr0zNygvHxL/V1sVDDti/BQccA8yrYBAjHR0jc53LRQYU6R0UBnO4RxmiG/IjJUIJFuoVKeCBigBN5QCk43BgFgMKFCYUGDAgFEUQRGIRYbCh2xACEDcAcHDgQDcQFGf9s7VkA0QCI0t2W0DRw68h8ChAEELSJE8xijBvVqCgIU9PjwA+UNzG5AHEB9xkDpk4QMGvARQsEDlKxMCALDeLcA0rqEEDlWCCAAAh+QQACgAJACwAAAAAIAAgAAAG/0CAcEgsKhSLonJJTBIFR0FRylQmFJlnlFhQJKrTrRCqoALIBXAxchySzZm2Wusdi8nfOfeYfAuPEWoCZkILR2l+V2VFCXkAhgoRhIp9UpBpbmxIQ3GHTgAFhIUZTgtdh2FHdXqnkaJDigqYYK2OTKaLaoYFn7p6j0wOA8PEAw6/Z4PKUhwdzs8dEL9kqqrN0M7SetTVCsLFw8d6C8vKvUQEv+dVCRAaBnNQtkwPFRQUFXOduUoTG/cUNkyYg+tIBlEMAFYYMAaBuCekxmhaJeSeBgiOHhw4QECAAwcCLhGJRUQCg3RDCmyUVmBYmlOiGqmBsPGlyz9YkAlxsJEhqCubABS9AsPgQAMqLQfM0oTMwEZ4QpLOwvMLxAEEXIBG5aczqtaut4YNXRIEACH5BAAKAAoALAAAAAAgACAAAAb/QIBwSCwqFIuicklMEgVHQVHKVCYUmWeUWFAkqtOtEKqgAsgFcDFyHJLNmbZa6x2Lyd8595h8C48RahAQRQtHaX5XZUUJeQAGHR0jA0SKfVKGCmlubEhCBSGRHSQOQwVmQwsZTgtdh0UQHKIHm2quChGophuiJHO3jkwOFB2UaoYFTnMGegDKRQQG0tMGBM1nAtnaABoU3t8UD81kR+UK3eDe4nrk5grR1NLWegva9s9czfhVAgMNpWqgBGNigMGBAwzmxBGjhACEgwcgzAPTqlwGXQ8gMgAhZIGHWm5WjelUZ8jBBgPMTBgwIMGCRgsygVSkgMiHByD7DWDmx5WuMkZqDLCU4gfAq2sACrAEWFSRLjUfWDopCqDTNQIsJ1LF0yzDAA90UHV5eo0qUjB8mgUBACH5BAAKAAsALAAAAAAgACAAAAb/QIBwSCwqFIuickk0FIiCo6A4ZSoZnRBUSiwoEtYipNOBDKOKKgD9DBNHHU4brc4c3cUBeSOk949geEQUZA5rXABHEW4PD0UOZBSHaQAJiEMJgQATFBQVBkQHZKACUwtHbX0RR0mVFp0UFwRCBSQDSgsZrQteqEUPGrAQmmG9ChFqRAkMsBd4xsRLBBsUoG6nBa14E4IA2kUFDuLjDql4peilAA0H7e4H1udH8/Ps7+3xbmj0qOTj5mEWpEP3DUq3glYWOBgAcEmUaNI+DBjwAY+dS0USGJg4wABEXMYyJNvE8UOGISKVCNClah4xjg60WUKyINOCUwrMzVRARMGENWQ4n/jpNTKTm15J/CTK2e0MoD+UKmHEs4onVDVVmyqdpAbNR4cKTjqNSots07EjzzJh1S0IADsAAAAAAAAAAAA=) center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url(/static/media/slick.a4e97f5a2a64f0ab1323.eot);
    src: url(/static/media/slick.a4e97f5a2a64f0ab1323.eot?#iefix) format('embedded-opentype'), url(/static/media/slick.295183786cd8a1389865.woff) format('woff'), url(/static/media/slick.c94f7671dcc99dce43e2.ttf) format('truetype'), url(/static/media/slick.2630a3e3eab21c607e21.svg#slick) format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/* Archivo: src/pages/LoginPage.css */

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 2rem;
  background-color: #ffffff;
  min-height: 80vh; /* Centrado vertical en pantallas grandes */
}

.login-form {
  width: 100%;
  max-width: 400px;
}

.login-form h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 2rem;
  font-size: 2.5rem;
  color: #333;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group input {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: #e0f7fa;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.3s;
}

.form-group input:focus {
  border-color: #00BFA5; /* Borde turquesa al escribir */
}

.error-message {
  color: #dc3545;
  text-align: center;
  margin-bottom: 1rem;
  font-weight: bold;
}

/* --- BOTÓN CORREGIDO --- */
/* Usamos un nombre único para que no choque con otros botones */
.btn-login-submit {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #ffffff;
  
  /* Color Turquesa de Marca */
  background-color: #00BFA5; 
  
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s;
  margin-top: 1rem;
}

.btn-login-submit:hover {
  background-color: #009688; /* Un poco más oscuro al pasar el mouse */
  transform: translateY(-2px);
}

.btn-login-submit:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}
/* Archivo: src/pages/RegisterPage.css */

.register-container {
    display: flex;
    justify-content: center;
    align-items: center; /* Centrado vertical mejorado */
    padding: 4rem 2rem;
    background-color: #ffffff;
    min-height: 80vh; /* Asegura altura mínima */
}

.register-form {
    width: 100%;
    max-width: 450px;
    text-align: center;
}

.register-form h2 {
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
}

.form-group {
    margin-bottom: 1.2rem;
    position: relative; 
}

.form-group input {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #e0f7fa; /* Fondo azulito suave */
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    outline: none;
}

.form-group input:focus {
    border-color: #00BFA5; /* Borde turquesa al escribir */
    background-color: #fff;
}

.form-group input:-ms-input-placeholder {
    color: #888;
}

.form-group input::placeholder {
    color: #888;
}

.agency-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
    color: #555;
}

.agency-question span {
    font-weight: 600;
    font-size: 1rem;
}

.radio-group {
    display: flex;
    gap: 1.5rem;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

/* --- BOTÓN ÚNICO PARA REGISTRO (TURQUESA) --- */
.btn-register-submit {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    
    /* Color de marca correcto */
    background-color: #00BFA5; 
    
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 1.5rem;
    transition: background-color 0.3s ease, transform 0.2s;
}

.btn-register-submit:hover {
    background-color: #009688; /* Tono más oscuro */
    transform: translateY(-2px);
}

.btn-register-submit:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}

.error-message {
    color: #dc3545; /* Rojo Bootstrap */
    margin-top: 1rem;
    font-weight: bold;
    background-color: #fce8e6;
    padding: 10px;
    border-radius: 6px;
}
/* Archivo: src/components/Autocomplete.css */
.autocomplete-container {
  position: relative;
  width: 100%;
}

.autocomplete-container input {
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 5px 5px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.suggestions-list li {
  padding: 0.8rem;
  cursor: pointer;
}

.suggestions-list li:hover {
  background-color: #f0f0f0;
}
/* --- LAYOUT GENERAL (AISLADO) --- */
.cart-page-container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.cart-page-container .cart-header { text-align: center; margin-bottom: 2rem; }
.cart-page-container .cart-header h1 { font-size: 1rem; color: #888; text-transform: uppercase; letter-spacing: 2px; margin:0; }
.cart-page-container .cart-header h2 { font-size: 2rem; color: #333; margin: 0.5rem 0; font-weight: 800; }
.cart-page-container .editing-badge { display: block; margin: 5px auto 0; width: -webkit-fit-content; width: fit-content; background: #ffc107; padding: 2px 10px; border-radius: 10px; font-weight: bold; font-size: 0.8rem; color: #333; }

.cart-page-container .cart-section {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
}

.cart-page-container .section-title {
    margin-top: 0;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #0d6efd;
    color: #333;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.cart-page-container .submit-error-message { background: #f8d7da; color: #721c24; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }

/* FORMULARIO */
.cart-page-container .event-form { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1.5rem; gap: 1.5rem; }
.cart-page-container .form-field { display: flex; flex-direction: column; }
.cart-page-container .form-field.full-width { grid-column: 1 / -1; }
.cart-page-container .form-field label { margin-bottom: 0.5rem; font-weight: 600; color: #555; font-size: 0.9rem;}
.cart-page-container .admin-label { color: #d63384 !important; }
.cart-page-container .form-field input, 
.cart-page-container .custom-datepicker, 
.cart-page-container .admin-select {
    width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; box-sizing: border-box;
}
.cart-page-container .admin-select { border-color: #d63384; background: #fff0f6; }

/* QUITAR FLECHAS DEL INPUT NUMBER */
.cart-page-container input[type=number]::-webkit-inner-spin-button, 
.cart-page-container input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; margin: 0; 
}

/* ==========================================================================
   ESTILOS BASE (PC)
========================================================================== */
.cart-page-container .cart-items-list { display: flex; flex-direction: column; gap: 0; }

.cart-page-container .cart-item {
    display: grid;
    /* Img (90px) | Info (flex) | Cantidad (160px) | Total (180px) */
    grid-template-columns: 90px 1fr 160px 180px; 
    align-items: flex-start;
    grid-gap: 1.5rem;
    gap: 1.5rem;
    padding: 2rem 0;
    border-bottom: 1px solid #eee;
}

.cart-page-container .cart-item:last-child { border-bottom: none; }

.cart-page-container .cart-item-img-wrapper {
    width: 90px; height: 90px;
    border-radius: 8px; overflow: hidden;
    background-color: #f8f9fa; border: 1px solid #eee;
    display: flex; align-items: center; justify-content: center;
    align-self: center; 
}
.cart-page-container .cart-item-img-wrapper img { width: 100%; height: 100%; object-fit: contain; }

.cart-page-container .item-details { 
    text-align: left; 
    align-self: center; 
}
.cart-page-container .item-details h3 { margin: 0 0 5px 0; font-size: 1.1rem; color: #333; }
.cart-page-container .item-price { color: #0d6efd; font-weight: 600; margin: 5px 0 0 0; font-size: 0.95rem; }
.cart-page-container .hidden-badge { font-size: 0.6em; background: #6c757d; color: white; padding: 2px 5px; border-radius: 4px; margin-left: 5px; vertical-align: middle; }
.cart-page-container .kit-note { font-style: italic; font-size: 0.85em; color: #777; margin: 2px 0 0 0; }

/* QUANTITY SECTION (PC) */
.cart-page-container .quantity-section { 
    display: flex; 
    justify-content: flex-start; 
    margin-top: 25px; /* BAJADO */
    padding-left: 10px;
}

.cart-page-container .quantity-selector {
    display: flex; align-items: center;
    border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #f8f9fa;
    height: 36px;
}
.cart-page-container .quantity-selector button {
    background: transparent; border: none; padding: 0 12px; 
    cursor: pointer; font-weight: bold; font-size: 1.1rem; color: #333;
    height: 100%; display: flex; align-items: center; justify-content: center;
}
.cart-page-container .quantity-selector button:disabled { opacity: 0.5; cursor: not-allowed; }
.cart-page-container .quantity-selector input {
    width: 45px; text-align: center; border: none; border-left: 1px solid #ddd; border-right: 1px solid #ddd; 
    font-size: 1rem; outline: none; background: white; color: #333; height: 100%;
}

/* ACTIONS (PC) */
.cart-page-container .item-actions { 
    text-align: right; 
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px; 
    margin-top: 10px; /* SUBIDO */
}
.cart-page-container .item-total { font-weight: 800; font-size: 1.2rem; color: #333; margin: 0; }
.cart-page-container .remove-btn {
    background: none; border: none; color: #dc3545; cursor: pointer; font-size: 0.9rem; padding: 5px; transition: transform 0.2s;
    display: flex; align-items: center; gap: 5px;
}
.cart-page-container .remove-btn:hover { text-decoration: underline; }

/* RESUMEN FINAL (PC - CENTRADO) */
.cart-page-container .cart-summary-final {
    margin-top: 2rem; padding: 2rem; background: #fff;
    border: 1px solid #e0e0e0; border-radius: 12px;
    display: flex; 
    justify-content: center; /* CENTRADO */
}
.cart-page-container .summary-details { width: 100%; max-width: 400px; }
.cart-page-container .summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.95rem; color: #555; }
.cart-page-container .summary-row.extra-cost { color: #198754; font-weight: 600; }
.cart-page-container .summary-row.extra-cost.transport { color: #fd7e14; }
.cart-page-container .summary-row.total { border-top: 2px solid #eee; padding-top: 12px; font-size: 1.3rem; font-weight: 800; color: #333; margin-top: 10px;}
.cart-page-container .total-amount { color: #0d6efd; }

/* BOTONES GLOBALES (PC - CENTRADO Y SEPARADO) */
.cart-page-container .cart-global-actions {
    margin-top: 1.5rem;
    display: flex; 
    justify-content: center;
    gap: 1rem; 
    align-items: center;
}

.cart-page-container .finalize-button, 
.cart-page-container .clear-button { 
    padding: 12px 24px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; font-size: 1rem; transition: opacity 0.2s; 
}
.cart-page-container .finalize-button { background: #198754; color: white; }
.cart-page-container .clear-button { background: #6c757d; color: white; }
.cart-page-container .empty-cart-message { text-align: center; padding: 3rem; color: #777; }
.cart-page-container .btn-go-catalog { color: #0d6efd; text-decoration: underline; font-weight: bold; margin-left: 5px; }


/* ==========================================================================
   REDISEÑO MÓVIL (COMPACTO Y SIN SOBREPOSICIÓN)
========================================================================== */
@media (max-width: 768px) {
    .cart-page-container { padding: 0.5rem; margin-top: 0.5rem;}
    .cart-page-container .quote-section { padding: 0.8rem; } 
    .cart-page-container .event-form { grid-template-columns: 1fr; gap: 1rem; }

    /* TARJETA MÓVIL */
    .cart-page-container .cart-item {
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto; 
        grid-template-areas:
            "imagen detalles"
            "footer footer";
        
        grid-gap: 10px;
        
        gap: 10px; 
        background: #fff;
        border: 1px solid #e1e4e8;
        border-radius: 12px;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        margin-bottom: 0.8rem;
    }

    /* 1. IMAGEN */
    .cart-page-container .cart-item-img-wrapper {
        grid-area: imagen;
        width: 80px; height: 80px; 
        align-self: center; 
        background: #fff; border: 1px solid #f0f0f0; border-radius: 8px;
    }

    /* 2. DETALLES */
    .cart-page-container .item-details {
        grid-area: detalles;
        display: flex; flex-direction: column; justify-content: center;
        padding-left: 5px; 
    }
    .cart-page-container .item-details h3 { font-size: 1rem; margin: 0 0 2px 0; }

    /* 3. FOOTER UNIFICADO */
    /* Forzamos que ambos ocupen toda la fila de abajo y se separen */
    .cart-page-container .quantity-section { 
        grid-area: footer; 
        justify-self: start; /* Pegado a la Izquierda */
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px dashed #eee;
        width: 100%; /* Truco para que la línea divisoria ocupe todo */
        /* Pero solo mostramos contenido a la izquierda */
        display: flex;
        pointer-events: none; /* Dejar pasar clics si se enciman cajas invisibles */
    }
    .cart-page-container .quantity-selector { pointer-events: auto; } /* Reactivar clicks */

    .cart-page-container .item-actions { 
        grid-area: footer; 
        justify-self: end; /* Pegado a la Derecha */
        margin-top: 10px;
        padding-top: 8px;
        /* border-top ignorado aquí para no duplicar linea */
        display: flex;
        flex-direction: row; 
        align-items: center; 
        gap: 8px;
        pointer-events: auto;
    }

    /* ESTILOS COMPACTOS PARA EL FOOTER */
    .cart-page-container .quantity-selector { height: 28px; } /* Más bajito */
    .cart-page-container .quantity-selector button { padding: 0 8px; font-size: 0.9rem; }
    .cart-page-container .quantity-selector input { width: 35px; font-size: 0.85rem; }

    .cart-page-container .item-total { font-size: 0.95rem; font-weight: 700; margin: 0; }
    
    .cart-page-container .remove-btn { 
        font-size: 0; padding: 4px; /* Botón basura compacto */
        border: 1px solid #fee2e2; background-color: #fff5f5; border-radius: 4px;
        display: flex; align-items: center; justify-content: center;
    }
    .cart-page-container .remove-btn::after { content: "🗑️"; font-size: 1rem; }

    /* Resumen */
    .cart-page-container .cart-summary-final { flex-direction: column; padding: 1rem; gap: 1rem; }
    .cart-page-container .cart-global-actions { flex-direction: column; width: 100%; margin-top: 1rem; }
    .cart-page-container .finalize-button, 
    .cart-page-container .clear-button { width: 100%; }
}
@charset "UTF-8";
.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
/* sr-only utility class for accessibility */
.react-datepicker__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: normal;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  text-align: center;
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__day-name--disabled,
.react-datepicker__day--disabled,
.react-datepicker__time-name--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
  color: #fff;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  -webkit-clip-path: circle(0);
          clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.search-results-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.search-results-title {
    font-size: 2.2rem;
    margin-bottom: 2rem;
    text-align: center;
    color: #333;
}

.search-results-title span {
    color: #0d6efd;
    font-style: italic;
}

.search-results-grid {
    display: grid;
    /* Crea columnas de 250px, y las que quepan se ajustan automáticamente */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
}

.no-results-message,
.search-loading {
    text-align: center;
    font-size: 1.2rem;
    color: #666;
    padding: 4rem 0;
}
/* UBICACIÓN: src/pages/UserCotizacionesPage.css */

.user-cotizaciones-container {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 2rem;
    font-family: 'Segoe UI', sans-serif;
    min-height: 80vh;
}

.user-cotizaciones-container h1 {
    text-align: center;
    margin-bottom: 2rem;
    color: #2c3e50;
    font-size: 2.2rem;
    font-weight: 700;
}

/* --- TOGGLE BUTTONS (VISTA) --- */
.view-mode-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 4px;
    width: -webkit-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #dee2e6;
}

.view-mode-toggle button {
    padding: 0.6rem 1.5rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    color: #6c757d;
}

.view-mode-toggle button.active {
    background-color: #0d6efd;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- CALENDARIO --- */
.calendar-container {
    background-color: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #e9ecef;
}

/* Toolbar Calendario */
.custom-calendar-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #f1f3f5; }
.toolbar-group-left { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.btn-today { background-color: #f8f9fa; border: 1px solid #dee2e6; color: #495057; padding: 6px 12px; border-radius: 6px; font-weight: 600; cursor: pointer; }
.btn-arrows { display: flex; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; }
.btn-arrows button { background-color: #fff; border: none; padding: 6px 12px; cursor: pointer; font-weight: 600; color: #495057; border-right: 1px solid #dee2e6; }
.btn-arrows button:last-child { border-right: none; }
.btn-arrows button:hover, .btn-today:hover { background-color: #e9ecef; color: #0d6efd; }
.toolbar-label { font-size: 2rem; font-weight: 800; color: #212529; text-transform: capitalize; text-align: center; flex-grow: 1; }
.toolbar-group-right { min-width: 200px; }

/* --- CONTROLES Y FILTROS HORIZONTALES --- */
.controls-container { margin-bottom: 1.5rem; text-align: center; width: 100%; }

.filters-top-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.search-bar-wrapper {
    flex: 1 1;
    min-width: 250px;
    max-width: 400px;
    display: flex; /* Asegura layout */
    justify-content: center;
}

.cotizacion-search-input { padding: 0.8rem 1.5rem; border: 1px solid #ced4da; border-radius: 30px; width: 100%; max-width: 500px; }

.date-filters {
    display: flex;
    gap: 10px;
}

.filter-select {
    padding: 0.8rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #495057;
    background-color: white;
    cursor: pointer;
}

.filter-select:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* TABS HORIZONTALES */
.filter-tabs { 
    display: flex; 
    flex-direction: row; 
    gap: 10px; 
    justify-content: center; 
    flex-wrap: wrap; 
    margin-top: 1rem; 
}

.filter-tab {
    background: white; 
    border: 1px solid #dee2e6; 
    border-radius: 20px; 
    padding: 6px 16px; 
    font-size: 0.9rem; 
    cursor: pointer; 
    color: #555; 
    transition: all 0.2s;
    display: flex; 
    align-items: center; 
    white-space: nowrap;
}
.filter-tab:hover { background: #f1f3f5; }
.filter-tab.active { background: #0d6efd; color: white; border-color: #0d6efd; font-weight: 600; }

/* PUNTOS EN TABS */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
.dot-aprobada, .dot-finalizada { background-color: #198754; }
.dot-por-confirmar { background-color: #fd7e14; }
.dot-en-proceso { background-color: #ffc107; }
.dot-cancelada { background-color: #dc3545; }
.dot-vencida { background-color: #6c757d; }
.dot-pagada { background-color: #198754; border: 1px solid gold; }
.dot-desconocido { background-color: #ccc; }

/* --- LIST VIEW --- */
.cotizaciones-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.cotizacion-item-link { text-decoration: none; color: inherit; }

.cotizacion-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: #fff; 
    border: 1px solid #dee2e6; 
    border-radius: 8px; 
    padding: 1.5rem; 
    transition: transform 0.2s; 
}
.cotizacion-item:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }

.cotizacion-info h2 { margin: 0 0 5px 0; font-size: 1.2rem; color: #0d6efd; }
.cotizacion-info p { margin: 0; color: #6c757d; font-size: 0.9rem; }
.cot-id { color: #999; font-size: 0.8em; margin-right: 8px; font-weight: normal; }
.admin-info { margin-top: 5px; font-size: 0.85rem; color: #495057; }

/* --- SECCIÓN DE ESTADO Y ACCIONES --- */
.cotizacion-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.badges-container { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 5px; 
}

.status-badge { 
    display: inline-block; 
    padding: 0.3rem 0.8rem; 
    border-radius: 20px; 
    font-size: 0.85rem; 
    font-weight: 700; 
    color: #fff; 
    text-transform: capitalize; 
}

.status-en-proceso { background-color: #ffc107; color: #333; }
.status-por-confirmar { background-color: #fd7e14; }
.status-aprobada, .status-finalizada { background-color: #198754; }
.status-cancelada { background-color: #dc3545; }
.status-vencida { background-color: #6c757d; }

.pago-pagada { background-color: #198754; box-shadow: 0 0 5px rgba(25, 135, 84, 0.5); }
.pago-pendiente { background-color: #adb5bd; color: white; }
.pago-parcial { background-color: #a3cfbb; color: #0f5132; }

.cotizacion-total { font-weight: 700; color: #333; margin: 0; margin-bottom: 5px; font-size: 1.1rem; }

.cotizacion-actions-row { 
    margin-top: 5px; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    gap: 12px; 
}

.btn-action { background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 0; transition: transform 0.2s; }
.btn-action:hover { transform: scale(1.1); }

.btn-pago-on { color: #198754; font-size: 1.3rem; }
.btn-pago-off { color: #adb5bd; font-size: 1.3rem; opacity: 0.6; }
.btn-pago-off:hover { opacity: 1; color: #198754; }

.load-more-button { display: block; margin: 2rem auto; padding: 0.8rem 2rem; font-size: 1rem; font-weight: 600; color: #0d6efd; background-color: transparent; border: 2px solid #0d6efd; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; }
.load-more-button:hover { background-color: #0d6efd; color: white; box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3); transform: translateY(-2px); }
.load-more-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.no-cotizaciones-message { text-align: center; color: #6c757d; font-style: italic; margin-top: 2rem; }

/* Botón Copiar */
.btn-copiar { color: #0d6efd; transition: transform 0.2s; }
.btn-copiar:hover { color: #0b5ed7; transform: scale(1.1); }

/* Responsive */
@media (max-width: 768px) {
    .custom-calendar-toolbar { flex-direction: column; gap: 10px; }
    .toolbar-label { order: -1; font-size: 1.5rem; }
    .toolbar-group-left, .toolbar-group-right { min-width: auto; }
    .toolbar-group-right { display: none; }
    .cotizacion-item { flex-direction: column; align-items: stretch; gap: 1rem; }
    .cotizacion-status { align-items: flex-start; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
    .badges-container { flex-wrap: wrap; }
}

@media (max-width: 600px) {
    .filters-top-row { flex-direction: column; align-items: stretch; }
    .search-bar-wrapper, .date-filters { width: 100%; max-width: 100%; }
    
    /* CAMBIO AQUI: Centrar y Acortar Filtros */
    .date-filters { justify-content: center; gap: 15px; }
    .filter-select { flex: 0 1 auto; width: 42%; } /* Acortado */
}
@charset "UTF-8";
.rbc-btn {
  color: inherit;
  font: inherit;
  margin: 0;
}

button.rbc-btn {
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
          appearance: button;
  cursor: pointer;
}

button[disabled].rbc-btn {
  cursor: not-allowed;
}

button.rbc-input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.rbc-calendar {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.rbc-m-b-negative-3 {
  margin-bottom: -3px;
}

.rbc-h-full {
  height: 100%;
}

.rbc-calendar *,
.rbc-calendar *:before,
.rbc-calendar *:after {
  box-sizing: inherit;
}

.rbc-abs-full, .rbc-row-bg {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rbc-rtl {
  direction: rtl;
}

.rbc-off-range {
  color: #999999;
}

.rbc-off-range-bg {
  background: #e6e6e6;
}

.rbc-header {
  overflow: hidden;
  flex: 1 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 90%;
  min-height: 0;
  border-bottom: 1px solid #ddd;
}
.rbc-header + .rbc-header {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-header + .rbc-header {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-button-link {
  color: inherit;
  background: none;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  -webkit-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

.rbc-row-content {
  position: relative;
  -ms-user-select: none;
      user-select: none;
  -webkit-user-select: none;
  z-index: 4;
}

.rbc-row-content-scrollable {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  /* Hide scrollbar for Chrome, Safari and Opera */
}
.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar {
  display: none;
}

.rbc-today {
  background-color: #eaf6ff;
}

.rbc-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
}
.rbc-toolbar .rbc-toolbar-label {
  flex-grow: 1;
  padding: 0 10px;
  text-align: center;
}
.rbc-toolbar button {
  color: #373a3c;
  display: inline-block;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  background: none;
  background-image: none;
  border: 1px solid #ccc;
  padding: 0.375rem 1rem;
  border-radius: 4px;
  line-height: normal;
  white-space: nowrap;
}
.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
  background-image: none;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
  color: #373a3c;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.rbc-toolbar button:focus {
  color: #373a3c;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.rbc-toolbar button:hover {
  color: #373a3c;
  cursor: pointer;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.rbc-btn-group {
  display: inline-block;
  white-space: nowrap;
}
.rbc-btn-group > button:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rbc-btn-group > button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.rbc-btn-group button + button {
  margin-left: -1px;
}
.rbc-rtl .rbc-btn-group button + button {
  margin-left: 0;
  margin-right: -1px;
}
.rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button {
  margin-left: 10px;
}

@media (max-width: 767px) {
  .rbc-toolbar {
    flex-direction: column;
  }
}
.rbc-event, .rbc-day-slot .rbc-background-event {
  border: none;
  box-sizing: border-box;
  box-shadow: none;
  margin: 0;
  padding: 2px 5px;
  background-color: #3174ad;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
  cursor: inherit;
  pointer-events: none;
}
.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event {
  background-color: #265985;
}
.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus {
  outline: 5px auto #3b99fc;
}

.rbc-event-label {
  font-size: 80%;
}

.rbc-event-overlaps {
  box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
}

.rbc-event-continues-prior {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rbc-event-continues-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-event-continues-earlier {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rbc-event-continues-later {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.rbc-row {
  display: flex;
  flex-direction: row;
}

.rbc-row-segment {
  padding: 0 1px 1px 1px;
}
.rbc-selected-cell {
  background-color: rgba(0, 0, 0, 0.1);
}

.rbc-show-more {
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 4;
  font-weight: bold;
  font-size: 85%;
  height: auto;
  line-height: normal;
  color: #3174ad;
}
.rbc-show-more:hover, .rbc-show-more:focus {
  color: #265985;
}

.rbc-month-view {
  position: relative;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  flex: 1 0;
  width: 100%;
  -ms-user-select: none;
      user-select: none;
  -webkit-user-select: none;
  height: 100%;
}

.rbc-month-header {
  display: flex;
  flex-direction: row;
}

.rbc-month-row {
  display: flex;
  position: relative;
  flex-direction: column;
  flex: 1 0;
  flex-basis: 0px;
  overflow: hidden;
  height: 100%;
}
.rbc-month-row + .rbc-month-row {
  border-top: 1px solid #ddd;
}

.rbc-date-cell {
  flex: 1 1;
  min-width: 0;
  padding-right: 5px;
  text-align: right;
}
.rbc-date-cell.rbc-now {
  font-weight: bold;
}
.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
  color: inherit;
  text-decoration: none;
}

.rbc-row-bg {
  display: flex;
  flex-direction: row;
  flex: 1 0;
  overflow: hidden;
  right: 1px;
}

.rbc-day-bg {
  flex: 1 0;
}
.rbc-day-bg + .rbc-day-bg {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-day-bg + .rbc-day-bg {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}

.rbc-overlay {
  position: absolute;
  z-index: 5;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  padding: 10px;
}
.rbc-overlay > * + * {
  margin-top: 1px;
}

.rbc-overlay-header {
  border-bottom: 1px solid #e5e5e5;
  margin: -10px -10px 5px -10px;
  padding: 2px 10px;
}

.rbc-agenda-view {
  display: flex;
  flex-direction: column;
  flex: 1 0;
  overflow: auto;
}
.rbc-agenda-view table.rbc-agenda-table {
  width: 100%;
  border: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
  padding: 5px 10px;
  vertical-align: top;
}
.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
  padding-left: 15px;
  padding-right: 15px;
  text-transform: lowercase;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
  border-top: 1px solid #ddd;
}
.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  padding: 3px 5px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
  text-align: right;
}

.rbc-agenda-time-cell {
  text-transform: lowercase;
}
.rbc-agenda-time-cell .rbc-continues-after:after {
  content: " »";
}
.rbc-agenda-time-cell .rbc-continues-prior:before {
  content: "« ";
}

.rbc-agenda-date-cell,
.rbc-agenda-time-cell {
  white-space: nowrap;
}

.rbc-agenda-event-cell {
  width: 100%;
}

.rbc-time-column {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.rbc-time-column .rbc-timeslot-group {
  flex: 1 1;
}

.rbc-timeslot-group {
  border-bottom: 1px solid #ddd;
  min-height: 40px;
  display: flex;
  flex-flow: column nowrap;
}

.rbc-time-gutter,
.rbc-header-gutter {
  flex: none;
}

.rbc-label {
  padding: 0 5px;
}

.rbc-day-slot {
  position: relative;
}
.rbc-day-slot .rbc-events-container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  margin-right: 10px;
  top: 0;
}
.rbc-day-slot .rbc-events-container.rbc-rtl {
  left: 10px;
  right: 0;
}
.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event {
  border: 1px solid #265985;
  display: flex;
  max-height: 100%;
  min-height: 20px;
  flex-flow: column wrap;
  align-items: flex-start;
  overflow: hidden;
  position: absolute;
}
.rbc-day-slot .rbc-background-event {
  opacity: 0.75;
}
.rbc-day-slot .rbc-event-label {
  flex: none;
  padding-right: 5px;
  width: auto;
}
.rbc-day-slot .rbc-event-content {
  width: 100%;
  flex: 1 1;
  word-wrap: break-word;
  line-height: 1;
  height: 100%;
  min-height: 1em;
}
.rbc-day-slot .rbc-time-slot {
  border-top: 1px solid #f7f7f7;
}

.rbc-time-view-resources .rbc-time-gutter,
.rbc-time-view-resources .rbc-time-header-gutter {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background-color: white;
  border-right: 1px solid #ddd;
  z-index: 10;
  margin-right: -1px;
}
.rbc-time-view-resources .rbc-time-header {
  overflow: hidden;
}
.rbc-time-view-resources .rbc-time-header-content {
  min-width: auto;
  flex: 1 0;
  flex-basis: 0px;
}
.rbc-time-view-resources .rbc-time-header-cell-single-day {
  display: none;
}
.rbc-time-view-resources .rbc-day-slot {
  min-width: 140px;
}
.rbc-time-view-resources .rbc-header,
.rbc-time-view-resources .rbc-day-bg {
  width: 140px;
  flex: 1 1;
  flex-basis: 0 px;
}

.rbc-time-header-content + .rbc-time-header-content {
  margin-left: -1px;
}

.rbc-time-slot {
  flex: 1 0;
}
.rbc-time-slot.rbc-now {
  font-weight: bold;
}

.rbc-day-header {
  text-align: center;
}

.rbc-slot-selection {
  z-index: 10;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 75%;
  width: 100%;
  padding: 3px;
}

.rbc-slot-selecting {
  cursor: move;
}

.rbc-time-view {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  width: 100%;
  border: 1px solid #ddd;
  min-height: 0;
}
.rbc-time-view .rbc-time-gutter {
  white-space: nowrap;
  text-align: right;
}
.rbc-time-view .rbc-allday-cell {
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  position: relative;
}
.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
  border-left: 1px solid #ddd;
}
.rbc-time-view .rbc-allday-events {
  position: relative;
  z-index: 4;
}
.rbc-time-view .rbc-row {
  box-sizing: border-box;
  min-height: 20px;
}

.rbc-time-header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
}
.rbc-time-header.rbc-overflowing {
  border-right: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header.rbc-overflowing {
  border-right-width: 0;
  border-left: 1px solid #ddd;
}
.rbc-time-header > .rbc-row:first-child {
  border-bottom: 1px solid #ddd;
}
.rbc-time-header > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
}

.rbc-time-header-cell-single-day {
  display: none;
}

.rbc-time-header-content {
  flex: 1 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-header-content {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-header-content > .rbc-row.rbc-row-resource {
  border-bottom: 1px solid #ddd;
  flex-shrink: 0;
}

.rbc-time-content {
  display: flex;
  flex: 1 0;
  align-items: flex-start;
  width: 100%;
  border-top: 2px solid #ddd;
  overflow-y: auto;
  position: relative;
}
.rbc-time-content > .rbc-time-gutter {
  flex: none;
}
.rbc-time-content > * + * > * {
  border-left: 1px solid #ddd;
}
.rbc-rtl .rbc-time-content > * + * > * {
  border-left-width: 0;
  border-right: 1px solid #ddd;
}
.rbc-time-content > .rbc-day-slot {
  width: 100%;
  -ms-user-select: none;
      user-select: none;
  -webkit-user-select: none;
}

.rbc-current-time-indicator {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #74ad31;
  pointer-events: none;
}

.rbc-resource-grouping.rbc-time-header-content {
  display: flex;
  flex-direction: column;
}
.rbc-resource-grouping .rbc-row .rbc-header {
  width: 141px;
}


.quote-page-container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- ENCABEZADOS --- */
.quote-header-block {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 1.5rem;
}

.quote-main-title {
    font-size: 1.2rem;
    color: #888;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.quote-subtitle {
    font-size: 2rem;
    color: #333;
    margin: 0.5rem 0 1rem 0;
    font-weight: 800;
}

/* Badges */
.badges-header {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.status-badge-large {
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
    font-weight: bold;
    color: white;
    font-size: 1rem;
    text-transform: capitalize;
}
.status-en-proceso { background-color: #ffc107; color: #333; }
.status-por-confirmar { background-color: #fd7e14; }
.status-aprobada { background-color: #198754; }
.status-cancelada { background-color: #dc3545; }
.status-pagada { background-color: #198754; border: 2px solid gold; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }

.admin-owner-label {
    background-color: #e7f1ff; color: #0d6efd;
    padding: 5px 15px; border-radius: 20px; font-size: 0.9rem;
    display: inline-block; margin-bottom: 1rem; border: 1px solid #b6d4fe;
}

/* Advertencias */
.warning-box {
    background-color: #fff3cd; border: 1px solid #ffecb5;
    color: #664d03; padding: 1rem; border-radius: 8px; margin-bottom: 2rem;
}
.warning-box ul { margin: 0; padding-left: 1.5rem; }

/* SECCIONES */
.quote-section {
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.quote-section h2 {
    margin-top: 0; padding-bottom: 0.5rem; border-bottom: 3px solid #0d6efd;
    display: inline-block; color: #222; font-size: 1.6rem;
}

/* FORMULARIO */
.event-form { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1.5rem; gap: 1.5rem; margin-top: 1.5rem; }
.form-field { display: flex; flex-direction: column; }
.form-field.full-width { grid-column: 1 / -1; }
.form-field label { margin-bottom: 0.5rem; font-weight: bold; color: #555; font-size: 1.1rem; }
.form-field input, .custom-datepicker {
    width: 100%; padding: 0.8rem; border: 1px solid #ccc;
    border-radius: 4px; font-size: 1.1rem; box-sizing: border-box; background-color: #f8f9fa; cursor: default;
}

/* --- LISTA PRODUCTOS (PC) --- */
.cart-items-list { margin-top: 1.5rem; }

.cart-item {
    display: grid;
    /* Img | Detalles | Cantidad | Total */
    grid-template-columns: 100px 2fr 100px 120px; 
    align-items: center; 
    grid-gap: 1.5rem; 
    gap: 1.5rem; 
    padding: 1.5rem 0; 
    border-bottom: 1px solid #e0e0e0;
}

.cart-item-img-wrapper {
    width: 100px; height: 100px;
    border-radius: 8px; border: 1px solid #ddd;
    overflow: hidden; background-color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.cart-item-img-wrapper img { width: 100%; height: 100%; object-fit: contain; }

.item-details h3 { margin: 0; font-size: 1.2rem; }
.item-details p { margin: 5px 0 0 0; color: #0d6efd; font-weight: 600; }

/* Cantidad Alineada */
.item-quantity-wrapper { text-align: center; }
.qty-label { 
    font-weight: bold; background: #f0f0f0; padding: 5px 10px; 
    border-radius: 6px; font-size: 0.9rem; color: #555; display: inline-block;
}

/* Total Alineado */
.item-total-wrapper { text-align: right; }
.total-price { font-weight: 800; font-size: 1.1rem; color: #333; margin: 0; }

/* --- STAFF (LIMPIO) --- */
.assigned-staff-list { margin-top: 1.5rem; display: grid; grid-gap: 10px; gap: 10px; }
.assigned-staff-item {
    background: #fff; border: 1px solid #e0e0e0; border-left: 4px solid #0d6efd;
    padding: 10px 15px; border-radius: 6px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.staff-details-text { display: flex; align-items: center; gap: 10px; }
.staff-details-text strong { font-size: 1rem; color: #333; }
.staff-role-badge { 
    background-color: #e9ecef; color: #555; padding: 2px 8px; 
    border-radius: 10px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; 
}
.staff-actions-block { display: flex; align-items: center; gap: 15px; }
.staff-pay-info { color: #198754; font-weight: 600; font-size: 0.95rem; }
.btn-remove-staff {
    background: #fff; border: 1px solid #dc3545; color: #dc3545;
    border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 0.9rem; font-weight: bold; transition: all 0.2s;
}
.btn-remove-staff:hover { background: #dc3545; color: white; }
.empty-staff-msg { color: #888; font-style: italic; text-align: center; }

/* --- TRANSPORTE --- */
.transport-widget-container { width: 100%; overflow-x: auto; }

/* --- RESUMEN FINAL (CENTRADO) --- */
.quote-summary-final {
    margin-top: 2rem; padding: 2rem; background: #fff;
    border: 1px solid #e0e0e0; border-radius: 12px;
    /* Centrado */
    display: flex; justify-content: center;
}
.summary-details { width: 100%; max-width: 450px; text-align: center; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.95rem; color: #555; }
.summary-row.extra-cost { color: #198754; font-weight: 600; }
.summary-row.extra-cost.transport { color: #fd7e14; }
.summary-row.total { 
    border-top: 2px solid #eee; padding-top: 12px; margin-top: 10px;
    font-size: 1.4rem; font-weight: 800; color: #333; 
    display: flex; justify-content: space-between;
}
.total-amount { color: #0d6efd; }

/* --- BOTONES DE ACCIÓN (ABAJO Y CENTRADOS) --- */
.quote-actions-centered {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.actions-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

/* Botones Grandes */
.btn-approve-big {
    padding: 12px 24px; border: none; border-radius: 8px;
    background-color: #198754; color: white; font-weight: bold; font-size: 1.1rem; cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.2s;
}
.btn-approve-big:hover { transform: translateY(-2px); }
.btn-approve-big.admin-approve { background-color: #0d6efd; }

.btn-action {
    padding: 10px 20px; border-radius: 6px; font-weight: bold; font-size: 1rem;
    cursor: pointer; border: none; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.btn-action:hover { transform: translateY(-2px); opacity: 0.9; }

.btn-copy { background-color: rgba(6, 60, 255, 0.867); border: 2px solid #0d6efd; color: #ffffff; }
.btn-modify { background-color: #ffc107; color: #333; }
.btn-delete { background-color: #6c757d; color: white; }
.btn-reject { background-color: #dc3545; color: white; }

/* PDF */
.pdf-download-section { margin-top: 3rem; text-align: center; border-top: 1px dashed #ccc; padding-top: 2rem; }
.pdf-download-section h3 { color: #555; margin-bottom: 1.5rem; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; }
.pdf-buttons-row { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.btn-pdf {
    padding: 12px 25px; border: none; border-radius: 8px; cursor: pointer;
    font-size: 1rem; font-weight: bold; display: flex; align-items: center; gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s; text-decoration: none;
}
.btn-pdf:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.btn-pdf-client { background: #00BFA5; color: white; }
.btn-pdf-internal { background: #343a40; color: #ffc107; border: 1px solid #343a40; }

/* --- RESPONSIVE MÓVIL (RESTAURADO) --- */
@media (max-width: 768px) {
    .quote-page-container { padding: 0.5rem; }
    .event-form { grid-template-columns: 1fr; gap: 1rem; }
    .quote-section { padding: 1rem; }

    /* Tarjeta Producto Móvil */
    .cart-item {
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: "imagen info" "imagen footer";
        grid-gap: 12px 15px;
        gap: 12px 15px; 
        padding: 15px; /* Más padding para altura */
    }
    
    .cart-item-img-wrapper {
        grid-area: imagen; width: 80px; height: 80px; align-self: start; 
    }
    
    .item-details { grid-area: info; }
    .item-details h3 { font-size: 1.1rem; margin-bottom: 2px; }
    
    /* Footer Móvil */
    .item-quantity-wrapper { 
        grid-area: footer; justify-self: start; margin-top: 5px; 
    }
    .item-total-wrapper { 
        grid-area: footer; justify-self: end; margin-top: 5px; 
        text-align: right; 
    }
    
    .qty-label { padding: 4px 10px; font-size: 0.9rem; background-color: #f8f9fa; border: 1px solid #ddd; }
    .total-price { font-size: 1.1rem; margin: 0; font-weight: bold; }

    /* Staff Móvil */
    .assigned-staff-item { flex-direction: column; align-items: flex-start; gap: 8px; }
    .staff-actions-block { width: 100%; justify-content: space-between; margin-top: 5px; border-top: 1px dashed #eee; padding-top: 5px; }
    
    /* Botones apilados en móvil */
    .actions-row { flex-direction: column; width: 100%; }
    .btn-action, .btn-approve-big { width: 100%; }
    
    .btn-pdf { width: 100%; justify-content: center; }
}
/* UBICACIÓN: src/components/ADMIN/StaffAssignmentWidget.css */

.staff-widget-container {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 25px; /* Más espacio interno para que respire */
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.widget-title {
    margin-top: 0;
    color: #495057;
    font-size: 1.3rem; /* Título más grande */
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 15px;
}

.staff-add-row {
    display: flex;
    gap: 15px; /* Más separación entre inputs */
    flex-wrap: wrap;
    align-items: center;
}

/* --- INPUTS Y SELECTORES GRANDES --- */
.staff-select {
    flex: 2 1;
    padding: 12px 15px; /* Padding generoso */
    border: 1px solid #ced4da;
    border-radius: 6px;
    min-width: 250px;
    font-size: 1.1rem; /* Letra más grande */
    background-color: white;
    cursor: pointer;
}

.staff-input {
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1.1rem; /* Letra más grande */
}

.staff-input.small { 
    flex: 1 1; 
    min-width: 120px; 
}

/* Wrapper para el signo de pesos */
.money-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-symbol {
    position: absolute;
    left: 12px;
    color: #6c757d;
    font-weight: bold;
    font-size: 1.1rem;
}

.money-input-wrapper input {
    padding-left: 25px;
    width: 130px;
    font-weight: bold;
    color: #198754; /* Verde dinero */
}

/* --- BOTÓN DE ACCIÓN GRANDE --- */
.btn-add-staff-action {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 12px 30px; /* Botón grande */
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-add-staff-action:hover { 
    background-color: #0b5ed7; 
    transform: translateY(-2px);
}

.btn-add-staff-action:active { 
    transform: translateY(0); 
}

.btn-add-staff-action:disabled { 
    background-color: #ccc; 
    cursor: not-allowed; 
    box-shadow: none; 
    transform: none;
}

.staff-dates-hint { 
    margin-top: 15px; 
    color: #6c757d; 
    font-size: 0.95rem; /* Texto de fechas un poco más visible */
    font-style: italic;
}
/* UBICACIÓN: src/components/ADMIN/TransporteWidget.css */

.transporte-widget {
    background-color: #f8f9fa; /* Fondo gris muy suave igual que Staff */
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 25px; /* Más espacio interno */
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.widget-title { 
    margin-top: 0; 
    color: #495057; 
    font-size: 1.3rem; /* Título grande */
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 2px solid #dee2e6; /* Línea gris sutil */
    padding-bottom: 15px; 
}

/* Alerta Volumen (Estilo único de Transporte) */
.volumen-alert {
    padding: 12px 20px; 
    border-radius: 6px; 
    margin-bottom: 20px;
    display: flex; 
    align-items: center; 
    gap: 15px;
    font-size: 1rem;
}
.alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.vol-info { display: flex; flex-direction: column; }

/* --- FORMULARIO (Igualando a Staff) --- */
.transporte-form-row { 
    display: flex; 
    gap: 15px; /* Más separación */
    flex-wrap: wrap; 
    align-items: center; 
    margin-bottom: 20px; 
}

/* Select Grande */
.trans-select { 
    flex: 2 1; 
    padding: 12px 15px; 
    border: 1px solid #ced4da; 
    border-radius: 6px; 
    min-width: 250px; 
    font-size: 1.1rem;
    background-color: white;
    cursor: pointer;
}

/* Inputs Grandes */
.trans-input { 
    padding: 12px 15px; 
    border: 1px solid #ced4da; 
    border-radius: 6px; 
    font-size: 1.1rem;
    flex: 2 1; 
}

/* Input Dinero */
.money-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-symbol {
    position: absolute;
    left: 12px;
    color: #6c757d;
    font-weight: bold;
    font-size: 1.1rem;
    z-index: 10; /* Asegura que se vea */
}

.trans-input.small { 
    width: 130px; 
    padding-left: 25px; /* Espacio para el $ */
    font-weight: bold; 
    color: #198754; /* Verde dinero */
    flex: none; /* No estirar */
}

/* Botón de Acción Grande (Naranja para diferenciar) */
.btn-add-trans { 
    background-color: #fd7e14; /* Naranja Logística */
    color: white; 
    border: none; 
    padding: 12px 30px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 1.1rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-add-trans:hover { background-color: #e36a0d; transform: translateY(-2px); }
.btn-add-trans:disabled { background-color: #ccc; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- LISTA DE ASIGNADOS --- */
.assigned-trans-list { display: grid; grid-gap: 10px; gap: 10px; }

.trans-item {
    background: #fff; 
    border: 1px solid #dee2e6; 
    border-left: 5px solid #fd7e14; /* Borde izquierdo más grueso */
    padding: 12px 20px; 
    border-radius: 6px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.trans-details { display: flex; flex-direction: column; gap: 4px; }
.trans-details strong { color: #333; font-size: 1.1rem; }
.trans-details small { color: #6c757d; font-size: 0.95rem; }

.trans-actions { display: flex; align-items: center; gap: 15px; }

.trans-cost { 
    font-weight: 700; 
    color: #333; 
    font-size: 1.1rem; 
}

.btn-remove-trans { 
    color: #dc3545; 
    background: white; 
    border: 1px solid #dc3545; 
    border-radius: 4px; 
    cursor: pointer; 
    padding: 5px 12px; 
    font-weight: bold; 
    font-size: 0.9rem;
    transition: all 0.2s;
}
.btn-remove-trans:hover { background-color: #dc3545; color: white; }
.feedback-container {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-top: 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.feedback-container h3 { margin-top: 0; color: #333; }
.feedback-container p { color: #666; margin-bottom: 15px; }

/* Estrellas Interactivas */
.star-rating { margin-bottom: 15px; }
.star-btn {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 2rem;
    padding: 0 5px;
    transition: transform 0.2s;
}
.star-btn:hover { transform: scale(1.2); }
.star-btn.on { color: #ffc107; }
.star-btn.off { color: #ccc; }

/* Estrellas Lectura */
.stars-display { font-size: 1.8rem; color: #ffc107; margin-bottom: 10px; }
.star.filled { color: #ffc107; }
.star { color: #ddd; }

.feedback-textarea {
    width: 100%;
    max-width: 500px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    resize: vertical;
    display: block;
    margin: 0 auto 15px auto;
}

.btn-send-feedback {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}
.btn-send-feedback:hover { background-color: #0b5ed7; }

.feedback-comment { font-style: italic; color: #555; font-size: 1.1rem; }
.feedback-date { color: #999; display: block; margin-top: 10px; }
/* Container for the entire page */
.user-details-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    font-family: sans-serif;
}

/* Main page title */
.user-details-container h1 {
    text-align: center;
    margin-bottom: 2.5rem;
    color: #333;
}

/* Loading and global error messages */
.profile-loading,
.profile-error {
    text-align: center;
    font-size: 1.2rem;
    color: #666;
    padding: 3rem 0;
}
.profile-error {
    color: #dc3545;
    font-weight: bold;
}

/* Status message for updates (success/error) */
.update-status {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: bold;
}
.update-status.success {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}
.update-status.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* Style for each section (Personal Info, Password, etc.) */
.profile-section {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Header within each section (Title + Edit button) */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #eee;
}
.profile-section h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

/* --- ¡NUEVO! Contenedor para botones en el header --- */
.section-header-actions {
    display: flex;
    gap: 0.5rem; /* Espacio entre botones si hay más de uno */
}

.edit-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border: 1px solid #0d6efd;
    background-color: transparent;
    color: #0d6efd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.edit-button:hover {
    background-color: #0d6efd;
    color: white;
}

/* --- ¡NUEVO! Botón para Salir de Agencia --- */
.btn-salir-agencia {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border: 1px solid #dc3545; /* Rojo */
    background-color: transparent;
    color: #dc3545;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.btn-salir-agencia:hover {
    background-color: #dc3545;
    color: white;
}
.btn-salir-agencia:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* Static display fields (Label: Value) */
.profile-field {
    display: flex;
    align-items: baseline;
    margin-bottom: 1rem;
    font-size: 1rem;
    padding: 0.3rem 0;
}
.profile-field label {
    font-weight: bold;
    color: #555;
    width: 140px; 
    flex-shrink: 0;
}
.profile-field span {
    color: #333;
    word-break: break-word;
}

/* General styles for edit forms */
.edit-form .form-field {
    display: flex;
    flex-direction: column; 
    margin-bottom: 1.2rem;
}
.edit-form .form-field label {
    width: auto; 
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #555;
}
.edit-form .form-field small {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

/* Input styles */
.edit-form .form-field input[type="text"],
.edit-form .form-field input[type="email"],
.edit-form .form-field input[type="tel"],
.edit-form .form-field input[type="password"] {
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box; 
}
.edit-form .form-field input:focus {
     outline: none;
     border-color: #0d6efd;
     box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* Container for Save/Cancel buttons */
.form-actions {
    display: flex;
    justify-content: flex-end; 
    gap: 0.8rem; 
    margin-top: 1.5rem;
}
.form-actions button {
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    font-weight: 500;
    transition: background-color 0.2s;
}
.save-button {
    background-color: #198754;
    color: white;
}
.save-button:hover {
    background-color: #157347;
}
.cancel-button {
    background-color: #6c757d;
    color: white;
}
.cancel-button:hover {
    background-color: #5a6268;
}


/* Clase especial para centrar la sección de la foto de perfil */
.profile-section-photo {
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* --- Profile Picture Section Styles --- */
.profile-picture-area {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center; 
}

/* Clickable container */
.profile-pic-container {
    width: 150px;  
    height: 150px; 
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background-color: #e9ecef;
    border: 2px solid #dee2e6;
    flex-shrink: 0;
    transition: opacity 0.2s;
    margin-top: 1rem; 
}
.profile-pic-container:hover { opacity: 0.8; }

/* Actual profile image */
.profile-pic-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* Placeholder with initials */
.profile-pic-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #0d6efd;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem; 
    font-weight: bold;
}
.profile-pic-placeholder span { line-height: 1; }


/* Button to confirm upload */
.upload-confirm-button {
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    border: none;
    background-color: #198754;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.upload-confirm-button:hover { background-color: #157347; }
.upload-confirm-button:disabled { background-color: #aaa; cursor: not-allowed; }

/* Small cancel button */
.cancel-button.small {
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
}

/* --- Agency Section --- */
.agency-button:hover {
    background-color: #e2e6ea;
}
.agency-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.agency-button.remove:hover {
    background-color: #f8d7da;
}
.agency-button {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-right: 0.5rem; 
}
.agency-button.remove {
    border-color: #dc3545;
    color: #dc3545;
}

/* Styles for agency verification status */
.agencia-status {
    font-weight: bold;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.85rem;
    display: inline-block;
    border: 1px solid transparent; 
}
.agencia-status.status-verificado { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }
.agencia-status.status-pendiente { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; }
.agencia-status.status-rechazado { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.agencia-status.status-desconocido { color: #414b; background-color: #e2e3e5; border-color: #d3d6d8; }
.agencia-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.agencia-container h1 {
    text-align: center;
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 1.8rem;
}

.agencia-status-box {
    text-align: center;
    margin-bottom: 2rem;
    color: #666;
}

/* Estados */
.agencia-status {
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    display: inline-block;
    margin-left: 0.5rem;
}
.status-verificado { background-color: #d1e7dd; color: #0f5132; }
.status-pendiente { background-color: #fff3cd; color: #664d03; }
.status-rechazado { background-color: #f8d7da; color: #842029; }

/* Barra de Búsqueda */
.agencia-search-bar input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 1rem;
    box-sizing: border-box;
    outline: none;
}
.agencia-search-bar input:focus { border-color: #0d6efd; }

/* Secciones */
.miembros-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.miembros-section h2 {
    font-size: 1.3rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-top: 0;
    color: #444;
}

.miembros-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Ítem de Miembro */
.miembro-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 1rem;
}

.miembro-item:last-child { border-bottom: none; }

.miembro-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 1; 
    min-width: 0; 
}

.miembro-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #0d6efd;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.1rem;
    overflow: hidden;
    flex-shrink: 0;
}
.miembro-avatar img { width: 100%; height: 100%; object-fit: cover; }

.miembro-datos {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.miembro-nombre { font-weight: 700; color: #333; font-size: 1rem; }
.miembro-email { font-size: 0.85rem; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Estilo para mostrar la agencia solicitada (ADMIN) */
.miembro-solicitud-agencia {
    font-size: 0.8rem;
    color: #d68910; /* Naranja oscuro */
    background-color: #fef9e7;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    display: inline-block;
    align-self: flex-start;
}

/* Acciones (Botones) */
.miembro-acciones {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0; 
}

.miembro-acciones button {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-aprobar { background-color: #198754; color: white; }
.btn-rechazar { background-color: #ffc107; color: #333; } 
.btn-sacar { background-color: #dc3545; color: white; } 

.admin-tag {
    background-color: #6f42c1;
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 600px) {
    .miembro-item {
        flex-direction: column; 
        align-items: flex-start;
        gap: 0.8rem;
    }

    .miembro-acciones {
        width: 100%;
        justify-content: flex-end; /* Botones a la derecha */
    }

    /* Botones de Aceptar/Rechazar en pendiente siguen siendo bloques */
    .btn-aprobar, .btn-rechazar {
        flex: 1 1; 
        text-align: center;
        padding: 8px;
    }

    /* ¡CAMBIO IMPORTANTE! Botón Sacar discreto en móvil */
    .btn-sacar {
        flex: 0 0 auto !important; /* No estirar */
        width: auto !important;
        background-color: transparent;
        border: 1px solid #dc3545;
        color: #dc3545;
        padding: 5px 15px;
        font-size: 0.8rem;
    }
    .btn-sacar:active {
        background-color: #ffeef0;
    }
}

/* Notificación y Empty State */
.empty-msg { text-align: center; color: #999; font-style: italic; }
.agencia-empty-state { text-align: center; padding: 3rem; background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.btn-primario { background: #0d6efd; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; margin-top: 1rem; }
.notificacion-rechazo { background: #fff3cd; color: #856404; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; text-align: center; border: 1px solid #ffeeba; }
.btn-limpiar-notificacion { margin-top: 0.5rem; background: #856404; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
/* CONTENEDOR PRINCIPAL */
.preguntas-container {
  padding: 2rem 1rem;
  max-width: 800px;
  margin: 0 auto;
  min-height: 80vh;
  background-color: #f8f9fa;
}

.preguntas-title {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  font-weight: 800;
}

.preguntas-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.empty-state {
  text-align: center;
  color: #666;
  padding: 3rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- TARJETA DE PREGUNTA --- */
.pregunta-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  padding: 1.5rem;
  border-left: 5px solid #0d6efd; /* Borde azul identidad */
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.pregunta-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* HEADER (Producto y Fecha) */
.pregunta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.producto-badge {
  font-weight: 700;
  color: #333;
  background-color: #e9ecef;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fecha-badge {
  font-size: 0.8rem;
  color: #999;
  font-weight: 500;
}

/* CUERPO (La pregunta) */
.pregunta-body {
  margin-bottom: 1.2rem;
}

.label-user {
  font-size: 0.8rem;
  color: #777;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.texto-pregunta {
  margin: 0;
  color: #2c3e50;
  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 500;
}

/* RESPUESTA ADMIN (Verde) */
.respuesta-admin {
  background-color: #e8f5e9; /* Verde menta muy suave */
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid #2ecc71; /* Verde fuerte */
}

.admin-label {
  font-weight: 800;
  color: #27ae60;
  margin-bottom: 6px;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.texto-respuesta {
  margin: 0;
  color: #1e8449;
  line-height: 1.5;
  font-size: 0.95rem;
}

/* ESTADO PENDIENTE (Naranja) */
.respuesta-pendiente {
  color: #d35400; /* Naranja oscuro */
  font-style: italic;
  font-size: 0.9rem;
  background-color: #fff3e0;
  padding: 0.8rem;
  border-radius: 6px;
  text-align: center;
  border: 1px dashed #f39c12;
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 600px) {
  .preguntas-container { padding: 1rem 0.8rem; }
  
  .pregunta-card { padding: 1rem; }

  .pregunta-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .producto-badge { 
    font-size: 0.8rem; 
    width: 100%; 
    text-align: left;
    display: inline-block;
  }
  
  .texto-pregunta { font-size: 1rem; }
}
/* UBICACIÓN: src/pages/EventoDetallePage.css */

.evento-detalle-container {
    padding: 20px 0;
    background-color: #f8f9fa;
    min-height: 100vh;
    overflow-x: hidden; 
}

.evento-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn-back {
    border: none;
    background: white;
    color: #333;
    cursor: pointer;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-weight: bold;
    transition: transform 0.2s;
}

.btn-back:hover { 
    transform: translateX(-5px); 
}

.evento-title {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- MODO CINE HÍBRIDO (SLIDER + THUMBS) --- */
.cinema-mode-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #000;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Área del Slider Grande */
.slider-area {
    width: 100%;
    height: 70vh; 
    margin-bottom: 15px;
    overflow: hidden; 
}

/* Ajustes internos de Slick */
.slider-frame {
    width: 100%;
    height: 70vh;
    display: flex !important; 
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.slider-img-full {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
}

/* Flechas del Slider */
.slick-prev, .slick-next {
    z-index: 20;
    width: 50px;
    height: 50px;
}

.slick-prev { left: 20px; }
.slick-next { right: 20px; }

.slick-prev:before, .slick-next:before { 
    font-size: 40px; 
    opacity: 0.5; 
}

/* CORRECCIÓN PRINCIPAL: Selectores separados para evitar error de minificación */
.slick-prev:hover:before {
    opacity: 1;
}

.slick-next:hover:before {
    opacity: 1;
}

/* --- TIRA DE MINIATURAS --- */
.thumbnails-strip-overlay {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.thumbnails-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 5px;
    scrollbar-width: thin;
    scrollbar-color: #444 #111;
    max-width: 1200px; 
}

.thumb-item {
    min-width: 100px;
    height: 65px;
    cursor: pointer;
    border: 2px solid transparent; 
    opacity: 0.5;
    transition: all 0.3s;
    border-radius: 6px;
    overflow: hidden;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-item:hover { opacity: 0.8; }

/* ESTADO ACTIVO (Sincronizado con Slider) */
.thumb-active {
    opacity: 1;
    border-color: #00BFA5; 
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 191, 165, 0.6);
}

.no-images-text { 
    color: #666; 
    font-size: 1.5rem; 
    display: flex; 
    height: 100%; 
    align-items: center; 
    justify-content: center;
}

/* --- CONTENIDO TEXTO --- */
.evento-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 4rem;
    gap: 4rem;
}

@media (max-width: 900px) {
    .evento-content { grid-template-columns: 1fr; }
    .slider-area, .slider-frame { height: 50vh; }
}

.evento-description h3, .evento-kit h3 { 
    color: #00BFA5; 
    border-bottom: 2px solid #e0e0e0; 
    padding-bottom: 15px; 
    margin-top: 0; 
    font-size: 1.5rem; 
}

.evento-description p { 
    line-height: 1.8; 
    color: #555; 
    font-size: 1.1rem; 
    white-space: pre-line; 
}

.evento-kit { 
    background: white; 
    padding: 2rem; 
    border-radius: 12px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    height: -webkit-fit-content; 
    height: fit-content; 
    border: 1px solid #eee; 
}

.kit-list { 
    list-style: none; 
    padding: 0; 
    margin: 0 0 2rem 0; 
    max-height: 400px; 
    overflow-y: auto; 
}

.kit-list li { 
    padding: 12px 0; 
    border-bottom: 1px solid #f0f0f0; 
    display: flex; 
    align-items: center; 
}

.qty { 
    font-weight: bold; 
    color: #333; 
    margin-right: 15px; 
    background: #e9ecef; 
    padding: 4px 10px; 
    border-radius: 6px; 
    min-width: 40px; 
    text-align: center; 
}

.btn-add-kit { 
    width: 100%; 
    padding: 1.2rem; 
    background-color: #2c3e50; 
    color: white; 
    border: none; 
    border-radius: 8px; 
    font-size: 1.1rem; 
    font-weight: bold; 
    cursor: pointer; 
    transition: background 0.3s, transform 0.2s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
}

.btn-add-kit:hover { 
    background-color: #00BFA5; 
    transform: translateY(-3px); 
}
/* UBICACIÓN: src/pages/VerificarCuentaPage.css */

.verificar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
    background-color: #f9f9f9;
}

.verificar-card {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 450px;
    text-align: center;
}

.verificar-card h2 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 2rem;
}

.verificar-card p {
    color: #666;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #00BFA5; /* Turquesa */
    background-color: #f0fffc;
}

/* Estilo especial para el input del código (letra más grande) */
.input-code {
    letter-spacing: 5px;
    font-size: 1.5rem !important;
    text-align: center;
    font-weight: bold;
    color: #2c3e50;
}

.btn-verificar {
    width: 100%;
    padding: 12px;
    background-color: #00BFA5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-top: 10px;
}

.btn-verificar:hover {
    background-color: #009688;
    transform: translateY(-2px);
}

.btn-verificar:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Mensajes de feedback */
.alert-error {
    background-color: #fdecea;
    color: #dc3545;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    border: 1px solid #f5c6cb;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    border: 1px solid #c3e6cb;
}
/* Archivo: src/pages/LoginPage.css */

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 2rem;
  background-color: #ffffff;
  min-height: 80vh; /* Centrado vertical en pantallas grandes */
}

.login-form {
  width: 100%;
  max-width: 400px;
}

.login-form h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 2rem;
  font-size: 2.5rem;
  color: #333;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group input {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: #e0f7fa;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.3s;
}

.form-group input:focus {
  border-color: #00BFA5; /* Borde turquesa al escribir */
}

.error-message {
  color: #dc3545;
  text-align: center;
  margin-bottom: 1rem;
  font-weight: bold;
}

/* --- BOTÓN CORREGIDO --- */
/* Usamos un nombre único para que no choque con otros botones */
.btn-login-submit {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #ffffff;
  
  /* Color Turquesa de Marca */
  background-color: #00BFA5; 
  
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s;
  margin-top: 1rem;
}

.btn-login-submit:hover {
  background-color: #009688; /* Un poco más oscuro al pasar el mouse */
  transform: translateY(-2px);
}

.btn-login-submit:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}
/* --- LAYOUT GENERAL --- */
.admin-page-container {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-header h1 { 
    color: #2c3e50; 
    margin: 0; 
    font-size: 1.8rem;
}

.btn-add-product {
    background-color: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background 0.3s;
}
.btn-add-product:hover { background-color: #219150; }

/* --- FILTROS --- */
.filters-bar {
    display: flex; 
    gap: 15px; 
    margin-bottom: 20px; 
    background: white; 
    padding: 15px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
    flex-wrap: wrap; 
}

.filter-input, .filter-select { 
    padding: 10px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    font-size: 0.95rem; 
    box-sizing: border-box; 
}
.filter-input { flex: 1 1; min-width: 200px; }

/* --- TABLA (RESPONSIVA CON SCROLL) --- */
.table-responsive-wrapper {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow-x: auto; /* HABILITA SCROLL HORIZONTAL */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    border: 1px solid #eee;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px; /* Ancho mínimo para forzar scroll si la pantalla es chica */
    white-space: nowrap; /* Evita que el texto se rompa en líneas */
}

.admin-table th, .admin-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.admin-table th {
    background-color: #34495e;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* Fijar Encabezado (Opcional, pero útil) */
.sticky-header th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
}

.table-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* --- BADGES (ETIQUETAS DE COLOR) --- */
.badge { 
    padding: 4px 10px; 
    border-radius: 12px; 
    font-size: 0.75rem; 
    font-weight: bold; 
    color: white !important; /* Forzar color de texto blanco */
    text-transform: uppercase;
    display: inline-block;
}

.badge-audio { background-color: #e67e22; }
.badge-video { background-color: #3498db; }

/* Corrección para Iluminación: Cubre variantes */
.badge-iluminacion, 
.badge-iluminación,
.badge-ilum { 
    background-color: #9b59b6; /* Morado */
}

.badge-general { background-color: #95a5a6; }

/* Filas Especiales */
.low-stock-row { background-color: #fff8f8; }
.shortage-row { 
    background-color: #ffe6e6; 
    border-left: 4px solid #dc3545;
}

/* Botones en Tabla */
.action-buttons-row {
    display: flex;
    gap: 8px;
}

.btn-icon-table {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    transition: transform 0.2s;
}
.btn-icon-table.edit:hover { transform: scale(1.2); }
.btn-icon-table.delete { color: #dc3545; }
.btn-icon-table.delete:hover { transform: scale(1.2); }

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
    .admin-page-container { padding: 1rem; }
    
    .admin-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .btn-add-product { width: 100%; }
    
    .filters-bar { flex-direction: column; }
    .filter-input, .filter-select { width: 100%; }

    /* Ajuste para que la tabla no se vea "rota" al scrollear */
    .table-responsive-wrapper {
        border-right: 1px solid #eee; /* Borde visual al final */
    }
}
/* Estilos Base para PC */
.admin-preguntas-container {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.preguntas-header {
  margin-bottom: 2rem;
}

.header-title {
  font-size: 2rem;
  font-weight: 800;
  color: #2c3e50;
  margin: 0;
}

.filters-bar {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.filter-select {
  padding: 0.8rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #555;
  outline: none;
  min-width: 200px;
  background-color: white;
}

/* --- TABLA --- */
.table-responsive {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  overflow: hidden; 
}

.preguntas-table {
  width: 100%;
  border-collapse: collapse;
}

.preguntas-table thead {
  background-color: #2c3e50;
  color: white;
}

.preguntas-table th {
  padding: 1.2rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preguntas-table td {
  padding: 1.2rem 1rem;
  border-bottom: 1px solid #eee;
  vertical-align: top;
  font-size: 0.95rem;
  color: #333;
}

/* Badges */
.category-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
}
.cat-iluminacion { background-color: #9b59b6; }
.cat-audio { background-color: #e67e22; }
.cat-video { background-color: #3498db; }
.cat-general { background-color: #95a5a6; }

.product-name { font-weight: 700; color: #2c3e50; display: block; margin-bottom: 4px; }
.user-info { font-size: 0.85rem; color: #555; line-height: 1.4; }
.user-date { color: #888; font-size: 0.8rem; display: block; margin-top: 2px; }

/* Input Respuesta */
.response-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.2s;
}
.response-input:focus { border-color: #2ecc71; outline: none; }

.btn-send {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  margin-top: 5px;
  font-size: 0.9rem;
  width: 100%; /* Botón ancho en móvil */
}

.response-text {
  color: #27ae60;
  background-color: #eafaf1;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid #2ecc71;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* --- TRANSFORMACIÓN MÓVIL (LA MAGIA) --- */
@media (max-width: 900px) {
  .admin-preguntas-container { padding: 1rem; }
  
  .filters-bar { flex-direction: column; gap: 0.8rem; padding: 1rem; }
  .filter-select { width: 100%; }

  /* Ocultar encabezados de tabla */
  .preguntas-table thead { display: none; }

  /* Convertir tabla en bloques */
  .preguntas-table, .preguntas-table tbody, .preguntas-table tr, .preguntas-table td {
    display: block;
    width: 100%;
  }

  .preguntas-table tr {
    margin-bottom: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    padding: 1rem;
    box-sizing: border-box; 
  }

  .preguntas-table td {
    padding: 0.5rem 0;
    border: none;
    position: relative;
    padding-left: 0;
    text-align: left;
  }

  /* Etiquetas para identificar datos en móvil */
  .preguntas-table td::before {
    content: attr(data-label); /* Usa el atributo data-label del HTML */
    font-weight: 800;
    color: #999;
    font-size: 0.75rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
  }

  /* Ajustes específicos */
  .response-input { min-height: 80px; }
  
  .preguntas-table tr:not(:last-child) {
    border-bottom: 5px solid #f0f2f5; 
  }
}
/* UBICACIÓN: src/pages/AdminFinanzasPage.css */

.finanzas-container {
    padding: 2rem;
    background-color: #f4f6f9;
    min-height: 100vh;
    font-family: 'Segoe UI', sans-serif;
    color: #333;
    overflow-x: hidden; 
}

/* --- HEADER Y FILTROS --- */
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-title { margin: 0; font-size: 1.8rem; font-weight: 700; color: #2c3e50; }

.filters-container { display: flex; gap: 10px; flex-wrap: wrap; }

.filters-container select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: white;
    font-size: 0.95rem;
    cursor: pointer;
}

/* --- TOOLTIPS (LÓGICA FIJA A LA IZQUIERDA) --- */
.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: help;
    margin-left: 8px;
}

.tooltip-icon {
    font-size: 1.1rem;
    opacity: 0.6;
    color: #888;
    transition: color 0.2s;
}
.tooltip-container:hover .tooltip-icon { opacity: 1; color: #333; }

.tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: #2c3e50;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    
    /* POSICIONAMIENTO FORZADO A LA IZQUIERDA */
    /* Esto aplica para TODAS las pantallas */
    position: absolute;
    z-index: 9999;
    bottom: 135%; 
    left: 50%; 
    
    /* Mueve la caja 85% a la izquierda de su propio eje */
    /* Esto garantiza que no se salga por la derecha */
    transform: translateX(-85%); 
    
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 0.85rem;
    line-height: 1.4;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    pointer-events: none;
    white-space: normal; 
}

/* La flechita debe apuntar al icono */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    /* Movemos la flecha a la derecha de la caja para que coincida con el icono */
    left: 85%; 
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #2c3e50 transparent transparent transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    bottom: 125%; 
}

/* --- KPIs --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-left: 5px solid transparent;
    transition: transform 0.2s;
    
    position: relative; 
    overflow: visible; 
    z-index: 1;
}

/* Elevación al hover */
.kpi-card:hover { 
    transform: translateY(-5px); 
    z-index: 100; /* Tooltip siempre arriba */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.kpi-card h3 { margin: 0; color: #666; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.kpi-value { font-size: 1.8rem; font-weight: bold; margin: 0.5rem 0; color: #333; word-break: break-word; }

.card-green { border-left-color: #198754; } .card-green .kpi-value { color: #198754; }
.card-orange { border-left-color: #fd7e14; } .card-orange .kpi-value { color: #fd7e14; }
.card-blue { border-left-color: #0d6efd; }
.card-dark { border-left-color: #343a40; }

/* --- GRÁFICAS --- */
.charts-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    grid-gap: 2rem; 
    gap: 2rem; 
    margin-bottom: 2rem; 
}

.chart-box { 
    background: white; 
    padding: 1.5rem; 
    border-radius: 10px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    width: 100%; 
    overflow: hidden; 
}

.chart-box h3 { 
    margin-top: 0; 
    margin-bottom: 1.5rem; 
    color: #444; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 10px; 
    font-size: 1.1rem; 
}

.chart-wrapper { 
    height: 300px; 
    width: 100%; 
    position: relative; 
}

/* --- TABLAS --- */
.tables-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-gap: 2rem; 
    gap: 2rem; 
    margin-bottom: 2rem; 
}

.full-width-table { width: 100%; }

.table-box { 
    background: white; 
    padding: 1.5rem; 
    border-radius: 10px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    overflow-x: auto; 
}

.table-box h3 { 
    margin-top: 0; 
    margin-bottom: 1rem; 
    color: #333; 
    font-size: 1.1rem; 
    border-bottom: 2px solid #eee; 
    padding-bottom: 8px;
}

.analysis-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 0.9rem; 
    min-width: 400px; 
}

.analysis-table th { 
    color: #666; 
    font-size: 0.8rem; 
    border-bottom: 2px solid #eee; 
    padding: 12px 10px; 
    text-transform: uppercase; 
    white-space: nowrap;
    text-align: center; /* Default Centrado */
}

.analysis-table td { 
    padding: 12px 10px; 
    border-bottom: 1px solid #f1f1f1; 
    color: #444; 
    vertical-align: middle;
    text-align: center; /* Default Centrado */
}

/* REGLA DE ORO: Primera columna (Producto) a la Izquierda */
.analysis-table th:first-child,
.analysis-table td:first-child {
    text-align: left;
    width: 40%;
}

/* --- ESTILOS DE CELDA COMPLETA (Highlight) --- */
/* Se aplican directamente al TD */
.td-green { 
    background-color: #e8f5e9; 
    color: #198754; 
    font-weight: bold; 
}

.td-red { 
    background-color: #fce8e6; 
    color: #dc3545; 
    font-weight: bold; 
}

/* --- BADGES ROI --- */
.roi-badge { 
    padding: 4px 8px; 
    border-radius: 12px; 
    font-size: 0.85rem; 
    font-weight: bold; 
    color: white; 
    display: inline-block; 
    min-width: 55px; 
}
.roi-good { background-color: #198754; } 
.roi-mid { background-color: #ffc107; color: #333; } 
.roi-bad { background-color: #dc3545; } 

.text-danger { color: #dc3545; }
.text-muted { color: #888; font-size: 0.85rem; }
.bold-text { font-weight: bold; color: #333; }

/* Responsive */
@media (max-width: 1100px) {
    .charts-grid { grid-template-columns: 1fr; } 
    .tables-grid { grid-template-columns: 1fr; } 
}

@media (max-width: 600px) {
    .finanzas-container { padding: 1rem; }
    .header-flex { flex-direction: column; align-items: flex-start; }
    .kpi-grid { grid-template-columns: 1fr; }
    
    /* NOTA: Ya no centramos el tooltip en móvil, 
       se queda a la izquierda para mantener la consistencia solicitada. */
}

.kpi-subtext {
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
    border-top: 1px solid #eee;
    padding-top: 5px;
}

/* UBICACIÓN: src/pages/AdminFinanzasPage.css */

/* ... (Estilos anteriores) ... */

/* --- SCROLL PARA GRÁFICA --- */
.chart-scroll-container {
    width: 100%;
    overflow-x: auto; /* Permite scroll horizontal */
    padding-bottom: 10px; /* Espacio para la barra de scroll */
}

/* Estiliza la barra de scroll (opcional, para Chrome/Safari) */
.chart-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.chart-scroll-container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

.chart-inner-wrapper {
    height: 300px;
    position: relative;
    /* El ancho se define dinámicamente en JS (inline style) */
}

/* La gráfica circular no necesita scroll, usa el wrapper normal */
.chart-wrapper { 
    height: 300px; 
    width: 100%; 
    position: relative; 
}

/* ... Estilos anteriores ... */

.card-green { border-left-color: #198754; } .card-green .kpi-value { color: #198754; }
.card-orange { border-left-color: #fd7e14; } .card-orange .kpi-value { color: #fd7e14; }
.card-blue { border-left-color: #0d6efd; }
.card-dark { border-left-color: #343a40; }

/* [NUEVO] Estilo para Gastos (Rojo) */
.card-red { border-left-color: #dc3545; } 
.card-red .kpi-value { color: #dc3545; }

/* [NUEVO] Estilo para Utilidad (Morado o Dorado) */
.card-gold { border-left-color: #d4af37; } 
.card-gold .kpi-value { color: #d4af37; }

/* ... Resto de estilos ... */
/* UBICACIÓN: src/pages/AdminCrearEventoPage.css */

.admin-event-container {
    max-width: 850px;
    margin: 2rem auto;
    padding: 2.5rem;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.admin-event-container h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 2rem;
    font-size: 1.8rem;
}

/* --- SECCIONES --- */
.form-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.form-section h3 {
    margin-top: 0;
    color: #00BFA5;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0.8rem;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

/* --- INPUTS --- */
.input-group {
    margin-bottom: 1.2rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}

.admin-event-form input[type="text"],
.admin-event-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.3s;
}

.admin-event-form input[type="text"]:focus,
.admin-event-form textarea:focus {
    border-color: #00BFA5;
    outline: none;
}

/* 1. TEXTAREA SOLO VERTICAL */
.admin-event-form textarea {
    resize: vertical;
    min-height: 100px;
}

/* --- MULTIMEDIA PREVIEWS --- */
.upload-block {
    margin-bottom: 2rem;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 1.5rem;
}
.upload-block:last-child { border-bottom: none; }

.upload-label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.file-input {
    margin-bottom: 1rem;
}

/* Preview Portada */
.preview-box p { margin: 0 0 5px 0; font-size: 0.85rem; color: #666; }
.img-preview-cover {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
}

/* Preview Galería (Grid) */
.gallery-grid-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.img-preview-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ddd;
}

/* --- 2. BUSCADOR ALINEADO --- */
.import-section {
    background-color: #e3f2fd;
    border-color: #bbdefb;
}

.import-box {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
    align-items: center; /* Alineación Vertical */
}

.import-box input {
    flex: 1 1; /* Ocupa el espacio restante */
    margin: 0; /* Quitar márgenes extra */
    height: 45px; /* Altura forzada para igualar botón */
}

.btn-import {
    background-color: #2196F3;
    color: white;
    border: none;
    padding: 0 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    height: 45px; /* Misma altura que el input */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.btn-import:hover { background-color: #1976D2; }

/* Listas de resultados */
.search-results-list {
    background: white;
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 1rem;
    border-radius: 4px;
}
.search-results-list ul { list-style: none; padding: 0; margin: 0; }
.search-results-list li { padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; }
.search-results-list li:hover { background-color: #f1f1f1; }

.imported-list {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    border: 1px dashed #2196F3;
    margin-top: 10px;
}
.imported-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
}
.imported-list li {
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
}

/* Botón Final */
.btn-save-event {
    display: block;
    width: 100%;
    padding: 1rem;
    background-color: #00BFA5;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(0, 191, 165, 0.3);
}

.btn-save-event:hover {
    background-color: #009688;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 191, 165, 0.4);
}

.btn-save-event:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
/* --- CONTENEDOR GENERAL --- */
.admin-page-container {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1400px;
    margin: 0 auto;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-header h1 {
    color: #2c3e50;
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
}

.btn-add-event {
    background-color: #27ae60;
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(39, 174, 96, 0.2);
}

.btn-add-event:hover {
    background-color: #219150;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(39, 174, 96, 0.3);
}

/* --- GRILLA DE EVENTOS (LA SOLUCIÓN REAL) --- */
.events-grid {
    display: grid;
    /* Ajuste automático: mínimo 300px por tarjeta, máximo lo que quepa */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
    padding-bottom: 2rem;
}

/* --- TARJETA DE EVENTO --- */
.event-card-admin {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    flex-direction: column; /* Asegura que el footer se quede abajo */
}

.event-card-admin:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* IMAGEN */
.card-image-wrapper {
    width: 100%;
    height: 180px; /* Altura fija para uniformidad */
    position: relative;
    background-color: #eee;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-card-admin:hover .card-overlay { opacity: 1; }

.click-hint {
    color: white;
    font-weight: bold;
    border: 2px solid white;
    padding: 5px 15px;
    border-radius: 20px;
    background: rgba(0,0,0,0.5);
}

/* CONTENIDO */
.card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title {
    margin: 0 0 0.8rem 0;
    font-size: 1.25rem;
    color: #1a202c;
    font-weight: 700;
    line-height: 1.4;
}

.card-desc {
    font-size: 0.95rem;
    color: #718096;
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
    flex-grow: 1; /* Empuja los botones hacia abajo */
    
    /* Truncar texto largo */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ACCIONES (BOTONES) */
.card-actions {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

.btn-action {
    flex: 1 1;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-edit {
    background-color: #fff;
    border-color: #d1d5db;
    color: #4b5563;
}
.btn-edit:hover { background-color: #f3f4f6; color: #111; }

.btn-delete {
    background-color: #fee2e2;
    color: #991b1b;
    border: none;
}
.btn-delete:hover { background-color: #fecaca; }

/* ESTADOS DE CARGA */
.loading-state, .empty-state {
    text-align: center;
    padding: 4rem;
    color: #666;
    font-size: 1.2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
    .admin-page-container {
        padding: 1rem;
    }

    .admin-header {
        flex-direction: column;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .events-grid {
        grid-template-columns: 1fr; /* Una columna en móvil */
        gap: 1.5rem;
    }

    .event-card-admin {
        max-width: 400px; /* Ancho máximo para que no se vea gigante */
        margin: 0 auto; /* Centrado */
        width: 100%;
    }
}
.admin-reportes-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', sans-serif;
}

.admin-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 1rem;
}

.reportes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

/* Tarjeta Base */
.reporte-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s;
}

.reporte-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* Bordes según tipo */
.reporte-card.tipo-error { border-left: 5px solid #dc3545; }
.reporte-card.tipo-sugerencia { border-left: 5px solid #ffc107; }
.reporte-card.tipo-otro { border-left: 5px solid #0d6efd; }

/* Estado Resuelto (Opaco) */
.reporte-card.resuelto {
    opacity: 0.6;
    background-color: #f8f9fa;
    border-left-color: #198754; /* Verde */
}

.reporte-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.badge-tipo {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
}
.badge-tipo.error { background-color: #dc3545; }
.badge-tipo.sugerencia { background-color: #ffc107; color: #333; }
.badge-tipo.otro { background-color: #0d6efd; }

/* ... Estilos anteriores ... */

.reporte-msg {
    font-size: 1rem;
    color: #333;
    font-style: italic;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    
    /* CORRECCIÓN: Romper textos largos */
    word-break: break-word; 
    overflow-wrap: break-word;
    white-space: pre-wrap; /* Respeta saltos de línea */
}

/* ... Resto del CSS ... */

.reporte-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.reporte-info {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    color: #6c757d;
}

.btn-check {
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-solve { background-color: #198754; color: white; }
.btn-solve:hover { background-color: #157347; }

.btn-undo { background-color: #6c757d; color: white; }
.btn-undo:hover { background-color: #5a6268; }

.no-data { text-align: center; color: #777; width: 100%; grid-column: 1 / -1; margin-top: 2rem; }
.admin-staff-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', sans-serif;
}

.staff-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 1rem;
    flex-wrap: wrap; /* Para móviles */
    gap: 15px;
}

/* Agrupador de botones */
.header-actions {
    display: flex;
    gap: 15px;
}

.btn-add-staff {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}
.btn-add-staff:hover { background-color: #0b5ed7; }

/* Nuevo Botón PDF */
.btn-download-pdf {
    background-color: #6c757d; /* Gris profesional */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}
.btn-download-pdf:hover { background-color: #5a6268; }
.btn-download-pdf:disabled { background-color: #ccc; cursor: not-allowed; }

/* GRID DE TARJETAS */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

.staff-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s;
    position: relative;
}
.staff-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.staff-card.inactive { opacity: 0.6; background-color: #f8f9fa; }

.staff-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.staff-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #eee;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.staff-info h3 { margin: 0; color: #333; font-size: 1.1rem; }
.staff-role { color: #666; font-size: 0.9rem; font-style: italic; }

.staff-details p { margin: 5px 0; font-size: 0.9rem; color: #555; }
.debt-highlight { color: #dc3545; font-weight: bold; }
.no-debt { color: #198754; font-weight: bold; }

.staff-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.btn-icon {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.9rem;
    flex: 1 1;
}
.btn-icon:hover { background-color: #f1f1f1; }
.btn-toggle { color: #dc3545; border-color: #dc3545; }
.btn-toggle:hover { background-color: #dc3545; color: white; }

/* MODAL */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; gap: 15px; margin-bottom: 15px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }
.form-group input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;}

.preview-box { display: flex; gap: 10px; margin-top: 5px; }
.preview-img { width: 100px; height: 60px; object-fit: cover; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;}

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.btn-cancel { background: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
.btn-save { background: #198754; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
.admin-pagos-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', sans-serif;
    background-color: #f4f6f9;
    min-height: 85vh;
}

/* TARJETAS DE RESUMEN */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    border-left: 5px solid #ccc;
}

.stat-card.pending { border-left-color: #dc3545; } /* Rojo */
.stat-card.paid { border-left-color: #198754; }    /* Verde */

.stat-title { font-size: 0.9rem; color: #666; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
.stat-value { font-size: 1.8rem; font-weight: bold; color: #333; }

/* BARRA DE FILTROS */
.filters-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.search-input-large {
    flex: 1 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    min-width: 200px;
}

.filter-select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
}

/* TABLA */
.pagos-table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow-x: auto;
}

.pagos-table {
    width: 100%;
    border-collapse: collapse;
}

.pagos-table th, .pagos-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.pagos-table th {
    background-color: #f8f9fa;
    color: #555;
    font-weight: 600;
}

.pagos-table tr:hover { background-color: #fcfcfc; }

/* BADGES Y BOTONES */
.badge {
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}
.badge.pendiente { background-color: #ffe5e5; color: #dc3545; }
.badge.pagado { background-color: #d1e7dd; color: #198754; }

.btn-pay {
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.btn-pay.do-pay { background-color: #198754; color: white; }
.btn-pay.do-pay:hover { background-color: #146c43; }

.btn-pay.undo-pay { background-color: #6c757d; color: white; opacity: 0.7; }
.btn-pay.undo-pay:hover { opacity: 1; }

.text-amount { font-family: 'Consolas', monospace; font-weight: bold; }
.evento-link { color: #0d6efd; text-decoration: none; font-weight: 500;}
.evento-link:hover { text-decoration: underline; }

/* Forzar que el enlace del evento sea siempre del color deseado */
.evento-link {
  color: #0d6efd !important; /* Azul Bootstrap (o el color que prefieras, ej: #333 para negro) */
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.evento-link:hover {
  color: #0043a8 !important; /* Azul más oscuro al pasar el mouse */
  text-decoration: underline;
}

.evento-link:visited {
  color: #0d6efd !important; /* Mantiene el color original aunque ya lo hayas visitado */
}
.admin-vehiculos-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', sans-serif;
}

.vehiculos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 1rem;
}

.btn-add-vehiculo {
    background-color: #fd7e14; /* Naranja para Logística */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-add-vehiculo:hover { background-color: #e36a0d; }

/* GRID TARJETAS */
.vehiculos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

.vehiculo-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s;
    border-top: 4px solid #fd7e14; /* Acento naranja */
}
.vehiculo-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

.vehiculo-icon-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.vehiculo-icon-circle {
    width: 50px; height: 50px;
    background-color: #fff4e6; /* Fondo naranja muy claro */
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.5rem;
    border: 1px solid #ffe8cc;
}

.vehiculo-info h3 { margin: 0; color: #333; font-size: 1.1rem; }
.vehiculo-placa { 
    font-size: 0.85rem; 
    color: #666; 
    background-color: #f1f1f1; 
    padding: 2px 6px; 
    border-radius: 4px; 
    font-family: monospace; 
    border: 1px solid #ddd;
}

.vehiculo-details {
    margin-bottom: 15px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

.detail-row {
    display: flex; justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.95rem;
    color: #555;
}

.vehiculo-actions {
    display: flex; gap: 10px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.btn-icon {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.9rem;
    flex: 1 1;
    transition: all 0.2s;
}
.btn-icon:hover { background-color: #f8f9fa; }

.btn-delete-action { color: #dc3545; border-color: #dc3545; }
.btn-delete-action:hover { background-color: #dc3545; color: white; }

/* MODAL (Reutilizando estilos comunes o definiéndolos aquí) */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; gap: 15px; margin-bottom: 15px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }
.form-group input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;}

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.btn-cancel { background: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
.btn-save { background: #fd7e14; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; }
/* En: src/index.css */
/* ¡REEMPLAZA ESTE ARCHIVO COMPLETO! */

body {
  margin: 0;
  padding: 0; /* Añadido para un reseteo completo */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}

*, *::before, *::after {
  box-sizing: inherit; /* Hereda el box-sizing a todos los elementos */
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/*# sourceMappingURL=main.05d6b20b.css.map*/