/* 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;
  height: 100%;
}

/* Layout principal de la aplicación */
.App {
  width: 100%; 
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
  /* El contenedor principal sigue al body (negro) para evitar bordes raros,
     pero el contenido interno lo pintaremos de blanco abajo */
  background-color: #000000; 
}

/* Regla para que el contenido principal crezca y SEA BLANCO */
main {
  flex-grow: 1; 
  margin: 0;
  display: flex;
  flex-direction: column;
  
  /* --- CAMBIO CLAVE --- */
  /* Pintamos el área de contenido de BLANCO PURO. 
     Esto tapa el fondo negro del body, excepto en el footer y header */
  background-color: #ffffff; 
  width: 100%;
  position: relative;
  z-index: 1; /* Asegura que esté por encima del fondo base */
}
/* ESTRUCTURA GENERAL */
.header-container {
  background-color: #000000;
  padding: 0.7rem 0;
  border-bottom: 1px solid #1a1a1a;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2000;
  width: 100%;
  box-sizing: border-box;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto; 
  padding: 0 1.5rem;
  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;
}

.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: -8px;    /* Un poco más arriba para que destaque */
  right: -8px;  /* Un poco más a la derecha */
  background-color: #0d6efd; /* Azul Bootstrap */
  color: white;
  border-radius: 50%;
  width: 22px;  /* Ligeramente más grande */
  height: 22px;
  font-size: 0.8rem;
  font-weight: 800; /* Extra negrita */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  border: 2px solid #000; /* Borde negro para separar del icono */
  z-index: 10;
  
  /* ANIMACIÓN ACTIVA SIEMPRE QUE NACE EL COMPONENTE */
  animation: pop-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- ANIMACIÓN DE BRINCO ELÁSTICO --- */
@keyframes pop-bounce {
    0% { transform: scale(0); opacity: 0; } /* Nace de la nada */
    50% { transform: scale(1.4); }          /* Crece un 40% más */
    100% { transform: scale(1); opacity: 1; } /* Vuelve a tamaño normal */
}

/* --- 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;
  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; }
  
  .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; }

  .dropdown-menu-box {
    position: fixed;
    top: 60px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: 80vh;
    overflow-y: auto;
  }
}
/* Footer.css */

.footer-container {
  background-color: #000000;
  color: #686868;
  padding: 2rem 1.5rem;
  border-top: 1px solid #1a1a1a;
  width: 100%;
  /* CRÍTICO: Asegura que el borde y padding estén dentro del ancho */
  box-sizing: border-box; 
  /* Eliminamos márgenes externos que causan líneas blancas */
  margin: 0; 
  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 {
    /* TRUCO: Usamos padding extra SOLO si es necesario por la barra de navegación del móvil */
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }

  .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 inferior derecha */
.buzon-widget-contenedor {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 10000; /* Z-index alto para estar sobre todo */
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* --- BOTÓN FLOTANTE (FAB) --- */
.buzon-boton-flotante {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #0d6efd;
    color: white;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
}

.buzon-boton-flotante:hover {
    background-color: #0b5ed7;
    transform: scale(1.1);
}

.buzon-boton-flotante.abierto {
    background-color: #dc3545; /* Rojo al estar abierto */
    transform: rotate(180deg);
}

/* --- CAJA DEL FORMULARIO --- */
.buzon-formulario-caja {
    background-color: white;
    /* Ancho aumentado para que no se vea apretado */
    width: 300px; 
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    margin-bottom: 15px;
    border: 1px solid #f0f0f0;
    
    /* Animación de entrada */
    animation: buzonSlideUp 0.3s ease-out;
    transform-origin: bottom right;
    
    /* CRÍTICO: Para que los inputs no se salgan */
    box-sizing: border-box;
}

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

/* Encabezado del Widget */
.buzon-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.buzon-encabezado h4 {
    margin: 0;
    color: #333;
    font-size: 1rem;
    font-weight: 700;
}

.buzon-btn-cerrar {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 0 5px;
}

.buzon-btn-cerrar:hover { color: #dc3545; }

/* Campos del Formulario */
.buzon-grupo {
    margin-bottom: 12px;
    width: 100%; /* Asegura ancho completo */
}

.buzon-grupo label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
}

/* Estilos compartidos para Select y Textarea */
.buzon-grupo select, 
.buzon-grupo textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    background-color: #f9f9f9;
    transition: border 0.2s;
    
    /* CRÍTICO: Evita que el padding rompa el ancho */
    box-sizing: border-box; 
}

.buzon-grupo select:focus, 
.buzon-grupo textarea:focus {
    border-color: #0d6efd;
    background-color: #fff;
    outline: none;
}

.buzon-grupo textarea {
    resize: vertical; /* Permite redimensionar solo verticalmente */
    min-height: 80px;
}

/* Botón de Enviar */
.buzon-btn-enviar {
    width: 100%;
    padding: 10px;
    background-color: #198754;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 5px;
}

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

.buzon-btn-enviar: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: 3rem; /* Espacio entre filas de categorías */
    width: 100%;
    background-color: #fff; /* Asegurar fondo blanco */
}

/* --- ENCABEZADO DE CATEGORÍA --- */
.category-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0 1.5rem; 
}

.category-row-title {
    font-size: 1.8rem;
    margin: 0;
    color: #1a1a1a;
    font-weight: 700;
    /* Decoración visual pequeña */
    border-left: 5px solid #0d6efd;
    padding-left: 10px;
}

.see-more-link {
    text-decoration: none;
    color: #0d6efd;
    font-weight: bold;
    font-size: 0.95rem;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}

.see-more-link:hover {
    transform: translateX(5px); /* Efecto de flecha moviéndose */
}

/* --- CONTENEDOR DE SCROLL HORIZONTAL --- */
.products-scroll-container {
    display: flex;
    /* CRÍTICO: Permite que los elementos se desborden horizontalmente */
    overflow-x: auto; 
    gap: 1.2rem;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem; /* Padding bottom extra para la sombra de las cards */
    scroll-behavior: smooth;
    
    /* Ocultar barra de scroll fea pero mantener funcionalidad */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Ocultar barra en Chrome/Safari */
.products-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Wrapper de cada tarjeta para que no se encoja */
.category-item-wrapper {
    flex: 0 0 auto; /* No encoger, no crecer, ancho automático */
    width: 200px;   /* Ancho base en PC */
}

/* Badge de Oculto (Estilo extraído para limpieza) */
.badge-oculto {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    background-color: #dc3545;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
    .category-row {
        margin-bottom: 2rem;
    }

    .category-row-header {
        padding: 0 1rem;
    }
    
    .category-row-title {
        font-size: 1.4rem;
    }

    .products-scroll-container {
        padding: 0.5rem 1rem 1.5rem 1rem;
        gap: 1rem;
    }

    /* En móvil las tarjetas pueden ser un poco más chicas para ver más contexto */
    .category-item-wrapper {
        width: 160px; 
    }
}
/* UBICACIÓN: src/pages/CatalogPage.css */

.catalog-page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 2rem;
  padding-bottom: 4rem;
  
  /* CRÍTICO: Fondo blanco para tapar el fondo negro del body */
  background-color: #ffffff; 
  
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
}

.catalog-main-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #333;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
  .catalog-page-container {
    padding-top: 1rem;
    /* En móvil quitamos padding lateral del contenedor principal 
       para que el scroll horizontal de los productos toque los bordes de la pantalla */
    padding-left: 0;
    padding-right: 0;
  }

  .catalog-main-title {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    padding: 0 1rem; /* Padding solo al título para que no se pegue al borde */
  }
}
/* UBICACIÓN: src/pages/CategoryPage.css */

.category-page-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    /* Fondo blanco para que coincida con el tema global */
    background-color: #ffffff;
    min-height: 100%;
}

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

/* --- GRID PARA PC (FORZADO A MÚLTIPLES COLUMNAS) --- */
.product-grid {
    display: grid;
    grid-gap: 2rem;
    gap: 2rem;
    /* EN LUGAR DE AUTO-FILL (que fallaba), FORZAMOS 4 COLUMNAS EN PC.
       Así garantizamos que no se vea una sola columna hacia abajo.
    */
    grid-template-columns: repeat(4, 1fr);
}

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

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

/* BOTÓN CARGAR MÁS */
.load-more-container {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.btn-load-more {
    padding: 12px 30px;
    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;
}

.btn-load-more:hover {
    background-color: #0d6efd;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);
}

/* --- RESPONSIVE: AJUSTES PARA PANTALLAS MEDIANAS (TABLETS/LAPTOPS PEQUEÑAS) --- */
@media (max-width: 1024px) {
    .product-grid {
        /* En pantallas medianas bajamos a 3 columnas */
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

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

    .product-grid {
        /* Forzamos 2 columnas exactas en móvil */
        grid-template-columns: repeat(2, 1fr);
        gap: 12px; /* Espacio reducido para móvil */
    }
}
.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%; }
}

/* --- EFECTO DE BRINCO Y ESTILO VISTOSO --- */

/* 1. Definimos la animación de brinco */
@keyframes pop-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); } /* Crece al 130% */
    100% { transform: scale(1); }
}

/* 2. Clase que activa la animación */
.pop-anim {
    animation: pop-bounce 0.3s ease-in-out;
}

/* 3. Hacemos el número más vistoso y azul */
.cart-page-container .quantity-selector input {
    width: 45px; 
    text-align: center; 
    border: none; 
    border-left: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    background: white; 
    height: 100%;
    
    /* CAMBIOS NUEVOS: */
    color: #0d6efd;       /* Azul Bootstrap */
    font-weight: 800;     /* Extra Negrita */
    font-size: 1.3rem;    /* Más grande */
    font-family: 'Segoe UI', sans-serif;
    transition: color 0.2s ease;
}

/* Opcional: Efecto al presionar los botones + y - */
.cart-page-container .quantity-selector button:active {
    background-color: #e9ecef;
    transform: scale(0.95);
}
@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: 0 auto;
    padding: 2rem;
    font-family: 'Segoe UI', sans-serif;
    min-height: 100%;
    background-color: #fff;
    /* CRÍTICO: Evita que el padding rompa el ancho en móvil */
    box-sizing: border-box;
    width: 100%;
}

.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; 
    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 MÓVIL OPTIMIZADO --- */
@media (max-width: 768px) {
    .user-cotizaciones-container {
        /* Reducir padding en móvil para ganar espacio */
        padding: 1rem; 
        width: 100%;
        margin: 0;
        /* Evitar scroll horizontal de toda la página */
        overflow-x: hidden; 
    }

    .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; 
        /* Asegurar que la tarjeta no sea más ancha que la pantalla */
        width: 100%;
        box-sizing: border-box;
    }
    
    .cotizacion-status { 
        align-items: flex-start; 
        flex-direction: row; 
        justify-content: space-between; 
        flex-wrap: wrap; 
        width: 100%;
    }
    
    .badges-container { flex-wrap: wrap; }
    
    .search-bar-wrapper {
        width: 100%;
        max-width: 100%;
    }
    .cotizacion-search-input {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 600px) {
    .filters-top-row { flex-direction: column; align-items: stretch; }
    .search-bar-wrapper, .date-filters { width: 100%; max-width: 100%; }
    
    .date-filters { justify-content: center; gap: 15px; }
    .filter-select { flex: 0 1 auto; width: 42%; }
}
@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; }
}
/* --- CONTENEDOR PRINCIPAL --- */
.staff-widget-container {
    background-color: #f8f9fa; /* Fondo gris suave */
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 25px;
    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;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 15px;
}

/* --- FORMULARIO DE AGREGAR (FLEXBOX) --- */
.staff-add-row {
    display: flex;
    gap: 15px; /* Separación entre elementos */
    flex-wrap: wrap; /* Permitir que bajen si no caben */
    align-items: center;
    margin-bottom: 15px;
}

/* --- INPUTS Y SELECTORES (ESTILOS GRANDES) --- */
.staff-select {
    flex: 2 1; /* Ocupa doble espacio */
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    min-width: 250px;
    font-size: 1.1rem;
    background-color: white;
    cursor: pointer;
}

.staff-input {
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1.1rem;
}

/* Input de "Rol" */
.staff-input.small { 
    flex: 1 1; 
    min-width: 150px;
}

/* Wrapper para el signo de pesos y el input de costo */
.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;
}

/* Input específico de Costo */
.staff-input.cost-input {
    width: 140px; /* Ancho fijo para el dinero */
    padding-left: 25px; /* Espacio para el $ */
    font-weight: bold; 
    color: #198754; /* Verde dinero */
    flex: none; /* No estirar */
}

/* --- BOTÓN DE ACCIÓN (+ Asignar) --- */
.btn-add-staff-action {
    background-color: #0d6efd; /* Azul Staff */
    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);
    min-width: 120px;
}

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

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

/* --- TEXTO DE FECHAS --- */
.staff-dates-hint { 
    margin-top: 10px; 
    color: #6c757d; 
    font-size: 0.9rem;
    font-style: italic;
}

/* --- LISTA DE ASIGNADOS (ESTILO TRANSPORTE) --- */
.list-subtitle {
    margin-top: 25px;
    margin-bottom: 15px;
    color: #6c757d;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
}

.assigned-staff-list {
    display: grid;
    grid-gap: 10px;
    gap: 10px;
}

.staff-item {
    background: #fff; 
    border: 1px solid #dee2e6; 
    border-left: 5px solid #0d6efd; /* Borde izquierdo AZUL */
    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);
    transition: transform 0.2s;
}

.staff-item:hover {
    transform: translateX(2px);
}

.staff-details { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
}

.staff-details strong { 
    color: #333; 
    font-size: 1.1rem; 
}

.staff-details small { 
    color: #6c757d; 
    font-size: 0.95rem; 
}

/* Bloque derecho (Costo + Botón) */
.staff-actions { 
    display: flex; 
    align-items: center; 
    gap: 20px; /* Separación entre precio y botón */
}

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

/* BOTÓN QUITAR (Estilo Transporte) */
.btn-remove-staff { 
    color: #dc3545; /* Rojo */
    background: white; 
    border: 1px solid #dc3545; 
    border-radius: 4px; 
    cursor: pointer; 
    padding: 6px 15px; 
    font-weight: bold; 
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-remove-staff:hover { 
    background-color: #dc3545; 
    color: white; 
}
/* 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; }
/* UBICACIÓN: src/pages/UserDetallesPage.css */

/* Container for the entire page */
.user-details-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    font-family: sans-serif;
    box-sizing: border-box;
    width: 100%;
}

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

/* --- LAYOUT GRID PARA PC --- */
/* Creamos un layout de 2 columnas asimétricas: 
   Columna Izq: Foto 
   Columna Der: Formularios */
.user-details-layout {
    display: grid;
    grid-template-columns: 300px 1fr; /* Foto fija, resto flexible */
    grid-gap: 3rem;
    gap: 3rem;
    align-items: start;
}

/* Clase especial para la sección de foto */
.profile-section-photo {
    display: flex;
    flex-direction: column;
    align-items: center; 
    /* En PC la foto se queda fija en su columna */
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Contenedor de la columna derecha (Información) */
.profile-info-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* 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 */
.update-status {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: center;
    font-weight: bold;
    grid-column: 1 / -1; /* Ocupa todo el ancho si hay mensaje */
}
.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 */
.profile-section {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem; /* Más padding en PC */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

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

/* Contenedor botones header */
.section-header-actions { display: flex; gap: 0.8rem; }

.edit-button {
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    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; }

.btn-salir-agencia {
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    border: 1px solid #dc3545;
    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 */
.profile-field {
    display: flex;
    align-items: center;
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed #f0f0f0;
}
.profile-field:last-child { border-bottom: none; }

.profile-field label {
    font-weight: 600;
    color: #555;
    width: 180px; /* Más ancho para etiquetas */
    flex-shrink: 0;
}
.profile-field span { color: #222; word-break: break-word; font-weight: 500; }

/* General styles for edit forms */
.edit-form .form-field {
    display: flex;
    flex-direction: column; 
    margin-bottom: 1.5rem;
}
.edit-form .form-field label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #444;
}
.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: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box; 
    width: 100%;
    transition: border-color 0.2s;
}
.edit-form .form-field input:focus {
     outline: none;
     border-color: #0d6efd;
     box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* Form Actions */
.form-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }
.form-actions button {
    padding: 0.8rem 2rem;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    font-weight: 600;
    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; }

/* --- Profile Picture Section Styles --- */
.profile-picture-area {
    display: flex;
    flex-direction: column; /* En PC la foto va arriba, botón abajo */
    align-items: center;
    gap: 1.5rem;
}

.profile-pic-container {
    width: 180px;  
    height: 180px; 
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background-color: #e9ecef;
    border: 3px solid #dee2e6;
    flex-shrink: 0;
    transition: opacity 0.2s;
}
.profile-pic-container:hover { opacity: 0.8; border-color: #0d6efd; }

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

.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: 5rem; font-weight: bold;
}
.profile-pic-placeholder span { line-height: 1; }

.upload-confirm-button {
    padding: 0.7rem 1.5rem;
    font-size: 0.95rem;
    border: none;
    background-color: #198754;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
}
.upload-confirm-button:hover { background-color: #157347; }
.upload-confirm-button:disabled { background-color: #aaa; cursor: not-allowed; }

.cancel-button.small { padding: 0.5rem 1rem; font-size: 0.85rem; width: 100%; margin-top: 0.5rem; }

/* --- 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; }

.agencia-status {
    font-weight: bold;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.9rem;
    display: inline-block;
}
.agencia-status.status-verificado { color: #0f5132; background-color: #d1e7dd; }
.agencia-status.status-pendiente { color: #664d03; background-color: #fff3cd; }
.agencia-status.status-rechazado { color: #842029; background-color: #f8d7da; }
.agencia-status.status-desconocido { color: #414b; background-color: #e2e3e5; }

/* --- RESPONSIVE MÓVIL (VUELTA A STACK VERTICAL) --- */
@media (max-width: 900px) {
    .user-details-container {
        padding: 1rem;
        max-width: 100%;
    }
    
    .user-details-layout {
        display: block; /* Desactivamos Grid en móvil */
    }
    
    .profile-section-photo {
        margin-bottom: 2rem;
        padding: 1.5rem;
    }
    
    .profile-info-column {
        gap: 1.5rem;
    }
    
    .profile-section {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .profile-field {
        flex-direction: column; /* Etiquetas arriba del valor */
        align-items: flex-start;
        gap: 0.2rem;
    }
    .profile-field label {
        width: 100%;
        font-size: 0.9rem;
        color: #777;
    }
    .profile-field span {
        font-size: 1.1rem;
    }
}
/* UBICACIÓN: src/pages/UserAgenciaPage.css */

.agencia-container {
    /* Mantenemos el ancho amplio en PC */
    max-width: 1400px;
    margin: 2rem auto;
    padding: 2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    width: 100%; 
}

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

.agencia-status-box {
    text-align: center;
    margin-bottom: 3rem;
    color: #666;
    font-size: 1.1rem;
}

/* Estados */
.agencia-status {
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    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 {
    max-width: 800px; 
    margin: 0 auto 2rem auto;
}

.agencia-search-bar input {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 1.1rem;
    box-sizing: border-box;
    outline: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.agencia-search-bar input:focus { border-color: #0d6efd; }

/* Secciones (Miembros) */
.miembros-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 2rem;
    margin-bottom: 3rem;
    width: 100%; 
    box-sizing: border-box;
    border: 1px solid #eee;
}

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

/* LISTA EN FORMATO LISTA (NO GRID) */
.miembros-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Espacio entre filas */
}

/* Ítem de Miembro (Fila Ancha) */
.miembro-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    gap: 1rem;
    background-color: #fff;
    transition: background-color 0.2s;
    width: 100%; /* Asegura que ocupe todo el ancho */
    box-sizing: border-box;
}

.miembro-item:hover {
    background-color: #fcfcfc;
    border-color: #d0d0d0;
}

.miembro-item:last-child { margin-bottom: 0; }

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

.miembro-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #0d6efd;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.3rem;
    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: 1.1rem; }
.miembro-email { font-size: 0.9rem; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

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

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

.miembro-acciones button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    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: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    margin-left: 10px;
}

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

    .miembros-list {
        gap: 0; /* Sin gap en móvil, usamos border-bottom */
    }

    .miembro-item {
        flex-direction: column; 
        align-items: flex-start;
        gap: 0.8rem;
        border: none; 
        border-bottom: 1px solid #f0f0f0; 
        border-radius: 0;
        padding: 1rem 0;
    }
    
    .miembro-item:last-child { border-bottom: none; }

    .miembro-acciones {
        width: 100%;
        justify-content: flex-end; 
    }

    .btn-aprobar, .btn-rechazar {
        flex: 1 1; 
        text-align: center;
        padding: 8px;
    }

    .btn-sacar {
        flex: 0 0 auto !important; 
        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;
    }
    
    .agencia-search-bar { max-width: 100%; }
    
    /* El tag de admin en móvil se ajusta */
    .admin-tag { margin-left: 0; align-self: flex-start; margin-top: 5px; }
}

/* Notificación y Empty State */
.empty-msg { text-align: center; color: #999; font-style: italic; padding: 2rem; }
.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;
}
/* UBICACIÓN: src/pages/AdminEquipoPage.css */

/* --- LAYOUT GENERAL --- */
.admin-page-container {
    padding: 2rem;
    /* Fondo BLANCO para consistencia */
    background-color: #ffffff; 
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    width: 100%;
}

.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); 
    border: 1px solid #eee;
    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 - FIX MÓVIL) --- */
.table-responsive-wrapper {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    /* CRÍTICO: Habilita el deslizamiento horizontal */
    overflow-x: auto; 
    width: 100%; 
    -webkit-overflow-scrolling: touch; 
    border: 1px solid #eee;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    /* CRÍTICO: Fuerza el ancho para que aparezca el scroll si la pantalla es chica */
    min-width: 900px; 
    white-space: nowrap; 
}

.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: #f8f9fa; /* Fondo gris claro para headers */
    color: #555;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* Fijar Encabezado */
.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 --- */
.badge { 
    padding: 4px 10px; 
    border-radius: 12px; 
    font-size: 0.75rem; 
    font-weight: bold; 
    color: white !important; 
    text-transform: uppercase;
    display: inline-block;
}

.badge-audio { background-color: #e67e22; }
.badge-video { background-color: #3498db; }
.badge-iluminacion, .badge-iluminación, .badge-ilum { background-color: #9b59b6; }
.badge-general { background-color: #95a5a6; }

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

.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; 
        width: 100%; 
        margin-top: 0;
    }
    
    .admin-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }
    
    .btn-add-product { width: 100%; }
    
    .filters-bar { 
        flex-direction: column; 
        align-items: stretch;
    }
    .filter-input, .filter-select { 
        width: 100%; 
        margin-bottom: 10px;
    }

    /* La tabla ya es scrolleable gracias a .table-responsive-wrapper */
}

/* =========================================
   ESTILOS PARA LA PÁGINA DE AGREGAR/EDITAR
   (Clases usadas en AdminAgregarEquipoPage.js)
   ========================================= */

/* Contenedor del formulario blanco y centrado */
.static-form-container {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    max-width: 900px;
    margin: 0 auto; /* Centrar en la pantalla */
}

/* Layout del formulario */
.product-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.form-group {
    flex: 1 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    flex: 100% 1;
}

.form-group label {
    margin-bottom: 6px;
    font-weight: 600;
    color: #555;
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #3498db;
    outline: none;
}

/* Checkbox estilizado */
.checkbox-group input[type="checkbox"] {
    cursor: pointer;
    accent-color: #3498db;
}

/* Área de carga de archivos */
.file-input-group {
    border: 2px dashed #ddd;
    padding: 20px;
    border-radius: 6px;
    background-color: #fafafa;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}
.file-input-group:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

/* --- BOTONES PERDIDOS (RECUPERADOS) --- */

/* Contenedor de botones a la derecha */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 25px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

/* Botón Principal (Crear/Guardar) - VERDE */
.btn-primary {
    background-color: #27ae60; 
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-primary:hover {
    background-color: #219150;
    transform: translateY(-1px);
}

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

/* Botón Secundario (Cancelar/Volver) - GRIS */
.btn-secondary {
    background-color: #7f8c8d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background 0.2s;
    text-decoration: none; /* Por si se usa en links */
}

.btn-secondary:hover {
    background-color: #636e72;
}
/* 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 */

/* --- ESTILOS BASE (MÓVIL FIRST) --- */
.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);
    transition: max-width 0.3s ease; /* Transición suave al cambiar de tamaño */
}

.admin-event-container h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 2rem;
    font-size: 1.8rem;
    grid-column: 1 / -1; /* Asegura que el título ocupe todo el ancho en grid */
}

/* --- 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;
}

/* 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;
    width: 100%; /* Asegura que el input file no se desborde */
}

/* 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;
    object-fit: cover;
}

/* 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;
}

/* --- IMPORTADOR (SECCIÓN KIT) --- */
.import-section {
    background-color: #e3f2fd;
    border-color: #bbdefb;
}

.import-box {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
    align-items: center; 
}

.import-box input {
    flex: 1 1; 
    margin: 0; 
    height: 45px; 
}

.btn-import {
    background-color: #2196F3;
    color: white;
    border: none;
    padding: 0 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    height: 45px; 
    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);
    margin-top: 20px;
}

.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;
}

/* =========================================
   MEDIA QUERY: VERSIÓN ESCRITORIO (PC)
   ========================================= */
@media (min-width: 1024px) {
    
    /* 1. Contenedor más ancho para aprovechar la pantalla */
    .admin-event-container {
        max-width: 1200px;
    }

    /* 2. Grid Layout para el formulario */
    .admin-event-form {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
        grid-gap: 25px;
        gap: 25px; /* Espacio entre columnas */
        align-items: start; /* Alinear elementos arriba */
    }

    /* 3. Información General: Ocupa todo el ancho superior */
    .section-info {
        grid-column: 1 / -1; 
    }

    /* 4. Multimedia: Columna Izquierda */
    .section-media {
        grid-column: 1 / 2;
        height: 100%; /* Intentar igualar altura */
    }

    /* 5. Configuración del Kit: Columna Derecha */
    .section-kit {
        grid-column: 2 / 3;
        height: 100%;
        margin-bottom: 0;
    }

    /* 6. Botón Guardar: Ocupa todo el ancho inferior */
    .btn-save-event {
        grid-column: 1 / -1;
    }

    /* Ajuste visual: Imagen de portada más grande en PC */
    .img-preview-cover {
        max-width: 100%;
        height: auto;
        max-height: 300px;
    }
}
/* --- CONTENEDOR GENERAL --- */
.admin-page-container {
    padding: 2rem;
    background-color: #f8f9fa;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* CAMBIO PC: Aumentado a 1600px */
    max-width: 1600px; 
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
}

.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 --- */
.events-grid {
    display: grid;
    /* Ajuste automático: mínimo 300px por tarjeta */
    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; 
}

.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; 
    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;
    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;
        width: 100%;
    }

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

    .events-grid {
        grid-template-columns: 1fr; 
        gap: 1.5rem;
    }

    .event-card-admin {
        max-width: 400px;
        margin: 0 auto; 
        width: 100%;
    }
}
/* --- CONTENEDOR PRINCIPAL --- */
.admin-reportes-container {
    padding: 1.5rem;
    width: 100%;
    max-width: 100%; /* Aprovechar toda la pantalla */
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .admin-reportes-container { padding: 30px 40px; }
}

/* --- ENCABEZADO --- */
.reportes-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.reportes-header h1 {
    margin: 0;
    font-size: 1.6rem;
    color: #333;
}

.reportes-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

/* PC: Header horizontal */
@media (min-width: 768px) {
    .reportes-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* --- GRID DE TARJETAS (COMPACTO) --- */
.reportes-grid {
    display: grid;
    /* Tarjetas más pequeñas (280px min) para aprovechar espacio */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 15px;
    gap: 15px;
}

/* --- TARJETA --- */
.reporte-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
    font-size: 0.9rem; /* Fuente base más pequeña */
}

.reporte-card:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,0.08); }

/* BORDES DE COLOR SEGÚN TIPO */
.reporte-card.tipo-error { border-left: 4px solid #dc3545; }
.reporte-card.tipo-sugerencia { border-left: 4px solid #ffc107; }
.reporte-card.tipo-otro { border-left: 4px solid #0d6efd; }

/* ESTADO RESUELTO */
.reporte-card.resuelto {
    opacity: 0.6;
    background-color: #f9f9f9;
    border-left-color: #198754; /* Verde */
}

/* CABECERA TARJETA */
.reporte-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.etiqueta-tipo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    color: #555;
    background-color: #eee;
}

/* Colores de etiquetas */
.etiqueta-tipo.error { color: #dc3545; background-color: #ffe6e6; }
.etiqueta-tipo.sugerencia { color: #856404; background-color: #fff3cd; }
.etiqueta-tipo.otro { color: #0d6efd; background-color: #e7f1ff; }

.reporte-fecha {
    font-size: 0.8rem;
    color: #999;
}

/* MENSAJE */
.reporte-texto {
    font-style: italic;
    color: #333;
    margin: 0 0 15px 0;
    line-height: 1.4;
    flex-grow: 1; /* Empuja el footer hacia abajo */
    word-break: break-word;
}

/* META INFO (Usuario/URL) */
.reporte-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 12px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

/* ACCIONES (BOTONES) */
.reporte-acciones {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.btn-estado {
    flex: 1 1;
    border: none;
    padding: 8px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    color: white;
    transition: background 0.2s;
}

.btn-resolver { background-color: #198754; }
.btn-resolver:hover { background-color: #146c43; }

.btn-reabrir { background-color: #6c757d; }
.btn-reabrir:hover { background-color: #5c636a; }

/* Botón Borrar */
.btn-borrar-reporte {
    flex: 0 0 36px; /* Ancho fijo cuadrado */
    height: 36px;
    border: 1px solid #f8d7da;
    background-color: #fff5f5;
    color: #dc3545;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.btn-borrar-reporte:hover {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

.no-data {
    text-align: center;
    color: #888;
    grid-column: 1 / -1;
    padding: 40px;
    font-style: italic;
}
/* --- CONTENEDOR PRINCIPAL --- */
.admin-staff-container {
    padding: 1.5rem;
    width: 100%;
    max-width: 100%; /* Aprovecha toda la pantalla */
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

/* Ajuste para pantallas grandes */
@media (min-width: 768px) {
    .admin-staff-container { padding: 30px 40px; }
}

/* --- HEADER DE LA PÁGINA --- */
.staff-header {
    display: flex;
    flex-direction: column; 
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.staff-header h1 {
    margin: 0;
    font-size: 1.6rem;
    color: #333;
    text-align: center;
}

/* --- BARRA DE HERRAMIENTAS --- */
.staff-page-actions {
    display: flex;
    flex-direction: column; /* Móvil: Botones apilados */
    gap: 10px;
    width: 100%;
}

/* PC: Header en línea */
@media (min-width: 768px) {
    .staff-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .staff-header h1 { text-align: left; }
    
    .staff-page-actions {
        flex-direction: row; 
        width: auto;
    }
}

/* Estilos de botones principales */
.btn-download-pdf, .btn-add-staff {
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s;
    width: 100%; /* Móvil: Ancho completo */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (min-width: 768px) {
    .btn-download-pdf, .btn-add-staff { width: auto; }
}

.btn-download-pdf { background-color: #6c757d; }
.btn-download-pdf:hover { background-color: #5a6268; transform: translateY(-1px); }
.btn-download-pdf:disabled { background-color: #ccc; cursor: not-allowed; }

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

/* --- GRID DE TARJETAS (CORREGIDO ESPACIO) --- */
.staff-grid {
    display: grid;
    /* Aumenté de 280px a 340px para que las tarjetas sean más anchas y los botones quepan mejor */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

.staff-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
}

.staff-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); 
    border-color: #dee2e6;
}

.staff-card.inactive {
    opacity: 0.75;
    background: #f8f9fa;
    border-style: dashed;
}

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

.staff-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00BFA5;
    padding: 2px; 
    background-color: white;
}

.staff-info h3 { margin: 0; font-size: 1.15rem; color: #212529; font-weight: 700; }
.staff-role { color: #00BFA5; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.staff-details { flex-grow: 1; margin-bottom: 15px; }
.staff-details p { margin: 6px 0; color: #6c757d; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.debt { color: #dc3545; font-weight: bold; background: #fff5f5; padding: 2px 6px; border-radius: 4px; }

/* --- BOTONERA DE TARJETA (CORREGIDA) --- */
.staff-actions {
    display: flex;
    gap: 10px; /* Espacio limpio entre botones */
    padding-top: 15px;
    border-top: 1px solid #f1f3f5;
    margin-top: auto; /* Empuja los botones al fondo de la tarjeta */
}

.btn-icon {
    background: white;
    border: 1px solid #dee2e6;
    padding: 10px 15px; /* Más padding interno para que no se vea apretado */
    border-radius: 6px;
    cursor: pointer;
    
    /* MAGIA: flex-grow: 1, flex-shrink: 1, flex-basis: auto */
    /* Esto permite que el botón crezca según su texto */
    flex: 1 1 auto; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-icon:hover { background-color: #f8f9fa; border-color: #ced4da; color: #212529; }

/* Botón Editar */
.btn-icon:first-child:hover { color: #0d6efd; border-color: #0d6efd; background-color: #f0f7ff; }

/* Botón Eliminar (Rojo - Fijo) */
.btn-icon.delete { 
    flex: 0 0 45px; /* Ancho fijo, no crece ni se encoge */
    width: 45px;
    padding: 0; /* Sin padding lateral para centrar el icono */
    color: #dc3545; 
    border-color: #f8d7da; 
    background-color: #fff5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-icon.delete:hover { 
    background-color: #dc3545; 
    color: white; 
    border-color: #dc3545;
}
/* UBICACIÓN: src/pages/AdminPagosPage.css */

.admin-pagos-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', sans-serif;
    /* CAMBIO: Fondo BLANCO para que coincida con el resto en PC */
    background-color: #ffffff; 
    min-height: 100%;
    box-sizing: border-box;
    width: 100%;
}

/* TARJETAS DE RESUMEN */
.stats-grid {
    display: grid;
    /* En PC: Columnas flexibles. En Móvil se ajustará con media query */
    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 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    border-left: 5px solid #ccc;
    /* Borde sutil para separar si el fondo general es blanco */
    border: 1px solid #eee;
    border-left-width: 5px;
}

.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;
    /* Sombra suave para destacar sobre el fondo blanco */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.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 (INTERACTIVA EN MÓVIL) */
.pagos-table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    /* CRÍTICO: Permite deslizar la tabla si es muy ancha */
    overflow-x: auto; 
    border: 1px solid #eee;
    width: 100%;
}

.pagos-table {
    width: 100%;
    border-collapse: collapse;
    /* CRÍTICO: Fuerza un ancho mínimo para activar el scroll en móvil */
    min-width: 800px; 
}

.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; }

/* Enlaces */
.evento-link {
    color: #0d6efd !important; 
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.evento-link:hover {
    color: #0043a8 !important; 
    text-decoration: underline;
}

.evento-link:visited {
    color: #0d6efd !important; 
}

/* RESPONSIVE MÓVIL (NOMINA) */
@media (max-width: 768px) {
    .admin-pagos-container {
        padding: 1rem;
        margin-top: 0;
    }
    
    /* 1. Tarjetas de Deuda/Pagado separadas verticalmente */
    .stats-grid {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 15px;
    }
    
    /* 2. Barra de filtros en columna (Input arriba, Select abajo) */
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input-large, .filter-select {
        width: 100%;
        margin-bottom: 5px;
    }
    
    /* La tabla ya es "scrolleable" horizontalmente por el overflow-x: auto del contenedor */
}
/* --- CONTENEDOR PRINCIPAL --- */
.flotilla-contenedor-principal {
    padding: 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

@media (min-width: 768px) {
    .flotilla-contenedor-principal { padding: 30px 40px; }
}

/* --- ENCABEZADO --- */
.flotilla-encabezado {
    display: flex;
    flex-direction: column; /* Móvil: Apilado */
    gap: 15px;
    margin-bottom: 30px;
    border-bottom: 2px solid #fff4e6; /* Línea naranja muy suave */
    padding-bottom: 20px;
}

.flotilla-encabezado h1 {
    margin: 0;
    font-size: 1.6rem;
    color: #333;
    text-align: center;
}

.btn-nueva-unidad {
    background-color: #fd7e14; /* NARANJA LOGÍSTICA */
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
    width: 100%; /* Móvil: Full width */
    transition: background 0.2s;
    box-shadow: 0 2px 4px rgba(253, 126, 20, 0.2);
}

.btn-nueva-unidad:hover { background-color: #e8590c; transform: translateY(-1px); }

/* PC: Header horizontal */
@media (min-width: 768px) {
    .flotilla-encabezado {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .flotilla-encabezado h1 { text-align: left; }
    .btn-nueva-unidad { width: auto; }
}

/* --- GRID DE TARJETAS --- */
.flotilla-grid {
    display: grid;
    /* Tarjetas flexibles que no se deforman */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

.unidad-tarjeta {
    background: white;
    border: 1px solid #ffe8cc; /* Borde naranja sutil */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    border-top: 4px solid #fd7e14; /* Acento superior naranja */
}

.unidad-tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* --- CABECERA DE TARJETA --- */
.unidad-cabecera {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.unidad-icono {
    width: 50px;
    height: 50px;
    background-color: #fff4e6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border: 1px solid #ffd8a8;
}

.unidad-info h3 { margin: 0; font-size: 1.1rem; color: #343a40; }
.unidad-placa { 
    font-size: 0.85rem; 
    color: #868e96; 
    background: #f8f9fa; 
    padding: 2px 8px; 
    border-radius: 4px; 
    font-family: monospace;
    border: 1px solid #e9ecef;
}

/* --- DETALLES --- */
.unidad-detalles {
    flex-grow: 1;
    margin-bottom: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ffe8cc;
}

.detalle-fila {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #495057;
}

/* --- BOTONERA --- */
.unidad-acciones {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.btn-accion {
    background: white;
    border: 1px solid #dee2e6;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    flex: 1 1 auto; /* Crecen proporcionalmente */
    font-weight: 600;
    color: #495057;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.btn-accion:hover {
    border-color: #fd7e14;
    color: #fd7e14;
    background-color: #fff4e6;
}

.btn-borrar-unidad {
    flex: 0 0 42px; /* Botón cuadrado fijo */
    color: #dc3545;
    border-color: #f8d7da;
    background: #fff5f5;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-borrar-unidad:hover {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}
/* --- PÁGINA CONTENEDOR --- */
.vehiculo-form-page {
    padding: 20px 10px;
    background: #f8f9fa; /* Fondo gris muy claro */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

/* --- TARJETA DE FORMULARIO --- */
.vehiculo-card-form {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
    border-top: 5px solid #fd7e14; /* Techo naranja */
}

.vehiculo-card-form h1 {
    font-size: 1.5rem;
    color: #333;
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

/* --- SECCIONES --- */
.v-form-section {
    margin-bottom: 25px;
}

.v-form-section h3 {
    color: #495057;
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-left: 4px solid #fd7e14;
    padding-left: 10px;
}

/* --- GRID RESPONSIVO --- */
.v-form-row {
    display: grid;
    grid-template-columns: 1fr; /* Móvil: 1 col */
    grid-gap: 15px;
    gap: 15px;
    margin-bottom: 15px;
}

/* PC: 2 columnas */
@media (min-width: 768px) {
    .vehiculo-form-page { padding: 40px; }
    .vehiculo-card-form { padding: 40px; }
    
    .v-form-row { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.v-form-group { margin-bottom: 15px; }

.v-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
    font-size: 0.95rem;
}

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

.v-form-group input:focus {
    border-color: #fd7e14;
    outline: none;
    box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.15);
}

/* --- BOTONES --- */
.v-form-actions {
    display: flex;
    flex-direction: column-reverse; /* Móvil: Cancelar abajo */
    gap: 10px;
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

@media (min-width: 768px) {
    .v-form-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
    .btn-v-save, .btn-v-cancel { width: auto; min-width: 120px; }
}

.btn-v-save, .btn-v-cancel {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    text-align: center;
}

.btn-v-save {
    background-color: #fd7e14;
    color: white;
}
.btn-v-save:hover { background-color: #e8590c; }

.btn-v-cancel {
    background-color: #e9ecef;
    color: #495057;
}
.btn-v-cancel:hover { background-color: #dee2e6; }
/* --- PAGINA CONTENEDOR --- */
.add-staff-page {
    padding: 20px 10px; /* Padding reducido en móvil para ganar espacio */
    background: #f4f7f6;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

/* --- TARJETA DEL FORMULARIO --- */
.form-card {
    background: white;
    padding: 20px; /* Menos padding interno en móvil */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 800px;
    box-sizing: border-box; /* CRÍTICO: Evita desbordamiento */
}

/* Título */
.form-card h1 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 25px;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.form-section {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}

.form-section:last-child { border-bottom: none; }

.form-section h3 {
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.1rem;
    border-left: 4px solid #00BFA5;
    padding-left: 10px;
}

/* --- GRID DE FORMULARIO (SOLUCIÓN RESPONSIVA) --- */
.form-row {
    display: grid;
    grid-template-columns: 1fr; /* MÓVIL: 1 Columna (Apilado) */
    grid-gap: 15px;
    gap: 15px;
    margin-bottom: 15px;
}

/* PC: 2 Columnas */
@media (min-width: 768px) {
    .add-staff-page { padding: 40px 20px; }
    .form-card { padding: 40px; }
    
    .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
}

.form-group {
    margin-bottom: 15px;
    width: 100%; /* Asegura que no se salga */
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
    font-size: 0.95rem;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: border 0.3s;
    box-sizing: border-box; /* CRÍTICO: El padding no aumenta el ancho total */
    font-size: 1rem; /* Evita zoom automático en iPhone */
}

.form-group input:focus {
    border-color: #00BFA5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 191, 165, 0.1);
}

/* Estilo para input file */
input[type="file"] {
    background: #fafafa;
    border: 1px dashed #ccc;
    padding: 10px;
    font-size: 0.9rem;
}

/* --- BOTONERA INFERIOR --- */
.form-actions {
    display: flex;
    flex-direction: column-reverse; /* MÓVIL: Cancelar abajo, Guardar arriba */
    gap: 10px;
    margin-top: 30px;
    border-top: 2px solid #f4f7f6;
    padding-top: 20px;
}

@media (min-width: 768px) {
    .form-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
    .btn-save, .btn-cancel { width: auto; }
}

.btn-save, .btn-cancel {
    padding: 14px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    width: 100%; /* Botones anchos en móvil */
    text-align: center;
}

.btn-save {
    background: #00BFA5;
    color: white;
}
.btn-save:hover { background: #008f7a; }
.btn-save:disabled { background: #ccc; cursor: not-allowed; }

.btn-cancel {
    background: #eee;
    color: #666;
}
.btn-cancel:hover { background: #e0e0e0; }
/* En: src/index.css */
/* ¡REEMPLAZA ESTE ARCHIVO COMPLETO! */

body {
  margin: 0;
  padding: 0;
  /* IMPORTANTE: El fondo base es NEGRO para que el rebote del celular no se vea blanco */
  background-color: #000000; 
  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;
}

/* HTML también negro para Safari iOS */
html {
  background-color: #000000;
}

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

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/*# sourceMappingURL=main.e57585bf.css.map*/