@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root{
  --bg1: #f7efe3;
  --bg2: #f2e7d0;
  --card: #fff8f0;
  --text: #3d2f2f;
  --muted: #7a6a5f;
  --amber: #d99a3a;
  --amber-dark: #b9822e;
}

/* ===== FONDO DE PERGAMINO ===== */
body{
  margin:0;
  background: url('imagenes_fondo/fondo_actas.jpg') no-repeat center center fixed;
  background-size: cover;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height:100vh;
}

/* ===== CONTENEDOR GENERAL ===== */
.container{
  max-width:980px;
  margin:40px auto;
  padding:20px;
}

/* ===== HEADER CON IMAGEN DE IGLESIA ===== */
.header {
  position: relative;
  text-align: center;
  padding: 60px 12px 40px 12px;
  margin-bottom: 20px;
  color: #fff;
  background: url('imagenes_iglesia/imagen_iglesia.jpg') center/cover no-repeat;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

.header::after {
  content: "";
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.45); /* oscurece para que se lean las letras */
  z-index:0;
}

.header h1,
.header h2,
.header .subtitle,
.header form {
  position: relative;
  z-index: 1;
}

.header h1.title {
  font-size: 2.4rem;
  margin:0;
  font-weight:600;
  letter-spacing: 1px;
}

.header h2.subtitle {
  color:#f5f5f5;
  margin-top:8px;
  font-size:1.1rem;
}

/* ===== BUSCADOR ===== */
.search-box{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  flex-wrap: wrap;
}

/* Campos de texto, select y número */
.search-box input[type="text"],
.search-box input[type="number"],
.search-box select {
  width: 30%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #eadfcf;
  background: rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  font-size: 1rem;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all .25s ease;
}

/* Efecto al enfocar */
.search-box input:focus,
.search-box select:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(217,154,58,0.3);
  outline: none;
}

/* Flecha personalizada para el select */
.search-box select {
  position: relative;
  padding-right: 34px;
  background: rgba(255,255,255,0.75)
    url('data:image/svg+xml;utf8,<svg fill="%233d2f2f" height="26" viewBox="0 0 24 24" width="26" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>')
    no-repeat right 10px center;
  background-size: 18px;
}

/* Botón de búsqueda */
.btn-amber{
  padding:12px 20px;
  border-radius:10px;
  border:none;
  background:linear-gradient(180deg,var(--amber),var(--amber-dark));
  color:#fff;
  font-weight:600;
  cursor:pointer;