/* semana.css -- the worker's own screens (semana.js). Phone first: one column, at most 480px,
   centred on a wide screen. Every colour is an app.css token; the only additions are the holiday
   yellow of the mockups and its line colour. */
.sm {
  --sm-leave: #F5E6A8;
  --sm-leave-line: #C08A2E;
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px 40px;
  box-sizing: border-box;
  color: var(--ink);
  font-family: var(--sans);
}
.sm *, .sm *::before, .sm *::after { box-sizing: border-box; }
.sm-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sm-strong { font-weight: 700; }
.sm-sub { font-size: 13px; color: var(--muted); }
.sm-micro { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

.sm-tabs { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 4px; margin-bottom: 14px; }
.sm-tab { flex: 1; min-height: 40px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.sm-tab.is-on { background: var(--ink); color: #fff; }

.sm-screen { display: flex; flex-direction: column; gap: 12px; }
.sm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sm-hello { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sm-title-row { display: flex; align-items: center; gap: 4px; }
.sm-title-row.is-center { justify-content: space-between; }
.sm-title-row h1, .sm-mtitle h1 { margin: 0; font-size: 21px; line-height: 1.15; font-family: var(--sans); white-space: nowrap; }
.sm-head .sm-nav { width: 38px; height: 38px; }
.sm-mtitle { text-align: center; }
.sm-nav { width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--card); font-size: 20px; color: var(--ink); cursor: pointer; flex-shrink: 0; }
.sm-umbrella { width: 54px; height: 54px; border-radius: 27px; border: 1.5px solid var(--ink); background: var(--sm-leave); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }

.sm-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.sm-chip-t { flex: 1; }
.sm-state { font-size: 12px; font-weight: 700; }
.sm-state.is-pending { color: #8B7355; }
.sm-state.is-rejected { color: var(--alarm, #b4372b); }

.sm-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sm-strip-d { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0; border-radius: 10px; background: var(--card); font-size: 11px; }
.sm-strip-d b { font-family: var(--mono); font-size: 15px; }
.sm-strip-d.is-today { background: var(--ink); color: #fff; }
.sm-dot { width: 6px; height: 6px; border-radius: 3px; background: transparent; }

.sm-days { display: flex; flex-direction: column; gap: 8px; }
.sm-day { display: flex; gap: 10px; }
.sm-day-l { width: 40px; flex-shrink: 0; display: flex; flex-direction: column; padding-top: 8px; font-size: 12px; color: var(--muted); }
.sm-day-l b { font-family: var(--mono); font-size: 17px; color: var(--ink); }
/* several free days on one line (Paul, 2026-11-12): the dates «9–11» need more room than one day's number */
.sm-day.is-span .sm-day-l { width: auto; min-width: 40px; white-space: nowrap; }
.sm-day.is-span .sm-day-l b { font-size: 15px; }
.sm-day-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sm-shift { background: var(--card); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; box-shadow: inset 4px 0 0 var(--sm-dep, var(--muted)); }
.sm-shift.is-today { outline: 2px solid var(--ink); }
.sm-shift.is-not-done { opacity: .75; }
.sm-today { font-size: 11px; font-weight: 700; background: var(--ink); color: #fff; border-radius: 4px; padding: 2px 6px; }
.sm-times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.sm-times .is-struck { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.sm-badge { font-size: 11px; font-weight: 600; color: #2d6b5c; border: 1px solid #2d6b5c; border-radius: 4px; padding: 1px 5px; }
.sm-badge.is-bad { color: var(--alarm, #b4372b); border-color: var(--alarm, #b4372b); }
.sm-actions { display: flex; justify-content: flex-end; }
/* a shift the worker asked for, waiting for whoever plans: drawn, not yet there */
.sm-shift.is-asked { border: 1.5px dashed var(--sm-dep, var(--muted)); background: transparent; }
/* «+ turno» under a day: quiet, at the start of the line */
.sm-addshift { align-self: flex-start; min-height: 0; padding: 2px 0; color: var(--muted); }
.sm-link { background: none; border: 0; padding: 6px 0; min-height: 32px; font: inherit; font-size: 13px; font-weight: 600; color: var(--link, #2a4fd6); cursor: pointer; }
.sm-free { border: 1px dashed var(--rule); border-radius: 10px; padding: 11px 12px; font-size: 13px; color: var(--muted); }
.sm-leave { display: flex; align-items: center; gap: 8px; background: var(--sm-leave); border-radius: 10px; padding: 11px 12px; font-size: 14px; font-weight: 600; }
.sm-leave.is-pending { background: transparent; border: 1.5px dashed var(--sm-leave-line); }

.sm-card { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sm-bar { height: 10px; border-radius: 5px; background: #e8e3d7; overflow: hidden; }
.sm-bar-f { height: 10px; background: var(--dep-admin); }
.sm-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sm-tot { background: var(--card); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.sm-tot b { font-size: 17px; color: var(--ink); }

.sm-primary, .sm-secondary, .sm-danger { min-height: 46px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; padding: 0 16px; }
.sm-primary { background: var(--ink); color: #fff; border: 0; }
.sm-primary.sm-wide, .sm-secondary.sm-wide { width: 100%; }
.sm-secondary { background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); }
.sm-danger { background: var(--card); color: var(--alarm, #b4372b); border: 1.5px solid var(--alarm, #b4372b); }
.sm-flex .sm-primary { align-self: flex-start; }

.sm-veil { position: fixed; inset: 0; background: rgba(20, 20, 19, .45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sm-sheet { width: 100%; max-width: 480px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; background: var(--card); border-radius: 20px 20px 0 0; padding: 16px 16px 28px; }
@media (min-width: 700px) { .sm-veil { align-items: center; } .sm-sheet { border-radius: 16px; } }
.sm-sheet-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.sm-sheet-h h2 { margin: 0; font-size: 20px; font-family: var(--sans); }
.sm-x { width: 44px; height: 44px; border: 0; background: transparent; font-size: 26px; cursor: pointer; color: var(--ink); }
.sm-form { display: flex; flex-direction: column; gap: 12px; }
.sm-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sm-field label { font-size: 12px; color: var(--muted); }
.sm-input { font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); min-height: 46px; width: 100%; box-sizing: border-box; }
.sm-input:disabled { opacity: .5; }
.sm-pair { display: flex; gap: 10px; }
.sm-plan, .sm-balance { display: flex; justify-content: space-between; align-items: baseline; background: var(--paper); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.sm-balance { background: var(--sm-leave); }
.sm-balance b { font-size: 17px; }
.sm-seg { display: flex; gap: 6px; background: var(--paper); border-radius: 10px; padding: 4px; }
.sm-seg-b { flex: 1; min-height: 44px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sm-seg-b.is-on { background: var(--ink); color: #fff; }
.sm-check-l { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 44px; }
.sm-check { width: 20px; height: 20px; accent-color: var(--ink); }
.sm-cost { font-size: 13px; font-weight: 600; border-top: 1px solid var(--rule); padding-top: 10px; }
.sm-err { color: var(--alarm, #b4372b); font-size: 13px; font-weight: 600; }
.sm-err:empty { display: none; }

.sm-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sm-cal-h { font-size: 11px; color: var(--muted); text-align: center; }
.sm-cal-d { min-height: 56px; border-radius: 8px; padding: 5px 4px; background: var(--card); display: flex; flex-direction: column; gap: 2px; }
.sm-cal-d.is-plan { background: transparent; border: 1px dashed var(--faint, #a3a296); color: var(--muted); }
.sm-cal-d.is-leave { background: var(--sm-leave); border: 1px solid var(--sm-leave-line); }
.sm-cal-d.is-today { outline: 2px solid var(--ink); }
.sm-cal-d.is-link { cursor: pointer; }
.sm-cal-d.is-link:hover { outline: 1px solid var(--ink); }
.sm-cal-n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sm-cal-d b { font-size: 13px; }
.sm-cal-bar { margin-top: auto; height: 4px; border-radius: 2px; }
.sm-cal-d.is-plan .sm-cal-bar { opacity: .45; }
.sm-sum .sm-row { font-size: 14px; padding: 2px 0; }
.sm-sum .is-total { border-top: 1px solid var(--rule); padding-top: 8px; font-weight: 700; }
.sm-sum .is-diff { background: var(--paper); border-radius: 8px; padding: 10px; font-weight: 700; }
.sm-sum .is-diff.is-neg b { color: var(--alarm, #b4372b); }
.sm-vac { background: var(--sm-leave); border-color: var(--sm-leave-line); }
.sm-vac .sm-micro { color: var(--ink); }
.sm-vac-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sm-vac-g > div { display: flex; flex-direction: column; font-size: 11px; }
.sm-vac-g b { font-size: 16px; }

.sm-inbox { max-width: 980px; margin: 18px auto 0; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.sm-inbox-h { font-size: 18px; margin: 8px 0 0; font-family: var(--sans); }
.sm-req { max-width: 560px; }
.sm-btns { display: flex; gap: 8px; }
.sm-btns > * { flex: 1; }

/* Dinero: the vertical waterfall (semana.js drawMoney) */
.sm-legend { flex-direction: row; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; }
.sm-key { display: inline-flex; align-items: center; gap: 5px; }
.sm-sw { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }
.sm-sw.is-line { height: 0; border-top: 3px solid var(--ink); border-radius: 0; }
.sm-start { align-self: center; font-size: 13px; font-weight: 600; background: var(--ink); color: #fff; border-radius: 6px; padding: 6px 10px; }
.sm-more { align-self: center; }
.sm-mblock { gap: 5px; }
.sm-mblock.is-est .sm-wbar { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 4px, transparent 4px 8px); }
.sm-tag { font-size: 11px; font-weight: 700; border-radius: 4px; padding: 2px 6px; }
.sm-tag.is-real { background: var(--ink); color: #fff; }
.sm-tag.is-est { border: 1.5px dashed var(--ink); }
.sm-wrow { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 12px; }
.sm-wrow.is-bold { font-weight: 700; }
.sm-wl { width: 116px; flex-shrink: 0; }
.sm-track { flex: 1; position: relative; height: 16px; }
.sm-wbar { position: absolute; top: 0; height: 16px; border-radius: 3px; }
.sm-wa { width: 84px; text-align: right; }
.sm-gap { height: 1px; background: #e8e3d7; margin: 3px 0; }
.sm-result { display: flex; justify-content: space-between; border-top: 2.5px solid var(--ink); padding-top: 6px; font-weight: 700; font-size: 14px; }
.sm-hbal { font-size: 12px; background: var(--paper); border-radius: 8px; padding: 7px 10px; }
.sm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: sticky; bottom: 0; background: var(--paper); padding: 8px 0; }
/* All four on one line, on a phone too (Paul, 2026-11-12): a little tighter there, nothing cut. */
@media (max-width: 899px) {
  .sm-cards { gap: 6px; }
  .sm-cards .sm-mcard { padding: 6px; }
  .sm-cards .sm-mcard b { font-size: 13px; white-space: nowrap; }
  .sm-cards .sm-mcard .sm-sub { font-size: 10.5px; line-height: 1.25; }
}
.sm-mcard { background: var(--card); border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 2px; }
.sm-mcard b { font-size: 16px; }

/* Tareas in the Semana tab: a round tick, then the task. Late = the alarm colour on the date only;
   the planned date is a dashed tag (dashed = plan, as everywhere). */
.sm-tasks { gap: 6px; }
/* New task: a black square with a white +, as «+ Añadir persona» by Equipo (directorio.css .dir-plus), sized for a finger */
.sm-tasks > .sm-row { align-items: center; }
.sm-plus { border: 1px solid var(--ink); background: var(--ink); color: var(--card); font: 600 16px var(--mono); width: 28px; height: 28px;
  line-height: 24px; padding: 0; cursor: pointer; flex: none; }
.sm-tasks.is-late { border-color: var(--alarm, #b4372b); }
.sm-task { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border-radius: 10px; padding: 8px 10px 8px 8px; border: 1px solid var(--rule); }
.sm-tasks .sm-task { border: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--rule); border-radius: 0; }
.sm-tick { width: 30px; height: 30px; flex-shrink: 0; border-radius: 15px; border: 1.8px solid var(--ink); background: #fff; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; margin-top: 2px; }
.sm-tick.is-done { background: #2d6b5c; border-color: #2d6b5c; }
.sm-task-open { flex-shrink: 0; white-space: nowrap; align-self: flex-start; padding-top: 2px; }
.sm-task-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; }
.sm-task-t { font-weight: 600; font-size: 15px; }
.sm-task-t.is-struck { text-decoration: line-through; color: var(--muted); }
.sm-task-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sm-task-when .is-late { color: var(--alarm, #b4372b); font-weight: 600; }
.sm-task-n { font-style: italic; }
.sm-task.is-closed { opacity: .75; }
.sm-tasks .sm-secondary { align-self: flex-start; margin-top: 4px; }
.sm-seg.is-wrap { flex-wrap: wrap; }
.sm-seg.is-wrap .sm-seg-b { flex: 1 1 30%; }

/* Documentos: your own papers from the HR Odoo, grouped; each row opens the file. */
.sm-tabs .sm-tab { min-width: 0; padding: 0 1px; font-size: 12px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
.sm-dtitle { margin: 0; font-size: 21px; }
.sm-dgroup { gap: 0; }
.sm-dgroup .sm-row { padding-bottom: 6px; }
/* The mutua: each thing on its own line (Paul, 2026-11-12). */
.sm-card.sm-mutua { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.sm-mutua .sm-link { min-height: 0; padding: 0; }
.sm-doc { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; min-height: 44px; }
.sm-doc-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-family: var(--mono); }
.sm-doc-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sm-doc-t { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.sm-dgroup .sm-link { align-self: flex-start; }

/* Mes, fijo discontinuo: one line per week, called or not (turnos_grist.js weeks). */
.sm-week { font-size: 13px; padding: 2px 0; }
.sm-week.is-off { color: var(--muted); }

/* An extra payment line under the gross (violet, as in the design). */
.sm-extra .sm-wl { color: #6a5aa8; font-weight: 700; }
.sm-extra .sm-sub { flex: 1; min-width: 0; }

/* ON A COMPUTER (Paul, 2026-10-20: "make the style, WHEN COMPUTER, look like the rest ... leave it as it is
   for mobile"). On a computer each screen is its own Inicio tab; here it takes the app's language: square
   corners, 1px ink hairlines, Courier/mono capitals for labels, Georgia for figures, the page's width.
   Below 900px nothing here applies and the phone screens stay exactly as they are. */
@media (min-width: 900px) {
  .sm { max-width: 1100px; margin: 0; padding: 8px 0 40px; }
  .sm *:not(.sm-dot):not(.sm-tick):not(.sm-umbrella) { border-radius: 0 !important; }

  /* boxes: white, one ink hairline, no shadows */
  .sm-card, .sm-shift, .sm-tot, .sm-mcard, .sm-chip-row, .sm-strip-d, .sm-cal-d, .sm-task, .sm-sheet,
  .sm-plan, .sm-hbal { border: 1px solid var(--hairline); box-shadow: none; }
  .sm-tasks .sm-task { border: 0; border-top: 1px solid var(--rule); }
  .sm-shift { border-left: 4px solid var(--sm-dep, var(--muted)); }
  .sm-free { border: 1px dashed var(--faint); }
  .sm-leave { border: 1px solid var(--sm-leave-line); }
  .sm-sum .is-diff, .sm-balance { border: 1px solid var(--hairline); }
  .sm-cards { position: static; padding: 0; }

  /* labels: mono capitals */
  .sm-hello, .sm-micro, .sm-cal-h, .sm-strip-d > span, .sm-day-l > span, .sm-field label, .sm-tot,
  .sm-mcard, .sm-vac-g > div, .sm-legend, .sm-tag, .sm-today, .sm-badge, .sm-state {
    font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
  .sm-tot b, .sm-mcard b, .sm-vac-g b, .sm-balance b { text-transform: none; letter-spacing: 0; }

  /* figures: Georgia */
  .sm-title-row h1, .sm-mtitle h1, .sm-dtitle, .sm-sheet-h h2, .sm-inbox-h { font-family: var(--serif); font-weight: 400; }
  .sm-tot b, .sm-mcard b, .sm-vac-g b, .sm-balance b, .sm-result, .sm-sum .is-total, .sm-sum .is-diff b {
    font-family: var(--serif); font-weight: 400; font-size: 20px; }
  .sm-strip-d b, .sm-day-l b { font-family: var(--serif); font-weight: 400; }

  /* the week: days across the width, shifts side by side inside a day */
  .sm-strip-d.is-today { background: var(--ink); color: var(--paper); }
  .sm-day { gap: 16px; border-top: 1px solid var(--rule); padding-top: 8px; }
  .sm-day-l { width: 56px; padding-top: 2px; }
  /* A block is never wider than a day of the strip above (Paul, 2026-10-28): the strip is seven columns of the
     full width with 4px gaps; this column is that width less the day label (56px) and its gap (16px). */
  .sm-day-c { display: grid; grid-template-columns: repeat(auto-fill, calc((100% + 72px - 24px) / 7)); gap: 8px; }
  .sm-days { gap: 0; }
  /* A task in a day-wide block: its title and when; the note and the rest open with the task (Paul, 2026-11-03). */
  .sm-day-c .sm-task { flex-wrap: wrap; }
  .sm-day-c .sm-task-b { overflow-wrap: anywhere; }
  .sm-day-c .sm-task-n { display: none; }
  .sm-day-c .sm-task-open { order: 3; width: 100%; text-align: right; padding-top: 0; }
  .sm-totals { grid-template-columns: repeat(3, minmax(0, 200px)); }

  /* controls: the app's square buttons */
  .sm-nav { width: 34px; height: 34px; border: 1px solid var(--hairline); background: var(--card); font-size: 16px; }
  .sm-head .sm-nav { width: 34px; height: 34px; }
  .sm-umbrella { width: 44px; height: 44px; }
  .sm-primary, .sm-secondary, .sm-danger { min-height: 34px; padding: 0 14px; font: 600 11px var(--mono);
    text-transform: uppercase; letter-spacing: .06em; border-width: 1px; }
  .sm-link { font-size: 13px; font-weight: 500; }
  .sm-seg { border: 1px solid var(--hairline); padding: 0; gap: 0; background: var(--card); }
  .sm-seg-b { min-height: 34px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; border-left: 1px solid var(--hairline); }
  .sm-seg-b:first-child { border-left: 0; }
  .sm-input { border-width: 1px; min-height: 38px; font-size: 14px; }
  .sm-doc-ic { border-width: 1px; }

  /* Mes: the calendar wider, roomier */
  .sm-cal { gap: 0; padding: 1px 0 0 1px; }
  .sm-cal-d { min-height: 72px; margin: -1px 0 0 -1px; }
  .sm-cal-h { padding-bottom: 4px; }
  .sm-req { max-width: 640px; }
}

/* ON A PHONE, the same language (Paul, 2026-11-12: "make this generally more UI consistent with the platform"; on
   2026-10-20 the phone had been left as it was): square corners, 1px ink hairlines, mono capitals for labels, Georgia
   for titles and figures, the app's square black buttons. Phone sizes stay: buttons and fields a finger can hit. */
@media (max-width: 899px) {
  .sm *:not(.sm-dot):not(.sm-tick):not(.sm-umbrella) { border-radius: 0 !important; }
  .sm-sheet { border-radius: 0 !important; border-top: 1px solid var(--hairline); }

  /* boxes: white, one ink hairline, no shadows */
  .sm-card, .sm-shift, .sm-tot, .sm-mcard, .sm-chip-row, .sm-cal-d, .sm-task, .sm-plan, .sm-hbal {
    border: 1px solid var(--hairline); box-shadow: none; }
  .sm-tasks .sm-task { border: 0; border-top: 1px solid var(--rule); }
  .sm-shift { border-left: 4px solid var(--sm-dep, var(--muted)); }
  .sm-free { border: 1px dashed var(--faint); }
  .sm-leave { border: 1px solid var(--sm-leave-line); }
  .sm-sum .is-diff, .sm-balance { border: 1px solid var(--hairline); }
  /* the four Mi nómina cards keep their coloured foot line under the hairline */
  .sm-cards .sm-mcard { border: 1px solid var(--hairline); }

  /* labels: mono capitals */
  .sm-micro, .sm-cal-h, .sm-day-l > span, .sm-field label, .sm-tot, .sm-vac-g > div, .sm-legend, .sm-tag, .sm-today,
  .sm-badge, .sm-state {
    font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
  .sm-cards .sm-mcard .sm-sub { font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; font-size: 9.5px; }
  .sm-tot b, .sm-vac-g b, .sm-balance b { text-transform: none; letter-spacing: 0; }

  /* titles and figures: Georgia */
  .sm-title-row h1, .sm-mtitle h1, .sm-dtitle, .sm-sheet-h h2, .sm-inbox-h { font-family: var(--serif); font-weight: 400; }
  .sm-tot b, .sm-vac-g b, .sm-balance b, .sm-result, .sm-sum .is-total, .sm-sum .is-diff b { font-family: var(--serif); font-weight: 400; }
  .sm-cards .sm-mcard b { font-family: var(--serif); font-weight: 400; font-size: 15px; }
  .sm-day-l b { font-family: var(--serif); font-weight: 400; }

  /* controls: the app's square buttons, at a finger's size */
  .sm-nav { width: 40px; height: 40px; border: 1px solid var(--hairline); background: var(--card); font-size: 16px; }
  .sm-primary, .sm-secondary, .sm-danger { min-height: 46px; padding: 0 14px; font: 600 12px var(--mono);
    text-transform: uppercase; letter-spacing: .06em; border-width: 1px; }
  .sm-link { font-weight: 500; }
  .sm-seg { border: 1px solid var(--hairline); padding: 0; gap: 0; background: var(--card); }
  .sm-seg-b { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; border-left: 1px solid var(--hairline); }
  .sm-seg-b:first-child { border-left: 0; }
  .sm-input { border-width: 1px; }
  .sm-doc-ic { border-width: 1px; }
  /* every day's label as wide as «LUN–JUE», so a run of free days lines up with the single days */
  .sm-day-l, .sm-day.is-span .sm-day-l { width: 58px; min-width: 58px; }
}
/* The «?» of azalpena never sits on an open sheet's last line (Paul, 2026-11-12). */
body:has(.sm-veil) .az-arm { display: none; }

/* Papers to sign (Paul, 2026-10-29; sign_api.js): on top of Tus documentos. */
.sm-sign-card { border-color: var(--ink); display: flex; flex-direction: column; gap: 10px; }
.sm-sign-card .sm-dtitle { margin: 0; font-size: 20px; }
.sm-sign-card .sm-primary { width: 100%; }
.sm-code { font: 600 22px var(--mono); letter-spacing: .3em; text-align: center; }
.sm-sign-msg:empty { display: none; }
.sm-sign-msg { color: var(--alarm, #b4372b); }
.sm-sign-test { background: #fff6c8; padding: 6px 8px; color: var(--ink); }
.sm-sign-row { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.sm-sign-row:last-child { border-bottom: 0; }
.sm-sign-card .sm-primary[disabled] { opacity: .45; }

/* The alta's papers on the phone (Paul, 2026-11-03, the walkthrough): open, choose, agree; one code and one
   signature with a finger; a bike while the co-op prepares them or signs after you. */
.sm-wait { align-items: center; text-align: center; }
.sm-bike { display: block; width: 200px; max-width: 80%; height: auto; }
.sm-open { width: 100%; background: none; border: 0; border-top: 1px solid var(--rule); text-align: left; font: inherit; cursor: pointer; }
.sm-sum { font-size: 13px; line-height: 1.45; background: var(--paper); border-left: 2px solid var(--rule); padding: 6px 8px; }
.sm-sumd summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.sm-check-l.is-off { color: var(--faint); }
.sm-pdf { width: 100%; height: 62vh; border: 1px solid var(--rule); background: #fff; }
.sm-qs { display: flex; flex-direction: column; gap: 10px; }
.sm-qopts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sm-qopt { font: inherit; font-size: 14px; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); min-height: 44px; }
.sm-qopt.is-on { background: var(--ink); color: #fff; }
.sm-pad { display: block; width: 100%; height: 140px; background: #fff; border: 1.5px dashed var(--ink); border-radius: 8px; touch-action: none; }
.sm-padrow { display: flex; justify-content: space-between; align-items: baseline; }

/* Inicio › resumen (Paul, 2026-11-08): one dashboard per person, every click a drawer. */
@media (min-width: 900px) { .sm.is-dash { max-width: 1400px; } }
.sm-dash { display: flex; flex-direction: column; gap: 10px; }
.sm-dtop { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.sm-dtop.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm-list { margin: 0; height: 175px; box-sizing: border-box; overflow: hidden; }
.sm-dtop.is-four .sm-list { height: 150px; }
.sm-list.is-wait { background: var(--fill); }
.sm-list-r { display: flex; flex-wrap: nowrap; width: 100%; background: none; border: 0; border-top: 1px solid var(--hairline); font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.sm-list-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-list .micro.is-late { color: var(--alarm); }
.sm-allgood { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 110px; color: var(--ink); font-size: 15px; }
.sm-dcard { margin: 0; padding-bottom: 12px; }
.sm-dcard > :not(.card-head) { padding: 0 14px; }
.sm-dcard .card-head { display: flex; align-items: center; justify-content: space-between; }
.sm-week7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: start; }
.sm-wcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sm-wcol .sm-free { width: 100%; text-align: left; font: inherit; cursor: pointer; background: none; }
.sm-shift-mini { display: flex; justify-content: space-between; gap: 6px; padding: 5px 8px; border: 0; font: inherit; text-align: left; cursor: pointer; }
.sm-seg-inline { display: inline-flex; }
.sm-dbottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.sm-dbottom.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-l2-r { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 14px; align-items: baseline; width: 100%; background: none; border: 0;
  border-top: 1px solid var(--rule); padding: 8px 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.sm-l2-n { display: flex; flex-direction: column; font-size: 14px; }
.sm-l2-v { display: flex; flex-direction: column; align-items: flex-end; }
.sm-l2-v strong { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.sm-l2-v strong.is-neg { color: var(--alarm); }
.sm-dstack { display: flex; flex-direction: column; gap: 12px; }
/* the department's card from Departamentos, its income and «queda» lines only */
.sm-pl .dd-fold, .sm-pl .dd-row.strong:not(:last-child) { display: none; }
/* half the height of Contrato (Paul, 2026-11-08): the same card, set tighter, the label on one line */
.sm-pl .sm-dcard { padding-bottom: 6px; }
.sm-pl .card-head { padding-top: 6px; padding-bottom: 6px; }
.sm-pl .dd-row { padding: 4px 0; }
.sm-pl .dd-row.dd-colhead { padding: 0 0 2px; }
.sm-pl .dd-row.strong { padding: 5px 0 2px; }
.sm-pl .dd-row > :first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sm-drw { display: flex; flex-direction: column; gap: 12px; }
.sm-pick { margin: 8px 0 0; }
@media (max-width: 899px) {
  .sm-dtop, .sm-dtop.is-four, .sm-dbottom, .sm-dbottom.is-three { grid-template-columns: minmax(0, 1fr); }
  .sm-list, .sm-dtop.is-four .sm-list { height: auto; }
  .sm-week7 { grid-template-columns: minmax(0, 1fr); }
}

/* A month's ledger rows: label, its words, the figure on the money figures' right edge (Paul, 2026-11-12) */
.sm-tagw { display: inline-flex; align-items: center; gap: 6px; }
.sm-tagw .cm-note-b { border: 0; padding: 0; min-height: 0; min-width: 0; width: auto; height: auto; background: none; }
/* Same grid and rhythm as the bar rows above (.sm-wrow): label 116 px, words where the bars start, figure 84 px. */
.sm-ledger { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.sm-lrow { display: grid; grid-template-columns: 116px minmax(0, 1fr) 84px; column-gap: 8px; align-items: center; min-height: 22px; }
.sm-lrow > span:first-child { white-space: nowrap; }
.sm-lrow > .sm-num { text-align: right; white-space: nowrap; }
.sm-lw { color: var(--muted); white-space: nowrap; }
.sm-lrow.is-total { font-weight: 700; border-top: 1px solid var(--ink); padding-top: 4px; margin-top: 2px; }

/* Phone Inicio's bar: five, the menu first, the screen's full width (Paul, 2026-11-12). The section row is in the menu. */
.sm-tab-menu { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sm-tab-menu:disabled { color: var(--muted); opacity: .45; cursor: default; }
.sm-menu { display: flex; flex-direction: column; }
.sm-menu-i { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--hairline); background: none; font: inherit; font-size: 15px; text-align: left; cursor: pointer; color: var(--ink); }
@media (max-width: 899px) {
  body:has(.sm-tabs) nav.tabs { display: none; }
  /* Flush under the header (the page's 24 px top padding taken back) and edge to edge. */
  .sm-tabs { width: 100vw; margin: -24px calc(50% - 50vw) 14px; box-sizing: border-box; border-left: 0; border-right: 0; border-top: 0; }
  .sm-tabs .sm-tab-n { font-size: 10px; letter-spacing: 0; }
}

/* Mi nómina's drawers (Paul, 2026-11-12): a month opens its shifts; each card its ledger. */
.sm-mblock.is-link, button.sm-mcard { cursor: pointer; }
button.sm-mcard { font: inherit; color: inherit; text-align: left; background: var(--card); width: 100%; }
.sm-mdrw { display: flex; flex-direction: column; gap: 12px; }
.sm-cal-d.is-picked { outline: 2px solid var(--ink); outline-offset: -2px; }
.sm-mdrw-list { display: flex; flex-direction: column; gap: 6px; }
.sm-mdrw-s { display: grid; grid-template-columns: 76px 1fr auto; gap: 8px; align-items: baseline; text-align: left; font: inherit; font-size: 13px;
  padding: 10px; background: var(--card); color: var(--ink); border: 1px solid var(--ink); border-left: 4px solid var(--muted); cursor: pointer; }
.sm-mdrw-d { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); }
.sm-shiftd { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px 14px; border: 1px solid var(--hairline); border-top: 0; font-size: 13px; }
.sm-shiftd-r { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.sm-shiftd-r > span { color: var(--muted); }
.sm-book { display: flex; flex-direction: column; font-size: 12px; }
.sm-book-r { display: grid; column-gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.sm-book-4 .sm-book-r { grid-template-columns: 58px minmax(0, 1fr) 70px 70px; }
.sm-book-5 .sm-book-r { grid-template-columns: minmax(0, 1fr) 62px 66px 66px 62px; }
.sm-book-r > .sm-num { text-align: right; white-space: nowrap; }
.sm-book-r > span:last-child { font-weight: 700; }
.sm-book-r.is-head { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--ink); }
.sm-book-r.is-head > span { text-align: right; font-weight: 400; }
.sm-book-r.is-head > span:first-child { text-align: left; }
.sm-book-r.is-note { color: var(--muted); font-style: italic; }
.sm-book-r.is-total { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 700; }

/* The phone sheet slides up and down, the veil fades (Paul, 2026-11-12); .22s as the computer's drawer. */
.sm-veil { background: rgba(20, 20, 19, 0); transition: background .22s ease-out; }
.sm-veil.is-open { background: rgba(20, 20, 19, .45); }
.sm-veil .sm-sheet { transform: translateY(100%); transition: transform .22s ease-out; }
.sm-veil.is-open .sm-sheet { transform: none; }
@media (prefers-reduced-motion: reduce) { .sm-veil, .sm-veil .sm-sheet { transition: none; } }

/* Mes: the month's sum as a ledger with titles; previsto in italics (Paul, 2026-11-12). */
.sm-book-3 .sm-book-r { grid-template-columns: minmax(0, 1fr) 76px 76px; }
.sm-sum .sm-book-r > span:nth-child(2) { font-style: italic; font-weight: 400; }
.sm-sum .sm-book-r > span:last-child { font-weight: 400; }
.sm-sum .sm-book-r.is-total > span:last-child { font-weight: 700; }
.sm-sum-h { display: flex; align-items: center; gap: 6px; }
.sm-sum .sm-book + .sm-book { margin-top: 4px; }
.sm-sum .sm-book-r { border-bottom-color: var(--rule); }
.sm-sum .sm-book-r.is-head { border-bottom-color: var(--ink); }
.sm-sum .sm-book-r.is-total, .sm-sum .sm-book-r.is-total > span { font-family: var(--sans); border-top-color: var(--ink); }
/* A day's hours always fit their box on a phone (Paul, 2026-11-12: "4,67h" ran out of it). */
@media (max-width: 899px) { .sm-cal-d { min-width: 0; overflow: hidden; } .sm-cal-d b { font-size: 11.5px; letter-spacing: -0.03em; white-space: nowrap; } }

/* A shift's comments (Paul, 2026-11-12) */
.sm-cmts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.sm-cmts-l { display: flex; flex-direction: column; gap: 8px; }
.sm-cmt-h { display: flex; gap: 8px; align-items: baseline; }
.sm-cmt-x { margin-left: auto; min-height: 0; padding: 0; font-size: 12px; }
.sm-cmt-t { white-space: pre-wrap; }
.sm-cmts textarea.sm-input { resize: vertical; font: inherit; }
.sm-cmts-b { align-self: flex-end; width: auto; padding: 0 18px; }

/* «?» and the dice on Mi nómina and Documentos (Paul, 2026-11-12) */
.sm-help-row { display: flex; gap: 8px; margin: 4px 0 8px; }
.sm-help-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; min-width: 46px; padding: 0 12px;
  border: 1px solid var(--ink); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.sm-help-q { flex: 1; justify-content: flex-start; }
.sm-help-q b { font-family: var(--serif); font-size: 20px; }
.sm-help-q span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.sm-explain { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; }
.sm-explain h3 { margin: 10px 0 0; font-family: var(--serif); font-weight: 400; font-size: 18px; }
.sm-explain h3:first-child { margin-top: 0; }
.sm-explain p { margin: 0; }
.sm-explain ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* On a phone the worker's upload is the button under «Pedir tiempo libre» (Paul, 2026-11-13): Inicio's Tickets y facturas
   card (captura.js) would sit above the bar and say it twice. */
@media (max-width: 900px) { body:has(.sm-tabs) #ini-captura { display: none; } }