/* Solparquet Gestión · 4/5 COMPONENTES (catálogo y ejemplos en docs/12-DISENO.md y en /sistema/diseno). */

/* ======================================================= Cabecera de página y migas */
.pagehead { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: flex-end; justify-content: space-between; margin-bottom: var(--s-5) }
.pagehead h1 { margin: 0 }
.pagehead .muted { margin-top: .25rem }
.crumbs, .breadcrumbs { font-size: var(--fs-sm); color: var(--ink-faint); margin-bottom: .35rem }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0 }
.breadcrumbs li { display: flex; align-items: center; gap: .25rem }
.breadcrumbs li + li::before { content: "/"; color: var(--ink-faint); padding: 0 .15rem }
.breadcrumbs a { color: var(--ink-soft) } .breadcrumbs [aria-current] { color: var(--ink) }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center }

/* ======================================================= Tarjetas, rejillas, KPI */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-1); margin-bottom: var(--s-4) }
.card > h2:first-child, .card > h3:first-child { margin-top: 0 }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3) }
.card-head h2, .card-head h3 { margin: 0; display: flex; align-items: center; gap: .5rem }
.card-head h2 .i { color: var(--terra-600) }
.card-foot { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-soft) }
.card.flat { box-shadow: none } .card.tight { padding: var(--s-4) }
.grid { display: grid; gap: var(--s-4) } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3) } .row > * { flex: 1 1 200px }
.kpi { display: block; color: inherit; text-decoration: none !important; position: relative }
.kpi b { display: block; font-family: var(--font-head); font-size: 1.9rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.kpi span { color: var(--ink-soft); font-size: .9rem }
.kpi.alert b { color: var(--err) }
a.kpi:hover b { color: var(--terra-700) }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3) }
.portada-kpis .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.portada-kpis .kpi-card { grid-column: span 2 }
.portada-kpis .kpi-card:nth-last-child(-n+2) { grid-column: span 3 }
@media (min-width: 1500px) { .portada-kpis .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)) } .portada-kpis .kpi-card, .portada-kpis .kpi-card:nth-last-child(-n+2) { grid-column: auto } }
@media (max-width: 720px) { .portada-kpis .kpis { grid-template-columns: minmax(0, 1fr) } .portada-kpis .kpi-card, .portada-kpis .kpi-card:nth-last-child(-n+2) { grid-column: auto } }
.kpi-card { display: flex; flex-direction: column; gap: .2rem; padding: var(--s-4); border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none !important; min-height: 96px; transition: border-color var(--dur), box-shadow var(--dur) }
a.kpi-card:hover { border-color: var(--terra-soft); box-shadow: var(--sh-2); color: var(--ink) }
.kpi-card .kpi-label { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 500 }
.kpi-card .kpi-label .i { color: var(--terra-600) }
.kpi-card .kpi-value { font: 600 1.55rem/1.15 var(--font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.kpi-card .kpi-sub { font-size: var(--fs-xs); color: var(--ink-faint) }
.kpi-card.alerta { border-color: var(--err-line); background: linear-gradient(0deg, var(--paper), var(--paper)) padding-box }
.kpi-card.alerta .kpi-value { color: var(--err-ink) }

/* ======================================================= Botones */
.btn { --b-bg: var(--terra); --b-fg: #FFFFFF; --b-bd: var(--terra);
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: var(--tap); padding: .55rem 1.1rem; border-radius: 10px;
  border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg); font: 600 .95rem/1.1 var(--font-head); letter-spacing: .005em; cursor: pointer;
  text-decoration: none !important; white-space: nowrap; transition: background-color var(--dur), border-color var(--dur), box-shadow var(--dur), transform .05s; user-select: none }
.btn:hover { --b-bg: var(--terra-600); --b-bd: var(--terra-600); color: var(--b-fg) }
.btn:active { transform: translateY(1px); --b-bg: var(--terra-700); --b-bd: var(--terra-700) }
.btn .i { width: 1.15em; height: 1.15em }
.btn.sec { --b-bg: var(--surface); --b-fg: var(--ink); --b-bd: var(--field-border) }
.btn.sec:hover { --b-bg: var(--cream-2); --b-bd: var(--ink-soft) } .btn.sec:active { --b-bg: var(--cream-2) }
.btn.ghost { --b-bg: transparent; --b-fg: var(--terra-700); --b-bd: transparent }
.btn.ghost:hover { --b-bg: var(--terra-tint); --b-bd: transparent } .btn.ghost:active { --b-bg: var(--terra-tint) }
.btn.danger { --b-bg: var(--err); --b-bd: var(--err) } .btn.danger:hover, .btn.danger:active { --b-bg: var(--err-ink); --b-bd: var(--err-ink) }
.btn.ok { --b-bg: var(--ok); --b-bd: var(--ok) } .btn.ok:hover, .btn.ok:active { --b-bg: var(--ok-ink); --b-bd: var(--ok-ink) }
.btn.sm { min-height: 36px; padding: .3rem .75rem; font-size: .85rem; border-radius: 8px }
.btn.lg { min-height: var(--tap-lg); padding: .7rem 1.4rem; font-size: 1.05rem }
.btn.big { min-height: var(--tap-lg); font-size: 1.05rem; width: 100% }
.btn.block { width: 100% }
.btn.icon-only { padding: 0; width: var(--tap); min-width: var(--tap) } .btn.sm.icon-only { width: 36px; min-width: 36px }
/* Deshabilitado (TODAS las variantes: primario, .sec, .ghost, .danger, .ok): el mismo aspecto en reposo, :hover, :active y foco.
   La segunda línea sube la especificidad a la de «.btn.ok:hover» y, al ir después, gana: nunca se mezcla el fondo del hover con el
   texto gris. Contraste medido (--disabled-fg sobre --disabled-bg, 4,76:1) aunque WCAG 1.4.3 exime a los controles deshabilitados. */
.btn:is([disabled], [aria-disabled="true"], .is-disabled),
.btn:is([disabled], [aria-disabled="true"], .is-disabled):is(:hover, :active, :focus-visible) { --b-bg: var(--disabled-bg); --b-fg: var(--disabled-fg); --b-bd: var(--disabled-bg); color: var(--disabled-fg); cursor: not-allowed; transform: none; box-shadow: none }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none }
.btn.is-loading::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid var(--b-fg); border-right-color: transparent; animation: spin .7s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.spin { width: 1.1em; height: 1.1em; display: inline-block; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; vertical-align: -.15em }

/* ======================================================= Formularios (>= 16 px: sin zoom en iOS) */
label { display: block; font-size: .875rem; font-weight: 600; color: var(--ink-soft); margin: .8rem 0 .3rem }
.req::after { content: " *"; color: var(--err) }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=month], input[type=week], input[type=time],
input[type=datetime-local], input[type=tel], input[type=search], input[type=url], select, textarea {
  width: 100%; min-height: var(--tap); padding: .55rem .8rem; border: 1px solid var(--field-border); border-radius: 10px; background: var(--surface); color: var(--ink);
  font: 16px/1.4 var(--font-body); transition: border-color var(--dur), box-shadow var(--dur) }
input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 1 }
input:hover, select:hover, textarea:hover { border-color: var(--ink-soft) }
input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--terra-tint); outline: none }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; box-shadow: none }
input[disabled], select[disabled], textarea[disabled], input[readonly] { background: var(--disabled-bg); color: var(--disabled-fg); cursor: not-allowed }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .is-invalid { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-bg) }
textarea { min-height: 104px; resize: vertical }
/* select nativo con estilo propio (chevron SVG en data-uri) */
select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5046' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 18px }
select[multiple] { background-image: none; padding-right: .8rem; min-height: 120px }
select::-ms-expand { display: none }
input[type=date], input[type=month], input[type=time], input[type=datetime-local] { min-width: 0 }
input[type=number] { font-variant-numeric: tabular-nums }
/* checkbox y radio propios (>= 3:1 en el borde; marca con contraste) */
input[type=checkbox], input[type=radio] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: 0 0 auto; border: 2px solid var(--field-border); background: var(--surface); display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer; transition: background-color var(--dur), border-color var(--dur) }
input[type=checkbox] { border-radius: 6px } input[type=radio] { border-radius: 50% }
input[type=checkbox]::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .12s; background: #FFFFFF; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) }
input[type=radio]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; transform: scale(0); transition: transform .12s; background: #FFFFFF }
input[type=checkbox]:checked, input[type=radio]:checked { background: var(--terra-600); border-color: var(--terra-600) }
input[type=checkbox]:checked::before, input[type=radio]:checked::before { transform: scale(1) }
input[type=checkbox]:indeterminate { background: var(--terra-600); border-color: var(--terra-600) }
input[type=checkbox]:indeterminate::before { transform: scale(1); clip-path: none; height: 3px; border-radius: 2px }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--ink-soft) }
input[type=checkbox][disabled], input[type=radio][disabled] { background: var(--disabled-bg); border-color: var(--disabled-bg); cursor: not-allowed }
.check { display: flex; align-items: center; gap: .65rem; min-height: var(--tap); font-weight: 500; font-size: 1rem; color: var(--ink); margin: 0; cursor: pointer }
.check + .check { margin-top: 0 }
/* interruptor: <label class="switch"><input type="checkbox" role="switch"> Texto</label> */
.switch { display: inline-flex; align-items: center; gap: .7rem; min-height: var(--tap); margin: 0; font-weight: 500; font-size: 1rem; color: var(--ink); cursor: pointer }
.switch input[type=checkbox] { width: 46px; height: 26px; border-radius: var(--r-full); background: var(--disabled-bg); border: 2px solid var(--field-border); place-content: center start; padding: 0 2px; display: inline-grid }
.switch input[type=checkbox]::before { width: 18px; height: 18px; border-radius: 50%; clip-path: none; background: var(--field-border); transform: none; transition: transform var(--dur), background-color var(--dur) }
.switch input[type=checkbox]:checked { background: var(--ok); border-color: var(--ok) }
.switch input[type=checkbox]:checked::before { background: #FFFFFF; transform: translateX(19px) }
/* archivo */
input[type=file] { max-width: 100%; font: 15px var(--font-body); color: var(--ink-soft) }
input[type=file]::file-selector-button { margin-right: .75rem; min-height: 40px; padding: .4rem .9rem; border: 1px solid var(--field-border); border-radius: 8px; background: var(--surface); color: var(--ink); font: 600 .9rem var(--font-head); cursor: pointer }
input[type=file]::file-selector-button:hover { background: var(--cream-2) }
.file-picker { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; min-height:44px; margin-bottom:.65rem; border:1px solid var(--field-border); border-radius:8px; padding:.45rem .6rem; background:var(--surface); cursor:pointer }
.file-picker input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:1; margin:0 }
.file-picker:focus-within { outline:3px solid var(--focus); outline-offset:2px }
.file-picker-btn { font:600 .9rem var(--font-head); color:var(--link); flex:0 0 auto }
.file-picker-status { color:var(--ink-soft); font-size:.85rem; overflow-wrap:anywhere; min-width:0; flex:1 1 120px }
.file-picker:has(input:disabled) { opacity:.6; cursor:not-allowed }
.field { margin-bottom: var(--s-2) }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--s-4) }
.hint { font-size: .82rem; color: var(--ink-faint); margin-top: .3rem }
.err-msg, .field-error { color: var(--err-ink); font-size: .85rem; margin-top: .3rem; display: flex; gap: .3rem; align-items: flex-start }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-3) var(--s-4); margin: var(--s-3) 0 }
legend { font: 600 .9rem var(--font-head); padding: 0 .3rem; color: var(--ink-soft) }
.input-group { display: flex; align-items: stretch } .input-group > input { border-radius: 10px 0 0 10px } .input-group > .btn { border-radius: 0 10px 10px 0 }
.input-icon { position: relative } .input-icon > .i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none }
.input-icon > input { padding-left: 2.5rem }

/* ======================================================= Tablas */
.tablewrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper) }
.tablewrap.sticky { max-height: 70vh; overflow: auto }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); font-variant-numeric: tabular-nums }
table.t th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font: 600 .74rem var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap }
table.t td { padding: .7rem .75rem; border-bottom: 1px solid var(--line-soft); vertical-align: top }
table.t tbody tr:nth-child(even) td { background: var(--zebra) }
table.t tbody tr:hover td { background: var(--terra-50) }
table.t tbody tr:last-child td { border-bottom: 0 }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums }
table.t td.acc, table.t th.acc { width: 1%; white-space: nowrap; text-align: right }
table.t.compact th { padding: .45rem .6rem } table.t.compact td { padding: .4rem .6rem; font-size: .92rem }
tr.total td { font-weight: 700; border-top: 2px solid var(--line); background: var(--surface-2) !important }
.th-sort { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none !important; padding: .15rem .25rem; margin: -.15rem -.25rem; border-radius: 6px }
.th-sort:hover { color: var(--ink); background: var(--cream-2) }
.th-sort .i { width: 14px; height: 14px; opacity: .55 }
th[aria-sort] .th-sort { color: var(--ink) } th[aria-sort] .th-sort .i { opacity: 1; color: var(--terra-700) }
table[data-sortable] th.sortable { cursor: pointer }
table[data-sortable] th button.th-sort { border: 0; background: none; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer }

.orden-movil { display: none }   /* solo en móvil, sobre tablas apiladas (ver «Responsive general») */

/* ======================================================= Badges, chips, píldoras */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .6rem .16rem .45rem; border-radius: var(--r-full); font: 600 .76rem/1.35 var(--font-body); background: var(--cream-2); color: var(--ink); white-space: nowrap; border: 1px solid transparent }
.badge .i { width: .95em; height: .95em; stroke-width: 2.6 }
.badge-gris { background: var(--cream-2); color: var(--ink-soft) }
.badge-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line) }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line) }
.badge-err { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line) }
.badge-info { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line) }
.badge-terra { background: var(--terra-tint); color: var(--terra-700) }
.chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: .2rem .35rem .2rem .75rem; border-radius: var(--r-full); background: var(--terra-tint); color: var(--terra-700); font-size: .875rem; font-weight: 500; border: 1px solid #F1CDBB }
.chip b { font-weight: 600 }
.chip a, .chip button { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; text-decoration: none }
.chip a:hover, .chip button:hover { background: #F6D5C4 }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center }
.pill { display: inline-flex; gap: .35rem; align-items: center; min-height: 36px; padding: .3rem .85rem; border-radius: var(--r-full); background: var(--cream-2); font-size: .875rem; font-weight: 500; color: var(--ink); text-decoration: none !important; border: 1px solid transparent }
.pill:hover { border-color: var(--field-border); color: var(--ink) }
.pill.on, .pill[aria-current] { background: var(--terra-600); color: #FFFFFF }

/* ======================================================= Avisos (flash), toasts */
.flash { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r); margin-bottom: var(--s-3); border: 1px solid; border-left-width: 4px; background: var(--info-bg); border-color: var(--info-line); border-left-color: var(--info); color: var(--info-ink) }
.flash > .i { margin-top: .12rem; width: 1.3em; height: 1.3em }
.flash > .flash-body { flex: 1; min-width: 0 }
.flash a { color: inherit; text-decoration: underline; font-weight: 600 }
.flash.ok { background: var(--ok-bg); border-color: var(--ok-line); border-left-color: var(--ok); color: var(--ok-ink) }
.flash.error { background: var(--err-bg); border-color: var(--err-line); border-left-color: var(--err); color: var(--err-ink) }
.flash.warn { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--warn); color: var(--warn-ink) }
.flash.info { background: var(--info-bg); border-color: var(--info-line); border-left-color: var(--info); color: var(--info-ink) }
.toasts { position: fixed; z-index: var(--z-toast); right: var(--s-4); bottom: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); width: min(420px, calc(100vw - 2rem)); pointer-events: none }
.toast { pointer-events: auto; display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--r); background: var(--ink); color: #FFFFFF; box-shadow: var(--sh-3); animation: toast-in .2s ease-out }
.toast .i { margin-top: .1rem } .toast.ok .i { color: #9FE0B7 } .toast.error .i { color: #FFB4AB } .toast.warn .i { color: #FFD479 }
.toast p { margin: 0; flex: 1 } .toast button { border: 0; background: none; color: #FFFFFF; cursor: pointer; min-width: 32px; min-height: 32px; border-radius: 6px } .toast button:hover { background: rgba(255, 255, 255, .12) }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) } }
@media (max-width: 1024px) { .toasts { left: var(--s-3); right: var(--s-3); width: auto; bottom: calc(var(--bottomnav-h) + var(--s-3) + env(safe-area-inset-bottom)) } }

/* ======================================================= Vacío, carga, error, esqueleto */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: var(--s-8) var(--s-4); color: var(--ink-soft) }
.empty .empty-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--cream-2); color: var(--ink-soft) }
.empty .empty-icon .i { width: 28px; height: 28px }
.empty .empty-t { margin: .25rem 0 0; color: var(--ink); font-size: 1.05rem } .empty p { margin: 0; max-width: 46ch }
/* compacto (en tarjetas): icono | título + texto | botón; en móvil el botón pasa debajo (nunca se sale por la derecha) */
.empty.compact { padding: var(--s-4) var(--s-3); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: .15rem; align-items: center; text-align: left }
.empty.compact .empty-icon { width: 40px; height: 40px; grid-row: 1 / span 2 } .empty.compact .empty-icon .i { width: 20px; height: 20px }
.empty.compact .empty-t { grid-column: 2; margin: 0 } .empty.compact p:not(.empty-t) { grid-column: 2; max-width: none }
.empty.compact .btn { grid-column: 3; grid-row: 1 / span 2 }
@media (max-width: 520px) { .empty.compact .btn { grid-column: 2 / -1; grid-row: auto; justify-self: start; margin-top: var(--s-2); white-space: normal } }
.empty.error .empty-icon { background: var(--err-bg); color: var(--err) }
.skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--cream-2) 0%, var(--line-soft) 50%, var(--cream-2) 100%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; min-height: 1em }
.skel.line { height: .9em; margin: .45em 0 } .skel.line.w60 { width: 60% } .skel.line.w80 { width: 80% } .skel.block { height: 96px }
@keyframes skel { to { background-position: -200% 0 } }
/* Página de error (app/Core/views/error.php) */
.errorpag { max-width: 560px; margin: clamp(var(--s-4), 8vh, var(--s-12)) auto var(--s-8); padding: var(--s-8) var(--s-6); text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1) }
.errorpag-ico { width: 72px; height: 72px; margin: 0 auto var(--s-4); border-radius: 50%; display: grid; place-items: center; background: var(--terra-tint); color: var(--terra-700) }
.errorpag.grave .errorpag-ico { background: var(--err-bg); color: var(--err) }
.errorpag-ico .i { width: 34px; height: 34px }
.errorpag h1 { margin: 0 0 var(--s-3) } .errorpag h1:focus { outline: none }
.errorpag-detalle { margin: 0 auto var(--s-2); max-width: 46ch; font-weight: 600; color: var(--ink) }
.errorpag-texto { margin: 0 auto; max-width: 46ch; color: var(--ink-soft) }
.errorpag-acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-6) }
.errorpag-codigo { margin: var(--s-6) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--ink-faint) }
.errorpag-codigo b { font-variant-numeric: tabular-nums; color: var(--ink-soft) }
.errorpag-tec { margin-top: var(--s-4); text-align: left; font-size: var(--fs-sm) } .errorpag-tec pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--cream-2); padding: var(--s-3); border-radius: var(--r-sm) }
.modal-body .errorpag { margin: 0 auto; box-shadow: none; border: 0; padding: var(--s-4) 0 }
@media (max-width: 520px) { .errorpag { padding: var(--s-6) var(--s-4) } .errorpag-acciones .btn { flex: 1 1 100% } }
.loading-box { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: var(--s-8); color: var(--ink-soft) }

/* ======================================================= Listas de la portada */
.list { list-style: none; margin: 0; padding: 0 }
.list li { padding: .7rem 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: var(--s-3); align-items: center; justify-content: space-between }
.list li:last-child { border: 0 }
.tareas, .avisos, .agenda-hoy { list-style: none; margin: 0; padding: 0 }
.tarea { display: flex; align-items: center; gap: var(--s-3); padding: .7rem .1rem; border-bottom: 1px solid var(--line-soft) }
.tarea:last-child { border-bottom: 0 }
.tarea-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; background: var(--terra-tint); color: var(--terra-700) }
.tarea-ico.urgente { background: var(--err-bg); color: var(--err) }
.tarea-txt { flex: 1; min-width: 0 } .tarea-txt b { display: block; line-height: 1.3 } .tarea-txt .small { color: var(--ink-soft) }
.tarea-n { font: 700 1.25rem/1 var(--font-head); color: var(--ink); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums }
.aviso { display: flex; gap: var(--s-3); padding: .7rem .1rem; border-bottom: 1px solid var(--line-soft) }
.aviso:last-child { border-bottom: 0 }
.aviso-ico { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center; background: var(--info-bg); color: var(--info) }
.aviso.urgente .aviso-ico { background: var(--err-bg); color: var(--err) } .aviso.aviso .aviso-ico { background: var(--warn-bg); color: var(--warn) }
.aviso-txt { flex: 1; min-width: 0 }
.aviso > .badge { align-self: flex-start; flex: 0 0 auto } .aviso-txt > b { display: block; line-height: 1.3 } .aviso-txt .small { color: var(--ink-soft) }
.aviso-lineas { list-style: none; margin: .3rem 0 0; padding: 0; font-size: var(--fs-sm) } .aviso-lineas li { padding: .15rem 0 }
.cita { display: flex; gap: var(--s-3); padding: .6rem .1rem; border-bottom: 1px solid var(--line-soft) } .cita:last-child { border-bottom: 0 }
.cita-hora { font: 600 .95rem var(--font-head); min-width: 3.2rem; color: var(--terra-700); font-variant-numeric: tabular-nums }

/* ======================================================= Tooltip accesible: <span class="tip" data-tip="Texto" tabindex="0"> o [data-tip] en botones */
[data-tip] { position: relative }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); z-index: var(--z-tooltip); width: max-content; max-width: 260px; padding: .45rem .65rem; border-radius: 8px; background: var(--ink); color: #FFFFFF; font: 500 .8rem/1.35 var(--font-body); text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur), transform var(--dur) }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0) }
[data-tip][data-tip-pos="right"]::after { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(4px, -50%) }
[data-tip][data-tip-pos="right"]:hover::after, [data-tip][data-tip-pos="right"]:focus-visible::after { transform: translate(0, -50%) }
.tip { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--ink-soft); cursor: help; vertical-align: middle }
.tip:hover { color: var(--ink); background: var(--cream-2) }

/* ======================================================= Paginación */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: var(--s-4) 0 }
.pager-pages { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; list-style: none; margin: 0; padding: 0 }
.pager-pages a, .pager-pages span { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0 .6rem; border-radius: 10px; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; font-weight: 500 }
.pager-pages a:hover { background: var(--cream-2) }
.pager-pages [aria-current="page"] { background: var(--terra-600); color: #FFFFFF; font-weight: 700 }
.pager-pages .gap { min-width: 24px; color: var(--ink-faint) }
.pager-pages a.nav { border: 1px solid var(--field-border); gap: .25rem; display: inline-flex }
.pager-info { color: var(--ink-soft); font-size: var(--fs-sm) }
.pager-size { display: flex; align-items: center; gap: .5rem } .pager-size label { margin: 0; font-weight: 500 } .pager-size select { width: auto; min-height: 40px }

/* ======================================================= Barra de acciones pegada (móvil) y botón flotante */
.stickybar { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--line); padding: .65rem 0; margin-top: var(--s-4); display: flex; gap: var(--s-2); z-index: var(--z-sticky) }
.stickybar .btn { flex: 1 }
.fab { position: fixed; z-index: var(--z-sticky); right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--terra); color: #FFFFFF; box-shadow: 0 8px 24px rgba(194, 80, 47, .45); border: 0; text-decoration: none }
.fab:hover { background: var(--terra-600); color: #FFFFFF } .fab .i { width: 28px; height: 28px }
@media (max-width: 1024px) {
  .stickybar { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); margin-left: calc(-1 * var(--s-4)); margin-right: calc(-1 * var(--s-4)); padding: .65rem var(--s-4); box-shadow: 0 -6px 16px rgba(43, 36, 30, .08) }
  .fab { bottom: calc(var(--bottomnav-h) + var(--s-4) + env(safe-area-inset-bottom)) }
}
@media (min-width: 1025px) { .fab.solo-movil { display: none } }

/* ======================================================= Menú de acciones «⋯» (botón de menú ARIA) */
.menu { position: relative; display: inline-block }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown); min-width: 220px; max-width: min(320px, 92vw); padding: .35rem; margin: 0; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2) }
.menu-list.izq { right: auto; left: 0 } .menu-list.arriba { top: auto; bottom: calc(100% + 6px) }
.menu-list [role="menuitem"] { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 42px; padding: .45rem .7rem; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 .95rem var(--font-body); text-align: left; text-decoration: none; cursor: pointer }
.menu-list [role="menuitem"] .i { color: var(--ink-soft) }
.menu-list [role="menuitem"]:hover, .menu-list [role="menuitem"]:focus { background: var(--cream); outline: none }
.menu-list [role="menuitem"]:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px }
.menu-list [role="menuitem"].peligro { color: var(--err-ink) } .menu-list [role="menuitem"].peligro .i { color: var(--err) }
.menu-list [role="separator"] { height: 1px; margin: .3rem .2rem; background: var(--line) }
.menu-list form { margin: 0 }
.menu-head { padding: .5rem .7rem .6rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem } .menu-head b { display: block } .menu-head span { font-size: var(--fs-sm); color: var(--ink-soft) }

/* ======================================================= Pestañas (enlaces): helper tabs() -> <nav class="tabset"> */
.tabset { position: relative; margin-bottom: var(--s-5) }
/* position:relative: el texto oculto de los contadores (.sr, absoluto) queda recortado dentro de la barra y no ensancha la página en móvil */
.tabset { max-width: 100%; min-width: 0 }
.tabset-scroll { position: relative; display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); scroll-behavior: smooth }
.tabset-scroll::-webkit-scrollbar { display: none }
.tabset .tab, .tabs > a { position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: var(--tap); padding: .5rem .95rem; color: var(--ink-soft); white-space: nowrap; font-weight: 600; font-size: .95rem; text-decoration: none; border-radius: 10px 10px 0 0 }
.tabset .tab:hover, .tabs > a:hover { color: var(--ink); background: var(--cream-2); text-decoration: none }
.tabset .tab[aria-current="page"], .tabs > a.on, .tabs > a[aria-current] { color: var(--terra-700) }
.tabset .tab[aria-current="page"]::after, .tabs > a.on::after, .tabs > a[aria-current]::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--terra) }
.tabset .tab .i { width: 1.1em; height: 1.1em }
.tabset .tab .nav-count { height: 1.35rem; min-width: 1.35rem; font-size: .72rem }
.tabset .tab .tab-n { font-weight: 600; font-size: .78rem; padding: .05rem .45rem; border-radius: var(--r-full); background: var(--cream-2); color: var(--ink-soft) }
.tabset .tab[aria-current="page"] .tab-n { background: var(--terra-tint); color: var(--terra-700) }
.tabset::before, .tabset::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 32px; pointer-events: none; opacity: 0; transition: opacity var(--dur); z-index: 1 }
.tabset::before { left: 0; background: linear-gradient(90deg, var(--cream), rgba(247, 241, 231, 0)) }
.tabset::after { right: 0; background: linear-gradient(270deg, var(--cream), rgba(247, 241, 231, 0)) }
.tabset.mas-izq::before, .tabset.mas-der::after { opacity: 1 }
.card .tabset::before { background: linear-gradient(90deg, var(--paper), rgba(255, 251, 244, 0)) } .card .tabset::after { background: linear-gradient(270deg, var(--paper), rgba(255, 251, 244, 0)) }
.secnav { margin: calc(-1 * var(--s-2)) 0 var(--s-5) }
/* pestañas antiguas (<div class="tabs"><a class="on">): mismo aspecto, se irán sustituyendo por tabs() */
.tabs { position: relative; display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: var(--s-4) }
.tabs::-webkit-scrollbar { display: none }

/* ======================================================= Selector de periodo */
.periodo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4) }
.periodo-nav { display: inline-flex; align-items: stretch; border: 1px solid var(--field-border); border-radius: 12px; background: var(--surface); position: relative }
.periodo-nav > a:first-child { border-radius: 11px 0 0 11px } .periodo-nav > a:last-child { border-radius: 0 11px 11px 0 }
/* El panel se posiciona respecto a TODO el selector (no al botón central): así empieza en su borde izquierdo y, con su ancho máximo
   de 100vw - 2rem, cabe en móvil sin salirse por la derecha */
.periodo-nav .menu { display: flex; position: static }
.periodo-nav > a, .periodo-nav > .menu > button { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); color: var(--ink); background: none; border: 0; cursor: pointer; text-decoration: none }
.periodo-nav > a:hover, .periodo-nav > .menu > button:hover { background: var(--cream-2) }
.periodo-nav > .menu > .periodo-actual { min-width: 12rem; padding: 0 .9rem; font: 600 1rem var(--font-head); border-left: 1px solid var(--line); border-right: 1px solid var(--line); gap: .45rem; display: inline-flex; justify-content: center }
.periodo-nav .periodo-actual .i { color: var(--terra-600) }
.periodo-panel { width: min(560px, calc(100vw - 2rem)); padding: var(--s-4); top: calc(100% + 8px) }
/* Tooltip de las flechas: anclado al borde exterior de cada flecha (se abre hacia dentro), nunca centrado; así no se sale de la
   pantalla ni crea desplazamiento horizontal aunque el selector esté pegado al borde derecho */
.periodo-nav > a[data-tip]:first-child::after { left: 0; transform: translate(0, 4px) }
.periodo-nav > a[data-tip]:last-child::after { left: auto; right: 0; transform: translate(0, 4px) }
.periodo-nav > a[data-tip]:is(:hover, :focus-visible)::after { transform: translate(0, 0) }
.periodo-nav > a[data-tip]::after { max-width: min(260px, calc(100vw - 2rem)) }
.periodo-modos { display: flex; flex-wrap: wrap; gap: .3rem; padding: .25rem; background: var(--cream-2); border-radius: 12px; margin-bottom: var(--s-3) }
.periodo-modos label { flex: 1 1 auto; margin: 0; display: flex } .periodo-modos input { position: absolute; opacity: 0; pointer-events: none }
.periodo-modos span { flex: 1; display: grid; place-items: center; min-height: 38px; padding: 0 .7rem; border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--ink-soft); cursor: pointer }
.periodo-modos input:checked + span { background: var(--paper); color: var(--terra-700); box-shadow: var(--sh-1) }
.periodo-modos input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px }
.periodo-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 var(--s-3) }
.periodo-campos label { margin-top: 0 }
.periodo-atajos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line) }
.periodo-atajos .pill { min-height: 34px; font-size: .82rem }

/* ======================================================= Autocompletar (combobox ARIA) */
.combo { position: relative }
.combo > .i { position: absolute; left: .8rem; top: 22px; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none }
.combo > input[role="combobox"] { padding-left: 2.5rem; padding-right: 2.6rem }
.ac-clear { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center }
.ac-clear:hover { background: var(--cream-2); color: var(--ink) }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: var(--z-dropdown); max-height: min(360px, 55vh); overflow-y: auto; margin: 0; padding: .3rem; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2) }
.ac-opt { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .45rem .65rem; border-radius: 8px; cursor: pointer }
.ac-opt .i { color: var(--ink-faint) }
.ac-opt[aria-selected="true"], .ac-opt:hover { background: var(--terra-tint) }
.ac-opt[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--terra) }
.ac-opt .ac-txt { flex: 1; min-width: 0 } .ac-opt .ac-txt b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ac-opt .ac-txt span { display: block; font-size: .82rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ac-opt mark, .pal-opt mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 1px }
.ac-opt.ac-crear { border-top: 1px solid var(--line); margin-top: .2rem; border-radius: 0 0 8px 8px; color: var(--terra-700); font-weight: 600 } .ac-opt.ac-crear .i { color: var(--terra-700) }
.ac-estado { padding: .75rem .7rem; color: var(--ink-soft); font-size: .9rem; display: flex; gap: .5rem; align-items: center }
.ac-elegido { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; font-size: .85rem; color: var(--ok-ink) }

/* ======================================================= Filtros de listados (buscador avanzado) */
.filtros { margin-bottom: var(--s-4) }
.filtros-barra { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-start }
.filtros-barra .filtros-q { flex: 1 1 280px; min-width: 0 }
.filtros-barra .btn { flex: 0 0 auto }
.filtros-activos { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-3) }
.filtros-activos .limpiar { font-size: var(--fs-sm); font-weight: 600; min-height: 34px; display: inline-flex; align-items: center; padding: 0 .4rem }
.filtros-panel { margin-top: var(--s-3); padding: var(--s-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r) }
.filtros-panel .fgrid label { margin-top: .4rem }
.filtros-panel-pie { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-soft) }
.filtros-panel-cab { display: none }
.filtros-rango { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) }
.resultados { font-size: var(--fs-sm); color: var(--ink-soft); margin: var(--s-2) 0 var(--s-3) }
.resultados b { color: var(--ink) }
/* legado: barra de filtros simple */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; margin-bottom: var(--s-4) }
.filters > * { flex: 0 1 190px } .filters label { margin-top: 0 }
@media (max-width: 1024px) {
  /* En móvil el panel avanzado es una hoja inferior (no ocupa la primera pantalla) */
  .filtros-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal); margin: 0; max-height: 86vh; overflow-y: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-3); padding: 0 var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); animation: sheet-in .2s ease-out }
  .filtros-panel-cab { display: flex; position: sticky; top: 0; background: var(--paper); align-items: center; justify-content: space-between; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); margin-bottom: var(--s-2); z-index: 1 }
  .filtros-panel-pie { position: sticky; bottom: calc(-1 * var(--s-4)); background: var(--paper); padding-bottom: var(--s-4) }
  .filtros-panel-pie .btn { flex: 1 }
  .filtros-velo { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: rgba(30, 24, 19, .45) }
  html.hoja-abierta { overflow: hidden }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: .6 } }

/* ======================================================= Ventanas emergentes (<dialog>) */
#pwa-ajuda { width: calc(100vw - 2rem); max-width: 480px; max-height: 85dvh; box-sizing: border-box; overflow: auto; padding: var(--s-5, 24px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--sh-3) }
#pwa-ajuda::backdrop { background: rgba(30, 24, 19, .55) }
#pwa-ajuda h2 { margin-top: 0 }
dialog.modal { padding: 0; border: 0; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--sh-3); width: calc(100vw - 2rem); max-width: 720px; max-height: 90vh; overflow: hidden }
dialog.modal[open] { display: flex; flex-direction: column; animation: modal-in .18s ease-out }
dialog.modal::backdrop { background: rgba(30, 24, 19, .55); backdrop-filter: blur(2px) }
dialog.modal.sm { max-width: 460px } dialog.modal.md { max-width: 720px } dialog.modal.lg { max-width: 920px } dialog.modal.xl { max-width: 1100px }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); background: var(--paper); min-height: 60px }
.modal-head h2 { margin: 0; font-size: var(--fs-lg); flex: 1; min-width: 0 }
.modal-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5) }
.modal-body > .pagehead h1, .modal-body h1.modal-h1, .modal-body .crumbs, .modal-body .breadcrumbs { display: none }   /* la <h1> ya es el título de la ventana */
.modal-body .tabset { margin-bottom: var(--s-4) }
.modal-body > .pagehead { margin-bottom: var(--s-3) } .modal-body > .pagehead:empty { display: none }
.modal-body .card { box-shadow: none } .modal-body .stickybar { display: none }
.modal-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-2) }
.modal-foot:empty { display: none }
.modal-confirm .modal-body { display: flex; gap: var(--s-4); align-items: flex-start }
.modal-confirm .confirm-ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; display: grid; place-items: center; background: var(--warn-bg); color: var(--warn) }
.modal-confirm.peligro .confirm-ico { background: var(--err-bg); color: var(--err) }
.modal-confirm p { margin: 0 0 .4rem }
html.modal-abierto { overflow: hidden }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985) } }
@media (max-width: 640px) {
  /* En móvil, hoja a pantalla completa */
  dialog.modal, dialog.modal.sm, dialog.modal.md, dialog.modal.lg, dialog.modal.xl { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0 }
  dialog.modal.sm.hoja { height: auto; max-height: 90dvh; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0 }
  .modal-foot { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)) } .modal-foot .btn { flex: 1 }
  .modal-body { padding: var(--s-4) }
}

/* ======================================================= Paleta de búsqueda global */
dialog.palette { padding: 0; border: 0; border-radius: var(--r-lg); width: calc(100vw - 2rem); max-width: 680px; margin: 10vh auto auto; background: var(--paper); box-shadow: var(--sh-3); overflow: hidden; max-height: 76vh }
dialog.palette[open] { display: flex; flex-direction: column; animation: modal-in .15s ease-out }
dialog.palette::backdrop { background: rgba(30, 24, 19, .5) }
.pal-top { display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem 1rem; border-bottom: 1px solid var(--line) }
.pal-top .i { color: var(--ink-faint) }
.pal-top input { border: 0; box-shadow: none !important; outline: none; min-height: 52px; font-size: 1.1rem; padding: 0 .25rem; background: transparent }
.pal-top input:focus-visible { outline: none }
.pal-list { flex: 1; overflow-y: auto; padding: .4rem; margin: 0; list-style: none }
.pal-grupo { padding: .6rem .7rem .3rem; font: 600 .72rem var(--font-head); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint) }
.pal-opt { display: flex; align-items: center; gap: .7rem; min-height: 48px; padding: .4rem .7rem; border-radius: 10px; cursor: pointer; color: var(--ink); text-decoration: none }
.pal-opt .pal-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: grid; place-items: center; background: var(--cream-2); color: var(--ink-soft) }
.pal-opt .ac-txt { flex: 1; min-width: 0 } .pal-opt .ac-txt b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .pal-opt .ac-txt span { display: block; font-size: .82rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pal-opt[aria-selected="true"] { background: var(--terra-tint) } .pal-opt[aria-selected="true"] .pal-ico { background: var(--terra); color: #FFFFFF }
.pal-pie { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; padding: .55rem 1rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-soft); background: var(--surface-2) }
@media (max-width: 640px) { dialog.palette { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0 } .pal-pie { display: none } }

/* ======================================================= Galería (/sistema/diseno) */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3) }
.swatch { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); font-size: .8rem }
.swatch-c { height: 64px; display: grid; place-items: center; font-weight: 600 }
.swatch div:last-child { padding: .45rem .6rem } .swatch code { background: none; padding: 0 }
.demo-bloque { margin-bottom: var(--s-8) } .demo-bloque > h2 { display: flex; gap: .5rem; align-items: center; padding-bottom: .4rem; border-bottom: 1px solid var(--line) }
.demo-fila { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin: var(--s-3) 0 }
.iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s-2) }
.iconos div { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .3rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font-size: .75rem; color: var(--ink-soft) }
.iconos .i { width: 26px; height: 26px; color: var(--ink) }

/* ======================================================= Responsive general */
@media (max-width: 1024px) {
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 720px) {
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr) } .g4.keep2 { grid-template-columns: 1fr 1fr }
  .card { padding: var(--s-4); border-radius: var(--r) }
  h1 { font-size: 1.5rem }
  .pagehead { align-items: flex-start }
  .pagehead .actions { width: 100% } .pagehead .actions .btn { flex: 1 1 auto }
  /* tablas -> tarjetas (table.t.stack + data-label en cada td) */
  table.t.stack thead { display: none }
  table.t.stack, table.t.stack tbody, table.t.stack tr, table.t.stack td { display: block; width: 100% }
  .tablewrap:has(table.t.stack) { border: 0; background: none; overflow: visible; max-height: none }   /* .sticky + tarjetas: sin alto máximo (si no, se monta sobre lo siguiente) */
  table.t.stack { background: none }
  table.t.stack tr { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: var(--s-3); padding: .4rem .6rem; background: var(--paper); box-shadow: var(--sh-1) }
  table.t.stack tbody tr:nth-child(even) td, table.t.stack tbody tr:hover td { background: none }
  table.t.stack td { border: 0; padding: .35rem .2rem .35rem 44%; position: relative; min-height: 2rem; text-align: left; word-break: break-word }
  table.t.stack td::before { content: attr(data-label); position: absolute; left: .2rem; top: .35rem; width: 40%; font-weight: 600; color: var(--ink-faint); font-size: .8rem; line-height: 1.5 }
  table.t.stack td:not([data-label]), table.t.stack td[colspan], table.t.stack td.right { padding-left: .2rem }
  /* importes en tarjeta: etiqueta a la izquierda (el ::before no hereda el text-align:right de .num) y cifra a la derecha */
  table.t.stack td::before { text-align: left }
  table.t.stack td.num { text-align: right }
  /* selector «Ordenar por» (ui.js lo crea sobre cada tabla apilada con cabeceras ordenables: aquí no se ven) */
  .orden-movil { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); margin: 0 0 var(--s-3) }
  .orden-movil label { flex: 1 0 100%; margin: 0 }
  .orden-movil select { flex: 1 1 12rem; width: auto; min-width: 0 }
  .orden-movil .btn { flex: 0 0 auto }
  table.t.stack td.acc { width: 100%; text-align: left }
}

/* ======================================================= Objetivos táctiles >= 44 × 44 px (WCAG 2.5.5 / --tap) en pantallas táctiles o estrechas
   Botón «⋯» de menu_acciones(), .btn.sm, cabeceras ordenables (Orden::th() y data-sortable), entradas de menús y del menú lateral. */
@media (pointer: coarse), (max-width: 900px) {
  .btn.sm { min-height: var(--tap) }
  .btn.icon-only, .btn.sm.icon-only, .menu > [aria-haspopup="menu"].icon-only { width: var(--tap); min-width: var(--tap); min-height: var(--tap) }
  .menu > [aria-haspopup="menu"] { min-height: var(--tap) }
  /* la cabecera ordenable ocupa todo el alto de la celda (el margen negativo absorbe el relleno del th) */
  table.t th .th-sort { min-height: var(--tap); margin: -.6rem -.35rem; padding: 0 .35rem }
  table.t.compact th .th-sort { margin: -.45rem -.35rem }
  .menu-list [role="menuitem"], .nav-link, .ac-opt, .pal-opt { min-height: var(--tap) }
  .nav-group-btn { min-height: var(--tap) }
  .pager-pages a, .pager-pages span:not(.gap), .pager-size select { min-width: var(--tap); min-height: var(--tap) }
  .chip a, .chip button { width: 32px; height: 32px }
  .periodo-atajos .pill, .filtros-activos .limpiar { min-height: var(--tap) }
}

/* ======================================================= Portada de gestión */
.portada { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-4); align-items: start; margin-top: var(--s-5) }
.portada > .card { margin: 0; height: 100% }
.portada .card-head h2 { font-size: var(--fs-lg) }
.portada-seg { margin-top: var(--s-8) }
.mas-avisos summary { color: var(--link) }
@media (max-width: 1280px) { .portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .portada-avisos { grid-column: 1 / -1 } }
@media (max-width: 720px) { .portada { grid-template-columns: minmax(0, 1fr) } .portada > .card { height: auto } .tarea { flex-wrap: wrap } .tarea-txt { flex: 1 1 calc(100% - 100px) } .tarea .btn { margin-left: 52px } .aviso { flex-wrap: wrap } .aviso > .badge { margin-left: 44px } }
.portada-seg .card > h2:first-child, .portada-seg .card h2 { font-size: var(--fs-lg) }
/* Vistes de consulta: una mateixa taula, sense duplicar dades ni accions. */
.vista-selector { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 }
.vista-selector .btn { min-height:48px }
.vista-selector [aria-pressed="true"] { background:var(--terra-600); color:var(--white, #fff) }
.vista-targetes { overflow:visible; max-width:100% }
.vista-targetes table.t { display:block; width:100% }
.vista-targetes table.t thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.vista-targetes table.t tbody { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:16px; width:100% }
.vista-targetes table.t tbody tr { display:block; min-width:0; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin:0 }
.vista-targetes table.t tbody td { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 0; text-align:left; border:0; white-space:normal; overflow-wrap:anywhere }
.vista-targetes table.t tbody td::before { content:attr(data-label); position:static; display:block; width:auto; flex:0 0 30%; color:var(--ink-soft); font-weight:600 }
.vista-targetes table.t tbody td.acc { justify-content:flex-end; overflow:visible }
.vista-targetes table.t tbody td.acc::before { display:none }
.vista-targetes table.t tbody td:first-child { font-size:1.05rem; font-weight:600 }
.vista-targetes .din-sub { flex-basis:100% }
.orden-movil.orden-targetes { display:flex }
@media(max-width:720px) {
 .tablewrap.vista-llista:has(table.t.stack) { max-width:100%; overflow-x:auto; border:1px solid var(--line) }
 .vista-llista table.t.stack { display:table; min-width:640px }
 .vista-llista table.t.stack thead { display:table-header-group }
 .vista-llista table.t.stack tbody { display:table-row-group }
 .vista-llista table.t.stack tr { display:table-row; border:0; margin:0; padding:0; box-shadow:none }
 .vista-llista table.t.stack td, .vista-llista table.t.stack th { display:table-cell; padding:12px; width:auto }
 .vista-llista table.t.stack td::before { display:none }
}