/* ===============Estilos Generales============= */

html, body {
    height: 100%;
    margin: 0;
    /*  font-family: 'Open Sans', Arial, sans-serif;*/
    /*  font-family: 'Roboto', Helvetica, sans-serif;*/
     font-family: 'Poppins', Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
}

h1, h2, h3 {
  font-weight: 600; /* Semi-Bold para encabezados */
  color: #333;
  margin: 1em 0;
  text-align: center;
}
p, label, input, select, button {
  font-weight: 400; /* Regular para texto normal */
  font-size: 1em;
}

/* Barra Superior */
.top-bar {
    width: 100%;
    background-color: rgb(242, 129, 53);
    color: white;
    padding: 15px 0;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 1000;
    border-radius: 5px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.top-bar h1.header-title {
    margin: 0;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Contenedor principal */
.main-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 80px; /* Para dar espacio debajo del header */
/*    margin-top: 50px;*/
    width: 100%;             /* Asegura que ocupe todo el ancho */
    box-sizing: border-box;
}

/* Contenedor de Login (Original de style.css) */
.login-container {
    width: 100%;
    max-width: 400px;
    padding: 2em;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Formularios Generales (Original de style.css) */
form {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5em;
}

label {
    margin-bottom: 0.5em;
    font-weight: bold;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], select {
    height: 40px;
    padding: 0.75em;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    margin-bottom: 15px;
    transition: border-color 0.3s;
}

select {
    height: 48px; /* Original de style.css, puede necesitar ajuste con otros estilos de select */
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, select:focus {
    border-color: #007bff;
    outline: none;
}

/* Botones Generales */

button, .back-button, .search-button, button[type="submit"], input[type="submit"] {
    padding: 0.75em;
    border: none;
    background-color: rgb(242, 129, 53); /* NARANJA PRINCIPAL */
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Añadido transform transition */
    width: 100%; /* Esto puede ser muy restrictivo, considerar anular en clases específicas */
    text-decoration: none;
}

button:hover, .back-button:hover, .search-button:hover, button[type="submit"]:hover, input[type="submit"]:hover {
    background-color: #e0712e; /* NARANJA HOVER */
    transform: translateY(-2px); /* Efecto hover general */
}

/* Tablas Generales */
.country-table { /* Usado en area_privada.php */
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sugerencia de la respuesta anterior */
    border-radius: 5px; 
    overflow: hidden;
    margin-bottom: 20px; /* Espacio general */
}
.country-table th, .country-table td {
    border: 1px solid #ddd;
    padding: 12px 15px; /* Ajustado desde 8px */
    text-align: center; /* Original */
}
.country-table th {
    background-color: rgb(242, 129, 53); /* NARANJA PRINCIPAL */
    color: white;
}
.country-table td:hover { /* Esto es para la celda, no la fila */
    background-color: #ddd; /* Original */
}
.country-table tr:hover td { /* Efecto al pasar el ratón sobre una fila completa */
  background-color: #f5f5f5;
}
.country-table tr:nth-child(even) {
    background-color: #f9f9f9;
}


/* Footer */
.footer {
    width: 100%;
    background-color: rgb(242, 129, 53);
    color: #fff;
    padding: 10px 0;
    text-align: center;
    margin-top: auto;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.footer-section {
    padding: 10px;
}

.footer-section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-section li {
    margin: 5px 0;
}

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

/* Estilos para mensajes informativos y enlaces en contenedores */
.container p, .container h2 { /* Afecta a varios .container si no se anula */
    color: #333;
    text-align: center;
    margin: 1em 0;
}

.container p a {
    color: #007bff;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s;
}

.container p a:hover {
    color: #0056b3;
}

/* =============Estilos de index.php============= */

.index-button-container {
    text-align: center;
    padding-top: 50px; /* Considerar si es padding o margin */
}

.index-button-container h1 {
    margin-bottom: 30px;
    color: #333;
}

.menu-access-button {
    display: block;
    max-width: 350px;
    margin: 10px auto;
    padding: 0.75em;
    background-color: rgb(242, 129, 53); /* COLOR NARANJA PRINCIPAL */
    color: #fff !important; /* !important puede ser problemático, revisar si es necesario */
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    width: auto; /* Anular el width:100% de button general */
}
.menu-access-button:hover {
    background-color: #e0712e; /* COLOR NARANJA PARA HOVER */
    transform: translateY(-2px);
}
.menu-access-button.admin-specific-button {
    /* background-color: #f08a5d; */ /* Mantenido como naranja base */
}
/* .menu-access-button.admin-specific-button:hover { background-color: #e67e22; } */

.menu-access-button.logout-button, .logout-button { /* Unificando .logout-button de style.css */
    background-color: #e0712e; /* Color más oscuro para destacar logout */
    width: auto; /* Anular el width:100% de button general */
    padding: 0.75em; /* Asegurar consistencia */
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s, transform 0.2s ease;
    margin-top: 10px; /* de .logout-button original */
}
.menu-access-button.logout-button:hover, .logout-button:hover {
    background-color: #c65a1d;
    transform: translateY(-2px);
}

/* login y register usan el .menu-access-button base */

/* ========Estilos de manage_users.php============ */

.user-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra para la tabla */
    border-radius: 5px;
    overflow: hidden;
}
.user-table th, .user-table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: center;
}
.user-table th {
    background-color: #f28135; /* Naranja específico para esta tabla */
    color: white;
}
.user-table tr:hover td {
  background-color: #f9f9f9; /* Hover para filas */
}
/* Botones de acción en manage_users.php y view_registered_scanners.php */
.edit-button, .delete-button { /* Comunes a manage_users y view_registered_scanners */
    padding: 8px 16px;
    color: #fff !important; /* Evitar problemas con .menu-access-button */
    text-decoration: none;
    border-radius: 5px;
    margin: 2px; /* De view_registered_scanners */
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block; /* Para que se comporten bien en línea */
    width: auto; /* Anular width:100% */
    border: none;
}
.edit-button {
    background-color: #007bff; /* Azul */
}
.edit-button:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}
.delete-button {
    background-color: #dc3545; /* Rojo */
}
.delete-button:hover {
    background-color: #c82333;
    transform: translateY(-1px);
}
/* .action-button es usado en manage_users, create_user, edit_user */
.action-button {
    padding: 10px 20px; /* Ajustado desde manage_users */
    color: #fff !important;
    text-decoration: none;
    border-radius: 5px;
    background-color: #28a745; /* Verde */
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block;
    width: auto; /* Anular width:100% */
    border: none;
    text-align: center; /* de create_user */
    cursor: pointer; /* de create_user */
}
.action-button:hover {
    background-color: #218838;
    transform: translateY(-1px);
}

/* ============================================= */
/* --- Estilos de register.php --- */
/* ============================================= */
/* Estilos del formulario de registro (inputs heredan de general) */
/* El input[type="submit"] ya tiene estilos generales, pueden ser suficientes */

.alert-box { /* Alertas de register.php */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 30px;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    border-radius: 5px;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease-out;
    text-align: center;
    font-size: 16px;
    max-width: 80%;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}
.alert-box.success { background-color: #28a745; }
.alert-box.error { background-color: #dc3545; }
.alert-box.fade-out { opacity: 0; }
.alert-box i { margin-right: 10px; } /* Para el icono */


/* ============================================= */
/* --- Estilos de view_registered_scanners.php --- */
/* ============================================= */
.main-content.view-scanners { /* Clase específica para evitar conflicto de margin-top general */
    margin-top: 0;
}

.search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.search-bar input { /* Hereda estilos generales, pero se ajusta el width y border-radius */
    width: 300px;
    border-radius: 4px 0 0 4px;
    margin-bottom: 0; /* Anular margin-bottom general de input */
    border: 1px solid #ddd; 
    font-size: 16px;
    padding: 8px; 
}
.search-button-wrapper {
    display: flex;
    align-items: center;
}
.search-bar button { /* Anula el width:100% de button general */
    padding: 10px; /* Ajustar padding para que la altura coincida con el input (input height 40px, padding 0.75em (12px) => 12+12+16=40. button padding 10px -> 10+10+16=36. Necesita ser 12px o 0.75em) */
    height: 40px; /* Forzar altura */
    background-color: #007bff; /* Azul */
    border: none;
    color: white;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 14px; /* O 1em para consistencia */
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto; /* Muy importante */
}
.search-bar button:hover {
    background-color: #0056b3; /* Azul hover */
}

.accordion {
    cursor: pointer;
    padding: 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    background-color: #f7f7f7;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 5px; /* Espacio entre accordions */
    border-radius: 4px;
}
.accordion:hover, .accordion.active {
    background-color: #e0e0e0;
}
.panel {
    padding: 15px; /* Ajustado desde 0 15px */
    display: none;
    overflow: hidden;
    background-color: white;
    border: 1px solid #ddd; /* Borde para el panel */
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.user-scanners-table { /* Tabla dentro del accordion */
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.user-scanners-table th, .user-scanners-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}
.user-scanners-table th {
    background-color: #f5f5f5; /* Gris claro para cabecera de esta tabla */
}
.user-scanners-table tr:hover td {
    background-color: #efefef;
}
/* .edit-button y .delete-button ya están definidos arriba */

/* Modal (común a view_registered_scanners.php y area_privada.php) */
.modal {
    display: none; /* Controlado por JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Ligeramente más oscuro */
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Encima de .top-bar */
    padding: 20px; /* Para que no pegue a los bordes en pantallas pequeñas */
    box-sizing: border-box;
}
.modal-content {
    background: white;
    padding: 25px 30px;
    width: 90%;
    max-width: 550px; /* Unificado */
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.modal-image { /* De area_privada.php */
    width: 100px;
    margin-bottom: 15px; /* Ajustado */
}
.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}
.modal-content p {
    margin-bottom: 15px;
    text-align: left;
}
.modal-content p strong {
    color: #555;
}
.modal-content input, .modal-content button { /* Para inputs y buttons dentro del modal */
    width: 100%; /* Anula width:auto de algunos botones */
    margin: 10px 0; /* Original de view_registered_scanners */
    padding: 10px; /* Consistencia para botones modales */
}
.modal-content button {
    /* Estilos base de botón ya se aplican, aquí especificidad */
    /* Puedes diferenciar botones de confirmación/cancelación */
    margin-right: 10px; /* Para separar botones si están en línea */
}
.modal-content button:last-child {
    margin-right: 0;
}
.modal-content button.confirm-button { /* Clase sugerida */
    background-color: #28a745; /* Verde */
}
.modal-content button.confirm-button:hover {
    background-color: #218838;
}
.modal-content button.cancel-button { /* Clase sugerida */
    background-color: #6c757d; /* Gris */
}
.modal-content button.cancel-button:hover {
    background-color: #5a6268;
}


/* ============================================= */
/* --- Estilos de admin.php --- */
/* ============================================= */
.main-container.admin-page { /* Para admin.php, usar una clase si .main-container se usa en otro lado */
    margin-top: 100px; /* Ajustado desde 150px */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Para que el centrado funcione bien */
    padding: 20px;
    box-sizing: border-box;
}
.admin-title {
    color: #333;
    font-size: 24px;
    margin-bottom: 30px; /* Aumentado */
    text-align: center;
}
.admin-panel {
    width: 90%;
    max-width: 800px;
    padding: 30px; /* Aumentado */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra más suave */
}
.admin-columns {
    display: flex;
    justify-content: space-around; /* Ajustado */
    gap: 30px; /* Aumentado */
    flex-wrap: wrap;
}
.column {
    flex: 1;
    min-width: 280px; /* Aumentado */
    padding: 15px;
    text-align: center;
    background-color: #f9f9f9; /* Fondo suave para columnas */
    border-radius: 6px;
}
.menu-group-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    font-size: 18px;
}
.menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.admin-button { /* Botones específicos del panel de admin */
    display: block;
    padding: 12px; /* Aumentado */
    margin: 8px 0; /* Ajustado */
    background-color: #007bff; /* Azul */
    color: #fff !important;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: auto; /* Anular width:100% general */
    border: none;
}
.admin-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}
.back-btn-container { /* Para admin.php */
    margin-top: 30px; /* Aumentado */
    text-align: center; /* Para centrar el botón si es inline-block */
}
/* El .back-button general de style.css se aplica. Si se quiere uno específico para admin: */
.back-button.admin-page-back {
    background-color: #28a745; /* Verde */
    padding: 12px 25px;
    width: auto;
}
.back-button.admin-page-back:hover {
    background-color: #218838;
}


/* ============================================= */
/* --- Estilos de area_privada.php --- */
/* ============================================= */
/* .country-table ya está definido arriba */

.scanner-registration-form { /* Formulario en area_privada.php */
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center; /* Alinea verticalmente los items si tienen alturas diferentes */
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin-top: 30px;
}
.scanner-registration-form label {
    flex-basis: 100%; /* Labels ocupan todo el ancho */
    margin-bottom: 5px;
    color: #333;
}
.scanner-registration-form input[type="text"],
.scanner-registration-form input[type="date"] {
    width: 220px;
    padding: 10px;
    margin-bottom: 10px;
    /* Hereda otros estilos de input general */
}
.scanner-registration-form button[type="submit"] {
    padding: 10px 18px;
    margin-top: 10px; /* Ajustado desde 5px */
    /* Hereda estilos de botón general o .action-button si se le aplica la clase */
    background-color: #F28135; /* Azul para este formulario específico */
    width: auto; /* Anular width:100% general */
}
.scanner-registration-form button[type="submit"]:hover {
    background-color: #cd5a0d ;
}

.copy-button { /* Botón de copiar en area_privada.php */
    margin-left: 8px;
    padding: 6px 10px; /* Ajustado desde inline */
    font-size: 0.9em;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0; /* Ajustado desde #f5f5f5 */
    color: #333;
    transition: background-color 0.2s ease, transform 0.2s ease;
    width: auto; /* Anular width:100% general */
}
.copy-button:hover {
    background-color: #e0e0e0;
    transform: translateY(-1px);
}

/* Utilidades para reemplazar inline styles de area_privada.php */
.pt-50 { padding-top: 50px; }
.pb-50 { padding-bottom: 50px; }
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }


/* ============================================= */
/* --- Estilos de create_user.php y edit_user.php --- */
/* ============================================= */
/* .container específico para estas páginas. Renombrar a .form-container-styled para evitar conflicto */
.form-container-styled {
    width: 90%; /* Ajustado desde 80% */
    max-width: 600px;
    margin: 20px auto; /* Ajustado */
    padding: 30px; /* Aumentado */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra más suave */
}
.form-container-styled h1 {
    text-align: center;
    margin-bottom: 25px; /* Ajustado */
    font-size: 22px; /* Ajustado */
    color: #333;
}
.form-container-styled form label { /* Ya hay un 'label' general, esto añade especificidad */
    display: block; /* Asegurar */
    font-weight: bold;
    margin-bottom: 8px; /* Aumentado */
    color: #333;
}
.form-container-styled form input[type="text"],
.form-container-styled form input[type="email"],
.form-container-styled form input[type="password"],
.form-container-styled form select {
    width: 100%; /* Asegurar, ya que input general tiene width:100% */
    padding: 12px; /* Aumentado */
    margin-bottom: 20px; /* Aumentado */
    /* Heredan border, border-radius de inputs generales */
}
/* .action-button (para Guardar Usuario/Cambios) ya está definido arriba y es verde */
/* .back-button ya está definido y es naranja, si se quiere diferente, crear clase específica */
.form-container-styled .back-button {
    /* Si se quiere un estilo de botón de volver específico para estos formularios */
    display: inline-block; /* Para centrar con text-align:center en el div padre */
    width: auto; /* Anular width:100% */
}


/* ============================================= */
/* --- Estilos para Downloads List (Original de style.css) --- */
/* ============================================= */
.downloads-list {
    list-style-type: none;
    padding: 0;
}
.downloads-list li {
    margin: 10px 0;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
}
.downloads-list a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}
.downloads-list a:hover {
    color: #0056b3;
}

/* ===============Responsive ====================== */
@media (max-width: 768px) { /* Punto de ruptura más común */
    .admin-columns {
        flex-direction: column; /* Apilar columnas en admin */
    }
    .search-bar {
        flex-direction: column;
        gap: 10px;
    }
    .search-bar input, .search-bar button {
        width: 100%;
        border-radius: 4px; /* Resetear border-radius para que no se vea raro apilado */
    }
    .scanner-registration-form input[type="text"],
    .scanner-registration-form input[type="date"] {
        width: 100%; /* Inputs del formulario de registro de scanner a full width */
    }
}

@media (max-width: 600px) {
    /* .container de create_user/edit_user ya es responsivo con width:90% y max-width */
    /* El .container general de style.css tiene este padding: */
    /* div.container { padding: 1.5em; margin-top: 130px; } /* Esto es muy genérico */

    .top-bar h1.header-title {
        font-size: 1.2em;
    }
    .main-content {
        padding-top: 70px; /* Ajustar si es necesario */
        padding-left: 10px;
        padding-right: 10px;
    }
    .login-container {
        padding: 1.5em;
    }
    .modal-content {
        padding: 20px;
    }
}