:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --border: #d9dee7;
  --text: #172033;
  --muted: #5b6676;
  --accent: #1d4ed8;
  --accent-soft: #eaf0ff;
  --danger: #b42318;
}

* { box-sizing: border-box; }

/* El atributo hidden debe ganar a cualquier display de componente
   (p.ej. .login-view usa display:grid y tapaba el hidden del login). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

.muted { color: var(--muted); }
.error { color: var(--danger); }

button {
  font: inherit;
  cursor: pointer;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  text-decoration: underline;
}

.primary-btn {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-weight: 600;
}
.primary-btn:disabled, .secondary-btn:disabled { opacity: 0.55; cursor: progress; }
.secondary-btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  font-weight: 600;
}
.secondary-btn:hover { background: #f3f6ff; }
.toggle.active {
  background: var(--accent-soft);
  border-color: #c7d6ff;
  color: var(--accent);
}

/* Login */
.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.login-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.login-brand {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 4.3rem;
}
.login-logo {
  width: 12rem;
  max-width: 68%;
  height: auto;
  object-fit: contain;
}
.login-card h1 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.15;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .login-card { padding: 1.35rem; }
  .login-brand { min-height: 3.5rem; }
  .login-logo { width: 9.2rem; max-width: 64%; }
  .login-card h1 { font-size: 1.15rem; }
}
.login-card label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; }
.login-card input {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}
.login-card button[type="submit"] {
  margin-top: 0.5rem;
  padding: 0.6rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
}
.login-card button[disabled] { opacity: 0.6; cursor: progress; }

/* Navegacion de modulos (Mantenimiento / Coordinacion diaria): franja de
   pestañas por encima de la topbar con metafora de pestañas de navegador. La
   activa se funde con la topbar (mismo fondo, margen -1px sobre el borde) para
   que cada modulo se lea como un area propia y no como otra accion. */
.module-nav {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  padding: 0.45rem 1rem 0;
  background: #e8ecf2;
  border-bottom: 1px solid var(--border);
}
.module-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
}
.module-tab:hover { color: var(--text); }
.module-tab.is-active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--accent);
  cursor: default;
}
.module-tab .icon { flex: 0 0 auto; }

/* App */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-title { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-title .muted { font-size: 0.8rem; }
.topbar-user { display: flex; align-items: center; gap: 0.75rem; }
/* Cabecera principal: grupo izquierdo (acciones) y derecho (admin + cuenta).
   El space-between de .topbar los separa a los extremos. */
.topbar-group { display: flex; align-items: center; gap: 0.75rem; }
/* Sin cabecera de titulo, la barra de acciones se alinea a la derecha. */
.topbar > .topbar-user:only-child { margin-left: auto; }

/* Boton de icono (p.ej. tuerca de Administracion): cuadrado, solo icono. */
.icon-btn { padding: 0.4rem; line-height: 0; display: inline-flex; }
.icon-btn .icon { display: block; }

/* Boton cuadrado de "volver" (flecha ←). Mantiene el recuadro de
   .secondary-btn pero en forma cuadrada con la flecha centrada. No usa
   .icon-btn: su line-height:0 descuadra el caracter de texto. El texto
   visible es solo la flecha; el destino se anuncia via aria-label/title. */
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
  flex: 0 0 auto;
}

/* Menu de usuario (nombre + Salir). */
.user-menu { position: relative; }
.user-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  color: inherit;
}
.user-menu-btn:hover { background: var(--accent-soft); }
.user-menu-btn .caret { font-size: 0.7rem; color: var(--muted); }
.user-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 140px;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  z-index: 30;
}
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  color: inherit;
}
.user-menu-item:hover { background: var(--accent-soft); }
.user-menu-head { display: none; }
.user-menu-admin-item { display: none; }

/* Bandeja de notificaciones (campana + contador + panel). */
.notif-menu { position: relative; display: inline-flex; }
.notif-btn { position: relative; }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.notif-badge[hidden] { display: none; }
.notif-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: 320px;
  max-width: 86vw;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  z-index: 30;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.35rem 0.4rem 0.4rem;
  border-bottom: 1px solid var(--border);
}
.notif-head-main {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  min-width: 0;
}
.notif-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--danger);
  border-radius: 6px;
  background: #fff;
  color: var(--danger);
  cursor: pointer;
  flex: 0 0 auto;
}
.notif-close:hover { background: #fee2e2; }
.notif-list { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.25rem; }
.notif-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 0.5rem;
  color: inherit;
  border-left: 3px solid var(--accent, #2563eb);
}
.notif-item:hover { background: var(--accent-soft); }
.notif-item.is-read { border-left-color: transparent; opacity: 0.7; }
.notif-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.notif-item-title { font-weight: 600; font-size: 0.85rem; }
.notif-item-when { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.notif-item-body { font-size: 0.78rem; color: var(--muted); word-break: break-word; }
.notif-empty { padding: 0.6rem 0.4rem; font-size: 0.82rem; }

/* "+ Nueva tarea": el contenedor agrupa el botón (y en móvil hace de botón
   flotante / FAB). El tipo (normal/periódica) se elige dentro del modal. */
.new-order-menu { position: relative; display: inline-flex; }
.new-order-menu[hidden] { display: none; }

/* Conmutador "Tarea normal / Tarea periódica" dentro del modal "+ Nueva tarea". */
.new-task-type { display: flex; gap: 0.3rem; margin: 0 0 0.8rem; }
.new-task-type[hidden] { display: none; }
.new-task-type .seg {
  flex: 1 1 0;
  font: inherit;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.new-task-type .seg:hover { background: #f3f6ff; }
.new-task-type .seg.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* "Sin asignar" como enlace de accion (abre el formulario de Asignar). */
.assign-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.assign-link:hover { color: #1741b6; }

.layout {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  align-items: flex-start;
}
.panel { flex: 1 1 auto; min-width: 0; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}
.filters label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.filters select, .filters input {
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  min-width: 140px;
}
.filters .filter-text { flex: 1 1 200px; }
.filters .filter-text input { width: 100%; }
.status-filter-label { position: relative; min-width: 190px; }
.status-filter { position: relative; min-width: 190px; }
.status-filter-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-width: 190px;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.status-filter-button::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  flex: 0 0 auto;
}
.status-filter-button:disabled { cursor: not-allowed; background: #f3f4f6; color: var(--muted); }
.status-filter-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 230px;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}
.status-filter-menu[hidden] { display: none; }
.status-filter-actions {
  display: flex;
  gap: 0.35rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.status-filter-actions button {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.45rem;
  cursor: pointer;
}
.status-filter-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.45rem !important;
  padding: 0.3rem 0.35rem;
  border-radius: 6px;
  color: var(--text) !important;
  font-weight: 500 !important;
  cursor: pointer;
}
.status-filter-option:hover { background: #f3f6ff; }
.status-filter-option input { min-width: 0; width: auto; margin: 0; }
/* Filtros ocultos PERO reservando su espacio (Planificacion tareas): el contenido
   no salta verticalmente al cambiar de subpestaña. No interactuables ni
   enfocables. No usa [hidden] porque colapsaria el hueco. */
.filters-reserved { visibility: hidden; pointer-events: none; }

.summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.8rem;
}
.chip b { font-variant-numeric: tabular-nums; }
.chip-total { background: var(--accent-soft); border-color: #c7d6ff; }

/* Colas (quick-filters por estado) */
.queues {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0.2rem;
}
.queue-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.queue-tab:hover { background: #f3f6ff; }
.queue-tab.active { background: var(--accent-soft); border-color: #c7d6ff; font-weight: 600; }
.queue-count {
  font-variant-numeric: tabular-nums;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0 0.4rem;
  font-size: 0.75rem;
  min-width: 1.2rem;
  text-align: center;
}
.queue-tab.active .queue-count { background: var(--accent); }

/* Selector de modo (operativa / gestion) */
/* Pestanas del panel: Planificadas / Buscar y organizar / Gestion, mismo
   ancho y alto. En movil intentan ir en una linea; si no caben, wrap limpio
   (flex-basis grande + wrap) sin solapes. */
.view-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.view-modes[hidden] { display: none; }
.view-mode-tab {
  flex: 1 1 8rem;
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.view-mode-tab:hover { background: #f3f6ff; }
.view-mode-tab.active { background: var(--accent); border-color: var(--accent); color: #ffffff; }
/* "Tareas periódicas (N)" con pendientes y no seleccionada: resalta en el mismo
   tono ámbar que la alerta de las fichas. */
.view-mode-tab.has-pending:not(.active) { color: #92400e; background: #fffbeb; border-color: #fcd34d; }

/* Barra de acciones de la pestaña "Tareas periódicas" (dentro del panel). */
.periodic-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }

/* Zona interna de "Gestión de tareas": el menú principal desaparece y su lugar
   lo ocupa este submenú (flecha "volver al menú principal" + pestañas internas
   Panel tareas / Editar tareas periódicas). Las pestañas reusan .view-mode-tab. */
.manage-submenu { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; }
.manage-submenu[hidden] { display: none; }
.manage-tabs { display: flex; flex: 1 1 12rem; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }
/* Boton "← Volver al menú principal": ancho por contenido, no se parte el texto. */
.manage-back-wide { flex: 0 0 auto; white-space: nowrap; }

/* Secciones de "Panel tareas": Planificación (reservada) arriba y Estados de
   órdenes debajo, claramente separadas. */
.section-title { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 700; color: var(--text); }
.section-title[hidden] { display: none; }
.planning-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin: 0.2rem 0 1.2rem;
  /* Contiene el tablero: el scroll horizontal vive dentro de .planning-board y no
     ensancha la pagina (clave en movil). */
  min-width: 0;
}
.planning-section[hidden] { display: none; }
.orders-section[hidden] { display: none; }

/* Planificacion por cola: controles + tablero de columnas por operario. */
.planning-controls { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; align-items: flex-end; margin-bottom: 0.8rem; }
.planning-controls label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.planning-controls select { padding: 0.35rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.planning-msg { font-size: 0.85rem; color: var(--muted); align-self: center; }
.planning-msg[hidden] { display: none; }
.planning-msg.error { color: var(--danger); }
.planning-msg.ok { color: #166534; }

.planning-board { display: flex; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.4rem; align-items: flex-start; max-width: 100%; min-width: 0; }
.plan-col {
  flex: 0 0 15rem;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plan-col-unplanned { background: var(--accent-soft); border-color: #c7d6ff; }
.plan-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; }
.plan-col-title { font-weight: 700; font-size: 0.9rem; word-break: break-word; }
.plan-col-count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.8rem; flex: 0 0 auto; }
.plan-col-warn { color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px; padding: 0.25rem 0.4rem; font-size: 0.72rem; }
.plan-empty { color: var(--muted); font-size: 0.8rem; padding: 0.3rem; }
/* Tarjeta de planificacion compacta: cabecera (ordinal + titulo) + acciones. */
.plan-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.45rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.plan-card-next { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.plan-card-head { display: flex; align-items: baseline; gap: 0.35rem; }
.plan-ordinal {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 0.78rem;
  color: var(--accent);
}
.plan-card-title { font-weight: 600; font-size: 0.85rem; line-height: 1.2; word-break: break-word; }
/* Centro de la tarea: clave en el tablero GLOBAL (la cola mezcla centros). */
.plan-card-center { font-size: 0.72rem; color: var(--muted); word-break: break-word; }
.plan-card-actions { display: flex; gap: 0.25rem; align-items: center; }
.plan-move-label { flex: 0 0 auto; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.plan-card-actions select { flex: 1 1 auto; min-width: 0; padding: 0.2rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 0.78rem; }
/* Flechas subir/bajar: fallback ACCESIBLE y TÁCTIL del drag & drop (que es la vía
   principal en escritorio). Se dejan poco protagonistas (sutiles, atenuadas) para
   no competir con el arrastre, pero se conservan para teclado y móvil. */
.plan-move {
  flex: 0 0 auto;
  width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--muted);
  cursor: pointer; line-height: 1; font-size: 0.8rem; opacity: 0.7;
}
.plan-move:hover, .plan-move:focus-visible { background: #f3f6ff; color: var(--text); opacity: 1; }

/* Drag & drop (desktop): estados visuales de arrastre / destino / insercion. El
   outline/box-shadow no altera el layout (no provoca overflow). */
.plan-card[draggable="true"] { cursor: grab; }
.plan-card.plan-dragging { opacity: 0.5; cursor: grabbing; }
.plan-col.plan-drop-ok { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.plan-card.plan-drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.plan-col.plan-drop-at-end { box-shadow: inset 0 -3px 0 var(--accent); }

/* Navegacion de bandejas en Gestion: panel de bandejas grandes (mobile-first) y
   barra "Volver a gestion" cuando hay una bandeja abierta. */
.queues.queues-grid { flex-direction: column; gap: 0.5rem; }
.queues.queues-grid .queue-tab { width: 100%; justify-content: space-between; min-height: 48px; padding: 0.7rem 0.9rem; font-size: 0.95rem; }
.manage-bar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.manage-bar[hidden] { display: none; }
.manage-title { font-weight: 600; font-size: 1rem; }
#list-wrap[hidden] { display: none; }

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
table.orders { width: 100%; border-collapse: collapse; }
table.orders th, table.orders td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
table.orders th { background: #fafbfc; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
table.orders tbody tr { cursor: pointer; }
table.orders tbody tr:hover { background: #f3f6ff; }
table.orders tbody tr.selected { background: var(--accent-soft); }
table.orders td.orders-actions-cell { max-width: 7rem; overflow: visible; }
.order-edit-btn { padding: 0.25rem 0.55rem; font-size: 0.78rem; }

/* Vista operativa: Planificadas / Buscar y organizar viven en el menu principal. En
   "Planificadas" se agrupa por operario (un bloque por operario con su nombre de
   cabecera y dentro 1a, 2a, 3a). */
.active-blocks[hidden] { display: none; }
.active-tab-body { display: flex; flex-direction: column; gap: 1.1rem; }
.orders-block { margin-bottom: 1.1rem; }
.orders-block:last-child { margin-bottom: 0; }
.orders-block-title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
/* Subcabeceras dentro del bloque de un operario en "Tareas activas":
   "Planificadas" (con ordinales) arriba y "Asignadas sin ordenar" debajo,
   separadas por una línea gris discreta. */
.op-subhead {
  margin: 0.2rem 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.op-divider { border: 0; border-top: 1px solid var(--border); margin: 0.85rem 0; }

/* Filtro interno de operario de "Tareas activas" (solo quien asigna). */
.active-operator-bar { margin: 0; min-width: 12rem; }
.active-operator-bar[hidden] { display: none; }
.active-operator-bar label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.8rem; color: var(--muted); font-weight: 600;
}
.active-operator-bar select { min-width: 12rem; padding: 0.35rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; }

/* Drag & drop en "Tareas activas" (operario concreto). La tabla/tarjetas se
   arrastran; la sección (table-wrap) es la zona de soltar. */
.orders-block .table-wrap tr[draggable="true"],
.orders-block .table-wrap .order-card[draggable="true"] { cursor: grab; }
.dnd-dragging { opacity: 0.45; }
.dnd-over { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 8px; }
.dnd-empty {
  margin: 0.25rem 0 0; padding: 0.6rem 0.75rem;
  border: 1px dashed var(--border); border-radius: 8px;
  font-size: 0.82rem; color: var(--muted);
}
/* Indicador "Periódica" (orden generada por una regla periódica): acompaña a la
   categoría real, no la sustituye. Pill gris discreta; en móvil va como "· Periódica". */
.badge-periodic {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
  vertical-align: middle;
  white-space: nowrap;
}
/* Marcador "Grupal" (tarea grupal): mismo formato que "Periódica", color propio. */
.badge-group {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #7c2d12;
  background: #ffedd5;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
  vertical-align: middle;
  white-space: nowrap;
}
/* Casilla "Tarea grupal" y selectores de operarios del formulario de grupo. */
/* Checkbox "Tarea grupal": caja y texto EN LA MISMA LINEA. La regla generica
   `.order-form label` apila en columna; se sube la especificidad para alinear. */
.order-form label.form-check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.order-form label.form-check input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex: none;
}
/* Bloque "Operarios del grupo" agrupado bajo el checkbox: encuadre suave para que
   se lea como una sub-seccion de "Tarea grupal". */
.group-workers-create {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--accent-soft, #f8fafc);
}
.group-workers-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.group-workers-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Columna "Orden" (1ª, 2ª, …) del bloque Planificadas: compacta, solo ahí. */
/* Columna "Orden" (1ª, 2ª, …) del bloque Planificadas: compacta, solo ahí. */
table.orders th.ord-col, table.orders td.ord-col {
  width: 2.6rem;
  max-width: 2.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
}
/* Ordinal como badge en la tarjeta movil (bloque Planificadas). */
.order-card-ord {
  align-self: flex-start;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

/* Tarjetas de orden (vista movil). Ocultas en escritorio; el media query las
   muestra y oculta la tabla. */
.orders-cards { display: none; }
.order-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.7rem;
  font: inherit;
  color: var(--text);
}
.order-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.order-card-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.order-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.order-card-title { font-weight: 600; line-height: 1.25; }
.order-card-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.order-card-meta { font-size: 0.8rem; color: var(--muted); }
.order-card-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.order-card-edit-btn { align-self: flex-start; padding: 0.28rem 0.6rem; font-size: 0.8rem; }

/* Boton de filtros plegables: oculto en escritorio. */
.filters-toggle { display: none; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}
/* Flujo de un solo carril (migracion 009): PENDING -> ASSIGNED -> IN_PROGRESS
   -> (ON_HOLD) -> COMPLETED -> CLOSED, con CANCELLED como salida. */
.st-PENDING { background: #fff4e5; color: #92400e; }
.st-ASSIGNED { background: #e0e7ff; color: #3730a3; }
.st-IN_PROGRESS { background: #e0f2fe; color: #075985; }
.st-ON_HOLD { background: #fee2e2; color: #991b1b; }
.st-COMPLETED { background: #cffafe; color: #155e75; }
.st-CLOSED { background: #dcfce7; color: #166534; }
.st-CANCELLED { background: #eef1f6; color: #475569; }
.pr-baja { background: #f1f5f9; color: #475569; }
.pr-normal { background: #ccfbf1; color: #115e59; }
.pr-alta { background: #fed7aa; color: #9a3412; }
.pr-urgente { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

.state { padding: 1rem; text-align: center; color: var(--muted); }
.state.error { color: var(--danger); }
.state[hidden] { display: none; }

/* Detalle */
.detail {
  flex: 0 0 340px;
  position: sticky;
  top: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
}
.detail-head { display: flex; justify-content: space-between; align-items: center; }
.detail-head h2 { margin: 0; font-size: 1.05rem; }
.detail dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.6rem; margin: 0.8rem 0 0; }
.detail dt { color: var(--muted); font-size: 0.8rem; }
.detail dd { margin: 0; }
.detail .desc { white-space: pre-wrap; word-break: break-word; }

/* Acciones del detalle */
.detail-actions {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.detail-actions:empty { display: none; }
.detail-actions .actions-label {
  width: 100%;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.action-msg { margin: 0.6rem 0 0; font-size: 0.85rem; }
.action-msg.error { color: var(--danger); }
.action-msg.ok { color: #166534; }
.action-msg[hidden] { display: none; }

.action-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }
.secondary-btn.danger { border-color: #fca5a5; color: var(--danger); }
.secondary-btn.danger:hover { background: #fef2f2; }

/* Formulario inline de una accion */
.action-form {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafbff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.action-form-title { font-weight: 600; font-size: 0.9rem; }
.action-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); }
.action-field textarea, .action-field input, .action-field select {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface);
}
.action-form-row { display: flex; gap: 0.6rem; align-items: center; }

/* Adjuntos (fotos) */
.detail-attachments { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.detail-attachments:empty { display: none; }
.att-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.att-head .actions-label { margin: 0; }
.att-msg { margin: 0.3rem 0; font-size: 0.85rem; color: var(--muted); }
.att-msg.error { color: var(--danger); }
.att-msg[hidden] { display: none; }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.4rem; }
.att-item {
  display: block;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #fafbfc;
  text-decoration: none;
  color: var(--text);
}
.att-item img { display: block; width: 100%; height: 84px; object-fit: cover; }
.att-file {
  display: flex;
  align-items: center;
  min-height: 84px;
  padding: 0.4rem;
  font-size: 0.72rem;
  word-break: break-word;
}

/* Seguimiento / notas */
.detail-comments { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.detail-comments:empty { display: none; }
.cmt-msg { margin: 0.4rem 0; font-size: 0.85rem; color: var(--muted); }
.cmt-msg.error { color: var(--danger); }
.cmt-msg[hidden] { display: none; }
.cmt-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0; }
.cmt-item { border: 1px solid var(--border); border-radius: 6px; padding: 0.45rem 0.55rem; background: #fafbfc; }
.cmt-meta { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.74rem; color: var(--muted); }
.cmt-author { font-weight: 600; }
.cmt-date { white-space: nowrap; }
.cmt-body { margin: 0.25rem 0 0; white-space: pre-wrap; word-break: break-word; }
.cmt-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.cmt-input {
  font: inherit;
  color: var(--text);
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
}
.cmt-form .secondary-btn { align-self: flex-start; }

/* Historial / timeline (solo lectura) */
.detail-timeline { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.detail-timeline:empty { display: none; }
.tl-msg { margin: 0.4rem 0; font-size: 0.85rem; color: var(--muted); }
.tl-msg.error { color: var(--danger); }
.tl-msg[hidden] { display: none; }
.tl-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0; }
.tl-item { border-left: 2px solid var(--border); padding: 0.1rem 0 0.1rem 0.6rem; }
.tl-meta { display: flex; justify-content: space-between; gap: 0.5rem; }
.tl-event { font-weight: 600; font-size: 0.82rem; }
.tl-date { white-space: nowrap; font-size: 0.74rem; color: var(--muted); }
.tl-by { font-size: 0.74rem; color: var(--muted); }
.tl-note { margin: 0.2rem 0 0; font-size: 0.82rem; white-space: pre-wrap; word-break: break-word; }

/* Modal */
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
.modal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(440px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.1rem 1.2rem 1.2rem;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.order-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.9rem; }
.order-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.order-form input, .order-form select, .order-form textarea {
  font: inherit;
  color: var(--text);
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.order-form textarea { resize: vertical; }
.order-form .form-row { display: flex; gap: 0.7rem; }
.order-form .form-row label { flex: 1; }
.order-form label[hidden] { display: none; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.9rem; align-items: center; margin-top: 0.4rem; }

/* Fotos al crear orden */
.form-photos { display: flex; flex-direction: column; gap: 0.4rem; }
.form-photos-label { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.form-photos-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form-photos-hint { font-size: 0.74rem; }
.form-photos-preview { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form-photos-preview:empty { display: none; }
.photo-item { display: flex; flex-direction: column; gap: 0.15rem; width: 72px; }
.photo-meta { font-size: 0.66rem; color: var(--muted); text-align: center; word-break: break-word; }
.photo-meta-error { color: var(--danger); font-weight: 600; }
/* Aviso de borrador restaurado en "Nueva tarea". */
.form-draft-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f1f5f9;
  font-size: 0.82rem;
}
.form-draft-note[hidden] { display: none; }
.photo-chip {
  position: relative;
  width: 72px;
  height: 72px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #fafbfc;
}
.photo-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-name {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0.3rem;
  font-size: 0.66rem;
  word-break: break-word;
}
.photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
}

/* Tablet: apila panel y detalle, detalle a ancho completo. */
@media (max-width: 860px) {
  /* En columna, align-items:flex-start medía .panel por su contenido y el tablero
     de planificacion ensanchaba la pagina. stretch + width:100% lo evita: el
     scroll horizontal queda dentro de .planning-board. */
  .layout { flex-direction: column; align-items: stretch; }
  .panel { width: 100%; }
  .detail { flex-basis: auto; width: 100%; position: static; max-height: none; }
}

/* Movil (mobile-first del panel): tarjetas, detalle a pantalla completa,
   filtros plegables, "Nueva orden" flotante y acciones grandes. */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .layout { padding: 0.6rem; gap: 0.6rem; }

  .topbar { flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.5rem 0.75rem; }
  .topbar-user, .topbar-group { gap: 0.5rem; flex-wrap: wrap; }
  .notif-pop {
    position: fixed;
    top: 3.25rem;
    left: 0.6rem;
    right: 0.6rem;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 4rem);
    z-index: 80;
  }

  /* Tabla -> tarjetas */
  .orders { display: none; }
  .table-wrap { border: none; background: transparent; border-radius: 0; overflow: visible; }
  .orders-cards { display: flex; flex-direction: column; gap: 0.5rem; }

  /* Planificacion: columnas de ancho fijo comodo; el scroll vive dentro del
     tablero (overflow-x), nunca ensancha la pagina. */
  .plan-col { flex-basis: 14rem; }

  /* Filtros plegables */
  .filters-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-weight: 600;
    text-align: left;
  }
  .filters-toggle::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    flex: 0 0 auto;
  }
  .filters-toggle[aria-expanded="true"] { margin-bottom: 0; border-color: var(--accent); color: var(--accent); }
  .filters-toggle[aria-expanded="true"]::after {
    border-top: 0;
    border-bottom: 6px solid currentColor;
  }
  .filters { display: none; margin-top: 0.5rem; margin-bottom: 1.1rem; }
  .filters.open {
    display: grid;
    grid-template-columns: minmax(6.4rem, 1.25fr) minmax(4.8rem, 0.72fr) minmax(5.8rem, 1fr);
    gap: 0.55rem 0.5rem;
    align-items: end;
    padding: 0.65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .filters label { min-width: 0; width: auto; }
  .filters select, .filters input, .filters .filter-text, .filters .status-filter-label, .filters .status-filter, .filters .active-operator-bar { width: 100%; min-width: 0; }
  #filter-center-label { order: 1; }
  #filter-priority-label { order: 2; }
  #filter-assignee-label, #active-operator-bar { order: 3; }
  .status-filter-label { order: 4; grid-column: 1 / -1; }
  #filter-category-label { order: 5; }
  .filters .filter-text { order: 6; grid-column: span 2; }
  #filter-clear { order: 7; grid-column: 1 / -1; justify-self: start; }
  .filters .active-operator-bar select { width: 100%; min-width: 0; }
  .status-filter-button { min-width: 0; }
  .status-filter-menu { min-width: 0; width: 100%; }

  /* "Nueva tarea" / "Nueva tarea periódica" como boton flotante, facil de
     pulsar. Nunca se muestran a la vez (depende de la pestaña). El contenedor de
     "Nueva tarea" es el que flota (lleva dentro el botón); "Nueva tarea
     periódica" flota directamente. */
  .new-order-menu,
  #recurrences-new-btn,
  #inventory-add-btn:not([hidden]) {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 30;
  }
  #new-order-btn,
  #recurrences-new-btn,
  #inventory-add-btn {
    border-radius: 999px;
    padding: 0.85rem 1.2rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  }

  /* Detalle a pantalla completa, comodo de leer y operar */
  .detail {
    position: fixed;
    inset: 0;
    z-index: 40;
    width: auto;
    height: 100dvh;
    max-height: none;
    border: none;
    border-radius: 0;
    padding: 0.9rem;
    overflow-y: auto;
  }
  .detail-head {
    position: sticky;
    top: 0;
    background: var(--surface);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    z-index: 1;
  }
  .detail-head h2 { font-size: 1.2rem; }
  #detail-close { font-size: 1rem; }

  /* Acciones principales grandes */
  .detail-actions { gap: 0.5rem; }
  .detail-actions .secondary-btn,
  .att-head .secondary-btn,
  .cmt-form .secondary-btn {
    min-height: 44px;
    padding: 0.55rem 0.95rem;
    font-size: 0.95rem;
  }
  .att-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .att-item img { height: 96px; }
  .att-file { min-height: 96px; }

  /* Modal casi a pantalla completa y campos comodos */
  .modal-card { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .order-form input, .order-form select, .order-form textarea { min-height: 42px; }
  #form-submit { min-height: 44px; }
}

/* --- Administracion de usuarios y roles --- */
.admin-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.admin-inactive { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.admin-users { display: flex; flex-direction: column; gap: 0.7rem; }
.admin-user {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.admin-user.is-inactive { opacity: 0.7; }
.admin-user-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.admin-user-id { display: flex; flex-direction: column; gap: 0.1rem; }
.admin-user-username { font-size: 0.78rem; color: var(--muted); }
.admin-user-badges { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.admin-badge { background: #ede9fe; color: #5b21b6; }
.admin-active { background: #dcfce7; color: #166534; }
.admin-inactive-badge { background: #f1f1f4; color: #6b7280; }
.admin-user-meta { font-size: 0.82rem; color: var(--muted); }
.admin-roles-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.admin-roles-empty { font-size: 0.8rem; color: var(--muted); font-style: italic; }
.admin-role-chip {
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  background: #fafbfc;
}
.admin-role-locked { color: var(--muted); }
.admin-user-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Ficha de tarea periodica: distintivo y alerta de pendientes */
.rec-kind {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--accent);
  margin-top: 0.1rem;
}
.rec-pending {
  align-self: flex-start;
  font-size: 0.82rem;
  border-radius: 6px;
}
.rec-pending--alert {
  font-weight: 600;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  padding: 0.3rem 0.55rem;
}
.rec-pending--clear { color: var(--muted); }

/* Formularios del modal de administracion */
.admin-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.6rem; }
.admin-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.admin-field input, .admin-field select { font: inherit; color: var(--text); padding: 0.45rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; }
.admin-hint, .admin-note { font-size: 0.8rem; color: var(--muted); margin: 0; }
.admin-note { background: #ede9fe; color: #5b21b6; padding: 0.45rem 0.55rem; border-radius: 6px; }
/* Si hay muchas filas, el area de filas hace scroll dentro del modal y deja
   visibles el titulo, "Anadir rol" y las acciones. */
.admin-rows { display: flex; flex-direction: column; gap: 0.5rem; max-height: 45vh; overflow-y: auto; }
.admin-row { display: flex; gap: 0.5rem; align-items: center; }
/* min-width:0 evita que los selects desborden; el boton no se encoge ni parte. */
.admin-row select { flex: 1 1 0; min-width: 0; font: inherit; padding: 0.45rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; }
.admin-row .link-btn { flex: 0 0 auto; white-space: nowrap; }

/* El editor de roles por centro necesita mas ancho que los modales simples. */
#admin-modal.is-wide .modal-card { width: min(680px, calc(100vw - 2rem)); }

/* "+ Nueva tarea" en modo periodica (form de regla montado) algo mas ancho. */
#modal.is-wide .modal-card { width: min(620px, calc(100vw - 2rem)); }

/* En movil cada fila apila centro y rol a ancho completo y alinea "Quitar". */
@media (max-width: 760px) {
  .admin-row { flex-wrap: wrap; }
  .admin-row select { flex: 1 1 100%; }
  .admin-row .link-btn { margin-left: auto; }
}
.admin-modal-msg { margin: 0; font-size: 0.85rem; }
.admin-modal-msg.error { color: var(--danger); }
.admin-modal-msg.ok { color: #166534; }
.admin-modal-msg[hidden] { display: none; }

/* --- Calendario de tareas (vista mensual/semanal por dias) --- */
.calendar-section[hidden] { display: none; }

/* Acceso "Calendario" en la topbar (accion de nivel superior). */
#calendar-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
#calendar-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#calendar-btn.active .icon { stroke: #fff; }

/* Layout de la vista: mini calendario (aside) + vista principal. En escritorio
   van en fila; en movil se apilan (mini arriba). */
.calendar-layout { display: flex; gap: 1rem; align-items: flex-start; }
.calendar-aside { flex: 0 0 15rem; max-width: 15rem; }
.calendar-main { flex: 1 1 auto; min-width: 0; }

/* Mini calendario cuadrado (tipo Google): sobrio y compacto. */
.calendar-mini {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 0.6rem;
}
.calendar-mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.calendar-mini-title { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.calendar-mini-nav {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1;
  font-size: 1rem;
  color: var(--muted);
  cursor: pointer;
}
.calendar-mini-nav:hover { background: #f3f6ff; color: var(--accent); }
.calendar-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.calendar-mini-weekday {
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0.15rem 0;
}
.calendar-mini-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 0.72rem;
  color: var(--text);
  cursor: pointer;
}
.calendar-mini-day:hover { background: #f3f6ff; }
.calendar-mini-day.is-outside .calendar-mini-num { color: var(--muted); opacity: 0.6; }
.calendar-mini-day.is-active { background: #eef2ff; }
.calendar-mini-day.is-today { font-weight: 800; color: var(--accent); }
.calendar-mini-day.is-selected { background: var(--accent); color: #fff; }
.calendar-mini-day.is-selected .calendar-mini-num { color: #fff; }
/* Punto bajo el numero: el dia tiene tareas. */
.calendar-mini-mark {
  position: absolute;
  bottom: 0.18rem;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: var(--accent);
}
.calendar-mini-day.is-selected .calendar-mini-mark { background: #fff; }

.calendar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.calendar-nav { display: flex; gap: 0.3rem; }
.calendar-title { margin: 0; flex: 1 1 auto; text-align: center; min-width: 8rem; }
.calendar-view-toggle { display: flex; gap: 0.3rem; }
.calendar-view-toggle .seg {
  font: inherit;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.calendar-view-toggle .seg:hover { background: #f3f6ff; }
.calendar-view-toggle .seg.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Vista mensual: cabecera de dias + 6 filas de 7 columnas. */
.calendar-weekhead { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.calendar-weekhead-cell {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0.2rem 0;
}
.calendar-weeks { display: flex; flex-direction: column; gap: 2px; }
.calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar-day {
  min-height: 6.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
}
.calendar-day.is-outside { background: #f8fafc; }
.calendar-day.is-outside .calendar-day-num { color: var(--muted); }
.calendar-day.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.calendar-day-head { display: flex; align-items: center; justify-content: space-between; }
.calendar-day-head.is-clickable, .calendar-wday-head.is-clickable { cursor: pointer; border-radius: 6px; }
.calendar-day-head.is-clickable:hover, .calendar-wday-head.is-clickable:hover { background: var(--accent-soft); }
.calendar-day-num { font-size: 0.8rem; font-weight: 700; color: var(--text); }
.calendar-day-count {
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  min-width: 1.1rem;
  text-align: center;
  padding: 0 0.3rem;
}
.calendar-day-list { display: flex; flex-direction: column; gap: 0.15rem; overflow-y: auto; }

/* Entrada (chip) de una orden: punto de color por estado + titulo recortado. */
.calendar-entry {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.76rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.calendar-entry:hover { background: #f3f6ff; border-color: var(--accent); }
.calendar-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; flex: 0 0 auto; }
.calendar-entry-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Vista semanal: 7 paneles de dia apilados (comodo en movil). */
.calendar-weekview { display: flex; flex-direction: column; gap: 0.4rem; }
.calendar-wday {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.5rem 0.6rem;
}
.calendar-wday.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.calendar-wday-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; padding: 0.1rem 0.15rem; }
.calendar-wday-name { font-weight: 700; }
.calendar-wday-date { color: var(--muted); font-size: 0.85rem; }
.calendar-wday .calendar-day-list { overflow: visible; }
.calendar-wday .calendar-entry { font-size: 0.85rem; padding: 0.3rem 0.45rem; }
.calendar-empty { color: var(--muted); font-size: 0.85rem; }
.calendar-undated { margin: 0.6rem 0 0; font-size: 0.85rem; }
.calendar-undated[hidden] { display: none; }

/* En movil la rejilla mensual se reduce: dias mas bajos, chips sin titulo (solo
   el punto de color + el contador del dia indican carga). */
@media (max-width: 760px) {
  /* En movil basta con el calendario principal: ocultamos el mini lateral. */
  .calendar-layout { display: block; }
  .calendar-aside { display: none; }
  .calendar-controls { justify-content: space-between; align-items: stretch; gap: 0.45rem; }
  .calendar-title { order: -1; flex-basis: 100%; text-align: left; }
  .calendar-nav { flex: 0 0 auto; }
  .calendar-view-toggle { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calendar-view-toggle .seg { padding: 0.45rem 0.35rem; }
  .calendar-day { min-height: 3.6rem; padding: 0.15rem; }
  .calendar-month .calendar-entry-text { display: none; }
  .calendar-month .calendar-day-list { flex-direction: row; flex-wrap: wrap; gap: 0.1rem; }
  .calendar-month .calendar-entry { width: auto; padding: 0.1rem; }
  /* El botón "Calendario" de la topbar: en móvil sólo el icono para ahorrar
     espacio (la fila de la topbar es estrecha). */
  #calendar-btn .calendar-btn-label { display: none; }
  /* Idem para "Materiales". */
  #materials-btn .materials-btn-label { display: none; }
}

/* --- Compra de materiales (checklist global, D21) --- */
.materials-section { display: flex; flex-direction: column; gap: 0.6rem; }
/* Formulario de alta compacto: material + cantidad + nota + boton en una fila
   (se apila en movil por flex-wrap). */
.materials-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem;
  background: var(--surface);
}
.materials-form input {
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  min-width: 0;
}
.materials-form input:first-child { flex: 2 1 14rem; }
.materials-qty-input { flex: 1 1 7rem; }
.materials-loc-input { flex: 1 1 9rem; } /* destino/ubicacion (D22) */
.materials-form input:nth-of-type(4) { flex: 2 1 12rem; } /* nota */
.materials-form .error { flex-basis: 100%; margin: 0; }
/* Selectores de vinculo con inventario (D24a): base COMUN a las tres vistas
   (alta suelta / fila de Nueva tarea / mini-form del detalle); padding y flex
   se ajustan a los inputs del formulario donde vive cada uno. */
.materials-inv-select, .form-material-inv, .detail-material-inv {
  font: inherit;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 0;
}
.materials-inv-select { flex: 1 1 11rem; padding: 0.45rem 0.5rem; }
.form-material-inv, .detail-material-inv { flex: 1 1 9rem; padding: 0.4rem 0.45rem; }
/* Oferta "¿Sumar al stock?" tras marcar comprado un material vinculado. */
.materials-stock-offer {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}
.materials-stock-offer-title { flex-basis: 100%; font-size: 0.85rem; font-weight: 600; }
.materials-stock-offer input {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  flex: 0 1 10rem;
  min-width: 0;
}
.materials-stock-offer .error { flex-basis: 100%; margin: 0; }
.materials-pending {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  background: var(--surface);
}
.materials-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.35rem;
}
.materials-item + .materials-item { border-top: 1px solid #eef1f6; }
/* Casilla grande y tactil, como en Coordinacion: marcar comprado es LA accion. */
.materials-check { width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; flex: 0 0 auto; accent-color: #16a34a; cursor: pointer; }
.materials-item-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.materials-item-title { font-weight: 600; display: inline-flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.materials-qty {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}
.materials-item-note { font-size: 0.82rem; color: var(--muted); }
/* Vinculo con la tarea + destino (D22). */
.materials-item-link { line-height: 1.2; }
.materials-order-link { font-size: 0.8rem; text-align: left; padding: 0; }
.materials-item-dest { font-size: 0.78rem; }
.materials-item-meta { font-size: 0.75rem; }
.materials-cancel-btn { align-self: flex-start; font-size: 0.8rem; flex: 0 0 auto; }
.materials-cancel-btn.danger { color: var(--danger); }
.materials-empty { padding: 1.2rem 0.6rem; text-align: center; }
.materials-empty p { margin: 0.15rem 0; }
.materials-empty-title { font-weight: 600; }
.materials-history { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; background: var(--surface); }
.materials-history-head { cursor: pointer; font-weight: 700; font-size: 0.9rem; }
.materials-history-list { display: flex; flex-direction: column; margin-top: 0.35rem; }
.materials-history .materials-item { opacity: 0.75; padding: 0.4rem 0.35rem; }
.materials-history .materials-item-title { font-weight: 500; }

@media (max-width: 760px) {
  /* Checklist de materiales en movil: casilla mayor y filas con mas aire. */
  .materials-check { width: 1.75rem; height: 1.75rem; }
  .materials-item { padding: 0.65rem 0.3rem; }
  .materials-form input:first-child,
  .materials-qty-input,
  .materials-loc-input,
  .materials-inv-select,
  .materials-form input:nth-of-type(4) { flex: 1 1 100%; }
  .materials-form .primary-btn { flex: 1 1 100%; }
  .materials-stock-offer input,
  .materials-stock-offer .primary-btn { flex: 1 1 100%; }
}

/* --- Inventario (D23): subpestañas de la seccion Materiales + catalogo --- */
/* Subpestañas "Nueva compra" / "Lista compra" / "Inventario": reusan .view-mode-tab. */
.materials-tabs { display: flex; flex-wrap: nowrap; gap: 0.25rem; width: 100%; }
.materials-tabs .view-mode-tab { flex: 1 1 0; min-width: 0; padding: 0.45rem 0.35rem; font-size: 0.82rem; }
#materials-new-wrap, #materials-list-wrap, #inventory-wrap { display: flex; flex-direction: column; gap: 0.6rem; }
#materials-new-wrap[hidden], #materials-list-wrap[hidden], #inventory-wrap[hidden] { display: none; }
/* Alta de item: REUSA la clase .materials-form (el nodo lleva ambas); aqui
   solo lo que materials no cubre (el <select> de centro del alta). */
.inventory-form select {
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  min-width: 0;
}
.inventory-num-input { flex: 1 1 6rem; }
.inventory-unit-input { flex: 1 1 6rem; }
.inventory-center-input { flex: 1 1 9rem; }
.inventory-form .error { flex-basis: 100%; margin: 0; }
.inventory-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.inventory-toolbar input[type="search"] {
  flex: 2 1 14rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  min-width: 0;
}
.inventory-toolbar select {
  flex: 1 1 9rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  min-width: 0;
}
.inventory-toolbar .primary-btn { flex: 0 0 auto; white-space: nowrap; }
#inventory-add-btn[hidden] { display: none; }
.inventory-add-form { margin-top: 0.9rem; }
.inventory-add-form .error { margin: 0; }
.inventory-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  background: var(--surface);
}
.inventory-item { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.35rem; }
.inventory-item + .inventory-item { border-top: 1px solid #eef1f6; }
.inventory-item.is-inactive { opacity: 0.65; }
.inventory-item-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.inventory-item-title { font-weight: 600; display: inline-flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
/* Chip de stock: la cifra ES el dato; en cero se avisa en ambar. */
.inventory-stock {
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
  color: var(--text);
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.inventory-stock.is-zero { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.inventory-inactive-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}
.inventory-item-actions { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; }
.inventory-item-actions .link-btn { font-size: 0.8rem; padding: 0.15rem 0; }
.inventory-item-actions .link-btn.danger { color: var(--danger); }
/* Mini-form inline (movimiento o edicion) dentro de la fila del item. */
.inventory-move-form {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: flex-start;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  margin-top: 0.3rem;
  background: #fafbfe;
}
.inventory-move-form input, .inventory-move-form select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  min-width: 0;
  flex: 1 1 9rem;
}
.inventory-move-title { flex-basis: 100%; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.inventory-move-form .error { flex-basis: 100%; margin: 0; }
/* Historial de movimientos del item (plegado bajo demanda). */
.inventory-item-movements { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; padding-left: 0.2rem; }
.inventory-item-movements[hidden] { display: none; }
.inventory-move { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.82rem; }
.inventory-move-qty { font-weight: 700; min-width: 4.5rem; white-space: nowrap; }
.inventory-move.is-in .inventory-move-qty { color: #15803d; }
.inventory-move.is-out .inventory-move-qty { color: #b91c1c; }
.inventory-move.is-adjustment .inventory-move-qty { color: #92400e; }
.inventory-move-meta { font-size: 0.78rem; }
.inventory-inactive { margin-top: 0.2rem; }
.inventory-inactive > summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; padding: 0.35rem; }

@media (max-width: 760px) {
  /* Inventario en movil: toolbar y formularios apilados a ancho completo. */
  .inventory-form input:first-child,
  .inventory-num-input,
  .inventory-unit-input,
  .inventory-center-input,
  .inventory-form input,
  .inventory-form select,
  .inventory-form .primary-btn { flex: 1 1 100%; }
  .inventory-toolbar input[type="search"], .inventory-toolbar select { flex: 1 1 100%; }
  #inventory-add-btn { flex: 0 0 auto; width: auto; }
  .inventory-move-form input { flex: 1 1 100%; }
  .inventory-move-form .primary-btn { flex: 1 1 100%; }
}

/* --- Material requerido en tareas (D22) --- */
/* Seccion del formulario "Nueva tarea": filas nombre + cantidad + destino. */
.form-materials { display: flex; flex-direction: column; gap: 0.4rem; }
.form-materials-label { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.form-materials-hint { font-size: 0.74rem; }
.form-materials-rows { display: flex; flex-direction: column; gap: 0.35rem; }
.form-material-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.form-material-row input {
  font: inherit;
  color: var(--text);
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 0;
}
.form-material-name { flex: 2 1 9rem; }
.form-material-qty { flex: 1 1 4.5rem; }
.form-material-loc { flex: 1 1 6rem; }
/* (Los selectores de vinculo .form-material-inv / .detail-material-inv se
   estilan junto a .materials-inv-select, en el bloque de Materiales D24a.) */
.form-material-remove { flex: 0 0 auto; font-size: 0.8rem; }
#form-material-add { align-self: flex-start; }
/* Detalle de la tarea: lista de materiales con estado + mini-form de alta. */
.detail-materials { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.9rem; }
.detail-materials-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.detail-materials-head h3 { margin: 0; font-size: 0.95rem; }
.detail-material {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.detail-material-title { font-weight: 600; font-size: 0.9rem; }
.detail-material-meta { font-size: 0.78rem; }
.detail-material.is-bought { opacity: 0.75; }
.detail-material.is-cancelled { opacity: 0.6; }
.detail-material.is-cancelled .detail-material-title { text-decoration: line-through; }
.detail-material-form { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.2rem 0 0.3rem; }
.detail-material-form input {
  font: inherit;
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 0;
  flex: 1 1 8rem;
}
.detail-material-form .error { flex-basis: 100%; margin: 0; }
/* Disponibilidad + "Usar stock" (D24b) bajo cada material vinculado. Los
   chips reutilizan .inventory-stock / .inventory-inactive-badge. */
.detail-material-stock { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.15rem; }
.detail-material-stock-row { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.detail-use-stock-btn { font-size: 0.8rem; padding: 0; }

@media (max-width: 760px) {
  .form-material-name, .form-material-qty, .form-material-loc,
  .form-material-inv, .detail-material-inv { flex: 1 1 100%; }
  .detail-material-form input { flex: 1 1 100%; }
  .detail-material-form .primary-btn { flex: 1 1 100%; }
}

/* --- Coordinacion diaria (checklist) --- */
.coordination-datebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.coordination-date-label { margin: 0 0 0 0.25rem; }
.coordination-agenda { display: flex; flex-direction: column; gap: 0.6rem; }
.coordination-sep {
  margin: 0.6rem 0 0.2rem;
  padding: 0.2rem 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.coordination-group { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; background: var(--surface); }
.coordination-group-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.coordination-group-head h3 { margin: 0; font-size: 0.95rem; }
.coordination-empty { margin: 0.2rem 0; font-size: 0.85rem; }
.coordination-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.45rem;
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.coordination-item + .coordination-item { border-top: 1px solid #eef1f6; }
.coordination-item.is-done { background: #ecfdf5; border-left-color: #16a34a; }
/* Casilla grande y tactil: marcar es LA accion principal de la checklist. */
.coordination-check {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05rem;
  flex: 0 0 auto;
  accent-color: #16a34a;
  cursor: pointer;
}
.coordination-item-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.coordination-item-title { font-weight: 600; }
.coordination-item.is-done .coordination-item-title { text-decoration: line-through; color: var(--muted); }
.coordination-item-desc { font-size: 0.82rem; color: var(--muted); }
.coordination-item-done { font-size: 0.72rem; color: #15803d; font-weight: 600; }
.coordination-item-comment { font-size: 0.8rem; color: var(--text); }
.coordination-comment-btn { align-self: flex-start; font-size: 0.78rem; }
.coordination-inline { display: flex; gap: 0.4rem; margin-top: 0.35rem; flex-wrap: wrap; }
.coordination-inline input { flex: 1 1 12rem; min-width: 0; padding: 0.35rem 0.45rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; }

/* "+ Nueva tarea": formulario del modal pequeño (puntual / diaria / semanal /
   cada X dias). Reutiliza .coordination-tpl-field para los campos; el marco lo
   pone .modal-card. Aqui el selector de tipo en pildoras y el empty state. */
.coordination-new-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.9rem;
}
.coordination-new-types { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.coordination-type-btn {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.88rem;
}
.coordination-type-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: #eef2ff;
}

/* Overview "Atrasadas / Proximos 7 dias": bloque sobre la agenda. Atrasadas en
   alerta SUAVE (ambar) con contador; proximos plegable (details). Cada elemento
   es un boton que salta a su fecha. */
.coordination-overview { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.coordination-overdue {
  border: 1px solid #fcd34d;
  background: #fffbeb;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}
.coordination-upcoming {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}
.coordination-upcoming summary { cursor: pointer; }
.coordination-ov-head { margin: 0; font-weight: 700; font-size: 0.9rem; }
.coordination-overdue .coordination-ov-head { color: #92400e; }
.coordination-ov-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.35rem;
  max-height: 12rem; /* si hay muchas, scroll dentro del bloque */
  overflow-y: auto;
}
.coordination-ov-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.3rem 0.35rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.coordination-ov-item:hover { background: rgba(15, 23, 42, 0.06); }
.coordination-ov-item.is-done { opacity: 0.6; }
.coordination-ov-item.is-done .coordination-ov-title { text-decoration: line-through; }
.coordination-ov-date { flex: 0 0 auto; font-size: 0.78rem; color: var(--muted); font-weight: 600; min-width: 7.5rem; }
.coordination-ov-title { min-width: 0; }
.coordination-ov-desc { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); padding-left: 8.1rem; }

/* Urgentes (D20.3): bloque ROJO suave, por ENCIMA de Atrasadas (ambar).
   Rojo = importante; ambar = atrasada. Plegable: tocar la cabecera abre el
   listado; cada fila salta a su fecha. */
.coordination-urgent-block {
  border: 1px solid #fca5a5;
  background: #fef2f2;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}
.coordination-urgent-block summary { cursor: pointer; }
.coordination-urgent-block .coordination-ov-head { color: #b91c1c; }
.coordination-urgent-block .coordination-ov-item { flex-wrap: wrap; row-gap: 0.05rem; }
/* Distintivo y fila urgente en la agenda del dia (pierde ante completada). */
.coordination-item.is-urgent { border-left-color: #dc2626; background: #fef2f2; }
.coordination-urgent-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  background: #fff;
  margin-left: 0.45rem;
  white-space: nowrap;
}
/* Acciones de la fila ("Editar comentario" + "Quitar urgente"): con wrap para
   que en moviles estrechos no desborden la tarjeta en una linea inquebrable. */
.coordination-item-actions { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; align-self: flex-start; }
.coordination-urgent-btn { font-size: 0.78rem; color: #b91c1c; }
/* Checkbox "⚠ Urgente" del modal (solo tipo Puntual). */
.coordination-urgent-label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: #b91c1c; }
.coordination-urgent-input { width: 1.15rem; height: 1.15rem; accent-color: #dc2626; }

.coordination-empty-state {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 1.4rem 0.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.coordination-empty-state p { margin: 0; }
.coordination-empty-title { font-weight: 600; }

/* Configuracion de plantillas */
.coordination-config-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.coordination-config-head h3 { margin: 0; }
.coordination-template-list { display: flex; flex-direction: column; gap: 0.4rem; }
.coordination-template {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.coordination-template.is-inactive { opacity: 0.6; }
.coordination-template-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.coordination-template-title { font-weight: 600; }
.coordination-template-sched, .coordination-template-desc { font-size: 0.8rem; }
.coordination-template-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: 0 0 auto; }
.coordination-template-actions .danger { color: var(--danger); }
.coordination-tpl-form { display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--accent); border-radius: 8px; padding: 0.7rem; margin-bottom: 0.7rem; }
.coordination-tpl-field { display: flex; flex-direction: column; gap: 0.2rem; font-weight: 600; font-size: 0.85rem; }
.coordination-tpl-field input, .coordination-tpl-field select { padding: 0.4rem 0.45rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.coordination-tpl-field[hidden] { display: none; }
.coordination-weekdays { display: flex; flex-wrap: wrap; gap: 0.5rem; font-weight: 400; }
.coordination-weekday { display: inline-flex; align-items: center; gap: 0.25rem; }
.coordination-tpl-actions { display: flex; align-items: center; gap: 0.75rem; }

@media (max-width: 760px) {
  .coordination-template { flex-direction: column; align-items: stretch; }
  .coordination-template-actions { justify-content: flex-start; }

  /* Checklist en movil: casilla aun mayor y fila con mas aire (uso tactil). */
  .coordination-check { width: 1.75rem; height: 1.75rem; }
  .coordination-item { padding: 0.65rem 0.4rem; }
  /* Overview en movil: filas tactiles; fecha y titulo apilados si no caben. */
  .coordination-ov-item { flex-wrap: wrap; gap: 0.2rem 0.6rem; padding: 0.45rem 0.35rem; }
  .coordination-ov-date { min-width: 0; }
  .coordination-ov-desc { padding-left: 0; } /* sin columna de fecha fija en movil */
  /* Selector de tipo de "+ Nueva tarea": rejilla 2x2 a ancho completo. */
  .coordination-new-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coordination-type-btn { text-align: center; padding: 0.5rem 0.4rem; }

  /* Navegacion de modulos en movil: dos segmentos a ancho completo, tamaño
     tactil, etiqueta corta ("Coordinación" sin "diaria"). */
  .module-nav { padding: 0.4rem 0.6rem 0; }
  .module-tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.45rem 0.5rem;
    font-size: 0.92rem;
    white-space: nowrap;
  }
  .module-tab-ext { display: none; }
}

/* --- Barra de navegacion inferior (SOLO MOVIL) del modulo Mantenimiento --- */

/* En escritorio no existe: la navegacion es la topbar + fila principal. */
.mobile-nav { display: none; }

@media (max-width: 760px) {
  .mobile-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35; /* sobre el contenido; bajo el detalle (40) y notif (80) */
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 0.25rem 0.4rem calc(0.25rem + env(safe-area-inset-bottom));
  }
  .mobile-nav-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-height: 3.1rem;
    padding: 0.3rem 0.2rem;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    border-radius: 8px;
  }
  .mobile-nav-btn.active { color: var(--accent); background: #eff4ff; }
  .mobile-more { flex: 1 1 0; min-width: 0; display: flex; position: relative; }
  .mobile-more .mobile-nav-btn { flex: 1 1 0; }

  /* En movil la gestion vive en la barra inferior, no en la fila superior. */
  .view-mode-tab.is-management-entry { display: none; }
  #app-view.is-section-mode #view-modes,
  #app-view.is-management-mode #view-modes,
  #app-view.is-section-mode #filters-toggle,
  #app-view.is-section-mode #filters,
  .filters-reserved { display: none !important; }

  /* Administracion se agrupa en Cuenta; la tuerca queda solo para escritorio. */
  #admin-btn { display: none !important; }
  .user-menu-pop {
    position: fixed;
    inset: 0;
    min-width: 0;
    padding: 1rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .user-menu-pop[hidden] { display: none !important; }
  .user-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0 0.6rem;
    font-size: 1rem;
  }
  .user-menu-close {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    width: 2.4rem;
    height: 2.4rem;
    font-weight: 700;
  }
  .user-menu-admin-item { display: block; }
  .user-menu-item {
    min-height: 48px;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  /* La barra ocupa el borde inferior: dejar hueco al final del contenido y
     elevar los botones flotantes de crear por encima de ella. */
  .layout { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
  .new-order-menu,
  #recurrences-new-btn,
  #inventory-add-btn:not([hidden]) { bottom: calc(4.4rem + env(safe-area-inset-bottom)); }

  /* Calendario y Materiales se mudan a la barra inferior: fuera de la topbar
     en movil (en escritorio siguen donde estaban). */
  #calendar-btn,
  #materials-btn { display: none; }
}