/* ============================================================================
 * TES Edificaciones — Hoja de estilos
 * Identidad visual TES: gama neutra y sobria, contrastada con el naranja de
 * marca (#EC8656) usado como punto de atención. Tipografía IBM Plex Sans
 * (Light para texto, SemiBold para énfasis), según el manual de marca.
 * ==========================================================================*/

/* La tipografía de marca (IBM Plex Sans) se declara en assets/fonts.css */

:root {
  /* Neutros cálidos derivados de Pantone 412C / 402C / 7527C */
  --bg: #f4f3ef;
  --surface: #ffffff;
  --surface-2: #faf8f5;
  --border: #e8e5de;
  --border-strong: #d8d8d0;   /* 7527 C */
  --ink: #302929;             /* 412 C */
  --ink-soft: #574c4b;
  --muted: #6f6462;
  --muted-2: #9a938a;
  --stone: #aaa89c;           /* 402 C */

  /* Marca (naranja 2024 C) */
  --brand: #ec8656;
  --brand-hover: #e06f3b;
  --brand-soft: #fdf0e9;
  --brand-softer: #fef7f3;
  --brand-ink: #a85a2e;       /* naranja legible sobre fondo claro */

  /* Alias para reutilizar reglas existentes */
  --accent: #ec8656;
  --accent-hover: #e06f3b;
  --ring: rgba(236, 134, 86, 0.26);
  --danger: #b3402f;
  --danger-bg: #faedea;
  --danger-bd: #ecd2cb;

  /* Aviso (arena tostada) */
  --warn: #c08a3e;
  --warn-ink: #8a6524;
  --warn-bg: #fbf3e6;
  --warn-bd: #efdcba;

  /* Estados de obra: neutros sobrios; el naranja marca la obra viva */
  --st-estudio: #8a8578;
  --st-ejecucion: #ec8656;
  --st-terminado: #5f7a63;
  --st-paralizada: #a6493c;
  --st-consultoria: #5a6e80;

  /* Acentos de categoría (chips, avatares): paleta desaturada de marca */
  --c-indigo: #ec8656;  --c-indigo-bg: #fdf0e9;
  --c-blue: #5a6e80;    --c-blue-bg: #eaeef2;
  --c-violet: #7a6a78;  --c-violet-bg: #f1edf0;
  --c-amber: #c08a3e;   --c-amber-bg: #f9f0e2;
  --c-green: #5f7a63;   --c-green-bg: #e9f0ea;
  --c-rose: #a6493c;    --c-rose-bg: #f8ece9;
  --c-teal: #4e7c7a;    --c-teal-bg: #e6f0ef;

  /* Color de datos (gráficos) */
  --data: #ec8656;
  --data-soft: #fdf0e9;

  --sidebar-w: 258px;
  --rail-w: 88px;          /* barra lateral reducida a iconos, en tablet */
  --topbar-h: 56px;        /* cabecera del móvil */
  --tabbar-h: 60px;        /* barra de pestañas inferior del móvil */

  /* Márgenes seguros del dispositivo (notch, isla dinámica, barra de gestos).
     Fuera de iOS valen 0 y no afectan a nada. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* Geometría rectilínea, en línea con el logotipo */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(48, 41, 41, 0.04), 0 1px 3px rgba(48, 41, 41, 0.05);
  --shadow-md: 0 4px 14px rgba(48, 41, 41, 0.06), 0 2px 6px rgba(48, 41, 41, 0.04);
  --shadow-lg: 0 18px 48px rgba(48, 41, 41, 0.16);
  --font: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Escala tipográfica: solo dos pesos reales (Light 400 · SemiBold 600) */
  --w-normal: 400;
  --w-bold: 600;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--brand-soft); color: var(--brand-ink); }

/* Foco visible y coherente en toda la app */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

.icon { display: inline-flex; width: 16px; height: 16px; }
.icon svg { width: 100%; height: 100%; display: block; }
.icon.mini { width: 14px; height: 14px; }

/* ---- Logotipo ------------------------------------------------------------ *
 * Se usa el logotipo original de marca: no se recrea con otra tipografía ni se
 * alteran sus proporciones. Sobre naranja se emplea la versión en blanco.
 * ------------------------------------------------------------------------- */
.logo-tes { display: block; height: 22px; width: auto; }
.logo-tes.on-brand { filter: brightness(0) invert(1); }

/* ---- Shell con barra lateral -------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; align-items: stretch; }

/* Cabecera y pestañas son exclusivas del móvil: aquí no existen. */
.topbar, .tabbar { display: none; }
/* Etiqueta corta: solo donde no cabe el nombre completo (raíl y pestañas). */
.nav-label-corto { display: none; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 6px;
}
/* Marca en la barra lateral: logotipo + descriptor, alineados a la izquierda */
.sb-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 10px 10px 18px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.sb-brand .logo-tes { height: 26px; }
.sb-claim {
  font-size: 11px; letter-spacing: 0.01em;
  color: var(--muted); line-height: 1.35; max-width: 15em;
}
.sb-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.nav-group {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted-2); padding: 18px 11px 8px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 14px; font-weight: 400;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
/* Marca de sección activa: filete naranja, el único acento de la navegación */
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px; background: var(--brand);
}
.nav-ic {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  color: var(--muted-2);
  transition: color 0.15s;
}
.nav-item:hover .nav-ic { color: var(--ink-soft); }
.nav-item.active .nav-ic { color: var(--brand); }
.nav-item .nav-ic .icon { width: 18px; height: 18px; }
.nav-label { flex: 1; }
.nav-badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 600; border-radius: 100px;
  font-variant-numeric: tabular-nums;
}
.sb-foot { margin-top: auto; padding: 6px; display: flex; flex-direction: column; gap: 10px; }
.sb-version { font-size: 11.5px; color: var(--muted-2); padding-left: 6px; letter-spacing: 0.04em; }

/* ---- Pie de sesión en la barra lateral ---------------------------------- */
.sb-sesion { display: flex; flex-direction: column; gap: 9px; }
.sb-sync {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 100px; align-self: flex-start;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  background: var(--surface-2); color: var(--muted);
}
.sb-sync .icon { width: 12px; height: 12px; }
.sb-sync.ok { background: #e9f0ea; color: #40593f; }
.sb-sync.pendiente { background: #fdf0da; color: #b45309; }
.sb-sync.error { background: var(--danger-bg); color: var(--danger); }
.sb-sync.cargando .icon { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.sb-usuario {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 7px 8px; border-radius: 10px;
  transition: background 0.15s;
}
.sb-usuario:hover { background: var(--surface-2); }
.sb-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 700;
}
.sb-email {
  font-size: 12px; color: var(--ink-soft); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cuenta-acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Pantallas de acceso ------------------------------------------------- */
.auth-pantalla {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px; background: var(--bg);
}
.auth-caja {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 34px 32px 28px;
}
.auth-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.auth-titulo { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.auth-sub { margin: 7px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.auth-ayuda { font-size: 12px; color: var(--muted-2); line-height: 1.45; }
.auth-btn { width: 100%; justify-content: center; min-height: 44px; margin-top: 4px; }

.auth-aviso {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 11px 13px; border-radius: 10px;
  font-size: 13px; line-height: 1.45;
}
.auth-aviso .icon { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.auth-aviso.error { background: var(--danger-bg); border: 1px solid #f0c9c4; color: var(--danger); }
.auth-aviso.ok { background: #e9f0ea; border: 1px solid #d5e2d6; color: #40593f; }
.auth-aviso.info { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft); }

.auth-nota-seguridad {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 13px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
.auth-nota-seguridad .icon { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--brand); }

.auth-pie {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted); text-align: center; line-height: 1.9;
}
.auth-separador { height: 1px; background: var(--border); margin: 14px 0; }
.auth-enlace {
  border: none; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--brand); font-weight: 560;
}
.auth-enlace:hover { text-decoration: underline; }
.auth-enlace.fuerte { font-weight: 700; }

/* Medidor de robustez de la contraseña */
.auth-fuerza { height: 4px; border-radius: 100px; background: var(--surface-2); overflow: hidden; margin-top: -8px; }
.auth-fuerza-barra { height: 100%; width: 0; border-radius: 100px; transition: width 0.25s ease, background 0.25s ease; background: var(--danger); }
.auth-fuerza.n1 .auth-fuerza-barra { background: #e11d48; }
.auth-fuerza.n2 .auth-fuerza-barra { background: #ea580c; }
.auth-fuerza.n3 .auth-fuerza-barra { background: #d97706; }
.auth-fuerza.n4 .auth-fuerza-barra { background: #40593f; }

.auth-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: girar 0.7s linear infinite;
}
.sb-alert {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px;
  background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: var(--radius-sm);
  color: var(--warn-ink); font-size: 12.5px; font-weight: 400;
  transition: background 0.15s, border-color 0.15s;
}
.sb-alert:hover { background: #f8ecd8; border-color: #e5cc9f; }
.sb-alert .icon { width: 16px; height: 16px; flex: none; color: var(--warn); }

.main { flex: 1; min-width: 0; }

/* ---- Contenedor ---------------------------------------------------------- */
/* El padding lateral se contrae con la pantalla y respeta los márgenes seguros
   del dispositivo, de modo que nada queda bajo el notch ni fuera de la vista. */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px max(40px, var(--safe-l)) 96px max(40px, var(--safe-r));
}

/* ---- Cabecera de página -------------------------------------------------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}
.page-title {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.2;
}
.page-sub { margin: 5px 0 0; color: var(--muted); font-size: 14px; }

.link-back {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: 13px; font-weight: 400;
  margin-bottom: 10px;
  transition: color 0.15s;
}
.link-back:hover { color: var(--ink); }
.link-back .icon { width: 15px; height: 15px; }

/* ---- Botones ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  min-height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn .icon { width: 16px; height: 16px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--stone); color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: var(--danger-bd); }
.btn-danger-ghost:hover { background: var(--danger-bg); }
.chev-right { transform: rotate(-90deg); width: 15px !important; height: 15px !important; }

/* ---- Tabla de obras ------------------------------------------------------ */
.tabla {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Columnas elásticas: ninguna impone un ancho mínimo que desborde la tabla
   cuando el contenido se estrecha (tablet en vertical). */
.row-obra {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(88px, 108px) minmax(96px, 124px) minmax(148px, 186px) 40px;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.row-obra:last-child { border-bottom: none; }
.row-obra:not(.row-head):hover { background: var(--surface-2); }
.row-head {
  cursor: default;
  background: var(--surface-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted-2);
  font-weight: 600;
  padding-top: 12px;
  padding-bottom: 12px;
}
.row-head:hover { background: var(--surface-2); }
.cell { min-width: 0; }
.cell-avatar { display: flex; }
.obra-avatar {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex: none;
  background: var(--chip-bg); color: var(--chip-fg);
}
.obra-avatar .icon { width: 20px; height: 20px; }
.cell-encargo { display: flex; flex-direction: column; gap: 2px; }
.cell-encargo-text {
  font-weight: 600; color: var(--ink); font-size: 15px;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cell-tipologia { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-fecha { color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.cell-ref { color: var(--ink-soft); font-size: 13.5px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.cell-acciones { display: flex; justify-content: flex-end; }
.row-delete {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-2);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s, background 0.14s, color 0.14s, border-color 0.14s;
}
.row-obra:hover .row-delete { opacity: 1; }
.row-delete:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bd); }
.row-delete .icon { width: 15px; height: 15px; }
.muted { color: var(--muted-2); }

/* ---- Badge / estado ------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--ink-soft);
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.badge-btn { cursor: pointer; transition: filter 0.15s, box-shadow 0.15s; }
.badge-btn:hover { filter: brightness(0.97); box-shadow: var(--shadow-sm); }
.badge-btn .chev { width: 14px; height: 14px; opacity: 0.6; margin-left: 1px; }

/* Pastillas tintadas por estado (tonos sobrios; el naranja = obra en marcha) */
.badge-estudio { background: #f2f1ec; color: #5f5a4f; }
.badge-ejecucion { background: #fdefe7; color: #a85a2e; }
.badge-terminado { background: #eaf0ea; color: #40593f; }
.badge-paralizada { background: #f8ece9; color: #8a3a2e; }
.badge-consultoria { background: #eaeff3; color: #3f5566; }

.badge-estudio .badge-dot, .badge-dot.badge-estudio { background: var(--st-estudio); }
.badge-ejecucion .badge-dot, .badge-dot.badge-ejecucion { background: var(--st-ejecucion); }
.badge-terminado .badge-dot, .badge-dot.badge-terminado { background: var(--st-terminado); }
.badge-paralizada .badge-dot, .badge-dot.badge-paralizada { background: var(--st-paralizada); }
.badge-consultoria .badge-dot, .badge-dot.badge-consultoria { background: var(--st-consultoria); }

.estado-dd { position: relative; display: inline-block; }
.estado-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 50;
  display: none;
  animation: pop 0.12s ease;
}
.estado-menu.open { display: block; }
.estado-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none; background: transparent;
  border-radius: 6px;
  font-size: 14px; color: var(--ink-soft);
  cursor: pointer; text-align: left;
}
.estado-menu-item:hover { background: var(--surface-2); }
.estado-menu-item.active { color: var(--ink); font-weight: 600; }
.estado-menu-item .icon { margin-left: auto; color: var(--ink); }

@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Estado vacío -------------------------------------------------------- */
.empty {
  text-align: center;
  padding: 72px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.empty-icon { width: 44px; height: 44px; color: var(--muted-2); margin-bottom: 6px; }
.empty h2 { margin: 8px 0 4px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.empty p { margin: 0 0 22px; color: var(--muted); }

/* ---- Tarjetas ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.card-title {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
}
.card-calc { background: var(--brand-softer); border-color: #f4e0d4; }

/* ---- Formulario de creación ---------------------------------------------- */
.form-card { padding: 12px 30px 24px; }
.form-section { padding: 22px 0; border-bottom: 1px solid var(--border); }
.form-section:first-child { padding-top: 18px; }
.form-section:last-of-type { border-bottom: none; }
.form-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.form-section-ic {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm); flex: none;
  background: var(--chip-bg); color: var(--chip-fg);
}
.form-section-ic .icon { width: 18px; height: 18px; }
.form-section-title { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.form-section-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 26px;
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-label {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: baseline; gap: 6px;
}
.field-unit {
  font-size: 11.5px; color: var(--muted-2); font-weight: 400;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 5px;
}
.field-input {
  width: 100%;
  padding: 11px 13px;
  min-height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.field-input::placeholder { color: var(--muted-2); }
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.field-input.inline { padding: 7px 10px; font-size: 14px; }

.form-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.form-note {
  margin: 14px 2px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ---- Combobox ------------------------------------------------------------ */
.combo { position: relative; }
.combo-control {
  display: flex; align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.combo-control.focused { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.combo-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  padding: 10px 12px;
  font-size: 14.5px; color: var(--ink);
  font-family: inherit;
}
.combo-input::placeholder { color: var(--muted-2); }
.combo-chev { color: var(--muted-2); margin-right: 10px; width: 16px; height: 16px; cursor: pointer; flex: none; }

.combo-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 60;
  display: none;
  max-height: 264px;
  overflow-y: auto;
  animation: pop 0.12s ease;
}
.combo-panel.open { display: block; }
.combo-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none; background: transparent;
  border-radius: 6px;
  font-size: 14px; color: var(--ink-soft);
  cursor: pointer; text-align: left;
}
.combo-item:hover { background: var(--surface-2); }
.combo-item.active { color: var(--ink); font-weight: 600; }
.combo-item .icon { margin-left: auto; color: var(--ink); }
.combo-add {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 9px 10px;
  margin-top: 4px;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  border-radius: 0 0 6px 6px;
  font-size: 14px; color: var(--accent);
  cursor: pointer; text-align: left;
}
.combo-add:hover { background: var(--surface-2); }
.combo-add .icon { color: var(--accent); }
.combo-add strong { font-weight: 600; }
.combo-hint, .combo-empty {
  padding: 9px 10px; font-size: 12.5px; color: var(--muted-2);
  border-top: 1px solid var(--border); margin-top: 4px;
}
.combo-empty { border-top: none; margin-top: 0; }

/* ---- Selector de perfil (arquitecto / promotor) ------------------------- */
.perfil-picker { position: relative; }
.perfil-control {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 14.5px; color: var(--ink); font-family: inherit;
  cursor: pointer; text-align: left; transition: border-color 0.15s, box-shadow 0.15s;
}
.perfil-control.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.perfil-control-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-control-txt.placeholder { color: var(--muted-2); }
.perfil-chev { color: var(--muted-2); width: 16px; height: 16px; flex: none; }
.perfil-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; display: none;
  max-height: 300px; overflow-y: auto; animation: pop 0.12s ease;
}
.perfil-panel.open { display: block; }
.perfil-search-wrap { display: flex; align-items: center; gap: 7px; padding: 6px 9px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.perfil-search-wrap .icon { color: var(--muted-2); width: 15px; height: 15px; flex: none; }
.perfil-search { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 14px; color: var(--ink); }
.perfil-list { display: flex; flex-direction: column; }
.perfil-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border: none; background: transparent; border-radius: 6px; cursor: pointer; text-align: left;
}
.perfil-item:hover { background: var(--surface-2); }
.perfil-item.active { background: var(--brand-soft); }
.perfil-item-name { font-size: 14px; color: var(--ink); font-weight: 400; }
.perfil-item-sub { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.perfil-item .icon { margin-left: auto; color: var(--brand-ink); }
.perfil-empty { padding: 14px 10px; font-size: 13px; color: var(--muted-2); text-align: center; }
.perfil-add {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px;
  margin-top: 4px; border: none; border-top: 1px solid var(--border); background: transparent;
  font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; text-align: left;
}
.perfil-add:hover { background: var(--surface-2); }
.perfil-add .icon { color: var(--accent); }

/* Celda de arquitecto/promotor en el detalle (nombre + ver ficha) */
.perfil-cell { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.perfil-goto {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-ink);
  font-size: 12px; font-weight: 600; transition: filter 0.15s;
}
.perfil-goto:hover { filter: brightness(0.96); }
.perfil-goto .icon { width: 12px; height: 12px; }

/* Modal de perfil: cabecera fija · cuerpo con scroll · pie con acciones */
/* Doble clase: gana a `.modal` (max-width 420px) sin depender del orden */
.modal.modal-perfil {
  max-width: 720px; width: 100%; padding: 0;
  display: flex; flex-direction: column; max-height: 88vh; overflow: hidden;
}
.modal-perfil > .modal-title {
  margin: 0; padding: 22px 28px 18px;
  font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
  text-transform: capitalize;
  border-bottom: 1px solid var(--border);
}
.modal-perfil-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 28px; }
.modal-perfil .form-section { padding: 22px 0; border-bottom: 1px solid var(--border); }
.modal-perfil .form-section:first-child { padding-top: 18px; }
.modal-perfil .form-section:last-child { border-bottom: none; padding-bottom: 6px; }
.modal-perfil .form-section-head { margin-bottom: 18px; }
.modal-perfil .form-grid { gap: 16px 22px; }
.modal-perfil .field-hint { margin: 0 0 16px; }
.modal-perfil > .modal-actions { padding: 16px 28px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
.perfil-error { display: none; margin: 0; padding: 12px 28px 0; font-size: 13px; color: var(--danger); font-weight: 600; }
.perfil-error.show { display: block; }

/* ---- Ficha de perfil (página): cabecera + tarjetas + edición en línea ---- */
.pf-header { margin-bottom: 22px; }
.pf-header-main { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.pf-avatar { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius); flex: none; background: var(--chip-bg); color: var(--chip-fg); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.pf-header-txt { flex: 1; min-width: 0; }
.pf-name { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.12; overflow-wrap: anywhere; }
.pf-tipo { display: inline-block; margin-top: 7px; padding: 3px 10px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 400; text-transform: capitalize; }
.pf-head-actions { display: flex; gap: 10px; flex: none; }
.pf-error { display: none; margin-top: 16px; padding: 11px 15px; background: var(--danger-bg); border: 1px solid var(--danger-bd); border-radius: var(--radius-sm); color: var(--danger); font-size: 13px; font-weight: 600; }
.pf-error.show { display: block; }

.pf-card { padding: 22px 26px; }
.pf-rows { display: flex; flex-direction: column; }
.pf-row { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 16px 20px; align-items: center; padding: 13px 0; border-top: 1px solid var(--border); }
.pf-row:first-child { border-top: none; padding-top: 4px; }
.pf-row.editing { align-items: start; }
.pf-label { font-size: 13px; color: var(--muted); font-weight: 400; min-width: 0; }
.pf-row.editing .pf-label { padding-top: 11px; }
/* Correos y URLs largas parten de línea en vez de estirar la fila. */
.pf-value { font-size: 14.5px; color: var(--ink); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.pf-value .field-input { width: 100%; }
.pf-dir div { line-height: 1.5; }

/* Campos: ancho completo, textarea, ayuda */
.field-wide { grid-column: 1 / -1; }
.field-area { resize: vertical; min-height: 44px; line-height: 1.5; font-family: inherit; }
.field-hint { margin: -8px 0 16px; font-size: 12.5px; color: var(--muted); }

/* Input de teléfono (país + número) */
.tel-input { display: flex; gap: 8px; }
.tel-pais {
  flex: none; width: 104px; padding: 10px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); font-family: inherit; font-size: 14px;
  color: var(--ink); outline: none; cursor: pointer;
}
.tel-pais:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.tel-num { flex: 1 1 auto; min-width: 96px; }

.perfil-web { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-ink); font-weight: 400; max-width: 100%; overflow-wrap: anywhere; }
.perfil-web:hover { text-decoration: underline; }
.perfil-web .icon { width: 13px; height: 13px; }

/* Chip de contacto con menú de acciones. Nunca sobresale de su columna: el
   texto (un correo puede ser larguísimo) se recorta con puntos suspensivos. */
.cc { position: relative; display: inline-block; max-width: 100%; min-width: 0; }
.cc-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  max-width: 100%; min-height: 40px;
  border: 1px solid var(--border-strong); border-radius: 100px; background: var(--surface);
  font-family: inherit; font-size: 14px; color: var(--ink); font-weight: 400; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cc-chip:hover, .cc-chip.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cc-chip > .icon { width: 15px; height: 15px; color: var(--brand); flex: none; }
.cc-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-chev { width: 14px; height: 14px; color: var(--muted-2); flex: none; }
.cc-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px; max-width: min(280px, 88vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; display: none; animation: pop 0.12s ease;
}
.cc-menu.open { display: block; }
.cc-action { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: 14px; color: var(--ink-soft); }
.cc-action:hover { background: var(--surface-2); color: var(--ink); }
.cc-action .icon { width: 16px; height: 16px; color: var(--brand); }

/* ---- Detalle: campos editables ------------------------------------------- */
.detalle-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.ref-chip {
  font-size: 13px; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--border-strong);
  padding: 3px 10px; border-radius: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.detalle-estado { align-self: flex-end; }
/* Acciones de la cabecera del detalle: exportar a PDF + estado de la obra */
.detalle-acciones {
  display: flex; align-items: center; gap: 10px;
  align-self: flex-end; flex: none;
}

.campos { display: flex; flex-direction: column; }
.campo {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  min-height: 56px;
}
.campo:last-child { border-bottom: none; }
.campo-label { font-size: 13.5px; color: var(--muted); font-weight: 400; }
.campo-valor {
  font-size: 15px; color: var(--ink); font-weight: 400;
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.campo-calc .campo-valor { font-variant-numeric: tabular-nums; }

.link-map {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.14s;
}
.link-map:hover { border-color: var(--accent); }
.link-map .icon { color: var(--ink-soft); }

.edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-2);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s, background 0.14s, color 0.14s, border-color 0.14s;
}
.campo:hover .edit-btn { opacity: 1; }
.edit-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border); }
.edit-btn .icon { width: 15px; height: 15px; }
.edit-btn.hidden { display: none; }

.inline-editor { display: flex; align-items: center; gap: 8px; width: 100%; }
.inline-editor .field-input { max-width: 320px; }
.inline-combo { width: 320px; max-width: 100%; }
.editor-actions { display: flex; gap: 4px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 8px; cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn.save { background: var(--accent); color: #fff; border-color: var(--accent); }
.icon-btn.save:hover { background: var(--accent-hover); }
.icon-btn.cancel { color: var(--muted); }
.icon-btn.cancel:hover { background: var(--surface-2); color: var(--ink); border-color: var(--muted-2); }

.tag-manual {
  font-size: 11px; font-weight: 600;
  color: var(--st-paralizada);
  background: var(--warn-bg); border: 1px solid var(--warn-bd);
  padding: 1px 7px; border-radius: 100px;
  letter-spacing: 0.01em;
}

/* ---- Zona peligrosa ------------------------------------------------------ */
.danger-zone { margin-top: 28px; display: flex; justify-content: flex-end; }

/* ---- Modal --------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(24, 24, 27, 0.32);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  z-index: 100;
  padding: 24px;
  animation: fade 0.14s ease;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 26px;
  max-width: 420px; width: 100%;
  animation: pop 0.16s ease;
}
.modal-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.modal-text { margin: 0 0 22px; color: var(--ink-soft); line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Dashboard: rejilla que se pliega sola ------------------------------ *
 * `auto-fit` + `minmax` reparte 3 · 2 · 1 columnas según el ancho REAL del
 * contenido, sin depender de media queries que ignoran el ancho de la barra
 * lateral. Es lo que evita que las tarjetas se estrujen en tablet.
 * ------------------------------------------------------------------------- */
/* Se usa flex, no grid: cuando en la última fila queda una sola tarjeta, ésta
   ocupa el ancho sobrante en vez de dejar un hueco a su derecha. */
.dash-grid-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 18px;
  align-items: stretch;
}
.dash-grid-3 > * { flex: 1 1 236px; min-width: 0; }
.dash-charts-3 > * { flex: 1 1 300px; }

/* KPIs de la primera fila */
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--chip-fg, var(--brand));
}
/* Si el selector de franja no cabe junto a la etiqueta, baja a su propia línea
   en lugar de empujarla fuera de la tarjeta. */
.kpi-top { display: flex; align-items: center; gap: 10px 12px; margin-bottom: 14px; flex-wrap: wrap; }

/* Selector de franja temporal (discreto: no compite con el dato) */
.periodo-select {
  margin-left: auto; flex: 0 1 auto; min-width: 0;
  max-width: 132px;
  padding: 4px 6px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; font-family: inherit;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  cursor: pointer; outline: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.periodo-select:hover { background: var(--surface-2); border-color: var(--border); color: var(--ink-soft); }
.periodo-select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); color: var(--ink-soft); }
.kpi-chip {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm); flex: none;
  background: var(--chip-bg); color: var(--chip-fg);
}
.kpi-chip .icon { width: 18px; height: 18px; }
.kpi-label { font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.01em; min-width: 0; flex: 1 1 auto; }
.kpi-value {
  font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink);
  line-height: 1.05; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-meter { height: 7px; border-radius: 100px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; margin-top: 13px; }
.kpi-meter-fill { height: 100%; border-radius: 100px; background: var(--chip-fg); transition: width 0.45s ease; }
.kpi-sub { font-size: 12.5px; color: var(--muted-2); margin-top: 9px; }

/* Tarjetas de gráfico (fila 2) */
.dash-charts-3 .chart-card { margin-bottom: 0; display: flex; flex-direction: column; padding: 20px 22px 22px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); min-height: 30px; }
.chart-head .card-title { margin-bottom: 0; min-width: 0; }
.chart-sub { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.chart-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 16px; }

/* €/m² medio por tipología */
.m2-list { display: flex; flex-direction: column; gap: 15px; }
.m2-row { display: flex; flex-direction: column; gap: 6px; }
.m2-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.m2-label { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-val { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m2-track { height: 8px; border-radius: 100px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.m2-fill { height: 100%; border-radius: 100px; background: var(--c-amber); transition: width 0.4s ease; }
.m2-n { font-size: 11.5px; color: var(--muted-2); }
.chart-card { margin-bottom: 0; }
.chart-empty { padding: 40px 8px; text-align: center; color: var(--muted-2); font-size: 14px; }

.donut-block { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.donut-wrap { position: relative; width: 168px; height: 168px; flex: none; }
.donut { width: 168px; height: 168px; transform: rotate(0deg); }
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.donut-total { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.donut-total-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.donut-legend { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; min-width: 0; }
.legend-item {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  padding: 5px 8px; border-radius: 8px; transition: background 0.14s;
}
.legend-item:hover { background: var(--surface-2); }
.legend-dot { width: 10px; height: 10px; border-radius: 4px; flex: none; }
.legend-label { color: var(--ink-soft); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Variante apilada: anillo arriba, leyenda debajo (columna estrecha) */
.donut-block.vertical { flex-direction: column; gap: 18px; align-items: stretch; }
.donut-block.vertical .donut-wrap { align-self: center; }
/* En vertical el eje principal es la altura: sin esto, el `flex-basis` de la
   leyenda reservaría 150px de alto aunque esté vacía. */
.donut-block.vertical .donut-legend { flex: 0 0 auto; width: 100%; min-width: 0; }

.barlist { display: flex; flex-direction: column; gap: 15px; padding-top: 4px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.bar-label {
  font-size: 13px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-track { height: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--brand); border-radius: 100px; transition: width 0.4s ease; min-width: 6px; }
.bar-val { font-size: 13px; color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* Variante compacta: etiqueta arriba, barra debajo (columna estrecha) */
.barlist.compact { gap: 14px; }
.barlist.compact .bar-row {
  grid-template-columns: 1fr auto;
  grid-template-areas: 'label val' 'track track';
  gap: 6px 10px; align-items: baseline;
}
.barlist.compact .bar-label { grid-area: label; }
.barlist.compact .bar-val { grid-area: val; }
.barlist.compact .bar-track { grid-area: track; height: 8px; }

/* ---- Dashboard: mini-list (últimas obras) ------------------------------- */
.card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head-row .card-title { margin-bottom: 0; }
.card-head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.card-head-tools .periodo-select { margin-left: 0; }
.link-mini { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--muted); font-weight: 400; }
.link-mini:hover { color: var(--ink); }
.link-mini .chev-right { width: 14px !important; height: 14px !important; }
.mini-list { display: flex; flex-direction: column; }
.mini-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 6px; border-top: 1px solid var(--border); cursor: pointer;
  transition: background 0.12s; border-radius: 8px;
}
.mini-row:first-child { border-top: none; }
.mini-row:hover { background: var(--surface-2); }
.mini-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-title { font-weight: 600; color: var(--ink); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-meta { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Dashboard: últimos proyectos (tarjetas) --------------------------- */
.proy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 14px; }
.proy-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 16px 18px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s;
}
.proy-card:hover { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.proy-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.proy-avatar {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--radius-sm); background: var(--chip-bg); color: var(--chip-fg);
}
.proy-avatar .icon { width: 18px; height: 18px; }
.proy-name { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proy-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.proy-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.proy-foot-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); }
.proy-foot-val { font-size: 14.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.empty-inline { text-align: center; padding: 48px 24px; }
.empty-inline .empty-icon { width: 40px; height: 40px; color: var(--muted-2); }
.empty-inline h2 { margin: 8px 0 4px; font-size: 18px; font-weight: 600; }
.empty-inline p { margin: 0 0 20px; color: var(--muted); }

/* ---- Segmented tabs (costes) -------------------------------------------- */
.seg-tabs {
  display: inline-flex; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 4px; border-radius: var(--radius-sm); margin-bottom: 24px;
}
.seg-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: none; background: transparent;
  border-radius: 8px; font-size: 14px; font-weight: 400; color: var(--muted);
  cursor: pointer; transition: background 0.14s, color 0.14s, box-shadow 0.14s;
}
.seg-tab .icon { width: 16px; height: 16px; }
.seg-tab:hover { color: var(--ink-soft); }
.seg-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }

/* ---- Costes: layout con panel de resultado ------------------------------ */
.coste-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.coste-main { min-width: 0; }
.coste-aside { position: sticky; top: 24px; }
.card-note { margin: -6px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.coste-fields { display: flex; flex-direction: column; }
.coste-fields.two {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
}
/* Etiqueta e importes comparten la fila mientras quepan; si no, los importes
   bajan a la línea siguiente en vez de salirse de la tarjeta. */
.coste-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px;
  flex-wrap: wrap;
  padding: 11px 2px; border-bottom: 1px solid var(--border);
}
.coste-fields.two .coste-field { border-bottom: none; padding: 0; flex-direction: column; align-items: stretch; gap: 6px; flex-wrap: nowrap; }
.coste-field:last-child { border-bottom: none; }
.coste-field-label { font-size: 13.5px; color: var(--ink-soft); font-weight: 400; flex: 1 1 180px; min-width: 0; }
/* En columna, `flex-basis` mide ALTO: hay que neutralizarlo o la etiqueta
   reserva 180px de altura y el campo se estira absurdamente. */
.coste-fields.two .coste-field-label { font-size: 13px; color: var(--muted); font-weight: 400; flex: 0 0 auto; }
.coste-fields.two .coste-field-inputs { flex: 0 0 auto; }
.coste-field-inputs { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: wrap; }

/* Grupo de input: campo + sufijo en su propia caja, nunca se solapan
   sin importar cuán largo sea el sufijo (€, km, h/día, L/100km…). */
.money-wrap {
  width: 168px; max-width: 100%;
  display: flex; align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.money-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.money-wrap .field-input {
  flex: 1 1 auto;
  min-width: 5ch;              /* garantiza sitio para varias cifras */
  border: none; background: transparent;
  text-align: right; font-variant-numeric: tabular-nums;
  box-shadow: none;
  padding-left: 8px; padding-right: 10px;
}
.money-wrap .field-input:focus { border: none; box-shadow: none; }
.coste-fields.two .money-wrap { width: 100%; }
.money-suffix {
  flex: 0 0 auto; display: flex; align-items: center;
  padding: 0 10px;
  font-size: 12px; color: var(--muted-2); font-weight: 400;
  white-space: nowrap;
  background: var(--surface-2);
  border-left: 1px solid var(--border);
}
.cada-prefix { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* "narrow" = campo corto (unidades, %, veces). Ancho suficiente para que el
   sufijo nunca recorte las cifras. */
.money-wrap.narrow { width: 136px; }
.coste-field-inputs.cada .money-wrap { width: 156px; }
.soft-row .money-wrap { width: 100%; }

.mini-select {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 9px 10px; font-size: 13.5px; color: var(--ink-soft); background: var(--surface);
  font-family: inherit; cursor: pointer; outline: none; min-width: 124px; max-width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mini-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* ---- Costes: subtarjetas (software / otros) ----------------------------- */
.coste-subcard { }
.coste-subcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.coste-subcard-head h3, .coste-subcard h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.coste-subcard > h3 { margin-bottom: 14px; }
.btn-sm { padding: 7px 12px; min-height: 34px; font-size: 13px; }
.soft-list { display: flex; flex-direction: column; gap: 10px; }
.soft-empty { font-size: 13px; color: var(--muted-2); padding: 6px 2px; }
/* Fila de concepto: tolera 3 o 4 campos y se reajusta sin recortar nada */
.soft-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.soft-row > .field-input { flex: 1 1 190px; min-width: 0; padding: 9px 11px; }
.soft-row .money-wrap { flex: 0 0 156px; width: auto; }
.soft-row .money-wrap.narrow { flex: 0 0 130px; width: auto; }
.soft-row .mini-select { flex: 0 0 auto; min-width: 128px; }
.soft-row .icon-btn { flex: none; margin-left: auto; }

/* ---- Costes: panel de resultado en vivo --------------------------------- */
.live-result {
  background: var(--brand); color: #fff;
  border-radius: var(--radius); padding: 24px 24px 20px;
  position: relative; overflow: hidden;
}
.live-label { font-size: 12px; color: rgba(255,255,255,0.88); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; position: relative; }
.live-value { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; margin: 8px 0 4px; line-height: 1; position: relative; }
.live-subs { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; position: relative; }
.live-sub { font-size: 13px; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; }
.live-note { margin: 16px 0 0; font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.5; position: relative; }
/* Desglose dentro del panel en vivo (honorarios) */
.live-breakdown { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.live-bd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.16); font-size: 13.5px; }
.live-bd-label { color: rgba(255,255,255,0.85); }
.live-bd-val { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.live-warn { margin: 14px 0 0; font-size: 12px; color: #fff; background: rgba(0,0,0,0.18); border-radius: 8px; padding: 8px 10px; line-height: 1.45; position: relative; }

/* ---- Honorarios: campo calculado (solo lectura) -------------------------- */
.field-input[readonly] { background: var(--surface-2); color: var(--ink-soft); cursor: default; }
.field-input[readonly]:focus { border-color: var(--border-strong); box-shadow: none; }

/* ---- Honorarios: aviso de costes sin configurar ------------------------- */
.aviso-costes {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 20px;
}
.aviso-costes > .icon { width: 20px; height: 20px; color: var(--warn); flex: none; margin-top: 1px; }
.aviso-costes strong { font-weight: 600; color: var(--warn-ink); font-size: 14.5px; }
.aviso-costes p { margin: 3px 0 0; font-size: 13px; color: var(--warn-ink); line-height: 1.5; }
.aviso-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* ---- Honorarios: tarjeta en el detalle de obra ------------------------- */
.hon-card {
  background: var(--brand-softer);
  border-color: #f4e0d4;
  padding: 24px 26px;
}
/* Cabecera: chip + título + botón editar */
.hon-card-header { display: flex; align-items: center; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.hon-chip {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-sm); background: var(--brand); color: #fff;
}
.hon-chip .icon { width: 20px; height: 20px; }
.hon-card-heading { flex: 1; min-width: 0; }
.hon-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.hon-subtitle { font-size: 12.5px; color: var(--muted); }
.hon-edit-btn { flex: none; }

/* Zona hero: dos casillas gemelas (calculados azul · propuestos verde) */
.hon-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 22px 0; align-items: stretch; }
.hon-figure {
  display: flex; flex-direction: column; gap: 12px; justify-content: center;
  padding: 18px 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--fig-bd); background: var(--fig-bg);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.hon-figure-calc { --fig-ink: var(--brand-ink); --fig-bg: #fef7f3; --fig-bd: #f4e0d4; --fig-soft: var(--brand-soft); --fig: 236,134,86; }
.hon-figure-prop { --fig-ink: #40593f; --fig-bg: #f2f6f2; --fig-bd: #d5e2d6; --fig-soft: #e9f0ea; --fig: 95,122,99; }
.hon-figure-prop.editing { border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(95, 122, 99, 0.18); }
.hon-figure.clickable { cursor: pointer; }
.hon-figure.clickable:hover { border-color: var(--c-green); box-shadow: 0 6px 18px rgba(95, 122, 99, 0.18); }
.hon-figure.clickable:focus-visible { outline: none; border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(95, 122, 99, 0.18); }
.hon-figure-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fig-ink); }
.hon-figure-prop .hon-figure-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hon-edit-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--c-green); text-transform: none; letter-spacing: 0; opacity: 0.75; transition: opacity 0.15s; }
.hon-edit-hint .icon { width: 12px; height: 12px; }
.hon-figure.clickable:hover .hon-edit-hint { opacity: 1; }
.hon-figure-value.placeholder { color: rgba(95, 122, 99, 0.55); font-weight: 600; }
.hon-figure-value { font-size: 33px; font-weight: 600; letter-spacing: -0.035em; color: var(--fig-ink); line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.hon-cur { font-size: 20px; font-weight: 600; color: var(--fig-ink); }
.hon-big-input {
  flex: 1; min-width: 0; border: none; background: transparent; padding: 0; margin: 0; outline: none;
  font-family: inherit; font-size: 33px; font-weight: 600; letter-spacing: -0.035em; line-height: 1;
  color: var(--fig-ink); font-variant-numeric: tabular-nums;
}
.hon-big-input::placeholder { color: rgba(95, 122, 99, 0.4); }
.hon-figure-pill {
  align-self: flex-start; display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 12px; border-radius: 6px;
  background: var(--fig-soft); color: var(--fig-ink);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.hon-figure-pill.muted { background: var(--surface-2); color: var(--muted); font-weight: 400; font-size: 12px; }
.hon-figure-pill.editable { padding-top: 3px; padding-bottom: 3px; }
.hon-pill-input {
  width: 46px; border: none; background: transparent; padding: 0; margin: 0; outline: none;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--fig-ink); text-align: right;
  font-variant-numeric: tabular-nums;
}
.hon-pill-input::placeholder { color: rgba(95, 122, 99, 0.4); }
.hon-pill-unit { font-size: 11px; font-weight: 600; opacity: 0.78; text-transform: uppercase; letter-spacing: 0.04em; }
.hon-hero-note { display: flex; align-items: center; gap: 7px; margin: -8px 0 4px; font-size: 12.5px; color: var(--warn-ink); }
.hon-hero-note .icon { width: 15px; height: 15px; flex: none; }

/* Composición del cálculo: barra apilada + leyenda */
.hon-composition { padding-top: 20px; border-top: 1px solid var(--border); }
.hon-comp-title { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.hon-bar { display: flex; height: 12px; border-radius: 100px; overflow: hidden; margin: 12px 0 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.hon-bar-seg { height: 100%; min-width: 2px; }
.hon-bar-seg:not(:last-child) { border-right: 2px solid var(--surface); }
.hon-bar-empty { width: 100%; }
.hon-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; min-width: 0; }
.hon-legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.hon-legend-dot { width: 10px; height: 10px; border-radius: 4px; flex: none; }
.hon-legend-label { color: var(--ink-soft); }
.hon-legend-val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.hon-warn { display: flex; align-items: center; gap: 7px; margin: 18px 0 0; font-size: 12.5px; color: var(--warn-ink); }
.hon-warn .icon { width: 15px; height: 15px; flex: none; }

.hon-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--brand-softer); border-color: #f4e0d4; }
.hon-cta-title { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.hon-cta-text p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }

/* ---- Costes: hero de resultado (resumen) -------------------------------- */
.hero-card { padding: 26px 28px; }
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.hero-icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; display: grid; place-items: center;
}
.hero-icon .icon { width: 22px; height: 22px; }
.hero-actions { display: flex; gap: 8px; }
.hero-label { font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 8px; }
.hero-value { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.05; margin: 2px 0; }
.hero-sub { font-size: 14px; color: var(--muted); }
.hero-breakdown { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.hero-metric {
  display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 150px;
  padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.hero-metric-label { font-size: 12px; color: var(--muted); font-weight: 400; }
.hero-metric-value { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.hero-review {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-size: 12.5px; color: var(--muted); font-weight: 400;
}
.hero-review .icon { width: 14px; height: 14px; }
.hero-review.due { color: var(--warn-ink); }

/* ---- Costes: desglose (resumen) ----------------------------------------- */
.resumen-list { display: flex; flex-direction: column; }
.resumen-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 120px); gap: 14px; align-items: center;
  padding: 11px 2px; border-bottom: 1px solid var(--border);
}
.resumen-row:last-child { border-bottom: none; }
.resumen-label { font-size: 13.5px; color: var(--ink-soft); }
.resumen-pagos { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.resumen-val { font-size: 14px; color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.resumen-hours { background: var(--surface-2); border-radius: 8px; padding-left: 10px; padding-right: 10px; margin-top: 6px; }

.sticky-actions { margin-top: 22px; }

/* ---- Notificaciones ------------------------------------------------------ */
.notif-list { display: flex; flex-direction: column; gap: 12px; }
.notif-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.notif-card.unread { border-color: var(--border-strong); }
.notif-ic { width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; }
.notif-ic .icon { width: 19px; height: 19px; }
.notif-ic.info { background: var(--data-soft); color: var(--data); }
.notif-ic.warn { background: var(--warn-bg); color: var(--warn); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--data); flex: none; }
.notif-msg { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.notif-meta { font-size: 12px; color: var(--muted-2); margin-top: 7px; }
.notif-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.notif-modal { max-width: 440px; text-align: left; }
.notif-modal-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; }
.notif-modal-ic .icon { width: 23px; height: 23px; }
.notif-modal-ic.info { background: var(--data-soft); color: var(--data); }
.notif-modal-ic.warn { background: var(--warn-bg); color: var(--warn); }
.notif-modal-more { margin: -10px 0 20px; font-size: 12.5px; color: var(--muted); }

/* Aviso de obras renumeradas al fusionar dos dispositivos */
.renum-lista { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 20px; text-align: left; }
.renum-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.renum-nombre { font-size: 13.5px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renum-cambio {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.renum-cambio .icon { width: 13px; height: 13px; transform: rotate(-90deg); }
.renum-cambio strong { color: var(--ink); font-weight: 700; }

/* ============================================================================
 * CONTROL DE CERTIFICACIONES
 * Entran las obras en ejecución. El presupuesto se reparte en capítulos
 * numerados; cada uno tiene su acento de color, que se repite en la barra de
 * reparto, en la fila y en su porcentaje: el mismo dato, siempre del mismo
 * color, para leerlo de un vistazo también en obra.
 * ==========================================================================*/

/* ---- Listado de obras en ejecución -------------------------------------- */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.cert-card {
  display: flex; flex-direction: column; gap: 14px;
  text-align: left; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}
.cert-card:hover { border-color: var(--stone); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cert-card-top { display: flex; align-items: center; gap: 12px; }
.cert-card-ic {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-ink);
}
.cert-card-ic .icon { width: 19px; height: 19px; }
.cert-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* Los encargos son largos: dos líneas antes de recortar, en vez de una. */
.cert-card-title {
  font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.cert-card-ref { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cert-card-chev { flex: none; color: var(--muted-2); transform: rotate(-90deg); }
.cert-card-datos { display: flex; gap: 22px; flex-wrap: wrap; }
.cert-card-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cert-card-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-2); }
.cert-card-val { font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cert-mini-bar {
  display: flex; height: 8px; border-radius: 100px; overflow: hidden;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
}
.cert-mini-seg { height: 100%; min-width: 2px; }
.cert-mini-seg + .cert-mini-seg { border-left: 2px solid var(--surface); }
.cert-card-pie { font-size: 12px; color: var(--muted); }

/* ---- Recuadro del total presupuestado ----------------------------------- */
.cert-hero { background: var(--brand-softer); border-color: #f4e0d4; padding: 22px 24px; }
.cert-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.cert-hero-campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cert-hero-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-ink); }
.cert-total-wrap { width: 288px; background: var(--surface); border-color: #eccdb9; }
.cert-total-wrap:focus-within { border-color: var(--accent); }
.cert-total-input {
  font-size: 29px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2;
  color: var(--ink); padding: 10px 12px;
}
.cert-total-input::placeholder { color: #dcc2b1; }
.cert-total-wrap .money-suffix { font-size: 16px; color: var(--brand-ink); background: var(--brand-soft); border-left-color: #f0d8c9; }
.cert-hero-hint { font-size: 12.5px; color: var(--muted); max-width: 42ch; }
.cert-add-btn { flex: none; }

/* Barra de reparto del presupuesto */
.cert-bar {
  display: flex; height: 14px; border-radius: 100px; overflow: hidden;
  background: var(--surface); box-shadow: inset 0 0 0 1px #eccdb9;
}
.cert-bar-seg { height: 100%; min-width: 3px; }
.cert-bar-seg:not(:last-child) { border-right: 2px solid var(--brand-softer); }
.cert-bar-vacia { width: 100%; }

.cert-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 12px; margin-top: 16px; }
.cert-res-item {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.cert-res-item.excedido { background: var(--danger-bg); border-color: var(--danger-bd); }
.cert-res-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-2); }
.cert-res-val { font-size: 19px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.cert-res-item.excedido .cert-res-val { color: var(--danger); }
.cert-res-pct { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cert-warn { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; font-size: 12.5px; color: var(--warn-ink); }
.cert-warn .icon { width: 15px; height: 15px; flex: none; }

/* ---- Lista de capítulos -------------------------------------------------- */
.cert-caps-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cert-caps-title { margin-bottom: 6px; }
.cert-caps-note { margin: 0; }
.cert-caps-cuenta { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cert-caps { display: flex; flex-direction: column; margin-top: 14px; }
.cert-cap {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 14px;
  padding: 13px 4px; border-top: 1px solid var(--border);
}
.cert-cap:first-child { border-top: none; }
.cert-cap-num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 8px; background: var(--cap-bg); color: var(--cap);
  font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cert-cap-main { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cert-cap-desc {
  font-size: 14.5px; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.cert-cap-track { height: 6px; border-radius: 100px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.cert-cap-fill { display: block; height: 100%; background: var(--cap); border-radius: 100px; }
.cert-cap-cifras { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cert-cap-importe { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cert-cap-pct { font-size: 12.5px; font-weight: 600; color: var(--cap); font-variant-numeric: tabular-nums; }
.cert-cap-acciones { display: flex; gap: 6px; }

.cert-caps-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 26px 16px 22px; }
.cert-caps-empty .empty-icon { margin-bottom: 2px; }
.cert-caps-empty h3 { margin: 4px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.cert-caps-empty p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; max-width: 44ch; }

.cert-caps-total {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding: 13px 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cert-ct-label { flex: 1; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }
.cert-ct-val { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.cert-ct-pct { font-size: 13.5px; font-weight: 600; color: var(--brand-ink); font-variant-numeric: tabular-nums; }

/* ---- Modal de capítulo --------------------------------------------------- */
.modal.modal-capitulo { max-width: 470px; }
.cert-modal-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.cert-modal-num {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-sm); background: var(--brand); color: #fff;
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cert-modal-head .modal-title { margin: 0; }
.cert-modal-sub { font-size: 12.5px; color: var(--muted); }
.cert-modal-body { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.cert-imp-wrap { width: 100%; }
.cert-pct-campo {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--brand-softer); border: 1px solid #f4e0d4;
  border-radius: var(--radius-sm); padding: 14px 15px;
}
.cert-pct-caja { display: flex; align-items: center; gap: 14px; }
.cert-pct-val {
  font-size: 24px; font-weight: 600; color: var(--brand-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em; line-height: 1;
  flex: none; min-width: 96px;
}
.cert-pct-track { flex: 1; display: block; height: 8px; border-radius: 100px; background: var(--surface); box-shadow: inset 0 0 0 1px #f0d8c9; overflow: hidden; }
.cert-pct-fill { display: block; height: 100%; background: var(--brand); border-radius: 100px; transition: width 0.18s ease; }
.cert-pct-nota { font-size: 12px; color: var(--muted); }
.cert-error { display: none; margin: 0 0 14px; font-size: 13px; color: var(--danger); font-weight: 600; }
.cert-error.show { display: block; }

/* ============================================================================
 * ADAPTACIÓN A CADA PANTALLA
 *
 * Tres formatos, no uno «encogido»:
 *   · Escritorio (>1080px) — barra lateral completa con nombres de sección.
 *   · Tablet (761–1080px)  — la lateral se reduce a un raíl de iconos, para que
 *                            el contenido no quede estrangulado en vertical.
 *   · Móvil (≤760px)       — cabecera arriba (marca · estado · cuenta) y barra
 *                            de pestañas abajo, al alcance del pulgar.
 *
 * Las rejillas de tarjetas usan `auto-fit`, así que se pliegan según el ancho
 * REAL disponible y no según el de la ventana.
 * ==========================================================================*/

/* El panel de resultado en vivo deja de ser una columna lateral en cuanto el
   formulario se quedaría demasiado estrecho: pasa arriba, a lo ancho. */
@media (max-width: 1080px) {
  .coste-layout { grid-template-columns: minmax(0, 1fr); }
  .coste-aside { position: static; order: -1; }
}

/* ---- Legibilidad en móvil y tablet -------------------------------------- *
 * Los textos auxiliares se dimensionaron para leerse a 60 cm en un monitor.
 * En una pantalla que se mira de pie, en obra y con luz de sol, 11px no se
 * lee: se sube todo el escalón secundario.
 * ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .card-title { font-size: 12px; letter-spacing: 0.1em; }
  .row-head { font-size: 11.5px; letter-spacing: 0.1em; }
  .kpi-label { font-size: 13px; }
  .kpi-sub, .chart-sub, .m2-n, .proy-foot-label, .donut-total-label,
  .field-unit, .notif-meta, .hero-metric-label, .form-section-sub,
  .resumen-pagos, .perfil-item-sub, .hon-figure-label, .hon-comp-title,
  .live-label, .live-note, .hon-pill-unit { font-size: 12.5px; }
  .field-label, .pf-label, .mini-meta, .proy-meta, .cell-tipologia,
  .hon-subtitle, .card-note, .form-note, .field-hint, .live-sub,
  .cell-ref, .notif-title { font-size: 13.5px; }
  .campo-label, .coste-field-label, .m2-label, .bar-label, .legend-label,
  .resumen-label, .notif-msg, .link-mini, .hon-legend-label,
  .m2-val, .bar-val, .legend-val { font-size: 14px; }
  .campo-valor, .pf-value, .cell-encargo-text, .badge, .cell-fecha { font-size: 15px; }
  .empty p, .empty-inline p { font-size: 14.5px; }
}

/* ---- Manejo con el dedo ------------------------------------------------- *
 * Se activa por ancho (móvil y tablet) y también por tipo de puntero, para
 * cubrir tablets grandes y portátiles táctiles. En obra se toca con guantes:
 * ningún control accionable baja de ~40px.
 * ------------------------------------------------------------------------- */
@media (max-width: 1080px), (pointer: coarse) {
  /* Sin hover, las acciones que solo aparecían al pasar el ratón serían
     invisibles: aquí están siempre presentes. */
  .edit-btn, .row-delete { opacity: 1; }
  .edit-btn, .row-delete, .icon-btn { width: 42px; height: 42px; }
  .badge-btn { min-height: 40px; padding: 8px 13px; }
  .btn-sm { min-height: 40px; padding: 9px 14px; font-size: 13.5px; }
  .seg-tab { min-height: 44px; }
  .link-back { min-height: 44px; font-size: 14px; }
  .link-mini, .link-map, .perfil-web { min-height: 40px; }
  .perfil-goto { min-height: 34px; padding: 6px 11px; font-size: 12.5px; }
  .periodo-select { min-height: 38px; padding: 7px 9px; font-size: 13px; }
  .combo-item, .perfil-item, .estado-menu-item, .cc-action { min-height: 44px; }
  .cc-chip { min-height: 42px; }
  .topbar-brand { min-height: 44px; }
  .mini-row, .legend-item { padding-top: 11px; padding-bottom: 11px; }
}

/* ---- Tablet: barra lateral reducida a raíl de iconos --------------------- */
@media (min-width: 761px) and (max-width: 1080px) {
  .sidebar { width: var(--rail-w); padding: 16px 8px; align-items: stretch; }
  .sb-brand { align-items: center; padding: 6px 4px 14px; }
  .sb-brand .logo-tes { height: 19px; }
  .sb-claim, .nav-group, .sb-alert, .sb-version, .sb-email { display: none; }

  .sb-nav { gap: 4px; margin-top: 12px; }
  .nav-item {
    flex-direction: column; justify-content: center; text-align: center;
    gap: 5px; padding: 10px 4px; min-height: 62px;
  }
  .nav-item .nav-ic { width: 24px; height: 24px; }
  .nav-item .nav-ic .icon { width: 21px; height: 21px; }
  .nav-label { display: none; }
  .nav-label-corto { display: block; font-size: 11.5px; line-height: 1.15; }
  .nav-item.active::before {
    left: 10px; right: 10px; top: auto; bottom: 3px; width: auto; height: 2px;
  }
  .nav-item .nav-badge { position: absolute; top: 5px; right: 12px; }

  .sb-foot { padding: 6px 0; align-items: center; }
  .sb-sesion { align-items: center; gap: 8px; }
  .sb-sync { padding: 7px; align-self: center; }
  .sb-sync .sb-sync-txt { display: none; }
  .sb-usuario { justify-content: center; padding: 6px; }

  .container { padding: 28px max(24px, var(--safe-l)) 76px max(24px, var(--safe-r)); }

  /* La tabla pierde la columna de referencia: con seis columnas, el encargo
     —lo único que de verdad identifica la obra— se quedaba en 20px. */
  .row-obra {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 100px) minmax(0, 180px) 40px;
  }
  .row-obra .cell-ref { display: none; }

  /* El nombre del concepto ocupa su propia línea; importes debajo */
  .soft-row > .field-input { flex: 1 1 100%; }
}

/* Tablet en vertical: cabe una columna menos todavía */
@media (min-width: 761px) and (max-width: 880px) {
  .row-obra { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 180px) 40px; }
  .row-obra .cell-fecha { display: none; }
}

/* Entre 1081px y 1240px la lateral completa deja poco sitio: menos aire. */
@media (min-width: 1081px) and (max-width: 1240px) {
  .container { padding: 32px 28px 84px; }
  .row-obra { padding-left: 16px; padding-right: 16px; gap: 12px; }
}

/* En pantallas táctiles no hay hover: las acciones que aparecían al pasar el
   ratón (editar, eliminar) serían invisibles e inalcanzables. */
@media (hover: none) {
  .edit-btn, .row-delete { opacity: 1; }
}

/* ---- Móvil: cabecera + barra de pestañas -------------------------------- */
@media (max-width: 760px) {
  html, body { font-size: 16px; }
  .app-shell { display: block; min-height: 100dvh; }
  .sidebar { display: none; }

  /* Cabecera fija: marca, estado de guardado y acceso a la cuenta */
  .topbar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 40;
    height: calc(var(--topbar-h) + var(--safe-t));
    padding: var(--safe-t) max(14px, var(--safe-r)) 0 max(14px, var(--safe-l));
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
  }
  .topbar-brand { display: inline-flex; align-items: center; min-width: 0; }
  .topbar-brand .logo-tes { height: 21px; }
  .topbar-acciones { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  .topbar-cuenta {
    display: inline-grid; place-items: center; flex: none;
    width: 44px; height: 44px; border-radius: 12px;
  }
  .topbar-cuenta .sb-avatar { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; }
  .topbar-cuenta .icon { width: 18px; height: 18px; }
  /* El estado de guardado se reduce a su icono; el texto vive en «Cuenta». */
  .sb-sync.compacto { padding: 9px; border-radius: 100px; }
  .sb-sync.compacto .sb-sync-txt { display: none; }
  .sb-sync.compacto .icon { width: 15px; height: 15px; }

  /* Barra de pestañas inferior */
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    gap: 2px;
    padding: 6px max(6px, var(--safe-l)) calc(6px + var(--safe-b)) max(6px, var(--safe-r));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border);
  }
  .tab-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 50px; padding: 5px 2px; border-radius: 10px;
    color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, background 0.15s;
  }
  .tab-item .nav-ic { width: 24px; height: 24px; color: inherit; }
  .tab-item .nav-ic .icon { width: 22px; height: 22px; }
  .tab-item .nav-label { display: none; }
  .tab-item .nav-label-corto { display: block; }
  .tab-item:active { background: var(--surface-2); }
  .tab-item.active { color: var(--brand-ink); }
  .tab-item.active .nav-ic { color: var(--brand); }
  .tab-item .nav-badge {
    position: absolute; top: 1px; left: 50%; margin-left: 5px;
    min-width: 17px; height: 17px; padding: 0 4px; font-size: 10.5px;
  }

  /* El contenido deja hueco por debajo para no quedar bajo las pestañas */
  .container {
    padding: 20px max(16px, var(--safe-l)) calc(var(--tabbar-h) + var(--safe-b) + 26px) max(16px, var(--safe-r));
  }

  /* -- Tipografía y controles propios del móvil --------------------------- */
  .page-title { font-size: 25px; }
  .page-sub { font-size: 14.5px; }
  .kpi-value { font-size: 28px; }
  .sb-version { font-size: 12.5px; }
  /* 16px evita el zoom automático de iOS al enfocar un campo */
  .field-input, .combo-input, .perfil-search, .mini-select, .tel-pais { font-size: 16px; }
  .btn { min-height: 46px; padding: 12px 18px; }
  .page-head .btn { width: 100%; }
  .periodo-select { max-width: 100%; }
  .link-back { margin-bottom: 6px; }

  /* -- Estructura ---------------------------------------------------------- */
  .page-head { flex-direction: column; align-items: stretch; }
  /* En obra: el botón de PDF a lo ancho y el estado debajo, al alcance del pulgar */
  .detalle-acciones { flex-direction: column; align-items: stretch; width: 100%; }

  /* -- Certificaciones ------------------------------------------------------ */
  .cert-grid { grid-template-columns: 1fr; }
  .cert-hero { padding: 18px 16px; }
  .cert-hero-top { flex-direction: column; align-items: stretch; gap: 16px; }
  .cert-hero-campo, .cert-total-wrap { width: 100%; }
  .cert-add-btn { width: 100%; }
  .cert-total-input { font-size: 26px; }
  /* La fila de capítulo pasa a dos líneas: número + descripción arriba,
     cifras y acciones debajo. Así nada se recorta a 390px. */
  .cert-cap {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'num desc desc' 'num cifras acciones';
    gap: 10px 12px;
  }
  .cert-cap-num { grid-area: num; align-self: start; }
  .cert-cap-main { grid-area: desc; }
  .cert-cap-cifras { grid-area: cifras; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; }
  .cert-cap-acciones { grid-area: acciones; }
  .cert-caps-head { flex-direction: column; align-items: stretch; gap: 6px; }
  .cert-pct-val { font-size: 22px; min-width: 88px; }
  /* Dos columnas justas: la tercera casilla ocupa la fila entera y no queda
     una media casilla suelta. */
  .cert-resumen { grid-template-columns: 1fr 1fr; }
  .cert-res-item:last-child { grid-column: 1 / -1; }
  /* El rótulo del total se lleva su propia línea; debajo, importe y porcentaje */
  .cert-ct-label { flex: 1 1 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .coste-fields.two { grid-template-columns: 1fr; }

  /* Fila de obra en dos líneas: el estado baja y nada desborda a lo ancho */
  .row-obra {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: 'av enc del' 'av est est';
    gap: 8px 12px;
    padding: 14px 16px;
  }
  .row-obra .cell-avatar { grid-area: av; align-self: start; }
  .row-obra .cell-encargo { grid-area: enc; }
  .row-obra .cell-estado { grid-area: est; }
  .row-obra .cell-acciones { grid-area: del; align-self: start; }
  .row-obra .cell-fecha, .row-obra .cell-ref { display: none; }
  .obra-avatar { width: 36px; height: 36px; border-radius: var(--radius-sm); }
  .row-head { display: none; }

  .seg-tabs { display: flex; width: 100%; overflow-x: auto; }
  .seg-tab { flex: 1; justify-content: center; }

  /* Ficha de obra: etiqueta encima del valor */
  .campo { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .campo-label { grid-column: 1 / -1; margin-bottom: 2px; }
  .inline-editor .field-input, .inline-combo { max-width: none; width: 100%; }

  /* Fichas de perfil: etiqueta encima del valor */
  .pf-header-main { flex-wrap: wrap; }
  .pf-head-actions { width: 100%; }
  .pf-head-actions .btn { flex: 1; justify-content: center; }
  .pf-row { grid-template-columns: minmax(0, 1fr); gap: 5px; align-items: start; }
  .pf-row.editing .pf-label { padding-top: 0; }
  .pf-card { padding: 20px 18px; }
  .card { padding: 22px 18px; }
  .form-card { padding: 6px 18px 20px; }

  /* Modal casi a pantalla completa, respetando los márgenes del dispositivo */
  .modal-overlay {
    padding: max(14px, var(--safe-t)) max(14px, var(--safe-r))
             max(14px, var(--safe-b)) max(14px, var(--safe-l));
  }
  .modal { padding: 22px 20px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; justify-content: center; }
  .modal-perfil { max-height: 92dvh; }
  .modal-perfil .form-grid { grid-template-columns: 1fr; }
  .modal-perfil > .modal-title { padding: 18px 20px 14px; font-size: 17px; }
  .modal-perfil-body { padding: 4px 20px; }
  .modal-perfil > .modal-actions { padding: 14px 20px 16px; }
  .perfil-error { padding: 12px 20px 0; }

  /* Campos con sufijo: se reparten el ancho y nunca recortan las cifras */
  .coste-field { flex-direction: column; align-items: stretch; gap: 9px; }
  /* Igual que arriba: en columna el `flex-basis` es altura, no anchura. */
  .coste-field-label, .coste-field-inputs { flex: 0 0 auto; }
  .coste-field-inputs { width: 100%; justify-content: flex-start; }
  /* Solo dentro de `.coste-field-inputs`, que es una fila: ahí el basis mide
     anchura. En honorarios el campo cuelga directo de `.coste-field`, que en
     móvil es una columna, y un basis en px se convertiría en altura. */
  .coste-field-inputs > .money-wrap { width: auto; flex: 1 1 148px; }
  .coste-field-inputs > .money-wrap.narrow { width: auto; flex: 1 1 130px; }
  .coste-field > .money-wrap { flex: 0 0 auto; width: 100%; }
  .coste-field-inputs .mini-select { flex: 1 1 130px; min-width: 0; }

  /* Conceptos dinámicos: nombre a línea completa, importes debajo */
  .soft-row > .field-input { flex: 1 1 100%; }
  .soft-row .money-wrap, .soft-row .money-wrap.narrow { flex: 1 1 130px; }
  .soft-row .mini-select { flex: 1 1 130px; min-width: 0; }

  /* Desglose: concepto arriba, «× N/año» debajo y el importe a la derecha.
     En una sola línea el concepto se quedaba en 16px de ancho. */
  .resumen-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'label val' 'pagos val';
    gap: 1px 12px;
  }
  .resumen-label { grid-area: label; }
  .resumen-pagos { grid-area: pagos; }
  .resumen-val { grid-area: val; align-self: center; }

  .tel-pais { width: 96px; }
  .notif-card { flex-wrap: wrap; padding: 16px 16px; }
  .notif-actions { width: 100%; justify-content: flex-end; }
  .aviso-costes { padding: 15px 16px; }
  .hero-card { padding: 22px 18px; }
  .hero-value { font-size: 36px; }
  .live-value { font-size: 34px; }
  .hon-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hon-card { padding: 20px 18px; }
  .hon-figure { padding: 16px 16px; }
  .hon-figure-value, .hon-big-input { font-size: 28px; }
  .danger-zone { justify-content: stretch; }
  .danger-zone .btn { width: 100%; }
  .cuenta-acciones { flex-direction: column; align-items: stretch; }
}

/* ---- Móviles estrechos (≤400px) ----------------------------------------- */
@media (max-width: 400px) {
  .container { padding-left: max(13px, var(--safe-l)); padding-right: max(13px, var(--safe-r)); }
  .card { padding: 18px 15px; }
  .pf-card { padding: 18px 15px; }
  .form-card { padding: 4px 15px 18px; }
  .row-obra { padding: 13px 13px; }
  .bar-row { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; }
  .barlist.compact .bar-row { grid-template-columns: 1fr auto; }
  .coste-field-inputs > .money-wrap,
  .coste-field-inputs > .money-wrap.narrow { flex: 1 1 100%; }
  .coste-field-inputs.cada .cada-prefix { flex: 1 1 100%; }
  .soft-row .money-wrap, .soft-row .money-wrap.narrow, .soft-row .mini-select { flex: 1 1 100%; }
  .tab-item { font-size: 11.5px; }
  .kpi-value { font-size: 26px; }
  .page-title { font-size: 23px; }
  .hero-value { font-size: 32px; }
  .donut-wrap, .donut { width: 148px; height: 148px; }
  .donut-total { font-size: 26px; }
  .tel-input { flex-wrap: wrap; }
  .tel-pais { width: 100%; }
  .tel-num { flex: 1 1 100%; }
}