/* ============================================================================
 * TES · Rediseño a la manera de Apple
 *
 * El aspecto. (El movimiento va en diseno-fluido.css y js/fluido.js.) Se
 * carga el último y reescribe la apariencia sin tocar `styles.css`: para
 * volver al diseño anterior basta con quitar las dos líneas que lo cargan en
 * `index.html` (esta y la de `diseno-apple-escala.css`, la escala
 * tipográfica, que se genera con `node pruebas/escala-tipos.mjs`).
 *
 * Se mantiene: los colores de marca, IBM Plex Sans con sus dos pesos, el
 * logotipo y el naranja como único acento.
 *
 * Se cambia, siguiendo las pautas de Apple (WWDC: «Principles of Great
 * Design», «The Details of UI Typography», materiales y profundidad):
 *   · Superficies sin borde visible, con radios amplios y una sombra en dos
 *     capas: las tarjetas flotan sobre el fondo en vez de estar dibujadas.
 *   · Jerarquía por tamaño, peso e interlineado a la vez: títulos grandes
 *     («Large Title»), encabezados de sección en minúscula como los de Apple
 *     y etiquetas grises discretas. Fuera las versalitas espaciadas.
 *   · Controles de iOS/macOS: botones secundarios rellenos en gris (sin
 *     borde), campos rellenos, controles segmentados con píldora blanca y
 *     estados en cápsula.
 *   · Barra lateral como la de macOS: tintada, con la selección rellena y sin
 *     filetes.
 *   · Separadores finos y sangrados, en vez de rayas de lado a lado.
 *   · Una escala de letra corta (11 · 12 · 13 · 14 · 15 px y los títulos),
 *     sin medios píxeles y con 11 px como mínimo legible.
 *   · Zonas de toque de 44 px con el dedo, y los bordes de vuelta para quien
 *     pide más contraste en su sistema.
 *
 * DOS DECISIONES QUE SE APARTAN DEL MANUAL DE MARCA, aceptadas al adoptar
 * este diseño como el principal (octubre de 2026): los radios pasan de 12/8
 * px a 18/11 px (las esquinas amplias son buena parte de lo que hace que algo
 * «parezca Apple»), y los epígrafes dejan las mayúsculas espaciadas. Para
 * devolverlos, ver los dos bloques marcados con «MARCA» más abajo.
 * ========================================================================== */

/* ---- Tokens ---------------------------------------------------------------- */
:root {
  /* MARCA: radios. Los del manual eran 12px / 8px. */
  --radius: 18px;
  --radius-sm: 11px;
  --radius-xs: 8px;

  /* Bordes casi invisibles: lo que separa es la sombra y el aire. */
  --border: rgba(48, 41, 41, 0.075);
  --border-strong: rgba(48, 41, 41, 0.14);

  /* Relleno de los controles (gris cálido de iOS, sacado de la tinta) */
  --relleno: rgba(118, 106, 100, 0.1);
  --relleno-hover: rgba(118, 106, 100, 0.15);
  --relleno-fuerte: rgba(118, 106, 100, 0.2);

  /* Sombras: una corta que asienta, otra larga y difusa que eleva. */
  --shadow-sm: 0 0.5px 1px rgba(48, 41, 41, 0.04), 0 2px 12px rgba(48, 41, 41, 0.045);
  --shadow-md: 0 1px 2px rgba(48, 41, 41, 0.05), 0 10px 30px rgba(48, 41, 41, 0.08);
  --shadow-lg: 0 2px 8px rgba(48, 41, 41, 0.06), 0 30px 70px rgba(48, 41, 41, 0.2);

  /* Separadores sangrados de las listas */
  --separador: rgba(48, 41, 41, 0.08);

  /* Avisos y errores: los distingue su color de fondo, sin filete alrededor
     (como los avisos dentro de una lista de Ajustes). */
  --warn-bd: transparent;
  --danger-bd: transparent;
}

/* ---- Lienzo ------------------------------------------------------------------ */
.container { padding-top: 30px; }
@media (min-width: 1081px) {
  .container { padding-left: 48px; padding-right: 48px; }
  .main-bar { padding-left: 48px; padding-right: 48px; }
}

/* ---- Títulos: «Large Title» -------------------------------------------------- */
.page-head { margin-bottom: 30px; }
.page-title { font-size: 34px; letter-spacing: -0.027em; line-height: 1.1; }
.page-sub { margin-top: 6px; font-size: 15px; color: var(--muted); }
.link-back { font-size: 14px; color: var(--brand-ink); margin-bottom: 12px; }
.link-back:hover { color: var(--brand-hover); }
.link-back .icon { width: 17px; height: 17px; }

/* ---- Tarjetas: superficies que flotan --------------------------------------- */
.card, .kpi, .tabla, .doc-card, .cert-card, .proy-card, .modo-card, .acceso-card,
.pf-card, .cf-card, .cfg-card, .notif-card {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
/* El relleno y el margen de las tarjetas NO se tocan aquí: cada variante
   (`.cfg-card` sin relleno para su tabla de borde a borde, `.form-card`,
   `.hon-card`, `.empty-inline`…) trae el suyo en styles.css, y una regla
   general puesta después los pisaría todos. */

/* MARCA: epígrafes. El manual los quería en mayúsculas a 0,13em; Apple usa
   minúsculas y tamaño, y así queda aquí. Encabezado de sección = «Headline». */
.card-title, .hon-comp-title, .hon-servicios-title, .ficha-bloque-tit, .panel-bloque-tit,
.filtro-grupo-tit, .cert-modal-lista-titulo, .serv-sug-tit, .crm-leyenda-tit {
  text-transform: none;
  letter-spacing: -0.012em;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
/* Etiquetas sobre una cifra: gris, discretas, en minúscula. */
.cf-cifra-lbl, .hon-figure-label, .cert-hero-label, .cert-avance-label, .cert-card-label,
.cert-ct-label, .cert-hist-stat-lbl, .cert-nc-total-lbl, .cert-ver-total-label, .adic-cifra-lbl,
.adic-split-lbl, .doc-resumen-lbl, .donut-total-label, .ficha-dato-lbl, .proy-foot-label,
.hon-pill-unit, .live-label, .dash-periodo-lbl, .cf-cab-lbl, .cfx3-tip-mes, .adic-tipo,
.cert-fase-paso, .panel-etapa.actual span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
/* Cabeceras de tabla, como las columnas de macOS. Letra pequeña = espaciado
   un pelo abierto (al revés que los titulares, que se aprietan). */
.row-head, .row-cli.row-head, .row-crm.row-head, .cuadre th, .cert-nc-cabecera, .cert-ver-cabecera {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 12px;
}

/* ---- Panel de control: cifras grandes, sin la franja de color --------------- */
/* Los títulos de las gráficas, sin raya debajo: separa el aire. */
.chart-head { border-bottom: 0; padding-bottom: 8px; }
/* El selector de periodo, como un botón de menú de macOS: blanco y flotando. */
.dash-periodo { border-color: transparent; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 6px 10px 6px 14px; }
.dash-periodo:hover { border-color: transparent; box-shadow: var(--shadow-md); }
.kpi::before { display: none; }
.kpi-chip { border-radius: 10px; }
/* Más aire, pero solo donde cabe: en el móvil van de dos en dos y styles.css
   ya les da su relleno compacto. */
@media (min-width: 761px) {
  .kpi { padding: 22px 24px 20px; }
  .kpi-top { margin-bottom: 16px; }
  .kpi-chip { width: 34px; height: 34px; }
}
.kpi-label { color: var(--ink-soft); letter-spacing: -0.005em; }
.kpi-value { letter-spacing: -0.032em; }
/* El tamaño grande, solo en escritorio: en tableta y móvil las tarjetas van
   de dos en dos y la app ya ajusta la cifra al ancho; aquí no se toca. */
@media (min-width: 1081px) {
  .kpi-label { font-size: 14px; }
  .kpi-value { font-size: 34px; }
}
.kpi-meter { height: 6px; background: var(--relleno); box-shadow: none; }

/* ---- Botones ----------------------------------------------------------------- */
.btn { border-radius: 12px; letter-spacing: -0.01em; }
/* Alto y letra del botón normal. Las variantes con medida propia (los
   pequeños, el de acceso, los de añadir del cashflow) quedan fuera: `:where`
   las excluye sin subir la especificidad, para no pisar nada más. */
.btn:not(:where(.btn-sm, .auth-btn, .cfgg-anadir-otro, .cfgg-todas)) { min-height: 42px; font-size: 15px; }
/* Secundario: relleno gris, sin borde (el «gray» de los botones de iOS). */
.btn-ghost { background: var(--relleno); border-color: transparent; }
.btn-ghost:hover { background: var(--relleno-hover); border-color: transparent; }
/* El de borrar pequeño (`.btn-sm-danger`) conserva su rojo. */
.btn-ghost:not(:where(.btn-sm-danger)), .btn-ghost:not(:where(.btn-sm-danger)):hover { color: var(--ink); }
.btn-danger-ghost { background: var(--danger-bg); border-color: transparent; }
.btn-primary { box-shadow: 0 1px 2px rgba(168, 90, 46, 0.18); }
.btn-primary:hover { box-shadow: 0 2px 10px rgba(236, 134, 86, 0.32); }
.campana { border-radius: 12px; }
.campana:hover { background: var(--relleno); border-color: transparent; }
/* Botones de solo icono (guardar, cancelar, borrar): rellenos, sin marco. */
.icon-btn { border-color: transparent; background: var(--relleno); border-radius: 9px; }
.icon-btn:hover, .icon-btn.cancel:hover { background: var(--relleno-hover); border-color: transparent; }
.icon-btn.save, .icon-btn.save:hover { border-color: transparent; }

/* «Añadir»: botón relleno en vez del contorno discontinuo de borrador. */
.cf-mas, .serv-add-btn, .serv-sug-btn {
  border-style: solid; border-color: transparent;
  background: var(--relleno); color: var(--brand-ink);
}
.cf-mas:hover, .serv-add-btn:hover, .serv-sug-btn:hover {
  border-color: transparent; background: var(--brand-soft); color: var(--brand-ink);
}
.serv-sug-btn .icon { color: var(--brand); }

/* ---- Campos: rellenos, como en iOS ------------------------------------------- */
.field-input, .combo-control, .perfil-control, .mini-select, .money-wrap, .perfil-search-wrap,
.tel-pais {
  background-color: var(--relleno);
  border-color: transparent;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.field-input:hover, .combo-control:hover, .perfil-control:hover, .mini-select:hover { background-color: var(--relleno-hover); }
.field-input:focus, .combo-control.focused, .perfil-control.open, .mini-select:focus {
  background-color: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}
/* El campo de dentro ya va sobre el relleno de su envoltorio. */
.combo-control .combo-input, .money-wrap .field-input, .perfil-search { background: transparent; }
.perfil-search-wrap { padding: 8px 12px; }
.perfil-search-wrap:focus-within { background-color: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.field-label { font-size: 14px; color: var(--ink-soft); }
/* La unidad («€», «%», «meses») va dentro del campo, no en una casilla aparte. */
.money-suffix { background: transparent; border-left: 0; padding-left: 4px; }
.money-wrap:focus-within { background-color: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.periodo-select:hover { background: var(--relleno); border-color: transparent; }

/* ---- Controles segmentados: pista gris, píldora blanca ----------------------- */
/* `.seg-tabs.filtro-subtabs` (las sub-pestañas del panel de filtros) tiene su
   propio aspecto, sin carril: se deja como está. */
.tabs-seccion, .seg-tabs:not(:where(.filtro-subtabs)), .cf-filtro, .cf-modo {
  background: var(--relleno);
  border-color: transparent;
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
}
.tab-seccion, .seg-tab, .cf-filtro-op, .cf-modo-op {
  border-radius: 9px;
  color: var(--ink-soft);
}
.tab-seccion.active, .seg-tab.active, .cf-filtro-op.activo, .cf-modo-op.activo {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(48, 41, 41, 0.08), 0 3px 8px rgba(48, 41, 41, 0.06);
}
/* La pista abraza sus opciones: una barra a todo lo ancho con dos opciones
   pegadas a la izquierda deja un hueco gris que no es nada. */
.tabs-seccion { width: fit-content; max-width: 100%; }
/* En el móvil, en cambio, ocupa el ancho y reparte las opciones a partes
   iguales, como un control segmentado de iOS (y si no caben, ruedan). */
@media (max-width: 760px) {
  .tabs-seccion { width: auto; }
  .tab-seccion { flex: 1 0 auto; justify-content: center; }
}

/* Las series de la gráfica (previsión, ingresos, gastos, resultado): el
   mismo carril gris que los controles segmentados, sin marco. */
.cfx3-series { background: var(--relleno); border-color: transparent; }
.cfx3-serie:hover { background: rgba(255, 255, 255, 0.6); }

/* ---- Estados: cápsulas --------------------------------------------------------- */
.badge { border-radius: 999px; padding: 5px 12px; }
.filtro-chip, .filtro-op { border-radius: 999px; }

/* ---- Listas y tablas ------------------------------------------------------------ */
.tabla { border-radius: var(--radius); }
.row-obra { border-bottom-color: transparent; position: relative; }
@media (min-width: 761px) {
  .row-obra:not(:where(.row-head)) { padding-top: 15px; padding-bottom: 15px; }
}
/* Separador sangrado: empieza donde empieza el texto, no en el borde. */
.row-obra:not(.row-head):not(:last-child)::after {
  content: '';
  position: absolute; left: 80px; right: 0; bottom: 0;
  /* Medio píxel: en pantallas Retina, un único píxel físico. */
  height: 1px; background: rgba(48, 41, 41, 0.12);
  transform: scaleY(0.5); transform-origin: bottom;
}
.row-head { background: transparent; color: var(--muted-2); border-bottom: 0.5px solid var(--separador); }
.row-head:hover { background: transparent; }
.row-obra:not(.row-head):hover { background: rgba(118, 106, 100, 0.045); }
.obra-avatar { border-radius: 11px; }
.cell-encargo-text { letter-spacing: -0.014em; }
/* Filas sueltas (gastos generales): rellenas, como celdas agrupadas. */
.otros-fila { border-color: transparent; background: rgba(118, 106, 100, 0.06); }

/* ---- Cifras destacadas y estados ---------------------------------------------- */
/* Las tres cifras de honorarios: tres losetas blancas iguales sobre la
   tarjeta tintada, sin marco. Lo que distingue cada cifra es su color (naranja
   la calculada, verde la propuesta, tinta el plazo), no la loseta: con el
   tinte de cada una, la calculada se perdía contra el fondo de la tarjeta. */
.hon-figure { border-color: transparent; }
.hon-card .hon-figure { background: rgba(255, 255, 255, 0.78); box-shadow: 0 0.5px 1px rgba(48, 41, 41, 0.04), 0 1px 4px rgba(48, 41, 41, 0.04); }
/* El modo que ya está en uso: seleccionado como en Ajustes, con el acento. */
.modo-card:disabled { background: var(--brand-softer); border-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(236, 134, 86, 0.55); }
/* Sin leer: ya lo dice el punto junto al título; el marco sobraba. */
.notif-card.unread { border-color: transparent; }
/* Avisos de la cuenta (acceso, kit de emergencia): tinte sin marco, y aire
   antes del botón que va debajo. */
.auth-aviso.error, .auth-aviso.ok, .auth-aviso.info { border-color: transparent; }
.auth-aviso.info { background: rgba(118, 106, 100, 0.07); }
.auth-aviso + .cuenta-acciones, div:has(> .auth-aviso) + .cuenta-acciones { margin-top: 14px; }
/* Error al cargar (CRM): en el móvil, el texto arriba y el botón debajo a lo
   ancho; al lado, el texto se partía palabra a palabra. */
@media (max-width: 760px) {
  .crm-error { flex-wrap: wrap; align-items: flex-start; }
  .crm-error-txt { flex: 1 1 calc(100% - 40px); }
  .crm-error > .btn { flex: 1 1 100%; }
}
/* Texto sobre la tarjeta naranja del coste en vivo: blanco casi pleno. El
   blanco al 60 % sobre el naranja de marca no llegaba a leerse (≈ 1,9 : 1). */
.live-label, .live-sub { color: rgba(255, 255, 255, 0.96); }
.live-note { color: rgba(255, 255, 255, 0.9); font-size: 13px; }

/* ---- Barra lateral, como la de macOS -------------------------------------------- */
.sidebar { background: #efede7; box-shadow: none; }
.sb-brand { box-shadow: none; }
.nav-group {
  text-transform: none; letter-spacing: 0;
  font-size: 12px; font-weight: 600; color: var(--muted-2);
  padding: 18px 12px 6px;
}
.nav-item { border-radius: 10px; color: var(--ink); font-size: 14px; }
/* Medidas de la barra de escritorio. En tableta la barra es un carril de
   iconos con la etiqueta debajo, y styles.css le da las suyas. */
@media (min-width: 1081px) {
  .sidebar { padding: 16px 12px; }
  .sb-brand { padding: 12px 12px 18px; }
  .nav-item { min-height: 36px; padding: 7px 11px; }
  .nav-item .nav-ic .icon { width: 19px; height: 19px; }
}
.nav-item:hover { background: rgba(48, 41, 41, 0.05); color: var(--ink); }
/* Selección rellena; sin el filete del lateral. */
.nav-item.active { background: rgba(236, 134, 86, 0.16); color: var(--brand-ink); }
.nav-item.active::before { display: none; }
/* El naranja, solo en la sección activa: la marca lo quiere como punto de
   atención, no repartido por toda la barra. */
.nav-ic { color: var(--muted); }
.nav-item:hover .nav-ic { color: var(--ink-soft); }
.nav-item.active .nav-ic { color: var(--brand); }
.nav-subitem { border-radius: 9px; }
.sb-alert { border-radius: 12px; border-color: transparent; }

/* ---- Barras de arriba: botones que flotan ---------------------------------------------- *
 * Los botones de la barra (campana, volver) son círculos y cápsulas blancas
 * casi opacas que flotan con una sombra corta: la barra en sí no tiene fondo
 * hasta que el contenido pasa por debajo (diseno-fluido.css). Casi opacos y
 * no de cristal, porque cuando la barra se vuelve cristal, un cristal claro
 * encima de otro dejaría de leerse.
 * --------------------------------------------------------------------------------------- */
:root {
  --boton-barra: rgba(255, 255, 255, 0.86);
  --boton-barra-sombra: 0 0 0 0.5px rgba(48, 41, 41, 0.08), 0 1px 2px rgba(48, 41, 41, 0.06), 0 3px 12px rgba(48, 41, 41, 0.06);
}
.main-bar .campana, .topbar .campana, .barra-atras {
  background: var(--boton-barra);
  border-color: transparent;
  border-radius: 999px;
  box-shadow: var(--boton-barra-sombra);
  color: var(--ink-soft);
}
.main-bar .campana:hover, .topbar .campana:hover, .barra-atras:hover { background: #fff; border-color: transparent; color: var(--ink); }
.main-bar .campana.active, .topbar .campana.active { background: var(--brand-soft); color: var(--brand-ink); }
.main-bar .campana-badge, .topbar .campana-badge { box-shadow: 0 0 0 2px #fff; }

/* Volver: arriba a la izquierda, siempre en el mismo sitio (fluido.js lo
   pone en la barra y oculta el enlace que cada pantalla llevaba dentro). */
.barra-atras {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  max-width: 42%; height: 38px; padding: 0 15px 0 9px;
  border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
}
.barra-atras[hidden] { display: none; }
.barra-atras svg { width: 19px; height: 19px; flex: none; }
.barra-atras span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-back[data-en-barra] { display: none; }

/* La cuenta, como en iOS: un círculo (también en la barra lateral). */
.sb-avatar, .topbar-cuenta .sb-avatar { border-radius: 50%; }

/* ---- Diálogos ------------------------------------------------------------------------ */
.modal { border-radius: 22px; }
.modal-title { font-size: 20px; }
.modal-actions .btn { min-width: 96px; }
.modal-datos > .modal-title, .modal-perfil > .modal-title { border-bottom-color: var(--separador); }
.modal-datos > .modal-actions { background: transparent; border-top-color: var(--separador); }

/* ---- Base táctil ------------------------------------------------------------------------ *
 * Sin agrandar la letra al girar el teléfono, y los controles se comportan
 * como controles: mantenerlos pulsados no selecciona su texto ni saca el
 * menú de copiar. El contenido (nombres, cifras, direcciones) sigue
 * pudiéndose seleccionar y copiar.
 * --------------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, .btn, [role="button"], .tab-item, .tab-seccion, .seg-tab, .cf-filtro-op, .cf-modo-op,
.cfx3-serie, .estado-dd, .link-mini, .link-back {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* Desplegables pequeños (costes: «12 · mensual») con la misma flecha que los
   demás de la app, no la del navegador, que en cada sistema es distinta. */
.mini-select {
  appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6462' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}

/* Menús: radios de su tamaño, filas redondeadas */
.menu-flot, .estado-menu, .fase-menu, .combo-panel, .perfil-panel { border-radius: 14px; padding: 6px; }
.menu-flot-item, .estado-menu-item, .fase-menu-item, .combo-item, .perfil-item { border-radius: 9px; }

/* ---- Estados vacíos ----------------------------------------------------------------------- */
.empty h2 { font-size: 22px; }
.empty-icon { width: 52px; height: 52px; color: var(--stone); }

/* ---- Móvil ------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .container { padding-top: 22px; }
  .page-title { font-size: 31px; }
  .page-head { margin-bottom: 24px; }
  .card { border-radius: 16px; }
  .kpi { border-radius: 16px; }
  .btn { border-radius: 13px; }
  .btn:not(:where(.btn-sm, .auth-btn, .cfgg-anadir-otro, .cfgg-todas)) { min-height: 48px; font-size: 16px; }
  .row-obra:not(.row-head):not(:last-child)::after { left: 74px; }
  .modal { border-radius: 16px; }
  .modal-overlay > .modal { border-radius: 16px 16px 0 0; }

  /* Cabecera: los botones, círculos de 44 (la zona de toque de iOS). En las
     pantallas de detalle, volver ocupa el sitio de la marca: solo la flecha,
     como en iOS. */
  .topbar .campana { width: 44px; height: 44px; border-radius: 50%; }
  .topbar-cuenta .sb-avatar { width: 36px; height: 36px; }
  .topbar .barra-atras { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .topbar .barra-atras svg { width: 22px; height: 22px; margin-left: -2px; }
  .topbar .barra-atras span { display: none; }
  .topbar.con-atras .topbar-brand { display: none; }

  /* La barra de pestañas flota: una cápsula separada de los bordes, con la
     pestaña activa marcada por una burbuja tintada (el material va en
     diseno-fluido.css). Ya no hace falta la rayita naranja de encima. */
  .tabbar {
    left: max(12px, var(--safe-l)); right: max(12px, var(--safe-r));
    bottom: max(10px, calc(var(--safe-b) - 10px));
    padding: 5px; gap: 0;
    border-radius: 31px;
    box-shadow:
      0 0 0 0.5px rgba(48, 41, 41, 0.08),
      0 2px 6px rgba(48, 41, 41, 0.06),
      0 12px 36px rgba(48, 41, 41, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  .tab-item { min-height: 52px; border-radius: 26px; gap: 2px; font-size: 11px; }
  .tab-item.active { background: rgba(236, 134, 86, 0.14); }
  .tab-item.active::after { display: none; }
  .tab-item:active { background: rgba(48, 41, 41, 0.06); }
  /* El contenido deja sitio para que lo último no quede bajo la barra. */
  .container { padding-bottom: calc(var(--tabbar-flota) + 28px); }
}
@media (max-width: 760px) and (prefers-reduced-transparency: no-preference) {
  .tab-item.active .nav-ic { color: var(--brand); }
}

/* ---- Móvil: pantalla a pantalla ------------------------------------------------------- *
 * Lo que en el teléfono delataba «una web metida en el móvil»: barras a todo
 * lo ancho que empujan el contenido, controles apilados de uno en uno,
 * tarjetas dentro de tarjetas. Solo hasta 760 px: el escritorio no cambia.
 * --------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Añadir (y actualizar) va junto al título grande, en un círculo de 44,
     como el «+» de las apps de iOS, en vez de una franja naranja a todo lo
     ancho encima de la lista. El texto sigue en el botón para el lector de
     pantalla; solo deja de verse. Con `:has` y no con otra marca: un
     navegador que no lo entienda se queda con la franja de siempre, que
     funciona, en vez de con un círculo vacío. */
  .page-head:has(.cab-accion) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px; row-gap: 14px; align-items: start;
  }
  .page-head:has(.cab-accion) > * { grid-column: 1 / -1; }
  .page-head:has(.cab-accion) > div:first-child { grid-column: 1; grid-row: 1; }
  .page-head:has(.cab-accion) > .cab-accion,
  .page-head:has(.cab-accion) > .cab-acciones { grid-column: 2; grid-row: 1; }
  .page-head:has(.cab-accion) > .cab-acciones { display: flex; flex-direction: row; gap: 8px; }
  /* Si la acción comparte caja con otros controles (el periodo del panel),
     la caja se deshace: la acción sube junto al título y el resto baja. */
  .page-head-tools:not(.cab-acciones):has(> .cab-accion) { display: contents; }
  .page-head-tools:not(.cab-acciones) > .cab-accion { grid-column: 2; grid-row: 1; }
  .page-head-tools:not(.cab-acciones):has(> .cab-accion) > :not(.cab-accion) { grid-column: 1 / -1; }
  .page-head:has(.cab-accion) .cab-accion {
    width: 44px; height: 44px; min-height: 44px; padding: 0; margin-top: -3px;
    border-radius: 50%; font-size: 0; gap: 0; justify-content: center;
  }
  .page-head:has(.cab-accion) .cab-accion .icon { width: 22px; height: 22px; margin: 0; }

  /* Ficha de una obra: «Datos de la obra» y «Convertir a PDF» uno al lado
     del otro, no dos losas apiladas; el estado, debajo y a su tamaño (era
     una barra a todo lo ancho que parecía un botón más). */
  .detalle-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .detalle-acciones > .btn { width: auto; min-width: 0; padding-left: 10px; padding-right: 10px; font-size: 15px; gap: 7px; }
  .detalle-acciones > :not(.btn) { grid-column: 1 / -1; justify-self: start; }
  .detalle-acciones > .fase-badge { justify-self: stretch; }

  /* Listado de obras: el buscador y «Filtros» comparten fila (el filtro, un
     botón de icono con su número), y fuera la papelera de cada fila: en el
     móvil se pulsa sin querer, y borrar una obra está dentro de su ficha. */
  .filtros-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .filtros-barra > * { grid-column: 1 / -1; }
  .filtros-barra > .filtro-busca { grid-column: 1; }
  .filtros-barra > .filtro-boton {
    grid-column: 2; position: relative;
    width: 48px; min-height: 48px; padding: 0; font-size: 0; gap: 0; justify-content: center;
  }
  .filtros-barra > .filtro-boton .icon { width: 20px; height: 20px; }
  .filtros-barra > .filtro-boton .filtro-boton-n { position: absolute; top: -5px; right: -5px; }
  .row-obra .cell-acciones { display: none; }

  /* Pestañas de sección: con cuatro (Contactos) la última asomaba cortada.
     Un poco menos de aire a los lados y caben las cuatro en 390 px. */
  .tab-seccion { padding-left: 10px; padding-right: 10px; }

  /* Panel: los últimos proyectos, como filas de una lista agrupada de iOS
     y no como tarjetas dentro de la tarjeta (cada una ocupaba media
     pantalla para un nombre, una fecha y una cifra). */
  .proy-grid { display: block; }
  .proy-card {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto;
    column-gap: 12px; row-gap: 2px; align-items: center;
    padding: 12px 0; background: transparent; border: 0; border-radius: 0;
    box-shadow: none; transform: none;
  }
  .proy-card:hover { background: transparent; box-shadow: none; transform: none; }
  .proy-card + .proy-card { border-top: 0.5px solid var(--separador); }
  .proy-top { display: contents; }
  .proy-avatar { grid-column: 1; grid-row: 1 / span 2; }
  .proy-top > .badge { grid-column: 3; grid-row: 1; justify-self: end; }
  .proy-name { grid-column: 2; grid-row: 1; min-height: 0; font-size: 15px; }
  .proy-meta { grid-column: 2; grid-row: 2; margin-top: 0; }
  .proy-foot { grid-column: 3; grid-row: 2; margin: 0; padding: 0; border: 0; justify-content: flex-end; }
  .proy-foot-label { display: none; }
  .proy-foot-val { font-size: 14px; }
  /* En una fila, la etiqueta de estado acompaña: a tamaño de etiqueta, no de botón. */
  .proy-top > .badge { font-size: 12.5px; padding: 3px 9px; }

  /* El periodo del panel, a 16 px: por debajo, iOS amplía la página al
     tocarlo y no la devuelve a su tamaño. */
  .dash-periodo .periodo-select { font-size: 16px; }
}

/* Móviles estrechos (el de la mayoría): título grande, pero que no parta en
   tres líneas el nombre de una obra. */
@media (max-width: 400px) {
  .page-title { font-size: 28px; }
}

/* ---- Zonas de toque: 44 × 44 como mínimo con el dedo ---------------------------- *
 * Lo que se ve puede ser más pequeño (un control segmentado de iOS mide 32);
 * lo que tiene que llegar a 44 es la zona que responde al dedo. Se agranda con
 * un pseudoelemento invisible, sin mover nada del diseño.
 * --------------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .tab-seccion, .seg-tab, .cf-filtro-op, .cf-modo-op, .cfx3-serie { min-height: 40px; }
  .cfx3-serie { width: 40px; height: 40px; }
  .tab-seccion, .seg-tab, .cf-filtro-op, .cf-modo-op, .cfx3-serie,
  .icon-btn, .row-delete, .row-accion, .doc-na-btn { position: relative; }
  /* Segmentos: hasta el borde de su carril (3 px por arriba y por abajo). */
  .tab-seccion::before, .seg-tab::before, .cf-filtro-op::before, .cf-modo-op::before,
  .cfx3-serie::before {
    content: ''; position: absolute; inset: -3px -1px;
  }
  /* Botones de icono de 32 px: 6 px de margen alrededor. */
  .icon-btn::before, .row-delete::before, .row-accion::before {
    content: ''; position: absolute; inset: -6px;
  }
  /* «No aplica» mide 36 de alto: 4 px más por arriba y por abajo. */
  .doc-na-btn::before { content: ''; position: absolute; inset: -4px 0; }
  /* Los desplegables pequeños, a 44 de alto: son lo que más se toca en costes. */
  .mini-select { min-height: 44px; }
}

/* ---- Más contraste -------------------------------------------------------------- *
 * Este rediseño separa las cosas con sombra y aire; quien pide más contraste
 * necesita los bordes de vuelta, y bien marcados.
 * --------------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --border: rgba(48, 41, 41, 0.42);
    --border-strong: rgba(48, 41, 41, 0.6);
    --separador: rgba(48, 41, 41, 0.4);
    --relleno: rgba(118, 106, 100, 0.16);
    --warn-bd: #c9a46a;
    --danger-bd: #c98e83;
  }
  .card, .kpi, .tabla, .doc-card, .cert-card, .proy-card, .modo-card, .acceso-card,
  .pf-card, .cf-card, .cfg-card, .notif-card, .hon-figure, .otros-fila, .dash-periodo,
  .field-input, .combo-control, .perfil-control, .mini-select, .money-wrap, .perfil-search-wrap,
  .tel-pais, .btn-ghost, .icon-btn, .cf-mas, .serv-add-btn, .serv-sug-btn,
  .auth-aviso.error, .auth-aviso.ok, .auth-aviso.info {
    border-color: var(--border-strong);
  }
  .tabs-seccion, .seg-tabs, .cf-filtro, .cf-modo, .cfx3-series {
    outline: 1px solid var(--border-strong); outline-offset: -1px;
  }
  .row-obra:not(.row-head):not(:last-child)::after { background: var(--separador); transform: none; }
  .nav-ic, .row-head, .nav-group { color: var(--ink-soft); }
  /* Los botones de las barras flotan con sombra: aquí, con borde. */
  .barra-atras, .main-bar .campana, .topbar .campana { background: var(--surface); box-shadow: 0 0 0 1px var(--border-strong); }
}