/* Shell (sidebar + encabezado) y maquetacion de las pantallas existentes.
 * Solo selecciona clases que las pantallas YA renderizan -- ningun cambio de
 * markup dentro de UsersScreen/SchedulerScreen/MyScheduleScreen/
 * FieldReportForm. Colores siempre via tokens de base.css. */

/* ===================== Sidebar ===================== */
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  padding: 1rem 0.75rem;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background: var(--color-sidebar-bg);
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.5rem 1.25rem;
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.app-sidebar__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-accent);
  color: #FFFFFF;
}
.app-sidebar__logo .icon { width: 20px; height: 20px; }

.app-sidebar__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.925rem;
  font-weight: 500;
  text-decoration: none;
}
.nav-item__icon { display: inline-flex; }
.nav-item .icon { width: 18px; height: 18px; flex: none; }
.nav-item[href]:hover { background: var(--color-surface-hover); color: var(--color-text); }
.nav-item[aria-current="page"],
.nav-item[aria-current="page"]:hover {
  background: var(--color-accent-soft);
  box-shadow: inset 3px 0 0 var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}

/* "Próx.": sin href (no navega); atenuado siempre, sin hover. */
.nav-item--soon { color: var(--color-text-disabled); cursor: default; }
.nav-item__badge {
  margin-left: auto;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.app-backdrop { display: none; }

/* ===================== Area principal + encabezado ===================== */
.app-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}
body.is-login .app-main { margin-left: 0; }

/* tecnico_operativo en escritorio: sin sidebar, contenido a ancho completo.
 * Su recorrido no pasa por el menu (Mi agenda <-> formulario, y el redirect
 * de renderView() lo lleva siempre a Mi agenda). En movil conserva el panel. */
@media (min-width: 768px) {
  body[data-role="tecnico_operativo"] .app-sidebar { display: none; }
  body[data-role="tecnico_operativo"] .app-main { margin-left: 0; }
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--header-height);
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.app-header__menu { display: none; }
.app-header__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.app-header__icon-btn {
  justify-content: center;
  width: 36px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--color-text-muted);
}
.app-header__icon-btn .icon { width: 18px; height: 18px; }
.app-header__user {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.5rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  white-space: nowrap;
}
.app-header__user .icon { width: 18px; height: 18px; }
.btn__icon { display: inline-flex; }

#app {
  width: 100%;
  max-width: 1200px;
  padding: 1.5rem;
}

/* ===================== Login ===================== */
body.is-login #app {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  min-height: 100vh;
  background: var(--color-sidebar-bg);
}
.login-form {
  width: min(380px, 100%);
  padding: 2rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.login-form button[type="submit"] {
  justify-content: center;
  width: 100%;
  margin-top: 1.5rem;
}

/* ===================== Encabezados de pantalla ===================== */
.users-screen__header,
.clients-screen__header,
.scheduler-screen__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.users-screen__header h1,
.clients-screen__header h1,
.scheduler-screen__header h1 { margin: 0; }
.users-screen__header,
.clients-screen__header { justify-content: space-between; }
.users-screen__new,
.clients-screen__new,
.scheduler-screen__new {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}
.users-screen__new:hover:not(:disabled),
.clients-screen__new:hover:not(:disabled),
.scheduler-screen__new:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ===================== Usuarios ===================== */
.users-screen__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.users-screen__toolbar label { margin: 0; }
.users-screen__search { flex: 1 1 260px; width: auto; }
.users-screen__status-filter { width: auto; }
/* Aviso no bloqueante (role="status"): la accion SI se hizo -- ambar, no el
 * rojo de [role="alert"]. #92400E sobre #FFFBEB = 6,84:1. */
.users-screen__notice {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-sm);
  background: #FFFBEB;
  color: #92400E;
  font-size: 0.9rem;
}
/* Vacia: sin caja visible pero presente en el arbol de accesibilidad (no
 * display:none, que la sacaria igual que el atributo hidden). */
.users-screen__notice:empty { margin: 0; padding: 0; border: 0; }
.users-table tr.is-inactive td:not(:last-child) { color: var(--color-text-muted); }
.users-table__badge {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}
.users-table td:last-child { text-align: right; white-space: nowrap; }
.users-table td button + button { margin-left: 0.35rem; }
.users-table__deactivate { border-color: var(--color-danger-border); color: var(--color-danger); }
.users-table__deactivate:hover:not(:disabled) { background: var(--color-danger-bg); }
.users-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

/* ===================== Clientes ===================== */
.clients-screen__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.clients-screen__toolbar label { margin: 0; }
.clients-screen__search { flex: 1 1 260px; width: auto; }
.clients-screen__status-filter { width: auto; }
.clients-screen__empty { color: var(--color-text-muted); }
.clients-table td:last-child { text-align: right; white-space: nowrap; }
.clients-table td button + button { margin-left: 0.35rem; }
.clients-table tr.is-inactive td:not(:last-child) { color: var(--color-text-muted); }
.clients-table__badge {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}
.clients-table__deactivate { border-color: var(--color-danger-border); color: var(--color-danger); }
.clients-table__deactivate:hover:not(:disabled) { background: var(--color-danger-bg); }
.clients-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

/* ===================== Historial (US-019) ===================== */
.history-screen__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.history-screen__header h1 { margin: 0; }
/* Live region SIEMPRE presente (una oculta no se anuncia): vacia no ocupa lugar. */
.history-screen__notices { margin: 0; }
.history-screen__notice {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-sm);
  background: #FFFBEB;
  color: #92400E;
  font-size: 0.9rem;
}
.history-screen__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.history-filter { flex: 1 1 170px; min-width: 0; }
.history-filter label { margin: 0 0 0.3rem; line-height: 1.2; }
/* Mismo alto exacto para select y date: si no, las etiquetas (alineadas por abajo) quedan a distinta altura. */
.history-filter select,
.history-filter input[type="date"] { height: 38px; min-height: 38px; }
.history-filter--action { flex: 0 0 auto; }
.history-export {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.history-export__label { margin: 0; color: var(--color-text-secondary); font-size: 0.9rem; }
.history-screen__empty { color: var(--color-text-muted); }

/* Region desplazable accesible: en pantallas angostas la tabla scrollea sola, la pagina no. */
.history-table-region { max-width: 100%; overflow-x: auto; }
/* Layout fijo: el ancho de cada columna lo fija el <th>, no el contenido (un nombre largo o una
 * cadena sin espacios no las infla ni las aplasta). Cliente toma el resto. A 1280 px la region
 * mide ~992 px y la tabla CABE sin desplazamiento; en movil la region si se desplaza. */
.history-table { min-width: 62rem; table-layout: fixed; font-size: 0.85rem; }
.history-table th { padding: 0.5rem 0.6rem; font-size: 0.7rem; white-space: nowrap; }
.history-table td { padding: 0.5rem 0.6rem; vertical-align: top; }
/* Una palabra nunca se parte salvo que NO quepa ni sola en su celda: Cliente, Tecnico y Tipo de
 * plaga llevan break-word (texto libre: pest_type admite 255 caracteres; "Cucarachas/Roedores/
 * Hormigas" sin puntos de corte se dibujaba encima de Estado, peor que partirlo). Con
 * table-layout fijo break-word solo parte lo que no entra: "Cucarachas" sigue entera. Nunca
 * 'anywhere' ni 'break-all' (aplastaban las columnas, ver commit e8d2dcb). */
.history-table td { overflow-wrap: normal; word-break: normal; }
.history-table td:nth-child(2),
.history-table td:nth-child(3),
.history-table td:nth-child(4) { overflow-wrap: break-word; }
.history-table th:nth-child(1) { width: 6.25rem; white-space: normal; } /* 'FECHA Y HORA' en 2 lineas: unica excepcion */
.history-table th:nth-child(3) { width: 8.125rem; }
.history-table th:nth-child(4) { width: 7.625rem; }
.history-table th:nth-child(5) { width: 7.25rem; }
.history-table th:nth-child(6) { width: 7.125rem; }
.history-table th:nth-child(7) { width: 7rem; }
.history-table th:nth-child(8) { width: 7.5rem; }
/* Fecha y hora en DOS lineas deliberadas; el espacio entre los spans mantiene el texto
 * "DD/MM/AAAA HH:mm" para lectores de pantalla. */
.history-table__date,
.history-table__time { display: block; white-space: nowrap; }
.history-table__time { color: var(--color-text-secondary); }
.history-table__inactive { white-space: nowrap; }
/* Botones: se parten solo ENTRE palabras, nunca una palabra. */
.history-table td button {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  min-height: 32px;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}
.history-table td:nth-child(5) { white-space: nowrap; }
.history-table__client { display: block; font-weight: 500; }
.history-table__nit { display: block; color: var(--color-text-muted); font-size: 0.8rem; }
.history-table__no-concept { color: var(--color-text-muted); }
.history-status { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.history-status__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-text-muted);
}
.history-status__dot[data-status="programado"] { background: var(--color-status-programado); }
.history-status__dot[data-status="en_curso"] { background: var(--color-status-en-curso); }
.history-status__dot[data-status="completado"] { background: var(--color-status-completado); }
.history-status__dot[data-status="cancelado"] { background: var(--color-status-cancelado); }

.history-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.history-pager__size,
.history-pager__nav { display: flex; align-items: center; gap: 0.75rem; }
.history-pager__size label { margin: 0; }
.history-pager__size select { width: auto; }

.history-detail { width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; }
.history-detail dl { margin: 0; }
.history-detail dl > div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
}
.history-detail dt { color: var(--color-text-secondary); font-size: 0.85rem; font-weight: 500; }
.history-detail dd { margin: 0; overflow-wrap: anywhere; }
.history-detail ul { margin: 0; padding-left: 1.1rem; }
.history-detail__diagnosis { margin-top: 1rem; }
.history-detail__loading { color: var(--color-text-muted); }
/* Region viva siempre en el DOM: vacia no ocupa lugar (mismo patron que .users-screen__notice:empty). */
.history-detail__loading:empty { margin: 0; padding: 0; border: 0; }
/* Veredicto de la verificacion de firma (US-016): misma tecnica de region viva que .history-detail__loading.
   El texto ya dice "Integra"/"Alterada": el color refuerza, no es el unico canal. Tokens de estado ya
   validados en base.css (completado / cancelado). */
.history-detail__verify-result {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.history-detail__verify-result:empty { margin: 0; padding: 0; border: 0; }
/* Error de la verificacion: mismo aspecto que el [role="alert"] de base.css; solo cambia el margen y el corte de lineas largas. */
.history-detail__verify-error { margin: 0.75rem 0 0; overflow-wrap: anywhere; }
.history-detail__verify-result[data-state="busy"] { color: var(--color-text-muted); }
.history-detail__verify-result[data-state="ok"] {
  border-color: var(--color-status-completado);
  background: var(--color-status-completado-bg);
  color: var(--color-status-completado);
}
.history-detail__verify-result[data-state="altered"] {
  border-color: var(--color-status-cancelado);
  background: var(--color-status-cancelado-bg);
  color: var(--color-status-cancelado);
}
.history-detail menu { flex-wrap: wrap; }
/* Línea de tiempo de la orden: lista ordenada, un ítem por evento. */
.history-detail__timeline { margin-top: 1rem; }
.history-detail__timeline-loading { color: var(--color-text-muted); }
.history-detail__timeline-loading:empty { margin: 0; padding: 0; border: 0; }
.history-detail__timeline-error { overflow-wrap: anywhere; }
.history-detail__timeline-error[hidden] { display: none; }
.history-timeline { list-style: none; margin: 0; padding: 0; }
.history-timeline[hidden] { display: none; }
.history-timeline__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  padding: 0.5rem 0 0.5rem 0.75rem;
  border-left: 3px solid var(--color-border);
  margin-bottom: 0.25rem;
  overflow-wrap: anywhere;
}
.history-timeline__label { font-weight: 600; flex: 1 1 100%; }
.history-timeline__time, .history-timeline__actor { color: var(--color-text-secondary); font-size: 0.9rem; }
.history-timeline__detail { flex: 1 1 100%; }
/* Cada boton del menu en UNA linea: si no caben, pasan a otra fila (flex-wrap), nunca parten su texto. */
.history-detail menu button { white-space: nowrap; }

/* ===================== Servicios (Agenda) ===================== */
.scheduler-screen__view-toggle { display: inline-flex; }
.scheduler-screen__view-btn { border-radius: 0; }
.scheduler-screen__view-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.scheduler-screen__view-btn:last-child { margin-left: -1px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.scheduler-screen__view-btn.is-active,
.scheduler-screen__view-btn.is-active:hover {
  position: relative;
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 600;
}
.scheduler-screen__nav { display: inline-flex; align-items: center; gap: 0.5rem; }
.scheduler-screen__range-label { min-width: 11rem; font-weight: 600; text-align: center; }
.scheduler-screen__new { margin-left: auto; }

.scheduler-screen__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  list-style: none;
}
.scheduler-screen__legend li { display: inline-flex; align-items: center; gap: 0.4rem; }

.scheduler-month-grid__weekdays,
.scheduler-month-grid__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.scheduler-month-grid__weekdays { margin-bottom: 6px; }
.scheduler-month-grid__weekdays span {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.scheduler-day-cell {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 84px;
  padding: 0.45rem 0.55rem;
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
}
.scheduler-day-cell__number { font-size: 0.85rem; font-weight: 600; }
.scheduler-day-cell__dots { display: flex; flex-wrap: wrap; gap: 3px; }
/* muted, no disabled: son botones clicables (4,55:1 sobre #F8FAFC). */
.scheduler-day-cell.is-other-month { background: var(--color-sidebar-bg); color: var(--color-text-muted); }
.scheduler-day-cell.is-today .scheduler-day-cell__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #FFFFFF;
}
.scheduler-day-cell.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft), inset 0 0 0 1px var(--color-accent);
}

.scheduler-day-detail {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.scheduler-day-detail ul,
.scheduler-week-column ul { margin: 0; padding: 0; list-style: none; }
.scheduler-day-detail li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.scheduler-day-detail li:last-child { border-bottom: none; }
.scheduler-day-detail__time,
.scheduler-week-column__time { font-variant-numeric: tabular-nums; font-weight: 600; }
.scheduler-day-detail__client { font-weight: 600; }
.scheduler-day-detail__technician { color: var(--color-text-secondary); }
.scheduler-day-detail__empty,
.scheduler-week-column__empty { color: var(--color-text-muted); font-size: 0.875rem; }
/* Concepto sanitario (US-018) en el detalle del dia. */
.scheduler-doc-btn {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-size: 0.85rem;
}
.scheduler-doc-btn:hover:not(:disabled) { background: #CCFBF1; }
.scheduler-doc-note { color: var(--color-text-muted); font-size: 0.85rem; }
/* Reasignar técnico (sección 5.2). Insignia: mismo estilo que
 * .users-table__badge / .clients-table__badge. */
.scheduler-badge {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}
.scheduler-help { color: var(--color-text-muted); font-size: 0.85rem; }
.scheduler-reassign-btn,
.scheduler-edit-btn { font-size: 0.85rem; }
.reassign-form__summary,
.edit-form__summary { color: var(--color-text-secondary); font-size: 0.9rem; }
/* En linea, no el bloque rojo generico de [role="alert"] de base.css. */
.scheduler-doc-error[role="alert"] {
  flex-basis: 100%;
  margin: 0;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}

.scheduler-status-select {
  width: auto;
  min-height: 32px;
  margin-left: auto;
  padding: 0.2rem 0.5rem;
  font-size: 0.85rem;
}

.scheduler-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.scheduler-week-column {
  min-height: 220px;
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.scheduler-week-column h3 { color: var(--color-text-secondary); font-size: 0.8rem; }
.scheduler-week-column li:not(.scheduler-week-column__empty) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
  padding: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.scheduler-week-column .scheduler-status-select { width: 100%; margin-left: 0; }

/* ===================== Mi agenda (tecnico) ===================== */
.my-schedule-screen__list { margin: 0; padding: 0; list-style: none; }
.my-schedule-screen__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.my-schedule-screen__time { color: var(--color-accent); font-variant-numeric: tabular-nums; font-weight: 700; }
.my-schedule-screen__client { font-weight: 600; overflow-wrap: anywhere; }
.my-schedule-screen__pest-type { color: var(--color-text-secondary); }
.my-schedule-screen__status {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}
.my-schedule-screen__report-btn {
  margin-left: auto;
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}
.my-schedule-screen__report-btn:hover:not(:disabled) { background: var(--color-accent-hover); }
.my-schedule-screen__empty { color: var(--color-text-muted); }

/* ===================== Formulario de diagnostico ===================== */
.field-report-form { max-width: 760px; }
.field-report-form__context { color: var(--color-text-secondary); }
.field-report-form__status {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 0.9rem;
}
.field-report-form__chemicals-note { color: var(--color-text-muted); font-size: 0.85rem; }
.field-report-form__chemical-row,
.field-report-form__area-row {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.field-report-form__chemical-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.field-report-form__area-row { grid-template-columns: minmax(0, 1fr) auto; }

/* width 100% + height auto: SignatureCanvas.js escala clientX/clientY con
 * getBoundingClientRect(), asi que el trazo sigue alineado al redimensionar. */
.signature-canvas__pad {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-bottom: 0.5rem;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

/* ===================== Inicio (dashboard gerencial, US-020-B) ===================== */
.dashboard-screen__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.dashboard-screen__header h1 { margin: 0; }
.dashboard-screen__views { display: inline-flex; }
.dashboard-screen__view-btn { border-radius: 0; }
.dashboard-screen__view-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dashboard-screen__view-btn:last-child { margin-left: -1px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dashboard-screen__view-btn + .dashboard-screen__view-btn { margin-left: -1px; }
.dashboard-screen__view-btn[aria-pressed="true"],
.dashboard-screen__view-btn[aria-pressed="true"]:hover {
  position: relative;
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 600;
}
.dashboard-screen__nav { display: inline-flex; align-items: center; gap: 0.5rem; }
.dashboard-screen__range-label { display: inline-block; min-width: 11rem; font-weight: 600; text-align: center; }
/* es-CO escribe los meses en minuscula ("septiembre de 2026"): solo la inicial sube. */
.dashboard-screen__range-label::first-letter { text-transform: uppercase; }
.dashboard-screen__export {
  margin-left: auto;
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}
.dashboard-screen__export:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.dashboard-screen__notice {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-sidebar-bg);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

/* El CSS global de input (width: 100%, alto minimo) no sirve para una casilla. */
.dashboard-kpi-filter { margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.dashboard-kpi-filter__option { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.9rem; }
.dashboard-kpi-filter input[type="checkbox"] { width: auto; min-height: 0; margin: 0; accent-color: var(--color-accent); }

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.dashboard-kpi {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.dashboard-kpi__label { margin: 0 0 0.25rem; color: var(--color-text-secondary); font-size: 0.85rem; font-weight: 500; }
.dashboard-kpi__value { margin: 0; font-size: 1.75rem; font-weight: 650; font-variant-numeric: tabular-nums; }

.dashboard-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.dashboard-chart {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.dashboard-chart__note,
.dashboard-chart__empty { margin: 0 0 0.75rem; color: var(--color-text-muted); font-size: 0.85rem; }
/* Contenedor de alto fijo (el alto lo pone DashboardScreen.js): con
 * maintainAspectRatio: false, Chart.js llena exactamente esta caja. */
.dashboard-chart__canvas { position: relative; width: 100%; }
.dashboard-chart__data { margin-top: 0.75rem; }
.dashboard-chart__data summary { cursor: pointer; color: var(--color-accent); font-size: 0.9rem; font-weight: 500; }
.dashboard-chart__table { max-height: 22rem; margin-top: 0.5rem; overflow: auto; }

@media (min-width: 1024px) {
  .dashboard-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Las de barras horizontales llevan etiquetas largas: ancho completo. */
  .dashboard-chart[data-chart="technicians"],
  .dashboard-chart[data-chart="chemicals"] { grid-column: 1 / -1; }
}

/* ===================== Técnicos (Fase B2) ===================== */
.technicians-screen__header { margin-bottom: 1rem; }
.technicians-screen__header h1 { margin: 0; }
.technicians-screen__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.technicians-screen__toolbar label { margin: 0; }
.technicians-screen__search { flex: 1 1 260px; width: auto; }
.technicians-screen__filter { display: flex; align-items: center; gap: 0.5rem; }
.technicians-screen__status-filter { width: auto; }
/* Regiones vivas siempre presentes: vacías no ocupan lugar (mismo patrón que .users-screen__notice:empty). */
.technicians-screen__loading,
.technicians-orders__loading { margin: 0 0 0.75rem; color: var(--color-text-muted); }
.technicians-screen__loading:empty,
.technicians-orders__loading:empty { margin: 0; }
.technicians-screen__notice {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-sm);
  background: #FFFBEB;
  color: #92400E;
  font-size: 0.9rem;
}
.technicians-screen__notice:empty { margin: 0; padding: 0; border: 0; }
.technicians-screen__error,
.technicians-orders__error { overflow-wrap: anywhere; }
.technicians-screen__period { color: var(--color-text-secondary); font-size: 0.9rem; }
.technicians-screen__empty,
.technicians-orders__empty { color: var(--color-text-muted); }

.technicians-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.technicians-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.technicians-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem 0.6rem;
}
.technicians-card__name { margin: 0; min-width: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.technicians-card__email { margin: 0; color: var(--color-text-secondary); font-size: 0.9rem; overflow-wrap: anywhere; }
.technicians-card.is-inactive .technicians-card__name,
.technicians-card.is-inactive .technicians-card__email { color: var(--color-text-muted); }
/* El texto ("Activo" / "Desactivado") es el canal principal; el color solo refuerza. */
.technicians-card__badge {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.technicians-card__badge.is-active { background: var(--color-status-completado-bg); color: var(--color-status-completado); }
.technicians-card__badge.is-inactive { background: var(--color-surface-hover); color: var(--color-text-secondary); }
.technicians-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  margin: 0;
}
.technicians-card__stats dt { color: var(--color-text-secondary); font-size: 0.8rem; }
.technicians-card__stats dd { margin: 0; font-size: 1.1rem; font-weight: 600; }
.technicians-card__orders { align-self: flex-start; margin-top: auto; white-space: nowrap; }

.technicians-pager,
.technicians-orders__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.technicians-pager button,
.technicians-orders button { white-space: nowrap; }

.technicians-orders { width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; }
.technicians-orders h2 { overflow-wrap: anywhere; }
.technicians-orders__list { margin: 0; padding: 0; list-style: none; }
.technicians-order { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.technicians-order dl { margin: 0; }
.technicians-order dl > div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.15rem 0;
}
.technicians-order dt { color: var(--color-text-secondary); font-size: 0.85rem; font-weight: 500; }
.technicians-order dd { margin: 0; overflow-wrap: anywhere; }
.technicians-orders menu { display: flex; justify-content: flex-end; margin: 1rem 0 0; padding: 0; }

/* ===================== Catálogos (solo administrador) ===================== */
.catalogs-screen__header { margin-bottom: 1rem; }
.catalogs-screen__header h1 { margin: 0; }
.catalog-section + .catalog-section { margin-top: 2.5rem; }
.catalog-section__title { margin: 0 0 0.75rem; font-size: 1.25rem; }
.catalog-section__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.catalog-section__toolbar label { margin: 0; }
.catalog-section__search { flex: 1 1 260px; width: auto; }
.catalog-section__filter { display: flex; align-items: center; gap: 0.5rem; }
.catalog-section__status { width: auto; }
.catalog-section__new { white-space: nowrap; }
/* Regiones vivas siempre presentes: vacías no ocupan lugar (mismo patrón que Técnicos). */
.catalog-section__loading { margin: 0 0 0.75rem; color: var(--color-text-muted); }
.catalog-section__loading:empty { margin: 0; }
.catalog-section__notice:empty { margin: 0; padding: 0; border: 0; }
.catalog-section__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #FCA5A5;
  border-radius: var(--radius-sm);
  background: #FEF2F2;
  color: #991B1B;
  overflow-wrap: anywhere;
}
.catalog-section__error[hidden] { display: none; }
.catalog-section__error-text { min-width: 0; }
.catalog-section__retry { white-space: nowrap; }
.catalog-section__empty { color: var(--color-text-muted); }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.catalog-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.catalog-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem 0.6rem;
}
.catalog-card__name { margin: 0; min-width: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.catalog-card.is-inactive .catalog-card__name { color: var(--color-text-muted); }
/* El texto ("Activo" / "Desactivado") es el canal principal; el color solo refuerza. */
.catalog-card__badge {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.catalog-card__badge.is-active { background: var(--color-status-completado-bg); color: var(--color-status-completado); }
.catalog-card__badge.is-inactive { background: var(--color-surface-hover); color: var(--color-text-secondary); }
.catalog-card__details { margin: 0; display: grid; gap: 0.35rem; }
.catalog-card__details > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.5rem; }
.catalog-card__details dt { color: var(--color-text-secondary); font-size: 0.85rem; font-weight: 500; }
.catalog-card__details dd { margin: 0; overflow-wrap: anywhere; }
.catalog-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.catalog-card__actions button { white-space: nowrap; }

.catalog-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.catalog-pager button { white-space: nowrap; }

.catalog-dialog { width: min(480px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; }
.catalog-form__title { margin-top: 0; overflow-wrap: anywhere; }
.catalog-form__error[role="alert"] { overflow-wrap: anywhere; }

/* ===================== Documentos (RF-005 / US-018, Fase C) ===================== */
.documents-screen__header { margin-bottom: 1rem; }
.documents-screen__header h1 { margin: 0; }
/* Región viva SIEMPRE presente (una oculta no se anuncia): vacía no ocupa lugar. */
.documents-screen__notices { margin: 0; }
.documents-screen__notice {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-sm);
  background: #FFFBEB;
  color: #92400E;
  font-size: 0.9rem;
}
.documents-screen__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.documents-filter { flex: 1 1 170px; min-width: 0; }
.documents-filter label { margin: 0 0 0.3rem; line-height: 1.2; }
/* Mismo alto exacto para select y date: si no, las etiquetas (alineadas por abajo) quedan a distinta altura. */
.documents-filter select,
.documents-filter input[type="date"] { height: 38px; min-height: 38px; }
.documents-filter--action { flex: 0 0 auto; }
.documents-screen__loading { margin: 0 0 0.75rem; color: var(--color-text-muted); }
.documents-screen__loading:empty { margin: 0; }
.documents-screen__error { overflow-wrap: anywhere; }
.documents-screen__empty { color: var(--color-text-muted); }

.documents-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.documents-item {
  min-width: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.documents-item p { margin: 0; }
.documents-item__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; overflow-wrap: anywhere; }
.documents-item__client { min-width: 0; font-weight: 650; }
.documents-item__issued { color: var(--color-text-secondary); font-size: 0.9rem; }
.documents-item__service,
.documents-item__by { color: var(--color-text-secondary); font-size: 0.9rem; overflow-wrap: anywhere; }
.documents-item__hash { margin-top: 0.4rem; font-size: 0.85rem; }
.documents-item__hash summary { color: var(--color-text-secondary); cursor: pointer; }
.documents-item__hash code { display: block; margin-top: 0.25rem; overflow-wrap: anywhere; }
.documents-item__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.documents-item__actions button { white-space: nowrap; }
/* Veredicto de la verificación (mismos tokens de estado que el veredicto de firma del Historial). El texto
   ya dice "Íntegro" / "No íntegro": el color refuerza, no es el único canal. */
.documents-item__result {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.documents-item .documents-item__result:empty { margin: 0; padding: 0; border: 0; }
.documents-item__result[data-state="busy"] { color: var(--color-text-muted); }
.documents-item__result[data-state="ok"] {
  border-color: var(--color-status-completado);
  background: var(--color-status-completado-bg);
  color: var(--color-status-completado);
}
.documents-item__result[data-state="altered"] {
  border-color: var(--color-status-cancelado);
  background: var(--color-status-cancelado-bg);
  color: var(--color-status-cancelado);
}
.documents-item .documents-item__error { margin: 0.6rem 0 0; overflow-wrap: anywhere; }
/* El encabezado fijo (60px) no tapa el mensaje al hacer scrollIntoView. */
.documents-item__result,
.documents-item__error { scroll-margin: calc(var(--header-height) + 0.5rem) 0 0.5rem; }

.documents-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.documents-pager button { white-space: nowrap; }

/* ===================== Trazabilidad (#/audit) ===================== */
.audit-screen__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.audit-screen__header h1 { margin: 0; }
/* Live region SIEMPRE presente (una oculta no se anuncia): vacia no ocupa lugar. */
.audit-screen__notices { margin: 0; }
.audit-screen__notice {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-sm);
  background: #FFFBEB;
  color: #92400E;
  font-size: 0.9rem;
}
.audit-screen__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.audit-filter { flex: 1 1 170px; min-width: 0; }
.audit-filter label { margin: 0 0 0.3rem; line-height: 1.2; }
.audit-filter select,
.audit-filter input[type="date"] { height: 38px; min-height: 38px; }
.audit-filter--action { flex: 0 0 auto; }
.audit-screen__failure { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 1rem; }
.audit-screen__failure[hidden] { display: none; }
.audit-screen__error { margin: 0; overflow-wrap: anywhere; }
.audit-screen__loading { margin: 0 0 0.5rem; color: var(--color-text-muted); }
.audit-screen__loading:empty { margin: 0; padding: 0; border: 0; }
.audit-screen__empty { color: var(--color-text-muted); }

/* Region desplazable accesible: en pantallas angostas la tabla scrollea sola, la pagina no. */
.audit-table-region { max-width: 100%; overflow-x: auto; }
/* Layout fijo: el ancho de cada columna lo fija el <th>; Detalle toma el resto. */
.audit-table { min-width: 62rem; table-layout: fixed; font-size: 0.85rem; }
.audit-table th { padding: 0.5rem 0.6rem; font-size: 0.7rem; white-space: nowrap; }
.audit-table td { padding: 0.5rem 0.6rem; vertical-align: top; overflow-wrap: break-word; }
.audit-table th:nth-child(1) { width: 7.5rem; }
.audit-table th:nth-child(2) { width: 9rem; }
.audit-table th:nth-child(3) { width: 12rem; }
.audit-table th:nth-child(4) { width: 13rem; }
.audit-table th:nth-child(6) { width: 7.5rem; }
.audit-table__date, .audit-table__time { display: block; white-space: nowrap; }
.audit-table__time { color: var(--color-text-secondary); }
.audit-table__inactive { white-space: nowrap; }
.audit-table__no-user { color: var(--color-text-muted); }
.audit-table__ip { color: var(--color-text-secondary); overflow-wrap: anywhere; } /* IPv6: hasta 45 caracteres sin espacios */

.audit-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.audit-pager__size,
.audit-pager__nav { display: flex; align-items: center; gap: 0.75rem; }
.audit-pager__size label { margin: 0; }
.audit-pager__size select { width: auto; }

/* Diagnósticos: línea de ayuda bajo el título (variante de la pantalla de Historial). */
.history-screen__help { flex-basis: 100%; margin: 0; color: var(--color-text-secondary); font-size: 0.95rem; }