/* Same look as clubdiscobolo.com (discobolo-web): white/paper and verde noche,
   like the club's buildings; crest colors (violet, green, yellow) only as small
   accents; Cormorant Garamond for headings, EB Garamond for text (self-hosted,
   SIL OFL, see static/fuentes). */
@font-face { font-family: "Cormorant Garamond"; src: url("fuentes/cormorant-garamond.c47ff12887a3.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fuentes/eb-garamond.f12bc30ca94a.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fuentes/eb-garamond-italic.9cd12d294a2d.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --verde: #173a2c; --verde-oscuro: #0f2a1f; --verde-claro: #e9efe9; --texto: #1c2521; --suave: #59635e;
  --borde: #ddd8cb; --fondo: #faf8f3; --blanco: #fff;
  --violeta: #330065; --verde-escudo: #029834; --amarillo: #fffe04;
  --deuda: #9b2c1f; --deuda-fondo: #fbeeec; --ok: #1f6b3a; --ok-fondo: #eaf5ee;
  --favor: #2c4f8a; --favor-fondo: #edf2fa; --aviso-fondo: #fff6dc;
  --titulos: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --cuerpo: "EB Garamond", Garamond, Georgia, serif;
  font-family: var(--cuerpo);
  color: var(--texto); background: var(--fondo);
}
* { box-sizing: border-box; }
html { background: var(--fondo); }
/* Lining, equal-width figures: amounts line up and read easily. */
body { margin: 0; background: var(--fondo); font-size: 18px; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; }
main { max-width: 980px; margin: 0 auto; padding: 22px 16px 60px; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 600; letter-spacing: .01em; }
/* Amounts and numbers: EB Garamond, whose figures are lining (Cormorant's web
   font only has old-style ones, which look like small letters). */
.tile strong, .balance strong, .big {
  font-family: var(--cuerpo) !important; font-variant-numeric: lining-nums tabular-nums; }
h1 { font-size: 2.1rem; margin: 0 0 4px; line-height: 1.1; }
h2 { font-size: 1.45rem; margin: 0 0 10px; display: inline; }
h3 { font-size: 1.15rem; margin: 10px 0 4px; color: var(--suave); }
a { color: var(--verde); }
small, .hint { color: var(--suave); }
.hint { margin: 4px 0 14px; }

.top { display: flex; gap: 16px; align-items: center; padding: 10px 16px; background: var(--verde-oscuro); color: #fff; flex-wrap: wrap; }
.top a, .top .link { color: #fff; text-decoration: none; }
.top nav a, .top nav .link { font-variant: small-caps; letter-spacing: .06em; font-size: 1.05rem; opacity: .9; }
.top nav a:hover, .top nav .link:hover { opacity: 1; text-decoration: underline; }
.brand { display: flex; align-items: center; gap: 10px; font: 600 1.55rem/1 var(--titulos); letter-spacing: .03em; }
.brand img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.brand span { font-weight: 500; font-style: italic; opacity: .75; font-family: var(--cuerpo); font-size: 1.05rem; }
/* Thin ribbon in the crest's colors, under the bar (as on the website). */
.cinta { display: flex; height: 4px; }
.cinta span { flex: 1; }
.cinta span:nth-child(1) { background: var(--verde-escudo); }
.cinta span:nth-child(2) { background: var(--violeta); }
.cinta span:nth-child(3) { background: var(--amarillo); }
.search { flex: 1; min-width: 200px; }
.search { position: relative; }
.search input { width: 100%; padding: 9px 12px; border-radius: 8px; border: 0; font: inherit; }
.suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; list-style: none; margin: 0; padding: 4px 0; background: var(--blanco); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); max-height: 70vh; overflow-y: auto; }
.suggest li { display: flex; flex-direction: column; padding: 7px 12px; cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--verde-claro); }
.suggest li.muted strong { color: #98a39c; font-weight: 500; }
.suggest li.none { color: var(--suave); cursor: default; }
.top nav { display: flex; gap: 16px; align-items: center; }
.top nav form { margin: 0; }

.card { background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 16px 18px; margin: 14px 0; }
.narrow { max-width: 460px; }
details.card summary { cursor: pointer; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cols .card { margin: 0; }
@media (max-width: 720px) { .cols { grid-template-columns: 1fr; } }

label { display: block; margin: 12px 0; font-weight: 600; }
input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; border: 1px solid var(--borde); border-radius: 8px; font-weight: 400; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row input { width: auto; flex: 1; margin: 0; }
button, .button { font: inherit; display: inline-block; padding: 10px 16px; font-size: 1rem; border-radius: 8px; border: 1px solid var(--borde); background: var(--blanco); color: var(--texto); cursor: pointer; text-decoration: none; }
.primary { background: var(--verde); color: #fff; border-color: var(--verde); font-weight: 600; }
.danger { background: var(--deuda); color: #fff; border-color: var(--deuda); }
.whatsapp { background: #1f8f4e; color: #fff; border-color: #1f8f4e; }
button.link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font-size: inherit; }

.msg { padding: 10px 14px; border-radius: 8px; background: var(--verde-claro); }
.msg.error { background: var(--deuda-fondo); color: var(--deuda); }
.msg.warning { background: var(--aviso-fondo); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
.tile { display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: inherit; }
.tile strong { font: 600 1.9rem/1.2 var(--titulos); }
.tile.warn { background: var(--aviso-fondo); }

.account-head { display: flex; justify-content: space-between; align-items: end; }
.balance { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-radius: 12px; padding: 16px 20px; margin: 10px 0; border: 1px solid var(--borde); }
.balance div { display: flex; flex-direction: column; }
.balance strong { font: 600 2.6rem/1.1 var(--titulos); }
.balance.debt { background: var(--deuda-fondo); } .balance.debt strong { color: var(--deuda); }
.balance.ok { background: var(--ok-fondo); } .balance.ok strong { color: var(--ok); }
.balance.credit { background: var(--favor-fondo); } .balance.credit strong { color: var(--favor); }

.month ul { list-style: none; padding: 0; margin: 0; }
.month li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--fondo); }

table.list { width: 100%; border-collapse: collapse; background: var(--blanco); }
.list th, .list td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.list th { font-size: .85rem; color: var(--suave); font-weight: 600; }
.amount { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.muted td { color: #98a39c; }
.tag { font-size: .75rem; background: var(--verde-claro); color: var(--verde); padding: 1px 6px; border-radius: 6px; }
.movements { font-size: .92rem; margin-top: 10px; }

.confirm { background: var(--verde-claro); border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.confirm p { margin: 4px 0; }
.big { font-size: 2rem; font-weight: 700; margin: 0; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.spacer { flex: 1; }
.meta { max-width: 640px; margin: 10px auto; }

/* Receipt: one simple frame, crest and "Recibo de pago" on top, small labels,
   a tinted total box; the same on screen, on paper (A4) and on a phone. */
.receipt { position: relative; overflow: hidden; max-width: 760px; margin: 0 auto; background: #fff; color: var(--texto); padding: 34px 38px 26px; border: 1px solid #8a948f; }
.receipt dl { margin: 0; }
.receipt dt { font: 600 .72rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); margin-bottom: 4px; }
.receipt dd { margin: 0; }
.receipt h3 { font: 600 .8rem/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); margin: 0 0 14px; }
.rc-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px dashed #b9c0bb; }
.rc-club { display: flex; gap: 14px; align-items: center; }
.rc-club img { width: 72px; height: 72px; flex: none; }
.rc-club div { display: flex; flex-direction: column; min-width: 15em; font-size: .85rem; color: var(--suave); line-height: 1.35; }
.rc-club strong { font: 600 1.3rem/1.15 var(--titulos); color: var(--texto); margin-bottom: 2px; }
.rc-title { text-align: right; }
.rc-title h2 { display: block; white-space: nowrap; font: 500 2.3rem/1 var(--titulos); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 16px; }
.rc-title dl { display: flex; gap: 34px; justify-content: flex-end; }
.rc-client { padding: 22px 0 28px; }
.rc-client dl { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 12px 24px; }
table.rc-detail { width: 100%; border-collapse: collapse; }
.rc-detail th { font: 600 .72rem/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; text-align: left; padding: 0 12px 9px; border-bottom: 1px solid #6f7a74; }
.rc-detail td { padding: 14px 12px; border-bottom: 1px solid #6f7a74; vertical-align: top; }
.rc-detail th:nth-child(2), .rc-detail td:nth-child(2) { width: 120px; }
.rc-detail th:last-child, .rc-detail td:last-child { width: 130px; text-align: right; }
.rc-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-top: 18px; }
.rc-summary p { margin: 6px 0 0 12px; color: var(--suave); font-size: .92rem; }
.rc-total { display: flex; flex-direction: column; align-items: flex-end; background: var(--verde-claro); padding: 12px 20px; min-width: 200px; }
.rc-total span { font: 600 .8rem/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); }
.rc-total strong { font: 700 1.8rem/1.2 var(--cuerpo); font-variant-numeric: lining-nums tabular-nums; }
.rc-notes { margin-top: 28px; padding-top: 14px; border-top: 1px solid #6f7a74; }
.rc-notes h3 { margin-bottom: 6px; }
.rc-notes p { margin: 0; font-style: italic; }
.rc-foot { text-align: center; margin-top: 44px; }
.rc-foot p { margin: 0; font: italic 1.15rem/1.3 var(--cuerpo); }
.rc-foot small { font-size: .78rem; }
.stamp { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); font-size: 3.5rem; font-weight: 800; color: rgba(155, 44, 31, .25); border: 6px solid rgba(155, 44, 31, .25); padding: 0 20px; margin: 0; z-index: 1; }
@media (max-width: 600px) {
  .receipt { padding: 20px 16px; }
  .rc-head { flex-direction: column; gap: 16px; }
  .rc-title { text-align: left; }
  .rc-title h2 { font-size: 1.8rem; margin-bottom: 10px; white-space: normal; }
  .rc-club div { min-width: 0; }
  .rc-title dl { justify-content: flex-start; }
  .rc-client dl { grid-template-columns: 1fr 1fr; }
  .rc-detail th:nth-child(2), .rc-detail td:nth-child(2) { display: none; }
  .rc-detail th:last-child, .rc-detail td:last-child { width: 100px; }
  .rc-summary { flex-direction: column-reverse; align-items: stretch; }
  .rc-summary p { margin-left: 0; }
}

@media print {
  .no-print, .top { display: none !important; }
  :root, body, main { background: #fff; padding: 0; }
  .receipt { max-width: none; font-size: 11pt; padding: 12mm 12mm 8mm; }
  @page { size: A4; margin: 14mm; }
}

.login { margin: 40px auto; text-align: center; }
.login img { width: 96px; height: 96px; border-radius: 50%; }
.login form { text-align: left; }
.login button { width: 100%; margin-top: 6px; }