:root {
  /* Neutros cálidos + pizarra: más profundidad sin competir con los CTA. */
  --ink: #17212a;
  --muted: #65716f;
  --line: #d8e0db;
  --paper: #f3f5f3;
  --white: #fff;
  --surface-soft: #edf3ef;
  --accent: #d83a32;
  --accent-hover: #b72d27;
  --gold: #c79a43;
  --gold-hover: #ad7e2b;
  --success: #2f7657;
  --radius: 4px;
  --shadow: 0 18px 50px rgba(23, 33, 42, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Archivo", system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(216, 58, 50, .32); outline-offset: 3px; }

.topbar { height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 76px); background: var(--ink); color: white; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 700; letter-spacing: .16em; }
.brand-logo { display: block; width: 148px; height: auto; padding: 5px 9px; border-radius: 4px; background: white; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; background: var(--accent); font-size: 18px; letter-spacing: 0; }
.topbar nav { display: flex; align-items: center; gap: 30px; }
.topbar nav a, .plain-button { color: #ddd; background: none; border: 0; text-decoration: none; font-size: .88rem; font-weight: 500; }
.topbar nav a:hover, .plain-button:hover { color: white; }
.mobile-menu-toggle { display: none; }

@media (min-width: 901px) {
  .topbar { position: relative; }
  .topbar > .brand { position: absolute; left: 50%; z-index: 2; transform: translateX(-50%); }
  .topbar > .brand .brand-logo { width: 190px; height: 72px; }
  .topbar > nav { width: 100%; justify-content: flex-start; }
  .topbar > nav a:first-child { margin-right: auto; }
  .topbar > nav .plain-button { margin-left: 0; }
}

.hero { min-height: 460px; position: relative; display: flex; align-items: flex-end; overflow: hidden; background: #222; color: white; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.53) 43%, rgba(10,10,10,.06) 72%); }
.hero-content { position: relative; z-index: 1; width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 68px 0 92px; }
.eyebrow, .step-label, .summary-kicker { margin: 0 0 12px; color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .17em; }
.hero h1 { max-width: 700px; margin: 0; font-size: clamp(2.8rem, 7vw, 5.8rem); line-height: .94; letter-spacing: -.065em; text-wrap: balance; }
.hero-content > p:last-child { margin: 24px 0 0; color: #e2e2e2; font-size: 1.1rem; }
.hero-cta { display: inline-flex; align-items: center; gap: 24px; margin-top: 28px; padding: 13px 17px; border: 1px solid rgba(255,255,255,.45); color: white; text-decoration: none; font-size: .8rem; font-weight: 700; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.hero-cta:hover { border-color: white; background: white; color: var(--ink); transform: translateY(-2px); }

@media (min-width: 901px) {
  /* Hero protagonista, pero con altura controlada para que la agenda aparezca pronto. */
  .hero { min-height: 0; height: clamp(520px, 52vw, 680px); aspect-ratio: auto; }
  .hero::before { display: none; }
  .hero > img { z-index: 1; object-position: center center; object-fit: cover; }
  .hero-shade { z-index: 2; }
  .hero-content, .hero-proof { z-index: 3; }
}
.hero-proof { position: absolute; z-index: 1; right: max(20px, calc((100% - 1160px)/2)); bottom: 28px; display: flex; gap: 1px; }
.hero-proof span { padding: 14px 18px; background: rgba(20,20,20,.78); backdrop-filter: blur(10px); color: #d8d8d8; font-size: .75rem; }
.hero-proof strong { display: block; color: white; font-size: .95rem; }

.booking-workspace { width: min(1160px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; padding: 70px 0 90px; align-items: start; }
.booking-workspace.no-summary { grid-template-columns: minmax(0, 1fr); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.section-heading h2, .summary h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.07; letter-spacing: -.045em; }
.results-count { margin: 0 0 4px; color: var(--muted); font-size: .85rem; white-space: nowrap; }

.search-controls { display: grid; grid-template-columns: minmax(210px, .75fr) minmax(320px, 1.45fr) auto; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.search-controls .search-keyword { grid-column: auto; }
.search-controls label, .customer-form label { display: grid; gap: 7px; color: #4a4742; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
select, input { width: 100%; height: 50px; border: 1px solid #cbc7bf; border-radius: var(--radius); background: white; color: var(--ink); padding: 0 14px; text-transform: none; letter-spacing: normal; }
select:hover, input:hover { border-color: #99948b; }
.search-button, .confirm-button { border: 0; border-radius: var(--radius); background: var(--accent); color: white; padding: 0 22px; font-weight: 700; }
.search-button { align-self: end; height: 50px; }
.search-button:hover, .confirm-button:hover { background: var(--accent-hover); }
.booking-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 26px; padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.booking-flow li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; min-height: 58px; padding: 9px 14px; color: #9b968e; }
.booking-flow li + li { border-left: 1px solid var(--line); }
.booking-flow li span { grid-row: 1 / span 2; color: #b1aca4; font-size: .7rem; font-variant-numeric: tabular-nums; }
.booking-flow strong { color: #6e6962; font-size: .76rem; }
.booking-flow small { color: #9b968e; font-size: .65rem; }
.booking-flow .current { background: white; box-shadow: inset 0 -2px 0 var(--accent); }
.booking-flow .current span, .booking-flow .current strong { color: var(--accent); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.date-navigation { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 9px; align-items: stretch; margin: 28px 0 34px; }
.date-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 0; }
.date-button { position: relative; min-width: 0; border: 1px solid #e2e6e3; border-radius: 16px; background: #f8faf8; padding: 14px 8px 13px; color: #7b8780; text-align: center; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.date-button span { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; }
.date-button strong { display: block; margin-top: 3px; color: var(--ink); font-size: 1.15rem; }
.date-button:hover { border-color: #9bb3a1; background: #f1f7f2; transform: translateY(-2px); }
.date-button[aria-pressed="true"] { background: var(--ink); color: #c7c7c7; }
.date-button[aria-pressed="true"] strong { color: white; }
.date-button[aria-pressed="true"]::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 6px; height: 3px; border-radius: 99px; background: #c99b3d; }
.calendar-shell { position: relative; }
.calendar-trigger { width: 100%; height: 100%; min-height: 61px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #bcb8b0; border-radius: var(--radius); background: white; color: var(--ink); text-align: left; }
.calendar-trigger:hover, .calendar-trigger[aria-expanded="true"] { border-color: var(--ink); }
.calendar-trigger-icon { width: 25px; height: 25px; position: relative; display: block; border: 1.5px solid currentColor; border-radius: 3px; }
.calendar-trigger-icon::before { content: ""; position: absolute; left: 4px; right: 4px; top: 7px; border-top: 1.5px solid currentColor; box-shadow: 0 5px 0 -0.25px currentColor, 0 10px 0 -0.25px currentColor; opacity: .55; }
.calendar-trigger > span:last-child { min-width: 0; display: grid; gap: 3px; }
.calendar-trigger small { color: var(--muted); font-size: .6rem; font-weight: 700; letter-spacing: .1em; }
.calendar-trigger strong { overflow: hidden; font-size: .69rem; line-height: 1.2; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.booking-calendar { position: absolute; z-index: 12; top: calc(100% + 10px); right: 0; width: 342px; padding: 16px; border: 1px solid #aaa59d; border-top: 3px solid var(--ink); border-radius: var(--radius); background: white; box-shadow: var(--shadow); overscroll-behavior: contain; }
.booking-calendar[hidden] { display: none; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.calendar-caption-controls { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 7px; }
.calendar-caption-controls select { height: 38px; padding: 0 9px; font-size: .78rem; font-weight: 700; }
.calendar-close { width: 38px; height: 38px; border: 0; border-radius: var(--radius); background: #efede8; color: var(--ink); font-size: 1.2rem; line-height: 1; }
.calendar-close:hover { background: #e3e0da; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-weekdays { padding: 15px 0 7px; color: #8c877f; font-size: .64rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.calendar-day, .calendar-blank { aspect-ratio: 1; }
.calendar-day { display: grid; place-items: center; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--ink); font-size: .76rem; font-weight: 600; }
.calendar-day:hover:not(:disabled) { border-color: #aaa59d; background: #f6f4f0; }
.calendar-day.today:not(.selected) span { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.calendar-day.selected { border-color: var(--ink); background: var(--ink); color: white; box-shadow: inset 0 -3px 0 var(--accent); }
.calendar-day:disabled { cursor: not-allowed; color: #c7c3bc; text-decoration: line-through; }
.calendar-help { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .67rem; line-height: 1.4; }

.result-list { display: grid; }
.booking-workspace.no-summary .result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.booking-workspace.no-summary .shop-card { align-self: start; height: auto; margin: 0; }
.booking-workspace.no-summary .shop-card-header { grid-template-columns: 84px minmax(0, 1fr); gap: 22px; padding: 22px 24px; }
.booking-workspace.no-summary .shop-card-logo { width: 82px; height: 82px; }
.booking-workspace.no-summary .shop-card-side-meta { grid-column: auto; min-height: 100%; display: grid; align-content: start; justify-items: end; gap: 22px; padding: 0; border-top: 0; border-left: 0; }
.booking-workspace.no-summary .shop-card-side-meta .rating { font-size: 1rem; }
.booking-workspace.no-summary .shop-card-side-meta .rating .star { font-size: 1.4rem; }
.booking-workspace.no-summary .barber-availability { grid-template-columns: 1fr; gap: 10px; align-items: start; }
.booking-workspace.no-summary .barber-card-info { padding-bottom: 2px; }
.booking-workspace.no-summary .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.booking-workspace.no-summary .shop-card[data-shop-card] { transition: border-color .18s ease, box-shadow .18s ease; }
.booking-workspace.no-summary .shop-card:has(.shop-card-inline-form:not([hidden])) { border-color: #c9a46a; box-shadow: 0 12px 28px rgba(28,34,36,.10); }
.shop-row { display: grid; grid-template-columns: 1fr minmax(265px, .75fr); gap: 28px; padding: 26px 0; border-top: 1px solid var(--line); }
.shop-row:last-child { border-bottom: 1px solid var(--line); }
.shop-name-line { display: flex; align-items: center; gap: 9px; }
.shop-list-logo { width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain; border: 1px solid var(--line); background: white; padding: 3px; }
.shop-name-line h3 { margin: 0; font-size: 1.24rem; letter-spacing: -.025em; }
.verified { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: white; font-size: .68rem; }
.shop-meta { margin: 8px 0 13px; color: var(--muted); font-size: .86rem; }
.shop-meta span { display: inline-block; margin-top: 3px; color: #4d4943; }
.map-link { display: inline-block; margin-top: 8px; color: var(--accent); font-size: .72rem; font-weight: 700; text-underline-offset: 3px; }
.map-link:hover { color: var(--accent-hover); }
.booking-details dd { display: grid; gap: 2px; }
.summary .map-link { color: #ff9b95; }
.summary .map-link:hover { color: white; }
.barber-byline { margin: 0 0 9px; color: #4f4b45; font-size: .8rem; }
.barber-byline strong { color: var(--ink); }
.rating { color: #3e3a35; font-size: .82rem; }
.rating strong { color: var(--ink); }
.rating .star { color: var(--accent); }
.price { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); }
.slots-label { margin: 2px 0 10px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.slots-empty { display: block; padding: 10px 12px; border: 1px dashed #d4d9d5; border-radius: 8px; color: #8b948d; font-size: .7rem; }
.service-choice-button { margin-top: 7px; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: .72rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.slot-button { min-height: 42px; border: 1px solid #bcb8b0; border-radius: var(--radius); background: transparent; color: var(--ink); font-size: .83rem; font-weight: 600; }
.slot-button:hover { border-color: var(--ink); background: white; }
.slot-button.selected { border-color: var(--accent); background: var(--accent); color: white; }
.empty-state { padding: 46px 0; border-top: 1px solid var(--line); text-align: center; }
.empty-state h3 { margin: 0 0 5px; }
.empty-state p { margin: 0; color: var(--muted); }
.results-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 4px; color: var(--muted); font-size: .74rem; }
.results-pagination button { min-height: 38px; padding: 0 12px; border: 1px solid #bcb8b0; border-radius: var(--radius); background: white; color: var(--ink); font-size: .74rem; font-weight: 700; }
.results-pagination button:hover:not(:disabled) { border-color: var(--ink); }
.results-pagination button:disabled { cursor: not-allowed; opacity: .4; }

.summary { position: sticky; top: 24px; min-height: 420px; background: var(--ink); color: white; padding: 28px; box-shadow: var(--shadow); }
.shop-card-inline-form, .barber-inline-form { grid-column: 1 / -1; border-top: 1px solid #e5e8e5; background: #f5f7f5; }
.shop-card-inline-form > #summarySelection, .barber-inline-form > #summarySelection { padding: 20px 22px 24px; }
.shop-card-inline-form #selectedShopName, .barber-inline-form #selectedShopName { margin: 4px 0 0; color: var(--ink); font-size: 1.35rem; letter-spacing: -.035em; }
.shop-card-inline-form .summary-kicker, .barber-inline-form .summary-kicker { margin-bottom: 6px; }
.shop-card-inline-form .booking-details, .barber-inline-form .booking-details { margin: 18px 0; padding-top: 16px; border-top: 1px solid #dfe4df; }
.shop-card-inline-form .booking-details dt, .barber-inline-form .booking-details dt { color: #7a8580; }
.shop-card-inline-form .booking-details dd, .barber-inline-form .booking-details dd { color: var(--ink); }
.shop-card-inline-form .total, .barber-inline-form .total { border-color: #dfe4df; }
.booking-service-picker { max-width: 620px; margin: 18px 0 0; }
.booking-service-picker label { display: grid; gap: 7px; color: #65716f; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.booking-service-picker select { border-color: #cdd5d0; background: white; color: var(--ink); }
.shop-card-inline-form .customer-form, .barber-inline-form .customer-form { max-width: 620px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-card-inline-form .customer-form label:first-child, .barber-inline-form .customer-form label:first-child { grid-column: 1 / -1; }
.shop-card-inline-form .customer-form input, .barber-inline-form .customer-form input { border-color: #cdd5d0; background: white; color: var(--ink); }
.shop-card-inline-form .customer-form input::placeholder, .barber-inline-form .customer-form input::placeholder { color: #98a19c; }
.shop-card-inline-form .fine-print, .barber-inline-form .fine-print { color: #7a8580; }
.selection-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 4px; }
.details-toggle, .shop-card-inline-form .change-button { border: 0; background: transparent; color: #68746e; font-size: .72rem; text-decoration: underline; text-underline-offset: 3px; }
.shop-card-inline-form .change-button, .barber-inline-form .change-button { float: none; margin: 0; color: var(--accent); }
#summarySelection.is-collapsed .booking-details,
#summarySelection.is-collapsed .total,
#summarySelection.is-collapsed .customer-form,
#summarySelection.is-collapsed .fine-print { display: none; }
.summary-topline { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid #373737; color: #aaa; font-size: .68rem; font-weight: 700; letter-spacing: .11em; }
.summary-status { color: #ddd; letter-spacing: 0; }
.summary h2 { font-size: 2rem; }
#summaryEmpty > p { margin: 16px 0 34px; color: #aaa; font-size: .9rem; }
.summary-placeholder { display: grid; gap: 13px; }
.summary-placeholder span { display: block; height: 10px; width: 100%; background: #2a2a2a; }
.summary-placeholder span:nth-child(2) { width: 72%; }
.summary-placeholder span:nth-child(3) { width: 84%; }
.change-button { float: right; margin-top: -4px; border: 0; background: transparent; color: #bbb; font-size: .75rem; text-decoration: underline; }
.booking-details { display: grid; gap: 14px; margin: 28px 0; }
.booking-details div { display: grid; grid-template-columns: 74px 1fr; gap: 12px; }
.booking-details dt { color: #8f8f8f; font-size: .75rem; }
.booking-details dd { margin: 0; font-size: .8rem; text-align: right; }
.total { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid #373737; border-bottom: 1px solid #373737; }
.total strong { font-size: 1.25rem; }
.customer-form { display: grid; gap: 13px; margin-top: 23px; }
.customer-form label { color: #bcbcbc; }
.customer-form input { height: 46px; border-color: #454545; background: #222; color: white; }
.customer-form input::placeholder { color: #747474; }
.confirm-button { min-height: 50px; margin-top: 4px; }
.form-error { min-height: 0; margin: 0; color: #ff988f; font-size: .78rem; }
.form-error:empty { display: none; }
.fine-print { color: #777; font-size: .68rem; text-align: center; }
.success-state { text-align: center; }
.success-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 24px; border-radius: 50%; background: var(--success); font-size: 1.7rem; }
.success-state p { color: #aaa; font-size: .9rem; }
.booking-code { margin: 26px 0; padding: 15px; background: #242424; color: #aaa; font-size: .82rem; }
.booking-code strong { margin-left: 8px; color: white; letter-spacing: .12em; }
.secondary-button { min-height: 44px; border: 1px solid #555; border-radius: var(--radius); background: transparent; color: white; padding: 0 18px; }
.secondary-button:hover { border-color: #888; }
.rating-form { display: grid; gap: 10px; margin: 24px 0 16px; padding: 16px; border: 1px solid #373737; background: #202020; }
.rating-form-title { margin: 0; color: #ddd; font-size: .76rem; font-weight: 700; }
.rating-stars { display: flex; gap: 4px; }
.rating-stars label { cursor: pointer; }
.rating-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rating-stars span { color: #6c6c6c; font-size: 1.35rem; transition: color .15s ease; }
.rating-stars label:hover span, .rating-stars input:checked + span { color: #e0ad50; }
.rating-stars input:focus-visible + span { outline: 2px solid #e0ad50; outline-offset: 3px; }
.rating-form textarea { width: 100%; resize: vertical; border: 1px solid #454545; border-radius: var(--radius); background: #171717; color: white; padding: 9px 10px; font-size: .75rem; }
.rating-form .secondary-button { min-height: 38px; justify-self: start; font-size: .74rem; }
.rating-feedback { min-height: 16px; margin: 0; color: #aaa; font-size: .68rem; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 26px max(20px, calc((100% - 1160px)/2)); border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.legal-page { min-height: 100vh; background: var(--paper); }
.legal-page .topbar { background: var(--ink); }
.legal-page .topbar nav { gap: 28px; }
.legal-shell { width: min(860px, calc(100% - 40px)); margin: 0 auto; padding: 86px 0 100px; }
.legal-shell h1 { max-width: 720px; margin: 0; font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: .95; letter-spacing: -.065em; }
.legal-intro { max-width: 560px; margin: 22px 0 42px; color: var(--muted); font-size: 1.08rem; }
.legal-card { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 18px 36px rgba(23,33,42,.07); }
.legal-card section { padding: 26px 30px; border-bottom: 1px solid var(--line); }
.legal-card section:last-child { border-bottom: 0; }
.legal-card h2 { margin: 0 0 8px; color: var(--ink); font-size: 1.05rem; }
.legal-card p { max-width: 680px; margin: 0; color: var(--muted); font-size: .9rem; }
.legal-back { margin-top: 28px; border-color: var(--ink); background: var(--ink); border-radius: 999px; }
.legal-back:hover { border-color: var(--accent); background: var(--accent); color: white; }
.sidebar-link-legal { margin-top: auto; }
.shop-qr-card { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 28px; align-items: center; margin: 16px auto 0; padding: 22px 26px; border: 1px solid var(--admin-line, var(--line)); background: var(--white); }
.shop-qr-card h2 { margin: 3px 0 6px; font-size: 1.3rem; letter-spacing: -.03em; }
.shop-qr-card p:not(.section-number) { max-width: 560px; margin: 0 0 12px; color: var(--muted); font-size: .82rem; }
.shop-public-link { display: block; max-width: 560px; overflow: hidden; color: var(--accent); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.shop-qr-code { display: grid; justify-items: center; gap: 9px; }
.shop-qr-code img { width: 132px; height: 132px; padding: 7px; border: 1px solid var(--line); background: white; }
.shop-qr-code .outline-button { min-height: 34px; padding-inline: 12px; font-size: .72rem; }
.footer-access { display: inline-flex; gap: 16px; }
.footer-access a { color: var(--muted); text-underline-offset: 3px; }
.footer-access a:hover { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 5; transform: translate(-50%, 20px); padding: 12px 17px; border-radius: var(--radius); background: white; color: var(--ink); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .2s ease; font-size: .85rem; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 900px) {
  .topbar { position: relative; }
  .topbar > .brand { position: absolute; left: 50%; z-index: 2; transform: translateX(-50%); }
  .topbar > .brand .brand-logo { width: 132px; height: auto; }
  .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: transparent; color: white; font-size: .72rem; font-weight: 700; }
  .topbar nav { position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; z-index: 20; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 7px; border: 1px solid rgba(23,33,42,.12); border-radius: 16px; background: white; box-shadow: 0 16px 30px rgba(23,33,42,.16); }
  .topbar.menu-open nav { display: flex; }
  .topbar nav a, .topbar nav .plain-button { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); font-size: .82rem; text-decoration: none; }
  .topbar nav a:hover, .topbar nav .plain-button:hover { background: var(--surface-soft); color: var(--accent); }
  .header-menu-toggle { position: absolute; left: 20px; z-index: 4; border-color: #cbd3d9; background: #f7f8f9; color: #303942; }
  .topbar .panel-header-actions { position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; z-index: 20; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 7px; border: 1px solid rgba(23,33,42,.12); border-radius: 16px; background: white; box-shadow: 0 16px 30px rgba(23,33,42,.16); }
  .topbar.menu-open .panel-header-actions { display: flex; }
  .topbar .panel-header-actions a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); font-size: .82rem; text-decoration: none; }
  .topbar .panel-header-actions a:hover { background: var(--surface-soft); color: var(--accent); }
  .hero { min-height: 420px; }
  .hero-proof { display: none; }
  .booking-workspace { grid-template-columns: 1fr; gap: 34px; }
  .summary { position: relative; top: 0; }
  .booking-workspace.no-summary .result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .shop-qr-card { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .shop-qr-code { justify-items: start; }
  .topbar { height: 64px; }
  .brand-logo { width: 118px; padding: 4px 7px; }
  .topbar nav { gap: 16px; }
  .topbar nav a[href="#agenda"] { display: none; }
  .topbar nav .access-link { display: inline; font-size: .7rem; }
  .header-menu-toggle { left: 16px; }
  .panel-sidebar, .admin-page .panel-sidebar {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    overflow: visible;
    padding: 12px;
  }
  .panel-sidebar .sidebar-label, .admin-page .panel-sidebar .sidebar-label {
    display: block;
    margin: 0 4px 3px;
    font-size: .66rem;
    letter-spacing: .14em;
  }
  .sidebar-link, .admin-page .sidebar-link {
    width: 100%;
    min-height: 48px;
    flex: none;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 8px 10px;
    border-radius: 8px;
  }
  .sidebar-link .nav-panel-copy strong { font-size: .78rem; }
  .sidebar-link .nav-panel-copy small { display: block; font-size: .64rem; }
  .panel-sidebar .sidebar-note, .admin-page .panel-sidebar .sidebar-note { display: none; }
  .hero { min-height: 430px; }
  .hero > img { object-position: 65% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(10,10,10,.86), rgba(10,10,10,.35)); }
  .hero-content { padding-bottom: 48px; }
  .hero h1 { font-size: clamp(2.65rem, 14vw, 4rem); }
  .booking-workspace { width: min(100% - 28px, 1160px); padding-top: 48px; }
  .section-heading { display: block; }
  .results-count { margin-top: 12px; }
  .booking-workspace.no-summary .result-list { grid-template-columns: 1fr; }
  .booking-workspace.no-summary .shop-card-header { grid-template-columns: 68px minmax(0, 1fr); padding: 18px 16px; }
  .booking-workspace.no-summary .shop-card-logo { width: 68px; height: 68px; }
  .search-controls { grid-template-columns: 1fr; }
  .date-navigation { grid-template-columns: 1fr; }
  .date-strip { grid-template-columns: repeat(3, 1fr); }
  .calendar-trigger { min-height: 56px; grid-template-columns: 26px 1fr; }
  .booking-calendar { left: 0; right: auto; width: 100%; min-width: 0; }
  .shop-row { grid-template-columns: 1fr; gap: 20px; }
  .slots { grid-template-columns: repeat(3, 1fr); }
  footer { flex-direction: column; }
  .footer-access { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Panel de barbería */
.panel-page { min-height: 100vh; background: #eeece7; }
.panel-topbar { position: sticky; top: 0; z-index: 10; }
.panel-product { display: flex; align-items: center; gap: 10px; margin-right: auto; margin-left: 28px; padding-left: 28px; border-left: 1px solid #3b3b3b; color: #d2d2d2; font-size: .82rem; }
.live-pill { padding: 4px 8px; border-radius: 999px; background: #203c31; color: #82d4af; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.public-link { color: white; font-size: .8rem; font-weight: 600; text-underline-offset: 4px; }
.panel-shell { min-height: calc(100vh - 74px); display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.panel-sidebar { position: sticky; top: 74px; height: calc(100vh - 74px); display: flex; flex-direction: column; padding: 34px 20px; border-right: 1px solid var(--line); background: #f7f5f1; }
.panel-shell > .panel-sidebar { grid-column: 1; grid-row: 1 / -1; }
.sidebar-label { margin: 0 12px 13px; color: #8d8982; font-size: .67rem; font-weight: 700; letter-spacing: .14em; }
.sidebar-link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: .86rem; font-weight: 600; }
.sidebar-link span { color: #9a968e; font-size: .68rem; }
.sidebar-link.active { background: var(--ink); color: white; }
.sidebar-link.active span { color: #e36b64; }
.sidebar-note { margin-top: auto; padding: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.sidebar-note strong { color: var(--ink); }
.sidebar-note p { margin: 7px 0 0; }
.panel-content { min-width: 0; grid-column: 2; padding: 52px clamp(24px, 4vw, 64px) 90px; }
.panel-heading { max-width: 1180px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin: 0 auto 40px; }
.panel-heading h1 { margin: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.055em; }
.panel-heading > div > p:last-child { max-width: 600px; margin: 14px 0 0; color: var(--muted); }
.shop-picker { width: min(280px, 100%); display: grid; gap: 7px; color: #4a4742; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.shop-picker select { background-color: white; }
.schedule-target-controls { min-width: 420px; display: grid; gap: 10px; }
.target-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: #e6e3dd; }
.target-tab { min-height: 34px; border: 0; border-radius: 2px; background: transparent; color: #66615a; font-size: .74rem; font-weight: 700; }
.target-tab.active { background: var(--ink); color: white; }
.target-tab:disabled { cursor: not-allowed; opacity: .45; }
.target-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.target-selectors .shop-picker { width: 100%; }
.panel-grid { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 28px; align-items: start; margin: 0 auto; }
.shop-identity-strip { max-width: 1180px; min-height: 112px; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 20px; margin: -16px auto 28px; padding: 18px 22px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); background: white; }
.shop-logo-frame { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; background: #e7e4de; color: var(--ink); font-size: 1.65rem; font-weight: 700; }
.shop-logo-frame img { width: 100%; height: 100%; object-fit: contain; background: white; padding: 5px; }
.shop-identity-copy { min-width: 0; }
.shop-identity-copy h2 { margin: 3px 0 2px; font-size: 1.18rem; letter-spacing: -.025em; }
.shop-identity-copy p:last-child { margin: 0; color: var(--muted); font-size: .76rem; }
.shop-logo-actions { display: grid; grid-template-columns: auto auto; align-items: center; gap: 8px; }
.shop-logo-actions small { grid-column: 1 / -1; color: var(--muted); font-size: .66rem; }
.logo-remove-button { min-height: 40px; border: 0; background: transparent; color: #a33b35; font-size: .75rem; font-weight: 600; }
.logo-remove-button:hover { color: var(--accent); }
.shop-info-panel { border-bottom: 1px solid var(--line); }
.shop-info-form { max-width: 1180px; margin: 0 auto; padding: 26px 24px 8px; border-top: 1px solid var(--line); background: white; }
.shop-info-form .editor-actions { margin: 6px -24px 0; }
.anchor-target { position: relative; top: -110px; display: block; visibility: hidden; }
.reservations-panel { border-top: 1px solid var(--line); }
.local-reservations-list { max-width: 1180px; margin: 0 auto; border-top: 2px solid var(--ink); background: white; }
.local-reservation-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 22px; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.local-reservation-row > div { min-width: 0; display: grid; gap: 3px; }
.local-reservation-row span { color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .08em; }
.local-reservation-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.local-reservation-row small { color: var(--muted); font-size: .72rem; }
.local-reservation-row b { color: var(--success); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.reservations-empty { padding: 38px 24px; text-align: center; }
.reservations-empty strong { font-size: 1rem; }
.reservations-empty p { margin: 6px 0 14px; color: var(--muted); font-size: .8rem; }
.reservations-empty a { color: var(--ink); font-size: .76rem; font-weight: 700; text-underline-offset: 4px; }
.schedule-form { min-width: 0; }
.settings-section { margin-bottom: 20px; border: 1px solid var(--line); background: white; }
.settings-heading { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.settings-heading > div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.settings-heading h2 { margin: 0; font-size: 1.14rem; letter-spacing: -.025em; }
.settings-heading p { flex-basis: 100%; margin: -6px 0 0 38px; color: var(--muted); font-size: .78rem; }
.section-number { color: var(--accent); font-size: .7rem; font-weight: 700; }
.interval-field { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .72rem; }
.interval-field select { width: 100px; height: 40px; }
.week-list { padding: 0 24px; }
.day-row { min-height: 118px; display: grid; grid-template-columns: minmax(140px, 1fr) auto; align-items: center; gap: 18px; padding: 13px 0; border-bottom: 1px solid #e7e4de; }
.day-row.closed { min-height: 72px; padding: 0; }
.day-row:last-child { border-bottom: 0; }
.day-row.closed { color: #8c8881; }
.day-toggle { min-height: 44px; display: flex; align-items: center; gap: 13px; cursor: pointer; }
.day-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch { width: 38px; height: 22px; position: relative; flex: 0 0 auto; border-radius: 999px; background: #c9c6c0; transition: .18s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: .18s ease; }
.day-toggle input:checked + .switch { background: var(--ink); }
.day-toggle input:checked + .switch::after { transform: translateX(16px); }
.day-toggle input:focus-visible + .switch { outline: 3px solid rgba(217,50,42,.35); outline-offset: 3px; }
.day-toggle strong { font-size: .88rem; }
.day-controls { min-width: 340px; display: grid; gap: 11px; }
.day-times, .lunch-times { display: flex; align-items: flex-end; justify-content: flex-end; gap: 9px; }
.day-times label, .lunch-times label, .exception-row label, .preview-date { display: grid; gap: 4px; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.modern-time { width: 116px; height: 40px; position: relative; display: block; }
.modern-time svg { position: absolute; top: 50%; left: 11px; z-index: 1; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: #6f6b64; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.modern-time select { width: 100%; height: 100%; padding: 0 28px 0 34px; border: 1px solid #cbc7bf; border-radius: var(--radius); background: white; color: var(--ink); font-size: .77rem; font-weight: 600; letter-spacing: .02em; }
.modern-time select:hover { border-color: #8f8a82; }
.lunch-row { min-height: 34px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 14px; padding-top: 9px; border-top: 1px dashed #dedbd5; }
.lunch-toggle { min-height: 34px; display: flex; align-items: center; gap: 7px; color: #5d5953; cursor: pointer; font-size: .72rem; font-weight: 600; }
.lunch-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mini-check { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #bbb7af; border-radius: 3px; background: white; color: transparent; font-size: .68rem; }
.lunch-toggle input:checked + .mini-check { border-color: var(--ink); background: var(--ink); color: white; }
.lunch-toggle input:focus-visible + .mini-check { outline: 3px solid rgba(217,50,42,.35); outline-offset: 2px; }
.lunch-times .modern-time { width: 108px; height: 34px; }
.lunch-times .modern-time select { font-size: .72rem; }
.time-divider { margin-bottom: 10px; color: #aaa69f; }
.closed-label { color: #8c8881; font-size: .8rem; }
[hidden] { display: none !important; }
.outline-button { min-height: 40px; border: 1px solid #bab6ae; border-radius: var(--radius); background: white; color: var(--ink); padding: 0 14px; font-size: .78rem; font-weight: 600; }
.outline-button:hover { border-color: var(--ink); }
.exceptions-list { padding: 0 24px; }
.exception-row { min-height: 94px; display: grid; grid-template-columns: 150px 180px 1fr 36px; align-items: end; gap: 12px; padding: 17px 0; border-bottom: 1px solid #e7e4de; }
.exception-row input, .exception-row > label > select { height: 42px; }
.exception-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.exception-times .modern-time { width: 100%; height: 42px; }
.remove-button { width: 36px; height: 42px; border: 0; background: transparent; color: #918d86; font-size: 1.45rem; }
.remove-button:hover { color: var(--accent); }
.empty-exceptions { margin: 0; padding: 26px 24px; color: var(--muted); font-size: .82rem; }
.save-bar { position: sticky; bottom: 16px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 18px; border: 1px solid #343434; background: var(--ink); color: white; box-shadow: var(--shadow); }
.save-bar p { display: flex; align-items: center; gap: 9px; margin: 0; color: #b9b9b9; font-size: .76rem; }
.save-dot { width: 7px; height: 7px; border-radius: 50%; background: #3da372; }
.save-dot.dirty { background: #f0ae47; }
.save-bar .confirm-button { min-height: 44px; padding: 0 22px; }
.schedule-preview { position: sticky; top: 98px; padding: 27px; background: var(--ink); color: white; box-shadow: var(--shadow); }
.schedule-preview h2 { margin: 0 0 24px; font-size: 1.75rem; letter-spacing: -.045em; }
.preview-date span { color: #aaa; }
.preview-date input { margin-top: 4px; border-color: #444; background: #222; color: white; color-scheme: dark; }
.preview-shop { display: grid; gap: 4px; margin: 24px 0 16px; padding-top: 20px; border-top: 1px solid #383838; }
.preview-shop strong { font-size: 1rem; }
.preview-shop span { color: #929292; font-size: .75rem; }
.preview-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.preview-slots span { display: grid; place-items: center; min-height: 38px; border: 1px solid #535353; border-radius: var(--radius); font-size: .76rem; font-weight: 600; }
.preview-message { min-height: 40px; margin: 16px 0 22px; color: #9d9d9d; font-size: .75rem; }
.preview-link { display: block; min-height: 44px; padding: 12px; border: 1px solid #555; border-radius: var(--radius); color: white; text-align: center; text-decoration: none; font-size: .78rem; font-weight: 600; }
.preview-link:hover { border-color: #888; }

@media (max-width: 1050px) {
  .panel-shell { grid-template-columns: 1fr; }
  .panel-sidebar { display: none; }
  .panel-content { grid-column: 1; }
  .panel-grid { grid-template-columns: minmax(0, 1fr) 290px; }
}

@media (max-width: 800px) {
  .panel-product { display: none; }
  .panel-content { padding: 36px 16px 70px; }
  .panel-heading { display: grid; }
  .shop-picker { width: 100%; }
  .panel-grid { grid-template-columns: 1fr; }
  .shop-identity-strip { grid-template-columns: 64px 1fr; }
  .shop-logo-frame { width: 64px; height: 64px; }
  .shop-logo-actions { grid-column: 1 / -1; grid-template-columns: 1fr auto; }
  .local-reservation-row { grid-template-columns: 1fr 1fr; }
  .schedule-preview { position: relative; top: 0; grid-row: 1; }
  .day-row, .day-row.closed { grid-template-columns: 1fr; gap: 7px; padding: 14px 0; }
  .day-controls { min-width: 0; padding-left: 51px; }
  .closed-label { padding-left: 51px; }
  .exception-row { grid-template-columns: 1fr 1fr 36px; }
  .exception-times { grid-column: 1 / 3; }
  .remove-button { grid-column: 3; grid-row: 1; }
}

@media (max-width: 520px) {
  .public-link { font-size: .72rem; }
  .settings-heading { align-items: flex-start; flex-direction: column; }
  .interval-field { width: 100%; justify-content: space-between; }
  .week-list, .exceptions-list { padding: 0 16px; }
  .day-controls { width: 100%; padding-left: 0; }
  .day-times { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; }
  .modern-time { width: 100%; }
  .lunch-row { align-items: flex-start; flex-direction: column; }
  .lunch-times { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; }
  .lunch-times .modern-time { width: 100%; }
  .closed-label { padding-left: 51px; }
  .exception-row { grid-template-columns: 1fr 36px; }
  .exception-row > label:nth-child(2), .exception-times { grid-column: 1 / -1; }
  .remove-button { grid-column: 2; grid-row: 1; }
  .save-bar { bottom: 8px; }
  .save-bar p { max-width: 120px; }
  .local-reservation-row { grid-template-columns: 1fr; }
}

/* Administración de barberías */
.shops-heading { align-items: center; }
.admin-entity-tabs { max-width: 1180px; display: flex; gap: 4px; margin: -16px auto 22px; border-bottom: 1px solid var(--line); }
.entity-tab { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 18px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-weight: 700; }
.entity-tab span { min-width: 23px; padding: 2px 7px; border-radius: 999px; background: #dedbd5; color: #625e58; font-size: .68rem; }
.entity-tab.active { border-bottom-color: var(--accent); color: var(--ink); }
.entity-tab.active span { background: var(--ink); color: white; }
.new-shop-button { min-height: 48px; border: 0; border-radius: var(--radius); background: var(--accent); color: white; padding: 0 20px; font-weight: 700; white-space: nowrap; }
.new-shop-button:hover { background: var(--accent-hover); }
.mini-action-button { min-height: 36px; border: 1px solid #bcb8b0; border-radius: var(--radius); background: white; color: var(--ink); padding: 0 12px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.mini-action-button:hover { border-color: var(--ink); }
.shops-admin-grid { max-width: 1180px; display: grid; grid-template-columns: minmax(300px, .8fr) minmax(460px, 1.2fr); gap: 28px; align-items: start; margin: 0 auto; }
.team-panel { border-top: 1px solid var(--line); }
.team-admin-grid { max-width: 1180px; display: grid; grid-template-columns: minmax(300px, .8fr) minmax(460px, 1.2fr); gap: 28px; align-items: start; margin: 0 auto; }
.overview-cards, .report-grid { max-width: 1180px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 auto; }
.overview-card, .report-card { min-height: 132px; display: grid; align-content: center; gap: 5px; padding: 22px; border: 1px solid var(--line); background: white; }
.overview-card span, .report-card span { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.overview-card strong, .report-card strong { font-size: 2rem; letter-spacing: -.05em; }
.overview-card small, .report-card small { color: var(--muted); font-size: .75rem; }
.admin-page { background: #f1f0ed; }
.admin-page .panel-topbar { height: 80px; }
.admin-page .panel-shell { grid-template-columns: 252px minmax(0, 1fr); }
.admin-page .panel-sidebar { padding: 40px 22px; background: #f8f7f4; }
.admin-page .panel-content { padding-top: 60px; }
.admin-page .panel-heading h1 { font-size: clamp(2.4rem, 4.5vw, 4rem); }
.admin-page .overview-cards { gap: 14px; }
.admin-page .overview-card { min-height: 150px; border-color: #dedbd5; box-shadow: 0 8px 24px rgba(35, 31, 26, .04); }
.admin-page .overview-card:first-child { border-top: 3px solid var(--accent); }
.admin-page .overview-card strong { font-variant-numeric: tabular-nums; }
.overview-lower { max-width: 1180px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; margin: 14px auto 0; }
.overview-module { border: 1px solid #dedbd5; background: white; padding: 24px; }
.module-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid #e7e4de; }
.module-heading h2 { margin: 4px 0 0; font-size: 1.1rem; letter-spacing: -.025em; }
.module-date { color: var(--muted); font-size: .72rem; }
.health-list { display: grid; gap: 17px; padding-top: 19px; }
.health-list > div { display: grid; grid-template-columns: 10px 1fr; column-gap: 10px; align-items: center; }
.health-list strong { font-size: .82rem; }
.health-list small { grid-column: 2; color: var(--muted); font-size: .73rem; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: #b4afa7; grid-row: 1 / span 2; }
.health-dot.ok { background: var(--success); box-shadow: 0 0 0 4px rgba(24,114,75,.1); }
.quick-actions { display: grid; gap: 0; padding-top: 4px; }
.quick-actions a { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #e7e4de; color: var(--ink); text-decoration: none; font-size: .82rem; font-weight: 600; }
.quick-actions a:last-child { border-bottom: 0; }
.quick-actions a span { color: var(--accent); font-size: 1.1rem; }

/* Dirección visual del panel central: tablero operativo Corta */
.admin-page {
  --admin-gold: var(--gold);
  --admin-canvas: #f1f4f2;
  --admin-line: #d4ddd8;
  --admin-rail: #17242b;
  background: var(--admin-canvas);
}
.admin-page .panel-shell { background: var(--admin-canvas); }
.admin-page .panel-sidebar { border-right-color: #27313a; background: var(--admin-rail); color: #f3f5f6; }
.admin-page .sidebar-label { color: #9aa4ad; }
.admin-page .sidebar-link { border-radius: 0; color: #d7dde1; }
.admin-page .sidebar-link span { color: #6f7b85; }
.admin-page .sidebar-link:hover { background: #18212a; color: white; }
.admin-page .sidebar-link.active { box-shadow: inset 3px 0 0 var(--admin-gold); background: #1a232c; color: white; }
.admin-page .sidebar-link.active span { color: var(--admin-gold); }
.admin-page .sidebar-note { border-top-color: #303a43; color: #98a2aa; }
.admin-page .sidebar-note strong { color: white; }
.admin-page .panel-content { border-bottom: 1px solid var(--admin-line); background: transparent; }
.admin-page .step-label, .admin-page .section-number, .admin-page .editor-section-title { color: #9b7225; }
.admin-page .panel-heading > div > p:last-child { color: #68737c; }
.admin-page .overview-cards, .admin-page .report-grid { gap: 0; border-top: 1px solid var(--admin-line); border-bottom: 1px solid var(--admin-line); background: white; }
.admin-page .overview-card, .admin-page .report-card { min-height: 142px; border: 0; border-right: 1px solid var(--admin-line); box-shadow: none; background: transparent; }
.admin-page .overview-card:last-child, .admin-page .report-card:last-child { border-right: 0; }
.admin-page .overview-card:first-child { border-top: 0; }
.admin-page .overview-card span, .admin-page .report-card span { color: #6b7680; }
.admin-page .overview-card strong, .admin-page .report-card strong { color: #111820; font-size: 2.25rem; }
.admin-page .overview-lower { gap: 0; border-bottom: 1px solid var(--admin-line); background: white; }
.admin-page .overview-module { border: 0; border-right: 1px solid var(--admin-line); background: transparent; }
.admin-page .overview-module:last-child { border-right: 0; }
.admin-page .module-heading { border-bottom-color: var(--admin-line); }
.admin-page .health-dot.ok { background: #29815b; }
.admin-page .quick-actions a { border-bottom-color: var(--admin-line); }
.admin-page .quick-actions a span { color: #9b7225; }
.admin-page .shop-catalog, .admin-page .shop-editor, .admin-page .tool-card { border: 0; border-top: 2px solid #17202a; box-shadow: none; }
.admin-page .catalog-heading, .admin-page .editor-heading, .admin-page .editor-section { border-bottom-color: var(--admin-line); }
.admin-page .admin-shop-row { border-bottom-color: var(--admin-line); }
.admin-page .admin-shop-row:hover, .admin-page .admin-shop-row.selected { background: #eef1f3; }
.admin-page .admin-shop-row.selected { box-shadow: inset 3px 0 0 var(--admin-gold); }
.admin-page .shop-initial { background: #17202a; }
.admin-page .confirm-button, .admin-page .new-shop-button { background: var(--admin-gold); color: #111820; }
.admin-page .confirm-button:hover, .admin-page .new-shop-button:hover { background: #b48732; }
.admin-page .entity-tab.active { border-bottom-color: var(--admin-gold); }
.admin-page .city-chip { border: 1px solid var(--admin-line); background: #f7f8f9; }
.admin-page input:focus, .admin-page select:focus { border-color: #94702d; }
.admin-tools-panel { border-top: 1px solid var(--line); }
.tool-grid { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0 auto; }
.tool-card { border: 1px solid var(--line); background: white; padding: 24px; }
.city-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.city-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--paper); font-size: .8rem; font-weight: 700; }
.city-chip button { border: 0; background: none; color: var(--muted); font-size: 1rem; line-height: 1; }
.inline-form { display: flex; gap: 10px; max-width: 560px; }
.inline-form input { flex: 1; }
.reservation-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid #e7e4de; font-size: .82rem; }
.reservation-row:last-child { border-bottom: 0; }
.reservation-row strong { display: block; }
.reservation-row small { color: var(--muted); }
.empty-tool { color: var(--muted); font-size: .84rem; }
.global-form { max-width: 1180px; margin: 0 auto; }
.shop-catalog, .shop-editor { border: 1px solid var(--line); background: white; }
.catalog-heading, .editor-heading { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.catalog-heading h2, .editor-heading h2 { margin: 3px 0 0; font-size: 1.18rem; letter-spacing: -.025em; }
.catalog-heading .section-number, .editor-heading .section-number { margin: 0; }
.catalog-heading > span { color: var(--muted); font-size: .76rem; }
.admin-shop-list { display: grid; }
.team-admin-grid { grid-template-columns: 1fr; }
.team-admin-grid .shop-editor { grid-row: 1; }
.team-admin-grid .shop-catalog { grid-row: 2; }
.barber-profile-card { display: grid; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(28,34,36,.05); }
.team-overview-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 24px; }
.team-overview-strip > div { display: grid; gap: 5px; min-height: 92px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.panel-header-actions { display: flex; align-items: center; gap: 18px; }
.access-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 15% 10%, rgba(207,47,40,.08), transparent 30rem), #f3f4f3; color: var(--ink); }
.access-shell { width: min(100%, 500px); display: grid; gap: 24px; }
.access-brand { justify-self: center; }
.access-brand img { width: 148px; height: auto; }
.access-card { padding: 42px; border: 1px solid #dce1de; border-radius: 24px; background: white; box-shadow: 0 20px 50px rgba(28,34,36,.10); }
.access-card h1 { margin: 0; font-size: clamp(2.4rem, 7vw, 4rem); line-height: .95; letter-spacing: -.065em; }
.access-copy { margin: 18px 0 30px; color: var(--muted); line-height: 1.5; }
.access-form { display: grid; gap: 15px; }
.access-form label { display: grid; gap: 7px; color: #4a4742; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.access-form select, .access-form input { height: 50px; }
.access-form .confirm-button { min-height: 52px; margin-top: 6px; }
.access-form .confirm-button span { margin-left: 12px; font-size: 1.2rem; }
.access-note { display: flex; gap: 9px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #e4e8e5; color: #78837d; font-size: .72rem; line-height: 1.45; }
.access-note span { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; background: #e3e9e5; font-weight: 700; }
.access-back { justify-self: center; color: #68746e; font-size: .78rem; text-underline-offset: 3px; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 15% 10%, rgba(207,47,40,.08), transparent 30rem), #f3f4f3; color: var(--ink); }
.login-shell { width: min(100%, 500px); display: grid; gap: 24px; }
.login-card { padding: 42px; border: 1px solid #dce1de; border-radius: 24px; background: white; box-shadow: 0 20px 50px rgba(28,34,36,.10); }
.login-card h1 { margin: 0; font-size: clamp(2.5rem, 7vw, 4rem); line-height: .95; letter-spacing: -.065em; }
.login-copy { margin: 18px 0 30px; color: var(--muted); line-height: 1.5; }
.google-login-box { display: grid; justify-items: center; min-height: 48px; }
.google-placeholder { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: min(320px, 100%); min-height: 42px; border: 1px solid #cbd2d8; border-radius: 4px; background: #f6f7f8; color: #6d7780; font: inherit; font-size: .82rem; font-weight: 600; }
.google-placeholder span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: white; color: #4285f4; font-weight: 700; }
.login-status { margin: 15px 0 0; color: #68746e; font-size: .76rem; line-height: 1.45; text-align: center; }
.login-legal { margin: 25px 0 0; padding-top: 18px; border-top: 1px solid #e4e8e5; color: #78837d; font-size: .72rem; line-height: 1.45; text-align: center; }
.login-legal a { color: var(--accent); text-underline-offset: 3px; }
@media (max-width: 520px) { .login-page { padding: 16px; } .login-card { padding: 30px 22px; } }
@media (max-width: 520px) { .access-page { padding: 16px; } .access-card { padding: 28px 22px; } .panel-header-actions { gap: 10px; } }
.panel-content#horarios #dias-especiales { display: none !important; }
.team-overview-strip span { color: #89938e; font-size: .63rem; font-weight: 700; letter-spacing: .1em; }
.team-overview-strip strong { color: var(--ink); font-size: 1.65rem; letter-spacing: -.04em; }
.team-overview-strip small { color: var(--muted); font-size: .68rem; }
.barber-profile-card + .barber-profile-card { margin-top: 12px; }
.barber-profile-card.selected { border-color: var(--accent); box-shadow: 0 10px 26px rgba(207,47,40,.10); }
.barber-profile-card { grid-template-columns: minmax(220px, 1fr) minmax(360px, 2fr) auto; align-items: center; gap: 22px; padding: 18px 22px; }
.shop-editor#localBarberForm[hidden] { display: none; }
.shop-editor#localBarberForm.modal-open { position: fixed; z-index: 40; top: 5vh; left: 50%; width: min(760px, calc(100% - 32px)); max-height: 90vh; overflow-y: auto; transform: translateX(-50%); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(15,20,22,.48), 0 24px 70px rgba(15,20,22,.28); }
.service-catalog-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 18px; align-items: start; }
.service-catalog-card, .central-service-form { min-width: 0; }
.central-service-list { display: grid; gap: 8px; margin-top: 20px; }
.central-service-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 34px; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid #e0e5e1; border-radius: 12px; background: #fbfcfb; }
.central-service-row.is-inactive { opacity: .65; background: #f3f4f3; }
.central-service-row div { display: grid; gap: 4px; }
.central-service-row strong { color: var(--ink); font-size: .9rem; }
.central-service-row small { color: var(--muted); font-size: .7rem; }
.central-service-row > b { color: #4d6657; font-size: .88rem; white-space: nowrap; }
.service-toggle-button, .service-delete-button { border: 0; background: transparent; color: #64766b; font-size: .7rem; font-weight: 700; cursor: pointer; }
.service-edit-button { border: 1px solid #cbd9ce; border-radius: 7px; background: #f3f8f4; color: #4d6657; padding: 6px 9px; font-size: .68rem; font-weight: 700; cursor: pointer; }
.service-toggle-button { text-decoration: underline; text-underline-offset: 3px; }
.service-delete-button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f1dfdd; color: #a94b43; font-size: 1rem; }
.central-service-form { display: grid; gap: 14px; }
.central-service-form h2 { margin: -4px 0 5px; font-size: 1.2rem; letter-spacing: -.03em; }
.central-service-form label { display: grid; gap: 7px; color: #59645e; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.central-service-form .checkbox-field { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal; }
.central-service-form .checkbox-field input { width: auto; height: auto; }
.central-service-form .confirm-button { min-height: 48px; margin-top: 5px; }
.central-service-note { border: 1px dashed #cbd5ce; background: #f5f8f5; }
.local-services-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 18px; align-items: start; }
.local-service-editor, .local-services-help { min-width: 0; }
.local-service-list { display: grid; gap: 8px; margin-top: 20px; }
.local-service-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 34px; gap: 12px; align-items: end; padding: 12px 14px; border: 1px solid #e0e5e1; border-radius: 12px; background: #fbfcfb; }
.local-service-row label, .local-service-add label { display: grid; gap: 6px; color: #59645e; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.local-service-row input { height: 42px; }
.local-service-row .service-delete-button { margin-bottom: 7px; }
.local-service-add { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 10px; align-items: end; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e4e9e5; }
.local-service-add input { height: 42px; }
.local-service-add .outline-button { height: 42px; }
.local-services-help { background: #17212a; color: #dce3e6; border-color: #17212a; }
.local-services-help h2 { margin: 0 0 12px; color: white; font-size: 1.25rem; letter-spacing: -.03em; }
.local-services-help p:not(.section-number) { color: #b4c0c5; line-height: 1.55; font-size: .82rem; }
.local-services-help small { display: block; margin-top: 20px; padding-top: 14px; border-top: 1px solid #34414b; color: #8f9da4; line-height: 1.45; }
@media (max-width: 820px) { .local-services-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .local-service-row, .local-service-add { grid-template-columns: 1fr 1fr; } .local-service-row .service-delete-button { grid-column: 2; justify-self: end; } .local-service-add .outline-button { grid-column: 1 / -1; } }
@media (max-width: 820px) { .service-catalog-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .central-service-row { grid-template-columns: 1fr auto; } .central-service-row > b { grid-column: 2; grid-row: 1; } .service-toggle-button { grid-column: 1; text-align: left; } .service-delete-button { grid-column: 2; grid-row: 2; } }
.barber-profile-head { display: grid; grid-column: auto; grid-template-columns: 48px minmax(0,1fr) auto; gap: 13px; align-items: center; }
.barber-profile-head .shop-initial { grid-area: auto; }
.barber-profile-head h3 { margin: 0; font-size: 1rem; }
.barber-profile-head small { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; }
.barber-active-toggle { min-width: 90px; height: 34px; padding: 0 12px; border: 1px solid #b8d2c0; border-radius: 999px; background: #eef8f0; color: #287047; font-size: .72rem; font-weight: 800; cursor: pointer; }
.barber-active-toggle:hover { background: #e2f1e6; }
.barber-active-toggle.inactive { border-color: #e0c6c3; background: #fff5f3; color: #a34e48; }
.barber-active-toggle.inactive:hover { background: #f9e7e4; }
.barber-card-label { margin: 0 0 8px; color: #89938e; font-size: .65rem; font-weight: 700; letter-spacing: .1em; }
.barber-service-chips, .barber-week-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.barber-service-chips span { padding: 7px 9px; border-radius: 8px; background: #f0f3f1; color: var(--ink); font-size: .7rem; }
.barber-service-chips b { margin-left: 5px; color: #60736a; }
.custom-services-list { display: grid; gap: 6px; margin-top: 12px; }
.custom-service-row { display: grid; grid-template-columns: 1fr auto 28px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf8; font-size: .75rem; }
.custom-service-row strong { color: #60736a; font-size: .72rem; }
.custom-service-row button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #f1ddda; color: #b34843; font-size: 1rem; }
.add-service-row { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; margin-top: 10px; }
.add-service-row input { height: 40px; }
.barber-day-chip { display: grid; gap: 3px; min-width: 78px; min-height: 58px; padding: 8px; border: 1px solid #e2e7e3; border-radius: 8px; background: white; color: #a0aaa4; font: inherit; font-size: .62rem; text-align: left; cursor: pointer; }
.barber-day-chip:hover { border-color: #a6b9aa; background: #f3f7f3; }
.barber-day-chip.is-open { border-color: #c9d9cf; background: #f4f9f5; color: #416450; }
.barber-day-date { color: #7f8c83; font-size: .58rem; }
.barber-day-chip b { font-size: .65rem; text-transform: uppercase; }
.barber-week-help { display: block; margin-top: 8px; color: #89938e; font-size: .66rem; }
.barber-profile-actions { display: grid; grid-column: auto; grid-template-columns: 1fr; gap: 7px; justify-content: stretch; padding-left: 18px; border-left: 1px solid var(--line); }
.barber-profile-actions .remove-button { width: 100%; height: 38px; border: 1px solid #e2c5c2; border-radius: 8px; background: #fff8f7; color: #a94b43; font-size: .7rem; font-weight: 700; cursor: pointer; }
.barber-profile-actions .remove-button:hover { border-color: #c87a73; background: #f8e8e6; color: #8f3029; }
.schedule-edit-button { border: 1px solid #c6d5ca; border-radius: 8px; background: #eef5ef; color: #43604d; padding: 8px 11px; font-size: .7rem; font-weight: 700; cursor: pointer; }
.schedule-edit-button:hover { border-color: #9db4a4; background: #e5f0e7; }
.quick-schedule-editor { grid-column: 1 / -1; padding: 14px 0 0; border-top: 1px solid #e4e9e5; }
.quick-schedule-editor:not([hidden]) { position: fixed; z-index: 45; top: 50%; left: 50%; width: min(920px, calc(100% - 32px)); max-height: 88vh; overflow-y: auto; padding: 24px; transform: translate(-50%, -50%); border: 1px solid #d9e1dc; border-radius: 18px; background: #fff; box-shadow: 0 0 0 100vmax rgba(15,20,22,.46), 0 24px 70px rgba(15,20,22,.24); }
.quick-schedule-editor.focus-only[data-focus-day="0"] .quick-schedule-row:not([data-quick-day="0"]) { display: none; }
.quick-schedule-editor.focus-only[data-focus-day="1"] .quick-schedule-row:not([data-quick-day="1"]), .quick-schedule-editor.focus-only[data-focus-day="2"] .quick-schedule-row:not([data-quick-day="2"]), .quick-schedule-editor.focus-only[data-focus-day="3"] .quick-schedule-row:not([data-quick-day="3"]), .quick-schedule-editor.focus-only[data-focus-day="4"] .quick-schedule-row:not([data-quick-day="4"]), .quick-schedule-editor.focus-only[data-focus-day="5"] .quick-schedule-row:not([data-quick-day="5"]), .quick-schedule-editor.focus-only[data-focus-day="6"] .quick-schedule-row:not([data-quick-day="6"]) { display: none; }
.quick-schedule-modal-heading { display: grid; gap: 4px; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #e4e9e5; }
.quick-schedule-modal-heading span { color: #9b7225; font-size: .65rem; font-weight: 700; letter-spacing: .12em; }
.quick-schedule-modal-heading h3 { margin: 0; color: var(--ink); font-size: 1.45rem; letter-spacing: -.04em; }
.quick-schedule-modal-heading small { color: var(--muted); font-size: .75rem; }
.quick-schedule-settings { display: flex; align-items: end; gap: 12px; margin-bottom: 10px; padding: 10px 12px; border-radius: 8px; background: #eef4ef; }
.quick-schedule-settings label { display: grid; gap: 4px; color: #526259; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.quick-schedule-settings select { width: 170px; height: 34px; border-color: #cbd9ce; border-radius: 6px; font-size: .72rem; }
.quick-schedule-settings small { color: #77857b; font-size: .68rem; }
.quick-bulk-actions { display: flex; gap: 6px; margin-left: auto; }
.quick-bulk-button { min-height: 34px; padding: 6px 11px; border: 1px solid #9db4a4; border-radius: 6px; background: #fff; color: #43604d; font-size: .65rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.quick-bulk-button:hover { background: #e5f0e7; }
.quick-bulk-button.is-muted { border-color: #d0d7d1; color: #6f7b73; }
.quick-schedule-list { display: grid; gap: 5px; }
.quick-schedule-row { display: grid; grid-template-columns: 150px minmax(105px, 1fr) 14px minmax(105px, 1fr) 86px minmax(105px, 1fr) 14px minmax(105px, 1fr); gap: 7px; align-items: center; min-width: 0; padding: 7px 8px; border-radius: 7px; background: #f6f8f6; }
.quick-schedule-row > label:first-child { display: flex; align-items: center; gap: 6px; color: #55655b; font-size: .68rem; font-weight: 700; }
.quick-day-toggle { position: relative; min-width: 0; white-space: nowrap; }
.quick-day-toggle > input { position: absolute; opacity: 0; pointer-events: none; }
.quick-toggle-track { position: relative; width: 28px; height: 16px; flex: 0 0 auto; border-radius: 999px; background: #c5ccc7; transition: background .15s ease; }
.quick-toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: white; transition: transform .15s ease; }
.quick-day-toggle > input:checked + .quick-toggle-track { background: #6a9276; }
.quick-day-toggle > input:checked + .quick-toggle-track::after { transform: translateX(12px); }
.quick-day-toggle em { color: #89958d; font-size: .58rem; font-style: normal; font-weight: 500; }
.quick-day-toggle small { color: #89958d; font-size: .58rem; font-weight: 500; }
.quick-day-toggle > input:checked ~ em { color: #4f765c; }
.quick-schedule-row input[type="time"] { width: 100%; min-width: 0; height: 30px; padding: 0 5px; border-radius: 6px; font-size: .68rem; }
.quick-schedule-row > span { color: #9aa59d; text-align: center; }
.quick-break { display: flex; align-items: center; gap: 4px; min-width: 0; color: #69786e; font-size: .6rem; white-space: nowrap; }
.quick-break input { width: auto; height: auto; }
.quick-schedule-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.barber-inline-schedule { background: #f8faf8; border: 1px solid #dfe7e1; }
.barber-schedule-editor { display: grid; gap: 8px; margin-top: 14px; }
.barber-schedule-row { display: grid; grid-template-columns: minmax(112px, 1.2fr) 112px 112px 100px minmax(128px, .9fr); gap: 8px; align-items: end; padding: 9px 10px; border: 1px solid #e2e8e3; border-radius: 9px; background: white; }
.barber-schedule-row label:not(.schedule-day-toggle) { display: grid; gap: 4px; color: #7c8780; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.barber-schedule-row input[type="time"], .barber-schedule-row input[type="text"] { height: 36px; padding-inline: 8px; border-radius: 7px; font-size: .75rem; }
.schedule-day-toggle, .schedule-break-toggle { display: flex; align-items: center; gap: 7px; min-height: 36px; color: var(--ink); font-size: .72rem; font-weight: 700; }
.schedule-day-toggle input, .schedule-break-toggle input { width: auto; height: auto; }
.schedule-break-toggle { font-size: .65rem; color: #63746a; }
@media (max-width: 700px) { .team-overview-strip { grid-template-columns: 1fr; } .quick-bulk-actions { width: 100%; margin-left: 0; } .quick-bulk-button { flex: 1; } }
@media (max-width: 980px) { .barber-profile-card { grid-template-columns: 1fr 1fr; } .barber-profile-card > section:nth-of-type(1), .barber-profile-actions { grid-column: 1 / -1; } .barber-profile-actions { border-left: 0; padding-left: 0; } }
@media (max-width: 700px) { .barber-profile-card { grid-template-columns: 1fr; } .barber-profile-card > section:nth-of-type(1), .barber-profile-actions { grid-column: 1 / -1; grid-row: auto; } .barber-profile-actions { grid-template-columns: 1fr; border-left: 0; padding-left: 0; } .barber-schedule-row { grid-template-columns: 1fr 1fr; } .barber-schedule-row .schedule-day-toggle { grid-column: 1 / -1; } .quick-schedule-settings { align-items: start; flex-direction: column; } .quick-schedule-row { grid-template-columns: 1fr 1fr 12px 1fr; } .quick-break { grid-column: 1 / -1; } }
.admin-shop-row { width: 100%; min-height: 84px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-areas: "avatar main state" "avatar main edit"; align-items: center; gap: 0 13px; padding: 14px 18px; border: 0; border-bottom: 1px solid #e7e4de; background: white; color: var(--ink); text-align: left; }
.admin-shop-row:last-child { border-bottom: 0; }
.admin-shop-row:hover, .admin-shop-row.selected { background: #f7f5f1; }
.admin-shop-row.selected { box-shadow: inset 3px 0 0 var(--accent); }
.shop-initial { grid-area: avatar; width: 42px; height: 42px; display: grid; place-items: center; background: var(--ink); color: white; font-weight: 700; }
.barber-avatar { background: var(--accent); font-size: .78rem; }
.admin-shop-main { grid-area: main; min-width: 0; display: grid; gap: 3px; }
.admin-shop-main strong, .admin-shop-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-shop-main strong { font-size: .9rem; }
.admin-shop-main small { color: var(--muted); font-size: .72rem; }
.shop-state { grid-area: state; align-self: end; color: var(--success); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.shop-state.inactive { color: #918d86; }
.edit-symbol { grid-area: edit; align-self: start; color: #858078; font-size: .66rem; text-decoration: underline; text-underline-offset: 3px; }
.row-actions { grid-area: edit; align-self: start; display: flex; gap: 10px; }
.row-actions .edit-symbol { align-self: auto; }
.delete-symbol { color: #b64a43; font-size: .66rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.delete-symbol:hover { color: var(--accent); }
.shop-editor { box-shadow: 0 12px 36px rgba(23, 21, 18, .06); }
.status-toggle { display: flex; align-items: center; gap: 10px; color: #4f4b45; cursor: pointer; font-size: .73rem; font-weight: 600; }
.status-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.status-toggle input:checked + .switch { background: var(--ink); }
.status-toggle input:checked + .switch::after { transform: translateX(16px); }
.status-toggle input:focus-visible + .switch { outline: 3px solid rgba(217,50,42,.35); outline-offset: 3px; }
.editor-section { padding: 25px 24px 28px; border-bottom: 1px solid #e7e4de; }
.editor-section-title { margin: 0 0 18px; color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.editor-fields { display: grid; gap: 17px; }
.editor-fields.two-columns { grid-template-columns: 1fr 1fr; }
.editor-fields label, .price-fields label { display: grid; gap: 7px; color: #4a4742; font-size: .72rem; font-weight: 700; }
.editor-fields .full-field { grid-column: 1 / -1; }
.price-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.money-input { position: relative; display: block; }
.money-input > span { position: absolute; left: 13px; top: 50%; z-index: 1; transform: translateY(-50%); color: #77726b; font-weight: 600; }
.money-input input { padding-left: 30px; }
.editor-error { min-height: 18px; margin: 16px 24px 0; color: var(--accent); }
.editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 20px 24px 24px; }
.editor-actions .confirm-button { min-height: 46px; padding: 0 20px; }
.secondary-light-button { min-height: 46px; border: 1px solid #bcb8b0; border-radius: var(--radius); background: white; color: var(--ink); padding: 0 18px; font-weight: 600; }
.secondary-light-button:hover { border-color: var(--ink); }
.action-link { display: inline-grid; place-items: center; text-decoration: none; }
.service-options { display: grid; gap: 8px; }
.service-option { min-height: 58px; display: grid; grid-template-columns: minmax(150px, 1fr) 150px; align-items: center; gap: 11px; padding: 8px 10px; border: 1px solid #dedbd5; }
.service-enabled { min-height: 40px; display: flex; align-items: center; gap: 11px; cursor: pointer; }
.service-enabled input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.service-enabled input:checked + .mini-check { border-color: var(--ink); background: var(--ink); color: white; }
.service-enabled input:focus-visible + .mini-check { outline: 3px solid rgba(217,50,42,.35); outline-offset: 2px; }
.service-option-name { font-size: .78rem; font-weight: 700; }
.service-option .money-input input { height: 40px; }
.service-option .money-input input:disabled { background: #efede8; color: #aaa69f; }
.service-help { margin: 13px 0 0; color: var(--muted); font-size: .72rem; }
.catalog-empty { display: grid; gap: 4px; padding: 30px 22px; color: var(--muted); font-size: .76rem; text-align: center; }
.catalog-empty strong { color: var(--ink); font-size: .86rem; }

@media (max-width: 950px) {
  .shops-admin-grid, .team-admin-grid { grid-template-columns: 1fr; }
  .overview-cards, .report-grid { grid-template-columns: repeat(2, 1fr); }
  .overview-lower { grid-template-columns: 1fr; }
  .schedule-target-controls { min-width: 0; width: 100%; }
}

@media (max-width: 620px) {
  .admin-page .panel-topbar { height: 64px; }
  .admin-page .panel-content { padding-top: 36px; }
  .overview-cards, .report-grid { grid-template-columns: 1fr; }
  .inline-form { flex-direction: column; }
  .reservation-row { grid-template-columns: 1fr 1fr; }
  .shops-heading { align-items: stretch; }
  .new-shop-button { width: 100%; }
  .catalog-heading, .editor-heading { align-items: flex-start; }
  .editor-heading { flex-direction: column; }
  .editor-fields.two-columns, .price-fields { grid-template-columns: 1fr; }
  .editor-fields .full-field { grid-column: auto; }
  .editor-actions { align-items: stretch; flex-direction: column-reverse; }
  .editor-actions button { width: 100%; }
  .editor-actions .action-link { width: 100%; }
  .service-option { grid-template-columns: 1fr; }
  .service-option .money-input { grid-column: 1 / -1; }
  .target-selectors { grid-template-columns: 1fr; }
}

/* Navegación modular: los accesos funcionan como paneles de trabajo */
.panel-shell { grid-template-columns: 300px minmax(0, 1fr); }
.panel-sidebar {
  gap: 8px;
  padding: 26px 18px 24px;
  background: #ebe8e2;
}
.sidebar-label {
  margin: 0 4px 7px;
  color: #75716a;
  font-size: .65rem;
  letter-spacing: .16em;
}
.sidebar-link {
  min-height: 66px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid #d5d1c9;
  border-radius: 5px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.sidebar-link:hover {
  border-color: #a8a39a;
  background: white;
  transform: translateY(-1px);
}
.sidebar-link:focus-visible {
  outline: 3px solid rgba(217, 50, 42, .28);
  outline-offset: 2px;
}
.sidebar-link .nav-panel-index {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 1px solid #d5d1c9;
  color: #8b867e;
  font-size: .67rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.sidebar-link .nav-panel-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: inherit;
}
.sidebar-link .nav-panel-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: .83rem;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-link .nav-panel-copy small {
  overflow: hidden;
  color: #817c74;
  font-size: .66rem;
  font-weight: 500;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-link.active {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
  box-shadow: 0 9px 18px rgba(22, 22, 22, .12);
}
.sidebar-link.active .nav-panel-index {
  border-right-color: #484848;
  color: #ef756e;
}
.sidebar-link.active .nav-panel-copy small { color: #aaa8a4; }
.sidebar-link-switch { margin-top: 4px; border-style: dashed; }
.sidebar-note { padding: 16px 5px 0; }
.panel-content { scroll-margin-top: 92px; }

/* Navegación por módulos: un panel visible y transición lateral funcional */
.panel-shell > .panel-content[hidden] { display: none !important; }
.panel-route-enter.panel-route-forward { animation: panel-slide-forward 220ms cubic-bezier(0, 0, .2, 1) both; }
.panel-route-enter.panel-route-backward { animation: panel-slide-backward 220ms cubic-bezier(0, 0, .2, 1) both; }
@keyframes panel-slide-forward {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes panel-slide-backward {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
.sidebar-link::after {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  background: currentColor;
  opacity: 0;
  transform: scaleY(.25);
  transition: opacity 120ms ease, transform 200ms cubic-bezier(0, 0, .2, 1);
}
.sidebar-link { position: relative; overflow: hidden; }
.sidebar-link .nav-panel-index,
.sidebar-link .nav-panel-copy { transition: transform 200ms cubic-bezier(0, 0, .2, 1); }
.sidebar-link.active::after { opacity: 1; transform: scaleY(1); }
.sidebar-link.active .nav-panel-index,
.sidebar-link.active .nav-panel-copy { transform: translateX(3px); }

/* Un modo de trabajo independiente para cada acceso del panel de barbería */
.team-panel[data-view="services"] .team-admin-grid { grid-template-columns: minmax(260px, .65fr) minmax(500px, 1.35fr); }
.team-panel[data-view="services"] .shop-editor { border-top-color: var(--accent); }
.team-panel[data-view="services"] #newLocalBarberButton { display: none; }
.panel-content#horarios[data-view="dias-especiales"] .settings-section:first-child,
.panel-content#horarios[data-view="dias-especiales"] .schedule-preview { display: none; }
.panel-content#horarios[data-view="dias-especiales"] .panel-grid { grid-template-columns: minmax(0, 920px); }
.panel-content#horarios[data-view="dias-especiales"] #dias-especiales { display: block; }
.panel-content#horarios:not([data-view="dias-especiales"]) #dias-especiales { display: none; }
.panel-content#horarios[data-view="colacion"] .day-times { opacity: .48; }
.panel-content#horarios[data-view="colacion"] .lunch-row {
  margin-top: 9px;
  padding: 12px;
  border: 1px solid #e2bbb7;
  background: #fff8f7;
}

@media (max-width: 950px) {
  .team-panel[data-view="services"] .team-admin-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-route-enter.panel-route-forward,
  .panel-route-enter.panel-route-backward { animation: panel-fade 120ms ease-out both; }
  .sidebar-link .nav-panel-index,
  .sidebar-link .nav-panel-copy,
  .sidebar-link::after { transition: none; }
  @keyframes panel-fade { from { opacity: 0; } to { opacity: 1; } }
}

.admin-page .panel-shell { grid-template-columns: 300px minmax(0, 1fr); }
.admin-page .panel-sidebar { gap: 8px; padding: 26px 18px 24px; }
.admin-page .sidebar-link {
  border: 1px solid #2f3a44;
  border-radius: 5px;
  background: #17212a;
  color: #edf0f2;
}
.admin-page .sidebar-link:hover {
  border-color: #56636e;
  background: #1d2832;
}
.admin-page .sidebar-link .nav-panel-index {
  border-right-color: #34414b;
  color: #7f8c96;
}
.admin-page .sidebar-link .nav-panel-copy small { color: #94a0a9; }
.admin-page .sidebar-link .nav-panel-copy { color: inherit; }
.admin-page .sidebar-link .nav-panel-copy strong { color: inherit; }
.admin-page .sidebar-link.active {
  border-color: #f3f5f6;
  background: #f3f5f6;
  color: #111820;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .2);
}
.admin-page .sidebar-link.active .nav-panel-index {
  border-right-color: #cfd5d9;
  color: var(--admin-gold);
}
.admin-page .sidebar-link.active .nav-panel-copy small { color: #69747d; }
.admin-page .sidebar-link-switch { border-color: #70613e; background: #1b2329; }
.admin-page .sidebar-link-switch .nav-panel-index { color: var(--admin-gold); }

@media (max-width: 1050px) {
  .panel-shell, .admin-page .panel-shell { grid-template-columns: 1fr; }
  .panel-shell > .panel-sidebar {
    grid-column: 1;
    grid-row: auto;
  }
  .panel-sidebar, .admin-page .panel-sidebar {
    position: sticky;
    top: 74px;
    z-index: 8;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 14px 11px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
  }
  .admin-page .panel-sidebar { top: 80px; border-bottom-color: #303a43; }
  .sidebar-label, .sidebar-note { display: none; }
  .sidebar-link {
    flex: 0 0 220px;
    min-height: 60px;
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 9px 11px;
  }
  .sidebar-link-switch { margin-top: 0; }
  .panel-content { grid-column: 1; scroll-margin-top: 164px; }
}

@media (max-width: 620px) {
  .panel-sidebar, .admin-page .panel-sidebar { top: 64px; }
  .sidebar-link { flex-basis: 194px; }
  .sidebar-link .nav-panel-copy strong { font-size: .78rem; }
  .panel-content { scroll-margin-top: 154px; }
}

/* Cabecera invertida y fija: el blanco del archivo de logo se integra al fondo */
.topbar,
.panel-topbar,
.admin-page .panel-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 74px;
  border-bottom: 1px solid #dfe2e4;
  background: #fff;
  color: #121820;
  box-shadow: 0 4px 18px rgba(18, 24, 32, .06);
}
.brand-logo {
  width: 142px;
  height: 54px;
  object-fit: contain;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.topbar nav a,
.topbar .plain-button,
.public-link { color: #303942; }
.topbar nav a:hover,
.topbar .plain-button:hover,
.public-link:hover { color: var(--accent); }
.panel-product {
  border-left-color: #d9dde0;
  color: #4f5a64;
}
.live-pill { background: #e1f1e9; color: #196443; }

/* Panel de barbería: navegación oscura con rojo Corta */
.panel-page:not(.admin-page) .panel-sidebar {
  border-right-color: #3b3034;
  background: #211b1e;
  color: white;
}
.panel-page:not(.admin-page) .sidebar-label { color: #b9abad; }
.panel-page:not(.admin-page) .sidebar-link {
  border-color: #43363b;
  background: #2a2326;
  color: #f7f4f4;
}
.panel-page:not(.admin-page) .sidebar-link:hover {
  border-color: #70565d;
  background: #352b2f;
}
.panel-page:not(.admin-page) .sidebar-link .nav-panel-index {
  border-right-color: #4b3c41;
  color: #b7a5aa;
}
.panel-page:not(.admin-page) .sidebar-link .nav-panel-copy { color: inherit; }
.panel-page:not(.admin-page) .sidebar-link .nav-panel-copy strong { color: inherit; }
.panel-page:not(.admin-page) .sidebar-link .nav-panel-copy small { color: #b9aaae; }
.panel-page:not(.admin-page) .sidebar-link.active {
  border-color: #df4a40;
  background: #d64136;
  color: white;
  box-shadow: 0 12px 24px rgba(128, 31, 26, .28);
}
.panel-page:not(.admin-page) .sidebar-link.active .nav-panel-index {
  border-right-color: rgba(255,255,255,.28);
  color: white;
}
.panel-page:not(.admin-page) .sidebar-link.active .nav-panel-copy small { color: #ffe2df; }
.panel-page:not(.admin-page) .sidebar-note { border-top-color: #4a3b40; color: #b9aaae; }
.panel-page:not(.admin-page) .sidebar-note strong { color: white; }

/* Administración: navegación clara, azul grafito y acento dorado */
.admin-page .panel-sidebar {
  border-right-color: #cbd3d9;
  background: #e9eef1;
  color: #15212b;
}
.admin-page .sidebar-label { color: #66737d; }
.admin-page .sidebar-link {
  border-color: #ced6dc;
  background: rgba(255,255,255,.82);
  color: #17232d;
}
.admin-page .sidebar-link:hover {
  border-color: #9daab3;
  background: white;
  color: #101a22;
}
.admin-page .sidebar-link .nav-panel-index {
  border-right-color: #d5dce1;
  color: #84919a;
}
.admin-page .sidebar-link .nav-panel-copy small { color: #6e7a83; }
.admin-page .sidebar-link.active {
  border-color: #15212b;
  background: #15212b;
  color: white;
  box-shadow: 0 12px 24px rgba(21, 33, 43, .18);
}
.admin-page .sidebar-link.active .nav-panel-index {
  border-right-color: #3d4851;
  color: #dfb75f;
}
.admin-page .sidebar-link.active .nav-panel-copy small { color: #b6c0c7; }
.admin-page .sidebar-link-switch { border-color: #c7a654; background: #fffaf0; }
.admin-page .sidebar-link-switch .nav-panel-index { color: #9a7422; }
.admin-page .sidebar-note { border-top-color: #cbd3d9; color: #66737d; }
.admin-page .sidebar-note strong { color: #15212b; }

/* Horarios: controles más legibles y vista previa operativa */
.day-row { min-height: 126px; }
.day-controls { min-width: 390px; }
.modern-time { width: 132px; height: 46px; }
.modern-time svg {
  left: 12px;
  width: 17px;
  height: 17px;
  stroke: var(--accent);
}
.modern-time select {
  padding: 0 30px 0 39px;
  border-color: #c3c8cc;
  background: #f9fafb;
  box-shadow: inset 34px 0 0 #f0f2f3;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.modern-time select:hover { border-color: #7b858d; background: white; }
.modern-time select:focus-visible { border-color: var(--accent); }
.lunch-times .modern-time { width: 120px; height: 38px; }
.lunch-row { border-top-color: #d8dde0; }
.time-divider { color: #717a82; font-weight: 700; }
.schedule-preview { top: 94px; background: #17212a; }
.preview-slots { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.preview-slots span {
  min-height: 54px;
  align-content: center;
  gap: 1px;
  border-color: #485660;
  background: #1f2b35;
}
.preview-slots span small { color: #8fa39a; font-size: .52rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.preview-slots span strong { color: white; font-size: .88rem; font-variant-numeric: tabular-nums; }

/* Calendario del componente adaptado al panel */
.panel-date-picker { position: relative; }
.panel-calendar-trigger {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  padding: 8px 11px;
  border: 1px solid #4b5963;
  border-radius: var(--radius);
  background: #202c36;
  color: white;
  text-align: left;
}
.panel-calendar-trigger:hover,
.panel-calendar-trigger[aria-expanded="true"] { border-color: #df665e; }
.panel-calendar-trigger .calendar-trigger-icon { color: #ef756e; }
.panel-calendar-trigger strong {
  overflow: hidden;
  font-size: .72rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}
.panel-calendar {
  top: calc(100% + 9px);
  right: 0;
  width: 342px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.panel-calendar .calendar-day { color: var(--ink); }
.panel-calendar .calendar-day.selected { color: white; }
.panel-calendar .calendar-help { text-transform: none; letter-spacing: normal; }

@media (max-width: 1050px) {
  .admin-page .panel-sidebar { top: 74px; border-bottom-color: #cbd3d9; }
  .panel-page:not(.admin-page) .panel-sidebar { border-bottom-color: #3b3034; }
}

@media (max-width: 800px) {
  .day-controls { min-width: 0; }
  .schedule-preview { top: 0; }
}

@media (max-width: 620px) {
  .topbar, .panel-topbar, .admin-page .panel-topbar { height: 64px; }
  .brand-logo { width: 118px; height: 46px; }
  .panel-calendar { left: 0; right: auto; width: min(342px, calc(100vw - 60px)); }
  .modern-time { width: 100%; }
}

/* Portada pública: superficies más suaves y con profundidad, sin perder el carácter editorial */
body:not(.panel-page) {
  --radius: 14px;
  background:
    radial-gradient(circle at 8% 18%, rgba(217, 50, 42, .055), transparent 28rem),
    radial-gradient(circle at 92% 56%, rgba(197, 154, 69, .075), transparent 32rem),
    #f3f4f3;
}
body:not(.panel-page) .hero {
  border-radius: 0 0 28px 28px;
  box-shadow: 0 18px 42px rgba(20, 24, 26, .12);
}
body:not(.panel-page) .hero-content { padding-left: clamp(4px, 1.4vw, 22px); }
body:not(.panel-page) .hero-cta { border-radius: 999px; padding-inline: 20px; }
body:not(.panel-page) .hero-proof { right: max(28px, calc((100% - 1160px)/2)); bottom: 34px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.16); }
body:not(.panel-page) .hero-proof span { padding: 15px 19px; background: rgba(16, 18, 19, .72); }
body:not(.panel-page) .booking-workspace { position: relative; z-index: 2; margin-top: 0; padding-top: 62px; }
body:not(.panel-page) .main-column { min-width: 0; }
body:not(.panel-page) .section-heading,
body:not(.panel-page) .booking-flow,
body:not(.panel-page) .search-controls,
body:not(.panel-page) .date-navigation,
body:not(.panel-page) .result-list,
body:not(.panel-page) .empty-state {
  position: relative;
  padding-inline: 24px;
  background: rgba(255,255,255,.82);
}
body:not(.panel-page) .section-heading { margin: 0; padding-top: 25px; padding-bottom: 20px; border-radius: 22px 22px 0 0; }
body:not(.panel-page) .booking-flow { margin: 0; padding-top: 0; padding-bottom: 0; border-top: 0; }
body:not(.panel-page) .search-controls { padding-top: 22px; padding-bottom: 22px; border-bottom: 0; }
body:not(.panel-page) .date-navigation { margin: 0; padding-top: 10px; padding-bottom: 20px; }
body:not(.panel-page) .result-list { border-radius: 0 0 22px 22px; padding-bottom: 15px; box-shadow: 0 18px 34px rgba(28, 34, 36, .07); }
body:not(.panel-page) .shop-row { margin: 0 0 10px; padding: 22px 0; border: 1px solid #e1e3e0; border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 7px 18px rgba(28,34,36,.045); }
body:not(.panel-page) .shop-row:last-child { border-bottom: 1px solid #e1e3e0; }
body:not(.panel-page) .shop-row > div:first-child { padding-left: 22px; }
body:not(.panel-page) .shop-row > div:last-child { padding-right: 22px; }
body:not(.panel-page) .slot-button { border-radius: 999px; background: #f7f8f7; }
body:not(.panel-page) .slot-button:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(20,24,26,.1); }
/* La regla de las pastillas públicas no debe pisar el estado elegido. */
body:not(.panel-page) .slot-button.selected,
body:not(.panel-page) .slot-button[aria-pressed="true"] { border-color: var(--accent-hover); background: var(--accent); color: white; box-shadow: 0 6px 14px rgba(216,58,50,.22); }
body:not(.panel-page) .summary { top: 100px; border-radius: 24px; box-shadow: 0 20px 42px rgba(20,24,26,.16); }
body:not(.panel-page) .booking-calendar { border-radius: 16px; }
body:not(.panel-page) .results-pagination { padding-inline: 24px; background: rgba(255,255,255,.82); border-radius: 0 0 22px 22px; }
.user-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: #f3f4f3; }
.user-page .topbar { background: white; color: var(--ink); border-bottom: 1px solid #dfe2e4; }
.user-page .topbar nav a, .user-page .plain-button { color: #303942; }
.user-page .topbar nav a:hover, .user-page .plain-button:hover, .user-page .current-link { color: var(--accent); }
.user-shell { width: min(980px, calc(100% - 40px)); margin: 0 auto; padding: 86px 0 110px; }
.user-heading { max-width: 680px; margin-bottom: 34px; }
.user-heading h1 { margin: 0; font-size: clamp(2.8rem, 6vw, 5rem); line-height: .95; letter-spacing: -.065em; }
.user-heading > p:last-child { max-width: 520px; margin: 18px 0 0; color: var(--muted); }
.user-card { overflow: hidden; border: 1px solid #d9dddc; border-radius: 22px; background: white; box-shadow: 0 18px 40px rgba(28,34,36,.09); }
.user-card-topline { display: flex; justify-content: space-between; padding: 18px 26px; border-bottom: 1px solid #e1e4e2; color: #68737c; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.user-status { color: var(--success); letter-spacing: 0; }
.user-status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: currentColor; }
.user-status.status-pending { color: #a36a17; }
.user-status.status-cancelled, .user-status.status-no_show { color: #b34843; }
.user-status.status-completed { color: #38745c; }
.user-booking-main { display: flex; justify-content: space-between; gap: 28px; padding: 30px 26px 24px; }
.user-booking-main h2 { margin: 5px 0 4px; font-size: 1.8rem; letter-spacing: -.04em; }
.user-booking-main p { margin: 0; color: var(--muted); }
.user-date-block { min-width: 210px; align-self: center; padding: 18px 20px; border-left: 3px solid var(--admin-gold, #c59a45); background: #f4f6f7; }
.user-date-block span { display: block; color: #68737c; font-size: .78rem; text-transform: capitalize; }
.user-date-block strong { display: block; margin-top: 6px; font-size: 2rem; letter-spacing: -.04em; }
.user-details { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 20px 26px; border-top: 1px solid #e1e4e2; border-bottom: 1px solid #e1e4e2; }
.user-details div { padding-right: 16px; border-right: 1px solid #e1e4e2; }
.user-details div + div { padding-left: 16px; }
.user-details div:last-child { border-right: 0; }
.user-details dt { color: #89939a; font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.user-details dd { margin: 5px 0 0; font-size: .85rem; font-weight: 700; }
.user-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 26px; }
.user-actions .user-new-booking { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.user-cancel { color: #c74840; border-color: #e0b3af; }
.user-policy-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 26px 24px; padding: 12px 14px; border: 1px solid #e2e5e3; border-radius: 10px; background: #f5f7f6; color: #69747a; }
.user-policy-note span { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 auto; border-radius: 50%; background: #dfe6e2; color: #59675f; font-size: .7rem; font-weight: 700; }
.user-policy-note p { margin: 0; font-size: .7rem; line-height: 1.45; }
.user-rating-form { display: grid; gap: 10px; margin: 0 26px 24px; padding: 18px; border: 1px solid #e1e4e2; border-radius: 14px; background: #f8f9f8; }
.user-rating-form .rating-form-title { color: var(--ink); }
.user-rating-form .rating-form-help { margin: -5px 0 0; color: #7a8587; font-size: .72rem; }
.user-rating-form textarea { border-color: #cdd3d1; background: white; color: var(--ink); }
.user-rating-form .rating-stars span { color: #aaa; }
.user-rating-form .rating-stars label:hover span, .user-rating-form .rating-stars input:checked + span { color: var(--admin-gold, #c59a45); }
.user-rating-form .secondary-button { color: var(--ink); border-color: #b9c1be; }
.user-empty { padding: 70px 30px; border: 1px solid #d9dddc; border-radius: 22px; background: white; text-align: center; box-shadow: 0 18px 40px rgba(28,34,36,.07); }
.user-empty-icon { color: var(--admin-gold, #c59a45); font-size: 2rem; }
.user-empty h2 { margin: 10px 0 6px; font-size: 1.7rem; }
.user-empty p { margin: 0 auto 24px; color: var(--muted); }
.user-empty .confirm-button { display: inline-flex; align-items: center; min-height: 46px; text-decoration: none; }
.cancel-dialog { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(15,20,22,.54); backdrop-filter: blur(4px); }
.cancel-dialog[hidden] { display: none; }
.cancel-dialog > div { width: min(440px, 100%); padding: 28px; border-radius: 18px; background: white; color: var(--ink); box-shadow: 0 26px 70px rgba(15,20,22,.26); }
.dialog-kicker { color: var(--accent); font-size: .66rem; font-weight: 700; letter-spacing: .14em; }
.cancel-dialog h2 { margin: 8px 0 8px; font-size: 1.45rem; letter-spacing: -.035em; }
.cancel-dialog p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }
.dialog-actions .confirm-button, .dialog-actions .secondary-button { min-height: 42px; padding-inline: 14px; }
.danger-button { background: #c74840; }
.danger-button:hover { background: #a83832; }

@media (max-width: 700px) {
  .user-shell { width: min(100% - 28px, 980px); padding: 54px 0 72px; }
  .user-booking-main { display: grid; padding-inline: 18px; }
  .user-date-block { min-width: 0; }
  .user-details { grid-template-columns: 1fr 1fr; gap: 16px 0; padding-inline: 18px; }
  .user-details div:nth-child(2) { border-right: 0; }
  .user-details div:nth-child(3) { padding-left: 0; }
  .user-actions { flex-direction: column-reverse; padding-inline: 18px; }
  .user-actions a, .user-actions button { width: 100%; }
  .user-rating-form { margin-inline: 18px; }
  .user-policy-note { margin-inline: 18px; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions button { width: 100%; }
}
.shop-card { margin: 0 0 12px; overflow: hidden; border: 1px solid #e1e3e0; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 7px 18px rgba(28,34,36,.045); }
.shop-card:last-child { margin-bottom: 0; }
.shop-card-header { display: grid; grid-template-columns: 112px minmax(0, 1fr) 290px; align-items: center; gap: 28px; padding: 28px 34px; border-bottom: 1px solid #e7e9e6; }
.shop-card-logo-wrap { display: grid; place-items: center; }
.shop-card-logo { width: 104px; height: 104px; flex: 0 0 auto; object-fit: contain; border: 1px solid #e1e3e0; border-radius: 20px; background: white; padding: 10px; }
.shop-card-initial { display: grid; place-items: center; background: #17202a; color: white; font-size: 1.2rem; font-weight: 700; }
.shop-card-header .shop-name-line h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.shop-card-main-info { min-width: 0; }
.shop-location { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: #7b8386; font-size: 1rem; }
.shop-location .location-icon { display: inline-grid; place-items: center; color: #8c9397; }
.location-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shop-card-main-info .map-link { margin-top: 12px; font-size: .9rem; }
.link-arrow { display: inline-block; margin-left: 4px; font-size: 1.25em; line-height: .7; }
.shop-card-side-meta { min-height: 100%; display: grid; align-content: start; justify-items: end; gap: 22px; padding-left: 0; border-left: 0; }
.shop-card-side-meta .rating { justify-self: end; font-size: 1.3rem; white-space: nowrap; }
.shop-card-side-meta .rating .star { font-size: 1.8rem; }
.shop-card-side-meta { flex: 0 0 auto; }
.shop-team-count { color: #7d8781; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.shop-team-toggle { min-height: 54px; border: 0; border-radius: 12px; padding: 0 20px; background: var(--accent); color: white; font-size: 1rem; font-weight: 700; }
.button-arrow { display: inline-block; margin-left: 12px; font-size: 1.35em; line-height: .7; vertical-align: -1px; }
.shop-card-actions { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
.shop-card-actions-bottom { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 16px 28px; border-bottom: 1px solid #e7e9e6; }
.shop-card-actions-bottom > .rating { justify-self: start; font-size: 1.25rem; white-space: nowrap; }
.shop-card-actions-bottom > .rating .star { font-size: 1.7rem; }
.shop-card-actions-bottom .shop-team-toggle { min-width: 180px; }
.shop-card-actions-bottom button[data-toggle-services] { background: #596761; color: white; }
.shop-card-actions-bottom button[data-toggle-services]:hover { background: #46534d; }
.shop-card-actions-bottom .shop-team-toggle:first-child { background: #eef1ef; color: var(--ink); font-size: .78rem; }
.shop-card-actions-bottom .shop-team-toggle:first-child:hover { background: #dfe5e1; }
.shop-card-actions .shop-team-toggle:first-child { background: #eef1ef; color: var(--ink); font-size: .78rem; }
.shop-card-actions .shop-team-toggle:first-child:hover { background: #dfe5e1; }
.shop-card-services { padding: 16px 24px; border-bottom: 1px solid #e7e9e6; background: #f7f9f7; }
.shop-card-services p { margin: 0 0 10px; color: #78837d; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.shop-card-services > div { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-card-services span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #d7dfd9; border-radius: 999px; background: white; color: var(--ink); font-size: .75rem; font-weight: 700; }
.shop-card-services small { color: #78837d; font-size: .7rem; font-weight: 600; }
.shop-card-services[hidden] { display: none; }
.shop-team-toggle:hover { background: var(--accent-hover); color: white; }
.shop-card-barbers[hidden], .shop-card-inline-form[hidden], .barber-inline-form[hidden] { display: none; }
.shop-card-barbers { padding: 2px 22px; }
.barber-availability { display: grid; grid-template-columns: minmax(170px, .55fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 17px 0; border-bottom: 1px solid #edf0ed; }
.barber-availability:last-child { border-bottom: 0; }
.barber-inline-form { grid-column: 1 / -1; margin: 14px 0 -4px; padding: 18px 20px 4px; border-top: 1px solid #dfe4df; background: #f5f7f5; }
.barber-inline-form > #summarySelection { padding: 0; }
.barber-inline-form .customer-form { width: 100%; min-width: 0; }
.barber-inline-form .customer-form label { min-width: 0; color: #65716f; }
.barber-inline-form .customer-form input { min-width: 0; }
.barber-inline-form .confirm-button { grid-column: 1 / -1; width: min(100%, 280px); justify-self: start; white-space: nowrap; }
.barber-card-info { display: grid; gap: 3px; }
.barber-card-info strong { font-size: .88rem; }
.barber-card-info small { color: var(--muted); font-size: .72rem; }
.home-service-badge { color: #4c8066; font-weight: 700; }
.checkbox-field { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px; text-transform: none !important; letter-spacing: normal !important; }
.checkbox-field input { width: 17px; height: 17px; }
.barber-availability .slots-label { margin: 0 0 7px; }
.booking-workspace.no-summary .shop-card-barbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 16px; }
.booking-workspace.no-summary .barber-availability { min-width: 0; padding: 13px 11px; border: 1px solid #e4e8e4; border-radius: 12px; background: #fbfcfb; }
.booking-workspace.no-summary .barber-availability:last-child { border-bottom: 1px solid #e4e8e4; }
.booking-workspace.no-summary .barber-availability.barber-selected { border-color: #c9a46a; background: #fffaf0; box-shadow: inset 3px 0 0 #c9a46a; }
.booking-workspace.no-summary .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  body:not(.panel-page) .booking-workspace { margin-top: 0; padding-top: 48px; }
  body:not(.panel-page) .summary { top: 0; }
  .shop-card-header { grid-template-columns: 88px minmax(0, 1fr) 220px; gap: 18px; padding: 22px 24px; }
  .shop-card-logo { width: 84px; height: 84px; }
}

@media (max-width: 620px) {
  body:not(.panel-page) .section-heading,
  body:not(.panel-page) .booking-flow,
  body:not(.panel-page) .search-controls,
  body:not(.panel-page) .date-navigation,
  body:not(.panel-page) .result-list,
  body:not(.panel-page) .empty-state,
  body:not(.panel-page) .results-pagination { padding-inline: 15px; }
  body:not(.panel-page) .hero { border-radius: 0 0 20px 20px; }
  body:not(.panel-page) .booking-flow li { padding-inline: 8px; }
  body:not(.panel-page) .booking-flow small { display: none; }
  body:not(.panel-page) .shop-row > div:first-child,
  body:not(.panel-page) .shop-row > div:last-child { padding-inline: 16px; }
  .shop-card-header, .booking-workspace.no-summary .shop-card-header { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .shop-card-logo, .booking-workspace.no-summary .shop-card-logo { width: 68px; height: 68px; border-radius: 14px; padding: 7px; }
  .shop-card-side-meta, .booking-workspace.no-summary .shop-card-side-meta { display: grid; grid-column: 1 / -1; min-height: 0; padding: 15px 0 0; border-top: 1px solid #e4e7e5; border-left: 0; }
  .shop-card-actions-bottom { grid-template-columns: 1fr; padding: 14px 16px; }
  .shop-card-actions-bottom > .rating { justify-self: start; }
  .shop-card-actions-bottom .shop-team-toggle { width: 100%; }
  .shop-card-actions { width: 100%; }
  .shop-card-barbers { padding-inline: 16px; }
  .shop-card-header .rating { font-size: .75rem; }
  .barber-availability { grid-template-columns: 1fr; gap: 9px; }
  .booking-workspace.no-summary .shop-card-barbers { grid-template-columns: 1fr; }
  .shop-card-side-meta { gap: 5px; }
  .shop-card-inline-form .customer-form, .barber-inline-form .customer-form { grid-template-columns: 1fr; }
  .shop-card-inline-form .customer-form label:first-child, .barber-inline-form .customer-form label:first-child { grid-column: auto; }
}

/* Sistema compartido: Barbería usa la misma superficie editorial que Administración */
.panel-page:not(.admin-page) {
  --admin-gold: var(--gold);
  --admin-canvas: #f1f4f2;
  --admin-line: #d4ddd8;
  --admin-rail: #17242b;
  background: var(--admin-canvas);
}
.panel-page:not(.admin-page) .panel-shell { background: var(--admin-canvas); }
.panel-page:not(.admin-page) .panel-sidebar {
  border-right-color: #27313a;
  background: var(--admin-rail);
  color: #f3f5f6;
}
.panel-page:not(.admin-page) .sidebar-label { color: #9aa4ad; }
.panel-page:not(.admin-page) .sidebar-link {
  border: 1px solid #2f3a44;
  border-radius: 0;
  background: #17212a;
  color: #d7dde1;
}
.panel-page:not(.admin-page) .sidebar-link:hover { border-color: #56636e; background: #18212a; color: white; }
.panel-page:not(.admin-page) .sidebar-link .nav-panel-index { border-right-color: #34414b; color: #6f7b85; }
.panel-page:not(.admin-page) .sidebar-link .nav-panel-copy small { color: #94a0a9; }
.panel-page:not(.admin-page) .sidebar-link.active {
  border-color: #27313a;
  background: #1a232c;
  color: white;
  box-shadow: inset 3px 0 0 var(--admin-gold);
}
.panel-page:not(.admin-page) .sidebar-link.active .nav-panel-index { border-right-color: #3d4851; color: var(--admin-gold); }
.panel-page:not(.admin-page) .sidebar-link.active .nav-panel-copy small { color: #b6c0c7; }
.panel-page:not(.admin-page) .sidebar-note { border-top-color: #303a43; color: #98a2aa; }
.panel-page:not(.admin-page) .sidebar-note strong { color: white; }
.panel-page:not(.admin-page) .panel-content { border-bottom: 1px solid var(--admin-line); background: transparent; }
.panel-page:not(.admin-page) .step-label,
.panel-page:not(.admin-page) .section-number,
.panel-page:not(.admin-page) .editor-section-title { color: #9b7225; }
.panel-page:not(.admin-page) .panel-heading > div > p:last-child { color: #68737c; }
.panel-page:not(.admin-page) .shop-identity-strip,
.panel-page:not(.admin-page) .shop-info-form,
.panel-page:not(.admin-page) .schedule-form,
.panel-page:not(.admin-page) .team-admin-grid > *,
.panel-page:not(.admin-page) .reservations-panel .local-reservations-list {
  border-color: var(--admin-line);
  box-shadow: none;
}
.panel-page:not(.admin-page) .shop-identity-strip,
.panel-page:not(.admin-page) .shop-info-form,
.panel-page:not(.admin-page) .schedule-form { background: white; }
.panel-page:not(.admin-page) .shop-identity-strip { border-top: 2px solid #17202a; }
.panel-page:not(.admin-page) .settings-section,
.panel-page:not(.admin-page) .team-panel,
.panel-page:not(.admin-page) .reservations-panel { border-color: var(--admin-line); }
.panel-page:not(.admin-page) .schedule-preview { background: #17212a; box-shadow: none; }
.panel-page:not(.admin-page) .confirm-button,
.panel-page:not(.admin-page) .new-shop-button { background: var(--admin-gold); color: #111820; }
.panel-page:not(.admin-page) .confirm-button:hover,
.panel-page:not(.admin-page) .new-shop-button:hover { background: #b48732; }
.panel-page:not(.admin-page) .outline-button:hover,
.panel-page:not(.admin-page) .secondary-light-button:hover { border-color: #94702d; }
.panel-page:not(.admin-page) .admin-shop-row:hover,
.panel-page:not(.admin-page) .admin-shop-row.selected { background: #eef1f3; }
.panel-page:not(.admin-page) .admin-shop-row.selected { box-shadow: inset 3px 0 0 var(--admin-gold); }
.panel-page:not(.admin-page) .shop-initial { background: #17202a; }
.panel-page:not(.admin-page) .panel-calendar-trigger { border-color: #4b5963; background: #202c36; }

/* Navegación pública móvil: el logo queda centrado y los enlaces viven en un menú limpio. */
.mobile-menu-toggle { color: #303942; border-color: #cbd3d9; background: #f7f8f9; }
@media (max-width: 620px) {
  .topbar.menu-open nav a[href="#agenda"],
  .topbar.menu-open nav .access-link,
  .topbar.menu-open nav .plain-button { display: flex; font-size: .82rem; }
}

@media (max-width: 1050px) {
  .panel-page:not(.admin-page) .panel-sidebar { border-bottom-color: #303a43; }
}

/* En móvil el panel tiene una única navegación vertical y fácil de escanear. */
@media (max-width: 620px) {
  .panel-page .panel-sidebar,
  .admin-page .panel-sidebar {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    overflow: visible;
    padding: 12px;
  }
  .panel-page .panel-sidebar .sidebar-label,
  .admin-page .panel-sidebar .sidebar-label { display: block; margin: 0 4px 3px; font-size: .66rem; letter-spacing: .14em; }
  .panel-page .panel-sidebar .sidebar-link,
  .admin-page .panel-sidebar .sidebar-link { width: 100%; min-height: 48px; flex: none; grid-template-columns: 34px minmax(0, 1fr); padding: 8px 10px; border-radius: 8px; }
  .panel-page .panel-sidebar .nav-panel-copy strong,
  .admin-page .panel-sidebar .nav-panel-copy strong { font-size: .78rem; }
  .panel-page .panel-sidebar .nav-panel-copy small,
  .admin-page .panel-sidebar .nav-panel-copy small { display: block; font-size: .64rem; }
  .panel-page .panel-sidebar .sidebar-note,
  .admin-page .panel-sidebar .sidebar-note { display: none; }
}

/* Hero móvil: una jerarquía fuerte, pero sin cortes forzados ni letras gigantes. */
@media (max-width: 620px) {
  body:not(.panel-page) .hero h1 {
    max-width: 350px;
    font-size: clamp(2.3rem, 10vw, 2.7rem);
    line-height: .98;
    letter-spacing: -.05em;
  }
  body:not(.panel-page) .hero h1 br { display: none; }
  body:not(.panel-page) .hero-content > p:last-child { max-width: 300px; margin-top: 20px; font-size: .98rem; line-height: 1.35; }
}

/* En móvil la portada es visual: la fotografía respira y el contenido empieza debajo. */
@media (max-width: 620px) {
  body:not(.panel-page) .hero {
    min-height: 0;
    height: auto;
    aspect-ratio: 1672 / 941;
  }
  body:not(.panel-page) .hero > img { object-position: center center; }
  body:not(.panel-page) .hero-shade { background: linear-gradient(90deg, rgba(10,10,10,.12), rgba(10,10,10,.02)); }
  body:not(.panel-page) .hero-content { display: none; }
}