/* app.css — Lana
   Clases reutilizables para los patrones más repetidos en la UI.
   Complementa los estilos en-línea del template; aplica donde el estilo es 100% estático. */

/* ----- Cards ----- */
.ln-card {
  background: #11151d;
  border: 1px solid #1c2230;
  border-radius: 13px;
  padding: 16px;
}
.ln-card-p18 {
  background: #11151d;
  border: 1px solid #1c2230;
  border-radius: 13px;
  padding: 18px;
}
.ln-inner {
  background: #161b25;
  border-radius: 10px;
  border: 1px solid #1c2230;
  padding: 10px 12px;
}

/* ----- Botones ----- */
.ln-btn-primary {
  padding: 10px 14px;
  border-radius: 9px;
  background: #4f7df0;
  color: white;
  font-weight: 600;
  font-size: 13px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.ln-btn-ghost {
  padding: 10px 14px;
  border-radius: 9px;
  background: #1a2030;
  border: 1px solid #232b3d;
  color: #e5e9f0;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.ln-btn-ghost:hover { background: #1f2840; }
.ln-btn-danger {
  padding: 10px 14px;
  border-radius: 9px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.28);
  color: #ef4444;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

/* ----- Tipografía ----- */
.ln-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f1f4f9;
}
.ln-meta {
  font-size: 11px;
  color: #7d8aa3;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ----- Formularios ----- */
.ln-input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid #232b3d;
  background: #161b25;
  color: #e5e9f0;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.ln-input:focus { border-color: rgba(79,125,240,0.5); }

/* ----- Barra de progreso ----- */
.ln-bar-track {
  background: #1c2230;
  border-radius: 4px;
  overflow: hidden;
}
.ln-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s;
}

/* ----- Estado vacío ----- */
.ln-empty {
  text-align: center;
  padding: 44px 16px;
  color: #7d8aa3;
  font-size: 13.5px;
}

/* ----- Tabs de vista (Presupuestos mensual/anual) ----- */
.ln-tabs {
  display: inline-flex;
  gap: 4px;
  background: #11151d;
  border: 1px solid #1c2230;
  border-radius: 10px;
  padding: 4px;
}
.ln-tab {
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.ln-tab-active  { background: #4f7df0; color: white; }
.ln-tab-inactive{ background: transparent; color: #7d8aa3; }
.ln-tab-inactive:hover { background: rgba(120,140,180,0.08); color: #cfd6e3; }

/* ----- Sparkline mensual (presupuesto anual) ----- */
.ln-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
}
.ln-spark-col {
  flex: 1;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s;
  min-height: 2px;
}