.hidden {
  display: none;
}

.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  background: #f4f4f4;
}

.login-box {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-box h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #1a237e;
}

.login-box input {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login-box button {
  width: 100%;
  padding: 0.75rem;
  background-color: #1a237e;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.login-box .extra-links {
  margin-top: 1rem;
  text-align: center;
}

.login-box .extra-links a {
  text-decoration: none;
  color: #1a237e;
}

.error-msg {
  color: red;
  text-align: center;
  margin-bottom: 1rem;
}

/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body,
html {
  width: 100%;
  height: 100%;
  font-family: "Segoe UI", sans-serif;
}

/* Fondo oscuro + ondas */
body {
  background: #000;
  position: relative;
  overflow: auto;
}

/* Centrar tarjeta */
.login-container {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Tarjeta de login */
.login-card {
  background: rgba(20, 20, 20, 0.85);
  border-radius: 12px;
  padding: 4rem;
  max-width: 500px;
  height: 450px;
  width: 100%;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Header con títulos y logo */
.login-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5%;
  margin-bottom: 1.5rem;
}
.login-titles h1 {
  font-size: 1.5rem;
  line-height: 1.2;
}
.login-titles p {
  font-size: 0.9rem;
  color: #ccc;
  margin-top: 0.3rem;
}
.login-logo {
  height: 71px;
  width: auto;
}

/* Formulario */
.login-form input {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #444;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 1rem;
}
.login-form input::placeholder {
  color: #999;
}
.login-form button {
  width: 100%;
  padding: 0.75rem;
  background: #007aff;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.login-form button:hover {
  background: #0063d1;
}

/* Estilo de la toast/alerta con fondo blanco, ícono negro y texto en negrita */
.alert-toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: #fff;
  color: #333;
  font-weight: bold; /* Texto en negrita */
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 0.9rem;
  z-index: 9999;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.alert-toast::before {
  content: "⚠"; /* Ícono en negro */
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: #000; /* Fuerza color negro */
}

.alert-toast.show {
  opacity: 1;
  transform: translateY(0);
}
/* Dashboard layout */
.dashboard-container {
  padding: 2rem;
  max-width: 1500px;
  margin: 0 auto;
}
.page-title {
  color: #fff;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .tx-search {
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho */
  }

  .tx-search input {
    width: 100%; /* Asegura que el campo de búsqueda ocupe todo el ancho */
    padding: 0.75rem; /* Ajusta el padding para pantallas pequeñas */
    font-size: 1rem; /* Ajusta el tamaño del texto */
    border-radius: 6px; /* Mantén bordes redondeados */
  }
  
  .tx-controls {
    flex-direction: column; /* Cambia a diseño vertical */
    align-items: stretch; /* Asegura que los elementos ocupen todo el ancho */
    gap: 1rem; /* Espaciado entre los elementos */
  }

  .tx-search input {
    width: 100%; /* Asegura que el campo de búsqueda ocupe todo el ancho */
  }

  .tx-buttons {
    display: flex;
    flex-direction: column; /* Apila los botones verticalmente */
    gap: 0.5rem; /* Espaciado entre los botones */
  }

  .tx-buttons button {
    width: 100%; /* Asegura que los botones ocupen todo el ancho */
  }
}

/* Row of cards */
/* Grid que engloba todas las tarjetas */

@media (max-width: 768px) {
  .dashboard-container {
    padding: 1rem; /* Reduce el padding en pantallas pequeñas */
  }

  .cards-grid {
    grid-template-columns: 1fr; /* Una sola columna */
    grid-template-rows: auto;
    gap: 1.5rem;  /* Las filas se ajustan automáticamente */
  }

  .cards-grid > .card {
    grid-column: 1 / -1; /* Cada tarjeta ocupa toda la fila */
  }

  /* Asegúrate de que las tarjetas sean visibles */
  .card {
    display: flex; /* Asegura que las tarjetas no se oculten */
    flex-direction: column;
  }
  
  .news-card img {
    width: 100%;
    height: auto;
  }
}

/* Cada tarjeta ocupa su celda */
.balance-card {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.chart-card {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.news-card {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Asegúrate que la .card sigue teniendo flex-column */
.card {
  display: flex;
  flex-direction: column;
  background: #111;
  padding: 1.25rem;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Ajustes específicos (como antes) */
.chart-card .chart-container {
  flex: 1;
  min-height: 360px;
}

.table-card tbody {
  display: block;
  overflow-y: auto;
  flex: 1;
}

/* Balance card */
.balance-amount {
  font-size: 2rem;
  margin: 0.5rem 0;
}
.btn-primary {
  background: #007aff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

/* Chart card */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.card-header select {
  background: #222;
  border: 1px solid #333;
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}

/* News card */
.news-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.news-content {
  flex: 1;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}
.news-title {
  font-weight: bold;
  margin-bottom: 0.3rem;
}
.news-meta {
  font-size: 0.8rem;
  color: #aaa;
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
}
thead th {
  text-align: left;
  padding: 0.5rem;
  background: #222;
}
tbody td {
  padding: 0.5rem;
  border-top: 1px solid #333;
  font-size: 0.9rem;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}
.pagination button {
  background: #007aff;
  color: #fff;
  border: none;
  margin: 0 0.5rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}
.pagination span {
  color: #fff;
}

/* Navbar */
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 2rem;
  background: #111;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-left {
  display: flex;
  align-items: center;
}
/* Logo */
.nav-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.nav-logo img {
  height: 40px;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.25rem;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: #007aff;
}

.hamburger-btn {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* Menú responsivo */
@media (max-width: 768px) {
  .main-nav {
    flex-direction: row; /* Mantén los elementos en fila */
    justify-content: space-between; /* Espacia los elementos */
    align-items: center;
    padding: 0.5rem 1rem;
  }

  .hamburger-btn {
    display: block; /* Mostrar el botón hamburguesa */
    font-size: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex; /* Convierte el botón en un contenedor flex */
    justify-content: center; /* Centra horizontalmente el ícono */
    align-items: center; /* Centra verticalmente el ícono */
    height: 40px; /* Tamaño fijo para el botón */
    width: 40px; /* Tamaño fijo para el botón */
  }

  .nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Centra el logo */
  }

  .nav-right {
    position: absolute;
    right: 1rem; /* Alinea a la esquina superior derecha */
    top: 50%;
    transform: translateY(-50%);
  }

  .nav-links {
    display: none; /* Ocultar el menú por defecto */
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #111;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  }

  .nav-links.show {
    display: flex; /* Mostrar el menú cuando se active */
  }
}

/* Right side */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Icon buttons */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  position: relative;
  color: #fff;
}

/* Profile */
.profile-menu {
  position: relative;
}
.profile-icon {
  height: 32px;
  width: 32px;
  border-radius: 50%;
}

/* Dropdown */
.dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: #222;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  width: 200px;
  overflow: hidden;
  z-index: 10;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
.dropdown:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown-header {
  background: #111;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: #ccc;
  line-height: 1.3;
}
.dropdown-header strong {
  color: #fff;
}
.dropdown-item {
  display: block;
  padding: 0.75rem 1rem;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.dropdown-item:hover {
  background: #333;
}

/* Hover de enlaces del nav principal */
.nav-links a {
  position: relative;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: background 0.2s, box-shadow 0.2s;
}

.nav-links a:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Hover de items del dropdown */
.dropdown-item {
  position: relative;
  border-radius: 4px;
  transition: background 0.2s, box-shadow 0.2s;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* 1) Centrar el nav en la página */
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 2rem;
  background: #111;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 2) (Opcional) Centrar los enlaces dentro de la zona izquierda */
.nav-left {
  display: flex;
  align-items: center;
  justify-content: center; /* centra logo + links juntos */
}

/* Contenedor general */
.transactions-container {
  padding: 2rem;
  display: flex;
  justify-content: center;
}

/* Caja con fondo ligeramente gris */
.transactions-box {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 1.5rem;
  width: 100%;
  max-width: 1400px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Título */
.transactions-box h2 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

/* Controles */
.tx-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.tx-search input {
  width: 400px;
  max-width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: none;
  background: #333;
  color: #fff;
}
.tx-buttons button {
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid #444;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.tx-buttons button:hover {
  background: #333;
}

/* Tabla */
.tx-table-wrapper {
  overflow-x: auto;
  background: #222;
  border-radius: 8px;
}
.tx-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}
.tx-table-wrapper th,
.tx-table-wrapper td {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.9rem;
}
.tx-table-wrapper thead {
  background: #2a2a2a;
}
.tx-table-wrapper thead th {
  color: #aaa;
}
.tx-table-wrapper tbody tr {
  border-top: 1px solid #333;
}
.tx-table-wrapper tbody tr:nth-child(even) {
  background: #1f1f1f;
}

/* Estilos de celdas específicas */
.tx-table-wrapper td:nth-child(1) {
  /* Nº Orden: como “botón” */
  color: #fff;
}
.tx-table-wrapper td:nth-child(1) a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #007aff;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
}
.tx-table-wrapper td:nth-child(4) {
  /* Monto: con recuadro más oscuro */
  text-align: right;
}
.tx-table-wrapper td:nth-child(4) .amount {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #0f3c12;
  border-radius: 4px;
}
.tx-table-wrapper td:nth-child(5) {
  text-align: center;
}

/* Paginación */
.tx-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
}
.tx-pagination button {
  background: #007aff;
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 0.5rem;
}
.tx-pagination span {
  color: #fff;
}

/* Resumen */
.tx-summary {
  text-align: right;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.cuentas-container {
  padding: 2rem;
  display: flex;
  justify-content: center;
}

.cuentas-box {
  background: #111;
  border-radius: 14px;
  padding: 2rem;
  width: 100%;
  max-width: 900px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.cuentas-box h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.btn-primary {
  background: #007aff;
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 2rem;
}

/* Tarjeta individual */
.cuenta-card {
  background: #1c1c1c;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: inset 0 0 0 1px #2a2a2a;
}

.cuenta-card h3 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.cuenta-dato {
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

.estado-badge {
  display: inline-block;
  background: #0066cc;
  color: white;
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  font-size: 0.8rem;
}

/* Contenedor general de documentos */
.documentos-container {
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* Título */
.documentos-container h2 {
  color: #fff;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
}

/* Formulario y dropzones */
.documentos-box {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Estilo de cada dropzone */
.dropzone {
  position: relative;
  border: 2px dashed #555;
  border-radius: 8px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}
.dropzone:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #777;
}

/* Oculta el input real */
.dropzone input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Contenido interno */
.dz-content {
  text-align: center;
  color: #ccc;
  pointer-events: none;
}
.dz-icon {
  font-size: 2rem;
  color: #3b82f6; /* azul */
  margin-bottom: 0.5rem;
}
.dz-text {
  font-size: 0.9rem;
  line-height: 1.4;
}
.dz-link {
  color: #3b82f6;
  text-decoration: underline;
}

/* Botón validar */
.validate-btn {
  align-self: flex-start;
  margin-top: 1rem;
}

/* Contenedor principal de soporte */
.support-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Tarjetas de soporte */
.support-form-card,
.support-list-card {
  background: #111;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.support-form-card h2,
.support-list-card h2 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: #fff;
}

/* Formulario de creación */
#ticketForm label {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  color: #ccc;
  font-size: 0.9rem;
}
#ticketForm input,
#ticketForm textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid #333;
  border-radius: 6px;
  background: #1a1a1a;
  color: #fff;
  font-size: 0.95rem;
}
#ticketForm input:focus,
#ticketForm textarea:focus {
  border-color: #007aff;
  outline: none;
}
.support-form-card .btn-primary {
  margin-top: 1rem;
}

/* Listado de tickets */
.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100px;
}
.ticket-item {
  background: #1a1a1a;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  color: #ddd;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}
.ticket-item .ticket-subject {
  font-weight: bold;
  color: #fff;
}
.ticket-item .ticket-desc {
  color: #bbb;
}
.ticket-item .ticket-meta {
  font-size: 0.8rem;
  color: #888;
  align-self: flex-end;
}

/* Mensaje vacío */
.empty-msg {
  color: #777;
  font-size: 0.9rem;
  text-align: center;
}

/* ---------------------------------------------------
   Contenedor con fondo gris claro
--------------------------------------------------- */
.dashboard-content-box {
  background: #1f1f1f;
  border-radius: 12px;
  padding: 1.5rem;
}

/* ---------------------------------------------------
   Grid de tarjetas
   2 columnas x 3 filas:
   [balance] [chart-header]
   [news]    [chart-body]
   [news]    [table ]
--------------------------------------------------- */
.cards-grid {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto auto;
  grid-gap: 1.5rem;
  align-items: start;
  padding: 0.5rem;
  grid-auto-rows: min-content;
}

/* Ubicaciones */
.balance-card {
  grid-column: 1;
  grid-row: 1;
}
.chart-header-card {
  grid-column: 2;
  grid-row: 1;
}
.news-card {
  grid-column: 1;
  grid-row: 2;
}

/* ---------------------------------------------------
   Cards básicas
--------------------------------------------------- */
.chart-header-card {
  display: flex;
  justify-content: left;
  margin-bottom: 0;
}

/* Espaciado extra en headers */
.chart-header-card .card-header {
  display: flex;
  justify-content: left;
  flex-direction: column;
  align-items: flex-start;
}
.chart-header-card .card-header h3 {
  margin: 0 0 0.5rem 0; /* Margen inferior de 0.5rem */
}
.chart-header-card select {
  background: #222;
  border: 1px solid #333;
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  margin-top: 0.5rem; /* Espacio superior opcional */
}

/* ---------------------------------------------------
   Balance card
--------------------------------------------------- */
.balance-card {
  grid-column: 1;
  grid-row: 1;
  text-align: center;
}

.balance-amount {
  font-size: 2rem;
  margin: 0.5rem 0;
}

.btn-primary {
  background: #007aff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}

/* ---------------------------------------------------
   Chart body
--------------------------------------------------- */
.chart-container {
  height: 360px;
  background: #222;
  border-radius: 8px;
}

/* ---------------------------------------------------
   Table card
--------------------------------------------------- */
.table-card {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  height: 100%; /* Ocupa todo el espacio disponible */
  overflow: hidden;
}

.table-card table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.table-card thead,
.table-card tbody {
  display: block; /* Permite scroll en el cuerpo */
}

.table-card thead {
  width: 100%;
}

.table-card thead th {
  background: #222;
  padding: 0.75rem;
  color: #aaa;
  text-align: left;
  border-bottom: 1px solid #333;
}
.table-card tbody {
  overflow-y: auto;
}
.table-card tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.table-card thead th,
.table-card tbody td {
  width: 16%; /* Ajusta el ancho de las columnas según sea necesario */
}

.table-card tbody td {
  padding: 0.75rem;
  border-top: 1px solid #333;
  font-size: 0.9rem;
  color: #fff;
}

.table-card tbody tr:nth-child(even) {
  background: #1f1f1f; /* Fondo alternado para filas pares */
}

.table-card tbody tr:nth-child(odd) {
  background: #111; /* Fondo alternado para filas impares */
}

.pagination {
  margin: 0.75rem;
  text-align: center;
}
.pagination button {
  background: #007aff;
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  margin: 0 0.5rem;
  cursor: pointer;
}
.pagination span {
  color: #fff;
}

/* Contenedor del formulario */
#addAccountForm {
  background: #1a1a1a; /* Fondo oscuro */
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra */
  color: #fff; /* Texto blanco */
  margin-top: 1rem;
}

/* Título del formulario */
#addAccountForm h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: #007aff; /* Azul primario */
}

/* Etiquetas */
#addAccountForm label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #ccc; /* Gris claro */
}

/* Campos de entrada */
#addAccountForm input {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #444; /* Borde gris oscuro */
  border-radius: 6px;
  background: #222; /* Fondo oscuro */
  color: #fff; /* Texto blanco */
  font-size: 0.9rem;
}

/* Campos de entrada al enfocar */
#addAccountForm input:focus {
  border-color: #007aff; /* Azul primario */
  outline: none;
}

/* Botón de guardar */
#addAccountForm button {
  background: #007aff; /* Azul primario */
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}

/* Botón al pasar el mouse */
#addAccountForm button:hover {
  background: #005bb5; /* Azul más oscuro */
}

.cuenta-dato select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #444; /* Borde gris oscuro */
  border-radius: 6px; /* Bordes redondeados */
  background: #222; /* Fondo oscuro */
  color: #fff; /* Texto blanco */
  font-size: 0.9rem;
  appearance: none; /* Oculta el estilo predeterminado del navegador */
}

.cuenta-dato input {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #444; /* Borde gris oscuro */
  border-radius: 6px; /* Bordes redondeados */
  background: #222; /* Fondo oscuro */
  color: #fff; /* Texto blanco */
  font-size: 0.9rem;
  appearance: none; /* Oculta el estilo predeterminado del navegador */
}

.cuenta-dato textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #444; /* Borde gris oscuro */
  border-radius: 6px; /* Bordes redondeados */
  background: #222; /* Fondo oscuro */
  color: #fff; /* Texto blanco */
  font-size: 0.9rem;
  appearance: none; /* Oculta el estilo predeterminado del navegador */
}

/* Icono de flecha para el select */
.cuenta-dato select:focus {
  border-color: #007aff; /* Azul primario al enfocar */
  outline: none;
}

/* Ajuste para navegadores que no soportan appearance */
.cuenta-dato select::-ms-expand {
  display: none; /* Oculta la flecha predeterminada en IE/Edge */
}

/* Botón "Eliminar" (Rojo) */
.btn-danger {
  background-color: #e74c3c; /* Rojo */
  color: #fff; /* Texto blanco */
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-danger:hover {
  background-color: #c0392b; /* Rojo más oscuro al pasar el mouse */
}

/* Botón "Editar" (Azul) */
.btn-primary {
  background-color: #3498db; /* Azul */
  color: #fff; /* Texto blanco */
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #2980b9; /* Azul más oscuro al pasar el mouse */
}

/* Botón "Volver" (Gris) */
.btn-secondary {
  background-color: #95a5a6; /* Gris */
  color: #fff; /* Texto blanco */
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-secondary:hover {
  background-color: #7f8c8d; /* Gris más oscuro al pasar el mouse */
}

/* Agrega esto en tu archivo CSS o en un bloque <style> en el head */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: #2d3748;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-50px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header h3 {
    margin: 0;
    color: #fff;
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
}

.modal-body .form-group {
    margin-bottom: 15px;
}

.modal-body label {
    display: block;
    margin-bottom: 5px;
    color: #fff;
}

.modal-body input,
.modal-body textarea,
.modal-body select {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #4a5568;
    background-color: #1a202c;
    color: #fff;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}