/* estilos de Clientes y obras (Clientes, Solicitudes, Visitas, Obras, Partes, Agenda, Catálogo y Privacidad).
   Solo tokens var(--…); clases con prefijo co- para no chocar con otras hojas. Contraste AA con los pares de Contraste::PARES. */

/* ---------- formularios y bloques ---------- */
.co-form { max-width: 820px }
.modal .co-form, dialog .co-form { max-width: none }
.co-form h2 { margin-top: var(--s-5) } .co-form h2:first-of-type { margin-top: 0 }
.co-bloque { background: var(--cream); border-color: var(--line); margin-top: var(--s-5) }
.co-bloque legend { font-size: 1rem; color: var(--ink) }
.co-bloque > .hint:first-of-type { margin-top: 0 }
.co-nota { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); font-size: var(--fs-sm) }
.co-cambio { max-width: 420px; word-break: break-word }
.co-zona-baja { border-style: dashed }

/* datos en dos columnas (término · valor) */
.co-datos { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .45rem var(--s-4); margin: 0; font-size: var(--fs-sm) }
.co-datos dt { color: var(--ink-faint); font-weight: 600 }
.co-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere }
@media (max-width: 480px) { .co-datos { grid-template-columns: 1fr; gap: 0 } .co-datos dd { margin-bottom: .55rem } }

/* barra de herramientas de un listado: periodo a la izquierda, cambio de vista a la derecha */
.co-barra { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; justify-content: space-between; margin-bottom: var(--s-3) }
.co-barra .periodo { margin-bottom: 0 }
.co-vistas { display: inline-flex; gap: .3rem; padding: .25rem; background: var(--cream-2); border-radius: var(--r-full) }
.co-vistas .pill { min-height: 40px; background: transparent; color: var(--ink-soft); font-weight: 600 }
.co-vistas .pill:hover { background: var(--paper); color: var(--ink) }
.co-vistas .pill[aria-current] { background: var(--paper); color: var(--terra-700); box-shadow: var(--sh-1) }
.co-vistas .pill .i { width: 1.05em; height: 1.05em }

/* ---------- ventana «Cambiar estado»: opciones con su consecuencia ---------- */
.co-opciones { border: 0; padding: 0; margin: 0 0 var(--s-3) }
.co-opciones legend { font-size: 1rem; color: var(--ink); padding: 0; margin-bottom: var(--s-2) }
.co-opcion { display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 var(--s-2); padding: .75rem .9rem; min-height: var(--tap); border: 1px solid var(--field-border); border-radius: var(--r); background: var(--paper); cursor: pointer; font-weight: 400 }
.co-opcion:hover { border-color: var(--terra-600) }
.co-opcion input { margin-top: .2rem; flex: 0 0 auto }
.co-opcion > span { display: flex; flex-direction: column; gap: .15rem }
.co-opcion:has(input:checked) { border-color: var(--terra-600); background: var(--terra-50); box-shadow: inset 0 0 0 1px var(--terra-600) }
.co-opcion:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px }
.co-opcion.peligro:has(input:checked) { border-color: var(--err); background: var(--err-bg); box-shadow: inset 0 0 0 1px var(--err) }
/* el motivo solo se pide al elegir «perdida» (sin JS: funciona dentro de las ventanas) */
@supports selector(:has(*)) {
  .co-estado .co-motivo, .co-form .co-motivo { display: none }
  .co-estado:has(input[value="perdida"]:checked) .co-motivo,
  .co-form:has(select[data-estado-sel] option[value="perdida"]:checked) .co-motivo,
  .co-motivo:has([aria-invalid="true"]) { display: block }
}

/* aviso destacado dentro de una tarjeta */
.co-aviso-card { border-color: var(--warn-line); background: var(--warn-bg) }
.co-aviso-card h2 { display: flex; align-items: center; gap: .5rem; color: var(--warn-ink) }

/* ---------- tablero de solicitudes ---------- */
.co-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); align-items: start; scroll-snap-type: x proximity }
.co-col { background: var(--cream-2); border-radius: var(--r); padding: var(--s-3); scroll-snap-align: start; min-width: 0 }
.co-col h2 { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 0 var(--s-3); font-size: .95rem }
.co-kcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .65rem .75rem; margin-bottom: var(--s-2); box-shadow: var(--sh-1) }
.co-kcard-cab { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline }
.co-kcard-pie { margin-top: .5rem }
.co-col-vacia { margin: .2rem }
@media (max-width: 720px) { .co-board { grid-auto-columns: 86% } }

/* ---------- utilidades comunes de estas pantallas ---------- */
.co-fila { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center }
.co-fila > input, .co-fila > select { flex: 1 1 200px; width: auto }
.co-fila > .btn { flex: 0 0 auto }
.co-sub { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-soft) }
.co-h-sec { margin-top: var(--s-5); font-size: 1.05rem }
.co-num { max-width: 8rem; text-align: right; font-variant-numeric: tabular-nums }
.co-urgente { color: var(--warn-ink); font-weight: 600 }
.co-pre { white-space: pre-wrap; font-size: .75rem; max-height: 40vh; overflow: auto; background: var(--cream); padding: var(--s-2); border-radius: var(--r-sm) }
.co-sin-marco { border: 0; padding: 0; margin: 0; min-width: 0 }
.co-sin-marco > legend:not(.sr) { padding: 0; width: 100% }
.co-legend-h { margin: 0 0 var(--s-3) }
.co-sin-marco[disabled] input, .co-sin-marco[disabled] textarea, .co-sin-marco[disabled] select { background: var(--disabled-bg); color: var(--disabled-fg) }
.btn.co-peligro { color: var(--err-ink) } .btn.co-peligro:hover { background: var(--err-bg); color: var(--err-ink) }
.co-siguiente { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; justify-content: space-between }
.co-dia h2 { font-size: 1rem }

/* ---------- ficha de obra ---------- */
.co-estados { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: calc(-1 * var(--s-2)) 0 var(--s-4); padding: var(--s-2) var(--s-3); background: var(--cream-2); border-radius: var(--r) }
.co-estados form { margin: 0 }
.co-estados form:has(.co-peligro) { margin-left: auto }
.co-kpis { margin-bottom: var(--s-4) }
.co-facturar { margin-top: var(--s-4) }
.co-tareas { margin: 0; padding-left: 1.4rem }
.co-tareas li { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid var(--line-soft) }
.co-tareas li:last-child { border-bottom: 0 }
.co-tareas li::marker { color: var(--ink-faint); font-weight: 600 }
.co-tarea-acc { display: inline-flex; gap: .15rem } .co-tarea-acc form { display: inline-flex; margin: 0 }
.co-extra { border: 1px solid var(--line); border-radius: var(--r); background: var(--cream); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-3) }
.co-extra-cab { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center }
.co-extra-pie { margin-top: var(--s-3) }
.co-extra-nuevo { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) }
@media (max-width: 640px) { .co-extra-nuevo { grid-template-columns: minmax(0, 1fr) } .co-estados form:has(.co-peligro) { margin-left: 0 } }

/* ---------- partes ---------- */
.co-incid li { flex-wrap: wrap; align-items: flex-start }
.co-incid li > span { flex: 1 1 280px }
.co-incid-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; flex: 1 1 320px; margin: 0 }
.co-incid-form input { flex: 1 1 180px; width: auto; min-height: var(--tap) }
.co-incid-form .btn { flex: 0 0 auto }
.co-revision input.co-num { margin-left: auto; min-height: var(--tap) }
.co-devolver summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center }

/* ---------- catálogo ---------- */
.co-unidades th[scope="row"] { font-weight: 700; text-align: left }
.co-unidades td input:not([type="checkbox"]), .co-unidades td select { min-width: 5rem }

/* ---------- agenda ---------- */
.co-periodo-agenda { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: 0 }
.co-semana-actual { display: inline-flex; align-items: center; gap: .45rem; padding: 0 .9rem; font: 600 1rem var(--font-head); border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: var(--tap) }
.co-semana-actual .i { color: var(--terra-600) }
.co-leyenda { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 var(--s-3) }
.co-leyenda .co-ev { display: inline-block; padding: .1rem .55rem; border-radius: var(--r-full); font-size: .78rem }
/* colores por tipo (texto sobre fondo: pares AA de los tokens) */
.co-ev { color: var(--ink) }
.co-ev.ev-obra { background: var(--terra-tint); color: var(--terra-700) }
.co-ev.ev-visita { background: var(--info-bg); color: var(--info-ink) }
.co-ev.ev-ausencia { background: var(--cream-2); color: var(--ink-soft) }
.co-ev.ev-otro { background: var(--warn-bg); color: var(--warn-ink) }
.co-ev.conflicto { background: var(--err-bg); color: var(--err-ink); box-shadow: inset 3px 0 0 var(--err) }
/* mes: tabla de 7 columnas iguales que nunca se sale de la pantalla (table-layout fixed) */
.co-cal { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.co-cal th { padding: .45rem .2rem; text-align: center; background: var(--surface-2); font: 600 .75rem var(--font-head); text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--line) }
.co-cal th abbr { text-decoration: none }
.co-cal td { vertical-align: top; height: 104px; padding: .25rem; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); overflow: hidden; min-width: 0 }
.co-cal td:last-child { border-right: 0 } .co-cal tr:last-child td { border-bottom: 0 }
.co-cal td.fuera { background: var(--cream) }
.co-cal td.fuera .co-cal-n { color: var(--ink-faint) }
.co-cal td.hoy .co-cal-n { background: var(--terra); color: var(--surface) }
.co-cal td.elegido { box-shadow: inset 0 0 0 2px var(--terra-600) }
.co-cal-n { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .3rem; border-radius: var(--r-full); font-weight: 700; color: var(--ink); text-decoration: none }
.co-cal-n:hover { background: var(--cream-2); text-decoration: none }
.co-cal-evs { list-style: none; margin: .15rem 0 0; padding: 0 }
.co-cal-evs li { display: block; margin-top: 2px; padding: 1px 5px; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; line-height: 1.45 }
.co-cal-mas { display: block; color: var(--ink-soft); padding: 1px 5px }
.co-cal-puntos { display: none }
@media (max-width: 720px) {
  /* pantallas estrechas: el día muestra número y puntos de color; el detalle va en la lista de debajo */
  .co-cal td { height: 58px; padding: .15rem; text-align: center }
  .co-cal-n { min-width: 36px; height: 36px; font-size: .95rem }
  .co-cal-evs, .co-cal-mas { display: none }
  .co-cal-puntos { display: flex; justify-content: center; align-items: center; gap: 3px; margin-top: 2px; min-height: 8px }
  .co-cal .co-cal-puntos i.co-ev { width: 7px; height: 7px; border-radius: 50%; display: block; background: var(--terra); box-shadow: none }
  .co-cal .co-cal-puntos i.co-ev.ev-visita { background: var(--info) } .co-cal .co-cal-puntos i.co-ev.ev-ausencia { background: var(--ink-faint) }
  .co-cal .co-cal-puntos i.co-ev.ev-otro { background: var(--warn) } .co-cal .co-cal-puntos i.co-ev.conflicto { background: var(--err) }
  .co-cal-puntos b { font-size: .65rem; line-height: 1; color: var(--ink-soft) }
}
/* listas de citas (día elegido, semana y vista lista) */
.co-dia-det { margin-top: var(--s-4); scroll-margin-top: calc(var(--topbar-h) + var(--s-3)) }
.co-evs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2) }
.co-evs > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem var(--s-3); align-items: start; padding: .55rem .7rem; border-radius: var(--r-sm); border-left: 4px solid currentColor }
.co-evs > li .co-ev-hora { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap }
.co-evs > li .co-ev-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; color: var(--ink) }
.co-evs > li .co-ev-txt a { font-weight: 600 }
.co-evs > li .co-ev-txt .muted { color: var(--ink-soft) }
.co-evs > li.conflicto { box-shadow: none }
@media (max-width: 560px) { .co-evs > li { grid-template-columns: minmax(0, 1fr) } .co-evs > li .co-ev-est { justify-self: start } }
.co-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2) }
.co-semana-d { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-3); min-width: 0; display: flex; flex-direction: column; gap: var(--s-2) }
.co-semana-d.hoy { border-color: var(--terra-600); box-shadow: inset 0 3px 0 var(--terra) }
.co-semana-d h2 { display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; font-size: .9rem; margin: 0 }
.co-semana-d h2 span { color: var(--ink-soft); font-weight: 600 }
.co-semana-d .co-evs > li { grid-template-columns: minmax(0, 1fr); padding: .45rem .5rem }
.co-semana-d .co-ev-est { display: none }
.co-semana-mas { margin-top: auto; align-self: flex-start }
@media (max-width: 1100px) { .co-semana { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) } .co-semana-d .co-ev-est { display: block } }
@media (max-width: 560px) { .co-semana { grid-template-columns: minmax(0, 1fr) } }
.co-lista-d.hoy { border-color: var(--terra-600) }
/* formulario de agenda */
.co-recursos { margin-top: var(--s-4) }
.co-recursos legend { font-size: 1rem; color: var(--ink) }
.co-recursos-g { margin: var(--s-2) 0 0 }
.co-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 var(--s-3) }
.co-repetir { margin-top: var(--s-3) } .co-repetir summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; gap: .4rem }
.co-dias { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); border: 0; padding: 0; margin: var(--s-2) 0 0 }
.co-dias legend { font-size: var(--fs-sm); color: var(--ink-soft); padding: 0 }
.co-dias abbr { text-decoration: none }
.co-forzar { color: var(--err-ink); font-weight: 700 }
.co-conf { margin: .3rem 0 .4rem 1rem; padding: 0 }

/* ---------- móvil: objetivos táctiles de al menos 44 px ---------- */
@media (max-width: 720px) {
  .co-kcard .btn, .co-extra .btn, .co-tarea-acc .btn, .co-incid-form .btn { min-height: var(--tap) }
  .co-tarea-acc .btn.icon-only { min-width: var(--tap) }
  .co-barra .co-vistas { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .15rem }
  .co-vistas .pill { min-width: 0; padding-inline: .25rem; gap: .25rem; justify-content: center; min-height: var(--tap); font-size: .85rem }
}
@media (max-width: 720px) { table.t.stack.co-t td.num { text-align: left } table.t.stack.co-t td.num::before { text-align: left } }
@media (max-width: 720px) { .co-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) } .co-kpis .kpi-card { min-height: 0; padding: var(--s-3) } .co-kpis .kpi-value { font-size: 1.2rem } .co-kpis .kpi-label { font-size: .8rem } }