:root {
  --azul: #1e40af;
  --azul-claro: #eff6ff;
  --gris-borde: #d9dee6;
  --gris-texto: #4b5563;
  --rojo: #b91c1c;
  --fondo: #f5f6f8;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: #111827;
}

.pantalla { min-height: 100vh; }

.tarjeta {
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.tarjeta-login {
  max-width: 380px;
  margin: 10vh auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subtitulo { color: var(--gris-texto); margin-top: -8px; }

label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--gris-texto); }

input, select {
  padding: 8px 10px;
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  font-size: 14px;
}

button {
  background: var(--azul);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
}
button:hover { opacity: 0.9; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.boton-secundario {
  background: #fff;
  color: var(--azul);
  border: 1px solid var(--azul);
}

.error { color: var(--rojo); font-size: 14px; }

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid var(--gris-borde);
}
.cabecera h1 { font-size: 18px; margin: 0; }
.cabecera-derecha { display: flex; align-items: center; gap: 12px; font-size: 14px; }

.contenido { max-width: 900px; margin: 24px auto; padding: 0 16px; }

.fila-clientes { display: flex; gap: 10px; align-items: center; }
.fila-clientes select { flex: 1; }

.form-inline { display: flex; gap: 10px; margin-top: 12px; }
.form-inline input { flex: 1; }

.fila { display: flex; gap: 16px; margin-bottom: 12px; }
.fila label { flex: 1; }

#formInforme { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

.ayuda { font-size: 13px; color: var(--gris-texto); }

#ajustesSocioFilas { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.ajuste-fila { display: flex; gap: 8px; }
.ajuste-fila input[type="text"] { flex: 2; }
.ajuste-fila input[type="number"] { flex: 1; }
.ajuste-fila button { background: transparent; color: var(--rojo); border: 1px solid var(--rojo); padding: 6px 10px; }

#listaInformes { list-style: none; padding: 0; margin: 0; }
#listaInformes li {
  padding: 10px 12px;
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
#listaInformes li:hover { background: var(--azul-claro); }

.cabecera-informe { display: flex; justify-content: space-between; align-items: center; }

.informe-markdown { line-height: 1.55; }
.informe-markdown h1, .informe-markdown h2, .informe-markdown h3 { color: var(--azul); }
.informe-markdown table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.informe-markdown th, .informe-markdown td { border: 1px solid var(--gris-borde); padding: 6px 10px; text-align: left; font-size: 14px; }
.informe-markdown th { background: var(--azul-claro); }