/* 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 1.5rem;
  background-color: #ffffff;
  text-align: center; 
  width: 100%;
  box-sizing: border-box;
}

.categories-title {
  font-size: 2.5rem;
  margin-bottom: 2.5rem;
  color: #1a1a1a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.categories-grid {
  display: flex;
  flex-wrap: wrap;
  /* CAMBIO CLAVE: Centra horizontalmente las tarjetas en la fila */
  justify-content: center; 
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.category-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border: 1px solid #eaeaea;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: inherit; 
  /* Ancho fijo estético para mantener proporción uniforme */
  width: 220px; 
  box-sizing: border-box;
}

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

.category-card img { 
  width: 100%; 
  aspect-ratio: 1/1; 
  object-fit: cover; 
}

/* TEXTOS DENTRO DE LA TARJETA */
.card-text {
  padding: 1rem;
  text-align: left; 
}

.card-text h3 {
  font-size: 1.1rem;
  margin: 0 0 0.4rem 0;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* RESPONSIVE MÓVIL (Mantenemos la cuadrícula 2x2 centitada) */
@media (max-width: 600px) {
  .categories-title {
    font-size: 1.8rem; 
    margin-bottom: 1.5rem;
  }
  
  .categories-grid {
    gap: 10px; 
  }

  .category-card {
    /* En móvil se ajustan al 46% para formar 2 columnas */
    width: 46%; 
  }
  
  .card-text { 
    padding: 0.8rem; 
    text-align: center; 
  } 
  .card-text h3 { 
    font-size: 0.95rem; 
    margin: 0; 
  }
  .card-text p { 
    display: none; 
  } 
}
.packages-container {
    padding: 3rem 2rem;
    background-color: #f8f9fa; 
    max-width: 1600px; /* 🟢 Máxima anchura posible */
    margin: 0 auto;
}

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

.packages-layout {
    display: grid;
    /* 🟢 Tarjetas ultra delgadas (260px), la imagen domina el espacio */
    grid-template-columns: 260px 1fr; 
    grid-gap: 3rem; 
    gap: 3rem;
    align-items: start; 
    position: relative;
}

/* --- LISTA --- */
.packages-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem; /* Tarjetas más juntas */
}

.package-item {
    border: 1px solid #eaeaea;
    /* 🟢 El borde izquierdo siempre mide 4px, solo cambia de color. Esto MATA el brinco. */
    border-left: 4px solid transparent;
    border-radius: 8px;
    padding: 1rem; /* Muy poco relleno para hacerlas diminutas al cerrarse */
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
}

/* Estado Expandido o Hovered */
.package-item.is-expanded,
.package-item:hover {
    border-left-color: #00BFA5;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

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

.package-item h3 {
    margin: 0;
    font-size: 1.05rem; /* Título discreto */
    color: #2c3e50;
}

.expand-icon {
    font-size: 1.3rem;
    color: #aaa;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.package-item.is-expanded .expand-icon { 
    color: #00BFA5; 
}

/* --- ACORDEÓN (CONTIENE DESC + LISTA) --- */
.package-details-wrapper {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.package-item.is-expanded .package-details-wrapper {
    max-height: 800px; /* Suficiente para todo el contenido interno */
    opacity: 1;
}

.details-content {
    /* 🟢 Sin separaciones inútiles arriba */
    padding-top: 0.5rem; 
    margin-top: 0.5rem;
    border-top: 1px solid #f0f0f0;
}

.package-simple-desc {
    color: #555;
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.8rem; /* Separación sutil antes del "Incluye:" */
    text-align: justify;
}

.details-label {
    font-weight: bold;
    color: #00BFA5;
    margin-bottom: 0.3rem; /* Pegadito a la lista */
    font-size: 0.8rem;
    text-transform: uppercase;
}

.package-details-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0; /* Espacio antes del botón */
}

.package-details-wrapper li {
    padding: 3px 0; /* Lista bien compacta */
    font-size: 0.85rem;
    color: #444;
    border-bottom: 1px dashed #f5f5f5;
    display: flex;
    align-items: flex-start; /* Para que el bullet no se baje si hay dos líneas */
}

.package-details-wrapper li::before {
    content: "•";
    color: #00BFA5;
    font-weight: bold;
    margin-right: 6px;
    font-size: 1.2rem;
    line-height: 0.8; /* Ajuste del bullet para que quede alineado al texto */
}

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

.package-button:hover {
    background-color: #0d6efd;
}

/* --- IMAGEN GIGANTE STICKY --- */
.package-image-col {
    position: relative;
    height: 100%; 
}

.sticky-frame {
    position: -webkit-sticky;
    position: sticky;
    top: 100px; 
    width: 100%;
    height: auto; 
    max-height: calc(100vh - 120px);
    aspect-ratio: 16/9; 
    border-radius: 12px;
    overflow: hidden;
    /* 🟢 Fondo transparente, sin cajas negras feas */
    background-color: transparent; 
    /* Sombra sutil para despegarla del fondo de la página */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
}

.sticky-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    background-color: transparent; /* 🟢 Sin cajas negras */
}

@keyframes fadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

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

/* Responsive */
@media (max-width: 1024px) {
    .packages-layout {
        grid-template-columns: 240px 1fr; /* Todavía más delgada en tablet */
        gap: 1.5rem;
    }
}

@media (max-width: 850px) {
    .packages-layout {
        grid-template-columns: 1fr;
    }
    .package-image-col {
        display: none; 
    }
}
/* 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; 
    }
}
.catalog-page-container {
  /* Expandimos el ancho máximo para aprovechar la PC y cambiamos el fondo para que coincida con tu tema oscuro */
  max-width: 1800px;
  margin: 0 auto;
  padding-top: 2rem;
  padding-bottom: 4rem;
  background-color: transparent; /* Quitamos el blanco agresivo */
  min-height: 100vh;
  width: 95%; /* Deja un margen lateral pequeño y elegante del 2.5% por lado */
  box-sizing: border-box;
}

.catalog-main-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #f8f9fa; /* Letra clara para fondo oscuro */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .catalog-page-container {
    width: 100%;
    padding-top: 1rem;
    padding-left: 0;
    padding-right: 0;
  }

  .catalog-main-title {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
  }
}
.category-page-container {
    /* CAMBIO CLAVE: Expandimos de 1200px a 1600px (o 95% de pantalla) para eliminar los bordes blancos gigantes */
    max-width: 1600px;
    width: 95%;
    margin: 2rem auto;
    padding: 0 1rem;
    background-color: #ffffff;
    min-height: 80vh;
    box-sizing: border-box;
}

.category-page-title {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 2.5rem;
    color: #1a1a1a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* GRID DINÁMICO DE PRODUCTOS:
   Aprovecha el espacio en PC acomodando automáticamente entre 5 y 6 productos por fila */
.product-grid {
    display: grid;
    grid-gap: 1.5rem;
    gap: 1.5rem;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, minmax(200px, 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;
}

/* RESPONSIVE TABLETS / LAPTOPS PEQUEÑAS */
@media (max-width: 1024px) {
    .category-page-container {
        width: 100%;
        padding: 0 1rem;
    }
    
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 1rem;
    }
}

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

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
.pdp-container {
    max-width: 1100px; 
    margin: 2rem auto;
    padding: 1rem;
}

.pdp-top-section {
    display: flex;
    justify-content: center;
    gap: 3rem; 
    margin-bottom: 3rem;
    align-items: flex-start;
}

/* Wrappers restaurados para asegurar que la galería nunca desaparezca del layout */
.pdp-gallery-wrapper, .pdp-info-wrapper {
    flex: 1 1;
    width: 100%;
    max-width: 500px; 
}

/* ENVOLTORIO TÁCTIL Y NAVEGACIÓN LATERAL */
.pdp-swipe-wrapper {
    position: relative;
    width: 100%;
    overflow-x: hidden; 
}

.desk-nav-arrow {
    position: fixed; top: 50%; transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.05); border: none;
    color: #333; font-size: 2rem; padding: 40px 15px;
    cursor: pointer; z-index: 900; transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}

.desk-nav-arrow:hover {
    background-color: rgba(13, 110, 253, 0.8);
    color: white; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.desk-left-arrow { left: 0; border-radius: 0 10px 10px 0; }
.desk-right-arrow { right: 0; border-radius: 10px 0 0 10px; }

/* RESPONSIVE MÓVIL */
@media (max-width: 1024px) {
    .desk-nav-arrow { display: none; }
}

@media (max-width: 768px) {
    .pdp-top-section {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .pdp-gallery-wrapper, .pdp-info-wrapper {
        max-width: 100%; 
    }
}

/* --- BOTÓN VOLVER A CATEGORÍA --- */
.back-to-category-container {
    max-width: 1100px;
    margin: 1rem auto 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: flex-start;
}

.back-to-category-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 20px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.back-to-category-btn:hover {
    background-color: #f0f0f0;
    color: #0d6efd;
    transform: translateX(-3px); /* Pequeño empujón a la izquierda al hacer hover */
}
.gallery-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gallery-container.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    background-color: #f8f9fa;
    color: #adb5bd;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
}

.main-image-wrapper {
    position: relative;
    width: 100%;
    height: auto; 
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image {
    width: 100%;
    height: auto; 
    max-height: 500px; 
    object-fit: contain; 
    display: block;
    transition: transform 0.3s ease;
}

.image-counter {
    position: absolute;
    top: 10px; left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff; padding: 4px 10px;
    border-radius: 20px; font-size: 0.85rem;
    font-weight: bold; z-index: 10;
}

.left-arrow, .right-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    color: #333; width: 35px; height: 35px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer; font-size: 1.2rem;
    z-index: 10; transition: all 0.2s; -webkit-user-select: none; -ms-user-select: none; user-select: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.left-arrow:hover, .right-arrow:hover {
    background-color: #0d6efd; color: white;
}

.left-arrow { left: 10px; }
.right-arrow { right: 10px; }

/* MINIATURAS */
.thumbnail-strip {
    display: flex; gap: 10px; overflow-x: auto;
    padding-bottom: 5px; justify-content: center;
}
.thumbnail-strip::-webkit-scrollbar { height: 6px; }
.thumbnail-strip::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 10px; }

.thumbnail-wrapper {
    width: 70px; height: 70px; flex-shrink: 0;
    border-radius: 8px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; opacity: 0.6;
    transition: all 0.2s; background-color: #fff;
}

.thumbnail-wrapper.active {
    border-color: #0d6efd; opacity: 1; transform: scale(1.05);
}

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

/* MODAL DE PANTALLA COMPLETA */
.gallery-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(0,0,0,0.9); z-index: 99999;
    display: flex; justify-content: center; align-items: center;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}

.gallery-modal-image {
    max-width: 90%; max-height: 90%; object-fit: contain;
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.gallery-modal-close {
    position: absolute; top: 20px; right: 40px;
    color: white; font-size: 50px; font-weight: 300; 
    cursor: pointer; transition: color 0.3s; z-index: 100000;
}
.gallery-modal-close:hover { color: #dc3545; }

.modal-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: white; font-size: 50px; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none;
    padding: 20px; transition: 0.3s; z-index: 100000;
}
.modal-arrow.left { left: 20px; }
.modal-arrow.right { right: 20px; }
.modal-arrow:hover { color: #0d6efd; transform: translateY(-50%) scale(1.1); }

@media (max-width: 768px) {
    .main-image { max-height: 350px; }
    .modal-arrow { font-size: 35px; padding: 10px; }
    .gallery-modal-close { top: 10px; right: 20px; font-size: 40px; }
}
.product-info-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* --- ESTILO CLÁSICO (Productos normales) --- */
.classic-layout .product-title {
    font-size: 2rem;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 1rem;
}

.classic-layout .product-price-section {
    margin-bottom: 2rem;
}

.classic-layout .product-price {
    font-size: 2rem;
    font-weight: bold;
    color: #0d6efd;
}

/* --- ESTILO LED: HEADER SUPERIOR COMPACTO --- */
.led-layout .product-header {
    width: 100%;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eaeaea;
    text-align: center;
}

.led-layout .product-title {
    font-size: 2.1rem;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 0.4rem;
}

.led-layout .product-price {
    font-size: 2rem;
    font-weight: bold;
    color: #0d6efd; 
}

.led-layout .price-unit {
    font-size: 1.1rem;
    color: #666;
    margin-left: 8px;
}

.led-layout .base-price-note {
    font-size: 0.85rem;
    color: #888;
    margin-top: 3px;
    font-style: italic;
}

/* --- CUERPO: GALERÍA IZQ / CONFIGURADOR DER --- */
.product-body-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3rem;
    gap: 3rem;
    align-items: start;
}

.gallery-col {
    width: 100%;
}

.controls-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

/* --- CONFIGURADOR PANTALLA LED --- */
.led-calculator {
    background-color: #f9fbfd;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.led-calc-header h3 {
    margin-top: 0;
    color: #333;
    font-size: 1.05rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.4rem;
}

.led-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.led-control {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.led-control label {
    font-size: 0.9rem;
    color: #555;
}

.led-control input[type="range"] {
    width: 100%;
    accent-color: #00BFA5; 
    cursor: pointer;
}

.module-badge {
    align-self: flex-start;
    background-color: #e9ecef;
    color: #555;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
}

/* --- PREVISUALIZADOR VISUAL (GRID COMPACTO Y PROPORCIONADO) --- */
.led-visualizer {
    background-color: #111;
    border-radius: 10px;
    padding: 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: inset 0 5px 20px rgba(0,0,0,0.5);
    overflow: hidden;
}

.led-grid-container {
    display: grid;
    grid-gap: 1px;
    gap: 1px; 
    background-color: #444; 
    border: 2px solid #555;
    width: 100%;
    max-width: 240px; 
    max-height: 200px; 
    margin: 0 auto;
    transition: all 0.3s ease;
    justify-content: center;
    align-content: center;
}

.led-module-box {
    background-color: #0d1b2a; 
    border: 1px solid rgba(0, 191, 165, 0.2);
    box-shadow: inset 0 0 8px rgba(0, 191, 165, 0.1); 
    min-width: 12px;
    min-height: 12px;
    transition: background-color 0.2s;
}

.led-module-box:hover {
    background-color: rgba(0, 191, 165, 0.4); 
}

.led-stats {
    margin-top: 1rem;
    display: flex;
    gap: 1.2rem;
    color: white;
    font-size: 0.9rem;
    background-color: rgba(255,255,255,0.1);
    padding: 6px 15px;
    border-radius: 20px;
}

/* --- CONTROLES DE CARRITO --- */
.cart-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.qty-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.qty-wrapper label {
    font-size: 0.85rem;
    color: #666;
    font-weight: bold;
}

.qty-buttons {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    height: 45px;
}

.qty-buttons button {
    background-color: #f8f9fa;
    border: none;
    width: 40px;
    height: 100%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.qty-buttons button:hover {
    background-color: #e9ecef;
}

.qty-buttons span {
    width: 45px;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
}

.btn-add-cart {
    flex: 1 1;
    height: 45px;
    background-color: #0d6efd;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

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

@media (max-width: 900px) {
    .product-body-columns {
        grid-template-columns: 1fr; 
    }
}
.details-container {
    padding: 2.5rem;
    margin-top: 3rem;
    background-color: #f9f9f9;
    border-radius: 10px;
}

.details-section {
    margin-bottom: 2rem;
}

.details-section:last-child {
    margin-bottom: 0;
}

.details-section h3 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0e0e0;
    color: #333;
}

.details-section p {
    line-height: 1.7;
    color: #555;
    text-align: justify;
}

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

.specs-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
    display: flex;
    font-size: 1rem;
    color: #555;
}

.specs-list li:last-child {
    border-bottom: none;
}

.specs-list strong {
    color: #333;
    width: 180px; 
    flex-shrink: 0; 
}

@media (max-width: 768px) {
    .details-container { padding: 1.5rem; }
    .specs-list li { flex-direction: column; gap: 5px; }
    .specs-list strong { width: 100%; }
}
.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; }
}
/* 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/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;
}
/* 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;
}
/* --- 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: center; /* Alineado al centro para evitar desfases */
    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;
}
.cart-page-container .cart-item-img-wrapper img { width: 100%; height: 100%; object-fit: contain; }

.cart-page-container .item-details { 
    text-align: left; 
}
.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: center; /* Centrado en su columna */
}

.cart-page-container .quantity-selector {
    display: flex; align-items: center;
    border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #f8f9fa;
    height: 38px;
}
.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: 1.2rem; outline: none; background: white; color: #0d6efd; font-weight: 800; height: 100%;
}

/* ACTIONS (PC) */
.cart-page-container .item-actions { 
    text-align: right; 
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px; 
}
.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 .cart-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 */
    .cart-page-container .quantity-section { 
        grid-area: footer; 
        justify-self: start; 
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px dashed #eee;
        width: 100%; 
        display: flex;
        pointer-events: none; 
    }
    .cart-page-container .quantity-selector { pointer-events: auto; } 

    .cart-page-container .item-actions { 
        grid-area: footer; 
        justify-self: end; 
        margin-top: 10px;
        padding-top: 8px;
        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; } 
    .cart-page-container .quantity-selector button { padding: 0 8px; font-size: 0.9rem; }
    .cart-page-container .quantity-selector input { width: 35px; font-size: 0.95rem; }

    .cart-page-container .item-total { font-size: 0.95rem; font-weight: 700; margin: 0; }
    
    .cart-page-container .remove-btn { 
        font-size: 0; padding: 4px; 
        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%; }
}

/* 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%; }
}
/* Botón Escáner */
.btn-escaner { color: #6f42c1; transition: transform 0.2s; } /* Morado para destacarlo */
.btn-escaner:hover { color: #59359a; transform: scale(1.1); }
@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;
}


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

/* --- CONTENEDOR PRINCIPAL --- */
.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: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; } 
.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 --- */
.cart-items-list { margin-top: 1.5rem; }
.cart-item {
    display: grid;
    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; color: #111; }
.item-details p { margin: 5px 0 0 0; color: #0d6efd; font-weight: 600; }
.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; }
.item-total-wrapper { text-align: right; }
.total-price { font-weight: 800; font-size: 1.1rem; color: #111; margin: 0; }

/* --- STAFF --- */
.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;
}
.staff-details-text { display: flex; align-items: center; gap: 10px; }
.staff-role-badge { background-color: #e9ecef; color: #555; padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; }
.staff-actions-block { display: flex; align-items: center; gap: 15px; }

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

/* --- RESUMEN FINAL --- */
.quote-summary-final { margin-top: 2rem; padding: 2rem; background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; display: flex; justify-content: center; }
.summary-details { width: 100%; max-width: 450px; text-align: right; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.95rem; color: #64748b; }
.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: 15px; margin-top: 10px; font-size: 1.4rem; font-weight: 900; color: #111; align-items: center; }
.total-amount { color: #0d6efd; font-size: 1.7rem; }


/* ========================================================================= */
/* 🟢 SISTEMA DE BOTONES GLASSMORFISMO (LIQUID GLASS) RENOMBRADO Y LIMPIO 🟢 */
/* ========================================================================= */

.quote-actions-centered { 
    margin-top: 2rem; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 1.5rem; 
    padding-bottom: 2.5rem; 
    border-bottom: 1px dashed #cbd5e1; 
}

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

/* Base de Cristal para todos los botones */
.glass-btn-base {
    font-weight: 800 !important; 
    color: #111111 !important; 
    font-size: 1.05rem;
    padding: 12px 25px;
    border-radius: 12px;
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 8px; 
    
    /* El efecto visual */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.7); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), inset 0 2px 6px rgba(255, 255, 255, 0.7); 
    transition: all 0.3s ease; 
}

/* Elevación y brillo al pasar el cursor */
.glass-btn-base:hover:not(:disabled) {
    transform: translateY(-3px); 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.9); 
}

/* Variantes de Tamaño */
.glass-btn-grande {
    font-size: 1.15rem;
    padding: 14px 40px;
}

/* --- Colores Pastel Opacos (Estado Base) y Brillantes (Hover) --- */

/* AZUL PASTEL (Info / Copiar) */
.glass-btn-info { background-color: rgba(147, 197, 253, 0.7); border-color: rgba(96, 165, 250, 0.8); }
.glass-btn-info:hover { background-color: rgba(96, 165, 250, 0.9); }

/* AMARILLO/NARANJA PASTEL (Alerta / Modificar) */
.glass-btn-alerta { background-color: rgba(253, 230, 138, 0.8); border-color: rgba(251, 191, 36, 0.8); }
.glass-btn-alerta:hover { background-color: rgba(251, 191, 36, 0.9); }

/* ROJO PASTEL (Peligro / Borrar) */
.glass-btn-peligro { background-color: rgba(254, 202, 202, 0.8); border-color: rgba(248, 113, 113, 0.8); }
.glass-btn-peligro:hover { background-color: rgba(248, 113, 113, 0.9); }

/* GRIS/ROSA MUY SUAVE (Acción Secundaria / Regresar a proceso) */
.glass-btn-suave { background-color: rgba(226, 232, 240, 0.8); border-color: rgba(203, 213, 225, 0.8); }
.glass-btn-suave:hover { background-color: rgba(254, 202, 202, 0.9); border-color: rgba(248, 113, 113, 0.8); } /* Se vuelve rojizo tenue al hover para indicar advertencia */

/* VERDE PASTEL (Éxito / Aprobar) */
.glass-btn-exito { background-color: rgba(167, 243, 208, 0.8); border-color: rgba(52, 211, 153, 0.8); }
.glass-btn-exito:hover { background-color: rgba(52, 211, 153, 0.9); }


/* ========================================================================= */
/* SECCIÓN PDF Y FACTURACIÓN (También usa el mismo motor de botones)         */
/* ========================================================================= */

.pdf-download-section { 
    margin-top: 2rem; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

.pdf-download-section h3 { 
    font-size: 1.2rem; 
    color: #000; 
    margin-bottom: 1.5rem; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    justify-content: center; 
}

.pdf-buttons-row { 
    display: flex; 
    justify-content: center; 
    gap: 1.5rem; 
    flex-wrap: wrap; 
    margin-bottom: 2rem; 
}

/* VERDE AGUA (Menta / Descargar Cotización Cliente) */
.glass-btn-menta { background-color: rgba(167, 243, 208, 0.9); border-color: rgba(52, 211, 153, 0.8); }
.glass-btn-menta:hover { background-color: rgba(52, 211, 153, 1); }

/* ÁMBAR CLARO (Descargar Bodega) */
.glass-btn-ambar { background-color: rgba(253, 230, 138, 0.9); border-color: rgba(251, 191, 36, 0.8); }
.glass-btn-ambar:hover { background-color: rgba(251, 191, 36, 1); }

/* Facturas Widget (Recuadro punteado inferior) */
.facturas-widget-container { 
    border: 1px dashed #cbd5e1; 
    padding: 20px; 
    border-radius: 8px; 
    max-width: 500px; 
    width: 100%;
    margin: 0 auto; 
    background: #fff; 
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .event-form { grid-template-columns: 1fr; }
    .cart-item { grid-template-columns: 80px 1fr; grid-template-areas: "imagen info" "imagen footer"; }
    .actions-row { flex-direction: column; gap: 15px; }
    .glass-btn-base { 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;
    }
}
.agencia-container {
    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;
}

.miembros-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem; 
}

.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%; 
    box-sizing: border-box;
}

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

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

/* Efecto visual tenue cuando un usuario está suspendido */
.miembro-suspendido {
    background-color: #fafafa;
    border-color: #f5c6cb;
}
.miembro-suspendido .miembro-avatar {
    background-color: #6c757d; /* Gris para indicar inactividad */
    opacity: 0.8;
}

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

.tag-suspendido {
    font-size: 0.8rem;
    color: #dc3545;
    font-weight: normal;
    margin-left: 5px;
}

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

.miembro-acciones {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.miembro-acciones button {
    flex: 1 1;
    min-width: 85px;
    max-width: 100px;
    padding: 6px 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

.btn-aprobar { background-color: #198754; color: white; }
.btn-rechazar { background-color: #dc3545; color: white; } 
.btn-sacar { background-color: #fd7e14; color: white; } 
.btn-gestionar { background-color: #0d6efd; color: white; }
.btn-suspender { background-color: #dc3545; color: white; }
.btn-reactivar { background-color: #198754; color: white; }

.miembro-acciones button:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}
.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; 
    }

    .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; 
        flex-wrap: wrap; 
    }

    .btn-aprobar, .btn-rechazar, .btn-suspender, .btn-reactivar {
        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%; }
    
    .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; }
.gerente-tag {
    background-color: #6f42c1; /* Morado corporativo */
    color: white;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 10px;
}
/* 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); 
}
/* 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;
}

/* 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;
}
/* 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;
}
/* --- 📱 MEDIA QUERIES: VERSIÓN MÓVIL (PANTALLAS PEQUEÑAS) --- */
@media (max-width: 480px) {
    .admin-reportes-container {
        padding: 1rem;
    }

    .reportes-header {
        gap: 10px;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .reportes-header h1 {
        font-size: 1.3rem;
    }

    .filtro-select {
        width: 100%;
        padding: 10px;
        font-size: 1rem;
    }

    .reportes-toolbar {
        width: 100%;
    }

    .reportes-grid {
        grid-template-columns: 1fr; /* Una sola columna en móviles para evitar scroll horizontal */
        gap: 12px;
    }

    .reporte-card {
        padding: 12px;
    }

    .reporte-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .reporte-acciones {
        flex-direction: column; /* Apilar botones en pantallas muy estrechas */
        gap: 6px;
    }

    .btn-estado {
        padding: 10px;
        font-size: 0.95rem;
    }

    .btn-borrar-reporte {
        width: 100%;
        height: 40px; /* Botón más grande y fácil de pulsar en touch */
        flex: initial;
    }
}
/* --- CONTENEDOR PRINCIPAL --- */
.admin-staff-container {
    padding: 30px 40px;
    background: #f8f9fa;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

.staff-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 20px;
}

.staff-header h1 {
    font-size: 1.8rem;
    color: #212529;
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 15px;
}

/* --- BOTONES DE ENCABEZADO --- */
.btn-download-pdf, .btn-add-staff {
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.3s, transform 0.2s;
}

.btn-download-pdf {
    background-color: #6c757d;
    color: white;
}
.btn-download-pdf:hover:not(:disabled) { background-color: #5a6268; }
.btn-download-pdf:disabled { background-color: #adb5bd; cursor: not-allowed; }

.btn-add-staff {
    background-color: #0d6efd;
    color: white;
}
.btn-add-staff:hover { background-color: #0b5ed7; }

/* --- CONTROLES SUPERIORES (Busqueda y Tabs) --- */
.controls-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.search-bar {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 6px 12px;
    flex: 1 1;
    max-width: 400px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
}

.search-icon {
    margin-right: 8px;
    color: #6c757d;
}

.search-bar input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.95rem;
    color: #495057;
}

.view-tabs {
    display: flex;
    gap: 10px;
}

.view-tabs .tab {
    padding: 8px 16px;
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.view-tabs .tab:hover {
    background-color: #dde2e6;
}

.view-tabs .tab.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* --- TABLA DE PERSONAL --- */
.table-wrapper {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid #e9ecef;
    overflow-x: auto;
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.staff-table th, .staff-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
    font-size: 0.95rem;
    color: #212529;
}

.staff-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.staff-table tbody tr {
    transition: background-color 0.2s;
}

.staff-table tbody tr:hover {
    background-color: #f1f3f5;
}

/* Estilos de fila inactiva */
.row-inactive {
    background-color: #fff5f5 !important;
}
.row-inactive td {
    opacity: 0.8;
}

/* --- UTILIDADES DE TEXTO Y BADGES --- */
.fw-bold { font-weight: 600; }
.text-muted { color: #6c757d; }
.text-danger { color: #dc3545; }
.text-success { color: #198754; }
.text-center { text-align: center; }
.small { font-size: 0.85rem; }

.badge-role {
    background-color: #e9ecef;
    color: #495057;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-type {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}
.badge-type.fijo { background-color: #e0f3ff; color: #0056b3; }
.badge-type.freelance { background-color: #fff3cd; color: #856404; }

.badge-status {
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: bold;
}
.badge-status.active { background-color: #d1e7dd; color: #0f5132; }
.badge-status.inactive { background-color: #f8d7da; color: #842029; }

.docs-cell span {
    font-size: 1.2rem;
    margin-right: 5px;
    cursor: help;
}

/* --- BOTONES DE ACCIÓN (TABLA) --- */
.actions-cell {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.btn-action {
    background: none;
    border: 1px solid transparent;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-action:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
    transform: scale(1.1);
}

.btn-action.delete:hover {
    background-color: #ffe3e3;
    border-color: #ffc9c9;
}

/* --- ESTADO VACÍO --- */
.empty-state {
    padding: 40px;
    text-align: center;
    color: #6c757d;
    font-size: 1.1rem;
}

/* --- ESTILOS PARA LOS ENLACES DE DOCUMENTOS --- */
.doc-links-container {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.doc-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

/* Colores por tipo de documento */
.doc-badge.ine { 
    background-color: #e0f3ff; 
    color: #0d6efd; 
    border: 1px solid #b6e0ff; 
}
.doc-badge.ine:hover { background-color: #b6e0ff; }

.doc-badge.lic { 
    background-color: #e8f5e9; 
    color: #198754; 
    border: 1px solid #c8e6c9; 
}
.doc-badge.lic:hover { background-color: #c8e6c9; }

.doc-badge.ctx { 
    background-color: #fff3cd; 
    color: #856404; 
    border: 1px solid #ffeeba; 
}
.doc-badge.ctx:hover { background-color: #ffeeba; }
/* UBICACIÓN: src/pages/ADMIN/AdminPagosPage.css */

.admin-pagos-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa; 
    min-height: 100vh;
    box-sizing: border-box;
    width: 100%;
}

.pagos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 20px;
}

.pagos-header h1 {
    font-size: 1.8rem; 
    color: #212529;
    margin: 0;
    display: flex;
    align-items: center;
}

/* --- TABS DEL HEADER --- */
.view-tabs {
    display: flex;
    gap: 10px;
}

.view-tabs .tab {
    padding: 8px 16px;
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.view-tabs .tab:hover {
    background-color: #dde2e6;
}

.view-tabs .tab.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* --- TARJETAS DE RESUMEN --- */
.stats-grid {
    display: flex;
    gap: 24px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.stat-card {
    background: white;
    padding: 18px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-left-width: 6px;
    min-width: 280px;
    flex: 1 1;
}

.stat-card.pending { border-left-color: #d9534f; } 
.stat-card.paid { border-left-color: #5cb85c; }    

.stat-title { 
    font-size: 0.8rem; 
    color: #777; 
    margin-bottom: 6px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    font-weight: 600;
}
.stat-value { 
    font-size: 1.6rem; 
    font-weight: bold; 
    color: #333; 
}

/* --- BARRA DE FILTROS --- */
.filters-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    align-items: center;
}

.filtro-grupo {
    display: flex;
    align-items: center;
}

.search-group {
    flex: 1 1;
    min-width: 250px;
}

.search-input-large {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.search-input-large:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

.filter-select {
    padding: 10px 16px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    color: #495057;
}

.filter-select:focus {
    border-color: #80bdff;
    outline: 0;
}

/* --- TABLA DE NÓMINA --- */
.pagos-table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    overflow-x: auto; 
    border: 1px solid #eaeaea;
    width: 100%;
}

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

.pagos-table th, .pagos-table td {
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

.pagos-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.pagos-table td {
    font-size: 0.95rem;
    color: #212529;
}

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

/* CLASES DE FILA Y ESTADOS */
.pagos-table tbody tr.fila-pagado { background-color: #f8fff9; }
.pagos-table tbody tr.fila-pendiente { background-color: #fffdf7; }

/* --- ETIQUETAS Y BADGES --- */
.badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.badge-pendiente { background-color: #d9534f; color: #ffffff; }
.badge.badge-pagado { background-color: #198754; color: #ffffff; }
.badge.badge-periodo { background-color: #2d503a; color: #495057; border: 1px solid #dee2e6; }

/* --- BOTONES DE PAGO --- */
.btn-pay {
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.btn-do-pay { background-color: #198754; color: white; }
.btn-do-pay:hover { background-color: #146c43; transform: translateY(-1px); }

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

.text-amount { font-family: Consolas, monospace; font-weight: bold; }

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
    .admin-pagos-container { padding: 1rem; }
    
    .pagos-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .view-tabs {
        width: 100%;
    }

    .view-tabs .tab {
        flex: 1 1;
        text-align: center;
    }

    .filters-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .search-group, .filtro-grupo { width: 100%; }
    .filter-select { width: 100%; }
}
/* --- 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: 30px 20px;
    background: #f8f9fa; 
    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: 40px;
    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; 
}

.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;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}

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

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

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

/* PC: 2 columnas */
@media (min-width: 768px) {
    .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);
}

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

/* --- BOTONES --- */
.v-form-actions {
    display: flex;
    flex-direction: column-reverse; 
    gap: 10px;
    margin-top: 30px;
}

@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; }
.saas-billing-container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.saas-header {
    margin-bottom: 2rem;
    text-align: center;
}

.saas-header h1 {
    font-size: 2rem;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
}

.saas-header p {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

.saas-alert {
    padding: 1.2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border-left: 5px solid;
}

.saas-alert strong { display: block; font-size: 1.1rem; margin-bottom: 0.3rem; }
.saas-alert p { margin: 0; font-size: 0.95rem; }

.preview-alert { background-color: #f8fafc; border-color: #3b82f6; color: #1e293b; }
.warning-alert { background-color: #fffbeb; border-color: #f59e0b; color: #92400e; }
.success-alert { background-color: #f0fdf4; border-color: #10b981; color: #166534; }

.saas-billing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    gap: 2rem;
    align-items: start;
}

.saas-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.saas-card h2 {
    font-size: 1.25rem;
    color: #0f172a;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f1f5f9;
}

.saas-period {
    font-size: 0.85rem;
    font-weight: bold;
    color: #0d6efd;
    background: #eff6ff;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.saas-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.95rem;
    color: #475569;
}

.hybrid-fee small {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 3px;
}

.subtotal {
    border-top: 1px dashed #cbd5e1;
    margin-top: 0.5rem;
    font-weight: 600;
    color: #1e293b;
}

/* MÓDULO DE IVA */
.saas-iva-module {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
}

.iva-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.iva-toggle-row strong { color: #0f172a; font-size: 0.95rem; display: block; }
.iva-toggle-row small { color: #64748b; font-size: 0.8rem; }

.iva-amount {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    color: #d97706;
    font-weight: 600;
}

.total-apagar {
    font-size: 1.2rem;
    font-weight: bold;
    color: #0f172a;
    border-top: 2px solid #cbd5e1;
    padding-top: 1.5rem;
    margin-top: 0.5rem;
}

.total-highlight {
    font-size: 1.8rem;
    color: #2563eb;
}

/* ESTILOS DE SWITCH (TOGGLE) */
.saas-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.saas-switch input { opacity: 0; width: 0; height: 0; }
.saas-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .2s; border-radius: 24px; }
.saas-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .2s; border-radius: 50%; }
input:checked + .saas-slider { background-color: #2563eb; }
input:checked + .saas-slider:before { transform: translateX(20px); }
input:disabled + .saas-slider { opacity: 0.6; cursor: not-allowed; }

/* MÓDULO DE PAGOS SPEI */
.bank-info-box {
    background: #1e293b;
    color: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.bank-info-box p { font-size: 0.85rem; color: #94a3b8; margin: 0.5rem 0 1rem 0; }

.clabe-highlight {
    background: #0f172a;
    padding: 0.75rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 1.1rem;
    text-align: center;
    border: 1px solid #334155;
}

.clabe-highlight span { color: #38bdf8; font-weight: bold; font-size: 1.2rem; }

.upload-payment-form .form-group { margin-bottom: 1.25rem; }
.upload-payment-form label { display: block; font-size: 0.85rem; font-weight: 600; color: #475569; margin-bottom: 0.5rem; }
.upload-payment-form input[type="text"] {
    width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1rem; box-sizing: border-box;
}
.upload-payment-form input[type="file"] {
    width: 100%; padding: 0.5rem; border: 1px dashed #94a3b8; border-radius: 6px; background: #f8fafc; font-size: 0.9rem;
}

.btn-saas-pay {
    width: 100%; padding: 0.85rem; background: #10b981; color: white; border: none; border-radius: 6px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background 0.2s;
}
.btn-saas-pay:hover { background: #059669; }
.btn-saas-pay:disabled { background: #94a3b8; cursor: not-allowed; }

.saas-loader { text-align: center; padding: 4rem; color: #64748b; font-weight: 600; }
.saas-error-box { text-align: center; padding: 2rem; color: #dc3545; font-weight: bold; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; max-width: 600px; margin: 2rem auto; }

@media (max-width: 768px) {
    .saas-billing-grid { grid-template-columns: 1fr; }
}

/* ... [Mismo CSS que te entregué anteriormente, añadiendo estas reglas de diseño responsivo] ... */
.saas-iva-module {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem; margin: 1.5rem 0;
}
.iva-toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.iva-toggle-text strong { color: #0f172a; font-size: 1rem; display: block; }
.iva-toggle-text small { color: #64748b; font-size: 0.85rem; }
.iva-status-text { font-weight: 700; color: #64748b; font-size: 0.9rem; padding: 4px 10px; border-radius: 4px; background: #e2e8f0; }
.iva-status-text.active { color: #0f5132; background: #d1e7dd; }

@media (max-width: 800px) {
    .saas-billing-grid { grid-template-columns: 1fr; }
    .iva-toggle-row { flex-direction: column; align-items: flex-start; }
    .saas-switch { align-self: flex-end; margin-top: -30px; }
}

/* Centrado perfecto cuando la tarjeta está sola */
.centered-single-card {
    display: flex !important;
    justify-content: center;
}
.centered-single-card .saas-card {
    width: 100%;
    max-width: 550px;
}

/* Diseño elegante para descarga de CFDI */
.saas-cfdi-downloads {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px dashed #cbd5e1;
    text-align: center;
}
.saas-cfdi-downloads h4 { margin: 0 0 1rem 0; color: #475569; font-size: 0.95rem; }
.cfdi-btn-group { display: flex; gap: 10px; justify-content: center; }
.btn-dl-pdf, .btn-dl-xml {
    padding: 8px 20px; border-radius: 6px; font-weight: bold; font-size: 0.9rem; text-decoration: none; transition: 0.2s;
}
.btn-dl-pdf { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.btn-dl-pdf:hover { background: #fca5a5; }
.btn-dl-xml { background: #f3e8ff; color: #6d28d9; border: 1px solid #d8b4fe; }
.btn-dl-xml:hover { background: #d8b4fe; }

/* Añade esto al final de tu FacturacionSaaSPage.css */

.full-width-card {
    grid-template-columns: 1fr;
}
.full-width-card .saas-card {
    max-width: 800px;
    margin: 0 auto;
}

.saas-cfdi-downloads {
    margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px dashed #cbd5e1; text-align: center;
}
.saas-cfdi-downloads h4 { margin: 0 0 1rem 0; color: #475569; font-size: 1.05rem; }
.cfdi-btn-group { display: flex; gap: 15px; justify-content: center; }
.btn-dl-pdf, .btn-dl-xml {
    padding: 10px 24px; border-radius: 6px; font-weight: bold; font-size: 0.95rem; text-decoration: none; transition: 0.2s; display: flex; align-items: center; gap: 6px;
}
.btn-dl-pdf { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.btn-dl-pdf:hover { background: #fca5a5; }
.btn-dl-xml { background: #f3e8ff; color: #6d28d9; border: 1px solid #d8b4fe; }
.btn-dl-xml:hover { background: #d8b4fe; }
.cfdi-pending-text { color: #94a3b8; font-size: 0.9rem; font-style: italic; }
.agency-config-container {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.agency-config-header {
    margin-bottom: 2.5rem;
}

.agency-config-header h1 {
    font-size: 1.8rem;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.agency-config-header p {
    color: #64748b;
    margin: 0;
    font-size: 0.95rem;
}

.agency-config-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 2rem;
    gap: 2rem;
    align-items: start;
}

.agency-config-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.agency-config-card h2 {
    font-size: 1.1rem;
    color: #0f172a;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

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

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

.form-group-field input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.form-group-field input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-group-field small {
    display: block;
    margin-top: 0.5rem;
    color: #64748b;
    font-size: 0.8rem;
}

.toggle-wrapper-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #f1f5f9;
    margin-bottom: 2rem;
}

.toggle-label-block strong {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
}

.toggle-label-block p {
    margin: 0.25rem 0 0 0;
    font-size: 0.8rem;
    color: #64748b;
    max-width: 450px;
    line-height: 1.4;
}

/* Switch styling */
.switch-control {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch-control input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-round-fill {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .2s;
    border-radius: 24px;
}

.slider-round-fill:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
}

input:checked + .slider-round-fill {
    background-color: #3b82f6;
}

input:checked + .slider-round-fill:before {
    transform: translateX(20px);
}

.btn-save-agency-config {
    width: 100%;
    padding: 0.75rem;
    background: #0f172a;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-save-agency-config:hover {
    background: #1e293b;
}

/* Sidebar styling */
.sidebar-telemetry .telemetry-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 1px dashed #e2e8f0;
}

.sidebar-telemetry .telemetry-info-row:last-of-type {
    border-bottom: none;
}

.badge-saas-fee {
    font-weight: bold;
    color: #0f766e;
}

.info-alert-box {
    margin-top: 1.5rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 1rem;
    border-radius: 6px;
    color: #1e3a8a;
}

.info-alert-box h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
}

.info-alert-box p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
}

.agency-config-status {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.agency-config-status.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.agency-config-status.error { background: #fef2f2; border: 1px solid #fee2e2; color: #991b1b; }

.agency-config-loader {
    text-align: center;
    padding: 4rem 0;
    color: #64748b;
    font-size: 0.95rem;
}

@media (max-width: 850px) {
    .agency-config-grid {
        grid-template-columns: 1fr;
    }
}
/* UBICACIÓN: src/pages/PreparacionCargaPage.css */

.carga-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem; /* Ajuste de padding para dispositivos móviles */
    min-height: calc(100vh - 150px);
    background-color: #f4f6f9;
    box-sizing: border-box;
}

.carga-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 1.2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.carga-header h1 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.4rem; /* Tamaño optimizado para pantallas pequeñas */
}

.badge-completado-global {
    background-color: #198754;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1rem;
    animation: pulse 2s infinite;
    text-align: center;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* --- FEEDBACK VISUAL (ALERTAS) --- */
.scanner-alert {
    padding: 0.85rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: bold;
    text-align: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    word-break: break-word;
}
.alert-info { background-color: #cff4fc; color: #055160; border: 1px solid #b6effb; }
.alert-success { background-color: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.alert-error { background-color: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }

.scanner-zone {
    background: white;
    padding: 1.2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    margin-bottom: 1.5rem;
    text-align: center;
    box-sizing: border-box;
}

.camera-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* 🔴 CONTENEDOR RESPONSIVO PARA LECTOR DE CÁMARA */
#qr-reader {
    border: none !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 100% !important;
    max-width: 420px !important; /* Límite para correcta lectura de proximidad */
    box-sizing: border-box;
}

/* Forzamos al elemento de video a adaptarse de forma fluida */
#qr-reader video {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    object-fit: contain !important;
}

.camera-container small { 
    color: #6c757d; 
    margin-top: 8px; 
    font-style: italic;
    font-size: 0.8rem;
    max-width: 400px;
}

/* --- INPUT DEL ESCÁNER LÁSER --- */
.scanner-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
}
.scanner-input {
    width: 100%;
    max-width: 300px;
    padding: 12px;
    border: 2px solid #0d6efd;
    border-radius: 30px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    background-color: #e9ecef;
    transition: all 0.3s;
    box-sizing: border-box;
}
.scanner-input:focus {
    background-color: white;
    outline: none;
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.4);
}
.scanner-form small { 
    color: #6c757d; 
    margin-top: 8px; 
    font-style: italic; 
    display: block; 
    font-size: 0.75rem;
    text-align: center;
}

/* --- TABLA DE CHECKLIST --- */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto; /* Scroll horizontal nativo para tablas en celulares pequeños */
    -webkit-overflow-scrolling: touch;
}

.checklist-table { 
    background: white; 
    margin-top: 1rem; 
    width: 100%;
    min-width: 600px; /* Asegura que la tabla no colapse en pantallas muy estrechas */
    border-collapse: collapse;
}

.row-completada { background-color: #f0fdf4 !important; opacity: 0.9; }
.row-completada td { border-bottom: 1px solid #d1e7dd; }

.unidades-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.unidad-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e9ecef;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #495057;
}

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

/* ==========================================================
   ESTILOS Y TRADUCCIÓN NATIVA DE LA LIBRERÍA HTML5-QRCODE 
   ========================================================== */

#html5-qrcode-button-camera-start {
    background-color: #0d6efd !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    margin-top: 10px !important;
}

#html5-qrcode-button-camera-start:hover {
    background-color: #025ce5 !important;
}

#html5-qrcode-button-camera-stop {
    background-color: #dc3545 !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
}

#html5-qrcode-button-camera-stop:hover {
    background-color: #bb2d3b !important;
}

#qr-reader__status_span {
    font-size: 0.8rem !important;
    color: #495057 !important;
    font-weight: 500 !important;
}

#qr-reader {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}

/* Ocultar botón y acciones de subida de imagen / archivo */
#html5-qrcode-button-file-selection, 
#html5-qrcode-button-file-selection ~ span,
#qr-reader > div:not(:first-child) {
    display: none !important;
    font-size: 0 !important;
}

#html5-qrcode-button-camera-start {
    font-size: 0 !important; 
    color: transparent !important;
}

#html5-qrcode-button-camera-start::after {
    content: "Solicitar permisos de cámara" !important;
    font-size: 0.85rem !important;
    color: white !important;
}

#qr-reader span:not(#qr-reader__status_span) {
    font-size: 0 !important;
    color: transparent !important;
}

#qr-reader:not(:has(video))::after {
    content: "" !important;
    display: none !important;
}

/* Medias queries para dispositivos extremadamente pequeños */
@media (max-width: 480px) {
    .carga-page-container { padding: 1rem; }
    .carga-header { padding: 1rem; }
    .scanner-zone { padding: 1rem; }
    .carga-header h1 { font-size: 1.2rem; }
}
/* UBICACIÓN: src/pages/GestionQRPage.css */

.qr-page-container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.qr-generador-form {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    flex-wrap: wrap;
}

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

.qr-generador-form label {
    margin-bottom: 5px;
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

.qr-generador-form input {
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
}

.btn-action-print {
    background-color: #6f42c1;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    height: 42px;
    transition: background 0.3s;
}
.btn-action-print:hover { background-color: #59359a; }

/* ZONA DE ETIQUETAS (GRID PENSADO PARA IMPRESIÓN) */
.etiquetas-print-zone {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
    gap: 20px;
    margin-top: 2rem;
}

.etiqueta-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background: #fff;
    page-break-inside: avoid; /* CRÍTICO para impresión: Evita que un QR se corte a la mitad de la hoja */
}

.qr-box {
    background: white;
    padding: 5px;
    border-radius: 4px;
}

.etiqueta-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.serie-text {
    margin: 0;
    font-size: 1.1rem;
    color: #212529;
}

.estado-text {
    margin: 0;
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
}

.btn-danger {
    margin-top: 5px;
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}
.btn-danger:hover { background-color: #c82333; }

/* ==========================================================
   REGLAS CRÍTICAS DE IMPRESIÓN (Se activan al dar Ctrl+P) 
   ========================================================== */
@media print {
    /* Ocultamos menús, botones y todo lo que no sea la etiqueta */
    .no-print, header, footer, .view-mode-toggle { 
        display: none !important; 
    }
    
    body {
        background-color: white;
        margin: 0;
        padding: 0;
    }

    .qr-page-container {
        box-shadow: none;
        border: none;
        margin: 0;
        padding: 0;
        max-width: 100%;
    }

    .etiquetas-print-zone {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .etiqueta-item {
        border: 1px solid #000; /* Borde negro sólido para la etiquetadora */
        width: -webkit-fit-content;
        width: fit-content;
        margin-bottom: 10px;
    }
}
.acciones-fila-qr {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.btn-warning, .btn-danger, .btn-dark, .btn-info, .btn-secondary {
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    transition: opacity 0.2s;
}

.btn-warning { background-color: #ffc107; color: #000; }
.btn-dark { background-color: #343a40; }
.btn-info { background-color: #17a2b8; }
.btn-secondary { background-color: #6c757d; } /* <-- Nuevo color base */

.btn-danger-all {
    background-color: #6c2530;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 10px;
}

/* Manejo de estados deshabilitados para las descargas PDF */
.btn-info:disabled, .btn-secondary:disabled { 
    opacity: 0.6; 
    cursor: not-allowed; 
}

/* Efecto hover unificado para todos los botones de la fila */
.btn-warning:hover, .btn-danger:hover, .btn-dark:hover, .btn-info:hover, .btn-secondary:hover { 
    opacity: 0.85; 
}
.ges-user-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
}

.ges-card {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
}

.ges-card h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.ges-card p {
    color: #666;
    margin: 0 0 10px 0;
}

.text-muted {
    color: #888;
    font-size: 0.95rem;
}

.alert-danger {
    background-color: #f8d7da;
    color: #842029;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.auth-form, .role-update-wrapper {
    margin-top: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.form-group label {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.form-group input[type="password"] {
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

.form-group input[type="password"]:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

.btn-submit, .btn-confirm {
    width: 100%;
    padding: 14px;
    background-color: #0d6efd;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-submit:hover, .btn-confirm:hover {
    background-color: #0b5ed7;
}

.btn-confirm {
    background-color: #198754;
    margin-top: 10px;
}

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

.role-radio-group {
    display: flex;
    gap: 15px;
    margin-top: 5px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

.warning-legend-box {
    margin-top: 2rem;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.88rem;
    color: #856404;
}
/* Grupo de botones de roles */
.role-btn-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.btn-role-option {
    flex: 1 1;
    min-width: 100px;
    padding: 12px;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn-role-option:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.btn-role-option.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.modal-actions-gestion {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-cancel-action {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background 0.2s;
}

.btn-cancel-action:hover {
    background-color: #5c636a;
}
.julz-admin-wrapper { padding: 40px; background-color: #0c0f12; color: #e3e8ed; min-height: 100vh; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

.julz-admin-header-title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; border-bottom: 1px solid #1f262e; padding-bottom: 20px; }
.julz-admin-header-title h1 { color: #007bff; font-size: 28px; margin: 0 0 5px 0; font-weight: 600; }
.julz-admin-header-title p { color: #8b99a6; margin: 0; }

.julz-btn-add-tenant { background: #2563eb; color: white; padding: 10px 24px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; width: -webkit-fit-content; width: fit-content; height: -webkit-fit-content; height: fit-content; white-space: nowrap; transition: all 0.2s ease; box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2); }
.julz-btn-add-tenant:hover { background: #1d4ed8; transform: translateY(-1px); }

.julz-table-container { background: #14191f; border-radius: 8px; border: 1px solid #222b35; overflow-x: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.julz-management-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.julz-management-table th { background-color: #1a222a; color: #8b99a6; padding: 14px 16px; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; border-bottom: 2px solid #222b35; }
.julz-management-table td { padding: 14px 16px; border-bottom: 1px solid #1f262e; color: #cbd5e1; }
.julz-management-table tr:hover { background-color: #1a232d; }

.tenant-suspended { opacity: 0.5; background-color: #241414 !important; }
.domain-badge { background: #222b35; padding: 4px 8px; border-radius: 4px; font-family: monospace; color: #38bdf8; border: 1px solid #2e3b4e; }

.actions-cell-buttons { display: flex; gap: 8px; }
.julz-btn-action { padding: 6px 12px; border: none; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.julz-btn-action.edit { background: #222b35; color: #e3e8ed; border: 1px solid #334155; }
.julz-btn-action.edit:hover { background: #334155; }
.julz-btn-action.docs { background: #0369a1; color: #fff; }
.julz-btn-action.docs:hover { background: #0284c7; }

.julz-modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(4, 5, 6, 0.85); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.julz-modal-content { background: #14191f; border: 1px solid #2e3b4e; padding: 30px; border-radius: 8px; width: 500px; max-width: 90%; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.julz-modal-content h2 { color: #fff; font-size: 20px; margin-top: 0; margin-bottom: 20px; }

.julz-admin-form { display: flex; flex-direction: column; }
.julz-admin-form label { font-size: 12px; color: #94a3b8; margin-bottom: 6px; text-transform: uppercase; }
.julz-admin-form input, .julz-admin-form select { background: #0c0f12; border: 1px solid #222b35; padding: 10px; border-radius: 4px; color: #fff; margin-bottom: 16px; font-size: 14px; }
.form-bytes-helper { color: #64748b; display: block; margin-top: -12px; margin-bottom: 16px; font-size: 12px; }

.modal-buttons-wrapper { display: flex; gap: 12px; margin-top: 10px; }
.julz-btn-submit, .julz-btn-upload { background: #2563eb; color: white; padding: 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; flex: 1 1; }
.julz-btn-submit:hover, .julz-btn-upload:hover { background: #1d4ed8; }
.julz-btn-cancel, .julz-btn-close-modal { background: #222b35; color: #94a3b8; padding: 12px; border: 1px solid #334155; border-radius: 4px; cursor: pointer; }
.julz-btn-cancel:hover, .julz-btn-close-modal:hover { background: #334155; color: #fff; }

.pdf-upload-form { background: #0c0f12; padding: 15px; border-radius: 4px; border: 1px dashed #334155; margin-bottom: 20px; }
.pdf-upload-form input { color: #94a3b8; margin-bottom: 12px; }

.contratos-list-scroller { max-height: 200px; overflow-y: auto; background: #0c0f12; border-radius: 4px; padding: 10px; margin-bottom: 20px; }
.contrato-item-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #1f262e; font-size: 13px; }

.julz-admin-loader { background: #0c0f12; color: #007bff; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: monospace; }
.julz-tabs-bar { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 1px solid #222b35; padding-bottom: 10px; }
.tab-link { background: transparent; border: 1px solid #222b35; color: #8b99a6; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s; }
.tab-link:hover { background: #1a232d; color: #fff; }
.tab-link.active { background: #007bff; color: white; border-color: #007bff; box-shadow: 0 0 10px rgba(0,123,255,0.3); }

.price-cell-render { display: flex; flex-direction: column; gap: 4px; }
.badge-manual-price { background-color: #f59e0b; color: #000; font-size: 10px; font-weight: bold; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; width: -webkit-fit-content; width: fit-content; letter-spacing: 0.5px; }
.tenant-suspended-row { background-color: #1e1212 !important; opacity: 0.6; }

.julz-btn-action.suspend { background-color: #dc2626; color: white; }
.julz-btn-action.suspend:hover { background-color: #b91c1c; }
.julz-btn-action.activate { background-color: #16a34a; color: white; }
.julz-btn-action.activate:hover { background-color: #15803d; }

/* 🟢 CFDI Upload Module Mejorado */
.cfdi-upload-container { display: flex; flex-direction: column; gap: 8px; background: #14191f; padding: 10px; border-radius: 6px; border: 1px solid #1f262e; }
.cfdi-file-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cfdi-label { color: #64748b; font-weight: 600; width: 30px; }
.cfdi-input { width: 140px; font-size: 10px !important; padding: 2px !important; margin-bottom: 0 !important; background: #fff !important; color: #000 !important; }
.cfdi-link { font-weight: bold; text-decoration: none; padding: 3px 8px; border-radius: 4px; flex: 1 1; text-align: center; }
.cfdi-link.pdf { color: #ef4444; background: rgba(239,68,68,0.1); }
.cfdi-link.xml { color: #8b5cf6; background: rgba(139,92,246,0.1); }

.btn-cfdi-borrar { background: transparent; color: #94a3b8; border: none; font-size: 14px; cursor: pointer; padding: 2px 5px; transition: 0.2s; }
.btn-cfdi-borrar:hover { color: #ef4444; transform: scale(1.1); }

.cfdi-actions { display: flex; gap: 5px; justify-content: flex-end; margin-top: 5px; }
.btn-cfdi-subir { background: #10b981; color: white; border: none; padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; font-weight: bold; }
.btn-cfdi-cancel { background: #64748b; color: white; border: none; padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; }

/* Auditoría Buttons */
.btn-audit { border: none; padding: 6px 12px; border-radius: 4px; font-weight: bold; color: white; cursor: pointer; font-size: 13px; }
.btn-audit.approve { background: #10b981; }
.btn-audit.reject { background: #ef4444; }

/* 🟢 BIG TRASH CAN PARA CORTE COMPLETO */
.btn-audit.delete-big {
    background: #7f1d1d;
    color: white;
    font-size: 12px;
    padding: 6px 10px;
    border: 1px solid #991b1b;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-audit.delete-big:hover {
    background: #991b1b;
    transform: scale(1.05);
}

/* 🟢 ESTILOS OSCUROS PARA FILAS DE LA TABLA DE COBRANZA (SOLUCIONA EL FONDO BLANCO FEO) */
.julz-management-table tr.row-enrevision {
    background-color: rgba(245, 158, 11, 0.1) !important; 
    border-left: 3px solid #f59e0b;
}

.julz-management-table tr.row-pagado {
    background-color: rgba(16, 185, 129, 0.05) !important; 
    border-left: 3px solid #10b981;
}

.julz-management-table tr.row-pendiente {
    border-left: 3px solid #334155;
}

/* Headers for split tables */
.planes-table-title {
    color: #fff;
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 1px solid #1f262e;
    padding-bottom: 8px;
}
.suscripcion-cliente-wrapper {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

.suscripcion-header {
    margin-bottom: 30px;
    border-bottom: 2px solid #f0f2f5;
    padding-bottom: 15px;
}

.suscripcion-header h1 {
    font-size: 26px;
    color: #111;
    margin-bottom: 5px;
}

.suscripcion-header p {
    color: #666;
    margin: 0;
    font-size: 15px;
}

.suscripcion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-gap: 25px;
    gap: 25px;
}

.suscripcion-card {
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
}

.suscripcion-card h2 {
    font-size: 18px;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.suscripcion-info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed #f0f0f0;
    font-size: 15px;
}

.suscripcion-info-row:last-of-type {
    border-bottom: none;
}

.suscripcion-info-row span {
    color: #666;
}

.status-active { color: #27ae60; }
.status-inactive { color: #c0392b; }

.btn-renovar-suscripcion {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-renovar-suscripcion:hover {
    background-color: #0056b3;
}

.telemetry-section {
    margin-top: 20px;
}
.mt-3 { margin-top: 30px; }

.telemetry-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.telemetry-progress-bg {
    width: 100%;
    height: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
}

.telemetry-progress-fill {
    height: 100%;
    background-color: #2ecc71; 
    transition: width 0.5s ease;
}

.telemetry-progress-fill.warning { background-color: #f1c40f; } 
.telemetry-progress-fill.danger { background-color: #e74c3c; } 


.suscripcion-modal-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.suscripcion-modal-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.suscripcion-modal-content h2 {
    margin-top: 0;
    color: #2c3e50;
    margin-bottom: 10px;
}

.pago-form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.pago-form label {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
    font-weight: 600;
}

.pago-form input, .pago-form select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 15px;
}

.pago-form-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.btn-submit-pago {
    flex: 1 1;
    background-color: #27ae60;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

.btn-submit-pago:hover {
    background-color: #219653;
}

.btn-cancel-pago {
    flex: 1 1;
    background-color: #f1f2f6;
    color: #555;
    border: 1px solid #ced6e0;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-cancel-pago:hover {
    background-color: #dfe4ea;
}

.suscripcion-loader, .suscripcion-error {
    text-align: center;
    margin-top: 50px;
    font-size: 18px;
    color: #666;
}
.suscripcion-error {
    color: #e74c3c;
}
/* 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.d54aabc4.css.map*/