/* ============================================= */
/* VARIABLES Y ESTILOS GLOBALES (MODIFICADOS)    */
/* ============================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Paleta de colores ajustada para un look más sobrio y de sistema */
  --primary-color: #0078d4; /* Un azul más corporativo/de sistema */
  --secondary-color: #6c757d;
  --success-color: #107c10;
  --danger-color: #d83b01;
  --warning-color: #ffb900;
  --light-color: #f3f3f3;
  --dark-color: #2b2b2b;

  /* Variables semánticas para la UI de escritorio */
  --app-bg: #e5e5e5; /* Fondo principal de la aplicación, un gris neutro */
  --window-bg: #ffffff; /* Fondo de las "ventanas" o tarjetas */
  --toolbar-bg: #f3f3f3; /* Fondo para barras de herramientas y cabeceras */
  --control-border-color: #ababab;
  --control-border-color-focus: var(--primary-color);
  --text-color: #1c1c1c;
  --text-color-secondary: #595959;

  /* Barra lateral con un look más integrado */
  --sidebar-bg: #2b2b2b;
  --sidebar-text: #cccccc;
  --sidebar-text-hover: #ffffff;
  --sidebar-active-bg: #444444;
  --sidebar-active-indicator: var(--primary-color);

  /* Priorizamos fuentes de sistema para un look nativo */
  --font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont,
    "Roboto", "Helvetica Neue", Arial, sans-serif;

  /* Sombras más sutiles y definidas */
  --shadow-sm: 0 1px 1px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
}

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

body {
  font-family: var(--font-family);
  background-color: var(--app-bg); /* Cambiado a un gris de fondo de sistema */
  color: var(--text-color);
  font-size: 14px; /* Tipografía un poco más pequeña, común en apps de escritorio */
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================= */
/* ESTRUCTURA PRINCIPAL                          */
/* ============================================= */
.app-container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px; /* Un poco más estrecho */
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 1rem;
  position: fixed;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-out; /* Transición más rápida */
  z-index: 1000;
  border-right: 1px solid #444; /* Borde para separar del contenido */
  overflow-y:auto;
}

.main-content {
  flex-grow: 1;
  margin-left: 240px; /* Ajustado al nuevo ancho del sidebar */
  padding: 1.5rem; /* Espaciado un poco más compacto */
  transition: margin-left 0.2s ease-out;
}

.menu-toggle {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1001;
  background: var(--dark-color);
  color: white;
  border: 1px solid #555;
  width: 36px;
  height: 36px;
  border-radius: 4px; /* Aspecto de botón de sistema */
  cursor: pointer;
  font-size: 1.2rem;
}

@media (max-width: 992px) {
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.toggled {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
  }
}

/* ============================================= */
/* SIDEBAR (ESTILO MÁS NATIVO)                   */
/* ============================================= */
.sidebar-header {
  margin-bottom: 1.5rem;
  text-align: left;
  padding: 0 0.5rem;
}
.sidebar-header a {
  color: var(--sidebar-text-hover);
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
}
.sidebar-nav ul {
  list-style-type: none;
}
.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: 4px; /* Bordes más rectos */
  transition: background-color 0.15s ease;
  border-left: 3px solid transparent; /* Espacio para el indicador activo */
}
.sidebar-nav li a:hover {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-text-hover);
}
.sidebar-nav li a.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-text-hover);
  font-weight: 600;
  border-left: 3px solid var(--sidebar-active-indicator); /* Indicador de activo */
}
.sidebar-nav li a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ============================================= */
/* CONTENIDO - ASPECTO DE VENTANA/TOOLBAR        */
/* ============================================= */
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  /* Se convierte en una barra de herramientas que ocupa todo el ancho */
  margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  padding: 1rem 1.5rem;
  background-color: var(--toolbar-bg);
  border-bottom: 1px solid #dcdcdc;
}
.content-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
}
.empresa-selector select {
  padding: 6px 10px;
  border: 1px solid var(--control-border-color);
  border-radius: 4px;
  font-size: 0.9rem;
  background-color: var(--window-bg);
}
.card {
  background-color: var(--window-bg);
  border: 1px solid #dcdcdc; /* Borde definido, típico de ventanas */
  border-radius: 6px; /* Bordes menos redondeados */
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: none; /* Se quita la sombra para un look más plano y limpio */
  transition: none;
}
.card:hover {
  box-shadow: none; /* Sin efecto al pasar el ratón */
}
.card-header {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e5e5e5;
}
.card-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.stat-card {
  background-color: #f9f9f9;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  box-shadow: none;
}
.stat-card .stat-title {
  font-size: 0.85rem;
  color: var(--text-color-secondary);
  margin-bottom: 0.5rem;
}
.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 600;
}
.stat-card .stat-value.positive {
  color: var(--success-color);
}
.stat-card .stat-value.negative {
  color: var(--danger-color);
}
.quick-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ============================================= */
/* TABLAS - MÁS UTITARIAS Y COMPACTAS            */
/* ============================================= */
.modern-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--window-bg);
}
.modern-table thead th {
  text-align: left;
  padding: 10px 12px;
  background-color: var(--toolbar-bg);
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: none; /* Las apps de escritorio raramente usan mayúsculas */
  letter-spacing: 0;
  color: var(--text-color);
}
.modern-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: middle;
}
.modern-table tbody tr:last-child td {
  border-bottom: none;
}
.modern-table tbody tr:hover {
  background-color: #eef5fd;
} /* Un hover azulado sutil */
.asiento-header {
  font-weight: bold;
  background-color: #e9ecef !important;
}
.asiento-footer {
  background-color: #f8f9fa !important;
  border-top: 2px solid #dee2e6;
}
.haber {
  color: var(--danger-color);
  text-align: right;
}
.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.concepto {
  text-align: right;
  font-style: italic;
  font-weight: normal;
}
td:nth-child(3) {
  text-align: right;
} /* Debe */

/* ============================================= */
/* FORMULARIOS - ESTILO DE CONTROLES NATIVOS     */
/* ============================================= */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.9rem;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--control-border-color);
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: var(--font-family);
  background-color: var(--window-bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--control-border-color-focus);
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3); /* Un halo más sutil */
}
.form-actions {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e5e5;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.btn {
  padding: 8px 16px;
  border: 1px solid var(--control-border-color);
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.15s ease;
  background-color: #f0f0f0;
  color: var(--text-color);
}
.btn:hover {
  transform: none; /* Sin movimiento */
  box-shadow: none; /* Sin sombra */
  filter: brightness(0.95); /* Ligeramente más oscuro al pasar el ratón */
}
.btn-primary {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
.btn-secondary {
  background-color: #e1e1e1;
  color: var(--text-color);
  border-color: #b1b1b1;
}
.btn-success {
  background-color: var(--success-color);
  color: white;
  border-color: var(--success-color);
}
.btn-danger {
  background-color: var(--danger-color);
  color: white;
  border-color: var(--danger-color);
}

/* ============================================= */
/* FORMULARIO DE ASIENTOS (MODIFICADO)           */
/* ============================================= */
.movimiento-linea {
  display: grid;
  grid-template-columns: 1fr 150px 150px auto; /* Columnas de importe más estrechas */
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.movimiento-linea select,
.movimiento-linea input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--control-border-color);
  border-radius: 4px;
  font-size: 0.9rem;
}
.movimiento-linea select:focus,
.movimiento-linea input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3);
}
.movimiento-linea input {
  text-align: right;
}
.btn-eliminar {
  background-color: transparent;
  border: 1px solid #ababab;
  color: #595959;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1; /* Para alinear mejor el icono/texto */
  transition: all 0.15s;
}
.btn-eliminar:hover {
  background-color: #f8d7da;
  border-color: var(--danger-color);
  color: var(--danger-color);
}
.asiento-totales {
  text-align: right;
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
}
#descuadre {
  color: var(--danger-color);
  margin-left: 1rem;
  font-weight: bold;
}

/* ============================================= */
/* OTROS (HEREDAN LOS NUEVOS ESTILOS)            */
/* ============================================= */
.aviso {
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.aviso.status-success {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
}
.aviso.status-error {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}
.aviso.status-warning {
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
}
/* Estilos para Balance de Situación */
.balance-sheet-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.balance-column {
  flex: 1;
  min-width: 400px;
}
.modern-table .amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.modern-table .total-row {
  background-color: var(--dark-color);
  color: white;
  font-size: 1em;
  font-weight: 600;
}
.modern-table .sub-header-row {
  font-weight: 600;
  background-color: #e9e9e9;
  color: var(--primary-color);
}
.modern-table .sub-total-row {
  font-weight: 500;
  background-color: #f8f9fa;
  border-top: 1px solid #dcdcdc;
}
.balance-summary {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
}
.balance-summary.status-ok {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
}
.balance-summary.status-error {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}
/* ============================================= */
/* MODAL Y BADGES (AJUSTES MENORES)              */
/* ============================================= */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
}
.modal.modal-active {
  display: flex;
}
.modal-content {
  background-color: var(--window-bg);
  margin: auto;
  padding: 2rem;
  border-radius: 6px;
  width: 90%;
  max-width: 600px;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.15s ease-out;
}
.modal-close {
  color: var(--secondary-color);
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}
.modal-close:hover {
  color: var(--dark-color);
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.status-badge {
  padding: 3px 8px;
  border-radius: 4px; /* Bordes más rectos */
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(39, 39, 37);
  text-transform: capitalize;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.status-badge.status-enviado {
  background-color: var(--success-color);
}
.status-badge.status-pendiente {
  background-color: var(--warning-color);
  color: var(--dark-color);
}
.status-badge.status-fallido {
  background-color: var(--danger-color);
}
#cuerpo_html {
  width: 100%;
}

/* ============================================= */
/* ESTILOS PARA EL CHATBOT (VERSIÓN REVISADA)    */
/* ============================================= */

#chatbot-container {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 1050;
}

#chatbot-toggle-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background-color 0.2s;
}

#chatbot-toggle-btn:hover {
  transform: scale(1.1);
  background-color: #005a9e; /* Un azul un poco más oscuro */
}

/* --- ESTILOS DE LA VENTANA DEL CHAT (¡AQUÍ ESTÁ LA CLAVE!) --- */

.chat-window {
  position: absolute;
  bottom: 80px;  /* Posicionado 80px hacia arriba desde el contenedor */
  right: 0;      /* Alineado a la derecha del contenedor */
  width: 370px;
  height: 500px;
  background-color: var(--window-bg);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  
  display: flex; /* Esto es importante para la estructura interna */
  flex-direction: column;
  overflow: hidden;
  
  /* --- ESTADO INICIAL (OCULTO) --- */
  visibility: hidden;  /* Usamos visibility para ocultarlo completamente */
  opacity: 0;
  transform: translateY(20px); /* Ligeramente desplazado hacia abajo */
  transform-origin: bottom right;
  transition: all 0.3s ease-in-out;
  pointer-events: none; /* No se puede hacer clic cuando está oculto */
}

/* --- ESTADO ABIERTO (VISIBLE) --- */
.chat-window.open {
  visibility: visible; /* ¡Lo hacemos visible! */
  opacity: 1;
  transform: translateY(0);  /* Vuelve a su posición original */
  pointer-events: auto;     /* Se puede hacer clic ahora */
}


/* --- Estilos internos (cabecera, mensajes, etc.) --- */
/* (Estos estilos que ya tenías son correctos y se pueden mantener) */

.chat-header {
  background-color: var(--sidebar-bg);
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.chat-header h3 {
  font-size: 1.1em;
  margin: 0;
}

#chatbot-close-btn,
#chatbot-new-chat-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5em;
  cursor: pointer;
  padding: 0 5px;
}

#chatbot-new-chat-btn svg {
  width: 20px;
  height: 20px;
}

.chat-messages {
  flex-grow: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  padding: 10px 15px;
  border-radius: 18px;
  max-width: 80%;
  line-height: 1.4;
  word-wrap: break-word;
}

.message.bot {
  background-color: var(--light-color);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

.message.user {
  background-color: var(--primary-color);
  color: white;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.message.typing {
  color: var(--secondary-color);
  font-style: italic;
}

.chat-input-area {
  padding: 15px;
  border-top: 1px solid #e5e5e5; /* Usar variable si existe */
  background-color: #fff;
}

#chatbot-form {
  display: flex;
  gap: 10px;
}

#chatbot-input {
  flex-grow: 1;
  border: 1px solid var(--control-border-color); /* Usar variable */
  border-radius: 20px;
  padding: 10px 15px;
  font-size: 1em;
}

#chatbot-form button {
  border-radius: 20px;
  border: none;
  background-color: var(--primary-color);
  color: white;
  padding: 0 15px;
  cursor: pointer;
}

/* ============================================= */
/* ESTILOS PARA PESTAÑAS (TABS)                  */
/* ============================================= */
.tabs-container {
  display: flex;
  border-bottom: 1px solid var(--control-border-color);
  margin-bottom: 1.5rem;
}
.tab-link {
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-color-secondary);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px; /* Para que el borde se alinee con la línea inferior */
}
.tab-link.active {
  color: var(--primary-color);
  font-weight: 600;
  border-bottom-color: var(--primary-color);
}

/* En public/css/style.css, busca la sección de .status-badge */

.status-badge.status-pendiente {
  background-color: var(--warning-color);
  color: var(--dark-color);
}
.status-badge.status-fallido {
  background-color: var(--danger-color);
}

/* --- AÑADE ESTA NUEVA LÍNEA --- */
.status-badge.status-parcial {
  background-color: #0078d4;
  color: white;
} /* Un azul para indicar progreso */

.sidebar-nav li.nav-section-header {
  padding: 10px 12px;
  margin-top: 1rem; /* Espacio antes de una nueva sección */
  font-size: 0.75rem; /* Letra más pequeña */
  font-weight: 600;
  color: var(--secondary-color); /* Un color grisáceo */
  text-transform: uppercase; /* En mayúsculas para destacar */
  letter-spacing: 0.5px;

}
.message.user {
    background: #186d97;
    align-self: flex-end;
}
.message.bot {
    background: #f1f1f1;
    align-self: flex-start;
}
.message.bot.error {
    background: #05910c;
    color: #a00;
}
#sql_query{
    width: 100%;
    height: 150px;
    padding: 10px;
    border: 1px solid var(--control-border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: var(--font-family);
    background-color: var(--window-bg);
    resize: vertical;
}

/* Estilo para filas de facturas anuladas */
.modern-table tbody tr.anulada-row {
  background-color: #f8d7da !important; /* Un rojo pálido */
  text-decoration: line-through;       /* Tacha el texto */
  color: #6c757d;                     /* Un color de texto más tenue */
}
/* ============================================= */
/* CLASES DE UTILIDAD                            */
/* ============================================= */
.d-none {
  display: none !important;
}