/* Portal de clientes — se apoya en ../styles.css */
.portal-main { padding-block: clamp(2rem, 6vw, 4rem); min-height: 70vh; }
.portal-logout { display: flex; align-items: center; gap: .75rem; }
.portal-logout .btn { white-space: nowrap; }
.portal-user { display: none; font-size: .875rem; color: rgba(247, 243, 234, .8); }
.portal-head { margin-bottom: 2rem; }
.portal-head h1 { font-size: clamp(2.1rem, 6vw, 3rem); }
.portal-sub { margin-top: .4rem; color: var(--ink-soft); }
.portal-sub a, .auth-links a, .auth-note a, .check a { color: var(--ink); font-weight: 600; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.portal-section { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.portal-section > h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: .75rem; }
.portal-grid { display: grid; gap: 1.25rem; margin-top: 1rem; }
.portal-card { display: grid; gap: .6rem; align-content: start; }
.portal-card:hover { transform: none; }
.portal-card h2 { font-size: 1.875rem; }
.portal-label { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.portal-dl { display: grid; gap: .5rem; margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.portal-dl div { display: flex; justify-content: space-between; gap: 1rem; }
.portal-dl dt { color: var(--ink-mute); font-size: .875rem; }
.portal-dl dd { font-weight: 500; text-align: right; }
.portal-empty { color: var(--ink-mute); font-style: italic; }

.portal-flash { margin-bottom: 1.5rem; padding: .9rem 1.1rem; border-radius: var(--radius); border-left: 3px solid var(--bronze); background: rgba(201, 168, 106, .18); }
.portal-flash-error { border-left-color: #A3271F; background: rgba(163, 39, 31, .08); }
.invite-link code { display: block; margin-top: .5rem; padding: .6rem .75rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-size: .8125rem; overflow-wrap: anywhere; }

/* Estado */
.status { display: inline-block; justify-self: start; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; }
.status-activo { background: rgba(31, 122, 77, .12); color: #1A6640; }
.status-pendiente { background: rgba(201, 168, 106, .25); color: var(--bronze); }
.status-suspendido { background: rgba(163, 39, 31, .1); color: #A3271F; }
.status-inactivo { background: var(--ivory-2); color: var(--ink-mute); }
.count { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px; background: var(--navy); color: var(--gold); font-family: var(--sans); font-size: .875rem; vertical-align: middle; }

/* Uso */
.portal-usage .usage-num { font-size: 3.5rem; line-height: 1; color: var(--ink); }
.usage-of { font-size: 1.5rem; color: var(--ink-mute); font-weight: 500; }
.usage-caption { margin-top: -.3rem; color: var(--ink-soft); }
.meter { height: 10px; border-radius: 999px; background: var(--ivory-2); overflow: hidden; border: 1px solid var(--line); }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--navy-3), var(--gold)); border-radius: inherit; transition: width .8s var(--ease-out); }
.usage-left { font-size: .9375rem; }
.usage-extra { font-size: .875rem; color: var(--bronze); }
.counter-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.hist-list { display: grid; border-top: 1px solid var(--line); }
.hist-list li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .45rem; border-bottom: 1px solid var(--line); font-size: .9375rem; }

/* Planes en el panel */
.portal-plans { display: grid; gap: 1.25rem; margin-block: 1rem; }
.portal-plan { display: grid; gap: .6rem; align-content: start; }
.portal-plan h3 { font-size: 1.75rem; }
.portal-plan-price { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--bronze); }
.portal-plan-price span { font-family: var(--sans); font-size: .875rem; color: var(--ink-mute); font-weight: 500; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Mensajes */
.portal-msg-form { box-shadow: var(--shadow-1); }
.msg-list { display: grid; }
.msg-list li { display: grid; gap: .2rem; padding-block: .75rem; border-bottom: 1px solid var(--line); }
.msg-subject { font-weight: 600; color: var(--ink); }
.msg-meta { font-size: .8125rem; color: var(--ink-mute); }
.msg-card { margin-top: 1rem; display: grid; gap: .75rem; }
.msg-card:hover { transform: none; }
.msg-card header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.msg-body { color: var(--ink-soft); overflow-wrap: anywhere; }
.msg-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Acceso */
.auth { max-width: 30rem; margin-inline: auto; }
.auth h1 { font-size: clamp(2.1rem, 6vw, 2.75rem); }
.auth-lede { margin-block: .75rem 1.75rem; color: var(--ink-soft); }
.auth-form { box-shadow: var(--shadow-2); }
.auth-links { font-size: .9375rem; }
.auth-note, .auth-hint { font-size: .8125rem; color: var(--ink-mute); }
.auth-note { margin-top: 1.5rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: .15rem; flex: none; accent-color: var(--navy); }

/* Administración */
.admin-form { box-shadow: var(--shadow-1); max-width: 52rem; }
.form-plain { display: grid; gap: .9rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 560px; }
.table th { text-align: left; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); padding: .8rem 1rem; border-bottom: 1px solid var(--ink); }
.table td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.danger-zone { border-color: rgba(163, 39, 31, .35); }

/* Agenda */
.admin-nav { margin-top: 1rem; }
.price-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--gold); border-radius: var(--radius); }
.price-was { font-size: .9375rem; color: var(--ink-mute); }
.price-now { font-family: var(--serif); font-size: 2.25rem; font-weight: 600; color: var(--ink); line-height: 1; }
.price-badge { flex-basis: 100%; font-size: .8125rem; font-weight: 600; color: var(--bronze); }
.price-credit { flex-basis: 100%; margin-top: .4rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-soft); }
.agenda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.agenda-step { min-width: 0; }
.agenda-step h2 { display: flex; align-items: center; gap: .6rem; font-size: clamp(1.4rem, 3.5vw, 1.75rem); margin-bottom: 1rem; }
.step-dot { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: var(--sans); font-size: .9375rem; }
.day-list { display: flex; gap: .6rem; overflow-x: auto; overflow-y: visible; padding-bottom: .5rem; scroll-snap-type: x proximity; }
.day {
  flex: none; display: grid; justify-items: center; gap: .1rem; width: 78px; padding: .7rem .4rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; scroll-snap-align: start;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.day:hover { border-color: var(--ink); transform: translateY(-2px); }
.day.is-selected { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.day-name, .day-month { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.day-num { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.day-count { font-size: .6875rem; color: var(--bronze); font-weight: 600; }
.day.is-selected .day-count { color: var(--gold); }
.time-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; border: 0; padding: 0; margin: 0; }
.time { position: relative; }
.time input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.time span {
  display: grid; place-items: center; min-height: 48px; border: 1px solid rgba(20, 33, 61, .35); border-radius: var(--radius);
  background: var(--paper); font-weight: 600; transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s;
}
.time:hover span { border-color: var(--ink); }
.time input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.time input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.agenda-form { box-shadow: var(--shadow-1); }
.agenda-done { max-width: 40rem; }
.pay-methods { display: grid; gap: .6rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.pay-methods legend { padding: 0 .3rem; font-weight: 600; }
.renew-form { margin-top: 1rem; }
.type-list { display: grid; gap: .75rem; margin-top: 1.25rem; }
.type {
  display: grid; gap: .3rem; padding: 1rem 1.25rem; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.type:hover { border-color: var(--ink); }
.type.is-selected { border: 2px solid var(--gold); background: var(--ivory); }
.type:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.type-name { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.type-detail { font-size: .875rem; color: var(--ink-soft); }
.type-price { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.type-price s { font-family: var(--sans); font-size: .875rem; font-weight: 400; color: var(--ink-mute); }
.confirm-form { display: grid; gap: .5rem; flex: 1 1 280px; }
.confirm-form textarea { width: 100%; padding: .6rem .75rem; font: inherit; font-size: .9375rem; border: 1px solid rgba(20, 33, 61, .35); border-radius: var(--radius); background: var(--paper); }

@media (min-width: 720px) {
  .portal-grid { grid-template-columns: 1fr 1fr; }
  .portal-plans { grid-template-columns: repeat(3, 1fr); }
  .type-list { grid-template-columns: 1fr 1fr; }
  .portal-user { display: inline; }
}