/* ================================================================
   ERP Agropecuario — estilos
   Estilo «Compacto»: menú oscuro, área de trabajo clara, botones
   azules y rojo solo para errores. Todos los colores están en las
   variables de abajo: para cambiar el tema se cambia acá.
   ================================================================ */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(../vendor/ibm-plex-sans/plex-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(../vendor/ibm-plex-sans/plex-500.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(../vendor/ibm-plex-sans/plex-600.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(../vendor/ibm-plex-sans/plex-700.woff2) format('woff2'); }

:root {
  /* Menú lateral (claro): módulos en el menú, submódulos en la pantalla */
  --side: #FFFFFF;
  --side-h: #EEF4FF;     /* fondo al pasar el mouse */
  --side-a: #1D4ED8;     /* módulo activo */
  --side-tx: #0B1B4B;
  --side-mu: #64748B;
  --navy: #0B1B4B;       /* títulos */
  --oscuro: #111827;     /* pastillas oscuras (ventanas minimizadas, pasos) */
  /* Color principal (botones, enlaces, foco). Se llama --g por compatibilidad. */
  --g: #1D4ED8;
  --g-d: #1E40AF;
  --g-l: #EFF4FF;
  /* Botón oscuro (acciones especiales) */
  --amar: #111827;
  --amar-d: #000000;
  /* Área de trabajo */
  --bg: #F3F7FD;
  --bd-azul: #E1E9F7;   /* borde de las tarjetas de módulos */
  --card: #FFFFFF;
  --tx: #111827;
  --mu: #6B7280;
  --bd: #E5E7EB;
  --bd-in: #D1D5DB;     /* bordes de campos y botones blancos */
  --th: #F9FAFB;        /* encabezado de tablas */
  --linea: #F3F4F6;     /* separación entre filas */
  /* Estados */
  --warn: #92400E;
  --warn-bg: #FEF3C7;
  --ok: #3730A3;
  --ok-bg: #E0E7FF;
  --bad: #B91C1C;       /* rojo: SOLO errores y avisos graves */
  --bad-bg: #FEF2F2;
  --radio: 8px;
  --radio-b: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--tx); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Menú a la izquierda (todo el alto); barra superior y pantalla a la derecha */
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--g); }
a:hover { color: var(--g-d); }
:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }

/* ---------- Barra superior ---------- */
.topbar {
  grid-column: 2; grid-row: 1;
  height: 60px; background: rgba(255,255,255,.7); color: var(--tx); border-bottom: 1px solid var(--bd-azul);
  display: flex; align-items: center; gap: 10px; padding: 0 22px 0 14px; z-index: 40; min-width: 0;
}
.menu-btn {
  width: 38px; height: 38px; border-radius: var(--radio); border: 1px solid var(--bd-azul);
  background: #FFFFFF; color: var(--navy); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.menu-btn:hover { background: var(--side-h); }
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn .i-close { display: none; }
@media (max-width: 900px) {   /* la cruz solo en el celular, cuando el menú tapa la pantalla */
  body.side-visible .menu-btn .i-open { display: none; }
  body.side-visible .menu-btn .i-close { display: block; }
}
.logo { font-weight: 700; font-size: 16px; letter-spacing: -.2px; white-space: nowrap; display: flex; align-items: center; gap: 9px; color: var(--navy); }
.marca-ic { width: 28px; height: 28px; border-radius: var(--radio-b); background: var(--g); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.marca-ic svg { width: 17px; height: 17px; }
body.side-visible .topbar .logo { display: none; }
.tb-ruta { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; color: var(--side-mu); }
.tb-ruta strong { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; color: var(--navy); }
/* Volver al módulo: botón reconocible (flecha, fondo y borde del color del sistema) */
.tb-mod { all: unset; box-sizing: border-box; cursor: pointer; color: var(--g); font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px 0 8px; border: 1px solid #C7D6F6; background: var(--g-l); border-radius: 9px; transition: background .12s, border-color .12s; }
.tb-mod:hover { background: #DCE7FD; border-color: var(--g); }
.tb-mod:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.tb-volver { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); }
.spacer { flex: 1; }
/* Empresa, zafra y establecimiento: con su icono, separados por una línea */
.topbar select {
  width: auto; max-width: 240px; height: 40px; padding: 0 30px 0 36px; background-color: transparent; border: 0; border-radius: var(--radio);
  color: var(--navy); font-weight: 500; font-size: 14px; background-repeat: no-repeat; background-position: 10px center, right 10px center; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.topbar select:hover { background-color: var(--side-h); }
#selEmpresa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M9 7h1M14 7h1M9 11h1M14 11h1M9 15h1M14 15h1M10 21v-3h4v3'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
#selEst { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
#selEst[hidden] { display: none; }
#selEmpresa ~ .zafra-chip, #selEmpresa ~ #selEst { border-left: 1px solid var(--bd-azul); border-radius: 0 var(--radio) var(--radio) 0; }
/* Lo marcado como oculto queda oculto aunque una regla le ponga display (p. ej. los botones del menú de usuario) */
[hidden] { display: none !important; }
.zafra-chip[hidden] { display: none !important; }
.zafra-chip { background: transparent; color: var(--navy); padding: 0 12px; height: 40px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radio); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.zafra-chip::after { content: ''; width: 13px; height: 13px; margin-left: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center; }
.zafra-chip:hover { background: var(--side-h); }
.zafra-chip:empty { display: none; }
.user-btn { background: none; border: none; color: var(--navy); cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radio-b); font-weight: 500; }
.user-btn:hover { background: var(--side-h); }
.user-menu { position: fixed; right: 12px; top: 56px; background: #fff; color: var(--tx); border: 1px solid var(--bd); border-radius: var(--radio); box-shadow: 0 10px 30px rgba(17,24,39,.14); min-width: 230px; z-index: 80; display: none; overflow: hidden; }
.user-menu.open { display: block; }
.user-menu.lado { right: auto; left: 14px; top: auto; bottom: 76px; }
.user-menu .who { padding: 12px 14px; border-bottom: 1px solid var(--bd); font-size: 13px; }
.user-menu .who small { display: block; color: var(--mu); }
.user-menu button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 11px 14px; cursor: pointer; }
.user-menu button:hover { background: var(--th); }

/* ---------- Menú lateral: solo los módulos ---------- */
.layout { display: contents; }
aside {
  grid-column: 1; grid-row: 1 / 3;
  width: 260px; background: var(--side); color: var(--side-tx); display: flex; flex-direction: column; border-right: 1px solid var(--bd-azul);
  overflow-y: auto; overflow-x: hidden; transition: width .22s ease, transform .22s ease; z-index: 30;
  scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent;
}
body.side-collapsed aside { width: 0; border-right: 0; }
.side-marca { display: flex; align-items: center; gap: 12px; padding: 22px 24px 14px; min-width: 260px; font-weight: 700; font-size: 19px; line-height: 1.1; color: var(--navy); letter-spacing: -.3px; }
.side-marca .marca-ic { width: 40px; height: 40px; border-radius: 12px; }
.side-marca .marca-ic svg { width: 24px; height: 24px; }
.side-search { padding: 6px 14px 10px; min-width: 260px; }
/* Buscador arriba en el medio (computadora) */
.tb-buscar { display: none; }
@media (min-width: 901px) {
  .topbar .spacer { display: none; }
  .tb-buscar { display: block; position: relative; flex: 0 1 380px; min-width: 220px; margin: 0 auto; }
  .tb-ruta { flex: 0 1 auto; min-width: 150px; }
  .topbar select { flex: 0 1 auto; min-width: 110px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
  .topbar .zafra-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .tb-buscar input {
    width: 100%; height: 40px; background: #FFFFFF; border: 1px solid var(--bd-azul); color: var(--navy); padding: 0 12px 0 38px; border-radius: 10px; font-size: 14px; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 13px center;
  }
  .tb-buscar input:focus { border-color: var(--g); box-shadow: 0 0 0 3px var(--g-l); }
  .tb-res { position: absolute; top: 46px; left: 0; right: 0; min-width: 340px; background: #fff; border: 1px solid var(--bd-azul); border-radius: 10px; box-shadow: 0 12px 32px rgba(17,24,39,.18);
    max-height: min(60vh, 460px); overflow-y: auto; padding: 6px 0; z-index: 60; }
  .tb-res .nav-item { margin: 1px 6px; width: calc(100% - 12px); color: var(--navy); }
  .tb-res .nav-item:hover, .tb-res .nav-item:focus-visible { background: var(--side-h); }
  .tb-res .nav-nores { padding: 10px 16px; color: var(--mu); }
  aside .side-search:empty { display: none; }
}
.side-search input {
  width: 100%; background: #FFFFFF; border: 1px solid var(--bd-azul); color: var(--navy); padding: 10px 12px 10px 38px; border-radius: 10px; font-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px center; outline: none;
}
.side-search input:focus { border-color: var(--g); box-shadow: 0 0 0 3px var(--g-l); }
.side-search input::placeholder { color: var(--side-mu); }
nav { padding: 4px 0 16px; display: flex; flex-direction: column; min-width: 260px; flex: 1; }
.nav-item {
  all: unset; cursor: pointer; padding: 11px 14px; margin: 2px 14px; border-radius: 10px; color: var(--side-tx); font-size: 15.5px; font-weight: 500;
  display: flex; gap: 14px; align-items: center; white-space: nowrap; width: calc(100% - 28px); box-sizing: border-box;
}
.nav-item svg { width: 24px; height: 24px; flex-shrink: 0; stroke: var(--g); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; }
.nav-item span small { display: block; font-size: 12px; color: var(--side-mu); font-weight: 400; }
.nav-item:hover { background: var(--side-h); }
.nav-item:focus-visible { outline: 2px solid var(--g); outline-offset: -2px; }
.nav-item.active { background: var(--side-a); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(29,78,216,.25); }
.nav-item.active svg { stroke: #fff; }
.nav-hallado { padding: 8px 14px; font-size: 14.5px; }
.nav-hallado svg { width: 20px; height: 20px; }
.nav-nores { padding: 12px 28px; color: var(--side-mu); font-size: 13px; }
/* Usuario, abajo del menú */
.side-user { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; margin: 8px 14px 16px; padding: 10px 12px; border-radius: 12px; min-width: 0; box-sizing: border-box; width: calc(100% - 28px); color: var(--navy); font-weight: 600; font-size: 14px; }
.side-user:hover { background: var(--side-h); }
.side-user .av { width: 40px; height: 40px; border-radius: 50%; background: #DCE7FB; color: var(--g); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.side-user .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.side-user svg { width: 16px; height: 16px; stroke: var(--side-mu); fill: none; stroke-width: 2.2; transform: rotate(90deg); }
.backdrop { display: none; }
main { grid-column: 2; grid-row: 2; overflow-y: auto; min-width: 0; }
.content { padding: 26px 30px 48px; }
@media (min-width: 901px) { .topbar .user-btn { display: none; } }

@media (max-width: 900px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .topbar { grid-column: 1; background: #FFFFFF; padding: 0 10px; gap: 6px; height: 56px; }
  .topbar .logo, body.side-visible .topbar .logo { display: flex; }
  .tb-ruta { display: none; }
  main { grid-column: 1; }
  aside { position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(300px, 84vw); transform: translateX(-100%); }
  body.side-collapsed aside { width: min(300px, 84vw); }
  body.side-open aside { transform: none; box-shadow: 4px 0 24px rgba(0,0,0,.25); }
  body.side-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(11,27,75,.35); z-index: 65; }
  .side-user { display: none; }
  .content { padding: 16px 14px 40px; }
  .zafra-chip, .topbar .user-btn span { display: none; }
  .topbar select { padding: 0 24px 0 32px; background-position: 7px center, right 6px center; font-size: 13.5px; }
}
@media (max-width: 520px) {
  .logo span { display: none; }
  .topbar select { max-width: 150px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
}

/* ---------- Pantalla de un módulo: grupos de submódulos en tarjetas ---------- */
.mod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.mod-tit { font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -1px; color: var(--navy); margin: 0; }
.mod-sub { font-size: 19px; color: var(--side-mu); margin: 8px 0 0; }
/* En la computadora el nombre del módulo ya está arriba (en la barra): no se repite en grande */
@media (min-width: 901px) {
  .mod-tit { display: none; }
  .mod-head { align-items: center; }
  .mod-sub { margin: 0; font-size: 17px; }
}
.mod-buscar { width: min(340px, 100%); }
.mod-buscar input { height: 46px; border-radius: 10px; border-color: var(--bd-azul); background: #fff; font-size: 14.5px; }
.mod-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: stretch; }
.mod-grupo { background: #fff; border: 1px solid var(--bd-azul); border-radius: 14px; padding: 6px 22px 10px; box-shadow: 0 1px 2px rgba(11,27,75,.04); }
.mod-g-h { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0 16px; }
.mod-g-ic { width: 56px; height: 56px; border-radius: 12px; background: #EAF1FD; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mod-g-ic svg { width: 30px; height: 30px; stroke: var(--g); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mod-g-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mod-g-t { font-size: 19px; font-weight: 700; color: var(--navy); line-height: 1.3; letter-spacing: -.2px; }
.mod-n { background: #EAF1FD; color: var(--g); font-size: 13px; font-weight: 600; min-width: 28px; height: 24px; padding: 0 8px; margin-left: 10px; vertical-align: 2px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.mod-g-d { color: var(--side-mu); font-size: 14px; line-height: 1.4; }
.mod-items { border-top: 1px solid var(--bd-azul); }
.mod-item, .mod-acceso { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 18px; width: 100%; padding: 14px 4px; color: var(--navy); font-size: 15.5px; font-weight: 500; }
.mod-item + .mod-item { border-top: 1px solid #EEF2F9; }
.mod-item:hover, .mod-item:focus-visible { color: var(--g); }
.mod-item:focus-visible { outline: 2px solid var(--g); outline-offset: -2px; border-radius: 6px; }
.mod-item > svg:first-child, .mod-acceso > svg:first-child { width: 26px; height: 26px; stroke: var(--g); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mod-item span, .mod-acceso span { flex: 1; min-width: 0; }
.mod-accesos { margin-top: 18px; background: #fff; border: 1px solid var(--bd-azul); border-radius: 14px; padding: 16px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px 16px; align-items: center; }
.mod-accesos > div b { display: block; color: var(--navy); font-size: 16px; }
.mod-accesos > div small { color: var(--side-mu); font-size: 13px; }
.mod-acceso { border: 1px solid var(--bd-azul); border-radius: 10px; padding: 14px 18px; }
.mod-acceso:hover { border-color: var(--g); background: var(--side-h); }
/* En el celular: volver al módulo arriba de cada pantalla */
.volver-mod { display: none; }
@media (max-width: 900px) {
  .mod-tit { font-size: 32px; }
  .mod-sub { font-size: 16px; }
  .mod-grupo { padding: 2px 16px 6px; }
  .mod-g-ic { width: 46px; height: 46px; }
  .mod-accesos { padding: 14px 16px; }
  .volver-mod { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--g); font-weight: 600; font-size: 14.5px;
    margin-bottom: 12px; height: 38px; padding: 0 14px 0 10px; border: 1px solid #C7D6F6; background: var(--g-l); border-radius: 10px; }
  .volver-mod:active { background: #DCE7FD; }
}

/* ---------- Componentes ---------- */
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -.2px; margin-bottom: 16px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head .page-title { margin: 0; }
.ayuda { color: var(--mu); margin: -10px 0 16px; font-size: 13.5px; max-width: 760px; }
.card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--radio); }
.card-h { padding: 12px 16px; border-bottom: 1px solid var(--bd); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: #FFFFFF; border-radius: var(--radio) var(--radio) 0 0; }
.card-h h3 { font-size: 15px; font-weight: 600; }
.card-b { padding: 16px; }
.muted { color: var(--mu); }
.small { font-size: 12.5px; }

.btn { background: var(--g); color: #fff; border: 1px solid transparent; padding: 8px 14px; min-height: 36px; border-radius: var(--radio-b); cursor: pointer; font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--g-d); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.o { background: #fff; color: var(--tx); border-color: var(--bd-in); }
.btn.o:hover { background: var(--th); border-color: #9CA3AF; }
.btn.y { background: var(--amar); color: #fff; }
.btn.y:hover { background: var(--amar-d); }
/* Borrar: blanco, con letra roja apenas marcada (el rojo fuerte queda para los errores) */
.btn.r { background: #fff; color: var(--bad); border-color: var(--bd-in); }
.btn.r:hover { background: var(--bad-bg); border-color: #FCA5A5; }
.btn.sm { padding: 4px 10px; min-height: 30px; font-size: 12.5px; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--mu); padding: 5px; border-radius: var(--radio-b); }
.icon-btn:hover { background: var(--th); color: var(--g); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

input, select, textarea { width: 100%; padding: 8px 11px; min-height: 38px; border: 1px solid var(--bd-in); border-radius: var(--radio-b); background: #fff; outline: none; font-size: 14px; }
textarea { min-height: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(29,78,216,.15); }
input[readonly] { background: var(--th); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; min-height: 0; accent-color: var(--g); padding: 0; }
.search { position: relative; }
.search input { padding-left: 36px; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; stroke: var(--mu); fill: none; stroke-width: 2; }
.fg label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 5px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.radios { display: flex; gap: 16px; flex-wrap: wrap; }
.radios label { display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; cursor: pointer; }

.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { background: var(--th); text-align: left; padding: 9px 12px; color: var(--mu); font-size: 12px; border-bottom: 1px solid var(--bd); white-space: nowrap; font-weight: 600; }
td { padding: 9px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { border-top: 1px solid var(--bd); font-weight: 600; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--th); }
td.n, th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.c, th.c { text-align: center; }
.empty { color: var(--mu); padding: 28px; text-align: center; }

.pill { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-block; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.pen { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: #FEE2E2; color: var(--bad); }
.pill.gray { background: #F3F4F6; color: #4B5563; }
.pill.borde { background: #fff; color: #374151; box-shadow: inset 0 0 0 1px var(--bd); }

/* ---------- Dashboard ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.zafra-tabs { display: flex; background: #E5E7EB; padding: 3px; border-radius: 8px; margin-bottom: 12px; overflow-x: auto; }
.zafra-tabs button { all: unset; flex: 1; text-align: center; cursor: pointer; padding: 9px 14px; font-size: 13px; font-weight: 700; color: #4B5563; border-radius: 6px; white-space: nowrap; text-transform: uppercase; }
.zafra-tabs button.active { background: var(--g); color: #fff; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--bd); border-radius: var(--radio); padding: 18px 16px; display: flex; gap: 14px; align-items: center; min-height: 84px; }
.kpi .ic { font-size: 26px; width: 40px; text-align: center; flex-shrink: 0; }
.kpi h4 { font-size: 15px; font-weight: 700; }
.kpi .v { color: var(--mu); margin-top: 3px; }
.kpi .s { font-size: 11px; color: var(--mu); }
.mapbox { border-radius: 8px; overflow: hidden; border: 1px solid var(--bd); background: #E5E7EB; }
@media (max-width: 1100px) { .dash { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr; } }

/* ---------- Zafras (tarjetas) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.zcard { border: 1px solid var(--bd); border-radius: var(--radio); padding: 18px; background: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: border-color .15s, box-shadow .15s; }
.zcard:hover { border-color: var(--g); box-shadow: 0 2px 10px rgba(29,78,216,.12); }
.zcard.sel { border-color: var(--g); box-shadow: inset 4px 0 0 var(--g); }
.zcard h4 { font-size: 17px; font-weight: 700; }
.zcard .cult { font-size: 28px; }
.zcard .zf-tx { flex: 1; min-width: 0; }
.zf-editar { flex-shrink: 0; border: 1px solid var(--bd); }
.zf-barra { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.zf-buscar { flex: 1; min-width: 200px; }

/* ---------- Mapa de lotes ---------- */
.lotes-wrap { position: relative; height: calc(100vh - 56px); }
.lotes-wrap #lotesMap { position: absolute; inset: 0; }
.lotes-panel { position: absolute; z-index: 500; top: 14px; left: 14px; bottom: 14px; width: 400px; max-width: calc(100% - 28px); display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); overflow: hidden; transition: transform .2s; }
.lotes-panel.oculto { transform: translateX(calc(-100% - 20px)); }
.lotes-panel .card-h { border-radius: 0; }
.lotes-list { overflow-y: auto; padding: 0 12px 12px; flex: 1; }
.lote-item { border: 1px solid var(--bd); border-radius: 8px; padding: 14px; margin-top: 10px; display: grid; grid-template-columns: 42px 1fr; gap: 12px; }
.lote-item.sel { border-color: var(--g); box-shadow: inset 4px 0 0 var(--g); }
.lote-num { width: 38px; height: 38px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lote-item h4 { font-size: 15px; }
.lote-acc { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.map-float { position: absolute; z-index: 500; top: 14px; right: 14px; display: flex; gap: 8px; }
.draw-hint { position: absolute; z-index: 600; left: 50%; top: 14px; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 13px; display: flex; gap: 10px; align-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
@media (max-width: 760px) { .lotes-panel { width: auto; right: 14px; bottom: auto; max-height: 55%; } }

/* ---------- Trabajos ---------- */
.trab { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--bd); border-radius: var(--radio); min-height: 70vh; }
.facets { border-right: 1px solid var(--bd); }
.facet { padding: 14px 16px; border-bottom: 1px solid var(--bd); }
.facet h4 { font-size: 15px; margin-bottom: 10px; }
.facet .search { margin-bottom: 8px; }
.facet label { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; cursor: pointer; }
.facet label .cnt { color: var(--mu); }
.facet .mas { font-size: 12.5px; color: var(--g); cursor: pointer; margin-top: 6px; background: none; border: none; font-weight: 600; }
.trab-main { min-width: 0; }
.trab-main .toolbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
.dias-neg { color: var(--g); font-weight: 700; }
@media (max-width: 900px) { .trab { grid-template-columns: 1fr; min-height: 0; } .facets { border-right: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }

/* ---------- Calendario ---------- */
.cal-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; flex-wrap: wrap; }
.cal-head h3 { flex: 1; text-align: center; font-size: 22px; font-weight: 500; text-transform: lowercase; min-width: 200px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--bd); }
.cal-dow { text-align: center; font-weight: 700; padding: 8px 4px; border-bottom: 1px solid var(--bd); border-right: 1px solid var(--bd); font-size: 13px; }
.cal-day { min-height: 112px; border-right: 1px solid var(--bd); border-bottom: 1px solid var(--bd); padding: 4px; overflow: hidden; }
.cal-day .d { text-align: right; font-size: 13px; padding: 2px 4px; color: #555; }
.cal-day.otro .d { color: #bbb; }
.cal-day.hoy { background: #EFF4FF; }
.ev { display: block; font-size: 12px; color: #fff; border-radius: 4px; padding: 3px 6px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; font-weight: 600; }
.ev.pend { opacity: .7; outline: 2px dashed rgba(255,255,255,.7); outline-offset: -3px; }
.agenda-dia { padding: 10px 16px; border-bottom: 1px solid var(--bd); }
.agenda-dia h4 { font-size: 13px; color: var(--mu); margin-bottom: 6px; text-transform: capitalize; }
.agenda-dia .ev { display: inline-block; margin-right: 6px; }
@media (max-width: 700px) { .cal-day { min-height: 74px; } .ev { font-size: 10px; padding: 2px 3px; } .cal-head h3 { font-size: 17px; } }

/* ---------- SENAVE ---------- */
/* Registro SENAVE: cada fumigación separada con una línea; sus otros productos debajo, sin línea */
#imprimir .sv-hoja table.inf-fija tr.sv-nueva td { border-top: 1px solid #888; }
#imprimir .sv-hoja table.inf-fija tr.sv-sigue td { border-top: 0; }
#imprimir .sv-hoja table.inf-fija td { border-bottom: 0; font-size: .95em; }
.faltan { color: var(--bad); font-size: 12px; }

/* ---------- Modal y avisos ---------- */
/* Las ventanas se abren centradas en la pantalla */
.modal-bg { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px 14px; }
/* Ventana: no tapa el resto (se puede seguir usando el menú y la pantalla de atrás) */
.modal-bg.ventana { pointer-events: none; }
.modal-bg.ventana .modal { pointer-events: auto; }
.modal-bg.ventana.min { display: none; }
/* Confirmación: fondo oscuro y bloquea hasta que se responde */
.modal-bg.bloquea { background: rgba(17,24,39,.5); align-items: center; z-index: 2800 !important; }
.modal { background: #fff; border-radius: 10px; width: 100%; max-width: 640px; border: 2px solid var(--g); box-shadow: 0 18px 50px rgba(17,24,39,.28);
  display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.modal-bg.bloquea .modal { max-width: 440px; }
.modal-bg.ventana:not(.activa) .modal { box-shadow: 0 8px 24px rgba(17,24,39,.16); border-color: #B9CBF2; }
.modal.lg { max-width: 920px; }
.modal-h { padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--bd); display: flex; justify-content: space-between; align-items: center; gap: 8px; border-radius: 10px 10px 0 0; flex-shrink: 0; }
.modal-bg.ventana .modal-h { cursor: move; user-select: none; touch-action: none; }
.modal-h h3 { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-hb { display: flex; gap: 2px; flex-shrink: 0; }
.modal-hb .icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
/* Barra de título de las ventanas en el azul del sistema (la de atrás, en un azul claro) */
.modal-h { background: var(--g); border-bottom-color: var(--g); border-radius: 8px 8px 0 0; }
.modal-h h3 { color: #fff; }
.modal-h .icon-btn { color: #fff; }
.modal-h .icon-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.modal-bg.ventana:not(.activa) .modal-h { background: #DCE6FB; border-bottom-color: #C7D6F6; }
.modal-bg.ventana:not(.activa) .modal-h h3, .modal-bg.ventana:not(.activa) .modal-h .icon-btn { color: var(--navy); }
.modal-b { padding: 18px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.modal-f { padding: 12px 18px; border-top: 1px solid var(--bd); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; flex-shrink: 0; }
/* Bandeja: ventanas minimizadas, abajo a la derecha */
.bandeja { position: fixed; right: 16px; bottom: 14px; z-index: 2700; display: flex; gap: 8px; flex-wrap: wrap-reverse; justify-content: flex-end; max-width: calc(100vw - 32px); }
.bandeja-i { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; height: 40px; padding: 0 14px; border: 0; border-radius: var(--radio); background: var(--oscuro); color: #fff; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; box-shadow: 0 6px 18px rgba(17,24,39,.3); }
.bandeja-i:hover { background: #1F2937; }
.bandeja-i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeja-i svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; flex-shrink: 0; }
.modal-f .izq { margin-right: auto; }
.items-tbl td { padding: 6px; }
.items-tbl input, .items-tbl select { padding: 7px 8px; }
.ac-modo { display: flex; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; }
.ac-modo button { flex: 1; padding: 10px 8px; border: 0; background: #fff; font: inherit; font-weight: 700; color: var(--mu); cursor: pointer; }
.ac-modo button + button { border-left: 1px solid var(--bd); }
.ac-modo button.on { background: var(--g); color: #fff; }
.tr-cant { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.tr-cant span { min-width: 34px; text-align: left; }
/* Números a la derecha de su columna, alineados con el título; «Cantidad» se alinea con el campo, no con la unidad */
.items-tbl td > input[type=number], .items-tbl td > input[data-num] { display: block; margin-left: auto; }
/* Números: se alinean a la derecha; si no se entienden, borde rojo */
input[data-num] { font-variant-numeric: tabular-nums; }
input.num-mal, input.num-mal:focus { border-color: var(--bad) !important; box-shadow: 0 0 0 3px var(--bad-bg) !important; }
.items-tbl th.c-unid { padding-right: 46px; }
.tr-stock { margin-top: 3px; padding-left: 2px; white-space: nowrap; }
.tr-stock:empty { display: none; }
.tr-falta { color: var(--warn); background: var(--warn-bg); border-radius: 4px; padding: 1px 6px; font-weight: 600; }
.items-tbl input.tr-ha-propia { border-color: var(--g); box-shadow: inset 0 0 0 1px var(--g); font-weight: 700; }
.toast-wrap { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #111827; color: #fff; padding: 11px 16px; border-radius: var(--radio); font-size: 13.5px; box-shadow: 0 6px 18px rgba(0,0,0,.25); max-width: 90vw; }
.toast.err { background: var(--bad); }
.alert { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
/* Rojo solo para errores; .alert solo (ámbar) es un aviso */
.alert.err { background: var(--bad-bg); color: var(--bad); }

/* ---------- Login ---------- */
.login-bg { position: fixed; inset: 0; z-index: 4000; background: linear-gradient(160deg, #0B1220, #1F2937); display: flex; align-items: center; justify-content: center; padding: 16px; }
.login { background: #fff; border-radius: 8px; padding: 30px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login h1 { font-size: 22px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; letter-spacing: -.2px; }
.login .marca-ic { width: 34px; height: 34px; }
.login .fg { margin-top: 14px; }
.login .btn { width: 100%; justify-content: center; margin-top: 20px; min-height: 44px; font-size: 15px; }
.login .err { color: var(--bad); font-size: 13px; margin-top: 10px; min-height: 18px; }

.leaflet-container { font-family: inherit; isolation: isolate; }  /* los controles del mapa no tapan menús ni modales */
.lote-label { background: transparent; border: none; box-shadow: none; color: #fff; font-weight: 700; text-shadow: 0 1px 3px #000, 0 0 2px #000; font-size: 12px; }
.lote-label::before { display: none; }
.lote-label { line-height: 1.15; white-space: nowrap; }
/* Puntos de dibujo de los lotes (vértices): redondos, chicos, que se vea la línea */
.leaflet-marker-icon.mapa-vertice { background: #fff; border: 2px solid #1d4ed8; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.35); cursor: pointer; }
.leaflet-marker-icon.mapa-vertice:hover { background: #ffe14d; }
.pin { width: 30px; height: 30px; border-radius: 50%; background: #111827; border: 2px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }

/* =====================================================================
   CELULAR (≤ 700 px)
   - Las tablas se muestran como tarjetas (cada fila = una tarjeta con
     "etiqueta: valor"); las etiquetas las pone ui.js desde el encabezado.
   - Los formularios ocupan toda la pantalla y los botones quedan fijos abajo.
   - Campos de 16 px para que el teléfono no haga zoom al tocarlos.
   ===================================================================== */
.btn-filtros { display: none; }
@media (max-width: 700px) {
  body { font-size: 15px; }
  input, select, textarea { font-size: 16px; padding: 11px 12px; }
  .btn { padding: 11px 14px; font-size: 14px; }
  .btn.sm { padding: 8px 11px; font-size: 13px; }
  .icon-btn { padding: 9px; }
  .icon-btn svg { width: 20px; height: 20px; }
  .page-title { font-size: 19px; }
  .page-head > div { width: 100%; }
  .page-head > div .btn { flex: 1; justify-content: center; }
  .card-h { padding: 12px 14px; }
  .card-b { padding: 14px; }

  /* Grillas de formulario: 2 columnas, y 1 en pantallas muy angostas */
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .form-grid .full, .form-grid [style*="span 2"] { grid-column: 1 / -1 !important; }

  /* ---- Tablas → tarjetas ---- */
  table.cards-m, table.cards-m tbody, table.cards-m tfoot, table.cards-m tr, table.cards-m td { display: block; width: auto; }
  table.cards-m thead { display: none; }
  table.cards-m tr { border: 1px solid var(--bd); border-radius: 8px; margin: 10px 12px; padding: 6px 14px; background: #fff; }
  table.cards-m tr.click:active { background: var(--g-l); }
  table.cards-m td { border: none; padding: 6px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; min-height: 30px; }
  table.cards-m td::before { content: attr(data-label); font-weight: 700; color: var(--mu); font-size: 12.5px; text-align: left; flex-shrink: 0; max-width: 45%; }
  table.cards-m td[data-label=""]::before, table.cards-m td:not([data-label])::before { display: none; }
  table.cards-m td[data-label=""] { justify-content: flex-end; }
  table.cards-m td:empty { display: none; }
  table.cards-m td.empty, table.cards-m td[colspan] { display: block; text-align: center; }
  table.cards-m td.empty::before, table.cards-m td[colspan]::before { display: none; }
  table.cards-m tfoot tr { background: var(--g-l); }
  table.cards-m td > strong:only-child { text-align: right; }
  .tbl { overflow-x: visible; }

  /* Tablas de productos dentro de formularios: cada fila es una tarjeta con campos a lo ancho */
  table.items-tbl.cards-m tr { margin: 10px 0; }
  table.items-tbl.cards-m td { justify-content: space-between; }
  table.items-tbl.cards-m td > select, table.items-tbl.cards-m td > input, table.items-tbl.cards-m td > div { flex: 1; width: auto !important; max-width: 58%; min-width: 0; margin: 0 !important; display: block; }
  table.items-tbl.cards-m td[data-label=""] { justify-content: flex-end; }
  /* El ícono de "abrir" (lupa / lápiz) sobra: se toca la tarjeta entera */
  table.cards-m tr.click > td[data-label=""]:has(> svg:only-child) { display: none; }
  .topbar select { font-size: 14px; max-width: 52vw; }
  /* Empresa y establecimiento: entran los dos */
  body.con-est .topbar select { max-width: 36vw; padding: 0 20px 0 30px; background-position: 6px center, right 4px center; }
  body.con-est .logo { display: none; }
  table.items-tbl.cards-m td > div input { width: 100% !important; }
  table.items-tbl.cards-m td > div.sv-reg, table.items-tbl.cards-m td > div.tr-cant { display: flex; }
  table.items-tbl.cards-m .tr-stock { white-space: normal; }

  /* ---- Formularios (modales) a pantalla completa ---- */
  .modal-bg { padding: 0; display: block; }
  .modal-bg.bloquea { display: flex; padding: 14px; }
  .modal, .modal.lg { max-width: none; height: 100dvh; max-height: none; border-radius: 0; border: 0; border-top: 3px solid var(--g); }
  .modal-bg.bloquea .modal { height: auto; border-radius: 10px; border: 2px solid var(--g); }
  .modal-bg.bloquea .modal-h { border-radius: 8px 8px 0 0; }
  .modal-h { background: var(--g); padding: 8px 8px 8px 14px; border-radius: 0; }
  .modal-hb .icon-btn { width: 42px; height: 42px; }
  .modal-b { padding: 14px; }
  .modal-f { background: #fff; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 12px rgba(0,0,0,.06); }
  .bandeja { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); justify-content: stretch; }
  .bandeja-i { flex: 1 1 140px; max-width: none; height: 46px; justify-content: center; }
  body.ventana-a-la-vista .bandeja { display: none; }
  .modal-f .btn { flex: 1; justify-content: center; }
  .modal-f .izq { flex: 0 0 auto; margin-right: 0; }

  /* ---- Menú principal ---- */
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px; gap: 10px; min-height: 0; align-items: flex-start; }
  .kpi .ic { font-size: 20px; width: 26px; }
  .kpi h4 { font-size: 13px; }
  .kpi .v { font-size: 14px; }
  #dashMap { height: 340px; }

  /* ---- Trabajos: filtros plegables ---- */
  .btn-filtros { display: inline-flex; }
  .trab { min-height: 0; }
  .facets { display: none !important; }
  .trab.filtros-abiertos .facets { display: grid !important; grid-template-columns: 1fr; border-bottom: 1px solid var(--bd); }

  /* ---- Radios largos (calendario): fila deslizable ---- */
  .radios { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; gap: 14px; -webkit-overflow-scrolling: touch; }
  .radios label { white-space: nowrap; }

  /* ---- Mapa de lotes ---- */
  .lotes-wrap { height: calc(100dvh - 56px); }
  .map-float { top: auto; right: auto; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 600; }
  .lotes-panel { top: 10px; left: 10px; right: 10px; max-height: calc(100% - 90px); width: auto; }
  .lote-acc .btn { flex: 1; justify-content: center; }

  /* ---- Calendario ---- */
  .cal-head { gap: 6px; }
  .cal-head h3 { order: -1; flex-basis: 100%; min-width: 0; }

  .login { padding: 24px; }
}
@media (max-width: 380px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .kpis { grid-template-columns: 1fr; }
}

/* ---------- Consola de clientes (dueño de la plataforma) ---------- */
.consola-tag { display: none; background: var(--ok-bg); color: var(--ok); padding: 0 10px; height: 28px; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
body.consola { --side: #F5F3FF; --side-h: #EDE9FE; --side-a: #4338CA; }
body.consola .consola-tag { display: inline-flex; }
body.consola .zafra-chip, body.consola #selEmpresa, body.consola #selEst { display: none !important; }
.cs-kpis { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.cs-kpi { text-align: left; cursor: pointer; font: inherit; min-height: 0; padding: 14px; }
.cs-kpi.sel { border-color: #4a5285; box-shadow: 0 0 0 2px #4a5285 inset; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; } }
table.kv td { padding: 6px 0; vertical-align: top; }
table.kv td:first-child { color: var(--mu); padding-right: 16px; white-space: nowrap; }

/* ---------- Aviso de licencia ---------- */
.lic-aviso { padding: 10px 16px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--bd); }
.lic-aviso.warn { background: var(--warn-bg); color: var(--warn); }
.lic-aviso.bad { background: var(--bad-bg); color: var(--bad); }
@media (max-width: 480px) { .consola-tag { display: none !important; } }

/* ---------- Entrada de soporte ---------- */
.soporte-tag { background: var(--warn-bg); color: var(--warn); border: 1px solid #FCD34D; border-radius: var(--radio-b); padding: 0 12px; height: 34px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
body.soporte .topbar { box-shadow: inset 0 -3px 0 #F59E0B; }

/* ---------- Impresión (extractos) ---------- */
/* ---------- Reportes ---------- */
.solo-print { display: none; }
/* ---------- Reportes: para mirar en pantalla (celular primero) ---------- */
.rp-head { align-items: center; }
.rp-acc { display: flex; gap: 6px; flex-wrap: nowrap; margin-left: auto; }
.rp-acc .btn { width: auto !important; flex: 0 0 auto; }
.page-head.rp-head > .rp-acc { width: auto; }
.rp-barra { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.rp-barra > .rp-chips { flex: 1; min-width: 0; }
.rp-barra > .rp-chips.rp-mon { flex: 0 0 auto; padding-left: 8px; border-left: 1px solid var(--bd); }
.rp-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; }
.rp-chips::-webkit-scrollbar { display: none; }
.rp-chip { flex: 0 0 auto; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bd-in); background: #fff; color: var(--tx); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rp-chip svg { width: 16px; height: 16px; }
.rp-chip svg, .rp-sel svg, .rp-gf svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-chip.on { background: var(--g); border-color: var(--g); color: #fff; }
.rp-fbtn { flex-shrink: 0; }
.rp-fbtn b { background: #fff; color: var(--g); border-radius: 999px; min-width: 18px; height: 18px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.rp-fbtn b:empty { display: none; }
.rp-sel { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 12px; border: 1px solid var(--bd-in); border-radius: var(--radio); background: #fff; flex: 1; min-width: 0; max-width: 360px; }
.rp-sel svg { width: 18px; height: 18px; color: var(--g); flex-shrink: 0; }
.rp-sel select, .rp-sel input { border: 0 !important; height: 36px; flex: 1; min-width: 0; background: transparent; box-shadow: none !important; padding-left: 0; font-weight: 600; }
.rp-sel span { font-size: 13px; color: var(--mu); }
.rp-filtros { margin-bottom: 12px; }
.rp-fpie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.rp-ftxt { margin: 0 0 10px; }
.rp-kpis { margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }
.rp-kpis .kpi { min-height: 0; padding: 14px 16px; }
.rp-kpis .kpi h4 { font-size: 13px; font-weight: 600; color: var(--mu); }
.rp-kpis .kpi .v { font-size: 22px; font-weight: 800; color: var(--tx); margin-top: 2px; line-height: 1.15; }
.rp-ver { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rp-ver > span { flex-shrink: 0; }
.rp-ver .rp-chips { flex: 1; min-width: 0; }
.rp-ver .rp-chip { height: 32px; font-size: 13px; padding: 0 12px; }
.rp-grupos .card-h { gap: 8px; }
.rp-g { border-top: 1px solid var(--linea); }
.rp-gh { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto 18px; gap: 12px; align-items: center; width: 100%; padding: 12px 16px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rp-gh:hover { background: var(--g-l); }
.rp-gn { display: flex; flex-direction: column; min-width: 0; }
.rp-gn strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-gn .small { overflow: hidden; text-overflow: ellipsis; }
.rp-gb { height: 10px; background: var(--linea); border-radius: 5px; overflow: hidden; }
.rp-gb i { display: block; height: 100%; background: #2a78d6; border-radius: 5px; }
.rp-gv { font-weight: 700; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.rp-gf svg { width: 16px; height: 16px; color: var(--mu); transition: transform .15s; }
.rp-g.abierto .rp-gf svg { transform: rotate(90deg); }
.rp-g.abierto > .rp-gh { background: var(--g-l); }
.rp-gd { padding: 0 0 10px; background: #FBFCFE; border-top: 1px solid var(--linea); }
.rp-gd .tbl { border: 0; }
.rp-gtot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 2px solid var(--bd); }
.rp-mas { display: block; margin: 10px auto 4px; }
/* Sin conexión: aviso arriba (lo guardado en el equipo) */
.off-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bd-in); background: #fff; color: var(--navy); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; margin-right: 6px; }
.off-chip[hidden] { display: none !important; }
.off-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.off-chip.sin { background: #FFFBEB; border-color: #F59E0B; color: #B45309; }
.off-chip.mal { background: #FFFBEB; border-color: #D97706; color: #92400E; }
.off-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.off-chip b { background: var(--navy); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.off-chip.sin b, .off-chip.mal b { background: #B45309; }
/* En el celular la barra de arriba no tiene lugar: el aviso flota abajo a la izquierda */
@media (max-width: 760px) { .off-chip { position: fixed; left: 12px; bottom: 16px; z-index: 2600; height: 40px; box-shadow: 0 4px 14px rgba(17,24,39,.18); margin: 0; } }
/* Cuentas a pagar (ámbar para lo vencido: el rojo queda para errores) */
.kpi.cp-vencido { border-color: #F59E0B; background: #FFFBEB; }
.kpi.cp-vencido .v { color: #B45309 !important; }
.cp-txt-venc { color: #B45309; font-weight: 600; }
.cp-buscar { margin-bottom: 12px; }
.cp-pagar-g { align-self: flex-start; margin: 4px 0 8px; }
.rp-card.click { cursor: pointer; }
.rp-card.click:hover { border-color: var(--g); }
.cp-pagos { padding: 0; }
.cp-tabla td { vertical-align: middle; }
.rp-cards { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 2px; }
.rp-card { background: #fff; border: 1px solid var(--bd); border-radius: var(--radio); padding: 10px 12px; }
.rp-c1 { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.rp-ct { display: flex; flex-direction: column; min-width: 0; }
.rp-ct strong { font-size: 15px; overflow-wrap: anywhere; }
.rp-cv { font-weight: 800; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-cd { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--bd); }
.rp-cd > div { min-width: 0; }
.rp-cd dt { font-size: 11px; color: var(--mu); }
.rp-cd dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .rp-head .page-title { font-size: 20px; }
  .rp-head { flex-wrap: nowrap !important; }
  .rp-acc .btn { padding: 0 10px; }
  .rp-kpis { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .rp-kpis .kpi { padding: 10px 12px; }
  .rp-kpis .kpi .v { font-size: 18px; }
  .rp-gh { grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: 'n v f' 'b b b'; gap: 6px 10px; padding: 12px; }
  .rp-gn { grid-area: n; } .rp-gv { grid-area: v; } .rp-gf { grid-area: f; } .rp-gb { grid-area: b; height: 8px; }
  .rp-gtot { padding: 12px; }
  .rp-ver > span { display: none; }
  /* Período en una fila; moneda y filtros abajo */
  .rp-barra { flex-wrap: wrap; }
  .rp-barra > .rp-chips:first-child { flex: 1 1 100%; }
  .rp-barra > .rp-chips.rp-mon { padding-left: 0; border-left: 0; }
  .rp-barra > .rp-fbtn { margin-left: auto; }
}
@media (max-width: 420px) { .rp-acc .btn.o { font-size: 0; gap: 0; width: 38px; justify-content: center; } .rp-acc .btn.o svg { font-size: 14px; } }
@media print {
  .rp-gh { padding: 6px 0; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto; }
  .rp-gd { background: none; }
  .rp-g { break-inside: auto; }
  .rp-gb i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.rp-cab h2 { font-size: 18px; margin: 4px 0; }
.rp-grp td { background: var(--g-l); font-weight: 700; color: var(--g-d); text-align: left !important; }
@media print {
  .solo-print { display: block; margin-bottom: 10px; }
  .rp-hoja .card { break-inside: auto; border: none; }
  .rp-hoja table { font-size: 11px; }
  .rp-hoja th, .rp-hoja td { padding: 4px 6px !important; }
  .rp-hoja .rp-kpis { display: flex !important; gap: 10px; flex-wrap: wrap; }
  .rp-hoja .rp-kpis .kpi { padding: 6px 10px; border: 1px solid #ccc; }
}
@media print {
  .topbar, #side, .backdrop, .lic-aviso, .no-print, .toast-wrap { display: none !important; }
  body, .layout, main, #main { display: block !important; height: auto !important; overflow: visible !important; background: #fff !important; }
  .card { break-inside: avoid; box-shadow: none !important; }
  .content { padding: 0 !important; }
}

/* ---------- RR.HH.: planilla de asistencia ---------- */
.rh-fila { display: grid; grid-template-columns: minmax(150px, 1fr) auto 96px; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--bd); }
.rh-estados { display: flex; gap: 4px; flex-wrap: wrap; }
.rh-est { min-width: 40px; height: 40px; border-radius: 8px; border: 2px solid var(--col); background: #fff; color: var(--col); font-weight: 700; cursor: pointer; font-size: 14px; }
.rh-est.sel { background: var(--col); color: #fff; }
.rh-est:disabled { opacity: .45; cursor: default; }
.rh-est.rh-reloj { --col: #4B5563; font-size: 17px; }
.rh-fila.rh-resaltada { background: #FFFBEB; }
/* Asistencia: calendario del mes de un empleado */
.as-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 8px 16px 12px; }
.as-sem { text-align: center; font-size: 12px; font-weight: 700; color: var(--mu, #6B7280); text-transform: uppercase; padding: 2px 0; }
.as-dia { position: relative; min-height: 78px; border: 1px solid var(--bd); border-radius: 10px; background: var(--card); color: inherit; font: inherit;
  text-align: left; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.as-dia:hover:not(:disabled) { border-color: var(--pri, #2563EB); box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
.as-dia.hoy { border: 2px solid var(--pri, #2563EB); }
.as-dia.normal { background: rgba(46, 125, 50, .06); }
.as-dia.con { border-color: var(--col); background: color-mix(in srgb, var(--col) 12%, var(--card)); }
.as-dia.fuera { opacity: .35; cursor: default; }
.as-dia.futuro:not(.con) { opacity: .7; }
.as-n { font-weight: 700; font-size: 15px; }
.as-est { position: absolute; top: 6px; right: 6px; min-width: 24px; height: 24px; border-radius: 6px; background: var(--col); color: #fff;
  font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.as-txt { display: flex; flex-direction: column; font-size: 12px; line-height: 1.25; color: var(--mu, #6B7280); }
.as-txt .as-nom { color: var(--col); font-weight: 700; }
.as-ley { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 16px 14px; color: var(--mu, #6B7280); }
.as-ley span { display: inline-flex; align-items: center; gap: 5px; }
.as-ley b { color: #fff; border-radius: 5px; min-width: 22px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; padding: 0 3px; }
@media (max-width: 700px) {
  .as-cal { gap: 3px; padding: 6px 8px 10px; }
  .as-dia { min-height: 54px; padding: 4px; border-radius: 8px; }
  .as-n { font-size: 13px; }
  .as-est { top: auto; bottom: 4px; right: 4px; min-width: 20px; height: 18px; font-size: 10px; }
  .as-txt { display: none; }
}
@media (max-width: 700px) { .form-grid .as-fg { grid-column: 1 / -1; } }
.pd-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; max-height: 50vh; overflow: auto; }
.pd-lista .check { padding: 6px 0; }
.pd-lista .pd-todos { grid-column: 1 / -1; border-bottom: 1px solid var(--bd); }
/* Horas: ventana para cargar (empleado ancho, luego fecha, entrada y salida) */
@media (min-width: 701px) { .form-grid.mc-ventana { grid-template-columns: 2fr 1.2fr 1fr 1fr; } }
@media (max-width: 700px) { .form-grid.mc-ventana .mc-emp { grid-column: 1 / -1; } }
/* Marcaciones: reporte por empleado */
.mc-tabla tr.mc-roja td { background: #FEF2F2; color: #B91C1C; }
.mc-tabla tr.mc-nota td { color: var(--mu, #666); }
.mc-tabla tfoot td { border-top: 2px solid var(--bd); }
.mc-campos { display: grid; grid-template-columns: 170px 130px 130px 1fr auto; gap: 10px; align-items: end; }
.mc-campos .fg { margin: 0; }
@media (max-width: 760px) { .mc-campos { grid-template-columns: 1fr 1fr; } .mc-campos .fg:first-child, .mc-campos .mc-obs, .mc-campos .fg:last-child { grid-column: 1 / -1; } .mc-campos .btn { width: 100%; justify-content: center; } }
.mc-dueno { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.mc-dueno select { width: auto; min-width: 200px; flex: 1 1 200px; }
.rh-extra input { width: 100%; }
.rh-vac { white-space: nowrap; }
.rh-tramos { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: flex-end; }
.rh-tramo { display: flex; gap: 6px; align-items: center; }
.rh-tramo input { width: 120px; }
.rh-tramo span { color: var(--mu, #888); font-size: 13px; }
.rh-tramo-pie { display: flex; gap: 8px; align-items: center; min-width: 96px; justify-content: flex-end; }
@media (max-width: 700px) {
  .rh-fila { grid-template-columns: 1fr 84px; }
  .rh-estados { grid-column: 1 / -1; order: 3; }
  .rh-tramos { grid-column: 1 / -1; justify-content: flex-start; }
  .rh-tramo { flex: 1 1 100%; }
  .rh-tramo input { flex: 1; width: auto; min-width: 0; }
  .rh-tramo-pie { flex: 1 1 100%; justify-content: space-between; }
  .rh-est { flex: 1; min-width: 0; }
}

/* ---------- Recibos y planillas impresas ---------- */
/* ---------- Documentos (órdenes, recibos, planillas, contratos): se ven en pantalla como una hoja ---------- */
#docVisor { position: fixed; inset: 0; z-index: 2850; background: #E5E9F0; display: flex; flex-direction: column; }
.dv-barra { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--bd); min-height: 56px; flex-shrink: 0; }
.dv-volver { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit; font-weight: 600; color: var(--g); cursor: pointer; padding: 8px 6px; }
.dv-volver svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dv-barra .btn svg { fill: none; stroke: currentColor; stroke-width: 2; }
.dv-botones { display: flex; gap: 8px; flex-shrink: 0; }
.dv-tit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.dv-fondo { flex: 1; overflow: auto; padding: 20px 12px 40px; -webkit-overflow-scrolling: touch; }
.dv-desliza { max-width: 210mm; margin: 0 auto 8px; font-size: 12.5px; color: var(--mu); text-align: center; }
@media print { .dv-desliza { display: none !important; } }
.dv-tk-aviso { max-width: 80mm; margin: 0 auto 8px; font-size: 12px; color: var(--mu); text-align: center; line-height: 1.4; }
@media print { .dv-tk-aviso { display: none !important; } }
.dv-papel { background: #fff; color: #000; width: 100%; max-width: 210mm; min-height: 60vh; margin: 0 auto; padding: 14mm 12mm; box-shadow: 0 2px 12px rgba(17,24,39,.15); border-radius: 2px; font-size: 13px; line-height: 1.4; overflow-x: auto; }
.dv-papel .hoja + .hoja, .dv-papel .mc-hoja + .mc-hoja, .dv-papel .contrato + .contrato { border-top: 2px dashed #bbb; margin-top: 24px; padding-top: 24px; }
@media (max-width: 760px) {
  .dv-fondo { padding: 10px 6px 30px; }
  .dv-papel { padding: 16px 12px; font-size: 12px; }
  .dv-papel .ot-datos { grid-template-columns: 1fr !important; }
  .dv-volver span { display: none; }
}
@media print {
  body.con-visor > *:not(#docVisor) { display: none !important; }
  #docVisor { position: static; background: none; display: block; }
  .dv-barra { display: none !important; }
  .dv-fondo { padding: 0; overflow: visible; }
  .dv-papel { max-width: none; padding: 0; box-shadow: none; min-height: 0; font-size: 11px; overflow: visible; }
  .dv-papel .hoja + .hoja, .dv-papel .mc-hoja + .mc-hoja, .dv-papel .contrato + .contrato { border-top: 0; margin-top: 0; padding-top: 0; }
}
/* Comparar vehículos: una columna por vehículo y una barrita por valor */
#imprimir .cb-comp td, #imprimir .cb-comp th { padding: 7px 8px; }
#imprimir .cb-barra { height: 6px; background: #e5e7eb; border-radius: 3px; margin-top: 4px; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .cb-barra i { display: block; height: 100%; background: #2f6fed; border-radius: 3px; margin-left: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Cobro a terceros: la tabla de cargas y el resumen al costado (abajo en el celular) */
.cb-liq { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cb-liq-res { position: sticky; top: 76px; }
@media (max-width: 980px) { .cb-liq { grid-template-columns: 1fr; } .cb-liq-res { position: static; } }
/* Hoja apaisada (A4 horizontal) */
.dv-horizontal .dv-papel { max-width: 297mm; }
@media print { .dv-horizontal .dv-papel { font-size: 12px; } }
/* Ticket para impresora térmica de 80 mm (unos 72 mm imprimibles) */
.dv-ticket .dv-papel { max-width: 80mm; min-height: 0; padding: 5mm 4mm; font-size: 12px; line-height: 1.35; }
@media print { .dv-ticket .dv-papel { width: 72mm; max-width: 72mm; padding: 3mm 0 4mm; margin: 0 auto; font-size: 11.5px; } }
#imprimir .tk { font-family: Arial, Helvetica, sans-serif; color: #000; }
#imprimir .tk-emp { text-align: center; font-weight: 700; font-size: 1.15em; }
#imprimir .tk-tit { text-align: center; font-weight: 700; margin: 2px 0 6px; text-transform: uppercase; letter-spacing: .5px; }
#imprimir .tk-sep { border-top: 1px dashed #000; margin: 6px 0; }
#imprimir .tk-fila { display: flex; justify-content: space-between; gap: 8px; }
#imprimir .tk-fila > span:last-child { text-align: right; font-weight: 700; }
#imprimir .tk-var { font-weight: 700; font-size: 1.08em; margin-bottom: 2px; }
#imprimir .tk-tot { font-weight: 700; font-size: 1.15em; }
#imprimir .tk-firma { border-top: 1px solid #000; margin-top: 34px; text-align: center; padding-top: 2px; }
#imprimir table { width: 100%; border-collapse: collapse; margin: 6px 0; }
#imprimir th, #imprimir td { border-bottom: 1px solid #999; padding: 3px 4px; text-align: left; }
#imprimir .n { text-align: right; }
#imprimir .recibo { border: 1px solid #000; padding: 10px; margin-bottom: 10px; break-inside: avoid; }
#imprimir .rec-cab { display: flex; justify-content: space-between; border-bottom: 1px solid #000; padding-bottom: 4px; margin-bottom: 6px; }
#imprimir .rec-copia { font-weight: 700; letter-spacing: 1px; }
#imprimir .mc-hoja { break-after: page; }
#imprimir .ot { font-size: 11pt; }
#imprimir .ot-cab { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; }
#imprimir .ot-cab h2 { font-size: 16pt; margin: 2px 0 0; }
#imprimir .ot-num { text-align: right; font-weight: 700; font-size: 12pt; }
#imprimir .ot-num div { font-weight: 400; font-size: 10pt; }
#imprimir .ot-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-bottom: 12px; }
#imprimir .ot-datos div { display: flex; gap: 8px; border-bottom: 1px dotted #999; padding: 2px 0; }
#imprimir .ot-datos span { color: #444; min-width: 95px; }
#imprimir .ot table th { border-bottom: 1px solid #000; }
#imprimir .ot-cond { border: 1px solid #999; border-radius: 4px; padding: 6px 8px; margin: 0 0 10px; }
#imprimir .ot-cond > div { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 4px; }
#imprimir .ot-blanco { display: inline-block; width: 60px; border-bottom: 1px solid #000; }
#imprimir .ot-firmas { display: flex; gap: 30px; margin-top: 60px; text-align: center; font-size: 10pt; }
#imprimir .ot-firmas > div { flex: 1; }
#imprimir .ot-linea { border-top: 1px solid #000; margin-bottom: 4px; }
#imprimir .mc-hoja:last-child { break-after: auto; }
#imprimir .mc-hoja h2 { font-size: 17px; font-weight: 400; margin: 0 0 4px; }
#imprimir .mc-hoja h3 { font-size: 12px; margin: 10px 0 4px; }
#imprimir .mc-sub { font-size: 10px; color: #444; }
#imprimir .mc-tabla th { background: #374151; color: #fff; padding: 5px 4px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .mc-tabla tr.mc-roja td { background: #fde4e4; color: #c62828; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .mc-tabla td { padding: 4px; }
#imprimir .rec-pie { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10px; }
#imprimir .rec-firma { text-align: center; }
#imprimir .hoja { break-after: page; }
#imprimir .planilla h2, #imprimir .planilla h3 { margin: 0 0 6px; }
#imprimir .planilla td { height: 26px; }
/* Informes (productos comprados…) */
#imprimir .inf-cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 8px; }
#imprimir .inf-cab h2 { font-size: 16px; margin: 2px 0; }
#imprimir .inf-fecha { font-size: 10px; color: #444; white-space: nowrap; }
#imprimir .inf-res { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 8px; }
#imprimir .inf th { border-bottom: 1px solid #000; white-space: nowrap; }
#imprimir .inf td { border-bottom: 1px solid #ddd; }
#imprimir .inf tr.inf-g td { background: #eef1f6; font-weight: 700; border-bottom: 1px solid #999; padding-top: 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .inf tr.inf-st td { font-weight: 700; border-bottom: 1px solid #999; }
#imprimir .inf tr.inf-p td { background: #dbe3f0; font-weight: 800; font-size: 1.08em; border-top: 2px solid #555; border-bottom: 1px solid #555; padding-top: 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .inf tr.inf-p + tr.inf-g td { border-top: 0; }
#imprimir .inf tr.inf-g td { padding-left: 14px; }
#imprimir .inf tr.inf-pt td { font-weight: 800; border-top: 1px solid #555; border-bottom: 2px solid #555; }
#imprimir .inf td.nw { white-space: nowrap; }
#imprimir .inf tr.inf-tot td { font-weight: 800; border-top: 2px solid #000; border-bottom: 0; font-size: 1.05em; }
#imprimir .inf thead { display: table-header-group; }
#imprimir .inf tr { break-inside: avoid; }
#imprimir .inf-nota { font-size: 10px; color: #444; margin-top: 8px; }
#imprimir .inf table { font-size: inherit; }   /* la letra de la hoja, no la de las tablas de pantalla */
#imprimir .inf-ancho { font-size: 11px; }
.dv-papel:has(.inf-ancho), .dv-papel:has(style) { max-width: 297mm; }
/* En el celular la hoja del informe va más compacta; si no entra, se desliza de costado dentro de la hoja */
@media (max-width: 760px) {
  #imprimir { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* que el celular no agrande la letra de la hoja */
  #imprimir .inf { font-size: 11px; }
  #imprimir .inf th, #imprimir .inf td { padding: 3px 3px; }
  #imprimir .inf td.nw:not(.n) { white-space: normal; }
  #imprimir .inf th { white-space: normal; }
  .dv-papel { padding: 14px 8px; }
  #imprimir .inf-cab { flex-direction: column; gap: 4px; }
  #imprimir .inf-res { gap: 4px 14px; }
}
#imprimir .inf-res small { color: #555; font-weight: 400; }
/* Informe detallado de trabajos: cada trabajo en su bloque (cabecera + productos), sin cortarse al imprimir */
#imprimir .inf-det .inf-trab { margin: 12px 0 16px; break-inside: avoid; }
#imprimir .inf-det .inf-trab table { width: 100%; }
#imprimir .inf-det table.inf-trab-cab { margin-bottom: 4px; }
#imprimir .inf-det table.inf-trab-cab th { background: #eef1f6; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .inf-det table.inf-trab-cab td { font-weight: 700; }
#imprimir .inf-det .inf-trab tfoot td { font-weight: 800; border-top: 2px solid #000; border-bottom: 0; }
#imprimir .inf-det .inf-trab-grupo { background: #dbe3f0; font-weight: 800; font-size: 1.08em; padding: 6px 8px; margin-top: 14px; border-top: 2px solid #555; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .inf-det .inf-trab-st { font-weight: 800; text-align: right; border-bottom: 2px solid #555; padding: 4px 0 8px; }
#imprimir .inf-det .inf-trab-tot { font-weight: 800; font-size: 1.05em; border-top: 2px solid #000; padding-top: 6px; margin-top: 8px; text-align: right; }
@media (max-width: 760px) { #imprimir .inf-det .inf-trab { overflow-x: auto; } }
/* Libro de entregas: cada lote en su hoja al imprimir */
@media print { #imprimir .inf-lote + .inf-lote { break-before: page; } }
#imprimir .inf table.inf-fija tfoot td { font-weight: 800; border-top: 2px solid #000; border-bottom: 0; }
#imprimir .inf .inf-lote table.inf-fija th, #imprimir .inf .inf-lote table.inf-fija td { padding: 4px 4px; }
#imprimir .inf .inf-lote table.inf-fija th { white-space: normal; text-overflow: clip; overflow-wrap: normal; }
/* Tablas de armazón fijo (trazabilidad): las columnas de cada sección quedan alineadas entre sí */
#imprimir .inf table.inf-fija { table-layout: fixed; }
#imprimir .inf table.inf-fija th, #imprimir .inf table.inf-fija td { white-space: normal; overflow-wrap: break-word; vertical-align: top; padding: 4px 6px; }
#imprimir .inf table.inf-fija td.n, #imprimir .inf table.inf-fija td:first-child { white-space: nowrap; }
#imprimir .inf table.inf-fija th { white-space: normal; overflow-wrap: normal; }
#imprimir .inf-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #ddd; }
#imprimir .inf-datos > div { padding: 4px 6px; border-bottom: 1px solid #eee; min-width: 0; }
#imprimir .inf-datos span { display: block; font-size: .85em; color: #555; }
#imprimir .inf-datos b { overflow-wrap: anywhere; }
@media screen and (max-width: 760px) {
  #imprimir .inf table.inf-fija { min-width: 620px; }
  #imprimir .inf-datos { grid-template-columns: 1fr 1fr; }
}
#imprimir h3.inf-sec { font-size: 13px; margin: 16px 0 2px; padding-bottom: 2px; border-bottom: 1px solid #000; }
#imprimir .inf td small { color: #555; }
/* Listas desplegables con su nombre al lado (en vez de botones de filtro) */
.sel-in { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.sel-in > span { color: var(--mu); font-weight: 600; white-space: nowrap; }
.sel-in select { width: auto; min-width: 120px; }

/* ---------- Registro de SENAVE: buscador e items ---------- */
.sv-barra { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sv-barra .search { flex: 1 1 260px; }
.sv-tbl { max-height: 55vh; overflow: auto; border: 1px solid var(--bd); border-radius: 8px; }
.sv-tbl strong { font-weight: 700; }
.sv-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.sv-tabla th { position: sticky; top: 0; background: var(--g-l); text-align: left; padding: 9px 10px; font-size: 13px; }
.sv-tabla td { padding: 8px 10px; border-top: 1px solid var(--bd); vertical-align: top; }
.sv-tabla tr.click { cursor: pointer; }
.sv-tabla tr.click:hover td { background: var(--g-l); }
.sv-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--bd); padding: 10px 12px; font: inherit; color: inherit; cursor: pointer; }
.sv-item:first-child { border-top: 0; }
.sv-item:active { background: var(--g-l); }
.sv-bloque { grid-column: 1 / -1; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; }
.sv-bloque > h4 { margin: 0; padding: 10px 14px; background: var(--g-l); font-size: 15px; }
.sv-bloque > .form-grid { padding: 12px 14px; }
.sv-reg { display: flex; gap: 6px; }
.sv-reg input, .sv-reg select { flex: 1; min-width: 0; }
.tb-lista { display: flex; flex-direction: column; gap: 6px; }
.tb-fila { display: grid; grid-template-columns: minmax(120px, 1.2fr) auto minmax(120px, 1fr) minmax(120px, 1fr) auto; gap: 6px; align-items: center; }
.tb-caja { display: flex; align-items: center; gap: 3px; }
.tb-caja input { width: 58px; text-align: center; }
@media (max-width: 700px) { .tb-fila { grid-template-columns: 1fr auto; padding: 8px; border: 1px solid var(--bd); border-radius: 8px; } .tb-fila input[type=date] { grid-column: span 1; } }
/* Compras: a dónde va cada línea y carga de la factura electrónica */
.items-tbl tr.cp-dest td { border-top: 0; padding-top: 0; padding-bottom: 10px; }
.items-tbl tr:has(+ tr.cp-dest) td { border-bottom: 0; }
.cp-dest-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.cp-dest-f select { width: auto; max-width: 100%; min-width: 160px; height: 34px; font-size: 13px; }
.cp-sinitem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--g-l); }
.cp-sinitem > span { flex: 1 1 200px; }
.cp-xml { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border: 1px dashed var(--bd-azul, #c9d6ea); border-radius: 8px; }
@media (max-width: 700px) { .cp-dest-f select { flex: 1 1 100%; } }
.cp-iva { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--g-l); text-align: right; line-height: 1.7; }
.sv-nota { grid-column: 1 / -1; }
.sv-bloque input[readonly] { background: var(--g-l); color: var(--tx); cursor: default; }

/* ---------- Costo por lote ---------- */
.ct-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ct-grupo { margin-bottom: 14px; }
.ct-grupo:last-child { margin-bottom: 0; }
.ct-gtit { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.ct-gtit i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.ct-lin { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; padding: 3px 0; }
.ct-lin > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-bar { height: 8px; background: var(--g-l); border-radius: 4px; overflow: hidden; }
.ct-bar b { display: block; height: 100%; border-radius: 4px; }
.ct-sub td { background: var(--g-l); }
@media (max-width: 900px) { .ct-dos { grid-template-columns: 1fr; } }

/* ---------- RR.HH.: sectores y contratos ---------- */
.rh-sec-lista { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 0; }
.rh-sec { font-weight: 500; }
.ctr-avisos { margin: 0; padding-left: 18px; }
.ctr-avisos li { margin-bottom: 8px; }
#imprimir .contrato { font-family: Georgia, 'Times New Roman', serif; font-size: 11pt; line-height: 1.4; color: #000; break-after: page; }
#imprimir .contrato:last-child { break-after: auto; }
#imprimir .contrato h1 { font-size: 14pt; text-align: center; margin: 0 0 2px; letter-spacing: .5px; }
#imprimir .contrato h2 { font-size: 11pt; text-align: center; margin: 0 0 14px; font-weight: normal; }
#imprimir .contrato p { text-align: justify; margin: 0 0 9px; }
#imprimir .ctr-ej { text-align: right; font-size: 8.5pt; font-family: Arial, sans-serif; color: #444; margin-bottom: 6px; }
#imprimir .ctr-falta { border-bottom: 1px solid #000; padding: 0 30px; color: transparent; }
#imprimir .ctr-cierre { break-inside: avoid; }
#imprimir .ctr-firmas { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 40px; text-align: center; font-size: 10pt; break-inside: avoid; }
#imprimir .ctr-firmas > div { flex: 1; }
#imprimir .ctr-linea { border-top: 1px solid #000; margin-bottom: 4px; }
#imprimir .ctr-huella { flex: 0 0 90px !important; font-size: 8pt; }
#imprimir .ctr-huella div { width: 70px; height: 85px; border: 1px solid #000; margin: 0 auto 4px; }

.ctr-prot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 4px 0; }
.ctr-prot-i { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 8px; font-weight: 400; }
.ctr-prot-i input { margin-top: 3px; flex-shrink: 0; }
.ctr-prot-i span { display: flex; flex-direction: column; gap: 1px; }
.ctr-prot-i small { color: var(--mu, #777); font-size: 12px; line-height: 1.3; }
@media (max-width: 700px) { .ctr-prot { grid-template-columns: 1fr; } }

/* ---------- Resumen general (menú principal) ---------- */
.rg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.rg-tit { font-size: 30px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; margin: 0; }
.rg-sub { color: var(--mu); font-size: 16px; margin-top: 4px; }
.rg-acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rg-zafra, .rg-capa { width: auto; min-width: 150px; }
.rg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 12px; }
.rg-kpi { background: #fff; border: 1px solid var(--bd); border-radius: 8px; padding: 18px 16px 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 1px 2px rgba(17,24,39,.04); }
.rg-ic { width: 38px; height: 38px; flex-shrink: 0; color: var(--c); display: grid; place-items: center; }
.rg-ic svg { width: 32px; height: 32px; }
.rg-kt { font-size: 15px; color: var(--tx); font-weight: 600; }
.rg-kv { font-size: clamp(20px, 1.8vw, 30px); font-weight: 700; letter-spacing: -.5px; line-height: 1.15; margin: 6px 0 4px; white-space: nowrap; }
.rg-kpi > div { min-width: 0; }
.rg-ks { font-size: 13.5px; color: var(--mu); }
.rg-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.rg-chip { background: #fff; border: 1px solid var(--bd); border-radius: 999px; padding: 6px 14px; font-size: 13px; display: flex; gap: 6px; }
.rg-chip span { color: var(--mu); }
.rg-card { margin-bottom: 18px; overflow: hidden; }
.rg-card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; }
.rg-card-h h3 { margin: 0; font-size: 18px; font-weight: 700; }
.rg-mapbox { position: relative; margin: 0 14px 14px; border-radius: 8px; overflow: hidden; background: #E5E7EB; }
#dashMap { height: 440px; }
.rg-salir { display: none !important; position: absolute; top: 12px; right: 12px; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.rg-mapbox.rg-on .rg-salir { display: inline-flex !important; }
.rg-mapbox:fullscreen { margin: 0; border-radius: 0; background: #000; }
.rg-mapbox:fullscreen #dashMap, .rg-mapbox.rg-full #dashMap { height: 100%; }
.rg-mapbox.rg-full { position: fixed; inset: 0; z-index: 2000; margin: 0; border-radius: 0; }
body.rg-sin-scroll { overflow: hidden; }
@media (max-width: 700px) {
  .rg-tit { font-size: 24px; }
  .rg-sub { font-size: 14px; }
  .rg-head .rg-acc { width: 100%; flex-wrap: nowrap; }
  .rg-head .rg-acc .btn { flex: 1; justify-content: center; }
  /* Zafra y moneda, una al lado de la otra (la palabra «Moneda» sobra: la lista dice Dólares o Guaraníes) */
  .rg-head .rg-acc > .rg-zafra, .rg-head .rg-acc > .mon-sel { flex: 1 1 0; min-width: 0; }
  .rg-head .rg-acc > .mon-sel > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rg-head .rg-acc > .mon-sel select { width: 100%; min-width: 0; }
  .rg-kpis { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-kpi { padding: 14px 12px; gap: 10px; flex-direction: column; }
  .rg-ic { width: 32px; height: 32px; }
  .rg-ic svg { width: 28px; height: 28px; }
  .rg-kt { font-size: 13px; }
  .rg-kv { font-size: 22px; white-space: normal; }
  .rg-ks { font-size: 12px; }
  #dashMap { height: 320px; }
  .rg-mapbox { margin: 0 10px 10px; }
  .rg-card-h .rg-acc { width: 100%; }
  .rg-card-h .rg-acc > * { flex: 1; }
}

/* ---------- Inicio: accesos rápidos y primeros pasos ---------- */
.rg-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.rg-acceso { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; min-height: 64px; border: 1px solid var(--bd); border-radius: var(--radio); background: #fff; color: var(--tx); font: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.rg-acceso:hover { border-color: var(--g); box-shadow: 0 2px 10px rgba(29,78,216,.10); }
.rg-acceso svg { width: 22px; height: 22px; flex-shrink: 0; stroke: var(--g); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rg-acceso span { display: flex; flex-direction: column; min-width: 0; }
.rg-acceso b { font-weight: 600; font-size: 14.5px; }
.rg-acceso small { color: var(--mu); font-size: 12.5px; }
.rg-acceso.prim { background: var(--g); border-color: var(--g); color: #fff; }
.rg-acceso.prim svg { stroke: #fff; }
.rg-acceso.prim small { color: rgba(255,255,255,.8); }
.rg-acceso.prim:hover { background: var(--g-d); }
.pp { margin-bottom: 16px; }
.pp-lista { list-style: none; padding: 6px 0; }
.pp-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.pp-lista li + li { border-top: 1px solid var(--linea); }
.pp-n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--bd-in); color: var(--mu); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.pp-lista li.ok .pp-n { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok); }
.pp-lista li.sig .pp-n { background: var(--g); border-color: var(--g); color: #fff; }
.pp-lista li.ok .pp-t b { color: var(--mu); font-weight: 500; text-decoration: line-through; }
.pp-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pp-t b { font-weight: 600; }
.pp-t small { color: var(--mu); font-size: 12.5px; }
@media (max-width: 700px) {
  .rg-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rg-acceso { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
  .rg-acceso.prim { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 56px; }
  .rg-acceso small { display: none; }
  .rg-acceso.prim small { display: block; }
  .pp-lista li { padding: 10px 12px; flex-wrap: wrap; }
  .pp-lista li .btn { margin-left: 38px; }
}

/* ---------- Bienvenida ---------- */
.bv h4 { font-size: 18px; font-weight: 700; margin: 6px 0 10px; }
.bv p { margin: 0 0 10px; color: #374151; line-height: 1.55; }
.bv-lista { margin: 0 0 10px 18px; color: #374151; line-height: 1.7; }
.bv-puntos { display: flex; gap: 6px; }
.bv-puntos span { width: 22px; height: 4px; border-radius: 2px; background: var(--bd); }
.bv-puntos span.on { background: var(--g); }
.ayuda-auto { margin-top: -8px; }

/* ---------- Fecha escrita con el teclado (computadora) ---------- */
.fecha-wrap { position: relative; display: block; min-width: 0; }
.fecha-wrap .fecha-txt { width: 100%; padding-right: 38px; font-variant-numeric: tabular-nums; }
.fecha-wrap .fecha-txt.mal { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.fecha-cal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: var(--radio-b); background: transparent; color: var(--mu); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fecha-cal:hover { background: var(--th); color: var(--g); }
.fecha-cal:disabled { display: none; }
.fecha-cal svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.fecha-wrap .fecha-nativa { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.fecha-wrap.es-hora .fecha-txt { padding-right: 11px; text-align: center; }
.rh-tramo .fecha-wrap { width: 96px; flex: 0 0 auto; }

/* ---------- Importar desde Excel ---------- */
.imp-paso { margin-bottom: 16px; }
.imp-paso .card-h h3 { display: flex; align-items: center; gap: 10px; }
.imp-n { width: 24px; height: 24px; border-radius: 50%; background: var(--oscuro); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex-shrink: 0; }
.imp-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.imp-tipo { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border: 1px solid var(--bd); border-radius: var(--radio); background: #fff; font: inherit; color: var(--tx); cursor: pointer; }
.imp-tipo:hover { border-color: var(--g); }
.imp-tipo.sel { border-color: var(--g); box-shadow: 0 0 0 2px var(--g) inset; background: var(--g-l); }
.imp-tipo svg { width: 24px; height: 24px; flex-shrink: 0; stroke: var(--g); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.imp-tipo span { display: flex; flex-direction: column; }
.imp-tipo b { font-weight: 600; }
.imp-tipo small { color: var(--mu); font-size: 12.5px; }
.imp-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.imp-acc label.btn { cursor: pointer; }
.imp-cols { margin-top: 14px; }
.imp-cols summary { cursor: pointer; color: var(--g); font-weight: 600; font-size: 13.5px; }
.imp-cols table { margin-top: 8px; }
.imp-cols td { padding: 6px 12px 6px 0; vertical-align: top; }
.imp-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.imp-resumen > div { border: 1px solid var(--bd); border-radius: var(--radio); padding: 10px 14px; display: flex; flex-direction: column; }
.imp-resumen b { font-size: 22px; font-weight: 700; }
.imp-resumen span { color: var(--mu); font-size: 13px; }
.imp-resumen .mal b { color: var(--bad); }
.imp-err { color: var(--bad); }
.imp-listo h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.imp-listo h3 svg { width: 22px; height: 22px; stroke: var(--ok); fill: none; stroke-width: 2.4; }
@media (max-width: 700px) { .imp-resumen b { font-size: 18px; } .imp-acc .btn { flex: 1; justify-content: center; } }

/* ---------- Mapa: logo de Google (obligatorio cuando se ve su imagen) ---------- */
.logo-google { font: 600 12px/1 Arial, sans-serif; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7); padding: 0 0 2px 2px; letter-spacing: .2px; user-select: none; }

/* ---------- NDVI ---------- */
.ndvi { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.ndvi-mapa { position: relative; }
.ndvi-mapa [data-mapa] { height: 440px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--bd); }
.ndvi-leyenda { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--mu); flex-wrap: wrap; }
.ndvi-leyenda i { flex: 1 1 120px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #A50026, #D73027, #F46D43, #FEE08B, #66BD63, #006837); min-width: 100px; }
.ndvi-leyenda em { font-style: normal; margin-left: 8px; }
.ndvi-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ndvi-barra select { width: auto; }
.ndvi-op { display: flex; align-items: center; gap: 6px; }
.ndvi-op input { width: 110px; min-height: 0; padding: 0; accent-color: var(--g); }
.ndvi-graf svg { width: 100%; height: auto; display: block; }
.ndvi-grilla { stroke: var(--linea); stroke-width: 1; }
.ndvi-eje { font-size: 10.5px; fill: var(--mu); }
.ndvi-linea { fill: none; stroke: #9CA3AF; stroke-width: 1.5; }
.ndvi-punto { cursor: pointer; }
.ndvi-det { margin-top: 10px; }
.ndvi-dia { display: flex; align-items: center; gap: 10px; }
.ndvi-dia > div { flex: 1; }
@media (max-width: 900px) { .ndvi { grid-template-columns: 1fr; } .ndvi-mapa [data-mapa] { height: 320px; } }
/* NDVI: ventana ancha y mapa alto */
.modal.xl { max-width: min(1400px, 96vw); }
.modal.xl .ndvi-mapa [data-mapa] { height: max(440px, calc(100dvh - 300px)); }
.modal.xl .ndvi { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
@media (max-width: 900px) { .modal.xl .ndvi-mapa [data-mapa] { height: 340px; } }
/* NDVI en el mapa del Inicio */
.btn.activo { background: var(--g-l); border-color: var(--g); color: var(--g-d); }
.ndvi-leyenda-mapa { background: rgba(255,255,255,.94); border-radius: var(--radio-b); padding: 8px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25); font-size: 12px; color: var(--tx); min-width: 220px; }
.ndvi-leyenda-mapa div { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.ndvi-leyenda-mapa i { flex: 1; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #A50026, #D73027, #F46D43, #FEE08B, #66BD63, #006837); }
.ndvi-leyenda-mapa small { color: var(--mu); display: block; max-width: 260px; }
/* Inicio: lotes pintados por dato */
.rg-leyenda { background: rgba(255,255,255,.95); border-radius: var(--radio-b); padding: 8px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25); font-size: 12px; color: var(--tx); max-width: 260px; }
.rg-leyenda b { display: block; margin-bottom: 4px; }
.rg-leyenda div { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.rg-leyenda i { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.lote-label small { font-weight: 600; font-size: .85em; }
@media (max-width: 700px) { .rg-card-h .rg-acc select[data-pintar] { flex-basis: 100%; } }
.rg-leyenda { cursor: pointer; }
.rg-leyenda.plegada div { display: none; }
.rg-leyenda.plegada .rg-ley-fl { display: inline-block; transform: rotate(-90deg); }
.rg-ley-fl { color: var(--mu); font-size: 11px; }
/* NDVI: fecha de la imagen sobre el mapa */
.ndvi-rotulo { background: rgba(17,24,39,.85); color: #fff; border-radius: var(--radio-b); padding: 6px 10px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.ndvi-fecha { display: flex !important; align-items: center; gap: 8px; margin: 0 0 6px !important; }
.ndvi-fecha span { flex: 1; font-size: 12.5px; }
.ndvi-fecha small { color: var(--mu); }
.ndvi-fecha button { width: 28px; height: 28px; border: 1px solid var(--bd-in); border-radius: var(--radio-b); background: #fff; cursor: pointer; font-size: 11px; }
.ndvi-fecha button:disabled { opacity: .35; cursor: default; }

/* ---------- Plan y presupuesto de la zafra ---------- */
.plan-vistas { max-width: 520px; }
.plan-vistas button.on { background: var(--g); color: #fff; }
.plan-lotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--bd); border-radius: var(--radio); }
.plan-pasa { color: var(--warn); background: var(--warn-bg); border-radius: 4px; padding: 1px 6px; font-weight: 600; }

.cond-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.ll-carga { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); align-items: end; }
.ll-graf { width: 100%; height: auto; max-height: 260px; }
.ll-val { font-size: 11px; fill: var(--navy); font-weight: 600; }
.rg-chip-btn { font: inherit; cursor: pointer; }
.rg-chip-btn:hover { border-color: var(--g); }

/* ---------- Estaciones meteorológicas ---------- */
.es-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.es-card .card-b { display: flex; flex-direction: column; gap: 8px; }
.es-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.es-nom { font-weight: 800; color: var(--navy); }
.es-temp { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--navy); margin-top: 4px; }
.es-temp small { font-size: 1.1rem; font-weight: 700; margin-left: 2px; color: var(--mu); }
.es-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.es-datos div { display: flex; flex-direction: column; min-width: 0; }
.es-datos span { font-size: .75rem; color: var(--mu); }
.es-datos b { font-size: 1rem; }
.es-datos em { font-style: normal; font-size: .75rem; color: var(--mu); }
.es-flecha { display: inline-block; font-weight: 900; color: var(--g); }
.es-cfg { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--bd); border-radius: 8px; margin-bottom: 6px; background: var(--th); }
.es-cfg span { min-width: 120px; color: var(--mu); font-size: .85rem; }
.es-cfg b { flex: 1; word-break: break-all; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.es-pasos { margin: 6px 0 8px 18px; padding: 0; line-height: 1.6; }
.es-ley { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
@media (max-width: 640px) {
  .es-grid { grid-template-columns: 1fr; }
  .es-cfg { flex-wrap: wrap; }
  .es-cfg span { min-width: 0; width: 100%; }
}
.es-aviso { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: .9rem; line-height: 1.5; }

/* ---------- Clima ahora: ¿se puede fumigar? ---------- */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.cl-card .card-b { display: flex; flex-direction: column; gap: 12px; }
.cl-sem { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 18px; font-weight: 800; }
.cl-ic { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; flex-shrink: 0; }
.cl-ok { background: #DCFCE7; color: #166534; } .cl-ok .cl-ic { background: #16A34A; }
.cl-prec { background: var(--warn-bg); color: var(--warn); } .cl-prec .cl-ic { background: #D97706; }
.cl-no { background: #E2E8F0; color: #1E293B; } .cl-no .cl-ic { background: #334155; }
.cl-sin { background: var(--th); color: var(--mu); font-size: 15px; font-weight: 700; } .cl-sin .cl-ic { background: #94A3B8; }
.cl-factores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cl-f { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 9px; background: var(--th); border-left: 4px solid #16A34A; min-width: 0; }
.cl-f1 { border-left-color: #D97706; background: #FFFBEB; }
.cl-f2 { border-left-color: #334155; background: #F1F5F9; }
.cl-f span { font-size: .75rem; color: var(--mu); }
.cl-f b { font-size: 1.05rem; }
.cl-f em { font-style: normal; font-size: .75rem; color: var(--mu); line-height: 1.3; }
.cl-ll { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cl-ll div { display: flex; flex-direction: column; }
.cl-ll span { font-size: .8rem; color: var(--mu); }
.cl-ll b { font-size: 1.25rem; color: var(--navy); }
.cl-guia summary { cursor: pointer; padding: 14px 16px; font-weight: 700; }
@media (max-width: 640px) { .cl-ll { grid-template-columns: 1fr 1fr; } }

/* Aviso de versión nueva */
.version-nueva { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 12px;
  background: var(--card); color: var(--tx); border: 1px solid var(--bd); border-left: 4px solid var(--pri, #2563EB); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 10px 10px 10px 16px; max-width: calc(100vw - 32px); font-weight: 600; }
@media (max-width: 700px) { .version-nueva { bottom: 12px; width: calc(100vw - 32px); } .version-nueva span { flex: 1; } }

/* ---------- Informe: resultado de la zafra (la cuenta grande, los datos y las barras) ---------- */
#imprimir .rz-cuenta { display: flex; align-items: stretch; gap: 10px; margin: 6px 0 4px; }
#imprimir .rz-caja { flex: 1; border: 1px solid #ccc; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
#imprimir .rz-caja small { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .03em; }
#imprimir .rz-caja b { font-size: 21px; }
#imprimir .rz-caja span { font-size: 12px; color: #444; }
#imprimir .rz-op { align-self: center; font-size: 26px; font-weight: 300; color: #777; }
#imprimir .rz-gana { border: 2px solid #2e7d32; background: #edf7ee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .rz-gana b { color: #1b5e20; }
#imprimir .rz-pierde { border: 2px solid #B45309; background: #FEF3C7; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .rz-pierde b { color: #92400E; }
#imprimir .rz-frase { font-size: 13.5px; margin: 6px 0 10px; }
#imprimir .rz-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 6px; }
#imprimir .rz-dato { border: 1px solid #ddd; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
#imprimir .rz-dato small { font-size: 11px; color: #555; }
#imprimir .rz-dato b { font-size: 16px; }
#imprimir .rz-dato span { font-size: 11px; color: #555; }
#imprimir .rz-barras { display: flex; flex-direction: column; gap: 4px; }
#imprimir .rz-barra { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr 110px 100px 52px; gap: 10px; align-items: center; font-size: 12.5px; }
#imprimir .rz-barra.rz-grupo { font-weight: 700; margin-top: 4px; }
#imprimir .rz-barra.rz-linea { font-size: 11.5px; color: #333; }
#imprimir .rz-barra.rz-linea .rz-bt { padding-left: 14px; }
#imprimir .rz-bv { height: 12px; background: #f0f0f0; border-radius: 6px; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .rz-bv i { display: block; height: 100%; border-radius: 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .rz-bn, #imprimir .rz-bh, #imprimir .rz-bp { text-align: right; white-space: nowrap; }
#imprimir .rz-bh { color: #555; }
#imprimir .rz-pos { color: #1b5e20; }
#imprimir .rz-neg { color: #92400E; }
#imprimir .rz-mini { display: inline-block; width: 90px; height: 9px; background: #f0f0f0; border-radius: 5px; overflow: hidden; vertical-align: middle; }
#imprimir .rz-mini i { display: block; height: 100%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#imprimir .rz-pos-bg { background: #43a047; }
#imprimir .rz-neg-bg { background: #d97706; }
@media (max-width: 700px) {
  #imprimir .rz-cuenta { flex-direction: column; }
  #imprimir .rz-op { align-self: center; font-size: 20px; line-height: 1; }
  #imprimir .rz-datos { grid-template-columns: repeat(2, 1fr); }
  #imprimir .rz-barra { grid-template-columns: 1fr 1fr auto; }
  #imprimir .rz-bh, #imprimir .rz-bp { display: none; }
}

/* ---------- Calendario sanitario ---------- */
.gc-tit { font-size: 15px; margin: 18px 0 8px; color: var(--mu); text-transform: uppercase; letter-spacing: .04em; }
.gc-card { margin-bottom: 12px; }
.gc-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.gc-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.gc-avance { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.gc-barra { flex: 1 1 240px; height: 12px; background: var(--linea, #f0f0f0); border-radius: 6px; overflow: hidden; }
.gc-barra i { display: block; height: 100%; background: #43a047; border-radius: 6px; }
.gc-det { margin-top: 10px; }
.gc-det summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.gc-det table { margin-top: 6px; width: 100%; }
@media (max-width: 700px) { .gc-acc { width: 100%; } .gc-acc .btn { flex: 1 1 auto; justify-content: center; } }

/* ---------- Pesajes de hacienda ---------- */
.pz-caja { margin-top: 12px; padding: 12px; border: 1px solid var(--bd); border-radius: var(--radio); background: var(--th); }
.pz-entrada { display: flex; gap: 8px; }
.pz-entrada input { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; padding: 10px 12px; }
.pz-entrada .btn { flex: none; }
.pz-lista { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.pz-i { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; background: var(--card); border: 1px solid var(--bd-in);
  border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pz-i small { color: var(--mu); font-weight: 400; }
.pz-i button { border: 0; background: none; color: var(--mu); cursor: pointer; padding: 2px 4px; font-size: 12px; line-height: 1; }
.pz-i button:hover { color: var(--tx); }
.pz-res { margin-top: 12px; }
.pz-res:empty { display: none; }
.pz-sube { color: #166534; font-weight: 700; white-space: nowrap; }
.pz-baja { color: var(--warn); font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) { .pz-entrada .btn span, .pz-entrada .btn { font-size: 14px; } }

/* ---------- Reproducción: los pasos de cada temporada ---------- */
.rp-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.rp-paso { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px; border: 1px solid var(--bd);
  border-radius: var(--radio); background: var(--card); color: var(--tx); font: inherit; cursor: pointer; min-width: 0; }
.rp-paso:disabled { cursor: default; }
.rp-paso:not(:disabled):hover { border-color: var(--g); }
.rp-paso.hecho { background: var(--ok-bg); border-color: transparent; }
.rp-paso.actual { border: 2px dashed var(--g); }
.rp-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--th); color: var(--mu); }
.rp-paso.hecho .rp-n { background: var(--g); color: #fff; }
.rp-t { font-weight: 700; font-size: 13px; }
.rp-v { font-size: 13px; line-height: 1.3; }
.rp-v b { font-size: 18px; }
.rp-v small { display: block; color: var(--mu); }
@media (max-width: 700px) { .rp-pasos { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Ficha por animal ---------- */
.an-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.an-datos > div > div { font-weight: 600; }
@media (max-width: 700px) { .an-datos { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Rotación de potreros ---------- */
.pill.listo { background: #DCFCE7; color: #166534; }
.rot-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rot-mapa { position: sticky; top: 12px; margin: 0; }
#rotMap { height: 520px; }
.rot-ley { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--mu); }
.rot-ley span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rot-ley i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.rot-lista .gc-tit:first-child { margin-top: 0; }
.rot-item { background: var(--card); border: 1px solid var(--bd); border-left: 4px solid var(--rot-c, #9aa0a6); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.rot-item.rot-excedido { --rot-c: #c62828; } .rot-item.rot-ocupado { --rot-c: #1e6fb0; } .rot-item.rot-listo { --rot-c: #2e9d3a; }
.rot-item.rot-descanso { --rot-c: #d9a400; } .rot-item.rot-sin_uso { --rot-c: #9aa0a6; }
.rot-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.rot-cabezas { text-align: right; white-space: nowrap; font-size: 15px; }
.rot-barra { height: 8px; background: var(--linea, #f0f0f0); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.rot-barra i { display: block; height: 100%; border-radius: 4px; }
.rot-acc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rot-que { background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.rot-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rot-prom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rot-prom > div { background: var(--bg); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.rot-prom b { font-size: 17px; }
.rot-dest { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .rot-wrap { grid-template-columns: 1fr; }
  .rot-mapa { position: static; order: 2; }   /* en el celular primero la lista, que es donde se actúa */
  #rotMap { height: 320px; }
}
@media (max-width: 700px) {
  .rot-acc .btn { flex: 1 1 auto; justify-content: center; }
  .rot-prom { grid-template-columns: 1fr; }
}

/* Pedidos de semilla: cada renglón es una tarjeta (en el celular se lee mejor que una tabla ancha) */
.ped-item { border: 1px solid var(--bd-azul); border-radius: 12px; padding: 12px 14px 10px; margin-bottom: 10px; background: #FBFCFF; }
.ped-item .form-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; }
.ped-pie { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.ped-pie [data-libre] { flex: 1; min-width: 200px; }
.ped-sub { font-weight: 700; color: var(--navy); white-space: nowrap; }
.ped-total { text-align: right; font-size: 17px; margin-top: 12px; color: var(--navy); }
/* Situación de la semillería: los números clave y las alertas */
#imprimir .inf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 6px; }
#imprimir .inf-kpi { border: 1px solid #bbb; border-radius: 4px; padding: 6px 8px; break-inside: avoid; }
#imprimir .inf-kpi span { display: block; font-size: 10px; color: #444; text-transform: uppercase; letter-spacing: .3px; }
#imprimir .inf-kpi b { display: block; font-size: 15px; margin-top: 2px; }
#imprimir .inf-kpi small { display: block; font-size: 10px; color: #555; margin-top: 1px; }
#imprimir .inf-kpi.mal b { color: #b91c1c; }
#imprimir .inf-alerta { border-left: 3px solid #b45309; padding: 2px 0 2px 8px; margin: 6px 0; break-inside: avoid; }
#imprimir .inf-alerta b { font-size: 12px; }
#imprimir .inf-alerta ul { margin: 2px 0 0 16px; padding: 0; font-size: 11px; }
#imprimir .inf-ok { font-size: 12px; color: #166534; margin: 4px 0; }
#imprimir td.mal { color: #b91c1c; font-weight: 700; }
@media (max-width: 700px) { #imprimir .inf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Roles y permisos: una fila por pantalla con sus acciones */
.rl-mod { border: 1px solid var(--bd-azul); border-radius: 12px; padding: 4px 14px 10px; margin-top: 14px; }
.rl-mod-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bd-azul); }
.rl-mod-h b { font-size: 15px; color: var(--navy); }
.rl-grupo { font-size: 12px; font-weight: 700; color: var(--side-mu); text-transform: uppercase; letter-spacing: .4px; margin: 10px 0 2px; }
.rl-fila { display: flex; align-items: center; gap: 8px 16px; padding: 6px 0; border-bottom: 1px solid #EEF2F9; flex-wrap: wrap; }
.rl-pant { flex: 1 1 220px; min-width: 0; }
.rl-acc { display: flex; gap: 4px 14px; flex-wrap: wrap; }
.rl-acc .check { font-size: 13.5px; }
.rl-mod-h span { display: flex; gap: 6px; flex-shrink: 0; }
summary.rl-mod-h { cursor: pointer; list-style: none; }
summary.rl-mod-h::-webkit-details-marker { display: none; }
summary.rl-mod-h b::before { content: '▸'; display: inline-block; width: 16px; color: var(--side-mu); transition: transform .15s; }
details[open] > summary.rl-mod-h b::before { transform: rotate(90deg); }
details.rl-mod:not([open]) > summary.rl-mod-h { border-bottom: 0; }

/* Registro de cambios: qué cambió (antes y después) */
.seg { display: inline-flex; border: 1px solid var(--bd-azul); border-radius: 10px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 8px 14px; font: inherit; font-size: 14px; color: var(--tx); cursor: pointer; }
.seg button.on { background: var(--navy); color: #fff; font-weight: 600; }
.hist { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 6px; }
.hist-e { border: 1px solid var(--bd-azul); border-left: 4px solid var(--side-mu); border-radius: 10px; padding: 10px 12px; }
.hist-e.hist-creo { border-left-color: var(--ok); }
.hist-e.hist-borro { border-left-color: var(--bad); }
.hist-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.hist-acc { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--side-mu); }
.hist-t { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
.hist-t th, .hist-t td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #EEF2F9; vertical-align: top; overflow-wrap: break-word; }
.hist-t tbody th { font-weight: 500; color: var(--side-mu); width: 34%; }
.hist-t thead th { font-size: 12px; color: var(--side-mu); font-weight: 600; }
.hist-antes { color: var(--bad); }
.hist-e.hist-borro .hist-antes, .hist-r .hist-antes:only-of-type { color: inherit; }
.hist-desp { color: var(--ok); font-weight: 600; }
.hist-ref td { color: var(--side-mu); }
.hist-r { margin: 8px 0 0 10px; padding-left: 10px; border-left: 2px solid var(--bd-azul); }
/* Recepción de granos: los campos en grupos (origen, ticket, pesos, calidad) */
.ac-grupo { border-top: 1px solid var(--bd); padding-top: 12px; margin-top: 14px; }
.ac-grupo:first-of-type { margin-top: 4px; }
.ac-grupo > h4 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mu); }
@media (max-width: 700px) { .ac-campo-fg { grid-column: 1 / -1; } }
.ac-arriba > .fg { grid-column: span 2; }
@media (max-width: 700px) { .ac-arriba > .fg { grid-column: 1 / -1; } }

/* Lista con buscador (UI.selectBuscable): se escribe y aparecen las opciones que coinciden */
.combo { position: relative; flex: 1; min-width: 0; }
.combo .combo-in { width: 100%; }
.combo-lista { position: fixed; z-index: 10000; max-height: 280px; overflow-y: auto; background: var(--card); color: var(--tx); border: 1px solid var(--bd-in);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px 0; }
.combo-op { padding: 8px 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-op:hover, .combo-op.activa { background: var(--g-l); }
.combo-gr { color: var(--mu); font-size: .85em; margin-left: 6px; }
.combo-mas { padding: 8px 12px; color: var(--mu); font-size: .9em; }
@media (max-width: 760px) { .combo-op { padding: 12px 14px; white-space: normal; } }

/* Lista desplegable para marcar varios (UI.multiHTML): p. ej. los lotes de un informe */
.multi { position: relative; }
.multi > summary { list-style: none; cursor: pointer; padding: 8px 34px 8px 11px; min-height: 38px; border: 1px solid var(--bd-in); border-radius: var(--radio-b);
  background: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.multi > summary::-webkit-details-marker { display: none; }
.multi > summary::after { content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--mu); }
.multi[open] > summary { border-color: var(--g); }
.multi-p { border: 1px solid var(--bd-in); border-top: 0; border-radius: 0 0 var(--radio-b) var(--radio-b); padding: 8px; background: #fff; }
.multi-acc { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.multi-l { max-height: 240px; overflow-y: auto; display: grid; gap: 2px; }
.multi-l .check { padding: 6px 4px; }
.multi-l .check[hidden] { display: none; }
@media (max-width: 760px) { .multi-l .check { padding: 10px 4px; } }

/* Ventana del trabajo. Los datos de aplicación (aplicador, ingeniero…) siguen la grilla del trabajo */
.tr-sub { display: contents; }
.tr-pie { display: flex; gap: 10px 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.tr-pie .tr-obs { flex: 1 1 260px; margin: 0; }
.tr-pie .tr-total { font-weight: 800; text-align: right; margin-left: auto; padding-bottom: 8px; }
.tr-ayuda { margin-top: 6px; }
.tr-ayuda summary { cursor: pointer; width: fit-content; }
@media (min-width: 1100px) {
  /* En la PC: más ancha, los campos en filas parejas (6 y 8 por fila) y solo la lista de productos se desplaza:
     así con muchos productos no se esconden el lote, las fechas ni el total */
  .modal.lg.tr-modal { max-width: min(1440px, 96vw); height: calc(100dvh - 48px); }
  /* Elaboración de lotes: más ancha y 4 campos por fila (menos alta) */
  .modal.lg.sem-elab { max-width: min(1240px, 94vw); }
  .sem-elab .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sem-elab .fg:has(#f_siloOrigenId) { grid-column: span 2; }   /* el silo con su variedad y kilos, entero */
  .tr-modal .modal-b { display: flex; flex-direction: column; }
  .tr-modal .modal-b > * { flex: 0 0 auto; }
  .tr-modal .modal-b > .tr-items { flex: 1 1 auto; min-height: 150px; overflow: auto; }
  .tr-modal .tr-h-prod { display: none; }   /* la tabla ya dice qué es */
  .tr-modal [data-cond] { margin-top: 10px !important; }
  .tr-modal .tr-items thead th { position: sticky; top: 0; z-index: 1; background: var(--card); box-shadow: 0 1px 0 var(--bd); }
  .tr-modal .tr-g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
  .tr-modal .tr-g8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
  .tr-modal .tr-g6 .fg > label, .tr-modal .tr-g8 .fg > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Principio activo: columna propia en el formulario del trabajo; debajo del producto en la orden de trabajo */
.tr-pa { line-height: 1.3; color: var(--mu); }
.items-tbl th.tr-c-pa { min-width: 150px; }
@media (min-width: 701px) {
  .items-tbl td.tr-c-pa { padding-top: 13px; max-width: 260px; }
  /* Todas las celdas arriba: el aviso de stock debajo del producto no corre las demás */
  .tr-modal .items-tbl td { vertical-align: top; }
  .tr-modal .items-tbl td:not(:has(input)) { padding-top: 15px; }   /* subtotal y borrar, a la altura de las casillas */
  .tr-modal .items-tbl td:not(:has(input)) .icon-btn { margin-top: -6px; }
}
@media (max-width: 700px) { table.items-tbl.cards-m td.tr-pa-vacio { display: none; } }
.ot-pa { font-size: .85em; color: #555; margin-top: 2px; }

/* Listado de trabajos: filtros arriba (listas para marcar varios) y la tabla a todo el ancho */
.trab.trab-arriba { display: block; }
.trab-filtros { justify-content: flex-start !important; align-items: flex-end !important; }
.trab-filtros .tf { display: flex; flex-direction: column; gap: 4px; min-width: 190px; flex: 0 1 220px; font-size: 14px; }
.trab-filtros .tf > span { color: var(--mu); font-weight: 600; font-size: 13px; }
.trab-filtros .tf-reset { margin-left: auto; }
.multi-flot .multi-p { position: absolute; z-index: 60; left: 0; min-width: 100%; width: max-content; max-width: 340px;
  border-top: 1px solid var(--bd-in); border-radius: var(--radio-b); box-shadow: 0 8px 24px rgba(0,0,0,.16); margin-top: 2px; }
@media (max-width: 700px) {
  .trab-filtros .tf { flex: 1 1 100%; }
  .trab-filtros .tf-reset { margin-left: 0; }
  .multi-flot .multi-p { max-width: calc(100vw - 40px); }
}

/* Elaboración de lotes: en el celular el silo (con su variedad y kilos) ocupa toda la fila */
@media (max-width: 1099px) { .sem-elab .fg:has(#f_siloOrigenId) { grid-column: 1 / -1; } }

/* Marca CampoSYNC */
.marca-img { width: 30px; height: 30px; flex-shrink: 0; }
.logo b { color: #2E8B3A; font-weight: 700; }
.logo span { font-style: italic; font-weight: 700; color: #1F2A30; }
.side-marca img { height: 40px; max-width: 212px; width: auto; display: block; }
.login-bg { background: radial-gradient(circle at 30% 20%, #1E5A2E, #10261A 55%, #0B1510); }
.login-marca { justify-content: center; margin-bottom: 6px !important; }
.login-marca img { width: 230px; height: auto; }
.login-sub { text-align: center; }
.inf-marca { height: 22px; width: auto; display: block; margin: 0 0 4px auto; }

/* Entrega de semilla (la usa el depósito): cada lote es una tarjeta con sus campos alineados y lo que hay debajo */
.modal.lg.sv-modal { max-width: min(1240px, 96vw); }
.sv-lotes { display: grid; gap: 10px; }
.sv-lote { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; padding: 12px; border: 1px solid var(--bd); border-radius: 12px; background: var(--th); }
.sv-n { grid-row: span 3; width: 28px; height: 28px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 700; display: grid; place-items: center; margin-top: 24px; }
.sv-campos { display: grid; grid-template-columns: minmax(240px, 2.4fr) minmax(150px, 1.2fr) 130px 150px 40px; gap: 10px; align-items: end; }
.sv-campos .fg { margin: 0; min-width: 0; }
.sv-campos .sv-ped { grid-column: 1 / -1; }
.sv-c-cant input { font-size: 18px; font-weight: 700; text-align: right; }
.sv-c-etq input { text-align: right; }
.sv-sin-etq { padding: 10px 0; }
.sv-quitar { margin-bottom: 4px; }
.sv-info { margin-top: 8px; line-height: 1.5; }
.sv-aviso { margin-top: 6px; color: var(--bad); font-weight: 600; font-size: 13px; }
.sv-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.sv-total { margin-left: auto; font-size: 15px; }
@media (max-width: 760px) {
  .sv-lote { grid-template-columns: 1fr; padding: 10px; }
  .sv-n { grid-row: auto; margin: 0 0 6px; }
  .sv-campos { grid-template-columns: 1fr 1fr; }
  .sv-campos .sv-c-lote, .sv-campos .sv-ped { grid-column: 1 / -1; }
  .sv-campos .sv-c-trat { grid-column: 1 / -1; }
  .sv-quitar { position: absolute; top: 6px; right: 6px; margin: 0; }
  .sv-total { margin-left: 0; width: 100%; }
}
/* Receta de tratamiento: productos en tarjetas (como la entrega) y el costo abajo */
.sv-campos.rc-campos { grid-template-columns: minmax(240px, 2.6fr) 150px 170px 140px 40px; }
.rc-sub { padding: 9px 0; font-weight: 700; text-align: right; }
.rc-costo { margin-top: 12px; }
.rc-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rc-cifras > div { border: 1px solid var(--bd); border-radius: 10px; padding: 10px 12px; background: var(--card); display: flex; flex-direction: column; gap: 4px; }
.rc-cifras span { font-size: 12.5px; color: var(--mu); }
.rc-cifras b { font-size: 17px; }
.rc-cifras input { width: 64px; height: 26px; padding: 2px 6px; font-size: 12.5px; display: inline-block; }
@media (max-width: 760px) {
  .sv-campos.rc-campos { grid-template-columns: 1fr 1fr; }
  .sv-campos.rc-campos > .fg:first-child { grid-column: 1 / -1; }
  .rc-cifras { grid-template-columns: 1fr 1fr; }
  .rc-sub { text-align: left; }
}
.ot-resumen { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--th); border: 1px solid var(--bd); line-height: 1.6; }
.ot-resumen:empty { display: none; }
/* Compartir: elegir qué mandar (imagen o PDF) */
.comp-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comp-op { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px solid var(--bd); border-radius: 12px;
  background: var(--card); color: var(--tx); text-align: left; cursor: pointer; font: inherit; }
.comp-op:hover, .comp-op:focus-visible { border-color: var(--g); background: var(--th); }
.comp-op svg { width: 26px; height: 26px; stroke: var(--g); fill: none; stroke-width: 1.8; }
.comp-op b { font-size: 16px; }
.comp-op span { font-size: 13px; color: var(--mu); }
@media (max-width: 560px) { .comp-ops { grid-template-columns: 1fr; } }

/* ---------- Celular: barra de abajo (Inicio · Cargar · Análisis · Más, o las pantallas del rol) ---------- */
.barra-movil { display: none; }
@media (max-width: 900px) {
  :root { --barra: calc(66px + env(safe-area-inset-bottom)); }
  .barra-movil { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: var(--barra); padding: 0 4px env(safe-area-inset-bottom); box-sizing: border-box; background: #fff; border-top: 1px solid var(--bd);
    box-shadow: 0 -2px 12px rgba(11,27,75,.06); }
  .barra-movil[hidden], body.teclado .barra-movil, body.side-open .barra-movil { display: none; }
  .bm-tab { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; color: #4B5563; font-size: 12px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
  .bm-ic { width: 58px; height: 30px; border-radius: 15px; display: grid; place-items: center; transition: background .15s; }
  .bm-ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bm-tx { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .bm-tab.activa { color: var(--g); font-weight: 700; }
  .bm-tab.activa .bm-ic { background: var(--g-l); }
  .bm-tab:focus-visible .bm-ic { outline: 2px solid var(--g); outline-offset: 1px; }
  /* Con la barra: el menú de arriba (☰) sobra, «Más» lo abre; el contenido no queda tapado */
  body.con-barra .menu-btn { display: none; }
  body.con-barra .content { padding-bottom: calc(var(--barra) + 28px); }
  body.con-barra:not(.teclado) .off-chip { bottom: calc(var(--barra) + 10px); }
  body.con-barra:not(.teclado) .toast-wrap, body.con-barra:not(.teclado) .version-nueva { bottom: calc(var(--barra) + 12px); }
  body.con-barra:not(.teclado) .bandeja { bottom: calc(var(--barra) + 10px); }
  #docVisor ~ .barra-movil { display: none; }

  /* Inicio con rol: botones grandes, fáciles de tocar */
  .mod-accesos { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
  .mod-acceso { min-height: 64px; padding: 12px 14px; border-radius: 14px; font-size: 16.5px; font-weight: 600; gap: 14px; background: #fff; }
  .mod-acceso > svg:first-child { width: 44px; height: 44px; padding: 10px; box-sizing: border-box; border-radius: 12px; background: var(--g-l); }
  .mod-acceso::after { content: ''; width: 18px; height: 18px; flex-shrink: 0; opacity: .5;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") no-repeat center; }
}

/* ---------- Cargar (celular): los módulos en acordeón ---------- */
.cg-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.cg-tit { margin: 0; font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -.3px; }
.cg-head .search input { height: 46px; border-radius: 12px; font-size: 15px; }
.cg-lista { display: flex; flex-direction: column; gap: 10px; }
.cg-mod { background: #fff; border: 1px solid var(--bd-azul); border-radius: 16px; overflow: hidden; }
.cg-mod-h { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 12px 16px; }
.cg-mod-h:focus-visible { outline: 2px solid var(--g); outline-offset: -2px; border-radius: 16px; }
.cg-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--g-l); display: grid; place-items: center; flex-shrink: 0; }
.cg-ic svg { width: 23px; height: 23px; fill: none; stroke: var(--g); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cg-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cg-tx b { font-size: 16.5px; color: var(--navy); }
.cg-tx small { font-size: 13px; color: var(--mu); }
.cg-flecha { width: 20px; height: 20px; fill: none; stroke: var(--mu); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .15s; }
.cg-mod.abierto .cg-flecha { transform: rotate(-90deg); }
.cg-items { display: none; border-top: 1px solid #EEF2F9; padding: 4px 0; }
.cg-mod.abierto .cg-items { display: block; }
.cg-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 8px 16px 8px 22px; color: var(--navy); font-size: 15.5px; }
.cg-item + .cg-item { border-top: 1px solid #F3F4F6; }
.cg-item:active { background: var(--g-l); }
.cg-item:focus-visible { outline: 2px solid var(--g); outline-offset: -2px; }
.cg-item > svg:first-child { width: 22px; height: 22px; fill: none; stroke: var(--g); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cg-item span { flex: 1; min-width: 0; }
.cg-ir { width: 18px; height: 18px; fill: none; stroke: #9CA3AF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Botones grandes: opciones una al lado de la otra (select[data-seg]) y cantidad con − y + (input[data-pasos]) */
select.seg-oculto { display: none !important; }
.seg { display: flex; gap: 0; padding: 3px; background: #E8EDF6; border-radius: 10px; min-height: 40px; box-sizing: border-box; }
.seg-b { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 0; min-width: 0; text-align: center; padding: 6px 8px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: #4B5563; line-height: 1.25; display: flex; align-items: center; justify-content: center; }
.seg-b.sel { background: #fff; color: var(--navy); font-weight: 700; box-shadow: 0 1px 2px rgba(11,27,75,.12); }
.seg-b:focus-visible { outline: 2px solid var(--g); outline-offset: 1px; }
.seg-b:disabled, .seg-b[disabled] { cursor: default; opacity: .6; }
.pasos { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.pasos > input { flex: 1 1 auto; min-width: 0; width: auto !important; text-align: center !important; font-weight: 700; }
.pasos-b { all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 36px; min-height: 38px; border: 1px solid var(--bd-in); border-radius: 8px; background: #fff;
  display: grid; place-items: center; font-size: 20px; font-weight: 600; color: var(--navy); -webkit-tap-highlight-color: transparent; }
.pasos-b:active { background: var(--g-l); border-color: var(--g); }
.pasos:has(> input:disabled) .pasos-b, .pasos:has(> input[readonly]) .pasos-b { display: none; }
@media (max-width: 900px) {
  .seg { min-height: 48px; border-radius: 12px; }
  .seg-b { font-size: 15px; border-radius: 9px; }
  .pasos-b { flex-basis: 48px; min-height: 48px; border-radius: 12px; font-size: 24px; }
  .pasos > input { font-size: 18px; min-height: 48px; }
}

/* Inicio: «Para atender», «Lo último» y los botones de cargar */
.ini-blq { margin-bottom: 18px; }
.ini-t { margin: 0 2px 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mu); }
.ini-lista { background: #fff; border: 1px solid var(--bd-azul); border-radius: 14px; overflow: hidden; }
.ini-fila { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 10px 16px; color: var(--navy); }
.ini-fila + .ini-fila { border-top: 1px solid #F3F4F6; }
.ini-fila:hover, .ini-fila:active { background: var(--side-h); }
.ini-fila:focus-visible { outline: 2px solid var(--g); outline-offset: -2px; }
.ini-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--g-l); }
.ini-ic svg { width: 21px; height: 21px; fill: none; stroke: var(--g); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ini-ic.mal { background: var(--bad-bg); } .ini-ic.mal svg { stroke: var(--bad); }
.ini-ic.pen { background: var(--warn-bg); } .ini-ic.pen svg { stroke: var(--warn); }
.ini-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ini-tx b { font-size: 15px; font-weight: 600; }
.ini-tx small { font-size: 13px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-ir { width: 18px; height: 18px; fill: none; stroke: #9CA3AF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ini-fila .pill { flex-shrink: 0; }
.ini-nuevos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.ini-nuevo { flex: 1 1 220px; justify-content: center; min-height: 50px; font-size: 16px; }
@media (max-width: 900px) { .ini-nuevo { min-height: 54px; border-radius: 14px; } }
.mod-accesos + .ini-blq, .card + .ini-blq { margin-top: 20px; }

/* ---------- Segundo factor ---------- */
.sf-codigo { font-size: 22px; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }
.sf-pasos { margin: 0 0 10px; padding-left: 20px; line-height: 1.6; }
.sf-qr-caja { display: flex; justify-content: center; }
.sf-qr { width: 200px; height: 200px; image-rendering: pixelated; background: #fff; border-radius: 8px; }
.sf-clave { margin: 0 0 10px; text-align: center; }
.sf-clave code { font-size: 15px; letter-spacing: .04em; word-break: normal; overflow-wrap: normal; }
.sf-codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sf-codigos code { display: block; text-align: center; padding: 8px; border: 1px dashed var(--bd-azul); border-radius: 8px; font-size: 15px; letter-spacing: .06em; }