/* htdocs/css/styles.css - Estilos Centralizados de la Aplicación (Optimizado) */

        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; background-color: #f8f9fa; color: #212529; line-height: 1.5; }
        .container { max-width: 960px; margin: 20px auto; padding: 15px; background-color: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 8px; }
        .header { background-color: #e9ecef; padding: 20px 25px; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center; border-top-left-radius: 8px; border-top-right-radius: 8px; }
        .header h2 { margin: 0; font-size: 1.75em; color: #495057; }
        .header .buttons a { text-decoration: none; padding: 8px 15px; border: 1px solid transparent; border-radius: 4px; transition: all 0.3s ease; margin-left: 10px; font-weight: 500; }
        .header .buttons .back-btn {background-color: #6c757d; border-color: #6c757d; color: white; }
        .header .buttons .back-btn:hover { background-color: #6c757d; color: white; }
        .header .buttons .logout-btn { background-color: #dc3545; border-color: #dc3545; color: white; }
        .header .buttons .logout-btn:hover { background-color: #dc3545; color: white; }
        .container h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 15px; color: #343a40; }
        .header {

            color: white;
            padding: 10px 20px;
            text-align: center;
            position: relative;
            display: flex;
            justify-content: space-between; /* Espacio entre el contenido principal y el logo */
            align-items: center;
            min-height: 80px;
            overflow: hidden;
            background-image: url('../assets/images/background.jpg'); /* Reemplaza con la ruta de tu imagen */
            background-size: cover; /* La imagen cubrirá todo el contenedor */
            background-position: center; /* Centra la imagen */
            background-repeat: no-repeat; /* Evita que la imagen se repita */
        
        }
        .logo-container {
            z-index: 20; /* Asegura que el logo esté por encima de la imagen de fondo */
            max-height: 90%; /* Para que no sea más alto que el header */
            display: flex; /* Para centrar verticalmente la imagen dentro del contenedor */
            align-items: center;
            margin-left: 10px; /* Añade un margen a la izquierda del logo para separarlo */

        }
        
        .logo-container img {
            height: auto;
            max-height: 90%; /* Ajusta el tamaño máximo del logo */
            padding:5px; /* Empuja el footer al fondo */
      
        }
        
        .header-content h2 {
            margin: 0 0 5px 0;
            font-size: 2em;
        }
        
    .footer {
          width: 100%;
          background-color: #ccc;
          color: #171717;
          text-align: center;
          padding: 10px 10px;
          flex-shrink: 0;
          margin-top: auto; /* Empuja el footer al fondo */
    }
   
    
    

    /* --- 3. Tipografía --- */

    h2 { /* Combinado */
          text-align: center;
          margin-bottom: 10px;
          font-size: 1.2em; /* Puedes ajustar este valor base */
    }
    
    /* Título dentro del header, si necesita un tamaño o margen diferente */
    .header h2 {
          margin: 0; /* Anula el margen del h2 general si está en el header */
          /* font-size: 1.8em; /* Opcional: un tamaño diferente para el título del header */
    }
    
    h3 { /* Estilo h3 genérico o específico para news-section */
          margin-top: 0;

          color: #333;
    }

    
    p { 
          text-align: center;
          font-size: 0.8em; /* Puedes ajustar este valor base */
    }
    
    /* --- 4. Elementos de Formulario --- */
    .form-group { margin-bottom: 10px; }
    label { display: block; margin-bottom: 5px; font-weight: bold; }
    
    /* Campos de input y select (Combinado) */
    input[type="text"], input[type="date"], input[type="time"], select {
          width: 100%; /* Usar 100% con box-sizing: border-box */
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
          box-sizing: border-box; /* Incluir padding y borde en el ancho total */
    }
    
    /* Botones Generales (Usando la clase .btn o el selector button) */
    /* Es mejor usar una clase base como .btn y aplicarla a todos los botones/enlaces que deban tener ese estilo */
    
    .btn, button { /* Aplica estilos base tanto al tag button como a la clase .btn */
          display: inline-block; /* Necesario para padding/margin en <a> */
          padding: 10px 15px;
          background-color: #5cb85c; /* Verde por defecto */
          color: white !important; /* !important puede ser necesario para enlaces */
          border: none;
          border-radius: 4px;
          cursor: pointer;
          font-size: .95em;
          text-decoration: none; 
          text-align: center; 
          transition: background-color 0.3s ease;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
    }
    
    /* Estilos específicos de botón (Anulan el .btn base) */
    .copy-link-btn {
          background-color: #287ba7; /* Verde Bootstrap */
          border-color: #287ba7;
    }
      .modify-invite-btn {
      background-color: #287ba7; /* Verde Bootstrap */
      border-color: #287ba7;
      }
      .modify-invite-btn:hover {
            background-color: #226284; /* Verde Bootstrap */
            border-color: #226284;
    }

    .cancel-invite-btn {
      background-color: #b12b2b; /* Verde Bootstrap */
      border-color: #b12b2b;
      }
      .cancel-invite-btn:hover {
            background-color: #9a2626; /* Verde Bootstrap */
            border-color: #9a2626;
    }

        /* Estilos específicos de botón (Anulan el .btn base) */
      .ws-link-btn {
            background-color: #5cb85c; /* Verde Bootstrap */
            border-color: #5cb85c;
      }
      .ws-link-btn:hover {
              background-color: #488d48;
              border-color: #488d48;
      }
    
    .delete-invite-btn {
          background-color: #dc3545; /* Rojo (danger) */
          border-color: #dc3545;
    }
    .delete-invite-btn:hover {
            background-color: #c82333;
            border-color: #bd2130;
    }
    
    /* Si necesitas otros tipos de botones (ej: primario, secundario), define más clases */
    /* .btn-primary { background-color: #007bff; border-color: #007bff; } */
    /* .btn-primary:hover { background-color: #0056b3; border-color: #004085; } */
    /* etc. */
                /* Estilos para el contenedor del logo */
                .logo-container {
                      text-align: center; /* Centra la imagen si es más pequeña que el div */
                      margin-bottom: 20px; /* Espacio entre el logo y el h2 */
                      width: 100%; /* Ocupa todo el ancho del contenedor padre para centrar */
                }
                /* Estilos para la imagen del logo */
                .logo-container img {
                      max-width: 150px; /* Tamaño máximo del logo (ajusta según necesidad) */
                      height: auto; /* Mantiene la proporción */
                      display: block; /* Elimina espacio extra debajo de la imagen */
                      margin: 0 auto; /* Centra la imagen dentro del logo-container */
                }
    
                /* Media Query para ajustar en pantallas más pequeñas si es necesario */
                @media (max-width: 400px) {
                      .login-container {
                            padding: 20px; /* Reduce padding en pantallas muy pequeñas */
                      }
                        .logo-container img {
                              max-width: 120px; /* Reduce el tamaño del logo en pantallas muy pequeñas */
                        }
                }
    
    
    /* --- 5. Componentes Específicos --- */
    
    /* Landing Page (index.php) */
    .landing-image-container {
          width: 100%;
          height: 100px;
          overflow: hidden;
          position: relative;
          background-color: #ccc;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
    }
    .landing-image-container img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
    }
    .main-title { /* Título principal sobre la imagen */
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          z-index: 2;
          font-size: 2em;
          font-weight: bold;
          color: white;
          text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
          text-align: center;
          padding: 10px;
          width: 100%;
          box-sizing: border-box;
    }
    .news-section {
          text-align: center;
          margin: 10px auto;
          max-width: 800px;
          padding: 10px;
          background-color: #fff;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          width: 95%;
          box-sizing: border-box;
          flex-shrink: 0;
    }
    .news-section h3 { margin-top: 0; margin-bottom: 5px; color: #333; }
    .news-section p { color: #555; white-space: pre-wrap; }
    
    
    /* Grid de Botones de Navegación (index.php) */
    .button-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr); /* 3 columnas por defecto */
          gap: 10px;
          margin-top: 10px;
          margin-bottom: 10px;
          padding: 0 10px;
          max-width: 800px;
          max-height: 800px;
          margin-left: auto;
          margin-right: auto;
          flex-grow: 1;
          width: 95%;
          box-sizing: border-box;
    }
    .grid-button { /* Botón individual en la grid */

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          color: #333;
          border: 1px solid #ccc;
          border-radius: 8px;
          padding: 10px 10px;
          text-align: center;
          transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
          background-color: #fff;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .grid-button:hover {
          background-color: #e9e9e9;
          border-color: #bbb;
          box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }
    .grid-button img,
    .grid-button i { /* Ícono en el botón grid (imagen o Font Awesome) */
          width: 40px;
          height: 40px;
          margin-bottom: 10px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 1.75rem;
    }
    .grid-button span { /* Texto en el botón grid */
          font-size: 1em;
          font-weight: bold;
    }
    
    
    /* Formulario de Invitación (invitar.php) */
    .anfitrion-info { /* Información del anfitrión */
          text-align: center;
          margin-bottom: 20px;
    }
    .qr-section { /* Sección del código QR */
          text-align: center;
          margin-top: 20px;
    }
    #qrcode { /* Contenedor del QR generado */
          margin: 10px auto;
          padding: 10px;
          background-color: #fff;
          display: inline-block;
    }
    
    /* Listado de Invitaciones (listqr.php) */
    .filter-form { /* Formulario de filtro */
          margin-bottom: 20px;
          padding: 15px;
          background-color: #f9f9f9;
          border-radius: 5px;
    }
    .filter-form label { margin-right: 10px; font-weight: bold; }
    .filter-form select, .filter-form input[type="text"] { /* Campos del filtro */
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
            /* Ajustar ancho si es necesario, o usar flexbox en el contenedor */
    }
    .filter-form button { /* Botón del filtro - puede usar .btn */
            padding: 8px 15px;
            background-color: #007bff; /* Azul */
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
    }
    .filter-form button:hover { background-color: #0056b3; }
    

    textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 1em;
  }

  textarea {
      resize: vertical; /* Permite al usuario ajustar la altura */
      min-height: 150px;
  }


    
    /* Tabla de Invitaciones (listqr.php) */
    table {
          width: 100%;
          border-collapse: collapse;
          margin-top: 20px;
    }
    table th, table td {
          padding: 10px;
          text-align: left;
          border-bottom: 1px solid #ddd;
          white-space: nowrap; /* Evita salto de línea */
          overflow: hidden;
          text-overflow: ellipsis; /* Añade puntos suspensivos */
    }
    /* Ancho mínimo para columnas de fecha/hora */
    table th:nth-child(5), table td:nth-child(5), /* Creación */
    table th:nth-child(6), table td:nth-child(6), /* Expiración */
    table th:nth-child(8), table td:nth-child(8) /* Aprobación */
    {
          min-width: 120px; /* Ajusta si es necesario */
    }
    .no-results { text-align: center; color: #888; margin-top: 20px; }
    
    /* Filas Expandibles (listqr.php) (Unificado) */
    .invitation-summary-row {
          cursor: pointer;
          border-bottom: 1px solid #ddd;
    }
    .invitation-summary-row:hover {
          background-color: #f0f0f0;
    }
    .invitation-details-row {
          display: none; /* Ocultar por defecto */
    }
    .invitation-details-row td { /* Remueve el padding del td contenedor */
          padding: 0;
    }
    .invitation-details-expanded { /* Contenido expandido dentro de la fila de detalles */
          padding: 15px;
          background-color: #f9f9f9;
          border-top: 1px solid #ddd;
          text-align: left;
    }
    .invitation-details-expanded .detail-item { /* Cada par etiqueta/valor */
          margin-bottom: 8px;
          line-height: 1.4;
    }
    .invitation-details-expanded .detail-item .detail-label { /* Etiqueta (Código:, Invitado:, etc.) */
          font-weight: bold;
          display: inline-block;
          width: 120px; /* Ajusta para alinear etiquetas */
          margin-right: 10px;
          text-align: right;
    }
    .invitation-details-expanded .detail-item .detail-value { /* Valor del detalle */
          display: inline-block;
    }
    .button-group-expanded { /* Contenedor de botones dentro de detalles expandidos */
          margin-top: 20px;
          padding-top: 15px;
          border-top: 1px solid #eee;
          display: flex;
          justify-content: center; /* Centra los botones */
          gap: 10px; /* Espacio entre botones */
          flex-wrap: wrap; /* Permite que los botones salten de línea */
    }
    /* Ajustar márgenes de botones si se usa 'gap' en el flex container */
    .button-group-expanded .btn {
          margin: 0;
        /* Añadido: Permite que los botones se encogan y crezcan para autoajustarse */
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0; /* Permite que el cálculo inicial de tamaño sea 0, distribuyendo el espacio disponible */
        min-width: 0; /* Asegura que no tengan un ancho mínimo que impida encogerse */
          /* Si necesitas que los botones se estiren en móvil */
          /* width: 100%; */
    }
    
    
    /* Visualización de Código QR (Usado en listado o show page) */
    .qr-code-display {
            margin-top: 10px;
            text-align: center;
    }
    .qr-code-display img {
            max-width: 150px;
            height: auto;
    }
    
    
    /* Escáner (scanqr.php) */
    /* Nota: Estos estilos para el escáner ya deberían estar en scanqr_styles.css */
    /* Si los tienes duplicados, es mejor eliminarlos de styles.css */
    /*
    #scanner-container {
          position: relative;
          width: 100%;
          padding-bottom: 100%;
          margin: 0 auto 20px;
          border: 1px solid #ccc;
          box-sizing: border-box;
          overflow: hidden;
          /* max-width: 400px; /* Opcional: Limita el ancho del contenedor del escáner */
    /* }
    #scanner { /* El elemento video */
    /*       position: absolute;
    /*       top: 0;
    /*       left: 0;
    /*       width: 100%;
    /*       height: 100%;
    /*       object-fit: cover; /* Cubre el área manteniendo proporción */
    /*       display: block;
    /* }
    /* .status-message { /* Mensaje de estado en el escáner */
    /*       text-align: center;
    /*       font-size: 1.2em;
    /*       margin-bottom: 20px;
    /*       padding: 10px 20px;
    /*       border-radius: 4px;
    /*       box-sizing: border-box;
    /*       display: block;
    /*       margin-left: auto; /* Centra si es necesario */
    /*       margin-right: auto; /* Centra si es necesario */
    /*       /* Usar las clases de fondo de estado definidas abajo */
    /* }
    /* .invitation-details { /* Sección de detalles en el escáner */
    /*       margin-top: 20px;
    /*       border-top: 1px solid #eee;
    /*       padding: 15px 20px; /* Padding consistente con .container */
    /*       box-sizing: border-box;
    /*       display: none; /* Oculto por defecto */
    /* }
    /* .invitation-details p { margin: 5px 0; } /* Margen consistente */
    
    /* #approve-btn { /* Botón de aprobación (puede usar .btn) */
    /*       display: none; /* Oculto por defecto */
    /*       background-color: #28a745; /* Verde */
    /*       color: white;
    /*       border: none;
    /*       border-radius: 4px;
    /*       cursor: pointer;
    /*       font-size: 16px;
    /*       margin-top: 20px;
    /*       padding: 10px 20px; /* Padding consistente */
    /*       box-sizing: border-box;
    /*       display: block; /* Comportamiento de bloque */
    /*       margin-left: auto; /* Centra si es necesario */
    /*       margin-right: auto; /* Centra si es necesario */
    /* }
    /* #approve-btn:hover { background-color: #218838; }
    /* #approve-btn:disabled { background-color: #ccc; cursor: not-allowed; }
    */
    
    
    /* --- 6. Estilos de Estado (Colores y Fondos - Unificado) --- */
    
    /* Colores de Texto de Estado (para texto dentro de tabla o detalles) */
    .status-pendiente { color: orange; font-weight: bold; }
    .status-aprobado { color: green; font-weight: bold; }
    .status-expirado { color: gray; }
    .status-cancelado { color: red; }
    .status-desconocido { color: #888; } /* Estado por defecto 'N/A' o desconocido */
    
    
    /* Clases de Fondo y Borde de Estado (para mensajes o badges) */
    /* Puedes aplicar estas clases a .status-message o a otros elementos */
    .status-valid-bg { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
    .status-expired-bg { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    .status-approved-bg { background-color: #ffeeba; color: #856404; border: 1px solid #ffecb5; } /* Cambiado a amarillo, 'approved' vs 'valid' puede ser diferente */
    .status-error-bg { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* Mismo que expired/danger */
    .status-info-bg { background-color: #e2e3e5; color: #383d41; border: 1px solid #d6d8db; }
    
    /* --- 7. Modal de Visualización del QR --- */
    
    /* El Overlay (Fondo Oscuro) */
    #qrModalOverlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1000;
          /* display: none; se controla con JS */
    }
    
    /* El Contenido del Modal (la caja que contiene la imagen) */
    #qrModalContent {
          background-color: white;
          padding: 20px;
          border-radius: 8px;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
          max-width: 90%;
          max-height: 90%;
          overflow: auto;
          text-align: center;
    }
    
    /* La Imagen del QR dentro del Modal */
    #qrModalImage {
          max-width: 100%;
          max-height: 80vh; /* Limita la altura máxima al 80% de la altura del viewport */
          height: auto; /* Mantiene la proporción */
          display: block; /* Elimina espacio extra bajo la imagen */
          margin: 0 auto; /* Centra la imagen si es más pequeña que el contenedor */
    }
    



    

    
    .login-container { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    .form-group { margin-bottom: 10px; }
    label { display: block; margin-bottom: 5px; font-weight: bold; }
    input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
    button { width: 100%; padding: 10px; background-color: #5cb85c; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
    button:hover { background-color: #4cae4c; }
    .error { color: red; text-align: center; margin-bottom: 15px; }
    
    /* --- 8. Media Queries (Ajustes Responsivos) --- */
    main { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f4f4f4; }
    

       /* Estilos para el estado de la invitación */
        .status-pendiente { color: orange; font-weight: bold; }
        .status-aprobado { color: green; font-weight: bold; }
        .status-expirado { color: gray; font-weight: bold; }
        .status-cancelado { color: red; font-weight: bold; }
        .status-desconocido { color: purple; font-weight: bold; } /* Estado por defecto */

        /* Estilos para las filas de detalles expandidos */
        .invitation-details-row td {
            padding: 10px;
            background-color: #f9f9f9; /* Fondo ligeramente diferente para la fila de detalles */
            border-bottom: 1px solid #ddd;
        }
        .invitation-details-expanded {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #eee; /* Separador visual */
        }
        .detail-item {
            margin-bottom: 8px; /* Espacio entre cada item de detalle */
        }
        .detail-label {
            font-weight: bold;
            display: inline-block; /* Permite controlar el ancho */
            width: 120px; /* Ancho fijo para alinear las etiquetas (ajusta según necesidad) */
            margin-right: 10px;
            text-align: right; /* Alinea el texto de la etiqueta a la derecha */
        }
        .detail-value {
            display: inline-block; /* Permite que el valor siga a la etiqueta */
            word-break: break-all; /* Evita que códigos largos desborden el contenedor */
        }

        /* Estilos para el grupo de botones expandido */
        .button-group-expanded {
             margin-top: 15px;
             padding-top: 10px;
             border-top: 1px solid #eee;
             text-align: center; /* Centra los botones */
             display: flex; /* Usar flexbox para alinear botones */
             justify-content: center; /* Centra los botones horizontalmente */
             gap: 10px; /* Espacio entre botones */
             flex-wrap: wrap; /* Permite que los botones se envuelvan en pantallas pequeñas */
        }
         /* Estilo base para los botones (usando .btn de styles.css si existe) */
         .button-group-expanded .btn {
            display: flex;
            flex-direction: column;
            align-items: center; /* Centrar el icono y el texto horizontalmente */
            justify-content: center; /* Centrar el contenido verticalmente (si es necesario) */
             margin: 0; /* Anula márgenes si el contenedor flex usa gap */
         }

         /* Estilo específico para el botón Copiar */
         .copy-link-btn {
             background-color: #17a2b8; /* Info color */
             border-color: #17a2b8;
             color: white;
         }
         .copy-link-btn:hover {
             background-color: #138496;
             border-color: #117a8b;
         }

          /* Estilo específico para el botón Eliminar */
          .delete-invite-btn {
              background-color: #dc3545; /* Danger color */
              border-color: #dc3545;
              color: white;
          }
          .delete-invite-btn:hover {
              background-color: #c82333;
              border-color: #bd2130;
          }

          /* Estilo específico para el botón Cancelar */
          .cancel-invite-btn {
              background-color: #ffc107; /* Warning color */
              border-color: #ffc107;
              color: #212529; /* Texto oscuro */
          }
          .cancel-invite-btn:hover {
              background-color: #e0a800;
              border-color: #d39e00;
          }

           /* Estilo específico para el botón Reactivar */
           .reactivate-invite-btn {
               background-color: #28a745; /* Success color */
               border-color: #28a745;
               color: white;
           }
           .reactivate-invite-btn:hover {
               background-color: #218838;
               border-color: #1e7e34;
           }


        /* Estilos para la modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semi-transparente */
            display: flex; /* Usar flexbox para centrar el contenido */
            justify-content: center; /* Centrar horizontalmente */
            align-items: center; /* Centrar verticalmente */
            z-index: 1000; /* Asegura que esté por encima de otros elementos */
            /* display: none; /* Inicialmente oculto, se muestra con JavaScript */
        }

        .modal-content {
            background-color: #fff; /* Fondo blanco para el contenido */
            padding: 20px; /* Espacio interno */
            border-radius: 8px; /* Bordes redondeados */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Sombra */
            max-width: 90%; /* Ancho máximo del contenido */
            max-height: 90%; /* Altura máxima del contenido */
            overflow: auto; /* Añade scroll si el contenido es más grande que el modal */
            text-align: center; /* Centra el contenido como la imagen QR */
        }

        .modal-content img {
            max-width: 100%; /* Asegura que la imagen no se desborde del contenedor */
            height: auto; /* Mantiene la proporción */
            display: block; /* Elimina espacio extra debajo de la imagen */
            margin: 0 auto; /* Centra la imagen dentro del modal-content */
            cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
        }



        .vertical-button {
            display: flex;
            flex-direction: column;
            align-items: center; /* Centrar el icono y el texto horizontalmente */
            justify-content: center; /* Centrar el contenido verticalmente (si es necesario) */
            padding: 8px 12px; /* Ajustar el padding para el tamaño deseado */
            border-radius: 4px;
            cursor: pointer;
            text-align: center; /* Asegurar que el texto esté centrado */
            width: 80px; /* Ancho fijo para todos los botones */
            height: 80px; /* Alto fijo para todos los botones */
          }
          
          .vertical-button i {
            margin-bottom: 4px; /* Espacio entre el icono y el texto */
            font-size: 20px; /* Tamaño del icono */
          }
          
          .vertical-button span {
            font-size: 12px; /* Tamaño del texto */
            display: block; /* Asegurar que el texto se comporte como un bloque */
          }
          
          .vertical-button.icon-green {
              background-color: #e6f4e5; /* Verde muy claro */
              border-color: #a5d6a7;
              color: #388e3c;
          }
          .vertical-button.icon-blue {
              background-color: #e3f2fd; /* Azul muy claro */
              border-color: #90caf9;
              color: #1e88e5;
          }
          .vertical-button.icon-red {
              background-color: #d32f2f; /* Rojo muy claro */
              border-color: #d32f2f;
              color: #d32f2f;
          }
          
          .vertical-button:hover {
            opacity: 0.8; /* Reduce la opacidad al pasar el mouse */
          }


             /* --- Estilos Modal (Base) --- */
        /* CORRECCIÓN: Asegurar que el modal esté oculto por defecto */
        .modal {
            display: none; /* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ESTADO INICIAL OCULTO */
            position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%;
            overflow-y: auto; background-color: rgba(0, 0, 0, 0.5);
            /* Flex para centrar cuando sea visible */
            /* display: flex; << Se quita de aquí, lo pone JS */
            justify-content: center; align-items: center;
            padding: 10px; box-sizing: border-box;
        }
        .modal-content { background-color: #ffffff; padding: 25px 30px; border-radius: 8px; border: none; width: 100%; max-width: 500px; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); animation: fadeInModal 0.3s ease-out; box-sizing: border-box; }
        @keyframes fadeInModal { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
        .modal-content h3 { margin-top: 0; margin-bottom: 25px; font-size: 1.5em; color: #343a40; text-align: center; }
        .form-group { margin-bottom: 18px; }
        .form-group label { display: block; font-weight: 100; color: #495057; margin-bottom: 6px; font-size: 0.9em; }
        .form-group input, .form-group select { width: 100%; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 4px; box-sizing: border-box; font-size: .95em; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
        .form-group input:focus, .form-group select:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
        .form-group small { font-size: 0.8em; color: #6c757d; margin-top: 4px; display: inline-block; }
        .bottom-half { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
        .bottom-half .form-group { margin-bottom: 0; }
        .form-actions { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .btn-primary, .cancel-button { width: 100%; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; font-weight: 500; transition: background-color 0.2s ease, opacity 0.2s ease; box-sizing: border-box; }
        .btn-primary { background-color: #28a745; color: white; }
        .btn-primary:hover { background-color: #218838; }
        .cancel-button { background-color: #6c757d; color: white; }
        .cancel-button:hover { background-color: #5a6268; }
        .error-message { color: #dc3545; margin-top: 4px; font-size: 0.8em; font-weight: 500; display: none; }
        .error-message.show { display: block; }
        input.error, select.error { border-color: #dc3545 !important; }
        input.error:focus, select.error:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }



    /* En pantallas más estrechas que 767px */
    @media (max-width: 767px) {
          .button-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 columnas */
                gap: 8px;
                padding: 0 8px;
          }
    
 
    
          /* Ajusta el padding en el contenido de los detalles expandidos */
          .invitation-details-expanded {
               padding: 10px;
          }
    
          /* Ajusta el ancho de la etiqueta en los detalles expandidos si es necesario en móvil */
          .invitation-details-expanded .detail-item .detail-label {
                width: 100px; /* Un poco más estrecho */
                text-align: left; /* Alinear a la izquierda si no hay espacio para alinear a la derecha */
          }
            .invitation-details-expanded .detail-item .detail-value {
                  display: block; /* Fuerza el valor a una nueva línea */
            }
    
          /* Ajusta el grupo de botones si necesitas que se apilen o cambien el gap */
            .button-group-expanded {
                  gap: 5px;
                  /* flex-direction: column; */ /* Opcional: apila los botones en columnas */
                  /* align-items: stretch; */ /* Opcional: estira los botones apilados */
            }
            /* .button-group-expanded .btn { width: 100%; } */ /* Opcional: botones apilados ocupan todo el ancho */
    
    }
    
    
    /* En pantallas más estrechas que 480px (intentando forzar 3 columnas en grid) */
    @media (max-width: 480px) {
          .button-grid {
                grid-template-columns: repeat(3, 1fr); /* Mantiene 3 columnas */
                gap: 5px; /* Reduce espacio */
                padding: 0 5px;
          }
          .grid-button { /* Ajustes de tamaño en botones grid */
                  padding: 10px 5px;
          }
          .grid-button img,
          .grid-button i { /* Ícono más pequeño */
                width: 30px;
                height: 30px;
                margin-bottom: 5px;
                font-size: 1.35rem;
          }
          .grid-button span { /* Texto más pequeño */
                  font-size: 0.75em;
          }
    }
    
    /* Media query para ajustar tamaño de imagen modal si la altura es limitada */
    @media (max-height: 600px) { /* Puedes ajustar este valor */
          #qrModalImage {
                max-height: 70vh; /* Reduce la altura máxima del QR en pantallas más cortas */
          }
    }
    /* Media query para pantallas más pequeñas (iPhone XR - 414px de ancho) */
@media only screen and (max-width: 414px) {
      .button-grid {
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Cambia a 2 columnas en pantallas pequeñas */
      }
      .grid-button {
          padding: 12px; /* Ajusta el padding para pantallas más pequeñas */
      }
      .grid-button img,
      .grid-button i {
          width: 30px;
          height: 30px;
          margin-bottom: 5px;
          font-size: 1.35rem;
      }
      .grid-button span {
          font-size: 0.9em; /* Ajusta el tamaño del texto */
      }
  }
  
  /* Media query para pantallas aún más pequeñas (opcional - puedes ajustar el valor)*/
  @media only screen and (max-width: 320px) {
      .button-grid {
          grid-template-columns: 1fr; /* Cambia a 1 columna en pantallas muy pequeñas */
      }
  }

  
  
        /* --- Media Query para Móviles --- */
        @media (max-width: 600px) {
            /* Aplicar layout fijo y anchos porcentuales en móvil */
            .user-table {
                table-layout: fixed;
                width: 100%;
            }
 
            /* CORRECCIÓN: Aplicar nowrap/ellipsis SOLO a las celdas de datos, no a los headers */
            /* Dejar que los headers se ajusten o trunquen si es necesario, pero sin forzar nowrap */
            .user-table td:nth-child(1), /* Lote data */
            .user-table td:nth-child(3){ /* name data */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                 max-width: 110px;
            } /* Nombre data */
            .user-table td:nth-child(4), /* Nombre data 
 
            /* CORRECCIÓN: Definir anchos porcentuales para las columnas VISIBLES */
            .user-table th:nth-child(1), .user-table td:nth-child(1) { width: 15%; } /* Área */
            .user-table th:nth-child(3), .user-table td:nth-child(3) { width: 30%; } /* Nombre */
            .user-table th:nth-child(4), .user-table td:nth-child(4) { width: 25%; } /* Teléfono */
            /* Columna Acción (6) visible: reservar espacio para botones */
            .user-table th:nth-child(6), .user-table td:nth-child(6) { width: auto; min-width: 120px; white-space: nowrap; }
            /* Las ocultas (2 y 5) no necesitan ancho */
 
            /* Estilos generales de celdas en móvil */
            .user-table th, .user-table td {
                padding: 8px 5px;
                font-size: 0.80em;
                border-right: none;
                vertical-align: middle;
                border-bottom: 1px solid #dee2e6;
            }
            .user-table tbody tr:last-child td { border-bottom: none; }
 
 
 
             /* Ajustes modal en móvil si es necesario (ej: menos padding) */
             .modal-content { padding: 20px; }
             .modal-content h3 { font-size: 1.3em; margin-bottom: 20px;}
             .bottom-half { gap: 15px; } /* Menos espacio en grid */
             .form-actions { gap: 10px; margin-top: 25px; }
         }
 
         /* Ajustes Modal Desktop (igual que antes) */
         @media (min-width: 768px) {
              .modal-content { max-width: 600px; }
         }

/* ========== Dark mode (autodetecta preferencia del sistema) ========== */
@media (prefers-color-scheme: dark) {
    body { background-color: #1a1a1a; color: #e8e8e8; }
    main { background-color: #1a1a1a; }
    .container { background-color: #2d2d2d; box-shadow: 0 0 10px rgba(0,0,0,0.4); }
    .header { background-color: #252525; border-bottom-color: #404040; }
    .header h2, .header h3 { color: #e0e0e0; }
    .header .buttons .back-btn { background-color: #5a6268; border-color: #5a6268; }
    .container h3, h3 { color: #d0d0d0; }
    .footer { background-color: #252525; color: #c0c0c0; }
    .news-section { background-color: #2d2d2d; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
    .news-section h3 { color: #d0d0d0; }
    .news-section p { color: #b0b0b0; }
    .landing-image-container { background-color: #252525; }
    .grid-button { background-color: #3d3d3d; color: #e8e8e8; border-color: #505050; }
    .grid-button:hover { background-color: #4a4a4a; color: #fff; }
    input[type="text"], input[type="date"], input[type="time"], input[type="password"],
    input[type="email"], input[type="tel"], select, textarea {
        background-color: #2d2d2d; color: #e8e8e8; border-color: #505050;
    }
    .login-container {
        background-color: #252525;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        border: 1px solid #404040;
    }
    .login-container .form-group label { color: #d0d0d0; }
    .login-container p { color: #a0a0a0; }
    .login-container .error { color: #f88; }
    .form-group label { color: #d0d0d0; }
    table { border-color: #404040; }
    table th, table td { border-bottom-color: #404040; color: #e0e0e0; }
    table th { background-color: #252525; color: #e0e0e0; }
    table tbody tr { background-color: #2d2d2d; }
    table tbody tr:hover { background-color: #353535; }
    table.user-table, .user-table th, .user-table td { border-color: #404040; }
    .user-table th { background-color: #252525; color: #e0e0e0; }
    .user-table tbody tr { background-color: #2d2d2d; }
    .user-table tbody tr:hover { background-color: #353535; }
    .user-table td { color: #e0e0e0; }
    .no-results { color: #a0a0a0; }
    .invitation-summary-row:hover { background-color: #353535; }
    .invitation-details-expanded { background-color: #252525; border-top-color: #404040; color: #d0d0d0; }
    .modal-content, .modal { background-color: #2d2d2d; }
    .modal-content h3, .modal h3 { color: #e0e0e0; }
    .modal-content label, .modal label { color: #d0d0d0; }
    .filter-actions-container, .action-section { color: inherit; }
    .dashboard-section { background-color: #2d2d2d; }
    .backup-container { background-color: #2d2d2d; color: #e8e8e8; }
    .backup-container h2, .backup-container h3 { color: #e0e0e0; }
}