/* ===== UI CLUB (PC + MÓVIL) ===== */
:root{
  --guinda:#6b1523;
  --dorado:#b07a1a;
  --bg:#f6f3f3;
  --card:#ffffff;
  --text:#1f1f1f;
  --muted:#6b6b6b;
  --btn:#1f5f2b;
  --btn2:#174820;
  --radius:18px;
}

/* base */
html,body{height:100%;}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* header estilo gobierno */
.ui-topbar{
  background: var(--guinda);
  color:#fff;
}
.ui-topbar .wrap{
  max-width: 1120px;
  margin:0 auto;
  padding: 18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.ui-brand{
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:800;
  letter-spacing:.5px;
}
.ui-brand img{
  width:44px;height:44px;object-fit:contain;
  background:#fff;border-radius:8px;padding:6px;
}
.ui-brand .title{
  font-size:22px;
  line-height:1;
}
.ui-topbar .login{
  font-weight:700;
  opacity:.95;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:14px;
}

/* barra dorada */
.ui-subbar{
  background: var(--dorado);
  color:#fff;
}
.ui-subbar .wrap{
  max-width: 1120px;
  margin:0 auto;
  padding: 12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.ui-subbar .left{
  font-size:34px;
  opacity:.9;
}
.ui-subbar .right{
  display:flex;
  gap:22px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  font-size:14px;
}

/* contenido */
.container{
  max-width:1120px !important;
  margin:0 auto !important;
  padding: 46px 18px 90px !important;
}
h1.title{
  font-size: clamp(34px, 3.4vw, 54px) !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.6px !important;
}
.subtitle{
  margin:0 0 26px !important;
  color: var(--muted) !important;
  font-size: 18px !important;
}

/* card */
.box, .card, center, form{
  max-width: 980px !important;
  margin: 0 auto !important;
}
.card{
  background: var(--card);
  border-radius: var(--radius);
  border: 2px solid rgba(176,122,26,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 26px 22px;
}

/* buscador */
form{
  display:flex !important;
  gap:14px !important;
  align-items:center !important;
}
input[type="text"], input[type="search"], input{
  flex:1 !important;
  height: 56px !important;
  border-radius: 14px !important;
  border: 2px solid rgba(0,0,0,.12) !important;
  padding: 0 16px !important;
  font-size: 18px !important;
  outline:none !important;
}
input:focus{
  border-color: rgba(176,122,26,.65) !important;
  box-shadow: 0 0 0 4px rgba(176,122,26,.18) !important;
}
button, .btn, input[type="submit"]{
  height:56px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  border:0 !important;
  background: var(--btn) !important;
  color:#fff !important;
  font-weight:800 !important;
  font-size:18px !important;
  cursor:pointer !important;
}
button:hover, .btn:hover, input[type="submit"]:hover{
  background: var(--btn2) !important;
}

/* footer guinda */
.ui-footerbar{
  position:fixed;
  left:0; right:0; bottom:0;
  background: var(--guinda);
  color:#fff;
}
.ui-footerbar .wrap{
  max-width: 1120px;
  margin:0 auto;
  padding: 16px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.ui-footerbar .col{
  font-weight:800;
  letter-spacing:.4px;
}
.ui-footerbar .muted{
  opacity:.9;
  font-weight:700;
}

/* responsive */
@media (max-width: 768px){
  .ui-subbar .left{font-size:28px;}
  form{flex-direction:column !important; align-items:stretch !important;}
  button, input[type="submit"]{width:100% !important;}
  input{width:100% !important;}
  .container{padding-top:30px !important;}
}