/* componentes reutilizables. Los helpers JS equivalentes están en js/ui.js (JA.ui.*) */

/* ---------- Botones ---------- */
.btn { --b-bg: var(--surface); --b-fg: var(--ink); --b-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 38px; padding: 0 var(--s-4);
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bd); border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-base); line-height: 1;
  text-decoration: none; cursor: pointer; user-select: none; white-space: nowrap; box-shadow: 0 1px 0 var(--line);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.btn:hover { --b-bd: var(--ink-2); transform: translateY(-1px); box-shadow: 0 2px 0 var(--line-strong); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn--primary { --b-bg: var(--ink); --b-fg: var(--ink-inv); --b-bd: var(--ink); }
.btn--primary:hover { --b-bd: var(--ink); background: color-mix(in srgb, var(--ink) 88%, var(--accent)); }
.btn--accent { --b-bg: var(--accent); --b-fg: var(--accent-ink); --b-bd: var(--accent); }
.btn--accent:hover { --b-bd: var(--accent-strong); background: var(--accent-strong); }
.btn--ghost { --b-bg: transparent; --b-bd: transparent; box-shadow: none; }
.btn--ghost:hover { --b-bg: var(--surface-2); --b-bd: transparent; box-shadow: none; }
.btn--danger { --b-bg: var(--err-soft); --b-fg: var(--err); --b-bd: color-mix(in srgb, var(--err) 40%, transparent); }
.btn--danger:hover { --b-bg: var(--err); --b-fg: var(--err-ink); --b-bd: var(--err); }
.btn--sm { min-height: 30px; padding: 0 var(--s-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--lg { min-height: 48px; padding: 0 var(--s-5); font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: 38px; } .btn--icon.btn--sm { width: 30px; }
.btn.is-loading { pointer-events: none; color: transparent; position: relative; }
.btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--b-fg); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin: 0; } .btn-group .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Formularios ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.field__label .req { color: var(--accent); }
.field__hint { font-size: var(--fs-xs); color: var(--ink-3); }
.field__error { font-size: var(--fs-xs); color: var(--err); font-weight: 600; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--err); }
.form-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.input, .select, .textarea { width: 100%; min-height: 40px; padding: .5rem .75rem; background: var(--raised); color: var(--ink); border: 1px solid var(--control-line); border-radius: var(--r-md); font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-base); }
.select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; background-size: 18px; }
.input-group { position: relative; } .input-group .ic { position: absolute; left: .75rem; top: 50%; translate: 0 -50%; color: var(--ink-3); pointer-events: none; } .input-group .input { padding-left: 2.4rem; }
input[type="date"].input, input[type="time"].input, input[type="month"].input { font-variant-numeric: tabular-nums; }
/* Fecha y hora nativas: mismo campo que el resto, icono propio (mismo trazo que el sistema de iconos) */
input[type="date"], input[type="time"], input[type="month"], input[type="week"], input[type="datetime-local"] { accent-color: var(--accent); min-height: 40px; font-family: inherit; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator, input[type="week"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { width: 20px; height: 20px; padding: 2px; margin-left: var(--s-2); cursor: pointer; border-radius: var(--r-xs); background: var(--ink-2); opacity: 1; filter: none;
  -webkit-mask: var(--picker-ic) center / 18px no-repeat; mask: var(--picker-ic) center / 18px no-repeat; }
input[type="date"], input[type="month"], input[type="week"], input[type="datetime-local"] { --picker-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
input[type="time"] { --picker-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover, input[type="month"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { background: var(--accent); }
::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit-text { color: var(--ink-3); padding: 0 .1em; }
::-webkit-datetime-edit-day-field:focus, ::-webkit-datetime-edit-month-field:focus, ::-webkit-datetime-edit-year-field:focus, ::-webkit-datetime-edit-hour-field:focus, ::-webkit-datetime-edit-minute-field:focus { background: var(--accent); color: var(--accent-ink); border-radius: 2px; outline: none; }

/* Selector de fichero nativo: zona de entrega propia (se puede soltar un archivo encima). Para más control: JA.ui.file() */
input[type="file"] { width: 100%; max-width: 100%; min-height: 56px; padding: var(--s-2); color: var(--ink-3); font: inherit; font-size: var(--fs-sm); background: var(--surface-2); border: 1.5px dashed var(--control-line); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
input[type="file"]:hover { border-color: var(--accent); background: var(--accent-soft); }
input[type="file"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input[type="file"]::file-selector-button { margin-right: var(--s-3); min-height: 38px; padding: 0 var(--s-4); background: var(--ink); color: var(--ink-inv); border: 1px solid var(--ink); border-radius: var(--r-md); font: 600 var(--fs-sm) var(--font-ui); cursor: pointer; transition: transform var(--t-fast) var(--ease); }
input[type="file"]::file-selector-button:hover { transform: translateY(-1px); }
input[type="file"].input { padding: var(--s-2); }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); min-height: 112px; padding: var(--s-4); text-align: center; background: var(--surface-2); border: 1.5px dashed var(--control-line); border-radius: var(--r-md); color: var(--ink-3); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone.has-error { border-color: var(--err); }
.dropzone > .ic { width: 28px; height: 28px; color: var(--accent); }
.dropzone__t { color: var(--ink); font-weight: 600; } .dropzone__t u { text-decoration-color: var(--accent); text-underline-offset: 3px; }
.dropzone__h { font-size: var(--fs-xs); }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.dropzone__file { display: none; align-items: center; gap: var(--s-2); max-width: 100%; padding: .35rem .35rem .35rem .7rem; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.dropzone.has-file .dropzone__file { display: inline-flex; } .dropzone.has-file .dropzone__t, .dropzone.has-file .dropzone__h, .dropzone.has-file > .ic { display: none; }
.dropzone__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__file button { position: relative; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.dropzone__file button:hover { background: var(--surface-2); color: var(--ink); }
.dropzone__err { color: var(--err); font-size: var(--fs-xs); font-weight: 600; margin-top: var(--s-1); }
.pin-input { font-family: var(--font-mono); letter-spacing: .5em; text-align: center; font-size: var(--fs-lg); }

.check { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; min-height: 28px; }
.check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border: 1.5px solid var(--ink-3); border-radius: var(--r-xs); background: var(--raised); display: grid; place-content: center; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input::after { content: ""; width: 10px; height: 6px; border: solid var(--ink-inv); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; scale: 0; transition: scale var(--t-fast) var(--ease); }
.check input[type="radio"]::after { width: 8px; height: 8px; border: 0; background: var(--ink-inv); border-radius: 50%; rotate: 0deg; translate: 0 0; }
.check input:checked::after { scale: 1; }
.check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.switch { position: relative; display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; min-height: 28px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch__track { position: relative; width: 42px; height: 24px; flex: none; border-radius: var(--r-pill); background: var(--control-line); transition: background var(--t-base); }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: translate var(--t-base) var(--ease); }
.switch input:checked + .switch__track { background: var(--ok); }
.switch input:checked + .switch__track::after { translate: 18px 0; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: .5; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: 0; }
.switch-row .t { font-weight: 600; } .switch-row .d { font-size: var(--fs-sm); color: var(--ink-3); }

.segmented { display: inline-flex; max-width: 100%; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: var(--r-md); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.segmented::-webkit-scrollbar { display: none; }
.segmented button { flex: none; white-space: nowrap; border: 0; background: none; padding: .35rem .8rem; border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-3); cursor: pointer; }
.segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-1); }

/* Select personalizado con búsqueda (JA.ui.select) */
.sel { position: relative; min-width: 0; }
.sel__btn { width: 100%; display: flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: .35rem .75rem; text-align: left; background: var(--raised); border: 1px solid var(--control-line); border-radius: var(--r-md); cursor: pointer; }
.sel__btn:hover { border-color: var(--ink-2); }
.sel__btn[aria-expanded="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.sel__btn .ph { color: var(--ink-3); } .sel__val { flex: 1; min-width: 0; display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center; }
.sel__pop { position: absolute; z-index: var(--z-modal); left: 0; right: 0; top: calc(100% + 4px); background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); overflow: hidden; min-width: 200px; animation: pop var(--t-base) var(--ease); }
.sel__pop.up { top: auto; bottom: calc(100% + 4px); }
.sel__search { padding: var(--s-2); border-bottom: 1px solid var(--line); } .sel__search input { width: 100%; border: 0; background: var(--surface-2); border-radius: var(--r-sm); padding: .45rem .6rem; font: inherit; color: var(--ink); }
.sel__list { max-height: 260px; overflow: auto; padding: var(--s-1); margin: 0; list-style: none; }
.sel__opt { display: flex; align-items: center; gap: var(--s-2); padding: .5rem .6rem; border-radius: var(--r-sm); cursor: pointer; }
.sel__opt[data-active="true"] { background: var(--surface-2); }
.sel__opt[aria-selected="true"] { font-weight: 650; } .sel__opt[aria-selected="true"]::after { content: ""; margin-left: auto; width: 10px; height: 6px; border: solid var(--accent); border-width: 0 0 2px 2px; rotate: -45deg; }
.sel__opt .hint { color: var(--ink-3); font-size: var(--fs-xs); margin-left: var(--s-1); }
.sel__empty { padding: var(--s-4); text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--s-1); max-width: 100%; min-width: 0; border-bottom: 1px solid var(--line-strong); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin-bottom: var(--s-5);
  /* sombra en el borde que oculta contenido: indica que se puede desplazar */
  background: linear-gradient(to right, var(--paper) 30%, transparent) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--paper) 30%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .18), transparent) left center / 10px 70% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), transparent) right center / 10px 70% no-repeat scroll; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; position: relative; display: inline-flex; align-items: center; gap: var(--s-2); padding: .7rem var(--s-4); background: none; border: 0; color: var(--ink-3); font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--ink); }
.tab[aria-selected="true"]::after, .tab[aria-current="page"]::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -1px; height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; }
.tab .badge { font-size: .75rem; }

/* ---------- Tarjetas ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s-5); min-width: 0; }
.card--flat { box-shadow: none; } .card--sunk { background: var(--surface-2); box-shadow: none; }
.card--ink { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); } .card--ink .muted { color: color-mix(in srgb, var(--ink-inv) 65%, transparent); }
.card--tight { padding: var(--s-4); } .card--flush { padding: 0; overflow: hidden; }
.card--link { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base); text-decoration: none; display: block; } .card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.card__sub { color: var(--ink-3); font-size: var(--fs-sm); }
.stat { display: flex; flex-direction: column; gap: var(--s-1); }
.stat__value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.stat__delta { font-size: var(--fs-sm); font-weight: 600; } .stat__delta.up { color: var(--ok); } .stat__delta.down { color: var(--err); }

/* ---------- Tablas ---------- */
.table-wrap { position: relative; /* contiene los .sr-only absolutos de las celdas: sin esto escapaban del scroll de la tabla y ensanchaban el documento (incidencias a 820 px: +197 px) */ overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); background-color: var(--surface); overscroll-behavior-x: contain;
  background-image: linear-gradient(to right, var(--surface) 30%, transparent), linear-gradient(to left, var(--surface) 30%, transparent), radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .22), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .22), transparent);
  background-position: left center, right center, left center, right center; background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%; background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; }
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Columna de acciones: siempre alcanzable aunque la tabla sea más ancha que su contenedor */
.table .col-actions { position: sticky; right: 0; z-index: 2; background: var(--surface); text-align: right; white-space: nowrap; box-shadow: -1px 0 0 var(--line); }
.table th.col-actions { background: var(--surface-2); z-index: 3; }
.table tbody tr:hover .col-actions { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table caption { text-align: left; padding: var(--s-3) var(--s-4); font-weight: 600; }
.table th { position: sticky; top: 0; text-align: left; padding: .65rem var(--s-4); background: var(--surface-2); color: var(--ink-3); font: 600 var(--fs-xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; border-bottom: 1px solid var(--line-strong); }
.table th[aria-sort] { cursor: pointer; user-select: none; } .table th[aria-sort]:hover { color: var(--ink); }
.table th[aria-sort="ascending"]::after { content: " ↑"; } .table th[aria-sort="descending"]::after { content: " ↓"; }
.table td { padding: .7rem var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.table tr[data-href], .table tr.is-click { cursor: pointer; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .col-check { width: 40px; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-sm); }
.toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.toolbar .grow { min-width: 160px; }
@media (max-width: 719px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  .table--stack td { display: flex; justify-content: space-between; gap: var(--s-4); padding: .3rem 0; border: 0; text-align: right; }
  .table--stack td::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); text-align: left; flex: none; padding-top: .15rem; }
  .table--stack td[data-label=""]::before { display: none; } .table--stack td.num { text-align: right; }
  .table--stack .col-actions { position: static; box-shadow: none; background: none; }
  .table-wrap { border-radius: var(--r-md); }
}

/* ---------- Badges, chips, avatar ---------- */
.badge { --bd-bg: var(--surface-2); --bd-fg: var(--ink-2); display: inline-flex; align-items: center; gap: .35em; padding: .15em .65em; border-radius: var(--r-pill); background: var(--bd-bg); color: var(--bd-fg); font-size: var(--fs-xs); font-weight: 650; line-height: 1.5; white-space: nowrap; }
.badge::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; opacity: .85; }
.badge--plain::before { display: none; }
.badge--ok { --bd-bg: var(--ok-soft); --bd-fg: var(--ok); } .badge--warn { --bd-bg: var(--warn-soft); --bd-fg: var(--warn); }
.badge--err { --bd-bg: var(--err-soft); --bd-fg: var(--err); } .badge--info { --bd-bg: var(--info-soft); --bd-fg: var(--info); }
.badge--accent { --bd-bg: var(--accent-soft); --bd-fg: var(--accent-strong); }
.badge--pending::before { background: transparent; border: 1.5px dashed currentColor; }
.chip { display: inline-flex; align-items: center; gap: var(--s-1); padding: .2em .6em; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--fs-sm); background: var(--raised); }
.chip button { border: 0; background: none; cursor: pointer; padding: 0; color: var(--ink-3); display: grid; }
.dot { display: inline-block; width: .65em; height: .65em; border-radius: 50%; background: var(--dot, var(--ink-3)); }
.c1 { --dot: var(--abs-c1); --mk: var(--abs-c1); } .c2 { --dot: var(--abs-c2); --mk: var(--abs-c2); } .c3 { --dot: var(--abs-c3); --mk: var(--abs-c3); } .c4 { --dot: var(--abs-c4); --mk: var(--abs-c4); }
.c5 { --dot: var(--abs-c5); --mk: var(--abs-c5); } .c6 { --dot: var(--abs-c6); --mk: var(--abs-c6); } .c7 { --dot: var(--abs-c7); --mk: var(--abs-c7); } .c8 { --dot: var(--abs-c8); --mk: var(--abs-c8); }
.avatar { --av: var(--abs-c1); display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--av) 22%, var(--surface)); color: color-mix(in srgb, var(--av) 68%, var(--ink)); border: 1.5px solid color-mix(in srgb, var(--av) 55%, transparent); font: 700 .75rem/1 var(--font-ui); letter-spacing: .02em; user-select: none; position: relative; }
.avatar--sm { width: 26px; height: 26px; font-size: .75rem; letter-spacing: 0; } .avatar--lg { width: 56px; height: 56px; font-size: 1.1rem; } .avatar--xl { width: 88px; height: 88px; font-size: 1.7rem; }
.avatar[data-c="0"] { --av: var(--abs-c1); } .avatar[data-c="1"] { --av: var(--abs-c2); } .avatar[data-c="2"] { --av: var(--abs-c3); } .avatar[data-c="3"] { --av: var(--abs-c4); }
.avatar[data-c="4"] { --av: var(--abs-c5); } .avatar[data-c="5"] { --av: var(--abs-c6); } .avatar[data-c="6"] { --av: var(--abs-c7); } .avatar[data-c="7"] { --av: var(--abs-c8); }
.avatar.online::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface); }
.avatar-stack { display: inline-flex; } .avatar-stack .avatar { margin-left: -8px; border: 2px solid var(--surface); } .avatar-stack .avatar:first-child { margin: 0; }
.person { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .person__name { font-weight: 600; } .person__sub { font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------- Modales y drawers ---------- */
.overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: end center; background: var(--scrim); animation: fade var(--t-base); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.overlay--drawer { place-items: stretch end; z-index: var(--z-drawer); }
.modal { width: 100%; max-height: 92dvh; display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-3); animation: sheet var(--t-slow) var(--ease); }
.modal--sm { max-width: 420px; } .modal--md { max-width: 600px; } .modal--lg { max-width: 860px; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-3); }
.modal__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; }
.modal__body { padding: var(--s-2) var(--s-5) var(--s-5); overflow: auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); background: var(--surface); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.drawer { width: min(100%, 480px); height: 100%; max-height: none; border-radius: 0; border-width: 0 0 0 1px; animation: slide-in var(--t-slow) var(--ease); } .drawer.modal--lg { width: min(100%, 760px); max-width: none; }
.drawer .modal__foot { border-radius: 0; margin-top: auto; } .drawer .modal__body { flex: 1; }
@media (min-width: 640px) { .overlay { place-items: center; padding: var(--s-5); } .overlay--drawer { padding: 0; place-items: stretch end; } .modal { border-radius: var(--r-lg); animation: pop var(--t-base) var(--ease); } .drawer { border-radius: 0; animation: slide-in var(--t-slow) var(--ease); } }
@keyframes fade { from { opacity: 0; } } @keyframes sheet { from { transform: translateY(40px); opacity: 0; } } @keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }

/* ---------- Toasts ---------- */
.toasts { position: fixed; z-index: var(--z-toast); left: 50%; translate: -50% 0; bottom: calc(var(--bottombar-h) + 4.25rem); display: flex; flex-direction: column; gap: var(--s-2); width: min(92vw, 440px); pointer-events: none; }   /* por encima del botón del asistente */
@media (min-width: 960px) { .toasts { bottom: var(--s-5); } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s-3); padding: .7rem var(--s-4); background: var(--ink); color: var(--ink-inv); border-radius: var(--r-md); box-shadow: var(--shadow-3); animation: toast-in var(--t-base) var(--ease); border-left: 4px solid var(--accent); }
.toast--ok { border-left-color: var(--ok); } .toast--err { border-left-color: var(--err); } .toast--warn { border-left-color: var(--warn); }
.toast__msg { flex: 1; min-width: 0; }
.toast__undo { background: none; border: 0; color: var(--ink-inv); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 6px; }
.toast__x { background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; padding: 4px; display: grid; }
.toast__bar { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: .35; transform-origin: left; animation: shrink linear forwards; }
.toast { position: relative; overflow: hidden; }
.toast.is-out { animation: toast-out var(--t-base) var(--ease-in) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } } @keyframes shrink { to { transform: scaleX(0); } }

/* ---------- Skeleton ---------- */
.skeleton { display: block; border-radius: var(--r-sm); background: linear-gradient(100deg, var(--surface-2) 30%, color-mix(in srgb, var(--surface-2) 60%, var(--raised)) 50%, var(--surface-2) 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; min-height: 1em; }
.skeleton--line { height: .9em; margin: .45em 0; } .skeleton--title { height: 1.6em; width: 55%; } .skeleton--block { height: 120px; border-radius: var(--r-md); } .skeleton--circle { width: 36px; height: 36px; border-radius: 50%; }
@keyframes shimmer { to { background-position: -300% 0; } }

/* ---------- Estados vacíos ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-7) var(--s-5); color: var(--ink-3); }
.empty svg.art { width: 132px; height: auto; margin-bottom: var(--s-2); }
.empty h3 { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); font-weight: 600; }
.empty p { max-width: 38ch; }
.empty .btn { margin-top: var(--s-3); }
.empty svg.art { animation: art-in .5s var(--ease) both; transform-origin: 50% 90%; }
.empty .art .a-acc, .empty .art .a-acc-s { animation: art-acc 2.6s ease-in-out .6s 2 both; transform-box: fill-box; transform-origin: center; }
@keyframes art-in { from { opacity: 0; transform: translateY(8px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes art-acc { 50% { opacity: .55; } }
.empty[data-kind="error"] h3, .empty[data-kind="offline"] h3 { color: var(--ink); }
.empty--compact { flex-direction: row; justify-content: center; text-align: left; padding: var(--s-3); gap: var(--s-3); }
.empty--compact svg.art { width: 64px; margin: 0; flex: none; } .empty--compact h3 { font-size: var(--fs-md, 1rem); }
.offline-bar { position: sticky; top: 0; z-index: var(--z-toast); display: flex; align-items: center; gap: var(--s-2); justify-content: center; padding: var(--s-2) var(--gutter); background: var(--warn-soft); color: var(--ink); border-bottom: 1px solid var(--warn); font-size: var(--fs-sm); text-align: left; }
.offline-bar .ic { flex: none; color: var(--warn); }
.art .a-line { stroke: var(--ink); } .art .a-fill { fill: var(--surface); } .art .a-soft { fill: var(--surface-2); } .art .a-acc { fill: var(--accent); stroke: none; } .art .a-acc-s { stroke: var(--accent); fill: none; }

/* ---------- Calendario mensual (JA.ui.calendar) ---------- */
.cal { user-select: none; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.cal__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); text-transform: capitalize; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__dow span { text-align: center; padding: var(--s-1) 0 var(--s-2); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); letter-spacing: .08em; }
.cal__grid { gap: 2px; }
.cal__day { position: relative; aspect-ratio: 1.3 / 1; min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 5px 2px 2px; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; font-variant-numeric: tabular-nums; }
.cal--roomy .cal__day { aspect-ratio: auto; min-height: 84px; align-items: flex-start; padding: 6px; }
.cal__day:hover { background: var(--surface-2); }
.cal__day.is-out { color: var(--ink-3); opacity: .45; }
.cal__day.is-weekend .cal__num { color: var(--ink-3); }
.cal__day.is-today .cal__num { background: var(--ink); color: var(--ink-inv); border-radius: 50%; min-width: 1.7em; height: 1.7em; display: grid; place-items: center; font-weight: 700; }
.cal__day.is-holiday { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--accent) 14%, transparent) 5px 6px); }
.cal__day.is-holiday .cal__num { color: var(--accent); font-weight: 700; }
.cal__day.is-selected { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cal__day.is-selected.is-today .cal__num { background: var(--accent-ink); color: var(--accent); }
.cal__day.is-in-range { background: var(--accent-soft); border-radius: 0; }
.cal__day.is-disabled { opacity: .3; pointer-events: none; text-decoration: line-through; }
.cal__day.is-half::after { content: "½"; position: absolute; top: 2px; right: 4px; font-size: .6875rem; font-weight: 700; }
.cal__marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 3px; }
.cal--roomy .cal__marks { justify-content: flex-start; flex-direction: column; align-items: stretch; width: 100%; }
.mk { width: 6px; height: 6px; border-radius: 50%; background: var(--mk, var(--ink-3)); }
.mk[data-state="pending"] { background: transparent; border: 1.5px solid var(--mk, var(--ink-3)); }
.cal--roomy .mk { width: auto; height: auto; border-radius: var(--r-xs); padding: 1px 5px; font-size: .75rem; line-height: 1.4; color: var(--cat-ink); background: var(--mk); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal--roomy .mk[data-state="pending"] { color: var(--mk); background: transparent; border: 1px dashed var(--mk); }
.cal__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--ink-3); }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Anillo de progreso (JA.ui.ring) ---------- */
.ring { position: relative; display: inline-grid; place-items: center; width: var(--ring, 112px); height: var(--ring, 112px); }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.ring__bg { fill: none; stroke: var(--surface-2); } .ring__fg { fill: none; stroke: var(--ring-c, var(--accent)); stroke-linecap: round; transition: stroke-dashoffset 900ms var(--ease); }
.ring__txt { position: relative; text-align: center; line-height: 1.05; }
.ring__txt b { display: block; font-family: var(--font-display); font-size: calc(var(--ring, 112px) * .26); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ring__txt small { font-size: max(12px, calc(var(--ring, 112px) * .1)); color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.progress { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; } .progress > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width 600ms var(--ease); }

/* Línea de tiempo de la jornada */
.timeline { position: relative; height: 34px; background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; }
.timeline__seg { position: absolute; top: 4px; bottom: 4px; border-radius: 3px; background: var(--ok); }
.timeline__seg.is-open { background: repeating-linear-gradient(45deg, var(--ok) 0 6px, color-mix(in srgb, var(--ok) 70%, #fff) 6px 12px); }
.timeline__now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.timeline__tick { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--line-strong); }

/* ---------- Tooltip (CSS puro): <span data-tip="texto"> ---------- */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; z-index: var(--z-tip); left: 50%; bottom: calc(100% + 8px); translate: -50% 4px; width: max-content; max-width: 240px; padding: .35rem .6rem; background: var(--ink); color: var(--ink-inv); border-radius: var(--r-sm); font: 500 var(--fs-xs)/1.35 var(--font-ui); text-transform: none; letter-spacing: 0; text-align: center; white-space: normal; opacity: 0; pointer-events: none; transition: opacity var(--t-fast), translate var(--t-fast) var(--ease); }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; }
[data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); }

/* ---------- Menú desplegable, paleta de comandos, varios ---------- */
.menu { position: absolute; z-index: var(--z-modal); right: 0; top: calc(100% + 6px); min-width: 240px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: var(--s-1); animation: pop var(--t-base) var(--ease); }
.menu__item { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: .55rem var(--s-3); border: 0; background: none; border-radius: var(--r-sm); text-align: left; cursor: pointer; text-decoration: none; font-weight: 500; }
.menu__item:hover, .menu__item:focus-visible { background: var(--surface-2); }
.menu__item--danger { color: var(--err); } .menu__sep { height: 1px; background: var(--line); margin: var(--s-1) 0; }
.menu__head { padding: var(--s-3); } .menu__label { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.menu--bell { width: min(92vw, 380px); padding: 0; }
.has-menu { position: relative; }
.notif { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); text-decoration: none; }
.notif:hover { background: var(--surface-2); } .notif.is-unread { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.notif.is-unread .notif__t::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); }
.notif__t { font-weight: 600; } .notif__b { font-size: var(--fs-sm); color: var(--ink-3); }
.count-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: 700 .75rem/16px var(--font-ui); text-align: center; }
.kbd, kbd { display: inline-block; padding: .05em .45em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-xs); background: var(--raised); font: 600 .75rem/1.5 var(--font-ui); color: var(--ink-3); }
.cmdk { width: min(94vw, 600px); background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; animation: pop var(--t-base) var(--ease); align-self: start; margin-top: 12vh; }
.cmdk input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: var(--s-4) var(--s-5); font: inherit; font-size: var(--fs-md); color: var(--ink); outline: none; }
.cmdk__list { max-height: 50vh; overflow: auto; padding: var(--s-2); margin: 0; list-style: none; }
.cmdk__group { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.cmdk__item { display: flex; align-items: center; gap: var(--s-3); padding: .6rem var(--s-3); border-radius: var(--r-sm); cursor: pointer; }
.cmdk__item[data-active="true"] { background: var(--ink); color: var(--ink-inv); } .cmdk__item .hint { margin-left: auto; font-size: var(--fs-xs); opacity: .65; }
.cmdk__foot { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-3); }
.alert { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--info-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); }
.alert--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); } .alert--err { background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 40%, transparent); } .alert--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.alert .ic { margin-top: 2px; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); max-width: 320px; margin-inline: auto; }
.numpad button { aspect-ratio: 1.3; font: 500 1.8rem var(--font-display); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; box-shadow: 0 2px 0 var(--line-strong); }
.numpad button:active { transform: translateY(2px); box-shadow: none; } .numpad button:hover { background: var(--surface-2); }
.pagination { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ---------- Objetivos táctiles >= 40 px (pantallas táctiles y móviles; el escritorio conserva su densidad) ---------- */
@media (pointer: coarse), (max-width: 719px) {
  .btn, .btn--sm { min-height: 40px; }
  .btn--icon, .btn--icon.btn--sm { width: 40px; min-height: 40px; }
  .check { min-height: 40px; }
  /* Ronda 5: el propio <input> mide 40x40 (zona táctil real); el control visual de 24 px se dibuja centrado con ::before */
  .check input { width: 40px; height: 40px; margin: 0; border: 0; background: transparent; border-radius: 0; }
  .check input::before { content: ""; grid-area: 1 / 1; width: 24px; height: 24px; box-sizing: border-box; border: 1.5px solid var(--ink-3); border-radius: var(--r-xs); background: var(--raised); transition: background var(--t-fast), border-color var(--t-fast); }
  .check input[type="radio"]::before { border-radius: 50%; }
  .check input:checked { background: transparent; border-color: transparent; }
  .check input:checked::before { background: var(--ink); border-color: var(--ink); }
  .check input::after { grid-area: 1 / 1; }
  .check input:focus-visible { outline: none; }
  .check input:focus-visible::before { outline: 2px solid var(--focus); outline-offset: 2px; }
  .switch { min-height: 40px; }
  .segmented button { min-height: 40px; }
  .chip button { min-width: 28px; min-height: 28px; place-items: center; }
  .toast__x { min-width: 40px; min-height: 40px; place-items: center; } .toast__undo { min-height: 40px; padding: 4px 10px; }
  .menu__item, .cmdk__item, .sel__opt { min-height: 44px; }
  .nav__link { min-height: 44px; } .nav__sub a { display: flex; align-items: center; min-height: 40px; }
  .cal__head .btn { min-width: 40px; }
  .dropzone__file button { width: 36px; height: 36px; }
  .link-btn { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---------- Sello de «recibido» al fichar (JA.ui.stamp) ---------- */
.stamp { position: fixed; inset: 0; z-index: var(--z-toast); display: grid; place-items: center; pointer-events: none; }
.stamp::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--paper) 62%, transparent), transparent 58%); animation: stamp-veil 1.9s ease-out both; }
.stamp__svg { position: relative; width: min(58vw, 236px); height: auto; color: var(--accent); transform: rotate(-9deg); animation: stamp-in 1.9s var(--ease) both; mix-blend-mode: multiply; }
.stamp--out .stamp__svg { color: var(--ink); }
:root[data-theme="dark"] .stamp__svg { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp__svg { mix-blend-mode: screen; } }
.stamp__word { font: 700 25px var(--font-display); letter-spacing: .08em; }
.stamp__time { font: 600 20px var(--font-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.stamp__ring { font: 600 11.5px var(--font-ui); letter-spacing: .26em; text-transform: uppercase; }
@keyframes stamp-in {
  0% { opacity: 0; transform: translateY(-34px) rotate(-16deg) scale(1.9); }
  12% { opacity: 1; transform: translateY(0) rotate(-9deg) scale(.92); }
  18% { transform: rotate(-9deg) scale(1.04); }
  24% { transform: rotate(-9deg) scale(1); }
  76% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-9deg) scale(1.03); }
}
@keyframes stamp-veil { 0%, 8% { opacity: 0; } 14% { opacity: 1; } 76% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stamp__svg, .stamp::before { animation: none !important; } }

/* Kiosko: la fecha ya llega con su capitalización correcta («13 de octubre de 2026»); solo la inicial en mayúscula */
.ksk .ksk__date { text-transform: none; }
.ksk .ksk__date::first-letter { text-transform: uppercase; }

/* ---------- Fichar: el reloj y la línea de tiempo de Inicio reaccionan al sello (JA.ui.pulseClock) ---------- */
.ini-clock.is-stamped { animation: clock-card 1.1s var(--ease) both; }
.ini-clock.is-stamped .ini-time { animation: clock-time 1.1s var(--ease) both; }
.ini-clock.is-stamped .timeline { animation: clock-line 1.4s var(--ease) both; }
.ini-clock.is-stamped .timeline__now { animation: clock-now 1.4s ease-out both; }
.ini-clock.is-stamped .timeline__seg.is-open, .ini-clock.is-stamped .timeline__seg:last-of-type { animation: clock-seg .9s var(--ease) both; transform-origin: left center; }
.ini-clock.is-stamped .ini-live i { animation: clock-dot 1.2s ease-out both; }
#clock-btn.is-stamped { animation: clock-btn 1.1s ease-out both; }
@keyframes clock-card { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ini-clock.is-stamped--out { animation-name: clock-card-out; }
@keyframes clock-card-out { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 40%, transparent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 12%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes clock-time { 0% { transform: scale(1); } 22% { transform: scale(1.045); color: var(--accent); } 100% { transform: none; } }
@keyframes clock-line { 0%, 100% { filter: none; } 30% { filter: brightness(1.12) saturate(1.2); } }
@keyframes clock-now { 0% { transform: scaleY(1); box-shadow: 0 0 0 0 var(--accent); } 25% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes clock-seg { from { transform: scaleX(.2); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes clock-dot { 0% { transform: scale(1); } 25% { transform: scale(2); } 100% { transform: scale(1); } }
@keyframes clock-btn { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .ini-clock.is-stamped, .ini-clock.is-stamped *, #clock-btn.is-stamped, .view-ghost, .empty svg.art, .empty .art * { animation: none !important; } }

/* ---------- Objetivos táctiles ≥ 40 px en casillas, radios, chips y cabeceras ordenables ---------- */
@media (pointer: coarse), (max-width: 719px) {
  /* checkboxes/radios nativos sueltos: el input mide 40x40 y el control visual de 24 px se dibuja centrado */
  input[type="checkbox"]:not(.check input):not(.switch input), input[type="radio"]:not(.check input) { appearance: none; -webkit-appearance: none; width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex: none; margin: 0; display: grid; place-content: center; background: transparent; border: 0; cursor: pointer; }
  input[type="checkbox"]:not(.check input):not(.switch input)::before, input[type="radio"]:not(.check input)::before { content: ""; grid-area: 1 / 1; width: 24px; height: 24px; box-sizing: border-box; border: 1.5px solid var(--ink-3); border-radius: var(--r-xs); background: var(--raised); }
  input[type="radio"]:not(.check input)::before { border-radius: 50%; }
  input[type="checkbox"]:not(.check input):not(.switch input):checked::before, input[type="radio"]:not(.check input):checked::before { background: var(--ink); border-color: var(--ink); }
  input[type="checkbox"]:not(.check input):not(.switch input)::after { content: ""; grid-area: 1 / 1; width: 10px; height: 6px; border: solid var(--ink-inv); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; scale: 0; place-self: center; }
  input[type="radio"]:not(.check input)::after { content: ""; grid-area: 1 / 1; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-inv); scale: 0; place-self: center; }
  input[type="checkbox"]:not(.check input):not(.switch input):checked::after, input[type="radio"]:not(.check input):checked::after { scale: 1; }
  input[type="checkbox"]:not(.check input):not(.switch input):focus-visible::before, input[type="radio"]:not(.check input):focus-visible::before { outline: 2px solid var(--focus); outline-offset: 2px; }
  label:not([class]):has(> input[type="checkbox"]), label:not([class]):has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; cursor: pointer; }
  label.emp-opt, label.fich-cols, .check { min-height: 40px; }
  .asi-chip { min-height: 40px; display: inline-flex; align-items: center; }
  .table th[data-sort], .table th[aria-sort] { min-height: 40px; height: 40px; }
  .table th[data-sort] { padding-block: 10px; }
}

/* Rótulo discreto para ajustes que solo tendrán efecto real al conectar el backend (correo/push): JA.ui.badge('Disponible al conectar el backend', 'backend') */
.badge--backend { --bd-bg: transparent; --bd-fg: var(--ink-3); border: 1px dashed var(--control-line); font-weight: 500; }

/* ============ RONDA VISUAL 2 ============ */
/* Chips y celdas: nada se parte ni se corta */
.badge { flex: none; max-width: 100%; }
.table td .badge { vertical-align: middle; }
.table td[data-label="Día"], .table td[data-label="Dia"], .table td[data-label="Fecha"], .table td[data-label="Fechas"], .table td[data-label="Entrada"], .table td[data-label="Salida"],
.table td[data-label="Horas"], .table td[data-label="Sede"], .table td[data-label="Origen"], .table td.nowrap { white-space: nowrap; }
.table td[data-label="Estado"] { min-width: 132px; }
.table td[data-label="Estado"] > .badge { margin-bottom: 2px; }
.table td .abs-sub, .table td .sub, .table td .small.muted { display: block; font-size: var(--fs-xs); line-height: 1.35; }
.table td .person__name, .table td .person > div { min-width: 0; }
.table td .person__name { overflow-wrap: anywhere; }
/* Tabla ancha en tablet: pasa a fichas (ui.table añade .table--cards si no cabe) y la columna de acciones no tapa datos */
.table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table--cards, .table--cards tbody { display: block; width: 100%; }
.table--cards tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.table--cards tr { display: block; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.table--cards tr:nth-child(odd) { border-right: 1px solid var(--line); }
.table--cards td { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); padding: .3rem 0; border: 0; text-align: right; width: 100%; }
.table--cards td::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); text-align: left; flex: none; padding-top: .15rem; }
.table--cards td[data-label=""]::before { display: none; }
.table--cards .col-actions { position: static; box-shadow: none; background: none; justify-content: flex-end; flex-wrap: wrap; }
.table--stack td > .badge, .table--cards td > .badge { align-self: flex-start; width: auto; }
@media (max-width: 719px) {
  .table--stack td { align-items: flex-start; }
  .table--stack td > .badge { align-self: flex-start; width: auto; }
  .table--stack td > * { min-width: 0; }
  .table--stack .col-actions { justify-content: flex-end; flex-wrap: wrap; }
}
/* Sombra lateral visible también sobre la columna fija de acciones */
@media (min-width: 720px) { .table:not(.table--cards) .col-actions { box-shadow: -10px 0 10px -10px rgba(0, 0, 0, .3), -1px 0 0 var(--line); } }
.table-wrap:has(.table--cards) { background-image: none; }
/* Filas de cuenta (Cambiar de cuenta) y botones de bloque con contenido largo */
.btn--block { min-width: 0; max-width: 100%; box-sizing: border-box; }
.btn--block > span { min-width: 0; }
.account-row { gap: var(--s-3); text-align: left; overflow: hidden; }
.account-row > span:not(.badge) { flex: 1 1 auto; min-width: 0; }
.account-row .badge { margin-left: auto; }
.modal__body .btn--block .truncate { max-width: 100%; }
/* Botones fantasma con texto: borde visible (si no parecen texto suelto) */
.page-head__actions .btn--ghost:not(.btn--icon), .toolbar .btn--ghost:not(.btn--icon), .modal__foot .btn--ghost:not(.btn--icon) { --b-bd: var(--control-line); }
.page-head__actions .btn--ghost:not(.btn--icon):hover, .toolbar .btn--ghost:not(.btn--icon):hover { --b-bd: var(--ink-2); }
/* Campos separados siempre (también el editor de texto) */
.field + .rte, .rte + .field { margin-top: var(--s-4); }
.toolbar label, .toolbar .check, .toolbar .switch { white-space: nowrap; }
/* Estados vacíos más sobrios: menos aire, acción visible */
.empty { padding: var(--s-6) var(--s-5); }
.empty svg.art { width: 104px; }
.card .empty, .table-wrap .empty { padding-block: var(--s-5); }
.empty .btn { margin-top: var(--s-2); }
@media (max-width: 639px) {
  .empty { padding: var(--s-5) var(--s-4); }
  .empty svg.art { width: 88px; }
}
/* Rótulos y subtítulos: no pegados */
.badge--backend { margin-top: var(--s-1); }
.page-head p + .badge, .card__sub + .badge { margin-top: var(--s-2); }
/* Pestañas con indicador de que hay más (móvil) */


/* Móvil: tarjetas de resumen en dos columnas y menos aire vertical */
@media (max-width: 639px) {
  .stats, .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .stats > :last-child:nth-child(odd), .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .card__head { flex-wrap: wrap; }
  .page-head { margin-bottom: var(--s-4); padding-bottom: var(--s-3); }
  .page-head__actions { width: 100%; }
}
/* Texto largo en tarjetas nunca desborda */

/* ============ RONDA VISUAL 3 ============ */
/* Campana en móvil: hoja anclada bajo el botón, con margen de 8 px, scroll interno (ui.popover la coloca) */
.menu--bell.menu--sheet { position: fixed; left: 8px; right: 8px; width: auto; max-width: none; min-width: 0; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
.menu--bell .menu__head { position: sticky; top: 0; z-index: 1; background: var(--raised); border-bottom: 1px solid var(--line); }
/* Tablas: normales (con scroll y sombras) desde 720 px; apiladas solo por debajo (regla de arriba). */
.table--cards { display: table; }
@media (min-width: 720px) { .table td { vertical-align: middle; } .table .col-actions { min-width: 1px; } }
/* Botón del asistente: reserva de espacio y, si queda encima de algo accionable, se aparta (app.js) */
@media (min-width: 960px) { .view { padding-bottom: 88px; } }
.view { padding-bottom: 16px; }
.assistant-fab { transition: transform var(--t-base) var(--ease), opacity var(--t-base); }
/* Pistas de desplazamiento en pestañas y segmentados */
.segmented[data-more] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.tabs[data-more]::after, .tabs[data-less]::before { content: "\203A"; position: sticky; flex: none; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; width: 40px; padding: 0 8px 2px 0; box-sizing: border-box; font: 600 24px/1 var(--font-ui); color: var(--ink); pointer-events: none; z-index: 2; }
.tabs[data-more]::after { right: 0; margin-left: -40px; background: linear-gradient(to left, var(--paper) 45%, transparent); }
.tabs[data-less]::before { content: "\2039"; left: 0; margin-right: -40px; justify-content: flex-start; padding: 0 0 2px 8px; background: linear-gradient(to right, var(--paper) 45%, transparent); }
/* Banner de prueba: en oscuro, hundido y no crema */
:root[data-theme="dark"] .trial-banner { background: var(--surface-2); color: var(--ink); border-bottom: 1px solid var(--line-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .trial-banner { background: var(--surface-2); color: var(--ink); border-bottom: 1px solid var(--line-strong); } }
/* Barra de acciones fija en formularios largos de móvil */
@media (max-width: 719px) {
  .formbar-sticky { position: sticky; bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: var(--s-2); justify-content: flex-end; padding: var(--s-3) var(--s-4); margin: var(--s-4) calc(var(--gutter) * -1) 0; background: color-mix(in srgb, var(--paper) 94%, transparent); border-top: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .formbar-sticky .btn { flex: 1; }
}
body:has(.menu--bell) .assistant-fab { opacity: 0; pointer-events: none; }
/* Objetivos táctiles >= 40 px: enlaces sueltos, resúmenes desplegables y nodos de árbol (móvil/táctil) */
@media (pointer: coarse), (max-width: 719px) {
  summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; }
  .bal-how summary, details > summary { min-height: 40px; }
  .doc-node__b, .doc-row__t { min-height: 40px; display: flex; align-items: center; }
  .doc-row__t { display: block; line-height: 40px; padding-block: 0; }
  .segmented button { min-height: 40px; min-width: 44px; }
  .link-btn { display: inline-flex; align-items: center; min-height: 40px; }
  .card > a:not(.btn), .card p > a:not(.btn) { min-height: 40px; display: inline-flex; align-items: center; }
}
@media (pointer: coarse), (max-width: 719px) {
  h2 > a, h3 > a, td > a:not(.btn), li > a:not(.btn):only-child { display: inline-flex; align-items: center; min-height: 40px; }
  /* enlaces dentro de una frase: zona táctil ampliada sin mover el texto */
  p a:not(.btn), .alert a:not(.btn), .small a { position: relative; }
  p a:not(.btn)::after, .alert a:not(.btn)::after, .small a::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 40px; transform: translateY(-50%); }
}

/* ============ RONDA VISUAL 4 ============ */
/* Tablas con prioridad de columnas (ui.table, column.priority 1..3): lo secundario se pliega en un detalle por fila, lo clave no se oculta */
.table .col-more { display: none; width: 44px; min-width: 44px; padding-inline: 4px 0; }
.table-wrap.has-hidden .col-more { display: table-cell; }
.table .fit-hide { display: none; }
.tbl-more svg { transition: transform var(--t-base) var(--ease); }
.tbl-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.table tr.is-open > td { border-bottom-color: transparent; background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.table .row-detail > td { padding: 0 var(--s-4) var(--s-3) 52px !important; background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.row-detail__l { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3) var(--s-4); padding-top: var(--s-3); border-top: 1px dashed var(--line-strong); }
.row-detail__i { min-width: 0; }
.row-detail__i dt { font: 600 var(--fs-xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 4px; }
.row-detail__i dd { margin: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.table-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; }
.table-hint svg { color: var(--accent); animation: tblnudge 1.8s var(--ease) 2; }
@keyframes tblnudge { 50% { transform: translateX(4px); } }
.table-wrap[data-more]:not([data-less]) { box-shadow: inset -22px 0 18px -22px rgba(0, 0, 0, .35); }
@media (min-width: 720px) and (max-width: 1099px) {
  .table th, .table td { padding-inline: .65rem; }
  .table td[data-label="Estado"] { min-width: 120px; }
}
@media (max-width: 719px) { .table .col-more, .table .row-detail { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .table-hint svg { animation: none; } }
/* Estado vacío compacto: ilustración a la izquierda y texto+acción apilados; en móvil, en columna centrada (antes el botón desbordaba) */
.empty--compact { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-1); align-items: center; justify-items: start; text-align: left; }
.empty--compact svg.art { grid-row: 1 / span 3; grid-column: 1; }
.empty--compact > :not(svg) { grid-column: 2; min-width: 0; max-width: 100%; }
.empty--compact .btn { margin-top: var(--s-2); max-width: 100%; white-space: normal; }
@media (max-width: 719px) {
  .empty--compact { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .empty--compact svg.art { width: 72px; }
}
/* Pestañas más compactas en tablet: caben las cuatro de Perfil sin cortar la última */
@media (min-width: 720px) and (max-width: 1099px) { .tabs .tab { padding-inline: .7rem; gap: 6px; font-size: .875rem; } .tabs .tab::after { left: .6rem; right: .6rem; } }
/* Cierre de jornada: las cinco caras siempre en una fila */
.mood-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-4); }
.mood-row .btn { min-width: 0; padding-inline: 2px; }
/* En móvil, con una hoja abierta el aviso sube arriba para no tapar sus botones */
@media (max-width: 719px) { body:has(.modal) .toasts { bottom: auto; top: calc(var(--s-3) + env(safe-area-inset-top)); } }

/* ---------- Ronda 5: calendario de la ficha de usuario en móvil ----------
   Las celdas de 50 px no caben con texto ("09:00–" truncado y solapado): la rejilla queda en puntos de color y debajo va la lista del mes, un renglón por día. */
.usr-calist { display: none; }
.usr-calist__t { font: 600 var(--fs-md) var(--font-display); margin: var(--s-4) 0 var(--s-2); }
.usr-calist__l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.usr-calist__d { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.usr-calist__n { font-weight: 600; font-size: var(--fs-sm); text-transform: capitalize; }
.usr-calist__m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.usr-calist__c, .usr-calist__h { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.usr-calist__h { color: var(--accent); font-weight: 600; }
@media (max-width: 719px) {
  .usr-calist { display: block; }
  .usr-cal .cal--roomy .cal__day { min-height: 52px; align-items: center; padding: 4px 1px; }
  .usr-cal .cal--roomy .cal__marks { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; margin-top: 4px; }
  .usr-cal .cal--roomy .mk { width: 7px; height: 7px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; background: var(--mk, var(--ink-3)); border: 0; }
  .usr-cal .cal--roomy .mk[data-state="pending"] { background: transparent; border: 1.5px dashed var(--mk, var(--ink-3)); width: 8px; height: 8px; }
}

/* ---------- Ronda 5: nombres completos en tarjetas apiladas (móvil) ---------- */
@media (max-width: 719px) {
  .table--stack td .person__name.truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .inf-t:not(.inf-t-entradas) .table--stack td.inf-emp { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; text-align: right; overflow-wrap: anywhere; }
  .inf-t:not(.inf-t-entradas) .table--stack td.inf-emp > span { display: block; flex: 1; min-width: 0; text-align: right; }
}