:root {
  --verde: #2e7d32;
  --verde-osc: #1b4d20;
  --amarillo: #f9a825;
  --azul: #1565c0;
  --gris: #f4f5f4;
  --borde: #d9ddd9;
  --texto: #24291f;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--gris);
}

/* --- Layout general --- */
.layout { display: flex; height: 100vh; position: relative; }

.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--verde-osc); color: #eaf2ea;
  display: flex; flex-direction: column;
  overflow-y: auto;
  transition: margin-left .2s ease;
}
/* Colapsar: el sidebar se desliza fuera y el contenido ocupa todo el ancho. */
.sidebar-collapsed .sidebar { margin-left: -240px; }

.brand {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: 1.25rem; font-weight: 700; padding: 1rem; letter-spacing: .3px;
}
.sidebar-toggle {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; line-height: 1;
  border: none; border-radius: 6px; cursor: pointer; font-size: 1.05rem;
  background: rgba(255,255,255,.12); color: #eaf2ea;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.22); }
/* Botón para reabrir el menú cuando está oculto. Va en el flujo (columna
   propia a la izquierda) para NO taparse con el título de la página. */
.sidebar-show {
  flex: 0 0 auto; align-self: flex-start; margin: 10px 0 0 10px;
  width: 34px; height: 34px; padding: 0; line-height: 1;
  border: 1px solid var(--borde); border-radius: 8px; cursor: pointer; font-size: 1.1rem;
  background: #fff; color: var(--verde-osc); box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.sidebar-show:hover { background: var(--gris); }
.menu { display: flex; flex-direction: column; padding: .25rem 0; flex: 1; }
.menu-section { display: flex; flex-direction: column; }
/* Separación entre el último ítem de una sección y el título de la siguiente,
   con una línea divisoria sutil que ayuda a leer los grupos. */
.menu-section + .menu-section { margin-top: .55rem; }
.menu-section + .menu-section .menu-group { border-top: 1px solid rgba(255,255,255,.10); }
.menu-group {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: inherit; color: #dbe7db; text-align: left;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  opacity: .85; padding: .85rem 1rem .35rem;
}
.menu-group:hover { opacity: 1; }
/* Título de la sección activa (la que contiene la pantalla actual): resaltado
   con color de acento, opacidad plena y una barra a la izquierda. */
.menu-group.active {
  opacity: 1; color: var(--amarillo);
  background: rgba(255,255,255,.05);
  box-shadow: inset 3px 0 0 var(--amarillo);
}
.menu-caret { font-size: .8rem; transition: transform .15s ease; opacity: .8; }
.menu-caret.open { transform: rotate(90deg); }
.menu-children { display: flex; flex-direction: column; }
.menu-item {
  display: block; padding: .5rem 1rem; color: #eaf2ea; text-decoration: none;
  font-size: .92rem; border-left: 3px solid transparent;
}
/* Sangría de los ítems respecto del título, para que cuelguen de la sección. */
.menu-children .menu-item { padding-left: 1.85rem; }
.menu-item:hover { background: rgba(255,255,255,.08); }
.menu-item.active { background: rgba(255,255,255,.14); border-left-color: var(--amarillo); font-weight: 600; }
.menu-item.disabled { opacity: .45; pointer-events: none; }
/* Subgrupo colapsable dentro de una seccion del menu (agrupa varios items
   relacionados, p. ej. "Registros" en Cabana). El subtitulo es el boton que
   despliega; arranca abierto si la pantalla actual esta adentro. */
.menu-sub { display: flex; flex-direction: column; }
.menu-subgroup {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
  padding: .5rem 1rem .2rem 1.85rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #dbe7db; opacity: .6;
}
.menu-subgroup:hover { opacity: .9; }
.menu-subgroup .menu-caret { font-size: .7rem; }
.menu-subitems { display: flex; flex-direction: column; }
/* Los items del subgrupo cuelgan del subtitulo con una sangria mayor. */
.menu-subitems .menu-item { padding-left: 2.6rem; }
.sidebar-foot { border-top: 1px solid rgba(255,255,255,.12); padding: .25rem 0; }
.logout-form { margin: 0; }
.logout-btn { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; }

.content { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 1rem 1.25rem; }

.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.page-head h1 { font-size: 1.4rem; margin: 0; }

/* --- Botones --- */
.btn {
  border: 1px solid var(--borde); background: #fff; color: var(--texto);
  padding: .45rem .9rem; border-radius: 6px; cursor: pointer; font-size: .9rem;
}
.btn:hover { background: #f0f2f0; }
.btn-primary { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-primary:hover { background: #276b2b; }

/* --- Pantalla de lotes --- */
.lotes-layout {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 260px 1fr auto; gap: .9rem;
}
.lote-lista { overflow-y: auto; background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: .4rem; }
.lote-item {
  flex: 1; min-width: 0; text-align: left; display: flex; align-items: center; gap: .5rem;
  background: none; border: none; border-radius: 6px; padding: .45rem .5rem; cursor: pointer; font-size: .9rem;
}
.lote-item:hover { background: var(--gris); }
.lote-nombre { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-ha { color: #6b726a; font-size: .82rem; white-space: nowrap; }
.vacio { color: #6b726a; font-size: .9rem; padding: .75rem; }

/* --- Árbol de lotes (estilo explorador de carpetas) --- */
.tree, .tree-children { list-style: none; margin: 0; padding: 0; }
.tree-row { display: flex; align-items: center; }
.tree-toggle {
  flex: 0 0 auto; width: 18px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; color: #6b726a; font-size: .7rem;
}
.tree-toggle--leaf { cursor: default; }
/* Indentación de los hijos con guía vertical, como un árbol de archivos. */
.tree-children { margin-left: 17px; border-left: 1px solid var(--borde); }

.badge {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
  padding: .12rem .4rem; border-radius: 4px; color: #fff; white-space: nowrap;
}
.badge-potrero { background: var(--verde); }
.badge-subdivision { background: var(--amarillo); color: #4a3800; }
.badge-piquete { background: var(--azul); }
.badge-cabana { background: #7a5a3a; }
.badge-recria_terminacion { background: #3a6a7a; }

/* Historial de rodeos por potrero (panel de detalle del lote). */
.ocupaciones-lista { list-style: none; margin: .3rem 0 0; padding: 0; }
.ocupaciones-lista .ocupacion {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .35rem .1rem; border-bottom: 1px solid var(--borde);
}
.ocupaciones-lista .ocupacion:last-child { border-bottom: 0; }
.ocupacion-rodeo { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.ocupacion--actual { background: #f2f8f2; border-radius: 4px; }
.ocupacion-fechas { white-space: nowrap; }

.mapa-wrap { position: relative; min-width: 0; }
#map { height: 100%; min-height: 480px; border-radius: 8px; background: #e9ece7; }

/* Control sobre el mapa (slider de opacidad del satélite). Usa las clases de
   Leaflet-control para heredar el sombreado/posición estándar. */
.map-ctrl {
  background: #fff; padding: .45rem .55rem; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); font-size: .78rem; color: var(--texto);
}
.map-ctrl label { display: block; font-weight: 600; margin-bottom: .25rem; white-space: nowrap; }
.map-ctrl input[type="range"] { width: 140px; display: block; cursor: pointer; }
.map-ctrl .map-ctrl-val { color: #6b726a; font-weight: 400; }
.hectareas-vivo {
  position: absolute; z-index: 500; bottom: 12px; left: 12px;
  background: rgba(0,0,0,.72); color: #fff; padding: .3rem .6rem; border-radius: 6px; font-size: .85rem;
}

/* --- Panel lateral (form / detalle) --- */
.panel-lateral { width: 340px; }
.panel-lateral:empty { display: none; }
.lote-form, .lote-detalle {
  background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 1rem;
  display: flex; flex-direction: column; gap: .7rem; height: 100%; overflow-y: auto;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.panel-head h2 { font-size: 1.1rem; margin: 0; }
.btn-close { border: none; background: none; font-size: 1rem; cursor: pointer; color: #6b726a; }

.campo { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; }
.campo input, .campo select {
  font: inherit; font-weight: 400; padding: .45rem .55rem; border: 1px solid var(--borde); border-radius: 6px;
}
.campo .errorlist, .form-error { color: #c62828; font-size: .82rem; margin: 0; padding: 0; list-style: none; font-weight: 400; }
.ayuda-mapa { font-size: .82rem; color: #52584c; background: #eef3ea; padding: .5rem .6rem; border-radius: 6px; margin: 0; }
.nota { color: #6b726a; font-style: italic; }

.detalle-datos { display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; margin: 0; font-size: .9rem; }
.detalle-datos dt { font-weight: 600; color: #52584c; }
.detalle-datos dd { margin: 0; }
.detalle-sub { font-size: .9rem; margin: 0; }
.detalle-sub-head { display: flex; align-items: center; justify-content: space-between; margin: .5rem 0 .25rem; }
.hijos-lista { list-style: none; margin: 0; padding: 0; }

.valor-fijo { font-weight: 400; padding: .45rem .55rem; background: var(--gris); border: 1px solid var(--borde); border-radius: 6px; }
.campo-check { font-size: .85rem; }
.campo-check label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.campo-inline { display: flex; gap: .6rem; }
.campo-inline .campo { flex: 1; }
.btn-small { padding: .2rem .55rem; font-size: .8rem; }

.panel-acciones { display: flex; gap: .5rem; justify-content: flex-end; margin-top: auto; padding-top: .5rem; }

/* --- Pantalla de Cajas y Cuentas --- */
.pill-readonly {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--gris); color: #6b726a; border: 1px solid var(--borde);
  padding: .2rem .55rem; border-radius: 999px;
}
.head-actions { display: flex; gap: .5rem; }
/* Listado (izquierda) + panel de carga (derecha), como Compras/Ventas. */
.cajas-layout { flex: 1; min-height: 0; display: flex; gap: .9rem; }
.cajas-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* Pestañas por caja */
.caja-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--borde); }
.caja-tab {
  border: 1px solid transparent; border-bottom: none; background: none; cursor: pointer;
  padding: .5rem .9rem; font: inherit; font-size: .9rem; color: #52584c;
  border-radius: 8px 8px 0 0; margin-bottom: -2px;
}
.caja-tab:hover { background: #eef3ea; }
.caja-tab.active {
  background: #fff; color: var(--verde-osc); font-weight: 600;
  border-color: var(--borde); border-bottom: 2px solid #fff;
}

.caja-panel {
  flex: 1; min-height: 0; overflow-y: auto;
  background: #fff; border: 1px solid var(--borde); border-top: none;
  border-radius: 0 0 8px 8px; padding: 1rem;
}

/* Filtros */
.caja-filtros { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.filtro { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; font-weight: 600; color: #52584c; }
.filtro input, .filtro select {
  font: inherit; font-weight: 400; padding: .4rem .5rem; border: 1px solid var(--borde); border-radius: 6px;
}
.filtro-check .check-inline {
  display: flex; align-items: center; gap: .4rem; font-weight: 400; white-space: nowrap;
  padding: .4rem 0; cursor: pointer;
}
.filtro-check input[type="checkbox"] { padding: 0; width: auto; cursor: pointer; }
.filtro-q { flex: 1 1 200px; }
.filtro-q input[type="search"] { width: 100%; }

/* Multi-select de un renglón (dropdown con checkboxes + "Todos") */
.ms { position: relative; }
.ms-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  min-width: 150px; font: inherit; font-weight: 400; cursor: pointer; color: var(--texto);
  padding: .4rem .5rem; border: 1px solid var(--borde); border-radius: 6px; background: #fff;
}
.ms-trigger:hover { background: #f7f8f7; }
.ms-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-caret { color: #6b726a; font-size: .7rem; flex: 0 0 auto; }
.ms-panel {
  position: absolute; z-index: 600; top: 100%; left: 0; margin-top: 2px;
  min-width: 100%; max-height: 240px; overflow-y: auto;
  background: #fff; border: 1px solid var(--borde); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15); padding: .25rem;
}
.ms-opt {
  display: flex; align-items: center; gap: .45rem; padding: .3rem .45rem;
  border-radius: 4px; font-weight: 400; white-space: nowrap; cursor: pointer;
}
.ms-opt:hover { background: var(--gris); }
.ms-opt input { width: auto; padding: 0; cursor: pointer; }
.ms-all { border-bottom: 1px solid var(--borde); margin-bottom: .2rem; font-weight: 600; }

/* Encabezados ordenables */
.th-sort {
  display: inline-flex; align-items: center; gap: .25rem;
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: #6b726a;
}
.th-sort:hover { color: var(--verde-osc); }
.th-sort--active { color: var(--verde-osc); font-weight: 700; }
.th-arrow { font-size: .7rem; }
.tabla-movs thead th.col-monto { text-align: right; }
.col-monto .th-sort { flex-direction: row-reverse; }

/* Resumen (tres tarjetas) */
.caja-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
.resumen-card {
  border: 1px solid var(--borde); border-radius: 8px; padding: .7rem .9rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.resumen-lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: #6b726a; }
.resumen-val { font-size: 1.25rem; font-weight: 700; }
.resumen-egreso { background: #fdf1f1; border-color: #f2d0d0; }
.resumen-egreso .resumen-val { color: #b3261e; }
.resumen-ingreso { background: #eef7ef; border-color: #cfe6d2; }
.resumen-ingreso .resumen-val { color: #1e7a2b; }
.resumen-saldo { background: var(--gris); }
.resumen-saldo.neg .resumen-val { color: #b3261e; }

/* Tabla de movimientos */
.tabla-wrap { overflow-x: auto; }
.tabla-movs { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla-movs thead th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
  color: #6b726a; border-bottom: 1px solid var(--borde); padding: .5rem .6rem; white-space: nowrap;
}
.tabla-movs tbody td { padding: .55rem .6rem; border-bottom: 1px solid #eef0ec; vertical-align: top; }
.tabla-movs tbody tr:hover { background: #fafbfa; }
.col-fecha { white-space: nowrap; color: #52584c; }
/* Categoría de gasto: nombres largos («Infraestructura - Mantenimiento»), así que
   se deja envolver en vez de estirar la tabla. */
.col-categoria { color: #52584c; max-width: 11rem; }
.col-monto { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.monto-egreso { color: #b3261e; }
.monto-ingreso { color: #1e7a2b; }

.badge-tipo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  padding: .12rem .45rem; border-radius: 4px; white-space: nowrap; font-weight: 600;
}
.badge-egreso { background: #fdf1f1; color: #b3261e; }
.badge-ingreso { background: #eef7ef; color: #1e7a2b; }
.badge-cancelacion { background: #eceff3; color: #5a6472; border: 1px solid #d5dbe2; }
.badge-cancelado { background: #fff; color: #8a94a3; border: 1px dashed #c3cad4; }

/* Fila cancelada (original ya revertido) y fila de cancelación (el reverso) */
.fila-cancelada > td { opacity: .6; }
.fila-cancelada .mov-desc { text-decoration: line-through; }
.fila-cancelacion { background: #fafbfc; }

/* Columna de acción (tacho de cancelar) */
.col-accion { width: 34px; text-align: center; }
.btn-tacho {
  border: none; background: none; cursor: pointer; font-size: 1rem; line-height: 1;
  padding: .25rem .35rem; border-radius: 6px; color: #8a94a3; opacity: .75;
}
.btn-tacho:hover { background: #fdf1f1; color: #b3261e; opacity: 1; }

.mov-desc { font-weight: 500; }
.mov-meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; font-size: .82rem; color: #52584c; margin-top: .1rem; }
.chip {
  background: var(--gris); border: 1px solid var(--borde); border-radius: 4px;
  padding: .02rem .35rem; font-size: .76rem; color: #52584c;
}
.col-actividad { white-space: nowrap; }
.chip-actividad { background: #eaf1fb; border-color: #cfe0f5; color: #1a4d8f; }
/* Gasto compartido entre actividades: se prorratea (no es una actividad más). */
.chip-compartido { background: #f3ecfb; border-color: #ddcdf0; color: #5b3d8f; }
.chip-general { background: var(--gris); border: 1px solid var(--borde); color: #6b726a;
  border-radius: 4px; padding: .02rem .35rem; font-size: .76rem; }
.mov-iva { font-size: .8rem; color: #6b726a; margin-top: .2rem; }
/* «gasto de: …» — el comprobante accesorio (comisión, flete) nombrando la
   operación que lo originó (Comprobante.origen). */
.mov-origen { font-size: .8rem; color: #6b726a; margin-top: .2rem; font-style: italic; }
.chip-cheque {
  display: inline-block; margin-top: .3rem; font-size: .78rem;
  padding: .12rem .45rem; border-radius: 4px; border: 1px solid var(--borde); background: #fff;
}
.cheque-pendiente { border-color: #e6b800; background: #fff8e1; color: #7a5b00; }
.cheque-rechazado { border-color: #f2d0d0; background: #fdf1f1; color: #b3261e; }
.cheque-cobrado, .cheque-depositado { border-color: #cfe6d2; background: #eef7ef; color: #1e7a2b; }
.chip-cheque-accion { display: inline; margin: 0; }
.chip-cheque-deshacer {
  border: none; background: none; padding: 0 0 0 .35rem; cursor: pointer;
  font-size: .74rem; color: #6b726a; text-decoration: underline;
}
.chip-cheque-deshacer:hover { color: #b3261e; }

/* Pantalla Cheques: alertas de vencimiento y botones de cambio de estado */
.cheque-alerta {
  display: inline-block; margin-left: .35rem; font-size: .68rem; font-weight: 600;
  padding: .04rem .35rem; border-radius: 4px; text-transform: uppercase; letter-spacing: .02em;
}
.cheque-alerta.vencido { background: #fdf1f1; color: #b3261e; border: 1px solid #f2d0d0; }
.cheque-alerta.proximo { background: #fff8e1; color: #7a5b00; border: 1px solid #e6cf7a; }
.col-acciones { white-space: nowrap; }
.cheque-acciones { display: flex; flex-wrap: wrap; gap: .3rem; }
.btn-estado {
  border: 1px solid var(--borde); background: #fff; cursor: pointer;
  font: inherit; font-size: .76rem; font-weight: 600; padding: .22rem .5rem;
  border-radius: 6px; white-space: nowrap; color: #52584c;
}
.btn-estado:hover { background: #f7f8f7; }
.btn-estado.ok { border-color: #cfe6d2; color: #1e7a2b; }
.btn-estado.ok:hover { background: #eef7ef; }
.btn-estado.bad { border-color: #f2d0d0; color: #b3261e; }
.btn-estado.bad:hover { background: #fdf1f1; }
.btn-estado.neutro { color: #6b726a; }

.caja-vacio { padding: 2rem 1rem; text-align: center; color: #52584c; }
.caja-vacio p { margin: .3rem 0; }

/* Barra de Liquidaciones: filtros a la izquierda, totales a la derecha (misma línea,
   así los totales quedan visibles aunque la tabla sea larga). */
.liq-barra {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: .6rem 1.25rem; margin: .2rem 0 .7rem;
}
.liq-filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; margin: 0;
}
.liq-filtros .campo { font-size: .82rem; }

.liq-totales {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem;
  padding: .45rem .7rem; border: 1px solid var(--borde); border-radius: 8px; background: #f7f8f6;
}
.liq-tot-titulo { font-weight: 700; color: #3a4034; font-size: .85rem; }
.liq-tot { display: inline-flex; flex-direction: column; line-height: 1.2; }
.liq-tot-lbl { font-size: .68rem; color: #6b726a; text-transform: uppercase; letter-spacing: .03em; }
.liq-tot strong { font-size: .95rem; }

/* --- Pantallas de Compras / Ventas --- */
.cv-layout {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr auto; gap: .9rem;
}
.cv-lista {
  overflow-y: auto; background: #fff; border: 1px solid var(--borde);
  border-radius: 8px; padding: 1rem; min-width: 0;
}
.cv-panel { width: 420px; }

.cv-form {
  background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 1rem;
  display: flex; flex-direction: column; gap: .7rem; height: 100%; overflow-y: auto;
}
.cv-form select, .cv-form input {
  font: inherit; padding: .45rem .55rem; border: 1px solid var(--borde); border-radius: 6px; width: 100%;
}
.cv-form .campo-check input { width: auto; }

/* Bloque agrupado (IVA, cheque, stock) */
.cv-bloque {
  border: 1px solid var(--borde); border-radius: 8px; padding: .7rem .8rem;
  background: #fafbfa; display: flex; flex-direction: column; gap: .6rem;
}
.cv-bloque .campo-check span { font-weight: 600; font-size: .85rem; }
/* Sub-grupo de campos relacionados dentro de un bloque (p. ej. inicio/fin) */
.cv-fila { display: flex; flex-direction: column; gap: .6rem; }
.cv-total { text-align: right; font-size: .95rem; color: #52584c; }
.cv-total strong { color: var(--verde-osc); font-variant-numeric: tabular-nums; }

/* Líneas de destino/origen de stock */
.cv-lineas { display: flex; flex-direction: column; gap: .45rem; }
.cv-lineas-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; font-weight: 600; color: #52584c;
}
.cv-linea { display: grid; grid-template-columns: 1fr 130px auto; gap: .4rem; align-items: center; }
.cv-cant { display: flex; align-items: center; gap: .35rem; }
.cv-cant input { min-width: 0; }
.cv-unidad { font-size: .82rem; color: #6b726a; white-space: nowrap; }

.chip-stock {
  display: inline-block; margin-top: .3rem; font-size: .78rem;
  padding: .12rem .45rem; border-radius: 4px;
  border: 1px solid #cfe0f2; background: #eef4fb; color: #1b4a7a;
}

/* --- Stock de reservas: acciones por fila --- */
.stock-acciones { display: flex; gap: .3rem; justify-content: flex-end; flex-wrap: wrap; }
.btn-alerta-on { border-color: #e6c200; background: #fff8dc; }
.btn-alerta-on:hover { background: #fff2b8; }
.alerta-ubic { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-size: .85rem; }
.stock-tabla .col-accion,
.tabla-movs .col-accion { width: auto; white-space: nowrap; text-align: right; }
/* Fila superior de cada ítem (separa visualmente los grupos ítem+ubicaciones) */
.fila-item-top > td { border-top: 2px solid var(--borde); }

/* --- Configuración › Stock --- */
.config-seccion { margin-bottom: 1.1rem; }
.config-catalogos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  padding: .8rem; margin-bottom: 1rem;
  border: 1px solid var(--borde); border-radius: 8px; background: #fafbfa;
}
.config-catalogos .config-seccion { margin-bottom: 0; }
.config-items-head { margin-top: .5rem; }
@media (max-width: 720px) { .config-catalogos { grid-template-columns: 1fr; } }
.config-seccion-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem;
}
.config-seccion-head h3 { margin: 0; font-size: .95rem; color: #3a4034; }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.config-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .3rem .25rem .6rem; border-radius: 6px;
  border: 1px solid var(--borde); background: #fafbfa; font-size: .85rem;
}
.chip-btn {
  border: none; background: transparent; cursor: pointer; font-size: .82rem;
  padding: .1rem .2rem; border-radius: 4px; line-height: 1;
}
.chip-btn:hover { background: #ececec; }

/* --- Configuración › Listas: menú de listas a la izquierda + valores a la derecha --- */
.listas-layout {
  flex: 1; min-height: 0; display: grid; gap: 1rem;
  grid-template-columns: 260px 1fr;
  /* minmax(0,1fr) y no el `auto` por defecto: sin esto la fila crece con el contenido
     y las dos columnas desbordan la pantalla en vez de scrollear cada una adentro. */
  grid-template-rows: minmax(0, 1fr);
}
.listas-nav {
  display: flex; flex-direction: column; gap: .15rem; overflow-y: auto;
  padding: .5rem; border: 1px solid var(--borde); border-radius: 8px; background: #fafbfa;
}
.listas-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  border: 1px solid transparent; background: none; cursor: pointer; text-align: left;
  padding: .4rem .55rem; font: inherit; font-size: .87rem; color: #52584c; border-radius: 6px;
}
.listas-nav-item:hover { background: #eef3ea; }
.listas-nav-item.active {
  background: #fff; color: var(--verde-osc); font-weight: 600; border-color: var(--borde);
}
.listas-nav-nombre { min-width: 0; }
.listas-nav-n {
  flex: none; font-size: .78rem; color: #6b7163;
  background: #eef0ec; border-radius: 10px; padding: .05rem .4rem;
}
.listas-cuerpo {
  min-width: 0; overflow-y: auto;
  background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 1rem;
}
.listas-aviso {
  margin: .4rem 0 .8rem; padding: .5rem .7rem; font-size: .84rem; line-height: 1.35;
  background: #fdf6e3; border: 1px solid #eadfb8; border-radius: 6px; color: #6b5a1e;
}
.listas-lock { margin-left: .25rem; cursor: help; }
.listas-pie { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--borde); }
@media (max-width: 860px) { .listas-layout { grid-template-columns: 1fr; } }

/* --- Registro de lluvia --- */
/* Acumulado mensual: mini-barras Ene–Dic */
.lluvia-meses {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: .35rem;
  align-items: end; margin-bottom: 1.2rem;
  padding: .7rem .8rem; border: 1px solid var(--borde); border-radius: 8px; background: #fafbfa;
}
.lluvia-mes { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; }
.lluvia-barra-wrap {
  width: 100%; height: 90px; display: flex; align-items: flex-end;
  border-radius: 4px 4px 0 0; background: #eef0ec;
}
.lluvia-barra { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--azul); }
.lluvia-mes-mm { font-size: .68rem; color: #52584c; font-variant-numeric: tabular-nums; min-height: .85rem; white-space: nowrap; }
.lluvia-mes-lbl { font-size: .7rem; color: #6b726a; }

.tabla-lluvia { max-width: 480px; }
.tabla-lluvia .col-accion { width: auto; white-space: nowrap; text-align: right; }
.btn-icono {
  border: none; background: none; cursor: pointer; font-size: .95rem; padding: .1rem .25rem;
  opacity: .7; border-radius: 4px;
}
.btn-icono:hover { background: #eef4fb; opacity: 1; }

/* Navegación de la ventana de 12 meses (flechas ◀▶) */
.lluvia-graf {
  border: 1px solid var(--borde); border-radius: 8px; background: #fafbfa;
  padding: .7rem .8rem; margin-bottom: 1.2rem;
}
.lluvia-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-bottom: .5rem; }
.lluvia-rango { font-size: .82rem; font-weight: 600; color: #52584c; min-width: 12rem; text-align: center; }
.btn-nav {
  border: 1px solid var(--borde); background: #fff; color: var(--azul);
  border-radius: 6px; width: 2rem; height: 1.7rem; cursor: pointer; font-size: .8rem; line-height: 1;
}
.btn-nav:hover { background: #eef4fb; }
.btn-nav:disabled { opacity: .35; cursor: default; background: #fff; }
.lluvia-graf .lluvia-meses { margin-bottom: 0; border: none; background: none; padding: 0; }
.lluvia-mes-anio { font-size: .62rem; color: #9aa196; min-height: .8rem; font-weight: 600; }

.btn-danger { border-color: #e0b4b0; color: #b3261e; }
.btn-danger:hover { background: #fdf1f1; }

/* --- Pantallas Proveedores / Clientes (lista + ficha + panel) --- */
.prov-layout {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 280px 1fr auto; gap: .9rem;
}

/* Pasturas › solapa Pasturas: lista + ficha (el panel lateral es compartido y
   vive fuera de las solapas, como aside de .cajas-layout). */
.pastura-cols { display: grid; grid-template-columns: 280px 1fr; gap: .9rem; align-items: start; }
@media (max-width: 800px) { .pastura-cols { grid-template-columns: 1fr; } }

/* Columna izquierda: buscador + lista */
.prov-lista {
  overflow-y: auto; background: #fff; border: 1px solid var(--borde);
  border-radius: 8px; padding: .5rem; min-width: 0;
}
.prov-buscador { margin-bottom: .4rem; }
.prov-buscador input[type="search"] {
  width: 100%; font: inherit; padding: .45rem .55rem;
  border: 1px solid var(--borde); border-radius: 6px;
}
.prov-items { list-style: none; margin: 0; padding: 0; }
.prov-item {
  width: 100%; text-align: left; display: flex; align-items: center; gap: .5rem;
  background: none; border: none; border-radius: 6px; padding: .5rem .55rem;
  cursor: pointer; font: inherit; font-size: .9rem;
}
.prov-item:hover { background: var(--gris); }
.prov-item.active { background: #eef3ea; box-shadow: inset 3px 0 0 var(--verde); }
.prov-item-nombre { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-item-saldo { font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; color: #6b726a; }
.prov-item-saldo.saldo-debe { color: #b3261e; font-weight: 600; }
.prov-item-saldo.saldo-favor { color: #1e7a2b; font-weight: 600; }

/* Columna central: ficha */
.prov-detalle { overflow-y: auto; min-width: 0; }
.prov-placeholder {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: #6b726a; font-size: .95rem; background: #fff; border: 1px dashed var(--borde);
  border-radius: 8px; padding: 2rem; text-align: center;
}
.ficha {
  background: #fff; border: 1px solid var(--borde); border-radius: 8px;
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 1rem;
}
.ficha-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ficha-nombre { margin: 0 0 .3rem; font-size: 1.3rem; }
.ficha-meta { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; font-size: .85rem; color: #52584c; }
.ficha-dato { color: #52584c; }
.ficha-acciones { display: flex; gap: .4rem; flex: 0 0 auto; }

.ficha-saldo {
  display: flex; flex-direction: column; gap: .1rem;
  background: var(--gris); border: 1px solid var(--borde); border-radius: 8px;
  padding: .7rem .9rem;
}
.ficha-saldo-lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: #6b726a; }
.ficha-saldo-val { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ficha-saldo-nota { font-size: .8rem; color: #6b726a; }
.ficha-saldo.neg .ficha-saldo-val { color: #1e7a2b; }

.ficha-seccion { display: flex; flex-direction: column; gap: .5rem; }
.ficha-seccion-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.ficha-seccion-titulo { margin: 0; font-size: 1rem; color: #3a4034; }

/* Servicios pendientes */
.servicios-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.servicio-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem;
  border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .75rem; background: #fafbfa;
}
.servicio-vencido { border-color: #e6b800; background: #fff8e1; }
.servicio-info { min-width: 0; }
.servicio-desc { font-weight: 500; }
.servicio-acciones { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }

.cv-bloque-titulo { font-weight: 600; font-size: .85rem; }

/* --- Panel de Inicio (dashboard) --- */
.inicio-fecha { color: #6b726a; font-size: .9rem; }
.inicio-seccion { margin-bottom: 1.6rem; }
.inicio-h2 {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.05rem; margin: 0 0 .7rem; color: #3a4034;
}
.alerta-contador {
  background: var(--verde); color: #fff; border-radius: 999px;
  font-size: .72rem; font-weight: 700; padding: .05rem .5rem; min-width: 1.2rem; text-align: center;
}

/* Foto económica: 3 tarjetas clicables (reusa .resumen-card) */
.eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.eco-link { text-decoration: none; color: inherit; transition: box-shadow .12s, transform .12s; }
.eco-link:hover { box-shadow: 0 2px 10px rgba(0,0,0,.10); transform: translateY(-1px); }
.eco-sub { margin-top: .3rem; display: flex; flex-wrap: wrap; gap: .1rem .8rem; font-size: .8rem; color: #6b726a; }
.eco-caja b { color: var(--texto); }
.eco-caja b.neg, .resumen-val + .eco-sub .neg { color: #b3261e; }

/* Grilla de tarjetas de alertas */
.inicio-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.inicio-card {
  background: #fff; border: 1px solid var(--borde); border-radius: 10px;
  padding: .8rem .9rem; display: flex; flex-direction: column; gap: .5rem;
}
.inicio-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-weight: 600; color: #3a4034; border-bottom: 1px solid var(--borde); padding-bottom: .45rem;
}
.pill { border-radius: 999px; font-size: .7rem; font-weight: 700; padding: .05rem .5rem; white-space: nowrap; }
.pill-rojo { background: #fdf1f1; color: #b3261e; border: 1px solid #f2d0d0; }
.pill-amar { background: #fff8e1; color: #7a5b00; border: 1px solid #e6d18a; }
.pill-verde { background: #eef7ef; color: #1e7a2b; border: 1px solid #cfe8d3; }
.pill-gris { background: #f2f3f0; color: #5c6152; border: 1px solid #dfe2da; }

/* --- Agro › Plan de campaña --- */
.agro-campana-bar {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: .75rem 1.25rem;
  margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--borde);
}
.campo-inline-sel { max-width: 16rem; }
.agro-campana-meta {
  display: flex; align-items: center; gap: .5rem; font-size: .85rem;
  color: #5c6152; padding-bottom: .1rem;
}
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  padding: 2.5rem 1rem; color: #5c6152; text-align: center;
}

/* Toggle de vista / modo (Tabla ↔ Línea de tiempo, Campaña ↔ Rango libre) */
.vista-toggle { display: inline-flex; gap: .25rem; margin-left: auto; }
.vista-toggle .btn.active { background: var(--verde); border-color: var(--verde); color: #fff; }

/* --- Agro › Plan de campaña › Línea de tiempo --- */
.tl-controles { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .6rem 1rem; margin-bottom: .8rem; }
.tl-rango { display: flex; align-items: flex-end; gap: .5rem; }
.campo-mini { max-width: 9.5rem; }
.campo-mini span { font-size: .78rem; }
.tl-nav { display: inline-flex; gap: .25rem; margin-left: auto; }

.tl-grid { min-width: max-content; display: flex; flex-direction: column; gap: 4px; }
.tl-row { display: grid; grid-template-columns: minmax(130px, 180px) 1fr; align-items: stretch; }
.tl-lote {
  display: flex; align-items: center; padding: 0 .5rem; font-size: .85rem; font-weight: 600;
  color: #3a4034; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-track { display: grid; position: relative; min-height: 30px; }
.tl-cell { border-left: 1px solid #eef0ed; }
.tl-cell:last-child { border-right: 1px solid #eef0ed; }
.tl-head .tl-track { min-height: auto; }
.tl-mes {
  display: flex; align-items: center; justify-content: center; padding: .2rem 0;
  font-size: .7rem; font-weight: 700; color: #6b726a; text-transform: capitalize; border-bottom: 1px solid var(--borde);
}
.tl-head .tl-lote { font-size: .72rem; color: #6b726a; text-transform: uppercase; letter-spacing: .03em; }

.tl-bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 22px; min-width: 12px; box-sizing: border-box; border-radius: 5px;
  background: var(--bar); display: flex; align-items: center; padding: 0 .5rem;
  color: #fff; font-size: .74rem; font-weight: 600; overflow: hidden; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.18); cursor: pointer;
}
.tl-bar-lbl { overflow: hidden; text-overflow: ellipsis; flex: 1; pointer-events: none; }

/* Manijas de edición gráfica (arrastrar los extremos de la barra) */
.tl-handle {
  position: absolute; top: 0; bottom: 0; width: 10px; z-index: 2;
  cursor: ew-resize; touch-action: none;
}
.tl-handle-l { left: 0; }
.tl-handle-r { right: 0; }
.tl-handle::before {
  content: ''; position: absolute; top: 4px; bottom: 4px; width: 2px;
  left: 50%; transform: translateX(-50%); border-radius: 2px;
  background: rgba(255,255,255,.55); opacity: 0; transition: opacity .12s;
}
.tl-bar:hover .tl-handle::before { opacity: 1; }
.tl-bar-dragging { z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
body.tl-dragging { cursor: ew-resize; user-select: none; }

/* Candado: extremo bloqueado (siembra definida / cosecha finalizada) */
.tl-lock {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  font-size: .6rem; line-height: 1; opacity: .9; cursor: help; filter: grayscale(.2);
}
.tl-lock-l { left: 2px; }
.tl-lock-r { right: 2px; }

/* Hito de cosecha declarada (una entrega) — rombo sobre la barra */
.tl-hito {
  position: absolute; top: 50%; width: 9px; height: 9px; z-index: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #fff; border: 1.5px solid #2e3428; border-radius: 2px;
  cursor: help; box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}

/* Padding extra en el borde bloqueado para que el candado no pise el contenido */
.tl-bar.tl-pl { padding-left: 1.15rem; }
.tl-bar.tl-pr { padding-right: 1.15rem; }

/* Tilde de cosecha finalizada (estado cosechado) — chip verde sobre la barra */
.tl-check {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-right: .25rem; border-radius: 50%;
  background: #fff; color: #1e7a2b; font-size: .62rem; font-weight: 900; line-height: 1;
}

/* Aviso de campaña cerrada (solo lectura) */
.tl-cerrada-aviso {
  margin-top: .6rem; padding: .4rem .6rem; border-radius: 6px;
  background: #fff8e1; border: 1px solid #e6d18a; color: #7a5b00; font-size: .82rem;
}

/* Tooltip de fecha que sigue al puntero mientras se arrastra un extremo */
.tl-fecha-tip {
  position: fixed; z-index: 1000; pointer-events: none;
  background: #2e3428; color: #fff; font-size: .74rem; font-weight: 600;
  padding: .12rem .4rem; border-radius: 5px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); transform: translate(-50%, -140%);
}
.tl-bar-est {
  background: repeating-linear-gradient(-45deg, var(--bar), var(--bar) 6px, rgba(255,255,255,.28) 6px, rgba(255,255,255,.28) 12px);
  opacity: .95;
}
/* El rayado (barra planificada) aclara el fondo y el texto blanco se pierde.
   Texto blanco con contorno oscuro: legible sobre el color y sobre las rayas. */
.tl-bar-est .tl-bar-lbl {
  color: #fff;
  text-shadow:
    -1.5px -1.5px 0 rgba(0,0,0,.95), 1.5px -1.5px 0 rgba(0,0,0,.95),
    -1.5px  1.5px 0 rgba(0,0,0,.95), 1.5px  1.5px 0 rgba(0,0,0,.95),
     0 -1.5px 0 rgba(0,0,0,.95), 0 1.5px 0 rgba(0,0,0,.95),
    -1.5px 0 0 rgba(0,0,0,.95), 1.5px 0 0 rgba(0,0,0,.95);
}
.tl-nofecha, .tl-off {
  grid-row: 1; align-self: center; font-size: .74rem; color: #9098a6; padding: 0 .5rem; white-space: nowrap;
}
.tl-off-der { text-align: right; }
.tl-leyenda { margin-top: .6rem; }

/* Anidamiento potrero → subdivisiones en la TABLA */
.tabla-movs tr.grupo-inicio > td { border-top: 2px solid var(--borde); }
.grupo-lote { vertical-align: top; font-weight: 600; }
.sub-ref { color: #3a4034; }

/* Anidamiento potrero → subdivisiones en la LÍNEA DE TIEMPO */
.tl-grupo-head { margin-top: 4px; }
.tl-grupo-head .tl-lote { font-weight: 700; color: #2e3428; }
.tl-grupo-head .tl-cell { border-top: 1px solid #e3e6e0; }
.tl-lote-hijo { padding-left: 1.4rem; font-weight: 500; color: #5c6152; }

/* Timeline única: barras de OTRAS campañas / ganadería (contexto) van atenuadas.
   Se realzan al pasar el mouse para poder leerlas sin tener que cambiar de campaña. */
.tl-bar-otra { opacity: .42; filter: saturate(.7); }
.tl-bar-otra:hover { opacity: .9; filter: none; }
/* Chip con la campaña (o «Ganadería») al lado del lote, sólo en barras de contexto */
.tl-camp-chip {
  display: inline-block; margin-left: .4rem; padding: 0 .35rem;
  font-size: .64rem; font-weight: 600; line-height: 1.35;
  color: #6b726a; background: #eef0ed; border: 1px solid #e0e3dd; border-radius: 999px;
  vertical-align: middle; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-camp-chip.tl-camp-gan { color: #6b4f43; background: #f1e9e4; border-color: #e6dbd3; }
.tl-atenuada-ej { opacity: .5; font-weight: 600; }

/* Icono para crear/ver la pastura, SOBRE la barra de ganadería (a la derecha).
   Va por encima de la barra pero sin tapar las manijas de arrastre de los extremos. */
.tl-bar-pastura {
  flex: 0 0 auto; margin-left: .3rem; margin-right: .8rem; padding: 0 .25rem; border: 0;
  background: rgba(255,255,255,.85); border-radius: 6px; cursor: pointer;
  font-size: .72rem; line-height: 1.4; white-space: nowrap; text-decoration: none;
  color: #333; opacity: .92; z-index: 3; position: relative;
}
.tl-bar-pastura:hover { opacity: 1; background: #fff; }

/* Aviso de conflicto (solape espacio-tiempo) al arrastrar en la línea de tiempo */
.tl-conflicto {
  display: flex; align-items: flex-start; gap: .5rem;
  background: #fdecea; border: 1px solid #f3c2bd; color: #8a2018;
  border-radius: 8px; padding: .55rem .7rem; margin: .5rem 0 .2rem;
  font-size: .84rem; line-height: 1.35;
}
.tl-conflicto-ico { flex: 0 0 auto; }
.tl-conflicto-x {
  margin-left: auto; flex: 0 0 auto; border: none; background: transparent;
  color: #8a2018; cursor: pointer; font-size: .9rem; line-height: 1; padding: 0 .1rem;
}
.tl-conflicto-x:hover { color: #5c130d; }

.alerta-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.alerta-item {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .45rem .2rem; border-bottom: 1px solid #eef0ed;
}
.alerta-item:last-child { border-bottom: none; }
.alerta-item.es-vencido { background: #fdf1f1; border-radius: 6px; }
.alerta-item.es-proximo { background: #fff8e1; border-radius: 6px; }
.alerta-icono { flex: 0 0 auto; font-size: .95rem; line-height: 1.3; }
.alerta-txt { min-width: 0; display: flex; flex-direction: column; flex: 1; gap: .05rem; }
.alerta-txt-link { flex-direction: row; align-items: baseline; justify-content: space-between; gap: .6rem;
  text-decoration: none; color: inherit; }
.alerta-txt-link:hover b { text-decoration: underline; }
.alerta-sub { font-size: .78rem; color: #6b726a; }
.alerta-accion { flex: 0 0 auto; margin-left: auto; align-self: center; }
.alerta-monto { font-weight: 700; white-space: nowrap; }
.alerta-monto.neg { color: #b3261e; }
.inicio-vacio { color: #6b726a; font-size: .85rem; margin: .2rem 0; }
.inicio-verlink { font-size: .8rem; color: var(--verde); text-decoration: none; align-self: flex-start; }
.inicio-verlink:hover { text-decoration: underline; }

/* Accesos rápidos */
.accesos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.acceso {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center;
  background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: .9rem .6rem;
  text-decoration: none; color: var(--texto); font-weight: 500; font-size: .88rem;
  transition: box-shadow .12s, transform .12s, border-color .12s;
}
.acceso:hover { box-shadow: 0 2px 10px rgba(0,0,0,.10); transform: translateY(-1px); border-color: var(--verde); }
.acceso-ico { font-size: 1.5rem; }

@media (max-width: 860px) {
  .eco-grid, .inicio-cards { grid-template-columns: 1fr; }
}

/* --- Agro › Declaración de cosecha --- */
.cosecha-resumen {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
  margin: .6rem 0 1rem;
}
.cr-tile {
  display: flex; flex-direction: column; gap: .1rem;
  background: #f7f9f5; border: 1px solid var(--borde); border-radius: 8px;
  padding: .5rem .6rem;
}
.cr-tile .nota { font-size: .72rem; }
.cr-tile strong { font-size: 1.02rem; color: #2f3a2a; }
.cosecha-sub { font-size: .9rem; font-weight: 600; color: #3a4034; margin: .4rem 0 .5rem; }
.cosecha-por-cultivo-titulo { font-size: 1rem; margin: 1.6rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.cultivo-chip { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .3rem; vertical-align: middle; }
.tabla-compacta th, .tabla-compacta td { padding-top: .3rem; padding-bottom: .3rem; font-size: .82rem; }
.fila-editando { background: #fff8e1; }

/* --- Liquidaciones de cosecha --- */
.liq-calc-row {
  display: flex; align-items: baseline; gap: .5rem;
  justify-content: space-between; font-size: .9rem; color: #52584c;
}
.liq-calc-row .nota { margin-left: auto; font-size: .72rem; }
.liq-calc-row strong { font-variant-numeric: tabular-nums; color: var(--verde-osc); min-width: 6.5rem; text-align: right; }
.liq-calc-total { border-top: 1px dashed var(--borde); padding-top: .4rem; font-size: .95rem; font-weight: 600; }
.liq-calc-total strong { font-size: 1rem; }
.liq-calc-inline { padding: .35rem .1rem; font-variant-numeric: tabular-nums; color: var(--verde-osc); font-weight: 600; }
.liq-page-form { max-width: 760px; }
.campo-check-inline { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; }
.campo-check-inline input { width: auto; }
/* Cluster de acciones por fila del listado de liquidaciones */
.liq-acciones { display: inline-flex; gap: .25rem; align-items: center; justify-content: flex-end; }
.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid var(--borde); border-radius: 6px;
  background: #fff; color: var(--texto); text-decoration: none; font-size: .95rem; cursor: pointer;
}
.btn-icono:hover { background: #f0f2f0; }
.btn-icono-on { border-color: #cfe0f2; background: #eef4fb; }   /* con PDF adjunto */
.btn-tacho-txt { color: #c62828; }
.liq-page-form > .cv-bloque { margin-bottom: .7rem; }
.liq-items-bloque { background: #f7f9f6; }
.liq-linea {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .5rem; border: 1px solid var(--borde); border-radius: 6px; background: #fff;
}
.liq-linea + .liq-linea { margin-top: .15rem; }
.liq-concepto { width: 100%; }
.liq-linea input { min-width: 0; }
.liq-linea-campos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.liq-campo { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 90px; min-width: 80px; }
.liq-campo > label { font-size: .72rem; color: #6b726a; }
.liq-num { text-align: right; }
.liq-ro {
  display: block; padding: .4rem .5rem; border: 1px solid var(--borde); border-radius: 6px;
  background: #eef1ec; color: #52584c; text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.liq-ro-monto { font-weight: 600; color: var(--verde-osc); }
.liq-quitar { flex: 0 0 auto; align-self: flex-end; }
.liq-totales { background: #fafbfa; }
.liq-items { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.chip-liq {
  font-size: .72rem; padding: .1rem .4rem; border-radius: 4px;
  border: 1px solid #e0d6c2; background: #f7f1e6; color: #6b5a34;
}
.chip-retiro {
  font-size: .72rem; padding: .1rem .4rem; border-radius: 4px;
  border: 1px solid #cfe0f5; background: #eaf1fb; color: #1a4d8f;
}

/* ==========================================================================
   Cabaña › Animales / Rodeos
   ========================================================================== */

/* Tarjetas de rodeo (tabs) — mismo look que .caja-tabs, con contador */
.rodeo-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--borde); margin-bottom: .9rem; }
.rodeo-tab {
  border: 1px solid transparent; border-bottom: none; background: none; cursor: pointer;
  padding: .5rem .9rem; font: inherit; font-size: .9rem; color: #52584c;
  border-radius: 8px 8px 0 0; margin-bottom: -2px; display: inline-flex; align-items: center; gap: .4rem;
}
.rodeo-tab:hover { background: #eef3ea; }
.rodeo-tab.active {
  background: #fff; color: var(--verde-osc); font-weight: 600;
  border-color: var(--borde); border-bottom: 2px solid #fff;
}
.rodeo-tab-n {
  font-size: .72rem; font-weight: 700; background: var(--gris); color: #52584c;
  border-radius: 999px; padding: .05rem .45rem; min-width: 1.4em; text-align: center;
}
.rodeo-tab.active .rodeo-tab-n { background: #e3efe0; color: var(--verde-osc); }
/* Cartel de confirmación del arrastre de terneros al pie */
.form-aviso {
  background: #fdf6e6; border: 1px solid #eadbb0; color: #6b5312;
  border-radius: 8px; padding: .7rem .9rem; font-size: .88rem; margin-bottom: .9rem;
}
.form-aviso-titulo { margin: 0 0 .25rem; font-weight: 600; }
.form-aviso .nota { color: #7b6526; }
.lista-crias { margin: .35rem 0 .6rem; padding-left: 1.2rem; }
.lista-crias li { margin: .1rem 0; }
.form-aviso-acciones { display: flex; gap: .5rem; }

/* "40+8": 40 cabezas con 8 terneros lactantes al pie (no cuentan como cabeza) */
.rodeo-tab-lact { font-weight: 600; opacity: .7; }
.resumen-lact { font-size: .72em; font-weight: 700; color: #6b726a; }

/* Resumen del rodeo (4 tarjetas, reusa .resumen-card) */
.rodeo-resumen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem;
  margin: 1rem 0; background: #fff; border: 1px solid var(--borde); border-top: none;
  border-radius: 0 0 8px 8px; padding: 1rem;
}
.rodeo-resumen .resumen-card { border: none; padding: 0; background: none; }
.resumen-val-sm { font-size: .95rem; font-weight: 600; }

/* Chips de categoría (con punto de color) */
.cat-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.cat-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; white-space: nowrap; }
.cat-dot {
  width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; flex: none;
  /* Borde fino: sin el, el punto de la categoria General (blanco) se pierde
     contra el fondo de la tarjeta. */
  border: 1px solid #333; box-sizing: border-box;
}

/* Filtro de categoría */
.rodeo-filtros { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: .75rem; }

/* Variante de 5 tarjetas (hub de la etapa de Parición: paridas / faltan / % /
   crías vivas / relación de sexos). */
.rodeo-resumen--5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 900px) {
  .rodeo-resumen, .rodeo-resumen--5 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Pesadas (Establecimiento): panel de sesión reusa .serv-* (manga) --- */
/* El panel reusa .rodeo-resumen; las estadísticas van en 4 columnas sin bordes de tab. */
.pesada-stats { border: 1px solid var(--borde); border-radius: 8px; margin-top: 0; }
.btn-group { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Edición en línea de una pesada (fila a lo ancho): campos apilados y compactos. */
.pesada-edit { display: flex; flex-direction: column; gap: .6rem; padding: .3rem 0; }
.pesada-edit .campo-inline { gap: .6rem; }
/* Historial: cada sección (día o rodeo) = box resumen propio + su tabla. */
.pesada-seccion { margin-top: 2.4rem; }
.pesada-seccion:first-child { margin-top: .4rem; }
/* Box de encabezado de sección: diferenciado del resumen general con acento verde. */
.pesada-seccion-box {
  background: #e2ecd9; border: 1px solid #c1d6b3; border-left: 4px solid var(--verde);
  margin-bottom: .4rem; padding-top: .55rem; padding-bottom: .55rem;
}
.pesada-seccion-box .resumen-card--titulo { align-items: flex-start; text-align: left; }
.pesada-seccion-box .resumen-card--titulo .resumen-val-sm {
  color: var(--verde-osc); font-weight: 700; text-transform: capitalize;
}

/* Recría / Terminación — resumen con métricas de peso */
.resumen-val--destacado { color: #1e6f8b; }  /* peso estimado hoy (proyección) */
.chip-warn {
  display: inline-block; font-size: .74rem; font-weight: 600;
  background: #fbeecf; border: 1px solid #efd9a6; color: #8a6d1f;
  border-radius: 999px; padding: .05rem .5rem;
}

/* ==========================================================================
   Preferencias (Configuración) + Cargas iniciales
   ========================================================================== */
.form-ok {
  background: #eef7ef; border: 1px solid #cfe6d2; color: #1e7a2b;
  border-radius: 8px; padding: .55rem .8rem; font-size: .88rem; margin-bottom: .9rem;
}

.pref-section {
  background: #fff; border: 1px solid var(--borde); border-radius: 10px;
  padding: 1.1rem 1.2rem; max-width: 46rem; margin-bottom: 1.1rem;
}
.pref-section-titulo { font-size: 1.05rem; margin: 0 0 .2rem; }

.pref-colores-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: .7rem; margin: .9rem 0 1.1rem;
}
.pref-color {
  display: flex; flex-direction: column; align-items: stretch; gap: .45rem;
  border: 1px solid var(--borde); border-radius: 8px; padding: .4rem .55rem;
}
.pref-color-top { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.pref-color select { width: 100%; font-size: .82rem; padding: .2rem .3rem; }
.pref-color input[type="color"] {
  width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--borde);
  border-radius: 6px; background: none; cursor: pointer; flex: none;
}

.pref-check {
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  margin: .9rem 0 1.1rem;
}
.pref-check input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex: none; cursor: pointer; }

.carga-form-wrap { max-width: 46rem; }

/* Lista de checkboxes en un panel de carga (p. ej. potreros ocupados por un rodeo:
   pueden ser varios a la vez). CheckboxSelectMultiple envuelve cada opción en un
   <div>; el contenedor con scroll es el div que Django pone alrededor de todas. */
.check-lista > div { max-height: 13rem; overflow-y: auto;
  border: 1px solid var(--borde); border-radius: 6px; padding: .35rem .5rem; background: #fff; }
.check-lista label { display: flex; align-items: center; gap: .5rem; padding: .18rem 0;
  cursor: pointer; font-weight: 400; }
.check-lista input[type="checkbox"] { width: 1rem; height: 1rem; flex: none; padding: 0; cursor: pointer; }
.check-lista label.check-anidado { padding-left: 1.6rem; }


/* ==========================================================================
   Ficha individual de animal
   ========================================================================== */
.ficha-link { color: var(--verde-osc); text-decoration: none; font-weight: 600; }
.ficha-link:hover { text-decoration: underline; }

.ficha-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1rem; align-items: start;
}
.ficha-card {
  background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 1.1rem 1.2rem;
}
.ficha-cabecera {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding-bottom: .7rem; margin-bottom: .7rem; border-bottom: 1px solid var(--borde);
}
.ficha-caravana { font-size: 1.35rem; font-weight: 700; }
.ficha-badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ficha-titulo { font-size: 1.05rem; margin: 0 0 .8rem; }

.ficha-dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: 0; }
.ficha-dl dt { color: #6b726a; font-size: .82rem; }
.ficha-dl dd { margin: 0; font-size: .9rem; }

.ficha-gen-bloque { padding: .6rem 0; border-bottom: 1px solid #eef0ec; }
.ficha-gen-bloque:last-child { border-bottom: none; }
.ficha-gen-lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: #6b726a; margin-bottom: .35rem; }

.ficha-rel {
  display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
  color: var(--texto); border: 1px solid var(--borde); border-radius: 999px;
  padding: .2rem .6rem; font-size: .88rem; font-weight: 600;
}
.ficha-rel:hover { border-color: var(--verde); background: #f2f7ee; }
.ficha-rel-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.padre-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.padre-item { border-left: 3px solid var(--borde); padding: .1rem 0 .1rem .6rem; }
.padre-confirmado { border-left-color: var(--verde); }
.padre-atenuado { opacity: .6; }
.padre-nombre { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.padre-meta { font-size: .78rem; }
.padre-check {
  font-size: .72rem; font-weight: 700; color: #1e7a2b; background: #eef7ef;
  border: 1px solid #cfe6d2; border-radius: 4px; padding: 0 .35rem;
}

@media (max-width: 800px) { .ficha-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Animales / Rodeos — selección múltiple + barra de mover
   ========================================================================== */
.col-check { width: 2.2rem; text-align: center; }
.col-check input[type="checkbox"] { cursor: pointer; }
.tabla-movs tbody tr.fila-sel { background: #eef7ef; }

/* Ternero al pie en la carga de una compra: la fila cuelga de la vaca de arriba
   (misma unidad comercial), así que se marca sangrada y con un borde a la
   izquierda en vez de parecer una cabeza más. */
.tabla-movs tbody tr.fila-cria > td:first-child { padding-left: 1.4rem; }
.tabla-movs tbody tr.fila-cria { background: #fbfaf5; box-shadow: inset 3px 0 0 #d8cfa8; }
.cv-fila-acc { display: flex; gap: .3rem; justify-content: flex-end; }

.mover-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem;
  margin-top: .6rem; padding: .7rem .9rem;
  background: #fff; border: 1px solid var(--verde); border-radius: 10px;
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
.mover-count { font-size: .9rem; align-self: center; }
.mover-bar .btn { margin-bottom: 1px; }

/* ==========================================================================
   Preferencias — edad mínima de inspección + Ficha v2 (acciones)
   ========================================================================== */
.pref-edades-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin: .9rem 0 1.1rem; }
.pref-edad { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.pref-edad input[type="number"] { width: 5rem; }

.ficha-acciones-estado {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: .6rem;
}
.ficha-estado-form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ficha-estado-form .ficha-gen-lbl { margin: 0 .3rem 0 0; }

.padre-adn { margin-top: .35rem; }

/* Campo fecha inline (acciones de la ficha: inspección / estado PP / ADN) */
.campo-fecha { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: #52584c; }
.campo-fecha input[type="date"] { font: inherit; padding: .2rem .3rem; }
.padre-adn { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .35rem; }

/* ==========================================================================
   Reproducción (Cabaña) — pestañas Selección / Servicios / Pajuelas / Toros
   ========================================================================== */
.repro-toolbar { display: flex; align-items: center; gap: .8rem; margin: .6rem 0 .3rem; }
.repro-toolbar .nota { margin: 0; }
.repro-subtitulo { font-size: 1rem; margin: 1.2rem 0 .5rem; color: var(--verde-osc); }

/* Chip del grupo asignado en el listado de Selección */
.grupo-chip {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  background: #eef4fb; border: 1px solid #cfe0f2; color: #1b4d6b;
  font-size: .78rem; font-weight: 600;
}

/* Cabecera del grupo elegido en Servicios */
.grupo-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin: .6rem 0 .2rem; flex-wrap: wrap;
}
.grupo-title { font-size: 1.05rem; margin: 0; }
.grupo-head .nota { margin: .15rem 0 0; }
.grupo-acciones { display: flex; gap: .4rem; }

/* Etiqueta de tipo de etapa */
.etapa-tipo {
  display: inline-block; padding: .1rem .5rem; border-radius: 6px;
  font-size: .78rem; font-weight: 700; border: 1px solid var(--borde);
}
.etapa-tipo--iatf { background: #eef7ef; color: #1e7a2b; border-color: #cfe8d3; }
.etapa-tipo--ia_celo { background: #eef4fb; color: #1b4d6b; border-color: #cfe0f2; }
.etapa-tipo--natural { background: #fff8e1; color: #7a5b00; border-color: #e6d18a; }
/* Tacto post-servicio: etapa de seguimiento, no de servicio (color aparte). */
.etapa-tipo--tacto { background: #f3eefb; color: #5b3a86; border-color: #ddd0f0; }
.etapa-tipo--paricion { background: #fdeef4; color: #86325b; border-color: #f0d0e0; }
.etapa-tipo--destete { background: #eef7f6; color: #1e6b66; border-color: #cfe6e3; }

/* Resumen de grupos de la temporada (pestaña Servicios): el nombre del grupo es
   el disparador que despliega su plan abajo. */
.btn-link-grupo {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--verde, #256029);
  display: inline-flex; align-items: center; gap: .3rem;
}
.btn-link-grupo:hover { text-decoration: underline; }
.grupo-caret { font-size: .8em; opacity: .7; }
.tabla-resumen-grupos .fila-abierta { background: #f2f8f2; }
.grupo-head--desplegado { border-top: 2px solid var(--borde); padding-top: .8rem; }

.col-acciones { white-space: nowrap; text-align: right; }
.col-acciones .btn-icono { margin-left: .1rem; }
.btn-icono--danger:hover { background: #fdf1f1; }
.btn-icono[disabled] { opacity: .3; cursor: default; }

/* Selector múltiple de toros (etapa natural) */
.cv-form select[multiple] { min-height: 6.5rem; }

/* =========================================================================
   Recría / Terminación › Ingreso (pestañas Compra + Descarte)
   ========================================================================= */
.ingreso-tabs { display: flex; gap: .3rem; margin-bottom: .9rem; border-bottom: 2px solid var(--borde); }
.ingreso-tab {
  font: inherit; cursor: pointer; background: none; border: none;
  padding: .55rem .95rem; color: #6b726a; font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.ingreso-tab:hover { color: var(--verde-osc); }
.ingreso-tab.active { color: var(--verde-osc); border-bottom-color: var(--verde-osc); }
.ingreso-tab-n {
  display: inline-block; min-width: 1.3em; text-align: center; margin-left: .25rem;
  padding: 0 .35rem; border-radius: 999px; font-size: .78rem;
  background: #e7efe4; color: var(--verde-osc);
}
.ingreso-intro { margin: 0 0 .8rem; max-width: 60ch; }

/* Form de compra (a página completa, no panel lateral) */
.ingreso-compra { height: auto; overflow: visible; }
.cv-bloque-tit { font-weight: 600; font-size: .9rem; color: var(--verde-osc); margin: 0; }
.cv-bloque-opt { font-weight: 400; font-size: .8rem; color: #8a8f84; }
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.cv-campo { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.cv-campo > span { font-weight: 600; color: #52584c; }
.cv-error { color: #b3261e; font-size: .78rem; font-style: normal; }
.cv-hint { color: #8a8f84; font-size: .76rem; font-style: normal; }
.cv-output {
  padding: .45rem .55rem; border: 1px dashed var(--borde); border-radius: 6px;
  background: #f4f6f3; font-variant-numeric: tabular-nums; font-weight: 600;
}
.cv-calc { justify-content: flex-start; }
.cv-acciones { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }

.cv-contador {
  font-size: .85rem; color: #52584c; padding: .4rem .6rem; border-radius: 6px;
  background: #eef4ec; border: 1px solid #d6e4d0;
}
.cv-contador--warn { background: #fff5e6; border-color: #f0d9a8; }
.cv-contador-aviso { color: #a15c00; font-weight: 600; }
.cv-contador-ok { color: var(--verde-osc); font-weight: 700; }

.ingreso-pegar { display: flex; flex-direction: column; gap: .4rem; }
.ingreso-pegar textarea {
  font: inherit; width: 100%; padding: .5rem .55rem;
  border: 1px solid var(--borde); border-radius: 6px; resize: vertical;
}
.ingreso-pegar-acc { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }

.ingreso-caravanas td, .ingreso-pagos td { vertical-align: top; }
.ingreso-caravanas input, .ingreso-caravanas select,
.ingreso-pagos input, .ingreso-pagos select {
  font: inherit; padding: .35rem .45rem; border: 1px solid var(--borde); border-radius: 6px; width: 100%;
}
.ingreso-cheque { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ingreso-cheque input { min-width: 6rem; }
.ingreso-cheque label { font-size: .78rem; color: #6b726a; display: flex; align-items: center; gap: .2rem; }
.ingreso-cheque-cell { min-width: 240px; }

.ingreso-totales {
  display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: flex-end;
  padding: .7rem .9rem; background: #f4f6f3; border: 1px solid var(--borde); border-radius: 8px;
}
.ingreso-total-item { display: flex; flex-direction: column; align-items: flex-end; font-size: .85rem; color: #52584c; }
.ingreso-total-item strong { font-size: 1.05rem; color: var(--verde-osc); font-variant-numeric: tabular-nums; }
.ingreso-saldo--pend strong { color: #a15c00; }

/* Descartar en la ficha de Cabaña */
.ficha-descarte { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--borde); }
.ficha-descarte-editar summary { cursor: pointer; font-weight: 600; color: #52584c; }
.ficha-descarte-editar[open] summary { margin-bottom: .5rem; }
.check-inline { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; }
.check-inline input { width: auto; }

/* =========================================================================
   Sanidad — Protocolos (Config) + Gestión de Sanidad (Recría) + Checklist
   ========================================================================= */
/* Protocolo de ingreso (arriba del listado de protocolos) */
.proto-ingreso { background: #f4f6f3; border: 1px solid var(--borde); border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1rem; }
.proto-ingreso .filtro { max-width: 480px; }
.proto-ingreso .nota { margin: .4rem 0 0; }

.proto-lista { display: flex; flex-direction: column; gap: 1rem; }
.proto-card { border: 1px solid var(--borde); border-radius: 8px; padding: .8rem .9rem; background: #fff; }
.proto-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; }
.proto-nombre { margin: 0; font-size: 1rem; color: var(--verde-osc); display: flex; align-items: center; gap: .4rem; }
.proto-card-acc { display: flex; gap: .3rem; flex-wrap: wrap; }
.proto-pasos td { vertical-align: middle; }
.proto-orden { white-space: nowrap; }
.proto-paso-acc { white-space: nowrap; text-align: right; }
.proto-sin-pasos { margin: .3rem 0 0; }

/* Barra de avance (hub + checklist) */
.san-avance { position: relative; height: 8px; border-radius: 999px; background: #e7efe4; overflow: hidden; min-width: 90px; }
.san-avance--lg { height: 12px; }
.san-avance-bar { height: 100%; background: var(--verde-osc); border-radius: 999px; transition: width .2s; }
.san-avance-cell { display: flex; align-items: center; gap: .5rem; }
.san-vencido { color: #b3261e; font-weight: 600; }

.checklist-sub { margin: -.2rem 0 1rem; }
.checklist-avance { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; max-width: 480px; }
.checklist-avance .san-avance { flex: 1; }
.checklist-tabla td { vertical-align: top; }
.san-fila-ok { background: #f6faf6; }
.san-fila-om { color: #8a8f84; }
.san-cumplir { display: inline-flex; gap: .3rem; align-items: center; margin-right: .3rem; }
.san-cumplir input[type=date] { font: inherit; padding: .2rem .35rem; border: 1px solid var(--borde); border-radius: 6px; }

.san-excepciones { margin-top: .5rem; }
.san-excepciones summary { cursor: pointer; }
.san-exc-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .2rem 0; font-size: .85rem; }
.san-exc-add { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
.san-exc-add select, .san-exc-add input { font: inherit; padding: .3rem .4rem; border: 1px solid var(--borde); border-radius: 6px; }

.san-radios { display: flex; gap: 1rem; }
.san-radios label { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; }

/* Stock de semen — filas agotadas + badges de movimiento */
.fila-agotada { opacity: .55; }
.etapa-tipo--traslado_a_termo { background: #eef4fb; color: #1b4d6b; border-color: #cfe0f2; }
.etapa-tipo--ajuste { background: #fff8e1; color: #7a5b00; border-color: #e6d18a; }
.etapa-tipo--uso { background: #f3eefb; color: #5b3a86; border-color: #ddd0f0; }
.san-fila-acc { display: flex; gap: .3rem; align-items: center; white-space: nowrap; }

/* =========================================================================
   Indicadores de Recría / Terminación
   ========================================================================= */
.ind-filtros { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.ind-pesadas { background: #f4f6f3; border: 1px solid var(--borde); border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1rem; }
.ind-pesadas-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ind-toggle { display: flex; gap: .25rem; }
.ind-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.ind-chip {
  font: inherit; cursor: pointer; background: #fff; border: 1px solid var(--borde);
  border-radius: 6px; padding: .25rem .5rem; font-size: .82rem; white-space: nowrap;
}
.ind-chip:hover { border-color: var(--verde-osc); }
.ind-chip--desde { border-color: var(--verde-osc); background: #eef4ec; box-shadow: inset 3px 0 0 var(--verde-osc); }
.ind-chip--hasta { border-color: #1565c0; background: #eef3fb; box-shadow: inset -3px 0 0 #1565c0; }
.ind-periodo { margin: 0 0 .8rem; }
.ind-cards { margin-bottom: 1rem; }
.ind-subtitulo { font-size: 1rem; margin: 1.4rem 0 .3rem; color: var(--verde-osc); }
.resumen-card--diferido { opacity: .6; }

/* Indicadores de Cabaña › nacimientos por etapa del servicio: una línea por etapa
   (etiqueta · % · cantidad) dentro de la tarjeta. */
.ind-etapas { list-style: none; margin: .1rem 0 .2rem; padding: 0; font-size: .88rem; }
.ind-etapas li { display: flex; align-items: baseline; gap: .35rem; }
.ind-etapas__lbl { flex: 1; }
.ind-etapas__pct { font-weight: 700; }
.ind-etapas__n { color: #6b726a; font-size: .82rem; }
.ind-etapas__sin { color: #6b726a; }

/* Box de período (Producción por ha): el título + rango encabezan la caja que
   contiene las tarjetas del período. */
.periodo-box { border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 1.2rem; }
.periodo-box__head {
  background: #e2ecd9; border-bottom: 1px solid #c1d6b3; border-left: 4px solid var(--verde);
  border-radius: 9px 9px 0 0;
  padding: .55rem .9rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.periodo-box__title { font-size: 1rem; font-weight: 700; color: var(--verde-osc); margin: 0; }
.periodo-box__sub { font-size: .85rem; color: #5b6157; }
.periodo-box__body { padding: 0 .9rem .3rem; }
/* Dentro del box las tarjetas se pegan al encabezado verde (sin margen superior
   propio de .rodeo-resumen) y no necesitan su margen inferior. */
.periodo-box__body .ind-cards { margin-top: 0; margin-bottom: .5rem; }
/* Caja blanca del contenido bajo el encabezado verde: replica el contenedor de las
   tarjetas (.rodeo-resumen) para que la sección de la tabla quede igual a los índices. */
.periodo-box__white {
  background: #fff; border: 1px solid var(--borde); border-top: none;
  border-radius: 0 0 8px 8px; padding: 1rem;
}
.periodo-box__white > :last-child { margin-bottom: 0; }
/* Desglose por potrero: filas padre expandibles + sub-filas de segmento. */
.tabla-movs tr.fila-exp { cursor: pointer; }
.tabla-movs tr.fila-exp:hover { background: #eef4ee; }
.exp-chevron { display: inline-block; width: 1em; color: var(--verde-osc); font-size: .8em; }
.tabla-movs tr.fila-seg > td { background: #f6f8f4; border-bottom: 1px solid #eef0ec; }
.tabla-movs tr.fila-seg .col-detalle { padding-left: 1.6rem; color: #52584c; }
.seg-marca { color: #9aa393; margin-right: .2rem; }

/* Costos y Rentabilidad — matriz de resultado por actividad. */
.tabla-resultado .col-consolidado { background: #eef4ee; font-weight: 600; }
.tabla-resultado thead th.col-consolidado { background: #e2ecd9; }
.tabla-resultado .fila-gasto .col-detalle { padding-left: 1.4rem; color: #52584c; }
.tabla-resultado .fila-gasto-total td { font-weight: 600; border-top: 1px solid var(--borde); }
.tabla-resultado .fila-resultado td { font-weight: 700; border-top: 2px solid var(--borde); font-size: .95rem; }
.tabla-resultado .fila-resultado .monto-neg { color: #b3261e; }
.tabla-resultado .fila-resultado .monto-pos { color: #1e7a2b; }
.tabla-resultado .monto-cero { color: #b8bdb4; }
/* Costos — celdas de margen (rentabilidad por venta) y valorización de stock. */
.col-monto.monto-neg { color: #b3261e; }
.col-monto.monto-pos { color: #1e7a2b; }
.input-precio { width: 6.5rem; text-align: right; padding: .2rem .4rem; font-variant-numeric: tabular-nums; }
.val-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: 1.2rem; padding: .7rem 1rem; background: #e2ecd9;
  border: 1px solid #c1d6b3; border-left: 4px solid var(--verde); border-radius: 8px;
}
.val-total strong { font-size: 1.2rem; color: var(--verde-osc); font-variant-numeric: tabular-nums; }
.tabla-movs tr.fila-compartido > td { background: #eef4fb; }
/* Separador de la sección de aclaraciones al pie del reporte. */
.aclara-sep { border: none; border-top: 1px solid var(--borde); margin: 1.8rem 0 .8rem; }
.form-info {
  background: #eef4fb; border: 1px solid #cfe0f2; color: #1b4a7a;
  border-radius: 8px; padding: .6rem .8rem; margin-bottom: 1rem; font-size: .9rem;
}

/* Modal ancho (historial de stock de semen) */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 1rem;
}
.modal-card {
  background: #fff; border-radius: 10px;
  width: min(780px, 95vw); max-height: 88vh; overflow-y: auto;
  padding: 1.1rem 1.25rem; box-shadow: 0 8px 30px rgba(0,0,0,.28);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.modal-head h2 { font-size: 1.15rem; margin: 0; }
.modal-acciones { display: flex; justify-content: flex-end; margin-top: 1rem; }
.tabla-hist .col-num { text-align: right; white-space: nowrap; }
.tabla-hist .col-comentario { white-space: normal; word-break: break-word; }

/* Venta de Recría: usar pesada del campo + barra de selección colapsable */
.venta-pesada { display: flex; flex-direction: column; gap: .3rem; margin: .3rem 0 .6rem; }
.venta-pesada .filtro { max-width: 420px; }
.venta-sel-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .4rem; }

/* ==========================================================================
   Servicio ejecutado (IATF/IA) — mobile-first (manga) + lista por grupo
   ========================================================================== */
.serv-setup { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-bottom: 1rem; }
.serv-vista { display: flex; gap: .4rem; margin-left: auto; }

.serv-manga { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.serv-control .cv-form { gap: .8rem; }

/* En pantalla ancha (compu), control + panel lado a lado */
@media (min-width: 900px) {
  .serv-manga { grid-template-columns: 400px 1fr; }
}

/* Info "qué pajuela corresponde" — destacada y legible en celular */
.serv-info { min-height: .5rem; }
.serv-vientre { font-size: 1rem; margin: .2rem 0; }
.serv-corresponde {
  background: #eef7ef; border: 1px solid #cfe8d3; border-radius: 10px;
  padding: .7rem .9rem; margin: .3rem 0;
}
.serv-corr-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #1e7a2b; font-weight: 700; }
.serv-corr-toro { font-size: 1.25rem; font-weight: 700; margin: .1rem 0; }
.serv-corr-lote { font-size: .85rem; color: #52584c; }
.serv-corresponde--lista { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }

.serv-alerta { border-radius: 8px; padding: .55rem .8rem; font-size: .9rem; margin: .3rem 0; }
.serv-alerta--bad { background: #fdf1f1; color: #b3261e; border: 1px solid #f2d0d0; }
.serv-alerta--warn { background: #fff8e1; color: #7a5b00; border: 1px solid #e6d18a; }
.serv-alerta--ok { background: #eef7ed; color: #256029; border: 1px solid #c3e0c0; }

.serv-stats { margin-bottom: .6rem; }

/* Botón grande para el pulgar en la manga */
.btn-grande { width: 100%; padding: .9rem 1rem; font-size: 1.05rem; }

/* Inputs cómodos al tacto en el control de manga */
.serv-control input[type="text"], .serv-control input[type="date"], .serv-control select {
  font-size: 1rem; padding: .55rem .6rem;
}
.serv-control .btn-group .btn { flex: 1; padding: .6rem .4rem; }

/* Tacto / diagnóstico de preñez */
.chip-ok {
  display: inline-block; font-size: .74rem; font-weight: 600;
  background: #e6f4ea; border: 1px solid #bfe3c8; color: #2f7d43;
  border-radius: 4px; padding: .05rem .4rem;
}
.tacto-btn-prenada.btn-primary { background: #2f7d43; border-color: #2f7d43; }
.tacto-btn-vacia.btn-primary { background: #8a6d1f; border-color: #8a6d1f; }
.fila-acciones { display: flex; gap: .3rem; align-items: center; justify-content: flex-end; }
.fila-editar td { vertical-align: middle; }
.fila-editar input[type="text"], .fila-editar select { font-size: .9rem; padding: .25rem .35rem; width: 100%; }
.fila-editar .btn-group .btn { padding: .3rem .4rem; }

/* Parto — chips de observaciones (checkbox nativo estilado) */
.btn-group--wrap { flex-wrap: wrap; }
.parto-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0; }
.parto-chip { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 999px; padding: .25rem .7rem;
  font-size: .85rem; background: var(--gris); user-select: none; }
.parto-chip input { margin: 0; }
.parto-chip:has(input:checked) { background: #e6f0ff; border-color: #9cc0f5; color: #1a4d8f; }
.parto-obs-add { display: flex; gap: .4rem; margin-top: .4rem; }
.parto-obs-add input { flex: 1; }

/* Fila atenuada (p. ej. animal ya destetado en la planilla de destete) */
.fila-atenuada { opacity: .55; }

/* Hub de avance del protocolo reproductivo — acción por paso */
.paso-accion { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
/* Acciones del renglón pegadas a la derecha y en una sola línea (hub de Parición:
   fecha + motivo + «No parió» + «Parición»). Sin esto el botón cae abajo y el
   renglón queda del doble de alto. En pantalla angosta vuelve a envolver. */
.paso-accion--der { justify-content: flex-end; }
.paso-accion--der .paso-motivo { width: 11rem; }
@media (min-width: 1100px) { .paso-accion--der { flex-wrap: nowrap; } }
.paso-fecha { font-size: .85rem; padding: .2rem .3rem; }
.col-proto .etapa-proto-nombre { font-weight: 600; }
.col-proto .btn-small { margin-top: .2rem; }

/* ==========================================================================
   Mediciones/DEP — Grupos coetáneos / contemporáneos
   ========================================================================== */
/* El botón de la barra de herramientas se empuja a la derecha */
.repro-toolbar .btn-primary { margin-left: auto; }

/* Contador en vivo del alta de coetáneo */
.contador-vivo {
  margin: .8rem 0; padding: .6rem .8rem; border-radius: 8px;
  background: #eef4fb; border: 1px solid #cfe0f2; color: #1b4d6b;
  font-size: .9rem;
}
.contador-vivo .contador-num { font-size: 1.25rem; font-weight: 700; }

/* Chip de etapa (nacimiento / destete / posdestete) */
.chip-etapa {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  background: #f0ede6; border: 1px solid #d8d2c4; color: #5c5443;
  font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
}

/* Árbol de grupos contemporáneos */
.gc-arbol {
  margin: .6rem 0; padding: .6rem .8rem; border: 1px solid var(--borde, #ddd);
  border-radius: 8px; background: var(--fondo-panel, #fff);
}
.gc-raiz { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.gc-hijo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .4rem; padding: .35rem .6rem; border-left: 2px solid #cfe0f2;
}
.gc-nivel-1 { margin-left: 1rem; }
.gc-nivel-2 { margin-left: 2rem; border-left-color: #d8d2c4; }

/* Analizador de manejo nutricional */
.form-warn {
  margin: .6rem 0; padding: .5rem .8rem; border-radius: 8px;
  background: #fdf6e3; border: 1px solid #eed9a0; color: #7a5b00; font-size: .9rem;
}
/* OJO: esto es el rótulo INLINE del analizador (<label class="campo campo-inline">),
   NO la fila `.campo-inline` de los formularios (105 usos, todos <div>). Iba sin el
   `label` por delante y le pisaba a todas esas filas el ancho de los inputs (9rem,
   más angostos que los <select> de al lado) y el color del rótulo. */
label.campo-inline { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
label.campo-inline span { font-size: .82rem; color: var(--nota, #666); }
label.campo-inline input { width: 9rem; }
.panel-acciones--start { justify-content: flex-start; }
.dieta-lotes { margin: .2rem 0 .2rem 1.2rem; }
.dieta-lotes li { font-size: .88rem; }

/* Agenda de mediciones — chips de estado y contadores */
.chip-scope {
  display: inline-block; margin-left: .4rem; padding: .05rem .4rem; border-radius: 999px;
  background: #eef2f6; border: 1px solid #d5dde5; color: #55606b;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .02em;
}
.agenda-estado {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.agenda-estado--vencida { background: #fdecec; color: #b3261e; border: 1px solid #f2caca; }
.agenda-estado--proxima { background: #fff4e0; color: #8a5a00; border: 1px solid #eed6a3; }
.agenda-estado--sin_urgencia { background: #eef2f6; color: #55606b; border: 1px solid #d5dde5; }
.agenda-estado--completa { background: #eef7ed; color: #256029; border: 1px solid #c3e0c0; }
.agenda-estado--ignorada { background: #f2f2f2; color: #8a8a8a; border: 1px solid #dcdcdc; }
.agenda-estado--informada { background: #eef2f6; color: #5b6b7a; border: 1px solid #d0dae4; }
.agenda-num--vencida { color: #b3261e; }
.agenda-num--proxima { color: #8a5a00; }
.agenda-num--completa { color: #256029; }

/* Indicadores de Cabaña — tabla Crecimiento vs. grupo contemporáneo */
.ind-gc-tabla th { text-align: center; }
.ind-gc-tabla .col-detalle { white-space: nowrap; }
.ind-gc-val { white-space: nowrap; }
.ind-gc-grupo { display: block; font-size: .72rem; }
.ind-gc-delta { white-space: nowrap; font-weight: 600; font-size: .85rem; text-align: center; }
.ind-gc-delta--pos { color: #256029; }
.ind-gc-delta--neg { color: #b3261e; }

/* Reproducción › Simulador de descendencia */
.sim-escenario { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .9rem; }
.sim-bloque {
  border: 1px solid var(--borde); border-radius: 8px; padding: .8rem .9rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.sim-bloque .filtro { width: 100%; }
.sim-bloque select { width: 100%; }
.sim-acciones { display: flex; gap: .9rem; align-items: flex-end; flex-wrap: wrap; margin: .9rem 0 1rem; }
.sim-resumen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Semáforo de la matriz: el color lo define el UMBRAL elegido, no los veredictos
   fijos de consanguinidad.py, para que coincida con el % de cobertura. */
.sim-ok { background: #eef7ef; }
.sim-medio { background: #fdf6e3; }
.sim-no { background: #fdf1f1; color: #b3261e; font-weight: 600; }
.sim-leyenda { display: inline-block; border: 1px solid var(--borde); border-radius: 4px; padding: 0 .35rem; }
.sim-matriz th, .sim-matriz td { text-align: center; white-space: nowrap; }
.sim-matriz .col-detalle { text-align: left; }
.sim-matriz td { font-size: .82rem; padding: .2rem .35rem; }
.sim-grupo { border-left: 2px solid var(--borde); }

/* ==========================================================================
   Dieta / Suplementación (app pastoreo)
   ========================================================================== */
.ds-bloque { margin-bottom: 1.6rem; }
.ds-bloque-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.ds-bloque-head h2 { margin: 0; font-size: 1.05rem; }
.ds-rot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.ds-rot-card { border: 1px solid var(--borde); border-radius: 8px; padding: .7rem .8rem; background: var(--panel, #fff); }
.ds-rot-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.ds-rot-body { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .5rem; }
.ds-rot-linea { display: flex; align-items: center; gap: .4rem; }
.ds-rot-rodeos { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.ds-rot-foot { display: flex; gap: .4rem; flex-wrap: wrap; }
.tabla-ds { width: 100%; border-collapse: collapse; }
.tabla-ds th, .tabla-ds td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-ds th { font-size: .8rem; color: var(--muted, #666); font-weight: 600; }
.tabla-ds .pill { margin: 0 .2rem .2rem 0; }
.ds-acciones { white-space: nowrap; }
.ds-grupo-ubic td { background: var(--fondo-alt, #f4f4f4); font-weight: 600; font-size: .85rem; padding: .35rem .5rem; }
.btn-plano { background: transparent; border: 1px solid var(--borde); }
.cv-panel-in { padding: .4rem; }
.ds-fs { border: 1px solid var(--borde); border-radius: 6px; padding: .5rem .6rem; margin: 0 0 .7rem; }
.ds-fs legend { font-size: .8rem; font-weight: 600; color: var(--muted, #666); padding: 0 .3rem; }
.ds-check { display: block; padding: .12rem 0; font-size: .9rem; cursor: pointer; }
.ds-field { display: block; margin: 0 0 .7rem; font-size: .85rem; }
.ds-field input { display: block; width: 100%; margin-top: .2rem; }
.ds-piquetes { max-height: 200px; overflow-y: auto; margin-top: .35rem; padding-left: .3rem; border-left: 2px solid var(--borde); }
.ds-form-foot { display: flex; gap: .5rem; margin-top: .3rem; }
.ds-comp-row { display: flex; gap: .35rem; align-items: center; margin-bottom: .35rem; }
.ds-comp-row select { flex: 1 1 auto; min-width: 0; }
.ds-comp-row input { width: 6.5rem; }
.ficha-dieta { display: flex; flex-direction: column; gap: .4rem; }
.ficha-dieta .nota { margin-right: .4rem; }
.btn-danger { background: transparent; border: 1px solid var(--rojo, #c0392b); color: var(--rojo, #c0392b); }

/* --- Marca de campo opcional: asterisco verde + aclaracion al pie del form ---
   Va con .campo/.campo-inline por delante porque `.campo-inline span` pinta de
   gris todo span de esos rotulos y le ganaria a un `.opc` suelto. */
.opc, .campo .opc, .campo-inline .opc, .opc-nota .opc {
  color: var(--verde); font-weight: 700; font-style: normal; margin-left: .15rem;
}
.opc-nota { color: #6b726a; font-style: italic; font-size: .82rem; margin: .1rem 0 .6rem; }

/* ==========================================================================
   Configuración › Usuarios (usuarios, roles y permisos)
   ========================================================================== */

/* Las solapas son <a> (cada una con su URL): hay que sacarles el subrayado y el
   color de link para que se vean igual que las de botón. */
a.rodeo-tab { text-decoration: none; }
a.rodeo-tab.active { color: var(--verde-osc); }

.usuario-nombre { font-weight: 600; }
.usuario-meta { font-size: .78rem; color: #6b726a; }
.usuarios-tabla td, .roles-tabla td { vertical-align: middle; }
.fila-atenuada { opacity: .55; }

/* Switch activo/inactivo de la lista de usuarios. */
.switch-form { display: inline; }
.switch {
  width: 38px; height: 20px; padding: 2px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borde); background: #e3e6e2; vertical-align: middle;
  display: inline-flex; align-items: center; transition: background .15s ease;
}
.switch-bolita {
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease;
}
.switch-on { background: var(--verde); border-color: var(--verde); }
.switch-on .switch-bolita { transform: translateX(18px); }
.switch[disabled] { opacity: .4; cursor: default; }

.btn-icono--off { opacity: .25; cursor: default; }

/* Puntos de «acceso a secciones» en la tabla de roles: uno por sección, con el
   color de la sección. Lleno = completa, tenue = parcial, gris = sin acceso. */
.acceso-puntos { display: flex; gap: 4px; margin-bottom: .2rem; }
.acceso-punto {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  background: var(--punto, #999);
}
.acceso-punto--parcial { opacity: .38; }
.acceso-punto--sin { background: #dfe2da; }
.acceso-leyenda { font-size: .78rem; color: #6b726a; display: flex; align-items: center; gap: .35rem; }

/* Alta / edición de usuario: formulario + columna de estado y acciones. */
.usuario-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.usuario-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; }
.usuario-form-side .config-seccion { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: .8rem; }
.usuario-form-main .config-seccion { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: .8rem; }
.usuario-form .campo-check { display: flex; align-items: center; gap: .45rem; }
.usuario-form .campo-check input { width: auto; }

/* Alta / edición de rol: datos a la izquierda, árbol de permisos a la derecha. */
.rol-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1rem; align-items: start; }
.rol-datos .config-seccion, .rol-permisos {
  background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: .8rem;
}
.rol-contador { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; }
.rol-contador strong { font-variant-numeric: tabular-nums; }

.perm-seccion { border-top: 1px solid var(--borde); }
.perm-seccion:first-of-type { border-top: none; }
.perm-seccion-head { display: flex; align-items: center; gap: .5rem; padding: .45rem .2rem; }
.perm-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .9rem; flex: 1; }
.perm-check input { width: auto; }
.perm-check--hijo { padding: .25rem 0 .25rem 2.1rem; font-size: .85rem; }
/* Tercer nivel del árbol (Cabaña › Registros / Programa E.R.A.): se contrae y
   expande como la sección, con su propio contador. */
.perm-grupo-head { display: flex; align-items: center; gap: .5rem; }
.perm-grupo-head .perm-check--hijo { flex: 1; }
.perm-grupo-label { font-weight: 600; color: #3a4034; }
.perm-nietos { border-left: 2px solid #e1e6dd; margin-left: 2.5rem; }
.perm-check--nieto { padding: .22rem 0 .22rem 1.4rem; font-size: .82rem; color: #4a5044; }
.perm-check--lock { cursor: default; color: #8a9083; }
.perm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--punto, #999); flex: 0 0 auto; }
.perm-label { font-weight: 600; }
.perm-n { font-size: .75rem; color: #6b726a; font-variant-numeric: tabular-nums; }
.perm-caret {
  border: none; background: none; cursor: pointer; color: #6b726a; font-size: .9rem;
  padding: 0 .3rem; transition: transform .15s ease;
}
.perm-caret.open { transform: rotate(90deg); }
.perm-hijos { padding-bottom: .4rem; }

/* Matriz de comparación (solapa Permisos). */
.permisos-tabla .permisos-col { text-align: center; text-transform: uppercase; font-size: .75rem; }
.permisos-celda { text-align: center; font-weight: 700; }
.permisos-celda--si { color: #1e7a2b; }
.permisos-celda--parcial { color: var(--amarillo); }
.permisos-celda--no { color: #c9ccc6; }
/* Las pantallas de una sección van indentadas y colgando de una guía vertical
   que arranca en el ▸ del título: así se ve de un vistazo dónde empieza y dónde
   termina cada grupo (la matriz es larga y todas las filas se parecen). */
.permisos-seccion > td { border-top: 1px solid var(--borde); }
.permisos-pantalla > td { font-size: .82rem; background: #fafbf9; border-bottom-color: #f1f3ef; }
.permisos-hijo { padding-left: 3.1rem !important; color: #4a5044; position: relative; }
.permisos-hijo::before {
  content: ''; position: absolute; left: 1.45rem; top: 0; bottom: 0;
  border-left: 2px solid #e1e6dd;
}
/* La última pantalla corta la guía a la mitad: ahí cierra el grupo. */
.permisos-pantalla--ultima .permisos-hijo::before { bottom: 50%; }
.permisos-hijo::after {
  content: ''; position: absolute; left: 1.45rem; top: 50%; width: .9rem;
  border-top: 2px solid #e1e6dd;
}
/* Tercer nivel (Cabaña › Registros / Programa E.R.A.): las pantallas del
   subgrupo cuelgan de SU propia guía, y la de la sección sigue de largo por
   detrás — dibujada como fondo porque las dos pseudo-clases ya están usadas. */
.permisos-nieto { padding-left: 5.5rem !important; }
.permisos-nieto::before, .permisos-nieto::after { left: 3.4rem; }
.permisos-nieta--ultima .permisos-nieto::before { bottom: 50%; }
/* Va con la misma especificidad que `.permisos-pantalla > td` (que pinta el
   fondo con el atajo `background` y si no le ganaría, borrando esta guía). */
.permisos-pantalla > td.permisos-nieto {
  background-color: #fafbf9;
  background-image: linear-gradient(#e1e6dd, #e1e6dd);
  background-size: 2px 100%; background-position: 1.45rem 0; background-repeat: no-repeat;
}
/* Si el subgrupo es lo último de la sección, ahí también cierra su guía. */
.permisos-pantalla--ultima > td.permisos-nieto { background-size: 2px 50%; }

/* Casilla al lado de un campo dentro de una fila `.campo-inline`: se alinea con
   el input (no con el rótulo, que va una línea más arriba) y ocupa lo suyo. */
.campo-check-fila { align-self: flex-end; margin-bottom: .5rem; flex: 0 0 auto; }

/* --- Selector con buscador (partials/_select_buscador.html) --- */
.bsc { position: relative; display: block; }
.bsc-input { width: 100%; box-sizing: border-box; }
.bsc-input.bsc-elegido { font-weight: 500; }
.bsc-limpiar {
  position: absolute; top: 0; right: 0; height: 100%; width: 1.9rem;
  background: none; border: none; cursor: pointer; color: #6b726a;
  font-size: 1.1rem; line-height: 1; padding: 0;
}
.bsc-limpiar:hover { color: #333; }
.bsc-lista {
  position: absolute; z-index: 40; top: calc(100% + 2px); left: 0; right: 0;
  max-height: 15rem; overflow-y: auto; margin: 0; padding: .2rem;
  list-style: none; background: #fff; font-weight: 400;
  border: 1px solid var(--borde); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.bsc-opcion { padding: .35rem .5rem; border-radius: 4px; cursor: pointer; font-size: .88rem; }
.bsc-opcion:hover { background: var(--gris); }
.bsc-vacio { padding: .35rem .5rem; font-size: .85rem; color: #6b726a; font-style: italic; }

/* --- Pago/cobro agrupado: selección en la cuenta corriente y reparto ------ */
/* Columna de tildado de la cuenta corriente (Proveedores / Clientes). */
.tabla-movs .col-check { width: 2rem; text-align: center; padding-right: 0; }
.tabla-movs .col-check input[type="checkbox"] { cursor: pointer; margin: 0; }

/* Vista previa de cómo se imputa el monto (del comprobante más viejo al más nuevo). */
.tabla-reparto { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: .4rem; }
.tabla-reparto th {
  text-align: left; font-weight: 600; color: var(--texto-suave, #6b7280);
  border-bottom: 1px solid var(--borde, #e5e7eb); padding: .25rem .35rem;
}
.tabla-reparto td { padding: .25rem .35rem; border-bottom: 1px solid var(--borde-suave, #f1f3f5); }
.tabla-reparto .col-monto { text-align: right; white-space: nowrap; }
/* El comprobante que el monto no llega a tocar: queda debiendo entero. */
.tabla-reparto .reparto-sin-tocar { opacity: .5; }