/* =============================================================
   Sistema de reservas: reservar.html, mi-cuenta.html, admin.html
   Usa los tokens, botones, pie de página y tipografía de styles.css.
   ============================================================= */

[hidden] { display: none !important; }
.muted { color: var(--mute); font-size: .88rem; }
.small { font-size: .8rem; }

/* ----- Encabezado ----- */
.app-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 242, 234, .92); border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(12px)) {
  .app-head { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.app-head-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.app-logo img { width: 112px; }
.app-nav { display: none; gap: 1.75rem; margin-left: auto; font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.app-nav a { color: var(--ink-soft); transition: color .3s var(--ease-out); }
.app-nav a:hover, .app-nav a[aria-current="page"] { color: var(--accent); }
.app-cta { margin-left: auto; }

.app-main { padding-block: clamp(2rem, 5vw, 3.25rem) clamp(4rem, 8vw, 6rem); min-height: 60vh; }
.page-head { display: grid; gap: 1.5rem; margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }
.page-head .kicker { margin-bottom: .8rem; }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); }
.page-head .lead { margin-top: .9rem; }

/* Datos rápidos bajo el título */
.facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.facts li {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px;
  background: var(--paper-2); font-size: .78rem; font-weight: 500; color: var(--ink-soft);
}
.facts svg { width: 15px; height: 15px; color: var(--band); flex: none; }

/* Pasos */
.steps { display: flex; align-items: center; gap: .5rem; counter-reset: paso; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.steps li { display: flex; align-items: center; gap: .5rem; }
.steps li + li::before { content: ""; width: clamp(1rem, 4vw, 2.5rem); height: 1px; background: var(--line); margin-right: .25rem; }
.steps span {
  counter-increment: paso; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); font-size: .72rem; letter-spacing: 0;
}
.steps span::before { content: counter(paso); }
.steps li.is-actual { color: var(--ink); }
.steps li.is-actual span { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.steps li.is-hecho span { background: var(--paper-2); border-color: var(--sand); color: var(--accent); }
.steps li.is-hecho span::before { content: "✓"; }

/* ----- Formularios y mensajes ----- */
.field { display: grid; gap: .35rem; margin-bottom: .9rem; }
.field label { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; width: 100%; min-height: 50px; padding: .75rem 1rem;
  border: 1px solid rgba(42, 34, 27, .2); border-radius: 12px; background: var(--paper); color: var(--ink);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.field input:hover, .field select:hover { border-color: rgba(42, 34, 27, .35); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(119, 88, 60, .15); }
.code-input { font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-sm { min-height: 40px; padding: .5rem 1.1rem; font-size: .72rem; }
.link-btn { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: .85rem; }
.link-btn:hover { color: var(--accent-deep); }
.row-actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 1rem; }

.msg { display: flex; gap: .6rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 12px; font-size: .9rem; margin: .9rem 0; line-height: 1.5; }
.msg-error { background: #f4e3db; color: #6e2a17; }
.msg-ok    { background: #e5e6d5; color: #33341f; }
.msg-info  { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }

/* ----- Reservar ----- */
.booking { display: grid; gap: 1.5rem; align-items: start; }

.cal { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.75rem); }
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.cal-titulo { text-align: center; }
.cal-titulo p { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }
.cal-titulo small { display: block; margin-top: .15rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.icon-btn {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--accent); transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--paper-2); border-color: var(--sand); }
.icon-btn:disabled { opacity: .3; pointer-events: none; }

/* Semana completa (computadora): cabeceras, fila de mañana y fila de noche alineadas */
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: .5rem; }
.wk-head { padding: .5rem .25rem .75rem; border-bottom: 1px solid var(--line); text-align: center; }
.wk-head span { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wk-head strong { display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 500; line-height: 1.1; font-variant-numeric: lining-nums; }
.wk-head.is-hoy span, .wk-head.is-hoy strong { color: var(--accent); }
.wk-franja {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0 .6rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
}
.wk-franja::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wk-celda { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.wk-vacio { padding: .9rem .25rem; font-size: .76rem; line-height: 1.4; color: var(--mute); text-align: center; }
.franja-label { margin: 1rem 0 .5rem; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.franja-slots { display: grid; gap: .4rem; }

/* Tira de días (celular) */
.day-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; margin-bottom: 1.1rem; }
.day-pill {
  position: relative; display: grid; justify-items: center; gap: .1rem; padding: .55rem 0 .65rem; border-radius: 14px;
  border: 1px solid transparent; transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.day-pill span { font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.day-pill strong { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; }
.day-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--band); }
.day-pill i.sin-cupo { background: transparent; }
.day-pill[aria-pressed="true"] { background: var(--accent); color: var(--paper); }
.day-pill[aria-pressed="true"] span { color: var(--cream); }
.day-pill[aria-pressed="true"] i { background: var(--cream); }
.day-pill[aria-pressed="true"] i.sin-cupo { background: transparent; }
.day-titulo { font-family: var(--serif); font-size: 1.35rem; margin-bottom: .25rem; }
.day-body .franja-label { text-align: left; }
.day-body .franja-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Turno */
.slot {
  position: relative; display: grid; justify-items: center; align-content: center; gap: .05rem;
  min-height: 52px; padding: .45rem .3rem; border-radius: 12px;
  border: 1px solid var(--sand); background: var(--paper); color: var(--ink);
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.slot-hora { font-size: .95rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.slot-ampm { font-weight: 500; font-size: .7rem; margin-left: .15rem; color: var(--mute); }
.slot-nota { font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--band); }
.slot:not(:disabled):hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79, 58, 39, .1); }
.slot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); box-shadow: 0 8px 20px rgba(79, 58, 39, .22); }
.slot[aria-pressed="true"] .slot-ampm, .slot[aria-pressed="true"] .slot-nota { color: var(--cream); }
.slot:disabled { cursor: default; border-color: transparent; background: rgba(42, 34, 27, .04); color: rgba(42, 34, 27, .38); }
.slot:disabled .slot-ampm { color: inherit; }
.slot.is-completo .slot-hora, .slot.is-cerrado .slot-hora { text-decoration: line-through; text-decoration-thickness: 1px; }
.slot:disabled .slot-nota { color: rgba(42, 34, 27, .5); }
.slot.is-tuya { border-color: var(--band); background: var(--paper-2); color: var(--ink); }
.slot.is-tuya .slot-nota { color: var(--band); }
.slot.is-tuya .slot-nota::before { content: "✓ "; }

.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .74rem; color: var(--mute); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend span::before { content: ""; width: .8rem; height: .8rem; border-radius: 4px; border: 1px solid var(--sand); background: var(--paper); }
.legend .lg-elegido::before { background: var(--accent); border-color: var(--accent); }
.legend .lg-tuya::before { border-color: var(--band); background: var(--paper-2); }
.legend .lg-no::before { border-color: transparent; background: rgba(42, 34, 27, .08); }

/* Cargando */
.skeleton { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.skeleton span { height: 52px; border-radius: 12px; background: linear-gradient(90deg, var(--paper-2), #f3ece1, var(--paper-2)); background-size: 200% 100%; animation: brillo 1.4s ease-in-out infinite; }
@keyframes brillo { to { background-position: -200% 0; } }

/* Panel de compra */
.panel { background: var(--paper-2); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); }
.panel h2 { font-size: 1.85rem; margin-bottom: .75rem; }
.panel h3 { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 1.4rem 0 .6rem; }
.panel-vacio { display: grid; justify-items: center; gap: .75rem; padding: 1.5rem .5rem; text-align: center; }
.panel-vacio svg { width: 44px; height: 44px; color: var(--sand); }
.panel-vacio p { max-width: 16rem; }

.sel-box { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.sel-fecha { display: grid; place-items: center; flex: none; width: 54px; height: 58px; border-radius: 12px; background: var(--accent); color: var(--paper); }
.sel-fecha span { font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.sel-fecha strong { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; }
.sel-info { flex: 1; min-width: 0; }
.sel-info p { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; }
.sel-info small { display: block; margin-top: .15rem; font-size: .76rem; color: var(--mute); }
.sel-box .link-btn { font-size: .76rem; }

.pack-list { display: grid; gap: .5rem; }
.pack {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack:hover { border-color: var(--sand); }
.pack:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pack:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pack-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(42, 34, 27, .3); display: grid; place-items: center; }
.pack:has(input:checked) .pack-radio { border-color: var(--accent); }
.pack:has(input:checked) .pack-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pack-texto { flex: 1; min-width: 0; }
.pack-name { font-weight: 600; }
.pack-meta { display: block; font-size: .75rem; color: var(--mute); }
.pack-badge { display: inline-block; margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px; background: var(--band); color: var(--paper); font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; vertical-align: .1rem; }
.pack-price { font-family: var(--serif); font-size: 1.55rem; line-height: 1; color: var(--accent); white-space: nowrap; font-variant-numeric: lining-nums; }

.total { display: flex; justify-content: space-between; align-items: baseline; margin: 1.25rem 0 1rem; padding-top: 1rem; border-top: 1px solid rgba(42, 34, 27, .12); }
.total span { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.total strong { font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; }
.seguro { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .75rem; font-size: .74rem; color: var(--mute); }
.seguro svg { width: 14px; height: 14px; }
.checks { display: grid; gap: .45rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(42, 34, 27, .12); font-size: .8rem; color: var(--ink-soft); }
.checks li { display: flex; gap: .55rem; line-height: 1.45; }
.checks li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: .1rem; border-radius: 50%; background: var(--band) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23f7f2ea' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* Barra fija en celular con la selección */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; gap: 1rem; padding: .8rem var(--gutter) calc(.8rem + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(42, 34, 27, .1);
  transform: translateY(110%); transition: transform .35s var(--ease-out);
}
.barra.is-visible { transform: none; }
.barra p { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.3; }
.barra strong { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }

/* ----- Mi cuenta ----- */
.acct-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.stat:first-child { grid-column: 1 / -1; }
.stat { padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--paper-2); }
.stat span { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.stat strong { display: block; margin-top: .3rem; font-family: var(--serif); font-size: 1.9rem; font-weight: 500; line-height: 1.05; font-variant-numeric: lining-nums; }
.stat small { display: block; font-size: .78rem; color: var(--ink-soft); }
.acct-grid { display: grid; gap: 1.5rem; align-items: start; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); }
.card h2 { font-size: 1.75rem; margin-bottom: .75rem; }
.login-card { max-width: 480px; }
.login-wrap { display: grid; gap: 2rem; align-items: start; }
.login-aside { display: grid; gap: .9rem; align-content: start; }
.empty { display: grid; justify-items: start; gap: .75rem; padding: .5rem 0; }
.pack-status { padding-block: 1rem; border-top: 1px solid var(--line); }
.pack-status:first-of-type { border-top: 0; padding-top: .25rem; }
.pack-status-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.pack-status-top strong { font-family: var(--serif); font-size: 2.2rem; font-weight: 500; line-height: 1; color: var(--accent); font-variant-numeric: lining-nums; }
.meter { height: 6px; margin: .6rem 0 .45rem; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--band); }
.booking-row { display: flex; align-items: center; gap: 1rem; padding-block: .9rem; border-top: 1px solid var(--line); }
.booking-row:first-of-type { border-top: 0; padding-top: .25rem; }
.booking-row .sel-fecha { width: 48px; height: 52px; }
.booking-row .sel-fecha strong { font-size: 1.4rem; }
.booking-row > div:not(.sel-fecha) { flex: 1; min-width: 0; }
.booking-row p { line-height: 1.3; font-weight: 500; }
.booking-row small { display: block; color: var(--mute); font-size: .78rem; }
.tag { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--cream); font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: .1rem; }

/* ----- Panel del estudio ----- */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.tab { padding: .6rem 1.15rem; border-radius: 999px; border: 1px solid var(--line); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: background-color .25s var(--ease-out); }
.tab:hover { background: var(--paper-2); }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.ag-bar { margin: 0 0 .5rem; }
.ag-day { margin-top: 2rem; }
.ag-day h3 { display: flex; align-items: baseline; gap: .75rem; font-size: 1.6rem; margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.ag-day h3 small { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ag-list { display: grid; gap: .75rem; }
.ag-session { display: grid; gap: .5rem; align-content: start; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.ag-session.is-cerrada { opacity: .6; }
.ag-session.is-pasada { background: transparent; }
.ag-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ag-hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.ag-hora small { display: block; font-weight: 600; font-size: .66rem; color: var(--band); }
.ag-libre { font-size: .82rem; color: var(--mute); }
.cupo-badge { display: inline-block; min-width: 3.2rem; padding: .15rem .6rem; border-radius: 999px; background: var(--paper-2); font-size: .8rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.cupo-badge.is-lleno { background: var(--accent); color: var(--paper); }
.ag-people { display: grid; gap: .45rem; margin: .1rem 0 .25rem; }
.ag-people li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-size: .88rem; }
.ag-people a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: .8rem; }
.ag-tools { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.ag-tools .link-btn { font-size: .8rem; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { padding: .7rem .5rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.form-grid { display: grid; gap: 0 1rem; max-width: 640px; }

/* ----- Responsive ----- */
@media (min-width: 640px) {
  .ag-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .full { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:first-child { grid-column: auto; }
}
@media (min-width: 820px) {
  .app-nav { display: flex; }
  .app-nav + .app-cta { margin-left: 0; }
  .acct-grid { grid-template-columns: 1fr 1fr; }
  .login-wrap { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
  .barra { display: none; }
}
@media (min-width: 1100px) {
  .ag-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-head { grid-template-columns: 1fr auto; align-items: end; }
  .booking { grid-template-columns: minmax(0, 1fr) 380px; }
  .panel { position: sticky; top: 96px; }
}
@media (max-width: 819px) {
  .app-main { padding-bottom: 7rem; }
  .steps { font-size: .64rem; }
  .steps li:not(.is-actual) em { display: none; }
}
.steps em { font-style: normal; color: inherit; }
.login-card form, .panel form { margin-top: 1.1rem; }
.page-head .muted { margin-top: .5rem; }
.ag-nombre { font-weight: 500; }
.ag-people li .btn { min-height: 34px; padding: .35rem .9rem; font-size: .66rem; }

/* =============================================================
   Panel: clientas, ficha, renovaciones, ventas, finanzas y configuración
   Colores de gráficos validados (daltonismo y contraste): ingresos #536a14, egresos #cf8e57.
   ============================================================= */
:root { --fin-ingreso: #536a14; --fin-egreso: #cf8e57; --fin-ingreso-texto: #3e500c; --fin-egreso-texto: #8a3f1d; }
#admin-contenido > .card { margin-bottom: 1.5rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.toolbar-search { flex: 1; max-width: 420px; margin: 0; }
button.ag-nombre { text-align: left; text-decoration: underline; text-decoration-color: var(--sand); text-underline-offset: 3px; }
button.ag-nombre:hover { color: var(--accent); }
.asis { display: inline-flex; gap: .25rem; }
.asis-btn { padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--line); font-size: .66rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); transition: background-color .2s var(--ease-out); }
.asis-btn:hover { background: var(--paper-2); }
.asis-btn.is-asistio[aria-pressed="true"] { background: var(--fin-ingreso); border-color: var(--fin-ingreso); color: #fff; }
.asis-btn.is-falto[aria-pressed="true"] { background: var(--fin-egreso-texto); border-color: var(--fin-egreso-texto); color: #fff; }
.inline-form { margin-top: .75rem; padding: 1rem; border-radius: 14px; background: var(--paper-2); }
.inline-form .field { margin-bottom: .6rem; }
.inline-form .msg { margin-top: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.card-head h2 { margin: 0; }
.back { margin-bottom: .25rem; }
.ficha-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .75rem 0 1.25rem; }
.ficha-head h2 { font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.05; }
.ficha-head .muted { margin-top: .35rem; }
.nota-salud { margin: 0 0 1.25rem; border-left: 3px solid var(--accent); }
.ficha-grid { display: grid; gap: 1.5rem; margin-top: 1.5rem; align-items: start; }
.stats-5, .stats-4 { margin-bottom: 0; }
.pack-status.is-off { opacity: .55; }
.ajustes { list-style: disc; padding-left: 1.1rem; margin-top: .35rem; font-size: .76rem; color: var(--ink-soft); }
.tag-asistio { background: #e1e6cc; color: #33410a; }
.tag-falto { background: #f3e0d6; color: #7a3418; }
.tag-apartada { background: var(--paper-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.acciones { text-align: right; white-space: nowrap; }
.acciones .link-btn + .link-btn { margin-left: .9rem; }
.acciones input { width: 9rem; min-height: 36px; margin-right: .4rem; padding: .35rem .6rem; border: 1px solid rgba(42, 34, 27, .2); border-radius: 10px; background: var(--paper); font: inherit; font-size: .82rem; }
.is-anulado { opacity: .55; }
.is-anulado .num, .is-anulado .mov-cat { text-decoration: line-through; }
.mov-cat { display: block; font-weight: 500; }
.table td small { display: block; color: var(--mute); font-size: .76rem; line-height: 1.4; }
.monto-ingreso { color: var(--fin-ingreso-texto); font-weight: 600; }
.monto-egreso { color: var(--fin-egreso-texto); font-weight: 600; }
.vacio { padding: .5rem 0; font-size: .86rem; color: var(--mute); }
.intro { margin-bottom: 1.25rem; max-width: 42rem; }
.renovar-grid { display: grid; gap: 1.25rem; align-items: start; }
.renovar-lista { margin-top: .75rem; }
.renovar-lista li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.renovar-lista small { display: block; margin-top: .1rem; font-size: .76rem; color: var(--mute); }
.form-card { max-width: 780px; }
.inline-card { max-width: none; margin-bottom: 1.5rem; border-color: var(--sand); box-shadow: 0 12px 30px rgba(79, 58, 39, .08); }

/* Finanzas */
.fin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.fin-mes { gap: 1rem; margin: 0; }
.fin-mes .cal-titulo { min-width: 10rem; }
.fin-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.kpi { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-top: 3px solid var(--sand); border-radius: var(--radius); background: var(--paper); }
.kpi span { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.kpi strong { display: block; margin-top: .35rem; font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 500; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.kpi small { display: block; margin-top: .4rem; font-size: .74rem; color: var(--ink-soft); }
.kpi-ingreso { border-top-color: var(--fin-ingreso); }
.kpi-egreso { border-top-color: var(--fin-egreso); }
.kpi-utilidad { border-top-color: var(--accent); }
.kpi-negativa { border-top-color: var(--fin-egreso-texto); }
.kpi-negativa strong { color: var(--fin-egreso-texto); }
.fin-chart { margin-bottom: 1.25rem; }
.leyenda { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--ink-soft); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: .7rem; }
.leyenda .sw:first-child { margin-left: 0; }
.sw-ingreso { background: var(--fin-ingreso); }
.sw-egreso { background: var(--fin-egreso); }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .guia { stroke: rgba(42, 34, 27, .08); }
.chart .eje { stroke: rgba(42, 34, 27, .3); }
.chart .eje-texto, .chart .mes-texto { font: 500 11px var(--sans); fill: var(--mute); }
.chart .mes.is-actual .mes-texto { font-weight: 700; fill: var(--ink); }
.chart .bar-ingreso { fill: var(--fin-ingreso); }
.chart .bar-egreso { fill: var(--fin-egreso); }
.chart .zona { fill: transparent; }
.chart .mes { outline: none; }
.chart .mes.is-hover .zona { fill: rgba(42, 34, 27, .05); }
.chart-tip {
  position: absolute; top: 0; z-index: 2; display: grid; gap: .2rem; padding: .65rem .8rem; border-radius: 10px;
  background: var(--ink); color: var(--paper); font-size: .76rem; white-space: nowrap; pointer-events: none;
  box-shadow: 0 10px 24px rgba(42, 34, 27, .25);
}
.chart-tip .sw { margin: 0 .35rem 0 0; }
.chart-tip b { font-weight: 600; margin-left: .25rem; }
.tip-total { margin-top: .15rem; padding-top: .25rem; border-top: 1px solid rgba(247, 242, 234, .2); }
.fin-grid { display: grid; gap: 1.25rem; margin: 1.25rem 0; align-items: start; }
.h-sm { font-size: 1.35rem !important; margin-bottom: .5rem !important; }
.desglose li { padding: .5rem 0; }
.desglose-top { display: flex; justify-content: space-between; gap: .75rem; font-size: .86rem; }
.desglose-top strong { font-variant-numeric: tabular-nums; }
.desglose-barra { height: 6px; margin: .35rem 0 .2rem; border-radius: 999px; background: var(--paper-2); }
.desglose-barra span { display: block; height: 100%; border-radius: 999px; }
.fill-ingreso { background: var(--fin-ingreso); }
.fill-egreso { background: var(--fin-egreso); }
.desglose small { font-size: .7rem; color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { padding: .35rem .85rem; border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Configuración */
.config-table input:not([type="checkbox"]) { width: 100%; min-height: 40px; padding: .4rem .6rem; border: 1px solid rgba(42, 34, 27, .2); border-radius: 10px; background: var(--paper); font: inherit; font-size: .88rem; }
.config-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.config-table td { vertical-align: middle; }
.config-table td:nth-child(1) { min-width: 9rem; }
.config-table td:nth-child(2), .config-table td:nth-child(4) { width: 7rem; }
.config-table td:nth-child(3) { width: 8rem; }
.config-table .centro { text-align: center; }
.fila-nueva td { background: var(--paper-2); }
.horario-grid { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-top: .75rem; }
.dia-col h3 { font-size: 1.35rem; margin-bottom: .4rem; }
.turnos li { display: grid; gap: .25rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.turnos strong { font-variant-numeric: tabular-nums; }
.turnos small { display: block; font-size: .72rem; color: var(--mute); }
.turno-acciones { display: flex; gap: .8rem; }
.turno-acciones .link-btn, .dia-col > .link-btn { font-size: .78rem; }
.dia-col > .link-btn { margin-top: .5rem; }

@media (min-width: 640px) {
  .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid .span-2 { grid-column: span 2; }
}
@media (min-width: 900px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-5 .stat:first-child, .stats-4 .stat:first-child { grid-column: auto; }
  .ficha-grid { grid-template-columns: 1fr 1fr; }
  .fin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .renovar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.form-grid-3, .ficha-grid .form-grid { max-width: none; }
.table td .tag { margin-left: .4rem; }
.renovar-grid .card-head { flex-wrap: nowrap; align-items: flex-start; }
.renovar-grid .card-head .cupo-badge { flex: none; margin-top: .35rem; }
@media (min-width: 1100px) {
  .horario-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.form-card .form-grid { max-width: none; }
.stats-4 .stat:first-child { grid-column: auto; }
@media (max-width: 639px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .25rem; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .mov-table thead { display: none; }
  .mov-table tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .mov-table td { padding: 0; border: 0; }
  .mov-table td:nth-child(1) { grid-column: 1 / -1; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
  .mov-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .mov-table td:nth-child(4) { grid-column: 2; grid-row: 2; }
  .mov-table td:nth-child(3) { grid-column: 1; grid-row: 3; font-size: .76rem; color: var(--mute); }
  .mov-table td.acciones { grid-column: 2; grid-row: 3; }
  .fin-acciones { width: 100%; }
}