/* ==========================================================================
   Estilos corporativos Ingeplant
   ========================================================================== */

@keyframes cargando {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

@keyframes entrada-aviso {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Scrollbars discretas --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #EDEBEC; }
::-webkit-scrollbar-thumb { background: #B4B0B1; border-radius: 6px; border: 2px solid #EDEBEC; }
::-webkit-scrollbar-thumb:hover { background: #6B6668; }

/* --- Navegación lateral --- */
.enlace-menu {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .875rem; margin-bottom: .125rem;
  border-radius: .75rem; font-size: .875rem; font-weight: 500;
  color: #3F3B3C; transition: all .15s ease;
}
.enlace-menu:hover { background: #F1FAF3; color: #0B7A37; }
.enlace-menu.activo { background: #199E46; color: #fff; box-shadow: 0 2px 8px rgba(25,158,70,.28); }
.enlace-menu.activo:hover { background: #128C3F; color: #fff; }
.enlace-menu i { width: 1.15rem; text-align: center; font-size: .95rem; }

.grupo-menu {
  padding: 1rem .875rem .375rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #B4B0B1;
}

/* --- Tarjetas --- */
.tarjeta {
  background: #fff; border: 1px solid #EDEBEC; border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(35,31,32,.06);
}
.tarjeta-kpi { padding: 1.125rem; }
@media (min-width: 640px) { .tarjeta-kpi { padding: 1.25rem; } }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .5625rem 1rem; border-radius: .75rem;
  font-size: .875rem; font-weight: 600; white-space: nowrap;
  transition: all .15s ease; cursor: pointer; border: 1px solid transparent;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primario   { background: #199E46; color: #fff; }
.btn-primario:hover:not(:disabled)   { background: #128C3F; }
.btn-secundario { background: #1F5FA0; color: #fff; }
.btn-secundario:hover:not(:disabled) { background: #1A5290; }
.btn-neutro     { background: #fff; color: #3F3B3C; border-color: #B4B0B1; }
.btn-neutro:hover:not(:disabled)     { background: #EDEBEC; }
.btn-peligro    { background: #DC2626; color: #fff; }
.btn-peligro:hover:not(:disabled)    { background: #B91C1C; }
.btn-sm { padding: .375rem .625rem; font-size: .8125rem; border-radius: .625rem; }

/* --- Formularios --- */
.campo {
  width: 100%; padding: .5625rem .75rem;
  border: 1px solid #B4B0B1; border-radius: .75rem;
  font-size: .875rem; color: #231F20; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.campo:focus { outline: none; border-color: #199E46; box-shadow: 0 0 0 3px rgba(25,158,70,.15); }
.campo:disabled { background: #EDEBEC; color: #6B6668; }
.etiqueta { display: block; margin-bottom: .3125rem; font-size: .8125rem; font-weight: 600; color: #3F3B3C; }
.ayuda { margin-top: .25rem; font-size: .75rem; color: #6B6668; }

/* --- Tablas --- */
.tabla-envoltorio { overflow-x: auto; border-radius: 1rem; border: 1px solid #EDEBEC; background: #fff; -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .8125rem; }
table.tabla thead th {
  position: sticky; top: 0; z-index: 1;
  background: #F1FAF3; color: #08602B;
  padding: .625rem .75rem; text-align: left;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; border-bottom: 1px solid #A7E0AC;
}
table.tabla tbody td { padding: .5625rem .75rem; border-bottom: 1px solid #EDEBEC; vertical-align: middle; }
table.tabla tbody tr:last-child td { border-bottom: none; }
table.tabla tbody tr:hover { background: #F1FAF3; }
table.tabla tfoot td { padding: .625rem .75rem; background: #EDEBEC; font-weight: 700; border-top: 2px solid #B4B0B1; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- Insignias --- */
.insignia {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .125rem .5rem; border-radius: 9999px;
  font-size: .6875rem; font-weight: 700; white-space: nowrap;
}
.insignia-verde   { background: #DFF4E2; color: #08602B; }
.insignia-azul    { background: #DCEAF7; color: #14406E; }
.insignia-ambar   { background: #FEF3C7; color: #92400E; }
.insignia-roja    { background: #FEE2E2; color: #991B1B; }
.insignia-gris    { background: #EDEBEC; color: #3F3B3C; }

/* --- Avisos (toasts) --- */
.aviso {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .875rem 1rem; border-radius: .875rem;
  box-shadow: 0 8px 24px rgba(35,31,32,.16);
  animation: entrada-aviso .2s ease-out; font-size: .875rem;
}
.aviso-exito { background: #DFF4E2; color: #08602B; border: 1px solid #A7E0AC; }
.aviso-error { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.aviso-info  { background: #DCEAF7; color: #14406E; border: 1px solid #9CC6E8; }
.aviso-alerta{ background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }

/* --- Zona de arrastre de archivos --- */
.zona-archivo {
  border: 2px dashed #B4B0B1; border-radius: 1rem;
  padding: 2rem 1.25rem; text-align: center;
  background: #fff; transition: all .18s ease; cursor: pointer;
}
.zona-archivo:hover, .zona-archivo.activa { border-color: #199E46; background: #F1FAF3; }

/* --- Contenedor de gráficas --- */
.caja-grafica { position: relative; width: 100%; height: 280px; }
@media (min-width: 1024px) { .caja-grafica { height: 320px; } }

/* --- Utilidades --- */
.recorte-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pestana {
  padding: .5rem .875rem; border-radius: .75rem .75rem 0 0;
  font-size: .8125rem; font-weight: 600; color: #6B6668; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.pestana.activa { color: #0B7A37; border-bottom-color: #199E46; background: #F1FAF3; }

/* Ocultar spinners de inputs numéricos */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

@media print {
  #barra-lateral, header, #avisos, .no-imprimir { display: none !important; }
  main { padding: 0 !important; }
}