/* Horarios Familiares — pantalla de ingreso */
:root{
  --bg:#F7F4EF;
  --surface:#FFFFFF;
  --surface-2:#FCFAF7;
  --line:#E7E0D6;
  --line-soft:#F1ECE4;
  --ink:#221E1A;
  --ink-2:#5C544B;
  --ink-3:#948B7F;
  --accent:#1F6F5C;
  --shadow-sm:0 1px 2px rgba(45,35,20,.05), 0 1px 3px rgba(45,35,20,.04);
  --shadow-lg:0 8px 24px rgba(45,35,20,.09), 0 32px 64px rgba(45,35,20,.10);
  --font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font);font-size:14px;color:var(--ink);
  background:
    radial-gradient(1100px 520px at 50% -8%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    var(--bg);
  min-height:100dvh;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

.wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;padding:32px 20px}

.card{
  width:100%;max-width:392px;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:34px 32px 28px;text-align:center;
}

.mark{
  width:52px;height:52px;border-radius:16px;margin:0 auto 18px;
  background:linear-gradient(145deg,#2C8A70,#1B5E4E);color:#fff;
  display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.3), var(--shadow-sm);
}
.mark svg{width:25px;height:25px}

h1{font-size:21px;font-weight:500;letter-spacing:-.02em}
.sub{font-size:13px;color:var(--ink-3);margin-top:6px;line-height:1.45}

form{text-align:left;display:flex;flex-direction:column;gap:13px;margin-top:24px}
.field label{display:block;font-size:11px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.field input{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;
  background:var(--surface-2);font-family:inherit;font-size:14px;color:var(--ink);transition:.15s;
}
.field input::placeholder{color:#BFB5A7}
.field input:focus{outline:0;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(31,111,92,.11)}

.primary{
  margin-top:4px;padding:12px 16px;border-radius:12px;
  background:var(--ink);color:#fff;font-size:14px;font-weight:500;
  transition:.15s;box-shadow:var(--shadow-sm);
}
.primary:hover{background:#3A332C;transform:translateY(-1px)}

.forgot{display:block;text-align:center;font-size:12px;color:var(--ink-3);
  text-decoration:none;margin-top:2px}
.forgot:hover{color:var(--ink-2);text-decoration:underline}

.note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--ink-3);line-height:1.5}
.linklike{color:var(--accent);text-decoration:none;font-weight:500}
.linklike:hover{text-decoration:underline}

.foot{font-size:11.5px;color:var(--ink-3);text-align:center}

.toast{
  position:fixed;bottom:28px;left:50%;transform:translate(-50%,14px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;
  font-size:13px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
  transition:.24s cubic-bezier(.34,1.3,.64,1);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:420px){
  .card{padding:28px 22px 24px;border-radius:18px}
}