/* SeTrace — estilos (Fase B). Sobrios, legibles, responsive. */
:root {
  --verde: #1f7a3d;
  --verde-osc: #145228;
  --bg: #f4f6f4;
  --card: #ffffff;
  --borde: #d9e0d9;
  --texto: #1c2b21;
  --gris: #5c6b60;
  --rojo: #b3261e;
  --azul: #1a5fb4;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: var(--bg); color: var(--texto); font-size: 15px; }
a { color: var(--verde); }

/* Auth */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 16px; }
.auth-card { background: var(--card); border: 1px solid var(--borde); border-radius: 12px;
             padding: 28px; width: min(400px, 100%); box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.logo { font-size: 28px; margin: 0 0 4px; letter-spacing: .5px; }
.logo span { color: var(--verde); }
.logo.small { font-size: 20px; }
.version-badge { margin-left: 10px; font-size: 12px; font-weight: 400; letter-spacing: .3px; color: #9fe0b5; border: 1px solid rgba(159,224,181,.5); padding: 1px 8px; border-radius: 10px; vertical-align: middle; }
.sub { color: var(--gris); margin: 0 0 20px; }
.auth-alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--gris); }

form label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--gris); font-weight: 600; }
input, select { width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid var(--borde);
                border-radius: 8px; background: #fff; color: var(--texto); margin-top: 4px; }
input:focus, select:focus { outline: 2px solid var(--verde); border-color: transparent; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
button { background: var(--verde); color: #fff; border: 0; border-radius: 8px; padding: 11px 16px;
         font-size: 15px; font-weight: 600; cursor: pointer; }
button:hover { background: var(--verde-osc); }
button.secondary { background: #fff; color: var(--verde); border: 1px solid var(--verde); }
button.danger { background: #fff; color: var(--rojo); border: 1px solid var(--rojo); }
button.small { padding: 6px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.link { background: none; color: var(--azul); border: 0; padding: 0; font-weight: 500; }
.msg { font-size: 14px; min-height: 18px; margin: 12px 0 0; }
.msg.ok { color: var(--verde); }
.msg.err { color: var(--rojo); }
.msg.info { color: var(--azul); }

/* App shell */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 56px;
          display: flex; align-items: center;
          background: var(--verde-osc); color: #fff; padding: 0 16px; }
.topbar-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.topbar .logo { color: #fff; }
.topbar .logo span { color: #9fe0b5; }
.topbar-user { display: flex; gap: 14px; align-items: center; font-size: 14px; }
.topbar-user .link { color: #cdeeda; }
/* CU 2.12: selector de cuenta activa (topbar SPA + header chat) */
.cuenta-select, .chat-cuenta-select {
  width: auto; max-width: 230px; padding: 5px 8px; font-size: 13px;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.4); border-radius: 6px;
  margin-top: 0; cursor: pointer;
}
.cuenta-select option, .chat-cuenta-select option { color: var(--texto); background: #fff; }
/* RQ-27: chip desplegable de selección de cuenta post-login */
.cuenta-chip-wrap { position: relative; margin: 16px 0; }
.cuenta-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px;
               width: 100%; background: var(--verde); color: #fff; border: 0;
               border-radius: 999px; padding: 12px 18px; font-size: 15px; font-weight: 600;
               cursor: pointer; }
.cuenta-chip:hover { background: var(--verde-osc); }
.cuenta-chip-caret { font-size: 12px; }
.cuenta-chip-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
                    background: #fff; border: 1px solid var(--borde); border-radius: 12px;
                    box-shadow: 0 6px 20px rgba(0,0,0,.12); overflow: hidden; }
.cuenta-chip-opcion { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
                      width: 100%; background: #fff; color: var(--texto); border: 0;
                      border-bottom: 1px solid var(--borde); border-radius: 0;
                      padding: 10px 14px; text-align: left; font-weight: 500; cursor: pointer; }
.cuenta-chip-opcion:last-child { border-bottom: 0; }
.cuenta-chip-opcion:hover { background: #f0faf2; }
.cuenta-chip-opcion.activa { background: #f0faf2; }
.cuenta-chip-opcion-nombre { font-size: 14px; font-weight: 600; }
.cuenta-chip-opcion-rol { font-size: 12px; color: var(--gris); }
/* CU 2.17: landing por rol (grid de tarjetas de acceso) */
.inicio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.inicio-card h3 { margin: 0 0 6px; }
.inicio-card .total { min-height: 40px; }
.tabs { max-width: 1100px; margin: 0 auto; display: flex; gap: 4px; padding: 10px 16px 0; flex-wrap: wrap; }
.tabs button { background: none; color: var(--texto); border: 1px solid transparent; border-radius: 8px 8px 0 0;
               padding: 9px 14px; font-weight: 500; }
.tabs button.active { background: var(--card); border-color: var(--borde); border-bottom: 2px solid var(--verde); }
.content { max-width: 1100px; margin: 0 auto; padding: 18px 16px 60px; }
/* 11-sep (pedido Eduarbo): el área de trabajo quedaba en 1100px fijos y en una
   pantalla de 1920 sobraban cientos de px vacíos. En pantallas grandes el área
   de trabajo toma el 75% del ancho (pegada al menú, que ahora ocupa 12%) y el
   resto queda libre a la derecha. */
@media (min-width: 1200px) {
  .content { max-width: 75vw; margin-left: 0; margin-right: auto; }
}
.card { background: var(--card); border: 1px solid var(--borde); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.card h2 { margin: 0 0 12px; font-size: 17px; }
.card h3 { margin: 0 0 10px; font-size: 14px; color: var(--gris); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
th { color: var(--gris); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
tbody tr:hover { background: #f0f5f0; }
.tabla-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--borde); border-radius: 8px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.pendiente { background: #fff3cd; color: #7a5b00; }
.badge.activo { background: #d9f2e2; color: var(--verde-osc); }
.badge.rechazado { background: #fbe3e1; color: var(--rojo); }
.badge.admin { background: #e3e8f7; color: var(--azul); }
.acciones { display: flex; gap: 8px; }
.fila-acciones { display: flex; gap: 10px; align-items: end; margin-bottom: 14px; flex-wrap: wrap; }
.fila-acciones > * { flex: 0 0 auto; }
.estadisticas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--borde); border-radius: 10px; padding: 14px; text-align: center; }
.stat .num { font-size: 26px; font-weight: 700; color: var(--verde); }
.stat .lbl { font-size: 12px; color: var(--gris); margin-top: 2px; }
.hidden { display: none !important; }
.buscar { max-width: 260px; }
.total { color: var(--gris); font-size: 13px; margin: 6px 0 10px; }
.hint { display: block; font-size: 12px; color: var(--gris); margin: 0 0 10px; font-weight: 400; }
textarea { width: 100%; padding: 10px 12px; font-size: 15px; border: 1px solid var(--borde);
           border-radius: 8px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
           background: #fff; color: var(--texto); margin-top: 4px; }
details.ayuda { background: #eef6ef; border: 1px solid var(--borde); border-radius: 10px;
                padding: 12px 16px; margin-bottom: 16px; }
details.ayuda summary { cursor: pointer; font-weight: 600; color: var(--verde-osc); }
details.ayuda ol { margin: 10px 0 4px; padding-left: 20px; }
details.ayuda li { margin-bottom: 6px; font-size: 14px; }

@media (max-width: 640px) {
  .row2 { grid-template-columns: 1fr; }
  .content { padding: 12px 10px 60px; }
  th, td { padding: 6px 6px; font-size: 13px; }
  .tabs button { padding: 8px 10px; font-size: 14px; }
}

/* ── Popup modal moderno (registro y avisos, CU 1.1) ─────────── */
.popup-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 32, 20, 0.55);
  display: flex; align-items: center; justify-content: center;
  animation: popupFade .18s ease-out;
  padding: 16px;
}
/* 02-sep (fix UX Eduarbo): el modal debe ENTRAR en la pantalla — límite de
   alto + scroll interno + padding seguro (antes un preview largo desbordaba
   y los botones quedaban fuera de vista). */
.popup-card {
  background: #fff; border-radius: 16px; max-width: 400px; width: 100%;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 28px 24px 22px; text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
  animation: popupScale .22s cubic-bezier(.2, .9, .3, 1.2);
}
/* Modales anchos/altos (importación Ganado, edición lote, registro): el
   contenido interno scrollea y el pie con los botones queda FIJO abajo. */
.popup-card.wide, .popup-card.tall {
  max-width: min(860px, 96vw);
  text-align: left;
  display: flex; flex-direction: column;
  padding: 20px 22px 16px;
}
.popup-card.tall { height: min(88dvh, 860px); }
/* Modal de importación de Ganado (RQ-106, 07-sep): el usuario pidió que
   ocupe al menos el 75% del ancho y más altura (la tabla editable del
   preview SNIG tiene 9 columnas y muchas filas). Clase propia para no
   agrandar los demás .tall. Tope 1920px → 75% exacto hasta pantallas de
   2560px de ancho. */
.popup-card.tall.gan-imp {
  max-width: min(1920px, 96vw);
  height: min(94dvh, 1200px);
}
.popup-card .popup-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 2px 6px 10px 2px;
  margin: 0 -4px 0 0;
}
.popup-card .popup-foot {
  flex: none;
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 12px; margin-top: 4px;
  border-top: 1px solid #e8ece9;
  position: sticky; bottom: -16px;
  background: #fff;
  padding-bottom: 2px;
}
.popup-card .popup-foot button { width: auto; padding: 9px 18px; }
.popup-icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff; font-weight: 700;
}
.popup-icon.ok { background: #1e7e34; }
.popup-icon.err { background: #c0392b; }
.popup-card h2 { margin: 0 0 8px; font-size: 19px; color: #1b2a20; }
.popup-card p { margin: 0 0 18px; font-size: 14.5px; color: #445; line-height: 1.5; }
.popup-card button {
  width: 100%; padding: 11px; border: 0; border-radius: 10px;
  background: #1e7e34; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.popup-card button:hover { filter: brightness(1.08); }
/* Variantes de botón DENTRO de un popup (11-sep): la regla genérica de arriba
   pisa a button.secondary/ghost/danger/small por orden de aparición (misma
   especificidad) → todos los botones del modal salían verdes y a todo el ancho,
   y el ✕ del encabezado quedaba enorme. Reglas propias para cada variante. */
.popup-card button.secondary,
.popup-card button.ghost,
.popup-card button.danger { width: auto; padding: 9px 16px; font-size: 14px; }
.popup-card button.secondary { background: #fff; color: var(--verde); border: 1px solid var(--verde); }
.popup-card button.ghost { background: #fff; color: #5a6572; border: 1px solid var(--borde); }
.popup-card button.danger { background: #fff; color: var(--rojo); border: 1px solid var(--rojo); }
.popup-card button.small { width: auto; padding: 6px 12px; font-size: 13px; }
.popup-card button.x {
  width: auto; padding: 0 2px; background: transparent; border: 0; color: #8a97a3;
  font-size: 19px; line-height: 1; font-weight: 400;
}
.popup-card button.x:hover { color: #c0392b; filter: none; }
/* Encabezado del modal (título + ✕) y fila de acciones con jerarquía */
.popup-card .popup-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; text-align: left; margin-bottom: 6px;
}
.popup-card h3 { margin: 0; font-size: 17px; color: #1b2a20; }
.popup-card .popup-acciones {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  justify-content: flex-start; margin-top: 14px;
}
.popup-card .popup-acciones button { width: auto; padding: 9px 15px; font-size: 14px; }
.popup-card textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--borde);
  border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45;
  color: #22303c; resize: vertical;
}
.popup-card textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(30, 126, 52, .12); }
.popup-card .hint { text-align: left; }
/* ── Bloque 🎯 Caravanas Objetivo (11-sep) ──────────────────────────────
   Eduarbo: "destacar más" el título y el hint. Antes: gris sobre gris, el
   usuario no lo veía. Ahora: tarjeta con borde verde, título en negrita y el
   "opcional" como chip ámbar suave que se lee de un vistazo. */
.rq148-box {
  background: linear-gradient(180deg, #f2faf4 0%, #ffffff 70%);
  border: 1.5px solid #a5d6a7; border-left: 5px solid var(--verde);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 14px;
}
.rq148-titulo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15.5px; font-weight: 800; color: #1b5e20; letter-spacing: .2px;
}
.rq148-titulo .ico { font-size: 19px; }
.rq148-chip {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  background: #fff8e1; color: #8d6e00; border: 1px solid #ffe082;
  border-radius: 999px; padding: 2px 9px;
}
.rq148-hint { font-size: 13px; color: #4a5560; margin: 6px 0 0; line-height: 1.45; }
.rq148-hint b { color: #1b5e20; }
.rq148-contador { margin-top: 8px; font-size: 14px; font-weight: 600; color: #37474f; }
.rq148-contador .falta { color: #e65100; font-weight: 800; }
.rq148-contador .ok { color: #2e7d32; font-weight: 800; }
@keyframes popupFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes popupScale { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Sanidad (módulo 9 — esqueleto tentativo, 18-ago) */
.san-wrap { display: flex; gap: 16px; align-items: flex-start; }
.san-main { flex: 1; min-width: 0; }
.san-item { padding: 12px 14px; margin-bottom: 10px; }
.san-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.san-uid { font-family: ui-monospace, monospace; font-weight: 700; color: var(--azul); }
.san-titulo { font-weight: 600; flex: 1; min-width: 180px; }
.san-desc { margin-top: 6px; }
.badge.san-aprobado { background: #d9f2e2; color: var(--verde-osc); }
.badge.san-deseable { background: #fff3cd; color: #7a5b00; }
.san-cal { width: 270px; flex-shrink: 0; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--card); overflow: hidden; transition: width .18s ease; }
.san-cal.collapsed { width: 46px; }
.san-cal-head { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--borde); font-size: 13px; }
.san-cal.collapsed .san-cal-head { border-bottom: 0; padding: 10px 8px; justify-content: center; }
.san-cal.collapsed .san-cal-head b, .san-cal.collapsed #sanCalBody { display: none; }
#sanCalBody { padding: 10px 12px; }
.cal-head { text-align: center; font-weight: 700; margin-bottom: 8px; font-size: 13px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 11px; }
.cal-dow { text-align: center; color: var(--gris); font-weight: 700; padding: 2px 0; }
.cal-day { text-align: center; padding: 4px 0; border-radius: 5px; }
.cal-day:hover { background: #eef2f8; }
.cal-hoy { background: var(--azul); color: #fff; font-weight: 700; }

/* ── RQ-32 Dashboard del A.A.: kanban (vista A) ─────────────────────── */
.dash-sel button { margin-right: 6px; }
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  align-items: start; }
.kanban-col { background: #f2f5f9; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 10px; min-height: 120px; }
.kanban-head { font-weight: 700; margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 2px solid #d7dee9; }
.kanban-body { display: flex; flex-direction: column; gap: 8px; }
.kanban-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 8px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.kanban-card:hover { border-color: #c3cede; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { background: #e8f0fe; color: #1a4f8b; border-radius: 10px;
  padding: 1px 8px; font-size: 11px; }
.dash-tarea { margin-top: 8px; }
.dash-esc-modal { width: min(560px, 92vw); max-height: 84vh; overflow-y: auto; }
.dash-esc-modal h2 { margin-top: 0; }
@media (max-width: 1100px) {
  .kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .kanban { grid-template-columns: 1fr; }
}

/* ── RQ-32 Vista C (Jornada): día de trabajo colapsable ────────────── */
.dash-dia { margin-bottom: 10px; }
.dash-dia-head { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px;
  align-items: baseline; user-select: none; }
.dash-dia-head:hover { opacity: .85; }
.dash-dia-body { margin-top: 8px; padding-left: 4px; }
.dash-dia-item { border-top: 1px solid #eef2f8; padding: 6px 0;
  display: flex; flex-direction: column; gap: 4px; }

/* ── RQ-57: previsualización inline en cards (thumbnail foto / barra audio) ── */
.dash-mini { margin: 6px 0; }
.dash-mini-img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px;
  cursor: zoom-in; border: 1px solid #d7dee9; display: block; }
.dash-mini-img:hover { border-color: #1B5E20; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.dash-mini audio { width: 100%; min-width: 180px; }
.dash-mini-tabla-img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px;
  cursor: zoom-in; border: 1px solid #d7dee9; display: block; }
.dash-text-preview { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 11px;
  color: #5a6b7d; background: #f6f8fb; border: 1px solid #eef2f8; border-radius: 6px;
  padding: 4px 8px; white-space: pre-wrap; word-break: break-word; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-text-preview:hover { border-color: #c3cede; }

/* ── RQ-35: badge de autor (iniciales + tooltip con email) ─────────── */
.badge-autor { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; min-width: 22px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  margin-right: 6px; cursor: default; vertical-align: middle;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* ── RQ-39: barra lateral izquierda estilo SNIG (categorías colapsables)
 * Identidad propia de SeTraCe (paleta existente: verde/gris). La barra es
 * fija a la izquierda; el contenido (app-shell) se corre a la derecha. ── */
:root { --sidebar-w: clamp(200px, 12vw, 320px); --rail-w: 64px; }
/* CU 6.12 (RQ-170, pedido de Eduarbo 24-sep-2026): el menu arranca COMPACTO (riel de
   iconos) en cualquier ancho de pantalla, independiente del viewport. El boton
   hamburguesa (arriba a la izquierda) lo despliega; el estado se recuerda.
   Para pasar a que arranque OCULTO del todo: cambiar SIDEBAR_DEFAULT en core.js. */
body:not(.sidebar-open) .sidebar { width: var(--rail-w); }
body:not(.sidebar-open) .app-shell { margin-left: var(--rail-w); }
body:not(.sidebar-open) .sidebar .cat-label span:not(.cat-icon) { display: none; }
body:not(.sidebar-open) .sidebar .cat-caret { display: none; }
body:not(.sidebar-open) .sidebar .cat-body { display: none; }
body:not(.sidebar-open) .sidebar .cat-head { justify-content: center; padding: 11px 4px; }
body:not(.sidebar-open) .sidebar .cat-icon { width: auto; font-size: 20px; }
body:not(.sidebar-open) .sidebar .cat-head:hover { background: #e3f1e7; }
.sidebar, .app-shell { transition: width .16s ease, margin-left .16s ease; }
/* CU 1.14 (RQ-177): 'Mi cuenta' arriba a la derecha con los datos del usuario */
.user-chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12);
             border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff;
             padding: 5px 12px; cursor: pointer; font-size: 13px; font-family: inherit; }
.user-chip:hover { background: rgba(255,255,255,.22); }
.user-chip .uc-rol { color: #9fe0b5; font-size: 12px; }
.user-chip .uc-cuenta { color: #cdeeda; font-size: 12px; }
.sidebar { position: fixed; top: 56px; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 60;
           background: var(--card); border-right: 1px solid var(--borde);
           display: flex; flex-direction: column; overflow-y: auto;
           font-family: Verdana, Tahoma, sans-serif; }
.sidebar-nav { padding: 6px 0 28px; }
.cat { border-bottom: 1px solid #edf1ed; }
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
            width: 100%; background: none; color: var(--gris); border: 0; border-radius: 0;
            padding: 12px 16px; font-size: 13px; font-weight: 400; letter-spacing: .2px;
            /* 29-sep-2026 (Eduarbo): los títulos del menú van en tipo oración — "Animales",
               "Trabajo", "Sanidad". Acá estaba la causa de que se vieran ANIMALES y TRABAJO
               en mayúscula mientras los ítems directos (Sanidad, Ayuda, Quiénes somos) se veían
               en tipo oración: el texto ya venía corregido desde el 28-sep, pero esta regla lo
               pasaba a mayúscula por CSS. Los .nav-item nunca tuvieron uppercase. */
            text-align: left; cursor: pointer;
            font-family: Verdana, Tahoma, sans-serif; }
.cat-head:hover { background: #f0f5f0; color: var(--verde-osc); }
.cat-caret { font-size: 11px; color: var(--gris); transition: transform .15s ease; }
.cat-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cat-icon { width: 16px; text-align: center; font-size: 13px; flex-shrink: 0; }
.cat.open .cat-caret { transform: rotate(180deg); }
.cat-body { display: none; padding: 2px 0 8px; }
.cat.open .cat-body { display: block; }
.nav-item { display: block; width: calc(100% - 12px); margin: 1px 6px; background: none;
            border: 0; border-left: 3px solid transparent; border-radius: 8px;
            padding: 8px 10px 8px 22px; font-size: 13px; font-weight: 400; color: var(--texto);
            text-align: left; cursor: pointer;
            font-family: Verdana, Tahoma, sans-serif; }
.nav-item:hover { background: #f0f5f0; }
.nav-item.active { background: #e3f1e7; border-left-color: var(--verde);
                   color: var(--verde-osc); font-weight: 400; }
/* Ítems DIRECTOS del menú (Inicio, Sanidad — 25-sep-2026). Van como las
 * categorías: en el riel se ve SOLO el ícono (antes quedaban más anchos porque
 * mostraban ícono + texto), y con el menú desplegado muestran ícono + nombre.
 * Estas reglas van DESPUÉS de .nav-item para ganar en display (misma especificidad). */
.nav-item.nav-directo { display: flex; align-items: center; gap: 8px; width: 100%;
                        margin: 1px 0; padding: 12px 16px; }
.nav-item.nav-directo .nav-icono { width: 16px; text-align: center; font-size: 13px; flex-shrink: 0; }
body:not(.sidebar-open) .sidebar .nav-item.nav-directo { justify-content: center; padding: 11px 4px; margin: 1px 0; }
body:not(.sidebar-open) .sidebar .nav-item.nav-directo .nav-texto { display: none; }
body:not(.sidebar-open) .sidebar .nav-item.nav-directo .nav-icono { width: auto; font-size: 20px; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(20, 42, 26, .45);
                    opacity: 0; pointer-events: none; transition: opacity .18s ease; }
body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
.app-shell { margin-left: var(--sidebar-w); padding-top: 56px; min-height: 100dvh;
             display: flex; flex-direction: column; }
.app-shell .content { flex: 1; width: 100%; }
.hamburguesa { display: inline-flex; background: none; border: 1px solid rgba(255,255,255,.45);
               color: #fff; font-size: 17px; line-height: 1; padding: 7px 10px;
               border-radius: 8px; cursor: pointer; }
.hamburguesa:hover { background: rgba(255,255,255,.14); }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.section-title { font-size: 13px; color: #cdeeda; white-space: nowrap; overflow: hidden;
                 text-overflow: ellipsis;
                 /* 25-sep-2026: el título quedaba pegado al bloque de la derecha
                    (derecha del título = izquierda de "App Android", sin aire). */
                 margin-left: 4px; margin-right: 18px; }
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: 0 0 44px rgba(0,0,0,.28); }
  .app-shell { margin-left: 0; }
  .hamburguesa { display: inline-flex; }
  .topbar-user .apk { display: none; }
}

/* ═══ RQ-80: visual del prototipo en el flujo de Registro de Trabajo (27-ago) ═══ */
.rq80-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.rq80-tipo { border: 2px solid #e2e6ea; background: #fff; border-radius: 14px; padding: 12px 10px; cursor: pointer; text-align: center; font-family: inherit; transition: border-color .1s, box-shadow .1s; }
.rq80-tipo:hover { border-color: #90caf9; }
/* RQ-186: la elegida tiene que SALTAR a la vista (jerarquía, no todo igual) */
.rq80-tipo.sel { border-color: #1565c0; background: #e3f2fd; box-shadow: 0 0 0 3px rgba(21,101,192,.16); }
.rq80-tipo.sel .rq80-nombre::after { content: " ✓"; color: #1565c0; }
.rq80-tipo .rq80-emoji { font-size: 26px; display: block; margin-bottom: 3px; }
.rq80-tipo .rq80-nombre { font-weight: 700; font-size: 14.5px; display: block; color: #1c2733; }
.rq80-tipo.sel .rq80-nombre { color: #0d47a1; }
/* El botón global de la app es verde con texto blanco (button{color:#fff}): la tarjeta
   heredaba ese blanco y el título quedaba ilegible sobre el fondo claro (visto en la
   captura del paso 2, 25-sep-2026). Colores explícitos acá. */
.rq80-tipo { color: #1c2733; }
.rq80-tipo .rq80-desc { font-size: 11.5px; color: #5a6572; margin-top: 3px; display: block; line-height: 1.3; }
/* RQ-186 (25-sep-2026, Eduarbo: "TODO fuera de la columna apilada"): los datos
   secundarios del paso 2 (predio, potrero de origen, potrero destino, bajada) van
   en UNA fila compacta, no uno debajo del otro. */
.paso2-fila { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef2f6; }
.paso2-fila > div { flex: 1 1 210px; min-width: 190px; }
.paso2-fila select, .paso2-fila input { max-width: 100%; }
.paso2-fila label { font-size: 13px; }
.paso2-fila .hint { font-size: 11.5px; }
/* 25-sep-2026 (pedido Eduarbo): en el paso 4 se marcan las caravanas que NO son de
   este predio (ajenas) y las que no figuran en el ganado de la cuenta (nuevas). */
.rq80-fila.rq80-no-propia { background: #fff8e1; border-left: 4px solid #f9a825; }
.rq80-fila.rq80-no-propia .rq80-num { color: #8d5b00; }
.rq80-mark { margin-left: 8px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.rq80-mark-ajena { background: #ffe0b2; color: #b23c00; border: 1px solid #ef6c00; }
.rq80-mark-nueva { background: #fff9c4; color: #8d6e00; border: 1px solid #f9a825; }
/* otro predio de MI cuenta: aviso suave, no es "no es tuya" */
.rq80-fila.rq80-otro-predio { background: #f4f9ff; border-left: 4px solid #90caf9; }
.rq80-mark-otro-predio { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
/* Modal del trabajo (Realizados): la evidencia se abre en el lugar, no solo se menciona */
.hist-fila-ev { cursor: pointer; }
.hist-fila-ev:hover { background: #f5f9ff; }
.hist-ver { margin-left: auto; color: #1565c0; font-weight: 700; font-size: 12.5px; }
.hist-ev-visor { border: 1px solid #e2e6ea; border-radius: 10px; padding: 8px 10px; margin: 2px 0 8px; background: #fbfcfe; }
.hist-ev-visor img { max-width: 100%; max-height: 46vh; border-radius: 8px; display: block; margin: 0 auto; }
.hist-ev-visor audio { width: 100%; }
.hist-ev-visor pre { max-height: 34vh; overflow: auto; font-size: 12px; white-space: pre-wrap; }
/* RQ-187: caravanas del trabajo que NO son del usuario (recalculado al abrir) */
.hist-chip-alerta { border-color: #ef6c00 !important; background: #fff3e0 !important; color: #b23c00 !important; font-weight: 700; }
/* RQ-188: origen de cada caravana (📎 evidencia · 📄 lector · ✍ a mano · ? previo) */
.hist-origen { margin-left: 4px; font-size: 11px; opacity: .85; }
.hist-origen-manual { color: #b23c00; font-weight: 700; opacity: 1; }
.rq80-split { display: grid; grid-template-columns: 44% 56%; gap: 16px; align-items: start; }
.rq80-chat-card, .rq80-panel-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(16,30,54,.08); display: flex; flex-direction: column; border: 1px solid #eef1f4; }
.rq80-chat-card { height: 560px; }
.rq80-chat-head, .rq80-panel-head { padding: 12px 16px; border-bottom: 1px solid #e2e6ea; font-weight: 800; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #1565c0; }
.rq80-chat-head .rq80-dot { width: 10px; height: 10px; border-radius: 50%; background: #2e7d32; }
.rq80-panel-head { justify-content: space-between; color: #1c2733; }
.rq80-contadores { font-weight: 600; font-size: 13px; color: #3c4754; }
.rq80-banner { padding: 10px 16px; border-bottom: 1px solid #e2e6ea; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.rq80-lista { flex: 1; overflow-y: auto; padding: 8px; max-height: 380px; }
.rq80-fila { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14px; border: 1px solid transparent; }
.rq80-fila:hover { background: #f6f8fa; }
.rq80-fila .rq80-num { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 13.5px; font-weight: 600; }
.rq80-fila .rq80-hora { color: #8a94a0; font-size: 12.5px; margin-left: auto; }
.rq80-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.rq80-badge-grupo { color: #fff; }
.rq80-fila.grupo { background: #f6f8fa; border-left: 4px solid #ccc; }
.rq80-grupos-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 8px; }
.rq80-gchip { border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 800; color: #fff; }
.rq80-panel-foot { padding: 12px 16px; border-top: 1px solid #e2e6ea; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rq80-helper { border: 1px solid #cbd3dc; background: #fff; border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; color: #3c4754; }
.rq80-helper:hover { background: #f6f8fa; }
.rq80-chat-input-wrap { padding: 10px; border-top: 1px solid #e2e6ea; display: none; gap: 8px; }
.rq80-chat-input-wrap.on { display: flex; }
.rq80-chat-input-wrap input { flex: 1; padding: 11px 14px; border: 1px solid #cbd3dc; border-radius: 10px; font-size: 15px; }
.rq80-chat-input-wrap button { border: none; background: #1565c0; color: #fff; border-radius: 10px; padding: 0 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
.rq80-resumen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.rq80-grupo-card { border: 2px solid #e2e6ea; border-radius: 14px; padding: 16px 18px; background: #fff; }
.rq80-grupo-card h3 { margin: 0 0 4px; font-size: 17px; }
.rq80-grupo-card .rq80-cnt { font-size: 34px; font-weight: 800; margin-top: 8px; color: #1c2733; }
.rq80-grupo-card .rq80-prod { color: #3c4754; font-size: 14px; margin-top: 4px; }
.rq80-dato-resumen { display: flex; gap: 10px; align-items: center; background: #f8fafc; border: 1px solid #eef1f4; border-radius: 10px; padding: 10px 14px; margin-top: 10px; font-size: 14px; }
.rq80-dato-resumen b { min-width: 110px; color: #5a6572; font-weight: 700; }
@media (max-width: 980px) {
  .rq80-split { grid-template-columns: 1fr; }
  .rq80-tipos { grid-template-columns: repeat(2, 1fr); }
  .rq80-resumen-grid { grid-template-columns: 1fr; }
}

/* RQ-80 pieza 3: zona de archivo del paso 3 (estilo prototipo) */
.rq80-zona-archivo { border: 2px dashed #b0bec5; border-radius: 14px; padding: 30px; text-align: center; background: #fafbfc; cursor: pointer; margin-bottom: 12px; transition: background .1s, border-color .1s; }
.rq80-zona-archivo:hover { background: #f0f4f8; border-color: #1565c0; }
.rq80-zona-archivo p { color: #5a6572; margin: 8px 0 0; font-size: 13px; }
.rq80-zona-archivo .rq80-btn-elegir { border: none; background: #1565c0; color: #fff; border-radius: 10px; padding: 12px 22px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 10px; }
.rq80-zona-archivo .rq80-btn-elegir:hover { background: #0d4fa0; }
/* 11-sep (pedido Eduarbo): la zona de archivo ocupaba demasiado alto justo
   debajo del bloque Caravanas Objetivo. Variante compacta: una sola fila. */
.rq80-zona-archivo.compacta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; border-width: 1.5px; border-radius: 12px;
  text-align: left; margin-bottom: 10px;
}
.rq80-zona-archivo.compacta p { margin: 0; font-size: 12.5px; flex: 1; min-width: 150px; }
.rq80-zona-archivo.compacta .rq80-btn-elegir { margin-top: 0; padding: 8px 16px; font-size: 14px; }

/* RQ-74: filtro de evidencia activo */
.rq80-filtro-on { background: #1565c0 !important; color: #fff !important; border-color: #1565c0 !important; }

/* RQ-74: filas de evidencia alineadas a la izquierda */
.rq80-ev-fila { display: flex; gap: 8px; align-items: flex-start; padding: 5px 4px; }
.rq80-ev-fila > input[type=checkbox] { margin-top: 4px; flex: 0 0 16px; width: 16px; height: 16px; }
.rq80-ev-fila > .badge-autor, .rq80-ev-fila > [class*=badge] { flex-shrink: 0; }
.rq80-ev-contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rq80-ev-titulo { white-space: nowrap; }
.rq80-ev-preview { font-style: italic; color: #5a6572; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 1px; }
.rq80-ev-fila .small { flex-shrink: 0; }

/* ── RQ-81: Historial de trabajos (tarjetas + modal detalle) ─────────── */
.hist-dia { margin: 14px 0 6px; font-size: 13px; font-weight: 800; color: #5a6572; text-transform: uppercase; letter-spacing: .4px; }
.hist-card { background: #fff; border: 1px solid #eef1f4; border-radius: 14px; box-shadow: 0 1px 3px rgba(16,30,54,.08); padding: 14px 16px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; transition: box-shadow .12s; }
.hist-card:hover { box-shadow: 0 3px 10px rgba(16,30,54,.12); }
.hist-emoji { font-size: 26px; flex: 0 0 38px; text-align: center; }
.hist-main { flex: 1; min-width: 220px; }
.hist-titulo { font-weight: 700; font-size: 15px; color: #1c2733; }
.hist-sub { color: #5a6572; font-size: 12.5px; margin-top: 2px; }
.hist-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hist-chip { background: #f0f4f8; color: #3c4754; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.hist-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.badge-estado { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-estado.confirmada { background: #d9f2e2; color: var(--verde-osc); }
.badge-estado.borrador { background: #fff3cd; color: #7a5b00; }
.hist-modal { width: min(720px, 94vw); max-height: 86vh; overflow-y: auto; }
.hist-seccion { font-weight: 800; font-size: 13px; color: #1565c0; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .4px; }
.hist-grupo { border: 1px solid #e2e6ea; border-left: 6px solid #90caf9; border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; background: #fafbfc; }
.hist-grupo b { font-size: 14px; }
.hist-fila { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 13.5px; }
.hist-fila b { color: #5a6572; font-weight: 700; min-width: 90px; }
.hist-vacio { color: #8a94a0; font-size: 13px; font-style: italic; }

/* ── Ganado: resumen conciso (27-ago, Eduarbo) ────────────────────── */
.gan-resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.gan-resumen-total, .gan-resumen-predio { background: #fff; border: 1px solid #eef1f4; border-radius: 14px; box-shadow: 0 1px 3px rgba(16,30,54,.08); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; transition: box-shadow .12s, border-color .12s; }
.gan-resumen-total { border-color: #1565c0; background: #eef5fd; }
.gan-resumen-predio { cursor: pointer; }
.gan-resumen-predio:hover { box-shadow: 0 3px 10px rgba(16,30,54,.12); border-color: #90caf9; }
.gan-resumen-predio.sel { border-color: #1565c0; background: #eef5fd; }
.gan-resumen-num { font-size: 34px; font-weight: 800; line-height: 1.05; color: #1c2733; }
.gan-resumen-total .gan-resumen-num { color: #1565c0; }
.gan-resumen-lbl { font-size: 13.5px; font-weight: 700; color: #3c4754; }
.gan-resumen-sub { font-size: 12px; color: #8a94a0; }
@media (max-width: 640px) { .gan-resumen { grid-template-columns: 1fr 1fr; } }

/* ── Ganado: tabla compacta para cientos/miles de animales (27-ago) ── */
.gan-tabla-compacta { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gan-tabla-compacta th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #8a94a0; font-weight: 700; padding: 4px 6px; border-bottom: 1px solid #e2e6ea; white-space: nowrap; }
.gan-tabla-compacta td { padding: 3px 6px; border-bottom: 1px solid #f2f4f7; white-space: nowrap; }
.gan-tabla-compacta tr:hover td { background: #f6f9fd; }
.gan-cv { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 12px; font-weight: 600; }
.gan-cat { color: #3c4754; }
.gan-sexo { text-align: center; color: #5a6572; }
.gan-espera { text-align: center; }
.gan-estado { color: #5a6572; font-size: 11.5px; }
.gan-acc { text-align: right; }
.gan-acc .small { padding: 1px 8px; font-size: 11px; }

/* ── Historial: hoja de registro (resumen numérico + caravanas en chips) ── */
.hist-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 10px 0; }
.hist-resumen-item { background: #f0f4f8; border: 1px solid #e2e6ea; border-radius: 12px; padding: 10px 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.hist-resumen-item b { font-size: 22px; color: #1565c0; line-height: 1.1; }
.hist-resumen-item span { font-size: 12px; color: #5a6572; }
.hist-cv-wrap { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.hist-cv-wrap .hist-chip { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }

/* ── RQ-94: Panel Ganado — Totales del rodeo (etapa 1) ── */
.gan-panel { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.gan-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gan-kpi { background: var(--card); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 3px rgba(16,30,54,.06); }
.gan-kpi-num { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--texto); }
.gan-kpi.warn .gan-kpi-num { color: #b26a00; }
.gan-kpi.danger .gan-kpi-num { color: var(--rojo); }
.gan-kpi.ok .gan-kpi-num { color: var(--verde); }
.gan-kpi-lbl { font-size: 12.5px; font-weight: 700; color: #3c4754; }
.gan-kpi-sub { font-size: 11px; color: #8a94a0; }
.gan-comp { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 20px; margin-top: 2px; }
.gan-comp-row.sin-cat .gan-comp-l1 span { color: #8a94a0; font-style: italic; }
.gan-comp-l1 { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 2px; }
.gan-comp-l1 b { font-weight: 700; }
.gan-bar { height: 8px; background: #eef1f4; border-radius: 999px; overflow: hidden; }
.gan-bar i { display: block; height: 100%; background: var(--verde); border-radius: 999px; }
.gan-comp-row.sin-cat .gan-bar i { background: #b0b9c4; }

/* ── CU 2.25: Ganado etapa 2 — secciones numeradas 1-6 con acciones ── */
.gan-head { display: flex; flex-direction: column; gap: 2px; }
.gan-head .fila-acciones button.ghost { background: transparent; border: 1px solid var(--borde); color: var(--verde); }
.gan-sec { background: var(--card); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(16,30,54,.05); }
.gan-sec-pend { border-color: #fde68a; }
/* RQ-127 / CU 2.33 — apartado de caravanas ajenas tratadas */
.gan-sec-ajenas { border-color: #f3d9a4; }
.gan-ajenas { display: flex; flex-direction: column; gap: 8px; }
.gan-sec-ctx { border-color: #cfe3cf; }
.gan-sec-tit { display: flex; align-items: center; font-size: 14px; margin: 0 0 10px; color: var(--texto); }
.num-sec { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 12px; font-weight: 800; }
.gan-kpi.click { cursor: pointer; transition: box-shadow .12s, border-color .12s, transform .06s; }
.gan-kpi.click:hover { box-shadow: 0 3px 10px rgba(16,30,54,.12); border-color: var(--verde); }
.gan-kpi.click:active { transform: scale(.985); }
.gan-kpi.activo { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(31,122,61,.18); }
.gan-comp-row.click { cursor: pointer; border-radius: 8px; padding: 3px 6px; margin: 0 -6px; transition: background .1s; }
.gan-comp-row.click:hover { background: #f2f7f2; }
.gan-comp-row.activo { background: #eaf3ea; }
.gan-pend-list { display: flex; flex-direction: column; gap: 8px; }
.gan-pend { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #eef1f4; border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.gan-pend:hover { box-shadow: 0 2px 8px rgba(16,30,54,.1); border-color: #d8e2d8; }
.gan-pend-ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.gan-pend-ico.rojo { background: #fdecea; }
.gan-pend-ico.ambar { background: #fef4e0; }
.gan-pend-ico.azul { background: #e8f0fb; }
.gan-pend-ico.gris { background: #eef0f2; }
.gan-pend-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gan-pend-txt .t { font-size: 13px; font-weight: 600; color: var(--texto); }
.gan-pend-txt .d { font-size: 11.5px; color: #8a94a0; }
.gan-pend .go { margin-left: auto; font-size: 18px; color: #b0b9c4; }
.gan-mov-list { display: flex; flex-direction: column; gap: 5px; }
.gan-mov { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; padding: 4px 2px; border-bottom: 1px dashed #f0f2f4; }
.gan-mov .f { color: #8a94a0; white-space: nowrap; font-size: 11.5px; }
.gan-mov .tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.gan-mov .tag.aplicacin { background: #e8f0fb; color: var(--azul); }
.gan-mov .tag.alta { background: #e7f4ea; color: var(--verde); }
.gan-mov .tag.baja { background: #fdecea; color: var(--rojo); }
.gan-mov .tag.transferencia { background: #fef4e0; color: #b26a00; }
.gan-mov .d { color: #3c4754; }
.gan-ctx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gan-ctx-tit { font-weight: 700; font-size: 14px; }
.gan-ctx-head .small { padding: 3px 10px; font-size: 11.5px; }
.gan-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; min-height: 4px; }
.gan-chip { background: #eef1f4; color: #5a6572; border-radius: 999px; padding: 2px 10px; font-size: 11.5px; }
.gan-chip.on { background: #eaf3ea; color: var(--verde); font-weight: 700; }
.gan-imp-vias { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 10px 0; }
.gan-imp-via { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; cursor: pointer; text-align: left; transition: box-shadow .12s, border-color .12s; }
.gan-imp-via:hover { box-shadow: 0 2px 8px rgba(16,30,54,.1); border-color: var(--verde); }
.gan-imp-via.on { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(31,122,61,.15); }
.gan-imp-via .emoji { font-size: 22px; }
.gan-imp-via .txt { display: flex; flex-direction: column; gap: 2px; }
.gan-imp-via .txt b { font-size: 13px; }
.gan-imp-via .txt .d { font-size: 11.5px; color: #8a94a0; }
.danger-txt { color: var(--rojo) !important; border-color: #f3c9c5 !important; }
/* RQ-141 / CU 2.41: barra de items de Ganado — un solo panel visible por vez
 * (pedido de Marcos: los 8 items apilados pasan a una barra de botones). */
.gan-barra-items { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.gan-barra-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--borde); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; color: var(--texto); cursor: pointer;
}
.gan-barra-btn:hover { border-color: var(--verde); }
.gan-barra-btn.activo {
  background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600;
}
@media (max-width: 640px) {
  .gan-barra-items { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .gan-barra-btn { flex: 0 0 auto; }
}

@media (max-width: 640px) { .gan-kpis { grid-template-columns: 1fr 1fr; } .gan-sec { padding: 10px; } }

/* Prototipo 3.42 (08-sep, réplica): modales de CONTENIDO SIEMPRE ≥75vw
 * (tope 1920px). No aplica a los diálogos de confirmación/aviso (popup-card
 * simple, chico por diseño) — solo a las clases de contenido. */
.popup-card.dash-esc-modal,
.popup-card.hist-modal,
.popup-card.cartera-modal {
  width: min(75vw, 1920px) !important;
  max-width: none !important;
  min-width: min(75vw, 900px);
  text-align: left;
}

/* CU 3.51 (15-sep): fecha de ocurrencia — bloque destacado del paso 1.
   Criterio Eduarbo: el dato que racionaliza el trabajo va al inicio y SE VE
   (nada de gris sobre gris). */
.cu351-fecha { padding:10px 12px; border-radius:10px; background:#f2f8ff;
  border-left:4px solid #1565c0; margin-bottom:8px; }

/* CU 3.50 (15-sep): bloques de archivos/adjuntos del paso 3 en llano. */
.cu350-ev { padding:9px 12px; border-radius:10px; background:#f7faf7;
  border-left:4px solid #2e7d32; margin:8px 0; font-size:13.5px; }

/* ═══ CU 8.29 (RQ-176): chat de Setia flotante, minimizado abajo a la derecha ═══ */
.chat-burbuja { position: fixed; right: 18px; bottom: 18px; z-index: 86;   /* por encima del contenido: el app-shell la tapaba */ width: 54px; height: 54px;
  border-radius: 50%; border: 0; background: var(--verde); color: #fff; font-size: 24px;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.chat-burbuja:hover { filter: brightness(1.08); }
.chat-col { position: fixed; right: 18px; bottom: 82px; width: min(380px, 92vw); height: min(72dvh, 640px);
  z-index: 85; background: var(--card); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.24); display: none; flex-direction: column; overflow: hidden;
  font-family: Verdana, Tahoma, sans-serif;
  /* CU 8.42 (14-oct-2026, pedido Eduarbo 13-oct): el panel se puede REDIMENSIONAR
   * (tirador en la esquina inferior derecha) y el tamano elegido se conserva
   * (core.js lo guarda en localStorage). topes para que no se pueda achicar ni
   * agrandar de mas. */
  resize: both;
  min-width: min(320px, 92vw);
  min-height: min(300px, 60dvh);
  max-width: 96vw;
  max-height: 92dvh; }
body.chat-abierto .chat-col { display: flex; }
.chat-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; background: var(--verde-osc); color: #fff; font-size: 13px; }
.chat-col-x { cursor: pointer; padding: 0 4px; }
.chat-col-frame { flex: 1; width: 100%; border: 0; background: #fff; }
/* con el menú desplegado, la columna no lo tapa */
body.sidebar-open .chat-col, body.sidebar-open .chat-burbuja { right: 18px; }

/* ── RQ-186 (28-sep-2026) — menos columna apilada en el asistente ─────────── */
/* Paso 3: las dos fuentes de caravanas EN PARALELO (archivo | pegado a mano). */
.paso3-fuentes { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.paso3-fuentes > .paso3-fuente { flex: 1 1 330px; min-width: 280px; }
.paso3-fuentes .rq80-zona-archivo { margin-bottom: 0; }
.paso3-fuentes textarea { width: 100%; box-sizing: border-box; max-height: 150px; }
.paso3-fuentes > .paso3-fuente > label { display: block; font-weight: 600; margin-bottom: 4px; }
/* Paso 5: el resumen, en grilla (antes: filas apiladas una debajo de otra). */
.paso5-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.paso5-resumen .rq80-dato-resumen { margin-top: 0; padding: 8px 12px; font-size: 13.5px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.paso5-resumen .rq80-dato-resumen b { display: block; min-width: 0; font-size: 11.5px; }
.paso5-resumen .paso5-clave { background: #e8f0fe; border-color: #c6dafc; grid-column: span 2; }