/* styles.css */

/* Definición de colores */
:root {
  --button-color: #003366;          /* Color corporativo */
  --button-hover-color: #005599;    /* Color para el hover */
  --input-border-color: #003366;    /* Color del borde del campo de búsqueda */
}

/* Spinner */
#spinner {
  font-size: 1.5rem;
  color: #007bff;
  text-align: center;
  margin-top: 20px;
}

/* Estilo para campos inválidos */
.is-invalid {
  border-color: red;
}

/* Logo DGT */
.navbar-brand img {
  height: 50px;
}

/* Título del encabezado */
.header-title h1 {
  font-size: 1.5rem;
  margin: 0;
  font-weight: bold;
  color: var(--button-color);
}

/* Subtítulo del encabezado */
.header-title span {
  font-size: 0.8rem;
  color: #333333;
}

/* Etiqueta del input de archivo */
.custom-file-label::after {
  content: "Elegir";
}

/* Estilos generales para botones */
.btn-primary,
.btn-custom,
#generateBtn,
#downloadBtn,
#subidaBtn,
#generateAllBtn,
.btn-search {
    background-color: var(--button-color);
    border-color: var(--button-color);
    color: white;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover,
.btn-custom:hover,
#generateBtn:hover,
#downloadBtn:hover,
#subidaBtn:hover,
#generateAllBtn:hover,
.btn-search:hover {
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-color);
}

/* Botón deshabilitado */
#generateBtn:disabled {
  background-color: #888;
  border-color: #888;
  cursor: not-allowed;
}

/* Zona de arrastre (Drag and Drop) */
#dropZone {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#dropZone.drag-over {
  background-color: #e9ecef;
  border-color: var(--button-color);
}

/* Estilo para el chip primario */
#primaryChip {
  background-color: var(--button-color);
  border-color: var(--button-color);
  color: white;
}

/* Animación de transición para botones y zona de arrastre */
button,
#dropZone {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.input-group .btn-search {
  background-color: var(--button-color);
  border-color: var(--button-color);
  color: white;
}

.input-group .btn-search:hover {
  background-color: var(--button-hover-color);
  border-color: var(--button-hover-color);
}

#primaryChip {
  background-color: var(--button-color);
  border-color: var(--button-color);
  color: white;
}

.history-text {
  color: var(--button-color);
}
.btn-link.collapsed:hover .history-text {
  color: var(--button-hover-color);
}

.tooltip-inner {
  background-color: var(--button-color);
  color: white;
  font-size: 14px;
}

.tooltip.bs-tooltip-left .arrow::before {
  border-left-color: var(--button-color);
}

#homeBtn span {
  color: white;
}

#homeBtn:hover span {
  color: #f0f0f0;
}

/* Estilos para el área de arrastre (drop zone) */
.drop-zone {
  border: 2px dashed #808080; /* Borde discontinuo con color primario de Bootstrap */
  border-radius: 0;
  background-color: #f8f9fa; /* Color de fondo claro */
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.drop-zone:hover {
  background-color: #e9ecef; /* Cambiar el color de fondo al pasar el mouse */
}

.drop-zone.drag-over {
  background-color: #e2e6ea; /* Color de fondo cuando un archivo se está arrastrando sobre el área */
  border-color: #0056b3; /* Cambiar el color del borde */
}
/* Pantalla de login */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f6f9;
  padding: 16px;
}

.login-card {
  width: 100%;
  max-width: 400px;
}

.login-card .card-body {
  padding: 2rem;
}

.login-logo {
  height: 60px;
}

/* Botón de cerrar sesión: contorno corporativo para no competir con "Subida Múltiple" */
.btn.btn-logout {
  color: var(--button-color);
  border: 1px solid var(--button-color);
  background-color: white;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn.btn-logout:hover,
.btn.btn-logout:focus {
  color: white;
  background-color: var(--button-color);
}

/* Esquinas rectas en toda la interfaz, como en la línea gráfica de la DGT.
   Con `body` delante porque Bootstrap se carga después de este fichero y a
   igualdad de especificidad ganaría su border-radius. */
body .btn,
body .form-control,
body .custom-select,
body .custom-file-label,
body .custom-file-label::after,
body .input-group-text,
body .card,
body .card-header,
body .list-group-item,
body .modal-content,
body .alert,
body .badge,
body .dropdown-menu {
  border-radius: 0;
}