/* App de socios Beers & Lifts — misma marca que beersandlifts.cl (variables tomadas de su style.css v12)
   y branding oficial: Rowdies solo en MAYÚSCULAS para títulos. */
@font-face{font-family:"Rowdies";src:url("../fonts/Rowdies-Bold.ttf") format("truetype");font-weight:700 800;font-display:swap;}
@font-face{font-family:"Rowdies";src:url("../fonts/Rowdies-Regular.ttf") format("truetype");font-weight:400;font-display:swap;}

:root{
  --bl-negro:#0E0E0E;
  --bl-panel:#171717;
  --bl-blanco:#FFFFFF;
  --bl-texto:#B4B4B4;
  --bl-borde:#2C2C2C;
  --bl-ambar:#F5B301;
  --bl-fino:#8A8A8A;
  --bl-ok:#3FB950;
  --bl-alerta:#F5B301;
  --bl-error:#F85149;
  --radius:14px;
  --maxw:1000px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bl-negro);color:var(--bl-texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:"Rowdies",sans-serif;text-transform:uppercase;letter-spacing:.02em;
  color:var(--bl-blanco);line-height:1.2;margin:0 0 .6em;}
h1{font-size:1.9rem;} h2{font-size:1.35rem;} h3{font-size:1.05rem;}
p{margin:0 0 1em;}
a{color:var(--bl-blanco);}
a:hover{color:var(--bl-ambar);}
img{max-width:100%;height:auto;}
.contenedor{max-width:var(--maxw);margin:0 auto;padding:1.5rem 1.2rem 3rem;}
.fino{color:var(--bl-fino);font-size:.9rem;}

/* Header */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.7rem 1.2rem;
  background:rgba(14,14,14,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--bl-borde);}
.brand{display:flex;align-items:center;gap:.55rem;font-family:"Rowdies",sans-serif;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;font-size:.95rem;color:var(--bl-blanco);text-decoration:none;margin-right:auto;}
.brand img{height:34px;width:auto;}
.nav{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;}
.nav a{color:var(--bl-texto);text-decoration:none;font-size:.92rem;padding:.2rem 0;border-bottom:2px solid transparent;}
.nav a:hover,.nav a.activo{color:var(--bl-blanco);border-bottom-color:var(--bl-ambar);}
.nav form{margin:0;}
.nav button.enlace{background:none;border:0;color:var(--bl-texto);font:inherit;font-size:.92rem;cursor:pointer;padding:.2rem 0;}
.nav button.enlace:hover{color:var(--bl-blanco);}

/* Tarjetas y paneles */
.tarjeta{background:var(--bl-panel);border:1px solid var(--bl-borde);border-radius:var(--radius);padding:1.2rem 1.3rem;margin-bottom:1.2rem;}
.grilla{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.cifra{font-family:"Rowdies",sans-serif;font-size:1.8rem;color:var(--bl-blanco);line-height:1.1;}
.cifra.ambar{color:var(--bl-ambar);}

/* Botones */
.boton,button.boton{display:inline-block;background:var(--bl-blanco);color:var(--bl-negro);border:0;border-radius:999px;
  padding:.7rem 1.5rem;font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;}
.boton:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,255,255,.15);color:var(--bl-negro);}
.boton.ambar{background:var(--bl-ambar);}
.boton.secundario{background:transparent;color:var(--bl-blanco);border:1px solid var(--bl-borde);}
.boton.peligro{background:var(--bl-error);color:var(--bl-blanco);}
.boton.chico{padding:.35rem .9rem;font-size:.85rem;}

/* Formularios */
label{display:block;color:var(--bl-blanco);font-size:.92rem;margin:.8rem 0 .3rem;}
input,select,textarea{width:100%;background:var(--bl-negro);color:var(--bl-blanco);border:1px solid var(--bl-borde);
  border-radius:10px;padding:.6rem .8rem;font:inherit;font-size:1rem;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--bl-ambar);outline-offset:1px;border-color:var(--bl-ambar);}
input[type=checkbox],input[type=radio]{width:auto;}
.ayuda,.helptext{display:block;color:var(--bl-fino);font-size:.85rem;margin-top:.2rem;}
.errorlist{list-style:none;padding:0;margin:.3rem 0;color:var(--bl-error);font-size:.9rem;}
.form-acciones{margin-top:1.2rem;display:flex;gap:.8rem;flex-wrap:wrap;}

/* Tablas */
.tabla-scroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.95rem;}
th{text-align:left;color:var(--bl-blanco);font-weight:600;border-bottom:1px solid var(--bl-borde);padding:.55rem .5rem;white-space:nowrap;}
td{border-bottom:1px solid var(--bl-borde);padding:.55rem .5rem;vertical-align:top;}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.nowrap{white-space:nowrap;}

/* Fila horizontal de botones de acción (banco, etc.): wrap en vez de apilar en columna */
.acciones-fila{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.acciones-fila form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.acciones-fila select{width:auto;max-width:180px;}

/* Tablas que se vuelven tarjetas en celular: cada <tr> es una tarjeta y cada <td> muestra su
   etiqueta (data-label) a la izquierda y el valor a la derecha. En escritorio, tabla normal. */
@media (max-width:720px){
  table.tabla-tarjetas,table.tabla-tarjetas thead,table.tabla-tarjetas tbody,
  table.tabla-tarjetas tr,table.tabla-tarjetas td{display:block;width:100%;}
  table.tabla-tarjetas thead{display:none;}
  table.tabla-tarjetas tr{border:1px solid var(--bl-borde);border-radius:12px;padding:.3rem .8rem;margin-bottom:.8rem;}
  table.tabla-tarjetas td{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
    gap:.4rem .8rem;border-bottom:1px solid var(--bl-borde);padding:.5rem 0;text-align:right;}
  table.tabla-tarjetas td:last-child{border-bottom:0;}
  table.tabla-tarjetas td[data-label]::before{content:attr(data-label);color:var(--bl-fino);
    font-size:.85rem;text-align:left;margin-right:auto;}
}

/* Estados */
.etiqueta{display:inline-block;border-radius:999px;padding:.1rem .65rem;font-size:.8rem;font-weight:700;border:1px solid currentColor;white-space:nowrap;}
.etiqueta.ok,.etiqueta.al_dia,.etiqueta.validado,.etiqueta.pagado{color:var(--bl-ok);}
.etiqueta.vencida,.etiqueta.por_validar,.etiqueta.pendiente,.etiqueta.morosa{color:var(--bl-ambar);}
.etiqueta.suspendida,.etiqueta.causal_exclusion,.etiqueta.rechazado,.etiqueta.vencido{color:var(--bl-error);}
.mensajes{list-style:none;padding:0;margin:0 0 1rem;}
.mensajes li{border-radius:10px;padding:.6rem .9rem;margin-bottom:.5rem;border:1px solid var(--bl-borde);background:var(--bl-panel);color:var(--bl-blanco);}
.mensajes li.success{border-color:var(--bl-ok);} .mensajes li.error{border-color:var(--bl-error);} .mensajes li.warning{border-color:var(--bl-ambar);}
.aviso{border-left:3px solid var(--bl-ambar);padding:.6rem .9rem;background:var(--bl-panel);border-radius:0 10px 10px 0;margin:0 0 1rem;}

/* Login centrado */
.caja-central{max-width:420px;margin:3rem auto;}
.caja-central .logo{display:block;margin:0 auto 1.2rem;height:110px;width:auto;}

@media (max-width:720px){
  h1{font-size:1.5rem;}
  .site-header{flex-wrap:wrap;}
  .nav{width:100%;gap:.9rem;}
  td,th{padding:.45rem .35rem;}
}
@media (prefers-reduced-motion:reduce){.boton{transition:none;}}