/* Estética de Nova CRM: ventana blanca de esquinas suaves sobre fondo gris,
   menú lateral sobre ese mismo gris, bordes de 1px casi invisibles, texto de
   13px, botones principales en negro y el rojo de marca solo como acento
   (logo, filete bajo el título). Tokens copiados de crm_nova_local. */
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --c-backdrop: #E6E6EB; --c-shell: #F7F7F8; --c-accent: #D71920;
  --c-surface: #ffffff; --c-low: #F7F7F8; --c-container: #F3F3F4; --c-high: #ECECEE; --c-highest: #E4E4E7;
  --c-on-surface: #18181B; --c-on-variant: #6B6B73; --c-outline: #A1A1AA; --c-outline-variant: #EBEBED;
  --c-primary: #18181B; --c-on-primary: #ffffff; --c-primary-hover: #000000;
  --c-secondary: #2a78d6; --c-secondary-container: #dbe9fb; --c-on-secondary-container: #0b3d78;
  --c-tertiary: #A6710A; --c-tertiary-container: #F5E1B8; --c-on-tertiary-container: #4A3400;
  --c-error: #B42318; --c-error-container: #FDE4E1; --c-on-error-container: #7A1410;
  --c-good: #1F9D55; --c-good-container: #DDF3E6; --c-on-good-container: #0F5A30;
  --c-night: #4B4FB0; --c-night-container: #E8E9F8;
  --shadow-app: 0 30px 60px -20px rgba(16, 16, 30, 0.18), 0 2px 6px rgba(16, 16, 30, 0.05);
  --shadow-pop: 0 0 0 1px rgba(16, 16, 20, 0.06), 0 12px 32px -4px rgba(16, 16, 20, 0.14), 0 2px 6px rgba(16, 16, 20, 0.05);
  --side-low: #EEEEF0; --side-high: #E8E8EB;
  color-scheme: light;
}
:root.dark {
  --c-backdrop: #050506; --c-shell: #111113; --c-accent: #E3212A;
  --c-surface: #161618; --c-low: #1C1C1F; --c-container: #212124; --c-high: #28282C; --c-highest: #313136;
  --c-on-surface: #F4F4F5; --c-on-variant: #A1A1AA; --c-outline: #71717A; --c-outline-variant: #2A2A2E;
  --c-primary: #F4F4F5; --c-on-primary: #18181B; --c-primary-hover: #ffffff;
  --c-secondary: #8AC0F5; --c-secondary-container: #14509a; --c-on-secondary-container: #dbe9fb;
  --c-tertiary: #D9A94A; --c-tertiary-container: #6B4D00; --c-on-tertiary-container: #F5E1B8;
  --c-error: #FF8A80; --c-error-container: #7A1410; --c-on-error-container: #FFDAD6;
  --c-good: #22C55E; --c-good-container: #12301f; --c-on-good-container: #b7efcd;
  --c-night: #A7ABFF; --c-night-container: #23264a;
  --shadow-app: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 40px -4px rgba(0, 0, 0, 0.6);
  --side-low: #1A1A1D; --side-high: #222226;
  color-scheme: dark;
}

* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { height: 100%; margin: 0 }
body {
  background: var(--c-backdrop); color: var(--c-on-surface);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 13.5px; line-height: 20px;
  font-feature-settings: 'cv11', 'ss01', 'tnum'; -webkit-font-smoothing: antialiased; overflow: hidden;
}
* { scrollbar-width: thin; scrollbar-color: var(--c-outline-variant) transparent }
*::-webkit-scrollbar { width: 8px; height: 8px }
*::-webkit-scrollbar-thumb { background: var(--c-outline-variant); border-radius: 8px }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; font-size: 18px; line-height: 1; user-select: none }
:where(a, button, summary, [role='tab'], [tabindex]):focus-visible { outline: 2px solid var(--c-outline); outline-offset: 2px }

/* ---------- Ventana */
@media (min-width: 1024px) { body { padding: 12px } }
#app-window { position: relative; display: flex; height: 100%; background: var(--c-shell); overflow: hidden }
@media (min-width: 1024px) { #app-window { border-radius: 18px; border: 1px solid var(--c-outline-variant); box-shadow: var(--shadow-app) } }

#sidebar { width: 232px; max-width: 85vw; flex-shrink: 0; background: var(--c-shell); display: flex; flex-direction: column; z-index: 40 }
#sidebar .logo { display: block; padding: 20px 20px 16px; text-decoration: none }
#sidebar .logo img { width: 120px; height: auto; display: block }
#sidebar .logo small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--c-outline) }
#nav-list { list-style: none; margin: 0; padding: 0 12px 8px; flex: 1; overflow-y: auto }
#nav-list .grp { padding: 20px 10px 6px; font-size: 11.5px; color: var(--c-outline) }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 0 10px; height: 32px; border-radius: 8px; font-size: 13px; color: var(--c-on-variant); text-decoration: none; transition: background-color 120ms, color 120ms; width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer; text-align: left }
.nav-link:hover { background: var(--side-low); color: var(--c-on-surface) }
.nav-link[aria-current="page"] { background: var(--side-high); color: var(--c-on-surface); font-weight: 500 }
.nav-link .count { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center; background: var(--c-error-container); color: var(--c-on-error-container); font-weight: 500 }
.nav-link .count.zero { background: var(--c-high); color: var(--c-on-variant) }
#sidebar-foot { padding: 16px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--c-on-variant) }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-outline-variant); flex-shrink: 0 }
.dot.ok { background: var(--c-good) } .dot.err { background: var(--c-error) }

#sidebar-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .1) }
@media (max-width: 1023px) {
  #sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform 200ms ease-in-out; box-shadow: var(--shadow-pop) }
  body.menu-open #sidebar { transform: none }
}
@media (min-width: 1024px) { #sidebar-backdrop { display: none !important } body.menu-closed #sidebar { display: none } }

#main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--c-surface); overflow: hidden }
@media (min-width: 1024px) { #main-col { margin: 6px 6px 6px 0; border-radius: 12px; border: 1px solid var(--c-outline-variant) } body.menu-closed #main-col { margin-left: 6px } }
#topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 48px; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid var(--c-outline-variant) }
@media (min-width: 640px) { #topbar { padding: 0 24px } }
#topbar .left, #topbar .right { display: flex; align-items: center; gap: 6px; min-width: 0 }
#page-title { font-size: 13.5px; font-weight: 500; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#page-title .crumb { color: var(--c-outline) }
#view-root { flex: 1; min-width: 0; overflow-y: auto; padding: 16px }
@media (min-width: 640px) { #view-root { padding: 24px } }
.view { display: grid; gap: 20px; max-width: 1400px; min-width: 0 }

/* ---------- Tipografía */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px }
h1 { font-size: 26px; line-height: 34px; letter-spacing: -0.025em; font-weight: 600; margin: 0 }
@media (max-width: 639px) { h1 { font-size: 22px; line-height: 30px } }
h2 { font-size: 16px; line-height: 24px; letter-spacing: -0.01em; font-weight: 600; margin: 0 }
.rule-under { display: block; width: 2rem; height: 2px; background: var(--c-accent); margin-top: 8px }
.eyebrow { font-size: 11.5px; line-height: 1; font-weight: 500; letter-spacing: .01em; color: var(--c-outline); margin-bottom: 6px }
.sub { color: var(--c-on-variant); font-size: 12.5px; line-height: 18px; margin-top: 6px }
.note { font-size: 12.5px; line-height: 18px; color: var(--c-on-variant); max-width: 80ch; margin: 0 }
.num { font-variant-numeric: tabular-nums }
.muted { color: var(--c-on-variant) } .bad { color: var(--c-error) } .warn { color: var(--c-tertiary) } .night { color: var(--c-night) } .good { color: var(--c-good) }

/* ---------- Botones (mismas variantes que Nova CRM) */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; padding: 0 12px; height: 32px; font-family: inherit; font-size: 13px; line-height: 16px; font-weight: 500; white-space: nowrap; user-select: none; cursor: pointer; border: 1px solid transparent; transition: background-color 150ms ease-out, color 150ms; text-decoration: none }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none }
.btn .material-symbols-outlined { font-size: 17px }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary) }
.btn-primary:hover { background: var(--c-primary-hover) }
.btn-secondary { background: var(--c-surface); color: var(--c-on-surface); border-color: var(--c-outline-variant); box-shadow: 0 1px 1px rgba(16, 16, 20, .04) }
.btn-secondary:hover { background: var(--c-low) }
.btn-ghost { background: transparent; color: var(--c-on-variant) }
.btn-ghost:hover { background: var(--c-low); color: var(--c-on-surface) }
.btn-destructive { background: var(--c-error); color: #fff }
:root.dark .btn-destructive { color: #3B0A06 }
.btn-icon { width: 32px; padding: 0; background: transparent; color: var(--c-on-variant) }
.btn-icon:hover { background: var(--c-container); color: var(--c-on-surface) }
.btn-icon .material-symbols-outlined { font-size: 19px }
.btn[data-loading] { color: transparent !important; pointer-events: none }
.btn[data-loading]::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-on-primary); border-top-color: transparent; animation: spin .6s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---------- Tarjetas */
.card { background: var(--c-surface); border: 1px solid var(--c-outline-variant); border-radius: 12px; padding: 16px; display: grid; gap: 12px; min-width: 0 }
.card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px }
.kpi { position: relative; overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-outline-variant); border-radius: 12px; padding: 16px }
.kpi .ico { position: absolute; top: 12px; right: 12px; font-size: 52px; opacity: .08 }
.kpi p { margin: 0 }
.kpi .lbl { font-size: 11px; line-height: 14px; letter-spacing: .03em; font-weight: 600; color: var(--c-on-variant); text-transform: uppercase; margin-bottom: 8px }
.kpi .val { font-size: 32px; line-height: 40px; letter-spacing: -0.03em; font-weight: 500 }
.kpi .hint { font-size: 12px; color: var(--c-on-variant); margin-top: 4px }
.kpi.alert .val { color: var(--c-error) }

.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start }
@media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr) } }
.scroll { overflow-x: auto; min-width: 0 }

/* ---------- Tablas */
table { border-collapse: collapse; width: 100%; font-size: 13px }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--c-outline-variant); text-align: left; white-space: nowrap }
th { font-size: 11.5px; font-weight: 500; letter-spacing: .01em; color: var(--c-outline); background: var(--c-surface); position: sticky; top: 0 }
td.r, th.r { text-align: right }
tbody tr { transition: background-color 120ms ease-out }
tbody tr:hover { background: var(--c-low) }
tbody tr.sel { background: var(--c-container) }
tbody tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--c-on-surface) }
tbody tr.click { cursor: pointer }
tfoot td { font-weight: 600 }
.totals td { border-top: 1px solid var(--c-outline); border-bottom: 0 }
.fmt td.t { color: var(--c-on-surface) }
.fmt td.lbl { color: var(--c-on-variant); font-weight: 600 }
.fmt tr.dom td { color: var(--c-outline) }
.fmt tr.alr td:first-child { box-shadow: inset 3px 0 0 var(--c-error) }
.fmt tfoot td { font-weight: 500; border-bottom: 0 }
.fmt tfoot tr.grand td { font-weight: 600; border-top: 1px solid var(--c-outline) }
.fmt .title { font-size: 14px; font-weight: 600; color: var(--c-on-surface); letter-spacing: -0.01em }
.empty { padding: 32px; text-align: center; color: var(--c-on-variant) }

/* ---------- Etiquetas */
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 9999px; padding: 1px 8px; font-size: 11.5px; line-height: 18px; font-weight: 500 }
.pill.FORMAL { background: var(--c-secondary-container); color: var(--c-on-secondary-container) }
.pill.INFORMAL { background: var(--c-good-container); color: var(--c-on-good-container) }
.pill.POR { background: var(--c-tertiary-container); color: var(--c-on-tertiary-container) }
.pill.abierta { background: var(--c-container); color: var(--c-on-variant) }
.pill.cerrada { background: var(--c-on-surface); color: var(--c-surface) }
.pill.ejemplo { background: var(--c-tertiary-container); color: var(--c-on-tertiary-container) }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center; background: var(--c-error-container); color: var(--c-on-error-container); font-weight: 500 }

/* ---------- Campos */
input[type=text], input[type=number], input[type=date], select, textarea {
  font: inherit; font-size: 13px; color: var(--c-on-surface); background: var(--c-surface); border: 1px solid var(--c-outline-variant);
  border-radius: 8px; padding: 5px 8px; height: 32px; transition: border-color 120ms
}
textarea { height: auto }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-outline); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-outline) 25%, transparent) }
input::placeholder, textarea::placeholder { color: var(--c-outline); opacity: 1 }
input:disabled, select:disabled { opacity: .55 }
input.mk { width: 200px }
input.money { width: 110px; text-align: right }
select#qSel { max-width: 260px; height: 30px }
.grid-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 28px }
.grid-params label { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--c-on-variant) }
.grid-params input { width: 100% }

.drop { border: 1.5px dashed var(--c-outline-variant); border-radius: 12px; padding: 36px 20px; text-align: center; display: grid; gap: 6px; justify-items: center; color: var(--c-on-variant); cursor: pointer; transition: background-color 120ms, border-color 120ms }
.drop:hover { background: var(--c-low) }
.drop.over { border-color: var(--c-on-surface); background: var(--c-container) }
.drop .material-symbols-outlined { font-size: 34px; color: var(--c-outline) }
.drop strong { color: var(--c-on-surface); font-weight: 600 }

.notice { padding: 10px 12px; border-radius: 8px; background: var(--c-tertiary-container); color: var(--c-on-tertiary-container); font-size: 12.5px; display: flex; gap: 8px; align-items: flex-start }
.notice.err { background: var(--c-error-container); color: var(--c-on-error-container) }
.notice.ok { background: var(--c-good-container); color: var(--c-on-good-container) }
.lock { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--c-container); color: var(--c-on-variant); font-size: 12.5px }

/* ---------- Avisos flotantes */
#toast-root { position: fixed; bottom: 16px; right: 16px; left: 16px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 460px; padding: 10px 14px; border-radius: 10px; background: var(--c-surface); color: var(--c-on-surface); box-shadow: var(--shadow-pop); font-size: 13px; animation: pop .16s cubic-bezier(.2, .8, .2, 1) }
.toast .dot { width: 6px; height: 6px }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }

/* ---------- Tablas legibles: contenedor con borde, encabezado con fondo,
   filas más altas y texto que puede partir en dos líneas. */
.tbl { overflow: auto; max-height: 70vh; min-width: 0; border: 1px solid var(--c-outline-variant); border-radius: 10px }
.tbl table, .ficha table { font-size: 13px }
.tbl th, .ficha th { background: var(--c-low); color: var(--c-on-variant); font-size: 12px; font-weight: 500; line-height: 16px; padding: 9px 12px; vertical-align: bottom; white-space: normal; border-bottom: 1px solid var(--c-outline-variant); z-index: 1 }
.tbl th .muted, .ficha th .muted { font-size: 11px; font-weight: 400 }
.tbl td, .ficha td { padding: 9px 12px; vertical-align: middle }
.tbl tbody tr:last-child td { border-bottom: 0 }
.tbl tfoot td { position: sticky; bottom: 0; background: var(--c-surface); border-top: 1px solid var(--c-outline); border-bottom: 0 }
.tbl tr.click:hover td { background: var(--c-low) }
.tbl tr.sel td { background: var(--c-container) }
td.who { vertical-align: top; white-space: normal; min-width: 170px; background: var(--c-surface) }
td.who strong { display: block; font-weight: 600 }
td.who .muted { display: block; font-size: 12px; margin-bottom: 4px }
tr.grp-start td { border-top: 1px solid var(--c-outline) }
tr.grp-start:first-child td { border-top: 0 }
#tFal tbody tr:hover { background: transparent }
.chip { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--c-container); font-size: 12px; margin: 1px 0 }
a.badge { text-decoration: none }

/* Ficha de una persona: título, cifras clave, tabla de días y cálculo del pago */
.ficha { display: grid; gap: 14px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--c-outline-variant) }
.ficha-head { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: flex-end }
.ficha-head h2 { font-size: 20px; line-height: 28px; letter-spacing: -0.02em }
.tiles { display: flex; flex-wrap: wrap; gap: 8px }
.tile { display: grid; gap: 2px; padding: 8px 14px; border: 1px solid var(--c-outline-variant); border-radius: 10px; min-width: 120px }
.tile span { font-size: 11.5px; color: var(--c-on-variant) }
.tile b { font-size: 16px; font-weight: 600 }
.tile.big { background: var(--c-on-surface); border-color: var(--c-on-surface) }
.tile.big span { color: var(--c-outline) } .tile.big b { color: var(--c-surface); font-size: 18px }
.tile.bad b { color: var(--c-error) } .tile.good b { color: var(--c-good) } .tile.night b { color: var(--c-night) }
.ficha .scroll { border: 1px solid var(--c-outline-variant); border-radius: 10px }
.ficha .fmt tbody tr:last-child td { border-bottom: 0 }
.fmt tr.dom td { background: var(--c-low) }
table.calc { max-width: 720px; border: 1px solid var(--c-outline-variant); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden }
table.calc td { white-space: normal }
table.calc tfoot td { font-size: 15px; font-weight: 600; border-top: 1px solid var(--c-outline); border-bottom: 0; padding: 11px 12px }
.tiles .btn { align-self: center }

/* Página de un trabajador con horas editables */
.back { justify-self: start; margin-left: -8px }
.btn.mini { height: 26px; padding: 0 8px; font-size: 12px }
.btn.mini .material-symbols-outlined { font-size: 15px }
.fmt.edit td { padding: 5px 8px }
.fmt.edit input.hr { width: 64px; height: 30px; padding: 3px 6px; text-align: right }
.fmt.edit input.hr.fix { color: var(--c-error); font-weight: 600; border-color: color-mix(in srgb, var(--c-error) 45%, var(--c-outline-variant)) }
.fmt.edit select { height: 30px; max-width: 160px }
.fmt.edit td.huella { white-space: normal; min-width: 120px }
.fmt.edit td.obs { white-space: normal; min-width: 180px }
a.who-link { color: inherit; text-decoration: none }
a.who-link:hover strong { text-decoration: underline }
.tbl tr.click td:first-child strong::after { content: ' ›'; color: var(--c-outline); font-weight: 400 }
.fmt.edit th, .fmt.edit td { padding-left: 6px; padding-right: 6px }
.fmt.edit td.huella { min-width: 0; max-width: 130px }
.fmt.edit select { max-width: 140px }

/* Ajustes por tipo de trabajador */
.aj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px }
@media (max-width: 520px) { .aj-grid { grid-template-columns: minmax(0, 1fr) } }
.aj { border: 1px solid var(--c-outline-variant); border-radius: 12px; padding: 16px; display: grid; gap: 10px; align-content: start }
.aj-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.aj h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em }
.aj .line { margin: 0; font-size: 13px; color: var(--c-on-variant); line-height: 36px }
.aj input.money { width: 96px } .aj input.hora { width: 64px; text-align: center }
table.precios { width: auto; min-width: 100%; border: 1px solid var(--c-outline-variant); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden }
table.precios th { background: var(--c-low); font-size: 12px; padding: 8px 10px; position: static }
table.precios td { padding: 6px 10px; white-space: normal }
table.precios tbody tr:last-child td { border-bottom: 0 }
.fmt.edit td.huella { white-space: nowrap; max-width: none; font-size: 12px; color: var(--c-on-variant) }
.aj .line { line-height: 34px }

/* Ajustes: secciones a todo el ancho, tablas con columnas fijas y campos alineados */
.aj-grid { grid-template-columns: minmax(0, 1fr); max-width: 1100px }
.aj-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 20px; align-items: start }
@media (max-width: 860px) { .aj-cols { grid-template-columns: minmax(0, 1fr) } }
table.precios { table-layout: fixed; width: 100%; min-width: 0 }
table.precios col.w-num { width: 130px } table.precios col.w-pct { width: 100px } table.precios col.w-ej { width: 150px }
table.precios td:first-child, table.precios th:first-child { white-space: normal }
table.precios td { white-space: nowrap }
table.precios input.money { width: 100% }
.campos { display: grid; gap: 8px; align-content: start }
.campos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px }
@media (max-width: 860px) { .campos.dos { grid-template-columns: minmax(0, 1fr) } }
.campo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border: 1px solid var(--c-outline-variant); border-radius: 10px; font-size: 13px; color: var(--c-on-variant) }
.campo .val { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0 }
.campo .val small { font-size: 12px; color: var(--c-outline); min-width: 0 }
.campo input.money { width: 80px } .campo input.hora { width: 72px }
.campo .val small { min-width: 34px }
.tw { overflow-x: auto; min-width: 0 }
@media (max-width: 640px) {
  table.precios { table-layout: auto }
  table.precios .opt { display: none }
  table.precios td:first-child { min-width: 120px }
  table.precios input.money { width: 90px }
  .campo { flex-wrap: wrap }
}
/* Que ningún bloque obligue a la página a ser más ancha que la pantalla */
.view > *, .card > *, .aj > *, .aj-cols > *, .ficha > * { min-width: 0 }
@media (max-width: 640px) { select#qSel { max-width: 150px } #page-title .crumb { display: none } }
table.precios td:first-child { min-width: 110px }
@media (max-width: 640px) { table.precios input.money { width: 74px; padding: 3px 5px } table.precios td, table.precios th { padding: 6px 6px } table.precios td:first-child { min-width: 90px } .campo { flex-wrap: nowrap } .campo span:first-child { min-width: 0 } }

/* Ventana emergente (doble clic en la columna Centro de costo) */
dialog#dlgCC { border: 1px solid var(--c-outline-variant); border-radius: 12px; background: var(--c-surface); color: var(--c-on-surface); box-shadow: var(--shadow-pop); padding: 0; max-width: min(420px, calc(100vw - 32px)) }
dialog#dlgCC::backdrop { background: rgba(16, 16, 20, .45) }
dialog#dlgCC section { display: grid; gap: 12px; padding: 18px }
dialog#dlgCC h2 { font-size: 16px; line-height: 24px; margin: 0 }
dialog#dlgCC textarea { width: 100%; height: auto }
th.cc-col { cursor: help }