/* Hallmark · shape: app screen · genre: modern-minimal · theme: Terrazzo (deal 3/3, seed home-panel-privado-que-f3da·32c55a1a·2026-11-05·r0)
 * nav: top bar, wordmark, search and two quiet actions · signature: the loose-ends count on the ink band over the catalogue of services by function, each card coded by its port · states: loading, empty, error, full, login, saving · terrazzo: off-white
 * axes: light/geometric-sans/warm · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, an inventory is neutral by nature; argued it by leading with what is broken, not with what exists */
/* Hallmark · waive 71 · the flagged h3 are card titles in a grid row, measured against the neighbouring card on that row · each catalogue card title sits 24px under its own card edge and 12px over its text */
/* Hallmark · dismissed F25 · under 60rem every row restacks into labelled blocks with the name and its Abrir link on the first line, verified in the 375 capture */
/* Hallmark · finish-review: subagent · round 1: 8 findings, 6 resolved 2 partial · round 2 (catalogue): 8 findings, 8 resolved · gap: none */
@import url("./tokens.css");
@import url("./base.css");
@import url("./fuentes.css");

:root {
  /* Sobre la banda de tinta el oxido se aclara (colourway Black del tema). */
  --color-accent-on-ink: oklch(72% 0.13 40);
  --color-on-ink: oklch(96% 0.01 80);
  --color-on-ink-muted: oklch(78% 0.012 80);
  --color-on-ink-rule: oklch(36% 0.008 60);
  --barra-alto: 64px;
  --ficha-ancho: 27rem;
  --text-cifra: calc(var(--text-display) * 2);
  --control-alto: 40px;
}

/* --- barra -------------------------------------------------------------- */
.saltar { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-tooltip); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.saltar:focus-visible { top: var(--space-xs); }

.barra { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-bar) solid var(--color-ink); }
.barra-fila { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--barra-alto); }
.marca { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: var(--tracking-display); text-decoration: none; line-height: 1; }
.marca:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.buscador { flex: 1 1 auto; max-width: 28rem; margin-left: auto; }
.buscador .campo { width: 100%; }
.barra-acciones { display: flex; gap: var(--space-xs); }

/* --- controles ------------------------------------------------------------ */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-alto); padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: -2px; }
.btn--primario { background: var(--color-ink); color: var(--color-paper); }
.btn--primario:hover { background: var(--color-ink-2); }
.btn--secundario { box-shadow: inset 0 0 0 var(--rule-bar) var(--color-ink); }
.btn--secundario:hover { background: var(--color-paper-2); }
.btn--texto { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.btn--texto:hover { text-decoration-color: var(--color-accent); background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

.campo { min-height: var(--control-alto); padding: 0 var(--space-sm); border: 1px solid var(--color-muted); border-radius: 0; background: var(--color-plate); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; transition: background-color var(--dur-short) var(--ease-out); }
.campo::placeholder { color: var(--color-muted); }
.campo:hover { background: var(--color-paper); }
.campo:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.campo:disabled { opacity: 0.55; cursor: not-allowed; }
.campo[aria-invalid="true"] { border-color: var(--color-error); }
textarea.campo { min-height: 8rem; padding: var(--space-xs) var(--space-sm); resize: vertical; line-height: 1.5; font-family: var(--font-body); }

.campo-grupo { display: grid; gap: var(--space-2xs); }
.campo-grupo > label, .grupo-titulo { font-size: var(--text-sm); font-weight: 500; }
.linea-ayuda { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.linea-ayuda.es-error { color: var(--color-error); }

/* --- entrada -------------------------------------------------------------- */
.entrada { display: grid; place-items: start center; padding-block: var(--space-3xl); }
.card { background: var(--color-plate); border: var(--rule-bar) solid var(--color-ink); box-shadow: var(--shadow-card); }
.tarjeta-entrada { display: grid; gap: var(--space-md); width: 100%; max-width: 26rem; padding: var(--space-xl); }
.tarjeta-entrada h1 { font-size: var(--text-display); }
.ayuda { color: var(--color-muted); font-size: var(--text-sm); }
.tarjeta-entrada .btn--primario { justify-self: start; }

/* --- banda de cabos sueltos ----------------------------------------------- */
.banda { background: var(--color-ink); color: var(--color-on-ink); }
.banda-rejilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); padding-block: var(--space-md); align-items: start; }
.banda h1 { max-width: none; font-size: var(--text-display); line-height: 1; }
.cifra { display: block; font-size: var(--text-cifra); letter-spacing: -0.04em; line-height: 0.95; }
.cifra-texto { display: block; margin-top: var(--space-xs); }
.banda-lede { margin-top: var(--space-md); max-width: 32ch; color: var(--color-on-ink-muted); }
.banda.sin-cabos .cifra { color: var(--color-on-ink); }

.cabos { margin: 0; padding: 0; list-style: none; border-top: var(--rule-bar) solid var(--color-on-ink); }
.cabo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-on-ink-rule); }
.cabo-nivel { font-size: var(--text-sm); font-weight: 500; color: var(--color-on-ink-muted); }
.cabo-nivel.es-grave { color: var(--color-accent-on-ink); }
.cabo-texto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); min-width: 0; overflow-wrap: break-word; }
.cabo-titulo { font-weight: 500; }
.cabo-porque { font-size: var(--text-sm); color: var(--color-on-ink-muted); max-width: 70ch; }
.cabo-ir { position: relative; justify-self: start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--color-on-ink); font: inherit; font-family: var(--font-outlier); font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; }
.cabo-ir::before { content: ""; position: absolute; inset: -6px -4px; }
.cabo-ir:hover { text-decoration-color: var(--color-accent-on-ink); color: var(--color-accent-on-ink); }
.cabo-ir:focus-visible { outline: 2px solid var(--color-accent-on-ink); outline-offset: 2px; }
.cabos-mas { padding-block: var(--space-sm); color: var(--color-on-ink-muted); font-size: var(--text-sm); }
.cabos-mas summary { cursor: pointer; color: var(--color-on-ink); font-weight: 500; }
.cabos-mas summary:focus-visible { outline: 2px solid var(--color-accent-on-ink); outline-offset: 2px; }
.cabos-mas .cabos { margin-top: var(--space-sm); border-top-width: var(--rule-hair); border-top-color: var(--color-on-ink-rule); }

/* --- cifras del servidor ------------------------------------------------------ */
.cifras-zona { padding-block: var(--space-md) 0; }
.cifras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; border-bottom: var(--rule-hair) solid var(--color-rule); padding-bottom: var(--space-md); }
.cifra-bloque { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-2xs); padding-inline: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); min-width: 0; }
.cifra-bloque:first-child { padding-left: 0; border-left: 0; }
.cifra-bloque:last-child { padding-right: 0; }
.cifras dt { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.cifras dd { margin: 0; display: grid; gap: var(--space-3xs); }
.cifra-valor { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: var(--tracking-display); line-height: 1; white-space: nowrap; }
.cifra-detalle { font-size: var(--text-sm); color: var(--color-muted); }

/* --- catalogo ------------------------------------------------------------------ */
.catalogo { display: grid; gap: var(--space-2xl); padding-top: var(--space-xs); }
.categoria-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); padding-bottom: var(--space-xs); margin-bottom: var(--space-lg); border-bottom: var(--rule-bar) solid var(--color-ink); }
.categoria-cabeza h2 { font-size: var(--text-3xl); }
.categoria-ayuda { flex-basis: 100%; font-size: var(--text-sm); }
.fichero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); margin: 0; padding: 0 var(--space-md) var(--space-md) 0; list-style: none; }
.mesa.con-ficha .fichero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fichero-item { display: flex; min-width: 0; }
.tarjeta { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-sm); width: 100%; padding: var(--space-lg); transition: box-shadow var(--dur-micro) var(--ease-out); }
.tarjeta:hover, .tarjeta.es-abierta { box-shadow: var(--shadow-card-hover); }
.tarjeta.es-falla { border-color: var(--color-accent); }
.tarjeta-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: baseline; }
.tarjeta h3 { max-width: none; font-size: var(--text-xl); line-height: 1.1; }
.tarjeta-abrir { display: inline-flex; align-items: center; min-height: 32px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
/* Toda la tarjeta es la zona de clic; el enlace de la direccion queda por encima. */
.tarjeta-abrir::after { content: ""; position: absolute; inset: 0; }
.tarjeta-abrir:focus-visible { outline: none; }
.tarjeta:has(.tarjeta-abrir:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.tarjeta-abrir:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; text-decoration-color: var(--color-accent); }
.tarjeta-texto { font-size: var(--text-sm); line-height: 1.5; max-width: 60ch; }
.tarjeta-datos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-sm) var(--space-md); margin: 0; padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-ink); font-size: var(--text-sm); }
.tarjeta-datos dt { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.tarjeta-datos dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.tarjeta-datos > div:first-child { grid-column: 1 / -1; }
.tarjeta-datos a { white-space: nowrap; }
.tarjeta-datos a { position: relative; z-index: var(--z-raised); }
.tarjeta-datos a:hover { text-decoration-color: var(--color-accent); }
.estado.es-revisar { color: var(--color-ink-2); }
.chip { padding: var(--space-3xs) var(--space-xs); background: var(--color-accent-soft); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.codigo-tarjeta { font-family: var(--font-outlier); font-weight: 500; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-accent); }
.saltos { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); }
.saltos a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px; text-decoration-color: var(--color-rule); }
.saltos a:hover { text-decoration-color: var(--color-accent); }
.categoria { scroll-margin-top: calc(var(--barra-alto) + var(--space-md)); }
.categoria h2 { scroll-margin-top: calc(var(--barra-alto) + var(--space-md)); }
/* Una categoria de un solo servicio no deja dos tercios de fila vacios. */
.fichero.es-solo { grid-template-columns: minmax(0, 1fr) !important; }
.fichero.es-solo .tarjeta { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto auto; column-gap: var(--space-xl); }
.fichero.es-solo .tarjeta-cabeza, .fichero.es-solo .tarjeta-texto { grid-column: 1; }
.fichero.es-solo .tarjeta-datos { grid-column: 2; grid-row: 1 / span 2; align-self: start; border-top: 0; padding-top: 0; border-left: var(--rule-hair) solid var(--color-ink); padding-left: var(--space-lg); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fichero.es-solo .tarjeta-datos > div:first-child { grid-column: auto; }

/* --- pestañas ------------------------------------------------------------ */
.cuerpo { padding-block: var(--space-lg) var(--space-2xl); }
.pestanas { display: flex; overflow-x: auto; margin-bottom: var(--space-lg); }
.pestana { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--control-alto); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink); margin-left: calc(-1 * var(--rule-hair)); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out); }
.pestana:first-child { margin-left: 0; }
.pestana:hover { background: var(--color-paper-2); }
.pestana[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); }
.pestana:focus-visible { position: relative; z-index: var(--z-raised); }
.cuenta { font-family: var(--font-outlier); font-weight: 500; }

/* --- mesa: tabla y ficha ---------------------------------------------------- */
.mesa { scroll-margin-top: calc(var(--barra-alto) + var(--space-md)); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.mesa.con-ficha { grid-template-columns: minmax(0, 1fr) var(--ficha-ancho); }
/* Con la ficha al lado la tabla pierde ancho: fuera lo que la ficha ya cuenta. */
.mesa.con-ficha .col-secundaria { display: none; }

.spec { width: 100%; border-collapse: collapse; border-top: var(--rule-bar) solid var(--color-ink); }
.spec th { padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-align: left; white-space: nowrap; border-bottom: var(--rule-hair) solid var(--color-ink); }
.spec td { padding: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.spec th:first-child, .spec td:first-child { padding-left: 0; }
.spec tbody tr { cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.spec tbody tr:hover, .spec tbody tr[aria-selected="true"] { background: var(--color-accent-soft); }
.spec tbody tr:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.spec td.num, .codigo { font-family: var(--font-outlier); font-weight: 500; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.spec td.num, .spec th.num { text-align: right; }
.nombre { display: block; font-weight: 500; font-size: var(--text-md); }
.codigo { display: block; color: var(--color-muted); overflow-wrap: break-word; }
tr[aria-selected="true"] .codigo, .es-falla .codigo { color: var(--color-accent); }
.estado { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.estado.es-falla, .mal { color: var(--color-accent); }
.apagado { color: var(--color-muted); }
.lista-plana { margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.abrir { font-size: var(--text-sm); white-space: nowrap; }
.abrir:hover { text-decoration-color: var(--color-accent); }
.solo-movil { display: none; }

.vacio, .fallo { padding-block: var(--space-xl); border-top: var(--rule-bar) solid var(--color-ink); display: grid; gap: var(--space-xs); justify-items: start; }
.vacio p, .fallo p { max-width: 60ch; }
.fallo p:first-child { font-weight: 500; }

.esqueleto { border-top: var(--rule-bar) solid var(--color-ink); }
.esqueleto-fila { display: grid; grid-template-columns: 2fr 3fr 1fr 1fr; gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.esqueleto-fila span { height: var(--space-sm); background: var(--color-paper-2); }

/* --- ficha ------------------------------------------------------------------ */
.ficha { position: sticky; top: calc(var(--barra-alto) + var(--space-md)); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); scroll-margin-top: calc(var(--barra-alto) + var(--space-md)); padding: var(--space-lg); max-height: calc(100dvh - var(--barra-alto) - var(--space-xl)); overflow-y: auto; }
.ficha-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; gap: var(--space-sm); align-items: start; }
.ficha-cabeza .abrir { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha h2 { font-size: var(--text-2xl); }
.ficha h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); letter-spacing: 0; color: var(--color-muted); }
.datos { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-xs) var(--space-md); margin: 0; font-size: var(--text-sm); border-top: var(--rule-bar) solid var(--color-ink); padding-top: var(--space-sm); }
.datos dt { font-weight: 500; }
.datos dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.avisos-ficha { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.avisos-ficha li { padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.avisos-ficha .porque { display: block; color: var(--color-muted); }

.form-ficha { display: grid; gap: var(--space-md); border-top: var(--rule-bar) solid var(--color-ink); padding-top: var(--space-md); }
.celdas { display: flex; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.celdas legend { margin-bottom: var(--space-2xs); padding: 0; }
.celda { position: relative; margin: 0 0 calc(-1 * var(--rule-hair)) calc(-1 * var(--rule-hair)); }
.celda:first-of-type { margin-left: 0; }
.celda input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.celda span { display: inline-flex; align-items: center; min-height: var(--control-alto); padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-ink); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.celda input:hover + span { background: var(--color-paper-2); }
.celda input:checked + span { background: var(--color-ink); color: var(--color-paper); }
.celda input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; position: relative; z-index: var(--z-raised); }
.celda input:disabled + span { opacity: 0.55; cursor: not-allowed; }
.form-pie { display: flex; align-items: center; gap: var(--space-md); }

.pie { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.sin-js { padding-block: var(--space-xl); }

/* --- estrecho --------------------------------------------------------------- */
@media (max-width: 80rem) {
  .fichero, .mesa.con-ficha .fichero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mesa.con-ficha .fichero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 80rem) {
  .fichero.es-solo .tarjeta-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fichero.es-solo .tarjeta-datos > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 72rem) {
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-lg); }
  .cifra-bloque:nth-child(4) { padding-left: 0; border-left: 0; }
  .mesa.con-ficha .fichero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mesa.con-ficha { grid-template-columns: minmax(0, 1fr); }
  .mesa.con-ficha .col-secundaria { display: block; }
  .mesa.con-ficha .ficha { order: -1; position: static; max-height: none; overflow: visible; }
}
@media (max-width: 60rem) {
  :root { --control-alto: 44px; }
  .banda-rejilla { grid-template-columns: minmax(0, 1fr); }
  .barra { position: static; }
  .barra-fila { flex-wrap: wrap; padding-block: var(--space-xs); }
  .buscador { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .barra-acciones { margin-left: auto; }
  .ficha, .mesa { scroll-margin-top: var(--space-md); }
  .spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .spec, .spec tbody, .spec tr, .spec td { display: block; }
  .spec tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs) var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .spec td { padding: 0; border: 0; }
  .spec td.num { text-align: left; }
  .spec td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
  .spec td.primera { grid-column: 1 / -1; order: -1; display: flex; justify-content: space-between; gap: var(--space-md); }
  .spec td.primera .abrir.solo-movil { display: inline; flex-shrink: 0; }
  .spec td.col-abrir { display: none; }
}
@media (max-width: 40rem) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra-bloque:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cifra-bloque:nth-child(4) { padding-left: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); }
  .fichero, .mesa.con-ficha .fichero { grid-template-columns: minmax(0, 1fr); padding-right: var(--space-xs); }
  .categoria-cabeza h2 { font-size: var(--text-2xl); }
  .tarjeta { padding: var(--space-md); }
  .tarjeta h3 { font-size: var(--text-lg); }
  .tarjeta-cabeza { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }
  /* En el telefono la tarjeta es nombre, estado, para que sirve y direccion: el resto esta en la ficha. */
  .tarjeta-datos > div:not(:first-child) { display: none; }
  .fichero.es-solo .tarjeta { grid-template-columns: minmax(0, 1fr); }
  .fichero.es-solo .tarjeta-datos { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; border-top: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
  .pestanas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: visible; }
  .pestana { margin: 0 0 calc(-1 * var(--rule-hair)) calc(-1 * var(--rule-hair)); justify-content: space-between; }
  .pestana:first-child { grid-column: 1 / -1; }
  .pestana:nth-child(even) { margin-left: 0; }
  .datos { grid-template-columns: minmax(0, 1fr); }
  .datos dt { margin-top: var(--space-xs); }
  .tarjeta-entrada { padding: var(--space-lg); }
  .card { box-shadow: var(--space-xs) var(--space-xs) 0 var(--color-paper-3); }
}
@media (hover: none) { .spec tbody tr:hover { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .btn, .campo, .pestana, .celda span, .spec tbody tr, .tarjeta { transition: none; }
  .btn:active { transform: none; }
}