/* === ESTILOS GLOBALES Y COLORES BASE === */
:root {
    --color-azul-principal: #0B003E;    /* Azul corporativo GW Ignite */
    --color-azul-secundario: #0056b3; /* Azul para botones de acción primarios */
    --color-azul-mas-oscuro: #0a2351; /* Otro azul, ej. para encabezados de tabla */
    
    --color-naranja-acento: #f39c12;
    --color-naranja-acento-hover: #e67e22;
    
    --color-dorado-forms: #c89c4c;      /* Dorado para botones de confirmación en modales */
    --color-dorado-forms-hover: #b08940;

    --color-blanco: #ffffff;
    --color-gris-fondo-login: #f0f2f5;
    --color-gris-fondo-app: #e9ebee; 
    --color-gris-elementos: #f4f4f8; 
    --color-gris-bordes: #ddd; /* Un gris un poco más oscuro que #eee */
    --color-gris-bordes-modal: #888;
    --color-gris-texto-claro: #666;
    --color-gris-texto-medio: #555;
    --color-gris-texto-oscuro: #333;
    --color-texto-principal: #2c3e50; 
    
    --color-rojo-error: #D32F2F; /* Rojo para mensajes de error de login */
    --color-rojo-error-modal: #721c24; /* Rojo más oscuro para texto en fondos claros */
    --color-rojo-error-bg: #f8d7da;
    --color-rojo-error-border: #f5c6cb;

    --color-verde-exito-text: #155724;
    --color-verde-exito-border: #c3e6cb;
    --color-verde-exito-bg: #d4edda;

    --n8n-info-text: #0c5460;
    --n8n-info-border: #bee5eb;
    --n8n-info-bg: #d1ecf1;
    --n8n-warning-text: #856404;
    --n8n-warning-border: #ffeeba;
    --n8n-warning-bg: #fff3cd;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

/* En tu style.css unificado */

/* ... (variables :root y reset * {} ) ... */

body { /* Estilos base para TODOS los body */
    font-family: 'Arial', sans-serif; /* O la fuente que hayas elegido */
    color: var(--color-texto-principal);
    line-height: 1.6;
    min-height: 100vh;
    /* Quitamos el display:flex general del body que teníamos antes, 
       porque cada tipo de página (login vs app) lo manejará con su clase específica */
}

/* --- Estilos para Página de Login (index.html) --- */
body.login-page {
    background-color: var(--color-gris-fondo-login);
    display: flex; /* ESTO ES CLAVE */
    justify-content: center; /* ESTO ES CLAVE para centrar horizontalmente */
    align-items: center;   /* ESTO ES CLAVE para centrar verticalmente */
    /* min-height: 100vh; ya está en el body general, pero no daña repetirlo */
}

.login-container {
    background-color: var(--color-blanco);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    max-width: 450px;
    margin: 20px; /* Este margen da espacio si la ventana es muy pequeña */
}

/* ... (resto de los estilos para .login-header, .login-main, etc.) ... */

.login-header .logo { max-width: 150px; margin-bottom: 15px; }
.login-header h1 { color: var(--color-azul-principal); font-size: 2em; margin-bottom: 5px; }
.login-header h2 { color: var(--color-gris-texto-medio); font-size: 1.2em; margin-bottom: 25px; font-weight: normal; }
.login-main { display: flex; flex-direction: column; align-items: center; }
.login-main p { margin-bottom: 25px; font-size: 0.95em; color: var(--color-gris-texto-claro); text-align: center; }
#google-signin-button { margin-top: 10px; margin-bottom: 15px; } /* Contenedor para el botón de Google */
.error-message { color: var(--color-rojo-error); margin-top: 15px; font-size: 0.9em; min-height: 1.2em; }
.login-footer { margin-top: 30px; font-size: 0.8em; color: var(--color-gris-texto-medio); }


/* --- Estilos para Páginas de Aplicación (dashboard, invmanagement, contactSearchManagement) --- */
body.app-page {
    display: flex;
    flex-direction: column;
    background-color: var(--color-gris-fondo-app);
}

.navbar { 
    background-color: var(--color-azul-principal); 
    color: var(--color-blanco); 
    padding: 15px 30px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    width: 100%; 
    flex-shrink: 0;
}
.navbar-brand img { height: 55px; vertical-align: middle; }
.navbar-brand span { font-size: 1.5em; margin-left: 10px; vertical-align: middle; }
.user-actions { display: flex; align-items: center; }
.user-info-nav { font-size: 0.9em; margin-right: 20px; }
.logout-button { padding: 8px 15px; background-color: var(--color-naranja-acento); color: var(--color-blanco); border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; font-weight: bold; }
.logout-button:hover { background-color: var(--color-naranja-acento-hover); }

/* Contenedor principal para el contenido de la página de la app */
.page-container { /* Usado en ignite_dashboard.html */
    flex: 1; 
    width: 100%; 
    padding: 0 20px; 
    display: flex;
    flex-direction: column;
    align-items: center; 
}
.content-wrapper { /* Usado en invmanagement.html y contactSearchManagement.html */
    width: 90%;
    max-width: 1200px;
    background-color: var(--color-blanco);
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}
.content-wrapper > header { text-align: left; margin-bottom: 25px; border-bottom: 1px solid var(--color-gris-bordes); padding-bottom: 20px; }
.content-wrapper > header h1 { color: var(--color-azul-mas-oscuro); font-size: 2em; margin-top: 10px; margin-bottom: 8px; text-align: center; }
.content-wrapper > header p { text-align: center; font-size: 1em; color: var(--color-gris-texto-medio); margin-top: 0; }
.content-wrapper > .main-controls { margin-bottom: 25px; text-align: right; }
.content-wrapper main { overflow-x: auto; flex-grow: 1; }

/* Pestañas del Dashboard */
.main-tab-container { width: 85%; margin: 20px auto; background-color: var(--color-blanco); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; padding: 20px; }
.company-tab-nav { display: flex; border-bottom: 3px solid var(--color-azul-principal); margin-bottom: 20px; }
.company-tab-button { padding: 12px 25px; cursor: pointer; border: none; background-color: transparent; font-size: 1.1em; color: var(--color-texto-claro); font-weight: bold; margin-right: 8px; transition: color 0.3s ease, background-color 0.3s ease; border-radius: 6px 6px 0 0; }
.company-tab-button:hover { background-color: #f0f0f0; color: var(--color-azul-principal); }
.company-tab-button.active { background-color: var(--color-azul-principal); color: var(--color-blanco); }
.company-tab-content { display: none; }
.company-tab-content.active { display: block; }
.sub-tab-nav { display: flex; border-bottom: 2px solid var(--color-azul-principal); margin-bottom: 15px; padding-left: 10px; }
.sub-tab-button { padding: 10px 18px; cursor: pointer; border: none; background-color: #f7f7f7; font-size: 1em; color: var(--color-gris-texto-secundario); border-bottom: 3px solid transparent; margin-right: 5px; transition: color 0.3s ease, border-bottom-color 0.3s ease, background-color 0.3s ease; font-weight: 500; }
.sub-tab-button:hover { background-color: #e9e9e9; color: var(--color-azul-principal); }
.sub-tab-button.active { background-color: var(--color-blanco); color: var(--color-azul-principal); font-weight: bold; border-bottom-color: var(--color-naranja-acento); }
.sub-tab-content { display: none; padding: 20px; min-height: 300px; line-height: 1.6; background-color: #fdfdfd; border: 1px solid #eee; border-top: none; border-radius: 0 0 4px 4px; }
.sub-tab-content.active { display: block; }

/* Botón de Acción Genérico (dashboard y otras páginas) */
.action-button { display: inline-block; padding: 12px 25px; background-color: var(--color-azul-secundario); color: var(--color-blanco); text-decoration: none; border-radius: 5px; font-size: 1.1em; transition: background-color 0.3s ease; border: none; cursor: pointer; margin-top: 10px; font-weight: bold;}
.action-button:hover { background-color: var(--color-azul-principal); }

/* Botones específicos de invmanagement.html / contactSearchManagement.html */
#btnApplyChangesAndProcess { background-color: var(--color-dorado-forms); color: var(--color-blanco); font-weight: bold; }
#btnApplyChangesAndProcess:hover { background-color: var(--color-dorado-forms-hover); }
.btn-edit-row, .btn-edit-contact { background-color: var(--color-azul-secundario); color: var(--color-blanco); padding: 6px 12px; font-size: 0.9em; font-weight: bold; border-radius:4px; border:none; cursor: pointer; }
.btn-edit-row:hover, .btn-edit-contact:hover { background-color: var(--color-azul-principal); }

/* Feedback n8n (dashboard) */
#n8nReprocessInvoicesResponse { margin-top: 20px; padding: 15px; border: 1px solid transparent; border-radius: 4px; line-height: 1.5; }
#n8nReprocessInvoicesResponse.success { color: var(--n8n-success-text); border-color: var(--n8n-success-border); background-color: var(--n8n-success-bg); }
#n8nReprocessInvoicesResponse.error { color: var(--n8n-error-text); border-color: var(--n8n-error-border); background-color: var(--n8n-error-bg); }
#n8nReprocessInvoicesResponse.info { color: var(--n8n-info-text); border-color: var(--n8n-info-border); background-color: var(--n8n-info-bg); }
#n8nReprocessInvoicesResponse.warning { color: var(--n8n-warning-text); border-color: var(--n8n-warning-border); background-color: var(--n8n-warning-bg); }

/* Tablas (invmanagement.html, contactSearchManagement.html) */
#invoicesTable, #contactSearchTable { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.9em; /* Reducido para más columnas */ }
#invoicesTable th, #invoicesTable td,
#contactSearchTable th, #contactSearchTable td { padding: 8px 10px; /* Reducido padding */ text-align: left; border-bottom: 1px solid var(--color-gris-bordes); vertical-align: middle; }
#invoicesTable th, #contactSearchTable th { background-color: var(--color-azul-mas-oscuro); color: var(--color-blanco); font-weight: bold; white-space: nowrap; }
#invoicesTable tbody tr:nth-child(even),
#contactSearchTable tbody tr:nth-child(even) { background-color: var(--color-gris-elementos); }
#invoicesTable tbody tr:hover,
#contactSearchTable tbody tr:hover { background-color: #dce4f0; }
.modified-row { background-color: #fff9c4 !important; }

/* Modales (Genéricos para invmanagement, contactSearchManagement) */
.modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); padding-top: 5%; }
.modal-content { background-color: var(--color-blanco); margin: 5% auto; padding: 25px 30px; border: 1px solid var(--color-gris-bordes-modal); border-radius: 8px; width: 90%; max-width: 600px; box-shadow: 0 8px 25px rgba(0,0,0,0.2); position: relative; }
.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; line-height: 1; }
.close-button:hover, .close-button:focus { color: var(--color-texto-principal); text-decoration: none; cursor: pointer; }
.modal h2 { text-align: center; color: var(--color-azul-mas-oscuro); margin-top: 0; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.modal form div { margin-bottom: 15px; }
.modal form label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--color-texto-claro); }
.modal form input[type="text"], .modal form select, .modal form textarea { width: 100%; padding: 10px; border: 1px solid var(--color-gris-bordes); border-radius: 4px; font-size: 1em; font-family: inherit; }
.modal form textarea { min-height: 80px; resize: vertical; }
#editForm p { margin-bottom: 10px; line-height: 1.4; } /* Para los p no editables en el modal */
#editForm p strong { color: var(--color-azul-mas-oscuro); }
#editForm p em { font-size: 0.9em; color: var(--color-gris-texto-secundario); }
.modal-actions { text-align: right; margin-top: 30px; }
.modal-actions button { margin-left: 10px; padding: 10px 20px; font-size: 1em; border-radius: 5px; border:none; cursor:pointer; font-weight:bold;}
#btnSaveChangesInModal, /* Para el modal de invoices */
#btnSaveChangesContactModal { /* Para el modal de contact search */
    background-color: var(--color-dorado-forms); color: var(--color-blanco);
}
#btnSaveChangesInModal:hover,
#btnSaveChangesContactModal:hover {
    background-color: var(--color-dorado-forms-hover);
}
#btnCancelEditModal, #btnOkFeedbackModal, /* Para invoices */
#btnCancelContactEditModal, #btnOkContactFeedbackModal /* Para contact search */ {
    background-color: var(--color-gris-bordes); color: var(--color-texto-claro);
}
#btnCancelEditModal:hover, #btnOkFeedbackModal:hover,
#btnCancelContactEditModal:hover, #btnOkContactFeedbackModal:hover {
    background-color: #c0c0c0; 
}
#feedbackModal .modal-content, #contactFeedbackModal .modal-content { max-width: 450px; } /* Para los modales de feedback */
#feedbackMessage, #contactFeedbackMessage { font-size: 1.1em; text-align: center; margin-bottom: 20px; }
#feedbackMessage.success, #contactFeedbackMessage.success { color: var(--color-verde-exito-text); }
#feedbackMessage.error, #contactFeedbackMessage.error { color: var(--color-rojo-error-modal); }


/* Autocompletar (para invmanagement y contactSearchManagement) */
.autocomplete-wrapper { position: relative; width: 100%; }
#modalJobCodeInput, #modalUnitInput { width: 100%; padding: 10px; border: 1px solid var(--color-gris-bordes); border-radius: 4px; font-size: 1em; } /* Asegura que ambos usen estos estilos */
.suggestions-list { position: absolute; left: 0; right: 0; top: 100%; border: 1px solid var(--color-gris-bordes); border-top: none; border-radius: 0 0 4px 4px; background-color: var(--color-blanco); z-index: 1002; max-height: 200px; overflow-y: auto; display: none; }
.suggestions-list div { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; }
.suggestions-list div:last-child { border-bottom: none; }
.suggestions-list div:hover { background-color: #f0f0f0; }
.suggestions-list .highlight { font-weight: bold; }

/* Footer Común */
footer {
    /* ANTES: background-color: var(--color-blanco); */
    background-color: var(--color-azul-principal); /* O var(--color-azul-mas-oscuro) si prefieres el de styleInv */
    color: var(--color-blanco);
    padding: 20px 30px; /* Puedes ajustar el padding */
    text-align: center;
    /* margin-top: auto; // Esta línea empuja el footer al final si el body es flex y el contenido es corto */
    width: 100%;      /* Para que ocupe todo el ancho de la ventana */
    flex-shrink: 0;   /* Evita que se encoja si el contenido de la página es muy largo */
    /* Quita border-radius y width/max-width específicos si quieres que sea una banda completa */
    /* border-radius: 0 0 8px 8px; */
    /* width: 90%; */
    /* max-width: 1200px; */
    /* margin: 0 auto 20px auto; */
}
/* El resto de .footer-content, .footer-logo y sus media queries pueden permanecer como estaban */
.footer-content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
}
.footer-logo { 
    max-height: 30px; 
    /* Si el fondo del footer es oscuro, el logo necesita ser claro o tener un fondo que contraste */
}
.footer-content p { 
    margin: 0; 
    font-size: 0.85em; 
}

@media (min-width: 768px) {
    .footer-content { 
        flex-direction: row; 
        justify-content: center; /* O space-between si prefieres */
        /* Si usas space-between y quieres centrar el contenido dentro del footer,
           puedes añadir un max-width al .footer-content y margin: auto. 
           Por ejemplo: max-width: var(--max-width-container, 1200px); margin: 0 auto; */
    }
    .footer-logo { margin-right: 15px; margin-bottom: 0; }
}

/* Media Queries Generales para la App */
@media (max-width: 992px) {
    .main-tab-container { width: 95%; padding: 15px; }
    .company-tab-button { padding: 10px 15px; font-size: 1em; }
    .sub-tab-button { padding: 8px 12px; font-size: 0.9em; }
    .content-wrapper { width: 95%; padding: 20px; }
    .modal-content { width: 90%; }
}
@media (max-width: 768px) {
    .navbar { padding: 10px 15px; flex-direction: column; align-items: flex-start; }
    .navbar-brand { margin-bottom: 10px; }
    .user-actions { width: 100%; justify-content: space-between; }
    .page-container, .content-wrapper { width: 100%; margin-top: 10px; padding: 10px; border-radius:0; box-shadow:none; }
    .main-tab-container { width: 100%; margin: 0; border-radius:0; box-shadow: none; padding: 10px; }
    .company-tab-nav, .sub-tab-nav { flex-direction: column; }
    .company-tab-button, .sub-tab-button { margin-right: 0; margin-bottom: 3px; width: 100%; text-align: left; }
    .company-tab-button.active { border-left: 4px solid var(--color-naranja-acento); border-bottom-color: transparent; background-color: #e7e7e7; color: var(--color-azul-principal);}
    .sub-tab-button.active { border-left: 3px solid var(--color-naranja-acento); border-bottom-color: transparent; background-color: #f0f0f0;}
    .sub-tab-nav { padding-left: 0; border-bottom: none; }
    .company-tab-nav { border-bottom: none; }
    .modal-content { width: 95%; margin: 5% auto; padding: 15px;}
    #invoicesTable th, #invoicesTable td,
    #contactSearchTable th, #contactSearchTable td { padding: 6px 8px; font-size: 0.85em; } /* Tablas más compactas en móvil */
}
@media (max-width: 600px) { /* Específicos de Login si es necesario */
    .login-container { margin: 10px; padding: 25px; }
    .login-header h1 { font-size: 1.8em; }
    .login-header h2 { font-size: 1em; }
}

/* ✨ AÑADE ESTOS ESTILOS EN TU ARCHIVO style.css */

/* Contenedor para hacer el iframe responsivo */
.report-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Proporción 4:3 (alto/ancho -> 600/800 = 0.75 = 75%) */
    padding-top: 75%; 
    border: 1px solid #ddd;
    margin-top: 20px; /* Espacio superior */
}

/* Estilos para el iframe dentro del contenedor */
.report-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}