/* ===== BASE ===== */
body {
  font-family: Arial;
  background: #121212;
  color: #e0e0e0;
  margin: 0;
}

/* ===== CONTENEDOR ===== */
.container {
  width: 60%;
  margin: auto;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

/* ===== HEADER ===== */
.header {
  background: #1e1e1e;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #333;

  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-left,
.header-center,
.header-right {
  width: 33%;
}

.header-center {
  text-align: center;
}

.header-right {
  text-align: right;
}

.header img {
  height: 40px;
}

/* ===== TARJETAS ===== */
.card {
  background: #1e1e1e;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* ===== INPUTS ===== */
input, textarea {
  width: 100%;
  /*padding: 8px;*/
  margin-bottom: 10px;
  background: #2a2a2a;
  color: white;
  border: 1px solid #444;
  border-radius: 5px;
  height: 38px;
}

/* ===== BOTONES ===== */
button {
  padding: 6px 12px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  background: #3a86ff;
  color: white;
  cursor: pointer;
  height: 38px;
}

button:hover {
  background: #2667cc;
}

/* BOTÓN ROJO */
.btn-danger {
  background: #e63946;
}

.btn-danger:hover {
  background: #b71c1c;
}

/* LINKS */
a {
  color: #90caf9;
  text-decoration: none;
}

/* ===== TOP BAR (NUEVO CLIENTE + BUSCADOR) ===== */
.top-bar {
  display: flex;
  flex-direction: column; /* 🔥 CLAVE */
  gap: 10px;
  margin-bottom: 15px;
}

/* FILA BOTÓN 
.top-row {
  width: 100%;
}

.top-row button {
  width: 100%;
} */

/* FILA BUSCADOR */
.search-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.search-row input {
  flex: 1;
}

.search-row button {
  min-width: 100px;
  white-space: nowrap;
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-row > div {
  flex: 1;
}

.tipoficha {
  height: 38px;
}

.tipocliente {
  width: 20px;
}