@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:#F2F8FC;
  --surface:#FFFFFF;
  --ink:#0F3050;
  --ink-soft:#4E6E88;
  --navy:#123C5E;
  --navy-deep:#0A2740;
  --sky:#1C8FC9;
  --gold:#F5C518;
  --gold-deep:#B9860B;
  --gold-ink:#2E2000;
  --line:rgba(18,60,94,0.14);
  --shadow: 0 18px 40px -22px rgba(10,39,64,0.4);
  --danger:#B3261E;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:20px;
}
h1,h2,h3{
  font-family:"Fraunces", ui-serif, Georgia, serif;
  font-weight:600;
  font-style:italic;
  letter-spacing:-0.01em;
  margin:0 0 6px;
  color:var(--navy);
}
p{margin:0;}
a{color:var(--sky);}

.wrap-center{
  min-height:calc(100vh - 40px);
  display:flex;align-items:center;justify-content:center;
}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);padding:clamp(28px,5vw,44px);
  max-width:420px;width:100%;text-align:center;
}
.card .logo{height:44px;width:auto;margin-bottom:18px;}
.muted{color:var(--ink-soft);margin-top:8px;font-size:0.95rem;}
.error{
  margin-top:16px;padding:10px 14px;border-radius:10px;
  background:rgba(179,38,30,0.08);color:var(--danger);font-size:0.92rem;
}

form{display:flex;flex-direction:column;gap:14px;margin-top:22px;text-align:left;}
label{display:flex;flex-direction:column;gap:6px;font-size:0.88rem;font-weight:600;color:var(--ink);}
input, select{
  font-family:"Work Sans",sans-serif;font-size:0.97rem;
  padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,197,24,0.35);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:100px;border:none;cursor:pointer;
  background:var(--gold);color:var(--gold-ink);font-weight:600;font-size:0.96rem;
  font-family:"Work Sans",sans-serif;text-decoration:none;
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line);}
.btn-danger{background:rgba(179,38,30,0.08);color:var(--danger);}
.btn-small{padding:8px 14px;font-size:0.85rem;}

/* ---- resultado consulta alumno ---- */
.result{margin-top:24px;text-align:left;border-top:1px solid var(--line);padding-top:20px;}
.result-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:0.95rem;}
.result-row:last-child{border-bottom:none;}
.result-row .label{color:var(--ink-soft);}
.result-row .value{font-weight:600;}
.total-pendiente{color:var(--gold-deep);}
.total-al-dia{color:#1B7A3D;}

.payments-list{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.payment-item{
  display:flex;justify-content:space-between;gap:10px;
  background:var(--bg);border-radius:10px;padding:10px 14px;font-size:0.88rem;
}
.payment-item .concepto{color:var(--ink);}
.payment-item .fecha{color:var(--ink-soft);font-size:0.8rem;}

/* ---- panel admin ---- */
.admin-header{
  max-width:1100px;margin:0 auto 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.admin-wrap{max-width:1100px;margin:0 auto;}
.admin-header .brand{display:flex;align-items:center;gap:10px;}
.admin-header .brand img{height:32px;filter: invert(1) brightness(0.3);}
.admin-header h1{font-size:1.4rem;margin:0;}

.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:clamp(20px,3vw,28px);margin-bottom:24px;
}
.panel h2{font-size:1.15rem;margin-bottom:16px;}

.add-form{flex-direction:row;flex-wrap:wrap;align-items:end;gap:12px;margin-top:0;}
.add-form label{min-width:160px;flex:1;}
.add-form .btn{align-self:stretch;}

.table-scroll{overflow-x:auto;}
table{width:100%;min-width:820px;border-collapse:collapse;font-size:0.92rem;}
th, td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
th{color:var(--ink-soft);font-weight:600;font-size:0.82rem;text-transform:none;}
.codigo{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;background:var(--bg);padding:2px 8px;border-radius:6px;letter-spacing:0.03em;}

.inline-form{display:flex;gap:8px;align-items:center;margin:0;flex-wrap:wrap;}
.inline-form input{padding:8px 10px;font-size:0.85rem;width:110px;}
.inline-form input[name="concepto"]{width:150px;}

details{margin-top:8px;}
summary{cursor:pointer;color:var(--sky);font-size:0.85rem;font-weight:600;}