/* Cuenta de la paciente: registro, ingreso y panel "Mi cuenta". Se carga después de style.css. */
.head-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.head-link:hover { background: var(--brand-soft); }
.acct-link svg { color: var(--brand); }
@media (max-width: 640px) { .head-link, .acct-link { padding: 7px 10px; font-size: .86rem; } }

.acct-nudge { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; padding: 12px 16px; background: var(--sun-soft); border: 1px solid #f2e29b; border-radius: 12px; font-size: .94rem; }
.acct-nudge svg { flex: none; margin-top: 2px; color: var(--charcoal); }
.acct-nudge a { font-weight: 700; color: var(--brand-dark); }

.acct-grid { align-items: start; }
.fs { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
.fs legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 14px; font-family: var(--serif); font-size: 1.15rem; font-weight: 650; }
.fs legend .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sun); color: var(--charcoal); font-size: .9rem; font-family: system-ui, sans-serif; }
.fs legend .hint { font-family: system-ui, sans-serif; font-size: .82rem; }
form.stack > .fs + .fs { padding-top: 6px; border-top: 1px dashed var(--line); }
.perks { background: var(--sun-soft); border-color: #f2e29b; position: sticky; top: 92px; }
.perk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.perk-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.perk-list svg { box-sizing: content-box; width: 20px; height: 20px; padding: 10px; border-radius: 12px; background: #fff; color: var(--charcoal); }
.perk-list strong { display: block; }
.perk-list span { color: var(--muted); font-size: .92rem; }

.auth-wrap { max-width: 460px; margin: 18px auto 0; }
.auth-wrap.wide-auth { max-width: 720px; }
.auth-card { text-align: center; padding: 34px 30px; }
.auth-card form { text-align: left; }
.auth-ico { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; background: var(--sun); color: var(--charcoal); }
.auth-foot { margin: 18px 0 0; line-height: 1.7; }

.acct-hero { background: var(--brand-deep); color: #fff; padding: 40px 0 44px; position: relative; overflow: hidden; }
.acct-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(252, 213, 42, .16); }
.acct-hero-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; position: relative; z-index: 1; }
.acct-hero h1 { color: #fff; margin-bottom: .2em; }
.acct-hero p { margin: 0; color: #e8e1d2; max-width: 52ch; }
.eyebrow.light { color: var(--sun); }
.eyebrow.light::before { background: var(--sun); }
.acct-body { margin-top: 28px; padding-bottom: 8px; }
.acct-cols { display: grid; gap: 24px; grid-template-columns: 1.6fr 1fr; align-items: start; }
.acct-main { display: grid; gap: 28px; }
.acct-h { font-size: 1.3rem; margin-bottom: 14px; padding-left: 12px; border-left: 4px solid var(--sun); }
.acct-side { display: grid; gap: 16px; }
.appt-list { display: grid; gap: 12px; }
.appt-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.appt-card:hover { border-color: var(--sun-dark); transform: translateY(-2px); }
.appt-card .when { display: grid; place-items: center; min-width: 92px; padding: 8px 12px; border-radius: 14px; background: var(--sun-soft); border: 1px solid #f2e29b; text-align: center; line-height: 1.2; }
.appt-card .when .d { font-weight: 700; text-transform: capitalize; }
.appt-card .when .t { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; }
.appt-card .what strong { display: block; margin-bottom: 4px; }
.appt-card .go { color: var(--brand); }
.card.empty { text-align: center; padding: 34px 24px; }
.card.empty .ico { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: var(--sun-soft); color: var(--charcoal); }
.side-head { display: flex; justify-content: space-between; align-items: baseline; }
.side-head h3, .side-sum { font-family: var(--serif); font-size: 1.15rem; margin: 0; }
.side-sum { cursor: pointer; font-weight: 650; }
.data-list { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.data-list dt { color: var(--muted); font-size: .9rem; }
.data-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
details.del summary { list-style: none; cursor: pointer; display: inline-flex; }
details.del summary::-webkit-details-marker { display: none; }
details.del[open] { background: var(--bad-bg); border-radius: 12px; padding: 6px 10px 10px; }
@media (max-width: 860px) { .acct-cols { grid-template-columns: 1fr; } .perks { position: static; } .acct-hero { padding-bottom: 36px; } }
@media (max-width: 480px) { .appt-card { grid-template-columns: auto 1fr; } .appt-card .go { display: none; } }

input[type=email] { width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid #cdbd9c; border-radius: 12px; background: #fff; color: var(--ink); min-height: 50px; }
input[type=email]:focus { border-color: var(--brand); outline: 3px solid var(--brand-soft); }

/* Celulares angostos: en el encabezado queda solo el logo para que entren el acceso a la cuenta y "Reservar turno". */
@media (max-width: 440px) { .site-head .brand > span { display: none; } .site-head .wrap { gap: 8px; } }
