@font-face {
  font-family: 'DM Sans';
  src: url('./assets/dm-sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('./assets/instrument-serif.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --accent: #235e51;
  --paper: #f7f5ef;
  --surface: #fffefa;
  --ink: #202c28;
  --muted: #5c655f;
  --border: #d5d9d0;
  --font-body: 'DM Sans', sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; }
body.reposteria { --accent: #a03f32; }
body.turnos { --accent: #215a85; }
body.cotizaciones { --accent: #795115; }
body.tandas { --accent: #235e51; }
button, input, select, textarea { font: inherit; }
button, a, select, summary, input[type='checkbox'], input[type='radio'] { -webkit-tap-highlight-color: transparent; }
button, select, summary, input[type='checkbox'], input[type='radio'] { cursor: pointer; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, .button {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: .7rem 1.05rem;
  background: var(--accent);
  color: white;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
button:hover, .button:hover { box-shadow: inset 0 0 0 100px #00000012; }
button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.secondary, button[type='reset'] { background: var(--surface); color: var(--accent); border-color: var(--border); }
.danger { background: #fff1ed; color: #973a2d; border-color: #e9c5bc; }
.text-button { background: transparent; color: var(--accent); text-decoration: underline; }
:focus-visible { outline: 3px solid #176ba5; outline-offset: 4px; }
input, select, textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid #a5ada5;
  border-radius: 9px;
  padding: .65rem .8rem;
  color: var(--ink);
  background: #fff;
  font-size: 1rem;
  line-height: 1.4;
}
textarea { resize: vertical; min-height: 100px; }
input[type='checkbox'], input[type='radio'] { width: 22px; min-height: 22px; accent-color: var(--accent); }
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: #a33328; box-shadow: 0 0 0 1px #a33328; }
label { display: block; font-weight: 600; font-size: .91rem; }
label > input, label > select, label > textarea { margin-top: .45rem; }
fieldset { min-width: 0; border: 1px solid var(--border); border-radius: 14px; margin: 0; padding: 1.2rem; }
legend { padding: 0 .4rem; font-weight: 600; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 5vw, 4.25rem); letter-spacing: -.035em; line-height: 1.04; margin-bottom: .8rem; }
h2 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -.02em; }
h3 { font-size: 1rem; line-height: 1.35; }
p { margin-bottom: 1rem; }
small, .help, .hint, .muted { color: var(--muted); font-size: .86rem; }
.help, .hint { margin-top: .4rem; }
.error, .field-error { color: #a33328; font-size: .88rem; margin-top: .4rem; }
.money, output, .amount { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px; background: var(--surface); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.topbar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.35rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
}
.topbar > a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; text-decoration: none; }
#workspace { max-width: 1080px; margin: 0 auto; padding: 2.75rem 2rem 5rem; }
.app-header { display: flex; align-items: flex-start; gap: 1.15rem; margin-bottom: 2.5rem; }
.app-header > div { min-width: 0; }
.app-header p { max-width: 620px; color: var(--muted); font-size: 1.04rem; margin-bottom: 0; }
.mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 56px; height: 56px; border: 1px solid currentColor; border-radius: 16px; color: var(--accent); }
.mark svg { width: 32px; height: 32px; }
.app-header .mark { margin-top: .25rem; }
.card, .panel { background: var(--surface); padding: 1.6rem; border: 1px solid var(--border); border-radius: 18px; }
.panel + .panel, .card + .card { margin-top: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.3rem; }
.field { display: grid; gap: .4rem; min-width: 0; }
.form-grid, .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field.full, .full-width { grid-column: 1 / -1; }
.notice, .connection-status { padding: .85rem 1rem; border: 1px solid #b5c7bb; border-radius: 10px; background: #edf3ec; color: #294739; font-size: .9rem; }
.notice { margin-top: 1rem; }
.connection-status { max-width: 1016px; margin: 1rem auto; }
.connection-status.warning { color: #6b421c; background: #fff5e5; border-color: #ddc8aa; }
.pwa-dialog { max-width: min(480px, calc(100vw - 32px)); width: 100%; padding: 1.6rem; border: 1px solid var(--border); border-radius: 18px; color: var(--ink); background: var(--surface); box-shadow: 0 20px 80px #1d33272b; }
.pwa-dialog::backdrop { background: #15272073; }
.pwa-dialog ol { padding-left: 1.5rem; }
.pwa-dialog li + li { margin-top: .6rem; }
.pwa-dialog form { margin: 0; }


/* Catalogue compositions keep the app's action easy to identify. */
.hub { max-width: 1240px; margin: 0 auto; padding: 2rem 2rem 3rem; }
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.35rem; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-size: .86rem; font-weight: 600; letter-spacing: -.02em; }
.hub-jump { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; font-size: .86rem; color: var(--ink); text-decoration: none; }
.hub-header { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 2rem; padding: 3rem 0 2.7rem; }
.hub-header h1 { font-size: clamp(3.4rem, 6.4vw, 5.3rem); line-height: 1.02; margin: 0; }
.hub-header p { max-width: 340px; margin: 0 0 .35rem auto; font-size: 1.05rem; line-height: 1.65; color: var(--muted); }
.hub-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; }
.hub-card { min-width: 0; position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; min-height: 330px; padding: 1.75rem 2rem 1.2rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--paper)); border-radius: 20px; color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color 180ms ease, background-color 180ms ease; background: var(--surface); }
.hub-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--card-tint) 35%, var(--surface)); }
.hub-card--reposteria, .hub-card--tandas { grid-column: span 7; background: var(--card-tint); }
.hub-card--turnos, .hub-card--cotizaciones { grid-column: span 5; }
.hub-card-copy { position: relative; z-index: 1; width: 65%; }
.hub-card .mark { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 1.2rem; background: var(--surface); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.hub-card .mark svg { width: 25px; height: 25px; }
.hub-card h2 { font-family: var(--font-body); font-weight: 600; font-size: 1.7rem; letter-spacing: -.055em; line-height: 1.13; margin-bottom: .85rem; max-width: 310px; text-wrap: balance; }
.hub-card p { color: #4e5b54; font-size: .94rem; line-height: 1.6; margin-bottom: 1.5rem; }
.hub-art { position: absolute; width: 180px; right: .6rem; top: 3.5rem; color: var(--accent); transform: rotate(-4deg); }
.hub-art > svg { display: block; width: 100%; height: auto; }
.hub-card--turnos .hub-art { width: 140px; right: .7rem; top: 2.15rem; transform: rotate(5deg); }
.hub-card--cotizaciones .hub-art { width: 145px; right: .6rem; top: 2.8rem; transform: rotate(4deg); }
.hub-card--tandas .hub-art { width: 175px; transform: none; }
.hub-card--turnos .hub-card-copy, .hub-card--cotizaciones .hub-card-copy { width: 67%; }
.hub-open { position: relative; z-index: 1; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-weight: 600; font-size: .91rem; }
.hub-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 50%; }
.hub-open svg { width: 19px; height: 19px; }
.hub-footer { margin-top: 1.5rem; color: var(--muted); font-size: .84rem; max-width: 650px; }
.related-apps { margin-top: 3rem; padding-top: 1.7rem; border-top: 1px solid var(--border); }
.related-apps-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .65rem 1.5rem; margin-bottom: 1rem; }
.related-apps h2 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: -.015em; margin: 0; }
.related-apps-heading > a { font-size: .84rem; }
.related-apps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; padding: 0; margin: 0; list-style: none; }
.related-app { display: flex; align-items: flex-start; gap: .65rem; height: 100%; padding: .85rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 160ms ease; }
.related-app:hover { border-color: var(--related-accent); }
.related-app-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--related-accent); }
.related-app-icon svg { width: 26px; height: 26px; }
.related-app strong { display: block; font-size: .88rem; line-height: 1.35; font-weight: 600; }
.related-app small { display: block; font-size: .79rem; margin-top: .3rem; line-height: 1.45; }
@media (min-width: 651px) and (max-width: 1050px) {
  .hub-card { padding: 1.4rem; min-height: 345px; }
  .hub-card h2 { font-size: 1.45rem; }
  .hub-card-copy, .hub-card--turnos .hub-card-copy, .hub-card--cotizaciones .hub-card-copy { width: 100%; }
  .hub-card .mark { margin-bottom: 1.25rem; }
  .hub-art, .hub-card--turnos .hub-art, .hub-card--cotizaciones .hub-art, .hub-card--tandas .hub-art { width: 95px; right: .5rem; top: .35rem; opacity: .9; }
  .hub-card h2 { max-width: 260px; }
}
@media (max-width: 650px) {
  .topbar { padding: .8rem 1rem; }
  #workspace { padding: 1.8rem 1rem 4rem; }
  .app-header { gap: .8rem; margin-bottom: 1.8rem; }
  .app-header .mark { width: 42px; height: 42px; border-radius: 12px; }
  .app-header .mark svg { width: 26px; height: 26px; }
  .app-header h1 { font-size: 2.5rem; }
  .app-header p { font-size: .95rem; }
  .card, .panel { padding: 1.1rem; border-radius: 14px; }
  .form-grid, .two-col { grid-template-columns: 1fr; }
  .connection-status { margin: .8rem 1rem; }
  .hub { padding: 1rem 1rem 2rem; }
  .hub-top { padding-bottom: .8rem; }
  .brand { font-size: .8rem; gap: .55rem; }
  .hub-jump { font-size: .8rem; }
  .hub-header { grid-template-columns: 1fr; gap: .9rem; padding: 1.7rem 0 1.6rem; }
  .hub-header h1 { font-size: 3.4rem; }
  .hub-header p { max-width: 360px; margin: 0; font-size: .95rem; line-height: 1.6; }
  .hub-grid { grid-template-columns: 1fr; gap: 1rem; }
  .hub-card { grid-column: auto; min-height: 280px; padding: 1.25rem 1.3rem .8rem; border-radius: 16px; }
  .hub-card h2 { font-size: 1.55rem; max-width: 250px; }
  .hub-card p { font-size: .88rem; margin-bottom: 1.2rem; }
  .hub-card-copy, .hub-card--turnos .hub-card-copy, .hub-card--cotizaciones .hub-card-copy { width: 100%; }
  .hub-card .mark { margin-bottom: 1.25rem; }
  .hub-art, .hub-card--turnos .hub-art, .hub-card--cotizaciones .hub-art, .hub-card--tandas .hub-art { width: 105px; right: .45rem; top: -.1rem; opacity: .85; }
  .hub-open { font-size: .86rem; }
  .related-apps { margin-top: 2rem; }
  .related-apps-list { grid-template-columns: 1fr; gap: .5rem; }
  .related-app { padding: .85rem; }
  .related-app small { font-size: .84rem; }
  .hub-footer { margin-top: 1.25rem; }

}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  .topbar, .connection-status, .pwa-dialog { display: none !important; }
  body { background: white; }
  #workspace { max-width: none; padding: 0; }
}

@media (max-width: 380px) { .hub-jump { display: none; } .hub-header h1 { font-size: 3rem; } }

.related-signature { margin: 1rem 0 0; color: var(--muted); font-size: .77rem; }

/* Shared brand and membership entry across independently installed apps. */
.app-navigation { flex-wrap: wrap; }
.app-navigation .membership-entry { margin-left: auto; min-height: 44px; padding: .35rem .65rem; border-radius: 8px; border: 1px solid var(--border); font-weight: 600; font-size: .82rem; white-space: nowrap; text-decoration: none; }
.app-navigation .membership-entry:hover { background: var(--surface); border-color: var(--accent); }
@media (max-width: 650px) {
  .topbar { gap: .5rem; }
  .topbar > a:first-child { font-size: .88rem; }
  .topbar .install, .topbar [data-install] { padding: .65rem .75rem; font-size: .83rem; }
}
@media print { .related-apps { display: none !important; } }

@media (max-width:650px) {
  .tandas .app-navigation { gap:.5rem; padding-block:.6rem; }
  .tandas .app-navigation .td-home { font-size:.88rem; }
  .tandas .app-navigation .install { font-size:.83rem; padding:.65rem .75rem; }
}


/* Pro benefits: the same membership, a useful reason to upgrade in each app. */
.pro-benefits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid color-mix(in srgb, var(--accent) 23%, var(--surface));
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--ink);
}
.pro-benefits-copy { min-width: 0; flex: 1 1 auto; }
.pro-benefits .pro-benefits-kicker {
  display: block;
  margin-bottom: .35rem;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pro-benefits .pro-benefits-title {
  margin: 0 0 .45rem;
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.pro-benefits .pro-benefits-description {
  max-width: 65ch;
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
}
.pro-benefits .pro-benefits-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  border-color: var(--accent);
  background: var(--surface);
  color: var(--accent);
  font-size: .92rem;
  text-decoration: none;
}
.pro-benefits-note, .pro-benefits-preview {
  display: block;
  margin-top: .7rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--accent);
}
.pro-benefits-preview { margin-top: .3rem; font-weight: 400; }
.reposteria .bakery-pro-entry.pro-benefits-existing { padding: 1rem 1.15rem; }
.reposteria .bakery-pro-entry.pro-benefits-existing p > strong {
  display: inline-block;
  margin-bottom: .3rem;
  color: var(--ink);
  font-size: 1.06rem;
}
.turnos #workspace:has(.turnos-setup:not([hidden])) .pro-benefits {
  max-width: 40rem;
  margin-inline: auto;
}
@media (max-width: 700px) {
  .pro-benefits { flex-direction: column; align-items: stretch; padding: 1.1rem; gap: .95rem; }
  .pro-benefits .pro-benefits-link { width: 100%; }
}
@media print { .pro-benefits, .pro-benefits-existing { display: none !important; } }

/* Regreso al catálogo: acotado al primer enlace de cada barra de app. */
.topbar > a[href="../"]:first-child,
.td-top-inner > .td-home[href="../"]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:104px;min-height:44px;padding:.6rem .85rem;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--surface));border-radius:11px;background:color-mix(in srgb,var(--accent) 4%,var(--surface));color:var(--accent);font-family:var(--font-body);font-size:.9rem;font-weight:650;line-height:1.3;letter-spacing:0;text-decoration:none;white-space:nowrap;transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease}
.topbar > a[href="../"]:first-child:hover,
.td-top-inner > .td-home[href="../"]:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-color:color-mix(in srgb,var(--accent) 60%,var(--surface));text-decoration:none}
.topbar > a[href="../"]:first-child:focus-visible,
.td-top-inner > .td-home[href="../"]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.topbar > a[href="../"]:first-child:active,
.td-top-inner > .td-home[href="../"]:active{background:color-mix(in srgb,var(--accent) 15%,var(--surface))}
@media(max-width:650px){.topbar > a[href="../"]:first-child,.td-top-inner > .td-home[href="../"]{min-width:96px;padding:.6rem .7rem;font-size:.86rem;border-radius:10px}}
@media(max-width:355px){.topbar > a[href="../"]:first-child,.td-top-inner > .td-home[href="../"]{min-width:90px;padding:.6rem .55rem;font-size:.82rem}}

.turnos .topbar > a[href="../"]:first-child{--accent:var(--turnos-blue,#215a85)}