/* version actual: style.css?v=1.0.9 */

/* Estilos para dispositivos móviles */
body {
  font-family: Arial, sans-serif;
  /*background-color:blanchedalmond;*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  z-index: -999;
}

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  background: linear-gradient(180deg,#b7fab4 30%, #f1fcf1 100%);
	z-index: -1; /* Coloca la imagen detrás del contenido */
}

.table-container {
	max-height: 350px; /* Define el alto máximo */
	overflow-y: auto;  /* Habilita la barra de desplazamiento vertical */
}
.table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 10px;
}
.table thead th{
	background-color: beige;
}
.table th, .table td {
	border: 1px solid #ccc;
	padding: 10px;
	/*text-align: left;*/
}
.table th {
	background-color: #f9f9f9;
}
.th-centrar {
	text-align: center;
}
.th-derecha {
	text-align: right;
}

.alerta {
	position: absolute;
	top: -30px; /* Ajustar la posición relativa */
	left: 0;
	background-color: rgb(239, 248, 171);
	padding: 5px;
	z-index: 1000;
	display: none; /* Inicia oculto */
}
/* Triángulo abajo izquierda */
.alerta.aba-izq::after {
	content: '';
	position: absolute;
	top: 100%; /* Coloca el triángulo debajo del tooltip */
	left: 20px; /* Ajusta para centrar sobre el ícono o la posición deseada */
	border-width: 10px;
	border-style: solid;
	border-color: rgb(239, 248, 171) transparent transparent transparent; /* Triángulo hacia abajo */
}
/* Triángulo abajo derecha */
.alerta.aba-der::after {
	content: '';
	position: absolute;
	top: 100%;
	right: 20px;
	border-width: 10px;
	border-style: solid;
	border-color: rgb(239, 248, 171) transparent transparent transparent;
}
/* Triángulo arriba izquierda */
.alerta.arr-izq::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 20px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent transparent rgb(239, 248, 171) transparent;
}
/* Triángulo arriba derecha */
.alerta.arr-der::after {
	content: '';
	position: absolute;
	bottom: 100%;
	right: 20px;
	border-width: 10px;
	border-style: solid;
	border-color: transparent transparent rgb(239, 248, 171) transparent;
}
/* Alertas */
/* Fondo de superposición */
.alerta-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
/* Caja de la alerta */
.alerta-caja {
    background: white;
    border-radius: 10px;
    /*width: 90%;*/
	min-width: 400px;
    max-width: 80%;
	max-height: 80%;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: aparecer 0.3s ease-in-out;
}
/* Encabezado */
.alerta-encabezado {
    font-size: 1.5rem;
    /*color: #d9534f; /* Rojo */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    font-weight: bold;
}
/* Cuerpo */
.alerta-cuerpo-interior{
	max-height: 50vh;
	overflow-y: auto;
}
.alerta-cuerpo p {
    font-size: 1rem;
    color: #555;
    margin: 0;
}
.alerta-cuerpo input {
	box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el ancho total */
	width: 80%;
	margin: auto; /* Lo centra en su contenedor */
	margin-top: 10px;
	padding: 8px;
	background-color: #f8fdf5;
	border: 1px solid #ccc;
	border-radius: 4px;
}
/* Pie con el botón */
.alerta-pie {
    margin-top: 20px;
}
.btn-alerta-red {
	min-width: 100px;
    background: #d9534f; /* Rojo */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}
.btn-alerta-red:hover {
    background: #c9302c;
}
.btn-alerta-blue {
	min-width: 100px;
    background: #4f58d9; /* Azul */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}
.btn-alerta-blue:hover {
    background: #2c2cc9;
}
.btn-alerta-green {
	min-width: 100px;
    background: #64d94f; /* Verde */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}
.btn-alerta-green:hover {
    background: #51c92c;
}
/* Animación de aparición */
@keyframes aparecer {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
#msg-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Color y opacidad del overlay */
    z-index: 9999; /* Asegúrate de que sea superior al de otros elementos */
    /*display: none; /* Inicialmente oculto */
    display: flex; /* Flexbox para centrar el loader */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}
.msg-alert-box {
	border: 1px solid #747474;
	border-radius: 5px;
	padding: 20px;
	align-items: center;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	background-color: white;
}
.msg-alert-box img {
	width: 70px;
	height: 70px;
	border-radius: 3px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
	/* loadding spinner */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Color y opacidad del overlay */
    z-index: 9990; /* Asegúrate de que sea superior al de otros elementos */
    /*display: none; /* Inicialmente oculto */
    display: flex; /* Flexbox para centrar el loader */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}
.loader {
	color: darkgreen;
	font-size: 10px;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: relative;
	text-indent: -9999em;
	animation: mulShdSpin 1.3s infinite linear;
	transform: translateZ(0);
	margin: auto;
	top: 40px;
	z-index: 10000;
  }
  
  @keyframes mulShdSpin {
	0%,
	100% {
	  box-shadow: 0 -3em 0 0.2em, 
	  2em -2em 0 0em, 3em 0 0 -1em, 
	  2em 2em 0 -1em, 0 3em 0 -1em, 
	  -2em 2em 0 -1em, -3em 0 0 -1em, 
	  -2em -2em 0 0;
	}
	12.5% {
	  box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 
	  3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, 
	  -2em 2em 0 -1em, -3em 0 0 -1em, 
	  -2em -2em 0 -1em;
	}
	25% {
	  box-shadow: 0 -3em 0 -0.5em, 
	  2em -2em 0 0, 3em 0 0 0.2em, 
	  2em 2em 0 0, 0 3em 0 -1em, 
	  -2em 2em 0 -1em, -3em 0 0 -1em, 
	  -2em -2em 0 -1em;
	}
	37.5% {
	  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
	   3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, 
	   -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
	}
	50% {
	  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
	   3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, 
	   -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
	}
	62.5% {
	  box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
	   3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, 
	   -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
	}
	75% {
	  box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 
	  3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
	  -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
	}
	87.5% {
	  box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 
	  3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
	  -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
	}
  }

  @media (max-width: 600px) {
	body::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/*background-image: url("Imagenes/fondo_movil.jpeg");*/
		background-repeat: no-repeat;
		background-size:cover; /* Mantiene la proporción original */
		background-position: center;
		opacity: 0.5; /* 50% de transparencia */
		z-index: -1; /* Coloca la imagen detrás del contenido */
	}
	.table{
		margin-left: -5px;
		margin-right: -5px;
		font-size: 10px;
	}
	.table header{
		font-size: 5px;
	}
	.table th, .table td {
		padding: 5px;
	}
	.alerta-caja {
		min-width: 0; /* Elimina el ancho mínimo */
	}
}

/* =========================================================
   baquía - Fullnest-like UI (Base)
   Version: 1.0.2
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;

  --brand:#2563eb;
  --brand-2:#60a5fa;

  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;

  --r:18px;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --shadow2:0 6px 18px rgba(15,23,42,.10);
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
}
a{ color:inherit; text-decoration:none; }

/* Evita selecciones accidentales al desplazar las pantallas de la aplicación. */
body.sin-seleccion {
  -webkit-user-select:none;
  user-select:none;
}
body.sin-seleccion input,
body.sin-seleccion textarea,
body.sin-seleccion [contenteditable="true"] {
  -webkit-user-select:text;
  user-select:text;
}

/* ---------- Layout ---------- */
.app{
  margin:0 auto;
  padding:10px 14px 50px;
  /*max-width:1200px; /* si querés full ancho, sacalo */
}

.grid{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
  margin-top:0;
}
@media (min-width: 980px){
  .grid{ grid-template-columns:1.1fr .9fr; align-items:start; }
  .grid.grid-secondary-wide{ grid-template-columns:.8fr 1fr; }
}

/* Responsive rows helper */
.row{ display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width:520px){
  .row.cols-2{ grid-template-columns:1fr 1fr; }
  .row.cols-3{ grid-template-columns:1fr 1fr 1fr; }
  .row.cols-4{ grid-template-columns:1fr 1fr 1fr 1fr; }
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  backdrop-filter:blur(8px);
  background:rgba(245,247,251,.85);
  border-bottom:1px solid rgba(229,231,235,.75);
}
.topbar-inner{
  margin:0 auto;
  padding: 5px 14px;
  /*max-width:1200px;*/
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:var(--shadow2);
  display:grid; place-items:center;
  color:#fff; font-weight:950;
}
.title-wrap{ display:flex; flex-direction:column; gap:2px; }
.title{ font-weight:950; letter-spacing:.2px; }
.sub{ font-size:12px; color:var(--muted); font-weight:700; }

.top-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-h{
  padding:14px 14px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--line);
}
.card-title{ display:flex; align-items:center; gap:10px; font-weight:950; }
.icon{
  width:34px; height:34px; border-radius:12px;
  background:#eef2ff;
  display:grid; place-items:center;
  color:var(--brand);
}
.card-b{ padding:14px; }

/*.card-disabled {
  position: relative;
  opacity: 0.8;
}

.card-disabled .card-b {
  pointer-events: none;
}

.card-disabled .card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  z-index: 5;
  text-align: center;
  padding: 16px;
}

.card-disabled .card-overlay i {
  font-size: 20px;
  color: #888;
}*/
.card-disabled {
  position: relative;
}

/* apaga SOLO el contenido real */
.card-disabled .card-b {
  pointer-events: none;
  filter: grayscale(0.4) brightness(0.9);
}

/* overlay completamente sólido */
.card-disabled .card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.85); /* más opaco */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #374151; /* gris sólido */
  z-index: 5;
  text-align: center;
  padding: 16px;
  backdrop-filter: blur(2px);
}

/* ícono sólido */
.card-disabled .card-overlay i {
  font-size: 30px;
  color: #2563eb; /* azul sólido (o el color que uses) */
}


/* ---------- Forms ---------- */
label{
  font-size:12px;
  font-weight:850;
  color:var(--muted);
  display:block;
  margin-bottom:6px;
}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fbfdff;
  border-radius:14px;
  padding:12px 12px;
  font-size:16px;
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
  background:#fff;
}
textarea{ min-height:90px; resize:vertical; }

.req::after{ content:" *"; color:var(--danger); font-weight:950; }

.help{ font-size:12px; color:var(--muted); margin-top:6px; font-weight:650; }

/* ---------- Buttons ---------- */
.btn{
  border:0;
  border-radius:14px;
  padding:12px 14px;
  font-weight:950;
  font-size:15px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 10px 20px rgba(15,23,42,.08);
}
.btn-primary{ background:var(--brand); color:#fff; }
.btn-ghost{ background:#eef2ff; color:#1e3a8a; }
.btn-soft{ background:#f8fafc; color:#0f172a; border:1px solid var(--line); box-shadow:none; }
.btn-danger{ background:#fee2e2; color:#991b1b; }
.btn-outline{ background:#fff; border:1px solid var(--line); box-shadow:none; color:#0f172a; }
.btn-exit{ background: red; color:#fff; }

.btn-small{ padding:10px 12px; font-size:14px; border-radius:12px; box-shadow:none; }

/* ---------- Pills ---------- */
.pills{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:#f8fafc;
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
}
.pills-inline{
  display:flex;
  align-items:center;
  gap:8px;
}
.dot{ width:10px; height:10px; border-radius:50%; background:#94a3b8; }
/*.dot.ok{ background:var(--ok); }*/
.dot.ok   { background:#2ecc71; }
.dot.warn { background:#f39c12; }
.dot.bad  { background:#e74c3c; }
.dot.info { background:#3498db; }

/* ---------- Lists / Items ---------- */
.list{ display:grid; gap:10px; }
.item{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:#fff;
  display:grid;
  gap:8px;
}
.item-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.item-title{ font-weight:950; }
.muted{ color:var(--muted); font-size:13px; }
.item-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.orden-carga{
  margin-right:8px;
  padding:4px 8px;
  font-size:12px;
  vertical-align:middle;
}
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}

/* ---------- Separators ---------- */
.sep{ height:1px; background:var(--line); margin:12px 0; }

/* ---------- Switch row ---------- */
.switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfdff;
}
.switch strong{ font-weight:950; }
.switch input{ width:22px; height:22px; }

/* ---------- KPI boxes ---------- */
.kpi{ display:grid; gap:10px; grid-template-columns:1fr; }
@media(min-width:520px){ .kpi{ grid-template-columns:1fr 1fr; } }
.kpi .box{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fbfdff;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.kpi .box strong{ font-weight:950; }
.kpi .box .v{ font-weight:950; font-size:20px; }

/* ---------- Items-box (bloque destacado) ---------- */
.items-box{
  border:1px dashed #cbd5e1;
  border-radius:16px;
  padding:12px;
  background:#f8fafc;
  display:grid;
  gap:10px;
}

/* ---------- Producto row (2 cols desktop, 1 col mobile) ---------- */
.prod-row{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
@media(min-width:720px){
  .prod-row{
    grid-template-columns: minmax(0,1fr) auto;
    align-items:stretch;
  }
}
.prod-left .dose-row{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
  margin-top:10px;
}
@media(min-width:720px){
  .prod-left .dose-row{ grid-template-columns:1fr 1fr; }
}

.prod-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:end;
  justify-content:flex-end;
}
@media(min-width:720px){
  .prod-actions{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-end;
    height:100%;
    min-width:0;
    width:auto;
  }
  .prod-actions .btn{ width:100%; }
}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(15,23,42,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:60;
}
.modal{
  width:min(920px,100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(15,23,42,.25);
  overflow:hidden;
}
.modal-h{
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.modal-title{ display:flex; align-items:center; gap:10px; font-weight:950; }
.modal-b{ 
  padding:14px; 
  max-height:70vh; 
  overflow-y:auto;
}
.modal-f{
  padding:14px;
  border-top:1px solid var(--line);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  background:#fbfdff;
}
.hint{
  border:1px solid #c7d2fe;
  background:#eef2ff;
  color:#1e3a8a;
  padding:10px 12px;
  border-radius:16px;
  font-weight:800;
  font-size:13px;
}

/* ---------- Accordion / details ---------- */
.details{
  display:none;
  border-top:1px solid var(--line);
  padding-top:10px;
}
.details.open{ display:block; }
.prod-mini{ display:grid; gap:8px; }
.prod-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfdff;
  font-weight:800;
}
.prod-line .muted{ font-weight:700; }

/* ---------- Note snippet ---------- */
.note-snippet{
  border:1px dashed #cbd5e1;
  border-radius:14px;
  padding:10px;
  background:#f8fafc;
  font-size:13px;
  color:var(--muted);
  font-weight:750;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 719px){
  .top-actions{ gap:2px; }
  .btn-text{ display:none; } /* ícono-only en mobile */

  /* si querés compactar botones de acciones en items */
  .item-actions .btn{ padding:10px; gap:0; }
}

.input-error {
  border-color: #ef4444 !important;
  background: #fff5f5;
}

.input-error:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.25);
}

.field-hint {
  margin-top: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #dc2626;
}

/* =========================================================
   baquía - Menú lateral final
   ========================================================= */

.agro-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.38);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.agro-menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.agro-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 330px;
  max-width: 90vw;
  height: 100dvh;
  background: var(--card);
  z-index: 901;
  transform: translateX(-105%);
  transition: transform .22s ease;
  box-shadow: 0 24px 70px rgba(15,23,42,.28);
  border-radius: 0 24px 24px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.agro-menu.open {
  transform: translateX(0);
}

.agro-menu-header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,#fff,#fbfdff);
}

.agro-menu-brand {
  flex: 1;
  min-width: 0;
}

.agro-menu-title {
  font-weight: 950;
  font-size: 17px;
  color: var(--text);
}

.agro-menu-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 750;
  margin-top: 2px;
}

.agro-menu-close {
  flex: 0 0 auto;
}

.agro-menu-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.agro-menu-section-title {
  font-size: 11px;
  font-weight: 950;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 12px 10px 7px;
}

.agro-menu-link {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.agro-menu-link:hover {
  background: #f8fafc;
  border-color: var(--line);
}

.agro-menu-link.active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #1e3a8a;
}

.agro-menu-link > i {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  color: var(--brand);
  font-size: 17px;
  flex: 0 0 auto;
}

.agro-menu-link.active > i {
  background: #dbeafe;
}

.agro-menu-link span {
  flex: 1;
  min-width: 0;
}

.agro-menu-link strong {
  display: block;
  font-size: 14px;
  font-weight: 950;
}

.agro-menu-link small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 700;
}

.agro-menu-link em {
  color: #f59e0b;
  font-style: normal;
}

.agro-menu-suggest {
  opacity: .82;
  border: 1px dashed #cbd5e1;
  background: #fbfdff;
}

.agro-menu-suggest > i {
  color: #64748b;
  background: #f8fafc;
}

.agro-menu-footer {
  padding: 12px;
  border-top: 1px solid var(--line);
  background: #fbfdff;
}

.agro-menu-user {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  margin-bottom: 10px;
}

.agro-menu-user strong {
  display: block;
  font-size: 14px;
  font-weight: 950;
}

.agro-menu-user span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 719px) {
  .agro-menu {
    width: 315px;
  }

  .agro-menu-link {
    padding: 13px 12px;
  }
}